Cara menggunakan website berita bootstrap

Web Portal berita ini dibuat dengan bahasa pemrograman php, dengan databasenya mysql, dan untuk desain interfacenya menggunakan bootstrap.

Adapun fitur-fitur yang terdapat dalam web portal berita ini yaitu:

• Menu atau Navbar, dan submenu(dropdown) yang dinamis langsung dari database(Tambah, Tampil, Edit, Hapus) ,
• Slide atau Carousel yang keren ,
• Post artikel yang dinamis (tambah, tampil, upload gambar, edit, hapus) yang dilengkapi sistem paging ,
• Sidebar recent post yang dinamis langsung dari database ,
• Sidebar kategori yang dinamis langsung dari database ,
• sidebar pencarian artikel yang dinamis ,
• Ada form komentar per artikel bagi pengunjung dinamis juga ,
• Ada form login untuk si admin ,
• Ada panel atau dashboard tempat si admin mengatur semua sistem ,
• Dan masih ada beberapa lagi fitur-fitur yang menarik lainnya . 

Untuk demo bisa lihat di video berikut ini:

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:

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

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>

Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula

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!

Mengapa bootstrap sering digunakan pada website?

Apa itu bootstrap dalam web?

Apa itu bootstrap 5?

Apa itu bootstrap 4?