We have created a default page Home.page using the PRADO command line tool. The page is relatively static because it does not containt dynamic content. In this section, we will create an interactive page named Contact.
The purpose of the Contact page is to collect feedback from Web users of our blog system. To achieve this goal, we plan to present users a feedback form to fill with. In this form, we will require users to provide their name, email address and feedback content. After the form is filled and submitted, an email containing the feedback will be sent to the site administrator.
To create the Contact page, we need two files under the pages directory: the page template file Contact.page and the page class file Contact.php.
We first create the template file for the Contact page.
We use template to organize the presentational layout of the feedback form. In the template, we use textboxes to collect user's name, email and feedback. And we use validators to ensure that the user provides all these information before submitting the feedback form. The whole template looks like the following:
Please fill out the following form to let me know your feedback on my blog. Thanks!
<com:TForm> ...textbox and validator for user's name... ...textbox and validators for user's email... ...textbox and validator for user's feedback content... <com:TButton Text="Submit" OnClick="submitButtonClicked" /> </com:TForm>The template looks very similar to a normal HTML page. The main difference is that the template contains a few <com:> tags. Each <com:> tag refers to a control whose properties are being initialized with name-value pairs in the tag. For example, the <com:TButton> refers to the TButton control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the Quickstart Tutorial.
The following template shows the detail about "...textbox and validators for user's email..." in the above.
Three controls are used here:
We now create the page class Contact.php. The reason we need a page class is because we need to respond to the feedback that the user submits.
Notice in the template we have the following line. The template essentially states that when a user clicks on the button, it should call the submitButtonClicked() method. Here OnClick is the name of the user click event, and the method must be defined in the page class.
We thus write down the page class as follows:
The above code is largely self-explanatory. In fact, we just show the event-driven programming scheme. In the event handler submitButtonClicked(), we retrieve the user's input. For example, $this->Name->Text returns the Text property value of the Name control which is the textbox collecting user's name information.
Our newly created Contact can be tested via the URL http://hostname/blog/index.php?page=Contact. If we click on the submit button without entering any information, we will see error messages appearing next to the corresponding textboxes. If we enter all required information, the method mailFeedback() will be invoked.
A further enhancement to this page is to show some confirmation message on the page after the user submits feedback. And possibly, the browser may be redirected to another page if the submission is successful. We will leave these tasks to our readers.