Đồ án cơ sở 2 Đề tài xây dựng website cung cấp thực phẩm

MỞ ĐẦUVới hiện trạng rau quả hiện nay đang bị nhiễm bẩn với đủ các loại hóa chất và dư lượng thuốc bảo vệ thực vật vượt quá mức cho phép nhiều lần, cũng như việc rauxanh được người nông

ĐẠI HỌC ĐÀ NẴNGTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

VÀ TRUYỀN THÔNG VIỆT - HÀN

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

ĐẠI HỌC ĐÀ NẴNGTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

VÀ TRUYỀN THÔNG VIỆT - HÀN

ĐỒ ÁN CƠ SỞ 2

ĐỀ TÀI: XÂY DỰNG WEBSITE CUNG CẤP

THỰC PHẨM

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

MỞ ĐẦU

Với hiện trạng rau quả hiện nay đang bị nhiễm bẩn với đủ các loại hóa chất và

dư lượng thuốc bảo vệ thực vật vượt quá mức cho phép nhiều lần, cũng như việc rauxanh được người nông dân tưới bằng nguồn nước thải ô nhiễm, thời gian qua không ítngười nội trợ lo lắng cho sức khỏe của các thành viên trong đình khi phải ăn raunhiểm bẩn

Mọi người có xu hướng thay đổi thói quen chọn lựa thực phẩm, từ rau xanhmướt sang các loại rau trông xấu mã và già để đảm bảo an toàn hơn Ngoài ra, mộtlượng không nhỏ người dân thực hiện tự trồng rau sạch tại nhà để dùng Việc trồng rautại nhà không những cung cấp được lượng rau đủ dùng trong gia đình mà còn mang lạinhững thú vui tao nhã cho người trồng, thêm nữa khi người dân có sẵn đất hoặc trangtrại, họ sẽ trồng ra số lượng lớn và có thể cung cấp cho các đại lý…

Vegefoods được tạo ra với mô hình “từ trang trại tới bàn ăn” đầu tiên tại ViệtNam Với nhiều trang trại tại Đà Nẵng, Quảng Nam,… chúng tôi cung cấp sản lượngrau lớn trong ngày tại khu vực Đà Nẵng – Quảng Nam, cung cấp sỉ và lẻ cho các cửahàng trên địa bàn thành phố

Điểm nổi bật của Vegefoods là dịch vụ tự lên sản phẩm cho khách tùy theo nhucầu của khách hàng, mỗi ngày Vegefoods đều giao hàng kịp thời cho quý khách lênnhững món ăn ngon cho gia đình

Để đáp ứng nhu cầu ngày càng lớn việc tự trồng rau sạch tại nhà,website Vegefoods đã ra đời Chúng tôi sẽ cung cấp cho bạn những sản phẩm chấtlượng từ các trang trại Gồm đa dạng các loại sản phẩm rau, củ, quả thoả mái chokhách hàng lựa chọn

Nói về Vegefoods, bạn sẽ trải nghiệm trang web với màu xanh lá cây chủ đạo,

nó được định hướng và là điểm nổi bật của trang web Đến với chúng tôi, bạn sẽ trảinghiệm những mặt hàng với đa dạng mẫu mã, được phân chia theo từng loại Đặc biệt,luôn có những mặt hàng được giảm giá Giúp khách hàng tiết kiệm được chi phí cũngnhư thời gian chỉ bằng một cái nháy chuột

LỜI CẢM ƠN

Để dự án này đạt kết quả tốt đẹp, chúng em đã nhận được sự hỗ trợ, giúp đỡ củathầy cô Với tình cảm sâu sắc, chân thành, cho phép chúng em được bày tỏ lòng biết ơnsâu sắc đến tất cả quý thầy cô đã tạo điều kiện giúp đỡ trong quá trình học tập vànghiên cứu và phát triển đề tài

Trước hết chúng em xin gửi tới các thầy cô Trường Đại học Công nghệ thôngtin và Truyền thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâusắc Với sự quan tâm, dạy dỗ, chỉ bảo tận tình chu đáo của các giảng viên đã truyền tảicác kĩ năng cần thiết, đến nay chúng đã có thể hoàn thành Đồ Án Cơ Sở 2 này Đặc biệt chúng em xin gửi lời cảm ơn chân thành nhất tới thầy giáo –ThS.Nguyễn Văn Bình đã quan tâm giúp đỡ, giúp đỡ tận tình chúng em hoàn thành tốt

đồ án này trong thời gian qua

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, đồ án này không thểtránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ýkiến của các thầy cô để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụtốt hơn công tác thực tế sau này

Chúng em xin chân thành cảm ơn!

NHẬN XÉT

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

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

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

Chương 1: Giới thiệu 6

1.1 Tổng quan 6

1.2 Một số yêu cầu của Website 6

1.3 Xác định đối tượng người dùng 6

1.4 Cấu trúc đồ án 6

Chương 2: Phân tích thiết kế hệ thống 8

2.1 Ý tưởng của website 8

2.2 Khảo sát hiện trạng 8

2.3 Mô hình thiết kế hệ thống 9

2.4 Chức năng 12

2.5 Thiết kế chi tiết 12

Chương 3: Triển khai xây dựng…… 14

3.1 Login - Register 14

3.2 Home 14

3.3 Shop 15

3.4 Product 15

3.5 Cart 16

3.6 Checkout 16

3.7 About 17

3.8 Contact 17

3.9 Admin 17

Chương 4: Kết luận và Hướng phát triển 21

4.1 Kết luận 21

4.2 Hướng phát triển và dự đoán rủi ro 21

Danh mục tài liệu tham khảo 22

Chương 1 GIỚI THIỆU

1.1 Tổng quan:

Thật dễ dàng để tìm mua các loại rau củ quả trên thị trường, được bày bán ởchợ, siêu thị, cửa hàng ở khắp mọi nơi Vì quá phong phú về mẫu mã đã làm chongười tiêu dùng cảm thấy bất an về nguồn gốc xuất xứ Đồng thời với những

“tuyệt chiêu” bảo quản như hiện nay thì chuyển hướng dùng rau củ quả sạch - antoàn có chứng nhận theo tiêu chuẩn được đông đảo người tiêu dùng chọn lựa…Trên thị trường có đa dạng chủng loại rau củ quả, có khi một loại rau củ quảnhưng lại có xuất xứ từ nhiều nơi khác nhau Người tiêu dùng chỉ biết phân biệtqua lời giới thiệu của người bán hoặc tin tưởng mua từ những địa chỉ cung cấp uytín như siêu thị, cửa hàng thực phẩm Chính vì vậy, tập trung vào chất lượng sảnphẩm nhằm xây dựng lòng tin về thương hiệu đối với khách hàng là hướng đi màngười trồng cũng như cửa hàng bán rau củ quả sạch nhắm đến

Với mục tiêu cung cấp đến người tiêu dùng những sản phẩm rau củ quả chấtlượng, có nguồn gốc rõ ràng với giá cả hợp lý Những sản phẩm được bán trênVegefoods là những thực phẩm đã qua kiểm duyệt an toàn vệ sinh thực phẩm, bảođảm thân thiện môi trường và mang lại giá trị dinh dưỡng cao cho người tiêudùng Chúng tôi chuyên kinh doanh rau củ quả các loại với chất lượng và giá cảhợp lý nhất Với quy trình sạch không dùng thuốc kích thích, hóa chất bảo quản.Phục vụ nhu cầu rau củ quả sạch của khách hàng tại Đà Nẵng – Quảng Nam vàtrên toàn quốc

Xét về các yếu tố, một phần nào đó người tiêu dùng lại thích mua hàng trựctuyến Có lẽ vì nó rất đa dạng, thuận tiện, giá cả phải chăng hơn,… Chính vì thế,chúng tôi đã lên một cuộc khảo sát nhỏ để kiểm chứng điều này! Thật thú vị, khimọi người lại muốn có một trang web riêng dành cho rau củ Thấu hiểu được điều

đó, chúng tôi đã tạo ra một trang web đảm bảo những chức năng mà khách hàngmong muốn Sau đây sẽ là một số yêu cầu của Website!

1.2 Một số yêu cầu của Website:

Giao diện đẹp, dễ nhìn, tập trung vào nội dung, sản phẩm cần truyền tải,không quá cầu kỳ Dễ sử dụng, sắp xếp và liên kết các trang thành phần một cáchlogic, rành mạch

1.3 Phương pháp, kết quả:

Tìm hiểu, học tập các ngôn ngữ cần thiết để ứng dụng vào thiết kế FrontEnd

và BackEnd website: HTML, Bootstrap, CSS, JavaScript, PHP,…

Thu thập, chọn lọc, phân tích tổng hợp dữ liệu và thông tin từ nhiều nguồnkhác nhau để có thể phát triển một website riêng cho mình

1.4 Cấu trúc đồ án:

Ngoài phần Mở đầu, nội dung đồ án gồm 4 chương chính:

 Chương 1 Giới thiệu: Giới thiệu tổng quan về phương pháp và cấu trúc đồán.

 Chương 2 Phân tích thiết kế hệ thống: Trình bày các chức năng và các bảnđồ

 Chương 3 Triển khai xây dựng website: Trình bày chi tiết các giao diện vàchức năng của Website

 Chương 4 Kết luận và hướng phát triển: Tổng kết đề tài và đưa ra phươnghướng phát triển trong tương lai

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Ý tưởng của website:

Với hiện trạng rau quả hiện nay đang bị nhiễm bẩn với đủ các loại hóa chất

và dư lượng thuốc bảo vệ thực vật vượt quá mức cho phép nhiều lần, cũng nhưviệc rau xanh được người nông dân tưới bằng nguồn nước thải ô nhiễm, thời gianqua không ít người nội trợ lo lắng cho sức khỏe của các thành viên trong đình khiphải ăn rau nhiễm bẩn Mọi người có xu hướng thay đổi thói quen chọn lựa thựcphẩm, từ rau xanh mướt sang các loại rau trông xấu mã và già để đảm bảo an toànhơn Việc trồng rau tại nhà không những cung cấp được lượng rau đủ dùng tronggia đình mà còn mang lại những thú vui tao nhã cho người trồng, thêm nữa khingười dân có sẵn đất hoặc trang trại, họ sẽ trồng ra số lượng lớn và có thể cungcấp cho các đại lý… Và vì thế chúng tôi tạo ra trang web này để thu mua các sảnphẩm sạch từ những người nông dân, trang trại và bán ra thị trường với mức giáphù hợp với nhu cầu của người mua trong đợt dịch khó khăn này

2.2 Khảo sát hiện trạng:

2.2.1 Khảo sát & Phân tích:

- Manafood:

- Organica:

Tên trang web Phân tích

Manafood - Giao diện tương đối đẹp

- Là một trang siêu thị thu nhỏ Nênbuôn bán nhiều hạng mục sản phẩm

- Đầy đủ các tính năng cần có của mộttrang web thương mại điện tử

- Tìm kiếm sản phẩm đa dạng: Theogiá, theo loại,…

- Có mục tin tức, mẹo vặt dễ tiếp cậnngười dùng hơn

Organica - Giao diện rất đẹp

- Vẫn là một trang siêu thị thu nhỏ.Nên buôn bán nhiều hạng mục sảnphẩm

- Sở hữu các chuỗi cửa hàng riêng

- Chưa thấy phần bình luận hay đánhgiá sản phẩm

2.2.2 Rút ra bài học:

- Giao diện, bố cục của Website phải trình bày rõ ràng, thiết kế phù hợp với ngườidùng

