Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
8,99 MB
Nội dung
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC - KỸ THUẬT MÁY TÍNH Đồ án tổng hợp - hướng cơng nghệ phần mềm(CO3103) Đề tài: Quản lý khu ẩm thực L06 Nhóm X Giảng viên: Bùi Cơng Tuấn Sinh viên thực hiện: Nguyễn Văn Thương Nguyễn Văn Minh Hải Lê Hồng Nhât Nguyễn Văn Quốc Trần Quốc Việt TP HỒ CHÍ MINH, THÁNG 11/2021 - 1915439 1913260 1914474 1914864 1915919 Mục lục Tổng quan dự án 1.1 Đối tượng website 1.2 Đặc điểm website 1.3 Các tính dự án 1.4 Phân công công việc Công nghệ sử dụng Giao diện website 3.1 3.2 Giao diện quản trị website 3.1.1 Trang đăng nhập cho admin 3.1.2 Trang quản lý, thống kê doanh thu 3.1.3 Trang quản lý 11 3.1.4 Trang quản lý danh mục 12 3.1.5 Trang quản lý tài khoản 13 3.1.6 Trang cài đặt, thay đổi, cập nhật thông tin tài khoản 15 3.1.7 Trang giới thiệu trang web 16 3.1.8 ScreenFlow trang/giao diện quản trị 17 Giao diện người dùng 18 3.2.1 Trang chủ 18 3.2.2 Phần xem danh sách ăn 19 3.2.3 Trang chi tiết sản phẩm 20 3.2.4 Trang giỏ hàng 21 3.2.5 Trang toán 22 3.2.6 Trang đăng ký đăng nhập 24 3.2.7 Trang người dùng (user) 26 3.2.8 ScreenFlow trang/giao diện người dùng 30 Detail for class diagram description: 4.1 4.2 31 Class diagram 31 4.1.1 Class diagram for Admin 31 4.1.2 Classdiagram for Client 34 Database 38 4.2.1 38 Database host Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM 4.2.2 Database connecction 39 4.2.3 Database Diagram 40 Git log commit 41 4.3.1 Các commit vào main 41 4.3.2 Chi tiết commit 42 4.4 Tổng kết 44 4.5 Lời cảm ơn 46 4.3 TÀI LIỆU THAM KHẢO Khoa Khoa học - Kỹ thuật Máy tính 46 Trang /47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Giới thiệu đề tài Website "Quản lý khu ẩm thực L06 Nhóm X" trang web hỗ trợ quản lý cho khu ẩm thực trường đại học X Tại khu ẩm thực trường đại học X, có thực trạng là: khách hàng( đa số sinh viên) thường phải đợi khoảng thời gian lâu mua sản phẩm đông đúc sinh viên mua lúc; khu ẩm thực phải phục vụ liên tục vào cao điểm(đơng khách hàng), có lại nhàn rỗi khơng có khách hàng ghé mua Xuất phát từ vấn đề trên, nhóm chúng em đề xuất giải pháp xây dựng website giúp khách hàng order online , vừa giúp khu ẩm thực phân phối thời gian chuẩn bị sản phẩm, vừa tránh tình trạng khách hàng phải xếp hàng đợi Dự án giúp cho khách mua ăn mà muốn cách truy cập website.Thay gọi nhân viên để đặt ăn truyền thống khách hàng cần vào web app (bằng URL QR code) để đặt trực tuyến, chọn sản phẩm muốn mua bấm nút mua hàng Hệ thống cho phép khách hàng tìm kiếm ăn theo danh mục, theo tên, combo, toán theo nhiều loại phương thức khác Vì sử dụng web app giúp khách hàng đặt ăn đơn giản hơn, an toàn đặc biệt bối cảnh COVID Khách hàng toán đơn hàng ví điện tử, thẻ ngân hàng Sau nhận sản phẩm khu ẩm thực Bên cạnh giao diện bắt mắt cho khánh hàng order thứ, điều trội khơng giao diện thân thiện, dễ sử dụng dành cho phía khu ẩm thực, thay lần cập nhật ăn, danh mục món, phải loay hoay sửa lại bảng menu giới thiệu sản phẩm thống kê tay doanh thu ngày , với dự án dẽ giúp cho việc quản lý khu ẩm thực trở nên dễ dàng Hệ thống cho phép phận quản trị website lên danh mục ăn, quản lí ăn, quản lí tài khoản, thống kê doanh thu theo tháng/năm Khoa Khoa học - Kỹ thuật Máy tính Trang 1/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 1.1 Trường ĐH Bách Khoa TP.HCM Tổng quan dự án Đối tượng website Website xây dựng phục vụ hai đối tượng Admin( nhà quản trị) Khách hàng với chức sau: ➢ Admin • Đăng nhập Website • Quản lí ăn • Quản lý tài khoản • Quản lý danh mục ăn • Thống kê doanh thu theo ngày, tháng, năm • Thay đổi, cập nhật thơng tin tài khoản ➢ Khách hàng: ➢ Guest: Khách viếng thăm • Xem thơng tin sản phẩm • Đăng kí thành viên ➢ User: Thành viên • Có quyền đăng ký, đăng nhập, đăng xuất, đổi mật • Chỉnh sửa, thay đổi, cập nhật thơng tin người dùng • Xem tìm kiếm ăn theo từ khố, danh mục, giá • Đặt mua sản phẩm(Thêm vào giỏ hàng, tuỳ chỉnh số sản phẩm giỏ hàng, tốn) • Xem lịch sử đặt 1.2 Đặc điểm website Website quản lý khu ẩm thực đơn giản, thân thiện, dễ sử dụn Bên cạnh cho phép khác hàng thao tác, sử dụng chức người dùng cách dễ dàng, website cịn hỗ trợ mạnh mẽ quản lý hoạt động khu ẩm thực Khoa Khoa học - Kỹ thuật Máy tính Trang 2/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Website thiết kế theo kiểu SPA(single-page application) giúp mang lại trải nghiệm tốt cho người dùng: • Giao diện hài hồ, thân thiện, giúp người dùng dễ dàng sử dụng • Tốc độ xử lý tính tốn, tìm kiếm nhanh • Tốc độ load trang nhanh 1.3 Các tính dự án ➢ Đăng kí, đăng nhập, đăng xuất • Cho phép khách hàng đăng kí đăng nhập vào hệ thống ➢ Xem cập nhật thơng tin người dùng • Cho phép chỉnh sửa, cập nhật thông tin tin tài khoản ➢ Xem, tìm kiếm ăn, lọc theo giá, từ khố • Khách hàng tìm kiếm ăn họ mong muốn ➢ Đặt • Cho phép khách hàng đặt ăn • Khách hàng tốn hố đơn để hồn tất đặt ➢ Thanh tốn • Khách hàng chỉnh sửa số lượng giỏ hàng thực tốn với nhiều hình thức khác ➢ Quản trị website dành cho admin • Quản lý tài khoản: quản trị viên tạo tài khoản cho nhân viên, hay cho admin khác hệ thống • Quản lý danh mục: quản trị viên thêm mới, xố, sửa danh mục sản phẩm • Quản lí ăn: quản trị viên thêm mới, xố sửa ăn vào danh sách ăn • Thống kê doanh thu:quản trị viên thống kê doanh thu theo tháng/năm • Xem danh sách hoá đơn ngày, xem tìm kiếm hố đơn theo ngày • Cài đặt, chỉnh sửa mật khẩu, thông tin tài khoản Khoa Khoa học - Kỹ thuật Máy tính Trang 3/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 1.4 Trường ĐH Bách Khoa TP.HCM Phân công công việc Feature List Thành viên Đăng kí, đăng nhập, cập nhật thơng tin người dùng, Nguyễn Văn Minh lịch sử toán Hải Đặt món, chỉnh sửa số lượng giỏ hàng, tạo Lê Hồng Nhật database, phân quyền admin Xem, tìm kiếm ăn, xem chi tiết ăn Nguyễn Văn Quốc Thanh toán, header,footer Trần Quốc Việt Các chức quản trị dành cho admin Nguyễn Văn Thương Cơng nghệ sử dụng ➢ Thiết kế giao diện(Front-end) • HTML - CSS - JavaScript • Reactjs: React thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) Nó cho tốc độ phản hồi tuyệt vời user nhập liệu cách sử dụng phương pháp để render trang web Components công cụ phát triển Facebook Nó mắt công cụ JavaScript mã nguồn mở vào năm 2013 • Mơ tả chi tiết ưu điểm reactjs, độ trending ∗ Rất dễ dàng để tiếp cận: Nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS ∗ Chia nhỏ UI phức tạp thành component nhỏ, đơn giản hơn: Giúp phân tách rõ ràng nhiệm vụ component, dễ debug phát thay đổi component nhanh hơn.Tổ chức app trở nên rõ ràng, dễ hiểu ∗ Reactjs giúp việc viết đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta them vào đoạn HTML vào hàm render mà khơng cần phải nối chuỗi ∗ Nó có thư viện hỗ trợ khổng lồ: React có nhiều thư viện kèm để hỗ trợ code logic hơn, nhanh đẹp Chúng ta styed component, hiệu ứng css với vài dòng code Khoa Khoa học - Kỹ thuật Máy tính Trang 4/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM ∗ Render tầng server: Reactjs render ngồi trình dut trước, sau render liệu mà server trả sau đó, giúp tối ưu hóa thời gian tải trang Khi có liệu trả từ server khơng cần reload lại trang mà component liệu thay đổi load lại tự động ∗ Sự liên kết component thơng qua redux: Với redux liên kết component với dễ dàng hơn, chia sẻ cập nhật liệu cách đồng ➢ Database: • SQl server: SQL Server hệ quản trị sở liệu quan hệ (Rela- tional Database Management System (RDBMS) ) sử dụng câu lệnh SQL (Transact-SQL) để trao đổi liệu máy Client máy cài SQL Server Một RDBMS bao gồm databases, database engine ứng dụng dùng để quản lý liệu phận khác RDBMS • Mơ tả ưu điểm Sql server ∗ Có thể cài nhiều phiên MS SQL khác máy tính ∗ Có cloud free Azure dùng chung với lượng data khơng q lớn ∗ Giảm thiểu vấn đề tạm thời sở liệu ∗ Tách biệt đặc quyền bảo mật ➢ Xử lí back-end: • Nodejs (ExpressJs + Sequelize): NodeJS tảng xây dựng dựa V8 JavaScript Engine - trình thơng dịch thực thi mã JavaScript giúp việc xây dựng ứng dụng web trở nên đơn giản dễ dàng thực NodeJS sử dụng kiến trúc hướng kiện hướng kiện, mơ hình I/O khơng chặn làm cho nhẹ hiệu Hệ thống nén Node.js, npm, hệ thống thư viện mã nguồn mở lớn giới • Mơ tả ưu điểm lập trình Nodejs, Viết AP ExpressJS + Sequelize ∗ NodeJs có tốc độ xử lý nhanh nhờ chế xử lý bất đồng (non- blocking) Chúng ta dễ dàng xử lý hàng ngàn kết nối khoảng thời gian ngắn với async await ∗ NodeJs+ Express giúp ta dễ dàng mở rộng có nhu cầu phát triển Khoa Khoa học - Kỹ thuật Máy tính Trang 5/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM website ∗ Sự khác biệt Nodejs với ngôn ngữ lập trình back-end khác nhận xử lý nhiều kết nối với single-thread Nhờ đó, hệ thống xử lý sử dụng lượng RAM giúp trình xử Nodejs lý nhanh nhiều Chúng ta không cần cài đặt queue cho request gửi đến ∗ Có khả xử lý nhiều Requests lúc thời gian ngắn ∗ Sequelize ORM, giúp chuyển liệu từ dạng bảng sang dạng object Từ câu lệnh truy vấn dễ dàng theo dạng OOP ∗ Sequelize giúp tạo database, tạo table cmd, config tự động truyền tới sở liệu Nó phát triển mơi trường dev, test production, tự động chuyển đổi liên kết sql phù hợp với trạng thái Project sử dụng Ngồi liệu cịn test dạng seeder trước đem vào sử dụng thực tế ➢ Thanh tốn bên thứ Paypal Ở nhóm sử dụng paypal developer để kiểm tra tính tốn mơi trường developer Nhóm tạo tài khoản paypal developer để tốn sau đặt món, số tiền toán từ VNĐ chuyển sang USD để toán Sau tạo tài khoản, import paypal sdk vào file index.html thư mục public react-app Sau import sử dụng paypal tồn ứng dụng react Khoa Khoa học - Kỹ thuật Máy tính Trang 6/47 Đồ án tổng hợp hướng cơng nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Giao diện website Theo phân loại đối tượng website(Admin khách hàng) giao diện website phân thành hai loại giao diện quản trị giao diện người dùng 3.1 Giao diện quản trị website Giao diện quản trị cho admin gồm có trang: Đăng nhập dành cho admin; quản lý thống kê doanh thu; quản lý món; quản lý danh mục món; quản lý tài khoản nhân viên; cài đặt ,thay đổi, cập nhật thông tin tài khoản cho admin; Trang giới thiệu website 3.1.1 Trang đăng nhập cho admin ➢ Giao diện trang đăng nhập Khoa Khoa học - Kỹ thuật Máy tính Trang 7/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM ➢ Mô tả chức method Controller getListFoodbyName(name) Lọc danh sách ăn theo tên getListFoodByType(type) Lọc danh sách ăn theo cateogry updateFood (id, name, type, descripttion, Cập nhật thơng tin ăn price) removeFood(id) Xố ăn có id=id getallfoodAsync() Lấy tất ăn có DB getallCategoryAsync() Lấy tất danh mục có DB ordering (customerid, items, totalam- Lưu thơng tin đặt hàng vào DB ount) viewListOrder() Xem danh sách hố đơn viewOrderByCustomer( customerid) Xem lịch sử tốn Mơ tả chức method Entity Entity Thuộc tính Admin Có thuộc tính id(khố), thơng tin use- name,password,name, email, type Catefory Có thuộc tính id(khố) thơng tin name,imgur Customer Có thuộc tính id(khố),name, username, email, password,phone Food Có thuộc tính id(khố), name, descripttion, price, foodimage, quantityorder Order Có thuộc tính id(khố), orderdate,totalamount OrderItem Có thuộc tính id(khố),quantity,totalamount Payment Có thuộc tính id(khố),totalamount,paidby,paydate Khoa Khoa học - Kỹ thuật Máy tính Trang 33/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 4.1.2 Trường ĐH Bách Khoa TP.HCM Classdiagram for Client ➢ Ảnh class diagram cho trang khách hàng Link draw.io: https://drive.google.com/file/d/1Adi9KBGmt6MwUd8t8YQo23TOq7egR6Fk/ view?usp=sharing Hình 30: Class diagram for Client page Khoa Khoa học - Kỹ thuật Máy tính Trang 34/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM ➢ Mô tả chức method ClassDiagram cho Client Tên method Chức «interface»UserUI init(): void Hàm khởi tạo hình ứng dụng displayOrderFoodView(): void Hàm hiển thị chức đặt displayPaymentOrderView(): void Hàm hiển thị chức Thanh toán displayCartView() : void Hàm hiển thị chức giỏ hàng «interface»CartView displayCartUI(): void Hàm hiển thị giao diện giỏ hàng modifyOrderItemBtnOnclick (Dish, Hàm để thay đổi số lượng ăn String): void giỏ hàng displayProceedPaymentButton(): Phương thức hiển thị nút tốn void «interface»OrderFoodView displaySearchUI(): void Hàm để hiển thị giao diện tìm kiếm displayOrderUI(): void Hàm để hiển thị giao diện đặt «interface»PaymentOrderView displayPaymentUI(): void Ham để thị giao diện tốn «class»Search Search() Phương thức khởi tạo đối tượng Search getFoodData(string): List Phương thức để lấy thơng tin ăn thơng qua chuỗi tìm kiếm «class»Payment Payment() Phương thức để khởi tạo đối tượng Payment getOrder(int OrderID): Order Phương thức để lấy đơn hàng thông ID getListPaymentMethod(): Hàm để lấy danh sách phương thức list toán choosePaymentMethod(): string Phương thức để người dùng chọn phương thức toán paytheBill(data): bool Hàm để thực tốn hóa đơn «class»Item Item() Phương thức để khởi tạo đối tượng Item getQuantity(): int Hàm để lấy thông tin số lượng item setQuantity(int quantity): void Hàm để đặt số lượng item Khoa Khoa học - Kỹ thuật Máy tính Trang 35/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Tên method Trường ĐH Bách Khoa TP.HCM Chức «class»OrderManager OrderManager() Phương thức khởi tạo đối tượng OrderManager createOrder(string customerID): Phương thức tạo đơn đặt hngf với đầu vào bool CustomerID addItemToCart(Food data): bool Phương thức để thêm item vào giỏ hàng calculateBill(): float Phương thức để tính tốn tổng tiền hóa đơn «class»Order Order() Phương thức khởi tạo đối tượng Order getData(): Order Hàm để lấy thông tin đơn đặt hàng setData(Order data): void Hàm để đặt thông tin đơn hàng «interface»Food Food() Phương thức để khởi tạo đối tượng Food getFood(int foodID): list Hàm để lấy thơng tin ăn thông qua ID setFood(int foodID, list Hàm để đặt thơng tin ăn data): void «interface»UserUI displayLoginView() Hiển thị trang đăng nhập displayRegisterView() Hiển thị trang đăng ký Logout() Đăng xuất «interface»LoginView renderSignUpPage() Chuyển sang trang đăng ký handleChangeSignIn() Cập nhật thay đổi liệu form đăng nhập Login() Đăng nhập «interface»RegisterView renderSignInPage() Chuyển sáng trang đăng nhập handleChangeSignUp() Cập nhật thay đổi liệu form đăng ký Register() Đăng ký Khoa Khoa học - Kỹ thuật Máy tính Trang 36/47 Đồ án tổng hợp hướng cơng nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM «class»AccountController AccountController() Khởi tạo đối tượng requestLogin() Gửi yêu cầu đăng nhập requestRegister() Gửi yêu cầu đăng ký requestGetCustomerInfo() Gửi yêu cầu lấy thông tin người dùng requestUpdateCustomerInfo() Gửi yêu cầu cập nhật liệu requestChangePassword() Gửi yêu cầu thay đổi mật «class»AccountDB AccountDB() Khởi tạo đối tượng database findAccount() Tìm kiếm tài khoản email mật createAccount() Tạo tài khoản người dùng updateAccountInfo() Cập nhật thông tin tài khoản changePassword() Thay đổi mật «interface»customerInfoView displayCPView() Hiển thị modal thay đổi mật handleChangeInfo() Cập nhật thay đổi liệu form thay đổi thông tin khách hàng updateCustomerInfo() Cập nhật thông tin khách hàng «interface»ChangePasswordView displayCIView() Hiển thị modal thơng tin người dùng handleChangePassword() Cập nhật thay đổi liệu form thay đổi mật changePassword() Khoa Khoa học - Kỹ thuật Máy tính Thay đổi mật Trang 37/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 4.2 4.2.1 Trường ĐH Bách Khoa TP.HCM Database Database host ➢ Tạo database online sử dụng chung Hình 31: Host database somee.com Khoa Khoa học - Kỹ thuật Máy tính Trang 38/47 Đồ án tổng hợp hướng cơng nghệ phần mềm 2021 - 2022 4.2.2 Trường ĐH Bách Khoa TP.HCM Database connecction ➢ Mô tả cách kết nối sở liệu Trong file config.json dùng để lấy thông tin sở liệu kết nối Gồm có username, password, database, host dialect Vì trình sử dụng nên config phần development Hình 32: Config database Ở nhóm sử dụng ORM Sequelize để chuyển từ csdl dạng bảng thành Object để dễ dàng sử dụng Các Object tự động lưu folder models sau tạo bảng, bảng lưu folder migrations.2 folder có liên kết với Khi thao tác cần thao tác đối tượng object folder Models Khoa Khoa học - Kỹ thuật Máy tính Trang 39/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 33: Model migrations 4.2.3 Database Diagram Khoa Khoa học - Kỹ thuật Máy tính Trang 40/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM • Hình 34: Database diagram 4.3 Git log commit Đây link git project nhóm em https://github.com/ThuongNguyenVan158/ FoodCourt.git 4.3.1 Các commit vào main Chúng em chọn Spash and merge để merge vào nhánh main, nên log commit trông gọn nhiều Khoa Khoa học - Kỹ thuật Máy tính Trang 41/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 35: Git log commit Hình 36: Git log commit 4.3.2 Chi tiết commit Chi tiết commit chúng em squash and merge(appha version Beta version) ➢ Beta version Khoa Khoa học - Kỹ thuật Máy tính Trang 42/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 37: Git log commit Hình 38: Git log commit ➢ ampha version Khoa Khoa học - Kỹ thuật Máy tính Trang 43/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 39: Git log commit Hình 40: Git log commit 4.4 Tổng kết Do đại dịch covid 19, mơn học chuyển đổi hình thức phù hợp nhất- hình thức học online Tuy ban đầu có chút khó khăn, thành viên nhóm xa lạ với nhau, việc triển khai làm việc có chút ngượng ngùng Nhưng sau tuần làm việc, nhóm chúng em thích nghi hơn, triển Khoa Khoa học - Kỹ thuật Máy tính Trang 44/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 41: Git log commit khai meetting đặn hơn, phân chia công việc cụ thể, định hướng rõ ràng, rành mạch Nhờ mang lại kết tốt trình teamwork Reactjs ngôn ngữ thịnh hành Việc lựa chọn reactjs nodejs để hoàn thành đồ án ban đầu dựa vào độ trending ngôn ngữ Trong trình làm việc, nhóm chúng em cảm thấy ngơn ngữ phù hợp cho teamwork, vừa chia component, đơn giản hoá giao diện phức tạp, vừa code API xử lý backend song song với Frontend Sau xuyên xuốt gần tháng làm việc với nhau, nhóm chúng em đạt thành tự nho nhỏ, lần thực hành lập trình website, lần đầu hiểu thêm cách deploy website lên môi trường internet Đây thành nhóm chúng em https://font-end-project.herokuapp com Khoa Khoa học - Kỹ thuật Máy tính Trang 45/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 42: Git log commit Thực chức người dùng, cần truy cập trang website đăng ký, đăng nhập, thực chức Để thực chức Admin, cần thêm đuôi(/admin) vào link website Tài khoản admin email:admin123@gmail.com , Mật khẩu: 1234 4.5 Lời cảm ơn Để hồn thành đồ án này, trước hết nhóm em xin gửi cảm ơn chân thành, sâu sắc đến giảng viên phụ trách môn- người trang bị cho em kiến thức chun mơn, kinh nghiệm bổ ích, lời góp ý chân thành để hồn thành tốt mơn học Khoa Khoa học - Kỹ thuật Máy tính Trang 46/47 Đồ án tổng hợp hướng công nghệ phần mềm 2021 - 2022 Trường ĐH Bách Khoa TP.HCM Hình 43: Git log commit Khoa Khoa học - Kỹ thuật Máy tính Trang 47/47 ... mềm 20 21 - 20 22 Trường ĐH Bách Khoa TP.HCM Hình 33: Model migrations 4 .2. 3 Database Diagram Khoa Khoa học - Kỹ thuật Máy tính Trang 40/47 Đồ án tổng hợp hướng công nghệ phần mềm 20 21 - 20 22 Trường... 38 4 .2. 1 38 Database host Đồ án tổng hợp hướng công nghệ phần mềm 20 21 - 20 22 Trường ĐH Bách Khoa TP.HCM 4 .2. 2 Database connecction 39 4 .2. 3 Database... Kỹ thuật Máy tính Trang 23 /47 Đồ án tổng hợp hướng công nghệ phần mềm 20 21 - 20 22 3 .2. 6 Trường ĐH Bách Khoa TP.HCM Trang đăng ký đăng nhập ➢ Giao diện trang đăng ký Hình 22 : Giao diện trang đăng