Tìm hiểu về wordpress, ứng dựng thiết kế giao diện cho website bán hàng tại công ty TNHH thịnh hưng

MỤC LỤC LỜI NÓI ĐẦU 5 LỜI CẢM ƠN 6 CHƯƠNG 1. TÌM HIỂU TỔNG QUAN VỀ WORDPRESS 7 1.1. Giới thiệu Wordpress 7 1.1.1. Wordpress là gì? 7 1.1.2. Các tính năng cơ bản của Wordpress 8 1.1.3. Ưu điểm của wordpress 9 1.2. Các công cụ cần thiết khi làm việc với wordpress 11 1.3. Hướng dẫn cài đặt WordPress vào localhost XAMPP 13 1.4. Tìm hiểu về plugin Woocommerce 19 1.4.1. Plugin wordpress là gì? 19 1.4.2. Plugin Woocommerce 20 CHƯƠNG 2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG CHO CÔNG TY TNHH THỊNH HƯNG 24 2.1. Xác định các nhóm chức năng của hệ thống và các tác nhân 24 2.1.1 Các nhóm chức năng của hệ thống 24 2.1.2. Các tác nhân 24 2.2. Xác định các use case, các gói use case và xây dựng biểu đồ use case chi tiết 24 2.2.1. Xác định các use case 24 2.2.2. Xác định các gói UC, biểu đồ UC chi tiết 26 2.2.3. Biểu đồ gói use case chi tiết 26 2.3. Đặc tả các use case 29 2.3.1. Hệ thống đăng ký, đăng nhập 29 2.3.2. Hệ thống xem thông tin 31 2.3.3. Hệ thống quản lý thông tin 33 2.3.4. Hệ thống mua hàng 36 2.3.5. Hệ thống tiếp nhận và xử lý đơn hàng 39 2.4. Biểu đồ trình tự và biểu đồ các lớp thực thể 41 2.4.1. Biểu đồ trình tự 41 2.4.2. Biểu đồ lớp thực thể 44 CHƯƠNG 3. THIẾT KẾ GIAO DIỆN CHO CÔNG TY TNHH THỊNH HƯNG 45 3.1. Cài đặt giao diện (theme) 45 3.2. Bố cục website 48 3.2.1. Giao diện trang chủ 48 3.2.2. Giao diện trang giỏ hàng 49 3.2.3. Giao diện sản phẩm 50 3.2.4. Giao diện trang tài khoản 51 3.2.5. Giao diện trang thanh toán 51 3.2.6. Giao diện đăng nhập của admin 52 3.2.7. Giao diện làm việc của admin 52 3.2.8. Giao diện sửa sản phẩm của admin 53 3.2.9. Giao diện thêm sản phẩm của admin 53 KẾT LUẬN 54 TÀI LIỆU THAM KHẢO 55 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 56   LỜI NÓI ĐẦU Trong thời buổi hiện nay, khi mà công nghệ phát triển, thương mại điện tử ngày càng phát triển trên thế giới cũng như Việt Nam và dần khẳng định được vị thế của mình trong nền kinh tế thị trường. Cùng với đó là sự ra đời của các ngôn ngữ lâp trình cho phép thiết kế và xây dựng các ứng dụng thương mại điện tử dưới nhiều hình thức khác nhau. Và một trong những ứng dụng của thương mại điện tử phổ biến ở nước ta là dịch vụ bán hàng qua mạng internet. Dịch vụ này cho phép người dùng tìm kiếm chọn lựa sản phẩm để mua, thực hiện giao dịch mà không cần phải trực tiếp đến cửa hàng, mà chỉ cần sử dụng một thiết bị máy tính có kết nối internet. Tuy nhiên hiện nay dịch vụ này vẫn còn khá mới với nhiều người tiêu dung nước ta, đặc biệt là những người không có kiến thức về tin học nói chung và thương mại điện tử nói riêng. Nên hiện giờ các đối tượng chính của thương mại điện tử vẫn chủ yếu là tầng lớp tri thức và học sinh,sinh viên. Là những người sinh viên, cũng có chút kiến thức về tin học cũng như tiếp xúc với thương mại điện tử tuy nhiên đôi lúc cũng gặp một số khó khan trong việc mua bán trên các hệ thống bán hàng qua mạng hiện tại. Như hình thức thanh toán, nhận hàng, chất lượng sản phẩm thực tế không được như trên website.... Hiểu được các vấn đề đó cũng như mong muốn đưa thương mại điện tử đến với nhiều người hơn, em thực hiện đề tài: “Tìm hiểu về WordPress, ứng dựng thiết kế giao diện cho website bán hàng tại Công ty TNHH Thịnh Hưng”. Với mục đích xây dựng một giao diện bán hàng qua mạng uy tín, đơn giản, thân thiện, cũng như đem lại cho khách hàng những lựa chọn tối ưu để ngay cả những người không có kiến thức về tin học cũng có thể tham gia mua hàng qua mạng chỉ với một số thao tác đơn giản.   LỜI CẢM ƠN Em xin chân thành cảm ơn quí thầy cô đã giúp đỡ em thực hiện đề tài này. Đặc biệt là cô Đào Thị Thu đã tận tình hướng dẫn, giúp đỡ, chỉ bảo em trong suốt thời gian làm đề tài. Đồng thời em xin trân trọng cảm ơn những tình cảm quí báu mà các thầy cô trong trường Đại Học Công nghệ thông tin và truyền thông đã truyền đạt cho em, những kinh nghiệm, kỹ năng và cách thức trong việc xây dựng đề tài này. Tuy nhiên, do thời gian có hạn nên em không thể phát huy hết những ý tưởng, khả năng vào đề tài. Trong quá trình thiết kế website, em không thể tránh khỏi những sai xót, và em rất mong nhận được sự đóng góp và cảm thông của quí thầy cô. Em xin chân thành cảm ơn Sinh viên Cao Văn Tú   CHƯƠNG 1. TÌM HIỂU TỔNG QUAN VỀ WORDPRESS 1.1. Giới thiệu 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, ta vẫn có thể dùng chung với nhà cung cấp Automattic Production tại địa chỉ http:wordpress.org 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 b2cafelog, được ra mắt lần đầu tiên vào ngày 2752003 tác giả Matt Mullenweg và Mike Little. 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 mình 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ể chúng ta 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 wpconfig.php, sau 1,2 lần click chuột, chúng ta đã sẵn sàng để viết blog. • Không giới hạn số lượng category và subcategory: ta 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 mình 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ư chúng ta 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 dễ hiểu và dễ sử dụng. • Quản lý liên kết dễ dàng. Với sự trợ giúp của các plugin và rất nhiều bộ API, ta có thể chỉnh sửa Wordpress tùy thích theo nhu cầu của mình, và thậm chí ta 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.1.3. Ưu điểm của wordpress • Dễ sử dụng: WordPress được phát triển nhằm phục vụ đối tượng người dùng phổ thông, không có nhiều kiến thức về lập trình website nâng cao. Các thao tác trong WordPress rất đơn giản, giao diện quản trị trực quan giúp ta có thể nắm rõ cơ cấu quản lý một website WordPress trong thời gian ngắn. Về cách cài đặt lại càng dễ hơn, ta có thể tự cài đặt một website WordPress trên host (máy chủ) riêng của mình và tự vận hành nó sau vài cú click. • Cộng đồng hỗ trợ đông đảo: Là một mã nguồn CMS mở phổ biến nhất thế giới, điều này cũng có nghĩa là ta sẽ được cộng đồng người sử dụng WordPress hỗ trợ khi gặp phải các khó khăn trong quá trình sử dụng. Nếu có khả năng tiếng Anh tốt, ta có thể dễ dàng tìm câu trả lời cho vấn đề mình đang gặp phải trên Google chỉ với vài từ khóa tìm kiếm. • Nhiều gói giao diện có sẵn: Trong khi sử dụng WordPress, khái niệm giao diện cho website WordPress thường được gọi là theme. Hiện nay WordPress có rất nhiều theme miễn phí khác nhau để chúng ta có thể dễ dàng thay đổi “da thịt” của website mình chỉ với vài cú click mà không cần bận tâm việc làm sao để thiết kế một theme cho riêng mình. Còn nếu muốn website của mình đẹp và chuyên nghiệp hơn, ta có thể mua các theme trả phí với giá bán dao động từ 30 đến 65. • Nhiều plugin hỗ trợ: Plugin nghĩa là một trình cắm thêm vào website để bổ sung các chức năng mà mình cần. Ví dụ mặc định sau khi cài website WordPress, ta sẽ không có chức năng hiển thị các bài viết liên quan ở dưới mỗi bài viết, nhưng với nhiều plugin miễn phí hỗ trợ thì có thể dễ dàng cài thêm một plugin miễn phí để website mình có chức năng đó. Tương tự với theme, cũng có rất nhiều plugin trả phí mang những tính năng rất độc đáo và có ích vào website và nó sẽ có giá khoảng từ 10 đến 80 tùy theo độ phức tạp. • Dễ phát triển cho lập trình viên: Nếu là một người có am hiểu về việc làm website như thành thạo HTML, CSS, PHP thì ta có thể dễ dàng mở rộng website WordPress của mình ra với rất nhiều tính năng vô cùng có ích. Cách phát triển cũng rất đơn giản vì WordPress là một mã nguồn mở nên ta có thể dễ dàng hiểu được cách hoạt động của nó và phát triển thêm các tính năng.  • Dễ dàng Việt Hóa: Dĩ nhiên mặc định mã nguồn WordPress là tiếng Anh, nhưng nếu ta có nhu cầu Việt hóa lại WordPress thì có thể dễ dàng tự làm. • Có thể làm nhiều loại website: Dùng WordPress không có nghĩa là ta chỉ có thể làm blog cá nhân, mà có thể biến website mình thành một trang bán hàng, một website giới thiệu công ty, một tờ tạp chí online bằng việc sử dụng kết hợp các theme và plugin với nhau. Tuy nhiên để làm được, ta nên chắc chắn là đã hiểu được WordPress chứ đừng vội một bước lên mây để nhận các cảm giác thất vọng vì độ phức tạp của nó. 1.2. Các công cụ cần thiết khi làm việc với wordpress • FileZilla – Phần mềm trao đổi dữ liệu lên hostingserver theo giao thức FTP: FTP (viết tắt của File Transfer Protocol dịch ra là Giao thức truyền tập tin) thường được dùng để trao đổi tập tin qua mạng lưới truyền thông dùng giao thức TCPIP (chẳng hạn như Internet mạng ngoại bộ hoặc Intranet mạng nội bộ). Hoạt động của FTP cần có hai máy tính, một máy chủ và một máy khách). Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là trình chủ, lắng nghe yêu cầu về dịch vụ của các máy tính khác trên mạng lưới. Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi là trình khách, thì khởi đầu một liên kết với máy chủ. Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thao tác về tập tin, như tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy của mình, đổi tên của tập tin, hoặc xóa tập tin ở máy chủ Và phần mềm FileZilla này sẽ hỗ trợ chúng ta upload các tập tin, thư mục ở máy tính lên hosting để hoạt động trên web.   • XAMPP – Phần mềm tạo localhost: WordPress.org sẽ chạy trên một hosting cá nhân để có thể hoạt động được. Muốn có hosting thì chúng ta hầu như là phải mua hoặc có thể dùng các hosting miễn phí. Nhưng nếu chưa có host thì có ta thể lấy chính máy tính cá nhân của mình làm host rồi chạy website trên đó, nhưng chỉ mỗi mình nhìn thấy thôi, nó được gọi là localhost. Localhost thường được dùng vào 2 mục đích: Để học WordPress, vì ta không cần phải mất tiền mua host, mà lại nhanh và thuận tiện. Để nghiên cứu hoặc thử nghiệm cái gì đó ở WordPress. • Hosting: Chúng ta có thể hiểu đơn giản Hosting là dịch vụ lưu trữ các trang web trên máy chủ kết nối Internet. Nếu muốn có một website thì điều chắc chắn là ta phải có hosting chứ không phải chỉ làm WordPress mới cần một cái host • Domain – Tên miền: Domain là một cái tên để thay thế cho một địa chỉ gốc của host dẫn tới trang web của mình, tức là khi mua host ta vẫn có thể vào được web nhưng phải vào bằng IP của host. Domain thường chia làm 3 phần chính: www.tênmiền.com www: phần này được gọi là tiền tố của domain. tênmiền: phần này được gọi là trung tố của domain. com: phần này được gọi là hậu tố (hay còn được gọi là đuôi) của domain. 1.3. Hướng dẫn cài đặt WordPress vào localhost XAMPP Khởi động Localhost Hình 1.1. Giao diện XAMPP Khi mới mở XAMPP lên ta 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 1.2. Giao diện XAMPP khi khởi động Apache và MySQL Sau đó chúng ta truy cập vào localhost với đường dẫn sau để tạo database http:localhostphpmyadmin. Tiếp theo chúng ta nhấp vào menu database. Hình 1.3. Create Database Tại đây ở phần Create databsae, ta nhập tên database cần tạo vào ô Database name, phần Collation chọn là utf8_unicode_ci như hình dưới rồi ấn nút Create kế bên Tạo xong ta nhìn bên menu tay trái, nếu nó xuất hiện tên database vừa tạo là thành công. Vậy bây giờ, chúng ta có một databse với các thông tin như: • Database Host: localhost • Database user: root • Database password: trống • Database name: thoitrang Để cài Wordpress lên localhost ta làm như sau: Bước 1. Tải mã nguồn từ website WordPress.org Đầu tiên ta vào trang https:wordpress.org và download phiên bản wordpress về Sau đó giải nén ra ta sẽ có được một thư mục mang tên “wordpress“. Có thể thư mục wordpress này sẽ được lồng trong một thư mục khác tên là wordpressx (x ở đây là số phiên bản), nhưng nói chung ta cứ vào sẽ có được một thư mục tên wordpress như hình dưới. Hình 1.4. Thư mục wordpress Bước 2. Copy mã nguồn WordPress vào Localhost Bây giờ ta copy thư mục này vào thư mục theo đường dẫn C:xampphtdocs và sau đó ta đổi tên thư mục wordpress bên trên thành tên database mà lúc trước ta đã tạo: Hình 1.5. Thư mục htdocs Bước 3. Chạy website để cài đặt Sau khi copy xong, ta truy cập vào website với đường dẫn http:localhostthoitrang. Lúc này, nó sẽ hiện ra bảng chọn ngôn ngữ cần cài đặt cho WordPress, hãy chọn là English và ấn Continue Hình 1.6. Chọn ngôn ngữ cài đặt wordpress Tiếp theo hãy nhấn Let’s Go : Hình 1.7. Nhấn Let’s go để tiếp tục Và bây giờ là nhập thông tin database: Hình 1.8. Nhập thông tin Ở bước này ta cần chú ý: User Name của database luôn là root, Password để trống và Database Host luôn là localhost. Table Prefix nghĩa là tiền tố của database chứa dữ liệu WordPress, mặc định nó sẽ là wp_, chúng ta có thể đổi nó thành bất cứ cái gì nhưng phải bắt buộc có _ đằng sau. Khi nhập xong thông tin database, hãy ấn nút Submit để làm bước kế tiếp. Nếu bước kế tiếp nó hiện ra như hình dưới thì nghĩa là chúng ta đã nhập thông tin database chính xác, hãy ấn nút Run the install để bắt đầu cài đặt. Hình 1.9. Nhấn Run the install để cài đặt Ở bước cài đặt này, chúng ta sẽ cần phải thiết lập các thông tin quan trọng cho website như Tên của website, tên tài khoản admin và mật khẩu,…Nhập xong hãy ấn nút Install WordPress. Hình 1.10. Nhập thông tin cho website Và nếu nó hiện chữ Success như thế này là ta đã cài đặt thành công, click vào nút Log in để đăng nhập vào bảng quản trị WordPress. Hình 1.11. Cài đặt thành công Và đây là giao diện trang quản trị của WordPress: Hình 1.12. Giao diện trang quản trị của WordPress 1.4. Tìm hiểu về plugin Woocommerce 1.4.1. Plugin wordpress là gì? Plugin là một thành phần mở rộng nhỏ được lập trình riêng dựa trên các API và những hàm mở có sẵn của WordPress để tạo thành một tính năng nào đó mà mặc định WordPress không có. Nói dễ hiểu hơn, plugin chính là một module bổ sung một chức năng nào đó mà ta có thể cài vào WordPress. Hiện tại số lượng plugin dành cho WordPress có thể nói là không đến nỗi, chỉ tính riêng các plugin chính thức có trên thư viện plugin của WordPress.org thì đã có hàng chục nghìn plugin khác nhau, chưa kể còn rất nhiều plugin trả phí khác được bán rải rác trên nhiều trang khác nhau. Tại sao cần thiết sử dụng plugin? Có thể nói Plugin giống như sự bổ sung sức mạnh chi tiết cho WordPress, ta muốn SEO cho website cũng cần Plugin, muốn tạo Popup cũng cần dùng Plugin hoặc muốn tạo tính năng của các trang bán hàng cũng phải sử dụng Plugin…Tất cả những gì ta muốn làm trên website đều có thể thực hiện thông qua Plugin, do đó, nó là phần cực kỳ quan trọng cho sự hoạt động và phát triển của Website WordPress. 1.4.2. Plugin Woocommerce • Woocommerce là plugin 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ó. Woocommerce sẽ có các chức năng chính như:  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.  Và hàng tá các chức năng hay ho khác nữa. Như vậy với các tính năng kể trên, Woocommerce có thể lựa chọn cho những ai cần làm một trang shop đơn giản ngay trên website WordPress của mình để giới thiệu sản phẩm và cho phép khách đặt hàng trực tuyến để bán hàng tiện lợi hơn. • Hướng dẫn cài đặt plugin Woocommerce Để cài đặt plugin ta vào phần Gói mở rộng Cài mới Hình 1.13. Cài đặt plugin   Sau đó tìm kiếm plugin Woocommerce Cài đặt Hình 1.14. Tìm kiếm plugin và cài đặt Bước tiếp theo, ta kích hoạt plugin Hình 1.15. Kích hoạt plugin   Vậy là xong, bây giờ ta có thể tùy chỉnh Woocommerce bằng cách vào phần cài đặt trong woocommerce Hình 1.16. Cài đặt woocommerce   CHƯƠNG 2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG CHO CÔNG TY TNHH THỊNH HƯNG 2.1. Xác định các nhóm chức năng của hệ thống và các tác nhân 2.1.1 Các nhóm chức năng của hệ thống Chức năng của hệ thống có thể chia làm các nhóm chức năng chính như sau: 1. Nhóm chức năng đăng ký, đăng nhập thành viên 2. Nhóm chức năng xem thông tin, bao gồm xem thông tin giỏ hàng, xem thông tin đơn hàng, xem thông tin sản phẩm, xem thông tin cá nhân 3. Nhóm chức năng quản lý thông tin, bao gồm quản lý thông tin cá nhân, quản lý danh sách thành viên, quản lý danh mục sản phẩm 4. Nhóm chức năng mua hàng, tiếp nhận và xử lý đơn hàng 2.1.2. Các tác nhân KHÁCH HÀNG: là người giao dịch với hệ thống thông qua các đơn đặt hàng, khách hàng có thể chọn các loại sản phẩm, chọn địa điểm giao hàng. Khách hàng có thể đăng ký làm thành viên của hệ thống. NGƯỜI QUẢN LÝ: là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống. NHÂN VIÊN: là người tiếp nhận và xử lý các đơn hàng THÀNH VIÊN: bao gồm người quản lý, nhân viên và những khách hàng đã đăng ký. Sau khi đăng nhập để trở thành thành viên, ngoài những chức năng chung của người sử dụng, còn có thêm một số chức năng khác phục vụ cho công việc cụ thể của từng đối tượng. 2.2. Xác định các use case, các gói use case và xây dựng biểu đồ use case chi tiết 2.2.1. Xác định các use case • Tác nhân Khách hàng có các UC sau: o Đăng ký làm thành viên o Xem thông tin sản phẩm o Xem thông tin giỏ hàng o Chọn sản phẩm cần mua o Thêm, bớt sản phẩm trong giỏ hàng o Thực hiện việc mua hàng o Thanh toán o Đăng nhập o Xem thông tin cá nhân o Sửa đổi thông tin cá nhân • Tác nhân Người quản lý có các UC sau: o Tiếp nhận đơn hàng o Giao cho nhân viên thực hiện o Quản lý danh sách thành viên o Quản lý danh mục sản phẩm o Đăng nhập o Xem thông tin cá nhân o Sửa đổi thông tin cá nhân • Tác nhân Nhân viên có các UC sau: o Thực hiện việc giao hàng o Báo cáo kết quả o Đăng nhập o Xem thông tin cá nhân o Sửa đổi thông tin cá nhân 2.2.2. Xác định các gói UC, biểu đồ UC chi tiết Từ việc phân tích các UC của từng tác nhân, ta xây dựng thành các gói UC như sau: Hình 2.1. Các gói UC 2.2.3. Biểu đồ gói use case chi tiết Từ các gói UC trên, ta xây dựng biểu đồ chi tiết cho từng gói UC: • Gói UC Đăng ký, đăng nhập Hình 2.2. Biểu đồ UC của gói UC Đăng ký, đăng nhập. • Gói UC quản lý thông tin cá nhân Hình 2.3. Biểu đồ UC của gói UC Quản lý thông tin cá nhân • Gói UC Quản lý danh sách thành viên Hình 2.4. Biểu đồ UC của gói Quản lý danh sách thành viên • Gói UC Quản lý danh mục sản phẩm Hình 2.5. Biểu đồ UC của gói Quản lý danh mục sản phẩm • Gói UC Mua hàng Hình 2.6. Biểu đồ UC của gói Mua hàng • Gói UC Xử lý đơn hàng Hình 2.7. Biểu đồ UC của gói tiếp nhận và xử lý đơn hàng 2.3. Đặc tả các use case 2.3.1. Hệ thống đăng ký, đăng nhập • Đặc tả UC đăng ký thành viên o Tác nhân: khách xem o Mô tả: cho phép khách xem đăng ký làm thành viên của hệ thống. o Tiền điều kiện: Khách xem chưa là thành viên của hệ thống o Luồng sự kiện chính: 1. Khách xem chọn mục tài khoản 2. Trang tài khoản hiển thị gồm 2 mục Đăng nhập và Đăng ký 3. Khách xem nhập thông tin email cá nhân vào mục đăng kí 4. Nhấn nút Đăng ký 5. Mật khẩu sẽ được gửi về email của khách và hệ thống sẽ hiển thị trang nhập thông tin cá nhân. 6. Khách xem tiến hành nhập thông tin cá nhân của mình. Nếu thông tin nhập không chính xác thì thực hiện luồng nhánh A1. Nếu nhập chính xác thì thực hiện bước 6 7. Hệ thống cập nhật thông tin của khách xem vào danh sách thành viên 8. UC kết thúc o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: Quá trình nhập thông tin không chính xác 1. Hệ thống thông báo thông tin nhập không chính xác 2. Hệ thống yêu cầu khách xem nhập thông tin lại 3. Nếu khách xem đồng ý thì quay về bước 6 của luồng sự kiện chính, nếu không đồng ý thì UC kết thúc. o Hậu điều kiện: Khách hàng trở thành thành viên của hệ thống • Đặc tả UC đăng nhập o Tác nhân: thành viên o Mô tả: UC cho phép thành viên đăng nhập vào hệ thống. o Tiền điều kiện: Thành viên chưa đăng nhập vào hệ thống o Luồng sự kiện chính: 1. Thành viên chọn mục tài khoản 2. Form đăng nhập hiển thị 3. Nhập tên, mật khẩu vào form đăng nhập 4. Hệ thống kiểm tra tên, mật khẩu của thành viên 5. Nếu việc đăng nhập thành công thì hệ thống sẽ báo đăng nhập thành công. Nếu thành viên nhập sai tên, mật khẩu thì chuyển sang luồng nhánh A1 6. UC kết thúc o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: Thành viên đăng nhập không thành công 1. Hệ thống thông báo quá trình đăng nhập không thành công 2. Chọn đăng nhập lại 3. Hệ thống yêu cầu thành viên nhập lại tên và mật khẩu 4. Nếu khách xem đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không đồng ý thì UC kết thúc. o Hậu điều kiện: Thành viên đã đăng nhập thành công và có thể sử dụng các chức năng mà hệ thống cung cấp 2.3.2. Hệ thống xem thông tin • Đặc tả UC xem thông tin giỏ hang o Tác nhân: khách hàng o Mô tả: cho phép khách hàng xem thông tin về giỏ hàng của mình. o Tiền điều kiện: o Luồng sự kiện chính: 1. Khách hàng chọn chức năng xem giỏ hàng 2. Form xem thông tin giỏ hàng xuất hiện, hệ thống hiển thị thông tin về giỏ hàng của khách hàng hiện tại. 3. Khách hàng xem thông tin chi tiết về giỏ hàng được hiển thị 4. UC kết thúc. o Hậu điều kiện: • Đặc tả UC xem thông tin đơn hàng o Tác nhân: người quản lý, nhân viên o Mô tả: cho phép người quản lý, nhân viên xem thông tin về đơn hàng được lưu trữ trong hệ thống. o Tiền điều kiện: o Luồng sự kiện chính: 1. Người quản lý, nhân viên chọn đơn hàng cần xem. 2. Form xem thông tin đơn hàng xuất hiện, hệ thống hiển thị thông tin về đơn hàng mà người quản lý, nhân viên đã chọn. 3. Người quản lý, nhân viên xem thông tin chi tiết về đơn hàng được hiển thị 4. UC kết thúc. o Hậu điều kiện: • Đặc tả UC xem thông tin sản phẩm o Tác nhân: người quản lý, nhân viên, khách hàng o Mô tả: cho phép người quản lý, nhân viên, khách hàng xem thông tin về các sản phẩm có trong cửa hàng. o Tiền điều kiện: o Luồng sự kiện chính: 1. Người quản lý, nhân viên, khách hàng chọn sản phẩm cần xem. 2. Hệ thống hiển thị thông tin về sản phẩm đã chọn. 3. Người quản lý, nhân viên, khách hàng xem thông tin chi tiết về sản phẩm được hiển thị 4. UC kết thúc. o Hậu điều kiện: • Đặc tả UC xem thông tin cá nhân o Tác nhân: thành viên của hệ thống, bao gồm: người quản lý, nhân viên, khách hàng đã đăng ký thành viên o Mô tả: UC cho phép thành viên của hệ thống xem các thông tin cá nhân của mình o Tiền điều kiện: thành viên đã đăng nhập vào hệ thống o Luồng sự kiện chính: 1. Thành viên chọn mục Xem thông tin cá nhân 2. Hệ thống hiển thị thông tin cá nhân của thành viên 3. Hệ thống cung cấp liên kết để thành viên có thể sửa đổi thông tin cá nhân 4. UC kết thúc o Hậu điều kiện: 2.3.3. Hệ thống quản lý thông tin • Đặc tả UC sửa thông tin cá nhân o Tác nhân: thành viên của hệ thống o Mô tả: UC cho phép thành viên thay đổi các thông tin đăng ký o Tiền điều kiện: thành viên phải đăng nhập vào hệ thống o Luồng sự kiện chính: 1. Thành viên chọn chức năng sửa thông tin cá nhân. 2. Hệ thống hiển thị form sửa thông tin với các thông tin cũ của thành viên hiện tại 3. Thành viên nhập các thông tin mới 4. Nhấn nút lưu thay đổi 5. Nếu việc cập nhật thành công thì thực hiện bước 6. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1 6. Lưu thông tin 7. UC kết thúc o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: thông tin nhập không hợp lệ 1. Hệ thống thông báo việc nhập dữ liệu không hợp lệ 2. Thành viên nhập lại thông tin 3. Quay lại bước 4 của luồng sự kiện chính o Hậu điều kiện: thông tin thành viên được lưu vào hệ thống • Đặc tả UC quản lý danh mục sản phẩm o Tác nhân: người quản lý o Mô tả: UC cho phép người quản lý thêm, xoá, thay đổi thông tin của các sản phẩm trong danh mục. o Tiền điều kiện: người quản lý phải đăng nhập vào hệ thống o Luồng sự kiện chính: 1. Người quản lý chọn kiểu tác động lên sản phẩm: thêm sản phẩm, thay đổi thông tin sản phẩm, xoá sản phẩm ra khỏi danh mục. A. Thêm sản phẩm: 1.1 Hệ thống hiển thị form nhập thông tin sản phẩm 1.2 Người quản lý nhập thông tin sản phẩm. 1.3 Nhấn nút đăng sản phẩm 1.4 Nếu nhập thành công thì thực hiện bước 1.5. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1. 1.5 Lưu thông tin sản phẩm. B. Thay đổi thông tin sản phẩm: 1.1 Hệ thống hiển thị form sửa thông tin của sản phẩm 1.2 Người quản lý nhập các thông tin cần thay đổi. 1.3 Nhấn nút cập nhật 1.4 Nếu việc thay đổi thành công thì thực hiện bước 1.5. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1. 1.5 Lưu thông tin sản phẩm C. Xoá sản phẩm: 1.1 Người quản lý chọn sản phẩm cần xoá 1.2 Nhấn nút xoá để thực hiện loại bỏ sản phẩm. 1.3 Hệ thống hiển thị thông báo xác nhận loại bỏ. Nếu người quản lý đồng ý thì thực hiện bước 1.4. Nếu không đồng ý thì thực hiện bước1.5 1.4 Thông báo sản phẩm đã đươc xoá 1.5 Hệ thống hiển thị lại danh sách sản phẩm. 2. UC kết thúc. o Luồng sự kiện rẽ nhánh A1: 1. Hệ thống thông báo việc nhập dữ liệu không hợp lệ 2. Người quản lý nhập lại thông tin 3. Quay lại bước 1.3 của luồng sự kiện chính o Hậu điều kiện: các thông tin về sản phẩm được cập nhật vào cơ sở dữ liệu. 2.3.4. Hệ thống mua hàng • Đặc tả UC chọn sản phẩm cần mua o Tác nhân: khách hàng o Mô tả: UC cho phép khách hàng chọn sản phẩm cần mua để đưa vào giỏ hàng. o Tiền điều kiện: sản phẩm cần chọn phải hiển thị trên hệ thống. o Luồng sự kiện chính: 1. Khách hàng chọn vào mục cần mua hàng 2. Hệ thống hiển thị các sản phẩm có trong mục đã chọn 3. Khách hàng xem thông tin về sản phẩm cần mua 4. Nếu hệ thống hiển thị có sản phẩm cần mua, khách hàng chọn vào sản phẩm cụ thể cần mua. Nếu không thì thực hiện luồng sự kiện rẽ nhánh A1. 5. UC kết thúc. o Luồng sự kiện rẽ nhánh A1: 1. Khách hàng chọn mua các sản phẩm ở mục khác 2. Quay lại bước 4 của luồng sự kiện chính o Hậu điều kiện: sản phẩm cần mua được chọn xong • Đặc tả UC thêm sản phẩm vào giỏ hàng o Tác nhân: khách hàng, o Mô tả: UC cho phép khách hàng đưa sản phẩm đã chọn vào giỏ hàng. o Tiền điều kiện: o Luồng sự kiện chính: 1. Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng. Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng 2. UC kết thúc. o Hậu điều kiện: thông tin sản phẩm đã đưa vào giỏ hàng phải được lưu trữ. • Đặc tả UC loại sản phẩm đã chọn ở giỏ hàng o Tác nhân: khách hàng o Mô tả: UC cho phép khách hàng loại bỏ sản phẩm đã đưa vào giỏ hàng. o Tiền điều kiện: giỏ hàng đã có sản phẩm. o Luồng sự kiện chính: 1. Khách hàng nhấn vào biểu tượng thùng rác để loại bỏ sản phẩm khỏi giỏ hàng 2. Hệ thống hiển thị tên sản phẩm đã được loại bỏ. Nếu không muốn loại bỏ sản phẩm, khách hang nhấn “hoàn tác” và hệ thống thực hiện luồng sự kiện rẽ nhánh A1 3. UC kết thúc. o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: quay lại giỏ hàng 1. Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng. 2. UC kết thúc o Hậu điều kiện: sản phẩm được chọn bị loại bỏ khỏi giỏ hàng. • Đặc tả UC thanh toán o Tác nhân: khách hàng o Mô tả: UC cho phép khách hàng tạo đơn hàng để tiến hành thanh toán giỏ hàng sản phẩm. o Tiền điều kiện: khách hàng đã chọn sản phẩm vào giỏ hàng. o Luồng sự kiện chính: 1. Khách hàng nhấn thanh toán để tạo đơn hàng. 2. Form thanh toán xuất hiện, hệ thống hiển thị đơn hàng và một số thông tin mặc định của đơn hàng. 3. Khách hàng nhập tiếp các thông tin: họ tên, số tài khoản, số điện thoai, phương thức thanh toán, địa chỉ giao hàng, địa chỉ email để hoàn thành đơn hàng 4. Chọn đặt hàng. Nếu đơn hàng đã nhập đúng thì thực hiện bước 5. Nếu sai thì thực hiện luồng sự kiện rẽ nhánh A1 5. Hệ thống kiểm tra số tài khoản của khách hàng và phương thức thanh toán. Nếu hợp lệ thì thực hiện bước 6. Nếu sai thì thực hiện luồng sự kiện rẽ nhánh A2 6. Hệ thống thông báo giao dịch thành công. 7. UC kết thúc o Luồng sự kiện rẽ nhánh Luồng nhánh A1: đơn hàng nhập sai 1. Hệ thống thông báo việc tạo đơn hàng không thành công 2. Hệ thống hiển thị lại form nhập thông tin và các trường nhập sai 3. Khách hàng nhập lại thông tin, nếu muốn ngưng giao dịch thì thực hiện luồng sự kiện rẽ nhánh A3. 4. Quay lại bước 4 của luồng sự kiện chính Luồng nhánh A2: tài khoản không hợp lệ 1. Hệ thống thông báo phương thức thanh toán và tài khoản của khách hàng không hợp lệ. 2. Khách hàng nhập lại thông tin nếu muốn tiếp tục mua hàng, nếu muốn ngưng giao dịch thì thực hiện luồng sự kiện rẽ nhánh A3. 3. Quay lại bước 4 của luồng sự kiện chính. Luồng nhánh A3: khách hàng hủy đơn hàng 1. Khách hàng nhấn huỷ bỏ đơn hàng 2. Hệ thống hiển thị các sản phẩm để khách hàng thực hiện giao dịch mới 3. UC kết thúc o Hậu điều kiện: đơn hàng được đặt 2.3.5. Hệ thống tiếp nhận và xử lý đơn hàng • Đặc tả UC tiếp nhận đơn hàng o Tác nhân: người quản lý o Mô tả: UC cho phép người quản lý nhận các thông tin về đơn hàng của khách hàng o Tiền điều kiện: đơn hàng đã được tạo ra o Luồng sự kiện chính: 1. Hệ thống thông báo có đơn hàng mới 2. Người quản lý chọn xem đơn hàng mới 3. Hệ thống hiển thị thông tin về đơn hàng mà người quản lý muốn xem. 4. Người quản lý xem các yêu cầu của đơn hàng. 5. UC kết thúc • Đặc tả UC xử lý đơn hàng o Tác nhân: người quản lý o Mô tả: UC cho phép người quản lý giao đơn hàng của khách hàng cho nhân viên thực hiện o Tiền điều kiện: người quản lý đã tiếp nhận đơn hàng o Luồng sự kiện chính: 1. Người quản lý chọn nhân viên để thực hiện đơn hàng 2. Giao đơn hàng cho nhân viên 3. Chờ thông tin phải hồi từ nhân viên 4. Nếu nhân viên chấp nhận chuyển hàng thì thay đổi tình trạng của đơn hàng sang đã được nhân viên tiếp nhận. Nếu không chấp nhận thì thực hiện luồng sự kiện rẽ nhánh A1. 5. UC kết thúc o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: 1. Người quản lý chọn nhân viên khác để tiếp nhận đơn hàng. 2. Giao đơn hàng cho nhân viên mới. 3. Trở lại bước 3 của luồng sự kiện chính. • Đặc tả UC nhận đơn hàng và giao hang o Tác nhân: nhân viên o Mô tả: UC cho phép nhân viên nhận đơn hàng và thực hiện giao hàng theo yêu cầu đơn hàng người quản lý giao. o Tiền điều kiện: người quản lý đã giao đơn hàng o Luồng sự kiện chính: 1. Nhân viên nhận được đơn hàng cần phải thực hiện 2. Nếu thực hiện giao hàng được thì tiến hành giao hàng và chuyển sang bước 3. Nếu không thì thực hiện luồng sự kiện rẽ nhánh A1. 3. Thay đổi trạng thái của đơn hàng 4. Gởi thông tin phản hồi, đơn hàng giao thành công. 5. UC kết thúc o Luồng sự kiện rẽ nhánh: Luồng nhánh A1: không thực hiện được việc giao hàng 1. Gửi thông tin không thưc hiện được đơn hàng cho người quản lý. 2. UC kết thúc 2.4. Biểu đồ trình tự và biểu đồ các lớp thực thể 2.4.1. Biểu đồ trình tự • UC đăng ký thành viên Hình 2.8. Biểu đồ trình tự của UC đăng ký thành viên • UC đăng nhập Hình 2.9. Biểu đồ trình tự UC đăng nhập • UC sửa thông tin cá nhân Hình 2.10. Biểu đồ trình tự UC sửa thông tin cá nhân • UC quản lý danh sách thành viên Hình 2.11. Biểu đồ trình tự UC quản lý danh sách thành viên • UC quản lý danh mục sản phẩm Hình 2.12. Biểu đồ trình tự UC quản lý danh mục sản phẩm • UC mua hàng, tiếp nhận và xử lý đơn hàng Hình 2.13. Biểu đồ trình tự UC mua hàng 2.4.2. Biểu đồ lớp thực thể Hình 2.14. Biểu đồ các lớp thực thể  CHƯƠNG 3. THIẾT KẾ GIAO DIỆN CHO CÔNG TY TNHH THỊNH HƯNG 3.1. Cài đặt giao diện (theme) Để cài đặt theme, chúng ta có 3 cách: Cách 1:Tìm và cài đặt theme từ thư viện Đầu tiên ta vào phần Giao diện sau đó ấn Thêm mới Hình 3.1. Thêm một theme mới Lúc này ta sẽ thấy danh sách các theme có trong thư viện WordPress.Org, và thư viện này có hơn 2000 themes khác nhau. Chúng ta có thể sử dụng các bộ lọc để tìm ra một theme phù hợp với sở thíchnhu cầu của mình. Hình 3.2. Tìm kiếm và cài đặt theme Sau khi tìm ra một theme ưng ý, ta có thể ấn vào theme đó để xem thông tin và xem trước theme. Nếu thấy ưng ý thì ấn Cài đặt Hình 3.3. Thông tin theme Và cuối cùng là ấn kích hoạt Hình 3.4. Kích hoạt theme Sau khi kích hoạt xong, ta vào Giao diện –> Menus để thiết lập menu và Giao diện –> Widgets để thêm một vài widget vào sidebar cho theme hiển thị tốt nhất Cách 2:Cài theme bằng cách upload từ máy tính lên website Giả sử chúng ta đang có một theme trên máy tính thì ta hãy nén nó lại thành file .zip. Sau khi có file nén .zip của theme, ta vào Giao diện –>Thêm mới –> Tải giao diện lên Hình 3.5. Upload theme Sau đó chúng ta upload file .zip của theme lên và kích hoạt như thông thường Cách 3:Cài theme bằng cách upload trực tiếp vào localhost Với cách này ta có thể dùng khi bị giới hạn dung lượng upload do theme quá nặng. Ta tiến hành upload theme vào thư mục wpcontentthemes, chú ý là thư mục theme phải có dạng tênthemestyle.css Sau khi upload xong, chúng ta vào Giao diện rồi kích hoạt, vì lúc này theme mà ta vừa upload đã hiển thị trong đó 3.2.Bố cục website Phần trên cùng (header): Gồm logo, tên cửa hàng, số điện thoại, các liên kết (facebook, twitter, google, youtube), menu. Phần header này trên tất cả các trang đều giống nhau, chính vì thế nên khách hàng có thể dễ dàng truy cập đến các phần ở bất cứ trang nào của website. Phần bên trái chiếm 13 website là nơi chứa các widget (giỏ hàng, danh mục sản phẩm…) hoặc các quảng cáo để tiện lợi cho khách hàng. Phần content ở giữa chiếm 23 website là khu vực hiển thị tất cả các sản phẩm đang có tại cửa hàng Dưới đây là giao diện các trang của website: 3.2.1. Giao diện trang chủ Hình 3.6. Giao diện trang chủ Trang chủ là nơi hiển thị toàn bộ sản phẩm, với giao diện đơn giản, dễ quan sát và làm việc, giúp những người dù ít hiểu biết về Internet cũng có thể dễ dàng mua hàng trên website. 3.2.2. Giao diện trang giỏ hàng Khi chưa có sản phẩm nào được chọn thì trang giỏ hàng sẽ không hiển thị sản phẩm nào cả, và sẽ yêu cầu khách hàng quay trở lại cửa hàng để mua sản phẩm Hình 3.7. Giao diện trang giỏ hàng khi chưa có sản phẩm Hình 3.8. Giao diện trang giỏ hàng khi đã có sản phẩm Khi giỏ hàng đã có sản phẩm thì trang giỏ hàng sẽ hiển thị thông tin về sản phẩm (mã sản phẩm, giá); mục Coupon code để khách hàng nhập mã giảm giá (nếu có); và cuối cùng là yêu cầu thanh toán. 3.2.3. Giao diện sản phẩm Giao diện sẽ hiển thị mô tả về sản phẩm, các thông tin về sản phẩm (mã sản phẩm, số lượng còn trong kho, giá sản phẩm) và các đánh giá của khách hàng. Hình 3.9 Giao diện sản phẩm  3.2.4. Giao diện trang tài khoản Trang tài khoản sẽ gồm 2 mục là đăng nhập và đăng ký Hình 3.10. Giao diện trang tài khoản 3.2.5. Giao diện trang thanh toán Hình 3.11. Giao diện trang thanh toán Trang thanh toán sẽ hiển thị form yêu cầu chúng ta nhập thông tin cá nhân (họ tên, email, địa chỉ…) 3.2.6. Giao diện đăng nhập của admin Hình 3.12. Giao diện đăng nhập của admin 3.2.7. Giao diện làm việc của admin Hình 3.13. Giao diện làm việc của admin 3.2.8. Giao diện sửa sản phẩm của admin Hình 3.14. Giao diện sửa sản phẩm của admin 3.2.9. Giao diện thêm sản phẩm của admin Hình 3.15. Giao diện thêm sản phẩm của admin KẾT LUẬN Kết quả đạt được Sau thời gian thực hiện đề tài thực tập cơ sở là “Thiết kế giao diện website bán hàng bằng wordpress” em đã thu được những kết quả sau: Hiểu được về phần mềm mã nguồn mở WordPress Hiểu được cách cài đặt và sử dụng Wordpress Hạn Chế: Mặc dù đã cố gắng hết sức để hoàn thiện đề tài tuy nhiên vẫn còn tồn tại những điểm hạn chế sau: Sản phẩm chỉ mang tính demo do đó chưa có nhiều thông tin. Do kiến thức còn hạn chế nên bài báo cáo còn nhiều thiếu sót. Hướng phát triển Trong tương lai sẽ phát triển website dựa trên các hướng sau: Phát triển thêm hệ thống lớn trên website, đưa vào ứng dụng thực tế Mở rộng thêm một số chức năng của website, thực hiện triển khai trên host, gán tên miền.   TÀI LIỆU THAM KHẢO 1. Lê Anh Tú, Giáo trình Lập trình mạng, Bộ môn Mạng và Truyền Thông, 2012. 2. Đặng Ngọc Bình, Thiết kế web siêu tốc, 2015. 3. ZendVN Group, Lập trình wordpress chuyên nghiệp, 2014 4. Chris Coyier Jeff Starr, Digging into WordPress, 2013 5. Rockable, Building WordPress Theme From Scratch, 2013 6. http:thachpham.comserieshocwordpresscoban   NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

MỤC LỤC LỜI NÓI ĐẦU Trong thời buổi nay, mà công nghệ phát triển, thương mại điện tử ngày phát triển giới Việt Nam dần khẳng định vị kinh tế thị trường Cùng với đời ngôn ngữ lâp trình cho phép thiết kế xây dựng ứng dụng thương mại điện tử nhiều hình thức khác Và ứng dụng thương mại điện tử phổ biến nước ta dịch vụ bán hàng qua mạng internet Dịch vụ cho phép người dùng tìm kiếm chọn lựa sản phẩm để mua, thực giao dịch mà không cần phải trực tiếp đến cửa hàng, mà cần sử dụng thiết bị máy tính có kết nối internet Tuy nhiên dịch vụ với nhiều người tiêu dung nước ta, đặc biệt người kiến thức tin học nói chung thương mại điện tử nói riêng Nên đối tượng thương mại điện tử chủ yếu tầng lớp tri thức học sinh,sinh viên Là người sinh viên, có chút kiến thức tin học tiếp xúc với thương mại điện tử nhiên đôi lúc gặp số khó khan việc mua bán hệ thống bán hàng qua mạng Như hình thức toán, nhận hàng, chất lượng sản phẩm thực tế không website Hiểu vấn đề mong muốn đưa thương mại điện tử đến với nhiều người hơn, em thực đề tài: “Tìm hiểu WordPress, ứng dựng thiết kế giao diện cho website bán hàng Công ty TNHH Thịnh Hưng” Với mục đích xây dựng giao diện bán hàng qua mạng uy tín, đơn giản, thân thiện, đem lại cho khách hàng lựa chọn tối ưu để người kiến thức tin học tham gia mua hàng qua mạng với số thao tác đơn giản LỜI CẢM ƠN Em xin chân thành cảm ơn quí thầy cô giúp đỡ em thực đề tài Đặc biệt cô Đào Thị Thu tận tình hướng dẫn, giúp đỡ, bảo em suốt thời gian làm đề tài Đồng thời em xin trân trọng cảm ơn tình cảm quí báu mà thầy cô trường Đại Học Công nghệ thông tin truyền thông truyền đạt cho em, kinh nghiệm, kỹ cách thức việc xây dựng đề tài Tuy nhiên, thời gian có hạn nên em phát huy hết ý tưởng, khả vào đề tài Trong trình thiết kế website, em tránh khỏi sai xót, em mong nhận đóng góp cảm thông quí thầy cô Em xin chân thành cảm ơn! Sinh viên Cao Văn Tú CHƯƠNG TÌM HIỂU TỔNG QUAN VỀ WORDPRESS 1.1 Giới thiệu Wordpress 1.1.1 Wordpress gì? WordPress phần mềm mã nguồn mở cung cấp miễn phí, sử dụng ngôn ngữ lập trình PHP hệ sở liệu MySQL Do đó, thích hợp cho muốn đặt blog website sử dụng tên miền riêng Tuy nhiên, tên miền riêng chịu vài hình ảnh quảng cáo xuất hiện, ta dùng chung với nhà cung cấp Automattic Production địa http://wordpress.org tương tự nhà cung cấp khác WordPress dạng phần mềm mã nguồn mở, hậu duệ thức b2/cafelog, mắt lần vào ngày 27/5/2003 tác giả Matt Mullenweg Mike Little Cái tên WordPress đề xuất Christine Selleck, người bạn nhà phát triển Matt Mullenweg WordPress viết PHP sử dụng hệ quản trị MySQL WordPress chạy tốt PHP5, hầu hết host (dịch vụ lưu trữ trực tuyến) có PHP hỗ trợ WordPress Nhiều Host (Godaddy, Host Gator, …) có chức tự động cài đặt WordPress WordPress để đăng tải thông tin lên mạng, WordPress có chức Website khác Nó làm site tin tức, đánh giá, bán hàng… chí mạng xã hội Ngoài ra, WordPress hỗ trợ tạo Blog miễn phí WordPress.com để điều kiện tài chính, kỹ thuật, thời gian… sử dụng WordPress WordPress thêm vào số tính nhỏ nhằm hỗ trợ người dùng trình sử dụng khả tự động lưu liên tục soạn thảo, nạp nội dung từ blog khác hay chia mục cho viết Tuy nhiên, WordPress lại chức xem trước (preview) nội dung viết mình, điều gây khó khăn cho người dùng họ cần xem xét chỉnh sửa Các nâng cấp định tên mã (codenames) đại diện cho nhạc sĩ nhạc jazz tiếng 1.1.2 Các tính Wordpress Khi tạo blog cho riêng có lý riêng, so với script dịch vụ blog khác, thích Wordpress tính • Dễ cài đặt, cần khởi tạo database, upload thiết lập tham số file wp-config.php, sau 1,2 lần click chuột, sẵn sàng để viết blog • Không giới hạn số lượng category sub-category: ta tạo vô số chuyên mục chuyên mục chuyên mục mà không gặp phải rắc rối nào.Tự động xuất RSS Atom: giúp cập nhật thông tin blog • Sử dụng giao diện XML RPC để trackback viết từ xa • Có thể đăng blog từ email • Hỗ trợ plugin theme: điểm mạnh Wordpress Nó tạo hội cho hàng nghìn nhà phát triển tham gia phát triển plugin theme cho Wordpress, làm cho ngày phong phú tính giao diện • Có thể nhập 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 chức tuyệt vời muốn chuyển từ blog khác sang sử dụng Wordpress, giúp lại lấy lại tất viết 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, nhiều API để mở rộng • Dễ quản lý trì mà chẳng cần phải có nhiều kĩ hay kinh nghiệm • Khả tìm kiếm blog tốt • Xuất nội dung chiều dài viết • Hỗ trợ viết blog đa ngôn ngữ • Administration Panel tổ chức tốt với nhiều tính lại dễ hiểu dễ sử dụng • Quản lý liên kết dễ dàng Với trợ giúp plugin nhiều API, ta chỉnh sửa Wordpress tùy thích theo nhu cầu mình, chí ta sử dụng Wordpress để làm website hoàn chỉnh Wordpress có hàng ngàn plugin theme, cộng với đồng người sử dụng đông đảo sẵn sàng góp sức phát triển, điều làm cho Wordpress ngày lớn mạnh thể vai trò số 1.1.3 Ưu điểm wordpress • Dễ sử dụng: WordPress phát triển nhằm phục vụ đối tượng người dùng phổ thông, nhiều kiến thức lập trình website nâng cao Các thao tác WordPress đơn giản, giao diện quản trị trực quan giúp ta nắm rõ cấu quản lý website WordPress thời gian ngắn Về cách cài đặt lại dễ hơn, ta tự cài đặt website WordPress host (máy chủ) riêng tự vận hành sau vài cú click • Cộng đồng hỗ trợ đông đảo: Là mã nguồn CMS mở phổ biến giới, điều có nghĩa ta cộng đồng người sử dụng WordPress hỗ trợ gặp phải khó khăn trình sử dụng Nếu có khả tiếng Anh tốt, ta dễ dàng tìm câu trả lời cho vấn đề gặp phải Google với vài từ khóa tìm kiếm • Nhiều gói giao diện có sẵn: Trong sử dụng WordPress, khái niệm giao diện cho website WordPress thường gọi theme Hiện WordPress có nhiều theme miễn phí khác để dễ dàng thay đổi “da thịt” website với vài cú click mà không cần bận tâm việc để thiết kế theme cho riêng Còn muốn website đẹp chuyên nghiệp hơn, ta mua theme trả phí với giá bán dao động từ $30 đến $65 • Nhiều plugin hỗ trợ: Plugin nghĩa trình cắm thêm vào website để bổ sung chức mà cần Ví dụ mặc định sau cài website WordPress, ta chức hiển thị viết liên quan viết, với nhiều plugin miễn phí hỗ trợ dễ dàng cài thêm plugin miễn phí để website có chức Tương tự với theme, có nhiều plugin trả phí mang tính độc đáo có ích vào website có giá khoảng từ $10 đến $80 tùy theo độ phức tạp • Dễ phát triển cho lập trình viên: Nếu người có am hiểu việc làm website thành thạo HTML, CSS, PHP ta dễ dàng mở rộng website WordPress với nhiều tính vô có ích Cách phát triển đơn giản WordPress mã nguồn mở nên ta dễ dàng hiểu cách hoạt động phát triển thêm tính • Dễ dàng Việt Hóa: Dĩ nhiên mặc định mã nguồn WordPress tiếng Anh, ta có nhu cầu Việt hóa lại WordPress dễ dàng tự làm • Có thể làm nhiều loại website: Dùng WordPress nghĩa ta làm blog cá nhân, mà biến website thành trang bán hàng, website giới thiệu công ty, tờ tạp chí online việc sử dụng kết hợp theme plugin với Tuy nhiên để làm được, ta nên chắn hiểu WordPress đừng vội bước lên mây để nhận cảm giác thất vọng độ phức tạp 1.2 Các công cụ cần thiết làm việc với wordpress • FileZilla – Phần mềm trao đổi liệu lên hosting/server theo giao thức FTP: FTP (viết tắt File Transfer Protocol dịch "Giao thức truyền tập tin") thường dùng để trao đổi tập tin qua mạng lưới truyền thông dùng giao thức TCP/IP (chẳng hạn Internet - mạng ngoại - Intranet - mạng nội bộ) Hoạt động FTP cần có hai máy tính, máy chủ máy khách) Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi trình chủ, lắng nghe yêu cầu dịch vụ máy tính khác mạng lưới Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi trình khách, khởi đầu liên kết với máy chủ Một hai máy liên kết với nhau, máy khách xử lý số thao tác tập tin, tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy mình, đổi tên tập tin, xóa tập tin máy chủ Và phần mềm FileZilla hỗ trợ upload tập tin, thư mục máy tính lên hosting để hoạt động web • XAMPP – Phần mềm tạo localhost: WordPress.org chạy hosting cá nhân để hoạt động Muốn có hosting phải mua dùng hosting miễn phí Nhưng chưa có host có ta thể lấy máy tính cá nhân làm host chạy website đó, nhìn thấy thôi, gọi localhost Localhost thường dùng vào mục đích: - Để học WordPress, ta không cần phải tiền mua host, mà lại nhanh thuận tiện - Để nghiên cứu thử nghiệm WordPress • Hosting: Chúng ta hiểu đơn giản Hosting dịch vụ lưu trữ trang web máy chủ kết nối Internet Nếu muốn có website điều chắn ta phải có hosting làm WordPress cần host • Domain – Tên miền: Domain tên để thay cho địa gốc host dẫn tới trang web mình, tức mua host ta vào web phải vào IP host Domain thường chia làm phần chính: www.tên-miền.com - www: phần gọi tiền tố domain - tên-miền: phần gọi trung tố domain - com: phần gọi hậu tố (hay gọi đuôi) domain 1.3 Hướng dẫn cài đặt WordPress vào localhost XAMPP 10 sd Suathongtin :Thanh vien Thanh vien frmSuathongtin Nhap thong tin ca nhan() Kiem tra thong tin() Yeu cau cap nhat() Cap nhat thong tin() Phan hoi thong tin() Phan hoi thong tin() Hình 2.10 Biểu đồ trình tự UC sửa thông tin cá nhân • UC quản lý danh sách thành viên sd QLThanhvien :Thanh vien :Nguoi quan ly : frmAddEditThanhvien Nhap yeu cau cap nhat vien() Chuyen yeu cau() Luu thong tin() Phan hoi thong tin() Phan hoi thong tin() Hình 2.11 Biểu đồ trình tự UC quản lý danh sách thành viên • UC quản lý danh mục sản phẩm 41 Hình 2.12 Biểu đồ trình tự UC quản lý danh mục sản phẩm • UC mua hàng, tiếp nhận xử lý đơn hàng sd Muahang :Donhang :Khach hang frmThongtinsanpham :frmThanhtoan Yeu cau mua hang() Hien thi danh muc san pham() Chon san pham can mua() Yeu cau luu thong tin() Cap nhat gio hang() Yeu cau toan() Hien thi form toan() Nhap thong tin toan() Yeu cau luu thong tin() Cap nhat don hang() Phan hoi thong tin() Phan hoi thong tin() Hình 2.13 Biểu đồ trình tự UC mua hàng 42 2.4.2 Biểu đồ lớp thực thể Hình 2.14 Biểu đồ lớp thực thể 43 CHƯƠNG THIẾT KẾ GIAO DIỆN CHO CÔNG TY TNHH THỊNH HƯNG 3.1 Cài đặt giao diện (theme) Để cài đặt theme, có cách: Cách 1:Tìm cài đặt theme từ thư viện Đầu tiên ta vào phần Giao diện sau ấn Thêm Hình 3.1 Thêm theme Lúc ta thấy danh sách theme có thư viện WordPress.Org, thư viện có 2000 themes khác Chúng ta sử dụng lọc để tìm theme phù hợp với sở thích/nhu cầu 44 Hình 3.2 Tìm kiếm cài đặt theme Sau tìm theme ưng ý, ta ấn vào theme để xem thông tin xem trước theme Nếu thấy ưng ý ấn Cài đặt Hình 3.3 Thông tin theme Và cuối ấn kích hoạt Hình 3.4 Kích hoạt theme Sau kích hoạt xong, ta vào Giao diện –> Menus để thiết lập menu Giao diện –> Widgets để thêm vài widget vào sidebar cho theme hiển thị tốt 45 Cách 2:Cài theme cách upload từ máy tính lên website Giả sử có theme máy tính ta nén lại thành file zip Sau có file nén zip theme, ta vào Giao diện –>Thêm –> Tải giao diện lên Hình 3.5 Upload theme Sau upload file zip theme lên kích hoạt thông thường Cách 3:Cài theme cách upload trực tiếp vào localhost Với cách ta dùng bị giới hạn dung lượng upload theme nặng Ta tiến hành upload theme vào thư mục /wp-content/themes/, ý thư mục theme phải có dạng /tên-theme/style.css 46 Sau upload xong, vào Giao diện kích hoạt, lúc theme mà ta vừa upload hiển thị 3.2.Bố cục website Phần (header): Gồm logo, tên cửa hàng, số điện thoại, liên kết (facebook, twitter, google, youtube), menu Phần header tất trang giống nhau, nên khách hàng dễ dàng truy cập đến phần trang website Phần bên trái chiếm 1/3 website nơi chứa widget (giỏ hàng, danh mục sản phẩm…) quảng cáo để tiện lợi cho khách hàng Phần content chiếm 2/3 website khu vực hiển thị tất sản phẩm có cửa hàng Dưới giao diện trang website: 3.2.1 Giao diện trang chủ Hình 3.6 Giao diện trang chủ 47 Trang chủ nơi hiển thị toàn sản phẩm, với giao diện đơn giản, dễ quan sát làm việc, giúp người dù hiểu biết Internet dễ dàng mua hàng website 3.2.2 Giao diện trang giỏ hàng Khi chưa có sản phẩm chọn trang giỏ hàng không hiển thị sản phẩm cả, yêu cầu khách hàng quay trở lại cửa hàng để mua sản phẩm Hình 3.7 Giao diện trang giỏ hàng chưa có sản phẩm Hình 3.8 Giao diện trang giỏ hàng có sản phẩm 48 Khi giỏ hàng có sản phẩm trang giỏ hàng hiển thị thông tin sản phẩm (mã sản phẩm, giá); mục Coupon code để khách hàng nhập mã giảm giá (nếu có); cuối yêu cầu toán 3.2.3 Giao diện sản phẩm Giao diện hiển thị mô tả sản phẩm, thông tin sản phẩm (mã sản phẩm, số lượng kho, giá sản phẩm) đánh giá khách hàng Hình 3.9 Giao diện sản phẩm 49 3.2.4 Giao diện trang tài khoản Trang tài khoản gồm mục đăng nhập đăng ký Hình 3.10 Giao diện trang tài khoản 3.2.5 Giao diện trang toán Hình 3.11 Giao diện trang toán 50 Trang toán hiển thị form yêu cầu nhập thông tin cá nhân (họ tên, email, địa chỉ…) 3.2.6 Giao diện đăng nhập admin Hình 3.12 Giao diện đăng nhập admin 3.2.7 Giao diện làm việc admin Hình 3.13 Giao diện làm việc admin 51 3.2.8 Giao diện sửa sản phẩm admin Hình 3.14 Giao diện sửa sản phẩm admin 3.2.9 Giao diện thêm sản phẩm admin Hình 3.15 Giao diện thêm sản phẩm admin 52 KẾT LUẬN Kết đạt Sau thời gian thực đề tài thực tập sở “Thiết kế giao diện website bán hàng wordpress” em thu kết sau: - Hiểu phần mềm mã nguồn mở WordPress - Hiểu cách cài đặt sử dụng Wordpress Hạn Chế: Mặc dù cố gắng để hoàn thiện đề tài nhiên tồn điểm hạn chế sau: - Sản phẩm mang tính demo chưa có nhiều thông tin - Do kiến thức hạn chế nên báo cáo nhiều thiếu sót Hướng phát triển Trong tương lai phát triển website dựa hướng sau: - Phát triển thêm hệ thống lớn website, đưa vào ứng dụng thực tế - Mở rộng thêm số chức website, thực triển khai host, gán tên miền 53 TÀI LIỆU THAM KHẢO [1] Lê Anh Tú, Giáo trình Lập trình mạng, Bộ môn Mạng Truyền Thông, 2012 [2] Đặng Ngọc Bình, Thiết kế web siêu tốc, 2015 [3] ZendVN Group, Lập trình wordpress chuyên nghiệp, 2014 [4] Chris Coyier & Jeff Starr, Digging into WordPress, 2013 [5] Rockable, Building WordPress Theme From Scratch, 2013 [6] http://thachpham.com/series/hoc-wordpress-co-ban 54 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 55