Employee Detail Page

After the Master Page is created, it is best to create the Detail Page with an ID passed to it from the Master Page to show more DETAIL information about the selected item from the Master Page.

The code that will be created will perform the following tasks:

PART A: CREATE STATIC CONTENT

There are three static components that will be created:

  1. Image
  2. Table
  3. Button

Create Static Image

Create static image that is needed for the Employee Detail Page.

  1. Open the employee_detail.php page that you created earlier.
  2. Write (or copy) the following highlighted code below the <h2> tag. Comment is optional.
    WHY: To create a static image below the header.

    <h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE DETAIL</h2>
<!-- Static Image -->
<img style = "float:left; margin-right:20px; border:1px solid black" src = "images/ann_ricoh.jpg"/>

  3. CHECK POINT: Save the file and preview it in a browser. You should see the image displayed below the header when the page loads.

Create Static Table

  1. Write (or copy) the following highlighted code below the <img> tag. Comment is optional:
    WHY: To create a static table below the static image.

    <img style = "float:left; margin-right:20px; border:1px solid black" src = "images/ann_ricoh.jpg"/>
<!-- Table -->
<table border = "1" style="float:left; border-collapse:collapse; width:309px;">
    <tr>
    <th colspan = "2" align="center">&nbsp;</th>
    </tr>
    <tr>
    <th width = "95" align="right">City:</th>
    <td width = "169">&nbsp;</td>
    </tr>
    <tr>
    <th align = "right">State:</th>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <th align = "right">Start Date:</th>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <th align = "right">Department:</th>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <th colspan="2" align="left">Note: &nbsp;</th>
    </tr>
    </table>

  2. CHECK POINT: Save the file and preview it in a browser. You should see a blank table displayed below the image if the screen is small. The table will be to the left of the image on a larger screen.

Create Static Button

The DELETE EMPLOYEE button will be created now but will be used later with the delete_employee.php page.

  1. Create a new merged row at the end of the table with a button and several attributes:

    <tr>
    <td colspan = "2" align="center"><a data-role = "button" data-inline = "true" 
href = "#">DELETE EMPLOYEE</a></td>
    </tr>
    </table>
  2. Replace the pound sign (#) in the href attribute, add a static link to the delete_employee.php page with a ?recordID=1 query string:

    <tr>
    <td colspan = "2" align = "center"><a data-role = "button" data-inline = "true" 
href = "delete_employee.php?recordID=1">DELETE EMPLOYEE</a></td>
</tr>
    </table>

  3. CHECK POINT: Save the file and preview it in a browser. If you pass it a recordID from the Employee Master Page or from the browser, you should see the DELETE BUTTON at the bottom of the page. If  you hover over it, you see the recordID that it will pass to the Delete Employee Page.


PART B: ADD DYNAMIC SCRIPTS

Add SQL SELECT Recordset Script

A recordset will be created using the SQL SELECT clause to retrieve a SINGLE employee record from the database based on the URL variable pass FROM the Employee Master Page (index.php) when a link in the listview is clicked.

  1. Write the following highlighted code block below the  <h2> tag. Comments are NOT highlighted because they are optional but are written to explain code.
    WHY: To create a recordset that will be used create a dynamic image and to populate the table.

    <h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE DETAIL</h2>
<!-- SQL SELECT QUERY -->
<?php
    // Store reference of SQL statement in a variable.
    $query_getSelectedEmployees="SELECT * FROM employees WHERE EmployeeID = $_GET[recordID]";
    // Store a reference of the query in this variable from the SQL variable using the mysql_query function.
    $result_getSelectedEmployees=mysql_query($query_getSelectedEmployees);
    // Store the result of the query into an associative array using the mysql_fetcth_assoc function.
    $row_getSelectedEmployees=mysql_fetch_assoc($result_getSelectedEmployees);
// Close connection to database
    mysql_close();
    ?>

    CODE EXPLANATION:
    • Since most of the columns are needed for the detail page, the wildcard asterisk (*) is used to return ALL of the COLUMNS from the database. However, because the wildcard asterisk is used, we will have to MANUALLY concatenate the FirstName and LastName with a space or a non-breaking space (&nbsp;) between the two fields to create an employee's full name.
    • The WHERE clause is used as a FILTER to return a SINGLE ROW from the database based on the EmployeeID that is passed from the Employee Master Page (e.g., index.php).
    • The $_GET[recordID] is a dynamic variable that get resolved to the EmployeeID value that was passed from the Employee Master Page (index.php) when a list item is clicked.
  2. Save the file.

PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT

Make Image Dynamic

  1. Replace the static reference of the image (e.g., ann_ricoh.jpg) with the following highlighted code to the <img> tag above the opening <table> tag:
    WHY: To make the image dynamic instead of static.

    <img style = "float: left; margin-right:20px; border:1px solid black" src = "images/
            <?php print $row_getSelectedEmployees['Image']; ?>"/>
<table border = "1" style="float:left; border-collapse:collapse; width:309px;">

  2. CHECK POINT: Save the file and preview it in a browser. Initially, you will see an error message (e.g., Notice: Undefined index: recordID...) and a warning (e.g., Warning: mysql_fetch_assoc() expects parameter 1 to be resource...). That's because the recordID is not yet defined. To test the page, do one of the two steps below:

    1. Type a path to the file in a browser: http://localhost/EmployeeDirectory/employee_detail.php?recordID=3. Repeat this step several times with a different recordID number. You may need to go to phpMyAdmin to look at the database to see what the EmployeeID numbers are.

      NOTE: Notice the ?recordID=3 at the end of the URL which represent an EmployeeID value. This is a query string that simulate the EmployeeID value that will be used in the next example.

    2. Go to the Employee Master Page (e.g., index.php) and click on any one of the link. Repeat this step several times to see different images being displayed.

      You should see the image displayed above the table if the screen is small. The image will display to the right of the table on a larger screen.

      - It is important to note that the image is not coming from the database. The image name (e.g., ann_ricoh.jpg) in in the database. The images actually is a reference to the images in the images folder. .

Make Table Dynamic

  1. Replace the static references of the non-breaking spaces (e.g., &nbsp;) in the table with the following highlighted code in the <th> tags.
    WHY: To make the table dynamic instead of static.

    <table border = "1" style="float:left; border-collapse:collapse; width:309px;">
    <tr>
    <th colspan = "2" align="center"><?php print $row_getSelectedEmployees["FirstName"];?> &nbsp;
<?php print $row_getSelectedEmployees["LastName"]; ?></th>
    </tr>
    <tr>
    <th width = "95" align="right">City:</th>
    <td width="169"><?php print $row_getSelectedEmployees["City"]; ?></td>
    </tr>
    <tr>
    <th align = "right">State:</th>
    <td><?php print $row_getSelectedEmployees["State"]; ?></td>
    </tr>
    <tr>
    <th align = "right">Start Date:</th>
    <td><?php print $row_getSelectedEmployees["StartDate"]; ?></td>
    </tr>
    <tr>
    <th align = "right">Department:</th>
    <td><?php print $row_getSelectedEmployees["Department"]; ?></td>
    </tr>
    <tr>
    <th colspan = "2" align="left">Note:<?php print $row_getSelectedEmployees["Note"]; ?></th>
    </tr>
    </table>

  2. CHECK POINT: Save the file and preview it in a browser. Initially, you will see an error message (e.g., Notice: Undefined index: recordID...) and a warning (e.g., Warning: mysql_fetch_assoc() expects parameter 1 to be resource...). That's because the recordID is not yet defined. To test the page, do one of the two steps below:

    1. Type a path to the file in a browser: http://localhost/EmployeeDirectory/employee_detail.php?recordID=3. Repeat this step several times with a different recordID number. You may need to go to phpMyAdmin to look at the database to see what the EmployeeID numbers are.

      NOTE: Notice the ?recordID=3 at the end of the URL which represent an EmployeeID value. This is a query string that simulate the EmployeeID value that will be used in the next example.

    2. Go to the Employee Master Page (e.g., index.php) and click on any one of the link. Repeat this step several times to see different images being displayed.

      You should see the table POPULATED with data from the database displayed below the image if the screen is small. The table will be to the left of the image on a larger screen.

Make Button Dynamic

The DELETE EMPLOYEE button will be created now but will be used later when the delete_employee.php page is created.

  1. Replace the static number (1) in the Delete Button code with its dynamic counterpart:

    <tr>
    <td colspan = "2" align = "center"><a data-role = "button" data-inline = "true" 
href = "delete_employee.php?recordID=<?php print $row_getSelectedEmployees["EmployeeID"]; ?>">DELETE EMPLOYEE</a></td>
</tr>
    </table>

  2. CHECKPOINT: Save the file and preview it in a browser. You should see DELETE EMPLOYEE button at the bottom of the table. If you click on it, it will take you to the Delete Employee Page. However, the employee record will NOT be deleted because we have not written the code for the Delete Employee Page yet.

Make Confirmation Dialog Box Dynamic

It is best practice to give the user a confirmation notice that the record will be deleted and the option to cancel the process if the wrong record is selected or the user changes his or her mind on deleting the record.

  1. Add the following highlighted code to the end of the opening <a> tag of the DELETE EMPLOYEE button:

    <tr>
    <td colspan = "2" align = "center"><a data-role = "button" data-inline = "true" 
href = "delete_employee.php?recordID=<?php print $row_getSelectedEmployees["EmployeeID"];?>"
onclick = "return confirm('Are you sure you want to delete this employee?')">DELETE EMPLOYEE</a>
</td>
    </tr>
    </table>
  2. CHECKPOINT: Save the file and test it in a browser. Open the EMPLOYEE MASTER PAGE (index.php) and click on one of the list item. Then, in the EMPLOYEE DETAIL page, click on the DELETE EMPLOYEE button. You should see an Alert dialog appear. 
    First, click the Cancel button. Nothing should happen except the dialog box will close.  Now, try again and click the OK button. You will automatically be redirected back to the DELETE EMPLOYEE PAGE (delete_employee.php) which has not be completed yet.

OPTION 1: Create Non User Data

Sometimes it is useful to display non user data (e.g., date entered) that is not saved to the database by a user. Instead, the data is created automatically with a date/time method (e.g., NOW()). See Enhancement tab for details.

OPTION 2: Provide An Avatar

If there is an image for each record in the database, you would not need to do this enhancement. However, there may be a case where a employee is added to the database but a picture of that person was not available at the time the information was entered. As a result, a broken image icon would be displayed. See Enhancement tab for details.

OPTION 3: Create Alternating Row Color (APPLIES TO ALL PAGES)

It is best practice to creating alternating row colors for a large table to make it easier to read each row. It also help users with low vision users that use a screen magnifier like ZoomText to easily scan the rows better. To pull off this feat, we can use the new CSS3 nth-child selector.  See Enhancement tab for details.