Tutorial Dasar Membangun Website dengan CodeIgniter

Tutorial Dasar Membangun Website dengan CodeIgniter

Saya sendiri adalah orang yang baru sekali belajar komputer (apalagi internet, itu mah baru kemaren sore) dan sedikit suka mengulik cara pembuatan website. Belajarnya otodidak aja, ga dapet sekolahnya dan pembelajaran formal lainnya. Jadi disini saya mau share tentang hal itu bersama anda sekalian, hehehe. Kalo ada yang salah atawa anda lebih tahu mengenai CodeIgniter, atau mungki juga anda adalah seorang Web Developer yang canggih, mohon bantuannya untuk proses perkembangan pembelajaran saya di bidang ini.
Framework CodeIgniter memiliki kemampuan untuk mempermudah pembangunan website php kita. Menghemat waktu dan juga mampu menyusun struksur file php kita menjadi lebih rapi dan ter-ogranisir. Untuk tingkat kesalahan coding dan waktu untuk debugging aplikasi website kita juga sudah dapat diatasi dengan baik oleh framework ini. Ukuran file CodeIgniter sangat kecil dan sangat ringan dijalankan oleh server. Itu karena kehebatan coding dari pembuatnya, si Rick Ellis. Awalnya dia adalah seorang musisi rock (sedikit sama ama guwe ya?) terus beralih menjadi programmer.
Tetapi CodeIgniter juga bukan segalanya, kita tidak akan menemukan engine yang dapat menciptakan halamannya sendiri seperti pada Joomla. Disini kita diajarkan semi otomatik-lah, base-base pentingnya sudah disiapkan, tinggal menentukan bagaimana cara meramunya sendiri-sendiri tergantung selera (makanan kaleee…).
Oke kita mulai!!! Untuk tutorial simple yang hanya mengetes tulisan “Hello Word” sudah banyak dibuat oleh blogger lain, dan anda pun bisa menemukannya di help filenya sendiri (biasanya orang-orang males baca help, padahal disana uda ada semua). Disini saya akan membahas yang lebih advance-lah lagi dikit.
Di dalam CodeIgniter, anda akan menemukan file-file seperti pada gambar.

Pembangunan simple website dalam tutorial ini anda akan difokuskan untuk mengedit di bagian folder application beserta sub folder di dalamnya. Kecuali file CSS-nya saya taruh di root directory, andapun bisa menaruhnya di folder manapun asalkan telah dikonfigurasi dan dapat menentukan alamat filenya.
Di dalam folder views anda bisa menaruh file-file yang berhubungan dengan tampilan website anda.
Folder config berisi tentang konfigurasi base_url (root folder website anda) dan anda bisa menambahkan configurasi lainnya disini, seperti $config['css'] = ‘style.css’; yaitu kita menentukan nama CSS yang akan kita pakai. Terdapat juga settingan untuk database website dengan nama database.php. Anda bisa mengedit konfigurasi koneksi ke database anda dengan mudah dan cepat. Isinya seperti ini:
Di dalam folder controller, anda akan menaruh file utama yang akan mengakses view, model dan library.
The tutor:
1. Konfigurasi file config.php yang terdapat di folder config. Cari script berikut:

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

Disini saya menamakan foldernya moodeesign. Jadi scriptnya diubah menjadi,

