ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI:Showroom Trưng bày sản phẩm tạo kiểu và chăm sóc tóc nam The Family

ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI:
Showroom Trưng bày sản phẩm tạo kiểu và chăm sóc
tóc nam The Family

Sinh viên thực hiện

: NGUYỄN XUÂN THỊNH (19IT5)
DƯƠNG VĂN LỘC
(19IT4)

Giảng viên hướng dẫn : THS. HÀ THỊ MINH PHƯƠNG

Đà nẵng, tháng 8 năm 2020


ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1
Ngày nay, cùng với sự phát triển của đất nước ngành Cơng nghệ thơng tin
đã có những bước phát triển mạnh mẽ không ngừng và tin học đã trở thành
chiếc chìa khóa dẫn đến thành cơng cho nhiều cá nhân trong nhiều lĩnh vực,
hoạt động. Với những ứng dụng của mình, ngành Cơng nghệ thơng tin đã
góp phần mang lại nhiều lợi ích mà khơng ai có thể phủ nhận được. Đặc
biệt là trong lĩnh vực quản lý kinh tế, tin học đã góp phần tạo ra sự thay đổi

nhanh chóng cho bộ mặt xã hội. Nhất là khi việc tin học hóa vào cơng tác
quản lý, bán hàng là một trong những yêu cầu cần thiết đối với các doanh
nghiệp hiện nay.
Từ những phần mềm quản lý giúp cho công việc bán hàng của cửa hàng trở
nên nhanh chóng và dễ dàng, ngày nay cơng nghệ thông tin đã phát triển
mạnh mẽ hơn nữa, Website ra đời không chỉ đáp ứng cho các khách hàng
đến trực tiếp cửa hàng mua sản phẩm mà nó cịn phục vụ cho những khách
hàng ở xa. Không những thế, việc giới thiệu, quảng bá hình ảnh về cửa
hàng, cơng ty được mở rộng trên quy mô lớn giúp cho việc kinh doanh,
buôn bán, trao đổi tin tức thuận lợi hơn rất nhiều, mang lại hiệu quả kinh tế
cao hơn và tạo uy tín trong lịng khách hàng.
Chính vì lợi ích mà Website mang lại mà các cửa hàng, công ty đã áp dụng
nó để phát triển cơng việc kinh doanh và giới thiệu cửa hàng của mình.
Trong số đó, làm đẹp cho nam giới cũng là một ngành sử dụng nhiều đến
Website. Do vậy, nhóm em lựa chọn đề tài thiết kế Website trưng bày các
sản phẩm tạo kiểu và chăm sóc tóc cho nam giới nhằm đưa đến cho khách
hàng thơng tin chính xác và những chia sẻ thực tế về sản phẩm giúp nam
giới tự tin hơn về vẻ ngồi của mình

Đà Nẵng, tháng 8 năm 2020


MỞ ĐẦU
1.1 Tên đề tài.
Showroom Trưng bày sản phẩm tạo kiểu và chăm sóc tóc nam The Family
1.2 Lý do chọn đề tài.
Trong cuộc sống hiện đại ngày nay việc chăm chút ngoại hình nói chung và
tạo phong cách nói riêng là một điều cần thiết. Không chỉ riêng chị em mới
có quyền làm đẹp, cánh mày râu cũng phải xuất hiện thật ấn tượng, chỉn
chu trong mọi tình huống. Và mái tóc quyết định rất lớn về ngoại hình của

cánh mày râu
1.3 Hướng tiếp cận của đề tài

Đề tài hướng đến tiệm baber cut có quy mơ vừa
1.4 Ưu điểm của đề tài
 Ưu điểm
- Giao diện thân thiện dễ sử dụng
- Tìm kiếm thơng tin sản phẩm, thơng tin nhà cung cấp nhanh
chóng dễ dàng
- Cập nhật xu hướng mới nhất đến người dùng
 Nhược điểm
- Tốc độ xử lý còn chậm
1.5 Ý nghĩa và lý luận thực tế của đề tài
- Giúp nhóm em hiểu rõ về quy trình và nghiệp vụ gian hàng trực
tuyến
- Tiếp cận và làm quen với các yêu cầu thực tế của cửa hàng cho một
website bán hàng.
- Ứng dụng đề tài vào quá trình giới thiệu sản phẩm cho các cửa hàng
vừa
- Nâng cấp Website để phục vụ các yêu cầu trong quá trình bán hàng
của cửa hàng.
1.6 Cấu trúc của báo cáo
- Trang bìa.
- Lời mở đầu.
- Lời cảm ơn.
- Nhận xét của giáo viên hướng dẫn.
- Mục lục.
- Danh mục các bảng.
- Danh mục hình
Phần I : Mở đầu

1.1. Tên đề tài.


1.2. Lý do chọn đề tài.
1.3. Hướng tiếp cận của đề tài.
1.4. Ưu khuyết điểm của đề tài.
1.5. Ý nghĩa lý luận và ý nghĩa thực tiễn của đề tài.
1.6. Cấu trúc của báo cáo.
Phần II : Nội Dung
Chương I : Nội Dung
Chương II : Nghiên cứu tổng quan
Chương III : Phân tích thiết kế hệ thống
Phần III : Thực nghiệm , đánh giá kết quả và hướng phát triển
Chương IV : Triển khai xây dựng
Phần IV : Kết luận
Chương V :Kết luận và hướng phát triển

LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn các thầy các cô trong khoa Công nghệ thông tin
đã trang bị những kiến thức quý báu cho chúng em trong suốt quá trình học tập và
làm đề tài tại Khoa Công Nghệ Thông Tin Và Truyền Thông Đại Học Đà Nẵng.
Nhờ công lao giảng dạy, chỉ bảo tận tình của các thầy các cơ mà nhóm em đã có
được những kiến thức chuyên ngành về công nghệ thông tin để thực hiện Đồ Án
Cơ Sở 1 này.
Đặc biệt, chúng em xin chân thành cảm ơn Cơ Hà Thị Minh Phương đã tận tình
hướng dẫn, chỉ bảo, đưa ra những đóng góp ý kiến rất hữu ích và quý báu cho
chúng em trong suốt quá trình thực hiện đề tài này.
Chúng em xin gửi lời cám ơn đến gia đình, bạn bè đã động viên, chia sẻ và cung
cấp các tài liệu hữu ích cho nhóm.
Mặc dù đã cố gắng nỗ lực thực hiện đề tài với quyết tâm cao nhưng chắc hẳn đề

tài không thể tránh khỏi những thiếu sót. Nhóm em rất mong nhận được những ý
kiến đóng góp ý kiến của thầy cô và các bạn để đề tài của chúng em ngày càng
hoàn thiện và hướng tới áp dụng thực tế hơn.
Nhóm em xin chân thành cảm ơn!
Đà Nẵng ,tháng 08 năm 2020
Nhóm sinh viên thực hiện
Nguyễn Xuân Thịnh
Dương Văn lộc


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

...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................

...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................


MỤC LỤC
Trang
MỞ ĐẦU..............................................................................................................1
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT.......................................................................6
1.1 Công cụ.......................................................................................................6
1.2 Ngơn ngữ....................................................................................................7
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ WEBSTE.................................................8
2.1 u cầu.......................................................................................................9
2.1.1 Yêu cầu chức năng................................................................................9
2.1.2 Yêu cầu phi chức năng..........................................................................9
2.2 Các bước thiết kế........................................................................................9
2.2.1 Interface:...............................................................................................9
2.2.2 Login....................................................................................................9
2.2.3 Các sản phẩm........................................................................................9
CHƯƠNG 3 The Family – website trưng bày giới thiệu sản phẩm tạo kiểu và

chăm sóc tóc nam.................................................................................................10
3.1 Giao diện...................................................................................................10
Chương 4 KẾT LUẬN........................................................................................14
1. Kết quả đạt được.........................................................................................14
2. Hướng phát triển.........................................................................................14
TÀI LIỆU THAM KHẢO...............................................................................15
TÀI LIỆU THAM KHẢO...................................................................................15

DANH MỤC HÌNH
Trang
Hình 1.3 - Html......................................................................................................7

CHƯƠNG 1

CƠ SỞ LÝ THUYẾT

1.1 Cơng cụ
Ngày nay có rất nhiều cơng cụ hỗ trợ cho việc lập trình, thiết kế website.
Và trong đồ án HT-Phone này, em sẽ sử sụng các công cụ sau:
+ Visual Studio Code là phiên bản mới nhất của chương trình soạn thảo
văn bản được sử dụng nhiều bởi web developers, coders, và
programmers. Nó sẵn có cho Mac, Windows, Linux và cho phép tải về
và sử dụng miễn phí.
Việc lựa chọn một mơi trường lập trình thích hợp cũng góp phần vào
thành cơng của việc xây dựng website phục vụ cho đồ án này.


Hình 1.1 – Visual Studio Code

1.2 Ngơn ngữ

Đồ án này chủ yếu chú trọng về phần giao diện (Front end)
nên em
đã sử dụng các ngôn ngữ thiết kế web cở bản sau:
- HTML (HyperText Markup Language): là một ngôn ngữ đánh dấu
được thiết kế ra để tạo nên các thành phần cơ bản (như tiêu đề, đoạn
văn, hình ảnh, video, button, input box, audio, ...) của website.

- CSS
(Cascading Style Sheets): là
Hình 1.3 - Html
ngơn ngữ mơ
tả style (phong cách) hiển thị
của các đối tượng HTML. Chẳng hạn như: vị trí hiển thị, màu
sắc, kích thước, vị trí. CSS giúp chúng ta tránh phải sử dụng các rắc
rối của HTML, dễ dàng định nghĩa style cho các thẻ cũng như dễ
quản lý.

Hình 1.4 - CSS

- Javascript:
là một ngơn ngữ lập
trình có thể chạy được trên trình duyệt giúp xây dựng các chức năng


tương tác với người dùng như các hiệu ứng chuyển, animation, các
sự kiện click chuột, kéo thả chuột, ...

Hình 1.5 - Javascript

- Bootstrap: là một CSS Framework mã nguồn mở giúp chúng ta có

thể CSS nhanh chóng cho các đối tượng HTML. Nó giúp chúng ta
đơn giản & dễ dàng hơn trong thiết kế giao diện và hỗ trợ responsive.
Đây là một trong những CSS Framework phổ biến nhất hiện nay.

Hình 1.6 - Bootstrap

- jQuery: là một thư viện của Javascript được xây dựng giúp việc xây
dựng các chức năng trên website sử dụng javascript trở nên đơn giản
và thuận tiện hơn rất nhiều.

Hình 1.7 - jQuery

Với nhũng ngơn ngữ này,chúng em đã hồn tồn có thể xây dựng
website này

CHƯƠNG 2

PHÂN TÍCH THIẾT KẾ WEBSTE


2.1 Yêu cầu
2.1.1 Yêu cầu chức năng
- Người dùng có thể đăng nhập và đăng ký với trang web.
- Người dùng được phép tìm kiếm thơng tin sản phẩm theo những tiêu
chí khác nhau.
- Liệt kê những sản phẩm hot nhất hiện nay.
- Hiển thị đầy đủ thông tin chi tiết từng sản phẩm.
- Hiển thị thông tin liên hệ để người dùng có thể phản hồi khi có thắc
mắc.
2.1.2 Yêu cầu phi chức năng

- Tính tiện dụng: Giao diện thân thiện, dễ sử dụng đối với những người
dùng mới.
- Tính tương thích: Tương thích với hầu hết các trình duyệt web.
2.2 Các bước thiết kế
2.2.1 Interface:
Thiết kế giao diện phù hợp và đầy dủ các chức năng như yêu cầu đặt
ra.
- Trang chủ: Navbar, Chia sản phẩm theo từng loại
- Trang thông tin chi tiết sản phẩm: Liệt kê tồn bộ thơng tin sản phẩm
như giá cả, thành phần, thời gian sản xuất ,nguồn gốc...
- Trang hỗ trợ khách hàng: Phản hồi của khách hàng và câu hỏi cần mà
khách hàng cần tư vấn, liên hệ trực tiếp với chủ website.
2.2.2 Login
Người dùng đăng ký và đăng nhập thông tin

