Báo cáo tiểu luận xây dựng Ứng dụng thương mại Điện tử xây dựng website bán quần Áo

Máy tính điện tử không còn là một thứ phương tiện quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người, không chi ở nơi làm việc mà còn ngay cả

HỌC VIỆN HÀNG KHÔNG VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO TIỂU LUẬN

XÂY DỰNG ỨNG DỤNG

THƯƠNG MẠI ĐIỆN TỬ

XÂY DỰNG WEBSITE BÁN QUẦN

ÁO

TP HCM, tháng 11 năm 2024

BÌA LÓT

(Nội dung bìa lót giống như bìa chính)

HỌC KỲ 07– NĂM HỌC: 2023-2024

MÃ LỚP HỌC PHẦN: 010100096702

Giảng viên hướng dẫn: ThS Huỳnh Thanh Sơn

Nhóm sinh viên thực hiện: Thạch Gia Hùng MSSV: 2254810096

Nguyễn Anh Quân MSSV: 2254810064 Phạm Trịnh Xuân Duy MSSV: 2254810088

Phạm Trịnh Xuân Duy MSSV: 2254810088 Nguyễn Cao Anh Kiệt MSSV: 2254810095

NHẬN XÉT VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN

MỤC LỤC

(Mục lục Nội dung, tạo mục lục tự động)

DANH MỤC HÌNH ẢNH

(Danh mục hình ảnh trong Đề tài)

DANH MỤC BẢNG BIỂU

(Danh mục các bảng biểu trong Đề tài nếu có)

DANH MỤC THUẬT NGỮ VÀ TỪ VIẾT TẮT

(Danh mục các thuật ngữ và từ viết tắt trong Đề tài nếu có)

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiều rộng và sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người, không chi ở nơi làm việc

mà còn ngay cả trong gia đình Đặc biệt là công nghệ thông tin được áp dụng trên mọi lĩnh vực kinh tế, chính trị, xã hội Ứng dụng công nghệ thông tin và tin học hóa được xem là một trong yếu tố mang tính quyết định trong hoạt động của quốc gia, tổ chức và trong cả cáccửa hàng Nó đóng vai trò hết sức quan trọng và có thể tạo nên bước đột phá mạnh mẽ.Mạng INTERNET là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng để truyền tải, trao đổi thông tin trên toàn cầu Bằng INTERNET, chúng ta đã thực hiện được những công việc với tốc độ nhanh hơn, chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy sự khai sinh

và phát triển của thương mại điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao đời sống con người Trong hoạt động sản xuất, kinh doanh, thương mại điền

tử đã khẳng định được xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một cửahàng, việc quảng bá và giới thiệu sản phẩm đến khách hàng đáp ứng nhu cầu mua sắm ngày càng cao của khách hàng sẽ là cần thiết Vì vậy, nhóm chúng em đã thực hiện đề tài “Xây dựng Website bán quần áo” Cửa hàng có thể đưa các sản phẩm lên Website của mình và quản lý Website đó, khách hàng có thể đặt mua, mua hàng của cửa hàng mà không cần đến cửa hàng, cửa hàng sẽ gửi sản phẩm đến tận tay khách hàng Website là nơi cửa hàng quảng

bá tốt nhất tất cả các sản phẩm mình bán ra

CHƯƠNG 1 GIỚI THIỆU

1.1 Lý do chọn đề tài

Hiện nay, không chỉ trên thế giới mà cả ở Việt Nam thương mại điện tử đã trở nên phổ

biến Mỗi doanh nghiệp kinh doanh đều mong muốn có một website để giới thiệu sản phẩm,công ty, bán hàng trực tuyến và tiếp thị nên đã làm cho lĩnh vực này trở nên ngày càng sôi động Việc ngồi một chỗ và mua một món hàng là việc rất dễ dàng Website bán hàng trực tuyến hay còn gọi là website thương mại điện tử mang đến cho con người sự tiện dụng, cái nhìn đa chiều về sản phẩm mình chọn mua Chúng em đã tiếp cận và xây dựng được

website bán hàng trực tuyến

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

Mục tiêu xây dựng hệ thống:

- Tiết kiệm thời gian, chi phí cho khách hàng

- Có được các thông tin cụ thể, đầy đủ, nhanh chóng và chính xác về các sản phẩm, dịch vụ

