I have created the second version of the JavaScript Shortcut Library. It is one of my more popular scripts. This script eases the work involved in making shortcuts in JavaScript.

Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.

Changelog

• The single function method was abandoned for an object with two functions
• Shortcut Remove function added
• New option to disable shortcuts in textarea, input fields.

If you are using this script in any of your projects, please switch to the latest version.

Previous Version Documentation

The last two posts on web installer did not include any code. I wanted to dump all code into one post - this is it. Please note that this is what I did - you don’t have to copy my code as it is. Just look at the code and modify it according to your needs.

Getting Database Details

The Form/Frontend

<form action="" method="post">
<h1>Installation : Step 1</h1>
Please provide the database connection details...
<fieldset>
<legend>Database Details</legend>

<label for='host'>Database Host</label><input type='text' name='host' value='localhost' /><br />
<label for='db_user'>Database User</label><input type='text' name='db_user' value='root' /><br />
<label for='password'>Database Password</label><input type='text' name='password' /><br />
<label for='database'>Database</label><input type='text' name='database' value='nexty' /><br />
</fieldset>

<input type="hidden" name="step" value="2" /><br />
<input type="submit" name="action" value="Continue >>" /><br />
</form>

Backend

Make sure that the given database details are correct.

// The First step is Setting up Database connection
//					   (the '2' is NOT a typo)
if($_REQUEST['step'] == 2) {
	//Save the data to the Session
	if(isset($_REQUEST['host'])) $_SESSION['host'] = $_REQUEST['host'];
	if(isset($_REQUEST['db_user'])) $_SESSION['db_user'] = $_REQUEST['db_user'];
	if(isset($_REQUEST['password'])) $_SESSION['password'] = $_REQUEST['password'];
	if(isset($_REQUEST['database'])) $_SESSION['database'] = $_REQUEST['database'];
	if(isset($_REQUEST['url'])) $_SESSION['url'] = $_REQUEST['url'];

	if(mysql_connect($_SESSION['host'],$_SESSION['db_user'],$_SESSION['password'])) { //Try to connect to the DB.
		$QUERY['success'][] = ‘Connection to Database server successful’;

		if(mysql_select_db($_SESSION['database'])) {//Select the provided database.
			$QUERY['success'][] = “Database ‘$_SESSION[database]‘ selected”;

		} else {
			$QUERY['error'][] = ‘The given database(’.$_SESSION['database'].’) does not exist. Please povide a valid database.’;
			$_REQUEST['step'] = 1;
		}
	} else {
		$QUERY['error'][] = ‘Unable to connect to the database. Make sure that the entered details are correct’;
		$_REQUEST['step'] = 1;
	}
}

Notice the over use of $_SESSION? That will come in use if I decide to add a Back button that enables the users to modify the data entered previously.

Database Creation

//Create the database only if it does not exist
//See if the database exists
$tables_sql = mysql_query("SHOW TABLES") or die(mysql_error());
$necessary_tables = array('Context','Project','Reminder','Setting','Task','TaskContext','User');
while($table = mysql_fetch_row($tables_sql)) {
	$necessary_tables = array_diff($necessary_tables,array($table[0])); //Remove the table from the array if it exists
}

//If there are no tables in the array that means that the all the necessary tables are present in the Database
//If some tables are missing, that means we have to create those tables…
if($necessary_tables) {
	$quries = <<<END
– Insert all the SQL to create the necessary tables here…
END;

	//Execute all the queries
	$all_quires = explode(”;”,$quries);
	$query_count = 0;
	foreach($all_quires as $query) {
		$query = trim($query);
		if($query) {
			@mysql_query($query);
			$query_count++;
		}
	}
	$QUERY['success'][] = “Database Populated.”;
} else {
	$QUERY['error'][] = “Tables already in Database - I did not overwrite it. If you want to remove the old data, please delete the tables and run the installer script agian.”;
}

Saving the Database connection details

//I don't know how to escape the $ charector in heredocs - so I did this...
$config = '$config';//Heh, Heh 
$system_installed = '$system_installed';
$configuration = <<<END
<?php
//Configuration file for Nexty
$system_installed = true;
$config = array(
	'db_host'		=>	'$_SESSION[host]‘,
	‘db_user’		=>	‘$_SESSION[db_user]‘,
	‘db_password’	=>	‘$_SESSION[password]‘,
	‘db_database’	=>	‘$_SESSION[database]‘,
	‘url’			=>	‘$_SESSION[url]‘,
	‘absolute_path’	=>	‘$abs’
);

END;
if(is_writable(’../configuration.php’)) {
        // …Write the $config text into the configuration.php file…

	$QUERY['success'][] = ‘Saved the configuration file. <a href=”‘.$_REQUEST['url'].’”>Go to Nexty</a>’;
} else {
	$QUERY['error'][] = ‘Configuration file (configuration.php) is not writable. Please copy the configuration code and enter it into the “configuration.php” file. Then press continue.’;
}

See the install folder for Nexty in the Subversion server.

Creating a web installer is not hard - as a matter of fact - it is downright easy. You just have to know a few things. Get the database details, create the database, save the details. That’s it!

Getting Database Details

A simple four field form will suffice. The important thing to remember is that the data must be saved as session variables - as we are using a multi-page form.

As soon as you get the DB details, try to connect to the database and confirm that the DB details is correct. If the connection attempt fails, take the user back to the DB details form. Else go to step two.

Insert Initial Data

This part is easy - just run a bunch of SQL statements to create the necessary table structure and insert the initial data.

Save the Details

This should be the last step of the installation. Just take all the data from the session variables and write it to a file, say ‘configuration.php’. Write the data as PHP code - so all you have to do to retrieve the data is include the file.

The code for the installer in the next post.

Almost all distributed web applications has an installer - it makes installation process easier for the end user. I will try to outline some of the most important things to look out for when creating an installer.

Examples of Web Installers

WordPress

Joomla

Nexty

I have created an installer for Nexty - I used the same installer for Jus5 as well. Here’s a screenshot…

Functions of an Installer

Check Requirements

If you software needs the GD PHP extension, check for it - it it is not present, show an error. If any folder must be writable, check for that. Make sure that the user cannot go to the next page without solving all the problems.

Make sure you have provided clear instructions on how to solve the problems - changing the permission might be easy for you and me - but the average user will find it very hard.

Database Connection Details

The user have to provide this data if our system uses a database.

• Host
• User
• Password
• Database

In some applications, the user must manually enter these data into the config file(for eg. WordPress). In other software, the user have to enter it at the time of installation. For example, Joomla uses this method - as does my application, Nexty.

Create tables and insert initial data

Check for existing data first - you don’t want to delete the existing data when reinstalling the software. This step is necessary only if you are using a Database in your application.

Save the inputted data

The user inputted data must be saved - in my application I just write it to the config file. But for that to work, the config file must have write permission. I also give the user an option to copy the code and place it in the config file themself.

Joomla also writes the values to a config file. However, WordPress inserts the data into the database. The only thing in the config file in wordpress is the database connection details - which the user must enter manually.

Disable the Installer

Make sure that the installer cannot be run after the installation is successfully compleated. This is important for the security of the application. You really don’t want any Yahoos opening up the install URL of your application and resetting all the data!

The easiest way of doing this is just deleting the installation script/folder. Joomla insists that you remove the installation folder before letting you use the application. In Nexty, removing the installation directory is recommended - but not enforced.

More on Web Installers in the next post.