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

Đồ án thực tập tốt nghiệp ngành cntt về thiết kế website điện thoại bằng wordpress.gồm các phần cụ thể về phân tích thiết kế hệ thống và các bước thực hiện tạo website như: Cài đặt wordpress trên localhost với XAMPP Đăng kí tên miền, hosting miễn phí Tối ưu hóa tìm kiếm SEO cho website

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

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

MỤC LỤC

LỜI CẢM ƠN 4

MỞ ĐẦU 5

 Tên đề tài: 5

 Lý do chọn đề tài 5

 Mục tiêu – mục đích 5

 Bố cục: 6

NỘI DUNG 7

CHƯƠNG 1: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 7

1.1 Xác định yêu cầu của Website 7

1.2 Tác nhân của hệ thống 7

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

1.4 Biểu đồ ca sử dụng 8

1.5 Đặc tả ca sử dụng 9

1.5.1 Ca sử dụng xem thông tin sản phẩm 9

1.5.2 Ca sử dụng tìm kiếm sản phẩm 10

1.5.3.Ca sử dụng quản lý sản phẩm 11

1.5.4.Quản lý tin tức 12

1.5.5.Ca sử dụng đặt hàng 12

1.5.6.Ca sử dụng quản lý thông tin đặt sản phẩm 13

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

1.7 Xác định các lớp tham gia ca sử dụng 14

1.7.1 Ca sử dụng đăng nhập vào hệ thống 14

1.7.2 Ca sử dụng cặp nhật tài khoản 16

1.7.3 Ca sử dụng xem sản phẩm 17

1.7.4 Ca sử dụng tìm kiếm sản phẩm 18

1.7.5 Ca sử dụng đặt hàng 19

1.8 Biểu đồ lớp chi tiết 20

CHƯƠNG 2: THIẾT KẾ WEB 21

2.1.Cài đặt wordpress trên localhost với XAMPP 21

2.1.1 Download và cài đặt XAMPP 21

2.1.2 Cài đặt XAMPP 21

2.1.3 Download và cài đặt Wordpress 23

2.2.Phân tích thông tin danh mục Web 29

2.2.1.Giao diện trang chủ 29

2.3.Cài đặt cấu hình Theme và Plugin 33

2.3.1.Cài đặt theme Vantage 33

2.3.2.Cài đặt các Plugin 36

2.4.Triển khai trang web 60

2.4.1 Đăng kí tên miền tk 60

2.4.2 Đăng kí hostinger 61

2.4.3 Download CuteFPT 9.0 62

2.5 Tối ưu hóa tìm kiếm SEO cho trang Web 64

2.5.1 Cài đặt plugin để tạo sitemap cho web 64

2.5.2 Đăng kí và gửi Sitemap cho Google webmaster 65

2.5.3 Tối ưu hóa bài viết với plugin “Google SEO” 65

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

Kết luận 66

Hướng phát triển 66

DANH MỤC TÀI LIỆU THAM KHẢO 67

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ậntì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ự đónggóp của thầy cũng như các bạn

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

Nguyễn Công Hoàn

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 nhucầ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"

 Mục tiêu – mục đích

 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

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ướcgiả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ácbiể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ứcxây dựng trang web bằng wordpress và cách đăng ký tên miền, hosting, và SEO

NỘI DUNGCHƯƠ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

kiếm, tham khảo thông tin về các sảnphẩm và đăng ký mua sản phẩm

Nhân viên 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

Quản trị hệ thống là người có quyền cao nhất trong hệ

thống, quản lý hệ thống, quản lý sảnphẩm, quản lý khách hàng, quản lý tintức, quản lý đơn hàng

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ẩmMua sản phẩm

Xem thông tin sản phẩmTìm kiếm sản phẩmCập nhật tài khoản khách hàngPhản hồi

Đặt hàng

Quản trị hệ thống Đăng nhập

Quản lý sản phẩmQuản lý khách hàngQuản lý tin tứcQuản lý thông tin phản hồiQuản lý đặt sản phẩm

1.4 Biểu đồ ca sử dụng

Biểu đồ usecase chính

Quan ly dat hang

Dang ky thanh vien

Quan ly tin tuc

