Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Login Example với JSP/Servlet và Ajax kết nối database Access

Posted by millionking on December 9, 2011

Bước 1:

– Download Eclipse tại: http://www.eclipse.org/downloads/ làm môi trường xây dựng ứng dụng.

Chú ý: bạn nên chọn phiên bản có plusgin WEB ở đây mình dùng phiên bản 3.6(Eclipse IDE for Java EE Developers).có nhiều đồ chơi hơn.

– Download apache tomcat tai:http://tomcat.apache.org/download-70.cgi  để giả lập server mình dùng phiên bản apache tomcat 7.0.x.

Bước 2:

Khởi tạo một project Website:File ->New -> Other->Web ->Dynamic Web Project.

Đặt tên Project Name:LoginExample.

Bước 3 :

– Tạo hai package(File ->New ->Package, đặt tên package name ->finish ) controler và model:

+controler: chứa các lơp dùng để xử ly.

+model:chứa các lớp dùng để định nghĩa lớp và viết các phương thức truy vấn,..

Bước 4 :

1) Tạo trang login.jsp(Nhấp phải Webconten ->New->Other->Web->JSP file,đặt tên file:login.jsp ->finish) đẻ hiện thị nội dung đăng nhập với nội  dung sau:

<html>

<head>
<meta http-equiv=”Content-Language” content=”en-us”>
<meta http-equiv=”Content-Type”
content=”text/html; charset=windows-1252″>
<title>New Page 1</title>
<script language=”javascript”>
//khai bao doi tuong truyen thong giua client va server cho Ajax su dung
var request;
//Phuong thuc nay dung de gui request va nhan respone tu server
function sendAccount() {
var userName = document.getElementById(“username”);
var passWord = document.getElementById(“password”);
//kiem tra xem user co duoc nguoi dung nhap vao ko?
if (userName.value == “”) {
window.alert(“ban da quen nhap userName !”);
userName.focus();
return false;
}
//kiem tra xem passwork co duoc nguoi dung nhap vao ko?
if (passWord.value == “”) {
window.alert(“ban da quen nhap passWord !”);
passWord.focus();
return false;
}
//gui request den lop XuLiDangNhap cung voi userName&password
var url = “XuLiDangNhap?userName=” + escape(userName.value)
+ “&&passWord=” + escape(passWord.value);
try
{
// Firefox, Opera 8.0+, Safari
request=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
request=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
request=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}

//if (window.XMLHttpRequest) {
//    alert(“firefox”);
//request = new XMLHttpRequest();
///} else {
//    request = new ActiveXObject(“Microsoft.XMLHTTP”);
//}
request.open(“Get”, url, true);
request.onreadystatechange = callback;
request.send(null);
}
function callback() {

if (request.readyState == 4) {
if (request.status == 200) {
var hienThi = document.getElementById(“hienthi”);
hienThi.innerHTML = request.responseText;

}

}
}
</script>

</head>

<body>

<div
style=”position: absolute; width: 474px; height: 140px; z-index: 1; left: 124px; top: 52px”
/> <p align=”left”><font color=”#008000″ size=”5″><b>THÔNG
TIN ĐĂNG NHẬP</b></font></p>
<p align=”center”><b><font color=”#FF0000″></font></b></p>
<table cellpadding=”0″ cellspacing=”0″ width=”548″>
<!– MSTableType=”layout” –>
<tr>
<td height=”30″ width=”132″><font color=”#008000″>USER
NAME:</font></td>
<td height=”30″ width=”142″><input type=”text” name=”userName”
size=”20″></td>
<td height=”30″ width=”274″ valign=”top”>&nbsp;</td>
</tr>
<tr>
<td height=”30″ width=”132″><font color=”#008000″>PASS
WORD:</font></td>
<td height=”30″ width=”142″><input type=”password”
name=”passWord” size=”20″></td>
<td height=”30″ width=”274″ valign=”top”>&nbsp;</td>
</tr>
<tr>
<td height=”30″ width=”132″>&nbsp;</td>
<td height=”30″ width=”142″>
<p align=”center”><input type=”submit” );”
value=”ĐĂNG NHẬP” name=”B1″
style=”text-decoration: overline; color: #008000; font-weight: bold”>
</td>
<td height=”30″ width=”274″>&nbsp;</td>
</tr>
</table>
<p align=”center”>&nbsp;</p>
<p align=”left”>&nbsp;
</div>

</body>

</html>

2)  Tạo lớp Account.java để định nghĩa ra một account thuộc package model(nhấp phải model->New->package,đặt tên package name:Account ->finish) với nội dung như sau:

package model;

