website series 6 - php
TRANSCRIPT
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!