Creating a Simple Web Application Using a MySQL Database

This document describes how to create a simple web application that connects to a MySQL database server. It also covers some basic ideas and technologies in web development, such as JavaServer Pages (JSP), JavaServer Pages Standard Tag Library (JSTL), the Java Database Connectivity (JDBC) API, and two-tier, client-server architecture. This tutorial is designed for beginners who have a basic understanding of web development and are looking to apply their knowledge using a MySQL database.

MySQL is a popular Open Source database management system commonly used in web applications due to its speed, flexibility and reliability. MySQL employs SQL, or Structured Query Language, for accessing and processing data contained in databases.

This tutorial continues from the Connecting to a MySQL Database tutorial and assumes that you already have a connection to a MySQL database created and registered in NetBeans IDE. The table data that is included in ifpwafcad.sql. is also required for this tutorial. This SQL file creates two tables, Subject and Counselor, then populates them with sample data. Save this file to a local directory, then open it in NetBeans IDE and run it on the MySQL database. The database used in this tutorial is named MyNewDatabase.

Contents

To follow this tutorial, you need the following software and resources.

Software or Resource	Version Required
NetBeans IDE	Web and Java EE installation version 6.0
Java Developer Kit (JDK)	version 6 or version 5
MySQL database server	version 5.x
MySQL Connector/J JDBC Driver	version 5.x
GlassFish application server or Tomcat servlet container	V2   version 6.x

Notes:

• The NetBeans IDE 6.1 with Glassfish and MySQL Bundle Download provides you with an all-in-one package of software required for this tutorial.
• The Web and Java EE installation enables you to optionally install the GlassFish V2 application server and the Apache Tomcat servlet container 6.0.x. You must install one of these to work through this tutorial.
• The MySQL Connector/J JDBC Driver, necessary for communication between Java platforms and the MySQL database protocol, is included in NetBeans IDE 6.x.
• If you need to compare your project with a working solution, you can download the sample application.

Planning the Structure

Simple web applications can be designed using a two-tier architecture, in which the application communicates directly with a data source using the Java Database Connectivity API. A user's requests are sent to a database, and the results are sent directly back to the user. Two-tier architectures can be easily mapped to a client-server configuration, where a user's browser serves as the client, and a remote database reachable over the Internet corresponds to the server.

The application you build in this tutorial involves the creation of two JavaServer Pages. In each of these pages, you add basic HTML to implement a simple interface, followed by SQL tags provided by JSTL technology in order to query the database. Consider the following client-server scenario:

The welcome page (index.jsp) presents the user with a simple HTML form. When a client requests the index.jsp page, the JSP code contained therein is parsed, and data from the Subject database table is gathered, added to the page, and sent to the client. The user makes a selection in the provided HTML form and submits, which causes the client to make a request for response.jsp. When response.jsp is parsed, data from both the Subject and Counselor tables is gathered and inserted into the page. Finally, the page is returned to the client and the user views data based upon his or her selection.

Creating a New Project

In order to implement the scenario described above, you develop a simple application for a fictitious organization named IFPWAFCAD, or The International Former Professional Wrestlers' Association for Counseling and Development. The application enables a user to choose a counseling subject from a drop-down list (index.jsp), then retrieves data from the MySQL database and returns the information to the user (response.jsp):

index.jsp

response.jsp

Create a new project in the IDE:

1. Start NetBeans IDE and choose File > New Project (Ctrl-Shift-N) from the main menu. Under Categories select Web; under Projects select Web Application. Click Next.
2. In Project Name, enter IFPWAFCAD. From the Server drop-down list, select the server you plan work with. Leave all other settings at their defaults and click Finish. The IDE creates a project template for the entire application, and opens an empty JSP page (index.jsp) in the Source Editor. index.jsp serves as the entry point for the application. The new project is structured according to Sun Java BluePrints guidelines.

Preparing the Interface

Begin by preparing a simple interface for the two pages. Both index.jsp and response.jsp implement an HTML table to display data in a structured fashion. index.jsp also requires an HTML form that includes a drop-down list.

index.jsp

Make sure index.jsp is opened in the Source Editor. If it is not already open, double-click index.jsp from IFPWAFCAD > Web Pages in the Projects window.

1. In the Source Editor, change the text between the

   ${counsSubj.name}
   Description:	${counsSubj.description}
   Counselor:	${counsSubj.first_name} ${counsSubj.nick_name} ${counsSubj.last_name} member since: ${counsSubj.member_since}
   Contact Details:	email: ${counsSubj.email} phone: ${counsSubj.telephone}

Deploying and Running the Project

Whether you are using the GlassFish application server or Tomcat, the process for deploying your project is the same. If you installed GlassFish or Tomcat through the IDE download, your server is already registered in the IDE. If you need to make any changes to server settings, or would like to register a different server with the IDE, choose Tools > Servers from the main menu to open the Server Manager.

To deploy the IFPWAFCAD project to the server:

• From the Projects window, right-click the project node and choose Undeploy and Deploy. The IDE automatically compiles the project, starts the server, then deploys the project to it. You can see any output generated in the Output window. The output should complete with a BUILD SUCCESSFUL message. To check that the application has indeed been deployed to the server, open the Services window (Ctrl-5) and expand the Servers node. All servers that are registered in the IDE are listed here. For GlassFish, expand Applications > Web Applications to view the application. For Tomcat, expand Web Applications to view the IPFWAPCAD application.

To run the application:

• In the Projects window, right-click the IFPWAFCAD project node and choose Run. The index.jsp page opens in the IDE's default browser. If you had simply chosen Run to begin with, the IDE would have automatically compiled the project and deployed it to the server prior to running it. When index.jsp displays in the browser, select a subject from the drop-down list and click submit. You should now be forwarded to the response.jsp page, showing details corresponding to your selection:

Send Us Your Feedback

See Also

This concludes the Creating a Simple Web Application Using a MySQL Database tutorial. This document demonstrated how to create a simple web application that connects to a MySQL database. It also demonstrated how to construct an application using a basic two-tier architecture, and utilized JSTL and JSP technologies as a means of accessing and displaying data dynamically.

For related or more advanced tutorials, see the following resources:

• Connecting to a MySQL Database in NetBeans IDE. Covers the basics of working with a MySQL database in the IDE.
• NetBeans IDE 6.0 Tutorial for Web Applications. An in-depth tutorial describing how to build a web application within the context of a typical web development cycle.
• Introduction to the Spring Framework. An introductory tutorial describing how to create an MVC web application using the Spring Framework in the IDE.