Menampilkan Data Dari Database



Hello sahabat iniilmu, kali ini iniilmu akan berbagi cara untuk menampilkan data dari database ke dalam data tabel. di dalam tutorial kali ini iniilmu menggunakan framework bootstrap agar tampilanya labih menarik. ok tanpa basa basi lagi langsung saja ikuti langkah-langka di bawah ini:

Langkah Pertama adalah buat sebuah database baru, disini saya membuat database baru dengan nama "iniilmu" dan buat satu tabel disini saya membuat sebuah tabel dengan nama "barang" dengan struktur tabel sebagai berikut :


Menampilkan data dengan database dan Codeigniter

kemudian, masukkan beberapa data ke dalam tabel tersebut, data yang kita masukkan akan kita tampilkan ke dalam data tabel.

Langkah yang Kedua adalah mengaktifkan libraries database nya, silahkan kalian buka application/config/autoload.php kemudia cari $autoload['libraries'] = array(); ubah menjadi :

$autoload['libraries'] = array('database');

Langkah yang Ketiga adalah menghubungkan codeigniter dengan database, dengan cara membuka application/config/database.php, kemudian ubah seperti source code dibawah ini :


$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'iniilmu',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

perhatikan source code yang berwarna merah, sesuaikan dengan username kalian, jika kalian menggunakan password maka tuliskan password kalian jika tidak di kosongkan saja seperti contoh diatas dan isikan nama database yang telah kalian buat di awal tadi.

Langkah yang Keempat adalah membuat sebuah model, model ini berfungsi untuk kita melakukan sebuah query yang akan di eksekusi nantinya, silahkan kalian buka application/models dan buatlah sebuah file model, disini saya akan membuat model dengan nama "M_barang.php"

<?php

class M_barang extends CI_Model
{
public function data_barang()
{
$query = $this->db->query("SELECT * FROM barang");
return $query->result_array();
}
}


?>

yang perlu diperhatikan saat membuat sebuah model kalian harus membuat class yang nama class nya harus sama dengan nama file yang kalian buat dan nama class juga harus diawali dengan huruf beras atau kapital.

Langkah yang Kelima adalah membuat sebuah controller baru, silahkan buka application/controllers dan buah lah sebuah file baru, disini saya akan membuat file dengan nama C_barang.php 

<?php
/**
 * 
 */
class C_barang extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->model('M_barang');
}

public function tampil_barang()
{
$data['data'] = $this->M_barang->data_barang();
$this->load->view('V_barang',$data);
}
}


?>

sama halnya dengan membuat class dalam model, di dalam membuat controller nama class juga harus diperhatikan, di dalam function __construct() kita memanggil model yang telah kita buat tadi, dengan menuliskan $this->load->model('nama_model') jika kalian memiliki banyak model yang ingin diload bisa kalian masukkan dalam sebuah array atau di masukkan di dalam autoload.

Langkah yang keenama adalah membuat file view, view sendiri berfungsi untuk menampilkan data hasil dari query yang terdapat di dalam model yang diload, silahkan buka application/views dan buat sebuah file baru. disini saya akan membuat file baru dengan nama "V_barang.php".

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter | Menampilkan Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Kode Barang</th>
      <th scope="col">Nama Barang</th>
      <th scope="col">Stok Barang</th>
    </tr>
  </thead>
  <tbody>
  <?php 
  $no=1;
  foreach ($data as $dt) {
  ?>
    <tr>
      <th scope="row"><?php echo $no++; ?></th>
      <td><?php echo $dt['kd_barang']; ?></td>
      <td><?php echo $dt['nama_barang']; ?></td>
      <td><?php echo $dt['stok_barang']; ?></td>
    </tr>
    <?php 
}
    ?>
  </tbody>
</table>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Jangan kalian hiraukan source code yang berwarna merah itu hanya untuk tampilan yang saya ambil dari Bootstrap. jika sudah maka cobalah untuk meaksesnya di browser kalian dengan mengtikkan localhost/nama_folder/index.php/nama_controller/nama_fungsi contoh disini saya akan mengakses http://localhost/tutorial/index.php/C_barang/tampil_barang maka akan tampil seperti ini :

CURD codeigniter 3

Ok sekian tutorial codeigniter 3 tentang menampilkan data dari database ke data tabel, semoga tutorial kali ini bermanfaat dan dapat menajadi referensi kalian untuk belajar. 

You might also like

0 Comments


EmoticonEmoticon

About