My independent creative efforts.

Demo
http://www.davidvanvickle.com/examples/ep8/index.htm

Download
http://www.davidvanvickle.com/examples/ep8/ep8.zip

Web pages can be highly dynamic. We can log in to a site and get relevant data like a bank balance or see our social network friends – information specific to us. That means our page requests to the server are identified as being ours and the server can compile something with our data in it.

The internet’s way of communicating (“hypertext transfer protocol” or HTTP) is stateless. That means, on it’s own, it doesn’t remember the visitor from one page to the next. It just sends anonymous requests to the server, and the server sends back that static page. Fortunately there are a few mechanisms for distinguishing one request from another, which allows us to make web pages more personalized.

One mechanism is the cookie. Cookies are strings of text stored by the browser. A cookie allows the browser to remember things between pages. A common use of cookies is with sessions. When you visit a web site, you are in a session with that web site. Cookies are sent from the site and contain data specific to that session, such as a session ID. The browser receives and stores the cookie, then sends it back to the web site every time a new page is requested. So now the server, on some level, knows who is asking for what. The server can respond differently depending on the cookie value sent from the browser.

Use Javascript to access cookies on the client-side.

alert(document.cookie);

Here is a Javascript object for reading, writing and deleting cookies.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

CookieHandler Example

var C = new CookieHandler();
C.set(‘mykey’, ‘myvalue’);
alert(C.get(‘mykey’));
C.del(‘mykey’);

The problem with using cookies is that the user can always disable them, so you have to make sure your client side app doesn’t break when that happens. Either that or you tell users up front that javascript and cookies must be enabled to use your application.

From the server side perspective, when cookies are not available, the server has to come up with another way to track session id’s. Without cookies, the session ID must be embedded in a different part of the page request. There are a couple methods to request information from a server. One is called a GET and the other is called a POST.

GET

Using a GET request means that data is attached to the URL after the question mark. This looks like “page.php?session=mysessionid”. Multiple bits of data can get strung together after the question mark with ampersands like “page.php?key1=value1&key2=value2”.

Usually this data is read on the server side, but Javascript on the client side can parse these GET query strings as well.

The following Javascript code can read the data sent with the GET method.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

QueryStringReader Example

var qsr = new QueryStringReader();
var key1 = qsr.get("key1");
var key2 = qsr.get("key2");
if (key1) alert(key1);
if (key2) alert(key2);

POST

Using a POST request puts data in another part of the request packet and is generally preferred when more than a few pieces of data need to go back to the server. When a user uses a search field, often a GET is used as there are only a couple fields of data to transfer. But when a larger order form is used, it will tend to POST since there is more data to pass. When files such as images need to be sent from the client to the server, the POST method is always used. Javascript does not have access to POST data, only to GET data.

AJAX

Requests aren’t restricted to when the user goes between pages. Javascript can send it’s own requests behind the scenes within a single page. This is how AJAX works. Javascript does a GET or POST request from inside the page and gets an XML response from the server. The Javascript receives the XML, parses it, and changes the page layout somehow, all without the page having to reload. That’s AJAX. There is a great AJAX quick start tutorial on Mozilla’s developer wiki. A link to it is available in the show transcript at Podturtle.com.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function() { alert(httpRequest.responseText); };
httpRequest.open('GET', ‘data.xml’, true);
httpRequest.send('');

Sessions

The most reliable and easy way to deal with sessions is to use the built in session handling of modern server side scripting languages such as PHP and ASP. There will be an object dedicated to keeping track of the session for us. And we get to store whatever we want in that temporary session data. A server side programmer can trust the server to maintain that session for the user however it needs to, via cookies or via GET requests. It’s automatic.

PHP

session_start();
$_SESSION[‘mykey’] = ‘myvalue’;
echo $_SESSION[‘mykey’];

ASP

Session(“mykey”) = “myvalue”
Response.write(Session(“mykey”))

Similarly, methods for getting GET and POST data from requests are also handled very easily with server side scripting languages.

PHP

echo $_GET[‘mykey’]; // GET
echo $_POST[‘mykey’]; // POST

ASP

Response.write(request.querystring(“mykey”)) ‘ GET
Response.write(request.form(“mykey”)) ‘ POST

Whether you plan to program on the client side or the server side, learning how to pass data between pages is the first step to making your web apps interactive and personalized.

Demo
http://www.davidvanvickle.com/go.php?p=jquery-slideshow

Download code
http://www.davidvanvickle.com/examples/jquery/slideshow/slideshow.zip

jQuery
http://docs.jquery.com/Tutorials
http://jquery.com/

---

The Challenge

So you’ve got a bunch of pictures and you want to have a simple slideshow on your homepage. It doesn’t need controls. It just needs to take a folder full of pictures and display them automatically, one at a time, in random order, without repeating a picture before it’s shown all the pictures. That’s what we’ve got this week. It’s a Javascript and jQuery-powered slideshow app.

About jQuery

The app starts with jQuery, which is a Javascript library for animation and AJAX work. Implementation means simply downloading the JS file from jQuery.com and including it with our project. I have to admit, I’m new to jQuery so I’m relying on the expertise of another tutorial to use it here. Another guy wrote the jQuery code, and the code I added is just straight forward Javascript.

Where This Slideshow Started

Jeffrey Jordan Way, a Web Developer from Nashville, TN at detacheddesigns.com, in a post called “Why Aren’t You Using jQuery: PART 3″, started this slideshow on his site as a tutorial. Check his site to learn more about the jQuery part of this code.

About that slideshow

Jeffrey’s tutorial has smaller thumbnails along the right, and the big picture on the left. You click a thumbnail and the big picture changes to the big version of that thumbnail. He used jQuery to apply the click event to the thumbnail and to display the preload progress wheel and to display the fade in effect between large images.

What’s special about my version?

Well first I took off the thumbnails. I just wanted the big image. Then I added a few features. Inside the Javascript file you put your list of images into an array. That array gets shuffled each time the page loads so the pictures don’t always display in the same order. This shuffling function was written by Jonas Raoni Soares Silva at http://jsfromhell.com/array/shuffle. You can set a flag in the file to turn off shuffling if you like.

Another way you can mix up the array is by having each next picture be random. Problem with this was that photos tend to repeat themselves. If you’re ok with that, then there is a flag to toggle the randomness like there is a flag to toggle the shuffling.

Another feature is that you can control how fast the pictures change. The default is five seconds between images.

How to get my version

Download the ZIP file from the show notes. Extract it and look in the “js” folder. In there you’ll see the Javascript that uses the jQuery library. You’ll have to edit this file to point to your images. Right now it points to my example images. Just below that are the variables controlling shuffling, randomness, and seconds between photos. Play around until you’re happy with the results.

// change these paths for your images
var myImages = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];

// shuffle images so each time page loads, the photos show in different order
var do_shuffle = true;

// use simple randomness instead of shuffling (tends to repeat images too often)
var do_randomly = false;

// number of seconds between photo changes
var seconds_between_photos = 5;

You’ll also want to change the image dimensions in the CSS file. Right now it’s set to the size of my images. Your pictures will probably be a different size. Hopefully your pictures have been optimized in Photoshop for the fastest loading, and sized to however you want them to be on your site. If you leave the CSS the way it is and your photos are a different size, the photos will be force-fit into the photo box disproportionately. All the photos have to be the same size or the CSS will stretch them to fit.

Javascript library best practices

The main issue is: will the library work for most people. If I try it out and it mostly works everywhere, I use it. I’ll test against current versions of Internet Explorer, Firefox, and Safari. I am betting that people are keeping their browsers up to date for security reasons, so I don’t support old versions.

I tend to keep a copy of the library with each project. I don’t use a single library for my whole site. If I find that a new browser breaks an old library, that’s when I try using the newer library on the old project to see if that fixes it. I don’t expect old projects to work with new libraries, at least not without testing.

My biggest fear is that a new version of Internet Explorer will break things. Experienced style sheet developers know all kinds of hacks that try to keep IE in check. Anyway, such is the dangers of client side web development. We’re at the mercy of new browsers coming out. That’s why a lot of people like server side development. You’re only building to one target – your server.