Tutorial Dasar Membangun Website dengan CodeIgniter « Joy Sastra Wijaya

Tutorial Dasar Membangun Website dengan CodeIgniter Joy Sastra Wijaya http://joysastrawijaya.wordpress.com/2008/06/09/tutorial-dasar-memba...
Joy Sastra Wijaya

JUST MY LOVELY VIRTUAL WORLD
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 le 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 le 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 lenya 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 le-le seperti pada gambar. (h p://joysastrawijaya.les.wordpress.com/2008/06/ci1.jpg) Pembangunan simple website dalam tutorial ini anda akan difokuskan untuk mengedit di bagian folder application beserta sub folder di dalamnya. Kecuali le CSS-nya saya taruh di root directory, andapun bisa menaruhnya di folder manapun asalkan telah dikongurasi dan dapat menentukan alamat lenya. Di dalam folder views anda bisa menaruh le-le yang berhubungan dengan tampilan website anda. Folder cong berisi tentang kongurasi base_url (root folder website anda) dan anda bisa menambahkan congurasi lainnya disini, seperti $cong[css] = style.css; yaitu kita menentukan nama CSS yang akan kita pakai. Terdapat juga se ingan untuk database website dengan nama database.php. Anda bisa mengedit kongurasi koneksi ke database anda dengan mudah dan cepat. Isinya seperti ini: Di dalam folder controller, anda akan menaruh le utama yang akan mengakses view, model dan library. The tutor: 1. Kongurasi le cong.php yang terdapat di folder cong. 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";
1 of 10
9/19/2012 4:19 PM
Cek di folder controllers, disana ada le bernama welcome.php. Secara default, ketika kita mengakses h p://localhost /moodeesign/ (h p://localhost/moodeesign/) kita akan diarahkan ke le welcome.php Selanjutnya ganti script diatas menjadi $route['default_controller'] = "site"; 3. Karena kita mengubah script pada default controller, jadi harus dibuat le php di dalam folder controllers dengan nama site.php yaa Untuk welcome.php bisa anda hapus karena tidak diperlukan. 4. Mari kita buat le .php di folder views yang lumayan banyak. Beri nama dan extension lenya 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 le 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 le 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, le head_view.php isinya:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition <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">  <div id="rightheader"> </div> 
2 of 10
9/19/2012 4:19 PM
<div id="topheader"> <h1 id="title"> <a href="#"></a> </h1> </div>  <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>  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>  Nah yang spesial nih, hanya di content_contact_view.php, isinya adalah: <div id="content"> <p id="whereami"> <?php echo anchor($base,'MooDeeSign'); ?> >
3 of 10
9/19/2012 4:19 PM
<?php echo anchor('site/contact','Contact'); ?> </p>  <? 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>  Males ngetik? Uda copy-paste aja. Sebenarnya semua tadi diatas itu adalah le satu-kesatuan namun dibagi menjadi beberapa bagian yang terpisah. Selanjutnya akan dipanggil kembali menjadi satu oleh masing main view (home_view.php). 8. Untuk le css-nya silahkan download style.css (h p://joysastrawijaya.les.wordpress.com/2008/06/css.doc) 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();
4 of 10
9/19/2012 4:19 PM
} 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); } }
5 of 10
9/19/2012 4:19 PM
?> Kenapa function yang pertama bukan home? Kan nama lenya home_view.php? Guwe buat begini biar pas kita akses h p://localhost/moodeesign/ (h p://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 h p://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'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');
$data['webtitle']='Home'; return $data; } function about() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');
$data['webtitle']='About'; return $data; } function gallery() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');
$data['webtitle']='Gallery'; return $data; } function links() { $data['base'] = $this->config->item('base_url');
6 of 10
9/19/2012 4:19 PM
$data['css']
= $this->config->item('css');
$data['webtitle']='Links'; return $data; } function contact() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');
$data['webtitle']='Contact'; $data['front'] $data['fronts'] $data['name'] $data['email'] $data['website'] $data['messages'] $data['forminput'] $data['fname'] 'size'=>30 ); $data['femail'] 'size'=>30 ); $data['fwebsite'] = array('name'=>'website', 'size'=>30 ); $data['fmessages'] 'rows'=>5, 'cols'=>30 ); return $data; } function entry_insert(){ $this->load->database(); = array('name'=>'messages', = array('name'=>'email', = ''; = array ('Mr.'=>'Mr.','Mrs.'=>'Mrs.','Miss.'=>'Miss.'); = 'Name'; = 'Email'; = 'Website'; = 'Messages'; = 'Send your message here'; = array('name'=>'name',
7 of 10
9/19/2012 4:19 PM
$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 congurasi seperti berikut: (h p://joysastrawijaya.les.wordpress.com/2008/06/ci3.jpg) (h p://joysastrawijaya.les.wordpress.com/2008/06/ci3.jpg) Kongurasi le database.php disesuaikan dengan user dan nama databasenya yang telah dibuat. Kalo menamai database dengan yang lain boleh-boleh aja, dan di cek sendiri kongurasinya. Inget juga eld 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:
(h p://joysastrawijaya.les.wordpress.com/2008/06/ci4.jpg) (h p://joysastrawijaya.les.wordpress.com/2008/06/ci5.jpg) This entry was posted on Monday, June 9th, 2008 at 4:49 pm and is led under Code Igniter. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
8 of 10
9/19/2012 4:19 PM
15 Responses to Tutorial Dasar Membangun Website dengan CodeIgniter

1. jo says: June 10, 2008 at 4:58 pm keren joe, peh sajan ne rocker juga programmer:)) programmer juga manusia ajin2 nae timpale pang patuh duegne! jeg didian dueg.. Reply 2. Joy Sastra Wijaya says: June 12, 2008 at 8:24 am Hahaha cang mare melajah masi boss, nah jeg berkunjung doen mai, ne tawang2 pasti tak bagi gitu loh. Ci kayakne masuk di sekolah komputer buin ow? dije To? Ci lebih proesional pastinya, kalo cang kanggoang melajah didian doen. Reply 3. gembong says: June 13, 2008 at 4:15 pm wah baru tahu kalu ada codelgniter.. thanks juga sudah berkunjung ke blogku Reply 4. Joy Sastra Wijaya says: June 14, 2008 at 1:37 pm sama-sama BONG, thanks juga uda balik berkunjung kesini Reply 5. pemula says: August 25, 2008 at 5:39 am bagus mas.. dan to the point gak banyak teori.. sip trima kasih Reply 6. HASYIM says: November 21, 2008 at 1:08 pm MAKASIH MAS LO EMANG BENER2 JAGO TANKS KALO ADA KELUHAN LO NANYA AJA GRATIS KOK Reply 7. fansuri says: June 23, 2009 at 8:40 pm Thx berat dh bagi2 nh lam kenal nh Oh iya.. btw kok ga skalian dimasukin yg footer_view.php nya..?? jd error gt thx.. Reply 8. fansuri says: June 23, 2009 at 9:19 pm oh iya sekalian kalo ganti image nya dengan punya kita gimana caranya..?? thxx Reply 9. Arif says: March 12, 2010 at 4:25 am Mas, minta le gambarnya yang lengkap dong. Tolong kirim ke email saya ya. Thnks Reply 10. onedha says:
9 of 10
9/19/2012 4:19 PM
May 24, 2010 at 9:44 am mas kok da error An Error Was Encountered Unable to load the requested le: navigator_view.php thnks, sebelum y.. Reply 11. stwidyanas says: September 1, 2010 at 5:55 am bli idih dik ilmu e nah. . . . Reply 12. Semua Tentang CodeIgniter Asadullohil Ghalib says: September 30, 2010 at 9:09 am [...] Tapi karang aku nyoba buwat tutorial CI nech, mau baca? [...] Reply 13. Anes says: June 6, 2011 at 11:34 am Mas, saya baru nih di CI. saya bahkan nggak tau cara buka le helper. le herper saya nggak bisa dibuka. ada tutorial nya nggak? Reply 14. jay says: October 31, 2011 at 1:31 am Mohon maaf tulisannya kecil banget Reply 15. baryo says: July 10, 2012 at 3:56 pm Welcome to MooDeeSign Disini bisa diisi apa aja untuk nge-tes isi masing-masing content mau dikasih nama le apa? di polder apa? dan le css di tempatkan dimana? maaf new Reply
Theme: Contempt by Vault9. Blog at WordPress.com. Follow
Follow Joy Sastra Wijaya

Powered by WordPress.com
10 of 10
9/19/2012 4:19 PM

Bahasa

Selamat datang di Scribd!

Tutorial Dasar Membangun Website dengan CodeIgniter « Joy Sastra Wijaya

Diunggah oleh

Informasi Dokumen

Data diunggah

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

Tutorial Dasar Membangun Website dengan CodeIgniter « Joy Sastra Wijaya

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

Judul terkait

Tutorial Dasar Membangun Website dengan CodeIgniter Joy Sastra Wijaya http://joysastrawijaya.wordpress.com/2008/06/09/tutorial-dasar-memba...

Joy Sastra Wijaya

Tutorial Dasar Membangun Website dengan CodeIgniter

$data['webtitle']='Home'; return $data; } function about() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');

$data['webtitle']='About'; return $data; } function gallery() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');

$data['webtitle']='Gallery'; return $data; } function links() { $data['base'] = $this->config->item('base_url');

$data['webtitle']='Links'; return $data; } function contact() { $data['base'] $data['css'] = $this->config->item('base_url'); = $this->config->item('css');

15 Responses to Tutorial Dasar Membangun Website dengan CodeIgniter

Theme: Contempt by Vault9. Blog at WordPress.com. Follow

Follow Joy Sastra Wijaya

Dokumen Serupa dengan Tutorial Dasar Membangun Website dengan CodeIgniter « Joy Sastra Wijaya

Lainnya Dari Irham Ramadhan

Judul terkait

Beri Nilai

Bagikan