Mar 30, 2011

Create an AJAX supported registration form with WhizBase

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you might look at some of my other articles on WhizBase).

The Structure

I will first explain the structure of our registration form, as I am using AJAX, I will not have any refresh for our page, so I will have one main page with the HTML and JS code.
For the validation process I will use one WhizBase file, for submitting registration data I will use another WhizBase file.
To store the registration information I will need a DB, and for this demonstration I will use the simplest one, Microsoft Access DB.
Every registration process needs a confirmation process to reduce spam registrations. So I will need one WhizBase file for confirmation, for sending the email I will use two files (I will explain why later in this article).
Now let give names, I will create default.wbsp, validate.wbsp, submit.wbsp, mail.wbsp, blank.html and confirm.wbsp. I will create reg.mdb for DB.

Registration Elements

The registration form will contain a user name, first name, last name, email and password. All elements are required, so no element must be empty. The user name must be available, the password must be repeated to confirm the password and the email must be real.
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function loadXMLDoc(url,rezult)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById(rezult).innerHTML=xmlhttp.responseText;
}
function Validate()
{
loadXMLDoc('validate.wbsp?username='+document.getElementById("username").value+'&fname='+document.getElementById("fname").value+'&lname='+document.getElementById("lname").value+'&password='+document.getElementById("password").value+'&password2='+document.getElementById("password2").value+'&email='+document.getElementById("email").value,'msgs');
if(document.getElementById('msgs').innerHTML==""){
loadXMLDoc('submit.wbsp?wbf_username='+document.getElementById("username").value+'&wbf_fname='+document.getElementById("fname").value+'&wbf_lname='+document.getElementById("lname").value+'&wbf_password='+document.getElementById("password").value+'&wbf_email='+document.getElementById("email").value,'msgs');
}
}
</script>
</head>
<body>
<div id="msgs"></div>
<fieldset><legend>Enter your information in the form below.</legend><br />
Username:<br />
<input type="text" name="username" id="username" size="40" maxlength="60" /><br /><br />
First Name:<br/>
<input type="text" name="fname" id="fname" size="40" maxlength="60" /><br /><br />
Last Name:<br/>
<input type="text" name="lname" id="lname" size="40" maxlength="60"/><br /><br />
Password:<br />
<input type="password" name="password" id="password" size="40" maxlength="60"/><br /><br />
Confirm Your Password:<br />
<input type="password" name="password2" id="password2" size="40" maxlength="60"/><br /><br />
E-Mail:<br />
<input type="text" name="email" id="email" size="40" maxlength="60"/><br /><br /> </fieldset>
<div align="center">
<input type="button" value="Submit" onclick="Validate();" /></div>
</body>
</html>
Let me now explain the HTML and JS code. The HTML code have the basic elements of the registration, I have input text fields to insert data needed for the registration with two password fields (for the password, and a second for confirmation). Finally I have a submit button and a div for viewing system messages.
The JS code has two functions, the first is the AJAX JS function, the other is the validate function that I call when I submit the form.
You will notice I call AJAX for two reasons, one is for validating the data in the form, the second is for saving the data in the DB.

Validation process

I will create a file for validating form data and will name it as "validate.wbsp". In this script I need to validate data, if there is errors I must display an error message, if not, keep the output empty. The output will be returned by AJAX and displayed in the messages div.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username="$wbv{username}"
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!--WB_BeginTemplate-->$wbif["$wbp[rc]"=1|$wbsetv[msg|The username is not available, plase choose another!<br />]|]$wbif["$wbv[username]"=""|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]$wbif["$wbv[fname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbif["$wbv[lname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbsplit[$wbv[email]|email_array|@|F]$wbsplit[$wbgetv[email_array(1)]|domain|.|F]$wbif["$wbv[password]"=""|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]$wbif["$wbv[password]"<>"$wbv[password2]"|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]$wbgetv[msg]
WhizBase do not recognize lines, it's code is directly embeded in HTML, so any extra white space or break will show in the HTML, so I have removed all white spaces and breaks I do not need.
Let us go through the code step by step.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username="$wbv{username}"
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!--WB_BeginTemplate-->
Here I am connecting to my DB Access file with the record set (table) profile, making a Query command and giving a where clause option username="$wbv{username}", where $wbv{username} will show the parameter I sent by AJAX by get or post method. For WhizBase get and post are the same.
I am limiting the records with 1 maximum, because I just want to check if the username already exists in the DB. If there is no records I will set the msg variable empty, I will need this variable later in the code. WBM_NoMatch gives "No Matching records" message by default, I do not want that, so I am just setting a variable.
$wbif["$wbp[rc]"=1|$wbsetv[msg|The username is not available, please choose another!<br />]|]
If the query above returns data I will give an error message that the username is not available, and save the message in the msg variable. I'm using an IF statement and check if $wbp[rc] which returns the number of records are equal to one.
$wbif["$wbv[username]"=""|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]
In case the username is empty I give an error message to write the username. When I assign the message to the variable I must not forget the messages we have from before, so I use wbgetv in wbsetv to add the past ones also.
$wbif["$wbv[fname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[lname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[password]"=""|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]
The same process as before I do for the first name, the last name and the password.
$wbif["$wbv[password]"<>"$wbv[password2]"|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]
If the passwords do not match, it is also an error. WhizBase uses <> for not equal. If you put != it will provoke a syntax error.
$wbsplit[$wbv[email]|email_array|@|F]
$wbsplit[$wbgetv[email_array(1)]|domain|.|F]
$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]
Checking the email if it is valid is a little more complicated process: I need to check if the email address has an @ sign, and if it has at least one character before and after the @ sign. I also check if the domain name part before the dot has at least one character, and if the TLD part is at least 2 characters but not more than four.
$wbgetv[msg]
Finally I display the error messages I have collected, if no error messages are provoked I will have an empty variable. This data is displayed by AJAX in my messages div.

The Database

Before I go with the submitting data process, I need to show you the DB I have created. It is one DB containing one table called profile. Profile contains seven fields. The id is an auto-incremental field. The confirm field is a number type field with zero default value. The rest fields (username, fname, lname, password, email) are text type fields. I am saving the DB as "reg.mdb" access file.

Submitting the data

The submitting section of the code doesn't just save data to the DB, it also calls the email file to send a confirmation request email.
Before I get to that, I pass the parameters in the URL using JS, a little bit different than before. I am use a wbf_ prefix for every parameter I want to add to the DB. WhizBase takes them automatically and filters them, then adds them in the location we specify.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=A
<!--WB_BeginTemplate-->$wbgeturl[mail.wbsp?id=$wbf[id]&email=$wbf[email]]You will recieve a confirmation email to finish the registration process.
This code will save the data in reg.mdb DB, in profile table using Add command. I will use wbgeturl function to call the email sending file, I am passing the id and the email of the last inserted data. By $wbf I can get the data inserted by this operation.
I return via AJAX the message "You will receive a confirmation email to finish the registration process.".
At this time I have data in the DB, but it is still not confirmed. I have created a confirm field in the DB which has by default a zero value.

Sending email

Sending an email in WhizBase is very easy, it supports HTML by default, anything I write in this file after the "<!--WB_BeginTemplate-->" code, will be shown in the email. So I must be careful what I write.
[FormFields]
WB_Command=P
WB_From=admin@yourdomain.com
WB_Redirect=blank.html
WB_Subject=Please confirm your registration
wb_mailserver=mail.yourdomain.com
WB_To=$wbv{email}
<!--WB_BeginTemplate-->Please click <a href="http://www.yourdomain.com/confirm.wbsp?wbf_id=$wbv[id]">here</a> to confirm your registration.
The command P is for sending custom email. I specify the email address I am sending from, as well as from which mail server, the recipient's email address, and the subject of the email. After the "<!--WB_BeginTemplate-->" code I write everything I want to show in the email, which in this case is a link to the confirmation page, with the id of the profile I saved.
I call this file with the wbgeturl function, which will show me the data returned from the file called. So I need to return nothing by redirecting the page I am calling to blank.html (which is a blank file). The redirect in WhizBase is made on the server side, so I do not get the message of the email, but the blank page.

Confirmation process

When the guest makes a registration he will receive my email for confirmation, the link to the confirmation must be clicked, which will call my file for confirmation.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=U
WB_UID=id
WB_FORCED=wbf_confirm=1
<!--WB_BeginTemplate-->Now you can login to the system!
The confirmation will update the DB, and put value 1 in the field confirm for the specified profile. Updating the DB is simple, I specify the DB name, the recordset (table) name, the U command for update, I specify which field is the unique identifier for this process. In our case it is ID. And I will force one parameter as it is sent with the URL call, it is wbf_confirm = 1.
Finally I tell the guest that he has become a user. In the next article I will show you how to make a Login in WhizBase code.
For more information email me at: NurAzije [at] Gmail [dot] com Or visit the WhizBase official site at www.whizbase.com

Mar 23, 2011

Whizbase fast tutorial

Introduction

This tutorial will give you a fast look what you can do with WhizBase. I expect you already know how to work with HTML at least, and that you understand the basics of the internet and how the internet works.
WhizBase is a server-side scripting language, which uses simple English words for its commands. WhizBase files regularly have .wbsp extension, but it also can have .ic, .sr, .inc and other less likely.
The syntax of WhizBase is directly embedded in HTML code, for example if you want to show the current date you use:
This is the date today: $WBFN[DATE]
Every WhizBase file is interpreted first then sent back to the browser, so this code will not show any WhizBase code in the source code of the page.

Conditional Programming

As with most server-side scripting languages, WhizBase supports conditional programming, you can write IF statements and switch case statements in WhizBase. Here is the basic syntax and examples:
$WBIF[expression|true part|false part]
If we need to show the string "Today is Friday" only when it is Friday we use:
$WBIF[ $WBFN[WEEKDAYS] = "Friday"
|
Today is Friday
|
I am sorry today is not Friday
]
If just IF and ELSE are not sufficient (we want more than one case) we must use the CASE statement:
$WBCASE[separator|value|conditionlist|resultlist|default]
For the seven days in the week:
$WBCASE[,|$WBFN[WEEKDAYN]
|
=1,=2,=3,=4,=5,=6,=7
|
Today is Sunday, Today is Monday, Today is Tuesday, Today is Wednesday, Today is Thursday, Today is Friday, Today is Saturday
|
Today is unknown!
]

Passing Data from a Form

One common reason to use server-side programming on sites is to collect data from the visitors. To collect some data from the user we will use a simple HTML Form:
<html>
<form method="post" action="process.wbsp">
First name: <input type="text" name="fname" size="30">
</br>
Date of birth: <input type="text" name="bdate" size="30">
<input type="submit">
</form>
</html>
Now on the server-side in our file "process.wbsp":
Hello $WBV[fname], your date of birth is $WBV[bdate]!

Sending emails

A very powerful tool that is common on websites is a contact us form. The form can simply send an email by WhizBase, passing the subject, description and client's email.
First we have the HTML form:
<html>
<form method="post" action="email.wbsp">
Your email: <input type="text" name="email" size="30">
<br>
Subject: <input type="text" name="subject" size="30">
<br>
Body <textarea cols="30" rows="5" name="emailbody"></textarea>
<input type="submit">
</form>
</html>
Now we make the WhizBase email:
[FormFields]
wb_command=P
wb_mailserver=out.mail.com
wb_to=info@mydomain.com
wb_subject=$wbv{subject}
wb_from=$wbv{email}
<!--WB_BeginTemplate-->
<html><body>
$wbv[emailbody]
</body></html>
By defining the data of the server in the code before, we have code which will send an email to the defined destination.

Working with the Database

The simplest DB that WhizBase work with is Microsoft Access "mdb". But it also work with any common database.
To query all the fields in an access recordset we use this code:
[FormFields]
WB_Command=q
WB_Basename=biblio.mdb
WB_Rcdset=titles
WB_TempName=$default$
This code will show all the data in the DB viewed in 20 records in a page with a navigator automatically generated for easier surfing.

Writing files

Finally, how to write files using WhizBase?
You have a lot of ways to write files in WhizBase, for example you can write ini files or txt files. I will show you the simplest way I have found:
[FormFields]
wb_destination=today_is.txt
wb_redirect=today_is.txt
<!--WB_BeginTemplate-->
Today is $WBFN[DATE]
When you open this file you will find today's date.

What is next

WhizBase can do a lot more than my examples have shown; you can work with sessions, arrays, variables, make complex calculations, update/delete/add records in any DB, sending sms's or mails to mailing lists and other features.
For more information email me at: NurAzije [at] Gmail [dot] com Or visit WhizBase official site at www.whizbase.com

Mar 21, 2011

Creating live visitors counter (who is online) in WhizBase

Ever wondered how to display how many visitors you have online. In this tutorial I will show you an easy but effective way to display the number of online visitors in WhizBase.
In this article I assume you have read my previous articles and know some WhizBase basics, as how to query, insert or update a DB.

We will need one table in the DB where we will keep the data of the recent visitors. The principle goes like this:

1- the visitor enters the site
2- we check the IP address of visitor and check if he is in the DB
3- if the IP exists, we update its record with current time
4- if not, we insert a new record
5- To include to visitor in our counting he must check-in in last 5 seconds

The database table used by the tutorial

I will not go through the SQL or the Access file creation, I will just describe what we need in the DB. We will need one table named "visitor". It will have the following fields:
Id as integer(9) autoincrement primary key
IP as char(100) unique and not null
Lastvisit as DateTime
I will create it in access DB and name the file visitor.mdb, and the table as visitor.
The id is auto increment field, so we will not need it in our code, it is just for table indexing and maintenance. The IP is the IP address of the visitor, and it must be unique and not null. Lastvisit will be a date and time of the last visit.

If exists include update, else include add

As we stated in the introduction, we will need to check if the visitor is online or not, and then include the file which makes the needed changes on the DB.
[FormFields]
WB_BaseName=visitor.mdb
WB_RcdSet=visitor
WB_Query=IP=$WBE{REMOTE_ADDR}
WB_Command=Q
<!--WB_BeginTemplate-->
$WBIF[$WBP[RC]>0|
$WBGETURL[update.wbsp?wbf_id=$WBF[id]]
|
$WBGETURL[add.wbsp?wbf_ip=$WBE[REMOTE_ADDR]]
]
<html>
<head>Number of visitors online</head>
<body>
$wbsr[show.sr]
</body>
</html>
In this code we have started WhizBase file and queried the DB «visitor.mdb», the table «visitor» where the IP address is gained by «$wbe[remote_addr]». «$wbe» is the function for reading operating system environment variable, in this case variable remote_addr that exist in every web server. I have named this file as «onvisitors.wbsp».
Now using «$wbif» we check if count of records is greater than zero by «$wbp[rc]>0», and if true we call the file «update.wbsp» and pass the parameter wbf_id with the id of current record. If false («$wbp[rc]=0») we call the file «add.wbsp» and pass the WBF_IP value.
Finally we call a sub-report file which will give us the result of how many users are online using «$wbsr» function.

I have visited your site before, update me

This is a description of the file that will be used to update the DB and record the time of last visit.
[FormFields]
WB_BaseName=visitor.mdb
WB_RcdSet=visitor
WB_Command=U
WB_UID=ID
WB_FORCED=wbf_lastvisit=$WBFN{FDT(yyyy-mm-dd hh:mm:ss)}
<!--WB_Begintemplate-->
This is a simple update script, we connect to «visitor.mdb», open table «visitor» and make an update to the unique field id and force one more parameter named «wbf_lastvisit» with the current date and time in the suitable format.
In previous paragraph we've explained why we call this file and give it wbf_id as a parameter, and you know WhizBase needs a unique field to update the record by. So we defined field "id" as the unique one. Then we needed the current time, so we have forced one more parameter (same as if we have sent it by form, but for security reasons we've used this method). The parameter is wbf_lastvisit which has the value of current date and time formatted in full year-month-day hour:minutes:seconds format.
Since we need no feedback from this file, it will do the update and return an empty string (a blank page).

This is my first visit to your site, insert me

We use this simple code to call the file «insert.wbsp» and pass the parameter with the IP of the visitor.
[FormFields]
WB_BaseName=visitor.mdb
WB_RcdSet=visitor
WB_Command=A
WB_FORCED=wbf_lastvisit=$WBFN{FDT(yyyy-mm-dd hh:mm:ss)}
<!--WB_Begintemplate-->
There is no need to describe anything in this code, it is the same as previous one but for addition (wb_command=A).

So how many visitors are on my site now?

Finally, we will look into the file «show.sr» which we include as a sub-report in our WBSP file.
[FormFields]
WB_BaseName=visitor.mdb
WB_RcdSet=visitor
WB_Query=lastvisit>$WBDCALC{$WBFN{FDT(yyyy-mm-dd hh:nn:ss)}|10|s|-}
WB_Command=Q
<!--WB_Begintemplate-->
<html>
<head>
<title>Number of users</title>
</head>
<body>
There is $WBP[RC] users now online!
</body>
</html>
In our sub-report we make a query to the DB «visitor.mdb» on table «visitor» and get all records where the last visit is greater than current time minus ten seconds. This will return all IPs that where recorded for the last ten seconds.
$wbdcalc makes arithmetic operations on dates, so we pass the current date and time and number of intervals to be added to or subtracted from it. We use «s» for interval (as seconds) and defined 10 of them, and finally we defined subtraction using the minus operator.
We will show just the number of visitors that are currently online, but not their IPs, so we need only «$wbp[rc]» which we have described before in this article.

What's next

That is how we record/count/show the number of visitors in the last 10 seconds using the WhizBase. Now, you can call «onvisitors.wbsp» with AJAX every 5-8 seconds from any page on your site and you'll have 100% real data and will not depend on the refresh of the page.
For more information email me at: NurAzije [at] Gmail [dot] com Or visit WhizBase official site at www.whizbase.com

Mar 17, 2011

You just finished building the perfect database for use as a web-app, if only you knew how to write a web-app
What do you do?

Well, writing a web application does not have to be complicated and definitely does not have to take months of programming. With WhizBase it takes just two steps to make your database "airborne".

Step one - create report that will display records from your database
Open your ordinary, plain HTML web page, position your cursor where you want
your records displayed and type the following code (replace values for
WB_BaseName and WB_RcdSet with your own values):

#*
[FormFields]
wb_basename=biblio.mdb
wb_rcdset=(Authors inner join titles on authors.au_id=titles.au_id) inner join
publishers on publishers.pubid=titles.pubid
wb_command=q
*#
#*Now we will add some plain HTML with no WhizBase code*#
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td>Title</td>
<td>Year published</td>
<td>ISBN</td>
<td>Author</td>
<td>Publisher</td>
</tr>
#*And here we will start adding some really simple WhizBase code*#
<!--WB_BeginDetail-->#*Define the beginning of block that will be repeated for every record*#
<tr>

<td>$wbf[Title]</td>
<td>$wbf[Year published]</td>
<td>$wbf[ISBN]</td>
#*Since we have field "Name" in two joined tables we must add table name in $WBF function together with the name of the field*#
<td>$wbf[Authors.name]</td>
<td>$wbf[Publishers.name]</td>
</tr>
<!--WB_EndDetail-->#*Define the end of repeating block *#
</table>
$wbnavigator[]

Save it as books.wbsp and the report is finished.

Step two - create search form

The search form for this example will be ordinary page with HTML form as follows:

<form action="books.wbsp" method="POST">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td>Title</td>
<td><input type="text" name="WBF_Title" value=""></td>
</tr>
<tr>
<td>Year Published</td>
<td><input type="text" name="WBF_Year Published" value=""></td>
</tr>
<tr>
<td>ISBN</td>
<td><input type="text" name="WBF_ISBN" value=""></td>
</tr>
<tr>
<td>Search conditions</td>
<td ><select size='1' name='wb_andor'>
<option value='And'>all conditions</option>
<option value='Or'>any condition</option>
</select></td>
</tr>
</table>
<input type='submit' value='Search'>
<input type='reset' value='Reset'>
</form>

As you can see, there's nothing special with this form except that we named input text fields same as database fields with prefix (WBF_). When user submits the form data to books.wbsp (report we created earlier) WhizBase opens database biblio.mdb, create recordset based upon WB_RcdSet value combined with WHERE clause generated from form fields WBF_Title, WBF_Year published, WBF_ISBN. Upon creating recordset, WhizBase "reads" the report, search for detail section (everything between <!--WB_BeginDetail--> and <!--WB_EndDetail-->), finds the keywords (in this case $wbf[] functions) processes them and send to the browser, and repeats it for 20 records. After that, it process $WBNavigator[] function and generate links to other report pages (paginate the report).
Of course, you can format HTML form and WhizBase report anyway you want using ordinary HTML or CSS.

More info: http://www.whizbase.com/

Mar 7, 2011

You just created your client’s website, now he wants a database.
What do you do?

Well, if you are a hardcore programmer/web developer, there’s a plenty of choices. You can use ASP, PHP, ASP.NET, Ruby on Rails, Python, Perl, Java, etc. However, if you are just a humble web designer primary focused on making beautiful, eye-catching, state-of-the-art graphic layouts, and with development knowledge that’s just about enough to make a decent web page that shows well on all browsers and have a good SEO, then the choice is not that big. Of course, you still can select between few options:

Option A - Tell your client you can’t do it.
Never, never select this option. If you have to do it, don’t do it!

Option B - Hire a programmer/web developer to do it for you
This appears to be a good solution, but there are few serious issues with it – you will take your client’s request and pass it to the developer, then it will turn out that you did not get it right and you need to modify the request, then the developer will ask for more money because of extra work, then it goes in circle until the project is finally finished, and you have spent almost a half of project budget on outsourcing. But that’s not the end – if something goes wrong – who do you think your client is going to call – your outsourcing developer? Don’t think so – he will call you and he will demand immediate answers and reactions. I do not need to explain any further – you got the picture.

Option C - Do it yourself
Always the best solution, that allows you to control all parts of the web site you created, but you are not a developer, so how the heck I can suggest it. Well, this is how:
A) Collect your client’s data in an Excel spreadsheet, or Access database, or simple comma-delimited text file (CSV)
B) Add some simple, yet powerful, magic with WhizBase
C) Upload files to the web server and your database is ready to go.

Creating a small address book application in WhizBase

In this tutorial I will aim to show you how simple is making a small application in WhizBase, how to add, remove and update data in the DB. I will make a small address book application where you can add, browse, update and remove addresses.
I will use a MS Access DB (.mdb file), but you can apply this tutorial for any DB you want, there is no significant difference, and the concept is the same.
We will make one default page which will show us all the records sorted alphabetically, then two files for update, one for delete and two for addition.

Creating the DB

I will not go through the SQL or the Access file creation, I will just describe what we need in the DB. We will need one table named contacts . It will have the following fields:
Id as integer(9) autoincreament primary key
Firstname as char(255)
Lastname as char(255)
Tel as char(255)
InsertionDate as DateTime
Whatever DB type you use, you will need these fields, so create the table and let s begin. I have created my contacts.mdb access DB file.

General file «default.wbsp»

