Join Kevin Skoglund for an in-depth discussion in this video Project setup, part of Easy PHP Projects: Measurement Conversion.
- Throughout the upcoming chapters, we're going to be learning how to perform measurement conversion using PHP. I'm going to be focusing on a selection of primary measurement types. We're going to look at length and distance, area, volume and capacity, weight and mass, speed, and temperature. There are many, many other measurement types, but these six are the most common, I believe, so we're going to focus on those. Here's some examples of some of the other measurement types. You could have acceleration, density, energy, force, frequency, light, power, pressure, or torque, and there are, of course, many more besides even these.
As we'll discover, though, the same principles can be applied to any measurement conversion. Let's begin by setting up our project files. The first thing you want to do is identify where your web document root directory is. That is, where's the place that you can put your PHP files in order to bring them up in a browser? For me, on my Mac, that's going to be inside my user directory inside my Sites directory, and you can see I've already got some files in there. We're going to be going over those. Now, if you're using MAMP or WAMP or another package like that, you may have a different web document root.
You want to adjust so that you use your web document root instead. Inside my Sites directory, you can see that I've got another directory called convert, and it has three files in it. I'm going to open those up in project view inside my text editor. I'm using TextMate. Regardless of what text editor you're using, you probably can drag that directory on top of the icon for the text editor in order to open it up in project view. This is a feature that many text editors offer. If not, it's okay for you to open up as single files as well.
It just doesn't give you this nice menu over here to the side and tabs that let us navigate between the files, which we're going to be using. So let's take a look at what's in there. First, we've got index.php. That's the default page for this directory. By default, index.php is what should be loaded up automatically, and this is going to be our menu page that will let us select between different types of conversions. If you take a look, you can see that it's just basic HTML. You can pause the movie if you need to copy it down. Notice that it has a link here to the styles.css document.
We're going to be looking at that in just a moment, and then it's got a menu here of measurement types. You can see that inside each of these li's I have a link that will link to the different types. For example, length and distance, which links to length.php. You can see over here on the left that I've got that file here as well. We can take a look at that by looking at the other tab. I've also got placeholders for some pages that we haven't created yet. We'll come back and create those later, but we've gone ahead and given ourselves a menu as a jumping off point to each of the different types that we're going to be learning about.
Then if you click on length.php, you can see what a typical conversion page is going to look like. Again, it's basic HTML. It links to styles.css. It has a very similar structure except that now it has a form here. So inside the form, let's take a look at that. The form is going to submit to itself because its action is empty. It's going to be a post request, and you can see that I've got a div for entry here, another div for entry here, and inside both of those I've got a label that says from, an input area, that's a text field input for the from value, and a select option that let's me pick the units that I want to convert from and to.
So this will allow me to type in a value and choose a from unit and then also choose a to unit, and we'll use PHP to come up with the to value and populate that text area with that value. And then I've got a submit button at the bottom, and if we scroll past the closing form tag, you'll see that I've got a link here that just takes me back to the menu, which is index.php. Remember, you can pause the movie if you want to copy that down. These are also available in the exercise files. Before we take a look at styles.css, let's actually bring this page up in the browser since the styles will make more sense if you actually can see them first.
Let's open up Firefox. Again, you want to navigate to the web document root directory however that is that you get there to load up those pages. For me, that's localhost forward slash tilde Kevin Skoglund and then convert. Now, you may be able to just hit return at this point, or you may need to type index.php depending on how you've got things configured. If you're using a different package like MAMP or WAMP, then it's very likely that you'll leave out part of this name and use something different in order to navigate to the right directory.
Okay, so I'm going to hit return, and now we see our menu. Now, this is a collection of links inside li tags, but I intentionally didn't make them look like links. I made them look like buttons, so I provided styles that allow me to look at these as big buttons, and when I roll over them, you can see I get an orange highlight over each one, and the text color changes from being black to white at the same time. Now, if we click on Length and distance, we can take a look at that length page, and you can see what it looks like. So I'm going to convert from one number here, From Unit, which we haven't populated, and we'll pick the From Unit, we'll pick the To Unit, and then we'll use PHP to populate the value that it actually equals here.
And then we've got a submit button that's also styled like a button with the orange rollover and a link here at the bottom to take us back to the menu. Okay, now let's take a look at that CSS. Now, again, you can pause the movie to copy this down if you need to get it or it is in the exercise files as well. You can also feel free to style it completely differently from mine or not at all. You can see that I've got a basic declaration for my HTML and my body tags. I'm setting a background color of gray and setting the font that I want to use. Then I've got that main content div on every page, which I'm making 500 pixels wide, and I'm centering using the margin and putting a little bit of padding up at the top.
Then I'm styling my h1 with a different font face, and then I've got my menu page. That's that index.php and all the buttons. So I'm going to tell the ul that it should have a list-style-type of none so it won't have little dots in front of each one, giving a little bit of margin. The li's are going to have a height of auto and a little bit of margin at the bottom of each of those. And then I've got my links, and that's where most of the styling takes place. I'm telling them not to look like regular links, not to underline themselves, for example. The text should be black.
They should display as block, which will allow us to set the width down here to a fixed width so they're all the same width. I'm giving them a little bit of padding, and I'm saying that their background should be white with a black border around it. But then when you hover over it, the text color changes to white, and the background changes to orange. And then let's scroll down a bit further, and we'll see the conversion forms. This is what we're seeing on length.php. I'm styling the form label, the input of type test, the select option, the submit button here, and then you can see the hover state on that submit button.
This is very similar to what I did for the menu buttons that we just saw. Again, you can pause the movie if you want to copy this down, or you can ignore it altogether and style it your own way. Notice that at this point we don't have any PHP in these files whatsoever. It's just HTML and CSS. This is our starting place that we're going to use in the next chapter as we start to use PHP to perform measurement conversions.
Along the way, series designer Kevin Skoglund introduces coding strategies, refactoring techniques, and useful skills including dynamically generating form select-option values and formatting decimal numbers and scientific notation.
- Converting length and area measurements
- Using functions to avoid repetition
- Refactoring to produce simpler code
- Converting volume and mass
- Generating form select-option values dynamically
- Formatting scientific notation
- Converting speed and temperature