Membuat Form Input Nilai Dengan Bootsrap
Membuat Form Input Nilai Dengan Bootsrap - Dalam pemrograman web ada banyak hal yang dapat kita lakukan salah satunya kita dapat membuat form atau formulir baik itu form pendaftaran,form kontak, form inputan nilai, dan masih banyak lagi. Dalam pembahasan kali ini kita akan membuat form input nilai dengan yang di permudah oleh Freamwork Bootstap. Apa itu Bootstrap, Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan untuk mendownloadnya silahkan klik disini.
Pada kesempatan yang lalu saya juga telah menulis bagaimana cara membuat form pendaftaran user, tapi pada form tersebut hanaya menggunakan html dan css tidak menggunakan bootstrap. Bagi yang belum membacanya saya sarankan untuk membacanya terlebih dahulu. silahkan baca : cara membuat from pendaftaran user dengan php
seperti yang sudah saya jelaskan tujuan utama dari tulisan ini adalah bagaimana cara membuat from inputan nilai dengan bootstrap. Disini saya tekankan from yang akan dibuat merupakan bentuk sederhananya saja, jadi silahkan dikembangkan oleh lagi. langsung saja kita ke caranya silahkan ikuti langkah demi langkah.
seperti yang sudah saya jelaskan tujuan utama dari tulisan ini adalah bagaimana cara membuat from inputan nilai dengan bootstrap. Disini saya tekankan from yang akan dibuat merupakan bentuk sederhananya saja, jadi silahkan dikembangkan oleh lagi. langsung saja kita ke caranya silahkan ikuti langkah demi langkah.
Pertama
Hal yang paling utama kita siapkan dalam membuat from inputan nilai ini adalah sebuah text editor, untuk text editornya sendiri silahkan gunakan text editor yang anda sukai, disini saya menggunakan sublime untuk text editornya. Selain text editor kita juga harus mempersiapkan freamwork bootstrapnya, untuk mendownloadnya sudah saya siapkan link nya diatas. Perhatikan gambar dibawah, gambar dibawah merupakan contoh yang akan kita buat nanti.
Disini saya juga menyarankan anda agar anda mendownload xampps dulu, karena akan mempermudah kita,jika ingin mendownloadnya silahkan klik disini, silahkan jalankan xampp nya. Silahkan eksrak bootstrap yang telah anda download tadi di dalam sebuah folder di direktori xampp,saya sarankan untuk membuat folder baru atau untuk lebih jelasnya silahkan lihat gambar di bawah.
silahkan buka folder yang anda buat di dalam xampp tadi dengan text editor , dan selanjutnya buat lah sebuah file baru di dalam folder buatan anda tadi dengan nama index.php dan copy kan script dbawah kedalam index.php.
<!DOCTYPE html> <html> <head> <title>Input Nilai Mahasiswa</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"></div> <div class="col-sm-12"> <div class="page-header"><h1 align="center">Program Input Data Mahasiswa</h1></div> <form class="form-horizontal" action="" method="POST" role="form"> <div class="form-group"> <label for="nim" class="control-label col-sm-2">Nim</label> <div class="col-sm-7"> <input type="text" name="nim" id="nim" class="form-control" placeholder="Inputkan Nim" required> </div> </div> <div class="form-group"> <label for="nama" class="control-label col-sm-2">Nama</label> <div class="col-sm-7"> <input type="text" name="nama" id="nama" class="form-control" placeholder="Inputkan Nama Lengkap Anda" required > </div> </div> <div class="form-group"> <label for="alt" class="control-label col-sm-2">Alamat</label> <div class="col-sm-7"> <input type="text" name="alamat" id="alamat" class="form-control" placeholder="Inputkan Alamat Lengkap Anda" required > </div> </div> <div class="form-group"> <label for="jk" class="control-label col-sm-2">Jenis Kelamin</label> <div class="col-sm-2"> <select type="text" name="jkl" id="jkl" class="form-control"> <option value="">Pilih Kelamin</option> <option value="Laki-laki">Laki-laki</option> <option value="perempuan">Perempuan</option> </select> </div> </div> <div class="form-group"> <label for="rs" class="control-label col-sm-2">Jurusan</label> <div class="col-sm-7"> <input type="text" name="jrs" id="jrs" class="form-control" placeholder="Inputkan Jurusan "> </div> </div> <div class="form-group"> <label for="makul" class="control-label col-sm-2">Mata Kuliah</label> <div class="col-sm-7"> <input type="text" name="mk" id="mk" class="form-control" placeholder="Inputkan Mata Kuliah"> </div> </div> <div class="form-group"> <label for="kelas" class="control-label col-sm-2">Kelas</label> <div class="col-sm-2"> <select type="text" name="kls" id="kls" class="form-control"> <option value="">Pilih Kelas</option> <option value="A">Kelas A</option> <option value="body">Kelas B</option> </select> </div> </div> <div class="form-group"> <label for="kets" class="control-label col-sm-2">Keterangan</label> <div class="col-sm-7"> <textarea type="text" name="ket" id="ket" rows="6" class="form-control" ></textarea> </div> </div> <div class="form-group"> <label for="nil" class="control-label col-sm-2">Nilai</label> <div class="col-sm-7"> <input type="text" name="nilai" id="nilai" class="form-control" placeholder="Inputkan Nilai"> </div> </div> <div class="form-group"> <label for="sim" class="control-label col-sm-2">Simpan!!!</label> <div class="col-sm-7"> <button type="submit" id="btnSimpan" name="btnSimpan" class="btn btn-danger">Simpan</button> </div> </div> </div> </body> </html>
Jika sudah jalankan di browser anda, ketk localhost/'Nama folderbuatan anda'. Script diatas belum terkoneksi dengan database , untuk cara mengkoneksikan dengan database nanti akan saya bahas di artikel selanjutnya. Cukup sekian post tentang Membuat Form Input Nilai Dengan Bootsrap. Silahkan share artikel ini agar semakin banyak orang yang tahu.
0 Response to "Membuat Form Input Nilai Dengan Bootsrap"
Posting Komentar