You are Here:Home>>Old Posts>>Creating an event registration application in PHP – Part 1: Building the front end

Creating an event registration application in PHP – Part 1: Building the front end

Carlos Pinho
By | 2008-02-15T20:27:37+00:00 Feb 15, 2008|Old Posts|

Meetings, conventions, and conferences are an important part of almost every profession. In recent years, attendee registration has moved to the Web. In this article you’ll learn how to create a multipurpose catalog page that displays the different seminars for each day of the event. You’ll also learn how to create a basic event registration application in PHP using a basic Dreamweaver server behavior. This application consists of three pages:

  • Presentations.php: Before site visitors can decide which program to register for, they need to see what is offered on each day. This page dynamically displays presentation information for each day of the event.
  • Register.php: This page contains a basic form for gathering name and e-mail address from the registrant; it inserts a new record into the MySQL database. After the record is inserted the page is redirected to confirm_register.php.
  • Confirm_register.php: A simple page that let’s the registrant know the process is complete.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS3

Sample files:

Prerequisite knowledge

You’ll need to know how to set up a dynamic site in Dreamweaver and also have PHP and MySQL set up on your development system. You’ll also need to understand how to restore a SQL file to a MySQL database.

Getting started

Before you begin building the application, examine the database tables that are employed and also verify that the database connection is properly set up in Dreamweaver.

Note: It’s a good idea to have your dynamic PHP site already set up at this point and have unpacked the sample files into the local root folder.

Understanding the database schema

The database that accompanies this article is a relatively simple one with three tables: presentations, registrants, and admin. Only the first two tables come into play during this exercise; the admin table is used in conjunction with a related article that describes how to set up an administrative site for event registration.

The presentations table maintains information for the various sessions held during the event. The presentations table includes data columns for storing the presentation’s name, a short description and a longer description (see Figure 1). There are also columns for the date and time of the talk, its duration and the day of the event (1, 2, 3, and so on) on which the presentation is given. Speaker details, such as name and file name for a picture, round out the table schema.

The presentations database schema

Figure 1. The presentations database schema

In comparison, the registrants table has far fewer data columns. Only columns for the registrant’s first name, last name, e-mail address, and event name are included. You could—and probably would—require a much more robust set of data columns for an actual application, but this structure should give you a good sense of the type of information you can gather.

The SQL file for the Subscriptions database is included in the sample files download, in the database folder. You can recreate it on your test server through any number of utilities including phpMyAdmin, MySQL Control Center, or MySQL Administrator.

Making the database connection

After you’ve established your database, it’s time to create a connection to it in Dreamweaver. To do so, follow these steps:

  1. Choose Window > Databases.
  2. Click Add (+) and choose MySQL Connection from the menu.
  3. In the MySQL Connection dialog box appears, do the following (see Figure 2):
    • Enter the name of your new connection in the Connection name field (for example, connEventReg).
    • Enter an IP address or MySQL server name in the MySQL server field. If you’re working with a local development system, enter localhost.
    • Insert your user name and password in the appropriate fields.
    • Click Select to display the available databases; choose the one you want from the list. The Dreamweaver database connection

      Figure 2. The Dreamweaver database connection

  4. Click Test to verify the connection and then OK if the connection is successful.

With your PHP dynamic site, MySQL database, and Dreamweaver connection all established, you’re ready to build the first page of the application.

Displaying the event presentations

To help your registrants decide which days of your event to attend, you’ll want to display the session details. This information is stored in the presentations table of the database and can be called up dynamically. In this exercise, you’ll create the necessary recordset, insert the dynamic data, and set up links to display what’s happening on the various days.

Establishing the recordset

The first task is to add the recordset to the page. This recordset pulls data from the presentations table and is filtered to include only the sessions on a single day. A URL parameter is used to create the filter.

  1. Choose File > Open. When the Open dialog box appears, navigate to the event_reg subfolder of the sample files folder and open presentations.php.The presentations.php page has a few placeholders already set up to help guide you. Before you can take advantage of them, you’ll need to create a recordset.
  2. From the Bindings panel, choose Add (+) and select Recordset from the list.
  3. When the Recordset dialog box opens, make sure you’re in Simple mode and enter an appropriate name for the recordset in the Name field (for example, rsPresentations).
  4. Choose your data source connection from the Connection list; mine is called connEventReg.
  5. Select the table from the Table list, like presentations.
  6. Leave all the columns selected.For your own application, you can, of course, limit the data columns to just those used.
  7. Set the filter to the following setting:
    • PresentDay: =
    • URL Parameter: PresentDay
  8. From the Sort lists, choose PresentDate Ascending. Do not click OK just yet.Although you’ve completed the Simple view of the recordset (see Figure 3), you’re not quite done. To make sure that the first day’s events are displayed when the page loads initially, you’ll need to change the default value of the URL parameter in the Advanced Recordset interface.Establishing the recordset

    Figure 3. Establishing the recordset

  9. Switch to Advanced.
  10. In the Variables section, click Edit. When the Edit Variables dialog box appears, change the Default value from -1 to 1. Click OK to close the dialog box.Setting up the proper default value

    Figure 4. Setting up the proper default value

  11. Click OK once more to close the Recordset dialog box.

Now that the recordset is ready to go, you’re all set to bind the dynamic data to the page.

Binding the data

Inserting the dynamic data to the page is pretty straightforward and made even simpler with the placeholder elements to show you the way. The only tricky part is formatting the date and time properly; to accomplish this, you’ll need to add a bit of hand coding to the page.

  1. From the Bindings panel, expand the Recordset (rsPresentations) entry so you can see all the available data columns (see Figure 5).Available data columns

    Figure 5. Available data columns

  2. Select the placeholder letter [X] in the main heading. From the Bindings panel, choose PresentDay and click Insert.This action allows the page to indicate which day of the event is currently being displayed.
  3. Select the placeholder letter [Presentation name] in the main heading. From the Bindings panel, choose PresentName and click Insert (see Figure 6).

    Binding dynamic data to the page

    Figure 6. Binding dynamic data to the page

  4. Repeat step 3 with the remaining placeholder text elements:
    • [Short Description]: PresentDescShort
    • [Date and time]: PresentDate
    • [Speaker Name]: PresentSpeaker
    • [Full Description]: PresentDescFull
  5. At this point you can make the image dynamic. Double-click the placeholder image; when the Select Image Source dialog box appears, choose the Data Sources option. From the Field list, choose PresentPic. In the URL field, prepend the code with the following path: images/. Click OK to confirm your choices.Specifying a dynamic image

    Figure 7. Specifying a dynamic image

    Next, set up the proper date and time formatting. As I mentioned, this will require a bit of hand-coding.

  6. Select the dynamic data {rsPresentations.PresentDate} and switch to Code view. Change the selected code to include the following sections in red:
      <?php echo <span style="color: red">date("l, F j, Y, g:i a",</span> <span style="color: red">strtotime(</span>$row_rsPresentations['PresentDate']<span style="color: red">))</span>; ?>

    Dreamweaver does not provide a binding panel format for date and time with PHP, so you have to add it yourself. There are two functions applied to the recordset row: date() and strtotime(). The innermost function, strtotime(), converts the string stored in the database to a time format that PHP can manipulate. The date() function handles the formatting. At runtime, these single letter formatting codes will result in output like this: Saturday, March 1, 2008, 9:00 am. For more information about date and time formatting, see the PHP online manual.

  7. The next step is to set up the Day 1 and Day 2 links. Select the text Day 1 and, in the Property inspector, enter presentations.php?PresentDay=1 in the Link field. Next select Day 2 and enter presentations.php?PresentDay=2 in its Link field.Here, each link is set to the current page with a different value for the URL parameter PresentDay, which, you’ll recall, was used to filter the recordset.
  8. Choose File > Save.

The core of the dynamic information is all in place (see Figure 8).

All dynamic data is inserted

Figure 8. All dynamic data is inserted

Next, you’ll make sure you get all the data you need.

Repeating the records

At this point, the page would display a single record. For the final phase, you’ll add a Repeat Region server behavior to display all the records in the recordset.

  1. Select all the dynamic data from rsPresentations.PresentName through rsPresentations.PresentDescFull and include the paragraph following.When you select the data to be repeated, you generally want to make sure to include a bit of space after the day so that each record will be given its proper weight. You could, of course, enclose everything in a <div> tag and handle the separation through CSS.
  2. From the Server Behaviors panel, click Add (+) and choose Repeat Region from the list.
  3. When the Repeat Region dialog box appears, make sure that rsPresentations is displayed in the Recordset list and choose Show: All records (see Figure 9). Click OK.Setting up a repeat region

    Figure 9. Setting up a repeat region

  4. Choose File > Save.
  5. To test your page, press F12 to preview in your testing server. After you’ve looked over the info, click the Day 2 link to review the second day’s sessions (see Figure 10).

Previewing the page

Figure 10. Previewing the page

Naturally, you can add as many days to your event listing as needed. Next, you’ll create the registration page.

Creating the registration page

The registration page makes the most of the Dreamweaver Insert Record server behavior. A simple form is used to gather the needed information.

  1. Choose File > Open. When the Open dialog box appears, navigate to the event_reg folder of the sample files folder and open register.php.The register.php page already has the form and primary form elements in place. If you select any of the existing form elements, you’ll notice that they are named the same as the corresponding data columns in the registrants table. There’s even a hidden form element called RegEvent with the value for this event, Realty Conference. The key action now is to add the Insert Record server behavior.
  2. From the Server Behaviors panel, click Add (+) and choose Insert Record from the list.
  3. When the Insert Record dialog box opens, do the following:
    • Make sure that the Submit values from list is set to form1, the name of the current form.
    • From the Connection list, choose connEventReg.
    • From the Insert table list, choose registrants.

    Because all the form elements have the same name as the data columns in the registrants table, Dreamweaver automatically makes the assignments (see Figure 11).

    Setting up the Insert Record server behavior

    Figure 11. Setting up the Insert Record server behavior

  4. Click Browse and choose confirm_register.php for the After inserting, go to option. Click OK.Dreamweaver writes out the server side code indicating the entire form is now dynamic (see Figure 12) and you’re good to go!The registration page is complete

    Figure 12. The registration page is complete

  5. Choose File > Save.
  6. To test your page, press F12 and enter data for a new registrant in your browser. You’ll need to examine the database records using a tool like phpMyAdmin or MySQL Query Browser to verify the data has been added properly.

The confirm_registration page is a simple “thank you” page that informs the registrant that his information has been received. Your basic event registration application is now complete.

Where to go from here

There are a good many things you could do to build upon this event registration application:

  • You could add detail links to the records on the presentations.php page so that the site visitor could get more information about each presentation or speaker.
  • The registration.php page could be enhanced by adding an e-mail confirmation to the process; details for how to accomplish this task are described in the upcoming DevNet article Subscribing and Unsubscribing with PHP.
  • If your event is a commercial venture, you might want to add shopping cart functionality through an extension such as eCart from WebAssist.
  • You’ll probably also want to add online database management capabilities, as outlined in the upcoming DevNet companion article, Administering Event Registration in PHP.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author

Joseph Lowery’s books about the web and web-building tools are international bestsellers, having sold more than 400,000 copies worldwide in eleven different languages. His most recent book is the Dreamweaver CS3 Bible. Joseph is the author of the recently published CSS Hacks and Filters as well as the co-author of Dreamweaver 8 Recipes with Eric Ott. A well-known speaker, he was presented at Adobe (formerly Macromedia) conferences in the United States and Europe as well as user groups around the country. Joseph is currently the Vice President of Marketing for WebAssist.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.