Thiết kế giao diện Website bán thiết bị chơi game

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN
CƠ SỞ LẬP TRÌNH WEB
ĐỀ TÀI:
THIẾT KẾ GIAO DIỆN WEBSITE BÁN THIẾT BỊ
CHƠI GAME
Sinh viên thực hiện

: TRẦN ĐĂNG QUANG
NGUYỄN HOÀI NAM
NGUYỄN HUY KIÊN

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

: CÙ VIỆT DŨNG

Ngành

: CƠNG NGHỆ THƠNG TIN

Lớp

: D13CNPM5

Khóa

: 2018-2023

Hà Nội, tháng 7 năm 2020

PHIẾU CHẤM ĐIỂM
STT

1

Họ và tên sinh viên

TRẦN ĐĂNG QUANG
Mã SV: 18810320721

2

NGUYỄN HOÀI NAM
Mã SV:

3

NGUYỄN HUY KIÊN
Mã SV:

Họ và tên giảng viên
Giảng viên chấm 1:

Giảng viên chấm 2:

Nội dung thực hiện

Điểm

Thiết kế bố cục layout,
lên ý tưởng, Viết báo
cáo, Code giao diện trang
chủ (trước và sau khi
đăng nhập), đăng nhập,
đăng ký, người dùng, giỏ
hàng.
Code trang đơn hàng,
thông báo, chi tiết sản
phẩm, trợ giúp, tải ứng
dụng, chỉnh sửa báo cáo
Code trang ngân hàng,
địa chỉ, đổi mật khẩu, ví
voucher, shopeexu

Chữ ký

Ghi chú

Chữ
ký


MỤC LỤC
DANH MỤC HÌNH ẢNH.........................................................................................1
LỜI NĨI ĐẦU...........................................................................................................2
CHƯƠNG 1 : TỔNG QUAN VỀ WEBSITE...........................................................3
1.1 WEB TĨNH LÀ GÌ?............................................................................................3
1.2 WEB ĐỘNG LÀ GÌ ?.........................................................................................4

1.3 NGƠN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML.............................................5
1.3.1 Khái niệm..................................................................................................5
1.3.2 Đặc điểm....................................................................................................5
1.3.3 Bố cục HTML............................................................................................6
1.5 NGÔN NGỮ ĐIỀU KHIỂN JAVASCRIPT..........................................................8
1.6 THƯ VIỆN JQUERY..........................................................................................9
CHƯƠNG 2 GIỚI THIỆU VỀ WEBSITE BÁN THIẾT BỊ CHƠI GAME...........11
2.1 MÔ TẢ YÊU CẦU...........................................................................................11
2.2 CÁC HỆ THỐNG NGHIỆP VỤ.........................................................................11
2.2.1 Trang chủ.................................................................................................11
2.2.2 Trang thông tin chi tiết sản phẩm............................................................11
2.2.3 Trang đăng ký tài khoản..........................................................................12
2.2.4 Trang đăng nhập......................................................................................12
2.2.5 Trang giỏ hàng.........................................................................................12
2.2.6 Trang user profile....................................................................................13
2.2.7 Trang trợ giúp…………………………………………………………..13
2.2.8 Trang thông báo.......................................................................................13
2.2.9 Trang đơn mua.........................................................................................13
2.2.10 Trang ứng dụng......................................................................................13
2.2.11 Trang ngân hàng……………………………………………………….13
2.2.12 Trang địa chỉ…………………………………………………………..13
2.2.13 Trang mật khẩu………………………………………………………..13
2.2.14 Trang ví voucher………………………………………………………13


2.2.15 Trang shopee xu……………………………………………………….14
2.3 MỤC TIÊU XÂY DỰNG TRANG WEB BÁN THIẾT BỊ CHƠI GAME..14
CHƯƠNG 3 THIẾT KẾ BỐ CỤC..........................................................................15
3.1 PHẦN HEADER TRANG WEB...................................................................15
3.2 PHẦN CONTENT TRANG WEB Trang Chủ..............................................15

3.2.1 Banner......................................................................................................15
3.2.2 Danh Mục Các Sản Phẩm........................................................................16
3.2.3 Menu trái trang web.................................................................................17
3.3 PHẦN FOOTER TRANG WEB.........................................................................17
Chương 4: KẾT QUẢ THỰC HIỆN.......................................................................18
4.1 GIAO DIỆN TRANG CHỦ...............................................................................18
4.2 GIAO DIỆN TRANG CHỦ SAU KHI ĐĂNG NHẬP..........................................19
4.3 GIAO DIỆN TRANG ĐĂNG NHẬP..................................................................19
4.4 GIAO DIỆN TRANG ĐĂNG KÝ......................................................................20
4.5 GIAO DIỆN TRANG HỒ SƠ CÁ NHÂN...........................................................20
4.6 GIAO DIỆN TRANG GIỎ HÀNG.....................................................................21
4.7 GIAO DIỆN TRANG ĐƠN MUA......................................................................22
4.8 GIAO DIỆN TRANG THÔNG BÁO.........................................................................22
4.9 GIAO DIỆN TRANG THÔNG TIN CHI TIẾT SẢN PHẢM................................23
4.10 GIAO DIỆN TRANG TRỢ GIÚP....................................................................24
4.11 GIAO DIỆN TRANG ỨNG DUNG ….………………………………..……..25
4.12 GIAO DIỆN TRANG NGÂN HÀNG……………………………………..26
4.13 GIAO DIỆN TRANG ĐỊA CHỈ…………………………………………...27
4.14 GIAO DIỆN TRANG MẬT KHẨU………………………………………28
4.15 GIAO DIỆN TRANG VÍ VOUCHER…………………………………….29
4.16 GIAO DIỆN TRANG SHOPEE XU………………………………………30
4.17.SOURCE CODE JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO
TRANGWEB……………………………………………………………………..31
4.17.1. Nút Back To Top..................................................................................31
4.17.2. Hiệu ứng chờ tải trang tạo cảm giác dễ chịu cho khách hàng...............31


4.17.3. Sự Kiện onclick ở nút Tìm Kiếm trên thanh menu...............................31
4.17.4.Sự kiện onclick ở nút đăng nhập của trang đăng nhập..........................32
4.17.5.Hiệu ứng thay đổi arrow khi hover ở trang chủ……………………….32

4.17.6.Hiệu ứng ẩn hiện password ở trang đăng nhập………………………..32
4.17.7.Hiệu ứng dropdown ở trang hồ sơ cá nhân……………………………33
4.17.8.Sự kiện onclick của button Đăng nhập………………………………..33
4.17.9.Sự kiện download của tang ứng dụng…………….…………………...33
4.17.10. Sự kiện collapsibles của trang trơ giúp……………………………...34
4.17.11. Sự kiện hover thay đổi mũi tên ở trang chủ …………………………34
4.17.12. Sự kiện button mở form đánh giá trang đơn mua…………………...34
4.17.13. Sự kiện keypress ở Thanh tìm kiếm…………………………………34
4.17.14. Sự kiện onbeforeunload……………………………………………..35
KẾT LUẬN.............................................................................................................36
DANH MỤC TÀI LIỆU THAM KHẢO............................................................37


DANH MỤC HÌNH ẢNH
Hình 1.1. Ngơn ngữ HTML.......................................................................................5
Hình 1.2. Ngơn ngữ CSS...........................................................................................7
Hình 1.3. Ngơn ngữ JavaScript.................................................................................8
Hình 3.1. Header trang web.....................................................................................15
Hình 3.2.1 Filter......................................................................................................15
Hình 3.2.2 Danh mục sản phẩm..............................................................................16
Hình 3.2.3 Menu trái trang web...............................................................................16
Hình 3.3. Footer trang web......................................................................................17
Hình 4.1. Giao diện Trang chủ................................................................................18
Hình 4.2. Trang chủ sau khi đăng nhập...................................................................19
Hình 4.3. Trang đăng nhập......................................................................................19
Hình 4.4. Trang đăng ký..........................................................................................20
Hình 4.4. Trang hồ sơ cá nhân................................................................................20
Hình 4.6. Trang Giỏ hàng........................................................................................21
Hình 4.7. Trang đơn mua.........................................................................................22
Hình 4.8. Trang thơng báo.......................................................................................22

Hình 4.9. Trang Thơng tin chi tiết sản phẩm...........................................................23
Hình 4.10. Trang trợ giúp........................................................................................24
Hình 4.11. Trang ứng dụng.....................................................................................25
Hình 4.12. Trang ngân hàng....................................................................................26
Hình 4.13. Trang địa chỉ..........................................................................................27
Hình 4.14. Trang đổi mật khẩu................................................................................28
Hình 4.15. Trang ví voucher....................................................................................29
Hình 4.16. Trang shopee xu....................................................................................30

1


LỜI NĨI ĐẦU
Ngày nay, ứng dụng cơng nghệ thơng tin và việc tin học hóa được xem là
một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ,
tổ chức, cũng như của các cơng ty, nó đóng vai trị hết sức quan trọng, có thể tạo ra
những bước đột phá mạnh mẽ. Cùng với sự phát triển khơng ngừng về kỹ thuật
máy tính và mạng điện tử, cơng nghệ thơng tin cũng có được những cơng nghệ có
đẳng cấp và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác.
Mạng internet là một trong những sản phẩm có giá trị hết sức lớn lao và
ngày càng trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyển
tải, trao đổi thơng tin trên tồn cầu. Giờ đây, mọi việc liên quan đến thông tin trở
nên thật dễ dàng cho người sử dụng, chỉ cần có một máy tính kết nối Internet và
một dịng dữ liệu truy tìm thì gần như lập tức cả thế giới về vấn đề mà bạn đang
quan tâm sẽ hiện ra, có đầy đủ thơng tin, hình ảnh và thậm chí đơi lúc có cả những
âm thanh nếu bạn cần.
Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh
hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Chính điều này, đã
thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử
trên khắp thể giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc

sống con người.
Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định
được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một cửa
hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp
ứng được nhu cầu của khách hàng sẽ là cần thiết.
Vậy phải quảng bá thế nào? Đó là xây dựng được một Website cho cửa hàng
của mình quảng bá tất cả các sản phẩm của mình . Vì vậy em chọn đề tài:” Xây
Dựng Giao Diện Website Bán Thiết Bị Chơi Game”.


CHƯƠNG 1: TỔNG QUAN VỀ WEBSITE
1.1 WEB TĨNH LÀ GÌ?
Về kiến thức cơ bản thì web tĩnh thường được xây dựng từ CSS, HTML,
JAVASCRIPT hiện nay có thêm cơng nghệ HTML5 & CSS3. Có thể bạn nhìn một
web nào đó nhìn rất lung lay, đẹp và nội dung có thể thay đổi nhưng chưa chắc nó
là web động bởi vì người ta có thể sử dụng DHTML để thay đổi nội dung (tại
client).
Nếu bạn chạy trên máy tính của bạn thì với web tĩnh bạn có thể đặt tại đâu
cũng chạy được vì bản chất nó chỉ là một file bình thường.
Ưu điểm của web tĩnh:
 Về giao diện Designer có thể thiết kế theo kiểu mới lạ
 Tốc độ truy cập nhanh bởi nó chỉ là những file HTML
 Chi phí đầu tư thấp bởi bạn khơng phải trả tiền nhiều cho Coder
 Thân thiện với bộ máy tìm kiếm bởi bạn có thể đặt tên file tùy ý (tenfile.html, tieu-de-tin-tuc.html)
Nhược điểm của web tĩnh:
 Khó quản lý nội dung
 Khó nâng cấp bảo trì
 Mỗi khi thay đổi phải vào file HTML, CSS hoặc JAVASCRIPT để chỉnh
sửa
Khi nào nên sử dụng web tĩnh?

 Nếu bạn là doanh nghiệp muốn tự mình làm website thì bạn có thể học các
kiến thức căn bản và tự làm một Web tĩnh cho mình
 Nội dung website ít khi cập nhật và ít nên bạn muốn tiết kiệm chi phí
 Website bạn nhỏ và bạn thuê luôn người chuyên về web để quản trị
Trên thực tế thì mình thấy hiện nay chỉ có các cơng ty thiết kế web họ mới
làm web tĩnh bởi vì họ có khả năng chỉnh sửa được chứ khách hàng thì họ khơng
có khả năng đó. Hiện nay có các trang web ONE PAGE có các hiệu ứng slide khá
độc nên cũng có thể họ sử dụng web tĩnh hoặc tĩnh một phần trong đó.


1.2 WEB ĐỘNG LÀ GÌ ?
Ngược lại với web tĩnh, web động là những website có hệ thống quản lý nội
dung và người dùng có thể chỉnh sửa nội dung được. Ví dụ như trang vnexpress.net
hay 24h.com.vn thì đó là những web động bởi vì họ có thể đăng tin mới, chỉnh sửa
tin mới và chỉnh sửa danh mục menu, ...
Web động được làm từ gì?
Web động sử dụng các công nghệ như HTML, CSS, HTML5, CSS3,
JAVASCRIPT, ... và điều đặc biệt là có sử dụng một ngơn ngữ lập trình server như
PHP, C#, JAVA, PYTHON một hệ quản trị cơ sở dữ liệu như MySQL, SQL
SEVER ,.. vì vậy web động phải chạy trong máy chủ. Nếu đặt trên máy tính của
bạn thì bạn phải cài các Web server ảo như vertrigo, Xampp, wampp, ...
Ưu điểm của web động:
 Dễ dàng quản lý nội dung
 Dễ dàng nâng cấp và bảo trì
 Có thể xây dụng được web lớn
 Thường sử dụng tương tác với người dùng cao
 Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chức năng Rewrite URL để
chuyên URL thân thiện
Hiện tại, web động được thiết kế trên nền mã nguồn mở đang rất được ưa
chuộng và thịnh hành. Mã nguồn mở đang trở thành một xu hướng mới, một người

không biết lập trình cũng có thể thiết kế website động với đầy đủ chức năng thông
qua mã nguồn mở.
Nhược điểm của web động:
 Chi phí xây dựng cao
 Nếu web lớn có thể cần thêm nhân sự chuyên ngành
Khi nào nên sử dụng web động?
 Bạn làm website thương mại điện tử bán hàng
 Bạn làm web giới thiệu sản phảm công ty
 Bạn làm web tin tức, blog cá nhân
 Web bạn tầm cỡ lớn


1.3 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML
1.3.1 Khái niệm

Hình 1.1. Ngơn ngữ HTML
Ngơn ngữ đánh dấu siêu văn bản tiếng Anh là Hypertext Markup
Language, viết tắt là HTML.
Ngôn ngữ đánh dấu siêu văn bản (HTML) là tập hợp các kí hiệu hoặc mã
đánh dấu được chèn vào một tệp hiển thị trên Internet. Đánh dấu này giúp trình
duyệt web biết cách hiển thị các từ và hình ảnh của trang web. Mỗi mã đánh dấu
riêng lẻ được gọi là một "yếu tố" (element) , đơi khi cịn được gọi là một "thẻ"
(tag). Một số yếu tố dưới dạng cặp cho biết khi nào thì bắt đầu hoặc kết thúc hiển
thị một số hiệu ứng.
1.3.2 Đặc điểm
Ngôn ngữ đánh dấu siêu văn bản là ngơn ngữ máy tính tạo điều kiện cho
việc lập trang web. Ngơn ngữ này, có các từ mã và cú pháp giống như bất kì ngôn
ngữ nào khác, tương đối dễ hiểu và qua thời gian trở nên ngày càng mạnh mẽ trong
lập trình. HTML tiếp tục phát triển để đáp ứng các yêu cầu của Internet dưới vỏ
bọc của World Wide Web Consortium, tổ chức thiết kế và duy trì ngơn ngữ.

Siêu văn bản (Hypertext) là phương thức mà người dùng Internet sử dụng để
điều hướng trang web. Bằng cách click vào văn bản đặc biệt gọi là siêu liên kết
(hyperlink), người dùng sẽ được đưa đến các trang mới. Việc sử dụng thuật ngữ


"hyper" có nghĩa là khơng tuyến tính, vì vậy người dùng có thể truy cập bất cứ nơi
nào trên Internet chỉ bằng cách click chuột vào các liên kết có sẵn.
Đánh dấu (markup) chính là phương thức mà HTML đánh dấu cho những
đoạn văn bản, nói cách khác, HTML đánh dấu chúng là một loại văn bản cụ thể. Ví
dụ: văn bản đánh dấu có thể ở dạng in đậm hoặc in nghiêng để thu hút sự chú ý cụ
thể đến một từ hoặc cụm từ.
Sử dụng HTML, bạn có thể thêm tiêu đề, định dạng đoạn văn, ngắt dòng
điều khiển, tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh,
tạo liên kết, xây dựng bảng, điều khiển một số kiểu, và nhiều hơn nữa.
1.3.3 Bố cục HTML
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Nội dung trang web có thể đặt trong các thẻ hmtl.
Bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng
</body>
</html>
→ Trong đó:
 <!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
 <html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ
đóng gói tất cả nội dung của trang HTML
 <head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề
trang, charset

 <title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu
đề của trang
 <body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển
thị trên trang


1.4 NGƠN NGỮ KỊCH BẢN CSS

Hình 1.2. Ngơn ngữ CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử
dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu
(ví dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định
dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,
…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử
HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
Trong khi HTML là cấu trúc cơ bản của trang web của bạn, CSS là thứ
mang lại cho toàn bộ trang web của bạn phong cách. Những màu sắc bóng bẩy,
phơng chữ thú vị, và hình ảnh nền? Tất cả là nhờ CSS. Ngơn ngữ này ảnh hưởng
đến toàn bộ tâm trạng và giai điệu của một trang web, khiến nó trở thành một cơng
cụ vô cùng mạnh mẽ – và là một kỹ năng quan trọng để các lập trình viên web học
hỏi. Đó cũng là những gì cho phép các trang web thích ứng với các kích thước
màn hình và loại thiết bị khác nhau.
Bố cục CSS
Cấu trúc một đoạn CSS: Một đoạn CSS bao gồm 4 phần như thế này: vùng
chọn { thuộc tính : giá trị; thuộc tính: giá trị; }
Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá
trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có một giá trị
riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS.
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một

dịng khai báo thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một vùng chọn có thể
sử dụng khơng giới hạn thuộc tính.

1.5 NGƠN NGỮ KỊCH BẢN JAVASCRIPT

Hình 1.3. Ngơn ngữ JavaScript
JavaScript là một ngơn ngữ lập trình đa nền tảng (cross-platform), ngơn
ngữ lập trình kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ và nhẹ
(small and lightweight). Khi nằm bên trong một môi trường (host environment),
JavaScript có thể kết nối tới các object của mơi trường đó và cung cấp các cách
quản lý chúng (object).
JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ
như: Array, Date, và Math, và các yếu tố cốt lõi của ngơn ngữ lập trình như: tốn
tử (operators), cấu trúc điều khiển (control structures), và câu lệnh. JavaScript có
thể được mở rộng cho nhiều mục đích bằng việc bổ sung thêm các object;
JavaScript là ngơn ngữ lập trình dựa trên logic, có thể được sử dụng để sửa
đổi nội dung trang web và khiến nó hoạt động theo nhiều cách khác nhau để đáp
ứng với hành động của người dùng. Các cách sử dụng phổ biến cho JavaScript bao
gồm confirmation boxes, calls-to-action, và thêm thông tin mới vào thông tin hiện
có.


Nói tóm lại, JavaScript là ngơn ngữ lập trình cho phép các nhà phát triển
web thiết kế các trang web tương tác. Hầu hết các hoạt động mà bạn sẽ thấy trên
một trang web là nhờ JavaScript, giúp tăng cường các kiểm sốt và hành vi mặc
định của trình duyệt.
Ví dụ:
Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở
rộng bằng cách cung cấp các object để quản lý trình duyệt và Document Object

Model (DOM) của nó. Ví dụ, phần mở rộng phía máy khách cho phép một ứng
dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động
của người dùng như click chuột, nhập form, và chuyển trang.
Server-side JavaScript - JavaScript phía Server, JavaScript được mở rộng
bằng cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy
chủ. Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ
liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác
của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ.

1.6Thư Viện Jquery
jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào
năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơ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 q 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 quan trọ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ác Event
Handler.
Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tí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à đẹp mắt mà

bạn có thể sử dụng trong các Website của mình.
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+
Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector
và cú pháp XPath cơ bản.


CHƯƠNG 2: GIỚI THIỆU VỀ WEBSITE BÁN THIẾT BỊ
CHƠI GAME
2.1 MÔ TẢ YÊU CẦU
Trang website Shop Bán Thiết Bị Chơi Game Shopee là shop thiết bị chơi
game online là cầu nối giúp khách hàng – những người có đam mê chơi game có
thể tìm ở đây những thiết bị, sản phẩm mình cần một cách nhanh chóng và tiện lợi
nhất.
Để có thể thu hút người dùng mua website đó cần đáp ứng những nhu cầu
sau:
- Hình ảnh sản phẩm đẹp lung linh, đa dạng mẫu mã, hình ảnh thì
bạn khơng cần phải chăm sóc như cây ngồi thực tế.
- Website có giao diện đơn giản nhưng đẹp, bắt mắt thu hút khách hàng.
- Khách hàng chỉ việc online xem mẫu mã và chọn sản phẩm, có thể
mua hàng ở bất cứ đâu mà khơng cần đến cửa hàng.
- Bạn có thể quản lý bao quát toàn cửa hàng chỉ với 1 cú click chuột.
- Cập nhật mẫu mã sản phẩm, phụ kiện mới linh hoạt, nhanh chóng.
- Bán hàng mọi lúc mọi nơi, kể cả khi bạn đi du lịch, khi đang ăn uống
với bạn bè,…
2.2 CÁC HỆ THỐNG NGHIỆP VỤ
2.2.1 Trang chủ

Đây là trang đầu tiên sẽ được hiện lên khi người dùng truy cập vào website
và nó có vài nghiệp vụ sau đây:
- Tạo thanh menu điều hướng trang web.
- Hiển thị danh sách các sản phẩm đang bán chạy nhất của trang web
- Tìm kiếm sản phẩm.
- Link đến trang đăng nhập và đăng kí cho người dùng.
- Có thể hiển thị thơng báo, giỏ hàng
2.2.2 Trang thông tin chi tiết sản phẩm
Những thông tin mà bạn cung cấp cho sản phẩm sẽ ảnh hưởng đến cách sản
phẩm thể hiện đến cho khách hàng, giúp bạn dễ dàng quản lý cũng như giúp khách


hàng nhanh chóng tìm thấy sản phẩm và đưa ra quyết định mua hàng một cách
chính xác. Tất nhiên tuỳ thuộc vào cách quản lý và kinh doanh của từng doanh
nghiệp, bạn không cần phải điền đầy đủ tất cả thông tin chi tiết cho sản phẩm.
2.2.3 Trang đăng ký tài khoản
Giúp khách hàng có một tài khoản của riêng mình có thể thoải mái lựa chọn
các sản phẩm mình u thích, ngồi ra khách hàng cịn có sự an tồn khơng lo bị lộ
thơng tin và tránh sự nhầm lẫn sản phẩm.
Đặc biệt hơn khi khách hàng đăng kí xong tài khoản của riêng mình thì khi
vào hệ thống sẽ phân biệt các người dùng khác nhau trước khi phục vụ hoặc từ
chối các dịch vụ nhất định . Vì vậy khách hàng khơng cần phải lo lắng về các sản
phẩm cũng như sự nhầm lẫn dịch vụ .Đây là bước khá quan trọng và cần có của
khách hàng để bật mật thơng tin một cách an tồn của chính mình.
2.2.4 Trang đăng nhập
Là một thủ tục khi bắt đầu tham gia vào một trang web nào đó có mục đăng
ký thành viên. Người muốn đăng nhập phải theo trình tự hướng dẫn để nhập tên
thường dùng ID và mật khẩu (password).
Muốn đăng nhập thì người dùng trước đó đã phải đăng ký làm thành viên
với một trình tự thủ tục thường là chọn và ghi tên thường dùng (user name), chọn

và ghi mật khẩu.
Thủ tục trên giúp hệ thống máy tính phân biệt các người dùng khác nhau
trước khi phục vụ hoặc từ chối các dịch vụ nhất định. Đối với web, thủ tục nói trên
để đảm bảo sự nghiêm túc và an ninh cho trang web và dịch vụ của nó cũng như
cho chính người dùng.
2.2.5 Trang giỏ hàng
Đây là trang cung cấp đầy đủ thông tin các sản phẩm mà khách hàng đã
thêm vào giỏ hàng bao gồm: số lượng, đơn giá, thành tiền, các khuyến mãi đi kèm
cùng các mã giảm giá có thể sử dụng. Khách hàng có thể thêm, xố sản phẩm và đi
đến trang thanh toán.


2.2.6 Trang user profile
Các thông tin cá nhân của khách hàng đều hiển thị ở đây: Tên đăng nhập,
Tên, Email, Số điện thoại, Giới tính, Ngày sinh, Ảnh đại diện. Khách hàng đều có
thể thay đổi các thơng tin trên một cách nhanh chóng, dễ dàng nhưng vẫn đảm bảo
tính an tồn thơng tin.
2.2.7 Trang trợ giúp
Giúp khách hàng mua các sản phẩm mình thích một các dễ dàng và nhanh
gọn nhất.
Đối với khách hàng chưa vào trang web bao giờ sẽ rất mới lạ và khó có thể
mua hàng. Vì vậy, nhờ có trang hướng dẫn mua hàng có thể hỗ trợ hướng dẫn cụ
thể giúp khách hàng mua được các sản phẩm phù hợp với nhuc cầu của bản thân.
2.2.8 Trang thông báo
Giúp khách hàng rễ rang kiểm tra các thông báo của shop về mọi vấn đề như
sản phẩm mới, sản phẩm đã mua, chương trình khuyến mại, ...
2.2.9 Trang đơn mua
Đây là trang sẽ tổng hợp lại tất cả các đơn hàng mà khách hàng đã đặt, cho khách
hàng biết đầy đủ thông tin về mặt hàng và tiến trình giao hàng.
2.2.10 Trang ứng dụng

Khách hàng có thể tải ứng dụng riêng được shop thiết kế để thuận tiện mua
hàng theo dõi các thông báo của shop.
2.2.11 Trang ngân hàng
Ngân hàng là trang mà người sử dụng ứng dụng them tài khoản ngân hàng
để có thể thanh toán online.
2.2.12 Trang địa chỉ.
Đây là trang mà người dùng thêm địa chỉ để thanh toán trực tiếp sau khi đặt
hàng.
2.2.13 Trang đổi mật khẩu.
Được dùng để cho người dùng thay đổi mật khẩu khi có thể bị lộ thơng tin
mật khẩu tài khoản.
2.2.14 Trang ví voucher.


Voucher là một dạng phiếu mua hàng và khách hàng có thể sử dụng voucher
khi mua hàng tương đương như một phương thức thanh toán (Tiền mặt, Thẻ hoặc
Chuyển khoản…)
Lợi ích của voucher: Là phương tiện marketing hữu hiệu, là cầu nối giúp
doanh nghiệp chăm sóc, gắn kết khách hàng thân thiết…được sử dụng rộng rãi trong
các hoạt động kinh doanh
2.2.15.Trang shopee xu.
Bản chất của Shopee xu là một dạng đồng tiền ảo do Shopee tạo ra. Chúng
được dùng để thanh toán khi bạn mua hàng trực tuyến trên trang web hoặc trên ứng
dụng Shopee App. Hoặc bạn cũng có thể dùng xu Shopee để đổi lấy mã giảm giá
hay tham gia các hoạt động hấp dẫn trong trang “Shopee xu”.
Mỗi xu Shopee sẽ tương ứng với giá trị là 1 VND.
2.3 MỤC TIÊU XÂY DỰNG TRANG WEBSITE BÁN THIẾT BỊ CHƠI GAME
- Việc thiết kế website sẽ giúp cho bạn tiếp cận được nguồn khách hàng
tiềm năng nhiều hơn so với phương pháp bán hàng truyền thống
- Truyền tải được thông tin về những thiết bị chơi game như bàn phím, màn

hình, tai nghe, linh kiện máy tính,…. đến mọi người tốt hơn, khách quan hơn
- Chứng minh được sự uy tín cho thương hiệu của Shop
- Có được sự đầu tư chính xác trong thời đại mạng internet
- Giao diện đẹp khiến khách hàng mua ghé mua sản phẩm nhiều lần


CHƯƠNG 3: THIẾT KẾ BỐ CỤC
Các layout đều giống nhau về phần header và footer, chỉ khác nhau về content
và nó được kế thừa cho các layout khác.
3.1 PHẦN HEADER TRANG WEB

Hình 3.1. Header trang web
- Là nơi hiển thị logo Shop, chức năng tìm kiếm, đăng nhập tài khoản, đăng
ký tài khoản, tìm kiếm, kiểm tra giỏ hàng
- Navbar bên trên dẫn đến trang tải ứng dụng, kết nối mạng xã hội, thông
báo và trợ giúp
3.2 PHẦN CONTENT TRANG WEB TRANG CHỦ
3.2.1 Filter

Hình 3.2.1 Filter
- Filter bao gồm nhiều chức năng sắp xếp theo độ phổ biến, mới nhất, bán
chạy, giá từ thấp đến cao hay từ cao đến thấp và button chuyển trang.
3.2.2 Danh Mục Các Sản Phẩm
- Được Tạo Bởi Mỗi Khối Là 1 thẻ div
- Sử dụng flex-box: display: flex, flex-wap: wap thuộc tính để dàn hàng
ngang sản phẩm và quy định số sản phẩm trên mỗi hàng để có thể cho giao diện dễ
nhìn nhất và thân thiện với người dùng
- Hiệu ứng hover sẽ làm nổi bật sản phẩm tương ứng, cụ thể ở đây sẽ là boxshadow để đổ bóng và thc tính transform và position để khiến sản phẩm dịch lên
trên 1 chút tạo sự mới lạ, thích thú cho khách hàng

Hình 3.2.2 Một số sản phẩm của trang web

3.2.3 Menu trái trang web

Hình 3.2.3 Menu trái


3.3 PHẦN FOOTER TRANG WEB

Hình 3.3. Footer trang web
- Footer là phần cuối cùng của trang web cũng là nơi hiển thị thông tin giới
thiệu về shop cũng như các chức năng chăm sóc khách hàng, hướng dẫn chi tiết.
Kết nối mạng xã hội như facebook, instagram, youtube khi cần hỗ trợ online. Bên
cạnh đó cịn có mã QR, link tải các ứng dụng mobile đa hệ điều hàng giúp khách
hàng truy cập web site bằng ứng dụng.


Chương 4: KẾT QUẢ THỰC HIỆN
4.1 GIAO DIỆN TRANG CHỦ

Hình 4.1. Giao diện Trang chủ


4.2 GIAO DIỆN TRANG CHỦ SAU KHI ĐĂNG NHẬP

Hình 4.2. Trang chủ sau khi đăng nhập


4.3 GIAO DIỆN TRANG ĐĂNG NHẬP

Hình 4.3. Trang đăng nhập
4.4 GIAO DIỆN TRANG ĐĂNG KÝ

Hình 4.4. Trang đăng ký