BÀI TẬP LỚN MÔN THIẾT KẾ WEB ĐỀ TÀI THIẾT KẾ WEBSITE KINH DOANH RAU, CỦ, QUẢ CHO CỬA HÀNG RAU SẠCH

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.75 MB, 34 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

<b>KHOA CÔNG NGHỆ THÔNG TIN</b>

<b>---BÀI TẬP LỚNMÔN THIẾT KẾ WEB</b>

<b>ĐỀ TÀI: THIẾT KẾ WEBSITE KINH DOANH RAU, CỦ,QUẢ CHO CỬA HÀNG RAU SẠCH</b>

<b>Sinh viên thực hiện: Nguyễn Văn Hiếu - 2210A02</b>

<i><b>Giảng viên hướng dẫn: thS. Nguyễn Thị Quỳnh Như</b></i>

<small>Hà Nội, năm 2023</small> 1

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>Mục lục</b>

<b><small>1.1.Giới Thiệu Chung...3</small></b>

<small>1.2.1. Chủ sở hữu của website:...3</small>

<small>1.2.2. Mục đích xây dựng website:...3</small>

<small>1.2.3. Đối tượng hướng tới:...4</small>

<small>1.2.4. Các chức năng mà website cung cấp:...4</small>

<small>2.2.2. Bố cục layout trang con liên hệ:...9</small>

<small>2.2.3. Bố cục layout trang con đăng nhập:...10</small>

<small>2.2.4. Bố cục trang con đăng ký:...11</small>

<small>2.2.5. Bố cục trang con giỏ hàng:...12</small>

<small>2.2.6. Bố cục trang con danh mục sản phẩm:...13</small>

<small>2.2.7. Bố cục trang con chi tiết sản phẩm:...14</small>

<small>2.3.9. Trang danh mục - Trái cây:...24</small>

<small>2.3.10. Trang danh mục - sơ chế:...25</small>

<small>2.3.11. Trang danh mục - Giảm giá:...26</small>

<small>2.3.12. Trang chi tiết sản phẩm - Cải bẹ xanh:...27</small>

<small>2.3.13. Trang chi tiết sản phẩm sau khi cho vào giỏ hàng:...28</small>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>1.1.Giới Thiệu Chung</b>

<i><b>1.1.1. Tên đề tài:</b></i> Thiết kế website kinh doanh rau, củ, quả cho cửa hàng Rau Củ

 Kinh doanh rau, củ, quả là một hoạt động kinh doanh quan trọng trong ngành nông nghiệp. Việc cung cấp những sản phẩm tươi ngon này không chỉ đáp ứng nhu cầu dinh dưỡng mà còn hướng tới sự tươi mới và sức khỏe của khách hàng. Bán rau củ cũng đóng góp vào việc khuyến khích một lối sống lành mạnh và bảo vệ mơi trường.

 Với sự phát triển của công nghệ, việc sử dụng website để bán rau củ trở thành một cách tiếp cận hiệu quả và tiện lợi. Qua đó, khách hàng có thể dễ dàng lựa chọn và mua sắm các loại rau củ chất lượng và an tồn ngay tại nhà.

 Vì vậy, đề tài: “Thiết kế website kinh doanh rau, củ, quả cho cửa hàng Rau Sạch” nhằm mang đến một website thân thiện với người dùng, đáp ứng được nhu cầu mua hàng một cách đơn giản và thuận lợi.

<i><b>1.2.1. Chủ sở hữu của website:</b></i> Cửa hàng Rau Sạch.

<i><b>1.2.2. Mục đích xây dựng website: </b></i>

 Mở rộng khách hàng: Cho phép tiếp cận với khách hàng tiềm năng trên phạm vi rộng hơn cửa hàng vật lý.

 Tiếp cận 24/7: Cho phép khách hàng truy cập và mua hàng bất kỳ lúc nào kể cả khi cửa hàng khơng hoạt động (chỉ cần trong kho cịn hàng).  Tăng khả năng tiếp thị: Trang web cho phép cửa hàng áp dụng các

chiến lược tiếp thị hiệu quả như: quảng cáo trực tuyến, email maketing, quảng cáo trên mạng xã hội, ...

 Xây dựng niềm tin, uy tín: Một trang web chun nghiệp có thể tạo dựng hình ảnh tích cực về cửa hàng bằng cách cung cấp thông tin chi 3

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

tiết về sản phẩm, đánh giá từ khách hàng, chính sách giao hàng. Từ đó xây dựng niềm tin, uy tín trong mắt khách hàng.

<i><b>1.2.3. Đối tượng hướng tới:</b></i>

 Lứa tuổi: từ 25 đến 45 tuổi, đây là nhóm người thường có thể có thu nhập ổn định, quan tâm đến chất lượng cuộc sống và sức khỏe, và có xu hướng mua sắm trực tuyến.

 Những người quan tâm đến chế độ ăn uống lành mạnh: Đối tượng khách hàng bao gồm cả những người quan tâm đến chế độ ăn uống lành mạnh và muốn sử dụng rau củ tươi trong khẩu phần ăn hàng ngày. Họ có thể có một lối sống tích cực, chăm chỉ tập thể dục và quan tâm đến việc chăm sóc sức khỏe cá nhân.

 Gia đình và người chăm sóc trẻ em: Các gia đình và những người chăm sóc trẻ em có thể là một đối tượng quan trọng khác. Họ có nhu cầu mua rau củ để cung cấp cho các thành viên trong gia đình một chế độ ăn uống lành mạnh và cung cấp dinh dưỡng cho trẻ nhỏ.

 Ngồi ra, đối tượng khách hàng cịn có thể là những người có cơng việc bận rộn, họ khơng có thời gian để mua sắm ở cửa hàng truyền thống vì vậy website việc mua sắm trực tuyến sẽ tốt hơn với chính họ.

<i><b>1.2.4. Các chức năng mà website cung cấp:</b></i>

 Danh mục sản phẩm: Hiển thị menu bao gồm các sản phẩm như: rau, củ, nấm, trái cây, các sản phẩm đã qua chế biến và các sản phẩm đang được giảm giá.

 Thông tin sản phẩm: Cung cấp thông tin chi tiết về sản phẩm bao gồm nguồn gốc, giá cả, hình ảnh, mơ tả,...

 Chức năng tìm kiếm: Giúp khách hàng có thể dễ dàng tìm kiếm các sản phẩm thơng qua từ khoá.

 Giỏ hàng và thanh toán: Cho phép khách hàng thêm sản phẩm vào giỏ hàng và thanh toán trực tuyến thơng qua các phương thức thanh tốn như thẻ ATM, ZaloPay hoặc thanh toán trực tiếp khi nhận hàng.  Đánh giá: Cho phép khách hàng đánh giá và nhận xét về sản phẩm