This file will connect to the DB and select all the contacts sorted alphabetically by first name:
[FormFields]
WB_BaseName=contacts.mdb
WB_Command=Q
WB_RcdSet=contacts
WB_maxrec=20
WB_Order=Firstname
<!--WB_BeginTemplate-->
<html>
<head><title>Address Book</title></head>
<body>
<h1>Address Book</h1>
<table width='80%' border='0' cellpadding='5' cellspacing='0'>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>Telephone</th><th>Insert Date</th><th colspan='2'>Action</th></tr>
<!--WB_BeginDetail-->
<tr><td>$wbf[id]</td><td>$wbf[Firstname]</td><td>$wbf[Lastname]</td><td>$wbf[Tel]</td><td>$wbf[InsertionDate]</td><td><a href='edit.wbsp?wbf_id=$wbf[id]'>Edit</a> <a href='delete.wbsp?wbf_id=$wbf[id]'>Delete</td></td></tr>
<!--WB_EndDetail-->
</table>
<a href='add.htm'>Add Contact</a>
</body>
</html>
In our first file we connect to the DB file contacts.mdb, which is located in the same folder as default.wbsp. In WhizBase we give instructions for DB connection at the beginning, so we first make [FormFields] section which is the start of the file header. We specify some parameters, WB_BaseName is the path of the DB, WB_Command will be Q as for Query. WB_maxrec will be 20 records, we want our address book to paginate the records in 20 rows each page. And WB_Order will be Firstname, because we want to sort the report alphabetically by Firstname.
<!--WB_BeginTemplate--> will mark the end of the file header. We now make the design of our address book. <!--WB_BeginDetail--> and <!--WB_EndDetail--> are used to loop through the query results. WhizBase brings you the data automatically, so you do not need to assign any variables or arrays. You need just to put the data placeholders in the code.
$wbf[fieldname] is the placeholder, as the system loops through the query result, for each row we take the value of the field name we want to show, in our case we are showing the id, firstname, lastname, tel and insertiondate.
We made three links, one for edit, another two for delete and add commands. Take a look at the edit and delete links, you will see that we are giving a wbf_id parameter. We will need that later.

Adding records Form «add.wbsp»

To add records we need a plain HTML form, so we will not use any WhizBase in this file, but take a look at the input names.
<html>
<head><title>Add contact</title></head>
<body>
<h1>Adding Contact</h1>
<form action='addc.wbsp' method='post'>
Frstname : <input type='text' name='wbf_firstname' value='' /><br />
Lastname : <input type='text' name='wbf_lastname' value='' /><br />
Telephone : <input type='text' name='wbf_tel' value='' /><br />
<input type='submit' value='Add' />
</form>
</body>
</html>
WhizBase picks up all parameters sent by POST or GET method and put them in one server array. Some parameters have a special meaning for WhizBase, any parameter beginning with wbf_ will be treated as a DB entry, it uses these parameters as values for comparison for Query and Delete commands (WHERE clause in SELECT statement), and as values to be entered into the table for Update and Add commands. This simplifies working with DB's, no need to write complex and long queries, WhizBase makes it automatically.
As we want to add 3 information in the DB - firstname, lastname and telephone, we use three parameters wbf_firstname, wbf_lastname and wbf_tel as inputs. Fields ID and insertiondate will be added automatically.
Save this file as add.htm, and let's move to file addc.wbsp that does all the adding work.

Adding records «addc.wbsp»

Every server side scripting language can receive inputs from visitors and process data from the DB. That makes them better than client side scripting languages. WhizBase as a server side scripting language also receive inputs, and processes them.
In add.htm we collected 3 parameters from visitor and sent them using post method. All the data we want to add to database have wbf_ prefix in the name, so WhizBase will process and filter them automatically. Let us look at this code and see how WhizBase make an insert to the DB:
[FormFields] WB_BaseName=contacts.mdb
WB_RcdSet=contacts
WB_Command=A
WB_FORCED=wbf_InsertionDate=$WBFN{DATE}
<!--WB_Begintemplate-->
<html>
<head>
<title>Adding Contact</title>
</head>
<body>
Contact have been added.<br />
<a href='default.wbsp'>View Addressbook</a> <a href='add.htm'>Add new contact</a>
</body>
</html>
In this file we have connected to the DB by wb_basename, selected the table contacts with wb_rcdset, and gave an addition command by setting wb_command = A where «A» stands for Addition.
WhizBase took the 3 parameters with prefix wbf_ and added them in the table automatically, but we have two more fields in the contacts table - «id» and «InsertionDate». The «id» is set in the table as autonumber so it will be set automatically, but «InsertionDate» we must add somehow, and we do not want visitor to change it. We could add it as a fourth parameter, but that would not be very safe, because visitors might find the ways to change it. So, since we want to add it on server-side safely, we use wb_forced variable, which will force any parameter we want (in this case wbf_InsertionDate) and ignore the value(s) sent by form. $wbfn{date} is used to pass the system date and time.

Deleting records «delete.wbsp»

Deleting records in WhizBase is very easy and secure, you cannot delete all records at once, and you cannot inject the query or hack it. And it is very similar to addition.
[FormFields]
WB_BaseName=contacts.mdb
WB_RcdSet=contacts
WB_Command=D
WB_UID=ID
WB_Redirect=default.wbsp
<!--WB_BeginTemplate-->
Do you remember the parameter we sent in the delete link, «wbf_id» we will need it now. To delete a record by id we need that id so we submit it automatically by wbf_id.
There are three new commands in this code, let go through them. «wb_command=d» is telling the server to execute delete command where «D» stands for delete. «wb_uid» is the command where we specify the name of the unique field (different value for every record) that we will use to prevent deletion of more than one record at the time. In our case it is field «ID», and without this, command delete is not safe enough. Finally «wb_redirect» is a simple redirect command where we tell the server to redirect visitor to the location we want. In our case we want the application to go back to the address book.

Edit a record Form «edit.wbsp»

When we want to edit a record we first need to show the values we have in the DB for specific record, so we can edit it and then save it. So, we have two steps with the DB here, the first is to select the record we want to edit from the DB, after editing it we need to save the changes in the DB.
[FormFields]
WB_BaseName=contacts.mdb
WB_Command=Q
WB_RcdSet=contacts
<!--WB_BeginTemplate-->
<html>
<head><title>Edit contact</title></head>
<body>
<h1>Edit Contact</h1>
<form action='editc.wbsp' method='post'>
Frstname : <input type='text' name='wbf_firstname' value='$wbf[firstname]' /><br />
Lastname : <input type='text' name='wbf_lastname' value='$wbf[lastname]' /><br />
Telephone : <input type='text' name='wbf_tel' value='$wbf[tel]' /><br />
<input type='hidden' name='wbf_id' value='$wbf[id]' />
<input type='submit' value='Save' />
</form>
</body>
</html>
This is very simple code, we talked about all its elements before, just notice that we did not use wb_maxrec because we always edit one record at the time, and we also did not use wb_order for the same reason.
For editing the record we will need to send its «id» so we use <input type='hidden' name='wbf_id' value='$wbf[id]' />.
WhizBase selected our record automatically by the id we provided in the link with wbf_id.

Save edited record «editc.wbsp»

The last file we will do in this article is editc.wbsp where we will save the record. In the previous file we have sent all needed parameters by POST with a prefix «wbf_».
[FormFields]
WB_BaseName=contacts.mdb
WB_RcdSet=contacts
WB_Command=U
WB_UID=ID
WB_Redirect=default.wbsp
<!--WB_Begintemplate-->
In this file we have just one new command «WB_Command=U» which tells the server to make an Update. Note that for Update command we must set the WB_UID.
With this we have finished our simple address book application in WhizBase. As you can see, in WhizBase it is very easy to work with the DB, and you do not need to know any SQL or make any queries.
To download the all files in this example please visit this link: http://www.ziddu.com/downloadlink/7482469/small_address.rar For more information email me at: NurAzije [at] Gmail [dot] com Or visit WhizBase official site at www.whizbase.com