Tutorial membuat aplikasi input data siswa dengan php mysql mengunakan dreamweaver

Tutorial membuat aplikasi input data siswa dengan php mysql mengunakan dreamweaver

November 5, 2015

PHP MySQL

• 0

Tags: aplikasi, cara, database, desain, dreamweaver, gambar, input, insert, interface, membuat, mysql, php, proses, siswa, tutorial

Membuat desain interface input data siswa
Dalam hal ini kita menggunakan bantuan macromedia dreamweaver untuk membuat desain interface dari input data siswa
Langsung saja langkah – langkahnya untuk membuat desain nya :

1. Buka macromedia dreamweaver kalian …..!!
2. Buat halaman baru..!! & simpan dengan nama form_input.php ke dalam file direktory kalian yang ada di software server …!!! (dalam kasus ini saya simpan di C:\xampp>htdocs>book)

Seperti sudah anda ketahui, objek form yang bisa kita gunakan dalam html sudah sangat cukup bahkan berlebihan karena kadang kita tidak menggunakan semuanya. Objek-objek tersebut adalah : text, radio button, checkbox, button, list/menu, file field dll. Semuanya juga sudah disediakan oleh dreamweaver. SIlahkan anda lihat pada sub menu insert –> form seperti gambar berikut :

3. Langsung saja membuat form input nya …!!!
4. Pertama buat lah form terlebih dahulu, caranya pilih menu insert – form – form
   Langkah ini akan digunakan untuk membuat definisi paket data yang akan dikirimkan. Setiap form wajib membuat ini. Secara visual akan menghasilkan garis titik-titik merah. Nanti semua objek form harus berada dalam kotak tersebut.
   
5. Kemudian klik pada garis merah tersebut, dan lihat pada bagian properties (dibawah), lihat gambar

Silahkan anda sesuaikan isian seperti diatas. Form name adalah nama form (opsional), action adalah tujuan form diproses, target adalah tujuan halaman/frame diproses, method terdiri post dan get. Pilih post untuk form dengan fungsi mengirim dan pilih get untuk model mengambil data.

6. Untuk mempermudah penyusunan layout form, kita gunakan tabel.

(cara nya ..!!)

1. Tekan ( ctrl + alt + T ) / klik insert > tabel  / di menu tab Common klik table ()
2. Dan akan menampilkan interface seperti gambar di samping:
3. rows diisi sejumlah objek form yang akan dibuat misal 7. Kolom diberi nilai 2, dengan asumsi kolom 1 untukjudul input,  kolom 2 untuk objek form. Lebar asumsi 400 px,border –nya : 1 cellpadding : 3 adalah jarak antara kotak cell dengan objek.

1. Klik OK

7. Isikan tabel sebagai berikut :
   1. Untuk Row yang pertama kita lakukan marger cell dengan cara meng-blok Row yang pertama terus tekan ( ctrl + alt + M ) dan center kan text nya lewat panel properties
   2. Masukan Text Field, Text Area, Radio Grups dan Menu/list

8. Arahkan krusorke Row ke 2 kolom ke 2, kemudian pilih menu insert – form – textfield, Kemudian akan muncul window seperti gambar berikut. TEKAN CANCEL untuk mengabaikan.

9.  

10. Klik pada text, dan lihat pada properties yang ada dibawah dreamweaver :

11. 

12. Isikan pada isian textfield berupa nama objek (tidak boleh ada spasi) misal : NIS . Char width diisikan nilai panjang kotak isian senilai karakter misal 20, Max char diisi nilai maksimal isian (boleh sama, boleh juga berbeda jika diperlukan) misal 20. Kemudian ada pilihan single line yang artinya hanya untuk satu baris, multi line untuk banyak baris (sama dengan text area), password jika isian berbentuk bintang.
13. Lakukan hal yang sama untuk baris berikutnya (Isian Nama), Untuk isian alamat, kita bisa pilih insert – form -textarea. Untuk Jenis Kelamin pilih radio grups(sesuaikan nama radio grupnya ) , untuk agama pilih list/menu.
14. Untuk mengisi pilihan list/menu, klik objek list kemudian tekan list values yang ada di properti bar, silahkan isi seperti gambar :    

Jangan lupa name dari list/menu

13. Oy sampe lupa …!! untuk mengunakan radio grups, Klik Radio Grups

Name : isikan jenis_kelamin (sesuaikan dengan fields yang ada di tabel kalian )

Hasilnya sebagai berikut :

14. …..!! masih tingal satu tahap lagi nie shob…!! kita tingal memasukan button untuk melakuikan eksekusinya…!! klik insert > form > Button , values : Simpan
15. Hasil akhir interfacenya yaitu sebagai berikut :

Form sudah selesai tingal anda kreasi sesuai dengan kebutuhan ….!!!
Nah…………..!! kalau sudah selesai membuat desain form inputan, selanjutnya kita akan membuat aksi dari inputan tersebut seingga bisa masuk value yang kita sisipakan ke database.
Langsung saja, masih menggunakan macromedia dreamweaver, setelah kita tadi bekerja dengan tampilan desain sekarang kita pilih code atau split , cari code :
<form id=”form1″ name=”form1″ method=”post” action=””>
Rubah name dan action nya menjadi
<form id=”frmsiswa” name=”frmsiswa” method=”post” action=”input.php”>
Atau kita juga bisa memanfaatkan panel propertis dengan jalan klik form tersebut dan kita rubah name & action nya.
Maksud dari method=”post” action=”input.php” pada form adalah ketika kita melakukan aksi/eksekusi dari dari form tersebut (dengan memasukan value dan menekan button sebagai tombol pengeksekusian makan secara otomatis value akan di POST kan (dikirimkan) ke input.php dan dari input.php tersebut akan diproses.

source : http://beemultimedia.web.id/blog/2015/11/05/tutorial-membuat-aplikasi-input-data-siswa-dengan-php-mysql-mengunakan-dreamweaver/