1

DON BOSCO COLLEGE

PANJIM – GOA
WEB TECHNOLOGY
LAB FILE
KEITH RODRIGUES
ROLL NO: 15
TYBCA
 2

INDEX
Sr.No Title Page no

Unit 1 Introduction to Web 3 - 10

Technology
Unit 2 Client-Side Scripting 11 - 37

Unit 3 Extensible Markup Language 38 - 42

Unit 4 Client-Side Web Framework 43 - 49

Unit 5 Server-Side Scripting 50 - 72

Unit 6 Server-Side Web Framework 73 - 76

Unit 7 Web Hosting and Security 77 - 91

 3

UNIT 1
1. Introduction to Web Technology
1.1. Introduction to different type of web browsers:

1. WorldWideWeb

 The first web browser ever

 Launched in 1990
 It was later named “Nexus” to avoid any confusion with the World
Wide Web
 Had the very basic features and less interactive in terms of
graphical interface
 Did not have the feature of bookmark

2. Mosaic

 It was launched in 1993

 The second web browser which was launched
 Had a better graphical interface. Images, text and graphics could
all be integrated
 It was developed at the National Center for Supercomputing
Applications
 The team which was responsible for creating Mosaic was lead by
Marc Andreessen
 It was named “the world’s first popular browser”
 4

3. Netscape Navigator

 It was released in 1994

 In the 1990s, it was the dominant browser in terms of usage share
 More versions of this browser were launched by Netscape
 It had an advanced licensing scheme and allowed free usage for
non-commercial purposes

4. Internet Explorer

 It was launched in 1995 by Microsoft

 By 2003, it has attained almost 95% of usage share and had
become the most popular browsers of all
 Close to 10 versions of Internet Explorer were released by
Microsoft and were updated gradually
 It was included in the Microsoft Windows operating system
 In 2015, it was replaced with “Microsoft Edge”, as it became the
default browser on Windows 10
 5

5. Firefox

 It was introduced in 2002 and was developed by Mozilla

Foundation
 Firefox overtook the usage share from Internet Explorer and
became the dominant browser during 2003-04
 Location-aware browsing was made available with Firefox
 This browser was also made available for mobile phones, tablets,
etc.

6. Google Chrome

 It was launched in 2008 by Google

 It is a cross-platform web browser
 Multiple features from old browsers were amalgamated to form
better and newer features
 To save computers from malware, Google developed the
ad-blocking feature to keep the user data safe and secure
 Incognito mode is provided where private searching is available
where no cookies or history is saved
 Till date, it has the best user interface
 6

1.2. Introduction to different text editors:

a) Notepad++ Text Editors:

Debatably the most popular advanced text editor on the

market, Notepad++ comes in a compact package with no fees and
powerful editing components. It is given away for free on a
General Public License, meaning that all developers and content
creators are able to take advantage of the text editor right after a
quick download. Notepad++ runs on Microsoft Windows, and it
strives to use less computing power than the average text editor.
b) Sublime Text Editors:

The Sublime Text editor is definitely one of our favorites! It offers

a free version for testing, but all continual users are required to
pay $99 to keep it active. While $99 might sound steep for a text
editor, it’s important to note that the licenses are per-user,
rather than per-machine, so you can enjoy Sublime Text on as
 7

many computers and operating systems as you wish with your

license.
c) CofeeCup The HTML Text Editors:

CoffeeCup's HTML Editor provides extremely advanced text

editing for coding and overall web design management. The
editor has a free trial, but in order to continue, you must pay the
$49 one-time fee. There’s also a fully free version, but the
features are pretty watered down.

d) TextMate Text Editors:

TextMate comes offered as a free download, but you can also

decide to upgrade to the premium version for $59. Keep in mind
that this payment only gets you one license, so you would have
to pay for multiple seats if you have a whole team of people in
need of the text editor.
 8

e) Atom Text Editors:

With Atom, you gain access to an open-source text editor with

developers in mind. In fact, the creators of Atom state that they
made it just for developers. Also, there’s a community of
developers who contribute themes and plugins, much like
WordPress or some other opensource tools. An experienced
developer should have no problem working with Atom, since it
offers clean collaboration tools, a sleek editor, and some great
organization tools for keeping your projects in check.

1.3. World Wide Web:

World wide web is also known as a Web, is a collection of
websites of web pages stored in web servers and connected to
local computers through the internet. Users can access the
content of these sites from any part of the world over the
internet using their devices such as a computer, laptop, cell
phones, etc.

1.4. Protocols governing the web:

a. TCP:
Transmission Control Protocol is a standard that define how to
establish and maintain a network conversation by which
applications can exchange data. TCP works with the Internet
 9

Protocol (IP), which defines how computers send packets of data

to each other.

b. IP:
IP stands for “Internet Protocol”, which is the set of rules
governing the format of data sent via the internet or local
network. The internet needs a way to differentiate between
different computers, routers, and websites. IP addresses provides
a way of doing so and form an essential part f how the internet
works.

c. UDP:
User Datagram Protocol is a communications protocol that
facilitates the exchange of messages between computing devices
in a network. It's an alternative to the transmission control
protocol.

d. HTTP:
Hypertext Transfer Protocol is an application-layer protocol for
transmitting hypermedia documents, such as HTML. It was
designed for communication between web browsers and web
servers, but it can also be used for other purpose.

