Đồ án thực tập tốt nghiệp thiết kế website điện thoại bằng wordpress

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP
ĐỀ TÀI : XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI HTC

GIẢNG VIÊN HƯỚNG DẪN: ThS. VŨ THỊ TUYẾT MAI
SINH VIÊN THỰC HIỆN: NGUYỄN CÔNG HOÀN
HÀ NỘI, 2014

1


MỤC LỤC
MỤC LỤC..........................................................................................................................2
LỜI CẢM ƠN....................................................................................................................3
DANH MỤC TÀI LIỆU THAM KHẢO.......................................................................68

2


LỜI CẢM ƠN

Trong quá trình thực hiện đề tài “Xây dựng Website bán hàng”, em đã
hoàn thiện đề tài.
Để hoàn thiện được đề tài này,em xin được gửi lời cảm ơn chân thành đến
cô giáo hướng dẫn Cô Vũ Thị Tuyết Mai, Giảng viên Khoa Công nghệ thông tin
trường Đại học Công Nghiệp Hà Nội đã hết lòng giúp đỡ, hướng dẫn, chỉ dạy tận
tình để em hoàn thành được đề tài này. Trong quá trình thực hiện đề tài em đã cố
gắng nỗ lực hết sức để hoàn thành đề tài nhưng để hoàn thiện hơn vẫn cần sự đóng
góp của thầy cũng như các bạn.

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

Sinh viên thực hiện:
Nguyễn Công Hoàn

3


MỞ ĐẦU
• Tên đề tài:
Xây dựng Website bán hàng
• Lý do chọn đề tài
Hiện nay, ngành Công nghệ thông tin đã có những bước phát triển nhanh
chóng về ứng dụng của nó trong mọi lĩnh vực trong cuộc sống trên phạm vi toàn
thế giới nói chung và Việt Nam nói riêng. Công nghệ thông tin là một phần
không thể thiếu của cuộc sống văn minh, góp phần đẩy mạnh công cuộc công
nghiệp hóa hiện đại hóa đất nước. Việc ứng dụng những thành quả của khoa học
công nghệ vào trong đời sống, trong công tác là hết sức thiết yếu. Ứng dụng của
công nghệ thông tin kết hợp với truyền thông 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ông ty, các tổ chức,. . . nó đóng
vai trò quan trọng và không thể thiếu. Công nghệ thông tin và truyền thông hóa
góp phần làm thay đổi suy nghĩ, lối mòn tư duy của mỗi con người, nó giúp con
người năng động hơn, kết nối nhanh hơn ở mọi lúc mọi nơi làm tăng mức độ hiệu
quả, năng suất của công việc.
Trước đây để có thể mua điện thoại chúng ta phải ra tận cửa hàng để mua.
Song các loại mặt hàng điện thoại vẫn chưa được phong phú,chưa thể đáp ứng nhu
cầu mua những sản phẩm đa dạng, chất lượng đến tay người tiêu dùng. Mặt khác ở
Việt Nam có rất nhiều các website song chưa thật sự cụ thể một mặt hàng nào đó .
Để phục vụ cho nhu cầu mua được đúng yêu cầu những sản phẩm vừa phong phú.
Em đã quyết định thực hiện đề tài: “Xây dựng Website bán hàng"

4


• Mục tiêu – mục đích
• Mục tiêu
+ Xây dựng được bộ cơ sở dữ liệu chính xác, cập nhật, ổn định
+ Giao diện Website: thân thiện với người dùng, đầy đủ 1 số
chức năng
-

Giỏ hàng

-

Sản phẩm

-

Tin tức

-

Giới thiệu

-

Thanh toán trực tuyến

+ Đơn giản hóa cách thức mua hàng qua mạng.

• Mục đích
Xây dựng Website hoàn thiện về mặt nội dung cũng như giao diện,
góp phần nâng cao về quảng cáo, giá trị thương mại của các mặt hàng nước
giải khát, giúp người bán người mua dễ dàng tìm đến nhau hơn.
• Bố cục:

Nội dung chính chia làm 2 chương chính:
Chương 1: Phân tích thiết kế hệ thống. Giới thiệu về các ca sự dụng cũng như các
biểu đồ của một trang web bán hàng. Còn Chương 2: Thiết kế website, nói về cách thức
xây dựng trang web bằng wordpress và cách đăng ký tên miền, hosting, và SEO.

5


NỘI DUNG
CHƯƠNG 1: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
1.1. Xác định yêu cầu của Website
Website cần đạt đạt được những yêu cầu sau:
 Giao diện thân thiện dễ sử dụng
 Thông tin sản phẩm: Trình bày và giới thiệu các loại sản phẩm, với đầy đủ
hình ảnh thông tin. Đưa ra những sản phẩm nổi bật, sản phẩm bán chạy.
 Những tin tức bộ sưu tập,…
 Cho phép chỉnh sửa, xóa các bài viết tin tức.
 Cho phép tìm kiếm tin tức, sản phẩm, gợi ý thông minh.
 Thiết kế giỏ hàng, thân thiện dễ tương tác.
 Tích hợp thanh toán trực tuyến qua.
1.2 Tác nhân của hệ thống
Tác Nhân
Khách hàng

Mô Tả
là những người vào hệ thống xem, tìm
kiếm, tham khảo thông tin về các sản
phẩm và đăng ký mua sản phẩm.
là những người có tài khoản trên hệ
thống (là thành viên của website) và
tham gia vào việc giải quyết đơn hàng.
là người có quyền cao nhất trong hệ
thống, quản lý hệ thống, quản lý sản
phẩm, quản lý khách hàng, quản lý tin
tức, quản lý đơn hàng.

Nhân viên

Quản trị hệ thống

1.3. Các ca sử dụng của hệ thống









Nhân viên đăng nhập
Xem sản phẩm
Tìm kiếm sản phẩm
Thêm sản phẩm vào giỏ hàng

Đặt hàng
Quản lý sản phẩm
Quản lý đơn hàng
Quản lý tin tức
6


Tác nhân

Ca sử dụng

Khách hàng

Xem thông tin sản phẩm
Tìm kiếm sản phẩm
Mua sản phẩm

Người sử dụng

Đăng nhập
Xem thông tin sản phẩm
Tìm kiếm sản phẩm
Cập nhật tài khoản khách hàng
Phản hồi
Đặt hàng

Quản trị hệ thống

Đăng nhập
Quản lý sản phẩm

Quản lý khách hàng
Quản lý tin tức
Quản lý thông tin phản hồi
Quản lý đặt sản phẩm

1.4. Biểu đồ ca sử dụng
Biểu đồ usecase chính

Dang ky thanh vien

Quan ly tin tuc
Tim k iem s an pham

Xem s an pham

Quan ly phan hoi

Tim k iem tin tuc

Quan ly thanh vien

Khac h x em

Nguoi Dung

Cap nhat thong tin tai k hoan

Quan ly dat hang

Quan ly s an pham

Dat hang

Hình 1.4.1: Biểu đồ ca sử dụng chính

7

Quan tri he thong


1.5. Đặc tả ca sử dụng
1.5.1. Ca sử dụng xem thông tin sản phẩm
Tên ca sử dụng

Xem thông tin sản phẩm
Ca sử dụng này cho phép khách hàng
xem thông tin về những sản phẩm có
bán tại website.
Khách hàng có thể thêm hàng vào giỏ
hàng khi có nhu cầu mua hàng.
Khách hàng
Ca sử dụng bắt đầu khi người dùng
muốn biết những thông tin về sản
phẩm mà mình quan tâm hoặc sản
phẩm có trên website.
Hệ thống hiển thị hình ảnh đại diện,
tên và giá của sản phẩm
Người dùng kích vào tên sản phẩm để
xem thông tin chi tiết về sản phẩm.
Hệ thống hiển thị thông tin chi tiết về

sản phẩm.
Không
Không

Mô tả tóm tắt
Mục đích

Tác nhân

Điều kiện

Tiền điều kiện
Hậu điều kiện

8


1.5.2. Ca sử dụng tìm kiếm sản phẩm
Tên ca sử dụng
Mô tả tóm tắt

Tìm kiếm sản phẩm
Ca sử dụng này mô tả khách hàng tìm
kiếm sản phẩm.
Khách hàng
Hệ thống hiển thị các lựa chọn tìm
kiếm:
- Tìm theo loại sản phẩm
- Tìm theo giá
- Tìm theo từ khóa

Hệ thống yêu cầu khách hàng chọn
chức năng tìm kiếm:
- Nếu khách hàng chọn tìm
kiếm theo loại sản phẩm
thì luồng sự kiện con Tìm
kiếm theo loại sản phẩm
thực hiện.
- Nếu người dùng chọn tìm
kiếm theo giá thì luồng
sự kiện con Tìm kiếm
theo gía được thực hiện.
- Nếu khách hàng chọn tìm
kiếm theo từ khóa thì
luồng sự kiện con Tìm
kiếm theo từ khóa được
thực hiện.
Khách hàng kích vào tìm Tìm kiếm.
Hệ thống hiển thị những sản phẩm tìm
thấy trong cơ sở dữ liệu theo yêu cầu
người dùng.

Mục đích
Tác nhân

Luồng sự kiện chính

Điều kiện

Tiền điều kiện

Không
Không

Hậu điều kiện

9


10


1.5.3.Ca sử dụng quản lý sản phẩm
Tên ca sử dụng
Mô tả tóm
tắt
Mục đích
Tác nhân

Quản lý sản phẩm
Ca sử dụng này cho phép người sử dùng quản lý
sản phẩm trong hệ thống. Người sử dụng có thể
thực hiện việc Thêm, Sửa, Xóa thông tin sản
phẩm từ hệ thống.
Quản trị hệ thống, Nhân viên
Ca sử dụng bắt đầu khi người dùng muốn thêm,
sửa, xóa thông tin sản phẩm từ hệ thống.
Hệ thống hiển thị các lựa chọn:
- Thêm sản phẩm
- Sửa
- Xóa

Người dùng chọn “Lưu”, thì luồng sự kiện lưu
được thực hiện và những thông tin về sản phẩm
sẽ được lưu trong cơ sở dữ liệu.
Người dùng chọn Sửa thông tin sản phẩm.
Hệ thống hiển thị thông tin sản phẩm.

Các luồng
sự kiện

Luồng
chính

kiện Người dùng sửa những thông tin cần sửa và xác
nhận việc sửa đổi.

sự

Hệ thống cập nhật những thay đổi vừa thực hiện
Người dùng chọn xóa thông tin sản phẩm
Hệ thống yêu cầu xác nhận xóa sản phẩm

Điều kiện

Tiền điều kiện

Hậu điều kiện

Nhân viên chọn Hủy khi không muốn thêm sản
phẩm, hay sửa hay xóa sản phẩm khỏi hệ thống.
Nhân viên phải đăng nhập thành công vào hệ

thống.
Nếu ca sử dụng này thành công, thông tin về sản
phẩm sẽ được thêm vào, sửa đổi, hay xóa khỏi
hệ thống. Trong các trường hợp khác, hệ thống
ở trạng thái chưa thay đổi.
11


1.5.4.Quản lý tin tức
Quản lý tin tức
Ca sử dụng này cho phép nhân viên quản lý tin
tức đăng trên hệ thống. Người dùng có thể thực
Mục đích
hiện việc Thêm, Sửa, Xóa tin tức từ hệ thống.
Quản trị hệ thống, Nhân viên
Tác nhân
Ca sử dụng bắt đầu khi người dùng muốn thêm,
sửa, xóa tin tức từ hệ thống.
Hệ thống hiển thị các lựa chọn:
- Thêm bài viết
- Sửa
- Xóa
Hệ thống yêu cầu nhân viên chọn công việc muốn
Các luồng
thực hiện
Luồng sự kiện
sự kiện
Nếu nhân viên chọn “Thêm tic tức”, luồng sự
chính
kiện con Thêm bài viết được thực hiện.

Mô tả tóm
tắt