public class Account {
private String userName;

public String getUserName() {
return userName;
}

public void setUserName(String userName) {
this.userName = userName;
}

public String getPassWord() {
return passWord;
}

public void setPassWord(String passWord) {
this.passWord = passWord;
}

private String passWord;

public Account(String userName, String passWord) {
super();
this.userName = userName;
this.passWord = passWord;
}
}
3)Tạo lớp AccountManager.java để quản lý account với nội dung sau:

package model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

public class AccountManager {
String driver = “sun.jdbc.odbc.JdbcOdbcDriver”;
String url = “jdbc:odbc:DatabaseAccount”;
private Connection connection;
private Statement statement;
private ResultSet resultSet;

public AccountManager() {
try {
Class.forName(driver);
} catch (Exception e) {
System.out.println(e.getMessage());
}
}

// ds account
public List<Account> getListAccount() {
String sql = “select * from Account”;
List<Account> listAcc = new ArrayList<Account>();
try {
connection = DriverManager.getConnection(url);
statement = connection.createStatement();
resultSet = statement.executeQuery(sql);
while (resultSet.next()) {
String userName = resultSet.getString(1);
String passWord = resultSet.getString(2);
Account a = new Account(userName, passWord);
listAcc.add(a);
}
} catch (Exception e) {

}
return listAcc;
}

// check user
public boolean checkAccount(String userName, String passWord) {
List<Account> listAcc = getListAccount();
if (userName == null || passWord == null) {
return false;
} else {
for (int i = 0; i < listAcc.size(); i++) {
if (listAcc.get(i).getUserName().equals(userName)
&& listAcc.get(i).getPassWord().equals(passWord)) {
return true;
}
}
}
return false;
}
}

– Chú ý:Ở đây bạn phải tạo một database access để lưu trữ dữ liệu để đăng nhập, mình tạo database tên là: databaseLogin, gồm một table Account với hai trường là : userName và passWord như sau:

Và bây giờ bạn phải tạo một cầu nói ODBC đên database vừa tạo để truy xuất dữ liệu như sau:

Start->Control panel -> Administrative Tools ->Data Source(ODBC) ->user DSN ->Add ->Microsoft Access Driver(*.mdb,*.accdb)->finish:

Điền các thông tin ở hợp thoại ODBC Microsoft……

+ Data source name: DatabaseAccount.

+Description:….

+database: Select ->brown đến nơi lưu database(databaseLogin) vừa tạo->OK.

ta se được:


4) Tạo lớp LoginServlet.java() thuộc package controler(nhấp phải controler->New ->package,đăt tên package:LoginServlet ->finish) dùng để xử lý request với nội dung sau:

package controler;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.AccountManager;

/**
* Servlet implementation class XuLiDangNhap
*/
@WebServlet(“/XuLiDangNhap”)
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* Default constructor.
*/
public LoginServlet() {
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

String userName = request.getParameter(“userName”);
String passWord = request.getParameter(“passWord”);
System.out.println(“userName: ” + userName + “, passWord: ” + passWord);
AccountManager am = new AccountManager();
boolean re = am.checkAccount(userName, passWord);
if (re) {
response.getWriter().write(“Dang Nhap Thanh Cong !”);
System.out.println(“1”);
} else {
response.getWriter().write(“Tai Khoan Khong Hop Le !”);
System.out.println(“2”);
}

}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

}

– Chú ý: Nếu bị báo lỗi do ban chưa add thư viện.Để add thư viện bạn lam như sau:

b1: (add server vao Eclipse) Window->References ->Server -> Runtime Environmets ->Add ->Apache ->Apache tomcat V7.0

->Next -> ở mục tomcat installation directory bạn brown đên thư mục apache tomcat 7.0 vừa down về ->Finish

b2: (add thư viện vào project) Nhấp phải lên Project LoginExample ->properties ->Java Build path ->Libraries ->Add library.. ->Server Runtime ->Apache Tomcat V7.0->Finish.

5)Tạo file web.xml nằm trong thư mục(Webcontent->WEB-INF)để chạy web như sau:

Nhấp phải Webcontent->New->WEB->xml file,đăt tên file web.xml->finish.Với nội dung sau:

 

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xmlns=”http://java.sun.com/xml/ns/javaee&#8221; xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&#8221;
version=”2.5″>
<display-name>LoginExample</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>LoginServlet</display-name>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>controler.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>

</web-app>

==>Cấu trúc thư mục như sau:

6) Chạy ứng dung:

Chạy file login.jsp ta được

– Nêu bạn quên nhập pass:

– Đăng Nhập thành công:

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

 
%d bloggers like this: