web application development using php advanced web-based systems | misbhauddin

Advanced Web-based Systems | Misbhauddin

Web Application Development

Using PHP

What is Web Development?

Advanced Web-based Systems | Misbhauddin

DATACLIENT-SIDESCRIPTING

SERVER-SIDESCRIPTING

DATABASETECHNOLOGY

Server-Side Development

Advanced Web-based Systems | Misbhauddin

• Websites need to be hosted on a web server• Server-side code• Facilitates the transfer of data from/to web server to a browser• Used to build a database or manage data on the web server itself

• Languages• There are a number of languages that power the back-end of the web systems

Server-Side Languages

Advanced Web-based Systems | Misbhauddin

• Powers 75% of web-servers• Open-source• Large community• Cross-platform• Websites with lower traffic demands

• large-scale websites with a high volume of traffic• Outperform others raw speed benchmark tests

• Code is elegant, expressive and powerful• Speed of development• Provides a mature framework – Ruby on Rails

• General purpose, high-level programming language• Do more with fewer lines of code• Large standard library• Like java, used for large amount of traffic

RUBY

Web-based Systems | Misbhauddin 5

PHP- Introduction• PHP

• Server-Side Scripting Language• It is processed at the server and returned back to the client

• Makes Webpages more functional

• Processing Scenario

Request a PHP webpage

HTML Page

Display the HTML file

Runs the PHP code& generates HTML

Pre-requisite: We need a server that can process and execute PHP

Web-based Systems | Misbhauddin 6

Web Server Solution Package 

• Varity of packages available • Usually post-fixed as AMP

• Apache• MySQL• PHP/Perl/Python

• Package depends on the OS you are using• Cross-platforms are also available

LAMP

MAMP

WAMP

XAMPP

Web-based Systems | Misbhauddin 7

Download & Setup

http://www.apachefriends.org/en/xampp.html

Versions PHP MySQL Mercury Mail FileZilla FTP

XAMPP

XAMPP Portable

XAMPP

Steps for using the “Portable” version

1. Download the zip file for the liter versionhttp://sourceforge.net/projects/xampp/files/XAMPP%20Windows/5.6.8/

2. Copy the folder to the D: Drive (Very Important if using Portable Version)

Web-based Systems | Misbhauddin 8

What is where?Configuration Files

File (Directory) Usage

\xampp\apache\conf\httpd.conf The main configuration file for Apache.

\mysql\bin\my.ini The configuration file for the MySQL Server.

\xampp\php\php.ini The configuration file for PHP.

\xampp\phpMyAdmin\config.inc.php The configuration file for phpMyAdmin.

Common FilesFile (Directory) Usage

\xampp\htdocs There are the files from your homepage.

\xampp\mysql\data The databases.

Web-based Systems | Misbhauddin 9

Starting Your Server

• Go to D:\xampp folder• Click on the start-control file

Web-based Systems | Misbhauddin 10

Testing Your Web Server

• Open any browser• Type in the address “localhost”

Web-based Systems | Misbhauddin 11

Root Folder

• Root is the place that the webserver will start looking for files when people visit your website• Default: Located in D:\xampp\htdocs• Set in the httpd.conf file (Apache Configuration File)

Web-based Systems | Misbhauddin 12

PHP Code Enclosure• PHP Code is always written between the following pair of

delimiters<?php statement1;

statement2; ?>

• Note:• Always end each PHP statement with a semi-colon

Output Statement: Echo

• The “echo” statement is used in PHP to output statements in PHP

• Similar to the “document.write()” function in JS

echo ‘Hello World’;

Variables• Variable• An entity that can hold a value

• In PHP• Variable Names start with “$” sign• Assignment operator is the same “=“

$name = value;• Must begin with a letter or an underscore (_)• Must contain only alpha-numeric values and

underscore• No Spaces• Case-sensitive

NAMING RULES

Strings• Strings• Like JavaScript, PHP also uses strings

• PHP• String concatenation is done using “.” (unlike JavaScript where we use the

“+” operator)

• Provides a number of string processing functions

http://devdocs.io/php-string/

echo $txt1 . " " . $txt2;

Operators

Operator Name

x + y Addition

x - y Subtraction

x * y Multiplication

x / y Division

x % y Modulus

Operator Name

++ x Pre-increment

x ++ Post-increment

-- x Pre-decrement

x -- Post-decrement

Operator Namex == y Equal

x === y Identical

x != y Not equal

x <> y Not equal

x !== y Not identical

x > y Greater than

x < y Less than

x >= y Greater than or equal to

x <= y Less than or equal to

Operator Name

x and y And

x or y Or

x xor y Xor

x && y And

x || y Or

! x Not

Arithmetic

Inc / Dec

Comparison

Logical

Conditional

• Conditionals• Provides a way to have certain commands executed only if some condition is met

• PHP• If statement• If…..Else statement• Switch statement

Conditional Statements If statement

if(cond){

}

SYNTAX

if(cond){

}else{

}

SYNTAX

If – else statement

if(cond){

}else{

}

SYNTAX

If-Else statement with Complex Conditionalswitch (n)

{ case label1: code to be executed if n=label1; break; ……… default:}

SYNTAX

Switch statement

Loops• Looping• Provides a way to have certain block of commands to be executed again

and again for certain number of times

• PHP• While Loop• Do….While Loop• For Loop• ForEach

Loop Statements

While statement

while(cond){

}

SYNTAXdo{

}while(cond);

SYNTAX

do-while statement

At least runs the loop once

for(init; cond; increment){

}

SYNTAX

for statement

Functions in PHP• Functions• Group Block of Code• Reusable Code

function name(paramters){

return value;}

SYNTAX

• Separate by comma• Use “$” sign

PHP-HTML Integration

PHP within HTML HTML within PHP

My name is Mohammed Misbhauddin

<p>My name is <strong>

$name = ‘Mohammed Misbhauddin’;

<?php echo $name; ?> </strong></p>

<?php echo ‘<p>My name is <strong>’.$name.’</strong></p> ?>

Use concatenation

Arrays• Arrays• Holds a list of same type elements

• Syntax• $varName = array(‘a‘, ‘b‘, ‘c‘);

• Accessing Array elements• varName[key];

• Length of an Array• count(varName);

Keyword

Separate using coma’s

Keys Value

0 a

1 b

2 c

Associative Arrays

• Associative Arrays: Arrays with custom keys• Syntax

• $varName = array(‘key1‘=>’a’, ‘key2‘=>’b’);

• Accessing Array elements• varName[‘key1’];

Keyword

Key names

Keys Value

key1 a

key2 b

(Strings or numbers)

Types of Arrays in PHPArrays

Arrays Associative Arrays

• Declaration-time initialization• $arr = array(“a”, “b”, “c”);

• Initialization after declaration• $arr = array();• $arr[0] = “a”;

• Indexes are assigned automatically• [0], [1], [2]

• Declaration-time initialization• $arr = array(101 => “a”, 102 => “b”,

103 => “c”);• Initialization after declaration

• $arr = array();• $arr[101] = “a”;

• Indexes are assigned manually• [101], [102], [103]

Accessing Elements

foreach($arr as $a){ echo $a;}

Array-name

Working Variable (like the i in your for loop)

Multi-dimensional Array• A multidimensional array is an array containing one or more arrays.• In a multidimensional array, each element in the main array can also be an array. And each

element in the sub-array can be an array, and so on.

Associative Multi-Dimensional Arrays

$cars = array ( array("Volvo",100,96), array("BMW",60,59), array("Toyota",110,100) );

Volvo 100 96

BMW 60 59

Toyota 110 100

$cars = array();$cars[101] =array(“name”=>"Volvo",”val”=>100,”val2”=>96);$cars[102] = array(“name”=>"BMW",”val”=>60,”val2”=>59);$cars[103] = array(“name”=>"Toyota",”val”=>110,”val2”=>100);

Form Submission<form >

</form>

id=“ “ name=“ “ method=“ “action=“ “

File/function to call Method to submit the form

GET | POST

For form identification

1. contact.html

2. return contact.html

3. Fill form

<form name=“contact” action=“process.php” method=“GET”>

4. process.php (values)

5. Run process.php

6. HTML File

GET Method

When to use

• Short forms, with only 1 or 2 input fields• Forms with select, radio, and checkbox fields

Sends the form information by including it on the URL

process.php?name=……&email=……&content=……

Google Maps

Graduation Party

You are invited!!!!!!!! Please Please come

If unable to find, enter your address below and I will guide you

Guide Me

maps.google.com/maps?saddr=……&daddr=…….

Maps with directions

<form action="http://maps.google.com/maps" method="get" target="_blank"> If unable to find, enter your address below and I will guide you<input type="text" name="saddr" /> <input type="hidden" name="daddr" value=“King Faisal University" /> <input type="submit" value=“Guide Me" />

</form>

Google Maps

POST Method

When to use

Sends the data to the server in two steps

1. Browser contacts the server2. Send the information

• Longer forms, more than 3 input fields• Forms with large textarea fields• Forms where security is more important

Some Guidelines• Always assign a name attribute to your form fields• Eg. <input type=“text” name=“username”/>

• Remember Associative Arrays

name=“username”

Key

What the user enters=>

Value

How will you access this information in PHP

1. Create a variable2. Use the associative array technique

a. Index is the key name3. What is the array-name?

a. Based on the method used

$uname = array-name ‘username’

$_GET | $_POST

All Pre-defined Form Variables• $_GET variable can be used to collect form data sent with the GET

method.

• $_POST variable can be used to collect form data sent with the POST method.