mà mình có ý định mua và sử dụng

- Dễ dàng liên hệ với công ty thông qua các thông tin liên hệ khi cần thiết

- Quảng bá hình ảnh của công ty, giới thiệu sản phẩm

- Cập nhật tin tức, đáp ứng các nhu cầu của khách hàng

1.4 Đối tượng nghiên cứu

- Ở đây web bán hàng quần áo đối với khách hàng là phái

nam và phái nữ cho nên sản phẩm danh cho mọi lứa tuổi từ

đó dể dàng cho việc lựa chọn sản phẩm

- Khách hàng ghé thăm website, xem thông tin về sản phẩm, dịch vụ mình muốn mua và sửdụng.

- Khách hàng có thể chọn nhiều sản phẩm để cho vào giỏ hàng, có thể thêm, bớt số lượng tronggiỏ hàng, xem tổng số tiền thanh toán và tiến hành đặt hàng hoặc thanh toán trực tuyến.Website hỗ trợ hai chức năng thanh toán, thanh toán trực tiếp với Ngân Lượng hoặc thanh toántoán bằng tiền mặt tại công ty

- Gửi các liên hệ cho quản trị viên, liên hệ hỗ trợ

- Đọc tin tức, tham khảo những thông tin tuyển dụng và tham khảo bảng báo giá của công ty

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

Trình bày các phương pháp nghiên cứu được sử dụng như:

+ Phương pháp thu thập thông tin: khảo sát, lập bảng hỏi, đọc tài liệu,…

+ Phương pháp xử lí thông tin: định lượng, định tính, …

+ Phương pháp thực nghiệm

+ …

.1.6 Bố cục đề tài

Đề tài gồm có 4 chương:

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

Chương 2: Cơ sở lý thuyết

Chương 3: Phân tích hệ thống và xây dựng sản phẩm

- Xây dựng hệ thống website bán quần áo

Chương 4: Kết Luận và hướng phát triển

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu về NodeJS

2.1.1 Lịch sử vàphát triển:

Được phát triển bởi Ryan Dahl vào năm 2009, Node.js sử dụng V8 JavaScript

Engine của Google để tạo nền tảng xử lý đa kết nối một cách hiệu quả Nhờ kiến trúc không đồng bộ và hướng sự kiện, Node.js nhanh chóng phát triển và phổ biến.

2.1.2 Các Đặc điểm nổi bật:

Node.js là single-threaded với non-blocking I/O, mô hình hướng sự kiện, và dựa trên V8 JavaScript Engine Ngoài ra, NPM (Node Package Manager) cung cấp hàng triệu thư viện hỗ trợ từ cộng đồng.

2.1.3 Cách thức hoạt động của Nodejs

Node.js hoạt động theo mô hình không đồng bộ, sử dụng event loop để xử lý nhiều yêu cầu đồng thời mà không cần tạo nhiều luồng.

2.1.4 Thư viện và công cụ bổ trợ:

Một số công cụ quan trọng như Express.js (framework web), Socket.io (giao tiếp thời gian thực), Mongoose (kết nối MongoDB), PM2 (quản lý quá trình), Webpack

và Babel (xây dựng mã).

2.1.5 Nhược điểm của Nodejs

● Single-threaded hạn chế: Không phù hợp cho các tác vụ nặng về CPU vì có

● Thư viện bên thứ ba không ổn định: NPM có nhiều thư viện, nhưng không

phải tất cả đều được bảo trì tốt.

● Bảo mật: Cần quản lý bảo mật kỹ lưỡng, nhất là khi dùng nhiều thư viện từ

ưu hóa trải nghiệm người dùng và cung cấp giải pháp dễ dàng cho việc xây dựng các ứng dụng phức tạp.

2 Các Đặc Điểm Nổi Bật của ReactJS

● Virtual DOM: DOM ảo giúp tối ưu hóa hiệu suất bằng cách giảm thiểu số lượng thao tác trực tiếp trên DOM thật, vốn tiêu tốn nhiều tài nguyên DOM ảo

là một mô hình đại diện cho giao diện người dùng, giúp so sánh các thay đổi trạng thái và chỉ cập nhật các phần thực sự cần thiết.

● Component-based Architecture: Kiến trúc dựa trên thành phần (component) là điểm mạnh của React, cho phép tái sử dụng mã và dễ dàng duy trì Các thành phần có thể được chia nhỏ thành các module độc lập, có thể kiểm thử dễ dàng

và giảm thiểu sự phụ thuộc lẫn nhau.

● One-way Data Binding: Dữ liệu chỉ chảy một chiều từ component cha đến component con, giúp dễ dàng kiểm soát luồng dữ liệu và hạn chế lỗi logic phức tạp, đồng thời giúp việc debug (sửa lỗi) dễ dàng hơn.

● JSX (JavaScript XML): JSX là cú pháp mở rộng cho phép viết mã JavaScript kết hợp với các thành phần HTML, giúp tối ưu hóa việc đọc mã và quản lý các thành phần giao diện.

● Hỗ trợ Server-side Rendering (SSR): React cũng hỗ trợ Server-side Rendering thông qua Next.js, giúp cải thiện hiệu suất và SEO, đặc biệt đối với các trang web có lượng dữ liệu lớn.

3 Cách Thức Hoạt Động của ReactJS

React sử dụng thuật toán diffing (so sánh) để phát hiện và áp dụng các thay đổi trong DOM ảo so với DOM thật Quá trình này bao gồm các bước sau:

● Bước 1: Khi một component thay đổi dữ liệu, React sẽ tạo một bản sao của DOM ảo.

● Bước 2: So sánh bản sao này với DOM thật để phát hiện sự khác biệt (diff).

● Bước 3: Chỉ cập nhật phần DOM thật cần thiết thay vì toàn bộ, giúp tối ưu hóa hiệu suất.

● Next.js: Một framework mở rộng của React, cung cấp tính năng SSR, hỗ trợ SEO và tối ưu hóa hiệu suất.

● Formik: Công cụ quản lý form và dữ liệu trong các form, giảm thiểu mã cần viết và kiểm soát việc xử lý dữ liệu đầu vào.

● Material-UI: Bộ công cụ UI giúp tạo các thành phần giao diện đẹp và chuyên nghiệp, tuân theo tiêu chuẩn Material Design của Google.

5 Ứng Dụng của ReactJS trong Thực Tế

ReactJS đã được nhiều công ty và tổ chức hàng đầu ứng dụng trong việc phát triển các sản phẩm công nghệ cao:

● Mạng xã hội: Facebook, Instagram và Twitter sử dụng React để xây dựng các tính năng tương tác và thân thiện với người dùng.

● Nền tảng thương mại điện tử: Các công ty như Shopify và Etsy ứng dụng React

để tối ưu hóa trải nghiệm mua sắm trực tuyến.

● Nền tảng xem phim, video: Netflix và Hulu sử dụng React để tạo các trải nghiệm streaming mượt mà.

● Ứng dụng quản lý công việc: Trello và Jira dùng React để xây dựng các ứng dụng quản lý dự án hiệu quả và mạnh mẽ.

6 Những Ưu Điểm và Hạn Chế của ReactJS

● Ưu điểm:

○ Hiệu suất cao nhờ DOM ảo.

○ Kiến trúc linh hoạt, dễ tái sử dụng với component-based.

○ Cộng đồng lớn và hệ sinh thái phong phú hỗ trợ tài liệu, thư viện, công

○ JSX và cú pháp đặc biệt có thể khó hiểu với người mới bắt đầu.

○ Đôi khi gặp phải các vấn đề hiệu suất trong các ứng dụng rất lớn hoặc phức tạp nếu không tối ưu hóa cẩn thận.

7 Kết Luận

ReactJS là một thư viện mạnh mẽ cho phát triển giao diện người dùng hiện đại, được

áp dụng trong nhiều loại hình ứng dụng từ nhỏ đến lớn Với các đặc điểm nổi bật về hiệu suất, tính linh hoạt, và hỗ trợ một hệ sinh thái rộng lớn, React không chỉ đáp ứng

được nhu cầu của các nhà phát triển mà còn tạo ra các sản phẩm UI nhanh và dễ sử dụng cho người dùng cuối.

Tài Liệu Tham Khảo

● Trang chủ của ReactJS: reactjs.org

● Tài liệu và cộng đồng trên GitHub: React GitHub Repository

● Redux Documentation: redux.js.org

● Next.js Documentation: nextjs.org

2.3 Giới thiệu về MongoDB

2.3.2 Khái niệm và định nghĩa

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL, hoạt động dựa trên mô hình dữ liệu dạng tài liệu (document-oriented database) Thay vì sử dụng các bảng và hàng như các hệ quản trị cơ sở dữ liệu quan hệ, MongoDB lưu trữ dữ liệu dưới dạng tài liệu JSON (JavaScript Object Notation) hoặc BSON (Binary JSON) linh hoạt, giúp lưu trữ dữ liệu bán cấu trúc và phi cấu trúc một cách dễ dàng

và hiệu quả

2.3.3 Các khái niệm cơ bản

● Database (Cơ sở dữ liệu): MongoDB lưu trữ các tài liệu trong các cơ sở dữ liệu Mỗi cơ sở

● Tính linh hoạt cao: MongoDB cho phép lưu trữ dữ liệu mà không cần tuân thủ một schema chặt chẽ, điều này rất hữu ích cho các ứng dụng có dữ liệu không ngừng thay đổi.

● Khả năng mở rộng theo chiều ngang: MongoDB hỗ trợ sharding, cho phép phân phối dữ liệutrên nhiều máy chủ, dễ dàng mở rộng khi lượng dữ liệu tăng lên

● Hiệu suất cao: Với cấu trúc lưu trữ JSON/BSON, MongoDB tối ưu cho việc truy xuất nhanhchóng và dễ dàng khi làm việc với dữ liệu bán cấu trúc và phi cấu trúc

● Hỗ trợ tính năng sao lưu và phục hồi: MongoDB cung cấp các tính năng như replication và backup để đảm bảo dữ liệu luôn sẵn sàng và an toàn

2.3.5 Nhược điểm của MongoDB

● Thiếu hỗ trợ cho các giao dịch phức tạp: Mặc dù MongoDB đã cải thiện khả năng giao dịch,nhưng nó vẫn không thể so sánh với cơ sở dữ liệu quan hệ trong việc xử lý các giao dịch phức tạp đòi hỏi tính nhất quán cao

● Yêu cầu về tài nguyên: MongoDB đòi hỏi dung lượng bộ nhớ lớn hơn so với các cơ sở dữ liệu quan hệ do dữ liệu lưu trữ dạng BSON

● Tính nhất quán thấp hơn: MongoDB tuân theo mô hình CAP, trong đó ưu tiên tính khả dụng

và phân tán hơn tính nhất quán tuyệt đối

2.4 Giới thiệu về Visual Studio Code

2.4.1 Lịch Sử Hình Thành và Phát Triển

Visual Studio Code được phát triển bởi Microsoft và ra mắt lần đầu vào tháng 4 năm 2015 VS Code là một mã nguồn mở và có thể tải xuống miễn phí Ngay từ khi ra mắt, nó đã thu hút nhiều lậptrình viên nhờ vào hiệu suất mạnh mẽ, giao diện thân thiện và hỗ trợ mở rộng VS Code liên tục được cải tiến thông qua các bản cập nhật hàng tháng, giúp tăng cường tính năng, hiệu suất và khả năng mở rộng, từ đó trở thành một trong những công cụ lập trình phổ biến nhất hiện nay

2.4.2 Các Đặc Điểm Nổi Bật của VS Code

● Giao Diện Dễ Sử Dụng: Thiết kế giao diện đơn giản nhưng hiện đại, giúp người dùng dễ

dàng thao tác

● Hỗ Trợ Đa Nền Tảng: Chạy được trên Windows, macOS và Linux.

● Công Cụ Debugging Mạnh Mẽ: Tích hợp trình gỡ lỗi để kiểm tra mã nguồn trực tiếp, hỗ

trợ nhiều ngôn ngữ lập trình

● Tùy Chỉnh Cao: Người dùng có thể thay đổi giao diện, phím tắt, và cài đặt cho phù hợp với

phong cách cá nhân

● Mã Nguồn Mở: VS Code là một phần mềm mã nguồn mở, giúp cộng đồng lập trình viên dễ

dàng đóng góp và phát triển thêm tính năng

2.4.3 Cách Thức Hoạt Động của VS Code

VS Code được xây dựng dựa trên Electron, một framework phát triển ứng dụng desktop, giúp nó cókhả năng chạy trên nhiều nền tảng VS Code cung cấp môi trường phát triển mã nguồn trực tiếp với nhiều tính năng hỗ trợ lập trình như cú pháp nổi bật, tự động hoàn thành mã, và tích hợp trình gỡ

