MANG NANG CAO xây dựng websites báo sinh viên bằng nodejs

I. LỜI GIỚI THIỆU:
Cuộc sống con người thời hiện đại muốn biết tin tức rất dễ dàng. Chỉ cần
cầm trên tay một cái điện thoại hoặc một chiếc máy tính có nối mạng, thì tất cả
thông tin cần học, cần biết, và những gì đang hot đang nổi trên thế giới sẽ hiện ra
ngay trước mắt mình.
Bắt nhịp nhu cầu cần biết thông tin nên nhóm chúng tôi xây dựng một trang
web tin tức cho sinh viên. Qua đây các bạn sinh viên sẽ biết những tin tức cần thiết
cho mình.
Và dưới đây là các bước tiến hành cũng như các cách để xây dựng thiết kế
một trang web có đầy đủ các phần cần thiết như: Select, insert, update, delete.
Ngoài bốn phần cơ bản trên nhóm chúng tôi còn có thêm phần upload ảnh lên
server để tiện cho các quản trị web site dễ dàng chọn ảnh hơn. Tất cả những dữ liệu
khi chúng ta Select, insert, update, delete, upload ảnh thì được lưu nơi một cơ sở dữ
liệu, ở đây chúng tôi dùng môi trường XAMPP để chạy Apache và Mysql cho trang
web. Dữ liệu được lưu trữ trong 1 bảng của phpMyadmin, để rõ hơn xin mời cùng
chúng tôi đi tìm hiểu sâu hơn.
Chúng ta cùng nhau bắt đầu đi vào việc xây trang website với nội dung là
mang tin tức đến với sinh viên có tên là: “Báo sinh viên”.
II. MỤC TIÊU CỦA ĐỒ ÁN
Áp dụng những kiến thức đã học trên lớp về ngôn ngữ lập trình Nodejs và cơ
sở dữ liệu Mysql, từ đó nhóm chúng tôi quyết định Xây dựng trang web báo sinh
viên nhằm cung cấp thông tin chính xác và mới nhất cho các bạn học sinh, sinh viên
III. XÂY DỰNG MÔ HÌNH CỦA ỨNG DỤNG
3.1 Cấu trúc của ứng dụng


Hình 3.1 Cấu trúc của ứng dụng

3.2 Cơ sở dữ liệu
Cơ sở dữ liệu mysql của nhóm em chỉ có 1 bảng: tin.sql
Trong bảng tin.sql gồm có các trường: id, title, urlhinh, dest, content

Trong website này chúng tôi dùng môi trường Xampp như đã giới thiệu. Ở
phpMyadmin chúng tôi tạo 1 database có tên là “bao”, trong database “bao” tạo 1
bảng có tên là “tin” ứng với mã đối chiếu là “utf8_unicode_ci” nhằm để hiển thị
được nội dung tiếng việt. Tiếp đến trong bảng “tin” chúng tôi tạo 5 cột bao gồm:
cột ID dùng để làm ID khóa chính cột này dùng định dạng kiểu “int”, cột “title”
dùng để lưu nội dung tiêu đề của bài báo, cột “urlhinh” dùng để lưu tên ảnh của bài
viết báo, cột “decst” dùng đê lưu nội dung mô tả của bài báo, và cuối cùng là cột
“content” là cột lưu trữ nội dung chính của bài báo. Các cột loại trừ cột ID đều theo
một kiểu định dạng là kiểu “varchar”.


Hình 3.2: Bảng cơ sở dữ liệu

3.3. Các câu lệnh Mysql được sử dụng
a. SELECT * FROM tin
Câu lệnh dùng để hiển thị ra màn hình thông tin ở trang chủ và trang
manager.
b. INSERT INTO tin
Câu lệnh dùng để thêm thông tin vào các trường trong bảng.
c. SELECT * FROM tin WHERE id=
Câu lệnh dùng để chọn nội dung các trường có cùng id và hiển thị ra.
d. UPDATE tin SET
Câu lệnh dùng dể update(chỉnh sửa) lại thông tin các trường trong bảng dựa
vào id.
e. DELETE FROM tin WHERE id=
Câu lệnh dùng để xóa nội dung các trường có cùng id.
IV. XÂY DỰNG ỨNG DỤNG SAU KHI ĐÃ CÓ MÔ HÌNH:
4.1 Các chương trình cho phần server chạy trên nodejs
4.1.1 Cài đặt các modunle:

- Để xây dựng APP Báo chung ta cần cài đặt những module sau:
+ Tạo projects bằng câu lệnh: npm init


Hình 1.1: Hình cài đặt Init

+ Cài đặt thông tin của Projects:

Hình 1.2:Thông tin của projects

+ Cài đặt thư các thư viện: Express, body-parser, mysql và Ejs bằng câu
lệnh:
npm install express body-parser mysql ejs multer


Hình 1.3: Cài đặt Express, body-parser, mysql và Ejs

4.1.2 Thiết lập file index.js
Tạo 1 file mới có tên: index.js
- khai báo thư viện
- khai báo port

Hình 2.1.1: Khai báo các thư viện

Tạo kết nối với database để lưu dữ liệu :

Hình 2.1.2: Kết nối với database

Kết nối và kiểm tra kết nối đến database và thông báo trước khi chạy
trang web

Hình 2.1.3: Kiểm tra kết nối đến database

Phần duyệt trang web ejs, trang này là trang giao diện chính của trang
web, mọi thông tin hiển thị của báo nằm ở trang này

Hình 2.1.4: Duyệt trang web ejs

Duyệt trang manager, trang này là trang quản lý trang báo, trong trang
này có thể update và delete bai viết.

