Chapter 3 : Web Technology II : Computer Sci NEB Class 12

1. Introduction

Web technology refers to the tools, programming languages, protocols, and standards utilized for the development and operation of websites and web applications. It encompasses a broad spectrum of technologies such as HTML, CSS, JavaScript, server-side scripting languages like PHP, database management systems like MySQL. These technologies work together to create interactive and dynamic web experiences, allowing users to access information, communicate, transact, and collaborate over the internet. Web technology continues to evolve rapidly, enabling the creation of increasingly sophisticated and powerful web-based solutions.

Web development is the process of building and maintaining websites and web applications. It involves tasks like designing web pages, coding functionalities, managing databases, and configuring servers. Front-end development focuses on what users see and interact with, while back-end development deals with behind-the-scenes functionality.

2. Server side and Client Side Scripting

Client-side scripting

It is a scripting that runs on a client web browser.
It deals with the user interface and lighter functionality.
Response from a client-side script is faster.
It cannot connect to the databases on the web server.
Examples of client-side scripting languages: Javascript, VBScript, etc.

Server side Scripting

It is normally used to handle browser requests.
The server executes the script and returns to the browser.
Response from a server-side script is slower because the scripts are processed remotely.
Server-side scripting is used to connect to the database that is on the web server.
Example of server-side scripting languages: PHP, Jsp, Asp.Net Asp, etc.

3. Introduction of internet technology

Internet technology refers to the tools, systems, and protocols that make the internet work. It's like the behind-the-scenes magic that lets us send emails, browse websites, watch videos, and connect with people all over the world. This technology includes things like routers, servers, cables, and wireless networks, as well as standards and rules that govern how data is transmitted and received. It's what allows our devices to communicate with each other and access information online. Without internet technology, we wouldn't have the amazing digital world we enjoy today.

4. Adding Java script to HTML page

There are generally three ways to add java script to a HTML page.

Embedding Code:

You can include JavaScript directly within the HTML file using the <script> tag. This method is simple and straightforward, but it's not ideal for large amounts of code or reusability.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inline JavaScript</title>
</head>
<body>
    <h1>Hello, Inline JavaScript!</h1>
    <!--Embedding code -->
    <script>
        alert("This is JavaScript!");
    </script>
</body>
</html>

Inline Code:

You can attach JavaScript code directly to HTML elements using event attributes like onclick, onmouseover, etc. This method is useful for adding interactivity to specific elements, but it can clutter the HTML and may not be ideal for larger projects.

<!DOCTYPE html>
<head>
    <title>Event Attributes</title>
</head>
<body>
    <h1>Hello, Event Attributes!</h1>
    <!-- Using event attribute -->
    <button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

External Code:

You can also link an external JavaScript file to your HTML document using the <script> tag's src attribute. This method allows you to separate your JavaScript code into a separate file, promoting better organization and reusability.

HTML File (e.g., index.html)

<!DOCTYPE html>
<head>
    <title>External JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello, External JavaScript!</h1>
</body>
</html>

JavaScript File (script.js)

// script.js
alert("This is an external JavaScript!");

5. Java script fundamental

Major features of Java script

Javascript is an object-based scripting language.
It gives the users more control over the browser.
It is light weighted.
Javascript is case sensitive.
It offers validation of user's input.
It offers event handling.
It is supportable in several operating systems including, windows, MacOs, etc.

Importance of Javascript

Javascript are less complex and can be targeted for specific applications.
Search engine, ecommerce, social media and phone apps would not be possible without Javascript.
Javascript is only scripting language which is universally supported.
It has opened many choices to the developers for Server-side.
An important part of Javascript is the ability to create new function within scripts using function keyword.

6. Java Script Data types

Java script provides different data types to hold different types of values. There are two types of data types in java script.

a) primitive data type

primitive data types can hold one value at a time. There are five types of primitive in Javascript. They are as follows:

Data type	Description
String	Represents a sequence of characters e.g. "hello"
Number	Represents numeric values e.g. 100
Boolean	Represents Boolean value either false or true
undefined	Represents an undefined value
Null	Represents null i.e, no value at all

b) Non-primitive data type

Non-primitive data types can hold collections of values and more complex entities. The non-primitive data types are as follows:

Data type	Description
Object	Represents an instance through which we can access members
Array	Represents a group of similar values
RegExp	Represents a regular expression

7. Variables and operators

Variable

A variable is an identifier whose value may change during the execution of the program. It is simply a name of storage location. There are two types of variables in Javascript:

a. Local variable

A Javascript local variable is defined inside the block of function. It is accessible within the function or block only. For example:

<script>
    function sum() {
        var x = 5; // local variable
        var y = 10; // local variable
        var sum = x + y;
        document.write("The sum of " + x + " and " + y + " is " + sum);
    }
    sum(); // calling Javascript function
</script>

b. Global variable

A Javascript variable is accessible from any function. A variable i.e. declared outside function or declared with a window object is known as a global variable. For example:

<script>
    var x = 5; // global variable
    var y = 10; // global variable
    function sum() {
        var sum = x + y;
        document.write("The sum of " + x + " and " + y + " is " + sum);
    }
    sum(); // calling Javascript function
</script>

Operators

Operator is a symbol that signifies the operations. operator is used in between two operands. For e.g:- 5+2, where 5 and 2 are operands and '+' is the operator. The different types of Javascript operations are as follows:

a) Arithmetic operators

Arithmetic operators take numerical values as their operands and return a single numerical value. Arithmetic operators can perform mathematical operations. some Arithmetic operators are +, -, *, /, %, ++, --, etc.

b) Comparison (Relational) operators

Comparison operators are used to compare two operands. Its result is Boolean, either true or false. some comparison operators are equal(==), not equal(!=), greater than(>), less than(<), greater than equal(>=), less than equal(<=), etc.

c) Logical operators

logical operators are used for logical operations. It takes Boolean operands and gives Boolean result. The && (logical AND) and || (logical OR) operators take two operands and ! (logical NOT) operator takes a single operand.

d) Conditional Operators (Ternary operator)

It is alternative to if-else conditions in javascript. Unlike other operators, it usually takes three expressions. (Condition ? first expression : second expression). It has two operators, the "?" (Question mark) and ":" (colon), which separates the condition from the result. If the condition is true, it will run and gives the first expression as result and if the condition is false, it runs and gives the second expression as result.

e) Assignment Operators

Assignment operator is a symbol used to assign a value or a result of an expression to an identifier. some assignment operators are (=, +=, -=, %=, &=).

8. Functions and control structure

Functions

In JavaScript, functions are blocks of reusable code that can be defined and then invoked or called to perform a specific task or calculate a value.

Control Structures

Conditional Statements (if, if-else, if-else if-else)

Conditional statements are used to perform different actions based on different conditions. They allow your code to make decisions and execute different blocks of code depending on whether a condition is true or false.

Looping Statements (for, while, do-while)

The Javascript loops are used to iterate or repeat the execution of code using for, while, do-while loop. There are three types of loops in Javascript.

a) for loop

for loop is used when the number of repetition are known. It consists of three expressions: Initialization, condition, and increment/decrement are the three expressions of for loop.

For eg. Javascript program to display the first 5 natural numbers using for loop.

<script>
    for (i = 1; i <= 5; i++) {
        document.write(i);
    }
</script>
<!-- Output: 12345 -->

b) while loop

while loop is used when the number of repetition is unknown. It consists only one expression. i.e. condition. once condition becomes false, the loop will be terminated.

For eg. Javascript program to display the first 5 natural numbers using while loop.

<script>
    var i = 1;
    while (i <= 5) {
        document.write(i);
        i++;
    }
</script>
<!-- Output: 12345 -->

c) do-while loop

do-while loop is similar to the while loop. The only difference is, it checks the condition at the end of the loop. This means that the loop will always be executed at least once.

For eg. Javascript program to display the first 5 natural numbers using do-while loop.

<script>
    var i = 1;
    do {
        document.write(i);
        i++;
    } while (i <= 5);
</script>
<!-- Output: 12345 -->

JavaScript Examples

Write a function to add any two numbers in Javascript.

<html>
<head>
    <title>sum</title>
</head>
<body>
    <script>
        var x = 5;
        var y = 10;
        function sum() {
            var sum = x + y;
            document.write("The sum of " + x + " and " + y + " is " + sum);
        }
        sum(); // calling Javascript function
    </script>
</body>
</html>
<!-- output: The sum of 5 and 10 is 15 -->

Write a function to print first five natural numbers in Javascript.

<html>
<head>
    <title>Natural numbers</title>
</head>
<body>
    <script>
        function print() {
            var i;
            for (i = 1; i <= 5; i++) {
                document.write(i);
            }
        }
        print(); // calling Javascript function
    </script>
</body>
</html>
<!-- output: 12345 -->

Write a function to find area of a circle in Javascript.

<html>
<head>
    <title>Area of circle</title>
</head>
<body>
    <script>
        function AOC() {
            var pi = 3.14;
            var r = parseInt(prompt("enter a radius"));
            var area = pi * r * r;
            alert("Area of circle is " + area);
        }
        AOC(); // calling Javascript function
    </script>
</body>
</html>

Write a function to check whether the given number is odd or even.

<html>
<head>
    <title>check odd or even</title>
</head>
<body>
    <script>
        function check() {
            var n = parseInt(prompt("enter a number"));
            if (n % 2 == 0) {
                alert("even number");
            } else {
                alert("odd number");
            }
        }
        check(); // calling Javascript function
    </script>
</body>
</html>

Write a Javascript program to calculate the Simple interest using principle, time & rate.

<html>
<head>
    <title>Simple interest</title>
</head>
<body>
    <script>
        function simple_interest() {
            var p = parseInt(prompt("Enter principle"));
            var t = parseInt(prompt("Enter time"));
            var r = parseInt(prompt("Enter rate"));
            var SI = (p * t * r) / 100;
            alert("The simple interest is " + SI);
        }
        simple_interest(); // calling javascript function
    </script>
</body>
</html>

Write a Javascript function to find the greatest number among three numbers.

<html>
<head>
    <title>greatest number</title>
</head>
<body>
    <script>
        function greatest() {
            var a = parseInt(prompt("enter first number"));
            var b = parseInt(prompt("enter second number"));
            var c = parseInt(prompt("enter third number"));
            if (a > b && a > c) {
                alert("The greatest number is" + a);
            } else if (b > a && b > c) {
                alert("The greatest number is" + b);
            } else {
                alert("The greatest number is" + c);
            }
        }
        greatest();
    </script>
</body>
</html>

Write a javascript function to find factorial of a given number.

<html>
<head>
    <title>factorial</title>
</head>
<body>
    <script>
        function factorial() {
            var n = parseInt(prompt("enter a number"));
            var i, mul = 1;
            for (i = 1; i <= n; i++) {
                mul = mul * i;
            }
            alert("The factorial is " + mul);
        }
        factorial();
    </script>
</body>
</html>

9. Object based programming with Java Script and Event handling

Object based Programming in JavaScript

Object-based programming in JavaScript refers to a programming paradigm where objects are the primary building blocks used to structure and organize code. JavaScript is an object-based language, which means that it revolves around the concept of objects. An object in JavaScript is a collection of key-value pairs, where keys are strings (also called properties) and values can be of any data type, including other objects, functions, arrays, etc.

Event Handling

Javascript's interaction with HTML is handled through events that occur when the user of the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that clicks to an event. Other examples include events like pressing any key, closing window, resizing a window. Developers can use these events to execute javascript coded responses, which cause buttons to close windows, message to be displayed to users, data to be validated, and virtually any other types of response imaginable. some events are onclick, onsubmit, onmouseover and onmouseout, onfocus and onblur, etc.

For example:

<html>
<head>
    <script>
        function sayHello() {
            alert("Hello world");
        }
    </script>
</head>
<body>
    <p>click the button below to see the result</p>
    <button onclick="sayHello()">Click</button>
</body>
</html>

11. Form validation, jQuery

Form Validation in JavaScript

Form validation in JavaScript is the process of ensuring that user input in a form meets specified criteria before it's submitted to the server. This helps improve the quality of data submitted and provides a better user experience by preventing invalid submissions.

<HTML>
<HEAD>
    <TITLE>Form Validation</TITLE>
</HEAD>
<BODY>
    <FORM>
        Username: <INPUT type="text" id="username"> <br/>
        Password: <INPUT type="password" id="password"> <br/>
        <INPUT type="submit" onclick="validation()">
    </FORM>
    <SCRIPT>
        function validation() {
            var user = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
            if (user == "" || pass == "") {
                alert("Form cannot be empty, Please fill up properly!!");
            }
        }
    </SCRIPT>
</BODY>
</HTML>

jQuery

jQuery is a fast, small, and feature-rich JavaScript library that simplifies various tasks such as HTML document traversal and manipulation, event handling, animation, and AJAX interactions for rapid web development. It provides an easy-to-use API that abstracts away many cross-browser inconsistencies and complexities, making it easier to write JavaScript code that works consistently across different browsers.

12. Server Side Scripting using PHP

PHP is a server-side scripting language designed to be used for web purposes. PHP is so popular because it's very simple to learn, code and deploy on the server, hence it has been the first choice for beginners for decades.

Benefits of PHP

a. open source
b. Inexpensive hosting and setup
c. cross-platform
d. client applications don't need PHP installed
e. Lots of free libraries and packages available for use.

13. Introduction to PHP: Hardware and Software Requirements

Hardware Requirements:

A modern computer with at least 2 GB of RAM and a multi-core processor.
Around 10 GB of free disk space for storing files and databases.

Software Requirements:

Web server (e.g., Apache, Nginx)
PHP interpreter
MySQL Database
Browser

14. Object oriented programming with server side scripting

OOP stands for Object-Oriented Programming. It's a programming paradigm based on the concept of "objects," which can contain data (attributes) and code (methods). PHP is an object oriented scripting language. Three major features of OOP are:

Encapsulation: The bundling of data and methods that operate on the data into a single unit (class). It hides the internal state of an object. In PHP, this is achieved using "get" and "set" methods and access modifiers (public, private, protected).
Inheritance: A mechanism where a new class (subclass) is created from an existing class (superclass), inheriting its properties and behaviors. In PHP, this is achieved using the extends keyword.
Polymorphism: Allows objects of different classes to be treated as objects of a common superclass, enabling methods to behave differently based on the object they are operating on. In PHP, this can be achieved through method overriding and using interfaces with the implements keyword.

15. Basic PHP syntax

PHP code is embedded within HTML, typically enclosed in <?php ... ?> tags. Variables in PHP start with a dollar sign $ followed by the variable name.

Write a php program to display "hello world"

<?php
    echo "hello world";
?>

16. PHP data types

PHP supports several data types, which can be broadly categorized into scalar types, compound types, and special types.

Scalar Types:

Integer: Whole numbers without a decimal point. e.g., $num = 10;
Float (or Double): Numbers with a decimal point. e.g., $num = 10.5;
String: Sequences of characters. e.g., $str = "Hello, world!";
Boolean: Represents two possible states: true or false. e.g., $is_active = true;

Compound Types:

Array: Stores multiple values in a single variable.
Object: Instances of classes, which can contain properties and methods.

Special Types:

NULL: Represents a variable with no value.
Resource: A special variable holding a reference to an external resource (like a database connection).

17. Basic Programming in PHP

Write a php program to add two numbers.

<?php
    $x = 5;
    $y = 10;
    $sum = $x + $y;
    echo "The sum of $x and $y is $sum";
?>

Write a PHP program to check whether the mark is "pass" or "fail".

<?php
    $mark = 20;
    if ($mark >= 40) {
        echo "pass";
    } else {
        echo "fail";
    }
?>

Write a PHP program to check whether the number is "odd" or "even".

<?php
    $n = 25;
    if ($n % 2 == 0) {
        echo "even";
    } else {
        echo "odd";
    }
?>

Write a PHP program to find the factorial of a number.

<?php
    $n = 4;
    $mul = 1;
    for ($i = 1; $i <= $n; $i++) {
        $mul = $mul * $i;
    }
    echo "The factorial of $n is $mul";
?>

Write a php program to find the sum of two numbers (alternate method using HTML).

<html>
<body>
    <form method="post">
        First number: <br>
        <input type="number" name="a"><br>
        Second number: <br>
        <input type="number" name="b"><br>
        <input type="submit" name="submit">
    </form>
    <?php
        if (isset($_POST['submit'])) {
            $a = $_POST['a'];
            $b = $_POST['b'];
            $sum = $a + $b;
            echo "the sum of $a and $b is $sum";
        }
    ?>
</body>
</html>

18. Operators

In PHP, operators are special symbols or keywords used to perform operations on variables and values.

