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à

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 : Trương Quang Dũng Lớp : Digital System Niên khóa : 2016-2018 Truong Quang Dung Research Project 2018 Supervisor: PhD Le Ngoc Tran Bà Rịa-Vũng Tàu, năm 2018 LỜI CAM ĐOAN Trong trình thực đề tài khoa học mình, tơi xin cam đoan số liệu thu từ trình thực nghiệm hồn tồn xác khơng chép đề tài, cơng trình nghiên cứu khoa học Các phần trích dẫn nội dung từ tài liệu tham khảo ghi rõ phần Tài liệu tham khảo cuối đề tài Tôi xin cam đoan điều thật chịu hoàn toàn trách nhiệm lời cam đoan ASSURANCE During the implementation of my research project, I pledge that the data obtained from the experimental process is completely accurate and does not copy any scientific subject or research Excerpts from the references are listed in the final reference section of the subject I declare that the above is true and take full responsibility for this assurance Baria-Vung tau, July 22th 2018 STUDENT TRƯƠNG QUANG DŨNG Truong Quang Dung 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 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) for having accepted me as a trainee, and I thank Also the students who worked with us throughout the duration of this internship and also welcomed us to the university Finally, I would like to thank my family and my colleagues for all the practical and theoretical lessons that have helped me to live this emotional experience Vung Tau, July 20th 2018 Student TRƯƠNG QUANG DŨNG Truong Quang Dung Research Project 2018 Supervisor: PhD Le Ngoc Tran Danh mục từ viết tắt HTML Hyper Text Markup Language FTP File transfer protocol PHP Hypertext Preprocessor URL Universal Resource Locator SQL Structured Query Language PC Personal Computer DB Databases UI User Interfaces Truong Quang Dung Research Project 2018 Supervisor: PhD Le Ngoc Tran Chương TỔNG QUAN VỀ DỰ ÁN “THIẾT KẾ WEBSITE VÀ CƠ SỞ DỮ LIỆU CHO HỆ THỐNG QUAN TRẮC CHẤT LƯỢNG NƯỚC NUÔI TRỒNG THỦY SẢN TRÊN SÔNG CHÀ VÀ” 1.1 Giới thiệu dự án Một nguồn thu nhập tỉnh Bà Rịa trực thuộc miền Nam Việt Nam đến từ ngành nuôi trồng thuỷ hải sản ven biển Tuy nhiên, thời gian gần đây, sản lượng nuôi trồng bị suy giảm nghiêm trọng cá chết hàng loạt diễn thời gian dài ô nhiễm môi trường gây hoạt động người thời tiết biến đổi Để đo lường giám sát thông số môi trường chất lượng nước phục vụ nuôi trồng thủy sản sông Chà Và, giúp bà nông dân chủ động nuôi thủy sản, giảm thiệt hại cho môi trường gây giúp Chi cục Thủy sản tỉnh BRVT giám sát chất lượng môi trường nước chủ động việc lập kế hoạch nuôi thủy sản tại địa phương Với mục tiêu đó, dự án WAVE (tên nhóm nghiên cứu đặt) triển khai để có thể kịp thời can thiệp tình tìm kiếm giải pháp bảo vệ nguồn lợi thuỷ hải sản tại tỉnh BRVT Là kết hợp tác UBO, khối trường học La Croix Rouge La Salle Brest (Pháp) trường Đại học Bà Rịa - Vũng Tàu (Việt Nam), dự án tập trung chủ yếu vào việc phát triển hệ thống đo, giám sát thông số môi trường nước nước biển khơng dây, phục vụ cho ngành ni trồng thuỷ sản Việt Nam Có thể nói dự án khoa học đa ngành, có kết hợp chặt chẽ khoa học điện tử, tin học, khí, tự động hố hóa sinh Page Research Project 2018 Supervisor: PhD Le Ngoc Tran Hình 1: Lắp đặt hệ thống quan trắc bè nuôi cá sông Chà Và tỉnh BRVT Hệ thống đo giám sát chất lượng nước nuôi trồng thủy sản giới thiệu hình sensors: Tem, ph, oxyd, salinity, chlorine Solar panel Electronic Box Battery Load battery regulator Clean sensors Pump Water tank to be analyzed Clean water tank Hình 2: Các thành phần hệ thống giám sát tự động môi trường nước Bơm số bơm nước vào bể đo để tiến hành phân tích thơng số Sau phân tích xong, thơng số máy cảm biến gửi tới hộp điều khiển điện tử sóng ra-đi-ô GSM Tại đây, thông số cập nhật vào Page Research Project 2018 Supervisor: PhD Le Ngoc Tran sở liệu hệ thống có thể truy cập thơng qua giao diện máy tính server web Tiếp đó, trình làm sạch bể đo diễn ra: van điện tử rút hết nước bể, để bơm số có thể bơm nước (sạch) từ thùng chứa vào bể môtơ có thể tiến hành làm sạch máy cảm biến Sau làm sạch xong, van điện tử lại rút hết nước từ bể đi, lượt đo mới lại có thể bắt đầu Quá trình đo nước biển tự động hố nhờ vào việc cài đặt tần suất đo hệ thống Hệ thống đo thông số nước biển hoạt động lượng mặt trời Hộp điện tử có hình LCD nút xoay để tiện cho việc tra cứu liệu, hiệu chuẩn máy cảm biến, tần suất trình đo phương thức truyền phát liệu (GSM/sóng ra-đi-ô) 1.2 Tổng quan web-server 1.2.1 Khái niệm website Website tập hợp nhiều trang web – loại siêu văn ( tập tin HTML hay XHTML) trình bày thơng tin mạng internet – tại địa định để người xem có thể truy cập vào xem Trang web người ta có thể truy cập từ tên miền thường gọi trang chủ (homepage), người xem có thể xem trang khác thông qua liên kết (hyperlinks) Đặc điểm tiện lợi website thông tin có thể dễ dàng cập nhật, thay đổi, người sử dụng thấy tức khắc, 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 không giới hạn phạm vi khu vực sử dụng Website tập hợp hay nhiều trang web 1.2.2 Lịch sử đời Ngày 6/8/1991 trở thành cột mốc quan trọng đường liên kết tới dạng mã lệnh www đưa lên thảo luận alg đến điểm khó quay trở lại Thiết kế cẩn thận định hướng rõ rang chìa khóa dẫn đến thành công việc xây dựng trang web Trước xây dựng website nên: • Xác định đối tượng người sử dụng website • Website có mục đích • Thiết lập chủ đề website • Thiết kế 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 ngun 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 đề đó nguồn thơng tin trì cho website hoạt động sau Các bước thực thiết kế website 2.2.1 Chuẩn bị: - Host server databases: Để website hệ thống Wave vào hoạt động chúng ta cần host server để lưu trữ thông tin databases website Trước hết, ta cần PC để cài đặt server máy tính phải bật kết nối với internet 24/24 để trì hoạt động website, giúp cho website hoạt động ổn định - Cài đặt server databases: Page Research Project 2018 Supervisor: PhD Le Ngoc Tran Việc cài đặt server dễ dàng nó tích hợp sẵn phiên window Công cụ chúng ta dùng Internet Information Services(IIS) Mặc định công cụ bị nhà phát hành Microsoft ẩn đi, để sử dụng chúng ta cần kích hoạt lại nó để có thể sử dụng máy tính host server - Để kích hoạt cơng cụ IIS, chúng ta truy cập vào Control Panel – Programs and Features – Turn Windows features on or off Sau chọn hết hình ta cần ấn ok để hệ thống tự động cài cho chúng ta Sau đó cần khởi động lại chúng ta có hệ thống host server để lưu trữ website Mặc định đường dẫn server để ta xem hoạt động server https://localhost hay https://127.0.0.1 Page Research Project 2018 Supervisor: PhD Le Ngoc Tran Khi IIS hoạt động, ta nhập địa vào trình duyệt ta có kết Sau server hoạt động chúng ta cần database để trợ giúp cho hoạt động website lưu trữ liệu mà hệ thống WAVE thu thập gửi lên server Ở ta sử dụng hệ thống SQL MySQL để thiết lập database lưu trữ giữ liệu cho toàn hệ thống Việc cài đặt MySQL PC vô dễ dàng, ta cần tải cài đặt MySQL Installer nhà phát triển cung cấp miễn phí mạng Internet Page 10 Research Project 2018 Supervisor: PhD Le Ngoc Tran Giao diện MySQL Installer Việc cài đặt MySQL dễ dàng, cần chấp nhận thỏa thuận sử dụng chọn loại thiết lập Developer Default Page 11 Research Project 2018 Supervisor: PhD Le Ngoc Tran Đây hình thiết lập mật quản trị chọn Add User để them người dùng mới vào databases Ở password để mặc định “123456” để đồng với website Ở bước tiếp theo, giữ Configure MySQL Server as a Windows Service Start the MySQL Server at System Startup bật Chạy dịch vụ Standard System Account Chọn Next để qua bước lưu trữ tài liệu nhấn Execute để kết thúc trình thiết lập Sau kết thúc trình, ta có thể truy cập vào sở liệu thông qua phần mềm mặc định Windows Command Prompt Để có thể truy cập MySQL thông qua Command Prompt, ta nhập Command Prompt lệnh sau “cd C:\Program Files\MySQL\MySQL Server 5.X\bin” sau nhập “mysql -u root -p” Sau nhập mật “1 3456” Sơ đồ thiết lập databases cho toàn hệ thống để đồng với hệ thống website Sau cài đặt xong server databases, ta cần thiết lập Page 13 Research Project 2018 Supervisor: PhD Le Ngoc Tran port forwarding router để máy khác có thể truy cập từ xa thông qua Internet vào đúng IP máy tính Trước tiên ta cần tìm địa ip PC thông qua câu lệnh “ipconfig” Command Prompt Nhập địa 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 nhập địa trình duyệt web Sau đăng nhập vào router, ta tìm đến mục Port Fowarding Sau đó them ip máy nhập port vào, mục protocol chọn TCP/UDP sau đó ấn Add để xác nhận cài đặt 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 trang web xây dựng để hiển thị theo dõi liệu hệ thống WAVE nên hoạt động website có hoạt động Live Overview (Dữ liệu thời) Biểu đồ Page 15 Research Project 2018 Supervisor: PhD Le Ngoc Tran Live Overview cập nhật liệu thời mới nhật vừa cập nhật databases để thị cho người dùng biết muối, độ bão hòa, Oxy, nhiệt độ… nước Nó thị trực tiếp trang Dashboard Trang Dashboard bao gồm liệu thời phần nhỏ biểu đồ cảm biến liệu thu Biểu đồ: Nơi hiển thị chi tiết tất liệu cảm biến thu sau đó thể cách trực quan qua biểu đồ giúp người dùng dễ dàng quan sát - Tiến hành: + Xây dựng bố cục website: Page 16 Research Project 2018 Supervisor: PhD Le Ngoc Tran Xây dựng bố cục website việc xây dựng hình ảnh, bố cục website cho phù hợp, làm bật lên nội dung website, khiến cho website không bị lan man Sau suy nghĩ tham khảo, website xây dựng Flat UI Design Flat Design thiết kế web phẳng có thể nói mà dạng thiết kế 2D, không sử dụng hiệu ứng phức tạp đở bóng, tạo hình khối … mà chọn phong cách đơn giản, dễ nhìn mang lại cảm giác trực quan dễ chịu cho người truy cập Flat Design phát triển hình thành dựa xu hướng thiết kế tối giản (minimalism), giao diện web phẳng thiết kế đơn giản hóa tất yếu tố từ hình ảnh, bố cục chi tiết nhỏ Màu chủ đạo website chọn xanh nhằm phù hợp với mục đích hệ thống đo giám sát chất lượng nước Cùng với màu xanh, website sử dụng thêm màu xám trắng làm nền, nhằm tôn lên nét chủ đạo màu xanh khiến website dễ nhìn Các khối hình, menu, hình ảnh, biểu đồ … thiết kế 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 lan man khiến người dùng tập trung Đồng thời việc đó 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 tốn thời gian vào việc load hiệu ứng làm cho trang web trở nên cồng kềnh Ở menu, chia làm phần Dashboard Thơng tin: o Dashboard: bao gồm Live Overview nhằm hiển thị tất thông số thời đồng thời tóm tắt tất thông tin trang chủ Và phần Dữ liệu Biểu đồ nhằm thị thông số lưu database sử dụng thông tin đó để vẽ biểu đồ chi tiết cho cảm biến Giúp việc theo dõi thông tin trở nên trực quan dễ dàng o Thông tin: Ở mục giới thiệu toàn hệ thống WAVE, thành viên dự án bên liên quan + Ngôn ngữ thiết kế: Việc tạo nên website để quan sát liệu kết hợp nhiều ngơn ngữ lập trình bao gồm HTML, PHP, CSS, JS Page 18 Research Project 2018 Supervisor: PhD Le Ngoc Tran o HTML: Đây ngôn ngữ sử dụng để tạo nên trang web, website có thể chứa nhiều trang trang quy tài liệu HTML Đây khung xương cho việc thiết kế website, tài liệu viết ngôn ngữ HTML đảm bảo vai trò hiển thị nội dung website trình duyệt o PHP ngơn ngữ lập trình kịch dùng chủ yếu để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tởng qt Nó phù hợp với web thường nhúng vào tran HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, gọn, cú pháp giống C Java Việc sử dụng PHP thêm vào với HTML nhằm trợ giúp cho website kết nối với databases, thu thập liệu,… trở nên dễ dàng Page 19 Research Project 2018 Supervisor: PhD Le Ngoc Tran o CSS ngôn ngữ sử dụng để tìm định dạng lại phần tử tạo tạo ngôn ngữ đánh dấu mà HTML Hiểu đơn giản HTML đóng vai trò định dạng phần tử website tạo đoạn văn bản, tiêu đề,… CSS giúp chúng ta có thể điều chỉnh bố cục trang web, trang trí trang web,… o JS hay Javascript ngơn ngữ lập trình kịch dựa vào đối tượng Việc sử dụng javascript việc thiết kế website khiến cho website tương tác tốt với người dùng, khiến website trở nên sống động + Mô tả hoạt động website: Website hoạt động hoàn toàn dựa liệu mà hệ thống thu gửi lên databases Việc sử dụng liệu tập tin php hỗ trợ thu thập hiển thị website Trong phần Live Overview, website lập trình để tự động lấy liệu cuối databases vừa thêm vào website Còn để vẽ biểu đồ trang web lấy 10 liệu cuối để vẽ cho người dùng dễ dàng so sánh chênh lệch lần thu giữ liệu Trang web tự động làm mới liệu để liên tục cập nhật thay đổi cho thơng số cho xác so với database + Kiểm tra hoạt động website: Khi thử trực tiếp mạng cục (LAN), server databases hoạt động ổn định Ta có thể truy cập vào server thơng qua máy tính mạng cục 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 máy thiết bị mạng internet Hoạt động website việc thị cập nhật liệu từ database hoạt động bình thường Khơng xảy xung đột website database Page 20 Research Project 2018 Supervisor: PhD Le Ngoc Tran Cũng không bị lỗi font chữ kiểm tra kĩ lưỡng thử nghiệm tiến hành viết code cho website Việc kiểm tra hoạt động lập trình website tiến hành song song với để tránh tối đa việc xuất lỗi xung đột không đáng có Page 21 Research Project 2018 Supervisor: PhD Le Ngoc Tran Chương ĐÁNH GIÁ KẾT QUẢ VÀ KẾT LUẬN Thông qua đề tài thiết kế xây dựng database cho dự án Wave, em thu nhiều kinh nghiệm cho việc xây dựng thiết kế website Từ việc lên kế hoạch cho việc thiết kế, lựa chọn giao diện, xây dựng nội dung website,… Tất thứ giúp em củng cố thêm kiến thức việc thiết kế lập trình website thành phần kèm Qua đó em hiểu rõ tương tác giưa server host, website người dùng Nâng cao hiểu biết thân việc lập trình hiểu ngơn ngữ HTML, PHP, CSS Javascript Trên hết, thông qua đề tài này, em có thể tiến hành nâng cấp hoạt động dự án Wave, khiến cho việc theo dõi liệu hệ thống qua tin nhắn điện thoại hay thơng qua hình 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 hệ thống, khiến cho có thể truy cập vào website để theo dõi liệu cách trực quan Giúp cho người dân nhà khoa học liên tục theo dõi liệu từ xa thông qua internet mà không cần phải đến tận nơi để lấy mẫu đem phịng thí nghiệm đo đạc Page 22 Research Project 2018 Supervisor: PhD Le Ngoc Tran CONTENTS LỜI CAM ĐOAN LỜI CẢM ƠN DANH MỤC TỪ VIẾT TẮT CHƯƠNG 1:TỔNG QUAN VỀ DỰ ÁN “THIẾT KẾ WEBSITE VÀ CƠ SỞ DỮ LIỆU CHO HỆ THỐNG QUAN TRẮC CHẤT LƯỢNG NƯỚC NUÔI TRỒNG THỦY SẢN TRÊN SÔNG CHÀ VÀ” .2 1.1 Giới thiệu dự án………………………………………………………… 1.2 Tổng quan web-server……………………………………………… CHƯƠNG 2: 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………………………8 2.1 Khái quát chung thiết kế website…………………………………… 2.2 Các bước thực thiết kế website…………………………………… 2.2.1 Các bước chuẩn bị cho thiết kế website……………………………….8 2.2.2 Thiết kế website cho hệ thống quan trắc chất lượng nước……………15 CHƯƠNG 3: ĐÁNH GIÁ KẾT QUẢ VÀ KẾT LUẬN……………………22 Page 23 ... VIẾT TẮT CHƯƠNG 1:TỔNG QUAN VỀ DỰ ÁN “THIẾT KẾ WEBSITE VÀ CƠ SỞ DỮ LIỆU CHO HỆ THỐNG QUAN TRẮC CHẤT LƯỢNG NƯỚC NUÔI TRỒNG THỦY SẢN TRÊN SÔNG CHÀ VÀ? ?? .2 1.1 Giới thiệu dự án…………………………………………………………... CHƯƠNG 2: 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? ??……………………8 2.1 Khái quát chung thiết kế website? ??………………………………… 2.2 Các bước thực thiết kế website? ??…………………………………... ĐÁNH GIÁ KẾT QUẢ VÀ KẾT LUẬN Thông qua đề tài thiết kế xây dựng database cho dự án Wave, em thu nhiều kinh nghiệm cho việc xây dựng thiết kế website Từ việc lên kế hoạch cho việc thiết kế, lựa