Contoh Program JSP: Formulir Pendaftaran & Login

Oleh: James Hartman James Hartman
Hours Updated

contoh program jsp

Dalam tutorial ini, saya akan memandu Anda mengembangkan program contoh dengan JSP dan menerapkan arsitektur MVC dalam tutorial ini.

Contoh program berikut akan dikembangkan:

  • Formulir Registrasi
  • Formulir Masuk dan Keluar
  • Formulir JSP

Menggunakan formulir pendaftaran melalui JSP

Pada formulir Pendaftaran, kita akan memiliki formulir untuk mengisi semua rincian yang akan berisi nama, nama pengguna, kata sandi, alamat, nomor kontak, dll.

Formulir ini akan membantu kami untuk mendaftar dengan aplikasi. Mereka mengambil semua detail kami dan menyimpannya di Database atau cache.

Dalam contoh ini, kita akan mengambil “Formulir Pendaftaran Guru” yang memiliki bidang-bidang berikut:

  1. Nama Depan
  2. Nama Belakang
  3. Nama Pengguna
  4. Kata Sandi
  5. Alamat
  6. Hubungi Nomor

Setelah mengisi semua rincian ini, ada tombol kirim, dengan mengklik tombol itu semua rincian akan disimpan.

Contoh 1: Daftar_1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Registration Form</title>
</head>
<body>
<h1>Guru Register Form</h1>
<form action="guru_register" method="post">
			<table style="with: 50%">
				<tr>
					<td>First Name</td>
					<td><input type="text" name="first_name" /></td>
				</tr>
				<tr>
					<td>Last Name</td>
					<td><input type="text" name="last_name" /></td>
				</tr>
				<tr>
					<td>UserName</td>
					<td><input type="text" name="username" /></td>
				</tr>
					<tr>
					<td>Password</td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td>Address</td>
					<td><input type="text" name="address" /></td>
				</tr>
				<tr>
					<td>Contact No</td>
					<td><input type="text" name="contact" /></td>
				</tr></table>
			<input type="submit" value="Submit" /></form>
</body>
</html>

Penjelasan kodenya:

Baris Kode 11: Di sini kita mengambil nama formulir yang memiliki tindakan yaitu servlet dimana permintaan akan diproses dan nama servlet adalah guru_register.java. Permintaan akan diproses melalui metode POST.

Baris Kode 14-16: Di sini kita mengambil tipe input sebagai teks dan nama adalah nama depan

Baris Kode 18-20: Di sini kita mengambil tipe input sebagai teks dan nama adalah nama belakang

Baris Kode 22-24: Di sini kita mengambil tipe input sebagai teks dan nama adalah nama pengguna

Baris Kode 26-28: Di sini kita mengambil tipe input sebagai kata sandi (ini akan menyembunyikan kata sandi saat diketik) dan nama sebagai kata sandi

Baris Kode 30-32: Di sini kita mengambil tipe input sebagai teks dan nama sebagai alamat

Baris Kode 34-36: Di sini kita mengambil tipe input sebagai teks dan nama sebagai kontak

Baris Kode 37: Di sini kita mengambil tombol tipe kirim dan nilainya juga kirim. Saat mengklik tombol ini, tindakan akan menuju ke servlet guru_register yang sesuai di mana semua nilai parameter akan diteruskan dalam permintaan.

Contoh 2: Guru_register.java

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_register
 */
public class guru_register extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String first_name = request.getParameter("first_name");
		String last_name = request.getParameter("last_name");
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String address = request.getParameter("address");
		String contact = request.getParameter("contact");
		
		if(first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || 
				password.isEmpty() || address.isEmpty() || contact.isEmpty())
		{
			RequestDispatcher req = request.getRequestDispatcher("register_1.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_2.jsp");
			req.forward(request, response);
		}
	}

}

Penjelasan kodenya:

Baris Kode 14: Di sini kita mendefinisikan guru_servlet yang merupakan perluasan dari HttpServlet.

Baris Kode 18: Aksi ini doPost() metode yang akan dipanggil ketika kita menyebutkan atribut POST in action dalam bentuk JSP di atas.

Baris Kode 20-25: Di sini kita mengambil nilai dari permintaan i.efirst_name, last_name , nama pengguna, kata sandi, alamat dan kontak menggunakan request.getParameter.

Baris Kode 27-32: Di sini kita mengambil kondisi if di mana kita memeriksa salah satu parameter yang diambil dari permintaan apakah parameter tersebut kosong atau tidak. Jika salah satu parameter kosong maka akan memasuki kondisi ini ( first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) dan kita punya untuk mengambil objek RequestDispatcher menggunakan objek permintaan yang akan meneruskan permintaan ke register_1.jsp. Di sini kami juga menyertakan objek permintaan dan respons.

Baris Kode 33-37: Kasus ini akan dijalankan ketika salah satu parameter tidak kosong. Kita harus mengambil objek requestDispatcher menggunakan objek permintaan yang akan meneruskan permintaan ke register_2.jsp. Di sini kita meneruskan objek permintaan dan respons.

Contoh 3: Daftar_2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Success Page</title>
</head>
<body>
           <a><b>Welcome User!!!!</b></a>
</body>
</html>

Penjelasan kodenya:

Baris Kode 10: Di sini kami mengucapkan selamat datang pengguna. JSP ini akan dipanggil ketika semua parameter terisi.

Ketika Anda menjalankan kode di atas, Anda mendapatkan output berikut:

Menggunakan Formulir Pendaftaran melalui JSP

Menggunakan Formulir Pendaftaran melalui JSP

Keluaran:

Ketika kita mengklik register_1.jsp, kita akan mendapatkan formulir yang berisi rincian seperti nama depan, nama belakang, nama pengguna, kata sandi, alamat, kontak. Semua rincian telah diisi. Ketika kita mengklik tombol kirim, kita akan mendapatkan pesan “Selamat Datang Pengguna”

ARTIKEL TERKAIT

Formulir masuk dan keluar

Seperti formulir pendaftaran kita akan memiliki formulir login dan logout.

Dalam contoh ini, kita telah mengambil formulir Login di mana kita memiliki dua kolom “nama pengguna” dan “kata sandi” dengan tombol kirim.

Ketika kita mengklik tombol kirim maka kita mendapat pesan selamat datang dengan tombol logout.

Ketika kita mengklik tombol logout maka kita kembali ke form login.

Contoh 1: Daftar_3.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Login Form</title>
</head>
<body>
<form action="guru_login" method="post">
		<table style="with: 50%">

			<tr>
				<td>UserName</td>
				<td><input type="text" name="username" /></td>
			</tr>
				<tr>
				<td>Password</td>
				<td><input type="password" name="password" /></td>
			</tr>
		</table>
		<input type="submit" value="Login" /></form>
</body>
</html>

Penjelasan kodenya:

Baris Kode 10: Di sini kita mengambil nama bentuk yang memiliki tindakan yaitu servlet yang dilewatinya adalah guru_login.java. Metode yang digunakan untuk meneruskan POST-nya.

Baris Kode 13-16: Di sini kita mengambil kolom input "nama pengguna" yang bertipe teks.

Baris Kode 17-20: Di sini kita mengambil kolom input "kata sandi" yang bertipe kata sandi.

Baris Kode 22: Di sini kita mengambil tombol "kirim" dengan nilai "Login" yang kita klik lalu pergi ke servlet guru_login di mana kedua bidang tersebut diambil menggunakan objek permintaan.

Guru_login.java(servlet)

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_login
 */
public class guru_login extends HttpServlet {

    public guru_login() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		if(username.isEmpty() || password.isEmpty() )
		{
			RequestDispatcher req = request.getRequestDispatcher("register_3.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_4.jsp");
			req.forward(request, response);
		}
	}

}

Penjelasan kodenya:

Baris Kode 5-9: Di sini kita mengimpor impor yang diperlukan dalam kode.

Baris Kode 14: Di sini kita mengambil servlet guru_login yang memperluas HttpServlet.

Baris Kode 21: Di sini kita gunakan doPost() metode seperti pada formulir kami menggunakan metode POST.

Baris Kode 23-24: Disini kita mengambil parameter menggunakan objek request yaitu username dan password.

Baris Kode 25-29: Dengan cara ini, kita mengambil kondisi “jika” di mana kita memeriksa nama pengguna dan kata sandi apakah kosong atau tidak. Dalam hal ini jika kosong maka kita mendapatkan objek requestdispatcher yang meneruskan ke register_3.jsp dengan objek permintaan dan respons.

Baris Kode 30-34: Ini akan dieksekusi jika keduanya tidak kosong kemudian meneruskan permintaan ke register_4.jsp dengan objek permintaan dan respons.

Contoh 2: Daftar_4.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Logged In</title>
</head>
<body>
	<table style="with: 50%">
	<tr><td>
	<% String username = request.getParameter("username"); %>
<a>Welcome   <% out.println(username); %> User!!!! You have logged in.</a></td></tr>
<tr></tr><tr><td></td><td></td><td><a href="register_3.jsp"><b>Logout</b></a></td></tr>
</table>
</body>
</html>

Penjelasan kodenya:

Baris Kode 12: Di sini kita mendapatkan parameter "nama pengguna" dari objek permintaan di nama pengguna objek string.

Baris Kode 13: Di sini kami memiliki pesan selamat datang dengan nama pengguna.

Baris Kode 14: Disini kita link untuk logout form yang dialihkan ke register_3.jsp.

Ketika Anda menjalankan kode di atas maka Anda akan mendapatkan output berikut:

Keluaran:

Di sini ketika kita mengklik register_3.jsp kita mendapatkan dua bidang “nama pengguna” dan “kata sandi” dengan tombol login.

Formulir Masuk dan Keluar

Setelah mengklik tombol Login Anda mendapatkan pesan di bawah ini dengan tombol Logout.

Formulir Masuk dan Keluar

Ketika Anda mengklik tombol logout, Anda kembali ke halaman login

Formulir Masuk dan Keluar

Pemrosesan Formulir JSP Menggunakan getParameter()

Pemrosesan Formulir JSP:

Formulir adalah metode umum dalam pemrosesan web. Kita perlu mengirimkan informasi ke server web dan informasi itu.

Ada dua metode yang umum digunakan untuk mengirim dan mendapatkan kembali informasi ke server web.

DAPATKAN Metode:

  • Ini adalah metode default untuk meneruskan informasi dari browser ke server web.
  • Ini mengirimkan informasi yang disandikan dipisahkan oleh ?karakter yang ditambahkan ke halaman URL.
  • Ini juga memiliki batasan ukuran, dan kami hanya dapat mengirim 1024 karakter dalam permintaan.
  • Kita harus menghindari pengiriman kata sandi dan informasi sensitif melalui metode GET.

Metode POSTING:

  • Metode posting adalah metode pengiriman informasi yang paling dapat diandalkan ke server.
  • Ini mengirimkan informasi sebagai pesan terpisah.
  • Ini dikirim sebagai string teks setelah ?di URL.
  • Biasanya digunakan untuk mengirim informasi yang sensitif.

JSP menangani pemrosesan data formulir dengan menggunakan metode berikut:

  1. getParameter(): Digunakan untuk mendapatkan nilai parameter form.
  2. getParameterValues(): Ini digunakan untuk mengembalikan beberapa nilai parameter.
  3. getParameterNames(): Digunakan untuk mendapatkan nama parameter.
  4. getInputStream(): Digunakan untuk membaca data biner yang dikirim oleh klien.

Contoh:

Dalam contoh ini, kita telah mengambil formulir dengan dua bidang.”nama pengguna” dan “kata sandi” dengan tombol kirim

Aksi_form.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Form</title>
</head>
<body>
<form action="action_form_process.jsp" method="GET">
UserName: <input type="text" name="username">
<br />
Password: <input type="text" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Aksi_bentuk_proses.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<h1>Form Processing</h1>

<p><b>Welcome User:</b>
   <%= request.getParameter("username")%>
</p>

</body>
</html>

Penjelasan kode: Action_form.jsp

Baris Kode 10: Di sini kita telah mendefinisikan suatu bentuk dan melaluinya kita memproses tindakan ke bentuk lain JSP. Dalam parameter tindakan, kami menambahkan JSP yang harus diproses melalui metode GET.

Di sini kami menggunakan metode GET untuk menyampaikan informasi yaitu nama pengguna dan kata sandi.

Baris Kode 11-14: Di sini kami mengambil kolom seperti nama pengguna dan kata sandi yang merupakan kolom teks, dan kami mendapatkan masukan dari pengguna.

Masukan ini dapat diambil menggunakan metode getParameter. Selain itu, kami memiliki tombol kirim dengan tipe kirim yang membantu kami meneruskan nilai bidang ke action_form_process.jsp

Aksi_bentuk_proses.jsp

Baris Kode 14: Di sini kita mendapatkan nilai kolom input dari action_form.jsp menggunakan metode getParameter objek permintaan.

Ketika kita mengeksekusi kode di atas, kita mendapatkan output berikut:

Pemrosesan Formulir JSP

Pemrosesan Formulir JSP

Keluaran:

Ketika kita mengeksekusi action_form.jsp, kita mendapatkan formulir dengan dua bidang nama pengguna dan kata sandi dan tombol kirim. Kemudian setelah memasukkan nama pengguna dan kata sandi, kita dapat mengklik kirim, dan diproses ke halaman berikutnya yang memberikan output sebagai halaman pemrosesan Formulir dengan a pesan selamat datang.

Ringkaslah postingan ini dengan: