Lesson 2: Wish List Application Design. Viewing the Wish List of a Person

Contents

• Lesson Scope
• Creating a PHP Project
• Defining a Page Flow Diagram
• Basic Functionality: Viewing the Wish List of a Person
  • Create the wishlist.php File
  • Transferring Data from index.php to wishlist.php
    • HTML Form in index.php
    • Testing index.php
  • Receiving and Processing Data in wishlist.php
• Learn More - Useful Links
• Application Source Code after the Current Lesson Is Completed

Lesson Scope

In this lesson you will create and configure the PHP project to develop your application, create a list of pages in the application, and define the relations between them. You will also develop a piece of the basic application functionality and test it against the data you entered in the sample database in lesson 1.

Creating a PHP Project

For information on creating and configuring a PHP project, see Setting Up a PHP Project.

Defining a Page Flow Diagram

The scope of your application covers the following use cases:

1. The user views the wish list of a person.
2. The user registers as a new wisher.
3. The user logs in and creates her/his wish list.
4. The user logs in and edits her/her wish list.

To cover this basic functionality, you will need to implement the following pages:

1. The "front" page index.php for logging in, registering, and switching to wish lists of other users.
2. The wishlist.php page for viewing the wish list of a particular wisher.
3. The createNewWisher.php for registering as a wisher.
4. The editWishList.php page for editing a wish list by its owner.
5. The editWish.php page for creating and editing wishes.

Basic Functionality: Viewing the Wish List of a Person

Now that you have finished the preliminary steps, you can start implementing the basic functionality of your application. Start with viewing the wish list of a wisher. This feature does not involve any validations and can be easily tested as you have already entered the test data into the database. The feature's functionality will be implemented on two pages, index.php and wishlist.php.

Create the wishlist.php File

1. Start the NetBeans IDE.
2. Click the right mouse button on the Source files node and from the context menu choose New > PHP File.
3. On the New PHP File panel, in the File Name: edit box enter wishlist and press Finish.
   
4. According to your project setup, the index.php file is already created. If not, create it as described above.
5. Switch to the Projects window, expand the Wishlist project node, and double click the index.php file. The index.php file opens in the main IDE editor area. The file contains a template for entering HTML and PHP code.
   .

Transferring Data from index.php to wishlist.php

The index.php file will not contain any PHP code so you can easily remove the following block:

This file is used for two purposes:

• Displaying a page with controls for entering data.
• Transferring the entered data to another page.

These actions are performed using HTML forms. Each form contains:

• A set of fields that correspond to the controls on the page with their types specified
• The destination URL address that corresponds to the page where the entered data must be transferred.

The data is received and processed on the destination page. In our example, the data is entered on the index page (index.php) and transferred to the wishlist.php page. You need to implement data transferring in index.php and data reception in wishlist.php.

HTML Form in index.php

Enter the following code block into the body of index.php:

<form action="wishlist.php" method="GET">
      Show wish list of: <input type="text" name="user"/>
		<input type="submit" value="Go" />
</form>

The above piece of code consists of the following elements:

• Enclosing tags <form></form>
• The opening <form> tag that contains the action field for entering the name of the file where the data must be transferred (wishlist.php) and the method to be applied to transferring data (GET). PHP creates a special array $_GET and populate there values of the fields from the original form.
• The text that appears on the page: Show wish list of:
• A text input field for entering the name of the user whose wish list one wants to view. The name ("user") is the key to pick the data on the destination form.
• An input field of the "submit" type with the text "Go". The type "submit" means that the input field appears on the page as a button and the data is transferred when exactly this control is affected.

Testing index.php

To test the front index.php page of your application:

1. Click the right mouse button on the Sources node and choose Run Project from the context menu or click the Run Main Project icon on the toolbar if you have set your project as Main.
   
2. In the Show wish list of: edit box, enter Tom and click Go. An empty page with the following URL appears: http://localhost:90/Lesson3/wishlist.php?user=tom. This URL indicates that your main page works properly.

Receiving and Processing Data in wishlist.php

1. Double click the wishlist.php file. The template that opens is different from index.php. Add the <html></html> and <body></body> tags as it will contain HTML code too.
2. To display the title, enter the following code block enclosed in the <body></body> tags:

    Wish List of <?php echo $_GET["user"]."<br/>";?>

   The PHP code block displays the data that is received through the method GET in the field "user". These data is transferred from index.php where the name of the wish list owner Tom was entered in the text field "user". Repeat the steps from Testing index.php to see that wishlist.php works properly.
   
3. To open connection to the database, paste the following code block:

   $con = mysql_connect("localhost", "phpuser", "!phpuser");
   if (!$con) {
       die('Could not connect: ' . mysql_error());
   }                

   The code attempts to open a connection to the database and gives an error message if there is a failure.
4. Enter the following code to retrieve the ID of the wisher whose wish list was requested:

   mysql_select_db("wishlist", $con);
   $wisher = mysql_query("SELECT ID FROM wishers WHERE Name='".$_GET["user"]."'");
   $wisherID = mysql_result($wisher, 0);  

   The data is selected from the Wishlist database through the $con connection. The selection criterion is the name received from the index.php as "user".
   The syntax of a SELECT SQL statement can be briefly described as follows:
   • After SELECT, specify the fields from which you want to get data. An asterisk (*) stands for all fields.
   • After FROM clause, specify the name of the table from which the data must be retrieved.
   • The WHERE clause is optional. Specify the filter conditions in it.
5. Enter the following code to display an error message if the requested wisher is not found in the database:

   if (!$wisherID) {
       die("The person " .$_GET["user"]. " is not found. Please check the spelling and try again" );
   }?>                

   
6. Enter the following HTML code block to open a table, specify the color of its borders (black), and "draw" the table header with the columns "Item" and "Due Date"

   <table border="black">
     <tr>
       <th>Item</th>
       <th>Due Date</th>
    </tr>
    </table>

   The </table> tag closes the table.
7. Enter the following PHP code block above the closing </table> tag:

   <?php
               $result = mysql_query("SELECT * FROM wishes WHERE wisher_id=". $wisherID);
               while($row = mysql_fetch_array($result)) {
               echo "<tr><td>" . $row["description"]."</td>";
               echo "<td>".$row["due_date"]."</td></tr>\n";
               }
               my sql_close($con);
   ?>

   Within the code:
   • The SELECT query retrieves the wishes with their due dates for the specified wisher by his ID, which was retrieved in step 4, and stores the wishes and due dates in an array $result.
   • A loop displays the items of the $result array as rows in the table while the array is not empty.
   • The <tr></tr> tags form rows, the <td></td> tags form cells within rows, and \n starts a new line.
   • The $con connection to the database is closed.
   Note: By default, MySQL is configured to be case sensitive. Make sure you type the names of database fields exactly as they are specified during the database table creation.
8. To test the application, run the project as described in section Testing index.php.
   

Learn More - Useful Links

Find more information on using HTML, PHP, and MySQL here:

• HTML Tutorial
• HTML Code Tutorial - Free Reference Guide for Help with HTML Tags
• PHP Tutorial
• PHP Tutorial - Learn PHP
• PHP Video Tutorials
• Getting Started with MySQL
• PHP / MySQL Tutorial
• PHP MySQL Tutorial

• Application Source Code after the Current Lesson Is Completed

  Click here to download the source code that reflects the project state after the lesson is completed

<< Previous lesson

Next lesson >>

Back to the Tutorial Main page

Back to the PHP Learning Trail