ĐỒ ÁN MÔN CƠ SỞ 1 ĐỀ TÀI THIẾT KẾ WEBSITE BÁN HÀNG ONLINE. TS. TRẦN THỊ TRÀ VINH

MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP ĐẠ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 MÔN CƠ SỞ 1 ĐỀ TÀI THIẾT KẾ WEBSITE BÁN HÀNG ONLINE Sinh Viên Thực Hiện Đinh[.]

THIẾT KẾ WEBSITE BÁN HÀNG ONLINE

Sinh Viên Thực Hiện :Đinh Thị Cẩm Ly 20IT7

Giảng viên hướng dẫn :TS TRẦN THỊ TRÀ VINH

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1 THIẾT KẾ WEBSITE BÁN HÀNG ONLINE

ĐÀ NẴNG, NGÀY 02 THÁNG 5 NĂM 2021

2

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ và hướng dẫnrất tận tình của các thầy cô thuộc Đại học Công nghệ Thông tin Và Truyền thông Việt- Hàn– Đại học Đà Nẵng Em xin cảm ơn các thầy cô thuộc bộ môn chuyên ngành đã cung cấpcho chúng em các thông tin, kiến thức vô cùng quý báu và cần thiết trong suốt thời gian quá

để em có thể thực hiện và hoàn thành đồ án của mình Đặc biệt em xin chân thành cảm ơnthành cô Trần Thị Trà Vinh người đã trực tiếp hướng dẫn chúng em trong thời gian thựchiện đồ án này

Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin đã ủng

hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chúng tôi trong quátrình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đề tàikhông tránh khỏi những sai sót Em rất mong nhận được sự thông cảm của quý thầy cô vàmong đón nhận những góp ý của thầy cô và các bạn

Em xin chân thành cảm ơn!

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Đà Nẵng, ngày 30 tháng 06 năm 2021

Giảng viên hướng dẫn

ThS Trần Thị Trà Vinh

4

MỤC LỤC

LỜI CẢM ƠN 3

MỤC LỤC 5

MỤC LỤC HÌNH ẢNH 6

MỞ ĐẦU……….7

1.Giới thiệu 7

2 Phương pháp, mục tiêu đề tài 7

3 Cấu trúc đồ án 8

Chương 1 KIẾN THỨC TỔNG QUAN 9

1.1 Các hệ thống website tương tự 9

1.2 Các công cụ hỗ trợ thực hiện thiết kế website 9

1.Các phần mềm lập trình: 9

2.Các ngôn ngữ và phần mềm sử dụng: 9

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ WEBSITE 10

2.1 Mô hình thiết kế 10

2.2 Sơ đồ phân cấp chức năng front-end 10

3 Cấu trúc đồ án 10

CHƯƠNG 3: XÂY DỰNG WEBSITE 12

3.1 Tên website: 12

3.2 Logo của website: 12

3.3 Cấu trúc website: 12

3.4 Chi tiết: 13

3.4.1 Home… 15

3.4.2 Electronics 15

3.4.3 Ladies Wears 15

3.4.4 Kids Wear 16

3.4.5 Furnitures 17

3.4.6 Home Appliances 18

3.4.7 Electronics Gadgets 19

3.4.8 Trang đăng kí 20

3.4.8 Trang đăng nhập 20

3.4.8 Poster Shop LIVIA 20

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 22

1 Kết quả đạt được 22

2 Hướng phát triển: 22

MỤC LỤC HÌNH ẢNH

Hình 2.1 Sơ đồ phân cấp chức năng front-end 11

Hình 2.2 Sơ đồ phân cấp chức năng back-end 11

Hình 3.1 Logo 12

Hình 3.2 Trang chủ 13

Hình 3.3 Electronics 13

Hình 3.4 Ladies Wears 14

Hình 3.5 Mens Wear 14

Hình 3.6 Kids Wear 15

Hình 3.7 Furnitures 15

Hình 3.8 Home Appliances 16

Hình 3.9 Electronics Gadgets 16

Hình 3.10 Trang đăng ký 17

Hình 3.11 Trang đăng nhập 18

Hình 3.12 poster shop livia 19

Hình3.13 poster shop livia 20

6

MỞ ĐẦU

1.Giới thiệu

