Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... ·...

31
Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000

Transcript of Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... ·...

Page 1: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Intro to Web Programming

using PHP, HTTP, CSS, and Javascript

Layton SmithCSE 4000

Page 2: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Intro

Types in PHPAdvanced String ManipulationThe foreach construct$_REQUEST environmental variableCorrection on extract and eregEasier file accessThe sessionHow to use include and requirefunctions and scopeHTTP, CSS, JavascriptWhat does it all mean???Debugging it all

Page 3: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Types in PHPVariable Types    int, float, bool, string    array    object    resource    null Comparisons with ==, !=, ===, !== 1 == "1" is true1 === "1" is false1 === 1 is true

     

Page 4: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Why use PHP?

Available nearly everywhereVery good support/documentationPlenty of tools to helpFast developmentEven has a GUI library!

Page 5: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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 aHello World

Page 6: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Heredoc/Nowdoc

echo <<<AnYtHiNgThis expands $variables and \n newlinesAnYtHiNg;

echo <<<'aNyThInG'This doesn't expand $variables or \n newlinesaNyThInG;

Page 7: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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}

Page 8: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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";

Page 9: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

$_REQUEST

$_REQUEST is equivalent to:

array_merge($_GET, $_POST, $_COOKIES);

Order can be arranged in the php.ini file

Page 10: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

DON'T USE EXTRACT ON USER INPUT!(use $_REQUEST instead)

Example

Page 11: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Quicker file handling

$file_contents_as_string = file_get_contents($filename)

file_put_contents($filename, $contents_to_write)

Page 12: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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'];

Page 13: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Includes/Requires

file.php:

$var = "Hello World!";

page.php:$var = "Goodbye World!";include("file.php");echo $var;

Outputs:Hello World!

Page 14: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Variable Scope

In Java:

String s = "Hi";if(true){    System.out.println(s);}System.out.println(s);

This works fine

Page 15: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Variable Scope (cont.)

In Java:if(true){    String a = "Hello World";}System.out.println(a);

Compile error!

Page 16: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Variable Scope (cont.)

In PHP:

$string = "Hi";if(true){    echo $string;}

Outputs:Hi

Page 17: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Variable Scope (cont.)

In PHP:

if(true){    $string = "Hi";}echo $string;

Outputs:Hi(not a syntax error!)

Page 18: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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!

Page 19: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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!"

Page 20: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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

Page 21: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Functions (cont.)

In PHP:

function myFunction($one, $two = "default"){    //do something;}

Page 22: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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

Page 23: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

HTTP

Sample HTTP request  POST /index.php HTTP/1.1Host: example.com Content-Type: application/x-www-form-urlencoded

key1=value1&key2=value%20of%20key2

Page 24: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

HTTP (cont.)

Sample HTTP Response

HTTP/1.1 200 OKDate: Mon, 07 Mar 2011 21:05:05 GMTContent-Type: text/html Content-Length: x<html>...</html>

Example in BurpSuite

Page 25: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

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>

Page 26: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

CSS (cont.)

Selectors: E - element E#id - element with id='id'.class - element with class='class'E > F - element F that is child of EE F - element F that is descendant of E

div.red {    color: red;}

Page 27: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

CSS (cont.)

Syntax:

<selector> {    <property>:<value>;}

Page 28: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Javascript

Client Side ScriptingServer forms the htmlJavascript manipulates that htmlAJAX used to communicateInstall JQuery, and use it

 

Page 29: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

PHP + HTTP + CSS + Javascript

Page 30: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Debugging everything

Use Firebug/Chrome Developer ToolsSee all parts of the HTTP transactionDebug JavascriptEdit HTML realtimeWatch GET/POST requests liveExample

Page 31: Intro to Web Programmingweb.cse.msstate.edu/~allen/CSE 4000 - Practical Issues in Software... · Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000.

Sources

php.net - PHPs equivalent to Java APIw3schools.com - Javascript/CSS/HTML referencejQuery.com - Javascript wrapper libraryportswigger.net/burp/ - BurpSuite http://getfirebug.com/ - Firebug for Firefox