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

1
display_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
2
3
4
5
<?php
	error_reporting(E_ALL);
	ini_set('display_errors', TRUE);
	ini_set('display_startup_errors', TRUE);
?>

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

png


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

png


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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
    <head>
        <title>My Home Page</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link href="styles/main.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

        <?php
        //A PHP variable must begin with a $ sign.
        $msg = "Hello PHP";
        $nums = array(10, 2, 30);
        $msgs = array(
            "Monday" => 10,
            "Tuesday" => 20,
            "Wednesday" => 30
        );
        ?>

        <section>
            <h1>
                <?php echo($msg); //print a variable  ?>
            </h1>

            <div id="list">
                <ol>
                    <?php
                    foreach ($msgs as $key => $value) {
                        echo "<li>";
                        echo "$key: $value" . " hours";
                        echo "</li>";
                    }
                    ?>
                </ol>
            </div>
        </section>

        <script>
            $('h1').mouseover(function () {
                $(this).toggleClass("lookone");
            });
        </script>


    </body>
</html>

Insert and Edit a New Stylesheet File main.css

index.php imports style sheets from an external css file main.css. In the following, we create such a file.

  • Make a new folder “styles” in the node Source Files of MyWebApp.

  • Right-click styles node to create a new Cascading Style sheet...

  • Name the file main.css.

  • Add the following style sheets to main.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body{
    text-rendering: optimizeLegibility;
    background-color: #fff;
    margin: 0;
    padding: 0;   
}
section {
    margin: 0 auto;
    width: 80%;
    padding: 1em;
    border: 1px seagreen solid;
    border-radius: 0.5em;
}
h1 {
    border-bottom: 1px seagreen solid;
}
.lookone {
    color: burlywood;
    font-family: "Goudy Bookletter 1911", sans-serif;
    font-stretch: ultra-expanded;
}

#list li:hover {
    background-color: burlywood;
}

#formarea,#tablearea {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px;
    background-color: antiquewhite;
    border-radius: 20px;
}

#response {
    font-weight: bold;
    color: lightcoral;
}

label {
    display:block;
    padding-top: 10px;
}

Launch the Site MyWebApp

Now we can test the site by launching MyWebApp in a web browser.

  • Start a web browser window or tab.

  • In the address bar, enter the url:

http://localhost:81/MyWebApp

  • The page should be similar to

png

Test the PHP Page

To test any change with index.php, simply reload the page in the browser window.


Workout