Bài tập lớn cuối kì môn thiết kế web Đề tài website bán xe Đạp Điện, máy Điện

LỜI MỞ ĐẦUTrong môi trường kinh tế đang phát triển, cạnh tranh gay gắt, cùng với sự pháttriển vượt bậc của khoa học kỹ thuật thì công nghệ thông tin và thương mại điện tử là mộttrong nhữ

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

BÀI TẬP LỚN CUỐI KÌ MÔN

THIẾT KẾ WEB

ĐỀ TÀI: WEBSITE BÁN XE ĐẠP ĐIỆN, MÁY

ĐIỆN

Sinh viên thực hiện: HUỲNH TRỌNG ĐỨC

Giảng viên hướng dẫn: ThS NGUYỄN NGỌC HUYỀN TRÂN

Đà Nẵng, tháng 6 năm 2022

ĐẠI HỌC ĐÀ NẴNG 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: WEBSITE BÁN XE ĐẠP ĐIỆN, MÁY

ĐIỆN

Sinh viên thực hiện: HUỲNH TRỌNG ĐỨC 21IT129

Giảng viên hướng dẫn: ThS NGUYỄN NGỌC HUYỀN TRÂN

Đà Nẵng, tháng 6 năm 2022

NHẬN XÉT CỦA GIẢNG VIÊN

………

………

………

………

………

………

………

………

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

Giảng viên hướng dẫn

ThS Nguyễn Ngọc Huyền Trân

MỤC LỤC

8

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 9

1.1 CƠ SỞ LÝ THUYẾT 9

1.1.1 WEBSITE LÀ GÌ? 9

1.1.2 LỢI ÍCH CỦA WEBSITE 9

1.2 TỔNG QUAN VỀ WEBSITE BÁN XE ĐẠP ĐIỆN, MÁY ĐIỆN 9

1.3 KHẢO SÁT THỰC TRẠNG VÀ XÂY DỰNG HỆ THỐNG 10

1.3.1 Thực trạng: 10

1.3.2 Xây dựng hệ thống: 10

1.4 CÔNG NGHỆ SỬ DỤNG 10

1.5 Thông tin về các công cụ thục hiện 11

1.5.1 Phần mềm Sublime Text: 11

1.5.2 HTML 12

1.5.3 CSS 13

1.5.4 JAVASCRIPT 14

1.6 BỐ CỤC TRANG WEB 14

1.7 QUY MÔ TRANG WEB 14

1.8 PHƯƠNG PHÁP NGHIÊN CỨU 14

1.8.1 PHƯƠNG PHÁP 1: 14

1.8.2 PHƯƠNG PHÁP 2: 15

1.8.3 PHƯƠNG PHÁP 3 15

CHƯƠNG 2 TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN 17

2.1 CHỨC NĂNG VÀ NỘI DUNG CỦA TRANG WEB 17

2.2 MÔ PHỎNG HOẠT ĐỘNG CỦA TRANG WEB 17

2.3 TIẾN HÀNH XÂY DỰNG WEBSITE 19

2.3.1 GIAO DIỆN TRANG CHỦ 19

2.3.2 GIAO DIỆN TRANG SẢN PHẨM 20

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

3.1 KẾT LUẬN 23 3.2 HƯỚNG PHÁT TRIỂN 23

Danh mục hình

Hình 1 1 Giao diện Sublime Text 13

Hình 1 2 HTML 14

Hình 1 3 CSS 14

Hình 2 1 Đăng nhập, đăng ký trang web 18 Hình 2 2 Logo .19

Hình 2 3 Giao diện trang chủ 19

Hình 2 4 Giao diện trang chủ 19

Hình 2 5 Giao diện trang các sản phẩm 20

Hình 2 6 Các sản phẩm của cửa hàng và giá bán 20

Hình 2 7 Các sản phẩm của cửa hàng và giá bán 21

Hình 2 8 Các sản phẩm của cửa hàng và giá bán 21

Hình 2 9 Giao diện giỏ hàng 21

LỜI MỞ ĐẦU

