Sometimes Motion

URL Query String Exercise

The purpose of this exercise is to demonstrate how URL query strings can be used to create search widgets that can be embedded in websites.

What is a Query String?

And how can I make use of it?

Skip to part B   Go straight to the project  

Intro:

The basic premise of this exercise is that you can create customized searches by manipulating the URL of the hyperlink you are sending your viewer to. Our project will be to create a search plug-in for our users so that they can easily find Creative Commons images on Flickr.

First, let's look at what happens with the URL when you conduct a search. Using the concepts we will discover in this section, we will then create a custom search box in Part B that will allow us to direct our users to a list of results on Flickr based on the terms they entered in a search box on our site.

The basic pieces are simple enough, and once we put them all together we will have created a nice little search plug-in.

1. Anatomy of a URL

Have you ever noticed that when you search on Google or Flickr (or in most searches, for that matter) that the URL on the results page includes the terms you used in your search? This portion of the URL is called a 'get string' or 'query string'.
Example:

If you do a search in Flickr for 'Schipperke puppy photos' and then filter your results to Creative Commons images only, you will get this URL:
https://www.flickr.com/search/?text=Schipperke%20puppy%20photos&sort=relevance&license=1%2C2%2C3%2C4%2C5%2C6

Can you spot the following query string in the full URL above?
Schipperke%20puppy%20photos

[Note: In URLs, spaces are encoded as %20.]

This means that we can substitute other terms and insert them into the URL to create an address that will take us to a search for those terms.

2. Query String

Substitute your own terms:

To search for 'baby pandas' we can use the query string:
baby%20pandas And plug that into the URL above in place of the 'puppies' query string like so:
https://www.flickr.com/search/?text=baby%20pandas&sort=relevance&license=1%2C2%2C3%2C4%2C5%2C6

Try a different site:

If we want to create a similar link to look up items in our library catalog, all we need to do is figure out where the query string comes into play by doing a search in the catalog. In the HSU Library Articles+ database, a search for 'baby pandas' would give us this URL:
http://library.calstate.edu/humboldt/articles/results?query=baby+pandas

[Note: The query string in this URL uses the + symbol instead of the %20 encoding that was used in Flickr. These two can usually be used interchangably and the browser will figure out how to get to the URL, but it is still something to pay attention to.]

3. Custom Links

This means that we can throw any terms at the end of this URL- the only trick is getting the terms we want and generating the custom URL. There are a few ways that we could use this on an actual site:

  1. Dynamically grab some text from the webpage where we plan to insert our widget- for example, the title of the page.
  2. Include a search box in our widget and let the user type anything they want.
  3. Combine these two ideas to create a search box that has some placeholder text in the search box grabbed from elsewhere on the page.

Here is an example of the third option, using the title of this exercise as the placeholder text. Test it out for yourself:


Next Step

Before moving on to Part B, take some time to think about the various ways we can use these query strings. Try out your own searches and see if you can figure out how to manipulate the URL query strings to make your own searches.

After you have examined the query strings in some other URLs, move on to Part B to learn how we can use these basic principles to create a custom search box to embed anywhere on the Web. In Part B we will learn how to use JavaScript, HTML & CSS to create our own search box.

Move on to part B  
CC-BY · This content is free to use and share Creative Commons License