Tutorials To Go

Web Quiz – Step 3: Finally time for some code

Albin Theander — Wed, 07 May 2008 13:33:50 +0000

It’s time to pull our fingers out of the holster and start coding. Lets plunge straight in and try to figure out what happens later:

Start by right clicking the Quiz project and choose to create a new Servlet.
Go through the wizard and fill in the following fields (some of them have these values, by default):
- Project: Quiz
- Folder: \Quiz\src
- Java Package: quiz
- Class name: ShowNextQuestion
- Superclass: javax.servlet.http.HttpServlet
- Name: ShowQuestion
- URL Mappings: /ShowQuestion
Locate the doGet method and add the following code inside of it:

PrintWriter out = response.getWriter();
out.println(“Question”);
out.println(“

”);

Save the file and run it on the server. (You can right-click on the file and choose run, or just stand in the editor and press the run button)

If you copied the code meticulously (or figured out how copy and paste works), you will see a web page with the question on it. Selecting a radio button and pressing OK will bring you back to the same page again, with the selected answer in the url.

So what happens here? Well, the browser tries to open “http://localhost:8080/Quiz/ShowQuestion”. When we run the servlet, our application is automatically installed on the tomcat server on the path /Quiz/. (In a real environment we would choose the “base” path to our application when we installed it.) So the first part (http://localhost:8080/Quiz/) will bring the server to our application. For the next step, we need to take a peek in our web.xml. (It’s in WebContent/WEB-INF, remember?). There are two entries that together maps the path “/ShowQuestion” to our servlet (quiz.ShowQuestion, remember the package name). First look at the servlet mapping:

ShowQuestion
/ShowQuestion

This entry says “If there is an incoming URL ending on /ShowQuestion, then execute the servlet named ShowQuestion”. Next, we look at the servlet tag:

ShowQuestion
ShowQuestion
quiz.ShowQuestion

This one says “There is a servlet named ShowQuestion, and the code is in quiz.ShowQuestion.” The connection between these two entries is the servlet-name tag.

That brings into the servlet code. Depending on which method is used to call the servlet, different methods will be executed. Just opening a page uses GET, resulting in the doGet method being executed. If POST was used, the doPost method would have been called instead. Both these methods have two parameters: an HttpServletRequest and an HttpServletResponse. The Request represents the incoming data, this includes data that is sent to the servlet and which url was used to call it. The Response represents whatever we want to send back to the browser. In this example, we only sent back HTML, but we coule have set different status codes or cookies.

Let’s finish this lesson with using our new knowledge to check if the correct answer was submitted. First, change the line in doGet which prints the form tag to:

out.println(“

”);

This will post the information back to the servlet instead of sending it in the url. It also means that the doPost method will be called instead. Remember that the request parameter represents the incoming data? That’s where we go digging for the answer. The field on the html form is called Answer, so add the following code to the doPost method:

String answer = request.getParameter("Answer");
String sarcasticReaction = null;
if (answer.equals("1")) {
   sarcasticReaction = "Oh, it's a bird? I never would have guessed";
} else if (answer.equals("2")) {
   sarcasticReaction = "A duck-boat, huh? I wished for that when I was 5, too";
} else if (answer.equals("3")) {
   sarcasticReaction = "I didn't ask what You were.";
}

PrintWriter out = response.getWriter();
out.println("Question");
out.println("");
out.println("Answer
");
out.println(sarcasticReaction);
out.println("");

Note especially the first part where we get the answer from the request and checks it.

Try to run it again. The first time, GET is used, making our doGet to get executed. When the user pressed the Ok button, the browser submitts the answer with POST, triggering our doPost method.

It seems like a whole lot of steps from the moment the user presses ok to the point where the users sees the answer in the browser. But it’s a real Speedy King. Even with more complex applications, these steps are executed in a jiffy.

Next time, I’ll tell you why most of the lines of code written here are wrong and should be removed.

Web Quiz – Step 2: Welcome To the Jungle

Albin Theander — Tue, 15 Apr 2008 08:10:18 +0000

Since we have all our tools installed and ready, why not fire them up to run head over heels into the confused world of Java Web development.

What is a workspace?

An Eclipse Workspace is simply a collection of projects that belong together in some sense. Some people have all the projects in one workspace, some create a workspace per project, most somewhere in between.

Eclipse have very few global settings for the application itself. Normally, all “global” settings are for the workspace. This makes it rather practical to collect projects with the same settings in the same workspace. (All settings can be changed on a per project base, too.)

Start Eclipse

To start Eclipse, open the folder where you unzipped it and double-click the exe file with Eclipse blue ball icon. Being a piece of ultra-configurable software, the first thing that pops up is a question of which workspace you would like to use. You can choose any path you like, but for this tutorial, I would recommend c:\java\webtutorial.

If this was a new workspace, the first thing to greet you is the welcome page. There are lot of nifty shortcuts to different things, and I have never every used them. Just close the page with the little X on the tab header and you’re ready to go.

Create the Quiz Project

Every single line of code in Eclipse is written inside a project. Let’s create a nice little Quiz project to have somewhere to play:

Choose File->New Project and select Web/Dynamic Web Project in the dialog. Click Next
Give it the name Quiz.
We have to define where we want to run this baby, but there is nothing in the Target Runtime dropdown. Well, what we don’t have, we create. (Just a hint of God complex.) Press the New button next to the Target Runtime.
In the box that pops up, find and select Apache Tomcat v6.0 and click Next.
Fill in the path to where you unzipped your Tomcat, and leave the rest with the default values by clicking Finish.
Back in the project dialog, make sure that the configuration is the Default Configuration for Tomcat v6.
There are a lot of other settings to do and you can take the tour and look at them by pressing Next a few times. When you are fed up with looking at things you shouldn’t change, press Finish to create the project.

What’s in a project?

Take a few seconds and look around inside your newly created project. It is shown in a view called the “Project Explorer” and it doesn’t look exactly the same in the file system, but close enough. (If you want a pure file system view, choose Window\Open View and find the Navigator View.)

Java Resources: src – here we will put our java source code.
build – here Eclipse will put everything together. We won’t touch this at all.
WebContent – this folder will contain all of our web pages; HTML, JSP, etc.
WEB-INF – contains web resources that we don’t want to be directly accessible (I’ll come back to that) and web.xml.
web.xml – this file is our Web Description File. It contains information about this web application. We will return to this file several times during this tutorial.

A welcome page

Every site with self-esteem has a welcome page. We need something to catch the visitor and lure him or her deeper into the jungle of web quizzes. Let’s make a Hello World page:

Right-click on the project and create a new HTML page.
Make sure the WebContent folder is selected in the New HTML Page dialog
Name the file index.html
In the next page you can select among a number of templates. If you’re a HTML guru, you probably know what to choose here. If not, just go with whatever is default.
After you pressed the Finish button, you can start edit the page.

Add some content to the page and save it. Eclipse is no WYSIWYG html editor, but if you try pressing Ctrl-Space in different places in the html code, it will at least help you find tag and attribute names. Normally, it’s probably easier to create the page in your favorite tool and just save the file here.

Running the application

To preview the page, just right-click on it and choose Run/Run on server. (Or, if you’re still in the editor, press the green little run-triangle in the toolbar.) When Eclipse asks you which server to run it on, choose to create new Tomcat 6.0 server and the press Finish. After a little while a web browser will open inside of Eclipse, showing the content of your page.

If you want to, you can open the same URL from any web browser, to see how it looks.

Is this the home page?

In your browser, remove the “/index.html” part of the url and see what happens. If everything is working correctly, it should still show the page.

Find and open the web.xml file again. (The web descriptor, remember?) It’s an XML file, so you can choose between a Design and Source view of the code (the tabs at the bottom of the editor). Whichever way you choose, there is a tag called . Inside this tag is a list of different file names. Whenever you refer to a folder inside our application and not a specific file, tomcat will look for these files (in the order they appear in the xml file) and if it finds one, return that. We were lucky enough (Yeah, right!) to select a filename that was in the list.

Next time, we will try to add some programmatic content. Until then, I expect you to very meticulously create the welcome page of all times. (Or even two pages with links to each other!)

Web Quiz – Step 1: Getting the software

Albin Theander — Mon, 14 Apr 2008 10:42:23 +0000

These directions will be for MS windows (as you will probably deduce from the screen shots.) All the software is available on most other platforms as well, but you’re on your own with installing and configuring it.

We will need the following pieces of software:

A Java SDK – This is needed by Tomcat for various reasons
Tomcat – Our web server
Eclipse – A better notepad to write our Java code

Java SDK

Do you already have a Java SDK installed?

You can check if you have one installed already by opening a DOS window and type the following:

java -version (should print a version that is 1.5 or 1.6, i.e. 1.6.0_02) javac -version (should print the same version as above)

The Java SDK is needed by Tomcat. If you have something older than 1.5, it’s time to upgrade.

The JDK (the old, but still common, name for the Java SDK) can be downloaded from the java download page.

Just go with “JDK 6 update X” without anything bundled with it.

When the download is done, run the installation. The default values for everything works perfectly.

Most applications in need of Java look for the environment variable JAVA_HOME. It is not set by the installation, unfortunately, so you need to do it yourself like this:

Right-click on “My computer” and select “Properties” from the pop-up menu
Select the “Advanced” tab and click the “Environment Variables” button close to the bottom.
Scroll through the two lists and check if JAVA_HOME exists already
if it is there, click the “Modify” button, otherwise, go with “New”
Name the variable JAVA_HOME and let the value be the installation path of the JDK. If you went with the default values, it would probably be something like c:\program files\java\jdk1.6.0_05, depending on which version you downloaded. (NO, this page will not be updated as new versions emerge.)
Just click around on all the OK-buttons until your desktop is back in view.

Tomcat

Tomcat will take the role of our webserver. Point your browser to http://tomcat.apache.org/download-60.cgi and download the Core .zip-file. If you want to set up a Tomcat server to host your site later on, the Windows installer is better, but for development, the zip distribution is the way to go.

When it’s down, you can unzip it wherever you like. There is no installation, so if you only plan to use it for this tutorial, you can just delete the entire folder afterwards. On my computer, I would unzip it in c:\java. (It will automatically create subfolders.)

Eclipse

Eclipse is just as easy to install as Tomcat. Just go to www.eclipse.org, click on “Download Eclipse” and select the “Eclipse IDE for Java EE Developers” and follow the instructions. When the zip file is downloaded, unzip it in a folder of your choice. Again, c:\java is as good a choice as any. (And again, all the files in the zip are in subfolders.)

Take a break

Now, when all the software is downloaded and you are on your toes, rearing to go, it is time to relax. So exhale, ask someone to make you breakfast in bed and soon we’ll be back to tie the three players together and get the game going.

Web Quiz – A Java web application

Albin Theander — Fri, 11 Apr 2008 08:27:00 +0000

The Java Web application I thought we would build is a simple web quiz. The user is presented with a series of questions, one by one, and sees the result after the last question.

Tomcat will be used to run the application and Eclipse to develop it. Since I got a question about JDBC, we will use some kind of database for the questions, too. I still haven’t decided on which database to use, but it will be a while until we come that far, anyway.

The plan for now is something along the following lines:

Download and install Tomcat and Eclipse
Code and run a servlet and a jsp page.
Create a welcome page for the Web Quiz application
Coding your first Web Quiz question
Adding a series of questions
Getting the questions from a database

Each of these stages will be described in detail in later posts.

But, as Deep Purple humbly sings: “The best laid plans come apart at the seams.” Plans are just what you create before you know what to do. They are not meant to be followed. And don’t get me started on a time line…

Welcome

Albin Theander — Fri, 11 Apr 2008 07:59:00 +0000

Welcome to the Tootoorial blog!

I created this blog as a way of sharing some basic knowledge in form of tutorials. Most of them will be groundlickingly basic and meant for all you with some knowledge in programming and a curious mind.

My specialties are Java and Lotus Domino development, so if car mechanics is what you’re after, google should be your next stop.

The first tutorial will be about Java Web applications. What software do I need, how do I install it, how do I write the code, and how do I deploy it?

If tutorials are your cup of tea, stay tuned….