Join Kevin Skoglund for an in-depth discussion in this video Create the form, part of Easy PHP Projects: Time Zone Conversion.
- [Voiceover] In this chapter, we'll create a new PHP project which will convert a given date from one timezone to another time zone. Let's start by creating the project skeleton and the basic HTML form that we'll need to get started. You can see I've added a new directory called timezone_calculator to my Sites directory. This is also found in your exercise files if you have access to those and inside are two files, index.php and styles.css We can open those up in TextMate's project view to take a look at those.
index.php is a basic HTML page. Very similar to what we've been working with. The title is Time Zone Calculator. It loads in styles.css It has a div with id min-content. An h1 tag that says Time Zone Calculator and then a form which will post to itself. That's what having an empty action means and then I've got some HTML here with dl tags, dt and dd inside and that just keeps things nicely lined up for me. I'm going to have an area where we can input the From Time inside a text input.
I'm going to call that from_time. It's going to have no value to start with then I'm going to have From Time Zone. That's the time zone we're starting in and I'm going to have a list of options for that. Select option list of the From Time Zone inside there and it's going to be called from_tz then I'm going to have the To Time Zone. That's the target time zone that I want to convert to. It's also going to be a select option list just like this one was and it's going to be called to_tz and then at the bottom, I'll have my controls or I have a submit button with the name of Submit and a value of Submit.
It's a basic HTML form. Let's take a look at the styles real quick. I've got the basic styles that I've been working with before. Same kind of thing. I made it a little bit wider. The other ones were 500 pixels wide. I just bumped this up to 600 to give us a little more room and then I've got some similar styles here for the form, form select option. I'm setting the font to the spacing. I told the form select that it should be limited to 300 pixels and that's just because some of those time zones get quite wide and so I just wanted to make sure that that select stayed kind of small even though the options get large.
And then I've got css for my controls. That's that hover state over that submit button and finally, some styles for the dl, dt and dd tags so that they end up with the right margins and padding and spacing and with everything that they need. Let's take a look at what this looks like to begin with. Let's go into Firefox and let's load up localhosts and then it's going to be for me, kevinskoglund and then timezone_calculator /index.php so this is what it looks like from the start.
Got a place where we can enter our From Time in this text area. We can choose our starting time zone and we can choose the time zone that we want to end with. Now, right now it's just a raw HTML form. It doesn't actually do anything. It doesn't even have the select options there but this gives us the skeleton that we need to get started. Now, you may be wondering, why am I just using a text input on the From Time? What I'm planning is to take advantage of the fact that the date time class is very flexible in PHP. It can accept almost any string that we pass to it and figure out what that date and time is.
That's part of how string to time works and it's part of how the date class works when we create a new date. Now, it's not perfect and it's certainly possible to enter garbage into here but at least gives us something very quickly that we can work with. We can just enter a valid string for the time and we have a time ready to go. Later, we'll improve that a bit and actually have some select options where a user can pull down and select the date that they want. Now that we have our basic HTML form, the next step is for us to populate those select options for the time zone.
We've already done this a couple of times and you can very easily just take the code that we've used in the past and drop it in right here and drop it in again right here but we would be repeating ourselves if we did that and we put all that code in their twice. Instead, I think it's calling out for a function and that's what we'll do in the next movie.
- Understanding the history and purpose of time zones
- Setting a default time zone in PHP
- Using the PHP DateTime and DateTimeZone classes
- Working with daylight saving time transitions
- Allowing users to select their time zone
- Displaying times in the user's preferred time zone
- Calculating the current times of major cities
- Creating a complete time zone calculator