New terms from treehouse – Build a Simple PHP Application Part 1 – Getting Started with PHP, Creating the Menu and Footer, Adding a Contact Form, and Listing Inventory Items

Getting Started with PHP

echo is an example of a php command.

Client-Side vs Server-Side

The server receives the php code from the client side browser, runs the code, then generates html that it sends back to the browser.

Screen Shot 2014-12-10 at 3.50.25 PM

php has a date command you can use to display the server time. Each time you refresh the page, the time will update. Note that if you view the source of the page, there’s no php code, only the html that the php generated.

Screen Shot 2014-12-10 at 3.52.54 PM Screen Shot 2014-12-10 at 3.52.32 PM


Installing PHP

Since PHP is a server-side language, we need to have a server that can execute our PHP code before we can view it in a browser. Any computer can act as one. For mac, the easiest way is with a package called MAMP (Mac, Apache, MySQL, PHP). Apache is web server software commonly used to run PHP.

After installing, before you start servers, go to Preferences > Ports > Change the port for Apache to 80. Then, click start servers. localhost is a special address for your computer, it’s the root of your local web server. Under Applications > MAMP you’ll find the htdocs folder. Files in there will be available in your localhost web address. It’s worth adding this as a link in the finder siderbar by dragging it over. This is referred to as the htdocs directory.

When you go to localhost, you’ll see an index of the files you’ve placed there. Click on the on you’d like to view.

Screen Shot 2014-12-10 at 4.21.52 PM


Your First PHP File

Now to start on the site. We’ll start by adding the basics. For the copyright year, we can use the echo and date commands to make sure it’s up to date.

Screen Shot 2014-12-10 at 4.28.23 PM Screen Shot 2014-12-10 at 4.28.28 PM

Remember, the php gets executed on the server and then the server sends html to the browser, so when you inspect the source you’ll only see markup.

Screen Shot 2014-12-10 at 4.29.45 PM


Creating the Menu and Footer

Starting the Project

If you upload an index.html file, localhost will open that by default, rather than listing out the things current in the htdocs directory. Note that if we try putting php in the index.html it won’t work. This is because it didn’t have the .php extension, so simply change that to fix it.

Screen Shot 2014-12-10 at 4.37.55 PM

If you have an error, the page actually won’t load and will give you an error screen or white page. php is much less forgiving than html.


Including the Header

Let’s make a new page, contact.php. With static html we’d have to copy paste, but this isn’t effective if we need to change something, as we’d then need to change it across all pages manually. We’ll make a new file to contain the header. This is called an include file, as these are included in other files. It’s a good idea to put them in their own folder, usually called inc or includes. You can then call that file using the include command, which takes the file path. This makes it wayyyyy easier to maintain the update file.

Screen Shot 2014-12-10 at 4.45.47 PM


Including the Footer and Adding Additional Pages

Let’s make an include file for the footer. We can now include the footer and header.php files in all new pages we make. It’s super easy to update the main nav links now, as we only need to do so in the header.php file, rather than in the html of each page.


Using Variables for the Title Tag

Note that variable names are case sensitive. We’ll change header.php so that it echos the $pageTitle variable, then declare that variable on each page prior to including the header.php file.

Screen Shot 2014-12-10 at 4.59.32 PM Screen Shot 2014-12-10 at 4.59.19 PM


Adding Active States to the Navigation

Adding the on class to our nav links will underline them to let us know what page we’re on. Rather than adding the html for each one, we’ll use a variable.

Screen Shot 2014-12-10 at 5.20.38 PMScreen Shot 2014-12-10 at 5.24.35 PM


Adding a Contact Form

Creating Input Fields

For the form element, set its method attribute to post. Then, give the inputs a name attribute so later the server will know which input they were. We’ll use a table here since out form inputs are tabular data.

Screen Shot 2014-12-10 at 5.38.37 PM

Screen Shot 2014-12-10 at 5.39.01 PM


Working with POST Variables

You can specify to what php file the form will send its data to using the action attribute for the form element. Here we make a file called contact-process.php for it to link to. When we submit the form, it just seems to take us to that page. When a php file receives form data, it will store it in a special $_POST variable. If we add this to our page with var_dump, it will display the data it received.

Screen Shot 2014-12-10 at 5.45.13 PM Screen Shot 2014-12-10 at 5.46.26 PM

We can load these values into variables using the array’s keys. In this case the keys are the names we gave the inputs, so it looks like this is an associative array.

Screen Shot 2014-12-10 at 5.49.29 PM Screen Shot 2014-12-10 at 5.49.33 PM


Working with Concatenation and Whitespace

You can concatenate in php with a period. You can concatenate strings, variables, or both. A line break can be added with \n, but this will only appear in the page source, not in the browser. For that, you’d need to add a <br> tag.

Screen Shot 2014-12-11 at 2.49.14 PM  Screen Shot 2014-12-11 at 2.48.54 PMScreen Shot 2014-12-11 at 2.48.59 PM

Though you wouldn’t normally do this, we can wrap our code in some pre tags to see the whitespace in the browser that it normally wouldn’t display. Now, we also want all this info in one variable, rather than having to echo out the three lines. To do that, make a new variable and set it to nothing. Then, we’ll add each line by setting it equal to itself, concatenated to the info at the end.

Screen Shot 2014-12-11 at 2.53.26 PM Screen Shot 2014-12-11 at 2.53.20 PM


Redirecting After a Form Submission

Now, we can put the thank you page after someone submits the form in the contact-process.php page, but this can lead to some problems. If the person goes to another page after, but then uses the back button to go back it will ask them if they want to resubmit the form, which could send off another email.

Screen Shot 2014-12-11 at 3.03.41 PMScreen Shot 2014-12-11 at 3.03.46 PM

The best way to do this is to have php first send the confirmation email, and then redirect you to the thank you page. We’ll make a new file for the thank you page called contact-thanks.php, and copy the thank you page code over. Then, in the contact-process.php file, we’ll do a redirect using the header command, which is part of HTTP that defines how the server and the browser communicate before any html gets passed. The field we want to define is Location, which tells it to go look for a different page. Now, when we submit the form it takes us to contact-thanks.php, and if we hit the back button, it takes us back to the form, rather than trying to resubmit the data.

Screen Shot 2014-12-11 at 3.10.16 PMScreen Shot 2014-12-11 at 3.10.10 PMScreen Shot 2014-12-11 at 3.10.21 PM


Checking the Request Method

So we did this with three php files, but it’s a far more common practice to use just one with conditionals. First, we’ll set the action attribute in the form element to contact.php. This is the default behavior, it will be set to the page it’s on.

We can then copy the code from the contact-process file to the top of contact.php.

Screen Shot 2014-12-11 at 3.31.09 PM

We can check the request method using the special php variable $_SERVER, which is an array with multiple elements in it. The one we want to check is REQUEST_METHOD. Also, it’s good practice to add the exit command after the header command. This will stop any other php code from running, and redirect to the thank you page.

Screen Shot 2014-12-11 at 3.34.43 PM


Working With Get Variables

Now, we need the header to redirect to the thank you page, but we want that to be this contact.php page. To do that, add a ? at the en of its name, then any variable name, in this case we’ll use status, then an = sign and a value, in this case thanks.

Screen Shot 2014-12-11 at 3.40.10 PM

We can then use the $_GET variable to check for the value for that variable. If it is set to thanks, we’ll display the thank you message, and if not, it will display the form. Now, you also need to use php’s isset function to check if the status variable exists.

Screen Shot 2014-12-11 at 3.45.37 PM


Listing Inventory Items

Introducing Arrays

We could use variables to store the attributes of each shirt. We’ll need a lot for each one, its name, price, the sizes it’s available, etc. This would be a pain to manage, so we’ll use an array instead. An array is a variable that stores other variables. Each variable within it is known as an array element. Each element has an index that can be used to reference it.

To access the values in an array, put it’s name, then square brackets with the index you want.

php can retrieve the number of elements in an array using the count function, which takes the arrays name as its argument. The foreach command lets php execute a block of code for each element in the array. It takes the array name, then as, then a variable name that each element will be set to when it’s its turn.

Screen Shot 2014-12-12 at 3.10.39 PMScreen Shot 2014-12-12 at 3.10.49 PM


Mingling PHP and HTML

php code gets processed by the server, html gets sent directly to the browser. Basically, you can mix and match php and html to get the result you want.


Creating the Products Array

We’ll start by writing an array for the shirts. Note that you can put each element on a different line to make things easier to read.

Screen Shot 2014-12-12 at 3.22.32 PM

It’s good practice to write out the html you need, then work backwards for the php you need.

Screen Shot 2014-12-12 at 3.23.30 PM

Here’s how you’d do that with a foreach loop. It’s good to write the array name as plural and the variable after as as the singular.

Screen Shot 2014-12-12 at 3.25.39 PM Screen Shot 2014-12-12 at 3.25.37 PM

To add things to our array later, rather than having to go back and add it to the original array, simply write $arrayname[]= “new value”. The index assigned will be the next available one. It’s actually good practice to declare an empty array first, then each element with this method. Note that if you need to, you can specify a key inside the square brackets.

Screen Shot 2014-12-12 at 3.29.53 PM


Introducing Associative Arrays

You can use strings of texts for your keys. Arrays that do this as known as associative arrays. Think of it as a two column spreadsheet.

Screen Shot 2014-12-12 at 3.35.44 PMScreen Shot 2014-12-12 at 3.35.09 PM

Now, if you needed a lot of info on one country, you could write it like this:

Screen Shot 2014-12-12 at 3.37.13 PMScreen Shot 2014-12-12 at 3.37.27 PM

But, you could also write it like this. => always has to do with key value pairs in arrays in php.

Screen Shot 2014-12-12 at 3.40.41 PM Screen Shot 2014-12-12 at 3.40.19 PM


Nesting Arrays within Arrays

AKA a multidimensional array. Basically, you set the values of an array as arrays themselves.

Screen Shot 2014-12-12 at 3.48.25 PM Screen Shot 2014-12-12 at 3.48.02 PM

To access the second level array, simply use another set of square brackets.

Screen Shot 2014-12-12 at 3.49.19 PM Screen Shot 2014-12-12 at 3.49.50 PM

Here’s a more complex example involving a foreach loop.

Screen Shot 2014-12-12 at 3.51.57 PM Screen Shot 2014-12-12 at 3.52.32 PM


Displaying all Products

Now back to the shirt page. We’ll make a multidimensional array for the shirt data.

Screen Shot 2014-12-12 at 3.55.50 PM Screen Shot 2014-12-12 at 3.57.21 PM

Screen Shot 2014-12-12 at 3.56.48 PM

Now to tweak the html/php to get the info to display.

Screen Shot 2014-12-12 at 3.58.56 PM

Screen Shot 2014-12-12 at 3.59.43 PM


Understanding Whitespace

It’s only showing three shirts per row instead of four. The reason for this is the whitespace between the list items in the page source.

Screen Shot 2014-12-12 at 4.01.19 PM

To fix this, we’ll rewrite the code to have the html element be echoed out by php and concatenate them, which will leave no whitespace between them. We run into an issue though with echoing out a quotation mark for the href’s value.

Screen Shot 2014-12-12 at 4.03.51 PM

To fix this, you can use an escape sequence via a backslash.Screen Shot 2014-12-12 at 4.04.21 PM

Or, you can surround the text using single quotes rather than double ones. This is usually the easier option.

Screen Shot 2014-12-12 at 4.06.01 PM

For the image and alt parts of it, we’ll use a combination of single quotes and concatenation. Now, there are four rows, and if you look at the source there is no whitespace between the list items.

Screen Shot 2014-12-12 at 4.07.57 PMScreen Shot 2014-12-12 at 4.08.05 PMScreen Shot 2014-12-12 at 4.08.17 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s