Membuat Koneksi Database PHP MySQL di

Dreamweaver 8
Masih membahas materi Pemograman Web2. Kali ini saya akan membahas membuat koneksi
database
PHP
MySQL
di
Macromedia
Dreamweaver
8.
Berikut

in

langkah

langkahnya

Klik start --> pilih all program --> pilih macromedia --> pilih MacromediaDreamweaver8
Muncul jendela pertama kayak gambar dibawah ini:

File klik manage sites --> pilih New --> pilih site

- Mengisi Site Definition :

Step 1 :

Isi What would you like to name your like? (sesuai dengan yang kalian inginkan)

Isi What is the HTTP Address (URL) of your site? (sesuai dengan localhost/folder kalian)

Klik Next

ikuti langkah - langkah gambar di bawah ini :

Step 2 :

Pilih Yes, I want to use a server tecknologi

PHP MySQL

Next

Lihat contoh gambar di bawah :

Step 3 :

Pilih editlocally, then upload to remote testing server

klik gambar folder pilih folder local disk C/Xampp/htdocs/nama folder website kalian

Next

Lihat contoh gambar di bawah :

Step 4 :

Pilih local / network

sama seperti step 3

Tidak di centang refesh remote file site list automaticaly

Next

Lihat contoh gambar di bawah :

Step 5 :

What URL would you use to browse to the root of your site? (http//localhost/nama folder
website kalian)

Klik Test URL

Next
Lihat

contoh

gambar

Step 6:

Pilih No, do not enable check in and check out

Next

Lihat contoh gambar di bawah :

Step 7 :

Klik Done

Lihat contoh gambar di bawah :

di

bawah

Selesai mengisi Site Definition, sebelumnya kalian bikin data database sesaui website kalian.
Selanjutnya kalian ikuti langkah berikut ini :

Klik Aplication

Database

Klik tanda +

Klik MySQL Connection

Setelah klik MySQL Connection muncul jendela seperti gambar di bawah ini :

Kalian harus isi semua yang ada di jendela MySQL Connection

Connection name : web2_mi5c

MySQL Server : Localhost

User Name : root

Password : dikosongi

Database : Klik select pilih database yang mau kalian pakai untuk website kalian

Klik ok

Klik ok

Klik ok

Database sudah terkoneksikan. Semoga materi kali ini bermanfaat untuk kita semua

http://www.ilmugrafis.com/dreamweaver.php

Modul Dreamweaver Dasar

Posted on December 15, 2015 by Admin KWM

Dalam modul kursus ini, kita akan berlatih membuat sebuah halaman web
dengan Dreamweaver. Untuk membuat halaman web, dibutuhkan pengetahuan
dasar tentang HTML dan CSS. Tapi keduanya tidak akan dibahas di modul ini.
Tentang HTML bisa dilihat di Modul HTML Dasar dan Modul CSS Dasar.
Sisem yang kita gunakan untuk latihan dalam modul ini adalah server web lokal
yang diinstall dengan XAMPP. Aplikasi XAMPP-nya dianggap sudah terinstall.
Tutorial menginstall XAMPP, dapat dilihat di Membuat Web Server Lokal
dengan XAMPP.
Materi yang akan dibahas adalah:

Mengapa Dreamweaver
Layar Kerja Dreamweaver
Mengkonfigurasi Site (Project)
Memasukan dan Memformat Teks
Memasukan Gambar
Membuat Table
Membuat Link
Membuat CSS dengan stylesheet Internal dan Eksternal

Dalam kursus web ini, kita akan membuat halaman web yang menampilkan
deskripsi produk sebuah laptop. Materi ini tidak bermaksud untuk promosi,
tetapi hanya sebagai contoh. Kalaupun ada teks dan gambar yang

dicopy/diambil dari suatu sumbernya, hak ciptanya ada dipemilik sumber

tersebut.

Mengapa Dreamweaver
Untuk membuat sebuah situs web dari nol, dibutuhkan pengetahuan dasar
membuat dokumen HTML, lengkap dengan CSS dan Javascript. Bagi seorang
pemula, hal itu tidak mudah, karena harus mengingat, atau setidaknya melihat
referensi, dan mengetik tag-tag HTML ini secara manual di text editor. Cara
seperti ini juga rawan terjadi kesalahan.
Untuk memudahkan proses ini, diperlukan sebuah IDE (Integrated Development
Environment, Lingkungan Pengembangan Terintegrasi) untuk HTML. IDE tersebut
harus dapat membantu memasukan tag-tag ini secara mudah, bisa mengecek
kesalahan, dan menampilkan hasilnya secara real-time. Fitur ini sering disebut
WYSWYG (What You See is What You Get). Kalau kita browsing di Google,
terdapat banyak sekali IDE untuk HTML. Dreamweaver adalah salah satunya.
Menurut penilaian saya pribadi, Dreamweaver adalah salah satu IDE WYSWYG
terbaik yang ada saat ini.
Versi terakhir Dreamweaver pada saat kursus web ini dibuat adalah Dreameaver
CC 2015. Versi ini sangat lengkap dengan segudang fitur yang akan terasa
manfaatnya bagi profesional yang bekerja di web desain. Bagi pemula, fitur
yang dibutuhkan hanya sedikit. Bahkan banyaknya fitur hanya membuat
bingung, dan membutuhkan resource komputer yang tinggi.
Dalam kursus web ini, akan dibahas bagaimana menggunakan Dreamweaver 8
(versi lama) untuk membuat dokumen HTML secara lengkap. Dreamweaver
versi 8 dapat dicari dengan mudah di Internet.

Layar Kerja Dreamweaver

The Welcome Screen
Layar Welcome Screen Dreamweaver dipakai untuk pekerjaan

membuka dokumen yang telah ada

membuat dokumen baru
membuat dokumen berbasis template

Anda dapat mematikan Welcome Screen dengan memilih check-box Dont

show again di sudut kiri bawah.

The Workspace
The Workspace Layout
Workspace Layout digunakan untuk membedakan jenis role pemakai.
Untuk Dreamweaver 8 tersedia 2 jenis role, yaitu Coder dan Designer. Coder
adalah jenis user yang lebih banyak membuat kode program, biasanya untuk
situs dinamis dan aplikasi web. Designer adalah user yang lebih banyak bekerja
dengan desain (grafis) dan layout, termasuk CSS.

Setelan Layout Workspace ada di lokasi menu Windows > Workspace

Layout

Workspace Coder cocok untuk developer yang banyak bekerja dengan kode
(server-side script) dan Javascript.
Workspace Designer cocok untuk develper yang banyak bekerja disisi desain,
seperti layout web, CSS, gambar, dan seterusnya.

Layout ruang kerja Dreamweaver adalah sebagai berikut:

Text berisi macam-macam teks dan format tag seperti b, em, p, h1, dan ul.

The Document window

The Document Window adalah jendela yang menunjukan dokumen yang sedang
di edit. Anda dapat memilih beberapa jenis tampilan, yaitu:

Design view untuk pekerjaan desain halaman web secara visual.

Tampilan mirip dengan halaman yang muncul di browser dan bisa
langsung di-edit (WYSWYG).

Code view adalah halaman unuk pembuatan code, menulis langsung

HTML, kode Javascript, atau Server-side skrip seperti PHP.
Code and Design view akan menampilkan sekaligus 2 jenis view dalam
satu halaman, digunakan untuk mengedit code dan visual (desain) secara
bersamaan.

The Insert Bar

Insert bar mengandung tombol untuk membuat dan menyisipkan obyek HTML,
seperti paragraph, link, table, form, media, dan potongan kode untuk web
dinamis (skrip server).

Tombol tombol ini dikelompokan dalam beberapa kategori seperti Common,

Layout, Forms, Text, HTML, Application, dan seterusnya. Jika kita arahkan
pointer mouse ke tombol ini, keterangan fungsi akan muncul di bawahnya.
Common berisi obyek yang paling sering dipakai seperti hyperlink, gambar, dan
table.
Layout berisi obyek yang berkaitan dengan layout seperti tables, div tags, dan
frames.
Forms berisi tombol untuk membuat form dan menambahkan elemen form.
HTML berisi macam-macam tag html seperti horizontal rules, head content,
tables, frames, and scripts.
Application berisi elemen dinamis seperti recordsets, repeated regions, and
record insertion and update forms. Elemen dan kode yang tampil akan
disesuaikan dengan pilihan bahasa skrip yang digunakan. (Misalnya PHP)
Flash elements untuk menyisipkan Macromedia Flash elements.

`The Document Toolbar

The Document toolbar memiliki tombol-tombol untuk mengatur perpindahan

view dan perintah-perintah yang umum.

Code, Split, Design, pilihan yang ditampilkan di windows dokumen, apakah

Code, Design, atau Split (keduanya).

Title, Judul halaman web yang sedang dikerjakan, akan muncul di

browser bar.
Validate Markup, untuk memvalidasi markup di dokumen yang sedang
dibuka
File Management, untuk mengupload halaman ke situs/remote
Priview di Browser, untuk membuka dokumen yang sedang dikerjakan
ke browser
Opsi Tampilan, untuk mengatur setting tampilan

The Status Bar

Menyediakan informasi tambahan tentang halaman yang sedang
dibuka/dikerjakan

Tag selector adalah salah satu tool yang paling sering dipakai dan sangat
berguna untuk melakukan select tag HTML di Windows Documen.

The Property inspector

The Property inspector menyediakan tool untuk memeriksa dan mengedit
properti dari elemen HTML, seperti teks atau obyek lain. Isi properti akan
menyesuaikan dengan elemen yang sedang dipilih, misalnya untuk elemen

image maka properti yang akan muncul adalah file path to the
image, width dan height of the image, border, alt, align, dan lain-lain.

Setup Site dan File Proyek

Dalam Dreamwaeaver, terdapat fitur untuk mengelola proyek, disebut Site.
Fitur ini bisa Anda pakai atau bisa tidak. Fitur Site akan memudahkan dalam
mengelola file, aset dan proses upload ke remote server.

Membuat Halaman Web dengan Dreamweaver

Mengkonfigurasi Site (Project)

Berikut adalah langkah-langkah menyiapkan Site nya.
1. Pilih menu Site ->New Site
2. Isi nama situs, misal: Jual Beli Laptop

3. Isi HTTP Address: http://localhost/laptop

4. Klik Next
5. Pada pertanyaan server technology, pilih Yes, I want to use a server
technology. Dalam kursus ini, kita menggunakan server web lokal dari
XAMPP.

6. Klik Next
7. Pada pertanyaaan .. work with your file: , pilih: Edit and test locally.
Kita akan menyimpan file-file web di folder XAMPP dan langsung di tes di
komputer ini.
8. Pada Where on your computer do you want to store your files?, isi
dengan : C:\xampp\htdocs\laptop\. Jika folder ini belum ada, buatlah

terlebih dahulu dilokasi tersebut.

9. Klik Next

10.

Untuk root site, isi dengan: http://localhost/laptop/

11.

Klik tombol Test URL, jika sukses muncul pesan The URL Prefix test

was successfull.
12.
Klik OK, kemudian klik Next

13.
Pada pilihan ..do you copy it to another machine? , pilih: Pilihan
No untuk sementara, dapat diubah kemudian.

14.

Klik Next.

15.

Anda akan dibawa pada halaman Summary.

16.

Setelah klik Done, nama situs dan lokasi folder akan muncul di

panel Files.

Setel Workspace Layout

1. Pilih menu Window > Workspace Layout > Coder

2. Pilihan ini akan memindahkan seluruh Panel ke-kiri. Silahkan coba

Workspace Layout lain yang lebih cocok bagi Anda.

Membuat Halaman Baru dan Menambahkan Teks

1. Pilih menu File, kemudian klik New
2. Pilih Category: Basic Page
3. Pilih Basic Page:HTML

4. Klik tombol Create

5. Klik Split supaya layar Code dan Visual tampil keduanya.

6. Ambil teks yang akan menjadi halaman web dengan copy.

7. Simpan kursor pada Windows Visual, kemudian klik menu Edit > Paste
8. Klik menu File > Save atau tombo Ctrl+S
9. Simpan dengan nama: asus-n550jv.html
10. Nama file akan muncul di bagian panel Files dan tab di atas Window
Document

11. Berikutnya, perhatikan Windows Code. Kita bisa lihat bahwa secara otomatis
Dreamweaver akan menambahkan tag HTML ke dalam teks. Hal tersebut sangat
membantu, terutama bagi pemula yang belum terlalu familiar dengan kodekode HTML.

Memasang Tag Heading HTML

Pada dokument HTML, tag Heading, H1, H2, H3, dan seterusnya, dipakai untuk
membuat head dari dokumen atau paragraf.
1. Klik pada Window Code untuk menyimpan kursor pada teks, misalnya di
tulisan ASUS N550JV.
2. Klik Panel Properties

3. Klik tag inspektor <p>

4. Pada panel Properties, klik pada Format, pilih Heading

1
5. Lakukan penggantian tag, untuk beberapa kata berikut:
1.
Incredible (semua), menjadi Heading 4
2.
Beauty, Sound, Response, Touch, menjadi Heading 2
3.
Notebook hiburan , menjadi Heading 3
4.
Desain aluminium , menjadi Heading 3
5.
SonicMaster Premium menjadi Heading 3
6.
Teknologi dengan sentuhan menjadi Heading 3
6. Untuk menampilkan hasilnya, klik pada Document Toolbar, pilih tombol
Preview in Browser

Membuat Daftar (List) HTML

1. Blok teks mulai kalimat Window 8 atau .. s/d untuk kesan mewah

2. Klik tombol Unordered List pada panel Properties

3. Perhatikan kode HTML yang baru dibuat

Untuk melihat hasil kerja kita sampai saat ini, buka

alamat: http://localhost/laptop/asus.html atau dari document

toolbar

Menambahkan Gambar Pada Halaman Web

Tag <img>
Berikutnya kita akan menambahkan gambar pada halaman web tersebut.
1. Buatlah sebuah folder baru di dalam folder kerja. Caranya klik kanan di
dalam panel Files, kemudian pilih New Folder

2. Beri nama images. (Nama folder bebas, tapi umumnya menggunakan

nama: assets atau images).

3. Tambahkan satu baris kosong dibawah judul dengan cara: posisikan kursor
di ujung kanan judul, kemudian klik tombol [Enter]

4. Simpan cursor di baris yang baru, klik tombol Insert Image dari Insert

Panel

5. Pilih gambar yang akan di masukan.

6. Jika ada Dialog Box untuk mengcopy gambar ke Root Folder pilih Yes

7. Masukan di folder Images

8. Setelah dimasukan, akan ada dialog untuk memasukan Alternate Text dan
Long descriction, boleh diisi atau kosongkan saja
9. Setelah gambar berhasil dimasukan, resize gambar menjadi ukuran
sekitar 300px. Caranya pegang ujung gambar dengan mouse, sambil
menekan tombol keyboard [Shift], drag mouse untuk mengatur ukuran
gambar agar sesuai.

10.

Ukuran gambar dapat dilihat di panel Properties

11.
Berikutnya kita akan meletakan gambar di sebelah kanan teks.
12.
Klik gambar, pada panel Properties pilih dropdown Align menjadi Right

13.
ini.

Tambahkan sisa gambar yang lain pada semua bagian halaman web

14.

Tampilan akhir kira-kira akan seperti berikut:

15.

Perhatikan bahwa kode untuk gambar dalam html adalah:

Menambahkan Tabel tag <table><tr><td>

Tabel dalam halaman html, selain untuk menampilkan data dalam beluk
tabulasi, juga dipakai untuk layout. Baik untuk teks maupun gambar. Pada
kursus web ini, kita akan menggunakan tabel untuk menambahkan 3 gambar
kecil dibawah teks paragraf pertama.
1. Simpan cursor diatas tulisan Incredible Beauty
2. Klik tombol Table pada Panel Insert

3. Masukan Rows=1, Column=3, dan Header: None

4. Setelah membuat table, masukan gambar di semua kolom. Caranya: klik
kolom pertama pada table, kemudian klik tombol Insert Image. Ikut

prosedur yang sama seperti sebelumnya.

5. Tampilan setelah penambahan gambar di table

6. Perhatikan bahwa kode untuk table adalah:

Menambahkan Link
Link akan ditambahkan dibawah daftar fitur N550 JV.
1. Posisikan kursor di bawah daftar, kemudian klik Enter untuk membuat
baris baru
2. Tambahkan teks Download Product Guide, kemudian blok.
3. Pada Panel Properties, isi link
dengan: http://www.asus.com/id/Static_WebPage/download/

Memakai Cascading Style Sheet (CSS) untuk

Style Web
Pada modul kursus web ini, kita masih akan melanjutkan menggunakan file
latihan yang sama, yaitu halaman asus.php.
Yang akan dibahas disini adalah:

Memasang CSS melalui Page Properties

Membuat 2 jenis identifier: tag dan class
Memasang syle pada object
Membuat style sheet menggunakan eksternal file

Menyetel Page Properties

Anda dapat menyetel style global (mempengaruhi situs secara keseluruhan)
pada Page Properties global, seperti default font, font size untuk seluruh teks,
dan style lainnya disini. Untuk membukanya klik Page Properties pada panel
Properties

Page Properties dialog box memiliki 5 kategori terdaftar di kolom sebelah kiri:
Appearance, Links, Headings, Title/Encoding, and Tracing Image. Pada panel

Properties, klik Page Properties.

Untuk menggunakan Page Properties, klik salah-satu kategori, kemudian lakukan

perubahan yang diinginkan, setelah itu klik Apply untuk melihat perubahan yang
terjadi, atau klik OK untuk menyimpan hasil perubahan.
Ubah page propertiesnya dengan data berikut;

Appeareance

Page Font: Verdana, Arial, Helvetica, sans-serif

Size:14
Links

Link Font: (Same as page font)

Link Color: #0033CC

Headings

Page Font: Georgia, Times New Roman, Times, serif

Title: Asus N550JV Laptop Hiburan dengan 4 Speaker dan Layar
Full HD IPS

Setelah disimpan, setelan Page Properties ini akan disimpan sebagai CSS.
Buka/expand panel CSS => CSS Styles => All.

Buka Document Window : Code, kita bisa melihat kode yang ditambahkan
oleh Page Properties, dibagian <head> HTML.

Seperti kita lihat pada kode diatas, semua, thye yang dipasang berbasis pada
tag: body, td, th, a, h1, h1, h2, h3, h4, h5, h6.

Membuat Style berbasis Class

Setelah sebelumnya kita membuat style pada tag, berikutnya kita akan
membuat style dengan selector bukan tag. CSS memiliki 3 jenis selector: Tag,
Class, Id (termasuk pseudo-class). Untuk lebih lanjut tentang CSS, silahkan
ikuti Modul Dasar Cascading Style Sheet.
Berikut adalah langkah-langkah membuat style berbasis class.

Membuat Syte Baru

1. Klik New CSS Rule Button pada .

2. New CSS Rule dialog muncul

3. Pilih Class, kemudian beri nama, misalnya rata-kanan.
4. Pilih opsi This document only

5. Kemudian klik OK.

6. Pada Category: Block, pilih Text Align: Justify

7. Klik OK.

8. Hasil style CSS ini bisa dilihat pada panel CSS

9. Berikutnya adalah memasang sytle yang sudah dibuat pada halaman.

Memasang Style
1. Pilih teks yang akan dipasang style, milsanya pada paragraf ke dua,
dengan cara melakukan blok atau klik tombol tag selector diatas kotak
Panel Properties

2. Pada panel Properties, pilih Style:rata-kanan.

Mengedit Styles
Anda dapat mengedit style yang sudah ada.
1. Dari panel CSS Styles, pilih Rules yang ingin diedit.

2. Double klik nama Rules

3. Lakukan perubahan yang diperlukan.

4. Kemudian klik OK

Membuat Eksternal Style Sheet

Menambahkan styles ke satu halaman web sangat mudah, tapi bukankah lebih
baik jika kita membuat style yang bisa dipakai di banyak halaman. Dengan
eksternal Style Sheet hal tersebut menjadi mungkin. Anda dapat mendefinisikan
seluruh rule dalam sebuah file teks .css. Ketika Anda membuat perubahan di
eksternal style sheet, maka seluruh halaman yang me-referensi ke file ini akan
ikut berubah secara otomatis.
Untuk membuat external style sheet, ikuti langkah berikut:

1. Klik New CSS Rule pada panel CSS.

2.
a.
b.
c.
d.

Isi dengan data berikut:

Selector Type: Class
Name: blue-subtitle
Define In: (New Style Sheet File)
Klik OK

3. Muncul dialog untuk nama file eksternal CSS, isi dengan nama: styles.css, klik
OK

4. Beri nama: styles.css, klik Save

5. Pada Dialog CSS Rule Definition, isilah dengan data berikut:
a. Type > Style: italic
b. Type > Color: #003399
c. Klik OK

6. Anda akan melihat sebuah file baru, yaitu: styles.css muncul di Panel File

7. Anda dapat double-klik untuk melihat isinya

8. Berikutnya kita akan memasang class .blue-subtitle pada halaman web

9. Caranya, blok tulisan dibawah Judul, kemudian pasang style dengan

memilihnya dari Panel Properties.

10. Hasilnya akan tampak seperti ini.

DREAMWEAVER, PHP DAN MYSQL UNTUK APLIKASI DATA

MAHASISWA
December 22, 2008 Achmad
Solichin Download, Dreamweaver, Materi, MySQL, PHP, Teaching, Web
Development 84 comments

Macromedia Dreamweaver merupakan salah satu

editor sekaligus web development tools yang cukup kesohor saat ini.
Mengapa? Terutama karena kemudahan dan berbagai fasilitas yang
mempermudah para pengembang aplikasi web dalam pekerjaannya.

Konsep WYSIWYG (what you see is what you get) juga memberikan
kenyamanan terutama bagi yang baru mencicipi dunia web (situs).
Macromedia Dreamweaver sungguh memanjakan penggunakan
dengan berbagai kemudahan, termasuk diantaranya dalam
hubungannya dengan bahasa pemrograman PHP dan
database MySQL.
Dalam tutorial ini akan disampaikan mengenai begitu mudahnya
membuat aplikasi berbasis PHP dan MySQL dengan bantuan
Macromedia Dreamweaver. Boleh dibilang tanpa
menyentuh coding (program) sama sekali!
Cukup ceklak sana ceklik sini, jadi deh. Kita akan membuat aplikasi
yang menampilkan, mengentri, edit dan delete data mahasiswa.
Sederhana memang, tapi bukankah sesuatu yang rumit juga berasal
dari hal sederhana?
Daripada penasaran, yuk kita mulai saja.
Dalam Tutorial Ini Diasumsikan
Bahwa:
1.

Di komputer yang Anda gunakan sudah terinstall dengan

baik PHP, Apache, MySQL dan Macromedia Dreamweaver karena
dalam tutorial ini kita akan menggunakan keempat software tersebut.

2.

Anda mengetahui bagaimana cara login ke MySQL berikut

informasi user dan password yang dapat digunakan.

3.

Anda sudah membuat Site Definition pada Dreamweaver,

berikut bagaimana mengkolaborasikan Dreamweaver dengan PHPMySQL.

4.

Anda sudah cukup mengerti bagaimana membuat database,

membuat dan memanipulasi tabel di MySQL baik
melalui console maupun dengan frontend seperti PHPMyAdmin dan MySQLFront.

5.

Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL,

DML).

Mempersiapkan Database dan Tabel MySQL

Langkah pertama dalam membuat aplikasi web berbasis PHP dan
MySQL dengan menggunakan Dreamweaver adalah mempersiapkan
database dan tabel yang akan digunakan. Dalam tutorial ini akan
digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh
sederhana bagaimana membuat proses entri, edit, delete dan tampil
ke database MySQL dengan bantuan Macromedia Dreamweaver.
Namun demikian, jika Anda sudah memahami tutorial ini dengan baik,
untuk aplikasi yang lebih kompleks tidaklah berbeda jauh.
Pertama kali buatlah database di MySQL dengan nama dbmahasiswa.
Selanjutnya buatlah tabel di MySQL dengan nama mhs dan dengan
spesifikasinya sebagai berikut:

+++++++
|Field|Type|Null|Key|Default|Extra|
+++++++
|nim|varchar(10)|NO|PRI|||
|nama|varchar(30)|NO||||
|alamat|text|NO||||
|tgllahir|date|NO||||
+++++++

Membuat Koneksi ke MySQL di Dreamweaver

Selanjutnya kita akan mengkoneksikan PHP dengan MySQL
memanfaatkan tools yang sudah tersedia di Macromedia
Dreamweaver. Jangan lupa pastikan bahwa Site Definition di
Dreamweaver sudah dibuat dengan benar, karena keberhasilan dari
koneksi ke MySQL juga bergantung dari site definition tersebut.

Berikut ini langkah-langkahnya:

1.

Buatlah file dengan nama input_mhs.php sebagai halaman

untuk menginput data mahasiswa baru.

2.

Aktifkan (buka) panel Application yang berada di sebelah

sisi window utama Dreamweaver (lihat gambar)

3.

Buka tab Databases pada panel Application tersebut.

4.

Klik tombol [+] yang terdapat di dalam tab Databases dan pilih
sub-menu MySQL Connection.

5.

Akan ditampilkan window isian MySQL Connection (lihat

gambar). Isi nama koneksi, host mysql, username, dan password
MySQL dengan benar (1), lalu klik tombol Select untuk memilih
database yang akan digunakan (2) dan klik tombol OK (3) untuk
menyimpan konfigurasi koneksi MySQL.

6.

Jika koneksi berhasil maka pada panel Application tab

Databases akan ditampilkan informasi database berikut tabel-tabel
yang terdapat dalam database tersebut. (lihat gambar)

MySQL Connection
Membuat Halaman untuk Input Data Mahasiswa
Setelah koneksi ke database MySQL berhasil dilakukan, maka
selanjutnya kita akan membuat halaman untuk melakukan input data
mahasiswa ke database MySQL. Pada dasarnya untuk membuat
aplikasi input data, kita harus membuat form inputan terlebih dahulu.
Namun dengan bantuan Macromedia Dreamweaver, kita akan

memanfaatkan fasilitas yang sudah tersedia, sehingga tidak perlu

membuat form terlebih dahulu.
Berikut ini langkah-langkahnya:
1.

Buatlah file dengan nama input_mhs.php sebagai halaman

untuk menginput data mahasiswa baru (jika sudah dibuat, tidak perlu
dibuat lagi).

2.

Aktifkan bagian Application di menu atas, lalu pilih

menu Record Insertion Form Wizard (lihat gambar). Atau bisa akses
menu Insert > Application Objects > Insert Record > Record
Insertion Form Wizard.

3.

Akan ditampilkan window Record Insertion Form. Tentukan

koneksi yang digunakan, tabel yang digunakan dan atur tampilan form
(jenis inputan). Tekan tombol OK. Lihat gambar

4.

Di halaman akan ditampilkan form inputan untuk data mahasiswa

(lihat gambar). Tekan F12 (Preview in Browser) untuk mencoba
halaman input data mahasiswa.

Record Insertion Wizard

Membuat Halaman untuk Menampilkan Data Mahasiswa
Untuk membuat halaman yang menampilkan data dari database,
dalam hal ini data mahasiswa, caranya cukup mudah. Yang pasti
sebelum melanjutkan, kita harus memastikan kembali bahwa koneksi
ke MySQL sudah dibuat dengan benar (lihat caranya di atas). Untuk
menampilkan data dari database, pertama kali yang harus kita lakukan
adalah membuat Recordset, lalu setelah recordset dibuat kita tinggal
menentukan datanya mau ditampilkan dalam bentuk tabel atau yang
lainnya. Dalam tutorial ini, kita akan menampilkan data ke dalam
bentuk tabel.
Berikut ini langkah-langkahnya:
1.

Buatlah file dengan nama tampil_mhs.php untuk menampilkan

data mahasiswa.

2.

Buka bagian Application, lalu pilih menu Recordset (atau dapat

mengaksesnya melalui menu Insert > Aplication Objects >
Recordset). Lihat gambar!

3.

Akan ditampilkan window Recordset (lihat gambar dibawah).

Tentukan nama Recordsetnya (1), koneksi yang digunakan (2), tabel
yang akan ditampilkan (3), field yang akan ditampilkan (4) serta filter
dan pengurutan yang diinginkan (5). Tekan tombol OK untuk
melanjutkan. Kita juga bisa menekan tombol Test untuk memastikan
semua sudah benar.

4.

Selanjutnya akan ditampilkan window informasi jika Recordset

berhasil ditambahkan. Klik OK untuk melanjutkan

5.

Dari menubar Application, Pilih icon Dynamic Data dan

pilih Dynamic Table (lihat gambar). Atau juga bisa dilakukan dari
menu Insert > Application Objects > Dynamic Data > Dynamic
Table.

6.

Akan muncul window Dynamic Table. Pilih

nama Recordset yang akan ditampilkan, jumlah record yang akan
ditampilkan dan beberapa setting tabel. Klik OK untuk
melanjutkan. Lihat gambar

7.

Di halaman akan ditampilkan sebuah tabel, baris pertama adalah

header, baris kedua adalah data (record) dari database (gambar).
Tekan F12 (Preview in Browser) untuk mencoba halaman tampil data
mahasiswa.

Recordset