Aisyah Nurhalimah: Oktober 2022

Kelas Pemrograman Web C

Anggota Kelompok :

Aisyah Nurhalimah 5025201081
Sarah Alissa Putri 5025201272

Nama Website : Masakin

Problem Statement :

Sebagai mahasiswa terkadang permasalahan kecil hadir dikehidupan sehari-hari, seperti menentukan makanan apa yang akan dimakan hari ini dengan budget yang terbatas. Salah satu kendala yang sering dihadapi yaitu mencari resep menu masakan apa yang sudah terbuktikan rasanya, dan perkiraan harga bahan makanannya.

Proposed Solution :

Dengan permasalahan tersebut, kami memikirkan solusi untuk membuat website sebagai wadah untuk user atau pengguna berbagai pengalaman memasaknya atau resep yang pernah dicobanya, dan user lain yang telah mencobanya dapat memberikan ulasan.

Tampilan :

JQuery adalah library JavaScript yang cukup andal, ringkas, dan mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana.

Dipertemuan kali ini ditugaskan untuk membuat form validasi menggunakan JQuerry, berikut adalah tampilannya

dan berikut adalah source code nya,

	<html>
	<head>
	<title>Validasi Form dengan JQuery Validation - Achmatim.Net</title>
	<style type="text/css">
	body{
	background-color: rgb(216, 216, 255);
	margin: auto;
	padding: 60px;
	font: bold 14px sans-serif;
	text-align: center;
	}

	.labelfrm {
	display:block;
	font-size:20px;
	margin-top:20px;
	color :black;

	}

	h1{
	font-size: 45px;
	color :black;
	}

	.error {
	font-size:medium;
	color:red;
	}

	</style>

	<script type="text/javascript" src="jquery/jquery.min.js"></script>
	<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	$('#frm-mhs').validate({
	rules: {
	nim : {
	digits: true,
	minlength:10,
	maxlength:10
	},
	tgl: {
	indonesianDate:true
	},
	umur: {
	digits: true,
	range: [0, 100]
	},
	email: {
	email: true
	},
	situs: {
	url: true
	},
	pass2: {
	equalTo: "#pass1"
	}
	},
	messages: {
	nim: {
	required: "Kolom NIM harus diisi",
	minlength: "Kolom NIM harus terdiri dari 10 digit",
	maxlength: "Kolom NIM harus terdiri dari 10 digit"
	},
	email: {
	required: "Alamat email harus diisi",
	email: "Format email tidak valid"
	},
	pass2: {
	equalTo: "Password tidak sama"
	}
	}
	});
	});

	$.validator.addMethod(
	"indonesianDate",
	function(value, element) {
	// put your own logic here, this is just a (crappy) example
	return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
	},
	"Please enter a date in the format DD/MM/YYYY"
	);
	</script>

	</head>
	<body>
	<h1>Input Data Mahasiswa</h1>
	<form action="proses.php" method="post" id="frm-mhs">
	<label for="nim" class="labelfrm">NIM: </label>
	<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>

	<label for="nama" class="labelfrm">NAMA: </label>
	<input type="text" name="nama" id="nama" size="30" class="required"/>

	<label for="alamat" class="labelfrm">ALAMAT: </label>
	<textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>

	<label for="tgl" class="labelfrm">TANGGAL LAHIR: </label>
	<input type="text" name="tgl" id="tgl" maxlength="10" size="15" class="required"/>

	<label for="umur" class="labelfrm">UMUR: </label>
	<input type="text" name="umur" id="umur" maxlength="3" size="7" class="required"/>

	<label for="email" class="labelfrm">ALAMAT EMAIL: </label>
	<input type="text" name="email" id="email" size="50" class="required"/>

	<label for="situs" class="labelfrm">ALAMAT SITUS: </label>
	<input type="text" name="situs" id="situs" size="50" class="required"/>

	<label for="pass1" class="labelfrm">PASSWORD: </label>
	<input type="password" name="pass1" id="pass1" size="15" class="required"/>

	<label for="pass2" class="labelfrm">ULANGI PASSWORD: </label>
	<input type="password" name="pass2" id="pass2" size="15" class="required"/>

	<label for="submit" class="labelfrm"> </label>
	<input type="submit" name="Submit" value="Submit"/>
	</form>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	<?php
	if (isset($_POST['Submit'])) {
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";
	}
	?>

view raw proses.php hosted with ❤ by GitHub

Referensi : http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/

Aisyah Nurhalimah

Senin, 31 Oktober 2022

ETS PWEB-C

Rabu, 12 Oktober 2022

Validasi menggunakan JQuery