Web Development
Wednesday July 22, 2009

Good morning. I’m just going to bring your attention to some new blog posts.

I think we’re missing one person.

I will give you fifteen or twenty minutes to look these over.

[Repeating for the missing student.] There’s information on the blog I’m asking everyone to read.

Do you want a few more minutes to finish reading? It’s a lot of information to digest. You will give you until 9:30 then I will get into it.

[Students reading]

So I’ll get into a discussion about what you read. Any questions? Top to bottom the latest two postings.

The first is about uploading the files.
Click that link then the page looks like that. So this is an example of how you upload the files you name it then it’s transported to the server and it shows up.

Click browse files then click an image.
Like this button here, then it makes the request and passes the data. This proves that the file is uploaded and the new location. It’s in a folder called files sunset.jpg.

This code is in lowercase. If there were species you would use an underscore.

Then if you click it it takes you to the file. You see where it’s located. It’s on the server now. It’s off the machines and now on the server. This is how that process works

Then the first file is the HTML file. That was the first one you saw. There.

[On screen.]

Remember when you do the file uploading, view page source. The most important thing, is that the form tag has this ink type equals … so the server expects text but this says it’s getting binary form or a condensed form of data. So this warns the server about the data it’ll receive. But if you don’t put that in there it won’t work. So I need to remember this.

Student: If you upload an MP3, …

Professor: It’s the same thing. Let’s try it. So I’ll cut it up. Let’s download an MP3 first. I don’t know where I can get one …

I don’t think there are any on this computer. Well, 50 Cent …

Firefox is blocking this pop up. It’s harder than it seems.

Student: Do RCRD.LBL … [Giving him a new website to try.]

Professor: So I save the file to the hard drive. I’ll put it on the desktop.

I hit cancel!

There. It’s on the desktop. Then go back to the example file. Click upload then I’ll use the MP3. This should work. Click upload.

Student: There’s a way you could …

Professor: It’s more difficult that way, you would have to analyze the file. You don’t know what the file is. You would have to be more strict.

It’s been moved to files/1/ … [On screen.] So it’s there. The file should be there at least. This is the image tag. It’s trying to show it as an image since that’s what the code normally does.

Launch the Quicktime player. So you can upload the MP3 with the same code this says where it lives. But I think the Quicktime player just crashed. So it’s playing the file.

That’s how you upload any file you want to upload. It’s the same code.

Student: So is it different for downloading?

Professor: Yes. Uploading is the complicated part since there are restrictions on the server. But your computer when you go to any website you are downloading. That’s what a computer is meant to do. I can go to any file on the web and it downloads. It just pops up. So downloading is what you are used to doing.

When I click the download button it didn’t know what to do. The browser is not meant to play MP3s.

Back to the code. I’ll pull up the HTML. And NotePad++.

The important points were that you have the ink type section in the form tag. It must be exactly like this for all forms for upload. Then the method must be in post. Post does not stick the information in the address bar. But with a image file, it’s too much information to go in the address bar.

It will try to put all the image information in the address bar. I’ve never tried that before though. I’ll upload something not so big.

Click upload. I must refresh. Make sure the method angle changes to get …. but the browser didn’t even try. So there where built in error checks. The image file information was too big to get in the address bar.

So you have the ink type … the HTML tag, just like the ink type, it’s an input sub-variety and you must remember what it’s called. The name is critical to access the data on the server side. That’s it

The form tag and the input tag are the most important parts. Once it gets uploaded the server tells you where to get it. So let’s go there. That’s next.

So the first thing is this is in the PHP script. We made a post request and passed the data, and now we will store it permanently in a sub folder. This does the dirty work for us. The file has all the stuff to do it for us. It’s complicated but it’s well commented so you can read that if you want. We assume this works then we can just use this file.

So you upload the object. I won’t go into the detail about this but there’s more on the Blog and how you do the upload in PHP.

This is the object called “Uploader.” This has functions only to the object. This is one. It’s called “upload” that’s the upload function to the object. The function definition file is here too if you want to read it. It may not make much sense.

But to initialize the uploader object you need to give it a name attribute. In the HTML you had input type equals file. Name equals upload file. That’s in PHP. It tells you the data you want to upload. Then you name the parameter. It’s just a subfolder on the server. It’s called “files.”

On the blog you also need to be sure it’s writable by the browser. Some browsers don’t have that permission. Right click in WinSCP. On the server side right click. Properties in WinSCP and you see the pop up here. [On screen.]

You want the W checked. Some servers are set up for this or not. But be sure the W is checked. This allows people to write to the folder. It’s not score but that’s how you allow the people to upload files.

Now everyone has permission to upload files.

We initialized that upload object. Then we passed the limit of how big it can be. You could skip that too. That’s optional. That’s the initialization
In the form tag, the subfolder and the max size you can allow.

Then the upload function of the upload. We did all the settings and the initialization now we finish the job. This returns if it worked. This would say true if it ran the code. If it’s false then it skips the section. That’s the nature. If it’s true it runs the first part if it’s not true it runs the second part.

If it’s true it runs these lines. It’s getting access to where the file was moved to on the server. It stores that in the variable pack. Then you go to the success page. That’s what you saw with the upload.

Male Student: I think you changed it to post.

Teacher: I think I did. I can’t remember where the images are on this computer.

I’m going to pick any file. Upload it.

Maybe I didn’t.

Male Student: Process file php twice in a row.

Teacher: You guys are getting good at spotting these things.

It wasn’t an image. That’s why it don’t show up. The file did get uploaded. It was just a text file.

What was I showing you? We redirected from the page that was process file.php. That’s not what comes up in the browser. You are looking at success.php. I process the data and send the browser to another page.

I use that technique often. Two files to process and display. This is really doing an upload process, then passing the user on to another page. In this case it did work so we redirect to the file called success.php.

We did an example how to redirect in PHP Monday. This is how you do it. You say header. In parentheses header is a special function that passes http headers to the browser. You give it the name of the file you want to redirect.

We not only give it the name of the file, which looks like this, we are doing that and passing a query string on the end. This simulates a form of submission.

It says the path of the file equals the variable Path in a URL encoded way. If there is another question mark it will encode that so the browser doesn’t get confused. It will replace the space with a plus sign. It’s how the browser handles URLs without confusing them with the main part of the URL.

If I put another question mark you will eventually confuse the browser with all of these special characters that mean different things to the browser. The question mark means there is data being passed along. You will confuse the browser.

They accept URLs in a URL encoded way. You will see that on the computer, after you upload the file the file slash and file name have been replaced by a file%2f05… that’s because I’m running this URL encoded function on the variable. It puts it in a way that’s it’s friendly to stick up in the URL.

We are passing along the path. This is how we encrypt it to make it work.

We are passing to a file called success.php which looks like this [On overhead.] It’s almost entirely HTML. It’s a success, thanks for uploading your file. It also tells you where the file was uploaded to by outputting the request variable.

The request variable stories the data in an array. We gave it the name. We are also using that in the HTML image tag to be the source of the image tag. We put in the source attribute so the image shows up on the screen. It’s the same with the link.

Click the image. It will take you to the file.

This is a common technique for embedding bits of PHP code in your HTML. It has the source file. You use it where you want to show the image, this case in the image tag.

If this was an image it would have showed up. You can access the file directly by copying and posting the URL or clicking the link.

Let’s continue. That was if it worked. If the upload process was successful. If the function returns false we skip down the to L statement, which, instead of getting the path of the file gets an error message. It looks for an error message. This is built to locate errors and making them accessible.

You get the error and redirect to failure.php and pass along error equals, and the value of the error. You pass along the request you are making.

Failure.php is similar to success.php but it shows you the error message.

If I open up failure.php it says your image failed to upload. It outputs whatever you passed to this page for the request. That’s it.

There’s not a lot of code that’s different, but it’s the linking of these different elements that’s the critical part. How the data gets passed from one page to the next and how it’s uploaded.

Questions so far?

Scale of one to ten, one being easiest, this is?

Male Student: As long as you can cut and paste the code it’s not too bad.

Male Student: I figured that out.

Teacher: You start cutting and pasting, you go further as you go.

Well written code is easier to cut and paste. This code is pretty minimal. That’s indicative of good coding.

Just like JQuery you ran one line for the box. It’s a well written code.

If I open up uploader.php the file does all the hard work. It’s complicated code. It’s different from what we have done before in some ways.

There is a lot of code and a lot of comments so you understand. You don’t have to know any of this code to use this software.

I wrote this code from scratch.

It’s based on things I’ve picked up from php.net and other sites. I put it in a packed format that makes it easy to use for me. I took other people’s codes and put it in.

Male Student: Is all coding in English?

Teacher: I use a theme of Russian outsource. They create variables in Russian.

The character encoding, the letters available to programers is always Latin.

It’s not a good idea to program in other characters. Not all servers will support it.

It’s difficult for non-English speakers to program given that all the languages we run are based on the Latin characters.

They have to learn the letters.

Let’s go to the next bit of the blog post.

Any other questions about this example?

This blog post outlines everything I’ve just said. This is a good read if you are interested in pursuing uploading. This is meant to address some issues you will have in your projects.

If some part of your project is something you don’t know how to approach I will put stuff up on the blog to address your issues.

Sending email. This is directly addressable for those of you sending emails for your projects. Click the link.

You get to a page that has a form. I’m going to send an email. I’m going to call myself Rahm Emmanuel. Rahm@whitehouse.gov. I am going to send it to an address I can pull up quickly, which is a mailinator address. Subject? You are doing a great job, keep teaching web development. Thanks Rahm!

You can spam anyone you want with simple code. This is similar to the uploading example. We had form. We entered it. It said it worked.

If I go to mailinator and check the inbox for the email I used I seem to have gotten an email from Rahm saying I’m doing a great job. The point is you can pretend to be almost anyone by using some simple PHP code.

Sophisticated IT people can tell based on the headers that are you not really Rahm, you are probably spamming.

The average user doesn’t have the know how to figure that out. This is how spam works.

If you don’t have the technological capabilities you don’t know. You can get spam from just about anyone.

The code is only a few lines of code to do that. Let me pull that up. It’s in the email folder. I’m going to pull up the HTML first.

HTML is a simple form. There’s no special requirements. It’s the from. Method equals post. It could be get in this case.

The data gets sent to the file after you click submit. There are a few different fields. One being your name. One being the email address. The other being who you are sending it to. Subject. Then the message.

These are regular form fields. There’s nothing you haven’t seen several times before.

All the real processing happens in the script, which is where the data gets sent to. Let’s check that out.

Processemail.php. This does a simple creation of some variables to hold the data you sent. It looks for the names, emails, subject, etc. It’s collecting the data you submitted along with your request.

Then it puts together headers, like the browser sends headers behind the scenes. There’s a language communication behind the scene. Email has the same concept. Headers behind the scenes indicating who the message is from, who’s CCed on the message, who’s BCCed on the message.

This is the way you assemble the headers necessary for a normal email. You can copy paste.

There’s a from address. The name of who’s it’s from in greater and less than brackets.

If you see the mailinator example, the from is taken from the from header.

The reply to, you can sometimes ask someone to reply to a different address from where you sent it from.

This xmailer header is not required. It helps to avoid being labeled as spam. A spam detector won’t accept the mail from this place.

We are just indicating that it was sent from PHP. We are giving it the version of PHP used to send this email. You can pretend to send it from Outlook or another mail program. I’m being honest here.

You have to try to send it to know if you will be blocked.

We put together the headers in a variable called headers so we can use it later.

This is the command that does all the work. This is a simple PHP built in command called mail. The person you are sending to, subject, headers, etc. That’s it. It will send an email.

After it sends the email you redirect the user to success.php. We are passing along the data of who we sent the email to.

Questions so far?

Male Student: Can attachments be in the headers?

Teacher: It would be a more complicated header. There’s a boundary between the normal header and those related to attachments.

I should probably come up with an example of that at some point. This is general.

So now we send the browser to success.php. If you open up success.php. You see it’s a regular HTML file. You attach the data that you passed along the request and that’s been seen. Then you get the headers.

It comes down to using the mail function. It sets up the variables to call this mail function then the function does all the work.

You tell me! It’s easy! Instead of asking the user, you say here to Jeremy@wherever. If you hard code these the user can’t change them.

That’s what I wrote on the blog was an example like this. If you want a contact page then this is the example I reworked the example. It has the data in the drive already hardcoded. Then in the HTML you would … [On screen.] … take that — you don’t ask who they want to send the email to. Any questions?

Student: For the subject line, could you — in the actual code — do you have to … make a message so when the email is sent, I can tell if it’s from my website?

Professor: You put what they entered with some pre-form thing. Say subject equals from my website dot etc. That leads the word.

So you are in control and my modify them. You are not stuck with the data the user entered. Any questions?

Student: Like if it’s from my website that’s visible in the fields? It’s in the subject fields? It’s visible to all who view the page?

Professor: No. Think about what’s visible to the viewer on your page. What controls what they see? Where is it in the code?

Student: The input field next to subject.

Professor: In the HTML page. Index.html. So they see this when they come to the site the process email has not been submitted. So you would modify something in the index site.

I could say here’s the subject line then add a default value of for that site value = message from website colon … then the default message is in the field. Upload. Then it’s repopulated. The user could delete it but it’s not reliable nor user friendly. I would do it the other way with the PHP script. But that’s another option.

Any text field could have a default value. That’s in default attributes. Any questions?

Now we’ll move on to the question of sanitizing data and that’s not in the blog. You could search it, but it’s not updated search of “sanitize.” The second post down. I changed the sample code. The same concepts but the code in the example is slightly different.

I’ll pull it up. In the folder for class 8 there’s the sanitized folder. That’s the example I’ll show. So when you deal with data entered in the user form, you can’t trust that they haven’t tried to hack you. Most won’t but some do. It’s a surprisingly large number too. Maybe they just read it somewhere and tried it but I see it a lot.

You want to avoid HTML code in the message forms or text inputs. You don’t want anyone to write code. Like in a contact form or a blog you created that posts under the header, or a list of animals, etc. but you usually don’t want users entering HTML code.

What this example does, is it does not allow people to submit certain data. It DOES, but it ignores it or codes it so it’s safe. So you remove the malicious bits of code. When you sanitize any of this, this success page is the same process. You get redirected here.

It shows the original and then the sanitized version. You see the difference here. The original, dirty text is here. That’s the user. That’s valid. Then this is the “clean” data. The less thans have been converted. So it’s not functioning HTML. The characters were coded to just be text.

In the browser these look the same since the browser is trained to see it this way. But it’s been coded from HTML to just text.

But if I did this … [On screen.] Someone could try to enter a command. People can do that successfully. There are loopholes. But I click sanitize then you see the original query. Then you see the sanitized version. If you view the source, here’s the original that would’ve been run if you get the PHP to do so, and here’s the sanitized form. Many of the characters are converted into codes. The parentheses were changed to a not valid code. We’ve encrypted them to not be valid code. That’s the sanitized function which works for different codes too. It elements those harmful characters.

Any questions about sanitizing?

If I stored this I would want to protect my database from evil code so to speak.

That’s in the sanitized folder. The first page with all projects are the index.html page. This is a regular HTML page like the last ones it’s just a form with a text area field.

The form submits the data to process data.php. It sends in the post way behind the scenes. When someone entries this field it gets the name and data attached to it.

Processdata.php is the script on the server side doing the sanitizing. So with the upload example I have sanitze.class.php. You just have to know how to use it. If you want to see the code you can check in there. This is back to who writes this? It’s a combination of mine and others thrown together. There’s no originality here. I stole a lot of this. It’s linked through my code too.

These are the original people who wrote it. I repackaged the code for me to be more helpful with this class.

First, you get the dirty data, or the raw data from the form. That’s in the request “data” since it’s in the name in the form field.
This is just the notes for how to use the function. Then you decide what languages you want to protect against. Like prevent to remove characters with HTML. This is the list of the languages you could prevent the characters from being exposed.

Paranoid will clean out the characters of the text. That clans out the special characters.

Sometimes you want to allow a certain language, but Paranoid is best.

I’ll show you how to combine, is all you do is add the plus sign. These variables interfere [On screen.] You add the numbers. This indicates they are adding, but you don’t need to know that you just see the plus sign then put together the coding you want.

That’s set up and this is the type of sanitizing I want. And you store it in the variable called flags. Then you pass the data and how you want to clean. You store this in “clean data.” You send it through the function.

Then redirect to success.php and pass along the dirty data. Then pass the clean data to another part. It’s the get form here. You separate them with the %. It would automatically do this in some places.

When you get to the results page, at the top on the URL, you see there’s lots of data here. You have both the dirty and clean versions. This success page success.php echoes out the text area. The dirty and clean datas are in these boxes.

I could’ve just echoed to the page directly but it wouldn’t have been as good. If you echo it out that way it’s interpreted as HTML. The tag shows up on the page this way. If you view the source you see the differences.

That would be the first step to anything related to a database. When you store anything in the database from a user you should be paranoid and not let them put special characters in. That’s the general rule with databases.

Questions about this example?

I’m going to move on now to the last folder in this class 8 folder. The blog example. Some of you will be creating blogs for your project or some message board functionality. I want to show you an example of how to approach that problem.

This is a blog example. It doesn’t require someone to log in to setup an account. I don’t think you are ready for that complication. It allows anyone to post a message.

Go to that page. You can click create a new post. This takes you to a form that asks you to fill in the details for a blog post.

I’m going to say, this is the second post. You’ll see that it shows up on the main page after I click submit.

I’m entering in some data. I click submit. It does something with that post. Magically it shows up on the page.

I have these HTML posing that are relatively static and show you content.

I have the form allowing you to enter data. Clicking submit processes it. Redirects you back to the index where your data will show up.

Let’s go through step by step, how that works. Questions about the flow?

I’ve also included here the edit and delete links that allow you to edit and delete any post. Anyone on the web can edit any of these posts now. You probably don’t want that. This is to be thorough with the example.

Remember the MySQL query? We created rows. We updated using the update statement. Deleting with the deleting statement. This is a gateway to the command.

This is a content management system. We are allowing users to manage the content on the site without any code. This is a typical way to do that. I can call this title second post. Click submit. It doesn’t update commands for the second row. It overwrites what was there before.

I formatted the dates to show you how to date the rows. They look a little prettier here.

You can delete. It runs a delete MySQL path on this. Anyone on the web can delete anything on this blog.

Let’s go through that code.

I’m going to start with the index.html. You can see there are several files in here. Let me go through them.

The database folder has the information we are connecting to the database from yesterday.

Index.php. That the blog’s latest posts.

Create.php. Let’s start the index and go step by step.

I have divided this project up into, conceptually, an MVC concept. If you are interested in web development, if you go to the blog and search for MVC. There are several posts related to MVC architecture. This is the most advanced article. It explains the concepts behind the system.

I can show you, but that will be a good reference for reading more about it.

First we connect to the database. We do this with every database page. The last thing is to disconnect from the database.

Here I include MVC, model view controller. This is the controller. It’s the logic of how the page works.

The model would be all of the things related to running queries on the database. Updating, running, etc.

The view is the file that has the view, which is the HTML template we use to display the page. What you see here is the view.

The controller decides what to show you and how to get the information from the model. The model is the direct link to the database. The controller gets the commands from the model. It includes the view, which shows you the data in a nicely formatted way.

When you go in the browser to load your file, you are loading a controller. Index.php is a controller file. That controller file asks the model for a list the of the latest blog posts. It tells the view to display them. The controller issues the logical commands.

Male Student: What is the model?

Teacher: Let’s look at blog_model.php and you will see.

There’s a function here, get all posts, which is the main function we are using. It runs a query to get all posts from the table and put them in an array. It returns that array.

This function, get all posts, runs a select query on the database for all of the blog posts. It loops through each post and puts them in an array as a new element. When it’s done it returns that array.

From the controller, to get the blog posts, it says to run that function and put the results in this thing called posts. The posts now has a list of all the blog posts.

Does that make sense? Assume that this is not quite object oriented coding, but the idea is the same. It is encapsulated. We remove the functionality for the main script. It’s stored in another file. This is just the glue holding together the model in the view. The controller decides what to get and how to show it.

I have included another special thing which detects what view you want to load. A normal view or RSS view? I haven’t gotten into RSS yet. Probably tomorrow or early Friday.

I can say question mark, type equals RSS. It will load an alternate view on the same data. You can have different versions for different readers.

This is a piece of data submitted with a request for the file, in the get request. This code knows to look for that type. To put it in a variable called page type. If you entered the words RSS you get an RSS view file. If you enter no word you get the normal HTML view.

RSS is a different markup language. It’s used for something like Google Reader. Google Reader understands RSS, not HTML. It presents the same data, in a format suitable for Google Reader.

Every blog has a page like this. The way you load my blog is because there’s an RSS on this page.

When you see this orange icon on top it means there’s an alternate view, an RSS view.

Click that. You will be taken to the equivalent of what it created. This is the RSS view of my blog. If you view the source you will see that the page source is like HTML, but it’s not, it’s RSS. It’s the same data, same posts, presented in an alternate markup language. A language that blog readers understand.

There are tags like HTML tags, but they are different. This is also based on XHTML, which is any tag language.

This is another subvariety of XHTML that has a different set of tags. No head tags, body tags, etc., they are different. I will leave that to you to explore.

The point I’m trying to make is that you can apply different views on the same data. You separate the data on a different view.

There are some people who create views just for the iPhone. You can customize the view depending on how you put the presentation for one thing to another.

You can tailor make your site to fit one device or another. It presents it in a slightly different way.

You have alternate views. If I view the file you will see it’s mostly HTML with a 4H loop looping through each post.

If you open the RSS view, it’s the same exact thing, but it’s entirely in RSS code. This is how you would output RSS code like HTML. It’s not a div, but item tag for each blog post.

It’s interesting to go through here on your own. See how they are similar. The tag names are just different. The markup tags are different for the presentation.

I’m focusing on the HTML version. It’s possible to apply different kinds of views to the same data.

The controller gets the connection to the database. Loads the file with the information to access the database and get the data. That’s the model. It’s runs a function that returns a list of all the blog posts then decides which view to use to display the data.

We didn’t say type equals RSS so it will be the standard index_view.php. It’s a normal HTML file. It has a 4H loop down here. For each element in this posts array, this list of blog posts, it’s going to output a div like that. This is the template for each blog post.

It has a title in an H2 tag. The data. The message and links to edit and delete.

This is what I want to focus on. The rest is like what you did yesterday.

These two links link to update.php and delete.php. Look at it in the browser.

If I click edit it takes me to update.php. It also passes along the data saying post ID equals 76. It’ the ID of the blog post I want to edit. If I didn’t have that it wouldn’t know what to edit. It was passed automatically when I clicked that link.

This is explicitly that. It is used for a template. It works the same for any blog post. If there were any blog posts the template would be the same file. It loads different data depending on the ID.

To go back to the update.php is the link. Question mark, post ID is the post. This is number 76. For a different blog post it would be a different number. Same for deleting passing.

Let’s open up update.php. This is the controller for that update screen. This is the update page. What we requested is not the HTML file. It’s update.php which is the controller file and just has PHP code. The logic happens before that. The view is the dummy template. The logic and database processing happens before.

First we connect to the database. Then last is disconnect. Between we include blog model.

We get from the request field the piece of data we sent. We store it in the post id. Then we check to see if there’s something in the request field about the post title if they are empty they’ve been submitted.

This script loads the data to a form then it processes the form. It submits the data to itself. It shows that it’s been posted. Then it calls the update posted and it magically modifies and then redirects to the index. But if a title or message has not been submitted it displays you in edit form. You get the select statement. This takes the id of the post you wanted the data on.

The view is the presentation, HTML. Don’t get bogged down since you have the projects, but I want you to know the flow from page to page. That’s critical. How does the data get passed. I’ll leave the example as is. Then you may explore that code.

Any questions? The rest of the day I want you to devote to the projects and getting the HTML work done today. There are two more days to finish so the HTML should get structured solidly today. So you have 6 hours for that.

If you have issues over this, I would come around but I’ll leave all that on the screen. Any other questions? So get started!

[Students working or taking breaks.]

Don’t forget to take lunch. We’ll break until 2:05.

[Lunch.]