cara membuat form input data dan tampil data menggunakan xampp

Malam Gan !!! 

Untuk Postingan Terbaru saya kali ini kita akan mempelajari cara membuat sebuah form input data dan tampil 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 sama-sama sedang belajar 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

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

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

  

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 tampil.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.