Xây dựng website quảng bá và bán hàng trực tuyến cho siêu thị thể thao sport one hà nội bằng wordpress

- WordPress còn thêm vào một số tính năng nhỏ nhằm hỗ trợ người dùng trong quá trình sử dụng như khả năng tự động lưu liên tục khi soạn thảo, nạp nội dung từ blog khác hay chia mục cho b

ĐẠI HỌC THÁI NGUYấN TRƯỜNG ĐẠI HỌC CễNG NGHỆ THễNG TIN & TRUYỀN THễNG

- -

HÀ HẢI HÙNG

XÂY DỰNG WEBSITE QUẢNG BÁ VÀ BÁN HÀNG TRỰC TUYẾN CHO SIấU THỊ THỂ THAO SPORT ONE HÀ NỘI BẰNG WORDPRESS

đồ án tốt nghiệp đại học NGÀNH CễNG NGHỆ PHẦN MỀM

Thái nguyên, năm 2016

ĐẠI HỌC THÁI NGUYấN TRƯỜNG ĐẠI HỌC CễNG NGHỆ THễNG TIN & TRUYỀN THễNG

- -

đồ án tốt nghiệp đại học

NGÀNH CễNG NGHỆ PHẦN MỀN

Đề tài:

XÂY DỰNG WEBSITE QUẢNG BÁ VÀ BÁN HÀNG TRỰC TUYẾN CHO SIấU THỊ THỂ THAO SPORT

ONE HÀ NỘI BẰNG WORDPRESS

Sinh viờn thực hiện : HÀ HẢI HÙNG

Giỏo viờn hướng dẫn : ThS NGUYỄN HỒNG TÂN

Thái nguyên, năm 2016

LỜI CẢM ƠN Sau một thời gian tìm hiểu đề tài “XÂY DỰNG WEBSITE QUẢNG BÁ

VÀ BÁN HÀNG TRỰC TUYẾN CHO SIÊU THỊ THỂ THAO SPORT ONE

HÀ NỘI BẰNG WORDPRESS ”, em đã hoàn thành tiến độ dự kiến Để đạt được

kết quả này, em đã nỗ lực thực hiện và đồng thời cũng nhận được rất nhiều sự giúp

đỡ, quan tâm, ủng hộ của các thầy cô bạn bè và gia đình

Em xin chân thành cảm ơn giáo viên hướng dẫn: Th.S Nguyễn Hồng Tân –

Bộ môn Công nghệ phần mềm – Trường Đại học Công nghệ thông tin và truyền thông Em xin chân thành cảm ơn các thầy cô và ban lãnh đạo trường Đại học Công nghệ thông tin và truyền thông – Đại học Thái Nguyên đã nhiệt tình giảng dạy và truyền đạt kiến thức quý báu và bổ ích trong suốt quá trình em học tập tại trường

Em xin chân thành cảm ơn các thầy, cô giáo viên thuộc bộ môn Công nghệ phần mềm đã trang bị cho em những kiến thức chuyên ngành rất hữu ích để em hoàn thành đề tài và phục vụ cho công việc của em sau này

Vì thời gian có hạn nên không thể tránh khỏi những thiếu sót, em rất mong nhận được sự đóng góp ý kiến từ thầy cô và các bạn để em hoàn thành đồ án tốt nghiệp.Em xin chân thành cảm ơn!

Thái Nguyên, tháng 6 năm 2016

Sinh viên thực hiện

Hà Hải Hùng

LỜI CAM ĐOAN

Em xin cam đoan đây là đề tài do em tự nghiên cứu, tìm hiểu và được sự hướng

dẫn tận tình của thầy giáo Ths Nguyễn Hồng Tân Các nội dung nghiên cứu, kết quả

trong đề tài này là trung thực và chưa công bố dưới bất kỳ hình thức nào trước đây Những tài liệu phục vụ cho việc tìm hiểu lý thuyết và tham khảo demo đã được ghi rõ trong phần tài liệu tham khảo.Nếu phát hiện có bất kỳ sự gian lận nào em xin hoàn toàn chịu trách nhiệm trước hội đồng về nội dung đề tài của mình

Thái Nguyên, tháng 6 năm 2016

Sinh viên thực hiện

Hà Hải Hùng

MỤC LỤC

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

MỤC LỤC 3

DANH MỤC HÌNH ẢNH 5

LỜI NÓI ĐẦU 7

Chương 1: CƠ SỞ LÝ THUYẾT 8

1.1 Tổng quan về Wordpress .8

1.1.1 WordPress là gì ? 8

1.1.2 Các tính năng cơ bản của Wordpress 9

