Contoh Program JSP: Formulir Pendaftaran & Login

⚡ Ringkasan Cerdas

Contoh program JSP di sini membangun tiga modul — formulir pendaftaran, formulir masuk dan keluar, dan halaman pemrosesan formulir — yang masing-masing menghubungkan tampilan JSP ke pengontrol servlet sehingga pemisahan MVC tetap terlihat oleh pemula.

🔘 Alur pendaftaran: Register_1.jsp mengumpulkan enam field dan mengirimkannya ke servlet guru_register, yang hanya akan mengarahkan ke halaman sukses jika semua field telah terisi.
☑️ Masuk dan keluar: Register_3.jsp mengirimkan kredensial ke guru_login; Register_4.jsp menyapa pengguna dan memberikan tautan kembali ke halaman login untuk keluar.
✅ Peran MVC: Halaman JSP bertindak sebagai tampilan, servlet bertindak sebagai pengontrol, dan RequestDispatcher memindahkan permintaan di antara keduanya.
🧪 Pemrosesan formulir: getParameter(), getParameterValues(), getParameterNames() dan getInputStream() membaca data yang dikirimkan di dalam JSP atau servlet.
️ GET versus POST: GET menambahkan nilai yang dikodekan ke URL dan memiliki batasan panjang; POST membawa nilai dalam isi permintaan, yang cocok untuk kata sandi.
⚠️ Catatan versi: Daftar ini mengimpor javax.servlet, sehingga dapat berjalan di Tomcat 9 atau versi sebelumnya; Tomcat 10 dan versi yang lebih baru memerlukan paket jakarta.servlet.

Baca Selengkapnya

Contoh-contoh ini menunjukkan cara mengembangkan program sampel dengan JSP dan cara mengimplementasikan arsitektur MVC di sekitarnya. Tiga modul dibangun secara berurutan:

Formulir Registrasi
Formulir Masuk dan Keluar
Formulir JSP

Cara Membuat Formulir Pendaftaran di JSP

Dalam formulir pendaftaran, kita memiliki formulir untuk mengisi semua detail, yang berisi nama, nama pengguna, kata sandi, alamat, nomor kontak, dan lain sebagainya.

Formulir ini membantu kita untuk mendaftar ke aplikasi. Formulir ini mencatat semua detail kita dan menyimpannya dalam sebuah data. Database atau cache.

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

Nama Depan
Nama Belakang
Nama Pengguna
Kata Sandi
Alamat
Hubungi Nomor

Setelah mengisi semua detail ini, terdapat tombol kirim; dengan mengklik tombol tersebut, semua detail akan dikirim ke servlet.

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:

Code Baris 11: Di sini kita menggunakan sebuah formulir yang memiliki sebuah aksi, yaitu servlet tempat permintaan akan dikirimkan, dan nama servlet tersebut adalah guru_register.java. Permintaan akan diproses melalui metode POST.

Code Baris 14-16: Di sini kita menggunakan tipe input berupa teks dan namanya adalah first_name.

Code Baris 18-20: Di sini kita menggunakan tipe input berupa teks dan namanya adalah nama_belakang.

Code Baris 22-24: Di sini kita menggunakan tipe input berupa teks dan namanya adalah nama pengguna.

Code Baris 26-28: Di sini kita menggunakan tipe input sebagai kata sandi (ini menyembunyikan kata sandi saat diketik) dan nama sebagai kata sandi.

Code Baris 30-32: Di sini kita menggunakan tipe input berupa teks dan nama sebagai alamat.

Code Baris 34-36: Di sini kita menggunakan tipe input teks dan nama kontak.

Code Baris 37: Di sini kita menggunakan tombol bertipe submit yang nilainya juga Submit. Saat tombol ini diklik, aksi akan menuju ke servlet guru_register yang bersangkutan, di mana semua nilai parameter diteruskan dalam permintaan.

Catatan: atribut tabel di Code Baris ke-12 berbunyi style="with: 50%"Properti CSS yang benar adalah widthJadi, daftar tersebut direproduksi persis seperti yang diterbitkan, tetapi tabel tidak akan diubah ukurannya sampai kesalahan ketik tersebut diperbaiki di salinan Anda sendiri.

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:

Code Baris 14: Di sini kita mendefinisikan servlet guru_register, yang merupakan turunan dari HttpServlet.

Code Baris 18: Ini adalah metode doPost(), yang dipanggil ketika kita menentukan POST sebagai atribut metode dalam formulir JSP di atas.

Code Baris 20-25: Di sini kita mengambil nilai-nilai dari permintaan, yaitu first_name, last_name, username, password, address, dan contact, menggunakan request.getParameter.

Code Baris 27-32: Di sini kita menggunakan kondisi if di mana kita memeriksa apakah ada parameter yang diambil dari permintaan yang kosong. Jika ada parameter yang kosong, kontrol memasuki kondisi ini ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) dan kita mengambil objek RequestDispatcher dari objek permintaan, yang mengirimkan permintaan kembali ke register_1.jsp. Di sini kita juga menyertakan objek permintaan dan respons.

Code Baris 33-37: Cabang ini dieksekusi ketika tidak ada parameter yang kosong. Kita mengambil objek RequestDispatcher dari objek permintaan, yang meneruskan permintaan ke register_2.jsp. Di sini kita meneruskan objek permintaan dan respons.

Perbedaan antara kedua cabang tersebut penting: include() menjalankan register_1.jsp dan mengembalikan kendali ke servlet, sementara forward() Mengirimkan permintaan ke register_2.jsp dan tidak memberikan 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:

Code Baris 10: Di sini kita menampilkan pesan selamat datang. JSP ini dipanggil ketika semua parameter telah terisi.

Ketika Anda menjalankan kode di atas, Anda akan mendapatkan keluaran berikut.

Keluaran:

Halaman pendaftaran menampilkan enam kolom berlabel dengan satu tombol Kirim, seperti yang ditunjukkan di bawah ini.

Setelah semua kolom terisi dan tombol Kirim diklik, guru_register akan mengarahkan ke register_2.jsp dan halaman sukses akan muncul.

Saat kita mengklik register_1.jsp, kita akan mendapatkan formulir yang berisi nama depan, nama belakang, nama pengguna, kata sandi, alamat, dan kontak. Setelah semua detail diisi dan tombol kirim diklik, kita akan mendapatkan pesan "Selamat Datang Pengguna".

Cara Membuat Formulir Login dan Logout di JSP

Sama seperti formulir pendaftaran, sekarang kita akan membuat formulir login dan logout.

Dalam contoh ini, kita telah menggunakan formulir login dengan dua kolom, "nama pengguna" dan "kata sandi", serta sebuah tombol kirim.

Saat kita mengklik tombol kirim, kita akan mendapatkan pesan selamat datang dengan tombol keluar.

Saat kita mengklik tombol logout, kita akan kembali ke formulir 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:

Code Baris 10: Di sini kita menggunakan sebuah formulir yang aksinya adalah servlet guru_login.java. Metode yang digunakan untuk mengirimkan data adalah POST.

Code Baris 13-16: Di sini kita menggunakan kolom input "username", yang bertipe teks.

Code Baris 17-20: Di sini kita menggunakan kolom input "password", yang bertipe password.

Code Baris 22: Di sini kita menggunakan tombol "submit" dengan nilai "Login". Saat diklik, kontrol akan beralih ke servlet guru_login, di mana kedua field dibaca menggunakan objek request.

Contoh 2: 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:

Code Baris 5-9: Di sini kita mengimpor kelas-kelas yang diperlukan ke dalam kode.

Code Baris 14: Di sini kita mendeklarasikan servlet guru_login, yang merupakan turunan dari HttpServlet.

Code Baris 21: Di sini kita menggunakan metode doPost(), karena formulir tersebut menggunakan metode POST.

Code Baris 23-24: Di sini kita membaca parameter menggunakan objek permintaan, yaitu nama pengguna dan kata sandi.

Code Baris 25-29: Dengan cara ini, kita menggunakan kondisi "if" yang memeriksa apakah nama pengguna dan kata sandi kosong. Jika salah satunya kosong, kita mendapatkan objek RequestDispatcher yang mengirimkan kendali kembali ke register_3.jsp dengan objek permintaan dan respons.

Code Baris 30-34: Cabang ini akan dieksekusi jika keduanya tidak kosong; kemudian meneruskan permintaan ke register_4.jsp dengan objek permintaan dan respons.

Contoh 3: 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:

Code Baris 12: Di sini kita mendapatkan parameter “username” dari objek permintaan ke dalam objek String username. Ini berhasil karena forward() mempertahankan permintaan asli, dan karenanya parameter-parameternya, tetap utuh.

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

Code Baris 14: Di sini kita memiliki tautan logout, yang mengarahkan pengguna kembali ke register_3.jsp.

Ketika Anda menjalankan kode di atas, Anda akan mendapatkan keluaran berikut.

Keluaran:

Membuka register_3.jsp akan menampilkan dua kolom kredensial dan tombol Login.

Setelah mengklik tombol Login, Anda akan mendapatkan pesan di bawah ini beserta tautan Logout.

Mengklik tautan Keluar akan mengembalikan Anda ke halaman masuk yang ditampilkan di sini.

Catatan: Contoh ini hanya membandingkan nilai kosong, jadi nama pengguna apa pun yang tidak kosong akan diterima. Login produksi harus memverifikasi kredensial terhadap penyimpanan dan menyimpan kata sandi dalam bentuk hash, tidak pernah dalam bentuk teks biasa.

Pemrosesan Formulir JSP Menggunakan getParameter()

Formulir adalah metode umum untuk mengumpulkan input dalam pemrosesan web. Kita perlu mengirim informasi ke server web dan kemudian membaca kembali informasi tersebut di sisi server.

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 telah dikodekan yang ditambahkan ke halaman. URL, dipisahkan oleh karakter ?.
Selain itu, terdapat juga batasan ukuran; panduan klasiknya adalah sekitar 1024 karakter per permintaan, meskipun batasan sebenarnya ditentukan oleh browser dan server, bukan oleh spesifikasi HTTP.
Kita sebaiknya menghindari pengiriman kata sandi dan informasi sensitif melalui metode GET.

Metode POSTING:

POST adalah metode yang lebih andal untuk mengirim informasi ke server.
Informasi tersebut dikirim sebagai isi pesan terpisah, bukan di bilah alamat.
Karena nilai-nilai tersebut tidak pernah muncul setelah tanda tanya (?) di dalam URL, informasi tersebut tidak tersimpan dalam riwayat browser atau log akses server.
Metode ini umumnya digunakan untuk mengirimkan informasi yang bersifat sensitif.

JSP menangani pemrosesan data formulir menggunakan metode berikut:

getParameter(): digunakan untuk mendapatkan nilai dari satu parameter formulir.
getParameterValues(): digunakan untuk mengembalikan beberapa nilai dari suatu parameter.
getParameterNames(): digunakan untuk mendapatkan nama-nama semua parameter.
getInputStream(): digunakan untuk membaca data biner yang dikirim oleh klien.

Contoh:

Dalam contoh ini, kita telah menggunakan formulir dengan dua kolom, "nama pengguna" dan "kata sandi", serta 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

Code Baris 10: Di sini kita telah mendefinisikan sebuah bentuk yang tindakannya diproses oleh bentuk lain. JSPPada atribut action, kita menambahkan JSP tempat formulir harus dikirimkan melalui metode GET.

Di sini kita menggunakan metode GET untuk mengirimkan informasi, yaitu nama pengguna dan kata sandi.

Code Baris 11-14: Di sini kita menggunakan kolom seperti nama pengguna dan kata sandi, yang merupakan kolom teks, dan kita mendapatkan input dari pengguna.

Input ini dapat diambil menggunakan metode getParameter. Kami juga memiliki tombol submit, yang meneruskan nilai-nilai field ke action_form_process.jsp.

Aksi_bentuk_proses.jsp

Code Baris 14: Di sini kita mendapatkan nilai-nilai dari kolom input pada action_form.jsp menggunakan metode getParameter dari objek request.

Saat kita menjalankan kode di atas, kita mendapatkan output berikut.

Keluaran:

Action_form.jsp pertama-tama menampilkan formulir dua kolom seperti yang ditunjukkan di bawah ini.

Setelah dikirim, action_form_process.jsp akan menampilkan nama pengguna yang dibacanya dengan getParameter().

Saat kita menjalankan action_form.jsp, kita mendapatkan formulir dengan dua kolom, nama pengguna dan kata sandi, serta tombol kirim. Setelah memasukkan nama pengguna dan kata sandi, kita mengklik kirim, dan permintaan diproses oleh halaman berikutnya, yang mengembalikan halaman Pemrosesan Formulir dengan pesan selamat datang.

Catatan versi: Kedua servlet di atas mengimpor javax.servlet, yang benar untuk Tomcat 9 dan versi sebelumnya. Jakarta EE 9 mengubah nama API, jadi pada Tomcat 10 atau versi yang lebih baru, setiap impor javax.servlet menjadi jakarta.servlet, atau aplikasi harus dikonversi dengan Apache Tomcat Migration Tool untuk Jakarta EE.

Pertanyaan Umum Demo Slot

Daftar ini ditujukan untuk Tomcat 9 dan versi sebelumnya, di mana API berada di javax.servlet. Jakarta EE 9 mengubah nama namespace tersebut, sehingga Tomcat 10 dan versi yang lebih baru memerlukan impor jakarta.servlet dan kompilasi ulang, atau menjalankan Tomcat Migration Tool.

Jangan pernah menyimpannya sebagai teks biasa. Hash data tersebut menggunakan algoritma yang lambat dan diberi salt seperti BCrypt atau Argon2 sebelum mencapai basis data, dan bandingkan hash saat login. Servlet contoh hanya memeriksa nilai kosong, jadi hashing harus ditambahkan.

include() menjalankan sumber daya target dan mengembalikan kendali ke servlet yang memanggilnya, sehingga kedua output muncul. forward() menyerahkan seluruh permintaan ke target dan tidak pernah kembali, jadi servlet pasti belum mengirimkan respons terlebih dahulu.

Halaman JSP adalah tampilan (view), servlet adalah pengontrol (controller) yang membaca parameter dan memutuskan ke mana harus pergi, dan lapisan basis data atau bean akan menyediakan model. RequestDispatcher adalah penghubung antara pengontrol dan tampilan.

Asisten AI dapat membuat cabang validasi, mendeteksi pemeriksaan null yang hilang pada getParameter(), menyarankan pustaka hashing, dan menjelaskan tumpukan (stack). traces. Perlakukan setiap saran sebagai draf: verifikasi versi API servlet dan uji kode yang dihasilkan sebelum dirilis.ping .

Copilot bagus untuk kode berulang seperti stub doPost, pembacaan parameter, dan panggilan dispatcher. Seringkali ia menggunakan impor javax.servlet versi lama secara default, jadi periksa namespace, logika validasi, dan esca.ping dari setiap masukan pengguna yang dihasilkannya.

Tambahkan lapisan JDBC di servlet: buka koneksi pooled, gunakan PreparedStatement untuk penyisipan atau pencarian kredensial, dan tutup sumber daya di blok finally. Jauhkan SQL dari JSP agar tampilan tetap hanya untuk presentasi.

Karena guru_login hanya menguji apakah kolom-kolom tersebut kosong. Nama pengguna atau kata sandi yang kosong akan memuat ulang halaman login alih-alih meneruskan, yang bertindak sebagai pengaman validasi yang sangat sederhana dan bukan sebagai otentikasi yang sebenarnya.

Contoh Program JSP: Formulir Pendaftaran & Login

Cara Membuat Formulir Pendaftaran di JSP

Cara Membuat Formulir Login dan Logout di JSP

Pemrosesan Formulir JSP Menggunakan getParameter()

DAPATKAN Metode:

Metode POSTING:

Pertanyaan Umum Demo Slot

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin

Cara Membuat Formulir Pendaftaran di JSP

ARTIKEL TERKAIT

Cara Membuat Formulir Login dan Logout di JSP

Pemrosesan Formulir JSP Menggunakan getParameter()

DAPATKAN Metode:

Metode POSTING:

Pertanyaan Umum Demo Slot

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin