ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE SHOP THỜI TRANG K&T. Giảng viên hướng dẫn : THS. LÊ THÀNH CÔNG

ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT - HÀN

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI: WEBSITE SHOP THỜI
TRANG K&T

Sinh viên thực hiện : VÕ TẤN THÀNH, PHẠM DUY KHANG
Giảng viên hướng dẫn : THS.LÊ THÀNH CÔNG
Lớp
: 20IT8

Đà Nẵng, 31 tháng 5 năm 2021

1


2


ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT HÀN

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI: WEBSITE SHOP THỜI
TRANG K&T

Đà Nẵng, 31 tháng 5 năm 2021

3


MỞ ĐẦU
Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là
một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ
chức, cũng như của các cơng ty, nó đóng vai trị hết sức quan trọng, có thể tạo ra
những bước đột phá mạnh mẽ. Cùng với sự phát triển khơng ngừng về kỹ thuật
máy tính và mạng điện tử, công nghệ thông tin cũng được những công nghệ có
đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. 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 chính cho sự truyền tải, trao đổi thơng
tin trên tồn cầu. Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho
người sử dụng: chỉ cần có một máy tính kết nối internet và một dịng dữ liệu truy
tìm thì gần như lập tức... cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có
đầy đủ thơng tin, hình ảnh và thậm chí đơi lúc có cả những âm thanh nếu bạn cần...
Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh
hơn và 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ử và chính phủ đ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 chất lượng cuộc sống
con người. Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã
khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối
với một cửa hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản
phẩm mới đáp ứng được nhu cầu của khác hàng sẽ là cần thiết. Vậy phải quảng bá
thế nào đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cả
các sản phẩm của mình bán. Vì vậy, em đã thực hiện đồ án “ XÂY DỰNG
WEBSITE BÁN HÀNG THỜI TRANG” cho một shop bán đồ K&T SHOP. Người
chủ cửa hàng đưa các sản phẩm đó lên website của mình và quản lý bằng website

đó, khách hàng có thể đặt và mua hàng trên website mà không cần đến cửa hàng.
Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi nhận được tiền. Với sự hướng
dẫn tận tình của Thầy Lê Thành Cơng em đã hồn thành cuốn báo cáo đồ án cơ sở 1
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 rằng khơng tránh khỏi những thiếu sót. Em rất mong nhận được sự thơng cảm
và góp ý của q Thầy cơ. Em xin chân thành cảm ơn.
Đà Nẵng, 31 tháng 5 năm 2021
Sinh viên thực hiện: Võ Tấn Thành
Phạm Duy Khang

4


LỜI CẢM ƠN
Em xin chân thành cảm ơn quí thầy cô đã giúp đỡ em thực hiện đề tài này. Đặc biệt
thầy Lê Thành Cơng đã tận tình hướng dẫn, giúp đỡ, chỉ bảo em trong suốt thời gian
thực hiện đồ án cơ sở 1 này. Đồng thời em cũng xin trân trọng cảm ơn những tình cảm
q báu mà các thầy cô trong trường Đai Học CNTT và truyền thông Việt-Hàn đã
truyền đạt cho em, những kinh nghiệm, kỹ thuật và cách thức trong việc xây dựng đề
tài này. Và cuối cùng tôi cũng xin được gửi lời cảm ơn đến gia đình đã ln ln động
viên, ủng hộ, những người bạn đã gắn bó, chia sẻ rất nhiều kinh nghiệm và những
kiến thức và nhất là trong thời gian thực hiện đề tài, để đề tài có thể hồn thành một
cách thành cơng nhất.
Tuy nhiên, do thời gian có hạn nên em khơng thể phát huy hết những ý tưởng, khả
năng hổ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài. Trong quá trình xây dựng
website, khơng thể tránh khỏi những sai xót, mong nhận được sự thơng của q thầy
cơ và các bạn. Em xin chân thành cảm ơn.

Đà Nẵng, 31 tháng 5 năm 2021
Sinh viên thực hiện: Võ Tấn Thành

Phạm Duy Khang

5


NHẬN XÉT
(Của cơ quan thực tập, nếu có)
………………………………..
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…

……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…

6


NHẬN XÉT
(Của giảng viên hướng dẫn)
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
…………………………………………………………………………………

7


MỤC LỤC
(Chèn mục lục tự động: References/Table of Contents)
Trang
MỞ ĐẦU..............................................................................................................1
Chương 1 Giới thiệu............................................................................................12
1.1 Tổng quan..................................................................................................12

Chương 2 Phân tích thiết kế hệ thống..................................................................14
2.1 Mơ hình tổng quan của hệ thống nghiên cứu.............................................14
2.2 Thiết kế chi tiết..........................................................................................14
2.2.1 Index.html...........................................................................................14
2.2.2 Gioithieu.html.....................................................................................14
2.2.3 lienhe.html..........................................................................................14
Chương 3 Triển khai xây dựng............................................................................15
Chương 4 Kết luận và Hướng phát triển..............................................................18
PHỤ LỤC...........................................................................................................121
DANH MỤC TÀI LIỆU THAM KHẢO............................................................130

8


DANH MỤC CÁC BẢNG
(In đậm, in hoa, size16)
(Chèn danh mục hình ảnh tự động: References/Insert Table of Figures,
chọn nhãn phù hợp)
Trang

9


DANH MỤC HÌNH
Trang
Hình 1.1 – Carousel Quảng Cáo và Bảng tin tức.................................................15

10

DANH MỤC CỤM TỪ VIẾT TẮT
STT
1
2
3
4

Cụm từ
Công nghệ phần mềm
Công nghệ thông tin
Hypertext Markup Language
Cascading Style Sheets

11

Viết tắt
CNPM
CNTT
HTML
CSS


Chương 1

Giới thiệu

1.1 Tổng quan
-

Bối cảnh thực hiện đề tài:

Hiện nay internet đang rất thịnh hành. Đặc biệt là về các trang web bán hàng
online, các cửa hàng online mọc lên như nấm, nên vì thế mức độ cạnh tranh cũng
ngày càng cao. Thế nên muốn thu hút khách hàng thì cửa hàng đó phải có một
trang web thật sự bắt mắt, thịnh hành nhiều món đồ, dễ hiểu và liên tục cập nhật
các mẫu thời trang hot v.v…Thế nên chúng em cần phải thiết kế một website thật
chất lượng và đạt được sự thỏa mãn của khách hàng thì mới duy trì được lâu dài.
- Vấn đề cần giải quyết:
Thiết kế được một website tương đối đẹp, dễ nhìn. Giao diện khơng q cầu
kì, nên đơn giản để thu hút khách hàng. Có đầy các chức năng mà một trang shop
thời trang cần có.
- Đề xuất nội dung thực hiện:
a. Thiết bị và phần mềm
- Máy tính có thể thiết kếđược web
- Phần mềm Visual Studio Code
b. Yêu cầu trang Web
- Khách hàng là những người có nhu cầu mua sắm hàng hóa, họ sẽ tìm kiếm các
mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này.
+ Vì thế phải có các chức năng sau:
- Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa
chọn và mua.
- Khách hàng xem các thông tin tin tức mới, khuyến mãi trên trang web
Phương pháp, kết quả
- Phương pháp:
+Về mặt lý thuyết:
- Tìm hiểu kỹ thuật lập trình, cách thức hoạt động và các đối tượng trong
Bootstrap4, HTML, Css,...
- Trau dồi kiến thức từ những thứ cơ bản đến nâng cao để dễ dàng hơn trong việc
thiết thiết kế website.
+Về mặt lập trình:
Sử dụng các kiến thức đã học từ môn Công Nghê WEB ở học kì 2 về HTML,

CSS, BOOTSTRAP 4,.. để thực hiện thiết kế đề tài website Shop thời trang này.
+Về mặt hoạt động:
- Trang web có thể thể hiện tương đối đầy đủ chức năng về mặt hình thức với
giao diện đơn giản dễ nhìn, khiến khách hàng nhìn vào thấy hứng thú và khi truy
cập.

Kết quả đạt được:
- Một website Shop Thời Trang trên nền tảng HTML sử dụng CSS và Boostrap để
design.
Cấu trúc đồ án
12


-

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:
+ Chương 1. Tổng quan về Website Shop Thời Trang K&T Trong chương này,
báo cáo trình bày các khái niệm, đặc điểm của kĩ thuật thiết kế web
+ Chương 2. Phân tích thiết kế Website Shop Thời Trang K&T . Nội dung
chương bao gồm các mục: Mơ hình tổng quan và phân tích chi tiết.
+ Chương 3. Xây dựng website
+ Cuối cùng là Kết luận, Tài liệu tham khảo và Phụ lục liên quan đến đề tài.

13


Chương 2

Phân tích thiết kế hệ thống

2.1 Mơ hình tổng quan của hệ thống nghiên cứu
-

Thiết kế trang chủ của website index.html
Thiết kế trang giới thiệu về website gioithieu.html
Thiết kế trang thông tin liên hệ lienhe.html

2.2 Thiết kế chi tiết
2.2.1 Index.html
- Thiết kế thanh navitagtion gồm các nav item: Home, Giới Thiệu, Sản Phẩm,
Liên Hệ, Khung Tìm Kiếm và Logo WEBsite.
- Thiết kế carousel để đăng các thông báo, sale,…
- Thiết kế bảng tin tức gồm các tin tức về thời trang được đăng tải.
- Sản phẩm nội bật: Mục này là một container bao gồm các card có hình ảnh
sản phẩm, tên sản phẩm, giá tiền và button Mua Hàng.
- Sản phẩm đang sale: Tương tự sản phẩm nổi bật, mục này cũng bao gồm các
card để hiển thị sản phẩm.
- Footer: Gồm các thông tin về website, các liên kết dẫn đến các trang của trang
web.
2.2.2 Gioithieu.html
- Thiết kế một container gồm ảnh và văn bản giới thiệu về shop, về website.
- Thiết kế một container gồm các ưu điểm của shop như Hàng chính hãng,
Freeship,… các đối tượng này được sắp xếp, căn chỉnh sao cho hợp lí, đẹp
mắt.
2.2.3 lienhe.html
- Một container gồm Bản Đồ địa chỉ của shop, bên phải là các thông tin liên hệ
dành cho khách hàng.
- Thiết kế một container gồm danh sách của những người sáng tạo ra website,
chủ shop,…

14


Chương 3

Triển khai xây dựng

Hình 1.1 – Thanh Nav

Hình 1.1 – Carousel Quảng Cáo và Bảng tin tức

Hình 1.3 – Sản Phẩm Nổi Bật

15


Hình 1.4 – Sản phẩm đang sale

Hình 1.5 – Footer

Hình 1.6 – Giới thiệu về shop

16


Hình 1.7 – Thơng tin thêm về shop

Hình 1.8 – Thơng tin liên hệ của shop

Hình 1.9 – Thơng tin chủ shop

17


Chương 4

Kết luận và Hướng phát triển

Ưu điểm
+ Nắm được hầu hết các class cơ bản của Bootstrap 4 và cách dùng của nó. Từ đó
thiết kế website được chuyên nghiệp hơn thay vì chỉ dùng HTML thuần. Việc sử
dụng bootstrap sẽ giúp website trở nên mượt mà hơn,không bị thô khi dùng thuần
HTML.
+ Luyện tập thêm việc viết Css, HTML, … thành thạo hơn, biết thêm được nhiều
thẻ mới, áp dụng được vào trang web.
+ Nắm bắt được các nội dung mà một website cần phải có, từ đó sang tạo them
được nhiều phần tạo sự khác biệt.
Hạn chế
+ Chưa có áp dụng được kiến thức Javascript được học ở học kì 2 năm 1 để làm
hiệu ứng, giúp web thu hút ánh nhìn hơn, sống động hơn.
+ Đơn thuần là web tĩnh chưa áp dụng them nâng cao việc viết PHP và lien kết cơ
sở dữ liệu
+ Phân chia bố cục, sắp xếp các đối tượng còn thiếu sót nhiều trong việc thiết kế
website.
+ Việc trình bày những dòng lệnh trong mã nguồn còn thiếu khoa học, thiếu hợp
lí. Thừa thiếu một số class khơng nên có.
Hướng phát triển
+ Xây dựng website chuyên nghiệp hơn, đẹp mắt hơn trong những môn đồ án
sau.
+ Áp dụng được nhiều kiến thức nâng cao vào đề tài để tăng sự sinh động cho đề

tài.
+ Sắp xếp các đối tượng trong mã nguồn một cách hợp lí hơn, khoa học hơn.

18


PHỤ LỤC (kèm theo)

19