Form Input Bootstrap – Hai teman- teman setelah Pengenalan Bootstrap, kali ini kita lanjutkan pada Tutorial #2: Form input. Form merupakan formulir atau area yang memungkinkan pengguna untuk memasukkan suatu data yang nanti nya akan dikirim atau disimpan dalam suatu server.
Ada banyak sekali jenis form mulai dari Form input hingga form login. Pada kesempatan selanjutnya akan kita bahas satu persatu.
Sebelum membahas lebih lanjut mengenai form input bootstrap, kita perlu mengetahui dasar pada pemrograman html untuk membuat form, yaitu kita hanya perlu menambahkan tag <form> pada area yang diperlukan tentunya di dalam tag <body>.
<form> //data </form>
Ada beberapa attribut yang umum digunakan dalam form yaitu
- Action – salah satu attribut form yang digunakan untuk menentukan aksi setelah data dikirim
- Method – Attribut form yang digunakan untuk mengenali metode pengiriman data nya, ada 2 metode pengiriman data nya yaitu
- POST – mengirim data tanpa menampilkan data tersebut pada URL
- GET – mengirim data dengan menampilkan data yang dikirim pada URL
Untuk lebih jelas mengenai POST dan GET lihat script HTML dibawah ini:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form action="simpan.php" method="POST">
<div class="form-grup">
<input type="text" id="nama" name="nama">
</div>
<input type="submit" value="Kirim">
</form>
<!-- Form dengan method POST akan mengirim data dengan format "localhost/simpan.php" (mengasusmsikan mengirim pada simpan.php di localhost komputer data hasil inputan tidak akan terlihat di URL -->
<form action="simpan.php" method="GET">
<div class="form-grup">
<input type="text" id="nama" name="nama">
</div>
<input type="submit" value="Kirim">
</form>
<!-- Form dengan method GET akan mengirim data dengan format "localhost/simpan.php?nama=xxx" (xxx adalah nama yang dimasukkan pada form ketika tobol submit ditekan dan terlihat pada URL-->
</body>
</html>Selanjutnya kita akan membuat Form input dari bootstrap, ada beberapa file yang perlu disiapkan yaitu
- Database untuk menyimpan data hasil input di form
- index.php – tempat dimana form akan tampil
- simpan.php – untuk menyimpan data ke dalam database
Langsung saja mari kita mulai:
- Database
Buatlah database baru dengan nama “data” dan buat tabel dengan nama “printer“, kemudian buat strukturnya seperti:
- Index.php
Buat file php dengan nama index.php, dengan script:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Form Tambah Barang</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style> h1{ margin: 30px 0; padding: 0 200px 15px 0; border-bottom: 1px solid #E5E5E5; } .bs-example{ margin: 20px; } </style> </head> <body> <div class="bs-example"> <h1 class="text-center"style="background-color: rgb(95,154,222);margin: 10px; padding: 10px">Formulir Tambah Data Barang</h1> <form class="form-horizontal" action="simpan.php" method="POST"> <div class="form-group"> <label class="control-label col-xs-3" for="Alamat">Nama Merk:</label> <div class="col-xs-9"> <textarea rows="3" class="form-control" id="nama_merk" placeholder="Masukan merk" name="nama_merk"></textarea> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="warna">Warna:</label> <div class="col-xs-9"> <select name="warna" class="form-control"> <?php $opt = array('-','Putih','Kuning','Biru','Hijau','Hitam','Merah'); foreach($opt as $val) echo "<option value='".$val."'>".$val."</option>"; ?> </select> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="jumlah">Jumlah:</label> <div class="col-xs-9"> <input type="number" min="0" class="form-control" id="jumlah" name="jumlah"> </div> </div> <br> <div class="form-group"> <div class="col-xs-offset-3 col-xs-9"> <input type="submit" class="btn btn-primary" value="Kirim"> <input type="reset" class="btn btn-default" value="Reset"> </div> </div> </form> </div> </body> </html>
- simpan.php
Setelah membuat database untuk menyimpan data dan index.php untuk antarmuka memasukkan data dari user maka selanjutnya kita perlu membuat suatu file yang berguna untuk menangkap data inputan dari form di index.php dan memasukkan nya pada database.
<?php $servername = "localhost"; //nama / alamatserver $database = "data"; //nama database yang akan digunakan menyimpan data $username = "root"; //username untuk masuk ke database $password = ""; //password untuk masuk ke database //karena saya menggunakan server localhost offline milik XAMPP, maka username dan passwordnya seperti diatas secara default $conn = new mysqli($servername,$username,$password,$database); //koneksi ke server if($conn->connect_error){ die("koneksi gagal: ".$conn->connect_error); } // menyimpan data kedalam variabel $nama = $_POST['nama_merk']; $warna = $_POST['warna']; $jumlah = $_POST['jumlah']; // query SQL untuk insert data $query="INSERT INTO printer (nama_merk,warna,jumlah) VALUES ('$nama','$warna','$jumlah')"; if($conn->query($query) === TRUE) { //jika data berhasil di simpan maka akan kembali ke index.php dan menampilkan pesan echo "<script> location.replace('index.php'); alert('Data berhasil tersimpan'); </script>"; } else { //jika data gagal di simpan maka akan kembali ke index.php dan menampilkan pesan echo "<script> location.replace('index.php'); alert('Data gagal tersimpan'); </script>"; } ?>
Disini saya menggunakan aplikasi XAMPP untuk webserver nya sehingga semua file mulai dari index.php dan simpan.php disimpan dalam folder htdocs.
Okelah sekian tutorial mengenai membuat Form Input dengan bootstrap, ada kurang lebihnya mohon maaf dan terima kasih.
