HTML for a Project Management Application

In this article we will continue discussing the HTML portion of the main.php page and then move on to the page that enables you to view a project in detail. This is the second part of a seven-part article that covers the creation of a project management application.

The HTML part of the main.php script is not complicated. It consists of a table that has three headings:

  • Project name – lists the project name
  • Status – lists the status of each project
  • Date of creation – lists the date of creation for each project


Below I’ve highlighted the parts in red:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><!– InstanceBegin template="/Templates/PM_Main.dwt.php" codeOutsideHTMLIsLocked="false" –>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!– InstanceBeginEditable name="doctitle" –>

<title>Untitled Document</title>

<!– InstanceEndEditable –>

<!– InstanceBeginEditable name="head" –><!– InstanceEndEditable –>

<link href="Templates/main.css" rel="stylesheet" type="text/css" />

</head>


<body>

<table width="100%" border="0">

<tr>

<td width="33%">&nbsp;</td>

<td width="28%">&nbsp;</td>

<td width="39%">Logged in: <!– InstanceBeginEditable name="login" –><? echo $_SESSION['name'];?> | <a href="logout.php">Logout</a><!– InstanceEndEditable –></td>

</tr>

<tr>

<td colspan="3" bgcolor="#6699CC" class="headertxt">Project Management Software </td>

</tr>

<tr>

<td colspan="3"><!– InstanceBeginEditable name="main" –>

<table width="100%" border="0">

<tr>

<td width="37%"><strong>Project Name </strong></td>

<td width="34%"><strong>Status</strong></td>

<td width="29%"><strong>Date Created</strong> </td>

</tr>

The next part of the table will be dynamic, because it will be built based on the outcome of the checks that were made in the PHP portion of the page. Just take a look at the code:


<?php if($level =="admin"){?>

 

<?php

if($num_admin > 0){

while($rowadmin = mysql_fetch_assoc($results)){

?>

<tr>

<td><a href="view_project.php?pid=<?php echo $rowadmin['pid']?>"><?php echo $rowadmin['title'];?></a></td>

<td><?php echo $rowadmin['status'];?></td>

<td><?php echo $rowadmin['create_dt'];?>

</td>

</tr>

<?php

}

}else{ ?>

<tr>

<td colspan="3"><p>There does not seem to be any projects registered in your name. Click on the "Create New Project" link to create a project.</p></td>

</tr>

<?php

}?>

 

<?php }else{?>

{mospagebreak title=Code Explained}

So what does the code in the previous section actually do? There are two rows of the table that need to be displayed based on the outcome of the $level variable check:


<?php if($level =="admin"){?>


If the value of the $level variable is admin, then the section of the code that you see above is built and displayed, based on the number of returned values from the query that we ran in the PHP portion of the page. The $num_admin variable is used in a while loop to extract the project name, status and creation date of the projects concerned. These details are then displayed in the resulting table rows that are created by this loop:


<tr>

<td><a href="view_project.php?pid=<?php echo $rowadmin['pid']?>"><?php echo $rowadmin['title'];?></a></td>

<td><?php echo $rowadmin['status'];?></td>

<td><?php echo $rowadmin['create_dt'];?>

</td>

</tr>


Notice that there is also a dynamic hyperlink created with the title of the project. This link will enable the user to view the project concerned in detail when it is clicked. If the $num_admin variable value is zero — in other words, no records could be found for this user — then another dynamic table row is built to display this message:


}else{ ?>

<tr>

<td colspan="3"><p>There does not seem to be any projects registered in your name. Click on the "Create New Project" link to create a project.</p></td>

</tr>

<?php

}?>


If the $level variable contains the "normal" value, then exactly the same sequence of events as described above occurs, except that the key variables that are used for the "while" loop and the variable used to extract the results of the query is different. Also, the records retrieved are specific to the logged-in user’s ID. In other words, only the projects with a user ID that is the same as that of the logged-in user will be retrieved and displayed.

That is all there is to the main page. The next page deals with looking at a particular project in detail. In fact, the hyperlink that is created by the dynamic table above opens this page when it is clicked, and lists all the details of a project. It lists how many staff are working on the project, their names, and the names of the files that are used in the project. Below is a screen shot of what the page looks like:


{mospagebreak title=Source Code for the Page}

And here’s the code for the entire page, including the PHP portion of it:


viewproject

<?php

include "dbcon.php";

include "functions.php";

//initialise variables

$alert =false;

// retrieve information based on the user id, that we set in the login page:


if(isset($_GET['pid'])){

//clean pid

if(!is_numeric($_GET['pid'])){

//the value received is not numeric. redirect the user to login

header("location:login.php");

}


//otherwise clean the received value for query use

//get projects

$projectID = mysql_escape_string($_GET['pid']);

$getproject= "SELECT * FROM projects WHERE pid = ‘".$projectID."’";

$results = mysql_query($getproject);

$projectdetails = mysql_fetch_assoc($results);


//get project files

$getfiles = "SELECT * FROM files WHERE p_id = ‘".$projectID."’";

$file_res = mysql_query($getfiles);

if(!$file_res){

echo mysql_error();

}else{

$num_files = mysql_num_rows($file_res);

}

 

//get project members

$getmembers = "SELECT name FROM staff WHERE p_id = ‘".$projectID."’";

$staff_res = mysql_query($getmembers);

if(!$staff_res){

echo mysql_error();

}else{

$num_staff = mysql_num_rows($staff_res);

}



}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><!– InstanceBegin template="/Templates/PM_Main.dwt.php" codeOutsideHTMLIsLocked="false" –>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!– InstanceBeginEditable name="doctitle" –>

<title>Project Management::View Project</title>

<!– InstanceEndEditable –>

<!– InstanceBeginEditable name="head" –>

<!– InstanceEndEditable –>

<link href="Templates/main.css" rel="stylesheet" type="text/css" />

</head>


<body>

<table width="100%" border="0">

<tr>

<td width="33%">&nbsp;</td>

<td width="28%">&nbsp;</td>

<td width="39%">Logged in: <!– InstanceBeginEditable name="login" –><? echo $_SESSION['name'];?> | <a href="logout.php">Logout</a><!– InstanceEndEditable –></td>

</tr>

<tr>

<td colspan="3" bgcolor="#6699CC" class="headertxt">Project Management Software </td>

</tr>

<tr>

<td colspan="3"><!– InstanceBeginEditable name="main" –>

<table width="100%" border="0">

<tr>

<td colspan="2" class="loginheader"><div align="left">Project Name: <?php echo $projectdetails['title'];?> </div></td>

</tr>

<tr>

<td width="44%">&nbsp;</td>

<td width="56%" ></td>

</tr>

<tr>

<td valign="top"><table width="100%" border="0">

<tr>

<td colspan="2"><b>Project Details</b> </td>

</tr>

 

<tr>

<td>Owner</td>

<td><?php echo $_SESSION['name'];?> </td>

</tr>

<tr>

<td>Due Date </td>

<td><?php

if($projectdetails['due_dt'] > $td){

$alert = true;

}

echo $projectdetails['due_dt'];?> </td>

</tr>

<tr>

<td>Status</td>

<td><?php echo $projectdetails['status'];?></td>

</tr>

<tr>

<td>Project Description</td>

<td><?php echo $projectdetails['project_description'];?></td>

</tr>

</table></td>

<td rowspan="2" valign="top"><table width="83%" border="0" align="right">

 

<tr>

<td><b>Project Files:</b> </td>

</tr>

<?php if($num_files > 0){

while($row = mysql_fetch_assoc($file_res)){

?>

<tr>

<td><?php echo $row['filename'];?></td>

</tr>

<?php }

}else{

 

?>

<tr>

<td><p>There are no files stored for this project</p></td>

</tr>

<?php

}

?>

</table></td>

</tr>

<tr>

<td><table width="100%" border="0">

<tr>

<td><b>Project Staff</b> </td>

</tr>

<?php

if($num_staff > 0){

while($rowstaff = mysql_fetch_assoc($staff_res)){

?>

 

<tr>

<td><?php echo $rowstaff['name'] ?> </td>

</tr>

<?php

}

}else{

?>

<tr>

<td><p>There are no other staff members registered for this project</p></td>

</tr>

<?php

}

?>

</table></td>

</tr>

</table>

<!– InstanceEndEditable –></td>

</tr>

<tr>

<td colspan="3"><!– InstanceBeginEditable name="nav" –> <table width="100%" border="0">

<tr>

<td><a href="edit_project.php?pid=<?php echo $projectdetails['pid'];?>">Edit Project</a> |<a href="add_project.php">Add Project</a> | <a href="add_file.php?pid=<?php echo $projectdetails['pid'];?>">Add Files to this Project </a> |<a href="view_tasks.php?pid=<?php echo $projectdetails['pid'];?
>">View Tasks for this Project</a> | <a href="add_task.php?pid=<?php echo $projectdetails['pid'];?>">Add a Task to this Project</a> | <a href="add_staff.php?pid=<?php echo $projectdetails['pid'];?>">Add Staff to the Project</a> | <a href="admin/login.php">Administrators Corner</a>|<a href="main.php">View Project List</a></td>

</tr>

</table><!– InstanceEndEditable –></td>

</tr>

<tr>

<td align="right" class="cright" colspan="3">copyright &copy; 2007 PM </td>

</tr>

</table>

</body>

<!– InstanceEnd –></html>

{mospagebreak title=PHP explained}

The PHP code of the page is very straightforward. The main page of the application sends over the project ID when the hyperlink with the project title is clicked. The view_ project page receives this ID, and then retrieves the project details based on the ID number. If you go back and look at the way our database tables are set up, you will notice that each table, with the exception of the users table, has a project ID field. The view_project page uses the same ID to retrieve project information from the following tables:


projects, staff, tasks and files


Once the information is gathered, it is organized and displayed on this page, as you can see from the earlier screen shot. The PHP code starts by including the usual bunch of files and then initializes variables:


<?php

include "dbcon.php";

include "functions.php";

//initialise variables

$alert =false;


Next, it checks whether a project id (pid) is sent over:


if(isset($_GET['pid'])){



If so, we start to filter the value. Although this value did not come from a form, we still need to check and verify it, since anyone can modify it while it is displayed in the browser. Because we know that the project ID is a number, it is easy to check it by using the is_numeric() function:


//clean pid

if(!is_numeric($_GET['pid'])){

//the value received is not numeric. redirect the user to login

header("location:login.php");

}



If it is indeed a number, then we need to escape it, before it is used in a MySQL query:


//otherwise clean the received value for query use

//get projects

$projectID = mysql_escape_string($_GET['pid']);


Once the variable has been escaped, we can retrieve the project details from the project table:


$getproject= "SELECT * FROM projects WHERE pid = ‘".$projectID."’";

$results = mysql_query($getproject);

$projectdetails = mysql_fetch_assoc($results);



Then we retrieve all the files that are connected to the project ID from the files table:


//get project files

$getfiles = "SELECT * FROM files WHERE p_id = ‘".$projectID."’";

$file_res = mysql_query($getfiles);

if(!$file_res){

echo mysql_error();

}else{

$num_files = mysql_num_rows($file_res);

}

 

And finally, we retrieve all the staff members that work on this project from the staff table:



//get project members

$getmembers = "SELECT name FROM staff WHERE p_id = ‘".$projectID."’";

$staff_res = mysql_query($getmembers);

if(!$staff_res){

echo mysql_error();

}else{

$num_staff = mysql_num_rows($staff_res);

}

}



The HTML part of the page basically displays the information that is gathered by these queries in an HTML table. If any of the queries return empty, then the appropriate message is displayed.

Conclusion

In the next article we will look at how to add new projects and how to change the contents of a project.

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan