Tutorial Code Igniter Part 2 ini akan membahas tentang bagaimana membuat sebuah halaman website berdasarkan template yang telah Anda buat. Template website dasar telah disediakan dalam tutorial ini.
Sebelum memulai tutorial ini, pastikan Anda telah mengikuti dan mendownload file-file berikut ini:
- Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
- Mengunduh framework Code Igniter (versi 2.2.0) di https://ellislab.com/
- Mengunduh file: assets.zip di link ini: https://drive.google.com/file/d/0B5BhV6c89_2YRVhYUzVDaVVyc1k/edit?usp=sharing
- Hasil akhir tutorial bisa didownload di sini: https://drive.google.com/file/d/0B5BhV6c89_2YVHdiYm9Wa1BwQjA/edit?usp=sharing
Note: Code Editor yang digunakan dalam tutorial ini adalah Dreamweaver CS6, Anda bisa memakai code editor yang Anda sukai.
Langkah persiapan framework Code Igniter
Silakan download file framework Code Igniter 2.2.0 terlebih dahulu, kemudian ekstrak ke dalam folder webroot Anda. Dalam tutorial ini menggunakan aplikasi XAMPP sehingga webroot ada di folder htdocs. Folder webroot tutorial ini adalah tutorial_ci.
Persiapan folder assets
Pastikan Anda telah mengunduh file assets.zip. Lalu dalam folder tutorial_ci, buat folder baru dengan nama assets. Ektrak file assets.zip ke dalam folder assets tersebut.
Membuat folder di folder tutorial_ci/application/views
Selanjutnya adalah mempersiapkan folder-folder yang akan digunakan untuk menampung file template di folder assets untuk diintegrasikan dengan framework Code Igniter.
Berikut langkah-langkahnya:
- Buka folder tutorial_ci/application/views Anda
- Buat dua buah folder baru dalam folder views tersebut, yaitu folder layout dan home
Konfigurasi base_url dalam file config.php (Dalam folder tutorial_ci/application/config)
Langkah selanjutnya adalah konfigurasi base_url dari website yang sedang Anda bangun. Dalam contoh ini digunakan localhost, dalam aplikasi sesungguhnya, nanti diubah menjadi alamat website.
Dengan menggunakan code editor Anda (tutorial ini memakai Dreamweaver CS6):
- Buka file config.php yang ada dalam folder tutorial_ci/application/config
- Cari kode $config[‘base_url’] = ”;
- Dalam tanda petik satu tersebut ketik menjadi http://localhost/tutorial_ci/
- Sehingg menjadi $config[‘base_url’] = ‘http://localhost/tutorial_ci/’;
- Simpan kembali file config.php
Mengaktifkan helper url dalam file autoload (dalam folder tutorial_ci/application/config)
Langkah selanjutnya adalah mengaktifkan helper yang akan meng-handle url dalam CI.
- Buka file autoload.php yang ada dalam folder tutorial_ci/application/config
- Cari kode $autoload[‘helper’] = array();
- Dalam tanda petik satu tersebut kurung tersebut, tambahkan sehingga menjadi (‘url’)
- Sehingg menjadi $autoload[‘helper’] = array(‘url’);
- Simpan kembali file autoload.php
Membuat file footer.php, head.php, header.php, konten.php, dan wrapper.php
(dalam folder application/views/layout)
Langkah selanjutnya adalah membuat potongan-potongan kecil file PHP yang nantinya akan dipanggil sebagai halaman home dari website yang akan dibangun. Rancangan halaman home ini contoh desainnya seperti file index.html yang ada dalam folder assets.
Kelima file yang akan dibuat ini nanti adalah file-file yang akan menjadi template utama dari halaman home.
- Buka folder tutorial_ci/application/views/layout
- Buat lima (5) file PHP kosong di dalam folder layout tersebut, yaitu file head.php, header.php, konten.php, footer.php dan wrapper.php
Mulai membuat template halaman home
Langkah berikutnya adalah membuat template utama yang nantinya akan digunakan untuk menampilkan halaman home (halaman utama website).
File head.php
File ini berisi informasi awal kode HTML, mulai versi, CSS, title dll.
Berikut langkah-langkahnya:
- Buka file index.html yang ada dalam folder tutorial_ci/assets/
- Buka file head.php yang ada dalam folder tutorial_ci/application/views/layout/
- Dari file index.html, copy / salinlah kode baris ke-1 sampai baris ke-10 (mulai dari <!doctype html> sampai dengan <div id=”wrapper”>)
- Lalu Paste pada file head.php
- Pada baris ke-5, ubah title yang semula Tutorial Code Igniter – Java Web Media menjadi <?php echo $title ?>.
- Lalu pada kode href=”css/style.css” yang ada di baris ke-6, ubahlah menjadi “<?php echo base_url(); ?>assets/css/style.css”.
- Simpan kembali file head.php
File header.php
File header.php berisi tampilan bagian atas website, yaitu area header.
Langkah-langkahnya:
- Buka file header.php yang ada dalam folder tutorial_ci/application/views/layout
- Copy kode baris ke-12 sampai dengan baris ke-25 (<header> s/d </nav>) dari file index.html yang ada dalam folder tutorial_ci/assets/
- Paste kode tersebut di file pada file header.php
- Pada baris ke-1 dalam file header.php, ubah link yang awalnya adalah
<a href="index.php" menjadi <a href="<?php echo base_url(); ?>".
Lakukan juga pada link Home yang awalnya
<a href="#" menjadi <a href="<?php echo base_url(); ?>"
- Ubah kode
<img src="images/javawebmedia.png"
menjadi
<img src="<?php echo base_url(); ?>assets/images/javawebmedia.png"
- Ubah kode
<li><a href="#">Login</a></li>menjadi
<li><a href="<?php echo base_url(); ?>admin/login">Login</a></li>. - Ubah kode
<li><a href="#">Kontak</a></li>menjadi
<li><a href="<?php echo base_url(); ?>kontak">Kontak</a></li>. - Simpan file header.php
File footer.php
File footer.php adalah tampilan paling bawah dari halaman home.
Berikut langkah-langkahnya:
- Buka file footer.php yang ada dalam folder tutorial_ci/application/views/layout
- Copy kode baris ke-91 sampai dengan baris ke-94 dari file index.html yang ada dalam folder tutorial_ci/assets/
- Paste kode tersebut di file pada file footer.php
- Simpan file footer.php
File konten.php
File konten berfungsi untuk memanggil konten utama website.
Berikut langkah-langkahnya:
- Buka file konten.php yang ada dalam folder tutorial_ci/application/views/layout
- Tambahkan kode di bawah ini.
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');if($isi){$this->load->view($isi);
}
- Simpan file konten.php
File wrapper.php
File wrapper.php berfungsi untuk menyatukan seluruh halaman template dan halaman utama.
Berikut langkah-langkahnya:
- Buka file wrapper.php yang ada dalam folder tutorial_ci/application/views/layout
- Tambahkan kode di bawah ini.
<?php
require_once('head.php');require_once('header.php');require_once('konten.php');require_once('footer.php'); - Simpan file wrapper.php
Membua halaman utama index_home.php di folder application/views/home/
Langkah selanjutnya adalah membuat halaman utama yang akan ditampilkan di halaman home/index.
Berikut langkah-langkahnya:
- Buat file PHP kosong baru dengan nama index_home.php di folder tutorial_ci/application/views/home/
- Buka file index_home.php di folder tutorial_ci/application/views/home/ tersebut
- Copy code baris ke-27 sampai baris ke-90 yang ada di file index.html yang ada dalam folder tutorial_ci/assets/
- Paste kode tersebut ke file index_home.php
- Simpan file tersebut
Membuat Controller untuk menampilkan halaman utama website
Selanjutnya Anda harus membuat controller untuk mengelola tampilan mana yang akan ditampilkan.
Berikut langkah-langkahnya:
- Buka folder tutorial_ci/application/controller.
- Buat file PHP baru (kosong) di folder tersebut, lalu beri nama home.php
- Tambahkan kode di bawah ini:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');class Home extends CI_Controller { public function index() { $data=array('title'=>'Tutorial Code Igniter - Java Web Media', 'isi' =>'home/index_home' ); $this->load->view('layout/wrapper',$data); } } - Simpan file home.php
Melakukan pengetesan hasil
Anda telah membuat template dan controller, sekarang saatnya untuk mengetes hasil pekerjaan Anda. Caranya adalah dengan membuka browser, lalu masukkan alamat http://localhost/tutorial_ci/index.php/home.
Menampilkan gambar yang tidak tampil
Seperti terlihat pada gambar di atas, gambar banner utama website ternyata tidak tampil. Untuk menampilkannya, buka file index_home.php yang ada dalam folder tutorial_ci/application/home/. Lalu ubah kode berikut ini:
<img src="images/web-development.png" width="624" height="326">
Menjadi:
<img src="<?php echo base_url(); ?>assets/images/web-development.png" width="624" height="326">
Mengubah routing halaman
Secara default, Code Igniter akan menampilkan halaman welcome.php sebagai halaman home dan Anda tidak harus memasukkan alamat http://localhost/tutorial_ci/index.php/home, tetapi cukup dengan http://localhost/tutorial_ci.
Untuk melakukan perubahan hal tersebut sehingga halaman utama adalah yang telah kita buat, maka berikut langkah-langkahnya:
- Buka file routes.php dalam folder tutorial_ci/application/config
- Lakukan perubahan kode ini:$route[‘default_controller’] = “welcome”;menjadi$route[‘default_controller’] = “home”;.Ini artinya controller utama yang akan menghandle halaman utama adalah controller home.
- Simpan file routes.php
- Lakukan pengetesan dengan mengetikkan alamat http://localhost/tutorial_ci pada browser Anda.
Source kode akhir dari tutorial ini:
Note: Tutorial lebih advanced dapat Anda ikutia dengan mengikuti kursus di Java Web Media.
Link nya ada yang gak bisa di download . Terima Kasih
Link yang mana Mas?
kayanya ada variabel yang salah ini mas susunannya
keren. tips uat agan di atas jangan asal download ikuti saja tutorial nya :D, btw big thanks gan ?
pak, mau tanya, sy pemula belajar coba yg ditutotial tp pas dibuka link http://localhost/tutorial_ci/index.php/home hasilnya blank, kurangnya dimn ya pak
trimakasih
maaf sdh bisa pak, krng autoloadnya… tp cuma setelah dibuka susunannya ngurut ke bawah trus, ga pas posisinya
maaf sdh bisa normal part2.. makasih tutorialna
Alhamdulillah kalau sudah bisa…
selamat siang mastah, saya juga css nya blom muncul…. punya mastah gmna ya biar bisa muncul? makasih
Hehe…musti rajin ngecek
kalau tidak bisa perhatikan letak css dan js atau image nya ? dan perhatikan helper_url sudah aktifkan atau belum ? terus letak src nya gunakan
pak kalau ini kenapa apa penyebabnya?
Parse error: syntax error, unexpected ‘:’ in F:\xampp\htdocs\tutorial_ci\application\config\config.php on line 17
Pengetikan kode kurang teliti, perhatikan titik dan koma serta petik satu atau petik 2
sama ini kenapa?
Fatal error: Call to undefined function base_url() in F:\xampp\htdocs\tutorial_ci\application\views\layout\head.php on line 6
Silakan ikuti tutorialnya dengan urut. Settingan di config.php belum dibenerin tuh mas
gan ini
itu yanga action nya di ganti jadi apaan
Maaf,,Jika tampilannya turun ke bawah..dimana letak kesalahannya ya..??
padahal sudah mengikuti step2nya…
Thanks.
maaf mas kalau tampilan nya ke bawah itu knp ya ?
terimakasih tutorialnya, alhamdulillah lancar, semua step yang dipandu dapat saya lalui dengan berhasil
tutorialnya sangan membantu, tapi saya kesulitan untuk menggabungkanya dengan grocery crud
Terima kasih artikel ini sangat membatu…saya mau sedikit menanyakan link seperti nya tidak jalan tuh…
Pak, saya urutan menu nya ke bawah, dan loginnya tidak berada di sebelah kanan. itu kenapa ya pak ? terima kasih sebelumnya :)
maaf mas kog template saya gmbar dll gag mau keluar ya cuma tulisan aja itu gimana?
trimakasih
terima kasih gan,saya masih pemula tutorialnya bermanfaat banget buat saya.. sukses selalu gan
Trimakasih banyak gan tutornya,,. saya newbie yang gregetan pngen bisa CI, sangat terbantu dg tutorial ini, detail dan jelas,.
moga ilmu nya barokah dan di lipat” gandakan oleh Alloh , di bln puasa ini..
mas tampilan nya ko ga seperti yg dijelaskan ya, menurun kebawah dan gambar tidak tampil, langkah dr awal diatas smpe akhir sy ulang sampe 3x blom berhasil jg, mohon bimbingannya dimana letak salahnya trim’s
404 Page Not Found
The page you requested was not found.
_____||_____
selamat siang, maaf mengganggu aktifitasnya ya kak.
saya mengikuti tutorial yng sudh kakak buat ini, dan saya mencobanya di linux ubuntu. Dan permasalahannya adalah… ketik di tahap ke “Melakukan pengetesan hasil” yang muncul adalah seperti pesan error yang di atas.
Kalau boleh tau itu kenapa ya kak ?
bisa minta masukannya ?
terimakasih ya kak :)
Alhamdulillah tutorialnya sangat bermanfaat bagi saya. :D
gan~ file css nya kok gak kebaca yah? designnya jd semrawut.. itu knp?
gan~ file css nya kok gak kebaca yah? designnya jd semrawut.. itu knp?
jadi semangat lagi belajar codeigniter thanks om..ditunggu tutorial selanjutnya
css nya tidak bisa diload? tampilannya maalah kayak html biasa. mohon pencerahannya
tutorial nya komplit meski hanya dalam satu halaman , terima kasih banyak bro
ga bisa di download templatenya gan buat file 4shared please saya butuh banget
thanks gan.. bermanfaat sekali (y)
Artikel yg keren soal hosting dan toko online ini
sangat bermanfaat. Bagus banget dan penting sekali. Tiap orang yang
make ataupun lagi mencari layanan web hosting murah
di Indonesia & olshop harus baca tulisan ini. Silakan kunjungi juga situs ane ya
bro, ada ulasan keren yang semoga berguna buat siapa aja pencari service hosting.
Makasih.
Mas, saya udah ikutin tutornya ko malah kebawah ya trus saya download yang final malah eror di common.php line 257
sama , kira2 kenapa ya? bisakah dibantu? tolong emailkan jawabannya. Trims.
min file assets.zip gak bisa di download. mohon bantuannya min
Saya mau tanya kok css nya tidak mau keluar ya? hasil nya background nya kosong dengan penulisan saja.
saya juga cssnya ko ndak muncul ya…. tolong pencerahannya dong om
udah bisa deh om..hehe makasih om
http://localhost/belajar-CI/index.php/home
kenapa kok gabisa ya min??
tolong solusi
itu gimana gan kok punya ane kagak mau jalan css nya ya
Thanks ilmu yang bermanfaat,
kunjungi http://aplikasipemda.com/ untuk aplikasi pajak online
gan… kenapa selalu muncul error
A PHP Error was encountered
Severity: Notice
Message: Only variable references should be returned by reference
Filename: core/Common.php
Line Number: 257
A PHP Error was encountered
Severity: Notice
Message: Only variable references should be returned by reference
Filename: core/Common.php
Line Number: 257
Kenapa ada warning seperti ini ya? trus tampilan masih acak2an tdk seperti tampilan tutorial….
Langsung saja cek disini berita Berita Terupdate dan terlengkap
mohon info bung, di tutorial kedua sy coba login tapi tdk bisa. itu knapa ya. !!!
Gan mau tanya kalo ganti judul halaman dimana ya?