Beruflich Dokumente
Kultur Dokumente
Ludhiana
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
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;
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
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
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
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
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.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
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
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;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #228BF4;
color: white;
width: 350;
margin-left: 200px;
margin-top: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image: url(’searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
text-decoration: none;
cursor: pointer;
}
body {
background-image: url("master-en-rrhh .jpg");
background-repeat: no-repeat;
}
</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
Input
<!DOCTYPE html>
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
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.
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
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>
<!-- Form Name -->
<legend>
<center>
Validation Form
</center>
</legend>
<!-- Text input-->
<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>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-3">
<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>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ConfirmPassword">Confirm Password</label>
<div class="col-md-3">
<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>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="Submit"></label>
<div class="col-md-4">
<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
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
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
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=="-")
{
$add1 = $_REQUEST[’fvalue’];
$add2 = $_REQUEST[’lvalue’];
$res= $add1-$add2;
}
if($operator=="*")
{
$add1 = $_REQUEST[’fvalue’];
$add2 = $_REQUEST[’lvalue’];
$res =$add1*$add2;
}
if($operator=="/")
{
$add1 = $_REQUEST[’fvalue’];
$add2 = $_REQUEST[’lvalue’];
$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">
</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
Input
<!DOCTYPE html>
<html>
<body>
<?php
$d=strtotime("tomorrow");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("next Saturday");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("+3 Months");
echo date("Y-m-d h:i:sa", $d) . "<br>";
?>
</body>
</html>
Output
Input
$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);
}
$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;
}
if(isset($_POST[’search’]))
{
$data = getPosts();
if(empty($data[0]))
{
echo ’Enter The User Id To Search’;
} else {
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 {
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 {
<!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">
Output
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.
<html>
<head>
</head>
<body>
<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?>
.done(function( data ) {
var result = $.parseJSON(data);
$("#records").html(string);
});
});
});
</script>
</body>
</html>
$("#getusers").on(’click’, function(){
$.ajax({
method: "GET", url: "getrecords.php",
}).done(function( data ) {
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) {
$result = $conn->query($sql);
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>
<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>
<label>Email:</label>
</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(){
$.ajax({
method: "POST",
url: "saverecords.php",
if(result == 1) {
} 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.
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.