PHP5/14 - Website Series 6

eugene@leadinfo.com.tw

Finally, it’s the last one!

Concept Passively receive request from user and give result back to

user. Data! Security! Sometimes we use back-end to hard-loading computation.

HTML

CSS

JSSQL

PHP

HTML

CSS

JSSQL

PHP

Synchronous Request(同步呼叫 )

Request

Synchronous Request(同步呼叫 )

Request Receive

Synchronous Request(同步呼叫 )

Request Receive

Select data

Synchronous Request(同步呼叫 )

Request Receive

Select data Receive data

Synchronous Request(同步呼叫 )

Request Receive

Select data Receive data

Put data into original HTML

Synchronous Request(同步呼叫 )

Request Receive

Select data Receive data

Put data into original HTML

HTML + Data

Synchronous Request(同步呼叫 )

Request Receive

Select data Receive data

Put data into original HTML

HTML + Data

Synchronous Request(同步呼叫 )

Asynchronous Request(非同步呼叫 )

Request

Asynchronous Request(非同步呼叫 )

Request Receive

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

JS: Request for data

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

Request Receive

Select data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

Request Receive

Select data Receive data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Data

Asynchronous Request(非同步呼叫 )

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Data

Asynchronous Request(非同步呼叫 )

We need to make your PC become a server

Basic Syntax

Basic SyntaxWrap all the code

Basic SyntaxWrap all the code

Basic SyntaxWrap all the code

Variables need to have prefix ‘$’

Basic SyntaxWrap all the code

Different from JS

Variables need to have prefix ‘$’

Basic SyntaxWrap all the code

Different from JS

Variables need to have prefix ‘$’

Don’t need to declare

Basic SyntaxWrap all the code

Different from JS

Variables need to have prefix ‘$’

Don’t need to declare

Like JS, we don’t need to specified variable type, but we still have types!

Basic Syntax (conti.) Print out things

echo ‘hello world!’;echo $myVar;

Variable Handleisset($var)unset($var)

Array operationarray()array_pop($arr)array_push($arr,’’)print_r($arr)array_slice($arr,2,4)

Array

Array

Array

Ordinary array

Array

Ordinary array

Array

Ordinary arrayAssociate array

Variables

Variables

Variables We don’t have local or global variables. More like the black window when we write C, variables clear out

after program finish running.

We have some Predefined Variables.

Predefined Variables Server system variables( check out phpinfo(); )

$_SERVER Variable that every user can have their own space

$_SESSION

Variables from get request$_GET

Variables from post request$_POST

Predefined Variables Server system variables( check out phpinfo(); )

$_SERVER Variable that every user can have their own space

$_SESSION

Variables from get request$_GET

Variables from post request$_POST

Example PHP embedded with HTML Not the kind we are going to do, just for demonstration.

@php_example_1.php

SQL

PHP

Front-end

Connection From Front-end We called it Http Request Two ordinary type: GET, POST This is a synchronous request example.

@php_example_2.php

Connection to MySQL It is all the same as what we do on console. Still need to login and set the database we what to use.

There are many ways to connect database, but we use the most popular and secure way.

We use PDO (PHP Data Object).

Initialize PDO Connection

Initialize PDO Connection

MySQL server host, username, password and the database we are going to use

Initialize PDO Connection

MySQL server host, username, password and the database we are going to use

Start MySQL connection

Simple Query

Simple Query

Set the array type of the result

Simple Query

Set the array type of the result

Get all the record we selected

Query with Parameters

Query with Parameters

Use array to bind parameters with order

Query with Parameters

Use array to bind parameters with order

Get the primary key of the record we just inserted

Example@php_example_3.php

OK!We are almost there!

Let’s back to JS~lol

jQuery

Utilities

DOM

Events

Ajax

jQuery

Utilities

DOM

Events

Ajax

Request Receive

HTML +JS

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

JS: Request for data

Asynchronous Request(非同步呼叫 )

Request Receive

HTML +JS

JS: Request for data

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

Select data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

Select data Receive data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Data

Asynchronous Request(非同步呼叫 )

API calling

Request Receive

Select data Receive data

PHP: Collect and orignize data

HTML +JS

JS: Request for data Receive

Data

Asynchronous Request(非同步呼叫 )

API calling

RESTful APIOperation SQL HTTP

Create INSERT POSTRead (Retrieve) SELECT GETUpdate (Modify) UPDATE PUTDelete (Destroy) DELETE DELETE

資源 GET PUT POST DELETEhttp://

example.com/resources/

取得整組資源 替換整組資源 增加一筆資源 刪除整組資源。http://

example.com/resources/142

取得特定一筆資源 替換特定一筆資源 在特定一筆資源中增加一個元素 (屬性 ) 刪除特定一筆資源。

Data Type Full HTML String Number XML JSON

Data Type (conti.)XML

<course><id>1</id><name>Web Programming</name><teacher>Turtle</teacher></course><course><id>2</id><name>QF Computer Programming</name><teacher>Han</teacher></course>

JSON[{id: 1,name: ‘Web Programming’,teacher: ‘Turtle’},{id: 2,name: ‘QF Computer Programming’,teacher: ‘Han’}]

Data Type (conti.)XML

<course><id>1</id><name>Web Programming</name><teacher>Turtle</teacher></course><course><id>2</id><name>QF Computer Programming</name><teacher>Han</teacher></course>

JSON[{id: 1,name: ‘Web Programming’,teacher: ‘Turtle’},{id: 2,name: ‘QF Computer Programming’,teacher: ‘Han’}]

Win

User

MVC

User

Model

MVC

User

Model

View

MVC

User

Controller

Model

View

MVC

User

Controller

Model

View

MVC

User

Controller

Model

View

MVC

User

Controller

Model

View

Uses

MVC

User

Controller

Model

View

Uses

Manipulates

MVC

User

Controller

Model

View

Uses

ManipulatesUpdates

MVC

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

Back-end

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

Back-endFront-end

MVC

User

Controller

Model

View

UsesSees

Back-endFront-end

MVC

User

Controller

Model

View

UsesSees

Back-endFront-end Call APIs

MVC

User

Controller

Model

View

UsesSees

Back-endFront-endReturn Call APIs

MVC

Last Example

And I have to write it now!