반응형 웹개발/DIOS10 [웹개발 - DIOS] DIOS 팀 프로젝트 🖥 DIOS : 머신러닝을 이용하여 운동 횟수를 세어주고, 기록하여 운동 습관을 만들 수 있게 도와주는 웹 서비스 📌 DIOS 제작 계기 Teachable Machine 이라는 머신러닝 API 를 알게됐다. 머신러닝에 대해 전혀 모르던 나도 쉽게 사용이 가능할 만큼 쉽고 재밌는 기능이었다. 프로젝트에 꼭 사용해 보고싶어서 생각하던 중, 포즈 학습 기능을 통해 운동 자세를 학습시켜 운동 횟수를 세어주는 기능을 만들어 보고싶다는 생각이 들었다. 팀원들에게 이 아이디어를 제안했더니 흔쾌히 수락하여 프로젝트를 진행하게 되었다. 요즘 사람들은 매체에 '홈 트레이닝' 을 검색만 해도 알 수 있듯이, 운동을 통한 자기관리에 관심이 많다. 꾸준히 하는 사람들도 많겠지만 작심삼일로 끝나버리는 사람들도 분명 있을 것이다... 2023. 2. 26. [웹개발 - DIOS] 홈 페이지 ⌦ 홈 페이지 ☑︎ 홈 페이지 홈 페이지는 길어지더라도 모든 팀원들이 만든 기능이 보여졌으면 좋겠다는 생각을 했다. 그래서 모든 기능을 다 넣었다. • 메인 문구 들어가자마자 보이는 열심히 운동하는 사진들에 마우스를 올려보면 문구가 뜬다. • 사용설명서, 기록장 바로가기, 쇼핑몰 바로가기 다음은 사용설명서와 기록장, 쇼핑몰 바로가기 버튼이 뜬다. 이 웹 서비스를 처음 이용하는 사용자는 사용법을 모를 수 있을 것 같아 설명서를 만들었다. • 회원가입 바로가기 회원가입 버튼에 마우스를 올리면 광택이 나는 효과를 주고싶어서 찾아보고 넣었다. - HTML 회원가입 하기 - CSS #hover { border: 0.1rem solid rgb(0, 0, 0); overflow: hidden; position: re.. 2023. 2. 26. [웹개발 - DIOS] 랜덤으로 상품 추천하기 ☑︎ 랜덤으로 상품을 추천하는 기능 • 쇼핑몰 상품 목록 페이지 추천 상품은 한 번에 8개씩이다. 4개의 추천 상품이 랜덤으로 뜬 다음 1.5 초 뒤에 다른 4개의 상품이 뜬다. 새로고침하면 다른 8개의 상품이 같은 방식으로 뜬다. - Mapper, xml int[] selectIndex(); SELECT `index` AS `index` FROM `dios_store`.`items` items table 에는 DIOS 쇼핑몰에 존재하는 모든 상품의 정보가 담겨있다. items table 의 index 를 모두 select 하여 배열에 담아준다. - Service public int[] getIndex() { return this.goodsMapper.selectIndex(); } - Controller.. 2023. 2. 26. [웹개발 - DIOS] 주문완료 페이지 ⌦ 주문완료 페이지 ☑︎ 배송지 정보와 상품 정보 출력 기능 - Controller @RequestMapping(value = "orderSuccess", method = RequestMethod.GET) public ModelAndView getOrderSuccess(@SessionAttribute(value = "user", required = false) UserEntity user, @RequestParam(value = "num") BigInteger orderNum) { ModelAndView modelAndView; if (user == null) { modelAndView = new ModelAndView("redirect:/dios/login"); } else { modelAndView .. 2023. 2. 25. [웹개발 - DIOS] 주문 페이지 ⌦ 주문 페이지 ☑︎ orders table (DB) 장바구니 페이지(2) 에서도 다루었지만 orders table 을 따로 만든 이유는 하나로 만들게 되면 주문 완료하여 지워진 상품의 레코드를 더 이상 select 하지 못하게 되어 주문 내역 페이지를 만들 수 없다는 점이 문제가 되었다(주문이 완료가 되면 장바구니에서는 지워져야 하는데 장바구니 select 부분은 table 의 모든 레코드를 select 하므로 레코드가 영구 삭제되어야만 한다.). 그래서 carts table 과 orders table 을 따로 만들어 정보를 저장하기로 했다. 주문 페이지에서 최종 주문이 완료되면 장바구니에 담겨있다가 넘어온 상품들이 삭제되어야 한다. 주문 완료가 되었는데도 장바구니에 주문 한 상품이 남아 있으면 안되기.. 2023. 2. 25. [웹개발 - DIOS] 장바구니 페이지 (2) ⌦ 장바구니 페이지 ☑︎ 체크박스 기능 - JavaScript // 체크박스 전체선택 / 전체해제 function selectAll(selectAll) { const checkboxes = document.getElementsByName('select'); checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }) } // 체크박스 하나라도 해제되면 전체선택 체크박스 풀리는 거 function checkSelectAll(check) { // 전체 체크박스 const checkboxes = document.querySelectorAll('input[name="select"]'); // 선택된 체크박스 const checked = .. 2023. 2. 25. [웹개발 - DIOS] 장바구니 페이지 (1) ⌦ 장바구니 페이지 ☑︎ 장바구니 상품 목록을 출력하는 기능 carts table 을 몇 번을 고쳤는지 모르겠다. items table 과 관련이 있기 때문에 items table 만드는 것부터 items 파트 담당 팀원과 같이 머리 싸매서 만들었다. 이 프로젝트 하면서 가장 머리통 깨질 뻔 한 일이다. 제일 효율적인 table 을 만들기 위해 에러도 많이 내고 여러가지 방법으로 바꿔가면서 만들었다. - CartVo public class CartVo extends CartEntity { private String itemName; private int price; private byte[] image; private String imageMime; } 장바구니 페이지에서 필요한 정보는 carts tab.. 2023. 2. 24. [웹개발 - DIOS] 기록장 페이지 ⌦ 기록장 페이지 ☑︎ 운동 개수를 기록장에 기록해 주는 기능 • 목표 개수를 달성했을 때 목표 개수를 달성하면 화면이 멈추고 2초 뒤에 성공화면이 뜨면서 record(기록) 버튼과 exit(home 화면으로 돌아가기) 버튼이 뜬다. record 버튼을 누르면 기록장으로 이동하며, 측정 기록이 저장된다. • 목표 개수를 달성하지 못했을 때 목표 개수를 달성하지 못해도 기록하기 버튼을 누른 뒤, RECORD 버튼을 누르면 기록장에 기록은 할 수 있다. 마찬가지로 기록장으로 이동하며, 측정기록이 자동으로 저장된다. - Controller @RequestMapping(value = "count", method = RequestMethod.POST, produces = MediaType.APPLICATION_J.. 2023. 2. 23. [웹개발 - DIOS] Teachable Machine 를 이용한 운동 횟수 세는 페이지 / Teachable Machine / 티처블머신 / 머신러닝 ⌦ Teachable Machine 를 이용한 운동 횟수 세는 페이지 ☑︎ Teachable Machine https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle.com 2023. 2. 23. [웹개발 - DIOS] 운동 목표 개수 설정 페이지 ⌦ 목표 개수 설정 페이지 ☑︎ 운동의 종류를 선택하는 기능 - HTML - CSS body > .main > .form > .select-container > .select:hover, body > .main > .form > .select-container > .select:focus, body > .main > .form > .select-container > .select.selected { background-color: rgb(30, 28, 28); color: rgb(255, 255, 255); font-weight: 500; border: 0.2rem solid rgb(30, 28, 28); } - javaScript const form = document.getElementById('fo.. 2023. 2. 22. 이전 1 다음 반응형
