My Guestbook App

I am going to build a bottom up guestbook application to store all my guest list for an up coming event, host it in a local network for all the local machines to have access to the application.

The steps taken to build up  the application are: a) creating a MySQL database using MySQL Workbench, b) then forward engineer the EER (Enhanced Entity Relationship) diagram to MySQL workable code and execute it to propagate the desired database with its tables, c) using the Netbeans IDE to build up the web application, d) creating entity classes to interact with the database, e) creating java server faces to interact with the entity classes, f) CSS buttons to keep the application clear of heavy images hence keeping the application size compact and loading time optimal.

alkathirikhalid

Fig 1: Netbeans 7.2 IDE

Since running MySQL as a service takes up resources on start up, I have disabled it hence MySQL is initialized only when needed, as seen above I right click and start the administration tool to bring up MySQL workbench.

alkathirikhalid

Fig 2: MySQL Workbench

Within the Workbench click on “Create New EER Model” to get started to draw the enhanced entity relationship  diagram, depending on the complexity of your application you might use a table or multiple tables for your application.

alkathirikhalid

Fig 3: MySQL Model

Click on “Add Diagram” to get started and follow up on the next image.

alkathirikhalid

Fig 4: Create an EER Diagram

Double click or click and drag the table icon from the left into the drawing sheet, the whole creation process is drag and drop from the tools bar into the drawing sheet.

alkathirikhalid

Fig 5: Build a table(s) with column and set it’s attributes

Creating the columns is a breeze with all its attributes, you may have multiple tables as desired but for a one table application ensure a column is selected as a primary key so as to be in the position to create the entity classes later on, and also to allow the application to grow in the case when another table is added to the schema.

alkathirikhalid

Fig 6: You can insert data manually into the EER Diagram

Click on insert on the bottom, for practical reasons I will skip the insertion of data directly into the database and insert them through the application once it’s built in order to test and see the workings of the application, a good example would be to see and test it’s validation before importing all data into the database.

alkathirikhalid

Fig 7: Completed Enhance Entity Relational Diagram

Once your table/s are ready with all the primary and secondary keys incorporated, click on “Database” and select “Forward Engineer” to transform your diagram into workable MySQL code.

alkathirikhalid

Fig 8: Forward Engineering Settings

Always choose to “Drop Objects Before Each CREATE Object” so as to be in the position to reuse the same MySQL code in the case when the database needs changes specifically an update, that way your script will be in the position to run or override and implement changes to an existing database.

The next step would require your MySQL server to be running, ensure it is running before clicking next.

alkathirikhalid

Fig 9: Forward Engineer to Database process completed successfully

After the step is complete, you can close the MySQL Workbench and head back to the Netbeans IDE, the first part is complete, we have created our database and it’s table/s. Now we continue building the rest of the application.

alkathirikhalid

Fig 10: Our new Database is ready

In Netbeans click on services and then click on the database to verify the tables were created from the Forward Engineering process, as seen above all seem well.

alkathirikhalid

Fig 11: Build your Web Application

Click on new project, select Java web and then select Web application as seen in the above image, and then click next.

alkathirikhalid

Fig 12: Java Web Application Structure

The Netbeans IDE generates the java web application with it’s codes, since the data we require should be populated from the database there is nothing much we need here except for recreation purposes to make the application more appealing, now lets fix the connection.

alkathirikhalid

Fig 13: Selecting the Database connection for the application

Create the data source that would be use by the application to pull up the data from the database in order to populate the page views.

alkathirikhalid

Fig 14: Generate the entity classes

Here we generate the entity classes that will interact with the database.

alkathirikhalid

Fig 15: Generate the entity classes

alkathirikhalid

Fig 16: Generate the entity classes

alkathirikhalid

Fig 17: Inserting testing data

alkathirikhalid

Fig 18: incorporating CSS Buttons to minimize heavy image use

alkathirikhalid

Fig 19: Running the Guestbook Application

alkathirikhalid

Fig 20: The application lists the guest data

alkathirikhalid

Fig 21: Inputting data to test AJAX validation

alkathirikhalid

Fig 22: Validation working as expected

alkathirikhalid

Fig 23: Inputting further data into the application

alkathirikhalid

Fig 24: Application accepts data

The application is in order, all is left is clean and build the application and deploy the war file, since am on a local machine the application is accessible through glassfish with in the same network, external accessibility can be achieved by installing DYNDNS updater or having a dedicate IP and port forwarding the router to the glassfish server on port 80, before doing so you would need to secure the application by creating a login page.

Thank You.

www.alkathirikhalid.com

About alkathirikhalid

"Knowledge without experience is just information."
This entry was posted in Web Developement. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s