Blog 15 – Website continued

In Blog 13 – Website Start I showed that I had the start of the website done, the login page. I had also covered how that I was going to have one page show all the information. However I ran into some problems with this method. I started out with one table, the teachers courses, on the page and it worked. When the page loaded a MySQLi query was executed which created and filled a table. I then tried to add a second table to the same page that would load the classes. However when I went to the website after adding the second MySQLi query I would be greeted with this error;

27-10 MySQLi not working.PNG

On researching the issue, I found that “you can’t have two simultaneous queries because mysqli uses unbuffered queries by default for prepared statements”(Source). The main reason MySQLi is designed like this is for security reasons. It is so that a web page using MySQLi can’t repeatedly call the database in a kind of DDoS attack.

Therefore I’ve changed to a 3 page site, where each page does a different process. The first page loads the teachers courses, the second loads the classes in the course, and the third show the class attendance.

Website design;

For the website design I went for a simple css design. As it is proof of concept I doesn’t need to actually represent my website design, but I did use it for the basic layout. In the top right it shows the current user’s username and there ID from the database. This is taken from the session data created in the login process. In the bottom bar is the sign out. This logs the user out and takes them back to the login page.

29-10 Website design.PNG

Pages;

home.php
This shows the courses. A query is called that returns the courses the teacher is linked to in the database. This then dynamically creates a table using PHP. This means that the number of results returned will be the size of the table. In the table the course code, start and end dates are shown. I then went with a system of having a button in each table row. This has the course ID, as it is identified in the database, on it. The table is contained in a form so when a button is clicked it posts to the PHP code the course ID which stores it in the session. It then opens the class.php page.

class.php
This page works the same as the home.php except if calls the classes of the course that is saved in the session data.

attendance.php
This is where the magic happens. When this page loads it calls the updated attendance records, for the class in the course that the teacher is teaching. I used the same dynamic HTML table as in the last two pages. Except in this table I replaced the button with a drop down. In the drop down it contains the 4 different attendance status;

  1. Absent
  2. Attended
  3. Late
  4. Explained

I have used a drop down as in the future I would like to implement the ability change and submit a different attendance status. The drop down box is programed to make its default the status that is stored in the database. You can see this in the screenshot below.

 

29-10 Attendance.PNG

Edit;

I have adjusted the code to use procedures and not queries.

If you look at the code there maybe mention of features not yet explained in this blog post. They will be covered in a future post.

Code;

Current Final Version of the code as of 28/10/2016. I have *** out any sensitive code.

home.php

<?php
 include('session.php');
 require_once("DB files/config.php");
 $UserID = $_SESSION['user_id'];


// Retrieve all records and display them
 $CourseCall = "CALL SelectCourses(\"$UserID\")";
 $resultCC = mysqli_query($conn, $CourseCall) or die;
 
 // Used for row color toggle
 $oddrow = true;
 
 if($_SERVER["REQUEST_METHOD"] == "POST") {
 // username and password sent from form
 
 $selectedcourse = $_REQUEST['courseselection'];
 
 $_SESSION['selected_course'] = $selectedcourse;
 header("location:class.php");
 
 }


?>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="desgin.css" rel="stylesheet" type="text/css">
</head>

<body>

 

Smart Student Portal

 

 

Welcome user;

Youre ID; =

</div> </div>

Courses

</div>

Start Date
End Date
Select a Course  ‘; echo ”.$row[“Course_Code”].”; echo ”.$row[“Start_Date”].”; echo ”.$row[“End_Date”].”; echo ”; echo ”; } $conn -> close(); ?>

Course Code

 

</div>

class.php

<?php

include('session.php');
require_once("DB files/config.php");
$CourseTFID = $_SESSION['selected_course'];


$ClassCall = "CALL SelectClasses(\"$CourseTFID\")";
$resultCC = mysqli_query($conn, $ClassCall) or die;

if($_SERVER["REQUEST_METHOD"] == "POST") {
 // username and password sent from form

$selectedclass = $_REQUEST['classselection'];

$_SESSION['selected_class'] = $selectedclass;
 header("location:attendance.php");

}

?>

<html>
<head>
<meta charset="utf-8">
<title>Classes</title>
<link href="desgin.css" rel="stylesheet" type="text/css">
</head>

<body>

 

Smart Student Portal

 

 

Welcome user;

Youre ID; =

</div> </div>

Classes

</div>

Class End
Room Number
Select a Class  ‘; echo ”.$row[“Class_Start”].”; echo ”.$row[“Class_End”].”; echo ”.$row[“Room_Code”].”; echo ”; echo ”; } $conn -> close(); ?>

Class Start

 

</div>

attendance.php

<?php

error_reporting(E_ERROR | E_WARNING | E_PARSE);

include('session.php');
require_once("DB files/config.php");
$CourseTFID = $_SESSION['selected_course'];
$ClassID = $_SESSION['selected_class'];


$AttendanceCall = "CALL CheckAttendance(\"$CourseTFID\",\"$ClassID\")";
$resultAT = mysqli_query($conn, $AttendanceCall) or die(mysqli_error($conn));

?>

<html>
<head>
<meta charset="utf-8">
<title>Attendance</title>
<link href="desgin.css" rel="stylesheet" type="text/css">
</head>

<body>

 

Smart Student Portal

 

 

Welcome user;

Youre ID; =

</div> </div>

Attendance

</div>

First Name
Last Name
Attendance Status  ‘; echo ”.$row[“ID”].”; echo ”.$row[“First_Name”].”; echo ”.$row[“Last_Name”].”; echo ‘ Attendended Absent Late Explained ‘; echo ”; } $conn -> close(); ?>

ID

 

</div>

 

 

Advertisements

One thought on “Blog 15 – Website continued

  1. Pingback: Blog 17 – Website finishing touches | Digital Insaniti

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s