Membuat Website dengan CodeIgniter #1

Sep 27, 2009   //   by anggie   //   CodeIgniter, PHP  //  56 Comments

Setelah berpikir lama untuk mencari ide tulisan untuk web ini, akhirnya saya putuskan untuk menulis seri tutorial membuat website dengan codeigniter. Tutorial ini saya tujukan bagi pemula codeigniter yang mungkin kebingungan untuk merangkai formula CI untuk membuat sebuah web utuh. Memang CI mudah dipahami, tapi terkadang sulit untuk diaplikasikan secara menyeluruh, seperti yang saya alami dulu sewaktu pertama kali membuat web dengan CI. Saya berharap dengan dibuatnya tutorial ini, teman-teman yang kesulitan tidak menyerah di tengah jalan hanya karena kebingungan.
Sebelum saya mulai, ada beberapa requirement yang harus Anda kuasai agar dapat memahami tutorial ini, antara lain :

  1. Anda paham CodeIgniter Basic, paham logika penggunaannya secara dasar. Jika belum, silakan baca seri ‘Simple Tutorial CodeIgniter’ di web ini.
  2. Anda paham mysql beserta query nya.

Prepare for Localhost!

Persiapkan server localhost Anda (saya anggap Anda sudah paham caranya). Pindahkan folder CodeIgniter lengkap di root webserver Anda, silakan ganti nama folder sesuka Anda, Atur file confignya. Diantaranya yang perlu diatur adalah sbb:
config.php (system/application/config/)

$config['base_url'] = "http://localhost/namaWeb/"; //ganti dengan nama folder web Anda

database.php (system/application/config/)

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root"; //ganti dengan username db anda
$db['default']['password'] = ""; //ganti dengan password db anda
$db['default']['database'] = "namaDb"; // ganti dengan nama database yang anda gunakan untuk web anda (harus sudah ada, buat kosongan dulu)

autoload.php (system/application/config/)

$autoload['helper'] = array('url'); //diperlukan untuk fungsi base_url()

route.php (system/application/config/)

$route['default_controller'] = "web"; //controller default (akan kita buat nanti)

Persiapan Template

Hal berikutnya yang perlu kita siapkan adalah template (desain web). Anda dapat membuat template sendiri atau mencari free template di internet (contoh : styleshout.com). Setelah mendapatkan yang cocok, definisikan/tentukan pembagian area di template Anda (biasanya file utama bernama index.html) . Saya contohkan disini adalah header, content, dan footer.

<!-- header starts here -->
<html>
<head>
 <title><?= $title ?></title>
</head>
<body>
<!-- header ends here -->
<!-- content starts here -->
 <div id='content'>
  <?= $content ?>
 </div>
<!-- content ends here -->
<!-- footer starts here -->
 <div id='footer'>
  Website Footer
 </div>
</body>
</html>
<!-- footer ends here -->

Masing masing bagian dipisah menjadi satu file tersendiri dengan nama masing masing header.php, content.php, dan footer.php. File-file ini disimpan dalam folder views. Nantinya, file-file ini masih kita edit untuk keperluan lebih lanjut.

Membuat Controller Utama

Rencananya, controller utama ini kita gunakan untuk ditampilkan di halaman awal, yang secara default akan diload (pada route.php) jika ada orang yang membuka alamat web kita.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Web extends Controller {
 function Web()
 {
  parent::Controller();
 }
 function index()
 {
  $data['title']="Welcome to My Website"; // data  untuk variabel $title
  $data['content']="Ini halaman Content Awal";  // data  untuk variabel $content
  $this->load->view('main',$data);  // load main.php (kita buat nanti) dengan beban data
 }
}

Selanjutnya kita buat main.php (untuk tampilan halaman awal). File ini disimpan pada folder application/views/.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
$this->load->view('header');
$this->load->view('content');
$this->load->view('footer');

Variabel title dan content akan diparsingkan ke view main.php. Pada main.php, terdapat load view tiga kali, dimana header berisi variabel title, dan content berisi variabel content. Hmm…sampai disini dulu, oke? Anda dapat tes web anda dengan address : http://localhost/namaWeb.

Related posts:

  1. Membuat Website dengan CodeIgniter #2
  2. Membuat Website dengan CodeIgniter #3
  3. Membuat Website dengan CodeIgniter #4
  4. Membuat Breadcrumbs di CodeIgniter
  5. Redirect dengan Delay Time di CodeIgniter
Tags: ,

56 Comments

  • Bertho 02/11/2011 at 3:18 pm

    Mas, kalo saya bikin website dengan CI tapi templatenya HTML yg udah jadi bisa ga ya??
    Kan banyak tuh template HTML gratisan, nah langsung aja pake yg udah jadi templatenya….Gmana mas?

  • anggie 08/11/2011 at 3:09 pm

    @Bertho : Sangat bisa mas…liat aja bagian artikel di atas yg “persiapan template”. Pada umumnya, template CSS yang tersedia banyak di internet, itu memiliki struktur yang mirip dengan yang saya utarakan di sini.

  • Raden 15/11/2011 at 3:02 pm

    mas koq saya masih blum bisa yaah..
    ada tulisan page not found, padahal saya sudah set sedimikian sama dengan tutor diatas..

  • reeyz 27/12/2011 at 10:19 am

    iya mas munculnya not found gmn ?

    header.php,content.php, footer.php saya taruh di application/view
    control utama saya kasih nama index.php saya taruh di application/controllers
    kemudian main.php saya simpan di application/view

    mohon pencerahannya mas ??
    saya pake codeneigter 2.0

  • Anggie 27/12/2011 at 10:21 am

    Silakan kunjungi blog saya yang baru : anggytrisnawan.com

    Disini masih menggunakan CI < 2.0, tentu tidak kompatibel dengan CI 2.0

  • reeyz 27/12/2011 at 12:08 pm

    ok

« Older Comments

Leave a comment