Đồ Án môn học lập trình web tên Đề tài xây dựng Ứng dụng web bán quần Áo

HTML HyperText Markup Language là một ngôn ngữ trình bày dữ liệu dựa trên nguyên tắc “đánh dấu”, được thiết kế ra để tạo nên các trang web với các mẫu thông tin trình bày trên World Wide

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC

Lập trình web

Tên đề tài: Xây dựng ứng dụng web bán quần áo

Môn học : Lập trình web

Giảng viên : BÙI DUY TÂN

SV thực hiện 1 : Nguyễn Phạm Thanh Vũ [MSSV] 2100008645

SV thực hiện 2 : Hồ Hữu Tâm [MSSV] 2100008433

Học kỳ 2 Năm 2023 - 2024

Trang 2

LỜI MỞ ĐẦU

Trong kỷ nguyên kỹ thuật số ngày nay, thương mại điện tử đã trở thành một lực lượng không thể ngăn cản, cách mạng hóa cách chúng ta mua sắm và bán hàng hóa Trong bối cảnh này, các cửa hàng quần áo trực tuyến đã nổi lên như một kênh quan trọng để các doanh nghiệp tiếp cận khách hàng và mở rộng phạm vi tiếp cận của họ

Internet đã đóng vai trò quan trọng trong việc thực hiện các công việc một cách nhanh chóng và hiệu quả, tiết kiệm chi phí, đồng thời thúc đẩy sự phát triển toàn cầu, ảnh hưởng sâu rộng đến văn hóa và chất lượng cuộc sống Trong lĩnh vực sản xuất và kinh doanh, thương mại điện tử đóng vai trò quan trọng trong việc quảng bá và giới thiệu sản phẩm cho khách hàng Do đó, việc thiết kế một trang web hấp dẫn trở nên quan trọng để cung cấp thông tin đầy đủ và thu hút sự chú ý của khách hàng

Dự án "Lập trình web xây dựng ứng dụng web bán quần áo " của chúng em được triển khai nhằm đáp ứng nhu cầu này, mang lại thông tin chi tiết về sản phẩm và trải nghiệm mua sắm trực tuyến thuận tiện trên trang web

Trang 3

LỜI CẢM ƠN

Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến Trường Đại học Nguyễn Tất Thành đã đưa môn học Lập trình web vào chương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn – Thầy Bùi Duy Tân đã truyền đạt những kiến thức quý báu cho chúng em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học Lập trình web của thầy, chúng em đã có thêm cho mình nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thức quý báu, là hành trang để chúng em có thể vững bước sau này

Bộ môn Lập trình web là môn học thú vị, vô cùng bổ ích và có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên Tuy nhiên, do vốn kiến thức còn nhiều hạn chế và khả năng tiếp thu thực tế còn nhiều bỡ ngỡ Mặc dù em đã cố gắng hết sức nhưng chắc chắn bài tiểu luận/ báo cáo khó có thể tránh khỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mong thầy xem xét và góp ý để bài báo cáo của chúng em được hoàn thiện hơn.

Chúng em xin chân thành cảm ơn!

Trang 4

MỤC LỤC

Thông tin chung 1

Chương 1 Tổng quan 2

1.1 Mô tả tóm tắt về website 2

1.2 Cơ sở lý thuyết 2

Chương 2 Phân tích và hoạch định 3

2.1 Các module chức năng: Trình bày sơ đồ chức năng 3

2.2 Site map: Trình bày sơ đồ liên kết 3

2.3 Database diagram: Mô tả lược đồ quan hệ 3

2.4 GUI: Mô tả giao diện các các nhóm trang web của website 3

Chương 3 Triển khai ứng dụng web 4

3.1 Thiết kế giao diện: Trình bày các bước thiết kế, công cụ sử dụng và kết quả 4

3.2 Thiết kế dữ liệu: Trình bày sơ đồ dữ liệu và chi tiết các bảng 4

