Đồ án thiết kế website bán đồ thể thao

TRƯỜNG ĐẠI HỌC TIỀN GIANG
KHOA KỸ THUẬT CÔNG NGHỆ

----------

BÁO CÁO
ĐỒ ÁN CHUYÊN NGÀNH

ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN ĐỒ THỂ THAO
SINH VIÊN THỰC HIỆN:

GIẢNG VIÊN HƯỚNG DẪN:

Lê Thành Quốc

019101012

Giảng viên Nguyễn Thị Thu Nguyệt

Võ Thành Chiến

019101016

Tiền Giang, tháng 5 năm 2022


LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn chân thành đến cô Nguyễn Thị Thu Nguyệt là giáo viên
hướng dẫn đồ án cho chúng em. Cô đã luôn theo sát quá trình thực hiện đồ án, nhiệt tình
hướng dẫn, chỉ bảo để chúng em hoàn thành đồ án này

Trong quá trình làm đồ án, tuy chúng em đã cố gắng hết sức để tìm hiểu, trao dồi kiến
thức để có thể hồn thành tốt đồ án của mình nhưng chắc chắn khơng tranh khỏi những
thiếu sót. Chúng em rất mong nhận được sự thơng cảm và góp ý của quý thầy cô.
Chúng em xin chân thành cảm ơn!
Tiền Giang, tháng 5 năm 2022
Nhóm sinh viên thực hiện


MỤC LỤC
CHƯƠNG 1: TỔNG QUAN..................................................................................................1
1.

Giới thiệu đề tài:......................................................................................................1
1.1 Thông tin đề tài:...................................................................................................1
1.2 Hỉnh thành ý tưởng:..........................................................................................1
1.3 Lý do chọn đề tài:................................................................................................1
1.4 Mục tiêu:..............................................................................................................2
1.5 Phân cơng nhiệm vụ và tiến trình làm việc:................................................3

2.

Cơ sở lý thuyết.........................................................................................................4
2.1 Thương mại điện tử là gì ?..................................................................................4
2.2 Lợi ích của thương mại điện tử :........................................................................4
2.3 Phân tích quy trình mua sắm trên các trang thương mại điện tử :.................4

3.

Tìm hiểu về Website................................................................................................6
3.1 Website là gì?.......................................................................................................6

4.

Ngơn ngữ lập trình và cơng nghệ được sử dụng:..................................................6
4.1 HTML:.................................................................................................................6
4.2 CSS........................................................................................................................ 6
4.3 JAVASCRIPT.......................................................................................................7
4.4 BOOTSTRAT........................................................................................................7
4.5 PHP....................................................................................................................... 7
4.6 XAMPP:...............................................................................................................7
4.7 MySql.................................................................................................................... 8
4.8 Database:.............................................................................................................8
4.9 Open source:.......................................................................................................8
4.10

MySQL Server..................................................................................................8

4.11

MySQL Client....................................................................................................8


CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ, CÀI ĐẶT, GIẢI PHÁP...........................................9
1.

Mơ tả bài toán - Tên bài toán: Thiết kế website bán đồ dùng thể thao.............9

2. Phân tích...................................................................................................................... 9
2.1 Yêu cầu website....................................................................................................9
2.2 Yêu cầu chức năng.............................................................................................10

3.

Thiết kế.................................................................................................................. 10
3.1 Thiết kế CSDL...................................................................................................10
3.2 Các ca sử dụng...................................................................................................13
3.2 Đặc tả tả use case...............................................................................................16

4.

Thiết kế giao diện..................................................................................................19
4.1 Giao diện trang chủ..............................................................................................19
4.2 Giao diện giới thiệu.............................................................................................20
4.3 Giao diện liên hệ..................................................................................................21
4.4 Giao diện đăng ký................................................................................................22
4.5 Giao diện đăng nhập............................................................................................23
4.6 Giao diện giỏ hàng...............................................................................................24
4.7 Giao diện thanh toán............................................................................................25
4.8 Giao diện quản lý của người bán.........................................................................26

5.

Hướng dẫn cài đặt xampp....................................................................................27

6.

Giải pháp hoàn thiện sản phẩm...........................................................................30
6.1 Vấn đề:................................................................................................................ 30
6.2 Câu hỏi đặt ra:...................................................................................................30
6.3 Trả lời: Đó chính là phần Backend.....................................................................30
6.4 Backend là gì:.....................................................................................................30

6.5 Ngơn ngữ Backend:..........................................................................................30
6.6 PHP là gì ?..........................................................................................................30


CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM..........................................................................32
1.

Chức năng đăng nhập, thêm sản phẩm vào giỏ hàng.........................................32

Mơ tả:.............................................................................................................................. 32
2.

Chức năng thanh tốn, xuất mã đơn hàng..........................................................34

Mô tả:.............................................................................................................................. 34
3.

Chức năng đăng ký..............................................................................................35

4.

Chức năng của người bán hàng........................................................................39

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CỦA TRANG WEB.....................45
1.

Kết quả đạt được:.................................................................................................45
1.1 Những kết quả đạt được:..................................................................................45
1.2 Ưu điểm:.............................................................................................................45
1.3 Nhược điểm:.......................................................................................................45

2.

Hướng nghiên cứu phát triển...............................................................................46

3.

Kết luận.................................................................................................................. 46

4.

Tài liệu tham khảo................................................................................................46

DANH MỤC HÌN


Hình 2.1 Use case người bán hàng....................................................................................13
Hình 2.2 Use case khách hàng.............................................................................................14
Hình 2.3 Use case người quản trị viên.............................................................................15
Hình 2.4 Giao diện trang chủ............................................................................................19
Hình 2.5 Giao diện giới thiệu............................................................................................20
Hình 2.6 Giao diện liên hệ...................................................................................................21
Hình 2.7 Giao diện đăng ký...............................................................................................22
Hình 2.8 Giao diện đăng nhập.............................................................................................23
Hình 2.9 Giao diện giỏ hàng..............................................................................................24
Hình 2.10 Giao diện thanh tốn...........................................................................................25
Hình 2.11 Giao diện quản lý của người bán.........................................................................26
Hình 3.1 Đã đăng nhập......................................................................................................32
Hình 3.2 Thêm vào giỏ thành cơng...................................................................................33
Hình 3.3 Chưa đăng nhập..................................................................................................33

Hình 3.4 u cầu đăng nhập.............................................................................................34
Hình 3.5 Tùy chọn thanh tốn..............................................................................................34
Hình 3.6 Thanh tốn qua thẻ............................................................................................35
Hình 3.7 Xuất mã đặt hàng...............................................................................................35
Hình 3.8 Giao diện đăng ký...............................................................................................36
Hình 3.9 Thơng báo số điện thoại hợp lệ........................................................................36
Hình 3.10 Đăng ký thành cơng..........................................................................................37
Hình 3.11 Điền email, số điện thoại sai..........................................................................37
Hình 3.12 Kiểm tra tài khoản đã tồn tại.........................................................................38
Hình 3.13 Mục xem các mặt hàng....................................................................................39
Hình 3.14 Điền thơng tin trước khi đăng.........................................................................40
Hình 3.15 Đăng thành cơng...............................................................................................40
Hình 3.16 Mục chỉnh sửa..................................................................................................41
Hình 3.17 Chọn mặt hàng cần chỉnh sửa.........................................................................41
Hình 3.18 Cập nhật thành công........................................................................................42


Hình 3.19 Giao diện xóa mặt hàng...................................................................................43
Hình 3.20 Chọn mặt hàng cần xóa.......................................................................................43
Hình 3.21 Xóa thành cơng.................................................................................................44
Hình 3.22 Giao diện đơn đặt hàng...................................................................................44


DANH MỤC BẢNG
Bảng 1.1 Phân công nhiệm vụ............................................................................................3
Bảng 2.1 Yêu cầu website.................................................................................................10
Bảng 2.2 Thành phần bảng Contact.................................................................................11
Bảng 2.3 Thành phần bảng customer..............................................................................11
Bảng 2.4 Thành phần bảng manager...............................................................................12
Bảng 2.5 Thành phần bảng order....................................................................................13

Bảng 2.6 Thành phần bảng product................................................................................13
Bảng 2.7 Thành phần bảng yourshop.............................................................................13
Bảng 2.8 Use case thêm sản phẩm vào giỏ hàng............................................................28
Bảng 2.9 Use case đăng ký người bán hàng.....................................................................29
Bảng 2.10 Use case đăng bán sản phẩm.........................................................................30


DANH MỤC TỪ VIẾT TẮT
1
2
3
4
5
6
7

Từ viết tắt

Tên viết tắt

SQL sever
HTML
CSS
JS
XML
PHP
XAMPP

Structure Query Language
Hypertext Markup Language

Cascading Style Sheets
JavaScrip
Xtensible Markup Language
Hypertext Preprocessor
Cross-Platform (X), Apache (A), MariaDB (M),
PHP (P) và Perl (P)

8

CSDL

Cơ sở dữ liệu


TÓM TẮT
CHƯƠNG 1: TỔNG QUAN
- Giới thiệu đề tài
 Lý do chọn đề tài
 Hình thành ý tưởng
 Mục tiêu
 Phân cơng nhiệm vụ và tiến trình làm việc
- Cơ sở lý thuyết
 Thương mại điện tử
 Lợi ích thương mại điện tử
 Phân tích quy trình mua sắm
 Tìm hiểu website
 Ngôn ngữ và công nghệ sử dụng
CHƯƠNG 2:PHÂN TÍCH, THIẾT KẾ
- Mơ tả bài tốn
- Phân tích

+ u cầu website
+ yêu cầu chức năng
- Thiết kế
 Thiết kế CSDL
 Sơ đồ lớp hệ thống
 Các ca sử dụng
 Đặc tả các quy trình, trình tự, trạng thái
 Đặc tả use case
- Thiết kế giao diện
- Hướng dẫn cài đặt xampp
- Giải pháp hoàn thiện sản phẩm
 Backend là gì
 Ngơn ngữ Backend
 PHP là gì
 Ưu, nhược điểm của PHP
CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM


- Mơ tả và hiển thị các chức năng hồn thiện của hệ thống.
CHƯƠNG 4:KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN
 Tổng kết thành quả đạt được.
 Định hướng phát triển.
 Tài liệu tham khảo


CHƯƠNG 1: TỔNG QUAN
1. Giới thiệu đề tài:
1.1 Thông tin đề tài:







Tên đề tài:
Tổng số người làm: 2 người.
Người viết báo cáo: Võ Thành Chiến - Lê Thành Quốc.
Người thiết kế web: Lê Thành Quốc – Võ Thành Chiến.
Chức năng:
 Khách hàng: Đăng ký, đăng nhập, thêm mặt hàng vào gi ỏ, đ ặt hàng, thanh
toán.
 Nhà bán hàng: Đăng ký, đăng nhập, Thêm, sửa, xóa mật hàng, xem đơn đ ặt
hàng.

1.2 Hỉnh thành ý tưởng:
Website bán đồ dùng thể thao được lấy ý tưởng về bố cục từ các trang web có
sẵn.Giao diện, hình ảnh phải bắt mắt, đúng với sản phẩm, màu sắc phải phù hợp hài hòa với
tổng thể của trang web.
Là đề tài thiết kế, xây dựng website bán đồ dùng thể thao nhằm đáp ứng nhu cầu cho
người tiêu dùng.
1.3 Lý do chọn đề tài:
Ngày nay, cả thế giớ nói chung và Việt Nam nói riêng đang chuyển mình đi lên và
phát triển tiếp nhận những thành tựu và khoa học mới. Từ khi nước ta gia nhập WTO nền
kinh tế bước sang một trang mới, nền kinh tế mở cửa giao lưu hàng hoá thơng thương với
tất cả các nước. Bên cạnh đó chúng ta học hỏi được cách quản lý hàng hoá các luật trong
quản lý bán hàng. Với chính sách của nhà nước và sự đầu tư của nước ngoài, nền kinh tế của
nước ta đã phát triển một cách nhanh chống. Vì vậy, trong hoạt động kinh doanh thương
nghiệp tiêu thụ hàng hoá nhỏ và lẻ là vấn đề rất quan trọng.
Trong thời kỳ mà kinh tế phát triển như hiện nay thì việc mua bán và trao đổi được
diễn ra trên nhiều hình thức, và hình thức cơ bản nhất là mở các cửa hàng đề thực hiện việc

trao đổi và mua bán đó.

1


Để thực hiện quá trình mua bán giữa người mua và cửa hàng, giữa cửa hàng và nhà
cung cấp thì chúng ta phải có cơng tác quản lý tốt , đề đáp ứng được cơng tác đó thì rất cần
những ứng dụng về tin học, mà đặc biệt là các website quản lý và website quản lý bán hàng.
1.4 Mục tiêu:
- Mục tiêu của trang web đặt ra khi hoàn thành xong là:
 Mục tiêu cá nhân

- Kiến thức
 Có cái nhìn tổng quan về nguyên lý sơ đồ hoạt động của web.
 Hiểu được môi trường làm việc, cách sử dụng trang web.
 Học thêm được nhiều kiến thức mới.
- Kỹ năng
 Rèn luyện được khả năng thao tác nhanh trên máy tính.
 Rèn luyện, phát triển khả năng tư duy, tìm ra được hướng giải quyết các vấn đề phứt
tạp khi làm một dự án.
 Thao tác nhuần nhuyễn hơn với làm Web, phục vụ khả năng nghề nghiệp sau khi ra
trường.
 Nắm bắt được cấu trúc phần cứng, sơ đồ khối, nguyên lý hoạt động vận hành của
trang Web.
 Biết cách làm một đồ án hoàn chỉnh phục vụ cho việc làm đồ án tốt nghiệp về sau.

- Thái độ
 Tự giác, có trách nhiệm trong việc thiết kế hoàn thành một dự án.
 Mục tiêu sản phẩm:
- Đối tượng:

 Đối tượng sử dụng chủ yếu là: Khách hàng, nhà bán hàng
- Phương pháp nghiên cứu
 Website được lấy ý tưởng từ các hệ thống web như: Lazada, Shopee, Chợ tốt…..
 Tiếp cận một số website bán hàng có sẵn
 Khảo sát và thu nhập các thơng tin từ các tài liệu và cơ sở dữ liệu có liên quan
 Dùng phương pháp phân tích thiết kế hệ thống để tiến hành thực hiện đề tài
 Đối tượng nghiên cứu: Khách hàng, nhà bán hàng.
2


- Sử dụng
 Sản phẩm hoạt động ổn định, có nhiều sự lựa chọn về mặt hàng.
 Sản phẩm mang tính thẩm mỹ cao, dễ dàng sử dụng.
bang 0.1Phù

hợp với đời sống hiện nay.

1.5 Phân công nhiệm vụ và tiến trình làm việc:
Mã số sinh viên

Họ và tên

Cơng việc thực hiện

019101012
019101016

Lê Thành Quốc
Võ Thành Chiến

Code chính hồn thiện sản phẩm
Thiết kế logo, xây dựng CSDL, đóng góp ý
kiến thiết layout – ý tưởng

Ngày

Thành viên thực hiện
Cả nhóm
Cả nhóm

Mơ tả
Nhận đề tài
Xây dựng lên ý tưởng thiết
kế
Lê Thành Quốc
Viết code thiết kế website
Võ Thành Chiến
Xây dựng CSDL
Võ Thành Chiến
Viết báo cáo
Cả nhóm
Tiếp tục hồn thiện
Lê Thành Quốc
Chỉnh sửa báo cáo
Cả nhóm
Thuyết trình báo cáo
Bảng 1.1 Phân cơng nhiệm vụ

