WebSnap II: Interacting with the user (<b>Eber</b> <b>Irigoyen</b>) an article on delphi3000.com ||

ok, here we are back after a while

Lately we haven't had many visits as we used to in delphi3000, and not many people is interested in articles about
websnap... I guess because is not as easy as everyone is so used with Delphi
so, I wasn't very motivated to continue these articles, however I know there's people that is interested and appreciate
this work, so for all of them, here it is, a second article on websnap

I'm going to continue the project Websnap I: the unknown powerful and now I will upload all the source code to my personal website (yet to come... just got cable internet!) so you can actually get the whole picture

you should be able to get it right here
Web Snap I & II full source code, executable and database

ok, let's start
open your project (you did create it, right?... ok, open the project you just downloaded and just follow so you know what's going on on each unit of the project)
on this article I will cover:
- Using data entered by the user on a form to interact with a database
- Retrieving more detail data based on previous reports using our project database

so far all our pages have the header and the footer and our main page has 3 links to the 3 shifts of employees, then you click on each link and get a list of employee numbers and names, the employee number itself is a link for which now we will create the report of his production

so, let's add another 2 links to our main page
- Employee Lookup: this will have a box where the user enters the employee number to lookup, and we show the employee information with his production

- Administration: This page will allow us to add/remove employees to our database

ok, first lets add the links
open your homeU unit and click on the html code for it and add the following lines right after the last link

<a href="<#MODULE>/emplookup">Employee Lookup</a> |
<a href="<#MODULE>/admin">Administration</a>

so now we have 5 links in our page, you can run your project, run the "Web App Debugger" and see the results

now, let's create the Employee Lookup page

File|New|Other|WebSnap|WebSnap Page Module

put emplookup as the Name, Employee Lookup as the Title (or whatever more creative you can think of), and leave everything else untouched

Save your new unit as emplookupu.pas, click on the html and remove all the jscript crap, just leave the basic html tags

add sharvarsu to your new unit uses, go to your pageproducer component events and add this code to its OnHTMLTag

If (TagString='MODULE') Then
    ReplaceText:=ScriptName

go to its html code and add this code (between the body tags):



  <form method="GET" action="/<#MODULE>/empshow">
    <input type="text" name="EmpBox" size="20">
    <input type="submit" value="Lookup" name="LookUpBtn">
    <input type="reset" value="Clear" name="ClearBtn">
  </form>



the usual header and footer, and in the middle a form with a text box and two buttons, I will let you be more creative and put a background or a nice box around the form or whatever... that's what websnap is all about! let the web pages designers do this job so you can concentrate on the ISAPI development

if you take a closer look at the action on that form it says action="/<#MODULE>/empshow"
we now know that "MODULE" will get changed to our project name and /empshow will be our new page to show the employee information and his production, so, yes... we need to create a new page

so, go ahead and create a new websnap page module and put empshow as the Name, save your new unit empshowu.pas, add the usual sharvarsu to the uses clause, go to its html code and clean up all the mess and add your header.htm and footer.htm

and put

<#EMPSHOW>

between header and footer... we will change that to be the actual report of one employee production or whatever

We will use this page to show the report for an employee when the user types the employee number and submits... and we will also use this same page to show the same report for a page we left unfinished, that shows list of employees per shift, and has a link to the employee number... so, we're providing two ways of getting to the same place

I added two more queries to my datamodule, one to get the production for a given employee and one to find if an employee exists or not... I won't get on detail on that, you'll see it on accion on the source code...

ok... so now, the fun part... as always we are going to add the "onHTMLTag" event to this new page
we're going to replace "EMPSHOW" with the employee information and his production

so, on this new page pageProducer event, write the following code:

procedure Tempshow.PageProducerHTMLTag(Sender: TObject; Tag: TTag;
  const TagString: String; TagParams: TStrings; var ReplaceText: String);
Var Emp, EmpName, EmpProd:String;
begin
  Try
    If (TagString = 'EMPSHOW') Then
    Begin
      If (Request.QueryFields.IndexOfName('EmpBox')>-1) Then
        Emp:=Request.QueryFields.Values['EmpBox']
      Else
        Raise Exception.Create('Page called with bad arguments');

      With WebDataModule1.qEmployee Do
      Begin
        Try
          Parameters.ParamValues['paEmpNo']:=Emp;
          Open;
          If (IsEmpty) Then
            Raise Exception.Create('Employee: '+Emp+' does not exist on the database')
          Else
            EmpName:=FieldByName('EmpName').AsString;
         Finally
           Close
         End
      End;

      With WebDataModule1.qProduction Do
      Begin
        Try
          Parameters.ParamValues['paEmpNo']:=Emp;
          Open;
          If (RecordCount>0) Then
          Begin
            //Put some header for this list
            EmpProd:='Employee:'+Emp+'<br>';
            EmpProd:=EmpProd+'Name:'+EmpName+'<br><hr>';
            EmpProd:=EmpProd+'<table border="1" cellspacing="1">'+
                     '<tr>'+
                     '<th>Process date</th><th>Item No</th>'+
                     '</tr>';
            //Add the employees production
            While Not (EOF) Do
            Begin
              EmpProd:=EmpProd+Format('<tr> <td>%s</td> <td>%d</td> </tr>',
                       [FieldByName('ProcessDate').AsString, FieldByName('ItemNo').AsInteger]);
              Next
            End;
            EmpProd:=EmpProd+'</table>';
            ReplaceText:=EmpProd
          End
          Else
            ReplaceText:='Employee: '+Emp+'<br>'+'Emp Name: '+EmpName+'<br><br><b>No production.</b>'
        Finally
          Close
        End
      End
    End
    Else If (TagString = 'MODULE') Then
      ReplaceText:=ScriptName
  Except
    On E:Exception Do
      ReplaceText:='Error during process: '+E.Message
  End
end;

...done =o)... we request the parameter "EmpBox"... this works because on our emplookup page we named our "TEdit"  name="EmpBox", so that gets sent to this page as parameter, then we do the queries to find if the employee is in our database and raise an exception if not... as you see at the bottom the exceptions get handled, so we show a nice message and we get to keep our header.htm and footer.htm and the error shows in the middle... =o)

ok... now, to use this same page for the other one we had left with links pointing to nothing (the list of shift page), we go open the shiftu and change the link... to something like this:

EmpList:=EmpList+Format('<tr> <td><a href="/%s/empshow?EmpBox=%s">%s</a></td> <td>%s</td> </tr>',
[ScriptName, EmpNo, EmpNo, FieldValues['EmpName']]);

this means, call the page "empshow" with the parameter "EmpBox" and then the employee number, which we read from the database... and we saw above we read the parameter "EmpBox"... so, it works =o)

Ok... finally we implement an administration page, which will allow us to add/delete employees from our database
basically it will be the same... a page to ask the user for the employee number and two buttons, one to add, one to delete...

then another page to read the parameters and execute a query on the database and we're done...

ok... here we go

create a new page, call it admin... everything default, remove the jscript crap, add the usual header and footer... add the sharvarsu to the uses...
and add this code between the header and footer
I called this unit adminu (for some reason I always add a "U" at the end of the unit names...)

<form method="GET" action="/<#MODULE>/empaction">
    Emp No  : <input type="text" name="EmpBox" size="10">
    Emp Name: <input type="text" name="EmpName" size="40">
    Shift   : <input type="text" name="Shift" size="1">
    <input type="submit" value="Add" name="Add">
    <input type="submit" value="Delete" name="Del">
  </form>

that's it on this page, we need a new page of course called empaction
<form method="GET" action="/<#MODULE>/empaction">

oh, I almost forgot, you need to add this code to the page producer OnHTMLTag event, just so the links don't get broken

procedure Tadmin.PageProducerHTMLTag(Sender: TObject; Tag: TTag;
  const TagString: String; TagParams: TStrings; var ReplaceText: String);
begin
  If (TagString = 'MODULE') Then
    ReplaceText:=ScriptName
end;

New websnap page, header, footer, blablabla... same as everyother page
of course the unit name will be empactionu =o)

The source of the page producer OnHTMLTag looks like this:

procedure Tempaction.PageProducerHTMLTag(Sender: TObject; Tag: TTag;
  const TagString: String; TagParams: TStrings; var ReplaceText: String);
Var Emp, EmpName, Shift:String; ToDoAction:(acAdd, acDelete, acUnknown);
begin
  Try
    If (TagString = 'EMPACTION') Then
    Begin
      If (Request.QueryFields.IndexOfName('Add')>-1) Then
        ToDoAction:=acAdd
      Else If (Request.QueryFields.IndexOfName('Del')>-1) Then
        ToDoAction:=acDelete
      Else
        Raise Exception.Create('Page called with bad arguments. No action specified.');

      If (Request.QueryFields.IndexOfName('EmpBox')>-1) Then
        Emp:=Request.QueryFields.Values['EmpBox']
      Else
        Raise Exception.Create('Page called with bad arguments. No employee number specified.');

      EmpName:=Request.QueryFields.Values['EmpName'];
      Shift  :=Request.QueryFields.Values['Shift'];

      With WebDataModule1.qEmployee Do
      Begin
        Try
          Parameters.ParamValues['paEmpNo']:=Emp;
          Open;
          If (IsEmpty) Then
          Begin
            If (ToDoAction=acDelete) Then
              Raise Exception.Create('Employee: '+Emp+' does not exist on the database')
          End
          Else If (ToDoAction=acAdd) Then
            Raise Exception.Create('Employee: '+Emp+' already exists on the database')
         Finally
           Close
         End
      End;

      With WebDataModule1.qAddDelete Do
      Begin
        Try
          SQL.Clear;
          If (ToDoAction=acAdd) Then
          Begin
            SQL.Add('insert into employees');
            SQL.Add('(EmpNo, EmpName, Shift)');
            SQL.Add('VALUES ('+QuotedStr(Emp)+', '+QuotedStr(EmpName)+', '+QuotedStr(Shift)+')');
          End
          Else
            SQL.Add('delete from employees where EmpNo='+QuotedStr(Emp));
          Try
            ExecSQL;
          Except
            On E:Exception Do
              Raise Exception.Create('Error executing action query: '+E.Message);
          End;
          If (ToDoAction=acAdd) Then
            ReplaceText:='Employee: '+Emp+' succesfully added to the database'
          Else
            ReplaceText:='Employee: '+Emp+' succesfully deleted from the database'
        Finally
          Close
        End
      End;

    End
    Else If (TagString = 'MODULE') Then
      ReplaceText:=ScriptName
  Except
    On E:Exception Do
      ReplaceText:=ReplaceText+'Error during process: '+E.Message
  End
end;

done... it tells you if you attempt to delete an employee that does not exist... or try to add an employee that already exits, so... we're done...

I added links to all the pages from all the pages so it's easier to navigate, you'll see on the full thing, look at the html code of each page...
looks something like this for all the pages:



  <a href="/<#MODULE>/shift?Shift=N">Night Shift</a> |
  <a href="/<#MODULE>/shift?Shift=M">Morning Shift</a> |
  <a href="/<#MODULE>/shift?Shift=A">Afternoon Shift</a> |
  <a href="/<#MODULE>/emplookup">Employee Lookup</a> |
  <a href="/<#MODULE>/admin">Administration</a><br>
  <hr>

<#EMPACTION>

  

as you can see is pretty simple, it's always the same:
put some html code with "transparent tags", replace those tags on your page producer OnHTMLTag event, and that's it

you just need to do it 2 or 3 times and you get used to it

If you guys are interested I'll upload more articles on other aspects of websnap, if not... we'll just move on to IntraWeb
'til then... keep up coding

salu2

EberSys