Did you know? You The termination condition for the iteration can also depend on the user input value and the current count value. Table 3.1.28 Examples of JavaScript programs and output (while) CHAPTER 3 Web-Based Programming 193 <script> </body> </html> { <body> <html> </script> } Description: Description: 4 Check the condition whether repeat <= 3. If the condition is met, "Congratulations!" will be printed again and steps 3 to 4 will be repeated (conditions met) (condition not met – repeat initial value = 4) repeat++; 4 while(repeat<=3) 2 1 Set repeat condition = 1 as initial value. 1 Set the repeat condition=1 as the initial value. Example 32 shows the condition will be checked first before "Good Luck!" displayed. If the conditions are met, "Good Luck!" will be displayed and the conditions will be revised. The JavaScript program and output are shown in Table 3.1.28. document.write("Good Luck!<br>"); 3 3 If the conditions are met, print "Salam Sejahtera!". If the condition is not met, i.e. set the repeat value = 4 as the initial value, "Congratulations!" will not be displayed. 3 Update conditions (repeat++). 2 Repeat conditions<=3 are checked first. Program 2 Messages “Good Luck!” will be printed. Example Output until the conditions are no longer met. var repeat=1; 1 4 Update condition value (repeat++). Review the terms before "Good Luck!" reprinted. EXAMPLE 32 Machine Translated by Google
You Among the advantages of the Standard Library: Introduction to the Standard Library Did you know? 194 Computer Science Form 5 The continue statement will execute break and continue the addition statement before the condition is checked. can also be found in this repetition. Individual Work Example Output: The standard library is also part of the instructions in the program, including definitions • date.js for date functions such as date.now() and date.format() •math.js for mathematical functions such as math.sqrt() and math.pow() Standard library in programming is a collection of methods or functions provided and used during implementation in program code. Standard libraries need to be defined in the programming language specification. pow() from the math.js standard library without having to know how the power calculation operation (power) is implemented. Among the standard libraries found in JavaScript: 1 Used without knowing how to implement it. The example on Table 3.1.29 calls math. for commonly used algorithms, data structures, and mechanisms for input and output. 6 is an even number Objective: Use control structures (sequences, options, repeats) in programs. 1 is an odd number 10 is an even number Write and generate an HTML document that has JavaScript for an iteration that can accept and create iterations from 1 to 10. Each iteration will check whether the referenced number is even or odd and display a message as shown in the example output below. 5 is an odd number Control Structures in Client Scripting Languages 9 is an odd number 8 is an even number 4 is an even number 3 is an odd number 7 is an odd number 2 is an even number 3.1.5 Advantages of Standard Library ACTIVITY 9 Machine Translated by Google
<script src="math.js"> </body> <head> </script> Bower vs NPM </head> org/ 2013/11/ Bower-vs npm/ </html> </script> Source: ng-learn. document.write("The square root of 4 is ", math.sqrt(4)); CHAPTER 3 Web-Based Programming 195 <body> <script> Table 3.1.29 Example JavaScript programs (math.sqrt( ) and math.pow( )) <html> math.pow(3, 2)); document.write("<br>3 to the power of 2 is ", 3.1.6 Use of Standard Library way. 3 Can reduce program development time because there is no need to write statements repeatedly. is in the ".js" package and needs to be saved first. Next math.js will be loaded and can then be used in the program its function. math.js is a standard library that is often used in JavaScript that consists of built-in functions and constants with various data types such as numbers. Standard library in JavaScript math.js is available from various package managers such as npm and bower but can also be downloaded from the website: http:// mathjs.org/download.html. Figure 3.1.48 shows a screenshot of the website http://mathjs.org/download.html which contains the math.js file to be downloaded and saved. 2 Can be used repeatedly when needed in the program by simply calling Program Example Output in the Client Scripting Language math.js Machine Translated by Google
(browser) for the client program. The library needs to be loaded and set up before it can be used. math.js can be included as an attribute on the <script> tag in a JavaScript program. 2 Use the functions defined in math.js. Table 3.1.30 shows the functions in math.js. The ways are: math.js can also be used in node.js in the server and in the browser 1 Download the math.js file. Figure 3.1.48 shows math.js is a JavaScript file that can be downloaded from a website. *x) Subtract two numbers Sort the elements in a matrix Multiplying three equal numbers (x * Function Add two numbers Divide the number by two Calculate the square root of a number Description x Calculate powers of numbers Table 3.1.30 Functions in math.js math.cube(x) math.add(x,y) math.sqrt(x) 196 Computer Science Form 5 math.pow(x,y) math.subtract(x,y) Figure 3.1.48 math.js math.sort(x) math.divide(x,y) src attribute on <script> (Program) Machine Translated by Google
Example Output 2 Now, the functions in math.js can be used. Example: math.sqrt(4). math.sqrt(4) 3 math.pow(3,2) will perform the operation 3 power 2 and display the result. Program Example 33 shows the use of math.sqrt() and math.pow() from the downloaded math.js file. The JavaScript program and output are shown in Table 3.1.31. 1 On the <head> set the source of the referenced standard library, which is math.js. will calculate the square root of 4 and display the result. Description: EXAMPLE 33 <head> </head> </script> </html> Table 3.1.31 Sample JavaScript program (math.js from download source) document.write("The square root of <body> <script> CHAPTER 3 Web-Based Programming 197 document.write("<br>3 to the power of 2 is ", <html> math.pow(3, 2)); 3 4 is ", math.sqrt(4)); 2 <script src="math.js"> 1 </body> </script> Browser 1 Get the link source for math.js content. Example 34 shows http:// cdnjs.cloudflare.com/ajax/libs/mathjs/3.7.0/math. min.js is the link. math.js can also be loaded as a regular JavaScript file in a browser. The ways are: 2 Use functions defined in math.js. Please refer to math js.org/ docs/reference/functions.html for other functions in math.js. A browser is a program that has a graphical interface that displays HTML files and is used for WWW (World Wide Web) navigation. Machine Translated by Google
3 math.pow(3,2) will perform the operation of 3 squares and display the result. cdnjs.cloudfare.com/ajax/libs/mathjs/3.7.0/math.min.js. The JavaScript program and output are shown in Table 3.1.32. Produces today's date Converts object form to Date object form math.sqrt(4) calculates the square root of 4 and document.write() displays the result. 2 Now, the functions from the link above can be used. Example: math.sqrt(4). Functional tasks Example 34 shows the use of math.sqrt() and math.pow() from the link source http:// Description Example Output 1 On the <head> set the referenced source, which is http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.7.0/math.min.js. ajax/libs/mathjs/3.7.0/math.min.js"> 1 Function Program Adds days to today Description: EXAMPLE 34 <html> </script> <script src="http://cdnjs.cloudflare.com/ math.pow(3, 2)); 3 </html> </head> Table 3.1.32 Example JavaScript program and output (math.js from source link) Date.parse('today') </script> </body> date.today() <script> document.write("The square root of 4 Table 3.1.33 Functions in date.js Date.today().add().days() <body> <head> document.write("<br>3 to the power of 2 is ", 198 Computer Science Form 5 is ", math.sqrt(4)); 2 date.js 1 Download the date.js file where date.js is a JavaScript file that contains content functions for mathematical operations. Please refer to http://www.datejs.com/2007/11/27/getting-started-with-datejs/ for other functions in date.js. Among other library standards is date.js. 2 Use the functions defined in date.js. Table 3.1.33 shows its functions. Machine Translated by Google
Use the standard library math.js to help calculate the side of the hypotenuse on the side. Example Output 3 Date.today() will identify the latest date and time details and display the result c² = a² + b² Objective: Use of Standard Library in Client Scripting Language Example 35 shows the use of Date.today() from the downloaded date.js file. The JavaScript program and output are shown in Table 3.1.34. 2 Now, the functions in date.js can be used. Example: Date.today(). 1 On the <head> set the source of the standard library referenced, which is "date.js". Given, the Pythagorean theorem formula, to find the side of the hypotenuse is as follows: document.write(Today); 3 Write and generate an HTML document that has JavaScript that can calculate and display the value of the hypotenuse side of the triangle information as shown in the figure shown below. Program (according to the established format). Description: EXAMPLE 35 <head> </head> b = 160 cm </script> c Table 3.1.34 Example JavaScript program and output (date.js from download source) <script> <body> a = 120 cm <html> </script> var today= Date.today(); 2 CHAPTER 3 Web-Based Programming 199 <script src="date.js"> 1 </html> Using the Standard Library </body> Individual Work ACTIVITY 10 Machine Translated by Google
(Procedural Subprogram) <script> Figure 3.1.44(a) Module Module 1 </script> Figure 3.1.44(b) Main module broken down Table 3.1.35 Comparison of procedures and functions Main module Module 3 200 Computer Science Form 5 Module 2 function) One module One module <script> (Subprogram (Procedural Subprogram) </script> (Subprogram) The difference between Procedure (procedure) and Function (function) in Client Scripting Language Program 3.1.7 Use of Procedures and Functions to Summarize Programs in Client Scripting Language Functions The command lines can be broken down according to their respective tasks and assembled in separate modules called subroutines as shown in Figure 3.1.44(b). The main() subroutine will call the module to execute. Procedure In the context of a program, a procedure does not return a value while a function will return a value. The comparison is formulated as in Table 3.1.35. A JavaScript program has many lines of instructions grouped together in a block of code known as a module as shown in Figure 3.1.44(a). There are two types of software, namely: One module Function Example definition of function toCelcius (fahrenheit) Returns a value Comparative aspect Example call Returns a value Procedure Does not return a value var centigrade; { celsius = (5/9)* fahrenheit - 32); (“Temperature is “+ celsius +” var centigrade; celsius = (5/9)* fahrenheit - 32; } document.write toCelcius (fahrenheit); { } return celsius; celcius = toCelcius (fahrenheit); function toCelcius (fahrenheit) degree Celsius); Machine Translated by Google
Subroutines will use other subroutines in order for the code of statements in other subroutines to be executed. Generally, the relationship between two subroutines is the caller and the called. The subroutine (caller) calls the name of the subroutine (called) in the body of the subroutine (caller) as shown in Figure 3.1.45. EXAMPLE 36 How to Call/Use Procedures and Functions to Summarize Client Scripting Language Programs (Called) Subprogram call Subprogram Table 3.1.36 Examples of JavaScript programs and outputs (subroutine callers) Figure 3.1.45 Caller and called subroutines (Caller) CHAPTER 3 Web-Based Programming 201 billNo = number.length; var ListSecond = [333,222,111]; Program document.write(jum2 + “<br>”); return amount; 5 <script> Example 36 shows how to call the subroutine SumNo( ) repeatedly with different values assigned to the subroutine. The SumNo( ) subroutine counts and sums the numbers in the same subroutine list and can also be used to sum numbers for different data types. The program and output are shown in Table 3.1.36. jum3 = TotalNo(ThirdList); { TotalNo( ) jum1 = TotalNo(First List); 20.9 Print the amount </body> 2 3 95 List of numbers 4 } document.write(jum3 + “<br>”); var ListThird = [5.1,5.2,5.6,5.0]; Sample output for (i=0; i<billNo; i++) document.write(jum1 + “<br>”); var ListFirst = [2,4,12,77]; var i, billNo, total= 0; } function TotalNo (number) <body> jum2 = TotalNo(SecondList); sum = sum + number[i]; 6 1 666 The function is called Function </html> { <html> var jum1, jum2, jum3; Calling the Function TotalNo( ) </script> Machine Translated by Google
in list. Sends the fahrenheit value Program 6 Total results are received from subroutine calling and stored into different variables, namely jum1, jum2 and jum3. Next each amount is printed using the document.write() statement. 1 Second List, and Third List. 2 The program wants to sum each list of numbers. 1 There are three lists of numbers of different sizes and data types, namely the First List, Calling 4 The SumNo() function is built to receive a list of numbers and sum the numbers 2 3 The program calls the TotalNo() function by passing a list of different numbers. 5 The total result is returned to the calling subroutine. Example 37 shows the subroutine how toCelcius() is called and returns the Fahrenheit value. The toCelcius() subroutine receives the Fahrenheit value and performs the conversion of the Fahrenheit value to Celsius using the formula (5/9)*(fahrenheit-32). The JavaScript program and output are shown in Table 3.1.37. function Actual parameters Every procedure (procedure) and function (function) has parentheses. In parentheses are parameter names separated by the symbol “,” (comma). Parameters or arguments allow procedures and functions to send values (callers) and be received by the called procedures and functions. Formal parameter expression (parameter formal) Table 3.1.37 shows an example JavaScript program and the output for passing parameter values to the called subroutine. function name_function (parameter1, parameter2, ...) is used to reference the parameters of the called subroutine. The expression actual parameter (actual parameter) is used to refer to a variable inside the subroutine of the caller. Description: Parameters EXAMPLE 37 + toCelsius (fahrenheit) + <script> 202 Computer Science Form 5 <body> document.write("Temperature is " Celsius."); <html> " degree var fahrenheit = 77; Table 3.1.37 Examples of JavaScript programs and outputs (parameters) Machine Translated by Google
Description: The function will return control to the caller. Some functions not only returns control but also returns value. In the program example in Table 3.1.38, the program will return a value to the caller's function. Table 3.1.38 shows an example JavaScript program and the output in returning a value from the called subroutine to the caller. Accepts the fahrenheit value Program </body> </script> Example 38 shows the result of the count value (5/9)*(fahrenheit-32) will be returned to toCelcius() which is the function that calls and then displays the value. JavaScript programs Official parameters function toCelsius (fahrenheit) { Sample output </html> The function is called 1 Receives the fahrenheit temperature value, ie, 77. 3 2 Prints the temperature in centigrade by calling the function toCelcius(fahrenheit) then passing the value fahrenheit=77 to the called function. and the output is shown in Table 3.1.38. return (5/9) * (fahrenheit - 32); } 3 The called function will receive the fahrenheit value and perform the arithmetic operation (5/9)*(fahrenheit-32) to convert it to celsius. Returns a value EXAMPLE 38 CHAPTER 3 Web-Based Programming 203 Machine Translated by Google
} <html> { (5/9)*(fahrenheit-32) to convert it to a celsius value. 4 The called function 2 Prints the temperature in celsius values by calling the function toCelsius(fahrenheit) then passing the value fahrenheit=77 to the called function. Objective: Summarize the program by using procedures and functions var fahrenheit=77; return value from result of operation (5/9) * (fahrenheit-32) </html> Calling a function " degree Use of Procedures and Functions in Client Scripting Language 4 The arithmetic result will be returned to the calling function to be printed. 1 <body> </script> 3 The called function will receive a fahrenheit value and perform an arithmetic operation function toCelsius(fahrenheit) Program return (5/9) * (fahrenheit-32); Write and generate an HTML document that has JavaScript that can calculate and display the product "5 * 5". Use the function (function) KiraDarab() to calculate the product of the "5 * 5". 3 document.write("Temperature is " 1 Receives the fahrenheit temperature value, which is 77. Sample output <script> Celsius."); + toCelsius(fahrenheit) + </body> 2 Individual Work Table 3.1.38 Example JavaScript program and output (return value) 204 Computer Science Form 5 Description: ACTIVITY 11 Machine Translated by Google
3.1.8 Use of Arrays in Client Scripting Language 8; • Array declaration (array) in client scripting language (b) Give a prefix value after the declaration: Input is the value received from the user of the program. If the user of the program enters a value using a prompt box, the following is how to input an array value: 4; (a) Provide a prefix value during declaration: = no[2]=input; = The initial value or known as the first value can be placed in the array before the value of the value is changed in the next program instruction. 5; no[1]=input; = var no = [ ]; array and so on until index n, the value of n in the array. no[0]=input; var input; •Values are assigned to the no variable by referencing an index that starts with 0. •An index is a number that represents each location in the array. Syntax: var no = •Input array values (array) in the client scripting language program var no = [5,-1,4,12,8]; The use of arrays in the client scripting language is the same as the use of Java arrays that have been learned during Form 4. The use of arrays is to store a list of values in a variable. 12; input = prompt("Please enter a number:"); -1; Example: = input = prompt("Please enter a number:"); = •Provides array prefix values (array) in the client's scripting language [ ]; •Index 0 refers to the first value in the array, index 1 refers to the second value in no[0] no[1] no[2] no[3] no[4] var array_name = [element1, element2, ...]; Example declaration: var no = [ ]; input = prompt("Please enter a number:";) CHAPTER 3 Web-Based Programming 205 Machine Translated by Google
EXAMPLE 39 for (i=0; i<5; i++) { 206 Computer Science Form 5 <body> <script> var no = [5, -1, 4, 12, 8]; var amount = 0; <body> <script> var no = [5, -1, 4, 12, 8]; var amount = 0; var i; Table 3.1.39(a) JavaScript program and output (Count Sum) Table 3.1.39(b) Example JavaScript program and output (Calculate Sum) using for } document.write(total); </script> </ body> </html> <html> document.write(sum); </script> </ body> </html> <html> sum = sum + no[i]; total = no[0] + no[1] + no[2] + no[3] + no[4]; • Array value processing (array) in client scripting language programs Processing means performing operations such as arithmetic operations and logical operations. Arithmetic operations that can be performed are like getting the sum of values, while logical operations are like finding a value in an array. Program Example 39 shows the numbers in the array being summed in two different ways. Example Output Program 28 28 (b) Using repetition to get the numbers in the list and sum them •Getting the sum of values in an array (a) Getting the numbers in the list one by one and summing them Example Output Table 3.1.39(a) refers to each number with the respective index location and its value is summed up while Table 3.1.39(b) refers to each number with the index changed by the counter in the for loop and its value is summed up. Machine Translated by Google
Example 41 shows the numbers in the array sorted in ascending order using the bubble sort method. The JavaScript program and output are shown in Table 3.1.41. 12 found •The program will search for a value from a list of numbers in an array. Example Output List of numbers (in ascending order): Example 40 shows the process of finding a number in an array. The for loop is used to reference one by one the numbers in the array by using the index and then check if the number is 12 by using the for statement. The JavaScript program and output are shown in Table 3.1.40. Program –1 4 5 8 12 Example Output •The program will sort a list of numbers into an array. Program 5 –1 4 12 8 <html> for(i=0; i<5; i++) { Table 3.1.41 Example JavaScript program and output (bubble sort) <body> <script> var no = [5, -1, 4, 12, 8]; var i; CHAPTER 3 Web-Based Programming 207 document.write (no[i] + Table 3.1.40 Example JavaScript program and output (Search Value) if (no[i] == 12) + no[i]); } </script> </ body> </ html> <html> “found”); for(i=0; i<5-1; i++) { for(j=0; j<5- i-1; j++) { <body> <script> var no = [5, -1, 4, 12, 8]; var i, j, temporary; for(i=0; i<5; i++) { document.write (“ “ } EXAMPLE 40 EXAMPLE 41 Machine Translated by Google
+ no[0] + if (no[j] > no[j+1]) (sorted in ascending order):<br><br>”); </body> } document.write (" " + no[2]); document.write (" " } } " no[j] = no[j+1]; document.write (“ “ 208 Computer Science Form 5 "" for(i=0; i<5; i++) { document.write (" " document.write (“<br><br>List of numbers </html> + no[i]); for(i=0; i<5; i++) </script> } + no); " + no[i]); no[j+1] = temporary; { while = no[j]; + no[1] + EXAMPLE 42 Program Example Output Example 42 shows a program that can receive a list of temperature values (in Celsius) for several countries in the world and sort and display the list of countries according to the order of temperature values from the lowest to the highest (ascending order). Given the temperature values are as in Table 3.1.42. •Display array values (array) in the client scripting language program (a) Display can also be implemented by calling array variable names only Example: (b) The display can be implemented by calling one by one the values in the array when referencing the index (one by one index). • Build a complete array program in the client's scripting language Displaying means the activity of submitting or showing the result of values in an array to the user of the program. (without referencing the index). Machine Translated by Google
temporary2 = country[j]; Table 3.1.42 List of temperature values (in Celsius) } for(i=0; i<5-1; i++) { } Figure 3.1.46 JavaScript program (array sort) </script> </ body> </ html> + temperature[i]); if (temperature[h] > temperature[h+1]) { <body> <p>List of countries and temperatures (not sorted): </p> <script> var country = [“Algeria”,”Ghana”,”Nigeria”,”South Africa”,”Tunisia”]; var temperature = [51.3, 43.3, 46.4, 50.0, 55.0]; var i, j, temporary, temporary2; for(i=0; i<5; i++) { } <html> for(j=0; j<5-i-1; j++) { } CHAPTER 3 Web-Based Programming 209 while = temperature[h]; temperature[j] = temperature[j+1]; temperature[j+1] = temporary; for(i=0; i<5; i++) { document.write (“<br><br>List of countries with temperature (sorted):<br><br>”); country[j] = country[j+1]; country[j+1] = temporary2; " " } document.write (“ “+ country[i]+” “+ temperature[i]); document.write(“<br>”); document.write (“ “+ country[i] + document.write (“<br>”); South Africa The JavaScript program and output are shown in Figure 3.1.46 and Figure 3.1.47. 51.3ÿC (124.3 ÿF) 43.3ÿC (109.9 ÿF) 46.4ÿC (115.5 ÿF) 50.0ÿC (122.0 ÿF) 55.0ÿC (131.0 ÿF) 5 Country Algeria Temperature 2 Nigeria 3 4 Ghana 1 6 Tunisia 5 Machine Translated by Google
Description: Individual Work Figure 3.1.47 Output (array sort) 210 Computer Science Form 5 according to the temperature. 2 Another array, which is the temperature for each country listed in (1). 1 There is an array, which is a list of countries. 6 Display the sorted countries and temperatures. 5 Every time the temperature is arranged or repositioned, the country name will also be repositioned Objective: Use arrays to store and process values. 2 Build an HTML and JavaScript program that can: Arrays in Client Scripting Language programs 4 Perform foam sorting. Steps: 1 Open the Notepad software. (a) store a list of heights for seven students in an array. (b) sort and display the height of the students. 3 Display country and temperature. Do this activity in the computer lab. ACTIVITY 12 Machine Translated by Google
3.1.9 Interactive Programs Containing Data Declarations, Control Structures, Procedures and Functions and Arrays The HTML <button> tag can be used for interactive web pages, i.e. the button will be generated in an HTML document (web page). In this section, we will learn how to develop a website that can interact with users or also known as an interactive website. Students can build a simple website using HTML/CSS and add JavaScript to interact. HTML tag <button> Today, JavaScript is used in a variety of environments such as interacting with servers, adding animations to web pages, manipulating images and storing and processing user data. For starters, we can use buttons or HTML <button> tags for users to interact with the website. 5 Open the Activity12.html file through a web browser such as Internet Explorer or Google Chrome. Example output is as follows: 4 Save as Activity12.html. CHAPTER 3 Web-Based Programming 211 Machine Translated by Google
Program Program displayed. 2 When the user clicks the "click here" button, an alert pop-up box with the message "Hi!" Example 43 in Table 3.1.43 and Table 3.1.44 shows an example JavaScript program and output that uses the HTML <button> tag to create a button to be clicked and uses “onclick=” to execute the command after the button is clicked. Use the "onclick" button 1 A button with an HTML <button> tag is generated. Example 44 uses a text field from a <form> provided by HTML. Next, the value in the text field will be sent to the "action_page.php" page after the "Submit" button is clicked. Table 3.1.45 shows an example of an HTML program and output that uses the HTML <form> tag. Example Output Example Output Description: Description: EXAMPLE 43 EXAMPLE 44 <body> Click Here </button> 212 Computer Science Form 5 "window.alert('Hi!')"> </html> <body> Table 3.1.43 Example JavaScript program and <button> output </body> </button> <html> "window.alert('Hi!')"> <html> <button onclick = </html> </body> <button onclick = Click Here Table 3.1.44 Sample JavaScript program and <onclick=> output Machine Translated by Google
3 Example Output 1 Program 3 The text from the "Name:" field of text type is sent to the "action_page.php" page. 2 The form has a submit type "Send" button. 1 The HTML <form> tag is used to create a form. 2 For example, when the command/code is needed again, the block/ section will be called again to execute the command/code. If the "Submit" button is clicked, the data on the form will be sent to a page called "action_page.php". The server will process the input entered on the form and return the answer as requested or directed next. Students will learn it in the next topic, which is in the Server Scripting Language topic. For this topic, we will use the button HTML tag "<button>" to build an interactive website. For example, after a button is clicked, a procedure/function will be called to execute a task/command. As has been learned before, that is in topic 3.1.7, procedure/ function is a method in program development that involves the basic development of blocks in the program. A block is an area/section of an instruction, that is, program codes are placed to perform a specific task. The purpose is to reduce repetition when writing the same instructions/code. •Using the HTML tag "<button>" and calling a procedure/function to execute commands in an interactive program. The <button> element Table 3.1.45 Example of HTML program and <form> output <input type="text" CHAPTER 3 Web-Based Programming 213 <input type=”submit” value=”Submit”> <html> name=”username” value=””> will produce a form that can collect input/data from users and there are several input elements such as text fields, checkboxes, radio buttons and submit buttons. </form> <form action=”\action_page.php”> </body> <body> can also be used in HTML form (HTML form). The HTML <form> element Name: • HTML <form> tag </html> Description: Did you know? You Machine Translated by Google
2 3 } document.write(no); 4 <button onclick=”after Sorting()”> After Sorting </button> 1 <button onclick=”beforeSorting()”> Before Sorting </button> 1 Example 45 shows the display of a list of unsorted and sorted numbers that can be placed on different blocks by using procedure/function, namely procedure/function BeforeSort() and AfterSort(). Two <button> are used for users to interact with the website to select numbers before sorting or after sorting. The JavaScript program and output for Bubble Sort using buttons interactively and the procedure/function for the scripting command block are shown in Figure 3.1.48 and Figure 3.1.49. Calling the function afterSort( ) Calling the function beforeSort( ) EXAMPLE 45 <body> <script> function afterSort() { 214 Computer Science Form 5 for (j=0; j<length-i-1; j++) { Access the QR code above to see the animation web-based programming. <script> function beforeSort() { var no = [5, 1, 4, 3, 2]; var length = no.length, i, j; temporary var; for (i=0; i<length; i+ +) { } </script> <html> <p>List of numbers after sorting (Bubble Sort): </p> } if (no[j] > no[j+1]) { while = no[j]; no[j] = no[j+1]; no[j+1] = temporary; } var no = [5, 1, 4, 3, 2]; document.write(no); Figure 3.1.48 JavaScript program (interactive button <button>) <p>List of numbers before sorting: </p> } </script> </ body> </ html> Machine Translated by Google
1 There are 2 buttons, namely "Before Sorting" and "After Sorting". (After clicking “After Sorting”) new page due to use of document.write(no). 2 After the "Before Sort" button is clicked, the program calls the Before Sort() function. To sort the list of numbers, the command/code for the sorting process can be placed in another code block. The JavaScript program and output are shown in Figure 3.1.50 and Figure 3.1.51. Example 46 shows a program for bubble sort using buttons interactively and several functions to collect all scripting commands: (After clicking "Before Sorting") 4 The list of unsorted numbers and the result of the sorted list of numbers are displayed on the document or 3 After the "AfterSort" button is clicked, the program calls the AfterSort() function. <html> <script> function beforeSort() { Figure 3.1.49 Output (interactive button <button>) <body> <p>List of numbers before sorting: </p> <button onclick=”beforeSorting()”> Before Sorting </button> CHAPTER 3 Web-Based Programming 215 Example output: Description: A program can have more than one procedure/function. Every procedure/function 1 2 3 4 5 5 1 4 3 2 has its own command and can call other procedures/functions. EXAMPLE 46 Calling the function beforeSort( ) Machine Translated by Google
1 2 3 Calling the function changePosition( ) Calling the foam sort function ( ) var no = [5, 1, 4, 3, 2]; var length = no.length, i, j; var no = [5, 1, 4, 3, 2]; document.write(no); while = no[i]; no[i] = no[j]; no[j] = temporary; } } </script> 216 Computer Science Form 5 } } </script> <p>List of numbers after sorting (Bubble Sort): </p> <button onclick=”afterSorting()”> After Sorting </button> <script> function foam sort(no, length, temporary) { Figure 3.1.50 A JavaScript program (subroutine) calls another subroutine } document.write(no); 3 } </script> for (i=0; i<length; i++) { <script> function afterSort() { for (j=0; j<length-i-1; j++) { var i, j; } </script> </ body> </ html> temporary var; sortBuih(no, long, temporary); changePosition(no, temporary, j, j+1); <script> function changePosition(no, temporary, i, j) { if (no[j] > no[j+1]) { Calling the function afterSort( ) Machine Translated by Google
3 A list of unsorted numbers and a list of sorted numbers are displayed. Example 47 shows the interactive use of hyperlinks (through text). The JavaScript program and output are shown in Figure 3.1.52. 2 (After clicking "Before Sorting") 1 function after Sorting( ) calls another method subroutine which is ishanBuih( ). 2 function isihanBuih( ) calls the Substring method changePosition( ) to execute the command to change the position of the number. (After clicking “After Sorting”) 1 <html> <body> Figure 3.1.51 Output (subroutine) calls another subroutine </body> </html> CHAPTER 3 Web-Based Programming 217 <a href = “https://www.mohe.gov.my/en/”> KPT Malaysia Website </a> Description: 5 1 4 3 2 Hyperlinks or HTML tags <a>…</a> are used so that users can interact with the website. A way to execute scripting program instructions to go to a website or web page via text or image by clicking on the text or image to go to a specified website or web page is as follows. • HTML tags <a>…</a> or hyperlinks 1 2 3 4 5 EXAMPLE 47 text Machine Translated by Google
<html> "width=400,height=300,resizable=yes"); <a href = “javascript:Website()”> KPT Malaysia Website </a> 218 Computer Science Form 5 window.open(“https://www.mohe.gov.my/en/”,”jav”, Figure 3.1.52 JavaScript program and output (interactive text hyperlink) <body> </body> </html> function website() { } </script> <script> EXAMPLE 48 Example output: Description: 2 After the user clicks on the text "KPT Malaysia Website", the website will open. 2 1 The URL https://www.mohe.gov.my/en/ in the <a> tag is the designated website. 1 Example 48 shows the interactive use of hyperlinks (through text) and procedure/function for scripting command blocks, i.e. after the user clicks on the link (link) the website's subroutine() is executed i.e. a new HTML document (new window) is opened and displayed. The JavaScript program and output are shown in Figure 3.1.53. text Machine Translated by Google
You Did you know? will open in a new HTML document. 1 The URL https://www.mohe.gov.my/en/ in the <a> tag is a website that Example 49 shows the interactive use of hyperlinks (via images) and procedure/functions for scripting command blocks, i.e. after the user clicks on the logo (i.e. image), a new HTML document is opened and displayed. The JavaScript program and output are shown in Figure 3.1.54. 2 After the user clicks on the text “KPPT Malaysia Website”, the website 2 set. 1 Description: Example output: jav sets the type for the URL resource content that is opened. </html> window.open(“https://www.mohe.gov.my/en/”,”jav”, function website() { <html> Source: https:// developer. Window function. "width=400,height=300,resizable=yes"); docs/ Web/ API/ Window/ If the resource is not found in the already open window, a new window will open and the URL resource will be loaded. <body> } </script> mozilla.org/ en-US/ open() will open a browser window and load the URL resource in the form of a window or tab. </body> CHAPTER 3 Web-Based Programming 219 <script> Figure 3.1.53 JavaScript program and output (interactive by hyperlink – call subroutine) open <a href = “javascript:website()”> <img src=”logo_kpt_2012.png” border=”0”> </a> EXAMPLE 49 image Machine Translated by Google
Figure 3.1.54 JavaScript program and output (interactive hyperlink – image) 220 Computer Science Form 5 ACTIVITY 13 Description: Example output: Objective: Using text and image links as an interactive program. 1 The URL https://www.mohe.gov.my/en/ in the website() function is the designated website. Do this activity in the computer lab. Program Interactively in a Client Scripting Language 1 Select 4 State Governments and get links to the 4 web portals. List of State Governments (b) Johor State Government (a) Selangor State Government Steps: 2 After the user clicks on the image, which is from the image source src=”logo_kpt_2012.png”, the website() function is called and the website will open in a new HTML document. is as follows: Individual Work Machine Translated by Google
CHAPTER 3 Web-Based Programming 221 6 Open the Activity13.html file through a web browser such as Internet Explorer or Google Chrome. Example output is as follows: 3 Open the Notepad software. Example: Sarawak State Government 5 Save as Activity13.html 2 Select the appropriate state logo for the 4 portals. through the link obtained in Step 1. (c) Melaka State Government (d) Perak State Government (e) Pahang State Government (f) Perlis State Government (g) Sarawak State Government (h) Terengganu State Government (i) Kedah State Government 4 Build an HTML and JavaScript program that can: (a) Display the 4 selected state logos. (b) Open a portal (website) when the user clicks on each “State Government” logo or text Machine Translated by Google
E = MC2 { else if (menu==2) document.write (“<br>Organization Name: ” + Organization name + “<br>Cost function CalculateAverage(Price list) } function MAJLISMAKAN (organization name, menu, guest bill) for(i=0; i<number; i++) totalCost=cost*Guest bill; for" var i, number=pricelist.length, sum=0, average=0; + guest bill + “ number of guests (RM): ” total=total+Pricelist[i]; } if (menu==1) + totalCost); { { } 222 Computer Science Form 5 cost=20.00; average return; cost=15.00; average = total/number; strengthening exercises 3.1 5 A function CalculateAverage() is generated in a JavaScript program as below: received from the use of a temperature sensor. 2 Construct a flowchart to obtain the highest (maximum) temperature for a list of temperatures 1 Write an HTML tag to place the image (car.png) in the upper left corner of the HTML document. 6 Given a JavaScript subroutine named MAJLISMAKAN( ) which has three parameters, namely the name of the organization, the menu choice of either meat or chicken (1: Meat, 2: Chicken), and the number of guests. This subroutine will check the selected menu option using an if statement and then calculate the cost for the dinner party based on the number of guests present as follows: Write a statement to call the function. 4 Give a JavaScript arithmetic expression that uses the math functions found in math.js to write the math formula below: Write a JavaScript statement to call the MAJLISMAKAN( ) subroutine for organizations like the following: 3 Briefly explain the application of the use of for, while and do...while repetition structures by giving suitable examples. Machine Translated by Google
document.write(density[2]); function FunctionMath () </html> <script> <body> var y,m=2,x=10,c=3; y=m*x+c; <html> { math y = mx + c".</p> var density = [0.25, 2.35, 0.77, 20.0, 5.5, 6.0]; } <p>Click the button to display the result of the calculation using the formula document.write("<br>"+y); CHAPTER 3 Web-Based Programming 223 <button <p id=“demo”></p> </body> >Mathematical Count</button> </script> 8 Write an array declaration that can hold five pH values for five hydrochloric acids from the results of the hydrochloric acid concentration study. An example of the results of a study of the concentration of hydrochloric acid is as follows: 7 Given a JavaScript snippet that has density values for six types of materials. (b) Organization name: Pertama & Co., Menu: Meat, Number of guests: 110 (b) Organization name: Akuan Sdn Bhd, Menu: Chicken, Number of guests: 220 with the appropriate onclick() statement: as below: (a) Organization name: UNiA, Menu: Meat, Number of guests: 100 9 Complete the following JavaScript program snippet by filling in the blanks What values are printed? 10 Write the correct onclick() statement to generate a button and display A 0.1 1 Hydrochloric Acid 0.01 pH C B E 1 Concentration 1 3 D 0 0.1 2 0.001 Machine Translated by Google
Learning Standard by Using Language Server Scripting At the end of learning students can 3.2.9 Create a register (sign up) and log in (login) 3.2.1 Explain the function of the website as a link between users and systems in the network 3.2.6 Perform validation (validation) on input data from users 3.2.10 Produce a program that can authenticate users and update data in the database 3.2.2 Generating and saving data in text files (.txt) 3.2.3 Using a server scripting language to build a unique website for each user database 224 Computer Science Form 5 3.2.7 Create, update, backup and restore on the website 3.2.5 Using data imported from database files to solve problems 3.2.8 Execute several forms of database queries 3.2.4 Using data imported from text files to solve problems Server Scripting Language Web Site Requirements Between Users and In-Network Systems 3.2 3.2.1 Website Development Each website will require users to enter different inputs to allow the system to display information according to the user's needs. Imagine you are a librarian and are the secretary of the body. You have been instructed to write a complete report on the effectiveness of the book lending system in the school library. What is the first thing you will do before starting your report writing? Can you interact with the system? In this age of technology at your fingertips, you must have had different experiences when browsing various types of websites on the Internet. For example, if you browse a search engine website, you need to enter the appropriate keywords to get the information you want. This is because the website helps users to reach the desired information. However, if you browse the website of any airline, you need to enter the destination you want to visit and the date for the system to display the ticket price you want. Ideally, we need to find material to draft the content of the report or at least examine the appropriate format for writing. This situation has similarities with the construction of a website. Before a website is built, a web designer must first plan how the website will be presented. This is said because every website that is developed will be an intermediary that will determine how users will interact with the system used. Try to imagine without a website, how will you interact with the banking system, search engines or social media? Machine Translated by Google
A client is any machine or process that requests a specific service from a server while a server is a machine or process that provides services to the client. These client and server processes can occur in the same computer system or in different computer systems connected through a network. In an Internet and network environment, a web browser will act as a web client while a web server will act as a server. A server-side scripting language is a server-side program or web server that underpins web development. Just like a house that needs to be supported by various functions to complete the function of the house itself such as electrical wiring, plumbing systems and drainage systems, so is the server scripting language function in a website. One of the functions of a server scripting language is to access data from a database. If a user requests a web page to be displayed using a browser, the request will be sent to the web server. Then, the web server will find the desired web page and transfer the web page to the browser to be translated and displayed to the user. So is the concept of the client/server model used to support communication over the Internet. This model is based on the distribution of functions between the client and the server. In conclusion, the existence of this website is to be an intermediary in determining how users can interact with a system on the Internet. Therefore, before a website is built, we need to first identify what the purpose of the website is. This is said because the display on the website will determine how a user can manipulate information in a system and determine the extent of the user's access to the system. When we go to a restaurant, we will call the restaurant waiter to order the food we choose based on the menu given. Next, the server will ensure that the client's order will be processed by the chef and sent back to the client according to the client's wishes. In this analogy, the restaurant customer is one party who requests service from the restaurant server and the restaurant server is the other party who will fulfill the client's needs. Source: Tim Berners-Lee has People/ Berners-Lee CHAPTER 3 Web-Based Programming 225 1990, he created the first web browser for the WWW. Server Scripting Language https:// www.w3.org/ https:// goo.gl/ 0xKutg developed the World Wide Web (WWW) to his employer, CERN in 1989. In the year Server Concept You Did you know? Server Scripting Language Machine Translated by Google
Individual Work Objective: Identify the functions of websites in various areas clearly. Daily 2 Explain how websites are used for the sectors you have studied in question 1 Observation of Website Functions in Various Fields 1 List some related sectors that you will study. Application As one of the writers for the school bulletin, you are assigned to study the sectors that use websites to provide services or products to users for the Technology and You column. •Pearl •Blog guest book However, sometimes server scripting languages are not very secure as server scripting can be used to hack websites. Because of this, a good website needs to use both client and server scripting languages to support the authentication process on the client side as well as on the server side for the purpose of website security. •Python This situation is different from server scripting where all processing is done on the server side, so the issue of processing being blocked by the browser will not arise. • Message board • JavaScript •PHP ASP One of the main reasons server scripting is needed is that server scripting languages are browser independent. Compared to browserdependent client scripting, issues arise when the client scripting used is not supported by the browser. Since server scripting is able to provide responses according to the user's wishes, server scripting languages are used for applications such as the following: There are many choices of server scripting languages that websites can use to support interactions with web servers to manipulate data. Among the server scripting languages are as follows: ACTIVITY 1 perlmonks.org/?node_ Web Pages and Web Apps Perl has covered many areas of IT. Perl is the backbone of bioinformatics analysis in the rapidly growing field of science. Perl made major contributions to the field of biology, particularly in the Human Genome Project. 226 Computer Science Form 5 http:// www. Source: id=823275 goo.gl/ QfnxT2 Machine Translated by Google
Any data entered by the user from the website can be saved to the server in the form of a text file. For example, when a user enters a name and password, the information can be stored in a text file on the server computer. To do such a task, we will use the "fopen" function as a command to be executed in the server. The Hypertext Preprocessor or PHP script is executed by the server computer. PHP provides programming capabilities to process a task and be executed by the server. Figure 3.2.1 is a simple example of PHP scripting and the results that will be returned to the browser. Some basic operations on text files are as shown in Figure 3.2.2. Before any operation on a text file is performed, the text file must first be opened. The following is the syntax for creating/opening a text file, that is, using the "fopen" function that will be included in the website. Did you know? You Creates/opens a text file 3.2.2 Production and Storage of Data in Text Files (.txt) echo "Welcome"; open Basic Editing (changing and adding) text files Figure 3.2.2 Basic operations on text files Creating/ Operation Figure 3.2.1 A simple example of PHP scripting <html> </body> Writes data to a text file ?> <h1> My first PHP page </h1> Reading CHAPTER 3 Web-Based Programming 227 Hypertext Preprocessor (PHP) supports file types for the purpose of input and output operations on files such as text files. By using PHP, we can read/ <?php <body> </html> $f=fopen("text filename", accessmode); /to text file. text file data from a text file write data from Machine Translated by Google
Let's try to open a text file using the "w" (writing) mode and then save (write) some text into the text file. Among the steps that need to have a php file are: The access mode of any file will determine the operations that the text file can perform. Table 3.2.1 shows a summary of some text file access modes. The examples in this lesson will use a plain text file called "LogIn.txt". However, you can also create your own text files if you want. What is a PHP file? Table 3.2.1 Access mode and description $f=fopen ("Login.txt", "w"); Source: has a ".php" extension. contains text, JavaScript and PHP code. 228 Computer Science Form 5 ÿ PHP files can against the server, and the results return to the browser as HTML. ÿ PHP files goo.gl/ FumQuW ÿ PHP code is executed EXAMPLE 1 fwrite. Did you know? You The file is opened for writing only (starting from the beginning of the file) Description w The file is opened for reading/writing. Deletes the contents of the file or creates a new file if the file does not already exist. The file pointer starts from the end of the file. The file is opened for reading/writing. The file pointer starts from the beginning of the file. The file is opened for reading/writing. The contents of the file are preserved. Creates a new file if the file does not already exist. Access mode a 2 Write the contents of the file that has been opened with text using "$f" here refers to a variable to represent the text file that will be used in the server. Example 1 describes the use of the fopen function. The file is opened for reading only 1 Open the file using fopen. 3 Close the file that has been opened using fclose. r w + "LogMasuk" is the name of the text file we recommend to save the text while "w" means that the file is in writing mode. In addition to the "w" mode, the "a" (appending) mode can also be used as a way to add text content to the text file. a + The file is opened for writing only (starting at the end of the file) The file pointer starts from the beginning of the file. R+ Machine Translated by Google
Description: <?php Figure 3.2.3 Program for SimpanTeks website. php Figure 3.2.4 Display of LogMasuk.txt file output // to open a text file using w mode CHAPTER 3 Web-Based Programming 229 ?> // close the file after use EXAMPLE 2 fclose($f); 3 , Statement $f = fopen("Login.txt", "w"); at 1 is to open a text file named "LogMasuk.txt". The result of executing this statement is that the file will be created in a folder located on the server computer, and referenced with the pointer variable "$f". At this point, the content of the file is still empty. must have a statement that will close the file. As in Figure 3.2.3 on 3 using the statement fclose($f); Example 2 describes the use of the fopen function and the fwrite function in the program for the website SimpanTeks.php. Notepad, then the content is as shown in the example output in Figure 3.2.4. fwrite($f, "Welcome"); 2 the word "Welcome" in the file. If there is no more text to be written into the text file, then at the end of our statement When we check the content of the text file "LogIn.txt" by opening it through the software $f = fopen("Login.txt", "w"); 1 Statement fwrite($f, "Welcome"); on the next 2 will write/note Machine Translated by Google
Let's say you want to record the names of users who have visited your school's website. The steps to be taken are: Objective: Generate a text file and save the data into it Production of Text Files (.txt) for Data Storage 1 Write a simple HTML program to generate an HTML document a text file. 4 Once the button is pressed, the username should be saved in 5 Check the text file by opening it again and making sure the names of your school's website visitors have been in the file. 3 Make sure there is also an "Enter" button that will take the name in the input field and save the name to a text file on the server computer. The username should be stored in the server for future reference purposes. 2 Make sure there is an input field for users to enter their name when browsing the website. Users should also be asked to enter their name. Note: Based on the names stored in the text file, we can also find out the number of users who have visited the website. the file. (website) as shown in Figure 3.2.5. 230 Computer Science Form 5 "Enter", the program will execute with variables like '$name', '$date' and '$log'. is represented Figure 3.2.5 Example of a website that will be produced statements such as opening a file, writing text as the content of a text file and then closing the text file. Text written in a text file An if statement is required so that if the user presses the button Individual Work In the website shown in Figure 3.2.5, we will use the form object. The form object is an important object in the website because we need elements such as text boxes for entering student name data as well as button elements for actions to be taken after the information is entered. In this case, after the "Enter" button is clicked, the user will be directed into the same form object. We can identify this on the <form method='POST'> statement that the "action" attribute is not specified in the statement. Figure 3.2.6 shows an HTML program using a form object. You Did you know? ACTIVITY 2 Machine Translated by Google
fclose($f); 8 <html> if (isset($_POST["Submit"])) 2 { </body> </ html> 6 Concatenate values from variable '$name' and variable '$date' text <?php ?> 5 Accumulates the value from using the 'date' function into the '$date' variable. <body> <h1>Welcome</h1> <h1>To Bistari Jaya Middle School</h1> $name = $_POST['username']; 4 7 Logs the value of the '$log' variable into a text file. <form method='POST'> 1 <head><title>Write to a text file</title></head> $f = fopen("Login.txt", "a"); 3 $log = $name.":".$date.PHP_EOL; 6 2 Checking whether the "Enter" button has been pressed. <input type = 'text' name='username'></p> $date = date('d/m/Y h:i:s a', time()); 5 fwrite($f, $log); 7 1 Use a form object that has textbox and action button elements. <p>Enter Your Name 8 Closes an open text file. </form> } 3 Open a text file with access mode "a" (append) which aims to add content 4 Accumulates the value from the text box into the '$name' variable. <input type = 'submit' name='Submit' value='Input'> Description: into the '$log' variable. the text file. Figure 3.2.6 Example of a program that uses a form object CHAPTER 3 Web-Based Programming 231 Machine Translated by Google
Group work Figure 3.2.7 Example of a text file "LogMasuk.txt" 232 Computer Science Form 5 The result of the implementation of this website is a text file named "LogMasuk.txt" will be created and when we open the file using Notepad software, we will find the contents of the file recorded with the user's name and the date and time when this website was visited. An example of the LogMasuk.txt text file is shown in Figure 3.2.7. The date function is used to change the format of the date value obtained from the time() function call where: ACTIVITY 3 King Kumutha Generating Text Files and Saving Data Wednesday Based on the information above, how do you record the names of students who come late to school by creating a text file? Through the stored data, can you identify the name of the student who is most often late to school each month? Monday Meaning Embong Fadzliana You and your friend are school supervisors. Every Monday and Wednesday you are assigned to write the names of students who come late to school. The names below are students who came late on Monday and Wednesday. Jason Rukumani Nadia Objective: Generate a text file and save the data into the text file m : gives a specific month number value from 01 to 12 h : gives the time value in hours from 01 to 12 i : gives a time value in minutes from 1 to 59 Y : gives a specific year value of 4 digits d : gives the day value for a specific month from 01 to 31 Other formats that can be used such as date('D/M/YH:i:S A', time()) a : gives the time value in lower case either 'am' or 'pm' Machine Translated by Google
Figure 3.2.8 Unique website for each user CHAPTER 3 Web-Based Programming 233 A website looks unique to each user when the website displays information about that user only such as student biodata, detailed book information, daily work record transactions and others. Figure 3.2.8 shows the unique website for each user in a nutshell. 3.2.3 Use of Server Scripting Languages to Build Unique Websites for Each User Let's say we want to build a website that will display student information logged into the student information system. First of all, students are required to enter their username and password in the login website. If the student successfully enters the login website, then the student's biodata information will be displayed based on the data that has been stored in advance in the text file. For now, we assume that the text file acts like a database file that will store information such as username, password, student name, class, gender and country of birth. A summary of this project as shown in Figure 3.2.9. Develop websites based on scenarios or work areas using server scripting languages. Developing Websites Situation: Individual Work PROJECT 1 Machine Translated by Google
A program for the LogMasuk.php website will be developed to allow users to enter username and password data. A text file called Biodata.txt should be prepared first using Notepad software. Figure 3.2.10 shows the program for the Biodata.php website and Figure 3.2.11 shows the output for the website. The program for the Biodata.php website will be developed to access the data that has been stored in the text file Biodata.txt. If the username and password entered match the data in the text file then other information such as student name, class, gender and country of birth will be displayed. This text file contains information about username, password, student name, class, gender and country of birth. Each line in the file has 6 data items and is separated by a comma symbol. <title>Login</title> <head> $password = $_POST['password']; <p>Student Biodata</p> <html> <body> $name = $_POST['username']; </head> ?> <?php Figure 3.2.9 Summary of the website to be developed 234 Computer Science Form 5 $found = False; Machine Translated by Google
3 1 2 4 5 if (strcmp($password,$pass)==0) { <?php breaks; $class = $field[3]; Figure 3.2.10 Program for the Biodata.php website $fullname = $fields[2]; print "<tr>"; print "<td>NAME</td>"; print "<td>. $fullname."</td>; print "</tr>"; print "<tr>"; print "<td>CLASS</td>"; print "<td>".$class."</ td>"; print "</tr>"; print "<tr>"; print "<td>GENDER</td>"; print "<td>".$gender."</ td>"; print "</tr>"; print "<tr>"; print "<td>STATE OF BIRTH</td>."; print "<td>".$state."</td>"; print "</tr>"; $found = True; print "<table>"; while (! feof($f)) { $state = $field[5]; } }//end while print "<table>"; if ($found != True) $f = fopen("Biodata.txt","r"); $valid = false; $gender = $fields[4]; } ?> $field = explode (',', fgets ($f)); if (strcmp($name,$user)==0) { print "Record Not Found"; fclose ($f);//close the text file $pass = $field[1]; CHAPTER 3 Web-Based Programming 235 </body> </ html> $user = $fields[0]; Machine Translated by Google
Figure 3.2.12 shows the client-side script program for the LogMasuk.php website and Figure 3.2.13 shows the output display for the website. Khadijah, Malaysia, Siti Khadijah, 4Bistari1, Female, Kedah 5 Statements intended to separate text with comma symbols read from a text file. Example text file content has a comma symbol. 4 Use a form object that has text box and action button elements. 2 Description Description: The number of variables is the number of symbols (comma + 1). The statement aims to compare (string compare) the value of the $name variable with the $user variable. 1 The statement aims to compare (string compare) the value of the $password variable with the $pass variable. If the text of both variables is the same then the result is 0. Stack the separated values into the appropriate variables such as $user, $pass, $fullname, $class, $gender and $state. Symbol $field = explode(',',fgets($f)); 3 The execution of the repeat statement reads the contents of the text file until the end of the text file. Figure 3.2.11 Example of output display for the Biodata.php website 236 Computer Science Form 5 Machine Translated by Google
2 3 The content of a text file can also consist of numbers, text and combinations of numbers and text. 4 1 For example: Ali, 24, 32, 48, Mathematics, 3.20. <table> Figure 3.2.13 Example of output display for LogMasuk.php website <td><input Type = "submit" Name = "submit" Value = "Enter"> </td> </tr> </table> </form> </ body> </html> <head> <title>Login</title> </head> <body> <form action = "Biodata.php" method = "POST"> Figure 3.2.12 Client-side script program for LogMasuk.php website <td>Username</td> <td><input name = "username" type = "text" size = "10"> </td> </tr> <tr> <td>Password</td> < td><input name = "katalaluan" type = "Password" size = "15"> </td> </tr> <tr> CHAPTER 3 Web-Based Programming 237 <html> <tr> Machine Translated by Google
Individual Work 3.2.4 Use of Data Imported from Text Files to Solve Problems A form object that has a textbox element named 'password'. 1 Description Note: This text box will display the '*' symbol when the user enters a password. A form object that has a textbox element named 'username'. Provide an action button named 'submit'. Symbol 4 2 Building a Unique Website Description: 3 Use the form object (form). ACTIVITY 4 In order to get more customers, Ah Seng wants to build a website for his supermarket so that it is better known by the public. The proposed website is capable of recording the information of users who visit the website and each user has a password. Then, after the user successfully enters the website, the user can see the items in the supermarket. Computer Science student, want to build a website as Ah Seng wants? Ah Seng owns a supermarket in Jengka town. Based on this situation, how do you, as When we have a lot of data that needs to be processed/manipulated, it is better if the data is stored in a file (for example a text file). The data in the file can then be processed without requiring one by one data input by the user. Suppose we have a list of integer numbers such as 10, 30, 32, 6, 45 and 20. We can save these numbers into a text file to be used as input in a website to find the total, average value and so on. 238 Computer Science Form 5 Machine Translated by Google
To save these numbers, we will use Notepad software and saved as 'Numbers.txt' as shown in Figure 3.2.14. Next, we will build a website that can input this data and process it to find the total and average value as shown in the output display in Figure 3.2.15. Figure 3.2.16 shows the program for the website Purata.php. Text like: 1, Johor, Johor Bahru •Johor Bahru For example: Figure 3.2.14 Contents of text file Number.txt • Johor The function "explode()" in PHP is to split the text into several parts of the text. Figure 3.2.15 An example of the average value calculation website output display can be separated into •1 CHAPTER 3 Web-Based Programming 239 and the data can be stored in an array of three elements, the first element stores the value '1', the second element stores the value 'Johor' and the third element stores the value 'Johor Bahru'. You Did you know? Machine Translated by Google
Figure 3.2.16 Server-side program for the website Purata.php 240 Computer Science Form 5 '$amount'. print "Average Value = ".$average."<br>"; <?php { ?> //end for php 4 The use of the 'count' function to determine the number of elements in the '$arrNumber' array. for ($x = 0; $x < $number; $x++) 5 fclose($f); 7 6 Perform summation of numbers. The summation result will be stored in a variable while (!feof($f)) 2 $total = $total + $arrNumber[$x]; { $f = fopen("Number.txt","r"); 1 print $arrNumber[$x]."<br>"; 6 7 Closes an open text file. $average = $total / $number; 2 Repetition structure for the process of reading text from a text file until the end of the file. } } print "Total = ".$total."<br>"; 1 Open a text file called 'Numbers.txt' which contains numbers. $arrNumber = explode(',',fgets($f)); 3 Example 3 describes the construction of a website that will list students' names, marks and grades obtained for those marks. Suppose we have data stored in a text file named 'Mathematik.txt' as shown in Figure 3.2.17. Through this data, we can process it by developing a website that can access and then read the data contained in the text file. Suppose the problem we want to solve is to build a website that will list students' names, marks and grades obtained for those marks. $sum = 0; // close the opened file 3 On each line of text read from the text file, the data of numbers separated by comma symbols will be stored in an array named '$arrNumber'. 5 Repeat structure as many as '$number' of times. $number = count($arrNumber); 4 Description: EXAMPLE 3 Machine Translated by Google
Figure 3.2.19 Output display for the gred.php website Figure 3.2.18 Conditions for determining grade marks Figure 3.2.17 Example of the content of the text file "Mathematik.txt" CHAPTER 3 Web-Based Programming 241 E A Score Grade D 60 – 69 The desired implementation results are as shown in Figure 3.2.19. 70 – 79 C 0 – 49 Let's say the setting of the mark grade is determined by complying with the conditions as shown in Figure 3.2.18. 80-100 B 50-59 Machine Translated by Google
242 Computer Science Form 5 <head> { $grade = "B"; print "<tr>"; print "<td>".$name."</td>"; 4 $grade = "E"; Figure 3.2.20 shows the list of server-side programs of the gred.php website to process and generate grade marks. print "<table>"; print "<th align = 'left' width = '130'>Student Name</th>"; print "<th align = 'center'>Score</th>"; print "<th align = 'center'>Grade</th>"; //open the file to read the contents of the file { { $grade = "C"; <body> <p>List of Marks and Grades</p> //determine grade marks starting here $field = explode (',',fgets($f)); $name = $field[0]; } elseif ($score >= 60 ) <title>Marks Grade List</title> } <html> while (!feof($f) ) { $grade = "A"; } elseif ($score >= 70) $grade = "D"; } else { $f = fopen("Mathematics.txt","r"); $valid = false; // evaluate initialize with the value false <?php if ($score >= 80) } elseif ($score >= 50) $score = $field[1]; { </head> Machine Translated by Google