Sự xuất hiện của mạng máy tính là một dấu mốc lịch sử của loài người, mạng máy tính hỗ trợ cho chúng ta rất nhiều trong cuộc sống, nhờ có mạng máy tính thông tin được truyền đi một cách
CƠ SỞ LÝ THUYẾT
Giới thiệu web
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ề Intemet, 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ọ 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 có một Website để quảng bá công ty hay một Website cá nhân không còn là điều gì xa xỉ nữa Nắm được nhu cầu đó em đã quyết định chọn đề tài: “Website Bán thực phẩm bổ sung” cho đồ án lần này Đề tài được xây dựng theo mô hình website bán hàng trực tuyến Website được thiết kế như trang thương mại điện tử mini luôn cập nhật thông tin về các sản phẩm mới nhất.
Các công nghệ áp dụng để xây dựng website này là: Frontend sử dụng thư viện Reactjs của Facebook, Backend sử dụng Lavarel, Cơ sở dữ liệu sử dụng MySQL.
Trang web được chia làm 3 phần:
- Phẩn đầu (Header): bao gồm với thông tin đăng nhập, đăng ký, giỏ hàng,
- Phần giữa (Container): bao gồm nội dung chính của trang web, 1 banner được thiết kế phù hợp với trang web và các danh sách sản phẩm được lấy từ cơ sở dữ liệu
- Phần cuối (Footer): gồm những thông tin về trang web, hotline cửa hàng, đăng ký email để nhận những khuyến mãi.
Giới thiệu ngôn ngữ sử dụng
Khái niệm: PHP là chữ viết tắt của “Personal Home Page" do Rasmus Lerdorf tạo ra năm 1994 Vì tính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trong môi trường chuyên nghiệp và nó trở thành “PHP:Hypertext Preprocessor" Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản đó là một trang HTML có nhưng mà PHP, PHP có thể được đặt rải rác trong HTML
PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một công nghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross platform) Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nói đến mọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụ thuộc môi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows, Unix và nhiều biến thể của nó Đặc biệt các mã kịch bản PHP viết trên máy chủ này sẽ làm việc bình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnh sửa rất ít.
Khi một trang Web muốn được dùng ngôn ngữ PHP thì phải đáp ứng được tất cả các quá trình xử lý thông tin trong trang Web đó, sau đó đưa ra kết quả ngôn ngữ HTML.
Khác với ngôn ngữ lập trình, PHP được thiết kế để chỉ thực hiện điều gì đó sau khi một sự kiện xảy ra (ví dụ, khi người dùng gửi một biểu mẫu hoặc chuyển tới một URL).
Tại sao nên dùng PHP: Để thiết kế Web động có rất nhiều ngôn ngữ lập trình khác nhau để lựa chọn, mặc dù cấu hình và tính năng khác nhau nhưng chúng vẫn đưa ra những kết quả giống nhau Chúng ta có thể lựa chọn cho mình một ngôn ngữ: ASP, PHP, Java, Perl và một số loại khác nữa. Vậy tại sao chúng ta lại nên chọn PHP Rất đơn giản, có những lí do sau mà khi lập trình Web chúng ta không nên bỏ qua sự lựa chọn tuyệt vời này PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các giải pháp khác
PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu có sẵn, tính linh động, bền vững và khả năng phát triển không giới hạn Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, và chính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web luôn có ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong các chương trình này
PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các lập trình viên chuyên nghiệp, mọi ý tưởng của các bạn PHP có thể đáp ứng một cách xuất sắc
Giới thiệu ngôn ngữ PHP: Vì PHP là ngôn ngữ máy chủ nên mã lệnh của PHP sẽ tập trung trên máy chủ để phục vụ các trang Web theo yêu cầu của người dùng thông qua trình duyệt.
Hình 1.1 Sơ đồ hoạt động PHP
Khi người dùng truy cập Website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử lí chúng theo các hướng dẫn được mã hóa Mã lệnh PHP yêu cầu máy chủ gửi một dữ liệu thích hợp (mã lệnh HTML) đến trình duyệt Web Trình duyệt xem nó như là một trang HTML têu chuẩn Như ta đã nói, PHP cũng chính là một trang HTML nhưng có nhúng mã PHP và có phần mở rộng là HTML Phần mở của PHP được đặt trong thẻ mở Khi trình duyệt truy cập vào một trang PHP, Server sẽ đọc nội dung file PHP lên và lọc ra các đoạn mã PHP và thực thi các đoạn mã đó, lấy kết quả nhận được của đoạn mà PHP thay thế vào chỗ ban đầu của chúng trong file PHP, cuối cùng Server trả về kết quả cuối cùng là một trang nội dung HTML về cho trình duyệt.
Laravel là một framework rõ ràng và ưu việt cho việc phát triển webPHP Giải thoát bạn khỏi mã spaghetti, nó giúp bạn tạo ra những ứng dụng tuyệt vời, sử dụng syntax đơn giản Phát triển là thích thú những trải nghiệm sáng tạo chứ không phải là sự khó chịu.
Laravel là một framework PHP 5.3 được miêu tả như ‘một framework cho web artisan’ Theo tác giả Taylor Otwell, Laravel mang lại niềm vui cho việc lập trình bởi nó đơn giản, súc tích và đặc biệt là trình bày hợp lý. Laravel có 3 đặc tính nổi trội: Đơn giản: các chức năng của Laravel rất dễ hiểu và thực hiện. Ngắn gọn: hầu hết các chức năng của Laravel hoạt động liên tục với cấu hình rất nhỏ, dựa vào các quy tắc chuẩn để giảm bớt code-bloat
Trình bày hợp lý: hướng dẫn sử dụng Laravel rất đầy đủ và luôn cập nhật Nhà lập trình, người tạo ra framework luôn cập nhật tài liệu trước khi cho ra một phiên bản mới, đảm bảo những người học lập trình luôn luôn có những tài liệu mới nhất.
Yêu cầu HTTP từ Routed tới một Controller (routing nằm trong thư mục app/routes.php)
Controller sẽ thực hiện những action và gửi kết quả tới view (app/controllers)
View sẽ hiển thị những kiểu dữ liệu phù hợp và gửi lại HTTP Response (app/views)
Cấu trúc thư mục của Lavarel:
/app Chứa controller, model, views và assets của ứng dụng, là nơi chứa code chính của bạn /public Lưu trữ file css, javascrip, images, và những file Đồng thời nó chứa file khởi động index.php
/vendor Là nơi chứa toàn bộ code của bên thứ ba Chứ plugin chúng ta cài thêm cho ứng dụng /app/config/ Nơi chứa các file cấu hình khi chạy ứng dụng, csdl, session và nhiều thứ khác
/app/config/app.php Cấu hình mức cài đặt cảu ứng dụng ở khía cạnh khác như timezone, locale, mode debug và khóa mã hóa duy nhất.
/app/config/auth.php Drive xác thực
/app/config/cache.php Nếu ứng dụng của bạn có lưu cache thì thời gian hồi đáp ứng dụng nhanh hơn /app/database/migrations/ Thư mục migration chứa những lớp PHP mà cho phép Laravel cập nhật Schema cơ sở dữ liệu của bạn mà vẫn giữ được toàn bộ versions cơ sở dữ liệu trong khi đồng bộ Những file migration được tạo bởi tool Artisan.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Mô tả bài toán
Website bán thực phẩm bổ sung được xây dựng với tiêu chí tạo sự dễ dàng, thoải mái cho khách hàng khi mua sản phẩm Khách hàng không cần đến các cửa hàng hay nhà phân phối mà vẫn tham khảo được tác dụng, giá cả và thông tin về từng sản phẩm và sự đảm bảo từ phía nhà cung cấp Một tài khoản khách hàng không thể vào trang quản trị, khách hàng vẫn có thể mua hàng dù không đăng nhập. Website bao gồm các loại người dùng chính: Khách hàng, Khách hàng có tài khoản, Nhân viên quản trị.
Xem danh sách sản phẩm: Khi người dùng truy cập vào website thì hệ thống sẽ tự động hiển thị Trang Chủ Khi người dùng chọn vào một danh mục sản phẩm cụ thể nào thì tất cả sản phẩm của danh mục đó sẽ hiển thị lên giao diện
Xem chi tiết sản phẩm: Sau khi tìm thấy sản phẩm cần, người dùng có thể chọn vào sản phẩm để xem thông tin chi tiết của sản phẩm đó. Tìm kiếm: Khi khách hàng cần tìm một sản phẩm nào đó thì có thể nhập thông tin sản phẩm vào ô tìm kiếm để thực hiện chức năng tìm kiếm Có hiện những hình ảnh gợi ý của sản phẩm bạn đang tìm kiếm. Đăng ký: Khi khách có thể thực hiện chức năng đăng ký để trở thành thành viên của website để có thể xem thông tin đơn hàng đã mua. Mua hàng: khách hàng chưa đăng nhập cũng có thể mua hàng khi cung cấp đủ thông tin nhưng không xem được danh sách đơn hàng đã mua. Đưa sản phẩm vào giỏ hàng: Sau khi khách hàng tìm thấy sản phẩm đáp ứng nhu cầu của mình thì có thể chọn đưa sản phẩm vào giỏ hàng.Cập nhật giỏ hàng: Khi người dùng đã lựa chọn một sản phẩm nhưng tìm được một sản phẩm hợp lý hơn thì có thể xóa sản phẩm đã có trong giỏ hàng vào chọn lại sản phẩm mới Ngoài ra, khi cần mua sản phẩm đó với một số lượng thì người dùng cũng có thể cập nhật trong giỏ hàng.
Thanh toán: Khi đã quyết định chắc chắn mua sản phẩm, người dùng có thể chọn chức năng thanh toán để thực hiện xác nhận đơn hàng cho mình Muốn thực hiện thanh toán thì yêu cầu người dùng phải đăng nhập vào hệ thống Trong quá trình thực hiện chức năng thanh toán thì người dùng có thể thấy được danh sách sản phẩm mà mình đặt mua trong giỏ hàng Người dùng cần điền một số thông tin như họ tên người nhận, số diên thoại, địa chỉ, chọn hình thức thanh toán ( hiện tại chí có thanh toán bằng paypal) Sau khi thực hiện xong các bước thì người dùng xác nhận đơn hàng.
Khách hàng có tài khoản: khi đăng nhập là thành viên sẽ có thêm những tính năng như sau:
Xem danh sách sản phẩm đã đặt mua: Khách hàng có thể xem lại các sản phẩm mà mình từng đặt mua trên website.
Quản lý đơn hàng: Sau khi đặt mua mà chưa thực hiện thanh toán thì khách hàng có thể cập nhật lai đơn hàng.
Quên mật khẩu: Khi người dùng đã có tài khoản nhưng quên đăng nhập sẽ vào trang quên mật khẩu trong phần đăng nhập, nhập email đã được sử dụng để đăng ký tài khoản bạn muốn đổi lại mật khẩu, mã đổi sẽ được gửi đến email của bạn và xác thực để đổi mật khẩu.
Nhân viên quản trị: Có tất cả các chức năng của khách hàng thành viên và có thêm chức năng quản lý tùy vào quyền hạn của mỗi nhân viên: Quản lý sản phẩm, đơn hàng, khách hàng: Để thực hiện chức năng quản lý thì yêu cầu nhân viên phải đăng nhập hệ thống Nhân viên chọn mục mình cần thực hiện quản lý như sản phẩm Trong quản lý sản phẩm có xem, thêm, sửa, xóa sản phẩm Chọn thao tác cần thực hiện, điền đầy đủ thông tin trong quá trình thực hiện rồi xác
18 nhận thao tác Đánh dấu các sản phẩm đã giao, đã đặt, phần quyền Admin cho các tài khoản khác.
2.1.2 Yêu cầu phi chức năng
Dung lượng website vừa phải, tốc độ truy xuất nhanh Hệ thống thông tin phải có chế độ bảo mật, không chấp nhận sai sót Cơ sở dữ liệu phải được đảm bảo khi hệ thống đang hoạt động Khi người dùng thực hiện việc đăng nhập vào hệ thống phải thông qua các bước sau: nhập email và mật khẩu.Nếu khách hàng lần đầu tiên tham gia mua hàng thì yêu cầu đăng ký khách hàng và khách hàng đó được gán một mã số riêng biệt Khi đăng ký khách hàng cần điền đầy đủ thông tin đăng nhập gồm Email, mật khẩu.
Sơ đồ chức năng
Hình 2.1 Sơ đồ chức năng
Sơ đồ quan hệ
Hình 2.2 Sơ đồ quan hệ
Sơ đồ lớp
XÂY DỰNG CHƯƠNG TRÌNH ỨNG DỤNG
Giao diện trang khách hàng
Hình 3.1 Giao diện trang chủ 3.1.2 Giao diện trang giới thiệu sản phẩm
Hình 3.2 Giao diện trang giới thiệu sản phẩm
3.1.3 Giao diện trang đăng ký
Hình 3.3 Giao diện trang đăng ký
3.1.4 Giao diện trang đăng nhập
Hình 3.4 Giao diện trang đăng nhập
3.1.5 Giao diện tìm kiếm sản phẩm ( có gợi ý )
Hình 3.5 Giao diện trang tìm kiếm sản phẩm
3.1.6 Giao diện trang giỏ hàng và thanh toán
Hình 3.6 Giao diện trang giỏ hàng ( giỏ hàng con )
Hình 3.7 Giao diện trang giỏ hàng và thanh toán
3.1.7 Giao diện lịch sử mua hàng
Hình 3.8 Giao diện lịch sử mua hàng
Hình 3.9 Giao diện lịch sử mua hàng (chi tiết)
3.1.8 Giao diện trang quên mật khẩu
Hình 3.10 Giao diện trang quên mật khẩu (gửi mã)
Hình 3.11 Giao diện trang quên mật khẩu (đợi xác thực)
Hình 3.12 Giao diện trang quên mật khẩu (hiện mã)
Giao diện phần quản lý
3.2.2 Giao diện thêm, sửa sản phẩm
Hình 3.15 Giao diện thêm, sửa sản phẩm
Hình 3.16 Giao diện thêm, sửa sản phẩm (nhập thông tin)
3.2.3 Giao diện quản lý đơn hàng
Hình 3.17 Giao diện trang quản lý hoá đơn 3.2.4 Giao diện quản lý danh mục
Hình 3.18 Giao diện trang quản lý danh mục
3.2.5 Giao diện quản lý tài khoản
Hình 3.19 Giao diện trang quản lý tài khoản
Các chức năng chính
Có 2 cách mua hàng: đăng nhập và không đăng nhập, nếu khách hàng đăng nhập giỏ hàng sẽ được lưu trong cơ sở dữ liệu, còn nếu không đăng nhập giỏ hàng sẽ được lưu trong Cookie với thời hạn 7 ngày, sau 7 ngày giỏ hàng sẽ tự động xóa.
3.3.2 Liệt kê các sản phẩm cùng loại
Xem sản phẩm theo danh mục
Hình 3.20 Chức năng xem sản phẩm theo mục
3.3.3 Chức năng gửi mail khi quên mật khẩu
Giúp khách hàng quên mật khẩu lấy lại tài khoản của mình.
Hình 3.21 Giao diện trang quên mật khẩu (nhập mail)
Hình 3.22 Giao diện trang quên mật khẩu (gửi mã xác nhận)
Hình 3.23 Giao diện trang quên mật khẩu (nhận mã xác nhận)
Hình 3.24 Giao diện trang xác thực tài khoản
3.3.4 Chức năng thanh toán trực tuyền bằng PayPal
Chức năng này chỉ xuất hiện khi đã có sản phẩm trong giỏ hành, Khi nhấn vào nút PayPal trong trang thanh toán khách hàng sẽ sang một của paypal.com với tài khoản của khách hàng
Hình 3.25 Chức năng thanh toán trực tuyến bằng PayPal
3.3.6 Chức năng tìm kiếm sản phẩm có gợi ý
Hình 3.26 Chức năng tìm kiếm sản phẩm có gợi ý