Web Technologies Laboratory

Guru Nanak Dev Engineering College,
Ludhiana
Web Technologies Laboratory
Submitted To: Submitted By :

INDERJEET SINGH BAMRAH Aakash Raj
Assistant Professor 1507884/156096
Information Technology Group-D2 IT A1
Semester:-4th
Contents
1 To implement various concept of HTML5 canvas. 2
1.1 Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 To implement the concept of HTML5 Audio/Video,Storage,Web Workers 4

2.1 HTML5 Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 HTML5 Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 HTML5 Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 To implement the concept of HTML5 Geolocations and GPS, various HTML5

forms, elements and attribute 8
3.1 Geolocations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2 GPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 HTML5 forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4 To study and implement concept of CSS3 using its various properties 15
5 To set up complete web development environment for PHP using XAMP/

WAMP/ LAMP. 20
5.1 How to Install XAMPP and WordPress Locally on PC/Windows . . . . . . . . . . 20
6 To design and develop login page using jQuery and bootstrap 25
7 To implement the concept of jQuery DOM traversal and jQuery e↵ects. 28

7.1 jQuery DOM traversal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2 jQuery e↵ects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
8 To design and develop server side web page using PHP for implementing basic
operators, conditional and looping statements. 33
9 To design and develop server side web page illustrating various built in functions
related to date, strings and file handling. 36
10 To develop server side web page using PHP for performing MySQL basic state-
ments related to insertion, deletion, updation and selection of data. 37
11 To develop server side web page using PHP for implementing the concept of
classes, objects and inheritance. 41
12 To develop a server side web page for performing asynchronous database access
using jQuery, PHP, MySQL and AJAX. 42
13 To setup codeigniter framework and study its di↵erent components 48
14 To setup wordpress and to learn theme and module installation 51

1 To implement various concept of HTML5 canvas.
1.1 Input
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Spinner</title>
<style type="text/css">
#myCanvas {
width: 50;
height: 50;
padding: 30px;
}
</style>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById(’myCanvas’);
var context = canvas.getContext(’2d’);
var start = new Date();
var lines = 20,
cW = context.canvas.width,
cH = context.canvas.height;
var draw = function() {

var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4, 0);
context.lineWidth = cW / 30;
context.strokeStyle = "rgba(0, 0, 0," + i / lines + ")";
context.stroke();
}
context.restore();
};
window.setInterval(draw, 1000 / 30);
</script>
</body>
</html>
1.2 Output
canvas.jpg canvas.jpg
Figure 1: HTML5 canvas

2 To implement the concept of HTML5 Audio/Video,Storage,Web
Workers
2.1 HTML5 Audio
Input
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="Vande Mataram-(InMaza.com).ogg" type="audio/ogg">
<source src="Vande Mataram-(InMaza.com).mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output
Figure 2: HTML5 Audio
2.2 HTML5 Audio
Input
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="Laembadgini (Full Song) _ Diljit Dosanjh _ Latest Punjabi Song 2016 _ Speed Records
<source src="Laembadgini (Full Song) _ Diljit Dosanjh _ Latest Punjabi Song 2016 _ Speed Records
Your browser does not support HTML5 video.
</video>
<p>
Laembadgini _ Diljit Dosanjh _ Latest Punjabi Song 2016
</p>
</body>
</html>
Output
Figure 3: HTML5 Video
2.3 HTML5 Storage
Input
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStor
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web st
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
Output
Figure 4: HTML5 Storage
2.4 Web Workers
Input
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Wo
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Output
Worker.png Worker.png

3 To implement the concept of HTML5 Geolocations and
GPS, various HTML5 forms, elements and attribute
3.1 Geolocations
Input
<!DOCTYPE html>
<html>
<head>
<title>Sample Map</title>
<style>
#mapdiv {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var watchId = null;
function geoloc() {
if (navigator.geolocation) {
var optn = {
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
} else {
alert(’Geolocation is not supported in your browser’);
}
}
function showPosition(position) {
var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom : 12,
center : googlePos,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapObj = document.getElementById(’mapdiv’);
var googleMap = new google.maps.Map(mapObj, mapOptions);
var markerOpt = {
map : googleMap,
position : googlePos,
title : ’Hi , I am here’,
animation : google.maps.Animation.DROP
};
var googleMarker = new google.maps.Marker(markerOpt);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
’latLng’ : googlePos
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var popOpts = {
content : results[1].formatted_address,
position : googlePos
};
var popup = new google.maps.InfoWindow(popOpts);
google.maps.event.addListener(googleMarker, ’click’, function() {
popup.open(googleMap);
});
} else {
alert(’No results found’);
}
} else {
alert(’Geocoder failed due to: ’ + status);
}
});
}
function stopWatch() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
function showError(error) {
var err = document.getElementById(’mapdiv’);
switch(error.code) {
case error.PERMISSION_DENIED:
err.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
err.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
err.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
err.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</head>
<body onload="geoloc()">
<p id = ’mapdiv’></p>
<button onclick="stopWatch()">
Stop
</button>
</body>
</html>
Output
Figure 6: HTML5 Geolocations

3.2 GPS
Input
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Output
Figure 7: HTML5 GPS

3.3 HTML5 forms
Input
<html>
<head>
<title>Sign in or create an account </title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
<style>
p{
color: #00234b;
font-family: sharp-sans-bold,Arial,sans-serif;
font-size: 24px;
line-height: 32px;
margin: 150px 0px 0px 250px;
font-weight: 400;
font-style: normal;
}
p1{
color: #00234b;
font-size: 15px;
line-height: 32px;
margin-left: 200px;
font-family: sharp-sans-bold,Arial,sans-serif;
}
p2{
margin-left: 200px;
margin-top: 20px;
}
input[type=email] {
width: 350;
margin-left: 200px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(’searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
input[type=password] {
width: 350;
margin-left: 200px;
margin-top: 20px;
border-radius: 4px;
font-size: 16px;
background-color: white;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #228BF4;
color: white;
width: 350;
margin-left: 200px;
margin-top: 20px;
border-radius: 4px;
font-size: 16px;
background-image: url(’searchicon.png’);
text-decoration: none;
cursor: pointer;
}
body {
background-image: url("master-en-rrhh .jpg");
}
</style>
</head>
<body>
<p>Sign in or create an account</p>
<p1>Sign into your My Doctor account</p1>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
<input type="email" data-test="email-input" class="email-input textbox__textbox___1zvBz" placeh
<input type="password" data-test="password-input" class="password-input textbox__textbox___1zvBz
<input type="submit" value="Submit"><br>
<p2> <font size="4" color="#00234b"><a class="SignInFormView__forgot-password-link___2JHOh link__
<a href="file:///Users/aakashraj/Desktop/Im%20project/aakash2.htm">
<input type="button" value="Create an account"></a>
</form>
</p2>
</body>
</body>
</html>
Output

4 To study and implement concept of CSS3 using its various
properties
Input
<!DOCTYPE html>
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;

background-size: cover;
height:100%;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: ’Montserrat’, Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
</style>
</head>
<body>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]]
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment"
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</body>
</html>
Output
Figure 9: concept of CSS3

5 To set up complete web development environment for
PHP using XAMP/ WAMP/ LAMP.
5.1 How to Install XAMPP and WordPress Locally on PC/Windows
What is XAMPP ?
XAMPP stands for cross-platform, Apache, MySQL, PHP and Perl. Its a simple and lightweight
solution that allows you to create a local web server for testing purposes.
Since XAMPP is cross-platform, it also works on Mac and Linux, but today we are going to focus
on how to set up XAMPP on Windows 10.
WordPress is not a stand-alone application and requires server software in order to run. XAMPP
provides the necessary environment needed to run WordPress on a local machine.
Installing XAMPP
Go to the Apache Friends website and download XAMPP.
The XAMPP file is 109MB. Once downloaded, launch the installer.

During the install process, you may receive warnings such as Windows asking you if you are sure
you want to install the software and the installer prompting you about antivirus software. As you
would when installing any software on Windows, use your best judgment, but you probably want
to click Yes to continue with the install.
The XAMPP setup wizard will guide you through the installation. Click Next.
In the next window, you will be asked to select which components of the software you would like
to install and which ones you do not want. Some options, such as Apache and PHP are essential
to running the software and will at automatically installed, so they are grayed out so you can not
select them.
It is up to you which components you want to install. Since we want to run WordPress in our lo-
calhost environment, leave MySQL and phpMyAdmin checked and uncheck the remaining options.
Next, select the folder where you would like to install XAMPP on your machine. I am going to
create a new folder in
In the next window, you all be asked whether you would like to install Bitnami for XAMPP, which
o↵ers free tools for installing WordPress, Drupal, and Joomla! on top of XAMPP.
Since we are going to install WordPress manually later in this tutorial and do not need free in-
stallers, untick Learn more about Bitnami for XAMPP and click Next.
After going through all those initial installation steps, XAMPP is now finally ready to install. Click
Next.
Once installed, you?ll be asked whether you would like to start the XAMPP Control Panel, which
provides an interface for running your localhost environment. Leave this option ticked and click
Finish.
The Control Panel will automatically open, but if you unchecked the option in the previous window,
you can go to the XAMPP folder on your computer and open XAMPP Control Panel instead.
If the installation process went well and everything is running smoothly, the control panel will open
with black and blue text updates at the bottom. But if there are issues?
? Well, look at that ? red text! It looks like I?ve run into some errors already. Not to fear, it
looks like a port conflict.

Fixing Port Errors The main reason why XAMPP throws up errors like this is due to another
program on your machine using ports 80 or 443 the ports Apache and MySQL need in order to
run.
If you are using Windows 10, World Wide Web Publishing Service is most likely using post 80. This
program, which is for Internet Information Services (IIS) for Windows Server, comes pre-installed
and if you are not using it, you can simply stop the service running on your machine or even delete it.
6 To design and develop login page using jQuery and boot-
strap
Input
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="style
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></scrip
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/ValidationFormScript.js"></script>
<title>bootstrap login validation demo</title>
</head>
<body>
<div class="container">
<h1 class="text-center">bootstrap login validation </h1>
<div class="jquery-script-ads text-center"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<form class="form-horizontal" id="form1">
<fieldset>

<legend>
<center>
Validation Form
</center>
</legend>

<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw
<input id="Email" name="Email" type="text" placeholder="Enter Your Email" class="form-co
</div>
</div>
</div>

<label class="col-md-4 control-label" for="Password">Password</label>
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i><
<input id="password" name="password" type="password" placeholder="Enter Your Password" c
</div>
</div>
</div>

<label class="col-md-4 control-label" for="ConfirmPassword">Confirm Password</label>
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i><
<input id="password_again" name="password_again" type="password" placeholder="Enter Your
</div>
</div>
</div>

<label class="col-md-4 control-label" for="Submit"></label>
<button id="Submit" class="btn btn-success" type="Submit">Press To Validate</button>
</div>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([’_setAccount’, ’UA-36251023-1’]);
_gaq.push([’_setDomainName’, ’jqueryscript.net’]);
_gaq.push([’_trackPageview’]);
(function() {
var ga = document.createElement(’script’); ga.type = ’text/javascript’; ga.async = true;
ga.src = (’https:’ == document.location.protocol ? ’https://ssl’ : ’http://www’) + ’.google-an
var s = document.getElementsByTagName(’script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Output
Figure 10: bootstrap login validation
Figure 11: bootstrap login validation

7 To implement the concept of jQuery DOM traversal and
jQuery e↵ects.
7.1 jQuery DOM traversal
Input
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 30px 0;
}
div {
margin: 5px;
padding: 5px;
border: 1px solid #DDD;
}
.selected {
border: 2px solid black;
}
.item-level1 {
background-color: #eef;
}
.item-level2 {
background-color: #efe;
}
.item-level3 {
background-color: #fee;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
const tree1 = document.querySelector(’.tree1’);
const node1 = document.querySelector(’.tree1 .item-d2a’);
const tree2 = document.querySelector(’.tree2’);
const findNodePosition = (node) => [].indexOf.call(node.parentNode.childNodes, node);
const getNodePathInTree = (node, root) => {
let currentNode = node;
let path = [];
while (currentNode !== root) {
// prepend new index to the front of the array
path.unshift(findNodePosition(currentNode));
currentNode = currentNode.parentNode;
}
return path;
};
const findMirrorNodeInTree = (givenNode, fromRoot, inRoot) => {
if (givenNode === fromRoot) {
return inRoot;
}
const path = getNodePathInTree(givenNode, fromRoot);
let mirrorNode = inRoot;
path.forEach(
(value) => {
mirrorNode = mirrorNode.childNodes[value];
}
)
return mirrorNode;
}
console.log(’NODE FROM TREE 1=’, node1);
console.log(’OTHER NODE FROM TREE 2=’, findMirrorNodeInTree(node1, tree1, tree2));
</script>
</head>
<body>
<div class="tree1">
<div class="item item-level1 item-a">item A</div>
<div class="item item-level1 item-b">
<div class="item item-level2 item-b1">item B1</div>
<div class="item item-level2 item-b2">
<div class="item item-level3 item-b2a">item B2a</div>
<div class="item item-level3 item-b2b">item B2b</div>
</div>
</div>
<div class="item item-level1 item-c">
<div class="item item-level2 item-c1">item C1</div>
<div class="item item-level2 item-c2">item C2</div>
</div>
<div class="item item-level1 item-d">
<div class="item item-level2 item-d1">item D1</div>
<div class="item item-level2 item-d2">
<div class="item item-level3 item-d2a selected">THIS NODE (item D2a)</div>
<div class="item item-level3 item-d2b">item D2b</div>
</div>
<div class="item item-level2 item-d3">item D3</div>
</div>
</div>
</body>
</html>
Output
traversal.png traversal.png
Figure 12: jQuery DOM traversal
7.2 jQuery e↵ects
Input
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding: 10px;
background: transparent;
color: #066;
border: 1px solid #066;
cursor: pointer;
outline: none;
margin-left: 10px;
}
button:hover{
background: #066;
color: #FFF;
}
div{
width: 800px;
height: 200px;
background: transparent;
border: 1px solid #000;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
"use strict";
var div = $("div");
//CSS
$(".red").click(function () {
div.css({background: "red"});
// change background in CSS
});
//hide
$(".hide").click(function () {
div.hide(1000);
// make a Display: none in CSS to div
});
// Show
$(".show").click(function () {
div.show(1000);
// make a Display: block in CSS to div
});
// Fade Out
$(".fadeOut").click(function () {
div.fadeOut(1000);
// make a opacity: 0 in CSS to div
});
// Fade In
$(".fadeIn").click(function () {
div.fadeIn(1000);
// make a opacity: 1 in CSS to div
});
//slideUp
$(".slideUp").click(function () {
div.slideUp(1000);
// make a div slide up in CSS height: 0
});
//slideDown
$(".slideDown").click(function () {
div.slideDown(1000);
// make a div slide up in CSS height: 100%
});
//Animation
$(".animation").click(function () {
div.animate({
width: "300px",
height: "50px"
}, 2000, function () {
div.css({
width: "800px",
height: "200px"
});
});
});
//remove
$(".remove").click(function () {
div.remove();
//completly remove div from code and screen
});
});
</script>
</head>
<body>
<button class="red">Red</button>
<button class="hide">Hide</button>
<button class="show">Show</button>
<button class="fadeOut">Fade Out</button>
<button class="fadeIn">Fade In</button>
<button class="slideUp">Slide Up</button>
<button class="slideDown">Slide Down</button>
<button class="animation">Animation</button>
<button class="remove">remove</button>
<div></div>
</body>
</html>
Output
e↵ects.png e↵ects.png
Figure 13: jQuery e↵ects

8 To design and develop server side web page using PHP
for implementing basic operators, conditional and looping
statements.
Input
<!DOCTYPE html>
<html>
<body>
<?php
ini_set(’display_errors’,0);
if( isset( $_REQUEST[’calculate’] ))
{
$operator=$_REQUEST[’operator’];
if($operator=="+")
{
$add1 = $_REQUEST[’fvalue’];
$add2 = $_REQUEST[’lvalue’];
$res= $add1+$add2;
}
if($operator=="-")
{
$res= $add1-$add2;
}
if($operator=="*")
{
$res =$add1*$add2;
}
if($operator=="/")
{
$res= $add1/$add2;
}
if($_REQUEST[’fvalue’]==NULL && $_REQUEST[’lvalue’]==NULL)
{
echo "<script language=javascript> alert(\"Please Enter values.\");</script>";
}
else if($_REQUEST[’fvalue’]==NULL)
{
echo "<script language=javascript> alert(\"Please Enter First value.\");</script>";
}
else if($_REQUEST[’lvalue’]==NULL)
{
echo "<script language=javascript> alert(\"Please Enter second value.\");</script>";
}
}
?>
<form>
<table style="border:groove #00FF99">
<tr>
<td style="background-color:aqua; color:red; font-family:’Times New Roman’">Enter
<td colspan="1">
<input name="fvalue" type="text" style="color:red"/></td>

<tr>
<td style="color:burlywood; font-family:’Times New Roman’">Select Operator</td>
<td>
<select name="operator" style="width: 63px">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select></td>
</tr>
<tr>
<td style="background-color:aqua; color:red; font-family:’Times New Roman’">Enter
<td class="auto-style5">
<input name="lvalue" type="text" style="color:red"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="calculate" value="Calculate" style="color:wheat;bac
</tr>
<tr>
<td style="background-color:aqua;color:red">Output = </td>
<td style="color:darkblue"><?php echo $res;?></td>
</tr>
</table>
</form>
</body>
</html>
Output
Figure 14: PHP for implementing basic operators

9 To design and develop server side web page illustrating
various built in functions related to date, strings and file
handling.
Input
<!DOCTYPE html>
<html>
<body>
<?php
$d=strtotime("tomorrow");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("next Saturday");
$d=strtotime("+3 Months");
?>
</body>
</html>
Output
Figure 15: Date From a String With PHP

10 To develop server side web page using PHP for perform-
ing MySQL basic statements related to insertion, dele-
tion, updation and selection of data.
Input
Php Source Code:

<?php
$dsn = ’mysql:host=localhost;dbname=test_db’;
$username = ’root’;
$password = ’’;
try{
// Connect To MySQL Database
$con = new PDO($dsn,$username,$password);
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $ex) {
echo ’Not Connected ’.$ex->getMessage();
}
$id = ’’;
$fname = ’’;
$lname = ’’;
$age = ’’;
function getPosts()
{
$posts = array();
$posts[0] = $_POST[’id’];
$posts[1] = $_POST[’fname’];
$posts[2] = $_POST[’lname’];
$posts[3] = $_POST[’age’];
return $posts;
}
//Search And Display Data
if(isset($_POST[’search’]))
{
$data = getPosts();
if(empty($data[0]))
{
echo ’Enter The User Id To Search’;
} else {
$searchStmt = $con->prepare(’SELECT * FROM users WHERE id = :id’);

$searchStmt->execute(array(
’:id’=> $data[0]
));
if($searchStmt)
{
$user = $searchStmt->fetch();
if(empty($user))
{
echo ’No Data For This Id’;
}
$id = $user[0];
$fname = $user[1];
$lname = $user[2];
$age = $user[3];
}
}
}
// Insert Data
if(isset($_POST[’insert’]))
{
$data = getPosts();
if(empty($data[1]) || empty($data[2]) || empty($data[3]))
{
echo ’Enter The User Data To Insert’;
} else {
$insertStmt = $con->prepare(’INSERT INTO users(fname,lname,age) VALUES(:fname,:lname,:age)

$insertStmt->execute(array(
’:fname’=> $data[1],
’:lname’=> $data[2],
’:age’ => $data[3],
));
if($insertStmt)
{
echo ’Data Inserted’;
}
}
}
//Update Data
if(isset($_POST[’update’]))
{
$data = getPosts();
if(empty($data[0]) || empty($data[1]) || empty($data[2]) || empty($data[3]))
{
echo ’Enter The User Data To Update’;
} else {
$updateStmt = $con->prepare(’UPDATE users SET fname = :fname, lname = :lname, age = :age W
$updateStmt->execute(array(
’:id’=> $data[0],
’:fname’=> $data[1],
’:lname’=> $data[2],
’:age’ => $data[3],
));
if($updateStmt)
{
echo ’Data Updated’;
}
}
}
// Delete Data
if(isset($_POST[’delete’]))
{
$data = getPosts();
if(empty($data[0]))
{
echo ’Enter The User ID To Delete’;
} else {
$deleteStmt = $con->prepare(’DELETE FROM users WHERE id = :id’);

$deleteStmt->execute(array(
’:id’=> $data[0]
));
if($deleteStmt)
{
echo ’User Deleted’;
}
}
}
?>
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>PHP (MySQL PDO): Insert, Update, Delete, Search</title>
</head>
<body>
<form action="php_mysql_insert_update_delete_search.php" method="POST">
<input type="text" name="id" placeholder="id" value="<?php echo $id;?>"><br><br>

<input type="text" name="fname" placeholder="First Name" value="<?php echo $fname;?>">
<input type="text" name="lname" placeholder="Last Name" value="<?php echo $lname;?>"><
<input type="number" min="10" max="100" name="age" placeholder="Age" value="<?php echo
<input type="submit" name="insert" value="Insert">

<input type="submit" name="update" value="Update">
<input type="submit" name="delete" value="Delete">
<input type="submit" name="search" value="Search">
</form>
</body>
</html>
Output
Figure 16: PHP for performing MySQL

11 To develop server side web page using PHP for imple-
menting the concept of classes, objects and inheritance.
Input
< ?php
class Vehicle
{
public $color;
public $accelerate;
public $decelerate;
function design($assign)
{
$this->color = $assign;
}
function acceleration($positive)
{
$this->accelerate = $positive;
}
function deceleration($negetive)
{
$this->decelerate = $negetive;
}
}
?>
Output
Using the methods design, acceleration and deceleration we assign values to the public
attributes color, accelerate and decelerate.
12 To develop a server side web page for performing asyn-
chronous database access using jQuery, PHP, MySQL
and AJAX.
Create MySql database and table using PHPMyAdmin
create DATABASE dbusers;

CREATE TABLE IF NOT EXISTS users ( id int(11) NOT NULL,
first_name varchar(255) NOT NULL,
last_name varchar(255) NOT NULL,
email varchar(255) NOT NULL )
ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE users ADD PRIMARY KEY (id);
ALTER TABLE users MODIFY id int(11) NOT NULL AUTO_INCREMENT;
INSERT INTO users (id, first_name, last_name, email)
VALUES (NULL, ?John?, ?Doe?, ?john.doe@example.com?), (NULL, ?Mark?, ?William?, ?mark.william@exam
Create MySql database and table using PHPMyAdmin
<html>
<head>
<title>jQuery AJAX Example</title>
</head>
<body>
<p><strong>Click on button to view users</strong></p>
<div id = "container" >
<div id="records"></div>
<p>
<input type=?button? id = "getusers" value = "Get Users" />
</p>
</div>
<script src=?http://code.jquery.com/jquery-3.1.1.min.js?></script>
<script type=?text/javascript?>
$(function(){ $("#getusers").on(?click?, function(){

$.ajax({ method: "POST", url: "getrecords.php", })
.done(function( data ) {
var result = $.parseJSON(data);
var string = ’<table>

<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<tr>’;
/* from result create a string of data and append to the div */
$.each( result, function( key, value ) {

string += <tr>
<td>?+value[’id’] + "</td>
<td> " + value[?first_name?]+’ ’+value[’last_name’]+’</td>
<td> ’+ value[?email?]+?</td> </tr>?; });
string += ’</table>’;
$("#records").html(string);
});
});
});
</script>
</body>
</html>
jQuery Ajax Code
$("#getusers").on(’click’, function(){
$.ajax({
method: "GET", url: "getrecords.php",
}).done(function( data ) {

var string = ’<table><tr><th>#</th><th>Name</th><th>Email</th></tr>’;
//from result create a string of data and append to the div

$.each( result, function( key, value ) {
string += "<tr>
<td>"+value[’id’] + "</td>
<td> " + value[’first_name’]+’ ’+value[’last_name’]+’</td>
<td> ’+ value[’email’]+"</td>
</tr>";
});
string += ’</table>’;
$("#records").html(string);
});
Database connection
<?php
$host = "localhost";
$username = "root";
$password = "";
$dbname = "dbusers";
$result_array = array();
/* Create connection */
$conn = new mysqli($host, $username, $password, $dbname);
/* Check connection */
if ($conn->connect_error) {
die("Connection to database failed: " . $conn->connect_error);

}
/* SQL query to get results from database */
$sql = "SELECT id, first_name, last_name, email FROM users ";
$result = $conn->query($sql);
/* If there are results from database push to result array */

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
array_push($result_array, $row);
}
}
/* send a JSON encded array to client */
echo json_encode($result_array);
$conn->close();
?>
HTML form and jQuery Code
<html>
<head>
<title>jQuery AJAX POST Example</title>
</head>
<body>
<p>
<strong>Please fill in the form and click save.</strong>
</p>
<div id = "container" >
<div id="message"></div>
<p>
<form name=’form1’>
<label>First Name:</label>
<input type=’text’ placeholder=’First Name’ name=’first_name’ id= ’first_name’ required ><br />
<label>Last Name:</label>
<input type=’text’ placeholder=’Last Name’ name=’last_name’ id=’last_name’ required ><br />
<label>Email:</label>
<input type=’email’ ’name=’email’ placeholder=’email’ id=’email’ required ><br />
<input type="button" id = "saveusers" value = "Save" />
</form>
</p>
</div>
<script src=?http://code.jquery.com/jquery-3.1.1.min.js?></script>
<script type=?text/javascript?>
$(function(){
$("#saveusers").on(’click’, function(){
var fname = $("#first_name").val();
var lname = $("#last_name").val();
var email = $("#email").val();
$.ajax({
method: "POST",
url: "saverecords.php",
data: {"first_name": first_name, "last_name": last_name, "email": email},

}).done(function( data ) {
var str = ’’;
if(result == 1) {
str = ’User record saved successfully.’;
}else if( result == 2) {

str == ’All fields are required.’;
} else{
str = ’User data could not be saved. Please try again’;
}
$("#message").css(’color’, ’red’).html(str);
});
});
</script>
</body>
</html>
Output
Figure 17: performing asynchronous database access using jQuery, PHP, MySQL and AJAX.
13 To setup codeigniter framework and study its di↵erent
components
CodeIgniter Installation and Configuration CodeIgniter is a simple web application devel-
opment framework for PHP. By its modular approach we can use its inbuilt libraries and helpers
in our application.
We can separate logic from presentation by using a Model-View-Controller (MVC) pattern.
In this tutorial we are going to explain you, how to install and configure the CodeIgniter frame-
work. Below mentioned are the step by step process and installation instructions that you can
follow to get CodeIgniter installed on your local computer.
Step 1 : Downloading CodeIgniter Framework
Go to http://www.codeigniter.com and download current version of CodeIgniter framework. In

this tutorial we are using CodeIgniter 2.2.
Step 2 : Installing and Exploring CodeIgniter
After downloading CodeIgniter you will receive files in a zip format. So, first you need to unzip it,
and rename the ?CodeIgniter-2.2-stable? folder to your application name.
In this tutorial we are renaming ?CodeIgniter-2.2-stable? folder to CodeIgniter.
Now copy it to your PHP and MySQL enabled server. In this tutorial we are using WAMP(Windows,
Apache, Mysql, PHP).
Step 3 : Configuring CodeIgniter
For running CodeIgniter application you need to setup the right base URL of the app. To do this
Syntax:
$config[’base_url’] = "http://localhost/CodeIgniter/";
Step 4 : Testing CodeIgniter
Here we do quick test to see CodeIgniter application running properly or not. Go to
http://localhost/codeigniter/
and you should see the following. Means its working proper
Step 5 : Database configuration :
To connect with database CodeIgniter provides a configuration file in config folder with name
database.php. Below is the mentioned path
C:/wamp/www/CodeIgniter/application/config/database.php To setup connectivity with your database
you need to do the changes as mentioned in below code:
$db[’default’][’hostname’] = "localhost";
$db[’default’][’username’] = "root"; // Your username if required.
$db[’default’][’password’] = ""; // Your password if any.
$db[’default’][’database’] = "database_name"; // Your database name.
$db[’default’][’dbdriver’] = "mysql";
$db[’default’][’dbprefix’] = "";
$db[’default’][’pconnect’] = TRUE;
$db[’default’][’db_debug’] = FALSE;
$db[’default’][’cache_on’] = FALSE;
$db[’default’][’cachedir’] = "";
$db[’default’][’char_set’] = "utf8";
$db[’default’][’dbcollat’] = "utf8_general_ci";
$db[’default’][’swap_pre’] = "";
$db[’default’][’autoinit’] = TRUE;
$db[’default’][’stricton’] = FALSE;
Also you can even set CodeIgniter?s form helper that will help you to generate HTML tags auto-
matically.
After performing these setting you are ready to perform database activities like insert, update,
delete.
If you want to test the connectivity then you can create a database and can perform CRUD activity.
14 To setup wordpress and to learn theme and module in-
stallation
Install WordPress
The stage is now set and you?re free to move on to more familiar ground by installing WordPress
itself. The process here is essentially the same as installing on a live server; the server just happens
to be located on your machine.
Begin by downloading the latest version of

WordPress and extracting it to a named folder
in the Document Root you defined earlier.
Let?s assume in this instance you call the folder
my-wordpress.
Make sure MAMP is running Apache and
MySQL and navigate via browser to the Word-
Press install script in that folder.
Navigating to there should kick you into the
familiar WordPress 5-Minute Install sequence.
Complete this using the database details you
created previously and you are now free to de-
velop locally at your leisure.
Taking Your Local WordPress Install to
the Next Level
Congratulations You are now covered for basic
local development in WordPress. At some stage
though, you?re going to be looking to spread
your wings a little in terms of the complexity
and sophistication of your setup. Here are three
more advanced topics to explore when you?re ready to take your local WordPress environment to
the next level:
1. Desktop Server
Desktop Server is a tool for automating and managing many of the steps we?ve just taken across
multiple local installs. It can also be used to sync these local sites with live environments. Free
and premium versions are available.
2. Varying Vagrant Vagrants
Not for the faint-hearted, Varying Vagrant Vagrants is a sophisticated approach that leverages the
power of virtual machines in Vagrant to create programatically reproducible WordPress develop-
ment environments. There?s a great intro to the concept over at WebDevStudios.
3. Exploring Development Workflow
We?ve concentrated on the local environment here, but more sophisticated setups will call for a
full local -¿ staging -¿ production workflow. This is a vast topic, but you can start dipping a toe
in the water with WordPress Tavern?s overview.

Web Technologies Laboratory

Uploaded by

Document Information

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Web Technologies Laboratory

Uploaded by

Copyright:

Guru Nanak Dev Engineering College,

Web Technologies Laboratory

Submitted To: Submitted By :

2 To implement the concept of HTML5 Audio/Video,Storage,Web Workers 4

3 To implement the concept of HTML5 Geolocations and GPS, various HTML5

4 To study and implement concept of CSS3 using its various properties 15

5 To set up complete web development environment for PHP using XAMP/

6 To design and develop login page using jQuery and bootstrap 25

7 To implement the concept of jQuery DOM traversal and jQuery e↵ects. 28

13 To setup codeigniter framework and study its di↵erent components 48

14 To setup wordpress and to learn theme and module installation 51

var draw = function() {

Figure 1: HTML5 canvas

2.1 HTML5 Audio

Figure 2: HTML5 Audio

2.2 HTML5 Audio

Figure 3: HTML5 Video

2.3 HTML5 Storage

Figure 4: HTML5 Storage

2.4 Web Workers

Figure 5: HTML5 Storage

Figure 6: HTML5 Geolocations

Figure 7: HTML5 GPS

Figure 8: HTML5 Storage

html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;

Figure 9: concept of CSS3

5.1 How to Install XAMPP and WordPress Locally on PC/Windows

The XAMPP file is 109MB. Once downloaded, launch the installer.

looks like a port conflict.

Figure 10: bootstrap login validation

Figure 11: bootstrap login validation

7.1 jQuery DOM traversal

Figure 12: jQuery DOM traversal

7.2 jQuery e↵ects

Figure 13: jQuery e↵ects

<input name="fvalue" type="text" style="color:red"/></td>

Figure 14: PHP for implementing basic operators

Figure 15: Date From a String With PHP

Php Source Code:

} catch (Exception $ex) {

echo ’Not Connected ’.$ex->getMessage();

//Search And Display Data

$searchStmt = $con->prepare(’SELECT * FROM users WHERE id = :id’);

$insertStmt = $con->prepare(’INSERT INTO users(fname,lname,age) VALUES(:fname,:lname,:age)

$deleteStmt = $con->prepare(’DELETE FROM users WHERE id = :id’);

<input type="text" name="id" placeholder="id" value="<?php echo $id;?>"><br><br>

<input type="submit" name="insert" value="Insert">

Figure 16: PHP for performing MySQL

Create MySql database and table using PHPMyAdmin

create DATABASE dbusers;

first_name varchar(255) NOT NULL,

last_name varchar(255) NOT NULL,

email varchar(255) NOT NULL )

ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE users ADD PRIMARY KEY (id);

ALTER TABLE users MODIFY id int(11) NOT NULL AUTO_INCREMENT;

INSERT INTO users (id, first_name, last_name, email)

VALUES (NULL, ?John?, ?Doe?, ?john.doe@example.com?), (NULL, ?Mark?, ?William?, ?mark.william@exam

Create MySql database and table using PHPMyAdmin

<title>jQuery AJAX Example</title>

<p><strong>Click on button to view users</strong></p>

<div id = "container" >

$(function(){ $("#getusers").on(?click?, function(){

var string = ’<table>

/* from result create a string of data and append to the div */

$.each( result, function( key, value ) {

jQuery Ajax Code