Membuat Web Dengan Dreamweaver CS5 Part 2

noreply@blogger.com (Anonymous) — Tue, 15 Jul 2014 06:06:00 -0700

Jumpa lagi nah kita sambung lagi tutor yg terputus kali ini kita akan bahas tentang Membuat CMS PHP MYSQL.

Tutorial ini akan menggunakan tiga (3) buah tabel MySQL, yaitu tabel: users, post dan category. Berikut adalah rincian ketiga tabel tersebut:.

user:

CREATE TABLE IF NOT EXISTS `users` (
  `ID` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL,
  `username` varchar(64) NOT NULL,
  `password` varchar(64) NOT NULL,
  `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

post:

 CREATE TABLE IF NOT EXISTS `post` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `title` text NOT NULL,
  `category` varchar(500) NOT NULL,
  `content` text NOT NULL,
  `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

category:

CREATE TABLE IF NOT EXISTS `category` (
  `ID` int(10) NOT NULL AUTO_INCREMENT,
  `category` varchar(100) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

MEMBUAT FORM TAMBAH ADMIN: add-admin.php

Sekarang kita mulai membuka program Adobe Dreamweaver, lalu ikuti langkah berikut ini:

Buka file add-admin.php
Ubah tulisan “Edit admin” menjadi “Add admin”
Kemudian hapus tulisan “Form add-admin goes here”, di sana Anda akan membuat form tambah Admin
Klik Insert > Data Objects > Insert Record > Record Insertion Form Wizard. Jendela baru akan muncul, lakukan beberapa konfigurasi seperti di bawah ini.
Connection: cms_blog, bisa jadi berbeda dengan Anda (tergantung penamaan koneksi pada saat Anda membuat koneksi database PHP MySQL)
Table: users
After inserting, go to: admin.php, Anda juga bisa mengklik Browse untuk mencari file admin.php
Pada menu Form fields Anda akan melihat tanda plus (+), yang artinya Add item dan minus (-) yang artinya Remove item. Di sana Anda juga akan melihat menu Column, Label, Display As dan Submit As. Column adalah kolom yang ada di dalam tabel MySQL Anda, dalam hal ini tentunya tabel users.
Pada menu Column, klik kolom ID, lalu klik tanda minus (-). Lakukan hal yang sama pada kolom updated. Ini artinya, yang tersisa hanya kolom name,
usernamedan password. Selanjutnya Anda akan merubah menu Display As kolom password, sehingga yang semula berupa text field berubah menjadi password field
Klik pada kolom password, lalu pada menu bagian bawah, Anda akan melihat menu Display As:, klik pop-up menu yang ada, lalu ubah menjadi Password field
Klik OK jika sudah selesai, form Anda akan muncul pada design view
Klik Split View, lakukan perubahan/penambahan kode dengan tangan Anda. Cari kode <table align=”center”> lalu ubah menjadi <table align=”center” class=”data-table”>. Lakukan juga perubahan pada button, cari kode berikut <input type=”submit” value=”Insert record”> lalu ubah value-nya menjadi <input type=”submit” value=”Add admin”>
Copy code <input type=”submit” value=”Add admin”> tersebut, lalu Paste di sampingnya lalu ubah menjadi: <input name=”Reset” type=”reset” value=”Reset”>. Perubahan/hasil akhir dari dua buah button tersebut menghasilkan kode seperti ini: <input type=”submit” value=”Add admin”><input name=”Reset” type=”reset” value=”Reset”>
Sekarang Anda mempunyai dua buah button, yang satu untuk Add admin dan yang satunya adalah tombol Reset
Simpan kembali file add-admin.php, cobalah melalui browser. Anda telah berhasil membuat dan mengaktifkan form tersebut.
Lakukan ujicoba memasukkan bebeberapa nama, username dan password. Setiap kali selesai menambahkan nama, username dan password, Anda akan dialihkan ke halaman admin.php

MEMBUAT LISTING ADMIN, MENAMBAHKAN DYNAMIC LINK EDIT DAN DELETE: admin.php
Langkah selanjutnya adalah menampilkan listing admin/user yang telah ditambahkan ke dalam database sehingga Anda dapat mengaturnya, mengedit dan menghapusnya. Berikut adalah langkah-langkahnya.

Buka file admin.php, bukalah dengan Design View
Untuk menyamakan persepsi, kita sama workspace terlebih dahulu. Klik Windows, lalu pastikan hanya menu Properties, Bindings, Appiclation Bar dan file admin.php yang diberi tanda check (checked), jika ada selain menu-menu tersebut, silakan dinonaktifkan dengan mengklik/unchecked pada menu tersebut. Menu Bindings akan muncul di sebelah kanan workspace Anda, di sana Anda juga akan menemukan tombol tanda plus (+).
Klik tanda plus (+) tersebut, lalu pilih/klik Recordset (Query). Jendela Recordset akan keluar. Lakukan beberapa konfigurasi seperti pada langkah berikut ini:
Name: rsUser, penamaan recordset/query di sini adalah bebas, Anda diijinkan untuk memberi nama yang berbeda
Connection: cms_blog
Table: users
Sort: name. Klik pop-up menu pertama, lalu pilih kolom name, lalu pada pop-up menu kedua, biarkan nilai ASCENDING tetap seperti semula. Ini artinya Anda akan mengurutkan namanya berdasarkan abjad.
Klik Test untuk mengetes query Anda, jika Anda telah memasukkan data user/admin sebelumnya, maka Anda akan melihat nama user diurutkan berdasarkan abjad. Klik OK untuk menutup jendela Test
Klik OK sekali lagi. Anda telah berhasil membuat query. Pada menu Bindings, Anda akan melihat Recordset (rsUser) telah muncul.
Klik icon/tanda plus (yang berada dalam jendela Recordset (rsUser) yang berbackground putih. Di sana Anda akan melihat kolom tabel user secara detail yang terdiri atas ID, name, username, password, dan updated
Cari tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic data yang telah Anda simpan dalam tabel user.
Melalui panel/menu Bindings dan Recordset (rsUser), klik kolom tabel name, lalu drag/tarik/seret menuju teks yang telah Anda hapus (Langkah 11)
Lalu cari tulisan “2001-10-22 09:00″, kemudian hapus
Melalui panel/menu Bindings dan Recordset (rsUser), klik kolom tabel password, lalu drag/tarik/seret menuju teks yang telah Anda hapus (Langkah 13)
Seleksi tulisan “Edit”, lalu klik kanan > Make link kemudian jendela Select File akan muncul. Buka folder admin, lalu klik file edit-admin.php
Masih di jendela Select File, klik tombol Parameters… yang berada di sebelah kanan bawah. Klik tombol Parameters… tersebut. Jendela Parameters akan muncul yang otomatis akan membuka kolom Name
Pada kolom Name, ketik edit, lalu klik pada kolom Value, sejajar dengan tulisan edit. Anda akan diminta untuk mengisinya, klik icon/tanda petir/listrik untuk memberikan dynamic value dari tabel user. Jendela Dynamic Data akan keluar. Pilih kolom ID (Jika kolom ID tidak keluar, klik tanda plus dari Recordset (rsUser).
Klik OK sebanyak tiga kali untuk menyelesaikannya. Hasil dari langkah ini nantinya akan menghasilkan link http://localhost/cms_blog/admin/edit-admin.php?edit=1
Seleksi tulisan “Delete”, lalu klik kanan > Make link kemudian jendela Select File akan muncul. Buka folder admin, lalu klik file edit-admin.php
Masih di jendela Select File, klik tombol Parameters… yang berada di sebelah kanan bawah. Klik tombol Parameters… tersebut. Jendela Parameters akan muncul yang otomatis akan membuka kolom Name
Pada kolom Name, ketik delete, lalu klik pada kolom Value, sejajar dengan tulisan delete. Anda akan diminta untuk mengisinya, klik icon/tanda petir/listrik untuk memberikan dynamic value dari tabel user. Jendela Dynamic Data akan keluar. Pilih kolom ID (Jika kolom ID tidak keluar, klik tanda plus dari Recordset (rsUser).
Klik OK sebanyak tiga kali untuk menyelesaikannya. Hasil dari langkah ini nantinya akan menghasilkan link http://localhost/cms_blog/admin/edit-admin.php?delete=1
Simpan kembali file admin.php

Membuat Repeat Region dan paging halaman
Untuk membuat repeat region, cari kode di bawah ini (ubah dalam tampilan Code View), lalu seleksi kode berikut ini:

<tr>
<td width="50%"><?php echo $row_rsUser['name']; ?></td>
<td width="25%"><?php echo $row_rsUser['password']; ?></td>
<td width="25%"><a href="edit-admin.php?edit=<?php echo $row_rsUser['ID'];

?>">Edit</a> | <a href="edit-admin.php?delete=<?php echo $row_rsUser['ID'];

?>">Delete</a>

</td>
</tr>

Kemudian klik Insert > Data Objects > Repeat Region. Jendela Repeat Region akan keluar. Lalu pada menu tersebut:

Recordset: rsUser
Show: 5 Records at a time, ubah nilai 10 menjadi 5. Ini artinya akan ditampilkan 5 data user/admin dalam satu halaman
Klik OK untuk menyelesaikannya

Langkah selanjutnya adalah membuat paging halaman untuk menampilkan data user jika ternyata user lebih dari 5 orang. Melalui Code View, cari kode dibawah ini:
<th colspan=”3″> </th>
Lalu hapus kode   tersebut dan biarkan kursor Anda tetap di sana. Kemudian klik Insert > Data Objects > Recordset Paging > Recordset Navigation Bar, jendela Recordset Navigation Bar akan keluar. Lakukan beberapa konfigurasi di bawah ini:

Recordset: rsUser
Display using: Text
Klik OK untuk menyelesaikannya

Ok Bersambung

Membuat Web Dengan Dreamweaver CS5 Part 1

noreply@blogger.com (Anonymous) — Mon, 14 Jul 2014 15:30:00 -0700

Untuk pertama kali memulai membuat web dengan dreamweaver cs5, kita harus membuat Definition dahulu,
berikut cara membuat defenition di dreamweaver cs5 :

Klik Site > New Site
Isi Site Name, dalam latihan ini Site Name diisi Websiteku.
Local site folder, silakan klik icon folder pada Local Site Folder dan buatlah folder baru di dalam folder C:\xampp\htdocs\ dengan nama folder Websiteku, sehingga akan muncul C:\xampp\htdocs\Websiteku\. Klik Open > Select.

Klik Server pada list di sebelah kiri. Hal ini akan membuka panel dimana Anda dapat menyetting jenis pengetesan di Local Server ataupun Remote Server
Klik tanda plus (+) untuk menambah Server baru guna pengetesan website dinamis yang akan kita buat.
Pada menu Basic, klik pada Connect Using: Local/Network
Untuk selanjutnya, gunakan settingan berikut ini:
Server Name: Websiteku
Connect using: Local/Network
Server Folder: ,klik icon folder untuk menemukan folder Websiteku yang tadi telah Anda buat atau dengan mengetikkan C:\xampp\htdocs\Websiteku (hal ini bisa berbeda tergantung dari setinggan computer Anda).
Web URL: http://localhost/Websiteku/ (hal ini juga bisa berbeda tergantung dari setinggan computer Anda). Hal ini member tahu Dreamweaver bahwa website Anda berada dalam document root dengan sub folder bernama Websiteku.

Klik tombol Advanced pada sisi atas dari panel, lalu dari pop-up menu, pilih PHP MySQL sebagai Server Model untuk pengetesan website Anda.
Pilih Save untuk menyimpan settingan dari website yang telah kita buat tadi. Secara default, Dreamweaver CS5 akan member tanda centang (check) pada Remote testing server.
Hilangkan tanda centang (uncheck) pada Remote tadi dan klik (beri tanda check) pada Testing. Hal ini sangat penting. http://localhost/ adalah local server tempat kita melakukan pengetesan atas website yang kita buat. Jika Anda menggunakan MAMPP dengan Operating System Mac, maka Anda harus menggunakan alamat localhost http://localhost:8888/Websiteku/. Penambahan 8888 adalah keharusan jika Anda menggunakan Apache dan MySQL secara default.

Klik Save. Dreamweaver CS5 secara otomatis akan menutup Site Setup Dialog dan akan segera membuat Site Cache. Anda dapat melihat site yang baru saja Anda buat telah tampil di File Anda.

Lakukan pengetesan di browser Anda dengan membuka http://localhost/Websiteku. Maka akan muncul tampilan kosong seperti ini. Hal ini terjadi karena kita belum membuat file sama sekali.

Selanjutnya kita harus membuat Koneksi database PHP My SQL
Berikut adalah langkah-langkah membuat koneksi database PHP MySQL:

Pastikan Anda membuka file dengan ekstensi PHP
Klik Windows > Databases, maka akan muncul panel Databases.
Klik Icon Plus (+) > MySQL Connection

Isi beberapa parameter berikut ini.
Connection name: koneksiku, Anda dapat memilih nama lain.
MySQL Server: localhost, ini jika Anda bekerja di localhost
User name: root, secara default Xampp menggunakan username root. Bisa jadi berbeda dengan konfigurasi web server di komputer Anda
Password: , biarkan kosong kecuali Anda telah mensetting password di web server dan database Anda.
Database: jwm, klik Select untuk memilih database. Klik OK

Klik Test, jika muncul tulisan pop-up “Connection was made successfully”.
Klik OK sekali lagi

Nah Berhasil dech membuat koneksi

Berhubung Sudah mulai lelah kita sambung lagi di lain waktu

NAYAKA PASSYA

Membuat Web Dengan Dreamweaver CS5 Part 2

Membuat Web Dengan Dreamweaver CS5 Part 1