Sunday, 21 December 2008

Tutorial Week 7

Extending RoadRun


// draw the top roadside colour has been changed
osg.setColor(0x00aaaaaa);

// draw the middle safety strip had been changed
osg.setColor(0x00666666);
osg.fillRect(0, y-2, getWidth(), 2);
osg.setColor(0x00209020);
osg.fillRect(0, y, getWidth(), laneHeight); y+= laneHeight;
osg.setColor(0x00666666);
osg.fillRect(0, y - 2, getWidth(), 2);

laneHeight = ((heightMinusStatus) / 15); - this add another 7 line

wombat = new WombatActor(this, getWidth() / 2, getLaneYPos(14));

Wombat class:

//move within 15 lines

if (y > gameScreen.getLaneYPos(14))
y = gameScreen.getLaneYPos(14);


Coursework - Evaluation

By completing this coursework I have gain my knowledge on how to use technologies such as PHP, AJAX technique including JavaScript, DOM, XMLHttpRequest and html and mysql database as a platform.

At first I found difficulties on how to start designing and implementing the system because I was not really clear what the system supposes to do. It was because I did not attend lecture nor tutorial in week 2 which the hand out date for the coursework. This was because I had religious commitment (Ramadan celebration). But then I was being able to catch up by asking lots of question to my friend (Zak).

Start by analysing the system requirement, creating ERD, state diagram to the development the system (it was week 5 I could manage to start properly and know what I have to do for the system).

Learning Ajax technique is really exiting not only it has many advantages but also it has been proven that the well known website is using this technique. At the beginning Ajax is straightforward as long as you have background knowledge on how to use javascript especially you understand to replace an element inside particular page. Then it use DOM and XMLHttpRequest to get data from the server. However As I went deep into the system I found difficulities and time consuming on how to write Javascript inside PHP script to call a function (perform ajax technique) from javascript page. Such as:

echo "<tr><td>&nbsp;</td><td align='right'><a href='editContent.php?materialId=$row[m_id]'>Edit </a></td>";

echo "<td align='right'>";

echo "<div ";

echo "onclick = 'getDataReturnText(" ;

echo '"deleteMaterial.php?m_id=" + ' ;

echo "$m_id ," ;

echo " callback2)'>" ;

echo "<a href ='#'><img src='images/delete.png' /></a>";

echo "</div>";

echo "</td>";

echo "</tr>";

 

Other problem that I found is that I could not really focused on the course work as well as the tutorial exercise because I was thinking about my final project all the time. My project is to develop Web content management system using AJAX as a module in the system. Instead of finishing the coursework I was building prototype for my project and trying to make the prototype work. I think I have to more careful on organizing my time so that I could manage the time better in the future.

The other thing is that the blog is making me lazy to upload works that I have done during the week. This is because I found difficulties to organize the content whereas Microsoft word is different.

Overall coursework is excellent for me; a lot of new material has been learnt. Clear understanding on how the web is working as well as how to design and develop the system.

5. Design and Web development - continue

3. Admin Requirement:

- Admin Login

- Edit / delete Student

- Edit /delete Staff

- Register Student or Staff

At the beginning of the coursework, I have not intended to create admin as well as update their details. I was assuming that admin  will be create by staff  record system however for the sake of demonstration I thing it is really good idea to have an admin.

however I have not create any database table for an admin. so I create one admin inside the php script for the login admin page.which mean that the username and password that I specifed is "admin".

<?php
 if(isset($_POST['register']))
 {

// checked if the value is valid, than go to admin page
  $username = trim($_POST['username']);
  $password = trim($_POST['password']);
  //$hashed_password = sha1($password);
  if(strlen($username) && strlen($password))
  {

  //noted here: not checked from database

if($username == 'admin' && $password = 'admin' ){header("Location: adminPage.php");}
  }

//if not valid then so an error message
  else
  {
  $msg = "Could not register user";
  }
 }
?>

When admin had successfuly login in then it will go to admin page, shown below


Edit Student

Edit student is similar to Edit staff, I will describe one of them on how the system work 

as we can see from the picture above, the edit student link has been pressed. The Material area has been changed by adminPage_studentlist.php which listed all student including delete button on the right.

one of the student need to be selected in order to be edited otherwise error message will be displayed.

This is adminPage_studentlist.php the code:

<?php require_once('dmwp_connect.php');
//the action inside form tag will be send any vaule from this form to studentList.php
?>
<div align="center">
<form id="userform" name="userform" method="post" action="studentList.php">
 <table width='460' border='1' cellpadding="1" cellspacing="1">
 <tr align="center" >
  <td>&nbsp;</td>
  <td><strong> Student Id</strong></td>
  <td><strong> User Name</strong></td>
  <td><strong> First Name</strong></td>
  <td><strong> Last Name</strong></td>
  <td>&nbsp;</td>
 </tr>
 <?php
  if(!mysql_select_db($dbname, $con))
  {
  echo"db failed!";
  };
  //select data from units table return material which specify to particular staff. $staffNo indicate the
  //uniq id for particular staff which has been sent by login page

  $result = mysql_query("SELECT * FROM `student` ");
  while($row = mysql_fetch_array($result))
  {
  //print the list of all student from database as a table
  echo "<tr>

  <td align='center'><input type='radio' name='editStudent' id='user_id' value=$row[std_id]> </td>

  <td> $row[std_id]</td>
  <td> $row[std_name]</td>
  <td> $row[std_first]</td>
  <td> $row[std_last]</td>
  <td> <a href='deleteStaffOrStudent.php?user_id=$row[std_id]&stafforstudent=student'><img src='images/delete.png' /></td>

  </tr>";
  }
  if ( !mysql_close($con)){echo "close failure";}
  ?>

  <tr align="center" >
  <td colspan="56"><input type="submit" id = "register" name="register" value="Select Student"/></td>
 </tr>
 </table>
</form>
</div>

 
StudentList.php

<?php require_once('dmwp_connect.php');
$user_id = $_POST['editStudent'];
if($user_id == null)
{echo "<p align = 'center'>Error, Please Select one of student</p>";

}
else{
?>
<div align="center">
<form id="userform" name="userform" method="post" action="updateStudent.php" onsubmit="return chekForm()">
  <table width="402" border="0">
  <tr>
  <td height="36" colspan="2"><div align="center"><strong>Update StudentDetails </strong></div></td>
  </tr>
  <tr>
  <td width="131"><span class="style5">Username</span></td>
  <td width="261"><input type="hidden" name="studentID" id="studentID" value="<?php echo $_POST['editStudent']; ?>" />
  <?php
if(!mysql_select_db($dbname, $con))
{
echo"db failed!";
};
$result = mysql_query("SELECT std_name , std_email, std_first, std_last, phone_no FROM student Where std_id=$user_id ");
while($row = mysql_fetch_array($result))
{
//
 echo $row[std_name];
?> </td>
  </tr>
  <tr>
  <td width="131">First name</td>
  <td><span class="style6"><input name="firstname" type="text" id="firstname" value="<?php echo $row[std_first];?>"/> </span></td>
  </tr>
  <tr>
  <td width="131">Last name</td>
  <td><span class="style6"><input name="lastname" type="text" id="lastname" value="<?php echo $row[std_last];?>" /> </span></td>
  </tr><tr>
  <td width="131">Email</td>
  <td><span class="style6"><input name="email" type="text" id="email" size="30" value="<?php echo $row[std_email];?>"/> </span></td>
  </tr><tr>
  <td width="131">Phone number</td>
  <td><span class="style6"><input name="phoneno" type="text" id="phoneno" value="<?php echo $row[phone_no];};?>"/> </span></td>
  </tr>
  <td>&nbsp;</td>
  <td><div>
  <input type="submit" id = "register" name="register" value="update"/>
  </div></td>
  </tr>
  </table>
  </form>
<?php } ?>
</div>

 



5. Design and Web development - continue

2. Staff Requirement:

- Login Staff

- View particular units which registered to staff

- View content, download content, edit content, update content.

- Create Content

- send notification to student view email or messaging

The "login staff "and" View particular unit which registered to a staff" are similar to "login student" (as it disccused earlier) so I will skip that to the next topic.


View content, download content, edit content, delete content.

when one of the unit has been click, material details will be shown in the material are. the different between this view content and student "view content" are: staff "view content will be able to delete and update material. see picture below:


Edit Content

in material.php (list all material script) I use this code to link the edit button to update page.

<a href='editContent.php?materialId=$row[m_id]'>Edit </a>

as we can see this link go to editContent.php.



<?php require_once('dmwp_connect.php');
$staffid = $_REQUEST['staffid'];
$materialId = $_REQUEST['materialId'];

//this is used for getting the right material to be edited. passing the $materialId from material.php page to this mysql syntac
$result = mysql_query("SELECT * FROM materials WHERE m_id= $materialId ;");
$row = mysql_fetch_array($result);

// get material name from material page which has been sent by httprequest
$materialName = $row['m_name'];
// get file name from material page which has been sent by httprequest
$fileName = $row['fileName'];
// get conten value from material page which has been sent by httprequest
$content = $row['content'];

mysql_close($con);
?>

<form enctype="multipart/form-data" action="editContentValid.php?m_id=<?php echo $materialId; //passing material id to editcontentValid to edit the right material ?>" method="POST">
<table width="462" border="1">

<input type="hidden" name="MAX_FILE_SIZE" value="100000000" />
<tr>
<td colspan="2" align="center">Edit Content</td>
</tr>
<tr>
<td width="148">Material Name</td>
<td width="298"><input type="text" name="materialName" value="<?php echo $materialName;?>" /></td>
</tr>
<tr>
<td>Attach File:</td>
<td><?php echo $fileName;?></td>
</tr>
<tr>

<td colspan="2"><textarea cols="55" rows="10" name="pending_text" id="pending_text" ><?php echo $content;?></textarea></td>

</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Update" /></td>
</tr>
</table>
</form>


Then as soon as user pressed update button( which is submit button's type) the action will call editContentValid.php. This script will perform update selected material and recoreded into mysql database.

editContentValid.php

<?php require_once('dmwp_connect.php'); ?>

<?php

//get selected material which has been sent

$materialId = $_REQUEST['m_id'];

//get material's name which has been sent

$materialName = $_REQUEST['materialName'];

//get content's material which has been sent

$pending_text = $_REQUEST['pending_text'];

$date = date("d-m-Y");

  //this mysql syntac will update selected material and recoreded in database

  $sql="UPDATE materials SET m_name='$materialName', content='$pending_text' date='$date' WHERE m_id='$materialId'";

 //if cannot connect to database show an error message

 if (!mysql_query($sql,$con))

  {

  die('Error: ' . mysql_error());

  }

 // show a message where update has been successful

 mysql_close($con);

 echo "<div align='center'>";

  echo "Update Content has been successful!";

 echo "<br/>";

 //go back to priviouse page

 echo "<a href='javascript:history.back(-3);'>ok</a>";

 echo "</div>";

?>



Delete content

Delete button is quite simple. as soon as the button is pressed, it links to delete script which will delete the material form database.

this is the code that I have used to perform delete action:

material.php

<div ";

echo "onclick = 'getDataReturnText(" ;
//this will call the  scrpit to delete selected material
echo '"deleteMaterial.php?m_id=" + ' ;

echo "$m_id ," ;

echo " callback2)'>" ;

echo "<a href ='#'><img src='images/delete.png' /></a>";

echo "</div>";

deleteMaterial.php

<?php require_once('dmwp_connect.php'); ?>
<?php
//get material id from material.php page.
//it will be used to specify which material will be deleted

$m_id = $_REQUEST['m_id'];

//mysql syntac which will delete data from datbase
mysql_query("DELETE FROM materials WHERE m_id=$m_id;");
mysql_close($con);

//successful message will be display
echo "<div align='center'>";
echo "Your data has been deleted";
echo "<br/>";
//go back to the list
echo "<a href='javascript:history.go(0)'>ok</a>";
echo "</div>";
?>




Create Content


as we can see from the picture above, uploadFile has been click and "create material" table has been placed.

<?php
  $valueOK = $_REQUEST['id'];
  //get create content table and replace material area in curren page.
  echo " onclick ='getDataReturnText(";
  //get the specify table for staff
  echo '"upload.php?staffid=" + ';
  echo "$valueOK ," ;
  echo " content_area)'>";
  ?> 

When the submit button is pressed, the system will check wheater the content is valid. if not error message will be displayed.

bellow is the code that I use for createing new material

uploader.php

<?php require_once('dmwp_connect.php'); ?>
<?php

// Where the file is going to be placed
$target_path = "uploads/";
$fileName = $_FILES['uploadedfile']['name'];
$materialName = $_REQUEST['materialName'];
$pending_text = $_REQUEST['pending_text'];

//the date is specify when new material has been created
$date = date("d-m-Y");
//* Add the original filename to our target path.
Result is "uploads/filename.extension" */

$staffid = $_REQUEST['staffid'];
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

//can not create new material if title and content is empty
if($materialName == null || $pending_text == null) {
  echo "<div align='center'>";
  echo "There was an error uploading the file, please try again!";
 echo "<br/>";
 echo "<a href='javascript:history.back(-1);'>ok</a>";
echo "</div>";

  // will be able to create attachment file and uploaded to the server.
} else if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)){
 echo "<div align='center'>";
 echo "The file ".$materialName." - ". basename( $_FILES['uploadedfile']['name'])." has been uploaded";
  echo "<br/>";
 echo "<a href='staffPage.php?id=$staffid'>ok</a>";
 echo "</div>";

  //insert material into database
  $sql="INSERT INTO materials (m_name, m_url, date, u_id, content, fileName)
 VALUES('$_POST[materialName]','../".$upload."/uploads/".
 $fileName."','".$date."','$_POST[unit_id]','$_REQUEST[pending_text]','$fileName')";
 if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }

  mysql_close($con);
}

//will be able to create content without uploaded file attached
else {
  echo "<div align='center'>";
 echo "The file ".$materialName." - ". basename( $_FILES['uploadedfile']['name'])." has been uploaded";
  echo "<br/>";
 echo "<a href='staffPage.php?id=$staffid'>ok</a>";
 echo "</div>";
  //insert material into database

  $sql="INSERT INTO materials (m_name, m_url, date, u_id, content, fileName)
 VALUES('$_POST[materialName]','../".$upload."/uploads/".
 $fileName."','".$date."','$_POST[unit_id]','$_REQUEST[pending_text]','$fileName')";
 if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
}
?>


Send notification to student view email or messaging

StudentRead.PhP is used for listing all student providing checkbox to select what sending system will be used. there are two system can be selected, which are send message via Email and/or SMS (text message)

This is the following code:

<?php require_once('../dmwp_connect.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Form</title>
</head>
<body>
<p class="p">Select student to notify:</p>

//sendEmail.PHP will be run as soon as the button is pressed
<form action="phpmailer/sendEmail.php" method="post">

<?php
// connecting to database and display error message if fail
if(!mysql_select_db($dbname, $con))
{echo"db failed!";};

//get all student which belong to particular course
$result = mysql_query("SELECT std_name ,
std_email, std_first, std_last,
 c.course_name, phone_no FROM student s ,
  courses c WHERE s.course_id = c.course_id ");
while($row = mysql_fetch_array($result))
{
  //print student follow by checked box - this check box will be used to send validation to the sendemail script. if the check box is Checked then email will be sent to student email
 echo "<input type='checkbox' name='incoming_mailto[]'
 value=$row[std_email]> $row[std_last]".",
 "."$row[std_first]"." - "."$row[course_name]"." - "."</input>";
 

//print checked box - this check box will be used to send validation to the sendemail script
 //if the check box is Checked then SMS will be sent to student mobile

 echo "<input type='checkbox' name='incoming_smsto[]'
  value=$row[phone_no]> send sms </input><br>";
};
?>
<br><br>
<input type="submit" value="Send notification">
</form>
</body>
</html>


sendEmail.php - This PHP script is used for sending and email or/and sending test message to student. "red" text will be described the script.

<?php require_once('../dmwp_connect.php'); ?>
<?php
require("class.phpmailer.php");

// validation check, if no checkbox has been checked throw this error message
if($_POST['incoming_mailto'] == false && $_POST['incoming_smsto'] == false){
echo "<div align='center'>Please select one of the address<br/><a href='javascript:history.back(-1);'>ok</a></div>";
}

// validation check, if email checkbox has been checked then send the email
else if($_POST['incoming_mailto']){
 $mail = new PHPMailer();
 $mail->IsSMTP(); // set mailer to use SMTP
 $mail->Host = "auth.smtp.1and1.co.uk"; // specify main and backup server
 $mail->SMTPAuth = true; // turn on SMTP authentication
 $mail->Username = "info@ismedad.co.uk"; // SMTP username
 $mail->Password = "******"; // SMTP password - this has been changed for security reason
 $mail->From = "info@ismedad.co.uk";
 $mail->FromName = "Harry";

 //get email address from .phpmailer/studentRead.php
 //send email to student by using loop it allows sending multiple email

 foreach($_POST['incoming_mailto'] as $emailAddress){
  $mail->AddAddress($emailAddress);
 }

 //validation check, if send sms checkbox has been checked then send the message
 if($_POST['incoming_smsto']){
  //get phone number from .phpmailer/studentRead.php
  //send text message to student by using loop. it allows sending multiple test message

  foreach($_POST['incoming_smsto'] as $phoneNo){
  //send text message to student mobile phone which has a value "new material has been uploded, Please check your account af LSBU M-Learning"
  fopen("http://dynamic.lsbu.ac.uk/sms.php?destination=".$phoneNo."&message=New+material+has+been+uploaded,+Please+check+your+account+at+LSBU+M-Learning&username=alasharh","r");
  }
 }

 $mail->AddReplyTo("info@ismedad.co.uk", "Information");
 $mail->WordWrap = 50; // set word wrap to 50 characters
 //$mail->AddAttachment("/var/tmp/file.tar.gz"); // add attachments
 //$mail->AddAttachment("/tmp/image.jpg", "new.jpg"); // optional name
 $mail->IsHTML(true); // set email format to HTML
 $mail->Subject = "LSBU M-Learning";
 //body of an email
 $mail->Body = "New material has been uploaded, Please check your account at LSBU M-Learning";
 $mail->AltBody = "This is the body in plain text for non-HTML mail clients";
 // if email can not be deliver show error message below
 if(!$mail->Send())
 {
  echo "<div align='center'>";
  echo "Message could not be sent. <p>";
  echo "Mailer Error: " . $mail->ErrorInfo;
  echo "<br/>";
  // go back to previous page
  echo "<a href='javascript:history.back(-1);'>ok</a>";
  echo "</div>";
  exit;
 }

  // if email has been sucessfuly deliver show the following message
 echo "<div align='center'>";
 echo "Message has been sent";
 echo "<br/>";
 // it use to go back to main page
 echo "<a href='javascript:history.back(-1);'>ok</a>";
 echo "</div>";
}
//validation check, if only send sms checkbox has been checked send text message.
else if($_POST['incoming_smsto']){
  foreach($_POST['incoming_smsto'] as $phoneNo){
  fopen("http://dynamic.lsbu.ac.uk/sms.php?destination=$phoneNo&message=the_ugliest_person_is_YOU!!!&username=alasharh","r");
  echo "<div align='center'>";
  echo "Message has been sent";
  echo "<br/>";
  echo "<a href='javascript:history.back(-1);'>ok</a>";
  echo "</div>";
  }
}
?>

5. Design and Web development


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>&nbsp; </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");

}

?>

4. State Diagram

Lsbu virtual learning environment - State Diagram


Description of the state: 

a1. This page has been call using ajax technique and this will replace one of the area in intial page to student or admin or staff login table.

a2. go to next page, admin page for admin, staff page for staff and student page for student.

a3. on student page, units will be call using AJAX as soon as te page loaded. this will replace unit area with listh of unit which student or staff has registered.

a4. a unit from the list can be click to perform an action. as soon as it clicked the material's area will be replace by material details (ajax technique)

a5. perform ajax technique which get data (table) from server and replace material;s area with upload's table.

a6. new material has been saved to database as well as file to the server

a7. perform ajax technique which get student list from database

a8. one of student has been checked as well as chossing email or ms to send notification

a9. perform ajax technique to get all the list of student and replace one area of the page

a10. perform ajax techniquwto get student details from database and replace one are of the page

a11. perform ajax technique to get staff details from database adn replace one are of the page

Saturday, 20 December 2008

3. C.R.U.D

Analyzing the system using C.R.U.D technique

Course:
Create: Assuming this is created by using courses record system
Read: Courses will be read by student and staff 
     Student: 
             Using div tag; 
             Script: unit_student.php 
    Staff: 
             Using div tag; 
              Script: unit_staff.php 
Using AJAX to make syncrounouse call to the server and get courses for particular student or staff. The script will listed all courses which registered to particular student or staff 
Update: Assuming this is created by using courses record system
Delete: Assuming this is created by using courses record system


Student:
Create: Creating student by using table tag and php script to record student detail in database. script: registerStudentvalidation.php
Read: Read student detail by using table and php script to get data form database. script: adminPage_studentList.php
Update: update student by using table and using php script to get data from database and update data back to database. script: studentList.php
Delete: delete student by using table and php script to delete particular student. Script: deleteStaffOrStudent.php


Unit:
Create: Assuming this has been created from Unit record system
Read: Read unit by using div tag. student will be able to get all units which they have registered as well as staff. php script will be use to perform this functionality
Update: Assuming this has been created from Unit record system
Delete: Assuming this has been created from Unit record system


Materials:
Create: Create using table and script will create material for particular unit. the restriction apply only particular staff which has been register could create or upload material.
Read: Read material using "div" tag which will print all material specify to particular unit. read material using php script which enable reading data from database and shows in html file. more than one script will be created which student view and staff view
Update: Update material using table and php script which enable the update function to be functional. Script: editContentValid.php
Delete: delete material using table to show all the list of material and delete button will be avalible next to the material. the script will detele particular material according to user input.


Staff:
Create: Creating staff by using table and php script to record staff detail in database as well as asign staff to units. script: registerStaffvalidation.php
Read: Read staff detail by using table and php script to get data form database. script: adminPage_stafftList.php
Update: update staff by using table and using php script to get data from database and update data back to database. script: stafftList.php
Delete: delete staff by using table and php script to delete particular staff. Script: deleteStaffOrStudent.php


Admin:
Create: Assuming this has been created from university record system
Read: Assuming this has been created from university record system
Update: Assuming this has been created from university record system
Delete: Assuming this has been created from university record system




2.Draw Entity relationship diagram (ERD)

Analysis: System Requirement

Student
The LSBU based on “LSBU Virtual Learning Environment” keep information about student, their Id number (which is unique), username, password, first name, last name, their course and other relevant information about student. Also student can only have one course and more than one unit assign to it.
- Students can only access to materials under the unit which they enrolled, in this case to particular a course. 
- Students are able to download material or /and view the material.
- Students cannot create, update nor delete any material.
- Students must be fully enrolled in order to use the website. Username and password required.

Staff
Staff’s details are also kept by the application, the application keep record about their name, id number as unique number, age, address and other relevant information about staff. For each staff, material can be created pointing to particular unit.
- Staffs (tutors or lecturers) able to create, upload, update, and delete material.
- Those following action can only be perform to unit which the staff registered to.
- Staffs are able to send notification to student of which new material has been made. 

Courses
The application keeps a record about course detail such as course Id (unique_ auto increment), and course Name, etc.
- One course can have many units, many student and many staff assign to it. 
- Only the administration can add, delete or update the course.

Units
The application keeps a record about unit detail such as unit Id (unique_ auto increment), unit Name, etc.
- Units belong to courses, which mean one unit belong to more than one course.
- One unit have more than one student and one student can have many units.
- One unit have more than one staff and one staff can have many units.
- Only administration can add, delete or update unit.
- One unit can have more than one material.

Materials
The application keeps a record about material detail such as material Id (unique_ auto increment), material Name, date created, name of staff who created the material, etc.
- One material belongs to only one unit.
- Material can be create, delete and update only by staff.



Entity relationship diagram


ERD Explanation:

Student/Course : Student study only at on course cannot be more and the course have many student studied.

Unit/Course: Required courseUnit table – many to many relationship. Unit belong to more than one course and course offer many units to be learnt.

Unit/staff: Required staffUnit table – many to many relationship. One unit can have many staff (lecturer/tutor) and staff can teaches more than one unit.

Unit/Material: one unit can have more than one material which been created by staff (tutor/lecturer) and one material belong to one unit


Relational database design
- Courses (course_id, course_name)
- Student (std_id, std_Name, std_first, std_last, std_password, std_email, phone_no, course_id*)
- Unit (u_id, u_name)
- staff (s_id, s_Name, s_first, s_last, s_password, e_mail)
- material (m_id, m_name, content, fileName, m_url, date, s_id, u_id)
- staffUnit (s_u_id, s_id*, u_id*)
- courseUnit (courseUnit_id, course_id*, u_id*)

*Note: Underline = Primary key, asterisk * = Foreign Key






1. Find out what technology need to be use.

There are 5 technologies will be used which are:

1. HTML - will be used for the appearance of the website 

2. CSS - Design of the website

3. PHP - will be used for connecting website to MySQL database as well as  taking PHP code as its input and creating web pages as output

5. AJAX Technique including JavaScript, PHP, DOM and XMLHttpRequest this technique will be used for creating interactive website.

DMWP - Coursework

The DMWP coursework: 

This is the following System requirement:

The system would create applications which allow faculties at London south bank university to sent notification about learning material to student’s mobile phone as well as email.

The University has two systems to enable messaging: 
- An AMA system for texting 
- An SMTP server to dispatch email
Create web application for academics that implements a repository of m-learning artefacts.
Each academic will have their own profile and portfolio of artefacts.
Main task: 
- Design and implement a data model appropriate to the problem domain.
- Create a web application that implements the necessary C.R.U.D. functionality to persist staff portfolios of m-learning and student record.

Based on The system requirement there are 5 topics that will be disccuess:
1. Find out what technology need to be use.

2. Draw Entity relationship diagram (ERD)

3. C.R.U.D  

4. State diagram

5. Desgin and Web development



Wednesday, 15 October 2008

Tutorial 3

Combobox reset

Options.html was extended to include an image that will reset the combobox to the original format.

There two way that I found:

1. <a href="#" ><img src="Image4.JPG" onClick="window.location.reload()"/></a>
--> this will reload the page so then the ComboBox will change to the original format

2. Creating submit button which then  call reset function:

Tutorial 2


This content is focussed on JavaScript events and basic Ajax:

All content here (AJAX sample) delivered to the browser over the HTTP protocol and not using the FILE protocol because the JavaScript makes use of HTTP requests through the XMLHttpRequestObject. 

Taking the list of Javascript events here and the file blusher.html, implement four new event handlers.

Event 1: onLoad can be use to run script as soon as the page is loaded. such as getting data from the server.

Event 2: onclick can be use to increase user setisfaction. such as calling javascript function to validate data.

Event 3: onChange can also be use to validate form, such as the value's input box will be validated as soon as it change

Event 4: onClick can also be use to to change back gound colour. this could be usefull for people to change the background colour of a website acording to their style.

Ajax error hendling

The file ajaxbutton.html was requested to a non-existent file from the server. When button has been pressed nothing happen.

Ajax provide basic error handling which incase this error occure. Providing as follow:


 Error message provided if HTTP status = 404

so by createing else which mean that http status = 404 is included.












Ajaxbutton2.html

A second button was added to ajaxbutton2.html, when the button is pressed, it display a second image in specify area.The getData() function was re-used but the paramater  is diferent (show on picture below)


Tutorial 1

Creating databases by using phpmyadmin






Wednesday, 24 September 2008

My lookbook for DMWB

This is my loogbook for Distributed and Mobile Web Peogramming.