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.
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.
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.
Fig 3: MySQL Model
Click on “Add Diagram” to get started and follow up on the next image.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Fig 14: Generate the entity classes
Here we generate the entity classes that will interact with the database.
Fig 15: Generate the entity classes
Fig 16: Generate the entity classes
Fig 17: Inserting testing data
Fig 18: incorporating CSS Buttons to minimize heavy image use
Fig 19: Running the Guestbook Application
Fig 20: The application lists the guest data
Fig 21: Inputting data to test AJAX validation
Fig 22: Validation working as expected
Fig 23: Inputting further data into the application
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.
Al-Kathiri Khalid 