Tương tác giữa PHP và jQuery - part 19 docx

CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 181 Save this file, and then navigate to http://localhost/admin.php and create a new event with the following information: • Event Title: Dinner Party • Start Time: 2010-01-22 17:00:00 • End Time: 2010-01-22 19:00:00 • Description: Five-course meal with wine pairings at John’s house After clicking the Create new event button, the calendar is updated with the new event (see Figure 5-3). Figure 5-3. The new event as it appears when hovered over Adding a Button to the Main View to Create New Events To make it easier for your authorized users to create new events, add a button to the calendar that takes the user to the form in admin.php. Do this by creating a new private method called _adminGeneralOptions() in the Calendar class: CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 182 <?php class Calendar extends DB_Connect { private $_useDate; private $_m; private $_y; private $_daysInMonth; private $_startDay; public function __construct($dbo=NULL, $useDate=NULL) { } public function buildCalendar() { } public function displayEvent($id) { } public function displayForm() { } public function processForm() { } private function _loadEventData($id=NULL) { } private function _createEventObj() { } private function _loadEventById($id) { } /** * Generates markup to display administrative links * * @return string markup to display the administrative links */ private function _adminGeneralOptions() { /* * Display admin controls */ return <<<ADMIN_OPTIONS <a href="admin.php" class="admin">+ Add a New Event</a> ADMIN_OPTIONS; } } ?> CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 183 ■ Note Checks to ensure that this button is only displayed to authorized users will be added Chapter 6. Next, modify the buildCalendar() method to call your new _adminGeneralOptions() method by inserting the following bold code: public function buildCalendar() { // To save space, the bulk of this method has been omitted /* * Close the final unordered list */ $html .= "\n\t</ul>\n\n"; /* * If logged in, display the admin options */ $admin = $this->_adminGeneralOptions(); /* * Return the markup for output */ return $html . $admin; } Finally, add the admin stylesheet (admin.css) to index.php using the following code in bold to make sure the link displays correctly: <?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 */ $page_title = "Events Calendar"; $css_files = array('style.css', 'admin.css'); /* * Include the header CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 184 */ include_once 'assets/common/header.inc.php'; ?> <div id="content"> <?php /* * Display the calendar HTML */ echo $cal->buildCalendar(); ?> </div><! end #content > <?php /* * Include the footer */ include_once 'assets/common/footer.inc.php'; ?> Save the file and reload http://localhost/ to see the button (see Figure 5-4). CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 185 Figure 5-4. The Admin button appears in the bottom left of the calendar Adding Edit Controls to the Full Event View Next, you need to make it possible for authorized users to edit events. You will do this by adding a button to the full view of an event in view.php. However, unlike the simple link used to create a new option, an Edit button will require an actual form submission. To keep this code manageable, you’ll create a new private method called _adminEntryOptions() in the Calendar class that will generate the markup for the form. For now, this form will simply return the form markup to display the Edit button. More will be added to the form as you continue on through the exercises in this book. You create this method by adding the following bold code to the Calendar class: <?php class Calendar extends DB_Connect { CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 186 private $_useDate; private $_m; private $_y; private $_daysInMonth; private $_startDay; public function __construct($dbo=NULL, $useDate=NULL) { } public function buildCalendar() { } public function displayEvent($id) { } public function displayForm() { } public function processForm() { } private function _loadEventData($id=NULL) { } private function _createEventObj() { } private function _loadEventById($id) { } private function _adminGeneralOptions() { } /** * Generates edit and delete options for a given event ID * * @param int $id the event ID to generate options for * @return string the markup for the edit/delete options */ private function _adminEntryOptions($id) { 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> </div><! end .admin-options > ADMIN_OPTIONS; } CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 187 } ?> Modifying the Full Event Display Method to Show Admin Controls Before the Edit button will be displayed, the _adminEntryOptions() method needs to be called from within the displayEvent() method. This is as simple as storing the return value of _adminEntryOptions() in a variable, $admin, and outputting that variable along with the rest of the entry markup. Add the following bold modifications to displayEvent() in the Calendar class: /** * Displays a given event's information * * @param int $id the event ID * @return string basic markup to display the event info */ public function displayEvent($id) { /* * Make sure an ID was passed */ if ( empty($id) ) { return NULL; } /* * Make sure the ID is an integer */ $id = preg_replace('/[^0-9]/', '', $id); /* * Load the event data from the DB */ $event = $this->_loadEventById($id); /* * Generate strings for the date, start, and end time */ $ts = strtotime($event->start); $date = date('F d, Y', $ts); $start = date('g:ia', $ts); $end = date('g:ia', strtotime($event->end)); /* * Load admin options if the user is logged in */ $admin = $this->_adminEntryOptions($id); /* * Generate and return the markup */ return "<h2>$event->title</h2>" . "\n\t<p class=\"dates\">$date, $start&mdash;$end</p>" CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 188 . "\n\t<p>$event->description</p>$admin"; } ■ Note Make sure that you include the $admin variable at the end of the return string. ■ Note As with the Create a new entry button, checks will be added later to ensure that only authorized users see the editing controls. Adding the Admin Stylesheet to the Full Event View Page The last step before the Edit button is ready for use is to include the admin.css stylesheet in the $css_files variable of view.php: <?php /* * Make sure the event ID was passed */ if ( isset($_GET['event_id']) ) { /* * Collect the event ID from the URL string */ $id = htmlentities($_GET['event_id'], ENT_QUOTES); } else { /* * Send the user to the main page if no ID is supplied */ header("Location: ./"); exit; } /* * Include necessary files */ include_once ' /sys/core/init.inc.php'; /* * Output the header */ $page_title = "View Event"; CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 189 $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->displayEvent($id) ?> <a href="./">&laquo; Back to the calendar</a> </div><! end #content > <?php /* * Output the footer */ include_once 'assets/common/footer.inc.php'; ?> Save this file, then click an event to see the Edit button (see Figure 5-5). Figure 5-5. The edit button as it appears when viewing a full event description CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS 190 Clicking the Edit button will bring up the form on admin.php with all the event’s data loaded in the form (see Figure 5-6). Figure 5-6. The admin form when an event is being edited Deleting Events The last step in creating the Calendar class is to allow authorized users to delete events. Event deletion is different from creating or editing events in that you want to confirm a user’s intentions before deleting the event. Otherwise an accidental click could result in frustration and inconvenience for the user. This means that you must implement the Delete button in two stages: 1. The Delete button is clicked, and the user is taken to a confirmation page. 2. The confirmation button is clicked, and the event is removed from the database. . http://localhost/admin .php and create a new event with the following information: • Event Title: Dinner Party • Start Time: 201 0-0 1-2 2 17:00:00 • End Time: 201 0-0 1-2 2 19: 00:00 • Description: Five-course. correctly: < ?php /* * Include necessary files */ include_once ' /sys/core/init.inc .php& apos;; /* * Load the calendar */ $cal = new Calendar($dbo, "201 0-0 1-0 1 12:00:00");. include_once 'assets/common/header.inc .php& apos;; ?> <div id="content"> < ?php /* * Display the calendar HTML */ echo $cal->buildCalendar(); ?> </div><!