Trong môi trường kinh tế đang phát triển, cạnh tranh gay gắt, cùng với sự pháttriển vượt bậc của khoa học kỹ thuật thì công nghệ thông tin và thương mại điện tử là mộttrong những lĩnh vực nổi trội, có nhiều đóng góp thiết thực nhất cho nền kinh tế.Công nghệ thông tin và thương mại điện tử có mặt trong hầu hết các lĩnh vực của cuộcsống và trở thành một công cụ hỗ trợ đắt lực trong công tác quản lý, kinh doanh.Ngày nay, “thương mại điện tử” đem lại rất nhiều lợi ích không những cho các doanhnghiệp mà người tiêu dùng cũng có những lợi ích như tích kiệm thời gian và chỉ phítrông việc mua sắm và tiêu đùng Việc bán hàng qua mạng không còn là hình thức xa lạđối với người tiêu dùng nữa bán hàng qua mạng là hình thức làm việc rất phô biến, hìnhthức này bất kỳ một doanh nghiệp kinh doanh sản phâm đều lựa chọn Vì vậy,em chọn

đề tài “Website bán xe đạp điện, xe máy điện”

Chương 1: GIỚI THIỆU VỀ DỰ ÁN

Chương 2: TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN

Chương 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ và hướngdẫn rất tận tình của các thầy cô thuộc Khoa Khoa học máy tính, Trường Đại học CôngNghệ Thông Tin và Truyền Thông Việt - Hàn, Em xin cảm ơn các thầy cô thuộc bộ mônchuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quý báu và cầnthiết trong suốt thời gian quá để em có thể thực hiện và hoàn thành đồ án của mình Đặcbiệt em xin chân thành cảm ơn cô Nguyễn Ngọc Huyền Trân người đã trực tiếp hướngdẫn chúng em trong thời gian thực hiện đồ án này

Cuối cùng, xin chân thành cảm ơn các bạn trong Ngành Công nghệ thông tin đã ủng

hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chúng tôi trong quátrình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đềtài không tránh khỏi những sai xót Em rất mong nhận được sự thông cảm của quý thầy

cô và mong đón nhận những góp ý của thầy cô và các bạn

Em xin chân thành cảm ơn!

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

1.1 CƠ SỞ LÝ THUYẾT

1.1.1 WEBSITE LÀ GÌ?

Website là một tập hợp các trang thông tin có chứa nội dung dạng văn bản, chữ

số, âm thanh, hình ảnh, video… được lưu trữ trên máy chủ (web server) và có thể truy cập từ xa thông qua mạng Internet

1.1.2 LỢI ÍCH CỦA WEBSITE

- Quảng cáo không giới hạn và tiết kiệm tối đa tiền bạc và thời gian

- Tăng năng lực cạnh tranh

1.2 TỔNG QUAN VỀ WEBSITE BÁN XE ĐẠP ĐIỆN, MÁY ĐIỆN

- Hiện nay, với sự phát triển của công nghệ thông tin, chúng ta có thể tạo ra nhữngwebsite hoặc những trang cung cấp thông tin rất thuận tiện và giảm bớt rất nhiềuthời gian cho việc tìm kiếm của người mua xe điện - Đề tài này nhằm mục tiêuxây dựng một website tìm và mua xe điện cho mọi người

- Xe điện Việt là một mạng lưới đại lý cung cấp xe máy ở thành phó Đà Nẵng Xeđiện Việt nỗi tiếng nhờ có nhiều sản phâm mới, các mặt hàng đa dạng và nhiềuthông tin khuyến mãi - Sự đáp ứng của khách hàng thôi thúc những người quảntrị Xe điện Việt nghĩ đến khả năng mở rộng tầm hoạt động Ban giám đốc công tymuốn tăng số các đại lý trong và ngoài thành phố Tuy thế họ đã nhìn thấy trướcmột vân đề trong tiến trình này đó là không gian cần thiết, việc xây đựng cơ sở vàviệc đi vào hoạt động sẽ chiếm thời gian, và có thê đây là yêu điểm dễ bị các đốithủ cạnh tranh khai thác Vì thế Xe điện Việt đã nghĩ đến khả năng đưa hoạt độngcủa mình lên mạng Internet và dự đi thiết lập một web site tên là Duc.bike Với sựbùng nô của kỹ thuật Internet, mọi người đều nhất trí đây là bước đi đúng của Xeđiện Việt Nghĩa là công ty không chỉ hoạt động với những thị trường chungquanh thành phố Đà Nẵng mà còn xa hơn nữa! Bộ phận EDP của Xe điện Việt đã

