Figure 2.1.41 Deleting all records Figure 2.1.42 All records are deleted CHAPTER 2 Advanced Database 93 (b) Delete all records in the GOODS table. Warning: To remove a field structure, the DROP statement must be used. However, the DELETE statement can be used if you want to delete data. The statement in Figure 2.1.41 will delete all records of the GOODS table as shown in the output section in Figure 2.1.42. SQL statement: Output: Machine Translated by Google
Format: To update an existing record in a table, you can use the UPDATE statement. The SET statement shows the new data to be inserted in the table while the WHERE statement is used to update only certain records. EXAMPLE 9 Figure 2.1.43 GOODS Table 94 Computer Science Form 5 Figure 2.1.44 Update all records WHERE field_name = specific_value; SQL statement: SET field_name = new_value Example 9 shows the steps to update a record in a table. You can update all records or specific records only. Suppose you have an ITEM table with records as in Figure 2.1.43. (a) Increase the stock of goods by 10 units for all types of goods. UPDATE table_name UPDATE Machine Translated by Google
Figure 2.1.46 Updating specific records Figure 2.1.45 Display of records after updating Figure 2.1.47 Display of specific records updated CHAPTER 2 Advanced Database 95 Figure 2.1.46 shows the steps to update certain records only by stating the condition in WHERE, that is, only the quantity of goods that is less than 25 units will receive an addition of 10 units of goods stock. The output of this statement is shown in Figure 2.1.47. Figure 2.1.44 shows the UPDATE statement to update all records and its output is shown in Figure 2.1.45. (b) Add 10 units to the stock of goods for each type of goods whose number is less than SQL statement: 25 units. Output: Output: Machine Translated by Google
Specifies the specific records to display. Without this statement, all records will be displayed. 1 Enter the room, guest and reservation information made by the customer. 2 The hotel wants to increase the price of each room by 10%. New price update Description Manipulating Data each room. List the name of the field you want to display 3 Delete the information of customers who have checked in on November 1, 2016. The name of the table to reach the data Based on Activity 3, you have created the following tables for a Room Reservation System in a hotel. Statement ROOM (Room No., Type, Price) SELECT RESERVATION (Guest No., Check-In Date, Check-Out Date, Room No.) FROM GUEST (Guest No., Name, Address, Occupation) WHERE Write SQL commands to do the following: Table 2.1.13 Basic structure of SQL statements 96 Computer Science Form 5 The SELECT and FROM statements need to be specified when accessing the data while the WHERE statement is for options. The WHERE statement is only needed if you want to access specific data. If there is more than one condition, the AND statement can be used. Previously, three data processing language commands namely UPDATE, INSERT and DELETE have been discussed. This command allows you to make changes to the records in the table. The next statement is a SELECT statement that allows you to access records from a table. The SELECT statement is used to access data from a table in a database. The SELECT statement consists of three basic statements as in Table 2.1.13. 2.1.5 SQL: Retrieving Data ACTIVITY 4 Group work The SELECT statement Machine Translated by Google
Example 10 shows how to access data from a table. You will refer to the GOODS table in Figure 2.1.43. SQL statement: SELECT field_name FROM table name WHERE condition1 AND condition2 AND condition... (a) Access all fields and records in the ITEM table. EXAMPLE 10 CHAPTER 2 Advanced Database 97 Figure 2.1.49 All records in the GOODS table Figure 2.1.48 Reaching all records Output: Format: Machine Translated by Google
Figure 2.1.51 Display of specific field records 98 Computer Science Form 5 Figure 2.1.50 Accessing a specific field record The statement in Figure 2.1.48 displays all the records and fields found in the ITEM table. The use of an asterisk (*) is an abbreviation to display all the fields in the table. The output to this statement is shown in Figure 2.1.49. SQL statement: The statement in Figure 2.1.50 displays all records but only refers to certain fields, namely Item No and Item Name. To reach a specific field record, you need to list the name of the field name to reach. The output to this statement is shown in Figure 2.1.51. (b) Access all records and specific fields such as Item No. and Item Name. Output: Machine Translated by Google
The GROUP BY statement is used to combine several records in a table into small groups. Format: EXAMPLE 11 CHAPTER 2 Advanced Database 99 SQL Aggregate Figure 2.1.53 Display of data that meets the GROUP BY condition Figure 2.1.52 Access data using GROUP BY Functions goo.gl/ IcLZIR Output: Figure 2.1.52 shows how to access data using GROUP BY. Let's say you want to list the Student ids who borrowed tools in the store. SELECT field_name FROM table name SQL statement: The statement in Figure 2.1.53 displays the student id found in the items table by combining the same records into one. Therefore, repeated data is displayed only once. GROUP BY field_name; GROUP BY Machine Translated by Google
Once the data is entered into the table, you can call the data in ascending or descending order by using the ORDER BY statement. Basically, ORDER BY will sort the data in ascending order. If you want to sort in descending order, you need to add the word DESC. Format: EXAMPLE 12 Figure 2.1.54 Accessing data in ascending order 100 Computer Science Form 5 Figure 2.1.55 Data display in ascending order Output: FROM table name SQL statement: Figure 2.1.54 shows how to access data in ascending and descending order. ORDER BY field name; SELECT field name (a) List the information of all goods in ascending order according to the name of the goods. ORDER BY Machine Translated by Google
Figure 2.1.57 Data display in descending order CHAPTER 2 Advanced Databases 101 Figure 2.1.56 Access data in descending order SQL statement: The statement in Figure 2.1.54 will sort the item table data in ascending order according to the Item Name field and the output is shown in Figure 2.1.55. (b) List the information of all goods in descending order according to the name of the goods. The statement in Figure 2.1.56 will sort the item table data in descending order according to the ItemName field. The word DESC means that the order of the data is in descending order as in Figure 2.1.57. Output: Machine Translated by Google
120 Write the SQL statement for each given statement. 7 List the name and price of a dining table made of rubber wood. 1000 60 TEAK P10 200 COMPUTER TABLE 2000 DINING TABLE 3 List the names of products made from rubber wood. P02 PRODUCT 800 P07 1000 8 List the names and prices of products made from rubber wood. Sort the output in ascending order by name. P03 1000 COMPUTER TABLE Quantity 500 RUBBER P08 300 4 List all table information available in stock. COMPUTER TABLE 500 CHAIR RUBBER Product No P01 P05 500 Accessing Data Using SQL Statements Wood Type 500 CHAIR 200 5 List the names of products that are not made of teak wood. LAYERS P06 TEAK 100 Name COFFEE TABLE SCHOOL DESK SAY 1 Display all product information available in stock. RUBBER SAY 110 RUBBER 6 Display all product information made of solid wood and teak. 375 CHAIR 500 Price P04 100 100 P09 2 Display the name and quantity of products in stock. Display the output for each expression. Use the information in the following table. DINING TABLE RUBBER 102 Computer Science Form 5 ACTIVITY 5 Individual Work Machine Translated by Google
CHAPTER 2 Advanced Database 103 Figure 2.1.58 Access data by using the SUM function Table 2.1.14 Aggregate Functions SUM EXAMPLE 13 Returns the total number of records Aggregate Functions SELECT SUM (field name) SUM FROM table name; MIN Description MAX Example 13 shows how to use the SUM function. Let's say you want to count the number of items in stock. You can calculate the total number of items in stock or the number of items that meet certain conditions by using the WHERE statement. Returns the sum of the values of a given field AVG (a) Get the amount of items in stock. Returns the lowest value of a given field COUNT SQL statement: Returns the highest value of a given field Returns the average value of a given field SQL has five aggregate functions that can be performed on a field in a table to produce a single aggregate value for that field. This function combines a group of data and returns a single value as the result. Table 2.1.14 shows five aggregate functions that are often used. Format: The SUM function is used to calculate the sum of values from a specific field in a table. 2.1.6 Aggregate Functions Machine Translated by Google
Figure 2.1.60 Accessing data by using the SUM function Figure 2.1.61 Data display for the SUM function 104 Computer Science Form 5 Figure 2.1.59 Data display for the SUM function The statement in Figure 2.1.58 will calculate the total number of items in stock. Its output is shown in Figure 2.1.59. (b) Get the amount of items borrowed by idMurid M1000. SQL statement: Output: Output: Machine Translated by Google
CHAPTER 2 Advanced Database 105 Figure 2.1.62 Access data by using the SUM function Figure 2.1.63 Data display for the SUM function MIN Format: The MIN function, i.e. minimum, will return the lowest value from a given field in a table. Output: The statement in Figure 2.1.60 will calculate the amount of items borrowed by idmurid M1000 only. This calculation can be done by adding a statement to the WHERE condition that only refers to idmurid M1000. SQL statement: The statement in Figure 2.1.62 will count the amount of items borrowed by a specific student only and name the sum field (quantity) to Total Items as shown in the output in Figure 2.1.63. FROM table name; SELECT MIN (field name) See the field name displayed in Figure 2.1.61, which is SUM(QUANTITY). You may want a different name that is more meaningful. You can do so by using the AS expression as in Figure 2.1.62. Machine Translated by Google
Figure 2.1.64 Access data by using the MIN function Figure 2.1.65 Data display for the MIN function 106 Computer Science Form 5 MAX The MAX function, i.e. maximum, will return the highest value from a given field. Format: Output: Figure 2.1.65 displays the lowest item price found in the item table. SQL statement: FROM table name; SELECT MAX (field name) Example 14 shows how to use the MIN function. Let's say you want to get the cheapest item price available in the item table as in Figure 2.1.64. EXAMPLE 14 Machine Translated by Google
Figure 2.1.66 Accessing data using the MAX function Figure 2.1.67 Data display for the MAX function CHAPTER 2 Advanced Database 107 AVG The AVG function will return the average value of a field. Format: Output: Figure 2.1.67 displays the price of the most expensive item found in the item table. SQL statement: FROM table name; SELECT AVG (field name) Example 15 shows how to use the MAX function. Suppose you want to get the price of the most expensive item in the item table as in Figure 2.1.66. EXAMPLE 15 Machine Translated by Google
Figure 2.1.68 Accessing data using the AVG function Figure 2.1.69 Data display for the AVG function 108 Computer Science Form 5 COUNT The COUNT function will count the number of specific records from a table. Format: Output: Figure 2.1.69 displays the average price of goods found in the goods table. SQL statement: FROM table name; SELECT COUNT (field name) Example 16 shows how to use the AVG function. Let's say you want to get the average price of an item in a table of items. EXAMPLE 16 Machine Translated by Google
Figure 2.1.70 Accessing data using the COUNT function Figure 2.1.71 Data display for the COUNT function CHAPTER 2 Advanced Database 109 Aggregate Functions and GROUP BY Typically, you use aggregate functions for specific parts of a relationship. In this situation, the aggregate function can be used in conjunction with the GROUP BY statement. Output: Example 17 shows how to use the COUNT function. Suppose you want to get the total number of records in the item table as in Figure 2.1.70. SQL statement: Figure 2.1.71 displays the total number of records found in the goods table. EXAMPLE 17 Machine Translated by Google
110 Computer Science Form 5 Figure 2.1.73 Data display using GROUP BY Figure 2.1.72 Access data using GROUP BY Output: SQL statement: Example 18 shows how to use the GROUP BY statement. Suppose you want to get the total number of items borrowed by each student. The steps are as follows: 3 Select one record for each group (use the aggregate function). Figure 2.1.72 calculates the number of items in the item table by using the expression COUNT(*) and grouped according to students by using the GROUP BY statement and the output is shown in Figure 2.1.73. 1 Count the number of records in the table (use FROM and WHERE). 2 Group records according to students (use GROUP BY). EXAMPLE 18 Machine Translated by Google
Format: The HAVING statement is used to specify the group of data to be displayed. In this situation, the WHERE statement cannot be used because where returns only specific data records, while HAVING will return a specific group of data. EXAMPLE 19 Figure 2.1.74 Accessing data using HAVING Figure 2.1.75 Data display using HAVING CHAPTER 2 Advanced Database 111 Output: Figure 2.1.74 counts the number of items in the item table and is grouped according to IDMurid as in Example 18. The expression HAVING COUNT(*) is added to display only certain data groups. FROM table name SELECT field name, function1, function2….function n GROUP BY field name Example 19 shows how to use HAVING. Let's say you want to display the number of items borrowed by each student and you want to display students who borrowed items with a quantity greater than 2. HAVING (function); The output does not display the sum of IDMurid M2000 and M3000 because it is greater than or equal to 2 as shown in Figure 2.1.75. SQL statement: Use of HAVING Machine Translated by Google
Quantity TEAK Write the SQL statement for each of the following statements. 6 Get the quantity of chairs available in stock. RUBBER COMPUTER TABLE 300 2000 DINING TABLE P02 RUBBER 100 P09 3 Get the minimum value, maximum value and average value of the seat price. 100 Use the information in the table shown. SCHOOL DESK SAY DINING TABLE 7 What is the average price of a computer desk? RUBBER 120 1000 P03 COMPUTER TABLE 60 LAYERS P10 4 Find the number of products made from each type of wood. 1000 CHAIR RUBBER PRODUCT 375 P06 200 P04 Using Aggregate Functions 500 Price TEAK 5 Find the number of products made from each type of wood. Display the amount of the product 100 Name RUBBER CHAIR 500 Product No 800 P07 1000 1 Get the total number of products in the database. P05 200 500 SAY more than 1. 110 COFFEE TABLE 500 CHAIR P01 Wood Type 500 P08 2 How many dining tables are in stock? COMPUTER TABLE 8 What is the total quantity of the computer desk? Using SQL to Solve Problems MySQL is an open source database management software that allows users to store, organize and retrieve data. This software is very popular because it is easy to use, high performance and reliable. Assuming you want to build a database to manage school sports records, Table 2.1.18 is the form used to obtain information regarding participants, sports events and medals won by their respective categories. 2.1.7 Building a Relational Database with ACTIVITY 6 Individual Work 112 Computer Science Form 5 Machine Translated by Google
100 m Bronze A02 100 m Home Sports Red 2 Bistari Event Name Gold Participant ID Participant Name Under 18 2000 Green Under 15 Komala 5 Fit P None Under 15 1000 A03 Bronze Nisrina A03 P 5 Fit 1 Active Netball Yellow P Red 3000 1000 Class Nisrina 1000 Football Gender P EVENT Gender Home Sports Category No.Event NameMedal Event A01 400 m 400 m A02 A04 Nisrina 2 Bistari Category Under 18 Red Andy 400 m PARTICIPANTS A02 Under 18 Event No Under 15 2000 P Gold Class Football None L PARTICIPANTS Yellow 4000 Football Nisrina Participant name Netball 1 Porch Gender Home Sports Category NoEvent NameMedal Event Event No L Yellow A02 Under 18 A04 P Football Andang 1 Active Under 15 Participant ID Participant Name Class L Yellow None 2000 Red Under 18 5 Fit Medal Komala Gold Gold Komala Under 15 Green silver silver 3000 Komala PARTICIPANTS A04 2 Bistari L POSITION A01 P Green 4000 Andy Under 15 1000 400 m None 2 Bistari Under 18 1 Porch P Green 2000 Participant ID A04 5 Fit Andang Participant ID Table 2.1.17 Table of school sports records in 2NF form CHAPTER 2 Advanced Database 113 Table 2.1.15 School sports records in 0NF form Table 2.1.16 Table of school sports records in 1NF form Table 2.1.15 shows a non-normalized table (0NF). Therefore, the first step to take is to generate a normalized relational schema. Based on the table, recurring attributes are identified. The primary key is given as in Table 2.1.16. Dependencies of non-key attributes with key attributes are examined. If there is a non-key attribute that depends on only one of the key attributes, then the relationship is said to have a partial dependency. A new schedule needs to be formed to overcome this situation. Machine Translated by Google
Table 2.1.18 Table of school sports records in 3NF form Figure 2.1.76 Creating a sports database 114 Computer Science Form 5 Description: Event No Category Medal POSITION Class Participant ID EVENT PARTICIPANTS Event No 1 Participant ID Event Name 2 Home Sports PARTICIPANT_CATEGORY 3 Participant name Category 4 Gender 2 Give the name of the database you want. Example: sports. Once the normalized relational schema is established, you can start building the database using the My SQL found in phpMyAdmin. The steps have been listed as follows: The category depends on the class that determines the age of the student either under 18 years or under 15 years. Table 2.1.18 shows the table in 3NF form. 3 Click the Create button. 1 Create a database as in Figure 2.1.76. 4 The sports database has been successfully created. 1 Click on the Databases tab. Based on Table 2.1.17, the existence of transitive dependencies is identified. As a result of the research, there is a dependency between non-key attributes, namely Category and Class. Machine Translated by Google
Figure 2.1.78 Participant schedule structure CHAPTER 2 Advanced Database 115 Figure 2.1.77 Creating a table Figure 2.1.79 Entering participant information 2 Create a table as in Figure 2.1.77. Click on the SQL tab to write the SQL statement to create the table. Make sure you click on the name of the database created earlier to make sure the table is created in the correct database. The output display in Figure 2.1.78 shows the Participant table structure that has been successfully created. Figure 2.1.79. 3 Enter all participant information using the insert into statement as in Machine Translated by Google
2 Sports Day – manage sports day information Application Building a Database Using MySQL 3 Library – manage book loan information The task for you and your group members is to build a database using MySQL for one of the situations from 1 to 5 or the situations you have identified. Daily 4 School cooperatives – manage cooperative stock information Make observations in the surrounding area of your school. Discuss together with your group members to determine a database system that can be developed from your school environment. 5 Uniformed bodies - managing student information in each uniformed body 1 Laboratory – manage laboratory information You can consider the following situations: Group work ACTIVITY 7 Once you have successfully created a database of sports records containing participant, event and medal information, you can manipulate the data using the SQL statements that have been discussed. The output display in Figure 2.1.80 shows all the records that have been successfully entered into the participant table. Figure 2.1.80 Participant schedule record Source: 116 Computer Science Form 5 https:// www.mysql. com MySQL is used by the largest international organizations such as Facebook, Google and Adobe. Machine Translated by Google
Based on Figure 1, StudentNo is the key Address in the Room table. RoomNo is the key 2 Draw an Entity Relationship Diagram (ERD) for each of the following statements: Telephone No shown is 1 You want to build an address book database to store friends' information (a) Each bank customer can have several types of accounts and each type of account ROOM in the Student table and you. State the attributes found in this situation. can only be owned by one customer. Room No . The relationship (b) In a hospital, a patient can be treated by several doctors and a doctor can treat more than one patient. Location . 3 Figure 1 shows the relationship between two tables in a database. Student No 4 Explain the use of the SELECT command in Structured Query Language. Give an example. Student 5 Consider the following CUSTOMER table: Student No Complete the following statements: CUSTOMERS Student's name strengthening exercises 2.1 Customer No Example CHAPTER 2 Advanced Database 117 1000 1100 Customer's name Janet Attributes Zhi Enn Simple attributes Customer Address Composite attributes figure 1 Sandakan, Sabah Multiple value attribute Kuching, Sarawak Key attribute Machine Translated by Google
Felix Agus 02052099 18 P 02052111 19 Address Lee Joon Kit Gender 9, Puchong, Selangor 11, Sandakan, Sabah Yurni Yusof 02052133 02051033 20 L L 21 Name 213, Temerloh, Pahang Aneetha Devi No_Student 10, Tanah Mosque, Melaka Ana Azman 21 118 Computer Science Form 5 P Age 02052130 P 89, Sungai Petani, Kedah (a) Write an SQL statement to create the customer table. in descending order based on student number. (b) Write an SQL statement to insert the data 1101, Haliza Hassan, 123 Petaling Jaya, into the customer table. (c) Write an SQL statement to delete the student record named Yurni Yusof. 6 Based on the following STUDENT table, answer the given questions. (c) Write a SQL statement to add a new field, namely phone no. students (a) Write an SQL statement to change the name "Ana Azman" to "Anusha". (b) Write an SQL statement to list all the fields from the Student table Machine Translated by Google
ENTITY MODELS ATTRIBUTES RELATIONSHIP QUESTION entity STRUCTURED (SQL) DIAGRAM RELATIONSHIP NORMALIZATION RELATIONSHIP LANGUAGE RESCAN Functional Dependencies SELECT • WHERE • GROUP BY • ORDER BY • SUM • MIN • MAX • AVG • HAVING • Full dependency • Partial dependency • Transitive dependency CREATE • ADD • MODIFY • CHANGE Language DROP INSERT Language CHAPTER 2 Advanced Database 119 • Simple attributes • Single-valued attributes • Multiple-valued attributes • Derived attributes • Key attributes • Composite attributes Normalization Process UPDATE Definition • ONF DELETE Data • 1NF Processing • 2NF Data • 3NF ALTER • Strong entities • Weak entities Machine Translated by Google
2 Primary lock SELECT Anomaly Foreign key Normalization Entity Transitive dependency DELETE Attributes Partial functional dependencies DROP CREATE TABLE 120 Computer Science Form 5 used to access data from tables in the database (c) Map the entity relationship diagram to the relationship schema. 2 Database statement. . table in SQL is used to delete a table from 6 Statement of data. 3 Customers, Cars and Hotels are examples 7 For questions 1–7, fill in the blanks by choosing the most appropriate word or phrase. 4 A functional dependency between two or more non-key attributes is known as are characteristics that describe an entity. . 8 Based on the given situation, answer the following questions: . Excellent College has 30 dormitories. Every student who registers will be placed in one of the dormitories. Each dormitory can accommodate several students. For each hostel, the management has given the hostel number, name and location. Each dormitory has several rooms designated with room numbers, room names and block names. Each room will be shared by two students. Student information such as student number, name and address will be taken for storage by the hostel management. Each student must be housed in a dormitory room but there may be dormitory rooms that are not occupied by students. 5 "Errors that may occur when the user updates a table that contains (a) Identify entities, attributes and relationships. 1 repetitive data.” This statement is a definition (b) Draw an entity relationship diagram (ERD). is a key used to avoid duplicate data in the database. enrichment exercises Machine Translated by Google
10017 EXAM RESULT 10015 713 0103827185 STUDENT'S NAME 713 0.00 B LEONA SUN 0122221672 COURSE NAME: DATA BASE 10011 0.00 MIRA 10018 615 615 0192973809 GRADE 10016 0.00 A KATHY ADAM 615 0104423381 LECTURER'S NAME: NORMA 10012 0.00 10019 713 CHONG 0198941238 216.55 Amy 221.19 PAUL Telephone No 0102971228 10013 Area Code ROOM NO: B 104 Name 615 345.86 RACE 0108942285 0.00 Code JAMES JANUARY 2016 SEMESTER MIRA 0108442573 GLORIOUS COLLEGE 0192902556 768.93 10014 615 STUDENT NO 615 536.75 A ALAN Saleh 0128942180 10010 COURSE CODE : IS460 615 Amount 38214 40875 51893 figure 1 CHAPTER 2 Advanced Database 121 (a) Write an SQL statement to display customer information located in area 615. 9 Figure 1 is an example of exam results for a course at Kolej Gemilang. Based on the information, perform the normalization method until the third normal form. (c) Write an SQL statement to get the minimum value, maximum value and average value (b) Write an SQL statement to list the total cost of sales for all customers for sales for all customers. (d) Write an SQL statement to remove customer information from area code 713. 10 The following Customer Table shows the purchase information for each customer in several areas. Consider the following database schema: CUSTOMERS each area. (e) Write an SQL statement to update the area code from 615 to 610. Machine Translated by Google
Think... •Try to imagine a situation without a website, how will we interact with the system in the network? •How can web-based technology support users to solve more complex problems in the future? • How can a request from an Internet user be processed online? Machine Translated by Google
web based problems In this chapter, you will learn: • Development of an interactive website in solving problems •Solution strategy • Website development according to the user's needs. • Server scripting language requirements in the website. which can provide an appropriate response based on the input entered by the user through the web. •Client scripting language requirements in the website. •Program construction Web-based Chapter 3 Programming The discovery of the web concept by Tim Berners-Lee in 1989 opened a new revolution in human communication and information sharing. Starting from the static use of the web to support the sharing of information in academic circles, the web is now expanding its wings with the creation of various applications to support each individual and also organizations in various aspects including time, financial and information management. For this reason, the use of computers, smartphones and tablets becomes a necessity for every individual for various purposes. However, to what extent can interactive web development solve your problems? Machine Translated by Google
Learning Standard Start tags Close tags Web content Figure 3.1.1(a) Example of paired HTML tags 124 Computer Science Form 5 3.1.7 Summarize the program using: and arrays 3.1.6 Using the standard library in the program 3.1.5 Explain the advantages of standard libraries to programmers 3.1.9 Produce interactive programs that contain data declarations, control structures, procedures and functions 3.1.4 Using control structures (sequences, options, repetitions) in programs which involves the use of arrays 3.1.1 Explain the Client Scripting Language requirements in the website perform bubble sort, selection sort, binary search, max/min/mean, count, queue 3.1.8 Build the program At the end of learning students can 3.1.3 Using constants, variables and different data types in programs to mean, count, queue) 3.1.2 Translate a simple program given from the Client Scripting Language to a flow chart (bubble sort, selection sort, binary search, max/min/ (ii) functions (i) procedure Client Scripting Language Introduction to HTML and CSS 3.1.1 Client Scripting Language Requirements in Websites <html> HTML documents are about the concept of how documents are displayed. An HTML document is also the concept of how text, audio, video and graphic elements are arranged to be easily read and understood by website visitors. To describe the structure of each web page, HTML code or HTML elements are used. Elements usually consist of two paired tags, namely: start tag and close tag. The content that will be displayed on the web will be between the start tag and the close tag. Figure 3.1.1(a) shows an example of an HTML element consisting of start tag and close tag in pairs and Figure 3.1.1 (b) is the output. <body> Today, this language is required by anyone who wants to publish documents online. For example, teachers who want to assign group assignments to their students online, managers who want to find new employees by advertising vacancies on their corporate website, and job seekers who want to post their profiles need HTML to display their documents. </head> used by professional web designers to design websites. </html> <title>Website Title</title> HTML or Hypertext Markup Language is a standard markup language </body> <head> Greetings and Prosperity 3.1 Machine Translated by Google
<body> Name Attribute </head> </html> <title>Using CSS</title> <a href="www.google.com">This is an example link</a> </body> <head> <h1>School Website</h1> <html> Value Attribute Figure 3.1.2 shows examples of name attributes and value attributes. Cascading Style Sheet (CSS) is one of the programming languages that is an extension to HTML. CSS allows changes to the style of a web page and describes the presentation of an HTML document. Figure 3.1.3 shows an example of using HTML and without css. Figure 3.1.4 shows an example of using HTML with CSS. All HTML elements contain attributes. Attributes contain additional information for each HTML element and are usually placed at the start tag. There are two parts of attributes: •Name attribute •Value attribute My Malaysia! Example without CSS in HTML Introduction to CSS Figure 3.1.3 Example of HTML without CSS and output The Malaysia Website Awards 2016 (MWA) is a prestigious award program that recognizes the excellence in performance, talent and efforts of web designers, web developers and web-related agencies in the country. Figure 3.1.2 Examples of name attributes and value attributes goo.gl/ 0xKutg Figure 3.1.1(b) Example of output based on Figure 3.1.1(a) Client scripting language Source: www.mwa.my/ 2016/ CHAPTER 3 Web-Based Programming 125 Machine Translated by Google
xml 126 Computer Science Form 5 Java is a language faq/ java_javascript. Figure 3.1.4 Example of HTML with CSS and output com/ en/ download/ Source: https:// www.java. Figure 3.1.5 JavaScript tags object oriented programming while JavaScript is an object oriented scripting language. { </style> document.write("Welcome"); } <script> <head> <title>Using CSS</title> <body> </head> <html> </script> </body> h1 </html> <h1>School Website</h1> <style> color: blue; JavaScript code will be written together in HTML code. If the HTML does not have any scripts written in it, the browser 2 Implicit embedding a task based on the request received from the client. 1 Explicit embedding JavaScript provides programming capabilities for processing JavaScript code is written between the tags '<script>' and '</script>' as found in tags in HTML in Figure 3.1.5. The language used is known as a scripting language. Among the scripting languages that are often used are JavaScript, PHP and ASP. There are two ways JavaScript code is written in HTML: will produce a website based on the HTML code. Do you know the language used for clients to interact with the website? Interaction refers to a request to obtain information from a website. The programming language will process any client request through a website. Introduction to JavaScript You Did you know? \Examples of CSS in HTML Machine Translated by Google
function f1() document.write("5"); </body> </html> <p>Number:</p> </head> f1(); <script src="myScript.js"> <p>Number:</p> 5 <head> <html> </html> <p>Number:</p> { </script> <html> } document.write("5"); <script> </html> </script> </body> <body> </script> <script type="text/javascript"> <title>External Script</title> <body> <body> </body> <html> File “myScript.js” (script) HTML (with scripts) HTML HTML (without script) EXAMPLE 2 EXAMPLE 1 Refer to the JavaScript code in the myScript.js file Call and execute the code Figure 3.1.6 HTML program, JavaScript and output example (Explicit Embedding) JavaScript code to print “5” in HTML document (web page) CHAPTER 3 Web-Based Programming 127 f1( ) in the myScript.js file software Example 2 uses the implicit embedding method, which is to put the JavaScript code in its own file that has the extension ".js" such as myScript.js and will be called if it wants to be used. If you want to use the file, refer to the name of the file in the source attribute and call f1() for code execution, i.e. src=”myScript.js”. The file contains the JavaScript code in the f1() subroutine. Example 1 uses the explicit embedding method, that is, the JavaScript code is placed in or together with the HTML code. Examples of HTML content (without script) and HTML content (with script) are shown in Figure 3.1.6. An example of the content of the ".js" file along with the script and HTML content (which refers to the ".js" file) is shown in Figure 3.1.7. Machine Translated by Google
Figure 3.1.7 HTML program, JavaScript and output example (Implicit Embedding) Figure 3.1.8 Client/Server application concept 128 Computer Science Form 5 Web design is developed on a client/server basis. The client or client is usually a browser used by users to browse the web using either a mobile device, laptop or desktop computer. The server application (server) can be anywhere in the world that acts to process requests or send web pages requested by the client. Another component of a website is the database used to store data. Figure 3.1.8 shows the concept of client/server applications used in web design. Sample output (Client/Server) Client/Server Application Concept Web server Internet Customers Request web Site web Site pages Request Request web address web Enter pages Site Machine Translated by Google
The concept of web scripting is widely used in web development. Scripting is a small part of the program that is executed based on the user's interaction with the website. This scripting is placed in two parts namely client side scripting and server side scripting. Server scripting works on the back end of web development and is executed by the web server, while client scripting works on the front end of web development and is executed by the web browser. Figure 3.1.9 shows the implementation of client scripting and server scripting. 1 2 4 5 There are generally two types of websites, namely static websites and dynamic websites. A website designed using Hypertext Markup Language (HTML) only is a static website that is the content displayed on each page according to the HTML tags used. A dynamic website is a website designed using server scripting such as ASP or PHP that gives the website owner the ability to easily update website content. Table 3.1.1 shows the difference between a static website and a dynamic website. 3 Static website Built using HTML only Built using server scripting Example: Upcoming activities displayed on the main page of the website that change according to the calendar date Example: a website that displays the background of the organization The content of the display can be called from the database or according to the user's actions The HTML used Dynamic website Display content by tag Scripting Language You Did you know? client scripting: •Replace or CHAPTER 3 Web-Based Programming 129 Use of client scripting language and server scripting goo.gl/ Tu3pXe display information. Figure 3.1.9 Implementation of client scripting and server scripting Table 3.1.1 The difference between a static website and a dynamic website update part of the website. •Checking input by language • Changing styles and Other tasks that can be performed •Apply browser which is displayed dynamically. from users. element position Computer User Implementation of client scripting CSS JavaScript Implementation of server scripting http://www.contoh.com HTML Database Web browser Server Machine Translated by Google
Client Scripting Language •Web manager Progress in •Web designer web •Web developer •Writer or editor create the following professions: 130 Computer Science Form 5 •Graphic designer The Internet has 3 The web server will process the computer user's request by executing the server scripting language. Server scripting works at the back end of web development while client scripting works at the front end of web development. Figure 3.1.9 shows an example of processing by scripting on the client. 5 The web browser will translate and execute the content of the HTML page including any client scripting available on the web to be read by computer users. Every time we add or subtract an item, the total cost will change automatically. Changes that occur are actually processed by client scripting. Figure 3.1.10 shows an example of the process implemented by client scripting through the use of a shopping cart. server scripting with a description as follows: 1 A computer user types a URL into a web browser. The use of client scripting in the web has provided the ability for websites to change or respond to web content according to the input provided by the user faster. Client scripting language generally refers to computer programs in the web that are executed on the client computer. This program is designed to manipulate and display the content of web pages that have been downloaded in the client's computer. Figure 3.1.9 shows the client scripting language implementation and Additionally, client scripting is also used to perform simple task tasks such as changing elements. For example, font type or web background color without involving the server. processed. Client scripting is typically used to process input validation entered by users when filling out online forms. 2 The web browser forwards the URL to the web server to Another example of the use of client scripting is such as the use of shopping carts in websites that offer online purchases to users. Usually we will use a shopping cart to list selected items. 4 The server will return the results of the server scripting execution to the web browser by sending a specific web page based on the URL typed by the computer user. Career Science Computer Machine Translated by Google
Fast execution of tasks without server computer involvement Websites become more interactive Web developers have the ability to determine the design and features of the web Improves web usability for browsers that support a variety of client scripting languages However, not all tasks can be performed by client scripting languages. Tasks that involve databases on the web server side or access to system files located on the web server are examples of tasks that cannot be performed by client scripting languages. Among the advantages of the client scripting language is as shown in Figure 3.1.11. The purchase amount will change every time the buyer's item quantity changes Figure 3.1.10 Example of the process implemented by client scripting through the use of a shopping cart from mphonline.com language Figure 3.1.11 Advantages of client scripting languages CHAPTER 3 Web-Based Programming 131 scripting Advantage Machine Translated by Google
1 List FOUR (4) commonly used client scripting languages. Sort select By using a search engine such as Google or Yahoo!: (Bubble sort) client scripting. Which client scripting language is the most popular? Objective: Identify technology related to language 2 Based on your answer to question 1, which of the four Observations on Technologies related to Client Scripting Languages (Selection sort) Foam sorting 1 In ascending order When developing a client scripting program, students can perform sorting, searching, finding the maximum, minimum and calculating the average and number of elements in a program. A list of elements is better sorted to facilitate the search so that the display will be neater. A computer program needs to follow a sequence of instructions to perform the sorting process. The sorting process consists of several types. However, only two types of sorting processes are discussed in this chapter, namely bubble sort and selection sort as shown in Figure 3.1.12. 2 Descending order Sorting can be done by: Example: 1, 2, 3 Example: 3, 2, 1 There are two types of sorting in the field of Computer Science, namely external and internal. Figure 3.1.12 Types of sorting process 132 Computer Science Form 5 w3schools.in/ data bubble-sorts/ http:// www. goo.gl/ GxsxL6 kidscodecs.com/ Bubble sort Source: Source: https:// www. •Sort insertion (Merge sort) (Quick sort) •Quick sorting • Merge sort structures-tutorial/ sorting-techniques used. Different sorting methods have different costs and time to process them. There are several other types in the sorting process such as: (Insertion sort) If the data is loaded into the memory space, the sorting is internal sorting while if the data is too large, it is external sorting You Did you know? Did you know? You 3.1.2 Programs and Flowcharts for Client Scripting Languages Sorting Process Individual Work ACTIVITY 1 Machine Translated by Google
EXAMPLE 3 Change position { CHAPTER 3 Web-Based Programming 133 } <script> wrong if (no[j] > no[j+1]) one by one Compare elements temporary var = no[0]; </script> Figure 3.1.14 Program and output for foam sorting (Ascending order) for(i=0; i<billNumber-1; i++) no[j+1] = temporary; Change } for(j=0; j<bilNumber-i-1; j++) element <html> var no = [5,1,4,3,2]; var bilNumber = no.length, i, j; Figure 3.1.13 Foam sorting process { document.write (no); </body> Get an unsorted list Appeal while = no[j]; position if position no[j] = no[j+1]; no.length to count the number of numbers in the list } { side by side <body> </html> Bubble sort Example 3 shows a list of numbers sorted in ascending order using the bubble sort method. The JavaScript program and output for bubble sort is shown in Figure 3.1.14. Bubble sort is a simple algorithm in sorting a list which is performed one by one in a row by comparing adjacent elements and will change position (swap) in the event of a wrong order. Figure 3.1.13 shows the foam sorting process. There are two comparison processes that can be implemented to change the position, namely: 2 Compare whether the first element is greater than the second element (for ascending order) 1 Compare whether the first element is smaller than the second element (for descending order) Machine Translated by Google
Sorting by bubble sort is suitable when the number in the element is small since the comparison needs to be made one by one until the end of the list. Therefore, foam sorting is suitable for learning purposes and not for real applications. However, this sort can still be used when you want to organize books in a small bookshelf. One of the advantages of using the bubble sort algorithm to sort is that this sort is easier to build and easier to understand. Advantages of Foam Sorting The flow chart for Example 3 is shown in Figure 3.1.15. Mind Test Mind Test no[j] > no[j+1]? Change position Figure 3.1.15 Flow chart for foam sorting (ascending order) FAKE billNumber = no.length FAKE to the right. In your opinion, can foam sorting be done from Try to do the bubble sort process using the above data. Good luck! i = 0 i = i + 1 goo.gl/ BNYc7M FAKE TRUE Start no[j+1] = temporary Display no Compare elements no = 5,1,4,3,2 TRUE 134 Computer Science Form 5 j < bilNumber-i-1? while = no[0] TRUE Data Structure – j = j + 1 As you have learned, bubble sorting is done from the left right to left? Think about it temporary = no[j] Get an unsorted list i < billNumber-1? no[j] = no[j+1] and discuss it together with your friends. 9 8 7 5 1 4 no.length to count the number of numbers in the list j = 0 Finished Bubble Sort Algorithm Machine Translated by Google
EXAMPLE 4 temporary var = codeBook[0]; } { var bilKod = kodBuku.length, i, j; document.write (“<br>List of book codes after sorting by + codeBook); if (Bookcode[j] < Bookcode[j+1]) temporary = codeBook[j]; The JavaScript program and output are shown in Figure 3.1.16. <html> document.write("List of book codes before sorting: " } Example 4 shows a list of book codes sorted in descending order using the bubble sort method. descending: " for(i=0; i<numberCode-1; i++) <script> { codeBook[j+1] = temporary; + codeBook); <body> codeBook[j] = codeBook[j+1]; </script> </body> } var codeBook = [110, 102, 105, 101, 100]; { </html> for (j=0; j<bilCode-i-1; j++) codeBook.length to count the number of codeBooks in the list Figure 3.1.16 JavaScript program and output for bubble sort (descending order) CHAPTER 3 Web-Based Programming 135 Change position Compare elements Get an unsorted list Machine Translated by Google
The flow chart for Example 4 is shown in Figure 3.1.17. Display the text "Book code list before sorting:" FAKE Display the book code Compare elements i = 0 Figure 3.1.17 Flow chart for foam sorting (descending order) TRUE FAKE Get an unsorted list codeBook.length to count the number of codeBooks in the list TRUE i < billCode-1? Start bookcode[j] < bookcode[j+1]? Finished 136 Computer Science Form 5 FAKE bilKod = kodBuku.temporary length = kodBuku[0] j < bilKod-i-1? temporary = Bookcode[j] Bookcode[j] = Bookcode[j+1] Bookcode[j+1] = temporary j = 0 codeBook = 110,102,105,101,100 TRUE Change position Display the book code j = j + 1 Display the text "List of book codes after sorting in descending order:" i = i + 1 Machine Translated by Google
ACTIVITY 2 Individual Work if (shoesize[j] > shoesize[j+1]) { <html> } document.write(“<br>Shoe size list after sorting: “ for (j=0; j<bilShoe-i-1; j++) { } CHAPTER 3 Web-Based Programming 137 for(i=0; i<numberShoes-1; i++) { } shoe size); </ script> </ body> </ html> + sizeShoes); while = shoesize[j]; shoesize[j] = shoesize[j+1]; sizeShoes[j+1] = temporary; + <body> <script> var shoe size = [7,7,5,3,4,6,7]; var bilShoes = sizeShoes.length, i, j; temporary var = shoesize[0]; document.write("List of shoes before sorting: " Objective: Show the steps to sort a list of values in ascending order using the bubble sort method. Part 2: 1 Take a new piece of paper. 5 Make sure that the following display is generated. 2 Type the given HTML and JavaScript program: 3 Save as Activity2.html 4 Open the Activity2.html file through a browser such as Internet Explorer or Google Chrome. Bubble Sort Flow Chart Part 1: 1 Open Notepad software. from smallest to largest (in ascending order). 2 Draw a flow chart for the program in Part 1, which is the program to sort the students' shoe sizes Do this activity in the computer lab. Machine Translated by Google
EXAMPLE 5 no[i] = no[min]; mean = i; for (j = i + 1; j<bilNumber; j++) { 138 Computer Science Form 5 } <script> Sets the smallest value Change position } var bilNumber = no.length; document.write(no); </html> Get an unsorted list while = no[i]; if the sequence is wrong no[min] = temporary; if (no[j] < no[min]) { list <html> var no = [5,1,4,3,2], i, j, min, while; mean = j; } </script> for (i = 0; i < bilNumber-1; i++) { Compare an element with the smallest element/ } largest than other elements in if (min != i) { no.length to count the number of numbers in the list Change position Compare elements Figure 3.1.18 Select sort process <body> </body> Selection sort Example 5 shows a list of numbers sorted in ascending order using the select sort method. The JavaScript program and output are shown in Figure 3.1.19. There are two comparison processes that can be implemented to change the position, namely: Selection sort or selection sort is an algorithm in sorting a list that can involve the process as in Figure 3.1.18. (for ascending order) (for descending order) 1 Comparison of elements referred to whether larger than the smallest element 2 Comparison of elements referred to whether smaller than the largest element Machine Translated by Google
FAKE Finished j = i + 1 FAKE Compare elements Get an unsorted list TRUE i = i + 1 FAKE Sets the smallest value j = j + 1 no.length to count the number of numbers in the list Display no Figure 3.1.20 Select sort flow chart (ascending order) TRUE billNumber = no.length Change TRUE Figure 3.1.19 JavaScript program and output for select sort (ascending order) i < billNumber-1? no[h] < no[min]? j < bilNumber? Start TRUE mean = j no = 5,1,4,3,2 temporary = no[i] no[i] = no[min] no[min] = temporary Sets the smallest value mean = i mine! = i? FAKE i = 0 position CHAPTER 3 Web-Based Programming 139 The flow chart for Example 5 is shown in Figure 3.1.20. Machine Translated by Google
EXAMPLE 6 if (height[h] < height[min]) height[i] = height[min]; } document.write(“<br>List of student heights after for(i = 0; i<billHeight-1; i++) <html> Sets the smallest value Selection Sorting in } <body> Sets the smallest value sort select ascending: “ </script> Change position var bilHeight = height.length; { Java while = height[i]; height[min] = temporary; { height.length to count the number of heights in the list Figure 3.1.21 JavaScript program and output for select sort (ascending order) { Get an unsorted list mean = j; + height); 140 Computer Science Form 5 </body> mean = i; Program: Implement <script> } goo.gl/ BWLJfT document.write("List of student height before sorting: + height); if (min ! = i) { var height = [6,7,7,6,5,6], i, j, mean, while; for (j = i + 1; j < bilHeight; j++) Compare elements " } </html> Advantages of Select Sort Example 6 shows a list of student heights sorted in ascending order using the select sort method. The JavaScript program and output are shown in Figure 3.1.21. The selection sort algorithm is suitable for sorting if the number of elements is small. However, selective sorting can still be used when small numbers are involved, such as arranging students according to height while queuing in their respective classes. Machine Translated by Google
The flow chart for Example 6 is shown in Figure 3.1.22. j = j + 1 Show high CHAPTER 3 Web-Based Programming 141 j = i + 1 i = 0 height[j] < height[min]? height.length to count the number of student heights in the list TRUE i < bilHeightÿ1? Start FAKE Sets the smallest value mean! = i? Display the text "List of student height before sorting:" Display the text "List of student heights after sorting in ascending order:" Finished TRUE height = 6,7,7,6,5,6 temporary = height[i] height[i] = height[min] height[min] = temporary TRUE FAKE Compare elements j < bilHeight? Get an unsorted list i = i + 1 Sets the smallest value Show high mean = i mean = j TRUE FAKE FAKE billHeight = height.length Change position Figure 3.1.22 Select sort flow chart (ascending order) Machine Translated by Google
ACTIVITY 3 Individual Work temporary = pencil[i]; for (j = i + 1; j < bilPencil; j++) </body> } document.write("List of pencil numbers { } for(i = 0; i < bilPencil-1; i++) document.write(“<br>List of pencil numbers 142 Computer Science Form 5 </script> <body> mean = i; After learning both types of bubble sort and selection sort, which is your choice to sort data? Why? { pencil[i] = pencil[min]; { var pencil = [2,1,3,3,1], i, j, min, temporary; </html> of 5 students before sorting: " pencil); mean = j; } after sort select: “ { } State the differences you can identify between the two types of sorting. <script> if (min != j) <html> pencil[min] = temporary; + if (pencil[j] < pencil[min]) var bilPencil = pencil.length; + pencil); Mind Test list of values in ascending order using Selection Sort. 3 Save as Activity3.html 2 Type the given HTML and JavaScript program: Objective: Show the steps to sort one 1 Open the Notepad software. Selection Sort Flow Chart Explorer or Google Chrome. Part 1: 4 Open the Activity3.html file through a web browser such as the Internet Do this activity in the computer lab. Machine Translated by Google