Lesson 8: Making the Application Look Better Using CSS

This tutorial needs a review. You can edit it in GitHub following these contribution guidelines.

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.

Application Source Code from the Previous Lesson

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

Oracle Database users: 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 <script></script> 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></script> tags:

<script>
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";
    }
}
</script>

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.

  1. 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.

  1. Add a style attribute to the wishList 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>

  1. Enter the following code above the wishList form:

<input type="submit" name="showWishList" value="Show Wish List of" onclick="javascript:showHideShowWishListForm()"/>

  1. Remove the following code from the form because it is already placed on the button:

Show wishlist of:

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 your 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.

newCascadingStyleSheetFile

The new file wishlist.css is shown in the project tree.

Defining CSS Styles

Open the wishlist.css file. The file already contains a "root" class, which you can remove. You can get a copy of wishlist.css by downloading a completed version of this tutorial, available 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.

  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.

  1. 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>
When a class is specified within a <div> tag, no dot is required in preposition.

  1. 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

MySQL users: Click here to download the source code that includes a sample design and CSS file.

Oracle Database users: Click here to download the source code that includes a sample design and CSS file.

PDO: Goran Miskovic, a community member, has kindly provided a PDO version of the complete tutorial, available here. In this project, you can switch between Oracle XE and MySQL databases simply by changing the DSN parameter. The project includes all SQL scripts you need and is documented in the code. Note however that PDO_OCI is experimental.

The NetBeans IDE team would like to thank Ozan Hazer for contributing the CSS and improving the code in the completed sample.

Next Steps

<< Previous lesson

Next lesson >>

Back to the Tutorial main page