Thursday, April 18, 2013

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/

35 comments:

  1. @galih: thanks

    @andra: makasih

    @dimas: thanks udah berkunjung

    @yuni: sama sama

    ReplyDelete
  2. Dreamweaver emang software yang manteb buat bikin website, fasilitasnya lengkap.

    ReplyDelete
  3. @website development: yupp, setuju banget sama anda :)

    ReplyDelete
  4. Makasih banget ya gan..
    sangat berguna ^_^

    ReplyDelete
  5. Terimakasih gan Sangat sangat sekali membantu saya :D

    ReplyDelete
  6. makasih gan, alhamdulillah setelah membaca artikel agan ini. saya sudah bisa ngerjain tugas buat persiapan UAS buat database dengan xampp. awalnya gak ngerti sama sekali -__-

    ReplyDelete
  7. kok page hapus nya tidak bisa ya gan ?
    hanya muncul blank page "

    ReplyDelete
  8. Kl cara upload gambr gimana gan kl tnpa coding :)

    ReplyDelete
  9. databasenya ngak mau diselect kenapa ya .....
    tolong bantu saya
    modul ini akan saya ajarkan untuk siswa-siswi saya dilhokseumawe aceh
    olong jawabanya saya tunggu di email saya trya_30@yahoo.com
    atau lewat hp di nomor 085277689883
    tolong bantu saya terima kasih

    ReplyDelete
  10. Terima Kasih Wawasan ilmunya :)

    ReplyDelete
    Replies
    1. Sama - sama, terima kasih juga sudah berkunjung :)

      Delete
  11. link aplikasinya dreamweaver sama xamp gak jadi di download gan...

    ReplyDelete
  12. bagaimana cara install xampp karena sudah buat cuma browser agak susah me

    ReplyDelete
  13. Afan bantu dong server behavior nya koq ga aktif ya

    ReplyDelete
  14. Afan bantu dong server behavior nya koq ga aktif ya

    ReplyDelete
  15. tutorial membuat website input output dengan dreamweaver + XAMPP sangat bermanfaat, thanks ilmunya

    Kunjungi website kampus saya http://www.atmaluhur.ac.id/

    Kunjungi website saya https://hiko.mahasiswa.atmaluhur.ac.id

    ReplyDelete
  16. pda saat membuat sebuah database menggunakan PhpMyAdmin di XAMPP yang hrs diperhatikan terlebih dahulu adalah jalankan Software xamppnya dg memilih versi xampp yg ada di kmptrnya msing2 ya.
    Kunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
    Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id

    ReplyDelete
    Replies
    1. Halo Al Yuliyani,

      Ya betul itu salah satunya :)
      Terima kasih sudah berkunjung :)

      Delete
  17. makasih gan tutorialnya...membantu sekali

    http://www.atmaluhur.ac.id

    https://kawakenakeruce.mahasiswa.atmaluhur.ac.id

    ReplyDelete
    Replies
    1. Halo gita,

      Sama sama, terima kasih sudah berkunjung

      Delete
  18. hapus.phpuntuk ini liat di mana

    ReplyDelete
    Replies
    1. Halo dedeziber,

      Apakah sudah ikuti Tahap 7? Kalau sudah,script hapus.php ada di tab hapus.php yang sudah dibuat

      Delete
    2. oke saya coba dulu step by step ...makasih

      Delete

Hi!

Terima kasih sudah membaca artikel ini, apabila artikel ini bermanfaat, silahkan share ke teman teman kalian atau blog kalian, tapi jangan lupa sertakan link hidup menuju ke blog ini sebagai sumbernya yaa. (contoh: adityajanata.blogspot.com)