Harian Cheyuz » Tutorial http://hariancheyuz.chevonest.com Konten tentang perjalanan kehidupan seorang Cheyuz Sat, 03 Jul 2010 00:37:39 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Tutorial CodeIgniter Dasar Part III – Page Template http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-iii-page-template http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-iii-page-template#comments Fri, 21 May 2010 14:56:03 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=799

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.

Contoh ini belum menggunakan CSS, pembahasan tentang CSS akan dijelaskan pada tutorial selanjutnya

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…

Tutorial sebelumnya:

]]> http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-iii-page-template/feed 13 Tutorial CodeIgniter Dasar Part II – CRUD chapter 2 http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-2 http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-2#comments Wed, 12 May 2010 16:03:16 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=768

OK, malam ini kita lanjutkan tutorial kemarin… maaf kalo agak telat, soalnya koneksi Cheyuz lagi bermasalah dan bentrok ngerjain tugas kuliah juga.. hehe…

Pada tutorial kemarin, kita udah bisa menambahkan data ke dalam database… (Create) dan menampilkannya (semua data)…. Sekarang, kita akan membuat aksi lainnya, yaitu update/ubah dan delete/hapus pada setiap data di dalam sebuah table…

Kita lanjutkan tutorial kemarin (Tutorial CodeIgniter Dasar Part II – CRUD Chapter 1) yang waktu itu kita udah membuat table mahasiswa dan membuat fungsi untuk menambahkan datanya.. sekarang mari kita buat fungsi/aksi lainnya, yaitu update dan delete…

Kita review hasil kerjaan dari tutorial kemarin…

<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>

Sebelumnya kita tambahkan 2 buah anchor (link) untuk membuat hyperlink menuju ke masing2 fungsi tersebut,.. yaitu anchor untuk edit dan delete.. (catatan: edit = update).
Buatlah dua buah anchor dengan bentuk kode seperti ini di kolom paling kanan tabel:

<?php echo anchor('data_mahasiswa/edit/'.$m->id, 'Ubah') . ' | ' . anchor('data_mahasiswa/delete/'.$m->id, 'Hapus'); ?>

jadi bentuknya seperti 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><?php echo anchor('data_mahasiswa/edit/'.$m->id, 'Ubah') . ' | ' . anchor('data_mahasiswa/delete/'.$m->id, 'Hapus'); ?></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

previewnya:

Data Mahasiswa

No NIM Nama Alamat Aksi
1 0700335 Cecep Yusuf Cipanas, Cianjur edit | delete
2 0800113 Fitri Yuniar Jakarta edit | delete

Tambah data

1. Menghapus Data

Kemudian setelah itu, kita buat sebuah function di dalam model mahasiswa_model.php di folder /system/application/models:

<?php
...
    function delete($id){
        $this->db->delete('mahasiswa', array('id'=>$id));
    }
...
?>

Kemudian, di controller data_mahasiswa.php di /system/application/controllers tambahkan function berikut:

...
    function delete($id){
        $this->mahasiswa_model->delete($id);
        redirect('data_mahasiswa');
    }
...

fungsi di atas memanggil fungsi dari objek Mahasiswa_model yaitu delete, yang akan menghapus data dari table mahasiswa yang id nya adalah parameter dari function tersebut ($id)… Kemudian setelah itu baru diredirect/dialihkan ke tampilan index dari controller data_mahasiswa.

2. Mengubah Data

Nah, untuk mengubah data.. kita harus tahu fungsi untuk mengubah database dari Active Record yang disediakan oleh CI.. yaitu $this->db->update($nama_table, $data)…

Sekarang, kita tambahkan function update() dan select($id) untuk menyeleksi SATU data yang akan dipilih berdasarkan id-nya… dibuat di model mahasiswa.php di /system/application/models,,,

...
    function update($id){
        $this->db->where('id',$id)->update('mahasiswa', $_POST);
    }
    function select($id){
        return $this->db->get_where('mahasiswa', array('id'=>$id))->row();
    }
...

Di situ ada fungsi update(), yang equivalen dengan query update from mahasiswa where id=$id set $_POST. Dan fungsi select yang nantinya akan kita gunakan ketika nilai dari data akan dimasukkan ke dalam sebuah form (untuk diedit) sehingga kita menggunakan row() yang berfungsi meretrieve data menjadi objek, tetapi hanya SATU BARIS DATA... (segitunya sampe dipertebel hehe :P )

Setelah kita membuat modelnya… kemudian kita tambahkan function edit() di Controller data_mahasiswa.php di /system/application/controller/:

...
    function edit($id){
        $data['m'] = $this->mahasiswa_model->select($id);
        $this->load->view('edit_view',$data);
    }
...

Di situ kita buat sebuah fungsi edit di controller data_mahasiswa.php dengan parameter $id.. karena kita akan mengubah data pada setiap data yang ada dengan mengambil id-nya… dan dipanggillah fungsi update() dari model mahasiswa… Tetapi sebelumnya kita harus ngambil sebuah data mahasiswa tertentu berdasarkan $id yang ada untuk dimasukkan ke dalam form,, sehingga nantinya bisa diubah… makanya kita membuat fungsi select()

Ini adalah view yang harus ada di /system/application/views dengan nama file edit_view.php (yang udah kita masukkan ke dalam fungsi $this->load->view() di controller.

Ini adalah isi dari view-nya:

<h1>Ubah data</h1>
<form action="" method="post">
    <table>
        <tr>
            <th>NIM</th>
            <td><input name="nim" value="<?php echo $m->nim ?>" /></td>
        </tr>
        <tr>
            <th>Nama</th>
            <td><input name="nama" value="<?php echo $m->nama ?>" /></td>
        </tr>
        <tr>
            <th>Alamat</th>
            <td><textarea name="alamat"><?php echo $m->alamat ?></textarea></td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" value="ubah" /></td>
        </tr>
    </table>
</form>

Jadi, ketika view tersebut diload, maka form akan langsung terisi dengan data yang kita panggil dengan $id yang ada di URL… (yang merupakan parameter)

Kemudian, di controller kita tambahkan code berikut:

...
    function edit($id) {
        if($_POST==NULL) {
            $data['m'] = $this->mahasiswa_model->select($id);
            $this->load->view('edit_view',$data);
        }else {
            $this->mahasiswa_model->update($id);
            redirect('data_mahasiswa');
        }
    }
...

Kita lihat, ada fungsi if else… buat apa tuh??
itu buat ngecek apakah data udah dikirim atau belum (NULL)? Nah, klo udah dikirim berarti bakal diupdate… kalo belum maka program akan mengambil data (select) dan dimasukkan ke dalam form…

Kemudian terdapat fungsi redirect (sama seperti add), ketika data sudah diubah, maka halaman langsung dialihkan ke dalam action yang ada di prameter redirect tersebut….

Nah, sejauh ini kita sudah membuat aplikasi CRUD lengkap… Create, Read, Update, dan Delete….

Silakan cek program yang kita bikin sejauh ini dengan mengetikkan alamat url : http://localhost/webku/data_mahasiswa

Mudah-mudahan ini bisa ngebantu kita dalam suatu kasus tertentu di mana misalnya tugas maupun kerjaan meminta kita dibuatkan programnya dengan menggunakan CI,,,

Nanti kita lanjut tutorialnya di Part 3, tentang LAYOUTING dan TEMPLATING di Code Igniter….
Coming Soon ya…

Kalo ada pertanyaan, silakan komentar di bawah ini, insya Allah dibalas :)

]]> http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-2/feed 9 Tutorial CodeIgniter Dasar Part II – CRUD chapter 1 http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-1 http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-1#comments Mon, 10 May 2010 13:30:04 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=716

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 :P ), 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…

