Đề tài website bán quần áo, Đồ thể thao

Ở trên một thị trường mà người mua và người bán không cần trực tiếp gặp nhau nhưng vẫn có thể thực hiện các giao dịch thi đòi hỏi cần phải có một môi trường ảo hỗ trợ những công việc đó

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG ĐIỆN-ĐIỆN TỬ xxkxxx*& HO xxkxxxx*

7 :

Do an I

ĐÈ TÀI: Website bán quần áo, đồ thể thao

Giáo viên hướng

dân:

Sinh viên thực hiện: Ngô Văn Minh — 20193012 (Leader)

Viên Đình Anh — 20192700 Nguyễn Như Thành — 20193117

Hà Nội, 0008/2022

Website ban quan ao, dé thé thao

NOI DUNG

LỜI MỞ ĐẦU 5-2212 12221121122212111 1122112121222 2e 3 CHƯƠNG I: TÔNG QUAN ĐÈ TÀI - c2 221111111117 1121 1x tre 4 1.1 Giới thiệu 52 S221 21227112112211211121122112221212221212122 2e 4 1.2 Lý đo chọn đề tài 5á 5c s21 111111 12111111 1111 111 11g11 ra 4 1.3 Mục tiêu để tài 5s 21221221 12122212112112112212211211212212121121121 212 xxe 5

1.4 Phân chia khối lượng công vIỆC - c1 0122112111112 2118111810212 xe 5

Bang 1.1 Bảng phân công công việc và kế hoạch thực

hiện 5

CHƯƠNG II: CƠ SỞ LÝ THUYÊTT 5 S2 1232532321553 112551221512121115212E55 1x6 6 2.1 Giới thiệu về Webpaek - 5s c s11 11 1211212112111 111g 6

2.2 Xây dựng website sử dụng ReactJS sau khi chuyền đối từ bản thiết kế 7

2.2.1 Giới thiệu về ReactJS - 2 2S 2122112112111112211211211212121 212 2x6 7 2.2.2 Giới thiệu về Redux - 52-552 2 212212112712212111121211 112721126 8 2.2.3 Một số khái niệm, kiến thức khi nghiên cứu ReactJ§ 9 CHƯƠNG III: KHẢO SÁT HIỆN TRẠNG VÀ XÁC LẬP DỰ ÁN lã

3.1 Khảo sát hiện trạng - c1 c1 22112211211 151 11111111111 121 1181181122 ke 15 3.1.1 Nghiệp vụ của hệ thống hiện (ại eee eceeceeseeseeeseceececevaaeaeevecs 15 EZAvc"ăo u n (aAl 15 Website ban hàng online ra đời vì với các mục tiêu như sau: 15 EEP({ si 16

CHƯƠNG IV: TÌM HIẾU YÊU CÂU ©22522222221222122212212221 222.22 zee 17

4.1 Các kỹ thuật được sử dụng 11 112 1211221111111 12812 ườ 17

Website ban quan ao, dé thé thao

5.2 Sơđồ luồng đữ liệu của hệ thống — Hình 5.2 Sơ đổ mức ngữ cảnh của hệ thống

22

5.3 Mô hình hoá yêu cầu -5+ 221 E12 12121111211111111110 11 1tr

Hinh 5.3.1 Mô hình tông quan VIỆC hàng 22

Hình 5.3.2 Mô hình tổng quan trang quản trị của chủ cửa hàng

3.4 Sơ đồ 8.2.8

Hinh 5.4.1 Mô hình giao diện phía client

22

Hinh 5.4.2 Mô hình giao

CHƯƠNG VI: THIẾT KẾ CƠ SỞ DỮ LIỆU S2 222222222 5255255 5225552 6.1 Từ điển đữ liệu pha thiết kế -222222222211111111111112212211 e2

diện

Website ban quan ao, dé thé thao

đã len lỏi vào tất cả lĩnh vực trong cuộc sống Trong đó, công nghệ phần mềm luôn

đóng vai trò tiên phong, dẫn đầu trong quá trình đó và được ứng dụng ngày cảng nhiều

để thay đối thói quen, phong cách làm việc và nâng cao hiệu quả trong công việc của

con ngudi

Nắm bắt xu thế của thời đại và nhằm phục vụ nội dung cho môn học kỹ thuật phầm mềm và ứng dụng, cũng như đáp ứng yêu cầu ngày cảng cao đưa công nghệ vào từng mặt của cuộc sống Nhóm em đã tìm hiểu các phần mềm cơ bản, khả thi khi thực hiện và có khả năng áp dụng cao trong thực tế Cụ thể nhóm em phát triển WEBSITE

BAN HANG ONLINE

Website ban quan ao, dé thé thao Qua quá trình tìm hiểu và xây dựng phần mềm trên thực tế, cùng với những kiến thức được học trên giáng đường, chúng em mới thực sự cảm nhận được những

khó khăn khi xây dựng và phát triển một phần mềm hoàn chỉnh Để có thể xây dựng

được một phần mềm hoàn thiện, không chỉ đơn thuần là lập trình, mà còn rất nhiều công việc khác cần phải thực hiện Các công việc này được sắp xếp trong các phần với

trình tự rất hợp lí, khoa học Đây là phần mềm đầu tiên mà nhóm em xây dựng nên không thê tránh khỏi những hạn chế và thiếu sót, chúng em mong cô và các bạn bổ

sung, 20p y dé phân mêm ngày càng hoàn thiện và thực sự hữu ích với người sử dụng

Website ban quan ao, dé thé thao

CHUONG I: TONG QUAN DE TAI 1.1 Giới thiệu

Trên thế giới hiện nay, tin học là một ngảnh phát triển không ngừng Thời kỳ cách mạng công nghiệp 4.0 đòi hỏi thông tin nhanh chóng, chính xác Có thể nói tin học đã chiếm một vị trí quan trọng trong cuộc sống hàng ngày, trong các ngành khoa học kỹ thuật Chúng đang được phát triển và áp dụng rộng rãi đặc biệt là những lĩnh vực kinh doanh, buôn bản

Việc đưa tin học vào công việc quản lý, nhằm giảm bớt sức lao động của con người, tiết kiệm thời sian, độ chính xác cao vả tiện lợi rất nhiều so việc quản lý giấy tờ bằng thủ công như trước đây Tin học hóa nhằm thu hẹp không gian lưu trữ, tránh được thất lạc đữ liệu, tự động hóa và cụ thể hóa các thông tin theo yêu cầu của con

nguol

Hiện nay, nhu cầu buôn bán, trao đôi hang hóa ngày cảng tăng và hình thức mua và bán cũng ngày cảng được cải tiến Ở trên một thị trường mà người mua và người bán không cần trực tiếp gặp nhau nhưng vẫn có thể thực hiện các giao dịch thi đòi hỏi cần phải có một môi trường ảo hỗ trợ những công việc đó và những website

thương mại điện tử chính là môi trường không thể thuận lợi hơn để thực hiện những

giao dich đó, khién chúng trở nên đơn giản, nhanh chóng va thuận tiện Chính vì vậy

mà em đã nghiên cứu, tìm hiểu về một thư viện thiết kế web phổ biến nhất hiện nay là ReactJS va đồng thời xây dựng một website bán hàng Thương mại điện tử là một hệ thông lớn nên trong quá làm đề tài này chắc chắn em sẽ mắc phải những thiếu sót nên rất mong nhận được sự đóng góp ý kiến của thầy, cô để em có cơ hội sửa sai, phát triển trong thực tế và từng bước hoàn thiện mình

Website ban quan ao, dé thé thao Đây là nền tảng để em chọn ReactlS nhằm xây dựng trang thương mại điện tử dựa trên thư vién Javascript nay

1.3 Mục tiêu đề tài

Tìm hiểu khái quát về ReactJS, nam được các định nghĩa, khái nệm về react, cách reactjs render ra phần view, và các thuộc tính chủ chốt như Props, State Kết hợp ReactJS với Redux để xây đựng nên một store tập trune nhằm quản lý tat cả trạng thái của ứng dụng

Dé tai website thuong mai dién tu su dung ReactJS duoc gidi han 6 viée khách nsửa xóa sản phẩm, quản lý kho

Xác định cấu trúc, các thành phần chính trong React Xây dựng một website bán dé thé thao

Quản lý sản phẩm, thêm, sửa, xóa và cập nhật san pham

Xem sửa, quản lý các hóa đơn mà khách hàng đã đặt

1.4 Phân chia khối lượng công việc Bang 1.1 Bảng phân công công việc và kế hoạch thực hiện

TT Người thực hiện Hàm lượng Đánh giá

1 Ngô Van Minh Code backend(code router, API dang nhập, 50%

dang ky, JWT, POST,DELETE,GET product), thiét ké database, code logic redux, routing,screens,view + viết báo cáo

2 Viên Đình Anh Code frontend:components+1 phân 25%

screen+viét báo cáo

3 | Nguyễn Như Thành | Code frontend:components+ | phan screen 25%

+ việt báo cáo

Website ban quan ao, dé thé thao

Webpack hiện đang là module loader được sử dụng rộng rãi nhất hiện nay với cộng động support to lớn và những chức năng vô củng mạnh mẽ

Một cách đơn giản là ngày xưa chúng ta thường thêm những thư viện (3th parties) như jquery, moment, select2, sticky, vào thẻ script để khi web load lên xong thì những thư viện này sẽ được xử lý Nhưng không còn như những ngày xưa chỉ vài dong jquery là du dung, sau nay do việc code dưới front-end cang ngay cang phing to nên việc quan ly code = javascript cang ngay cang td rd sy quan trong nên từ đó khái niém module loader ra doi

Webpack co thể được cấu hình theo tủy chọn code và tách biệt thành cách vendor/js/css trên production Chạy với server với mode development có thể xem có thé những thay đổi code một cách nhanh nhất và có rất nhiều đặc điểm thú vị

Website ban quan ao, dé thé thao

2.2 Xây dựng website sử dụng ReactJS sau khi chuyển đổi từ bản thiết kế

2.2.1 Giới thiệu về React}S

ReactJS là thư viện Javascript được xây dựng bởi các kỹ sư của Facebook, đang được rất nhiều công ty nổi tiếng sử dụng để phát triển các sản phẩm của họ như Yahoo, Airbnb va tat nhiên là trong nội tại Facebook, Instapram Nó phù hợp với các

dự án lớn có tính mở rộng hơn là các dự án nhỏ

Đặc tính của ReactJS

Tư tưởng React1S là xây dựng lên các componenfs có tính tái sử dụng, dễ dàng cho việc chia nhỏ vẫn dé, testing Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ thông, điều này nếu là Angular thì đòi hỏi cấu trúc, cách viết code phải thật tối ưu ReactJS lu6n git cac components 6 trang thai stateless khién ta dé dang quan ly boi n6é chang khac gi mét trang HTML tinh Ban than cac components nay khéng co trang thai (state) nó nhận dau vao tir bén ngoài và chỉ hiện thị ra dựa vào các đầu vào

đó, điều nay lý giải tại sao nó lại mang tinh tái sử dụng vả dễ dàng cho việc bảo trì Thế mạnh của ReactJS

ReactJS là một thư viện hiển thị view chú ý đến hiệu năng (performance- minded) Rat nhiéu déi thu nang ky vé framework MVVM (Model-View-ViewModel)

mắt một thời gian lớn đề hiển thị những lượng dữ liệu lớn, như trong trường hợp hiển

thị những danh sách và tương tự Nhưng React đó không còn là vấn đề, vì nó chỉ hiển thị những øì thay đối

Một trong những điểm mạnh nữa của ReactJS 1a virtual DOM - tht nam ân bên

trong mỗi view và là lí do khiến cho React đạt được hiệu năng tốt Khi một view yêu cầu 201, tất cả mọi thứ sẽ được đưa vào trong một bản sao ảo của DOM Sau khi việc sọI hoàn thành, React tiến hành một phép so sánh gitta DOM ao và DOM thật, và thực hiện những thay đối được chỉ ra trong phép so sánh trên

Ví dụ: nếu chúng ta đang xem một danh sách có 20 sản phẩm được hiển thị bởi ReactJS, và chúng ta thay đổi sản phâm thứ 2, thì chỉ sản phẩm đó sẽ được hiền thị lại,

và 19 sản phẩm còn lại vẫn giữ nguyên (không cần hiển thị lại hay reload lai trang) React da dung cai gọi là “virtual DOM” để tăng hiệu năng bằng cách xuất ra một hiển

Website ban quan ao, dé thé thao thị ảo, sau đó kiểm tra sự khác biệt piữa hiển thị ảo và những øì có trên DOM và tạo một bản vá

2.2.2 Giới thiệu về Redux

Khi làm việc với React hay các dự án ứng dụng Sinple Page noi chung, co mét vấn đề khá đau đầu là làm sao quản lý được trạng thái của ứng dụng đó Sau khi xem qua giới thiệu về một số thư viện hỗ trợ công việc này, em đã quyết định chọn Redux Redux là gi?

Redux là một thư viện Javascript giip tạo ra thành một lớp quan lý trạng thái của ứng dụng

Redux được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu Do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React Tuy nhiên hoàn toàn có thê sử dụng với cac framework khac nhu Angular, Backbone

Trang thai (state) cua ing dung Một ứng dụng web thông thường sẽ nhận dữ liệu từ phía máy chủ (backend), hay nhận những thao tác của người đùng (nhập, click, ), tất cả những thứ này chúng

ta gọi đó là trạng thái của ứng dụng Nếu biết được trạng thái của ứng dụng tại một thời điểm nảo đó, chúng ta sẽ biết vào thời điểm đó ứng dụng đã nhận đữ liệu nào, những thao tác nào đã được người dùng truyền lên

Vị dụ cho trạng thái của ứng dụng : Khi chung ta click vao nut Back / Forward trên trình duyệt, thì mỗi trang sẽ là một trạng thái của ứng dụng

Nguyên lý của Redux Redux được xây dựng dựa trên 3 nguyên lý như sau:

« - Trạng thái (state) của toàn bộ ứng dụng được lưu trong trong 1 store duy nhất là I Object mé hinh tree

« - Chỉ có I cách duy nhất để thay đổi trạng thai (state) d6 1a tao ra mét action (là 1 obJect mô tả những gì xảy ra)

« - Để chỉ rõ trạng thái (state) tree được thay đổi bởi 1 action bạn phải viết pure reducers

đữ liệu trong React đó là state và props State la trang thai, mang tinh private, chi c6

thê thay đổi 6 trong chinh component Con props mang tinh external, khéng bi kiém

soat boi component, dugc truyén tir component cao (cha) dén component thap (con) ReactJS xây dựng lên các single-page-app, tức là chỉ render ra | trang, va tất cả các thành phần của ứng dụng sẽ được lưu trữ trong đó Vì thế, nêu ứng dụng phức tạp lên theo thời gian, việc quản lý state của chúng ta sẽ ngày một lớn dân

Sự khác biệt với việc sử dụng Redux và không sử dụng Redux được miều

tả bằng hình vẽ dưới đây:

Không sử dụng Redux Sử dụng Redux

O Trạng thái thay đôi

Với việc không sử dụng Redux, các component sẽ giao tiếp với nhau bằng props Nếu chúng ta cần lấy state của một component cách nhau 3 tầng, chúng ta phải gọi 3 lần, điều đó sẽ khiến việc code và quản lý state rat phức tạp, va to dan lên theo thời gian

10

Website ban quan ao, dé thé thao Voi viéc su dung Redux, chung ta sé luu state cua cac component vao | store chung ở bên ngoài Sau đó nếu muốn ding 6 component nao chung ta chi can goi nó

va su dung

Kết luận: Redux giúp chúng ta xây đựng một STORE thay vì lưu trữ toàn bộ dữ liệu tại một component thì chúng ta sẽ lưu nó tại store của redux, và nếu có thay đổi, đơn giản là chúng ta sẽ thông qua redux và thay đôi dữ liệu trong store

2.2.3 Một số khái niệm, kiến thức khi nghiên cứu ReactJS JSX là gì?

JSX là một cú pháp mở rộng cho JavaScript, là kết hợp của JavaScript và XML Nó chuyển đổi cú pháp dạng gần như XML về thành JavaScript, giúp chúng ta

có thể code ReactlS bằng cú pháp của XML thay vi phai ding JavaScript

Thay vì phải truy xuất đến một thẻ HTML bắt kì thông qua các thuộc tính như

id, class, name thì ta đã có thể thoải mái sử dụng các thẻ HTML trong code JavaScript rồi Tất cả những gì ta cần làm đó là viết 1 đồng thẻ html và sau đó đặt chúng vào trong một biến, một function hoặc một class chẳng hạn

Ví dụ:

Component là gì?

Component là nơi render ra các mã html thuần, một điều quan trọng khác đó là

nó cho phép ta chia nhỏ đoạn code của UI thành những phần độc lập với nhau, với mục đích để tiện cho việc quản lý và tái sử dụng Vậy làm cách nào để có thể 201 dén m6t Component? Cau tra lời là trong React tén cua Component sé duoc ding dé lam tên thẻ và cach sur dung tuong ty voi cac the tag trong html Vi du:

11

Website ban quan ao, dé thé thao

Trong đoạn code ở trên, ta có sử dụng cú pháp của ES6 để định nghĩa

Component bang cach khai bao mét function tén 1a App va function nay sé dugc ké

thừa từ React.Component Sau khi kế thừa từ React.Component thi ta co thé str dung hàm render() mà nó cung cấp để render ra toàn bộ nội dung bên trong ReactDOMrender sẽ có nhiệm vụ là tạo ra DOMI ảo từ component <App /> tại element co id bang root

Props la gi?

Props là viết tắt của Properties, ta có thể hiểu nó như là những thuộc tính của một Component Nếu coi Component như là đối tượng trong lập trình OOP thì Props

giống như là những miêu tả về tính chất, đặc trưng của 1 đối tượng Để định nghĩa

Props thì ta khai báo chúng ở bên trong dấu {} của Component Ví dụ:

Như vậy là Component App đã có 1 thuộc tính là myName và ta sẽ sử dụng nó bằng cách truyền vào Props myName I giá trị nào đó, có thé 1a string, array, function, boolean hoặc object Trong ví đụ nay ta sẽ truyền vảo 1 string như sau:

12

Website ban quan ao, dé thé thao

1 state là status có giá trị là "Off" Rõ ràng là trong suốt quá trình sử dụng một chiếc Tivi thi bạn không thể nào thay đổi được các thuộc tính của nó như là chiều rộng, chiều cao, cân nặng Nhưng ngược lại, bạn có thé thay đôi trang thai cua chiếc Tivi

đó từ Off sang On hoặc từ On sang Off Và mỗi lần thay đổi trạng thái như vậy màn hinh Tivi cing sẽ hién thi thay đổi theo

2.2.4 Kiến thức cần có để làm việc với ReactJS ReactS là một thư viện giúp render ra phần view, nhưng để xây dựng được ứng dụng hoàn chỉnh, chúng ta cần nhiều thứ hơn nữa Đây là một số kiến thức khi muốn nghiên cứu ReactJS:

Javascript

13

để các lập trinh vién front-end va cac nha thiét ké chia sé m4 nguén Javascript

Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript

Javascript “Bundlers”

Hay con gọi là các công cụ đóng gói JavaScript Vì một vài lí do kĩ thuật

ma module CommonJS không thể sử dụng native trên trình duyệt Ta cần có một

“công cụ đóng gói” Javascript để “đóng gói” các modules này thành các files js mà có thể include được trên trang web qua thé <script>

ES6

Là phiên bản mới nhất của Javascript, vì còn quá mới nên chưa được hỗ trợ trên các trình duyệt, nhưng các công cụ đóng sói sẽ thực hiện phiên dịch với cầu hình đúng để có thê sử dụng được trên trình duyệt

Routing

“Các ứng dụng single-page” trở nên khá rằm rộ ngày nay Đây là những trang web mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút ấn thì Javascript trên trang web sẽ thực thí mà trang web không cần phải reload lại Việc quản ly địa chỉ trên thanh địa chi được thực hiện bởi router

Router được sử dụng phố biến nhất trong hệ sinh thái React là react-

router

Server-side Rendering Server-side rendering thường được gọi là “toàn bộ” hay “đồng bộ” 1S Điều đó có nghĩa là có thê lay bat ctr React components nao va render chung thanh HTML tinh trén server Diéu nảy cải thiện được tốc độ ban đầu vì người dùng không cần phải chờ JS thực hiện download để có thê thấy được UI ban đầu, và React có thé tai sử dụng HTML đã được render phía server, vì vậy mà

không cần xử lý ở phía client

14

Website ban quan ao, dé thé thao Chi can str dung server-side rendering khi ta thay viéc render ban đầu trở nên quá chậm hoặc muốn cải thiện thứ hạng tìm kiếm Mặc dù Google bay g10

đã thực hiện index các nội dung render phia client Việc render phía server vẫn cần nhiều công cụ để làm cho nó trở nên chính xác Vi việc này mặc định được hỗ trợ trong cac React components ma không cần quan tâm tới việc render phía server, chúng ta nên xây dựng ứng

dụng trước và quan tâm tới việc render phía server sau Ta sẽ không cần thiết

phải viết lại tất cả các components để xử lý việc đó

DOM ma nhiéu chi phí

©_ Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn piữa code HTML và Javascript Ta co thé them vao cac doan HTML vao trong ham render ma không cần phải nối chuỗi Day là đặc tính thú vị của Reactjs Nó sẽ chuyên đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến

và hiển thị lên Điều này thực tế là chậm Hoặc nếu oiả sử người dung võ hiệu hóa Javascript thi sao? Reactjs là một thư viện component, nó có thể

15