Akhirnya aku bisa update blog ini lagi, hehe… mungkin temen2 udah ga sabar untuk menanti tutorial2 komputer yang baru di blog ini, khususnya tutorial Codeigniter.

Untuk kali ini, Cheyuz akan membuat tutorial Codeigniter untuk membuat Multiple Input Form. Apa itu Multiple Input Form? Multiple Input Form adalah suatu bentuk form di mana kita akan menginputkan banyak data ke dalam database melalui form secara sekaligus. Jadi kita tidak menginputkan data satu persatu.

Jika kita memakai cara yang di atas, maka kita harus menginputkan mahasiswa satu persatu. Bayangkan gimana kalo kita ingin menginputkan 50 data? Tentu kita harus mengisi form sebanyak 50 kali bukan?

Coba lihat form berikut ini:

Coba Anda lihat, apa bedanya cara pertama dengan cara kedua? keliatan kan? Nah, jadi bedanya apabila kita memakai cara kedua, kita dapat menginput beberapa siswa sekaligus.

Di sini kita akan membuat 3 bagian modul, yaitu:

1. Form untuk mengisi berapa data yang akan dimasukkan
2. Form untuk pengisian form multiple
3. Daftar data yang telah dimasukkan

Pertama2 buat dulu database sebagai berikut:

CREATE TABLE IF NOT EXISTS mahasiswa (
  id int(5) NOT NULL AUTO_INCREMENT,
  `nim` varchar(20) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (id)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Jangan lupa cek koneksi ke database apakah sudah benar atau belum..
konfigurasi untuk koneksi database ada di /system/application/config/database.php.

Buatlah sebuah controller data_mahasiswa.php (atau Anda bisa melanjutkan tutorial dari Tutorial Dasar Part I untuk membuat controller data_mahasiswa.php dan melanjutkannya).

Di controller tersebut, tambahkan function untuk membuat tampilan multiple input form:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple() {
        $this->load->view('add_multiple');
    }
}
?>

Setelah kamu bikin controller di atas, kamu tinggal bikin ‘view’ untuk tampilan formnya, dengan cara membuat file add_multiple.php di folder /system/application/view
Isikan code HTML berikut di file tersebut:

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    Banyak mahasiswa yang ingin dimasukkan:
    <input name="banyak_data" size="3" /> orang<br />
    <input type="submit" value="Lanjut" />
</form>

Maka hasilnya seperti berikut:

Kemudian tambahkan code berikut untuk function add_multiple() file controller data_mahasiswa.php tadi, menjadi seperti berikut:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    //ADD MULTIPLE
    function add_multiple() {
        if($_POST==NULL) {
            $this->load->view('add_multiple');
        }else{
            redirect('data_mahasiswa/add_multiple_post/'.$_POST['banyak_data']);
        }
    }
}
?>

Maksud dari function di atas adalah meload view add_multiple.php yang berisi halaman input banyak data mahasiswa yang dimasukkan.. kemudian ketika disubmit (POST) maka akan di-redirect/alihkan ke function add_multiple_post() dengan parameter banyaknya data yg dimasukkan ($_POST['banyak_data']) yang akan kita buat nanti… yaitu halaman munculnya multiple form.

Tambahkan function berikut di bawah function add_multiple():

class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple_post($banyak_data=0) {
        $data['banyak_data'] = $banyak_data;
        $this->load->view('add_multiple_form',$data);
    }
}

Kemudian, buatlah tampilan multiple form input seperti gambar table di atas.
Berikut ini adalah kode HTML dari add_multiple_form.php, simpan di /system/application/views:

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    <table>
        <tr>
            <td>NIM</td>
            <td>Nama</td>
            <td>Alamat</td>
        </tr>
        <?php for($i=1;$i<=$banyak_data;$i++): ?>
        <tr>
            <td><input name="data[<?php echo $i ?>][nim]" /></td>
            <td><input name="data[<?php echo $i ?>][nama]" /></td>
            <td><input name="data[<?php echo $i ?>][alamat]" /></td>
        </tr>
        <?php endfor ?>
    </table>
    <input type="submit" value="simpan" />
</form>

http://localhost/webku/data_mahasiswa/add_multiple_post/3

http://localhost/webku/data_mahasiswa/add_multiple_post/5

Kemudian, tambahkan ‘if’ dan ‘foreach’ di function add_multiple_post tadi, fungsinya adalah untuk mengetahui apakah form udah disubmit atau belum… jadi kode PHP lengkapnya sbb:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple_post($banyak_data=0) {
        if($_POST==NULL) {
            $data['banyak_data'] = $banyak_data;
            $this->load->view('add_multiple_form',$data);
        }else {
            foreach($_POST['data'] as $d){
                $this->db->insert('mahasiswa',$d);
            }
            redirect('data_mahasiswa/lihat_data');
        }
    }
}
?>

OK, aku jelasin ya…
untuk function add_multiple_post():

1. Data dicek dulu apakah sudah disubmit ato belum ($_POST==NULL), kalo belum, load view add_multiple_form.php dengan variable $banyak_data yang diambil dari parameter berdasarkan data yg dimasukkan sebelumnya (di function add_multiple(), yaitu $_POST['banyak_data'])
2. Kalo datanya udah disubmit, maka lakukan insert data yang berulang sebanyak elemen dari $_POST['data'] (berdasarkan $banyak_data) ke dalam table ‘mahasiswa’ dengan data dari $_POST['data'] (input-an dari multiple form)
3. Kemudian redirect/alihkan ke function lihat_data untuk menampilkan seluruh data mahasiswa yang akan kita buat setelah ini.

Nah, sekarang kita tinggal bikin daftar data ‘mahasiswa’ yang sudah dimasukkan.. Caranya, buat file list_mahasiswa.php di /system/application/views/ dengan isi sebagai berikut:

list_mahasiswa.php:

<h2>Daftar Mahasiswa</h2>
 
<table>
    <tr>
        <th>No</th>
        <th>NIM</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <?php $i = 0 ?>
    <?php foreach($mahasiswa as $m): ?>
    <tr>
        <td><?php echo $i++ ?></td>
        <td><?php echo $m->nim ?></td>
        <td><?php echo $m->nama ?></td>
        <td><?php echo $m->alamat ?></td>
    </tr>
    <?php endforeach ?>
</table>
<?php echo anchor('data_mahasiswa/add_multiple','Tambah Data') ?>

Lalu buat function-nya di Controller data_mahasiswa.php:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function lihat_data(){
        $data['mahasiswa'] = $this->db->get('mahasiswa')->result();
        $this->load->view('list_mahasiswa',$data);
    }
}
?>

Selesai.

Berikut ini adalah source code lengkapnya:

/system/application/controllers/data_mahasiswa.php

class Data_mahasiswa extends Controller {
    //...
    //... function2 yg ada di tutorial sebelumnya
    //...
 
