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