BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN PHẦN MỀM MÃ NGUỒN MỞ XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO Giảng viên giảng dạy Nguyễn Thị Hồng Sinh viên thực.
CƠ SỞ LÝ THUYẾT
Mã nguồn mở là gì
Phần mềm mã nguồn mở (Open Source Software - OSS) cho phép công chúng truy cập và chỉnh sửa mã nguồn, tức là nó hoàn toàn "mở" Ngược lại, phần mềm "đóng" hay "độc quyền" không cho phép người dùng xem hoặc thay đổi mã nguồn.
Mã nguồn là thành phần ẩn sau phần mềm, cung cấp hướng dẫn cho cách thức hoạt động và tính năng của nó, mà người dùng không thể trực tiếp nhìn thấy.
Phần mềm mã nguồn mở cho phép lập trình viên hợp tác để cải thiện sản phẩm thông qua việc tìm và sửa lỗi, cập nhật công nghệ mới và phát triển tính năng mới Hoạt động nhóm trong các dự án mã nguồn mở mang lại lợi ích như sửa lỗi nhanh chóng, bổ sung tính năng thường xuyên, đảm bảo phần mềm ổn định hơn và cung cấp bản vá bảo mật kịp thời hơn so với phần mềm độc quyền.
Nhiều phần mềm mã nguồn mở (OSS) áp dụng các phiên bản hoặc biến thể của Giấy phép Công cộng GNU (GPL) GPL có thể được hiểu như một dạng tài sản công, cho phép bất kỳ ai chỉnh sửa, cập nhật và sử dụng lại các nội dung một cách tự do.
GPL cho phép lập trình viên và người dùng truy cập và sửa đổi mã nguồn, trong khi tài sản công cho phép sử dụng hình ảnh một cách tự do Phần GNU trong GNU GPL biểu thị quyền được phát triển cho các hệ thống GNU, một hệ điều hành mở và miễn phí, đóng vai trò quan trọng trong lĩnh vực công nghệ mã nguồn mở.
Một lợi ích nổi bật của phần mềm mã nguồn mở (OSS) là hoàn toàn miễn phí cho người dùng Tuy nhiên, một số phần mềm có thể yêu cầu chi phí bổ sung nếu người dùng cần các dịch vụ hỗ trợ kỹ thuật khác.
Các dự án mã nguồn mở ngày càng trở nên phổ biến trong cuộc sống hàng ngày Hệ điều hành iOS và Android đều được phát triển dựa trên các thành phần từ phần mềm mã nguồn mở.
Lập trình PHP
PHP, viết tắt của "Hypertext Preprocessor", là ngôn ngữ lập trình kịch bản chạy ở phía server, tạo ra mã HTML cho client Qua nhiều phiên bản, PHP đã được tối ưu hóa cho ứng dụng web với cú pháp rõ ràng, tốc độ nhanh và dễ học, trở thành ngôn ngữ lập trình web phổ biến và được ưa chuộng.
PHP hoạt động trên môi trường Webserver và quản lý dữ liệu thông qua hệ quản trị cơ sở dữ liệu Do đó, PHP thường được sử dụng cùng với Apache, MySQL và hệ điều hành Linux, tạo thành một bộ công nghệ LAMP phổ biến.
Apache là phần mềm máy chủ web, có chức năng nhận yêu cầu từ trình duyệt người dùng, chuyển giao cho PHP để xử lý và gửi kết quả trở lại trình duyệt.
MySQL, giống như các hệ quản trị cơ sở dữ liệu khác như Postgres, Oracle và SQL Server, đóng vai trò quan trọng trong việc lưu trữ và truy vấn dữ liệu.
Linux là một hệ điều hành mã nguồn mở phổ biến, thường được sử dụng cho các webserver Các phiên bản phổ biến nhất của Linux bao gồm RedHat Enterprise Linux và Ubuntu.
Lavarel famework
Framework là thư viện các lớp hoàn chỉnh, cung cấp bộ khung cho việc phát triển phần mềm ứng dụng Nó giống như tập hợp các "vật liệu" cần thiết cho lập trình viên, giúp tiết kiệm thời gian thiết kế ban đầu Nhờ đó, lập trình viên chỉ cần tìm hiểu và sử dụng các thành phần này để kết hợp và tạo ra sản phẩm cuối cùng.
3.2 Lịch sử phát triển Famework
Taylor Otwell đã phát triển Laravel nhằm cung cấp một giải pháp hiện đại hơn cho khung CodeIgniter, khắc phục những thiếu sót như không hỗ trợ tích hợp xác thực và ủy quyền người dùng Bản phát hành beta đầu tiên của Laravel ra mắt vào ngày 9 tháng 6 năm 2011, đánh dấu bước khởi đầu quan trọng cho sự phát triển của framework này.
Laravel 1, ra mắt trong cùng tháng, cung cấp hỗ trợ tích hợp cho các tính năng như xác thực, bản địa hóa, mô hình, khung nhìn, phiên, định tuyến và nhiều cơ chế khác Tuy nhiên, nó vẫn thiếu hỗ trợ cho các bộ điều khiển, điều này ngăn cản nó trở thành một khung MVC thực thụ.
Laravel 2 được phát hành vào tháng 9 năm 2011, mang lại nhiều cải tiến từ tác giả và cộng đồng Các tính năng chính mới bao gồm hỗ trợ cho các bộ điều khiển, khiến cho Laravel 2 trở thành một khung công tác hoàn toàn theo chuẩn MVC, hỗ trợ tích hợp cho nguyên tắc điều khiển đảo ngược (IoC) và một hệ thống tạo khuôn mẫu có tên là Blade Như một nhược điểm, hỗ trợ cho các gói của bên thứ ba đã bị xóa trong Laravel 2.
Laravel 3 được phát hành vào tháng 2 năm 2012 với một loạt các tính năng mới bao gồm giao diện dòng lệnh (CLI) có tên Artisan, hỗ trợ tích hợp cho nhiều hệ thống quản lý cơ sở dữ liệu, di chuyển cơ sở dữ liệu như một hình thức kiểm soát phiên bản cho bố cục cơ sở dữ liệu, hỗ trợ xử lý các sự kiện, và một hệ thống đóng gói được gọi là Gói.
Sự gia tăng cơ sở người dùng và mức độ phổ biến của Laravel xếp hàng với việc phát hành Laravel 3.
Laravel 4, với tên mã Illuminate, được phát hành vào tháng 5 năm 2013 như một bản viết lại hoàn chỉnh của khung công tác Laravel Phiên bản này đã chuyển đổi bố cục thành các gói riêng biệt, phân phối qua Composer, giúp cải thiện khả năng mở rộng Laravel 4 cũng có lịch phát hành chính thức thường xuyên, kéo dài sáu tháng giữa các phiên bản điểm nhỏ Những tính năng mới nổi bật bao gồm khả năng tạo cơ sở dữ liệu cho việc dân số ban đầu, hỗ trợ hàng đợi tin nhắn, tích hợp gửi nhiều loại email khác nhau và khả năng xóa các bản ghi cơ sở dữ liệu bị trì hoãn xóa mềm.
Laravel 5 đã được phát hành vào tháng 2 năm 2015 do kết quả của những thay đổi nội bộ đã kết thúc trong việc đánh số lại bản phát hành Laravel 4.3 trong tương lai Các tính năng mới trong bản phát hành Laravel 5 bao gồm hỗ trợ lên lịch các tác vụ được thực hiện định kỳ thông qua gói có tên là Trình lập lịch biểu, lớp trừu tượng có tên Flysystem cho phép lưu trữ từ xa giống như các hệ thống tệp cục bộ, cải thiện xử lý tài sản gói thông qua Elixir và đơn giản hóa xác thực xử lý bên ngoài thông qua gói Socialite tùy chọn. Laravel 5 cũng giới thiệu cấu trúc cây thư mục nội bộ mới cho các ứng dụng được phát triển
Laravel 5.1, được phát hành vào tháng 6 năm 2015, là phiên bản đầu tiên của Laravel nhận được hỗ trợ dài hạn (LTS) Các phiên bản LTS mới đã được lên kế hoạch hai năm một lần.
Laravel 5.3 được phát hành vào ngày 23 tháng 8 năm 2016 Các tính năng mới trong 5.3 được tập trung vào việc cải thiện tốc độ của nhà phát triển bằng cách bổ sung thêm các cải tiến ngoài hộp cho các tác vụ thông thường.
Laravel 5.4 được phát hành vào ngày 24 tháng 1 năm 2017, với nhiều tính năng mới như Laravel Dusk, Laravel Mix, Blade Linh kiện và Slots, Email Markdown, Mặt tiền tự động, Cải tiến tuyến đường, Nhắn tin theo thứ tự cao hơn cho Bộ sưu tập và nhiều tính năng khác.
Laravel 6.0 được phát hành vào ngày 3 tháng 9 năm 2019, tạo mã thay đổi kế hoạch chi tiết, giới thiệu phiên bản ngữ nghĩa, khả năng tương thích với Laravel Vapor, phản hồi ủy quyền được cải thiện, phần mềm trung gian công việc được cải thiện, bộ sưu tập lười biếng và cải tiến truy vấn phụ Giàn giáo frontend đã được gỡ bỏ khỏi gói chính và chuyển vào gói laravel / ui.
Laravel 7.0 được phát hành vào ngày 3 tháng 3 năm 2020, với các tính năng mới như Laravel Sanctum, Custom Eloquent Casts, Blade Element Tags, Fluent StringOperations và Route Model Binding.
3.3 Ưu nhược điểm của famework
Utilizing the latest features of PHP is made easier with Laravel 5, allowing developers to leverage advancements such as Namespaces, Interfaces, Overloading, Anonymous Functions, and Shorter Array Syntax.
Laravel sở hữu nguồn tài nguyên phong phú và dễ tiếp cận, giúp lập trình viên dễ dàng tham khảo tài liệu đa dạng Mỗi phiên bản phát hành đều đi kèm với tài liệu phù hợp, hỗ trợ tối ưu cho việc phát triển ứng dụng.
Laravel tích hợp dễ dàng với dịch vụ email nhờ vào API sạch của thư viện SwiftMailer, cho phép bạn gửi email qua các dịch vụ đám mây hoặc máy chủ local một cách hiệu quả.
Laravel nổi bật với tốc độ xử lý nhanh, giúp việc tạo lập website và các dự án lớn trở nên hiệu quả và nhanh chóng Chính vì lý do này, nhiều công ty công nghệ và lập trình viên đã lựa chọn Laravel để phát triển sản phẩm của họ.
THIẾT KẾ WEBSITE
Phần giao diện của User
Hình 3.1: Giao diện trang chủ
Trang chủ của website được thiết kế với giao diện thân thiện, bao gồm một Slider động hiển thị hình ảnh sản phẩm tiêu biểu Bên trái là danh mục sản phẩm, trong khi giữa trang là danh mục các sản phẩm mới Phía trên có thanh tìm kiếm sản phẩm cùng với các phần chức năng như Giỏ hàng, Đăng ký và Đăng nhập Dưới cùng là thông tin cần thiết của website.
Dưới đây là hình ảnh chi tiết hướng dẫn người dùng về quy trình đăng ký tài khoản mới hoặc đăng nhập nếu đã có tài khoản Sau khi hoàn tất đăng ký, người dùng sẽ được tự động đăng nhập vào trang chính của website.
Hình 3.2 : Giao diện đăng kí và đăng nhập
Hình 3.3 : Giao diện danh mục sản phẩm
Khi khách hàng thực hiện tìm kiếm sản phẩm bằng cách nhập từ khóa vào ô tìm kiếm, hệ thống sẽ trả về kết quả chính xác theo yêu cầu của người dùng Ví dụ, khi tìm kiếm với từ khóa "Áo AC", người dùng sẽ nhận được danh sách sản phẩm phù hợp với từ khóa đã nhập.
Hình 1.4 : Giao diện tìm kiếm sản phẩm
Sau khi tìm kiếm và chọn sản phẩm, người dùng sẽ thấy thông tin chi tiết bao gồm tên sản phẩm, giá, mô tả, tình trạng hàng hóa và danh mục sản phẩm Bên cạnh đó, người dùng có thể chọn số lượng và nhấn nút "Thêm vào giỏ hàng" Dưới phần mô tả, sẽ có các sản phẩm liên quan để khách hàng tham khảo thêm.
Hình 3.5 : Giao diện chi tiết sản phẩm
Sau khi lựa chọn các sản phẩm yêu thích, người dùng nhấn nút "Thêm vào giỏ hàng" Sản phẩm sẽ được thêm vào giỏ hàng và website sẽ chuyển sang giao diện chi tiết sản phẩm Tại đây, người dùng sẽ thấy danh sách các sản phẩm đã chọn cùng với thông tin hóa đơn, bao gồm tổng tiền, tổng tiền đã bao gồm thuế, giá trị sản phẩm và phí vận chuyển.
Hình 3.6 : Giao diện giỏ hàng
Sau khi nhấn nút thanh toán, website sẽ chuyển đến giao diện thông tin gửi hàng Tại đây, khách hàng sẽ thấy một mẫu đơn yêu cầu cung cấp các thông tin cần thiết cho đơn hàng, bao gồm email, số điện thoại, địa chỉ và họ tên Bên cạnh đó, khách hàng cũng có thể ghi chú thêm những yêu cầu đặc biệt để giúp người giao hàng thuận tiện hơn, chẳng hạn như giao vào giờ hành chính.
Hình 3.7 : Giao diện thông tin gửi hàng
Sau khi hoàn tất việc điền thông tin giao hàng, bạn sẽ trở lại giao diện giỏ hàng Tại đây, phần tổng tiền sẽ được thay thế bằng lựa chọn phương thức thanh toán Có hai phương thức thanh toán cho bạn lựa chọn: thanh toán khi nhận hàng (COD) và thanh toán qua thẻ ATM, trong đó cần cung cấp thông tin của chủ thẻ như tên và số tài khoản.
…) Quan trọng là nội dung chuyển khoản phải có để nhân viên có thể kiểm tra đơn hàng và sau đó Đặt hàng
Hình 3.8 : Giao diện kiểm tra lại thông tin đơn hàng và phương thức thanh toán
Sau khi Đặt hàng, sẽ hiển thị thông báo như hình bên dưới đây
Hình 3.9 : Kết quả sau khi bấm “Đặt hàng”
Bên dưới đây là thông tin của liên lạc của cửa hàng như địa chỉ, số điện thoại:
Hình 3.10: Thông tin liên lạc của cửa hàng
Phần giao diện và tác vụ của Admin
Giao diện đăng nhập dành cho admin sẽ khác biệt so với khách hàng, như hình dưới đây thể hiện Sau khi admin đăng nhập thành công, họ sẽ được chuyển đến giao diện trang chủ, được mô tả trong hình 3.11.
Hình 3.11 : Giao diện đăng nhập của Admin
Khi admin đăng nhập sai thông tin sẽ hiển thị thông báo như hình:
Hình 3.12 : Kết quả đăng nhập sai tài khoản của Admin
Hình 3.13 : Giao diện trang Admin
Danh sách các Slider hiển thị trên giao diện trang chủ bao gồm tên Slider, mô tả và hình ảnh Khách hàng có thể thêm một Slider mới bằng cách nhấn nút "Add" ở góc phải Sau khi điền đầy đủ thông tin và lưu lại, Slider mới sẽ được thêm vào danh sách và xuất hiện trên banner động của website.
Hình 3.14 : Giao diện trang chưa thông tin hình ảnh trong Slider ở trang chủ
Hình 3.15 : Giao diện Add thông tin của 1 Slider mới
Phần Edit Slider cho phép chỉnh sửa thông tin và hình ảnh của Slider mà không cần xóa Slider hiện có Tương tự như chức năng Add Slider, các textbox đã được điền sẵn thông tin bởi admin, chỉ cần chỉnh sửa và lưu lại Sau khi chỉnh sửa, Slider sẽ hiển thị đúng thông tin mà admin đã cập nhật.
Bên dưới là chức năng xóa Slider không cần thiết theo mong muốn của admin, nếu như admin không dùng chức năng edit.
Dưới đây là danh sách thông tin liên lạc của cửa hàng, bao gồm các thao tác thêm, sửa và xóa Khi thêm thông tin, bạn cần cung cấp keyname cùng với thông tin tương ứng Các thao tác sửa và xóa cũng thực hiện tương tự như phần Slider đã đề cập ở trên.
Hình 3.18 : Danh sách thông tin liên lạc của cửa hàng
Danh sách dưới đây bao gồm các sản phẩm với thông tin chi tiết như tên, giá, hình ảnh và danh mục sản phẩm Chức năng thêm, sửa, xóa sản phẩm tương tự như các tính năng trong phần Slider và Thông tin liên lạc.
Hình 3.19 : Danh sách sản phẩm
Hình 3.20 : Danh sách các danh mục của sản phẩm
Hình trên là danh sách Danh mục sản phẩm chỉ có tên của danh mục.
Danh sách đơn hàng đã nhận bao gồm tên khách hàng, tổng tiền và tình trạng đơn hàng Khi người dùng chọn một đơn hàng, giao diện chi tiết sẽ hiển thị thông tin mà khách hàng đã cung cấp trong form Thông tin trên trang Giỏ hàng.
Hình 3.21 : Danh sách đơn hàng đã nhận được
Hình 3.22 : Chi tiết của một đơn hàng
Nếu admin cần xử lý đơn hàng bị hủy hoặc khách hàng không muốn nhận hàng nữa, họ có thể xóa đơn hàng này thông qua giao diện xóa đơn hàng như hình dưới.
Hình 3.24 : Danh sách các admin và vai trò của admin đó
Hình 3.22 trình bày danh sách các quản trị viên (admin) với các vai trò khác nhau trên một trang web Ví dụ, admin có thể có quyền quyết định toàn bộ các tác vụ trong trang quản trị, trong khi vai trò content chỉ được phép chỉnh sửa các nội dung liên quan trong trang admin.
Giao diện chỉnh sửa thông tin và vai trò của admin chỉ cho phép người dùng có vai trò admin thực hiện việc chỉnh sửa.
Hình 3.25 : Chỉnh sửa thông tin và vai trò của admin
Để xóa một user admin không còn quản lý website, admin hiện tại có thể sử dụng chức năng xóa user.
Hình 3.26 : Xóa admin trong danh sách
Để thêm một user admin mới, bạn thực hiện các bước tương tự như khi thêm các phần khác trong trang admin, bao gồm việc nhập Tên, Email, Mật khẩu và xác định vai trò của user admin mới.
Hình 3.27 : Add thêm admin mới
Hình 3.28 : Danh sách phân quyền được cấp cho admin
Danh sách phân quyền trong hình trên sẽ cấp cho admin những vai trò cụ thể trong trang quản trị Để thêm quyền mới, chỉ cần nhấn vào nút "add", và để xóa quyền, hãy chọn nút "delete" trong cột tùy chọn.
Hình 3.29 : Xóa phân quyền đã chọn
Hình 3.30 : Các quyền được cấp cho vai trò của admin
Trong phần phân quyền của người dùng admin, việc xác định quyền hạn sẽ quyết định các công việc mà admin có thể thực hiện, bao gồm thay đổi, chỉnh sửa, xóa hoặc quản lý nội dung hiển thị trên trang web.
Trong phần Thêm phân quyền mới, người dùng sẽ nhập tên phân quyền, mô tả chi tiết về phân quyền đó và lựa chọn các công việc mà phân quyền có thể thực hiện hoặc không được phép thực hiện trong trang quản trị.
Hình 3.31 : Add vai trò Admin mới với các quyền kèm theo
Hình dưới là khi một user admin không được cấp quyền cho công việc gì đó, khi vào sẽ hiển thị thông báo như bên dưới.
Hình 3.32 : User không được phân quyền
Phần code thực hiện
Hình 3.33 : Code thêm sửa xóa danh mục sản phẩm
Hình 3.34 : Code thêm sửa xóa danh mục sản phẩm
Hình 3.35 : Code thêm sửa xóa danh mục sản phẩm
Hình 3.36 : Code đăng nhập đăng kí cho admin
Hình 3.37 : Code quản lí đơn hàng bên Admin
Hình 3.38 : Code quản lí đơn hàng bên Admin
Hình 3.39 : Code quản lý xem thêm sửa xóa sản phẩm bên admin
Hình 3.40 : Code quản lý xem thêm sửa xóa sản phẩm bên admin
Hình 3.41 : Code quản lý xem thêm sửa xóa sản phẩm bên admin
Hình 3.42 : Code quản lý xem thêm sửa xóa sản phẩm bên admin
Hình 3.43 : Code quản lý xem thêm sửa xóa sản phẩm bên admin
Hình 3.44 : Code quản lý vai trò bên admin
Hình 3.45 : Code quản lý vai trò bên admin
Hình 3.46 : Code quản lý silder
Hình 3.47 : Code quản lý silder
Hình 3.48 : Code quản lý silder
Hình 3.49 : Code quản lý user bên admin
Hình 3.50 : Code quản lý user bên admin
Hình 3.51 : Code quản lý user bên admin
Hình 3.52 : Code quản lý setting bên admin
Hình 3.53 : Code quản lý setting bên admin
Hình 3.54 : Code render trang home bên phía khách hàng
Hình 3.55 : Code render trang home bên phía khách hàng
Hình 3.56 : Code đơn hàng bên phía khách hàng
Hình 3.57 : Code đơn hàng bên phía khách hàng
Hình 3.58 : Code thanh toán đơn hàng
Hình 3.59 : Code thanh toán đơn hàng
Hình 3.60 : Code thanh toán đơn hàng
Hình 3.61 : Code thanh toán đơn hàng
Hình 3.62 : Code thanh toán đơn hàng