Quan ly phan hoi

Quan ly thanh vien

Cap nhat thong tin tai khoan Tim kiem tin tuc

Nguoi Dung

Dat hang

Xem san pham Khach xem

Tim kiem san pham

Quan ly san pham

Quan tri he thong

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

1.5 Đặc tả ca sử dụng

1.5.1 Ca sử dụng xem thông tin sản phẩm

Mô tả tóm tắt Tên ca sử dụng Xem thông tin sản phẩm

Mục đích

Ca sử dụng này cho phép khách hàngxem 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

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

1.5.2 Ca sử dụng tìm kiếm sản phẩm

Mô tả tóm tắt

Tên ca sử dụng Tìm kiếm sản phẩmMục đích Ca sử dụng này mô tả khách hàng tìmkiếm sản phẩm.

Các luồng sự

kiện Luồng sự kiện chính

Hệ thống hiển thị các lựa chọn tìmkiế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ọnchức năng tìm kiếm:

- Nếu khách hàng chọn tìmkiếm theo loại sản phẩmthì luồng sự kiện con Tìmkiếm theo loại sản phẩmthực hiện

- Nếu người dùng chọn tìmkiếm theo giá thì luồng

sự kiện con Tìm kiếmtheo gía được thực hiện

- Nếu khách hàng chọn tìmkiếm theo từ khóa thìluồng sự kiện con Tìmkiếm theo từ khóa đượcthự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ìmthấy trong cơ sở dữ liệu theo yêu cầungười dùng

1.5.3.Ca sử dụng quản lý sản phẩm

Mô tả tóm

tắt

Tên ca sử dụng Quản lý sản phẩmMục đích

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ảnphẩm từ hệ thống

Tác nhân Quản trị hệ thống, Nhân viên

Các luồng

sự kiện

Luồng sự kiệnchính

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óaNgườ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

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

Hệ thống cập nhật những thay đổi vừa thực hiệnNgườ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

Nhân viên chọn Hủy khi không muốn thêm sảnphẩm, hay sửa hay xóa sản phẩm khỏi hệ thống.Điều kiện

Tiền điều kiện Nhân viên phải đăng nhập thành công vào hệthống.Hậu điều kiện 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

Tác nhân Quản trị hệ thống, Nhân viên

Các luồng

sự kiện Luồng sự kiệnchính

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

Nếu nhân viên chọn “Thêm tic tức”, luồng sự

kiện con Thêm bài viết được thực hiện.

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

Tiền điều kiện Nhân viên phải đăng nhập vào hệ thống.

Hậu điều kiện 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

Khách hàng điền đầy đủ thông tin bắtbuộc để đặt hàng.

Hệ thống hiển thị các mục sau để kháchhàng điền thông tin:

Điều kiện

Tiền điều kiện Khách hàng phải điền đầy đủ mọithông tin bắt buộc.

Hậu đ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ở

Tác nhân Quản trị hệ thống, Nhân viên

Các luồng

sự kiện

Luồng sự kiệnchính

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

Xóa thông tin đặthàng

Khách hàng trả lời điện thoại và không muốnmua sản phẩm

Hệ thống yêu cầu xác nhận xóa Điều kiện Tiền điều kiện Nhân viên phải đăng nhập vào hệ thống.

Hậu điều kiện 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

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

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

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

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

: cus tomer 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.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

1.7.3.3 Biểu đồ tuần tự

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

khachhang W_Dangnhap

tenDN

m atkhau Nhap tenDN() Nhap m atkhau() kiem tra DN() (f rom dang nhap)

W_khachhang

us ernam pas s ten dia chi

s dt edit()

QL_khachhang capnhat()

cus tomer cus tom er_id customer_fullnam e cus tom er_addres s cus tomer_phone cus tom er_us ername cus tom er_pas s word customer_created_date cus tom er_notes cus tom er_order_id cus tomer_date add() edit() delete() (f rom s o do lop)

: khachhang : W_Dangnhap : QL_DangNhap : W_khachhang : QL_khachhang : cus tom er1: yeucaudangnhap

2: yeucaudangnhap

3: kiem trathongtin 4: hienthi

5: hienthi 6: nhapthongtin

