More

    Membuat Form Login Dengan Servlet dan JSP

    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:

    1. mampu membuat system login dengan Pattern MVC.
    2. 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!

    login dengan servlet dan jsp

    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!

    login dengan servlet dan jsp

    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.

    Recent Articles

    menggabungkan file pdf

    Cara Menggabungkan File PDF

    0
    Saat ini diserba digital, tentunya kita sudah tidak asing lagi dengan yang namanya PDF. Portable Document Format atau yang biasa disebut dengan...
    cara menghitung jumlah file

    Cara Menghitung Jumlah File didalam Direktori Linux

    0
    Pada tutorial kali ini saya akan mengajarkan kepada anda tentang bagaimana cara menghitung jumlah file didalam direktori linux.
    menghapus file duplikat

    Menghapus File Duplikat di Linux

    0
    Pada artikel sebelumnya saya sudah membahas tentang Cara Menemukan File dan Folder Besar di Linux. Pada tutorial kali ini saya akan mencoba...
    cara kompres pdf

    Cara Kompres PDF Menjadi 200kb

    0
    Cara kompres PDF, PDF (Protable Document Format) Portable Document Format (disingkat PDF) adalah sebuah format berkas yang dibuat oleh Adobe Systems pada...
    menemukan file dan folder

    Cara Menemukan File dan Folder Besar di Linux

    0
    Kadang kita perlu untuk menemukan file dan folder besar di linux untuk mengosongkan space yang ada di hardisk. Tentunya sangat rumit apabila...

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!