Tài liệu Xây dựng website bán hàng cho cửa hàng lan chi ba vì

LỜI CẢM ƠN Sau một thời gian tìm hiểu đề tài “Xây dựng website bán hàng cho cửa hàng Lan Chi - Ba Vì”, 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 Dương Thị Quy – 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 – Đại học Thái Nguyên đã tận tình hướng dẫn sát sao em trong quá trình làm đồ án tốt nghiệp. Trong thời gian làm việc với cô, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà còn học tập được tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu quả, đây là những điều rất cần thiết cho em trong quá trình học tập và công việc sau này. 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. Và cuối cùng xin gửi lời cảm ơn chân thành tới gia đình, bạn bè đã động viên, đóng góp ý kiến và giúp đỡ trong quá trình học tâp, thời gian nghiên cứu và hoàn thành đồ án tốt nghiệp. Thái Nguyên, tháng 02 năm 2016 Sinh viên thực hiện Trương Văn Hiếu LỜI CAM ĐOAN Em xin cam đoan Đồ Án Tốt Nghiệp: “Xây dựng website bán hàng cho cửa hàng Lan Chi - Ba Vì” là kết quả nghiên cứu của cá nhân em dưới sự hướng dẫn tận tình của Cô ThS. Dương Thị Quy. Các số liệu, ví dụ và trích dẫn trong Đồ Án Tốt Nghiệp đảm bảo chính xác, tin cậy và trung thực. Sản phẩm của Đồ Án Tốt Nghiệp là do bản thân em nghiên cứu và xây dựng nên. Em xin chịu hoàn toàn trách nhiệm trước nhà trường về sự cam đoan này. Thái Nguyên, tháng 02 năm 2016 Sinh viên thực hiện Trương Văn Hiếu 2 MỤC LỤC LỜI CẢM ƠN .................................................................................................................................... 1 Trương Văn Hiếu ............................................................................................................................... 1 LỜI CAM ĐOAN .............................................................................................................................. 2 MỤC LỤC......................................................................................................................................... 3 DANH MỤC HÌNH ẢNH................................................................................................................ 6 LỜI MỞ ĐẦU.................................................................................................................................... 9 TÓM TẮT ĐỀ TÀI .......................................................................................................................... 10 Chương 1: CƠ SỞ LÍ THUYẾT ...................................................................................................... 11 1.1. Tổng quan về Wordpress ...................................................................................................... 11 1.1.1. WordPress là gì?............................................................................................................ 11 1.1.2. Hướng dẫn cài đặt WordPress trên localhost với Xampp ............................................. 12 1.1.3. Những ưu điểm của WordPress ..................................................................................... 22 1.1.4. Những khuyết điểm của WordPress:.............................................................................. 23 1.1.5. Cơ chế hoạt động website WordPress trên Internet?..................................................... 23 1.2. HTML .................................................................................................................................. 25 1.2.1. Cấu trúc chung của một trang HTML............................................................................ 25 1.2.2. Các thẻ HTML cơ bản.................................................................................................... 25 1.3. Tìm hiểu ngôn ngữ PHP........................................................................................................ 26 1.3.1. Khái niệm PHP .............................................................................................................. 26 1.3.2. Tại sao nên dùng PHP ................................................................................................... 27 1.3.3. Những điểm mạnh của PHP........................................................................................... 27 1.4. Cơ sở dữ liệu MYSQL .......................................................................................................... 27 1.4.1. Khái niệm ....................................................................................................................... 27 1.4.2. Ưu điểm của MySQL ...................................................................................................... 28 1.4.3. Tại sao ta sử dụng hệ cơ sở dữ liệu MySQL? ................................................................ 29 1.5. Đôi nét về thương mại điện tử............................................................................................... 30 1.5.1. Khái niệm thương mại điện tử........................................................................................ 31 3 1.5.2. Lợi ích của việc sử dụng thương mại điện tử................................................................. 31 1.5.3. Hệ thống thanh toán điện tử tự động ............................................................................. 31 1.5.4. Chiến lược kinh doanh ................................................................................................... 32 1.5.5. Các yêu cầu trong thương mại điện tử........................................................................... 32 1.5.6. Các mô hình trong thương mại điện tử .......................................................................... 32 Chương 2: KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG .................................................... 33 2.1. Khảo sát hiện trạng ............................................................................................................... 33 2.1.1. Giới thiệu về cửa hàng Lan Chi – Ba Vì ........................................................................ 33 2.1.2. Xác định yêu cầu của khách hàng.................................................................................. 34 2.1.3. Phạm vi dự án được ứng dụng ....................................................................................... 37 2.1.4. Đối tượng sử dụng.......................................................................................................... 37 2.1.5. Mục đích của dự án........................................................................................................ 37 2.2. Yêu cầu giao diện của website .............................................................................................. 38 2.2.1. Giao diện người dùng .................................................................................................... 38 2.2.2. Giao diện người quản trị: .............................................................................................. 38 2.3. Phân tích các chức năng của hệ thống................................................................................... 38 2.3.1. Đặt vấn đề ...................................................................................................................... 38 2.3.2. Bài toán .......................................................................................................................... 39 2.4. Phân tích và thiết kế hệ thống ............................................................................................... 40 2.4.1. Tác nhân của hệ thống ................................................................................................... 40 2.4.2. Biểu đồ use case tổng quát............................................................................................. 40 2.4.3. Biểu đồ hoạt động .......................................................................................................... 45 2.4.4. Biểu đồ trình tự .............................................................................................................. 54 2.4.5. Biểu đồ lớp ..................................................................................................................... 68 2.4.6. Biểu đồ cơ sở dữ liệu...................................................................................................... 69 CHƯƠNG 3: XÂY DỰNG WEBSITE BÁN HÀNG CHO CỬA HÀNG ...................................... 70 LAN CHI – BA VÌ........................................................................................................................... 70 4 3.1. Giao diện trang chủ ............................................................................................................... 70 3.2. Giao diện Form đăng nhập.................................................................................................... 71 3.3. Giao diện trang tin tức........................................................................................................... 72 3.4. Giao diện trang chi tiết sản phẩm.......................................................................................... 73 3.5. Giao diện trang giỏ hàng....................................................................................................... 74 3.6. Giao diện danh sách đơn hàng .............................................................................................. 75 KẾT LUẬN...................................................................................................................................... 76 TÀI LIỆU THAM KHẢO................................................................................................................ 77 5 DANH MỤC HÌNH ẢNH Hình 1. Thông số skpye .........................................................................................12 Hình 2. Tải XAMPP ..............................................................................................13 Hình 3. Cài đặt XAMPP ........................................................................................14 Hình 4. Cài đặt XAMPP ........................................................................................14 Hình 5. Cài đặt XAMPP ........................................................................................15 Hình 6. Cài đặt XAMPP ........................................................................................15 Hình 7. Bảng điều khiển XAMPP..........................................................................16 Hình 8. Khởi động localhost ..................................................................................16 Hình 9. Trang chủ localhost...................................................................................17 Hình 10. Trang chủ localhost.................................................................................17 Hình 11. Cài đặt wordpress....................................................................................18 Hình 12. Cài đặt wordpress....................................................................................18 Hình 13. Cài đặt wordpress....................................................................................19 Hình 14. Cài đặt wordpress....................................................................................19 Hình 15. Cài đặt wordpress....................................................................................20 Hình 16. Cài đặt wordpress....................................................................................20 Hình 17. Trang quản trị wordpress ........................................................................21 Hình 18. Giao diện đầu tiên wordpress ..................................................................21 Hình 19. Backup cơ sở dữ liệu...............................................................................30 Hình 20. Biểu đồ UC tổng quát..............................................................................40 Hình 21. Biểu đồ UC khách hàng ..........................................................................41 Hình 22. Use case khách hàng quản lý giỏ hàng ....................................................41 Hình 23. Khách hàng tìm kiếm ..............................................................................42 Hình 24. Biểu đồ UC Administrator ......................................................................42 Hình 25. Quản lý danh mục sản phẩm ...................................................................42 Hình 26. Quản lý sản phẩm ...................................................................................43 Hình 27. Quản lý hóa đơn......................................................................................43 Hình 28. Quản lý câu hỏi, ý kiến khách hàng.........................................................44 Hình 29. Khách hàng quản lý giỏ hàng ..................................................................45 Hình 30. Khách hàng gửi câu hỏi, ý kiến. ..............................................................46 6 Hình 31. Khách hàng tìm kiếm sản phẩm ..............................................................47 Hình 32. Administrator quản lý danh mục sản phẩm .............................................48 Hình 33. Administrator quản lý khách hàng...........................................................49 Hình 34. Administrator quản lý sản phẩm.............................................................50 Hình 35. Administrator quản lý đơn hàng..............................................................51 Hình 36. Administrator quản lý câu hỏi, ý kiến khách hàng...................................52 Hình 37. Administrator quản lý chi tiết hóa đơn ....................................................53 Hình 38. Administrator xem báo cáo, thống kê......................................................54 Hình 39. Khách hàng đăng kí ................................................................................54 Hình 40. Khách hàng đăng nhập............................................................................55 Hình 41. Khách hàng tìm kiếm sản phẩm ..............................................................55 Hình 42. Khách hàng xem chi tiết sản phẩm ..........................................................56 Hình 43. Khách hàng thêm sản phẩm vào giỏ hàng................................................56 Hình 44. Khách hàng xóa sản phẩm ở giỏ hàng .....................................................57 Hình 45. Khách hàng cập nhật thông tin sản phẩm ở giỏ hàng ...............................57 Hình 46. Khách hàng gửi ý kiến, câu hỏi ...............................................................58 Hình 47. Administrator đăng nhập.........................................................................58 Hình 48. Administrator cập nhật thông tin khách hàng ..........................................59 Hình 49. Administrator thêm khách hàng ..............................................................59 Hình 50. Administrator xóa khách hàng.................................................................60 Hình 51. Administrator cập nhật thông tin sản phẩm .............................................60 Hình 52. Administrator thêm sản phẩm .................................................................61 Hình 53. Administrator xóa sản phẩm....................................................................61 Hình 54. Administrator cập nhật thông tin hóa đơn................................................62 Hình 55. Administrator thêm hóa đơn....................................................................62 Hình 56. Administrator xóa hóa đơn......................................................................63 Hình 57. Administrator cập nhật thông tin danh mục.............................................63 Hình 58. Administrator thêm danh mục ................................................................64 Hình 59. Administrator xóa danh mục ...................................................................64 Hình 60. Administrator cập nhật ý kiến khách hàng...............................................65 Hình 61. Administrator xóa ý kiến khách hàng ......................................................65 7 Hình 62. Administrator thêm mới ý kiến khách hàng.............................................66 Hình 63. Administrator cập nhật chi tiết hóa đơn...................................................66 Hình 64. Administrator xem báo cáo, thống kê......................................................67 Hình 65. Biểu đồ lớp .............................................................................................68 Hình 66. Biểu đồ cơ sở dữ liệu ..............................................................................69 Hình 67. Giao diện trang chủ.................................................................................70 Hình 68. Giao diện Form đăng nhập ......................................................................71 Hình 69. Giao diện trang tin tức ............................................................................72 Hình 70. Giao diện trang chi tiết sản phẩm ............................................................73 Hình 71. Giao diện trang giỏ hàng .........................................................................74 Hình 72. Giao diện trang danh sách đơn hàng........................................................75 8 LỜI MỞ ĐẦU Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay, Internet ngày càng giữ vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống. Dĩ nhiên các bạn đã được nghe nói nhiều về Internet, nói một cách đơn giản, Internet là một tập hợp máy tính nối kết với nhau, là một mạng máy tính toàn cầu mà bất kì ai cũng có thể kết nối bằng máy PC của họ. Với mạng Internet, tin học thật sự tạo nên một cuộc cách mạng trao đổi thông tin trong mọi lĩnh vực văn hóa, xã hội, chính trị, kinh tế... Trong thời đại ngày nay, thời đại mà “người người làm Web, nhà nhà làm Web” thì 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. Do đó, được sự hướng dẫn và giúp đỡ của Cô Th. s Dương Thị Quy em đã chọn đề tài “Xây dựng website bán hàng cho cửa hàng Lan Chi – Ba Vì” làm đề tài cho đồ án tốt nghiệp của mình Trong quá trình thực hiện đề tài này em đã nhận được sự giúp đỡ chỉ bảo tận tình của các thầy, cô giáo, Em xin chân thành cảm ơn Cô Dương Thị Quy đã hưỡng dẫn trong quá trình làm đề tài. Tuy nhiên, do thời gian hạn hẹp, mặc dù đã nỗ lực hết sức mình nhưng chắc rằng đồ án khó tránh khỏi thiếu sót. Em rất mong nhận được sự thông cảm, những lời góp ý và chỉ bảo tận tình của Thầy Cô và các bạn. 9 TÓM TẮT ĐỀ TÀI Với mức độ phức tạp và quy mô ứng dụng, cộng thêm vấn đề thời gian cho nên đề tài “Xây dựng Website bán hàng cho cửa hàng Lan Chi – Ba Vì” chỉ dừng ở mức tìm hiểu về mã nguồn mở Wordpress, nghiên cứu ngôn ngữ lập trình CSS, HTML PHP, và áp dụng xây dựng ứng dụng thực nghiệm trang Web bán hàng trên mạng. Website với mục đích cung cấp cho khách hàng các thông tin chính xác về các sản phẩm máy tính và linh kiện đang có trên thị trường của các hãng có uy tín như ( Acer, Hp, Asus, Dell, Samsung…) và cách thức đặt mua hàng qua mạng. Các thông tin được cập nhật thường xuyên và nhanh chóng. Vì vậy, rút ngắn được khoảng cách giữa người mua và người bán, đưa thông tin về các sản phẩm mới nhanh chóng đến cho khách hàng. Do còn một số hạn chế, nên website mới chỉ dừng lại ở chức năng đặt hàng và hình thức thanh toán trực tiếp. Trong tương lai, hệ thống sẽ phát triển theo hướng thương mại điện tử (với hình thức thanh toán trực tuyến qua thẻ tín dụng, tài khoản ngân hàng, thẻ mua hàng trực tuyến…). 10 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. Wordpress tạm được phân ra thành hai loại: Sử dụng dịch vụ của nhà cung cấp (wordpress.com). - WordPress.com là do 1 nhóm người dựa trên mã nguồn của WordPress tinh chỉnh lại để cung cấp dịch vụ tạo blog cho những người sử dụng, nhằm đơn giản hơn cho người dùng không chuyên. - Giao diện thân thiện dễ sử dụng, cung cấp 50 kiểu giao diện khác nhau và cập nhật thường xuyên, hệ thống quản lý bài viết và comment mạnh mẽ, cho phép nhiều người cùng viết bài và cùng quản lý blog, kết nối với cộng đồng wordpress.com thông qua trang chủ, hỗ trợ tốt tiếng Việt và nhiều điểm nổi bật khác nữa. Trực tiếp cài trên host riêng (wordpress.org). - Wordpress.org là một thư viện khổng lồ của Wordpress. Nó gồm có mã nguồn Wordpress các phiên bản, các tài liệu hỗ trợ người dùng cũng như các nhà phát triển. - Wordpress.org không như wordpress.com, bạn cần phải có domain, host hỗ trợ PHP/MySQL... để cài đặt mã nguồn này. Vì đây là hoàn toàn do bạn thực hiện nên bạn hoàn toàn làm chủ website của mình. Bạn có thể sử dụng được tất cả những tính năng hấp dẫn của Wordpress mà không cần phải trả thêm bất kỳ chi phí nào cho Wordpress.  Các tính năng cơ bản của Wordpress  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. 11  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  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.  Administration Panel được tổ chức rất tốt với rất nhiều tính năng nhưng lại dễ hiểu và dễ sử dụng.  Quản lý liên kết dễ dàng. 1.1.2. Hướng dẫn cài đặt WordPress trên localhost với Xampp 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. Hình 1. Thông số skpye 12 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, nó có thể chặn cổng 80 hoặc chặn 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. Để cài Localhost chúng ta có rất nhiều cách và phần mềm, tuy nhiên nếu là người mới thì nên dùng phần mềm XAMPP để cài localhost vì: 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, bạn truy cập 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. Hình 2. Tải XAMPP 13 Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next. Hình 3. Cài đặt XAMPP Ở 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. Hình 4. Cài đặt XAMPP 14 Ở 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. Hình 5. Cài đặt XAMPP Ở 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. Hình 6. Cài đặt XAMPP 15 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. Hình 7. Bảng điều khiển 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. Hình 7. Khởi động localhost 16 Sau khi khởi động xong, hãy truy cập vào địa chỉ là http://localhost sẽ thấy nó hiện ra trang giới thiệu Xampp như hình bên dưới. Hình 8. Trang chủ localhost Bạn có thể ấn vào nút English phía bên dưới để truy cập vào trang quản lý localhost. Hình 9. Trang chủ localhost 17 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 Hình 10. Cài đặt wordpress Click vào Let’s go! để tiếp tục Bước 3: Hình 11. Cài đặt wordpress Cấu hình database với: - Database Name: tên database bạn vừa tạo - 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 18 Hình 12. Cài đặt wordpress Bước 4: xác nhận và chạy cài đặt Hình 13. Cài đặt wordpress 19 Bước 5: Chọn lựa tên website và tài khoản quản trị Hình 14. Cài đặt wordpress 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 LogIn để đăng nhập vào hệ thống quả trị và bắt đầu viết bài Hình 15. Cài đặt wordpress 20