Tiểu luận môn học thiết kế web thiết kế website kinh doanh gạo sạch an toàn chất lượng

+ Trang chủ: giới thiệ sản phẩm lúa gạo đến khách hàng + Trang Giới thiệu: giới thiệu mục tiêu sản phẩm tới khách hàng + Trang liên hệ: Đây là cung cấp địa chỉ chi nhánh cung cấp sản phẩ

KHOA KỸ THUẬT – CÔNG NGHỆ

TIỂU LUẬN MÔN HỌCTHIẾT KẾ WEB

THIẾT KẾ WEBSITEKINH DOANH GẠO SẠCH AN TOÀN CHẤT LƯỢNG

GVHD: THS NGUYỄN HỮU VĨNHSVTH: NGUYỄN MINH TOÀNMSSV: 1824801030232

LỚP: D18PM04

B5NH DƯƠNG – 1/6/2019

NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh

Tên đề tài: THIẾT KẾ WEBSIte BÁN GẠO SẠCH CHẤT LƯỢNG Nội dung nhận xét:

Điểm:

Bằng số:

Bằng chữ:

GIẢNG VIÊN CHẤM

(Ký, ghi rõ họ tên)

NGUYỄN HỮU VĨNH

Ni dung

LỜI NÓI ĐẦU i

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Tên Đề Tài 1

1.2 Mục Tiêu của Đề Tài 1

1.3 Ý Nghĩa Của Đề Tài 1

1.4 Đối Tượng Của Đề Tài 1

1.5 Một Số Trang Chính Của Website 1

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 2

2.1 Giới Thiệu Về HTML 2

2.2 Giới thiệu về Adobe Dreamweaver 3

2.3 Ngôn ngữ CSS 3

2.4 Ngôn ngữ Javascript 3

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 5

3.1 Đặc Tả Giao Diện 5

3.1.1 Giao diện trang chủ 5

3.1.2 Giao diện trang giới thiệu 10

3.1.3 Giao diện trang liên hệ 11

3.1.4 Giao diện trang đăng ký 12

3.1.5 Giao diện trang đăng nhập 13

3.1.6 Trang quên mật khẩu 14

3.1.6 Giao diện trang danh mục sản phẩm 15

3.1.7 Giao diện danh mục gạo hữu cơ 16

3.1.7 Giao diện danh mục gạo dặc sản 17

3.1.8 Giao diện danh mục gạo tết 18

3.1.9 Giao diện danh mục gạo sản xuất 19

3.1.10 Giao diện danh mục gạo cho trẻ nhỏ 20

3.1.11 Giao diện danh mục nông sản ngon 21

3.1.12 Giao diện nông sản thượng hạn 22

3.1.13 chi tiết sản phẩm 23

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 24

TÀI LIỆU KHAM KHẢO 25

Hnh 1: giao diện trang chủ 5 Hnh 2: giao diện logo 6 Hnh 3: menu _6 Hnh 4: slider chuyển hnh _7 Hnh 5: menu doc bên trái _7 Hnh 6: Cập nhật ngày giờ 8 Hnh 7: menu dọc bên phải 8 Hnh 8: giới thiệu sản phẩm _9 Hnh 9: footer _9 Hnh 10: giao diện trang giới thiệu _10 Hnh 11: giao diện trang liên hệ _11 Hnh 12: giao diện trang đăng kí _12 Hnh 13: giao diện trang đăng nhập 13 Hnh 14: Giao diện trang quên mật khẩu 14 Hnh 15: Giao diện trang gạo hoang dã _15 Hnh 16: giao diện gạo hữu cơ 16 Hnh 17: gạo đặc sản 17 Hnh 18: Giao diện gạo tết _18 Hnh 19: giao diện gạo sản xuất _19 Hnh 20: Giao diện gạo cho trẻ nhỏ 20 Hnh 21: Nông sản ngon _21 Hnh 22: gạo thượng hạn _22 Hnh 23: Chi tiết sản phẩm _23

