Tutorial: A Java Blog Application
From Humanitarian FOSS Summer Institute 2009
This tutorial will demonstrate how to bring together the skills learned in the previous tutorial [assuming that you have completed it] to create a web blog. It assumes you have downloaded and installed Apache Tomcat and know how to start and restart it, which you should do after recompiling .java files or editing .xml files (but not editing .jsp files!).
Contents |
File Structure
For this tutorial, you should first create a new Context for the application. Do this by adding these lines to your server.xml file in your apache-tomcat-{version}/conf directory [create a new one if it doesn't exist]:
<Context path="/blog" docBase="blog" debug="0" reloadable="true">
<Logger className="org.apache.catalina.logger.FileLogger"
prefix="localhost_blog_log." suffix=".txt"
timestamp="true"/>
</Context>
Next, you should create a new directory named blog, in your Tomcat webapps directory with the same structure the previous tutorial had. Add a subdirectory called jblog in the classes directory. This will store the class files under the jblog package. (You can call the package whatever you want as long as you edit the package name in the java source code and web.xml file!)
Then copy the MySQL JDBC driver into the lib directory for your new application. Try doing this with the command line using mkdir and cp, e.g.:
vagrawal@localhost:~$ cd /usr/apps/apache-tomcat-{version}/webapps
vagrawal@localhost:webapps$ cp mine/WEB-INF/lib/mysql-connector-java-3.1.10-bin.jar blog/WEB-INF/lib/
Your blog directory configuration should now look like this:
WEB-INF/classes/jblog/ WEB-INF/classes/ WEB-INF/lib/mysql-connector-java-3.1.10-bin.jar WEB-INF/lib/ WEB-INF/
Java Servlet
Create the configuration file web.xml in your WEB-INF directory with the following context:
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- General description of your web application -->
<display-name>JBlog</display-name>
<description>
Simple Servlet Web log Example
</description>
<context-param>
<param-name>webmaster</param-name>
<param-value>your@email.address</param-value>
<description>
The EMAIL address of the administrator to whom questions
and comments about this application should be addressed.
</description>
</context-param>
<servlet>
<servlet-name>Write</servlet-name>
<description>
Write web log data
</description>
<servlet-class>jblog.Write</servlet-class>
</servlet>
<servlet>
<servlet-name>Show</servlet-name>
<description>
Show Web log
</description>
<servlet-class>jblog.Show</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Write</servlet-name>
<url-pattern>/Write</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Show</servlet-name>
<url-pattern>/Show</url-pattern>
</servlet-mapping>
</web-app>
Java Server Pages (JSPs)
Next, create a JSP page in webapps/blog called add_data.jsp. It will contain a form for entering your web log data:
<html><head><title>Web log Entry</title></head><body bgcolor="white">
<form action="/blog/Write">
Log Entry:<br>
<%
String data = request.getParameter("data");
%>
<textarea name="data" rows="10" cols="60">
<%= data != null ? data : "" %></textarea>
<br>
Password: <input type="text" name="password" value="" size="30">
<br>
<input type="submit" value="Submit">
</form>
</body></html>
Next you can create a generic MySQL connector object in blog/WEB-INF/classes/jblog, called MySQLConnector.java. This object will be used by the Write and Show servlets below.
Make sure to edit MySQLConnector.java to include the correct path to your database and your username and password in the getConenction call!
Creating a Database
The next step is to create a table for log entries, as well as a table to hold a simple password. Since this is just an example application, we’re only including the simplest possible security. Anyone who goes to /blog/add_data.jsp and enters a password which is stored in the passwords table will be allowed to add an entry to the log. Create the tables with the following in phpMyAdmin(find the database, go to SQL tab). The default password is hushhush but we recommend choosing your own.
mysql> use blog; //if you are in the database already, this line is unnecessary
mysql> create table blog
(entry_id int not null auto_increment primary key, data blob, created timestamp not null);
mysql> create table blog_pass
(password_id int not null auto_increment primary key, password varchar(20));
mysql> insert into blog_pass (password) values ("hushhush");
More Servlets
Now it’s time to create a servlet that knows how to write log entries to the database table. Create a file called Write.java in your classes/jblog directory. This will allow you to actually write entries that will be recorded in the blog.
The final piece of this application is a servlet that can show log entries. This servlet will show 10 entries at a time, starting with the latest, and knows how to link back to the beginning once the user has seen all entries.
Create a file called Show.java in your classes/jblog directory.
Once you’ve re-started Tomcat (remember, you’ve added a new Servlet Context and registered several new servlet mappings), added the tags for each servlet in web.xml, and compiled the .java files, you should have a simple but functional web log.
Remember to compile from the classes directory, since the jblog package is found there. (Alternately, compile from the jblog directory and include classes (..) in the classpath!):
javac -classpath /System/Library/Frameworks/JavaVM.framework/Versions/1.6/Classes /classes.jar:/home/gen_coms##/apache-tomcat-6.0.18/lib/servlet-api.jar:..:. Hi.java
Go to http://localhost:8080/blog/Show to test out your flashy new web log! Note that you will have to navigate through your blog using the address bar.
Go to http://localhost:8080/blog/Write to make new entries (but since there is no user account functionality, you will always get the "No password" error. Don't worry--this gets added in part IV!)
Making a Better Weblog
To give this simple web log better functionality and more features, do the next step in this tutorial.
