corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

Creating a CRUD Application with PHP

Lesson 8: Making the Application Look Better Using the CSS Technology

In this lesson you learn how to do the following:

The current document is a part of the Creating a CRUD Application in the NetBeans IDE for PHP tutorial.

Lessons in this tutorial:

Content on this page applies to NetBeans IDE 6.5
  1. Creating a CRUD Application with PHP - Main page
  2. Creating a MySQL Database
  3. Designing the Application. Reading from the Database
  4. Creating a New Application User
  5. Optimizing the Code
  6. Adding Security. Implementing Application User Logon
  7. Writing a New Entry into the Database
  8. Updating and Deleting Entries in the Database
  9. => Making the Application Look Better Using the CSS Technology
  10. Deploying the Application on a Remote Web Server

Contents of this lesson

Application Source Code from the Previous Lesson

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

Hiding Forms

Presently, the main index.php page of your application always displays the entire logon and showWishList forms. To improve the appearance of your application, you can hide the forms and replace them with buttons. When the user presses a button the corresponding hidden form expands.

To implement this behavior:

  1. Add a <script></script> block to the index.php file right above the closing </body> tag.
  2. Develop two JavaScript functions inside the tags.
  3. Make some minor changes to the index.php file

JavaScript Functions

JavaScript functions do not require any input parameters and do not return any result. The following code checks the visibility status of the corresponding form and changes it to the opposite status. It also changes the text on the button. To accomplish these changes, enter the following code inside the <script></scrip> tags:

function showHideLogonForm() {
    if (document.all.logon.style.visibility == "visible"){
        document.all.logon.style.visibility = "hidden";
        document.all.myWishList.value = "My Wishlist >>";
    } 
    else {
        document.all.logon.style.visibility = "visible";
        document.all.myWishList.value = "<< My Wishlist";
    }
}
function showHideShowWishListForm() {
    if (document.all.wishList.style.visibility == "visible") {
        document.all.wishList.style.visibility = "hidden";
        document.all.showWishList.value = "Show Wish List of >>";
    }
    else {
        document.all.wishList.style.visibility = "visible";
        document.all.showWishList.value = "<< Show Wish List of";
    }
}

Updating index.php

  1. Add a style attribute to the logon form: 
    <form name="logon" action="index.php" method="POST" style="visibility:<?php if ($logonSuccess) echo "hidden"; 
                                                                           else echo "visible";?>"    >
    The style attribute defines whether the form is hidden or visible. The <?php ?> block is used to keep the form visible until the user logs on successfully.
  2. Enter the following code above the logon input form code: 
     <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
    The code implements a button with the text "My Wishlist >>". The button stands in place of the logon form. Pressing the button calls the showHideLogonForm function.
  3. Add a style attribute to the showWishList form: 
    <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
Show wish list of: <input type="text" name="user"/>
                <input type="submit" value="Go" />
    </form>
  4. Enter the following code above the showWishList form: 
    <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
  5. Remove the following code from the form because it is already placed on the button: 
    Show wishlist of:

Improving the Appearance of Tables

To make empty cells in tables look better, use the &nbsp; special character. Below is an example of this method from the wishlist.php file. You can apply it to the table in the editWishList.php file. 
        <div class="table">
        <table border="black">
            <tr><th>Item</th><th>Due Date</th></tr>
            <?php
            $result = WishDB::getInstance()->get_wishes_by_wisher_id($wisherID);
            while($row = mysql_fetch_array($result)) {
                echo "<tr><td>&nbsp;" . $row["description"]."</td>";
                echo "<td>&nbsp;".$row["due_date"]."</td></tr>\n";
            }
            ?>
        </table>
        </div>

Defining Styles Using the Cascading Style Sheet

Presently the controls in your application "stick" to each other and are usually placed in the upper left-hand corner of the screen. To improve the appearance of you application's pages, specify the size, position, color, font, and other parameters of controls by defining styles and assigning these styles to particular controls. Styles are defined in a separate Cascading Style Sheet (CSS) file.

All the recommendations and suggestions concerning the application design are optional. The style definitions below are intended just to give you an example of improving the application appearance. The settings are appropriate for screen resolution 1024x768 pixel or higher.

Creating a CSS File

  1. Click the right mouse button on the Source Files node and from the context menu choose New > Cascading Style Sheet.
  2. On the Cascading Style Sheet panel, in the File Name edit box enter wishlist. Click Finish.
    New CSS File panel
    The new file wishlist.css is shown in the project tree.

Defining CSS Styles

The NetBeans IDE provides a friendly Style Builder code generation tool that enables you to define styles . Just choose the appropriate setting from a list and evaluate the presentation of the sample text in the Preview area. The code to implement the style is generated automatically. All the changes you make to a style are immediately reflected so you can tune the appearance of your application to your taste and habits.

Open the wishlist.css file. The file already contains a "root" class, which you can remove. Please, find the CSS styles for the application in the wishlist.css file that you can download here. The code is intuitively clear and contains:
  • Two styles: "body" and "input" - that are automatically applied inside any <body></body> or <input/> tag.
  • CSS classes that are applied when explicitly specified. The names of classes have dots in preposition, for example,.createWishList. Some classes are used several times, for example, the ".error" class is applied to all error messages in the application. Other classes are used only once, for example, ".showWishList", ".logon".

Implementing the Design Using HTML Divs

All the recommendations and suggestions concerning the application design are optional. Like the style definitions above they are intended just to give you an example of how to improve the application's appearance.

The example below shows how you can improve the appearance of the index.php page.

index.php

  1. To enable using the CSS classes that you defined, enter the following code inside the <head></head> block: 
         <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
    The styles "body" and "input" are automatically applied inside the corresponding tags so you do need to indicate them explicitly.
  2. To apply any other style (class) to an area, enclose the code that implements the area in the <div class=""></div> tags: 
     <div class="showWishList">
                <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
                
                <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
                   <input type="text" name="user"/>
                   <input type="submit" value="Go" />
                </form>
    </div>
    Note: When a class is specified within a
    tag, no dot is required in preposition.
  3. You can use embedded <div> tags: 
    <div class="logon">
         <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
                <form name="logon" action="index.php" method="POST" 
                          style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
                    Username: <input type="text" name="user"/>
                    Password:  <input type="password" name="userpassword"/><br/>
                    <div class="error">
                      <?php
                         if (!$logonSuccess) echo "Invalid name and/or password";
                       ?>
                    </div>
                    <input type="submit" value="Edit My Wish List"/>
                </form>
    </div>
    The class "logon" is applied to the entire form, and the class "error" is applied to an error message within the form.

For more details on using Cascading Style Sheets (CSS), see http://www.htmlpedia.org/wiki/List_of_CSS_Properties


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

Next Steps

<< Previous lesson

Next lesson >>

Back to the Tutorial main page



To send comments and suggestions, get support, and keep informed on the latest developments on the NetBeans IDE PHP development features, join the mailing list.

Back to the PHP Learning Trail