1.2 Sự phát triển 10

1.2.1 Những bước đầu của Wordpress 10

1.2.2 Nét nổi bật làm nên sự phát triển: 11

1.2.3 Hướng dẫn cài đặt xampp 13

1.2.4 Hướng dẫn cài đặt WordPress trên localhost 19

1.3 Giới thiệu về Woocommerce 22

1.3.1 Woocommerce là gì? 22

1.3.2 Các chức năng của Woocommerce 22

1.3.3 Cài đặt Woocommerce 22

Chương 2 : KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 25

2.1 Khảo sát hệ thông 25

2.1.1.Nhu cầu thực tế 25

2.1.2 Khảo sát hiện trạng 25

2.1.3.Thiết bị và phần mềm 26

2.1.4.Yêu cầu trang web 26

2.1.5 Các yêu cầu chức năng: 26

2.1.6 Các yêu cầu phi chức năng: 27

2.1.7.Chức năng cụ thể 27

2.2.2 Đặc tả các Use Case 30

2.2.3 Biểu đồ Use Case của hệ thống 35

2.2.4.Biểu đồ hoạt động của hệ thông 38

2.2.5.Biểu đồ trình tự của hệ thông 42

2.2.6.Biểu đồ lớp của hệ thống 50

Chương 3: CHƯƠNG TRÌNH DEMO WEBSITE BÁN HÀNG 54

3.1 Trang chủ 54

3.2 Trang sản phẩm 55

3.3 Trang đăng ký , đăng nhập 56

3.4.Trang giỏ hàng 56

3.5 Trang thanh toán 57

3.6 Trang liên hệ 58

3.7 Giao diện admin 59

TỔNG KẾT ĐỀ TÀI 60

1 Kết quả đạt được: 60

2 Hướng phát triển chương trình 60

TÀI LIỆU THAM KHẢO 61

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 62

DANH MỤC HÌNH ẢNH

Hình 2.1 : Biểu đồ user case cho khách hàng 35

Hình 2.2: Biểu đồ user case quản trị hệ thống 36

Hình 2.3:Biểu đồ user case quản lý sản phẩm 36

Hình 2.4: Biểu đồ user case quản lý danh mục 37

HÌnh 2.5:Biều đồ user case quản lý đơn hàng 37

Hình 2.6: Biểu đồ user case quản lý thành viên 38

Hình 2.7:Biểu đồ hoạt động đăng ký thành viên 38

Hình 2.8:Biểu đồ hoạt động đăng nhập vào hệ thống 39

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

Hình 2.10:Biểu đồ hoạt động xem sản phẩm 40

Hình 2.11:Biểu đồ hoạt động xem giỏ hàng 40

Hình 2.12:Biểu đồ hoạt động xem thông tin cá nhân 41

Hình 2.13: Biểu đồ hoạt động thanh toán 41

Hình 2.14:Biểu đồ trình tự đăng ký thành viên 42

Hình 2.15:Biểu đồ trình tự đăng nhập 42

Hình 2.16:Biểu đồ trình tự tìm kiếm sản phẩm 43

Hình 2.17:Biểu đồ trình tự xem sản phẩm 43

Hình 2.18:Biểu đồ trình tự xem chi tiết sản phẩm 44

Hình 2.19:Biểu đồ trình tự thêm sản phẩm vào giỏ 44

Hình 2.20:Biểu đồ trình tự thêm danh mục sản phẩm 45

Hình 2.21:Biểu đồ trình tự xóa danh mục sản phẩm 45

Hình 2.22:Biểu đồ trình tự sửa danh mục sản phẩm 46

Hình 2.23:Biểu đồ trình tự thêm sản phẩm 46

Hình 2.24:Biểu đồ trình tự xóa sản phẩm 47

Hình 2.25:Biểu đồ trình tự cập nhật sản phẩm 48

Hình 2.26:Biểu đồ trình tự xem chi tiết hóa đơn 49

Hình 2.27:Biểu đồ trình tự thanh toán 49

Hình 2.30:Biểu đồ lớp tìm kiếm sản phẩm 51

Hình 2.31:Biểu đồ lớp thêm hàng vào giỏ 51

Hình 2.32:Biểu đồ lớp xem giỏ hàng 52

Hình 2.33:Biểu đồ lớp thêm sản phẩm 52

Hình 2.34:Biểu đồ lớp xem chi tiết sản phẩm 53

Hình 2.35:Biểu đồ lớp xem chi tiết đơn đặt hàng 53

Hình 3.1:Trang chủ 54

Hình 3.2:Trang sản phẩm 55

Hình 3.3:Trang đăng ký , đăng nhập 56

Hình 3.4:Trang giỏ hàng 56

Hình 3.5:Thanh toán 57

Hinh 3.6:Trang liên hệ 58

Hình 3.7:Giao diện admin 59

LỜI NÓI ĐẦU

Ngày nay, khi mà đời sống của con người ngày càng được cải thiện, thì những yêu cầu mà họ đặt ra đối với ngành Công Nghệ Thông Tin nói chung và công nghệ phần mềm nói riêng ngày càng khắt khe hơn Trước đây, ý tưởng về việc ngồi ở nhà mà có thể tìm được thông tin về sản phẩm hay nhu cầu sử dụng một cái

gì đó mà họ quan tâm thì gần như chỉ là chuyện không thể xảy ra Ngày nay, cùng với sự phát triển của công nghệ, mà đặc biệt là Internet, đã giải quyết cho những yêu cầu trên

Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ Đối với các cửa hàng và các công ty thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết Thông qua những website này họ có thể giới thiệu và quảng bá sản phẩm của mình tới khách hàng một cách tiện lợi và nhanh chóng nhất đó là nhu cầu cần thiết và là một hướng phát triển mới và có nhiều tiềm năng

Việc chọn lựa cách thực hiện nó như thế nào theo mô hình như thế nào và đáp ứng được yêu cầu.do đó em chọn đề tài theo hướng này là xây dựng một website bán hàng online thông qua tìm hiểu một mã nguồn mới và có nhiều tiền năng hiện nay là mã nguồn mở wordpress

Và em xin gửi lời cảm ơn đến thầy giáo Nguyễn Hồng Tân đã ủng hộ,có góp

ý cho nội dung của em được hoàn thiện và hướng dẫn tận tình cho em trong suốt quá trình em làm đề tài

Thái Nguyên, ngày tháng năm 2016

Sinh viên thực hiện

Hà Hải Hùng

Chương 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về Wordpress

1.1.1 WordPress là gì ?

- WordPress là phần mềm mã nguồn mở được cung cấp miễn phí, sử dụng

ngôn ngữ lập trình PHP và hệ cơ sở dữ liệu MySQL Do đó, nó thích hợp cho ai muốn đặt blog trên chính website sử dụng tên miền của riêng mình Tuy nhiên, nếu không có tên miền riêng và chịu được một vài hình ảnh quảng cáo đôi khi xuất hiện, bạn vẫn có thể dùng chung với nhà cung cấp Automattic Production tại địa chỉ http://wordpress.com tương tự các nhà cung cấp khác

-WordPress là một dạng phần mềm mã nguồn mở, là hậu duệ chính thức của

b2/cafelog, được phát triển bởi Michel Valdrighi Cái tên WordPress được đề xuất

bởi Christine Selleck, một người bạn của nhà phát triển chính Matt Mullenweg

- WordPress viết bằng PHP và sử dụng hệ quản trị MySQL WordPress chạy tốt trên PHP5, hầu hết mọi host (dịch vụ lưu trữ trực tuyến) có PHP đều hỗ trợ WordPress Nhiều Host (Godaddy, Host Gator, …) còn có chức năng tự động cài đặt WordPress

- WordPress để đăng tải thông tin lên mạng, WordPress có chức năng như mọi Website khác Nó có thể làm site tin tức, đánh giá, bán hàng… thậm chí là mạng xã hội

Ngoài ra, WordPress còn hỗ trợ tạo Blog miễn phí trên WordPress.com để những ai không có điều kiện tài chính, kỹ thuật, thời gian… có thể sử dụng được WordPress

- WordPress còn thêm vào một số tính năng nhỏ nhằm hỗ trợ người dùng trong quá trình sử dụng như khả năng tự động lưu liên tục khi soạn thảo, nạp nội dung từ blog khác hay chia mục cho bài viết Tuy nhiên, WordPress lại không có chức năng xem trước (preview) nội dung bài viết của mình, điều gây khó khăn cho người dùng khi họ cần xem xét và chỉnh sửa

- Các bản nâng cấp chính được chỉ định tên mã (codenames) đại diện cho các

nhạc sĩ nhạc jazz nổi tiếng

1.1.2 Các tính năng cơ bản của Wordpress

- Khi tạo một blog cho riêng bạn có thể sẽ có những lý do riêng, nhưng nếu

so với các script và dịch vụ blog khác, có thể bạn sẽ thích Wordpress ở những tính

năng dưới đây

 Dễ cài đặt, chỉ cần khởi tạo database, upload và thiết lập tham số trong file wp-config.php, sau 1,2 lần click chuột, bạn đã sẵn sàng để viết blog

 Không giới hạn số lượng category và sub-category: bạn có thể tạo vô số chuyên mục và các chuyên mục con trong các chuyên mục chính mà không gặp phải bất kì rắc rối nào.Tự động xuất RSS và Atom: giúp cập nhật các thông tin về blog của bạn ngay lập tức

 Sử dụng giao diện XML RPC để trackback và viết bài từ xa

 Có thể đăng bài trên blog từ email

 Hỗ trợ plugin và theme: đây là một điểm mạnh nhất của Wordpress Nó tạo

cơ hội cho hàng nghìn nhà phát triển cùng tham gia phát triển các plugin và theme cho Wordpress, làm cho nó càng ngày càng phong phú về tính năng và giao diện

 Có thể nhập dữ liệu từ Blogger, Blogware, Bunny’s Technorati Tags, DotClear, GreyMatter, Jorome’s Keyword, LiveJournal, Movable Type, TypePad, RSS, Simple Tagging, Textpattern, B2evoluton, v.v Đây là chức năng tuyệt vời nếu như bạn muốn chuyển từ một blog khác sang sử dụng Wordpress, nó giúp lại lấy lại tất cả các bài viết trên các blog khác để chuyển qua Wordpress

 Rất nhiều tài liệu hướng dẫn để giúp phát triển thêm tính năng, và nhiều

bộ API để mở rộng

 Dễ quản lý và duy trì mà chẳng cần phải có nhiều kĩ năng hay kinh nghiệm

 Khả năng tìm kiếm trên blog rất tốt

 Xuất bản nội dung ngay lập tức bất kể chiều dài của bài viết là bao nhiêu

 Hỗ trợ viết blog đa ngôn ngữ

 Administration Panel được tổ chức rất tốt với rất nhiều tính năng nhưng lại

Với sự trợ giúp của các plugin và rất nhiều bộ API, bạn có thể chỉnh sửa Wordpress tùy thích theo nhu cầu của bạn, và thậm chí bạn cũng có thể sử dụng Wordpress để làm một website hoàn chỉnh Wordpress có hàng ngàn plugin và theme, cộng với một đồng người sử dụng cực kì đông đảo luôn sẵn sàng góp sức phát triển, điều này làm cho Wordpress ngày càng lớn mạnh thể hiện vai trò số 1 của mình

1.2 Sự phát triển

1.2.1 Những bước đầu của Wordpress

Ông chủ của Wordpress

- Matt Mullenweg, ông chủ 25 tuổi của diễn đàn WordPress Ông được xếp

thứ 12 trong số 50 doanh nhân mạng trẻ và nổi tiếng nhất thế giới với tài sản gần 40 triệu USD

- Sinh ra ở Houston, bang Texas, Mỹ, Matt say mê văn và âm nhạc Vì thế, khi xây dựng Wordpress, ông đã lấy phương châm: Mã số (Code) chính là thơ ca

- Khi còn là một học sinh trung học, Matt Mullenweg đã thiết kế những dự

án phần mềm ngay tại phòng ngủ của mình Bảy năm sau, anh vẫn làm phần lớn

công việc của mình ở nhà Matt nghĩ ra việc làm WordPress từ năm 18 tuổi Đối với

anh, nó luôn là công cụ tự thể hiện bản thân mình Đó là một blog với nhiều yếu tố nhiếp ảnh Đối với nhiều người, nó không giống một blog bình thường mà giống một website hơn

- Trước WordPress là b2 Matt nói, chính vì anh không bao giờ cảm thấy

“ấm cúng” trong mạng, công cụ này đã có quá nhiều điều không tiện lợi và chúng

làm anh không hài lòng WordPress ra đời để loại những sự không tiện lợi này

- WordPress ra đời đã hơn 6 năm Matt nhớ lại khi lần đầu tiên ai đó ở Nhật

dịch WordPress sang thứ tiếng khác Vào lúc đó, Wordpress không có chức năng

nhiều ngôn ngữ Việc dịch sang thứ tiếng khác cũng có nghĩa người đó phải dịch

từng file, từng dòng code Điều đó đã làm anh sững sờ Và theo Matt, Rayan đã làm một công việc cực kỳ quan trọng, cực lớn và nhàm chán để làm cho WordPress thích nghi việc đa dạng hóa ngôn ngữ blog WordPress đã trở thành diễn đàn cho

một cộng đồng

- Đối với WordPress anh cùng các đồng nghiệp đang cố gắng thiết lập một

đội quân thật nổi bật mà độc lập trong vòng 10 - 30 năm nữa Đội của anh muốn tạo được phong trào như Google, eBay, Amazon

