Membuat Login Session dan Register Member dengan JSP dan MySQL

Membuat Login Session dan Register Member dengan JSP dan MySQL

Membuat login adalah suatu hal yang sangat penting digunakan pada sebuah program baik itu web maupun desktop, kebanyakan program login digunakan pada aplikasi yang membutuhkan member. Pada kali ini penulis akan membahas cara membuat login session dan register member dengan menggunakan bahasa pemrograman java web yaitu jsp dan menggunakan mysql sebagai tempat penyimpanannya atau databasenya.

Untuk membuat project maka yang anda perlukan adalah sebuah ide java anda bisa menggunakan eclipse atau netbeans, saya sarankan gunakan netbeans karena mudah dan sangat friendly, untuk mendapatkan netbeans bisa di download disitus resmi mereka Netbeans dan untuk program database yaitu mysql bisa didapatkan di MySQL, kemudian install aplikasinya dan jalankan.

Buatlah sebuah database pada mysql dengan nama basisdata atau terserah anda dan tabel dengan nama admin, untuk lebih lengkap lihat syntax yang ada dibawah ini.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `admin` (
  `id_user` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(45) NOT NULL,
  `jk` varchar(20) NOT NULL,
  `tgl` date NOT NULL,
  `alamat` text NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(15) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  PRIMARY KEY (`id_user`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `admin` (`id_user`, `nama`, `jk`, `tgl`, `alamat`, `email`, `phone`, `username`, `password`) VALUES
(1, 'Ghazali', 'Laki-laki', '2014-02-04', 'pidie, aceh, indonesia', 'juliana.pijay@gmail.com', '', 'ghazali', 'ghazali'),
(2, 'Administrator', 'Other', '2014-02-12', 'Other', 'Other@other.oth', '', 'admin', 'admin'),
(3, 'User ID', 'Other', '2014-02-06', 'Other', 'user@other.com', '', 'user', 'user'),
(4, 'Boyhaki', 'Laki-laki', '1999-08-15', 'desa baroh', 'boyhaki.extra@gmail.com', '0876654444', 'boy', 'haki'),
(5, 'intan', 'Perempuan', '1980-01-01', 'garot calee', 'gar@gmail.com', '086544333', 'intan', 'karmila');

Selanjutnya buatlah sebuah project pada netbeans dengan nama WebLogReg dengan klik new project -> pilih java web -> klik web application. untuk syntaxnya ada dibawah ini.

index.jsp

<%-- 
    Document   : index
    Created on : Feb 14, 2014, 2:16:15 PM
    Author     : ghazali
--%>

<%@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>
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;background:#000;}
 #con{background:#fff;width:350px;padding:30px;margin-top:200px;border-radius:20px;border:1 solid #eee;box-shadow:2px 6px 10px #ccc;}
 h2{text-align:center;margin-bottom:15px;}
 p{margin-bottom:10px;}
 label{display:inline-block;width:100px;}
 input[type=submit]{border:none;color:#fff;background:linear-gradient(top, #333 0%, #777 100%);background:-moz-linear-gradient(top, #333 0%, #777 100%);background:-webkit-linear-gradient(top, #333 0%, #777 100%);height:30px;width:100px;border-radius:5px;}
 input[type=submit]:active{background:linear-gradient(top, #888 0%, #bbb 100%);background:-moz-linear-gradient(top, #888 0%, #bbb 100%);background:-webkit-linear-gradient(top, #888 0%, #bbb 100%);}
        </style>
    </head>
    <body>
        <div id="con">
 <h2>Login Area</h2>
 <form action="login.jsp" method="post">
 <p>
  <label>Username</label>
  <input type="text" name="username"/>
 </p>
 <p>
  <label>Password</label>
  <input type="password" name="password"/>
 </p>
 <p>
  <label></label>
  <input type="submit" name="submit" Value="Masuk"/>
                <a href="reg.jsp">Register Now</a>
 </p>
 </form>
        </div>
    </body>
</html>

loginjsp

reg.jsp

<%-- 
    Document   : reg
    Created on : Feb 14, 2014, 2:18:16 PM
    Author     : ghazali
--%>

<%@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>
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;background:#000;}
 #con{background:#fff;width:350px;padding:30px;margin-top:100px;border-radius:20px;border:1 solid #eee;box-shadow:2px 6px 10px #ccc;}
 h2{text-align:center;margin-bottom:15px;}
 p{margin-bottom:10px;}
 label{display:inline-block;width:100px;}
 input[type=submit]{border:none;color:#fff;background:linear-gradient(top, #333 0%, #777 100%);background:-moz-linear-gradient(top, #333 0%, #777 100%);background:-webkit-linear-gradient(top, #333 0%, #777 100%);height:30px;width:100px;border-radius:5px;}
 input[type=submit]:active{background:linear-gradient(top, #888 0%, #bbb 100%);background:-moz-linear-gradient(top, #888 0%, #bbb 100%);background:-webkit-linear-gradient(top, #888 0%, #bbb 100%);}
        </style>
    </head>
    <body>
        <div id="con">
 <h2>Register Area</h2>
 <form action="register.jsp" method="post">
 <p>
  <label>Nama</label>
  <input type="text" name="nama"/>
 </p>
 <p>
  <label>Kelamin</label>
  <input type="radio" name="jk" value="Laki-laki" checked/> Laki-laki
  <input type="radio" name="jk" value="Perempuan"/> Perempuan
 </p>
 <p>
  <label>Lahir</label>
  <select name="lhari">
  <%
                    for(int a=1;a<=31;a++){
  %>
                <option><% out.println(a); %></option>
  <% 
                    }
  %>
  </select>
  <select name="lbulan">
  <%
                    for(int a=1;a<=12;a++){
  %>
   <option><% out.println(a); %></option>
  <% 
                    }
  %>
  </select>
  <select name="ltahun">
  <%
                    for(int a=1980;a<=2014;a++){
  %>
   <option><% out.println(a); %></option>
  <% 
                    }
  %>
  </select>
 </p>
 <p>
  <label>Alamat</label>
  <input type="text" name="alamat"/>
 </p>
 <p>
  <label>Email</label>
  <input type="email" name="email"/>
 </p>
 <p>
  <label>Phone</label>
  <input type="phone" name="phone"/>
 </p>
 <p>
  <label>Username</label>
  <input type="text" name="username"/>
 </p>
 <p>
  <label>Password</label>
  <input type="password" name="password"/>
 </p>
 <p>
  <label></label>
  <input type="submit" name="submit" Value="Daftar"/>
 </p>
 </form>
</div>
    </body>
</html>

regjsp-352016
login.jsp

<%-- 
    Document   : login
    Created on : Feb 14, 2014, 1:29:29 PM
    Author     : ghazali
--%>


<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%
    String userid = request.getParameter("username");   
    String pwd = request.getParameter("password");
    Class.forName("com.mysql.jdbc.Driver");
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/basisdata","root", "kodokijo");
    Statement st = con.createStatement();
    ResultSet rs;
    rs = st.executeQuery("select * from admin where username='" + userid + "' and password='" + pwd + "'");
    if (rs.next()) {
        session.setAttribute("userid", userid);
        //out.println("welcome " + userid);
        //out.println("<a href='logout.jsp'>Log out</a>");
        response.sendRedirect("home.jsp");
    } else {
        out.println("<br/><p>Invalid password <a href='index.jsp'>try again</a></p>");
    }
%>

register.jsp

<%-- 
    Document   : register
    Created on : Feb 14, 2014, 1:31:34 PM
    Author     : ghazali
--%>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%
    String nama = request.getParameter("nama");
    String jk = request.getParameter("jk");
    String tgl1 = request.getParameter("ltahun");
    String tgl2 = request.getParameter("lbulan");
    String tgl3 = request.getParameter("lhari");
    String alamat = request.getParameter("alamat");
    String email = request.getParameter("email");
    String phone = request.getParameter("phone");
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    Class.forName("com.mysql.jdbc.Driver");
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/basisdata","root", "kodokijo");
    Statement st = con.createStatement();
    //ResultSet rs;
    int i = st.executeUpdate("insert into admin(nama,jk,tgl,alamat,email,phone,username,password) values ('"+nama+"','"+jk+"','"+tgl1+"-"+tgl2+"-"+tgl3+"','"+alamat+"','"+email+"','"+phone+"','"+username+"','"+password+"')");
    if (i > 0) {
        //session.setAttribute("userid", user);
        response.sendRedirect("thank.jsp");
       // out.print("Registration Successfull!"+"<a href='index.jsp'>Go to Login</a>");
    } else {
        response.sendRedirect("index.jsp");
    }
%>

thank.jsp

<%-- 
    Document   : thank
    Created on : Feb 14, 2014, 1:17:26 PM
    Author     : ghazali
--%>

<%@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>
        Registration is Successful.
        Please Login Here <a href='index.jsp'>Go to Login</a>
    </body>
</html>

home.jsp

<%-- 
    Document   : home
    Created on : Feb 14, 2014, 1:20:59 PM
    Author     : ghazali
--%>

<%@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>
        <%
        if ((session.getAttribute("userid") == null) || (session.getAttribute("userid") == "")) {
        %>
            You are not logged in<br/>
            <a href="index.jsp">Please Login</a>
        <%} else {
        %>
            Welcome <%=session.getAttribute("userid")%>
            <a href='logout.jsp'>Log out</a>
        <%
        }
        %>
    </body>
</html>

logout.jsp

<%-- 
    Document   : logout
    Created on : Feb 14, 2014, 1:24:11 PM
    Author     : ghazali
--%>
<%
session.setAttribute("userid", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>

Download Source Code

Tags: , ,