• $_REQUEST variable can be used to collect form data sent with both the GET and POST methods.

$varName = $_GET[‘username’];

$varName = $_POST[‘username’];

$varName = $_REQUEST[‘username’];

Traditional Web Architecture

Client Browser

Server

1. Request HTML

2. HTML

3. Click a link

3. Request HTML

4. HTML

Single Page Web Architecture

Client Browser

Server

1. Request HTML

2. HTML

3. Click a link

3. XHR Request

4. XHR Response

Single Page Architecture Requirement

Advanced Web-based Systems | Misbhauddin

• GET or POST• Page is reloaded when form is submitted and response is received• Can we do it with reloading the page?• Like modern websites like twitter and facebook• News feeds and new tweets load as we scroll without page

reload.

A

Advanced Web-based Systems | Misbhauddin

JAX

synchronous

Synchronous Call

Advanced Web-based Systems | Misbhauddin

Browser

Server

User Action

Server Processing

User Action

Server Processing

User Action

Time

Asynchronous Call

Advanced Web-based Systems | Misbhauddin

Browser

Server

User Action

Server Processing

Response

AJAX Engine

Time

Asynchronous Call

Advanced Web-based Systems | Misbhauddin

Browser

Server

User Action

Server Processing

Response

AJAX Engine

Time

Server Processing

Response

A

Advanced Web-based Systems | Misbhauddin

JAX

synchronous

avascript

JavaScript Objects

Advanced Web-based Systems | Misbhauddin

• Use the XMLHttpRequest (XHR) Object• Used to exchange data asynchronously with a server• It update parts of a web page, without reloading the whole page• It is the keystone of AJAX

XHR Object

Advanced Web-based Systems | Misbhauddin

EventsAttributes Methods

- readyState - responseText - status - statusText

- onreadystatechange - onload - onloadstart - onprogress

- open - send - abort

A

Advanced Web-based Systems | Misbhauddin

JAX

synchronous

avascript

nd

ML

Response of an AJAX Call

Advanced Web-based Systems | Misbhauddin

• XML• Used in earlier days

• JSON• Now the most popular data standard used

• HTML• Also used popularly• Mainly when the data sent from the server is for display as-is

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

STEP 1: Create XHR Object

var xhr = new XMLHttpRequest();

- xhr is the name of the object {any name can be used} - new is the keyword used to create a new Object - XMLHttpRequest is the name of the object’s class

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

STEP 2: Create a Callback Function

xhr.onreadystatechange = function () {

}

- onreadystatechange event is fired every time there is a change in the event - using anonymous function for call back (remember JavaScript class)

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

STEP 2: Create a Callback Function

xhr.onreadystatechange = function () {

}

- onreadystatechange event is fired every time there is a change in the event - using anonymous function for call back (remember JavaScript class)

readyState

Advanced Web-based Systems | Misbhauddin

0 – Request not initialized1 – Server connection established2 – Request Received3 – Processing Request4 – Request Finished and response is ready

This variable holds the status of the XMLHttpRequest. Changes from 0 to 4.

status

Advanced Web-based Systems | Misbhauddin

200 – OK404 – Page not found……….

This is the same as the status of the HTTP response codes.

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

STEP 3: Do something when the request completed and response is ready

xhr.onreadystatechange = function () {

if( xhr.readyState == 4 && xhr.status == 200) { }}

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

STEP 4: Send the Request to the Server

xhr.open("GET",“process.php",true);xhr.send();

- The open method specifies the type of request, the URL, and if the request should be handled asynchronously or not - SYNTAX: open(method, url, async)

method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)

- The send method sends the request off to the server - Has parameters which are used only in POST request

AJAX Step-by-Step

Advanced Web-based Systems | Misbhauddin

Send Method with Data

xhr.open(“POST",“process.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send(“key=val&key2=val2”);

To POST data like an HTML form, add an HTTP header with setRequestHeader()Data is then send as parameters in the send functionEach data in the parameter has

KeyValue

Each pair of key and value are separated by “&”

Complete Code

Advanced Web-based Systems | Misbhauddin

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if( xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); }}

xhr.open("GET",“process.php",true);xhr.send();

AJAX with JQuery

Advanced Web-based Systems | Misbhauddin

• AJAX with JQuery becomes much simpler• No need for so many steps as with using XHR Object• Only one function called $.ajax()• It includes everything such as the method, url, data and the

callback function

$.ajax() function in JQuery

Advanced Web-based Systems | Misbhauddin

$.ajax({ url: 'process.php', type: 'POST',

crossDomain: true, data: { ‘key': value, ………. }, }).done(function(data) { if(data==="success"){

}else{

} }).fail( function() {

});

Advanced Web-based Systems | Misbhauddin

Conclusion

• Data from HTML can be sent to the Server using two basic method GET and POST

• Data can be sent using two different ways: synchronous and asynchronous

• AJAX is used for asynchronous data transfer