Menampilkan Posting Artikel di halaman depan dengan Codeigniter, Oke kita lanjut lagi di tutorial membuat blog menggunakan codeigniter. Artikel ini adalah lanjutan dari tutorial codeigniter sebelumnya. buat kalian yang baru saja gabung kalian bisa cek list tutorial membuat blog menggunakan codeigniter dari awal hingga sekarang. Oke silahkan buka projek kita disini saya akan membuka projek belajar web yang letaknya berada di C:xampphtdocsbelajarweb.
lalu buka menggunakan teks editor kalian, disini saya menggunakan visual studio code.
Sebelum kita koding kita akan menggunakan css bootstrap untuk tampilan frontend blog ini. Silahkan download css library bootstrap dengan mengunjungi getbootstrap.com. silahkan di download kemudian ekstrak di folder belajarweb/assets/template/frontend kemudian rename foldernya menjadi bootstrap-4.
Menampilkan Posting Artikel di halaman depan dengan Codeigniter
Sekarang kita akan mengkonfigurasi halaman depan, Ketika kita mengakses http://localhost/belajarweb/ yang tampil adalah welcome message ya, Nah ini akan kita ubah karena nanti kita akan menampilkan semua postingan artikel kita di halaman ini. Silahkan kalian seting routes yang berada di application/config/routes.php. lalu ubah Code :
$route['default_controller'] = 'welcome';menjadi
$route['default_controller'] = 'article';Lalu buka autoload.php masih di folder config kemudian tambahkan text helper, sehingga kodenya menjadi seperti ini :
$autoload['helper'] = array('url', 'text', 'form');Nah sekarang kita akan membuat sebuah controller yang akan menampilkan semua artikel di halaman depan, silahkan buka folder belajarweb/application/controller lalu buat file dengan nama Article.php ini sesuai dengan routes yang tadi kita buat, lalu kemudian paste kan code berikut ini :
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Article extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('article_model');
$this->load->model('category_model');
}
//Halaman Utama
public function index()
{
$article = $this->article_model->get_all();
$all_category = $this->category_model->get_all();
$latepost = $this->article_model->latest();
// List Semua article Navigasi Halaman
$this->load->library('pagination');
$config['base_url'] = base_url('article/index/');
$config['total_rows'] = count($this->article_model->total());
$config['per_page'] = 4;
$config['uri_segment'] = 3;
$limit = $config['per_page'];
$start = ($this->uri->segment(3)) ? ($this->uri->segment(3)) : 0;
$this->pagination->initialize($config);
$article = $this->article_model->article($limit, $start);
$data = array(
'paginasi' => $this->pagination->create_links(),
'article' => $article,
'all_category' => $all_category,
'latepost' => $latepost,
'content' => 'frontend/article/get_all'
);
$this->load->view('frontend/layout/wrapp', $data, FALSE);
}
// Fungsi untuk Menampilkan Artikel per Category
public function category($category_slug)
{
$category = $this->category_model->view_category($category_slug);
$all_category = $this->category_model->get_all();
$category_id = $category->id;
$latepost = $this->article_model->latest();
$this->load->library('pagination');
$config['base_url'] = base_url('article/category/' . $category_slug . '/index/');
$config['total_rows'] = count($this->article_model->total_category($category_id));
$config['per_page'] = 4;
$config['uri_segment'] = 5;
$limit = $config['per_page'];
$start = ($this->uri->segment(5)) ? ($this->uri->segment(5)) : 0;
$this->pagination->initialize($config);
$article = $this->article_model->article_category($category_id, $limit, $start);
$data = array(
'paginasi' => $this->pagination->create_links(),
'article' => $article,
'latepost' => $latepost,
'all_category' => $all_category,
'content' => 'frontend/article/get_all'
);
$this->load->view('frontend/layout/wrapp', $data, FALSE);
}
//Fungsi untuk menampilkan Detail Artikel
public function detail($article_slug = NULL)
{
if (!empty($article_slug)) {
$article_slug;
} else {
redirect(base_url('article'));
}
$article = $this->article_model->view_detail($article_slug);
$all_category = $this->category_model->get_all();
$latepost = $this->article_model->latest();
$data = array(
'id' => $this->session->userdata('id'),
'title' => $article->title,
'deskripsi' => $article->title,
'keywords' => $article->keywords,
'article' => $article,
'all_category' => $all_category,
'latepost' => $latepost,
'tanggal_post' => date('Y-m-d H:i:s'),
'content' => 'frontend/article/detail'
);
$this->load->view('frontend/layout/wrapp', $data, FALSE);
}
}
/* End of file article.php */
/* Location: ./application/controllers/Article.php */Jika sudah simpan, lalu buka Article_model.php yang berada di application/models lalu ganti semua kode dengan kode di bawah ini
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Article_model extends CI_Model
{
//load database
public function __construct()
{
parent::__construct();
$this->load->database();
}
//Ambil semua data article
public function get_all()
{
$this->db->select('article.*, category.category_name, user.name');
$this->db->from('article');
//join dengan tabel category
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
$this->db->order_by('id', 'DESC');
$query = $this->db->get();
return $query->result();
}
//Detail data article berdasarkan id
public function detail($id)
{
$this->db->select('*');
$this->db->from('article');
$this->db->where('id', $id);
$query = $this->db->get();
return $query->row();
}
//Menambahkan data
public function create($data)
{
$this->db->insert('article', $data);
}
//Mengubah data
public function update($data)
{
$this->db->where('id', $data['id']);
$this->db->update('article', $data);
}
//Menghapus Data
public function delete($data)
{
$this->db->where('id', $data['id']);
$this->db->delete('article', $data);
}
//list semua artikel yang di tampilkan di frontend
public function article($limit, $start)
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array('article_status' => 'Publish'));
$this->db->order_by('id', 'DESC');
$this->db->limit($limit, $start);
$query = $this->db->get();
return $query->result();
}
//list Article terbaru untuk sidebar
public function latest()
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array('article_status' => 'Publish'));
$this->db->order_by('id', 'DESC');
$this->db->limit(6);
$query = $this->db->get();
return $query->result();
}
public function total()
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array('article_status' => 'Publish'));
$this->db->order_by('id', 'DESC');
$query = $this->db->get();
return $query->result();
}
//list Category Article
public function article_category($category_id, $limit, $start)
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array(
'article_status' => 'Publish',
'article.category_id' => $category_id
));
$this->db->order_by('id', 'DESC');
$this->db->limit($limit, $start);
$query = $this->db->get();
return $query->result();
}
//Total Kategori Berita
public function total_category($category_id)
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array(
'article_status' => 'Publish',
'article.category_id' => $category_id
));
$this->db->order_by('id', 'DESC');
$query = $this->db->get();
return $query->result();
}
//Detail berita
public function view_detail($article_slug)
{
$this->db->select('article.*,category.category_name, category.category_slug, user.name, user.avatar');
$this->db->from('article');
// Join
$this->db->join('category', 'category.id = article.category_id', 'LEFT');
$this->db->join('user', 'user.id = article.user_id', 'LEFT');
//End Join
$this->db->where(array(
'article_status' => 'Publish',
'article.article_slug' => $article_slug
));
$this->db->order_by('id', 'DESC');
$query = $this->db->get();
return $query->row();
}
}Jika Sudah Simpan File Sekarang kita akan seting tampilan halaman forntendnya, Kita akan menggunakan css bootstrap silahkan download css bootstrap 4 di sini : getbootstrap.com Lalu download type Compiled CSS and JS
Kemudian Ekstrak Hasil download ke folder belajarweb/assets/template/frontend, Kemudian rename foldernya menjadi bootstrap menjadi bootstrap-4. kemudian tambahkan folder css lalu buat file dengan nama style.css lalu tambahkan kode css di bawah ini :
.pagination{
padding:15px 20px;
background-color: #fff;
border-radius: 10px;
}
.pagination a{
padding: 10px 20px 10px 20px;
background-color: #008fe1;
color: #fff;
margin: 0;
border-left: 1px solid #fff;
}
.pagination .active{
background: #1d7ceb;
color: #fff;
}
.pagination a:hover{
text-decoration: none;
background-color: #1d7ceb;
color: #fff;
}
.pagination strong {
padding: 10px 20px 10px 20px;
background-color: #008fe1;
color: #fff;
margin: 0;
}Oke sekarang kalian buka folder views/frontend lalu buat sebuah folder dengan nama layout kemudian buat 6 file php dan isi dengan kode di bawah ini.
content.php :
<?php
if ($content) {
$this->load->view($content);
}footer.php
</div>
</div>
<!-- Credit -->
<hr class="featurette-divider">
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2019 Belajarweb.</p>
</footer>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="/docs/4.4/assets/js/vendor/jquery.slim.min.js"></script>')
</script>
<script src="<?php echo base_url('assets/template/frontend/bootstrap-4/js/bootstrap.bundle.min.js'); ?>"></script>
</body>
</html>head.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>Belajar Web</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url('assets/template/frontend/bootstrap-4/css/bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assets/template/frontend/css/style.css'); ?>" rel="stylesheet">
</head>
<body>header.php
<?php $category = $this->category_model->get_all(); ?>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url(); ?>">Home <span class="sr-only">(current)</span></a>
</li>
<?php foreach ($category as $category) { ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('article/category/' . $category->category_slug); ?>"><?php echo $category->category_name; ?></a>
</li>
<?php }; ?>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link btn btn-outline-secondary" href="<?php echo base_url('auth'); ?>">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main">
<div class="container py-5">
<div class="row">sidebar.php
<div class="col-md-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Category</span>
</h4>
<ul class="list-group mb-3">
<?php foreach ($all_category as $all_category) { ?>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0"><a href="<?php echo base_url('article/category/' . $all_category->category_slug); ?>"><?php echo $all_category->category_name; ?></a></h6>
</div>
</li>
<?php } ?>
</ul>
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Latest article</span>
</h4>
<ul class="list-group mb-3">
<?php foreach ($latepost as $latepost) { ?>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0"><a href="<?php echo base_url('article/detail/' . $latepost->article_slug); ?>"><?php echo $latepost->title; ?></a></h6>
</div>
</li>
<?php } ?>
</ul>
</div>wrapp.php
<?php
require_once('head.php');
require_once('header.php');
require_once('content.php');
require_once('sidebar.php');
require_once('footer.php');Oke sekarang kita akan menampilkan article di halaman depan, Silahkan buka folder frontend kemudian buat sebuah folder dengan nama article, lalu di dalam folder article buat file php dengan nama get_all.php
<div class="col-md-8">
<hr class="featurette-divider">
<?php foreach ($article as $article) { ?>
<div class="row featurette">
<div class="col-md-5 order-md-1">
<img class="img-fluid" src="<?php echo base_url('assets/uploads/images/' . $article->image); ?>">
</div>
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading"><?php echo strip_tags(character_limiter($article->title, 50)); ?></h2>
<?php echo strip_tags(character_limiter($article->content, 100)); ?>
<a href="<?php echo base_url('article/detail/' . $article->article_slug); ?>"> Read More</a>
</div>
</div>
<hr class="featurette-divider">
<?php } ?>
<div class="pagination col-md-12 text-center">
<?php if (isset($paginasi)) {
echo $paginasi;
} ?>
</div>
</div>Jika sudah Simpan File, Sekarang kita akan membuat halaman detail dari artikelnya, masih di folder article silahkan buat file php dengan nama detail.php kemudian copy paste kode di bawah ini :
<div class="col-md-8">
<img class="img-fluid" src="<?php echo base_url('assets/uploads/images/' . $article->image); ?>">
<h2><?php echo $article->title; ?></h2>
<span class="mr-md-5 text-muted"> Posted by : <?php echo $article->name; ?></span>
<span class="text-muted"> Category : <a href="<?php echo base_url('article/category/' . $article->category_slug); ?>"><?php echo $article->category_name; ?></a></span><br>
<?php echo $article->content; ?>
</div>Oke jika sudah silahkan simpan file, Sekarang silahkan buat beberapa buah artikel melalui andmin panel kemudian akses halaman http://localhost/belajarweb maka tampilannya kurang lebih seperti ini :
Halaman Depan