- Chỉ tập trung buôn bán rau, củ, quả tươi sạch

- Đầy đủ các tính năng cần có của một trang web thương mại điện tử

- Sẽ có bảng giảm giá trong ngày cho thực phẩm nổi bật…

2.3 Mô hình thiết kế hệ thống:

2.3.1 Biểu đồ ca sử dụng:

2.3.2 Biểu đồ lớp:

2.3.3 Biểu đồ hoạt động:

2.3.4 Biểu đồ tuần tự:

2.5 Thiết kế chi tiết:

Ðể tạo ra một Website có chất lượng đòi hỏi có sự nghiên cứu kỹ về mọilĩnh vực, từ nghệ thuật đến cấu trúc, xác định đối tượng thành phần, phải biếtnhững gì cần làm, những thông tin nào cần có trong website Và để đưa tất cả các

ý tưởng đó vào việc xây dựng một trang web nhóm tôi đã làm theo những bướcsau đây:

Bước 1: Giai đoạn định hướng:

- Mục đích cần đạt tới của website là bắt mắt, dễ dàng sử dụng, đầy đủchức năng của một trang thương mại điện tử đối với nhiều đối tượngkhách hàng.

- Để làm được điều đó, chúng tôi đã tạo một cuộc khảo sát nhỏ Hướngtới các khách hàng điều họ cần là gì? Và từ đó xây dựng, hoàn thiện dự

án một cách chỉnh chu nhất

Bước 2: Sau khi xác định được các điểm trên, tiếp theo:

- Dự định các chức năng và chuẩn bị thông tin cho website Lên ý tưởng

về cấu trúc của website, sắp xếp và lựa chọn các mục, các tiêu đề, để

có thể tìm kiếm thông tin hữu ích một cách dễ dàng, không lãng phíthời gian của người sử dụng

- Chọn các từ khoá thích hợp để thuận tiện cho việc tìm kiếm và sử dụngcác dịch vụ tìm kiếm

Bước 3:

Xây dựng bố cục thích hợp, chỉnh sửa về màu sắc và kích cỡ cho phù hợp

để hướng đến đối tượng là khách hàng

Bước 4:

Sử dụng HTML, CSS kết hợp với Bootstrap, JavaScrips để tạo ra bộkhung trang web Sau đó sử dụng PHP, SQL, để truy vấn, lưu trữ dữ liệu từDatabase và tải lên Frontend

Một điều quan trọng là thông qua các công cụ tìm kiếm tiện ích như(Lycos, AltaVista, Google ) để đảm bảo rằng website phải thật nổi bật Ðây làviệc tốn rất nhiều thời gian.

Đặc biệt là trang web sẽ được cập nhật hàng ngày để giúp khách hàng nắmbắt được các thông tin về các sản phẩm của cửa hàng một cách chính xác nhất

Chương 3 TRIỂN KHAI XÂY DỰNG

3.1 Login - Register:

Trang đăng nhập – đăng ký đơn giản, dễ nhìn Màu sắc chủ đạo đen vàxanh Nó phù hợp với website thương mại điện tử chuyên cung cấp thực phẩmtươi sạch ở thời điểm hiện tại

3.2 Home:

Trang chủ với giao diện bắt mắt, đánh vào mắt chúng ta là những rau củquả phong phú đa dạng, giúp người dùng dễ dàng nhìn thấy các thông tin cần

thiết Phía dưới chúng ta sẽ thấy từng loại sản phẩm: “Rau quả, hoa củ,…” chẳnghạn Tiếp đó là đến những sản phẩm nổi bật và những ưu đãi chỉ có trong ngày…

3.3 Shop:

Vẫn là lối sắp xếp đơn giản nhưng hiển thị rõ các thông tin đầy đủ đểkhách hàng tham khảo Người dùng có thể lướt xem qua phân trang hoặc tìmkiếm theo từng loại sản phẩm Phía dưới là tìm kiếm theo tên sản phẩm, giúpkhách hàng có thể tìm kiếm sản phẩm của mình một cách nhanh gọn nhất

