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(' <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(' <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:
- 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
- Now, we can widget in any web pages by placing the following JavaScript Code in the website.
<script type="text/javascript" language="javascript"
src="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.