    //ADD MULTIPLE
    function add_multiple() {
        if($_POST==NULL) {
            $this->load->view('add_multiple');
        }else {
            redirect('data_mahasiswa/add_multiple_post/'.$_POST['banyak_data']);
        }
    }
    function add_multiple_post($banyak_data=0) {
        if($_POST==NULL) {
            $data['banyak_data'] = $banyak_data;
            $this->load->view('add_multiple_form',$data);
        }else {
            foreach($_POST['data'] as $d){
                $this->db->insert('mahasiswa',$d);
            }
            redirect('data_mahasiswa/lihat_data');
        }
    }
    function lihat_data(){
        $data['mahasiswa'] = $this->db->get('mahasiswa')->result();
        $this->load->view('list_mahasiswa',$data);
    }
}

/system/application/views/add_multiple.php

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    Banyak mahasiswa yang ingin dimasukkan:
    <input name="banyak_data" size="3" /> orang<br />
    <input type="submit" value="Lanjut" />
</form>

/system/application/views/add_multiple_form.php

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    <table>
        <tr>
            <td>No</td>
            <td>NIM</td>
            <td>Nama</td>
            <td>Alamat</td>
        </tr>
        <?php for($i=1;$i<=$banyak_data;$i++): ?>
        <tr>
            <td><?php echo $i ?></td>
            <td><input name="data[<?php echo $i ?>][nim]" /></td>
            <td><input name="data[<?php echo $i ?>][nama]" /></td>
            <td><input name="data[<?php echo $i ?>][alamat]" /></td>
        </tr>
        <?php endfor ?>
    </table>
    <input type="submit" value="simpan" />
</form>

/system/application/views/list_mahasiswa.php

<h2>Daftar Mahasiswa</h2>
 
<table>
    <tr>
        <th>No</th>
        <th>NIM</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <?php $i = 0 ?>
    <?php foreach($mahasiswa as $m): ?>
    <tr>
        <td><?php echo $i++ ?></td>
        <td><?php echo $m->nim ?></td>
        <td><?php echo $m->nama ?></td>
        <td><?php echo $m->alamat ?></td>
    </tr>
    <?php endforeach ?>
</table>
<?php echo anchor('data_mahasiswa/add_multiple','Tambah Data') ?>

Untuk contoh file nya klik link Download yang ada di bawah ini..

DOWNLOAD

Kali ini, Cheyuz akan ngebahas tentang Page Template, apa itu?

Page Template adalah sebuah pola layout pada sebuah halaman web di mana kita akan selalu memakai pola tersebut sesuai kebutuhan kita untuk meload halaman lengkap beserta header, content, dan footernya.. dengan menggunakan page template, kita tidak harus meload header dan footer di setiap fungsi pada controller di CodeIgniter.

Contoh misalnya ada kasus seperti ini:
Pada sebuah halaman web, ketika diload harus selalu load header, sidebar, content, footer, dsb.. maka secara normal di program akan berbentuk seperti ini:

<?php
class Home extends Controller {
    function index() {
        $data['title'] = 'Webku';
        $this->load->view('header');
        $this->load->view('topmenu');
        $this->load->view('home_view', $data);
        $this->load->view('footer');
    }
}
?>

Di dalam function index, kode tersebut akan meload view header.php, sidebar.php, home_view.php, dan footer.php. Cara ini sebenarnya kurang efektif, walaupun yang dihasilkan adalah sama, yaitu nge-load lengkap sebuah halaman web (dari tag [html] sampai [/html]). Kenapa kurang efektif? karena di setiap function kita harus meload lagi semua elemen di atas… Ini baru satu function, bagaimana jika di dalam satu controller terdapat 50 function? tentu hal ini dapat merepotkan, dan sangat tidak efektif karena membuat redudansi kode.

Menggunakan Page Template Helper

Untuk mempermudah penggunaan code, kita akan membuat sebuah helper baru yang akan kita namakan Page Template Helper (page_template_helper.php) yang akan kita gunakan untuk merender layout yang sudah kita buat. Jadi layaknya seperti gabungan dari function $this->layout() dan $this->render() di Framework CakePHP.

OK, pertama-tama buatlah layout untuk template kita, dan simpan di folder /system/application/view/layout/ (seperti biasa, base_url() website kita adalah ‘webku’) dengan nama default.php, kodenya adalah sebagai berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Webku<?php echo isset ($title)?" | ".$title:'' ?></title>
    </head>
    <body>
        <div id="header">
            <?php $this->load->view('layout/element/header') ?>
        </div>
        <div id="topmenu">
            <?php $this->load->view('layout/element/topmenu') ?>
        </div>
        <div id="content">
            <?php $this->load->view($view) ?>
        </div>
        <div id="footer">
            <?php $this->load->view('layout/element/footer') ?>
        </div>
    </body>
</html>

Kode di atas adalah sebuah template default website kita, yang berarti setiap action/function yang akan kita panggil akan selalu meload tag html di atas, mulai dari title, kemudian load CSS atau JS misalnya, terus header-nya, topmenu, footer, dan sebagainya. Kita cukup menambahkan elemen di file tersebut.

Setelah membuat file default.php, buatlah semua file ‘layout element’ (header, topmenu, dan footer) dan simpan di direktori /system/application/view/layout/element/. Berikut adalah isi dari masing-masing elemen:

Isi dari file-file di bawah ini hanya pemisalan/contoh

../view/layout/element/header.php

<img src="images/banner.jpg" /> Ini adalah HEADER

../view/layout/element/topmenu.php

<a href="#">MENU 1</a> | <a href="#">MENU 2</a> | <a href="#">MENU 3</a>

../view/layout/element/footer.php

Copyright &copy 2010 by Cheyuz

Jadi ketika file default.php dirender, maka element/header.php, element/topmenu.php, dan element/footer.php akan selalu diload.

Nah, untuk pemanggil template tersebut dan yang akan digunakan di controller adalah Page Template Helper… jadi rencananya kode kita yang sebelumnya:

<?php
class Home extends Controller {
    function index() {
        $data['title'] = 'Webku';
        $this->load->view('header');
        $this->load->view('topmenu');
        $this->load->view('home_view', $data);
        $this->load->view('footer');
    }
}
?>

menjadi seperti ini:

<?php
class Home extends Controller {
    function index() {
        $data['title'] = 'Webku';
        show('home_view',$data);
    }
}
?>

Singkatnya, kita tidak menggunakan function $this->load->view() lagi di Controller, tetapi kita menggunakan function show() yang berfungsi sama dan meload seluruh elemen yang kita tentukan.

Sekarang, kita buat sebuah helper page_template_helper.php di /system/application/helper/ dengan kode seperti berikut:

<?php
if ( ! function_exists('element')) {
    function show($view, $data=array(), $template='default') {
        $ci = &get_instance();
        $data['view'] = $view;
        $data = $ci->load->view('layout/'.$template, $data);
    }
}
 
/* End of file page_template_helper.php */
/* Location: ./system/helpers/page_template_helper.php */

OK, akan Cheyuz jelaskan..
Di kode itu terlihat bahwa $view yang ada di parameter 1 di function show() ini akan dimasukkan ke dalam variable array $data, yang kemudian akan diload view yang bernama $template (diubah sesuai nama layout, defaultnya adalah default.php) dengan $data tetap dari parameter ke-2.. dan parameter ke-3 ($default) adalah nama file template yang kita buat… secara default file template yang akan diload adalah ../layout/default.php.

