Untuk
membuat website dinamis dengan Dreamweaver kita perlu membuat koneksi ke
database terlebih dahulu, sebelum membuat koneksi ke database di dreamweaver
anda harus sudah mensetting site di
dreamweaver, dan
membuat database mysql.
Pertama
buatlah folder baru di dalam folder websiteku.com, beri nama fileadmin.
Kemudian buka program Adobe Dreamweaver, buatlah file php baru beri nama
index.php tekan CTRL + S simpan dalam folder fileadmin.
Sekarang
saatnya membuat koneksi ke database yang sudah kita buat sebelumnya, pada tab Application
klik Databases, kemudian klik icon + pilih MySQL Connection,
isikan
pengaturannya sebagai berikut :
- Connection name : websiteku
- MySQL Server: localhost
- User name : root (secara default username xampp anda adalah root, jika anda merubah usernamenya maka sesuaikan dengan milik anda)
- Password : kosongkan saja (kecuali anda sudah memberikan password pada databse anda)
- Database : klik select kemudian pilih websiteku.
- terakhir klik ok
Setelah ini
kita akan mengisi file index.php ini dengan form login ke halaman administrator
website. Silahkan lihat tutorialnya di Membuat Halaman Login
Membuat Halaman Login
Sebelumnya
kita sudah membuat database website kita dan membuat koneksi di Dreamweaver, kalau anda belum membuatnya
silahkan baca disini
dan disini hehe.
Sebelum
memulai tutorial ini anda harus membuat tabel untuk admin silahkan lihat disini.
Bagi anda yang mengikuti tutorial ini dari awal
silahkan buka file index.php yang ada di dalam folder fileadmin.
Halaman
login pada website tentunya berisi login form, pertama kita akan membuat login
formnya terlebih dahulu.
Setelah anda
membuka file index.php dalam folder fileadmin, klik ke dalam area kerja
dreamweaver anda, kemudian ikuti langkah – langkahnya :
Klik Insert
> Form > Form
Klik Insert
>Table, isikan table propertynya sbb :
- Row : 3
- Collomns : 3
- Table Width : kosongkan saja
- Border thickness : kosongkan saja
- Cell padding : 5
- Cell spacing : 5
- Klik ok.
Maka akan
terlihat 9 buah kotak dengan garis putus – putus. Pada baris kotak pojok kiri
atas isikan Nama, kotak di sebelah kanan nama isikan : (titik
dua).
Kotak di
bawah Nama isikan Password, dan di sebelah kanan Password isikan
: (titik dua).
Pada baris Nama,
klik di dalam kotak paling kanan, kemudian klik Insert > Form
> Text Field, pada Id isikan nama, yang lain biarkan
secara default, kalau sudah klik Ok.
Pada baris Password,
klik di dalam kotak paling kanan, kemudian klik Insert > Form
> Text Field, pada Id isikan password, yang lain
biarkan secara default, kalau sudah klik Ok.
Setelah
muncul TextField untuk memasukkan password, klik TextField
tersebut, pada panel Properties di bagian bawah pada bagian Type
pilih Password
Selanjutnya
kita akan menyatukan atau me Merge Cell pada baris paling bawah
agar menjadi satu kotak saja, caranya arahkan cursor anda kesebelahnya,
kemudian klik Row tersebut, perhatikan gambar berikut.
Jika sudah
terseleksi, pada bagian panel Properties klik icon Merges selected cells
using spans, kemudian pada Horz rubah menjadi Right.
Kalau sudah,
klik kembali di dalam kotak tersebut, lalu klik Insert > Form
> Button, pada Id isi login terakhir klik Ok. Untuk merubah
tulisan di dalam tombol login tersebut ubah Value‘nya pada panel Properties.
Sampai
disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<form id="form1" name="form1" method="post" action="">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Nama</td>
<td>:</td>
<td><label>
<input type="text" name="nama" id="nama" />
</label></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><label>
<input type="text" name="password" id="password" />
</label></td>
</tr>
<tr align="right">
<td colspan="3"><label>
<input type="submit" name="login" id="login" value="Login" />
</label></td>
</tr>
</table>
</form>
|
Simpan
pekerjaan anda Ctrl + S, kemudian preview tekan F12
Sampai
disini dulu tutorial membuat halaman login di Dreamweaver CS3
saya akan lanjutkan tutorialnya membuat halaman login pada artikel berikutnya Membuat Halaman Login Part 2.
0 comments:
Post a Comment