WhizBase - Easy Scripting Language

WhizBase: Sending an email with embedded images using WhizBa...

2011-05-25T10:22:00.000+02:00

WhizBase: Sending an email with embedded images using WhizBa...: "WhizBase has a built-in functions for sending a rich-text (HTML) emails. In your email you can easily include an absolute URL to any image a..." This is another post of Faik

How to collect data from web visitors and save them in your database

2011-05-25T10:09:00.000+02:00

The creator of WhizBase Faik Djikic have written a very good article today, this is a link to it:

"It is very easy to make data collecting web application using the WhizBase. We will do it using only two WBSP files - one containing the form (form.htm) and the other that saves received data into the database (add.wbsp). read more "

Simple shopping cart with AJAX and WB

2011-03-21T11:09:00.000+01:00

This simple code is a shopping cart ready to implement on your site. AJAX and WhizBase is combined to empower this powerful tool.

For download please go to http://sourceforge.net/projects/shoppingcartwb/

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?

2011-03-17T13:01:00.000+01:00

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".

more

Google Keyword Position by WhizBase

2011-02-23T10:24:00.000+01:00

This simple application will look for your site in Google's search listing for some keyword in first 10 to 1000 positions, if you are found you will be notified with the position. For more information go to www.whizbase.com

For download please go to http://sourceforge.net/projects/googlekeywordwb/

Create HTML bar charts with WhizBase

2011-02-22T09:01:00.001+01:00

In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. The bars in this tutorial will be plotted horizontally. I will use WhizBase and HTML only. No need for any graphics or flash.

Creating the library
I will first begin with making a library of subroutines so I can call any subroutine to do me a job in any time in my code. Subroutines are something similar to custom functions in other programming languages. You can create any number of subroutines as you want, and they will not be processed until you call it in the code.

I will create five subroutines, one will be to initialize the width, the rest are to add a column, to calculate the percentage, to calculate the width values and to draw the graph (bar chart).

First the initialization subroutine:

$wbif[$wbgetv[w]>99|$wbsetv[width|$wbgetv[w]]|$wbsetv[width|100]]
<!--WB_EndSub-->

Before calling this subroutine I will set a variable 'w', if it is less than 99 or it is not sat I will set it to 100. Else I will take my variable value and set it in variable 'width'. This step is nessecery so we have always a default maximum width for the columns. Setting 'w' is not necessary.

Line 1 and line 3 are the start and the end of the subroutine. After beginsub 'init' is the name of the subroutine. Everything in between will not be rendered until you call the subroutine. Subroutines can call also subroutines in it self.

Now I will need a subroutine to add a new column. I want my graph to be dynamic so I can use it to unlimited number of comparetions.

<!--wb_beginsub_addColumn-->
$WBAADD[headers|$wbgetv[hN]|F]
$WBAADD[barVals|$wbgetv[bV]|F]
 $wbsetv[sum|$wbcalc[$wbgetv[sum] + $wbgetv[bV]]]   
 $WBAADD[colorBars|$wbgetv[cB]|F] 
<!--WB_EndSub-->

When adding a new column (bar) I need to specify 3 elements, the name of that bar, it's color and value. So I need to set 3 variables before calling this subroutines, 'hN' for name, 'bV' for value and 'cB' for color.

In the subroutine I am adding the bar name to an array named as 'headers ', the values to an array named as 'barVals' and the color to 'colorBars' array. I also need to sum all values because I will needed it later. 

In WhizBase if you set a value to undefined variable or array it will define it automatically, so you do not need to worry about memory allocations and errors for undefined variables.

Every bar has a value which is a part of the sum of all values. To unify the values I need to get the percentage of these values to the total sum of all. 'calcPercents' will do the calculations I need.

