Tutorial Membuat Form login dan registrasi menggunakan JSP pada Neatbeans

1. Mengaktifkan server apache dan MYSql

Temukan xampp-control.exe pada Direktory C:/xampp kemudian 2x klik, sehingga muncul

xampp control panel dan klick Start pada apache dan mysql seperti gambar dibawah

2. Buka Browser dan ketikkan url localhost/phpmyadmin untuk membuat database belajar dan
table admin
Klick New dan masukkan nama databasenya belajar kemudian Klick Create

Setelah database nya selesai buat table admin dengan cara sbb :

➔ Klick menu SQL, ketik atau Copy text dibawah kemudian paste lalu klick GO

CREATE TABLE `admin` (

`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 25 ) NOT NULL ,
`password` VARCHAR( 25 ) NOT NULL ,
`email` VARCHAR( 25 ) NOT NULL ,
`regdate` DATE NOT NULL
) ENGINE = INNODB;

3. Buka Aplikasi neatbeans

Buat project baru dengan cara Klick menu File -> New Project -> pada Categories pilih Java Web
dan pada Project pilih Web Application setelah itu Klick Next
4. Tentukan konfigurasi tempat penyimpanan dengan
Project name login_registrasi, project location D:/latihanweb kemudian Klick Next

5. Tentukan konfigurasi server dengan

Server Apache Tomcat 8.0.3.0 dan java EE versions Java EE 6 web kemudian Klick Finis

6. Setelah selesai Klick tanda + pada login_registrasi kemudian klick + pada Web Pages

7. Buat file jsp yang diperlukan dengan cara Klick kanan pada Web Pages -> new -> JSP dan beri
nama Login,logout,prosesregis,registrasi,sukses, dan welcome
 Hingga terlihat seperti gambar dibawah.

8. Klick 2x pada file index.jsp dan masukkan atau ketik code berikut :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Login</title>
<form method="post" action="login.jsp">
<center><table width="30%" cellpadding="3" border="1">
<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>
<tr><td colspan="2">Yet Not Registered!! <a href="registrasi.jsp">Register Here</a></td></tr>
</tbody>
</table></center> </form>

9. Klick 2x pada file login.jsp dan masukkan atau ketik code berikut :
<%@ page import ="java.sql.*" %>
<%
String userid = request.getParameter("username");
String pwd = request.getParameter("password");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/belajar",
"root", "");
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("sukses.jsp");
} else {
out.println("Invalid password <a href='index.jsp'>try again</a>");
}
%>
10. Klick 2x pada file logout.jsp dan masukkan atau ketik code berikut :

<%
session.setAttribute("username", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>

11. Klick 2x pada file prosesregis.jsp dan masukkan atau ketik code berikut :
<%@ page import ="java.sql.*" %>
<%
String user = request.getParameter("username");
String pwd = request.getParameter("password");
String email = request.getParameter("email");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/belajar",
"root", "");
Statement st = con.createStatement();
//ResultSet rs;
int i = st.executeUpdate("insert into admin( email, username, password, regdate) values ('" + email + "','" + user +
"','" + pwd + "', CURDATE())");
if (i > 0) {
//session.setAttribute("userid", user);
response.sendRedirect("welcome.jsp");
// out.print("Registration Successfull!"+"<a href='index.jsp'>Go to Login</a>");
} else {
response.sendRedirect("index.jsp");
}
%>
12. Klick 2x pada file registrasi.jsp dan masukkan atau ketik code berikut :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registration</title>
<form method="post" action="prosesregis.jsp">
<center>
<table width="30%" cellpadding="5" border="1">
<thead><tr><th colspan="2">Enter Information Here</th></tr></thead>
<tbody><tr><td>Username</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>Email</td><td><input type="text" name="email" value=""></td></tr>
<tr><td><input type="submit" value="Submit"></td><td><input type="reset" value="Reset"></td></tr>
<tr><td colspan="2">Already registered!! <a href="index.jsp">Login Here</a></td></tr>
</tbody>
</table>
</center>
</form>

13. Klick 2x pada sukses.jsp dan masukkan atau ketik code berikut :
<%
if ((session.getAttribute("userid") == null) || (session.getAttribute("userid") == "")) {
%>
Anda Belum login <br/>
<a href="index.jsp">Silahkan Login</a>
<%} else {
%>
Welcome <%=session.getAttribute("userid")%>
<a href='logout.jsp'>Log out</a>
<%
}
%>

14. Klick 2x pada welcome.jsp dan masukkan atau ketik code berikut :
registrasi berhasil <br>
silahkan login <a href='index.jsp'>Login</a>
15. Setelah semua code dimasukkan atau diketik dimasing-masing file, buat koneksi ke database
yang sudah dibuat diawal, dengan cara Klick kanan pada libraries kemudian pilih Add Library

Kemudian cari MySQL JDBC Driver kemudia Klick Add Library

16. Setelah semua proses dilakukan adalah menjalankan aplikasi yang sudah dibuat dengan cara
Klick kanan project yang dibuat yaitu Login_Regristrasi -> Klick RUN
Tunggu sampai proses deloy selesai dan membuka Browser

17. Applikasi Siap digunakan

Login,logout,prosesregis,registrasi,sukses,welcome