Đồ Á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.doc

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


ĐỒ Á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


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à q 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!


MỤC LỤC
Trang
MỞ ĐẦU......................................................................................................... 1
Phần 1
Giới thiệu...........................................................................................2
1.1 Tên đề tài..................................................................................................2
1.2 Lý do chọn đề tài......................................................................................2

1.3 Hướng tiếp cận của đề tài........................................................................2
1.4 Ưu điểm của đề tài....................................................................................2
1.5 Ý nghĩa và lý luận thực tế của đề tài.........................................................2
1.6 Cấu trúc của báo cáo.................................................................................2
Chương 1 Cơ sở lý thuyết...................................................................................7
1.1 Công cụ.....................................................................................................7
1.2 Ngôn ngữ..................................................................................................7
Chương 2 Phân tích thiết website......................................................................9
2.1 Yê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.1 Interface...................................................................................................9
2.2.2 Login.......................................................................................................10
2.2.3 Các sản phẩm.........................................................................................10
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...........................................................................................15
TÀI LIỆU THAM KHẢO..........................................................................................15

DANH MỤC HÌNH

Trang

Hình 3.1 – Trang chủ The Family..........................................................................10
Hình 3.2 – Trang chủ The Family..........................................................................10
Hình 3.3 – Trang chủ The Family..........................................................................11
Hình 3.4 – Trang chủ The Family..........................................................................11
Hình 3.5 – Trang sản phẩm..................................................................................12
Hình 3.6 – Trang thơng tin chi tiết sản phẩm.......................................................12
Hình 3.7 – Trang đánh giá sản phẩm....................................................................13
Hình 3.8 – Form đăng nhập.................................................................................13

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)
đã sử dụng các ngôn ngữ thiết kế web cở bản sau:

nên em

- 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.

Hình 1.3 - Html

- CSS (Cascading
Style Sheets): là 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 hoà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 hoà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.