<!--wb_beginsub_calcPercents-->
$wbsetv[numBars|$WBALEN[barVals]]
$wbsetv[i|0]
$wbwhile[$wbgetv[i]<$wbgetv[numBars]|
$WBAADD[barPerc|$wbformat$wbcalc[($wbgetv[barVals($wbgetv[i])]/$wbgetv[sum])*100]|#]|F]
$wbsetv[i|$wbcalc[$wbgetv[i]+1]]
]
<!--WB_EndSub-->

Now if you do not like mathematics you have a problem. I will need number of the bars to calculate all the percentages in a loop. The calculated value is added to 'barPerc' array. The formula in logic terms are:

interger of( (Bar value devided by total) multiply with 100)
I will not explain more how I got the percentage value it is pure mathematics.
'calcWidthVals' subroutine is used to calculate the width of every bar in HTML so I can draw the bars.


<!--wb_beginsub_calcWidthVals-->
$wbsetv[numBars|$WBALEN[barVals]]
$wbsetv[i|0]
$wbwhile[$wbgetv[i]<$wbgetv[numBars]|
$WBAADD[widthVals|$wbcalc[abs(($wbgetv[barPerc($wbgetv[i])]/$wbgetv[width])*100)]|F]
$wbsetv[i|$wbcalc[$wbgetv[i]+1]]
]
<!--WB_EndSub-->


Again by looping through all bar percentages I will get the width by this formula:


Absolute of((bar percentage devided by maximum width) multiply with 100)
I am using absolute values here because in HTML I can not use negative values.
Finally I have just one subroutine to create, it is 'drawGraph', this one will draw the bars in HTML.


<!--wb_beginsub_drawGraph-->
 $wbsub[calcPercents]
 $wbsub[calcWidthVals]
 $wbsetv[numBars|$WBALEN[barVals]]
 <table cellpadding="0" cellspacing="0" border="0">
 $wbsetv[i|0]
 $wbwhile[$wbgetv[i]<$wbgetv[numBars]|
  <tr>
  <td class="$wbgetv[cellClassName]">
  $wbgetv[headers($wbgetv[i])]</td>
  <td align="right" width="$wbcalc[$wbgetv[width]/2]">
  <table cellpadding="0" cellspacing="0" width="$wbif[$wbgetv[barVals($wbgetv[i])]<0|$wbgetv[widthVals($wbgetv[i])]|0]%" border="0">
  <tr height="20"><td width="100%" bgcolor="$wbgetv[colorBars($wbgetv[i])]"></td></tr>
  </table>
  </td>
  <td align="left" width="$wbcalc[$wbgetv[width]/2]">
  <table cellpadding="0" cellspacing="0" width="$wbif[$wbgetv[barVals($wbgetv[i])]>0|$wbgetv[widthVals($wbgetv[i])]|0]%" border="0">
  <tr height="20"><td width="100%" bgcolor="$wbgetv[colorBars($wbgetv[i])]"></td></tr>
  </table>
  </td>
  </tr>
  $wbsetv[i|$wbcalc[$wbgetv[i]+1]]
 ]</table>
<!--WB_EndSub-->

This subroutine does most of the job for us, in it I am calling the other subroutines. The only variable I can use if I want is 'cellClassName' which will hold the cell class name for CSS. You can skip this variable, it is just for formatting.

In this subroutine I am calculating the percentages by 'calcPercents', calculating bar widths by 'calcWidthVals' and counting how many bars do I have. Now I will create a table and loop the rows to create a row for every bar. 

As bar graphs can have negative values I will use a two side bars view, the left ones are less than zero and the right ones are above zero. I am making a table with two cells, every cell will have an IF statement to check if the value is less than zero, this will show every row in its proper place.

In this table I am coloring the cell background and manipilating the cell width to show a presentation of the bar.

That will be all for the library. Just save this code as 'graph.ic'.


#* Initialization width *#
<!--wb_beginsub_init-->
$wbif[$wbgetv[w]>99|$wbsetv[width|$wbgetv[w]]|$wbsetv[width|100]]
<!--WB_EndSub-->

#*
  This subroutine adds a new values to the graphic 
  "hN" This is the name of the column (string type) 
  "bV" This is a number that specifies the value of the bar 
  "cB" This is an string that specifies the color of the bar 
*#
<!--wb_beginsub_addColumn-->
 $WBAADD[headers|$wbgetv[hN]|F]
 $WBAADD[barVals|$wbgetv[bV]|F]
    $wbsetv[sum|$wbcalc[$wbgetv[sum] + $wbgetv[bV]]]   
    $WBAADD[colorBars|$wbgetv[cB]|F] 
<!--WB_EndSub-->

#* This subroutine calculates the percents of the total *#
<!--wb_beginsub_calcPercents-->
 $wbsetv[numBars|$WBALEN[barVals]]
 $wbsetv[i|0]
 $wbwhile[$wbgetv[i]<$wbgetv[numBars]|
  $WBAADD[barPerc|$wbformat[$wbcalc[($wbgetv[barVals($wbgetv[i])]/$wbgetv[sum])*100]|#]|F]
  $wbsetv[i|$wbcalc[$wbgetv[i]+1]]
 ]
<!--WB_EndSub-->

#* This subroutine calculates the width values *#
<!--wb_beginsub_calcWidthVals-->
 $wbsetv[numBars|$WBALEN[barVals]]
 $wbsetv[i|0]
 $wbwhile[$wbgetv[i]<$wbgetv[numBars]|
  $WBAADD[widthVals|$wbcalc[abs(($wbgetv[barPerc($wbgetv[i])]/$wbgetv[width])*100)]|F]
  $wbsetv[i|$wbcalc[$wbgetv[i]+1]]
 ]
<!--WB_EndSub-->

#* 
 This subroutine draws the graph 
 "cellClassName" a css class name for easier formatting
*#
<!--wb_beginsub_drawGraph-->
 $wbsub[calcPercents]
 $wbsub[calcWidthVals]
 $wbsetv[numBars|$WBALEN[barVals]]
 <table cellpadding="0" cellspacing="0" border="0">
 $wbsetv[i|0]
 $wbwhile[$wbgetv[i]<$wbgetv[numBars]|
  <tr>
  <td class="$wbgetv[cellClassName]">
  $wbgetv[headers($wbgetv[i])]</td>
  <td align="right" width="$wbcalc[$wbgetv[width]/2]">
  <table cellpadding="0" cellspacing="0" width="$wbif[$wbgetv[barVals($wbgetv[i])]<0|$wbgetv[widthVals($wbgetv[i])]|0]%" border="0">
  <tr height="20"><td width="100%" bgcolor="$wbgetv[colorBars($wbgetv[i])]"></td></tr>
  </table>
  </td>
  <td align="left" width="$wbcalc[$wbgetv[width]/2]">
  <table cellpadding="0" cellspacing="0" width="$wbif[$wbgetv[barVals($wbgetv[i])]>0|$wbgetv[widthVals($wbgetv[i])]|0]%" border="0">
  <tr height="20"><td width="100%" bgcolor="$wbgetv[colorBars($wbgetv[i])]"></td></tr>
  </table>
  </td>
  </tr>
  $wbsetv[i|$wbcalc[$wbgetv[i]+1]]
 ]</table>
<!--WB_EndSub-->


Creating the main file

I will create my main file, I am naming it as 'default.wbsp', in it I do not have a lot to do, in general these are steps I need:
1.      Include the bar chart library 
2.      Initialize the maximum width of a bar 
3.      Add all the bars ( name, color, value) 
4.      Finally draw the graph


This is the code for all above:


[FormFields]
wb_command=r
WB_showlogo=F
<!--WB_BeginTemplate-->
$wbrinc[graph.ic]
$wbsetv[w|100]$wbsub[init]
$wbsetv[hN|Column 1]$wbsetv[bV|25,2]$wbsetv[cB|#CCCCCC]$wbsub[addColumn]
$wbsetv[hN|Column 2]$wbsetv[bV|-25,2]$wbsetv[cB|#AAAAAA]$wbsub[addColumn]
$wbsetv[hN|Column 3]$wbsetv[bV|100,32]$wbsetv[cB|#999999]$wbsub[addColumn]
$wbsetv[hN|Column 4]$wbsetv[bV|88,236]$wbsetv[cB|#777777]$wbsub[addColumn]
$wbsetv[hN|Column 5]$wbsetv[bV|11,236]$wbsetv[cB|#555555]$wbsub[addColumn]

<html> 
<head> 
<title>Test graphs</title> 
<style> 
<!-- 
.cell_header { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    font-style: normal; 
    line-height: normal; 
    font-weight: bold; 
    font-variant: normal; 
    text-transform: uppercase; 
    color: #E0E0E0; 
    text-decoration: none; 
    background-color: #4E4E4E; 
}
--> 
</style> 
</head>
<body>$wbsetv[cellClassName|icon_links_off]$wbsub[drawGraph]</body></html>

What is WhizBase?

2011-02-21T14:45:00.000+01:00

WhizBase is a fast and simple scripting langauge to enhance your HTML webpage with dynamic content. WhizBase can do anything a website need, showing database content, uplaoding files, password protected logins, adding, deleting and updating database records. It has also all complex commands like conditional statements, loops, math functions and more than 200 other functions.

WhizBase is not a programming language, it is simpler than even JavaScript, no programming skills are required to use it. WhizBase can be used with any WYSIWYG editor without the need to look into your HTML code. All you need to know is how to create a webpage and a MS Access database or even MS Excel sheet. Adding WhizBase commands in your WYSIWYG editor as any other text will be enough to show dynamic content on your webpage.

If you have a database and you want it to be acceced by others through an office network, WhizBase can transform it to an intranet solution (here you can read more about benefits of turning your databases to intranet applications), PowerPack Wizards is a free tool distributed with WhizBase to do the job. No need for HTML or Database knowladge, transfer any database to an intranet application in seconds.

WhizBase also can be used to create simple and complex CMS powered web sites, simple and complex applications, Adobe flash and microsoft silverlight codes, dynamic generated javascript scripts and any text like script or code.

Your webpages created in WhizBase are Operating System indepented, you do not need to install it on every computer you use to view them. It gives pure HTML code as a result. All you need is to install WhizBase on any web server in your office or in the internet, and you can access your WhizBase application by internet or by LAN. WhizBase also can be used as a desktop or a network application.

Your visitors do not need to download and install anything on their computers to be able to see WhizBase generated content, it is intrepreted scripting language, all the proccesing is done on the server-side.

HTML Horizontal Bar Chart Generator

2011-02-15T10:25:00.001+01:00

Displaying tabular information in a graphical form is helpful for a visual representation of the data. HTML Horizontal Bar Chart generated using HTML Tables and WhizBase Server Pages.
To download please visit: http://htmlhorizontalb.sourceforge.net/

Simple Address Book

2011-02-15T09:41:00.000+01:00

This is a simple fast personal address book developed by WhizBase Server Pages.
To download this OpenSource application http://wbaddress.sourceforge.net/

Access Database Web Administration Tool

2011-02-15T09:36:00.001+01:00

If you need to publish your Access DB online, you do not need to make an interface anymore, just take this application, edit it a little bit and upload your Access DB. You will only need a WhizBase Server Pages Engine http://www.whizbase.com

Download this opensource application at https://sourceforge.net/projects/accessdatabasea/

Generate dynamic RTF (Rich Text Format) documents easily

2011-02-04T14:26:00.001+01:00

In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access.

In this tutorial I will show you how to make RTFs with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html

Create your document
First you need to make an RTF template, it is how the document will look like. I have created a file which lists the first name, last name, telephone, email and address in a table.

As you can see the dynamic part will contain WhizBase code. I have putted $wbf[fname], $wbf[lname], $wbf[email], $wbf[tel] and $wbf[address] in the cells I want to show dynamic data.

These placeholders will be replaced dynamically with data.

Now just save the document as RTF file. You go to "Save As" and save the file as "form.rtf".

Create you database file

The database can be in any format, I will use Microsoft Access because it is the easiest for me. You can use MySQL, Oracle, MS SQL or even Microsoft Excel.

I will create a database file with one table "contacts", it will contain these 6 fields:

ID – autonumaber and primary key
Fname – text
Lname – text
Email – text
Tel – text
Address – memo

Now save this file as "form.mdb"
I have inserted some records in this table.

Create WhizBase file
Finally we need a file which will be our webpage which takes the ID and gives us the RTF document. So we need to implement an input form for ID, and when submit is clicked then start downloading the new generated file.

First let's rename the file "form.rtf" to "form.ic", "ic" is the extension for included files in WhizBase by the function $wbrinc. 

Now create an HTML file with this code:

<html><body><form action='form.wbsp' method='post'>Insert ID: <input type='text' name='wbf_id' /><input type='submit' value='Export file' /></form></body></html>


This is a very basic HTML form file, the only thing you must not forget is the name of the text field, it will be wbf_id, which I have already explained in previous tutorials. Save this file as "default.wbsp".

Now we create another WhizBase file where we query the DB and include the RTF template file.

[FormFields]
WB_BaseName=form.mdb
WB_Command=Q
WB_RcdSet=contacts
WB_ShowLogo=F
wb_contenttype=application/msword
<!--WB_BeginTemplate-->
$wbrinc[form.ic]
As you can see nothing new, we are simply querying the DB and including the template which have the placeholders which will be replaced with data. The only important and new thing is the line:


wb_contenttype=application/msword

Here we say to the browser that this documents type is not HTML so do not render it, we say it is MS WORD  application type, so any popular browser will just download it to your computer.

And you have now a ready script to make RTF reports easily.

For more information please visit my member profile at http://www.experts-exchange.com/M_5123186.html
Or visit the WhizBase official site at www.whizbase.com

NurAzije is a PHP and WhizBase programmer, who at the time of article publication has been working in partnership with WhizBase company on several projects and very recently as an employee.

How to make a database-driven frontpage slideshow

2011-01-24T10:55:00.000+01:00

It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website, magazine or online news has one on their site, and even some e-commerce sites have one.

Today you can use sliders with Joomla, WordPress or Drupal. But the problem I had when I used one of the ready-made components you can download is that it is not customizable. Yes, you can change the look and feel, but you can not change the code. It is very complicated even for experienced developers.

Finally I decided to make one my own, which I believe is easier to manage and doesn't have 1000 options I do not need. The best part, though, is that I can upgrade it as I want when I need, just by adding a little more code.

Back-end section
My component is made of two parts. The first one is the back-end section which is the side the visitors do not see -- the administration part of the slider. We will need a simple database table which will contain the data. I will use an Access DB. I created a table with these fields:

id Autonumber - this is just for indexing and it will be the primary-key

slideimg Text - this will contain the path to the picture

slidetitle Text - this will contain the title of the slide

slideurl Text - this will contain the URL destination when you click the slide

I saved this table as "slider" and the file as "cms.mdb".

Then I created the administration interface. I used WhizBase for querying/editing the DB. Everything between #* and *# are comments so you can follow the code I used.

[FormFields]

WB_BaseName=cms.mdb #* the path to the DB file *#

WB_RcdSet=slider #* the table name *#

WB_MAXREC=20 #* show 20 records in every page in the navigation system *#

WB_ORDER=id DESC #* order records by ID in Desc *#

WB_Command=Q #* Query the table *#

#* Begin the visual part *#

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Slider admin</title>

</head>

<body>

<h1>Add slides<h1>

#* for adding new slides we will submit our data to addslider.wbsp which we will create later. Do not forget to put enctype="multipart/form-data" because we are uploading files to the server. *#

Slide title: <input type="text" name="wbf_slidetitle" /><br />

Slide URL: <input type="text" name="wbf_slideurl" /><br />

Slide IMG: <input type="file" name="wbf_slideimg" /><br />

</form>

#* You will notice that I am using wbf_ in the input names. It is a prefix I add to make WhizBase process the data I am sending and add it in the DB automatically. *#

<hr />

#* Here we list the result of the query we done in the start of this file *#

<h1>All slides<h1>

<tr><td align="left" valign="top"><b>Title</b></td><td align="left" valign="top"><b>Thumb</b></td><td align="left" valign="top"><b>URL</b></td><td align="left" valign="top"><b>Delete</b></td></tr>

#* this will go through every record and added in our table *#

<tr>

<td align="left" valign="top">$wbf[slidetitle]</td> #* $wbf is a function in WhizBase to show a field for a record *#

<td align="left" valign="top">$wbf[slideurl]</td>

<td align="left" valign="top"><a href="delete.wbsp?wbf_id=$wbf[id]">$wbf[id]</a></td> #* to pass variables by GET method I am using the wbf_ prefix *#

</tr>

#* this will end the records loop *#

</table>

<center>$wbnavigator[]</center> #* I am adding the navigation links, so we can navigate through big lists *#

</body>

</html>

This page will let me add or delete slides; save it as "slider.wbsp". Now let us see "addslider.wbsp":

[FormFields]

WB_BaseName=cms.mdb

WB_AllowMultipart=T #* Allow multipart data is set to True. Without this we can not upload files, because upload is False by default for security reasons *#

WB_Command=A #* Add our parameters in the DB - we get them from the form with wbf_ prefixes *#

WB_Redirect=slider.wbsp #* redirect us to the admin page again *#

WB_RcdSet=slider

[Upload] #* This section is for upload information *#

WB_Disallow=![jpg,gif,png,bmp] #* Disallow everything but pictures *#

WB_UploadDir=/images/ #* Upload pictures to images folder *#

WB_BaseURL=/images/ #* Base path will be images folder *#

WB_Overwrite=F #* Do not overwrite images, new images with same name will be given a new unique name automatically *#

WB_MaxFSize=500000 #* Maximum size in bytes *#

WB_UploadLog=upload.log #* write a log file upload.log *#

This is a pure WhizBase file which will upload the picture and add the data to the DB. It will check the size of the file, the file type, set the upload folder, filter all data from SQL injections and keep the files without being overwritten.

Now let us make the "delete.wbsp" file which deletes our slides.

[FormFields]

WB_BaseName=cms.mdb

WB_RcdSet=slider

WB_Command=D #* D is for delete, we have got the id in the link with prefix wbf_ *#

WB_Redirect=slider.wbsp

Now we have the administration ready. You can make a password protected folder and put the administration files in it, but do not forget to change the paths.

Front-end section
The second section is the front-end section which is the side the visitors see; it is the visual part of the slider. We will need some JavaScript and HTML code, with WhizBase for querying the DB.

[FormFields]

WB_BaseName=cms.mdb #* the path to the DB file *#

WB_RcdSet=slider #* the table name *#

WB_MAXREC=$all$ #* show all records in sliders we do not navigate *#

WB_ORDER=id DESC #* order records by ID in Desc *#

WB_Command=Q #* Query the table *#

#* Begin the visual part *#

<html>

<head>

<title>Frontpage slideshow</title>

var slides= new Array($wbp[RC]); #* $wbp[RC] will give the number of records count. We need the number of slides for JS array, we will fill the array with data in the looping section *#

</script>

</head>

<body onload="initslider();"> #* to start the slider we make a JavaScript call on-load of body *#

<div id="slider"></div> #* this will contain the slideshow *#

#* I will list all the slides here, but I will not display them. This is good for SEO *#

<div id="slide$wbf[id]" style="display:nome;"> #* Use display:none; to hide the slide *#

<a href="$wbf[slideurl]"><img src="$wbf[slideimg]" alt="$wbf[slidetitle]" border="0" /></a> #* we make the content of every slide *#

</div>

#* We need initslider(); function in JavaScript *#

var start=0;

function initslider(){

setTimeout("initslider()",500);

document.getElementById('slider').innerHTML = document.getElementById(slides[start]).innerHTML;

if(start == $wbp[RC]-1)

start = 0;

else

start++;

}

#* This function will take the content of the slide from a hidden div and set it in the slideshow div. It will launch itself every 500 miliseconds again and set the next slide in the slideshow div. We check also the slide number, and if it is equal to the number of all slides minus one, it will reset the slide number. *#

</script>

</body>

</html>

With this file, named "default.wbsp", we have a custom made slideshow manager. You can now add more elements in the slide show, like thumbnail picture, description, slide types and timers.

For more information email me at: NurAzije [at] Gmail [dot] com.

NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.

Making a simple AJAX shopping cart

2011-01-24T10:23:00.005+01:00

Making a simple AJAX shopping cart
Couple years ago I made my first shopping cart, I used iframe and JavaScript, it was very good at that time, there were no sessions or AJAX, I used cookies on clients machine.

Today we have more advanced technology, faster, better and more fancy, we can make shopping carts on any site with no need to talk with cookies, let sessions do the storing and AJAX make the communication.

In this tutorial I will show you how to make a Session/AJAX based shopping cart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.whizbase.com/eng/?p=8

The products page
Every shopping site have a product page, and that page is where everything starts when you make a shopping. To add products to the shopping cart we need products, every product need an Unique ID. On this page we will also show the cart, we make sure when the visitor comes for the first time it will be empty. Every visit will be a unique shopping and that means a unique session. Sessions are temporary data files created on the server having some data about or from the visitor coming on the site. Every visitor have its own unique session. WhizBase manages sessions automatically, so you just work with session variables as you work with any other, no need to work with session files on the server.

In this file which I will name as «default.wbsp» I will turn sessions to «True» because they are «False» by default. I will also need the AJAX script, the products listings and the shopping cart div.

Look at the code comments for more details:

[FormFields]
WB_UseSessions=T
#* I am setting WB_UseSessions to True so I can use sessions with WhizBase *#

#* I am checking if product1,product2 and product3 variables are not set and set a value of zero, that is how I know if the user is comming for the first time or not.*#
$wbif["$wbgets[product1]"=""|$wbsets[product1|0|f]|]$wbif["$wbgets[product2]"=""|$wbsets[product2|0|f]|]$wbif["$wbgets[product3]"=""|$wbsets[product3|0|f]|]
#* I am using $wbgets[varname] to get a session variable, and $wbsets[varname€|value] to set a session variable *#
<html>
<head>
<script type="text/javascript">
#* I am making a showCart JavaScript/AJAx function, it creates an AJAX object and calls «showCart.wbsp» file to show the current status of the cart, the retrieved data is putted by innerHTML into «cartview» div *#
function showCart()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("cartview").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","showCart.wbsp?and="+Math.floor(Math.random()*99999999999),true);
xmlhttp.send();
}

#* addCart function in JavaScript will pass an ID and send it to addCart.wbsp which adds a new product in the cart. On responce we will refresh the cart view by calling showCart function*#

function addCart(id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
showCart();
}
}
xmlhttp.open("GET","addCart.wbsp?id="+id+"&rand="+Math.floor(Math.random()*99999999999),true);
xmlhttp.send();
}

#* remove function in JavaScript will pass an ID and send it to removeCart.wbsp which removes one product passed from the cart. On responce we will refresh the cart view by calling showCart function *#

function remove(id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
showCart();
}
}

xmlhttp.open("GET","removeCart.wbsp?id="+id+"&rand="+Math.floor(Math.random()*99999999999),true);
xmlhttp.send();
}

</script>
</head>
<body onload="showCart();">

#* OnLoad we will refresh the cart by showCart() function, this will update the cart div every time we refresh the page *#

#* We list the products and every product have its own ID *#
<a href="javascript:void(0);" onclick="addCart(1);">Product 1</a><br />
<a href="javascript:void(0);" onclick="addCart(2);">Product 2</a><br />
<a href="javascript:void(0);" onclick="addCart(3);">Product 3</a><br /><br /><br />
<b>Cart content</b><br />
#* cartview is a div for holding cart data.*#
<div id="cartview">Cart is empty!</div>
</body>
</html>

Save this code as default.wbsp.

Adding products in the cart
When we make shopping online, sometimes we want to buy more than one instance from a product, for example I want two T-Shirts. As a user I do not want to see a list in my cart like this: T-shirt,T-shirt,Shoes,chocolate. This will confuse me, so I am adding a counter for every product, so it will be 2x T-shirt, 1x Shoes, 1x chocolate. Keep that in mind. In the next file I am working on I will add data to the session. I will receve data by AJAX calls so I do not need any interface. I will need to check which product I will add and that is made by the sent ID.

If an ID is sent I am adding one instance more, so if I have 4 items from product1 it will become 5 items.

See the comments in the code for more details:

[FormFields]
WB_UseSessions=T
#* I am turning the sessions to True *#

$wbif["$wbv[id]"="1"|$WBSETS[product1|$WBCalc[$WBGETS[product1]+1]|f]|]
$wbif["$wbv[id]"="2"|$WBSETS[product2|$WBCalc[$WBGETS[product2]+1]|f]|]
$wbif["$wbv[id]"="3"|$WBSETS[product3|$WBCalc[$WBGETS[product3]+1]|f]|]

#* I have three cases in my example so I am hard-coding them. I check the ID variable sent by GET or POST by $WBV, if it is equal an ID I have I will set a value of the variable+1 using $WBCalc, $WBSets and $WBGets, if not do nothing *#

In more complex examples you can use loops and not hard-coding the code, this is only for tutorial purposes.

Save this code as addCart.wbsp.

Removing products from the cart
If I want to remove an item from the cart I want to remove one instance only not all the items. So as like adding here I am removing.

Save this code as removeCart.wbsp.

Show me my Cart
Finally we will make the showCart.wbsp file, it will just contain some HTML and WhizBase code for showing the cart content.

[FormFields]
WB_UseSessions=T
#* I am turning the sessions to True *#

There is:
<br />$wbgets[product1] X Product1 $wbif[$wbgets[product1]>0|(<a href="javascript:void(0);" onclick="remove(1);">remove</a>)|] #* we show the session variable containning number of items of the products and only if there is items then show the remove link also *#

<br />$wbgets[product2] X Product2 $wbif[$wbgets[product2]>0|(<a href="javascript:void(0);" onclick="remove(2);">remove</a>)|]
<br />$wbgets[product3] X Product3 $wbif[$wbgets[product3]>0|(<a href="javascript:void(0);" onclick="remove(3);">remove</a>)|]<br />

Save this code as showCart.wbsp.

What's next

This is a very simple tutorial to show you how you can make a shopping cart using AJAX/WhizBase technologies. If you want more complex shopping carts you need to use loops and databases which can be also done with WhizBase and AJAX, if you are not familiar with WhizBase please read my previous articles.

 For more information email me at: NurAzije [at] Gmail [dot] com Or visit the 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.

Create a log-in system for registered users with WhizBase

2010-05-11T14:15:00.002+02:00

This tutorial will discuss the log-in process using WhizBase. In this article I assume you already know HTML. 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 about WhizBase). In the last article "Create an AJAX supported registration form with WhizBase" I have explained how we can make a registration process, now when users register to your site, you need to make them log-in to secured pages. The Log-in Page I will create a log-in page which is a simple HTML code and save it as "login.ic", I will explain later why I did not save it as HTML.

<html>
<head></head>
<body>
<form action="login.wbsp" method="post">
Please enter your log-in information:<br />
Username <input type="text" name="username" /><br />
Password <input type="password" name="password" /><br />
<input type="submit" value="Login" />
</form>
</body>
</html>

I will not explain this code, it is a simple HTML code with to fields and a submit button. The secured page I will create a page where its data must not be seen by non-registered users, I will save it as "secured.ic", again I am saving it with IC extension, I will explain that later.

<html>
<head></head>
<body>
Hello $wbgets[username],<br />
you are logged in!
</body>
</html>

In this code we have just one new function, it is the $wbgets[] which is a function to get the session variable "username" where the username is stored. What to show? This is my main page where I will check if the visitor is logged in or not, if yes I will show him the secured page, if not I will show the log-in form. Here we will discuss sessions in WhizBase. Please use WhizBase 6, because sessions are not used in earlier versions.

[FormFields]
WB_UseSessions=T
#* Use sessions in this page *#

$wbif["$wbgets[logged]"="1"| #* check if we have a session variable logged and have a value 1 *#
$wbrinc[secured.ic] #* if yes, show the secured page, the user is logged in *#
|
$wbrinc[login.ic] #* if not, show the log-in form, the user is not logged in *#
]

As you can see from comments in the code I have turned the sessions on by putting WB_UseSessions=T in the Form-Fields section, so WhizBase will start processing session data. Sessions are not included in WhizBase by default, so you need to turn it on in every page you use them in. Next, I am testing if there is a session variable "logged" with value "1" by an if statement, this variable will be set in the file "login.wbsp", I will explain that in the next section. Now just consider that we have a session variable "logged" with value "1" if we are logged in and nothing if we are not. Now why I have saved two files with "IC" extension, it is because in WhizBase I can tell the server not to interpret files with "IC" extension if it is called directly, these files can only be called with-in a WhizBase file by $wbrinc or $wbinc. This process is called including files. In this case I am using $wbrinc because I do not want to render the file until it is needed. In my case I have two files "secure.ic and login.ic", so I will render one of them only. $wbinc would include and render both files and that takes more resources. You can check the differences between these two functions in the help file of WhizBase. If yes, which is if the session variable "logged" have a value "1" the user is logged in, so I will show him the content of "secured.ic", if not I will show him the content of "login.ic". Finally save this file as "default.wbsp", this is just a one file example, if you have more than one page you rather use a DB than "IC" files. Log-in process In this file I will check if the username and the password the visitor provided do match with the data in the DB. I will use the DB I have created in my last article "Create an AJAX supported registration form with WhizBase".

[FormFields]
WB_UseSessions=T
#* We need sessions *#
WB_command=Q
#* Query the DB *#
WB_BaseName=reg.mdb
#* connect to red.mdb DB file*#
WB_RcdSet=profile
#* use profile table for our query*#
WB_Query=username='$wbv{username}' and password='$wbv{password}'
#* get all records which have this username and this password in the same time *#
WB_MaxRec=1
#* one record is enough *#
[MsgAndLbl]
WBM_NoMatch=$empty$

<html>
<head></head>
<body>
$wbif[$wbp[RC]=1| #* if we have match we will have one record *#
$wbsets[logged|1|f] #* set logged as 1 *#
$wbsets[username|$wbv[username]|f] #* set username with the username provided *#
You have been successfully logged in, please click <a href="default.wbsp">here</a> to return to your page.
|
Your username and password does not match, please go back and try again!
]
</body></html>

In this file I will use sessions, I need to set the session variable "logged" as "1" if the user provides true data. Here I am querying the DB looking for a match, I need just one record with the provided username and password. One record is enough because there is no two users with the same username. I am using $wbp[RC] to return number of records returned by the query, I can get one record or no records, If there is one record then it is a match and the session variable "logged" is set to "1", I will also set the session variable "username" with the username provided. In case I do not have a match, simply give an error message. For more information email me at: NurAzije [at] Gmail [dot] com Or visit the 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.

Create an AJAX supported registration form with WhizBase

2010-03-17T09:33:00.002+01:00

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|}
$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|}

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.

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
$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 "" 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}
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 "" 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
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

Using WhizBase to send ICQ messages

2010-03-17T09:14:00.002+01:00

In this tutorial I will focus on how to use WhizBase as a tool for sending ICQ messages to ICQ. Here I will use a new technology in WhizBase, published in WhizBase 5.1 version.

In this tutorial I will use 3 files, pager.wbsp for the processing, email.wbsp for sending the messages and eng.ic as a language file.

Multilingual abilities

WhizBase has built-in multilingual support, but I will not use it in this tutorial because it is not supported in 5.1 version. So I will use the older method of including a language file.

In this language file we will define variables with the language content:

$wbsetv[l_send|Send the message to this ICQ number:]
$wbsetv[l_emne|Subject:]
$wbsetv[l_besked|Message:]
$wbsetv[l_ditnavn|Your name:]
$wbsetv[l_dinepost|Your email address:]
$wbsetv[l_sendbeskeden|Send the message]
$wbsetv[l_icqikkeudfyldt|You forgot to fill in the ICQ number that the message should be sent to.]
$wbsetv[l_ingenbesked|You forgot to write a message.]
$wbsetv[l_tilbage|Back]
$wbsetv[l_over450tegn|The message is too long. Maximum is 450 characters.]
$wbsetv[l_epostikkeudfyldt|You forgot to fill in your email address.]
$wbsetv[l_beskedenafsendt|The message has been sent.]

I've used $wbsetv to set language variables, now I will save this code as "lang.ic" and put it in lang folder I have created on webs root. I have that practice to separate language files from others.

Subroutine code

WhizBase supports subroutines (from version 5.1 on); it is something like a custom function available in some languages like VB. This is a powerful new technology in WhizBase which eases rapid application developments.

The code of a subroutine can be added in any place in WhizBase code, but it is preferably to put it after  so we can find it easily.

The syntax used for adding subroutines is:

subroutine code

We will need to provide the subroutine name and the subroutine code, which is any set of WhizBase commands and code.

I will make a subroutine to show a back input with error message if the user makes any mistake in the form.

#* we define the pager Subroutine *#

<html><head><title>Pager</title>
<style type=text/css>
body {background:white; font-family:helvetica; font-size:10pt; color:#000000} </style>
</head><body>
<center>$wbgetv[msg]<br />
<input type="button" onClick="history.go(-1)" value="<<< $wbgetv[l_tilbage]">
</center>
</body></html>

Call the language file

I will call the language file by wbrinc after defining which language I am using.

#* Please set here your language file *#
$wbsetv[lang|eng]
#**************************************#

#* We include the language file *#
$wbrinc[lang/$wbgetv[lang].ic]

As you see I am using relative paths but I can also use absolute paths, WhizBase supports both.

The Form

I will make a simple HTML form which submits the page to itself, I will put it in a variable so I can use it later where I need it.

$wbsetv[formular|<form action="" method="post"><table bgcolor="#cccccc" border="#000000" cellspacing="0" cellpadding="5">
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_send]</td>
<td><input type="text" name="icqnummer" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_emne]</td>
<td><input type="text" name="emne" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_besked]</td>
<td><textarea name="besked" cols="25" rows="8" wrap"=virtual"></textarea></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_ditnavn]</td>
<td><input type="text" name="navn" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_dinepost]</td>
<td><input type="text" name="epost" size="25" /></td>
<tr><td> </td>
<td><font size="2" face="arial" color="#000000"><input type="submit" name="submit" value="$wbgetv[l_sendbeskeden]" />
</table></form>]

