Grade XII Unit 3. Web Technology II

UNIT 3. Web Technology II

Introduction to Web Technology

The Web, or World Wide Web (WWW), is a network of interconnected web servers across the globe through the Internet.
Web servers store billions of websites, each providing diverse information on various subjects through web pages.
The Web is essentially a collection of HTML documents (web pages) linked together, spread across thousands of computers on the Internet.
Web technology encompasses tools and technologies used for web development.
It involves a variety of techniques facilitating communication between computers or devices over the internet.
The methods within web technology include the use of markup languages and multimedia packages.
The communication on the Internet occurs through interconnected computers or devices, creating a vast and dynamic network.

Client Side and Server Side Scripting

A script language, also known as a scripting language, is an interpreted programming language crucial for adding dynamism and interactivity to web pages.
Specifically designed for integration and communication with other programming languages.
Users can create a series of instructions using a script language, executed in the run-time environment, enhancing the interactivity of web pages.
There are two main types of scripting languages: client-side and server-side.
Client-side scripting involves scripts executed on the user's browser, enhancing the user experience directly.
Server-side scripting, on the other hand, involves scripts executed on the web server, influencing how web pages are generated and served to users.

Client side Scripting

Client-side scripting involves writing programs that run on a client computer or device through a web browser.
The codes in client-side scripting languages are executed by the user's web browser.
It enables the addition of dynamic and interactive elements to web pages, enhancing their engagement and user-friendliness.
Dynamic web pages permit users to change or customize content based on their input.
Examples of client-side scripting languages include JavaScript, CSS, AJAX, jQuery, TypeScript, CoffeeScript, and VBScript.
JavaScript is the most widely supported client-side scripting language, compatible with all major web browsers.
VBScript, developed by Microsoft, has limited support among web browsers.

Features of Client Side Scripting

The client side scripts are run on a web browser of a client computer or device.
It is visible to the users.
It loads a web page faster.
It helps to reduce the load on the server by shifting some of the processing to the client-side.
It doesn't interact with the server to process data.

Server side scripting

Server-side scripting languages create dynamic web pages responding to user requests.
Scripts run on the web server, generating HTML pages for the client's browser.
Source code is hidden from the client, revealing only essential data for security.
Popular server-side scripting languages include PHP, ASP.net, ColdFusion, Python, Ruby, Perl, C#, and JSP.
Operations like website customization, dynamic content changes, query responses, database access, and user authentication occur on the server.

Features of Server Side Scripting

It works with the back end.
It runs on the web server.
It provides a response to every request that comes in from the user/client.
This is not visible to the client side of the application.
It requires interaction with the server for the data to be processed.
It is considered a secure way of working with applications.
It can be used to customize web pages.

Introduction to JavaScript

JavaScript is a client-side scripting language used for web development along with other front-end development tools such as HTML and CSS. JavaScript helps to give dynamic behaviour to our web pages such as adding animation, drop down menus, client-side validation etc. Moreover JS can be used for mobile apps development and game development. JavaScript is known as a scripting language because it does not need to be compiled before execution, it executes in a run-time environment through a web browser. Several libraries of JavaScript such as React JS, Vue JS, Angular JS etc can be found and used to make more interactive, intuitive and advanced web pages. JS is not only used for front-end, rather it can be used in server side also. Node JS is an example of server-side JavaScript generally known as SSJS.

Feature of JavaScript

It is a light weighted and interpreted language which executes in a run-time environment directly through a web browser.
It is supported by all the web browsers since 97% of all websites use JS.
It is also a structural programming language since it supports control structures such as branching and looping.
It is prototype based programming language which means we can create object without creating classes, so it is also a Object Oriented programming
JavaScript is a case-sensitive language, small and upper case differs.
Every operating system such as Windows, MacOS supports JS.

Uses of JavaScript

JS is used for client-side validation.
JS can be used to make dynamic drop-down menus.
JS can be used to display date, time and even clock.
JS can be used to generate pop-up windows, alert message, dialog box etc
JS can also be used for Server applications.
JS can be used for cross platform mobile apps development.
can be used for game development.

Adding JavaScript to HTML document

JavaScript is often used as client-side scripting language along with HTML and CSS adding CSS to our HTML document, Similarly we can add JavaScript code to HTML document in three several ways. The several ways of adding JavaScript to HTML document are:

Inline JavaScript code

