Simulate a Web Submit Wizard with POST Request

	Simulate a Web Submit Wizard with POST Request

Submitted on July 7, 2003

Note! This article applies only to Clever Internet Suite version 2.5 thru 3.0. Currently the newer version of the Clever Internet Suite 6.2 is available. This new version provides more powerful interface for building HTTP requests. Please check the How to migrate to the Clever Internet Suite Version 5.0 article.

Abstract

This article introduces the easiest way to composite with Delphi/C++Builder IDE design-time HTTP Form POST requests for submitting them to the web server in the future.

Lets go ahead and consider some web scenaries which implement some data posting from a client, data retrieving from the server specified and also require that the established connections will be kept during the whole session.

Scenario One.

Log-in to the server in order to submit some personal information.

This may be some kind of online registration page which usually allows you to enter the information with simple form input controls (which has the type="text" attribute specified or any other). To submit such a kind of request they usually use the "application/x-www-form-urlencoded" content type. This means that the controls for the entire page sholud be encoded while making the HTTP request as follows:

FirstName=John&LastName=Doe

Here both the FirstName and LastName words denote the form control names and the John and Doe words the values correspondingly. With Internet Components - Clever Internet Suite it is possible to make this request totally in IDE design-time without writting any lines of source code. There is a special class which represents the HTTP request data - TclHTTPRequest. Lets consider the request structure in more details. It is obvious that it consists of two similar parts i.e: field name - field value. The class TclHTTPRequest has a collection of such request parts which represent descendants of the TclHTTPRequestItem base class. You can easily create instances with any of these classes in both the IDE design-time and run-time modes.

The screenshot below demonstrates the HTTP Request editor with two added request items.

You can also add the request items you need in run-time. For your convenience the TclHTTPRequest class provides a set of helper functions any of which can create corresponding HTTP request item:

AddBinaryData
AddTextData
AddSubmitFile
AddFormField

All what you require for making and submitting the HTTP requiest is to put the TclUploader component on the form and run its HTTP Request Editor dialog. In order to make the component use the HTTP request you made, you should set the UseHTTPRequest property to True and assign the URL property to a valid HTTP resource which is assigned to retrieve data submitted from a client.

A sample of how to use the TclUploader for making and submitting the HTTP request in Delphi run-time is shown below:

procedure TMainForm.btnStartClick(Sender: TObject);
begin
   clUploader.URL := edtHost.Text;
   clUploader.HTTPRequest.AddFormField('FirstName', 'John');
   clUploader.HTTPRequest.AddFormField('LastName', 'Doe');
   clUploader.Start();
end;

Scenario Two.

Log-in to the server in order to submit some user information and some local file from a user with corresponding file description.

A sample of this scenario can be found in our Simulate Submit Wizard web page.

The first step of such kinds of wizards are similar to the first scenario, but on the next wizard page some controls implement the file uploading feature can be placed. This forces the client to send the request data as multipart content. So the HTTP request for the second wizard page should look similar to the sample below:

-----------------------------7d325a200432
Content-Disposition: form-data; name="Description"

The file description is placed here.
-----------------------------7d325a200432
Content-Disposition: form-data; name="FileName"; filename="c:\sample.txt"
Content-Type: application/octet-stream

A sample file contents is placed here.
-----------------------------7d325a200432--

In order to make this request you should add two different HTTP request items - TclFormFieldRequestItem and TclSubmitFileRequestItem. On the second editor page you can set-up the HTTP request item details for the selected item. The following screenshot demonstrates the TclSubmitFileRequestItem content details.

The third HTTP request editor page specifies the additional headers which will be sent with the request specified. Within this page you can select some predefined request types, with their additional headers and specify your own custom headers.

Note! Please make sure that if you send the multipart requiest data, the additional headers contain the boundary header field. If you do not specify this field it may cause with some difficulties with parsing the request on the server side.

To walk through these wizard pages from Delphi it is more preferable to use the TclMultiUploader suite component. This component allows you to set-up each Submit Wizard page on the separated uploader item.

The sample below demonstrates how to submit multiple wizard pages with the TclMultiUploader component.

procedure TMainForm.btnStartClick(Sender: TObject);
var
   Item: TclUploadItem;
begin
   if clMultiUploader.IsBusy then
   begin
      ShowMessage('Uploading is in progress');
      Exit;
   end;
   memResult.Lines.Clear();

// Process first step
   Item := clMultiUploader.UploadList[0];
   (Item.HTTPRequest[0] as TclFormFieldRequestItem).FieldValue := edtFirstName.Text;
   (Item.HTTPRequest[1] as TclFormFieldRequestItem).FieldValue := edtLastName.Text;
   (Item.HTTPRequest[2] as TclFormFieldRequestItem).FieldValue := edtAccount.Text;
   Item.Start(False); //synchronous mode

// Process second step
   Item := clMultiUploader.UploadList[1];
   (Item.HTTPRequest[0] as TclFormFieldRequestItem).FieldValue := edtDescription.Text;
   (Item.HTTPRequest[1] as TclSubmitFileRequestItem).FileName := edtFileName.Text;
   Item.Start(True); //asynchronous mode, when the process completed the OnStatusChanged event occur
end;

procedure TMainForm.clMultiUploaderStatusChanged(Sender: TObject;
   Item: TclInternetItem; Status: TclProcessStatus);
begin
   if (Status = psSuccess) and (Item.Index > 0) then
   begin
      ShowMessage('Process completed successfully.');
   end;
end;

On each step you can control the server response via the ServerResponse uploader item property which is also available within the OnGetServerResponse component event.

procedure TMainForm.clMultiUploaderGetServerResponse(Sender: TObject;
   Item: TclInternetItem);
begin
   memResult.Lines.Add(Format('---------- Step %d ------------', [Item.Index + 1]));
   memResult.Lines.AddStrings((Item as TclUploadItem).ServerResponse);
end;

The full source code of this Demo can be obtained with the Clever Internet Suite Demo installation available at Download Clever Internet Suite.

Please try an executable version available at SubmitWizard.zip.

Scenario Three.

Log-in to the server and download the information given by this server.

Finally the third kind of interface beetween a user and a web page is used mostly in getting some authorized data from the web.

On the first wizard page there are usually some controls placed which allow you to enter the user name and password. On the second response page some URL's may be placed to download the data.

To simulate such a scenario all that you need is to place both the TclUploader and TclDownloader components and link them with the TclInternetConnection suite component.

TclUploader should be configured for sending of HTTP form field items like in the First Scenario, and TclDownloader will be used for downloading internet resources via the connection being established with the TclUploader component.

To prevent the internet components from closing the connection you should set the KeepConnection component porperty to True on both the TclUploader and TclDownloader components.

Conclusion.

The TclHTTPRequest structure allows you to combine any common and custom requests for sending them in the future. For this issue there are some additional request items which allow you to send simple text and binary data. You can combine any request structure you require and finally send it while providing an additional useful features such as progress indication, resuming feature and many other.

The demo version of the Internet Components - Clever Internet Suite from which components have been used in this article can be downloaded at Download Clever Internet Suite page.

This code is constantly improved and your comments and suggestions are always welcome.

With best regards,
Sergey Shirokov
Clever Components team.