Netbeans/C2/Developing-a-Sample-Web-Application/Gujarati
From Script | Spoken-Tutorial
Revision as of 14:25, 6 June 2014 by Jyotisolanki (Talk | contribs)
Time | Narration |
00.01 | નમસ્તે મિત્રો |
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 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 | સ્ક્રીન પર દર્શાવેલ લીંક પર ઉપલબ્ધ વિડીયો નિહાળો. |
14.51 | તે સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટનો સારાંશ આપે છે. |
14.54 | જો તમારી પાસે સારી બેન્ડવિડ્થ ન હોય તો, તમે વિડીયો ડાઉનલોડ કરીને જોઈ શકો છો. |
14.59 | સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટીમ સ્પોકન ટ્યુટોરીયલોનાં ઉપયોગથી વર્કશોપોનું આયોજન કરે છે. |
15.05 | જેઓ ઓનલાઈન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો આપે છે. |
15.09 | વધુ વિગતો માટે contact@spoken-tutorial.org પર લખો |
15.16 | સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટોક ટુ અ ટીચર પ્રોજેક્ટનો એક ભાગ છે |
15.21 | જેને આઈસીટી, એમએચઆરડી, ભારત સરકાર મારફતે શિક્ષણ પર નેશનલ મિશન દ્વારા આધાર અપાયેલ છે |
15.28 | આ મિશન પરની વધુ માહિતી spoken-tutorial.org/NMEICT-Intro પર ઉપલબ્ધ છે |
15.40 | આ ટ્યુટોરીયલ માટે યોગદાન IT for Change દ્વારા અપાયું છે |
15.43 | અમને જોડાવાબદ્દલ આભાર.
આઈઆઈટી બોમ્બે તરફથી હું, જ્યોતી સોલંકી વિદાય લઉં છું. |