1. Người dùng chọn đăng nhập.
2.2.3 Các sản phẩm
Chọn vào sản phẩm để xem thông tin chi tiết:
- Tên sản phẩm.


-

Hình ảnh của sản phẩm.
Giá của sản phẩm.
Bình luận, đánh giá.
Thông tin chi tiết của sản phẩm.
Đánh giá sản phẩm.

CHƯƠNG 3 The Family – website trưng bày giới

thiệu sản phẩm tạo kiểu và chăm sóc tóc nam
Sau đây là những phần mà nhóm chúng em đã hồn thành trong bài
báo cáo này (cịn có rất nhiều ý tưởng, dự định chưa thể thực hiện được do
khả năng, hy vọng rằng có thể hồn thiện hơn trong thời gian tới):
3.1 Giao diện
Giao diện được xây dựng khá hoàn chỉnh, tương ứng với từng đối tượng
người dùng có thanh menu riêng, chứa các khả năng có thể thực hiện.

Hình 3.1 - Trang chủ The Family


Hình 3.2 - Trang chủ The Family

Hình 3.3 - Trang chủ The Family


Hình 3.4 - Trang chủ The Family

Hình 3.5 - Trang sản phẩm


Hình 3.6 - Trang thơng tin chi tiết sản phẩm.

Hình 3.7 - Trang đánh giá sản phẩm

- Đăng nhập vào tài khoản (có hỗ trợ chức năng tìm kiếm mật khẩu khi
quên mật khẩu).


Hình 3.9 - Form đăng nhập

Chương 4

KẾT LUẬN

1. Kết quả đạt được
Xây dựng một website giới thiệu sản phẩm sử dụng cơng nghệ lập trình
mới, hiện đại có nhiều sự thú vị và hấp dẫn và cũng có nhiều thách thức đối
với chúng em. Thứ nhất, mặc dù thương mại điện tử khơng cịn mới lạ nữa
nhưng đối với chúng em thời gian được tiếp cận nó rất ít. Thứ hai, đây là
lần đầu tiên chúng em thật sự tiếp xúc làm việc với các ngôn ngữ web để
xây dựng website. Do đó, q trình thực hiện đồ án gặp khá nhiều khó
khăn, mất nhiều thời gian để có thể hiểu nắm được cách làm việc với nó, có
những lúc tưởng như khơng thể hồn thành kịp tiến độ, vẫn có một vài chỗ
chưa hồn thành kịp cho báo cáo này. Ngồi ra, để xây dựng một trang web
thành cơng thì giao diện cũng là một yếu tố rất quan trọng bậc nhất, nó phải
là sự kết hợp hài hịa giữa sự hấp dẫn, lôi cuốn người dùng với sự đơn giản,
thân thiện, dễ sử dụng. Về mặt này thì nhóm chúng em thật sự khơng có
năng khiếu về thẫm mỹ nên giao diện khá đơn giản.
Qua quá trình thực hiện đồ án này, em cũng đã học hỏi, có được nhiều
kiến thức hay hơn. Về mặt lý thuyết, em đã nắm rõ hơn và sâu hơn kiến
thức về lập trình website và phương pháp tạo ra một trang web hồn chỉnh,
nắm rõ hơn về các ngơn ngữ web đề từ đó em có thể vận dụng tốt hơn cho
tương lai, công việc sau này. Cũng qua thời gian làm đồ án này, em cũng đã
có những trải nghiệm chân thật nhất có thể là nghề nghiệp sau này của bản
thân.
2. Hướng phát triển
Em sẽ cố gắng có thể để phát triển và khắc phục đề tài này theo các
hướng sau:.

- Liên kết với hệ cơ sở dữ liệu.
- Liên kết với các đối tác là baber shop
- Đưa vào triển khai ứng dụng trên thực tế
TÀI LIỆU THAM KHẢO
1. Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages.
2. Learn Bootstrap 4 by Freetuts.
3. Javascript: The Good Parts.