As I previously indicated, I am using language file's variables instead of text. This is to support multilingualism.

If this do that, if not do not, then do that or this

I made a simple validation IF conditions block, I am using this like that just to show how we can use complex IF conditions in WhizBase, but in real life I use JS for this type of validation - then there's no need to refresh the page to validate if an input is empty.

The first IF is to check if I have submitted the form or I am coming to the site first time. If the submit is submitted I will go ahead with validation, if not I will show the form variable.

Then I have a number of conditions, if everything is OK I will go on and send the message to ICQ, if not I will define the error message from the language file and call the subroutine.

If everything is OK, I call a file I will create later by $wbgeturl, I named it email.wbsp, and will pass to it variables to, from, and body. All escaped by $wbesc function.

In case one of the conditions do not pass I call the subroutine pager by $wbsub[] to show the error message.

In case I did not submit a form yet it will skip all the conditions and show me the form we specified above before.

Now we will put all this together in one file:

[FormFields]
WB_Command=R
wb_showlogo=F

#* Please set here your language file *#
$wbsetv[lang|eng]
#**************************************#

#* We include the language file *#
$wbrinc[lang/$wbgetv[lang].ic]

#* we define the pager Subroutine *#

<html><head><title>Pager</title>
<style type=text/css>
body {background:white; font-family:helvetica; font-size:10pt; color:#000000}
</style>
</head><body>
<center>$wbgetv[msg]<br />
<input type="button" onClick="history.go(-1)" value="<<< $wbgetv[l_tilbage]">
</center>
</body></html>


$wbsetv[formular|<form action="" method="post"><TABLE bgcolor="#cccccc" border="#000000" cellspacing="0" cellpadding="5">
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_send]</td>
<td><input type="text" name="icqnummer" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_emne]</td>
<td><input type="text" name="emne" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_besked]</td>
<td><textarea name="besked" cols="25" rows="8" wrap"=virtual"></textarea></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_ditnavn]</td>
<td><input type="text" name="navn" size="25" /></td>
<tr><td><font size="2" face="arial" color="#000000">$wbgetv[l_dinepost]</td>
<td><input type="text" name="epost" size="25" /></td>
<tr><td> </td>
<td><font size="2" face="arial" color="#000000"><input type="submit" name="submit" value="$wbgetv[l_sendbeskeden]" />
</table></form>]

$wbif["$wbv[submit]"<>""|
$wbsetv[OK|1]
$wbif["$wbv[emne]"=""|$wbsetv[OK|0]$wbsetv[emne|No subject]|$wbsetv[emne|$wbv[emne]]]
$wbif["$wbv[navn]"=""|$wbsetv[OK|0]$wbsetv[navn|No name]|$wbsetv[navn|$wbv[navn]]]

#* If no ICQ number was specified... *#
$wbif["$wbv[icqnummer]"=""|$wbsetv[OK|0]$wbsetv[msg|$wbgetv[l_icqikkeudfyldt]] $wbsub[pager]|
#* If the user did not write a message... *#
$wbif[$wblen[$wbv[besked]]=0|$wbsetv[OK|0]$wbsetv[msg|$wbgetv[l_ingenbesked]] $wbsub[pager]|

#* The message body cannot contain more than 450 characters *#

$wbif[$wblen[$wbv[besked]]>450|$wbsetv[OK|0]$wbsetv[msg|$wbgetv[l_over450tegn]] $wbsub[pager]|

#* If the user did not specify his/her email address... *#

$wbif[$wblen[$wbv[epost]]=0|$wbsetv[OK|0]$wbsetv[msg|$wbgetv[l_epostikkeudfyldt]] $wbsub[pager]|]
]
]
]

#* Sending the message *#
$wbif[$wbgetv[OK]=1|$wbsetv[msg|$wbgetv[l_beskedenafsendt]] $wbsetv[to|$wbv[icqnummer]@pager.icq.com] $wbsetv[body|$wbv[besked]] $wbsetv[from|$wbgetv[navn] <$wbv[epost]>]
$wbgeturl[email.wbsp?to=$wbesc[$wbgetv[to]]&from=$wbesc[$wbgetv[from]]&body=$wbesc[$wbgetv[body]]]|]
|
$wbgetv[formular]
]

Save this file as default.wbsp.

Sending the email

Finally the message we want to send to some ICQ account we send it by email. In WhizBase sending emails are very simple. You just need four variables, three we have already passed in the $wbgeturl function and the fourth is set in this file.

[FormFields]
wb_mailserver=mail.localhost #* Here we define the outgoing mail server *#
wb_command=p
WB_To=$wbv{to}
WB_From=$wbv{from}

$wbv[body]

I hope this tutorial helped you learn more about WhizBase capabilities. Until the next article, have a good time.

For more information email me at: NurAzije [at] Gmail [dot] com Or visit WhizBase official site at www.whizbase.com

Whizbase fast tutorial

2010-03-04T09:46:00.004+01:00

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}

<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

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

Creating live visitors counter (who is online) in WhizBase

2010-02-15T13:05:00.002+01:00

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.

If you did not read my previous articles:
Uploading files to your webpage in WhizBase
Make a database driven website in 3 steps
Simple form validation with WBSP
Make a Password Strength Meter in WhizBase
Creating a small address book application in WhizBase

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

$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)}

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)}

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

<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

Creating a small address book application in WhizBase

2010-02-15T12:45:00.003+01:00

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

<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>

<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>

</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.

will mark the end of the file header. We now make the design of our address book.  and  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}

<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

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

<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

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

Make a Password Strength Meter in WhizBase

2009-11-19T15:11:00.000+01:00

Today the Internet is everywhere, we use it in everything, it is the buzz word of our time. When it first began it was just an experiment, a network for exchanging some data between universities, no one used it for exchanging private data.

Today it is 90% social powered network, everyone have a profile on some social website, a lot of people have money accounts on the net, some others have galleries and private data. So now we have to take care about security, how to secure our data, we need a good password, most people use «trustno1» or «000000» or their birth dates. That is not a good password, any cracking engine can guess that one.

Making a good password

A good password must have numbers, alphabetic characters (upper and lower case), other characters, they must be in a random order and must not mean anything. So do not use English words with meaning or some number combinations of something in your life.

A good example for a good password is ubXr-z9)7mn: we have upper and lower case letters, we have numbers and we have other characters. This password is nearly impossible to guess.

We will show you how to make password strength meter in WhizBase. The concept is easy, the user enters the password, we check it if it has all the 4 elements in it and give strength value back.

So let us start.

Give me your password

We will make a simple HTML form where we will ask the user to insert a username and a password. It is the standard form you can find everywhere on the net. Let us name it «index.htm»

<html>
<head><title>WhizBase Password Strength Meter</title></head>
<body>
<form action="'chpwd.wbsp'" method="'post'">
Username : <input type="'text'" name="'username'" value="''"><br />
Password : <input type="'password'" name="'pwd'" value="''"><br />
<input type="'submit'" value="'check">
</form>
</body>
</html>

Some notes about this code, we always use POST method in the form to hide our password when sending it through the web, we need the username to check if the password contains the username in it. We will create the file «chpwd.wbsp» which will make the checking for us.

Mambo Jumbo stuff of the code

Before we start we need to write down what we want to check and how we mark the password strength. I will make a list of things we need to check and every point have 1 point mark. So if the password passes 3 out of 6 it will have 50% strength.

The length of the password must be at least 8 characters
The password must not contain the username in it
The password must contain numbers
The password must contain special characters
The password must contain lower case letters
The password must contain upper case letters

Now lets begin with the code, save it in 'chpwd.wbsp':

$wbsetv[strength|0]
$wbif[$wblen[$wbv[pwd]]>7|$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]|]

$wbif[$WBCSTR[$wbv[pwd]|$wbv[username]|T]>0||$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]]

$wbsetv[avail|F]
$WBSPLIT[0,1,2,3,4,5,6,7,8,9|numbers|,]

$wbsetv[count|0]

$wbif[$wbgetv[avail]="T"|$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]|]

$wbsetv[avail|F]
$WBSPLIT[!,#,$,%,&,/,(,),=,?,*,@,;,:,-,_|schars|,]

$wbsetv[count|0]

$wbif[$wbgetv[avail]="T"|$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]|]

$wbsetv[avail|F]
$WBSPLIT[q,w,e,r,t,z,u,i,o,p,a,s,d,f,g,h,j,k,l,y,x,c,v,b,n,m|scase|,]

$wbsetv[count|0]

$wbif[$wbgetv[avail]="T"|$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]|]

$wbsetv[avail|F]
$WBSPLIT[Q,W,E,R,T,Z,U,I,O,P,A,S,D,F,G,H,J,K,L,Y,X,C,V,B,N,M|ucase|,]

$wbsetv[count|0]

$wbif[$wbgetv[avail]="T"|$wbsetv[strength|$wbcalc[$wbgetv[strength]+1]]|]
Your password's strength is $wbcalc[$wbcalc[$wbgetv[strength]/6]*100]% $wbgetv[strength]

Let us speak English

Now let me explain what we have done. First we have created a variable which will contain the strength value, starting with zero because we assume the password is not good and then check every point and give a mark for success. We've done that with $wbsetv[strength|0] which means «WhizBase set a variable named strength with value 0».

Now we start with checking, first we check if the password length is more than 7 characters.

$wbif[
$wblen[$wbv[pwd]]>7
|
|
$wbsetv[strength|
$wbcalc[$wbgetv[strength]+1]
]
]

We say «If the length of 'pwd' variable greater is than 7 then add 1 point to the variable strength. Else do nothing.

Now we want to check if the password contains the username in it. Again we use $WBIF «If number of occurences of the username variable in the pwd variable is greater than 0, then do nothing» (do not add a point), because there is at least one occurence and there should be none, «else add one point to the variable strength» because there is no user name in pwd.

Now we will make our script a little bit more complex, since we need to check if there are number characters in the password. To do so, we will define the numbers array and loop through the elements and check if any of them exists in the password string.

$wbsetv[avail|F]
$WBSPLIT[0,1,2,3,4,5,6,7,8,9|numbers|,]

$wbsetv[count|0]

$wbif[
$wbgetv[avail] = 'T'
|
$wbsetv[strength|
$wbcalc[$wbgetv[strength]+1]
]
|
]

At the beginning we suppose that there are no numbers, and give a value F as False for variable avail. Using wbsplit with the string «0,1,2,3,4,5,6,7,8,9» we make an array named numbers with the separator «,». This is a very cool way to create arrays in WhizBase. There are another ways but I prefer this one.

Now to loop through the array, we will need a counter so we will create a variable «count» with initial value of 0.

We will loop through the array while the condition (counter value <= length of the array) is true. In the loop we check with wbif function if there is an occurrence of the array element's value in the password string. If we find at least one we will set the variable avail as True «T». And off course we do not want our loop to go infinite, so we increase the value of the counter variable. After the loop is ended we check if our «avail» variable is True, which means that our password string has numbers in it, and add one point to «strength» variable (if true), else we do nothing. Now we repeat the same thing for special characters, lower case letters and upper case letters. I will not go through that code because it is the same as this one. Finally we will calculate the percentage of the strength, which is simple mathematical equation:

$wbcalc[$wbcalc[$wbgetv[strength]/6]*100]

We calculate the result of the strength points divided by maximum points (in our case it is 6), and then we multiply the result with 100 to get a percentage result.

And here we have a script that will tell us how powerful is our password.

For more information email me at: NurAzije [at] Gmail [dot] com Or visit WhizBase official site at www.whizbase.com

15.07.2009 - Version 5.0.13 released

2009-07-15T14:06:00.003+02:00

WhizBase have released a new version of its engine today, including one new operator, operator modulus to $WBCALC function.

$WBCALC function gives the results of mathematical expressions. This make it easier in the code to distinguish between literally written 1+2 or mathematically waiting for a result.

For more information please visit WhizBase download page or contact me at NURAZIJE [AT] GMAIL [DOT] COM

PowerPack Wizards version 1.0.3 released

2009-07-15T09:09:00.002+02:00

PowerPack is a User-friendly interface for WhizBase development. Using WhizBase PowerPack user can build all required files - WhizBase Query Form and WhizBase Report (WBSP file) without need to work directly with WhizBase Engine (using WhizBase parameters, tags and functions). Whole system is built to simplify and ease development of dynamic, database-driven web content. WhizBase Engine simplifies access to the database(s) on the web (either Internet or intranet) and WhizBase PowerPack makes configuring WhizBase easy and simple.

WhizBase Query Form Wizard will help you build web page that calls WBSP file. That is the page that has a HTML form which calls selected WBSP file(s) and sends the parameters entered by visitor and predefined by webmaster. Building this page is easy. It starts with opening database and record source (database table or query) and everything else is done by few mouse clicks following the program's instructions.

Final product of this procedure is source code of web page (HTML), which can easily be modified (or merged with ordinary HTML document) using any web-authoring tool.
Procedure for building Reports is exactly the same. WhizBase report (WBSP file) produced by wizard is a web page (in HTML format) that is used by WhizBase Engine to model the result of the action performed by visitor.

In the new release WhizBase team changed the default form action for quick search from $wbe[script_name] to $wbe[path_info]. Some web servers replace $wbe[script_name] with virtual path to wbsp.exe even when it is not running in CGI mode. $wbe[path_info] always returns path to WhizBase script (.wbsp) file.

Version 5.0.12 released

2009-07-07T15:27:00.000+02:00

WhizBase have released a new version of its engine today, including one new variable and three functions.

WB_DBLock

This variable defines what type of record locking will be used when opening the recordset. If you are not sure what type of record locking you need do not change the default value which is (A) automatic. This function will solve the problem of database damages when more than one update occers in the same time. You can use pessimistic or optimistic, you can leave it automatic or use unspecified.

WBCSTR

A new function which returns a the count of instances of a string in another. This will help in easier string manipulations in cobination with other string manipulation functions WhizBase is getting a good collection of powerful functions.

WBESC

When transmitting data in URLs we have problems with URL encoding. This function will solve that problem, it will encode every value, and all can be returened back with its sister function WBUNESC.

WBUNESC

When transmitting data in URLs we have problems with URL encoded data. This function will decode any data encoded by WBESC, WBVC or WBFC functions.

For more information please visit WhizBase downlod page

Simple form validation with WBSP

2009-07-02T14:42:00.010+02:00

Have you ever looked to the DB of your registered users, if you do you will find a lot of garbage data. Emails that does not exist, unreal names and comments with spam or empty fields.

In this tutorial I will show you how to make a simple validation form using WhizBase. With it you can not control and validate everything, but at least you will filter some data. It will learn you some basics and it will save you a lot of deleting work.

The boring part

The most boring part for a developer is HTML, generally programmers and developers do not like designing. If you ask me, I hate HTML coding, I mostly give it to my wife, she likes it and I work on the more complicated things «Server Side Scripting».
Let us make a file named as «form.htm» and put in it the next code:

<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<form action="validation.wbsp" method="post">
<fieldset><legend>Enter your information in the form below.</legend><br />
First Name:<br/>
<input type="text" name="fname" size="20" maxlength="40" /><br /><br />
Last Name:<br/>
<input type="text" name="lname" size="40" maxlength="60"/><br /><br />
E-Mail:<br />
<input type="text" name="email" size="40" maxlength="60"/><br /><br />
Comments:<br />
<textarea name="comments" cols="40" rows="7"></textarea>
</fieldset>
<div align="center"><input type="reset" />
<input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>

Pay attention to the action attribute in the form tag, we will send our data to validation.wbsp which is our WhizBase Server Pages file.

The Need For Speed Part

Have you ever played Need For Speed, I like the Lamborghini car, that is a great game. WhizBase is something like that to other languages when you are developing a site. You do not need a lot of time to create it.

Let us create the file validation.wbsp and put WhizBase code in it:

[FormFields] WB_Required=email,fname,lname,comments

<html>
<head>
<title>Validate Form</title>
</head>
<body>
$wbif[$wbcstr[$wbv[email]|@]>1|Please insert your email address<br />|]
$wbsplit[$wbv[email]|email_array|@]
$wbif[$wblen[$wbgetv[email_array(0)]]>0||Your have inserted an invalid email format<br />]
$wbif[$wblen[$wbgetv[email_array(1)]]>0||Your have inserted an invalid email format<br />]
$wbsplit[$wbgetv[email_array(1)]|domain|.]
$wbif[$wblen[$wbgetvdomain(0)]]>0||Your have inserted an invalid email format<br />]
$wbif[($wblen[$wbgetvdomain(1)]]>1) and ($wblen[$wbgetvdomain(1)]]<5)||Your have inserted an invalid email format<br />]
</body>
</html>

We need to check 4 values (email,fname,lname,comments) if they are empty or not, then in case if they are empty we will give an error. We simply use one command, it is WB_Required which will check all the fields required, if one of them are empty it gives an error.

[FormFields] is a command where we tell the server to start processing essential data for WhizBase file, and we close it with  command.

When we come to email validation we need to validate its format also, it is important if it is in the format of:
Charactars_and_Numbers@ Charactars_and_Numbers.4_to_2_Charactars_and_Numbers

From this we need to check:

does it have @ symbol, and only once.
Before @ symbol we need to have at least 1 character
Do we have a dot in the second part which we split with it the rest to two parts.
The first part must be at least one character
The second part must have at least 2 characters and at most 4

Let us start playing cards.
First we need to check if there is and only one @ symbol in the email, if it is false we give an error. This is done with if statement and wbcst function.

$wbif[$wbcstr[$wbv[email]|@]=1|| Please insert your email address<br />]

The IF:
$wbif[ CONDITION | IF TRUE | IF FALSE]

The CONDITION:
$wbcstr[ STRING | STRING TO LOOK FOR] = 1

In WhizBase get and post methods are considered the same, if you send a variable using post method or send it using get method all the variables are created on the fly as a special set.
Considering that we will just get these variables with $wbv[var_name].

The STRING: $wbv[email]

Second we split the email address to two parts and put it in an array, then we check the first part if it is at least 1 character.

$wbsplit[$wbv[email]|email_array|@]
$wbif[$wblen[$wbgetv[email_array(0)]]>0||Your have inserted an invalid email format<br />]

We notice WBSPLIT function, it takes a string and an array name and a separator, creates the array and fill the string's part separated by the separator.

$wbsplit[ STRING | ARRAY_NAME | SEPARATOR]

In the second line we get the length of the first part by using WBLEN and check if it is more than zero characters.

$wblen[ STRING ]

To access a variable we need to use the WBGETV function which accesses variables and arrays, and we call the first part of the array with (0) - in WBSP 0 is the first element in the array.

The STRING:
$wbgetv[ VARIABLE_NAME ]

Third we make the same process to the other part with the dot, and we have a simple email validation done.

For more information email me at: NurAzije [at] Gmail [dot] com
Or visit WhizBase official site at www.whizbase.com

Uploading files to your webpage

2009-06-09T15:08:00.006+02:00

Have you ever wanted to upload your files to your hosting, or have you ever want to make a simple images gallery and let the visitors upload their pictures.

In this tutorial I will show you how simple is to write a script for uploading your files online with no need for complicated web scripts like ASP or PHP.

Simple HTML uploading form

If you want to upload images you will need a form, it is made in pure HTML, it is the page where you click on Browse and select the file you want to upload. Fortunately HTML provides us with the elements, we do not need to write scripts to list files on our computer.

<html>
<head>
<title>Upload an Image</title>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form action="upload.wbsp" method="post" ENCTYPE="multipart/form-data">
Select file (*.jpg;*.gif - max. 100KB): <input type="file" name="image" size="20"> <input type="submit" name="sButt" value="Upload">
</form>
</body>
</html>

Let take a look in some important elements in this code, first the Form tag, without it our code will not work, the form tag must contain information like action (where to send the file data), method (there is two general methods – get and post, when sending files use post) and enctype(there is a lot of encoding types, multipart/form-data is used for uploading files).

Also we need to use the input of type file, that input is the one which let us browse our computer files. Last is the submit input, it is the button which people will click to send or upload the file.

Save this file as index.htm and put it in a folder so you do not loose it.

The butter of the work

Now we want to make the server-side file, it is the script which takes the file, save it on the hosting server.

[FormFields]
WB_AllowMultipart=T

[Upload]
WB_Disallow=![jpg,gif,png,bmp]
WB_UploadDir=/
WB_Overwrite=T
WB_MaxFSize=102400


<html>
<head>
<title&rt;File uploaded</title>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Your file have been uploaded!
</body>
</html>

OK, do not get afraid, it is not complicated as it seems, I will explain every line before the HTML tag, make your self a coffee or a tea and sit down and read.

I will explain first what is used as a scripting language, it is WhizBase Server Pages, WhizBase is simple but powerful scripting language, it is made for non-programmers to simplify creating database-driven websites without the need for high experience in high-level programming languages.

Now in English, it is a scripting language for everyone, simple and easy for you to use. Let me show you how.

The header section

Every WBSP page have a header, it is a place where we put some information needed by the server, everything we write in this section will not appear in our page. This section contains the variables that are essential for processing WBSP file. Here you put information about the database, recordset, template, error template, log file, redirection, etc.

In the code we have [FormFields] which is a tag giving a notice for WhizBase engine to start interpreting the main commands of the WBSP file.

Then we have WB_AllowMultipart = T this variable controls if the current WBSP page will accept uploaded files (sent by client using multipart form). If this variable is set to TRUE WhizBase will accept and process uploaded files. This is a security measure so WBSP process the files sent to the write direction.

Second tag is [Upload] which is giving a notice for WBSP engine to start receiving information about the uploading process. Now ask your self, do you want viruses and a porn dialer on your server, if no you need to use WB_Disallow=![jpg,gif,png,bmp], we do not want users to upload any file, we only want images, so we disallow every file which does not have one of these extensions.

Where do you want to put your pictures, you need an upload directory, so we use WB_UploadDir=/, this variable defines the name of the directory on the server where WhizBase will save files uploaded using current WBSP file.

Do you want to overwrite your image? WB_Overwrite=T is a variable which defines if the file with same name that already exists on the server will be overwritten by newly uploaded file. We will use T as True. If you define it as F (False) WhizBase will generate a unique file name for the new one and save it like that.

If you do not want visitors to block your server, you need to limit their file's upload size, so you use WB_MaxFSize=102400 which is a variable which defines the maximum size (in bytes) of a single file that can be uploaded using current WBSP file. We have putted 102400 bytes.

Finally we put  to let the server know that now we are starting the body section, where we put our HTML code and what we want to show for visitors.

As you see, we can control everything when uploading files. And that how you simply make an upload form which works without the need of PHP or ASP.

For more information about WhizBase please visit WhizBase site or contact me on NurAzije [at] Gmail [dot] com.

Make a database driven website in 3 steps

2009-06-03T08:57:00.015+02:00

Today every company had to have a website, it is something like having a telephone number or a company address. A lot of companies do not have yet a budget for making a website, thedy think it is very expensive, and they are right. If you use a web developer in Europe you will need a couple of thousands of Euros to make a simple website to present your company.

In this article I will give a simple tutorial how to publish your database report without the need for a web-developer, something simple but yet very powerful, with your Microsoft access database.

This method is best way for web designers, who know how to make a web page in HTML, but do not know how to connect it with the database, without using PHP or ASP.

First step: create your report page

To show your report online, you will need a database access file and a HTML file which will show the report or the query results.

We will create the databse in Microsoft access, I will create a database and name it as biblio and create a table and name it Titles, we will make these fields:

ID as number data type which will be our primary key also.
Name as text data type
Publisher as text data type
PublishYear as text data type

I will fill it with some data and save it, and we have a database file.

If you have a design for your report you will need to slice it and make a HTML page, you can use GIMP on linux or Photoshop on windows, then use any HTML editor or text editor to make the HTML code.

I will use a simple example using WhizBase Server Pages (WBSP) to develop this report. WBSP is a very powerful tool for publishing databases online with a very simple code, it is not like classic web programing languages.

Create the header:

Every WBSP page have a header, it is a place where we put some information needed by the server, everything we write in this section will not apear in our page. This section contains the variables that are essential for processing WBSP file. Here you put information about the database, recordset, template, error template, log file, redirection, etc. We will simply say for the server to connect to our access database and select a table, list for example 10 records only and make a pagiation.

1 [FormFields]
2 wb_basename=biblio.mdb
3 wb_rcdset=Titles
4 WB_Command=Q
5 WB_MaxRec=10
6

[FormFields] is the starting tag for the section, when the server sees this code it will start receiving our commands. wb_basename=biblio.mdb is our database file, I have putted our database in the same folder as my HTML file so I am calling it directly. The server will look for the file name what ever we give as a path for it after wb_basename and connect to the database file. To specify which table we will select we use wb_rcdset=Titles, as you see I will select the table Titles. We told the server which database file to connect and which table to select, now we need to tell it what to do, and in our case is query, using the command WB_Command we give it a value Q and we did it. Finally we want to limit our results, let us show 10 records by page. We can skip this line and it will list the whole table, but what if we have a table with 10 000 records or more, do you really want to show it all in one page? So we will use WB_MaxRec=10 and that is all what we need. Now give the server a simple comment like command  which says to the server begin interpreting the template.

Create the body (template):

After creating the header setion we have to create the template, and that is very simple, it is our HTML code with simple lines of WBSP code where we want to show our data.

<html>
<head>
<title>Simple DB report page</title>
</head>
<body>
<table>
<tr><th>ID</th><th>Name</th><th>Publisher</th><th>Publish Year</th></tr>

<tr><td>$wbf[ID]</td><td>$wbf[Name]</td><td>$wbf[Publisher]</td><td>$wbf[PublishYear]</td></tr>

</table>
<div align='center'>$wbnavigator</div>
</body>
</html>

In the template we want to view ten records in a table and then show the navigation bar where users can go next or previus page to see more records.

The most important code in this template is  and  which represents the start and the end of the looping function, everything between these two will loop for as many times as records we want to show. If the query returned 10 records it will loop for ten times. Between these two commands we will show the records using the function $wbf[fieldname], in our case we are viewing four fields in the table and WBSP will replace every one with the field value in the table.

Finally we have $wbnavigator which will generate for us the navigation links automatically, this is a very cool command, we do not need to calculate anything, it will automatically create as many pages as we need.

We will save all this as defaut.wbsp file, where the extension wbsp will say to the server that this file have a WBSP code in it.

Second step: Create a search form

In the previous step we have made a report page, now we need a filtering form, for example what if we do not want to view all the records, we want to view just records for the publish year 2007.

Create a file named as «search.htm», in this file we will not need any WBSP code, we will only make a HTML form with inputs and a submit. We only must take into account one thing, how we will name our inputs, because WBSP have its automatic mechanism for catching get and post values.

<html>
<head>
<title>Search filter file</title>
</head>
<body>
<form action='default.wbsp' method='post'>
ID <input type='text' name='wbf_id' /><br />
Name <input type='text' name='wbf_name' /><br />
Publisher <input type='text' name='wbf_publisher' /><br />
Publish Year <input type='text' name='wbf_publishyear' /><br />
<input type='submit' value='submit' />
</form>
</body>
</html>

As you can see we have used a pure HTML, but we have also used a specific naming method in the input names. WBF_ID is WBF_ + ID where WBF_ is WhizBase prefix and ID is the name of the table field. WhizBase catches all the get and post data and filters them, then takes all the post and get data with prefix WBF_ and sends them to the query.

For example if we put a value 2000 in «Publisher Year» input, it will be a post value in the variable wbf_publisheryear, WhizBase will filter it and catch it because it has wbf_ prefix and then send it as a database query as «publisheryear = 2000».

Third Step: Upload everything online

Finally, we have a form file, a report file and a database. We do not need anything else. Now just upload the 3 files online in the same folder on a server which supports Whizbase or install Whizbase on your Windows server and put these files on the server and you will have a ready report and a filtering system.

For more information about WhizBase or to download it for free you can visit http://www.whizbase.com or contact me at NURAZIJE [at] GMAIL [dot] COM