ร้านขายของชำออนไลน์เป็นเว็บแอปพลิเคชันที่ใช้อีคอมเมิร์ซสำหรับโครงการเขียนโปรแกรมเว็บของเรา เราได้พัฒนาตัวอย่างที่ผู้ใช้สามารถค้นหาและค้นหาข้อมูลที่จำเป็นเกี่ยวกับรายการของชำใด ๆ สามารถดำเนินการชำระเงินเพื่อซื้อผลิตภัณฑ์ได้ ผู้ใช้สามารถสร้างบัญชีอัปเดตข้อมูลส่วนบุคคลสามารถตรวจสอบกิจกรรมที่ผ่านมาคำสั่งซื้อและธุรกรรมและรายการรถเข็น
https://github.com/parasgarg/online-grocery-store/
https://drive.google.com/file/d/0b79vfv-wa7ezme9wvmsxtepzmjg/view?usp=sharing
ภาษาส่วนหน้า: HTML, CSS และกรอบการทำงานด้านหน้า JavaScript ฝั่งไคลเอ็นต์: Bootstrap Library: JQuery Backend: JavaScript Backend Framework: ฐานข้อมูล NodeJS และ NPM
"bcrypt": "^1.0.2", "Body-Parser": "^1.17.1", "Connect-Flash": "^0.1.1", "Cookie-Parser": "^1.4.3", "Cookie-Session": "^2.0.0-beta.1" "^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.2.26" "Path": "^0.12.7", "Randomstring": "^1.1.5", "Uuid": "^3.0.1", "Validator": "^7.0.0", "XSS": "^0.3.3"
หลังจากติดตั้งและกำหนดค่าระบบและสภาพแวดล้อม ทำตามขั้นตอนเพื่อเรียกใช้โครงการ -
การลงทะเบียน/Signin ผู้ใช้: ผู้ใช้จำเป็นต้องสร้างบัญชีเพื่อทำการซื้อใด ๆ แต่เพื่อตรวจสอบโครงการและการค้นหาอื่น ๆ ไม่จำเป็นต้องมีผู้ใช้เข้าสู่ระบบผู้ใช้แรกต้องลงทะเบียนและลงชื่อเข้าใช้เพื่อตรวจสอบกิจกรรมล่าสุดธุรกรรมการเข้าถึง e-wallet และรายการรถเข็น สำหรับการสร้างบัญชีผู้ใช้จำเป็นต้องคลิกที่ปุ่มลงทะเบียนจะตอบสนองความต้องการแบบฟอร์มการสร้างบัญชีทั้งหมดเพื่อลงทะเบียนกับเรา ในกรณีที่คุณต้องการลงชื่อเข้าใช้เขาต้องลงชื่อเข้าใช้และให้ข้อมูลรับรองที่ได้รับการตั้งค่ากับเรา ในกรณีที่ผู้ใช้ลืมรหัสผ่านเรามีโมดูลเพื่อสร้างรหัสผ่านใหม่ใหม่ ลิงค์สำหรับโมดูล Forgot สามารถพบได้ในการลงชื่อเข้าใช้
ผู้ใช้แดชบอร์ด: ในการเปลี่ยนข้อมูลผู้ใช้และการตั้งค่าอื่น ๆ เราได้พัฒนาโมดูลในแผงแผงควบคุม แต่ผู้ใช้ยังสามารถค้นหาตัวเลือกเหล่านี้ทั้งหมดที่มุมขวาบนของหน้าเมื่อผู้ใช้คลิกที่ชื่อของเขา/เธอ
2.1 การตั้งค่าบัญชี: โมดูลนี้ให้แผงเพื่อเปลี่ยนข้อมูลผู้ใช้และข้อมูลรหัสผ่าน 2.2 การตั้งค่าการชำระเงิน: โมดูลนี้ช่วยให้ผู้ใช้จัดเก็บข้อมูลบัตรกับเราเพื่อให้ได้ฟังก์ชั่นการชำระเงินและการสั่งซื้อที่ง่าย 2.3 การตั้งค่า Wallet: ในโมดูลนี้ผู้ใช้สามารถรักษา e-cash ได้โดยการเพิ่มเงินสดหรือรายการซื้อเพิ่มเติมโดยไม่ต้องใช้ข้อมูลบัตรใด ๆ ผู้ใช้สามารถเพิ่มเงินสดจากบัตรที่บันทึกไว้หรือใช้นอกเหนือจากการบันทึกการ์ด แต่ผู้ใช้สามารถเพิ่มสูงสุด $ 1,000 ในการทำธุรกรรมเดียวและอนุญาตให้ $ 10,000 โดยรวม ในขณะเดียวกันผู้ใช้สามารถตรวจสอบกิจกรรมและรายละเอียดของกระเป๋าเงินในหน้าเดียวกัน 2.4 ประวัติการสั่งซื้อ: คุณสมบัตินี้ช่วยให้ผู้ใช้ตรวจสอบการซื้อที่ผ่านมาและรายละเอียดอื่น ๆ เช่นวันที่ซื้อผลิตภัณฑ์ที่ซื้อและข้อมูลการชำระเงิน 2.5 จดหมายข่าว: ผู้ใช้สามารถจัดการและสมัครสมาชิกหรือยกเลิกการสมัครสมาชิกใหม่ของเรา 2.6 ออกจากระบบ: ผู้ใช้สามารถลงทะเบียนได้สำเร็จเพื่อหลีกเลี่ยงการใช้ประโยชน์จากบัญชี
รถเข็นผู้ใช้: ผู้ใช้สามารถเพิ่มรายการหรือลบรายการหรือแก้ไข quatity สำหรับแต่ละรายการ (อนุญาตสูงสุด 5 ปริมาณต่อผลิตภัณฑ์) ที่นี่ผู้ใช้สามารถตรวจสอบข้อมูลการชำระเงินทั้งหมดและดำเนินการชำระเงิน
Seach Product: ผู้ใช้สามารถ Seach ได้โดยพิมพ์ ID ของผลิตภัณฑ์ชื่อแบรนด์และหมวดหมู่ในแถบค้นหาที่มีอยู่ด้านบนของหน้า
การค้นหาที่ผ่านการกรอง: ผู้ใช้สามารถปรับแต่งการค้นหาตามช่วงราคาและหมวดหมู่ คุณสมบัตินี้จะมีอยู่ในผลการค้นหา
การค้นหาหมวดหมู่: ผู้ใช้สามารถค้นหาผลิตภัณฑ์โดยตรงตามหมวดหมู่โดยเลือกหมวดหมู่ที่มุมบนซ้ายของหน้าตรงกับโลโก้
ข้อมูลผลิตภัณฑ์: ผู้ใช้สามารถตรวจสอบข้อมูลผลิตภัณฑ์ได้โดยคลิกที่หัวเรื่องหรือปุ่มมุมมองที่กำหนดในรูปขนาดย่อของผลิตภัณฑ์แต่ละอันและค้นพบเพิ่มเติมเกี่ยวกับผลิตภัณฑ์และสามารถเพิ่มลงในรถเข็นได้โดยคลิกที่ปุ่มเพิ่มลงในปุ่มรถเข็นใต้ภาพแสดงของรายการ
อื่น ๆ : เราได้ใช้เกตเวย์ปลอมที่ผู้ใช้สามารถเลือกโหมดการชำระเงินเช่นการ์ดที่บันทึกไว้การ์ดใหม่และกระเป๋าเงิน ผู้ใช้สามารถชำระเงินตามจำนวนโดยโหมดใด ๆ ที่ระบุไว้และตรวจสอบข้อมูลการชำระเงินที่ด้านล่างจากนั้นสามารถชำระเงินและดำเนินการต่อไปยังขั้นตอนสุดท้ายซึ่งเป็นการยืนยันที่ข้อความยืนยันจะแสดงและสร้างธุรกรรมหรือสั่งซื้อ (ซึ่งจะมีอยู่ในแผงควบคุมของผู้ใช้)