Project/ClassFlix
![[ClassFlix] EP 11. view 페이지 제작과 컨트롤러 연결 - 6 : 리뷰 삭제 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FW1l3S%2Fbtq4VCnyTbW%2F1p1gKeN34AoPqgW2iRLSpK%2Fimg.png)
[ClassFlix] EP 11. view 페이지 제작과 컨트롤러 연결 - 6 : 리뷰 삭제 구현
목차 (클릭시 해당 목차로 이동) 구현계획 view에서 삭제버튼을 누를시 해당 리뷰의 id, 강의의 id를 컨트롤러에 넘깁니다. 컨트롤러에서 reviewService.delete에 리뷰의 id, 강의의 id 를 넘깁니다. lectureService에 리뷰의 id, 강의의 id 넘깁니다. 강의 id로 해당 강의를 찾고 그 강의에 리뷰의 id 를 넘겨서 해당 id를 갖고있는 review를 제거합니다. reviewRepository에 리뷰의 id 를 넘겨서 엔티티를 찾고 EntityManager를 통해 해당 리뷰엔티티를 제거합니다. 실제 구현 view lecture.html url : /lectgures/{lectureId}/removeReview/{reviewId} method : post pathVaria..
[ClassFlix] EP 10. view 페이지 제작과 컨트롤러 연결 - 5 : 리뷰 수정 구현
목차 (클릭시 해당 목차로 이동) 프로젝트를 진행하면서 프론트부분은 최대한 템플릿을 이용해서 공부의 비중을 줄이려고 했습니다. 리뷰수정 부분을 페이지 이동없이 만드려고 했는데, ajax없이는 만드는 것이 어렵다고 판단되어서 ajax를 공부한 뒤 도입했습니다. 현재상황 현재 구현된 리뷰 시스템은 아래와 같습니다. 수정버튼, 삭제버튼 모두 비밀번호 검증을 합니다. 처음 리뷰 작성시 입력했던 비밀번호를 알맞게 입력하면 해당 기능이 동작합니다. 그런데, 삭제 후 비밀번호를 맞게 입력하면 댓글 하나를 삭제하면 되지만, 수정을 누를 시 현재 화면이 바뀌지 않고 현재 리뷰 글이 수정모드로 바뀌게 구현하고 싶었습니다. 구현계획 1 제가 생각한 기능을 구현하기 위해서 두가지 방법이 있었습니다. 다른 페이지에 동일한 데이..
[ClassFlix] EP 9. 중간점검 : 앞으로의 계획
목차 (클릭시 해당 목차로 이동) 앞으로 해야할 것 우선순위로 나열하기 리뷰수정기능개발 리뷰삭제기능개발 회원가입창에서 footer 크기조정 리뷰등록 디자인 (입력부분가로로나열, 등록버튼 모양) 사진등록기능 리팩토링 (쿼리나가는 개수 계산해서 성능 최적화하기) 디자인다듬기 느낀점, 발전할점, 추가할점 정리하기 리뷰수정기능 개발계획 비밀번호 입력창을 팝업으로 띄우기 - 비밀번호 맞는경우 -> 수정창으로 이동 - 비밀번호 틀린경우 -> 비밀번호가 틀렸습니다 알림 리뷰수정창에서 별점, 후기내용 수정가능 사진등록기능 개발계획 이미지를 데이터베이스에 저장하지 않고 로컬에 저장한다. 이미지 변수에는 이미지의 주소를 저장한다.
![[ClassFlix] EP 8. view 페이지 제작과 컨트롤러 연결 - 4](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNZOrL%2Fbtq4cuCJ79Q%2FFlNv1JF9xfn44Kde67e4sk%2Fimg.png)
[ClassFlix] EP 8. view 페이지 제작과 컨트롤러 연결 - 4
목차 (클릭시 해당 목차로 이동) lecture 정보 페이지 제작 강의소개 설계 왼쪽에는 강의 대표 이미지가 나오고 오른쪽에는 강의정보들이 나온다. 강의정보에는 강의이름, 강의자, 평균별점, 수강평개수, 원래사이트이름(클릭시 이동) 정보가 나온다. 아래에는 강의에 대한 소개를 담은 content를 볼 수 있게 한다. lecture.html bootstrap의 panel을 이용해 정보를 보여준다. thymeleaf를 이용해 컨트롤러에서 받은 lectureDto를 연결한다. 별점이 없을 경우에는 빈(회색) 별점 5개를 보여준다. 강의소개 강의이름 강의자 ★ ★★★★★ n개의 수강평 원래사이트 content lectureController @PathVariable을 이용해 실제 lecture 객체를 찾고, L..
![[ClassFlix] EP 7. view 페이지 제작과 컨트롤러 연결 - 3](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcnPr09%2Fbtq3NjXMjt9%2Flv01Avy0stUa8aThyXqaMK%2Fimg.png)
[ClassFlix] EP 7. view 페이지 제작과 컨트롤러 연결 - 3
목차 (클릭시 해당 목차로 이동) MemberForm에서 입력한 데이터 POST로 받아 멤버등록하기 memberForm.html 제작 멤버폼에서는 이름, 나이 성별, 직업을 받아야한다. 이름으로 중복회원을 검사한다 회원가입 이름 Incorrect date 나이 성별 남 여 직업 등록하기 성별은 enum으로 정해진 MALE, FEMALE만 받아야하기 때문에 라디오 체크박스로 구현했다. MemberController @PostMapping("/members/new") 제작 @PostMapping("/members/new") public String create(@Valid MemberForm form, BindingResult result) { if (result.hasErrors()) { return "m..
[ClassFlix] EP 6. view 페이지 제작과 컨트롤러 연결 - 2
목차 (클릭시 해당 목차로 이동) 컨트롤러 연결 홈 화면에서 아래와 같이 구현하려고 한다. 홈화면에서는 강의 목록을 불러오는 쿼리가 필요하다. Controller 컨트롤러에서 LectureService를 호출하고 모든 lectrue List를 받는다. 그리고 view에 lectures List를 뿌려준다. 또한, 홈화면 에서는 lecture의 모든 정보가 필요한 것이 아니므로 view에 의존하는 HomeLectureDto를 만들어서 넘길 것이다. package dongho.classflix.controller; import dongho.classflix.controller.dto.HomeLectureDto; import dongho.classflix.domain.Lecture; import dongho...
[ClassFlix] EP 5. view 페이지 제작과 컨트롤러 연결 - 1
목차 (클릭시 해당 목차로 이동) 이제는 View 계층 설계 및 구현의 차례이다. index.html 제작 설계 body header와 footer는 모든 곳에서 쓰기 때문에 여기서 미리 제작해놓는다. 점보트론으로 CLASS FLIX를 표시한다. NetFlix의 뷰 아이디어를 따왔다. 홈화면에서 category별 인터넷 강의를 바로 볼 수 있도록 한다. 구현 header bodyHeader CLASS FLIX 회원가입 강의등록 footer Copyright © 2021김동호(Dongho Kim) 대표자 소개저는 CLASS FLIX의 대표 김동호입니다. 홍익대학교 컴퓨터공학과에 재학중입니다. SNS 유투브 깃허브 블로그 home (index.html) CLASS FLIX 인강 추천좀 IT 분야 인기 강의 ..
![[ClassFlix] EP 4. domain, repository, service 계층별 설계 및 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwM2IN%2Fbtq3vVuz7F7%2FBdU7x73ocyJkGd1sLbnZdK%2Fimg.png)
[ClassFlix] EP 4. domain, repository, service 계층별 설계 및 구현
목차 (클릭시 해당 목차로 이동) * 현재 작성한 코드 기준이며 언제든지 코드는 바뀔 수 있습니다. 바뀐 코드는 아래 깃허브 주소에서 보실 수 있습니다. github.com/dongho108/ClassFlix/tree/develop dongho108/ClassFlix 회원등록, 강의정보등록, 후기등록이 가능한 웹사이트를 구축합니다. Contribute to dongho108/ClassFlix development by creating an account on GitHub. github.com 도메인 Member 설계 Long id @Id, @GeneratedValue, @Column String username 필수 o int age 필수 o Gender gender 필수 o String career 필..
![[ClassFlix] EP 3. 도메인 설계와 테이블 생성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcASsZt%2Fbtq3bVaXlSY%2Faef3nQz6LObLKZPmVZg7bk%2Fimg.jpg)
[ClassFlix] EP 3. 도메인 설계와 테이블 생성
목차 (클릭시 해당 목차로 이동) 프로젝트에 필요한 도메인을 설계해본다. 1. 실세계 요구사항 분석 - 먼저 실제 세계에서 어떤 시스템을 구축할 것인지 말로 듣는 것 처럼 시작합니다. "우리는 회원관리, 강의정보등록, 후기작성 웹사이트를 구축할 예정입니다. 웹 사이트에 접속한 클라이언트는 회원등록 (자신의 이름, 나이, 성별, 직업) 을 등록할 수 있습니다. 그리고 강의정보 (강의 이름, 강의자 이름 등)을 등록할 수 있습니다. 또한, 강의를 선택하고 회원을 선택하고 후기를 남길 수 있습니다." 2. 개발을 위한 요구사항 분석 도메인 회원 : 이름, 나이, 성별, 직업 강의 : 강의이름, 강의자이름, 썸네일, 사이트이름, 실제강의URL 후기 : 회원정보, 비밀번호, 별점, 내용, 작성한날짜 요구사항 회원..
![[ClassFlix] EP 2. 개발환경 세팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fck5YYC%2Fbtq231KaEhF%2F1preanMYEQzLEdCTsBK1n0%2Fimg.png)
[ClassFlix] EP 2. 개발환경 세팅
목차 (클릭시 해당 목차로 이동) IntelliJ로 Spring 시작 spring initializer를 이용해 연관관계를 한번에 끌어온다. 기존에 배웠던 기술들을 이용할 것이기 때문에 Spring web Lombok Spring Data Jpa H2 Database 네가지를 다 가져온다 Git 연동 초기세팅 및 원격 저장소와 연결 git init . git add . crlf 오류시 git config --global core.autocrlf true input git commit -m "inital commit" git remote add origin https://www.github.com/dongho/~~ git push -u origin master git branch --set-upstream..