Creating a small address book application in WhizBase

AID: 2012
  • Status: Published

1790 points

  • ByNurAzije
  • TypeTutorial
  • Posted on2009-11-24 at 04:50:41
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
                                    
1:
2:
3:
4:
5:

Select allOpen in new window



Whatever DB type you use, you will need these fields, so create the table and lets 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> 
                                    
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

Select allOpen in new window



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>
                                    
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

Select allOpen in new window



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 lets 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>
                                    
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

Select allOpen in new window



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-->
                                    
1:
2:
3:
4:
5:
6:
7:

Select allOpen in new window



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>
                                    
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

Select allOpen in new window



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-->
                                    
1:
2:
3:
4:
5:
6:
7:

Select allOpen in new window



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

NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.
Asked On
2009-11-24 at 04:50:41ID2012
Tags

address book

,

application

,

WhizBase

,

Access DB

Topic

Scripting Languages

Views
1213

Comments

Add your Comment

Please Sign up or Log in to comment on this article.

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

See Plans and Pricing

30-day free trial. Register in 60 seconds.

Loading Advertisement...

Top Scripting Languages Experts

  1. mplungjan

    145,789

    Master

    0 points yesterday

    Profile
    Rank: Savant
  2. Ray_Paseur

    91,292

    Master

    0 points yesterday

    Profile
    Rank: Savant
  3. billprew

    63,376

    Master

    0 points yesterday

    Profile
    Rank: Genius
  4. RobSampson

    54,636

    Master

    0 points yesterday

    Profile
    Rank: Genius
  5. DaveBaldwin

    51,700

    Master

    2,000 points yesterday

    Profile
    Rank: Genius
  6. sedgwick

    43,950

    1,600 points yesterday

    Profile
    Rank: Genius
  7. leakim971

    43,184

    0 points yesterday

    Profile
    Rank: Genius
  8. dgofman

    36,400

    0 points yesterday

    Profile
    Rank: Genius
  9. COBOLdinosaur

    28,424

    0 points yesterday

    Profile
    Rank: Genius
  10. woolmilkporc

    24,200

    0 points yesterday

    Profile
    Rank: Genius
  11. ozo

    20,600

    0 points yesterday

    Profile
    Rank: Savant
  12. Qlemo

    19,984

    2,000 points yesterday

    Profile
    Rank: Genius
  13. chaituu

    19,100

    0 points yesterday

    Profile
    Rank: Sage
  14. tagit

    19,000

    0 points yesterday

    Profile
    Rank: Genius
  15. farzanj

    18,550

    0 points yesterday

    Profile
    Rank: Genius
  16. nap0leon

    15,094

    0 points yesterday

    Profile
    Rank: Sage
  17. paultomasi

    14,700

    0 points yesterday

    Profile
    Rank: Master
  18. StingRaY

    13,136

    0 points yesterday

    Profile
    Rank: Wizard
  19. jason1178

    13,044

    0 points yesterday

    Profile
    Rank: Genius
  20. HainKurt

    12,350

    0 points yesterday

    Profile
    Rank: Genius
  21. HonorGod

    11,600

    0 points yesterday

    Profile
    Rank: Genius
  22. ahoffmann

    11,136

    0 points yesterday

    Profile
    Rank: Genius
  23. basicinstinct

    10,800

    0 points yesterday

    Profile
    Rank: Genius
  24. leew

    10,030

    0 points yesterday

    Profile
    Rank: Savant
  25. ChrisStanyon

    9,864

    0 points yesterday

    Profile
    Rank: Sage

Hall Of Fame