- Matt Mullenweg, sáng lập Automattic, công ty đứng sau công cụ

blog WordPress và một loạt những dự án phần mềm khác WordPress.com có khả

năng cung ứng cho 12 triệu blog, bao gồm cả những blog của The New York Times

đã đầu tư vào công ty của Mullenweg năm ngoái

- Vào năm 2004, thời hạn cấp phép của gói sản phẩm cạnh tranh Movable Type bị thay đổi bởi Six Apart, và rất nhiều người dùng của nó chuyển sang sử dụng WordPress, tạo nên một bước ngoặt lớn trong sự phát triển và phổ biến của WordPress

- Năm 2005, phiên bản WordPress 1.5 có hơn 900.000 lượt download, đây cũng là năm WordPress mở rộng dịch vụ của mình bằng cách tung ra một dịch vụ

lưu trữ blog WordPress.com Trang web này cho phép người dùng truy cập vào

blog ngay lập tức và hoàn toàn miễn phí

- Năm 2006 có 1.545.703 lượt download, có tổng cộng 191.567 lượt download trong tổng số 371 plugins

- Năm 2007 có 3.816.965 lượt download, có đến 2.845.884 lượt download trong tổn số 1.384 plugins, tăng gấp 15 lần

- WordPress còn giành giải thưởng Packt Open Source CMS

- Phiên bản mới nhất của WordPress là phiên bản 3.0.1 Nó được phát hành dưới Giấy phép Tài liệu Tự do GNU

- Bản 3.0 đã có hơn 11 triệu lượt tải về trong 42 ngày đầu tiên

1.2.2 Nét nổi bật làm nên sự phát triển:

 Việc quản lý web, quản lý các bài viết rất thuận tiện giống như các phần mềm thiết kế website chuyên nghiệp

 Hỗ trợ plug - in Đây thực sự là một điểm mạnh của Wordpress, với một cộng đồng người dùng viết các plug - in cho Wordpress Bạn không lo thiếu plug -

 Thể hiện các tệp PDF, DOC, Powerpoint ngay trên nội dung bài viết Đặc biệt tích hợp sẵn Latex – công cụ soạn thảo công thức toán học, giúp người sử dụng

có thể viết công thức toán học ngay trên blog

 WordPress có rất nhiều Widget (ứng dụng tạo thêm) như Thống kê số truy

nhập blog, các bài mới nhất, các bài viết nổi bật nhất, các comment mới nhất, liệt kê các chuyên mục, liệt kê các trang, danh sách các liên kết, liệt kê số bài viết trong từng tháng … khi muốn thay đổi vị trí các widget, thay vì phải động vào code, bạn chỉ việc kéo - thả ở những vị trí thích hợp Có vô số theme để người dùng lựa chọn

 Hỗ trợ tag/chuyên mục: Giúp bạn dễ dàng phân loại bài viết, dễ dàng, thuận tiên trong quá trình tìm kiếm cũng như xem lại các bài viết

 Hỗ trợ SEO khá tốt Tuy không thể nói là hoàn chỉnh nhưng cũng rất tốt với dàn kỹ sư luôn luôn lắng nghe ý kiến người dùng và cập nhật những tính năng nhằm nâng cao khả năng về SEO

 Ngoài thống kê số truy nhập của từng ngày, WordPress còn thống kê số

truy nhập của từng ngày đối với mỗi bài viết của web Trên cơ sở đó sẽ có định hướng nên viết vấn đề gì tiếp theo

 Các comment có thể duyệt rồi mới cho đăng, comment nào có nội dung không phù hợp có thể xóa, nếu cho là spam thì sau này IP đó không có thể gửi comment vào blog được nữa

 Admin (chủ website) có thể cho rất nhiều cộng tác viên gửi bài vào blog,

có thể phân quyền cho các cộng tác viên theo các cấp độ khác nhau Lưu giữ danh sách thành viên đã ghé thăm trang blog Admin cũng có thể cho bất kỳ ai đăng bài qua email vào blog miễn là admin cho họ một địa chỉ email bí mật của web (địa chỉ này có thể thay đổi bất kỳ lúc nào)

 Sao lưu dữ liệu nhằm khôi phục nội dung web một cách dễ dàng nếu

chẳng may web bị hack, và cung cấp công cụ chuyển nhà sang WordPress

 WordPress hỗ trợ 3 GB để lưu trữ các tệp hình ảnh và văn bản

 Hàng ngày WordPress có thống kê 100 bài trên các web tiếng Việt của

WordPress được nhiều người đọc nhất trong vòng 48 tiếng Nhờ đó bạn biết được

các thông tin quan trọng nhất đang diễn ra

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

Lưu ý nếu dùng Skype

Nếu máy đang cài đặt phần mềm Skype thì localhost sẽ không hoạt động được do Skype đã chiếm quyền sử dụng cổng mạng 80, đây là cổng mặc định của webserver Do đó, hãy mở Skype -> Tools -> Connection Options -> và bỏ chọn

phần “Use port 80 and 443… ” rồi nhập một cổng bất kỳ để Skype sử dụng

Sửa xong, hãy khởi động lại máy để hoàn tất

Tắt tường lửa

Nếu máy có cài đặt tường lửa từ Windows hay từ một phần mềm Antivirus nào khác thì hãy tắt nó đi vì có thể nó sẽ chặn cổng 80 hoặc các ứng dụng webserver

Tắt UAC trên Windows

Nếu máy đang dùng Windows và có bật chức năng User Account Control thì hãy tắt nó đi khi dùng localhost để tránh các vấn đề bị giới hạn quyền

XAMPP hoàn toàn miễn phí

Dễ sử dụng

Hỗ trợ các hệ điều hành thông dụng như Windows, Mac, Linux

Để tải XAMPP, đầu tiên truy cập vào địa chỉ

https://www.apachefriends.org/download.html và chọn phiên bản XAMPP phù hợp với hệ điều hành của máy tính đang sử dụng, và nên chọn phiên bản PHP 5.4.31 Lưu ý là XAMPP chỉ có phiên bản cho hệ điều hành 32bit nhưng 64bit vẫn hoạt động bình thường

Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next

Ở phần chọn Components, chọn danh sách các ứng dụng cần cài như hình dưới vì không phải cái nào trong gói XAMPP ta cũng cần Sau đó ấn Next tiếp

Ở phần chọn đường dẫn, chọn đường dẫn cần lưu cài đặt của XAMPP Lưu ý rằng đường dẫn này phải nhớ vì khi cài đặt web lên localhost, phải truy cập vào thư mục này nên để mặc định là c:\xampp Tiếp tục ấn Next

Ở trang kế tiếp, bỏ chọn phần “Learn more about Bitnami for XAMPP“ Và

ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP

Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost

Khởi động Localhost

Bây giờ vào thư mục c:\xampp và mở file xampp-panel.exe lên để bật bảng điều khiển của XAMPP

Bảng điều khiển của XAMPP để ý sẽ thấy hai ứng dụng Apache và MySQL

có nút Start, đó là dấu hiệu bảo 2 ứng dụng này chưa được khởi động, hãy ấn vào nút Start của từng ứng dụng để khởi động Webserver Apache và MySQL Server lên thì mới chạy được localhost

Nếu cả hai ứng dụng chuyển sang màu xanh như hình dưới là đã khởi động thành công

Sau khi khởi động xong, hãy truy cập vào website với địa chỉ

là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới

Có thể ấn vào nút English phía bên dưới để truy cập vào trang quản lý localhost

1.2.4 Hướng dẫn cài đặt WordPress trên localhost

Bước 1: Tạo database

Bước 2: Mở trình duyệt và gõ vào thanh địa chỉ http://localhost/wordpress/

bạn sẽ thấy màn chào mừng như hình dưới

Click vào Let’s go! để tiếp tục

Bước 3:

- User Name: tài truy cập MySQL, thông thường là root

- password: là mật khẩu của tải khoản được khai báo phía trên

- Database Host: thông thường là localhost, bạn giữ nguyên không cần thay đổi

- Table Prefix: ký tự đầu tiên xuất hiện trong tên bảng, để dễ hình dung bạn

có thể xem ảnh ở phía dưới

Bước 4: xác nhận và chạy cài đặt

Bước 5: Chọn lựa tên website và tài khoản quản trị

Bước 6: Nếu cài đặt thành công WordPress sẽ hiển thị thông tin tài khoản

của bạn Đến bước này bạn đã cài đặt thành công WordPress lên locahost, click vào

Log In để đăng nhập vào hệ thống quả trị và bắt đầu viết bài

1.3 Giới thiệu về Woocommerce

1.3.1 Woocommerce là gì?

Woocommerce là một plugin miễn phí được sử dụng để tạo một trang thương mại điện tử cỡ nhỏ tốt nhất hiện nay trong WordPress Nó cũng như bao plugin khác là bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng mà một trang bán hàng đơn giản cần có

1.3.2 Các chức năng của Woocommerce

- Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản phẩm affiliate và sản phẩm kỹ thuật số (có thể tải về)

- Hỗ trợ một số hình thức thanh toán online như PayPal, Credit Card, CoD, Cash và sẽ càng nhiều hơn khi cài thêm plugin hỗ trợ cho riêng nó

- Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng

- Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ

đa dạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cân nặng, kích thước, tỉnh thành,…

- Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạng thái

- Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị phần shop và sản phẩm, cái này rất có lợi cho lập trình viên

- Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shop chuyên nghiệp

1.3.3 Cài đặt Woocommerce

Sau khi cài đặt thành công mã nguồn mở Wordpress, tiến hành đăng nhập vào quản trị và chọn Plugin

Các bước cài đặt Woocommerce như sau:

Bước 1: Chọn Add New và tiến hành Search Woocommerce

Bước 2: Chọn kết quả đầu tiên và nhấn Install Now

Bước 3: Activate Plugin

Kết quả sau khi Activate Woocommerce

Chương 2 : KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Khảo sát hệ thông

2.1.1.Nhu cầu thực tế

Hiện nay, với xu hướng tin học hóa, áp dụng công nghệ máy tính vào trong mọi lĩnh vực hoạt động của xã hội, với thế mạnh và tính cấp thiết của ứng dụng tin học thì việc phát triển Website bán hàng qua mạng là một lợi thế để thương mại sản phẩm, phục vụ nhu cầu cuộc sống của con người

Do vậy mà hầu hết các lĩnh vực trong xã hội hiện nay đều sử dụng internet

để quảng bá, xây dựng thương hiệu, cung cấp sản phẩm cho khách hàng Vì vậy mà việc mua bán sản phẩm trực tuyến là vô cùng cần thiết hiện nay

Website bán hàng trực tuyến là một hình thức kinh doanh linh hoạt, tiện dụng cho cả nhà cung cấp và người sử dụng Bên cạnh đó việc mua bán, đặt hàng trên mạng giúp tiết kiệm thời gian, tiền bạc hơn cho khách hàng, đáp ứng được nhiều hơn các yêu cầu mà khách hàng đặt ra

 Sản phẩm đa dạng nhiều thương hiệu khác nhau như nike, adidas,

 Sản phẩm mới được cập nhật liên tục và ta có thể đăng ký email để được nhân tin khuyến mãi

 Màu sắc giao diện dễ nhìn dễ sử dụng

 Sản phẩm sẽ được chia thành các nhóm sản phẩm hoặc thương hiệu

 Khách hàng có thể chọn và mua sản phẩm trực tuyến thông qua hệ thống bán hàng online của website

 Ngay khi khách hàng đặt hàng thành công sẽ có email gửi về cho khách hàng báo đơn hàng đã được đặt và nhân viên siêu thị sẽ điện thoại lại cho khách

2.1.3.Thiết bị và phần mềm

 Máy tính có thể thiết kế được web

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

 Cài đặt Appserver, Xampp

 Phần mềm thiết kế web : photoshop, sublime text, flast…

2.1.4.Yêu cầu trang web

 Thống kê đầy đủ, chính xác doanh thu bán hàng của website theo từng ngày tháng hoặc tuần

 Khách hàng dẽ dàng có thể đặt hàng và mua hàng một cách nhanh chóng tiện lợi

 Trang quản trị cấu trúc rõ rang và rất dễ sử dụng cũng như quản lý

2.1.5 Các yêu cầu chức năng:

1 Yêu cầu chức năng nghiệp vụ:

- Cho phép người dùng đăng ký với hệ thống với vai trò khách hàng

- Lưu trữ thông tin của tất cả các đối tượng

- Lưu trữ thông tin đăng ký của khách hàng (đăng ký)

- Cho phép khách hàng xem sản phẩm , mua qua web

- Cho phép khách hàng tìm kiếm sản phẩm theo các tiêu chí khác nhau

- Cho phép các loại người dùng khác nhau hiệu chỉnh thông tin cá nhân khi cần thiết

- Hỗ trợ cho người quản trị trong việc quản lý hệ thống bao gồm: quản lý thông tin của tất cả các đối tượng ( khách hàng,thành viên, người dùng quyền quản trị), được quyền thêm và xóa các đối tượng này; quản lý các thông tin sản phẩm và các thông tin liên quan

- Hỗ trợ việc trao đổi thông tin lẫn nhau của các đối tượng

2 Yêu cầu chức năng hệ thống:

- Cho phép người dùng đăng nhập vào hệ thống với các vai trò khác nhau ứng với từng đối tượng

- Đảm bảo tính bảo mật của các thông tin đăng nhập của người dùng ở xa

- Đảm bảo tính bảo mật của các thông tin đăng ký của khách hàng (như các

mã số của thẻ tín dụng…)

- Phân cấp quyền hạn của từng đối tượng người dùng trong việc truy cập vào các tài nguyên của hệ thống

2.1.6 Các yêu cầu phi chức năng:

1 Nhằm lợi ích của các đối tượng người dùng:

- Tính tiện dụng: Giao diện thân thiện, dễ sử dụng đối với những người dùng Windows

- Tính hiệu quả: Đảm bảo việc truy xuất nhanh đến các trang và khả năng kiểm soát lỗi tốt

- Tính tương thích: Hỗ trợ tốt trên các trình duyệt từ IE5.1 trở lên và các trình duyệt tương thích khác như Netscape, Opera, Mozilla…

- Tính tiến hóa

2 Nhằm lợi ích của việc phát triển dự án:

- Thiết kế theo mô hình three-tiers

- Tính module hóa

- Các tham số của hệ thống được thiết kế động, dễ điều chỉnh

- Tính dùng lại của code

2 Tìm kiếm sản phẩm

Đầu vào từ hoặc cụm từ cần tìm kiếm

Đầu ra : Kết quả tìm kiếm

3 Đăng kí thành viên

Khách hàng có thể đăng ký để trở thành khách hàng thường xuyên (thành viên) của công ty và được cấp một tài khoản người dùng ( Acount ) để đăng nhập khi cần đặt hàng ,thanh toán, hỗ trợ ký thuật …

Đầu vào

 User name ( tài khoản ngưòi dùng)

 Password(mật khẩu)

 Họ tên đầy đủ ( Full name )

 Địa chỉ liên lạc ( Address )

 Danh mục mặt hàng trong giỏ hàng

 Thông tin cá nhân của khách hàng (Họ tên, mật khẩu, …)

 Thông tin liên quan đến việc mua hàng (ngày mua, thời điểm giao hàng ,

số lượng mỗi mặt hàng đặt mua, hình thức thanh toán, nơi nhận hàng, người nhận, tổng số tiền, tỷ giá USD/VND …)

Đầu ra

 Thông báo cho khách hàng theo thông tin đã nhập là đơn hàng đã được đặt

 Nếu đơn hàng không đúng quy định sẽ báo cho khách hàng đơn hàng đã bị hủy

5 Liên hệ và phản hồi

Cho phép người dùng góp ý , khuyếu nại, phản hồi … một số thông tin liên quan đến sản phẩm

Đầu vào : các thông tin góp ý , phản hồi dưới dạng Email

Đầu ra : thông tin chi tiết về góp ý ,phản hồi chờ nhà quản trị trả lời

6 Đăng ký nhận tin tức

Cho phép người dùng nhận đươc tin tức mới nhất cũng như các chương trình

khuyến mãi của website

Đầu vào : Email của khách hàng

Đầu ra : thông báo thành công

2.2 Phân tích và thiết kế hệ thống

2.2.1 Xác định Use Case của các tác nhân

 Tác nhân khách hàng

- Đăng ký, đăng nhập

- Tìm kiếm, xem, bình luận sản phẩm

- Xem, sửa thông tin cá nhân

- Xem, thêm, cập nhật ,xóa sản phẩm trong giỏ hàng

2.2.2 Đặc tả các Use Case

 Đăng kí thành viên

- Tác nhân : khách hàng

- Mô tả: cho phép khách hàng đăng ký làm thành viên của hệ thống

- Tiền điều kiện: khách hàng ghé thăm hệ thống

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

 Khách thăm chọn mục đăng ký thành viên

 Form đăng ký thành viên hiển thị

 Khách thăm đăng nhập thông tin cá nhân vào form đăng ký

 Nhấn nút đăng ký

 Hệ thống báo kết quả quá trình nhập thông tin cá nhân Nếu thông tin nhập không chính xác thì thực hiện luồn rẽ nhánh A Nếu nhập chính xác thì thực hiện bước 6

 Hệ thống cập nhật thông tin của khách hàng vào danh sách thành viên

- Mô tả: UC cho phép thành viên đăng nhập vào hệ thống

- Tiền điều kiện: thành viên chưa đăng vào hệ thống

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

 Thành viên chọn chức năng đăng nhập

 Form đăng nhập hiển thị

 Nhập tên, mật khẩu vào form đăng nhập

 Hệ thống kiểm tra tên, mật khẩu của thành viên

 Nếu việc đăng nhập thành công thì … Nếu thành viên nhập sai tên, mật khẩu thì chuyển sang luồng rẽ nhánh A

 UC kết thúc

- Luống sự kiện rẽ nhánh: