TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

TIỂU LUẬN TÊN HP / ĐỒ ÁN CƠ SỞ/ ĐỒ ÁN CHUYÊN NGÀNH

(Bold, size 16)

Cửa hàng trực tuyến Double D

Giảng viên hướng dẫn: BÙI DUY TÂN

Sinh viên thực hiện: NGUYỄN QUỐC DUY
MSSV: 2100007620
Khoá: 2021 - 2024
Ngành/ chuyên ngành: CÔNG NGHỆ THÔNG TIN

Tp HCM, tháng … năm … (Bold, size 13)

 TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN (Bold, size 16)

TIỂU LUẬN TÊN HP / ĐỒ ÁN CƠ SỞ/ ĐỒ ÁN CHUYÊN NGÀNH

(Bold, size 16)

Tên đề tài...................................................................................................................
...................................................................................................................................
...................................................................................................................................
(Bold, size 18-30, tùy theo số chữ, của tên đề tài)

Giảng viên hướng dẫn: BÙI DUY TÂN

Sinh viên thực hiện: NGUYỄN QUỐC DUY
MSSV: 2100007620
Khoá: 2021 - 2024
Ngành/ chuyên ngành: CÔNG NGHỆ THÔNG TIN

TPHCM, tháng … năm … (Bold, size 13)

 LỜI MỞ ĐẦU

Ngày nay Thương Mại Điện Tử (TMĐT) đã trở thành một công
cụ thương mại phổ biến trên thế giới và Việt Nam. Ở VN, điển hình là
các các website: www.Phongvu.com, www.FPTshop.com,
www.mediamart.com.vn, … đang có tình hình phát triển tốt. Tuy
nhiên, để hình thành nên những trang TMĐT khá nổi tiếng đó là cả một
quá trình, thời gian, tiền bạc và công sức bỏ ra không ít.

Trong thời đại thông tin bùng nổ, các doanh nghiệp đã dần ý
thức được tác dụng của kênh thông tin Internet. Các cơ hội kinh doanh
và hợp tác làm ăn có thể nảy sinh từ Internet. Trong khi đó, hiện nay,
để một doanh nghiệp triển khai được ý định kinh doanh của mình trên
môi trường mạng Internet là một vấn đề không hề đơn giản. Vấn đề đó
chính là chi phí, thời gian triển khai và bảo trì hệ thống. Theo mô hình
truyền thống, để triển khai một phần mềm cần phải có các giai đoạn
sau đây. Thương mại điện tử không chỉ mở ra những cơ hội kinh doanh
mới, những sản phẩm và dịch vụ mới, những ngành nghề kinh doanh
mới mà bản thân nó thực sự là một phương thức kinh doanh mới:
Phương thức kinh doanh điện tử. Thương mại điện tử chuyển hoá các
chức năng kinh doanh, từ nghiên cứu thị trường và sản xuất sản phẩm
đến bán hàng, dịch vụ sau bán hàng từ phương thức kinh doanh truyền
thống đến phương thức kinh doanh điện tử.

Trong thời gian thực tập vừa qua, em đã học được nhiều điều về
việc thiết kế web bằng ngôn ngữ HTML và CSS để xây dựng một trang
web thương mại điện tử. Với sự hướng dẫn tận tình của thầy: Bùi Duy
Tân em đã hoàn thành cuốn báo cáo đồ án này. Tuy đã cố gắng hết sức
tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc chắn không
tránh khỏi đc những thiếu sót. Em rất mong được sự thông cảm và góp
ý của các quý thầy cô.

i
 LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành nhất đến thầy Bùi
Duy Tân. Trong quá trình học tập và tìm hiểu môn Thiết kế Web, em
nhận được sự quan tâm giúp đỡ, hướng dẫn rất tận tình, tâm quyết của
thầy. Thầy đã giúp em tích lũy thêm nhiều kiến thức để vận dụng vào
công việc và cuộc sống. Thực tế cho thấy,sự thành công nào cũng đều
gắn liền với những sự hỗ trợ, giúp đỡ từ những người xung quanh từ
bạn bè đến gia đình dù cho sự giúp đỡ đó ít hay nhiều, trực tiếp hay
gián tiếp.Từ những kiến thức mà thầy truyền tải, em đã dần trả lời được
những vấn đề trong cuộc sống thông qua bài tiểu luận này, em xin
trình bài lại những gì mà mình đã được thầy giảng dạy .Ban đầu em
còn bỡ ngỡ vì vốn kiến thức hạn hẹp. Do vậy, không tránh khỏi những
thiếu sót, em rất mong nhận được ý kiến đóng góp của thầy để em
nâng cao kiến thức của bản thân và các bạn học cùng lớp để bài tiểu
luận có thể được hoàn thiện hơn. Em xin chân thành cảm ơn!
Nguyễn Quốc Duy

ii
iii
 BM-ChT-11

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KỲ THI KẾT THÚC HỌC PHẦN
TRUNG TÂM KHẢO THÍ HỌC KỲ …..… NĂM HỌC …….. - ….…

PHIẾU CHẤM THI TIỂU LUẬN/ĐỒ ÁN

Môn thi:...........................................................................Lớp học phần:..........................
Nhóm sinh viên thực hiện :.............................................
1.........................................................................Tham gia đóng góp:.................
2.........................................................................Tham gia đóng góp:.................
3.........................................................................Tham gia đóng góp:.................
4.........................................................................Tham gia đóng góp:.................
5.........................................................................Tham gia đóng góp:.................
6.........................................................................Tham gia đóng góp:.................
7.........................................................................Tham gia đóng góp:.................
8.........................................................................Tham gia đóng góp:.................
Ngày thi:..........................................................................Phòng thi:.................................
Đề tài tiểu luận/báo cáo của sinh viên :
Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):
Tiêu chí (theo Điểm tối Điểm đạt
Đánh giá của GV
CĐR HP) đa được
Cấu trúc của ....................................................................................
báo cáo ....................................................................................
Nội dung
- Các nội ....................................................................................
dung thành ....................................................................................
phần
....................................................................................
- Lập luận
....................................................................................
....................................................................................
- Kết luận

....................................................................................
Trình bày

TỔNG ĐIỂM
Giảng viên chấm thi
(ký, ghi rõ họ tên)

iv
 MỤC LỤC

LỜI MỞ ĐẦU..................................................................................................................... i
LỜI CẢM ƠN....................................................................................................................ii
PHIẾU CHẤM THI TIỂU LUẬN/ĐỒ ÁN......................................................................................
MỤC LỤC........................................................................................................................ iv
DANH MỤC BẢNG, HÌNH.............................................................................................................
DANH MỤC HÌNH..........................................................................................................................
KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT.............................................................................................
CHƯƠNG 1 TỔNG QUAN...............................................................................................9
CHƯƠNG 2 PHÂN TÍCH...............................................................................................12
CHƯƠNG 3 THIẾT KẾ...................................................................................................17
1. Thiết kế trang index.html (trang chủ):.......................................................................................
2. Thiết kế trang single.html (chi tiết sản phẩm):..........................................................................
3. Thiết kế trang checkout (Chi tiết giỏ hàng):..............................................................................
4. Thiết kế trang payment.html (Thanh toán):...............................................................................
5. Tạo Move Top Button:..............................................................................................................
6. Thiết kế trang about.html (Về chúng tôi):.................................................................................
7. Thiết kế trang contact.html (Liên hệ):.......................................................................................
CHƯƠNG 4 KẾT LUẬN.................................................................................................48
PHỤ LỤC........................................................................................................................................
TÀI LIỆU THAM KHẢO................................................................................................50

v
 DANH MỤC BẢNG, HÌNH
Bảng 1.1 (size 13)............................................................................................................
Bảng 1.2...........................................................................................................................
…
Hình 1.1
…….....................................................................
……......................................................................

Ghi chú:
- Xếp sau trang Mục lục
- Số thứ nhất chỉ số thự tự chương
- Số thứ hai chỉ thứ tự bảng biểu trong mỗi chương
- Tên đề của bảng biểu nằm phía trên của bảng phải có ghi chú, giải thích, nêu rõ
nguồn trích hoặc sao chụp

vi
 DANH MỤC HÌNH
Hình 1.1. Một đoạn code HTML của phần Main Container.............................................17
Hình 1.2. Một đoạn code CSS của phần Header..............................................................18
Hình 1.3. Một phần code JQuery của phần Footer...........................................................18
Hình 1.4. Kết quả phần Header........................................................................................19
Hình 1.5. Một đoạn code HTML của phần Slider Banner................................................20
Hình 1.6. Một đoạn code CSS của phần Slider Banner....................................................20
Hình 1.7. Kết quả của phần Slider Banner.......................................................................21
Hình 1.8. Một đoạn code HTML của phần Main Container.............................................22
Hình 1.9. Một đoạn code CSS của phần Main Container.................................................22
Hình 1.10. Kết quả của phần Main Container..................................................................23
Hình 1.11. Một đoạn code HTML của phần List Cagetory..............................................24
Hình 1.12. Một đoạn code CSS của phần List Cagetory..................................................25
Hình 1.13. Kết quả của phần List Cagetory......................................................................26
Hình 1.14. Một đoạn code HTML của phần Middle Section...........................................27
Hình 1.15. Một đoạn code CSS của phần Middle Section................................................27
Hình 1.16. Kết quả của phần Middle Section...................................................................27
Hình 1.17. Kết quả B4,5,6................................................................................................28
Hình 1.18. Một đoạn code HTML của phần Main Footer................................................29
Hình 1.19. Một đoạn code CSS của phần Main Footer....................................................29
Hình 1.20. Kết quả của phần Main Footer.......................................................................30
Hình 1.21. Một đoạn code HTML của phần Footer Copyright........................................30
Hình 1.22. Một đoạn code CSS của phần Footer Copyright.............................................30
Hình 1.23. Kết quả của phần Footer Copyright................................................................31
Hình 2.1. Một đoạn code HTML của phần Banner trang single.html...............................31
Hình 2.2, Một đoạn code CSS của phần Banner trang single.html...................................31
Hình 2.3. Kết quả của phần Banner trang single.html......................................................31
Hình 2.4. Một đoạn code HTML của phần Page Breadcrumb..........................................32
Hình 2.5. Một đoạn code CSS của phần Page Breadcrumb..............................................32
Hình 2.6. Kết quả của phần Page Breadcrumb.................................................................32
Hình 2.7. Một đoạn code HTML của phần Main Container.............................................33
Hình 2.8. Một đoạn code JQuery của phần Main Container trang single.html.................33
Hình 2.9. Kết quả phần Main Container trang single.html...............................................34
Hình 3.1. Một đoạn code HTML của phần Main Container trang checkout.html............35
Hình 3.2. Một đoạn code CSS của phần Main Container trang checkout,html................35
Hình 3.3. Kết quả phần Main Container trang checkout.html..........................................36
Hình 3.4. Một đoạn code JQuery của phần Main Container trang checkout.html............37
Hình 4.1. Một đoạn code HTML của phần Main Container trang payment.html.............38
Hình 4.2. Một đoạn code CSS của phần Main Container trang payment.html.................39
Hình 4.3. Kết quả phần Main Container (1) của trang payment.html...............................39
Hình 4.4. Kết quả phần Main Container (2) của trang payment.html...............................40
Hình 4.5. Kết quả của phần Main Container (3) trang payment.html...............................40
Hình 4.6. Kết quả của phần Main Container (4) trang payment.html...............................41

vii
Hình 4.7. Một đoạn code JQuery của phần Main Container trang payment.html.............41
Hình 5.1. Một đoạn code CSS của phần Move Top Button..............................................42
Hình 5.2. Một đoạn code JQuery của phần Move Top Button.........................................42
Hình 5.3. Kết quả của phần Move Top Button.................................................................42
Hình 6.1. Một đoạn code HTML của phần Main Container trang about.html..................44
Hình 6.2. Một đoạn code CSS của phần Main container trang about.html.......................44
Hình 6.3. Kết quả phần Main Container trang about.html................................................45
Hình 7.1. Một đoạn code HTML của phần Main Container trang contact.html...............46
Hình 7.2. Một đoạn code CSS của phần Main Container trang contact.html...................46
Hình 7.3. Kết quả phần Main Container trang conatct.html.............................................47

viii
 KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT

Chữ viết tắt Ý nghĩa

Ví dụ: CSDL Cơ sở dữ liệu

ix
 CHƯƠNG 1
TỔNG QUAN

1. Giới thiệu:
DoubleD – Chuyên Kinh Doanh Các Mặt Hàng Linh Kiện
Lắp Ráp Máy Tính Giá Rẻ – Chất Lượng.
DoubleD là website thương mại điện tử. Khách hàng xem các
sản phẩm được nhà cung cấp đăng lên trên trang web, chọn
sản phẩm và đặt hàng.
DoubleD là một website chuyên kinh doanh về các mặt hàng
linh kiện lắp ráp máy tính trực tuyến. Website được chia
thành các trang web gồm có:

a. Trang chủ: Hiển thị các danh mục sản phẩm.

b. Chi Tiết Sản Phẩm: Hiện thị thông tin chi tiết của sản phẩm
được chọn( đơn giá, mô tả, hình ảnh sản phẩm,… ).

c. Giỏ Hàng: Hiển thị các sản phẩm khách hàng chọn mua và
tiến hành thanh toán.

d. Thanh Toán: Hiển thị các phương thức thanh toán

và tiến hành đặt hàng.

e. Liên hệ: Khách hàng liên hệ với chúng tôi.

f. Giới Thiệu: Giới thiệu về cửa hàng DoubleD.

g. Trợ giúp: Cho phép khách hàng gửi câu hỏi đến cửa hàng để
nhờ trợ giúp.

h. Faqs: Hiển thị những thắc mắc được hỏi nhiều nhất.

2. Cơ sở lí thuyết:
   a.HTML:
 HTML viết tắt của chữ HyperText Markup Language

10
 (ngôn ngữ đánh dấu siêu văn bản), nó được dùng để
tạo ra các tài liệu hiện thị được trên trình duyệt.
 HTML đóng vai trò giúp người dùng có thể định dạng,
thiết kế cấu trúc các thành phần của một trang web hay
các ứng dụng, heading, links, hoặc phân chia giữa các
đoạn văn.
 Một tập tin HTML được hình thành từ các phần tử
HTML, trong đó nó đã được quy định bởi các cặp thẻ
(gọi là tag), và lưu dưới dạng đuôi mở rộng là .html
hay .htm.
   b. CSS:
 CSS (viết tắt của cụm từ Cascade Style Sheet) là ngôn
ngữ đóng vai trò giúp trình duyệt hiểu được tất cả các
định dạng và bố cục của trang web.
 CSS còn mang đến tính năng cho phép người dùng sử
dụng duy nhất một vùng chọn để điều khiển thiết kế
của các thành phần có trong HTML.
    c. Bootstrap ( Bootstrap 3 và 4 ):
 Bootstrap là một framework (mã nguồn mở) bao gồm
các HTML, CSS và JavaScript.
 Trong bootstrap có các thành tố có sẵn như typography
(kiểu chữ), forms (biểu mẫu), buttons (nút), tables
(bảng), grids (bản mô tả ngắn), navigation (điều hướng
trang web), image (ảnh),... tóm lại là các template (mẫu
có sẵn) dùng để thiết kế và tối ưu website.
 Bên cạnh việc tiết kiệm thời gian khi quản lý các
template web, mục tiêu chính của bootstrap là tối ưu
hiển thị website.
 Bootstrap 4 (viết tắt là BS4) là phiên bản mới của
Bootstrap, là framework HTML, CSS và JavaScript
phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền
tảng di động.
 Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn
phí tải về và tự do sử dụng, tiện lợi cho sinh viên thực
hành và các lập trình viên sử dụng.
   d. JavaScript:

11
  Javascript chính là một ngôn ngữ lập trình web rất phổ
biến ngày nay. Javascript được tích hợp đồng thời
nhúng vào HTML để hỗ trợ cho website trở nên sống
động hơn. 
 Chúng cũng đóng vai trò tương tự như một phần của
website, cho phép Client-side Script từ người dùng
tương tự máy chủ (Nodejs) để tạo ra những website
động.
 JavaScript đóng vai trò như một phần của website,
được tích hợp hoặc nhúng vào HTML để tạo sự sống
động cho các trang web. Như vậy có thể thấy 3 lớp
bánh của công nghệ web tiêu chuẩn sẽ gồm HTML,
CSS, JavaScript trong đó JavaScript chính là lớp thứ 3.
Cả ba lớp này xây dựng chồng lên nhau cùng hỗ trợ để
tạo nên những tính năng tuyệt vời cho website.

Công cụ thực hiện đồ án: Edit Plus, Photoshop, …

12
 CHƯƠNG 2
PHÂN TÍCH

3. Sơ đồ tổ chức lưu trữ của website:

