đồ án cơ sở 1 đề tài website bán thức ăn chó mèo pet food

Trần Thanh LiêmLỜI CẢM ƠN hướng dẫn rất tận tình của các thầy cô thuộc Khoa Khoa học máy tính, Trường Đạihọc Công Nghệ Thông Tin và Truyền Thông Việt - Hàn, Em xin cảm ơn các thầy côthuộ

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ẵng, tháng 6 năm 2023

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

ĐẠ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 KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: WEBSITE BÁN THỨC ĂN CHÓ MÈO

PET FOOD

Đà Nẵng, tháng 6 năm 2023

NHẬN XÉT CỦA GIẢNG VIÊN

………

………

………

………

………

………

………

………

………

Đà Nẵng, ngày…tháng 06 năm 2023

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

ThS Trần Thanh Liêm

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

LỜI CẢM ƠN

hướng dẫn rất tận tình của các thầy cô thuộc Khoa Khoa học máy tính, Trường Đạihọc Công Nghệ Thông Tin và Truyền Thông Việt - Hàn, Em xin cảm ơn các thầy côthuộc bộ môn chuyên ngành đã cung cấp cho 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ànthành đồ án của mình Đặc biệt em xin chân thành cảm ơn thầy Trần Thanh Liêmngười đã trực tiếp hướng dẫn chúng em trong thời gian thực hiệ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 em 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ài không tránh khỏi những sai xó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!

MỤC LỤC

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 2

1.1 CƠ SỞ LÝ THUYẾT 2

1.1.1 WEBSITE LÀ GÌ? 2

1.1.2 LỢI ÍCH CỦA WEBSITE 2

1.1.3 YÊU CẦU ĐẶT RA 2

1.2 TỔNG QUAN VỀ WEBSITE BÁN THỨC ĂN CHÓ MÈO 3

1.3 KHẢO SÁT THỰC TRẠNG VÀ XÂY DỰNG HỆ THỐNG 4

1.3.1 Thực trạng: 4

1.3.2 Xây dựng hệ thống: 4

1.4 CÔNG NGHỆ SỬ DỤNG 4

1.5 Thông tin về các công cụ thục hiện 5

1.5.1 Phần mềm Visual Studio Codfe: 5

1.5.2 HTML 6

1.5.3 CSS 7

1.5.4 JAVASCRIPT 8

1.6 BỐ CỤC TRANG WEB 8

1.7 QUY MÔ TRANG WEB 8

1.8 PHƯƠNG PHÁP NGHIÊN CỨU 8

1.8.1 PHƯƠNG PHÁP 1: 8

1.8.2 PHƯƠNG PHÁP 2: 9

1.8.3 PHƯƠNG PHÁP 3 9

CHƯƠNG 2 TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN 10

2.1 MÔ PHỎNG HOẠT ĐỘNG CỦA TRANG WEB 10

2.2 TIẾN HÀNH XÂY DỰNG WEBSITE 11

2.2.1 GIAO DIỆN TRANG CHỦ 11

2.2.2 GIAO DIỆN TRANG CỬA HÀNG 12

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

3.1 KẾT LUẬN 15

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

3.2 HƯỚNG PHÁT TRIỂN 15

Danh mục hình ảnh

Hình 1 Giao diện phần mềm Visual Studio Code 6

Hình 2 Ngôn ngữ HTML 7

Hình 3 CSS 7

Hình 4 JAVASCRIPT 8

Hình 5 Đăng nhập 10

Hình 6 Đăng ký 11

Hình 7 Logo 11

Hình 8 Giao diện trang chủ 12

Hình 9 Giao diện Thông tin cửa hàng 13

Hình 10 Các sản phẩm của cửa hàng và giá bán 13

Hình 11 Giao diện giỏ hàng 14

Hình 12 Giao diện thanh toán 14

LỜI 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ộttrong 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ữngbướ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ầnlượ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àycà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 đổithông tin trên toàn cầu Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàngcho 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 truytì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 độ nhanhhơ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ắpthế 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 conngườ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ửahà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âydự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ủamình bán Vì vậy, em đã thực hiện đồ án “XÂY DỰNG WEBSITE BÁN THỨC ĂNCHÓ MÈO PET FOOD” Ngoài phần mở đầu và kết luận, nội dung báo cáo của chúng

em được chia làm 3 chương:

Chương 1: GIỚI THIỆU VỀ DỰ ÁN

Chương 2: TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN

Chương 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

1

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

1.1 CƠ SỞ LÝ THUYẾT

Website là một tập hợp các trang thông tin có chứa nội dung dạng văn bản, chữ

số, âm thanh, hình ảnh, video… được lưu trữ trên máy chủ (web server) và có thể truy cập từ xa thông qua mạng Internet

1.1.2 LỢI ÍCH CỦA WEBSITE

- Quảng cáo không giới hạn và tiết kiệm tối đa tiền bạc và thời gian

- Công cụ hỗ trợ thiết kế web: Html, css, bootstrap, javascrip, …

b Yêu cầu trang web hệ thống có 2 phần:

Thứ nhất: Phần khách hàng: Khách hàng là những người có nhu cầu mua sắm

xe máy, 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ặthà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

- Sau khi khách hàng chọn và đặt hàng hàng trực tiếp thì phải hiện lên đơn hàng

để khách hàng có thể nhập thông tin mua hàng và xem hoá đơn mua hàng

- Giải quyết đổi trả, phản hồi của khách hàng trong trường hợp có bất cứ vấn đềgì

2

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

- Thanh toán qua thẻ tín dụng/ Momo/ AirPay/ ZaloPay…

Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiềm soát

mọi hoạt động của hệ thống Người này được cấp tên đăng nhập và mật khẩu để đăngnhập hệ thống thực hiện chức năng của mình:

- Chức năng cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tin tức.(phải kiểm soát được hệ thống) Nó đòi hỏi sự chính xác

- Tiếp nhận kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng

- Quản lí giỏ hàng

- Thống kê theo ngày, khoảng thời gian

Ngoài các chức năng trên thì trang Web phải được thiết kế sao cho dễ hiểu,giao diện mang tính dễ dùng đẹp mắt và làm sao cho khách hàng thấy được thông tincần tìm, cung cấp các thông tin quảng cáo hấp dẫn, các tin tức khuyến mãi để thu hútkhách hàng Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàngtrong quá trình đặt mua qua mạng Đồng thời trang Web phải luôn đổi mới, hấp dẫn

1.2 TỔNG QUAN VỀ WEBSITE BÁN THỨC ĂN CHÓ MÈO

Ngày nay công nghệ thông tin đã có những bước tiến phát triển mạnh mẽ về cảchiều sâu và chiều rộng Những năm gần đây, việc cập nhật các thông tin cũng nhưthực hiện các giao dịch qua mạng Internet ngày càng trở nên phổ biến Kéo theo đó là

sự nổi lên một cách nhanh chống của các sàn giao dịch thương mại điện tử Hình thứckinh doanh này mang lại rất nhiều lợi ích cho người tiêu dùng cũng như nhà cung cấp.Phần lớn khách hàng có nhu cầu mua hàng thì phải đến các cửa hàng, siêu thị hay cáctrung tâm thương mại để lựa chọn những mặt hàng hợp với nhu cầu của mình Côngviệc này tốn kém nhiều thời gian và chi phí đi lại cho người tiêu dùng, đôi khi kháchhàng còn mua phải hàng kém chất lượng Tất cả những bất cập đó sẽ được loại bỏ với

sự ra đời của website thương mại điện tử Có lẽ nhiều người bây giờ không còn quá xa

lạ với các hình thức mua hàng trực tuyến Nổi bật trong đó là Shopee, Lazada, … Khikhách hàng có nhu cầu mua hàng, bất cứ nơi đâu có mạng Internet, khách hàng chỉ cầntruy cập vào những trang web bán hàng là có thể tìm kiếm được những mặt hàng màmình muốn mua, với phương thức giao hàng một cách nhanh chống khách hàng khôngcần phải mất quá nhiều thời gian chờ đợi Ngoài những lợi ích mà Internet mang lạicho người tiêu dùng nó còn giúp cho nhà cung cấp phát triển rất nhiều trong việc mởrộng thị trường, giúp thương hiệu của công ty được nhiều người biết đến, từ đó giảmđược rất nhiều chi phí quảng cáo cho sản phẩm và rất thuận tiện trong việc quản lý sảnphẩm và chăm sóc khách hàng theo đúng phương châm đặt ra

3

Báo cáo đồ án cơ sở 1

Để tiếp cận và góp phần đẩy mạnh sự phát triển của thương mại điện tử ở nước

ta, chúng em đã tìm hiểu và xây dựng website bán hàng thức ăn chó mèo Pet Food.Tập trung vào một phân khúc thị trường nhất định, nắm bắt được xu hướng, thị hiếucủa khách hàng

1.3 KHẢO SÁT THỰC TRẠNG VÀ XÂY DỰNG HỆ THỐNG.

1.3.1 Thực trạng:

Để xây dựng và phát triển một trang web có thể cạnh tranh được, không phảinhà phát triển nào cũng có thể thành công, có rất nhiều bất cập trong việc quản lý vàđiều hành Chính vì những điều đó, chúng em luôn nhận thức tầm quan trọng củangười quản trị, cần có một định hướng cụ thể và một chiến lược lâu dài có thể cạnhtranh được với các trang web khác

- Quản lý tin tức: Mã tin, tên tin, mục tin, chi tiết tin tức

- Xử lý được đơn hàng và thống kê

Khách hàng: người lựa chọn mặt hàng để mua Shop ở đây khách hàng tự thao

tác thông qua từng bước cụ thể để có thể mua hàng Trên mạng các mặt hàng được sắpxếp theo thứ tự dễ tìm kiếm

1.4 CÔNG NGHỆ SỬ DỤNG

Thiết kế giao diện Website dựa trên các nền tảng: HTML, CSS, JAVASCRIPS

- Trình biên dịch: Visual Studio Code

- Trình duyệt Web: Google Chrome

4

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

1.5 Thông tin về các công cụ thục hiện

1.5.1 Phần mềm Visual Studio Codfe:

Visual Studio Code là gì?

- Visual Studio Code là một trình soạn thảo mã nguồn đa nền tảng phần

mềm chia sẻ Nó hỗ trợ nhiều ngôn ngữ lập trình và ngôn ngữ đánh dấu Người dùng có thể mở rộng chức năng của nó bằng các plugin , thường do cộng đồng xây dựng và duy trì theo giấy phép phần mềm miễn phí

- Chủ đề:

 Sublime Text chứa 23 chủ đề trực quan khác nhau, với tùy chọn tải xuống các chủ đề bổ sung và định cấu hình các chủ đề tùy chỉnh thông qua các plugin của bên thứ ba

 Tính năng bản đồ nhỏ hiển thị tổng quan thu gọn của toàn bộ tệp ở góc trên bên phải của màn hình Phần của tệp hiển thị trong ngăn trình chỉnh sửa chính được đánh dấu và nhấp hoặc kéo trong chế độ xem này sẽ cuộn trình chỉnh sửa qua tệp.

- Visual Studio Code có một số tính năng ngoài những tính năng này bao gồm:

 Tự động lưu, cố gắng ngăn người dùng mất công việc của họ

 Các phép gán phím có thể tùy chỉnh, một công cụ điều hướng cho phép người dùng gán các phím nóng theo lựa chọn của họ trong cả menu và thanh công cụ

 Tìm khi bạn nhập, bắt đầu tìm kiếm văn bản được nhập khi người dùng nhập mà không yêu cầu hộp thoại riêng

 Chức năng kiểm tra chính tả sửa khi bạn nhập

- Giao diện sử dụng:

Hình 1 Giao diện phần mềm Visual Studio Code

1.5.2 HTML

- HTML xây dựng cấu trúc cơ bản cho trang web

- HTML là viết tắt của cụm từ Hyper Text Markup Language tạm dịch là 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 thoongtin được trình bày trên World Wide Web

- HTML có thể được viết trên nhiều phần mềm, trình soạn thảo như:

notepad, wordpad, Visual Studio Code hay Sublime Text… và có định dạng html hoặc htm

6

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

Hình 2 Ngôn ngữ HTML

1.5.3 CSS

- CSS là viết tắt của Cascading Style Sheets được dung để miêu tả cách trình bày các tài liệu được viết bằng HTML

- Phương thức hoạt động của CSS là nó sẽ dựa vào các vùng chọn (class,

id,tag,…) để áp các thuộc tính vào vùng chọn đó

- Các thuộc tính CSS có thể viết lồng vào trong file HTML hoặc có thể viết

riêng bên ngoài với định dạng css và trích dẫn vào html

Hình 3 CSS

7

Báo cáo đồ án cơ sở 1

1.5.4 JAVASCRIPT

máy sever

số khả năng và sự điều khiển trên chức năng của một trang Web

của trang web

Hình 4 JAVASCRIPT

1.6 BỐ CỤC TRANG WEB

- Bố cục đơn giản, dễ nhìn, hiện đại, mang đến sự dễ nhìn cho người dùng

- Chức năng đầy đủ, dễ dàng thực hiện khi truy cập trang Web

- Thanh menu để ở vị trí dễ quan sát, phân loại danh mục rõ ràng và hợp lýgiúp người dùng thuận tiện hơn khi sử dụng

1.7 QUY MÔ TRANG WEB

- Trang Web gồm 4 trang chính và3 trang phụ

- Mỗi trang tuy bố cục khác nhau nhưng cùng trên một khuôn đặc trưng củatrang Web, mỗi trang đều có sự đặc biệt và điểm thu hút khác nhau

1.8 PHƯƠNG PHÁP NGHIÊN CỨU

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

- Cách thực hiện: Đề xuất các nhóm nhân viên khảo sát, thăm hỏi tại các cửahàng bánh tráng trên toàn Thành phố cũng như nhờ các shop tư vấn online tại cáctrang mạng xã hội hoặc các diễn đàn kinh doanh

1.8.2 PHƯƠNG PHÁP 2:

- Tên phương pháp: Tham khảo qua tài liệu, sách báo

- Cách thực hiện: Mượn từ thư viện về kinh doanh, báo chí liên quan đến kinhnghiệm trong khởi nghiệp từ kinh doanh online

1.8.3 PHƯƠNG PHÁP 3

- Tên phương pháp: Tham khảo qua Internet

- Cách thực hiện: Tìm kiếm các thông tin bổ ích liên quan đến các kinhnghiệm về bán bánh tráng online, tìm các mã nguồn trình duyệt

Tên Phương Pháp Ưu điểm Hạn chế Kết luận

Tham khảo thị trường,

các shop bán thức ăn

chó mèo offline và

online

- Khách quan, trung thực

- Tốn kém, mất nhiều thờigian

CHƯƠNG 2 TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN

2.1 MÔ PHỎNG HOẠT ĐỘNG CỦA TRANG WEB

- Bước 1 Sau khi truy cập vào trang web

sẽ hỗ trợ những chương trình khuyến mãi, hoặc sẽ giảm giá cho những lần mua tiếp theo, tham gia được các mini game mà shop tổ chức Sẽ dễ dàng trở thành fan cứng của shop để nhận những món quà đặt biệt có một không hai mà ít các shop nào có

Hình 5 Đăng nhập

10

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

Hình 6 Đăng ký

- Bước 2 Người dùng có thể bắt đầu trải nghiệm trang web

web

Được tư vấn xuất xứ, cũng như là mong muốn của mình để có thể chọn ra cho mình một

Hình 8 Giao diện trang chủTrang chủ của website: Trang chủ bao gồm tất cả những demo của các phần còn lại Bao gồm thông tin giới thiệu và hình ảnh giới thiệu sơ lượt về các sản phẩm, các mục nổi bật được nhiều người quan tâm nhất Trang chủ giúp người dùng xem được tổng quan của trang web.

12

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

2.2.2 GIAO DIỆN TRANG CỬA HÀNG

Hình 9 Giao diện Thông tin cửa hàng

Hình 10 Các sản phẩm của cửa hàng và giá bán

13

Báo cáo đồ án cơ sở 1

Hình 11 Giao diện giỏ hàng

Hình 12 Giao diện thanh toán

14

Báo cáo đồ án cơ sở 1

Khoa Khoa học máy tính GVHD: ThS Trần Thanh Liêm

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

Để xây dựng một bài phân tích và thiết kế website, việc đầu tiên cần làm trướchết đó là phải xây dựng một trang web sát với thực tế Khảo sát hệ thống là một côngviệc hết sức quan trọng, nó giúp thu thập giữ liệu một cách chính xác và chi tiết để tiếptục xây dựng các bước tiếp theo

Thiết kế giao diện với màu sắc và bố cục hài hòa tạo cho người sử dụng cảmthấy thoải mái khi tiếp xúc Đồng thời, các tiện ích hay đem lại sự hiệu quả hơn trongkhi làm việc Từ đó, hệ thống góp phần không nhỏ thúc đẩy quá trình thu hút kháchhàng và tạp ra lợi nhuận, giúp cho nhà sản xuất có được lợi nhuận cao nhất

Trên đây là một bài đồ án cơ sở 1 hoàn chỉnh về đề tài thiết kế website bánhàng thức ăn chó mèo Pet Food Trong quá trình là đồ án, chúng em đã đạt được một

- Về bản thân chúng em, chúng em đã học được rất nhiều qua quá trình làm đồ

án cơ sở 1 lần này như kĩ năng làm việc nhóm, kĩ năng soạn thảo văn bản, thiết kếwebsite, thiết kế powerpoint, …

Tuy nhiên, do bị hạn chế về thời gian và còn thiếu kinh nghiệm trong quá trìnhthực hiện đồ án nên vẫn còn nhiều thiếu sót Chương trình có tính chuyên nghiệp chưacao, chưa giải quyết dứt điểm được các vấn đề nảy sinh trong quá trình quản lý