Membuat halaman Article, Oke, kembali lagi bersama saya edikomputer, dan kali ini kita akan melanjutkan tutorial membuat website dengan codeigniter. Kali ini kita akan membuat halaman Article, Category dan halaman User. Buat temen temen yang baru saja nemu artikel ini dan tertarik untuk ikut belajar bersama, saya sarankan buat ikuti tutorial ini dari awal ya, biar nanti nggak bingung.
Membuat halaman Article, Category dan User
Oke langsung aja, sekarang kalian buka folder controllers/admin lalu di dalam folder admin buat file baru dengan nama Article.php huruf pertama gunakan huruf besar ya. lalu kalian copy code ini di file Article.php.
Merancang Halaman Article
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Article extends CI_Controller
{
//load data
public function __construct()
{
parent::__construct();
}
//listing data user
public function index()
{
$data = array(
'title' => 'Data Article',
'content' => 'backend/article/get_article'
);
$this->load->view('backend/layout/wrapp', $data, FALSE);
}
}
Lalu simpan, kemudian buka folder views/backend lalu buat folder article kemudian buat sebuah file get_article.php setelah itu copy code di bawah ini
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?php echo $title; ?></h1>
<a href="#" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-newspaper"></i>
</span>
<span class="text">Tambah Article</span>
</a>
</div>
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th width="5%">No</th>
<th>Judul</th>
<th>Category</th>
<th>Status</th>
<th width="20%">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Judul Artikel</td>
<td>Category</td>
<td>
<span class="badge badge-info p-2">Publish</span>
<span class="badge badge-secondary p-2">Draft</span>
</td>
<td>
<a href='#' class="btn btn-success btn-sm"><i class="fas fa-user-edit"></i> Edit</a>
<a href='#' class="btn btn-danger btn-sm"><i class="far fa-trash-alt"></i> Hapus</a>
<a href='#' class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Nah sekarang kalian bisa lihat tampilannya dengan mengakses http://localhost/belajarweb/admin/article maka tampilannya akan seperti ini.
Merancang Halaman Category
Oke sekarang kita akan buat halaman Category, Silahkan buka folder controllers/admin kemudian buat file Category.php kemudian copy code di bawah ini
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Category extends CI_Controller
{
//load data
public function __construct()
{
parent::__construct();
}
//listing data user
public function index()
{
$data = array(
'title' => 'Data Category',
'content' => 'backend/category/get_category'
);
$this->load->view('backend/layout/wrapp', $data, FALSE);
}
}
Sekarang buka lagi folder views/backend lalu buat folder category kemudian di dalam folder category buat file dengan nama get_category.php copy paste code berikut ini :
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?php echo $title; ?></h1>
<a href="#" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-tag"></i>
</span>
<span class="text">Tambah Category</span>
</a>
</div>
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th width="5%">No</th>
<th>Nama Category</th>
<th width="20%">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category</td>
<td>
<a href='#' class="btn btn-success btn-sm"><i class="fas fa-user-edit"></i> Edit</a>
<a href='#' class="btn btn-danger btn-sm"><i class="far fa-trash-alt"></i> Hapus</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Silahkan kalian cek dengan mengakses http://localhost/belajarweb/admin/category maka tampilannya akan seperti ini.
Merancang Halaman User
Oke kita lanjut ke halaman User, sekarang kita masuk lagi ke folder controllers/admin kemudian buat file User.php kemudian copy code di bawah ini :
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class User extends CI_Controller
{
//load data
public function __construct()
{
parent::__construct();
}
//listing data user
public function index()
{
$data = array(
'title' => 'Data User',
'content' => 'backend/user/get_user'
);
$this->load->view('backend/layout/wrapp', $data, FALSE);
}
}
Jika sudah simpan file, kemudian kita ke folder views/backend kemudian buat folder user lalu di dalam folder user buat file dengan nama get_user.php kemudian copy code di bawah ini
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?php echo $title; ?></h1>
<a href="#" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-user-plus"></i>
</span>
<span class="text">Tambah User</span>
</a>
</div>
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th width="5%">No</th>
<th>Nama</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th width="20%">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nama User</td>
<td>emailuser@mail.com</td>
<td>Admin</td>
<td>
<span class="badge badge-info p-2">Aktif</span>
<span class="badge badge-secondary p-2">Nonaktif</span>
</td>
<td>
<a href='#' class="btn btn-success btn-sm"><i class="fas fa-user-edit"></i> Edit</a>
<a href='#' class="btn btn-danger btn-sm"><i class="far fa-trash-alt"></i> Hapus</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Jika sudah silahkan di save, sekarang coba akses http://localhost/belajarweb/admin/user maka tampilannya akan seperti ini.
Oke sampai disini dulu artikel kita tentang Tutorial membuat web dengan codeigniter Membuat halaman Article, Category dan User. Nanti kita akan lanjutkan lagi tutorialnya dan nanti kita akan membuat CRUD, dan nanti kita akan terhubung ke database, di tunggu aja tutorial selanjutnya ya.