Developing Wiki Seek Widget Using Javascript

Exclusive offer: get 50% off this eBook here
Object-Oriented JavaScript

Object-Oriented JavaScript — Save 50%

Create scalable, reusable high-quality JavaScript applications and libraries

$23.99    $12.00
by Roshan Bhattarai | March 2009 | AJAX PHP Web Development

Since Wikipedia contains articles about many things in different languages. In this article by Roshan Bhattarai, we will learn how to build a web widget which searches Wikipedia for articles related to any particular search keyword.

If you’re searching for details of a particular term in Google, you’re most probably going to see a link for relevant articles from wikipedia.org in the top 10 result list. Wikipedia, is the largest encyclopedia on the Internet, and contains huge collections of articles in many languages. The most significant feature of this encyclopedia is that it is a Wiki, so anybody can contribute to the knowledge base.

A Wiki, (a new concept of web2.0), is a collection of web pages whose content can be created and changed by the visitor of the page with simplified mark-up language. Wikis are usually used as knowledge management systems on the web.

Brief Introduction to Wikipedia

Wikipedia has defined itself as :

… a free, multilingual, open content encyclopedia project operated by the United States-based non-profit Wikimedia Foundation.

Wikipedia is built upon an open source wiki package called MediaWiki. MediaWiki uses PHP as a server side scripting language and MySql as the database. Wikipedia uses MediaWiki’s wikitext format for editing the text, so the user (without any necessary  knowledge of HTML and CSS) can edit them easily.

The Wikitext language (also called Wiki Markup) is a markup language which gives instruction on how outputted text will be displayed. It provides a simplified approach to writing pages in a wiki website. Different types of wiki software employ different styles of Wikitext language. For example, the Wikitext markup language has ways to hyperlink pages within the website but a number of different syntaxes are available for creating such links.

Wikipedia was launched by Jimmy Wales and Larry Sanger in 2001 as a means of collecting and summarizing human knowledge in every major language. As of April 2008, Wikipedia had over 10 million articles in 253 languages. With so many articles, it is the largest encyclopedia ever assembled. Wikipedia articles are written collaboratively by volunteers, and any visitor can modify the content of article. Any modification must be accepted by the editors of Wikipedia otherwise the article will be reverted to the previous content.

Along with popularity, Wikipedia is also criticized for systematic bias and inconsistency since the modifications must be cleared by the editors. Critics also argue that it’s open nature and the lack of proper sources for many articles makes it unreliable.

Searching in Wikipedia

To search for a particular article in Wikipedia, you can use the search box in the home page of wikipedia.org.Wikipedia classifies its articles in different sub-domains according to language; “en.wikipedia.org” contains articles in English language whereas “es.wikipedia.org” contains Spanish articles. Whenever you select “english” language in the dropdown box, the related articles will be searched over “en.wikipedia.org” and so on for the another language.

You can also search the articles of Wikipedia from a remote server. For this, you have to send the language and search parameters to http://www.wikipedia.org/search-redirect.php via the GET method

Creating a Wiki Seek Widget

Up till now, we’ve looked at the background concept of Wikipedia. Now, let’s start building the widget. This widget contains a form with three components. A textbox where the visitors enters the search keyword, a dropdown list which contains the language of the article and finally a submit button to search the articles of Wikipedia. By the time we’re done, you should have a widget that looks like this:

Concept for creating form

Before looking at the JavaScript code, first let’s understand the architecture of the form with the parameters to be sent for searching Wikipedia.

The request should be sent to http://www.wikipedia.org/search-redirect.php via the GET method.

<form action="http://www.wikipedia.org/search-redirect.php" >
</form>

If you don’t specify the method attribute in the form, the form uses GET, which is the default method.

After creating the form element, we need to add the textbox inside the above form with the name search because we’ve to send the search keyword in the name of search parameter.

<input type="text" name="search" size="20" />

After adding the textbox for the search keyword, we need to add the dropdown list which contains the language of the article to search. The name of this dropdown-list should be language as we’ve to send the language code to the above URL in the language parameter. These language codes are two or three letter codes specified by ISO.

ISO has assigned three letter language codes for most of the popular languages of the world. And, there are a few languages that are represented by two letter ISO codes. For example, eng and en are the three and two letter language code for English.

Some of the article languages of Wikipedia don’t have ISO codes, and you have to find the value of the language parameter from Wikipedia. For example, articles in the Alemannisch language is als.

Here is the HTML code for constructing a dropdown list in major languages :

<select name="language">
<option value="de" >Deutsch</option>
<option value="en" selected="selected">English</option>
<option value="es" >Español</option>
<option value="eo" >Esperanto</option>
<option value="fr" >Français</option>
<option value="it" >Italiano</option>
<option value="hu" >Magyar</option>
<option value="nl" >Nederlands</option>
</select>

As you can see in the above dropdown list, English is the default language selected.

Now, we just need to add a submit button in the above form to complete the form for searching the article in wikipedia.

<input type="submit" name="go" value="Search" title="Search in wikipedia" />

Put all the HTML code together to create the form.

JavaScript Code

As we’ve already got the background concept of the HTML form, we just have to use the document.write() to output the HTML to the web browser. Here is the JavaScript code to create the Wiki Seek Widget :

document.write('<div>');
document.write('<form action="http://www.wikipedia.org/search-redirect.php" >');
document.write('<input type="text" name="search" size="20" />');
document.write('&nbsp;<select name="language">');
document.write('<option value="de" >Deutsch</option>');
document.write('<option value="en" selected="selected">English</option>');
document.write('<option value="es" >Español</option>');
document.write('<option value="eo" >Esperanto</option>');
document.write('<option value="fr" >Français</option>');
document.write('<option value="it" >Italiano</option>');
document.write('<option value="hu" >Magyar</option>');
document.write('<option value="nl" >Nederlands</option>');
document.write('</select>');
document.write('&nbsp;<input type="submit" name="go"
value="Search" title="Search in wikipedia" />');
document.write('</form>');
document.write('</div>');

In the above code, I’ve used division (div) as the container for the HTML form. I’ve also saved the above code in a wiki_seek.js file.

The above JavaScript code displays a non-stylish widget. To make a stylish widget, you can use style property in the input elements of the form.

Using Wiki Seek widget

To use this wiki seek widget we’ve to follow these steps:

  1. First of all, we need to upload the above wiki_seek.js to a web server so that it can be used by the client websites. Let’s suppose that is uploaded and placed in the URL : http://www.widget-server.com/wiki_seek.js
  2. Now, we can widget in any web pages by placing the following JavaScript Code in the website.
<script type="text/javascript" language="javascript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.widget-server.com/wiki_seek.js"></script>

The Wiki Seek widget is displayed in any part of web page, where you place the above code.

Object-Oriented JavaScript Create scalable, reusable high-quality JavaScript applications and libraries
Published: July 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Wiki Article-Image Seek Widget

After knowing how to make a simple Wiki Seek widget, let’s expand the knowledge to make something more complex. In this section, you’ll learn how to create and use a widget which searches for articles and images in Wikipedia. As you can see in the below image, this widget contains another dropdown list from which you can select whether you want images or articles.

Before learning how to create this article-image widget, it would be useful to have some knowledge about the advanced search functionality of Wikipedia.

Understanding Advanced Search functionality of Wikipedia

Below, you can see the typical advanced search form of the English version of Wikipedia.

In a nutshell, you enter a particular keyword to search in different regions - such as articles, users or images. If you look closely, you can see the phrase “Search in namespaces”. A namespace is the part of the Wikipedia database where all the particular kinds of data are stored. For example, the user namespace contains the personal pages of all Wikipedians who have created an article. Similarly, the image namespace provides information about images, one page for each with a link to the image or sound itself.

Actually, namespaces are the part of MediaWiki software. All the data of wikis that uses MediaWiki software are partitioned in namespaces.

Each namespace is identified with its namespace variables. For example, the variable namespace 0, that is, {{ns:0}}, represents the main namespace of Wikipedia (which is the article namespace). Similarly, {{ns:6}} represents Image namespace of Wikipedia.

Now, let’s search Wikipedia using “alexa” as our keyword and searching in the image namespace. You can see in the image below what you will see in the web browser’s address bar.

After looking at the string in the browser’s address bar, it is clear that the data of advanced search form is submitted via the GET request method to the URL http://en.wikipedia.org/w/index.php.

Now, let us look at the detail of the Query String in the above URL -
ns6=1&search=alexa&fulltext=Advanced+Search

Query String is the string which comes after “?” symbol in the URL when the page is accessed through GET request method.

The first variable is ns6 and I’ve already mentioned that the namespace 6 represents the Image namespace in Wikipedia. So, the value ns6=1 represents that the search is limited within the Image Namespace only. If we had searched with the same keyword within article and Image namespaces then you could have found the addition of namespace 0- ns0  in the browser’s address bar and the Query String would have been like below:

ns6=1&ns1=1&search=alexa&fulltext=Advanced+Search

The search variable of Query String contains the keywords which have been searched in the various namespaces of the Wikipedia. In the above case, the value in the search variable is alexa which was entered in the textbox of the advanced search form.

The value Special%3ASearch (that is the Special:Search value) in the title variable represents that it is a special search.

While passing special characters through the URL, these characters are encoded in the url encoded format. Special characters are usually encoded as (%) sign followed by two or four hexadecimal digits. And, %3A  is an example of an encoded column character(: ).

Similarly, the value Advanced+Search in the fulltext variable specifies that this is the advanced search.

The search result of the Image Namespace with “alexa” as a keyword returns this:

JavaScript Code for Wiki Article-Image Seek Widget

Now that we know the background information for a Wiki Article-Image Seek Widget, let’s look at the JavaScript code for creating it.

First of all we need to add a starting form tag to the document :

document.write('<form onsubmit="return redirect_wiki(this)" >');

As you can see, when the form is submitted, the redirect_wiki() function is called. The returned value from the redirect_wiki() function determines whether the form will be submitted or not. For example, if redirect_wiki() function returns a false value then the submit event of the form will not be triggered.

You can use the return statement in the event handler of the DOM element to prevent triggering the default event of an element. For example, adding return false on the onclick event of the submit button stops the click event of that button.

<input type="submit" onclick="return false" value="Submit" />

You can see that this parameter is passed while calling the function redirect_wiki() function. In the above statement, this parameter represents the form object (i.e. we’re passing this form object to this function).

You can use this to refer the same element of the web pages. For example, if this keyword is used inside the input element, it refers to the same input element and is mainly used for accessing and changing the property of that HTML element. You can change the value of the submit button using this keyword when the same button is clicked with the following code.
<input type="submit" onclick="this.value='go'" value="submit" />

After adding the starting form tag, we’ll add the text box whose name is search.

document.write('<input type="text" name="search" size="20"  />');

After that, we’ll add the dropdown list for selecting the language of Wikipedia. The name of this dropdown list is language. Use the javascript detailed earlier in the article, beginning with :

document.write('<select name="language">');

Now, we need to add a dropdown list with the name namespace for selecting a namespace, but this time there are two choices: Articles and Images.

document.write('<select name="namespace">');
document.write('<option value="ns0">Articles</option>');
document.write('<option value="ns6" selected="selected">Images</option>');
document.write('</select>');

You might have remembered that the ns0 variable is used for searching the article namespace in Wikipedia, whereas ns6 is used for searching inside the image namespace.

After that, add two hidden fields: title and fulltext with the values Special:Search and Advanced+search respectively in these two hidden fields.

document.write('<input name="title" type="hidden"
value="Special:Search" />');
document.write('<input name="fulltext" type="hidden"
value="Advanced search" />');

Then, we need to add the submit button to the form and close the form tag.

document.write('<input type="submit" name="go" onclick="return false"
value="Search" title="Search in wikipedia" />');
document.write('</form>');

We’ve added a form for searching articles or images on Wikipedia. Now, let’s look at the redirect_wiki() function which is called whenever someone submits the above form.

function redirect_wiki(widgetForm)
{
var languageVal=
widgetForm.language.options[widgetForm.language.selectedIndex]
.value;
var namespaceVal=
widgetForm.namespace.options[widgetForm.namespace.selectedIndex]
.value;
var searchVal= encodeURIComponent (widgetForm.search.value);
var titleVal= encodeURIComponent (widgetForm.title.value);
var fulltextVal= encodeURIComponent(widgetForm.fulltext.value);
redirectUrl='http://'+languageVal+'.wikipedia.org/w/index.php?search=
'+searchVal+"&fulltext="+fulltextVal+"&"+namespaceVal+"
=1&title="+titleVal;
document.location=redirectUrl;
return false;
}

Let’s go through the detail of this function briefly. The widgetForm variable is passed as a parameter of this function and this variable is the form element object.

var languageVal = 
widgetForm.language.options[widgetForm.language.selectedIndex]
.value;
var namespaceVal =
widgetForm.namespace.options[widgetForm.namespace.selectedInde
x].value;

In the above two lines the selected value of the dropdown list of language and namespace are stored in variables languageVal and namespaceVal respectively.

The selectedIndex property returns the number (base 0) of the item which is selected in the select list. If the second item in the dropdown list is selected then this property returns 1 value. Similarly, options[1] refers the second item in list and  options[2] refers the third item of the select list.

var searchVal= encodeURIComponent (widgetForm.search.value);
var titleVal= encodeURIComponent (widgetForm.title.value);
var fulltextVal= encodeURIComponent(widgetForm.fulltext.value);

The searchVal, titleVal and fulltextVal variables respectively hold the search keyword value, title value and fulltext value. All these variables are encoded using the function encodeURIComponent().

You can also use the escape() and encodeURI() functions of JavaScript to encode the string which has to be passed via the URL. Each of these functions differ in the way they can encode special characters. For example, the encodeURI() function encodes special characters, with the exception of: , / ? : @ & = + $ #. For encoding these characters, we’ve to use encodeURIComponent().

redirectUrl='http://'+languageVal+'.wikipedia.org/w/index.php?search=
'+searchVal+"&fulltext="+fulltextVal+"&"+namespaceVal+"
=1&title="+titleVal;

In the above line, the string is formed for obtaining the search result.

document.location=redirectUrl;

Using the above line, the web page is redirected to the URL formed to get the result of the search.

Finally notice the following line in the end of the function :

return false;

As you’ll remembered, this function is called in the onSubmit event of the form. The above statement stops the submit event of the search form.

Putting the code all together

Now, create a wiki_seek_image.js file, add the code we’ve just worked through and save it. Since we’ve dissected the complete code in sections, we’ll include it in an unabridged form below:

document.write('<div>');
document.write('<form onsubmit="return redirect_wiki(this)" >');
document.write('<input type="text" name="search" size="20" />');
document.write('&nbsp;<select name="language">');
document.write('<option value="de" >Deutsch</option>');
document.write('<option value="en"
selected="selected">English</option>');
document.write('<option value="es" >Español</option>');
document.write('<option value="eo" >Esperanto</option>');
document.write('<option value="fr" >Français</option>');
document.write('<option value="it" >Italiano</option>');
document.write('<option value="hu" >Magyar</option>');
document.write('<option value="nl" >Nederlands</option>');
document.write('</select>');
document.write('&nbsp;<select name="namespace">');
document.write('<option value="ns0">Articles</option>');
document.write('<option value="ns6"
selected="selected">Images</option>');
document.write('</select>');
document.write('<input name="title" type="hidden"
value="Special:Search" />');
document.write('<input name="fulltext" type="hidden"
value="Advanced search" />');
document.write('&nbsp;<input type="submit" name="go"
value="Search" title="Search in wikipedia" />');
document.write('</form>');
document.write('</div>');
//function to redirect the page to wikipedia Wikipedia
function redirect_wiki(widgetForm)
{
var languageVal=
widgetForm.language.options[widgetForm.language.selectedIndex]
.value;
var namespaceVal=
widgetForm.namespace.options[widgetForm.namespace.selectedInde
x].value;
var searchVal=encodeURIComponent(widgetForm.search.value);
var titleVal=encodeURIComponent(widgetForm.title.value);
var fulltextVal=encodeURIComponent(widgetForm.fulltext.value);
redirectUrl='http://'+languageVal+'.wikipedia.org/w/index.php?search=
'+searchVal+"&fulltext="+fulltextVal+"&"+namespaceVal+"
=1&title="+titleVal; document.location=redirectUrl;
return false;
}

Using Wiki Article-Image Seek widget

To use this Wiki Article-Image Seek widget we’ve to follow these steps:

  1. As before, we need to upload the above wiki_seek_image.js to a web server so that it can be used by the client websites. Let’s suppose that is uploaded and placed in the URL : http://www.widget-server.com/wiki_seek_image.js
  2. Now, we can widget in any web page by placing the following JavaScript Code in the website.
<script type="text/javascript" language="javascript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.widget-server.com/wiki_seek_image.js"></script>

Summary

Wikipedia(www.wikipedia.org) is one of the largest resources of knowledge on the Internet and contains articles from numerous different languages. In this article, we learnt how to build a Wiki Seek widget to search for articles and images on Wikipedia. Though in this article we’ve used pure JavaScript to create the widgets, we can use technologies like PHP and Ajax, as well as JavaScript.

If you have read this article you may be interested to view :

 

AJAX and PHP: Building Responsive Web Applications Enhance the user experience of your PHP website using AJAX with this practical tutorial featuring detailed case studies
Published: March 2006
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Roshan Bhattarai is an experienced web developer. His core proficiency lies in JAVASCRIPT, CSS, XHTML, PHP and MySQL. Having done his masters in information technology, he has many active websites to his credit. He has worked in various companies as a Technical Lead before moving on as a freelancer. He primarily resolves problems faced by programmers, liaise with the clients to have a better understanding of the projects' requirement and does research on new technologies relating to the project. He also excels in analysis and design of the database and work flow of a web project. He also excels in analysis and design of the database and work flow of a web project. He can be contacted on his blog http://roshanbh.com.np.

Books From Packt

DWR Java AJAX Applications
DWR Java AJAX Applications

Learning Ext JS
Learning Ext JS

Google Web Toolkit GWT Java AJAX Programming
Google Web Toolkit GWT Java AJAX Programming

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

Learning Dojo
Learning Dojo

Drupal 6 JavaScript and jQuery: RAW
Drupal 6 JavaScript and jQuery: RAW

Learning jQuery 1.3
Learning jQuery 1.3

PHP Oracle Web Development: Data processing, Security, Caching, XML, Web Services, and Ajax
PHP Oracle Web Development: Data processing, Security, Caching, XML, Web Services, and Ajax

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
H
L
d
Z
a
5
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software