đề tài xây dựng web bán hàng e commerce

MEAN là mữ ứ ủ ỗ ừ ế ắ ột ngăn xếp JavaScript dựa vào việc sử dụng Angular cho khung JavaScript front-end của nó, trong khi đó, ngăn xếp MERN dựa trên React và h sinh thái cệ ủa nó.. Cuố

Thành phố H Chí Minh, thángồ 12 năm 2021

CÔNG NGHỆ WEB

ĐỀ TÀI: XÂY DỰNG WEB BÁN HÀNG E-COMMERCE

Giảng viên hướng dẫn : Lương Trần Hy Hiến

• Sinh viên th c hiự ện: Trần Hoàng Khang

• MSSV: 4501104108

• Nhóm: MEVN

2

Lời c ảm ơn

Lời đầu tiên chúng em xin chân thành cảm ơn thầy Lương Trần Hy Hiến giảng dạy bộ môn “Công nghệ Web” tại trường đại học Sư Phạm TPHCM, đã hướng dẫn nhóm làm đồ án môn học Trong thời gian được học tập và thực hành dưới sự hướng dẫn c a thủ ầy, chúng em thu được r t nhi u ki n th c hay và b ích N u không có nh ng ấ ề ế ứ ổ ế ữlời hướng dẫn, dạy bảo của thầy thì chúng em nghĩ đồ án này của chúng em rất khó có thể hoàn thành được

Mặc dù đã rất cố gắng hoàn thiện đồ án với tất cả sự nỗ lực, tuy nhiên trong quá trình tìm hi u, xây dể ựng đồ án trong th i gian có h n và ki n th c còn h n ch , nhiờ ạ ế ứ ạ ế ều

bỡ ngỡ, nên đồ án “Xây d ng Web bán hàng E-Commerceự ” chắc ch n s không th ắ ẽ ểtránh kh i nh ng thi u sót Chúng em r t mong nhỏ ữ ế ấ ận đượ ực s quan tâm, thông c m và ảnhững đóng góp quý báu của thầy để đồ án này ngày càng hoàn thiện hơn cũng như tích lũy thêm kinh nghiệm để thực hiện tốt các đồ án sau này

Mục l c ụ

Lời cảm ơn 2

Mục lục 3

Danh mục hình ảnh 5

I Công ngh s d ng trong Web 6ệ ử ụ 1 MERN stack 6

Ngăn xếp MERN hoạt động như thế nào? 6

Ưu điểm của MERN Stack 7

Tại sao sử dụng mern stack để phát tri n ng d ng web? 9ể ứ ụ Lợi ích kinh doanh của việc sử ụng ngăn xế d p công nghệ MERN 10

2 MongoDB 13

MongoDB là gì? 13

Hoạt động c a MongoDB là gì? 13 ủ Lý do chúng ta nên chọn MongoDB 14

Khi nào thì nên sử d ng MongoDB ? 14ụ Cài đặt MongoDB 15

3 Expressjs 15

Expressjs là gì? 15

Lý do nên chọn Expressjs? 15

Lợi ích của framework Express 17

Cách cài đặt Expressjs 17

4 React 17

React là gì? 17

Tại sao lại chọn React để ử ụ s d ng? 18

5 Node.js 19

Những ng d ng c a NodeJS trong l p trình web 19ứ ụ ủ ậ Lý do chọn Nodejs 20

4

Cài đặt NodeJS 21

6 Redux 21

Redux là gì 21

Tại sao lại chọn redux để s dử ụng? 21

II Phần báo cáo cá nhân: Tr n Hoàng Khang 22ầ 1 K ết nối cơ sở dữ liệu MongoDB: 22

2 Đăng ký người dùng (User): 24

3 Đăng nhập người dùng: 25

4 Các Middleware của người dùng: 26

4.1: validateRegisterRequest: 26

4.2: validateLoginRequest: 26

5 Các chức năng củ a User: 27

5.1 Thao tác với giỏ hàng: 27

5.2 Thêm địa chỉ thanh toán: 28

5.3 Tạo và kiểm tra đơn hàng: 29

Danh m c hình ụ ảnh

Hình 1: Minh họa cho ngăn xếp MERN 6 Hình 1.1: Minh họa cho 3 công ngh 7ệ

Hình 1.3: Các ngôn ng l ữ ập trình được sử ụ d ng nhi u nh t trong s các nhà phát ề ấ ố

triển trên toàn th giế ới, tính đến năm 2021 12 Hình 2: Minh họa MongoDB 13 Hình 3: Ảnh minh h a Expressjs 16ọ

Hình 5: Bảng thống kê lượng Developer s d ng Nodejs vào cuử ụ ối năm 2020 20 Hình 6: Minh họa cho store 22

• MongoDB - cơ sở ữ liệ d u tài li u ệ

• Express (.js) - Khung web Node.js

• React (.js) - m t khung JavaScript phía máy khách ộ

• Node (.js) - máy chủ web JavaScript hàng đầu

Express và Node tạo nên t ng ( ng d ng) gi a Express.js là m t khung công tác web ầ ứ ụ ữ ộphía máy ch và Node.js là n n t ng máy chủ ề ả ủ JavaScript mạnh m và ph bi n B t k ẽ ổ ế ấ ểbạn ch n bi n th nào, ME (RVA) N là cách ti p cọ ế ể ế ận lý tưởng để làm vi c v i JavaScript ệ ớ

và JSON, m i lúc, mọ ọi nơi

Ngăn xếp MERN hoạt động như thế nào?

Kiến trúc MERN cho phép b n d dàng xây d ng ki n trúc 3 t ng (giao diạ ễ ự ế ầ ện người dùng, phụ trợ, cơ sở ữ liệ d u) hoàn toàn b ng JavaScript và JSON ằ

Hình 1: Minh họa cho ngăn xếp MERN

MEAN VS MERN VS MEVN

Hình 1.1: Minh họa cho 3 công ngh ệMEAN, MERN và MEVN là các công ngh hệ ỗ trợ mọi ngườ ại t o trang web và ng ứdụng di động Cả ba đều bao gồm MongoDB, Express.js (do đó tại sao mỗi cái bắt đầu bằng “ME”) và NodeJS Sự khác biệt chính giữa ngăn xếp MEAN, MERN và MEVN có thể được tìm thấy trong ch cái th ba c a m i t vi t t t MEAN là mữ ứ ủ ỗ ừ ế ắ ột ngăn xếp JavaScript dựa vào việc sử dụng Angular cho khung JavaScript front-end của nó, trong khi đó, ngăn xếp MERN dựa trên React và h sinh thái cệ ủa nó Cuối cùng, MEVN d a vào ự Vue.js và h sinh thái c a nó.ệ ủ

Nhưng phổ biến nh t và có nhi u tài liấ ề ệu để chúng ta tìm ki m thì có MERN và MEAN ếstack

Ưu điểm của MERN Stack

Ưu điểm chính của ngăn xếp MERN trong phát triển web là mỗi dòng mã được viết bằng JavaScript, đây là ngôn ngữ lập trình gần như phổ biến vì nó rất quan trọng đối với c mã phía máy ch và phía máy khách B ng cách s d ng m t ngôn ng l p trình ả ủ ằ ử ụ ộ ữ ậduy nhất, ngăn xếp MERN loại b nhu c u chuyỏ ầ ển đổi ng cữ ảnh và đơn giản hóa đáng

kể toàn b quá trình phát triộ ển, mang đến cho các nhà phát tri n web các công c ể ụ để tạo các ứng d ng web hi u qu v i ít n lụ ệ ả ớ ỗ ực hơn

8

Các ngăn xếp công ngh s d ng nhi u ngôn ng l p trình khi n các nhà phát tri n phệ ử ụ ề ữ ậ ế ể ải