e. HTTPS:
Hypertext Transfer Protocol Secure is a combination of the
hypertext transfer protocol with the secure socket layer
(SSL)/Transport Layer Security (TLS) protocol. TLC is an
authentication and security protocol widely implemented in
browsers and web servers.
 10

f. FTP:
File Transfer Protocol refers to a group of rules that govern how
computers transfer files from one system to another over the
internet. Businesses use FTP to send files between computers,
while websites use FTP for the uploading and downloading files
form their website’s servers.

g. TFTP:
Trivial File Transfer Protocol is a simple protocol that provides
basic file transfer function with no user authentication. TFTP is
intended for applications that do not need the sophisticated
interactions that File Transfer protocol provides.
h. SMTP:
Simple Mail Transfer Protocol is a set of communication
guidelines that allow software to transmit an electronic mail over
the internet. It is a program used fr sending messages to other
computer users based on e-mail addresses.

i. MIME:
MIME (Multipurpose Internet Mail Extensions) is a standard
which was proposed by Bell Communications in 1991 in order to
expand upon the limited capabilities of email, and in particular to
allow documents (such as images, sound, and text) to be inserted
in a message.
 11

UNIT 2

1. Introduction to client-side scripting

Client-side scripting simply means running scripts, such as
JavaScript, on the client device, usually within a browser. All kinds
of scripts can run on the client side if they are written in
JavaScript, because JavaScript is universally supported.

2. Basic operators:

2.1. JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between
variables and/or constants. Given that y=5, the table below
explains the arithmetic operators

2.2. JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript
variables. Given that x=10 and y=5, the table below explains the
assignment operators
 12

2.3. JavaScript Logical Operators

Logical operators are used to determine the logic between
relational expressions. Given that x=6 and y=3, the table below
explains the logical operators

2.4. JavaScript Relational Operators

Relational operators are used to compare two values. Given that
x=5, the table below explains the relational operators
 13

3. Decision statements:
3.1. If statement

Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<p>Display "GOOD MORNING" if the hour is less than
18:00:</p>
<p id="demo">GOOD AFTERNOON!!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good
day!";
}
</script>
</body>
</html>

Output:

JavaScript if
Display”GOOD MORNING” if the hour is less than 12:00:

GOOD AFTERNOON!!
 14

3.2. If else statement

Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>

Output:
 15

3.3. Switch statement

Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
 16

case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is
" + day;
</script>
</body>
</html>

Output:

4. Looping statements:
4.1. For loop:

Code:
<!DOCTYPE html>
<html>
<body>
 17

<h2>JavaScript For Loop</h2>

