A Tutorial on Project Assignm
ent
BING WANG
Contents
DEMO
SETTING UP YOUR ENVIRONMENT
RUN THE DEMO
DEVELOPING A GUI
› HTML
› JAVASCRIPT
JSP
JDBC
DEMO
Student Registration system
› PROFESSOR
› STUDENT
› COURSE
› TRANSCRIPT
Setting up Your Environment
•Install Eclipse
› Integrated Development Environment
•Install Java SDK
•Install Apache Tomcat
Create Sample Web Application
› Helios/Callisto
Setting up Your Environment
Apache Tomcat
› application server
› renders Web pages which includes Java Server Page
coding
› If you are going to be running Java Code in the f
orm of Java Server Pages on your web server, you
will need an appropriate software to act as a con
tainer
Setting up Your Environment
Apache Tomcat
› provides a Java Virtual Machine and associated eleme
nts to give a complete Java Runtime Environment.
› provides web server software to make the environment
accessible on the Web.
› You can get everything you want from the link below:
› http://tomcat.apache.org/
Setting up Your Environment
You Also need Connector/J for JDBC to c
onnect MySQL
Download Connector/J from
http://dev.mysql.com/downloads/connecto
r/j/
Copy it under WebContent/WEB-INF/lib
Already done in the war file
Run the Demo
Install MySQLQuery Browser
http://www.cs.sunysb.edu/facilities/win
dowslab/services/mysql.html
Copy/Paste the contents of Java Resourc
es/initdb.sql to the scripting window a
nd execute
Run the Demo
Go to File->Import->WAR file
Select the WAR to import
•Replace username with your netID in all jsp files
•Replace password with your SBU ID
•Project->Run As->Run on Server
•Go to
Developing A GUI
Graphical User Interface
a type of user interface that allows us
ers to interact with programs in more w
ays than typing
offers graphical icons, and visual indi
cators
Developing A GUI
You can learn the basic things about HTML here:
http://www.w3schools.com/html/
Use HTML pages to develop GUI and add appropria
te elements (button, textfield, radio buttom) t
o take the user’s input and output your comput
ing result on the screen
Some recommended developing tools for HTML: Mic
rosoft Visual Studio 2005, UltraEdit, Microsoft
Front Page, etc.
Developing A GUI
JavaScript is the most popular scripting language on
the internet.
› JavaScript was designed to add interactivity to HTML pages
› A scripting language is a lightweight programming language
› JavaScript is usually embedded directly into HTML pages
You can learn the basic things about JavaScript here:
http://www.w3schools.com/js/
Developing A GUI
For Detailed Information about JavaScript, please
go to
http://www.javascript.com/
Link JavaScript functions to some input elements
in your GUI in order to handle the users’ input.
Especially link JavaScript to the buttons or radi
o buttons.
Developing A GUI (An Exampl
e)
<html> Specify that this is an HTML document
<head> head part
<script language="javascript" type="text/javascript"> javascrip
t begin here
function Button1_onclick() {handle button1 click
if(document.myForm.username.value == "")
get the value of username field
alert("UserName Can Not Be Null!")
javascript:myForm.submit() } submit the form
function Button2_onclick() {handle button2 click
window.open("RegisterPage.htm","_self"); }
</script> end of Javascript
</head> end of head
Developing A GUI (An Exampl
e)
<body> body part
<form name="myForm" action="login.jsp" method="post"> define a fo
rm (used to submit information of the input elements)
<input id="Text1" name="username" type="text" />
<input id="Password1" name="userpasswd" type="password" /> define
two input fields
<input id="Button1" type="button" value="Log In" onclick="return B
utton1_onclick()" />
<input id="Button2" type="button" value="Register" onclick="return
Button2_onclick()" />
define two buttons and their corresponding functions
</form> end of form
</body> end of body
</html> end of html
About JSP
A technology for controlling the conten
t or appearance of Web pages through th
e use of small programs that are specif
ied in the Web page and run on the Web
server to modify the Web page.
Java Server Pages (JSP) are normal HTML
with Java code pieces embedded in them
About JSP
Recommended developing tools for JSP: Mi
crosoft Visual Studio 2005, UltraEdit, M
y Eclipse
You can find everything you want about J
SP at:
http://java.sun.com/products/jsp/
http://www.jsptut.com/
About JSP (An Example)
<%
int a = 5; You can simply add the java
int b = 10; codes here between “<%” and
int c = a + b; “%>” to compute everything
%> you want
<html>
<body> HTML codes here
Hello, John. Your age is <%=c%>. Here is Your Personal
Information.
When you want to use the computing result of the Java Codes i
n HTML or JavaScript, you can simply use <% = variable name
%> to get its value, such as <%=c%>
</body> </html>
Connect to MySQL with JDBC
First, please add these String Variables in y
our Java codes between “<%” and “%>” in J
SP
› String mysJDBCDriver = "com.mysql.jdbc.Driver";
› String mysURL = "jdbc:mysql://sbcstldb.translab.cs
.sunysb.edu:3306/username";
› String mysUserID = username;
› String mysPassword = password;
› username = your netID
› password = your SBU ID
Connect to MySQL with JDBC
Then add these codes after the definition of String va
riables (still between “<%” and “%>”):
› java.sql.Connection conn=null; // a new connection
› try
› {
› Class.forName(mysJDBCDriver).newInstance();
› java.util.Properties sysprops=System.getProperties();
› sysprops.put("user",mysUserID);
› sysprops.put("password",mysPassword);
› //the above is used to set property
› //connect to the database now
› conn=java.sql.DriverManager.getConnection(mysURL,sysprops);
Connect to MySQL with JDBC
System.out.println("Connected successfully to database using JConnec
t");
//add your SQL query and update sentences here
// try{
}
catch(Exception e)
{
e.printStackTrace();
out.print(e.toString());
}
finally{
try{conn.close();
catch(Exception ee) {};
}
Connect to MySQL with JDBC
•An example of SQL Query, suppose we have a table Student (ID
, Age), where ID and Age are both String:
› // a new SQL Statement
› java.sql.Statement stmt1 = conn.createStatement();
› // a new Result Set
› java.sql.ResultSet rs = stmt1.executeQuery ("select * from Student wh
ere age = ‘” + c + “’”);
› String strID = new String();
› while(rs.next()) // now, rs records all the query //results from Stud
ent Table where Age is c
› {
› strID = rs.getString(“ID”);
› System.out.println(”Student ”+ strID +” ‟s age is ” + c + “!”);
}
THANKS SO MUCH!!!!!
