Introduction
LAMP/WAMP/MAMP Server
To develop PHP webapps, you need to setup Apache + MySQL + PHP under your operating system, in a so called LAMP (Linux-Apache-MySQL-PHP), WAMP (Windows-Apache-MySQL-PHP), or MAMP (macOS-Apache-MySQL-PHP) environment.
There are two ways of setting up LAMP/WAMP/MAMP:
- Install individual software components, i.e., (a) Apache, (b) MySQL, (c) PHP, and (d) Other utilities.
- Install a bundle package, which includes all software components (a) to (d) needed for developing PHP webapps.
For beginners running on Windows/macOS, I certainly recommend the bundle approach for simplicity (although they might not bundled the latest releases). These are the bundles available:
- XAMPP @ https://www.apachefriends.org/index.html (Cross-platform for Windows, macOS and Linux).
- WampServer @ http://www.wampserver.com/en/ (for Windows only).
- Zend Server (@ http://files.zend.com/help/Zend-Server-Community-Edition/zend-server-community-edition.htm) (Cross-platform for Windows, macOS and Linux).
- Easy PHP (@ http://www.easyphp.org/).
- Others.
I shall describe how to install and setup some of these bundles in the next section.
Integrated Development Environment (IDE) and Debugger
You also need to install an IDE, such as Eclipse PHP Development Tool (PDT) (read "How to install Eclipse PDT"), NetBeans, IntelliJ IDEA, or others.
You need to setup these debugging tools and be familiar with:
- Server-side PHP debugging with "xDebug" or "Zend Debugger", and
- Client-side JavaScript debugging using the so-called "F12 debugger" under "Developer Tools" (which deprecated the famous "Firebug").
Read Section "Debugging PHP Webapps".
Programming Languages
I shall assume that you have some basic knowledge on these programming languages. Otherwise, read the relevant sections.
- Database programming: SQL (on MySQL or PostgreSQL). Read the "SQL Section".
- Sever-side programming: PHP (or Python, or Perl). Read "PHP Section"
- Client-side programming: HTML, CSS and JavaScript. Read "Client-side Programming: HTML/CSS/JavaScript Section". For advanced client-side programming: BootStrap, jQuery, Augular.js, React.js.
Version Control System (Git)
Set up a Version Control System, such as Git (on Github), for backup, version control and collaboration. Read "How to setup and get started with Git".
LAMP/WAMP/MAMP Servers
In this section, I shall briefly describe how to install and customize some of the AMP bundles. To install individual components, read "How to install and get start with Apache", "How to install and get started with MySQL".
XAMPP (For Windows/macOS/Linux)
The XAMPP (@ https://www.apachefriends.org/index.html) stands for Cross-platform (X), Apache (A), MariaDB (formerly MySQL) (M), PHP (P) and Perl (P). It bundles the free and open-source Apache, MariaDB/MySQL, PHP and Perl, for Windows, Linux and macOS. It also includes PhpMyAdmin, FileZilla FTP Server, Mercury Mail Server, Tomcat Server; Webalizer and Fake Sendmail.
At the time of writing (Apr 2021), XAMPP 8.0.3 bundles PHP 8.0.3, Apache 2.4.6, MariaDB 10.4.18 and PhpMyAdmin 5.1.0. See "Wiki XAMPP".
Installing XAMPP on Windows
- Download: Goto XAMPP mother site at https://www.apachefriends.org/index.html ⇒ Download the Windows package (e.g.,
xampp-windows-x64-8.0.3-0-VS16-installer.exe
). - Install: Simply run the downloaded Installer. Choose your installation directory. I shall assume that XAMPP is installed in "
c:\xampp
", denoted as<XAMPP_HOME>
, in this article.
Installing XAMPP on macOS [@@To Check!!]
- Download: Goto XAMPP mother site at https://www.apachefriends.org/index.html ⇒ Download the macOS package (e.g.,
.....
). - Install: Simply run the downloaded Installer. Choose your installation directory. I shall assume that XAMPP is installed in "
......
", denoted as<XAMPP_HOME>
, in this article.
Starting/Stopping XAMPP Servers
Launch the "XAMPP Control Panel" ("xampp-control.exe
" for Windows, @@To Check ...... for macOS) under the XAMPP installed directory. A little icon appears in the Icon Tray. Right-click on the icon ⇒ "Show/Hide" to show the "full" Control Panel Window.
The "XAMPP Control Panel" allows you to start/stop each of these servers: Apache HTTP Server, MySQL Database Server, FileZilla FTP Server, Mercury Mail Server, and Tomcat HTTP Server. You can also check their configurations ("Config"), logs ("Logs") and launch the administrator tools such as PhpMyAdmin for MySQL ("Admin").
Verifying the Apache/MariaDB Servers Installation
By default, a directory called "htdocs
" was created under the XAMPP installed directory, which serves as the Apache's document root directory.
To verify the installation, launch the "XAMPP Control Panel". Start the Apache and MariaDB/MySQL servers by clicking the "Start" buttons.
- On your browser, issue "
http://localhost
" (or "https://localhost
"). Check out the menu items such as "HOW-TO Guides", "FAQs", "PHPInfo". - Check out the "
htdocs
" (Apache's document base directory) and browse thru the "index.php
". - Select "phpMyAdmin" from the dashboard, or issue "
http://localhost/phpmyadmin
", or click the "Admin" button under MySQL to launch PhpMyAdmin webapp to access the MariaDB/MySQL. Select the "User accounts" tab, which reveals that no password is set for the superuserroot
and the anonymous user "Any". Set a password forroot
, and remove the anonymous user (See "PhpMyAdmin" section).
To shutdown XAMPP, stop all the services (servers) and press "Quit".
Write a Hello-world PHP Script
By default, the Apache's document root directory is located at "<XAMPP_HOME>/htdocs
". Use a programming editor (such as notepad++ for Windows, or gedit for Ubuntu/macOS) to write a simple PHP script called "hello.php
" and save under the "htdocs
" directory, as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <!-- hello.php --> <html lang="en"> <head> <meta charset="utf-8"> <title>My First PHP Web Page</title> </head> <body> <?php // First PHP script to say hello echo '<h1>hello, world!</h1>'; ?> </body> </html> |
To run this PHP script, start a browser and issue URL http://localhost/hello.php
, assuming that Apache server has been started.
Example "phpinfo": Write another PHP script called "RunPhpinfo.php
" (saved under "htdocs
") to display the PHP settings under Apache, as follows:
<?php
// RunPhpinfo.php - Run phpinfo() builtin function
phpinfo();
?>
Run the script by issuing URL "http://localhost/phpinfo.php
". The PHP's built-in function phpinfo()
outputs a fully-formatted HTML page showing the details of your PHP environment.
XAMPP Directory Structure
XAMPP is organized in the sub-directories. The important ones are:
- htdocs: the default apache's document root directory.
- apache, mysql, FileZillaFTP, MercuryMail, tomcat: for the server software.
- phpMyAdmin: for the PhpMyAdmin tool.
- php, perl: for the languages.
Apache Configuration
The Apache's main configuration file "httpd.conf
" is located at "<XAMPP_HOME>\apache\conf
". Take note of the following configuration directives:
- The core directives are:
ServerRoot "<XAMPP_HOME>/apache" Listen 80 ServerName localhost:80 DocumentRoot "<XAMPP_HOME>/htdocs"
TheServerRoot
specifies the apache's installed directory.Listen
specifies the TCP port number for Apache web server, in this case, default of TCP port 80. TheDocumentRoot
specifies the root directory of the web server. - The directives related to directory authorization are (for Apache 2.4, not compatible with Apache 2.2):
# # Deny access to the entirety of your server's file system. You must # explicitly permit access to web content directories in other # <Directory> blocks below. # <Directory /> AllowOverride none Require all denied </Directory> # # DocumentRoot: The directory out of which you will serve your # documents. By default, all requests are taken from this directory, but # symbolic links and aliases may be used to point to other locations. # DocumentRoot "<XAMPP_HOME>/htdocs" <Directory "<XAMPP_HOME>/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All # # Controls who can get stuff from this server. # Require all granted </Directory>
[TODO] Explanation - The directives related to logging are:
ErrorLog "logs/error.log" CustomLog "logs/access.log" combined
PHP Configuration
The PHP's main configuration file "php.ini
" is located from "<XAMPP_HOME>\php
" (as revealed by phpinfo()
output).
[TODO] Explanation
MySQL Configuration
The MySQL's main configuration file "my.ini
" is located at "<XAMPP_HOME>\mysql\bin
". Take note of the following settings:
- MySQL Server Daemon (
mysqld.exe
)[mysqld] port = 3306 socket = "<XAMPP_HOME>/mysql/mysql.sock" basedir = "<XAMPP_HOME>/mysql" tmpdir = "<XAMPP_HOME>/tmp" datadir = "<XAMPP_HOME>/mysql/data" pid_file = "mysql.pid" log_error = "mysql_error.log"
Theport
specifies the TCP port number for the MySQL server (defaulted to 3306). Thebasedir
specifies the MySQL installed directory. Thedatadir
specifies the databases directory. Thelog-error
specifies the MySQL error log file. - MySQL Interactive Client (
mysql
)[client] port = 3306 socket = "<XAMPP_HOME>/mysql/mysql.sock"
Customizing MySQL
The default MySQL installation creates a superuser called "root
" without password. It also provides an anonymous user with no password. You need to:
- Set a password for "
root
". - Remove the anonymous user.
- You should not use superuser "
root
" for normal daily operations. Instead, create a new user (saysxampppuser
) for operational use.
You can administrate MySQL via PhpMyAdmin. See the "PhpMyAdmin" section.
Start a new PHP Webapp
To start a new PHP webapp, create you working directory under "htdocs
" (says directory "hello
"). You can launch your webapp via URL "http://localhost/hello
". Alternatively, you can use the "htdocs
" directory, by removing all the existing contents. You can access the webapp via URL "http://localhost
".
For Production, configure a virtual host (in Apache) for your project.
WampServer (For Windows)
[TODO] Outdated! Need to Update. The cross-platform XAMPP (in the previous section) recommended.
WampServer (@ http://www.wampserver.com/en/) bundles Apache, MySQL and PHP for Windows in a single package. It also includes tools such as PhpMyAdmin (a MySQL database administration tool), SQL Buddy (an alternative to PhpMyAdmin), XDebug (a PHP Debugging Tool), WebGrind (a PHP Profiling Tool).
At the time of writing (Sept 2014), WampServer 2.5 bundles Apache 2.4.9, MySQL 5.6.17, PHP 5.5.12, PhpMyAdmin 4.1.14, SqlBuddy 1.3.3 and XDebug 2.2.5.
Installing WampServer
To Install WampServer:
- Download: Goto WampServer mother site at http://www.wampserver.com/en ⇒ Select "DOWNLOADS" ⇒ Choose the appropriate package for your platform (32-bit or 64-bit) ⇒ Download the installation file (e.g.,
wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b.exe
). - Install: To install the WampServer, simply run the downloaded installation file. Choose your installation directory. I shall assume that WampServer is installed in "
d:\WampServer
", denoted as<WAMPSERVER_HOME>
, in this article.
Starting/Stopping WampServer
To start the WampServer, choose "Start WampServer" from the "Start" menu; or run "wampmanager.exe
" from the WampServer installed directory.
An little icon will appear on the icon tray. "Green" indicates that all the services have started; while "Red" indicates that all the services have stopped. Click on the icon to open the "WampServer Control Panel". You could:
- Under "Quick Admin": Start/Stop/Restart all the services (Apache & MySQL services).
- Put the server online (so that user can access the server over the Internet) or offline.
- Configure Apache, MySQL and PHP, under their respective sections.
- Launch "PhpMyAdmin".
- Others.
To shutdown the program, click "Stop All Services" on WampServer Control Panel ⇒ right-click on the WampServer icon ⇒ Exit.
Verifying Apache/MySQL/PHP Installation
By default, a directory called "www
" was created under the WampServer installed directory, which serves as the Apache's document root directory. A welcome page called "index.php
" was also created in the "www
" directory.
To verify the installation:
- Start the WampServer. Wait for the icon to turn green indicating all services have started (otherwise, click the icon and select "Start All Services"). For testing, put the server "offline" to disable external access (i.e., it can only be accessed in localhost).
- To verify Apache: Start a browser and issue URL
http://localhost
. This will in turn request for "index.php
". The index page provides links to documentations, aliases and tools. The installation creates these aliases for Apache:phpmyadmin
,sqlbuddy
,phpsysinfo
for the respective services. You can issue URLhttp://localhost/alias-name
to access these services. - To verify MySQL: Issue URL
http://localhost/phpmyadmin
to access the MySQL via PhpMyAdmin. Click on the "Users", which reveals that no password was set for the superuserroot
and the anonymous user. - To verify PHP: Issue URL
http://localhost/?phpinfo=1
, which runs thephpinfo()
function.
Write a Hello-world PHP Script
Use a programming editor (such as notepad++ for Windows, or gedit for Ubuntu/macOS) to write a simple PHP script called "hello.php
" and save under the "www
" directory, as follows:
<html>
<head>
<title>First PHP Page</title>
</head>
<body>
<?php
echo '<h1>Hello, world!</h1>';
?>
</body>
</html>
To run this script, start a browser and issue URL http://localhost/hello.php
, assuming that the Apache server has been started.
Another Example: Write another PHP script called "phpinfo.php
" (saved under "www
") to display the PHP settings under Apache, as follows:
<?php phpinfo(); ?>
Run the script by issuing URL "http://localhost/phpinfo.php
".
WampServer Directory Structure
WampServer is organized in the following directory structure. The important ones are:
- bin: contains binaries for Apache, MySQL, and PHP, in their respectively sub-directory. For each component, you can install multiple versions and select one of them in operation.
- apps: contains server-side tools such as PhpMyAdmin, SQL Buddy, and WebGrind.
- tools: contains client-side tool such as xdc (XDebug Client).
- www: the default apache's document root directory.
- logs: contains apache, php, mysql error/access logs.
- alias: contains the the apache's alias configuration for PhpMyadmin, SQL Buddy and WebGrind.
Apache Configuration
The Apache's main configuration file "httpd.conf
" is located at "<WAMPSERVER_HOME>\bin\apache\Apache2.x.xx\conf
". Take note of the following configuration directives.
- The core directives are:
ServerRoot "<WAMPSERVER_HOME>/bin/apache/apache2.x.xx" Listen 80 ServerName localhost:80 DocumentRoot "<WAMPSERVER_HOME>/www/"
TheServerRoot
specifies the apache's installed directory.Listen
specifies the TCP port number for Apache web server, in this case, default of TCP port 80. TheDocumentRoot
specifies the root directory of the web server. - The directives related to directory authorization are (@@ For Apache 2.2 only, need to update for Apache 2.4):
# # Each directory to which Apache has access can be configured with respect # to which services and features are allowed and/or disabled in that # directory (and its sub-directories). # # First, we configure the "default" to be a very restrictive set of # features. # <Directory /> Options FollowSymLinks AllowOverride None Order deny,allow Deny from all </Directory> # # This should be changed to whatever you set DocumentRoot to. # DocumentRoot "<WAMPSERVER_HOME>/www/" <Directory "<WAMPSERVER_HOME>/www/"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from 127.0.0.1 </Directory>
[TODO] Explanation - The directives related to logging are:
ErrorLog "<WAMPSERVER_HOME>/logs/apache_error.log" CustomLog "<WAMPSERVER_HOME>/logs/access.log" common
PHP Configuration
The PHP's main configuration for Apache2 "php.ini
" is located at "<WAMPSERVER_HOME>\bin\apache\Apache2.x.xx\bin
" (as revealed by phpinfo()
output).
[TODO] Explanation
MySQL Configuration
The MySQL's main configuration file "my.ini
" is located at "<WAMPSERVER_HOME>\bin\mysql\mysql5.x.xx
". Take note of the following settings:
- MySQL Server
[wampmysqld] port = 3306 socket = /tmp/mysql.sock basedir=<WAMPSERVER_HOME>/bin/mysql/mysql5.x.xx log-error=<WAMPSERVER_HOME>/logs/mysql.log datadir=<WAMPSERVER_HOME>/bin/mysql/mysql5.x.xx/data
Theport
specifies the TCP port number for the MySQL server (defaulted to 3306). Thebasedir
specifies the MySQL installed directory. Thedatadir
specifies the databases directory. Thelog-error
specifies the MySQL error log file. - MySQL Server Daemon (
mysqld.exe
)[mysqld] port = 3306
- MySQL Interactive Client (
mysql
)[client] port = 3306
Customizing MySQL
The default MySQL installation creates a superuser "root
" without password. It also creates an anonymous user with no password. You need to:
- Set a password for "
root
". - Remove the anonymous user.
- You should not use superuser "
root
" for normal daily operations. Instead, create a new user (sayswampuser
) for operational use.
See "PhpMyAdmin" section.
Start a new PHP Webapp
To start a new PHP webapp, create you working directory under "www
" (says directory "hello
"). You can launch your webapp via URL "http://localhost/hello
". Alternatively, you can use the "www
" directory, by removing all the existing contents. You can access the webapp via URL "http://localhost
".
For Production, configure a virtual host (in Apache) for your project.
LAMP Server (For Ubuntu)
Read "How to Install LAMP Server on Ubuntu".
PhpMyAdmin - PHP Apache Webapp for MySQL Administration
PhpMyAdmin (http://www.phpmyadmin.net) is a popular open-source PHP webapp tool for administrating and manipulating MySQL/MariaDB database system.
Installing PhpMyAdmin
PhpMyAdmin a PHP webapp which runs under the Apache Server. Hence, it is bundled with a AMP (Apache-MySQL/MariaDB-PHP) distribution, such as XAMPP.
Launching PhpMyAdmin
PhpMyAdmin is an Apache PHP webapp. Typically, an alias called "phpmyadmin
" is defined which maps to its installed directory.
To launch PhpMyAdmin, start Apache and MySQL servers. Then, start a browser and issue URL http://localhost/phpmyadmin
.
Setting or Changing MySQL/MariaDB root's Password
After the installation, MySQL/MariaDB's superuser root has no password or has a randomly-generated password. We need to set/change the root's password immediately after installation.
Step 1: Change MySQL/MariaDB root
's Password
There are a few ways to set/change root's password:
- Using PhpMyAdmin: Launch PhpMyAdmin ⇒ Select "User accounts" from the top menu ⇒ Click on "Edit privileges" under "root@localhost" ⇒ You will find an option "Change password" on the top menu ⇒ Enter the new password.
- Using command-line
mysql
client:// Start a mysql client and login as root (with no password) $ mysql -u root // Start a mysql client and login as root with password $ mysql -u root -p // Change root@localhost's password mysql> alter user 'root'@'localhost' identified by 'xxxx';
Step 2: Modify the PhpMyAdmin's config "phpMyAdmin\config.inc.php"
PhpMyAdmin does not maintain its own users, but uses MySQL/MariaDB users to login to the MySQL/MariaDB.
The initial configuration in "phpMyAdmin\config.inc.php
" is as follows:
/* Authentication type and info */ $cfg['Servers'][$i]['auth_type'] = 'config'; // Get user/password from this config file $cfg['Servers'][$i]['user'] = 'root'; $cfg['Servers'][$i]['password'] = ''; // To provide root's new password here $cfg['Servers'][$i]['extension'] = 'mysqli'; $cfg['Servers'][$i]['AllowNoPassword'] = false; // Change from true
The 'auth-type'
of 'config'
instructs the PhpMyAdmin to get the user/password from this config file, without showing a login screen (i.e., hardcode the user/password in config). Hence, you need to provide the root's new password once it is set/changed.
A better approach is to change the 'auth-type'
to 'cookie'
. A login screen will be shown and the user/password will be captured from the login screen. You can use any valid MySQL/MariaDB users to login. The config is as follows:
/* Authentication type and info */ $cfg['Servers'][$i]['auth_type'] = 'cookie'; // Get user/password from a login screen //$cfg['Servers'][$i]['user'] = 'root'; //$cfg['Servers'][$i]['password'] = ''; $cfg['Servers'][$i]['extension'] = 'mysqli'; $cfg['Servers'][$i]['AllowNoPassword'] = false; // change from true
Creating New User
To create a new user say xamppuser
:
- Using PhpMyAdmin: Launch PhpMyAdmin ⇒ Select "User accounts" from the top menu ⇒ Click "Add user account" ⇒ Fill in the information.
- Using command-line
mysql
client:mysql> create user 'myuser'@'localhost' identified by 'xxxx'; mysql> grant all on *.* to 'myuser'@'localhost';
Using PhpMyAdmin
[TODO]
PhpMyAdmin's Configuration for Apache
- In XAMPP: PhpMyAdmin is configured in "
<XAMPP_HOME>\apache\conf\extra\httpd-xampp.conf
", which is included into Apache's main configuration file "<XAMPP_HOME>\apache\conf\httpd.conf
" via anInclude
directive. In the configuration, an alias called "/phpmyadmin
" is defined which maps to PhpMyAdmin's directory at "<XAMPP_HOME>/phpMyAdmin/
". - In WampServer: PhpMyAdmin is configured in "
<WAMPSERVER_HOME>\alias\phpmyadmin.conf
", which is included into Apache's main configuration file "<WAMPSERVER_HOME>\bin\apache\apache2.4.9\conf\httpd.conf
" via directive "Include "<WAMPSERVER_HOME>/alias/*"
". In the "phpmyadmin.conf
", an alias called "/phpmyadmin
" is defined which maps to PhpMyAdmin's directory "<WAMPSERVER_HOME>/apps/phpmyadmin4.x.xx/
".
Notes on Errors
- Cannot login using
root
, after setting password. See above. - Error "
#1034 index for table 'db' is corrupt
": From PhpMyAdmin ormysql
command-line client, issue this command:mysql> repair table `mysql`.`db` use_frm;
Eclipse PDT (PHP Developer Tool)
Eclipse PDT (@ https://www.eclipse.org/pdt) is an IDE for PHP webapp development. The main advantage is it can debug PHP server-side scripts with XDebug or Zend Debugger extension.
Alternative PHP IDEs are: NetBeans (@ http://www.netbeans.org), PHPEclipse (@ http://www.phpeclipse.com).
Install Eclipse PDT
If you have never installed any Eclipse packages, goto Eclipse mother site @ http://www.eclipse.org ⇒ Downloads ⇒ Select "Eclipse for PHP Developers":
- For Windows: Download the ZIP file. Unzip the downloaded file in a directory of your choice.
- For macOS: Read "How to Install Eclipse on macOS".
- For Ubuntu: Read "How to Install Eclipse on Ubuntu".
If you have installed an Eclipse package (such as Eclipse IDE for Java Developers), you can add the PDT plugin by:
- Launched Eclipse ⇒ Select "Help" menu ⇒ "Install New Software".
- In "Work with" ⇒ Enter "https://download.eclipse.org/tools/pdt/updates/latest/" ⇒ Add.
- In the "Name" box ⇒ Check "PHP Development Tools" ⇒ Next ⇒ Accept the license ⇒ Finish.
Writing a Hello-world PHP Webapp in Eclipse PDT
- Create a directory called "
hello
" under your web server's root directory (or document base directory) for the hello-world PHP webapp (e.g., "<XAMPP_HOME>\htdocs\hello
" for XAMPP, "<WAMPSERVER_HOME>\www\hello
" for WampServer). - Launch Eclipse (with PDT). Choose a workspace.
- On Eclipse, create a new PHP project: "File" ⇒ New ⇒ Project... ⇒ PHP ⇒ PHP Project.
- In "Project Name", enter a name for the project, e.g., "
helloPHP
". - In "Contents", select "Create project at exiting location" ⇒ "Browse" to select the hello-world PHP webapp's base directory created in Step 1 (e.g., "
<XAMPP_HOME>\htdocs\hello
" for XAMPP, "<WAMPSERVER_HOME>\www\hello
" for WampServer) ⇒ Finish.
- In "Project Name", enter a name for the project, e.g., "
- Write your PHP script: Right-click on the project "
helloPHP
" ⇒ "New" ⇒ "PHP File". Enter the following codes and saved as "HelloClass.php
":<?php // HelloClass.php class Hello { // Instance Variable var $message; // Default Constructor function __construct() { $this->message = "hello, world from PHP!"; } // Function that prints the value of the instance variable $message function sayHello() { echo $this->message; } } ?>
Then, create a new PHP file for the following test driver "
HelloTest.php
":<?php // HelloTest.php include_once('HelloClass.php'); $hello = new hello(); $hello->sayHello(); ?>
- To run the webapp, right-click anywhere on "
HelloTest.php
" ⇒ Run As ⇒ PHP Web Application ⇒ Change the URL tohttp://localhost/hello/HelloTest.php
.
To select your browser, select "Window" ⇒ Preferences ⇒ General ⇒ Web Browser ⇒ Choose your browser, such as internal web browser, or external web browser (Firefox, IE, etc). - You can also run this script as a "PHP CLI Application", i.e., a standalone Command-Line Interface program instead of server-side webapp, as the above program are purely PHP, with no HTML statements. Right-click on "
HelloTest.php
" ⇒ Run As ⇒ PHP CLI Application.
Eclipse will ask you to configure a "PHP Executable" (under "Window" ⇒ PHP ⇒ Installed PHPs) ⇒ Add ⇒Provide a PHP exeutable (e.g., for XAMPP-Windows,<XAMPP_HOME>\php\php.exe
).
Run again ⇒ The output will be shown in the eclipse's console.
Debugging PHP Server-Side Scripts
[TODO] Other IDEs.
Debugging PHP Webapps
XDebug for Debugging Server-side PHP Script
XDebug is an PHP extension, that allow you to debug server-side PHP Script running under Apache in Eclipse PDT. You can find the downloads, installation instructions and documentation at the xDebug mother site @ https://xdebug.org.
Install xDebug Extension for PHP
xDebug PHP extension may be bundled:
- For XAMPP (Windows), xDebug module is "
<XAMPP_HOME>/php/ext/php_xdebug.dll
". - For XAMPP (macOS), xDebug module is ...... @@To check
- For Ubuntu, read "Install XDebug extension for PHP" for Eclipse PDT".
- For WampServer, xDebug module is installed as "
<WAMPSERVER_HOME>/bin/php/php5.x.xx/zend_ext/php_xdebug-2.x.x-5.x-vc11-x86_64.dll
".
If you cannot find the above, you can download from https://xdebug.org/download:
- For XAMPP (Windows): Download the "Windows Binary" for your platform (e.g., PHP 8.0 VS16 TS (64 bit) - "
php_xdebug-3.0.4-8.0-vs16-x86_64.dll
"). Copy thedll
to<XAMPP_HOME>\php\ext
. - [TODO] Others
Configure xDebug in PHP
Add the following line to the PHP configuration file "php.ini" (You can find the PHP configuration file for Apache from the phpinfo()
output, under "Loaded Configuration File", e.g., <XAMPP_HOME>/php/php.ini
for XAMPP):
;;;;;;;;;;;;;;;;;;; ; xDebug ; ;;;;;;;;;;;;;;;;;;; ; Shall be placed after "zend_extension=opcache" (if any) ; For XAMPP (Windows) zend_extension=<XAMPP_HOME>\php\ext\php_xdebug-3.0.4-8.0-vs16-x86_64.dll ; For Ubuntu ;zend_extension=xdebug.so ; For XAMPP (for macOS) ;zend_extension = "<XAMPP_HOME>/......." ...... [xdebug] ; For xDebug 3 ;enable step debugging xdebug.mode=debug ;xdebug.mode=develop ; Below are for xDebug 2, see https://xdebug.org/docs/upgrade_guide ;xdebug.remote_enable = On ;xdebug.remote_port = 9000 ;port change to 9003 in xDebug3 ;xdebug.remote_host = 127.0.0.1
Verifying xDebug Installation in PHP
To verify that xDebug is installed and loaded, restart the server and search the phpinfo()
output (run "phpinfo.php
" written earlier) for "xdebug
", which shall show up as follows:
Configure Eclipse PDT with XDebug
Launch Eclipse ⇒ Select "Window" menu ⇒ Preferences ⇒ Expand the "PHP" node:
- Select "Servers" ⇒ Check that there is an entry with "Name" of "Default PHP Server" and "URL" of "http://localhost" ⇒ Select the entry ⇒ Edit ⇒ Select "Debugger" tab ⇒ In "Debugger": Select "XDebug" and set Port to 9003.
- Select "Installed PHPs" ⇒ "Add":
- In "Name", Enter a name, e.g. "myPHP", "XAMPP" or "WampServer".
- In "Executable Path", enter the location of PHP executable "
php.exe
" (e.g., "<WAMPSERVER_HOME>\bin\php\php5.x.x\php.exe
" for WampServer, "<XAMPP_HOME>\php\php.exe
" for XAMPP (Windows)). - In "PHP ini file", enter the php configuration file used by the Apache (e.g., "
<WAMPSERVER_HOME>\bin\apache\Apache2.2.xx\bin\php.ini
" for WampServer. "<XAMPP_HOME>\php\php.ini
" for XAMPP (Windows)). - In "Debugger", select "XDebug" and set the port to 9003.
- Select "Debug":
- In "Server", select "Default PHP Server".
- In "PHP Executable", select the PHP Executable configured in the previous step (i.e., "XAMPP" or "WampServer").
- Check "Break at first line".
- Select "Manual" (???) ⇒ Check that there is an entry with "Site Name" of "
php.net
" with "URL" of "http://www.php.net/manual/en
". - Browse through the other settings for PHP.
Eclipse PDT Debugging Example 1: Debugging PHP Server-side Scripts
Let's trace through the "helloPHP
" PHP Webapp created earlier (in "Eclipse PDT" section), which contains two PHP scripts: "HelloTest.php
" and "HelloClass.php
".
- Set a breakpoint at line 2 of "
HelloTest.php
" by clicking on the left margin. - Right-click on "
HelloTest.php
" ⇒ Debug As ⇒ PHP Web Application. - Switch to "Debug" perspective.
- The program shall break at line 2 of "
HelloTest.php
". Click "Step Into (F5)" or "Step Over (F6)" to trace through the program. Inspect the variables and observe the output at the web browser. - You need to terminate the debugging session by pushing the "Terminate" button.
Take note that if you check "Break at First Line" in the debug configuration, the program will pause at the first line of a PHP file. You need to push "Resume" or "Step Over".
Eclipse PDT Debugging Example 2: Debugging PHP Webapp (HTML+PHP)
Create the following two files "Query.php
" and "ProcessQuery.php
", saved under Apache's document root directory.
<!DOCTYPE html>
<!-- Query.php -->
<html>
<head>
<title>Test HTML Form</title>
</head>
<body>
<form method="post" action="ProcessQuery.php">
What is your name? <input type="text" name="username" />
<input type="submit" />
</form>
</body>
</html>
<?php
// ProcessQuery.php
echo '<p>Thank you for your query</p>';
if (isset($_POST['username'])) {
echo '<p>hello, ' . htmlentities($_POST['username']) . '</p>';
}
?>
Note: This code is meant for illustrating PHP webapp debugging. In practice, the two files are often merged into one.
To run the PHP webapp, right-click on "Query.php
" ⇒ Run As ⇒ PHP Web Application
To debug the PHP webapp:
- right-click on "
Query.php
" ⇒ Debug As ⇒ PHP Web Application. - Switch to "Debug" perspective.
- Push "Resume (F8)" button to run thru the HTML code.
- Switch to the browser. Enter something in the textfield and click "submit".
- Switch back to Eclipse, it now breaks at the first line of "
ProcessQuery.php
". - Click "Step Into (F5)" or "Step Over (F6)" to trace through the program. Inspect the variables and observe the output at the web browser.
- You need to terminate the debugging session by pushing the "Terminate" button.
Take note that if your program contains HTML and PHP, your need to switch between the web browser (to enter data) and eclipse (to push "Resume" to run thru the HTML codes, or "Step Over/Into" to execute the PHP codes). At times, the browser/eclipse icons on the taskbar brink to remind you to switch over.
Note: I actually intend to name "Query.php
" as "Query.html
", but the XDebug session does not seem to start on HTML (although you could tailor the "Run configuration" to start running from an HTML file)?! Let me know if you have an answer. For the time being, name all files (may be only the starting page) ".php
" even they contains only HTML. This is not really a problem.
Zend Debugger for Debugging Server-side PHP Script
[TODO] Can't install Zend Debugger long time ago. To try again and compare with XDebug.
Debugging Client-side HTML/CSS/JavaScript using F12 Debugger
PHP Webapp Exercises
- Read "PHP Basics".
- Read "PHP MySQL webapps". Use "PDO" for database connection.
- Convert the "Java Servlet Case Study ebookshop" from Java Servlet (Tomcat/MySQL) to PHP (Apache/MySQL).
- Read HTML, CSS and JavaScript.
- Proceed to "Advanced PHP Webapp Development".
REFERENCES & RESOURCES
- Robin Nixon, "Learning PHP, MySQL, JavaScript, and CSS", 2nd ed, O'Reilly, 2012.
- Timothy Boronczyk, Elizabeth Naramore, Jason Gerner, Yann Le Scouarnec, Jeremy Stolz and Michael K. Glass, "Beginning PHP6 Apache MySQL Web Development", Wrox Programmer to Programmer, 2009.
- Luke Welling and Laura Thomson, "PHP and MySQL Web Development", 4th edition, Addison-Wesley, 2008.
- Dirk Merkel, "Expert PHP 5 Tools", Packt Publishing, 2010.