Tampilkan postingan dengan label Input. Tampilkan semua postingan
Tampilkan postingan dengan label Input. Tampilkan semua postingan

Selasa, 17 Juli 2012

Membuat Form Dengan Teknik MVC

Di dalam aplikasi dengan menggunakan MVC, maka kita dianjurkan untuk dapat memilah bagian-bagian dari program yang dibuat menjadi setidaknya 3 file, controller, view, dan model. Jangan sampai semua kode hanya ada di dalam controller, jika terjadi demikian, maka apa bedanya program yang dihasilkan dengan framework dengan yang tidak?

Kita akan membuat secara bertahap, memilah contoh pembuatan form pada tulisan sebelumnya dengan menggunakan model dan view.

Contoh membuat form komentar yang menggunakan hanya satu file controller saja, ditunjukkan seperti berikut:


<?php
class C_formkomentar extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper("form");
}
function index(){
$aksi="simpankomentar";
$namapengunjung=array(
 "name"=>"namapengunjung"
 ,"size"=>"50"
 ,"maxlength"=>"100"
);
$email=array(
 "name"=>"email"
 ,"size"=>"50"
 ,"maxlength"=>"100"
);
$komentar=array(
 "name"=>"komentar"
 ,"rows"=>"5"
 ,"cols"=>"40"
);
echo form_open($aksi);
echo form_label("Nama : ").form_input($namapengunjung);
echo br();
echo form_label("Email : ").form_input($email);
echo br();
echo form_label("Komentar : ").form_textarea($komentar);
echo br();
echo form_close();
}
}
?>


Program untuk menampilkan form di atas, menggunakan satu file saja, yaitu controller. Suatu controller seharusnya tidak panjang programnya seperti di atas, karena kita belum menggunakan teknik pemrograman dengan MVC.

Kita harus membuat sebuah file model untuk mendefinisikan elemen form dan sebuah view untuk menampilkannya, menjadi seperti berikut:

Isi file model m_formkomentar.php:


<?php
class M_formkomentar extends CI_Model{
function formelemen(){
$aksi="simpankomentar";
$namapengunjung=array(
 "name"=>"namapengunjung"
 ,"size"=>"50"
 ,"maxlength"=>"100"
);
$email=array(
 "name"=>"email"
 ,"size"=>"50"
 ,"maxlength"=>"100"
);
$komentar=array(
 "name"=>"komentar"
 ,"rows"=>"5"
 ,"cols"=>"40"
);
return array(
"aksi"=>$aksi
,"namapengunjung"=>$namapengunjung
,"email"=>$email
,"komentar"=>$komentar
)
}
}
?>


Isi file view v_formkomentar.php:


<?php
echo form_open($aksi);
echo form_label("Nama : ").form_input($namapengunjung);
echo br();
echo form_label("Email : ").form_input($email);
echo br();
echo form_label("Komentar : ").form_textarea($komentar);
echo br();
echo form_close();
?>


Isi file view v_formkomentar ini hanya merupakan penyederhanaan contoh, kita harus memberikan kode HTML tambahan agar dapat ditampilkan dengan lebih baik.

Setelah kita membuat model dan viewnya, maka kita harus memperbaiki file controllernya menjadi seperti berikut:


Isi file controller c_formkomentar.php:


<?php
class C_formkomentar extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper();
}
function index(){
$this->load->model("m_formkomentar");
$data=$this->m_formkomentar->formelemen();
$this->load->view("v_formkomentar",$data);
}
}
?>


Program controller yang dibuat menjadi lebih sederhana dan ringkas. Dampaknya adalah kita bisa mendefinisikan elemen form tambahan di dalam file model, tanpa perlu khawatir mengubah logika program, dan mengubah tampilannya dengan mengubah file view.

Senin, 16 Juli 2012

Menampilkan Pesan Hasil Validasi Jika Ada Error

Proses validasi dengan menggunakan librari class form_validation, dengan menjalankan fungsi (method) run(), akan menghasilkan true atau false. Berdasarkan nilai ini kita dapat mengetahui apakah proses validasi telah berhasil atau tidak.

Tetapi tentu saja, kita tidak ingin sekedar tahu, apakah validasi berhasil atau tidak, tetapi juga ingin tahu input mana saja yang tidak sesuai dengan rule yang ditetapkan pada saat validasi. Hasil dari validasi yang dilakukan dengan menggunakan librari class form_validation dari CI, dapat diakses dengan menggunakan fungsi validation_errors().

<?php echo validation_errors(); ?>


Harus diletakkan pada awal dari form untuk mendapatkan input.
Jika pertama kali form ditampilkan, maka hasil dari validation_errors() adalah string kosong.


Jika form dipanggil setelah proses validasi, maka hasilnya bisa berupa pesan kesalahan, apabila ada nilai masukan yang tidak sesuai dengan rule validasinya.

CI menyediakan juga fungsi untuk mendapatkan hasil validasi untuk setiap elemen yang divalidasi, dengan menggunakan fungsi form_error('namaelemen');

Kita dapat memberikan perintah berikut:


<?php echo form_error('namaelemen'); ?>


Pada baris sebelum input elemen tersebut atau sesudahnya.


Minggu, 15 Juli 2012

Validasi Data Dengan CI


Validasi data dengan menggunakan CI dapat dilakukan dengan menggunakan librari class validation.

Pemuatan librari harus dilakukan terlebih dahulu, agar validasi dapat dilakukan. Berikut adalah pemuatan librari untuk validasi:

$this->load->library('form_validation');

Validasi yang disediakan oleh CI:

  • required, memastikan bahwa input diisi
  • confirmation
  • email, memastikan alamat email dimasukkan dengan benar
  • jumlah digit data, minimum, maksimum, sama dengan n digit suatu input
  • jenis data input: karakter, numerik, integer, desimal
  • valid ip
Selain validasi yang disediakan oleh CI, pengembang aplikasi dapat menggunakan fungsi-fungsi dari PHP atau pun fungsi yang dibuat oleh pemrogram.

Setelah pemuatan dilakukan, maka kita harus mendefinisikan rule untuk validasi dengan menggunakan fungsi set_rules().

Cara mendefinisikan rule:

$this->form_validation->set_rules('namaelemeninput','label/promptelemeninput','rulevalidasi');

Berikut adalah kita ingin memvalidasi input namapegawai.

Form input:

<input type='text' name='namapegawai' value=''>

Controller untuk melakukan validasi:

$this->load->library('form_validation');
$this->form_validation->set_rules('namapegawai','Nama pegawai','required');
if ($this->form_validation->run() == FALSE)
{
$this->load->view('myform');
}
else
{
$this->load->view('formsuccess');
}

Fungsi run() dari form_validation akan melakukan proses pemvalidasian untuk semua field atau input yang didefinisikan dengan menggunakan set_rules().





Senin, 09 Juli 2012

Helper Form : form_dropdown()


Helper form form_dropdown() sangat memudahkan pemrogram web untuk melakukan pengeditan data. Jika kita tidak menggunakan helper ini, maka pemrogram harus menambahkan kode tambahan untuk bisa menampilkan data combobox dengan default pilihannya; jika combobox harus dihasilkan secara dinamik.

Jika kita menggunakan HTML statik, maka mendefinisikan item pilihan tidaklah menjadi masalah, karena kita bisa menuliskan selected pada item pilihan tersebut.

Berikut adalah kode HTML statik;

<select id="kodekota" name="kodekota">
<option value="bdg">Bandung</option>
<option value="crb" selected>Cirebon</option>
<option value="jkt">Jakarta</option>
</select>


Jika kita menggunakan PHP standar, maka kita akan membuat program seperti berikut:



<?php
$akodekota=array(
"bdg"=>"Bandung"
,"crb"=>"Cirebon"
,"jkt"=>"Jakarta"
);
$dipilih="crb";
$pilihan="";
foreach($akodekota as $kodekota => $namakota){
$pilihan.="<option value='".$kodekota."' ".(($kodekota==$dipilih)?"selected":"").">";
$pilihan.=$namakota;
$pilihan.="</option>";
}
?>
<select id="" name=""><?=$pilihan;?></select>

Jika kita menggunakan CodeIgniter dan menggunakan helper form form_dropdown(), maka kita bisa dengan sangat mudah. Berikut adalah kodenya:

<?php
$akodekota=array(
"bdg"=>"Bandung"
,"crb"=>"Cirebon"
,"jkt"=>"Jakarta"
);
$dipilih="crb";
echo form_dropdown("kodekota",$akodekota,$dipilih);
?>



Sabtu, 07 Juli 2012

Helper Form: form_label()

Jika kita membuat form untuk input, maka kita akan memberikan teks atau prompt di sebelah kiri atau di atas dari elemen inputnya. Teks atau prompt ini digunakan untuk memberikan keterangan kepada pengguna aplikasi tentang data apa yang harus dimasukkan ke dalam elemen input yang disajikan tersebut.

Bentuk form entri secara umum:

Login
Nama user : |___________|
Password   : |___________|

|Login| |Cancel|


Kita bisa menggunakan elemen tabel agar tampilannya lebih rapi atau menggunakan CSS untuk mengatur letak dari elemen input.

Kita dapat menggunakan CSS untuk dapat merapikan tampilan, sehingga antara prompt dan elemen input dapat ditampilkan berdampingan seperti menggunakan tabel, atau pun berbeda baris.

Untuk menampilkan prompt untuk suatu elemen, maka prompt ditampilkan dengan menggunakan teks biasa.

Jika kita melihat pada pemrograman di lingkungan dengan antarmuka grafikal, maka kita sering disediakan fitur, jika kita klik promptnya, maka kita akan mendapatkan kursor kita pada elemen input. Fitur mengklik pada prompt atau pun nilai dari suatu pilihan itu sama dengan mengklik pada elemen inputnya; sehingga pengguna bisa lebih dimudahkan.

Elemen form HTML pun telah dilengkapi untuk memudahkan pengguna bisa mengklik prompt atau nilainya saja, tidak perlu mengklik elemen inputnya untuk bisa membuat kursor fokus pada elemen inputnya.

Elemen HTML yang digunakan untuk membuat kemudahan ini adalah elemen label, dengan tag <label> Teks </label>.

Contoh:

<label for="idelemeninput">Teks/Prompt</label>
<input type="text"  id="idelemen"  name="idelemen" value="">


Tag label jika ingin dapat berfungsi untuk memudahkan pemfokusan kepada elemen input, maka tag label selalu dipasangkan dengan elemen inputnya. Di dalam tag label kita harus menambahkan atribut for yang diisi dengan idelemen yang akan diberi fokus, jika teks atau prompt dari label diklik.


Jika kita menggunakan CodeIgniter, maka kita dapat dengan mudah untuk menyatakan label untuk suatu elemen input.


Untuk contoh di atas, maka kita dapat menyatakan dengan cara berikut:


<?php
echo form_label("Teks/Prompt","idelemen");
echo form_input("idelemen");
?>

Elemen atau tag label ini jarang digunakan oleh pemrogram aplikasi web, apalagi jika pemrogram lebih banyak menggunakan tabel untuk membuat layout dari form entrinya.

Selasa, 03 Juli 2012

Pembacaan Data Dengan Librari Class Input

Librari class input adalah librari yang disediakan oleh CodeIgniter untuk memudahkan pembacaan data input yang dikirimkan oleh pengguna aplikasi web.

Librari class input akan secara otomatis dimuat oleh CodeIgniter, sehingga pengembang bisa langsung menggunakannya, tidak perlu melakukan pemuatan librari terlebih dahulu.

Sintaks pembacaan:

$varpenampung=$this->input->post("namaelemen"); 
namaelemen adalah nama elemen input yang dikirimkan form aplikasi dari browser web
$varpenampung adalah nama variabel yang digunakan untuk menampung data dari browser

Jika kita tidak menggunakan librari class input, maka kita harus menggunakan variabel server $_POST, dengan menggunakan key nama elemen input dari form browser web.

Librari class input dengan fungsi post() di atas, membantu pengembang aplikasi web untuk terhindar dari kesalahan yang disebabkan nama elemen input yang dimasukkan salah. Jika kita menggunakan $_POST langsung, maka kita akan mendapatkan pesan kesalahan, jika nama elemen input salah.

Pada pembahasan ini, kita menggunakan fungsi post(), karena secara default data yang akan dikirimkan dari browser web, jika kita menggunakan CodeIgniter sebagai backendnya, harus menggunakan method post pada atribut formnya.

Untuk menghindari kesalahan penggunaan $_POST untuk membaca data input yang dikirimkan oleh pengguna web, maka pengembang aplikasi harus melakukan pemeriksaan terlebih dahulu, apakah nama elemen input yang dimaksud ada atau tidak, jika tidak ada maka kita akan memberikan nilai default; seperti kode berikut:


$varpenampung=(isset($_POST["namaelemen"]))?$_POST["namaelemen"]:""; 
namaelemen adalah nama elemen input yang dikirimkan form aplikasi dari browser web
$varpenampung adalah nama variabel yang digunakan untuk menampung data dari browser
Pembacaan langsung dengan menggunakan $_POST harus dilakukan menggunakan assignmen yang di dalamnya ada operasi pemilihan ternary. Kita harus menggunakan fungsi isset() untuk memastikan terlebih dahulu, apakah item elemen $_POST ada atau tidak, jika ada, maka $varpenampung akan diisi dengan menggunakan $_POST["namaelemen"], jika tidak ada, maka yang diisikan adalah data kosong.

$this->input->post() akan secara otomatis melakukan proses pemeriksaan dan pemberian data default jika key untuk elemen $_POST tersebut tidak ada.

Setelah penghindaran kesalahan telah dilakukan oleh librari class input, maka pengembang aplikasi bisa lebih fokus untuk bagaimana memroses data selanjutnya.