Membuat Web Data Mahasiswa Sederhana Menggunakan Framework Codeigniter dan Bootstrap 4, di web ini kita hanya mempelajari dasar-dasar seputar CRUD yan

Pada kesempatan kali ini saya akan share mengenai Membuat Web Data Mahasiswa Sederhana Menggunakan Framework Codeigniter dan Bootstrap 4, di web ini kita hanya mempelajari dasar-dasar seputar CRUD yang kepanjangan nya adalah Create,Read,Update,dan Delete. Create artinya kita Membuat sebuah data baru, atau bisa juga diartikan sebagai Menambah Data baru, lalu ada Read yaitu membaca sebuah data, bisa juga diartikan menampilkan sebuah data, lalu ada Update yaitu memperbarui/mengubah data, dan terakhir ada Delete yang artinya Menghapus sebuah data.

Web yang akan kita buat saat ini akan mempunyai fungsi CRUD dasar, dan juga kita akan mempelajari sebuah framework CSS yaitu Bootstrap versi 4. Hasil Web pada tutorial ini kurang lebih akan seperti ini :

Disini kita hanya baru ingin menampilkan sebuah data dari database, yang mana data tersebut akan kita tampilan dalam bentuk grid, lalu ketika kita klik button detail akan muncul sebuah modal untuk menampilkan detail data mahasiswa.

Well ini akan sangat panjang karena disini saya juga akan menjelaskan cara pembuatan database dan tabel, begitu juga dengan bootstrap.

Disini kita belum bisa untuk Upload gambar, jadi pada kasus ini gambar tiap data Mahasiswa akan menggunakan gambar yang sama.

Oke langsung kita mulai, pertama kalian harus memenuhi syarat dibawah ini untuk mengikuti tutorial ini.

Mempunyai File CodeIgniter 3, kalian bisa download di web resmi nya disini
Mempunyai File Bootstrap 4, bisa kalian download disini
Aplikasi XAMPP untuk menjalankan Apache serta MySQL
Memahami Konsep MVC bisa baca di artikel sebelumnya atau klik disni
Telah install aplikasi code editor seperti Visual Studio Code,Sublime Text, atau Atom, yang saya digunakan disini adalah VSCode, code editor tak harus sama.

Buat Project Baru Ke Dalam Folder htdocs

Hal yang pertama harus kalian lakukan adalah membuat sebuah project/folder baru di dalam folder htdocs kalian, setelah kalian buat lalu kalian bisa pindahkan file codeigniter dan Bootstrap kalian kedalam project yang sudah dibuat. Bingung bagaimana cara memindahkan serta menjalan codeigniter ? silahkan ikuti artikel sebelumnya mengenai Installasi CodeIgniter atau bisa lihat featured artikel dibawah.

Oh iya, sebelum project kalian dijalankan pastikan kalian telah menjalankan apache serta mySQL di aplikasi XAMPP kalian, karena jika tidak project tidak dapat berjalan.

Setelah kita selesai membuat folder project baru dan memindahkan file CI serta Bootstrap, selanjutnya kita akan membuat sebuah database dan tabel nya di phpMyAdmin terlebih dahulu.

Membuat Database Serta Tabel di phpMyAdmin

Langkah berikutnya adalah kita akan membuat sebuah database baru, berikut adalah langkah-langkah nya.

Buka phpMyAdmin dengan cara mengetik url di browser kalian yaitu : localhost/phpmyadmin/
Setelah berhasil membuka phpMyAdmin, langkah berikutnya adalah membuat sebuah database baru, dengan cara klik menu database pada menu diatas.
Ketik nama database, disini saya memberi nama database nya adalah : db_mahasiswa

Dikarenakan nama database db_mahasiswa di phpMyAdmin saya sudah ada, jadi saya memberi nama nya menjadi db_mahasiswa2

Setelah kita berhasil membuat database, selanjutnya kita akan membuat tabel di dalam database db_mahasiswa, berikut langkah-langkah nya :

Pertama kita akan membuat tabel dengan nama data_mahasiswa yang mana didalam tabel tersebut terdapat 8 column, yaitu : nim,nama_lengkap,jk(jenis kelamin),prodi,pp(photo profil),email,kampus,dan quotes.

CREATE TABLE `db_mahasiswa2`.`data_mahasiswa` ( `nim` INT(8) NOT NULL , `nama_lengkap` VARCHAR(55) NOT NULL , `jk` ENUM('Laki-laki','Perempuan','Other','') NOT NULL , `prodi` VARCHAR(50) NOT NULL , `pp` VARCHAR(25) NOT NULL , `email` VARCHAR(55) NOT NULL , `kampus` VARCHAR( 55) NOT NULL , `quotes` VARCHAR(125) NOT NULL , PRIMARY KEY (`nim`)) ENGINE = InnoDB;

Kalian bisa lihat query pembuatan tabel nya di atas, dan berikut adalah struktur tabel nya :

Tak ingin pusing buat tabel? copy query diatas lalu klik database db_mahasiswa lalu klik menu SQL pada phpMyAdmin dan paste query tsb ke menu SQL dan klik GO.

Oke dengan begini database serta tabel nya telah kita buat, lalu apa langkah selanjutnya? kita akan mulai untuk meng-konfigurasi codeigniter kita agar terhubung dengan database yang telah kita buat.

Konfigurasi CodeIgniter

Pertama kita buka project kita pada code editor kita, tentu mungkin tiap code editor untuk membuka sebuah folder project akan berbeda, pertama kalian bisa klik File->Open Folder->(pilih folder)->klik open

Setelah folder project berhasil kita buka, selanjutnya kita masuk ke tahap konfigurasi, pertama kita bisa masuk kedalam folder config yang ada pada folder application.

Ada beberapa hal yang perlu diperhatikan dalam folder config, pertama kita akan mengatur koneksi database, tujuannya agar project kita dapat terhubung kedalam database yang telah kita buat, untuk mengatur sebuah database, kita bisa membuka file database.php yang terdapat pada folder config.

Ada beberapa baris line di file database.php, namun yang perlu kalian ubah hanya pada bagian username,password, dan database kalian bisa ubah seperti gambar diatas.

Untuk username mengapa diubah menjadi root? karena root sendiri adalah sebuah user default dari phpMyAdmin, selain user default, root adalah sebuah user yang paling berkuasa, intinya ketika sistem membutuhkan sebuah izin akses, dengan user root kita tak perlu memikirkan sebuah izin untuk suatu permissions (analogi user root) #CMIIW.

mengapa password di kosongkan? karena untuk XAMPP versi Windows sendiri dalam mengatur koneksi database tidak perlu membutuhkan sebuah password (kecuali settings sudah kalian ubah)

dalam 'database' kalian bisa isikan nama database yang telah kalian buat, disini sebagai contoh kita telah membuat database db_mahasiswa.

Selanjutnya apa yang harus kita konfigurasi lagi?? kita akan konfigurasi base_url, apa itu? base url sendiri kalau menurut saya adalah sebuah alamat web kita atau juga bisa disebut url web kita, tentu ketika web kita belum di hosting dan masih menggunakan sebuah server localhost kita tidak bisa memberi url web kita seperti www.data_mahasiswa.com, disini kita harus atur nama/url web kita seperti kita meng-akses project kita lewat halaman url web browser yaitu : localhost/data_mahasiswa.

Bagaimana cara konfigurasi nya? seperti biasa untuk yang berhubungan tentang konfigurasi semua ada pada folder application->config, di folder config terdapat banyak file yang mana tiap file memiliki fungsi yang berbeda, pada kasus ini kita ingin memberi sebuah alamat url kita pada base_url, base url sendiri terdapat pada file config.php kalian bisa buka dan scroll kebawah hingga menemukan baris/line base_url.

Ubah isi base_url menjadi alamat url web.

Terakhir kita akan meng-aktifkan sebuah helper dan juga libraries, di dalam codeigniter ada banyak sekali sebuah function bantu yang telah dibuat, contoh untuk kasus nanti, ketika kita ingin mengambil sebuah data dari database, biasanya kita akan mengetik seperti ini : SELECT*FROM tabel dengan adanya libararies 'database' kita tak perlu untuk menggunakan baris query seperti itu, cukup $this->db->get('nama_tabel'); baris tersebut sama saja seperti baris query SELECT, dan jauh lebih aman dari serangan SQL Inject dibanding kita menulis code dengan metode query SQL.

Lalu ada helper, singkat nya itu bantuan, fungsinya sama seperti libraries, yaitu mempermudah kita dalam proses pembuatan suatu website. contoh helper yang akan kita gunakan nanti adalah 'url' yang artinya helper url akan membantu kita dalam proses pembuatan suatu url/link.

Oke mari kita atur, untuk mengaktifkan suatu helper maupun libraries, kita dapat mengatur nya lewat file autoload.php yang ada pada folder config.

mengatur helper.

mengatur libraries.

MVC (Model, View, Controller)

Kali ini kita akan bermain dalam lingkungan MVC, pertama kita akan membuat sebuah controller yang mana controller ini akan berfungsi untuk menampilkan halaman index atau halaman web data_mahasiswa ini, perlu kalian ketahui bahwa semua folder MVC berada di folder application.

Untuk halaman index kurang lebih akan seperti ini :

ketika kita klik button Lihat Data web akan redirect ke halaman list data mahasiswa.

Silahkan kalian buat sebuah controller baru, yaitu Home.php tentu kalian buat di folder Controller. dan tambahkan beberapa baris kode berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller
{
    function index(){
        $data['judul']="Homepage | Web Data"; // membuat judul web
        $this->load->view('head',$data); // load halaman view yang bernama "head" dan 
                                            sertakan data/judul
        $this->load->view('welcome'); // load halaman view yang bernama welcome
        $this->load->view('footer'); // load halaman view yang bernama footer
    }
}

Pertama kita buat terlebih dahulu sebuah class yang bernama Home, yang mana class ini kita extends ke CI_Controller yang menandakan bahwa class tsb termasuk kedalam sebuah controller.

Didalam class Home, kita buat sebuah function yaitu index() yang mana tugas function tsb akan meng-load halaman view berdasarkan lokasi file serta data yang ditentukan, sample :

Tujuan kali ini adalah menampilkan halaman index atau halaman utama web yang akan kita buat, pertama kita butuh sebuah View untuk membuat halaman web nya, dan controller untuk menampilkan View nya, jadi, didalam function index yang ada pada controller Home, pertama kita buat sebuah variabel bernama $data lalu kita beri nama lain variabel tsb untuk kita panggil di view yaitu 'judul', yang mana judul ini akan kita letakan pada tag <tittle></tittle> nanti.

Lalu kita load halaman view yaitu head,welcome,lalu footer, yang berbeda hanya pada halaman head, karena kita akan mengatur judul web melalui controller, jadi kita sertakan variabel $data pada parameter ke dua.

Setelah kita selesai membuat Controller untuk menampilkan halaman index, mari kita bua view nya. Pertama kita buat nama file sesuai dengan apa yang kita buat pada Controller, disini kita meng-load 3 view, head,welcome,dan footer, kalian bisa anggap bahwa view welcome adalah sebuah body (halaman isi utama suatu website). mengapa kita pisahkan? agar ketika kita membuat suatu halaman lain kita tak perlu membuat nya dari awal, disini tugas view head, dan footer hanya untuk menampung CSS dan JS, kita akan lebih fokus pada isi konten (body).

Task : Membuat file head.php,welcome.php,dan footer.php

Pergi ke halaman web bootstrap, lalu kalian klik getting started

agar lebih cepat, kalian bisa copy bagian starter template, tujuan nya agar kita tak perlu link css/js bootstrap satu-satu. (pastikan laptop kalian memiliki akses internet)

Copy starter template, lalu kalian pastekan pada halaman view welcome.php

// View Head.php
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
    <body>
// END View Head.php

// View Welcome.php

     <h1>Hello, world!</h1>

// END View Welcome

//View Footer.php

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
     crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
  </body>
</html>

//END View Footer.php

Perhatikan baik-baik komentar pada kode diatas, disana tertera bahwa pada tiap bagian memiliki tempat nya masing-masing. Pada tag <head> hingga <body> kita akan menempatkan kode tersebut kedalam file view head.php, lalu untuk bagian welcome yaitu pada bagian tag <h1> saja, dan footer kita cut mulai dari tag <script> hingga </html>

Jika sudah selesai maka folder view akan memiliki list file berikut :

Selanjutnya mari kita config default controller kita, karena kita ingin ketika kita meng-akses web kita halaman yang akan ditampilkan adalah halaman yang ada pada controller Home dan mengarah pada function index, untuk mengatur default controller kita bisa membuka folder config kembali lalu kita klik file routes.php

Kita ganti default controller nya yang sebelumnya adalah Welcome kita ganti menjadi Home, setelah itu save lalu close.

Sekarang kita balik lagi ke file Welcome pada view, kalian hapus tag <h1> untuk menampilkan kata hello world, kalian ganti menjadi kode seperti dibawah ini.

<section class="hero-page pt-4">
    <div class="container">
        <div class="jumbotron jumbotron-fluid text-center">
            <p style="font-size: 35px;" class="display-4">Selamat Datang di Web Data
             <strong>Mahasiswa</strong></p>
            <p class="lead">Web sederhana ini dibuat hanya untuk latihan/evaluasi saya 
                dan keperluan konten blog</p>
            <hr class="my-4" width="50%">
            <p>Silahkan klik button dibawah untuk melihat data.</p>
            <a class="btn btn-secondary btn-md" href="<?= base_url()?>home/data_page"
             role="button">Lihat Data</a>
        </div>
    </div>
</section>

Untuk memisahkan tiap bagian konten kita bisa menggunakan tag <section>, disini dalam tag section saya memberi class yaitu hero-page dan pt-4, pt-4 adalah sebuah class untuk mengatur padding-top sebesar 4px, bootstrap sudah menyediakan class ini untuk memudahkan kita, jadi kita tak perlu untuk membuat CSS manual dalam mengatur sebuah padding.

Setelah itu kita panggil class .container dalam tag <div>, tujuan nya agar nanti class jumbotron yang akan kita buat bakal memiliki jarak dan mengarah ke tengah.

<a class="btn btn-secondary btn-md" href="<?= base_url()?>home/data_page" role="button">Lihat Data</a>

Perhatikan pada kode diatas, disana kita membuat tag <a> yang mana kita beri class btn(button) sehingga hasilnya akan membentuk sebuah button "Lihat Data" dan ketika kita klik, web akan mengarahkan kita pada Controller Home yang memiliki function data_page yang mana di function data_page akan meng-load halaman view list data mahasiswa.

Maka dari itu, sekarang masalah pada view Welcome.php telah selesai, memilik kendala? silahkan komentar atau kontak saya.

Selanjutnya Apa? Kita belum memanggil variabel $data untuk memunculkan judul yang telah kita tentukan di Controller serta mengatur jarak pada navbar, sekarang mari kita buka file head.php dan ubah menjadi seperti ini :

<!DOCTYPE html>
<html lang="en">

<style>
.nav-link{
    margin-right: 10px;
}

</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $judul; ?></title> // memanggil judul

    <!-- CSS Bootstrap -->
    <link rel="stylesheet" href="<?= base_url('assets')?>/css/bootstrap.min.css">
</head>
<body>

Kita buat tag <style> dan letakkan di atas tag <./head> lalu kita select class .nav-link yang mana kita beri properti yaitu margin-right sebesar 10px. Setelah itu kita panggil variabel $data yang kita beri nama lain 'judul' pada tag <title></title>. <?= $judul; ?> syntax tersebut sama saja memiliki arti yaitu : <?php echo $judul; ?>

Dengan begini kita telah selesai berurusan dengan view Welcome.php, saat nya kita membuat halaman View list data mahasiswa, sebelum itu mari kita buat sebuah function baru pada controller Home yaitu data_page dan buat seperti dibawah.

 function data_page(){
        $data = [
            'judul' => "Halaman Data | Web Data", // Memberi Judul
            'd_mahasiswa' => $this->m_data->getData()->result() // Menampung lalu
                        parsing data pada function getData yang ada pada model m_data.
        ];
        $this->load->view('head',$data); // Load view head.php dengan data judul
        $this->load->view('halaman_data',$data); // Load view halaman_data.php dengan 
                                                data yang ada pada database
        $this->load->view('footer'); // Load view footer.php
    }

Di Function data_page tujuan nya adalah untuk meng-load halaman view list data mahasiswa, serta menerima data dari model yang kemudian diteruskan kepada View. Pertama kita buat variabel $data, disini kita menampung 2 nilai, pertama judul, kedua data mahasiswa yang didapatkan dari model m_data pada function getData() yang kemudian kita result.

Setelah itu kita load view nya beserta data yang telah disiapkan.

Membuat Model

Selanjutnya mari kita buat sebuah Model yaitu m_data.php pada folder Models lalu sesuaikan seperti dibawah.

<?php
class m_data extends CI_Model
{
    function getData()
    {
        return $this->db->get('data_mahasiswa'); // Mengembalikan semua nilai yang 
                                                kita ambil dari tabel data_mahasiswa
    }
}

Seperti biasa kita buat sebuah class terlebih dahulu lalu kita extends menjadi CI_Model agar menandakan bahwa class m_data termasuk pada Model. Setelah itu kita buat function getData()

lalu di dalam function kita akan mengambil semua data yang ada pada tabel data_mahasiswa yang berada pada database setelah itu kita kembalikan nilai nya.

Sebelum kita buat view list data mahasiswa, alangkah lebih baiknya jika kita membuat function tambahan yaitu __construct(); pada controller Home. Silahkan sesuaikan seperti dibawah :

function __construct()
    {
        parent::__construct();
        $this->load->model('m_data');
    }

Mengapa kita buat? tujuan nya agar kita tak perlu meng-load model pada setiap function yang kita buat di controller jika kita ingin menggunakan model tsb, selain untuk meload model, di construct kita bisa meng-load sebuah library atau helper.

dengan begini controller Home akan memiliki baris code seperti dibawah :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller
{
    
    function __construct()
    {
        parent::__construct();
        $this->load->model('m_data');
        load
    }
    

    function index(){
        $data['judul']="Homepage | Web Data";
        $this->load->view('head',$data);
        $this->load->view('welcome');
        $this->load->view('footer');
    }
    
    function data_page(){
        $data = [
            'judul' => "Halaman Data | Web Data",
            'd_mahasiswa' => $this->m_data->getData()->result()
        ];
        $this->load->view('head',$data);
        $this->load->view('halaman_data',$data);
        $this->load->view('footer');
    }
}

View halaman_data

Selanjutnya kita akan membuat file view halaman_data pada view, lalu sesuaikan seperti code dibawah :

<section class="data-page pt-4">
    <div class="container">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>Selamat Datang!</strong> You should check in on some of 
                those fields below.
        </div>
        <div class="card">
            <div class="card-body">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary active" href="#">
                        List Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary" href="#">
                        Tambah Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary" href="#">
                        Edit Data</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link btn btn-outline-secondary">
                        Hapus Data</a>
                    </li>
                    <li class="nav-item">
                        <a href="<?= base_url()?>home"
                        class="nav-link btn btn-outline-secondary">Keluar</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>


<section class="addPage pt-3">
    <div class="container">
        <div class="jumbotron">
            <div class="row">
            <?php
            foreach ($d_mahasiswa as $data_m) { ?>
                <div class="col-sm-3">
                    <div class="card" style="width: 14rem;">
                        <div class="card-body text-center">
                            <img class="img-thumbnail img-fluid" width="50%" 
                    src="<?= base_url('assets')?>/img/enjun.jpg" alt="">
                            <h5 class="card-title"><?= $data_m->nama_lengkap ?></h5>
                            <h6 class="card-subtitle mb-2 text-muted">
                            <?= $data_m->jk ?></h6>
                            <p><?= $data_m->prodi ?></p>
                            <a href="#" class="btn btn-secondary" data-toggle="modal"
                            data-target="#detail<?= $data_m->nim ?>">Detail</a>
                        </div>
                    </div>
                </div>
            <?php } ?>
            </div>
        </div>
    </div>
</section>

<?php
foreach ($d_mahasiswa as $data_m) { ?>
<!-- Modal -->
<div class="modal fade" id="detail<?= $data_m->nim ?>" tabindex="-1" role="dialog"
     aria-labelledby="Detail" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Detail Mahasiswa</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-sm-5">
                <img class="img-thumbnail img-fluid" width="100%" 
                src="<?= base_url('assets')?>/img/enjun.jpg" alt="">
            </div>
            <div class="col-sm-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><strong>Nama  : </strong>
                        <?= $data_m->nama_lengkap; ?></li>
                    <li class="list-group-item"><strong>NIM   : </strong>
                        <?= $data_m->nim; ?></li>
                    <li class="list-group-item"><strong>Email : </strong>
                        <?= $data_m->email; ?></li>
                    <li class="list-group-item"><strong>Kampus: </strong>
                        <?= $data_m->kampus; ?></li>
                </ul>
            </div>
        </div>
        <blockquote class="blockquote text-center">
            <p><strong>Quotes :</strong></p>
            <p class="mb-0"><?= $data_m->quotes ?></p>
            <footer class="blockquote-footer"><?= $data_m->nama_lengkap ?></footer>
        </blockquote>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<?php } ?>

Mari kita lihat tampilan web yang akan kita buat :

Pertama kita butuh sebuah alert, lalu navbar, dan juga card, hal yang pertama kita lakukan adalah membuat sebuah section untuk memisahkan bagian2 tiap konten. setelah itu kita buat sebuah div dengan class .container agar posisi terlihat lebih ke menengah, baru kita masukan tiap elemen nya, alert,navbar,dan card untuk membungkus navbar.

<section class="data-page pt-4">
    <div class="container">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>Selamat Datang!</strong> You should check in on some of those 
            fields below.
        </div>
        <div class="card">
            <div class="card-body">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary active" href="#">
                        List Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary" href="#">
                        Tambah Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-secondary" href="#">
                        Edit Data</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link btn btn-outline-secondary">
                        Hapus Data</a>
                    </li>
                    <li class="nav-item">
                        <a href="<?= base_url()?>" class="nav-link btn btn-outline
                        -secondary">Keluar</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

Untuk button keluar, kita arahkan ke base_url, yang artinya jika di klik akan mengarah pada halaman website ketika pertama kali dibuka.

Setelah itu kita buat untuk list data nya dalam bentuk card :

<section class="addPage pt-3">
    <div class="container">
        <div class="jumbotron">
            <div class="row">
            <?php
            foreach ($d_mahasiswa as $data_m) { ?>
                <div class="col-sm-3">
                    <div class="card" style="width: 14rem;">
                        <div class="card-body text-center">
                            <img class="img-thumbnail img-fluid" width="50%" 
                            src="<?= base_url('assets')?>/img/enjun.jpg" alt="">
                            <h5 class="card-title"><?= $data_m->nama_lengkap ?></h5>
                            <h6 class="card-subtitle mb-2 text-muted">
                            <?= $data_m->jk ?></h6>
                            <p><?= $data_m->prodi ?></p>
                            <a href="#" class="btn btn-secondary" data-toggle="modal"
                             data-target="#detail<?= $data_m->nim ?>">Detail</a>
                        </div>
                    </div>
                </div>
            <?php } ?>
            </div>
        </div>
    </div>
</section>

Di dalam jumbotron, akan menampilkan 4 card dalam satu baris, yang artinya dalam grid system, kita harus mengatur tiap column sebesar 3 sebanyak 4 kali yang jika ditotalkan hasilnya adalah 12 (Jika belum paham mengenai Grid System, kalian bisa cari refrensi lainnya di google), intinya 12 adalah jumlah column yang harus terpenuhi dalam column.

            <?php
            foreach ($d_mahasiswa as $data_m) { ?>

Disini kita menggunakan foreach untuk perulangan data mahasiswa, kita akan menggunakan perulangan terhadap element card yang kita gunakan sebagai menapilkan list data mahasiswa. Setelah data telah kita aliaskan menjadi $data_m selanjutnya kita panggil nilai nya dengan menggunakan <?= $data_m->nama_lengkap ?> untuk memanggil data nama_lengkap pada tabel data_mahasiswa.

Dan untuk ,memanggil suatu gambar bisa menggunakan syntax <?= base_url('assets')?>/img/enjun.jpg" artinya kita harus membuat folder img pada folder assets untuk menyimpan sebuah gambar.

Pada bagian tombol detail jika diperhatikan kita akan menggunakan sebuah modal dalam menampilkan detail data mahasiswa, data-target="#detail<?= $data_m->nim ?>" ketika kita meng klik button detail, maka ketika menuju ke target yang kita tuju, web akan menyertakan id/data unik yang sesuai data yang kita pilih berdasarkan id tsb.

hasil saat ini.

Oke itu saja untuk saat ini, semoga apa yang saya jelaskan jelas, namun jika kalian kurang mengerti tentang tutorial ini, kalian bisa tanyakan langsung lewat komentar, atau bisa langsung chat saya lewat kontak yang tersedia, terimaksih.

#3 Read Data (Membuat Web Data Mahasiswa Sederhana Menggunakan CI dan Bootstrap 4)

Komentar