Arya Ratish: Created page with ''''Title of script''': Creating a Java Web Project '''Author: arya ''' '''Keywords: deployment descriptor, web project, context, video tutorial''' {| style="border-spacing:0…'

2013-07-01T11:49:10Z

Created page with ''''Title of script''': Creating a Java Web Project '''Author: arya ''' '''Keywords: deployment descriptor, web project, context, video tutorial''' {| style="border-spacing:0…'

New page

'''Title of script''': Creating a Java Web Project

'''Author: arya '''

'''Keywords: deployment descriptor, web project, context, video tutorial'''

{| style="border-spacing:0;"
| style="border:0.035cm solid #000000;padding:0.097cm;"| <center>'''Visual Cue'''</center>
| style="border:0.035cm solid #000000;padding:0.097cm;"| <center>'''Narration'''</center>

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 1
| style="border:0.035cm solid #000000;padding:0.097cm;"| Welcome to the spoken-tutorial on''' Creating a Java Web Project.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 2
| style="border:0.035cm solid #000000;padding:0.097cm;"| In this tutorial we will learn :

* To create a '''Java''' Web Project
* About Deployment Descriptor
* About '''web.xml '''file

|-
| style="border:0.035cm solid #000000;padding:0.106cm;"| Slide 3

Software Requirements
| style="border:0.035cm solid #000000;padding:0.106cm;"| Here we are using

* Ubuntu Version 12.04
* Netbeans IDE 7.3
* JDK 1.7

|-
| style="border:0.035cm solid #000000;padding:0.106cm;"| Slide 4

Prerequisites
| style="border:0.035cm solid #000000;padding:0.106cm;"| To follow this tutorial you must have knowledge of

* '''Core Java''' using '''Netbeans IDE''' and
* '''HTML'''

If not, for relevant tutorials please visit our website.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Switch to '''Netbeans IDE'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Now, let us see how to create a simple '''Java Web Project '''using''' Netbeans IDE'''.

For this we will switch to''' Netbeans IDE'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''File''' ->''' New Project'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''File '''and then click on '''New Project.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| A '''New Project''' window opens.
| style="border:0.035cm solid #000000;padding:0.097cm;"| A '''New Project '''window opens up.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Select '''Java Web '''among categories and '''Web Application '''among '''Projects.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| From the categories, choose '''Java Web '''and from '''Projects '''choose '''Web Application.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Then click on '''Next.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| A '''New Web Application window '''opens.
| style="border:0.035cm solid #000000;padding:0.097cm;"| '''New Web Application''' '''window '''opens.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Type the '''Project Name '''as '''MyFirstProject.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| We will type the '''Project Name '''as '''MyFirstProject.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| The '''Project Location '''will remain as it is.
| style="border:0.035cm solid #000000;padding:0.097cm;"| Let us keep the default '''Project Location''', which is '''NetbeansProjects.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| The '''Project Folder''' will remain same as it is.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We will keep the '''Project Folder''' also as the default one.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| The rest of the fields will be set their default values.
| style="border:0.035cm solid #000000;padding:0.097cm;"| All the remaining fields will be set at their default values.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Select '''GlassFish server '''as the '''Web Server'''.
| style="border:0.035cm solid #000000;padding:0.097cm;"| Select''' GlassFish server '''as the''' Web Server.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight the '''Context Path.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Note that '''Context Path '''is '''MyFirstProject, '''which is the same name as our '''Project.'''

We will learn about this in detail.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next '''and then click on '''Finish.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next '''and then click on '''Finish.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| In the '''Projects '''tab, a web application named '''MyFirstProject '''has been created.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the arrow pointing towards '''MyFirstProject.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the arrow pointing towards '''MyFirstProject.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Scroll through all the nodes.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We can see several nodes here.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| We are not concerned about all of these nodes right now.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| First, we will learn about what is known as a '''Deployment Descriptor.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 5
| style="border:0.035cm solid #000000;padding:0.097cm;"| A '''web application'''’s '''deployment descriptor '''describes:

* the '''classes''', resources and configuration of the application and
* how the '''web server''' uses them to serve web requests

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 6
| style="border:0.035cm solid #000000;padding:0.097cm;"| * The '''web server''' receives a request for the application.

* It uses''' deployment descriptor '''to map the''' URL''' of the request.

* It maps the''' URL '''to the code that has to handle the request.

The '''deployment descriptor''' is a file named '''web.xml'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Scroll through the nodes.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We are not able to find the '''web.xml '''file from the nodes available here.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Go to '''New''' -> '''File'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| To locate it, at the top left of the '''IDE''', click on '''File''', and then on '''New File'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Web'''.
| style="border:0.035cm solid #000000;padding:0.097cm;"| From the '''Categories''', select '''Web.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Standard Deployment Descriptor(web.xml).'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| From the '''File Types, '''select '''Standard Deployment Descriptor(web.xml).'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Next.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Then click on '''Next.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Finish.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Finish.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the '''Files''' tab on the left side of the''' IDE'''.
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the '''Files''' tab on the left side of the '''IDE.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight '''Web Pages,''' '''WEB-INF '''and '''web.xml.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Note that '''web.xml '''is visible under the '''WEB-INF '''folder of the '''Web Pages''' node.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the '''Source '''tab at the top.
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on the '''Source '''tab at the top of the '''Editor''' window.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight the '''web.xml''' file.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We can see the source code now.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight the '''web.xml''' header.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We have an '''xml''' header here.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight '''web-app.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| We also have a '''web-app '''node.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| Now, we shall try running the web-application.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Right click on '''MyFirstProject.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| To do so, right click on '''MyFirstProject.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Clean and Build.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Click on '''Clean and Build.'''

This will delete any previously compiled files and other build outputs.

It will also recompile the application.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Right click on''' MyFirstProject '''and click on '''Run.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Again, right click on '''MyFirstProject '''and then click on '''Run.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Hover your mouse over the '''browser window''' and highlight '''HelloWorld!'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| We see that a '''browser '''window opens up and displays the message '''Hello World!'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| This is because when we run the '''project''', the '''web application '''renders the page shown.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight the '''URL.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Now, let’s have a look at the''' URL '''that rendered the page.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| It is '''localhost '''''colon'' '''8080''' ''slash'' '''MyFirstProject.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| '''Switch to Netbeans and show index.jsp.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| It is the '''index.jsp '''that was rendered.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Hover your mouse over the '''browser window.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| So when we run '''MyFirstProject '''by default we get a '''JSP '''page that says '''HelloWorld!'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Switch to '''Netbeans IDE.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Let us come back to our '''IDE'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Highlight index.jsp.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We can see that under the '''WEB-INF '''folder there is '''index '''''dot '''''jsp.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Double click on '''index.jsp'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Double click on '''index.jsp'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Hover your mouse over the source code.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We can see the source code here.

It is a simple '''JSP page''' with '''HTML tags '''only.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| The server provides '''index.jsp '''by default when we run the web application.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| Recall that we had come across something called '''ContextPath''' earlier.

We had set the '''ContextPath''' as '''MyFirstProject''' itself.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Type '''localhost:8080'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Now, in the''' URL '''type '''localhost''''' colon '''''8080.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Hover your mouse over the home page.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We see that the home page of '''Glassfish server '''is displayed.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| This '''Glassfish server''' instance may have many applications running on it.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| To access a particular application type that application name in the '''URL'''.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"|
| style="border:0.035cm solid #000000;padding:0.097cm;"| So,we must type the specific application that has been deployed on that instance.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Type '''MyFirstProject '''in the '''URL.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| So we will type '''MyFirstProject '''here.

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Press '''Enter.'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Press '''Enter.'''

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Show the '''index.jsp '''page.
| style="border:0.035cm solid #000000;padding:0.097cm;"| We can see that the '''index.jsp '''gets displayed on the browser.

<nowiki><</nowiki>PAUSE>

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 6

'''Summary'''
| style="border:0.035cm solid #000000;padding:0.097cm;"| Let us summarize.

In this tutorial we have learnt

* To create a simple '''Java Web''' '''project'''
* Execute the '''web''' project
* and about the '''web.xml''' file

|-
| style="border:0.035cm solid #000000;padding:0.106cm;"| '''Slide 6'''

'''About slide'''
| style="border:0.035cm solid #000000;padding:0.106cm;"| * Watch the video available at the following link
* It summarizes the Spoken Tutorial project

* If you do not have good bandwidth, you can download and watch it

|-
| style="border:0.035cm solid #000000;padding:0.106cm;"| '''Slide 7'''

'''About slide'''
| style="border:0.035cm solid #000000;padding:0.106cm;"| The Spoken Tutorial Project Team

* Conducts workshops using spoken tutorials

* Gives certificates for those who pass an online test

* For more details, please write to contact at spoken hyphen tutorial dot org

|-
| style="border:0.035cm solid #000000;padding:0.097cm;"| Slide 8

Acknowledgement
| style="border:0.035cm solid #000000;padding:0.106cm;"| 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

* http://spoken-tutorial.org/NMEICT- Intro

|-
| style="border:0.035cm solid #000000;padding:0.106cm;"| '''Slide 9'''

'''Contributor slide'''
| style="border:0.035cm solid #000000;padding:0.106cm;"| The '''Library Management System''' has been contributed by a leading software '''MNC''', through their '''Corporate Social Responsibility''' programme.

They have also validated the content for this spoken tutorial.

This is Arya Ratish from IIT Bombay signing off.

Thank you for joining.

|}

Java-Business-Application/C2/Creating-a-Java-web-project/English - Revision history

Arya Ratish: Created page with ''''Title of script''': Creating a Java Web Project '''Author: arya ''' '''Keywords: deployment descriptor, web project, context, video tutorial''' {| style="border-spacing:0…'