Upload
rudolph-lucas
View
212
Download
0
Embed Size (px)
Citation preview
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