This method involves inserting JavaScript code directly within the HTML tags, eliminating the need for separate JS files or even the script tag. It's perfect for simple events like onclick, mouseover, or keypress. However, keep in mind that adding extensive JS code inline can be quite inconvenient. To add JavaScript code inline in an HTML document, follow the example below:

<HTML>

<HEAD>

<TITLE>Sample</TITLE>

</HEAD>

<BODY>

<BUTTON onclick = "alert('Your message')">Click me</BUTTON>

</BODY>

</HTML>

Here, we have added an alert message through the onclick event. When the user clicks the Click me button then an alert message will be shown in the web browser.

Internal (Embedding) JavaScript code

Embedding JavaScript code internally within the HTML document is a convenient way to handle interactions. However, it's essential to be mindful of the script's placement and potential impacts on page loading. Here's a refined version:

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>Sample</TITLE>

</HEAD>

<BODY>

<BUTTON onclick="disp()">Click me</BUTTON>

function disp() {

alert("Your message");

}

</script>

</BODY>

</HTML>

In this example, the JS function disp() is created and triggered by the "Click me" button's onclick event. When the button is pressed, it invokes the function, displaying an alert message.

External JavaScript code

This is the most popular method of adding JS in our web pages. To add external JavaScript we have to create separate JS file which is linked with our HTML document as:

<SCRIPT src = “name.js”></Script>

Where, name.js is the JavaScript file that we create to write all our JS code. It should be in the same location with our HTML document. It is the most convenient way of adding JS in our web page as JS code doesn't get messed with other HTML and CSS code. JavaScript code can be externally added with HTML document as follows:

Create a HTML document with any name

<html>

<head>

<title>Sample</title>

</head>

<body>

<button onclick="disp()">Click me</button>

</body>

</html>

Also create a JS file with .js extension and add following code

function disp(){

alert("Hello World!");

}

Here, we have created separate HTML and JS files in the same location. Since we have linked our JS file with our HTML document, every code which is written in the JS file will be implemented on the HTML document.

Variable:

A variable is a named container for storing data values. In JavaScript, variables are used to hold various types of information, such as numbers, strings, or objects.

Local Variable:

Local variables are variables declared within a specific block or function in JavaScript. Their scope is limited to the block or function in which they are defined. Local variables cannot be accessed outside of this scope, providing encapsulation and preventing unintended interference with other parts of the code.

Example

function example() {

var localVar = "I am a local variable";

// localVar is only accessible within this function

}

Global Variable:

Global variables, on the other hand, are declared outside of any specific block or function. They have a broader scope and can be accessed and modified from anywhere in the code, including within functions and blocks.

Example:

var globalVar = "I am a global variable";

function example() {

// globalVar can be accessed and modified here

}

Data type in JavaScript

JavaScript supports several data types that are used to represent different kinds of values. Here are the main data types in JavaScript:

Primitive data types: They are derived data types from primitive data types.

Types	Function
Number	It represents numeric value i.e. integer and floating number. We can use BigInt to represent numbers with large values.
String	It represent alphanumeric values i.e. text
Boolean	It represents either true or false value.
Null	It represents an empty or unknown value.
Undefined	If a variable is declared but the value is not assigned then the variable is of undefined type.

Non-Primitive data types: They are derived data types from primitive data types.

Types

Function

Array

It stores multiple values of the same type under the same name.

Object

It has methods and properties.

Operators in JavaScript

Operators are the symbols or signs used to perform some specific operation. Let us consider a simple expression c=a+b where, a, b and c are the operands. + = are the operators and addition is the operation.

Types of Operators in JS

Arithmetic Operator:

Arithmetic operator are symbol used for basic mathematical calculation such as addition, multiplication, division, subtraction, remainder etc. Operators are:

+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Remainder
++	Increment
- -	Decrement

Program example

var a=2,b=3,c=a+b;

document.write(c);

</script>

Comparison Operator:

Comparison operators are the symbol used to compare the values of two operands. Operators are:

==	Equals
!=	Not equal to
<	Less than

Greater than

Greater than equal

Less than equal

Program example

var a=2,b=3,c=a+b;

if(a>b){

document.write(a);

}else{

document.write(b);

}

</script>

Logical operator:

Logical operators are used to make logical comparisons i.e that logically connect two or more expressions. Operator are:

Logical AND

Logical OR

Logical NOT

Program example

var a=2,b=9,c=7;

if(a>b && a>c){

document.write(a);

}else if (b>a && b>c){

document.write(b);

}else{

document.write(c);

}

</script>

Assignment Operator:

This operator is used to assign value to an identifier(variable). Operator are:

=	Simple equal to
+=	Add and assign
-=	Subtract and assign
*=	Multiply and assign
/=	Divide and assign
%	Take remainder and assign

Program example:

var a=2,b=3,c=a*b;

document.write(c);

</script>

String Operator

This operator helps to add several strings. The process of adding string is called string concatenation.

+ is the string operator used to add strings.

Program example

var firstName = "John";

var lastName = "Doe";

// Using the + operator for string concatenation

var fullName = firstName + " " + lastName;

// Displaying the result

console.log("Full Name: " + fullName);

# To add two different using HTML.

<html>

<head>

<title>Addition</title>

</head>

<body>

function sum() {

var a = document.getElementById("first").value;

var b = document.getElementById("second").value;

var c = parseInt(a) + parseInt(b);

document.body.innerHTML += "<p>The sum is: " + c + "</p>";

}

</script>

</body>

</html>

#Swaping 2 variable using JS with HTML.

<html>

<head>

</head>

<body>

function swap() {

var a = parseInt(document.getElementById("a").value);

var b = parseInt(document.getElementById("b").value);

var temp=a;

a=b;

b=temp;

document.write("After swaping value of a = ",a+" "+"and value of b= ",b);

}

</script>

</body>

</html>

Form Validation using JavaScript

Form validation ensures users provide correct and complete information before submitting. JavaScript offers an easy way for client-side validation. There are two main types:

Basic Validation: Checks if all required fields are filled properly and not left empty.

Data Format Validation: Verifies if data entered is logically correct and follows expected formats (e.g., valid email addresses, phone numbers).

Example Program

<html>

<head>

<title>Form Validation</title>

</head>

<body>

<form>

</form>

