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!
Sumber :http://mfikri.com/artikel/Membuat-portal-berita-sederhana-dengan-codeigniter-dan-bootstrap.html
das
BalasHapus