Membuat input data dan tampil data
Pada kesempatan kali ini kita akan mempelajari cara membuat
sebuah form input data dan tampi data beserta database yang menggunakan xampp,
pada desain disini kami menggunakan dreamwever saja agar teman-teman tidak
kesulitan. Karena jika menggunakan coding langsung tentunya bagi pemula akan
kesulitan (padahal sebenarnya saya juga
ga begitu paham he he).
software yang
dibutuhkan pada tutorial kali ini adalah :
1. xampp
2. dreamwever
3. browser (boleh google chrome, mozila, atau yang lain)
4. dan selain software saya sarankan untuk menyiapkan
secangkir kopi dan cemilan :D
Jika semua software yang dibutuhkan sudah siap mari kita mulai, pertama-tama buka
xampp anda ; lalu klik mulai pada apache dan mysql
Jika sudah, maka minimize saja
xampp, agar tidak mengganggu, langkah berikutnya adalah membuat databasenya.
Buka browser (disini saya menggunakan chorme) kemudian ketikan localhost pada
tab bar browser, maka akan muncul tampilan berikut (catatan: tampilan bisa saja berbeda tergantung versi
xampp anda atau browser yang anda gunakan tetapi untuk langkah-langkahnya tetaplah sama)
Setelahnya klik pada phpmyadmin (no 2) maka akan tampil
seperti gambar berikut
Sebelumnya Perlu teman-teman ketahui disini saya akan
memberikan sebuah contoh input data untuk data mahasiswa yang meliputi
id_mahasiswa (primary key), NIM, nama mahasiswa, Program studi, alamat,
username , dan password.
Langkah selanjutnya klik new (3) lalu beri nama database
anda (4) (penamaan bebas, saya menggunakan nama database campus) kemudian klik
create (5)
Setelah menekan create akan muncul tampilan seerti di bawah
ini, disini kita akan membuat sebuah table yang berisi data yang saya jelaskan
diatas tadi berupa meliputi id_mahasiswa (primary key), NIM, nama mahasiswa,
Program studi, alamat, username , dan password (jumlah 7, no 7) dan menggunakan
nama table mahasiswa (6) lalu klik go (8)
Setelah menekan create akan muncul tampilan seerti di bawah
ini, disini kita akan membuat sebuah table yang berisi data yang saya jelaskan
diatas tadi berupa meliputi id_mahasiswa (primary key), NIM, nama mahasiswa,
Program studi, alamat, username , dan password (jumlah 7, no 7) dan menggunakan
nama table mahasiswa (6) lalu klik go (8)
Setelahnya klik save (tarik kebawah)
Jika pada sebelah kiri jendela browser anda sudah ada
database beserta tabel seperti dibawah ini berarti anda sudah sukses membuat
database dan siap digunakan untuk membuat Input data
Ok sampai disini kita sudah berhasil membuat databasenya,
dan daya harap temen-temen tidak ada yang kesulitan paling tidak sampai tahapan
ini. sekarang minimize browser anda lalu buka dreamweaver anda karena kita akan
membuat tampilannya. Pada jendela awal dreamwever pilih PHP
(catatan: sebelum membuka dreamwever sebaiknya anda
menyiapkan sebuah folder di dalam disc anda, penempatan bebas noleh D,E,F
fungsinya untuk penyimpanan data kita nanti)
Setelah dreamwever terbuka langkah selanjutya adalah membuat
sebuah site baru, klik pada site > new site maka akan muncul tampilan
seperti di bawah ini. Kemudian pada local info isikan name site, local root
folder arahkan pada folder yang sudah anda buat tadi dan pada HTTP addres
isikan localhost.
Jika pada local info sudah selesai maka kita akan beranjak
ke remot info (bawah local info) pada acces pilih local host. Lalu pada remote
folder arahkan ke disc C > xampp > htdocs > xampp. Dan cheklis seperti
gambar di bawah ini
Terakir pada new site ini adalah menyetting testing server,
pada server model pilih php mysql dan pada acses pilih local/network. Kemudian klik
ok
Setelah itu kemudian kita akan mengyambungkan deamwever
dengan database yang sudah kita buat tadi, caranya lihat pada sebelah kanan bar
menu dreamwever pilih application > database > pilih mysql connection
Setelah mysql connection tampil maka isilah sesuai dengan
gambar dibawah ini, untuk form database arahkan ke database campus
Untuk mengetahui berhasil tersambung dengan database atau
belum bias dicoba dengan klik tombol test, jika sudah ada dialog sukses berarti
kita sudah berhasil.
Setelah berhasil menyambungkan dengan database kita
lanjutkan dengan membuat tampilan input data
1. 1. Buat form, insert > form
2. 2. Buat table sebanyak 7 colom, seperti gambar
dibawah ini
3. 3. Dan buat seperti ini
Langkah selanjutnya adalah menyingkronkan antara text field
dengan struktur table dalam database, caranya klik pada text field nim dan
lihat pada bar menu paling bawah isikan sesuai pada nama pada struktur table
(text field = nim)
Lakukan langkah yang sama pada setiap text field, isikan
nama sesuai nama stuktur table pada database.
Setelah semua text field sudah diberi nama kemudian kita
atur button, seperti gambar dibawah ini
Pada tombol reset pengaturannya sedikit berbeda yaitu
seperti gambar dibawah ini
Setelah itu buat recorset pada server behavior,Pilih insert
record pada tampilan connection pilih connection dengan nama campus dan pada
after inserting go to arahkan ke tampil.php (Jika belum membuat tampil.php
langkah ini bias dilakukan setelah membuatnya)
Sampai tahap ini kita sudah berhasil membuat tampilan input
data, simpan terlebih dahulu file tersebut dengan nama input.php pada folder
campus yang kita buat tadi
Selanjutnya yaitu membuat file untuk tampil data, yaitu
dengan file > new > php dan simpan terlebih dahulu dengan nama tampil.php
pada folder yang sama dengan input.php tadi
Setelah menyimpan maka kita akan membuat tampilan tampil.php,
seperti gambar di bawah ini
Setelah membuat tampilan,
kemudian buatlah recordset seperti gambar dibawah ini
Sesudah berhasil membuat
recordset, sekarang isikan masing-masing recorset sesuai nama formnya
Dan sekarang kita sudah menyelesaikan form input data dan
tampil data, simpan terlebih dahulu pekerjaan anda lalu coba run dengan browser
pada file input.
tampilan pada browser seperti di bawah ini
jika kita klik button input maka akan mengarah ke tampil.php
tambahan!!!, jika pada tampil.php ingin menampilkan lebih dari satu maka tambahkan repeat region pada tampil.php, seperti gambar di bawah ini
maka pada tampil.php akan menampilkan lebih dari satu data.
sekian tutorial mempuat input data dan tampil data menggunakan dreamwever beserta database, semoga bermanfaat. dan sampai jumpa pada tutoriak selanjutnya
