Difference between revisions of "TutWebAppServer"

From Overbyte
Jump to navigation Jump to search
(Lesson 1 and Lesson 2)
 
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Main_Page | Main page]] -> [[ICS_Components_Reference | ICS component reference]] -> [[THttpAppSrv | THttpAppSrv]] -> '''Tutorial'''
 +
 
== Description ==
 
== Description ==
 
This tutorial is about writing a dynamic web application using THttpAppSrv component you can find in ICS version 7.
 
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.
 
A dynamic web application is one which not only deliver static pages and files, but also dynamic web page.
 +
 +
 +
== Source code ==
 +
* [{{SERVER}}/arch/OverbyteIcsTutWebAppServerLesson1to4.zip Lesson 1 to 4]
 +
* [{{SERVER}}/arch/OverbyteIcsTutWebAppServerLesson1to6.zip Lesson 1 to 6]
  
 
== Dynamic Pages ==
 
== Dynamic Pages ==
Line 17: Line 24:
  
 
Obvioulsy, 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.
 
Obvioulsy, 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.
−
 
+
<br><br>
−
=== Lesson 1 : Hello World ===
+
== Lessons ==
−
 
+
[[TutWebAppServer Lesson 1 - Hello World|Lesson 1 - Hello World]]<br>
−
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".
+
[[TutWebAppServer Lesson 2 - Hello Today|Lesson 2 - Hello Today]]<br>
−
 
+
[[TutWebAppServer Lesson 3 - Simple data entry and processing|Lesson 3 - Simple data entry and processing]]<br>
−
==== Steps ====
+
[[TutWebAppServer Lesson 4 - Building tables|Lesson 4 - Building tables]]<br>
−
# Create a new VCL forms application.
+
[[TutWebAppServer Lesson 5 - Relocation|Lesson 5 - Relocation]]<br>
−
:: Here in the demo we use a classic graphic application. For a real application, it is likely that you'll create a service application.
+
[[TutWebAppServer Lesson 6 - Simple login and session data|Lesson 6 - Simple login and session data]]<br>
−
# Rename the form "TutWebAppServerMainForm"
+
[[TutWebAppServer Lesson 7 - Dynamic images|Lesson 7 - Dynamic images]]<br>
−
# On the form just created, drop a THttpAppSrv component.
+
[[TutWebAppServer Lesson 8 - Asynchronous answer|Lesson 8 - Asynchronous answer]]<br>
−
# 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.
 
−
# 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.
 
−
# 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
 
−
|}
 
−
# Create the document directory "c:\icstutorial\wwwroot" and the templates directory "c:\icstutorial\templates".
 
−
# 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"
 
−
# Add a FormShow event handler to TutWebAppServerMainForm with the code:
 
−
<tt>
 
−
:: HttpAppSrv1.AddGetAllowedPath('/', afBeginBy);
 
−
:: HttpAppSrv1.Start;
 
−
</tt>
 
−
# Hit CTRL-SHIFT-S to save all.
 
−
# 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.
 
−
# 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.
 
−
<br>
 
−
 
 
−
=== 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 ====
 
−
# Create the template for the dynamic web page: Menu / File / New / Others / web document / HTML Page.
 
−
# Write the text: "Server time is"
 
−
# 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.
 
−
# Save the template as "c:\icstutorial\templates\HelloToday.html"
 
−
# 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:
 
−
<tt>
 
−
::'''uses'''
 
−
:::    SysUtils, OverbyteIcsHttpAppServer;
 
−
<br>
 
−
::'''type'''
 
−
:::    TUrlHandlerHelloToday = '''class'''(TUrlHandler)
 
−
:::    '''public'''
 
−
::::        '''procedure''' Execute; '''override;'''
 
−
:::    '''end;'''
 
−
<br>
 
−
::'''implementation'''
 
−
<br>
 
−
::'''procedure''' TUrlHandlerHelloToday.Execute;
 
−
::'''begin'''
 
−
:::    AnswerPage(&rsquo;&rsquo;, &rsquo;&rsquo;, 'HelloToday.html', nil, ['DateTime', DateTimeToStr(Now)]);
 
−
:::    Finish;
 
−
::'''end;'''
 
−
</tt>
 
−
# Switch back to OverbyteIcsTutWebAppServerMain and add "OverbyteIcsTutWebAppServerHelloToday" to the uses clause, add the following line in front of the FormShow event handler:
 
−
::<tt>HttpAppSrv1.AddGetHandler('/HelloToday.html', TUrlHandlerHelloToday);</tt>
 
−
# Hit CTRL-SHIFT-S and F9 to save all, compile and run your application.
 
−
# 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.
 
−
<br>
 
−
==== 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.
 

Latest revision as of 07:37, 23 May 2009

Main page -> ICS component reference -> THttpAppSrv -> Tutorial

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.


Source code

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 developper 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 describe one table row in the template and at runtime, as many rows as needed are created. The developper 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.

Obvioulsy, 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.

Lessons

Lesson 1 - Hello World
Lesson 2 - Hello Today
Lesson 3 - Simple data entry and processing
Lesson 4 - Building tables
Lesson 5 - Relocation
Lesson 6 - Simple login and session data
Lesson 7 - Dynamic images
Lesson 8 - Asynchronous answer

Retrieved from "http://wiki.overbyte.eu/wiki/index.php?title=TutWebAppServer&oldid=2323"