P. 1
Step by Step Membuat Web Dreamweaver

Step by Step Membuat Web Dreamweaver

5.0

|Views: 6,404|Likes:
Dipublikasikan oleh Yans Àúliá

More info:

Categories:Types, Maps
Published by: Yans Àúliá on Jul 08, 2012
Hak Cipta:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

05/27/2015

pdf

text

original

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. 2. 3. 4. 5.

Sebuah aplikasi web server, misalkan Apache, Abyss, atau IIS PHP MySQL Sebuah Browser seperti microsoft internet explorer, mozilla, opera, safari. 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 id_kategori kategori TYPE INT (5) VARCHAR (50) Tabel berita FIELD Id_berita id_kategori Judul Synopsis Isi_berita Tanggal TYPE INT (5) INT (5) VARCHAR (100) VARCHAR (250) TEXT DATETIME EXTRA Auto_increment EXTRA Auto_increment

Pemrograman Web STMIK LOMBOK by Hauly21

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Tabel User FIELD Id_user username password TYPE INT (3) VARCHAR (25) VARCHAR (50) EXTRA Auto_increment Setelah database dan table yang kita rancang dibuat di phpmyadmin. sehingga akan muncul jendela sebagai berikut: Pemrograman Web STMIK LOMBOK by Hauly21 . langkah selanjutnya menyiapkan website dinamis di Dreamweaver 8. LANGKAH II Menyiapkan Pembuatan Site Yang Bertugas Sebagai Server Local Klik menu Site → New Site.

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Isikan nama site pada bagian Site Name. folder untuk menyimpan gambar pada bagian Default images folder. folder menyimpan file pada bagian Local root folder. dan alamat http pada HTTP Address seperti pada gambar diatas. lalu isikan pada bagian seperti pada gambar berikut: Pemrograman Web STMIK LOMBOK by Hauly21 . lalu isikan pada bagian-bagian seperti pada gambar berikut: Klik pada Category Testing Server. Klik pada Category Remote Info.

Setelah persiapan website dinamis selesai. Pemrograman Web STMIK LOMBOK by Hauly21 . maka pada panel Files akan tampak seperti berikut.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Klik tombol OK.

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Pembuatan Website dinamis siap dimulai lest Go! LANGKAH III MEMBUAT KONEKSI PHP DAN MYSQL DI DREAMWEAVER 1. lalu klik tanda plus (+) dan pilih MySQL Connection 3. Klik Tab Database. Sehingga akan muncul jendela baru untuk mengisi settingan koneksi Pemrograman Web STMIK LOMBOK by Hauly21 . Buka Panel Application yang terletak disebelah kanan jendela Dreamweaver 2.

Pemrograman Web STMIK LOMBOK by Hauly21 . maka kita akan menambahkan teknik session. Buat file adminhome. Untuklebih amannya proses login ini. 1. Nah sampai pada langkah ini anda berhasil membuat konfigurasi koneksi dengan database MYSQL. maka dia harus melakukan login terdahulu. kalau muncul “Connection was made succesfully. dimana apabila admin ingin mengisikan berita. akan lebih baik bila disesuikan : dengan nama project : localhost : root (sesuai dengan user database MYSQL anda) : Password anda : Pilih database-nya 4. LANGKAH IV MEMBUAT FORM LOGIN Setelah kita membuat koneksi PHP ke MySQL. 2.” berarti koneksi sudah berhasil. tapi kalau tidak berarti ada kesalahan dalam settingan databasenya. Selanjutnya buat sebuah form terlebih dahulu.php 3. buatlah folder admin. Hasilya dapat dilihat pada gambar berikut. Simpan dengan nama index. Kemudian klik OK. kemudian di dalam form buat sebuah table dengan 3 baris dan 2 kolom.php yang akan berfungsi sebagai tujuan apabila proses login berhasil.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Connection Name MYSQL Server User Name Password Databases : Diisi dengan nama koneksi. untuk lebih meyakinkan klik tombol Test. Untuk lebih jelasnya. langkah selanjutnya kita akan membuat form login untukadmin. Buat 2 buah textfield untuk username dan password dan satu buah tombol Submit. Nama koneksi yang anda buat akan muncul dalam Databases (seperti gambar di bawah). yaitu teknik penyimpananvariable di server.

php untuk mengaktifkan form ini agar berfungsi dengan baik. Pada panel Application. Selanjutnya klik User Authentication Log In User 6. 5.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 4. klik tab Server Behavior lalu klik tombol + (plus) untuk menambahkan server behavior. Kembali ke file index. Pemrograman Web STMIK LOMBOK by Hauly21 . Maka akan tampil kotak dialog seperti gambar berikut.

LANGKAH V MEMBUAT HALAMAN ADMINISTRATOR Setelah form login selesai dibuat. Berikut sketsa halaman administrator yang akan kita buat. Hal ini bertujuan untuk mengirim password yang terenkripsi menggunakan md5 hashing. lalu klik tombol + 3. Simpan perubahannya.php sebagai berikut: 1. Pada baris 45 menjadi seperti berikut: $password=md5($_POST['password']). Langkah-langkah proteksi file adminhome.php 2. Ubah skrip berikut $password=$_POST['password']. karena halaman administrator hanya bisa diakses olehuser terdaftar apabila username dan password pada form login benar.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Isi sesuai dengan apa yang ada digambar 7. HEADER HOME KATEGORI BERITA BERITA BUKU TAMU LOGOUT CONTENT FOOTER Lakukan proteksi terhadap file adminhome. 9. Buka file adminhome. Kemudian Klik OK 8.php. langkah selanjutnya membuat halaman administrator. Sekarang kita dapat mengujinya di browser. Klik Panel Application Server Behavior. Pilih User Authentication Restrict Access To Page Pemrograman Web STMIK LOMBOK by Hauly21 . Kita perlu membuat beberapa perubahan kode pada form login.

Isikan seperti gambar diatas. Maka akan tampil kotak dialog seperti berikut: 5. Maksud dari gambar diatas adalah jika username dan password tidak ada atau salah.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 4. pada panel Application Server Behavior. Blok teks menu Logout. maka file akan langsung dialihkan ke file form login (index. lalu klik OK.php) LANGKAH VI MEMBUAT LINK UNTUK MENU LOGOUT 1. lalu klik tombol + Pemrograman Web STMIK LOMBOK by Hauly21 .

php berfungsi sebagai fasilitas untuk manajemen kategori berita. Berikanlah link baru untuk menuju halaman penambahan kategori baru. Beralihlah ke file newkategori. Maka akan tampil gambar berikut LANGKAH VII MEMBUAT HALAMAN KATEGORI File kategori. Pada panel Application. 3.php. kita akan menggunakan Record Insertion Form Wizard untuk melakukan hal tersebut.php 2. lalu simpan ulang [ klik menu File Save as… ] dengan nama kategori.Link-nya adalah newkategori. Pilih User Authentication Log Out User. 3.php. Buka file adminhome.php.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 2.php.Tahap pertama kita akan membuat link untuk menambahkan kategori baru dalam database. 1. selanjutnya buat file baru newkategori. binding table kategori pada database dinamis dengan langkah sbb: Pemrograman Web STMIK LOMBOK by Hauly21 . 4.

Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Maka akan muncul kotak dialog berikut Isilah sesuai dengan gambar diatas. isikan seperti gambar berikut. lalu kilk OK. Lalu akan tampil kotak dialog. Setelah binding table selesai. Pemrograman Web STMIK LOMBOK by Hauly21 . selanjutnya membuat record insertion form wizard. 5.

php. Kemudian klik tombol OK 2. LANGKAH VIII MENAMPILKAN DATA PADA TABEL KATEGORI 1. Maka akan mucul kotak dialog. Buka kembali file kategori.Klik menu Insert Application Objects Dynamic Data Pemrograman Web STMIK LOMBOK by Hauly21 . Kemudian buat Dynamic Table. maka form untuk tambah data kategori sudah jadi. kemudian lakukan binding pada table kategori.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Kemudian klik tombol OK. isikan seperti gambar dibawah.

php dan lakukan filter berdasarkan id. kita akan menambahkan halaman untuk mengedit kategori. Sekarang silahkan coba untuk mengisikan sebuah kategori baru.php. 1.php kemudian Save as… dengan nama editkategori. dam kategori tersebut akan ditampilkan pada halaman kategori.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Dynamic Table Kemudian muncul kotak dialog. Langkah Selanjutnya. isikan seperti gambar berikut. Pemrograman Web STMIK LOMBOK by Hauly21 . Buat binding table kategori pada halaman editkategori. maka secara otomatis tercipta kategori baru dalam database. Buka kembali file adminhome. 2.php.

isikan seperti gambar dibawah. Caranya klik menu Insert Application Pemrograman Web STMIK LOMBOK by Hauly21 . Selanjutnya buat sebuah form untuk update kategori.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Maka akan mucul kotak dialog. 3.

buat sebuah kolom baru untuk menampilkan teks Edit 3. 2. Lihat gambar berikut: Pemrograman Web STMIK LOMBOK by Hauly21 . isikan seperti pada gambar berikut Klik OK 1.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Objects Update Record Record Update Form Wizard Maka akan tampil kotak dialog. Kembali ke file kategori.php. Langkah selanjutnya kita akan membuat url parameter id yang akan kita cocokkan.Pada parameter Name isikan id dan pada Value pilih field id_kategori pada recordset yang memuat table kategori. Pada teks edit berikan link ke editkategori.php dan berikan parameter.

Buka file kategori. pada table tambahkan teks Hapus Pemrograman Web STMIK LOMBOK by Hauly21 .php. simpan dengan nama hapuskategori. 3.php 2. Langkah selanjutnya kita akan membuat fasilitas untuk menghapus kategori. Lalu klik OK. 1. buat halaman baru. maka akan tampil kotak dialognya Isikan data seperti pada gambar diatas.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 Hasil dari parameter akan seperti gambar berikut klik OK. Klik menu Insert Application Objects Delete Records.

php dengan parameter. Kemudian berikan link pada teks hapus menuju file hapuskategori.Tutorial Membuat Website Dinamis Menggunakan Dreamweaver 8 4. Lakukan ujicoba melalui web browser Selamat mencoba Semoga bisa bermamfaat buat siapa saja ! Pemrograman Web STMIK LOMBOK by Hauly21 . 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.

You're Reading a Free Preview

Mengunduh
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->