Lesson 8: Improving the Appearance of the Application 
Contributed by Barbara Mityashina
June 27, 2008
Contents
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.
Lesson Scope
In this lesson you will:
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:
- Add a <script></script> block to the index.php file right above the closing </body> tag.
- Develop two JavaScript functions inside the
tags.
- 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
- Add the style parameter to the logon form:
<form name="logon" action="index.php" method="POST" style="visibility:<?php if ($logonSuccess) echo "hidden";
else echo "visible";?>">
The parameter style defines whether the form is hidden or visible. The <?php ?> block is used to implement keeping the form visible until the user logs on successfully.
- 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.
- Add the style parameter to the showWishList form:
<form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
- Enter the following code above the showWishList form:
<input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
- 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
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 = $db->get_wishes_by_wisher_id($wisherID);
while($row = mysql_fetch_array($result)) {
echo "<tr><td> " . $row["description"]."</td>";
echo "<td> ".$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. Yo 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
- Click the right mouse button on the Source Files node and from the context menu choose New > Cascading Style Sheet.
- On the Cascading Style Sheet panel, in the File Name edit box enter wishlist. Click Finish.
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
- 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.
- 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.
- 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
<< Previous lesson
Back to the Tutorial main page
Back to the PHP Learning Trail
