온라인 식료품 점은 웹 프로그래밍 프로젝트를위한 전자 상거래 기반 웹 응용 프로그램입니다. 우리는 사용자가 식료품 점에 대한 필요한 정보를 검색하고 찾을 수있는 샘플을 개발했으며 제품 구매를 확인할 수 있습니다. 사용자는 계정을 생성하고 개인 정보를 업데이트하며 과거 활동, 주문 및 거래 및 카트 항목을 확인할 수 있습니다.
https://github.com/parasgarg/online-grocery-store/
https://drive.google.com/file/d/0b79vfv-wa7ezme9wvmsxtepzmjg/view?usp=sharing
프론트 엔드 언어 : HTML, CSS 및 클라이언트 측 JavaScript 프론트 엔드 프레임 워크 : 부트 스트랩 프론트 엔드 라이브러리 : jQuery 백엔드 : 서버 측 JavaScript 백엔드 프레임 워크 : NodeJS 및 NPM 데이터베이스 : MongoDB 기타 라이브러리 : TOTA11Y 및 HTML 검증자 도구 : MS Command Code, MS Command Code
"bcrypt": "^1.0.2", "body-parser": "^1.17.1", "connect-flash": "^0.1.1", "쿠키 파서": "^1.4.3", "쿠키 세션": "^2.0.0-beta.1", "express": "^4.15.2", "express-raneport" "^0.1.0", "Express-Passport-Logout": "^0.1.0", "Express-Session": "^1.15.2", "handlebars-intl": "^1.1.2", "handlebars-paginate": "^0.1.0", "Mongodb": "^2.26", "Passport": "^0.2." "Path": "^0.12.7", "RandomString": "^1.1.5", "uuid": "^3.0.1", "validator": "^7.0.0", "xss": "^0.3.3"
시스템 및 환경을 설치하고 구성 한 후. 프로젝트를 실행하려면 단계에 따라 -
사용자 가입/서명 : 사용자는 모든 종류의 구매를 위해 계정을 만들어야하지만 프로젝트 및 기타 검색을 확인하려면 사용자를 로그인 할 필요가 없습니다. 첫 번째 사용자가 등록되어 로그인해야합니다. 계정 생성을 위해서는 가입 버튼을 클릭해야합니다. 모든 계정 생성 양식 요구 사항을 충족하여 당사에 등록하십시오. 로그인하기를 원한다면 로그인하여 우리와 함께 설정된 자격 증명을 제공해야합니다. 사용자가 암호를 잊어 버린 경우 새 비밀번호를 재생하는 모듈을 제공합니다. 잊어 버린 모듈의 링크는 사인에 참조 할 수 있습니다.
사용자 대시 보드 : 사용자 정보 및 기타 설정을 변경하려면 대시 보드 패널에서 모듈을 개발했지만 사용자는 자신의 이름을 클릭 할 때 페이지의 오른쪽 상단에서 이러한 모든 옵션을 찾을 수 있습니다.
2.1 계정 설정 :이 모듈은 사용자 프로필 및 비밀번호 정보를 변경하는 패널을 제공합니다. 2.2 결제 설정 :이 모듈은 사용자가 손쉬운 지불 및 주문 기능을 위해 카드 정보를 저장하는 데 도움이됩니다. 2.3 지갑 설정 :이 모듈에서 사용자는 카드 정보를 사용하지 않고 더 많은 현금을 추가하거나 구매 품목을 추가하여 전자 현금을 유지할 수 있습니다. 사용자는 저장된 카드에서 현금을 추가하거나 저장 카드 이외의 사용할 수 있지만 사용자는 한 번의 거래에 최대 $ 1000를 추가 할 수 있으며 전체 $ 10000가 허용됩니다. 동시에 사용자는 동일한 페이지에서 지갑 활동과 세부 사항을 확인할 수 있습니다. 2.4 주문 기록 :이 기능은 사용자가 과거 구매 및 구매 날짜, 구매 된 제품 및 지불 정보와 같은 기타 세부 사항을 확인하는 데 도움이됩니다. 2.5 뉴스 레터 : 사용자는 Neweletters를 관리하고 구독하거나 구독 할 수 있습니다. 2.6 로그 아웃 : 사용자는 계정의 악용을 피하기 위해 성공적으로 로그 아웃 할 수 있습니다.
사용자 카트 : 사용자는 품목을 추가하거나 제거 된 항목을 추가하거나 각 항목의 정지를 편집 할 수 있습니다 (제품 당 최대 5 수량이 허용됨). 여기서 사용자는 총 결제 정보를 확인하고 체크 아웃을 진행할 수 있습니다.
Seach 제품 : 사용자는 페이지 상단에있는 검색 창에 제품, ID, 이름, 브랜드 및 카테고리를 입력하여 Seach를 할 수 있습니다.
필터링 검색 : 사용자는 가격 범위 및 범주에 따라 검색을 수정할 수 있습니다. 이 기능은 검색 결과에서 사용할 수 있습니다.
카테고리 검색 : 사용자는 로고 바로 옆의 페이지의 왼쪽 상단 코너에서 카테고리를 선택하여 카테고리에 따라 제품을 직접 검색 할 수 있습니다.
제품 정보 : 사용자는 각 제품 썸네일에서 제목 또는 주어진보기 버튼을 클릭하여 제품 정보를 확인하고 제품에 대한 자세한 내용을 발견하고 항목 표시 그림 아래에서 카트에 추가 버튼을 클릭하여 카트에 추가 할 수 있습니다.
기타 : 우리는 사용자가 지불 모드, 즉 저장된 카드, 새 카드 및 지갑을 선택할 수있는 가짜 게이트웨이를 구현했습니다. 사용자는 상장 된 모든 모드별로 금액을 지불하고 하단에서 지불 정보를 검토 한 다음 확인 메시지가 표시되는 경우 확인 및 주문을 생성하거나 주문 (사용자 대시 보드에서 사용할 수 있음)을 지불 할 수 있습니다.