Tutorial Membuat Website Input Output

dengan Dreamweaver + XAMPP

22.02 Website Aditya Janata Priya
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.p.ht/