Slide báo cáo đồ án xây dựng website bán quần áo bằng php mysql

ĐỒ ÁN TỐT NGHIỆP KĨ SƯ

BÁO CÁO

XÂY DỰNG WEBSITE BÁN QUẦN ÁO

Giảng viên hướng dẫn: <tên>
Sinh viên thực hiện: <tên> - <lớp>


Nội dung:
Tổng quan đề tài

1

Tổng quan đề tài
Tổng quan về công nghệ thiết kế website

2

Tổng quan về công nghệ thiết kế website
3

Phân tích và thiết kế website
Phân tích và thiết kế website

4

Giao diện website
Giao diện website

5

Kết luận
Kết luận

6

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


Chương 1: Tổng quan đề tài
Chương 1: Tổng quan đề tài

Thực hiện mục tiêu đáp ứng tối đa nhu cầu của khách
hàng
Hỗ trợ việc mua bán qua mạng nhanh chóng, hiệu quả

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

Giúp khách hàng lựa chọn sản phẩm mới mà khơng phải đến tận
nơi

Hình thức online tiếp cận lượng người dùng lớn

Hình thức online ngày càng cạnh trang gay gắt

Lựa chọn đề tài “Xây dựng website bán quần áo”

Chương 1: Tổng quan đề tài
Chương 1: Tổng quan đề tài

1.2. Khảo sát thực trạng

Một số
lưukhảo
ý: sát và tìm hiểu hệ thống làm việc hiện tại của cửa hàng bán quần áo:
Thực
hiện
Các mặt
hàng phải
cập nhật
thường
sản phẩm khi khách mới mua hay khi
--Nhập
sản phẩm
mới, được
lưu thông
tin nhà
cung xuyên(đặc
cấp: tên, sốbiệt
điệnsốthoại,lượng
địa chỉ…
nhập hàng
- Lưuvề).
thông tin sản phẩm: Mã sản phẩm, giá nhập, giá bán, số lượng hàng cịn, giảm giá…
Các dữhàng
liệu tới
phải

có hàng
mã hoặc
--Khách
mua
lưu số
lạihiệu.
thông tin: Tên khách hàng, số điện thoại, địa chỉ, giới tính…  tạo ưu đãi.
Lưuhàng
trữ các
--Cửa
tạogiao
đơn dịch
hàngcủa
vớikhách
thơnghàng.
tin sản phẩm, khách hàng, số lượng, tổng tiền và trạng thái.


Chương 1: Tổng quan đề tài
Chương 1: Tổng quan đề tài

1.3. Yêu cầu của đề tài

 Về thông tin
tin:
 Về- Thơng
quy trình
tin nghiệp
lưu trữ vụ:
đầy đủ, chính xác, lâu dài.

vụ
 Về- Quản
Giao
diện
lý đúng
thântrật
thiện,
tự và
cập
nhiệm
nhật số
vụ lượng
của quản
và sản
lý, khách
phẩm mới
hàng.
liên tục.
website:
- Quản
và người
có tài
khoản
riêng.
Ngườilýdùng:
đăngdùng
kí, đăng
nhập,
xem
sản phẩm, tìm kiếm, đặt hàng…

- Quản trị viên – quyền cao nhất: quản lý sản phẩm, danh
đơn hàng…

mục sản phẩm, thông tin khách hàng,


Chương 1: Tổng quan đề tài
Chương 1: Tổng quan đề tài

1.4. Ý nghĩa của đề tài

 Ý nghĩa khoa học
học:
 Ý-nghĩa
Đưa ra
thực
cơ tiễn:
sở lý thuyết áp dụng xây dựng website bán quần áo.
Triển
- Phânkhai
tích và
và phát
thiết triển
kế cơwebsite
sở dữ liệu
để phục
quản vụ
lý các
bài toán.
sản phẩm trong cửa hàng và các thơng tin về

đơn hàng
- Thiết
và khách
kế giao
hàng.
diện website.
Ngồi
- Triểngiao
khaidiện
phầnthâm
mềm.thiện, website cịn lưu trữ dữ liệu lâu dài, tìm kiếm nhanh chóng… giúp
dễ dàng trong quản lý.


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.1. Phân tích và thiết kế hướng đối tượng



Định
UMLnghĩa:
là gì?
Phân
và thiết
đốihợp
tượng(OOAD)
giao
phát

chínhkếxác
súc tích của vấn đề, có thành phần là
UML tích
là ngơn
ngữ kế
mơhướng
hình hóa
nhất dùng đểlàtạp
ra doạn
các bản
vẽtriển
nhằmmột
mơ mơ
tả hình thiết
hệ và
thống.

 đốiCáctượng
các
niệmchủ
đờiyếu:
thực.
loại và
sơ khái
đồ UML
 Nguyên
- Sơ đồtắc
lớpchung:
(Class Diagram)
- Một

nên xử
lý một
chức năng đơn lẻ, duy nhất.
Sơ đồlớp
đốichỉ
tượng
(Object
Diagram)
- Các
lớp,
module,
năng
nênCase
dễ dàng
Mở cho việc thêm, và Đóng cho việc thay đổi.
Sơ đồ
tình
huống chức
sử dụng
(Use
Diagram)
- Lớp
xuất
có khả Diagram)
năng thay thế lớp cha.
Sơ đồdẫn
trình
tựphải
(Sequence
- Chương

trình
nên buộc
cài đặt Diagram)
Interface mà không sử dụng.
Sơ đồ cộng
táckhông
(Composite
Structure
- Các
module
cao (State
cấp không
nên phụ
thuộc vào các module cấp thấp. Cả hai nên phụ thuộc thông qua lớp trừu tượng.
Sơ đồ
trạng thái
machine
Diagram)
- Sơ đồ thành phần (Component Diagram)
- Sơ đồ hoạt động (Activity Diagram)
- Sơ đồ triển khai (Deployment Diagram)
- Sơ đồ gói (Package Diagram)
- Sơ đồ tương tác (Interaction Overview Diagram)


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.1. Phân tích và thiết kế hướng đối tượng



OOAD sử dụng UML:
- View(góc nhìn):
- Diagram(bản vẽ):
- Notations(các ký hiệu): Kí hiệu để vẽ.
- Mechanisms(các quy tắc): Mỗi bản vẽ có quy tắc riêng để tạo nên bản thiết kế đúng và nhất quán.

Các
Các view
bản vẽ
trong
trong
OOAD
OOAD
sử sử
dụng
dụng
UML
UML


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.2. Ngôn ngữ thiết kế website



 HTML

CSS:
HTML(Hypertext Markup Language) là mã được dùng để xây dựng
nênCSS
cấu trúc và nội dung của trang web.
trúcLợinộiCSS(Cascading
HTML là ngôn ngữ đánh dấu văn bản(markup language) xác định cấu
thế
dung
củatrang
CSS:web.
Style Sheets) là ngơn ngữ sử dụng để tìm và

HTML:

định dạng
- Băng
lại các
thông:
phần Lưu
tử được
trữ trong
tạo ra bộ
bởinhớ
các cache,
ngôn ngữ
do đánh
đó códấu.
thể sử
dụng trên nhiều trang mà khơng phải nạp lại.
- Tính linh hoạt: Những người khơng quen thuộc có thể hiểu

và chỉnh sửa.
- Tính nhất qn: Có các yếu tố cần thay đổi , chỉnh sửa,
những thay đổi này có thể được thực hiện dễ dàng, đơn giản bằng
cách chỉnh sửa vài quy tắc trong stylesheet chung.

Minh họa vai trò của CSS đối với văn bản viết bằng HTML


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.3. Ngôn ngữ lập trình



JavaScript:
Jquery:
Javascript
là một
trình
HTML và
dụng
Chúng
client-server
script
tương
người
sử dụng
Jquery
là một

thưngơn
viện ngữ
kiểulập
mới
củacủa
Javascript,
hệứng
thống
mớiWeb.
lại các
hàmcho
củaphép
Javascript
một cách
ngắn
gọn,tác
dễ với
hiểu,
và được
tạo

và tạo
cácResig
trangvào
webnăm
động.
bởi
John
2006.



Ưu điểm
Tính
năngcủa
ưu JavaScript:
việt của Jquery:
thiếtviệc
kế code.
website:
- Với
Đơnngười
giản hóa
cho tương
máy chủ
docùng
JavaScript
chạy trên máy chủ của người dùng.
-Tiết
Chokiệm
phépbăng
các thơng
ứng dụng
thích
phát triển.
hoạtnăng
vận hành,
tương thích tốt.
-Linh
Có khả

mở rộng.
xử lýnăng
vấn hiện
đề. đại của trình duyệt mới.
-Dễ
Sửdàng
dụngkiểm
hầu tra,
hết tính
hiệu
mắt
và tính năng hay để phục vụ người dùng.
-Tạo
Hỗnhiều
trợ hầu
hếtứng
các bắt
trình
duyệt.
- Với người dùng:
Giúp người sử dụng có thêm trải nghiệm thú vị. Nhờ những tính năng hay người dùng sẽ cảm thấy thích thú và thoải mái.


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.3. Ngôn ngữ lập trình



PHP:
PHP(Hypertext Preprocessor – ban đầu là Personal Home Pages) là tập hợp con của các ngôn ngữ script như Javascript và Python.

Nó có thể xử lý các chức năng phía server như thu thập dữ liệu, biểu mẫu, quản lý file trên server.
Với Javascript, có thể tạo trang web động cho phép tương tác đơn giản như hiệu ứng cuộn chuột, tự động sửa lỗi và thư viện ảnh.
Nhưng nó khơng thể tạo nội dung mà người dùng tạo như mạng xã hội và thương mại điện tử. PHP là ngơn ngữ có thể làm được điều này.
Javascript và PHP không phải đối thủ của nhau. Mà chúng hỗ trợ nhau để xây dựng nên những trang web động đẹp.


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.4. Mô hình MVC





Mơ hình MVC
MVC:
Sự MVC
tươnglàtáctừ viết tắt của ‘Model-View-Controller’:
Model:
Ưu- điểm
củaNơi
mơchứa
hình những
MVC: nghiệp vụ tương tác với dữ liệu hoặc quản trị cơ sở dữ liệu.
View:xử
Chứa

những
- Trình
lý rõ
rang.giao diện như nút, khung nhập, hình ảnh… làm nhiệm vụ hiển thị dữ liệu với người dùng.
Controller:
Tiếpclass/function
nhận những yêu
lý được
từ người
dùng,
lấytriển
những
dữ liệu
nghiệp
vụ lớp
Model
cung cấp,
- Quy
hoạch các
vàocầu
cácxử
thành
phầngửi
riêng,
quá trình
phát
– quản
lý –cần
vậnthiết
hànhnhờ

– bảo
trì web
thuận
lợi hơn.

hiển thị -dữ
Tạo
liệu
chức
nhờnăng
lớp View.
chun biệt hóa.



Sự- Tạo
tương
mơtác:
hình chuẩn cho dự án.
- Đơn
Controller
giản, dễ
tương
hiểu.tác với View.
- Xử
Controller
lý nghiệp
tương
vụ đơn
tác với

giản.
Model.
- Model và View tương tác với nhau thông qua Controller.


Chương 2: Tổng quan về công nghệ thiết kế website
Chương 2: Tổng quan về công nghệ thiết kế website

2.5. Hệ quản trị cơ sở dữ liệu MySQL

 Hệ quản trị cơ sở dữ liệu
liệu:
 MySQL
MySQL:
Hệ quản trị cơ sở dữ liệu(Database Management System) là

hệ thống
được
kế quản
đểtrịquản
lýdữ
khối
dữdụng
liệu mã
nhấtnguồn
định một
VaiMySQL
trò
củathiết
hệ

là quản
hệ
cơ
trị sở
cơ
sở
liệu:
dữlượng
liệu sử
mở
cáchbiến
tự -động
cógiới
trật và
tự.
phổ
Cung
nhấtvà
thế
cấp
mơi
trường
đượctạo
cáclập
ưucơ
chuộng
sở dữ trong
liệu. q trình phát
triển web,
- Cung

ứng dụng.
cấp cách cập nhật và khai thác dữ liệu.
- Cung cấp các cơng cụ kiểm sốt, điều khiển các truy cập
vào cơ sở dữ liệu.

Kiến trúc của một Hệ quản trị cơ sở dữ liệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

Biểu đồ UseCase tổng quát


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

 Đăng
Đăng xuất:
nhập:
ký:
-- Tác
Tác nhân:
nhân: Quản
kháchlýhàng.
và khách hàng.
-- Mơ
Mơ tả:
tả: Thốt
Quản

Kháchlý
tài
hàng
và
khoản
khách
truykhỏi
cập
hàng
hệ
website
đăng
thống.
nhập
để đăng
hệ thống.
ký thành viên.
-- Đầu
Sự
Đầukiện
vào:
vào:chính:
Chọn
NgườiHệ
đăng
dùng
thống
xuất.
chọn
uđăng

cầu ký.
tài khoản và mật khẩu  Nhập
thơng tin
-- Sự
Sự
 Hệ
kiện
kiện
thống
chính:
chính:
kiểm
Hệ
Khách
tra:
thống
đúng
hàng
hủythì
chọn
lưuhiển
thơng
đăng
thị tin
giao
kýđăng
diện
Hệnhập
tương
thống

 Quay
ứng;
hiển sai
thị
về
màn
thì
trang
thực
hình
đăng
hiện
trang
kýsựchủ.
kiện
Khách
A1.hàng nhập thơng tin  Hệ thống kiểm tra dữ liệu:
thỏa mãn
- Sự
thìkiện
chuyển
A1: đến
Hệ thống
trang thơng
chủ; khơng
báo dữthỏa
liệumãn
khơng
thì hợp
thựclệhiện

 Nhập
sự kiện
lại

A1.
Quay lại bước 3 sự kiện chính hoặc hủy.
- Sự kiện A1: Hệ thống thông báo dữ liệu không hợp lệ  Nhập lại
thông tin  Chuyển đến bước 4 của sự kiện chính.
- Đầu ra: Lưu tài khoản khách hàng.

Biểu đồ UseCase của hệ thống
Biểu đồ UseCase của hệ thống

Biểuđồ
đồhoạt
hoạtđộng
độngĐăng
Đăngký
nhập
Biểu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Đặt hàng:
Cập
nhật

thơng
tin
cánhân:
nhân:
Bình
luận
sảnsản
phẩm:
Xem
Quản
chi
lý đơn
tiết
hàng
phẩm:
cá
- Tác nhân: Khách hàng.
đặt mua
cập
nhật
sản
thơng
phẩm.
tin
cásau
nhân.
- Mơ tả: Khách hàng bình
luận
sảnsản
phẩm

khiđặt.
mua hàng.
xem
chi
lại
đơn
tiết
hàng
phẩm.
mình
đã
Khách
Chọn
hàng
nhật
đăng
thơng
nhập
tinhệ
thống
nhânmục
Chọn
Hiển
thịluận
form
hàng

- Đầu
Đầukiện
ra: chính:

Khách
hàngcập
đăng
nhập
thành
cơng,
chọn
bìnhgiỏ
Sự
vào:
KháchNgười
chọn
dùng
một
sản
phẩm.
cá
Chọn
đơn
hàng
 sản
Hệ

Hệ thống
Nhập
thơng
hiển
tin
thịmuốn
chức

năng:
thay
đổi chức
 lấy
Hệnăng:
thống tin
kiểm
đủ và đúng
phẩm.
thống
hiển
- Sự
thịkiện
danh
chính:
sách,
Hệ
và các
thống
thơng
chi tra:
tiết đầy
sản phẩm
Hiểnthì

•
báo cập
nhậtthống
thành
Xóa kiểm

sản
cơng
phẩm
 đơn
Cập
nhật
giỏ
thơng
hàng
sở thì
dữ chuyển
liệu. qua bước
phẩm
•Hệ
tra
dữtrong
liệu:
Nếu
đầytinđủvào
và cơ
đúng
Xem
chi
tiết
hàng
•- Sự kiện
Thanh
Hệ đơn
thống
hàng

báo
dữ
liệu
hợp

Nhập
lại
chính.
Quay
tiếp; khơng
thì
thực
hiện
sựbáo
kiện
 Hệkhơng
thống
báolệ3 cập
nhật
bình
luận
A1:tốn
Thơng
lỗiA1
 Chuyển
tới bước
của
sự kiện

chuyển

Cập
tiếp nhật
theo;hàng
sốkhơng
lượngthì
trong
thực
giỏhiện
hàng
sự kiện
thống
thơng
Sự tiết.
kiện
chính:
Chọn
đơn
hàng
muốn
bình A1
luận HệBình
luận
sản
thị form-bước
chi
Xóa
đơn

lại bước
- 4Đầu

Sự
của
sự Thơng
kiện
A1:
Hệ
thơng
báo
sốnhật
lượng
phẩm
khơng đủ 
thành
cơng
kiện
Lưu
bìnhchính.
luận
vàođơn
cơ
sở
dữ
liệu.
ra:
tinthống
các
hàng
cập
vàosản
cơ sở

dữ liệu.
Đầu
lại
ra: bước
Thơng
2 tin
của
khách
sự kiện
hàng
chính.
cập nhật
vào
cơlệsởdữ
liệu.lại  Quay
-Quay
Sự kiện
A1: Hệ
thống
báo
dữ
liệu
khơng
hợp
Nhập
lại bước 3 của sự kiện chính.

Biểu đồ UseCase của tác nhân KHACHHANG

Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

Biểu đồ UseCase của tác nhân QUANTRIVIEN


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Quản lý danh mục:
- Tác nhân: Quản trị viên.
- Mô tả: Quản trị viên quản lý danh mục, giúp quản lý sản phẩm dễ

dàng.
- Đầu vào: Đăng nhập thành công với quyền quản trị.
- Sự kiện chính:

•
•
•

Thêm danh mục
Sửa danh mục
Xóa danh mục

- Sự kiện A1: Hệ thống báo lỗi  Nhập lại dữ liệu  Quay lại bước 3
của sự kiện chính.
- Đầu ra: Danh sách danh mục cập nhật vào cơ sở dữ liệu.

Biểu
đồ động
hoạt
dữ
liệu
Biểu
Thêm
thơng
tin
dữtinliệu
Biểuđồ
đồhoạt
hoạt
độngđộng
Cập Xóa
nhật
thơng
dữ liệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Quản lý sản phẩm:
- Tác nhân: Quản trị viên.
- Mô tả: Quản trị viên quản lý sản phẩm của cửa hàng.
- Đầu vào: Đăng nhập thành cơng với quyền quản trị.

- Sự kiện chính:

•
•
•
•

Thêm sản phẩm
Sửa sản phẩm
Xóa sản phẩm
Tìm kiếm sản phẩm

- Sự kiện A1: Hệ thống báo lỗi  Nhập lại dữ liệu  Quay lại bước 3
của sự kiện chính.
- Đầu ra: Danh sách sản phẩm cập nhật vào cơ sở dữ liệu.

Biểu đồ hoạt động Tìm kiếm dữ liệu
Biểu
đồ động
hoạt
dữ
liệu
Biểu
Thêm
thơng
tin
dữtinliệu
Biểuđồ
đồhoạt
hoạt

độngđộng
Cập Xóa
nhật
thơng
dữ liệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Quản lý tài khoản:
- Tác nhân: Quản trị viên.
- Mô tả: Quản trị viên quản lý tài khoản của khách hàng.
- Đầu vào: Đăng nhập thành cơng với quyền quản trị.
- Sự kiện chính:

•
•

Xóa tài khoản
Tìm kiếm tài khoản

- Sự kiện A1: Hệ thống báo lỗi  Nhập lại dữ liệu  Quay lại bước 3
của sự kiện chính.
- Đầu ra: Danh sách tài khoản cập nhật vào cơ sở dữ liệu.

Biểu đồ hoạt động Tìm kiếm dữ liệu
Biểu đồ hoạt động Xóa dữ liệu

Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Quản lý bình luận:
- Tác nhân: Quản trị viên.
- Mô tả: Quản trị viên quản lý các bình luận của khách hàng.
- Đầu vào: Đăng nhập thành cơng với quyền quản trị.
- Sự kiện chính:

•
•

Thêm bình luận
Xóa bình luận

- Sự kiện A1: Hệ thống báo lỗi  Nhập lại dữ liệu  Quay lại bước 3
của sự kiện chính.
- Đầu ra: Danh sách bình luận cập nhật vào cơ sở dữ liệu.

Biểu đồ
hoạt
ThêmXóa
thơng
Biểu
đồ động
hoạt động

dữtin
liệudữ liệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website



Quản lý đơn hàng:
- Tác nhân: Quản trị viên.
- Mô tả: Quản trị viên quản lý các đơn hàng của hệ thống.
- Đầu vào: Đăng nhập thành cơng với quyền quản trị.
- Sự kiện chính:

•
•
•

Cập nhật trạng thái đơn hàng
Xóa đơn hàng
Tìm kiếm đơn hàng

- Sự kiện A1: Hệ thống báo lỗi  Nhập lại dữ liệu  Quay lại bước 3
của sự kiện chính.
- Đầu ra: Danh sách đơn hàng cập nhật vào cơ sở dữ liệu.

Biểu đồ hoạt động Tìm kiếm dữ liệu
Biểu đồ hoạt
Cập động

nhật thơng
dữ liệu
Biểuđộng
đồ hoạt
Xóa dữtinliệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

BiểuBiểu
đồBiểu
tuần
đồ đồ
tuần
tựtuần
Thêm
tự tự
Xóa
thơng
Đăng
dữ liệu
tin
ký dữ liệu

Biểu Biểu
đồBiểu
tuần
đồđồtuần
tựtuần

Cập
tựtự
nhật
Đăng
nhập
Tìmthơng
kiếm tin
dữ dữ
liệuliệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

Quan hệ của các thực thể trong cơ sở dữ liệu


Chương 3: Phân tích và thiết kế website
Chương 3: Phân tích và thiết kế website

Bảng categor
y
Bảng admin
Bảng user