The picture above is an index/ home page for the web application. I have choosen to use left navigation bar to navigate the website. This becouse I believe user already familiar with the left navigation which commanly used by most website. The right site of the area is a content area. means that this content area will be repalces by other content. such as login table, material details, upload material table, update student table, update staff table and etc.
The next topic will discusses the development of the website in term of student. (note: there are 3 categories of user in the system which are Student, Staff and Admin )
1. Student requirement:
- login student
- view particular units which belong to particular student
- view content as well as download attechment
Student Login table index1.html
studentPage.php
As we can see from the picture above that as soon as user click "student login" link the are on the right side will be replace by student login table.
I used ajax technique to perform this action:
details: index1.html - to replace one area within one page I used:
dwmpCw.js
// This function is used to perform synchronous call to the server.
// send XmLHttprequest to the server, get the respond and place the respond in particular area of the page
// url - is file that we requested and callback is an area which will be replace in the curren page.
function getDataReturnText(url, callback)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", url, true);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
//get data from the server as a text and put the data in particular area within the current page
callback(XMLHttpRequestObject.responseText);
delete XMLHttpRequestObject;
XMLHttpRequestObject = null;
}
}
XMLHttpRequestObject.send(null);
}
}
//replace an area in current page, specify by this target
function units_area(text)
{
document.getElementById("units").innerHTML = text;
}
//replace an area in current page, specify by this target
function callback4(text)
{document.getElementById("targetDiv2").innerHTML = text;
}
Inside Index1.html Page I call "getDataReturnText()" function
<div onclick="getDataReturnText('login_student.php', callback4)" id="login" class="Content_Left_Sub_data_staff"><a href="#">Student Login</a> </div>
<div onclick="getDataReturnText('login_staff.php', callback4)" id="login" class="Content_Left_Sub_data_staff"><a href="#">Staff Login</a> </div>
<div onclick="getDataReturnText('adminRegister.php', callback4)" id="login" class="Content_Left_Sub_data_staff"><a href="#">Admin Login</a></div>
Student login: after user type username and password the system will checked wheater the user is a valid user. if this not valid the it will go to errorlogin page whereas if valid than it goes to studentpage. To check this I use checkloginstudent page. as follow:
<?php require_once('dmwp_connect.php'); ?>
<?php
//session start
session_start();
//validate the login value
if(isset($_POST['login']))
{
// get username and password from login_student page which has been sent previousely.
$myusername = trim($_POST['myusername']);
$mypassword = trim($_POST['mypassword']);
//this is used for security reason, convert password to 40 digit numbers
$hashed_mypassword = sha1($mypassword);
if(strlen($myusername) && strlen($mypassword))
{
mysql_select_db("dbname");
//connecting to database and creating student query which student and password is specifed.
$query = "SELECT std_name, std_id, course_id from student where std_name = '{$myusername}' AND std_password = '{$hashed_mypassword}'";
$result = mysql_query($query, $con);
//confirm_query($result);
//this is use to check wehater the user is in the system. 1 = valid
if(mysql_num_rows($result) == 1)
{
$row = mysql_fetch_array($result);
$_SESSION['user'] = $row['std_name'];
$_SESSION['std_id'] = $row['std_id'];
//if user is valid then go to studentpage as well as send student id and courseid for autentication reason
header("location:studentPage.php?id=$row[std_id]&course_id=$row[course_id]");
} else { //user not valid
header("location:errorLogin.php?login=student");
}
} else { //user not valid
header("location:errorLogin.php?login=student");
}
}
?>
Student Page:
as we can see from the picture above. it says studentPage.php?id=3 means that studentPage as a restriction area to view units. this unit's list depend on student and course. id = 3 means course identification which every course have fix units.
<body onload =".'"getDataReturnText('."'units_student.php?studentId=$valueOK&course_id=$course_id'".', units_area)"'.">"
this "onload" will call "getDataReturnText" function as soon as the page is loaded and replace the specify area with data from the server - units_student.php script.
units_student.php - getting Unit from the server for particular student
<?php require_once('dmwp_connect.php'); ?>
<?php
// Create table
if(!mysql_select_db($dbname, $con))
{
echo"db failed!";
};
$studentNo = $_REQUEST['studentId'];
$course_id = $_REQUEST['course_id'];
//$studentNo = 1;
//select data from units table return material which specify to particular stiudent. $studentNo indicate the
//uniq id for particular student which has been sent by login student page
$result = mysql_query("SELECT * FROM `courseunit` `c`, `units` `u`
WHERE `c`.`u_id` = `u`.`u_id`
AND `course_id` = $course_id;");
while($row = mysql_fetch_array($result))
{
$name = $row['u_id'];
echo "<div " ;
// get material for every units, replace an area callback 2 with data from the server
echo "onclick = 'getDataReturnText(" ;
echo '"material_std.php?u_id=" + ' ;
echo "$name ," ;
echo " callback2)'>" ;
echo "<a href='#'>";
echo $row['u_name'];
echo "</a>";
echo "</div>";
}
if ( !mysql_close($con)){echo "close failure";}
?>
View and download content:
By clicking one of the unit, the material's area one the right site of the picture will be replaced by material detail including attachment file (shown picture above).
below is PHP script to view material details
{
$name = $row['u_id'];
echo "<div " ;
// get material for each units, replace an area callback 2 (material's area) with data from the server
echo "onclick = 'getDataReturnText(" ;
echo '"material_std.php?u_id=" + ' ;
echo "$name ," ;
echo " callback2)'>" ;
echo "<a href='#'>";
echo $row['u_name'];
echo "</a>";
echo "</div>";
}
material_std.php
used for viewing material detail and enable user to download materials
<?php require_once('dmwp_connect.php'); ?>
<?php
//connecting to database
if(!mysql_select_db($dbname, $con))
{
echo"db failed!";
};
//get u_id value from unit_student.php
//this is use for listing all the material detail for vey unit
$id = $_GET["u_id"];
// get data material table from database as query
$result = mysql_query("SELECT * FROM `units` `u`, `materials` `m`
WHERE `u`.`u_id` = `m`.`u_id`
AND `u`.`u_id` = $id;");
$row = mysql_fetch_array($result);
echo "<div align = center>";
//print unit name
echo $row['u_name'];
echo "</div>";
echo "<br/>";
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count>1){
while($row = mysql_fetch_array($result))
{
$m_id = $row['m_id'];
echo "<table width='462' border='0' cellpadding='0' cellspacing='0'>";
echo "<tr><td></td><td><strong>Title: </strong>$row[m_name]</td>";
echo "<td align='right'><strong>Date:</strong> $row[date]</td></tr>";
echo "<tr><td colspan='3'>$row[content]</br> </td></tr>";
echo "<tr><td colspan='3' align='left'><strong>Attached file:</strong>";
//this is used to enable user to download the attachment
echo "<a href='";
echo $row['m_url'];
//print the name of the attacment file
echo "'> ".$row[fileName]."</a>";
echo "</td></tr>";
echo "</table>";
echo "<br/><hr>";
echo "<br/>";
}
//close the database connection and give a warnning if something wrong happen
if ( !mysql_close($con)){echo "close failure";}
}
//if username and password is not in the system go to this page
else if($count==0){
header("location:noRecord.html");
}
?>
No comments:
Post a Comment