CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 225 <input type="hidden" name="token" value="$_SESSION[token]" /> <input type="hidden" name="action" value="user_logout" /> </div> </form> ADMIN_OPTIONS; } else { return <<<ADMIN_OPTIONS <a href="login.php">Log In</a> ADMIN_OPTIONS; } } private function _adminEntryOptions($id) { } } ?> After saving the changes, reload http://localhost/ while logged out to see the administrative options replaced with a simple Log In link (see Figure 6-9). CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 226 Figure 6-9. While a user is logged out, only a Log In link is displayed Modifying the Event Options Method Next, you want add code to prevent the editing and deletion of events by unauthorized users; you do this by modifying _adminEventOptions() in the Calendar class with the following bold code: <?php class Calendar extends DB_Connect { private $_useDate; private $_m; private $_y; CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 227 private $_daysInMonth; private $_startDay; public function __construct($dbo=NULL, $useDate=NULL) { } public function buildCalendar() { } public function displayForm() { } public function processForm() { } public function confirmDelete($id) { } private function _loadEventData($id=NULL) { } private function _createEventObj() { } private function _loadEventById($id) { } private function _adminGeneralOptions() { } private function _adminEntryOptions($id) { if ( isset($_SESSION['user']) ) { return <<<ADMIN_OPTIONS <div class="admin-options"> <form action="admin.php" method="post"> <p> <input type="submit" name="edit_event" value="Edit This Event" /> <input type="hidden" name="event_id" value="$id" /> </p> </form> <form action="confirmdelete.php" method="post"> <p> <input type="submit" name="delete_event" value="Delete This Event" /> <input type="hidden" name="event_id" value="$id" /> </p> </form> </div><! end .admin-options > ADMIN_OPTIONS; } else { return NULL; CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 228 } } } ?> After inserting these changes, navigate to http://localhost/ while logged out and click an event to bring up its full view; the administrative options will not be displayed (see Figure 6-10). Figure 6-10. The full event view while logged out Limiting Access to Administrative Pages As an additional security precaution, you should ensure that any pages that only authorized users should have access to, such as the event creation/editing form, check for proper authorization before executing. Disallowing Access to the Event Creation Form Without Login You can prevent a mischievous user from finding the event creation form while logged out by performing a simple check that you add to the file. If the user is not logged in, he’ll be sent to the main calendar view before the script has the chance to execute. To implement this change, open admin.php and insert the code shown in bold: <?php /* * Include necessary files */ include_once ' /sys/core/init.inc.php'; /* * If the user is not logged in, send them to the main file */ CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 229 if ( !isset($_SESSION['user']) ) { header("Location: ./"); exit; } /* * Output the header */ $page_title = "Add/Edit Event"; $css_files = array("style.css", "admin.css"); include_once 'assets/common/header.inc.php'; /* * Load the calendar */ $cal = new Calendar($dbo); ?> <div id="content"> <?php echo $cal->displayForm(); ?> </div><! end #content > <?php /* * Output the footer */ include_once 'assets/common/footer.inc.php'; ?> After saving this file, attempt to navigate to http://localhost/admin.php while logged out. You’ll automatically be sent to http://localhost/. Ensuring Only Logged In Users Can Delete Events Also, to keep unauthorized users from deleting events, insert a check for a valid user session in the confirmdelete.php file: <?php /* * Enable sessions */ session_start(); /* CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 230 * Make sure an event ID was passed and the user is logged in */ if ( isset($_POST['event_id']) && isset($_SESSION['user']) ) { /* * Collect the event ID from the URL string */ $id = (int) $_POST['event_id']; } else { /* * Send the user to the main page if no ID is supplied * or the user is not logged in */ header("Location: ./"); exit; } /* * Include necessary files */ include_once ' /sys/core/init.inc.php'; /* * Load the calendar */ $cal = new Calendar($dbo); $markup = $cal->confirmDelete($id); /* * Output the header */ $page_title = "View Event"; $css_files = array("style.css", "admin.css"); include_once 'assets/common/header.inc.php'; ?> <div id="content"> <?php echo $markup; ?> </div><! end #content > <?php /* * Output the footer */ CHAPTER 6 ■ PASSWORD PROTECTION SENSITIVE ACTIONS AND AREAS 231 include_once 'assets/common/footer.inc.php'; ?> Now save this code and try to directly access http://localhost/confirmdelete.php while logged out. As expected, you’ll be redirected to http://localhost/ instead. Summary In this chapter, you learned how to add user authorization to your calendar app, which means only authorized users can now make modifications to the calendar. You learned how to create the Admin class, check login credentials, display admin tools to admins only, and limit access to admin pages. In the next chapter, you’ll start integrating jQuery into the application to progressively enhance the user experience. P A R T 3 ■ ■ ■ Combining jQuery with PHP Applications With the calendar running properly, you can now enhance the application with jQuery to improve the user experience. In the following chapters, you’ll create a layer of JavaScript that will sit on top of your app to add AJAX functionality. [...]... response into the modal window 2 47 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY Creating a File to Handle AJAX Requests Before you put together the call to $.ajax(), it helps to know where and how the data should be sent In the inc folder, create a new file called ajax.inc .php (/public/assets/inc/ajax.inc .php) This file will work very similarly to process.inc .php, except it will deal exclusively... for Elements Created by jQuery To ensure the elements created with jQuery look right when you start building them, you’re going to jump a bit ahead here and create a new CSS file to store styling information for the elements you’ll create with the jQuery scripts you’re about to write 2 37 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY This file will be called ajax.css, and it will reside in the... } 238 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY Including the Stylesheet in the Index File Next, open index .php and include the new stylesheet in the $css_files array by adding the line in bold: < ?php /* * Include necessary files */ include_once ' /sys/core/init.inc .php' ; /* * Load the calendar */ $cal = new Calendar($dbo, "2010- 01-01 12:00:00"); /* * Set up the page title and CSS files... version of jQuery from http:/ /jquery. com/ and include it instead 236 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY Create a JavaScript Initialization File Your app is following progressive enhancement guidelines, so all scripts will be housed in an external file called init.js It will reside in the public js folder (/public/assets/js/init.js), and it will contain all of the custom jQuery code... string.replace("http://localhost/view .php? ", ""); And, yes, this does work, producing the output "event_id=1" (if you assume the original value of $string was http://localhost/view .php? event_id=1) Unfortunately, this approach is not flexible enough; for example, what if the application is moved to another domain name? Or, what if the file name is changed to event .php? Either change breaks the preceding logic and requires an... (), you’ll include the jQuery library and all subsequent files in footer.inc .php (/public/assets/common/footer.inc .php) Begin by including the latest version of jQuery in your app; you accomplish this by adding the following bold lines to footer.inc .php: google.load( "jquery" , "1"); ... Save init.js and reload http://localhost/ in your browser Click an event title to create a new modal window, then click the Close button to watch the modal window fade out (see Figure 7- 4) 256 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY Figure 7- 4 The modal window mid-fade after the user clicks the Close button Adding an Overlay and Fade in the Modal Window To add the overlay and fade in the... the document is ready before executing scripts jQuery( function($){ // Pulls up events in a modal window $("li>a").live("click", function(event){ // Stops the link from loading view .php 240 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY event.preventDefault(); // Adds an "active" class to the link $(this).addClass("active"); // Proves the event handler worked by logging the link text console.log(...CHAPTER 7 ■■■ Enhancing the User Interface with jQuery The application as it stands now is fully functional Events can be viewed, and users with administrative clearance can log in to create, edit, or delete events The next step is to add a layer of polish to the app that creates that finished look -and- feel, which you’ll accomplish using a technique called progressive enhancement to... the modal window exists and // selects it, or creates a new one modal = fx.initModal(); }); ■ Note The semicolon after the data variable has been replaced with a comma in this example Save, then reload http://localhost/ and click one of the event titles to cause a modal window to appear on the screen (see Figure 7- 1) 245 CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY Figure 7- 1 Clicking an event . version of jQuery from http:/ /jquery. com/ and include it instead. CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY 2 37 Create a JavaScript Initialization File Your app is following progressive. P A R T 3 ■ ■ ■ Combining jQuery with PHP Applications With the calendar running properly, you can now enhance the application with jQuery to improve the user experience. In the following. finished look -and- feel, which you’ll accomplish using a technique called progressive enhancement to add AJAX functionality to the app. Adding Progressive Enhancements with jQuery Progressive