LỜI NÓI ĐẦU

Hiện nay, nền lĩnh công nghệ thông tin, đặc biệt là vai trò website đối với doanh nghiệp rất quan trọng Cũng như thương mại điện tử đang ngày càng phát triển rầm rộ Đóng vai trò như cầu nối cung cấp thông tin của doanh nghiệp, tăng khả năng tiếp cận khách hàng.Giúp chúng ta tiết kiệm chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch… Và thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấpthông tin theo nhu cầu và sở thích của con người Đối với lĩnh vực kinh doanh

nó đóng vai trò như một của hàng đối với khách hàng, giúp bán hàng tự động Ngoài việc có thể trực tiếp bán hàng, bạn có thể tận dụng nó để tăng doanh thu Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ và các website bán hàng trên mạng sẽ giúp ta làm được điều đó Mà không tốn chi phí thuê nhân công, nhân viên, tốn tiền mua mặt bằng Chính vì vậy, các công nghệ mã nguồn

mở trở nên được chú ý vì các tính năng của nó Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng Thiết kế các website bán hàng thân thiện và dễ sử dụng với người dùng Chính vì vậy trong bài báo cáo này tôi chọn

đề tài về: “thiết kế website bán gạo sạch chất lượng”. Đây là một hệ thống đơn giản nhưng đủ mạnh để cho phép nhanh chóng Thiết kế các ứng dụng bán hàng trên Internet

Đề tài tiểu luận gồm các phần được phân chương như sau:

Chương 1: Tổng quan về đề tài

Chương 2: Giới thiệu công nghệ

Chương 3: Giao diện website

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

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tên Đề Tài.

“Thiết kế website kinh doanh gạo sạch an toàn chất lượng”

1.2 Mục Tiêu của Đề Tài.

Thiết kế kênh bán hàng trực tuyến kinh doanh mặt hàng lúa gạo

Phục vụ khách hàng bất kì lúc nào

Đáp ứng nhu cầu của khách hàng là được trực quan sản phẩm

Chia sẽ thông tin thị trường lúa gạo

Tư vấn cho khách hàng mọi lúc mọi nơi

Đánh giá khách hàng nhu cầu khách hàng

Thu thập cơ sở dữ liệu khách hàng

1.3 Ý Nghĩa Của Đề Tài.

Đưa sản phẩm của công ty đến đến gần hơn với người tiêu dùng tư vấnthông tin cho khách hàng, cũng như hỗ trợ chăm sóc khách hàng, giúp khách hàng có các thông tin đầy đủ nhất chính xác nhất về mặc hàng Phục vụ dược nhiều đối tượng khách hàng ở khu vực địa lí khác nhau trong và ngoài nước

Tiết kiệm thời gian

1.4 Đối Tượng Của Đề Tài.

Đối tượng nghiên cứu chủ yếu sản phẩm gạo các loại

Dịch vụ cần thiết

1.5 Một Số Trang Chính Của Website.

+ Trang chủ: giới thiệ sản phẩm lúa gạo đến khách hàng

+ Trang Giới thiệu: giới thiệu mục tiêu sản phẩm tới khách hàng

+ Trang liên hệ: Đây là cung cấp địa chỉ chi nhánh cung cấp sản phẩm gạo

+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.

+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.

+ Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các mặt hàng của cửa hàng có sẵn để lựa chọn.

+ Trang chi tiết sản phẩm: Đây là trang khách hàng nhấn vào từng sản phẩm để xem chi tiết.

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ

2.1 Giới Thiệu Về HTML.

HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) làngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trang Web được hiển thị như thế nào trong trình duyệt

Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và

graphics

HTML là ngôn ngữ xác định cấu trúc của thông tin

HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị vănbản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác

Công dụng của HTML

Thiết kế được nội dung và hình thức của trang web

Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách dùng các liên kết được chèn vào trang web

Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao dịch…

Thêm vào đối tượng các hình ảnh video, âm thanh…

Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đíc soạn thảo vănbản, nên cần sử dung trình soạn thảo bằng Abobe Dreamwear để soạn thảo

2.2 Giới thiệu về Adobe Dreamweaver

Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp dùng

để thiết kế, viết mã và phát triển website cùng các trang web và các ứng dụng web Cho dù bạn có thích thú với công việc viết mã HTML thủ công hoặc bạn thích làm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những công cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn.Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thành phần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn bản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trong Macromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau

đó chèn trực tiếp vào Dreamweaver Dreamweaver cũng cung cấp những công

cụ giúp đơn giản hóa việc chèn Flash vào trang web

Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựa theo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP Nếu sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấpnhững công cụ cho phép bạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trang web của bạn

Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mã JavaScript để mở rộng những khả năng của Dreamweaver với những hành vi mới, những chuyên gia giám định Property mới và những báo cáo site mới

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đốitượng, ví dụ đối tượng Math với tất cả các chức năng toán học Nhưng

JavaScript không là ngôn ngữ hướng đối tượng như C++/Java

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH

3.1 Đặc Tả Giao Diện

3.1.1 Giao diện trang chủ

Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi bật và mới nhất

Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo Loại Sản Phẩm

Mô tả chức năng: Trang này cho phép người dùng xem thông tin sản phẩm ngoài ra còn có thể sử các menu dọc, ngang để sang trang khá

Hnh 1: giao diện trang chủ

Trang web được chia làm 7 phần:

- Phần 1: header trang website

Ý nghĩa sử dung: hiển thị logo và một số thông tin trang web

Mô tả: gồm hai thẻ div, liên kết với trang đăng kí và trang đăng nhập và hình logo trang web

Logo của trang web:

Hnh 2: giao diện logo

Một số thông tin ở phần đầu trang web

- Phần 2 - Menu ngang: Bao gồm các mục: trang chủ, giới thiệu, hỏi đáp, liên hệ, tìm kieMỗi danh mục liên kết đến một trang với nội dung khác nhau

Hnh 3: menu

Ý nghĩa: dủng tạo liên kết phái sau phần header và trước phần nội dung

Mô tả: dùng thẻ ul tạo danh sách liên kết, dùng thẻ div chứa nội dung tìm kiếm

Phần 3: Slider chuyển hình

Hnh 4: slider chuyển hnh

Mô tả: chèn 10 hình ảnh vào slider, dùng css của slider và javacript

- Phần 4: Bên trái là danh mục các sản phẩm, đại lí được liên kết với các trang khác nhau và lịch ngày tháng năm

Hnh 5: menu doc bên trái

Ý nghĩa: là phần liên kết với các trang khác trong website và hiển thị ở phần bên trái của các trang

Mô tả: các mục gồm danh sách sản phẩm và đại lí kinh doanh

Hnh 6: Cập nhật ngày giờ

- Phần 5: Bên phải hiển thị sản phẩm bán nhiều nhất, quảng cáo được sử dụng thẻ Marquee để chạy và liên kết website được liên kết tới các trang khác

Hnh 7: menu dọc bên phải

Ý nghĩa: là phần hiển thị các nội dung chung bân phải các trang website

Mô tả: danh mục sản phẩm bán chạy, nội dung di chuyển từ dưới lên trên, nếu rê chuột vào nội dung sẽ dừng lại

- Phần 6: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chi tiết sản phẩm

Hnh 8: giới thiệu sản phẩm

- Phần 7: Footer

Hnh 9: footer

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

Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát

về shop, lịch sử hình thành và phát triển, định hướng phát triển trong tương lai

Hnh 10: giao diện trang giới thiệu

Ý nghĩa: là trang web giới thiệu công ty chủ quản của websiteMô tả:

Đoạn văn vản

Dùng thẻ như ul, ol tạo danh sách

Thẻ tạo liên kết với các trang web khác