Diharapkan kamu yang mengikuti tutorial ini udah pernah mengikuti tutorial sebelumnya.. kenapa? karena konfigurasinya kita menggunakan konfigurasi di tutorial dasar part I, bisa klik di sini
Seperti pada tutorial dasar part I, webroot kita ini diasumsikan bernama “webku”, dan konfigurasinya diasumsikan sama, oleh karena itu silahkan baca tutorial dasar part I terlebih dahulu.

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:

Data Mahasiswa

No NIM Nama Alamat Aksi
1 0700335 Cecep Yusuf Cipanas, Cianjur edit | delete | detail
2 0800113 Fitri Yuniar Jakarta edit | delete | detail

Tambah data

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');
...
?>
anchor() adalah function helper yang udah tersedia di CI, untuk menggantikan tag ‘a’

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>
Perlu diketahui bahwa cara di atas belum menggunakan library ‘form’ bawaan dari CI.. kita memakai cara manual dulu, sebelum nanti kita bahas penggunaan helper di CI di tutorial selanjutnya…

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.. :D
tapi gpp, demi kalian :)

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

SALAM WEB DEVELOPER!

]]> http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-ii-crud-chapter-1/feed 22 Tutorial CodeIgniter Dasar Part I http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-i http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-i#comments Mon, 26 Apr 2010 05:51:37 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=676

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:

Ini adalah aplikasi sederhana

No Nama Email Situs Komentar
1 Cecep Yusuf cheyuz@yahoo.co.id http://www.cheyuz.com Ini adalah komentar pertama
2 Deddy Mizwar deddy@mizwar.com http://www.cheyuz.com Ini adalah komentar kedua

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

]]> http://hariancheyuz.chevonest.com/_other/tutorial-codeigniter-dasar-part-i/feed 19 Membuat Shadow Box di CSS Tanpa Image! http://hariancheyuz.chevonest.com/_other/membuat-bayangan-box-di-css-tanpa-image http://hariancheyuz.chevonest.com/_other/membuat-bayangan-box-di-css-tanpa-image#comments Thu, 25 Feb 2010 16:41:50 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=625

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…

ini adalah div dengan class = “shadow”

.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 :P )

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… :)

ini adalah div dengan class = “shadow2″

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:

Ini adalah properti2 yang berperan penting di sini:

  • display: table, supaya si container itu selalu mempunyai lebar sesuai dengan div di atasnya
  • margin: -3px 3px 3px -3px;, supaya si div yang bertuliskan tersebut digeser ke sebelah kiri -3px, atas 3px, kanan 3px, dan kiri -3px.. sangat berfungsi buat kita nentuin positioning juga…

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…

Untuk inspirasi desain dengan CSS, boleh liat situsku di Cheyuz’s Site
]]> http://hariancheyuz.chevonest.com/_other/membuat-bayangan-box-di-css-tanpa-image/feed 4 CodeIgniter VS CakePHP http://hariancheyuz.chevonest.com/_other/codeigniter-vs-cakephp http://hariancheyuz.chevonest.com/_other/codeigniter-vs-cakephp#comments Tue, 23 Feb 2010 15:53:21 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=620

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 -

]]> http://hariancheyuz.chevonest.com/_other/codeigniter-vs-cakephp/feed 22 Pemahaman tentang Position pada CSS http://hariancheyuz.chevonest.com/_other/pemahaman-tentang-position-pada-css http://hariancheyuz.chevonest.com/_other/pemahaman-tentang-position-pada-css#comments Thu, 18 Feb 2010 01:17:38 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=598

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 :P .

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 :P ) 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;
}
Ini adalah div pertama
Ini adalah div kedua

Penjelasan:

Jadi, di situ terlihat ada 3 elemen div, yaitu wrapper, div pertama dan div kedua… di situ tidak ada posisi yang terdefinisi terlebih dahulu. Div pertama dan kedua memakai position static. Top dan Left di div kedua tidak berpengaruh terhadap posisi elemen tersebut, karena sifatnya yang statis, dan ngebentuk pola vertical (maksudnya garis baru setelah div sebelumnya) secara normal, kalo pengen nge-horizontal, berikan property float dengan nilai left…

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;
}
Ini adalah div pertama
Ini adalah div kedua

Penjelasan

Pada contoh di atas, div pertama telah digeser sejauh 10px dari atas (top) dan 15px dari kiri (left). Div kedua tergeser 15px dari atas (top) dan 5px dari kiri (left). Jadi, elemen bakal tergeser kalo dia punya boundary (div pembungkus, wrapper), kita ga bisa menggeser elemen tanpa boundary,,gimana caranya supaya kita bisa menggeser div pertama jauh lebih bawah (dengan menaikkan topnya) hingga menembus garis batas wrap? coba ganti nilai top dari div pertama menjadi 100px. Apa yang terjadi? wow ternyata si div kedua juga ikut tergeser! posisi div kedua akan disesuaikan dengan posisi div yang pertama, terbatas… untuk kasus sperti ini, gunakan absolute.

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;
}
ini adalah div 3 dengan position absolute

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;
}
ini contoh CSS yang absolute terhadap screen

Penjelasan

Kotak yang ada di kanan atas adalah kotak yang sudah diberi position absolute (tidak relative terhadap parent) yang relative terhadap screen/layar browser… kalo kita ngeset bottom = 0 dan menghapus top = 50px, maka letak si kotak bakal pindah ke bawah, jadi left, right, top, dan bottom berpengaruh untuk posisi berdasarkan screen

position: fixed

Naah klo yang ini baru beda sama yang lain… yaa sebenernya sama sih.. :P , 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 :D 

.kotak_fixed {
    position:fixed;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:250px;
    color:white;
}
Ini adalah contoh kotak yang diberi position:fixed

Penjelasan

jadi div yang diberi class kotak_fixed itu diberi position fixed, jadi left, right, bottom, dan top nya mempengaruhi posisi berdasarkan layar browser, dan posisinya selalu tetap, walaupun halaman discroll ke bawah…

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…

]]> http://hariancheyuz.chevonest.com/_other/pemahaman-tentang-position-pada-css/feed 7 Menghilangkan index.php di Code Igniter untuk di Berbagai Server http://hariancheyuz.chevonest.com/_other/menghilangkan-index-php-di-code-igniter-untuk-di-berbagai-server http://hariancheyuz.chevonest.com/_other/menghilangkan-index-php-di-code-igniter-untuk-di-berbagai-server#comments Sun, 14 Feb 2010 09:40:49 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=584

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 :P )..

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 :D

Mudah2an bermanfaat.. :)

]]> http://hariancheyuz.chevonest.com/_other/menghilangkan-index-php-di-code-igniter-untuk-di-berbagai-server/feed 11 Tips membuat Form HTML yang Rapi dan Efektif http://hariancheyuz.chevonest.com/_other/tips-membuat-form-html-yang-rapi-dan-efektif http://hariancheyuz.chevonest.com/_other/tips-membuat-form-html-yang-rapi-dan-efektif#comments Fri, 12 Feb 2010 15:53:40 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=550

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 :P )

<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

Nama Lengkap
Nama Panggilan
Komentar

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;
        }
]]> http://hariancheyuz.chevonest.com/_other/tips-membuat-form-html-yang-rapi-dan-efektif/feed 3 Membuat Toggle Button dengan JQuery http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery#comments Wed, 16 Dec 2009 16:57:34 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=500

Pada postingan yang lalu, kita udah mengenal JQuery dan mengetahui cara bikin fade in dan fade out pada suatu halaman web dengan menggunakan JQuery..

Jika waktu itu kita menggunakan 2 tombol, yaitu tombol tampilkan dan sembunyikan, maka kali ini kita akan menggunakan tombol toggle, yaitu tombol yang berfungsi untuk menangani 2 fungsi tertentu atau lebih. Dengan menggunakan toggle, kasus yang kemarin bisa ‘dihandle’ dengan menggunakan satu tombol toggle aja…

Jangan lupa untuk memanggil terlebih dahulu script Jquery di bagian header, bisa dilihat di link ini: Mengenal JQuery

Pertama-tama, kita bikin dulu sebuah button dengan class tombol (sebenernya ada 2 buah, tetapi tombol yang satu lagi ga keliatan ato hidden), kode html-nya kayak gini:

<body>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Seperti yang terlihat di atas, ada 2 tombol… dan mempunyai class yang sama, jadi kedua tombol itu akan dijadikan sebuah tombol toggle, yang artinya klo tombol yang pertama diklik, maka tombol yang kedua akan tampil, sedangkan tombol yang pertama akan hilang (hidden), dan begitu sebaliknya.. itu konsep sederhana toggle..

Dan perlu diperhatikan, tombol lain harus diberi style style untuk display yang bernilai ‘none’ yang artinya tidak bisa terlihat..

OK, untuk membuktikan bahwa tombol tersebut bisa dijadikan toggle, tambahkan script berikut sebelum elemen button. Seperti ini:

<body>
    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".tombol").toggle();
        });
    });
    </script>
 
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Jika tombol yang pertama diklik, maka dia akan hidden, sedangkan tombol yang kedua akan muncul, dan sebaliknya.. bila tombol yang kedua muncul dan diklik, maka tombol satu akan muncul, tombol 2 akan hidden… dan seterusnya.

Dan perlu diingat, klo kita ingin 2 elemen dijadikan 1 toggle button, maka yang berperan di jquery/yg dapat dimanipulasi jquery adalah class, bukan id. Jadi kita memberi class ‘tombol’ di masing-masing button. Dan perlu diperhatikan juga, jangan memakai this di objek yang merupakan isi dari fungsi jquery, misal seperti berikut:

    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(this).toggle();
        });
    });
    </script>

Kalo temen2 bikin kayak script tersebut, bisa sih bisa cuman ngga ngerubah elemen menjadi tombol yang kedua, yang ada malah jadi hilang keduanya…

Nah, ceritanya si tombol tersebut akan menghandle sebuah foto menjadi foto lain secara bergantian ketika tombol tersebut diklik..
kita tambahkan sebuah gambar di bawah tombol.

<img class="gambar" src="foto.jpg" />

Karena gambar juga akan tampil bergantian dengan gambar lain kalo diklik, maka tambah lagi 1 gambar di bawah foto.jpg.

<img class="gambar" src="foto.jpg" />
<img class="gambar" src="foto2.jpg" style="display:none" />

Tambahkan juga script jquery yang tadi menjadi seperti ini:

<script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".gambar").toggle('fast');
            $(".tombol").toggle();
        });
    });
</script>

Di situ terlihat ada parameter di fungsi toggle yaitu bernilai ‘fast’, yang berarti akan di-toggle dengan ditambahkan animasi yang cepat, jika diberi nilai ’slow’, maka animasi akan bergerak lambat.

Jadi, kode html semuanya kira2 seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
    <script>
        $().ready(function(){
            $(".tombol").click(function(){
                $(".gambar").toggle('fast');
                $(".tombol").toggle();
            });
        });
    </script>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
    <img class="gambar" src="foto.jpg" />
    <img class="gambar" src="foto2.jpg" style="display: none" />
</body>

Jadi, ketika nanti muncul sebuah button dengan label “foto 2″ dan foto yang muncul adalah foto pertama, maka ketika diklik button tersebut, maka label button akan berubah menjadi “foto 1″ dan foto akan menjadi foto yang kedua, bisa diklik berulang-ulang.
untuk DEMO, silakan klik DI SINI!

]]> http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery/feed 4