Tiểu luận môn học thiết kế web xây dựng website bán điện thoại và laptop

NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊNHọ và tên giảng viên: Th.S Nguyễn Hữu Vĩnh Tên đề tài: Xây dựng website bán điện thoại và laptop I.. Khi xã hội ngày càng phát triển, mức sống của 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

XÂY DỰNG WEBSITE

BÁN ĐIỆN THOẠI VÀ LAPTOP

GVHD: Th.S NGUYỄN HỮU VĨNH SVTH: Lê Văn Chung

MSSV: 1824801040059 LỚP: D18HT01

BÌNH DƯƠNG – 7/2020

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

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

Tên đề tài: Xây dựng website bán điện thoại và laptop

I Nội dung nhận xét:

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

MỤC LỤC

PHIẾU CHẤM ĐIỂM ii

MỤC LỤC iii

LỜI NÓI ĐẦU 1

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

I Tên Đề Tài 2

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

III Ý Nghĩa Của Đề Tài 2

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

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

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

I Giới Thiệu Về HTML 3

1 HTML Là Gì? 3

2 Công Dụng Của HTML 3

3 Định Dạng Của HTML 3

II Giới Thiệu Về Adobe Dreamweaver 3

III Ngôn Ngữ CSS 4

IV Ngôn Ngữ JavaScript 5

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

I Giao diện Trang chủ 6

II Danh mục trang giỏ hàng 10

III Giao diện trang Điện thoại 11

IV Giao diện Laptop 13

CHƯƠNG 4 DANH MỤC HÌNH ẢNH 16

I Hình ảnh Trang chủ 16

III Hình ảnh trang Laptop 20

IV Hình ảnh trang giỏ hàng 22

V Hình ảnh trang Thông tin chi tiết 24

CHƯƠNG 5 KẾT LUẬN 26

I Kết quả đạt được 26

II Việc chưa làm được 26

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

CHƯƠNG 6 TÀI LIỆU THAM KHẢO 28

LỜI NÓI ĐẦU

Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và được ứngdụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sốngthường nhật của con người Một điểm tiêu biểu trong việc phát triển các côngnghệ đó phải kể đến việc ứng dụng công nghệ thông tin vào hầu khắp các hoạtđộng Nhờ đó, các công việc được thực hiện nhanh, chính xác và đạt kết quảcao hơn rất nhiều

Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thunhập kinh tế ngày càng được cải thiện thì chiếc điện thoại di động và laptopkhông còn trở nên xa lạ với mọi người nữa mà ngược lại nó là một vật dụngkhông thể thiếu đối với người dân hiện nay Hầu hết mỗi người đều trang bị chomình một chiếc điện thoại phù hợp với nhu cầu và túi

Cùng với các lý do nêu trên, qua tìm hiểu nhóm đồ án được biết việc ứng dụngbán điện thoại di động trực tuyến sẽ giúp cho khách hàng giảm bớt được thờigian và công sức phải đến tận cửa hàng để mua Muốn lựa chọn cho mình mộtchiếc điện thoại ưng ý phù hợp với túi tiền thì tiền của mình Tuy nhiên, vớicuộc sống ngày càng bận rộn như hiện nay thì việc muốn mua một chiếc điệnthoại mình ưa thích thì người tiêu dùng phải đến tận cửa hàng để chọn lựa vìthế sẽ mất khá nhiều thời gian và công sức.khách hàng chỉ cần ngồi bên chiếcmáy tính có nối mạng internet là có thế mua được mặt hàng điện thoại mìnhcần

Do đó nhóm đềề tài ch n th c hi n đềề tài ọ ự ệ “ Xây d ng Website bán đi n tho i di ự ệ ạ

đ ng và laptop cho cty ộ ALIBA

Phần mềm được xây dựng với định hướng giúp việc mua sắm điện thoại củakhách hàng dễ dàng và nhanh gọn hơn, không mất thời gian và công sức

Qua quá trình khảo sát thực tế, tìm hiểu và phân tích thiết kế nhóm đề tài đưa ra bản báo cáo gồm các phần sau để giúp người đọc hiểu rõ về chức năng của

Website

CHƯƠNG 2

CHƯƠNG 3 I Tên đề tài:

CHƯƠNG 4 XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI VÀ LAPTOP

CHƯƠNG 5 II Mục tiêu của đề tài:

CHƯƠNG 6 Xây dựng website bán điện thoại và laptop mang tên ALIBA

CHƯƠNG 7 III Ý nghĩa của đề tài:

 Giúp cho mọi người có thể dễ dàng tìm hiểu và thuận tiện trong việc mua sắm cácloại điện thoại và laptop

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

