맥 앱스토어
사용자가 macOS 앱과 음악을 찾고 검색할 수 있는 동적 웹사이트
여기 웹사이트를 확인해 보세요!
목차
- 프로젝트 소개
- 논리 설계
- 사용자 인증
- 동적 웹페이지
- API 및 AJAX
- 스크롤링
- 로컬 저장소
- 요구사항
- 시작하기
- 특허
- 감사의 말
프로젝트 소개
Mac App Store 웹사이트는 사용자가 실제 Mac App Store에서 사용 가능한 모든 앱을 찾을 수 있는 허브가 되는 동시에 전용 Apple Music 섹션을 통해 노래를 찾을 수 있는 장소 역할을 하는 것을 목표로 합니다. 사용자는 전용 구매 섹션에서 구매한 앱(시연 목적으로만)을 다운로드할 수도 있습니다. Mac App Store의 미니멀한 디자인은 추천, 인기 차트, 카테고리, 검색, Apple Music과 같은 기능과 결합되어 사용자가 다음 앱이나 노래를 즉시 찾는 데 도움이 됩니다.
다음으로 제작됨
- HTML
- CSS
- 자바스크립트
- jQuery
- PHP
- iTunes 검색 API
논리 설계
사용자 인증
- PHP는 사용자가 새 계정을 등록한 후 세션 쿠키에 자격 증명을 저장하는 데 사용됩니다.
- Bycrypt는 등록 중에 사용자가 제출한 비밀번호를 해시하고 저장하는 데 사용됩니다. 사용자가 로그인하려고 하면 저장된 해시를 새 해시와 비교하여 사용자에게 권한을 부여합니다.
- 사용자가 새 계정을 성공적으로 생성하려면 등록 페이지에 유효해 보이는 이메일 주소와 강력한 비밀번호가 필요합니다.
- 사용자는 로그아웃할 때까지 로그인/등록 페이지로 돌아갈 수 없습니다. 또한 사용자는 로그인하지 않으면 로그인/등록 페이지를 제외한 다른 페이지로 이동할 수 없습니다.
동적 웹페이지
- 로그인/등록: 사용자가 “Create One!”을 클릭하면 링크를 클릭하여 새 계정을 등록하면 새 등록 창이 팝업되어 기존 로그인 본문을 대체합니다. 등록창을 닫으면 사라지고 로그인창이 다시 나타납니다.
- 검색: 홈페이지에서 앱을 검색하면 본문의 기존 콘텐츠가 삭제되고 앱 페이지 링크와 함께 앱(찾은 경우)이 표시됩니다. 검색창을 닫으면 이전 화면으로 돌아갑니다.
- 앱 페이지: 웹사이트에서 앱을 클릭하면 사용자는 해당 특정 앱에 대한 설명, 스크린샷, 리뷰 등을 보여주는 동적 웹페이지로 이동됩니다.
- 음악 페이지: 이 페이지는 사용자가 음악을 검색할 때 동적으로 변경됩니다. 이 페이지는 또한 사용자의 작업에 따라 자체 페이지와 검색 페이지 사이를 동적으로 변경합니다.
- 구매 페이지: 이 페이지는 사용자의 작업에 따라 자체 페이지와 검색 페이지 사이를 동적으로 변경합니다.
API 및 AJAX
iTunes API는 AJAX 방법을 사용하여 액세스하여 웹 사이트의 모든 앱과 노래에 대한 데이터를 검색한 다음 jQuery를 통해 HTML 코드에 삽입합니다.
스크롤링
홈 페이지에서 왼쪽/오른쪽 버튼을 클릭하면 콘텐츠가 왼쪽 및 오른쪽으로 스크롤됩니다. 또한 버튼은 콘텐츠의 위치에 따라 원활하게 사라지거나 다시 나타나며 왼쪽/오른쪽 버튼을 클릭하거나 수동 가로 스크롤을 시작하여 변경할 수 있습니다.
로컬 저장소
사용자가 방문하려는 앱이나 구매한 앱에 대한 정보는 로컬 저장소에 저장되며 다양한 페이지에서 해당 특정 앱의 데이터를 검색하는 데 사용됩니다.
요구사항
시작하기
여기
- 저장소에서 모든 파일 다운로드
- zip 폴더를 PHP 폴더/서버로 추출합니다.
- localhost를 통해 index.html 열기
특허
MIT 라이센스에 따라 배포됩니다.
감사의 말