PURPOSE
Create a login form with java jsp using bean and twitter bootstrap css in netbeans
ENVIRONMENT
OS:Windows 7
Web server : Apache Tomcat 7.0.34
Netbeans:version 7.3.1
Bootstrap: version 2.3.2
STEPS
1. create a project called JspAndMySql in netbeans.Automatically the index.jsp gets created it
a. make sure your tomcat or glassfish is up and the ports they used are not in use
b. click on run to see whether you see the index.jsp displayed
2. use the login template on twitter bootstrap website found here
a.write clicking on the page and display source code
b.copy and paste it from the <!DOCTYPE> part in index.jsp(netbeans)
c.get rid of the javascript part in the lower part of the html
d.find and replace all(CTRL-H) the "../assets/css" by "" . we will create the css in the same directory
e. add an action,a method and a name property to the elements in the html form
※ if you do it like i told you,your file should like this:
f.create the entities in beans by write clicking on Source Package->New->Java package and call the package beans
g.write click on "beans" package,create a java class called "session.java"
3.create two css files in netbeans under webpage called bootstrap.css and bootstrap-responsive.css
a.copy and paste in each files the css of bootstrap.css and bootstrap-responsive.css from the bootstrap download package in their corresponding filename
4. create a database test with a table users having the following columns:
id (incremental,primary),email (varchar with 255 length),password(varchar with 255 length)
a. creating a user in your database with an email and password for test purpose
5. write the code for action page : login.jsp by first write clicking on libraries in netbeans and add mysql jdbc driver(we are going to connect to mysql)
5.Test
Create a login form with java jsp using bean and twitter bootstrap css in netbeans
ENVIRONMENT
OS:Windows 7
Web server : Apache Tomcat 7.0.34
Netbeans:version 7.3.1
Bootstrap: version 2.3.2
STEPS
1. create a project called JspAndMySql in netbeans.Automatically the index.jsp gets created it
a. make sure your tomcat or glassfish is up and the ports they used are not in use
b. click on run to see whether you see the index.jsp displayed
2. use the login template on twitter bootstrap website found here
a.write clicking on the page and display source code
b.copy and paste it from the <!DOCTYPE> part in index.jsp(netbeans)
c.get rid of the javascript part in the lower part of the html
d.find and replace all(CTRL-H) the "../assets/css" by "" . we will create the css in the same directory
e. add an action,a method and a name property to the elements in the html form
※ if you do it like i told you,your file should like this:
------------------------------------ index.jsp ----------------------------------
<%--
Document : index
Created on : 2013/06/16, 7:54:48
Author : doumbiaz
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="container">
<form class="form-signin" action="login.jsp" method="POST">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" name="email" placeholder="Email address">
<input type="password" class="input-block-level" name="password" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
</body>
</html>
<%--
Document : index
Created on : 2013/06/16, 7:54:48
Author : doumbiaz
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="container">
<form class="form-signin" action="login.jsp" method="POST">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" name="email" placeholder="Email address">
<input type="password" class="input-block-level" name="password" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
</body>
</html>
f.create the entities in beans by write clicking on Source Package->New->Java package and call the package beans
g.write click on "beans" package,create a java class called "session.java"
-------------------------- session.java ----------------------------------
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package beans;
/**
*
* @author doumbiaz
*/
public class session {
String email;
String password;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package beans;
/**
*
* @author doumbiaz
*/
public class session {
String email;
String password;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
3.create two css files in netbeans under webpage called bootstrap.css and bootstrap-responsive.css
a.copy and paste in each files the css of bootstrap.css and bootstrap-responsive.css from the bootstrap download package in their corresponding filename
4. create a database test with a table users having the following columns:
id (incremental,primary),email (varchar with 255 length),password(varchar with 255 length)
a. creating a user in your database with an email and password for test purpose
5. write the code for action page : login.jsp by first write clicking on libraries in netbeans and add mysql jdbc driver(we are going to connect to mysql)
----------------------------- login.jsp ------------------------------
<%--
Document : login
Created on : 2013/06/16, 8:04:40
Author : doumbiaz
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"
import="java.sql.*"
%>
<%
String email="",password="";
if(request.getParameter("email")!=null){
email=request.getParameter("email");
}
if(request.getParameter("password")!=null){
password=request.getParameter("password");
}
%>
<%
Connection con=null;
PreparedStatement pst=null;
ResultSet re=null;
String url="jdbc:mysql://localhost:3306/test";
String Driver="com.mysql.jdbc.Driver";
String user="root";
String pass="";
Class.forName(Driver);
con=DriverManager.getConnection(url,user,pass);
String sql="select * from users where email = ? and password = ?";
try{
pst=con.prepareStatement(sql);
pst.setString(1,email);
pst.setString(2,password);
re=pst.executeQuery();
if(re.next()){
out.println("CONNECTED!!!");
}else{
out.println("LOGIN FAILED!!!");
}
} catch(Exception e){
out.println("ERROR CONNECTING");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<jsp:useBean id="actualsession" class="beans.session" scope="session"/>
<jsp:setProperty name="actualsession" property="email" value="<%=email%>"/>
<jsp:setProperty name="actualsession" property="password" value="<%=password%>"/>
<%--
<jsp:getProperty name="actualsession" property="email"/><br/>
<jsp:getProperty name="actualsession" property="password"/><br/>
--%>
</body>
</html>
----------------------------------------------------------------
4. click on run to see whether you get the same layout as a bootstrap login page<%--
Document : login
Created on : 2013/06/16, 8:04:40
Author : doumbiaz
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"
import="java.sql.*"
%>
<%
String email="",password="";
if(request.getParameter("email")!=null){
email=request.getParameter("email");
}
if(request.getParameter("password")!=null){
password=request.getParameter("password");
}
%>
<%
Connection con=null;
PreparedStatement pst=null;
ResultSet re=null;
String url="jdbc:mysql://localhost:3306/test";
String Driver="com.mysql.jdbc.Driver";
String user="root";
String pass="";
Class.forName(Driver);
con=DriverManager.getConnection(url,user,pass);
String sql="select * from users where email = ? and password = ?";
try{
pst=con.prepareStatement(sql);
pst.setString(1,email);
pst.setString(2,password);
re=pst.executeQuery();
if(re.next()){
out.println("CONNECTED!!!");
}else{
out.println("LOGIN FAILED!!!");
}
} catch(Exception e){
out.println("ERROR CONNECTING");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<jsp:useBean id="actualsession" class="beans.session" scope="session"/>
<jsp:setProperty name="actualsession" property="email" value="<%=email%>"/>
<jsp:setProperty name="actualsession" property="password" value="<%=password%>"/>
<%--
<jsp:getProperty name="actualsession" property="email"/><br/>
<jsp:getProperty name="actualsession" property="password"/><br/>
--%>
</body>
</html>
5.Test
WHEN THE CREDENTIALS ARE CORRECT
WHEN THE CREDENTIALS ARE NOT CORRECT