Ngày nay trong nhịp sống hối hả của con người thì việc giành thời gian để ra ngoài đểmua sắm trở nên là một điều quá xa sỉ Những lo lắng về giao thông không an toàn và hạnchế trong việc mua hàng truyền thống có thể tránh được cùng với hiện tại dịch bệnh covid

19 đang hoành hành, những đợt giãn cách xã hội thì chúng ta không thể không nhắc đếnmua sắm trực tuyến được Với mua sắm trực tuyến (online), bạn cũng không cần phải lolắng về điều kiện thời tiết, dịch bệnh Người tiêu dùng và các khách hàng là những tổ chức,công ty,… đang dần chuyển sang mua sắm trực tuyến nhiều hơn nhằm tiết kiệm thời gian và

an toàn hơn

Chính vì thế việc mua sắm online càng trở nên quan trọng và cần thiết, chỉ cần click chuộtthì họ có thể có được sản phẩm mà mình mong muốn Việc mua sắm online có nhiều ưuđiểm là có thể sở hữu mọi thứ thông qua các cú click chuột chứ không cần phải đến tận nơi

để mua hàng Sau khi vào website bán hàng, chọn sản phẩm, chỉ cần đặt hàng (order) ngườibán sẽ mang sản phẩm đến tận nhà bạn Mua sắm online cho phép mua hàng bất cứ khi nàobạn muốn Các cửa hàng trên mạng không bao giờ đóng cửa, có thể mua sắm 24/24 giờ và 7ngày trong tuần Mua sắm ở các chợ, trung tâm thương mại hay cửa hàng rất khó để bạn cóthể so sánh đặc điểm và giá của sản phẩm với nhau Khi mua hàng online, bạn dễ dàng sosánh và đưa ra lựa chọn sản phẩm phù hợp nhất Đôi khi bạn gặp phải những người bánhàng khó tính tại một số địa điểm bán hàng Mua sắm online thì khách hàng chẳng phải để ýđến chuyện chủ hàng khó tính hay chờ đợi lâu nữa

Do đó, với sự giúp đỡ của cô giáo Trần Thị Trà Vinh, em quyết định xây dựng mộttrang web bán hàng LIVIA với mong muốn đáp ứng các nhu cầu của khách hàng Đây là nơimua sắm online tiện dụng với mọi người Một trang web bán hàng mang tính tiện dụng, nơimua bán, chia sẻ của bạn bè, người thân

Sau khi tìm hiểu và nghiên cứu thị trường, xác định được khách hàng mục tiêu,website “BÁN HÀNG LIVIA” đã được xây dựng

Website chủ yếu dùng để mua bán các mặt hàng phục vụ cho đời sống hằng ngày,các mặt hàng được nhiều người quan tâm Thông qua web bán hàng, các nhà quảng cáo haycác nhà cung cấp sẽ cập nhật một cách nhanh chóng những vấn đề của các mặt hàng mới Website được tạo ra ngoài việc đem lại sự thư giãn cho mọi người còn tiết kiệm thờigian khá lớn cho người dùng

2 Phương pháp, mục tiêu đề tài

- Trước tiên ta phải nêu bài toán, phân tích và thiết kế giao diện, hệ thống củawebsite

- Dựa trên các mục tiêu cụ thể để tìm kiếm thông tin sử dụng, thiết kế giao diện phùhợp

- Sau đó xây dựng website sử dụng ngôn ngữ HTML, JavaScript, sử dụng một sốcông cụ để lập trình như Sublime Text, …

3 Cấu trúc đồ án

Nỗi dung đồ án, ngoài phần mở đầu và kết luận, bao gồm 3 chương:

 Chương 1 Kiến thức tổng quan: trong chương này trình bày các nội dung liên quan

đến HTML, Java…

 Chương 2 Phân tích thiết kế website

 Chương 3 Xây dựng website

Cuối cùng là Kết luận và hướng phát triển

8

CHƯƠNG 1 KIẾN THỨC TỔNG QUAN

Để đạt độ thẩm mỹ cao, khả năng tương thích với tất cả các loại thiết bị, hoạt động ổnđịnh, nên nhóm quyết định sử dụng ngôn ngữ HTML, ứng dụng Visual Code, cũng như cáccông cụ hỗ trợ để áp dụng vào thiết kế và xây dựng website “BÁN HÀNG LIVIA”

