WebContactSystem

A simple demo of Web Contact System - my attempt to connect database in a dynamic webpage through Java servlet. See scottsun folder for details

System Design:

How it looks like

All pages are dynamic pages except Add Contact Page - [addContact.html]

Main page - shows all contacts:

Add Contact Page:

Edit Contact Page:

Step by Step how to set it up:

Step 1 - set up:

1. MyEclipse 2014: IDE tool of your choice.. I have MyEclipse 2014 set up on my computer already
2. Sublime Text: I use this to write addContact.html, ContactSystem.sql, and db.properties
3. MySQL
4. Tomcat
5. JavaSE

Step 2 - create a table in the database and set up property file

SQL for your database, you can change the database name and information inside, but if you do that, you neeed to change your property file and Java code too.

ContactSystem.sql

create database webcontactsystem;

use webcontactsystem;

create table Contact (
	id int not null primary key auto_increment,
	firstName char(20) not null,
	lastName char(20) not null,
	gender char(1) not null,
	age tinyint not null,
	tel char(30),
	email char(30)
);

db.properties - save this file under /webapps/../WEB-INF/classes

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/webcontactsystem?useSSL=true
user=root
password=123456

Step 3: Set up folder Tree

Step 3: You can start Coding now

You need to import the following libs:
beanutils
beanutils logging
mysql connector

My order of coding each file:

1. Contact.java
2. JDBCUtil.java
3. BaseDao.java
4. ContactDao.java
5. ContactDaoImplements.java
6. addContact.html
7. web.xml
8. AddContactServlet.java
9. ListContactServlet.java
10. DeleteContactServlet.java
11. QueryContactServlet.java
12. UpdateContactServlet.java

now you are done and you can start testing

What to be mindful about..

1. database table field name to be consistant with your code.
2. do not miss a space when generating html in the servlet, I made a mistake that missed a space here and took me so long to find out(crying face):

   html += "<form action=UpdateContactServlet?id=" + contact.getId() + "method=POST>";
   

   right before method=POST, it need a space, otherwise, it will not submit to UpdateContactServlet, correct coding:

   html += "<form action=UpdateContactServlet?id=" + contact.getId() + " method=POST>";
   

3. Everything above can be done in JSP or Spring framework for better result, but here we are focusing on CRUD to the database from webpages.