3.3 Thiết kế xử lý: Trình bày chi tiết các bước cài đặt các module chức năng 4

3.4 Bảo mật website 4

3.5 Kiểm tra và xuất bản website 4

Chương 4 Kết luận 5

4.1 Kết quả đạt được 5

4.2 Những hạn chế và hướng mở rộng 5

TÀI LIỆU THAM KHẢO 5

Trang 5

DANH MỤC HÌNH ẢNH

Trang 6

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

Nội dung báo cáo Đồ án môn học Lập trình Web

Thông tin chung

Tên đồ án: Xây dựng ứng dụng web bán quần áo

Nhóm: 6

- Sinh viên 1: Nguyễn Phạm Thanh Vũ MSSV: 2100008645

- Sinh viên 2: Hồ Hữu Tâm MSSV: 2100008433

Phân công thực hiện (Mô tả cụ thể công việc của từng thành viên)

- Sinh viên 1:

- Sinh viên 2:

SV thực hiện: Nguyễn Phạm Thanh Vũ – Hồ Hữu Tâm

1

Trang 7

Chương 1 Tổng quan

1.1 Mô tả tóm tắt về website

- Tên trang web: TV Fashion

- TV Fashion bán các sản phẩm bao gồm các loại quần áo nam nữ Tại đây khách hàng có thể xem được hình ảnh, thông tin và giá cả của sản phẩm để lựa chọn và đặt mua TV Fashion được chia thành các trang, gồm có:

 Home

 Login

 Product:

 Women

 Men

 Kids

 Chi tiết sản phẩm

 Giỏ hàng

 Liên hệ

- Xác định yêu cầu, thu thập thông tin và các dữ liệu liên quan:

 Yêu cầu chức năng:

• Hiển thị: Sản phẩm với hình ảnh, thông tin và giá thành

• Tìm kiếm: Khách hàng có thể tìm kiếm sản phẩm dựa vào tên, mô tả, giá cả

mà người bán đưa thông tin lên

• Mua hàng: Khách hàng có thể nhấn mua và xác nhận thông tin để đặt đơn mua hàng

 Yêu cầu chức năng:

• Thiết kế giao diện dễ dàng thao tác và dễ nhớ

• Tối ưu hoá cải thiện trải nghiệm người dùng với đường tải nhanh, mượt

• Bảo mật thông tin khách hàng

• Tính khả dụng: Tương thích với nhiều trình duyệt, thiết bị Trang web được

mở 24/24 để phục vụ khách hàng

 Nguồn thông tin và dữ liệu:

• Thông tin và dữ liệu của cửa hàng tải lên

2

Trang 8

• Dữ liệu khách hàng, bao gồm thông tin đơn hàng

1.2 Cơ sở lý thuyết

Các kiến thức về HTML, CSS, C Sharp, JavaScript, Jquery, Bootstrap, MVC

- Công cụ thực hiện đồ án: Visual Studio 2019

1.2.1 Ngôn Ngữ HTML

1.2.1.1 HTML là gì?

HTML (HyperText Markup Language) là một ngôn ngữ trình bày dữ liệu dựa trên nguyên tắc “đánh dấu”, được thiết kế ra để tạo nên các trang web với các mẫu thông tin trình bày trên World Wide Web

HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức của HTML là HTML 4.01 được công bố vào năm 1999

1.2.1.2 HTML hoạt động như thế nào?

HTML có đuôi file dạng html hoặc htm Bạn có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari,… Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ,…) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tài liệu HTML bao gồm 1 bộ tag (hay còn gọi là element) Nó tạo ra một cấu trúc tương

tự như cây thư mục với các heading, section, paragraph,… và một số khối nội dung khác Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấu trúc <tag></tag>

1.2.1.3 Ưu, nhược điểm của HTML

 Ưu điểm

 Ngôn ngữ này được sử dụng rộng rãi với rất nhiều nguồn tài nguyên hỗ trợ cùng một cộng đồng sử dụng vô cùng lớn đằng sau nó

 Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện hành

 Quá trình học HTML khá đơn giản

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

 Các Markup sử dụng trong HTML thường ngắn gọn và đồng nhất

3

Trang 9

 Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C)

 Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Node.js,

 Nhược điểm

 Ngôn ngữ này chỉ được áp dụng chủ yếu cho trang web tĩnh Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 ví

dụ như PHP

 Người dùng phải tạo các trang web riêng lẻ cho HTML, ngay cả khi các phần

tử giống nhau

 Một số trình duyệt chấp nhận các tính năng mới một cách chậm chạp Đôi khi các trình duyệt cũ hơn không phải lúc nào cũng hiển thị các thẻ mới hơn

1.2.2 Ngôn ngữ định dạng dữ liệu (CSS)

1.2.2.1 CSS là gì?

 CSS (Cascading Style Sheets) là một ngôn ngữ dùng để xác định bố cục, định dạng,

 kiểu cách của những trang HTML

 Ví dụ: CSS có thể xác định font chữ, chiều cao, chiều rộng, màu sắc phông nền, vị trí và nhiều thứ khác trên tài liệu HTML

 HTML được sử dụng để cấu trúc nội dung CSS được sử dụng để định dạng nội dung đã được cấu trúc

1.2.2.2 CSS hoạt động như thế nào?

Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class, v.v Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn.

CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML

HTML và CSS có mối quan hệ gắn bó mật thiết với nhau Nếu HTML là nền tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó

1.2.3 C Sharp

4

Trang 10

C# (C Sharp, đọc là "xi-sáp") là một ngôn ngữ lập trình hướng đối tượng đa năng, mạnh mẽ được phát triển bởi Microsoft, C# là phần khởi đầu cho kế hoạch .NET của

họ Tên của ngôn ngữ bao gồm ký tự thăng theo Microsoft nhưng theo ECMA là C#, chỉ bao gồm dấu số thường Microsoft phát triển C# dựa trên C++ và Java C# được miêu tả là ngôn ngữ có được sự cân bằng giữa C++, Visual Basic, Delphi và Java C# được thiết kế chủ yếu bởi Anders Hejlsberg kiến trúc sư phần mềm nổi tiếng với các sản phẩm Turbo Pascal, Delphi, J++, WFC Phiên bản gần đây nhất là 9.0, được phát hành vào năm 2020 cùng với Visual Studio 2019 phiên bản 16.8

1.2.4 J Query

Jquery là gì?

JQuery là thư viện được viết từ JavaScript, JQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn JQuery được tích hợp nhiều module khác nhau Từ module hiệu ứng cho đến module truy vấn selector. JQuery được sử dụng đến 99% trên tổng số website trên thế giới.

Lịch sử của jQuery

JQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC Nó được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là Timmy Wilson

1.2.5 JavaScript

JavaScript là gì?

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản

đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript

Thư viện JavaScript

Thư viện JavaScript là tập hợp các đoạn mã viết sẵn mà các nhà phát triển web có thể tái sử dụng để thực hiện các hàm JavaScript chuẩn Mã thư viện JavaScript được gắn

5

Trang 11

vào phần còn lại của mã dự án khi cần thiết Nếu bạn coi mã ứng dụng JavaScript như một ngôi nhà thì các thư viện JavaScript sẽ giống như đồ nội thất làm sẵn mà các nhà phát triển có thể sử dụng để cải thiện chức năng của ngôi nhà

1.2.6 Bootstrap

Bootstrap là gì?

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton với mục đích ban đầu là

sử dụng bootstrap như một framewwork hỗ trợ nội bộ tại công ty Twitter và xuất bản như một mã nguồn mở vào tháng 8/2011 trên website GitHub

Bootstrap là nền tảng bao gồm các thư viện trình bày trang HTML, CSS và Javascript giúp cho việc phát triển giao diện web trong nhiều môi trường đa nền tảng một cách nhanh chóng và dễ dàng hơn gọi là Responsive web Thiết kế Responsive web là tạo ra website có khả năng tự động điều chỉnh giao diện web trên tất cả các thiết bị, từ PC đến các thiết bị di dộng như điện thoại, máy tính bảng

Cách sử dụng Bootstrap

Bootstrap dễ sử dụng, bất kỳ ai chỉ có kiến thức cơ sở về HTML, CSS có thể bắt đầu

sử dụng Bootstrap Trong Bootstrap 3, kiểu tiếp cận mobile-first cho phép trình bày trang linh động trên các thiết bị di động, là nội dung cơ bản của framework. Bootstrap tương thích với tất cả trình duyệt hiện đại như Chrome, Firefox, Internet Explorer, Safari, và Opera

Có thể download Bootstrap từ getbootstrap.com, hay sử dụng Bootstrap ngay trên host của nó Để đảm bảo trang trình bày thích hợp trên môi trường đa nền tảng, bổ sung thẻ bên trong thẻ

1.2.7 MVC.

Mô hình MVC

Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nó giúp cho các lập trình viên tách ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác

Model: Các đối tượng Models là một phần của ứng dụng, các đối tượng này thiết lập logic của phần dữ liệu của ứng dụng Thông thường, các đối tượng model lấy và lưu trạng thái của model trong CSDL

6

Trang 12

View: Views là các thành phần dùng để hiển thị giao diện người dùng (UI) Thông thường, view được tạo dựa vào thông tin dữ liệu model

Controller: Controller là các thành phần dùng để quản lý tương tác người dùng, làm việc với model và chọn view để hiển thị giao diện người dùng

7

Trang 13

Chương 2 Phân tích và hoạch định

2.1.Các module chức năng: Trình bày sơ đồ chức năng

Sơ đồ chức năng:

Hình 1: Sơ đồ chức năng

8

Trang 14

2.2.Site map: Trình bày sơ đồ liên kết

Hình 2: Sitmap

9

Trang 15

2.3.Database diagram: Mô tả lược đồ quan hệ

Hình 3: Mô hình cơ sở dữ liệu

10

Trang 16

2.4.GUI: Mô tả giao diện các các nhóm trang web của website

Giao diện các nhóm trang web của website được chia thành 3 phần:

- Phần đầu trang web (Header)

- Phần than trang web (Body)

- Phần chân trang web (Footer)

Giao diện này phù hợp với bất kỳ thiết bị nào

Hình 4: Giao diện trang web cơ bản

11

Trang 17

Chương 3 Triển khai ứng dụng web

3.1 Thiết kế giao diện: Trình bày các bước thiết kế, công cụ sử dụng và kết quả

3.2 Thiết kế dữ liệu: Trình bày sơ đồ dữ liệu và chi tiết các bảng

3.3 Thiết kế xử lý: Trình bày chi tiết các bước cài đặt các module chức năng

3.4 Bảo mật website

3.5 Kiểm tra và xuất bản website

 Kiểm tra giao diện các trang khi thể hiện trên các trình duyệt web thông dụng

 Kiểm tra các chức năng của website (thể hiện thông tin, quản trị, …)

 Hosting website lên internet (yêu cầu mở rộng)

12

Trang 18

Chương 4 Kết luận

4.1 Kết quả đạt được



4.2 Những hạn chế và hướng mở rộng



TÀI LIỆU THAM KHẢO

13

Tiêu đề	Xây Dựng Ứng Dụng Web Bán Quần Áo
Tác giả	Nguyễn Phạm Thanh Vũ, Hồ Hữu Tâm
Người hướng dẫn	Bùi Duy Tân
Trường học	Trường Đại Học Nguyễn Tất Thành
Chuyên ngành	Lập Trình Web
Thể loại	đồ án
Năm xuất bản	2023 - 2024
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	18
Dung lượng	386,56 KB