Web Development
Monday, July 20, 2009

Good morning. We are going to get started. I hope you had a good weekend.

There are some new blog posts. There’s an explanation of the assignment from last class up here. There are several ways you can solve the JavaScript problem. Where you moused over the product and it gave you information. This is three ways to solve that problem.

These are different ways than some of the things I showed you in class, so I will show you the best way possible to do the assignment. I didn’t expect this of you. But these are better ways.

The next blog post up from that is a description of has to use PHP, which we will learn today. The basics of the PHP language and why you would use it. This has the description of the two things you can do with PHP.

The next post up from that is an explanation of how to use PHP variables, functions and arrays. We have seen these things already in JavaScript. This focuses on the differences. This gives you the syntax for defining an array, variable and function. You do the same things with them that you do in JavaScript.

Above that is the latest post, a list of examples we will be covering today in class.

Every day, from now on, I will give you twenty minutes or so to read through this information to start from a common baseline.

Start reading from the main uses of PHP. I will give you twenty minutes to browse through this.

If you are done move to the next post.

Start there. Go up to more recent posts if you have time.

Sound good?

Feel free to ask questions if you come across something that doesn’t make sense.

I will start going through the actual examples a 9:30. [It is now 9:05]

[Class reading]

Professor: I’ll go through this Any questions? I’ll go through all of it again.

So we’ll start with the main post about the uses of PHP. These are the sides of the same coin. The basins logic and the templating goes together. So we’ll look at this — CNN.com. I used ABC so let’s do that instead. BBC.com. This has more sub sites. Top headlines and get to the news. My point was these sections are all the same.

The first day I said these are shaped like a C shape. It’s templated too so the top and the bottom, with the details, are filled in page to page. So this has variable content then the logic of the site, knows how to put articles up with recommendations. It retrieves it from a database and sticks it here. We’ll look more at this later. But we won’t use databases today.

That’s the idea about the templating.

If you look at eBay, every main site on the database has templating. The top navigation stays about the same. Let’s see if it does. See? The top didn’t change here. So the top is in a external file with a code. Then there rathe other files that fill in the content. So the top is templated and the code is extracted. If they want to add another word, they would just do it to one file then it’s updated on all the other pages.

That’s an important concept. It’s a burden to update all that code on all those pages taking into account human error.

So the NYTimes. This stays the same too. The top section changes a bit. You can make changes though with just one template. The footer is the same page to page too. I assume this is templated and I think they use Word Press on here. So it’s using a blog managed software.

Back to the blog. Now, business logic is about deciding what to put neath template. And how do you get the data from the database.

Then we will mostly focus on the language with coding and PHP. The variables behave similar to JavaScript variables. The code looks the same. It’s not foreign to you. You say the variable name. That’s the name you choose. Then you set it equal to a value. One’s a value then the other is a string. Then you must use quotes. Just be consistent on both sides. All the lines are ended in semicolon. This shouldn’t be foreign.

A big difference the variables have the dollar sign. That’s showing it’s PHP and this is a variable. But you may forget that. Just remember it’s necessary.

The functions in PHP look the same to JavaScript. As far as the structure. Use the word “function” like in JavaScript then the name of the function. It’s not a dollar sign, like in variables.

So you say here’s the function you create then you set the parameters for the function to meet. Then between the opening and the closing bracket is what’s run when you call it. This is command echo … and you say “echo [space.]” Then it prints

Next you do the …. semicolon and run.

Run echo here,

Then a side track. I’ll show you some handy sites with remembering the PHP code and syntax. In CSS and HTML we’ll use a different website.

TIZAG.com. It’s a good site! There’s lots of references for JavaScript but I like it for the PHP the best. So there’s a link to the tutorial on the left. This site has good easy language about PHP and how to write it.

If you scroll down you see on the left are the names we saw in JavaScript. Statements, strings, comments, raising, loops, etc. These are available in PHP.

I do not recommend you do the PHP file tutorials but do use everything above. In the longer class I teach file management. But since we have limited time I won’t do it.
But read the stuff in the top section to learn how to use the language.

One more site. PHP.net. This is the official page and written by the people who wrote it. It’s difficult to navigate. But there are references I’ll make for the site and there are good searches for functions. You had the functions ready for you and so does PHP. It’s easy to forget the syntax. So you can search the functions definitions here.

Like if I search for Echo, I get the documentation on how to use it.

The description may be obscure but there are examples sections. They are real world too the top is the technical then the bottom has straightforward code to see how people use it.

There are several example for each function.

Here’s a easy copy line.

Blog. Those are the PHP reference sites.

One thing to remember is that where in JavaScript you use the + sign for the strings in PHP you use the dot. In PHP it’s for mathematical. To put the strings together you use the dot. But you may forget since you use the plus sign in PHP.

To call a function it’s the same as JavaScript but with parameters here’s how you do that. It shows you here an example. That’s all that section shows you.

And arrays are more important in PHP than in JavaScript. I showed you how to make one in JavaScript but there were no examples. But in PHP you get lists and you must explain these on the page. So you store them and show them. They are more important now.

So I want you to know how to use them to put data in and get it out. These are the basic commands to create an array.

Make the variable name. It must have the dollar sign first. Then you create it by returning this. You copy and paste the code thewy the name in there and you get an array. If you forget how to do the array function just do net and you get it. Get used to using this page since it’s where you would go if you forget how to do something in PHP. But you just use copy paste.

Arrays are lists of things. To access an item in the list. Like item 15 here, an array usually has 15 or more. So the 16th item I’ll store the text at the 16th value in the array. I’ll show you this in code. It will be abstract.

Here’s an example. It’s easy. Start with this command. So between there and here is PHP code. Like HTML had the opening and closing tag, you have something similar here.

This is a PHP file. But we will mangel the PHP code. So you have the opening and closing text here. But if I wrote it outside [On screen.] The server doesn’t understand it. It would print it as text. Everything must be inside.

So Echo — That’s first. This is a PHP program. It echoes the text. I’ll save it in — I’ll make a folder — “hello world.” Then inside that it’s index.PHP. This is the default that’s loaded by the server. So when you save it as PHP it color codes the text. You see if it’s correct too based on the color. It tells you if it’s an echo command. Then if it’s not black then it’s not correct. Upload now, I’ll do it. But you don’t.

I’ll upload “hello world” but don’t copy. We go to class 6/then hello world. The text pops up. This program looks like this then the output is that. [On screen.] You see.

If you PHP source you will see something important. You don’t see any code in there. There’s no HTML or PHP just the text. That’s critical. That’s because when you first go the browser and say I want hello world it uploads the PHP file. It’s processing the request. The server proceeds the request and decades what to do. The server uploads the PHP file and sees the files is dot PHP so based on the name the server is set up to look for the PHP code.

It looks for the extension dot PHP to be processed then sent to the web browser. Then it looks of rathe opening text then removes the code. So … we make the request, then it looks for the PHP code, it evaluates the code then if you output it scripts out the code and puts it with the code. It shows you the rest.

Another example.

If I put an H1 tag here, outside the code, class 6. P Hello World. That’s regular HTML. It’s outside of the PHP section.

You can see the output is the plain text. The server takes it out and shows you the end result. The HTML is left alone. It looks the same way you coded it because the server doesn’t process the HTML. The server doesn’t know this code because it’s client sided. It’s a foreign language. PHP is the language the server understands and processes.

If we call this file, index.html, depending on how the server is set up this may or may not work.

Let’s try it. Some servers are only set up to look for PHP code in dot PHP files. Some servers look in all files.

Female Student: The heading had no tag body and things like that.

Teacher: It’s always necessary, but I’m showing you the bare minimum. For proper HTML you need the heading and body.

The browser is meant to understand really bad code. [Class laughing.] Even if you don’t have all the HTML stuff it will still run it.

If I deleted index.php and replaced it with index.html and view page source, you will see that the server has sent back that code. It’s not set up to look for PHP code in an HTML file.

The server thinks this is just text and sends it back. It doesn’t run any preprocessing on the code.

Remember that PHP is hypertext preprocessor. Somehow they named it PHP. Before the server sends anything back to the browser it preprocesses the code.

This being a dot HTML file doesn’t trigger the preprocessing. The server doesn’t even look for PHP. It’s takes the file and sends it back.

Male Student: PHP and HTML and JavaScript are separate?

You can’t put HTML within the two PHP brackets?

Teacher: For the server that’s the case. If I put H1 in the PHP tag the server will see, if this was a dot PHP file, PHP code and will know that everything is meant to be PHP.

It will run the first line fine and then it will get an error because it’s not valid PHP.

Male Student: But this being an HTML file it would read the class six within the two PHP tags?

Teacher: Yes.

Male Student: It would read it properly because it’s an HTML file.

Teacher: Let’s load it up. I have the PHP file and the HTML tag within the PHP code. Let’s see what happens. I’m going to guess it will be a blank screen.

Not quite. It didn’t show up as H1, that’s for sure.

I think this is now being sent as a whole file to the browser. The browser being client side is looking for HTML code. It sees the open bracket and thinks this is HTML tag. It doesn’t understand what kind of tag it’s supposed to be and just ignores it, basically.

Female Student: You are saying the server knows to process PHP first, are you talking about the [server name deleted for security].com?

Teacher: It’s a physical computer somewhere. It has software to run PHP code built in. Just like we downloaded web software on these.

Female Student: Before it send information on the browser it processes the PHP?

Teacher: We make the request. We are sending a bit of command to a server for a file. Before the server responds will do some internal preprocessing. That’s where PHP comes in.

Let’s rename this back to dot PHP so we can continue with our experiments.

It’s important to remember to call your PHP files dot PHP. That’s lesson number one here.

Second, start to think about how the server will think about your code and how the client will think about your code and realize their are differences.

HTML code needs to be sent to the client. It either needs output in the PHP section, or a totally different part of the page so it’s never evaluated as PHP code.

I can output HTML from the PHP. I can say H1, Hello World with this. That will be sent as text for the server. The browser will see HTML code.

Let’s try that out.

It’s important to think of which language which computer understands. The server only understands PHP, the client only understands HTML.

View source in the browser. It looks as if you just had a file with two HTML tags. We know that’s PHP script. The browser has no idea PHP was run.

Male Student: Can you do JavaScript?

Teacher: Yes, as long as it’s in the output. We will have a normal page of HTML document with some PHP.

Let’s get the whole template for a regular HTML page. I will copy and paste that to my blog.

Everything is categorized on my blog by topic. I’m going to the HTML section. Somewhere in there is the code of the basic page template.

I’m going to copy this whole XHTML outline. I’m going to use that in my code.

We can get away with HTML snipits in the browser, but we want to use full fledged HTML documents.

We have a slight problem. We are going output the tag Hello World outside of the HTML document. We know this is not valid HTML. But the browser will show you this because it’s built to run with that code.

We have another problem here. This is what a PHP error looks like. It will say Parse Error then generally what line the error is on. It’s on line six somewhere.

We go to NotePad++. It’s on this line. This is the problem. If you remember, it looks a lot like this. The server is smart, but not smart enough to know that this is not PHP. It thinks everything here is PHP code.

The server is set up to recognize this as the opening of a PHP document. Some servers will require the words PHP. My server is not set up that way. It allows shortcuts with the two characters.

This is getting confused to the server. It thinks you are trying to run PHP when you are not.

The way around this is to open a PHP tag the proper way and echo that out as the text.

Let’s get rid of the rest of the document.

I have echoed out the confusing part to the server and made it clear this is text we want to print out to the screen, and not a command we want to run.

The browser will never know we had this command. The browser will see the regular XHTML tag.

Let’s upload that to the browser.

View source. This is a blank document.

The browser gets the regular tag. It has no idea we ever wrote PHP code. I will put this as a command. This avoids that fundamental problem.

This will be the outline of every document we do for PHP.

Let’s say I want a template. I would normally have some PHP logic at the top of the page and end the PHP tag.

I can have as many opening and closing PHP tags as I want. I have three now. They will be evaluated as PHP.

You can have multiple opening and closing PHP sections. The server will look at each one. It will evaluate them in order.

Generally, you want one big one at the top. But you may need more than one at some point.

Let’s say I wanted to make the beginnings of a dynamic page. I can say, page title equals Hello Class 6.

That’s going to be a variable called page title that will contain the text, Hello Class 6.

Rather than having this hard coded title, I’m going to output that title. I’m going to say PHP echo title. I intersperse the PHP and HTML code. I also want that in the body.

Male Student: Do you need a semicolon?

Teacher: Thanks. I should always include the semicolon. It will work without it, but you should get in the habit of having it.

I’m going to echo out that title in two places, so you see something on the screen.

This is now almost like a template. This is a template I’m filling in with details from the PHP.

Let’s upload that.

If I view source here it’s nicely formatted HTML. All the PHP has been removed and only the output of the PHP is what you see in the HTML code. The browser never sees the PHP code.

Questions so far?

Female Student: The HTML template needs to be in the PHP file?

Teacher: Yes. To be processed.

Some servers can be set up to run PHP code in a dot HTML file.

Female Student: Why would you do this? You could easily write a simpler HTML file?

Teacher: We are going to start make sites like BBC, for example. You can go to any of the news stories.

This is a template [On overhead.] It has a standard top left nav, bottom nav, etc. This is the title. This is the first article they want you to see. Second. Third. They standardize their format.

Asia Pacific will look almost identical.

This is true of any section. The title of the page and the different text on the page will be different.

I’m setting this up such that we will get to the point to swap out the title of the pages. There will be logic that decides what to load on the page.

This will be dynamic.

Female Student: That’s the template.

Teacher: Yes. Think of this as a template. This HTML doesn’t have the content. That comes from some logic of PHP.

So I could make, let’s see … [On screen.]
An example of PHP and HTML. There’s a with text then in a paragraph. [On screen.]

So I output a title and a variable but I could have many.

I could add more data and more complicated HTML as a result. View page source. But you just see the paragraph.

I’ll do a few things here that are useful to you. As I do most of the work in the PHP with the variables. It’s isolated at the top, I don’t define the variables once the template starts. I don’t do logic or engagements stuff it’s just a dummy page and outputs the content. That’s the best way I think with PHP. I could do a whole section in the head. That works, since the server looks through the code for the PHP. So it’ll run before anything else.

But it’s confusing since you see PHP in HTML and you lose track.

Student: Page 10 with the titles the PHP. How would I comment that out.

Professor: There are two ways. You could do the comment before the text. That’s an HTML comment. But here it’s commented out. Or in PHP you could do the comment. Like in JavaScript cover out the line. But before the end. But if you keep it similar to the HTML comment like if you do more complicated stuff, –

If I comment out, this is two lines. Then you remove them so they aren’t processed. I still use those down here. You won’t see an error.

Source. The rest of thuja code is there but there’s no content page. So it doesn’t throw errors all the time. If it tries to echo but there’s nothing there it just has nothing.

In general the commercial servers will get this.

Next I may want to do — well, let’s go back to the blog.

I’ll run through the ways to define the strings. These are just variables of text. Here are a few ways.

This is output of PHP. You see there are three different kinds. We’ll see the “heredoc.” I can’t show you with the HTML code. But it’s just everything that’s interesting is gone since it’s written with PHP. So id you use this you must go the to the server and look at the original source code. But in the browser the PHP code is gone.

Syntax, defining strings, etc.

So this page has single coded stream double coded, and heredoc.
This is single quotes. [On screen.] One at the beginning then at the end. Then there’s HTML in here too. There. [On screen.] But with the server that’s just text. It doesn’t know the HTML exists.

But this is double quotes. Lath real point is the heredoc. It defines a multi line string. You get quotes here, then the end quote here. But you can break it onto multiple lines. I can’t here with the line break but it breaks with PHP.

I can’t use double quotes in here since it’s confusing the PHP. It thinks I would close the variable here. But with the other way I can put as many quotes as I want. Then it evaluates the text. I don’t open this definition. It’s special.

So I’d start with less then, less then less then, then everything between that will be like the quotes around the string. You can’t have species here though. It’s the first thing on the line then the semicolon and it’s stored in the string. It’s useful with inserting HTML code.

It’s more natural since you can break it up and not have everything on one line. If you do the variables with HTML you see this is more natural way to create them.

That’s an option available to you. So copy and paste, then the 3 less thans, then the word must match the bottom one and they must be aligned appropriately. They don’t need to be capitalized but it’s easier to see that way.

Here I’m linked to the syntax the documentation. If you go to the heredoc page you see the documentation which may be confusing but it’s there.

You will see me use this. I just created a string there.

So let’s look at the defining PHP functions example.

This page outputs the text of the calling function. If you don’t remember go to view source. You can’t see the PHP code like this but you’d download it from the server. So function.PHP.

This is the bottom and it’s regular HTML document. But inside these paragraph tags it’s called a function PHP. I’m echoing the result of a function. I supply it with the parameter.

This is “create welcome message.” It takes a parameter and at the top you get the functions. I keep the complicated PHP at the top. The template I use simple commands to insert the text I want in the HTML.

This calls the function in PHP. I give the variable name. It uses the catenation number. “Welcome to class.” So you get that then comma and who the name is.

The return value that’s replaced, like imagine this as echo … “welcome to class.” The return equates to this. That’s what’s put out.

Then you see that text.

So it’s like in JavaScript. They are all taking the things you learned in JavaScript and showing you how to do them in PHP.

Any questions? Moving on.

Next on the blog is “Elseif” … [On screen.]

I must open this.

Here you look at it. I have the temple with PHP in the center. It’s ok for the example but I’d avoid this syntax. It’s confusing to look at. But it’s just one chunk here.

If you remember the JavaScript example, I set a number to 10 then I see if the other numbers match. But if a condition is true, it prints out this text. Or if something else is true it does something else, or if none of it is it prints this. [On screen.]

JavaScript is two words, but Elseif in PHP is one. I don’t know why. It’s just that way. Otherwise it’s to the JavaScript.

A number greater than 5 is in the HTML. Page source.

So there’s the result of the PHP. If I change it to 4, it would say “is it greater than 5.” No. “Greater than 0?” Yes. So it outputs greater than zero.

It’s checking to see what conditions are true. That’s it.

Now the four loops through the commands. An output of the number is looped then puts in the increments.

Look at the code. [On screen.]

It’s a chunk of PHP in the HTML. This is how you define the four loop it’s like in JavaScript but you need the dollar sign in front. Loop through the code 10 times. It starts at IP 0. Then it checks to see the ‘I’ is less than 10. Once it gets to ten it stops.

So echo ‘I’ closes it. First it’s 0, then 1, … and then it stops running when it’s no longer true. It’s not a new concept it is just a new way to write the code.

In While Loops, this is how you would do that. Whileloop.php. It’s identical. But the other way we set it to a base variable then you lop while the condition is true. i is less than 11. It increments by 1 until you get 11.

The condition is not true.

The next example, how to make an array. I want you to become familiar with using arrays in PHP. This is important.

Let me bring up the code [On overhead.] This is arraysimple.php. This is a description of arrays. Regular HTML until you see the PHP tag.

This is how I define an array. We use the built in array function. It’s a built in PHP function. You can prepopulate [or repopulate?] the array. I’m giving some names of people and storing them in array called prepopulate [or repopulate?].

Then I’m using a function I want you to because familiar with called print_r. It outputs the raw confidence of an array. The output looks like this [On overhead.]

You may not be sure what’s in your array. This print_r function is an easy way to output the contents of the screen in a raw format.

You can see that the array is ordered as an index list. The zero item is the first name, one item is the second, etc. You can see which item is in which spot and how many items there are.

I try to surround it with a pre tag, the HTML pre tag. This maintains line breaks.

If I didn’t have that HTML pre tag it would be harder to read, but you can still read it. It looks like this [On overhead.] It would be on one line because HTML doesn’t respect line breaks.

View the page source. The HTML code has the line breaks in it, but since there’s no pre tag surrounding this it just gets smashed on to one line.

I can surround every print_r statement with echo pre and closing pre.

Questions so far? I’m trying to give you tools to be more comfortable using arrays since they are important.

Next, how to loop through an array. We went through the 4H statement in JavaScript. Now we see it in PHP. This takes an array of items and loops through them one by one.

It takes the first item in the array and puts it in the variable we are calling person and then outputs that variable.

It takes the first element, the name Candy, and puts the variable into this person variable.

Then it goes to the second element. Puts in the variable. It keeps doing that for all the elements in the array. That’s what the 4H element does.

It’s the quick way to loop through the array.

The other way to do this is to echo out, one by one, the elements of the array like this. It’s more technical.

This page has a lot of text explaining what’s going on with arrays. You will be more familiar.

That’s the output as the result of each statement.

Let’s move on to associative arrays which will also become important to us.

They are identical to regular arrays, but they are slightly different looking. PHP treats them the same.

We define the array the same way. We use the array function. Rather than having one value for the first, second, third, forth, etc. we use this combination to define each element of the array.

The equals greater than sign is a special command saying it’s the index to use and this is the value to store the element.

This is a list of students with different grades. I am using these as indexes and values. These are key value pairs.

When I do this, I create an associative array that is being stored like this. I can see the output by using the prnt_r command.

The element of the array I first created, is using the word Tandi as the index. Not the number zero. This uses words, not numbers, to index each element.

If I want to get Tandi’s grade I could access that item in the array by echoing out the value of a variable like this. It echoes out only the array with the index you are looking for.

You can do this behavior the same with with integers as indexes. We use words not indexes.

You loop through them the same way. The 4H statement works the same way. But you say the array name here, and two variables here. One to hold the index for the array, the other for the value of the array.

This takes the index, which in this case is the person’s name, and this takes the grades.

Remember, the first time it will have the word Tandi in the person name variable. It will have grade A in the grade variable. Second will be Jack, then A. Then Susan and B.

It loops through each time again. But we get two values for each row in the array.

Questions?

We will be using this a lot. You will become more familiar.

That’s it for associative arrays. The term is for an array with the word for an index, not a number.

I’m going to show you an example of templating the top section of a page. This comes from a template. We will see how that works.

This is includes.php. It’s in a subfolder called includes. There’s includes.php and _.nav.php.

This is similar to the tag from earlier with the names. There is one difference in the file that I will show you in a second.

We are creating a page title, a category name and subcategory name. Then we are converting to HTML code. This is the HTML section of the page. We are inputing the page title into the title tag.

We open the body tag.

We include another file in this file. It’s like a copy paste operation. It’s putting the contents in this section. It replaces the code with the contents of the file.

If you open up topnav.php it’s just that top section. The HTML for that top section.

It’s HTML code but outputting in a templated way. The page title and category name and subcategory name that we defined in variables.

You can include this topnav file. It will output different page titles, category names and subcategory names you defined in the outer file.

Let’s see what that looks like again. That’s what the HTML file looks like to the browser.

If I view the page source, this is the stuff that was copied and posted from the topnav file that was included from a separate file into this file.

You see the page title has shown up here. As well as the category and subcategory name because my template said to do so. You don’t see any of the PHP again.

That’s just because I defined variables at the top of the page. I used the variable as page title. Then I included the whole other file using the built in PHP function to take a file and put it into another.

This page shows you several commands in PHP that include one file within another. This is what I’m using now. Include. If you have multiple includes with the same file name it only includes it the first time.

Require will give you a fatal error on the screen if it’s not able to include that file. Include will gracefully just ignore failed codes.

Require once does this like include once. It will only include the file once.

For example, if I repeated this four times, and you can have as many includes as you want, and upload that to the server, you will see that show up four times because I included it four times. It includes that section of code as many times as I say.

If I standard deviation include_once, you will only see one copy.

I standard deviation to only do it once so it limits it to the first time.

If I said require, which is the same as include, but if it doesn’t find the file and break the code, it will work the same way. It requires that file. It includes it. If I misspelled the file name this code is not going to find that file. It’s going to permanently kill your code.

It says require failed to open screen. Meaning it failed to find that file.

It says what line in your code the mistake is on. Line sixteen. If you debug your code you will see that you named your file wrong.

I use this because I want to be 100% sure I have the right file. I’m usually pretty sure I want that file, so I want to see if I did it right.

I also use require once more often than anything else because it’s rare I want a file included more than once.

I will leave this as include. There are other examples of the HTML links to more documentation about this.

This page has all the links to the different kinds of include files.

Questions about that?

I’m throwing a lot of information at you. Ask questions if you have them.

I don’t expect you to retain every word. As we do more complicated things in the PHP I expect you to use this as reference.

Female Student: Sometimes you use brackets, sometimes parentheses.

Teacher: In the PHP code?

Female Student: The one in the basic syntax. The associated array.

Teacher: Let me bring that up.

Female Student: At the bottom it says echo array grades Susan in brackets. It’s parentheses everywhere else.

Teacher: I don’t think so. Let me isolate the concept and show you a separate file. Let’s make a PHP document with just an array. Let’s save this as array2.php. I will delete it in a second.
This file will have an array. I could add elements like [On screen.] That puts in the first element. If I echo, it echoes the name out

Student: So in PHP you use brackets but with functions you use.

Professor: Yes. That’s the gist. But that didn’t work.

Then that’s how arrays work. You access each elements with brackets. It could be a word, like “day” equals “Monday.” Then you access it using the same index.

[On screen.]

When I have problems with my arrays, they are not working right now. I can see what’s go on here. [On screen.] [Teacher looking ... ]

This is NOT my lucky day. This is simple code. Not sure what’s going on.

This computer does not like me. This code is fine I think. But the server may have a problem. There’s no reason this should be happening.

It won’t echo out.

I hope this does not happen the rest of the day. This is just one command. It’s the server I think.

I’ll close it down. There may be a problem with the WinSCP.

Now it works!

Back to this. If you want to make an array, back to basics, our names equals array. That’s how you do it. ["Instructor" ... etc.]

But that outputs my name. There’s a new element “index instructor.” Then it should output my name.

Now I’m being explicit with no shortcuts.

[On screen.]

Back to your question, if I can define an array in these protheses I could say … [On screen.] In a fell swoop I define the array and it’s contents. It’s in the function I pass the parameter where I want to store it. It’s two statements. You see it shows up the same way.

Good? Understand? It was long.

Moving back to other examples.

I’ll show you a list of some of the functions when you deal with text. PHP is geared toward templating and work on the web. It’s for creating websites easier. So you deal with gluing together text and capitalization, etc. There are many functions. This is a minimal number for you to modify the text variables.

An example listed on the blog under using the built in functions for string manipulation. I’ll show you a few. It’s under the String Manipulation Bullet.

So you see the functionality here. [On screen.] This is text in the HTML but it’s a function. You can do upper or lower case. HTML entities. It takes the HTML code where and it converts to safer to to use text characters.

Add Slashes. That’s a back slash into the text it’s important for databases. Then strip tags removes … you don’t know what the users will use in your form. You don’t want them to put in code to hack your site.

If you use this, it prevents HTML from being submitted or “boats” [sp?] Then it removes HTML data. It shows you the output for the functions based on the input in the form.

I’ll show you.

At the bottom is the form. I can enter text. I’ll enter, “this is a great example.” Then hit Go.

Then I see the output. So it made the first letter of each word capitalized for this specification. Lowercase didn’t do anything. But the uppercase makes all the letters capitalized. You see.

[On screen.]

So now I’m hacking this site. I am trying to get this red. Upper case word makes the first letter red. It ignored that first one … hmm.

Now let’s make the uppercase. This is not fooled by my HTML code. It’s preventing me from changing stuff. It protects the site too.

This one [On screen.] Doesn’t look different. Let’s see the page source.

Can you read it?

This was what was output by the uppercase function. It converted the words to uppercase. This is output by the lowercase. No HTML code was changed. Then this changed all the characters to Upper. Then this was output with HTML entities. This is what I’m trying to show.

The less then signs got changed to a semicolon character. The browser won’t show this as HTML but as a less than on the page. But if I standard deviation less than on the code it thinks it’s a tag.

That’s short code for less than signs. This is for greater than signs. This is for quotes. It’s escapes. It converts to the special commands on the page and NOT as HTML code. It’s helpful since you don’t want people to modify your page. So you use the entities by running the HTML entities.

Add slashes means you get the backslashes in front of the hook.

This is handy in databases. It gets the HTML a bad code so the browser ignores it.

The strip tags removes the HTML function.

Then this is to outline the output of these functions but not HOW you use them. We’ll do more of this in database work. So those are the functions available to you.

There’s PHP info too. It shows the PHP installed and the plug ins. This has PHP info and it puts out all the information about the server. This is a Linux systems. Then obscure details on how it was run. Where the configuration file is. Then the path.

