.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Cara Membuat Validasi Form dengan PHP dan Alert Bootstrap 3

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

Pada kesempatan kali ini saya akan berbagi cara untuk membuat validasi dengan PHP dan Bootstrap 3, untuk alasan keamanan biasanya kita harus membuat validasi form tujuannya agar data yang di input user tidak salah dan menghindari adanya user jahil yang input sembarangan, sebab jika kita tidak membuat validasi form maka akan banyak spam yang akan masuk kedalam databse kita dan space database terbuang percuma, oke langsung pada ke pokok bahasan silahkan simak tutorial berikut ini :
  • Buatlah sebuah folder didalam folder htdocs dengan nama validasi, kemudian copy dan paste code di bawah ini

<!DOCTYPE html>
<html lang="en">
<!--
Judul : Validasi Dengan PHP dan Bootstrap
Level : Basic
Author : Hakko Bio Richard
Email : hakkobiorichard@gmail.com
Web : www.hakkoblogs.com / www.niqoweb.com
Untuk tutorial yang lain silahkan kunjungi www.hakkoblogs.com.
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Validasi Form dengan PHP dan Bootstrap 3</title>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="navbar-fixed-top.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.hakkoblogs.com">Hakko Blog's</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.hakkoblogs.com">Pemrograman</a></li>
<li><a href="http://www.hakkoblogs.com">Tutorial</a></li>
<li><a href="http://www.hakkoblogs.com">Template</a></li>
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>-->
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>-->
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container">

<!-- Main component for a primary marketing message or call to action -->

<?php
// mengatur error nip menjadi blank
$error_nim = "";

//dijalankan jika tombol submit ditekan
if(isset($_POST['submit'])){
// menangkap $post nip dan mengamankan inputan dengan fungsi
// trim, htmlspecialchars dan stripslashes
$nim = htmlspecialchars(stripslashes(trim(($_POST['nim']))));

// nip tidak boleh kosong
if($nim == ""){
$error_nim= "<div class='alert alert-danger alert-dismissable'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
NIM tidak boleh kosong
</div>";
}else{
// nip harus 18 karakter. menggunakan fungsi strlen untuk
// mengecek panjang karakter
if(strlen($nim)<>10){
$error_nim= "<div class='alert alert-danger alert-dismissable'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
NIM Harus 10 digit
</div>";
};

// nip harus berupa angka. menggunakan fungsi is_numeric untuk
// mengecek angka atau bukan
if(!is_numeric($nim)){
$error_nim= "<div class='alert alert-danger alert-dismissable'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
NIM Harus berupa angka
</div>";
};
};

// jika error nip blank (artinya tidak ada kesalahan)
if($error_nim === ""){
// proses query disini, pada contoh ini hanya
// menampilkan pesan lolos validasi
echo "<div class='alert alert-success alert-dismissable'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
Sukses Di Input
</div>";
};

}
?>
<div class="col-lg-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-user"></span> Data Mahasiswa </h3>
</div>
<div class="panel-body">
<!-- <div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>-->
<?php echo $error_nim; ?>
<form action="index.php" method="post">
<table>
<tr>
<td>NIM :</td>
<td><input type="text" placeholder="Masukan NIM Anda" name="nim" class="form-control" id="nim"/></td>
<td><input type="submit" name="submit" class="btn btn-sm btn-primary" value="simpan" /></td>
</tr>
</table>
</form>
</div>
</div>

</div>
</div>
</div> <!-- /container -->

<center><a href="http://www.hakkoblogs.com">Hakko Bio Richard &copy; 2015</a></center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

  • Kemudian simpan dengan nama file index.php dalam folder validasi, jangan lupa untuk memanggil file css bootstrap dan pastikan path dari file css bootstrap sudah benar, kemudian panggil file index.php tersebut maka akan tampil seperti di bawah ini 
Bagaimana.? cukup mudah bukan untuk membuat validasi dengan PHP dan Alert Bootstrap 3.? pastinya ya nah untuk download source code lengkapnya silahkan download di sini DOWNLOAD
silahkan dipelajari dan di kembangankan ya, semoga tutorial singkat ini bisa membantu untuk anda yang sedang belajar pemrograman PHP dan Bootstrap.

Happy Coding & Programming

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Cara Membuat Validasi Form dengan PHP dan Alert Bootstrap 3, Diterbitkan oleh scodeaplikasi pada Minggu, 10 Mei 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to