Thư Mục Gốc: Chứa các trang web và các thư mục
chứa CSS,
javascript, hình ảnh các sản phẩm. Trong thư mục
gốc gồm:

a. Thư Mục Gốc: Chứa các trang web và các thư
mục chứa css, javascript, hình ảnh các sản
phẩm. Trong thư mục gốc gồm:
 Thư Mục css: Chứa các file định dạng css.
 Thư Mục webfonts: Chứa các file font.
 Thư Mục js: Chứa các file javascript, hỗ trợ
xử lý các sự kiện trong website.
 Thư Mục images: Chứa các file hình ảnh về các
sản phẩm của cửa hàng, các hình ảnh trang trí
cho các trang web trong website.
 Các trang web hiển thị thông tin, sản phẩm, giỏ
hàng, thanh toán… của cửa hàng.

b. Các trang web hiển thị thông tin, sản phẩm,

giỏ hàng, thanh toán,blog,chi tiết sản phẩm…
của cửa hàng.

13
 4. Sơ Đồ Liên Kết Của Website:

Chi tiết sản phẩm

Sản phẩm theo
danh mục
Sản phẩm mới

Giỏ hàng

Trang chủ Giới thiệu

Thanh toán

Trợ giúp
Faqs Liên hệ

Sản phẩm bán

chạy

Sơ Đồ Liên Kết Các Trang Web Trong Website

14
Ghi Chú:

: Thể hiện của 1 Trang Web.

: Liên kết từ trang web này sang trang web khác theo
hướng mũi tên.

15
 5. Grid Layout của Các Nhóm Trang Web

Top Bar Header

Main Header
Main Navigation
Header

Slider

Main Container List Cagetory

Main Footer
Footer Copyright

Layout 1 – HomeLayout

Các trang web sử dụng HomeLayout: Trang Chủ, Sản phẩm theo danh mục, Sản phẩm
mới, Sản phẩm bán chạy.

16
 Top Bar Header

Main Header
Main Navigation
Header

Main
Container

Main Footer
Footer Copyright

Layout 2 - ClearLayout

Các trang web sử dụng ClearLayout: Chi Tiết Sản Phẩm, Giỏ hàng,
Thanh Toán, Giới thiệu, Trợ giúp, FAQs, Liên hệ.

17
 CHƯƠNG 3
THIẾT KẾ

Mô tả các bước thực hiện các trang và kết quả.

1. Thiết kế trang index.html (trang chủ):
- B1: Khai báo bootstrap sử dụng cho trang web.
- B2: Tạo Header:

Hình 1.1. Một đoạn code HTML của phần Main Container.

18
 Hình 1.2. Một đoạn code CSS của phần Header.

- B9: Sử dụng Jquery cho các sự kiện trên trang web:

Hình 1.3. Một phần code JQuery của phần Footer.

19
Kết quả:

Hình 1.4. Kết quả phần Header.

20
- B3. Tạo Slider Banner:

Hình 1.5. Một đoạn code HTML của phần Slider Banner.

Hình 1.6. Một đoạn code CSS của phần Slider Banner.

21
Kết quả:

Hình 1.7. Kết quả của phần Slider Banner.

22
- B4. Tạo Main Container:

Hình 1.8. Một đoạn code HTML của phần Main Container.

Hình 1.9. Một đoạn code CSS của phần Main Container.

23
Kết quả B4:

Hình 1.10. Kết quả của phần Main Container.

24
- B5: Tạo List Cagetory:

Hình 1.11. Một đoạn code HTML của phần List Cagetory.

25
Hình 1.12. Một đoạn code CSS của phần List Cagetory.

26
Kết quả:

Hình 1.13. Kết quả của phần List Cagetory.

27
 - B6: Tạo Middle Section:

Hình 1.14. Một đoạn code HTML của phần Middle Section.

Hình 1.15. Một đoạn code CSS của phần Middle Section.

Kết quả:

Hình 1.16. Kết quả của phần Middle Section.

28
Kết quả Bước 4,5,6:

Hình 1.17. Kết quả B4,5,6.

29
- B7: Tạo Main Footer:

Hình 1.18. Một đoạn code HTML của phần Main Footer.

Hình 1.19. Một đoạn code CSS của phần Main Footer.

30
Kết quả:

Hình 1.20. Kết quả của phần Main Footer.

- B8: Tạo Footer Copyright:

Hình 1.21. Một đoạn code HTML của phần Footer Copyright.

Hình 1.22. Một đoạn code CSS của phần Footer Copyright.
Kết quả:

31
 Hình 1.23. Kết quả của phần Footer Copyright.

2. Thiết kế trang single.html (chi tiết sản phẩm):

- B1: Khai báo Bootstrap sử dụng cho trang web(Tương tự như phần
1.Thiết kế trang index.html).
- B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index.html).
- B3: Tạo Banner:

Hình 2.24. Một đoạn code HTML của phần Banner trang single.html.

Hình 2.25, Một đoạn code CSS của phần Banner trang single.html.

Kết quả:

Hình 2.26. Kết quả của phần Banner trang single.html.

32
 - B4: Tạo Page Breadcrumb:

Hình 2.27. Một đoạn code HTML của phần Page Breadcrumb.

Hình 2.28. Một đoạn code CSS của phần Page Breadcrumb.
Kết quả:

Hình 2.29. Kết quả của phần Page Breadcrumb.

33
 - B5: Tạo Main Container:

Hình 2.30. Một đoạn code HTML của phần Main Container.
- B6: Tạo Middle Section: (Tương tự như phần 1.Thiết kế trang index.html).
- B7: Tạo Footer: (Tương tự như phần 1.Thiết kế trang single.html).
- B8: Sử dụng Jquery cho các sự kiện trên trang web:

Hình 2.31. Một đoạn code JQuery của phần Main Container trang single.html.

34
Kết quả:

Hình 2.32. Kết quả phần Main Container trang single.html.

35
 3. Thiết kế trang checkout (Chi tiết giỏ hàng):
- B1: Khai báo Bootstrap sử dụng cho trang web (Tương tự như phần
1.Thiết kế trang index.html).
- B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index.html).
- B3: Tạo Banner (Tương tự như phần 2.Thiết kế trang single.html).
- B3: Tạo Page Breadcrumb (Tương tự như phần 2.Thiết kế trang
index.html).
- B4: Tạo Main Container:

Hình 3.33. Một đoạn code HTML của phần Main Container trang checkout.html.

Hình 3.34. Một đoạn code CSS của phần Main Container trang checkout,html.

36
Kết quả:

Hình 3.35. Kết quả phần Main Container trang checkout.html.

- B5: Tạo Footer (Tương tự như phần 1.Thiết kế trang index.html).

37
 - B6: Sử dụng Jquery cho các sự kiện trên trang web:

Hình 3.36. Một đoạn code JQuery của phần Main Container trang checkout.html.

38
 4. Thiết kế trang payment.html (Thanh toán):
- B1: Khai báo Bootstrap sử dụng cho trang web(Tương tự như phần
1.Thiết kế trang index.html).
- B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index.html).
- B3: Tạo Banner (Tương tự như phần 2.Thiết kế trang single.html).
- B4: Tạo Breadcrumb (Tương tự như phần 2.Thiết kế trang single.html).

- B5: Tạo Main Container:

Hình 4.37. Một đoạn code HTML của phần Main Container trang payment.html.

39
Hình 4.38. Một đoạn code CSS của phần Main Container trang payment.html.

Kết quả:

Hình 4.39. Kết quả phần Main Container (1) của trang payment.html.

40
Hình 4.40. Kết quả phần Main Container (2) của trang payment.html.

Hình 4.41. Kết quả của phần Main Container (3) trang payment.html.

41
 Hình 4.42. Kết quả của phần Main Container (4) trang payment.html.

- B6: Tạo Footer (Tương tự như phần 1.Thiết kế trang index.html).

- B5: Sử dụng Jquery cho các sự kiện trên trang web:

Hình 4.43. Một đoạn code JQuery của phần Main Container trang payment.html.

42
5. Tạo Move Top Button:

Hình 5.44. Một đoạn code CSS của phần Move Top Button.

Hình 5.45. Một đoạn code JQuery của phần Move Top Button.

Kết quả:
Hình 5.46. Kết quả của phần Move Top Button.

43
6. Thiết kế trang about.html (Về chúng tôi):
- B1: Khai báo Bootstrap sử dụng cho trang web(Tương tự như phần 1.Thiết
kế trang index.html).
- B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index.html).
- B3: Tạo Banner (Tương tự như phần 2.Thiết kế trang single.html).
- B4: Tạo Breadcrumb (Tương tự như phần 2.Thiết kế trang single.html).