3.4 Product:

Đây là trang web hiển thị rõ các thông tin đầy đủ để khách hàng lựa chọn

và mua sản phẩm của mình Chúng ta có thể viết bình luận phía dưới để mọingười tham khảo sản phẩm này nhé!

3.5 Cart:

Giỏ hàng thiết kế vẫn lấy theo tông màu xanh chủ đạo của Vegefoods.Thao tác đơn giản, bố cục rõ ràng Nếu bạn chưa đăng nhập thì phần thông tin tàikhoản sẽ không hiển thông tin cho bạn…

3.6 Checkout:

Kiểm tra thông tin tài khoản và thực hiện thanh toán Nếu khách hàng chưađăng nhập vào tài khoản, nó sẽ dẫn đến trang “Đăng nhập – Đăng ký”!

Hiển thị đầy đủ các thông tin của sản phẩm Quản trị có thể tìm kiếm, sửa hoặcxóa sản phẩm tùy thích

3.9.2 Thống kê:

Gồm có thống kê chi tiết, thống kê sản phẩm bán ra và thống kê theo danh thu.Quản trị có thể tra cứu đầy đủ thông tin bằng một cách nào đó tối ưu nhất.3.9.3 Thêm:

Thêm các sản phẩm và danh mục sản phẩm tùy thích!

3.9.4 Phân quyền:

Quản trị viện có thể cấp quyền quản trị cho tài khoản mà mình muốn Và thựchiện các thao tác khác!

Chương 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN4.1 Kết luận:

Sau một thời gian nghiên cứu và xây dựng website, nhóm đã đạt đượcnhững kết quả sau:

- Xây dựng được website thương mại điện tử Vegefoods Cung cấp thựcphẩm tiêu dùng cho tất cả mọi người nói chung và những người nội trợ nói riêng

- Nâng cao khả năng tự học và tự nghiên cứu

- Ứng dụng thân thiện, thuận tiện cho người dùng

- Giao diện dễ sử dụng

- Hiểu rõ hơn về phân tích thiết kế hệ thống

4.2 Hướng phát triển và dự đoán rủi ro:

- Thường xuyên kiểm tra, sửa chữa, nếu phát hiện vấn đề phải giải quyếtnhanh chóng

- Cập nhật nhiều tính năng hỗ trợ người dùng

- Tìm hiểu sâu hơn về cách ứng dụng các ngôn ngữ, công cụ thiết kế website

để nâng cao mức độ hoàn thiện của website

- Dự án là xây dựng website cung cấp sản phẩm cho khách hàng online nênyếu tố mặt thông tin ảnh hưởng rất lớn đến sự thành công của dự án Vì là trangweb mới mở nên việc tránh khỏi rủi ro là không thể

- Các rủi ro về lượng thông tin:

+ Chất lượng thông tin không đúng, ảnh hưởng đến uy tín của web đốivới khách hàng

+ Số lượng thông tin của dịch vụ chăm sóc khách hàng không đủ đápứng nhu cầu của khách hàng

- Các rủi ro khác: Website không thu hút được khách hàng

- Với việc thành lập trang web này, chúng tôi mong muốn mang lại ứng dụngtiện ích cho người dùng và trở thành điểm truy cập hàng đầu, trở thành đối thủmạnh trong thị trường cung cấp rau, củ, quả sạch từ các nông trại cũng như đốivới các trang web cung cấp sản phẩm khác

DANH MỤC TÀI LIỆU THAM KHẢO

1 Tham khảo Fanpage tại: Vegefoods | Facebook

2 Tham khảo tài liệu thiết kế web tại: W3Schools Online Web Tutorials

3 Tham khảo tài liệu Bootstrap tại: Bootstrap · The most popular HTML,CSS, and JS library in the world (getbootstrap.com)

4 Tham khảo một số hình ảnh tại: Kho ảnh miễn phí · Pexels