Báo Cáo Thực Tập Tốt Nghiệp Đề Tài Xây Dựng Website Bán Quần Áo Nam.pdf

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢIKHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI

Xây dựng Website bán quần áo nam

Giảng viên hướng dẫn : TS Phạm Đình PhongSinh viên thực hiện : Đặng Hoàng ViệtMã sinh viên : 5210321

Lớp : Công Nghệ Thông Tin Khóa : K25

Hà Nội - 2023

MỤC LỤC

CHƯƠNG 1.C S LÝ THUYẾẾTƠ Ở 5

1.1.T ng quan vềề ngôn ng l p trình Javascriptổữ ậ 5

1.2.Gi i thi u chung vềề ngôn ng Javascriptớệữ 5

1.3.Nh ng tính năng c a ngôn ng Javascriptữủữ 6

1.4.Ưu đi m và nhểược đi m c a ngôn ng Javascriptểủữ 7

1.5.T ng quan vềề h c s đ li u MySQLổệ ơ ở ữ ệ 8

1.5.1.Gi i thi u chung vềề MySQLớệ 8

1.5.2.Gi i thi u chung vềề MySQL Workbenchớệ 8

1.6.T ng quan vềề mô hình MVCổ 9

CHƯƠNG 2.PHÂN TÍCH THIẾẾT KẾẾ H THỐẾNGỆ 12

2.1.Gi i thi u đềề tàiớệ 12

2.2.Mô t bài toánả 12

2.3.Các yều cầều vềề h thôốngệ 13

2.3.1.Các yều cầều vềề ch c năngứ 13

2.3.2.Các yều cầều phi ch c năngứ 13

2.4.Mô hình hóa yều cầều 14

2.5.Bi u đôề ca s d ngểử ụ 15

2.5.1.Bi u đôề trểường h p ca s d ng t ng quátợử ụổ 15

2.5.2.Đ c t chi tiềốt trặ ảường h p các ca s d ngợử ụ 17

MỞ ĐẦU

1 Lý do lựa chọn đề tài

Với sự phát triển vượt bậc của Internet và công nghệ ngày nay, có thể thấy rằngmọi khía cạnh trong cuộc sống đã dần dần được số hóa để ngày càng thuận tiện hơn đốivới con người hiện đại Và việc kinh doanh các ngành mặt hàng cũng không nằm ngoài xuthế đó

Chúng ta cũng dễ dàng thấy rằng trong thị trường hiện nay thì việc cạnh tranh vềkinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công tylớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất Tuy nhiên, sovới kinh doanh truyền thống thì vận hành các website bán hàng và các sàn TMDT thườngsẽ có chi phí thấp hơn, hiệu quả đạt cao hơn Hơn thế nữa, với lợi thế của công nghệInternet nên việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện Kết hợp với bộphận giao hàng tận nơi, là thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăngthêm thuận lợi để loại hình này phát triển

Đặc biệt là đối với ngành hàng quần áo, theo khảo sát trên thị trường đối với cácshop quần áo nhỏ cũng như các thương hiệu lớn, thì nhu cầu xây dựng dạng website đangngày càng tăng lên Điều này cũng bắt nguồn do nhu cầu mua sắm quần áo của con ngườiđang có xu hướng chuyển sang mua sắm trực tuyến thay vì trực tiếp như trước đây

Và để đáp ứng được nhu cầu cấp thiết đó em đã đi đến quyết định chọn đề tài “Xâydựng website bán quần áo nam” để nghiên cứu và phát triển

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

Xây dựng được một website bán các sản phẩm quần áo hoàn chỉnh bằng ReactJS.Đối với phía người dùng cuối, phải có những chức năng cơ bản nhất của một trang webbán hàng như: Xem sản phẩm, giỏ hàng, thanh toán… Đối với phía người quản trị viên thìphải có các chức năng quan trọng như: Thống kê doanh thu, quản lý người dùng, quản lýđơn hàng… Và thông qua đề tài lần này, chúng em hy vọng có thể tích lũy thêm đượcnhững kiến thức cũng như những kinh nghiệm quý báu trong việc xây được một trangweb bán quần áo chuyên nghiệp

3 Đối tượng và phạm vi nghiên cứu 3.1 Đối tượng nghiên cứu

Nghiên cứu và sử dụng ReactJS để xây dựng một website bán các sản phầm quần áo mộtcách hoàn chỉnh Ngôn ngữ lập trình sử dụng chủ yếu là sẽ là JavaScript Sẽ xây dựng đầyđủ 2 phần của website là phía người dùng và phía quản trị viên

3.2 Phạm vi nghiên cứu

Xây dựng một website chuyên bán các hàng mặt hàng quần áo phù hợp với ngườitiêu dùng Việt Nam, chưa nghiên cứu đến nhu cầu của khách hàng ở các nước khác

4 Tiêu chí chức năng của đề tài

Tiêu chí chung của đề tài là sẽ xây dựng một hệ thống cung cấp môi trường bánhàng đa nền tảng, trở thành kênh giao dịch điện tử hiện đại, dễ truy cập với nhiều thôngtin đa dạng, trung thực và kịp thời về những sản phẩm phù hợp với nhu cầu của ngườidùng trong nước Hệ thống sẽ giúp cho người mua dễ dàng mua được sản phẩm ưng ý,thuận tiện, đồng thời giúp cho người bán dễ dàng quản lí được sản phẩm

4.1 Về phía khách hàng

- Giao diện web dễ sữ dụng và có tính thẩm mỹ cao

- Giao diện web phải thiết kế sao cho nội dung hiển thị phải chính xác vàđầy đủ thông tin nhất để đáp ứng nhu cầu của khách hàng

- Để thuận tiện cho việc mua bán và giao dịch, hệ thống phải cho phépngười dùng đăng kí tài khoản, thông tin đăng kí phải được bảo mật antoàn, chính xác, tránh sai sót

- Để thuận tiện cho việc chọn lựa sản phẩm hệ thống cung cấp chức năngcho phép khách hàng có thể tìm kiếm sản phẩm theo yêu cầu

- Để thuận tiện cho việc chọn mua sản phẩm hệ thống cho phép người truycập hoặc người dùng xem chi tiết một mặt hàng bất kì

- Để tiến hành mua hàng hệ thống cho phép người truy cập hoặc ngườidùng được phép thêm sản phẩm bất kì vào giỏ hàng

- Vì kinh doanh các mặt hàng quần áo như quần jean, kaki, áo phông, áocó cổ nên sẽ có các lựa chọn như kích cở và màu sắc của từng mặc hàngđể người dùng dễ dàng lựa chọn

- Để thuận tiện cho khách hàng trong việc tính toán giá cả các mặt hàng hệthống cho phép người truy cập hoặc người dùng xem chi tiết giỏ hànghiện tại của họ

- Để thuận tiện cho mua hàng hệ thống cho phép người truy cập hoặcngười dùng cập cập nhật số lượng, thêm, xóa các sản phẩm có trong giỏhàng của họ

- Bình luận và đánh giá sản phẩm - Đóng góp ý kiến cho người quản trị

- Cung cấp các phương thức thanhh toán đa dạng để người dùng lựa chọn.

4.2 Về phía quản trị viên

- Cung cấp cho người quản trị giao diện quản lí rõ ràng, dễ sử dụng - Đối với người quản trị hệ thống phải cho phép họ đăng kí, đăng nhập,

cập nhật lại thông tin tài khoản

- Cho phép người quản trị thêm, xóa, cập nhật sản phẩm lên website 1cách đơn giản và chính xác

- Cung cấp cho chức năng quản lí danh sách sản phẩm

- Cho phép người quản trị được quyền thêm, xóa, sữa tài khoản kháchhàng hay sản phẩm website

- Cho phép người quản trị được quyền xem các hóa đơn, xóa hóa đơn - Cho phép người quản trị chỉnh sữa các trang giới thiệu, tin tức, liên hệ

của trang website

- Cung cấp chức năng thống kê doanh thu để nắm được tình hình kinhdoanh

CHƯƠNG 1.CƠ SỞ LÝ THUYẾT 1.1.Tổng quan về ngôn ngữ lập trình Javascript1.2.Giới thiệu chung về ngôn ngữ Javascript

JavaScript là một ngôn ngữ lập trình phía client (tức là chạy trực tiếp trên máy tínhcủa người dùng) phổ biến và mạnh mẽ được sử dụng rộng rãi cho việc phát triển ứng dụngweb

Hình 1 1 Ngôn ngữ lập trình Javascript

1.3.Những tính năng của ngôn ngữ Javascript

• Được Thực Thi Phía Client: JavaScript chạy trực tiếp trên trình duyệt của ngườidùng, cho phép tạo ra các ứng dụng web tương tác mà không cần sự can thiệp củamáy chủ.

• Ngôn Ngữ Dựa Trên Sự Kiện (Event-Driven): JavaScript thường được sử dụng đểphản ứng với sự kiện người dùng như nhấn nút, di chuyển chuột, hoặc gửi biểumẫu.

• Không Đòi Hỏi Biên Dịch Trước: JavaScript là một ngôn ngữ thông dịch, mãnguồn JavaScript có thể được thực thi trực tiếp trên trình duyệt mà không cần biêndịch trước.

• Tích Hợp Dễ Dàng: JavaScript có thể tích hợp dễ dàng vào các trang web HTMLbằng cách sử dụng thẻ <script> hoặc bằng cách bao gồm mã JavaScript trong tệpHTML.

• Cú Pháp Dễ Đọc và Dễ Học: JavaScript có cú pháp tương đối dễ đọc và dễ học,đặc biệt là đối với những người mới học lập trình.

• Thư Viện và Framework: JavaScript có nhiều thư viện và framework phát triển sẵnnhư React, Angular, Vue.js, và jQuery giúp tăng năng suất phát triển và quản lý dựán.

• Cộng Đồng Lớn: JavaScript có một cộng đồng phát triển lớn và nhiều tài liệu,hướng dẫn, và tài nguyên trực tuyến giúp học và phát triển dễ dàng.

• Phù Hợp Cho Phát Triển Web: JavaScript là một công cụ mạnh mẽ cho việc pháttriển trang web động và ứng dụng web tương tác, bao gồm cả việc xử lý sự kiệnngười dùng, gửi yêu cầu mạng, và tương tác với API

1.4.Ưu điểm và nhược điểm của ngôn ngữ JavascriptƯu điểm:

• Dễ Học và Sử Dụng: JavaScript có cú pháp đơn giản và dễ đọc, giúp người mớihọc lập trình nắm bắt nhanh chóng

• Thực Thi ở Phía Client: JavaScript chạy trực tiếp trên trình duyệt của người dùng,giúp tạo ra các ứng dụng web tương tác mà không cần sự can thiệp của máychủ.Tính linh hoạt: PHP có thể hoạt động trên nhiều nền tảng khác nhau nhưWindows, Linux và macOS, và có thể kết hợp với nhiều loại cơ sở dữ liệu khácnhau

• Đa Mục Đích: JavaScript không chỉ được sử dụng cho việc phát triển giao diệnngười dùng (UI) mà còn có thể sử dụng cho việc xử lý dữ liệu, tương tác với máychủ, và nhiều mục đích khác.

• Hỗ Trợ Đa Nền Tảng: JavaScript có thể được sử dụng trên nhiều nền tảng, baogồm cả trình duyệt web, ứng dụng di động (sử dụng React Native hoặcNativeScript), và máy chủ (sử dụng Node.js)

Nhược điểm:

• Bảo Mật: JavaScript chạy phía client, điều này có nghĩa là mã nguồn JavaScript cóthể bị truy cập và thay đổi bởi người dùng, do đó cần phải được kiểm tra bảo mậtcẩn thận để tránh các lỗ hổng bảo mật

• Cấu Trúc Mã Khó Kiểm Soát: Trong các ứng dụng lớn và phức tạp, cấu trúc mãJavaScript có thể trở nên khó kiểm soát và duy trì nếu không được tổ chức tốt • Có Thể Gây Lỗi Mạng (Cross-Browser Compatibility Issues): JavaScript có thể

gặp phải các vấn đề tương thích trình duyệt, khi mà mã JavaScript hoạt động khácnhau trên các trình duyệt web khác nhau.

• Là Ngôn Ngữ Loosely Typed: JavaScript không yêu cầu kiểu dữ liệu cụ thể, điềunày có thể dẫn đến các lỗi hoặc hành vi không mong muốn nếu không kiểm soátcẩn thận kiểu dữ liệu.

• Có Thể Trở Nên Chậm Trong Các Ứng Dụng Lớn: Trong các ứng dụng web lớn vàphức tạp, JavaScript có thể trở nên chậm và cần tối ưu hóa kỹ thuật

1.5.Tổng quan về hệ cơ sở đữ liệu MySQL 1.5.1.Giới thiệu chung về MySQL

MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến được sử dụng rộngrãi trên toàn thế giới Được phát triển bởi Oracle Corporation, MySQL là một phần mềmmiễn phí và có thể tương thích với nhiều nền tảng hệ điều hành

MySQL sử dụng ngôn ngữ truy vấn SQL (Structured Query Language) để thao tácvới cơ sở dữ liệu Nó hỗ trợ nhiều loại bảng và chỉ mục, và có khả năng xử lý các dữ liệucó cấu trúc và không có cấu trúc MySQL cũng cung cấp cho người dùng nhiều tính năngbảo mật, bao gồm quản lý người dùng và phân quyền truy cập

MySQL cũng có tính năng sao lưu và phục hồi dữ liệu, cho phép người dùng lưutrữ và khôi phục các bản sao dữ liệu để đảm bảo tính toàn vẹn và an toàn của dữ liệu.MySQL cũng được phát triển để có khả năng mở rộng tốt, cho phép các ứng dụng có thểmở rộng dữ liệu của mình một cách linh hoạt và dễ dàng

Một trong những ưu điểm lớn của MySQL là tính khả dụng và độ tin cậy cao, vớikhả năng xử lý hàng nghìn yêu cầu truy vấn mỗi giây Điều này làm cho MySQL trở thànhmột lựa chọn phổ biến cho các ứng dụng web và các ứng dụng có yêu cầu cao về dữ liệu

Tuy nhiên, nhược điểm của MySQL là có thể gặp vấn đề về hiệu suất khi xử lý cácbảng dữ liệu rất lớn hoặc các yêu cầu truy vấn phức tạp Ngoài ra, nó có thể đòi hỏi nhiềutài nguyên máy tính để vận hành một cách hiệu quả

1.5.2.Giới thiệu chung về MySQL Workbench

MySQL Workbench là một công cụ quản lý cơ sở dữ liệu miễn phí, cung cấp chongười dùng giao diện đồ họa và các công cụ để thiết kế, quản lý và truy vấn cơ sở dữ liệuMySQL Được phát triển bởi Oracle Corporation, MySQL Workbench cung cấp chongười dùng một công cụ đa nền tảng có thể sử dụng trên nhiều hệ điều hành khác nhau,bao gồm Windows, macOS và Linux

Hình 1 2 Hệ cơ sở dữ liệu MySQL Workbench

MySQL Workbench cung cấp cho người dùng một loạt các tính năng quản lý cơ sở dữliệu, bao gồm:

• Thiết kế và quản lý các cơ sở dữ liệu MySQL

• Tạo bảng, chỉ mục, khóa ngoại và các đối tượng cơ sở dữ liệu khác • Xây dựng và thực thi các truy vấn SQL

• Hỗ trợ cho việc sao lưu và phục hồi dữ liệu • Phân tích và tối ưu hóa truy vấn

• Thực hiện đồ họa tương tác với cơ sở dữ liệu, bao gồm tạo biểu đồ ER và quan hệgiữa các bảng dữ liệu

Ngoài ra, MySQL Workbench cũng cung cấp cho người dùng một số tính năng tiện íchkhác như xem và sửa đổi dữ liệu, quản lý tài khoản người dùng và phân quyền truy cập, vàkiểm tra sự khác biệt giữa cơ sở dữ liệu hiện tại và phiên bản được sao lưu

Với MySQL Workbench, người dùng có thể quản lý các cơ sở dữ liệu MySQL củamình một cách dễ dàng và hiệu quả hơn, đồng thời cải thiện quá trình phát triển và quản lýứng dụng web và các ứng dụng khác

1.6.Tổng quan về mô hình MVC

MVC là viết tắt của Model-View-Controller, đây là một mô hình phát triển phần mềm phổbiến trong lập trình web Mô hình này cho phép tách biệt logic xử lý dữ liệu, giao diện vàluồng điều hướng của ứng dụng

Các thành phần chính của mô hình MVC bao gồm:

• Model: Đây là thành phần chịu trách nhiệm xử lý dữ liệu và tương tác với cơ sở dữliệu Model sẽ chứa các phương thức để lấy dữ liệu từ cơ sở dữ liệu, thêm, sửa, xóadữ liệu trong cơ sở dữ liệu

• View: Đây là thành phần chịu trách nhiệm hiển thị giao diện người dùng View sẽsử dụng các dữ liệu được truyền từ Controller để hiển thị nội dung phù hợp trêngiao diện

• Controller: Đây là thành phần chịu trách nhiệm điều hướng luồng xử lý của ứngdụng Controller sẽ xử lý các yêu cầu từ người dùng, gọi các phương thức từModel để lấy hoặc lưu trữ dữ liệu và truyền dữ liệu cho View để hiển thị

Hình 1 3 Mô hình MVC

Mô hình MVC cho phép tách biệt logic xử lý, giao diện và luồng điều hướng củaứng dụng, giúp cho việc phát triển, bảo trì và kiểm thử ứng dụng trở nên dễ dàng hơn Môhình này còn giúp cho ứng dụng có tính linh hoạt và tái sử dụng cao Khi có thay đổi trongmột thành phần của mô hình, các thành phần khác sẽ không bị ảnh hưởng, giúp cho việcphát triển và bảo trì ứng dụng trở nên hiệu quả hơn

1.4 Tổng quan về library ReactJS 1.4.1 Sơ lược về library ReactJS

ReactJS, thường được gọi là React, là một thư viện JavaScript phát triển bởiFacebook Nó là một công cụ mạnh mẽ cho việc xây dựng giao diện người dùng (UI)tương tác trên trình duyệt web

Hình 1 4 Library ReactJS

Một số tính năng của Laravel bao gồm:

• Thành phần (Components): React cho phép bạn chia ứng dụng thành các thànhphần riêng lẻ Mỗi thành phần có thể là một phần của giao diện như nút bấm, biểuđồ, bảng, hoặc bất kỳ thành phần nào khác bạn có thể nghĩ đến Điều này giúpquản lý và tái sử dụng mã dễ dàng hơn.

• Virtual DOM: React sử dụng Virtual DOM để tối ưu hóa hiệu suất Thay vì cậpnhật DOM thực sự mỗi khi có sự thay đổi, React tạo ra một bản sao ảo của DOMvà so sánh nó với DOM thực tế, sau đó chỉ cập nhật các phần thay đổi Điều nàygiúp giảm tải và làm tăng hiệu suất ứng dụng.

• JSX (JavaScript XML): JSX là một phần của React và cho phép bạn viết mã giaodiện bằng cách kết hợp JavaScript và XML JSX giúp bạn tạo các thành phần giaodiện một cách dễ dàng hơn và đọc được hơn.

• Quản lý trạng thái (State Management): React cung cấp cách quản lý trạng thái ứngdụng dễ dàng bằng cách sử dụng các biến trạng thái (state) và React Hooks nhưuseState Bạn có thể theo dõi và cập nhật trạng thái của các thành phần để hiển thịdữ liệu và giao diện tương ứng.

• Hệ thống Routing: React Router là một thư viện phổ biến cho phép bạn quản lýđịnh tuyến trong ứng dụng React Bạn có thể xác định các đường dẫn và liên kếtgiữa các trang trong ứng dụng một cách dễ dàng.

• Công cụ phát triển mạnh mẽ: Có nhiều công cụ mạnh mẽ để hỗ trợ phát triểnReact, bao gồm React DevTools để kiểm tra và gỡ lỗi thành phần React trong trìnhduyệt và công cụ tạo ứng dụng Create React App để thiết lập dự án nhanh chóng

CHƯƠNG 2.PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1.Giới thiệu đề tài

Website kinh doanh sản phẩm quần áo trực tuyến là một trong những lựa chọn phổbiến cho các doanh nghiệp hoặc cá nhân kinh doanh trong lĩnh vực quần áo Với sự pháttriển của công nghệ và thói quen mua sắm trực tuyến của người dùng, việc sở hữu mộttrang web bán hàng trực tuyến đã trở thành một cách để tăng doanh số bán hàng và tiếpcận khách hàng một cách dễ dàng hơn

Đề tài xây dựng website kinh doanh sản phẩm quần áo trực tuyến sẽ tập trung vàoviệc phát triển một trang web bán hàng đẹp mắt, dễ sử dụng và tích hợp đầy đủ các tínhnăng cần thiết như: tìm kiếm sản phẩm, lọc sản phẩm, giỏ hàng, thanh toán, quản lý đơnhàng và quản lý sản phẩm Sử dụng các công nghệ và library phổ biến như ReactJS,MySQL, … sẽ giúp cho việc xây dựng trang web được nhanh chóng và dễ dàng hơn

Với đề tài này, em sẽ tìm hiểu và áp dụng những kiến thức và kỹ năng về lập trìnhweb, thiết kế đồ họa, quản lý cơ sở dữ liệu để xây dựng một trang web kinh doanh sảnphẩm quần áo trực tuyến đáp ứng nhu cầu của khách hàng và giúp tăng doanh số bán hàng

2.2.Mô tả bài toán

Bài toán cho đề tài xây dựng website kinh doanh sản phẩm quần áo trực tuyến baogồm việc thiết kế và triển khai một hệ thống website để cung cấp cho khách hàng một nềntảng trực tuyến để mua sắm các sản phẩ Để giải quyết bài toán này, cần phải tập trung vàocác yếu tố như:

• Thiết kế giao diện trực quan và thu hút khách hàng, bao gồm cả cách bố trí sảnphẩm và các thông tin liên quan đến sản phẩm như giá, mô tả, hình ảnh, v.v • Xây dựng hệ thống quản lý sản phẩm để quản lý thông tin sản phẩm, cập nhật giá

Với các yếu tố trên, việc xây dựng một website kinh doanh trực tuyến sẽ đòi hỏi sự kếthợp giữa các kỹ năng thiết kế, lập trình, quản lý dữ liệu, bảo mật và quản lý dự án để đảmbảo hoạt động hiệu quả của hệ thống

2.3.Các yêu cầu về hệ thống 2.3.1.Các yêu cầu về chức năng

- Khách: Đăng kí, xem sản phẩm, tìm kiếm sản phẩm

- Thành viên: Đăng nhập, đăng xuất, quản lý giỏ hàng, xem lịch sử đơn hàng, chỉnh

sửa thông tin cá nhân, đổi mật khẩu, quên mật khẩu, thanh toán đơn hàng, đánh giásản phẩm, xem sản phẩm, tìm kiếm sản phẩm

- Nhân viên: Quản lý đơn hàng, quản lý tài khoản thành viên, quản lý danh mục sản

phẩm, quản lý sản phẩm, quản lý size và màu sản phẩm, chỉnh sửa thông tin cánhân, đổi mật khẩu, thống kê

- Admin: Cài đặt website, quản lý nhân viên, thống kê, quản lý đơn hàng, quản lý

danh mục, sản phẩm size màu, chỉnh sửa thông tin cá nhân, đổi mật khẩu

2.3.2.Các yêu cầu phi chức năng

thiện với người dùng

Thiết kế giao diện đồng nhất về màu sắc, font chữ và định dạnggiúp người dùng dễ dàng sử dụng và tìm kiếm thông tin