44
 - B5: Tạo Main Container:

Hình 6.47. Một đoạn code HTML của phần Main Container trang about.html.

Hình 6.48. Một đoạn code CSS của phần Main container trang about.html.

45
Kết quả:

Hình 6.49. Kết quả phần Main Container trang about.html.

- B7: Tạo Footer (Tương tự như phần 1.Thiết kế trang index.html).
- B8: Sử dụng Jquery cho các sự kiện trên trang web (Tương tự như phần
1.Thiết kế trang index.html).

46
 7. Thiết kế trang contact.html (Liên hệ):
- B1: Khai báo Bootstrap sử dụng cho trang web(Tương tự như phần 1.Thiết
kế trang index.html).
- B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index.html).
- B3: Tạo Banner (Tương tự như phần 2.Thiết kế trang single.html).
- B4: Tạo Breadcrumb (Tương tự như phần 2.Thiết kế trang single.html).
- B5: Tạo Main Container:

Hình 7.50. Một đoạn code HTML của phần Main Container trang contact.html.

Hình 7.51. Một đoạn code CSS của phần Main Container trang contact.html.

47
Kết quả:

Hình 7.52. Kết quả phần Main Container trang conatct.html.

- B6: Tạo Middle Section( Tương tự như phần 2. Thiết kế trang
single.html).
- B7: Tạo Footer (Tương tự như phần 1.Thiết kế trang index.html).
- B8: Sử dụng Jquery cho các sự kiện trên trang web (Tương tự như phần
1.Thiết kế trang index.html).

48
 CHƯƠNG 4
KẾT LUẬN

- Tóm tắt quá trình thực hiện đồ án và những bài học rút ra
được qua việc thực hiện đồ án:
• Lên ý tưởng về trang web (kinh doanh mặt hàng gì). Tìm các
mẫu trang web để tham khảo, xác định các website để sử dụng
hình ảnh cho trang web đồ án. Bắt đầu thiết kế trang web.
• Qua việc thực hiện đồ án, tôi rút ra được những kinh nghiệm
trong việc lựa chọn bố cục, hình ảnh, các tính toán số liệu phù
hợp cho trang web, nâng cao khả năng hiểu biết về sử dụng các
phần mềm như Word, EditPlus,…
- Trình bày những gì đã làm được và chưa làm được so với hoạch định
ban đầu của đồ án:
• Những phần làm được: Đã phần nào định hình được một số
trang như ý muốn, từ giao diện cho đến chức năng.
• Những phần chưa làm được: Một số thành phần còn nhiều hạn
chế, ví dụ như phần giá tiền của giỏ hàng mini, phần sản phẩm
của trang index.html vẫn còn hiển thị chưa chính xác. Do chưa
thuần thục về Bootstrap, Jquery và cũng như áp lực về thời gian
nên không thể hoàn thiện được.
- Hướng phát triển hoặc mở rộng:
• Mở rộng thêm phần Hàng cũ: cho phép người dùng đăng tải
thông tin về sản phẩm cũ để cửa hàng xem xét thu mua và bán
lại trong phần Hàng cũ.

49
PHỤ LỤC

50
TÀI LIỆU THAM KHẢO
[1]. Khoa CNTT, 2022, Bài giảng môn học Thiết kế web, ĐH
Nguyễn Tất Thành, Tp.HCM.
[2]. Jon Duckett, 2014, Web Design with HTML, CSS, JavaScript and
jQuery
Set, Wiley Publishing.
[3]. Ben Frain, 2015, Responsive Web Design with HTML5 and CSS3 -
Second
Edition, Packt Publishing.
[4]. Benjamin Jakobus & Jason Marahain, 2016, Mastering Bootstrap 4,
Packt
Publishing.
[5]. Các hình ảnh sử dụng cho website được sưu tầm từ trang web:
www.anphatpc.com.vn [Truy cập: tháng 8 năm
2022]
www.gearvn.com [Truy cập: tháng 8 năm
2022]
www.google.com [Truy cập: tháng 8 năm
2022]
www.fptshop.com.vn [Truy cập: tháng 8 năm
2022]
[6]. Giao diện trang web được tham khảo từ:
www.w3layouts.com [Truy cập: tháng 8 năm
2022]
www.w3schools.com [Truy cập: tháng 8 năm
2022]

51