Membuat Halaman Login


Sebelumnya kita sudah membuat database website kita dan membuat koneksi di Dreamweaver,

bg ogin form Membuat Halaman Login

Sebelum memulai tutorial ini anda harus membuat tabel untuk admin . 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 :

  1. Row : 3
  2. Collomns : 3
  3. Table Width : kosongkan saja
  4. Border thickness : kosongkan saja
  5. Cell padding : 5
  6. Cell spacing : 5
  7. 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.

seleksi rw Membuat Halaman Login

Jika sudah terseleksi, pada bagian panel Properties klik icon Merges selected cells using spans,  kemudian pada Horz rubah menjadi Right.

merge cells di dreamweaver cs3 Membuat Halaman Login

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.

Posted on 1 Maret 2013, in CSS, Dreamweaver, Materi SMK, Web Desain. Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: