Tutorial

Services
Products
Contact us

Karoo Project
Docs
Index

Example of a web service: Accounting system

In this tutorial, I will start by making an extremely simple accounting system, and then will add feature by feature.

There are usually five components to any web service:

The database (data),
a database interface (program/scripts),
dynamic web content creation (program/scripts),
a web server (program), and
the web pages that make up the user interface (data and scripts).

Using The Karoo Project, these 5 components are:

PostgreSQL database containing your data,
the "cave" rock (program that interfaces with the database),
the "surf" rock, (program that creates HTML pages with data from cave),
"surf" (also a web server, so actually there are only 4 components), and
the web pages that make up the user interface (data and scripts).

In this tutorial, I will start by showing you how to make a web page for the user interface.

The basic "template" for a web page for The Karoo Project is as so:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link type="text/css" href="/surf/widget.css" rel="stylesheet" title="new"/>
    <title>Accounting System</title>
  </head>
  <body>
    <script type="text/javascript" src="/surf/widget.js"></script>


    ...


    <script type="text/javascript">
      //<![CDATA[
initWidgets();
      //]]>
    </script>
  </body>
</html>

The very first thing you need to do is to log in. So the first thing we'll create is a login

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link type="text/css" href="/surf/widget.css" rel="stylesheet" title="new"/>
    <title>Accounting System</title>
  </head>
  <body>
    <script type="text/javascript" src="/surf/widget.js"></script>


    <div style="float:left;">
      Username:
      <input type="text" name="username" value=""/>
      <!-- widget text action:usernameEntered; -->
    </div>
    <div style="float:left;">
      Password:
      <input type="password" name="password" value=""/>
      <!-- widget text action:passwordEntered; -->
    </div>
    <div style="float:left;">
      Login
    </div>
    <!-- widget button action:loginClicked; -->


    <script type="text/javascript">
      //<![CDATA[
initWidgets();
      //]]>
    </script>
  </body>
</html>

See the example here.

The DIV elements are used to get the login widgets to appear in a line. Note the style of "float:left;" is specified. This makes the DIV move as far left as possible... and so the next DIV will appear to its right.

Now we need to add the javascript functions that get called when someone presses ENTER or clicks on the "Login" button... and also add a little bit of HTML for cosmetic purposes:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link type="text/css" href="/surf/widget.css" rel="stylesheet" title="new"/>
    <title>Accounting System</title>
  </head>
  <body>
    <script type="text/javascript" src="/surf/widget.js"></script>

    <h3>Login to the Accounting system</h3>

    <div style="float:left;">
      Username:
      <input id="username" type="text" name="username" value=""/>
      <!-- widget text action:usernameEntered; -->
    </div>
    <div style="float:left;">
      Password:
      <input id="password" type="password" name="password" value=""/>
      <!-- widget text action:passwordEntered; -->
    </div>
    <div style="float:left;">
      Login
    </div>
    <!-- widget button action:loginClicked; -->


    <script type="text/javascript">
      //<![CDATA[
initWidgets();

function usernameEntered(target)
{
    var password_elem = document.getElementById("password");
    if (password_elem) {
	password_elem.focus();
    }
}

function passwordEntered(target)
{
    doLogin();
}

function loginClicked(target)
{
    doLogin();
}

var username;
var password;

function doLogin()
{
    var username_elem = document.getElementById("username");
    var password_elem = document.getElementById("password");
    if (password_elem && username_elem) {
	username = username_elem.value;
	password = password_elem.value;
	alert("username="+username+", password="+password);
    }
}

      //]]>
    </script>
  </body>
</html>

See the example here.

At this stage, the example does not actually log you in, it just gets your username and password and pops up an alert showing what you typed in. Next we will get it to actually authenticate the user.

Now you need a database. The database will store the usernames and passwords. At this stage you would need to set up a database on a public server. Zwartberg R&D provide hosting services, or you can get a dedicated server from another hostiing service, but then you need to also set up The Karoo Project software. If you use the Zwartberg R&D hosting service, then all you need to do is to contact us and send us a schema file for your database, and the cave XML configuration file, which I'll explain next on page 2 of this tutorial.

More...

Widgets for HTML The Karoo Project Documentation Web Hosting

Documents
Downloads
Sourceforge