Ask a question to Desklib · AI bot


Photographs and Accepts Uploaded Photographs

5 Pages2266 Words500 Views

Added on  2019-09-16

BookmarkShareRelated Documents
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 5: PHOTO ALBUM CLIENT-RENDERED VERSION EPhoto Album Client-Rendered Version EThe next version of the photoalbum restores the use of authentication to the site (corresponding to the PHP version e) . There are three stages we will do for this:1.We will protect the server side code that deletes photographs and accepts uploaded photographs from running unless you are logged in.2.We will add code to the server and to the client page to allow you to log in.3.We will hide the add images and delete links from non-logged in users.The first step is simple. We need to add the following code to both json-photoalbum-delete.php andjson-photoalbum-upload.php. It should be added at the top immediately after the line outputting the content-type header./* For part e */setUpSession();if ( $_SESSION['user'] == "anonymous") { print "{"; print "\"result\": \"failure\""; print ","; print "\"error\": \"not logged in\""; print "}"; exit();}With this code in place, try using your existing photoalbum-client-rendered-version-d.html to deleteor upload images: you should find that it is blocked because you are not logged in.To enable you to log on you need another PHP script. Create a file called json-photoalbum-logon.php and put the following code in it:<?phpheader("content-type: application/json");require_once("lib/dbutils.php");$pdo = connect();$action = logInOrOut( $pdo, 'users');print "{";print "\"action\": \"".$action."\"";print ",";print "\"user\": \"".$_SESSION['user']."\"";print ",";print "\"role\": \"".$_SESSION['role']."\"";print "}";?>Page 1 of 5
Photographs and Accepts Uploaded Photographs_1
Digital Business Application – Lab ExercisesThis script uses the existing logInOrOut function in dbutils.php to start a session if the supplied username and password are correct. Then it prints out a JSON object containing the username and role that has been assigned. Try visiting this script directly by typing its URL into the browser address bar to see this JSON object.We need to add javascript to our client page to allow it to send an AJAX request for logging in and out. The first thing this requires is that we add the log in form to our page.Make a copy of photoalbum-client-rendered-version-d.html and call it photoalbum-client-rendered-version-e.html.Add the HTML for the log in form that is given in PHP and MySQL Exercise 6 to the new version of the page. This form is initially hidden, so we need a link to make it appear. However, we also want todisplay a different link dependent on whether the user is logged in or not – that is, we want a link that says “log in” first, and then a link that says “log out”.In the server version we achieved this by printing out a different link as we served up the whole pageagain, but in this client version, the page is neverreloaded. It is the same page in the window at all times, it changes itself using JavaScript running in it. Therefore, we need some javascript to display the appropriate links.Add the following div between the photoalbum header and the (unused) message div, as shown below:<header class='w3-container w3-orange w3-center'> <h1>My Photo Album</h1> <h2>Your Name</h2> <p>Here are some photographs and descriptions.</p></header><div class='w3-container w3-center' id='userinfo'></div><div id='message'></div>We will use this div to display the log in or log out link.In order for the Javascript in the page to keep track of wheter the user is logged in or logged out, we need a couple of global variables. Declare these at the top of the javascript, just after the opening <script> tag:Page 2 of 5
Photographs and Accepts Uploaded Photographs_2

Found this document preview useful?

Related Documents
Java Script function

Digital Business Application – Lab Exercises

Digital Business Application

Bunch of Handler Functions and Attach