Monday, October 6, 2008

Introduction

This project is about personal dictionary which allows users to create their own dictionary. It provides users the freedom to fully define and edit the entries. Entries could be vocabulary or phrase with definition followed by examples. It is not necessarily to be English, user can define multilingual entries. Furthermore, users can retain their privacies for they are able to set any entry to be visible or invisible for other users. On top of that, the system provides API (Application Programming Interface) for users to customize their dictionaries according to applications. For instance, users can retrieve their entries from database and embed them in the blog. This is different from other content management system such as Wordpress or Blogger because those software packages provide the form of lengthy entries or posts. For developers, they can take advantages of the provided API to develop other applications such as “word guessing” or “hanged man” from the public entries of any user.

Development

The first thing needed to develop in this project is to build the database system which is capable to store all the data used in the system. In this project, we use relational database management system of MySQL because it is the free software package and is very flexible to handle many transactions simultaneously. MySQL is the choice for many Content Management Systems and it is the best choice for this project.

In the database, there could be many tables inter-relating to each other. The first necessary table is the user table storing all the information about users. It be represented in the following SQL code:


CREATE TABLE IF NOT EXISTS `user` (
`ID` int(11) NOT NULL auto_increment,
`username` varchar(50) NOT NULL default '',
`password` varchar(150) NOT NULL default '',
`name` varchar(50) NOT NULL default '',
`email` varchar(100) NOT NULL default '',
`level` int(11) NOT NULL default '0',
`des` text,
PRIMARY KEY (`ID`),
UNIQUE KEY `username` (`username`,`password`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=64 ;

This table creates attributes ID, username, password, name, email, level and and descriptions of users. Hence, when there is a new user registering, the system will keep record of his information in the above fashion.

The next step is to create table which is able to store all data entry of user vocabularies. The following code is to define a table storing keywords and their definitions.

CREATE TABLE IF NOT EXISTS `dic` (
`ID` bigint(20) NOT NULL auto_increment,
`userID` int(11) NOT NULL default '0',
`keyword` text character set latin1 NOT NULL,
`definition` text character set latin1 NOT NULL,
`editor` varchar(50) character set latin1 NOT NULL default '',
`time` varchar(100) character set latin1 NOT NULL default '',
`visibility` tinyint(4) NOT NULL default '1',
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=263 ;

It creates the table with attributes ID, userID, keyword, definition, editor, time, and visibility.

userID: is used to identify the owner to the word.
keyword: is the word defined by user.
definition: is the definition defined by user.
editor: is the person who last edited the entry.
time: is the time at which entry was edited.
visibility: is used to defined whether the entry is private or public. If it is defined as private, the entry is only visible to the owner only; if it is defined as public, the entry is visible for everybody.

These two tables are enough for building up the complete database system in this project.


The next step is to write PHP code as the kernel of the system. The kernel is flexible in such a way that it can communicate with MySQL database which stores all data of dictionary entries. To connect to database, we use the following snap code:

$connection = mysql_connect($db_host, $db_username, $db_password);

if(!$connection) die("fail to connect host");

$db_select = mysql_select_db($db_database);

if(!$db_select) die("fail to connect database");

This acts as a bridge connecting between database and kernel. To authenticate for each user, we can use the following function:

function authenticate($username, $passwordN)
{
session_start();
if($_SESSION["user"] != NULL) return true;

$password = md5($passwordN);

$query = "SELECT * FROM user WHERE username = '$username'
AND password = '$password'";

$flag = false;

$result = mysql_query($query);
if(!result) die("can't query database");

if($row = mysql_fetch_assoc($result))
{
$user = new User($row["ID"], $row["username"], $row["password"],
$row["name"], $row["email"], $row["level"], $row["des"]);
$_SESSION["user"] = serialize($user);
$flag = true;

}

return $flag;
//return $_SESSION["user"];
}
The password is stored in MD5 hash algorithms for security purposes.


For each time the vocabulary is entered, we use the following function:

function addWordIntoDB($userID, $keyword, $definition, $editor, $time, $vis)
{
$query = "INSERT INTO dic (userID, keyword, definition, editor,
time, visibility) VALUES ('$userID', '$keyword',
'$definition', '$editor', '$time', '$vis')";

$result = mysql_query($query) or die ("Error in query: $query. ".
mysql_error());


$affectedRow = mysql_affected_rows();

if($affectedRow == -1) return "Can't insert into database";

else return "Successfully inserted";

}



The beta version of the project is available at http://dictionary.singachea.net

Concept

This project concept was built for personalization of dictionary to empower the freedom of users to customize their dictionaries. It allows users and developers to build own applications with the provided API. One example of the API provided is shuffling word. This can be found at http://dictionary.singachea.net/shuffle.php?user=USERNAME

The above URL returns XML format of the random shuffling vocabulary which allows developers to customize this result and transform it into their own applications. You can see a gadget on the right sidebar in this blog; you are supposed to find the correct word which have been shuffled. The message box will alert to ascertain whether you enter the correct word.

Therefore, the whole idea of this project is to allow users and developers to play around with dictionaries and create their own arts. 

Images and Videos

How to set up this project

First of all, we need to create database; you can create database at your choices using any API provided by web host. In this case, I used PHPMYADMIN because it is the best web-based GUI of MySQL database management.


When you click on "Create", it will create a new empty database. Next we are going to create table in this database.


Now, we have finished filling up the database, and we can proceed to install the source code to the web server right away. Copy the source code folder to the server folder. Any location would be fine.



Since we database has different username and password, we need to change them now. Select config.php in the source code folder.



Change the $db_host, $db_database, $db_username and $db_password according to your configuration.
Wow... we are done with the installation. It's pretty easy, isn't it?


How to use the dictionary

Now it's time to explore more on how to use this online dictionary. First, we need to to know where to navigate to. Enter the address bar in your browser: http://dictionary.singachea.net as below picture.



If you don't have the account, create a new account by clicking Register.



There is a form allowing to fill up your information such as username and password. When you are ready click "Submit".
After you register, click on "log in" to login into your account. Fill up username and password in the form provided.

The usage is quite simple. Click on "Add word" to add new vocabulary at your choice. You can set it as "public" or "private". If you set it as "private", only you can see; if you set it as "public", everyone can see.



You are also able to edit your previous entry by clicking on the "edit". You can play around with the Quiz and this will help you to remember your vocabularies.


How to embed your dictionary in the blog

This is pretty simple because you can do in a flash and you will get like in the following figure.



First login into your blogger account at http://blogger.com, and then select "Layout"



Click on "Add a gadget" to add a new dictionary component.

Choose "HTML/JavaScript" so that you can embed the dictionary in your blog.



Fill up the title of your new sidebar. Copy the code into "Content" and change username to your username.


Click "Save" and you are done. View your blog to see new added dictionary at the sidebar of your blog.


How to develop application from your personal dictionary

It is not difficult to develop your application based on your dictionary like the one you see below. It's the game that let you guess the correct word by fetching the entries from your dictionary.


Here are the steps. You need to examine the provided API.




From the above URL, we can see the XML format allowing users to customize the game as they want.



To make it more serious, here are short snap code describing the above game using AJAX technology.

If you install the server by your own, you can provide more API to the community as well.


Other pictures

The below is the images and some video during of the project.



The above picture is the screen shot of personal dictionary listing the vocabularies of user.






The above is the gadget developed for Google Desktop.

Sunday, October 5, 2008

Instruction how to make the project

In this project, there are a few tools and some programming languages needed in order to build the complete development.

  • Apache: web server needed to serve requests and responses for users.
  • PHP: server side scripting language which performs basic functions and provides interactions between Apache and MySQL.
  • MySQL: database server which stores all data and information for users.
  • AJAX: Asynchronous JavaScript and XML which allows clients to request a portion of information from server.

First of all, Apache web server needs to be present so that it has the role to serve the request from users. Once it receives requests from users, it try to process the source code written in PHP. After that it returns the result back to clients.

PHP is a server-side scripting language which is able to communicate with MySQL database. It creates the session when users log in. It processes all the requests made by users; for example, it queries all vocabulary by a specific user. This part is the heart of this project, because it does all works to be a complete personal online dictionary.

MySQL has the role to store all the data provided by users. It stored all the vocabularies and serve the request from PHP. MySQL is a free and fast RDBMS which is suitable for many applications.