YUNANTO

Selamat Datang Di BLOG Saya...

Yunanto

Mahasiswa STMIK Rosma Karawang Jurusan Teknik Informatika Tahun Akademik 2012

Rabu, 02 Oktober 2013

Membuat Aplikasi Tampil, Entri, Edit, Delete Mahasiswa

Dalam Tutorial Ini Diasumsikan… Bahwa:

1. Di komputer yang Anda gunakan sudah terinstall dengan baik PHP, Apache, MySQL dan Macromedia Dreamweaver karena dalam tutorial ini kita akan menggunakan keempat software tersebut.
2. Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password yang dapat digunakan.
3. Anda sudah membuat Site Definition pada Dreamweaver, berikut bagaimana mengkolaborasikan Dreamweaver dengan PHP-MySQL.
4. Anda sudah cukup mengerti bagaimana membuat database, membuat dan memanipulasi tabel di MySQL baik melalui console maupun dengan front-end seperti PHPMyAdmin dan MySQLFront.
5. Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL, DML).

Mempersiapkan Database dan Tabel MySQL

angkah pertama dalam membuat aplikasi web berbasis PHP dan MySQL dengan menggunakan Dreamweaver adalah mempersiapkan database dan tabel yang akan digunakan. Dalam tutorial ini akan digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh sederhana bagaimana membuat proses entri, edit, delete dan tampil ke database MySQL dengan bantuan Dreamweaver. Namun demikian, jika Anda sudah memahami tutorial ini dengan baik, untuk aplikasi yang lebih kompleks tidaklah berbeda jauh. Pertama kali buatlah database di MySQL dengan nama dbmahasiswa. Selanjutnya buatlah tabel di MySQL dengan nama mhs dan dengan spesifikasinya sebagai berikut:

Setelah tabelnya dibuat, kurang lebih tampilannya sebagai berikut:




Gambar 1 Struktur Tabel mhs di PHPMyAdmin

Membuat Koneksi ke MySQL di Dreamweaver

selanjutnya kita akan mengkoneksikan PHP dengan MySQL memanfaatkan tools yang sudah tersedia di Macromedia Dreamweaver. Jangan lupa pastikan bahwa Site Definition di Dreamweaver sudah dibuat dengan benar, karena keberhasilan dari koneksi ke MySQL juga bergantung dari site definition tersebut.

Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru.
2. Aktifkan (buka) panel Application yang berada di sebelah sisi window utama Dreamweaver (lihat gambar)
3. Buka tab Databases pada panel Application tersebut.
4. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu MySQL Connection.
5. Akan ditampilkan window isian MySQL Connection (Lihat gambar). Isi nama koneksi, host mysql, username, dan password MySQL dengan benar (1), lalu klik tombol Select… untuk memilih database yang akan digunakan (2) dan klik tombol OK (3) untuk menyimpan konfigurasi koneksi MySQL.
6. Jika koneksi berhasil maka pada panel Application tab Databases akan ditampilkan informasi database berikut tabel-tabel yang terdapat dalam database tersebut.


 Gambar 2. Panel Application Tab Database untuk Membuat Koneksi

Gambar 3. Window MySQL Connection

 
Gambar 4. Tampilan jika Koneksi Database Berhasil

Membuat Halaman untuk Input Data Mahasiswa

etelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat halaman untuk melakukan input data mahasiswa ke database MySQL. Pada dasarnya untuk membuat aplikasi input data, kita harus membuat form inputan terlebih dahulu. Namun dengan bantuan Macromedia Dreamweaver, kita akan memanfaatkan fasilitas yang sudah tersedia, sehingga tidak perlu membuat form terlebih dahulu. Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama input_mhs.php sebagai halaman untuk menginput data mahasiswa baru (jika sudah dibuat, tidak perlu dibuat lagi).
2. Aktifkan bagian Application di menu atas, lalu pilih menu Record Insertion Form Wizard (lihat gambar). Atau bisa akses menu Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
3. Akan ditampilkan window Record Insertion Form. Tentukan koneksi yang digunakan, tabel yang digunakan dan atur tampilan form (jenis inputan). Tekan tombol OK.
4. Di halaman akan ditampilkan form inputan untuk data mahasiswa. Tekan F12 (Preview in Browser) untuk mencoba halaman input data mahasiswa.

 
Gambar 5. Record Insertion Form Wizard 

Gambar 6. Menu Insert Record Form Wizard

 
Gambar 7. Record Insertion Form


Gambar 8. Hasil Input Data Mahasiswa

 
Gambar 9. Tampilan Halaman Input Data di Browser
 

Tidak ada komentar:

Posting Komentar