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

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ

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

GVHD: THS. NGUYỄN HỮU VĨNH
SVTH: NGUYỄN MINH TOÀN
MSSV: 1824801030232
LỚP: D18PM04

B5NH DƯƠNG – 1/6/2019

0

0


KHOA KỸ THUẬT – CÔNG NGHỆ
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

0

0


Đồ án mơn thiết kế web

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
Nguyễn Minh Toàn- Lớp D18PM04

0

i

0


Đồ án môn thiết kế web
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

Nguyễn Minh Toàn- Lớp D18PM04

0

ii

0


Đồ án mơn thiết kế web

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ấp

thơ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í th 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

Nguyễn Minh Toàn- Lớp D18PM04

0

iii

0


Đồ án môn thiết kế web

DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT

Từ viết tắt

Giải thích

CSDL

Cơ sở dữ liệu

ĐVT

Đơn vị tính

CNTT

Cơng Nghệ thơng tin

SP

Sản phẩm

Nguyễn Minh Tồn- Lớp D18PM04

0

iv

0


Tiểu luận môn thiết kế web

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ấn
thô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
Giới thiệu sản phẩm đến khách hàng
Giúp chủ doanh nghiệp tiết kiện chi phí kinh doanh như: thuê nhân viên,
thuê mặt bằng…
Tiếp cận công nghệ thông tin
Tăng phạm vi

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.
Nguyễn Minh Toàn- Lớp D18PM04

0

1

0


Tiểu luận môn thiết kế web

+ 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ăn
bả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…..
Định dạng của HTML.
Là một tập tin có phần mở rộng là .htm hoặc .html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ),
thường được đặt xung quanh một khối văn bản nào đó.
Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và
được sử dụng nhiều nhất đó là adobe dreamweaver.
HTML là một tập tin sieu văn bản nên bạn có thể dùng các chương trình
soạn thảo văn bản khơng có chức năng định danh văn bản để tạo một văn bản
tập tin HTML. Trong Windown, bạn có thể dùng Notepad để tạo tập tin HTML,

còn Mac dùng TextEdit
Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đíc soạn thảo văn
bản, nên cần sử dung trình soạn thảo bằng Abobe Dreamwear để soạn thảo
Nguyễn Minh Toàn- Lớp D18PM04

0

2

0


Tiểu luận môn thiết kế web

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ấp

nhữ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 hồn tồ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.
2.3. Ngôn ngữ CSS.
CSS (Cascading Style Sheets) là một ngơn ngữ quy định cách trình bày cho
các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự
sáng tạo trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao.
CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên
mọi hệ điều hành.
CSS đưa ra phương thức áp dụng từ một file CSS ở ngồi. Có hiệu quả
đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một
thuộc tính trình bày nào đó.
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.
2.4. Ngôn ngữ Javascript.
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có
khả năng đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã đưa ra ngơn ngữ script có tên là LiveScript để thực hiện
chức năng này. Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của
ngơn ngữ lập trình Java.
Nguyễn Minh Tồn- Lớp D18PM04

0

3

0

Tiểu luận môn thiết kế web

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 đối
tượng, ví dụ đối tượng Math với tất cả các chức năng tốn học. Nhưng
JavaScript khơng là ngơn ngữ hướng đối tượng như C++/Java.

Nguyễn Minh Tồn- Lớp D18PM04

0

4

0


Tiểu luận môn thiết kế web

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
ngồi ra cịn có thể sử các menu dọc, ngang để sang trang khá ...

Hnh 1: giao diện trang chủ
Nguyễn Minh Toàn- Lớp D18PM04

0

5

0


Tiểu luận môn thiết kế web

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
Nguyễn Minh Toàn- Lớp D18PM04

0

6

0


Tiểu luận môn thiết kế web

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

Cập nhật ngày giờ
Nguyễn Minh Tồn- Lớp D18PM04

0

7

0

Tiểu luận môn thiết kế web

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
Nguyễn Minh Toàn- Lớp D18PM04

0

8

0


Tiểu luận môn thiết kế web

- 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

Nguyễn Minh Toàn- Lớp D18PM04

0

9

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

10

0

Tiểu luận môn thiết kế web

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ệ

Nguyễn Minh Toàn- Lớp D18PM04

0

11

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

12

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

13

0


Tiểu luận môn thiết kế web

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

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

Nguyễn Minh Toàn- Lớp D18PM04

0

14

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

15

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

16

0


Tiểu luận môn thiết kế web

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

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

Nguyễn Minh Toàn- Lớp D18PM04

0

17

0


Tiểu luận môn thiết kế web

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

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

Nguyễn Minh Toàn- Lớp D18PM04

0

18

0


Tiểu luận môn thiết kế web

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

Nguyễn Minh Toàn- Lớp D18PM04

0

19

0