TutWebAppServer

Description

This tutorial is about writing a dynamic web application using THttpAppSrv component you can find in ICS version 7.

A dynamic web application is one which not only deliver static pages and files, but also dynamic web page.

Dynamic Pages

A dynamic web page is build on a template html file having special tags such as "<#MyTagName>" which are replaced at runtime by content provided by the application. Usually the content is fetched from a database but can comes from any source. The only limit is the developer imagination !

The component has also special tags to handle tables. Not only html tables, but anything which need to be repeated such as a list content. Using those tags, the developer describes one table row in the template and at runtime, as many rows as needed are created. The developer has full control on the data in each row and of course the number of generated rows.

The tutorial

The tutorial is divided in lessons and each lessons in steps. You must do the lesson in the correct order since most lessons depends on the previous one. In other words, lessons are simply miles stones toward the final

The steps belows correspond to Delphi 2009. You'll have to adapt somewhat the steps according to the IDE you use. The tutorial is OK with all Delphi versions supported by ICS-V7. There could also be some minor differences according to the settings you use for your ide. I'm using undocked layout with floating VCL designer. I'm using a french localized version so the menu items and button captions I give are translated from french to english and could be slightly different than the original english one.

Obviously, you must have ICS-V7 installed within the IDE. When you install ICS, you usually add <ics installdir>\Delphi\VC32 to the compiler search path. If don't do that, you must add that path to every project.

Lesson 1 : Hello World

During this lesson, you will learn how to write the simplest website. The website you'll build has only one static page displaying "Hello World".

Steps

1. Create a new VCL forms application.

Here in the demo we use a classic GUI application. For a real application, it is likely that you'll create a service application.

1. Rename the form "TutWebAppServerMainForm"
2. On the form just created, drop a THttpAppSrv component.
3. Save the files you have just created. Menu / File / Save all. Use OverbyteIcsTutWebAppServerMain.pas instead of unit1.pas and OverbyteIcsTutWebAppServer.dproj instead of project1.dproj.
4. Hit F9 to compile and run the projet. You should get no error and a blank form. If you have errors, then it is likely you have ICS incorrectly installed. Terminate the application.
5. Select the THttpAppSrv you just dropped on a form. Hit F11 to show the oject inspector and set a few property values:

Name	HttpAppSrv1
Port	20080
DocDir	c:\icstutorial\wwwroot
TemplateDir	c:\icstutorial\templates
DefaultDoc	index.html

1. Create the document directory "c:\icstutorial\wwwroot" and the templates directory "c:\icstutorial\templates".
2. Create our static html page: Menu / File / New / Others / Web document / HTML Page. Just enter the body text "Hello World" and save the file as "c:\icstutorial\wwwroot\index.html"
3. Add a FormShow event handler to TutWebAppServerMainForm with the code:

HttpAppSrv1.AddGetAllowedPath('/', afBeginBy);

HttpAppSrv1.Start;

1. Hit CTRL-SHIFT-S to save all.
2. Hit F9 to compile and run the application. You still get an empty form, but actually you already have a web server running ! Depending on your OS and security settings, you may get a message asking you to block or allow the application. Be sure to allow it.
3. Now enter the url: "http://127.0.0.1:20080" into your favorite browser. You should get your marvelous "Hello World" static page.

Summary

In this lesson you learned how to build the basic webserver to serve static page. Beside the static pages you need, there are only two Delphi code lines to write.

Lesson 2 : Hello Today

Let's add a dynamic webpage to our website. To make it simple, we will just display the current server date and time.

Steps

1. Create the template for the dynamic web page: Menu / File / New / Others / web document / HTML Page.
2. Write the text: "Server time is"
3. Switch to the HTML code editor (ALT-PgUP or click "code" tab at bottom of the editor) to enter the special tag "<#DateTime>" where you want to have the date and time shown, that is just after "Server time is". You'll see that Delphi HTML editor add an ending tag we don't need. Just delete "</#DateTime>" Delphi has inserted.
4. Save the template as "c:\icstutorial\templates\HelloToday.html"
5. Now we must associate the processing required to build our dynamic webpage. This is done by creating a new class deriving from TUrlHandler. Menu / File / New / Other / Delphi Project / Delphi Files / Unit. Save this new unit as "OverbyteIcsTutWebAppServerHelloToday.pas". Enter this code into the unit:

uses

SysUtils, OverbyteIcsHttpAppServer;

type

TUrlHandlerHelloToday = class(TUrlHandler)

public

procedure Execute; override;

end;

implementation

procedure TUrlHandlerHelloToday.Execute;

begin

AnswerPage(’’, ’’, 'HelloToday.html', nil, ['DateTime', DateTimeToStr(Now)]);

Finish;

end;

1. Switch back to OverbyteIcsTutWebAppServerMain and add "OverbyteIcsTutWebAppServerHelloToday" to the uses clause, add the following line in front of the FormShow event handler:

HttpAppSrv1.AddGetHandler('/HelloToday.html', TUrlHandlerHelloToday);

1. Hit CTRL-SHIFT-S and F9 to save all, compile and run your application.
2. Enter this URL into your browser: http://127.0.0.1:20080/HelloToday.html. You should see the web page as the template your designed with the tag "<#DateTime>" replaced by the date and time. Hit the refresh button several times to see the dynamic page in action: the time is the real time.

Summary

In this lesson you learned how to write a template for a dynamic page, link the dynamic page URL to a Delphi class, write a Delphi class implementing the processing required to get data and feed it to the template.