Difference between revisions of "Netbeans/C2/Developing-a-Sample-Web-Application/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 14: Line 14:
 
|-
 
|-
 
|00:08
 
|00:08
−
|We assume that you have the basic working knowledge of netbeans.
+
|We assume that you have the basic working knowledge of '''Netbeans'''.
  
 
|-
 
|-
Line 26: Line 26:
 
|-
 
|-
 
|00:22
 
|00:22
−
|with the installation and interface of Netbeans.  
+
|with the installation and '''interface''' of Netbeans.  
  
 
|-
 
|-
Line 34: Line 34:
 
|-
 
|-
 
| 00:29
 
| 00:29
−
|For this demonstration, I am using the '''Linux Operating System Ubuntu v11.04''' and '''Netbeans IDE v7.1.1'''.  
+
|For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.1.1'''.  
  
 
|-
 
|-
Line 46: Line 46:
 
|-
 
|-
 
| 00:46
 
| 00:46
−
|* Setting up a web-application project
+
|* Setting up a '''web-application project'''
  
 
|-
 
|-
Line 54: Line 54:
 
|-
 
|-
 
|00:52
 
|00:52
−
|* Creating a java package and a java source file  
+
|* Creating a '''java package''' and a '''java source file'''
  
 
|-
 
|-
Line 86: Line 86:
 
|-
 
|-
 
|01:20
 
|01:20
−
|All the above can be downloaded in a single bundle from the link shown on the screen.
+
|All the above can be downloaded in a single bundle from the '''link''' shown on the '''screen'''.
  
 
|-
 
|-
Line 94: Line 94:
 
|-
 
|-
 
|01:30
 
|01:30
−
|deploy it to a server,  
+
|deploy it to a '''server''',  
  
 
|-
 
|-
Line 102: Line 102:
 
|-
 
|-
 
|01:35
 
|01:35
−
|The application employes (JSP)  '''Java Server Pages''', to ask you, to input your name.
+
|The application employs (JSP)  '''Java Server Pages''', to ask you, to input your name.
  
 
|-
 
|-
Line 150: Line 150:
 
|-
 
|-
 
|02:29
 
|02:29
−
|And select the server, you want to deploy your application to.
+
|And, select the server, you want to deploy your application to.
  
 
|-
 
|-
Line 178: Line 178:
 
|-
 
|-
 
| 02:57
 
| 02:57
−
| You can view the project's file structure in the '''Files''' window on the left here  
+
| You can view the project's file structure in the '''Files''' window on the left, here,
  
 
|-
 
|-
Line 194: Line 194:
 
|-
 
|-
 
|03:20
 
|03:20
−
|Note that the Source Packages node contains only  an empty default package node.  
+
|Note that the '''Source Packages''' node contains only  an empty default package node.  
  
 
|-
 
|-
Line 206: Line 206:
 
|-
 
|-
 
| 03:40
 
| 03:40
−
|and in the '''Package''' combo-box, let me type: '''org.mypackage.hello'''.
+
|and in the '''Package''' combo-box, let me type: "org.mypackage.hello"
  
 
|-
 
|-
 
| 03:54
 
| 03:54
−
|And click '''Finish.'''  
+
|and click '''Finish.'''  
  
 
|-
 
|-
Line 226: Line 226:
 
|-
 
|-
 
| 04:12
 
| 04:12
−
|  I will also add a '''constructor''' '''public NameHandler''' to the '''class'''.
+
|  I will also add a '''constructor''' '''public NameHandler()''' to the '''class'''.
  
 
|-
 
|-
Line 234: Line 234:
 
|-
 
|-
 
| 04:30
 
| 04:30
−
|Let us next generate the '''Getter and Setter Methods'''.  
+
|Let us next generate the '''Getter''' and '''Setter Method'''s.  
  
 
|-
 
|-
Line 242: Line 242:
 
|-
 
|-
 
| 04:46
 
| 04:46
−
|'''Refactoring''' is a disciplined technique for improving the structure of existing code, without changing the observable behavior.  
+
|'''Refactoring''' is a disciplined technique for improving the structure of the existing code, without changing the observable behavior.  
  
 
|-
 
|-
Line 262: Line 262:
 
|-
 
|-
 
| 05:16
 
| 05:16
−
| Notice that the '''Fields Visibility''' is  set to '''private'''
+
| Notice that the '''Fields Visibility''' is  set to "private"
  
 
|-
 
|-
 
| 05:20
 
| 05:20
−
|and '''Accessors visibility''' is set to '''public,''' by default,  
+
|and the '''Accessors Visibility''' is set to "public", by default,  
  
 
|-
 
|-
 
| 05:24
 
| 05:24
−
| indicating that the '''access modifier''' for the class variables will be specified as '''private'''  
+
| indicating that the '''access modifier''' for the '''class variable'''s will be specified as '''private'''  
 
|-
 
|-
 
| 05:30
 
| 05:30
Line 285: Line 285:
 
|-
 
|-
 
| 05:46
 
| 05:46
−
|The modifier for the class variable is set to '''private''' whereas the  '''getter''' and '''setter''' methods are generated with public modifier.  
+
|The modifier for the class variable is set to "private" whereas the  '''getter''' and '''setter''' methods are generated with "public" '''modifier'''.  
  
 
|-
 
|-
Line 297: Line 297:
 
|-
 
|-
 
| 06:04
 
| 06:04
−
|Let us refocus the '''index.jsp''' file by clicking its tab, displayed at the top of the Source editor.  
+
|Let us refocus the 'index.jsp' file by clicking its tab, displayed at the top of the '''Source editor'''.  
  
 
|-
 
|-
Line 321: Line 321:
 
|-
 
|-
 
| 06:42
 
| 06:42
−
|The '''Insert Form''' dialog-box opens .  
+
|The '''Insert Form''' dialog-box opens.  
  
 
|-
 
|-
Line 329: Line 329:
 
|-
 
|-
 
| 06:49
 
| 06:49
−
|The '''Action''' as  '''response.jsp'''
+
|the '''Action''' as  "response.jsp",
  
 
|-
 
|-
 
| 06:54
 
| 06:54
−
|The '''Method''' as '''GET '''.
+
|the '''Method''' as "GET".  
  
 
|-
 
|-
 
| 06:56
 
| 06:56
−
|And, let's  give our '''form''' a name as "Name input form".
+
|And, let's  give our '''form''' a name as "Name Input Form".
  
 
|-
 
|-
Line 345: Line 345:
 
|-
 
|-
 
| 07:07
 
| 07:07
−
|An HTML '''form''' is added to the '''index.jsp file.'''
+
|An HTML '''form''' is added to the 'index.jsp' file.  
  
 
|-
 
|-
Line 381: Line 381:
 
|-
 
|-
 
| 07:58
 
| 07:58
−
|Specify the '''Label''' as '''OK''',  
+
|Specify the '''Label''' as "OK",  
  
 
|-
 
|-
 
| 08:00
 
| 08:00
−
|the '''Type''' as '''submit''',
+
|the '''Type''' as "submit"
  
 
|-
 
|-

Revision as of 13:09, 6 June 2016

Time Narration
00:01 Hi everybody.
00:02 Welcome to the tutorial on introduction to Developing Web Applications on the Netbeans IDE.
00:08 We assume that you have the basic working knowledge of Netbeans.
00:12 If not, please visit the Spoken Tutorial website for relevant tutorials on Netbeans.
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 version 11.04 and Netbeans IDE version 7.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 Java Server Pages file
01:02 * Creating a JavaServer pages file and
01:05 * 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 employs (JSP) Java Server 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 combo-box, 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, let's declare a String variable directly below the class declaration.
04:07 I will declare 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 the existing code, without changing the observable behavior.
04:56 In short, you can change the structure of the code without changing the behavior.
05:01 With Refactoring, you can easily move fields, methods or classes around, without breaking things.
05:08 Let's move back to the IDE.
05:11 The Encapsulate Fields dialog-box opens, listing the name field.
05:16 Notice that the Fields Visibility is set to "private"
05:20 and the Accessors Visibility is set to "public", by default,
05:24 indicating that the access modifier for the class variables will 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 Palette manager opens.
06:26 In the palette manager, expand the HTML Forms option.
06:31 Select the Form item.
06:34 Drag it and drop it to a point after the h1 tags, in your Source Editor.
06:42 The Insert Form dialog-box opens.
06:45 Let us specify the values as being shown on the screen:
06:49 the Action as "response.jsp",
06:54 the Method as "GET".
06:56 And, let's 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 tag.
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 Set Bean 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 e.g. 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: * conducts workshops using Spoken Tutorials.
15:05 * Gives certificates to those who 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Developing-a-Sample-Web-Application/English-timed&oldid=26932"