Arithmetic Operators: +, -, *, /, % (modulus)
Assignment Operators: =, +=, -=, *=, /=
Comparison Operators: ==, ===, !=, >, <, >=, <=
Logical Operators: and (&&), or (||), not (!)
Increment/Decrement Operators: ++, --

20. Database Connectivity

PHP can connect to and manipulate databases. MySQL is the most popular database system used with PHP. To work with a MySQL database, we need to connect to the database server.

How do you connect MySQL database with php? Demonstrate with example.

<?php
    //connecting to the database
    $servername = "localhost";
    $username = "root";
    $password = "";

    // creating a connection
    $conn = mysqli_connect($servername, $username, $password);

    // die if the connection was not successful
    if (!$conn) {
        die("Sorry, the connection was not successful: " . mysqli_connect_error());
    } else {
        echo "The connection was successful";
    }

    mysqli_close($conn);
?>

21-25. Database Operations (CRUD)

CRUD stands for Create, Read, Update, and Delete. These are the four basic functions of persistent storage.

Create SQL database with server side scripting

<?php
    //connecting to the database
    $servername = "localhost";
    $username = "root";
    $password = "";

    //creating a connection
    $conn = mysqli_connect($servername, $username, $password);
    
    //die if the connection was not successful
    if (!$conn) {
        die("sorry, the connection was not successful: " . mysqli_connect_error());
    }
    echo "The connection was successful<br>";

    // creating a database
    $sql = "CREATE DATABASE studentDB";
    $result = mysqli_query($conn, $sql);
    
    // checking database creation
    if ($result) {
        echo "Database created successfully";
    } else {
        echo "Database is not created successfully. " . mysqli_error($conn);
    }

    mysqli_close($conn);
?>

Create table with server-side scripting

<?php
    // connecting to the database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $database = "studentdb";

    // creating a connection
    $conn = mysqli_connect($servername, $username, $password, $database);
    
    // die if the connection was not successful
    if (!$conn) {
        die("sorry, the connection was not successful: " . mysqli_connect_error());
    }
    echo "the connection was successful<br>";

    // creating a table in the database
    $sql = "CREATE TABLE student (firstname varchar(55), lastname varchar(55), mark int, email varchar(55))";
    $result = mysqli_query($conn, $sql);
    
    // checking table creation
    if ($result) {
        echo "table created successfully";
    } else {
        echo "table is not created successfully. " . mysqli_error($conn);
    }
    
    mysqli_close($conn);
?>

Insert data into the table

<?php
    // connecting to the database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $database = "studentdb";

    // creating a connection
    $conn = mysqli_connect($servername, $username, $password, $database);
    
    // die if the connection was not successful
    if (!$conn) {
        die("sorry, the connection was not successful: " . mysqli_connect_error());
    }
    echo "The connection was successful <br>";

    // inserting data in the table
    $sql = "INSERT INTO student (firstname, lastname, mark, email) VALUES('anil','thapa','99','[email protected]')";
    $result = mysqli_query($conn, $sql);
    
    // Checking whether the data is inserted or not.
    if ($result) {
        echo "Data inserted successfully";
    } else {
        echo "Data is not inserted successfully. " . mysqli_error($conn);
    }
    
    mysqli_close($conn);
?>

Select and display data from the table

<?php
    // connecting to the database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $database = "studentdb";

    // creating a connection
    $conn = mysqli_connect($servername, $username, $password, $database);
    
    // die if the connection was not successful
    if (!$conn) {
        die("sorry, the connection was not successful: " . mysqli_connect_error());
    }
    echo "The connection was successful<br>";

    // selecting all data from the table
    $sql = "SELECT * FROM student";
    $result = mysqli_query($conn, $sql);
    
    // total number of retrieved records
    $num = mysqli_num_rows($result);
    
    // Displaying all the retrieved records
    echo "The records found in the database are: <br>";
    
    if ($num > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            echo "firstname = " . $row['firstname'] . "<br>";
            echo "lastname = " . $row['lastname'] . "<br>";
            echo "mark = " . $row['mark'] . "<br>";
            echo "email = " . $row['email'] . "<br>";
            echo "<br><br>";
        }
    }
    
    mysqli_close($conn);
?>

Computer Science

Computer Science