Step by Step guide for Hello World Page (HTML and JSP)

This post has been moved to http://srinichekuri.com/2016/01/14/step-by-step-guide-for-hello-world-html-and-jsp/

**********************************************************************

This post is a step by step guide to develop your first html and jsp. Traditionally, developers code ‘Hello World !!!’ as first page and I am sticking to this tradition.

I am using a Eclipse IDE and Apache Tomcat for this tutorial. I recommend going through ‘Step by Step guide to configure Eclipse and Apache Tomcat‘ before you proceed any further.

Step-1: Create Dynamic Web Application

Create a new Dynamic Web Project by clicking on FIle -> New -> Dynamic Web Project

dynamic_project.png

Give a project name and click on Finish.

dynamic_project_1

Step-2: Create a HTML page

Create a new html page by right clicking on WebContent and selecting New -> HTML File.

dynamic_project_2.png

Put in a filename helloWorld.html and click on Finish.

dynamic_project_3.png

Put in this code in helloWorld.html.

<!DOCTYPE html>
<html>
<head>
 <meta charset="ISO-8859-1">
 <title>Hello World</title>
</head>
<body>
 <h5>Hello World - html</h5>
</body>
</html>

Step-3: Create a JSP page

Create a new jsp page by right clicking on WEB-INF and selecting New -> JSP File.

dynamic_project_9

 

Put in a filename helloWorld.jsp and click on Finish.

dynamic_project_10

 

You are seeing any compilation errors then make sure that you have right Runtimes checked as shown below.

dynamic_project_5_1

Put in below code into the jsp.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World</title>
</head>
<body>
<h5>Hello World - jsp</h5>
</body>
</html>

Step-4: Add Project to Server.

Add Project server to Server.

dynamic_project_5_2

dynamic_project_5_3.png

Step-5: Access new pages.

Access html page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.html&#8221; format

dynamic_project_6.png

Access jsp page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.jsp&#8221; format

dynamic_project_7.png

 

 

Advertisements

Step by Step guide to configure Eclipse and Apache Tomcat

This post has been moved to http://srinichekuri.com/2016/01/12/step-by-step-guide-to-configure-eclipse-and-apache-tomcat/

*********************************************************************

Eclipse is a very commonly used IDE by developers across the globe. Eclipse with Apache Tomcat server is a great combination for beginners and for experienced web developers.

This post will provide step-by-step guidance to set up Eclipse with Tomcat Server.

Note: Below screen shots are for windows 64-bit version. Please act accordingly for 32-bit versions.

Step-1: Download Java.

Click Here to download Java 7 SDK.

Java7_download

You will see that there are two folder created in your C:\Program files\Java. (In my case I already had Java 6 installed too).

Java7_download_2

Step-2: Download Apache Tomcat Server

Click Here to download Apache Tomcat Server 7.

Apache_Tomcat7_download

Once dowloaded, extract the server to D:\Software. You will see following structure after the extract is complete.

Apache_Tomcat7_download_1

Note: you can also choose to install from 32-bit/64-bit Windows Service Installer if you want to install it like a service.

Step-3: Configure Environment Variables

Configure following environment variables and restart your pc when done.

  • JAVA_HOME: “C:\Program Files\Java\jdk1.7.0_79”java_home_environment_variable
  • JRE_HOME: “C:\Program Files\Java\jre7”jre_home_environment_variable
  • CATALINA_HOME: “D:\Software\apache-tomcat-7.0.67”catalina_home_environment_variable

 

Step-4: Download Eclipse

Click Here to download Eclipse. For this guide, I am downloading Eclipse Mars. But you can download anything that is compatible with Java version you downloaded.

Eclipse_Mars_Download

Once downloaded extract contents to D:\Software.  You will see following structure after download is complete.

Eclipse_Mars_Download_1

 

Step 5: Setup Server Configuration in Eclipse

Open Eclipse and Open Server View (Window -> Show View -> Servers)

Right Click New -> Server

Eclipse_server_setup

Select Tomcat 7. You might have to Add Server runtime environment.

Eclipse_server_setup_1

(Dialog when clicked on ‘Add…’ in above screen shot)

Eclipse_server_setup_2

Click on Finish when Done.

Double click on Server to open deployment descriptor and make sure that you have default ports.

Eclipse_server_setup_3

Now start the server by clicking on start button and you will see that server has started successfully.

Eclipse_server_setup_4

Eclipse_server_setup_5

Hope this Set up process was helpful. Please use the comment section if you face any issues setting up and I will help  you as soon as I can.