7: capnhat

8: luu 9: traloi 10: tral oi

11: hienthi

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

Khach xem

(from Use Case View)

W_sanpham masanpham gia anhdaidien chonxemsanpham() hienthisanpham() dathang()

(from bi en)

W_chitietsanpham masanpham gia anhdaidien kichco mausac thuonghieu ghichu hienthisanpham() datsanpham()

(from bi en)

QL_Sanpham

themsanpham() suathongtinsanpham() xoasanpham()

(from control )

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

(from thucthe1)

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_chitiet sanpham : QL_Sanpham : Sanpham 1: Chon xem 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

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

(from bi en)

QL_Timkiemsanphan

timtheotukhoa() timtheoloaisanpham() timtheogia()

(from thucthe1)

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

(from thucthe1)

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

: Nguoi Dung : W_timkiemsanpham : QL_Timkiemsanphan : W_sanpham

1: Yeu cau tim kiem 2: Yeu c au chon phuong thuc tim k iem 3: Chon phuong thuc tim kiem 4: Nhap thong tin tim kiem

5: Lay thong tin tim kiem

6: Lay thong tin tim kiem 7: Tra loi 8: Tra loi

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

Nguoi Dung (from Use Case Vi ew)

W_Dangnhap tenDN matKhau NhaptenDN() Nhapmat Khau() KiemTraDN() (from b i en)

W_sanpham masanpham gia anhdaidien chonxemsanpham() hient hisanpham() dathang()

(fro m b i en ) QL_Dathang

taodonhang() taogiohang() thanhtoan() (f ro m co ntro l)

Order order_id order_title order_created_date order_product_id order_customer_id add() delete() (fro m th ucth e1 )

Sanpham product_id [roduct_name product_image product_price product_discount_price product_size product_color product _content product_created_date add() del() (f ro m th ucth e1)

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 : W_sanpham : QL_Dathang : S anpham : Order 1: Nhap ten DN, MK

2: K iem tra DN 3: Yeu cau chon viec 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: Hien thi

Hình 2.7.16:Biểu đồ trình tự đặt hàng

1.8 Biểu đồ lớp chi tiết

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:

Chạy Module “Apache” và “MySql” ( hình 2.3)

Tạo Database MySQL cho WordPress với PhpMyAdmin

Hình 2.52.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

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ênMySql

Ở 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

Hình 2.8

Hình 2.9

Hình 2.10

Hình 2.11

Hình 2.12

Hình 2.13

2.2.Phân tích thông tin danh mục Web

2.2.1.Giao diện trang chủ

2.2.1.1 Header

Phần Header gồm logo cửa hàng điện thoại và banner quảng cáo ở góc trái(hình 3.1)

Hình 3.12.2.1.2 Menu

Phần menu màu đen nắm phía dưới header, chứa các chuyên mục của web(hình 3.2)

Hình 3.22.2.1.3Slider

Phần Slider là silder show tạo bằng jquery, chứa các banner quảng cáo(hình 3.4)

Hình 3.4

2.2.1.4 Last news

Phần Last news chứa các tin tức mới cập nhật và các logo quảng cáo nằmxem kẽ (hình 3.5)

Hình 3.52.2.1.5 Widgets

Phần Widgets gồm các box Quảng cáo, hỗ trợ trực tuyến, Facebook, Like,Đếm lượt truy cập

2.2.1.6 Footer

Phần Footer chứa thông tin liên lạc về web (hình 3.6).

Hình 3.6Giao diện danh sách bài viết cùng đề tài

Gồm danh sách các bài viết về chuyên mục và phần danh sách link của các bài viết

khác

Giao diện hiển thị nội dung bài viết

Chứa nội dung bài viết, plugins Facebook Like and Share, quảng cáo và link cácbài viết khác

2.3.Cài đặt cấu hình Theme và Plugin

2.3.1.Cài đặt theme Vantage

Vào trang chủ wordpress tìm kiếm theme với từ khóa “ Vantage”

Download theme về xong rồi cài đặt ở mục “Thêm mới” trong phần “Giaodiện” , chọn file đã download về và cài đặt Chờ trong giây lát sau đó kích hoạttheme

Hình 4.1