apress pro php and jquery 2010 phần 5 potx

CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 145 /* * Return the markup for output */ return $html; } } ?> Modifying the Index File To see the output of the buildCalendar() method, you’ll need to modify index.php in the public folder to call the method. Update the file with the code shown in bold: <?php /* * Include necessary files */ include_once ' /sys/core/init.inc.php'; /* * Load the calendar for January */ $cal = new Calendar($dbo, "2010-01-01 12:00:00"); /* * Display the calendar HTML */ echo $cal->buildCalendar(); ?> Pull up the file in your browser to see the results so far (see Figure 4-4). From library of Wow! eBook <www.wowebook.com> CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 146 Figure 4-4. The heading and weekday abbreviations Building the Calendar The next step is to build the actual calendar days. Several steps need to be completed for this to work out: 1. Create a new unordered list. 2. Set up a loop (with an iteration counter, a calendar date counter, today’s date, and the month and year stored as variables) that runs as long as the calendar date counter is less than the number of days in the month. 3. Add a fill class to the days of the week that occur before the first. 4. Add a today class if the current date is contained within the same month and year and matches the date being generated. 5. Create an opening and closing list item tag for each day. 6. Check if the current calendar box falls within the current month, and add the date if so. 7. Check if the current calendar box is a Saturday, and close the list and open a new one if so. 8. Assemble the pieces of the list item and append them to the markup. CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 147 9. After the loop, run another loop to add filler days until the calendar week is completed. 10. Close the final unordered list and return the markup. To start, complete steps 1 and 2 by adding the following bold code to the buildCalendar() method: public function buildCalendar() { /* * Determine the calendar month and create an array of * weekday abbreviations to label the calendar columns */ $cal_month = date('F Y', strtotime($this->_useDate)); $weekdays = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'); /* * Add a header to the calendar markup */ $html = "\n\t<h2>$cal_month</h2>"; for ( $d=0, $labels=NULL; $d<7; ++$d ) { $labels .= "\n\t\t<li>" . $weekdays[$d] . "</li>"; } $html .= "\n\t<ul class=\"weekdays\">" . $labels . "\n\t</ul>"; /* * Create the calendar markup */ $html .= "\n\t<ul>"; // Start a new unordered list for ( $i=1, $c=1, $t=date('j'), $m=date('m'), $y=date('Y'); $c<=$this->_daysInMonth; ++$i ) { // More steps go here } /* * Return the markup for output */ return $html; } Next, add the bold code below to complete steps 3–5: public function buildCalendar() { /* * Determine the calendar month and create an array of * weekday abbreviations to label the calendar columns */ CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 148 $cal_month = date('F Y', strtotime($this->_useDate)); $weekdays = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'); /* * Add a header to the calendar markup */ $html = "\n\t<h2>$cal_month</h2>"; for ( $d=0, $labels=NULL; $d<7; ++$d ) { $labels .= "\n\t\t<li>" . $weekdays[$d] . "</li>"; } $html .= "\n\t<ul class=\"weekdays\">" . $labels . "\n\t</ul>"; /* * Create the calendar markup */ $html .= "\n\t<ul>"; // Start a new unordered list for ( $i=1, $c=1, $t=date('j'), $m=date('m'), $y=date('Y'); $c<=$this->_daysInMonth; ++$i ) { /* * Apply a "fill" class to the boxes occurring before * the first of the month */ $class = $i<=$this->_startDay ? "fill" : NULL; /* * Add a "today" class if the current date matches * the current date */ if ( $c==$t && $m==$this->_m && $y==$this->_y ) { $class = "today"; } /* * Build the opening and closing list item tags */ $ls = sprintf("\n\t\t<li class=\"%s\">", $class); $le = "\n\t\t</li>"; // More steps go here } /* * Return the markup for output */ return $html; } CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 149 To complete steps 6-10—actually build the dates; check if the week needs to wrap; assemble the date markup; finish the last week out with filler, and return the markup—add the following bold code: public function buildCalendar() { /* * Determine the calendar month and create an array of * weekday abbreviations to label the calendar columns */ $cal_month = date('F Y', strtotime($this->_useDate)); $weekdays = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'); /* * Add a header to the calendar markup */ $html = "\n\t<h2>$cal_month</h2>"; for ( $d=0, $labels=NULL; $d<7; ++$d ) { $labels .= "\n\t\t<li>" . $weekdays[$d] . "</li>"; } $html .= "\n\t<ul class=\"weekdays\">" . $labels . "\n\t</ul>"; /* * Create the calendar markup */ $html .= "\n\t<ul>"; // Start a new unordered list for ( $i=1, $c=1, $t=date('j'), $m=date('m'), $y=date('Y'); $c<=$this->_daysInMonth; ++$i ) { /* * Apply a "fill" class to the boxes occurring before * the first of the month */ $class = $i<=$this->_startDay ? "fill" : NULL; /* * Add a "today" class if the current date matches * the current date */ if ( $c+1==$t && $m==$this->_m && $y==$this->_y ) { $class = "today"; } /* * Build the opening and closing list item tags */ $ls = sprintf("\n\t\t<li class=\"%s\">", $class); CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 150 $le = "\n\t\t</li>"; /* * Add the day of the month to identify the calendar box */ if ( $this->_startDay<$i && $this->_daysInMonth>=$c) { $date = sprintf("\n\t\t\t<strong>%02d</strong>",$c++); } else { $date="&nbsp;"; } /* * If the current day is a Saturday, wrap to the next row */ $wrap = $i!=0 && $i%7==0 ? "\n\t</ul>\n\t<ul>" : NULL; /* * Assemble the pieces into a finished item */ $html .= $ls . $date . $le . $wrap; } /* * Add filler to finish out the last week */ while ( $i%7!=1 ) { $html .= "\n\t\t<li class=\"fill\">&nbsp;</li>"; ++$i; } /* * Close the final unordered list */ $html .= "\n\t</ul>\n\n"; /* * Return the markup for output */ return $html; } Test the function as it stands now, and you’ll see the unordered lists in your browser (see Figure 4-5). CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 151 Figure 4-5. The markup as generated by buildCalendar() Displaying Events in the Calendar Adding the events to the calendar display is as easy as loading the events array from _createEventObj() and looping through the events stored in the index that matches the current day if any exist. Add event data to the calendar markup using the following bold code: public function buildCalendar() { /* * Determine the calendar month and create an array of * weekday abbreviations to label the calendar columns */ $cal_month = date('F Y', strtotime($this->_useDate)); $weekdays = array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'); /* * Add a header to the calendar markup CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 152 */ $html = "\n\t<h2>$cal_month</h2>"; for ( $d=0, $labels=NULL; $d<7; ++$d ) { $labels .= "\n\t\t<li>" . $weekdays[$d] . "</li>"; } $html .= "\n\t<ul class=\"weekdays\">" . $labels . "\n\t</ul>"; /* * Load events data */ $events = $this->_createEventObj(); /* * Create the calendar markup */ $html .= "\n\t<ul>"; // Start a new unordered list for ( $i=1, $c=1, $t=date('j'), $m=date('m'), $y=date('Y'); $c<=$this->_daysInMonth; ++$i ) { /* * Apply a "fill" class to the boxes occurring before * the first of the month */ $class = $i<=$this->_startDay ? "fill" : NULL; /* * Add a "today" class if the current date matches * the current date */ if ( $c+1==$t && $m==$this->_m && $y==$this->_y ) { $class = "today"; } /* * Build the opening and closing list item tags */ $ls = sprintf("\n\t\t<li class=\"%s\">", $class); $le = "\n\t\t</li>"; /* * Add the day of the month to identify the calendar box */ if ( $this->_startDay<$i && $this->_daysInMonth>=$c) { /* * Format events data */ $event_info = NULL; // clear the variable CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 153 if ( isset($events[$c]) ) { foreach ( $events[$c] as $event ) { $link = '<a href="view.php?event_id=' . $event->id . '">' . $event->title . '</a>'; $event_info .= "\n\t\t\t$link"; } } $date = sprintf("\n\t\t\t<strong>%02d</strong>",$c++); } else { $date="&nbsp;"; } /* * If the current day is a Saturday, wrap to the next row */ $wrap = $i!=0 && $i%7==0 ? "\n\t</ul>\n\t<ul>" : NULL; /* * Assemble the pieces into a finished item */ $html .= $ls . $date . $event_info . $le . $wrap; } /* * Add filler to finish out the last week */ while ( $i%7!=1 ) { $html .= "\n\t\t<li class=\"fill\">&nbsp;</li>"; ++$i; } /* * Close the final unordered list */ $html .= "\n\t</ul>\n\n"; /* * Return the markup for output */ return $html; } ■ Caution Don’t forget to add the new $event_info variable into the markup at the bottom of the loop! CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 154 When the database events are loaded into the calendar display, the titles show up next to the appropriate date (see Figure 4-6). Figure 4-6. An event title displayed next to the appropriate date ■ Note The linked event titles point to a file called view.php that doesn’t exist yet. This file will be built and explained in the “Outputing HTML to Display Full Event Descriptions” section later in this chapter. Making the Calendar Look Like a Calendar At this point, your markup is proper and your events are there, but the generated code doesn’t look much like a calendar at all. To rectify this, you’ll now be taking a moment to complete the HTML markup and style the page using CSS. [...]... private function _loadEventById($id) { } } ?> 178 CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS Adding a Processing File to Call the Processing Method The form to add and edit events is submitted to a file called process.inc .php, which is located in the inc folder (/public/assets/inc/process.inc .php) This file checks the submitted form data and saves or updates entries by performing the following... new Calendar($dbo); ?> < ?php echo $cal->displayForm(); ?> < ?php /* * Output the footer */ include_once 'assets/common/footer.inc .php' ; ?> After saving the preceding code, reload http://localhost/admin .php to see the styled form (see Figure 5- 2) 1 75 CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS Figure 5- 2 The form to add or edit events after applying... 'assets/common/header.inc .php' ; /* * Load the calendar */ $cal = new Calendar($dbo); 171 CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS ?> < ?php echo $cal->displayForm(); ?> < ?php /* * Output the footer */ include_once 'assets/common/footer.inc .php' ; ?> After saving this code, navigate to http://localhost/admin .php to see the resulting form (see Figure 5- 1) Figure 5- 1... sheets, and more To simplify maintenance as much as possible, you’ll be using two files—header.inc .php and footer.inc .php to contain those common elements First, create a file called header.inc .php in the common folder (/public/assets/common/header.inc .php) This file will hold the DOCTYPE declaration for the HTML and create a head section that contains a Content-Type meta tag, the document title, and links... submitting a form to your app’s processing file from somewhere other than the form itself This is a common tactic used by spammers to send multiple forged entry submissions, which is annoying, potentially harmful, and definitely undesirable 169 CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS This token is created by generating a random hash and storing it in the session, and then posting the token... rel="stylesheet" type="text/css" media="screen,projection" href="assets/css/< ?php echo $css; ?>" /> < ?php endforeach; ?> Next, create a file called footer.inc .php in the common folder (/public/assets/common/footer.inc .php) to contain the closing parts of the markup For now, this file doesn’t need to do much: it simply closes the body and html tags opened in header.inc .php As you continue developing... called view .php, and it will reside in the public folder (/public/view .php) This file will be called with a query string containing the ID of the event to be displayed If no ID is supplied, the user will be sent back out to the main view of the calendar At the top of view .php, check for an event ID, and then load the initialization file; the page title and CSS file are set up in variables, and the header... to handle dates, how to organize entries into objects for easy access, and how to output markup and stylesheets to resemble a traditional calendar In the next chapter, you’ll build controls to add, edit, and create events 166 CHAPTER 5 ■■■ Add Controls to Create, Edit, and Delete Events Now that the calendar can be viewed, you need to add controls that will allow administrators to create, edit, and. .. code shown 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 */ $page_title = "Events Calendar"; $css_files = array('style.css'); /* * Include the header */ include_once 'assets/common/header.inc .php' ; ?> < ?php /* * Display the calendar... 174 CHAPTER 5 ■ ADD CONTROLS TO CREATE, EDIT, AND DELETE EVENTS Save this file, then add admin.css to the $css_files array in admin .php by making the changes shown in bold: < ?php /* * Include necessary files */ include_once ' /sys/core/init.inc .php' ; /* * Output the header */ $page_title = "Add/Edit Event"; $css_files = array("style.css", "admin.css"); include_once 'assets/common/header.inc .php' ; /* * . month and year and matches the date being generated. 5. Create an opening and closing list item tag for each day. 6. Check if the current calendar box falls within the current month, and add. Test the function as it stands now, and you’ll see the unordered lists in your browser (see Figure 4 -5) . CHAPTER 4 ■ BUILD AN EVENTS CALENDAR 151 Figure 4 -5. The markup as generated. and more. To simplify maintenance as much as possible, you’ll be using two files—header.inc .php and footer.inc .php to contain those common elements. First, create a file called header.inc.php