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.

    Free $100
    Deal

    Daftar menggunakan link di pojok kanan atas, minimal top up $25 usd. Maka dalam waktu 30 hari setelah registrasi anda akan mendapatkan credit $100 gratis dari vultr untuk mencoba layanan mereka.

    More Less
    Doesn't expire

    Recent Articles

    cara setting pppoe client

    Cara Setting PPPoE Client di TP Link WR840n dengan Mudah

    0
    Cara Setting PPPoE Client - Pada artikel sebelumnya saya sudah memberikan tutorial bagaimana Cara Setting PPPoE Server di Mikrotik. Pada tutorial berikutnya, kita akan mengaplikasikan pppoe kepada...

    Apa itu Staking Crypto dan Bagaimana Cara Melakukan Staking

    0
    Apa itu Staking Crypto - Akhir-akhir ini staking crypto banyak sekali menjadi pembicaraan buah bibir di kalangan investor crypto. Mungkin masih banyak dari para investor...

    Cara Setting PPPoE Server di Mikrotik

    0
    Cara Setting PPPoE Server - Pada tutorial sebelumnya kita telah belajar tentang bagaimana Cara Setting Hotspot Voucher di Mikrotik. Kali ini, saya akan melanjutkan sesi tutorial...
    Cara Setting Hotspot

    Cara Setting Hotspot Voucher di Mikrotik

    0
    Cara Setting Hotspot Voucher - Pada tutorial sebelumnya, kita sudah membahas apa itu mikrotik dan bagaimana cara melakukan konfigurasi dasar agar mikrotik kita bisa terhubung dengan internet. Router...
    konfigurasi dasar mikrotik

    Konfigurasi Dasar Mikrotik

    0
    Konfigurasi Dasar Mikrotik - Pada artikel sebelumnya, kita telah mengetahui Apa itu Mikrotik dan Fungsinya. Untuk kesempatan kali ini, kita akan mencoba melakukan konfigurasi dasar pada...

    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!