Lecture Slides

Download Report

Transcript Lecture Slides

Intro to Web Programming
using PHP, HTTP, CSS, and
Javascript
Layton Smith
CSE 4000
Intro
•
•
•
•
•
•
•
•
•
•
•
•
Types in PHP
Advanced String Manipulation
The foreach construct
$_REQUEST environmental variable
Correction on extract and ereg
Easier file access
The session
How to use include and require
functions and scope
HTTP, CSS, Javascript
What does it all mean???
Debugging it all
Types in PHP
Variable Types
int, float, bool, string
array
object
resource
null
Comparisons with ==, !=, ===, !==
1 == "1" is true
1 === "1" is false
1 === 1 is true
Why use PHP?
•
•
•
•
•
Available nearly everywhere
Very good support/documentation
Plenty of tools to help
Fast development
Even has a GUI library!
Advanced Strings
• Dot (.) is concatenation (not de-reference)
$string = "Hello World";
echo 'This is a \n $string';
echo "This is a \n $string";
Outputs:
This is a \n $string
This is a
Hello World
Heredoc/Nowdoc
echo <<<AnYtHiNg
This expands $variables and \n newlines
AnYtHiNg;
echo <<<'aNyThInG'
This doesn't expand $variables or \n newlines
aNyThInG;
Array Handling
In Java:
Iterable<Clazz> i = new Iterable<Clazz>();
//...
for(Clazz c : i){
//i gets looped through and assigned to c at each loop
}
In PHP
$array = array("key1" => "value1", "key2" => "value2");
foreach($array as $key => $value){
//$key is the index/key, and $value is the value
}
Array Handling cont.
Array constructor:
$array = array("item", "key1" => 1, "key2" => "value");
$array[] = "value1";
$array[] = "value2";
//equivalent to
$array = array("value1", "value2");
//or
$array[0] = "value1";
$array[1] = "value2";
$_REQUEST
$_REQUEST is equivalent to:
array_merge($_GET, $_POST, $_COOKIES);
Order can be arranged in the php.ini file
DON'T USE EXTRACT ON
USER INPUT!
(use $_REQUEST instead)
Example
Quicker file handling
$file_contents_as_string = file_get_contents($filename)
file_put_contents($filename, $contents_to_write)
The Session
session_start() sends user PHPSESSID cookie.
$_SESSION holds only this user's data
First script:
$_SESSION['key'] = $value;
Second script:
$value = $_SESSION['key'];
Includes/Requires
file.php:
$var = "Hello World!";
page.php:
$var = "Goodbye World!";
include("file.php");
echo $var;
Outputs:
Hello World!
Variable Scope
In Java:
String s = "Hi";
if(true){
System.out.println(s);
}
System.out.println(s);
This works fine
Variable Scope (cont.)
In Java:
if(true){
String a = "Hello World";
}
System.out.println(a);
Compile error!
Variable Scope (cont.)
In PHP:
$string = "Hi";
if(true){
echo $string;
}
Outputs:
Hi
Variable Scope (cont.)
In PHP:
if(true){
$string = "Hi";
}
echo $string;
Outputs:
Hi
(not a syntax error!)
Variable Scope (cont.)
Two scopes:
Global Scope - all variables outside of a function
Function Scope - only variables declared in function
$a = "Hi!";
function f(){
echo isset($a)?"It is set!":"It is not set!";
}
f();
Outputs: It is not set!
Variable Scope (cont.)
Superglobals:
$_GET, $_POST, $_SESSION, etc... always in scope.
Use the global keyword
$a = "Hi!";
function f(){
global $a;
echo isset($a)?"It is set!":"It is not set!";
}
f();
Outputs: "It is set!"
Functions
In Java:
class myClass{
int myFunction(int one, String two){
//do stuff
}
int myFunction(int one){
return myFunction(one, "default");
}
}
Perfectly legitimate Java code
Functions (cont.)
In PHP:
function myFunction($one, $two = "default"){
//do something;
}
Functions (cont.)
In Java:
class myClass{
int myFunction(int one, boolean two){ return something; }
}
int myFunction(boolean two, int one){ return something; }
No equivalent in PHP
HTTP
Sample HTTP request
POST /index.php HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
key1=value1&key2=value%20of%20key2
HTTP (cont.)
Sample HTTP Response
HTTP/1.1 200 OK
Date: Mon, 07 Mar 2011 21:05:05 GMT
Content-Type: text/html
Content-Length: x
<html>...</html>
Example in BurpSuite
CSS
Cascading Style Sheets
Order of priority:
3. <link href="special.css" rel="stylesheet" type="text/css" />
2. <style type="text/css"> ...</style>
1. <div style='background-color: red;'></div>
CSS (cont.)
Selectors:
E - element E
#id - element with id='id'
.class - element with class='class'
E > F - element F that is child of E
E F - element F that is descendant of E
div.red {
color: red;
}
CSS (cont.)
Syntax:
<selector> {
<property>:<value>;
}
Javascript
•
•
•
•
•
Client Side Scripting
Server forms the html
Javascript manipulates that html
AJAX used to communicate
Install JQuery, and use it
PHP + HTTP + CSS + Javascript
Debugging everything
•
•
•
•
•
•
Use Firebug/Chrome Developer Tools
See all parts of the HTTP transaction
Debug Javascript
Edit HTML realtime
Watch GET/POST requests live
Example
Sources
•
•
•
•
•
php.net - PHPs equivalent to Java API
w3schools.com - Javascript/CSS/HTML reference
jQuery.com - Javascript wrapper library
portswigger.net/burp/ - BurpSuite
http://getfirebug.com/ - Firebug for Firefox