TÌM HIỂU PHP, MVC và BOOTSTRAP xây DỰNG ỨNG DỤNG WEBSITE MUA bán NÔNG sản

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP THỰC PHẨM TP.HCM KHOA CƠNG NGHỆ THƠNG TIN ĐỒ ÁN TÍN CHỈ TÌM HIỂU PHP, MVC VÀ BOOTSTRAP XÂY DỰNG ỨNG DỤNG WEBSITE MUA BÁN NÔNG SẢN GVHD: ThS Phan Thị Ngọc Mai SV Thực Hiện: Lê Ngọc Sơn – 2033180055 Từ Thanh Phong- 2033180009 TP HỒ CHÍ MINH, tháng năm 2021LỜI CÁM ƠN Đồ án đạt kết tốt đẹp, chúng em nhận hỗ trợ, giúp đỡ nhiểu quan, tổ chức, cá nhân Với tình cảm sâu sắc, chân thành, cho phép chúng em bày tỏ lòng biết ơn sâu sắc đến tất cá nhân quan tạo điều kiện giúp đỡ em trình học tập nghiên cứu đề tài Trước hết chúng em xin gửi tới thầy cô khoa Công Nghệ Thông Tin trường Đại Học Công Nghiệp Thực Phẩm Thành Phố Hồ Chí Minh lời chào trân trọng, lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm, dạy dỗ, bảo tận tình chu đáo thầy cơ, đến chúng em hồn thành đề tài: “TÌM HIỂU PHP, MVC VÀ BOOTSTRAP XÂY DỰNG ỨNG DỤNG WEBSITE MUA BÁN NÔNG SẢN” Đặc biệt chúng em xin gửi lời cảm ơn chân thành tới cô giáo Phan Thị Ngọc Mai quan tâm giúp đỡ, hướng dẫn chúng em hoàn thành tốt đồ án thời gian qua Với điều kiện thời gian kinh nghiệm hạn chế sinh viên, đồ án khơng thể tránh thiếu sót Chúng em mong nhận đƣợc sựchỉ bảo, đóng góp ý kiến thầy để chúng em có điều kiện bổ sung, nâng cao ý thức mình, phục vụ tốt công tác thực tế sau Chúng em xin chân thành cảm ơn! Sinh viên thực Đồ án Lê Ngọc Sơn Từ Thanh Phong NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Nhóm sinh viên gồm: 1.Lê Ngọc Sơn 2.Từ Thanh Phong MSSV: 2033180055 MSSV: 2033180009 Nhận xét: · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· Điểm đánh giá: · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· · ·········································································································· Ngày… Tháng….Năm 2021 (Ký tên ghi rõ họ tên) MỤC LỤC DANH MỤC HÌNH ẢNH CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI MỤC TIÊU VÀ YÊU CẦU: 1.1 Mục tiêu - Xây dựng ứng dụng website mua bán nông sản - Hệ thống cần thực chức sau: + Quản lý người mua hàng + Quản lý sản phẩm + Quản lý bán hàng + Quản lý báo cáo + Thống kê người dùng, sản phẩm đơn hàng 1.2 Yêu cầu - Xây dựng giao diện trang dụng - Xây dựng trang chủ - Phân quyền nhóm người dùng - Hiển thị thông tin sản phẩm chi tiết sản phẩm - Thêm xố sửa sản phẩm - Xây dựng tính giỏ hàng: thêm, cập nhật, xoá giỏ hàng - Xây dựng tính đăng ký quản lý tài khoản 1.3 Môi trường thực - Sử dụng công cụ lập trình: Subline text, Xamp, SQL server 2012 - Sử dụng ngôn ngữ: Html, CSS, PHP, framwork Larave (PHP) CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình PHP - Giới thiệu: PHP: Hypertext Preprocessor, thường viết tắt thành PHP ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng qt Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngôn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến - Ưu điểm PHP: PHP ngôn ngữ mã nguồn mỡ, chạy Apache IIS so với ASP.NET phổ biến nhiều hơn, điều minh chứng số lượng website thiết kế ngôn ngữ PHP Cấu trúc PHP đơn giản, nên bạn khơng nhiều thời gian để học Một làm chủ HTML C, bạn hồn tồn làm chủ ngơn ngữ lập trình Thư viện PHP vơ phong phú, hệ thống CMS miễn phí dùng tương đối nhiều, cộng đồng hỗ trợ cách vô mạnh mẽ Vậy nên bạn dễ dàng tìm nguồn tài liệu cần nhận hỗ trợ cách nhanh Do chạy máy chủ Apache thường cặp với hệ quản trị sở liệu MySQL nên việc cài đặt môi trường phát triển vô đơn giản, thông qua cài đặt là: XAMPP windows linux, MAMP MacOS - Các tính PHP: + Mã nguồn mở + Nền tảng độc lập + Dễ học + Tích hợp sở liệu dễ dàng 2.2 Tìm hiểu Bootstrap - Bootstrap gì? + Bootstrap tảng (framework) miễn phí, mã nguồn mở, dựa HTML, CSS & Javascript Nó tạo để xây dựng giao diện Website tương thích với tất thiết bị có kích thước hình khác + Bootstrap bao gồm đối tượng có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Nó có nhiều Component, Javascript hỗ trợ cho việc thiết kế Reponsive dễ dàng, thuận tiện nhanh chóng - Ưu điểm Bootstrap: + Boostrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Bootstrap có đoạn mã sẵn sàng cho lập trình viên áp dùng vào website mà khơng phải tốn q nhiều thời gian để tự viết code cho giao diện + Bootstrap dễ dàng sử dụng, cần có kiến thức html, css + Ưu điểm bật bootstrap khả tự động điểu chỉnh kích thước trang web phù hợp với loại hình: điện thoại, tablets, laptop hay máy tính để bàn + Bootstrap tương thích với tất trình duyệt đại như: chrome, firefox, internet explorer, cốc cốc, safari opera 2.3 Tìm hiểu Laravel: - Laravel gì? +Laravel framework rõ ràng ưu việt cho việc phát triển web PHP Giải thoát khỏi mã spaghetti, giúp tạo ứng dụng tuyệt vời, sử dụng syntax đơn giản Phát triển thích thú trải nghiệm sáng tạo khó chịu + Laravel framework PHP 5.3 miêu tả ‘một framework cho web artisan - Đặc tính trội Laravel: + Đơn giản: chức Laravel dễ hiểu thực + Ngắn gọn: hầu hết chức Laravel hoạt động liên tục với cấu hình nhỏ, dựa vào 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 đầy đủ ln cập nhật Nhà lập trình, người tạo framework cập nhật tài liệu trước cho phiên mới, đảm bảo người học lập trình ln ln có tài liệu - Đặc điểm khiến Laravel trội: + Bundles: dành cho Laravel PEAR cho PHP Ngồi laravel kèm với cơng cụ command-line gọi Artisan, giúp việc cài đặt gói dễ dàng + Eloquent ORM: file thực thi PHP Active Record tiên tiến có + Migrations: trog laravel, migrations xây dựng framework, chúng thực thông quan Artisan command-line + Unit-testting: laravel framework tuyệt vời để tích hợp PHP Unit + Redis: Laravel hỗ trợ Redis ngắn gọn - Cấu trúc thư mục Laravel: Folder/File Mô tả app Thư mục app, chứa tất project tạo, hầu hết class project tạo nơi chứa code bạn app/Console Thư mục Console, chứa tập tin định nghĩa câu lệnh artisan app/Exceptions Thư mục Exceptions, chứa tập tin quản lý, điều hướng lỗi app/Http/Controllers Thư mục Controllers, chứa controller project app/Http/Middleware Thư mục Middleware, chứa tập tin lọc ngăn chặn requests app/Providers Thư mục Providers, chứa file thực việc khai báo service bind vào Service Container bootstrap Thư mục bootstrap, chứa file khởi động framework file cấu hình auto loading, route, file cache config Thư mục config, chứa tất file cấu hình bạn database Thư mục database, chứa thư mục migration (tạo thao tác database) seeds (tạo liệu mẫu), tiện lợi để lưu trữ liệu sau database/factories Thư mục factories, chứa file định nghĩa cột database/migrations database/seeds public resources resources/views routes routes/api.php routes/web.php storage tests vendor bảng liệu để tạo liệu mẫu Thư mục migrations, chứa file tạo chỉnh sửa liệu Thư mục seeds, chứa file tạo liệu thêm vào CSDL Thư mục public, nơi chứa file khởi động index.php đồng thời nơi lưu trữ file css, javascrip, images Thư mục resources, chứa file view raw, file biên soạn LESS, SASS, JavaScript Thư mục views, chứa file view xuất giao diện người dùng Thư mục routes, chứa tất điều khiển route (đường dẫn) project Chứa file route sẵn có: web.php, channels.php, api.php, console.php File api.php, điều khiển route ứng dụng, route ứng dụng User (đăng ký, đăng nhập, ) File web.php, điều khiển route view Thư mục storage, chứa file biên soạn blade templates , file based sessions, file caches, file sinh từ project + Thư mục app, dùng để chứa file sinh từ project +Thư mục framework, chứa file sinh từ framework caches + Thư mục logs, chứa file logs + Thư mục /storage/app/public, lưu file người dùng tạo hình ảnh Thư mục tests, chứa file tests, PHPUnit test Thư mục vendor, chứa thư viện Composer 2.4 Tìm hiểu mơ hình MVC: - MVC từ viết tắt từ Model – View – Controller Đây mơ hình thiết kế sử dụng kỹ thuật phần mềm Mơ hình source code thành phần, tương ứng từ Mỗi từ tương ứng với hoạt động tách biệt mơ hình - Model (M): Là phận có chức lưu trữ tồn liệu ứng dụng Bộ phận cầu nối thành phần bên View Controller Model thể hình thức sở liệu có đơn giản file XML bình thường Model thể rõ thao tác với sở liệu cho phép xem, truy xuất, xử lý liệu,… - View (V): Đây phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng lấy thông tin liệu MVC thông qua thao tác truy vấn tìm kiếm sử dụng thơng qua website - Controller (C): Bộ phận có nhiệm vụ xử lý yêu cầu người dùng đưa đến thơng qua view Từ đó, C đưa liệu phù hợp với người dùng Bên cạnh đó, Controller cịn có chức kết nối với model Hình 1.1 Mơ hình MVC -Ưu điểm nhược điểm mơ hình MVC +Ưu điểm : — Mơ hình MVC quy hoạch class/function vào thành phần riêng biêt Controller - Model - View, việc làm cho q trình phát triển - quản lý - vận hành bảo trì web diễn thuận lợi hơn, tạo chức chuyên biệt hoá đồng thời kiểm soát luồng xử lý — Trình tự xử lý rõ ràng, nhiệm vụ riêng biệt, độc lập với thành phần khác thành phần tương tác với — Mơ hình triển khai rõ ràng, mạch lạc, xử lý nghiệp vụ tốt, dễ dàng triển khai ứng dụng vừa + Nhược điểm : — MVC thường sử dụng vào dự án lớn Do đó, với dự án nhỏ, mơ hình MVC gây cồng kềnh, tốn thời gian trình phát triển thời gian trung chuyển liệu — Phân chia công việc nghiệp vụ thành phần khơng đồng đều, Model phải xử lý nhiều tác vụ - Mơ hình MVC Laravel + Model: Hình Mơ hình DFD mua hàng - Mơ hình DFD giao hàng: Hình Mơ hình DFD giao hàng - Mơ hình DFD thống kê: Hình Mơ hình DFD thơng kê MƠ HÌNH BFD (Business Function Diagram) 8.1 Giới thiệu mơ hình BFD Mơ hình phân rã chức (BFD – Business Function Diagram) công cụ biểu diễn việc phân rã có thứ bậc đơn giản cơng việc cần thực Mỗi công việc chia làm công việc con, số mức chia phụ thuộc kích cỡ độ phức tạp hệ thống 8.2 Mơ hình BFD hệ thống Hình Mơ hình BFD hệ thống CHƯƠNG : THIẾT KẾ HỆ THỐNG GIỚI THIỆU VỀ MƠ HÌNH QUAN HỆ - Mơ hình quan hệ liệu(Relational Data Model), biểu diễn sở liệu dạng tập hợp quan hệ, quan hệ bảng chứa giá trị liệu Mỗi hàng bảng đại diện cho giá trị liệu Các hàng bảng biểu thị mối quan hệ thực thể cụ thể Tên bảng cột giúp giải thích rõ ràng ý nghĩa giá trị hàng Dữ liệu biểu diễn dạng tập hợp quan hệ Trong mơ hình quan hệ, liệu lưu trữ dạng bảng 10 LƯỢC ĐỒ DIAGRAM admins roles id id username name name email email_verified_at remember_token password created_at updated_at images id product_images id id_product id_product id_galery id_image created_at updated_at galeries id url_image created_at updated_at order_cancels id id_order orders id id_user name address reports name_product id quantity id_inventory code id_order price id_order_cancel price_promotion total_money accept is_active created_at updated_at inventories id products id id_product id_category quantity id_promotion users categories description_product id name_product name_category id price_product slug_category username quantity_product created_at name image_product updated_at email slug_product password created_at is_admin updated_at email_verified_at remember_token address created_at updated_at promotions id name_promotion price_promotion start_date carts end_date id id_user id_product quantity total_money created_at updated_at Hình 3.1 Mơ hình BFD hệ thống 11 CÁC BẢNG TRONG CƠ SỞ DỮ LIỆU 11.1 Bảng người dùng(Users) Bảng người dùng bảnglưu trữ thông tin tài khoản người dùng bao gồm thông tin cá nhân thông tin đăng nhập ST Tên trường Kiểu Mô tả T Id Username Email Password Is_admin Email_verified_at Remember_token Address Created_at 10 Update_at 11 Name liệu Int unsigned Varchar Varchar Varchar Khóa Tài khoản người dùng Email người dùng Mật người dùng Kiểm tra user có phải admin Boolean khơng,nếu giá trị admin, giá trị tài khoản thường Timestamp Thời gian xác thực emaol Mã đăng nhập cho người dùng chọn nhớ Varchar tài khoản Varchar Địa người dùng Datetime Thời gian tạo liệu người dùng Thời gian thay đổi liệu người dùng Datetime lần cuối Varchar Tên người dùng Bảng Cấu trúc bảng Users 11.2 Bảng sản phẩm (products) Bảng sản phẩm bảng lưu trữ thông tin sản phẩm bao gồm: tên sản phẩm, mã sản phẩm, ảnh hiển thị thông tin sản phẩm ST Kiểu Tên trường Mơ tả T liệu Id Int unsigned Khóa Id_category Int unsigned Khóa ngoại liên kết với bảng categories Khóa ngoại liên kết với bảng Id_promotion Int unsigned promotions Description_produ Varchar Mô tả chi tiết sản phẩm ct Name_product Varchar Tên sản phẩm Price_product Decimal Giá sản phẩm Quantity_product Int unsigned Số lượng sản phẩm Image_product Varchat Hình ảnh sản phẩm Created_at Datetime Thời gian tạo 10 Update_at Datetime Thời gian cập nhật lần cuối 11 Slug_product Varchar Đường dẫn URL đến sản phẩm 12 Unit Varchar Đơn vị Bảng Cấu trúc bảng Products 11.3 Bảng sản phẩm (product_images) Bảng ảnh sản phẩm bảng lưu trữ ảnh sản phẩm chi tiết Quan hệ bảng sản phẩm chi tiết bảng ảnh sản phẩm quan hệ nhiều ST Kiểu Tên trường Mơ tả T liệu Id Int unsigned Khóa Id_product Id_image Int unsigned Khóa ngoại liên kết với bảng product Int unsigned Khóa ngoại liên kết với bảng image Bảng 3 Cấu trúc bảng Product_images 11.4 Bảng đơn hàng (orders) Bảng đơn hàng bảng lưu trữ thông tin đơn hàng người dùng bao gồm thơng tin cá nhân phương thức tốn ST Tên trường Kiểu liệu Mô tả T Id Int unsigned Khóa Id_user Int unsigned Khóa ngoại liên kết với bảng users Name Int Tên đơn hàng Addres Varchar Địa cụ thể Name_product Varchar Tên sản phẩm Quantity Tinyint Số lượng sản phẩm Đếm số lần mua hàng khách Code Int unsigned hàng Price Decimal Giá bán Khóa ngoại liên kết với bảng Price_promotion Decimal promotions 10 Toal_money Decimal Tổng tiền 11 Created_at Datetime Thời gian tạo 12 Update_at Datetime Thời gian cập nhật lần cuối Bảng Cấu trúc bảng Orders 11.5 Bảng quên mật (password_resets) Khi khách hàng quên mật tài khoản bấm vào quên mật để lấy lại password ST Tên trường Kiểu liệu Mô tả T Email Varchar Khóa Token Varchar Token Created_at Timestamp Thời gian tạo Bảng Cấu trúc bảng Password_reset 11.6 Bảng khuyến (promotions) Bảng khuyến chứa thông tin khuyến sản phẩm ST T Tên trường Kiểu liệu Mô tả Id Name_promotion Product_id Price_promotion Start_day End_day Int unsigned Varchar Int Decimal Date Date Khóa Tên chương trình khuyến Khóa ngoại liên kết với bảng product Giá khuyến Ngày bắt đầu khuyến Ngày kết thúc khuyến Bảng Cấu trúc bảng Promotions 11.7 Bảng giỏ hàng (Carts) Bảng giỏ hàng bảng chứa thông tin sản phẩm người dùng chọn đưa vào giỏ tổng tiền sản phẩm chọn ST T Tên trường Id Id_users Kiểu liệu Mô tả Int unsigned Khóa Int unsigned Khóa ngoại liên kết với bảng users Khóa ngoại liên kết với bảng Id_promotion Int unsigned promotions Tinyint Quantity Số lượng unsigned Total_money Decimal Tổng tiền Created_at Datetime Thời gian tạo Update_at Datetime Thời gian cập nhật lần cuối Bảng Cấu trúc bảng Carts CHƯƠNG 4: XÂY DỰNG CHƯƠNG TRÌNH 12 GIAO DIỆN ỨNG DỤNG - Giao diện đăng nhập Hình Giao diện đăng nhập - Giao diện đăng ký tài khoản Hình Giao diện đăng ký tài khoản - Giao diện reset password xác nhận cách nhận email xác nhận đổi mật Hình Giao diện reset pasword - Giao diện trang chủ: Chia làm phần chính: + Phần Header chứa logo, banner điều hướng trang web giúp điều hướng tới trang khác + Phần Content giữa: hiển thị sản phẩm, phần sidebar bên phải giúp tìm kiếm theo danh mục sản phẩm + Phần Footer: Chứa thông tin cửa hàng email, số điện thoại, mở cửa, … Hình 4 Giao diện trang chủ - Giao diện trang chi tiết sản phẩm - Giao diện giỏ hàng: Bao gồm chức liệt kê thông tin sản phẩm đặt, cập nhật số lượng sản phẩm, xóa sản phẩm khỏi giỏ Hình Giao diện chi tiết sản phẩm - Giao diện trang tốn: Bao gồm thơng tin sản phẩm đặt trường input để user nhập thông tin tốn vào để tiến hành tốn Hình Giao diện tốn - Trang thơng tin User Bao gồm thơng tin user, có chức update thông tin hủy đơn hàng Hình Giao diện thơng tin khách hàng - Giao diện đăng nhập Admin Hình Giao diện đăng nhập Admin - Giao diện trang quản trị Admin: Có chức quản lý tất thơng tin user, sản phẩm, hình ảnh, đơn hàng, … + Bao gồm chức chỉnh sửa thơng tin phần quản lý Hình Giao diện trang quản trị - Trang quản lý user: Liệt kê thơng tin user, có chức cập nhật lại thơng tin user Hình 10 Giao diện quản lý Users - Giao diện quản lý danh mục sản phẩm Hình 11 Giao diện dang mục sản phẩm - Giao diện thơng tin sản phẩm Hình 12 Giao diện thơng tin sản phẩm - Giao diện hình ảnh sản phẩm Hình 13 Giao diện hình ảnh sản phẩm - Giao diện quản lý đơn hàng: có chế độ chấp nhận giao hàng chưa chấp nhận giao hàng Hình 14 Giao diện quản lý đơn hàng - Giao diện đơn hàng hủy Hình 15 Giao diện đơn hàng hủy TÀI LIỆU THAM KHẢO [1] “PHP Wikipedia”, https://en.wikipedia.org/wiki/PHP [2] ‘Laravel Version Documentation”, https://laravel.com/docs/7 [3] “Laravel Wikipedia”, https://en.wikipedia.org/wiki/Laravel [4] “https://www.w3schools.com” [5] https://www.guru99.com/php-mvc-frameworks.html ... bảo tận tình chu đáo thầy cơ, đến chúng em hồn thành đề tài: “TÌM HIỂU PHP, MVC VÀ BOOTSTRAP XÂY DỰNG ỨNG DỤNG WEBSITE MUA BÁN NÔNG SẢN” Đặc biệt chúng em xin gửi lời cảm ơn chân thành tới cô giáo... VỀ ĐỀ TÀI MỤC TIÊU VÀ YÊU CẦU: 1.1 Mục tiêu - Xây dựng ứng dụng website mua bán nông sản - Hệ thống cần thực chức sau: + Quản lý người mua hàng + Quản lý sản phẩm + Quản lý bán hàng + Quản lý... sản phẩm đơn hàng 1.2 Yêu cầu - Xây dựng giao diện trang dụng - Xây dựng trang chủ - Phân quyền nhóm người dùng - Hiển thị thơng tin sản phẩm chi tiết sản phẩm - Thêm xoá sửa sản phẩm - Xây dựng