PHP AND AJAX in Font

Drawer DataMatrix in Font PHP AND AJAX

<span style="font-weight: bold;">Sa</span> </td> </tr> < php $monthstart = date("w", $timestamp); $lastday = date("d", mktime (0, 0, 0, $month + 1, 0, $year)); $startdate = -$monthstart; //Figure out how many rows we need. $numrows = ceil (((date("t",mktime (0, 0, 0, $month + 1, 0, $year)) + $monthstart) / 7)); //Let's make an appropriate number of rows... for ($k = 1; $k <= $numrows; $k++){ ><tr>< php //Use 7 columns (for 7 days)... for ($i = 0; $i < 7; $i++){ $startdate++; if (($startdate <= 0) || ($startdate > $lastday)){ //If we have a blank day in the calendar. ><td style="background: #FFFFFF;"> </td>< php } else { if ($startdate == date("j") && $month == date("n") && $year == date("Y")){ ><td style="text-align: center; background: #FFBC37;" onmouseover="this.style.background='#FECE6E'" onmouseout="this.style.background='#FFBC37'"> < php echo date ("j"); ></td>< php } else { ><td style="text-align: center; background: #A2BAFA;" onmouseover="this.style.background='#CAD7F9'" onmouseout="this.style.background='#A2BAFA'"> < php echo $startdate; ></td>< php } } } ></tr>< php } > </table>

This is simply code to show a calendar of the current month. The code is set up to allow for alternative years and months, which can be passed in with the $_GET superglobal; but for now, you are going to concentrate only on the current month. As you progress with the examples in this chapter, you will see how you can use Ajax to really improve the functionality of this module and create some very cool applications. The code itself is fairly simple to decipher. It simply uses the date function in PHP to determine the beginning and end dates, and then build the calendar accordingly. This is a prime example of using PHP s server-side scripting in conjunction with Ajax to create a nice little application (as shown in Figure 3-1). Next, you ll work on progressing your application.

A nice feature that I first noticed as being received positively by the Internet community is the auto-complete feature in Gmail. Basically, when you re entering the e-mail address of the person you re sending a message to, Gmail searches your list of contacts (using Ajax) and automatically drops down a listing of all matches. You are then free to click one of the dropped-down objects to fill it into the requested field. The whole code integration is seamless and makes for a handy feature. The next example will show you how to do the same thing although it s not quite as in-depth as the Gmail solution. Basically, I have built a way to feed a list of objects

through an array (a database solution would be more effective, but that is outside of the scope of this example and will be shown later in the book), and then display them based on what the user has entered. The user can then click the name to fill out the field (hence the auto-completion). I have expanded on the previous example by assuming that a user may want to enter a reminder for the particular day in question on the calendar. The system allows the user to enter their name and their task by clicking on an individual day. Ideally, once the task is entered, the system will then save the task to the database. For now, though, you are merely concentrating on the auto-complete feature; saving the actual information will be handled in a later chapter. Have a look at the following example, which integrates an auto-complete feature and a pop-up form using Ajax. Pay attention to the style.css and functions.js files, which have changed.

/* style.css */ body { font-family: verdana, arial, helvetica; font-size: 11px; color: #000000; } .formclass { position: absolute; left: 0px; top: 0px; visibility: hidden; height: 0px; width: 0px; background: #A2BAFA; border-style: solid; border-width: 1px; border-color: #000000; } .autocomp { position: absolute; left: 0px; top: 0px; visibility: hidden; width: 0px; }