Web Development
Thursday, July 23, 2009

Professor: Good morning, everyone. I want you to read the latest blog posts that are up there. There are two new posts. We’ll be covering four examples and the two discussions. You have until 9:30 to read through this and then we’ll go through them.

[Students reading blog.]

Professor: Has everyone gone through this stuff? I’m bringing some examples up on the screen. First I want to talk about adding “search.” There are two options for basic search.

One is creating your own search using SQL or using Google’s search which is a custom search. There is a Yahoo! version of the same idea that’s a cut and paste search. There is a third option but it’s the same as the Google search. The Google search – if you click the link here [On screen.] you’ll be taken to the Google search link. You create this custom search and it asks you the name you want to give it.

I’ll say Web Dev Custom Search. You can name it whatever you want. You all have Google accounts?

Student: I do.

Professor: Ok. So search engine description. An example “example for class.” Only search in this case for the site I selected meaning I only want to search my own site. Not the whole web. [On screen.] Let’s put destination as [server name deleted for security].com. The first is the blog and [server name deleted for security] is the web server. You can pay to get the ads removed. Read the terms of service. Ok. So here we test it out. Let’s test for PHP. There should be a lot of “Stuff” there.

Ok. They have a few. They have one site which is the home page. Not such great results. I know why this is. I have a setting to prevent indexing the server. This would normally work on another server.

Click “Finish” and in here is the code you should copy and paste. If you click “custom search element.” I’ve set this up for a class before so my version is different. If you click on the right most link you’ll see the code you can copy and paste to your site. So you take the code, copy, go to your HTML code and paste it. It’ll show up like the example I showed for the blog.

Student: You put that in all your templates?

Professor: If you want a search box in your heading then you can do that. If you want to repeat the image you can put that in the header. Same idea as that here. You can include that in your templates.

So that’s Google custom search. Let me bring up what I did on the file system to prevent a search engine from showing results. If you search for [server name deleted for security].com in Google you’ll get some results.

Student: Domain … [Can't hear/can't understand.]

Professor: You would expect we would get more hits for the projects we’re doing on the server. You have a lot of files on there but they’re not listed. The blogs listed that link to the server. But the server itself – none of these links connect to the server. That’s because on the server itself I have a folder called “robots.txt.” Robots.txt is a special file name that Google checks before it lists your site. Google still can index this and not publish it. But this is an instruction to ask Google not to publish it. They can ignore this and publish it if they want. But for now they’re not publishing and respecting this file.

Don’t allow indexing from the start of the server. Don’t index any of these pages. Google has robots that try to index every file of every website. But when they see this [On screen.] they won’t publish this file. So this file you can just copy and paste. I can also say don’t search my personal folder. But it’ll still search for other folders. You can specify and allow and disallow specific folders. You can have different permissions for different folders.

For this server — we don’t want to publish to the world everything we’re doing in class. The blogs are not on our own server so we can’t control whether or not Google hits them or not. The Yahoo! search engine does a lot of the same thing.

For their new product which hasn’t been published yet — I believe they’re more discreet about the logo they put on your search. So Yahoo! will look a little more nice than the Google one.

Student: There’s Yahoo! and Google?

Professor: In terms of service there’s a clause for the search box otherwise why give it away for free. So it takes you to their site. You’re taken to Google.com. For some web developers that’s a problem. You maintain your users for as long as possible. The reason why we design information is to keep people on your pages. So you want patrons on your site. You’re running ads and the more money you get from Google. So by taking users away from your site, Google is doing a disservice to your site. So it’s your job to try to bring them back.

I don’t recommend you use Google for a custom site. But for testing it’s fine.

I would never suggest to a client to have Google host the site. There are companies that do more elaborate search engines on a professional site. One was a client of mine actually. It’s transparensee.com. It’s not a good website. They have headquarters down the street. They create search engines. Like dating sites for example. They allow you to search by multiple categories. It’s usually way out of the budget of small clients. Unless your client has a big budget

Student: What’s the cost?

Professor: Probably 100,000 a year. It’s a yearly fee. I’m sure they make deals for budgets.

But this is actually an interesting product. If you click around there are examples I’m sure of how their engine works. There are other companies that do the same thing. You would need to license a product like this. I believe there are PHP companies that do search functions for you so you don’t have to write it all from scratch. Writing a search engine is taxing. So if you’re interested in doing a search look into these third party tools. The PHP or the full fledge package. For our purposes in this class the MySQL and Google are the only options. Let’s go to MySQL.

Those two examples in the folder I uploaded on the server are here. So go to [server name deleted for security]/[name deleted for security]bloomberg/summer2009. You see MySQL search at the bottom. So this is the first way you can do a search in MySQL. But I’ll show you what it looks like. You can control what this looks like. This is all YOUR own code. This is not copy and paste. This is searching the blog post from the examples I showed yesterday.

We can create more blog posts and more results will show up. For now, that’s the only post in there. This is a crude way to show that I’ve done a search and I’m showing the results. You’ll need to customize this for your own sites.

If I search for “sad,” it’ll pop up the results. These are both fine for using against MySQL databases. But this will never index every single word on every single page unless every single word is on a MySQL database. If you have hard coded XHTML, this search will be useless. Your options are really limited.

You only have these two options. Google custom search has more features. But the MySQL are totally customizable but only search what’s in the database. That’s the tradeoff.

Let me bring up the code for the LIKE type of search. That’s a MySQL search. In my folder in the account there is the SQL search folder. You can check out the code there. Go to index.php and open that in your text editor or just look on the screen. You’ll see that I’m connecting to the database at the top. I’m including two libraries. One has all the information about connecting to the database. The other one has all the tools we use to sanitize user data. That’s from yesterday’s example.

Then we look to see whether a search term has been submitted for in a form field. That means this page has been requested along with data you want to search for. So remember there are two states that this page can run in. The first time you load it and haven’t done anything, that’s the default state. There’s no search term that’s submitted yet.

The second state is when you enter a search term and click “submit.” That reloads the page but has the request for the search term. This is then sanitized. Remember from yesterday how we sanitized the code. This is how you do it. [On screen.] You’re sanitizing against HTML and SQL. You can check that from yesterday’s example.

Then we ask if there’s a search term actually submitted. One state there is a search term; one state there is not yet a search term. If there was a search term, we create these two SQL queries. The first query says get all the fields from the blog post table where the title of that blog post — the title is a field in the database — where the title is LIKE that variable name.

Whatever the user entered in the form, if the title is like that, it’ll show up in our results. I’m surrounding the search term word with % signs which indicate wild cards. That means the search term doesn’t have to be a full word. If I search for “sad,” it would match not only “sad” but also “sadness,” “unsad,” etc. That’s because there’s a wild card before and after the search term. If I only had a wild card after the search term, it would only match “sadness,” etc. Wild cards match terms.

So it’s searching all the fields in the table of blog posts where the title field is like that search term. That’s the command. It’s just like this SQL commands that get all the rows in a table that’s WHERE 1. That gets all the blog posts. This command limits the results.

Then we make another variable. I want to search more than one field. I want to search the title of the post as well as the body. I want to search the body field, too. So I say select all the fields from that table again. This time I say where the message is like that search term. It’s the same query but searching a different field.

Then I can run these two together by saying run that query and then union (which joins the two queries together) the second query. This is the final SQL command we run. It’s the entire first query, union, and the entire second query. We can run two queries at once and the results are sent back together.

We get the results. We put them into an array called “posts.” Then we include a view which is the HTML file that displays the results in my post. The view goes through the array and outputs the results row by row.

We can look at that. It’s a simple file. There’s a regular HTML file. It doesn’t have anything especially interesting in it except for that loop. [On screen.] If there was a search term, it says you searched for whatever the search term you entered back.

And this is the loop that goes through each row of the array we created of results. It then outputs a row in this table. [On screen.] I’m flying through this quickly. I’m scrolling up and down, but I want you to get the idea that we’re doing a search by running a query which is a series of two queries joined by the union command. We put it in an array and then spit it out in an HTML code.

If you’re interested in this, I’ll come around and help individually. So that’s all I’ll show for this example.

The other example is almost identical with slightly different queries. So instead of searching all the titles with the like search term, we’re going to search multiple fields with one search query. That’s the only big difference.

That’s it for this example. If you’re interested in this for your site, I’ll come around and help you set it up.

The next example I want to go through is the next post down on my blog. It’s about spiffing up the browser address bar with favicons and Fancy URLs. A favicon is the little image that shows up next to your site. If you go to any major site, like the New York Times, they put the little “T” up at the top. A lot of sites have this. It’s a nice addition. There’s no reason you can’t have that, too, so I recommend you have it up there.

So this post tells you how to do that. Click on the “what is a favicon.” There’s a post about that topic. The image needs to be 16×16 pixels. That’s a constrained space. Let’s look at an example of that. I’m going to pop open Photoshop to show you how to start the process.

Go to All Programs. Photoshop should be there. I’ll give you a second to do that. That’s Photoshop and how it starts out. There’s nothing on the screen. When you first create any image is go “file” and “new” like any other program.

This page asks you how big you want your image to be. So we want our image to be 16×16 pixels. So set the width and height to 16 and make sure that the size is pixels instead of inches. Choose transparent for the background. That’s probably the best option.

We have a 16×16 transparent image set up now. We click “ok” and that pops a box which is your space to work in. You can go to “view” and zoom in. Control-plus does the same thing. It might help to view a bigger size. This is where you create a favicon. Maybe I just want some text. I can select the T icon on the right-hand panel. This allows you to write text.

How many of you are familiar with Photoshop? Most of you have seen some of this. I’ll run through the very basics. You select the T to write text. There are different options. You can select the square to create a box. You can also use other shapes by holding down when you click the square.

Right now we’ll just do text. I click on the T. I click and hold and draw the space I want my text to be in. I’ll select the whole space. So now you have your text container created. Now you can write something. I’ll just write a word. I’ll write O. It doesn’t show up very well. It’s a pale blue because my foreground color is pale blue. Someone else using this program set this as pale blue.

So I’m going to change my foreground color to black. There’s a shortcut to set the foreground as black and the background as white on the palette. So I’ll click that and rewrite O. I’m just going to put an O and a P. That didn’t fit. We have limited space.

I’ll move the O to the center. You can just click off of it and click any other tool. That will select your text. Clicking any other tool makes it so you’re no longer typing text. The icon with the arrow is for moving things on the page. So I can select that arrow with the crosshair next to it and move the O around somewhere on the page.

I won’t go into any more design other than just typing text for now. But there’s a lot more you can do in Photoshop. We just can’t cover all that in this class. This isn’t the most exciting logo, but you can play with your own. There are a lot of tutorials online for this sort of thing. I’ll save it.

I go to File, Save As, save it in my folder as favicon and save it as a type PNG. PNG is a standard format for images on the Web. There are three formats that work on all browsers. There’s PNG, which is becoming the industry standard. There’s JPG, which is for more realistic photos. And then there’s the crude animation or graphic design format which is GIF. Those are images you made from scratch.

They each have different compression mechanisms by compressing the data. The JPG compresses so photos look better. The GIF format isn’t so good for photos. PNG is actually good for both types of images. That’s why it’s becoming more the standard.

I’ll save it as thefavicon.png. You don’t want it to be interlaced. So click ok. Then we have a 16×16 PNG image file. The browser doesn’t use PNG files for favicons. So we have to convert that into a format the browser understands.

So go to my blog. There’s a link to a page that someone made that you can upload your image file and it will convert it to ICO file. Upload the image you created by clicking on the favicon generator page. Then click “create icon.” They give us a preview down here. This is my O. Hopefully you will make something more interesting.

I can click the download button and save it to my computer. It’s now in the correct format. We can click ok. We save it. And now it’s saved to my desktop.

Then go to back to my blog post and make sure you have on your code and HTML a code that looks like what I’ve highlighted. This is just like a style sheet. You tell it the relationship. This is another link tag. But you say the relationship is a shortcut icon. That’s what they call this favicons. You give it the location of the file. So we’ll add that file to the server.

I’ll put this at the root folder since this is the favicon for [server name deleted for security]. You find where you downloaded the file, upload it to the server folder. In this case I upload to the root folder.

I’ll put it in the SQL search folder. That’s the example I’ll use. So I’ll drag it into the folder and click copy. Now it has the favicon in the folder. I’ll include the link tag. Go to the HTML in that folder.

That’s not my HTML file … [On screen.] … so in the header you want to do another copy and paste job from my blog. Copy this whole line and paste the link tag in your own head. So as long as the favicon is the root it should show up. So I’ll save that and re-upload it to the server.

Now it should show up. Web browser … [On screen.] … there you go!

Up at the top we have that little icon. So I used this as an example in the search. I had this file already. You can do this with any HTML file and it’ll load the icon. It doesn’t HAVE to be special. It doesn’t have to be a fancy icon. It’ll give you more of a slick look. This doesn’t have a slick look. [Joke/joking.] Any questions about that? Anyone have problems getting that done?

Student: I can’t get it to load

Professor: Let’s go through step by step.

Student: Go back to Photoshop. My problem is that I want to set it to be transparent

Professor: This is my default view. Go to “Window” and click “layers” they say they’re selected but they don’t show up on my screen. It’s on top there [On screen.] No that’s not right. Let me figure out what’s wrong here. [professor programing.] I have two monitors that hid one. This is what yours looks like right?

You can go to window and select which one you want to view. I want to look at “Layers.” That shows you can have multiple layers in Photoshop. If you want to make a background make a new layer. You can create a new layer here. There’s a folder … like this [On screen.] like a new page. There’s an icon that should say “create new layer” when you mouse over it. Then you fill the layer with the color black.

Student: That’s what I did.

Professor: So you see the gradient? If you hold down on that you see there’s another option, the paint bucket, that’s what you want. The foreground – that’s the color you want your icon. So if you click on the color pallet you’ll see. If I want the background red, I’ll “Fill” it with the color red. That covered the text. The text is still there but in another layer. So I click and drag the text to superimpose it on the background.

Student: My text is on the left and yours is centered.

Professor: If you have the text selected – click the move button and you can move the text where you want.

Student: Ok.

Professor: So let me walk through the setup in case your setup isn’t showing up. First, make sure in your HTML code you have this [On screen.] thing in the code. This is critical. If it’s not there it won’t show up.

So you want to make sure that EXACT code is copied from my blog and put in your style sheets. So that’s the first step to make sure the code is accurate. Then make sure that you understand the favicon is in the same folder as the HTML file. So look for the favicon. If it’s NOT in the same icon in the server it won’t show up. So go to “file Manager” and make sure the favicon.ico file is in the root folder for this project. That’s the second step.

Make sure first that your HTML has the file in it is the first step. If these two things are correct, when you view that in the browser it should always show up unless there’s a problem with the file or your HTML code. So check those two things now. There’s not much room for error. If the file is converted to an ICO file it should be ok.

Student: Mine doesn’t convert.

Professor: I’ll go through that. If you don’t have Photoshop you can still create icons by using this link. You go to image to create icon from selection. Make sure you select PNG file. And click create icon

Student: It gives an error.

Professor: Be careful. I’m not sure but when you’re in Photoshop you save your file as and it’s easy to save it as PNG but unless you tell it to read PNG in the format drop down you may have problems.

Maybe that’s why it says that it doesn’t understand the file because you didn’t tell Photoshop to read the type of format it is in the save as menu.

[Bell ringing]

Professor: Don’t worry. We’ll burn with the building. [Joke/joking.]

So if you did save that correctly it should work.

So we go now to the blog again. Where is it? I’ll let you play with that on your own. I just want to bring up fancy URL’s. Any questions about the favicon?

The fancy URL’s are what you see — remember we tried to find sites that had dynamic content? Remember how we talked about how PHP indicates the same header but the content is different from day to day? I used Amazon.com as an example of templates. I clicked on “Books.” If I click on any of these books here like the “Shanghai Girls Novel” you see it says Amazon.com/gp/product and the product identifier. I’m guessing this file doesn’t really exist on their site.

This is a Fancy URL that hides the fact that there is no such file. It uses this as a unique identifier that loads content. Most sites won’t show you the actual file names. This makes it seems like there are separate HTML files for each product. Amazon has millions of products so there’s no way there’s a separate file for each product. I’m assuming this is a fancy URL’s or a “fake” URL.

Let’s see another example. Anyone have a favorite blog?

Student: Engadget.

Professor: Ok. That’s a tech blog. All blogs are similar relatively. If you click on the articles like “Rubik cube” you’ll see it says 2009/23/rubix/ … that’s the title of the article in the URL. That makes it easy for search engines to index this site to say “this page is about the Rubik.” If the URL had some number in it it would be harder for the search engine to understand that this page is about the Rubik.

So fancy URL’s are useful not only for you to see what the page is about by name but also for search engines. The search engine understanding what the page is about is the same as you understanding what the page is about. I don’t think there’s a folder about “Rubik.” It’s unlikely they created that folder.

Student: The header …

Professor: Header?

Student: In the header there’s an article and they have something that …

Professor: It’s not a real URL. Exactly. That’s the point. So we can go to the example on my blog. Go to the blog. There’s a post here and a link to a post to read what I mean by fancy URL’s and how to create them. There’s a description of the technology and how to make them. You can go through that post on your own.

If we click “example of fancy URL’s ” That example pulls data from the table we made with the animals in it. Remember that table? We selected those rows and showed them. This does the same thing. But the URL is class 9/mod/animals. This is the example folder for this example. If you go to the class 9/mod_rewrite folder you see there’s no such folder called “Animals.” That folder doesn’t exist even though it’s shown here.

Since we have access to the server you see there’s no such folder. I just wanted to make this URL look pretty and interesting. If this were a shorter address it may look like [server name deleted for security]/animals. You can make a fake URL anywhere but to keep this example short I put it at the end.

I’ll now show you an XHTML access file. It’s sometimes hidden. Any file with a dot in it … I’ll show you what is in these file. Dot HTML access. This is code for mod_rewrite. This is technology that is used on Apache servers which is the software we use to respond for different websites. Most websites use Apache to handle requests for certain websites and sends the data back to the browser.

This is turning on the future called mod_rewrite which is a module within a patch. This is just a technicality to how to deal with links. You copy and paste these two lines and don’t have to change them in rewriting. The second thing I’m doing is saying “all URL’s are going to start with this backslash/2009/mod_rewrite” [On screen.] That’s the URL we’re dealing with.

We’re not dealing with any other URL’s in other folders. The pound signs are comments so you can leave notes for yourself. The next line of code says “if the user requests the folder “animals” send them to PHP.”

This carat sign (^) says that’s the beginning of the folder name. And the dollar sign ($) means that’s the end. This is a regular expression which only matches an exact piece of text. It only matches “animals/” If I didn’t have the carat in the beginning, it could match words other than animals. So I would recommend using the carat at the beginning and the dollar sign at the end. That ensures the right match.

So this says to match “animals/,” and instead of responding with the contents of that folder and getting an error, send the browser back to the contents of this file at index.php. So far so good?

Any questions?

Each of these links I’ve set up. I’ll click on lion. Each of these links is taken from a row in the database. All the rows in the database have unique identifiers for each animal. So I’ve linked not to some meaningful URL but to this “animals/” and then the ID. There’s no animals file. So this is a totally fake URL. But it’s useful for us and we link it up to the one animal. I’m getting the information of what animal is being clicked on even though I’m not using the long query string.

Behind the scenes, the query string is being attached the URL but it’s hidden from the user. Does that concept make sense? That’s the idea. So this second rule is responsible for that number system.

So if the user is requesting the word “animal/,” and this is any number, this indicates a regular expression code to match any number. It matches any number in the space. Then there’s the end. There’s no text after the number. So this matches any animal/ and any integer. So it responds with the contents from index.php and the query string of the animal matching that same number. So this looks like a PHP variable. So this is a regular expressions way of matching this piece of text, in this case a number, and using that text for this position.

This takes you from what you requested, meaning you requested a folder named “animals/ plus some number” and then gives you whatever the response would have been if you had requested it in index.php. We’re converting this fake URL into a URL that looks like animal_id=2. So this makes it look prettier. You don’t have all the other technical looking stuff that exposes the internal workings of your site. That would make it easier for people to hack into your site. You might not want people to know you’re running PHP code.

If you just say “animal-2,” they can’t tell what language you’re using. That adds another layer of difficulty for hacking. So do that as much as possible on your sites. These two rules will cover most cases that you may have for different URLs that your system might be expecting. I can help you set that up.

It’s not critical for a site, but it’s a nice extra feature.

Student: Does that only work with Apache?

Professor: The mod rewrite library only works with Apache. Most servers on the web are Linux or Unix servers. If you have a Windows ASP IS [sp?] site, it won’t work on that.

That’s it for this example. Why don’t we take a 10-minute break? It’s 10:30. Since today’s the second to last day, we’ll actually take a 10:30 break. [Class laughing.]

[Break.]

[Bells ringing.]

Professor: They’re testing the system in the building today, so this is nothing to worry about.

Student: What were they doing the other days?

Professor: Apparently the system isn’t working yet.

Speaker: These inspections . . .

Professor: It might go for a while? They have an inspector in the building. So this will be on for a while to see if it works. We’ll just have to continue with that under these hazardous conditions. [Joke/joking.] We’re still waiting for David. So we’ll go in a few more minutes.

Let’s move back to the examples I’ll show you today. I just want to get you into this folder on my server called Class9 so we can continue with examples that aren’t as easily found on my blog.

Go to the blog to start with and on the right. As I mentioned, all the blog posts are categorized. I’m trying to keep them organized and categorized according to topic. RSS is one I want to look at as well as AJAX. Before we do that I want to show you something related to JavaScript which is how to put audio or video onto your pages. Some of you are interested in this. There’s an example in the Class 9 folder called Media_ player. That has two examples of putting media files in your HTML documents. Let’s go through that example.

Go to the browser [On screen.] you get to this page that has text with the media player. I made this page the full width. What I’m showing here is how to put on a popular media player. There are third-party libraries that you can buy or use free versions. This is a popular free version called the JW FLV media player. This is using Flash which is an animated media file which handles media files in a more consistent way. So if you have a window’s computer your computer won’t play QuickTime files. So this Flash file supports more media files than your default does. Almost anything on the web uses Flash to make sure they can show the media to as many users as possible. Almost everyone has Flash so they can guarantee they’re reaching as many people as possible.

There’s a link here to that player. I’ll show you the set up but there’s more information. This has an audio file. We can’t hear it but if you click play it plays back a file

Student: Is the volume muted?

Professor: Mine’s not. I have speakers but I’m not sure they’re plugged in. It’s playing, trust me. So we’ll assume that’s playing. You see it’s counting the seconds so it indicates it’s working. This media player has a customized tool bar. You can customize these buttons. The website has instructions to make the tool bar suite your needs.

There are two example files related to this file. The first uses an “embed tag.” It’s built to include other types of programs in your web page — in this case Flash, but you can use other files too. Most of the time it’s used for Flash but can be used for other things. The other version of the file — you don’t put the embed tag – you use a JavaScript function that automatically puts the tag on your page. This is the proper way to embed. I think there was a patent dispute and they patented the technology that when you first open the page it plays so that anyone using it has to pay a licensing fee. This is no longer is considered to be violating the patent to play the file when you open the website. The official website of the JavaScript function is on the website. This is the one I’m showing you. All I’m doing really is writing an embed tag.

The embed version – the end result of the JavaScript will be similar to this. It just puts the embed tag here to get the application to play. I won’t focus on this. I want to focus on the JavaScript version but this is just an example of what the JavaScript version does (Embedding).

This is called the SWFObject example. That’s the name of the JavaScript library. Here [On screen.] you’ll see that we include a script like in JQuery. With the SWFObject script we want to include that script in the head also. So we include a tag in the header. You just use this the way it’s meant to be used and you don’t actually have to see how this is coded unless you’re interested in JavaScript. It’s object orientated so it’s meant to be used without really knowing how it’s coded.

Right before the body we create in the JavaScript section a new variable called “SO.” We’re creating an object from this — if you’re interested in knowing what that means it’s not important but it’s on the blog. The first thing is the location of the file that is this Flash file that does the video. It’s called Media player.swf. It lives in the same file as the XHTML file. This is the flash application that tells the location of the file. This is like an image. You say where the image is found. This is similar.

The second thing is a name you want to give to your media player unless you want to reference it in your JavaScript code somewhere else. These are the width settings. I’m saying take the 100% width. This is the height. 20 pixels high. I can’t remember what the last one is. This is all about sizing.

Student: It’ll be long and narrow

Professor: Yes. I’m not showing a video. It’s an audio file. I can remove that top so it’s JUST the tool bar without any of the black stuff. If I made it bigger, 520 tall for example. You upload that … [On screen.] … so if you want a video to play that is this large you increase the height. We don’t have video in the file so I decreased it. Let’s see what happens when we make it 10.

Looks like it cuts off a bit at the top. Play around with the numbers. I’ll leave it at 20 for now. So that’s HOW you control the size of the object. The parameters are — you copy and paste the code except the width and height. This code is going to be the same. But I recommend you use the same file name and in the same folder. Change the height and width to the size you want. I’m not sure what the last line is but it’s not necessary to change it.

The second line of code creates a parameter for the object saying “this is the audio/video file we want to load.” So first it runs the Flash application then the file we want to run. The file parameter references the file. Remember I discussed URL and coding. You have to get rid of special characters. This is the code for colon slash slash (://). Remember to not take that out in the example and replace the www.ms …. with your site. That’s the part you change.

Student: Can you put a file name there?

Professor: Sure. If we have a local file I can replace this with media/example_video1.mp4 [On screen.] That’s the video file. That’s my way to tell it to load the file media/mp4. The other parameter mp=true tells it to play. If I set it to false it wouldn’t play. Let me check that the file is on the server. I’ll update this. This is video so I’ll change the height to 100 pixels. It has video now, not just audio. So I want the height to be taller.

So it’s loading. See it has the icon for loading? I think it’s a large file so it’s loading that file now.

Still doing loading …. it’s transferring data at the bottom [On screen.]

It’s taking some time. But this SHOULD load the video. I may have crashed my computer.

Depending on how big the file is depends on the time. On a professional video site you want to do “progressive downloading” where you would buy a video player that allows you to play the video and not have to download the whole thing. It plays a little at a time while it’s downloading. This is the limitation of using a free software.

Student: Where did you put the video?

Professor: In the code.

Student: Link?

Professor: Yes. I told it to look in the folder “media/file example”

Student: The media player needs to be in the folder too?

Professor: Yes. When you run the code you create the object and supply the SWF. So I downloaded this video from the Internet so maybe something’s wrong with it. Change the height of the player in video — that’s the only difference from audio to video.

Ok. So that’s a popular player called the JW FLV player. That’s it. Make sure you have the file in the folder, set the height and width, tell it which file to load, follow the coding system in the example.

That’s all I want to show you about this. You’ll get the hang of it. It’s pretty straight forward. I recommend you try it out. Let’s move onto RSS. Go back to the blog in the category section click “RSS.” I mentioned RSS the other day. It’s the technology that blog readers like Google Reader use that shows you the latest information — they read RSS code not HTML code. Most blogs publish RSS versions of the site.

Just like this is the HTML version of the site, I can see the RSS version by clicking on the orange icon. It gives me several varieties of RSS possibilities to view. It doesn’t matter which one you pick.

So now we have the RSS view of the same site. There’s one in HTML and one in RSS. This is what the RSS one looks like in the browser. It’s meant to be viewed in a blog aggregator like Google Reader. There are many pieces of software that does the same thing.

So now I can see all of the posts of all of your blogs put into one place. That’s a blog aggregator. This works because Google Reader is going to each of your blogs and looking for this RSS version of the site. If it finds it, it downloads the information from the RSS version and converts it into HTML that I see on this page.

Behind the scenes, Google Reader is sending out requests to our server for the RSS version of each of our sites and converting it into HTML. So that’s the technology behind the scenes.

We have access to a free library. I’m using mostly free libraries because you can practice on them. This free library does the same thing. We go through this RSS category link and there’s a post about XML. You don’t have to read it, but it’s interesting.

I’ll skip to the second post down which is simplifying an RSS Parser for library for PHP. This is how to do what Google Reader does for your own pages.

This has a description of how to SimplePie. There’s an example of code which I’ll pull up right now. It’s in the folder simplepie. That’s in Class 9/simplepie. The first thing to notice is there’s the media player.swf file in there. That’s the same file as the Flash player. An RSS feed, which is the RSS version of any website, may have attachments for each article or blog post, etc. Those attachments in a podcast would be audio files. Let me bring up an RSS feed for a podcast.

There’s a Science Friday podcast. This is the Science Friday podcast. You can view it in the browser. This is what it looks like. It has a title for each post. It only has one post for this past week. It has a description. It has a link and a media file attachment.

It has an MP3 that’s linked to this podcast. If you do load up a podcast in your RSS reader using SimplePie, it displays the podcast in the browser using the same Flash application.

I’ll grab the URL. You see what this page looks like. I’ll copy that URL and go back to our example file in the SimplePie folder. I enter in this RSS feed that it’s found and click enter. It has now taken the RSS feed and converted it into a simple HTML. But it puts the attachment in the FLV video audio player. So it’s running that attachment to the Flash player. Now I can play that podcast.

So this is how to get content from one site into your own site. Questions about the concepts here?

I’ll go through the code of how this works. This is a library called SimplePie that removes the details of how that works. It hides the inner workings of how to get this information. We just have to know how to call the right functions from the right places to get the information on our pages.

I just want to give you the idea of how to start these things. If you want them on your sites, I’ll help you with that individually. So go to SimplePie folder. I can open up index.php. The first thing to note is we’re including two files. One file is the SimplePie library, which is looking for it in the same folder. The second file is some way of converting different types of text. It’s necessary to make SimplePie work.

These two lines are necessary to use SimplePie. [On screen.] What this page does now is look for something in the URL, request that’s a feed URL. So whatever I entered in that form is what will be put into that request from the feed URL variable. That’s the form submission process we’ve gone over these last few days.

Then we create a new SimplePie object. None of this code will change on your version so far. We make sure there is a feed URL entered in the form. Make sure they did enter something in that box. Then we tell SimplePie to get that file and set up the inner workings of the SimplePie to access the information. You can copy/paste the code.

Then tell SimplePie to go and get the information. This is all commented in the code. The init function tells it to go get that file. Then we do internal processing of that content in case there are other non-standard characters. It does that automatically. Just copy/paste this entire code.

Then I tell it to include the view which is the HTML template we want to display the results in. Nothing in this code will change if you copy/paste this to your own page. Except maybe you just want to say my site shows the latest headings from newyorktimes.com. So I’m getting this example from a form but you can hard code the last ten headlines from newyorktimes.com. I’ll show you how that works. [On screen.]

Rather than asking someone to enter something in the form, it will load up New York Times latest posts by default. So this loads up the New York Times RSS feed. If you go to newyorktimes.com, the orange icon at the top shows they do have an RSS feed. So my site has gone the to New York Times and grabbed the contents of the file and converted them to HTML on my site. You can then see each of the headlines.

That’s the controller part of things and how to get the contents of the file. Now we move to the presentation aspect. We get the data the same way from a database. Then we hand off that data to a view. It’s the same as a database by looping through each article and outputting the article on the page.

Conceptually, this the reason people create RSS in the first place.

Student: If you wanted multiple sites in there and sort them by groups, how do you do that?

Professor: You would have to run this whole set of code for each feed independently. You would copy/paste the code twice with Feed 1 and Feed 2. They wouldn’t automatically aggregate. You’d have to do some processing of your own to get that to sort the right way. It’s possible, but you’d have to do that on your own.

My setup is feasible for one feed. You can modify it without too much work to do multiple feeds.

The reason people created RSS and why sites use it is that it was meant to make the entire Web into a big database. So you can request rows from a database but actually from another website. So it’s the same concept as asking for rows from a database. Then you use the same techniques for displaying that data.

So we look at the index view.php. That’s the HTML template we fill in with the details of the information we got from the New York Times. This is my code for the form of the information. You might not want a form.

So we check to see if there was an error. If they couldn’t find you URL you wanted and couldn’t download the RSS, that would show up here in a paragraph. I’m calling the error function of that simplifyObject. So that’s the template for how to display an error.

The next thing is making an image tag with a favicon. So I call the feed object to get a favicon function. It gets the file and displays it on the page. You can see the T from the New York Times example on the screen. You can structure your HTML however you want. I’m just showing you how to get different elements out of the feed onto your own page.

So then you can display the title of the feed. This is how I get the title. There’s a get_title function. It returns the title of the website automatically. So that’s what shows up there. [On screen.] I don’t have to do any more code than that.

I also get the link to the home page of the New York Times. If I click the title, it takes me to the relevant New York Times site. That gets the link to the address of the actual New York Times home page. This gets the title of the home page. And this will get the description of the home page. [On screen.] They may not publish a description and that would show up here. Apparently they don’t have a description, but some sites may.

That’s the setup for the actual feed. Now we loop row by row through the latest articles of the New York Times headlines. This should look familiar. This is similar to how to loop through your database rows results. So we’ll do the foreach loop. We’re calling this function getItems which returns an array of the items on the New York Times site.

In the database we had foreach row equals an array. This is the equivalent for RSS to get a list of the items from a website.

So I’ll go through the elements showing up in the template. This is the same bit of code repeated in the RSS feed.

The first thing we output is the title of the article. We call itemGetTitle which outputs the title of the article. The permanent link gets you the link to the article. Item get_date outputs an easy-to-read date. The New York Times is publishing a timestamp. So there’s a hard-to-read number that indicates the daet of that article. So my get command makes it a more readable form.

Here we have the main description of the article. That shows up here under the date. The New York Times doesn’t publish full articles in their RSS feeds. So they want you to click to go to their website. That way they get people to come to their website.

Some sites output the whole article in that content section. It depends on the site. Here we check for an attachment. If there is an attachment, we load the FLV player to output that video or audio. This copies the base code to output the Flash media player if necessary.

We’re checking for the enclosure. If that enclosure exists, it sets the embed tags with the proper variables set up. You don’t have to meddle with it.

Note, there are placeholder images. The placeholder image for an audio or video file is there while the video is loading. You can customize those by changing the image files in your applications. That’s the customization you can do for your own site.

That’s it. We end the loop there. We’re outputting a template for the article content.

Student: You would have to have available in your files a SWF in there just in case?

Professor: If you look in my files, I have the SWF media player.

Student: You would have it there just in case?

Professor: Right. So if there is an audio or video file, it automatically loads the media player. Here’s the SimplePie library. I told my code to look for the SimplePie library in the same folder. If you put SimplePie library-slash, make sure your tell your code what subfolder it’s living in.

So that’s all you need to know in 5 minutes for how to include an RSS file into your own sites. It can be very useful. I made a crude and ugly page. You probably don’t want to display it this way on your own sites.

But you could have just a list of headings or titles of the latest news from CNN or something like that. I just showed you how to include some more details if you wanted to. You can chop out parts of the template you don’t like by showing bits of data you want on your own sites.

Don’t feel like you have to make it look like mine. I’m just showing you how to access information. I’ll move on from this. If you have questions track me down when you look at this on your own.

Next we’ll move onto … I’m throwing some varied things at you today because this is the last day to really expand on these things. I want to show you the AJAX which is a term you may have come across as a web developer.

There’s an AJAX folder and if you go to the blog home page in the category section you’ll see AJAX and a description of some examples. These examples are in the class 9 folder. I’ll pull them up now.

I’m pulling up the simple AJAX example first.

So simple AJAX. AJAX is another way to load one file inside another. I’ll make a request for the folder and put the contents of the file in this data. This snippet2 will put the contents of the file into the current page. That’s what AJAX is. It stands for A. synchrnists JavaScript something … I can’t remember.

[On screen.]

People don’t use XML as much anymore. The information on Wikipedia is there for you to read. I’ll show you a practical way to use AJAX. I click load snippet 1 and 2 and it loads the contents of that file. Something happened to my site … [On screen.]

What happens when I click the link is that it takes the content of the file but you’re not reloading the whole page. You’re getting that information and putting it in the current page. If we look at snippets 1,2,3 – on the server — the actual code — it’s a small fragment of HTML. It’s not the full page like the body, head, etc.

[Fire alarm]

Professor: I’ll try to talk louder.

We have this small section that we want to show up in this box. So don’t include any more than you want to be displayed in the box. Clear? You only load a small section. Not the whole HTML document.

Student: To modify it, do you change the bigger page?

Professor: The outer page, the one that requests, has to have the style sheets to display the results. You can’t rely on CSS that is embedded in this snippet. This is the design page and this is the control page.

So again I’ll show you this loads bits of files from the snippets and puts it in the box. JavaScript is responsible for that request. Now let’s see how the code makes the request for the file. That’s in the index.html file, the main file. And JQuery. So this is again the document ready to make sure the page is ready. This is saying for any A tag with the ID snippets 1 link – when the user clicks that – run this command. This is the event handler we saw previously, the click function. And this is the command for an AJAX request. We tell it here to load snippets 1.html.

When the user clicks that link – once the browser gets that file – put that content in the div.snippet container. I think of it as right to left. Load the file and put the results of the file in this div. This is a JQuery style selector. Takes the ID and puts it in the box at the bottom of the page (results of the file). I could replace the whole body by using a CSS for the entire body. You decide where you put the results. It’s your choice as a designer. Questions?

Does this make sense? It’s a load function. Like any other JQuery function

Student: I looked in the snippet there’s no image there. Snippet 2.

Professor: There’s an image.

Student: There is?

Professor: It’s an image tag with an image from About.com

Student: Ok.

Professor: All the content that shows up will have to be there somewhere. That’s the content of AJAX. I think that’s all

Student: How did you get the first snippet to appear in black and the third to appear in red?

Professor: Good question. The first snippet is black and the second is black with image and the third is red. So let’s see the snippet files themselves. Three is red one. I’m including style in the paragraph. I could have given this a class. Like RED P and then find that that file has a red text.

Student: Ok.

Professor: I wanted to show you that it’s possible to dictate design in the style itself.

So this is repeated for each link – with slightly different files. It repeats the same code.

So to review. You add click with snippet 1 link. When it’s clicked it loads and puts the result in this ID with the ID of snippet retainer. This used to be hard to use before JQuery. This used to be a well paid job, now it’s only one line of code. You can still impress people with it. Not the majority of websites have it. It looks nice to swap out large chunks of your page so you can have a more manageable system for your files. It’s three separate files with bits of text in each. Let’s find an example of AJAX online.

Anyone think of an example? I’m blocked. If I go to Google and do an AJAX example search … [On screen.] I guess W3schools has an example.

You can go through these yourself to see what they say. AJAX for chat. That sounds nice let’s look at that.

It’s more technical. Let’s see if I can find another one. I’m having a hard time finding a good example. New York Times. If I go to the video section and click the thumb nails it’ll make an AJAX request so it swaps content. See how everything changed? The whole section was swapped out with a new video. That’s most likely used with AJAX. So you see things like this everywhere. I would have to poke around for better examples. But this New York Times site uses the same technique. It looks more dynamic and is easy to manage without writing much code.

Uh …. it’s not so easy …. using FireBug we see the CSS or HTML code. But there’s no easy way for the JavaScript code. It’s not as straight forward. I don’t know a good way to do that. Go to view page source and look at the code at the top.

So actually let’s view page source. I’ll do a search for JQuery. Let’s go to CNN.com. Find a JQuery. Many sites do use JQuery but they rename the file so it doesn’t show up. A lot of libraries use JQuery. So that’s the basic idea of AJAX. Let’s use another example where we do more with the content.

That’s the AJAX passing data. So just like when we have a link – you can have a link with a query string or data. We can do the same thing with AJAX. We can request snippets or pass data. This is what this example shows. Let’s open that example in the AJAX passing data folder.

Student: I can’t find the folder. It’s in class 9?

Professor: Yes. There’s simple_Ajax and there’s AJAX.

Student: I had that problem. You just refresh your site.

Professor: In the morning you looked at it you’ll need to refresh. The green circle icon to refresh the contents. WinSCP won’t reload unless you tell it to. So this passing information is what this is about. When we click the data we give it a value — 1,2,3. You give it a number zero. This is a sculpture. I can have image 1 and image 2 and it loads a different set of data depending on what is being supplied. This is the concept of the AJAX passing data folder. If I load the XHTML you see how it works. When you click the link with the ID link 1 we load processing file PHP but attach the query string at the end. I have two different ways to approach this with the same result. Then we put the result in the folder with the ID. That’s the same example from before but we attach the query string in this example.

In case you have a big list of data it may be easier to do the second way. When you click link 2 it loads the file process_data.php. This is how we pass the data in this case. In this bracketed section as a secondary to the load function. We can supply lists of data by separating them with a comma. You specify the names and the value of the field. Same as the query string but using a different way to code it. This passes the image and process ID. That’s how you pass multiple pieces of data. I’ll leave that in there.

So you’ll have a reference for how to do multiple parameters. That last parameter doesn’t do anything in our code, but it’s there as a reference for multiple parameters.

Is this clear? You’ll have to play with it on your own. You load the file and put the results in whatever div you tell it to put the results in. That’s what you think about for AJAX requests.

The next example is taking the same concepts and integrating them with a database. There’s nothing very new here. I’m just putting pieces together that we’ve done separately before.

When I load the page, the JQuery waits for the page to be loaded. Once the page is loaded fully, I make a request for a MySQL PHP page that returns a list of animals. That gets put in this div here. This div is a result of an AJAX query. The returned HTML is a list of animals.

If I enter a new animal, two thing happen. I click submit. First, this makes an AJAX request for a script that adds opossum to the list of animals in the database. That’s done by AJAX. It passes data from this page to the other page. After that has been done, another AJAX request is made to get the updated snippet with the new list of animals. I want to request that information again.

I click to submit and it sends the data to the server. Then it sends another request to the server to get the snippet to show in this section. Hopefully opossum shows up in the bottom. Is that idea clear? We’re adding new data and then refreshing this list.

The code to do that on the JQuery side is exactly the code we saw a second ago. It’s in index.php. I have the document.ready function. The first thing that happens when the document is ready is call a function called updateAnimals. That makes the request to get the list of animals. That’s defined right above. It loads the file process data.php and puts the results in the div with the animal list.

It’s getting something from process data.php and putting it into the div called animalLists. That’s what the process data returns was the big list of animals.

The second thing that happens is we add an event handler for the form. That’s what this chunk is. [On screen.] When someone clicks submit on the form, we are serializing form data. That enters data from the form and puts in the form elements. It converts those elements into a nice looking query string. You can then attach that onto a request.

This is something you can look up on the JQuery site. All you have to do is search for the function serialize. We then make an AJAX post request. I’m doing this very differently. I do that so you can see an alternate way of doing all of this.

I’m making a specific post request to processdata.php. I’m sending it the data we got from the form as well as the function to run when it’s done. It’s sending the form data that we serialized and converted to a long string. We send that script to process_data. Once that’s completed and the browser receives a response from the server, it calls updateAnimals and updates the animals on the page. Then we cancel the form from taking you away from the page.

Then once we take your submission and gotten a response back and updated the list, we remove that word you typed into the form. When I entered the word and clicked submit. The first thing it does is send the form data to the server. The list is updated. Then it requests the updated list. And then it wipes out the word I entered. The text disappears. I told it to make the value of the form field zero. That overwrites whatever I entered in the form.

This is another way of making AJAX requests by using the dot-post function. This is another technique to use the post type of request. This is the way you would supply parameters to that kind of request.

The third parameter is an optional function to call when the request is finished. It gives you more granular control over the request process. You can be really explicit about how the AJAX is working and control it better this way.

That’s the list of examples. I won’t go more into them. You can browse and ask questions as you look at them more. I think that’s all I wanted to show today. This is the core of the class. Everything we covered is what I consider to be the fundamentals of web development. So we’ll work on your projects for the rest of today and the first half of tomorrow.

Any questions so far about anything?

I’m sure you have questions, you can ask me individually. For the rest of the day we’ll work on your projects and get you in shape for your presentations tomorrow. Jack, the teaching assistant, will be here after our lunch break at 1:30. So you can get us to sit down with you and work out any problems or questions so you have something to present for tomorrow.

[Jeremy's question about presentation length.]

Professor: The first half of the day, we’ll be having emergency sessions to fix projects. After lunch at 1:30, we’ll get into the presentations. That gives us three and a half hours to do them. Or is it four and a half hours? Three and a half hours. So that means there are 15 people in the room. I’d say 10 minutes is more than enough time to present your project. That gives us room to have space between the presentations, too.

If it’s a one-page project, then it’ll be less time. But don’t go over 15 minutes. I’m interested in seeing what you did, why you did it, how you did the information architecture at the beginning and how it ended up. I want to know the process you went through as well as any interesting problems that you used techniques to get your site to work. You’re not required to present. So if you don’t want to, that’s fine. I think it’s interesting for us to see each other’s work and see how people are using the same technology for different things. So I’m asking you to present, but it’s up to you and it’s a free form presentation.

So let’s get to your projects until 12:30. Then we’ll have a lunch break.

[Students working.]

Professor: It’s 12:30, so you can take your lunch break. Just be back here by 1:30.

[Lunch break.]

[Students working.]

[End of Class.]