<p id="demo"></p>
<script>
const cars = ["i10", "i20", "X3", "Q6", "Seltos", "Baleno"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:
JavaScript For Loop
wagonR
Ertiga
Kiger
Triber

4.2. While loop:

Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
 18

let text = "";

let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:

4.3. Do While loop:

Code:
<!DOCTYPE html>
<html>
 19

<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:

5. Functions:
 20

A function is a block of code that performs a single, related action.

Functions can be of two types
- Built-in
- User-defined
Syntax of user-defined functions:
function fnName(parameterlist)
{
// body of function
}

5.1 User defined function:

A function consists of the function keyword, name of the
function, parameters (if any) and JavaScript statement/s
Functions are placed in the head section of the HTML
document. This ensures that a function is loaded by the
browser before it is called.
Function calls can occur in any part of the document and
even inside event handler code.
A return statement is used to transfer control out of a
function or to return a value.

Code:

<html>
<head>
<title>Functions</title>
<script language="javascript" type="text/javascript">
function alert_box(msg)
 21

{
document.bgColor="#EEEEEE";
alert(msg);
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
alert_box("Welcome to Goa");
</script>
</body>
</html>

Output:

6. Document Object Model:

The DOM gives you scripting access to all the elements on a web
page. Inside the browser, the whole web page—paragraphs, forms,
tables, etc.—is represented in an object hierarchy. Using
JavaScript, you can dynamically create, modify and remove
elements in the page.
 22

A hierarchy demonstrates the principle of containership

•Lower-level objects are contained within top-level objects
•In order to reference a lower-level object, we also need to
reference its parent or container object
•JavaScript uses the dot (.) to separate the parent object
from its components
In DOM, documents have a logical structure which is very much
like a tree; to be more precise, which
is like a "forest" or "grove", which can contain more than one tree.
Each document contains zero or one
doctype nodes, one root element node, and zero or more
comments or processing instructions; the root
element serves as the root of the element tree for the document.
However, the DOM does not specify that
documents must be implemented as a tree or a grove, nor does it
specify how the relationships among
objects be implemented.
 23

6.1. How to use getElementById():

Code:
<!DOCTYPE html>
<html>
<head>
<title> Introduction to Objects </title>
<script type="text/javascript">
//DOM Manipulation and
getElementByIdMethod//
function buttonClick()
{
var n
=document.getElementById("heading2").innerHTML;
alert(n);
 24

</script>
</head>
<body>
<button onclick="buttonClick()">Click
Me</button>
<h2 id="heading2">Some Random Text</h2>
</body>

</html>

Output:

6.2. How to use getElementsByClassName():

Code:
<html>
<head>
<title>DOMS using JS</title>
<script type="text/javascript">
 25

function styleChange()
{
var para=document.getElementsByClassName("pt");
for(var i=0; i<para.length;i++)
{
para[i].style.fontSize=24;
para[i].style.fontWeight="bold";
para[i].style.fontStyle="italic";
}
}
</script>
</head>
<body bgcolor = "black">
<p class="a" style="color:tomato">#1 Paragraph</p>
<p class="pt" style="color:tomato">#2 Paragraph</p>
<p class="a" style="color:tomato">#3 Paragraph</p>
<p class="pt" style="color:tomato">#4 Paragraph</p>
<p class="pt" style="color:tomato">#5 Paragraph</p>
<button onclick="styleChange()"name="submit">change
Style </button>
</body>
</html>
Output:
 26

1.1. How to use getElementByTagName():

Code:
<html>
<head>
<title>DOMS using JS</title>
<script type="text/javascript">
function styleChange()
{
var para = document.getElementsByTagName("t");
for(var i = 0; i < para.length; i++)
{
para[i].style.fontSize = 24;
para[i].style.fontWeight = "bold";
para[i].style.fontStyle = "italic";
}
}
</script>
</head>
<body bgcolor = "red">
 27

<t style = "color:white">#1 Paragraph</p>

<t style = "color:white">#2 Paragraph</p>
<t style = "color:white">#3 Paragraph</p>
<t style = "color:white">#4 Paragraph</p>
<t style = "color:white">#5 Paragraph</p>
<button onclick = "styleChange()" name = "Submit">Change
Style</button>
</body>
</html>
Output:

2. Form Validation:
Required Filed validation:

Code:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
 28

var x=document.myForm.fname.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()” method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:
With error

Without error
 29

Email validation:

Code:
<html>
<head><script>
function validateForm()
{
var x=document.myForm.email.value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script></head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
 30

</form>
</body>
</html>

Output:
With error

Without error:

Zip code validation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript Validations</title>
<script>
function validate()
{
 31

if (document.myForm.Zip.value == ""
||isNaN(document.myForm.Zip.value)
||document.myForm.Zip.value.length !=5)
{
alert("please provide a zip in the format
######.");
document.myForm.Zip.focus();
return false;
}
}
</script>
</head>
<body>
<h1>ZIP code validation</h1>
<form name="myForm"
onsubmit="return(validate());">
<label>Zip Code:</label><input type="number"
name="Zip" /><br /><br>
<input type="submit" value="Submit" class="sub">
</div>
</form>
</body>
</html>

Output:
 32

3. Mouse events
<html>
<head>
<title>DOMS using js</title>
<script type="text/javascript">
function setNewImage()
{
document.getElementById("x").src="WIN_20210717_09_58_19_Pro.jpg
"
}
function setOldImage()
{
document.getElementById("x").src="Screenshot (708).png"
}
</script>
</head>
<body bgcolor="green">
<img id="x" src="" height="300" width="300"
onmouseover="setNewImage()"
onmouseout="setOldImage()"></img>
</body>
</html>
 33

Output

AJAX
Code
Retrieving of Data
Part 1
<script src="https://code.jquery.com/jquery-2.2.4.min.js">
</script>
<a href="javascript:void(0)" onclick="click_here()">click me</a>
<script>
function click_here()
{
jQuery.ajax({
url:'ajax2.php',
type:'post',
success:function(result){
alert(result);
}
});
}
</script>
 34

Code
Part 2
<?php
echo "THIS IS THE AJAX PAGE FROM WHERE DATA IS RETRIEVED";
?>
Output

Code
Adding
Part 1
<script src="https://code.jquery.com/jquery-2.2.4.min.js">
</script>
<input type="textbox" id="num1"/>
<a href="javascript:void(0)" onclick="click_aj()">click me</a>
<script>
function click_aj()
{
var num1=jQuery('#num1').val();
jQuery.ajax({
url:'ajax4.php',
type:'post',
data:'num1='+num1,
 35

success:function(result){
alert(result);
}
});
}
</script>

Part 2
<?php
echo $_POST['num1']+50;
?>
Output

Code
Result 1 and Result 2
Part 1

<script src="https://code.jquery.com/jquery-2.2.4.min.js">
</script>

<script>
Result1();
Result2();
function Result1()
{
 36

jQuery.ajax({
url:'ajax6.php',
type:'post',
async:false,
success:function(result){
alert(result);
//console.log(result);
}
});
}

function Result2()
{
jQuery.ajax({
url:'ajax7.php',
type:'post',
//async:false,
success:function(result){
alert(result);
//console.log(result);
}
});
}
</script>
 37

Part 2
<?php
sleep(5);
echo "THIS IS RESULT 1";
?>

Part 3
<?php
echo "THIS IS RESULT 2";
?>

Output
 38

UNIT 3
1. What is XML?
Xml (eXtensible Markup Language) is a markup language. XML is
designed to store and transport data. Xml was released in late 90’s.
it was created to provide an easy to use and store self-describing
data. XML became a W3C Recommendation on February 10, 1998.

1.2. XML Structure:

• XML declaration
– Value version
• Indicates the XML version to which the document
conforms
• Root element
– Element that encompasses every other element
• Container element
– Any element contains other elements
• Child elements
– Elements inside a container element
• Empty element flag
– Does not contain any text
• DTD documents
– End with .dtd extension

2. Document Type Definition:

 DTDs check vocabulary and validity of the structure of XML
documents against grammatical rules of appropriate XML
language.
 An XML DTD can be either specified inside the document, or it can
be kept in a separate document and then linked separately.
 Allow independent user groups to check structure and exchange
data in standardized format
 39

 Expresses set of rules for structure using EBNF (Extended

Backus–Naur Form) grammar
 There are 2 data types, PCDATA and CDATA
i. PCDATA is parsed character data.
ii. CDATA is character data, not usually parsed.

2.1. DTD Structure:

a) DTD Start- The DOCTYPE declaration has an exclamation mark (!)
at the start of the element name. The DOCTYPE informs the parser
that a DTD is associated with this XML document.
<!DOCTYPE address [

b) DTD Body − The DOCTYPE declaration is followed by body of the

DTD, where you declare elements, attributes, entities, and
notations.

<!ELEMENT address (name,company,phone)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT company (#PCDATA)>

<!ELEMENT phone_no (#PCDATA)>

<!ELEMENT payment (#PCDATA)>

<!ATTLIST payment type (check|cash) "cash">

c) End Declaration − Finally, the declaration section of the DTD is

closed using a closing bracket and a closing angle bracket (]>). This
effectively ends the definition, and thereafter, the XML document
follows immediately.
 40

3. Schema:
b. XML Schema is an XML-based (and more powerful)
alternative to DTD. It Do not use EBNF grammar
c. The XML Schema language is also referred to as XML
Schema Definition (XSD).
d. One of the greatest strengths of XML Schemas is the
support for data types.
e. XML Schemas is that are written in XML so you don't have
to learn a new language.

3.1. XML Schema Documents

• Root element schema

–Contains elements that define the XML document structure
–targetNamespace
• Namespace of XML vocabulary the schema defines
–element tag
• Defines element to be included in XML document
structure
–name and type attributes
• Specify element’s name and data type respectively
–Built-in simple types
• date, int, double, time, etc.

4. XML Namespaces
 In XML, element names are defined by the developer. This often
results in a conflict when trying to mix XML documents from
different XML applications. E.g., Tel, phone, mobile
 This Naming collisions Name can easily be avoided using a name
prefix.
 When using prefixes in XML, a so-called namespace for the prefix
must be defined.
 The namespace is defined by the xmlns attribute in the start tag
of an element.
 41

 The namespace declaration has the following syntax.

xmlns:prefix="URI”
 Uniform resource identifier (URI)
1. Uniquely identifies the namespace
2. A string of text for differentiating names

4.1. Naming collisions

Two different elements have same name

<tiger>Bengal tiger</tiger>

<tiger>glucose tiger</tiger>

Namespaces

Differentiate elements that have same name

<animal:tiger>Bengal tiger</animal:tiger>

<biscuit:tiger>glucose tiger</biscuit:tiger>

Creating namespaces

Use xmlns keyword

Xmlns:animal=”urn:sxc:animalInfo”

Xmlns:biscuit=”urn:sxc:foodInfo”

Creates two namespace prefixes animal and biscuit

urn:sxc:animaInfo is URI for prefix animal

urn:sxc:foodInfo is URI for prefix biscuit

 42

5. Transforming XML into XSLT

 XSLT (EXtensible Stylesheet Language Transformation
 XSLT is the most important part of XSL
 XSLT transforms an XML document into another XML document
 XSLT uses XPath to navigate in XML document
 XSLT is a W3C Recommendation
 The XSL code is written within the XML document with the
extension of (.xsl).

5.1. How does transformation work?

 In the transformation process, XSLT uses XPath to define parts of

the source document that should match one or more predefined
templates.
 When a match is found, XSLT will transform the matching part of
the source document into the result document.

5.2. Extensible Stylesheet Language (XSL)

Specify how programs should render XML document data

–XSL-FO (XSL Formatted Objects)

• Vocabulary for specifying formatting
–XSLT (XSL Transformation)
• Source tree
• Result tree
–Xpath
• Locate parts of the source tree document that match
templates defined in the XSL stylesheet

5.3. XPath

• XPath is a W3C recommendation.

• It is the syntax for defining parts of an XML document.
• It uses path expressions to navigate in the XML documents.
• XPath contains a standard function library.
• XPath is a major element of the XSLT standard.
• It is used to navigate through attributes and elements in an XML
document.
 43

UNIT 4
Grid container
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Container</h1>
 44

<p>A Grid Container consists of grid items arranged in columns and

rows</p>

<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>

<p>Direct child elements(s) of the grid container automatically becomes

grid items.</p>

</body>
</html>
Output
 45

Justify-content
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than
the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

 46

<p>Use the <em>justify-content</em> property to align the grid inside

the container.</p>

<p>The value "space-evenly" will give the columns equal amount of

space between, and around them:</p>

<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

</body>
</html>

Output
 47

Grid with image

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
}
.grid-item {
background-color: green;
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the

<em>display</em> property set to <em>grid</em> or
<em>inline-grid</em>.</p>
 48

<p>Direct child element(s) of the grid container automatically becomes

grid items.</p>

<div class="grid-container">
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
<div class="grid-item"><img src="Screenshot (730).png"
width="100px" height = "90px"></div>
</div>

</body>
</html>
 49

Output
 50

UNIT 5

1. Introduction to Server-Side Scripting:

Server-side scripting is a method of designing websites so that the

process or user request is run on the originating server. Server-side
scripts provide an interface to the user and limit access to proprietary
data and help keep control of the script source code. Below is an
example of client-side scripts vs. server-side scripts.

Server-side scripting examples

 ActiveVFP
 ASP
 C
 DC
 Java
 JavaScript (using SSJS (Server-side JavaScript) e.g., node.js)
 Perl
 PHP
 Python
 R
 Ruby

2. Introduction to PHP

What is PHP?

 PHP is an acronym for "PHP: Hypertext Preprocessor"

 PHP is a widely-used, open source scripting language
 51

 PHP scripts are executed on the server

 PHP is free to download and use

What is a PHP File?

 PHP files can contain text, HTML, CSS, JavaScript, and PHP code
 PHP code is executed on the server, and the result is returned to
the browser as plain HTML
 PHP files have extension ".php"

What Can PHP Do?

 PHP can generate dynamic page content

 PHP can create, open, read, write, delete, and close files on the
server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can be used to control user-access
 PHP can encrypt data

With PHP you are not limited to output HTML. You can output images,
PDF files, and even Flash movies. You can also output any text, such as
XHTML and XML.

Why PHP?

 PHP runs on various platforms (Windows, Linux, Unix, Mac OS X,

etc.)
 PHP is compatible with almost all servers used today (Apache, IIS,
etc.)
 PHP supports a wide range of databases
 PHP is free. Download it from the official PHP
resource: www.php.net
 PHP is easy to learn and runs efficiently on the server side
 52

3. PHP input output statements:

Output statement:

The PHP echo statement is often used to output data to the screen.

Code snippet:

<?php
echo "hello world!";
?>

Output:

Input statement

The <input> tag from HTML is a method used to get input from the used

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
 53

image Defines a graphical submit button.

Code:

<!DOCTYPE html>
<html>
<body>
<form action ="input.php" method="get">
number1:<br>
<input name="num1"><br><br>
<input type="submit" value="submit">
</body>
</html>

Input.php

<?php
$a=$_GET['num1'];
echo"entered number is $a";
?>

Output:
 54

Decision Making Statements:

PHP decision making statements allow you to make a decision, based
upon the result of a condition. These statements are called as Decision
Making Statements or Conditional Statements.
The decision making statements are:

 if else statement
 elseif statement
 switch statement

If else Statement:

PHP if statement is used to execute some code, if a condition

is evaluated to true otherwise if the condition is evaluated to false,
execute nothing, or execute some other code.

Code snippet:

<?php

$date=date("01-10");

if ($date=="01-10") {

echo "Wishing you a very Happy Birthday";

else{
 55

echo " not today";

?>

Output:

4. Else if Statement:

else if statements in PHP is like another if condition, it's used in the

program when if statement having multiple decisions.

Code snippet:

<?php
$date=date("m-d");

if ($date=="01-10") {
echo "Wishing you a very Happy Birthday";
}
elseif($date=="08-15"){
echo "Happy Independence Day";
}
else{
 56

echo “wrong input”;

}
?>

Output:

Switch Statement:
Use the switch statement to select one of many blocks of code to be
executed

Code snippet:
<?php
$myFavColor='red';
switch ($myFavColor)
{
case 'pink':
echo 'My favorite car color is pink!';
break;
case 'red':
echo 'My favorite car color is red!';
break;
 57

case 'orange':
echo 'My favorite car color is orange!';
break;
default:
echo 'My favorite car color is not pink, red, or orange!';
}
?>

Output:
 58

Looping Statements:

Sometimes we want a program to repeat something over and over again.

A loop is used to make a program do something more than one timeThe
loop is used to re-execute a block of code until the specified condition is
met. Sometimes loops are beneficial for developers to save the time and
effort of writing similar code.

PHP supports the following types of loops:

 while loop
 do-while loop
 for loop
 foreach loop

While Loop:

PHP while loop statement allows to repeatedly run the same block of
code until a condition is met.

Code snippet:

<?php

$i = 1;

while ($i <= 5){

echo "Hello while $i times"."<br>";

 59

$i++;

?>

Output:

Do While Loop
PHP do while loop is very similar to the while loop, but it always
executes the code block at least once and furthermore as long as the
condition remains true.

Code snippet:
<?php
$i=0;
do{
$i++;
echo "php do...while loop $i times"."<br>";
}
while ($i<=5);
?>
 60

Output:

For Loop:

PHP for loop is very similar to a while loop in that it continues to process
a block of code until a statement becomes false, and everything is
defined in a single line.

Code snippet:
<?php
for ($i=1; $i <= 5; $i++ ){
echo "PHP for loop print $i times"."<br>";
}
?>
Output:
 61

For each Loop

The foreach loop is mainly used for looping through the values of an
array. It loops over the array, and each value for the current array
element is assigned to $value, and the array pointer is advanced by one
to go the next element in the array.

Code snippet:

<?php
$salary[0]=2000;
$salary[1]=3000;
$salary[2]=5000;

foreach($salary as $value){
echo "Salary: $value<br>";
}
?>

Output:
 62

PHP Functions

The function is a self-contained block of statements that can repeatedly

be executed whenever we need it.

The concept of the function is the same as in other languages like C.

There are more than 1,000 inbuilt functions into the standard PHP
distribution. Apart from these, we can define own functions according to
the requirements.

User Defined Functions:

 You can also create your own functions.

 First, you need to give it a name.
 All functions in PHP start with function().
 Functions can also accept parameters.
 A function can also be used to return values.

Code:
<?php
Function add($a,$b){
$total = $a + $b;
return $total; //Function return, No output is shown
}

echo add(55,20); //Outputs 75

?>
 63

PHP Function Arguments:

Information can be passed to functions through arguments. The
following example has a function with two arguments:

Code:
<?php
function addFunction($number, $number)
{
$number = $number + $number;
echo "The sum of two numbers is : $number"; //Outputs as 30
}
addFunction(10, 20);
?>

PHP Default Argument Value

The following example shows how to use a default parameter. If we call
the function setWeight() without arguments it takes the default value as
an argument:

Code:

<?php
function setWeight($minWeight=50){
echo "The weight is: $minWeight <br>";
}

setWeight(100);
 64

setWeight(125);
setWeight(75);
setWeight(); // will use the default value of 50
?>

Returning Values

All functions in PHP return a value, even if you don't explicitly cause
them to. Thus, the concept of "void" functions does not apply to PHP.
You can specify the return value of your function by using the return
keyword:

Code:

<?php
function hello(){
return "Hello World"; // No output is shown
}
$txt = hello(); // Assigns the return value "Hello World" to $txt
echo hello(); // Direct Displays "Hello World"
?>
 65

Database Connectivity:
Crud Operations:
Within computer programming, the acronym CRUD stands for create,
read, update and delete. These are the four basic functions of persistent
storage. Also, each letter in the acronym can refer to all functions
executed in relational database applications and mapped to a standard
HTTP method, SQL statement or DDS operation.

Insert data into table:

<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Create database
$sql = "CREATE DATABASE myDB";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}

$conn->close();
?>
 66

Update table data:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";

if ($conn->query($sql) === TRUE) {

echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}

$conn->close();
?>

Delete table Data:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
 67

// sql to delete a record

$sql = "DELETE FROM MyGuests WHERE id=3";

if ($conn->query($sql) === TRUE) {

echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}

$conn->close();
?>
PHP cookies:

Cookies are text files which allow programmers to store some

information on the client computer, and they are kept of use tracking
purpose.

Create a Cookie
Setcookie() function is used to set a cookie.
Syntax:
setcookie(name, value, expiration);
 $name - a name of the
cookie. Example: "username"
 $value - a value of the
cookie. Example: "Jhon"
 $expire - time (in UNIX
timestamp) when the cookie will expire. Example: time()+"3600".
A cookie is set to expire after one hour.

Example:
<?php setcookie("username", "Jhon", time()+3600); ?>
 68

Cookie username is set with value Vijay which is set to expire after one
hour on the user's computer.

Retrieve a Cookie Value

PHP $ _COOKIE variable is used to retrieve a cookie value.

Example:
<?php echo $_COOKIE["username"]; ?>

isset() function is used, to detect cookie is set or not.

Example:
<?php
if (isset($_COOKIE["username"]))
echo "Welcome " . $_COOKIE["username"] . "!<br>";
else
echo "Welcome guest!<br>";
?>

You can do the following to view the full $ _COOKIE array.

Example:
<pre>
<?php print_r($_COOKIE); ?>
</pre>
 69

Delete a Cookie
To delete cookies, you just need to set a cookie on past date.
The following PHP code will delete, username cookie.

Example:
<?php setcookie("username", "Jhon", time()-3600); ?>

PHP Sessions:

PHP session is used to store information on the server. The data will be
available to all pages in one application.

A session creates a file in a temporary directory on the server where

registered session variables and their values are stored.

Starting a Session variable

Before use session variables, you must first start the session using
the session_start() function.
The Function session_start() should be in starting, and you can't send
anything to the browser before it.
Example:
<?php
session_start();
?>

<html>
 70

<body>

</body>
</html>
When you start a session a unique session id (PHPSESSID) for each
visitor/user is created. You can access the session id using the
PHP session_id() function or predefined constant PHPSESSID.

Storing a Session Variable

$_SESSION[] is an associative array, which is used to store information is
a session. These variables can be accessed during the lifetime of a
session.
Example:
<?php
session_start();

// store session data

$_SESSION["username"] = "nikita";
$_SESSION["email"] = "[email protected]";

//retrieve session data

echo $_SESSION["username"];
echo "<br>";
echo $_SESSION["email"];
?>
 71

Destroying a Session
A complete PHP session can be terminated by
using session_destroy() function, which does not require any arguments.
Example:
<?php
session_start();

session_destroy();
?>
If you wish to delete a single session variable, then you can
use unset() function.
Example:
<?php
session_start();

if(isset($_SESSION[username]))
unset($_SESSION[username]);
?>
 72

UNIT 6
1. WEB FRAMEWORK

Laravel is one of the world’s most popular PHP frameworks for building web
applications from small to large projects. for the development of web
applications following the model–view–controller (MVC) architectural
pattern. Some of the features of Laravel are a modular packaging
system with a dedicated dependency manager, different ways for
accessing relational databases.

Laravel modules

A module is like a Laravel package, it has some views, controllers or models.

It helps to correctly complete the views, config, routes and more convenient
code generation.

Laravel API

Laravel API helps to transfer data from one technology to another Laravel
API helps to transfer data from backend to frontend or frontend to backend

Blade Template

The Blade is a powerful templating engine in a Laravel framework. The blade

allows to use the templating engine easily, and it makes the syntax writing
very simple. The blade templating engine provides its own structure such as
conditional statements and loops. To create a blade template, you just need
to create a view file and save it with a .blade.php extension instead of .php
extension.

Security in Laravel

The Laravel system uses two authentication techniques to authenticate user

information – guards are used to authenticating the user data for every user
request, while providers work in retrieving user information from the
database. Developers who provide Laravel development services are
required to pay attention to build up the database and the models; as well
 73

as define the controllers – the rest is for the system to take care of. The
built-in authentication features will automatically start to get synched with
the site or the app.

SET 1

Installing Laravel

1. Download and install xampp

2. Install Composer

3.Saved it in this folder and install.

4. Type out the below command to install laravel

 74

5. To open the project, type out the below command on command prompt.

6. To open Laravel project on this port go to browser and type out the port
number: 127.0.0.1;8000

7. We can’t directly run Laravel so we have to open xampp and run apache

8. Copy the path of your project

 75

9. Go to your browser and type -> localhost and paste that path you copied.

10. Below steps is how to create a virtual host

11. Open notepad and open vhosts

12. Now to create your own port and assign the project there

-Remove the comments and remove the codes and keep the virtual host

-Copy document path, and server name local host.

-now to open that path with the help of any name we have to do the below
steps:-

i) Copy the htdocs path name, give any name to the server name that you’ll
use on the browser address bar.
 76

ii) Next open new notepad->open system32->drivers->etc-> select host->

copy the 1st hostname and past it below-> save it->restart apache and open
browser localhost and the name you gave for the server.
 77

UNIT 7
1. Types of web hosting

 Free Hosting:

 Some ISPs offer free web hosting. Free web hosting is best suited for
small sites with low traffic, like personal sites. It is not recommended
for high traffic or for real business. Technical support is often limited,
and technical options are few. Very often you cannot use your own
domain name at a free site. You have to use a name provided by
your host like http://www.freesite.com/users/~yoursite.htm. This is
hard to type, hard to remember, and not very professional.

 Website Builders:

 Website builder services is a type of hosting service that caters to

beginners who need to host a website, but lack the technical skills
and knowledge to build one. Website builder services typically
provide you with an online browser-based interface to build your
website, and also host the website for you without any additional
setup.

 Dedicated:

 Dedicated Hosting is a hosting option where a physical server is

dedicated to a client, and the resources of this type of server
machine are not shared with other clients. The customer can control
it entirely as per his specific requirement, so it is usually more
expensive.
 78

 Shared Hosting:

 Shared Hosting is a type of hosting where a hosting provider hosts

multiple websites in different client accounts on a physical server
and shares server resources. In Shared Hosting, customers can
configure their website settings separately without knowing which
websites they share server resources with.

 Virtual Private Servers:

 Virtual Private Servers are also a type of dedicated servers available

at a lower cost and work similarly to a dedicated server. It is a large
server that is partitioned into a smaller server where the user has to
install an operating system.

 Grid Hosting:

 Grid Hosting is a hosting service that uses a grid computing

architecture. In this type of hosting, resources are placed on multiple
servers instead of being hosted on a single server.

 Co-located Hosting:

 Instead of keeping servers in-house or at a private data centre, you

may choose to” co-locate” your equipment by renting space in a
colocation centre. The centre will provide the power, bandwidth, IP
address and cooling systems that your server requires. Space is
rented out in racks and cabinets.

2. Registering Domain name:

Step 1: go to a site where you can buy domain name for example
godaddy.com and searcher if the domain name you want is available.
 79

Step 2: after you search for the domain main it will show you all the
available option to choose from.

Step 3: from the available option select the domain name you want and
click buy now.
 80

Step 4: you will see your desired domain name added to the cart.

Step 5: it will show you your total amount of how much you will have to
pay to buy the domain name.

Step 6: Sign in to proceed.

 81

Step 7: select a payment method.

Step 8: your domain has been registered successfully.

3. Defining name server.

3.1 What Does Name Server Mean?
 82

A name server is a server that helps to translate IP addresses into

domain names. These pieces of IT infrastructure are often required parts
of a Web setup, where domain names serve as easier identifiers for a
given location on the web.

3.2 Configuring records for the nameserver in the cPanel

You can use your domain cPanel Zone editor to configure a wide range
of records that the nameserver relies on. This allows you to add and edit
records such as the servers, IP addresses, and more.
After changing the nameservers, either from the registrar, or from one
host to another, the DNS records are usually overwritten by those of the
hosting provider.
However, you can use the domain Zone editor to create or edit some
entries such as those for the mail servers, subdomains, FTP, etc.

Log in to your control panel using

http://yourdomainname.com/cpanel or
http://yourdomainname.com:2082

Enter your domain cPanel username and password

Navigate to Domains and open Zone Editor.
 83

If you have several domains, select the domain you want to configure
and click the record you want to add.

The zone editor above only allows you to add A, CNAME or MX records.
However, clicking Manage gives the option to add more record entries.
If you click add A Record, you will be prompted to enter the subdomain
name and an IP address since the domain is already there.

Managing Records entries

The Manage option allows you to change entries such as domain names
and IP addresses
 84

Select the domain you want to configure and click Manage, (it gives you
an option to add other records or edit existing ones).
To add a record, click + Add Record.
Select the record you want to add and proceed.

Use the drop-down list to select and add other records.

 85

Editing a record
Click Edit for the field you want to change and insert your settings. For
example, to edit the MX records for the mail server;
 Click Add MX Record
 Type your mail server name such as mail.yourdomainname.com
 Type the IP address for your mail server
 Save Record

Changing the name servers

Most domain registrars, who also provide hosting, will by default use
their nameserver for all the domains they have registered. However, the
domain owner can point it to another hosting server away from the
registrar.

This requires changing the nameservers at the registrar so as to reflect

those of the hosting provider. It can take up to 48 hours for the
nameserver changes to take effect. However, this delay, also known as
DNS propagation, takes an average of between 4 and 8 hours.

Most companies prefer purchasing domains from reliable or cheap

registrars and then use a different provider for hosting. This allows them
to select a hosting environment that meets the organization’s
requirements. Usually, the hosting provider will give you the details of
its nameservers.

Typical nameservers have names in the following formats.

 dns1.registrar-name.com
 , or
 dns1.host-name.com
 dns2.registrar-name.com
 86

 , or
 dns2.host-name.com
 ns1.registrar-name.com
 , or
 ns1.host-name.com
 ns2.registrar-name.com

or

ns2.host-name.com
By default, the registrar will point the domain to their nameservers. If
you host your domain away from the registrar or moves to a different
host, you need to change the nameservers at your domain registrar’s
dashboard.

The actual process of changing may differ slightly depending on the

registrar’s website.

However, the basics remain the same and usually include;

 Logging in to your account on the registrar’s website

 Selecting the domain to configure
 Opening the nameservers settings area (this will have the
registrar’s nameservers)
 Look for and open the custom option, or similar name depending
on the registrar.
 Replace existing nameservers with your new ones and save
settings.

Once you change the nameservers for your domain, the new settings do
not become active immediately. It takes several hours for the new
settings to propagate throughout the internet. During part of this
propagation period, the domain and hence your website will be down
and inaccessible. As such, the best time to change is during the weekend,
night or any other low traffic period.
 87

4. Web Security

4.1. Principles of web security

 Authentication
 Authorization
 Confidentiality
 Data / Message integrity
 Availability
 Accountability
 Non-repudiation

4.2. Cryptography
Cryptography is the practice and study of techniques for secure
communication in the presence of third parties (called adversaries)
More generally, it is about constructing and analyzing protocols that
overcome the influence of adversaries and which are related to various
aspects in information security such as data confidentiality, data
integrity, authentication, and non-repudiation
Cryptography intersects the disciplines of mathematics, computer
science, and electrical engineering.
Applications of cryptography include ATM cards, computer passwords,
and electronic commerce.
The modern field of cryptography can be divided into several areas of
study. The chief ones are discussed here:
 Public Key Encryption or Asymmetric key-based algorithm,
 Symmetric key-based algorithms, or block-and-stream ciphers,
 Hashing, or creating a digital summary of a string or file

Public/Private Key-Based Encryption (PKE)

 In public-key cryptography, a user has a pair of keys: public and
private.
 88

 Private key is kept private and public key is distributed to other

users.
 Owner of the private key never ever shares the private key with
anyone.
 Public key cryptography uses one key (the public key) to encrypt a
message and a different key (the private key) to decrypt it.

4.3. Digital certificate

a digital certificate is a file or electronic password that proves the
authenticity of a device, server, or user through the use of cryptography
and the public key infrastructure. Digital certificate authentication helps
organizations ensure that only trusted devices and users can connect to
their networks.
It contains your name, a serial number, expiration dates, a copy of the
certificate holder's public key (used for encrypting messages and digital
signatures), and the digital signature of the certificate-issuing authority
so that a

Digital signature

A digital signature is a mathematical scheme for demonstrating the

authenticity of a digital message or document.
 89

A valid digital signature gives a recipient reason to believe that the

message was created by a known sender, and that the message was not
altered in transit (integrity).
Digital signatures are commonly used for software distribution, financial
transactions, and in other cases where it is important to detect forgery
or tampering.
Digital Signature/Electronic Signature can be defined as a computer
data compilation of any symbol or series of symbols, executed, adopted,
or authorized by an individual to be the legally binding equivalent of the
individual’s handwritten signature
Digital signatures employ a type of asymmetric cryptography
Digital signature schemes in the sense used here are cryptographically
based, and must be implemented properly to be effective. Digital
signatures can also provide non-repudiation

5. Secure socket layer

 SSL – Secure Socket Layer
 SSL was developed by Netscape
 SSL version 3.0 has been implemented in many web browsers (e.g.,
Netscape Navigator and MS Internet Explorer) and web servers
and widely used on the Internet
 SSL v3.0 was specified in an Internet Draft (1996)
 90

 It is a whole new layer of protocol which operates above the

Internet TCP protocol and below high-level application protocols.
 SSL is a secure protocol which runs above TCP/IP and allows users
to encrypt data and authenticate servers/vendors identity
securely

6.1. What can SSL do

 SSL uses TCP/IP on behalf of the higher-level protocols.
 Allows an SSL-enabled server to authenticate itself to an
SSL-enabled client;
 Allows the client to authenticate itself to the server;
 Allows both machines to establish an encrypted connection.
 SSL includes two sub-protocols: the SSL Record Protocol and the
SSL Handshake Protocol.
 Record Protocol -- defines the format used to transmit data.
 Handshake Protocol -- using the Record protocol to exchange
messages b/t an SSL-enable server and an SSL-enable client.

6.2. SSL components

SSL Handshake Protocol
negotiation of security algorithms and parameters
key exchange
server authentication and optionally client authentication
SSL Record Protocol
fragmentation
compression
message authentication and integrity protection
encryption
SSL Alert Protocol
error messages (fatal alerts and warnings)
SSL Change Cipher Spec Protocol
a single message that indicates the end of the SSL handshake
 91

6.3. How SSL works

 How a client and a server create a secure connection?
 The SSL protocol uses RSA public key cryptography for Internet
Security.
 Public key encryption uses a pair of asymmetric keys for
encryption and decryption.
 Each pair of keys consists of a public key and a private key. The
public key is made public by distributing it widely; the private key
is always kept secret.
 Data encrypted with the public key can be decrypted only with the
private key, and vice versa.