LÝ THUYẾT
HTML
HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu siêu văn bản dùng để xây dựng trang web Nó bao gồm các thành phần định dạng giúp trình duyệt web hiểu cách hiển thị nội dung trên trang.
Một trang web thông thường gồm 2 thành phần chính:
Dữ liệu của trang web (văn bản, âm thanh, hình ảnh, )
Các thẻ (tag) HTML dùng để định dạng mô tả, cách thức các dữ liệu hiển thị trên trình duyệt
Dưới đây là cấu trúc các câu lệnh của HTML:
My test page
- Thẻ xuống dòng Br được dùng để ngắt một phần nội dung xuống dòng mới
- Thẻ chia đoạn p được dùng để phân chia một đoạn văn bản thành hai đoạn văn bản riêng biệt Cú pháp:
Nội dung cần phân chia …
.- Cặp thẻ định dạng kiểu chữ : , , , .
- Để định dạng một danh sách không có trật tự ta sử dụng cặp thẻ
được lồng bên trong cặp thẻ- Để định dạng một danh sách không có trật tự ta sử dụng cặp thẻ
được lồng bên trong cặp thẻ- Thẻ phân vùng div sử dụng để phân chia khu vực (vùng) , sự phân chia này sẽ giúp trình duyệt hiểu rõ phân bố (bố cục ) của trang web.
- Thẻ tiêu đề sử dụng các cặp thẻ từ đến .
- Sử dụng cặp thẻ để đưa một phần nội dung vào vị trí chính giữa so với phần bao ngoài của nó.
- Để tạo một liên kết trong văn bản HTML ta sử dụng cặp thẻ với các thuộc tính để định dạng cho liên kết.
- Để đưa hình ảnh vào trong văn bản HTML ta sử dụng thẻ với các thuộc tính.
- Cặp thẻ : Khai báo bảng:
Cặp thẻ : Khai báo một dòng trong bảng.
Cặp thẻ : Khai báo một cột của một dòng trong bảng.
Để khai báo vùng làm việc của Form, chúng ta sử dụng cặp thẻ Trong Form, có các thuộc tính quan trọng như name, action và method, trong đó method xác định phương thức truyền dữ liệu với các giá trị có thể là GET hoặc POST.
- Khai báo một phần tử textbox: sử dụng thẻ .
- Cú pháp: .
- Khai báo một phần tử checkbox, radio, password: sử dụng thẻ .
- Khai báo một phần tử file, submit, reset: sử dụng thẻ .
- Khai báo một danh sách mà người dùng muốn lựa chọn ta sử dụng phần tử selectbox với các cặp thẻ: và .
CSS
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để xác định cách trình bày cho các tài liệu được viết bằng HTML, XHTML, XML, SVG và UML.
1.2.2 Cú pháp sử dụng CSS
Để gọi một file CSS riêng biệt (định dạng css) vào trong file HTML, ta sử dụng cú pháp sau:
1.2.3 Bố cục và thành phần
Các thuộc tính: width, height, float, clear.
Thuộc tính phông nền: Background-color, Background-image, Background-repeat, Background-attachment, Background-position.
Thuộc tính ID trong CSS : Cú pháp : Id= “ Tên_ID ”.
Cú pháp triệu gọi ID trong CSS : #Tên_ID {thuộc_tính_1:giá_trị; … thuộc_tính_N:giá_trị; }
Thuộc tính Class trong CSS : Cú pháp : Class= “Tên_class_1 Tên_class_2… Tên_class_N”.
Cú pháp triệu gọi Class trong CSS: Tên_class { thuộc_tính_1: giá trị; … thuộc_tính_2: giá_trị; }
Thuộc tính về font chữ trong CSS: font-family, font-style, font-weight, font-size.
CSS text properties include color, text-indent, text-align, letter-spacing, word-spacing, line-height, text-decoration, and text-transform Additionally, CSS controls various states of events such as link, hover, active, and visited.
Cú pháp: a:link { thuộc_tính_1: giá_trị; … thuộc_tính_N: giá trị; }
Trong CSS, mô hình hộp (box model) là khái niệm quan trọng mô tả cách định dạng không gian xung quanh một thành phần Mô hình này bao gồm các yếu tố như vùng đệm (padding), viền (border), và canh lề (margin), cùng với các tùy chọn khác để điều chỉnh giao diện.
Bootstrap
Bootstrap là một framework front-end mạnh mẽ, cung cấp nhiều thư viện CSS sẵn có, giúp đơn giản hóa và dễ dàng hơn trong việc lập trình HTML và CSS.
Class container, class căn chỉnh text, class biến đổi.
The form-control class in Bootstrap automatically applies a set of common styles To create a button, you need two classes: btn and btn-x, where x can be primary, success, info, warning, danger, or link Additionally, you can use the btn-lg, btn-sm, or btn-xs classes to specify different button sizes.
Trong Bootstrap 3, hình ảnh có thể Responsive bằng cách thêm class img-responsive vào thẻ Có 3 kiểu: hình ảnh vuông, ảnh hình tròn, kiểu ảnh thumbnail
Font icon: cần copy tên class có bên dưới mỗi icon rồi bỏ vào class của thẻ html nào đó(thẻ span, thẻ i).
Javascript
JavaScript là ngôn ngữ lập trình nhẹ, giúp tạo ra các tương tác và hiệu ứng mượt mà cho trang HTML Để nhúng mã Script vào văn bản HTML, trước tiên cần tạo một vùng làm việc với JavaScript tại vị trí mong muốn.
1.4.2 Làm Việc Với Javascript Trong Môi Trường Html:
Hộp thoại alert(): cung cấp cho người dùng một hộp thoại với nội dung thông báo kèm một button OK.
Hộp thoại prompt() tạo ra một hộp hội thoại với một thông báo tùy chỉnh và cung cấp một trường nhập liệu cho người dùng.
React là một thư viện UI được phát triển bởi Facebook, giúp xây dựng các thành phần UI tương tác cao, có trạng thái và có thể tái sử dụng Thư viện này không chỉ hoạt động trên phía client mà còn có khả năng render trên server, cho phép kết nối linh hoạt giữa các phần React thực hiện việc so sánh sự thay đổi giữa các lần render, từ đó cập nhật một cách tối ưu nhất trên DOM.
Node.js là nền tảng chạy trên môi trường V8 JavaScript runtime, một trình thông dịch JavaScript nhanh chóng trên trình duyệt Chrome Nó cho phép nhúng V8 vào các web server, chứng tỏ rằng JavaScript không chỉ phù hợp cho trình duyệt mà còn có thể hoạt động hiệu quả trên môi trường server.
MongoDB là một cơ sở dữ liệu mã nguồn mở, được thiết kế theo kiểu hướng đối tượng với cấu trúc bảng linh hoạt Điều này cho phép lưu trữ dữ liệu mà không cần tuân theo một dạng cấu trúc nhất định, làm cho MongoDB trở thành lựa chọn lý tưởng cho việc lưu trữ dữ liệu phức tạp, đa dạng và không cố định, thường được gọi là Big Data.
1.8.1 Mô hình MVC là gì? Các thành phần của MVC
MVC, viết tắt của Model – View – Controller, là một mô hình thiết kế quan trọng trong kỹ thuật phần mềm Mô hình này chia source code thành ba phần riêng biệt, mỗi phần tương ứng với một hoạt động cụ thể, giúp tổ chức và quản lý mã nguồn hiệu quả hơn.
Mô hình MVC và các thành phần bên trong của MVC.
Model (M) là phần quan trọng trong ứng dụng, chịu trách nhiệm lưu trữ toàn bộ dữ liệu và đóng vai trò cầu nối giữa View và Controller Model có thể được biểu diễn dưới dạng cơ sở dữ liệu hoặc đơn giản là một file XML Nó cho phép thực hiện các thao tác với dữ liệu, bao gồm xem, truy xuất và xử lý thông tin.
View (V) là giao diện người dùng trong kiến trúc MVC, cho phép người dùng truy cập và lấy thông tin dữ liệu thông qua các thao tác như tìm kiếm hoặc tương tác trên các trang web.
Các ứng dụng web thường sử dụng MVC View để tạo ra các thành phần HTML trong hệ thống View không chỉ hiển thị thông tin mà còn ghi nhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller và không lấy dữ liệu từ Controller, mà chỉ chuyển tiếp yêu cầu đến Controller.
Ví dụ: Nút “delete” được tạo bởi View khi người dùng nhấn vào nút đó sẽ có một hành động trong Controller.
Bộ phận Controller có nhiệm vụ xử lý yêu cầu từ người dùng thông qua view, từ đó cung cấp dữ liệu phù hợp Ngoài ra, Controller còn đóng vai trò kết nối với model để đảm bảo hoạt động hiệu quả của ứng dụng.
1.8.2 Luồng đi trong mô hình MVC như thế nào?
Khi máy client gửi yêu cầu tới server, Controller sẽ tiếp nhận và xử lý yêu cầu đó Nếu cần thiết, Controller có thể liên hệ với Model, bộ phận chuyên làm việc với cơ sở dữ liệu để hỗ trợ.
Sau khi hoàn tất yêu cầu, kết quả sẽ được gửi về View, nơi mà mã HTML được tạo ra để hình thành giao diện và hiển thị trên trình duyệt.
1.8.3 Ưu và nhược điểm của mô hình mvc
Kiểm tra phần mềm trở nên đơn giản hơn với MVC, giúp phát hiện và sửa lỗi trước khi sản phẩm đến tay người tiêu dùng, từ đó nâng cao chất lượng và độ tin cậy của sản phẩm.
Chức năng control đóng vai trò quan trọng trên các nền tảng website, với các ngôn ngữ lập trình như CSS, HTML và Javascript Việc áp dụng mô hình MVC sẽ mang lại cho bạn một bộ control hiệu quả, tận dụng sức mạnh của các ngôn ngữ lập trình hiện đại và đa dạng hình thức.
View và kích thước: View lưu trữ dữ liệu, và khi có nhiều yêu cầu, kích thước tệp sẽ tăng lên, dẫn đến giảm tốc độ tải của mạng Sử dụng mô hình MVC giúp tối ưu hóa băng thông, tiết kiệm diện tích và cải thiện hiệu suất tải.
Chức năng Soc (Separation of Concern): Chức năng này cho phép bạn phân tách rõ ràng các phần như Model, giao diện, data, nghiệp vụ.
Mô hình mvc
1.8.1 Mô hình MVC là gì? Các thành phần của MVC
MVC, viết tắt của Model – View – Controller, là một mô hình thiết kế quan trọng trong kỹ thuật phần mềm Mô hình này chia source code thành ba phần riêng biệt, mỗi phần tương ứng với một hoạt động cụ thể Model quản lý dữ liệu, View hiển thị thông tin, và Controller xử lý logic ứng dụng, giúp tách biệt các chức năng và nâng cao khả năng bảo trì.
Mô hình MVC và các thành phần bên trong của MVC.
Model (M) là phần lưu trữ dữ liệu của ứng dụng, đóng vai trò cầu nối giữa View và Controller Nó có thể được thể hiện dưới dạng cơ sở dữ liệu hoặc file XML đơn giản Model cho phép thực hiện các thao tác như xem, truy xuất và xử lý dữ liệu.
Giao diện (View) là phần thiết kế dành cho người dùng, cho phép họ truy cập và lấy thông tin dữ liệu từ mô hình MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng trên các trang web.
Trong các ứng dụng web, MVC View đóng vai trò quan trọng trong việc tạo ra các thành phần HTML và ghi nhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller và không lấy dữ liệu từ Controller, mà chỉ hiển thị các yêu cầu chuyển đến Controller.
Ví dụ: Nút “delete” được tạo bởi View khi người dùng nhấn vào nút đó sẽ có một hành động trong Controller.
Bộ phận Controller xử lý các yêu cầu từ người dùng thông qua view và cung cấp dữ liệu phù hợp Ngoài ra, Controller còn đóng vai trò kết nối với model để đảm bảo sự tương tác hiệu quả giữa các thành phần trong ứng dụng.
1.8.2 Luồng đi trong mô hình MVC như thế nào?
Khi máy client gửi yêu cầu đến server, Controller sẽ tiếp nhận và xử lý yêu cầu đó Nếu cần thiết, Controller có thể liên hệ với Model, bộ phận đảm nhiệm việc tương tác với cơ sở dữ liệu để hỗ trợ trong quá trình xử lý.
Sau khi hoàn tất việc xử lý yêu cầu, kết quả sẽ được gửi trở lại View Tại đây, mã HTML sẽ được tạo ra để xây dựng giao diện và hiển thị trên trình duyệt.
1.8.3 Ưu và nhược điểm của mô hình mvc
Kiểm tra phần mềm trở nên đơn giản hơn với MVC, giúp bạn phát hiện và sửa lỗi trước khi sản phẩm đến tay người dùng, từ đó nâng cao chất lượng và độ tin cậy.
Chức năng control đóng vai trò quan trọng trên các nền tảng website, với các ngôn ngữ lập trình như CSS, HTML và Javascript Việc áp dụng mô hình MVC sẽ mang lại cho bạn một bộ control hiệu quả, tận dụng sức mạnh của các ngôn ngữ hiện đại và đa dạng hình thức.
View là nơi lưu trữ dữ liệu, và khi có nhiều yêu cầu, kích thước tệp sẽ tăng lên, dẫn đến giảm tốc độ tải của đường truyền mạng Sử dụng mô hình MVC giúp tối ưu hóa băng thông, tiết kiệm diện tích và cải thiện hiệu suất.
Chức năng Soc (Separation of Concern): Chức năng này cho phép bạn phân tách rõ ràng các phần như Model, giao diện, data, nghiệp vụ.
Mô hình MVC mang lại tính kết hợp cao, giúp lập trình viên dễ dàng viết mã trên nền tảng website và giảm tải cho server Bên cạnh đó, cấu trúc của mô hình này tương đối đơn giản, cho phép ngay cả những người không có nhiều chuyên môn cũng có thể sử dụng hiệu quả.
Mô hình MVC thường phù hợp với các dự án lớn, nhưng đối với những dự án nhỏ, nó có thể trở nên cồng kềnh và tốn thời gian trong quá trình phát triển cũng như khi chuyển dữ liệu.
THIẾT KẾ HỆ THỐNG
Phân tích yêu cầu đề tài
2.1.2.1 Thiết bị và phần mềm:
Máy tính có thể thiết kế được web.
Hệ quản trị cơ sở dữ liệu Mongose.
Cài đặt MongoseDB Compass để tạo server.
Phần mềm code editor: Visual Studio Code.
Phần mềm cần có các chức năng sau:
Quản lí hệ thống: Đăng kí khách hàng, đăng nhập, chỉnh sửa thông tin
Quản lí khách hàng: Phê duyệt khách hàng, xóa khách hàng
Quản lí sách: Thêm sách, sửa thông tin sách, thêm số lượng sách, xóa sách
Quản lí xuất/nhập: Lập phiếu nhập, In hóa đơn
Tìm kiếm: Tìm kiến sách, tìm kiếm khách hàng, tìm kiếm hóa đơn, tìm kiếm trợ
giúpBáo cáo: Báo cáo doanh thu, báo cáo sách hết hàng, báo cáo sách tồn kho
Sơ đồ phân cấp chức năng
Hình 2.1 Sơ đồ phân cấp chức năng
Sơ đồ chức năng của hệ thống được mô tả như trên Hình 2.1 Hệ thống gồm 6 chức năng chính, cụ thể như sau:
Sơ đồ luồng dữ liệu
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh
Hình 2.2 Sơ đồ luồng dữ liệu mức ngữ cảnh
Sơ đồ mức ngữ cảnh của hệ thống, như thể hiện trong Hình 2.2, cho thấy tiến trình 0 của hệ thống liên kết với hai thực thể bên ngoài là Admin và khách hàng, với các luồng dữ liệu cụ thể giữa chúng.
(1) Thông tin khách hàng, sách mua
(4) Thông tin mua sách, khách hàng phản hồi
2.3.2 Sơ đồ luồng dữ liệu mức đỉnh
Hình 2.3 Sơ đồ luồng dữ liệu mức đỉnh
Sơ đồ luồng dữ liệu mức đỉnh được thể hiện trên Hình 2.2.
2.3.3 Sơ đồ luồng dữ liệu mức 1 a Chức năng 1
Hình 2.4 Sơ đồ luồng dữ liệu mức 1 của chức năng đăng nhập
Sơ đồ mức 1 của chức năng 1 được mô tả trên Hình 2.4 Cụ thể:
Hình 2.5 Sơ đồ luồng dữ liệu mức 1 của chức năng quản lí khách hàng
Hình 2.6 Sơ đồ luồng dữ liệu mức 1 của chức năng quản lý thông tin sách
Sơ đồ mức 1 của chức năng 3 được mô tả trên Hình 3.5 Cụ thể:
Hình 2.7 Sơ đồ luồng dữ liệu mức 1 của chức năng quản lý xuất/nhập hóa đơn
Sơ đồ mức 1 của chức năng 4 được mô tả trên Hình 2.7 Cụ thể:
Hình 2.8 Sơ đồ luồng dữ liệu mức 1 của chức năng quản lý tìm kiếm
Sơ đồ mức 1 của chức năng 5 được mô tả trên Hình 2.8 Cụ thể:
Hình 2.9 Sơ đồ luồng dữ liệu mức 1 của chức năng báo cáo
Sơ đồ mức 1 của chức năng 6 được mô tả trên Hình 3.8 Cụ thể:
Chuẩn hóa
Số điện thoại Địa chỉ
ID sách Tên sách Thể loại Hình minh họa Tác giả
ID hóa đơn Ngày đặt hàng Ngày nhận hàng Phương thức thanh toánTổng tiền
Mô hình thực thể liên kết
Hình 2.0.10 Mô hình thực thể liên kết
Cơ sở dữ liệu
2.6.1 Sơ đồ quan hệ cơ sở dữ liệu
Hình 0.11 Sơ đồ quan hệ cơ sở dữ liệu
2.6.2 Các bảng trong cơ sở dữ liệu
Bảng 2.0.1 Bảng danh mục sản phẩm (Categories) Tên thuộc tính Kiểu dữ liệu Chiều dài Giá trị mẫu Mô tả Ghi ch ú
Id INT 1 Id của nhân viên NOT
Name VARCHAR 255 Ngô Vũ Hoàng Tên nhân viên NOT
Date_of_birth DATE 2000-02-02 Ngày tháng năm sinh nhân viên NOT
Phone_number VARCHAR 255 0866961200 Số điện thoại nhân viên NOT
Email VARCHAR 255 nvh@gmail.com Email nhân viên NOT
Position VARCHAR 255 Manager Vị trí hiện tại của nhân viên NOT
Avatar TEXT http://localhost:8000/ da/files/
6%20%2814%29.PN G Ảnh đại diện nhân viên NOT
Tên thuộc tính Kiểu dữ liệu Chiều dài Giá trị mẫu Mô tả Ghi ch
Id INT 1 Id của ứng viên NOTú
Name VARCHAR 255 Tên ứng viên NOT
Gender VARCHAR 255 Male Giới tính ứng viên NOT
Email VARCHAR 255 nvh@gmail.com Email ứng viên NOT
Phone_number VARCHAR 255 0866961200 Số điện thoại ứng viên NOT
Date_of_birth DATE 2000-02-02 Ngày tháng năm sinh của ứng viên NOT
Address VARCHAR 255 Hanoi Ảnh đại diện ứng viên NOT
Position VARCHAR 255 Manager Vị trí hiện tại của ứng viên NOT
Experience VARCHAR 255 None Kinh nghiệm của ứng viên NOT
Tên thuộc tính Kiểu dữ liệu Chiều dài Giá trị mẫu Mô tả Ghi ch
Id INT 1 Id của người quản trịNOT
Username VARCHAR 255 ad Tên đăng nhập người quản trị NOT
Password VARCHAR 255 ad Mật khẩu ứng với tên đăng nhập của người quản trị
Bảng 2.0.2 Bảng sản phẩm (Products)
Tên trường Kiểu dữ liệu Tên thuộc tính id* int(11) Id
Name varchar(255) Tên sản phẩm
Id_category varchar(255) Danh mục sản phẩm
Provider varchar(255) Hãng sản xuất
Avatar varchar(255) Ảnh đại diện
Images varchar(255) Ảnh chi tiết
Short_description varchar(255) Mô tả ngắn
Status varchar(255) Trạng thái sản phẩm
Bảng 2.0.3 Bảng người dùng (User)
Tên trường Kiểu dữ liệu Tên thuộc tính id* int(255) Id
Email varchar(255) Thư điện tử
Phone_number int(255) Số điện thoại
Avatar varchar(255) Ảnh đại diện
Bảng 0.4 Bảng giỏ hàng (Cart)
Tên trường Kiểu dữ liệu Tên thuộc tính id* int(255) id
Name varchar(255) Tên sản phẩm
Định hướng phát triển
Mặc dù đã đáp ứng được các yêu cầu của đề tài, nhóm em đề xuất một số hướng phát triển trong tương lai để hoàn thiện và nâng cao chất lượng sản phẩm.
Cải tiến giao diện để website trở nên đẹp mắt hơn, thu hút khách hàng hơn
Thu thập thông tin, sở thích của khách hàng để cung cấp thêm các sản phẩm phù hợp với nhu cầu và sở thích của khách hàng
Thêm nhiều lựa chọn về ngôn ngữ để phù hợp với nhiều đối tượng khách hàng hơn
Tạo chế độ tối (dark mode) để phù hợp với xu thế hiện nay
Tạo giao diện chạy tốt trên các thiết bị khác như smartphone, tablet,…
