Lab 12

Lab 12

AJAX and jQuery

Goal

  1. Learn how to use sessions to secure scripts in two ways:
    • Ensure that output is only shown if a user is logged in
    • Ensure that queries only impact the data of a logged in user
  2. Learn how to use AJAX (Asynchronous JavaScript) and jQuery to improve the efficiency of a script in two ways:
    • Avoid completely refreshing a page with lots of dynamically generated content
    • Pass a minimal amount of data in order to perform an operation

Connecting to server

Remember that you must...

  1. Save your PHP files,
  2. Upload them to the remote web server,
  3. Open your scripts via an absolute URL and
  4. Refresh by pressing SHIFT + reload on your web browser to be sure the page is being reloaded from the server.

Use WinSCP to connect to our remote server.

Details about your specific server, userid and password were emailed to you. Here is the general information:

  • Hostname: ftp.sienasellbacks.com   or   ftp.breimer.net
  • Username: userid@sienasellbacks.com   or   userid@breimer.net
  • Password: Sent via email
  • Port: 21
  • Use FTP; Do not use SFTP or SCM

Be sure to replace userid with your actual Siena userid; But, do not add @siena.edu

1. Improving manage courses (making it secure)

  1. In your project3 folder, open manage_courses.php or create the file if you haven't already
  2. Copy the following solution manage_courses.php in place of your code
  3. Read the comments
  4. How does this improved script ensure that only the logged in user can manage their courses? You don not have to answer this question, but it will be asked on the final exam
  5. Consider that we can delete a course by navigating to a URL an entering the cid as a parameter, e.g., delete_courses.php?cid=1
  6. Use what you've learned to secure the delete script, so that it will only delete a course "owned by" the logged in user. Hint: If you always fetch the uid from the session, the following query will ensure that a user can only delete their courses: DELETE FROM $table_name WHERE cid='$cid' AND uid='$uid'
  7. Use what you've learned to make your edit (update) course script more secure. If you have yet to implement your edit script, move on and just make sure your manage courses and delete courses scripts are secured.

TASK CHECK

Show your instructor that both manage courses and delete are now secured, i.e., they will only work for logged in users and will only delete the courses of a logged in user

2. Improving delete courses (making it efficient)

  1. In functions.php make sure your page generation function includes the custom.js script
    code
  2. In manage_courses.php entirely remove the href attribute of the delete link and instead "pass" the cid using the id attribute
    code
  3. Add the class delete to the list of class names
  4. Note that without the href this a tag will act as a button instead of a hyperlink
  5. In the js folder, open custom.js and add the following code:
    $(function () {
  $('[data-toggle="popover"]').popover()
  
  $(".delete").click(doIt);
  
  function doIt() {
	  
	  var cid = this.id; // HTML nodes have an id field that we can use to know exactly which delete button was clicked	  
	  alert("CID: " + cid);
	  
	  var btn = $(this); // btn is now a jquery object constructed from the HTML node
	  alert("BTN: " + btn.html())  // jquery objects have useful methods like html, which fetches the inner HTML of the tag
	
		// Rather than have the browser hyperlink to the script, we call the script asynchronously using the jQuery ajax method	
		var myurl = "delete_course.php?cid="+cid;  
		$.ajax({
				url: myurl, 
				success: function(data){
					btn.parent().parent().remove();
					alert(data);
				}
		}); 
  }
});
  6. Read the comments carefully
  7. Test the script by uploading it to the server
  8. Remove the alert once you are convinced it is working

TASK CHECK

Show your instructor that delete is now working using asynchronous javascript.

DELIVERABLE

None. To get credit for lab you must work productively for the 2 hour period.

Do not share

While it is OK to help other students with concepts and general trouble-shooting, you should not share code. It is expected that each individual project will be unique.