Cara Membuat Web Dengan Dreamweaver dan Xampp

Teman – teman mungkin sudah pernah mendengar istilah dari Dreamweaver, Php, Xampp. Untuk yang kuliah di jurusan Teknik Informatika atau yang masih sekolah jurusan Rekayasa Perangkat Lunak dan sebagainya mungkin sudah tak asing lagi dengan kata Web. Banyak orang ingin tahu bagaimana cara membuat web sendiri, karena mereka berpikir membuat web itu susah dan selalu mengalami kesulitan dalam mempelajarinya. Mungkin sebagian orang telah belajar dari internet, buku –buku, membaca tutorial, tapi belum juga memahami bagaimana cara pembuatan web tersebut. Dan untuk teman – teman yang belum mengetahui apa itu Web, Dreamweaver dan Xampp  Yukk kita pahami lebih lanjut lagi.

Pengertian Website

Website adalah suatu informasi yang bisa diakses secara global melalui media internet dengan menggunakan protocol HTTP (Hyper Text Transfer Protokol).

Langkah – Langkah Membuat Web Menggunakan Dreamweaver dan Xampp :

• Tahap mengaktifkan PhpMyAdmin

Pastikan Xampp sudah terinstal di PC. Kita akan membuat sebuah database menggunakan PhpMyAdmin di Xampp dan kita harus mengaktifkan software Xampp nya, seperti gambar berikut ini :

• Kemudian buka browser, lalu ketikan localhost pada address bar anda, maka akan muncul seperti berikut :

• Kemudian klik PhpMyAdmin yang ada disebelah kiri atau bisa juga langsung ketik localhost/phpmyadmin pad address bar.

Berikut adalah tampilan dari phpmyadmin

Tahap ini pembuatan database

• Inputkan nama database yang ingin di buat, misalnya : 2KA32 (nama kelas) kemudian klik create.

• Inputkan nama table yang akan dibuat dan tambahkan beberapa kolom yang dibutuhkan. Setelah selesai klik GO.

• Inputkan nama kolom yang akan dibikin, kemudian jadikan salah satu nya adalah primary key.

• Klik save jika sudah selesai. Apabila ingin menambahkan 1 kolom lagi, klik saja GO

• Mengkoneksikan Database Dengan Dreamweaver

• ada panel Files di pojok kanan atas , kemudian klik tulisan manage sites.

• Kemudian akan tampil jendela Manage Sites, klik New --> Site.
• Ganti tab Basic menjadi Advance. 3 point yang harus di rubah :

1. HTTP Address
2. .Site Name
3. Local Root Folder

• Pergi ke C:/XAMPP/htdocs pada Local Root Folder, Disini saya membuat folder “contoh” pada folder baru.

• Jika sudah di rubah, jangan disave dahulu, pindah ke panel Testing Server.

Jika telah selesai, ganti Server Model menjadi PHP MYSQL dan Access menjadi Local/Network. Lalu rubah Testing server folder dan URL Prefix.

• Lalu klik OK dan Done.

Kembali ke awal home dreamweaver, pilih create new PHP.

• Di Panel Aplication, klik yang bertanda plus (+) dan klik MySQL Connection.

• Anda harus mengisi data seperti berikut :

• Connection name à (terserah)
• MySQL Server à localhost
• User Name à root (username default: root, namun jika sudah anda rubah, ganti dengan username kalian)
• Password : (password default: kosong, namun jika sudah anda rubah, ganti password anda)
• Database : (Klik tombol Select)

Klik OK jika sudah selesai. Maka database nya akan muncul.

Membuat halaman input data

1. Halaman yang dibuat di save à ctrl+s. Beri nama terserah anda.
   2. Kemudian buat form inputnya > Data Objects > Insert Record > Record Insertion Form Wizard
   3. Klik pada Connection sehingga menjadi koneksi yang sudah dibuat. Kemudian OK.
   4. Muncullah tampilan seperti berikut

Kemudian save

Buat halaman untuk menampilkan data  

• Pilih PHP untuk membuat halaman baru
• Kemudian save, beri nama output atau terserah anda
• Pada tahap selanjutnya klik Insert à Data Objects à

 
Masukan data seperti dibawah ini :

• Name: (Terserah)
• Connection: (Nama koneksi yang tadi anda dibuat)
• Table: (Nama tabel sesuai database)
• Columns: All
• Filter: None
• Sort: NPM | Ascending

• Kemudian buat dynamic table nya. Klik Insert > Data Objects > Dynamic Data > Dynamic Table
• Jika tampilan Dynamic Table nya sudah muncul, tekan ok.

Kemudian save halaman ini. dan buka web browser anda kemudian ketikan localhost/(nama folder)/(nama file) karena saya menggunakan folder contoh dan menggunakan file input.php maka saya ngetiknya localhost/contoh/input.php. Dan tampillah form input.php, untuk mencobanya isi data tersebut.

Kemudian ketik form outputnya rubah input.php jadi output.php, jika sukses maka muncul tampilan seperti di bawah ini

Halaman untuk edit data

• Anda harus membuat halaman baru lagi dan memebri dengan nama edit.
  Tambahkan Recordset baru, pada bagian sort tidak usah dirubah, primary key nya adalah filter (NPM adalah primary key) kemudian OK.

• Tambah form edit, klik Insert > Data Objects > Update Record > Record Update Form Wizard. Susun jendela update form wizrdnya seperti Table to update, Connection, After Updating, go to, dan sebagainya. Klik OK.

• Simpan tampilan edit.php. Kemudian buka filephp Setelah file output.php.
• Bloklah 1 kolom klik kanan à Table àInsert Row or Columns..
• pilih column dan klik OK.

• Buat tampilannya nya seperti berikut

• Bloklah pada tulisan Edit kemudian klik Insert > Hyperlink, klik gambar folder disamping untuk link, dan klik edit, klik parameter, ketikan nama parameter yang dipakai, disini saya menggunakan primary key nya NPM, klik dynamic lalu klik NPM, dan OK.
• Setelah itu ok ok terus.

Halaman Hapus Data
1.Buka halaman PHP baru, lalu simpan beri nama Hapus. Kemudian klik Insert > Data Object > Delete Record. Lalu isi seperti ini

2.Klik OK. kembali ke menu output.php untuk membuat link hapus.
3. Ketika telah di halaman output.php, blok kolom nya klik kanan > table > Insert Rows or columns.. pilih columns dan OK
4. Untuk hapus buat hyperlink

5. Blok tulisan Hapus klik Insertà Hyperlink. Buat juga hyperlink edit. Kemudian ok ok
   6. Pada halaman output.php, ganti mode Design menjadi Code

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

• Dan cobalah untuk menjalankannya.

Penulis : Jumalia