Prerequisites
- You should have install java(It requires to have JVM 6 or higher version ) in your PC and set path variable correctly (JAVA_HOME, PATH)
- You should have install Eclipse Java EE IDE in your PC
- You should have Apache Tomcat in your machine and it should be added to Run Time Environments in Eclipse
As first step lets create simple Dynamic Web Project using Eclipse. Go to File->New->New Dynamic Web Project. Give prefered name to the project (Here I will user project name as SharedResourceWeb as Figure 1) Then click finish.
 |
| Figure 1: Provide project name |
Then click next and next interface also click next and last interface tick box "Generate Web.xml for deployment descriptor". Then Click Finish button.
Then right click on WEBContent folder under your project node and go to New->HTML File then provide file name as "index.html". Then add some content to index.html. I will add following content
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
</head>
<body>
My Test web project
</body>
</html>
Then lets check all the things work correctly by deploy this web app into tomcat. First right click project you create and go to Export->WAR file the next interface provide WAR file name and location you need to create file. I will use "webapps" folder inside the tomcat folder stucture as WAR file creation location. Then select appropriate target run time. If you have the tomcat v6 or v7 select correct run time. I'm using tomcat v7 (Figure 3)
Then click on Finish you can see generated WAR file inside the selected location. If you not generated inside the webapps folder in tomcat folder structure copy WAR file in to
"webapps" folder.
Then start the tomcat server and you will be able to access your web project according to following URL format.
http://localhost:[tomcat running port]/[ProjectName]/
for my project it's
http://localhost:8888/SharedResourceWeb/
You can see interface similar to figure 4.
Then go to conf folder inside the tomcat directory and open server.xml file. Then add following line in between <HOST></HOST>.
<Context docBase="/SharedResource" path="/SharedResource" reloadable="true"/>
Then go to webapps folder and create SharedResource folder and create anther folder as css then add new styles.css file with following content.
b {
font-size : 16 px ;
}
.div1 {
background-color: yellow;
font-size: large;
}
.div2 {
background-color: lime;
font-size: x-large;
}
i {
color : red ;
}
Then restart the tomcat server and try to access the css file through following link.
http://localhost:[tomcat running port]/SharedResource/css/styles.css
for my project link will be http://localhost:8888/SharedResource/css/styles.css
Then lets add some content and styles in to index.html. I will add following content in to index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
<link rel="stylesheet" href="http://localhost:8888/SharedResource/css/styles.css">
</head>
<body>
<b>This is Title</b>
<div class="div1">
<p>This is first paragraph in the web page</p>
<p>This is second paragraph in the web page</p>
</div>
<div class="div2">
<p class="p3">This is last paragraph in the web page</p>
<i>EXIT</i>
</div>
</body>
</html>
Then create the new war file and placed it inside the webapps folder. Then restart tomcat after that refresh the web page (http://localhost:8888/SharedResourceWeb/) you created. It will show the content with styles. You can see similar page to Figure 5.
This kind of shared folder will help to change the styles of project without deploying project.
 |
| Figure 2 : Folder structure of new project |
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
</head>
<body>
My Test web project
</body>
</html>
Then lets check all the things work correctly by deploy this web app into tomcat. First right click project you create and go to Export->WAR file the next interface provide WAR file name and location you need to create file. I will use "webapps" folder inside the tomcat folder stucture as WAR file creation location. Then select appropriate target run time. If you have the tomcat v6 or v7 select correct run time. I'm using tomcat v7 (Figure 3)
 |
| Figure 3: Create WAR file using Eclipse |
"webapps" folder.
Then start the tomcat server and you will be able to access your web project according to following URL format.
http://localhost:[tomcat running port]/[ProjectName]/
for my project it's
http://localhost:8888/SharedResourceWeb/
You can see interface similar to figure 4.
 |
| Figure 4: Project I deployed to tomcat |
Then go to conf folder inside the tomcat directory and open server.xml file. Then add following line in between <HOST></HOST>.
<Context docBase="/SharedResource" path="/SharedResource" reloadable="true"/>
Then go to webapps folder and create SharedResource folder and create anther folder as css then add new styles.css file with following content.
b {
font-size : 16 px ;
}
.div1 {
background-color: yellow;
font-size: large;
}
.div2 {
background-color: lime;
font-size: x-large;
}
i {
color : red ;
}
Then restart the tomcat server and try to access the css file through following link.
http://localhost:[tomcat running port]/SharedResource/css/styles.css
for my project link will be http://localhost:8888/SharedResource/css/styles.css
Then lets add some content and styles in to index.html. I will add following content in to index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
<link rel="stylesheet" href="http://localhost:8888/SharedResource/css/styles.css">
</head>
<body>
<b>This is Title</b>
<div class="div1">
<p>This is first paragraph in the web page</p>
<p>This is second paragraph in the web page</p>
</div>
<div class="div2">
<p class="p3">This is last paragraph in the web page</p>
<i>EXIT</i>
</div>
</body>
</html>
Then create the new war file and placed it inside the webapps folder. Then restart tomcat after that refresh the web page (http://localhost:8888/SharedResourceWeb/) you created. It will show the content with styles. You can see similar page to Figure 5.
 |
| Figure 5: Web page with Styles |
This kind of shared folder will help to change the styles of project without deploying project.
No comments:
Post a Comment