Tiể ậ u lu n môn học thiết kế website thiết k website ế bán sách cho nhà sách xyz

Đề 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ể

VIỆN KỸ THUẬT CÔNG NGHỆ

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ườ ầu tư i đvào các hoạt động khác Hơn nữa, thương mại điệ ử còn giúp con ngườn t 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 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 sách cho nhà sách XYZ” Đâ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

MỤC LỤC

LỜI NÓI ĐẦU i

DANH M C HÌNH Ụ iii CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1

1 Tên Đề Tài 1

2 Mục êu c Ti ủ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Ệ 2

1 Giới Thiệu Về HTML 2

1.1 HTML là gì? 2

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

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

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

3 Ngôn ngữ CSS 3

4 Ngôn ngữ Javascript 3

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

1 Đặc Tả Giao Diện 5

1.1 Giao diện trang chủ 5

1.2 Giao di ện trang đăng ký 6

1.3 Giao di ện trang đăng nhậ p 7

1.4 Giao diện trang danh m ục sách (Th ể loại sách) 8

1.4.1 Giao diện danh mục Sách Kinh Tế - Kỹ Năng 9

1.4.2 Giao diện danh mục Sách Nghệ Thuật – Tâm Lý 10

1.4.3 Giao diện danh mục Sách Văn Học Việt Nam 11

1.4.4 Giao diện danh mục Sách Văn Học Nước Ngoài 12

1.4.5 Giao diện danh mục Sách Thiếu Nhi 13

1.4.6 Giao diện danh mục Sách Giáo D ục Gia Đình 14

1.4.7 Giao diện danh mục Sách L ch S ị ử 15

1.4.8 Giao diện danh mục Sách Văn Hóa Nghệ Thuật 16

1.4.9 Giao diện danh mục Sách Khoa Họ – Triết Học 17 c 1.4.10 Giao diện danh mục Sách Y Học – Thực Dưỡng 18

1.5 Giao diện Sách Kinh Tế - Kỹ Năng Error! Bookmark not defined.

1.6 Giao diện trang chi tiết sản phẩm Error! Bookmark not defined.

1.6.1 Giao diện sách Ma Bùn Lưu manh và nhữ ng câu chuy n khác c a Nguy n Trí 19 ệ ủ ễ 1.7 Phần gi i thi ớ ệu sách Error! Bookmark not defined.

1.8 Phần đánh giá của độc giả Error! Bookmark not defined.

1.9 Giao diện giỏ hàng Error! Bookmark not defined.

1.9.1 Giao diện khách hàng/đăng nhậ p Error! Bookmark not defined.

1.9.2 Giao diện địa ch giao hàng 20 ỉ

1.9.3 Giao diện thanh toán, đặt mua 20

2 Giao di n tài kho n ệ ả Error! Bookmark not defined. 2.1 Giao diện danh sách đơn hàng Error! Bookmark not defined 3 Sơ đồ giao di n website ệ ……… ………….……….27

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

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

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

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

TÀI LI U KHAM KH O 30 Ệ Ả DANH MỤC HÌNH Hình 1.1 Giao diện trang ch 5ủ Hình 1.2 Giao diện trang đăng ký 6

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

Hình 1.4 Giao diện trang danh m ục sả n ph m 8ẩ Hình 1.4.1 Giao diện danh m c Sách Kinh Tụ ế-Kỹ Năng 9

Hình 1.4.3 Giao diện danh m ục Sách Văn Học Việ t Nam 11

Hình 1.4.4 Giao diện danh mục Sách Văn Học Nước Ngoài 12 Hình 1.4.5 Giao diện danh m c Sách Thi u Nhi 13ụ ế

Hình 1.4.6 Giao diện danh m c Sách Giáo D c- ụ ụ Gia Đình 14 Hình 1.4.7 Giao diện danh m c Sách L ch S 15ụ ị ử

Hình 1.4.9 Giao diện danh m c Sách Khoa Hụ ọc – Tri t H c 17ế ọ

Hình 1.4.10 Giao diện danh m c Sách Y Hụ ọc Thực Dưỡng - 18 Hình 1.6.1 Giao diện Sách Ma Bùn Lưu manh và những câu chuy n khác cệ ủa Nguyễn Trí 21 Hình 1.7 Giao diện trang gi i thi u sách 22ớ ệ

Hình 1.8 Giao diện trang đánh giá của độc giả 23 Hình 1.9 Giao diện giỏ hàng 24 Hình 1.9.1Giao diện khách hàng m i 24ớ

Hình 1.9.2 Giao diện địa chỉ giao hàng 25 Hình 1.9.3 Giao diện thanh toán, đặt mua 25 Hình 2.0 Giao diện thông tin tài kho n 26ả

Hình 2.1 Giao diện danh sách đơn hàng 26

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

1 Tên Đề Tài

+ THIẾT KẾ WEBSITE BÁN SÁCH CHO NHÀ SÁCH XYZ

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

+ Thiết kế Website bán sách cho nhà sách xyz

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

+ Quảng bá thương hiệu

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

+ Đối tượng nghiên c u ch y u là các lo i sách vứ ủ ế ạ ới nhiều thể lo i.ạ

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

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mớ ủa c a hàng i c ử+ Trang Gi i thiớ ệu: Đây là trang giúp cho khách hàng xem biết thêm v thông tin ềcủa Nhà sách

+ Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ ớ v i Nhà sách

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

1 Giới Thiệu Về HTML

1.1 HTML là gì?

HTML (Hypertext Markup Language-Ngôn ngữ đánh d u siấ êu văn bản) ngôn làngữ đánh d u ấ chuẩn dùng so n th o ạ ả các li u World Wide Wtài ệ eb, chỉ mrõ ộ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 đoạ mã ệc n l nh để chỉ cho các ình duy t tr ệ(Web browsers) cách ể thị hi n 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ế ới các tài li u khác t t ệ

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 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 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 để ở mrộ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 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ác,

Hình 1.1 Giao diện trang chủ

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

- Phần 1: Logo c a trang web ủ

- Phần 2 - Menu ngang: Bao g m các m c: trang chồ ụ ủ, tài khoả (đăng nhập, đăng n ký), gi hàng M i danh m c liên kỏ ỗ ụ ết đến m t trang v i n i dung khác nhau ộ ớ ộ

- Phần 3: Ch y ch ngang b ng Marquee ạ ữ ằ

- Phần 4: Bên trái là danh mục sách, các thể loại sách

- Phần 5: Bên ph i hi n th s ả ể ị ố điện tho i hotline và hạ ỗ trợ trục tuyến

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

- Phần 7: Footer

1.2 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 1.2 Giao diện trang đăng ký

1.3 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 1.3 Giao diện trang đăng nhập

1.4 Giao diện trang danh mục sách (Thể loại sách)

➢ 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 ạ ả ẩ ầ

Hình 1.4 Giao di n trang danh mệ ục sả n ph m ẩ

1.4.1 Giao diện danh mục Sách Kinh Tế Kỹ Năng-

Hình 1.4.1 Giao diện danh mục Sách Kinh Tế-Kỹ Năng

1.4.2 Giao diện danh mục Sách Nghệ Thuật Sống – Tâm Lý

Hình 1.4.2 Giao diện danh mục Sách Nghệ Thuật Sống – Tâm Lý

1.4.3 Giao diện danh mục Sách Văn Học Việt Nam

Hình 1.4.3 Giao diện danh mục Sách Văn Học Việt Nam

1.4.4 Giao diện danh mục Sách Văn Học Nước Ngoài

Hình 1.4.4 Giao diện danh mục Sách Văn Học Nước Ngoài

1.4.5 Giao diện danh mục Sách Thiếu Nhi

Hình 1.4.5 Giao diện danh mục Sách Thiếu Nhi

1.4.6 Giao diện danh mục Sách Giáo Dục – Gia Đình

Hình 1.4.6 Giao diện danh mục Sách Giáo Dục Gia Đình -

1.4.7 Giao diện danh mục Sách Lịch Sử

Hình 1.4.7 Giao diện danh mục Sách Lịch Sử

1.4.8 Giao diện danh mục Sách Văn Hóa Nghệ Thuật

Hình 1.4.8 Giao diện danh mục Sách Văn Hóa Nghệ Thuật -

1.4.9 Giao diện danh mục Khoa Học - Triết Học

Hình 1.4.9 Giao diện danh mục Sách Khoa Học – Triết Học

1.4.10 Giao diện danh mục Sách Y Học – Thực Dưỡng

Hình 1.4.10 Giao diện danh mục Sách Y Học Thực Dưỡng -

1.5 Giao diện Sách Kinh Tế Kỹ Năng -

Hình 1.5 Giao diện Sách Kinh Tế Kỹ Năng

1.6 Giao diện trang chi tiết sản phẩm

➢ 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 tin chi tiết v s n phề ả ẩm

➢ Trong giao diện cho người dùng, ch n hi n th theo S n Phọ ể ị ả ẩm đã được kích chọn

ở trang chủ

Hình 1.6.0 Giao diện sách lập kế hoạch kinh doanh hiệu quả

1.6.1 Giao diện sách Ma Bùn Lưu manh và những câu chuyện khác của Nguyễn Trí

Hình 1.6.1 Giao di ện Sách Ma Bùn Lưu manh và nhữ ng câu chuy n khác c a ệ ủ

Nguyễn Trí

1.7 Ph n giầ ới thiệ u sách

Hình 1.7 Giao di n trang gi i thi u sách ệ ớ ệ

1.8 Ph ần đánh giá của độc giả

Hình 1.8 Giao di n trang ệ đánh giá của độc gi ả

1.9 Giao di ện giỏ hàng

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

1.9.1 Giao diện khách hàng/đăng nhập

Hình 1 9.1Giao di ện khách hàng m ớ i

1.9.2 Giao di ện đị a ch giao hàngỉ

Hình 1.9.2 Giao di ện đị a ch giao hàng ỉ

1.9.3 Giao diện thanh toán, t mua đặ

Hình 1.9.3 Giao di ện thanh toán, đặ t mua

2 Giao diệ n tài kho ản

Hình 2.0 Giao di ện thông tin tài kho n ả

2.1 Giao diện danh sách đơn hàng

Hình 2.1 Giao di ện danh sách đơn hàng

3 Sơ đồ giao diện website

Trang Chủ

Tài khoản

giỏ hàng

Sản phẩm đã chọn

Khách hàng mới/đăng

hàng

Thanh toán, đặt mua

Danh

mục sách

Thể loại sách

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

Trong thời bu i công nghi p hóa hi n nay, vi c buôn bán qua mổ ệ ệ ệ ạng đã trở nên ph ổbiến với hầu hết mọi người Đây cũng là xu hướng trong xã hội hiện nay khi mọi người chỉ ớ v i m t cú nhấp chuộ ột cũng có thể ễ dàng đặt mua đượ d c sản phầm mà mình ưng ý một cách d dàng và không ph i m t thễ ả ấ ời gian đi đế ận nơi đển t mua Vi c mua bán này ệgiúp ti t ki m th i gian và ti n b c khi mế ệ ờ ề ạ ọi người có th l a ch n s n ph m v i giá c ể ự ọ ả ẩ ớ ả

đa dạng và nhu cầu cá nhân của từng người

Vì th , sau khi ti n hành kh o sát thì em quyế ế ả ết định Thi t k m t trang web bán ế ế ộsách mà cụ thể là “Thiế ế website bán sách cho Nhà Sách XYZt k ”với các chức năng cơ bản c n thi t cho m trang web buôn bán c n có vì em th y nhu cầ ế ột ầ ấ ầu mua s m ắ và đây cũng là một thị trường tiềm năng có thể khai thác buôn bán

Website “MyBook” thứ nhất dùng để qu ng bá cho sân, th hai là kênh thông tin cho ả ứmọi người, thứ ba là một địa chỉ tin cậy để những khách hàng yêu thích thời trang tìm mua được cho mình những sản phẩm chất lượng Qua quá trình nghiên cứu và cố gắng thực hiện dưới sự hướng d n t n tình cẫ ậ ủa Giảng viên, s ự giúp đỡ ủ c a b n bè trong khóa ạ

học đ án nghiên c u th hiồ ứ ể ện được những điều sau:

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

- Thiết k thành công website bán sáchế , đá ứng đượp c yêu c u cầ ủa người sử dụng

- Tìm hi u và nể ắm cơ bản được nh ng công cữ ụ để Thiết kế website như: Adobe

Dreamweaver CS6, các ngôn ngữ lập trình Website như: HTML, Javascript, CSS

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

2 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

3 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ẽ ếp t c tìm hiti ụ ểu sâu hơn về công ngh này, ệnhằm mục đích Thiế ế website: t k