Tiểu luận môn học thiết kế web đề tài thiết kế website bán điện thoại di động

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 ĐIỆN THOẠI DI ĐỘNG Nội dung nhận xét: .... nhìn nh

Trang 1

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

TÊN TIỂU LUẬN

GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: TRƯƠNG VŨ LINH

MSSV: 1824801030194 LỚP: D18PM03

Trang 2

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

TÊN TIỂU LUẬN

GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: TRƯƠNG VŨ LINH

MSSV: 1824801030194 LỚP: D18PM03

Trang 3

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 ĐIỆN THOẠI DI ĐỘ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)

Trang 4

NGUYỄN HỮU VĨNH

MỤC LỤC

Table of Contents

LỜI NÓI ĐẦU 4

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

1 T ÊN Đ T Ề ÀI 5

2 M ỤC T IÊU CỦA Đ T Ề ÀI 5

3 Ý N GHĨA C ỦA Đ T Ề ÀI 5

4 Đ ỐI T ƯỢNG C ỦA Đ T Ề ÀI 5

5 M ỘT S T Ố RANG C HÍNH C ỦA W EBSITE 5

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

1 G IỚI T HIỆU V Ề HTML 6

1.1 HTML LÀ GÌ ? 6

1.2 C ÔNG DỤNG CỦA HTML 6

1.3 Đ ỊNH DẠNG CỦA HTML 6

2 G IỚI THIỆU VỀ A DOBE D REAMWEAVER 6

3 N GÔN NGỮ CSS 7

4 N GÔN NGỮ AVASCRIPT J 7

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

1 Đ ẶC T G Ả IAO D IỆN 9

1.1 G IAO DIỆN TRANG CHỦ 9

1.2 G IAO DIỆN TRANG GIỚI THIỆU 11

1.3 G IAO DIỆN TRANG ĐĂNG KÍ 12

1.4 G IAO DIỆN TRANG ĐĂNG NHẬP 13

1.5 G IAO DIỆN TRANG ĐIỆN THOẠI THEO HÃNG 14

1.6 G IAO DIỆN THEO GIÁ 18

18

1.6.1 G IAO DIỆN GÍA DƯỚI 5 TRIỆU 18

1.6.2 G 5 – 10 .19

Trang 5

1.6.4 G IAO DIỆN GIÁ TỪ 15 – 20 TRIỆU 21

1.6.5 G IAO DIỆN GIÁ TRÊN 20 TRIỆU 22

1.7 G IAO DIỆN CHI TIẾT SẢN PHẨM 23

M ỤC ĐÍCH CHO NGƯỜI DÙNG XEM TÊN SẢN PHẨM GIÁ VÀ THÔNG TIN CHI : , TIẾT VỀ SẢN PHẨM 23

1.7.5 G IAO DIỆN CHI TIẾT ĐIỆN THOẠI X IAOMI 27

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

TÀI LIỆU KHAM KHẢO 30

LỜI NÓI ĐẦU

Hiện nay thới giới nói chung và việt nam nói riêng Công nghệ thông tin đang phát triển một cách rất nhanh chóng thay vào đó việc mua sắm online đang dần được ưa chuộng Chỉ cần một cú click chuột

là người dùng có thể sở hữu sản phẩm họ cần nhìn nhận được điều đó

em đã thiết kế một trang web về mảng điện thoại “ web bán điện thoại

di động iphone” mục đích là giúp người dùng lựa chọn được những sản phẩm điện thoaị di động thông minh phù hợp với nhu cầu của người dùng và theo kịp với nền công nghiệp 4.0 Đâ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:

Trang 6

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

Trang 7

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

1 Tên Đề Tài.

+ THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG

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

+ Thiết kế Website bán điện thoại (cá nhân là chủ sở hữu)

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

+ Đưa sản phẩm đến đến gần hơn với người tiêu dùng

+ Quảng bá thương hiệu của những sản phẩm điện thoại mới đến người dùng

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

+ Đối tượng nghiên cứu chủ yếu là các sản phẩm điện thoại thông minh như iphone, samsung, oppo , vivo

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

1.1.1 + Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mới của cửa hang điện thoại di động

1.1.2 + Trang Giới thiệu: Đây là trang giúp cho khách hàng xem biết thêm về thông tin về shop bán điện thoại

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

của trang

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

của trang

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

Trang 8

CHƯƠNG 2

Trang 9

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

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) là ngônngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trangWeb đượ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ằngcá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ôitrườ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

Trang 10

Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh cáctrang 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 trongwebsite 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 MacromediaFireworks 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àotrang 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íchcủ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épbạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trangweb 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 đốitượ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 giagiá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

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

Trang 11

Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thực hiện chứcnă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ậptrình Java

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trìnhduyệ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

Trang 12

Chương 3 Thiết kế chương trình

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 : cho phép người dùng xem danh sách các sản phẩm điện thoại nổi

bật và mới nhất có trên thị trường

Trong giao diện cho người dùng chọn kiểu hiển thị theo từng sản phẩm

Mô tả chức năng : cho phép người dùng xem thông tin sản phẩm

Hình 1.1 Giao diện trang chủ

Trang 13

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ủ, giới thiệu, liên hệ, đăng ký,đăng nhập 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 các sản phẩm, thương hiệu được liên kết với cáctrang khác nhau và lịch ngày tháng năm

- 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

- 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 chitiết sản phẩm

- Phần 7: Footer

Trang 14

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 khái quát về shop

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

Trang 15

1.3 Giao diện trang đăng kí

Mục đích : Cho phép người dùng đăng kí tài khoản để trở thành khách hàng củatrang

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

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

Trang 16

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

Trang 17

1.5 Giao diện trang điện thoại theo hãng

1.5.1 Giao diện điện thoại Iphone

Hình 1.5 Giao diện điện thoại theo hãng

Hình 1.6 Giao diện điện thoại theo giá

Trang 18

1.5.2 Giao diện điện thoại Samsung

Hình 1.5.2 Giao diện điện thoại Samsung

Trang 19

1.5.3 Giao diện điện thoại Oppo

Hình 1.5.3 Giao diện điện thoại Oppo

Trang 20

1.5.4 Giao diện điện thoại Vivo

1.5.5 Giao diện điện thoại Xiaomi

Hình 1.5.4 Giao diện diện thoại Vivo

Trang 21

1.6 Giao diện theo giá

1.6.1 Giao diện gía dưới 5 triệu

Hình 1.5.5 Giao diện diện thoại Xiaomi

Hình 1.6 Giao diện theo giá điện thoại

Trang 22

1.6.2 Giao diện giá từ 5 – 10 triệu

Hình 1.6.1 Giao diện giá dưới 5 triệu

Trang 23

Hình 1.6.2 Giao diện giá từ 5 – 10 triệu

Trang 24

Trang 25

1.6.5 Giao diện giá trên 20 triệu

Trang 26

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

Mục đích : cho người dùng xem tên sản phẩm, giá và thông tin chi tiết về sản phẩm

Hình 1.6.5 Giao diện giá trên 20 triệu

Trang 27

1.6.1 Giao diện chi tiết điện thoại Iphone

Hình 1.7.1 Giao diện chi tiết điện thoại Iphone

Trang 28

1.6.2 Giao diện chi tiết điện thoại Samsung

Hình 1.7.2 Giao diện chi tiết điện thoại Samsung

Trang 29

1.7.3 Giao diện chi tiết điện thoại Oppo

1.7.4 Giao diện chi tiết điện thoại Vivo

Hình 1.7.3 Giao diện chi tiết điện thoại Oppo

Trang 30

1.7.5 Giao diện chi tiết điện thoại Xiaomi

Hình 1.7.4 Giao diện chi tiết điện thoại Vivo

Trang 31

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ênphổ 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ọingười chỉ với một cú nhấp chuột cũng có thể dễ dàng đặt mua đượ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 tận nơi để mua Việc muabá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ẩmvới giá cả đa dạng và nhu cầu cá nhân của từng người

Vì thế , sau khi khảo sát thì em quyết định thiết kế một trang web bán điện thoại mà

cụ thể là “ Thiết kế webside bán điện thoại di động ” với các chức năng cơ bản cầnthiết với một trang web bán hàng cần thiết vì em đã nhìn nhận và thấy được nhu cầumua sắm và đây cũng là một môi trường tiềm năng có thể khai thác

Qua quá trình nghiên cứu và cố gắng thực hiện dưới sự hướng dẫn của giảng viên

và sự giúp đỡ của bạn bè trong khoá học đồ án thực hiện được những điều sau :

Hình 1.7.4 Giao diện chi tiết điện thoại Vivo

Trang 32

- Giao diện webside đơn giản 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

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ềuthiếu sót, mong thầy giúp đỡ em nhiều hơn và em sẽ tiếp tục tìm hiểu sâuhơ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 trong

quá trình sử dụng

Trang 33

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://www.thegioididong.com

Tiêu đề	Thiết Kế Website Bán Điện Thoại Di Động
Tác giả	Trương Vũ Linh
Người hướng dẫn	Th.S Nguyễn Hữu Vĩnh
Trường học	Trường Đại Học Thủ Dầu Một
Chuyên ngành	Thiết kế web
Thể loại	Tiểu luận môn học
Năm xuất bản	2023
Thành phố	Thủ Dầu Một

Định dạng
Số trang	33
Dung lượng	1,71 MB