Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Tentunya selalu memberikan tips – tips seputar dunia wensite, pada kesempatan kali ini kita akan melanjutkan belajar tentang Cara Membuat CRUD dengan Codeigniter Part 2 yang sebelumnya saya share tips tentang Cara Membuat CRUD dengan Codeigniter Part 1 dengan menampilkan data dari database dengan menggunakan MVC. Jika teman – teman belum membuatnya silahkan review pada artikel saya sebelumnya. Kali ini kita akan membuat layout terlebih dahulu yang mana kita akan menggunakan bootstrap untuk framework layout nya.
Petama – temana siapkan file bootstrap nya, saya disini menggunakan yang online saja supaya lebih simple atau juga bisa teman – teman bisa menggunakan yang online dengan manambahkan library bootstrap nya.
1 2 3 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
Pada tampilan kemarin kita sudah berhasil menampilkan data
Pada tampilan table di atas ini terlihat kurang begitu menarik, kita akan menambahkan class bootstrap untuk layout nya. Ikuti terus Cara Membuat CRUD dengan Codeigniter Part 2 ini, tambahkan script nya
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <div class="col-md-12"> <!-- letakkan table disini --> </div> </div> </div> |
Tambahkan class=”table table-bordered table-striped table-hover” class algin pada tag td
Tambahkan pada tag thead > th dengan nama aksi kemudian tbody > td > tag a dengan class class=”btn btn-primary” dan icon class=”glyphicon glyphicon-pencil” untuk tombol edit, tag a dengan class class=”btn btn-danger” dan icon class=”glyphicon glyphicon-remove” untuk tombol delete
Dan selanjutnya kita akan membuat modal untuk form input nya teman – teman tambahkan tag button untuk modal nya
1 |
<button class="btn btn-success" data-target="#input" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> New Post</button><br><br> |
Kemudian berikan script di bawah ini untuk pop up modal nya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="modal fade" id="input" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Input Data Customer</h4> </div> <div class="modal-body"> <form action="" method="post"> <div class="form-group"> <label for="nama">Nama</label> <input type="text" class="form-control" name="nama"> </div> <div class="form-group"> <label for="telepon">Telepon</label> <input type="text" class="form-control" name="telepon"> </div><div class="form-group"> <label for="alamat">Alamat</label> <input type="text" class="form-control" name="alamat"> </div><div class="form-group"> <label for="kota">Kota</label> <input type="text" class="form-control" name="kota"> </div><div class="form-group"> <label for="total">Total Belanja</label> <input type="text" class="form-control" name="total"> </div> <button type="submit" class="btn btn-primary btn-lg">Add</button> </form> </div> </div> </div> </div> |
Selanjutnya kita custom css nya sedikit yang sudah kita masukkan class align
1 2 3 4 5 |
<style type="text/css"> thead{background: #274F8F; color: #fff; font-size: 125%; text-align: center;} th{text-align: center;} tbody .align{text-align: center;} </style> |
Jika sudah save dan buka kembali pada browsernya, maka hasilnya seperti gambar di bawah ini
Jika kita klik button new post maka modal akan menampilkan form yang sudah kita buat
Sekian dulu pada artikel kali ini tentang Cara Membuat CRUD dengan Codeigniter Part 2 kita berjumpa kembali pada artikel yang akan datang kita akan memasukkan data kedalam database menggunakan MVC Codeigniter. Terimakasih dan sampai jumpa.
Semoga bermanfaat.