Membuat Form Login Dengan Servlet dan JSP – Pada artikel sebelumnya saya sudah membahas bagaimana Membuat Form Login dan Registrasi Dengan JSP. Namun pada tutorial tersebut kita hanya menggunakan file JSP saja untuk melakukan login dan registrasi, Tentunya, ini sangat tidak efektif apabila kita ingin membangun skala besar, karena semua tidak dipisah-pisah sesuai dengan fungsinya. Untuk itu, pada tutorial kali ini saya akan membuat tutorial tentang membuat form login dengan servlet dan jsp dengan pattern MVC. Dengan pattern MVC (Model, View, Controller) ini kode yang akan kita bangun akan jauh lebih efektif. Pada pattern MVC ini juga kita akan membagi class-class hingga kebagian terkecil.
Goal dari tutorial ini adalah:
- mampu membuat system login dengan Pattern MVC.
- Membuat Validasi sederhana pada Form Login.
Membuat Form Login Dengan Servlet dan JSP
Buatlah database dengan nama latihan_login dan table dengan nama user. Atau anda bisa dumping query SQL berikut:
-- phpMyAdmin SQL Dump -- version 4.2.7.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Dec 09, 2016 at 08:55 AM -- Server version: 5.6.20 -- PHP Version: 5.5.15 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `latihan_login` -- -- -------------------------------------------------------- -- -- Table structure for table `user` -- CREATE TABLE IF NOT EXISTS `user` ( `id` int(4) NOT NULL, `username` varchar(10) NOT NULL, `email` varchar(25) NOT NULL, `password` varchar(15) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; -- -- Dumping data for table `user` -- INSERT INTO `user` (`id`, `username`, `email`, `password`) VALUES (1, 'admin', 'admin@tutorialpedia.net', 'admin'), (3, 'pedia', 'fikri@tutorialpedia.net', 'fikri'); -- -- Indexes for dumped tables -- -- -- Indexes for table `user` -- ALTER TABLE `user` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `user` -- ALTER TABLE `user` MODIFY `id` int(4) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Buat package, servlet dan juga Java Class. Lihat Gambar!
Keterangan:
Package net.tutorialpedia.controller
———-Login.java (servlet)
Package net.tutorialpedia.model
———-KoneksiDB (Java Class)
———-UserModel (Java class)
Membuat View dengan file JSP. Lihat Gambar!
Keterangan:
index.jsp adalah file yang digunakan untuk membuat form login.
sukses.jsp adalah halaman ketika anda berhasil melakukan login.
gagal.jsp adalah landing page ketika anda salah memasukkan username ataupun password.
form-kosong.jsp adalah landing page ketika anda belum memasukkan apapun pada form login lalu langsung menekan enter/tombol login.
Berikut ini adalah barisan kode-kode pada masing-masing file tersebut.
Login.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package net.tutorialpedia.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.tutorialpedia.model.UserModel;
/**
*
* @author TutorialPedia.NET
*/
public class Login extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String action= request.getParameter("action");
if (action.equals("logout")) {
HttpSession session = request.getSession();
session.invalidate();
response.sendRedirect("index.jsp");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String proses = request.getParameter("proses");
if (proses.equals("login")) {
String user = request.getParameter("username");
String pass = request.getParameter("password");
String email=request.getParameter("email");
String id=request.getParameter("id");
if (pass == null || pass.equals("")) { //validasi apabila field belum diisi
response.sendRedirect("form-kosong.jsp");
} else {
UserModel pm = new UserModel();
List<UserModel> datalogin = new ArrayList<UserModel>();
datalogin = pm.LoginUser(user, pass);
if (datalogin.isEmpty()) { //validasi apabila username dan password salah
response.sendRedirect("gagal.jsp");
} else {
HttpSession session = request.getSession(true);
session.setAttribute("email", datalogin.get(0).getEmail());
session.setAttribute("username", datalogin.get(0).getUsername());
session.setAttribute("id", datalogin.get(0).getId());
if (datalogin.get(0).getUsername().equals(user)) {
response.sendRedirect("sukses.jsp");
} else {
response.sendRedirect("index.jsp");
}
}
}
}
}
}
KoneksiDB.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package net.tutorialpedia.model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
/**
*
* @author TutorialPedia.NET
*/
public class KoneksiDB {
private Connection conn;
private Statement st;
public static void ambilKoneksi() {
try {
String db = "jdbc:mysql://localhost:3306/latihan_login";
String user = "root";
String pass = "jogj4k4rt4";
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(db, user, pass);
} catch (Exception x) {
System.out.println("Terjadi kesalahan ambil koneksi : " + x);
}
}
public void koneksi() {
try {
String db = "jdbc:mysql://localhost:3306/latihan_login";
String user = "root";
String pass = "jogj4k4rt4";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(db, user, pass);
st = conn.createStatement();
} catch (Exception x) {
System.out.println("Terjadi kesalahan koneksi : " + x);
}
}
public void diskonek(ResultSet rs) {
try {
if (rs != null) {
rs.close();
}
st.close();
conn.close();
} catch (Exception x) {
System.out.println("Terjadi kesalahan diskoneksi : " + x);
}
}
public ResultSet ambilData(String sql) {
ResultSet rs = null;
try {
koneksi();
rs = st.executeQuery(sql);
} catch (Exception x) {
System.out.println("Terjadi kesalahan ambil data : " + x);
}
return rs;
}
}
UserModel.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package net.tutorialpedia.model;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
/**
*
* @author TutorialPedia.NET
*/
public class UserModel {
String id,username,email,password;
KoneksiDB db = null;
public UserModel() {
db = new KoneksiDB();
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
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;
}
public List LoginUser(String user, String password) {
List data = new ArrayList();
ResultSet rs = null;
try {
String sql = "select * from USER where username='" + user + "' and password='" + password + "'";
rs = db.ambilData(sql);
while (rs.next()) {
UserModel am = new UserModel();
am.setId(rs.getString("id"));
am.setUsername(rs.getString("username"));
am.setEmail(rs.getString("email"));
am.setPassword(rs.getString("password"));
data.add(am);
}
db.diskonek(rs);
} catch (Exception a) {
System.out.println("Terjadi kesalahaan cari login admin, pada :\n" + a);
}
return data;
}
}
Index.jsp
<%--
Document : index
Created on : Dec 9, 2016, 1:23:28 PM
Author : TutorialPedia.NET
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<form method="post" action="Login?proses=login">
<center>
<table border="1" width="30%" cellpadding="3">
<thead>
<tr>
<th colspan="2">Login Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" name="username" value="" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</tbody>
</table>
</center>
</form><br><br>
<center>
More Tutorial visit <a target="_blank" href="https://www.tutorialpedia.net">TutorialPedia.NET</a>
</center>
</body>
</html>
Sukses.jsp
<%--
Document : sukses_login
Created on : Dec 9, 2016, 1:27:59 PM
Author : TutorialPedia.NET
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sukses</title>
</head>
<body>
<%
if ((session.getAttribute("username") == null) || (session.getAttribute("username") == "")) {
response.sendRedirect(application.getContextPath() + "https://cdn.tutorialpedia.net/belum-login.jsp");
%>
<%
}
%>
<h1> Welcome <%=session.getAttribute("username")%></h1>
<a href="Login?action=logout">Logout</a>
</body>
</html>
gagal.jsp
<%--
Document : gagal
Created on : Dec 9, 2016, 1:44:37 PM
Author : TutorialPedia.NET
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>GAGAL LOGIN!! USERNAME or PASSSWORD SALAH!!!</h1>
</body>
</html>
form-kosong.jsp
<%--
Document : form-kosong
Created on : Dec 9, 2016, 2:14:44 PM
Author : TutorialPedia.NET
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GAGAL!</title>
</head>
<body>
<h1>ISI DULU BARU KLIK LOGIN!!</h1>
</body>
</html>
Silahkan anda pelajari fungsi dari masing-masing kode tersebut.
Sebelum melakukan running jangan lupa untuk menambah library mysql.
Sekarang coba run project anda.
Jika mendapat error, coba trace error tersebut melalui console aplication server yang anda gunakan.
Demikian artikel Membuat Form Login Dengan Servlet dan JSP.
Yth Bang Admin,
Saya Dana baru belajar2 javascript pakai netbeans, sudah coba ikutin langkah2 diatas tapi begitu dijalankan hasilnya selalu masuk ke GAGAL LOGIN!! USERNAME or PASSSWORD SALAH!!! padahal user dan passwordnya udah benar. mohon bantuan dan panduannya bang, Terima kasih