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

New terms from treehouse – PHP Basics – What is PHP?, PHP Data & Structure, PHP Datatypes, PHP Operators, and PHP Conditionals and Loops

What is PHP?

PHP is a server-side web language, standing for PHP hypertext pre-processor. It’s html centric, meaning you can embed it directly into your html with code blocks. As a scripting language you can write and run scripts by adding .php to the end of a file and call it using the php CLI (command line interpreter). It’s a server-side language, meaning it uses embedded scripts in html, which make requests from the client side machine to the host site, which processes them and responds in html.

To open php code in html, use the <?php> tag. Close statements  with semicolons. In the example below, it would return Hello World!

Screen Shot 2014-12-09 at 9.42.11 AM

The server side process goes like this. Note that php is not interpreted by the browser, but by the server.

Screen Shot 2014-12-09 at 9.43.24 AM


PHP Basic Usage

The current state as of this video is 5.5. Start by renaming your file to index.php, In the example below we put some php inside a p element. So, when the php was interpreted by the server, we basically said we wanted it to return it as html.

Screen Shot 2014-12-09 at 9.51.02 AM Screen Shot 2014-12-09 at 9.50.53 AM


PHP Data & Structure

PHP Variables

PHP variables always begin with a dollar sign, followed by a letter or underscore (not a number), then followed by a combination of underscores, letters or numbers. Note that the variable name is case sensitive. We’re going to add some variables at the top of the document, before the DOCTYPE html tag. Note that on a single line of php, you don’t actually need to end it with a semicolon.

Screen Shot 2014-12-09 at 10.05.17 AM Screen Shot 2014-12-09 at 10.05.20 AM

Like most languages, in php, the order of operation goes from top to bottom,


PHP Statements and Comments

“I’m not commenting to remember it later, I’m commenting to remember it now”. Two // in front of a line will comment it out. To do a multiline comment, do it like CSS with /*   */.

A statement in php is anything that’s an executable line, which are ended with semicolons.

Screen Shot 2014-12-09 at 10.16.33 AM


Whitespace in PHP

Whitespace doesn’t matter in php. In the example above, it’s standard practice to write variable name, space, equals, space and then the string. But, you could remove the quotes for the same result. You can wrap your php in the html in a pre element to have them display better. Here we have an array.

Screen Shot 2014-12-09 at 10.22.02 AM Screen Shot 2014-12-09 at 10.21.59 AM

If we were to remove all the whitespace, or add a bunch more, the result would be the same. The reason we include it is for readability.


PHP Datatypes

Integers and Floats

There are 7 data types in php: integers, floats, strings, arrays, boolean, objects, and resources. Floats hold fractal numbers, ie ones with decimals. Resources are anything that’s not php data, like files or responses.

Integers are whole numbers. To set a variable to one, don’t use quotes, as that would make it a string. To know whether something is a string or integer, there are built in functions in PHP, in this case gettype().

Screen Shot 2014-12-09 at 10.34.51 AM Screen Shot 2014-12-09 at 10.34.48 AM

You can do math with them, obviously.

Screen Shot 2014-12-09 at 10.37.23 AM Screen Shot 2014-12-09 at 10.37.17 AM

Floats let you use decimals.

Screen Shot 2014-12-09 at 10.38.17 AM


Strings and Booleans

Strings are any collection of characters. You can pull out individual characters using the index of the string, where 0 is the first character, 1 the second, etc.

Screen Shot 2014-12-09 at 10.54.45 AM Screen Shot 2014-12-09 at 10.54.42 AM

You could change a character using the curly braces and setting it equal to something else.

Screen Shot 2014-12-09 at 10.56.20 AM

To have a second string appear on a new line you’d use an escape sequence by adding a \n to the first line.

Screen Shot 2014-12-09 at 10.59.24 AM Screen Shot 2014-12-09 at 10.59.14 AM

Booleans are just true or false, so set it to TRUE or FALSE. You can use var_dump() to have it print out the variable and its value.

Screen Shot 2014-12-09 at 11.02.44 AM Screen Shot 2014-12-09 at 11.02.41 AM

Anything that’s a non-0 value is true, so a number over 0, a non empty string, etc. We can use type casting to test, by putting (bool) inside the var_dump function. Here we test an empty string, 0, a float, and an empty array.

Screen Shot 2014-12-09 at 11.07.54 AM Screen Shot 2014-12-09 at 11.07.49 AM


PHP Constants

isset() is a function that you can pass a variable to see if a variable is set (ie has a value) and not null. If it is, it will return the value TRUE.

Constants are different than variables in that they display values that don’t change. To define one, you use the internal php function define(), which you would typically do at the top of the page. You put the name in quotes, then a comma, then the value. The name doesn’t have to be in all caps, but this is usually done to denote a constant vs a variable. You can’t start the name with a number. To print, simply write echo and the constant name.

Screen Shot 2014-12-09 at 11.20.09 AM Screen Shot 2014-12-09 at 11.20.20 AM Screen Shot 2014-12-09 at 11.20.25 AM


Arrays

To define an empty array just set a variable equal to array(). You can also use shorthand notation and not have to write array with square brackets.

Screen Shot 2014-12-09 at 11.27.04 AM

Arrays can contain any kind of data, just put them in a commas separated list, with each value in single quotes. If you print it using the print_r() function it will lis tthe index of each value. The index is the key, the value for it is what we set, which means that an array is a series of key value pairs.

Screen Shot 2014-12-09 at 11.27.57 AM

You can modify/recall different values using their key. Do that by putting a square brackets after the array’s name, with the index for the value you want.

Screen Shot 2014-12-09 at 11.30.56 AM

To add values to the end of an array, just leave the square brackets blank.


Associative Arrays

Associate arrays let us use a string as a key. To do this, before each value put a string, then =>.

Screen Shot 2014-12-09 at 11.39.14 AM Screen Shot 2014-12-09 at 11.39.08 AM

Now, it’s easier to use key value pairs, because the keys are contextual.

Screen Shot 2014-12-09 at 11.42.01 AM Screen Shot 2014-12-09 at 11.41.57 AM


PHP Operators

Operators

Operators are symbols that let us modify values. Unary involve one operator, and would be like + or -. Binary have two, and would like >= or <=. Ternary have three, like ===. Comparison compare two values, like === or !=. Concatenation ones like you combine values, like a dot. Arithmetic are for math like + or -. Autoincrements like ++. Assignment operators are like =.

Screen Shot 2014-12-09 at 12.03.44 PM

To autoincrement or decrease, write the variable name followed by ++ or –. So, $a++ would equal 11.


Comparison Operators

These let you compare two values. == is for if things are equal in value, but === also checks if they’re equal in type, like integer vs string. != is for not equal to. !== also checks type. We can use the var_dump function here to help us compare and see if it’s true or false. <, >, >= and <= are other options as well.

Screen Shot 2014-12-09 at 12.12.00 PM Screen Shot 2014-12-09 at 12.12.28 PM


Logical Operators

These take two values and compare them logically. and(also written as &&) is one, and with var_dump we’re checking if both values are true, which they both need to be for it to return true. or(also written as ||) returns true if either value is true. not(represented by a !) returns true so long as the value is not true.

Screen Shot 2014-12-09 at 12.17.54 PM Screen Shot 2014-12-09 at 12.18.17 PM


PHP Conditionals and Loops

Conditionals

Pretty much the same here as everywhere else.

Screen Shot 2014-12-10 at 2.59.39 PMScreen Shot 2014-12-10 at 3.00.23 PM

Here’s are some simple if block and if/block examples.

Screen Shot 2014-12-10 at 3.06.28 PMScreen Shot 2014-12-10 at 3.06.33 PM

Screen Shot 2014-12-10 at 3.08.05 PM Screen Shot 2014-12-10 at 3.08.11 PM


If / ElseIf Conditionals

ElseIf let’s you add an additional condition.

Screen Shot 2014-12-10 at 3.13.33 PM Screen Shot 2014-12-10 at 3.12.12 PM


For Loops

Screen Shot 2014-12-10 at 3.17.30 PM

Here we’ll do a basic for loop. First you set the variable, then the condition that the loop will continue to run so long as its true, then an increment increase on the variable.

Screen Shot 2014-12-10 at 3.21.50 PM Screen Shot 2014-12-10 at 3.21.44 PM


Foreach Loops

Here we’ll add additional social media links via a foreach loop. We’ll start by making an array of class names. We need to loop through this and change the class name for our list items. Notice how we were able to just put the php where we need it, and that the foreach loops code to run actually encompassed the original html. The as keyword makes it so each item in the social icon array is set to the variable $icon.

Screen Shot 2014-12-10 at 3.28.17 PMScreen Shot 2014-12-10 at 3.30.28 PM Screen Shot 2014-12-10 at 3.30.20 PM