Modul 2 DreamWeaver MX Suendri, S.Kom

Modul 2 DreamWeaver MX 2004 Suendri, S.Kom

Modul 2, Dreamweaver MX 2004

-- Untuk Indonesia Tanah Air Tercinta --

Suendri, S.Kom

2


Lisensi Dokumen Seluruh isi dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara

luas

untuk

tujuan

pendidikan,

pembelajaran

dan

bukan

komersial

(nonprofit) dengan syarat tidak menghilangkan, menghapus atribut penulisan dokumen ini dan pernyataan dalam lisensi dokumen yang disertakan dalam setiap dokumen. Dibenarkan melakukan penulisan ulang tanpa harus mendapat izin penulis untuk tujuan pendidikan tapi bukan untuk komersial. Ilmu hanya milik Allah Tabarako wata’ala.

Suendri, S.Kom

3


Kata Pengantar Puji dan syukur kepada Allah Tabaroka wata’ala, atas rahmatnya hingga terselesai revisi modul ini. Pada pertengahan 2010, penulis telah mulai menyusun modul Dreamweaver MX 2004 untuk penunjang Matakuliah Pemrograman Web, Namun karena pada tahun tersebut merupakan awal penulis dalam pengajaran Matakuliah tersebut, penulis merasa modul tersebut dibuat dengan bentuk sederhana dan tampilan yang kurang menarik serta banyaknya kesalahan dibeberapa tempat. Oleh karena itu, penulis berusaha untuk memperbaiki kesalahan tersebut dan membuat modul menjadi lebih mudah dimengerti dengan langkah-langkah yang lebih tersusun rapi. Penulis menyadari, dalam modul ini masih terdapat kekurangan dan kesalahan, oleh karena itu mohon kritik dan saran untuk kesempurnaan modul ini. Akhirnya, penulis berharap, mudah-mudahan modul ini bisa bermanfaat bagi para pembaca dan bermanfaat untuk Pendidikan di Indonesia.

Penulis

Suendri

Suendri, S.Kom

4


Project

: Input dan Tampil data

Tujuan

: Membuat Input dan Tampil Data menggunakan Dreamweaver.

Asumsi ! Apache dan MySQL anda telah running. PhpMyadmin anda telah running. Anda menggunakan Phptriad2-2-1, jika menggunakan Software lain silakan lihat modul 1.

Silakan ikuti langkah demi langkah pada panduan berikut, jika anda bingung pada pertengahan latihan, jangan takut untuk mengulang kembali dari awal, karena ilmu tidak bisa didapat dengan cara instant, hanya orang yang sering latihan yang akan lancar dan paham.

1

Buatlah Folder di c:/apache/htdocs dengan nama latihan1.

Gambar 1. Folder latihan1

TIPS! Dalam latihan, dua Azimat yang perlu anda ingat, 1. Gunakan selalu huruf kecil. 2. Jangan ada Spasi, kecuali pada tempat yang semestinya.

Suendri, S.Kom

5


2

Bukalah

Dreamweaver

MX

2004,

Atur

Site

anda,

anda

bisa

membuatnya di menu Site -> Manage Sites.. Kemudian Klik tombol New… dan pilih Site, seperti pada gambar berikut.

Gambar 2. Menu Manage Site

Gambar 3. Form Manage Site

Gambar 4. New site

TIPS! Nama Site bersifat case sensitif, Tidak bisa dibuat 2 kali dengan nama yang sama, pastikan masing-masing latihan anda bedakan.

Suendri, S.Kom

6


3

Buatlah nama Site anda, sesuai nama folder latihan kita, latihan1.

Berikutnya klik Next.

latihan1

Gambar 5. Nama site

4

Pada halaman berikutnya anda akan menemui pilihan server yang

digunakan, Silakan pilih PHP Mysql seperti pada gambar.

Gambar 6. Server yang digunakan

Suendri, S.Kom

7


5

Langkah berikutnya, File Kerja dan Tempat Penyimpanan. Anda

akan dihadapkan 3 pilihan, Pilih Edit and test locally, karena kita hanya berkerja di local computer tanpa remote ke komputer lain, kemudian silakan cari

tempat

penyimpanan

anda,

pada

latihan

kali

ini

di

c://apache/htdocs/latihan1.

c:\apache\htdocs\latihan1\

Gambar 7. File Kerja dan Tempat Penyimpanan

6

Testing File, adalah URL tempat dimana web kita akan di Browse,

silakan isikan http://localhost/latihan1, kemudian anda bisa mengklik test URL untuk mencoba apakan koneksi berhasil. Seperti pada gambar berikut.

Catatan : Jika Apache anda belum running, maka Test URL tidak akan berhasil anda lakukan, jadi pastikan Apache dan MySQL anda telah Running.

Suendri, S.Kom

8


http://localhost/latihan1

Gambar 8. Testing Files

7

Selanjutnya, Pilihan Sharing Files, silakan Pilih No saja.

Gambar 9. Sharing File

Suendri, S.Kom

9


8

Summary, silakan pilih Done, berarti Pengaturan Site anda telah

selesai dilakukan.

Gambar 10. Summary

9

Pengaturan Site selesai, klik Done untuk mengakhiri sekaligus

menggunakan Site ini.

Gambar 11. Done

Suendri, S.Kom

10


Selamat Datang di Dreamweaver. Sekarang saatnya anda membuat File baru

Gambar 12. Site Manager Complete

10

Langkah

berikutnya

buat

sebuah File baru, Klik Kanan pada Window bagian kanan, Pilih New File. Beri nama pada File tersebut dengan input_guru.php.

TIPS ! Pemberian nama file bisa anda gunakan dengan cara, Fungsi File ditambah Nama Table, bisa anda pisah dengan underscore ”_”. Contoh input_guru.php, tampil_guru.php, edit_guru.php serta delete_guru.php dan sebagainya.

Suendri, S.Kom

11


11

Double click nama file yang diinginkan, yakni input_guru.php Langkah selanjutnya buat recordset untuk file input_guru.php,

pengertian recordset dapat anda lihat pada modul sebelumnnya. Ada 2 cara untuk

membuat

recordset,

namun

agar

lebih

mudah

anda

bisa

mengambilnya pada shortcut yang telah ada pada menu utama.

Gambar 14. Recordset

TIPS! Agar tersusun rapi, pemberian Nama recordset bisa anda lakukan dengan cara rec_fungsi-file_nama-table contoh : rec_input_guru

Untuk

menghubungkan

ke

database, silakan pilih koneksi data yang digunakan. Karena kita belum punya koneksi, maka silakan buat koneksi baru. Pilih New

Gambar 16. Koneksi database

Suendri, S.Kom

12


Gambar 17. MySQL Connection

Gambar 18. Pilih Database

Connection name = Mysql server = Username = Password = Database =

koneksi localhost root (kosongkan) dbguru

Gambar 19. Koneksi Complete

Suendri, S.Kom

13


Jika pengaturan koneksi telah siap, silakan pilih connection anda beserta table yang ingin digunakan yaitu table guru. Klik OK untuk selesai.

Gambar 20. Recordset Complete

12

Setelah Recordset berhasil dibuat, langkah selanjutnya adalah

membuat Form Input guru, ada 2 cara untuk membuat form : a. Record Insertion Form Wizard, yaitu membuat form secara otomatis yang diambil dari field tabel yang ada pada database. b. Insert Record, yaitu membuat form secara manual. Anda dapat melihat tutorial lanjut pada Expert Modul.

Gambar 21. Record Insertion Form Wizard

Suendri, S.Kom

14


Berikutnya anda akan dihadapkan pada pengisian Record insertion Form. Silakan isi sesuai pilihan yang ada. a. Connections = koneksi b. Table

= guru

c. After inserting, go to = untuk pilihan ini boleh anda isi dan boleh tidak, jika anda ingin mengisi form ini, terlebih dahulu buatlah file baru dengan nama tampil_guru.php. manfaat dari form ini adalah ketika pada saat anda melakukan input guru dan button simpan di klik, maka anda akan di arahkan ke file yang anda inginkan, sebagai contoh tampil_guru.php

Gambar 23. Record Insertion Form Wizard

Gambar 24. Record Insertion Form

TIPS ! Untuk Field ID pada contoh kasus ini, karena type filenya auto increment, maka anda bisa menghapus field ini dengan menekan tanda ”-” ( Minus ) pada Form Fields.

Suendri, S.Kom

15


Form Input telah selesai, silakan tambah beberapa tulisan pendukung serta warna serta desain yang anda inginkan. Simpan latihan anda.

Gambar 24. Form Input complete

Preview file input_guru.php

Gambar 24. Preview Form input_guru.php

Sampai pada tahap ini untuk proses input telah selesai, anda bisa menggunakan

langkah

demi

langkah

untuk

berbagai

table

yang

menggunakan proses input ke dalam tabel tersebut.

Catatan : Koneksi hanya dibuat satu kali untuk satu website, jadi langkah pembuatan koneksi tidak lagi dilakukan untuk form input berikutnya, anda tinggal memilih pilihan koneksi, kecuali anda menggunakan lebih dari satu database. Suendri, S.Kom

16


13

Selanjutnya kita buat file baru, tampil_guru.php. file ini akan

menampilkan tabel hasil input yang kita lakukan. Silakan atur recordset untuk tampil_guru.php

Gambar 25. Recordset

Berikut silakan isi Name, Connection dan Table yang diinginkan. Klik OK jika anda telah selesai.

Gambar 26. recordset tampil_guru.php

13

Langkah

terakhir,

silakan

pilih

menu

Dynamic

table

untuk

menampilkan data yang ada dalam database.

Suendri, S.Kom

17


Gambar 27. Menu Dynamic Table

Pilih recordset yang anda buat sebelumnya, kemudian pada option Show, isikan jumlah table yang ingin anda tampilkan atau pilih All records jika anda ingin menampilkan semuanya. Klik OK jika anda telah selesai.

Gambar 28. Set Dynamic Table

Tampil_guru.php telah selesai, agar lebih bagus, silakan tambah beberapa

desain

tambahan

seperti

judul,

warna

background

dan

sebagainya.

Gambar 29. tampil_guru.php

Suendri, S.Kom

18


Preview akhir tampil_guru.php.

Gambar 30. Preview tampil_guru.php

input_guru.php dan tampil_guru.php telah selesai anda buat, untuk selanjutnya silakan gunakan modul 3 untuk membuat file edit dan delete. Catatan Penulis : Recordset pada input data, sebenarnya tidak perlu anda buat, karena untuk input tidak membutuhkan recordset, namun agar langkahnya lebih tersusun rapi pada masing-masing file nantinya, maka saya membuatkan recordset, jika anda telah mahir, abaikan tahap tersebut.

Suendri, S.Kom

19


Biografi Penulis Nama

: Suendri

Jenjang Pendidikan : S1 Sistem Komputer UPI YPTK Padang S2 Magister Komputer UPI YPTK Padang (Penyelesaian). Email

: [email protected], [email protected]

Website

: http://openwebmurah.com

Merupakan

Dosen

Muda

Sekolah

Tinggi

Manajemen

Informatika dan Komputer (STMIK) Royal Kisaran. Matakuliah yang pernah dipegang antara lain Pemrograman Berorientasi Objek, Pengantar Internet, Pemrograman Website dan Komunikasi Data. Selain sebagai dosen sekaligus Staff dan Programer SISFO Kampus STMIK Royal https://amikroyal.ac.id juga web

developer

http://royal.ac.id.

Tutorial

ini

dapat

anda

download

di

website

http://openwebmurah.com

Suendri, S.Kom

20

Modul 2 DreamWeaver MX Suendri, S.Kom

Recommend Documents