lỗi VS Code kết hợp các phần mở rộng giúp cải thiện trải nghiệm lập trình và cung cấp môi trường tùy biến cao cho người dùng.

2.4.4 Các Thư Viện và Công Cụ Bổ Trợ của VS Code

VS Code có kho phần mở rộng phong phú, bao gồm:

● ESLint, Prettier: Công cụ hỗ trợ định dạng và kiểm tra mã JavaScript.

● Live Server: Khởi chạy máy chủ web trực tiếp để xem trước thay đổi mã.

● GitLens: Hỗ trợ quản lý mã nguồn với Git, giúp xem lịch sử thay đổi.

● Python, C/C++, Java Extensions: Phần mở rộng cho các ngôn ngữ phổ biến, cung cấp tính

năng biên dịch, gỡ lỗi và tự động hoàn thành mã

● Docker, Kubernetes Extensions: Hỗ trợ phát triển và triển khai ứng dụng trên môi trường

container

2.4.5 Nhược Điểm của VS Code

● Chiếm Nhiều Bộ Nhớ: Do sử dụng Electron nên VS Code có thể tiêu tốn nhiều RAM, ảnh

hưởng đến hiệu suất trên máy cấu hình thấp

● Tùy Biến Phức Tạp: Việc cài đặt và tùy chỉnh phần mở rộng đôi khi gây rối cho người mới

JavaScript được tạo ra bởi Brendan Eich vào năm 1995 khi ông làm việc tại Netscape

Communications Corporation Ban đầu, nó có tên là Mocha, sau đó đổi thành LiveScript, và cuối cùng là JavaScript Ngôn ngữ này nhanh chóng trở thành một phần không thể thiếu của web, cho phép các trang web tương tác và động JavaScript đã trải qua nhiều cải tiến qua các phiên bản ECMAScript, với phiên bản ES6 (ECMAScript 2015) đánh dấu một cột mốc quan trọng trong việc giới thiệu nhiều tính năng mới, cải thiện khả năng lập trình

2.5.2 Các Đặc Điểm Nổi Bật của JavaScript

2.5.3 Cách Thức Hoạt Động của JavaScript

JavaScript được thực thi trên trình duyệt web qua một trình thông dịch (interpreter) Khi một trang web được tải, trình duyệt sẽ tải xuống mã JavaScript và thực thi nó Ngôn ngữ này hỗ trợ lập trình bất đồng bộ (asynchronous), cho phép xử lý các tác vụ mà không làm tắc nghẽn luồng chính của ứng dụng Sự kiện (event) trong JavaScript cho phép tạo ra phản hồi tức thì với các hành động của người dùng, như nhấp chuột hay nhập liệu

2.5.4 Các Thư Viện và Công Cụ Bổ Trợ của JavaScript

● jQuery: Thư viện phổ biến giúp đơn giản hóa việc thao tác DOM và xử lý sự kiện.

● React: Thư viện phát triển giao diện người dùng, cho phép xây dựng các ứng dụng web

động

● Angular: Framework phát triển ứng dụng web theo kiến trúc MVC

(Model-View-Controller)

● Node.js: Môi trường chạy JavaScript trên máy chủ, cho phép xây dựng ứng dụng backend.

● Express: Framework cho Node.js, hỗ trợ phát triển ứng dụng web nhanh chóng và dễ dàng.

2.5.5 Nhược Điểm của JavaScript

● Chạy Trên Trình Duyệt: Mã JavaScript có thể bị hạn chế bởi các chính sách bảo mật của

trình duyệt, như CORS (Cross-Origin Resource Sharing)

● Vấn Đề Hiệu Năng: Các ứng dụng JavaScript lớn có thể gặp phải vấn đề hiệu suất, đặc biệt

là khi không được tối ưu hóa tốt

● Khó Khăn Trong Việc Gỡ Lỗi: Gỡ lỗi mã JavaScript có thể khó khăn hơn so với các ngôn

ngữ khác do tính động của nó

● Khác Biệt Giữa Các Trình Duyệt: JavaScript có thể hoạt động khác nhau trên các trình

duyệt khác nhau, gây khó khăn cho việc phát triển và kiểm tra