An assignment in college that uses PHP, Javascript, AJAX, CSS, and MySQL to manage students, courses and grades.
/ajax/
ajax.js
/css/
style.css
/images/
/includes/
constants.php
database.php
functions.php
advance.php
course.php
courses.php
deleteRecord.php
index.php
student.php
var http_request = new XMLHttpRequest();
function makeCheckboxRequest(checkboxChecked){
if(checkboxChecked){
http_request.onreadystatechange = handleCheckboxRequest;
http_request.open("GET",'advance.php?',true);
http_request.send(null);
document.getElementById("extra").style.visibility='visible';
document.getElementById("extra").style.height="100px";
}
else{
document.getElementById("extra").style.visibility='hidden';
document.getElementById("extra").style.height="0px";
document.getElementById("extra").innerHTML="0";
}
}
function handleCheckboxRequest(){
if (http_request.readyState == 4 && http_request.status == 200){
document.getElementById("extra").innerHTML = http_request.responseText;
}
}
function makeListboxRequest(listboxchoice){
http_request.onreadystatechange = handleListboxRequest;
http_request.open("GET",'course.php?'+"value="+listboxchoice,true);
http_request.send(null);
}
function handleListboxRequest(){
if (http_request.readyState == 4 && http_request.status == 200){
document.getElementById("courseName").innerHTML = http_request.responseText;
}
}
function makeCourseTableRequest(studentid){
http_request.onreadystatechange = handleCourseTableRequest;
http_request.open("GET",'courses.php?'+"value="+studentid,true);
http_request.send(null);
}
function handleCourseTableRequest(){
if (http_request.readyState == 4 && http_request.status == 200){
document.getElementById("studentCourses").innerHTML = http_request.responseText;
document.getElementById("courseUpdate").innerHTML = "";
}
}
function makeDeleteRequest(courseid){
http_request.onreadystatechange = handleDeleteRequest;
http_request.open("GET",'deleteRecord.php?'+"value="+courseid,true);
http_request.send(null);
}
function handleDeleteRequest(studentid){
if (http_request.readyState == 4 && http_request.status == 200){
document.getElementById("courseUpdate").innerHTML = http_request.responseText;
}
}
function makeStudentRequest(studentid){
http_request.onreadystatechange = handleStudentRequest;
http_request.open("GET",'student.php?'+"value="+studentid,true);
http_request.send(null);
}
function handleStudentRequest(){
if (http_request.readyState == 4 && http_request.status == 200){
document.getElementById("studentName").innerHTML = http_request.responseText;
}
}
function resetHandler(){
makeListboxRequest(0);
makeStudentRequest(0);
}
/*--------------------------------------------------
AUTHOR: STEVEN BARTSCH
ASSIGNMENT 3
--------------------------------------------------*/
body{
margin:auto;
width:960px;
background:#336699;
font-family:Tahoma, Verdana;
}
#left{float:left;}
#right{float:right;}
/*--------------------------------------------------
HEADER
--------------------------------------------------*/
#header{
height:50px;
margin-top:10px;
margin-bottom:10px;
padding:10px;
text-align:center;
font-size:32px;
color:#FFFFFF;
}
/*--------------------------------------------------
FOOTER
--------------------------------------------------*/
#footer{
margin-left:240px;
margin-top:10px;
margin-bottom:-10px;
width:720px;
height:15px;
padding:20px;
background-color:#EEEEEE;
font-size:12px;
}
/*--------------------------------------------------
LEFT PANE
--------------------------------------------------*/
#leftpane{
position:fixed;
top:90px;
width:200px;
display:block;
}
#leftpane input[type=submit],input[type=reset]{
float:left;
margin-bottom:10px;
width:200px;
padding:20px;
border:0px;
font-size:22px;
text-align:left;
background-color:#5588BB;
color:#FFFFFF;
}
#leftpane input[type=submit]:hover,input[type=reset]:hover{
background-color:#4477AA;
}
/*--------------------------------------------------
CONTENT
--------------------------------------------------*/
#content{
margin-left:240px;
width:720px;
padding:20px;
font-size:14px;
background-color:#EFEFEF;
}
#deleteButton{
width:40px;
height:40px;
background-color:#990000;
color:#990000;
border:0px solid;
}
#updateButton{
width:40px;
height:40px;
background-color:#339966;
color:#339966;
border:0px solid;
}
#content h2{margin-top:0px;}
#content input[type=submit]{
width:720px;
height:50px;
background-color:#339966;
border:1px solid #117744;
border-bottom:5px solid #117744;
color:#FFFFFF;
padding:10px;
}
#content input[type=submit]:hover{
background-color:#44AA77;
border:1px solid #117744;
}
#courseUpdate{
color:#990000;
font-weight:bold;
}
#table{
width:100%;
}
#table th{
text-align:left;
}
#table td{
width:44%;
border-top:1px solid #DDDDDD;
}
#table tr:hover{
background-color:#FEFEFE;
border:0px solid;
}
/*--------------------------------------------------
FORM ELEMENTS
--------------------------------------------------*/
input[type=text],select,textarea{
width:700px;
padding:10px;
margin-top:5px;
margin-right:190px;
margin-bottom:20px;
border:1px solid #D9D9D9;
background-color:#E3E3E3;
}
input[type=radio],input[type=checkbox]{
padding:10px;
margin-top:5px;
margin-right:20px;
margin-bottom:20px;
border:1px solid #D9D9D9;
background-color:#E3E3E3;
}
select{
width:720px;
}
input[type=text]:hover,select:hover,textarea:hover,input[type=radio]:hover,input[type=checkbox]:hover{
border:1px solid #C3C3C3;
background-color:#C8C8C8;
}
/*margin to make new line*/
input[type=checkbox]{margin-right:450px;}
<?php
//Web
DEFINE("WEB_TITLE","Steven Bartsch - Assignment 3 - Client/Server");
DEFINE("FORM_TITLE","Student Database");
//MySQL
DEFINE("MySQL_ADDR", "---");
DEFINE("MySQL_USER", "---");
DEFINE("MySQL_PASS", "---");
DEFINE("MySQL_DB", "---");
?>
Please note that the mysql_connect
and mysql_select_db
has been deprecated for quite some time. Now use PDO.
<?php
//MySQL connection and database connection
$connection = mysql_connect(MySQL_ADDR, MySQL_USER, MySQL_PASS);
if(!$connection)
die("Could not connect to mysql server. ".mysql_error());
$database = mysql_select_db(MySQL_DB, $connection);
if(!$database)
die("Could not connect to mysql database. ".mysql_error());
?>
Before I learned the proper structure of templates (.tpl
), I seperated HTML within the functions so that the client-side is clean. I wouldn't recommend this in the future.
<?php
/*--Server Time--*/
date_default_timezone_set('US/Eastern');
/*--Header--*/
function writeHeader($title){
echo '<!DOCTYPE html>',
'<head>',
'<title>',$title,'</title>',
'<link href="css/style.css" rel="stylesheet" type="text/css"/>',
'<script type="text/javascript" src="ajax/ajax.js"></script>',
'</head>',
'<body>';
}
/*--Title--*/
function writeTitle($title){
echo '<div id="header">',$title,'</div>';
}
/*--Tables--*/
function writeTable(){echo '<table id="table">';}
function writeTableHeader($headerName){echo '<th>',$headerName,'</th>';}
function writeTableRow(){echo '<tr>';}
function writeTableData($data){echo '<td>',$data,'</td>';}
function closeTableRow(){echo '</tr>';}
function closeTable(){echo '</table>';}
/*--Divisions--*/
function writeDiv($name){echo '<div id="',$name,'">';}
function writeDivHeader($name){echo '<h2>',$name,'</h2>';}
function closeDiv(){echo '</div>';}
/*--Form Elements--*/
function writeForm(){echo '<form action="?" method=post onreset="resetHandler();">';}
function closeForm(){echo '</form>';}
//Write Form Element
function writeFormElement($type, $name, $value, $title){
echo $title;
echo '<input type="',$type,'" name="',$name,'" value="',$value,'"/>';
}
//Write DropDown
function writeDropDown($name, $div){
echo '<select name="',$name,'" id="',$div,'" onchange="makeListboxRequest(document.getElementById(\'',$div,'\').selectedIndex);">';
}
//Write Option
function writeOption($value,$name){echo '<option value="',$value,'">',$name,'</option>';}
//Close DropDown
function closeDropDown(){echo '</select>';}
/*--MySQL--*/
function sqlSelectAll($table){
return mysql_query('SELECT * FROM '.$table.'');
}
/*--Footer--*/
function writeFooter($name,$email){
$date = date("F j, Y, g:i a");
$year = date("Y");
echo '<div id="left">© ',$year,' - <a href="mailto:',$email,'">',$name,'</a></div><div id="right">',$date,'</div>';
}
/*--End--*/
function closeHTML(){echo'</body></html>';mysql_close();}
?>
<?php
require_once("include/functions.php");
require_once("include/constants.php");
require_once("include/database.php");
$value = $_GET['value'];
$courseNames = array();
$result = sqlSelectAll("courses_lookup");
while($row = mysql_fetch_array($result)){
$courseID = $row['course_id'] - 1;
$courseNames[$courseID] = $row['course_name'];
if($value == $courseID)
$courseName = $row['course_name'];
}
echo 'Course Name<input type="text" name="courseName" value="',$courseName,'" readonly>';
echo '<input type="hidden" name="course" value=',$courseID,'></p>';
?>
<?php
require_once("include/functions.php");
require_once("include/constants.php");
require_once("include/database.php");
$value = $_GET['value'];
$courseNames = array();
$studentFound = false;
$totalCourses = 0;
$totalAverage = 0;
$studentResult = sqlSelectAll("biographic");
$courseResult = sqlSelectAll("courses_lookup");
$results = mysql_query('SELECT * FROM courses WHERE biographic_id = '.$value.'');
//Find Student Name
while($row = mysql_fetch_array($studentResult)){
if($value == $row['biographic_id']){
$studentFound = true;
$studentName = $row['last_name'] . ", " . $row['first_name'];
break;
}
}
//Find Course Name
while($row = mysql_fetch_array($courseResult)){
$courseID = $row['course_id'] - 1;
$courseNames[$courseID] = $row['course_name'];
}
if(!$studentFound){
echo 'Student not found.';
}
else{
//Start Table
writeTable();
writeTableRow();
writeTableHeader("Student Name");
writeTableHeader("Course Name");
writeTableHeader("Grade");
writeTableHeader("Delete");
closeTableRow();
while($row = mysql_fetch_array($results)){
$totalCourses += 1;
$totalAverage += $row['grade'];
writeTableRow();
writeTableData($studentName);
writeTableData($courseNames[$row['course_id'] - 1]);
writeTableData($row['grade']);
echo '<td><img src="images/delete_x.png" onclick="makeDeleteRequest('.$row['id'].');" onmouseup="makeCourseTableRequest('.$row['biographic_id'].')"/></td>';
closeTableRow();
}
writeTableRow();
writeTableData("Total Courses: ".$totalCourses);
writeTableData("Program: CPA");
if($totalCourses > 0 && $totalAverage > 0){
writeTableData("Avg: " . round($totalAverage / $totalCourses,1));
}
else{
writeTableData("");
}
writeTableData("");
closeTableRow();
closeTable();
}
?>
<?php
require_once("include/functions.php");
require_once("include/constants.php");
require_once("include/database.php");
$value = $_GET['value'];
$result = mysql_query("DELETE FROM courses WHERE id = ". $value ."");
if(!$result){
echo '<font color="#993333"><b>Grade was not deleted successfully.</b></font>';
}
else{
echo '<font color="#339966"><b>Grade was deleted successfully.</b></font>';
}
?>
<?php
require_once("include/functions.php");
require_once("include/constants.php");
require_once("include/database.php");
$value = $_GET['value'];
$studentFound = false;
$result = sqlSelectAll("biographic");
while($row = mysql_fetch_array($result)){
if($value == $row['biographic_id']){
$studentFound = true;
$studentName = $row['last_name'] . ", " . $row['first_name'];
break;
}
}
if(!$studentFound)
$studentName = "Unknown";
echo 'Student Name<input type="text" name="studentName" value="',$studentName,'" readonly>';
?>
My instructor asked my class to use PHP
to navigate on the page. Each button would activate a function on the index.php
page when clicked. It looks organized in structure but I wouldn't recommend in the future -- too many bugs can occur.
//strip button name and display
function setupButton($button){
if(strpbrk($button,"M"))writeFormElement("submit", "f_student", "Add Student","");
if(strpbrk($button,"C"))writeFormElement("submit", "f_course", "Add Course","");
if(strpbrk($button,"V"))writeFormElement("submit", "f_view_courses", "View Courses","");
if(strpbrk($button,"R"))writeFormElement("reset", "f_reset", "Reset Form","");
if(strpbrk($button,"H"))writeFormElement("submit", "f_help", "Help Page","");
}
//FORM - STUDENT
function formStudent(){
$GLOBALS['buttons'] = "SRCHV";
writeDivHeader("Student Form");
writeFormElement("text","firstName","","First name");
writeFormElement("text","lastName","","Last name");
writeFormElement("text","email","","Email");
writeFormElement("text","phone","","Phone");
writeFormElement("submit", "f_student_add", "Submit Student","");
}
//FORM - COURSES
function formCourse(){
$GLOBALS['buttons'] = "ARMHV";
writeDivHeader("Course Form");
echo 'Student ID <input type="text" id="studentid" name="studentid" onkeyup="makeStudentRequest(this.value);"/>';
writeDiv("studentName");
closeDiv();
echo 'Course Code';
writeDropDown("courseCode","course");
$lookupResult = sqlSelectAll("courses_lookup");
while($row = mysql_fetch_array($lookupResult))
{
writeOption($row['course_id'],$row['course_code']);
}
closeDropDown();
writeDiv("courseName");
closeDiv();
writeFormElement("text","grade","","Grade");
writeFormElement("submit", "f_course_submit", "Submit Course","");
}
//includes
require_once("include/functions.php");
require_once("include/constants.php");
require_once("include/database.php");
//variables
$buttons = "";
$isLogin = false;
//header
writeHeader(WEB_TITLE);
//page title
writeTitle(FORM_TITLE);
//form on content
writeForm();
writeDiv("content");
if (isset($_POST['f_student_add'])) displayStudentResults() ;
else if (isset($_POST['f_help'])) displayHelp();
else if (isset($_POST['f_course'])) formCourse();
else if (isset($_POST['f_view_courses'])) viewCourses();
else if (isset($_POST['f_course_submit'])) displayCourseResults();
else formStudent(); //formStudent();
closeDiv();
//navigation/buttons
writeDiv("leftpane");
setupButton($buttons);
closeDiv();
closeForm();
//footer
writeDiv("footer");
writeFooter("Steven","Email");
closeDiv();
//close body and html tags
closeHTML();
Without showing all code, my goal was to show how structure can work. PHP
can get messy real quick. This assignment had to follow the instructor's requests but I would expand this idea while keeping it simplistic. View my PHP Template project to see how we can nail it.