Configuring PHP development environment on Ubuntu

From IntelliJ-Wiki

Jump to: navigation, search

Contents

Introduction

This tutorial will walk you step by step through setting up environment for PHP programming. You will:

  1. Install the environment components.
    1. Download and install the Apache HTTPD Web server.
    2. Define your custom document root.
    3. Download and install the PHP engine and the MySQL database server.
  2. Integrate the installed PHP interpreter with your IDE.
  3. Create a simple PHP project with a test file.
  4. Integrate the Apache HTTPD server with the PHPStorm project.
  5. Deploy the project to the server from PHPStorm.

What This Tutorial Is Not About

  • This tutorial does not teach you PHP programming.
  • This tutorial does not teach you Ubuntu.

Prerequisites

Installing the Components

There are many ways to install the Web server and the PHP engine. Below is one of them.

Opening the Terminal

Open the Terminal by choosing Applications (1)| Accessories (2)| Terminal (3) on the main menu (Figure 1):

Figure 1. Opening the Terminal.

Downloading and Installing the Apache HTTPD Server

In the Terminal window (Figure 2), type the following command at the command line prompt:

sudo apt-get install apache2 (1)

Figure 2. Downloading and installing Apache Web server.

The system analyzes the packages to install and asks you whether you want to continue. Press Y (2) to agree. After that the system starts Apache HTTPD server installation and displays progress messages. When the installation is completed, the Web server starts and the corresponding message appears (3).

Checking the Installation

To make sure that the first step in configuring the development environment has been successful, let's check that the Apache server is accessible at the default URL address.

Open the browser of your choice and type the following URL address:

http://localhost:80

The Apache welcome page opens (Figure 3)

Figure 3. Apache HTTPD server welcome page.

Congratulations!

Specifying the Document Root for Apache HTTP Server

The Document Root is the folder where the Web server takes files for displaying in the browser. The Document Root is specified in the file that defines your virtual host.

To view the location of the configuration file and the document root folder, choose Places | Home Folder on the main menu, and then in your user home, that opens (Figure 4), switch to the File System view (1).

Figure 4. The location of the default virtual host.

The Apache HTTPD is installed in the apache2 folder (3) under the /etc folder (3). All the currently available virtual host configurations are stored in the /etc/apache2/sites-available folder (4), the default virtual host configuration file is /etc/apache2/sites-available/default (5). The default document root specified in it is /var/www/, that is, the files to be processed are by default stored in the www/ folder (7) under teh /var (6).

Editing the default virtual host is not secure. Therefore let's create our own Document Root folder, create our own virtual host with the new folder specified as its Document Root.

Creating a New Document Root Folder

First of all, we need to create a separate folder for the new document root. To do that, choose Places | Home Folder on the main menu. In your personal folder, that opens (Figure 5), choose File on the main menu (1), then choose Create New Folder in the list of commands.

Figure 5. Creating a new document root folder, step 1.

As you can see from Figure 6, a new untitled folder (1) is added.

Figure 6. Untitled folder added.

Specify the folder name, for example, my_site. Your personal folder (Figure 7) now contains a new document root my_site (1).

Figure 7. The new document root folder my_site added.

Creating a New Virtual Host

To copy and edit the configuration file of the default virtual host we again need the Terminal. Open it by choosing Applications | Accessories | Terminal on the main menu (Figure 8).

Figure 8. Terminal: creating a new virtual host.

Create a <nowiki<my_site></nowiki> copy of the configuration file of the default virtual host. To do that, type the following command at the command line prompt:

sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/my_site (1)

To start the gedit application, type the following code at the prompt:

gksudo gedit /etc/apache2/sites-available/my_site (2)

If asked, type your password specified for the root user.

The gedit application opens the </nowiki>my_site</nowiki> configuration file (Figure 9).

Figure 9. Virtual host configuration file my_site with the copied default settings.

The file shows the default settings for the Document root (1) and the Directory directive (2).

All you have to do here is change these settings so they point at the new document root folder (Figure 10):

Figure 10. Editing the configuration file of the virtual host.
  1. Replace DocumentRoot /var/www with DocumentRoot /home/user/my_site.
  2. Replace <Directory /var/www with <Directory /home/user/my_site/>.
  3. Save the file by clicking the Save button (3).

Activating a New Virtual Host

Choose Applications | Accessories | Terminal on the main menu to open the Terminal (Figure 11).

Figure 11. Activating the new virtual host.

Run the following utilities to deactivate the default host (1) and to activate the new one my_site (2):

sudo a2dissite default && sudo a2ensite my_site

To restart the Apache HTTPD server, run the following command (3):

sudo /etc/init.d/apache2 reload

Congratulations! You are through with installing and configuring the Web server.

Downloading, Installing, and integrating the PHP Engine and MySQL Database Server

Choose Applications | Accessories | Terminal to open the Terminal (Figure 12)

Figure 12. Downloading and installing PHP and MySql.

Type the following command to install the PHP engine (1), to install the MySQL server (2), and and to integrate the tools with each other (3):

sudo apt-get install mysql-client mysql-server php5 php5-mysql

When the system is through with reading and analyzing the packages, it asks you whether you want to continue (4). Type Y to agree and continue with specifying user credentials to access the MySql server (Figure 13).

Figure 13. Specify a password for the root user to access the MySql server.

Type the password and use the Tab keyboard button to move the focus to OK (Figure 14):

Figure 14. Password specified, focus moved to OK.

When you press Enter, you are asked to confirm the password (Figure 15):

Figure 15. MySql credentials specified.

Type the password again, use the Tab keyboard button to move the focus to OK, and press Enter. The system continues installing and configuring PHP and MySql.

Figure 16. Completing PHP and MySql installation.

As you can see from Figure 16, the system starts the MySql server (1), sets up PHP (2), creates PHP configuration files php.ini with the configuration settings (3, 4), integrates PHP with MySql (5). When ready, the command line prompt is displayed (6).

Restarting Apache Web Server

For the changes in the environment to take effect, we only need to restart the Apache HTTPD server (Figure 17).

Figure 17. Restarting the Apache HTTPD server.

At the command line prompt displayed after PHP installation, type the following code:

sudo /etc/init.d/apache2 restart (1)

The system restarts the Web server (2) and displays a command line prompt (3) when ready.

Integrating the PHP Engine and the Apache HTTPD Server with the IDE

Now that all the components are available, you need to "introduce" them to your IDE. If you have not installed IntelliJ IDEA or PHPStorm yet, do it as described in the articles Installing and Running PHPStorm on Ubuntu and Installing and Running IntelliJ IDEA on Ubuntu.

Once registered in IntelliJ IDEA or PHPStorm, a PHP interpreter is available at the IDE level, that is, in all projects. You can even have several PHP interpreters installed and switch between them when necessary.

On the contrary, interaction between the Apache HTPPD server and the IDE is configured for each project separately. That is why we will have to create a simple project to make sure that all the environment components interact with each other and with the IDE properly.

To illustrate and check integration between the PHP interpreter, the Apache HTTPD server, and the IDE, we will:

  1. Register the PHP interpreter.
  2. Create a simple project with one test PHP file.
  3. Configure interaction with the Apache HTTPD server in this project.
  4. Deploy and run the project on the Apache HTPPD server.

Configuring the PHP Engine Installation

All you need is register the PHP engine installation in the IDE. This is done on the PHP page of the Settings dialog box.

With the IDE running, choose File | Settings on the main menu as shown in Figure 16.

Figure 16. Opening the Settings dialog box.

The Settings dialog box opens (Figure 17):

Figure 17. PHP page: no PHP interpreter configured.

When you click PHP (1), the right-hand pane shows the PHP page. Look at the Interpreters list in the Development Environment area (2). As you can see, no PHP interpreters are configured. This means that our IDE just does not know about the PHP engine we installed. Let's integrate our PHP interpreter with the IDE. To do that, click the Browse button File:browseButton.png (3) to the right of the Interpreters list. The Interpreters dialog bos opens (Figure 18):

Figure 18. Interpreters dialog box: PHP installation detected.

The list of interpreters available from the IDE is empty yet. Click the Add tool bar button File:add.png (1). It's a miracle! The IDE has detected our PHP engine itself (2), we do not even have to do anything. Just click OK (3) and the right-hand pane of the dialog box (Figure 19) shows the details of the detected installation.

Figure 19. Interpreters dialog box: PHP installation configured.

The PHP Home (1) text box shows the folder where the PHP engine is installed. You may need to install another version of PHP later and integrate it with the IDE as well, so it makes sense to assign a name to the current one so you can easily distinguish between interpreters. Specify the installation name in the Name text box (2) and click OK (3). You return to the PHP page (Figure 20).

Figure 20. PHP page: PHP interpreter configured.

As you can see, the Interpreters list (1) now shows our PHP installation (2). Just click OK (3) to save the settings.

Creating a Project

Project creation in IntelliJ IDEA and in PHPStorm is slightly different. To avoid misunderstanding, let's consider both cases.

Creating a Project in IntelliJ IDEA

Start IntelliJ IDEA, and on the Welcome screen (Figure 21), click Create New Project:

Figure 21. IntelliJ IDEA Welcome screen.

The New Project wizard starts. The first page of the wizard (Figure 22) shows several scenarios of project creation.

Figure 22. Creating project: choosing a scenario.

We do not have any sources previously created in IntelliJ IDEA or in any other IDE. Therefore, choose the Create project from scratch option (1) and click Next (2). The system brings you to the second page of the wizard (Figure 23) where we will specify the basic settings without which the project cannot be created, first of all, the project name (1) and location (2). As you can see, these fields suggest some default settings.

Figure 23. Project name and location not specified.

Let's choose the parent directory to create the project in. To do that, click the Browse button File:browseButton.png (3). The Select Project File Directory dialog box, that opens (Figure 24), shows the folder structure of your user home directory.

Figure 24. Selecting the project location.

Of course we could store our project under any of them but let's create a separate folder for PHP projects. Click the Create Folder toolbar button File:newFolder.png (1) and specify the folder name </nowiki>PhpstormProjects</nowiki> in the dialog box that opens (4). Upon clicking OK (3), you return to the Create Project wizard (Figure 25) where the Project Files Location text box (2) shows the new folder. This folder is also specified as the Content Root (5). Let's now give a name to our project: in the Project Name text box (1), type my_php_project.

Figure 25. Project name and location specified.

We also need a module to develop our application in. To have a module created, select the Create Module check box (3). Choose the module type Web Module (4), this will tell IntelliJ IDEA that you just need a folder without any technology-specific structure. That is all, when you click Finish (6), IntelliJ IDEA creates a project according to the specified configuration and opens it, so we can proceed with populating the project with the application sources.

Creating a Project in PHPStorm

Start PHPStorm, and on the Welcome screen (Figure 26), click Create New Project.

Figure 26. PHPStorm Welcome screen. Create a new project.

The system opens the Create New Project dialog box (Figure 27) opens, where we will specify the Project Name (1) and Location (2). As you can see, these fields suggest some default settings. Let's choose the parent directory to create the project in. To do that, click the Browse button File:browseButton.png (3). The Select Location for Project Directory dialog box, that opens (Figure 27), shows the folder structure of your user home directory.

Figure 27. Creating new project: project location and name not specified.

Of course we could store our project under any of them but let's create a separate folder for PHP projects. Click the Create Folder toolbar button File:newFolder.png (1) and specify the folder name </nowiki>PhpstormProjects</nowiki> in the dialog box that opens (4).

Figure 28. Selecting the project location.

Upon clicking OK (3), you return to the Create Project dialog box (Figure 28) where the Location text box (2) shows the new folder. Let's now give a name to our project: in the Project Name text box (1), type my_php_project.

Figure 29. Project name and location specified.

That is all, when you click OK (3), PHPStorm creates a project according to the specified configuration and opens it, so we can proceed with populating the project with the application sources.

Creating Hello_world.php File

At last we are through with the project creation and it's time to populate it with the PHP application sources. All the further steps are similar for IntelliJ IDEA and for PHPStorm, so we will use PHPStorm examples for the sake of simplicity.

Our application will be very simple and consist of one file Hello_world.php. To create this file, switch to the Project tool window (Figure 32), select the project root folder my_php_project (1), choose File (2) on the main menu, then choose New from the list.

Figure 30. Creating PHP file.

From the New pop-up menu (3), choose PHP file' (3). The Create new PHP File dialog box opens (Figure 31):

Figure 31. Create PHP File dialog box.

Type hello_world in the File Name text box (2), and choose php from the File Extension drop-down list (2). When you click OK (3), PHPStorm creates a new file (Figure 32).

Figure 32. Hello_world.php file created and opened in the editor.

As you can see, the file hello_world.php is located under the project root (1) and opened in the editor (2). Type the following code (3):

<?php

echo "Hello world!";

?>

Configuring Deployment to the Apache HTTPD Server

Configuring integration with the Apache HTTPD server is identical in IntelliJ IDEA and in PHPStorm. For the sake of simplicity, we will illustrate the workflow with PHPStorm examples.

To enable processing of our test file, we need it deployed to the Apache HTTPD server under the server document root. Of course, we could do it manually but in this case we would have to copy the file every time it is updated. Luckily, PHPStorm can do it automatically, we just need to tell it where to deploy the project files and how to access them through the HTTP protocol. In the terms of PHPStorm, a combination of these settings is called server access configuration or simply server.

Server access configurations are defined on the Deployment page of the Settings dialog box. To open the dialog box, choose File | Settings on the main menu (Figure 33):

Figure 33. Opening the Settings dialog box.

When the Settings dialog box opens (Figure 34), click Deployment (1). As you can see, no server access configuration are available (2).

Figure 34. Deployment page: no server access configuration available.

To define a configuration, click the Add' button File:add.png] (3) on the toolbar. The Add Server dialog box opens (Figure 40):

Figure 35. Add server dialog box.

Give a name to the configuration (1) so you can distinguish it from others, for example, apache_1.

We also need to specify how PHPStorm will interact with the server. Let's see what we have in the Type list (2). The Apache HTTPD server is installed locally, so let's choose the Local or mounted folder option (3).

Note: The FTP'/SFTP protocol is not applicable here. On the other hand, our project is not located under the server document root, therefore the In place option does not fit either.

When you click OK (4), you return to the Deployment page (Figure 36), which shows the new server configuration (1) and its type (2):

Figure 36. Server access configuration: configuration name and access type specified.

Integrating PHPStorm with the Server Document Root

Now let's tell PHPStorm where the server document root is and how to access it through the HTTP protocol. As you know, the server document root is the folder where the server looks for files to be processed. You also remember that we have created our own virtual host with a document root folder /home/user/my_site.

Figure 37. Server access configuration, connection settings:server document root and its URL specified.

In the Upload/download project files to area (1), specify the server document root in the Folder (2) text box. Type the path to the /home/user/my_site folder manually or click the Browse button File:browseButton.png (3) and choose the folder in the Select Path dialog box that opens.

Finally, specify the URL address of the Apache HTTPD server (4) as by default defined in the server configuration file:

http://localhost

To check that the URL address is correct, click Open (5). The browser opens showing the index page (Figure 38):

Figure 38. The server is accessible through the specified URL.

Great! The settings ensure successful connection. Now we only have to map the folders in our project with folders on the server.

Mapping Local Project Folders to Folders on the Server

By now, PHPStorm knows where the server document root is. Technically, we can have all the files deployed right there. However practically it is not convenient. For example, we may want to have another project deployed to the server, so how will we then distinguish between the sources from these two projects? To avoid these problems in the future, we will have our sources deployed in a separate subtree under the server document root. Therefore we need to tell PHPStorm where on the server we want it to deploy files from the folders under the project root. This correspondence between local folders and their counterparts on the server is called "mapping". To define this correspondence, switch to the Mappings tab (Figure 39):

Figure 39. Server access configuration: mappings tab.
  1. In the Local Path text box (1), specify the full path to the project root folder /home/user/PhpstormProjects/my_php_project(2). Type the path manually or click the Browse button File:browseButton.png] (3) next to the text box and choose the location in the dialog box, that opens.
  2. In the Deployment Path text box (4), specify the folder to deploy the project sources to. Type the path relative to the server document root folder /home/user/my_site (5). In our case, the path to the deployment folder will be /PhpstormProjects/my_php_project (6).
  3. In the Web Path text box (7), type the URL address to access the deployment folder relative to the URL address of the server document root http://localhost. For the sake of simplicity, let the structure of the URL address correspond with the local folder structure, so just type PhpstormProjects/my_php_project (8). As you type, PHPStorm composes and displays the final project URL address (9).

That is all by now. Let's save the server access configuration and close the dialog box by clicking OK (10).

Enabling Creation of Missing Folders

As you might have noticed, we are going to deploy our project files to a non-existent folder /home/user/my_site/PhpstormProjects/. To enable such a trick, tell PHPStorm that it should create empty folders if they are missing on the server but are specified in the deployment path. On the main menu (Figure 40), choose Tools (1) | Deployment (2), then choose Upload to apache_1 (3) on the context menu.

Figure 40. Opening the Deployment Options dialog box.

The Options dialog box opens (Figure 41):

Figure 41. Deployment options dialog box.

Select the Create empty directories check box (1) and click OK (2). The dialog box closes and we can finally deploy and run our application.

Deploying and Running a Project

To have PHPStorm deploy our project, on the main menu (Figure 42), choose Tools (1) | Deployment (2), then choose Upload to apache_1 (3) on the context menu.

Figure 42. Starting project deployment.

PHPStorm opens the File Transfer tool window (Figure 43) that informs you about the deployment progress.

Figure 43. File transfer tool window.

Exploring the Server

Now let's have a look at the deployment results to make sure the project sources have been deployed correctly and the folder structure is reproduced as expected. We will explore the folders on the server and their contents in the dedicated Remote Host tool window. To open it, on the main menu (Figure 44), choose Tools (1) | Deployment (2), then choose Browse Remote Host (3) on the context menu.

Figure 44. Opening the Remote Host tool window.

The dedicated Remote Host tool window opens (Figure 45).

Figure 45. Remote Host tool window.

PHPStorm has performed deployment exactly in accordance with our expectations: under the server document root folder /home/user/my_site (1) it has created a PhpStormProjects folder (2) to group various projects in the future. Under this folder, we can see our project my_php_project (3) with the hello_world.php file (4).

Congratulations! Deployment from PHPStorm works!

Running the Test File

Open the hello_world.php file in the editor (Figure 46) and choose Open in browser on the context menu:

Figure 46. Opening the current file in the browser.

The browser shows the output of the test file (Figure 47):

Figure 47. Test file output.

As you can see, both the file output (1) is the one expected and the URL address (2) is also formed in accordance with our server access configuration settings. This means that we have integrated PHPStorm, the PHP engine, and the Apache HTTPD server so they can interact successfully.

Related Articles

Personal tools