CHƯƠNG 8 IV Đối tượng của đề tài:

CHƯƠNG 9 Đối tượng nghiên cứu chủ yếu là các loại điện thoại và laptop trên thếgiới

CHƯƠNG 10 V Một số trang chính của website:

 Trang chủ: Đây là trang giới thiệu sơ lược về các loại điện thoại và laptop

 Tìm kiếm: Tại đây khách hang có thể tìm kiếm tên sản phẩm mình cần mua mộtcách nhanh chóng bằng việc nhấp tên sản phẩm lên mục tìm kiếm và bấm tìm kiếmthì sản phẩm khách hang yêu cầu sẽ hiện ra

 Điện thoại : Tại đây, khách hàng có thể tìm được chiếc điện thoại mình yêu thíchđược sắp xếp theo tên các loai điện thoại

 Laptop: Quý khách có thể tìm hiểu về các loại laptop mới cũng như đang đượcgiảm giá tại đây

 Thông tin hỗ trợ: Tại đây sẽ có các thông tin về showroom (địa chỉ, số điện thoại,

…)

CHƯƠNG 11

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

CHƯƠNG 13 I Giới thiệu về HTML:

CHƯƠNG 14 1 HTML là gì?

CHƯƠNG 15 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

CHƯƠNG 16 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

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

CHƯƠNG 18 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

CHƯƠNG 19 2 Công dụng của HTML:

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

CHƯƠNG 21 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ựctuyến bằng cách dùng các liên kết được chèn vào trang web

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

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

CHƯƠNG 24 3 Định dạng của HTML:

CHƯƠNG 25 Là một tập tin có phần mở rộng là .htm hoặc .html

CHƯƠNG 26 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 đó.

CHƯƠNG 27 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

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

CHƯƠNG 28 II Giới thiệu về Adobe Dreamweaver:

CHƯƠNG 29 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ụngweb 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íchlàm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn nhữngcông cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn

CHƯƠNG 30 Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạntạ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ànhphầ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ănbả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 trongMacromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vàoDreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việcchèn Flash vào trang web

CHƯƠNG 31 Dreamweaver cũng cho phép bạn thiết kế các ứng dụng web động dựatheo 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ữngcô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ệuXML trên trang web của bạn

CHƯƠNG 32 Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mìnhnhữ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

CHƯƠNG 33 III Ngôn ngữ CSS:

CHƯƠNG 34 CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bàycho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

CHƯƠNG 35 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

CHƯƠNG 36 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

CHƯƠNG 37 CSS đưa ra phương thức áp dụng từ một file CSS ở ngoà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ínhtrình bày nào đó.

CHƯƠNG 38 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 vihơn

CHƯƠNG 39 IV Ngôn ngữ JavaScript:

CHƯƠNG 40 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

CHƯƠNG 41 Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thựchiện chức năng này Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng củangôn ngữ lập trình Java

CHƯƠNG 42 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

CHƯƠNG 43 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 JavaScriptkhông là ngôn ngữ hướng đối tượng như C++/Java

CHƯƠNG 44

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

CHƯƠNG 45 GIAO DIỆN CHƯƠNG TRÌNH

I Giao diện Trang chủ:

 Mục đích: Chức năng cho phép khách hàng xem các loại điện thoại và laptop nổibật cũng như các mặt hàng khuyến và được cập nhật hàng ngày

 Mô tả chức năng: Ngoài việc cho khách hàng xem các loại xe theo từng mục, trangcòn cho phép khách hàng có thể truy cập vào các trang khác ở phần menu nằm ngang

 Phần 1: Gồm mục Tìm kiếm cho phép khách hàng tìm kiếm các sản phẩm màkhách hàng cần mua cũng như đang cần tìm mà không thấy

 Phần 2: Gồm có thanh menu nằm ngang liên kết đến các trang Trang chủ, Doanh

mục điện thoại, Doanh mục Laptop.

 Phẩn 3: Gồm các ảnh nền thay đổi theo thời gian nhất định và có thể tùy chỉnh

bằng 2 buttons tiến và lui

 Phần 4: Đây là mục của các loại sản phẩm có thể bạn sẽ thích

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

 Phần 7: Là phần footer của trang web, gồm có 6 mục.

- Địa chỉ, phone, Email, Chính ách bảo hành, Hướng ,dẫn mua online, Chăm

sóc khách hàng, Tuyển dụng, khuyến mãi, Chính sách đổi trả

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

III DOANH MỤC GIỎ HÀNG