function validate() {

var user = document.getElementById("user").value;

var pass = document.getElementById("pass").value;

if(user === "" || pass === "") {

alert("Please fill out both fields.");

return false;

}

</script>

</body>

</html>

CSS

CSS stands for Cascading Style Sheets which consists of various styles that defines how to display HTML elements. It is used to make the design of the Website dynamic and attractive. Styles are normally stored in Style Sheets. Since, every tags cannot design the Web site in very fascinating way we use CSS to solve that problem.

Advantages of using CSS

Web pages will load faster.
It helps to maintain design consistency across all the pages of the Web site.
CSS allows for customizing elements such as font, font size, font color and many other
CSS can help to make Web pages available for different media (desktop PC, mobile phones). i.e. device responsive
It makes web page compatible with almost all the browsers.

Inline CSS

This types of CSS are written inside the HTML tag.

<HTML>

<HEAD><TITLE>Inline CSS</TITLE></HEAD>

</BODY>

</HTML>

In above HTML file we have added style inside BODY tag. Similarly, we can add any number of CSS inside HTML tag.

Internal CSS

This types of CSS are written inside <STYLE> tag, which is placed in -between HEAD tag of an HTML document.

<HTML>

<HEAD><TITLE>Internal CSS</TITLE>

<STYLE>

body{

background-color: red;

}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

In above HTML file we have added STYLE tag inside HEAD. CSS is written directly selecting body tag.

External CSS

In this type we have to prepare HTML file and CSS file separately. These two file are linked by following statement.

Consider the following HTML document.

<HTML>

<HEAD><TITLE>External CSS</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Since we have linked “mero.css” in HTML file we have to create a separate CSS file named "test.css". We can directly right CSS without STYLE tag in CSS document.

body{

background-color: red;

}

In above HTML file we have a created separate HTML and CSS file which are linked together.

Server-side Scripting Using PHP

Server-side scripting is a method of designing a website that processes or runs a user request on the web server.
It is used to develop dynamic websites and web applications.
It provides an interface to the user and hides the source code. It allows limited access to proprietary data.
PHP, Python, Java, Ruby, Perl, ASP, C#, etc. are server-side scripting languages.
PHP is the popular server-side scripting language that enables a user to develop interactive dynamic websites.

Introduction to PHP

Hypertext Preprocessor (PHP) is an open-source programming language that is used to develop dynamic and interactive websites.
It is the server-side scripting language that is embedded in HTML.
It is used to manage dynamic content, databases, session tracking, etc.
When a request is made by a user, a PHP interpreter on a web server executes PHP codes, and the plain HTML output is embedded in the HTML, which is sent to the viewer’s web browser.
There is no special hardware requirement for PHP. It can be run in a computer having at least 200 MB of free hard disk space, 512 MB or higher RAM, and a core 2 duo or higher processor.
It requires a web server (Apache server, IIS), PHP Interpreter (PHP Parser), and database software (MySQL).
You can install a Web server, PHP interpreter (i.e. PHP Parser), and MySQL database separately on a computer.
Some packages like WAMP(compatible with Windows 2008 or higher), LAMP (compatible with Linux), XAMPP (compatible with Windows/Linux/MAC), and MAMP (compatible with MAC) allow you to install a web server, PHP interpreter, and MySQL Database all together on a computer.

Making a computer ready to use PHP

Download the installation file of XAMPP from https://www.apachefriends.org site and install it on a computer.
Open XAMPP Control Panel that allows you to configure the XAMPP and enables you to start or stop the modules.

Start Apache server and MySQL.
Type PHP codes in a text editor like Notepad, Notepad++, NetBean, CoffeeCup, EditPlus, Sublime Text and save the php file in C:\XAMPP\htdocs folder. Suppose the name of php file is 'myfirstphp.php'.
Open a web browser and type http://localhost/php filename. For example, http://localhost/myfirstphp.php.

If XAMPP Apache port 80 is being used by another application, then choose the Config button of the Apache module, Apache (httpd.conf), and change the value of Listen to 81. Similarly, choose Apache (httpd-ssl.conf) and change the value of Listen to 444.

OBJECT ORIENTED PROGRAMMING WITH SERVER SIDE SCRIPTING

Object-Oriented Programming (OOP) is a programming approach or paradigm that is based on classes and objects.
In OPP, a class is a programmer-defined data type that includes local methods (i.e., local function) and local variables.
A class is a collection of objects and is identified by its ID i.e. class ID. A class id defined by using the class keyword followed by the name of the class and a pair of curly braces.
All the methods and properties are included inside the curly braces.
An object is an individual instance of the data structure defined by a class.
Multiple objects can be created under a class.
Each object has all the properties with different values and methods defined in the class.
A new object of a class can be created by using new keyword.

Basic PHP syntax

A PHP script can be placed anywhere in the PHP document.
A PHP interpreter recognizes the PHP script placed anywhere in the document by the syntax.
Each PHP script starts with <?php and ends with ?>.
Syntax:

<?php
// PHP code
?>

A PHP file is saved with a .php extension.
A PHP file normally contains HTML tags and PHP scripting codes.
Each PHP code is terminated with a semicolon.
The echo and print statements are used for displaying output.
In PHP, keywords (if, else, while, echo, etc.), classes, functions, and user-defined functions are not case-sensitive.
A single-line comment can be put by using either // or #.
A multi-line comment can be put by using /* followed by comment or remark and terminated by */.

PHP data types

PHP data type refers to the type of data that can be used in PHP. Since PHP is a loosely typed language, variables do not need to be declared with a specific data type.
PHP supports String, Integer, Float, Boolean, Null, Array, Object, and Resource data types.
The string data type refers to a sequence of characters enclosed in single or double quotes. "Namaste" and ‘Symbol no:877897’ are examples of string data.
The Integer data type is a whole number ranging from -2147483648 to 2147483647 i.e. -2^31 to 2^31. It can be specified in the decimal, octal, binary, or hexadecimal number system. The decimal number system is the default number system for specifying PHP integers. 45, 4265, ox1A, etc. are integers. The PHP var_dump() function returns the data type and value.
The Float (also known as double) data type refers to a number with a decimal point. It can be expressed in exponential form. 125.55, 7.65E+4, 5.45-3, etc. are floats.
The Boolean data type is the logical data type that refers to a value of either true or false. In PHP, the value of true is represented by 1, and the value of false is represented by 0. PHP uses the bool keyword to represent the Boolean data type. It is not case-sensitive. PHP treats empty string (" ", ‘ ’), string "0", empty array (array() or []), null, float 0.0, float -0.0, integer 0, integer -0, and false keyword as false.
An array is a compound data type that allows a user to store multiple data of the same data type in a single variable. Each value in an array is represented by an index. For example, $color=array(‘red', ‘blue', ‘green'); defines three string values. $color[0], and $carts[1] represent the 1st and 2nd elements of the $color array.
An object data type is a user-defined data type that stores data and behavior. An object is created from a class, which defines the properties and methods of the object. Let's assume we have a class named Car. A Car can have properties like model, color, etc. We can define variables like $model, $color, and so on, to hold the values of these properties. When the individual objects (Volvo, BMW, Toyota, etc.) are created, they inherit all the properties and behaviors from the class, but each object will have different values for the properties.
The null data type refers to a null value i.e. no value. When a variable is created without a value in PHP, it is automatically assigned a value of null. A variable of data type NULL is a variable without any data. NULL is the only possible value of the null data type.
A resource data type stores the reference to functions and an external resource. Resource variables typically hold special handlers for opened files and database connections.

Variables Manipulation

A variable is an identifier that stores a value temporarily. A variable in PHP starts with a dollar ($) sign followed by the name of the variable.

Since PHP is a loosely typed language, it automatically associates a data type to the variable on the basis of the data type of a value.

The syntax of declaring a variable is :

$variablename = value

For example,

$number = 5;

$address = "Baneshwor";

Rules for naming variables in PHP:

A variable starts with the $ sign, followed by the name of the variable.
A variable name can only contain alpha-numeric characters and underscores (A-Z, a-z, 0-9, and _ ).
A variable name must start with a letter or the underscore character.
A variable name cannot start with a number.
Variable names are case-sensitive ($age and $AGE are two different variables).

Displaying values of variables in PHP

To display the values of variables in PHP, Echo and Print statements are used.

echo statement

PHP echo statement displays the output on the screen. It can be used to display a string, multi-line strings, escaping characters, and values of variables, arrays, etc. The echo is not a function. It can be used with or without parentheses i.e. echo(), or echo. It does not return any value. It accepts multiple data separated by commas.

Syntax:

echo "expressionlist" or echo ("expressionlist")

Where,

Expression list is the list of constants or variables separated by commas.

Example:

<html>

<body>

<? php

echo "<h2>Welcome to PHP Class</h2>";

echo ("Hello students!<br>");

echo "Now you will learn how to use echo statement in PHP<br>";

echo "This ", "multiple arguments", "is allowed in echo statement.", "but not in print statement.";

</body>

</html>

print Statement

The print statement also displays the output on the screen. It can be used to display a string, multi-line strings, escaping characters, value of variables, and arrays. It can be used with or without parentheses i.e. print() or print. It returns an integer 1 as a value and can be used in an expression. We cannot pass multiple arguments using the print statement. The syntax of the print statement in PHP is:

print "string" or print (string)

Example:

<html>

<body>

<?php

$txt1 = "Welcome to PHP class";

$txt2 = "standard 12";

$x = 20;

$y = 12;

print "<h2>$txt1</h2>";

print "You are studying PHP in " . $txt2 . "<br>";

print $x."+".$y. "=" .($x + $y); // The (.) operator joins two strings

</body>

</html>

OPERATORS IN PHP

PHP Operator is a symbol that performs operations on operands. In simple words, operators are used to perform operations on variables or values.

For example:

$num=$a+$b;

In the above example, $a and $b are the operands, and + is the operator.

The different PHP operators are :

a. Arithmetic Operator

b. Assignment Operator

c. Logical Operator

d. Comparison Operator

e. Increment/Decrement Operator

f. String Operator

Database Connectivity

Oracle, MS-Access, Sybase, Microsoft SQL Server, and MySQL are some popular database software.
PHP supports various kinds of database connections with it.
MySQL is the relational database management system (RDBMS) developed, distributed, and supported by Oracle Corporation and it is commonly used on the Web nowadays.
MYSQL supports standard SQL (Structured Query Language) and stores data in tables that consist of columns and rows.
Each row of a table stores interrelated data of someone or something and is known as a record.
Each column of a table stores a piece of information related to someone or something. A column of a table is known as a field.
The structure of a table in MySQL looks like below:

Run the MySQL database server to establish the connection with the MySQL database.
Type http://hocalhost/phpmyadmin/ in a browser to check whether it is running or not.

i. Procedural Way

The following code connects the MySQL database server where hostname=localhost, username=root and no password. It checks the connection and displays information about the connection.

<?php

$link = mysqli_connect("localhost", "root", "");

if($link === false)

{

die("ERROR: Could not connect");

} else{

echo "Connect Successfully";

}

ii. Object Oriented way

<?php

$mysqli = new mysqli("localhost", "root", "", "demo");

if($mysqli ->connect_error) {

die("Connection failed");

} else {

echo "Database Connected Successfully";

}

Search This Blog

Computer Science