Membuat portal berita sederhana dengan codeigniter dan bootstrap

Membuat portal berita sederhana dengan codeigniter dan bootstrap

Hello sahabat programmer, gimana kabarnya? Semoga sehat selalu ya, agar tetap semangat ngoding nya ehehe..


Pada kesempatan kali ini, saya ingin sharing tentang bagaimana membuat portal berita dengan codeigniter nich. Tutorial ini akan sangat bermanfaat bagi anda yang ingin membuat website portal berita, company profile perusahaan, atau pun website yang membutuhkan post berita, artikel, story, atau pun tutorial.


Untuk membuat portal berita, tentu saja kita membutuhkan text editor yang memudahkan penulisan berita, seperti lataknya menulis di microsoft word.


Text editor web yang cukup populer dikalangan developer web adalah ckeditor. Ckeditor merupakan editor web WYSIWYG. WYSIWYG adalah singkatan dari What You See Is What You Get, artinya apa yang kamu lihat itulah yang kamu dapatkan.


Ok, tanpa basa-basi lagi langsung saja kita masuk kepembahasan. Pertama-tama siapkan terlebih dahulu codeigniter, bootstrap, jquery, dan ckeditor.


Setelah itu silahkan ikuti langkah berikut:

1. Buat database dan tabel dengan mengeksekusi query berikut:

CREATE DATABASE db_news;
USE db_news;

CREATE TABLE tbl_berita(
berita_id INT PRIMARY KEY AUTO_INCREMENT,
berita_judul VARCHAR(150),
berita_isi TEXT,
berita_image VARCHAR(40),
berita_tanggal TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)ENGINE INNODB;

 

2. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_news.


Setelah installasi, buat folder assets di dalam ci_news dan masukan ckeditor, jquery, serta bootstrap didalam folder assets. Kemudian buat folder images didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:


aplication

assets

      ckeditor

      css

      fonts

      images

      jquery

      js

system

 

nah,  folder ckeditor untuk editor WYSIWYG, sedangkan folder css, fonts, dan js adalah folder untuk bootstrap. Folder jquery adalah folder untuk menampung jquery. folder images ini nantinya kita gunakan untuk menampung images berita yang di upload.


Jika anda masih bingung dengan penjelasan diatas, jangan khawatir anda bisa mempelajarinya pada source code yang telah saya sediakan diakhir tutorial ini.


 

3. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

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

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_news/';

Terakhir buka application/config/database.php

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

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_news',
	'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
);

 

4. Buat model dengan nama M_berita.php dengan coding sebagai berikut:

<?php
class M_berita extends CI_Model{

	function simpan_berita($jdl,$berita,$gambar){
		$hsl=$this->db->query("INSERT INTO tbl_berita (berita_judul,berita_isi,berita_image) VALUES ('$jdl','$berita','$gambar')");
		return $hsl;
	}

	function get_berita_by_kode($kode){
		$hsl=$this->db->query("SELECT * FROM tbl_berita WHERE berita_id='$kode'");
		return $hsl;
	}

	function get_all_berita(){
		$hsl=$this->db->query("SELECT * FROM tbl_berita ORDER BY berita_id DESC");
		return $hsl;
	}
}

 

5. Buat controller dengan nama Post_berita.php dengan kode sebagai berikut:

<?php
class Post_berita extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->model('m_berita');
        $this->load->library('upload');
	}
	function index(){
		$this->load->view('v_post_news');
	}

	function simpan_post(){
		$config['upload_path'] = './assets/images/'; //path folder
	    $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
	    $config['encrypt_name'] = TRUE; //nama yang terupload nantinya

	    $this->upload->initialize($config);
	    if(!empty($_FILES['filefoto']['name'])){
	        if ($this->upload->do_upload('filefoto')){
	        	$gbr = $this->upload->data();
	            //Compress Image
	            $config['image_library']='gd2';
	            $config['source_image']='./assets/images/'.$gbr['file_name'];
	            $config['create_thumb']= FALSE;
	            $config['maintain_ratio']= FALSE;
	            $config['quality']= '60%';
	            $config['width']= 710;
	            $config['height']= 420;
	            $config['new_image']= './assets/images/'.$gbr['file_name'];
	            $this->load->library('image_lib', $config);
	            $this->image_lib->resize();

	            $gambar=$gbr['file_name'];
                $jdl=$this->input->post('judul');
                $berita=$this->input->post('berita');

				$this->m_berita->simpan_berita($jdl,$berita,$gambar);
				redirect('post_berita/lists');
		}else{
			redirect('post_berita');
	    }
	                 
	    }else{
			redirect('post_berita');
		}
				
	}

	function lists(){
		$x['data']=$this->m_berita->get_all_berita();
		$this->load->view('v_post_list',$x);
	}

	function view(){
		$kode=$this->uri->segment(3);
		$x['data']=$this->m_berita->get_berita_by_kode($kode);
		$this->load->view('v_post_view',$x);
	}

}

 

6. Buat buah 3 view. Buat view yang pertama dengan nama v_post_news.php dengan kode  berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Post Berita</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<div class="col-md-8 col-md-offset-2">
			<h2>Portal Berita</h2><hr/>
			<form action="<?php echo base_url().'index.php/post_berita/simpan_post'?>" method="post" enctype="multipart/form-data">
	            <input type="text" name="judul" class="form-control" placeholder="Judul berita" required/><br/>
	            <textarea id="ckeditor" name="berita" class="form-control" required></textarea><br/>
	            <input type="file" name="filefoto" required><br>
	            <button class="btn btn-primary btn-lg" type="submit">Post Berita</button>
            </form>
		</div>
		
	</div>
	
	<script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
	<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
	<script src="<?php echo base_url().'assets/ckeditor/ckeditor.js'?>"></script>
	<script type="text/javascript">
	  $(function () {
	    CKEDITOR.replace('ckeditor');
	  });
	</script>
</body>
</html>

 

7. Buat view kedua dengan nama v_post_lists.php. view ini berfungsi untuk menampilkan berita dalam list. Adapun kode dari view ini adalah sebagai  berikut:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<?php
			function limit_words($string, $word_limit){
                $words = explode(" ",$string);
                return implode(" ",array_splice($words,0,$word_limit));
            }
			foreach ($data->result_array() as $i) :
				$id=$i['berita_id'];
				$judul=$i['berita_judul'];
				$image=$i['berita_image'];
				$isi=$i['berita_isi'];
		?>
		<div class="col-md-8 col-md-offset-2">
			<h2><?php echo $judul;?></h2><hr/>
			<img src="<?php echo base_url().'assets/images/'.$image;?>">
			<?php echo limit_words($isi,30);?><a href="<?php echo base_url().'index.php/post_berita/view/'.$id;?>"> Selengkapnya ></a>
		</div>
		<?php endforeach;?>
	</div>

	<script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
	<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

 

8. Buat view ketiga dengan nama v_post_view.php. view ini berfungsi untuk menampilkan detail berita. Adapun kode dari view ini adalah sebagai  berikut:

<?php 
	$b=$data->row_array();
?>
<!DOCTYPE html>
<html>
<head>
	<title><?php echo $b['berita_judul'];?></title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<div class="col-md-8 col-md-offset-2">
			<h2><?php echo $b['berita_judul'];?></h2><hr/>
			<img src="<?php echo base_url().'assets/images/'.$b['berita_image'];?>">
			<?php echo $b['berita_isi'];?>
		</div>
		
	</div>

	<script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
	<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

 

9. Jalankan project dengan mengunjungi URL berikut:

http://localhost/ci_news/index.php/post_berita 

Silahkan post satu berita, jika tidak ada error, berarti berhasil. Cek image yang diupload di folder assest/images.


Sekian tutorial tentang membuat portal berita dengan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!

Download Source

Share:



Komentar (22)

Imam Andre Perdana, 06 November 2017 13:38 - Reply

GGWP gan, terimakasih banyak tutorialnya

M Fikri, 08 January 2018 21:57 - Reply

Sama-sama gan!

Atak Kenzha, 08 January 2018 19:50 - Reply

Penjelasan no 3 buka aplikasi yg dimaksud, aplikasi apa om?

M Fikri, 08 January 2018 21:58 - Reply

Masudnya buka folder Application pada project.

Atak Kenzha, 15 January 2018 19:47 - Reply

Om, terikamasih jadi mengerti... kalau mau menambahkan header dan footeratau mempercantik tampilan gimana? semoga bermanfaat bagi yg lain artikelnya om.

M Fikri, 15 January 2018 20:53 - Reply

Terima kasih om, atas responnya!

Mesin Antrian C2000, 02 February 2018 12:45 - Reply

Terimakasih atas informasinya dan semoga kedepannya makin sukses dan jaya selalu

M Fikri, 09 February 2018 21:24 - Reply

Terima kasih gan atas doanya.

farabi, 08 February 2018 14:11 - Reply

terimakasih tutorialnya .. sangat bermanfaat untuk saya pelajar SMK yg sedang menjalani PKL

M Fikri, 09 February 2018 21:25 - Reply

Sama-sama gan.

duyeh, 18 February 2018 20:29 - Reply

ada tutorial youtube gak gan?

M Fikri, 20 February 2018 08:10 - Reply

Belum gan! hehehe

Dwi Ryan Gustavia, 19 February 2018 22:26 - Reply

kok gak nampil ketika di klik index.php. jadi percuma donk bikin database klo cuma yang muncul codelgeniter

M Fikri, 20 February 2018 08:15 - Reply

Itu hanya tutorial, sengaja dibuat seperti itu agar tau bagaimana memanggil controller melalui URL.
Jika sudah merasa bisa dan agar ingin tampil di index.php-nya.
tinggal di ganti di config/routes.php (ganti welcome menjadi post_berita)

Mansel, 06 April 2018 12:39 - Reply

terimakasih banyak tutorialnya! :)

MISBAH, 29 May 2018 13:30 - Reply

terimakasih mas informasinya, sangat bermanfaat!

Rizky, 05 June 2018 18:51 - Reply

Terimakasih untuk tutorialnya gan, btw ini cmn bisa nginput satu kali berita ya?

zarabrady, 14 June 2018 03:54 - Reply

terimakasih banyak tutorialnya! :)

Rangga, 05 July 2018 20:39 - Reply

Cara ngasih templatenya gimana mas

andesit, 08 August 2018 13:41 - Reply

bos kenapa g bisa dibuka ya webnya

M Fikri, 11 August 2018 04:58 - Reply

Cara bukanya pake URL ini gan:
http://localhost/ci_news/index.php/post_berita

andesit, 08 August 2018 13:43 - Reply

bos tidak mau dibuka cuma tampil Welcome to CodeIgniter! The page you are looking at is being generated dynamically by CodeIgniter. If you would like to edit this page you'll find it located at: application/views/welcome_message.php The corresponding controller for this page is found at: application/controllers/Welcome.php If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.

Leave a Comment