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

  • rhio 13/10/2009 at 11:59 pm

    if (!defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

    script diatas untuk apa ya??
    itu tuk link yang salah apa y??

    makasih……..

  • anggie 19/10/2009 at 3:08 pm

    Begini, itu bertujuan untuk menghindari user yang mencoba membuka file lewat URL secara langsung. Nah, variabel konstan ‘BASEPATH’ itu dideklarasikan di index.php (di root CI). Jadi, user yang akan membuka file .php secara langsung tidak diperbolehkan.

  • mivtech 20/10/2009 at 10:02 am

    Ok lanjut ke tutorial berikutnya,
    Terima Kasih mas Anggi, semoga saya bisa mempelajari sampai tuntas juga,,,,
    Sampai saat ini sungguh membantu, khususnya untuk saya yang benar-benar pemula,,
    hehe ^_^

  • anggie 20/10/2009 at 10:33 am

    oke, sama-sama…selamat belajar…

  • Chapcay 10/11/2009 at 8:17 pm

    Wah nyari yang inggris ampe mumet baca na, eh ada yg indonya Alhamdulillah. Makasih banyak mas penjelasannya keyen abis aku lgsng ngerti.

  • anggie 11/11/2009 at 7:08 pm

    Sama-sama…

  • luthfi 25/11/2009 at 8:00 pm

    nyasar ke sini jadi langsung pengen belajar CI.
    saia lagi belajar nih kang, saia nyoba tuts dari akang. (masih seri episode)

    kenapa yah waktu saia coba $this->load->view(‘main’,$data);
    trus di main.php saia mw cetak isi $data, ehh error.
    katanya Undefined variable: data.

    itu gmana yah?? soalnya stuk disitu , untuk ngelanjutin tuts membuat web dengan CI #1 kayana saia harus bisa parsing $data di controler ke view terlebih dahulu

    mas OL ym dong :D, biar bisa chating sambil belajar

    thnks

  • anggie 25/11/2009 at 8:26 pm

    Prinsipnya begini mas,
    Sebelum Anda bisa melakukan $this->load->view(’main’,$data), Anda harus mendefinisikan terlebih dahulu variabel $data, yang dalam kasus tutorial ini berupa array berisi informasi untuk ditampilkan di view. Misalkan di view ‘main.php’ ada variabel $title, maka perlu kita tuliskan

    $data['title']="Welcome to My Website";
// baru kemudian
$this->load->view(’main’,$data);

    Kira2 seperti itu…dicoba dulu ya…

  • soapinto 07/01/2010 at 10:35 am

    wow… keren nih… share terus mas…

  • kukuh 22/01/2010 at 7:26 pm

    Hahaha makasih mas, dah nemu tutorial Indonesia :D

  • doel 26/01/2010 at 1:04 am

    An Error Was Encountered

    Unable to load the requested file: main.php

    gan dapet error gini kenapa ya….semua tutorial dah dikuti dengan seksama

  • anggie 01/02/2010 at 4:38 pm

    Sudahkah Anda buat file main.php di folder views?

  • bandi 17/03/2010 at 5:36 pm

    dari kmren males bljr PHP…gara2 knl CI..jdi cinta ma php+ ada tutorial bhs indonesia nya…jdi smngat bljr …mas web nya saia ctrl+d dlux… keep share mas yo….

  • anggie 24/03/2010 at 12:36 pm

    Thanks dah berkunjung. Good Luck!

  • tika 15/04/2010 at 2:49 am

    mas..newbie ni..
    tadi nyoba tutorialnya..
    pke css bwt templatenya..
    berhasil c nampilin informasinya, tapi kok css-nya ndak nampil yak..

    css saya simpan di folder belajar/style/
    sedangkan gambar saya simpan di folder belajar/images
    asumsinya, belajar adalah folder root di webserver

    trus di headernya, path utk css juga udah saya ganti link-nya:

    di file css-nya, atribut yg mengarah ke image juga dah saya ganti,
    misal untuk background :
    background: url(../images/img02.jpg) repeat-x left top;

    trus..kira2 css-nya g keluar gara2 apa y mas..
    makasii sebelumnya..

  • tika 15/04/2010 at 2:51 am

    lhah..kok ilang link headernya…
    ni mas link headernya..dah saya ganti jadi kek gini:

  • tika 15/04/2010 at 2:52 am

    doh..*tepok jidat*

    link href=”../style/style.css” rel=”stylesheet” type=”text/css” media=”screen” />

  • tika 15/04/2010 at 3:51 am

    mas..
    image ma css nya bisa tampil..
    tapi apa yg saya lakukan itu adalah cara yg tepat? standar? cara pada umumnya?

    jadi di path header yg merujuk file css, saya tambahkan ini:

    sehingga penulisannya menjadi sbb:
    link href=”style/style.css” rel=”stylesheet” type=”text/css” media=”screen” />

    trus gambar baru bisa muncul ketika gambar saya masukkan ke folder style..saya masukkan ke folder images (asumsi: folder images berada di dalam folder style), g mw keluar..

    ada saran lain ndak mas?

  • anggie 15/04/2010 at 9:40 am

    Emm…

    Begini, biasanya, saya gunakan URL lengkap untuk referensi CSS sebelum tag HEAD. Misalnya begini, (dengan struktur file pada tanggapan Anda pertama kali)

    <link rel="stylesheet" type="text/css" href="http://localhost/belajar/style/style.css"  />

    Untuk prop background url di css seperti yang Anda pakai sudah benar, url :’../images/blablabla.jpg’.

    Itu biasa saya pakai dan berjalan mulus. Silakan dicoba.

  • tika 16/04/2010 at 2:09 am

    berhasil mas..
    makasii ya.. ^^

  • anggie 16/04/2010 at 7:46 am

    Yupz!! sama-sama…

  • el Seven 07/07/2010 at 9:00 am

    Assalamu’alaikum wr.wb….
    ___–___—
    Wow.. ni yg lg sy cari2 mas Anggie “Tutorial Codeigniter” bhs Indonesia (maklum.. kgk mahir bhs *inggirls, jd cari yg indo.. hehehehe.)
    Mkasih banget bwt tutorialnya ini mas… sngat2 mmbantu buwt pemula kyk q nie..
    Lo Boleh ni q posting ulang bwt isi blog q mas… soale masih kosong blonk.. blongk gtu… bingung mo isi apa. ..
    Semua tutorial n contoh dr mas dah q dunlod smua…
    Skali lg sukron bin maturnuwon bin thanks much bin trims… dah bhs lain2 lah…
    Mantaaap dach.. dtggu tutorial berikutnya yg lebih ampuuuuh…

    ___–___—
    wAssalamu’alaikum wr.wb….

  • anggie 12/07/2010 at 3:41 pm

    Wa’alaikumsalaam…

    Thx dah berkunjung ^^

  • Edi Suryadi 18/07/2010 at 6:10 pm

    Tutorial yang bagus untuk pemula seperti saya..
    Ijin nge-bookmark ya bro…^_^

  • anggie 23/07/2010 at 4:58 pm

    Iya…thx udah berkunjung…

  • sky 09/08/2010 at 10:43 am

    numpang naya nie,kalau di CI mau edit 3 images dengan nama yang ada bagaimana nya?
    thaxs

  • faiz al-qurni 14/10/2010 at 11:54 am

    kurang jelas pas bagian pemecahan template..
    mohon diperjelas lagi mas

  • anggie 17/10/2010 at 2:24 am

    mas faiz, sepertinya saya sudah rinci itu? Template sudah saya beri garis batas, header, content, dan footer. Pecah saja jadi 3 bagian.

  • Fandi Akhmad 26/10/2010 at 3:47 pm

    Mas, anggi..saya mencoba memanggil dengan
    kok gak muncul yah nilainya.. :(

    ini controller saya :

    name = 'Fandi';
    $this->color = 'yellow';

    }

    function world(){
    $data['name'] = $this->name;
    $data['color']= $this->color;

    //fungsi ini digunakan untuk meload view
    //$data = define variabel sent to views
    $this->load->view('world_view',$data);
    }
    }
    ?>

    Mohon bantuannya :(

  • Fandi Akhmad 26/10/2010 at 3:48 pm

    Mas, anggi..saya mencoba memanggil dengan

    kok gak muncul yah nilainya.. :(

    ini controller saya :

    name = 'Fandi';
    $this->color = 'yellow';
    }
    function world(){
    $data['name'] = $this->name;
    $data['color']= $this->color;
    //fungsi ini digunakan untuk meload view
    //$data = define variabel sent to views
    $this->load->view('world_view',$data);
    }
    }
    ?>

    Mohon bantuannya :(

  • anggie 26/10/2010 at 9:32 pm

    file world_view.php seperti apa coba mas?

  • nafri 14/11/2010 at 9:53 am

    Bagus sekali, lugas jelas mendetail, bila berkenan punya versi untuk oracle ga? Thanks.

  • anggie 16/11/2010 at 1:15 pm

    waduh mas,,, maaf saya ga punya itu? cari di google banyak mas…soalnya saya jg blm pernah nyoba oracle mas…

  • Membuat Website dengan CodeIgniter #1 | Blog My Goro 10/01/2011 at 1:23 am

    [...] : http://blog.putraweb.net/2009/09/27/membuat-website-dengan-codeigniter-1/ Category: codeingiter You can follow any responses to this entry through the RSS 2.0 feed. [...]

  • ronfeel 05/03/2011 at 10:46 am

    mas controllernya ko ga bisa dipanggil yah.. “404 page not found”

    padahal :
    - di route.php nya udah bener
    - file mycontroller.php udah dimasukin di folder controller
    - padahal pas coba pakai controller welcome.php buat manggil main.php bisa
    - saya udah cek nama controller di route, nama file controller yg saya buat.

    untuk info saya pakai ci 1.72

    makasih mas

  • anggie 05/03/2011 at 12:31 pm

    klo blm bisa berarti masih salah…klo dari keterangan Anda, cek lagi route.php, dan jangan lupa…nama controller harus sama (dan berawal huruf besar) dengan nama file controller itu. Klo beda bisa not found

  • ronfeel 05/03/2011 at 1:42 pm

    oo.. gtu ya mas.. nanti saya cek lagi mas..
    o iya mo nanya mas.. dalam tutorial di website ini pakai CI berapa.. biar saya samakan aja.. biar meminimalisir eror..

    makasih mas

  • anggie 05/03/2011 at 6:06 pm

    @ronfeel : klo yang seri ini, asal CI < 2.0 mah smua bisa mas…tidak masalah…dulu sih saya pake CI 1.7.1 keknya

  • ion 12/03/2011 at 2:14 pm

    mas tutorial export data dari file *.csv ke Mysql dengan codeigniter lah,

  • khatulistiwa 14/03/2011 at 3:41 pm

    Belajar code igniter ( ci ) memang sangat membantu untuk membuat aplikasi website. tutorial nya sangat membantu nie.. Terima Kasih :)

  • anggie 14/03/2011 at 8:26 pm

    @ion : di google banyak mas…cari dengan key ‘import csv mysql php’, ingat, CI jg php.
    http://www.chipmunk-scripts.com/board/index.php?forumID=43&ID=9602

    @khatulistiwa : sama” makasih…

  • antho 15/03/2011 at 3:05 pm

    mas anggi mau tanya lagi ya .
    ini code yg saya buat :
    load->view(‘main’,$data); //
    }
    }
    ?>

    nah pas di load tampil error seperti ini
    Fatal error: Class ‘Controller’ not found in C:\wamp\www\khp\application\controllers\home.php on line 3

    mohon penjelasannya mas :)

  • anggie 15/03/2011 at 7:26 pm

    Baris ke tiga dari home.php tulisannya apa mas?

  • anggit 25/04/2011 at 10:39 am

    salam kenal mas, saya asli tambak (banyumas) heheh dekatlah dengan kebumen (gombong)….sekarang dimisili di Cilacap dan Salatiga…
    mas….saya ingin mendalami Ci, tapi kpok kelihatannya rumit banget ya….
    pengalaman bahasa program saya minus
    mysl juga minus…
    saya cuman pernah buat virtue mart untuk joomla 1.5 dan sukses di localhost aja hehe
    mohon pencerahannya…

  • anggie 25/04/2011 at 9:07 pm

    @anggit : saya sarankan belajar dari HTML mas..
    - learn HTML, barengi dengan CSS
    ni akan mulai asik klo udah sm CSS…coba aja ^^

    - klo HTML udah bisa, coba ke PHP. Jangan baca buku PHP komplit, saya sarankan belajar step by step, sambil jalan akan menemukan masalah” yg akan memperkaya pengetahuan dg sendirinya, dan tentunya akan lebih melekat di ingatan daripada membantai satu buku tanpa studi kasus.

    - belajar bagaimana mySQL/database lain dalam berinteraksi dg PHP. Pelajari bagaimana PHP dapat menyimpan, mengedit, dan menampilkan data yg hanya berupa tabel” di database menjadi tampilan yang enak dilihat (web posting, forum, grafik, ataupun tabel)

  • topjer 18/07/2011 at 5:46 pm

    sipppp kang,, sukses tutor prtma!! landjut yg kedua wuzzzzzz……

  • tommo 21/07/2011 at 4:49 pm

    load->view(‘main’,$data); // load main.php (kita buat nanti) dengan beban data
    }
    }

    mas ini d truh ny dmn y mas

  • pabx panasonic 22/08/2011 at 3:26 pm

    keren mas tutorialnya.. thanks :-)

  • aniki 23/08/2011 at 12:01 pm

    Assalamualaikum.. mas anggi, saya sangat terbantu dengan adanya site tutorial ini…
    sebelumnya saya ngucapin terimakasih banyak buat mas anggi.
    salam kenal mas anggi…

    Mohon penjelasan tentang konfigurasi ini mas..
    $autoload['helper'] = array(‘url’); coz konfigurasi defaultnya juga bisa jalan … tanpa menambahkan ‘url’ ??

  • Sonny 12/09/2011 at 10:39 am

    Bos, mau tanya untuk pembuatan controller utama dengan code :

    load->view(‘main’,$data); // load main.php (kita buat nanti) dengan beban data
    }
    }

    yang ada pada membuat website dengan codeignitier#1

    Code itu diletakkan dimana dan disave dengan nama apa? saya cukup mengalami kesulitan di hal itu.. mohon dibantu, untuk pengerjaan proyek kuliah..
    Need Reply a.s.a.p. THX before

Newer Comments »

Leave a comment