{"id":846,"date":"2020-06-11T14:26:48","date_gmt":"2020-06-11T14:26:48","guid":{"rendered":"http:\/\/techforhumans.site\/?p=846"},"modified":"2023-12-23T16:44:40","modified_gmt":"2023-12-23T16:44:40","slug":"create-a-web-project-in-eclipse","status":"publish","type":"post","link":"https:\/\/techforhumans.site\/create-a-web-project-in-eclipse\/","title":{"rendered":"Create a Web project in Eclipse"},"content":{"rendered":"\n

In Eclipse web projects can be created easily. We will see how to create a simple web project having a JSP file and an HTML file. We will also see how to setup Tomcat server to run our web project.<\/p>\n\n\n\n

Let us look at steps to create Web project :-<\/h4>\n\n\n\n

Step 1 :-<\/strong> Click on ‘File’ in tool bar then select ‘New’ and then click on ‘Other…’<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 2 :- <\/strong>Under ‘web’ select ‘Dynamic Web Project’<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 3 :-<\/strong> A popup will open to enter details of web project. Enter the name of project and then click on ‘New Runtime…’ to setup Tomcat server.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 4 :-<\/strong> A Server Runtime Environment list will be opened. Select ‘Apache Tomcat v8.0’ and click on Next button.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 5 :-<\/strong> In the next window click on ‘Download and Install…’ to download tomcat server.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 6 :- <\/strong>Accept the terms of license agreement and click on Finish.<\/p>\n\n\n\n

Step 7 :-<\/strong> Now it will ask for the installation folder of tomcat. You can select any folder to download tomcat server. We will download in our workspace itself.<\/p>\n\n\n\n

Step 8 :-<\/strong> The download will start in the background. After the download is completed click on Finish.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 9 :- <\/strong>In the project details popup, under ‘Target runtime’, ‘Apache Tomcat v8.0’ should appear. Now select ‘Next’ button.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 10 :-<\/strong> Click on ‘Next’ button again.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 11 :- <\/strong>Now tick the ‘Generate web.xml deployment descriptor’ and click on ‘Finish’ button.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 12 :-<\/strong> A popup will open to change the perspective to Java EE. Select ‘Open Perspective’.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 13 :-<\/strong> In the ‘Project Explorer’ on the left, the project structure will look as below.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 14 :- <\/strong>Now right click on WebContent folder of project and then click on ‘New’ and then ‘JSP File’.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 15 :-<\/strong> A popup will open. Give the name of JSP file as index.jsp and click on ‘Next’.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 16 :-<\/strong> Now click ‘Finish’ button. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Step 17 :-<\/strong> Write the below code in index.jsp file.<\/p>\n\n\n

\n<%@ page language="java" contentType="text\/html; charset=ISO-8859-1"\n    pageEncoding="ISO-8859-1"%>\n<!DOCTYPE html>\n<html>\n<head>\n<meta charset="ISO-8859-1">\n<title>Insert title here<\/title>\n<\/head>\n<body>\n <a href="helloworld.html">Click here to see magic<\/a>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Step 18 :-<\/strong> Again right click on the WebContent folder and select ‘New’ and then select ‘HTML File’.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 19 :-<\/strong> In the popup opened enter html file name as ‘helloworld.html’ and click on Finish button.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 20 :-<\/strong> Type below code in ‘helloworld.html’ file.<\/p>\n\n\n
\n<!DOCTYPE html>\n<html>\n<head>\n<meta charset="ISO-8859-1">\n<title>Insert title here<\/title>\n<\/head>\n<body>\n   <h2>Welcome to world of Web<\/h2>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Step 21 :-<\/strong> The final project structure should look like :<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 22 :-<\/strong> Now right click on project name and select ‘Run as’ and then select ‘Run on Server’.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 23 :- <\/strong>Check if Tomcat server v8.0 is already selected. Then click on Next button.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 24 :-<\/strong> Make sure that the project name(FirstWebProj) is under ‘Configured’ tab.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 25 :-<\/strong> You will see in the ‘servers’ tab at the bottom, that server is being started. After the server is started, a new tab will open automatically in the code editor window with the web view of application. Click on the link ‘Click here to see magic’ to open helloworld.html.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Step 26 :-<\/strong> ‘helloworld.html’ should get opened.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
You can also copy the URL of the webpage in some external browser such as Chrome, Firefox etc and view the webpage there too. <\/p>\n\n\n\n
Congrats you have successfully created a web project in Eclipse.<\/strong><\/p>\n\n\n\n
Note :- Server setup is a one time process. Next time when you create a web project in Eclipse the same server can be used to create and run the web project.<\/strong><\/p>\n\n\n\n
Below are the topics covered in Eclipse tutorial :-<\/p>\n\n\n\n