Môn học thiết kế web Đề tài trang web bán trái cây

Đề tải của nhóm em là tập trung vào quá trình tìm kiếm và nhập các loại trái cây từ những nơi có nguồn góc trồng trọt trái cây tươi, sạch, đảm bảo chất lượng đề nhập, trải qua các cuộc t

TRUONG DAI HOC NGUYEN TAT THANH

KHOA QUAN TRI KINH DOANH

NGUVEN TAT THANE MON HOC: THIET KE WEB

DE TAI: TRANG WEB BAN TRAI CAY

Giảng viên: Huỳnh Thị Khánh Duyên

Môn học: Thiết kế web

Lớp: 22DMKID

Học kỳ: 4

Năm học: 2023

TRUONG DAI HOC NGUYEN TAT THÀNH

KHOA QUAN TRI KINH DOANH

NGUVEN TAT THANE BAO CAO TIEU LUAN

DE TAI: TRANG WEB BAN TRAI CAY

Giảng viên: Huỳnh Thị Khánh Duyên

Môn học: Thiết kế web

ĐẠI HỌC NGUYÊN TẮT THÀNH KY THI KET THUC HQC PHAN

PHIEU CHAM THỊ TIỂU LUẬN/BÁO CAO

Môn thị: 0 2c 21211011911 11011111 110111001181 re, Lớp học phần: - se cà

Sinh viên thực hiện 1 Phạm Nguyễn Minh Mẫn Tham gia đóng góp: 100%

2 Đoàn Duy Cường Tham gia đóng góp: 100%

3.Huỳnh Thiên Phúc Tham gia đóng góp: 100%

¡017 —= Phòng thi: c2

Đề tai tiêu luận/báo cáo của sinh viên :Trang Web bán trái cây

Phân đánh giả của giảng viên (căn cứ trên thang rubrics của môn học):

Đánh giá của GV CDRHP) đa được

LỜI MỞ ĐẦU

Trong lĩnh vực công nghệ sinh học đang phát triên trong nước nói riêng vả ngoải nước nói chung, ta có thê thấy có muôn vàn những nghiên cứu đề áp dụng trong ngành trồng trọt cây ăn quả, đem lại rất nhiều những lợi ích và giảm khá nhiều chi phí phải bỏ ra, mặt lợi là thế nhưng cũng có rất nhiều những mặt hại do một số những người có tham vọng lớn, vì lợi ích cá nhân

họ mặc kệ các tác hại do những loại hoá chất cắm đem lai Dé đây nhanh qua trình thu hoạch

họ luôn cấp cho cây những loại thuốc tăng trưởng, thuốc kích thích khi người tiêu dùng không biết và lỡ sử dụng họ bị những loại trái cây đó làm ảnh hưởng nghiêm trọng đến sức khoẻ Vì thế “traicaysach” được ra đời để làm cầu nói giữa những nơi có trái cây có kiểm định

về an toàn thực phẩm và chất lượng với người tiêu dùng

Đề tải của nhóm em là tập trung vào quá trình tìm kiếm và nhập các loại trái cây từ những nơi

có nguồn góc trồng trọt trái cây tươi, sạch, đảm bảo chất lượng đề nhập, trải qua các cuộc thử nghiệm, tìm tòi các phương án sơ chế các loại trái cây đề tối đa hoá về sự tiện lợi cho khách hàng, và sau khi đưa ra ngoai thị trường cửa hàng đã được bộ an toàn thực phâm chứng nhận, phải làm những thứ mà các cửa hàng bán các loại trái cây khác không thẻ, cửa hàng đã không ngừng phát triên và tạo ra giá trị lớn, phải cho đối tượng tiêu dùng sản phâm thấy rõ: “ không phải trải cây nào cũng tốt, bất kể nguồn gốc và xuất xứ của nó ““ Sau quá trình tìm hiểu và luôn cho mọi người nhận thức sâu xa hơn về việc sử dụng các loại trái cây từ nguồn gốc xấu, chúng tôi luôn mơng mọợi người vì sức khoẻ của con em và chính chúng ta, hãy là một người tiêu dùng các loại trải cây có nhận thức không chủ quan bất kê vì nó rẻ hay nhiều hơn Đây còn là việc tiêu dùng đề đi đúng với bước đà phát triển theo hướng ngành trồng trọt trong

những dự định của tương lai

LỜI CẢM ƠN

Kính thưa cô Huỳnh Thị Khánh Duyên, Chúng em xin gửi lời cảm ơn chân thành đến cô về sự

hướng dẫn và truyền đạt kiến thức trong môn học Thiết kế Web Trong suốt quá trình học tập

đưới sự chỉ dẫn của cô đã mang lại cho chúng em nhiều hiểu biết mới về việc xây dựng các

trang web đẹp mắt vả tương tác

Sự tận tâm và kiến thức sâu rộng của cô không chỉ giúp chúng em nắm vững kiến thức cơ bản

về HTML, CSS, và thiết kế giao điện người dùng, mà còn truyền đạt cho chúng em tầm quan trọng của việc tạo ra trải nghiệm người dùng tốt Những ví dụ thực tế và dự án trong khóa học đã giúp chúng em áp dụng kiến thức vào thực tế và phát triển kỹ năng thực tế

Với lòng biết ơn sâu sắc nhất, em xin gửi đến cô Huỳnh Thị Khánh Duyên Khoa công nghệ

thông tin đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập Nhờ

có những lời hướng dẫn, dạy bảo của cô nên đề tài nghiên cứu của em mới có thê hoàn thiện

tốt đẹp

Bước đầu đi vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên không tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của cô đề kiến thức của em trong môn học nảy được hoàn thiện hơn đồng thời có điều kiện bố sung, nâng cao kiến thức

của mình

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

MỤC LỤC THÔNG TIN CHUNG

2 Xây dựng giao diện

2.1 Giao diện trang chủ

2.2 Giao diện trang giới thiệu

2.3 Giao diện trang Menu

2.4 Giao dién trang Founder 2.5 Giao diện doanh mục sản phẩm

2.6 Giao diện Liên hệ

3 Hướng dẫn sử dụng

KẾT LUẬN

TÀI LIỆU THAM KHẢO

Chương 1: Tổng quan

1 Mô tả về wedsite:

Tên của website: traicaysach— chuyên bản các loại trái cây tươi xanh, đảm bảo an toàn vệ sinh thực phẩm, đem đến chất lượng tốt nhất cho người tiêu dùng

Traicaysach giúp cho người tiêu dùng có thê mua các trái cây tươi xanh, an toản vệ sinh, chất

lượng tốt Bên cạnh đó còn bán các mặt hàng, nước ép, sinh tố trái cây tốt cho sức khoẻ đề

dap ứng nhu câu của khách hàng về các sản pham trái cây tươi ngon, bồ, rẻ

% Traicaysach được chia thành các trang, gồm có:

e - Các kiến thức về HTML, CSS, JavaScript, jQuerry, Bootstrap

® Công cụ thực hiện đồ án : Visual Studio Code

I Ngôn ngữ về HTML:

1.1 Giới thiệu về ngôn ngữ HTML:

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn sử dụng đề tao cau trúc và định dạng nội dung trên các trang web Nó là một trong ba ngôn ngữ cơ bản của World Wide Wcb, cùng với CSS (Cascading Style Sheets) va JavaScript HTML dinh nghia

các yêu tố cơ bản của trang web, như tiêu đẻ, đoạn văn bản, hình ảnh, liên kết và các phần tử

khác, thông qua các thẻ và thuộc tính Dưới đây là một số cơ bản về HTML

Các trình duyệt web sử dụng mã HTML đề hiển thị nội dung của trang web đó đúng cách

HTML thường kết hợp với CSS (Cascading Style Sheets) và JavaScript để cung cấp trải nghiệm người dùng đây đủ và tương tác trên các trang web

1.2 Cấu trúc một tài liệu HTML

HTML luôn tôn tại một cặp thẻ <html> </html> , bao gồm 2 phần : head và body

Head là phần sử dụng cho mục đích khai báo thông tin vé trang html:

- Tiêu đề

- Loại dữ liệu hiển thị trong trang

- Các thành phan hé tro

- Cac script (kich ban)

Body là phần thê hiện nội dung của trang html (người dung có thê thấy được thông tin của phần nảy ) Bao gồm:

Một số chức năng quan trọng của CSS bao gồm: Chọn lựa (Selectors): CSS cho phép bạn chọn các phần tử HTML cụ thê mà bạn muốn áp dụng kiêu dáng Thuộc tính (Properties):

Định nghĩa các thuộc tính kiêu dáng, như màu sắc, kích thước, khoảng cách, và font chữ Giá trị (Values): Mô tả giá trị cụ thể của mỗi thuộc tính kiểu dáng

CSS giúp tạo ra trang web có giao diện đẹp, linh hoạt và để bảo trì Nó thường được sử dụng cùng với HTML và JavaScript đề tạo ra trải nghiệm người dùng toàn diện trên web

3 Ngôn ngữ Javascript:

Giới thiệu Javascript

JavaScript là một ngôn ngữ lập trình thông dụng được sử dụng chủ yếu trong phát trién web Ngôn ngữ này thường được tích hợp trực tiếp vào các trang HTML đề cung cấp tính năng tương tác động và động cho trình duyệt web

Dưới đây là một số điểm quan trọng về JavaScript:

Ngôn ngữ Client-Side: JavaScript thường chạy trên trình duyệt web của người dùng (client- side) Điều này cho phép tạo ra các trang web tương tác, đáp ứng và động mà không cần tải lại toàn bộ trang Đa Nhiệm: JavaScript có khả năng xử lý nhiều công việc cùng một lúc, giúp tạo ra các ứng dụng web phức tạp Chạy trên Nền Tảng Đa Dạng: JavaScript không chỉ chạy trên các trình duyệt web mà còn có thê sử dụng trong môi trường server-side thông qua các nên tảng như Node.js Tương Tác với HTML và CSS: JavaScript có thể tương tác với HTML

và CSS đề thay đối cấu trúc, kiểu dáng, và nội dung của trang web Thư Viện và Framework: JavaScript có nhiều thư viện va framework mạnh mẽ như jQuery, React, Angular, và Vue.js, giúp tăng cường khả năng phát trién và quản lý mã nguồn Event-Driven vả Asynchronous: JavaScript thường sử dụng mô hình lập trình event-driven và hỗ trợ các xử lý bất đồng bộ (asynchronous), giúp tối ưu hóa trải nghiệm người dùng trên web

JavaScript chủ yêu được sử dụng đề thêm tính năng động và tương tác vảo trang web, từ việc

xử lý sự kiện nhấp chuột, nhập liệu đến việc gửi và nhận dữ liệu từ máy chủ mà không cần tải

lại trang

4 Ngôn ngữ Boostrap

Giới thiệu về Bootstrap:

Bootstrap là một framework (khung công cụ) phô biến được sử dụng trong phát triển web đề tạo giao diện người dùng (UI) đẹp mất, linh hoạt và đáp ứng Được phát triên ban đầu bởi Twitter, Bootstrap đã trở thành một dự án mã nguồn mở và có sự đóng góp lớn từ cộng đồng phát trién web

Bootstrap Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là

12 Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout Thay vì chỉ định rõ ràng kích thước là 200px, 300px, thì giờ chúng ta sẽ

dùng đơn vị là cột Số phan % của mỗi cột đã được định nghĩa sẵn trong bootstrap Việc của

chúng ta lúc này chỉ đơn giản là sử dụng nó

Chương 2: Thiết kế và xây dựng trang wcd:

1 Thiết kế các chức năng:

Giỏ hàng: Cho phép người dùng thêm sản phẩm vào giỏ hàng, xem và chỉnh sửa giỏ

hang của họ trước khi thanh toán

Quản lý Đơn hàng: Cho phép người quản trị xem và quản lý đơn đặt hàng Thông báo

đơn hàng đã được đặt và xác nhận

Thanh toán và Vận chuyên: Các phương thức thanh toán an toàn và thuận tiện Cung cấp chi phí vận chuyên và các tùy chọn vận chuyền

Tích hợp Hệ thống đánh giá và Phản hồi: Cho phép người dùng đánh giá và viết phản

hồi về sản phẩm, giúp tăng tính minh bạch và tin cậy

Liên lạc và Hỗ trợ: Cung cấp thông tin liên hệ, hỗ trợ trực tuyến, và biểu mẫu liên hệ

đê giải đáp thắc mắc của khách hàng

Responsive Design: Đảm bảo trang web có thiết kế đáp ứng, tương thích trên các thiết

bị khác nhau như điện thoại dị động, máy tinh bang, va may tinh

Thông tin Vận chuyên và Trả hàng: Cung cấp thông tin chỉ tiết về chính sách vận chuyên và chính sách trả hàng đề người dùng biết và hiểu rõ

Thống kê và Phân tích: Tích hợp công cụ theo dõi thống kê đề bạn có thê đánh giá hiệu suất trang web và chăm sóc khách hàng tốt hơn

Xây dựng giao diện:

2.1 Giao điện trang chủ:

10

3+

Trai cAw cach

Giao điện trang chủ của nhóm em chủ yếu sử dụng tông màu trắng xanh, đơn giản và các bức ảnh trái cây nhằm cho người tiêu dùng biết sản phẩm của chúng em xanh-sạch-ngon Ngoài ra

sự kết hợp giữa 2 màu này sẽ làm bắt mắt khách hảng

Tương tác: Giao điện cung cấp các phương tiện cho người dùng tương tác với nội dung một cach dé dang nhat co thé

Thâm mỹ: Thiết kế giao diện hấp dẫn giúp cho người tiêu đùng có một ấn tượng tốt đối với

trang web, làm tăng khả năng kích thích thị giác

Dễ dàng sử dụng: Giao điện được thiết kế để làm cho việc tương tác dé dang va hiéu qua, giúp người dùng dễ đảng thực hiện các thao tác mà họ muốn

Tương thích thiết bị: Giao điện được thiết kế để tương thích với nhiều loại thiết bị, từ máy

tính đến điện thoại di động, để đảm bảo tất cả mọi người có thê truy cập được trang web ở bất

kì tình huống nào giúp trải nghiệm một cách tốt nhất

Branding: Thiết kế giao diện thường liên quan đến việc áp dụng các yếu tổ thiết kế thương hiệu, giúp tạo ra một ấn tượng nhất quán và nhận diện thương hiệu

11

Cách thực hiện:

2.2 Giao diện trang giới thiệu:

12

chú ý người mua khi lần đầu họ truy cập vào web

Giúp khách hảng truy cập truy cập và hiểu rõ hơn hơn về về website, cung cấp một cái nhìn tống quan về nguyên tắc hoạt động, cam kết và giá trị của “Traicaysach” mang lại, từ đó tạo

sự tin tưởng và gắn kết với khách hàng

+Yếu tổ chính: Hình ảnh trái cây tươi ngon và vô cùng chất lượng, mô tả sản phẩm một cách chỉ tiết, thiết kế thâm mỹ, liên kết đến các phần quan trọng khác như trang chỉ tiết sản phẩm ' Cách thực hiện:

13

2.3 Giao diện trang Menu:

14

Tiêu đề: Logo hình ảnh đặc trưng của cửa hàng ở phía trên cùng, giúp người mua hàng dễ

nhận biết thương hiệu

Danh mục Trái Cây: Danh sách các loại trái cây chính được sắp xếp theo danh mục có đủ loại

trái cây cho khách hàng lựa chọn

Hình ảnh chất lượng cao của từng loại trái cây để tạo ấn tượng ngay lần đầu nhìn thấy, hình

ảnh giúp khách hàng có thé dé dang lựa chọn được loại trải cây mà khách hàng muốn mua

Nút thêm vảo giỏ hàng: giúp khách hàng có thê đặt hàng trực tuyến vô cùng tiện lợi Giao diện menu trái cây nên được thiết kế sao cho dé hiéu nhất có thé, thân thiện với người đùng và thê hiện độ chuyên nghiệp của '“Traicaysach”

Cách thức hiện:

15

2.4 Giao diện trang founder:

Cách thực hiện:

18

2.5 Giao diện trang danh mục sản phẩm:

20

Mục đích: Chức năng này cho phép người dùng xem tên sản phẩm, giá, thông trang web được thiết kế đơn giản nhưng đem lại sự hiệu quả vô cùng lớn, bởi sử kết hợp giữa việc mua sản phân được sắp xếp cùng các lượt đánh giá Lợi ích đối với khách hàng

- Chức năng này cho người dùng xem tên sản phẩm, giá cả chỉ tiết, và thông tin chỉ tiết về loại sản phâm

- Thuận tiện hơn trong việc tham khảo sản phẩm, xem xét kỹ hơn về chất lượng và đưa ra các

lượt đánh giá phù hợp với sản phẩm

- Hiên thị danh sách các sản phâm theo từng loại đề khách hàng có thê đễ dàng lựa chọn

- Dé dang quan lí đơn đặt hàng của khách hàng

- Cập nhật các sản phâm , thương hiệu , danh mục