Đồ án xây dựng website bán giày

Một website shop giày Online đáp ứng được yêu cầu của khách hàng cần phải cung cấp đầy đủ thông tin sản phẩm, hình ảnh chất lượng cao, giá cả cạnh tranh và hệ thống thanh toán đa dạng, t

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

ĐỀ TÀI: Xây dựng Website bán giày

Giảng viên hướng dẫn: ThS Thái Thụy Hàn Uyển

Sinh viên thực hiện:

Nguyễn Trung Đức - 20521200

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

Lời cảm ơn

Đồ án 1 là môn học có nhiều thử thách, đòi hỏi người học phải dành nhiều thời gian, công sức để nghiên cứu, tìm tòi và xây dựng Đồng thời, đây cũng là cơ hội để sinh viên thực hành những gì đã học trong suốt những năm đại học và học hỏi thêm nhiều kiến thức, kinh nghiệm và kỹ năng mới phục vụ cho công việc sau này Cho nên đây được xem là thử thách và cũng là cơ hội để sinh viên được rèn luyện, hoàn thiện bản thân bằng những kĩ năng tích lũy được trong suốt quá trình làm đồ án

Để hoàn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến:

Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì

đã tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin

Em xin chân thành cảm ơn cô Thái Thụy Hàn Uyển đã tận tình giúp đỡ nhóm

em hoàn thành đồ án 1 của mình Chính nhờ những sự góp ý, động viên của cô đã giúp đồ án của nhóm được hoàn thiện và chuyên nghiệp nhiều hơn Bên cạnh đó, nhóm đã học hỏi được rất nhiều kiến thức, kinh nghiệm và bài học thú vị trong quá trình làm khoá luận, đó sẽ là những hành trang hữu ích cho nhóm sau này Nhóm cũng xin chân thành cảm ơn các anh chị, bạn bè đã giúp đỡ nhóm trong quá trình thực hiện đồ án Nhờ mọi người mà nhóm có nhiều góc nhìn khác nhauvề đề tài đang làm, từ đó giúp hoàn thiện đồ án của nhóm

Trong quá trình làm Đồ án này em không tránh khỏi được những sai sót, em kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện và phát triển đồ án hơn cũng như trong Khóa luận tốt nghiệp trong tương lai

Chương I: Giới thiệu đề tài 1.Giới thiệu chung

1.1 Tên đề tài: Website bán giày

1.2.Mô tả đề tài:

Trong thời đại công nghệ thông tin hiện nay, website shop giày Online là một trong những hình thức kinh doanh thời trang phổ biến và được ưa chuộng nhất Điều này không chỉ giúp cho các nhà kinh doanh có thể bán hàng trực tuyến mà còn mang lại sự tiện lợi cho khách hàng khi có thể lựa chọn và mua được sản phẩm mà mình yêu thích ngay tại nhà

Một website shop giày Online đáp ứng được yêu cầu của khách hàng cần phải cung cấp đầy đủ thông tin sản phẩm, hình ảnh chất lượng cao, giá cả cạnh tranh và hệ thống thanh toán đa dạng, tiện lợi Điều này giúp khách hàng có thể dễ dàng tìm kiếm sản phẩm mình cần một cách nhanh chóng và thuận tiện Ngoài ra, website shop giày Online còn giúp cho các nhà kinh doanh có thể mở rộng thị trường và khách hàng tiếp cận được với nhiều sản phẩm khác nhau từ khắp nơi trên thế giới

Một trong những yếu tố quan trọng đối với một website shop giày Online là thiết kế giao diện và trang trí website đẹp mắt, dễ sử dụng Điều này giúp thu hút khách hàng và tạo niềm tin cho họ khi mua sắm trên website Nếu website của bạn được thiết kế chuyên nghiệp và hấp dẫn, khách hàng sẽ cảm thấy thoải mái hơn khi mua sắm trên trang web và sẽ đánh giá cao sản phẩm hơn

1.3.Khảo sát các Website bán giày hiện nay

 Shopee: Shopee là một ứng dụng mua sắm trực tuyến đa năng và cung

cấp nhiều sản phẩm giày đa dạng từ giày thể thao, giày lười, giày cao gót đến giày dép đi biển Ngoài ra, Shopee còn có chính sách đổi trả hàng tốt và thường xuyên có chương trình khuyến mãi hấp dẫn

 Tiki: Tiki là một trong những website bán hàng trực tuyến lớn nhất Việt

Nam và cung cấp đa dạng các sản phẩm giày từ các thương hiệu nổi tiếng như Clarks, Crocs, Bata, Skechers Website có thiết kế đẹp mắt

và dễ sử dụng, cung cấp nhiều thông tin về sản phẩm và giá cả, đồng thời có chính sách đổi trả hàng và bảo hành tốt

 Sendo: Sendo cũng là một trong những ứng dụng mua sắm trực tuyến

phổ biến và cung cấp nhiều sản phẩm giày đa dạng từ các thương hiệu khác nhau Website có thiết kế đơn giản và dễ sử dụng, cung cấp nhiều thông tin về sản phẩm và giá cả, đồng thời có chính sách đổi trả hàng tốt

 Giaytot.com: Là một trong những website bán giày online chuyên

nghiệp tại Việt Nam, giaytot.com cung cấp các sản phẩm giày thể thao, giày nam, giày nữ đến từ các thương hiệu nổi tiếng như Nike, Adidas, Converse, Vans Website có thiết kế đơn giản và dễ sử dụng

2.Mục tiêu đề tài

2.1.Lý thuyết

 Nghiên cứu về ReactJS và NodeJS

 Nắm rõ các thao tác trên công cụ lập trình Visual studio code

 Nghiên cứu và sử dụng dịch vụ cơ sở dữ liệu MongoDB

 Nghiên cứu cách thức phát triển ứng dụng đa nền tảng

2.2 Mục tiêu

 Thiết kế giao diện đẹp mắt, bắt mắt và dễ sử dụng

 Cung cấp đầy đủ thông tin về sản phẩm

 Đảm bảo tính năng an toàn và bảo mật

 Tối ưu hóa công cụ tìm kiếm:

 Tích hợp tính năng đánh giá sản phẩm và phản hồi từ khách hàng

 Cập nhật các xu hướng mới nhất về giày

2.4 Phạm vi nghiên cứu

2.4.1 Phạm vi môi trường:

 Triển khai ứng dụng trên Website

2.4.2 Phương pháp nghiên cứu:

 Tìm hiểu các phương pháp hiện có

 Tham khảo các Website shop giày và xác định các tính năng chung cần có

 Tìm hiểu các công nghệ sử dụng cho đề tài

 Triển khai theo kế hoạch sẵn có

 Kiểm thử và sửa lỗi (nếu có)

 Thiết kế giao diện, cơ sở dữ liệu

Chương II Cơ sở lý thuyết 1.HTML

 HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là

Ngôn ngữ đánh dấu siêu văn bản) HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các

đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn

ngữ lập trình

 Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag và attributes) Các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản

vào trong cặp tag mở và đóng văn bản <p> và </p>

Ưu và nhược điểm HTML

HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc Tuy nhiên, HTML có ưu và nhược điểm của riêng nó

Ưu điểm:

 Được sử dụng rộng rãi, có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng lớn

 Học đơn giản và dễ hiểu

 Mã nguồn mở và hoàn toàn miễn phí

 Một số trình duyệt chậm hỗ trợ tính năng mới

Code đơn giản về HTML

2 CSS

 CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được

sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn

ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web

 CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm

1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

 Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau

đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

 Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời

 Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảng trống trên trang của bạn với các thuộc tính như:

 Padding: Gồm không gian xung quanh nội dung (ví dụ: xung quanh đoạn

văn bản)

 Border: Là đường liền nằm ngay bên ngoài phần đệm

 Margin: Là khoảng cách xung quanh bên ngoài của phần tử

Cấu trúc của một đoạn CSS

Một đoạn CSS bao gồm các phần như thế này:

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối Một vùng chọn có thể sử dụng không giới hạn thuộc tính

Dưới đây là code đơn giản về CSS:

3 Javascript

 JavaScript (JS) là một ngôn ngữ lập trình thông dịch, được phát triển bởi Netscape từ những năm 1995 Nó có cú pháp được phát triển dựa trên ngôn ngữ C JavaScript ban đầu được tạo ra để sử dụng trên các trình duyệt, giúp thiết kế các trang web động và xử lý các một số hiệu ứng hình ảnh thông qua DOM Ngôn ngữ này là một sự bổ sung cần thiết giúp thực hiện các tác vụ mà không thể thực hiện được với chỉ HTML

 JavaScript không chỉ dành cho Website hay lập trình viên Frontend, nó còn có nhiều thứ khác từ Backend cho đến ứng dụng di động Khái niệm lập trình viên Fullstack cũng được nhắc đến nhiều hơn từ khi NodeJS – một platform viết bằng JavaScript sử dụng để lập trình server-side ra đời năm 2009 NodeJs giúp cho JavaScript Developer có thể tự mình tạo ra Website bằng chính ngôn ngữ của mình

Cấu trúc của Javascript:

 Khai báo biến: để lưu trữ các giá trị trong JavaScript, ta có thể sử dụng

các biến Cú pháp khai báo biến trong JavaScript là: var ten_bien = gia_tri;

 Các loại dữ liệu: JavaScript hỗ trợ nhiều loại dữ liệu như số, chuỗi, đối

tượng, mảng, boolean, null và undefined

 Các phép toán: JavaScript hỗ trợ các phép toán cơ bản như cộng, trừ,

nhân, chia, phép toán logic và phép so sánh

 Hàm: Hàm là một khối mã được đóng gói trong một tên và có thể được

gọi bởi tên đó Hàm có thể nhận đầu vào và trả về giá trị

 Sự kiện: Trên trang web, các sự kiện xảy ra khi người dùng tương tác

với trang web JavaScript cho phép ta bắt các sự kiện này và thực hiện các hành động tương ứng

 Cấu trúc điều khiển: JavaScript hỗ trợ các cấu trúc điều khiển như

if/else, switch, vòng lặp for/while, và các cấu trúc điều khiển khác để điều khiển luồng thực thi của chương trình

 Đối tượng: JavaScript hỗ trợ đối tượng, cho phép ta đóng gói mã và dữ

liệu trong một đối tượng để quản lý mã dễ dàng hơn

 AJAX: AJAX là một kỹ thuật sử dụng JavaScript để tải dữ liệu từ máy chủ

mà không cần tải lại toàn bộ trang web Nó cho phép ta tạo các trang web động và tốc độ cao hơn

Dưới đây là code đơn giản về Javascript

4 ReactJs

 ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

 ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lý tương tác

 Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra trong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm:

JSX

JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc

Virtual DOM

Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn giản, static website Nhưng đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn

bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang)

Ưu điểm của ReactJS

 Phù hợp với đa dạng thể loại website

 Tái sử dụng các Component

 Có thể sử dụng cho cả Mobile application

 Thân thiện với SEO

 Debug dễ dàng

 Công cụ phát triển web hot nhất hiện nay

Dưới đây là code đơn giản về ReactJS

5 NodeJS

mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng

sự kiện (event-driven) không đồng bộ

Node.js bao gồm các thành phần sau:

 Công cụ JavaScript V8: Đây là công cụ mã nguồn mở được phát triển

bởi Google, làm nền cho việc thực thi mã JavaScript trên trình duyệt web Chrome

 Môi trường thời gian chạy Node.js: Đây là môi trường thực thi

JavaScript trên máy chủ Nó bao gồm một bộ thư viện và các mô-đun

để cho phép lập trình viên phát triển ứng dụng web phía máy chủ bằng JavaScript

 Node Package Manager (NPM): Đây là một công cụ quản lý gói phần

mềm được sử dụng để quản lý các mô-đun và thư viện phụ thuộc của ứng dụng Node.js

 Các mô-đun Node.js: Các mô-đun Node.js bao gồm các thư viện mã

nguồn mở có thể được sử dụng để phát triển các ứng dụng web phía máy chủ, chẳng hạn như Express.js, Socket.io, MongoDB và nhiều mô-đun khác

 Các công cụ phát triển: Node.js có các công cụ phát triển hợp tác để hỗ

trợ việc phát triển và kiểm tra ứng dụng Node.js như npm, gật đầu, eslint, mocha, chai, v.v

Dưới đây là code đơn giản về Nodejs

6.MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQL

database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh

MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ,

được dùng làm backend cho rất nhiều website như eBay, SourceForge và The New York Times

Các feature của MongoDB gồm có:

 Các ad hoc query: hỗ trợ search bằng field, các phép search thông

thường, regular expression searches, và range queries

 Indexing: bất kì field nào trong BSON document cũng có thể được index

 Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt

phiên bản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán là rất cao Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả

về kết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB

 Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng

những function trên và hoạt động như một cách phân phối qua sharding

Chương 3: Phân tích đặc tả yêu cầu 3.1 Sơ đồ Usecase

2 Khách hàng

Khách hàng có thể đăng kí, đăng nhập,xem sản phẩm, mua hang, Feedback, thanh toán đơn hang, tìm kiếm sản phẩm

mà mình yêu thích

3 Khách vãng lai Giống với khách hàng nhưng khách vãng lai chỉ có thể thực

hiện việc xem sản phẩm và tra cứu sản phẩm

3.3 Danh sách các Usecase

3.3.1 Admin

2 Xóa sản phẩm Admin xóa sản phẩm mình muốn

3 Sửa sản phẩm Admin sửa sản phẩm mình muốn

4 Sửa tài khoản người

dùng

Admin sửa tài khoản người dung như tên, email

5 Xóa tài khoản người

dùng

Admin xóa tài khoản mong muốn

6

Xem chi tiết Order

Admin có thể xem toàn bộ Order của Customer

7 Thay đổi trạng thái

đơn hàng

Admin có thể thay đổi trạng thái đơn hang chẳng

hạn như từ Waiting-> Delivery

Dành cho người dùng đã có tài khoản, chức năng cho

phép người dùng đăng nhập vào Website

5 Đánh giá sản phẩm Chức năng cho phép người dùng đánh giá về trải

nghiệm chất lượng của sản phẩm

6 Đặt hàng Chức năng cho phép người dùng đặt hàng và thanh

toán những sản phẩm đã có trong giỏ hàng

9 Thêm vào giỏ

Chức năng cho phép người dùng thêm vào giỏ hàng

3 Tra cứu sản phẩm Guest tra cứu sản phẩm

4 Xem sản phẩm Guest xem sản phẩm mong muốn

Khách hàng click vào nút đăng ký

Hệ thống sẽ kiểm tra thông tin mà khách hàng vừa nhập vào

Hệ thống sẽ tạo ra tài khoản cho khách hàng sau khi đã đăng ký xong

Khách hàng trở thành thành viên của Website

Alternative

flow(s)

Nếu thông tin mà khách hàng không đúng, thiếu sót hoặc không khớp với định dạng thì khi đó hệ thống sẽ thông báo lỗi Các trường hợp như là:

 Tài khoản đã tồn tại

 Mật khẩu nhỏ hơn 6 kí tự và dài hơn 30 kí tự

 Confirm Password and Password không giống nhau

 Email không đúng định dạng

 Để trống thông tin

Nếu thông tin bổ sung của khách hàng không đúng thì hệ thống

sẽ báo lỗi Các trường hợp như là :

 Số điện thoại không đúng định dạng

 Ngày sinh không đúng với định dạng “dd/MM/yyyy”

Hệ thống sẽ ghi nhận ngày mà khách hàng đăng ký trở thành thành viên

Hệ thống sẽ kiểm tra tài khoản và mật khẩu khách hàng vừa nhập vào

Nếu tài khoản và mật khẩu có trong database khi đó hệ thống

sẽ chuyển người dùng tới trang HomePage

Nếu mật khẩu sai thì sẽ yêu cầu nhập lại

Alternative

flow(s)

Nếu tài khoản hoặc password để trống thì khi khách hàng nhấn vào nút Login thì hệ thống sẽ báo lỗi và cho phép khách hàng nhập lại

Usecase Cập nhật thông tin cá nhân

Main flow -Khách hang sẽ đặt các thông tin cần thiết trong thanh tìm

kiếm để tìm kiếm sản phẩm mà mình mong muốn

-Khách hang click vào nút “tìm kiếm” hoặc hình ảnh “kính lúp -Hệ thống sẽ show thông tin mà khách hang tìm kiếm

-Nếu hệ thống có lỗi thì hệ thống sẽ báo lỗi cho Administrator

-Nhập các thông tin cần thiết -Chọn phương thức muốn thanh toán -Nhấp vào nút “Thanh toán”

-Tiến hành ‘’Thanh toán’’

xử lý

Usecase Xem trạng thái đơn hàng

Post-Conditions Hệ thống sẽ tiến hành thay đổi lại trạng thái của đơn hàng

Main flow 1 Admin chọn mục quản lý đơn hàng và nhấn vào nút

Thay đổi trạng thái