TRƯỜNG ĐẠI HỌC KIẾN TRÚC HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

--------------------

BÁO CÁO MÔN HỌC

Công Nghệ Web
LỚP 19CN3 - NHÓM 6
Trang Web Blog Cá Nhân

Nhóm sinh viên thực hiện:

 Nguyễn Khắc Hải (1955010079) (Nhóm trưởng)
 Trịnh Đình Hiếu (1955010091)
 Nguyễn Đình Đạt (1955010055)

Giáo viên hướng dẫn:

Ths.Nguyễn Thị Nguyệt

Hà Nội, tháng 11 năm 2022

 MỤC LỤC
LỜI NÓI ĐẦU......................................................................................................... 4
Phần 1: Giới thiệu đề tài:........................................................................................6
1.1: Lí do chọn đề tài............................................................................................6
1.2: Các vấn đề cần làm.......................................................................................6
1.2.1: Phát biểu bài toán...................................................................................6
1.2.2: Xây dựng bài toán...................................................................................7
Phần 2: Sơ Lược Về Công Nghệ Web....................................................................8
2.1: Khái niệm Công nghệ Web..........................................................................8
2.2: Lịch sử ra đời Công Nghệ Web....................................................................8
2.3: Các phiên bản từ 1.0 đến 4.0........................................................................8
2.4: Các yêu cầu tối thiểu của Website:............................................................10
2.5: Những thành phần cấu tạo nên một Website:..........................................10
2.6: Các thuật ngữ cơ bản..................................................................................11
Phần 3: Cơ Sở Lí Thuyết......................................................................................11
3.1: HTML.......................................................................................................... 11
3.1.1: Định nghĩa.............................................................................................11
3.1.2: Các thành phần cơ bản:.......................................................................11
3.1.3: Các thẻ cơ bản trong HTML:..............................................................12
3.2: CSS............................................................................................................... 13
3.2.1: Định nghĩa.............................................................................................13
3.2.2: Tầm quan trọng của CSS.....................................................................13
3.2.3: Vị trí đặt mã CSS..................................................................................14
3.2.4: CSS Selector..........................................................................................14
3.2.5: Các thuộc tính định dạng văn bản:.....................................................14
3.3: Javascript.....................................................................................................16
3.3.1: Định nghĩa.............................................................................................16
3.3.2: Tầm quan trọng của Javascript...........................................................16
3.3.3: Vị trí đặt mã Javascript:......................................................................16
3.3.4: Sơ lược về cú pháp trong Javascript:..................................................16
3.4: NodeJS......................................................................................................... 19
3.4.1: Khái niệm.............................................................................................. 19
3.4.2: Đặc điểm của NodeJS...........................................................................19
3.4.3: NodeJS có thể làm được những gì.......................................................20
3.4.4: Ưu điểm của NodeJS............................................................................20
3.4.5: Nhược điểm của NodeJS......................................................................21
3.5: Express Framework....................................................................................21
3.5.1: Định nghĩa.............................................................................................21
 3.6: MySQL.........................................................................................................22
3.6.1: Giới thiệu MySQL................................................................................22
3.6.2: Kiểu dữ liệu trong MySQL...................................................................23
3.6.3: Mối quan hệ và ràng buộc trong MySQL...........................................25
3.6.4: Một số câu lệnh trong MySQL............................................................26
3.7: Mô hình MVC.............................................................................................27
3.7.1: Tổng quan mô hình MVC....................................................................27
3.7.2: MVC với Express..................................................................................27
3.8: Quy trình phát triển phần mềm Agile.......................................................28
3.8.1: Khái niệm.............................................................................................. 28
3.8.2: Mô tả......................................................................................................28
3.8.3: Ưu điểm của Agile.................................................................................28
3.8.4: Nhược điểm của Agile...........................................................................29
3.8.5: Ứng dụng...............................................................................................29
Phần 4: Phân tích thiết kế chương trình..............................................................29
4.1: Khảo sát hiện trạng.....................................................................................29
4.2: Mô hình phân cấp chức năng.....................................................................29
4.3: Mô hình dữ liệu mức khung cảnh..............................................................30
4.4: Mô hình dữ liệu mức đỉnh..........................................................................31
4.5: Biểu đồ luồng dữ liệu mức dưới đỉnh hoạt động quản trị.......................31
4.6: Biểu đồ luồng dữ liệu mức dưới đỉnh hoạt động độc giả.........................32
4.7: Mô hình liên kết thực thể...........................................................................33
4.7.1: Chuyển đổi mô hình thực thể liên kết thành các bản ghi logic.........33
4.8: Thiết kết cơ cơ dữ liệu mức vật lí..............................................................33
Phần 5: Xây dựng đề tài........................................................................................33
5.1: Xây dựng cấu trúc dự án (MVC)...............................................................33
5.2: Thiết kết cơ sở dữ liệu, xây dựng Model...................................................34
5.2.1: Thiết kế cơ sở dữ liệu trong MySQL...................................................34
5.2.2: Xây dựng Model....................................................................................35
5.3: Xây dựng Controller:..................................................................................35
5.4: Xây dựng View:...........................................................................................36
Phần 6: Chương trình minh hoạ..........................................................................36
Phần 7: Kết Luận...................................................................................................38
Mặt tích cực:....................................................................................................... 38
Còn hạn chế :......................................................................................................39
Phân chia công việc:...........................................................................................39
Tài liệu tham khảo:............................................................................................39
 LỜI NÓI ĐẦU
Trong cuộc sống của chúng ta ngày nay, thế giới ngày càng phát triển một cách
nhanh chóng bởi nhờ có một phần lớn từ các ngành công nghệ, điển hình trong
số đó phải kể tới đó là công nghệ Web. Khái niệm về website được hình thành
từ thập niên 90 khi mà các trình duyệt đi vào giai đoạn hoàn thiện và phát triển
mạnh mẽ như ngày nay. Không có lí do nào khiến chúng ta còn hoài nghị về lợi
ích mà công nghệ web mang lại cho chúng ta cũng như cho sự phát triển của thế
giới giai đoạn hiện tại và trong tương lai.

Liệu đã sắp đến lúc công nghệ web có thể hoàn toàn thay thế cho các ứng dụng
desktop hiện tại. Mới đây cộng đồng mã nguồn mở đã và đang hi vọng sẽ đưa
ứng dụng web đến gần với ứng dụng desktop hơn. Giả sử mọi mong muốn của
họ đều trở thành sự thực khi mà ứng dụng web đã có đủ sức mạnh để thay thế
cho ứng dụng Desktop khi đó công việc của chúng ta sẽ trở nên đơn giản hơn rất
nhiều. Bạn thử tưởng tượng nhé thay vì một công ty có hàng trăm máy tính và
phải cài hàng trăm ứng dụng Desktop giống nhau thay vào đó chúng ta có thể
cài duy nhất một ứng dụng web để mọi người cùng dùng không những tại công
ty mà họ còn có khả năng làm việc tại nhà. Mọi trao đổi sẽ được diễn ra trên môi
trường web, những công việc đó ngày nay đã thực hiện được dựa trên nền tảng
công nghệ web và các phần mềm kết nối trên môi trường internet xong điều này
là chưa phổ biến. Chúng ta hoàn toàn có thể tin tưởng vào một tương lai phát
triển mạnh mẽ của công nghệ web. Mới đây một số ý tưởng cho rằng tại sao
chúng ta phải cài đặt hệ điều hành trong khi nếu chúng ta khởi động từ máy tính
và một trình duyệt web tương đương với một hệ điều hành sẽ được chúng ta sử
dụng để thay thế cho các hệ điều hành hiện nay. Mặc dù ý tưởng đó chưa được
thành sự thực xong nó cho thấy khả năng ứng dụng rộng rãi của công nghệ web
trong tương lai mà con người muốn hướng tới.
Qua đó chúng ta có thể xây dựng các website căn bản cho riêng mình và phát
triển nó để sau khi ra trường chúng ta có những kiến thức nhất định trong lĩnh
vực xây dựng website cho các doanh nghiệp trong tương lai.

Chúng ta còn được bắt tay xây dựng từng khâu trong việc xây dựng một website
hoàn chỉnh với HTML (Ngôn ngữ được sử dụng phổ biến trên các trình duyệt
web như một thành phần không thể thiếu), CSS (Cascading style sheet công cụ
xây dựng giao diện cho các website), Javascript (Công cụ hỗ trợ trong việc tạo
hiệu ứng và các bài toán phía trình duyệt), NodeJS (Ngôn ngữ xây dựng website
động....) , …
Phần 1: Giới thiệu đề tài:

1.1: Lí do chọn đề tài

Công nghệ Web, là một thế giới rộng lớn với muôn vàn những kiến thức
chuyên mô, rất nhiều ngôn ngữ, hệ quản trị cơ sở dữ liệu và mô hình xây dựng.
Các trang web lớn, nhỏ đều được tạo ra bời những công nghệ và ngôn ngữ phù
hợp với tính chất đặc thù riêng của chúng. Khi được tiếp cận môn học Công
nghệ Web, một môn học vô cùng bổ ích và có tính áp dụng cao cho định hướng
công việc của chúng em trong tương lai. Vì chỉ trong một thời gian học và tìm
hiểu môn học còn ngắn, các hiểu biết chưa được chuyên sâu để có thể tạo ra một
trang web hoàn hảo nhất. Nhưng với mục tiêu áp dụng triệt để những kiến thức
đã được cô Nguyễn Thị Nguyệt chỉ dạy, và những gì tìm hiểu được trên mạng.
Nhóm chúng em sau những bàn bạc và thảo luận thì đã đưa ra quyết định chọn
xây dựng một Trang Web Blog cá nhân, vì đề tài này thoả hết những tiêu chí cần
và đủ sau khi được học môn học này, trong một thời gian hạn hẹp. Nhu cầu tìm
kiếm thông tin luôn là vấn đề đặt ra khi người dùng sử dụng mạng internet để
tìm hiểu về nhiều lĩnh vực trong đời sống, từ đó chúng em chọn đề tài xây dựng
trang web Blog cá nhân để lan toả chia sẻ những kiến thức mà bổ ích mà chúng
em đã gặp đã tìm hiểu, tiếp cận đến nhiều người khác, mong rằng những kiến
thức từ các bài viết của trang Blog có ích đối với mọi người.

1.2: Các vấn đề cần làm

1.2.1: Phát biểu bài toán

Tuy là một trang Web cơ bản nhưng thông qua đề tài nhóm muốn vẫn
bao quát toàn bộ những chức năng cơ bản và quan trọng đối với một website,
bao gồm:

+ Giao diện

+ Trang quản trị

+ Chức năng tối thiểu: Login/ Quản trị/ Thêm, sửa, xoá/ Submit

+ Thống kê bài viết, lượt view

1.2.2: Xây dựng bài toán

Hệ thống website cần 2 phần: Giao diện người dùng và trang admin

Giao diện người dùng:

+ Hiển thị lượt view của từng bài viết

+ Tìm kiếm bài viết theo tên, theo thể loại, …

+ Hiển thị các chi tiết bài viết

+ Các bài viết nổi bật

+ Thông tin liên hệ

Giao diện trang admin:

+ Thống kê lượt view, thống kê người dùng

+ Thay đổi thông tin, mật khẩu của người dùng

+ Quản lí thêm sửa xoá các bài viết

Để xây dựng trang web chúng em chọn một số công nghệ như:

+ HTML,

+ CSS,

+ Javascript,

+ NodeJS

+ Express (một Framework cho NodeJS),

+ MySQL,
+ MVC (mô hình thiết kế được sử dụng trong kỹ thuật phần mềm),

+ Agile (quy trình phát triển phần mềm).

Phần 2: Sơ Lược Về Công Nghệ Web

2.1: Khái niệm Công nghệ Web

Công nghệ web là một thuật ngữ chung đề cập đến nhiều ngôn ngữ và
gói đa phương tiện được sử dụng kết hợp với nhau, để tạo ra các trang web. Mỗi
công nghệ có chức năng riêng biệt và cần yêu cầu sử dụng kép ít nhất thêm một
công nghệ khác. Do đó, có thể nói rằng tất cả các thành phần tạo nên một trang
web phụ thuộc lẫn nhau.
2.2: Lịch sử ra đời Công Nghệ Web
Vào những năm 1990 Word wide web (WWW) ra đời bởi Tim berners
Lee, một nhà khoa học của Anh. Sơ khởi ra đời của website nhằm chia sẻ những
thông tin giữa các nhà khoa học trên thế giới.
Với mong muốn lợi ích hơn cho các nhà khoa học bằng cách tra cứu nhiều tài
liệu hơn qua các đường dẫn, và thậm chí tạo một chuỗi liên kết các dữ liệu trên
toàn cầu, mà khi chỉ là chỉ in văn bản trực tiếp trên internet
Vì thế vào 3.1989 ông đã viết đề xuất đầu tiên cho Word Wide Web và đề xuất
thứ 2 được gửi vào 5/1990 cùng với một kỹ sư người Bỉ tên Robert Cailliau, và
kết quả đã được chính thức hóa qua một đề xuất vào tháng 11/1990. Điều này
đồng nghĩa đã có bản phác thảo các khái niệm và xác định các thuật ngữ quan
trọng đằng sau web. Phác thảo này được mô tả như một dự án siêu văn bản
“word wide web” và web được xem bởi các trình duyệt. Và ý tưởng này không
ai có thể đánh giá được mức độ thành công như thế nào.
Tim berners Lee tiếp tục thực hiện kế hoạch của mình bằng việc phát triển 3
thành phần chính trong web: HTTP, HTML, Và trình duyệt đầu tiên trên thế giới
với tên gọi là: "World Wide Web". Và trang web đầu tiên được ra mắt với thế
giới vào 6/8/1991 và cũng là năm HTML được sinh ra và vẫn còn được ứng
dụng cho việc thiết kế website ngày hôm nay.
2.3: Các phiên bản từ 1.0 đến 4.0
 Web 0: Internet được chính thức tạo ra vào năm 1989 với đề xuất của
Tim Berners-Lee, một nhà khoa học máy tính làm việc tại Tổ chức nghiên cứu
hạt nhân châu Âu (CERN). Ông đề xuất một mạng máy tính mở để theo dõi
nghiên cứu tại CERN. Ông đã thực hiện giao tiếp thành công đầu tiên giữa trình
duyệt web và máy chủ qua internet vào năm 1990. Bắt đầu với trang web đầu
tiên của World Wide Web Project vào năm 1991, Berners-Lees vận động các
giáo sư, sinh viên, lập trình viên máy tính và những người đam mê Internet tạo
ra nhiều trình duyệt và máy chủ cho internet.
Web 1.0: Đến năm 1999, có khoảng 3 triệu trang web. Phần lớn các trang
web này là các trang web tĩnh, chỉ có thể đọc. Vai trò trung bình của người dùng
internet bị giới hạn trong việc đọc thông tin được trình bày. Người dùng thích
điều hướng trang web thông qua các thư mục liên kết của Yahoo.Ở thời đại Web
1.0 đã xuất hiện các công cụ tìm kiếm. Các ứng dụng giỏ mua hàng đầu tiên mà
hầu hết các trang web thương mại điện tử sử dụng ở một số hình dạng hoặc hình
thức về cơ bản thuộc danh mục Web 1.0. Mục tiêu tổng thể là giới thiệu sản
phẩm cho khách hàng tiềm năng thông qua một trang web, các nhà bán lẻ cũng
có thể cung cấp một phương thức mua hàng cho bất kỳ ai (bất cứ nơi nào trên
thế giới) mua sản phẩm của họ.
Web 2.0: Trong khi Web 1.0 là Internet chỉ đọc, thì Web 2.0 là Internet
đọc-ghi. Web 2.0 tham gia vào việc tạo nội dung thông qua chia sẻ và cộng tác,
chẳng hạn như phương tiện truyền thông xã hội và viết blog. Năm 1999 đánh
dấu sự khởi đầu của kỷ nguyên Đọc-Viết-Xuất bản với những đóng góp đáng
chú ý từ LiveJournal (Ra mắt vào tháng 4 năm 1999) và Blogger (Ra mắt vào
tháng 8 năm 1999). Đến năm 2006, có khoảng 85 triệu trang web. Trong Web
2.0, hai công cụ thay đổi lớn cho Internet là Wikipedia và Facebook. Web 2.0
thực sự là khởi đầu của việc giải quyết vấn đề hợp tác bằng Internet. Các cá
nhân có thể nhận được sự giúp đỡ của nhiều người dùng trong khu vực hoặc bất
cứ nơi nào trên toàn cầu về một vấn đề thông qua truy vấn một trang web trợ
giúp. Một vài sự phát triển đáng chú ý của Web 2.0 là Twitter, YouTube,
eZineArticles, Flickr và Facebook.
 Web 3.0: Web 3.0 được gọi là web ngữ nghĩa. Bằng cách kết hợp một
đánh dấu ngữ nghĩa và dịch vụ web, Web 3.0 hứa hẹn tiềm năng cho nội dung
có thể đọc được trên máy, được phát triển để các máy có thể tương tác trực tiếp
với nhau. Web 3.0 có nghĩa là chuẩn hóa các hệ thống, ngôn ngữ, ấn phẩm và
công cụ đã được phát triển, cũng như cung cấp cấu trúc để cập nhật và liên kết
các hệ thống hiệu quả hơn để sử dụng lại trên các ứng dụng khác nhau. Ngữ
nghĩa chỉ đơn thuần là thêm thông tin bổ sung để giúp người dùng hiểu ý nghĩa
của thông tin. Web 3.0 liên kết các mục dữ liệu khác nhau với nhau để tạo bối
cảnh và mang lại ý nghĩa. Web 3.0 cũng chứng kiến sự xuất hiện của Internet ảo
và giao tiếp 3D, ứng dụng này vượt ra ngoài việc chơi game và phát triển nhanh
chóng.
Web 4.0: Web 4.0 là một web mở, liên kết và thông minh. Web 4.0 tải các
trang web nhanh hơn với kết quả chính xác hơn. Web 4.0 có thể so sánh với bộ
não của con người. Toàn bộ web là một hệ điều hành duy nhất nơi thông tin
truyền từ điểm này sang điểm khác. Web 4.0 còn được gọi là web cộng sinh.
Mục tiêu của web cộng sinh là sự tương tác giữa con người và máy móc trong
sự cộng sinh. Ranh giới giữa con người và thiết bị sẽ gần hơn. Web 4.0 sẽ tương
tác với người dùng giống như cách con người giao tiếp với nhau. Môi trường
Web 4.0 sẽ luôn là một thế giới kết nối.
2.4: Các yêu cầu tối thiểu của Website:
Để thiết lập và đưa vào hoạt động thì Website phải đáp ứng tối thiểu 3
yếu tố cơ bản:
Tên Website (Tên miền hay Domain name)
Web Hosting (Nơi lưu trữ trên máy chủ Internet)
Các trang Web (Source code)
2.5: Những thành phần cấu tạo nên một Website:
Ngôn ngữ siêu văn bản
Ngôn ngữ kịch bản
Các thành phần StyleSheet
Ngôn ngữ xử lí dữ liệu phía Server
2.6: Các thuật ngữ cơ bản
+ WWW (World Wide Web): mạng toàn cầu các máy tính sử dụng Internet để
trao đổi tài liệu Web.
+ Protocol: là tập hợp các quy tắc được thống nhất giữa hai máy tính nhằm thực
hiện trao đổi dữ liệu được chính xác.
+ Web page: một tài liệu (thường là HTML) được thiết kế để phân phối trên môi
trường web.
+ Web site: là tập hợp các web page có liên quan đến 1 công ty hay cá nhân
+ Home page: là web page có mức cao nhất, gọi là trang chủ của website.
+ IP Address: một con số xác định duy nhất cho mỗi máy tính trên Internet
+ Domain name: tên xác định website
+ DNS (Domain name service): một chương trình chạy trên server, chuyển tên
miền sang IP và ngược lại.
+ Web host: Một web server cung cấp dịch vụ lưu trữ cho web site của các công
ty, tổ chức hay cá nhân.
+ URL (Uniform Resource Locator): Một địa chỉ web, là một chuẩn để xác định
các tài liệu (trang) web trên Internet.

Phần 3: Cơ Sở Lí Thuyết
3.1: HTML
3.1.1: Định nghĩa
HTML: HyperText Markup Language – ngôn ngữ đánh dấu siêu văn
bản. Do Tim Berner-Lee phát minh và trở thành ngôn ngữ chuẩn để tạo trang
web. HTML dùng các thẻ (tags) để định dạng dữ liệu. Tạo khung/bảng cho trang
web. Cấu trúc cơ bản của một trang HTML: Header, Title, Body, Footer.
3.1.2: Các thành phần cơ bản:
+ Thẻ (tag): là một tập hợp ký hiệu được định nghĩa trong HTML có ý nghĩa đặc
biệt. (Thẻ bắt đầu bởi "<" và kết thúc bởi ">", thẻ mở: <tên thẻ>, thẻ đóng: </tên
thẻ>)
+ Phần tử (element): có thể bao gồm thẻ mở, thẻ đóng và nội dung bên trong cặp
thẻ mở, đóng. Có hai loại phần tử trong HTML (Phần tử chứa nội dung: bao
gồm thẻ mở và thẻ đóng, Phần tử rỗng: bao gồm một thẻ)
+ Thuộc tính: mỗi thẻ có thể một hay nhiều thuộc tính đi kèm. Thuộc tính được
nhập ngay trước ngoặc đóng ‘>’ của thẻ mở. Có thể có nhiều thuộc tính trong
một thẻ, các thuộc tính phân cách nhau khoảng trắng. Các giá trị thuộc tính có
thể đặt trong “”, ‘’ hoặc không có. Nếu giá trị là chuỗi ký tự có khoảng trắng bên
trong, bắt buộc phải dùng “” hay ‘’ để bao chuỗi lại.
3.1.3: Các thẻ cơ bản trong HTML:
+ Thẻ định dạng trang: <body>
+ Thẻ định dạng văn bản: <font>, <p>, <b>, <i>, <u>…
+ Thẻ tạo siêu liên kết (hyperlink): <a>
+ Thẻ định dạng danh sách: <ul>, <ol>, <li>
+ Thẻ chèn hình ảnh: <img>
Ngoài ra, bảng dưới đây là tập hợp một số thẻ trong HTML:

Thẻ Mô tả chức năng

<!DOCTYPE> Xác định cho trình duyệt biết phiên bản HTML mà bạn
đang sử dụng
<html> Xác định một tài liệu HTML
<head> Xác định phần đầu của tài liệu HTML
<title> Xác định tiêu đề của trang web
<body> Xác định phần thân của tài liệu HTML
<h1> - <h6> Tạo những đề mục quan trọng trong trang web
<p> Xác định một đoạn văn bản
<br> Chèn một ngắt xuống dòng
<hr> Tạo một đường kẻ phân cách nằm ngang
<!-- --> Xác định một đoạn chú thích
<address> Xác định thông tin liên hệ của tác giả (hoặc chủ sở hữu)
trang web
<b> Xác định đoạn văn bản được in đậm
<blockquote> Xác định một "đoạn trích dẫn" từ một website khác
<em> Xác định một đoạn văn bản được định dạng kiểu chữ in
 nghiêng
<ins> Tạo một đường gạch chân lên văn bản
<mark> Đánh dấu màu nền nổi bật cho văn bản
<pre> Giúp cho nội dung mà bạn muốn hiển thị lên màn hình
được giữ nguyên định dạng giống như trong lúc soạn thảo
<progress> Tạo một thanh tiến trình
<sub> Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới
văn bản bình thường
<time> Đánh dấu những phần văn bản là: thời gian, ngày tháng,
ngày lễ, ....
<frame> Xác định một khung trong một bộ khung
<noframes> Xác định một nội dung sẽ được hiển thị khi trình duyệt
không hỗ trợ thẻ <frame>
<iframe> Nhúng một trang web khác vào trang web hiện tại
<map>&<area> Tạo một bản đồ ảnh
<audio> Tạo một "trình phát nhạc" cho trang web
<video> Tạo một "trình xem phim" cho trang web
<ul> Xác định một danh sách không có thứ tự
<ol> Xác định một danh sách có thứ tự
<table> Xác định phần tử là một cái bảng

3.2: CSS
3.2.1: Định nghĩa
CSS là chữ viết tắt của cụm từ Cascading Style Sheets, nó được sử dụng
để "định dạng" cho các phần tử trên trang web, hay nói cách khác là nó quyết
định việc các phần tử HTML khi hiển thị lên trang web sẽ trông như thế nào.
3.2.2: Tầm quan trọng của CSS
Ngày nay, khi người dùng đánh giá chất lượng của một trang web, họ
không chỉ xem xét nội dung của các bài viết trên trang web, mà họ còn đặc biệt
quan tâm đến giao diện, xem coi nó có được dễ nhìn, dễ sử dụng hay không, cho
nên "giao diện" của trang web đóng một vài trò rất quan trọng.

Với việc áp dụng CSS trong thiết kế giao diện website, chúng ta có thể
định dạng cho các phần tử trên trang web hiển thị giống với ý muốn của mình,
từ đó tạo ra được những trang web có nội dung đặc sắc, sinh động, phong phú,
đa dạng
 3.2.3: Vị trí đặt mã CSS
+ Inline style (css nội tuyến): Đặt các thuộc tính CSS trong thuộc tính @style
của thẻ HTML
+ Embed style (nhúng css): Đặt trong thẻ <style>
+ External (liên kết ngoài): Đặt ở file .css sau đó liên kết vào trang web với thẻ
3.2.4: CSS Selector
Selector cơ bản
+ HTML Selector: chọn các thẻ theo tên (Ví dụ: h1{} Chọn tất cả các thẻ <h1>)
+ Class Selector: chọn các thẻ theo thuộc tính @class (Ví dụ: .abc {} Chọn tất
cả các thẻ <tag class = “abc”>)
+ ID Selector: chọn thẻ theo thuộc tính @id (Ví dụ: #xyz {} Chọn thẻ <tag id =
“xyz”>)
Selector nâng cao
+ Selector phân vùng
+ Nhiều selector
+…
3.2.5: Các thuộc tính định dạng văn bản:
CSS cung cấp nhiều thuộc tính định dạng văn bản. Sau đây là một số
thuộc tính thường được sử dụng
+ Font chữ
+ Kích thước font
+ In đậm, in hoa/thường, in nghiêng, gạch bỏ/gạch dưới/gạch trên
+ Màu văn bản
+ Chiều cao mỗi hàng
+ Khoảng trống giữa các ký tự, các từ
+ Căn lề
+ Làm bóng văn bản
Các thuộc tính Font:
+ font-family: xác định font chữ
+ font-size: xác định kích thước font
+ font-variant: xác định kiểu chữ hoa in nhỏ
+ font-style: xác định kiểu in nghiêng
+ font-weight: xác định in đậm
Các thuộc tính văn bản:
+ text-align: căn lề
+ text-decoration: trang trí văn bản
+ text-shadow: làm bóng văn bản.
Không gian hàng và kí tự:
+ line-height: chiều cao mỗi hàng văn bản.
+ letter-spacing: Khoảng cách giữa các ký tự
+ Word-spacing: khoảng cách giữa các từ
Định dạng liên kết:
+ a {} Chọn tất cả các thẻ a
+ a: link {} Chọn tất cả các liên kết ở trạng thái bình thường (chưa click)
+ a: visited {} Chọn tất cả các liên kết ở trạng thái đã thăm (đã click)
+ a: active {} Chọn tất cả các liên kết ở trạng thái tích cực (đang được chọn)
+ a: hover {} Chọn tất cả các liên kết ở trạng thái có chuột (đang đưa chuột lên)
Quy luật nạp chồng:
Khi có nhiều selector chọn một phần tử thì sẽ xảy ra nạp chồng css.
Việc nạp chồng xảy ra dưới 2 hình thức là cộng hợp và ghi đè
+ Cộng hợp (Các thuộc tính css khác nhau từ nhiều selector sẽ được áp dụng cho
phần tử)
+ Ghi đè (Các thuộc css giống nhau từ nhiều selector sẽ bị ghi đè theo thứ tự ưu
tiên)
Thứ tự ưu tiên tăng dần từ trái sang phải
+ Inline -> Id selector -> Class selector -> HTML Selector -> Mặc định
+ Định nghĩa sau -> định nghĩa trước
+ Sử dụng !important ngay sau mỗi thuộc tính css để thay đổi thứ tự ưu tiên
thành cao nhất
3.3: Javascript
3.3.1: Định nghĩa
JavaScript (viết tắt là JS) là một ngôn ngữ lập trình kịch bản phía máy
khách, mã lệnh được thực thi bởi trình duyệt của người dùng. JavaScript được
sử dụng rộng rãi trong việc kết hợp với HTML/CSS để thiết kế web động.
3.3.2: Tầm quan trọng của Javascript
JavaScript là một ngôn ngữ lập trình phổ biến bậc nhất thế giới và là một
trong ba ngôn ngữ không thể thiếu đối với một lập trình viên we (HTML, CSS,
JavaScript). Nếu một trang web mà không có JavaScript thì trang web đó thật sự
là rất nhàm chán và vô vị. Không những thế Javascript còn được dùng làm ngôn
ngữ chính trong NodeJS.
3.3.3: Vị trí đặt mã Javascript:
Để sử dụng JavaScript trong trang web, chúng ta có hai cách cơ bản như
sau:

+ Cách 1: Viết mã lệnh JavaScript trực tiếp vào trang web.

+ Cách 2: Viết mã lệnh JavaScript vào tập tin JavaScript (tập tin có phần đuôi
là .js)
3.3.4: Sơ lược về cú pháp trong Javascript:
Biến:
Dùng để lưu trữ một giá trị dữ liệu. Khai báo biến bằng từ khoá (var, const, let),
gán giá trị cho biến bằng cách: tenbien = giatri;
Toán tử:
+ Toán tử số học: Các toán tử trong JavaScript có chức năng giống với toán tử
trong toán học. (+, -, *, /, %)
+ Toán tử gán: +=, -=, *=, /=, %=
+ Toán tử logic: &&, || ,!
+ Toán tử so sánh: >, >=, <, <=, ==, === , !=, !==
 Hàm (Function)
Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo
một thứ tự xác định để xây dựng thành một chức năng cụ thể. Mỗi hàm sẽ có
một cái tên và hàm chỉ thực thi khi nó được gọi đến tên.
Khai báo hàm: function tenham () {
//Danh sách các câu lệnh của hàm
}
Gọi hàm: tenham ();
Đối tượng (Object):
Trong JavaScript, đối tượng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá
trị đồng thời (có thể là hàm, biến, mảng, ...).
Khai báo đối tượng: datatype tendoituong {
//Có thể khai báo hàm, biến, mảng, ….
}
Truy cập phương thức của đối tượng: tendoituong. tenphuongthuc ();
Truy cập thuộc tính cảu đối tượng: tendoituong. tenthuoctinh;
Mảng (Array):
Mảng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá trị đồng thời, những
giá trị đó có thể là một tập hợp có điểm chung với nhau.
Khai báo mảng: kieudulieu tenmang = [phần tử 1, phần tử 2, …];
Truy cập phần tử trong mảng: tenmang [chỉ số phần tử cần truy cập];
Lệnh điều kiện if/else:
Trong JavaScript, điều kiện là một biểu thức so sánh hoặc logic để đưa ra một
giả thuyết. Nếu giả thuyết đúng, đồng nghĩa với việc điều kiện đúng và điều kiện
sẽ nhận giá trị là true. Nếu giả thuyết sai, đồng nghĩa với việc điều kiện sai và
điều kiện sẽ nhận giá trị trong lệnh else.
Cú pháp: if (điều kiện) {// đoạn mã thực thi nếu điều kiện đúng} else {// nếu
điều kiện sai}
Swich/case:
Lệnh switch case dùng để xác định một danh sách các trường hợp và trong mỗi
trường hợp sẽ có một đoạn mã, khi giá trị của bạn trùng khớp với trường hợp
nào thì đoạn mã của trường hợp đó sẽ được thực thi.
Cú pháp:
switch (giá trị) {
case trường hợp 1:
//đoạn mã này sẽ được thực thi khi giá trị trùng khớp với trường hợp 1
break;
case trường hợp 2:
//đoạn mã này sẽ được thực thi khi giá trị trùng khớp với trường hợp 2
break;
...
...
default:
//đoạn mã này sẽ được thực thi khi giá trị KHÔNG trùng khớp trường hợp
nào cả
break;
}
Vòng lặp for:
Trong JavaScript, vòng lặp là một loại cú pháp giúp ta lặp lại việc thực thi một
đoạn mã nhiều lần.
Cú pháp: for (biểu thức 1; biểu thức 2; biểu thức 3) {
//Đoạn mã mà ta muốn được thực thi nhiều lần
}
Vòng lặp while, do/while:
Cú pháp:
while (điều kiện) {
//Đoạn mã mà ta muốn thực thi
}
Cú pháp do/while:
do {
 //Đoạn mã mà ta muốn thực thi
} while (điều kiện);
3.4: NodeJS
3.4.1: Khái niệm
+ NodeJS là một nền tảng (platform) phía Server side được xây dựng, vận hành
trên V8 JavaScript runtime của Chrome giúp xây dựng và phát triển các ứng
dụng mạng một cách nhanh chóng và có khả năng mở rộng dễ dàng.
+ Node.js ra mắt vào năm 2009, bởi Ryan Dahl và nhận sự bảo trợ từ công ty
Joyent (Hoa Kỳ).
+ Phần core bên dưới của Node.js hầu hết được viết bằng C++. Chính vì thế mà
tốc độ xử lý và hiệu năng khá cao.
+ Bên cạnh đó, Node.js còn tạo ra ứng dụng có tốc độ xử lý nhanh với thời gian
thực (real-time).
+ Node.js cũng được áp dụng để tạo các sản phẩm có lượng truy cập lớn, mở
rộng nhanh và đổi mới công nghệ… hoặc tạo dự án startup tiết kiệm thời gian
nhất.

3.4.2: Đặc điểm của NodeJS

Nodejs có nhiều đặc điểm nổi bật, vượt trội. Nắm được các đặc điểm này
sẽ giúp bạn hiểu sâu hơn về Nodejs, đồng thời đưa ra quyết định sử dụng nền
tảng này chính xác.

+ Bất đồng bộ và phát sinh sự kiện (Non-blocking and Event Driven): Tất các
các APIs của thư viện Node.js đều bất đồng bộ (non-blocking), NodeJS không
cần đợi một API trả về dữ liệu. Server chuyển sang một API khác sau khi gọi nó
và có cơ chế riêng để gửi thông báo và nhận phản hồi về các hoạt động của
Node.js và API đã gọi.
+ Tốc độ nhanh: Phần core phía dưới được viết gần như toàn bộ bằng C++ kết
hợp Chrome V8 Engine nên tốc độ xử lý công việc của Node.js cực nhanh,
nhưng vẫn đảm bảo được tính chuẩn xác.
+ Đơn giản – Hiệu năng cao: Node.js sử dụng một mô hình luồng đơn luồng
(single thread) và các sự kiện lặp (event-loop). Cơ chế sự kiện cho phép phía
Server trả về phản hồi theo non-blocking, đồng thời tăng hiệu quả sử dụng. Các
luồng đơn cung cấp dịch vụ cho nhiều request hơn hẳn Server truyền thống.
+ Không lưu bộ nhớ đệm (non buffer): Nền tảng Node.js không có vùng nhớ
đệm, tức không cung cấp khả năng lưu trữ dữ liệu buffer.

3.4.3: NodeJS có thể làm được những gì

Là nền tảng phát triển ứng dụng mạnh mẽ, Nodejs có thể đáp ứng mọi
nhu cầu lập trình, phát triển ứng dụng thông qua javascript, là một ngôn ngữ
thông dụng hiện nay (frontend, backend). Các chuyên gia trong lĩnh vực lập
trình, công nghệ khuyên dùng Nodejs khi phát triển các ứng dụng như
Websocket server, Fast File Upload Client, Ad Server, Cloud Services,
Microservice, RESTful API, Any Real-time Data Application, …

3.4.4: Ưu điểm của NodeJS

Nhận và xử lý nhiều kết nối chỉ với một single-thread giúp hệ thống tốn
ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy
vấn.
+ NodeJS tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ vì áp
dụng ưu điểm non-blocking I/O của Javascript.
+ Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp
với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON.
+ Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh. Rất
phù hợp để áp dụng NodeJS để xây dựng các ứng dụng Single page Application,
các ứng dụng không muốn tải lại trang, gồm rất nhiều request từ người dùng cần
sự hoạt động nhanh, các ứng dụng thời gian thực như ứng dụng chat, các dịch vụ
mạng xã hội như Facebook, Twitter, …
+ NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là NodeJS có thể xử lý
hàng nghìn process và trả ra một luồng khiến cho hiệu xuất hoạt động đạt mức
tối đa nhất và tuyệt vời nhất.
+ Streamming Data: Các web thông thường gửi HTTP request và nhận phản hồi
lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây
dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho
các luồng dữ liệu khác.
+ Viết được cho cả 2 phía server và client. Chạy đa nền tảng trên Windows,
MAC hoặc Linux. Hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn phí.

3.4.5: Nhược điểm của NodeJS

+ Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tài nguyên.
Bởi vì NodeJS được viết bằng C++ & Javascript, nên phải thông qua thêm 1
trình biên dịch của NodeJS sẽ lâu hơn 1 chút.
+ Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host không
phải là điều dễ dàng.
+ Thiếu sự kiểm duyệt chất lượng các module NodeJS.
3.5: Express Framework
3.5.1: Định nghĩa
Expressjs là một framework được xây dựng trên nền tảng của Nodejs.
Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs
hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử
dụng. Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ. Về
performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình
tốt hơn. Chứ không làm giảm tốc độ của NodeJS. Và hơn hết, các Framework
nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một core function,
chẳng hạn: SailsJS, MEAN, ...
 Hình 1: Cấu trúc của Express
+ Root:
+ app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa, ... để ứng dụng
của chúng ta chạy.
+ package. json chứa các package cho ứng dụng chạy. Nếu đã làm với PHP hoặc
RoR rồi thì file này có chức năng tương tự như composer. json hoặc Gemfile
+ Folder routes: chứa các route có trong ứng dụng
+ Folder view: chứa view/template cho ứng dụng
+ Folder public chứa các file css, js, images, ...cho ứng dụng
3.6: MySQL
3.6.1: Giới thiệu MySQL
SQL (Structured Query Languge hay ngôn ngữ truy vấn có cấu trúc) là
một loại ngôn ngữ máy tính phổ biến để tạo, sửa, và lấy dữ liệu từ một hệ quản
trị cơ sở dữ liệu quan hệ. Ngôn ngữ này phát triển vượt xa so với mục đích ban
đầu là để phục vụ các hệ quản trị cơ sở dữ liệu đối tượng-quan hệ. Nó là một tiêu
chuẩn ANSI/ISO.

Hệ quản trị cơ sở dữ liệu:

Một hệ quản trị cơ sở dữ liệu (tiếng Anh: Database Management System, viết

tắt DBMS) là một chương trình máy tính (một bộ các chương trình) được thiết kế
để quản lý một cơ sở dữ liệu, một tập hợp dữ liệu lớn có cấu trúc, phục vụ cho
các yêu cầu về dữ liệu của một số lượng lớn người sử dụng.
Ví dụ điển hình của hệ quản trị cơ sở dữ liệu bao gồm kế toán, nguồn nhân lực và
hệ thống hỗ trợ khách hàng. Đầu tiên, hệ quản trị cơ sở dữ liệu chỉ có ở các công
ty lớn với đầy đủ phần cứng cần thiết hỗ trợ cho một tập hợp dữ liệu lớn. Hệ
quản trị cơ sở dữ liệu.

Giới thiệu MySQL

 MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế
giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng.
Vì MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính
khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các
hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho
các ứng dụng có truy cập CSDL trên internet. Người dùng có thể tải
về MySQL miễn phí từ trang chủ. MySQL có nhiều phiên bản cho các hệ điều
hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux,
Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris,
SunOS,..
MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan
hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL).
MySQL được sử dụng cho việc bổ trợ NodeJs, PHP, Perl, và nhiều ngôn ngữ
khác, làm nơi lưu trữ những thông tin trên các trang web viết bằng NodeJs, PHP
hay Perl,...

3.6.2: Kiểu dữ liệu trong MySQL

3.6.2.1: Kiểu số nguyên

Các kiểu số nguyên tiêu chuẩn của SQL như INTEGER (or INT) và
SMALLINT đều được hỗ trợ bởi MySQL. Và các mở rộng tiêu chuẩn, MySQL
cũng hỗ trợ các kiểu số nguyên khác như TINYINT, MEDIUMINT, và BIGINT.
Bảng dưới đây sẽ liệt kê các kiểu và không gian lưu trữ đòi hỏi và phạm vi của
chúng (Giá trị nhỏ nhất, lớn nhất cho kiểu số nguyên có dấu, và không dấu).
 3.6.2.2: Kiểu dấu chấm động
Kiểu dữ liệu FLOAT và DOUBLE mô tả gần đúng các giá trị số thực.
MySQL sử dụng 4 byte để lưu trữ dữ liệu FLOAT và 8 byte dành cho kiểu dữ
liệu DOUBLE.

3.6.2.3: Kiểu Date and Time

Các kiểu dữ liệu ngày tháng và thời gian đại diện bao gồm DATE,
TIME, DATETIME, TIMESTAMP, and YEAR. Mỗi kiểu có một phạm vi hợp
lệ.
3.6.2.4: Kiểu dữ liệu CHAR, VARCHAR
 3.6.3: Mối quan hệ và ràng buộc trong MySQL
3.6.3.1: Mối quan hệ
Là mối liên hệ giữa hai hay nhiều thực thể
+ Kiểu quan hệ giữa các kiểu thực thể: tập tất cả các quan hệ giống nhau trên
các thực thể của kiểu thực thể.
+ Cấp liên kết: Là số kiểu thực thể tham gia vào liên kết đó
+ Ràng buộc trên kiểu liên kết
+ Ràng buộc tỉ số: Xét mối quan hệ nhị phân R (cấp 2) giữa 2 tập thực thể A và
B

3.6.3.2: Ràng buộc

Các ràng buộc(constraint) SQL được sử dụng để chỉ định các quy tắc cho
dữ liệu trong bảng. SQL được sử dụng để chỉ định các quy tắc cho dữ liệu trong
bảng. Các ràng buộc được sử dụng để giới hạn loại dữ liệu có thể đi vào bảng.
Điều này đảm bảo tính chính xác và độ tin cậy của dữ liệu trong bảng. Nếu có
bất kỳ vi phạm nào giữa ràng buộc và hành động dữ liệu, hành động đó sẽ bị hủy
bỏ. Các ràng buộc sau thường được sử dụng trong SQL:
+ NOT NULL – Đảm bảo rằng một cột không thể có giá trị NULL
+ UNIQUE – Đảm bảo rằng tất cả các giá trị trong một cột là khác nhau
+ PRIMARY KEY – Sự kết hợp giữa KHÔNG ĐẦY ĐỦ và ĐỘC ĐÁO. Xác
định duy nhất từng hàng trong bảng
+ FOREIGN KEY – Xác định duy nhất một hàng / bản ghi trong bảng khác
+ CHECK – Đảm bảo rằng tất cả các giá trị trong một cột thỏa mãn một điều
kiện cụ thể
+ DEFAULT – Đặt giá trị mặc định cho một cột khi không có giá trị nào được
chỉ định
+ INDEX – Được sử dụng để tạo và truy xuất dữ liệu từ cơ sở dữ liệu rất nhanh
chóng

3.6.4: Một số câu lệnh trong MySQL

+ Lệnh CREATE
Lệnh CREATE để tạo một thực thể mới trong MySQL. Cấu trúc chung:
CREATE + <Loại thực thể> + <Tên thực thể> + <Tùy chọn>
+ Lệnh DROP
Lệnh DROP dùng để xóa một thực thể trong MySQL. Cấu trúc chung:DROP +
<Loại thực thể> + <Tên thực thể>
+ Lệnh ALTER
Lệnh ALTER để sửa thông tin một thực thể trong MySQL. Cấu trúc chung:
ALTER + <Loại thực thể> + <Tên thực thể> + <Tùy chọn>
+ Lệnh SELECT dữ liệu
Câu lệnh SELECT trong MySQL được sử dụng để lấy các bản ghi từ một hoặc
nhiều bảng.
+ Lệnh INSERT trong MySQL
Câu lệnh INSERT trong MySQL được sử dụng để chèn một bản ghi đơn hoặc
nhiều bản ghi vào một bảng.
+ Lệnh UPDATE trong MySQL
Câu lệnh UPDATE trong MySQL được sử dụng để cập nhật các bản ghi hiện có
trong một bảng.
+ Lệnh DELETE trong MySQL
Câu lệnh DELETE trong MySQL được sử dụng để xóa một hoặc nhiều bản ghi
từ một bảng.
+ Lệnh TRUNCATE trong MySQL
Câu lệnh TRUNCATE trong MySQL được sử dụng để xóa hết dữ liệu của bảng
và reset transaction log, vì thế khi tạo 1 record mới, giá trị của id sẽ bắt đầu từ 1,
đây cũng chính là khác biệt lớn nhất của DELETE và TRUNCATE.
3.7: Mô hình MVC
3.7.1: Tổng quan mô hình MVC
Mô hình MVC (Model – View – Controller) là một kiến trúc phần mềm
hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nó giúp tách ứng
dụng thành 3 phần khác nhau: Model (Xử lý dữ liệu), View (Hiển thị) và
Controller (Điều khiển). Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập
với nhau.
+ Model: Model dùng để cung cấp dữ liệu, thực hiện kết nối, trích lọc, chèn,
chỉnh sửa dữ liệu trong database, tương tác với file system, network.
+ View: Mỗi view là một trang web hiển thị dữ liệu gì đó. Dữ liệu mà view hiển
thị do controller cung cấp (controller lấy từ model để đưa cho view).
+ Controller: Controller được tạo ra để thực thi các yêu cầu từ user, controller
thực hiện tiếp nhận tham số, gọi các hàm trong model, nạp các view cần thiết…
Trong NodeJS, routes đóng vai trò như controller.
Việc tách riêng vai trò của Controler, Model và View giúp cho phân định
rõ ràng các công việc xử lý nghiệp vụ, xử lý dữ liệu và trình bày dữ liệu. Do vậy
việc cập nhật chỉnh sửa một thành phần không làm ảnh hưởng đến các thành
phần khác.

