If a timestamp is not specified, I return an error message to frontend.php. Next, I verify that a timestamp is specified. If you do not use the database provided in the ZIP download for this project, edit line 10 to establish a PDO connection to your own database. $db = new PDO('sqlite:db/calendar.db') įirst, I establish a PDO connection to the SQLite database. Let's walk through the code step by step. Next, the backend.php script asks the database for all events that occur on the same day as the timestamp. The backend.php script receives an XMLHttpRequest from frontend.php that looks like this: The backend.php script connects frontend.php to the database. This outputs the entire calendar HTML markup. Next, I call the draw_calendar() method in frontend.php on line 16. First, I include the calendar function into frontend.php on line 1. The calendar is displayed in frontend.php. You can read about my changes in the header of /includes/calendar.php. I make several changes to David's original function. I see no point in re-inventing the wheel, so I use a great PHP calendar generation script by David Walsh. Next, I create the calendar's HTML markup with PHP. Visit the PHP PDO website to learn more about creating PDO database connections. If you use the ZIP download for this project, the database connection has already been created for you. Open backend.php in a plain-text editor and edit line 10 to establish a connection to the database. Next, I establish a PHP PDO database connection in the backend.php file. `slug` is a URL-friendly text representation of the event title `id` is an auto-incrementing integer primary key INSERT INTO events (title,slug,time) VALUES ('Ping Pong Game','ping-pong-game',1250463600) INSERT INTO events (title,slug,time) VALUES ('Lacrosse Game','lacrosse-game',1250438700) INSERT INTO events (title,slug,time) VALUES ('Hockey Game','hockey-game',1250367840) INSERT INTO events (title,slug,time) VALUES ('Basketball Game','basketball-game',1250361000) INSERT INTO events (title,slug,time) VALUES ('Soccer Game','soccer-game',1250256000) If you use the ZIP download for this project, the SQLite database has already been created for you. If you use SQLite, create a database file called calendar.db in the "db" directory within the project directory. You need to create the database and load it with the sample data before moving on with this tutorial. This file is referenced from backend.php with a PDO database driver.įirst, create and prepare the database using the schema shown below. This is the SQLite database file that contains a tuple for each calendar event. This file is included into and called from frontend.php. You can read more about my edits in this file's header. I made several edits to David's original function for this tutorial. This PHP script contains a function written by David Walsh that creates the calendar's initial HTML markup. This script also inserts the HTML returned from backend.php into the document object model of frontend.php. The HTTP response from each HTTP request is cached client-side to avoid duplicate HTTP requests. Each event handler will send an HTTP request to backend.php along with a unique "timestamp" GET parameter. This Javascript file is included into frontend.php and uses jQuery to attach onclick event handlers to each hyperlink in the calendar table. The events returned from the database are output in an HTML unordered list. This script queries the database for all events that occur on the same day as the timestamp parameter. This PHP script is called remotely from frontend.php and accepts a GET parameter called "timestamp". This connects frontend.php and the database. This file provides the calendar's HTML markup, includes the jQuery calendar script, and displays the calendar and its events. You will view this file in a web browser. There are several pieces that work together in this tutorial. In this tutorial I use PHP and a SQLite database however, you may use any database for which there is a PHP PDO database driver. However, I explain the code step-by-step to show how all of the pieces fit together. You should be comfortable with HTML, jQuery, and PHP. When a hyperlink is clicked, a list of events for that day is requested from a remote script, cached client-side, and displayed on the page.ĭownload project ZIP file Tutorial Requirements The final calendar in this tutorial contains a hyperlink for each day of the month. This is an extension of my previous article about the jQuery calendar I developed for the Salvation Army of Wake County website. This tutorial demonstrates how to create a jQuery calendar with PHP and Javascript using a remote data source. Update! We have a newer version of this post that has a much better setup here: Create a jQuery calendar with AJAX, PHP, and MySQL
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |