Báo Cáo XÂY DỰNG WEBSITE BÁN LAPTOP CHO CỬA HÀNG NMD LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô của trường Đại học và đặc biệt là các thầy cô khoa Công nghệ t.
Báo Cáo XÂY DỰNG WEBSITE BÁN LAPTOP CHO CỬA HÀNG NMD LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học ………… đặc biệt thầy cô khoa Công nghệ thông tin trường tạo điều kiện cho em hoàn thành đồ án tốt nghiệp Em xin chân thành cảm ơn ………… nhiệt tình hướng dẫn bảo em kiến thưc học, kiến thức thực tế suốt trình thực đề tài Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép chắn khơng tránh khỏi thiết sót Em mong nhận thơng cảm, góp ý tận tình bảo q thầy bạn Em xin chân thành cảm ơn! MỤC LỤC CHƯƠNG 1: CƠ SỞ LÝ THUYẾT .1 1.1 Cơ sở lý thuyết 1.1.1 Ngôn ngữ thiết kế website .1 1.1.2 Ngôn ngữ lập trình .2 1.1.3 Hệ quản trị sở liệu: .4 1.2 Công cụ - công nghệ sử dụng 1.2.1 Thư viện ReactJS 1.2.2 TypeScript .8 1.2.3 Tailwind 1.2.4 Mơ hình MVC .9 1.2.5 Framework laravel .10 1.2.6 Phần mềm phpMyAdmin .12 1.2.7 XAMPP .13 CHƯƠNG 2: KHẢO SÁT HỆ THỐNG 14 2.1 Khảo sát hệ thống 14 2.2 Yêu cầu với hệ thống 15 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .16 3.1 Use Case hệ thống 16 3.1.1 Use Case tổng quát .16 3.1.2 Use Case hệ thống 17 3.1.3 Use Case tác nhân KHACHHANG 19 3.1.4 Use Case quản lý danh mục 22 3.1.5 Use Case quản lý sản phẩm 24 3.1.6 Use Case quản lý thành viên 26 3.1.7 Use Case quản lý admin 28 3.1.8 Use Case quản lý đơn hàng 30 3.2 Biểu đồ hoạt động 32 3.3 Biểu đồ 38 3.4 Biểu đồ lớp 42 3.5 Thiết kế sở liệu 43 CHƯƠNG 4: GIAO DIỆN WEBSITE 48 4.1 Giao diện người dùng 48 4.1.1 Giao diện đăng nhập .48 4.1.3 Giao diện đăng ký 48 4.1.2 Giao diện trang chủ 49 4.1.3 Giao diện chi tiết sản phẩm 50 4.1.4 Giao diện mua hàng 50 4.1.5 Giao diện tra cứu hóa đơn 51 4.2 Giao diện quản trị .51 4.2.1 Giao diện quản lý danh mục 51 4.2.2 Giao diện quản lý sản phẩm 52 4.2.3 Giao diện thêm sản phẩm 52 4.2.4 Giao diện cập nhật sản phẩm 53 4.2.5 Giao diện quản lý đơn hàng 53 4.2.6 Giao diện xem chi tiết hóa đơn .54 KẾT LUẬN 55 TÀI LIỆU THAM KHẢO 56 DANH MỤC HÌNH Hình 1.1 Mơ hình hoạt động MySQL Hình 1.2 JSX Code style Hình 1.3 So sánh Virtual DOM Real DOM Hình 1.4 Mơ hình MVC PHP Hình 1.5 Giao diện phần mềm PhpMyAdmin Hình 3.1 Use Case tổng quát Hình 3.2 Use Case hệ thống Hình 3.3 Use Case tác nhân KHACHHANG Hình 3.4 Use Case quản lý danh mục Hình 3.5 Use Case quản lý sản phẩm Hình 3.6 Use Case quản lý thành viên Hình 3.7 Use Case quản lý admin Hình 3.8 Use Case quản lý đơn hàng Hình 3.9 Biểu đồ hoạt động Đăng ký Hình 3.10 Biểu đồ hoạt động Đăng nhập Hình 3.11 Biểu đồ hoạt động Xem chi tiết liệu Hình 3.12 Biểu đồ hoạt động Thêm liệu Hình 3.13 Biểu đồ hoạt động Cập nhật liệu Hình 3.14 Biểu đồ hoạt động Xóa liệu Hình 3.15 Biểu đồ Thêm liệu Hình 3.16 Biểu đồ Cập nhật liệu Hình 3.17 Biểu đồ Tìm kiếm liệu Hình 3.18 Biểu đồ Xóa liệu Hình 3.19 Biểu đồ lớp Hình 4.1 Giao diện đăng nhập Hình 4.2 Giao diện đăng ký Hình 4.3 Giao diện trang chủ Hình 4.4 Giao diện chi tiết sản phẩm Hình 4.5 Giao diện mua hàng Hình 4.6 Giao diện tra cứu hóa đơn Hình 4.7 Giao diện quản lý danh mục Hình 4.8 Giao diện quản lý sản phẩm Hình 4.9 Giao diện thêm sản phẩm Hình 4.10 Giao diện cập nhật sản phẩm Hình 4.11 Giao diện quản lý đơn hàng Hình 4.12 Giao diện xem chi tiết hóa đơn DANH MỤC BẢNG Bảng 3.1 Bảng admin Bảng 3.2 Bảng user Bảng 3.3 Bảng product Bảng 3.4 Bảng categories Bảng 3.5 Bảng order Bảng 3.6 Bảng transaction Bảng 3.7 Bảng products_category Bảng 3.8 Bảng products_images CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Cơ sở lý thuyết 1.1.1 Ngôn ngữ thiết kế website HTML: HTML(Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản) định dạng để hiển thị trang Web Các trang Web thực khơng có khác ngồi văn với tag HTML xếp cách đoạn mã để trình duyệt Web biết cách thơng dịch hiển thị chúng lên hình Hiện nay, phiên HTML5 có số tính ưu việt so với phiên cũ: Định nghĩa nhiều ảnh cho thiết kế responsive: Với HTML dùng thẻ với thuộc tính srcset để tạo nên ảnh responsive Thẻ đại diện cho khung ảnh, cho phép nhà phát triển khai báo nguồn ảnh khác để thích ứng với kích thước khung hình, mật độ điểm ảnh hình, loại hình thiết kế responsive Hiển thị ẩn thông tin thêm: Với thẻ thêm thông tin cho đoạn nội dung, thông tin thêm mặc định không hiển thị Trong code, phải đặt thẻ thẻ , thẻ đặt thông tin thêm muốn ẩn Thêm chức cho menu ngữ cảnh: Với thẻ , thêm chức tùy chỉnh vào menu ngữ cảnh trình duyệt Cần gán thẻ thành phần thẻ Thẻ có loại thuộc tính khác “checkbox”, “command”, “radio” Nó có khả thêm nhiều menu -1- Lồng ghép header footer: HTML cho phép lồng ghép header footer nội dung section Tính hữu ích muốn thêm sectioning element, chẳng hạn Sử dụng mật mã nonce cho style script: Với HTML thêm mã cho style script, sử dụng thuộc tính nonce với thẻ thẻ Mã nonce khởi tạo số ngẫu nhiên nhất, phục hồi sau lần request page, mã nonce sử dụng bảo mật website CSS: CSS – dùng để miêu tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML CSS viết tắt Cascading Style Sheets CSS hiểu cách đơn giản cách mà chúng thêm kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho tài liệu Web CSS có tác dụng là: Hạn chế tối thiểu việc làm rối HTML trang Web thẻ quy định kiểu dáng(chữ đậm, in nghiêng, ), giúp mã nguồn trang Web trở nên gọn gàng Tách biệt nội dung trang Web định dạng hiển thị, dễ dàng cho việc thay đổi Tạo kiểu dáng áp dụng cho nhiều trang Web, tránh lặp lại việc định dạng cho trang Web giống 1.1.2 Ngơn ngữ lập trình Javascript: -2- Javascript ngơn ngữ lập trình HTML ứng dụng Web Nó sử dụng phổ biến nhất, phần trang web Chúng cho phép client-server script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng Một số ưu điểm JavaScript: Tiêt kiệm băng thông máy chủ: Javascript sử dụng thiết kế website giúp tiết kiệm băng thơng máy máy chủ vô tốt chúng chạy trực tiếp máy người dùng Gia tăng hiệu suất, kéo dài tuổi thọ máy chủ tiết kiệm diện tích băng thơng Linh hoạt vận hành, tương thích tốt: Để thực thi, trình duyệt web cần tải file JavaScript máy chủ từ tên miền riêng biệt nhúng thẳng vào file HTML chạy mà khơng cần tải thêm Javascript chạy hầu hết trình duyệt phổ biến Hầu hết trình duyệt web có tích hợp sẵn trình thơng dịch ngơn ngữ JavaScript, đảm bảo người dùng sử dụng mà khơng cơng tải trình duyệt, giảm tỷ lệ thực thi chức JavaScript Dễ dàng xử lý vấn đề: Với lợi có nhiều trình duyệt hỗ trợ nên việc kiểm tra xử lý vấn đề dễ dàng Đa số trình duyệt web có cài sẵn cơng cụ xử lý lỗi Javascript bảng điều khiển trình duyệt Javascript sở hữu cấu trúc dễ đọc với nguyên tắc rõ ràng nên việc xác định gỡ lỗi trở nên đơn giản Nâng cao trải nghiệm người dùng: -3- Hình 3.18 Biểu đồ Xóa liệu - 43 - 3.4 Biểu đồ lớp Hình 3.19 Biểu đồ lớp - 44 - 3.5 Thiết kế sở liệu Bảng Admin: Bảng 3.1 Bảng admin STT Tên thực thể id Kiểu liệu Ràng buộc Mô tả bigint Khóa Khóa bảng name varchar(255) Not null Tên email varchar(255) Not null Email phone varchar(10) Null Số điện thoại address varchar(255) Null Địa password varchar(255) Null Mật avatar varchar(255) Null Hình ảnh lever tinyint Null Cấp created_at timestamp Null Ngày tạo 10 updated_at timestamp Null Ngày cập nhật Bảng User: Bảng 3.2 Bảng user STT 10 Tên thực thể id name email password phone address status avatar created_at updated_at Kiểu liệu bigint varchar(255) varchar(255) varchar(255) varchar(10) varchar(255) tinyint varchar(255) timestamp timestamp Bảng Product: - 45 - Ràng buộc Mơ tả Khóa Khóa Not null Not null Null Null Null Null Null Null Null bảng Tên Email Mật Số điện thoại Địa Trạng thái Hình ảnh Ngày tạo Ngày cập nhật Bảng 3.3 Bảng product STT 10 11 12 13 14 15 16 17 Tên thực thể Kiểu liệu Ràng Mơ tả bigint buộc Khóa Khóa varchar(255) bigint Not null Khóa bảng Tên Mã danh mục pro_admin_id bigint ngoại Khóa Mã quản trị pro_price pro_sale pro_avatar pro_description pro_review_total pro_view pro_active pro_pay pro_title_seo pro_dercription_seo pro_keyword_seo created_at updated_at int int varchar(255) varchar(255) tinyint tinyint tinyint tinyint varchar(255) varchar(255) varchar(255) timestamp timestamp ngoại Not null Null Null Null Null Null Null Null Null Null Null Null Null Giá Giảm giá Hình ảnh Mơ tả Tổng xem Lượt xem Hoạt động Thanh tốn Tiêu đề seo Mơ tả seo Từ khóa seo Ngày tạo Ngày cập nhật id pro_name pro_category_id Bảng Categories: Bảng 3.4 Bảng categories STT Tên thực thể id Kiểu liệu bigint Ràng buộc Mơ tả Khóa Khóa c_name c_image c_status c_parent_id c_hot c_status c_title_seo c_description_se varchar(255) varchar(255) tinyint bigint tinyint varchar(255) varchar(255) varchar(255) Not null Null Null Khóa ngoại Null Null Null Null o - 46 - bảng Tên Hình ảnh Trạng thái Mã danh mục cha Nổi bật Trạng thái Tiêu đề seo Mô tả seo STT 10 11 12 Tên thực thể c_keyword_seo created_at updated_at Kiểu liệu varchar(255) timestamp timestamp Ràng buộc Mơ tả Null Từ khóa seo Null Ngày tạo Null Ngày cập nhật Bảng Order: Bảng 3.5 Bảng order STT Tên thực thể id o_transaction_id o_product_id o_qty o_sale o_price o_status created_at updated_at Kiểu liệu bigint Ràng buộc Mô tả Khóa Khóa bigint bigint int int int tinyint timestamp timestamp bảng Khóa ngoại ID giao dịch Khóa ngoại ID sản phẩm Not null Số lượng Not null Giảm giá Not null Giá Null Trạng thái Null Ngày tạo Null Ngày cập nhật Bảng Transaction: Bảng 3.6 Bảng transaction STT 10 11 Tên thực thể id t_admin_id t_user_id t_total_money t_name t_email t_address t_status t_note created_at updated_at Kiểu liệu bigint Ràng buộc Mơ tả Khóa Khóa bigint bigint int varchar(255) varchar(255) varchar(255) tinyint varchar(255) timestamp timestamp bảng Khóa ngoại ID quản trị Khóa ngoại ID người dùng Not null Tổng tiền Null Tên Not null Email Null Địa Null Trạng thái Null Ghi Null Ngày tạo Null Ngày cập nhật - 47 - Bảng Products_category: Bảng 3.7 Bảng products_category STT Tên thực thể id pc_product_id pc_category_id Kiểu liệu bigint Ràng buộc Mơ tả Khóa Khóa bigint bigint bảng Khóa ngoại ID sản phẩm Khóa ngoại ID danh mục Bảng Products_images: Bảng 3.8 Bảng products_images STT Tên thực thể id pi_name pi_path pi_product_id created_at updated_at Kiểu liệu bigint Ràng buộc Mơ tả Khóa Khóa varchar(255) varchar(255) bigint timestamp timestamp bảng Not null Tên Not null Đường dẫn Khóa ngoại ID sản phẩm Null Ngày tạo Null Ngày cập nhật - 48 - CHƯƠNG 4: GIAO DIỆN WEBSITE 4.1 Giao diện người dùng 4.1.1 Giao diện đăng nhập Hình 4.1 Giao diện đăng nhập 4.1.3 Giao diện đăng ký Hình 4.2 Giao diện đăng ký - 49 - 4.1.2 Giao diện trang chủ Hình 4.3 Giao diện trang chủ - 50 - 4.1.3 Giao diện chi tiết sản phẩm Hình 4.4 Giao diện chi tiết sản phẩm 4.1.4 Giao diện mua hàng Hình 4.5 Giao diện mua hàng - 51 - 4.1.5 Giao diện tra cứu hóa đơn Hình 4.6 Giao diện tra cứu hóa đơn 4.2 Giao diện quản trị 4.2.1 Giao diện quản lý danh mục Hình 4.7 Giao diện quản lý danh mục - 52 - 4.2.2 Giao diện quản lý sản phẩm Hình 4.8 Giao diện quản lý sản phẩm 4.2.3 Giao diện thêm sản phẩm Hình 4.9 Giao diện thêm sản phẩm - 53 - 4.2.4 Giao diện cập nhật sản phẩm Hình 4.10 Giao diện cập nhật sản phẩm 4.2.5 Giao diện quản lý đơn hàng Hình 4.11 Giao diện quản lý đơn hàng - 54 - 4.2.6 Giao diện xem chi tiết hóa đơn Hình 4.12 Giao diện xem chi tiết hóa đơn - 55 - KẾT LUẬN Từ hướng dẫn tận tình thầy, học trường, em phân tích xây dựng phần mềm với kết đạt được: Áp dụng kiến thức học xây dựng website bán laptop NMD, phân quyền người dùng người quản trị, với giao diện chức khác Quản lý thông tin cần thiết cửa hàng sản phẩm, thông tin khách hàng giao dịch mua hàng cửa khách hàng Có đầy đủ chức để quản lý cửa hàng Bên cạnh có hạn chế tồn như: Chưa có nhiều kiến thức thực tế, nên việc xây dựng phần mềm áp dụng vào thực tế cịn nhiều thiếu sót chưa khả quan Một số chức hạn chế - 56 - TÀI LIỆU THAM KHẢO Sách tham khảo: Phạm Nguyễn Cương – Nguyễn Trần Minh Thư – Hồ Bảo Quốc, Giáo trình Phân tích thiết kế hệ thống thông tin theo hướng đối tượng, nhà xuất Khoa học Kỹ thuật Nguồn: Internet: https://thachpham.com/category/web-development/html-css https://lmt.com.vn/lap-trinh/tim-hieu-php-mysql/360-tim-hieu-mo-hinhmvc-la-gi.html https://namcoi.com/tong-hop-cau-lenh-trong-laravel-php-framework/ https://laravel.com/docs/master/ https://vi.wikipedia.org/wiki/C%C6%A1_s%E1%BB%9F_d%E1%BB %AF_li%E1%BB%87u https://viettuts.vn/mysql https://reactjs.org/docs/getting-started.html - 57 - ... liệu Hình 3.14 Biểu đồ hoạt động Xóa liệu Hình 3.15 Biểu đồ Thêm liệu Hình 3.16 Biểu đồ Cập nhật liệu Hình 3.17 Biểu đồ Tìm kiếm liệu Hình 3.18 Biểu đồ Xóa liệu Hình 3.19 Biểu đồ lớp Hình 4.1 Giao... 3.13 Biểu đồ hoạt động Cập nhật liệu - 38 - Hình 3.14 Biểu đồ hoạt động Xóa liệu - 39 - 3.3 Biểu đồ Hình 3.15 Biểu đồ Thêm liệu - 40 - Hình 3.16 Biểu đồ Cập nhật liệu - 41 - Hình 3.17 Biểu đồ Tìm... cấp đa dạng loại laptop với mẫu mã chất lượng tốt cho người tiêu dùng Hiện nay, họ có chiến lược mở rộng thị trường hình thức kinh doanh online Cửa hàng phục vụ nhiều loại laptop khác để hướng