URL Query Strings

building a customized search box

Tim Miller - twm2@humboldt.edu

NAVIGATION

There are two ways to navigate through this tutorial:

• Keyboard: 
  Use the  left & right  arrow keys
• Mouse: 
  Click on the arrows in the lower right-hand corner

INTRODUCTION

The purpose of this exercise is to create a custom search box by manipulating the URL. We will make a search plug-in that allows our users to easily find Creative Commons images on Flickr .

We will: 

• explore what happens with the URL when you conduct a search
• learn about the basics of HTML, JavaScript and HTML forms
• put it all together to create a custom search box

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?

The portion of the URL that includes your search terms is called a 'get string' or 'query string.'

This query string can be manipulated to create your own search right from the address bar.

let's try something…

Try a search in Flickr for 'Schipperke puppy photos.' Now filter your results to Creative Commons images only. The URL in your address bar should look something like this: 

https://www.flickr.com/search/?text=Schipperke%20puppy%20photos&sort=relevance&license=1%2C2%2C3%2C4%2C5%2C6

Our query string is this portion:

Schipperke%20puppy%20photos

[Note: URLs encode spaces with %20 or +]