TutWebAppServer Lesson 3 - Simple data entry and processing

From Overbyte
Jump to navigation Jump to search

During this lesson, you will learn how to present a data entry form to the user, process entered data and produce a result page. For simplicity, we will use a simple form to enter two numbers, an operator and provide the result in another simple page. Later, in another lesson, we will use AJAX to update the current page with the computation result.

Steps

  1. Create a template HTML file for the calculator. Let's name that file SimpleCalculator.html and save it in the template folder we have located at "c:\icstutorial\templates". Menu / File / New / Others / Web documents / HTML page. Add the following HTML code as body:
    <form action="DoSimpleCalculator.html"
    method="get"
    enctype="application/x-www-form-urlencoded">
    Number 1 <input name="Number1">
    Operator <select name="Operator">
    <option>Add</option>
    <option>Multiply></option>
    </select>
    Number 2 <input name="Number2" type="TEXT">
    <input name="Submit" type="SUBMIT" value="Compute">
    </form>
  2. Create a new unit to hold the calculator code. Menu / File / New / Delphi Unit. Save the unit as "OverbyteIcsTutWebAppServerSimpleCalculator.pas".
  3. Create the class to deliver the calculator's form. Actually we could have done a static page as well. Since we made a template, we need to write a class and map the class to the URL. The class and his implementation are quite straigthforward:
    uses
    SysUtils, OverbyteIcsHttpAppServer, OverbyteIcsHttpSrv;
    type
    TUrlHandlerSimpleCaculator = class(TUrlHandler)
    public
    procedure Execute; override;
    end;
    implementation
    procedure TUrlHandlerSimpleCaculator.Execute;
    begin
    AnswerPage(’’, ’’, NO_CACHE, 'SimpleCalculator.html', nil, []);
    Finish;
    end;
  4. Mapping the class to the URL is done by calling AddGetHandler from TTutWebAppServerMainForm.FormShow. In order to reference the class, we must also add OverbyteIcsTutWebAppServerSimpleCalculator to the uses clause in OverbyteIcsTutWebAppServerMain.pas.
    HttpAppSrv1.AddGetHandler('/SimpleCalculator.html', TUrlHandlerSimpleCaculator);
  5. At this stage, you can save all (CTRL-SHIFT-S), compile and run (F9) the application. Then point your browser to http://127.0.0.1:20080/SimpleCalculator.html. You should see the HTML form. If you click the Compute button, you get a 404 error since we have not implemented the form action yet. Let's do it. Stop the program and execute the next steps.
  6. Create the class to implement the calculator operation. In the HTML form above, we named the action "DoSimpleCalculator.html", so we will name the class "TUrlHandlerDoSimpleCalculator". We write the class in OverbyteIcsTutWebAppServerSimpleCalculator.pas unit. The declaration looks like:
    TUrlHandlerDoSimpleCalculator = class(TUrlHandler)
    public
    procedure Execute; override;
    end;
  7. Now write the code for the execute procedure. In this code we have to get the values entered by the user thru the HTML form we have designed. There are 3 fields we named "Number1", "Number2" and "Operator". The form definition specify method "get" and encoding "application/x-www-form-urlencoded". Those values directly impact how we received the values in Delphi. The HTTP server component unit has a function "ExtractURLEncodedValue" designed to get such value. It takes 3 arguments. The first is the parameters sent by the browser, the second is the name of the field and the third is a reference to the string variable to hold the result. The function return a boolean telling if the named parameter is found or not.
    All in all we have to define 3 variable and call the method 3 times to get their values. Up to here, the code looks like:
    procedure TUrlHandlerDoSimpleCalculator.Execute;
    var
    N1 : String;
    N2 : String;
    Op : String;
    begin
    ExtractURLEncodedValue(Params, 'Number1', N1);
    ExtractURLEncodedValue(Params, 'Number2', N2);
    ExtractURLEncodedValue(Params, 'Operator', Op);
    end;
  8. Now we have to do the computation. Be aware the every parameter is returned as a string. We have to do convertion to be able to compute the result. To hold the result, add an integer variable and name it "R". Add the following lines to the Execute procedure:
    if SameText(Op, 'Add') then
    R := StrToInt(N1) + StrToInt(N2)
    else if SameText(Op, 'Multiply') then
    R := StrToInt(N1) * StrToInt(N2)
    else
    R := 0;
     For simplicity, we have not written any validation nor any exception handling. We are just demonstrating dynamic web design, not Delphi programmming best practices.
  9. To display the result, we have to prepare a HTML template and used it to send the answer page to the client's browser. Menu / File / New / Other / Web Document / HTML page. Name the file "SimpleCalculatorResult.html" and save it in the templates directory. As HTML body, write this HTML code:
    <#Operator>(<#Number1>, <#Number2>) = <#Result>
    <a href="SimpleCalculator.html">Continue</a>
     This HTML code make use of 4 special tags named "Number1", "Number2", "Operator" and "Result". Those tags will be replaced by the actual values we provide by code when calling AnswerPage. The final code for the Execute procedure looks like this:
    procedure TUrlHandlerDoSimpleCalculator.Execute;
    var
    N1 : String;
    N2 : String;
    Op : String;
    R : Integer;
    begin
    ExtractURLEncodedValue(Params, 'Number1', N1);
    ExtractURLEncodedValue(Params, 'Number2', N2);
    ExtractURLEncodedValue(Params, 'Operator', Op);
    if SameText(Op, 'Add') then
    R := StrToInt(N1) + StrToInt(N2)
    else if SameText(Op, 'Multiply') then
    R := StrToInt(N1) * StrToInt(N2)
    else
    R := 0;
    AnswerPage(’’, NO_CACHE, 'SimpleCalculatorResult.html', nil,
    ['Number1', N1, 'Number2', N2, 'Operator', Op, 'Result', R]);
    Finish;
    end;
     You can see that we used NO_CACHE constant in the call to AnswerPage. This constant instruct the client browser to not store the page into his cache. This is very important since it is a dynamic page. If the client navigator store the page in his cache, then the user would see an old version showing old results.
  10. Finally, we have to map our class to an URL. This is done by calling AddGetHandler from TTutWebAppServerMainForm.FormShow.
    HttpAppSrv1.AddGetHandler('/DoSimpleCalculator.html', TUrlHandlerDoSimpleCalculator);
  11. Hit F9 to compile and run the application. Point your browser to http://127.0.0.1:20080/SimpleCalculator.html. You can enter values and submit. You should get the expected result page.


Summary

In this lesson you learned how to get back data from a HTML form, do some processing with it and produce a result page. You also learned how to instruct the client navigator to not store an answer page to his cache.


Next lesson: Building tables
Previous lesson: Hello Today
Tutorial presentation: TutWebAppServer

Retrieved from "http://wiki.overbyte.eu/wiki/index.php?title=TutWebAppServer_Lesson_3_-_Simple_data_entry_and_processing&oldid=2298"