3

Ghi chú


2. Cơ sở lý thuyết
2.1 Thương mại điện tử là gì ?
Theo Bách khoa tồn thư Wikipedia thì : Thương mại điện tử, hay còn gọi
là e-commerce, e-comm hay EC, là sự mua bán sản phẩm hay dịch vụ trên các hệ
thống điện tử như Internet và các mạng máy tính. Thương mại điện tử dựa trên một
số cơng nghệ như chuyển tiền điện tử, quản lý chuỗi dây chuyền cung ứng , tiếp thị
Internet, quá trình giao dịch trực tuyến, trao đổi dữ liệu điện tử (EDI), các hệ thống
quản lý hàng tồn kho, và các hệ thống tự động thu thập dữ liệu. Thương mại đi ện tử
hiện đại thường sử dụng mạng World Wide Web là một điểm ít nhất phải có trong
chu trình giao dịch, mặc dù nó có thể bao gồm m ột ph ạm vi l ớn h ơn v ề m ặt công
nghệ như email, các thiết bị di động như là điện thoại.
Thương mại điện tử thông thường được xem ở các khía cạnh của kinh doanh điện
tử (e-business). Nó cũng bao gồm việc trao đổi dữ liệu tạo điều kiện thuận lợi cho các
nguồn tài chính và các khía cạnh thanh toán của việc giao dịch kinh doanh.
Việc mua bán hàng hóa trên Shopee, Lazada hoặc qua website th ương m ại là các ví d ụ
về thương mại điện tử nổi bật.
Các hoạt động thương mại điện tử chủ yếu bao gồm:
 Mua bán và trao đổi hàng hóa, dịch vụ trực tuyến
 Mua bán vé trực tuyến
 Thanh toán online
 Chăm sóc và hỗ trợ khách hàng online
2.2 Lợi ích của thương mại điện tử :
 TMĐT giúp cho các Doanh nghiệp nắm được thông tin phong phú về thị
trường và đối tác.
 TMĐT giúp giảm chi phí sản xuất.
 TMĐT giúp giảm chi phí bán hàng và tiếp thị.
 TMĐT qua INTERNET giúp người tiêu dùng và các doanh nghiệp

giảm đáng kể thời gian và chí phí giao dịch.


TMĐT tạo điều kiện cho việc thiết lập và củng cố mối quan hệ giữa

các thành phần tham gia vào quá trình thương mại.
 Tạo điều kiện sớm tiếp cận nền kinh tế số hố.
2.3 Phân tích quy trình mua sắm trên các trang thương mại điện tử :
- Tiếp thị
Mục đích của việc tiếp thị là nhắm đến những người mua tiềm năng và thu hút
họ và website bằng cách sử dụng internet quảng cáo, email hay tạo các h ội ch ợ. Ngoài
ra, các doanh nghiệp cũng nên thành lập cộng đồng (user group) , di ễn đàn, chat hay
4


thăm dò ý kiến khách hàng qua các cuộc khảo sát nh ằm tạo s ự thu hút khách hàng
quay trở lại.
- Khách hàng/người xem
Khách hàng là người không thể thiếu đối với những doanh nghi ệp th ương m ại
điện tử. Tuy nhiên, chúng ta cũng cần phải phân biệt 2 loại hình thức mua hàng:
1) Mua hàng giữa các doanh nghiệp: Người mua là một doanh nghiệp khác
có nhu cầu mua hàng.
2) Mua hàng giữa khách hàng và doanh nghiệp: Người mua thường là m ột
cá nhân thanh tốn bằng thẻ tín dụng và gửi hàng về tận nhà.
- Thăm website
Ngay khi khách hàng vào website, một site kinh doanh sẽ được tải xu ống. Lúc
này bạn có thể bắt đầu theo dõi và tạo profile cho khách hang này. D ựa vào thơng tin
đó có thể nhắm đến các mặt hàng mà khách hàng này quan tâm nhi ều nhất.
Đây là bước đầu tiên và quan trọng của web thương mại điện tử.
- Xem sản phẩm

Khách hàng xem sản phẩm trong website, nếu mặt hàng được bố trí theo các
gian hàng, chủng loại để khách hàng dễ tìm ki ếm. Một khi khách hàng b ị thu hút vào
các mặt hàng đang bày bán hay các chương trình khuy ến mãi thì đây th ực s ự là khách
hàng tiềm năng.
- Giỏ hàng
Trên website thương mại điện tử ln có giỏ hàng cho khách hang mua s ắm
tiện lợi và dễ dàng nhất. Giỏ hàng chỉ đơn giản là một danh sách các m ặt hàng mà
người mua đã chọn, số lượng, giá cả, thuộc tính (màu sắc, kích cỡ,…) và b ất kỳ thơng
tin khác liên quan đến đơn đặt hàng.
Các giỏ hàng thường cung cấp các tùy chọn để dọn sạch giỏ, xóa các mặt hàng, và c ập
nhật số lượng.
- Tính tiền (Check out)
Ngay sau khi khách hàng có tất cả các mặt hàng c ần mua, h ọ sẽ b ắt đ ầu quy
trình tính tiền. Đối với mơ hình mua hàng giữa khách hàng v ới doanh nghi ệp, khách
hàng thường sẽ nhập vào thông tin về địa chỉ chuyển hàng và tính hóa đơn. Khách
hàng cũng có thể thêm vào thơng tin về lời chúc mừng, gói q và các thơng tin khác
đối với các dịch vụ phụ thuộc
- Tính phí vận chuyển
Phí vận chuyển có thể hiểu đơn giản như là việc tính phí tồn b ộ hay ph ức t ạp
như là việc tính phí cho mỗi mặt hàng đã mua và tương quan v ới đoạn đ ường mà
hàng phải được vận chuyển đến. Tuy nhiên, có thể khó khăn hơn khi xử lý vi ệc đặt
hàng quốc tế.
Khi đó có thể liên kết với một “nhà vận chuy ển” (provider), theo dõi hàng hóa
trong q trình vận chuyển.
- Thanh tốn (Payment)
Sau khi tính tốn tổng giá trị các mặt hàng (có kèm thu ế vàphí v ận chuy ển)
người mua sẽ trình bày phương thức thanh tốn
Các tùy chọn sẽ khác nhau đối với các giao dịch:
+ Giữa khách hàng với doanh nghiệp thường thanh toán bằng thẻ tín dụng
hoặc trả sau khi giao nhận

5


+ Giữa doanh nghiệp với doanh nghiệp cần có sẵn đầy đủ các tùy chọn, bao
gồm cả đơn đặt hàng, báo giá, bảo lãnh,…
Đối với các thẻ tín dụng, có các tùy chọn đ ể xử lý các th ẻ tín dụng ở ngo ại
tuyến hay trực tuyến. Việc xử lý trực tuyến trên internet qua các d ịch v ụ do các cơng
ty uy tín đảm nhận.
- Biên Nhận (Receipt)
Sau khi thực hiện xong việc đặt hàng, có thể cần gửi tr ở l ại cho khách hàng
một biên nhận. Đối với mơ hình thương mại điện tử giữa doanh nghi ệp v ới doanh
nghiệp, biên nhận có thể là một danh sách đính kèm v ới đ ơn đ ặt hàng. Đ ối v ới khách
hàng, biên nhận có thể là một bảng in lại của đơn đặt hàng trên màn hình, ho ặc m ột
danh sách được gửi cho người mua hàng bằng Email.
Trong cả hai trường hợp, quy trình này đều có thể tự động hóa dễ dàng
- Xử lý đơn đạt hàng
Nếu không tự động xử lý thẻ tín dụng, thì đầu tiên phải xử lý giao dịch tài chính
Các quy tắc kinh doanh chuẩn điều khiển bước này như việc đặt hàng được thực hi ện
qua điện thoại hay qua thư.
Có thể cung cấp tùy chọn cho khách hàng biết về tình trạng đặt hàng, tồn kho
hay tình trang cung cấp mặt hàng
- Thực hiện đơn hàng
Ngay sau khi có đơn hàng hợp lệ, nó cần được thực hiện. Đây có thể là cơng
đoạn kinh doanh nhiều thách thức nhất. Nếu mua sắm trực tuyến, có thể có khó khăn
trong kiểm kê hang. Nếu mua sắm thơng qua hệ thống dịch vụ thì có th ể có các vấn
đề hợp nhất về hệ thống dịch vụ thực hiện đơn đặt hàng.
- Vận chuyển hàng
Bước cuối cùng trong quy trình thương mại điện tử là vận chuy ển hàng cho
khách hàng. Có thể cung cấp tình trạng đặt hàng cho khách hàng. Trong trường hợp
này, nó có thể bao gồm số vận chuyển UPS hay FedEx để khách hàng theo dõi s ự v ận

chuyển hàng của họ.
3. Tìm hiểu về Website
3.1 Website là gì?
Website, còn gọi là trang web hoặc trang mạng, và nội dung liên quan được xác
định bằng một tên miền chung và được xuất bản trên ít nhất một máy chủ web. Các ví dụ
đáng chú ý là các website wikipedia.org, google.com và amazon.com.
Tất cả các trang web có thể truy cập cơng khai đều tạo thành World Wide Web.
Cũng có những trang web riêng tư chỉ có thể được truy cập trên mạng riêng, chẳng hạn như
trang web nội bộ của công ty dành cho nhân viên của công ty.
Các trang web thường dành riêng cho một chủ đề hoặc mục đích cụ thể, chẳng hạn
như tin tức, giáo dục, thương mại, giải trí hoặc mạng xã hội. Siêu liên kết giữa các trang
web hướng dẫn điều hướng của trang web, thường bắt đầu với trang chủ.
Người dùng có thể truy cập các trang web trên nhiều loại thiết bị, bao gồm máy
tính để bàn, máy tính xách tay, máy tính bảng và điện thoại thơng minh . Ứng dụng được sử
dụng trên các thiết bị này được gọi là trình duyệt web.
Website cần có những yếu tố sau:
 Thiết kế thẩm mỹ, tiện lợi
6


 Tốc độ nhanh.
 Tên Website dễ nhớ và ngắn gọn.
 Hỗ trợ nhiều tín năng như: email, thống kê truy cập, cập nhật thơng tin dễ
dàng và nhanh chóng.
4. Ngơn ngữ lập trình và cơng nghệ được sử dụng:
4.1 HTML:
HTML là viết tắt của cụm từ Hyper Text Markup Language, có nghĩa là “Ngơn ngữ
đánh dấu siêu văn bản”. HTML được dùng để thiết lập trang web. Vì mỗi website có thể
chứa nhiều trang nội dung nên mỗi trang sẽ là một tài liệu HTML.
HTML đóng vai trị giúp người dùng có thể định dạng, thiết kế cấu trúc các thành phần

của một trang web hay các ứng dụng, heading, links, hoặc phân chia giữa các đoạn văn, …
Một tập tin HTML được hình thành từ các phần tử HTML, trong đó nó đã được quy định
bởi các cặp thẻ (gọi là tag), và lưu dưới dạng đuôi mở rộng là .html hay .htm.
4.2 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
(HTML). Nói ngắn gọn hơn là ngơn ngữ tạo phong cách cho trang web. 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 style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu
chữ, font chữ, thay đổi cấu trúc…
4.3 JAVASCRIPT
JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử
dụng phổ biến nhất như là một phần của các trang web, mà s ự thi hành c ủa chúng
cho phép Client-Side script tương tác với người sử dụng và tạo các trang web đ ộng. Nó
là một ngơn ngữ chương trình thơng dịch với các khả năng hướng đối tượng.
JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nh ưng
cơng ty Netscape đã đổi tên của nó thành JavaScript, b ởi vì s ự ph ổ bi ến nh ư là m ột
hiện tượng của Java lúc bấy giờ. JavaScript xuất hiện l ần đầu trong Netscape 2.0 năm
1995 với tên LiveScript. Core đa năng của ngôn ngữ này đã đ ược nhúng vào Netscape,
IE, và các trình duyệt khác.
4.4 BOOTSTRAT
Bootstrap là một front-end framework miễn phí giúp q trình phát tri ển web
được nhanh và dễ dàng hơn.
Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS nh ư typography, forms,
buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript
tùy chọn.
Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một
cách dễ dàng.
7

4.5 PHP
PHP viết hồi qui của "PHP: Hypertext Preprocessor".
PHP là ngơn ngữ lập trình kịch bản viết cho máy chủ mà được nhúng trong HTML. Nó
được sử dụng để quản lý nội dung động, Database, Session tracking, …
Nó được tích hợp với một số Database thông dụng như MySQL, PostgreSQL, Oracle,
Sybase, Informix, và Microsoft SQL Server.
PHP thực thi rất tuyệt vời, đặc biệt khi được biên dịch như là một Apache Module trên
Unix side. MySQL Server, khi được khởi động, thực thi các truy vấn phức tạp với các tập
hợp kết quả khổng lồ trong thời gian Record-setting.
PHP hỗ trợ một số lượng rộng rãi các giao thức lớn như POP3, IMAP, và LDAP. PHP4
bổ sung sự hỗ trợ cho Java và các cấu trúc đối tượng phân phối (COM và CORBA). Cú
pháp PHP là giống C.
4.6 XAMPP:
Phần mềm XAMPP là một loại ứng dụng phần mềm khá phổ biến và thường hay
được các lập trình viên sử dụng để xây dựng và phát triển các dựa án website theo ngôn ngữ
PHP. XAMPP thường được dùng để tạo máy chủ web (web server) được tích hợp sẵn
Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin.
XAMPP được xem là một bộ cơng cụ hồn chỉnh dành cho lập trình viên PHP trong
việc thiết lập và phát triển các website
Đặc biệt, Xampp có giao diện quản lý khá tiện lợi, cho phép người dùng chủ động bật
tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào. Phần mềm này cũng được thiết
lập và phát triển dựa trên mã nguồn mở.
4.7 MySql
Là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database
Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server. RDBMS là
một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình
thức quản lý các mối liên hệ giữa chúng.
MySQL là một trong số các phần mềm RDBMS. RDBMS và MySQL thường được

cho là một vì độ phổ biến quá lớn của MySQL. Các ứng dụng web lớn nhất như
Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưu trữ dữ
liệu. Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tương thích với nhiều
hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows, và Ubuntu.
4.8 Database:
Database là tập hợp dữ liệu theo cùng một cấu trúc. Hãy thử nghĩ về việc chụp hình tự
sướng: bạn nhấn nút chụp ảnh về chính bản thân bạn. Hình ảnh là dữ liệu, thư viện lưu ảnh
8


là cơ sở dữ liệu. Cơ sở dữ liệu, hay database, là nơi chứa và sắp đặt dữ liệu. Dữ liệu được
đặt trong một bộ dữ liệu chung, dataset, được tổ chức sắp xếp giống như một bảng tính vậy.
Mỗi “bảng” này có liên hệ với nhau theo cách nào đó. Vì vậy từ Relational (liên hệ) trong
RDBMS có ý nghĩa như vậy. Nếu phần mềm không hỗ trợ mô hình dữ liệu quan hệ với
nhau như vậy thì gọi là DBMS.
4.9 Open source:
Open source dịch là mã nguồn mở, có nghĩa là ai cũng có thể dùng và chỉnh sửa nó.
Bất kỳ ai cũng có thể cài đặt phần mềmn ày. Bạn cũng có thể học cách tùy chỉnh phần mềm
theo nhu cầu của bạn. Tuy nhiên, giấy phép GPL (GNU Public License) quyết định bạn có
thể làm gì tùy vào điều kiện nhất định. Phiên bản thương mại cũng được xuất bản nếu bạn
cần thêm chủ quyền linh hoạt và hỗ trợ cao cấp.
Mơ hình Client-server
Máy tính cài đặt và chạy phần mềm RDBMS được gọi là client (máy khách). Mỗi khi
chúng cần truy cập dữ liệu, chúng kết nối tới máy chủ (server) RDBMS. Cách thức này
chính là mơ hình “client-server”.
4.10 MySQL Server
MySQL Server là máy tính hay một hệ các máy tính cài đặt phần mềm MySQL dành
cho server để giúp bạn lưu trữ dữ liệu trên đó, để máy khách có thể truy cập vào quản lý. Dữ
liệu này được đặt trong các bảng, và các bảng có mối liên hệ với nhau. MySQL server
nhanh, an toàn, đáng tin cậy. Phần mềm MySQL cũng miễn phí và được phát triển, phân

phối và hỗ trợ bởi Oracle Corporation.
4.11 MySQL Client
MySQL client không hẵn phải cài phần mềm MySQL của Oracle mà là nói chung của
mọi phần mềm có thể thực hiện truy vấn lên một MySQL server và nhận kết quả trả về.
MySQL client điển hình là đoạn mã PHP script trên một máy tính hay trên cùng server dùng
để kết nối tới cơ sở dữ liệu MySQL database. Phpmyadmin cũng là một MySQL client có
giao diện người dùng. Một số cơng cụ miễn phí dùng làm MySQL là:
 MySQL Workbench (Mac, Windows, Linux), Miễn phí, mã nguồn mở
 Sequel Pro (Mac), miễn phí, mã nguồn mở
 HeidiSQL (Windows; chạy trên Mac hoặc Linux bằng WINE emulator), miễn phí
 PhpMyAdmin (web app), miễn phí, mã nguồn mở

9


CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ, CÀI ĐẶT, GIẢI PHÁP
1. Mơ tả bài tốn
- Tên bài tốn: Thiết kế website bán đồ dùng th ể thao
Để có thể quản lý hệ thống website bán đồ dùng thể thao, hệ thống cần những thông tin:
+ Khách hàng: là những người truy cập vào Website, được hệ thống phục vụ, hỗ trợ.
Thông tin khách hàng bao gồm: Mã khách hàng, tên tài khoản, emali, liên hệ, địa chỉ.
+ Người bán hàng: Những người cần sử dụng các chức năng bán hàng của hệ thống
để thực hiện nhiệm vụ của mình. Thơng tin người bán hàng bao gồm: họ tên, email, liên hệ,
địa chỉ.
+ Ngưởi quản trị hệ thống: Có thể bổ sung, thay đổi hoặc xóa các thơng tin của
khách hàng và người bán hàng.
Hoạt dộng của website được mô tả như sau:
- Khách hàng và người bán hàng khi truy cập vào hệ thống có thể xem được thơng tin
các sản phẩm bao gồm (ID, Tên, hình ảnh , giá, mơ tả của sản phẩm).
- Khi khách hàng muốn thêm 1 hay nhiều số lượng sản phẩm vào giỏ hàng. Trước tiên

khách hàng phải đăng nhập vào hệ thống với tên tài khoản và mật khẩu đã được tạo. Sau khi
đăng nhập thành cơng, khách hàng có thể thêm sản phẩm vào giỏ hàng, xem sp trong giỏ
hàng, xóa sản phẩm, xóa giỏ hàng hay tiếp tục mua sắm. Khi khách hàng bấm nút thanh
tốn có thể thanh tốn qua 2 hình thức: Thanh tốn trực tuyến qua thẻ hoặc thanh tốn khi
nhận hàng, sau khi thanh tốn thành cơng khách hàng sẽ nhận được mã thanh toán.
- Mỗi khách hàng khi mua hàng sẽ có một đơn đặt hàng do hệ thống xuất gửi về người
bán hàng. Đơn đặt hàng bao gồm (id mã đặt hàng, id sản phẩm, tên, số lượng, giá, ngày đặt
mã khách hàng)
- Một khách hàng khi truy cập có thể đăng ký tài khoản để mua hàng. Khi đăng ký
khách hàng phải điền đầy đủ thông tin như : tên đầy đủ, tên tài khoản, emali, sdt, liên hệ, địa
chỉ, mật khẩu. Sau khi đăng ký nếu thành công hệ thống sẽ chuyển tới trang đăng nhập
khách hàng.
- Khi người bán hàng muốn xem thông tin các sản phẩm của mình. Trước tiên người
bán hàng phải đăng nhập vào hệ thống với tài khoản và mật khẩu đã được tạo. Sau khi đăng
nhập thành công, người bán hàng có thể xem thơng tin các sản phẩm, thêm sản phẩm, cập
nhật sản phẩm, xóa sản phẩm, chỉnh sửa các sản phẩm. Người bán hàng có thể xem
thông tin các đơn đặt hàng của khách hàng.
10


- Mỗi sản phẩm, đơn đặt hàng đều cho phép hiển thị và cập nhật thông tin.
- Khi 1 khách hàng muốn trở thành người bán hàng trên hệ thống. Trước tiên khách
hàng phải đăng ký tài khoản người bán hàng, khi đăng ký thành viên phải điền đầy đủ thông
tin (Họ tên,email,địa chỉ,liên hệ,mật khẩu) Sau khi đăng ký nếu thành công hệ thống sẽ
chuyển tới trang đăng nhập người bán hàng.
- Khi người bán hàng mới đã đăng ký thành công tài khoản, nếu muốn đăng bán sản
phẩm lên hệ thống , bắt buộc người bán hàng phải tạo 1 cửa hàng của mình, thì lúc đó người
bán hàng mới được phép đăng sản phẩm, cửa hàng bao gồm các thông tin (Tên cửa hàng,
email, số điện thoại,địa chỉ).
2. Phân tích

2.1 Yêu cầu website
STT
1
2
3
4

Yêu cầu
Nhập sản phẩm
Hệ thống menu
Đặt hàng

Chức năng
Thêm, xoá, sửa
Menu sản phẩm, menu dich vụ
Đặt hàng, thay đổi thơng tin
giao nhận, thanh tốn, huỷ
đơn….
Đăng ký, đăng nhập
+ Khách hàng: thêm vào giỏ,
thanh toán online, thanh toán
khi nhận hàng, mua hàng
+ Người bán hàng: đăng bán,
thêm, sửa, xóa, xem đơn hàng.
Bảng 2.2 Yêu cầu website

2.2 Yêu cầu chức năng
- Giao diện
+ Giao diện phải tùy chỉnh dễ dàng về màu sắc
+ Hình ảnh bắt mắt, đúng với sản phẩm

- Hệ thống menu
+ Menu sản phẩm, dịch vụ phải được tùy biến đa cấp, dễ dàng phát triền thêm cho
sau này
+ Menu thể hiện ngang hay đứng tùy ý vào khách hàng
- Thể hiện hàng hóa
+ Những thuộc tính cơ bản của hàng hóa phải được thể hiện: tên, giá, chất lượng, sản
xuất,…
+ Thể hiện được giá khuyến mãi
+ Chèn được nhiều hình ảnh cho một sản phhẩm
+ Tìm kiếm sản phẩm thơng minh
- Quản trị nội dung
+ Tùy biến nội dung dễ dàng: thông tin, hotline, hỗ trợ,…
+ Hệ thống email phản hồi phải được đảm bảo chạy thông suốt: đảm bảo email được
chuyển về nhanh nhất
11


3. Thiết kế
3.1 Thiết kế CSDL
 Mô tả từng bảng:
 Table_contact:
STT

Thuộc tính

Kiểu dữ liệu

Ghi chú

1

Name

Varchar(250)

NOT NULL

2

Email

Varchar(255)

NOT NULL

3

Mobile

Varchar(250)

NOT NULL

4

Subject

Varchar(250)

NOT NULL

5

Message

Varchar(250)

NOT NULL

6

level

Int(30)

NOT NULL

Bảng 2.3 Thành phần bảng Contact
 Table_customer:
STT

Thuộc tính

Kiểu dữ liệu

Ghi chú

1

username

Varchar(30)

PRIMARY

2

fullname

Varchar(30)

NOT NULL

3

email

Varchar(30)

NOT NULL

4

contact

Varchar(30)

NOT NULL

5

address

Varchar(30)

NOT NULL

6

Password

Varchar(30)

NOT NULL

Bảng 2.4 Thành phần bảng customer
 Table_manager:
STT

Thuộc tính

Kiểu dữ liệu
12

Ghi chú


1

username

Varchar(30)

2

fullname

Varchar(30)

3

email

Varchar(30)

4

contact

Varchar(30)

5

address

Varchar(30)

6

password

Varchar(30)

PRIMARY KEY

Bảng 2.5 Thành phần bảng manager
 Table_order:
STT

Thuộc tính

Kiểu dữ liệu

Ghi chú

1
2

order_ID
F_ID

Int(30)
Int(30)

PRIMARY KEY
FOREIGN KEY

3

productname

Varchar(30)

4

price

Int(30)

5

quantity

date

6

order_date

Varchar(30)

7

username

Varchar(30)

FOREIGN KEY

8

R_ID

Int(30)

FOREIGN KEY

Bảng 2.6 Thành phần bảng order

 Table_product:
STT

Thuộc tính

Kiểu dữ liệu

13

Ghi chú


1

F_ID

Int(30)

2

name

Varchar(30)

3

price

Int(30)

4

description

Varchar(200)

5

R_ID

Int(30)

6

Images_path

Varchar(200)

7

Option

Varchar(10)

PRIMARY KEY

FOREIGN KEY

Bảng 2.7 Thành phần bảng product
 Table_yourshop:
STT

Thuộc tính

Kiểu dữ liệu

Ghi chú

1

R_ID

Int(30)

PRIMARY KEY

2

Name

Varchar(30)

3

email

Varchar(30)

4

contact

Varchar(30)

5

address

Varchar(30)

6

M_ID

Varchar(30)

Bảng 2.8 Thành phần bảng yourshop

14

FOREIGN KEY