Nah, di controller Home tadi, kita dapat mengubahnya menjadi seperti ini:

<?php
class Home extends Controller {
    function index() {
        $data['title'] = 'Webku';
        show('home_view',$data);
    }
    function about(){
        $data['title'] = 'About';
        show('home_view',$data);
    }
    function other(){
        $data['title'] = 'Other (layout tanpa topmenu)';
        show('home_view',$data, 'other');
    }
}
?>

Ada function other(), yang akan memanggil halaman dengan template yang berbeda, yaitu menghilangkan topmenu.. karena kita sudah membuat helpernya, maka untuk membuat template baru untuk function other() tersebut, kita tinggal membuat file template bernama other.php di /system/application/view/layout/ dengan isi file seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Webku<?php echo isset ($title)?" | ".$title:'' ?></title>
    </head>
    <body>
        <div id="header">
            <?php $this->load->view('layout/header') ?>
        </div>
 
        <?php // menghilangkan topmenu untuk action tertentu ?>
 
        <div id="content">
            <?php $this->load->view($view) ?>
        </div>
        <div id="footer">
            <?php $this->load->view('layout/footer') ?>
        </div>
    </body>
</html>

Setelah semua langkah selesai, selanjutnya adalah meload helper tersebut. Karena kita akan selalu meload helper ini, maka kita atur konfigurasi autoloadnya di file /system/application/config/autoload.php

Tambahkan ‘page_template’ pada bagian kode berikut:

..
$autoload['helper'] = array('page_template');
..

Tutorial selesai, selamat mencoba…
bila ada pertanyaan, kritik saran, silakan comment/email…

Di tutorial yang kedua ini, kita akan bahas bagaimana cara membuat CRUD dengan menggunakan CI…. kenapa kita harus belajar membuat aplikasi CRUD? soalnya ini merupakan dasar kita untuk ke depannya.. untuk membuat aplikasi yang kompleks, sebenarnya kita hanya mengelola dan mengolah database, meliputi membuat database (Create), membaca (Read), mengubah (Update), menghapus (Delete), ato disingkat menjadi CRUD.

Adapun di sini kita akan belajar membuat model untuk data yang akan diolah, view untuk membuat interface, dan controller untuk mengolah model dan ngeload view..

OK, pertama-tama, kita buat sebuah database bernama tutorial_ci, dan buatlah sebuah table bernama mahasiswa (kenapa selalu ‘mahasiswa’? ga punya contoh lain ), isinya ada id, nim, nama, alamat.. OK segitu saja.. kamu tinggal copy SQL berikut:

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `nim` varchar(20) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Jadi kita membuat tabel kosong bernama ‘mahasiswa’ dengan field seperti di atas…

1. Menampilkan semua data

OK, langkah pertama adalah membuat sebuah model….

Buatlah sebuah file mahasiswa_model.php di /system/application/models dengan isi adalah barisan kode seperti berikut:

<?php
/**
 * @author Cecep Yusuf
 */
 
class Mahasiswa_model extends Model {
 
}
?>

Sejauh ini, kita sudah membuat sebuah model untuk mahasiswa, yang nantinya mempunyai banyak fungsi untuk mengolah table ‘mahasiswa’…

Di bawah ini, kita akan menambahkan function selectAll(), yang mana berfungsi untuk menyeleksi semua field di table mahasiswa (select * from mahasiswa), jadi code tadi setelah ditambahkan menjadi seperti berikut:

<?php
/**
 * @author Cecep Yusuf
 */
 
class Mahasiswa_model extends Model {
    function selectAll(){
        return $this->db->get('mahasiswa')->result();
    }    
}
?>

Nah, sejauh ini kita sudah bikin function selectAll() yang berfungsi untuk memilih semua field dari table mahasiswa.

Setelah itu, model akan diolah oleh controller, jadi sekarang kita buat sebuah controller yang berfungsi untuk memanipulasi objek mahasiswa_model…

OK, buatlah sebuah controller bernama data_mahasiswa.php di /system/application/controllers dengan isi file sebagai berikut:

<?php
/**
 * @author Cecep Yusuf
 */
 
class Data_mahasiswa extends Controller {
    function  __construct() {
        parent::Controller();
    }
}
?>

function __construct() adalah sebagai konstruktor… berbagai perintah yang ada di dalam fungsi ini akan selalu dipanggil di saat objek Data_mahasiswa dibuat… jadi berbagai fungsi untuk meload library, model, helper, dan sebagainya, kita tinggal masukkan di function ini supaya tidak diketik ulang di setiap fungsi….

Karena kita akan meload model mahasiswa_model setiap kali dibuat controller, maka kita load modelnya di bagian __construct() di dalam controller Data_mahasiswa. Jadi kode lengkapnya seperti berikut:

<?php
/**
 * @author Cecep Yusuf
 */
 
class Data_mahasiswa extends Controller {
    function  __construct() {
        parent::Controller();
        $this->load->model('mahasiswa_model');
    }
 
}
?>

Kemudian, kita buat function index() sebagai penampil semua data yang ada di table mahasiswa, jadi URLnya akan berbentuk http://localhost/webku/data_mahasiswa/index ATAU http://localhost/webku/data_mahasiswa (Index tidak perlu dituliskan)

<?php
/**
 * @author Cecep Yusuf
 */
class Data_mahasiswa extends Controller {
    function  __construct() {
        parent::Controller();
        $this->load->model('mahasiswa_model');
    }
    function index(){
        $data['mahasiswa'] = $this->mahasiswa_model->selectAll();
        $this->load->view('data_mahasiswa_view', $data);
    }
}
?>

Di dalam function index() di atas, kita lihat ada script seperti ini:
$data['mahasiswa'] = $this->mahasiswa_model->selectAll();
kode tersebut berarti data hasil keluaran dari function selectAll() di model mahasiswa_model berupa array dan disimpan di dalam array $data['mahasiswa'], yang nantinya data tersebut bisa diakses di view..

Kemudian kita lihat lagi, ada script berikut:
$this->load->view('data_mahasiswa_view');
function view() dalam objek ‘load’ adalah untuk meload view yang sudah kita buat di /system/application/views, dengan mengeset variable hasil ekstrak dari variable $data, sehingga nanti bisa diakses dari view..

OK, kita buat view-nya dengan nama file data_mahasiswa_view.php di /system/application/views dengan isi sebagai berikut ini:

<h1>Data Mahasiswa</h1>
<table>
    <thead>
        <tr>
            <th>No</th>
            <th>NIM</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php $i = 1 ?>
        <?php foreach($mahasiswa as $m): ?>
        <tr>
            <td><?php echo $i++ ?></td>
            <td><?php echo $m->nim ?></td>
            <td><?php echo $m->nama ?></td>
            <td><?php echo $m->alamat ?></td>
            <td></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

Sekarang, coba buka alamat di browser: http://localhost/webku/data_mahasiswa, keluar apa? table kan? dengan data KOSONG….

OK, sekarang kita lanjut ke sesi yg kedua.. yaitu MENAMBAHKAN DATA…

2. Menambahkan data

Kita akan membuat tampilan seperti berikut:

Silakan buat sebuah anchor() (a) di bawah table di dalam file data_mahasiswa_view.php..
Jangan lupa sebelumnya load dulu url_helper di controller dengan cara menambahkan code berikut:

<?php 
...
   $this->load->helper('url');
...
?>

Buatlah sebuah anchor sebagai link ke function add() di Controller (fungsi ini belum dibuat), caranya dengan menambahkan script berikut:

<?php echo anchor('data_mahasiswa/add', 'Tambah Data') ?>

jadi kode lengkapnya di data_mahasiswa_view.php adalah sebagai berikut:

<h1>Data Mahasiswa</h1>
<table>
    <thead>
        <tr>
            <th>No</th>
            <th>NIM</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php $i = 1 ?>
        <?php foreach($mahasiswa as $m): ?>
        <tr>
            <td><?php echo $i++ ?></td>
            <td><?php echo $m->nim ?></td>
            <td><?php echo $m->nama ?></td>
            <td><?php echo $m->alamat ?></td>
            <td></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>
<?php echo anchor('data_mahasiswa/add', 'Tambah Data') ?>

Langkah selanjutnya adalah membuat function add() di controller data_mahasiswa.php, tambahkan function ini:

...
    function add(){
        $this->load->view('add_view');
    }
...

Di sana terdapat code untuk meload file view yang bernama add_view.php…
Silakan buat view add_view.php di folder /system/application/views dengan isi sebagai berikut:

<h1>Tambah data</h1>
<form action="" method="post">
    <table>
        <tr>
            <th>NIM</th>
            <td><input name="nim" /></td>
        </tr>
        <tr>
            <th>Nama</th>
            <td><input name="nama" /></td>
        </tr>
        <tr>
            <th>Alamat</th>
            <td><textarea name="alamat"></textarea></td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" value="tambah" /></td>
        </tr>
    </table>
</form>

Method yang digunakan yaitu POST, yang akan menghasilkan sebuah variable array $_POST…

Sebelumnya, kita tambahkan function insert() di model mahasiswa_model.php seperti berikut:

...
    function insert($set){
        $this->db->insert('mahasiswa', $set);
    }
...

function insert tersebut sudah ada di library database CI, jadi kita tidak usah membuat query ‘insert into….’ lagi…

sekarang, di Controller data_mahasiswa.php kita ubah function add() menjadi seperti berikut:

...
    function add() {
        if($_POST==NULL) {
            $this->load->view('add_view');
        }else {
            $this->mahasiswa_model->insert($_POST);
            redirect('data_mahasiswa/index');
        }
    }
...

Kita jelasin, di sana ada fungsi If untuk mengecek apakah data dari $_POST sudah terSET atau belum… kalo kita udah mengklik submit, berarti kita sudah mengeset variable $_POST… jika belum (=NULL), maka program hanya meload view saja….

di sana ada function redirect(), yaitu function bawaan CI, yang berfungsi untuk me-redirect halaman (mengalihkan), sehingga ketika kita menambahkan data, maka akan dialihkan lagi ke index…

Sejauh ini, kamu berhasil membuat aplikasi CI untuk menambahkan data ke database dan menampilkannya….

silakan ketik url berikut untuk melihat hasilnya: http://localhost/webku/data_mahasiswa

Sementara segini aja dulu ya…
Cheyuz-nya cape 2 jam ngetik trus nih,,, hahaha..
tapi gpp, demi kalian

Nanti di part III kita akan membuat untuk update dan delete nya….
selamat mencoba…

SALAM WEB DEVELOPER!

Udah lama aku ga ngupdate blog ini… yaa sekitar 3 minggu lah ya.. Mulai sekarang aku mau mulai update lagi ini blog, dan pengennya sih blog ini up to date sehari sekali ato ya minimalnya seminggu sekali lah ya…

OK, tutorial kali ini adalah tutorial CodeIgniter dasar, sangat dasar.. jadi di sini akan dijelaskan tentang bagaimana cara konfigurasi nama situs, kemudian konfigurasi database, konfigurasi library, autoload, dan sebagainya… mudah2an temen2 mengikuti tutorial ini dengan sebaik-baiknya, soalnya kalo kita ga mulai dari dasar/basic nantinya susah… kita bisa aja bikin aplikasi oleh CodeIgniter dengan meniru contoh, tetapi kita tidak faham, hanya mengikuti… bahayanya adalah gimana klo client minta ini itu dan itu misalnya tidak ada dalam contoh? klo kita ga faham kita pasti ga bisa meneruskan aplikasi kita alias BUNTU..

Instalasi

OK, kita mulai aja… kita di sini memakai XAMPP pertama-tama, extract file codeigniter.rar ke C:\xampp\htdocs, file bisa didownload di sini. Misalnya kita namakan nama folder root (nama situs) kita adalah webku.

Konfigurasi

Kemudian, hal yang pertama harus dilakukan adalah konfigurasi awal, yaitu base_url, base_url adalah nama root situs kita… caranya edit file /webku/system/application/config/config.php, ubah $config['base_url'] = “http://example.com/“ menjadi:

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

kemudian hilangkan index.php di $config['index_page'] sehingga menjadi:

$config['index_page'] = "";

Langkah kedua adalah konfigurasi routes, yaitu controller default apakah yang ingin diload…? jadi di sini adalah konfigurasi untuk controller ‘home’, sehingga ketika kita mengetikkan url http://localhost/webku maka yang dipanggil adalah controller yang sudah dikonfigurasi di routes ini.. Cara konfigurasinya yaitu dengan mengedit file /webku/system/application/config/routes.php, dan di bagian $route['default_controller'] isi dengan ‘home’ sehingga seperti ini:

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

kita akan membuat supaya ketika kita menuju url http://localhost/webku maka controller yang akan dijalankan adalah controller home .

Kemudian setelah itu adalah konfigurasi Databasenya… ada di file /webku/system/application/config/database.php, Di situ terlihat konfigurasi-konfigurasi seperti host, username, password, nama db, dsb.. silakan diisi seperti berikut:

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "blog"; //nama database
$db['default']['dbdriver'] = "mysql";
$db['default']['dbprefix'] = "";
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = "";
$db['default']['char_set'] = "utf8";
$db['default']['dbcollat'] = "utf8_general_ci";

Kemudian konfigurasi selanjutnya adalah konfigurasi untuk autoload, jadi ketika situs dibuka, library/helper/model/dsb apakah yang akan selalu diload.. file ada di /webku/system/application/config/autoload.php, tambahkan database di bagian $autoload['libraries'] menjadi seperti ini:

$autoload['libraries'] = array('database');

Kemudian yang terakhir adalah penambahan .htaccess supaya kita tidak perlu mengetikkan index.php di URL kita, cara untuk menghilangkan index.php (menggunakan .htaccess) ada di sini.

Contoh Aplikasi Database Sederhana

Buatlah sebuah database bernama blog, kemudian copy SQL berikut:

