TIỂU LUẬN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE SHOP BÁN HOA FLOWERS

BẢNG THÔNG TIN TRANG 1 Trang Chủ Đây là trang chính của shop, giới thiệu sơ lược về shop, các loại hoa bán nhiều và nổi bật của cửa hàng 2 Trang Giới Thiệu Đây là trang giúp cho mọi 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 SHOP BÁN HOA FLOWERS

GVHD: NGUYỄN HỮU VĨNH SV: LÊ QUANG CHUNG MSSV: 1824801030261 LỚP: D18PM04

BÌNH DƯƠNG – 07/2020

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: XÂY DỰNG WEBSITE SHOP BÁN HOA FLOWERS 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

LỜI NÓI ĐẦU

Hiện nay, trên thế giới công nghệ thông tin và thương mại điện tử đang phát triển rất mạnh mẽ Kỹ thuật số giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác Hơn nữa, 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 Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên mạng sẽ giúp ta làm được điều đó 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 xây dựng 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ề: “Xây dựng website shop bán hoa Flowers” Đây là một hệ thống đơn

giản nhưng đủ mạnh để cho phép nhanh chóng xây dựng 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

MỤC LỤC

LỜI NÓI ĐẦU i

MỤC LỤC ii

DANH MỤC HÌNH iv

BẢNG THÔNG TIN TRANG v

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

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

1 Tên Đề Tài 1

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

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

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

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

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

1 Giới Thiệu Về HTML 3

1.1 HTML là gì? 3

1.2 Công dụng của HTML 3

1.3 Định dạng của HTML 3

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

3 Ngôn ngữ CSS 4

4 Ngôn ngữ Javascript 4

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

1 Đặc Tả Giao Diện 6

1.1 Giao diện trang chủ 6

1.2 Giao diện trang giới thiệu 8

1.3 Giao diện trang đăng ký 9

1.4 Giao diện trang đăng nhập 10

1.5 Giao diện đổi mật khẩu 11

1.6 Giao diện trang danh mục hoa 12

1.6.1 Giao diện trang hoa sinh nhật 13

1.6.2 Giao diện trang hoa chúc mừng 14

1.6.5 Giao diện trang hoa tang lễ 17

1.6.6 Giao diện trang lãng hoa 18

1.7 Trang chi tiết hoa 19

1.7.1 Giao diện trang chi tiết hoa sinh nhật 19

1.7.2 Giao diện trang chi tiết hoa chúc mừng 20

1.7.3 Giao diện trang chi tiết hoa khai trương 21

1.7.4 Giao diện trang chi tiết hoa tình yêu 22

1.7.5 Giao diện trang chi tiết hoa tang lễ 23

1.7.6 Giao diện trang chi tiết lãng hoa 24

1.8 Giao diện trang hoa đẹp nhất 25

1.8.1.Giao diện trang chi tiết hoa đẹp nhất 26

1.9 Giao diện trang giỏ hàng 27

1.10 Giao diện trang các chính sách 28

1.11 Giao diện trang hướng dẫn đặt hàng 29

1.12 Giao diện trang phương thức thanh toán 30

1.13 Giao diện trang câu hỏi thường gặp 31

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

1 Kết quả đạt được: 32

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

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

TÀI LIỆU KHAM KHẢO 34

DANH MỤC HÌNH

Hình 1.1 Giao diện trang chủ 6

Hình 1.2 Giao diện trang giới thiệu 8

Hình 1.3 Giao diện trang đăng ký 9

Hình 1.4 Giao diện trang đăng nhập 10

Hình 1.5 Giao diện trang đổi mật khẩu 11

Hình 1.6 Giao diện trang danh mục hoa 12

Hình 1.6.1 Giao diện trang hoa sinh nhật 13

Hình 1.6.2 Giao diện trang hoa chúc mừng 14

Hình 1.6.3 Giao diện trang hoa khai trương 15

Hình 1.6.4 Giao diện trang hoa tình yêu 16

Hình 1.6.5 Giao diện trang hoa tang lễ 17

Hình 1.6.6 Giao diện trang lãng hoa 18

Hình 1.7.1 Giao diện trang chi tiết hoa sinh nhật 19

Hình 1.7.2 Giao diện trang chi tết hoa chúc mừng 20

Hình 1.7.3 Giao diện trang chi tiêt hoa khai trương 21

Hình 1.7.4 Giao diện trang chi tiết hoa tình yêu 22

Hình 1.7.5 Giao diện trang chi tiết hoa tang lễ 23

Hình 1.7.6 Giao diện trang chi tiết lãng hoa 24

Hình 1.8 Giao diện trang hoa đẹp nhất 25

Hình 1.8.1 Giao diện trang chi tiết hoa đẹp nhất 26

Hình 1.9 Giao diện trang giỏ hàng 27

Hình 1.10 Giao diện trang các chính sách 28

Hình 1.11 Giao diện trang hướng dẫn đặt hàng 29

Hình 1.12 Giao diện trang phương thức thanh toán 30

BẢNG THÔNG TIN TRANG

1 Trang Chủ Đây là trang chính của shop, giới thiệu sơ lược về

shop, các loại hoa bán nhiều và nổi bật của cửa hàng

2 Trang Giới Thiệu Đây là trang giúp cho mọi người xem biết thêm về

thông tin của Shop hoa Flowers

3 Trang Đăng Ký Người dùng đăng ký tài khoản để trở thành khách hàng

của Shop hoa Flowers

4 Trang Đăng Nhập Người dùng đăng nhập tài khoản để đặt mua sản phẩm

của Shop hoa Flowers

Đây là trang khách hàng xem hoặc tham khảo các loại

hoa có sẵn trong shop Flowers để lựa chọn

7 Trang Chi Tiết Hoa Đây là trang khách hàng nhấn vào từng loại hoa để

xem chi tiết

8 Trang Hoa Đẹp

Nhất

Đây là trang giúp cho khách hang xem, tìm hiểu thêm được nhiều loại hoa đẹp khác

9 Trang Giỏ Hàng Đây là trang khi khách hàng muốn xem mình đã chọn

những loại hoa nào rồi

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

1 Tên Đề Tài

+ XÂY DỰNG WEBSITE SHOP HOA FLOWERS

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

+ Xây dựng Website Bán Hoa Flowers

3 Ý Nghĩa Của Đề Tài

+ Đưa các sản phẩm của Shop Hoa Flowers đến gần hơn với mọi người

+Giới thiệu các loài hoa mới cho mọi người

+Sáng tạo ra các giỏ hoa, lãng hoa, bó hoa mới nhất phù hợp với mọi người + Quảng bá thương hiệu của shop hoa Flowers

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

+ Đối tượng nghiên cứu chủ yếu là các loại hoa và loài hoa phổ biến và đẹp

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

+ Trang chủ: Đây là trang chính của shop, giới thiệu sơ lược về shop, các loại hoa bán nhiều và nổi bật của cửa hàng

+ Trang giới thiệu: Đây là trang giúp cho mọi người xem biết thêm về thông tin của Shop hoa Flowers

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

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

+Trang đổi mật khẩu: Đây là trang mà nếu khách hàng có nhu cầu đổi mật khẩu nếu muốn

+ Trang danh mục hoa: Đây là trang khách hàng xem hoặc tham khảo các loại hoa

có sẵn trong shop Flowers để lựa chọn

+ Trang chi tiết hoa: Đây là trang khách hàng nhấn vào từng loại hoa để xem chi tiết + Trang hoa đẹp nhất: Đây là trang giúp cho khách hang xem, tìm hiểu thêm được nhiều loại hoa đẹp khác

+Trang giỏ hàng: Đây là trang khi khách hàng muốn xem mình đã chọn những loại hoa nào rồi

+Trang các chính sách: Trang này gồm các chính sách của shop để khách hàng tham khảo

+Trang hướng dẫn đặt hàng: Trang này giúp khách hàng hiểu rõ cách đặt hàng trên shop hoa Flowers

+Trang phương thức thanh toán: Trang này giúp khách hàng có nhiều cách thanh toán cho Shop hoa Flowers

+Trang câu hỏi thường gặp: Trang này giúp giải đáp thắc mắc của khách hàng khi

có nhu cầu

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

1 Giới Thiệu Về HTML

1.1 HTML là gì?

HTML (Hyper Text 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

1.2 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…

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 xây dựng 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 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

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

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

1 Đặc Tả Giao Diện

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 hoa bán nhiều và hoa nổi bật

➢ Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo loại hoa

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

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

- Phần 1: Logo của trang web, hình nền và dòng chữ chạy bằng thẻ Marquee

- Phần 2 - Menu ngang: Bao gồm các mục: trang chủ, giới thiệu, đăng nhập, hoa đẹp nhất và khung thanh tìm kiếm Mỗi danh mục liên kết đến một trang với nội dung khác nhau

- Phần 3 : Slide hình ảnh đặc trưng của shop hoa Flowers chạy ngang

- Phần 4: Bên trái là danh mục các loại hoa, các loại hoa được liên kết với các trang khác nhau, phần hoa nổi bật chạy bằng thẻ Marquee, lịch ngày tháng năm, khung thống

kê truy cập và khung thông tin liên hệ

- Phần 5: Bên phải hiển thị các loại hoa bán nhiều được liên kết với trang chi tiết sản phẩm

- Phần 6: Footer bao gồm các mục: đăng ký, giỏ hàng, các chính sách, hướng dẫn đặt hàng, phương thức thanh toán và câu hỏi thường gặp Mỗi danh mục liên kết đến một trang với nội dung khác nhau

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

➢

1.3 Giao diện trang đăng ký

➢ Mục Đích: Khách hàng đăng ký tài khoản để trở thành khách hàng của Shop hoa

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

➢ Mục Đích: Khách hàng đăng nhập tài khoản để đặt mua các loại hoa của shop

➢ Chức năng: Khách hàng đăng nhập để mua hàng nhanh hơn

Hình 1.4 Giao diện trang đăng nhập

1.5 Giao diện đổi mật khẩu

➢ Mục Đích: Khách hàng muốn đổi mật khẩu nếu có nhu cầu

➢ Chức Năng: Đổi mật khẩu mới cho tất cả khách hàng

Hình 1.5 Giao diện trang đổi mật khẩu

1.6 Giao diện trang danh mục hoa

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

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

Hình 1.6 Giao diện trang danh mục hoa

1.6.1 Giao diện trang hoa sinh nhật

Hình 1.6.1 Giao diện trang hoa sinh nhật

1.6.2 Giao diện trang hoa chúc mừng

Hình 1.6.2 Giao diện trang hoa chúc mừng

1.6.3 Giao diện trang hoa khai trương

Hình 1.6.3 Giao diện trang hoa khai trương

1.6.4 Giao diện trang hoa tình yêu

Hình 1.6.4 Giao diện trang hoa tình yêu

1.6.5 Giao diện trang hoa tang lễ

Hình 1.6.5 Giao diện trang hoa tang lễ

1.6.6 Giao diện trang lãng hoa

Hình 1.6.6 Giao diện trang lãng hoa

1.7 Trang chi tiết hoa

➢ Mục Đích: Giúp khách hàng xem được thông tin và giá cả của hoa bán

trong shop

1.7.1 Giao diện trang chi tiết hoa sinh nhật

Hình 1.7.1 Giao diện trang chi tiết hoa sinh nhật

1.7.2 Giao diện trang chi tiết hoa chúc mừng

Hình 1.7.2 Giao diện trang chi tiết hoa chúc mừng

1.7.3 Giao diện trang chi tiết hoa khai trương

Hình 1.7.3 Giao diện trang chi tiết hoa khai trương

1.7.4 Giao diện trang chi tiết hoa tình yêu

Hình 1.7.4 Giao diện trang chi tiết hoa tình yêu

1.7.5 Giao diện trang chi tiết hoa tang lễ

Hình 1.7.5 Giao diện trang chi tiết hoa tang lễ

1.7.6 Giao diện trang chi tiết lãng hoa

Hình 1.7.6 Giao diện trang chi tiết lãng hoa

1.8 Giao diện trang hoa đẹp nhất

➢ Mục Đích: Giúp khách hàng xem thêm được các loài hoa đẹp khác Trong giao diện trang hiển thị các loài hoa đẹp có ở Việt Nam và trên thế giới

Hình 1.8 Giao diện trang hoa đẹp nhất

1.8.1.Giao diện trang chi tiết hoa đẹp nhất

➢ Mục đích: Giúp cho khách hàng hiểu thêm thông tin của các loài hoa đẹp nhất và nó phân bố ở đâu

Hình 1.8.1 Giao diện trang chi tiết hoa đẹp nhất

1.9 Giao diện trang giỏ hàng

➢ Mục Đích: Trang giỏ hàng cho phép khách hàng xem thông tin của mình và

các loại hoa mà đã chọn, số lượng và tổng tiền

Hình 1.9 Giao diện trang giỏ hàng

1.10 Giao diện trang các chính sách

➢ Mục Đích: Trang các chính sách giúp cho khách hàng hiểu thêm các chính

sách của shop và tăng thêm độ tin cậy với khách hàng

1.11 Giao diện trang hướng dẫn đặt hàng

➢ Mục đích: Trang hướng dẫn đặt hàng giúp khách hàng các cách đặt hàng

trên shop

Hình 1.11 Giao diện trang hướng dẫn đặt hàng

1.12 Giao diện trang phương thức thanh toán

➢ Mục đích: Trang phương thức thanh toán giúp khách hàng biết các cách

thanh toán với shop

Hình 1.12 Giao diện trang phương thức thanh toán