뮤지컬 관련하여 리뷰 및 정보를 공유하는 사이트를 만들었습니다.
팀원으로는 강서현, 정해연, 이지영 으로 구성되어 있습니다.
사이트 바로가기 : MYUDUCK
- Front-end :
- Back-end :
- Databse :
저희 사이트는 뮤지컬에 대한 리뷰와 정보를 공유하는 플랫폼으로, 뮤지컬 팬들이 다양한 작품과 배우에 대한 소식을 즐기고 공유할 수 있는 공간입니다. 주요 기능으로는 검색과 찜 기능이 제공되어 사용자들이 원하는 콘텐츠를 쉽게 찾아볼 수 있습니다.
검색 기능을 통해 사용자는 원하는 뮤지컬이나 배우를 빠르게 찾을 수 있습니다. 전체적인 검색 또는 특정 카테고리 선택을 통해 선호하는 내용을 쉽게 발견할 수 있는 검색페이지가 제공됩니다.
또한, 찜 기능을 통해 사용자들은 마이페이지에서 자신이 좋아하는 뮤지컬이나 배우를 관리할 수 있습니다. 두 페이지에 따로 위치한 찜 목록을 통해 사용자는 간편하게 찜한 내용들을 확인할 수 있으며, 마이페이지에서는 찜한 항목을 클릭하면 해당 배우나 뮤지컬의 상세페이지로 이동할 수 있습니다.
이용약관 동의를 받으며, JavaScript를 활용하여 동의 여부를 체크하고 가입 버튼을 통해 회원 정보 입력 페이지로 이동합니다. 회원 정보 입력 페이지는 아이디와 이메일 중복검사, 주소 검색 등 다양한 기능을 제공합니다. Jquery를 활용하여 유효성 검사와 중복 확인을 수행하며, Daum 우편번호 API를 이용하여 주소를 편리하게 검색할 수 있습니다.
게시판 목록 페이지는 게시글 나열과 검색, 페이징을 포함한 웹 페이지로, 데이터베이스 연결과 세션 관리 초기화 후 게시판 테이블 내용을 변수에 저장하여 글 수를 계산하고, 제목, 작성자, 날짜, 조회수 등의 정보는 데이터베이스의 게시판 및 회원 테이블을 결합하여 동적으로 출력하며, 검색은 GET으로 페이지 정보를 가져와 SQL 인젝션 방지를 위해 처리됩니다. 게시판 작성 페이지는 HTML 폼을 통해 "QAWriteSave.php"로 데이터 전송하며, 게시판 상세 페이지에서는 로그인 상태와 글 번호를 고려하여 조회하고 댓글 관리 및 Ajax를 활용한 비동기 통신이 구현되어 있습니다. 종합적으로 효과적인 게시판 조회, 관리, 댓글 기능을 제공하고 있습니다.
찜하기 동작을 처리하며, 클라이언트에서 전송된 데이터를 확인하고 로그인 상태를 검사한 후 찜하기 또는 찜 취소 동작을 수행합니다. 데이터베이스에 이미 해당 조건의 레코드가 있는지 확인하고, 그에 따라 레코드를 추가하거나 업데이트한 후 결과를 JSON으로 응답합니다. 사용자의 초기 찜 상태를 확인할 수 있습니다. 클라이언트의 POST 요청을 처리하고 사용자의 로그인 상태를 확인한 후 해당 배우에 대한 찜 상태를 데이터베이스에서 조회하여 JSON 형식으로 반환합니다. 초기 찜 상태가 존재할 경우 해당 정보를 전달합니다.
공연장 정보를 데이터베이스에서 가져와 동적으로 웹 페이지에 출력힙니다. 각 공연장의 로고, 이름, 주소, 최근 주요 작품 등의 정보를 포함한 목록이 표시되며, 지도는 Kakao Maps API를 사용하여 표현하였습니다. 반복문을 활용하여 공연장 정보를 동적으로 출력하고, 클릭 시 해당 공연장의 상세 페이지로 이동하는 기능이 구현하였습니다.
사용자가 입력한 검색어와 옵션에 따라 뮤지컬, 배우, 극장의 정보를 동적으로 검색하여 웹 페이지에 결과를 출력하도록 구현하였습니다. 색 입력 폼과 카테고리 링크를 보여주고, 사용자 입력에 따라 실제 검색 결과를 동적으로 생성합니다. 결과는 뮤지컬, 배우, 극장에 대한 이미지와 링크로 구성되며, 해당 항목을 클릭하면 상세 정보 페이지로 이동합니다. 또한, 검색 결과가 없을 경우 "검색 결과가 없습니다." 메시지와 함께 관련 이미지가 표시됩니다. 코드는 jQuery와 Lenis 라이브러리를 사용하였습니다.