CREATE TABLE IF NOT EXISTS `buku_tamu` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nama` varchar(100) NOT NULL,
 `email` varchar(20) NOT NULL,
 `situs` varchar(100) NOT NULL,
 `komentar` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
INSERT INTO `buku_tamu` (`id`, `nama`, `email`, `situs`, `komentar`) VALUES
(1, 'Cecep Yusuf', 'cheyuz@yahoo.co.id', 'http://www.cheyuz.com', 'Ini adalah komentar pertama'),
(2, 'Deddy Mizwar', 'deddy@mizwar.com', 'http://www.facebook.com', 'Ini adalah komentar kedua');

Kita buat sebuah contoh di mana kita akan menampilkan isi dari database di atas..

Pertama-tama, buatlah model terlebih dahulu di /webku/system/application/model/ dengan nama file buku_tamu.php yang berisi code sebagai berikut:

<?php
class Buku_tamu extends Model{
   function selectAll()
   {
      return $this->db->get('buku_tamu')->result();
   }
}
?>

Di dalam folder /webku/system/application/controller/ bikin sebuah file bernama home.php untuk membuat class controller yang bernama Home… isi dari home.php adalah:

<?php
class Home extends Controller{
   function __construct()
   {
      parent::Controller();
      $this->load->model('buku_tamu');
   }
   function index()
   {
      $data['title'] = 'Ini adalah aplikasi sederhana';
 
      //memanggil function selectAll di model buku_tamu, dimasukkan ke $data['buku_tamu']
      $data['buku_tamu'] = $this->buku_tamu->selectAll();      
 
      //meload view bernama home_view.php dengan data variable adalah $data
      $this->load->view('home_view', $data);
   }
}
?>;

Nah, kemudian kita buat file home_view.php di folder /webku/system/application/view/ dengan isi sebagai berikut:

 
<h2><?php echo $title ?></h2>
 
<table>
  <tr>
    <td>No</td>
    <td>Nama</td>
    <td>Email</td>
    <td>Situs</td>
    <td>Komentar</td>
  </tr>
  <?php $i = 0 ?>
  <?php foreach ($buku_tamu as $bt): ?>
  <tr>
    <td><?php echo $i++ ?></td>
    <td><?php echo $bt->nama ?></td>
    <td><?php echo $bt->email ?></td>
    <td><?php echo $bt->situs ?></td>
    <td><?php echo $bt->komentar ?></td>
  </tr>
  <?php endforeach ?>
</table>

Silakan dibuka di browser url berikut: http://localhost/webku

Hasilnya adalah sebagai berikut:

The Official Site of Cheyuz: http://www.cheyuz.com

Bagaimana tanggapan Anda jika mendengar kabar pada 1 April : “Hey, di Jakarta lagi turun salju!” atau “Semua penduduk Indonesia dapat beras gratis!”. Tentu reaksi pertama adalah tidak percaya alias menganggap berita itu hanya ndobos.  Bagi yang percaya tentu mereka terkena April Mop. Kebiasaan ‘menipu’ orang lain yang setiap tahun ‘dirayakan’ oleh segelintir orang di berbagai belahan dunia.

Tentu akan menarik jika kita mengetahui asal-usul sejarah kebiasaan ‘bodoh’ ini sehingga Anda bisa memutuskan apakah memang kebiasaan ini benar-benar menghibur atau malah kebiasaan konyol belaka.

April Mop yang dikenal dengan April Fools diduga mulai diperingati pada abad ke-16 di Perancis. Ketika itu awal tahun baru jatuh pada tanggal 1 April. Cara merayakannya mirip dengan masa kini. Penuh pesta, dansa-dansi sampai pagi. Pada 1562, Paul Gregory memperkenalkan kalender baru yang tahunnya diawali bulan Januari. Namun, ada beberapa kalangan yang belum mendengar dan tidak mempercayai perubahan ini. Jadi mereka terus saja memperingati tahun baru pada tanggal 1 April. Orang-orang inilah yang disebut April Fools atau orang-orang yang tertipu di bulan April.

Cerita lain mengatakan bahwa tradisi ini dimulai pada jaman Romawi kuno ketika orang merayakan festival Ceres setiap awal April. Ceres adalah dewi panen yang puterinya diculik Pluto, dewa dunia gaib. Ceres diceritakan mengikuti gema suara teriakan anaknya. Suatu hal yang mustahil karena gema sangat sulit dicari sumber asalnya. Sehingga apa yang dilakukan Ceres disebut ‘a fools errand’ atau pekerjaan orang bodoh.

Kebiasaan membohongi teman dan anggota keluarga ini diduga menyebar dari Perancis ke Inggris dan Skotlandia. Lalu menyeberang ke Amerika ketika orang-orang Eropa beremigrasi ke sana.

Di Perancis sendiri disebut Poisson d’avril atau Ikan April. Mereka percaya ikan kecil ini mudah tertangkap atau tertipu. Di Skotlandia istilahnya April gowk yang beratri burung tekukur yang di sana melambangkan kepolosan. Di Skotlandia malah April Fools Day diperingati selama dua hari. Hari kedua khusus untuk meledek anggota badan dan disebut Taily Day. Jadi hal yang lumrah jika Anda menempelkan tulisan “Kick Me” pada bokong kawan Anda.

Sementara itu April Mop dalam sejarah Muslim Spanyol berawal pada tahun 1487 atau 892 Hijriah.  Perayaan April Mop diawali dengan peristiwa penyerangan besar-besaran oleh tentara Salib terhadap negara Spanyol. Pada masa itu Spanyol berada di bawah kekuasaan kekhalifahan Islam. Beberapa kota di Spanyol yang dikuasai pasukan Islam seperti Zaragoza dan Leon di wilayah Utara, Vigo dan Forto di wilayah Timur, Valencia di wilayah Barat, Lisabon dan Cordoba di Selatan serta Madrid di pusat kota berhasil dikuasai tentara Salib.

Granada adalah kota pelabuhan yang merupakan kota terakhir yang ditaklukkan pasukan Salib. Penduduk-penduduk Islam di Spanyol yang juga disebut orang Moor terserbut terpaksa berlindung dalam rumah. Pasukan Salib pun terus mengejar mereka. Mereka tahu orang Moor itu bersembunyi di rumah. Pasukan Salib meneriakkan pengumuman dengan lantang bahwa para Muslim Granada dapat keluar dari rumah dengan aman dan diperbolehkan berlayar keluar Spanyol.

Namun, orang-orang Muslim masih curiga dengan tawaran tersebut. Beberapa dari mereka diperkenankan melihat sendiri kapal-kapal penumpang yang telah dipersiapkan di pelabuhan. Setelah mereka yakin bahwa kapal-kapal itu disediakan untuk mereka, maka bersiaplah mereka untuk berangkat meninggalkan Granada. Pasukan Salib berjanji memberikan kebebasan serta menjamin keselamatan para Muslim jika mereka meninggalkan Spanyol serta persenjataan mereka.

Ketika ribuan orang-orang Muslim telah berkumpul di pelabuhan, kapal-kapal yang bersandar dan sedianya untuk mengangkut mereka langsung dibakar dan orang-orang Muslim itu dibantai hingga air laut menjadi merah kehitam-hitaman bersimbah darah. Peristiwa pembantaian dan pengingkaran janji itu terjadi pada 1 April 1487 dan dikenang sebagai ‘The April Fool Day’.
Demikian berbagai versi sejarah April Mop di dunia. Terserah Anda mau percaya yang mana. Namun, satu hal yang harus kita perhatikan adalah jangan hanya ikut-ikutan ‘merayakan’ April Mop tanpa mengetahui asal-usulnya. Belum lagi dampak yang disebabkan karena begitu ‘percaya’nya pada rutinitas lelucon April Mop. Yang bisa merugikan diri sendiri dan orang lain.

Misalnya pada 1 April 1946 terjadi tsunami gempa Pulau Aleutian yang menewaskan 165 orang di Hawaii dan Alaska. Di Hawaii, tsunami ini dikenal dengan ‘Tsunami April Mop’, karena banyaknya orang yang tewas karena tidak percaya berita akan kedatangan tsunami tersebut.

Kali ini, Cheyuz bakal ngasi trik buat temen-temen semua Sangat sangat banyak trik buat bikin shadow (bayangan untuk CSS), ada yang memakai image yang dikasi shadow di image editor seperti photoshop, ada yang dibuat image warna hitam transparan dan ditempel di CSS, dan lain-lain…

Sekarang Cheyuz mau ngasi trik buat kalian, khususnya web designer yang sering bergelut dengan styling di CSS, memainkan layout dan style buat tombol, form, notifikasi, dan lain-lain….. OK, kita mulai aja…

Yang kita tahu, kebanyakan teknik untuk membuat shadow/bayangan adalah dengan menggunakan image… atau image yang diedit dengan image editor.. biasanya sih bertipe PNG… tapi kali ini kita akan membuatnya pure elemen html yang dipadu dengna CSS, tanpa image!

Sebenernya sih CSS 3 udah ada properti buat bikin shadow, namanya -moz-box-shadow, tapi berhubung belum support di semua browser, jadi pikir-pikir dulu sebelum menggunakan CSS 3…

.shadow {
  margin-top:30px;
  margin-left:10px;
  width:300px;
  background:#eeeeee;
  color:#444;
  border:1px solid #DEDEDE;
  -moz-box-shadow: 5px 5px 5px #ccc;
  padding: 5px 20px 5px 20px;
}

Hasilnya sangat bagus banget, tetapi ada kekurangannya… berhubung masih baru, maka fitur CSS 3 ini belum support di semua browser (coba sekarang liat blog ini pake IE/FF 3.0, pasti ga bakal ada bayangannya )

Kalo kita ingin membuat shadow box tersebut pake CSS2, pasti harus menggunakan image, soalnya di sana terlihat bahwa ada gradasi, kalo pake CSS2 itu tuh adalah image..

Untuk membuat shadow tanpa image di CSS2, div yang kita gunakan nggak 1, tapi ada div lagi di dalam div tertentu…
Contohnya html berikut, membuat suatu tulisan yang berada di dalam box, kemudian dibikin bayangan (shadow)nya kayak yang di atas…

<div class="shadow2">
<div>ini adalah div dengan class = "shadow2"</div>
</div>

Ini CSSnya:

.shadow2{
    display: table;
    background: #ccc;
}
.shadow2 div{
    padding: 10px;
    display: block;
    border: 1px solid #ccc;
    background: #fff;
    margin: -3px 3px 3px -3px;
}

Maka hasilnya bakal kayak gini…

Kalo dipake buat gambar, misal html kayak gini:

<div class="shadow2">
<div><img src="http://www.cheyuz.com/images/link1.jpg" /></div>
</div>

maka hasilnya adalah kayak gini:

Contoh lain:

Sebenernya masih banyak alternatif lain selain pake teknik ini, tetapi menurutku cara ini yang paling efektif, karena ga pake image dan cara membuatnya sangat sederhana…

Guys, kali ini Cheyuz bakal ngebahas tentang FW (Framework) PHP… Mungkin ini bermanfaat buat temen-temen semua (khususnya ilkom [ilmu komputer] yang sejurusan, bahkan sekelas denganku di kampus… …

Waktu itu kita udah sedikit ngebahas ttg CodeIgniter, walopun blm secara detail dijelasin CodeIgniter (selanjutnya CI) itu apa…

CodeIgniter (CI) adalah salah satu framework PHP yang cukup populer, bahkan bisa sangat populer karena sering dipakai di kalangan perusahaan IT dalam bidang pengembangan Web (Web Development). Tetapi sebelumnya, apa itu PHP Framework? Gampangnya framework adalah kumpulan fungsi-fungsi dan class untuk tujuan tertentu yang sudah siap pakai sehingga bisa lebih mempermudah pekerjaan pemrograman, tanpa harus reinvent wheel. Untuk lebih lengkapnya anda bisa membacanya di wikipedia atau situs lain yang sejenis (googling aja ).

Nah, kenapa kita harus memakai FW??

• Mempercepat dan mempermudah pembangunan sebuah aplikasi PHP
• Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
• Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database, scaffolding, pengaturan session, error handling, dll
• Lebih bebas dalam pengembangan jika dibandingkan CMS

Nah, framework yang populer dan sering dipakai di lapangan salah dua-nya adalah CodeIgniter dan CakePHP. Tetapi kalian tau ga keunggulan dan kelebihan kedua framework ini? ok, kita bahas di sini…

Kalo kalian baca dokumentasi dan bahkan memakai CI, maka terlihat keunggulan CI ini adalah sebagai berikut…\

Kelebihan CI

• Performa sangat cepat : salah satu alasan tidak menggunakan framework adalah karena eksekusinya yang lebih lambat daripada PHP from the scracth, tapi Codeigniter sangat cepat bahkan mungkin bisa dibilang codeigniter merupakan framework yang paling cepat dibanding framework yang lain.
• Mendukung PHP4 dan PHP5
• Konfigurasi yang sangat minim (nearly zero configuration) : tentu saja untuk menyesuaikan dengan database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan mengubah beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk menggunakan codeigniter dengan setting standard, anda hanya perlu merubah sedikit saja file pada folder config.
• Dokumentasi yang sangat lengkap : Setiap paket instalasi codeigniter sudah disertai user guide yang sangat bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah dipahami bahkan untuk Cheyuz yang bahasa inggrisnya kurang baik, semoga saja kedepan ada yang mau menerjemahkannya ke bahasa Indonesia. Ditambah lagi oficial video tutorial membuat blog dalam 20 menit yang disediakan di situsnya, untuk mengaksesnya anda bisa menggunakan quick time atau bisa juga mendownload video yang sudah diupload pada youtube.com seperti yang pernah Cheyuz jelaskan di tips belajar pemrograman melalui youtube.com.
• Mudah dipelajari : Mungkin pengaruh dokumentasi yang bagus sehingga codeigniter mudah untuk dipelajari, atau memang framework ini benar-benar mudah dipelajari. Sebelumnya Cheyuz pernah mencoba-coba mempelajari Zend, Symfony, dan Prado, tiga framework yang memang lebih powerfull daripada codeigniter, tapi juga lebih sulit untuk dipelajari. Inilah alasan terkuat Cheyuz jatuh cinta pada codeigniter.
• Compatible dengan banyak hosting : tidak seperti kebanyakan framework lain yang hanya bisa berjalan di PHP 5, codeigniter bisa berjalan dengan lancar pada PHP 4, meskipun ini saat ini sudah banyak hosting yang menggunakan PHP 5 tapi Cheyuz pernah mendapati ada beberapa yang masih menggunakan PHP 4. Juga codeigniter tidak menggunakan PEAR atau tool CLI lainnya, sehingga memberi keleluasaan bagi anda yang tidak mempunyai akses ke shell pada hosting anda.

Nah, ini kelebihan dan kekurangan CakePHP:

Kelebihan:

• Dukungan terhadap AJAX, ORM, library AJAX di dalam CakePHP sudah disediakan, kita tinggal memakainya aja…
• Automagic function, seperti adanya validasi input, dll, yang mempercepat coding. Seperti helper untuk form, membuat form dengan menggunakan helper dari CakePHP (yang menurut Cheyuz lebih bagus dari helper CI) sangat berguna buat kita yang sering bekerja dengan banyak form. Banyak contoh lainnya…
• Mendukung PHP4 dan PHP5
• Lebih mencerminkan MVC yang sesungguhnya dibandingkan CI
• Komunitas pengguna yang besar dan forum cukup baik

Kekurangan:

• Manual yang ada tidak selengkap CI. Ini merupakan salah satu kekurangan CakePHP, oleh karena itu CakePHP mungkin bisa dipelajari lebih lama daripada CI.
• Terlalu banyak aturan, dan tidak sefleksibel CI, seperti nama table harus plural, nama controller harus sama dengan nama folder untuk view… nama view harus sama dengan nama action, dan lain2…
• Butuh waktu belajar yang lebih lama untuk menguasai framework ini dibanding CI. Tapi jika sudah benar-benar mengerti, banyak kelebihan dibanding CI. Beberapa situs menyarankan anda untuk belajar dan terbiasa dulu dengan CodeIgniter baru kemudian mempelajari CakePHP
• (http://www.zenperfect.com/2007/07/15/faceoff-codeigniter-vs-cakephp/)

Selebihnya sih terserah temen2 semua mau belajar yang mana aja… tapi saran Cheyuz, pelajarilah CI lebih dulu, yang menurut Cheyuz relatif lebih mudah dan fleksibel dibandingkan CakePHP, hehe… Tapi itu sih tergantung website seperti apa yang akan dibuat…

- Dari berbagai sumber -

Pemahaman di dalam CSS sangat penting diketahui khususnya buat kalian sebagai web designer yang sering bergelut dalam masalah mengatur layout, tata letak, peletakan suatu elemen di halaman web dan lain-lain…

Beberapa properti yang berperan banyak dalam CSS untuk masalah layout antara lain:

• Position
• Float
• Margin
• Padding
• Position
• Top, Left, Right, Bottom
• Display

Mungkin ada beberapa properti lainnya, yaa secara umum seperti yang disebutin di atas lah .

Nah, kali ini Cheyuz mw ngejelasin tentang position pada CSS…
Selain Float, Position juga sangat berperan penting buat layout, terutama layout yang mempunyai banyak embel-embel ga penting (peace ) di dalamnya, misalnya ketika gambar ketika dihover keluar tooltip, gambar berbingkai, membuat taskbar, dan lain-lain…

OK, kita jelasin atu atu ye…

position: static

Position static adalah position default suatu elemen, bisa disebut statis (?) maksudnya dia diam, tata letak normal seperti div biasa, dan pada posisi initop, left, right, dan  bottom tidak mempengaruhi posisi elemen tersebut,  contohnya:

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama {
    width:55px;
    background:gray;
    position:static;
    top:20px;
    left:20px;
}
.kedua{
    width:55px;
    background:red;
    top:100px;
    left:100px;
    clear:both;
}

Penjelasan:

position: relative

Nah, ini dia position yang sering digunakan pada seorang web designer… kalo pake position ini, kamu bisa memanfaatkan left dan top buat ngubah posisi tersebut.. tetapi perlu diingat, sifat position:relative ini adalah dia bakal pindah kalo kita beri nilai top atau left, tetapi relative terhadap dirinya sendiri… (pusing?) kasi contoh daah…

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama{
    width:55px;
    background:gray;
    position:static;
    top:10px;
    left:15px;
    position:relative;
}
.kedua{
    position:relative;
    width:55px;
    background:red;
    top:15px;
    left:5px;
    clear:both;
}

Penjelasan

position: absolute

Kalo kita menggunakan position ini, kita bisa mengatur left, top, right, dan bottom sesuai dengan parent yang mempunyai position relative… jadi elemen yang pake position absolute ini bisa diatur posisinya tergantung parent maupun screen browser.. Contoh CSSnya sperti brikut:

#wrap{
    width:150px;
    background:black;
    height:200px;
    position:relative;
}
.ketiga {
    position:absolute;
    background:red;
    width:100px;
    bottom:0px;
    left:15px;
}

position: absolute (terhadap layar)

Kalo kita pake position absolute terhadap layar, maka parent dari div ini jangan memakai position yang “relative”, tetapi statis.. supaya tidak absolute terhadap parent, tapi terhadap layar… contohnya seperti gambar kotak di sudut kanan atas, coba dilihat, hehe….
CSS nya seperti ini:

.kotak {
    position:absolute;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:50px;
}

Penjelasan

position: fixed

Naah klo yang ini baru beda sama yang lain… yaa sebenernya sama sih.. , lebih mirip ke position:absolute.. sama seperti position absolute yang berdasarkan screen browser, tetapi bedanya, state/letak si kotak bakal tetep berada di posisi screen sebelumnya, walaupun browser discroll… contohnya lihat gambar kotak warna hitam di sebelah kanan, dan contoh lain adalah taskbar di bawah

.kotak_fixed {
    position:fixed;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:250px;
    color:white;
}

Penjelasan

Nah, paling itu aja temen2 pembahasannya…
teori-teori yang lain tentang CSS juga bakal disampein lagi…

Pokoknya sekarang kita fokus ke web developing.. jadi mulai dari CSS, Javascript, PHP, hingga framework pun bakal dibahas di blog ini…

Mudah-mudahan bermanfaat buat kita sebagai web developing…

Kali ini, Cheyuz bakal ngasi tips buat temen2 semua pengguna Code Igniter (CI), berhubung aku sekarang lagi ngulik Framework ini, hehe… yaa sekedar berbagi pengalaman lah..

Perlu dicatat bahwa kalo qta make Framework CI ini, kita bakal ngeliat kalo-kalo ternyata CI itu memakai tulisan index.php di URLnya, baru diikuti dengan /controller/action… nah ini merepotkan bagi kita yang suka dengan Pretty URL (URL yang cantik, indah, enak untuk dibaca )..

kalo misalnya ada controller Berita, kemudian nama actionnya add, misal nama situsnya http://www.cheyuz.com maka di URL harus seperti ini:

http://www.cheyuz.com/index.php/berita/add

Nah, biar URL itu lebih enak buat dibaca, mending kita hilangkan index.php nya… jadi seperti ini:

http://www.cheyuz.com/berita/add

Caranya sangat sederhana,, bagi pecinta maupun pengembang framework mungkin udah ga asing lagi memakai cara ini, cara yang dipake untuk ngerewrite URL, kita memakai 1 file yang bernama .htaccess.

Kita buat file .htaccess di notepad:

RewriteEngine on
RewriteRule ^$ index.php [L]
RewriteCond $1 !^(index.php)
RewriteRule ^(.*)$ index.php/$1 [L]

kemudian save file tersebut di webroot/base_url kamu…
sekarang kamu bisa memanggil halaman dengan URL seperti ini:

http://www.cheyuz.com/berita/add

yang pada hakikatnya sama dengan:

http://www.cheyuz.com/index.php/berita/add

TAPII,,,,, ada suatu masalah…
sama seperti waktu kemaren aku nge-rombak http://www.cheyuz.com..

Kan aku nge-rombak situs Cheyuz.com dari asalnya yang ga pake framework yang kini udah pake CI.. Nah pas kemaren itu aku ngupload hasil rombakanku ke hosting.. nah tau-tau pas diupload, ternyata aneh, kenapa ketika aku ketik:

http://www.cheyuz.com/diary

ato yang lainnya ternyata ga bisa kebuka, yang keluar tampilan home terus…
Tetapi kalo URL nya seperti ini bisa…

http://www.cheyuz.com/index.php/diary

Nah, kalo temen2 juga ngalamin hal yang sama, ternyata masalahnya ada config CI sendiri, yaitu dengan memodifikasi config.php:

$config['uri_protocol'] = "AUTO";

Diganti dengan

$config['uri_protocol'] = "REQUEST_URI";

Cuman itu aja masalahnya, gila kemaren aku bingung kok kenapa bisa gini,, eh taunya cuman setting itu aja, hahaha

Mudah2an bermanfaat..

Kamu tau form?

Form adalah salah satu tag HTML yang dipakai untuk penempatan input-input yang akan diisikan oleh user untuk dieksekusi selanjutnya. Nah, bagi seorang web developer istilah form pasti udah ga asing lagi, soalnya semua data yang akan dimasukkan ke dalam database, pasti bakal via form ini.

Tapi, apakah kalian tau gimana cara bikin form yang efektif? maksud efektif di sini adalah supaya kita gak kesulitan pas membuat style buat form itu.

Nah, seperti yg udah diketahui, tag form adalah sebagai berikut:

<form action="register.php" method="post">
  ...
</form>

Buat sebagian orang, mengatur form supaya rapi, tata letaknya teratur, mereka menggunakan table sebagai tempat nempatin elemen input yang ada di form, contohnya kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" /></td>
        </tr>
    </table>
</form>

Hmm… sebenernya cara di atas itu tidak salah sih, cuman menurutku cara kayak gitu tuh sangat merepotkan, soalnya kita harus bikin table sebagai pemampang elemen inputnya, dan itu sangat cape menurutku… banyak alasan kalo cara itu ga efektif, contoh lain adalah di saat di mana kita bikin suatu fungsi maupun class (bukan CSS) di PHP dan kita akan merender setiap elemen form secara independen, maksudnya berdiri sendiri, tanpa bantuan tag table sebelum elemen dan di akhir elemen input…

Lagian kan semua tag [input] di html ada berbagai macam, ada buat text, textarea, submit, combobox, dsb… nah berarti kalo kita bikin style CSSnya kita harus memberikan class di setiap elemen, soalnya ga bisa klo kita membuat style untuk semua tag [input], jadi setiap elemen [input] harus dikasih class…

Sekarang kita langsung coba mengimplementasikan struktur html kayak di atas klo qta bikin style buat CSSnya… gimana caranya? pasti bakal kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap" class="textarea"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" class="button" /></td>
        </tr>
    </table>
</form>

Ada cara yang lebih efektif, dan berdiri sendiri, maksudnya kita bakal bikin setiap baris input tanpa menggunakan awalan [table] dan akhiran [/table] dan tidak memberikan class di setiap elemen, juga ga ngeborosin tag (kayak tr td)… di sini kita akan menggunakan div… menurut Cheyuz ini yang paling efektif… (gak tau menurut kalian )

<form action="register.php" method="post">
    <div class="input text">
        <label for="nama_lengkap">Nama Lengkap</label>
        <input id="nama_lengkap" type="text" />
    </div>
    <div class="input text">
        <label for="nama_panggilan">Nama Panggilan</label>
        <input id="nama_panggilan" type="text" />
    </div>
    <div class="input textarea">
        <label for="nama_panggilan">Nama Panggilan</label>
        <textarea id="nama_panggilan"></textarea>
    </div>
    <div class="input submit">
        <input type="submit" value="kirim" />
    </div>
</form>

Sekarang, ayo kita bandingkan hasil keduanya kalo ga pake CSS:

Memakai Form

Memakai Div (efektif)

Gimana gimana??? loh loh kok tampilan form yang kedua (memakai div) malah ancur???

Hehe… tenang, itu adalah murni sebelum dikasi css… sekarang coba kita lihat klo udah pake css…

Ini style yang pake Table

Ini style yang pake Div

Gimana? hasilnya sama kan? hmm sebenernya sama… cuman di sini kita bakal ngeliat pengaruhnya kalo kita bikin pake framework misalnya… dan hasil dari render elemen inputan cakephp juga kayak gini lho… satu elemen input dengan ngerender 1 inputan… kalo contoh hasil render kayak gini lebih efektif:

        <div class="input text">
            <label for="nama_lengkap">Nama Lengkap</label>
            <input id="nama_lengkap" type="text" />
        </div>

dibanding yang ini:

            <tr>
                <td><label for="nama_lengkap">Nama Lengkap</label></td>
                <td><input id="nama_lengkap" type="text" class="textfield" /></td>
            </tr>

Soalnya untuk yang pake table harus diawali dengan [table] dan diakhiri dengan [/table]..

Oia lupa, ni CSS buat form yang tadi di atas, silakan dipelajari, dan lihat mudah yang mana :

CSS untuk form table

        form{
            background: #eee;
            padding: 5px;
        }
        form table{
            border-spacing: 0;
        }
        form tr{
            background: #dfebff;
            padding: 5px;
        }
        form tr:hover{
            background: #eef4ff;
        }
        form td{
            padding: 5px;
        }
        form label{
            font-weight: 900;
            cursor: pointer;
        }
        form .textfield{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form .textfield:hover{
            border: 1px solid #000;
        }
        form .textfield:focus{
            border: 1px solid #f00;
        }
        form .button{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        form .button:hover{
            background: #b7efaa;
        }

CSS untuk form div

        form{
            background: #eee;
            padding: 5px;
        }
        form div.input{
            background: #dfebff;
            padding: 5px;
        }
        form div.input:hover{
            background: #eef4ff;
        }
        form div.text input:hover{
            border: 1px solid #000;
        }
        form div.text input:focus{
            border: 1px solid #f00;
        }
        form div.input label{
            float: left;
            width: 120px;
            font-weight: 900;
            cursor: pointer;
        }
        form div.input label:hover{
            color: #f00;
        }
        form div.text input{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form div.submit input{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
            margin-left: 125px;
        }
        form div.submit input:hover{
            background: #b7efaa;
        }