Tutorial Membuat Website Input Output dengan Dreamweaver + XAMPP

Assalamualaikum Wr. Wb.

Selamat malam teman teman.
Sekarang gue mau ngebahas tentang caranya bikin website sederhana, yang dimana web tersebut bisa melakukan SIDU (Select, Input, Delete, Update) dengan menggunakan aplikasi XAMPP dan Dreamweaver.

Dalam Tutorial ini, gue make Adobe Dreamweaver CS3 Portable dan XAMPP v1.6.1.

Download Aplikasinya disini:
- XAMPP v1.6.1
- Adobe Dreamweaver CS3 Portable

Tutorial ini akan gue bagi menjadi beberapa bagian, agar teman teman tidak mengalami kesulitan. So, check this out :)

Pertama tama, kalian download dulu kedua Software diatas, tapi apabila sudah punya, yaudah gak usah di download :D

---

TAHAP 1. Pengaktifan PhpMyAdmin

---

Pada tahap ini kita akan membuat sebuah database menggunakan PhpMyAdmin di XAMPP. Pertama tama, jalankan Software XAMPP nya, kira kira seperti ini:

Setelah itu, buka browser yang digunakan lalu ketik localhost pada address bar, maka nanti akan muncul seperti ini:

Lalu klik tulisan PhpMyAdmin yang ada di menu tools sebelah kiri. Atau ketik saja di addressbar: localhost/phpmyadmin

maka akan muncul jendela PhpMyAdmin.

---

TAHAP 2. Membuat Database

---

1. Masukkan nama database yang akan dibuat, contoh: 2KA32 (Nama Kelas gue hehe..) Lalu klik create.

2. Masukkan nama table yang ingin dibuat, dan masukkan juga ada berapa kolom yang diperlukan. Setelah selesai, klik GO.

3. Masukkan nama kolom yang ingin dibuat, dan jadikan salah satu sebagai primary key. Disini gue menjadikan NPM sebagai primary key.

Apabila sudah selesai, klik tulisan Save. Tapi apabila kalian mau nambah 1 kolom lagi, klik GO.

---

TAHAP 3. Mengkoneksikan Database Dengan Dreamweaver

---

1. Setelah pembuatan database selesai, sekarang lanjut buka Adobe Dreamweaver.

2. Lihat dipojok kanan bawah, akan ada panel "Files". Dan disana akan ada tulisan "Manage Site", klik tulisan manage sites.

3. Muncul jendela "Manage Sites", setelah itu klik "New" --> "Site".
4. Setelah itu ganti tab Basic menjadi Advance. Ada beberapa poin yang harus diganti, antara lain:

• Site Name
• Local Root Folder
• HTTP Address

Untuk Local Root Folder, klik yang gambar icon folder disamping, karena kita menggunakan XAMPP, maka pergi ke C:/XAMPP/htdocs setelah itu bikin folder baru, namanya terserah kalian, disini gue bikin namanya "contoh".

apabila sudah diganti, jangan disave dulu, pindah ke panel Testing Server.

5. Apabila sudah, ubah Server Model menjai PHP MYSQL dan Access menjadi Local/Network. Ubah juga Testing server folder dan URL Prefix.

Setelah itu baru klik OK lalu Done.

6. Kembali lagi ke halaman awal DW, sekarang pilih create new PHP.

7. Pada Panel Aplication, klik yang tanda plus (+) lalu klik MySQL Connection.

8. Isi data datanya sebagai berikut:

• Connection name : (terserah)
• MySQL Server : localhost
• User Name : root (username default: root, tapi kalo udah kalian ganti, pake username kalian)
• Password : (password default: kosong, tapi kalo udah kalian ganti, pake password kalian)
• Database : (Klik tombol Select..)

Apabila sudah selesai, klik OK.Maka nanti akan keluar database yang tadi sudah dibuat.

disini tahap pengkoneksian sudah selesai. Sekarang tahap selanjutnya:

---

TAHAP 4. Membuat Halaman Input Data

---

1. Save dahulu halaman yang barusan dibuat dengan mengklik file > save atau CTRL+S.

Beri nama terserah namun sesuai dengan apa yang ingin di buat, seperti input, masuk, insert dll.

2. Setelah di save, buat form inputannya dengan klik Insert > Data Objects > Insert Record > Record Insertion Form Wizard

3. Klik pada bagian Connection menjadi koneksi tadi yang sudah dibuat. Lalu klik OK.

4. Maka akan muncul tampilan seperti ini

Setelah itu save lagi dan lanjut..

---

TAHAP 5. Membuat Halaman Untuk Menampikan Data

---

1. Buat halaman baru dengan klik file > new. Pilih yang PHP.
2. Setelah itu save lagi dengan menekan CTRL+S. Beri nama output atau apapun terserah.
3. Sekarang bikin record set dengan mengklik Insert > Data Objects > Recordset.

4. Selanjutnya masukkan data recordset seperti ini

• Name: (Terserah)
• Connection: (Nama koneksi yang tadi dibuat)
• Table: (Nama tabel yang telah dibuat pada saat membuat database)
• Columns: All
• Filter: None
• Sort: NPM | Ascending

5. Setelah itu buat dynamic table nya. Klik Insert > Data Objects > Dynamic Data > Dynamic Table

6. Setelah muncul jendela Dynamic Table, klik OK lalu akan muncul tampilan seperti ini

Save lagi halaman ini. Untuk mencobanya coba buka web browser anda lalu ketik localhost/(nama folder)/(nama file) karena nama folder gue "contoh" dan nama file gue "input.php" maka gue ngetiknya localhost/contoh/input.php
Maka akan tampil form input.php, isi data tersebut untuk mencoba nya.

Setelah itu ketik form outputnya ganti input.php menjadi output.php, apabila berhasil maka akan muncul tampilan seperti ini

---

TAHAP 6. Membuat Halaman Untuk Mengedit Data

---

1. Buat halaman baru lagi lalu di save dan beri nama "edit".
2. Buat Recordset baru lagi, bedanya disini yang bagian sort gak usah di ubah, yang bagian filter diubah menjadi nama primary key (dalam kasus ini primary key nya adalah NPM) Lalu klik OK.

3. Buat form editnya, klik Insert > Data Objects > Update Record > Record Update Form Wizard
4. Atur jendela update form wizrdnya seperti Connection, Table to update, After Updating, go to.. dll. Apabila sudah selesai, klik OK.

5. Setelah selesai, save halaman edit.php ini. Lalu buka lagi halaman Output.php untuk membuat link editnya.
6. Setelah halaman output.php dibuka, blok 1 kolom lalu klik kanan > Table > Insert Row or Columns..

7. Lalu pilih "column" dan klik OK.

8. Buatlah halamannya menjadi seperti ini

9. Blok tulisan "Edit" lalu klik Insert > Hyperlink, untuk link klik gambar folder disamping lalu klik "edit", setelah itu klik parameter, lalu ketikkan nama parameter yang digunakan, disini gue make primary key nya yaitu NPM, lalu klik bagian kosong dibawah tulisan "value", klik dynamic data (yang gambar petir) lalu klik NPM, setelah itu klik OK.

10. Lalu klik OK, OK dan OK. Apabila sudah, silahkan dicoba berjalan dengan semestinya atau tidak.

---

TAHAP 7. Membuat Halaman Hapus Data

---

1. Buat halaman PHP baru, lalu save dan beri nama "Hapus".
2. Lalu klik Insert > Data Object > Delete Record. Lalu isi seperti ini

3. Setelah itu klik OK. Lalu kembali ke halaman output.php untuk membuat link hapus.
4. Setelah di halaman output.php, blok lagi kolom nya lalu klik kanan > table > Insert Rows or columns.. lalu   pilih columns dan OK

5. Lalu buat hyperlink lagi untuk hapus nya kira kira seperti ini

6. Blok tulisan "Hapus" lalu klik Insert > Hyperlink. Setelah itu buat lagi sama seperti Hyperlink Edit.

7. Setelah itu OK, OK, OK dan OK :D
8. Sekarang masih di halaman output.php, ubah mode "Design" menjadi "Code"

9. Lihat kode php untuk "hapus.php", pastikan sama dengan kode "edit.php"

Apabila berbeda, di kopas aja kodenya agar sama.

10. Setelah itu coba sekarang website yang sudah dibuat. Apakah bisa berjalan atau ada yang error. Website yang dibuat bersama dengan tutorial ini 100% work. Mudah mudahan sama dengan teman teman semua ya :)

---

TAMBAHAN

---

Website ini masih sangatlah sederhana, disini hanya menerapkan dasar nya saja. Jadi untuk desain dan yang lainnya kalian kreasiin sendiri ya, kreasi kalian pasti lebih bagus :)
Apabila ada yang salah atau masih bingung, bisa ditanyakan di kolom komentar dibawah walaupun gak semua bisa gue jawab :p.

Sekian Tutorial Ini. Terima Kasih.

Untuk meng-online-kan web yang kalian buat ini, bisa dilihat caranya di Cara mengkoneksikan database ke Id Hostinger
Untuk melihat contoh Live nya bisa kunjungi link ini >> http://adityajanata.id1945.com/