Tutorial

Setting up the database

previous page next page

The SQL to create the schema is as so:

create table person (
    username text not null unique primary key,
    password text not null
);
create index person_username on person(username);
insert into person (username,password) values ('guest','guest');

This file is called test-cave.sql, because the database name is "test".

... and the XML to configure the cave rock is as so:

<?xml version="1.0" encoding="utf-8"?>
<cave xmlns="http://www.zwartberg.com/fab/1.0" poll-delay="15">
  <database name="test" username="testuser" password="test"
    connect_timeout="1" connection-pool-size="3"/>
  <service name="user-authenticate" id="authenticate">
    <sql>
      select username from person where username=<parameter name="username"/>
      and password=<parameter name="password"/>;
    </sql>
  </service>
</cave>

The name of this file is test-cave.xml. These two files: test-cave.sql and test-cave.xml, must be emailed to Zwartberg R&D.

Now you need to create the client-side javascript that communicates with the server.

<?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" src="/surf/client.js"></script>
    <script type="text/javascript" src="/surf/cave.js"></script>

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

    <p id="login-success" style="visibility:hidden; background-color:red;"></p>
    <!-- widget value -->

    <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 id="login-button" style="float:left;">
      Login
    </div>
    <!-- widget button action:loginClicked; -->

    <script type="text/javascript">
      //<![CDATA[
initWidgets();
initCave(5000, "/www.zwartberg.com/");

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;
	if (!caveQueryInProgress("login")) {
	    var params = new Array();
	    params[0] = new caveParam("username", DB_DATA_TYPE_STRING, username);
	    params[1] = new caveParam("password", DB_DATA_TYPE_STRING, password);
	    sendCaveQuery("login", "authenticate", params, doneLoginCallback, "test-cave");
	    document.getElementById("login-button").widget_set_enabled(false);
	    password_elem.widget_set_enabled(false);
	    username_elem.widget_set_enabled(false);
	}
	else {
	    alert("already logging in, please wait");
	}
    }
}

function doneLoginCallback(trans)
{
    document.getElementById("username").widget_set_enabled(true);
    document.getElementById("password").widget_set_enabled(true);
    document.getElementById("login-button").widget_set_enabled(true);
    var params = new Array();
    params[0] = new caveParam("username");
    findParametersInTransaction(trans, params);
    var success = false;
    var elem = document.getElementById("login-success");
    if (params[0].value == username) {
	elem.style.visibility = "hidden";
	alert("success!");
    }
    else {
	elem.widget_set_text("username/password failed");
	elem.style.visibility = "visible";
    }
    caveStop();
}

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

See the example here.

To communicate with the server, you need to add two library files: the generic client communications JavaScript file, and the cave communications JavaScript file. Hence the two new inclusions near the top of the file.

I also added a value widget just before the username/password/login row, so that if the login fails, it can display an appropriate message.

The doLogin() function now sets up a message to send to the cave. It sends the username and password as text strings, and the message is set up to be sent to the cave service with an ID of "authenticate" which was configured in the test-cave.xml file. It also specifies that when a reply arrives, then the function doLoginCallback should be called. Note that the client-side name "login" is given to this request so that request/replies can be paired up. Its possible to check if a request is already in progress using the caveQueryInProgress() function.

The function doneLoginCallback() receives the transaction object as a parameter, which you can query as in this example by calling findParametersInTransaction() and passing the caveParam objects you are interested in... in this case "username".

Note that doneLoginCallback() is called when the reply arrives, its not called by doLogin(). So other things can happen in between when the transaction is requested till teh reply arrives and this function is called.

Once the user has logged in, then your application can display its main user interface, which I'll explain on page 3 of this tutorial.

More...

Widgets for HTML The Karoo Project Documentation Web Hosting

Documents
Downloads
Sourceforge