Developing a Controller Component : Part-1

Designing Controller Components:

• In this, it describes the design aspects of developing a controller component. A controller is a component that accepts input from a user and performs the specific operation based on the input.
• In general, input can be data, actions or gestures. In web applications, input comes in the form of an HTTP request.

Types of Controller Component:

There are many types of the controller components, but for the business applications the following are the most important:

• Process input from a user

Input in an HTTP request is provided by the web forms (or HTML forms). Such forms do allow the user to enter text data, select radio or checkbox buttons, drop-down lists, and so on. Web forms use a submit button to send data to the web server.

• Support screen navigation

At a rudimentary level, hyperlinks in web pages are a type of screen navigation. Some navigation mechanisms might require data (such as using a drop down list) to select the next screen to which to navigate.

• Prepare view data for view components

Some controller might only prepare business data to be presented in a view. Reports are good example of this.

Creating an HTML Form:

In this, it describes how to create a simple HTML form.

Add a New League Web Form:

• The figure given below does show the web form for the AddLeague component. In this, you see how to construct the HTML tags that implement the structure of this form.
• The web browser only renders the form. The web browser does not process a data in the form. The submit button in aform sends the form data to the web container in anHTTP request.

Note: Using JavaScript technology you can perform some dynamic form processing on the web browser, but, ultimately, most business applications need to store the data on the business’s servers.

 

 

The form Tag:

The following is the partial structure of an HTML form:

<form action = ‘URL TO CONTROLLER’ method = ‘GET or POST’>

<! –PUT FORM COMPONENT TAGSHERE–>

</form>

For Example:

<form action = ‘addLeague’ method = ‘POST’>

Year: [textfield tag]

Season: [drop down list tag]

Title: [textfield tag]

[Submit button tag]

</form>

• The form start tag and end tag wrap around the GUI componenttags (and other HTML content) that are a part of this form.
• The form tag has two important attributes.The action attribute specifies the relative URL for the action to invoke on the web container.
• The method attribute does specifie the type of HTTP method (GET or POST) that is to be used in sending the HTTP request.
• The data from the form field is also sent in the HTTP request to be processed by the controller mapped to the URL specified in the action attribute.
• A single page might contain many forms. However, you cannot nestform tags inside of each other.It is possible to have a form in a web page that has no external presence and no submit button. You must use JavaScript code to submit such hidden forms.

Textfield Component:

• The code given below shows thr HTML content for this component. The input tag is used to create a textfield component, but you must specify type = ‘text’ to get a textfield component.
• The name attribute of the input tag specifies the field name. The field name and the value entered in the textfield are paired together when the form is submitted to the web container.
• The figure given below shows how a textfield component looks in Netscape:

This form does allows you to create a new Soccer League.

Year:

1. <p>
2. This form does allow you to create a new Soccer League.
3. </p>
4. <form action = ‘addLeague.do’ method = ‘POST’>
5. Year:<input type = ‘text’ name = ‘year’ /><br/><br/>

Drop down List Component:

• The select tag is used to create a drop down list component. Similar to an input tag, the select tag uses the name attribute to specify the name of the form field.
• One or more option tags must be embedded in the select tag.Each option tag provides a single element in the drop down list.
• The data sent in the HTTP request on form submission is based on the value attribute of the option tag. The text between start and end option tags is the content that is displayed in the browser drop down list.
• For example, notice that the first option has the value UNKNOWN, but the display text is “select…”
• The figure given below shows how a drop down list component looks in Netscape:

Season: Select… Spring Summer Fall Winter

1. Season:<select name = ‘season’>
2. <option value = ‘UNKNOWN’>Select…</option>
3. <option value = ‘Spring’>Spring</option>
4. <option value = ‘Summer’>Summer</option>
5. <option value = ‘Fall’>Fall</option>
6. <option value = ‘Winter’>Winter</option>
7. </select>

Submit Button:

• The code given below shows the HTML content for this component. The value attribute of the input tag become the text rendered in the button.
• When a submit button is clicked by the user, the web browser is responsible for generating an HTTP request to the web container.
• By default, no data is sent in the request for the submit button component.

1. Title:<input type = ‘text’ name = ‘title’ /><br/><br/>
2. <input type = ‘submit’ value = ‘Add League’ /><br/><br/>
3. </form>

Complete HTML form:

Now that you have been seen all of the pieces of the Add a New League form, review the whole page. Code given below shows the HTML content.

1. <html>
2. <head>
3. <title>Duke’s Soccer League : Add a New League</title>
4. </head>
5. <body bgcolor = ‘white’>
6. <!– Page Heading –>
7. <table border=’1′ cellpadding = ‘5’ cellspacing = ‘0’ width = ‘400’>
8. <tr bgcolor = ‘#CCCCFF’ align = ‘center’ valign = ‘center’ height = ’20’>
9. <td><h3>Duke’s Soccer League : Add a New League</h3></td>
10. </tr>
11. </table>
12. <p>This form allows you to create a new Soccer League.</p>
13. <form action = ‘addLeague.do’ method = ‘POST’>
14. Year: <input type = ‘text’ name = ‘year’ /><br/><br/>
15. Season: <select name = ‘season’>
16. <option value = ‘UNKNOWN’>Select…</option>
17. <option value = ‘Spring’>Spring</option>
18. <option value = ‘Summer’>Summer</option>
19. <option value = ‘Fall’>Fall</option>
20. <option value = ‘Winter’>Winter</option>
21. </select>
22. Title: <input type = ‘text’ name = ‘title’ /><br/><br/>
23. <input type = ‘submit’ value = ‘Add League’ /><br/><br/>
24. </form>
25. </body>
26. </html>

How The Form Data Is Sent in an HTTP Request:

• The data that the user does enter in the HTML form must be sent to the server when the submit button is selected.
• The web browser is responsible for creating an HTTP request using the URL in the action attribute of the form tag.
• The browser also collects all of the data in the form fields and packages it into the HTTP request.

Form Data in the HTTP Request:

HTTP does include a specification for data transmission used to send HTML form data from the web browser to the web server.

Syntax:

fieldname = fieldValue&fieldname1 = fieldValue1&…

Example:

username = sam&password = Vh2d

season = Winter&year = 2004&title = Westminister+Indoor+Soccer

HTTP GET and POST Methods:

The HTTP GET method is used when:

• The processing of a request is idempotent.

This means that the request does not have side effects on the server.

• The amount of form data is small.
• You do want to allow the request to be bookmarked.

The HTTP POST method is used when:

• The processing of a request does change the state of the server, such as storing data in a database.
• The amount of form data is large.
• The content of the data should not be visible in the URL (for example, passwords).

For more reading about technology news in singapore or from all over the world in all aspect from seo to online marketing do view more about other pages.