Hosting Gratis domain dengan harga terjangkau ya di EWD ! | Hosting Mulai 25.000/Tahun ! KLIK DISINI UNTUK MENDAPATKAN PENAWARAN TERBAIK INI !!
 

Membuat input data dan tampil data menggunakan Dreamwever | EWD Blog – Web hosting Indonesia | Hosting Termurah Indonesia | Hosting murah dan tangguh

Membahas tentang web hosting,web design,web security, dan domain

Membuat input data dan tampil data menggunakan Dreamwever

Pada kesempatan kali ini kita akan mempelajari cara membuat sebuah form input data dan tampi data beserta database yang menggunakan xampp, pada sisi layout disini kami menggunakan dreamwever saja agar teman-teman tidak kesulitan.

software yang dibutuhkan pada tutorial kali ini adalah :

  1. xampp
  2. dreamwever
  3. browser (google chrome, mozila, atau yang lain)

Jika semua software yang dibutuhkan  sudah siap mari kita mulai, pertama-tama buka xampp anda ; lalu klik mulai pada apache dan mysql

screenshot_6

Jika sudah, maka minimize saja xampp, agar tidak mengganggu, langkah berikutnya adalah membuat databasenya. Buka browser (disini saya menggunakan chorme) kemudian ketikan ” localhost/phpmyadmin ” pada tab bar browser, maka akan muncul tampilan berikut :

screenshot_7

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 -> lalu beri nama database anda (penamaan bebas, saya menggunakan nama database campus ->  kemudian klik create

screenshot_8

Setelah menekan create akan muncul tampilan seperti 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)

screenshot_9

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)

screenshot_10

Setelahnya klik save (scroll 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)

screenshot_11

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.

screenshot_12

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

screenshot_13

Terakir pada new site ini adalah menyetting testing server, pada server model pilih php mysql dan pada acses pilih local/network. Kemudian klik ok

screenshot_14

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

screenshot_15

Setelah mysql connection tampil maka isilah sesuai dengan gambar dibawah ini, untuk form database arahkan ke database campus

screenshot_16

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

screenshot_17

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)

screenshot_18

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

screenshot_19

Pada tombol reset pengaturannya sedikit berbeda yaitu seperti gambar dibawah ini

screenshot_21

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

screenshot_22

Setelah menyimpan maka kita akan membuat tampilan tampil.php, seperti gambar di bawah ini

screenshot_23

Setelah membuat tampilan, kemudian buatlah recordset seperti gambar dibawah ini

screenshot_24

Sesudah berhasil membuat recordset, sekarang isikan masing-masing recorset sesuai nama formnya

screenshot_25

Dan sekarang kita sudah menyelesaikan form input data dan tampil data, simpan terlebih dahulu pekerjaan anda lalu coba run dengan browser pada file input.


Leave a Reply

Your email address will not be published. Required fields are marked *

Budayakan Komentar yang baik dan bijak

Captcha anti spam *