Design Of Website-Based Height Waves Information System

Copyright © 2019 by author(s) and ScientificResearch Publishing Inc. Abstract One of the environmental parameters that need to be monitored is ocean waves. Waves that occur at sea have random, dynamic, and complex movements. Height measurements and wave periods are difficult to formulate accurate and simplification is needed through mathematical equations in the form of sinusoidal. Therefore, the marine information system is very important for data storage media, data processing, and visualization of measurement data so that it is monitored in real-time. This research was made to build a website-based coastal wave height monitoring information system for wave height data display data from the measurement of the wave buoy instrument. This research was conducted by utilizing data from a wave height measuring instrument that was transmitted to an online database. Wave height data is displayed in the form of real-time data, realtime graphs with data sampling of 30 minutes, average data for one day, and average data for one month.


Introduction
Information technology has developed very rapidly. The internet is one of the fast-growing information and communication technologies. The presence of the internet is actually beneficial in providing information in various ways, including in monitoring data. According to Supranto (1992), data has two uses, first, to find out or accept a matter about negotiation or second, to make a decision. While monitoring data functions to provide information about the results of monitoring an activity/work/results of taking a measuring instrument or instrument. The parameter of the marine environment is one of the important data to be followed because it is essential to be useful for live problems in the marine environment and its surroundings.
One of the environmental parameters that need to be monitored is ocean waves. Ocean wave is the movement of air rising and rising straight toward sea level. In general, the causes of sea-level waves (Tirozzi et al., 2007). Waves that occur at sea have random, dynamic, and complex movements, so wave height and wave periods measurements are difficult to formulate accurately, and it and simplification are needed using sinusoidal mathematical calculations.
An information system is an integrated system that provides structured information for users to support operations and management in an order (Alfarisyi et al., 2014). Many information systems have been developed for monitoring data in various fields such as forestry data monitoring (Pratihast et a., 2016), fisheries data detection (Rahayu et al., 2017), project development monitoring (Ozorhon et al.,. 2014;Mujahidin and Putra, 2010), Data monitoring medical (Yeh et al., 2014;Suganda et al., 2016;), monitoring of low voltage power systems (Motoya, 2015), analysis of geomagnetic data (Vorobev and Shakirova, 2015) and logistical monitoring (Indrakarna et al., 2012). Therefore, marine information systems are very important for data storage, data processing, and visualization of measurement data so that they are monitored in real-time. The buoys that have been developed by the Department of Marine Science and Technology of IPB are essential to make visualization in the form of an easy-to-read display so that those who need data can access data whenever and wherever it depends. This research was made to construct a coastal wave height monitoring information system based on wave height data display results from the measurement of the wave buoy instruments.

Methode
This research was conducted in July-October 2019. Website design and construction were conducted at the Marine Acoustic and Instrumentation Workshop, Marine Science and Technology Departement, FPIK-IPB University.
The tools used in this study are a set of computers equipped with Microsoft Office 2016 software, XAMPP, Sublime Text, Google Chrome, and support for programming languages such as Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS), and Personal Home Page (PHP). The material used in this study is the wave height data obtained from the measurement of the wave buoy instrument.

Fig. 1. Wave buoy placement point
This study is a subset of the coastal observation system developed by Laboratory of Marine Acoustic and Instrumentation, Marine Science and Technology Departement, FPIK-IPB University. In this study, we create a website-based interface. The interface begins with the database and website interface design. The measurement results are sent to the database according to the data format. The design of wave height data information systems is a computerbased system. Computer-based system design is a complex activity because it requires a lot of resources and a long time, so it takes stages from the system design to the system is implemented (Hermawan et al., 2016).
There are two stages in the design of this information system, namely database design and website interface design. The database design in this study is based on the format of the measurement data. The database consists of sensor tables, which are sensor measurement data results, filter tables, which are sensor data filter results tables, and wave height tables, which are the results of data processing in the filter table to wave height.
Furthermore, website design consists of header design, menu design, body design, and footer design.
The header design is used to determine the identity of an interface. Menu design is used to navigate one page to another page. The design of the body aims as a place of primary information from an interface. Footer design contains information related to interface ownership. Headers, menus, containers, and footers are created using the Sublime Text 3 application.  The system performance test was conducted at the Laboratory of Acoustics and Marine Instrumentation, Marine Science and Technology Department, FPIK IPB University. Testing is done by transmitting data from the instrument to the database, and system performance testing is done to see the stability of data transmission and find out whether the system has been made working correctly or not. Implementation was carried out on Pramuka Island. The measurement results of the wave height parameters are transmitted to the database to be displayed on the website in real-time.
The data format measured by wave buoy consists of date, time, raw gyro data on the x, y and z-axis, normal gyro data on the x, y and z-axis, raw accelerometer data on the x, y and z-axis, normal accelerometer data on x, y and z axes, and compass raw data on the x, y and z axes (Figure 7). The raw data in the data retrieval result is digital data on the sensor at each axis, while normal data is data that has been multiplied by the value of gravity so that it can describe the actual data. This data will be sent by the buoy to the webserver.

Database Design
The database shows a collection of data that will be implemented on the website. Data stored in a database will be processed to be displayed on the website. The database generally consists of characters, fields, and records. Characters are the smallest pieces of data, can be letters, numeric characters, and special characters that produce a field (Minarti and Susanti, 2014). A field is a data item from a record, where field collections will form a record (Swara et al., 2016). A record is a collection of data fields or items that describe a particular data unit so that it produces a single row of data. Each record is uniquely known from the characters contained in the field (Abramova et al., 2014). Records in a table must have at least one field that uniquely shows the record, so records can be sorted, deleted, and edited. A collection of records is called a table. Database design requires a relationship between tables so that the database can work and be well coordinated. Recording information must be stored in a database that is useful for traceability. In this study, the database has several tables. The database table in this study includes buoy, buoy_filter, and buoy_h. The table and database structure are shown in Table 1.

Website interface design
The design of information systems is used as a communication mechanism between users and the system to provide information. The information system is an integrated system consisting of components or elements aimed at providing information for users (Gafur 2017). Information system design in this study is in the form of web pages. Web design using sublime text 3 with the programming language used is Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS), and Personal Home Page (PHP). In general, website design consists of three parts, namely the header, body, and footer.

Fig. 4. Design of website main menu
The website header section contains the display of the main identity of a website. The body is the main content page that contains information related to website design. The footer section, which is located at the bottom of a website contains information related to copyright, website ownership, and additional links. Table 1. List of tables and information system database structures The main page (home page) is the home page of a website. The main page created in this research consists of headers, menus, bodies, and footers. The header used is 'Coastal Wave Monitoring' on the left. The main body page on the website contains a map of the location of the instrument placement, real-time measurement of wave height, wave height data of the previous day, wave height data of the month when the web is accessed, and charts of real-time wave height measurements. In the body, there is also a dropdown list in the form of buoy placement location data. The footer section displayed the logo of the faculty of fisheries and marine science as an identity.
In addition, a Menu is also placed on the left side of the header. The header menu is useful for making it easier for users to find information and display efficiency on the website. There are two menus designed on the website, namely dashboard and instrument. Dashboard menu is the main page of the website when accessed so that the content contained in the dashboard menu that includes a map of the location of the instrument placement, real-time wave height measurement data, wave height data of the previous day, wave height data on the month when the web is accessed, and real-time measurement charts wave height. The instrument menu is a menu that contains a brief description of the wave buoy instrument used in data measurement. The menu on the website is made simple so that it makes it easy for users to understand it.

Data Processing
Data recorded in the height of the wave will be stored in the database in real-time. Stored data will be displayed on the website using the query module in accordance with the parameters of each data. Data processing in this study is to create a trigger system in the database. The trigger system is a separate part of real-time data. This system works automatically without affecting real-time data.

System implementation
The database shows a data set that will be implemented in the information system. Data stored in a database will be processed to be displayed on the website. The database is named vbening_datauji, with several tables. The database table in this study includes buoy, buoy_filter, and buoy_h. The database system is shown in Figure 5. Data sample buoy_h tables that have been successfully entered and stored in the MySql database can be seen in Figure 6. The wave height table has several fields, namely id, id_alat, date, time_1, time_2, and h. MySql, as a database system software provider, has several advantages, namely, its security features are quite good, simple table structure, integrated with several programming languages, and has low specifications. The database in the buoy_h table is shown in Figure 6.

Fig. 6. Wave buoy database
Wave height information displayed is wave height data information in graphical form in real-time with data sampling every 30 minutes. In addition to graphics, updated data is also displayed. The wave height chart starts at 00.00 WIB until 18.00 WIB. Additional information related to the wave height parameter, that is, the average value of the previous day's wave height is 12.0 cm which is displayed based on the query conditions. The wave height data display is shown in Figure 7.

Conclusion
This research has resulted website-based information system from the wave height data from the measurement of the wave buoy that can be accessed in real-time.