Website backend introduction using PHP as code example. Content includes PHP syntax, MySQL PDO query and MVC API design. Example Repository: https://bitbucket.org/webiseasy/demo-examples/

4. HTML
CSS
JS
SQL
PHP

5. HTML
CSS
JS
SQL
PHP

6. Synchronous Request
(同步呼叫)

7. Request
Synchronous Request
(同步呼叫)

8. Request Receive
Synchronous Request
(同步呼叫)

9. Request Receive
Select data
Synchronous Request
(同步呼叫)

10. Request Receive
Select data Receive data
Synchronous Request
(同步呼叫)

11. Request Receive
Select data Receive data
Put data into original HTML
Synchronous Request
(同步呼叫)

12. Request Receive
Select data Receive data
Put data into original HTML
HTML + Data
Synchronous Request
(同步呼叫)

13. Request Receive
Select data Receive data
Put data into original HTML
HTML + Data
Synchronous Request
(同步呼叫)

14. Asynchronous Request
(非同步呼叫)

15. Request
Asynchronous Request
(非同步呼叫)

16. Request Receive
Asynchronous Request
(非同步呼叫)

17. Request Receive
HTML +JS
Asynchronous Request
(非同步呼叫)

18. Request Receive
HTML +JS
Asynchronous Request
(非同步呼叫)

19. Request Receive
HTML +JS
JS: Request for data
Asynchronous Request
(非同步呼叫)

20. Request Receive
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)

21. Request Receive
Select data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)

22. Request Receive
Select data Receive data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)

23. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)

24. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Data
Asynchronous Request
(非同步呼叫)

25. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Data
Asynchronous Request
(非同步呼叫)

28. Wrap all the code

29. Wrap all the code

30. Wrap all the code
Variables need to
have prefix ‘$’

31. Wrap all the code
Different from JS
Variables need to
have prefix ‘$’

32. Wrap all the code
Different from JS
Variables need to
have prefix ‘$’
Don’t need to declare

33. Wrap 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!

37. Ordinary array

38. Ordinary array

39. Ordinary array
Associate array

46. SQL
PHP
Front-end

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

51. MySQL server host, username,
password and the database we are
going to use
Start MySQL connection

53. Set the array type of the result

54. Set the array type of the result
Get all the record we selected

56. Use array to bind parameters with order

57. Use array to bind parameters with order
Get the primary key of the record we just inserted

61. jQuery
Utilities
DOM
Events
Ajax

62. jQuery
Utilities
DOM
Events
Ajax

63. Request Receive
HTML +JS
Asynchronous Request
(非同步呼叫)

64. Request Receive
HTML +JS
JS: Request for data
Asynchronous Request
(非同步呼叫)

65. Request Receive
HTML +JS
JS: Request for data
Asynchronous Request
(非同步呼叫)
API calling

66. Request Receive
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)
API calling

67. Request Receive
Select data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)
API calling

68. Request Receive
Select data Receive data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)
API calling

69. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Asynchronous Request
(非同步呼叫)
API calling

70. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Data
Asynchronous Request
(非同步呼叫)
API calling

71. Request Receive
Select data Receive data
PHP: Collect and orignize data
HTML +JS
JS: Request for data Receive
Data
Asynchronous Request
(非同步呼叫)
API calling

72. Operation SQL HTTP
Create INSERT POST
Read (Retrieve) SELECT GET
Update (Modify) UPDATE PUT
Delete (Destroy) DELETE DELETE
資源 GET PUT POST DELETE
http://example.com
/resources/ 取得整組資源 替換整組資源 增加一筆資源 刪除整組資源。
http://example.com
/resources/142 取得特定一筆資源 替換特定一筆資源 在特定一筆資源中增加一
個元素(屬性) 刪除特定一筆資源。

75. Win

76. User
MVC

77. User
Model
MVC

78. User
Model
View
MVC

79. User
Controller
Model
View
MVC

80. User
Controller
Model
View
MVC

81. User
Controller
Model
View
MVC

82. User
Controller
Model
View
Uses
MVC

83. User
Controller
Model
View
Uses
Manipulates
MVC

84. User
Controller
Model
View
Uses
ManipulatesUpdates
MVC

85. User
Controller
Model
View
Uses
ManipulatesUpdates
Sees
MVC

86. User
Controller
Model
View
Uses
ManipulatesUpdates
Sees
MVC

87. User
Controller
Model
View
Uses
ManipulatesUpdates
Sees
MVC
Back-end

88. User
Controller
Model
View
Uses
ManipulatesUpdates
Sees
Back-end
Front-end
MVC

89. User
Controller
Model
View
UsesSees
Back-end
Front-end
MVC

90. User
Controller
Model
View
UsesSees
Back-end
Front-end Call APIs
MVC

91. User
Controller
Model
View
UsesSees
Back-end
Front-endReturn Call APIs
MVC