Installing a fresh Debian 5.0

I am using Virtual Box on my Ubuntu Workstation. This gives me the option to install the OpenQRM in a closed internal network, without having access to new hardware.

To start with I am doing a fresh installation of Debian 5.05 without any additions. No server software, no desktop software, nothing. Just like this:

Installing the basic packages for building the OpenQRM source

Now I have the most basic Debian installation. The OpenQRM will be installed from the svn repository, so I have to install the subversion and make programs. I will also install the mysql-server-5.0 and postfix manually before starting, as it seems something gets messed up if the OpenQRM installation handles these two:

root@openqrm:~# aptitude install subversion make postfix mysql-server-5.0
Reading package lists... Done
Building dependency tree
Reading state information... Done
Reading extended state information
Initializing package states... Done
Reading task descriptions... Done
The following NEW packages will be installed:
  bsd-mailx{a} ca-certificates{a} file{a} libapr1{a} libaprutil1{a} libdb4.5{a} libdbd-mysql-perl{a} libdbi-perl{a}
  libexpat1{a} libhtml-template-perl{a} libldap-2.4-2{a} liblockfile1{a} libmagic1{a} libmysqlclient15off{a}
  libneon27-gnutls{a} libnet-daemon-perl{a} libplrpc-perl{a} libpq5{a} libserf-0-0{a} libsqlite3-0{a} libsvn1{a}
  libterm-readkey-perl{a} libxml2{a} mailx{a} make mime-support{a} mysql-client-5.0{a} mysql-common{a}
  mysql-server-5.0 openssl{a} openssl-blacklist{a} perl{a} perl-modules{a} postfix psmisc{a} python{a}
  python-minimal{a} python2.5{a} python2.5-minimal{a} sgml-base{a} ssl-cert{a} subversion xml-core{a}
0 packages upgraded, 43 newly installed, 0 to remove and 0 not upgraded.
Need to get 64,1MB of archives. After unpacking 189MB will be used.
Do you want to continue? [Y/n/?] Y

During the installation of mysql-server-5.0 you will be asked to type in a MySQL root user password. I am entering ‘openqrm’ – you can choose whatever you like, as long as you can remember it later on.
The postfix packages will ask how to deliver mail from the system. This depends on your setup, but I will select the “Internet Site” option, so that the server can delivery mail directly on the internet.

Download OpenQRM from the svn repository

When this is done, the next step is the fetch the newest version from the svn repository:

root@openqrm:~# svn co https://openqrm.svn.sourceforge.net/svnroot/openqrm openqrm
...
Checked out revision 1998.

This can take a few minutes and it finishes by displaying which revision I have checked out.

Compiling the OpenQRM source

Next step is to change to the src-folder and start the code compiling by running the ‘make’ command:

openqrm:~# cd openqrm/trunk/src/
openqrm:~/openqrm/trunk/src# make
...
...

This will download and install all the needed Debian packages by itself.

Installing the OpenQRM source

To install the OpenQRM software run the ‘make install’ command, when the previously ‘make’ command has finished:

openqrm:~/openqrm/trunk/src# make install

This will copy all files to the correct positions on the system.

OpenQRM system scripts

The final installation step is to run the ‘start’ command, which activates all startup scripts and installs the last required system software:

openqrm:~/openqrm/trunk/src# make start
...

Accessing the Web interface

All software has now been installed and the final step is to prepare the MySQL-database.

This is done by accessing the OpenQRM website. My server has the IP address 192.168.1.26, so I will point my browser at http://192.168.1.26/openqrm/ and type in ‘openqrm’ in the username and password prompt.

Step 1

I am clicking ‘next’:

Step 2

I am selecting the MySQL option:

Step 3

Now enter the password for the MySQL root user and click ‘Initialyze’

All done

The OpenQRM should now be installed without any errors:

The browser will now redirect to the main screen and we are ready to go.

I asked around a bit and everyone said I should take a look at ‘git’, so that I did and I will here summarize what I found so far.

What is Git?

The git version control is a decentralized system that runs along side your code projects. This means that your are not depended on a shared/central server to manage your requests. This have many advantages compared to say cvs and subversion (svn), but I will not go into details with this.

Basic file handling

I have writing a small Hello World sample i php, which looks like this:

<?
  print "Hello world!";
?>

Nothing fancy – just a starting point.

Initializing a project

To start up a new project, you have to use the init-option. Standing in the root folder of your project run this:

$ git init
Initialized empty Git repository in /home/js/helloworld/.git/

This creates a .git-folder in the root of the project folder and your project is ready to go.

Adding files to the git repo

To add the newly created helloworld.php file to the git repository, you have to use the add option like this:

$ git add helloworld.php

The helloworld.php is now queued for adding to the project.

Committing changes

When files are marked to be added to the project, you have to commit the changes to the repo. This is done with the commit option

$ git commit

This opens up your default editor, where you can type in a comment for your update. When this is done and the content is saved, just quit your editor and the file should now be committed.

$ git commit
[master (root-commit) 22aff8e] Initial commit
 1 files changed, 3 insertions(+), 0 deletions(-)
 create mode 100644 helloworld.php

Showing a log/history of the project

To see what has happen to the project, you can always run the log option like this:

$ git log
commit 22aff8e5f227c6284307363d036fbe06806ad4a5
Author: js <js@w(none)>
Date:   Sun May 16 22:54:13 2010 +0200

    Initial commit

Here we can see, that I have submitted a change, which I have commented “Initial commit”.

Updating existing files

So lets make some changes to the helloworld.php file:

<?
  print "Hello world... Hello world!";
?>

I have here added some text to the print command.

When using the diff option we can see which changed has been entered:

$ git diff
diff --git a/helloworld.php b/helloworld.php
index 4450c89..50f9c46 100644
--- a/helloworld.php
+++ b/helloworld.php
@@ -1,3 +1,3 @@
 <?
-  print "Hello world";
+  print "Hello world... Hello world!";
 ?>

Here we can see, that there is a difference in the helloworld.php file.

To save these changes in the repo, just commit them like shown above:

$ git commit -a
[master d6bcc84] Added more text
 1 files changed, 1 insertions(+), 1 deletions(-)

Reverting back to previous versions

Doh!, this is all wrong. It should only print out “Hello world” and nothing else. Well, then we just have to fetch the previous version of the helloworld.php file.

Lets use the log function to see which change we have to get back to:

$ git log
commit d6bcc84950f5968e8c5d3fc0522e55cfb3cc8dab
Author: js <js@w(none)>
Date:   Sun May 16 23:04:17 2010 +0200

    Added more text

commit 22aff8e5f227c6284307363d036fbe06806ad4a5
Author: js <js@w(none)>
Date:   Sun May 16 22:54:13 2010 +0200

    Initial commit

We then want to go back to the initial commit by using the hash value stated on the commit line:

$ git checkout 22aff8e5f227c6284307363d036fbe06806ad4a5
Note: moving to '22aff8e5f227c6284307363d036fbe06806ad4a5' which isn't a local branch
If you want to create a new branch from this checkout, you may do so
(now or later) by using -b with the checkout command again. Example:
  git checkout -b <new_branch_name>
HEAD is now at 22aff8e... Initial commit

Listing the content of the helloworld.php will now verify that we have gone back to the original version.

But as you can see, we now have to work with branches. I will not cover branches in this article, so just save a branch and move it to the master like this:

$ git checkout -b test
Switched to a new branch 'test'
$ git branch -M master

There you go – a previous update was found and we can continue our coding from here.

I will cover branches and much more later on.

The Android platform is very new to me, so I wanted to read about some of the basics before starting to develop Android software. I know the Internet contains all the same information, but sometimes it is nice to have the reading material as a good old fashion paper book.

When reading through the book I will try out the example codes on my HTC Hero telephone with the Android 1.5 original rom.

I will, with out doubt, end up in situations where nothing want to work the way I thought it would and when this happens, I will be making blog post about this. The Android platform is very exciting and the HTC Hero is doing a nice job running it. I know there is different opinions about the Hero phone and some might prefer the droid instead and this is all fine by me. I happen to have the HTC Hero.

More blog post about the Android platform will follow very soon.

I have been working on a small project of mine and figured that the sortable widget could be a great feature. I then started to output the list and the element that should be draggable like this:

My HTML list

<ul id="sort1">
  <li>
    <div>box no 1</div>
  </li>
  <li>
    <div>box no 2</div>
  </li>
  <li>
    <div>box no 3</div>
  </li>
</ul>

My jQuery code to enable the sortable widget and for getting a serialized result when an element has been dragged around:

$(document).ready(function() {
    $("#sort1").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var info = $(this).sortable("serialize");
            $("#sort1output").html(info);
        }

    });
});

Example (try dragging a box up or down):

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

So. Nothing. No output what so ever.

I have spend several hour researching this problem, because the documentation on jqueryui.com lists that the serialize and toArray events should return output.

And then. Finaly. I stumpled upon a note regarding the id name of the element that gets dragged. I have seen no documentation about this and was quite puzzled. I digged some more into this id-hint and realized that the element that gets moved around, has to have a unique id tag ending with a number like this: “element_2″.

The working code will then be:

<ul id="sort2">
  <li id="element_1">
    <div>box no 1</div>
  </li>
  <li id="element_2">
    <div>box no 2</div>
  </li>
  <li id="element_3">
    <div>box no 3</div>
  </li>
</ul>

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

I hope this tip is helpfull.

The guide will be based on common Linux installations of both MySQL and PHP.

Step 1 – the database

Create a table in your MySQL database with 2 fields, username and password. This could be done by running the following code in your MySQL shell or from phpMyAdmin or another interface:

CREATE TABLE `login` (
`username` TEXT NOT NULL ,
`password` TEXT NOT NULL
)

The database table called login is now created with 2 field named username and password.

Step 2 – The HTML form

First we have to create the web formula to show the login function:

<form action="login.php" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

This will output 3 field like this:

When submitting the form, either by hitting enter or by clicking the Login button, the formula will send the username and password to the login.php file.

Step 3 – Getting the information from the website.

The login information has now been sent to the login.php and we have to receive these value before checking them against the MySQL database.

Login.php:

  <?php
  ...
  // receiveing the login information
  $username = $_GET["username"];
  $password = $_GET["password"];
  ?>

Step 4 – Connecting to the database

Before checking the login data against the database, we have to open a new connection.

<?php
  ...
  //login information to the MySQL database
  $dbuser = "myUsername"; // change myUsername to your own username
  $dbpass = "myPassword"; //change myPassword to your own password
  $dbhost = "localhost"; // this should work in most cases. Otherwise contact your webhost
  $db = "myDatabase"; // change myDatabase to your the database assigned to your login

  // perform user authentication
  mysql_connect($server, $dbuser, $dbpass);
  // selecting database
  mysql_select_db($db;

  ...
?>

Step 5 – Comparing the username and password against the database

We have the login information from the formula and we have opened a connection to the database. Great. All we have to do, is the actually user validation.

<?php
  ..
  // check the content of our $username and $password variable against the login table
  $sql = "SELECT username FROM login WHERE username='$username' AND password='$password'";
  // perform the query
  $query = mysql_query($sql);
  // check if the request returned 1 or 0 rows from the database
  if (mysql_num_rows($query)) {
    // 1 or more rows matched our request, which means the username and password combo are valid
  } else {
    // 0 rows matched our request. Login is not valid then.
  }
  ..
?>

Step 6 – All done, final pointer

This is a very basic type of php login script. There are a lot of other things to have in mind when making database queries, that I have not convert in the above examples:

• Perhaps the login table should hold more information, like a user id for easier validation later on the the script.
• Double checking and validating user input to prevent SQL Injection. This could be done be PHP Magic Quotes or by manually applying addslashes() and stripslashs().
• ..

But then again. Very simple demonstration.

My setup is very basic. An iframe loading a page like this

<iframe name="framename" id="myframe" src="mypage.html"></iframe>

In the page where this iframe is being loaded, I have included the jquery.min.js and an extra .js-file for my code.

First attempt was to try the examples found on Google. For testing purposes I wanted to set a red background color on every <div> inside the iframe.

var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

Nothing happens.

When testing new things I often use alert-boxes for test-output, so I tried inserting an alert-box:

alert("trying a red color");
var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

And hey! When pushing the alert-box, the divs inside the iframe gets a red background-color. Or at least they do in Firefox 3.0.11 (still a no-go in IE8). Strange.

Test 2:

$("#myframe").contents().find("div").css("background-color", "red");

Nothing! Blank!

Oh well. Why not try the alert-box again:

alert("trying a red color");
$("#myframe").contents().find("div").css("background-color", "red");

Hmm.. this seems to work in both Firefox 3.0.11 and Internet Explorer 8 IF you don’t push the alert-box until the iframe is finished loading.

So perhaps it’s all about not accessing the iframe before the contents has been loaded. So I tried wrapping the whole thing in a ready-function like this:

$("#myframe").ready(function () {
...
}

That did not help at all.

Well. Google google google. And bingo. There’s a plugin for jQuery called frameReady and this does the trick.

Third and final test:
Include the jQuery.frameReady.js in the main page and enter this code:

$.frameReady( function() {
    $("div").css("background", "red");
  },
  "framename"
);

This loads the iframe and sets a red background color on every div inside the iframe. Tested in IE8 and Firefox 3.0.11.

Conclusion:
Use the frameReady plugin for jQuery when manipulating with iframes.

Update: If you’re having trouble getting this to work, please check the source code for frameReady and verify that the hardcoded path for /js/jQuery.js matches your site configuration!