Top Banner
Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 LANGKAH I PERSIAPAN PEMBUATAN TABEL Website dinamis adalah website yang dapat menampilkan hamalan-halaman web dengan informasi yang selalu berubah secara atraktif dan dapat berinterkasi dengan user. PHP sangat bagus digunakan untuk membuat website dinamis. Karena, PHP tidak dapat menyimpan informasi sendiri, maka diperlukan sebuah database untuk menyimpan informasi yang ditampilkan. MySQL adalah salah satu pilihan dalam mengembangkan website dinamis dengan PHP. MySQL sangat mudah diakses dari PHP. Kelebihan PHP dan MySQL adalah dapat berjalan di semua sistem operasi. Mulai Dari tutorial ini akan dijelaskan bagaimana cara Membuat Website Dinamis Menggunakan Dreamweaver. Apa yang Anda Perlukan untuk Membangun Website Dinamis? 1. Sebuah aplikasi web server, misalkan Apache, Abyss, atau IIS 2. PHP 3. MySQL 4. Sebuah Browser seperti microsoft internet explorer, mozilla, opera, safari. 5. Sebuah text editor (dalam membuat tutorial ini digunakan macromedia dreamweaver) Untuk lebih mudahnya anda bisa menginstall XAMPP yang sudah berisi Apache, PHP, dan MySQL dalam satu paket. Dan XAMPP ini bisa didownload gratis. Cara menginstall dan Menggunakan XAMPP bisa ada lihat di install xampp . Sebelum melagkah lebih jauh, perlu kita batasi dahulu, bahwa website dinamis yang akan kita buat adalah website berita yang menampilkan berita secara up to date dilengkapi halaman administrator untuk input berita. Membuat Database Langkah pertama yang perlu kita lakukan adalah membuat database di MySQL menggunakan tool PHPMyAdmin. Tabel yang kita perlukan hanya table kategori, table berita dan table user saja, berikut struktur tabelnya. Tabel kategori Pemrograman Web STMIK LOMBOK by Hauly21
19

Step by Step Membuat Web Dreamweaver

Jul 25, 2015

Download

Documents

Yans Àúliá
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

LANGKAH I PERSIAPAN PEMBUATAN TABEL

Website dinamis adalah website yang dapat menampilkan hamalan-halaman web dengan informasi yang selalu berubah secara atraktif dan dapat berinterkasi dengan user. PHP sangat bagus digunakan untuk membuat website dinamis. Karena, PHP tidak dapat menyimpan informasi sendiri, maka diperlukan sebuah database untuk menyimpan informasi yang ditampilkan. MySQL adalah salah satu pilihan dalam mengembangkan website dinamis dengan PHP. MySQL sangat mudah diakses dari PHP. Kelebihan PHP dan MySQL adalah dapat berjalan di semua sistem operasi.

Mulai Dari tutorial ini akan dijelaskan bagaimana cara Membuat Website Dinamis Menggunakan Dreamweaver.

Apa yang Anda Perlukan untuk Membangun Website Dinamis?

1. Sebuah aplikasi web server, misalkan Apache, Abyss, atau IIS2. PHP3. MySQL4. Sebuah Browser seperti microsoft internet explorer, mozilla, opera, safari.5. Sebuah text editor (dalam membuat tutorial ini digunakan macromedia dreamweaver)

Untuk lebih mudahnya anda bisa menginstall XAMPP yang sudah berisi Apache, PHP, dan MySQL dalam satu paket. Dan XAMPP ini bisa didownload gratis. Cara menginstall dan Menggunakan XAMPP bisa ada lihat di install xampp.

Sebelum melagkah lebih jauh, perlu kita batasi dahulu, bahwa website dinamis yang akan kita buat adalah website berita yang menampilkan berita secara up to date dilengkapi halaman administrator untuk input berita.

Membuat Database

Langkah pertama yang perlu kita lakukan adalah membuat database di MySQL menggunakan tool PHPMyAdmin. Tabel yang kita perlukan hanya table kategori, table berita dan table user saja, berikut struktur tabelnya.

Tabel kategori

FIELD TYPE EXTRA

id_kategori INT (5) Auto_increment

kategori VARCHAR (50)

Tabel berita

FIELD TYPE EXTRA

Id_berita INT (5) Auto_increment

id_kategori INT (5)

Judul VARCHAR (100)

Synopsis VARCHAR (250)

Isi_berita TEXT

Tanggal DATETIME

Pemrograman Web STMIK LOMBOK by Hauly21

Page 2: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Tabel User

FIELD TYPE EXTRA

Id_user INT (3) Auto_increment

username VARCHAR (25)

password VARCHAR (50)

Setelah database dan table yang kita rancang dibuat di phpmyadmin, langkah selanjutnya menyiapkan website dinamis di Dreamweaver 8.

