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)
gambar 2
Setelahnya klik pada phpmyadmin (no 2) maka
akan tampil seperti gambar berikut
gambar 3
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)
gambar 4
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)
gambar 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)
gambar 6
Setelahnya klik save (tarik kebawah)
gambar 7
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
gambar 8
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)
gambar 9
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.
gambar 10
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
\
gambar 11
Terakir pada new site ini adalah menyetting
testing server, pada server model pilih php mysql dan pada acses pilih
local/network. Kemudian klik ok
gambar 12
Setelaah 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
gambar 13
Setelah mysql connection tampil maka isilah
sesuai dengan gambar dibawah ini, untuk form database arahkan ke database
campus
gambar 14
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.
Buat form, insert > form
2.
Buat table sebanyak 7 colom,
seperti gambar dibawah ini
3.
Dan buat seperti ini
gambar 15
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)
gambar 16
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
gambar 17
Pada tombol reset pengaturannya sedikit
berbeda yaitu seperti gambar dibawah ini
gambar 18
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 tampil.php tadi
gambar 19
Setelah menyimpan maka kita akan membuat
tampilan tampil.php, seperti gambar di bawah ini
gambar 20
Setelah membuat
tampilan, kemudian buatlah recordset seperti gambar dibawah ini
gambar 21
Sesudah berhasil
membuat recordset, sekarang isikan masing-masing recorset sesuai nama formnya
gambar 22
gambar 23
Dan sekarang kita sudah menyelesaikan form
input data dan tampil data, simpan terlebih dahulu pekerjaan anda lalu coba run
dengan browser pada file input.
