Task 4 Toggle PRESENTABSENT for changing students attendance record Tapping the

Task 4 toggle presentabsent for changing students

This preview shows page 9 - 13 out of 18 pages.

Task 4 - Toggle PRESENT/ABSENT for changing students’ attendance record Tapping the word PRESENT or ABSENT in each entry on the page will change the status from one to the other, and initiate AJAX communication to the server for changing the attribute “attendOrNot” of this entry in the database table, without reloading the entire web page. Task 4.1 Add the “onclick” event handler to the <span> element of each display entry (do this by adding the code to queryEntries_template.php ). Implement the JavaScript function changeState(elem) as the event handler in index_template.html. With reference to the steps in Task 2.1, implement the AJAX code for asynchronous communication with the server (send the request through GET ”). function changeState(elem) { var oldValue = elem.innerHTML; var newvalue; var itemID = elem.parentNode.getAttribute('id'); if (oldValue == 'PRESENT') { newvalue = 'ABSENT'; } else { (h3 tag) (h5 tag)
Image of page 9
newvalue = 'PRESENT'; } var xmlhttp; // Add AJAX code here ………………………….. Task 4.2 Under updateState_template.php, implement the server-side logic in order to change the “attendOrNot” attribute of the corresponding entry in the database, as well as print out the updated attendance status. The following code is given for your reference. $conn=mysqli_connect('sophia.cs.hku.hk', 'user-name', 'password', ‘database name’) or die ('Error! '.mysqli_connect_error($conn)); // Implement the code here. Upon finishing this task, by clicking on the word PRESENT or ABSENT in each display entry on the page, you can change the attendance status of the student by updating the database as well as showing the new attendance status without re-loading the page.
Image of page 10
< html > < head > < meta charset = "utf-8" /> < title > Attendance System </ title > < link rel = "stylesheet" type = "text/css" href = "style_template.css" > </ head > < body onload = " showAll ()" > < h1 > Course Attendance System </ h1 > < div id = "List" > < div id = "entries" > </ div > < div id = "button_all" class = "buttons" onclick = " showAll ()" > < p > Show All </ p > </ div > < input id = "major" type = "text" > < div class = "buttons" onclick = " filterM ()" > < p > Filter by Major </ p > </ div > < input id = "course" type = "text" > < div class = "buttons" onclick = " filterC ()" > < p > Filter by Course </ p > </ div > < font size = "5" color = "black" > Please fill in the following attributes for adding a student in the system (All fields must be filled) </ font > < br /> < input id = "newname" type = "text" placeholder = "Enter student name" size = "40" required > < br > < input id = "newmajor" type = "text" placeholder = "Enter student major" size = "40" required > < br > < input id = "newcourse" type = "text" placeholder = "Enter student course" size = "40" required > < br > < input id = "newcoursedate" type = "text" placeholder = "Enter student course date" size = "40" required pattern = "[0-9]{4}-[0-9]{2}-[0-9]{2}" > < br > < input id = "newattendance" type = "text" placeholder = "Enter student attendance" size = "40" required pattern = "^(PRESENT|ABSENT)$" > < br > < div class = "buttons" onclick = " addstudent ()" > < p > Add a student </ p > </ div >
Image of page 11
</ div > < script > // Task 2.2 - to be implemented function addstudent () { var name = document . getElementById ( "newname" ); var major = document . getElementById ( "newmajor" ); var course = document . getElementById ( "newcourse" ); var date = document . getElementById ( "newcoursedate" ); var attendance = document . getElementById (
Image of page 12
Image of page 13

You've reached the end of your free preview.

Want to read all 18 pages?

  • Fall '13
  • Dr. C. Wu
  • Ajax

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture