5. Kết cấu của đề tài
4.1. Mô hình quan hệ thực thể (ER Diagram)
4.1.1. Các tác nhân tham gia vào hệ thống website
- Khách thăm: Là ngƣời truy cập vào website xem thông tin đăng tải trên
webstie, xem sản phẩm. Khách thăm có thể đăng ký làm khách hàng. - Khách hàng: Là ngƣời tìm kiếm, xem, bình luận sản phẩm. Khách hàng có
thể mua hàng, đăng nhập, đăng xuất khỏi website. Khách hàng cũng có thể xem và sửa thông tin cá nhân; xem, sửa, xóa thông tin giỏ hàng và thanh toán sản phẩm.
- Ngƣời quản trị: Đăng nhập vào hệ thống quản trị website. Thêm, sửa, xóa
thông tin tài khoản nhân viên.
- Bộ phận kinh doanh: Kiểm tra đơn hàng; xác nhận thông tin đơn hàng của
khách hàng.
- Bộ phận kho: Nhận hàng và xuất hàng.
- Bộ phận nhập hàng: Nhập hàng và kiểm tra hàng trong kho.
- Hệ thống ngân hàng: Thanh toán khi có dơn đặt hàng từ phía khách hàng.
- Bộ phận chuyển hàng: Kiểm tra đơn hàng. Nhận hàng từ bộ phận kho.
Chuyển hàng cho khách.
4.1.2. Đặc tả các UseCase trong hệ thống website - Đăng ký thành viên: - Đăng ký thành viên:
Tác nhân: Khách xem
Mô tả: Cho phép khách xem sản phẩm và chọn sản phẩm vào giỏ hàng đăng ký thành
36
Tiền điều kiện: Khách hàng ghé xem hệ thống và chọn sản phẩm. Luồng sự kiện:
Khách xem chọn sản phẩm và vào giỏ hàng. Form đăng ký thông tin khách hàng hiển thị.
Khách xem và nhập thông tin cá nhân vào form thông tin khách hàng. Tích chọn ô đăng ký thành viên mới.
Hệ thống sẽ báo kết quả quá trình đăng ký thành viên.
- Đăng nhập hệ thống:
Tác nhân: Thành viên
Mô tả: UseCase cho phép thành viên đăng nhập hệ thống. Tiền điều kiện: Thành viên chƣa đăng nhập vào hệ thống. Luồng sự kiện:
Thành viên chọn chức năng đăng nhập. Form đăng nhập hiển thị.
Nhập tên tài khoản và mật khẩu để đăng nhập. Hệ thống sẽ kiểm tra thông tin đăng nhập.
Nếu đăng nhập thành công thì sẽ vào giao diện chính của website. Nếu đăng nhập không thành công sẽ có thông báo đăng nhập lại.
Nếu thành viên quên tài khoản, mật khẩu, thành viên sẽ chọn chức năng quên mật khẩu để lấy lại thông tin tài khoản mới.
- Tìm kiếm sản phẩm:
Tác nhân: Khách xem, thành viên
Mô tả: Cho phép tìm kiếm các sản phẩm.
37
Luồng sự kiện:
Ngƣời sử dụng kích vào mục sản phẩm của trang web. Hệ thống hiển thị form tìm kiếm mặc định.
Ngƣời sử dụng lựa chọn thông tin tìm kiếm cần thiết vào form tìm kiếm. Hệ thống sẽ tự động trả về kết quả tìm kiếm.
- Xem thông tin sản phẩm:
Tác nhân: Ngƣời quản lý, khách hàng
Mô tả: Cho phép ngƣời quản lý, khách hàng xem thông tin về các sản phẩm có trong cửa
hàng.
Tiền điều kiện: Truy cập vào website. Luồng sự kiện:
Ngƣời quản lý, khách hàng chọn sản phẩm cần xem.
Trang xem thông tin sản phẩm xuất hiện, hệ thống hiển thị thông tin về sản phẩm đã chọn.
Ngƣời quản lý, khách hàng xem thông tin chi tiết về sản phẩm đƣợc hiển thị.
- Xem thông tin cá nhân:
Tác nhân: Thành viên của hệ thống.
Mô tả: UseCase cho phép thành viên thay đổi các thông tin đăng ký. Tiền điều kiện: Thành viên phải đăng nhập vào hệ thống website. Luồng sự kiện:
Thành viên chọn chức năng sửa thông tin cá nhân.
Hệ thống sẽ hiển thị trang sửa thông tin với các thông tin cũ của thành viên hiện tại.
38 Nhấn nút lƣu thông tin.
Nếu cập nhật thành công sẽ có thông báo lƣu thành công. Nếu sai, sửa lại thông tin theo yêu cầu thông báo trên hệ thống.
Lƣu thông tin.
- Sửa thông tin cá nhân:
Tác nhân: Thành viên của hệ thống.
Mô tả: UseCase cho phép thành viên thay đổi các thông tin đăng ký Tiền điều kiện: Thành viên phải đăng nhập vào hệ thống website. Luồng sự kiện:
Thành viên chọn chức năng sứ thông tin cá nhân.
Hệ thống hiện trang sửa thông tin với thông tin đã lƣu từ trƣớc của thành viên. Thành viên nhập các thông tin mới.
Nếu cập nhật thành công sẽ có thông báo lƣu thành công. Nếu sai, sửa lại thông tin theo yêu cầu thông báo trên hệ thống.
Lƣu thông tin.
- Thêm giỏ hàng:
Tác nhân: Khách hàng
Mô tả: UseCase cho phép khách hàng đƣa sản phẩm đã chọn vào giỏ hàng. Tiền điều kiện: Sản phẩm đã đƣợc chọn.
Luồng sự kiện:
Chọn tính năng thêm giỏ hàng để đƣa sản phẩm vào giỏ hàng. Hệ thống hiển thị thông tin sẽ phẩm đã đƣợc đƣa vào giỏ hàng.
- Thanh toán:
39
Mô tả: UseCase cho phép khách hàng tạo đơn hàng để tiến hành thanh toán giỏ hàng. Tiền điều kiện: Khách hàng đã chọn sản phẩm đƣa vào giỏ hàng.
Luồng sự kiện:
Khách hàng nhấn vào thanh toán để tạo đơn hàng.
Form thông tin thanh toán xuất hiện. Hệ thống hiện thị đơn hàng đã đặt. Khách hàng nhập thông tin liên hệ và chọn phƣơng thức thanh toán. Chọn gửi đơn hàng
Hệ thống sẽ ghi nhận thông tin khách hàng và lƣu trữ ở sản phẩm. Đồng thời gửi mail thông báo sản phẩm đã đƣợc ghi nhận về mail khách hàng.
- Kiểm tra đơn hàng:
Tác nhân: Bộ phận kinh doanh
Mô tả: Cho phép nhân viên kinh doanh kiểm tra và xác nhận thông tin đơn hàng. Tiền điều kiện: Đăng nhập vào website.
Luồng sự kiện:
Nhân viên kinh doanh kiểm tra đơn hàng. Hệ thống hiện thị thông tin đơn hàng.
Nhận viên xác nhận thông tin trên đơn hàng.
- Nhận và giao hàng:
Tác nhân: Bộ phận chuyển hàng.
Mô tả: UseCase 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. Tiền điều kiện: Truy cập vào hệ thống website.
Luồng sự kiện:
40 Thay đổi trạng thái đơn hàng.
Gửi thông tin phản hồi, giao hàng thành công. Lấy xác nhận của khách hàng.
4.1.3. Sơ đồ UseCase
- Use Case đăng ký, đăng nhập.
Hình 4. 1. Sơ đồ Use Case đăng ký, đăng nhập.
41
Hình 4. 2. Sơ đồ Use Case tìm kiếm sản phẩm.
- Use Case nhập hàng
Hình 4. 3. Sơ đồ Use Case nhập hàng.
42
Hình 4. 4. Sơ đồ Use Case xuất hàng.
43
Hình 4. 5. Sơ đồ Use Case mua sản phẩm.
4.1.4. Sơ đồ tuần tự Diagram
44
45
46
Hình 4. 9. Tuần tự giao hàng
4.2. Thông số kỹ thuật thiết kế hệ thống
Website của 90s Coffee đƣợc thiết kế trên nền tảng WordPress. Đây là mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân. WordPress là một trong những mã nguồn đƣợc rất nhiều ngƣời sử dụng bởi tính dễ sử dụng và tính năng hữu ích. Qua thời gian, ngƣời sử dụng mã nguồn này đã xây dựng ra những website mở rộng hơn nhƣ website tin tức, giới thiệu doanh nghiệp, bán hàng thƣơng mại điện tử,… Với một website thông thƣờng, nó sẽ bao gồm các thành phần chính nhƣ:
- Code: Mã nguồn website, chứa hàng loạt tệp lệnh trích xuất HTML. - Hosting: Nơi lƣu trữ và chia sẻ dữ liệu trực tuyến.
47 - Database: Nơi lƣu trữ dữ liệu mềm của website (chẳng hạn nhƣ dữ liệu bài viết, nội dung trên website, các thiết lập…).
- Domain: Tên miền của website.
4.2.1 Code
Code trong website là một chuỗi các mã liên kết của những mã nguồn có sẵn nhƣ php, html, css, javascript… để tạo ra một website hoàn chỉnh đem đến trải nghiệm cho ngƣời truy cập vào website có đƣợc những thông tin với nhiều chức năng khác nhau. Tùy vào từng mục tiêu khác nhau mà mỗi website sẽ có một thiết kế mang giao diện riêng cho mình.
Thông thƣờng để xem đƣợc mã code của một website bất kỳ, chúng ta có thể sử dụng các phím câu lệnh trên máy tính nhƣ Ctrl + U hay bấm chuột phải và chọn Xem nguồn trang:
Hình 4. 10. Hướng dẫn xem code của một website trên máy tính.
Sau khi chúng ta nhấn tổ hợp phím nhƣ trên, trình duyệt sẽ tự động mở ra một Tab mới, nơi chứa rất nhiều dòng code phức tạp:
48
Hình 4. 11. Code của Website 90’s Coffee
Hiện nay, có rất nhiều ngôn ngữ lập trình đƣợc sử dụng trong mục đích thiết kế website nhƣ:
- Java
- C, C++, C# - Python
- Visual Basic .NET - JavaScript
- SQL - PHP
49
Hình 4. 12. Bảng xếp hạng các ngôn ngữ lập trình phổ biến nhất 2019 (Theo TIOBE Index)
90S COFFEE sử dụng mã nguồn WordPress là mã nguồn mở để thiết kế website của mình. WordPress là một phần mềm nguồn mở đƣợc viết bằng ngôn ngữ lập trình PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL. Mã nguồn này rất dễ sử dụng và có nhiều ƣu điểm nổi bật giúp ngƣời quản trị website của công ty không cần phải am hiểu về Code vẫn có thể quản lý tốt đƣợc Website.
Ƣu điểm
- Dễ sử dụng: WordPress đƣợc phát triển nhằm phục vụ cho các đối tƣợng phổ thông. Các thao tác trên WordPress rất đơn giản, giao diện trực quan, có hỗ trợ nhiều loại ngôn ngữ cho ngƣời dùng sử dụng. Chính vì thế, 90S COFFEE dễ dàng có thể cài đặt mã nguồn này chỉ bằng một cú click chuột. Hệ thống cài đặt gần nhƣ tự động, chỉ cần kết nối với cơ sở dữ liệu với code là có thể truy cập đƣợc website.
- Cộng đồng hỗ trợ đông đảo: WordPress là một mã nguồn mở phổ biến nhất nhì thế giới, chính vì thế cộng đồng ngƣời sử dụng WordPress cũng vô cùng lớn. Tại Việt Nam có một số diễn đàn trên Facebook hỗ trợ cho ngƣời dùng WordPress, và phổ biến nhất
50 chính là WordPress Việt Nam. Đây là những group mà 90S COFFEE thƣờng xuyên trao đổi để cải thiện website của mình, chẳng hạn việc cài đặt tính năng chat Facebook Online ngay tại trang chủ, công ty đã thông qua hỗ trợ từ cộng đồng này đã cài đặt thành công cho mình.
- Nhiều mẫu giao diện: Hệ thống giao diện dành cho WordPress vô cùng phong phú, bao gồm cả miễn phí và trả phí. Giao diện website của 90S COFFEE sử dụng giao diện Flatsome đã đƣợc tùy biến lại theo nhu cầu sử dụng của công ty. Đây là giao diện rất phổ biến để sử dụng trong mục đích bán hàng:
Hình 4. 13. Kho giao diện WordPress miễn phí trên Website.
- Nhiều Plugin mở rộng: Plugin mở rộng nghĩa là một thành phần đƣợc cài đặt thêm vào WordPress để giúp website có thêm một vài tính năng bổ trợ. Chẳng hạn nhƣ Plugin Chat Facebook Online trên website 90S COFFEE, công ty đã sử dụng thêm Plugin này để có thể dễ dàng tƣơng tác với khách hàng khi họ có nhu cấp giải đáp thắc mắc ngay tại website:
51
Hình 4. 14. Tích hợp Chat Facebook Online ngay trên website bằng Plugin
- Dễ phát triển cho lập trình viên: Vì WordPress là một mã nguồn mở nên quản trị viên của website 90S COFFEE dễ dàng tùy biến giao diện và phát triển thêm các tính năng riêng cho website.
- Hỗ trợ đa ngôn ngữ: Mã nguồn WordPress hiện tại có rất nhiều ngôn ngữ hỗ trợ, trong đó có cả tiếng Việt. Website của công ty sử dụng ngôn ngữ chính là tiếng Việt vì vậy khi nâng cấp mã nguồn này, quản trị website đã cài đặt thêm ngôn ngữ tiếng Việt cho website để nhân viên kinh doanh và quản trị viên khác dễ dàng làm việc hơn.
Với những ƣu điểm khi sử dụng mã nguồn WordPress mà công ty hoàn toàn yên tâm quản lý website một cách thuận lợi nhất cho mình.
52
53
54
55 Giao diện trang quản lý sau khi đăng nhập bằng tài khoản quản trị website:
Hình 4. 18. Giao diện quản trị website 90’s Coffee trên wordpress
Giao diện với cấu hình quản trị của 90S COFFEE cực kỳ đơn giản, vì thế quản trị viên của website có thể chinhr sửa nội dung, cấu trúc website theo ý mình một cách dễ dàng. Hệ thống code website đƣợc WordPress tự động tạo sẵn mà ngƣời dùng không nhất thiết phải tạo và hiểu hết về nó:
57
Hình 4. 19. Hệ thống code website 90’s Coffee được tại bởi wordpress
Ngoài hệ thống code đƣợc lập trình sẵn, website công ty còn sử dụng thêm các plugin để hỗ trợ trong quá trình quản lý và thêm các tính năng ngoài trang chủ. Ở nền
58 tảng WordPress, plugin đóng vai trò quan trọng trong việc quản lý và xây dựng website nhƣ việc tối ƣu hóa SEO website, tính năng hỗ trợ bán hàng online, chat facebook, tạo hotline trên trang chủ, bảo mật website,… Ngoài ra, plugin có thể hỗ trợ trong việc tối ƣu nội dung website, giao diện website, tạo các trang giới thiệu công ty riêng biệt và rất nhiều chức năng khác.
Dƣới đây là hệ thống các plugin đã sử dụng trên website:
59
4.2.2 Hosting
Hosting là dịch vụ lƣu trữ dữ liệu online. Hosting đƣợc chia nhỏ từ máy chủ (Máy chủ vật lý hoặc VPS) nhằm giảm chi phí. Có thể sử dụng host để chạy website, webmail, phần mềm, ứng dụng hoặc sao lƣu, chia sẻ dữ liệu trực tuyến. Hosting đƣợc chia làm 2 loại Host windows và Host linux. Host windows sử dụng phần mềm Plesk để quản lý. Host Linux thì có rất nhiều phần mềm quản lý, phổ biến nhất là cPanel và DirectAdmin.
Website của công ty 90S COFFEE sử dụng Host Linux của công Công ty TNHH PA Việt Nam.
Ngày đăng ký là 04/06/2018
Hình 4. 21. Thông tin đăng ký tên miền 90scoffee.vn
Địa chỉ IP của máy chủ (Server IP): 103.221.220.22
60
61
4.2.3 Database
Cơ sở dữ liệu (tiếng anh là Database) là tập hợp dữ liệu đƣợc lƣu trữ trong hệ thống máy tính. CSDL cho phép ngƣời sử dụng chúng nhập, truy cập và thống kê dữ liệu nhanh chóng, dễ dàng. Chẳng hạn nhƣ việc nhân viên lễ tân của quán cafe nhập thông tin cá nhân của khách hàng khi vào máy tính hoặc xem nhân viên cửa hàng sử dụng máy tính để kiểm tra xem một mặt hàng còn hay hết trong hay không.
CSDL giống nhƣ một tập hợp các danh sách. Thông thƣờng Database đƣợc gói gọn trong tệp tin .sql. Tệp tin này lƣu trữ dữ liệu website theo cấu trúc bảng biểu (table). Trình quản lý của Database cũng tƣơng tự nhƣ với Access.
Database là tệp tin .sql. Tệp tin này lƣu trữ dữ liệu website theo cấu trúc bảng biểu (table). Trình quản lý của nó cũng tƣơng tự với access.
WordPress sử dụng PHP, với SQL queries trong PHP markup để lƣu trữ và xuất dữ liệu từ MySQL databases. Ví dụ nhƣ khi truy cập vào website 90scoffee.vn, quản trị viên sẽ phải đăng nhập để vào đƣợc trang quản trị, khi đó SQL đƣợc dùng để đăng nhập vào website. Đồng thời quản trị viên có thể dễ dàng kiểm tra thông tin thành viên có trong website ngay trong trang quản trị của mình.
62
Hình 4. 23. Giao diện database của website trên hosting
Plugins và themes cũng lƣu trữ data trong database, nhƣ options, và sử dụng SQL trong PHP markup để query đến database và output content.
4.2.4 Tên miền (Domain name)
Mỗi hosting (nơi lƣu trữ website) sẽ có một địa chỉ IP khác nhau. VD: 112.42.43.100 chẳng hạn. Nhƣng nếu truy cập website thông qua kiểu dãy số nhƣ thế thì khá là bất tiện và rất khó nhớ. Chính vì thế thuật ngữ Domain Name (tên miền) đƣợc ra đời theo 2 loại cơ bản:
Tên miền quốc tế: .com .net .org .name…