Tên ca sử dụng

Nếu nhân viên chọn “Xóa bài viết”, luồng sự kiện
con Xóa thông tin bài viết được thực hiện.
Nếu nhân viên chọn “Cập nhật bài viết”, thì luồng
sự kiện con Cập nhật thông tin bài viết được thực
hiện.
Nhân viên chọn “Lưu”, thì luồng sự kiện con Lưu
được thực hiện.

Điều kiện

Tiền điều kiện
Hậu điều kiện

Nhân viên chọn “Sửa” thông tin về bài viết tin
tức.
Nhân viên phải đăng nhập vào hệ thống.
Ca sử dụng thành công, thông tin về tin tức sẽ
được thêm vào, sửa đổi hay xóa khỏi hệ thống.

1.5.5.Ca sử dụng đặt hàng
Tên ca sử dụng
Mô tả tóm tắt

Ca sử dụng đặt sản phẩm
Ca sử dụng này cho phép khách hàng

đặt sản phẩm
Khách hàng

Mục đích
Tác nhân
12


Điều kiện

Ca sử dụng bắt đầu khi khách hàng
muốn đặt sản phẩm
Khách hàng điền đầy đủ thông tin bắt
buộc để đặt hàng.
Hệ thống hiển thị các mục sau để khách
hàng điền thông tin:
- Thông tin hàng
- Chi phí giao hàng
- Thông tin người đặt hàng
- Địa chỉ, cách giao nhận
- Hình thức thanh toán
Đặt Sản phẩm
Khách hàng phải điền đầy đủ mọi
thông tin bắt buộc.

Tiền điều kiện

Ca sử dụng thành công khi khách hàng
đã đặt sản phẩm xong và lưu vào cơ sở
dữ liệu của hệ thống.

Hậu điều kiện

1.5.6.Ca sử dụng quản lý thông tin đặt sản phẩm
Tên ca sử dụng
Mô tả tóm
Mục đích
tắt
Tác nhân

Quản lý thông tin đặt sản phẩm
Ca sử dụng này cho phép nhân viên quản lý
thông tin đặt sản phẩm trên hệ thống. Nhân viên
xem để giải quyết đơn hàng từ hệ thống.
Quản trị hệ thống, Nhân viên
Ca sử dụng bắt đầu khi nhân viên nhận được
đơn hàng của khách từ hệ thống.
Hệ thống yêu cầu nhân viên gọi điện để trả lời
đơn hàng từ khách.
Hệ thống yêu cầu người sử dụng kiểm tra hàng
và giao nhận theo yêu cầu của khách.

Luồng sự kiện Khách hàng trả lời điện thoại và không muốn
chính
Xóa thông tin đặt mua sản phẩm
hàng
Hệ thống yêu cầu xác nhận xóa
Điều kiện

Tiền điều kiện

Các luồng Hậu điều kiện
sự kiện

Nhân viên phải đăng nhập vào hệ thống.
Ca sử dụng thành công, đơn hàng được giải
quyết. Hoặc bị xóa khỏi hệ thống.
13


1.6. Mô hình lớp lĩnh vực hệ thống

Hình 1.6: Mô hình lớp lĩnh vực hệ thống

1.7. Xác định các lớp tham gia ca sử dụng
1.7.1. Ca sử dụng đăng nhập vào hệ thống
1.7.1.1. Sơ đồ hoạt động

Hình1.7.1. Sơ đồ hoạt động của ca sử dụng đăng nhập

1.7.1.2. Biểu đồ trình tự hoạt động

14


Hình 1.7.2 Biểu đồ trình tự hoạt động đăng nhập

15

1.7.2.3 Biểu đồ trình tự đăng ký
Hình 1.7.3 Biểu đồ trình tự đăng ký

: Khach xem

: W_Dangky

: QL_Dangky
: cus tom er

1: yeu cau nhap thong tin

2: Nhap thong tin dang ky
3: Kiem tra thong tin()
4: Tao thanh vien()
5: Them thanh vien()
6: Tra loi
7: Tra loi
8: Hien thi()

1.7.2. Ca sử dụng cặp nhật tài khoản
1.7.3.1 Biểu đồ hoạt động cặp nhật tài khoản

Hình 1.7.4. Biểu đồ hoạt động cặp nhật tài khoản

16


1.7.3.2. Sơ đồ tham gia ca sử dụng cập nhật tài khoản
Hình 1.7.5. Sơ đồ tham gia ca sử dụng cập nhật tài khoản

W_khachhang
usernam
pas s
ten
dia chi
s dt
edit()

cus tomer

W_Dangnhap

khachhang

QL_khachhang

(f rom so do lop)

(f rom dang nhap)

tenDN
m atkhau

cus tom er_id
cus tomer_fullnam e
cus tomer_address
cus tom er_phone
cus tomer_us ername
cus tomer_pas s word

cus tom er_created_date
cus tomer_notes
cus tomer_order_id
cus tom er_date

capnhat()

Nhap tenDN()
Nhap m atkhau()
kiem tra DN()

add()
edit()
delete()

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

: khachhang

: W_Dangnhap

: QL_DangNhap

: W_khachhang

: QL_khachhang

: cus tom er

1: yeucaudangnhap

2: yeucaudangnhap
3: ki em trathongti n
4: hienthi
5: hienthi
6: nhapthongtin
7: capnhat
8: luu
9: tral oi
10: traloi
11: hi enthi

Hình 1.7.6. Biểu đồ tuần tự
1.7.3. Ca sử dụng xem sản phẩm
1.7.4.1. Biểu đồ hoạt động xem sản phẩm

Hình 1.7.8. Biểu đồ hoạt động xem sản phẩm
17


1.7.4.2. Biểu đồ tham gia ca sử dụng xem sản phẩm

W_sanpham
Khach xem
(from Use Ca se Vie w)

(fro m b i en )

masanpham
tensanpham
gia

anhdaidien
chonxemsanpham()
hienthisanpham()
dathang()

W_chitietsanpham

QL_Sanpham

Sanpham

(f ro m b i en )

(fro m co n trol )

(fro m th ucthe 1 )

masanpham
tensanpham
gia
anhdaidien
kichco
mausac
thuonghieu
ghichu

