Friday, May 6

PHP Shared 6 : Form dan percabangan IF

Assalamu'alaikum wr wb

Seperti janji saya di share sebelumnya, di share kali ini kita kita akan bahas langkah demi langkah dalam pembuatan form php. Untuk penulisan code dalam pembuatan form penulisan Embedded Script(script PHP yang disisipkan di antara tag ke dalam dokumen HTML). Supaya lebih menarik(tidak hanya membuat form saja) saya akan memasukan unsur percabangan yang source code nya sudah saya share sebelumnya, yaitu menghitung nilai akhri dan huruf mutu, tetapi dalam penulisan code nya akan ada perbedaan karena kita akan menggabungkan dengan html. Percabangan yang saya gunakan percabangan IF. Dan pastikan anda sudah mengerti konsep dari percabangan if itu sendiri, jika belum anda bisa melihat di share sebelumnya tentang percabangan. Ok langsung kita mulai aja, cekidot.......

Peringatan !
Pastikan tool yang akan di gunakan sudah teristal
Buka dreameweaver anda Create New>PHP. Selanjutnya, sebelum meng obrak-abrik alangkah baiknya file disimpan dulu, dan pastikan tempat penyimpanannya di dalam appserv\www dan buat folder baru di dalam folder www tersebut ( contoh C:\AppServ\www\abbe_php ) dan beri nama input.php . Selanjutnya pastikan pilih tompol Split pada editor views seperti ditunjukkan panah merah, dan letak kan kursor pada jendela desain seperti di tunjukkan panah biru pada gambar dibawah :


Selanjutnya kita buat table supaya tampilan terlihat rapi dan mempermudah kita dalam menyusun objek. klik pada menubar Insert>Table


atau bisa juga


maka akan muncul tampilan seperti gambar dibawah :


dari gambar di atas atur :
rows = 2
columns = 1
table width = 50 Persent
border thickness = 1
cell padding = 0
cell spacing = 0
lalu klik tombol Ok.
Selanjutnya pada tab properties di jendela bawah ubah align menjadi center


Jika tidak muncul seperti gambar diatas pastikan dulu table dalam keadaan terseleksi dengan cara klik kanan pada tabel>Tabel>Select table.


Sampai disini kita sudah punya table dengan 2 baris 1 kolom yang posisinya di tengah (align=center). Selanjutnya aktifkan / klik pada baris pertama dan pada tab properties di bawah ganti horz menjadi center supaya dalam penulisan menjadi rata tengah. dan dalam baris pertama tadi isi dengan INPUT DATA NILAI . Dan anda juga bisa mengganti background nya di tab properti "bg". Selanjutnya kita akan memasukkan form, aktifkan / klik pada baris kedua, pada menubar Insert>Form>Form.


Selanjutnya masih pada baris ke 2 kita akan memasukan table lagi, klik Insert>Table dengan nilai :
rows = 8
columns = 3
table width = 100 Persent
border thickness = 0
cell padding = 5
cell spacing = 0
lalu klik tombol Ok.
Selanjutnya ketik dan atur seperti gambar dibawah :


Lalu pada kotak hijau anda seleksi (klik drag) ke-3 sell tersebut dan anda merge (klik kanan>Table>Merge cell). dan kita akan menambah object pada kolom yang kosong pada gambar diatas yang ditunjukkan kotak biru dan kotak hijau yang sudah di merge cell. Untuk penambahan objek anda klik pada menubar Insert>form>.... Disitu ada beberapa objek yang akan kita pasang. Untuk masing - masing no pada gambar diatas isi dengan objek sbb : ctt: setelah kita memilih salah satu objek akan ada form/jendela yang muncul maka anda tekan tombol Cancel saja


no object penganturan di tab properties
1 textfield textfield=npm, char width=15, max char=8
2 textfield textfield=nama, char width=45, max char=40
3 List/Menu List/Menu=matakuliah *
4 textfield textfield=tugas, char width=5, max char=3
5 textfield textfield=quis, char width=5, max char=3
6 textfield textfield=uts, char width=5, max char=3
7 textfield textfield=uas, char width=5, max char=3
8 Button Button name=tombol, value=simpan
9 Button Button name=tombol, Action=reset form

Ket : * klik tombol List values pada tab properties dan isi seperti gambar di bawah dan initially selectted pilih seperti gambar dibawah:




Dan hasil gambarnya seperti ini :

Selanjutnya kita beralih ke jendela kode dan cari code dari form ( berwarna orange ) seperti gambar dibawah, dan isi action dengan "output.php".



Selanjutnya anda simpan file input.php nya, dan buat file php baru dan langsung disimpan dengan nama output.php ( sama dengan yang diisikan di action ). Dan hapus semua  code pada file output.php pada jendela codenya. Langkah selanjutnya anda kembali ke file input.php dan copy semua isi kode pada dan paste kan ke jendela code file output.php. Sampai disini kita akan mempunyai dua file dengan isi/bentuk yang sama. Dan selanjutnya pada file output.php akan kita rubah sbb :

1. ganti kop nya dengan OUTPUT DATA NILAI
2. hapus semua objek yang kita buat ( textfield,List/Menu,Button)
3. hapus form dengan menghapus code yang di tunjukkan gambar dibawah :



4. hapus baris yang sudah di merge cell dengan klik kanan pada cell yang di merge pilih Table>Delete Row
5. tambahkan 2 baris baru dengan klik kanan pada baris paling bawah pilih Table>Insert Rows or Columns.. dan setting seperti gambar dibawah, lalu OK.


dan isi 2 baris baru masing-masing dengan : Nilai Akhir dan Huruf Mutu :
Dan tambah kan souce code lengkapnya di file output.php seperti gambar dibawah tambahkan yang berada di kotak merah :


gambar hasil inputnya :


gambar hasil outputnya :


Sekian dulu share yang melelahkan kali ini, semoga bermanfaat dan tetap tersenyum

wassalam

No comments:

Post a Comment

Komen ya :D