tự tìm cách giao diện chúng đúng cách, nhưng bằng cách s dử ụng ngăn xếp JavaScript như MERN, các nhà phát triển chỉ cần biết JavaScript và JSON Để ọc MERN, ngườ h i

ta có thể tham gia chương trình đào tạo tr c tuy n MERN Stack ự ế

Làm vi c trong MERN stack mang l i k t qu m nh m mệ ạ ế ả ạ ẽ ột cách đơn giản và hi u quệ ả Biết cách c a bủ ạn xung quanh ngăn xếp là một bộ kỹ năng quan trọng vì việc xây dựng

và tri n khai ể các ứng d ng MERN v ng ch c có th ụ ữ ắ ể trở nên quan trọng trong tương lai Node.js được xây d ng d a trên th i gian ch y JavaScript cự ự ờ ạ ủa Chrome để ạo điề t u kiện thuận lợi hơn cho việc xây d ng các ng d ng m ng hoự ứ ụ ạ ạt động nhanh v i kh ớ ả năng mở rộng d dàng N n t ng hoễ ề ả ạt động b ng cách s d ng mô hình I / O không ch n, theo ằ ử ụ ặhướng sự kiện, cực kỳ hiệu quả

Tính hi u quệ ả và đơn giản c a Node.js khi n nó tr thành m t n n tủ ế ở ộ ề ảng lý tưởng cho các ứng d ng th i gian th c ch y trên các thi t b ụ ờ ự ạ ế ị phân tán, đặc biệt là nh ng ng d ng ữ ứ ụ

có yêu c u dầ ữ liệu cao Nhưng Node.js có nhiều tiềm năng hơn khi kế ợt h p với ngăn xếp MERN

1 Kết xuất giao diện người dùng và hiệu su t ấ

React JS là t t nh t khi nói v ố ấ ề trừu tượng l p giao diớ ện người dùng Vì React ch là mỉ ột thư viện nên nó cung cấp cho bạn sự tự do để xây dựng ứng dụng và tổ chức mã theo cách b n mu n Vì v y, nó tạ ố ậ ốt hơn Angular về ệ hi u su t và k t xu t giao diấ ế ấ ện người dùng

2 Hiệu qu v chi phí ả ề

Vì MERN Stack s d ng m t ngôn ng xuyên suử ụ ộ ữ ốt đó là Javascript nên sẽ có l i cho ợmột công ty n u ch thuê các chuyên gia Javascript thay vì thuê các chuyên gia khác ế ỉnhau cho công ngh khác nhau Vi c di chuy n này s giúp ti t ki m r t nhi u th i gian ệ ệ ể ẽ ế ệ ấ ề ờ

và ti n bề ạc

3 Nguồn m ở

Tất c các công nghả ệ liên quan đến MERN đều là mã ngu n mồ ở Tính năng này cho phép nhà phát tri n nh n gi i pháp cho các truy v n có th phát tri n trong quá trình ể ậ ả ấ ể ểphát tri n, t các c ng mể ừ ổ ở có sẵn Kết quả là, nó s ẽ có lợi cho một nhà phát tri n ể

4 Dễ dàng chuyển đổi giữa máy khách và máy chủ

Vì mọi thứ đều được viết bằng m t ngôn ng nên MERN rộ ữ ất đơn giản và nhanh chóng

Và cũng có thể dễ dàng chuyển đổi giữa máy khách và máy chủ

Tại sao sử dụng mern stack để phát tri n ng d ng web? ể ứ ụ

2 Khả năng tương thích với đám mây và khả năng mở rộng cao:

Vì các m t hàng liên tặ ục được thêm vào n n tề ảng thương mại điệ ửn t , không có cách nào mà khả năng mở ộng có thể b xâm ph r ị ạm Cùng v i Node.js tớ ối đa hóa khả năng xử lý, ngăn xếp MERN cũng bao gồm cơ sở dữ liệu NoSQL - MongoDB, có khả năng mở ộng cao và tương rthích với lưu trữ đám mây Do đó, dữ liệu thu th p t n n tậ ừ ề ảng thương mại điện tử có th ể được quản lý dễ dàng từ mọi nơi trên thế ới gi

3 Giao diện người dùng có thể tùy chỉnh giảm độ phức tạp:

Ngăn xếp MERN hỗ trợ kiến trúc Model View Controller (MVC) hỗ trợ tùy biến không giới hạn trên giao diện người dùng của nền tảng Do đó, thay vì quản lý nội dung thông qua bảng phụ trợ, bạn có thể sửa đổi giao diện người dùng của mình để cung cấp trải nghiệm độc đáo cho người dùng của bạn

4 Khả năng tái sử dụng mã:

Các thành ph n c a mầ ủ ột trang web được phát tri n thông qua công ngh MERN có th hoán ể ệ ể

đổi cho nhau và có th tái s dể ử ụng Nó có nghĩa là các phần mã từ ộ ự m t d án có th d dàng ể ễđược sử d ng l i trong các n n tụ ạ ề ảng thương mại điệ ử khác Do đó, các thành phần có thể tái n t

sử dụng được phê duy t s n xuệ ả ất này cho phép các trang web thương mại điệ ửn t phát triển liền m ch và nhanh chóng, cho phép b n nhạ ạ ận được sản ph m c a mình với thời gian quay ẩ ủvòng t i thiố ểu

5 Sửa đổi linh hoạt:

Vì t t c các mã và thành phấ ả ần được lưu trữ trên n n tề ảng đám mây, nên việc ki m tra mã và ểsửa đổi chúng từ xa trở nên rất d ễ dàng Điều này làm gi m th i gian phát tri n và th nghiả ờ ể ử ệm

10

ứng d ng trong ụ vòng đời phát triển ph n mềm và cho phép thay đổi ứng dụng nhanh chóng và ầhiệu quả

Lợi ích kinh doanh của việc sử ụng ngăn xế d p công nghệ MERN

Sự k t hế ợp c a các công ngh trong MERN Stack làm cho nó trủ ệ ở nên lý tưởng để phát triển nhi u loề ại ứng d ng Nó cho phép tri n khai các ng d ng nhanh chóng và d ụ ể ứ ụ ễdàng Vì các nhà phát tri n làm vi c trên MERN Stack có ki n th c v c b n thành ể ệ ế ứ ề ả ốphần, nên nó cũng hoạt động như một quá trình phát triển hiệu quả về chi phí

1 Công ngh ngu n mệ ồ ở

mạnh mẽ

khung như thế này cải thiện hiệu quả viết mã và cung cấp vô số công cụ để giúp bạn

2 Mẫu miễn phí có s n tr c tuyẵ ự ến

3 Cho phép b n xây d ng nhanh chóngạ ự

Các ngăn xếp MERN dựa trên các công nghệ mã nguồn mở mà các nhà phát triển có

WordPress

Tất cả nh ng gì b n c n làm là chú ý chi tiữ ạ ầ ết đến b t kấ ỳ hướng d n thiẫ ế ập nào và tùy t l

các giải pháp đã được chứng minh

là khi thuê các nhà phát triển MERN theo mô hình hàng giờ

4 Dễ s dử ụng

Sau đó, khi bạn đã thành thạo cách các công cụ này hoạt động cùng nhau, hãy mở rộng

5 Phát tri n toàn b ể ộ ngăn xếp

6 Hỗ trợ cộng đồng tuy t vệ ời

12

Hình 1.3: Các ngôn ng l ữ ập trình được sử ụ d ng nhi u nh t trong sề ấ ố các nhà phát

triển trên toàn th giế ới, tính đến năm 2021

Nó tăng tốc thời gian phát tri n, cho phép b n phát hành s n ph m cể ạ ả ẩ ủa mình nhanh hơn

và r ẻ hơn so với các ngăn xếp khác Như một phần thưởng, nh s ph bi n c a Node.js, ờ ự ổ ế ủnhiều người đã có kinh nghiệm với JavaScript; kỹ sư frontend biết CSS và HTML5

7 Cung c p tr i nghi m bấ ả ệ ản địa cho người dùng

Các ng d ng g c m nh mứ ụ ố ạ ẽ hơn, an toàn hơn và có thể cung c p tr i nghi m h p d n ấ ả ệ ấ ẫhơn cho người dùng Vì vậy, khi các công ty khởi nghiệp phát triển ứng dụng di động,

họ thường xây d ng chúng trên các khuôn kh kự ổ ết hợp như Ionic hoặc React Native Một ứng dụng di động được xây d ng trên MERN t n dự ậ ụng các tính năng gốc như quyền truy c p máy nh và s có thậ ả ẽ ể đồng b hóa dộ ữ liệu một cách li n m ch gi a các ề ạ ữtrạng thái ngoại tuyến và trực tuyến trong một ứng d ng ụ

Nó giúp ki m ti n dế ề ễ dàng hơn và cho phép các nhà phát triển dành th i gian cho các ờtính năng tạo ra giá tr ịthực hơn là sửa chữa những thứ khiến nó hoạt động! Th t không ậmay, nó không thể thực hiện được khi phát triển ứng dụng trên các công nghệ hybrid

2 MongoDB

Hình 2: Minh h a MongoDB ọMongoDB là gì?

MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Giấy phép Công cộng phía Máy ch MongoDB là mủ ột chương trình cơ sở ữ liệu hướ d ng tài liệu đa nền tảng có s n ngu n ẵ ồ h ỗ trợ đa nề ảng đượn t c thiết kế theo hướng đối tượ Các b ng ng ả(trong MongoDB g i là collection) có c u trúc linh ho t cho phép dọ ấ ạ ữ liệu không cần tuân theo d ng cạ ấu trúc nào Được phân loại là chương trình cơ sở ữ liệ d u NoSQL, MongoDB s d ng các tài li u gi ng JSON vử ụ ệ ố ới các lược đồ tùy ch n ọ

NoSQL còn được xem là mảnh vá cho những hạn chế, khiếm khuyết của mô hình

Hệ quản trị cơ sở ữ liệu quan h (Relational Database Management System - d ệRDBMS) Đó là cải tiến về tốc độ, tính năng cũng như khả năng mở rộng NoSQL cho phép m r ng dở ộ ữ liệu mà không c n t o khóa ngo i, khóa chính hay ầ ạ ạkiểm tra tính ràng buộc… Có thể thấy, dạng cơ sở ữ liệ d u này có thể linh động, sẵn sàng b qua tính toàn v n c ng nh c c a transaction hay dỏ ẹ ứ ắ ủ ữ liệu nhằm đổ ấi l y hiệu suất, cùng với kh năng mởả rộng tốt Chính vì ưu điểm này mà nhiều Tập đoàn lớn rất ưa chuộng NoSQL như Facebook, Google,…

Hoạt động c a MongoDB là gì? ủ

Nguyên t c hoắ ạt động của MongoDB là dưới m t ti n trình d ch v ng m và m mộ ế ị ụ ầ ở ột cổng (mặc định là cổng 27017), để có thể tiếp nhận các yêu cầu truy v n, thao tác; sau ấ

đó tiến hành xử lý

14

Mỗi b n ghi cả ủa MongoDB (document) được g n mắ ột trường có tên “_id” nhằm xác định tính duy nhất của bản ghi Có th hiểu id này như tên gọi của một bản ghi và dùng ểphân bi t chúng v i các bệ ớ ản ghi khác Đồng thời, nó còn được s d ng cho m c ử ụ ụ đích truy v n ho c tìm kiấ ặ ếm thông tin Trường dữ liệu “_id” đượ ự động đánh chỉc t mục (index) để đảm bảo tốc độ truy vấn đạt hiệu su t tối ưu ấ

Mỗi truy v n dấ ữ liệu đều được ghi đệm lên b nhộ ớ RAM nên các truy vấn sau đó sẽdiễn ra nhanh hơn Bởi nó không cần đọc dữ liệu từ ổ cứng

Khi th c hi n thêm, xóa hay s a bự ệ ử ản ghi thì MongoDB đều mất 60s để ghi các dữ liệu được thay đổi từ RAM xuống ổ cứng Điều này nh m mằ ục đích đảm b o hi u su t mả ệ ấ ặc định của chương trình

Lý do chúng ta nên chọn MongoDB

Sử dụng MongoDB mang lại rất nhi u lề ợi ích đến người dùng

• Đầu tiên có thể nhắc đến là tính linh hoạt lưu trữ ữ liệu theo các kích c khác d ỡnhau, dữ liệu dướ ạng hưới d ng tài li u JSON nên b n có th chèn vào tho i mái ệ ạ ể ảbất c thông tin gì bứ ạn muốn

• Khác v i RDBMS, dớ ữ liệu trong đây không có sự ràng bu c và không có yêu ộcầu tuân theo khuôn kh nhổ ất định, điều này giúp bạn ti t ki m th i gian cho ế ệ ờviệc ki m tra s ể ự thỏa mãn v c u trúc n u mu n chèn, xóa, c p nhề ấ ế ố ậ ật hay thay đổi các dữ liệu trong b ng ả

• MongoDB d dàng m r ng hễ ở ộ ệ thống b ng cách thêm node vào cluster cằ – ụm các node ch a dứ ữ liệu giao ti p vế ới nhau

• Ưu điểm thứ tư là tốc độ truy vấn nhanh hơn nhiều so với hệ quản trị cơ sở dữ

liệu quan h RDBMS do d ệ ữ ệu truy vli ấn được cached lên b nh ộ ớ RAM để lượt truy vấn sau diễn ra nhanh hơn mà không cần đọc từ ổ ứ c ng

• Cũng là một ưu điểm về hiệu suất truy vấn của MongoDB, trường dữ liệu “_id” luôn được tự động đánh chỉ ục để đạt hiệu suất cao nhất m

Khi nào thì nên sử d ng MongoDB ? ụ

MongoDB dùng cho các hệ thống:

Hệ thống realtime (th i gian th c) yêu c u ph n h i nhanh ờ ự ầ ả ồ

Các h ệ thống bigdata với yêu cầu truy v n nhanh ấ

Mở file vừa tải về và ti n hành ch y file cài ế ạ đặt

Sau khi chạy xong, vào thư mục ch a file tứ ải về để khởi động MongoDB

Sử dụng IP 127.0.0.1:27017 để ạ t o kết nối đến mongoDB

3 Expressjs

Expressjs là gì?

Expressjs hay còn được viết là Express js, Express.js Đây là một framework mã nguồn

mở miễn phí cho Node.js Express.js được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng

Vì Expressjs ch yêu c u ngôn ng l p trình Javascript nên vi c xây d ng các ng d ng ỉ ầ ữ ậ ệ ự ứ ụweb và API tr ở nên đơn giản hơn với các l p trình viên và nhà phát triậ ển.Expressjs cũng

là m t khuôn kh cộ ổ ủa Node.js do đó hầu hết các mã code đã được vi t s n cho các lế ẵ ập trình viên có thể làm việc

Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web, nhiều web hoặc kết hợp Do có dung lượng khá nh , Expressjs giúp cho viẹ ệ ổ chức t c các ứng dụng web thành một ki n trúc MVC có t ế ổ chức hơn.Để có thể s dử ụng được mã nguồn này, chúng ta c n ph i biầ ả ết về Javascript và HTML

Lý do nên chọn Expressjs?

Expressjs cũng là một phần c a công nghệ giúp quản lý các ng d ng web m t cách d ủ ứ ụ ộ ễdàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN.Nhờ có thư viện Javascript của Expressjs đã giúp cho các nhà lập trình xây dựng nên các ứng dụng web hiệu quả