product_id
[roduct_name
themsanpham()
product_image

suathongtinsanpham()
product_price
xoasanpham()
product_discount_price
product_size
product_color
product_content
product_created_date

hienthisanpham()
datsanpham()

add()
edit()
del()

Hình 1.7.9: Biểu đồ tham ca sử dung xem sản phẩm
1.7.4.3. Biểu đồ trình tự tham gia ca sử dụng xem sản phẩm

: Khach xem

: W_sanpham

: W _chitietsanpham

: QL_Sanpham

: Sanpham

1: Chon x em san pham

2: Lay thong tin san pham
3: Lay thong tin san pham
4: Lay thong tin san pham

5: Tra loi
6: Tra loi
7: Tra loi
8: Hien thi

Hình 1.7.10: Biểu đồ trình tự tham ca sử dụng xem sản phẩm
1.7.4. Ca sử dụng tìm kiếm sản phẩm
1.7.5.1. Biểu đồ hoạt động

Hình 1.7.11:Biểu đồ hoạt động tìm kiếm sản phẩm

18


1.7.5.2. Sơ đồ lớp tham gia ca sử dụng

Nguoi Dung
(from Use Case View)

W_timkiemsanpham

QL_Timkiemsanphan

(from bi en )

(from thucth e1)

Sanpham
(from thucthe1 )

loaisanpham

Khach xem
(from Use Case View)

timtheotukhoa()
timtheoloaisanpham()
timtheogia()

timtheotukhoa()
timtheoloaisanpham()
timtheogia()

product_id
[roduct_name
product_image
product_price
product_discount_price
product_size
product_color
product_content
product_created_date
add()
edit()
del()

Hình 1.7.12:Sơ đồ lớp tham gia ca sử dụng
1.7.5.3. Sơ đồ trình tự tìm kiếm sản phẩm
: W _timkiemsanpham

: Nguoi Dung

: QL_Timkiems anphan

: W _sanpham

1: Yeu c au tim kiem
2: Yeu cau chon phuong thuc t im kiem
3: Chon phuong thuc tim kiem
4: Nhap thong tin t im kiem
5: Lay t hong tin tim kiem
6: Lay t hong tin tim kiem
7: Tra loi
8: Tra loi
9: Hien thi

Hình 1.7.13:Biểu đồ trình tự tìm kiếm sản phẩm
1.7.5. Ca sử dụng đặt hàng
1.7.6.1. Biểu đồ hoạt động ca sử dụng đặt hàng

Hình 1.7.14:Biểu đồ hoạt động đặt hàng

19


1.7.6.2. Biểu đồ tham gia ca sử dụng đặt hàng

W_sanpham

QL_Dathang

(fro m b i en)

(from co ntrol )

masanpham
t ensanpham
gia
anhdaidien

Sanpham
taodonhang()
t aogiohang()
t hanht oan()

(from th ucth e 1)

product _id
[roduct_name
product _image
product_price
product_discount _price
product_size
product_color
product_cont ent
product_created_date

chonxemsanpham()
hient hisanpham()
dathang()

Nguoi Dung

W_Dangnhap

(from Use Ca se V i ew)

(from b i en)

Order

add()
edit()
del()

(fro m th ucth e 1)

order_id
order_title
order_created_date
order_produc t_id
order_customer_id

tenDN
matKhau
NhaptenDN()

NhapmatKhau()
KiemTraDN()

add()
edit()
delete()

Hình 2.7.15: Biểu đồ tham gia ca sử dụng đặt hàng
2.7.6.3 Biểu đồ trình tự đặt hàng
: Nguoi Dung

: W_Dangnhap

: QL_Dathang

: W _sanpham

: Sanpham

: Order

1: Nhap ten DN, MK
2: Kiem tra DN
3: Yeu cau chon vi ec
4: Chon xem gio hang
5: Hien gio hang
6: Thanh toan
7: thanh toan
8: lay san pham
9: them hoa don

10: Tra loi
11: Tra loi
12: Tra loi
13: Hi en thi

Hình 2.7.16:Biểu đồ trình tự đặt hàng
1.8. Biểu đồ lớp chi tiết

20


CHƯƠNG 2: THIẾT KẾ WEB
2.1.Cài đặt wordpress trên localhost với XAMPP
2.1.1. Download và cài đặt XAMPP
• Download tại trang web:
/>• Hoặc download trực tiếp tại:
/>
Hình 2.1
2.1.2. Cài đặt XAMPP
Giải nén file xampp.rar, sau đó vào trong thư mục chạy file xampp ( hình
2.2).
Chạy Module “Apache” và “MySql” ( hình 2.3).
Tạo Database MySQL cho WordPress với PhpMyAdmin

21


Hình 2.2

Hình 2.3

Mở trình duyệt, truy cập vào đường dẫn:
http://localhost/phpmyadmin/
Ở thư mục <<Create new database>>, gõ vào tên CSDL cho WordPress sử dụng
(hình 2.4).

22


Hình 2.4
2.1.3. Download và cài đặt Wordpress
2.1.3.1. Download Wordpress:
• Truy cập vào trang web:
/>• Hoặc download tại:
/>
23


Hình 2.5
2.1.3.2. Cài đặt Wordpress
Mở thư mục cài đặt XAMPP ra, tiến hành giải nén Wordpress vào
“htdoc\webtest\wordpress” (hình 2.6).

Hình 2.6

24


Mở trình duyệt, truy cập vào trang “http:// localhost/webtest\wordpress” và
tiến hành cài đặt wordpress như hướng dẫn ở hình bên dưới.
Ở hình 2.8, ta điền thông tin về wordpress kết nối với Database mà ta đã tạo trên

MySql.
Ở hình 2.10, ta điền tiêu đề trang web và thông tin tài khoản quản trị.
Ở hình 2.13, là giao diện trang quản trị của Wordpress.
Ở hình 2.14, là giao diện trang web lúc vừa cài đặt xong.

Hình 2.7

25