웹 프로그래밍 언어와 데이터베이스를 이용하여 쇼핑몰 웹 사이트를 구현하고 설계하고 구현한다.
- Node.js 설치
- MySQL 설치
- MySQL 인스턴스 생성
- 프로젝트 폴더 내의 'database.sql' 파일에 있는 명령어들을 복사하여 mysql 실행 후 붙여넣기하여 입력
- 프로젝트와 데이터베이스 연동
- lib폴더 내의 'db.template.js' 파일에서 user, password에 mysql 정보들을 입력 후 저장
- 'db.template.js' 파일의 이름을 'db.js'로 변경
- 프로그램에 필요한 NPM 모듈 설치
- CMD창에서 프로젝트 폴더 디렉토리로 이동 후 'npm install' 명령어 입력
- 프로젝트 실행
- CMD창에서 프로젝트 폴더 디렉토리 이동 후 'npm run start' 명령어 입력
- 웹 브라우저에서 http://localhost:3000/으로 이동
※ ngrok npm을 이용하면 외부ip에서도 프로젝트 웹 어플리케이션에 접속 가능합니다. 사용 방법은 '6. 프로젝트 실행'에서 'npm run start' 입력 전에 아래 입력어를 먼저 입력해 주세요
npm install ngrok - g
ngrok http 3000
- HTML
- CSS
- Media Query
- Bootstrap
- JavaScript
- Node.js
- Express.js
- NPM
- MySQL
- 메인 페이지
- 상품 목록
페이지당 보여지는 상품의 개수가 최대 12개가 되도록 페이징
- 반응형 웹사이트
미디어쿼리를 이용하여 브라우저 크기에 따라 웹사이트의 레이아웃 변화. 브라우저의 가로길이가 줄어들면 좌측 네비게이션바가 숨겨지고 상단 네비게이션바에 'Menu' 버튼이 생성됨. 'Menu' 버튼을 누르면 좌측 네비게이션바를 숨기고 드러낼 수 있음.
- 회원가입 페이지
- 회원가입 페이지 - 이메일 중복 체크
- 로그인 페이지
- 이메일 찾기
- 비밀번호 찾기
- 로그인 후
- 제품 상세 보기
- 장바구니 페이지
- 회원정보 수정 페이지(상단 네비게이션바의 '회원정보' 클릭)
- 관리자 로그인후
상단 네비게이션 바에 '장바구니' 링크 대신 '관리자 페이지' 링크 생성
- 관리자 페이지
- 상품 등록 페이지
- 상품 정보 수정 페이지
- 관리자 계정에서의 상품 상세 보기 페이지
- 상품 정보 테이블
- 회원 정보 테이블
