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ó chứa các thành phần định dạng giúp trình duyệt web hiển thị nội dung của trang một cách chính xác.
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ị 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ữ quy định cách trình bày cho các tài liệu được tạo bằng HTML, XHTML, XML, SVG và UML.
1.2.2 Cú pháp sử dụng CSS
Để sử dụng một file CSS riêng biệt có định dạng css trong file HTML, ta cần sử dụng cú pháp thích hợp để triệu gọi file CSS đó.
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 allows for control over events such as link, hover, active, and visited states.
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à cách thức mà CSS định dạng không gian xung quanh một thành phần, bao gồm các yếu tố như vùng đệm (padding), viền (border), và canh lề (margin).
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óa quá trình 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 to use two classes: btn and btn-x, where x can be primary, success, info, warning, danger, or link Additionally, you can utilize the btn-lg, btn-sm, or btn-xs classes to adjust the button sizes accordingly.
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ẹ, chuyên dùng để tạo ra các tương tác và hiệu ứng mượt mà trên trang HTML Để nhúng mã Script vào văn bản HTML, bước đầu tiên là 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 thông báo tùy chỉnh và cung cấp một trường để người dùng nhập dữ liệu.
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 giao diện người dùng tương tác, có trạng thái và 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 hiệu quả 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 được sử dụng trong trình duyệt Chrome Thực tế, bạn có thể tải V8 và tích hợp nó vào bất kỳ ứng dụng nào; Node.js tận dụng điều này cho các web server JavaScript, vốn chỉ là một ngôn ngữ lập trình, hoàn toàn có khả năng hoạt động hiệu quả trên môi trường server, tương tự như trong trình duyệt của người dùng.
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 cấu trúc cố định, phù hợp cho việc quản lý các dữ liệu phức tạp và đa dạng, 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 là mô hình thiết kế trong kỹ thuật phần mềm, viết tắt từ ba từ Model, View và Controller Mô hình này chia source code thành ba phần riêng biệt, mỗi phần đảm nhận 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 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 biểu diễn dưới dạng cơ sở dữ liệu hoặc một 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.
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 website.
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ị yêu cầu mà Controller chuyển đến.
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 chịu trách nhiệm xử lý các 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 sự tương tác hiệu quả giữa người dùng và dữ liệu.
1.8.2 Luồng đi trong mô hình MVC như thế nào?
Khi một yêu cầu từ máy client gửi 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 chịu trách nhiệm làm việc với cơ sở dữ liệu để hỗ trợ 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 về 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 tiêu dùng, từ đó nâng cao chất lượng và uy tín của sản phẩm.
Chức năng control đóng vai trò quan trọng trong các nền tảng website, nơi ngôn ngữ lập trình như CSS, HTML và Javascript được sử dụng Á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 các ngôn ngữ lập trình hiện đại với nhiều hình thức khác nhau.
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 Việc áp 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 sử dụng.
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ế phổ biến 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ể.
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 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 dành cho người dùng, cho phép họ truy cập 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 hệ thống ứ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 Mặc dù 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, nó vẫn thực hiện chức năng 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 có nhiệm vụ 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 đảm nhiệm việc 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 chuyên làm việc với cơ sở dữ liệu để hỗ trợ xử lý thông tin.
Sau khi hoàn tất yêu cầu, kết quả sẽ được gửi về View Tại đây, mã HTML sẽ đượ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 dễ dàng với MVC giúp phát hiện và sửa lỗi phần mềm trước khi sản phẩm đến tay người tiêu dùng, từ đó nâng cao chất lượng và độ uy tín của sản phẩm.
Chức năng control đóng vai trò quan trọng trong việc phát triển 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 các ngôn ngữ hiện đại và đa dạng hình thức.
View và kích thước: View là nơi lưu trữ dữ liệu, và khi số lượng yêu cầu tăng lên, kích thước tệp cũng sẽ lớn hơn Điều này dẫn đến việc 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 việc tiết kiệm băng thông hiệu quả.
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, cho phép lập trình viên dễ dàng viết mã trên nền tảng website, giúp giảm tải cho server Bên cạnh đó, cấu trúc của mô hình này khá đơn giản, khiến cho 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 được áp dụng trong 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 cả quá trình phát triển lẫn việc trung 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 mối quan hệ giữa tiến trình 0 của hệ thống và hai thực thể bên ngoài là Admin và khách hàng, cùng với các luồng dữ liệu tương ứ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 yêu cầu của đề tài, nhóm em xin đề 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,…