Ưu điểm của các phần mềm này là nó rất dễ để có thể cài đặt và sử dụng

Mỗi phần mềm đảm bảo một tính năng riêng Như Visual Code là 1 IDE dùng để soạn thảongôn ngữ lập trình Xampp là phần mềm tạo lập môi trường chạy web, sử dụng Apache đểlàm môi trường chạy PHP, hỗ trợ PhpMyadmin cho phép truy cập MySQL trên trinh duyệt.FFmpeg cho phép xử lý các tệp media (video, nhạc)

Tất cả phần mềm trên đều hỗ trợ chạy trên hệ điều hành Windows

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ WEBSITE 2.1 Mô hình thiết kế

- Sử dụng mô hình MVC (Model-View-Controller)

o Model: Là phần đảm nhận kết nối đến CSDL

o View: Là phần giao diện của người dùng (Front-End)

o Controller: Là phần kết nối giữa Model và View, View muốn lấy dữ liệu từ Model thì phải qua Controller

2.2 Sơ đồ phân cấp chức năng front-end

Hình 2.1 Sơ đồ phân cấp chức năng front-end

2.3 Sơ đồ phân cấp chức năng back-end

Hình 2.2 Sơ đồ phân cấp chức năng back-end

12

CHƯƠNG 3 XÂY DỰNG WEBSITE

3.1 Tên website

Sau khi lên ý tưởng và tham khảo ý kiến của giáo viên hướng dẫn thì chúng em quyết

định đặt tên website là BÁN HÀNG LIVIA Vừa đơn giản, nhưng giúp người dùng có thể

nhớ tên website và tìm kiếm một cách rất dễ dàng trên các công cụ tìm kiếm phổ biến

3.2 Logo của website

Hình 3.3 Logo Logo của website được thiết kế đơn giản với sắc màu khỏe khắn và đẹp mắt Giúp

người dùng ấn tượng với logo của trang, không bị hòa lẫn với những logo đầy màu sắc củacác trang khác

3.4.3 Ladies Wears

Hình 3.6 Ladies Wears3.4.4 Mens Wear

Hình 3.7 Mens Wear

3.4.7 Home Appliances

Hình 3.10 Home Appliances

3.4.8 Electronics Gadgets

Hình 3.11 Electronics Gadgets

3.4.9 Trang đăng kí

Hình 3.12 Trang đăng ký

18

3.4.10 Trang đăng nhập

Hình 3.13 Trang đăng nhập

3.4.11 Poster Shop LIVIA

Hình 3.14 poster shop livia

20

Hình3.15 poster shop livia

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

1 Kết quả đạt được

Trên cơ sở tìm hiểu về ngôn ngữ web và các ứng dụng lập trình, chúng em đã thiết

kế thành công được một trang web mạng xa hội Qua đó, trong quá trình xây dựng websitedemo, chúng em cũng đã học hỏi được rất nhiều, những kĩ thuật javascritp, css để có thểthiết kế được những trang web có chất lượng cao…

Tuy nhiên, kết quả đạt được chưa cao, website còn nhiều điểm hạn chế chưa khắcphục được, nhưng đó cũng là bước khởi đầu để chúng em có thể hướng tới một trang webhoàn thiện và có thể đi kinh doanh đươc …

2 Hướng phát triển:

Có nhiều hướng phát triển cho trang web này, có thể phát triển rất nhiều mặt, kể cả

về mạng xã hội được xa hơn nữa hoặc có thể xây dựng luôn website mạng xã hội Việt Nam

do chính chúng em phát triển Có thể xây dựng thêm những trang web đa ngôn ngữ, để bất

kì người nào cũng có thể xem và hiểu được

Ngoài ra có thể phát triển trang web theo hướng đa dịch vụ, không chỉ là nơi để mọingười giao lưu, kết nối và chia sẻ, mạng xã hội còn là “mảnh đất vàng” cho kinh doanhOnline, hỗ trợ tìm kiếm khách hàng, tương tác, thậm chí là quảng cáo, xây dựng thươnghiệu doanh nghiệp hoặc xây dựng thương hiệu cá nhân

22