3.1.3 Giao diện trang liên hệ

Mục đích: Trang này mục đích để khách hàng có thể liên lạc với shop.Chức năng: Trong giao diện này cho phép người dùng gửi những thông tin

về sản phẩm, thái độ phục vụ, cũng như phản hồi những sai phạm của nhân viên

về shop

Hnh 11: giao diện trang liên hệ

3.1.4 Giao diện trang đăng ký

Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang

Chức năng: Cho phép khách hàng có thể đăng ký thông tin để trở thành khách hàng

Hnh 12: giao diện trang đăng kí

Ý nghĩa: tạo trang website đăng kí thông ttin để sử dụng một số chức năng khác

3.1.5 Giao diện trang đăng nhập

Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang

Hnh 13: giao diện trang đăng nhập

3.1.6 Trang quên mật khẩu

Hnh 14: Giao diện trang quên mật khẩu

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

Mục Đích: Thanh menu chứa danh sách các loại sản phẩm của cửa hàng Khách hàng có thể sử dụng menu này để lựa chọn sản phẩm mà mình cần tìm

Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà mình cần

Giao diện danh mục lức

Hnh 15: Giao diện trang gạo hoang dã

Trang chuyên giới thiệu các sản phẩm gạo lức có giá từ 50 nghìn/ kg gạo, với nhiều loại gạo khác nhau

3.1.7 Giao diện danh mục gạo hữu cơ

Hnh 16: giao diện gạo hữu cơ

Các sản phẩm gạo có nguồn gốc rõ ràng, hữu cơ tốt cho sức khỏe

3.1.7 Giao diện danh mục gạo dặc sản

Hnh 17: gạo đặc sản

3.1.8 Giao diện danh mục gạo tết

Hnh 18: Giao diện gạo tết

3.1.9 Giao diện danh mục gạo sản xuất

Hnh 19: giao diện gạo sản xuất

3.1.10 Giao diện danh mục gạo cho trẻ nhỏ

Hnh 20: Giao diện gạo cho trẻ nhỏ

3.1.11 Giao diện danh mục nông sản ngon

Hnh 21: Nông sản ngon

3.1.12 Giao diện nông sản thượng hạn

Hnh 22: gạo thượng hạn

3.1.13 chi tiết sản phẩm

Hnh 23: Chi tiết sản phẩm

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

Áp dụng kiến thức thiết kế web từ kiến thức HTML, CSS, Javascript…nhằm phát triển xã hội áp dụng vào đời sống hằng ngày Chính là một xu hướng tất yếu xã hội Nhằm tiết kiệm thời gian và chi phí cho khách hàng và doanh nghiệp muốn kinh doanh

Giao diện website được thiết kế đơn giản, thân thiện và dễ sử dụng

Việc chưa làm được:

Việc biểu diễn các thông tin trên website chưa được linh hoạt

Phân tích thiết kế chưa được hoàn chỉnh

Nhiều chức năng còn thiếu và chưa sử dụng được

Hướng phát triển của đề tài

Vì thời gian không cho phép và kiến thức về thiết kế web còn hạn chế nên chúng em chưa tìm hiểu rõ và kỹ hơn về đề tài này Vì thế đề tài cũng còn có nhiều thiếu sót, mong thầy giúp đỡ chúng em nhiều hơn và em sẽ tiếp tục tìm hiểu sâu hơn về công nghệ này, nhằm mục đích Thiết kế website:

Giao diện đẹp, thân thiện với người dùng, có nhiều chức năng và tương tác tốt hơn với người dùng

Thiết kế, bổ sung các tính năng còn thiếu hay chưa thật sự hoàn chỉnh trongquá trình sử dụng

TÀI LIỆU KHAM KHẢO

Tài liệu bài giảng môn “Thiết kế website” của thầy Nguyễn Hữu Vĩnh.Website WWW: http://www.hiepsiit.com

Website https://coccoc.com/search#query=Webcoban.vn