BÁO CÁO ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: THIẾT KẾ WEBSITE THỜI TRANG ONLINE. Giảng viên hướng dẫn : TS. LÊ VĂN MINH

S

ĐẠ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

BÁO CÁO ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI: THIẾT KẾ WEBSITE THỜI TRANG ONLINE

Sinh viên thực hiện
Lớp

: LÊ VĂN NHẤT
: 20IT4

Giảng viên hướng dẫn : TS. LÊ VĂN MINH

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

1


ĐẠ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
THIẾT KẾ WEBSITE THỜI TRANG ONLINE

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

2


LỜI MỞ ĐẦU
- Cùng với nhiều lĩnh vực ngành nghề làm đẹp khác thì thời trang ln là một
lĩnh vực kinh doanh rất thu hút bởi thị hiếu quan tâm của người tiêu dùng là rất
lớn. Ngày nay cùng với sự phát triển của công nghệ các shop thời trang ngồi
việc bán trực tiếp tại cửa hàng thì các chủ shop còn rất chú trọng đến các cửa
hàng bán online. Các cửa hàng online cũng rất đa dạng có thể là trên mạng xã
hội, trên website, trên di động. Winshop sẽ giúp bạn thuận tiện hơn trong việc
mua sắm nhé !
- Đề tài này nhằm mục tiêu Xây dựng một hệ thống bán quần áo trực tuyến đơn
giản, thân thiện, dễ sử dụng, cho phép khác hàng xem thông tin và đặt hàng qua
mạng, người quản trị quản lý các thơng tin về sản phẩm cũng như người dùng.
Vì vậy, em chọn đề tài “ thiết kế website thời trang online ”.

3


LỜI CẢM ƠN
- Lời đầu tiên cho phép em gửi lời cảm ơn tới các Thầy Cô giáo các cán bộ cơng tác tại
Khoa Khoa Học Máy Tính – Trường ĐH Công Nghệ Thông Tin Và Truyền Thông Việt
Hàn đã tạo mọi điều kiện giúp đỡ em trong thời gian xây dựng và hoàn thành đồ án
- Đặc biệt em xin bày tỏ lòng biết ơn sâu sắc tới thầy Ts Lê Văn Minh người đã tận tình
giúp đỡ, chỉ bảo về nghiệp vụ và trực tiếp hướng dẫn em trong suốt q trình hồn thành
đồ án này.
- Tuy nhiên do thời gian có hạn và cùng với nhiều nguyên nhân khác, mặc dù em đã nổ
lực hết mình xong đồ án của mình , tuy vẫn cịn mắc phải những thiếu sót và hạn chế. Em

rất mong nhận được sự thông cảm và chỉ bảo của các Thầy Cô cùng tất cả các bạn.
Em xin chân thành cảm ơn !

4


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

5


MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU...........................................................................................................
1.1 Tổng quan............................................................................................................................
1.2 Phương pháp, kết quả:..........................................................................................................
1.3 Cấu trúc đồ án......................................................................................................................
CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU.....................................................................................
2.1 Cơ sở lí thuyết:.....................................................................................................................
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.............................................................
1.4 Mơ hình tổng quan của hệ thống nghiên cứu........................................................................
1.5 Thiết kế chi tiết.....................................................................................................................
Chương 2 Triển khai xây dựng.......................................................................................................
Chương 3 Kết luận và Hướng phát triển........................................................................................

6


DANH MỤC HÌNH
(Chèn danh mục hình ảnh tự động: References/Insert Table of Figures,
chọn nhãn phù hợp)
Trang

7


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

Cụm từ
HyperText Markup Language

Cascading Style Sheet

Viết tắt
HTML
CSS

…..

8


CHƯƠNG 1: GIỚI THIỆU
1.1 Tổng quan
1.1.1 Bối cảnh thực hiện đề tài:
Như chúng ta đã biết so với khinh doanh truyền thống thì TMDT chi phí thấp
hơn hiệu quả cao hơn. Hơn thế nữa với lợi thế 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 thơng qua bưu điện và ngân hàng để thanh tốn tiền càng
tăng thêm thuận lợi để loại hình này phát triển. biết được nhu cầu đó chương
trình ‘web thời trang online ‘đã ra đời để đáp ứng cho mọi nhười tiêu dùng
trên tồn quốc và thơng qua hệ thống họ có thể đặt mua các sản phẩm cần thiết
1.1.2 Vấn đề cần giải quyết:
- website như là một cửa hàng bán các mặt hàng không cần nhiều nhân
viên ,khách hàng khơng cần trực tiến điến mua hàng mà có thể tại nhà dùng
vài cái click chuột thì có thể có được sản phẩm cần thiết .
- Website giải quyết được vấn đề chi phí cũng như mọi sự thắc mắc trong
q trình sử dụng .
- Tiết kiệm chi phí , có thể sử dụng ở bất cứ đâu.
1.1.3 Đề xuất nội dung thực hiện:
+ Thiết kế giao diện website giới thiệu loại ngơn ngữ lập trình hiện có

nhằm giúp người dùng dễ dàng xem được thông tin .
+ Thiết kế giao diện website cho phép một dùng truy cập vào trang web
một cách nhanh chóng mà khơng các thủ tục phức tạp.
+ Website công khai, minh bạch và cung cấp thơng tin chính xác nhằm
đem lại sự tin cậy cho người dùng.

1.2 Phương pháp, kết quả:
1.2.1 Phương pháp:
- Trước tiên ta phải phân tích và thiết kế giao diện, hệ thống của website
bằng phần mềm.
- Dựa trên kiến thức đã học, chúng ta sử dụng các ngôn ngữ HTML, CSS,
Bootstrap và một số cơng cụ lập trình như Sublime Text để thiết kế một
website tĩnh.
- Tham khảo, tiếp thu ý kiến, thơng tin từ giảng viên hướng dẫn để hồn
thiện website tốt hơn phần mềm và ngôn ngữ sử dụng.
1.2.2 Kết quả:
- Giao diện hội tụ đủ ba yếu tố độc đáo , tinh tế và hiện đại. Hình ảnh sắc
nét và sống động. Tiện lợi cho việc người dùng tìm và hiểu rõ hơn về các loại
ngơn ngữ lập trình. Tốc độ tải trang web nhanh. Website có thể tương thích với
9


mọi thiết bị di động hay máy tính trên thị trường. Ngoài ra trang web được
thiết kế dễ dàng sử dụng và tiện nâng cấp trong tương lai.
- Ngoài ra, trang web còn một số chức năng chưa hòan thiện và chưa khai thác
được nhiều nội dung.

1.3 Cấu trúc đồ án
-

Chương 2: Nghiên cứu thiết kế
+ Đây là chương nêu cụ thể lý thuyết về những ngơn ngữ lập
trình của một webiste. Do đó có thể giúp ta hiểu được cụ thể hơn
về các ngơn ngữ lập trình và ngơn ngữ siêu văn bản.

-

Chương 3: Phân tích và thiết kế hệ thống
+ Chương này tập trung vào cách thức hoạt động của website và
miêu tả chi tiết chức năng để giúp cho khách hàng có thể tiếp cận
dễ dàng với trang web.

-

Chương 4: Kết quả đạt được
+ Ở chương này trình bày một số kết quả đạt được, các thư viện
được sử dụng sau khi thiết kế giao diện website.

10


CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU
2.1 Cơ sở lí thuyết:
1.3.1 Sơ lược về ngơn ngữ lập trình web HTML:
- HTML là chữ viết tắt của HyperText Markup Language(ngôn
ngữ đánh dấu siêu văn bản). HTML được sinh ra để tạo nên các
trang web với các mẫu thơng tin được trình bày trên World Wide
Web. HTML có thể được viết lên bởi các phần mềm, các trình
soạn thảo văn bản thơng thường như notepad++, editplus,.. hoặc
các trình soạn thảo chuyên dụng như visual studio, sublime text

3,… Một file HTML sẽ có hai địng dạng mở rộng là .html và
.htm.
1.3.2 Sơ lược về ngơn ngữ lập trình web CSS:
- CSS (Cascading Style Sheet). Web được cấu tạo từ các thẻ các
html nhưng với các thẻ html thì mới thể hiện được bộ khung của
website. Để căn chỉnh, trình bày cho đẹp mắt thì ta cần sử dụng
ngôn ngữ CSS. Đây là ngôn ngữ được dùng nhiều trong ngôn
ngữ website, thường đi cùng ngôn ngữ html.
1.3.3 Sơ lược về ngơn ngữ lập trình web Bootstrap:
- Bootstrap được xây dựng dựa trên nền tảng HTML templates,
CSS templates và Javascript cơ bản để hình thành nên những
mẫu thiết kế có sẵn như typography, forms, buttons( nút bấm),
tables(bảng), navigation, modals, image carousels cũng như
nhiều thành phần khác nữa. Với mục đích giúp cho các nhà phát
triển có thể thiết kế reponsive cho website được dễ dàng và
nhanh hơn, các plugin của Javascript đã được tích hợp và trong
Bootstrap.
1.3.4 Giới thiệu về phần mềm Visual Studio Code:
1.3.4.1 Visual Code là gì?
-

VisualCode là một cơng cụ soạn thảo mã nguồn do Microsoft
phát triển, được giới thiệu lần đầu vào năm 2015 và chính thức
phát hành năm 2016. VSCode có thể cài đặt và sử dụng trên cả
Windows, MacOS và Linux. VSCode là mã nguồn mở và nó
hồn tồn miễn phí.

-

Có thể nói VisualCode là sự kết hợp tuyệt vời giữa tính đơn giản

của một editor và các cơng cụ hỗ trợ mạnh mẽ dành cho lập trình
viên như Debugger, Git, Terminal và còn nhiều hơn nữa. Đúng
11


vậy, nhìn chung thì VSCode vẫn chỉ là một Code Editor nhưng
độ hữu ích thì khơng kém cạnh IDE nào.
1.3.5 Giới thiệu về môi trường hoạt động Chrome:
Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm:
- Trang web.
- Nội dung do người dùng gửi, chẳng hạn như nội dung người dùng gửi trong
Google Doanh nghiệp của tôi và Maps.
- Nội dung quét từ sách.
- Cơ sở dữ liệu công khai trên Internet.
- Và nhiều nguồn khác.
Tuy nhiên, trang này sẽ tập trung vào các trang web.
Google thực hiện ba bước cơ bản để tạo kết quả từ các trang web:
1.Thu thập dữ liệu:
- Bước đầu tiên là tìm những trang tồn tại trên web. Google không lưu giữ một
danh mục trung tâm về mọi trang web, do đó, chúng tơi phải liên tục tìm kiếm
các trang mới và thêm những trang đó vào danh sách các trang đã biết. Google
biết đến một số trang vì chúng tơi đã truy cập các trang đó từ trước. Google
tìm thấy các trang khác khi đi theo đường liên kết từ một trang đã biết đến một
trang mới. Ngồi ra, chúng tơi cũng phát hiện một số trang khác khi chủ sở
hữu trang web gửi danh sách các trang để Google thu thập dữ liệu. Nếu bạn
đang sử dụng một nhà cung cấp dịch vụ lưu trữ web được quản lý, thì họ có
thể yêu cầu Google thu thập dữ liệu mọi trang bạn mới tạo hoặc cập nhật.
- Khi phát hiện ra URL của một trang, Google sẽ truy cập hoặc thu thập dữ
liệu trang đó để tìm hiểu nội dung trên trang. Google hiển thị trang và phân
tích cả nội dung văn bản lẫn nội dung không phải văn bản cũng như bố cục

hiển thị tổng thể để quyết định vị trí của trang trong kết quả của Tìm kiếm.
Càng hiểu rõ về trang web của bạn bao nhiêu thì Google càng có thể hiển thị
trang cho những người đang tìm kiếm nội dung của bạn một cách phù hợp bấy
nhiêu.
2.Lập chỉ mục:
- Sau khi tìm thấy một trang, Google sẽ cố gắng tìm hiểu nội dung của trang
đó. Q trình này gọi là lập chỉ mục. Google phân tích nội dung của trang, lập
danh mục hình ảnh và tệp video nhúng trên trang và cố gắng tìm hiểu trang
theo cách khác. Thông tin này được lưu trữ trong chỉ mục của Google – một cơ
sở dữ liệu khổng lồ lưu trữ trong rất nhiều máy tính.
3.Phân phát (và xếp hạng):
- Khi người dùng nhập cụm từ tìm kiếm, Google sẽ cố gắng tìm câu trả lời phù
hợp nhất trong chỉ mục của chúng tôi dựa trên nhiều yếu tố. Google cố gắng
xác định các câu trả lời có chất lượng cao nhất và xem xét những yếu tố sẽ
cung cấp trải nghiệm người dùng tốt nhất và câu trả lời phù hợp nhất, như vị
trí, ngơn ngữ và thiết bị của người dùng (máy tính hoặc điện thoại).
12


1.3.5.1 Những tính năng mạnh mẽ của VisualCode:
-

Nói đến những tính năng hỗ trợ lập trình viên thì từ lúc bắt
đầu, VSCode đã cho thấy sự vượt trội so với các Code
Editor khác. Tiêu biểu trong số các tính năng này có thể kể đến
như:

1. IntelliSense:
- IntelliSense là sự kết hợp giữa code auto-complete và trí tuệ
nhân tạo (AI). Tính năng này cung cấp một loạt các đề nghị cùng

với gợi ý hoặc mô tả ngắn khi ta đang viết code. Những gợi ý
này được tính tốn dựa theo các nhân tố bối cảnh như ngơn ngữ
lập trình, cú pháp, biến, hàm, cũng như các code trong file.
- hết các Code Editor hiện đại đều có IntelliSense, nhưng ít phần
mềm nào chuyên nghiệp bằng VisualCode. Đây là tính năng
nâng cao hiệu suất lập trình và khơng thể thiếu đối với lập trình
viên chuyên nghiệp.
- VisualCode cung cấp sẵn IntelliSense cho các ngơn ngữ lập trình
JavaScript, CSS, HTML, TypeScript. Ngồi ra bạn cũng có thể
cài thêm IntelliSense cho các ngơn ngữ khác thơng qua
extension, hoặc bạn cũng có thể tự custom tính năng này cho phù
hợp với mình, tiện q đúng khơng nào!
2. Tích hợp sẵn Git:
- Nhu cầu làm việc nhóm và lưu trữ là khơng thể thiếu, vì vậy tích
hợp Git vào Code Editor như một tính năng cơ bản là một lựa
chọn đúng đắn. Git trên VisualCode cung cấp cho bạn những git
action cơ bản như commit code, pull, push,… Và qua từng phiên
bản thì việc hỗ trợ Git càng đầy đủ.
3. Debugger:
- Một trong những tính năng chính của VisualCode chính là khả
năng hỗ trợ debug tuyệt vời. Theo mặc định, VisualCode chỉ
kèm theo trình Debug hỗ trợ NodeJS. Nhưng tất nhiên, một lần
nữa, bạn cũng có thể cài thêm các extension để debug cho các
ngôn ngữ khác.
4. Tích hợp Terminal:
- Terminal là một chương trình giao diện cửa sổ dòng lệnh
(command line interface). Cũng như Git, nhu cầu sử
dụng terminal của lập trình viên là vơ cùng quan trọng.
Trên VisualCode, bạn có thể mở một hoặc nhiều tab terminal tại
thư mục làm việc hiện tại, điều này làm tăng hiệu suất công việc

lên rất nhiều đấy.

13


5. Khả năng tùy chỉnh và mở rộng:
- VisualCode cung cấp một khả năng tùy chỉnh tuyệt vời dành cho
người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính
năng, keyboard shortcut, snippets, coding style,… đều vơ cùng
linh hoạt. Ngồi ra bạn cịn có thể tùy chỉnh trên từng workspace
rất tiện lợi cho từng loại dự án.
- Cũng như các Code Editor/IDE khác, VisualCode cũng có khả
năng mở rộng thơng qua việc cài thêm các extension.

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1.4 Mơ hình tổng quan của hệ thống nghiên cứu

Hình 3.1: Sơ đị ngữ cảnh

1.5 Thiết kế chi tiết

Hình 3.2.1: Trang chủ

14


Chương 2

Triển khai xây dựng

4.1 Yêu cầu bài toán đặt ra
Thiết kế thời trang online
Người dùng :
+ xem cụ thể các sản phẩm
+ liên hệ trợ giúp
+ đánh giá và góp ý
Admin :
+cập nhật sản phẩm
+ nắm bắt nhu cầu người dùng
4.2 các tính năng website
- Giao diện :

Hình 4.2.1: Giao diện 1
• Trình bày trang nhã , đơn giản thân thiện
• Nội dung hiển thị chủ yếu : hinh ảnh và các chức năng
• Có banner đổi hình bằng javascript chuyển động nhẹ

Hình 4.2.1: Giao diện 2
• Hiển thị các danh mục sản phẩm
• Hiển thị các chức năng
15


Hình 4.2.1: Giao diện 3
• Hiển thị các mục góp ý
• Cho phép xem nhanh u thích và xem từng sản phẩm
4.3: cách tiếp cận và giải quyết vấn đề
Ta dùng phương pháp hướng đối tượng để tiếp cận vấn đề này dễ hơn ,tạo nên
khung hình nhìn tổng thể vấn đề

16


Chương 3

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

Đồ án xây dựng một hệ thống website thời trang online
Qua quá trình thực hiện đồ án ,em đã tổng hợp lại các kiến thức trong thời gian
đã học tại trường. Đồng thời em đã tìm hiểu và nắm bắt được wuy trình xây
dựng một website căn bản . Đồ án cơ bản đã có gấn như đầy đủ các phần của
một website thời trang online
Vì thời gian có hạn , vốn kiến thức chưa đủ cũng như kinh nghiệm thực tế
chưa nhiều nên việc phân tích bài tốn về tương đối thực hiện đầy đủ của một
trang web cơ bản tuy nhiên chưa mơ tả mọi khía cạnh của vấn đề đã xây dựng
được hệ thống nhưng chỉ với những chức năng chính có chức năng chưa đầy
đủ , nhiều chức năng có nhưng chưa tiện dụng và khá đơn giản .

17


PHỤ LỤC (kèm theo)
Phần này bao gồm những nội dung cần thiết nhằm mimh họa hoặc hỗ trợ
cho nội dung luận văn như: số liệu, mẫu biểu, tranh ảnh…
Phụ lục khơng được dày hơn phần chính của luận văn

18


size 13, ……………………………………………..

…………………………………………………………………………..
…………………………………………………………………………..
…………………………………………………………………………..
…………………………………………………………………………..
…………………………………………………………………………..
…………………………………………………………………………..
…………………………………………………………………………..

19