Box Layout

HTML Layout
Backgroud Images
Backgroud Pattern
blog-img-10

Posted by : Andika

Membuat CRUD Data Siswa Sederhana

Oke sobat ilmuteknologi kita lanjut dari tutorial selanjut nya ya yang sebelumnya membahas cara menggunakan template admin LTE. Nah jadi di tutorial kali ini saya akan memberikan tutorial mengenai membuat program sederhana menggunakan crud, nah program ini kita namakan data siswa. Oke langsung saja ya.

Sebelum membuat aplikasi crud di template Admin LTE anda perlu menyiapkan templatenya dulu. Baca Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis. Sekarang saya anggap anda sudah memiliki template nya. Berikut ini list yang akan kita kerjakan.

 Template
 Buat Databse
 Read Data
 Create Data
 Delete Data
 Update Data
 
Sampai disini kita anggap template sudah ada, selanjutnya kita buat database dengan nama db_siswa.

Gambar membuat database

Pertama start apache dan mysql di xampp (atau yang lain) ketikkan di web browser localhost/phpmyadmin. Selanjutnya klik new, isikan nama database (db_siswa) terakhir klik create.


Selanjutnya buat tabel dengan nama tbl_siswa.

Gambar membuat tabel
 
Selanjutnya isi nama tabel dan jumlah colomnya kemudian klik tombol Go.
 
 
Gambar Struktur Tabel
 
Gambar di atas menunjukkan struktur tbl_siswa. Pada sruktur tabel anda cukup memperhatikan bagian yang diberi kotak kuning yaitu, name, type, length, index, dan A_I. Isi datanya seperti pada gambar kemudian tekan tombol save.
 
 

 

CREATE TABLE `db_siswa`.`tbl_siswa` ( `id` INT NOT NULL AUTO_INCREMENT , `nama` VARCHAR(100) NOT NULL , `jenkel` VARCHAR(15) NOT NULL , `alamat` VARCHAR(50) NOT NULL , `no_hp` VARCHAR(16) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;


Selanjutnya insert satu buah data seperti ini.

 

INSERT INTO `tbl_siswa` (`id`, `nama`, `jenkel`, `alamat`, `no_hp`) VALUES (NULL, 'Indah', 'Perempuan', 'Medan', '0811223344');


Sekarang kita sudah menyelesaikan database.

 Template
 Buat Databse
 Read Data
 Create Data
 Delete Data
 Update Data

Di tabel siswa kita isi satu buah data untuk ditampilkan nantinya di web. Baik, kita kerjakan Read Data atau menampilkan data dari database.

Pertama kita buat sebuah file koneksi bernama koneksi.php di dalam folder template.

Gambar isi file koneksi.php

File koneksi ini digunakan disetiap halaman yang berinteraksi dengan database. Untuk melakukan CRUD dibutuhkan file koneksi ini. File koneksi akan di include dalam file yang membutuhkannya. Baca juga Include dan Require di PHP dan Contoh Penerapannya. Inti dari koneksi ini adalah fungsi mysqli_connect yang ditampung di variabel $mysqli.

Sekarang kita kerjakan bagian Read Data (Baca dan tampilkan data dari database). Kali ini data akan ditampilkan menggunakan tabel. Ditemplate halaman yang akan kita gunakan berada di http://localhost/template/pages/tables/data.html. Jika dari sublime posisi file nya berada disini.
Gambar lokasi file data.html
 
Jika dilihat tabel yang akan kita gunakan seperti gambar dibawah ini.
 
Gambar Template Tabel
 
Dari keseluruhan kode di file data.html kita hanya butuh dari baris 507 sampai 1410. Nanti ada beberapa baris lagi yang akan kita buang. Selanjutnya buatlah folder siswa dalam folder template dan file siswa.php dalam folder siswa.
 
 
Gambar folde siswa dan file siswa.php
 
Sekarang kita akan mengisi file siswa.php dengan potongan kode dari file data.html seperti ini.
 
Gambar potongan file data.html Baris 507 - 1410
 
Selanjutnya paste kan dalam file siswa.php  dan buang satu div dengan class box seperti ini.

Gambar Hapus Kode Tabel Pertama
 
Selanjutnya kita hanya butuh header tabel, satu baris isi, dan footer tabel. Maka baris yang lainnya dihapus. Kita hanya butuh tabelnya seperti ini.
 
Gambar Template Tabel
 
 
 
Karena proses nya terlalu panjang, maka langsung saja saya pastekan kode yang sudah selesai di edit.
 
 
<!-- Isi File siswa.php-->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Data Siswa
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Siswa</a></li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
 
<!-- /.box -->

<div class="box">
<div class="box-header">
<a href="index.php?hal=tambah_siswa">
<input type="button" value="Tambah" class="btn btn-primary" name="">
</a>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>No HP</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
$hasil=mysqli_query($mysqli,"select * from tbl_siswa");
$no=1;
while($row=mysqli_fetch_array($hasil)){
?>
<tr>
<td><?php echo $no; $no++;?></td>
<td><?php echo $row['nama']?></td>
<td><?php echo $row['jenkel']?></td>
<td><?php echo $row['alamat']?></td>
<td><?php echo $row['no_hp']?></td>
 
<td><a href="index.php?hal=edit_siswa&id=<?php echo $row['id']?>">
<button type="button" class="btn btn-warning" name=""> <i class="fa fa-pencil"></i> Edit</button></a>
<a onclick="return confirm('Anda Yakin...?')" href="siswa/hapus_siswa.php?id=<?php echo $row['id']?>">
<button type="button" class="btn btn-danger" name=""> <i class="fa fa-trash"></i> Hapus</button></a>
</td>
</tr>
<?php } ?>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
 
Untuk style dan java script kita juga menggunkan dari file data.html.
 
Membaca (Read) dan  menampilkan data kedalam tabel berhasi kita lakukan di template admin LTE. hasilnya seperti ini

 

 

Menampilkan data di dalam tabel
 
Berhubung karena tutorialnya panjang dan memerlukan waktu yang cukup lama. Maka saya sudahi dulu sampai disini dan saya lanjutkan di tulisan saya berikutnya. Link dibawah akan aktif jika saya sudah menyelesaikannya.
 
 Template
 Buat Databse
 Read Data
 Create Data
 Delete Data
 Update Data

Setelah lama tertunda dan mengumpulkan semangat kembali. dan juga dorongan dari permintaan dari komentar. saya lanjutkan artikel ini sampai selesai.
 
Tambah Siswa
 
Edit Siswa
Hapus Siswa

 

 
 
 Template
 Buat Databse
 Read Data
 Create Data
 Delete Data
 Update Data
 

Oke semoga bermanfaat. dan share artikel ini agar bermanfaat untuk temen-temen lainya.