Research Project 2018

Supervisor: PhD. Le Ngoc Tran

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÀ RỊA-VŨNG TÀU
--------

ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CẤP TRƯỜNG
Co-operative research project between BVU and UBO
TÊN ĐỀ TÀI: THIẾT KẾ WEBSITE VÀ CƠ SỞ DỮ LIỆU CHO

HỆ THỐNG GIÁM SÁT VÀ CẢNH BÁO CHẤT LƯỢNG NƯỚC
NUÔI TRỒNG THỦY SẢN TRÊN SÔNG CHÀ VÀ -BRVT
Trình độ đào tạo: Chương trình trao đổi sinh viên với trường
UBO -Université de Bretagne Occidentale (Pháp)
Ngành đào tạo : Cơ khí
Chuyên ngành

: Cơ điện tử

Giảng viên hướng dẫn: Ts. LÊ NGỌC TRÂN
Sinh viên thực hiện : Trương Quang Dũng
Lớp
: Digital System
Niên khóa
: 2016-2018

Truong Quang Dung

1


1


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

THANKS
Before beginning this work, I would first like to express my gratitude to the
teaching

and

administrative staff

of the

UBO

School

for

their

training, the quality of their teaching and to have allowed me to do this
internship abroad.
I would also like to express my sincere thanks to Mr. Le Ngoc Tran
(Professor at Bà Ria Vung Tau University and my tutor during this internship)

PHP

Hypertext Preprocessor

URL

Universal Resource Locator

SQL

Structured Query Language

PC

Personal Computer

DB

Databases

UI

User Interfaces

Truong Quang Dung

1


Research Project 2018

Research Project 2018

Supervisor: PhD. Le Ngoc Tran

Hình 1: Lắp đặt hệ thống quan trắc trên bè nuôi cá trên sông Chà Và tỉnh
BRVT
Hệ thống đo và giám sát chất lượng nước nuôi trồng thủy sản được giới thiệu
trong hình 2.
5 sensors:
Tem, ph, oxyd, salinity, chlorine
Solar panel

Electronic
Box

Battery
Load battery
regulator

1

Clean
sensors

Pump 3

Water tank to
be analyzed

Clean

(homepage), người xem có thể xem các trang khác thông qua các liên kết
(hyperlinks).
Đặc điểm tiện lợi của website là thông tin có thể dễ dàng cập nhật, thay đổi,
người sử dụng sẽ thấy ngay tức khắc, ở bất kì nơi nào, tiết kiệm chi phí in ấn,
bưu điện, fax, thông tin không giới hạn và không giới hạn phạm vi khu vực sử
dụng. Website là một tập hợp của một hay nhiều trang web.
1.2.2. Lịch sử ra đời
Ngày 6/8/1991 đã trở thành một cột mốc quan trọng khi những đường liên
kết tới nhưng dạng mã lệnh về www được đưa lên thảo luận alt.hypertext để
những người khác có thể tải về và trải nghiệm. Và đó chính là ngày mà những

Page 4


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

trang web phổ biến ra toàn thế giới. Ông Paul Kunz, một nhà khoa học tại
Trung tâm Gia tốc tuyến tính Stanford, người thiết lập nên một máy chủ web
ngoài Châu Âu vào tháng 12-1991 cho biết, hồi đầu những năm 1990, ý tưởng
về việc lấy được dữ liệu lưu trữ trên nhiều máy tính đơn giản như vậy đă tỏ ra
rất hấp dẫn. Vào thời điểm đó, các máy tính là những hòn đảo về thông tin.
Người dùng đăng nhập vào một hệ thống máy tính chỉ có thể truy cập vào
được nguồn tài nguyên nằm trên chiếc máy tính đó. Khi chuyển sang chiếc
máy tính khác có nghĩa họ phải đăng nhập lại và có thể phải sử dụng một tập
lệnh khác để tìm kiếm và thu thập dữ liệu. Và web đã ngay lập tức thu hút sự
quan tâm của của ông Kunz ngay sau khi Tim Berners-Lee (người đã phát
minh ra web tại phòng thí nghiệm vật lí Cern ở Genova) trình diễn khả năng
truy vấn một cơ sở dữ liệu (db) về những tài liệu vật lí được lưu trữ trên một

hay favourites. Cũng trong nhưng năm 1993, trường Đại học Minnesota bắt
đầu Gopher, do đó rất nhiều người đã xem xét chuyển sang sử dụng một công
nghệ khác. Ed Vielmetti, một trong nhưng người dùng web đầu tiên và hiện là
một trợ lí nghiên cứu tại trường Đại học Thông tin Michigan, nói rằng trong
suốt những năm đầu tiên, công nghệ web đã thực sự chứng tỏ sự hữu ích của
nó đối với những người dùng internet trung bình. Các hệ thống Gopher và
FTP thông thường vẫn do các công ti hay tổ chức lớn thiết lập. Còn Usenet thì
lại không tồn tại lâu bởi vậy nó buộc những người đưa ra một quan điểm phải
thường xuyên đăng lại ý kiến của mình. Ban đầu, người ta đã sử dụng các
web như để tự bày tỏ mình theo 1 cách thức mà các công nghệ khác không
cho phép. Ông Vielmetti cho rằng các mã lệnh web rất ít lỗi và thu hút người
ta sử dụng nó. Vào cuối năm 1994, lưu lượng giao dịch web cuối cùng đã
vượt qua giao dịch Gopher và từ đó đến nay chưa bao giờ tụt lại. Hiện trên
mạng Internet đã có gần 100 triệu website và có rất nhiều người đã xem web
và mạng internet là một. Nhưng ông Groff cho rằng phải đến tận hôm nay thì
web mới được như sự hình dung của những người tạo ra nó. Theo ý đồ ban
đầu của họ thì web là một phương tiện mà con người có thể đọc và đóng góp
nội dung cho nó. Những công cụ mới như các site chia sẻ ảnh, mạng công
cộng, nhật kí cá nhân, từ điển mã nguồn mở và những thứ khác đang thực
hiện rất tốt lời hứa ban đầu này.

Page 6


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

1.2.3. Các yêu cầu tối thiểu của một trang web
Để một website hoạt động cần phải có tên miền (domain), không gian lưu



Research Project 2018

Supervisor: PhD. Le Ngoc Tran

Chương
THIẾT KẾ HỆ THỐNG WEBSITE CHO HỆ THỐNG ĐO CHẤT
LƯỢNG NƯỚC NUÔI TRỒNG THỦY SẢN
2.1. Khái quát chung về thiết kế website
Bước đầu tiên trong công đoạn thiết kế một website là phải có những quyết
định chắc chắn về việc sẽ “xuất bản” cái gì với website của mình. Không có
chủ định và mục tiêu rõ rang thì cả website sẽ trở nên lan man, sa lầy và cuối
cùng đi đến một điểm khó quay trở lại. Thiết kế cẩn thận và định hướng rõ
rang là những chìa khóa dẫn đến thành công trong việc xây dựng trang web.
Trước khi xây dựng một website nên:
• Xác định đối tượng người sử dụng của website
• Website có mục đích gì
• Thiết lập chủ đề chính của website
• Thiết kế các khối thông tin chủ đề mà website cung cấp.
Nên bắt đầu với việc xác định nguồn tài nguyên về nội dung, hình ảnh
thông tin cần thiết để tạo nên website phù hợp với mục đích đề ra đó là
nguồn thông tin sẽ duy trì cho website hoạt động sau này.
. . Các bước thực hiện thiết kế website
2.2.1. Chuẩn bị:
- Host server và databases:
Để website của hệ thống Wave đi vào hoạt động chúng ta cần một host
server để lưu trữ thông tin và databases của website. Trước hết, ta cần 1 PC để
cài đặt server và chiếc máy tính đấy sẽ phải bật và kết nối với internet 24/24
để duy trì hoạt động của website, giúp cho website được hoạt động ổn định.

được kết quả như thế kia.
Sau khi server hoạt động chúng ta cần 1 database để trợ giúp cho hoạt
động của website cũng như lưu trữ dữ liệu mà hệ thống WAVE đã thu thập
được và gửi lên server. Ở đây ta sử dụng hệ thống SQL là MySQL để thiết lập
database cũng như lưu trữ giữ liệu cho toàn bộ hệ thống.
Việc cài đặt MySQL trên PC cũng vô cùng dễ dàng, ta chỉ cần tải về bộ
cài đặt MySQL Installer được nhà phát triển cung cấp miễn phí trên mạng
Internet.

Page 10


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

Giao diện của MySQL Installer
Việc cài đặt MySQL khá dễ dàng, chỉ cần chấp nhận các thỏa thuận sử
dụng và chọn loại thiết lập là Developer Default.

Page 11


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

Để database có thể hoạt động được trên máy chủ ta chỉ cần chọn đúng
Standalone MySQL Server / Classic MySQL Replication như hình trên.



Research Project 2018

Supervisor: PhD. Le Ngoc Tran

port forwarding trên router để các máy khác có thể truy cập từ xa thông qua
Internet vào đúng IP của máy tính. Trước tiên ta cần tìm được địa chỉ ip của
PC thông qua câu lệnh “ipconfig” trên Command Prompt.

Nhập địa chỉ Defaut Gateway vào trình duyệt web để có thể truy cập vào
router.

Page 14


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

Màn hình sau khi nhập địa chỉ trên trình duyệt web
Sau khi đăng nhập vào router, ta tìm đến mục Port Fowarding.

Sau đó them ip của máy và nhập port vào, ở mục protocol chọn TCP/UDP
sau đó ấn Add để xác nhận cài đặt và tích tiếp vào mục enable để kích hoạt.

2.2.2. Thiết kế website cho hệ thống quan trắc chất lượng nước
- Ý tưởng thiết kế
Do đây là trang web được xây dựng để hiển thị và theo dõi dữ liệu của hệ
thống WAVE nên hoạt động chính của website sẽ có 2 hoạt động chính là
Live Overview (Dữ liệu hiện thời) và Biểu đồ.

xây dựng bằng Flat UI Design.
Flat Design ở đây là thiết kế web phẳng có thể nói mà một dạng thiết kế 2D,
không sử dụng các hiệu ứng phức tạp như đổ bóng, tạo hình khối … mà chọn
phong cách rất đơn giản, dễ nhìn mang lại cảm giác trực quan và dễ chịu cho
người truy cập. Flat Design được phát triển và hình thành dựa trên xu hướng
thiết kế tối giản (minimalism), vì vậy giao diện web phẳng được thiết kế đơn
giản hóa tất cả các yếu tố từ hình ảnh, bố cục cho đến các chi tiết nhỏ

Màu chủ đạo của website ở đây được chọn là xanh nhằm phù hợp với mục
đích của hệ thống là đo và giám sát chất lượng của nước. Cùng với màu xanh,
website còn sử dụng thêm 2 màu xám và trắng làm nền, nhằm tôn lên nét chủ
đạo của màu xanh cũng như khiến website dễ nhìn hơn.
Các khối hình, menu, hình ảnh, biểu đồ … cũng được thiết kế và xây dựng tối
giản hết mức nhằm thuận tiện cho việc quan sát, không gây rối và lan man
khiến người dùng mất tập trung. Đồng thời việc đó cũng làm việc tải website

Page 17


Research Project 2018

Supervisor: PhD. Le Ngoc Tran

trở nên nhẹ nhàng, không quá tốn thời gian vào việc load các hiệu ứng làm
cho trang web trở nên cồng kềnh.
Ở trong menu, được chia ra làm 2 phần chính là Dashboard và Thông tin:
o Dashboard: bao gồm Live Overview nhằm hiển thị tất cả các thông số
hiện thời đồng thời tóm tắt tất cả thông tin trên trang chủ. Và phần Dữ liệu
và Biểu đồ nhằm hiện thị các thông số đã được lưu trong database và sử
dụng các thông tin đó để vẽ biểu đồ chi tiết cho các cảm biến. Giúp việc

Research Project 2018

Supervisor: PhD. Le Ngoc Tran

o CSS đây là ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử
tạo được tạo ra bởi các ngôn ngữ đánh dấu mà ở đây là HTML. Hiểu đơn
giản rằng nếu HTML đóng vai trò định dạng các phần tử website như tạo
ra các đoạn văn bản, tiêu đề,… thì CSS sẽ giúp chúng ta có thể điều chỉnh
bố cục của trang web, trang trí trang web,….
o JS hay Javascript cũng là ngôn ngữ lập trình kịch bản dựa vào đối tượng.
Việc sử dụng javascript trong việc thiết kế website khiến cho website
tương tác tốt với người dùng, khiến các website trở nên sống động hơn.
+ Mô tả hoạt động của website:
Website hoạt động hoàn toàn dựa trên dữ liệu mà hệ thống thu được và gửi
lên databases. Việc sử dụng các dữ liệu được các tập tin php hỗ trợ thu thập
và hiển thị trên website. Trong phần Live Overview, website được lập trình để
tự động lấy các dữ liệu cuối cùng ở databases vừa được thêm vào website.
Còn để vẽ biểu đồ trang web sẽ lấy 10 dữ liệu cuối cùng để vẽ cho người
dùng dễ dàng so sánh sự chênh lệch giữa từng lần thu giữ liệu. Trang web sẽ
tự động làm mới dữ liệu để liên tục cập nhật và thay đổi sao cho các thông số
sao cho chính xác nhất so với trên database.
+ Kiểm tra hoạt động của website:
Khi thử trực tiếp trên mạng cục bộ (LAN), server và databases hoạt động ổn
định. Ta có thể truy cập vào server thông qua các máy tính trong cùng 1 mạng
cục bộ. Do chưa thể truy cập vào router để mở port forwarding nên máy tính
chứa server chưa thể cấp quyền truy cập các máy và thiết bị trên mạng
internet.
Hoạt động của website cũng như việc hiện thị và cập nhật dữ liệu từ database
hoạt động bình thường. Không xảy ra xung đột giữa website và database.


của dự án Wave, khiến cho việc theo dõi dữ liệu của hệ thống không phải chỉ
qua tin nhắn điện thoại hay thông qua màn hình được lắp đặt cạnh hệ thống
tại sông Chà Và. Mà thay vào đó mở rộng tầm hoạt động của hệ thống, khiến
cho ai cũng có thể truy cập vào website để theo dõi dữ liệu 1 cách trực quan.
Giúp cho người dân và các nhà khoa học liên tục theo dõi dữ liệu từ xa thông
qua internet mà không cần phải đến tận nơi để lấy mẫu và đem về phòng thí
nghiệm đo đạc.

Page 22