IV Danh mục trang điện thoại :

- Khi khách hàng di chuột đến mục Điện thoại trên thanh menu, nhấp vào sẽhiện ra 1 menu nhỏ gồm có tên của 4 mục : iphone, Samsung, Oppo, Khác Bêndưới từng dòng điện thoại có tên từng hãng điện thoại theo dòng Khách hàngmuốn mua của hãng nào mà mình ưng ý thì nhấp chuột đến mục cần mua vànhấn vào sẽ hiện ra các sản phẩm của hãng mà khách hàng đã chọn

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

V Giao diện trang Laptop :

- Khi khách hàng di chuột đến mục Laptop trên thanh menu, nhấp vào sẽ hiện racác dòng laptop mới và đang thịnh hành ở đây sẽ các mẫu laptop được cập nhậttheo thị trường liên tục

CHƯƠNG 4 DANH MỤC HÌNH ẢNH

I Hình ảnh Trang chủ:

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

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

II Hình ảnh trang danh mục menu Điện Thoại :

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

VI Hình ảnh trang LAPTOP :

VII Hình ảnh Giỏ Hàng

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

CHƯƠNG 5: KẾT LUẬN

Trong thời đại ngày nay, nếu như bạn có một showroom để bán điện thoại vàlaptop nhưng lại không có một trang web để giới thiệu các loại điện thoại và laptop màmình kinh doanh thì sẽ dẫn đến hiện tượng khách hàng muốn mua điện thoại và laptopnhưng lại mù mờ về thông tin của chiếc điện thoại hay chiếc laptop định muadaanxđến lo sợ chất lượng cũng như nhiều rủi ro Đồng thời khách hàng cũng không biếtđược các điện thoại hay laptop nào đang thịnh hành hay giảm giá cũng như các ưu đãi

mà các hãng điện thoại và laptop đã đưa ra Ngoài ra, khách hàng còn phải đến tận nơiphải mua thay qua việc mua sắm qua wed của cửa hàng Đi kèm theo là các sự cố nhưkhông biết địa chỉ cụ thể của cửa hàng hay cách liên hệ để được tư vấn cũng như hỗtrợ một cách chu đáo

Vì thế, sau khi tiến hành khảo sát em quyết định thiết kế ra trang website

ALIBA này với các chức năng cơ bản dành cho khách hàng có thể dễ dàng lựa chọn

được chiếc điện thoại cũng như laptop ưng ý và hợp với sở thích của bản thân

Website ALIBA có thể cho khách hàng có thể dễ dàng truy cập từ xa thông quainternet, từ đó góp phần quảng bá thương hiệu đến rộng rãi mọi người Qúa trìnhnghiê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:

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

Sau thời gian thực hiện đề tài, chương trình đã hoàn thành và đạt được một sốkết quả sau:

R Hiểu rõ quy trình bán điện thoại di động trực tuyến

R Xây dựng thành công website bán điện thoại di động và laptop đáp ứngnhu cầu đặt ra của người tiêu dùng

R Tìm hiểu và nắm khá rõ về các công cụ để xây dựng website như: SQL

2000, Visual Stadio 2008

R Giao diện của chương trình thân thiện, dễ sử dụng,

Chương 5 Kết luận

R Website đã giúp người dùng tiết kiệm thời gian, công sức để có được mộtsản phẩm ưng ý Dễ dàng quản lý thông tin chi tiết người dùng, các thôngtin về sản phẩm và những đơn hàng của người mua sản phẩm từ đó sẽthuận tiện cho việc thanh toán và giao hàng

R Thực hiện kiểm thử phần mềm ở mức độ lập trình

II 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

 Website chưa được thử nghiệm trên mạng Internet

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

- Do thời gian và năng lực có hạn nên website của nhóm mới chỉ đi sâu vàochức năng bán sản phẩm

- Đề tài hướng phát triển website trở thành một website bán hàng chuyênnghiệp Cung cấp đầy đủ những mặt hàng hiện đang có trên thị trườngvới giá cả hợp lý, phải chăng Đi kèm với bán hàng là những dịch vụ uytín và chất lượng nhất để phục vụ đến khách hàng

- Vì thế đề tài cũng còn nhiều thiếu sót, mong thầy cô giúp đỡ chúng em nhiềuhơ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 hoànthiện 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ơnvới khách hà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

CHƯƠNG 6 TÀI LIỆU THAM KHẢO

1 Th.S Nguyễn Hữu Vĩnh, Thiết kế Website, Trường Đại học Thủ Dầu Một.

2 https://www.hiepsiit.com