đề nghị một sự chuyền đồi cơ chế theo từng giai đoạn Giai đoạn đầu bao gồm:

o Tạo ra cơ chế đặt hàng trên mạng cho khách hàng và duy trì cơ chế cửahàng.phân phi theo qui cách thanh toán bằng tiền mặt Như vậy, phải thiết

kế và phát triển Website Duc.bike như thế nào đề đạt được mục tiêu này.Dưới đây là những chỉ tiết liên quan đến dòng sản phẩm và hệ thống hoạtđộng hiện tại của Xe điện Việt

o Dòng sản phẩm của Xe điện Việt: bao gồm các dòng xe điện như Pega HKBike, DKBike, Giant, Anbico và nhiều các mặt hàng nồi tiếng khác

-1.3 KHẢO SÁT THỰC TRẠNG VÀ XÂY DỰNG HỆ THỐNG.

1.3.1 Thực trạng:

Để xây dựng và phát triển một trang web có thể cạnh tranh được, không phải nhàphát triển nào cũng có thể thành công, có rất nhiều bất cập trong việc quản lý và điềuhành Chính vì những điều đó, chúng em luôn nhận thức tầm quan trọng của người quảntrị, cần có một định hướng cụ thể và một chiến lược lâu dài có thể cạnh tranh được vớicác trang web khác

- Quản lý tin tức: Mã tin, tên tin, mục tin, chi tiết tin tức

- Xử lý được đơn hàng và thống kê

Khách hàng: người lựa chọn mặt hàng để mua Shop ở đây khách hàng tự thao

tác thông qua từng bước cụ thể để có thể mua hàng Trên mạng các mặt hàng được sắpxếp theo thứ tự dễ tìm kiếm

1.4 CÔNG NGHỆ SỬ DỤNG

Thiết kế giao diện Website dựa trên các nền tảng: HTML, CSS, JAVASCRIPS

- Trình biên dịch: Sublime Text

- Trình duyệt Web: Google Chrome

1.5 Thông tin về các công cụ thục hiện

1.5.1 Phần mềm Sublime Text:

Sublime Text 3 là gì?

- Sublime Text 3 là một  trình soạn thảo mã nguồn   đa nền tảng   phần mềm chia sẻ  . Nó hỗ trợ nhiều ngôn ngữ lập trình và ngôn ngữ đánh dấu. Người dùng có thể mở rộng chức năng của nó bằng các plugin , thường do cộng đồng xây dựng và duy trì theo giấy phép phần mềm miễn phí. Để tạo điều kiện cho các plugin, Sublime Text có  API   Python

- Chủ đề:

 Sublime Text chứa 23 chủ đề trực quan khác nhau, với tùy chọn tải xuống các chủ đề bổ sung và định cấu hình các chủ đề tùy chỉnh thông qua các plugin của bên thứ ba

 Tính năng bản đồ nhỏ hiển thị tổng quan thu gọn của toàn bộ tệp ở góc trên bên phải của màn hình. Phần của tệp hiển thị trong ngăn trình chỉnh sửa chính được đánh dấu và nhấp hoặc kéo trong chế độ xem này

sẽ cuộn trình chỉnh sửa qua tệp.

- Sublime Text có một số tính năng ngoài những tính năng này bao gồm:

 Tự động lưu, cố gắng ngăn người dùng mất công việc của họ

 Các phép gán phím có thể tùy chỉnh , một công cụ điều hướng cho phép người dùng gán các phím nóng theo lựa chọn của họ trong cả menu và thanh công cụ

 Tìm khi bạn nhập, bắt đầu tìm kiếm văn bản được nhập khi người dùng nhập mà không yêu cầu hộp thoại riêng

 Chức năng kiểm tra chính tả sửa khi bạn nhập

- Giao diện sử dụng:

Hình 1 1 Giao diện Sublime Text 1.5.2 HTML

- HTML xây dựng cấu trúc cơ bản cho trang web

- HTML là viết tắt của cụm từ Hyper Text Markup Language tạm dịch là ngôn ngữ đánh dấu siêu văn bản

- HTML được sinh ra để tạo nên các trang web với các mẩu thoongtin được trình bày trên World Wide Web

- HTML có thể được viết trên nhiều phần mềm, trình soạn thảo như:

notepad, wordpad, Visual Studio Code hay Sublime Text,… và có định dạng html hoặc htm

Hình 1 2 HTML 1.5.3 CSS

- CSS là viết tắt của Cascading Style Sheets được dung để miêu tả cách trình bày các tài liệu được viết bằng HTML

- Phương thức hoạt động của CSS là nó sẽ dựa vào các vùng chọn (class, id,tag,…) để áp các thuộc tính vào vùng chọn đó

- Các thuộc tính CSS có thể viết lồng vào trong file HTML hoặc có thể viết riêng bên ngoài với định dạng css và trích dẫn vào html

Hình 1 3 CSS

1.5.4 JAVASCRIPT

- JavaScript là một ngôn ngữ kịch bản (scripting language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scripting language) Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client

- Các chương trình JavaScript thường được nhúng (embedded) trực tiếp vào tậptin HTML bằng tag <script> hoặc tích hợp (integrated) vào trang web thông qua một tập tin được khai báo trong tag <link>

- JavaScript có một số đặc điểm sau:

• Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước (precomplie) Trình duyệt dịch script,phân tích và thi hành ngay tức thời

• Lập trình theo cấu trúc (Structured programing)

• Giống như C và Java, có phân biệt chữ HOA và thường

1.6 BỐ CỤC TRANG WEB

- Bố cục đơn giản, dễ nhìn, hiện đại, mang đến sự dễ nhìn cho người dùng

- Chức năng đầy đủ, dễ dàng thực hiện khi truy cập trang Web

- Thanh menu để ở vị trí dễ quan sát, phân loại danh mục rõ ràng và hợp lý giúpngười dùng thuận tiện hơn khi sử dụng

1.7 QUY MÔ TRANG WEB

- Trang Web gồm 5 trang chính và các trang phụ khác

- Mỗi trang tuy bố cục khác nhau nhưng cùng trên một khuôn đặc trưng củatrang Web, mỗi trang đều có sự đặc biệt và điểm thu hút khác nhau

1.8 PHƯƠNG PHÁP NGHIÊN CỨU

1.8.1 PHƯƠNG PHÁP 1 :

- Tên phương pháp: Tham khảo thị trường, các shop bán xe điện offline vàonline

- Cách thực hiện: Đề xuất các nhóm nhân viên khảo sát, thăm hỏi tại các cửahàng bánh tráng trên toàn Thành phố cũng như nhờ các shop tư vấn online tại các trangmạng xã hội hoặc các diễn đàn kinh doanh.

1.8.2 PHƯƠNG PHÁP 2 :

- Tên phương pháp: Tham khảo qua tài liệu, sách báo

- Cách thực hiện: Mượn từ thư viện về kinh doanh, báo chí liên quan đến kinhnghiệm trong khởi nghiệp từ kinh doanh online

1.8.3 PHƯƠNG PHÁP 3

- Tên phương pháp: Tham khảo qua Internet

- Cách thực hiện: Tìm kiếm các thông tin bổ ích liên quan đến các kinh nghiệm

về bán bánh tráng online, tìm các mã nguồn trình duyệt

Tên Phương Pháp Ưu điểm Hạn chế Kết luận

Tham khảo thị trường,

các shop bán xe điện

offline và online

- Khách quan, trung thực

- Tốn kém, mất nhiều thời gian

- Ưu việt nhất

Kết hợp cả 3 phương pháp trên nhưng ưu tiên thực hiện phương pháp 3 để tối ưuhóa việc xây dựng Website bán xe đạp điện, máy điện

CHƯƠNG 2 TRIỂN KHAI VÀ KẾT QUẢ THỰC HIỆN

2.1 Các trang đều chứa liên kết đến các trang còn lại

- Trang chủ:

o Cho phép người dùng tạo tài khoản và đăng nhập

o Tham khảo một số loại xe điện

o Truy cập nhưng trang khác : thông tin xe, liên hệ, …

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

o Tham khảo các hình ảnh về các loại xe điện

- Trang thông tin xe:

o Thông tin và hình ảnh xe

o Tìm kiếm theo quận huyện

o Bấm xem để xem nhiều hơn

o Nhắn tin trực tiếp để trao đổi

- Trang cửa hàng:

o Tìm kiếm khu vực mua xe mà mình mong muốn

- Trang liên hệ:

o Liên hệ với người quản trị website

- Trang khuyến mãi:

o Xem những sản phẩm đang được khuyến mãi

2.2 MÔ PHỎNG HOẠT ĐỘNG CỦA TRANG WEB

- Bước 1 Sau khi truy cập vào trang web

 Nếu khách hàng chưa có tài khoản sẽ đăng kí tại Website, việc đăng kí

sẽ hỗ trợ những chương trình khuyến mãi, hoặc sẽ giảm giá cho những lần mua tiếp theo, tham gia được các mini game mà shop tổ chức Sẽ dễ dàng trở thành fan cứng của shop để nhận những món quà đặt biệt có một không hai mà ít các shop nào có

Hình 2 1 Đăng nhập, đăng ký trang web

- Bước 2 Người dùng có thể bắt đầu trải nghiệm trang web

 Tham quan hàng loạt các sản phẩm mẫu mã hấp dẫn, độc đáo tại trang web

 Tham gia các chương trình ưu đãi hiện đang diễn ra tại trang web

Được tư vấn xuất xứ, cũng như là mong muốn của mình để có thể chọn ra cho mình một

sản phẩm phù hợp với bản thân.

2.3 TIẾN HÀNH XÂY DỰNG WEBSITE

2.3.1 GIAO DIỆN TRANG CHỦ

Hình 2 2 Logo

Hình 2 3 Giao diện trang chủ

Hình 2 4 Giao diện trang chủ

Trang chủ của website: Trang chủ bao gồm tất cả những demo của các phần còn lại.Bao gồm thông tin giới thiệu và video giới thiệu sơ lượt về các sản phẩm, các mục nổi bậtđược nhiều người quan tâm nhất Trang chủ giúp người dùng xem được tổng quan củatrang web.

2.3.2 GIAO DIỆN TRANG SẢN PHẨM

Hình 2 5 Giao diện trang các sản phẩm

Trang sản phẩm bao gồm tất cả các sản phẩm phù hợp với mọi người

Hình 2 6 Các sản phẩm của cửa hàng và giá bán

Hình 2 7 Các sản phẩm của cửa hàng và giá bán

Hình 2 8 Các sản phẩm của cửa hàng và giá bán

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

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

3.1 KẾT LUẬN

Để xây dựng một bài phân tích và thiết kế website, việc đầu tiên cần làm trước hết

đó là phải xây dựng một trang web sát với thực tế Khảo sát hệ thống là một công việc hếtsức quan trọng, nó giúp thu thập giữ liệu một cách chính xác và chi tiết để tiếp tục xâydựng các bước tiếp theo

Thiết kế giao diện với màu sắc và bố cục hài hòa tạo cho người sử dụng cảm thấythoải mái khi tiếp xúc Đồng thời, các tiện ích hay đem lại sự hiệu quả hơn trong khi làmviệc Từ đó, hệ thống góp phần không nhỏ thúc đẩy quá trình thu hút khách hàng và tạp

ra lợi nhuận, giúp cho nhà sản xuất có được lợi nhuận cao nhất

Trên đây là một bài đồ án cơ sở 1 hoàn chỉnh về đề tài thiết kế website bán xe đạpđiện, máy điện Trong quá trình là đồ án, chúng em đã đạt được một số kết quả sau:

- Chương trình dễ sử dụng, đáp ứng được những nhu cầu khách quan của kháchhàng

- Thiết kế chương trình có các chức năng cơ bản đáp ứng được yêu cầu sử dụng

của khách hàng

- Giao diện đẹp mắt thu hút người dùng, không gây nhàm chán trong quá trình

sử dụng, thao tác

- Về bản thân chúng em, chúng em đã học được rất nhiều qua quá trình làm đồ

án cơ sở 1 lần này như kĩ năng làm việc nhóm, kĩ năng soạn thảo văn bản, thiết kếwebsite, thiết kế powerpoint, …

Tuy nhiên, do bị hạn chế về thời gian và còn thiếu kinh nghiệm trong quá trìnhthực hiện đồ án nên vẫn còn nhiều thiếu sót Chương trình có tính chuyên nghiệp chưacao, chưa giải quyết dứt điểm được các vấn đề nảy sinh trong quá trình quản lý