cũng như tham khảo được đánh giá của những người mua hàng khác. 4

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

 Tài khoản và thông báo: Cho phép khách hàng đăng ký/đăng nhập tài khoản khi sử dụng website và thông báo qua tài khoản cho họ biết về các chương trình khuyến mãi của cửa hàng, các thay đổi trong quá trình giao hàng,...

 Liên hệ: Cung cấp các phương thức liên hệ từ trực tiếp đến trực tuyến để có thể giải đáp thắc mắc, xử lý yêu cầu hoặc giải quyết các vấn đề cho khách hàng một cách nhanh chóng.

 Tích hợp mạng xã hội: Tạo liên kết với các mạng xã hội để khách hàng có thể chia sẻ thông tin về sản phẩm và trải nghiệm mua sắm trên các nền tảng xã hội khác.

 Giao diện website tươi mát, để phù hợp với mục đích bán rau, củ, quả.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>II. Nội Dung:</b>

 Màu xanh lá cây (#008800): Màu xanh lá cây thường được liên kết với tự nhiên, sự tươi mát và sức sống. Đây là một sự lựa chọn phổ biến cho các trang web liên quan đến rau củ và thực phẩm.

 Màu đỏ hồng (#E50055): màu đỏ hồng có thể thể hiện sự quyến rũ, tươi mới và độc đáo. Chúng có thể được sử dụng làm điểm nhấn cho các chi tiết đặc biệt hoặc để tạo sự cân đối trong một sự kết hợp màu sắc tổng thể.

 Phương pháp phối màu: Phối màu tương phản.

 Lý do chọn phương pháp phối màu tương phản: Sử dụng phương pháp phối màu tương phản nó vì tạo ra sự tương phản mạnh mẽ giữa các màu sắc, tạo ra sự nổi bật và thu hút người dùng.

<small>Ø</small> Dễ dàng điều hướng người dùng đến các phần quan trọng của trang web như giá, sản phẩm, hay điều hướng, ...

Ø Tạo ra sự cân đối và hài hòa bằng cách sử dụng màu sắc đối lập nhau, khiến giao diện web hấp dẫn và trực quan.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<i><b>2.1.4. Sơ đồ liên kết website:</b></i>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>2.2. Bố cục layout website:</b>

<i><b>2.2.1. Bố cục layout trang chủ: </b></i>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<i><b>2.2.2. Bố cục layout trang con liên hệ: </b></i>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<i><b>2.2.3. Bố cục layout trang con đăng nhập: </b></i>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<i><b>2.2.4. Bố cục trang con đăng ký: </b></i>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<i><b>2.2.5. Bố cục trang con giỏ hàng:</b></i>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<i><b>2.2.6. Bố cục trang con danh mục sản phẩm:</b></i>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<i><b>2.2.7. Bố cục trang con chi tiết sản phẩm: </b></i>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<i><b>2.2.8. Bố cục trang con đặt hàng:</b></i>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>2.3. Giao diện chính và các trang con được xây dựng: </b>

<i><b>2.3.1. Trang chủ:</b></i>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<i><b>2.3.2. Trang liên hệ:</b></i>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<i><b>2.3.3. Trang đăng ký:</b></i>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<i><b>2.3.4. Trang đăng nhập: </b></i>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<i><b>2.3.5. Trang giỏ hàng:</b></i>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<i><b>2.3.6. Trang danh mục - Rau:</b></i>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<i><b>2.3.7. Trang danh mục - Củ:</b></i>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<i><b>2.3.8. Trang danh mục - Nấm:</b></i>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<i><b>2.3.9. Trang danh mục - Trái cây:</b></i>

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<i><b>2.3.10. Trang danh mục - sơ chế: </b></i>

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<i><b>2.3.11. Trang danh mục - Giảm giá:</b></i>

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<i><b>2.3.12. Trang chi tiết sản phẩm - Cải bẹ xanh:</b></i>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<i><b>2.3.13. Trang chi tiết sản phẩm sau khi cho vào giỏ hàng:</b></i>

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<i><b>2.3.14. Trang con đặt hàng:</b></i>

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

 Thiết kế được một website thương mại điện tử tương đối hồn thiện. Website đã có hầu hết các chức năng như: đăng nhập, đăng ký, tìm kiếm sản phẩm, đánh giá, thơng báo, ...

 Giao diện sử dụng đơn giản nhưng không đơn điệu, các nút điều hướng được thiết kế theo hướng phổ thông phù hợp với đại đa số người dùng, giao diện đơn giản dễ sử dụng.

<b>3.2. Những vấn đề chưa đạt được so với thiết kế ban đầu: </b>

 Phần banner chưa có được những hiệu ứng chuyển động và số lượng banner cịn hạn chế vì vậy không tạo được những slideshow như ý tưởng đề ra.

 Trang chủ chưa tích hợp sẵn nút mua hàng mà cần phải vào chi tiết sản phẩm mới có thể được sản phẩm.

<b>3.3. Hướng phát triển: </b>

 Tích hợp chức năng lọc cho thanh tìm kiếm, để người dùng có thể tìm kiếm sản phẩm dựa trên các tiêu chí như giá, xuất xứ, điểm dinh dưỡng, ...

 Cung cấp nhiều nội dung hữu ích về rau, củ, quả (như công thức nấu ăn, bài viết dinh dưỡng, hướng dẫn chọn và bảo quản rau củ,... )

 Tích hợp chức năng giao hàng định kỳ: Khách hàng có thể đăng ký để nhận rau củ quả hàng tháng hoặc hàng tuần với một lịch trình đáng tin cậy, giúp tạo sự thuận tiện và duy trì mối quan hệ lâu dài với khách hàng.

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

<b>IV. Tài Liệu Tham Khảo:</b>

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<b><small>TIÊU CHÍ ĐÁNH GIÁ CHUN MƠN BTL Mơn học: Thiết kế web </small></b>

<small>@ Yêu cầu đọc hiểu nguyên tắc thiết kế và trình bày ý tưởng thiết kế và phác thảo về đề tài đã lựa chọn (Trình bày trong báo cáo). Đề cương phải nêu rõ ý tưởng thiết kế về các nội dung sau : </small>

<small>- Ý tưởng và phác thảo bố cục layout của trang chủ - Ý tưởng và phác thảo bố cục layout của trang con - Ý tưởng và phác thảo các thành phần trên trang </small>

<small>web (Logo, hệ thống điều hướng, quảng cáo…)</small>

<b><small>Báo cáo đề cương không đúng quy định trình bày trừ </small></b>

<small>@ Sinh viên trình diễn sản phẩm. Sản phẩm phải đáp ứng được các yêu cầu sau : </small>

<small>- Trang trí đẹp, màu sắc hài hồ </small>

<small>- Thống nhất ngơn ngữ trên các trang web </small>

<small>- Nội dung thông tin: chính xác, phong phú, phù hợp với chủ đề của đề tài </small>

<small>- Nguyên lý thiết kế (màu sắc, bố cục, tỉ lệ…)- Hiểu biết về chủ đề đang trình bày</small>

<small>- Khả năng sử dụng công cụ để thể hiện thiết kế trực tiếp trên máy tính.</small>

<small>- </small> <i><small>Sinh viên trình diễn sản phẩm, trả lời câu hỏi, thực hiện các yêu cầu về thiết kế trực tiếp trên </small></i>

</div>