storing encrypted data is to prevent unauthorized data access. Figure 3.2.20 Server-side program for the gred.php website MySQL tutorial specified in the table for the database such as passwords, credit card numbers CHAPTER 3 Web-Based Programming 243 goo.gl/ L8veAS The fields Did you know? You 4 The process of setting grade values. print "<td align = 'center'>".$mark."</td>"; 2 Choose a database name 4 Terminating the connection to the database </html> print "</tr>"; 1 Open a text file called 'Matematik.txt' which contains the student's name and marks. } // end for while print "<td align = 'center'>".$grade."</td>"; Description: 3 On each line of text read from the text file, name data and marks separated by fclose($f); // close the opened file comma symbols will be stored in an array named '$field'. 2 Repetition structure for the process of reading text from a text file until the end of the file. print "</table>"; </body> 5 Closes an open text file. 1 Make a connection to the database 3 Make a query against the database to obtain ?> //end for php 3.2.5 Using Data Imported from Database Files to Solve Problems This section describes the PHP server scripting language that interacts with MySQL databases. The steps to follow to access the data from the database are: the desired data These four steps are sequential steps which means we cannot obtain the desired data without first connecting to the database. Machine Translated by Google
We will use the "mysqli_query" function to get data from the table in the database. The syntax of the "mysqli_query" function is as follows. Example: Example: To connect to the server database, we will use the "mysqli_connect()" operator function. The syntax of the "mysqli_connect()" function is as follows. Example: Next, when the connection is successfully made, we will use the "mysqli_select_db()" function to select the database name. The syntax of the "mysqli_select_db" operation function is as follows. EXAMPLE 4 Obtaining the Desired Data Making a Connection to a MySQL Database Choosing a MySQL Database Name Making Queries against the Database for mysqli_select_db("connectionname", "databasename"); $con = mysqli_connect("hostcomputer","username","password"); $result = mysqli_query($con,"SELECT * from STUDENT"); The program shown in Figure 3.2.21 is to query the database to obtain the desired data. $result = mysqli_query("connectionname","SQL statement to get data"); mysqli_select_db($con, "dbStudent"); Example 4 shows the dbStudent database that has a Student table as follows: $con = mysqli_connect("localhost","halim","1234"); 244 Computer Science Form 5 Machine Translated by Google
Here the result of using the mysqli_fetch_array function is a set of records stored in an array variable named row. $con = mysqli_connect("localhost","root",""); 1 <html> <?php The program in Figure 3.2.22 is an example of use in the List.php website and will produce output as shown in Figure 3.2.23. { For the purpose of listing student records, we will use the function <title>Student Information List</title> die('Connection to Database Failed'.mysqli_connect_error()); if (!$con) Example 5 shows the dbPelajar database that has a Student table. We want to create a website that will list all student records. <head> Example: <body> mysqli_select_db($con,"dbStudent"); 2 $row = mysqli_fetch_array($result); mysqli_fetch_array </head> } mysqli_close(); 4 Because the records are stored in the row variable , we will use a repetition mechanism such as while for the purpose of listing the student's records. <p>Student Information List</p> $result = mysqli_query($con,"SELECT * from STUDENT"); 3 EXAMPLE 5 CHAPTER 3 Web-Based Programming 245 Figure 3.2.21 Server-side program to query the database Machine Translated by Google
{ print "<th>State of Birth</th>"; print "<td>".$nostudent."</td>"; ?> $state = $row['STATE OF ORIGIN']; } print "</table>"; $con = mysqli_connect("localhost","root",""); print "<th>Name</th>"; print "<tr>"; $name = $row['NAME']; Retrieves values from the row array and print "<td>".$state."</td>"; mysqli_select_db($con, "dbStudent"); while($row = mysqli_fetch_array($result)) { print "</tr>"; print "<td>".$name."</td>"; </body> die('Connection to Database Failed'.mysqli_connect_error()); mysqli_close($con); if (!$con) print "<th>Class</th>"; print "<tr>"; $class = $row['CLASS']; stack it into the appropriate variable. print "<th>Murid No</th>"; print "<table border='1'>"; $number = $row['NUMBER']; print "</tr>"; $result = mysqli_query($con,"SELECT * FROM STUDENT"); print "<td>".$class."</td>"; </html> } Figure 3.2.22 Server-side program for the List.php website 246 Computer Science Form 5 Machine Translated by Google
Based on Figure 3.2.24, there are some input fields that must be filled with data and there are also some input fields that do not necessarily need to be filled with data before the new student's information is saved in the new student registration process. Input fields marked "* A website that has data entry elements in the form of forms will usually contain input fields such as text boxes, radio buttons, list boxes and submit buttons. Not all of these input fields are mandatory input fields for users to enter data for processing. " is the one that must be filled in by the user. If this input field is not filled in, then there will be an error during the data storage process into the database and the registration process through the website will fail. 3.2.6 Perform Validation (Validation) on Input Data from Users Figure 3.2.23 An example of the output display for the List.php website CHAPTER 3 Web-Based Programming 247 One of the hacker's methods to get data is through a form. Proper data validation is important to protect the data in your form . You Did you know? Machine Translated by Google
validation of input data on the client computer using a client scripting language such as JavaScript. This means pages With this method, the form will not be sent if the validation fails and the user will get feedback immediately. Website developers consider how to do 248 Computer Science Form 5 Figure 3.2.24 Website in the form of a form containing input fields the web becomes more responsive. Validation on input data in the server computer is sometimes insufficient to guarantee successful and secure form validation. Among the ways that are commonly done are as follows: 1 Make sure that the content of the input field must be filled with data There are several ways that input validation can be done. 4 Check if the Form has been sent to the server computer. In this chapter, we will build a website that will perform validation (validation) on input from users to avoid errors during the data storage process into the database, as shown in Figure 3.2.25. Figure 3.2.26 shows the display of the output of the DaftarPelajar.php website. 2 Check the content of the input field whether it complies with the established format such as the input field for e-mail or phone number. empty 3 Check the content of the input field for numbers whether they comply with certain criteria such as score values between 0 and 100. Did you know? You Machine Translated by Google
{ <html> $errNoMurid = "Please Enter Student Number"; $errEmail = "The email address entered does not follow the format"; <table> if (empty($_POST["NoMurid"])) 3 <td>Murid No *</td> <td><input name = "NoMurid" type = "text" size = "5"> <span class = "error"><?php echo $errNoMurid;?></ span> </td> </tr> <title>New Student Information List</title> <style> error {color: #FF0000;} </style> </head> <body> <?php $errName = $errNoMurid = $errEmail = ""; $errNoStudent = ""; $errEmail = ""; } //end for else if ($_SERVER["REQUEST_METHOD"] == "POST") { <head> otherwise otherwise <tr> if (empty($_POST["email"])) $errEmail = "Please Enter email"; ?> //end for php <h1>New Student Information List</h1> <form method = "POST" action = "<?php echo 1 2 otherwise } // end for if if (empty($_POST["Name"])) $errName = "Please Enter Name"; $errName = ""; $email = $_POST["email"]; // check if the email address is VALID if (! filter_var($email,FILTER_VALIDATE_EMAIL)) htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <tr> otherwise CHAPTER 3 Web-Based Programming 249 Machine Translated by Google
</form> <td>Student Name *</td> <td><input name = "Name" type = "text" size = "30"> <tr> <td>Phone Number</td> <td><input name = "Telefon" type = "text" size = "10"></td> </tr> </html> <tr> <tr> <td>Address</td> <span class = "error"><?php echo $errName;?> </td> </tr> <td>E-mail *</td> <td><input name = "email" type = "text" size = "30"> <span class = "error"><?php echo $errEmail;?>< /span> </td> </tr> "Register"></td> "50"></textarea></td> <td><input type = "submit" Name = "submit" Value = </tr> </ table> <td><textarea name = "Address" rows = "4" cols = <tr> </body> </tr> Figure 3.2.25 Program for the DaftarPelajar.php website Figure 3.2.26 Website in the form of a form containing input fields 250 Computer Science Form 5 Machine Translated by Google
•make a backup (backup) of the database The statement if (empty($_POST["NoMurid"])) on 2 aims to check the content of the field 'NoMurid. If the content of the "NoMurid" field is empty, then the variable errNoMurid will store the words "Please Enter the Student Number". The if (empty($_POST["Name"])) statement on 2 is intended to check the contents of the 'Name' field. If the content of the "name" field is empty, then the variable errName will store the words "Please Enter Name". •updating the database The statement if ($_SERVER["REQUEST_METHOD"] == "POST") on 1 is intended to check the post type of the data form. Before we build the database, the Apache Web Server and the MySQL database application must be launched first. Both of these applications can be launched from the XAMPP Control Panel window as shown in Figure 3.2.27(a). •build a database The contents of the errName, errNoMurid, errEmail variable values will be displayed in red text as stated in the statement Nowadays, many applications use databases to store data. In this section we will learn how to: • restore (restore) the database The if statement (empty($_POST["email"])) on 2 is intended to check the contents of the 'email. If the content of the "email" field is empty, then the errEmail variable will store the words "Please Enter an email", otherwise the statement if (!filter_var($email, FILTER_VALIDATE_EMAIL)) at 3 aims to check whether the email entered follows the correct format . If the email entered in the email field does not follow the correct format then the errEmail variable will store the words "The email address entered does not follow the format". 3.2.7 Building, Updating, Backing Up and Restoring the Database < to < > to > Description: The htmlspecialchars() function on line 36 in the DaftarPelajar.php program will change the special alphabets that have been set for HTML entities such as: & to & " to " ' to &# 039; Build a database <style> CHAPTER 3 Web-Based Programming 251 .error {color: #FF0000;} </style> Machine Translated by Google
On the XAMPP Control Panel window, click the 'Start' button on the Apache and MySQL section. When the Apache and MySQL sections show green, the next step is to open a browser and type http://localhost/dashboard in the address bar of the browser. If there are no problems, our web browser will display a window like Figure 3.2.27(b). Figure 3.2.27(a) XAMPP Control Panel 252 Computer Science Form 5 Figure 3.2.27(b) XAMPP Control Panel window Machine Translated by Google
Figure 3.2.27(c) Building a database Figure 3.2.28 Creating a new database CHAPTER 3 Web-Based Programming 253 Steps: •make a backup (backup) •updating the database database as shown in Figure 3.2.27(c). •build a database Once we click on the "phpMyAdmin" section, we will use this application to build To build a MySQL database, we will use the application available in XAMPP, which is "phpMyAdmin". "phpMyAdmin" is a web-based GUI (Graphical User Interface) application for MySQL that we will use to : 1 To create a new database, click the Databases menu on the top left of the website, as shown in Figure 3.2.28. • restore (restore) the database Machine Translated by Google
utf8_general_ci. Updating the Database 1 Login first in your "phpMyAdmin" page. 3 After giving the database name, select the "Collation" field. Collation contains the standard (standard) arrangement of letters, numbers in the table of a database. Select utf8_general_ci. The following are the steps to add or change fields in a table: 4 To change the field name, we click on the 'Change' section while to delete the field name, we click on the 'Drop' section. From time to time there is sometimes a need for us to change or add fields in our table for a certain Database. We can do this by using "phpMyAdmin". Figure 3.2.30 shows a screen display for updating fields in a table. 3 Click the 'Structure' menu. 2 Click the database we want to update, let's say the database is "dbPelajar". 2 In this 'Databases' section, we will enter the name of the database (say "dbPelajar") that we want to build in the "Create database" column. Figure 3.2.29 shows where to enter the name for the database. 4 Click the 'Create' button to build a new database. Figure 3.2.29 Enter the database name Figure 3.2.30 Adding or changing fields in a table 254 Computer Science Form 5 Machine Translated by Google
1 Login first in your "phpMyAdmin" page. "dbStudent". 3 Click the "Export" menu. 4 Type the name of the backup file you want to create in the 'New Template' field. Let's say the name of the file is 'dbPelajarBackup'. Figure 3.2.32 shows the display screen for creating a backup file. 5 Click the 'Go' button. 2 Click the database we want to back up. Let's say the database is Nowadays, many applications use databases to store data. Due to too many dependencies of applications that use databases, making backups of data is an important aspect to guarantee the security of data remains preserved in the event of things that can cause damage or loss of data. Figure 3.2.31 shows the process of backing up and restoring data. Backup process Recovery process Original Data (Backups) Base Backup Data Data DB bro Back up the database Did you know? You this facility, which is a backup Figure 3.2.32 Creating a backup file recovery (restore) on the database. Both Figure 3.2.31 Data backup and recovery process data for any application will also not be considered perfect if there is no facility CHAPTER 3 Web-Based Programming 255 and recovery (restore) is one of the complements to guarantee data security. Have a backup How to Backup Data by using "phpMyAdmin" Machine Translated by Google
Restoring the Database Restoring the database is the activity of returning the database to its original state when we create the latest backup file. The database was successfully backed up when the backup file named 'dbPelajarBackup.sql' was created. An example of the content of the file is as shown in Figure 3.2.33. 1 Login first in your "phpMyAdmin" page. 3 Click the "Import" menu. Steps to restore the database. 2 Click the database name to restore the database. 4 In the "file to import" column, click the "Choose File" button and select the name of the backup file we have created before. Figure 3.2.34 shows the display screen to select the backup file name that has been created. In MySQL we have already used the 'Export' command as a way to create want to restore Often the system administrator will create a database backup file by saving the name of the backup file with the name 'Backup' followed by the date and time the process was performed. An example of a backup file name like 'Backup dbPelajar_2016-12-31 256 Computer Science Form 5 restore the database, we will use the "Import" command. This means before us have a backup file. database, we must first Figure 3.2.33 Example of backup file contents backup. This time for _08_45_11.sql' which means the database was backed up on 31 December 2016 at 8.45 am. The method of giving such a backup file name will make it easier for us to choose the latest backup file during the data recovery process (Restore) later. Did you know? You You Did you know? Machine Translated by Google
The use of this query will find and organize data from one or more tables. There are several operational functions in this query to facilitate searching for data based on search criteria that can be used. There are two types of questions: 6 Click 'GO'. stored. Information that has been stored in the database can be retrieved by using the Query mechanism. The query structure applied to the database will use a predetermined format and most database management systems use Structured Query Language (SQL). 5 Find the previously created backup file as shown in Figure 3.2.35. (ii) Selective Query – a form of query that will take existing data from the database for use. The results of the query can be displayed on the screen, printed or copied/ (i) Action Query – a form of query that will carry out tasks with existing data from the database. Among the forms of actions are like creating a new table, adding, updating or deleting data in the table. (Query) Database Figure 3.2.35 Output display after successfully restoring the student db database CHAPTER 3 Web-Based Programming 257 Figure 3.2.34 Selecting a previously created backup file 3.2.8 Execute Some Forms of Query Machine Translated by Google
Action Query to add data in the 'MURID' table is as shown in Figure 3.2.38. Query Action to build a table named 'MURID' in the database is as shown in Figure 3.2.36. Some Select Queries to get data sets from the 'MURID' table are shown in Figure 3.2.39. Query Action to build a table named 'USER' in the database is as shown in Figure 3.2.37. Figure 3.2.39 Instructions in the form of a Select Query to obtain a data set from the 'MURID' table 'USERNAME' varchar(10) NOT NULL, 'CLASS' varchar(15) DEFAULT NULL, 'PASSWORD' varchar(10) NOT NULL, Figure 3.2.38 Instructions in the form of an Action Query to add data in the 'MURID' Table CREATE TABLE 'USER' ( 'NAME' varchar(30) DEFAULT NULL, INSERT INTO STUDENT VALUES("2","Amri bin Yahya","4 Bistari 2","Johor"); SELECT * FROM STUDENT; UNIQUE KEY 'NOMURID' ('NOMURID') ) 'USER TYPE' int(1) NOT NULL 'COUNTRY OF BIRTH' varchar(15) DEFAULT NULL, Figure 3.2.36 Instructions in the form of Action Query SELECT NAME, CLASS FROM STUDENT; ); Figure 3.2.37 Instructions in the form of an Action Query to build the 'USER' table INSERT INTO MURID VALUES("1","Siti Khadijah Sofia","4 Bistari 1","Kedah"); CREATE TABLE 'MURID' ( 'NUMURID' int(11) DEFAULT NULL, SELECT * FROM STUDENT WHERE STATE OF BIRTH = 'KEDAH'; 258 Computer Science Form 5 EXAMPLE 6 EXAMPLE 8 EXAMPLE 9 EXAMPLE 7 Machine Translated by Google
</form> <option value = "Melaka">Melaka</option> <h3>List of Pupil Names Based on State of Birth</h3> <option value = "Nine States">Nine States</option> <option value = "Terengganu">Terengganu</option> <option value = "Labuan">Labuan</option> <body> <option value = "Selangor">Selangor</option> </html> <input type = "submit" value = "Process" name = "submit"> Select State : <option value = "Silver">Silver</option> <option value = "Kuala Lumpur">Kuala Lumpur</option> <option value = "Pahang">Pahang</option> <form action = "PelajarNegeri.php" method = "POST"> <option value = "Johor">Johor</option> </select> <option value = "Pengang Island">Pengang Island</option> <select id = "State Selection" name = "State"> </body> <option value = "Perlis">Perlis</option> <option value = "Sarawak">Sarawak</option> Solution: State.php <html> <option value = "Kelantan">Kelantan</option> <option value = "Kedah">Kedah</option> Example 10 shows a program in the Negeri.php website using a Select Query to list all student information from a specific state. The input for the website has a checkbox that allows the user to select the name of the state. Figure 3.2.40 shows the program in the Negeri.php website and its output display as shown in Figure 3.2.41. <option value = "Sabah">Sabah</option> Figure 3.2.40 Program in Negeri.php website CHAPTER 3 Web-Based Programming 259 EXAMPLE 10 Machine Translated by Google
260 Computer Science Form 5 Figure 3.2.41 Output display for Negeri.php website die('Connection to Database Failed'.mysqli_connect_ error()); mysqli_select_db($con,"dbStudent"); print "<h3>List of Pupil Names Based on State of Birth</h3>"; print "<h3>Country :".$nameCountry."</h3>"; print "<table border = '1'>"; print "<tr>"; print "<th>Murid No</th>"; print "<th>Name</th>"; print "<th>Class</ th>"; print "</tr>"; $sql = "SELECT * FROM STUDENT WHERE STATE OF BIRTH = "."'". $nameState."'"; echo $sql; $result = mysqli_query($con,$sql); while ($row = mysqli_fetch_array($result)) { print "<tr>"; if (!$con) $name = $row['NAME']; $class = $row['CLASS']; <body> <?php $StateName = $_POST["State"]; $con = mysqli_connect("localhost","root",""); $number = $row['NUMBER']; <html> Output: Figure 3.2.42 shows the program in the PelajarNegeri.php website for the purpose of listing all student information from a particular state that has been selected from the State.php website, while the output display is as shown in Figure 3.2.43. State Students.php Machine Translated by Google
</body> print "<td>".$name."</td>"; mysq1i_close($con); Example 11 describes building a member registration website for a school Chess Club. Figure 3.2.44 shows the program in the DaftarAhli.php website while the output display is as shown in Figure 3.2.45. The member registration process will be implemented by a program in the ProsesDaftar.php website as shown in Figure 3.2.46. print "<td>".$class."</td>"; print "</tr>"; } print "</table>"; ?> 3.2.9 Register (Sign Up) and Log In (Login) print "<td>".$numurid."</td>"; <html> CHAPTER 3 Web-Based Programming 261 Figure 3.2.43 Output display for the PelajarNegeri.php website Figure 3.2.42 Program in the PelajarNegeri.php website in a Website Most websites currently require users to register as a valid user/member before being allowed to access data from them. Once the verification is done, then the user can browse the website. Examples of websites that require registration (sign up) are such as school club/association membership websites, company websites for employees, social media websites and so on. The website only allows the sharing of data or information such as pictures, videos, articles and others to registered members only. In this section, we will build a sign up website and then a login website for registered users. EXAMPLE 11 Machine Translated by Google
</tr> <select name = "type"> </td> <td width="60%"> <table border="0"> <td><input name = "password" size = "15" <head> </tr> <td style = "background-color:#00FF00;" align = </tr> 262 Computer Science Form 5 New Member Register</td> type = "text"></td> <title>New Member Registration</title> </td> <option value = "Ordinary Member">Ordinary Member</option> <option value = "Chairman">Chairman</option> <tr> <body> <tr> <table> <tr> type = "password"></td> </tr> <tr> <td>Username</td> <html> "center">Welcome</td> </head> </tr> <td>Membership Type</td> <td style = "background-color: #00FF00;" align="center"> <td><input name = "username" size = "10" <td>Password</td> <form action = "ProsesDaftar.php" method = "POST"> <td><img src = "LogoKelab.png"></td> <option value = "Administrator">Administrator</option> </select> We will build a sign up website for the School Chess Club. Solution: The following is the content of the 'DaftarAhli.php' file. Machine Translated by Google
Output: { die('Connection to Database Failed'.mysqli_connect_error()); } mysqli_select_db($con,"dbStudent"); $username = $_POST['username']; $password = $_POST['password']; $type = $_POST['Member']; $sql = "INSERT INTO USER (USERNAME, PASSWORD, USERTYPE) </body> </ html> VALUES ('$username', '$password', '$Member')"; print $sql; $result = mysqli_query($con, $sql); header('location:Admin.php'); mysq1i_close($ con ); if (!$con) </table> </ form> Figure 3.2.46 Program in the ProsesDaftar.php website Figure 3.2.44 Program in DaftarAhli.php website <tr> Figure 3.2.45 Output display for the Daftar.php website CHAPTER 3 Web-Based Programming 263 type = "submit"></td> </tr> $con = mysqli_connect("localhost","root",""); <?php <td><input name = "submit" value = "Register" The following is the content of the file 'ProsesDaftar.php'. ?> Machine Translated by Google
Figure 3.2.47 shows the program in the LogMasuk.php website while the output display is as shown in Figure 3.2.48. If the user has registered as a club member then the Masuk.php website will be displayed as shown in Figure 3.2.49. Figure 3.2.50 shows the output display for the Masuk.php website. The verification process of checking whether the user has registered as a club member or not will be done by the program in the ProsesMasuk.php website as shown in Figure 3.2.49. Example 12 describes the construction of a login website (sign in) for registered club members. EXAMPLE 12 <td>Password</td> </tr> 264 Computer Science Form 5 <form action = "ProsesMasuk.php" method = "POST"> </head> <tr> </tr> <table border="0"> <tr> Coming</td> <td style = "background-color: #00FF00;" align = "center">Log In</td> </tr> <tr> </td> </table> </ body> </ html> <td><img src = "LogoKelab.png"></td> <head> <td><input name = "password" size = "15" type = "password"> </td> <table> <body> <td><input name = "submit" value = "Input" type = "submit"></td> <td>Username</td> <td><input name = "username" size = "10" type = "text"></td> <tr> </table> <html> <tr> </form> <td style = "background-color: #00FF00;" align = "center">Congratulations </tr> </tr> <title>Login</title> <td width="60%"> Figure 3.2.47 Program in LogMasuk.php website Machine Translated by Google
header("location: Login.php"); // return to LogMasuk.php website $record = mysqli_query($con, "SELECT * FROM USER where USERNAME = } { } mysqli_select_db($con,"dbStudent"); $username = $_POST['username']; $password = $_POST['password']; $result = mysqli_num_rows($records); Figure 3.2.49 Program in ProsesMasuk.php website ?> '$username' and PASSWORD = '$password'"); Figure 3.2.48 Output view of LogMasuk.php website header("location: Login.php?username = ".$username); if ($result>0) { CHAPTER 3 Web-Based Programming 265 { die('Connection to Database Failed'.mysqli_connect_error()); otherwise } <?php $con = mysqli_connect("localhost","root",""); if (!$con) Machine Translated by Google
Log Out</a></td> </html> <body> </tr> $name = $_GET['username']; 266 Computer Science Form 5 <tr> <html> <td width = "40%"><img src = "LogoKelab.png"></td> <td colspan = "2" valign = "top"></td> <td colspan = "2" style = "background-color: #00FF00;" align = <td colspan = "2" align = "right"><a href = "Chess Club.php"> ?> User :<?php print $name?> <title>Home Page</title> </tr> <tr> Figure 3.2.50 Output view of Masuk.php website <table border="1"> Figure 3.2.51 Program in Masuk.php website </tr> <?php <td style = "background-color: #00FF00;" align = "center">Congratulations <head> "left">Name Come</td> <tr> </table> </ body> </head> </td> Machine Translated by Google
Starting from the Authentication.php page as shown in Figure 3.2.52, the user is required to enter a username and password. The user authentication process will be implemented by the Sahkan.php website program as shown in Figure 3.2.53. If not, the website as in Figure 3.2.54(b) will be displayed. If the username and password entered match the record that exists in the table for the database then the website as in Figure 3.2.54(a) will be displayed. User verification is one of the data security features in the database that can be achieved by users on the website. This access facility will further limit the user to make any changes to the database. For example different user levels provide different access rights and activities that can be performed on the database. A website for employees in a company allows only its employees who can access the database. To create a website that can authenticate a specific user, we need a table in the database that stores the user's name, as well as the user's password. 3.2.10 User Authentication and Updating Data in the Database session_start(); $_SESSION['ValidUser'] = 0; { <?php CHAPTER 3 Web-Based Programming 267 if (!$con) Figure 3.2.52 Display of the Verification.php website } $con = mysqli_connect("localhost","root",""); mysqli_select_db($con,"dbStudent"); die('Connection to Database Failed'.mysqli_connect_error()); Machine Translated by Google
header("location:Authentication.php"); if($result>0) } $_SESSION['ValidUser'] = 0; $result = mysqli_num_rows($records); $_SESSION['ValidUser'] = 1; ?> mysqli_close($con); { $username = $_POST['username']; } Figure 3.2.54(a) Output view of Sah.php website header("location:Authentication.php"); Figure 3.2.53 Program in the Verification.php website 268 Computer Science Form 5 $record = mysqli_query($con, "SELECT * FROM USER where USERNAME = '$username' and PASSWORD = '$password'"); { otherwise $password = $_POST['password']; Figure 3.2.54(b) Display of the output of the website Sah.php Machine Translated by Google
Example 13 shows a program in the List.php website that will list all records from a Table for a database. Figure 3.2.56 shows the program in the List.php website, while the output display is as shown in Figure 3.2.57. Take it Save Display 1 selected record Update the data in the record Base All records in the table Data Updating Data in the Database EXAMPLE 13 <head> <title>Student Information List</title> die('Connection to Database Failed'.mysqli_connect_error()); { <html> CHAPTER 3 Web-Based Programming 269 <body> } mysqli_select_db($con,"dbStudent"); </head> Figure 3.2.55 Data updating process <?php <p>Student Information List</p> if (!$con) $con = mysqli_connect("localhost","root",""); To update the data in the database, we need to search for the record to be updated first in the table (table) for the database. Figure 3.2.55 shows the process of updating data in the database. Starting from first listing all the records in the table, the next user will select the record to be updated. After the user selects the record to be updated, the website will display a record that has been selected and the process of updating the data in the database will be done by the next website. Machine Translated by Google
Next, we will build a website that aims to display the records that have been selected for the purpose of updating the data as shown in Figure 3.2.58. 270 Computer Science Form 5 print "<td>".$class."</td>"; print"<th>State of Birth</th>"; print "<td>".$state."</td>"; </html> print "<td>".$name."</td>"; print"<th>Class</th>"; </body> $result = mysqli_query($con,"SELECT * FROM STUDENT"); print "</tr>"; Figure 3.2.56 Program in the List.php website print "<td>".$lnk."</td>"; print "</tr>"; print "<table border='1'>"; $lnk = "<a href = 'Kemaskini.php?nomurid=$nomurid'>Kemaskini</a>"; Figure 3.2.57 Program in the List.php website print "</table>"; while($row = mysqli_fetch_array($result)) { } ?> print"<th>Murid No</th>"; print"<th>Name</th>"; print "<td>".$numurid."</td>"; print "<tr>"; print "<tr>"; mysqli_close($con); Machine Translated by Google
Figure 3.2.59 is the content of the website to display the selected record. The record updating process will be done by a program in the ProsesKemaskini.php website as shown in Figure 3.2.60. ?> $noM = $_GET ['nostudent']; $con = mysqli_connect("localhost","root",""); <html> if (!$con) } mysqli_select_db($con,"dbStudent"); $sql = "SELECT * FROM STUDENT WHERE NOMURID ='".$noM."'"; // example $sql = "SELECT * FROM STUDENT WHERE NOMURID = 'CL001'"; $result = mysqli_query($con,$sql); $row = mysqli_fetch_array($result); $name = htmlspecialchars($row['NAME'],ENT_QUOTES); <body> <?php CHAPTER 3 Web-Based Programming 271 die('Connection to Database Failed'.mysqli_connect_error()); <title>Update Student Information</title> </head> $state = $row['STATE OF ORIGIN']; Figure 3.2.58 Kemaskini.php website output display { <head> $class = $row['CLASS']; Machine Translated by Google
Figure 3.2.60 Program for the website ProsesKemaskini.php Figure 3.2.59 Program for Kemaskini.php website 272 Computer Science Form 5 </body> </ html> <p>Class<input name = "class" type = "text" size = "15" value = <input name = "name" type = "text" value = '<?php print $name;?>'> </p> { <p>State of Birth <input name = "state" type = "text" size = "20" value = '<?php print $state;?>'> </p> <p><input type = "submit" value = "Update"></p> </form> ?> <p>Student Name if (!$con) </p> } mysqli_select_db($con,"dbStudent"); $numurid = $_POST['numurid']; $name = $_POST['name']; $class = $_POST['class']; $state = $_POST['state']; $sql = "update students set NAME = '$name', CLASS = '$class', STATE OF ORIGIN='$state' where NUMBER = '$number'"; $result = mysqli_query($con,$sql); header('location:List.php'); <form action = "ProsesKemaskini.php" method = "POST"> <p>Murid No: <b><?php print $noP;?></b></p> <p><input type = "hidden " name = "numurid" value = '<?php print $noP;?>'></p> <?php $con = mysqli_connect("localhost","root",""); '<?php print $class; ?>'> die('Connection to Database Failed'.mysqli_connect_error()); Machine Translated by Google
<form action = "berjaya.php" method = "post"> </form> I'm old <?php print $_POST['age']; ?> years. CHAPTER 3 Web-Based Programming 273 <input type = "submit" value = "Submit" /> d </html> </html> File name: form.php a File name: success.php </body> <form action = "Ucapan.php" method = "POST"> Age : <input type = "text" name = "txtAge"> <input type = "Submit" value = "Submit"> </form> <body> Name : <input type = "text" name = "txtName"> <body> <html> <html> Age: <input type = "text" name = "age" /> c </body> b 8 What is the use of the explode function in PHP? 3 Why are server scripting languages needed in web development? 2 List two applications that use server scripting languages. enter the value 17 and click the 'Submit' button based on the content of the following PHP file: Do you think it is possible to have more than one form in one website? 1 What is meant by server scripting language? INSERT INTO TEST (a,b,c) VALUES (1,2,3); is implemented? 5 Explain the meaning of each tag below: 6 In PHP, we can access data from a form by using $_GET or $_POST operations. What is the difference between GET and POST? 7 In a website, there is a form for users to enter data. 9 The following is an example of a MySQL command. What is the value in Table 'TEST' when the command 4 Give two basic operations on text files commonly used by PHP websites. 10 What output will be displayed on the browser if the user strengthening exercises 3.2 A B C Machine Translated by Google
3.3.1 Principles of Website Design STANDARD Learning Interactive Websites Therefore, the construction structure and decoration pattern for each room will also differ according to its function. The concept, size and position of each living space such as the living room, kitchen and bedroom will be determined in advance during the planning phase according to the type of home built such as bungalow, condominium or terrace house as shown in Figure 3.3.1. In the process of designing a website, there are several principles or elements of website design that need to be paid attention to so that the website that is built does not look strange or provide an unpleasant experience to users. This is said to be so because those elements are able to provide a different experience and affect user satisfaction to browse the website that has been built. Principle refers to the foundation that is the basis for the development or construction of something. Design refers to the arrangement or structure in the construction process of something. Because of this, designing a website can be likened to the process of planning, building and renovating and decorating a home. Each space built in the house plays a different function. At the end of learning students can 3.3.1 Study and formulate the principles of website design from the point of view of user suitability and the purpose of the website 3.3.4 Using Cascading Style Sheets (iii) Popup box Figure 3.3.1 Example of residential layout according to space type (ii) Option button 274 Computer Science Form 5 3.3.3 Build a simple website using Hypertext Markup Language (HTML) that contains frames, headers, paragraphs and images 3.3.7 Produce an interactive website for use by users and system administrators to solve problems (i) Data validation 3.3.5 Using a client scripting language to build an interactive user website containing the following features: 3.3.2 Designing the application framework to be developed 3.3.6 Use server scripting languages to build web pages that can access and update data in a database (CSS) to style text, font, background, tables, borders and position 3.3 Machine Translated by Google
Types of Built Web Environments Information on the Web Environment Visual balance Emphasis Type Built Color and Navigation The web Inner element Typography The difference Graphics Basic principles of website design Web •Requires supporting software for display Because of this, web designers should consider the type and version of the browser that can be used to display the built website and should not focus on one type or one version only. There are several types of browsers that can be used to display websites, for example Internet Explorer, Google Chrome and Firefox as shown in Figure 3.3.3. Each browser usually has several versions that can be used to display web pages. •Internet access speed • Suitability of using various types of browsers website is as shown in Figure 3.3.2. • Variety of monitor display sizes used The environment of this website includes several technical factors such as the following: Among the basic principles that should be taken into account when designing •Variety of computer systems and mobile devices used by users Before a website is built, we must understand the environment of the website. 10 Top Principles of Effective Web Design https:// goo.gl/ kd1Rzh Figure 3.3.2 Principles of website design CHAPTER 3 Web-Based Programming 275 Machine Translated by Google
In addition to the variety of browser types, the variety of Internet access methods used for each user such as access speed For example, for animation, commonly used supporting software is Flash. For example, a 19-inch monitor screen usually has a resolution size of 1440 × 900 while a 22-inch screen has a resolution size of 1680 × 1050. The higher the number of resolutions, the higher the number of pixels and the clearer and more beautiful the display quality. Therefore, the web designer should ensure that the displayed website needs to be flexible in line with the variety of screen sizes available for use should also be taken into account. For example, if a website is built for entertainment purposes such as online games, these games may require faster access compared to a website built for information sources such as news. Sometimes some websites require special support software to support displays such as animation, audio or video. Web designers need to be aware of the selection of the type of support software, for example choosing software that is well known and widely used. The variety of screen sizes as shown in Figure 3.3.4 should also not be underestimated. This is said to be so because the size of the screen display will have a direct impact on the quality of the web display based on the size of the resolution used. For LCD (liquid crystal display) type screens, the size of the resolution is measured based on the size of the display screen. by the user. Mention other browsers that you know other than the ones that have been learned in this topic. Google Chrome Figure 3.3.3 Type of browser to display web pages goo.gl/ BQULLf 276 Computer Science Form 5 Mind Test Browser Popularity Statistics Figure 3.3.4 Examples of some screen display sizes in inches Google Chrome is the browser that has topped the browser popularity chart for the past five years. Did you know? You 24" 19" 4" 4.7" 5" 7" 19 inches 4 inches 5 inches 24 inches 4.7 inches 7 inches Internet Explorer Firefox Machine Translated by Google
Information Emphasis on the Web • The use of white space to make the elements stand out more The emphasis principle refers to the information or content that you want to pay attention to in the website. In every website that is built, the web designer needs to determine the important information or content that should be emphasized and the appropriate technique or method that needs to be used to attract the attention of the website user. There are several ways that can be used to attract the attention of users. Some of the ways are as follows: shape. highlighted (as shown in Figure 3.3.5) • Use of bold, italic, different colors and border functions. • Use of special effects such as drop shadow, texture or light and Website Design goo.gl/ FPcjLC CHAPTER 3 Web-Based Programming 277 Figure 3.3.5 Example of using white space to highlight image elements and navigation bar options used Machine Translated by Google
Figure 3.3.6 An example of a Twitter website that uses the difference principle for This system is one of the revolutions in education in Malaysia that parents can use to monitor their children's progress. give confirmation to the login button 278 Computer Science Form 5 The School Examination Analysis System (SAPS) is a system provided by the Malaysian Ministry of Education (KPM). The purpose of this system was developed to analyze the internal examination data of each school throughout Malaysia. My Malaysia! Typography Differences in Web Elements •Use of different labels and links. • The use of borders, different colors and also special effects. The use of this concept of difference is also able to produce a navigation system that is easier and can guide visitors to reach the desired information or direct them to the desired destination. • The use of the principle of color difference in giving variety to Among the different methods that can be used are the following: The principle of typography refers to the arrangement of text displayed on a website. Good text organization facilitates understanding in the reading process and also improves the user-friendly element of the website. The use of graphics and text that complement each other can form an image in the reader's mind. In addition, typography is also able to better convey the message or idea of a web designer who may be professional to his readers. The concept of difference is used to produce a visual appeal to an element that is to be emphasized in the website. The greater the difference between an element that wants to be highlighted compared to other elements in its environment, then the element will look more different. and different text sizes. •Paper-based display patterns • Z-shaped display pattern • F-shaped display pattern • Use of white space, inverted text, italicized text There are several text formatting patterns for web pages. This arrangement pattern can be used according to the user's reading style. Figure 3.3.7 shows one of the screen-based text layout and display patterns. Other text formatting patterns that follow the user's reading style are as follows: login button (as shown in Figure 3.3.6). Machine Translated by Google
Application Figure 3.3.7 An example of a screen-based text arrangement pattern Daily 0537661883b1c has been developed that converts text to audio that allows them to get information by listening. There is also the facility of Braille Keyboards that allow them to type. Source: GO shop and At this time, consumers do not need to waste time going to shopping complexes to buy their needs. There are many websites for businesses such as Auctions, huffingtonpost.com/ any need. http:// www. etc. for them to buy CHAPTER 3 Web-Based Programming 279 Growing technology has developed technology to help visually impaired users surf the Internet. Text-to-speech program us_57051a56e4b entry/ blind-people internet-accessibility_ Figure 3.3.8 An example of the type of appearance of characters or fonts categorized as a safe list In addition, when making a selection about the type of font used in the website to be displayed through the browser, it is better to choose or use a group of fonts that are categorized as safe to use or supported by most platforms. Choosing a less commonly used font may cause some operating systems to not support that type of font and have problems displaying web content. Figure 3.3.8 shows examples of fonts or text supported by most browsers. You Did you know? Machine Translated by Google
goo.gl/ i55yFD Figure 3.3.9 An example of the use of appropriate colors that can give an image to a built website The Effect of Color in Web Development 280 Computer Science Form 5 Color and Graphics The use of colors and graphics in a website can highlight the image and identity of a website. Smart use of color can attract visitors' attention and improve their readability. The use of the same background color and text can provide a less pleasant experience among users. This is said to be so because this condition makes their reading process difficult. The use of colorful colors can also make the reader feel nervous and lose focus. Figure 3.3.9 shows suitable background color combinations. •Standardize the type of text or font used for each page content or description. Among the guidelines related to typography are as follows: which is built. •Use different text sizes to differentiate the title with Machine Translated by Google
Figure 3.3.10 An example of a Tourism Malaysia website that uses breadcrumbs navigation techniques, drop-down menus and You can refer to the source below to see the website page: goo.gl/ DBjBNS CHAPTER 3 Web-Based Programming 281 navigation bar. Source: The website ebizmba.com has reported the 15 most popular children's websites in January, 2017. Navigation bar Drop-down menu Breadcrumbs Visual Balance You Navigation Did you know? •Site map Web designers will usually use various navigation techniques in their websites This concept of web navigation provides experience to website visitors to navigate the website according to their respective competences. Good web navigation should give the website visitor an indication of the user's current position or location. Figure 3.3.10 shows some of the navigation techniques used in the Tourism Malaysia website. •Breadcrumbs •Links using graphics Navigation refers to the structure of a website that will make it easier for a user to navigate it. •Navigation bar•Drop-down menu Visual balance refers to the combination of visual elements such as lines, images, text, shapes, and colors in a website. In order to determine the combination pattern of all the visual elements, the web designer also needs to be aware of the target user of the website. For example, if the website is built for children, large text elements should be avoided because children are not inclined to read. On the other hand, the use of graphic elements and images must be exaggerated because these elements are able to attract their interest to continue browsing the website as shown in Figure 3.3.11. accordingly. Among them are the following: Machine Translated by Google
Figure 3.3.11 An example of a children's website that uses graphic elements and images according to their suitability 282 Computer Science Form 5 User Centered Design A website that is built will meet the needs of the user when the website is able to meet the user's taste. For that, web designers should know their target users and what users want when they browse the website they are building. For example, are they browsing the website to read articles or find information? What do they expect to achieve that goal? Consider the Google search engine website that is popular among users. What makes the site popular compared to other search engines? This is said to be so because the website successfully fulfills the desires of those users who browse the website to find information. Google produces a website that is easy to understand, the search results are quite fast and the information is very dense. The interface produced is also very simple, easy to understand without ads with very few links and the purpose produced is only focused on one objective, which is to allow users to enter search keywords. Figure 3.3.12 shows the Google website that displays a simple and easy-to-understand display that suits the needs of users who want to find information. Machine Translated by Google
Figure 3.3.13 The process of designing an application framework Users such as Persons with Disabilities (OKU) need support equipment or software to help them navigate websites. What equipment or software is suitable for users with hearing impairments? CHAPTER 3 Web-Based Programming 283 Mind Test Figure 3.3.12 An example of a www.google.com website that has a display brief for information search purposes. 3.3.2 Designing the Application Framework Individual Work The key to the success of a website depends on how the website works. Even if a website contains great animation and graphic elements, but if the website fails to guide users in doing what they want, such as the process of purchasing products or how users take advantage of resources and applications, then the existence of the website is in vain. in vain To build a good website, more attention needs to be given to determine how the information in the website can be reached and the appropriate approach for users to get information. When designing the framework of the application to be developed, there are several processes that need to be done as shown in Figure 3.3.13. Page structuring Structuring of content or information Interface design The process of designing an application framework Navigation design ACTIVITY 1 Principles of Website Design Content Structuring Based on your observations, list the basic principles of web design used in each of these web pages. You are required to visit the following social media website: •www.facebook.com Objective: Identify the basic principles of website design implemented in social media websites. •www.instagram.com Machine Translated by Google
In the process of building a website, every design that will be produced needs to be based on the user or user experience while browsing the website. Because of this, user involvement during the information gathering process is very important to ensure that the website that is built is able to meet their needs. Among the methods that can be used to get input from users are such as holding interview sessions with users, distributing survey forms to target users or conducting a survey of how the website is used by users. Among the steps in information design are as follows: The first step that needs to be taken is that the website builder lists all the information that will be included in the built website. The list or inventory is not only limited to the type of information that will be entered, but what the user can do should also be listed. This is said to be so because the list or inventory will give an idea of the functions that need to be in the website. For example, for electronic commerce websites, functions such as zooming in on selected products, shopping carts, product delivery procedures or responses to users are among the important functions that must be present on the website. Figure 3.3.14 shows the Zoom In function commonly used in electronic commerce websites. The next step is for the website builder to classify the information list or information inventory into several categories. For that purpose, the information designer can look at the similarity of the available information to create the possible categories that need to be there. Information or information is something subjective and information classification patterns can vary depending on the perspective of the web designer. Among the methods that can be used in information classification are as shown in Table 3.3.1. • Forming an inventory of information What content should be included in your website? How is the content of the information on the website classified? Those questions are among the important things that require the art of classifying and labeling information in websites. • Classification of information Figure 3.3.14 Example of the Zoom In item function 284 Computer Science Form 5 Structuring Content or Information Machine Translated by Google
Category or type In alphabetical order Method Sales classification by product category Classification of sales by date The classification of sales information starts from a small amount to a large amount of sales. Example Classification of information by geography, for example classification of sales by state and place Chronology Spatial Types of Muslim clothes classified into subcategories such as blouses and modern kurung By order of magnitude Classification of sales information based on username Hierarchy Figure 3.3.15 Example of information classification by category or type CHAPTER 3 Web-Based Programming 285 Table 3.3.1 Classification of information During the information classification process, the designer needs to determine the number of categories of information that must be available in accordance with the list of available information and how each category will be visualized in the website to be built (as shown in Figure 3.3.15). The best method that can be implemented is to use diagrams or flow charts to show the relationship between each category of information available. Indirectly, this is also able to give an idea or a rough idea of the link pattern of the website that will be built. Machine Translated by Google
Main Section 2 Pages Section 3 Subsections Subsection Structuring Section 1 Photo 2 Photo 3 Complex Photo 4 Section 4 Sequence Home page Site Subsection Photo 1 Style Subsection Hierarchy Figure 3.3.16 Some page structuring styles Figure 3.3.17 Example of hierarchical structuring Figure 3.3.18 Sequential structuring 286 Computer Science Form 5 Page Structuring • Hierarchical structuring In sequential structuring, the user is guided from page to page in sequence. This structuring is more suitable for websites that feature narration or any chronological information. Page structuring emphasizes how each page in the website is linked. Usually, professional information designers will use site diagrams as a tool to convey the structure of the website to the client and as a guide throughout the website development process. A site diagram is a diagram that uses box symbols to represent each web page with lines or arrows to represent the relationships between web pages. Among them are the following: • Complex structuring •Sequential structuring There are commercial websites that offer dense information and quite complex functions. There are various structuring styles that can be used by web designers as shown in Figure 3.3.16. An example of hierarchical structuring is shown in Figure 3.3.17. Most websites are classified hierarchically starting from the first page that displays a number of information category options available in the website for users to browse. Usually, the categories that are created need to conform to the same type of information available for each category. An example of sequential structuring is shown in Figure 3.3.18. Machine Translated by Google
Interface Design Navigation Design If you visit a shopping complex, you will usually use the sign system to find the location of the store you want to visit. That is also the concept that needs to be applied in the website. To help visitors know their position or to reach the desired information, the use of logos, labels, links or other shortcuts that make up the navigation system is used. Web navigation refers to the process of objects in a web page consisting of text, diagrams, audio and video linked to each other using hypertext or hypermedia links. This concept of web navigation provides experience to website visitors to navigate the website according to their respective competences. Good web navigation should give the website visitor an indication of the user's current position or location. Once the pages in the website are structured, the next phase is to determine how website users can access the information. Interface design determines how the structure of a website is logically depicted including navigation techniques that guide the user's movement within the website. Interface designers will usually use diagrams or flowcharts to illustrate their designs. A diagram will usually show how each web page works. One of the diagrams used in the interface design process is a wireframe (as shown in Figure 3.3.19). A wireframe or also known as a page scheme or page plan is a visual guide that represents the overall framework of a website. The purpose of the wireframe is to organize the elements that will be included in the website to fit the concept of the website. CHAPTER 3 Web-Based Programming 287 Figure 3.3.19 Example of a wireframe Wireframe Examples goo.gl/ z4EUaA Machine Translated by Google
The use of graphics as links is usually intended to make the website look more attractive while the use of text links can speed up the download process. This technique can also be implemented by listing text elements, icons or graphics horizontally or vertically. Toolbar There are various navigation techniques that web designers can choose from. Such as: Figure 3.3.22 shows the breadcrumbs technique, which is a graphic control technique used as a navigation aid in the user interface. This technique allows users to track their current location or position within a program, document or web page. Figure 3.3.21 shows the navigation bar technique used by grouping a group of text links on a web page. Links can use various multimedia elements such as icons, graphics or text. • Breadcrumbs • Navigation bar The main function of the concept of navigation in a website is to help users or visitors know their current position. In addition, the navigation concept also serves to guide visitors about the options available for them to explore the web. Typically, each website will use more than one type of navigation technique. Figure 3.3.20 shows the toolbar navigation technique. Most websites use toolbars vertically or horizontally to organize the options offered to users. Navigation Techniques Figure 3.3.20 Examples of toolbar navigation techniques used by Google.com Figure 3.3.22 Examples of breadcrumb navigation techniques Figure 3.3.21 An example of a navigation bar using horizontal icon links 288 Computer Science Form 5 Machine Translated by Google
CHAPTER 3 Web-Based Programming 289 Figure 3.3.23 An example of a site map navigation technique Figure 3.3.24 An example of navigation using graphics for children from Figure 3.3.25 An example of a navigation technique through a drop-down menu smashingmagazine.com Website Structuring and Navigation Techniques • Drop-down menu Figure 3.3.23 is an example of a sitemap navigation technique. This technique lists several related website links for users to browse. Navigation techniques using graphics as shown in Figure 3.3.24 are usually widely used for target users such as children to make it easier for them to browse websites. Figure 3.3.25 shows • Site map (sitemap) •Links using graphics navigation technique through the drop-down menu. This technique is a graphical control element that lists a group of links in the same group. This technique makes it easier for users to make choices by displaying a group of link options in a more organized manner. Group work ACTIVITY 2 Form a small group. For each group, you are required to browse THREE (3) types of websites difference. Compare the three websites based on the following factors: Objective: Make a survey of website structuring and navigation techniques that have been implemented (b) Navigation techniques used Based on the survey, what conclusions can you draw? (a) Type of page structuring used Machine Translated by Google
Using social media to technology/6125914/ marketing business goods is an attraction at this time for traders who want to market their goods or services. Figure 3.3.26 Google Display at the beginning of its appearance in 1996 telegraph.co.uk/ 290 Computer Science Form 5 Compare it with the latest website display which is increasingly modern and sophisticated. html to see the development of some well-known website displays at the beginning of its appearance. Visit the website http:// www. How-20-popular websites-looked when-they-launched. 3.3.3 Building Simple Websites Daily Using HTML Science Innovation Application Computer The definition of interactive is actually very broad. A website that contains a chess game is classified as interactive because it is able to respond to the movements of users playing chess virtually. telegraph.co.uk/technology/6125914/How-20-popular-websites-looked when-they-launched.html has provided a view of 20 websites at the beginning of their launch. Figure 3.3.26 shows the display of the Google website at the beginning of its appearance. In the past, it was impossible for us to use websites for the purpose of buying products, making hotel reservations or plane tickets. The reason behind this deficiency is the lack of space for the user to send information to the server for processing at that time. In line with the changing times, new technology was introduced to provide space for users to send information to the server to be processed through the interactive concept of the website. With the concept in place, the process of making hotel reservations and purchasing goods online is no longer impossible. When the concept of a website was first introduced in the 1990s, a website was simply a collection of documents linked together using a text link function that was displayed virtually. The display on the website is also more static. Website http://www. Machine Translated by Google
My Malaysia! Elements and Attributes in HTML What is HTML? In order to allow the Internet to be reached by Internet users, the interface Today, the use of interactive websites through the Internet network has grown to cover various layers of society To write HTML documents, a program known as HTML editor is used. One of the HTML editors used to write HTML elements or tags is the text editor. A commonly used HTML text editor is Notepad. which is easily needed. This interface is part of the World Wide Web (WWW). Each document in the www is known as a web page. Do you know how websites are built? connecting various types of devices such as computers, mobile phones, Media Player (MP3) and television stations for the purpose of communication and information sharing. Every web page is a text file written using Hypertext Markup Language or HTML. Markup Language is a language that describes the content and structure of a document. You can think of HTML as the framework that guides the structure of every web page. Figure 3.3.27 shows the structure of HTML. HTML documents are about the concept of how documents are displayed. To describe the structure of each web page, HTML code or HTML elements are used. Elements usually consist of two paired tags, namely, the start tag and the close tag. The content Teachers in KL receive gadgets to support the teaching and learning process in line with the development of ICT and the explosion of information without borders. The provision of these gadgets is in line with the transformation in the Malaysian Education Development Plan 2013 - 2025, which is to take advantage of ICT. A group of teachers in the Federal Territory of Kuala Lumpur received a tablet equipped with e-tutor and e-paper applications Figure 3.3.27 Structure of HTML goo.gl/ wfoKDa CHAPTER 3 Web-Based Programming 291 Machine Translated by Google
Web content Start tags Close tags •<br> •<img> <body> <html> Welcome </head> empty element. Examples of empty elements are as follows: </html> The heading element is the element used to define the "heading" in the web page. There are six heading levels defined in HTML, starting from "<h1>" used for large or important headings to "<h6>" for small or less important headings. Figure 3.3.30 shows this heading element and Figure 3.3.31 shows an example of its output. <title>Website Title</title> There are also HTML elements that only have a start tag. This element is known as will be displayed on the web will be between the start tag and the close tag as shown in Figure 3.3.28 and Figure 3.3.29 shows an example of the output. </body> <head> Figure 3.3.28 Example of paired HTML tags Figure 3.3.29 Example output of paired HTML tags 292 Computer Science Form 5 Examples of Using Heading Elements in HTML Machine Translated by Google