Cara Membuat CRUD dengan Codeigniter Part 2

Halo Dumenity, selamat datang kembali di situs tips dan trik Dumet School. Pastinya selalu memberikan tips – tips seputar dunia wensite, di kesempatan kali ini kita akan melanjutkan belajar mengenai Cara Membuat CRUD dengan Codeigniter Part 2 yang sebelumnya saya share tips mengenai Cara Membuat CRUD dengan Codeigniter Part 1 dengan menampilkan data dari database dengan menggunakan MVC. Kalau teman – teman belum membuatnya silahkan review di artikel saya sebelumnya. Kali ini kita akan merancang layout terlebih dahulu yang mana kita akan menggunakan bootstrap bagi framework layout nya.

Petama – temana siapkan file bootstrap nya, saya disini menggunakan yang online saja supaya lebih simple atau pun dapat teman – teman dapat menggunakan yang online dengan manambahkan library bootstrap nya.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”><br />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script><br />
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

Di tampilan kemarin kita telah berhasil menampilkan data

Di tampilan table di atas ini terlihat kurang seperti itu menarik, kita akan menambahkan class bootstrap bagi layout nya. Ikuti terus Cara Membuat CRUD dengan Codeigniter Part 2 ini, tambahkan script nya

<div class=”container”><br />
  <div class=”row”><br />
     <div class=”col-md-12″><br />
   <!– letakkan table disini –><br />
     </div><br />
  </div><br />
</div>

<!— letakkan table disini —>

</div>

Tambahkan class=”table table-bordered table-striped table-hover” class algin di tag td

Tambahkan di tag thead > th dengan nama aksi kemudianÂ tbody > td > tag a dengan class class=”btn btn-primary” dan icon class=”glyphicon glyphicon-pencil” bagi tombol menej, tag a dengan class class=”btn btn-danger” dan icon class=”glyphicon glyphicon-remove” bagi tombol delete

Dan berikutnya kita akan merancang modal bagi form input nya teman – teman tambahkan tag button bagi modal nya

<button class=”btn btn-success” data-target=”#input” data-toggle=”modal”><span class=”glyphicon glyphicon-plus”></span> New Post</button><br><br>

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 bagi pop up modal nya

<div class=”modal fade” id=”input” role=”dialog”><br />
	<div class=”modal-dialog modal-lg”><br />
	  <div class=”modal-content”><br />
	    <div class=”modal-header”><br />
	      <button type=”button” class=”close” data-dismiss=”modal”>&times;</button><br />
	      <h4 class=”modal-title”>Input Data Customer</h4><br />
	    </div><br />
	    <div class=”modal-body”><br />
	      <form action=”” method=”post”><br />
			  <div class=”form-group”><br />
			    <label for=”nama”>Nama</label><br />
			    <input type=”text” class=”form-control” name=”nama”><br />
			  </div><br />
			  <div class=”form-group”><br />
			    <label for=”telepon”>Telepon</label><br />
			    <input type=”text” class=”form-control” name=”telepon”><br />
			  </div><div class=”form-group”><br />
			    <label for=”domisili”>Tempat tinggal</label><br />
			    <input type=”text” class=”form-control” name=”domisili”><br />
			  </div><div class=”form-group”><br />
			    <label for=”kota”>Kota</label><br />
			    <input type=”text” class=”form-control” name=”kota”><br />
			  </div><div class=”form-group”><br />
			    <label for=”total”>Total Belanja</label><br />
			    <input type=”text” class=”form-control” name=”total”><br />
			  </div><br />
			  <button type=”submit” class=”btn btn-primary btn-lg”>Add</button><br />
			</form><br />
	    </div><br />
	  </div><br />
	</div><br />
</div>

<h4 class=“modal-title”>Input Data Customer</h4>

</div>

</div>

<label for=“telepon”>Telepon</label>

</div><div class=“form-group”>

<label for=”

sumber :kursuswebprogramming.com/blog/

(Visited 7 times, 1 visits today)

Leave a Reply Cancel reply