เอกสารประกอบการบรรยายพิเศษ หัวข้อ "การพัฒนา Web Application แบบมืออาชีพด้วย PHP" สาขาวิศวกรรมคอมพิวเตอร์ คณะเทคโนโลยีอุตสาหกรรม มหาวิทยาลัยราชภัฏสวนสุนันทา, วันที่ 18-19 พฤษภาคม 2559

1. Powerpoint Templates
Page 1
Powerpoint Templates
ดร.อาณัติ รัตนถิรกุล
คณะบริหารธุรกิจและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยเทคโนโลยีราชมงคลสุวรรณภูมิ
May 18-19, 2016
การพัฒนา Web Application
แบบมืออาชีพด้วย PHP
สาขาวิศวกรรมคอมพิวเตอร์คณะเทคโนโลยีอุตสาหกรรม
มหาวิทยาลัยราชภัฏสวนสุนันทา

2. Powerpoint Templates
Page 2
Arnut Ruttanatirakul, Ph.D.
www.arnut.com

3. Powerpoint Templates
Page 3
ASP.NET
PHP
Ruby
VimL CoffeeScript
JAVA
Swift
JavaScript
PERL
Web Programming
Web Developer
PYTHON
CSS
01010101010101010101010101010
C++
Web Programmer / Web Developer
R
นักพัฒนาระบบงานคอมพิวเตอร์
RUBY
Swift
Go
Haskell
Lua
Hask
ell
Matlab
C#

4. Powerpoint Templates
Page 4
เรียนรู้แนวทางการพัฒนาเว็บแอ็พพลิเคชั่น
ให้ทันยุค ทันสมัย ตรงใจตลาดแรงงาน

5. Powerpoint Templates
Page 5
เว็บตรวจสอบภาษาการเขียนโปรแกรมยอดนิยม
http://www.githut.info

6. Powerpoint Templates
Page 6
สาขาที่เปิ ดสอนด้านคอมพิวเตอร ์
และเทคโนโลยีสารสนเทศ ในประเทศไทย
 คอมพิวเตอร ์ธุรกิจ (BC)
 คอมพิวเตอร ์ธุรกิจและเทคโนโลยีสารสนเทศ
 เทคโนโลยีสารสนเทศและการจัดการ (MIS)
 ระบบสารสนเทศ (IS)
 เทคโนโลยีสารสนเทศธุรกิจ (BIT)
 การจัดการสารสนเทศ
 บริหารเทคโนโลยีสารสนเทศ
 ระบบสารสนเทศเพื่อการจัดการ
 การจัดการเทคโนโลยีสารสนเทศ
 การจัดการสารสนเทศดิจิทัล
 วิทยาการคอมพิวเตอร ์(CS)
 วิทยาศาสตร ์คอมพิวเตอร ์
 วิทยาการสารสนเทศ
 วิศวกรรมคอมพิวเตอร ์(CE)
 วิศวกรรมซอฟต์แวร ์(SE)
 วิศวกรรมสารสนเทศและการสื่อสาร
 วิศวกรรมเครือข่ายเเละอินเทอร ์เน็ต
 วิศวกรรมมัลติมีเดียและระบบอินเทอร ์เน็ต
 วิศวกรรมระบบและข้อมูล
 วิศวกรรมข้อมูลขนาดใหญ่ (Big Data)
 เทคโนโลยีเครือข่ายและระบบ
 คอมพิวเตอร ์ศึกษา
 เทคโนโลยีมัลติมีเดีย
 เทคโนโลยีมัลติมีเดียเเละเเอนิเมชั่น
 การพัฒนาสื่อประสมและเกมส์
 เทคโนโลยีคอมพิวเตอร ์(TCT)
 เทคโนโลยีสื่อดิจิทัล (Digital Media)
 เทคโนโลยีเทคนิคศึกษา (Edtech)
 เทคโนโลยีการศึกษา (Edtech)
 เทคโนโลยีสารสนเทศศึกษา (IT for Edu)
 เทคโนโลยีสารสนเทศและการสื่อสารเพื่อ
การศึกษา (ICT for Edu)
 …

7. Powerpoint Templates
Page 7
อัตราเงินเดือนคนทางานสายไอที
www.adecco.co.th www.geminipersonnel.com

8. Powerpoint Templates
Page 8
วงล้อสายงานด้านเทคโนโลยีสารสนเทศ
ตามความต้องการของตลาดแรงงาน
IT Career Paths

9. Powerpoint Templates
Page 9

10. Powerpoint Templates
Page 10
สายอาชีพด้านเทคโนโลยีสารสนเทศ
Programmer & Developer
Web Design & Web Programmer
IT Supports
Network and Information Security
Computer Graphic and Multimedia
IT Officer
IT Sales
System Analyst
Database
Teacher

11. Powerpoint Templates
Page 13
ยุคของการพัฒนาเว็บไซต์
XML

12. Powerpoint Templates
Page 14
14
Web Application
Database
Web Server
`
` ` `
` `
`
User A User B
Company
PHP + MySQL ASP + SQL Server
JSP + MySQL
ASP + SQL Server
PHP + MySQL

13. Powerpoint Templates
Page 15
15
Web Services
`
` ` `
` `
`
User A
User B
Company
nuSOAP
Axis
`
User C
`
User D
MS.NET
XML
PHP-SOAP
WebSphere
nuSOAP
MS.NET
Axis
Gule
`
User E
SOAP::Lite
PHP
JAVA
PYTHON
PERL
ASP.NET
UDDI

14. Powerpoint Templates
Page 16
Web Services = SOAP+WSDL+UDDI
Web Services

15. Powerpoint Templates
Page 17
Cloud Services

16. Powerpoint Templates
Page 18
Web Application

17. Powerpoint Templates
Page 19
Web Application
1970s
1980s
1990s
2000s
2010+

18. Powerpoint Templates
Page 20
เทคโนโลยีการประมวลผลแบบกลุ่มเมฆ(Cloud Computing)
• Software as a Service (SaaS)
• Platform as a Service (PaaS)
• Infrastructure as a Service (IaaS)
• Public Cloud (External Cloud)
• Private Cloud (Internal Cloud)
• Hybrid Cloud
Cloud Deployment Models Cloud Service Models

19. Powerpoint Templates
Page 21
Cloud Deployment Models
Source: http://www.cbkmaas.com

20. Powerpoint Templates
Page 22
Infrastructure as a Service
Platform as a Service
Software as a Service

21. Powerpoint Templates
Page 23
Example of Infrastructure as a Service
Hypervisor
 VMWare
 Microsoft Hyper-V
 Citrix XenServer
 KVM
 Parallels
 Oracle VirtualBox
 OpenVZ
 OpenStack
 OpenNebula
 Apache CloudStack
 Eucalyptus
 OpenNode
 Proxmox VE
Source: http://www.arnut.com/bb/node/301
 Amazon EC2
 Azure Services Platform
 Google Compute Engine
 HP Cloud
 Rackspace Open Cloud
 ReliaCloud
 TurnKey Linux
 Bitnami Stack
 Docker

22. Powerpoint Templates
Page 24
Infrastructure as a Service
http://www.turnkeylinux.org
TurnKey Linux Bitnami Stack
https://bitnami.com/stacks
OpenStack
http://www.openstack.org
Docker
http://www.docker.com

23. Powerpoint Templates
Page 25
Example of Platform as a Service
 AWS Elastic Beanstalk
 Google App Engine
 Microsoft Azure
 OpenShift
 Heroku
 Apache Stratos
 AINS eCase
 AppearIQ
 AppScale
 Cloud Foundry
 Salesforce
 IBM Bluemix
 Engine Yard
 Mendix
 Nodejitsu
 OutSystems
 Platform.sh
 WaveMaker
 CloudControl

24. Powerpoint Templates
Page 26
Platform as a Service
http://aws.amazon.com/elasticbeanstalk/
AWS Elastic Beanstalk Google App Engine
https://cloud.google.com/appengine/
Microsoft Azure
http://azure.microsoft.com
OpenShift
https://www.openshift.com
Heroku
https://www.heroku.com

25. Powerpoint Templates
Page 27
Example of Software as a Service
• Google Apps
• Microsoft Office 365
• Adobe Creative Cloud
• Autodesk 360
• HP Cloud Services
• SAP Cloud Solution
• iCloud
• Salesforce
• Meltwater Group
• Etc.

26. Powerpoint Templates
Page 28
Software as a Service
https://www.google.com/intx/th/wor
k/apps/business/
Google Apps Microsoft Office 365
http://www.microsoftstore.com/store/
Adobe Creative Cloud
http://www.adobe.com/creativecloud.html
Autodesk 360
http://autodesk360.com
Salesforce
http://saleforce.com

27. Powerpoint Templates
Page 30
แนวการพัฒนา
Web Application

28. Powerpoint Templates
Page 31
แนวการพัฒนา Web Application
Web Application
1.0
Web Application
2.0
Web Application
3.0
• Web Server
• Programming
• Database
• Database Management
• Editor
• Virtualization (VM)
• Web Server
• Programming
• Database
• Database Management
• Editor
• OS-level Virtualization
(Docker)
• Web Server
• Programming
• Database
• Database Management
• Editor
• Software Framework
• Mobile Application
Web Application 4.0
• Virtualization (VM)
• Web Server
• Programming
• Database
• Database Management
• Editor
• Software Framework
• Web Standard
• Responsive Web Design
• Virtion Control System, Git
• Web Security
• Big Data
• IoT

29. Powerpoint Templates
Page 34
แนวการพัฒนา Web Application

30. Powerpoint Templates
Page 35
Big Data

31. Powerpoint Templates
Page 36

32. Powerpoint Templates
Page 37
Big Data Technology

33. Powerpoint Templates
Page 38
A Single View to the Customer
Customer
Social
Media
Gaming
Entertai
n
Banking
Finance
Our
Known
History
Purchas
e

34. Powerpoint Templates
Page 40
Cloud computing will go mainstream

35. Powerpoint Templates
Page 42
เปรียบเทียบระหว่าง Static กับ Dynamic
Web Site

36. Powerpoint Templates
Page 43
Web Application Tools
1. Network Operating System
 Windows Server, Linux, FreeBSD
2. Development Tools
 PHP
 ASP, ASP.NET
 JSP, Servlet
 PYTHON, RUBY
3. Database Toos
 MySQL, MatiaDB, PostgreSQL
 MS Access, MS SQL Server
 Oracle
 DB2
4. Web Server Software
 Apache
 IIS
 Tomcat

37. Powerpoint Templates
Page 44
Web Application Tools (2)
• PHP
• ASP
• ASP.NET
• Servlet / JSP
• Python
SQLite
MySQL
PostgreSQL
MS Access
MS SQL Server
Oracle
DB2
EditPlus, PHPCode, Codelopster
Notepad++, Devphp, gedit
ASPEdit
Visual InterDev
Web Matrix
MS Visual Studio
Edit Plus
NetBeans
Python shell
Edit Plus
EditorEditor

38. Powerpoint Templates
Page 45
Web Server
Source: http://www.arnut.com/bb/node/654

39. Powerpoint Templates
Page 46
Web Server
 Apache
 IIS
 PWS
 OmniHTTPd
 Xitami
 Tomcat
 …
 WMServer
 AppServ
 WAMP
 WinLAMP
 XAMPP
 easyPHP
 MAMP
 Apache2Triad
 EasyWAMP
 Powerserv
 UniServ
 AMPPS
Stand Alone Web Server Package Web Server
Source: http://www.arnut.com/bb/node/654

40. Powerpoint Templates
Page 47
Web Application Virtual LABs
http://192.168.56.2

41. Powerpoint Templates
Page 49
Web Programmer LABS
• WAMP or XAMPP
• Codelopster PHP
Edition
• MySQL Front
• PHP Example Code
• Software Framework
• Oracle VirtualBox
• Docker Toolbox
• Git Desktop
LABS01 LABS02

42. Powerpoint Templates
Page 50
การติดตั้งและปรับแต่ง Web Server
LABS

43. Powerpoint Templates
Page 51
การติดตั้งและทดสอบ Editor
LABS

44. Powerpoint Templates
Page 52
PHP 5 Tutorial
http://www.w3schools.com/php/

45. Powerpoint Templates
Page 53
PHP Document Download
http://php.net/download-docs.php

46. Powerpoint Templates
Page 70
Software framework
1. CSS frameworks
2. Ajax framework
3. Application framework
4. Content management framework
5. Web application framework
6. Multimedia framework

47. Powerpoint Templates
Page 71
CSS frameworks
 Maxmertkit
 Cascade Framework
 Cascade Framework Light
 Concise
 Emastic
 floatz
 Ink
 Inuitcss
 Kube
Source: http://en.wikipedia.org/wiki/CSS_frameworks
 Kule CSS Lazy
 Malo
 Responsive Grid System
 Schema UI / Built with
LESS
 Semantic UI
 StackLayout
 uikit
 Unsemantic

48. Powerpoint Templates
Page 72
PHP Frameworks
 Akelos
 Aura
 CakePHP
 CodeIgniter
 Flight
 Kohana
 Laravel
 Medoo
 PHPixie
 Pop PHP
 Prado
 Phalcon
 PHPDevShell
 QPHP
 Symfony
 Yii
 Zend
 ZooP

49. Powerpoint Templates
Page 73
Best PHP Frameworks
Source: http://www.sitepoint.com/best-php-frameworks-2014/

50. Powerpoint Templates
Page 74
Web Application framework
Source: http://www.sitepoint.com/best-php-frameworks-2014/
 Zend Framework
 WikiBase/WikiWikiWeb
 JBoss Portal
 eXo Platform

51. Powerpoint Templates
Page 75
Content management framework
• Ayoola Framework
• Joomla! Framework
• Ayoola
Framework
• Umbraco
• Microsoft
SharePoint
Server
• Sageframe
• DotNetNuke
• Plone
• Django
• Mezzanine

52. Powerpoint Templates
Page 76
การใช ้งาน Software Framework
LABSDocument

53. Powerpoint Templates
Page 78
เทคนิคการพัฒนาโครงการซอฟต์แวร ์
ร่วมกันผ่าน GitHub
LABSDocument

54. Powerpoint Templates
Page 80
มาตรฐานในการพัฒนาซอฟต์แวร ์
(Software Development Standard)
LABSDocument

55. Powerpoint Templates
Page 81
Web Application Standard

56. Powerpoint Templates
Page 82
Web Application Standard
 การพัฒนาเว็บที่เป็นมาตรฐาน ?
 พัฒนาแอพลิเคชั่นตามแนวทาง W3C
 เว็บบริการตรวจสอบมาตรฐาน

57. Powerpoint Templates
Page 83
The W3C Markup Validation Service
http://validator.w3.org

58. Powerpoint Templates
Page 84
The W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/

59. Powerpoint Templates
Page 86
การสร ้าง Virtual LABS

60. Powerpoint Templates
Page 87
What is Docker ?
 Docker พัฒนาจากภาษา Go โดย Solomon Hykes ช่วงเดือน
มีนาคมปี 2013
 เป็นเครื่องมือโอเพ่นซอร์สใช้สาหรับสร้างและจัดการลีนุกซ์คอน
เทนเนอร์หรือ LXC (Linux Containers)
 Docker ถือเป็นเวอร์ชวลไลเซชั่นที่ทางานในระดับ OS-Level
 กินทรัพยากรน้อยมากเมื่อเทียบกับ Virtual Machine หรือ VM ที่
ใช้งานในปัจจุบัน(ต้องจอง cpu, ram, hdd)

61. Powerpoint Templates
Page 88
Cloud Models

62. Powerpoint Templates
Page 89
ข้อแตกต่างของ Virtual Machine กับ Docker

63. Powerpoint Templates
Page 90
Docker linux interfaces

64. Powerpoint Templates
Page 91

65. Powerpoint Templates
Page 92

66. Powerpoint Templates
Page 93
Docker ip

67. Powerpoint Templates
Page 94
Docker on windows

68. Powerpoint Templates
Page 95
ตัวอย่าง Operating-system-level virtualization
ที่ทางานในลักษณะเดียวกับ Docker
 OpenVZ (Linux)
 Linux-VServer (Linux)
 lmctfy (Linux)
 Parallels Virtuozzo Containers (Linux, Windows)
 FreeBSD Jail (FreeBSD)
 Solaris Containers (Solaris, OpenSolaris)
 WPAR - AIX Workload partitions (AIX)
 HP-UX Containers (SRP) (HP-UX)
 sysjail (OpenBSD, NetBSD)
 iCore Virtual Accounts (Windows)
 Sandboxie (Windows)

69. Powerpoint Templates
Page 96
การติดตั้ง Docker
https://docs.docker.com/installation/

70. Powerpoint Templates
Page 97
การติดตั้ง Docker บนระบบ Windows

71. Powerpoint Templates
Page 98
การติดตั้ง Docker บนระบบ Windows

72. Powerpoint Templates
Page 99
การเรียกใช ้งาน Docker
START DOCKER

73. Powerpoint Templates
Page 100
การเรียกใช ้งาน Docker
• docker version
• docker ps
• docker ps -l

74. Powerpoint Templates
Page 101
ทดสอบ Run hello-world
• docker run hello-world

75. Powerpoint Templates
Page 102
Docker IP
• boot2docker ip
192.168.59.103

76. Powerpoint Templates
Page 103
การค้นหา images
• docker search images_name
เช่น
• docker search centos
• docker search centos6
• docker search centos6:6
• docker search ubuntu
• docker search httpd
• docker search wordpress

77. Powerpoint Templates
Page 104
การดึงตัว images
• docker pull centos
• docker pull centos:6
• docker pull centos:6.6
• docker pull centos:7
• docker pull ubuntu

78. Powerpoint Templates
Page 105
ตรวจสอบ images ปัจจุบัน
• docker images centos
• docker images

79. Powerpoint Templates
Page 106
Run Container
• docker run –i -t ubuntu:latest
• docker run –i -t centos:latest
• docker run -i -t centos /bin/bash
• docker run centos:latest cat /etc/centos-release
ทาการสต๊าท Container พร้อมติดตั้ง Apache HTTP Server
• docker run centos /bin/bash -c "yum -y update; yum -y install httpd"

80. Powerpoint Templates
Page 107
Run Container
ตรวจสอบโปรเซส ระบบแสดง Container ID
docker ps -a | head -2
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
5b245e295b3ecentos:7"/bin/echo 'hello wo 7 minutesago Exited (0) 7 minutesago high_pike
เพิ่มชื่ออิมเมจที่ต้องการ เข้าไปในระบบด้วยคาสั่ง commit เพื่อให้อิมเมจนี้อยู่ถาวร
docker commit 5b245e295b3e custom/webserver1
655223d187eb6417ebdfcafac779ea6ed8ce7cd8189764fd2974941c1fc600d8
ตรวจสอบอิมเมจอีกครั้ง
docker images

81. Powerpoint Templates
Page 108
Run Container
กาหนดให้รันเว็บเซิร์ฟเวอร์ในคอนเทนเนอร์ ผ่านทางหมายเลขพอร์ต 8081
docker run -it -p 8081:80 custom/webserver1 /bin/bash
สั่งสต๊าท Apache ภายใต้Container
/usr/sbin/httpd &
ทดสอบ
รูปแบบ
http://IP_Address:8081/
ตัวอย่าง เช่น
http://192.168.1.2:8081

82. Powerpoint Templates
Page 109
Run Container
ทดสอบเขียนภาษา PHP
yum install php –y
vi /var/www/html/phpinfo.php
<?php phpinfo(); ?>
httpd -k stop
/usr/sbin/httpd &
ps aux|grep httpd
http://192.168.1.2:8081/phpinfo.php

83. Powerpoint Templates
Page 110
Add images
• docker commit 323ceff31212 custom/centos_httpd
• docker images

84. Powerpoint Templates
Page 112
แหล่งข้อมูลต้นน้าสาหรับนักพัฒนา
 SourceForge (web-based source code repository)
 http://sourceforge.net
 GitHub (Build software better, together)
 https://github.com

85. Powerpoint Templates
Page 113
การปรับตัวเข้าสู่
นักพัฒนาระบบงานยุค 4.0

86. Powerpoint Templates
Page 114
การปรับตัวเข้าสู่นักพัฒนาระบบงานยุค 4.0
ปรับองค์กร
ปรับตนเอง ปรับคนรอบข้าง

87. Powerpoint Templates
Page 115
การปรับตัวเข้าสู่นักพัฒนาระบบงานยุค 4.0
 มีอีเมลแอคเคาน์อย่างน้อย 2 แอคเคาท์(กาหนดรหัสผ่านที่แตกต่างกัน)
 ให้เวลากับเทคโนโลยี เรียนรู้เท่าทันสื่อใหม่ เทคโนโลยีใหม่
 เลือกใช้เทคโนโลยี (ตามความต้องการของตลาดแรงงาน)
 เข้าร่วมกิจกรรมของสาขา/คณะอื่นๆ/การดูงาน/การสัมมนา(Online/Offline)
 เรียนรู้ระบบงานตัวอย่าง จาก Google, YouTube, WikiPedia
 ติดตั้ง LABs เรียนรู้ส่วนตัวในรูปแบบ Virtual LABs
 ฝึกเขียนโค้ด / สร ้างระบบด้วยตนเอง / การทางานเป็นทีมผ่าน GitHub
 ติดตามผู้รู้สอบถามผู้รู้(Online/Offline)
 เรียนรู้เรื่อง Security, Web Standard, Web Technology, WorldSkills.org
 ฝึกภาษาที่สอง(English) เพิ่มเติม
 ทา e-Portfolio/e-Resume เก็บไว้ (2 ภาษา)
ปรับตนเอง

88. Powerpoint Templates
Page 116
การปรับตัวเข้าสู่นักพัฒนาระบบงานยุค 4.0
 ติดตามและเรียนรู้เทคโนโลยีสมัยใหม่
 แลกเปลี่ยน เรียนรู้
 สร้างกลุ่มเรียนรู้
 ถ่ายโอนความรู้
 ....................................................
ปรับคนรอบข้าง

89. Powerpoint Templates
Page 117
Powerpoint Templates
ดร.อาณัติ รัตนถิรกุล
คณะบริหารธุรกิจและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยเทคโนโลยีราชมงคลสุวรรณภูมิ
May 18-19, 2016
การพัฒนา Web Application
แบบมืออาชีพด้วย PHP

90. Powerpoint Templates
Page 118
เอกสารประกอบการบรรยาย
Topic: การพัฒนา Web Application แบบมืออาชีพด้วย PHP
สาขาวิศวกรรมคอมพิวเตอร์คณะเทคโนโลยีอุตสาหกรรม
มหาวิทยาลัยราชภัฏสวนสุนันทา
วันที่ 18-19 พฤษภาคม 2559
----------------------------------------------------------------------------------------------
Place: ห้องคอมพิวเตอร์ ชั้น 2 อาคาร 31 สานักวิทยบริการและเทคโนโลยี
สารสนเทศ