Photographs and Accepts Uploaded Photographs

Added on - Sep 2019

Trusted by 2+ million users,
1000+ happy students everyday
Showing pages 1 to 2 of 5 pages
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 tothe 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 uploadedphotographs 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 bothjson-photoalbum-delete.phpandjson-photoalbum-upload.php. It should be added at the top immediately after the line outputtingthe 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 existingphotoalbum-client-rendered-version-d.htmlto 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 calledjson-photoalbum-logon.phpand 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 "}";?>Page1of5
Digital Business Application – Lab ExercisesThis script uses the existinglogInOrOutfunction indbutils.phpto start a session if the suppliedusername and password are correct. Then it prints out a JSON object containing the username androle 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 andout. The first thing this requires is that we add the log in form to our page.Make a copy ofphotoalbum-client-rendered-version-d.htmland call itphotoalbum-client-rendered-version-e.html.Add the HTML for the log in form that is given inPHP and MySQL Exercise 6to the new version ofthe 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 linkthat 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 isneverreloaded. It is the same page in the window at alltimes, it changes itself using JavaScript running in it. Therefore, we need some javascript to displaythe appropriate links.Add the following div between the photoalbum header and the (unused) message div, as shownbelow:<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, weneed a couple of global variables. Declare these at the top of the javascript, just after the opening<script> tag:Page2of5
Desklib Logo
You are reading a preview
Upload your documents to download or

Become a Desklib member to get access