Developing a Sample Web Application – English


Hiii everybody Welcome to the tutorial on Introduction to Developing Web Applications on the Netbeans IDE. We assume that you have the basic working knowledge of netbeans if not please visit the spoken tutorial website for relevant tutorials on Netbeans Having viewed the first tutorial you would already be familiar with the installation and interface of Netbeans. The previous tutorial also teaches you how to create a new project. For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 This tutorial will take you through the basics of using Netbeans to develop web applications. we will see setting up a web application project creating and editing web applications source files creating a java package and a java source file Generating the Getter and Setter methods Editing the default JavaServer Pages file Creating a JavaServer pages file and finally running our web application project To follow this tutorial, you will need the Netbeans IDE The Java Development Kit (JDK) version 6 The GlassFish Server Open Source Edition All the above can be downloaded in a single bundle from the link shown on the screen This tutorial demonstrates how to create a simple web application, Deploy it to a server, and View its presentation in a browser. The application employes (JSP) JavaServer Pages to ask you to input your name It then uses JavaBeans component to persist the name during the HTTP session, and then retrieves the output on a second JSP page. Let us now move to Netbeans and create our web application project From the File menu choose New Project Under Categories, select Java Web. Under Projects, select Web Application , and click Next. Give your project a name. I will name my project as HelloWeb Specify the Project Location to any directory on your computer. Click Next. The Server and Settings panel opens. Select the version of Java you want to use with your application. And Select the server, you want to deploy your application to. Click Next. In the Frameworks panel, click Finish to create the project. The IDE creates the HelloWeb project folder. This folder contains all of your sources and project metadata. The Welcome page, ‘index.jsp opens in the Source Editor in the main window. You can view the project’s file structure in the Files window on the left here and it’s logical structure in the Projects Window. Creating and editing source files is the most important function that the IDE serves. Now in the Projects window, expand the Source Packages node. Note that the Source Packages node contains only an empty default package node. Right-click on the Source Packages and choose New>Java Class. Give your class a name. I will name the class as NameHandler and in the Package combobox let me type org.mypackage.hello And Click Finish. The NameHandler.java file opens in the Source Editor. Now lets us declare a String variable directly below the class declaration I will delare a string variable String name and I will also add a constructor public NameHandler to the class Now let me also add name=null; within the constructor. Let us next generate the Getter and Setter Methods Right-click the name field in the Source Editor choose Refactor and Encapsulate Fields from the contextual menu Refactoring is a disciplined technique for improving the structure of existing code without changing the observable behaviour. In short, you can change the structure of the code without changing the behaviour. With Refactoring, you can easily move fields, methods or classes around, without breaking things. Lets move back to the IDE. The Encapsulate Fields dialog opens, listing the name field. Notice that the Fields visibility is set to private, and Accessors visibility is set to public, by default Indicating that the access modifier for the class variables wil be specified as private, Whereas the getter and setter methods will be generated with public modifiers respectively. Click on Refactor. The Getter and Setter methods are generated for the name field. The modifier for the class variable is set to private whereas the getter and setter methods are generated with public modifier. Your java class should finally look like this Let us next Edit the Default JavaServer Pages File Let us Refocus the index.jsp file by clicking its tab displayed at the top of the Source Editor. Now let us open the Palette manager by going to the Tools menu>Palette and click on HTML/JSP code clips The Palatte manager opens. In the palette manager expand the HTML forms options Select the Form items. Drag it and drop it to the points after the h1 tags in your Source Editor The Insert form dialog box opens . Let us Specify the values as been shown on the screen: The Action as response.jsp The Method as GET And lets us give our form a name as Name input form. Click OK. An HTML form is added to the index.jsp file. Now from the Palette manager select a Text Input item drag it and drop it to a point just before the closing form tags In the Insert text input dialog box specify the Name as name Leave the Type at text And Click on OK. A HTML input tag is now added between the form tags. Let us delete the empty value attribute from the input tag. Now from the palette select the Button item. Drag it and drop it to the point before the closing form tag Specify the Label as OK The Type as submit And Click on OK again An HTML button is now added to a form tags. Infront of the first input tag let us enter the text Enter your name And let us change the default text between the h1 tags We will change the text to Entry form Now Right click, let me close the palette manager for now. Right-click within your Source Editor Select the Format option to tidy the format of your code. Your index.jsp file should now look like this. Let us next Create a JavaServer Pages File In the Projects window, right-click on the HelloWeb project node, choose New>JSP. The New JSP File wizard opens. Name the file as response, and click on Finish. Notice that a response.jsp file node displays in the Projects window beneath the index.jsp file , And the new file opens in the Source Editor. Open the Palette manager again Now expand the JSP option. Select a Use Bean item, drag it and drop it to a point just below the body The Insert Use Bean dialog opens. Specify the values as The ID as mybean The Class as org.mypackage.hello.NameHandler Set the Scope as session And click on OK. Notice that a jsp:useBean tag is added beneath the body tag. JavaBeans are reusable software components for Java. They are used to encapsulate many objects into a single object So that they can be passed around as a single bean object instead of multiple individual objects. Now from the Palette manager, Select a setbean property item, drag it and drop it to a point just before the h1 tags And click on OK. Here in the jsp:setProperty tag that appears, delete the empty value attribute. And set the name attribute to mybean and the Property to name Now in between the h1 tags let us change the text to Hello comma space and a exclamation mark Now from the Palette manager Select a Get Bean property item drag it and drop it after the Hello text in between the h1 tags In the Get Bean Property item Set the Bean Name to mybean And the Property Name to name Click on OK. Notice that jsp:getProperty tag is now added between the h1 tags. Right-click within the Source Editor again, click on Format to tidy the format of your code if required The next step is to run our Web Application Project Let me close the palette manager In the Projects window, right-click the HelloWeb project node and choose the Run option You can also click the Run option from the toolbar or press F6 key on your keyboard to run your Project. I will select the button on the toolbar to run my Project When you run a Web application the IDE builds and compiles the application code Launches the server and deploys the application to the server and finally displays the application in a browser window To view this process you can open the output window from the Window menu and select the Output option You can see that your application has been built successfully The index.jsp page opens in your default browser Let me run the project again Here it is, it opens in your default browser Note that the browser window may sometime open before the IDE displays the server output Now let us Enter the name in the text box in the browser For eg Ubuntu and click on OK. The response.jsp page displays, providing you with a simple greeting. Now to the assignment part As an extension to the web application project, insert two more text fields that is totally three input text fields in your application Use the JavaBeans Component to set the bean property and View its presentation in the browser And finally Retrieve the output on the second JSP page I have already constructed my assignment Let me open my assignment and run it in the IDE I am presented with 3 input text fields Let me enter the details and click on Ok I should be presented with an output like this Watch the video available at the link shown on the screen. It summarizes the Spoken Tutorial project. If you do not have good bandwidth, you can download and watch the videos. The Spoken Tutorial project team conduct workshops using Spoken Tutorials. Gives certificates to those pass an online test. For more details please write to [email protected] Spoken Tutorial Project is a part of the Talk to a Teacher Project It is Supported by the National Mission on education through ICT, MHRD, Government of India More information on this mission is available at spoken-tutorial.org/NMEICT-Intro This tutorial has been contributed by IT for Change Thank you for joining us.

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *