Form Login Dan Registrasi User Menggunakan Java NetBeans IDE 7.4 Dengan Database MySQL

Assalamu'alaikum warah matullahi wabarakatuh,

Kali ini aku akan berbagi cara membuat project sederhana menggunakan Java Net Beans 7.4, project yang kita buat adalah Project Login Dan Registrasi. Oya sampai lupa, perkenalkan namaku Ekisawaja, blogger newbie yang ingin berbagi ilmu dan pengalaman, semoga nantinya menjadi amal jariyah..amiiin.
Oke cukup dulu perkenalannya brosis. Kita lanjut cara membuat projectnya yah. Ikuti langkah-langkah berikut ini :
  1. Jalankan aplikasi Net Beans 7.4
  2. Pilih menu File > New Project > Pilih Web Aplication, lalu beri nama misal Form_Login_Dan_Registrasi, di setiap spasi gunakan tanda "_" (underscore), setelah itu klik Next.
  3. Pilih servernya GlassFish, Java EE Versionnya pilih Java EE 6 Web (agar ekstension formnya menjadi ".jsp"), setelah itu klik Finish.
  4. Selanjutnya klik kanan pada Project > pilih New > JSP.
  5. Selanjutnya beri nama JSP dengan "index2" > Finish.
  6. Selanjutnya buatlah JSP dengan nama file seperti gambar berikut (perhatikan untuk penulisan huruf kapital, karena sangat berpengaruh pada codingnya nanti).
  7. Selanjutnya kita masukkan Library (Add Library) untuk koneksi databasenya.
  8. Pilih Library MySQL JDBC Driver.
  9. Selanjutnya buatlah Package baru.
  10. Buatlah nama Packagenya "ServletRegisterUser".
  11. Selanjutnya kita buat Servletnya.
  12. Buatlah nama Servletnya "RegisterSaveUser" > klik Next, servlet ini digunakan untuk menyimpan data user yang sudah melakukan registrasi.
  13. Jangan lupa tanda centang untuk bagian ini.
  14. Untuk Databasenya buat seperti berikut ini.
  15. Membuat table di database seperti berikut ini.

  16. Setelah itu masukkan script berikut sesuai dengan formnya
Form index.jsp
<%@ page import="java.sql.*" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Home</title>
        <link href="CSS/Login.css" type="text/css" rel="stylesheet">

<script type="text/javascript">
function validasi_input(form1){
 if
    (form1.Username.value ==="")
 {
    alert("Data Tidak Boleh Kosong!");
    return (false);
 }
 else if
    (form1.Password.value ==="")
 {
    alert("Data Tidak Boleh Kosong!");
    return (false);
 }
return (true);
}
</script>

    </head>
        <body>
            <form method="post" action="Login.jsp" onsubmit="return validasi_input(this)">
            <center><h2 style="color:green">Login</h2></center>
        <table border="1" cellpadding="2" cellspacing="2" rules="all" style="border:solid 1px" align="center">
        <tr>
            <td><h2 style="font-family:cursive">Username :</h2></td>
            <td><input type="text" name="Username"/></td>
        </tr>
        <tr>
            <td><h2 style="font-family:cursive">Password :</h2></td>
            <td><input type="password" name="Password"/></td>
        </tr>
        <tr>
            <td><a href=RegisterUser.jsp>Registrasi</a></td>
            <td><input type="submit" value="Masuk" /></td>
        </table>
            </form>
           
    </body>
</html>

Form Error.jsp
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Login Error</title>
    </head>
        <body>
            <center><p style="color:red">Maaf Username Atau Password Salah</p></center>
                <%

                    getServletContext().getRequestDispatcher("/index.jsp").include(request,
                    response);

                %>
        </body>
</html>

Form LogOut.jsp
<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Logout</title>
            <link href="CSS/jsfcrud.css" type="text/css" rel="stylesheet">
        </head>
    <body>
    <% session.invalidate(); %>
    <p><strong>Anda Telah Keluar</strong></p>
    <p><a href=index.jsp>Masuk</a></p>
    </body>
</html>

Form Login.jsp
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Login</title>
</head>
    <body>
        <%! String userdbName;
            String userdbPsw;
        %>
        <%
            Connection con= null;
            PreparedStatement ps = null;
            ResultSet rs = null;
            String driverName = "com.mysql.jdbc.Driver";
            String url = "jdbc:mysql://localhost:3306/dbekspedisi";
            String user = "root";
            String dbpsw = "";
            String sql = "select * from tbluser where Username=? and Password=?";
            String name = request.getParameter("Username");
            String password = request.getParameter("Password");
                if((!(name.equals(null) || name.equals("")) && !(password.equals(null) ||
                password.equals(""))))
        {
                try{
                Class.forName(driverName);
                con = DriverManager.getConnection(url, user, dbpsw);
                ps = con.prepareStatement(sql);
                ps.setString(1, name);
                ps.setString(2, password);
                rs = ps.executeQuery();
                if(rs.next())
        {
                userdbName = rs.getString("Username");
                userdbPsw = rs.getString("Password");
                if(name.equals(userdbName) && password.equals(userdbPsw))
        {
                session.setAttribute("Username",userdbName);
                response.sendRedirect("index2.jsp");
        }
        }
                else
                response.sendRedirect("Error.jsp");
                rs.close();
                ps.close();
        }
            catch(SQLException sqe)
        {
            out.println(sqe);
        }
        }
                else
                response.sendRedirect("Error.jsp");
                rs.close();
                ps.close();
        {
        %>
        <%
                getServletContext().getRequestDispatcher("/Error.jsp").include(request,
                response);
        }
        %>
    </body>
</html>

Form RegisterUser.jsp
<%--
    Document   : index
    Created on : May 21, 2018, 2:42:53 PM
    Author     : USER
--%>

<%@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>
        <link href="CSS/jsfcrud.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function validasi_input(form1){
 if
    (form1.Username.value ==="")
 {
    alert("Data Tidak Boleh Kosong!");
    return (false);
 }
 else if
    (form1.Password.value ==="")
 {
    alert("Data Tidak Boleh Kosong!");
    return (false);
 }
return (true);
}
</script>

    </head>
    <body>
        <form action="RegisterSaveUser" method="post" onsubmit="return validasi_input(this)">
        <table>
           
            <h1>Register</h1>
            <p><tr><td>Username :</td><td><input type="text" name="Username"</td></tr></p>
            <p><tr><td>Password :</td><td><input type="text" name="Password"></td></tr></p>
           
        </table>
            <p><input type="submit" value="Save"</p>
        </form>
            <p><a href=index.jsp>Login</a></p>
    </body>
</html>
Form index2.jsp
<%@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>ANDA BERHASIL LOGIN</h1>
    </body>
</html>

Servlet RegisterSaveUser.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 ServletRegisterUser;

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

/**
 *
 * @author USER
 */
public class RegisterSaveUser extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try (PrintWriter out = response.getWriter()) {
            /* TODO output your page here. You may use following sample code. */
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet RegisterSaveUser</title>");           
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Servlet RegisterSaveUser at " + request.getContextPath() + "</h1>");
            out.println("</body>");
            out.println("</html>");
        }
    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}
Catatan : Sebelum kamu mengkopi script servlet, alangkah baiknya di tes terlebih dahulu, dengan cara sebagai berikut :
  1. Jalankan form index.jsp.
  2. Berikut tampilan di Mozilla, pilih Registrasi.
  3. Pilih save.
  4. Sampai tampil seperti gambar ini.


  5. Setelah itu baru kamu bisa copas script servlet RegisterSaveUser.java.

Woookeeehhhh..itu saja dari Eki, untuk tampilannya nanti Eki gunakan CSS, untuk CSSnya akan Eki bahas di postingan berikutnya ya.
Cukup sekian dari Eki, semoga bermanfaat buat yang membutuhkan ^_^ sampai jumpa di lain kesempatan.
Jika ada yang mau ditanyakan bisa di koment dibawah aja dan jangan lupa like-nya ya ^_^

Wabillahi taufik wal hidayah
Wasalamu'alaikum warahmatullahi wabarakatuh..

 

Komentar

Postingan Populer