Belajar Modal Bootstrap dengan Membuat Form Biodata Sederhana

By | July 11, 2018

Belajar modal Bootstrap dengan membuat Form biodata sederhana – Modal atau pop up pada bootstrap adalah sebuah kotak dialog yang di gunakan untuk melakukan konfirmasi atas suatu aksi. Misalnya ketika anda ingin menghapus suatu data, akan ada pesan konfirmasi atas aksi apa yang anda lakukan. Tak hanya untuk konfirmasi pesan, bootstrap modal juga dapat di gunakan untuk melakukan Insert, edit, maupun menampilkan sebuah data. Dan masih banyak lagi kegunaan dari modal bootstrap ini.

Untuk membuat modal bootstrap sendiri itu sangatlah mudah sekali, karena package bootstrap sudah tersedia plugin modal yang cukup andagunakan dengan meletakkan atribut tertentu.

Cara membuat form biodata sederhana dengan modal bootstrap :

[php]

<div class="container">

<h2> <b>Belajar CRUD Modal Bootstrap (popup) </h2>

Belajar CRUD Modal Bootstrap (popup) By Pemulungkode </b>

<!– Tombol untuk menampilkan modal–>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>

<!– Modal –>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >X</button>

<h4 class="modal-title" id="myModalLabel">Menambahkan Data Modal Boostrap (popup)</h4>

</div>

<div class="modal-body">

<form action="p_save.php" name="modal_popup" enctype="multipart/form-data" method="POST">

<div class="form-group" style="padding-bottom: 20px;">
<label for="Name">Nama Lengkap</label>
<input type="text" name="name" class="form-control" placeholder="Nama lengkap" required/>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="alamat">Alamat</label>
<textarea name="alamat" class="form-control" placeholder="Masukkan alamat anda" required/></textarea>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="hobi">Hoby</label>
<input type="text" name="hobi" class="form-control" placeholder="Hobi anda" required/>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="tgl">Tanggal Lahir</label>
<input class="form-control" id="tgl" name="tgl" placeholder="MM/DD/YYY" type="text" required/>
</div>

<div class="form-group">
<label for="exampleInputEmail1">jenis Kelamin</label>
<label class="radio-inline">
<input type="radio" name="jenis" id="jenis" value="L" required data-fv-notempty-message="Tidak boleh kosong"> Laki-laki
</label>
<label class="radio-inline">
<input type="radio" name="jenis" id="jenis" value="P" required data-fv-notempty-message="Tidak boleh kosong"> Perempuan
</label>
</div>

<!– footer modal –>

<div class="modal-footer">
<button class="btn btn-success" type="submit">
Simpan
</button>

<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>

<a title="belajar_Modal" href="https://pemulungkode.com">pemulungkode</a>

</form>

</div>

</div>

</div>

</div>

[/php]

Penjelasan membuat form biodata sederhana dengan modal  diatas, perhatikan pada atribut

[php]

data-target="#myModal"

[/php]

Atribut pada button tersebut menentukan id modal yang akan di munculkan jika tombol tersebut di klik.

Perhatikan pada contoh modal di atas tepatnya di bagian button.

[php]

<!– Tombol untuk menampilkan modal–>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>

[/php]

Perhatikan  source code form

[php]

<!– Modal –>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >X</button>

<h4 class="modal-title" id="myModalLabel">Menambahkan Data Modal Boostrap (popup)</h4>

</div>

<div class="modal-body">

<form action="p_save.php" name="modal_popup" enctype="multipart/form-data" method="POST">

<div class="form-group" style="padding-bottom: 20px;">
<label for="Name">Nama Lengkap</label>
<input type="text" name="name" class="form-control" placeholder="Nama lengkap" required/>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="alamat">Alamat</label>
<textarea name="alamat" class="form-control" placeholder="Masukkan alamat anda" required/></textarea>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="hobi">Hoby</label>
<input type="text" name="hobi" class="form-control" placeholder="Hobi anda" required/>
</div>

<div class="form-group" style="padding-bottom: 20px;">
<label for="tgl">Tanggal Lahir</label>
<input class="form-control" id="tgl" name="tgl" placeholder="MM/DD/YYY" type="text" required/>
</div>

<div class="form-group">
<label for="exampleInputEmail1">jenis Kelamin</label>
<label class="radio-inline">
<input type="radio" name="jenis" id="jenis" value="L" required data-fv-notempty-message="Tidak boleh kosong"> Laki-laki
</label>
<label class="radio-inline">
<input type="radio" name="jenis" id="jenis" value="P" required data-fv-notempty-message="Tidak boleh kosong"> Perempuan
</label>
</div>

<!– footer modal –>

<div class="modal-footer">
<button class="btn btn-success" type="submit">
Simpan
</button>

<button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
</div>

<a title="belajar_Modal" href="https://pemulungkode.com">pemulungkode</a>

</form>

</div>
</div>

</div>

[/php]

Penjelasan. Untuk dapat di pangggil saat button di klik kita harus menambahkan atribut “myModal” pada “id”. Sedangkan atribut “ Class= “modal fade”  itu berfungsi memberikan efek fade atau memudar pada saat muncul dan penutup modal.

[php]

data-dismiss="modal"

[/php]

Atribut data-dismiss=”modal”  berfungsi untuk menutup modal. Dan modal memiliki bagian heading,body dan footer.

Untuk mengatr ukuran modal anda bisa tambahkan Class=”modal-sm” untuk menapilkan modal dengan ukuran kecil, sedangkan untuk menampilkan modal ukuran besar anda harus menabahkan Class=”modal-lg

Sekian dulu dari saya semoda bermanfaat tutorial Cara membuat form biodata sederhana dengan modal bootstrap dan jangan sungkan-sungkan untuk bertanya di kolom komentar jika ada yang kuran jelas. MAKASIH . .

 

See the Pen oMNzjg by aziz husen (@azizhusen) on CodePen.

5 thoughts on “Belajar Modal Bootstrap dengan Membuat Form Biodata Sederhana

  1. Pingback: Cara Menyimpan dan Menampilkan Data ke Dalam Tabel Database dengan Php dan Html - PemulungKode

Leave a Reply

Your email address will not be published. Required fields are marked *