$config[‘base_url'] = "http://localhost/moodeesign/"

2. Buka routes.php dan cari script berikut:

$route['default_controller'] = "welcome";

Cek di folder controllers, disana ada file bernama welcome.php. Secara default, ketika kita mengakses http://localhost/moodeesign/ kita akan diarahkan ke file welcome.php Selanjutnya ganti script diatas menjadi

$route['default_controller'] = "site";

3. Karena kita mengubah script pada default controller, jadi harus dibuat file php di dalam folder controllers dengan nama site.php yaa… Untuk welcome.php bisa anda hapus karena tidak diperlukan.
4. Mari kita buat file .php di folder views yang lumayan banyak. Beri nama dan extension filenya seperti pada gambar:

5. Isi script pada home_view.php:

<? $this->load->view('head_view'); ?>

<? $this->load->view('navigator_view'); ?>

<? $this->load->view('content_home_view'); ?>

<? $this->load->view('footer_view'); ?>

Untuk file about_view.php, gallery_view.php, links_view.php dan contact_view.php diisi sama seperti diatas tetapi pada baris ketiga disesuaikan dengan masing-masing nama. Contoh about_view pada baris ketiga menjadi

<? $this->load->view(‘content_about_view'); ?>

Sudahkah anda mengerti???? Kenapa buat banyak file ya? Ga kayak contoh2 lainnya? Btw inikan tutorial-tutorial guwe, ya mau-mau guwe donk ah….
6. Capek ah… istirahat dulu bentar nyok….
7. Lanjut, file head_view.php isinya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title><? echo $webtitle; ?></title>

<link rel="stylesheet" type="text/css" href="<?php echo "$base/$css"?>" />

</head>

Navigator_view.php:

<body>

<div id="wrap">

<div id="top_content">

<div id="header">

<!-- rightheader -->

<div id="rightheader">

</div>

<!-- topheader -->

<div id="topheader">

<h1 id="title">

<a href="#"></a>

</h1>

</div>

<!-- navigation -->

<div id="navigation">

<ul>

<li><?php echo anchor($base,'Home'); ?></li>

<li><?php echo anchor('site/about','About'); ?></li>

<li><?php echo anchor('site/gallery','Gallery'); ?></li>

<li><?php echo anchor('site/links','Links'); ?></li>

<li><?php echo anchor('site/contact','Contact'); ?></li>

</ul>

</div>

</div>

<!-- header ends here -->

Untuk content_home_view.php, content_about_view.php, content_gallery_view.php, content_links_view.php

<div id="content">

<p id="whereami">

<?php echo anchor($base,'MooDeeSign'); ?>

</p>

<h1> Welcome to MooDeeSign </h1>

Disini bisa diisi apa aja untuk nge-tes isi masing-masing content

</div>

</div>

<!-- here ends header + content ( topcontent ) -->

Nah yang spesial nih, hanya di content_contact_view.php, isinya adalah:

<div id="content">

<p id="whereami">

<?php echo anchor($base,'MooDeeSign'); ?> >

<?php echo anchor('site/contact','Contact'); ?>

</p>

<!-- and a form example -->

<? echo heading($forminput,3) ?>

<? echo form_open('site/contact'); ?>

<table cellpadding="0" cellspacing="0" border="0" class="form_table">

<tr><td align="right"><? echo $front ?></td><td><? echo form_dropdown('front',$fronts).br(); ?></td></tr>

<tr><td align="right"><? echo $name ?> :</td><td>

<? echo form_input($fname).br(); ?></td></tr>

<tr><td align="right"><? echo $email ?> :</td><td>

<? echo form_input($femail).br(); ?></td></tr>

<tr><td align="right"><? echo $website ?> :</td><td>

<? echo form_input($fwebsite).br(); ?> </td></tr>

<tr><td align="right"><? echo $messages ?> :</td><td>

<? echo form_textarea($fmessages).br(); ?></td></tr>

<tr><td> </td><td><? echo form_submit('mysubmit','Submit'); ?></td></tr>

</table>

<? echo form_close(); ?>

</div>

</div>

<!-- here ends header + content ( topcontent ) -->

Males ngetik? Uda copy-paste aja….
Sebenarnya semua tadi diatas itu adalah file satu-kesatuan namun dibagi menjadi beberapa bagian yang terpisah. Selanjutnya akan dipanggil kembali menjadi satu oleh masing main view (home_view.php).
8. Untuk file css-nya silahkan download style.css
Nantinya kalo ada yang error, itu pasti karena image-nya ga ada, hehehe
(tutorial yang aneh)
9. Untuk cotrollernya, site.php:

<?

class Site extends Controller{

function Site(){

parent::Controller();

}

function Index(){

$this->load->model('mood_model');

$data = $this->mood_model->home();

$this->load->view('home_view',$data);

}

function About() {

$this->load->model('mood_model');

$data = $this->mood_model->about();

$this->load->view('about_view',$data);

}

function Gallery() {

$this->load->model('mood_model');

$data = $this->mood_model->gallery();

$this->load->view('gallery_view',$data);

}

function Links() {

$this->load->model('mood_model');

$data = $this->mood_model->links();

$this->load->view('links_view',$data);

}

function Contact() {

$this->load->helper('form');

$this->load->helper('html');

$this->load->model('mood_model');

$data = $this->mood_model->contact();

if($this->input->post('mysubmit')){

$this->mood_model->entry_insert();

}

$this->load->view('contact_view',$data);

}

}

?>

Kenapa function yang pertama bukan home? Kan nama filenya home_view.php? Guwe buat begini biar pas kita akses http://localhost/moodeesign/ maka akan langsung mengarah ke home_view.php. File yang paling demen dibaca ama browser untuk defaultnya adalah index.php, ga tahu kenapa… Loh kok? Iya alnya guwe blajarnya otodidak gitu…… Asal tahu ye untuk mengakses function Contact, kalo di CI akan menjadi http://localhost/moodeesign/index.php/site/contact.
Melewati parent controller (site = site.php yang ada di folder controllers) dulu baru baca function contact-nya.
10. Untuk isi mood_model.php yang ada di folder models:

<?

class mood_model extends Model {

function mood_model() {

parent::Model();

$this->load->helper('url');

}

function home() {

$data['base']      = $this->config->item('base_url');

$data['css']        = $this->config->item('css');

$data['webtitle']='Home';

return $data;

}

function about() {

$data['base']      = $this->config->item('base_url');

$data['css']        = $this->config->item('css');

$data['webtitle']='About';

return $data;

}

function gallery() {

$data['base']      = $this->config->item('base_url');

$data['css']        = $this->config->item('css');

$data['webtitle']='Gallery';

return $data;

}

function links() {

$data['base']      = $this->config->item('base_url');

$data['css']        = $this->config->item('css');

$data['webtitle']='Links';

return $data;

}

function contact() {

$data['base']      = $this->config->item('base_url');

$data['css']        = $this->config->item('css');

$data['webtitle']='Contact';

$data['front']                   = '';

$data['fronts']     = array ('Mr.'=>'Mr.','Mrs.'=>'Mrs.','Miss.'=>'Miss.');

$data['name']                 = 'Name';

$data['email']                 = 'Email';

$data['website']    = 'Website';

$data['messages']   = 'Messages';

$data['forminput']  = 'Send your message here';

$data['fname']     = array('name'=>'name',

'size'=>30

);

$data['femail']    = array('name'=>'email',

'size'=>30

);

$data['fwebsite'] = array('name'=>'website',

'size'=>30

);

$data['fmessages']   = array('name'=>'messages',

'rows'=>5,

'cols'=>30

);

return $data;

}

function entry_insert(){

$this->load->database();

$data = array(

'front'=>$this->input->post('front'),

'name'=>$this->input->post('name'),

'email'=>$this->input->post('email'),

'website'=>$this->input->post('website'),

'messages'=>$this->input->post('messages'),

);

$this->db->insert('messages',$data);

}

}

?>

Inget buat database dengan configurasi seperti berikut:


Konfigurasi file database.php disesuaikan dengan user dan nama databasenya yang telah dibuat. Kalo menamai database dengan yang lain boleh-boleh aja, dan di cek sendiri konfigurasinya. Inget juga field Id itu auto_increment dan jadiin primary key yaaa… Guwe yakin kalian semua lebih pinter dari guwe si pemula ini.
Bincang-bincang

• Guwe : Udah jadi dan mau jalan kan?
• Loe : Loe kok ga dijelasin?
• Guwe : Cape deeee, yaa karena guwe anggap loe lebih ngerti script php-nya daripada guwe lah….Loe ulik sendiri dan kembangkan pasti nantinya jadi lebih bagus. Edit cssnya juga ya, buat bannernya dengan ukuran yang telah ditentukan, dan gambar lainnya boleh kok ga diisi, yang penting konsepnya loe tahu…

Untuk tampilan akhirnya jadi kayak gini:

Posted in: Code Igniter