ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI : THIẾT KẾ WEBSITEMUA BÁN SMARTPHONE. TS. LÊ TÂN

Các ứng dụng và sản phẩm công nghệ ngày một đóng vai tròquan trọng trong đời sống của chúng ta.. HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âmthanh mà còn cho phép nhún

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

Đà nẵng, tháng … năm 2021

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI THIẾT KẾ WEBSITE MUA

BÁN SMARTPHONE

Đà Nẵng, tháng … năm 2021

MỞ ĐẦU

Hiện nay, các công nghệ tiên tiến ngày càng phát triển ngày càng mạnh mẽ và đượcứng dụ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ống thườngnhật của con người Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kểđến việc ứng dụng công nghệ thông tin vào hầu hết 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 thu nhậpkinh tế ngày càng được cải thiện thì chiếc điện thoại di động không còn trở nên xa lạ vớimọi người nữa mà ngược lại nó là một vật dụng không thể thiếu đối với người dân hiệnnay Hầu hết mỗi người đều trang bị cho mình một chiếc điện thoại phù hợp với nhu cầu

và túi tiền của mình Tuy nhiên, với cuộc sống ngày càng bận rộn như hiện nay thì việcmuốn mua một chiếc điện thoạ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

Vì vậy, qua tìm hiểu nhóm đồ án quyết định tạo ra một trang web bá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ời gian và công sức phải đếntận cửa hàng để mua Muốn lựa chọn cho mình một chiếc điện thoại ưng ý phù hợp vớitúi tiền thì khách hàng chỉ cần ngồi bên chiếc máy tính có nối mạng internet là có thếmua được mặt hàng điện thoại mình cần

Do đó nhóm đề tài chọn thực hiện đề tài “Thiết kế Website bán điện thoại“ 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ủa khách hàng dễdàng và nhanh gọn hơn, không mất thời gian và công sức

11

LỜI CẢM ƠN

Để hoàn thành bài báo cáo này trước hết chúng em xin gửi đến quý thầy,

cô của Khoa Công nghệ thông tin và truyền thông – trường Đại học ĐàNẵng lời cảm ơn chân thành

Đặc biệt, em xin gửi đến thầy Nguyễn Đức Hiển, người đã tận tình giúp

đỡ chúng em hoàn thành bài báo cáo này lời cảm ơn sâu sắc nhất

Trong quá trình làm bài báo cáo này khó tránh khỏi sai sót, mong cácthầy, cô bỏ qua Đồng thời do trình độ lí luận cũng như kinh nghiệm thựctiễn còn hạn chế nên bài báo cáo không thể tránh khỏi thiếu sót, em mongnhận được ý kiến đóng góp của thầy, cô để em có thể học thêm được nhiềukinh nghiệm và hoàn thành tốt hơn trong các bài báo cáo sắp tới

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Chữ ký GVHD

13

MỤC LỤC

Trang

Chương 1 Giới thiệu 1

1.1 Lý do chọn đề tài 1

1.2 Mục tiêu 1

1.3 Nội dung chính 1

1.4 Kết quả: 1

Chương 2 Nghiên cứu tổng quan 2

2.1 Tìm hiểu về các ngôn ngữ lập trình 2

2.1.1 Ngôn ngữ HTML5 2

2.1.2 Ngôn ngữ CSS3 3

2.2 Một số thư viện hỗ trợ 4

2.2.1 Thư viện Javascript 4

2.2.2 Thư viện JQUERY 4

Chương 3 Phân tích thiết kế hệ thống 6

3.1 Khảo sát và đặc tả yêu cầu 6

3.1.1 Yêu cầu về giao diện 6

3.1.2 Yêu cầu về chức năng 6

3.1.3 Yêu cầu về hệ thống 6

Chương 4 Triển khai xây dựng 7

4.1 Trang chủ 7

Chương 5 Kết luận và Hướng phát triển 14

5.1 Kết luận 14

5.1.1 Ưu điểm 14

5.1.2 Nhược điểm 14

5.2 Hướng phát triển 14

Chương 1 Giới thiệu

1.1 Lý do chọn đề tài

Thế giới ngày càng phát triển, đời sống con người ngày càng nâng cao vàhiện đại hóa Các ứng dụng và sản phẩm công nghệ ngày một đóng vai tròquan trọng trong đời sống của chúng ta

Hằng ngày, các nhu cầu của chúng ta như ăn uống, xem phim , nghe nhạc,mua sắm hầu như đều có sự trợ giúp từ công nghệ và internet

7Phone là một trong những web site đáp ứng nhu cầu mua sắm online vàthương mại điện tử áp dụng công nghệ thông tin TapTap.com có hoạt độngchính là bán các sản phẩm smartphone qua mạng và sẽ có xu hướng mở rộngsau này 7Phone chuyên phân phối sản phẩm từ các công ty và thương hiệu nổitiếng trong cũng như ngoài nước như Samsung, Vinsmart, Nokia, Xiaomi,Oppo, để bán lẻ cho người tiêu dùng Việc giao dịch diễn ra ngay tại website,thông qua các phương thức thanh toán như ATM, MoMo, Paypal,

- Có thể mua và đặt hàng qua số điện thoại mà không cần phải đăng

ký tài khoản mới

1.3 Nội dung chính

- Thiết kế, xây dựng giao diện website

- Lên ý tưởng các chức năng chính cho website

- Tìm hiểu nhu cầu, xu hướng của khách hàng

Chương 2 Nghiên cứu tổng quan

2.1 Tìm hiểu về các ngôn ngữ lập trình

2.1.1 Ngôn ngữ HTML5

HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn bảnđược sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTMLđược tạo nhờ dùng các thẻ và các phần tử của HTML File được lưu trên máychủ dịch vụ web với phần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽđọc tập tin HTML và hiển thị chúng dưới dạng trang web Các thẻ HTML sẽđược ẩn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác: hình ảnh,media Với các trình duyệt khác nhau đều hiển thị một tập HTML với một kếtquả nhất định Các trang HTML được gửi đi qua mạng internet theo giao thứcHTTP HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âmthanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữkịch bản như Javascript để tạo hiệu ứng động cho trang web Để trình bàytrang web hiệu quả hơn thì HTML cho phép sử dụng kết hợp với CSS HTMLkhông những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còncho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản nhưJavascript để tạo hiệu ứng động cho trang web

HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổchức World Wide Web Consortium còn được viết tắc là W3C Trước đó thìHTML xuất bản theo chuẩn của RFC HTML được tương thích với mọi hệđiều hành cùng các trình duyệt của nó Khả năng dễ học, dễ viết là một ưuđiểm của HTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản,chúng ta có thể dùng word, notepad hay bất cứ một trình soạn thảo văn bảnnào để viết và chỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã có thể tạo

ra một file chứa HTML Hiện nay, phiên bản mới nhất của HTML là HTML5với nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiềuđặc biệt hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin.Một tập tin HTML bao gồm trong đó là các đoạn văn bản HTML, được tạo lênbởi các thẻ HTML HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc

độ và độ thích ứng cao mà chính là khả năng hỗ trợ API (ApplicationProgramming Interface - giao diện lập trình ứng dụng) và DOM (DocumentObject Model – các đối tượng thao tác văn bản)

Ưu điểm:

- Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên

hỗ trợ và cộng đồng sử dụng cực lớn Sử dụng mượt mà trên hầu hết mọitrình duyệt

2

- Có quá trình học đơn giản và trực tiếp.

- Mã nguồn mở và hoàn toàn miễn phí

- Được dùng chủ yếu cho web tĩnh Đối với các tính năng động, bạn cần

sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP

- Nó có thể thực thi một số logic nhất định cho người dùng Vì vậy, hầuhết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng cácyếu tố, như là headers hay footers

- Một số trình duyệt chậm hỗ trợ tính năng mới

- Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt

cũ không render được tag mới)

2.1.2 Ngôn ngữ CSS3

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,…CSS quyđịnh cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính củacác thẻ đó (font chữ, kích thước, màu sắc )

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho cácthuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặctham chiếu từ một file css riêng biệt Hiện nay CSS thường được viết riêngthành một tập tin với mở rộng là “.css” Chính vì vậy mà các trang web có sửdụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn Ngoài ra có thể sử dụng mộttập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức.Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm được sốlượng dòng code mà vẫn đạt được yêu cầu

Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó Dovậy, việc trình bày một nội dung trên các trình duyệt khác nhau là không thốngnhất CSS cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với

sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

Ưu điểm của CSS:

- Tiết kiệm băng thông (bandwith)

- Kết hợp và làm tăng sức mạnh cho HTML

- Có thể “đặt” các đối tượng ở bất cứ vị trí nào trên webpage

- CSS tương thích với hầu hết các trình duyệt

- Hỗ trợ cho việc in ấn webpage

- Hỗ trợ tối đa việc tùy biến webpage

- Hỗ trợ các công cụ tìm kiếm

- Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện

2.2 Một số thư viện hỗ trợ

2.2.1 Thư viện Javascript

JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lậptrình web ở phía client, nó tuân theo chuẩn ECMAScript Là một ngôn ngữlinh động, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình.JavaScript không hề liên quan tới ngôn ngữ lập trình java, được hầu hết cáctrình duyệt ngày nay hỗ trợ Với javascript, ứng dụng web của bạn sẽ trở nên

vô cùng sinh động, mang tính trực quan và tương tác cao JavaScript theophiên bản hiện hành là một ngôn ngữ lập trình kịch bản dựa trên đối tượngđược phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãicho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụngcác đối tượng nằm sẵn trong các ứng dụng Giống Java, JavaScript có cú pháptương tự ngôn ngữ lập trình C “.js” là phần mở rộng thường được dùng chotập tin mã nguồn JavaScript

2.2.2 Thư viện JQUERY

JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resigvào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết íthơn, làm nhiều hơn

JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệuứng động và tương tác Ajax Với jQuery, khái niệm Rapid Web Development

đã không còn quá xa lạ

JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ

đa dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quantrọng được hỗ trợ bởi jQuery:

- Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM

để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung

của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi

là Sizzle

- Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc

xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với cácEvent Handler

- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàutính năng và phản hồi tốt bởi sử dụng công nghệ AJAX

- Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹpmắt mà bạn có thể sử dụng trong các Website của mình

4

- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB(gzipped).

- Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợhầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+,Safari 3.0+, Chrome và Opera 9.0+

Chương 3 Phân tích thiết kế hệ thống

3.1 Khảo sát và đặc tả yêu cầu

3.1.1 Yêu cầu về giao diện

- Website không nên quá phức tạp

- Dung lượng file không quá lớn

- Thanh menu thật đơn giản

- Phải có thông tin liên hệ

- Font chữ đơn giản, dễ nhìn, màu sắc hài hòa

- An toàn và bảo mật dữ liệu

- Kiểm tra website có tương thích với các trình duyệt phổ biến haykhông

3.1.2 Yêu cầu về chức năng

- Xem danh sách sản phẩm

- Đăng ký, đăng nhập

3.1.3 Yêu cầu về hệ thống

- Hệ thống hoạt động nhanh, chính xác

- Có thể nâng cấp, update, bảo trì dễ dàng

- Tính bảo mật và độ an toàn cao

Chương 4 Triển khai xây dựng

3.2 Trang chủ

- Trang chủ là nơi để những sản phẩm mới, sản phẩm nổi bật, tin tức,…để người dùng dề dàng nhìn thấy

6

- Cũng là nơi để các banner quảng cáo các sản phẩm nổi bật theo tháng.

- Thanh menu là nơi phân chia và liên kết tới các trang khác của website

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

Hình 1.2 : Giao diện trang chủ

Hình 1.3 : Giao diện trang chủ

4.2 Trang sản phẩm

- Ở trang sản phẩm người dùng có thể tìm kiếm và tham khảo các hãng điệnthoại như: Iphone, Samsung, Oppo Xiaomi, Vsmart,…

Hình 2 : Giao diện sản phẩm

4.3 Trang thu hồi

- Trang này phục vụ khách hàng có nhu cầu nâng đời điện thoại, thu cũ

đổi mới cho khách hàng

8

Hình 3.1 : Giao diện trang thu hồi

Hình 3.2 : Giao diện trang thu hồi

4.4 Trang khuyến mãi

- Trang hiện các thông tin, tin tức khuyễn mãi đang có và sắp tới của một

dòng sản phẩm hay hàng loạt sản phẩm tại cửa hàng

Hình 4 : Giao diện trang khuyến mãi

4.5 Trang bảo hành

- Tra cứu thông tin sản phẩm đã mua tại cửa hàng

- Chuyên cung cấp các thông tin dịch vụ bảo hành theo sản phẩm khi khách hàng mua tại cửa hàng

Hình 5.1 : Giao diện trang bảo hành

10

Hình 5.2 : Giao diện trang bảo hành

Hình 5.3 : Giao diện trang bảo hành

4.6 Trang sửa chữa

- Nơi cung cấp các thông tin giá cả của linh kiện khi sửa chữa

- Nhận thông tin yêu cầu sửa chữa sản phẩm của khách hàng

Hình 6.1 : Giao diện trang sửa chữa

Hình 6.2 : Giao diện trang sửa chữa

4.7 Trang liên hệ

- Trang này cung cấp các thông tin liên quan đến công nghệ mới nhất cùng với chuyên mục bình luận dành cho khách hàng phản hồi, đánh giá và hỏi đápđến cửa hàng

12

Hình 7.1 : Giao diện liên hệ

Hình 7.2 : Giao diện liên hệ

Chương 5 Kết luận và Hướng phát triển

5.1 Kết luận

5.1.1 Ưu điểm

- Một trang web rất dễ dàng tiếp cận người dùng

- Giao diện bắt mắt, thân thiện với người dùng

- Dễ sử dụng vì có đủ tính năng nhưng lại không quá phức tạp khi sử dụng

- Phân loại các điện thoại theo hãng

- Có trang liên hệ giúp khách hàng có thể trao đổi để thuận tiện

5.1.2 Nhược điểm

- Web vẫn chưa hoàn thiện các tính năng đầy đủ

3.3 Hướng phát triển

- Tiếp tục tìm hiểu và làm các chức năng như so sánh, phân loại

- Cập nhật thêm các thông tin về điện thoại

14

DANH MỤC TÀI LIỆU THAM KHẢO

Trang Website tham khảo :

https://www.thegioididong.com

https://www.nguyenkim.com

https://cellphones.com.vn/

https://hoanghamobile.com/

16