Tutorial Panada Framework Chapter 3 : Bekerja dengan Form SamidCorner(Tegal) Pembaca yang budiman. Masih dirangkain tutorial berseri Panada Framework, dan pada kesempatan kali ini saya akan membahas mengenai bagaimana bekerja dengan Form alias gimana caranya pake form di Panada Framework. Sekaligus kita akan belajar bersama mengenai validasi Form dan terakhir kita bikin sebuah kalkulator sederhana menggunakan Panada Framework. Oke, gak perlu lama-lama mari kita simak sajian kali ini dan selamat menikmati Bekerja dengan Form di Panada Framework Pada kebanyakan aplikasi form pasti sangat bahkan amat sangat dibutuhkan. Apa pasal? Karena biasanya untuk mengelola data user / pengguna aplikasi maupun website akan menginputkan data melalui form. Berikut akan saya kasih contohnya. Pertama, buat controller baru misal kita kasih nama karyawan.php berikut kodenya : <?php namespace Controllers; use Resources, Models; class Karyawan extends Resources\Controller{ public function construct(){ parent:: construct(); $this->input = new Resources\Request; public function index(){ $data['judul'] = 'Input Data Karyawan'; $this->output('form_karyawan', $data); public function proses(){ $nama = $this->input->post('nama', $alamat = $this->input->post('alamat', $gaji = $this->input->post('gaji', $data['judul'] = 'Berhasill!!!'; $data['nama'] = $nama; $data['alamat'] = $alamat; $data['gaji'] = $gaji; $this->output('sukses', $data);?> 1
Dan setelah kita membuat file controller selanjutnya kita membuat file view yang berjumlah 2 file. Pertama untuk membuat form input data dan kedua untuk menampilkan pesan sukses ketika data berhasil diproses. Oke, buat file yang pertama dulu yaitu form_karyawan.php ini sesuai dengan $this- >output( form_karyawan,$data) yang ada di method index(). Berikut kodenya: <!DOCTYPE HTML> <html> <head> <title><?php echo $judul;?></title> <link rel="stylesheet" type="text/css" href="<?php echo $this->uri- >baseuri;?>/assets/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="col-md-12"> <form class="form-horizontal" action="<?php echo $this->uri- >baseuri;?>index.php/karyawan/proses" method="post"> <fieldset> <legend><?php echo $judul;?></legend> <label for="inputnama" class="col-lg-2 control-label">nama Karyawan</label> <div class="col-lg-8"> <input type="text" class="form-control" id="inputnama" name="nama" placeholder="masukkan Nama" required autofocus autocomplete="off"> <label for="alamat" class="col-lg-2 control-label">alamat Lengkap</label> <div class="col-lg-10"> <textarea class="form-control" rows="3" id="alamat" name="alamat" placeholder="masukkan Alamat" required></textarea> <label for="gapok" class="col-lg-2 control-label">gaji Pokok</label> <div class="col-lg-5"> <input type="text" class="form-control" id="gapok" name="gaji" placeholder="masukkan Gaji" required> <div class="col-lg-10 col-lg-offset-2"> <button type="submit" class="btn btn-success">simpan Data</button> <button type="reset" class="btn btn-primary">ulangi</button> </fieldset> </form> </body> </html> Dan beriktu adalah file yang kedua untuk menampilkan pesan sukses, berikut kodenya : 2
<!DOCTYPE HTML> <html> <head> <title><?php echo $judul;?></title> <link rel="stylesheet" type="text/css" href="<?php echo $this->uri- >baseuri;?>/assets/css/bootstrap.min.css"> </head> <body> <div class="alert alert-info"> <p>selamat Input data berhasil</p> <p>berikut data karyawan :</p> <ul> <li>nama Lengkap : <?php echo $nama;?></li> <li>alamat Lengkap : <?php echo $alamat;?></li> <li>gaji : <?php echo $gaji;?></li> </ul> <p><a href="<?php echo $this->uri->baseuri;?>index.php/karyawan" class="btn btn-danger">kembali</a></p> </body> </html> Nah kalo sudah selesai membuat controller dan view sekarang saatnya kita akan menampilkannya di browser. Buka browsernya dan ketikkan http://localhost/project/app/index.php/karyawan. Dan jika benar maka akan mendapati penampakkan berikut : Gambar 1. Form Input Karyawan Selanjutnya ketika proses data sukses maka akan nampak seperti ini : Gambar 2. Input sukses 3
Pencerahannya Sob Oke, berikut adalah pencerahan alias saya akan memberikan penjelasan mengenai kode yang sudah kita buat sebelumnya. Kita awali dari controller. Perhatikan pada bagian constructor, Gambar 3. Akses Resource Request Pada bagian yang saya beri lingkaran merah itu berfungsi untuk melakukan sanitasi data, pada umumnya atau di PHP native kita sering menjumpai ketika akan memproses sebuah field data pada form kita menggunakan $_POST[ fieldnya ]; namun agar lebih terkontrol dan bersih Panada framework sudah menyediakan sebuah resource untuk melakukannya. Yaitu dengan nama Request (untuk lebih jelasnya anda bisa lihat di dokumentasinya yang cukup lengkap dan mudah dipahami). Nah, nantinya akan digunakan pada method proses dimana kita akan melakukan pengolahan field pada form dari file form_karyawan.php seperti pada gambar berikut : Gambar 4. Penggunaan Request Kode yang berada di lingkaran merah adalah bagian dari proses field yang sudah kita buat. Jadi, kita tidak perlu lagi menggunakan cara-cara native dan tentunya jauh lebih bersih dan terkontrol. Berikutnya kita beranjak pada file view dimana ada sebuah kode $this->uri->baseuri; perhatikan pada gambar berikut : Gambar 5. Pemanggilan Otomatis lokasi project 4
Perhatikan pada bagian yang dilingkari merah, fungsi $this->uri->baseuri; berfungsi untuk mendeklarasikan letak url project kita. Jadi, ini untuk mempermudah kita dalam pemanggilan lokasi project kita. Nah, daripada kita tulis http://domain/project/app/ tentunya bikin capek bukan? Tetapi Panada Framework telah menyediakan sebuah fitur untuk pemanggilan otomatis dari lokasi project kita. Oke demikian tutorial mengenai bekerja dengan form di Panada Framework. Dan chapter 3 ini berlum selesai karena Insya Allah akan saya lanjut dengan validasi form. Tunggu serial selanjutnya. Dan semoga bermanfaat. 5