If you had different plug ins or libraries like JavaScript libraries. It shows you all of what you have installed.
This is 5.2.6 of PHP. It’s recent. Sometimes you don’t know what you are running so you can see with this. The code is simple.

[On screen.]

It’s a function. Just one. The PHP does it quickly to get it all out. If you forgot what PHP info does, you can search the PHP.net. You get the explanation. It’s easy.

Any function I show that is complicated you can look up here.

We are almost done with the basics.

One more thing is how to redirect the user. You go to one site then it redirects you to another site. There are ways in HTML, JavaScript, and PHP to do this.

This example file, shows you all the ways to redirect. If I click on it I get to the NYTimes site. It redirects you.

I’ll show you now.

Redirect folder.

This is how you do it in PHP. It’s about inserting the hypertext protocol transmitter. It’s behind the scenes information to the file. When I requests this the server responds saying you should go elsewhere. So the browser goes here, instead of the original page. It stops the processing. So that’s how it went to the NYTimes site. It’s behind the scenes instructions to the browser. If it redirects the browser doesn’t see this line. [On screen.]

But if I commented it it would upload. Then you see it redirects.

Now back. I’m going to go back and click the example again. It takes you to CNN.com. Did you see the split second that had something else on the page.

That shows you that the browser has received the other version of the file before it processes the redirect.

This is how you redirect in HTML. For the browser to read this it has to download and process the HTML code.

This is an HTML how to redirect. You have a meta tag. This is the same idea we saw in PHP. You indicate that you want to create a new PHP header. This is the data you want to send in that header.

This is the number of seconds before the page to redirect. This is the URL you want the page to go to.

This took us to CNN. Let me modify this.

This is how to redirect in HTML. There is a third redirect. The JavaScript redirect is happening first. That indicates to take the page to CNN.com. This is the JavaScript code to redirect. You set the property of the indication of where to go.

If we comment that out with JavaScript then we will get to the HTML redirect. There’s a precedence.

JavaScript happens second. Usually it’s loaded first when the browser interprets the contents of a page.

Now we are going to go to Independent because the HTML redirect is going on.

That’s it for redirecting. I won’t go into it more. Remember that PHP gets processed first. JavaScript second because it’s the first thing the browser processes. The HTML is third because it’s the last thing the browser processes.

I think we should take a break now. I’m going to show you more information that’s going to confuse you later.

Questions?

We’ll continue later. Ten minutes. [It is 11:14

Everyone's back. Let's continue with the PHP lesson.

All of this has been somewhat theoretical. Just like JavaScript. I'm going to try to get some practical applications of PHP.

[Phone ranging]

Male Student: Credit problems again?

Teacher: They know where to get me.

[Class laughing.]

If we open up NotePad++. We are going to make a PHP document. It will be simple.

Remember, first you have to do less than sign, question mark, PHP. That’s the beginning of any PHP code.

This page is going to echo out. Get. Bracket. Q.

This is a special code. Echo is the command to print something out to the page. The dollar sign indicates a variable name.

When you see the underscore it’s a built in PHP variable that PHP creates for you. We don’t define it.

Get is the name of this special PHP variable.

When you see brackets after a variable you should remember the brackets with the zero, one, two, three indexes. This is an array. The Q is an index of a particular element in the array.

This doesn’t make sense, but it will in a second.

Save this file in a folder somewhere. Remember to make your own folder for your project. Let’s call it request. This will be get.php. I’m showing the Get variable.

This will echo something to the page. Let’s upload this to the server.

You don’t have to do this yourselves. You can just watch me.

I’m going to upload the folder, Request, to the server.

This does one thing. It echos out some variable. If I load that up to the browser, nothing shows up. That’s what I expected.

If I put, after get.php, Q equals hello. This is the full file name. Then question mark, q equals Hello.

I’m going to break it up on a few lines for you to see, but it’s all one line.

This is what’s called passing a parameter to the server. Not only do I want to get the file, but here’s the variable Q that’s equal to Hello.

Since I’m outputting what’s in that variable, the variable now has something in it. It has the word Hello. What we specified.

This code looks for anything that has been passed in the address bar after the question mark, which is a query.

When the browser makes the request for this file it also passes data about Q.

This is what is called a Get Request. It passes the value of Q.

PHP, being built to handle this stuff, knows to put that as an index in an array. The value is whatever the value is set equal to.

The actual data came from the browser. You are kind of passing data from the browser to the server when you do this technique.

If I had set that to something else, Q equals Something Else, that’s how it will show up.

The same page will load a few different things depending on what’s requested of it at the top.

It’s common to see this technique used, as we will see later.

This seems arbitrary now. But I want to go through some permeantations [sp?].

Passing data with forms of http. You can use a form to submit data that shows up in the top to be passed to the server.

What’s your first name? I put in my first and last name. I click go. You can’t see it because it’s small, but the request looks like this [On overhead.]

The file name, passing data, process data, my first name, my last name. When I submitted the form it did what we did manually earlier on the address bar. It made the request to the server.

That’s how it gets sent to the server in form data.

This page is echoing out the values of first and last names.

In this case it’s using another built in variable called Request.

This shows you that the data has been received. You entered in data, the data is processed and received, then displayed to you.

There are two or three different ways to pass data from one page to the next. Normally pages don’t talk to each other. There’s no intercommunication between pages.

NYTimes.com is a dynamic script. When I click on the article, anything on the last page is lost. Only in memory is what’s on the current page. There’s no maintaining of state from one page to the next.

Windows only have a number of ways to make it seem like these are talking to each other. You want it to appear that way.

When I go to ebay.com and click log in, somehow that data has to be maintained from one page to the next. They don’t want me to log in on every page. There is a limited number of ways to do this on the web.

There are a few techniques to maintain state. It persists from one stage to the next.

This is one example. The information gets tacked on. It sends data from one page to the next.

If you remember from the form coding, in the form tag, you may have seen it specified. The form tag takes the two parameters. One’s the action being where to send the data. Then the method which is HOW you send it. We set it to “get.”

You see method equals get, then the other option is post. That’s how you send data from one page to the next. You remember the other way within the address bar, but then there’s the post method. It’s the same code but the method is equal to post.

[On screen.]

You have the variables with first and last name. It’s the same form but the method = post.

Now fill this out. Click go. Nothing is up at the top. No data showing but this proves that it’s been accurately received. It’s grabbing the data but the wasn’t at the top. So the post thoued is behind the scenes. The method the user can see. But the post is in the header then it’s behind to make the requests. But the get is in your face in the address bar.

Post is usually for more data. You don’t want a large amount of data in the address bar. If you upload from the browser to the server you use post. The get method would have too much data. And you have a limit of text in the bar. It’s not big enough for an image. That’s how you specify with the post. [On screen.]

Any questions? There’ are the two ways, Get and post.

Student: high security websites are around the post?

Professor: Yes. The post is not so obvious. So if there’s a log in screen. I’m using the get method with the password. And it’s hidden, but it shows up in the browser. If someone and watching me, they see my password. But it’s not as obvious with the post method. You use post for this. Security requires also that you need the score server that encrypts data. But that’s beyond us here.

But that means it’s a encryption of what you typed in to the form.

Student: When would you use get instead of post.

Professor: If you want to see the information in the address bar. Like if I send you an article I want you to see, the data is dependent on the parameters that you see. How about eBay

I’m looking for … Straw Hat. You see the word “straw hat” then the results. So the word is passed along and you see it.

Well, so I wanted to forward this page. I paste the URL then send it. If it was not in the URL then you would look at it but you wouldn’t know what it was. That page depends on many things. I would have to send the whole URL. These individual items, they made it look like it’s own web page. That’s a technique. But the question mark equals some variable.

That’s the main reason to use “get.” When you. Use the browser that’s a get request. It’s just passing along the data. The post is special.

One more tool.

It’s called FireBug. Remember the firefly. It adds browser abilities. It has the ability to see the communication between the browser and server. Click to enable this. I load NY Times, and you see the requests that were made. “Behind the scenes” so to speak. This lists all the requests. First is just the original site. So that’s a get.

If I click it, you see all the invisible headers to the server and the server’s response. Here are all the requests headers. It’s information about what I want. What’s my browser. Firefox here. The operating systems, but this is a lot of information. It’s useful to see that data. You can see the browser then see the server when it makes the response.

That’s definitely something you want when you debug communication problems.

If I went to Google.com and did a search. I’ll clear firebug, but see the search results. You see the letters I typed. Every one. It made a search already. Then another. “Web.”

You continually submit data to Google in every character. They have autocomplete, and it sends back matching search terms commonly used.

So “Web Development …” Click the search. Then I made many requests. The first was the get requests for the file. If you do this you see the full path of what you requested. Then the data after the ‘?’ Then Google tracks you.

Second is the request for something in here. Like the image. The Google sends back information about the HTML page then it requests a different file. But there’s one for the image. It’s not easy to tell where it is but it’s there. So you submit data in a get request in almost all requests. But it’s not always a post request.

So this is the form with the post method. I’ll keep firebug open.

My name. You will see the post request now. It says Post Process Data. You can see it’s a post request with the fire bug tool. Then the invisible headers, the language’s the computers speak and the browsers.

Then the first name field too, the last name field and you see you are sending the data. Then the response in HTML.

This gives you the view of the internals and how they are communicating. This is good with user data.

Back to this example.

Remember the form get and post here, then the difference is the method post the other is the get method. It shows how the method was communicated with the server. When I get that data in another strip I see the data in the get request or I can request the post request. Looking for the names. If it’s a get or a post. Let’s say it’s a get, the term you look for must match exactly the name field you gave. Here’s the form.

When you send the data to the server here’s the key you used for the data. I call it first underscore name. So when on the server side on the PHP when I look for it and processing the request it has to know the name of the variable. That’s why you code it. It’s not what’s in the ID field. We said the name and ID should be the same.

But if you said “first name 2″ that has to match too. That’s important. It’s counter initiative. In PHP with forms the name matching is the most important thing.

So here, this gets the first name field with the form method being post.

I used this variable but not get or post but it works for both. It has all the data for either form. These are built in PHP variables with all the information using a get or post. So whatever method you can say get the request and it gets all the variables submitted. Both get and post.

Just remember these are both ways to get information.

If you want to debug, and just like any array, this will output to a raw context.

I’ll show you.

The request array looks like all other arrays. These are the keys then the value, the index of the second etc. It’s treated like all other arrays but it’s built in.

A little more before I let you off the hook. That’s the gist of sending and receiving from the form. But you may want to do this through the link. It works the same way. It’s done only a little differently. It takes you to the page, think link, with the array in it. If I study this. [On screen.] This is a link tag but it has the data attached to where the link takes you.

So I say while you make that connection include this data about my name. It’s like a Form submission. Like the get method. The link passes the data. So the data is embedded in the link. It shows up like a form submission like the get.

This is useful too.

If you want to internally pass code. You click the link and it goes to a different page it’s nice to pass the data along with the request.

One more example.

Passing data using cookies. This is the last built in way the servers can maintain data from one page to the next. This is a cookie. This creates a text file on the client with some data.

This is storing the information on the page. The page can read what was saved in the little file.

This page is creating the information and storing it on the computer. Now this page is reading the little bit of information. That’s a cookie. It’s technology for storing information on the client.

If we look at the code it may make more sense. Set cookie and get Cookie are the two files.

It’s using a built in function called Set Cookie. It’s a built in function of PHP. We supply it with a couple of parameter. The most important being the name of the cookie. You have to tell the function the name, and value of the cookie and how long to keep the information around for.

This is written in PHP. This is telling the server to tell the browser to create information on the computer and store this value in it.

This is the way it works. I won’t get into details.

When you when to read that cookie you go to getcookie.php. It looks in the built in PHP cookie variable for the information. Every other page in the site can read the value of that variable.

I want to let you know what PHP techniques and technologies are around.

Questions? About anything?

Is it a lot of information?

Male Student: At one point you said that Google records and sells our information. It makes sense how computers communicate with servers. How does that work? I know it’s a broad question.

Teacher: Let’s load up another FireFox plugin. Let’s search in Google for Web Developer Tool Bar.

This is another add on like Firebug. The first result is the one you want.

You want to click the Add to FireFox button when you get to that page. This should pop up. Click install now.

That will add another extra functionality to the browser. Eventually you will get this box here to restart FireFox. You want to click the button to restart FireFox.

When that restarts you can see that there is an extra section up here in FireFox. The browser has an added capability.

We were going to google.com. Make another tab and go there. You have this web developer tool bar installed. You can see what cookies are being stored on your computer. They are big files with lots of little bits of information. The server tells the browser to save the file and put the value in it.

For any site you go to you can view cookie information for what pieces of information are being stored.

For Google, as far as my browser goes, there are no cookies stored. Do you all have the same thing?

Male Student: I have one.

Teacher: Let me make a search. Now I should have a cookie. Maybe my computer is blocking them. Oh, there it is.

I have two cookies. One being the name. This is some kind of ID that is a unique identifier.

This ID will most likely not change. It’s encoded to prevent you from seeing what they are doing. They are tracking your usage of the Google site.

When you search for anything else, they can say that the same user has done this search because they stored a piece of information to identify the user.

Does this make sense? It’s a unique identifier they are storing on these pages to see that the same user has been using the site.

If you have a gmail account where you entered your name or address, etc., they are correlating with what you have done here with what you have done on your gmail. They have that cookie set indicating that you are [name deleted for security] and your ID is 55307. Everything I do has the same ID. They track usage. That’s where the ads come from.

I’m a good web designer because they are advertising web design. They analyze what you search for now and the history. They analyze the emails you receive and send to people. They correlate all this data.

Whether they use it to generate these ads or not they have that data available to them. Everything in the google.com empire is being correlated. That’s true of amazon.com, ebay.com, etc.

Male Student: My ID is attached to what I search on their servers?

Teacher: You have an ID as a google.com registered user that’s associated with your computer in a cookie. When you go to the google.com sites it can read that ID. It associates everything you do on that site with that ID.

Google is in the business of advertising. Not all companies are that focused on targeted advertising.

Let’s go back to the list of examples. There is one more example that combines two of the other examples. That’s passing data using a combination of forms and cookies. We are going to submit data in a form and it will be stored in a cookie.

If we go to this site let’s view the cookies set for this site. There are no cookies yet being set for this page.

Now I’m going to be setting one. Let’s go here. Type in your first name. Click Go.

On this page now, if you view cookie information you will see that I set a cookie called First Name that’s storing your first name. That’s how this site grabs your first name.

Every page I make on this same site will be able to access that.

If I make a new page in this folder. Go to User Data. Make a new file in there. I’m going to call this test.php. I make a new file. I say echo, cookie, and first name. This is going to show you that on any other page on this site now I can get that first name value.

Now this page we are loading, has never asked you for this information. It’s an independent script but it’s still on the same server and has access to the cookie. If that was a user ID I would correlate the two pages together.

Male Student: So a website that keeps you on even though you go off, is that how you do it?

Teacher: Yes. Let’s try that out. Let’s close down the browser.

Male Student: Where’s it stored?

Teacher: It’s a file on your computer. They are stored on the client machine. Depending on when the expiration was set on the cookie.

By default the cookie will be gone when you close the browser.

Male Student: So that’s what Spyware is.

Teacher: This is the basics of Spyware. A lot of it is programs that run on your computer. They track it. This can be used for Spyware, but there are a lot of security preventions.

Adware would be a separate software. It’s not used for malicious purposes.

Male Student: Is this data kept there?

Teacher: Any site can store the cookie data there also.

I’m going to go back to the example we just made to see if the cookie is still there.

I’ve set an expiration date for a day in the future. This will be stored all day on my computer. I could set it for a year and it will be stored for a year.

I think that was it for my examples. Let’s make sure.

That was using a form to submit data.

You can use the cookies tab to view any cookie information. Almost every site on the web uses cookies in one way or another.

If you didn’t allow cookies to be used it will prevent any site from putting cookies on the computer. You will find that the web won’t work for you anymore. It gives you the information you are requesting in a proper way. You will see that it becomes almost unmanageable.

Let’s see if NYTimes is like that.

If I ever had to log into a site you can’t log in without cookies being set.

Male Student: One of the first items when you launch the page would be to look for cookies?

Teacher: Let’s see. If I go to blogger.com, which doesn’t seem to be working.

We can see how it’s done by using Firebug. Let’s see if this loads.

If I try to sign in, while having cookies disabled, it needs a Google account. It asks you to turn on the cookie functionality. There’s no way to keep track of you and make sure you are logged in.

It’s used for almost every site with a log in.

Let me show you how that worked if I did have cookies on. I’ll turn them back on and open up Firebug.

If I enter in my user name and password, and click sign in, you will see all the different requests that have been made.

It did the same thing. Let’s try again.

Making a request to the server. These are all the requests in Firebug you can see that you made to the server. I’m not sure which one it would be in, but you can see the communication between the client and the server.

The response was in the headers.

So at this point you see the request header has a cookie set. I don’t know how obvious but this shows the requests and you see all the different requests your browser makes then the cookies. You submit the cookie to the server. When all requests you get the header that says you have a cookie on the server. So that’s set and attached to it.

That’s it for those examples. Any questions? Before lunch? Anything? That’s a lot of information. We’ll digest then we’ll go through more examples and piece by piece. Let’s break then come back in an hour. It’s 12:20.

[Lunch.]