Hình 2.1.5: Duyệt trang manager

Khi muốn thêm một bài viết ta phải có một trang riêng để thêm bài viết
dưới đây là đoạn code duyệt trang add báo mới:

Hình 2.1.6: Duyệt trang add

Bắt sự kiện nhập dữ liệu vào các ô nhập để lưu và database trong
trang thêm báo mới, trong đó có các trường nhập như tiêu đề của báo,


ảnh đại diện cho trang báo, mô tả ngắn và trường nội dung của trang
báo, bằng cách khai báo và lấy đường dẫn như dưới đây:

Hình 2.1.7: Lấy dữ liệu ô nhập và insert dữ liệu và database

Sau khi thêm dữ liệu, nếu muốn thay đổi dữ liệu ta vào trang
update để chỉnh sửa những dữ liệu của trang báo đó. Để duyệt được vào

trang update chúng ta có đoạn code duyệt trang và trỏ đến đối tượng cần
duyệt như sau:

Hình 2.1.8: Update dữ liệu của trang báo


Sau khi duyệt trang update thì sẽ mở ra một trang cho chúng ta
chỉnh sửa trang báo, mọi thông tin chúng ta chỉnh sửa sẽ được thay đổi
và lưu vào database bằng cách sau:

Hình 2.1.9: Chỉnh sửa dữ liệu

Để xóa 1 trang báo chúng ta cũng phải duyệt trang xóa và xóa
trang báo khỏi database có đoạn code như sau:

Hình 2.1.10: Delete trang báo


muốn đọc được báo có nội dung đầy đủ thì ta duyệt trang đọc báo để nó
hiển thị nội dung bao gồm cả hình ảnh bài báo, tiêu đề và nội dung.

Hình 2.1.11: Đọc tất cả nội dung của 1 bài báo

Phần cuối cùng dùng để up hình ảnh lên server, nội dung của code
khai báo ví trí upload và thông tin của upload

Hình 2.1.12: Upload hình ảnh


4.2. Thiết kế giao diện và chương trình HTML và CSS

Phần HTML và CSS

Phần HTML trang chủ:

Hình 2.1: HTML trang chủ

Phần CSS trang chủ:


Hình 2.2: CSS trang chủ

Phần HTML trang bao-manager:


Hình 2.3: HTML trang manager

Phần CSS trang bao-manager:


Hình 2.4: CSS trang bao-manager

V. Kết quả sau khi xây dựng chương trình
5.1 Khởi động Server


Hình 5.1: Khởi chạy server

5.2 Giao diện sau khi chạy chương trình:
Trang chủ là trang hiển thị tất cả các tờ báo có trong trang
báo, dưới đây là trang chủ của trang báo mà nhóm chúng tôi đã

tạo nên.


Hình 5.2: Trang chủ trang báo

Sau khi vào trang chủ thấy xuất hiện tất cả các trang báo, muốn
đọc trang báo nào chúng ta chỉ cần rê chuột kích vào trang đó là nó sẽ
xuất hiện một trang mới, bao gồm đầy đủ nội dung chi tiết của trang báo
có thông tin về nó. Chúng ta có giao diện như sau:


Hình 5.3: Giao diện trang đọc báo trên website

Hai trang trên là trang của khách hàng hoặc người dùng sử dụng,
còn dưới đây là trang của quản trị viên. Trang này chứa tất cả các thông
tin bài viết của từng trang báo. Ở trang này có thể chỉnh sử trang báo,
xóa trang báo, và thêm mới trang báo.


Hình 5.4: Giao diện trang manager của trang báo

Từ trang quản lý ở trên ta đi vào trang thêm bài viết mới, ở trang
này chúng ta có các ô nhập trường dữ liệu như ô nhập tiêu đề, ô nhập mô
tả bài viết, ô nhập nội dung của trang báo. Và còn có chọn file ảnh của
bài viết để upload lên trang web.


Hình 5.5: Giao diện trang thêm bài báo mới

Khi thêm bài viết xong, sau khi nhấn nút Insert tự động trang web

sẽ điều hướng về lại trang manager. Ở đây chúng t có thể tiếp tục chỉnh
sử bài viết nếu có gì sai hay thiếu sót. Để vào trang chúng ta nhấn
Update sẽ xuất hiện trang web như hình ở dưới:

Hình 5.6: Giao diện trang update

Tiếp tục, khi chỉnh sửa xong và nhấn Update trang web sẽ tự điều
hướng về lại trang manager. Ở trang này chúng ta có thể xóa bài viết,
bằng cách nhấn vào chữ delete ở cột thao tác phía bên phải nội dung bài


báo. Khi thao tác nhấn delete thì dữ liệu trong database sẽ đồng thời bị
xóa, và trên trang manager sẽ không còn hiển thị bài viết bị xóa nữa.

Hình 5.6: Giao diện trang upload ảnh

Giao diện dùng để upload hình ảnh: click chọn tệp sau đó nhấn
upload hình ảnh thì hình ảnh sẽ được up lên server.

VI. KẾT LUẬN:
Vậy là qua bài đồ án này, chúng ta sẽ biết cách tạo một trang quản
trị báo, có các phần chủ yếu như: tạo bài viết mới, chỉnh sửa bài viết,


xóa bài viết và chọn bài viết. Đó là cái cốt chính gọi là quản trị một
website phải không? Từ đó chúng ta có thể xây dựng lên nhiều Chức
năng khác cho nó được hoàn hảo và bảo mật nữa.
VII. TÀI LIỆU THAM KHẢO:

1.

Khoapham.vn

2.

Github.com