New terms from treehouse – Build a Simple PHP Application Part 2 – Integrating with PayPal, Working with Functions, and Wrapping up the Project

Integrating with PayPal

Creating a PayPal Account

This makes things wayyy easier than doing it yourself. Also, when someone adds something to their cart, you want it to stay there as they navigate the site. This is called persistence. Paypal offers a shopping cart service for this as well.

Configuring Tax and Shipping Rates

In PayPal, under My Account > Profile you can specify your business’s tax id. Under My Money you can add a bank account. You can also set up your sales tax under My Selling Tools. You can also set up shipping costs and options based on weight or number of products sold.

Creating PayPal Buttons

We’ll now make some buttons to add items to the paypal shopping cart. Under My selling tools > Paypal buttons > Update > Create New Button. Choose shopping cart for the type, so it adds the item to the cart. Give it a name, price and an item id, which should match the key from our associative array of products. Under Customize button you can add a drop-down for shirt sizes. When you’re done, click Create button. This will give you some code you can paste into your site.

Screen Shot 2014-12-12 at 4.51.05 PM Screen Shot 2014-12-12 at 4.52.11 PM

This form element has a POST method, and its action is set to paypal’s servers. The target attribute opens the page in a new window or tab. The hidden inputs aren’t displayed on the page but do get submitted with the form. The hosted_button_id is paypal’s id for our red shirt, to help prevent fraud. They then have a table for the drop down. The input with the name on0 lets us know this is the first drop-down. The input with os0 stands for the selection in that drop-down. We’ll add some markup like a label to make things more semantic. They give you an image type input for your submit button, but we’ll instead use the normal submit type with our own text. The last img element is used for tracking. It’s a 1×1 px transparent image that the user can’t see. When the page loads, the image is still requested from the server, which records that request. We don’t need this, so we’ll remove it.

Screen Shot 2014-12-12 at 4.58.18 PMNow we have this. When you click Add to cart, it will take you to the paypal cart page.Screen Shot 2014-12-12 at 4.58.18 PMScreen Shot 2014-12-12 at 4.59.51 PM

Screen Shot 2014-12-12 at 5.00.59 PM

Now we need to replace some of the info in that form with info from our product array, and understand the balance between security on paypal’s end, and ease of use on ours. If we try adding a new shirt size via html, like X-large, paypal will accept it. It will also accept if we decide to change the item_name via a hidden input element’s value.

Screen Shot 2014-12-12 at 5.06.41 PM Screen Shot 2014-12-12 at 5.00.59 PM

However, this means any visitor to our site can change the html and mess with things and paypal will accept it. The only value that doesn’t have this flexibility is price.

Let’s copy the hosted_button_id into our product array.

Screen Shot 2014-12-12 at 5.10.42 PM

We now need to make a button for each item in our catalog. To make it easier simply go back to paypal and click action > create similar button. Once you do that, copy the paypal id for each into your array.

Including the Products Array

Now we’ll make one page that can act as the details page for each of our 8 shirts. First we’ll make a file called shirt.php, and link to it in our shirts.php file. The format will be the same, only the data will differ and we have that in our products array. Since both pages need the array, it’s a good idea to put that in it’s own file so that both can link to it with an include.

Now, we need to link to the right shirt details page address. We can do this by adding a ? to the shirt.php link, then a variable name (in this case we’ll choose id, remember it’s arbitrary), then a value, which will be the shirt’s product_id from the array.

Screen Shot 2014-12-12 at 5.29.08 PM

However, what we need it to do is pull that from each array in the array, so we don’t need to manually write it each time. Right now in the foreach loop we don’t have access to that, only the main array, not the sub ones.. We can load the key of each element into a variable using the =>. This will give us two working variables in the foreach loop, one with the key and the other with the value.

Screen Shot 2014-12-12 at 5.31.22 PM

Screen Shot 2014-12-12 at 5.30.35 PM

Screen Shot 2014-12-12 at 5.28.06 PM

Remember the key name of each array was the number we gave, 101, 102, etc. When you click on the shirt, it takes you to the appropriate page.

Screen Shot 2014-12-12 at 5.38.07 PM

Building the Shirt Details Page

For the shirt.php page, we can access the id from the pages web address using the $_GET variable. First, we’ll load that into a regular php variable. We can then choose the array we want by putting it’s key in square brackets after the main array. Rather than typing a specific number, we’ll use the variable declared above, which is set by the id in the url. $product_id is the key, $product is the array itself.

Screen Shot 2014-12-12 at 5.43.33 PM Screen Shot 2014-12-12 at 5.43.24 PM

If you click a different shirt, you’ll get a different array.

Now, to set up the page. Like the other pages, first we’ll set the section and page variables and include the header and the footer. Then, we’ll set up the html. Note how we dynamically pulled in the name of the shirt.

Screen Shot 2014-12-12 at 5.51.49 PM

We’ll dynamically add the picture as well, using php for it’s src and alt attributes.

Screen Shot 2014-12-12 at 5.56.41 PM

Now to do the details on the right.

Screen Shot 2014-12-12 at 6.00.15 PMScreen Shot 2014-12-12 at 6.00.20 PM

Finally, we’ll pop in the form for the paypal button. We need to add some php so that the button is customized for each shirt.

Screen Shot 2014-12-12 at 6.02.07 PMScreen Shot 2014-12-12 at 6.02.20 PM

Redirecting Invalid Shirt ID’s

What if someone manually changes the web url to an invalid id? We can check this using a conditional at the top of the page, and redirect them back to the shirt.php page if it’s invalid. Let’s do a quick test and echo out our $product and $product_id variables. You can see if the url is invalid, there is still a $product_id, but $product comes out as null, since there’s no array for it.

Screen Shot 2014-12-12 at 6.07.38 PM Screen Shot 2014-12-12 at 6.08.49 PM Screen Shot 2014-12-12 at 6.07.30 PM

We’ll start with a conditional with the isset function to make sure that the $_GET variable named id exists. If it does, it’ll set the product_id variable. Next, we’ll check if our main products array has a shirt with that id in it. If it does, then it sets the $product variable on this page. Using else blocks, if there is no id at all, it will say that message. If there is an id but it’s invalid, then that message will be displayed.

Screen Shot 2014-12-12 at 6.17.58 PM

We can write a second conditional after that that checks whether $product has been set. Due to the previous code block, if it was, we know it was a valid ID.

Screen Shot 2014-12-12 at 6.19.38 PM

The negation operator ! let’s you check if something is NOT something. Here, we make it so that if the $product variable is not set, it redirects back to teh shirts.php page using the header variable.

Screen Shot 2014-12-12 at 6.24.04 PM

Adding Available Sizes

We can customize the shirt sizes for each shirt by adding a new value to our second dimension array, which will actually be another array, a third dimension array.

Screen Shot 2014-12-12 at 6.27.10 PM

Now we can modify our form to use that array instead of the static html. We will use a foreach loop like we did before for the shirts page.

Screen Shot 2014-12-12 at 6.29.58 PM

The shirt sizes listed on the page will now update dynamically based on what is listed in the main product array.

Working with Functions

Introducing Functions

Now to update the main landing page. There are some shirts here, but right now they’re just using static html, rather than the stuff we set up for the shirts page.

Screen Shot 2014-12-13 at 4.43.55 PM

First, we’ll include the product array right above it. Then, we’ll rewrite the list to be generated by a foreach loop. However, we’ve already done something like this before, so it might be better to set up a function to use. Functions usually perform a small, specific task, and don’t do anything until they’re called. There are three parts to a function: 1. Its name. 2. The argument list – a list of values you can tell it you will pass it when it executes it code. 3, It’s return value. In the example below, the name is count, the argument (which you put in parentheses after the name) is the array, and the return value it gives you is the number of elements in the array. Other examples include isset and date.

Screen Shot 2014-12-13 at 4.54.25 PM

User-Defined Functions

Here, we’ll make a function that mimics the count function. First, write the function command, then its name. Then, parentheses with the argument list, in this case $array. We can then use that variable $array in our code. Then, curly brackets which will surround the code block that will be executed when the function is run. Note that variables created outside of a function are not available inside of it.

Screen Shot 2014-12-13 at 5.01.54 PM

Now to make the code to be run. We need it to count the items, so we’ll make a variable and add 1 to it during each run of the loop, which will give us the total. Before that we’ll make a variable for count and set it to 0. Note that this $count variable is completely unrelated to the $count one outside of the function.

Screen Shot 2014-12-13 at 5.04.37 PM

To return this value back to the main code with the return command. Then in our main code we can replace count() with our mimic_count function.

Screen Shot 2014-12-13 at 5.06.00 PM

Screen Shot 2014-12-13 at 5.06.40 PM

Creating the Shirt Display Function

Here’s the gist of the function we need here:

Screen Shot 2014-12-13 at 5.12.30 PM

Since we need this in both shirts.php and index.php, we’ll put it in an include file, and since it will only be used with the products array, we can just put it in there. We’ll copy over the code from shirts.php that already does this. Rather than returning a bunch of echo’d things, it’s better to use the technique before where we make a blank variable and add things to it with concatenation.

Screen Shot 2014-12-13 at 5.18.24 PMScreen Shot 2014-12-13 at 5.19.01 PM

Now to use this function in our pages. Remember that we need to pass in the arguments as well. What’s nice is that now whenever we need to have a list items of shirts, we can just use this function.

Screen Shot 2014-12-13 at 5.23.24 PM Screen Shot 2014-12-13 at 5.23.16 PM

Displaying Only Four Shirts

However, on the home page we only want four shirts displayed. First we’ll make an element called total_products, and set it equal to the number of elements in the array, using the count function so the number will always be accurate. We’ll create a second variable called position and set it 0, which we’ll use to keep track of how many items we’ve looped through. In our foreach loop, we’ll add one to it each time we loop.

Screen Shot 2014-12-13 at 5.28.59 PM

Now we’ll add a conditional to only add the shirt if it’s one of the last 4 elements in the array. The logic will go like this – we can subtract the total number of shirts from the position. When the result less than 4, we know we’re on the last 4 shirts in the array. Total products = 8, position = 5, remaining = 3. So, the math will be total products – position < 4.

Screen Shot 2014-12-13 at 5.34.51 PM

Now, let’s also make it so it adds to a string like we did before. We’ll make an empty variable called list_view_html before the foreach loop. In the loop we’ll have it concatenate to that variable each time it loops. Then, we can echo the variable containing the for list items outside the loop.

Screen Shot 2014-12-13 at 5.37.56 PM

Screen Shot 2014-12-13 at 5.39.21 PM

If we had a ton of shirts, looping through each one like this to find the last four might not be the most efficient approach, but this is okay for now.

The last thing we’d like to do is have the shirts appear in reverse order, so the most recent one comes first. To fix this, we’ll modify the line of code with the concatenation and have the shirt get added to the beginning of the variable.

Screen Shot 2014-12-13 at 5.41.08 PM Screen Shot 2014-12-13 at 5.41.05 PM

Wrapping Up the Project

Validating Contact Form Data

Now to set up the email that gets sent when you fill out the form. First we need to validate the form data we receive. We want to make sure that each field has a value entered, starting with name.

Screen Shot 2014-12-13 at 6.11.00 PM

But what if someone just puts spaces? There’s a php function called trim you can use which will remove the white space at the beginning and end of the text. We can put it in our conditional, but then that doesn’t help us if we need a trimmed name later in the code.

Screen Shot 2014-12-13 at 6.12.51 PM

Instead, let’s trim it up top when we set the variables.

Screen Shot 2014-12-13 at 6.14.39 PM

Next we’ll make the conditional return false if the name, email, or message are blank, using OR.

Screen Shot 2014-12-13 at 6.17.37 PM

If you submit any of those blank, it now takes you to a new page with just the echo message.

Screen Shot 2014-12-13 at 6.18.30 PM

Ok, now we need to protect our form from spam robots. 2 kinds 1. Fill out all forms hoping they’ll be displayed on a website somewhere, like a comments section. 2. More harmful – they have a way of using your form to send out emails to thousands of other people. This is called the email header injection exploit. There it’s described and a code snippet is provided to protect against the attack. Basically, it’s a foreach loop that goes through each post submission to see if it contains a malicious value, and if it does, uses exit to shut it down. We’ll add an error message as well with echo.

Screen Shot 2014-12-13 at 6.26.43 PM

To combat the first kind of spammer we’ll use a spam honeypot field. The spammer fills out every field in the form, so we’ll add one our normal visitors can’t see with a normal name and id like address, then hide it with display:none;

Screen Shot 2014-12-13 at 6.30.28 PM

Then up top, we’ll add a conditional to see if that field has a value, and if it does display an error message and exit it.

Screen Shot 2014-12-13 at 6.32.42 PM

Finally, if there’s an issue with the CSS and a real user accidentally sees it, we’ll add a note to let them know to leave it blank.

Screen Shot 2014-12-13 at 6.33.48 PM

Using a Third-Party Library

A third-party library is basically a set of include files that other people maintain. We’ll use phpmailer to send our emails. The file we need is class.phpmailer.php, which you should copy over to your project into the inc folder, in it’s own folder. Each library you use should get its own folder in the inc folder.

The require_once command is like include, the difference being that if there’s an error, include will give an error but still execute the rest of the code. But, require_once will instead give an error and execute no more code. There’s require, require_once, include, and include_once. The once ones are good if you only want a file to be loaded once, like if it contains functions or sends emails.

Screen Shot 2014-12-13 at 6.44.49 PM

Next we’ll create an object from phpmailer named $mail. This has a method that let’s you validate email addresses. To access an object method or property, first write the objects name, then ->, then the method name, the argument list in parentheses, then curly brackets for the code.

Screen Shot 2014-12-13 at 7.00.06 PM Screen Shot 2014-12-13 at 7.00.01 PM

Sending the Contact Form Email

Now, we’ll use code from the phpmailer example file to set up our email.  Notice that we’re using the -> to set different methods for our $mail object.

Screen Shot 2014-12-13 at 7.05.58 PM

Now, a lot of what we need is already in the variables created from the form submission, so we’ll go through and replace those out. AddReplyTo adds new reply to names to the email. Since we want to reply to the person who filled out the form, we’ll use the variables. SetFrom let’s us set who is sending us the email, in this case once again the person who filled out the form. Since we have that, we don’t actually need the AddReplyTo. The $address variable let’s us set the recipient of this email, in this case us, which we’ll then plug into the AddAddress method.

Methods have parentheses after their names for the argument lists, properties do not. For the Subject property, we’ll edit the message and concatenate the person’s name to the end of it. This makes things more clear and prevents each email from having the exact same subject and getting them all grouped in the same convo. The msgHTML() method sets the body of the email, and we’ll pass in our $email_body variable.

The conditional at the end actually sends the email, calling the method name within it. Here’s how this works. PHP calls the send method, which should send the email, and will return a value of true or false. Since it’s what our conditional is checking, if it’s true, the if block will execute. To check if it did not work we can use the negation operator !.

Screen Shot 2014-12-13 at 7.17.05 PM

If there’s an error, we’ll display a message and stop our code from executing. ErrorInfo doesn’t have parentheses after it so we know it’s a property and not a method.

Screen Shot 2014-12-13 at 7.19.14 PM

The final thing to do is to modify the email body so it uses html break tags instead of php ones.

Screen Shot 2014-12-13 at 7.19.59 PM

If you don’t use a separate mail server, it will use your sites server to send the email, which isn’t recommended.

Deploying the Site

In Paypal, under my selling tools you can upload your logo to your cart page. You can also have it redirect back to your site once the transaction is complete. We’ll make a receipt.php page for that. $section can be set to none, because we don’t need anything underlined in the main nav.

Screen Shot 2014-12-13 at 7.29.30 PM

Now, we need to make the cart picture in the nav actually link to the cart. It’s under paypal > my selling tools > paypal buttons. We can make this into one link using GET variables using a ? to start, then variable=value, then & to add each new one.

Screen Shot 2014-12-13 at 7.31.41 PMScreen Shot 2014-12-13 at 7.32.38 PM

We can now post that link in our header file. Make sure to escape the ampersands with &amp;. The link now works.

Now, load up your site to your server! It’s good to go.

Finishing PayPal Configuration

You can customize your payment page under my selling tools.

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