Developing PHP Application in NetBeans IDE

jDataLab

7 minute read

PHP is a back-end language for web development. PHP code needs to be executed by a PHP compiler in a web server. A web server will run and compile the code to the corresponding HTML code. In Netbeans IDE, we can create a PHP project with a local web server for development and test.

PHP: Hypertext Preprocessor

PHP has a complete set of object-oriented programming features including support for classes, abstract classes, interfaces, inheritance, constructors, cloning, exceptions, and more.

OS X is bundled with PHP but it is normally a little behind the latest stable version.

A few things that you may need to learn about PHP before diving into the language:

  • If a web page contains PHP code, its file extension must be php.

  • PHP code is not visible to front-end users.

  • PHP code can be placed anywhere in the source code of a web page.

  • PHP code must be enclosed with a pair of special tags

<?php 
?>

The following will show you how to create a PHP project with NetBeans 8.2 and an xampp installation for Windows.

Launch XAMPP

If you haven’t have xampp installed, install xampp.

Launch the control panel of xampp. Start Apache service.

Display the PHP Errors

Error output is very useful during development, but it could be very dangerous in production environments. PHP is configured by default in a way which displays compilation errors in development environments and hide them in production environments.

As recommended by PHP:

 1 
 2; This directive controls whether or not and where PHP will output errors,
 3; notices and warnings too. Error output is very useful during development, but
 4; it could be very dangerous in production environments. Depending on the code
 5; which is triggering the error, sensitive information could potentially leak
 6; out of your application such as database usernames and passwords or worse.
 7; For production environments, we recommend logging errors rather than
 8; sending them to STDOUT.
 9; Possible Values:
10;   Off = Do not display any errors
11;   stderr = Display errors to STDERR (affects only CGI/CLI binaries!)
12;   On or stdout = Display errors to STDOUT
13; Default Value: On
14; Development Value: On
15; Production Value: Off
16; http://php.net/display-errors
17display_errors = Off

PHP Initialization File

In xampp, the PHP initialization file, php/php.ini, from the xampp directory, contains the following line which enables the errors as xampp constitutes a development environment:

1display_errors = On

To turn off the errors, replace Off with On.

Enable errors in production environments

In a production environment, errors are hidden by default. If you don’t have write permission to php.ini, you can still enable error displaying for a page by add the following PHP snippet.

1<?php
2	error_reporting(E_ALL);
3	ini_set('display_errors', TRUE);
4	ini_set('display_startup_errors', TRUE);
5?>

Launch NetBeans

Start NetBeans IDE. Verify the HTML5 and PHP plugins are active by the menu path Tools->Plugins.

Create a New Project

Follow the menu path: File -> New Project

In New Project dialog box,

  • Select `PHP in Categories

  • Select PHP application in Projects

  • Click Next

In Name and Location: Make a name ‘MyWebApp’

  • Browse and choose a folder for project sources. For example, C:/Documents/C430/MyWebApp

  • Select a PHP version (PHP 7.0)

Click Next twice and Finish.

Configure the Project

In the Projects tab, right-click MyWebApp. Choose Properties.

Run Configuration

Click Run Configuration in the Categories column.

  • Run As: Script(run in command line)

  • Uncheck Use default PHP interpreter

  • Click Browse button to navigate to php.exe in your xampp installation folder. For example, if your xampp directory is in drive L, then the path of php.exe should be: L:\xampp\php\php.exe

  • In the field ‘Index File:', enter

    index.php

  • In the field “Arguments”, enter

    debug=true

  • In the field “PHP options”, enter

    -a

Configuring sources

Click Sources in the Categories column. On the right,

  • Leave Project Folder and Source Folder as it is.

  • Check Copy files from Sources Folder to another location

  • Copy to Folder: L:\xampp\htdocs\MyWebApp (J is the drive letter where contains your XAMPP directory.)

  • Check Copy files on project open

Insert a New PHP Web Page

Right-click the node Sources Files under MyWebApp in the Projects window.

Follow the selection: New -> PHP Web Page...

Enter index for File Name. Press Finish.

Edit index.php

Edit the source of index.php to the following:

  1<!DOCTYPE html>
  2<html>
  3    <head>
  4        <title>My Home Page</title>
  5        <meta charset="UTF-8">
  6        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  7        <link href="styles/main.css" rel="stylesheet" type="text/css"/>
  8    </head>
  9
 10    <body>
 11
 12        <?php
 13        //A PHP variable must begin with a $ sign.
 14        $msg = "Hello PHP";
 15        $nums = array(10, 2, 30);
 16        $msgs = array(
 17            "Monday" => 10,
 18            "Tuesday" => 20,
 19            "Wednesday" => 30
 20        );
 21        ?>
 22
 23        <section>
 24            <h1>
 25                <?php echo($msg); //print a variable  ?>
 26            </h1>
 27
 28            <div id="list">
 29                <ol>
 30                    <?php
 31                    foreach ($msgs as $key => $value) {
 32                        echo "<li>";
 33                        echo "$key: $value" . " hours";
 34                        echo "</li>";
 35                    }
 36                    ?>
 37                </ol>
 38            </div>
 39        </section>
 40
 41        <script>
 42            $('h1').mouseover(function () {
 43                $(this).toggleClass("lookone");
 44            });
 45        </script>
 46
 47
 48    </body>
 49</html>
 50{% endhighlight %} 
 51
 52<hr>
 53
 54## Insert and Edit a New Stylesheet File *main.css*
 55
 56`index.php` imports style sheets from an external css file `main.css`. In the following, we create such a file.
 57
 58- Make a new folder "styles" in the node `Source Files` of MyWebApp.
 59
 60- Right-click styles node to create a new `Cascading Style sheet...`
 61
 62- Name the file `main.css`.
 63
 64- Add the following style sheets to `main.css`
 65
 66<div class="highlight"><pre style="background-color:#eed;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-php" data-lang="php"><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span>body{
 67<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span>    text-rendering: optimizeLegibility;
 68<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span>    background-color: #fff;
 69<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span>    margin: 0;
 70<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span>    padding: 0;   
 71<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span>}
 72<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span>section {
 73<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span>    margin: 0 auto;
 74<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span>    width: 80%;
 75<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span>    padding: 1em;
 76<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span>    border: 1px seagreen solid;
 77<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12</span>    border-radius: 0.5em;
 78<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13</span>}
 79<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14</span>h1 {
 80<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15</span>    border-bottom: 1px seagreen solid;
 81<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16</span>}
 82<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17</span>.lookone {
 83<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18</span>    color: burlywood;
 84<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19</span>    font-family: &#34;Goudy Bookletter 1911&#34;, sans-serif;
 85<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20</span>    font-stretch: ultra-expanded;
 86<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21</span>}
 87<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22</span>
 88<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23</span>#list li:hover {
 89<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24</span>    background-color: burlywood;
 90<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25</span>}
 91<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26</span>
 92<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">27</span>#formarea,#tablearea {
 93<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">28</span>    width: 1200px;
 94<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">29</span>    margin: 0 auto;
 95<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">30</span>    margin-top: 50px;
 96<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">31</span>    padding: 10px;
 97<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">32</span>    background-color: antiquewhite;
 98<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">33</span>    border-radius: 20px;
 99<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">34</span>}
100<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">35</span>
101<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">36</span>#response {
102<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">37</span>    font-weight: bold;
103<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">38</span>    color: lightcoral;
104<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">39</span>}
105<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">40</span>
106<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">41</span>label {
107<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">42</span>    display:block;
108<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">43</span>    padding-top: 10px;
109<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">44</span>}
110<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">45</span>{% endhighlight %} 
111<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">46</span>
112<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">47</span>
113<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">48</span>
114<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">49</span>&lt;<span style="color:#8b008b;font-weight:bold">hr</span>&gt;
115<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">50</span>
116<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">51</span>
117<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">52</span>## Launch the Site MyWebApp
118<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">53</span>
119<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">54</span>Now we can test the site by launching MyWebApp in a web browser. 
120<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">55</span>
121<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">56</span>- Start a web browser window or tab.
122<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">57</span>
123<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">58</span>- In the address bar, enter the url:
124<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">59</span>
125<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">60</span>http://localhost:81/MyWebApp
126<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">61</span>
127<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">62</span>- The page should be similar to 
128<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">63</span>
129<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">64</span>
130<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">65</span>&lt;<span style="color:#8b008b;font-weight:bold">figure</span>&gt;
131<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">66</span>    &lt;<span style="color:#8b008b;font-weight:bold">img</span> <span style="color:#658b00">src</span>=<span style="color:#cd5555">&#34;/assets/2017-02-28-create-php-project-netbeans/indexpage.PNG&#34;</span>/&gt; 
132<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">67</span>&lt;/<span style="color:#8b008b;font-weight:bold">figure</span>&gt;
133<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">68</span>
134<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">69</span>
135<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">70</span>
136<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">71</span>## Test the PHP Page
137<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">72</span>
138<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">73</span>To test any change with `index.php`, simply reload the page in the browser window.
139<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">74</span>
140<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">75</span>&lt;<span style="color:#8b008b;font-weight:bold">hr</span>&gt;
141<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">76</span>
142<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">77</span>## Workout
143<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">78</span>
144<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">79</span>
145<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">80</span>
146<span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">81</span>&lt;<span style="color:#8b008b;font-weight:bold">hr</span>&gt;</code></pre></div>