LANGKAH IIMenyiapkan Pembuatan Site Yang Bertugas Sebagai Server Local

Klik menu Site → New Site, sehingga akan muncul jendela sebagai berikut:

Pemrograman Web STMIK LOMBOK by Hauly21

Page 3: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Isikan nama site pada bagian Site Name, folder menyimpan file pada bagian Local root folder, folder untuk menyimpan gambar pada bagian Default images folder, dan alamat http pada HTTP Address seperti pada gambar diatas.

Klik pada Category Remote Info, lalu isikan pada bagian-bagian seperti pada gambar berikut:

Klik pada Category Testing Server, lalu isikan pada bagian seperti pada gambar berikut:

Pemrograman Web STMIK LOMBOK by Hauly21

Page 4: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Klik tombol OK. Setelah persiapan website dinamis selesai, maka pada panel Files akan tampak seperti berikut.

Pemrograman Web STMIK LOMBOK by Hauly21

Page 5: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Pembuatan Website dinamis siap dimulai lest Go!

LANGKAH IIIMEMBUAT KONEKSI PHP DAN MYSQL DI DREAMWEAVER

1. Buka Panel Application yang terletak disebelah kanan jendela Dreamweaver2. Klik Tab Database, lalu klik tanda plus (+) dan pilih MySQL Connection

3. Sehingga akan muncul jendela baru untuk mengisi settingan koneksi

Pemrograman Web STMIK LOMBOK by Hauly21

Page 6: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Connection Name : Diisi dengan nama koneksi, akan lebih baik bila disesuikan : dengan nama project

MYSQL Server : localhostUser Name : root (sesuai dengan user database MYSQL anda)Password : Password andaDatabases : Pilih database-nya

4. Nah sampai pada langkah ini anda berhasil membuat konfigurasi koneksi dengan database MYSQL, untuk lebih meyakinkan klik tombol Test, kalau muncul “Connection was made succesfully.” berarti koneksi sudah berhasil, tapi kalau tidak berarti ada kesalahan dalam settingan databasenya. Kemudian klik OK. Nama koneksi yang anda buat akan muncul dalam Databases (seperti gambar di bawah).

LANGKAH IVMEMBUAT FORM LOGIN

Setelah kita membuat koneksi PHP ke MySQL, langkah selanjutnya kita akan membuat form login untukadmin, dimana apabila admin ingin mengisikan berita, maka dia harus melakukan login terdahulu. Untuklebih amannya proses login ini, maka kita akan menambahkan teknik session, yaitu teknik penyimpananvariable di server.

Untuk lebih jelasnya, buatlah folder admin.

1. Selanjutnya buat sebuah form terlebih dahulu, kemudian di dalam form buat sebuah table

dengan 3 baris dan 2 kolom. Buat 2 buah textfield untuk username dan password dan satu buah

tombol

Submit. Hasilya dapat dilihat pada gambar berikut.

2. Simpan dengan nama index.php

Pemrograman Web STMIK LOMBOK by Hauly21

Page 7: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

3. Buat file adminhome.php yang akan berfungsi sebagai tujuan apabila proses login berhasil.

4. Kembali ke file index.php untuk mengaktifkan form ini agar berfungsi dengan baik.

5. Pada panel Application, klik tab Server Behavior lalu klik tombol + (plus) untuk menambahkan

server behavior. Selanjutnya klik User Authentication Log In User

6. Maka akan tampil kotak dialog seperti gambar berikut.

Pemrograman Web STMIK LOMBOK by Hauly21

Page 8: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Isi sesuai dengan apa yang ada digambar

7. Kemudian Klik OK

8. Kita perlu membuat beberapa perubahan kode pada form login. Ubah skrip berikut

$password=$_POST['password'];

Pada baris 45 menjadi seperti berikut:

$password=md5($_POST['password']);

Hal ini bertujuan untuk mengirim password yang terenkripsi menggunakan md5 hashing.

9. Simpan perubahannya. Sekarang kita dapat mengujinya di browser.

LANGKAH V

MEMBUAT HALAMAN ADMINISTRATOR

Setelah form login selesai dibuat, langkah selanjutnya membuat halaman administrator.

Berikut sketsa halaman administrator yang akan kita buat.

HEADERHOME KATEGORI BERITA BERITA BUKU TAMU LOGOUT

CONTENT

FOOTER

Lakukan proteksi terhadap file adminhome.php, karena halaman administrator hanya bisa diakses olehuser terdaftar apabila username dan password pada form login benar. Langkah-langkah proteksi file adminhome.php sebagai berikut:

1. Buka file adminhome.php

2. Klik Panel Application Server Behavior, lalu klik tombol +

3. Pilih User Authentication Restrict Access To Page

Pemrograman Web STMIK LOMBOK by Hauly21

Page 9: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

4. Maka akan tampil kotak dialog seperti berikut:

5. Isikan seperti gambar diatas, lalu klik OK.

Maksud dari gambar diatas adalah jika username dan password tidak ada atau salah, maka file akan

langsung dialihkan ke file form login (index.php)

LANGKAH VIMEMBUAT LINK UNTUK MENU LOGOUT

1. Blok teks menu Logout, pada panel Application Server Behavior, lalu klik tombol +

Pemrograman Web STMIK LOMBOK by Hauly21

Page 10: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

2. Pilih User Authentication Log Out User.3. Maka akan tampil gambar berikut

LANGKAH VIIMEMBUAT HALAMAN KATEGORI

File kategori.php berfungsi sebagai fasilitas untuk manajemen kategori berita.Tahap pertama kita

akan membuat link untuk menambahkan kategori baru dalam database, kita akan menggunakan Record

Insertion Form Wizard untuk melakukan hal tersebut.

1. Buka file adminhome.php, lalu simpan ulang [ klik menu File Save as… ] dengan nama

kategori.php

2. Berikanlah link baru untuk menuju halaman penambahan kategori baru.Link-nya adalah

newkategori.php, selanjutnya buat file baru newkategori.php.

3. Beralihlah ke file newkategori.php.

4. Pada panel Application, binding table kategori pada database dinamis dengan langkah sbb:

Pemrograman Web STMIK LOMBOK by Hauly21

Page 11: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Maka akan muncul kotak dialog berikut

Isilah sesuai dengan gambar diatas, lalu kilk OK.

5. Setelah binding table selesai, selanjutnya membuat record insertion form wizard.

Lalu akan tampil kotak dialog, isikan seperti gambar berikut.

Pemrograman Web STMIK LOMBOK by Hauly21

Page 12: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Kemudian klik tombol OK, maka form untuk tambah data kategori sudah jadi.

LANGKAH VIIIMENAMPILKAN DATA PADA TABEL KATEGORI

1. Buka kembali file kategori.php, kemudian lakukan binding pada table kategori.

Maka akan mucul kotak dialog, isikan seperti gambar dibawah.

Kemudian klik tombol OK

2. Kemudian buat Dynamic Table.Klik menu Insert Application Objects Dynamic Data

Pemrograman Web STMIK LOMBOK by Hauly21

Page 13: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Dynamic Table

Kemudian muncul kotak dialog, isikan seperti gambar berikut.

Sekarang silahkan coba untuk mengisikan sebuah kategori baru, maka secara otomatis

tercipta kategori baru dalam database, dam kategori tersebut akan ditampilkan pada halaman

kategori.php.

Langkah Selanjutnya, kita akan menambahkan halaman untuk mengedit kategori.

1. Buka kembali file adminhome.php kemudian Save as… dengan nama editkategori.php.

2. Buat binding table kategori pada halaman editkategori.php dan lakukan filter berdasarkan id.

Pemrograman Web STMIK LOMBOK by Hauly21

Page 14: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Maka akan mucul kotak dialog, isikan seperti gambar dibawah.

3. Selanjutnya buat sebuah form untuk update kategori. Caranya klik menu Insert Application

Pemrograman Web STMIK LOMBOK by Hauly21

Page 15: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Objects Update Record Record Update Form Wizard

Maka akan tampil kotak dialog, isikan seperti pada gambar berikut Klik OK

1. Langkah selanjutnya kita akan membuat url parameter id yang akan kita cocokkan.

2. Kembali ke file kategori.php, buat sebuah kolom baru untuk menampilkan teks Edit

3. Pada teks edit berikan link ke editkategori.php dan berikan parameter.Pada parameter Name isikan

id dan pada Value pilih field id_kategori pada recordset yang memuat table kategori. Lihat gambar

berikut:

Pemrograman Web STMIK LOMBOK by Hauly21

Page 16: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

Hasil dari parameter akan seperti gambar berikut klik OK.

Langkah selanjutnya kita akan membuat fasilitas untuk menghapus kategori.

1. buat halaman baru, simpan dengan nama hapuskategori.php

2. Klik menu Insert Application Objects Delete Records, maka akan tampil kotak

dialognya

Isikan data seperti pada gambar diatas. Lalu klik OK.

Pemrograman Web STMIK LOMBOK by Hauly21

Page 17: Step by Step Membuat Web Dreamweaver

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 

3. Buka file kategori.php, pada table tambahkan teks Hapus

4. Kemudian berikan link pada teks hapus menuju file hapuskategori.php dengan parameter.

Pada parameter Name isikan id dan pada Value pilih field id_kategori pada recordset yang

memuat table kategori. Lihat gambar berikut

Kemudian klik OK

5. Lakukan ujicoba melalui web browser

Selamat mencoba Semoga bisa bermamfaat buat siapa saja !

Pemrograman Web STMIK LOMBOK by Hauly21