ĐỒ án THIẾT kế i đề tài xây DỰNG WEBSITE bán SÁCH

HTML

HTML là gì?

HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu siêu văn bản được sử 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 của 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

Cấu trúc HTML

Dưới đây là cấu trúc các câu lệnh của HTML:

My test page

Các thẻ trong HTML

- 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ẻ

- 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 hai 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 là gì?

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để định hì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.

Cú pháp sử dụng CSS

Để viết một file CSS riêng biệt với định dạng css và triệu gọi vào file HTML, ta sử dụng cú pháp sau:

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,

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ênclass 2

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 various states of elements such as link, hover, active, and visited.

Cú pháp CSS cho liên kết được viết dưới dạng: a:link { thuộc_tính_1: giá_trị; thuộc_tính_N: giá trị; } Mô hình hộp (BOX MODEL) trong CSS mô tả cách định dạng không gian xung quanh một thành phần, bao gồm các yếu tố như padding (vùng đệm), border (viền) và margin (canh lề).

Bootstrap

Bootstrap là gì?

Bootstrap là một framework front-end mạnh mẽ, cung cấp bộ thư viện CSS phong phú, giúp đơn giản hóa và dễ dàng hóa quá trình lập trình HTML và CSS.

Class trong Bootstrap

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à gì?

JavaScript là ngôn ngữ lập trình nhẹ, chuyên dụng cho việc tạo tương tác trên các trang HTML, giúp tạo ra hiệu ứng và ứng dụng web mượt mà Để nhúng mã JavaScript 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.

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() là một công cụ hữu ích cho phép người dùng tạo ra một hộp hội thoại với thông báo tùy chỉnh Ngoài việc hiển thị thông điệp, hộp thoại này còn cung cấp một trường để người dùng nhập dữ liệu, giúp thu thập thông tin một cách dễ dàng và hiệu quả.

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 (UI components) tương tác, có trạng thái và có thể tái sử dụng React 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 Thư viện này so sánh sự thay đổi giữa các lần render và chỉ cập nhật những thay đổi tối thiểu trên DOM, giúp cải thiện hiệu suất ứng dụng.

Node.js là một nền tảng chạy trên môi trường V8 JavaScript runtime - một trình thông dịch

JavaScript cực nhanh chạy trên trình duyệt Chrome Bình thường thì bạn cũng có thể tải bộ

V8, một động cơ JavaScript, cho phép Node.js hoạt động hiệu quả trên các web server JavaScript chỉ là một ngôn ngữ lập trình, vì vậy nó hoàn toàn có thể được sử dụng trên môi trường server với hiệu suất tương đương 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 nào, 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 phân 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ể trong cấu trúc tổng thể.

Mô hình MVC và các thành phần bên trong của MVC.

Model (M) là thành phần lưu trữ toàn bộ dữ liệu của ứng dụng, đó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 một file XML đơn giản Nó cho phép thực hiện các thao tác với cơ sở dữ liệu như xem, truy xuất và xử lý dữ liệu.

View (V) là phần giao diện dành cho người sử dụng, cho phép người dùng truy cập thông tin dữ liệu của MVC thông qua các thao tác như tìm kiếm hoặc sử dụng trên các website.

Trong các ứng dụng web, View theo mô hình MVC đóng vai trò quan trọng trong việc tạo ra các thành phần HTML Nó 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 trực tiếp liên kết 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 xử lý các yêu cầu từ người dùng thông qua view, cung cấp dữ liệu phù hợp và kết nối với model để đảm bảo tính chính xác và hiệu quả trong việc quản lý thông tin.

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, 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ợ trong quá trình xử lý.

Sau khi hoàn tất 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 để 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 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à độ 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ối ưu cho 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 dữ liệu: View lưu trữ dữ liệu, và khi có nhiều yêu cầu, kích thước tệp 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 việc tiết kiệm băng thô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 mang lại tính kết hợp cao, giúp bạn dễ dàng viết mã cho website và giảm tải cho server Với cấu trúc đơn giản, mô hình này 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ả.

PHP

Mô hình mvc

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 phân chia mã nguồn thành ba phần riêng biệt, mỗi phần đảm nhận một chức năng khác nhau, giúp tối ưu hóa quy trình phát triển ứng dụng.

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à kết 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 file XML, cho phép thực hiện các thao tác như xem, truy xuất và xử lý dữ liệu hiệu quả.

Giao diện (View) là phần thiết kế 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 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 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 trực tiếp liên kết với Controller và không lấy dữ liệu từ nó, 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 này xử lý 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.

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 đảm nhiệm việc tương tác với cơ sở dữ liệu để hỗ trợ xử lý thông tin.

Sau khi 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.

Ư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 mô hình MVC, cho phép bạn dễ dàng 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 của sản phẩm.

Chức năng điều khiển trên các trang web rất quan trọng, 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ộ điều khiển hiệu quả trên nền tảng các ngôn ngữ hiện đại, cho phép phát triển nhiều hình thức khác nhau.

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 sẽ lớn hơn, dẫn đến tốc độ tải mạng giảm Sử dụng mô hình MVC sẽ giúp tối ưu hóa việc tiết kiệm băng thô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 mang lại tính kết hợp cao, cho phép lập trình viên dễ dàng viết code trên nền tảng website, giúp giảm tải cho server Ngoài ra, cấu trúc của mô hình này cũng tương đối đơn giản, nên ngay cả những người không có nhiều chuyên môn vẫn có thể sử dụng hiệu quả.

Mô hình MVC thường được áp dụng cho các dự án lớn, nhưng đối với các dự án nhỏ, nó có thể trở nên cồng kềnh và tốn nhiều thời gian trong quá trình phát triển cũng như trong việc truyền tải 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ợ

• Bá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 khogmp

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, được trình bày trong Hình 2.2, thể hiện 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

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

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

Hình 2.9 Sơ đồ luồng dữ liệu mức 1 của chức năng báo cáo

Chuẩn hóa

Sá ch Hóa đơn Ad min

Số điện thoại Địa chỉ

ID sách Tên sách Thể loại Hình minh họa

ID hóa đơn Ngày đặt hàng Ngày nhận hàng Phương thức thanh toán Tổng tiền

ID admin Tên Ngày sinh

Số điện thoạiEmailAccountPassword

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óa đon id hóa đon INT o ngày đặt hàng DATETIME ngày nhận hàng DAĨETIME phirang thúc thanh toái VARCHAR(50)

■ x 1 o tong tiền INT I sách_id sách INT 1 khách hàngjd khách hàng INT I

I sách id sách INT Otén sách VARCHAR(45) Ohinh minh họa VARCHAR(2Ũ0) Otác giá VAROdAR(50) số lượng INT o thế loại VARCHAR(5Ũ)

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 ú

I khách hàng id khách hàng IMT

Otên VARCHAR(5Ũ) ngày sinh DATETIME sô điện thoại It-ÍT

OPassword VARCHARÍ50) adrnin id admin INI Otên VARCHAR(5Ũ) ngày sinh DATEĨ1ME

Sũ điện thoại INTOemail VARCHAR(50)Oaccount VARCHAR(50)Opassmord VARCHAR(50)

Id INT 1 Id của nhân viên NOT

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 L sinh nhân viên

NOT NUL Phone_number VARCHA L

255 0866961200 Số điện thoại nhân viên

R 255 nvh@gmail.com Email nhân viên NOT

R 255 Manager Vị trí hiện tại của nhân viên

Avatar TEXT http:// L localhost:8000/ da/files/

6%20%2814%29.P N Ảnh đại diện nhân viên

Giá trị mẫu Mô tả Ghi ch

Id INT 1 Id của ứng viên NOTú

R 255 Male Giới tính ứng viên NOT

R 255 nvh@gmail.com Email ứng viên NOT

255 0866961200 Số điện thoại ứng viên

Date_of_birth DATE 2000-02-02 Ngày tháng năm L sinh của ứng viên

255 Hanoi Ảnh đại diện ứng viên

255 Manager Vị trí hiện tại của ứng viên

255 None Kinh nghiệm của ứng viên

Giá trị mẫu Mô tả Ghi ch ú

Id INT 1 Id của người quản trị NOT

255 ad Tên đăng nhập người quản trị

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

Kết quả sản phẩm

-ỳ o A Not secure I mvc/adíĩiin/calegory/list

STT Ten Danh Muc San Pham Mo Ta Lua Chon

1 Chậu cảnh mini Chiều cao nhỏ hơn lũcm S ử a

2 Chậu cảnh loại nhỏ Caotừ10-40cm S a ử a

3 Chậu cảnh loại vừa Cao từ 40 80cm S a X

4 Chậu cành loại lớn Cao từ 80- 15ữcm s ử a

5 Chậu cành cực lớn chiêu cao trên 150cm S ử a

B “Síchỉ, a DẠt HỌC BÁCH T s a KHOA CỐNG TRAN ọ Q Kí Túc Xá

1 s íTLDâM I s„ Trường Oai ▼ 91 Trân Đại Nghĩ

▼ Trướng Cao đáng nghèCy Bầch Khoa Hà Nột ▼ 0

,SB2ÍD Khoa Chấn thưong(J) Đa, h

Chinh htnh và Cột ▼ □ □ LỄ ThatF I

Gopstsoại Học in Cnmnlp* o Bờnh Vlốn Tai Mũt ớ*k MapdsteSKĨI Tetmsoruse Rôponômepenor

Định hướng phát triển

Mặc dù nhóm đã đáp ứng đầy đủ các yêu cầu của đề tài, nhưng để cải thiện và hoàn thiện sản phẩm hơn nữa, chúng tôi xin đề xuất một số hướng phát triển trong tương lai.

Get in touch with us

Rrst na me: Last name:

Hat Bá Trung Hà Nạ 4.4***** 17revrews Ị> Wewlargermap Bách Khoa Hả cho sản phẩm như sau:

• 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,