3.7.2: MVC với Express

Lập trình MVC trong NodeJS tức ta sẽ tạo nên các chức năng cho
website quy ước của MVC. Theo đó, các việc xử lý request, hiển thị dữ liệu, xử
lý dữ liệu phải tách bạch ra theo quy định.
Module express-generator giúp ta tạo project đã gần giống với tổ chức
MVC, như folder views chứa các file view để hiện dữ liệu, folder routes dùng để
xử lý các đường path chính là thành phần controller trong MVC. Chúng ta cần
tạo thêm thành phần model nữa để xử lý dữ liệu.
3.8: Quy trình phát triển phần mềm Agile
3.8.1: Khái niệm
Agile là một phương pháp phát triển phần mềm linh hoạt để làm sao đưa
sản phẩm đến tay người dùng càng nhanh càng tốt và được xem như là sự cải
tiến so với những mô hình cũ như mô hình “Thác nước (waterfall)” hay
“CMMI”. Phương thức phát triển phần mềm Agile là một tập hợp các phương
thức phát triển lặp và tăng dần trong đó các yêu cầu và giải pháp được phát triển
thông qua sự liên kết cộng tác giữa các nhóm tự quản và liên chức năng.

3.8.2: Mô tả
+ Bước 1: Analysis and Requirements. Đây là bước tiếp nhận yêu cầu của dự án
và bắt đầu phân tích xem dự án yêu cầu thực hiện phần mềm gì…
+ Bước 2: Design. Sau khi đọc và phân tích được rõ yêu cầu của dự án, thì step
2 là công đoạn thiết kết phần mềm. Phần mềm này được thiết kế như thế nào, sử
dụng ngôn ngữ lập trình nào, thuật toán gì, các công cụ gì và thư viện gì để xây
dựng nên sản phẩm.
+ Bước 3: Coding. Thực hiện quá trình coding với những chức năng đã được
vạch ra trong thiết kế. Trong thực tế coder vừa thực hiện code vừa thực hiện test
những chức năng cơ bản mà thiết kế đã đưa ra. Sau khi coding được hoàn thành,
dev phải tự mình review code của mình về giải thuật, style…. Sau đó được
review thêm lần nữa bởi leader, hoặc PM hoặc một coder có kinh nghiệm nhiều
hơn. Cho đến khi mã code đã đạt được sự tối ưu, thì tiến hành đưa sản phẩm lên
sever chuyển sang cho tester.

3.8.3: Ưu điểm của Agile

+ Nguyên mẫu sản phầm được hình thành. Và sau đó là liên tục các bản release
được gửi theo chu kỳ theo tuần hoặc tháng.
+ Sự tương tác giữa con người với con người. Dev-Test-Leader liên tục tương
tác khi làm việc làm cho vấn đề được giải quyết nhanh.
+ Liên tục đưa ra những ý tưởng hay, những phương pháp, kỹ thuật tối ưu cho
thiết kế.
+ Đáp ứng sự thay đổi bất ngờ, hoặc muộn màng.

3.8.4: Nhược điểm của Agile

+ Không thích hợp để xử lý các phụ thuộc phức tạp.
+ Có nhiều rủi ro về tính bền vững, khả năng bảo trì và khả năng mở rộng.
+ Cần một team có kinh nghiệm.
+ Phụ thuộc rất nhiều vào sự tương tác rõ ràng của khách hàng.
+ Chuyển giao công nghệ cho các thành viên mới trong nhóm có thể khá khó
khăn do thiếu tài liệu.

3.8.5: Ứng dụng

+ Khi dự án có những thay đổi cần thiết phải thực hiện.
+ Chi phí cho việc thực hiện nhưng thay đổi là rất ít
+ Dự án mà các yêu cầu mới không mất quá nhiều thời gian.
+ Khi việc phát triển phần mềm có sự linh động, thoải mái.

Phần 4: Phân tích thiết kế chương trình

4.1: Khảo sát hiện trạng
Trang Blog cần có các chức năng và phân cấp chức năng theo phía người
đọc (độc giả) và người quản lí quyền admin:
+ Quản lí bài viết: Thêm, sửa, xoá, bài viết
+ Thống kê bài viết
+ Quản lí danh mục: danh sách các thể loại bài viết
+ Quản lí tài khoản: Đăng kí, đăng nhập, thêm người dùng, xoá người dùng, …
+ Tìm kiếm bài viết
+ Hiển thị danh mục
+ Tìm kiếm bài viết

4.2: Mô hình phân cấp chức năng

 Blog Website

Hiển thị bài viết Tìm kiếm bài viết Quản lý Liên hệ

Hiển thị bài viết Tìm kiếm bài viết Đăng nhập/Đăng
theo thời gian theo tên xuất

Hiển thị top bài

Tìm kiếm bài viết Quản lý danh
viết có lượt xem
theo danh mục mục
nhiều

Quản lý bài viết

Quản lý tài
khoản admin

4.3: Mô hình dữ liệu mức khung cảnh

4.4: Mô hình dữ liệu mức đỉnh

4.5: Biểu đồ luồng dữ liệu mức dưới đỉnh hoạt động quản trị
4.6: Biểu đồ luồng dữ liệu mức dưới đỉnh hoạt động độc giả
4.7: Mô hình liên kết thực thể
 4.7.1: Chuyển đổi mô hình thực thể liên kết thành các bản
ghi logic
TAIKHOAN (ID, Name, Password, Role)
THELOAI (ID, Name, Description)
BAIVIET (ID, Thumb, Title, Description, Content, Count_views,
Create_at, Source, CategoryId)

4.8: Thiết kết cơ cơ dữ liệu mức vật lí

STT Tên thuộc Kiểu(độ rộng) Ràng buộc Khoá Mô tả

tính chính/Khoá
phụ
1 ID Int(11) Not null PK ID
admin
2 Name Varchar(255) Not null Tên
admin
3 Password Varchar(255) Not null Mật
 khẩu
4 Role Bit(1) Not null Quyền

STT Tên thuộc Kiểu(độ rộng) Ràng buộc Khoá Mô tả

tính chính/Khoá
phụ
1 ID Int(11) Auto PK ID danh
increament mục
2 Name Varchar(255) Not null Tên
danh
mục
3 Description Text Mô tả
danh
mục

STT Tên thuộc Kiểu(độ rộng) Ràng Khoá Mô tả

tính buộc chính/Khoá
phụ
1 ID Int(11) Auto PK ID bài
increament viết
2 Thumb Text Not null Link ảnh
bìa
3 Title Text Not null Tiêu đề
4 Description Text Mô tả
bài viết
5 Content Medium text Nội
dung
6 Count_views Int(11) Default(0) Lượt
xem
7 Created_at Date Not null Ngày
đăng
8 Source Varchar(250) Nguồn
 9 Category_id Int(11) Not null FK ID danh
mục

Phần 5: Xây dựng đề tài

5.1: Xây dựng cấu trúc dự án (MVC)
Trong thư mục chính BlogWeb2, tạo 3 thư mục con theo mô hình MVC
đó là thư mục: Model (Là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng
dụng và là cầu nối giữa 2 thành phần bên dưới là View và Controller), View
(Đây là phần giao diện (theme) dành cho người sử dụng. View là phương tiện
hiển thị các đối tượng trong một ứng dụng). Controller (là thư mục chứa các
logic và nhận dữ yêu cầu từ người dùng, kết nối với cơ sở dữ liệu để lấy thông
tin render ra view cho client), Thông thường ở thư mục Routes, với dự án vừa
và lớn, chúng ta sẽ có rất nhiều routes, mỗi route lại có các function xử lý đi
kèm, dẫn đến việc cập nhật, bổ sung đường dẫn rất khó khăn, khó quản lý (nhìn
xấu nữa. Vì vậy, ta sẽ tạo thêm một thư mục để chứa code các function xử lý
cho các routes này, thường đặt tên là Controller).

Hình 2: Cấu trúc thư mục dự án

5.2: Thiết kết cơ sở dữ liệu, xây dựng Model

5.2.1: Thiết kế cơ sở dữ liệu trong MySQL
 Hình 3: Cơ sở dữ liệu diagram
+ Bảng Admin gồm các trường dữ liệu id (Khoá chính, kiểu dữ liệu Int), name
(kiểu dữ liệu Varchar), password (kiểu dữ liệu), Role (phân quyền)
+ Bảng Categories có các trường id (Khoá chính, kiểu dữ liệu Int), name (Tên
thể loại bài, kiểu dữ liệu Varchar), description (Mô tả ngắn gọn nội dung thể
loại, kiểu dữ liệu Text)
+ Bảng News có các trường id (kiểu dữ liệu Int), thumb (kiểu dữ liệu Text), title
(kiểu dữ liệu Text), description (kiểu dữ liệuText), content (kiểu dữ liệu Text),
count_views (Int), create_at (kiểu dữ liệu Date), source (kiểu dữ liệu Varchar),
category_id (kiểu dữ liệu Int).

5.2.2: Xây dựng Model

+ Tạo file connectDB.js để kết nối ứng dụng với cơ sở dữ liệu MySQL
const mysql = require('mysql2/promise');

const connection = mysql.createPool({

    host: 'localhost',
    user: 'root',
    database: 'blogweb'
});

console.log('Kết nối Database')

module.exports = connection;

+ Tạo các file admin.js, categories.js, news.js : để thao tác các truy vấn tới dữ
liệu như thêm, sửa, xoá, cập nhật.
 5.3: Xây dựng Controller:
Tạo ba file trong thư mục Controller: adminController (để xử lí các chức
năng cho admin), authController (xác thực và phân quyền người dùng),
HomeController (xử lí logic các chức năng trang blog). Các chức năng trong
từng file:
+ adminController: Lấy danh sách các danh mục categories (getCategoriesList),
thêm danh mục (addCategories), sửa danh mục (editCategories), xoá danh mục
(deleteCategories), sửa trang Categories (editCategoriesPage). Lấy bài viết
(getNews), thêm, sửa, xoá bài viết (addNews, editNews, deleteNews). Lấy thông
tin trang (getProfilePage)
+ authController:
+ homeController:
5.4: Xây dựng View:
Các file views sử dựng EJS engine để đưa dữ liệu và giao diện cho người
dùng:
+ layout.ejs: file chứa các giao diện dùng chung cho các trang gồm header,
footer
+ login.ejs: giao diện trang đăng nhập
+ home.ejs: giao diện trang chủ
+ searchPage.ejs: giao diện trang tìm kiếm bài viết
+ detailPage.ejs: giao diện trang chi tiết
+ categoryPage.ejs: giao diện trang danh mục
+ contact.ejs: trang liên hệ
+ adminProfileEditPW.ejs: giao diện trang thay đổi mật khẩu
+ adminProfile.ejs: trang quản lí thông tin tài khoản
+ adminNews.ejs: trang quản lí bài viết
+ adminEditNews.ejs: trang chỉnh sửa bài viết
+ adminEditCategory.ejs: trang chỉnh sửa danh mục
+ adminCategory.ejs:
+ adminAddNews.ejs: trang thêm bài viết
+ adminAccEdit.ejs: trang chỉnh sửa thông tin tài khoản
+ adminAccManagement.ejs:

Phần 6: Chương trình minh hoạ

Hình ảnh Header và trang chủ

Hình ảnh Footer

Hình ảnh Trang liên hệ

Hình ảnh Trang chi tiết bài viết

Hình ảnh Trang Login

 Hình ảnh Trang quản lý

Phần 7: Kết Luận

Mặt tích cực:
Trước khi được học môn Công nghệ Web, chúng em mới chỉ sơ lược và
có chút mơ hồ về cách xây dựng nên một website. Nhưng sau khi kết thúc môn
học và hoàn thành bài thực hành xây dựng trang web Blog cá nhân, chúng em đã
nhìn nhận rõ hơn về công nghệ này và lợi ích to lơn mà nó mang lại trong hiện
tại và cả tương lai xa. Qua những bài giảng của cô giáo hướng dẫn, và tìm hiểu
trên mạng chúng em đã tiếp thu them được nhiều kiến thức bổ ích của nghành
công nghệ rộng mở này. Không chỉ vậy, chúng em còn được rèn luyện thêm
kinh nghiệm làm việc nhóm, kĩ năng giao tiếp trong trao đổi ý kiến với nhau.
Chúng em xin trân thành cảm ơn sự hướng dẫn tận tình của cô giáo Nguyễn Thị
Nguyệt, nhờ vậy chúng em đã có thể tìm hiểu được nhiều kiến thức bổ ích và
hoàn thành bài luận về đề tài Blog cá nhân nói riêng và môn học Công nghệ
Web nói chung.

Còn hạn chế :

Trong việc tìm hiểu các công nghệ Web, chúng em đã tìm hiểu hầu hết
các khái niệm nhưng chỉ dừng lại ở mức cơ bản. Và bài thực hành có thể còn có
nhiều sai sót nhỏ nhặt. Mặc dù, có sự cố gắng hết sức mình đến từ các thành
viên trong nhóm, nhưng vẫn chưa thể làm hoàn hảo sản phẩm thực hành, một
phần do thời gian gấp rút, một phần do còn chưa có nhiều kinh nghiệm làm việc
xây dựng website. Chính vì lí do đó, chúng em mong cô và các bạn cùng bổ
sung và góp ý để nhóm có thể hoàn chỉnh hơn trang web của mình.

Phân chia công việc:

Họ và Tên Công việc
Nguyễn Khắc Hải (nhóm trưởng) Auth controller, model, kết nối CSDL
Nguyễn Đình Đạt Front-end
Trịnh Đình Hiếu Admin controller, Home controller

Tài liệu tham khảo:

https://nodejs.org/en/docs/
https://expressjs.com/en/guide/routing.html
https://webcoban.vn/
https://getbootstrap.com/docs/5.2/getting-started/introduction/