Home » Tutorial Dreamweaver » 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.

bg ogin form Membuat Halaman Login 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 :

  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 :

<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.

24 Komentar

  1. Jiji Tybc says:

    itu tutor css brpa gan ?

  2. Stephany says:

    I got this web page from my pal who shared with me regarding this website and now this time I am browsing this web page and reading very informative articles here.

  3. Tracy says:

    I like the helpful info you provide in your articles. I will bookmark your weblog and check again here regularly. I am quite sure I will learn plenty of new stuff right here! Good luck for the next!

  4. Heru Aditya says:

    mas, mau tanya, kok pada form register.php pas saya masukin nama sama password, pas di klik tombol daftar tuh ga langsung di oper ke login form ya? udah gitu di database nya password nya kaya gini d41d8cd98f00b204e9800998ecf8427e .. tp pas dicoba di login form malah di oper ke login-gagal.. padahal nama dan password sudah di isi sesuai yang ada di database admin nya. mohon pencerahannya.. thx

  5. donatt says:

    maaf ni mas ga ngerti..
    itu maksudnya gimana kan insert – form – form kok tau2 insert table??

  6. [...] tutorial dreamweaver sebelumnya saya sudah menjelaskan cara membuat halaman register dan halaman login utuk masuk ke halaman administrator, yang di mana halaman ini hanya admin yang terdaftar saja dapat [...]

  7. [...] Halaman register tentunya berisi form register atau formulir pendaftaran. Setelah kemarin tutorial membuat halaman login part 1 dan part 2, sekarang saatnya kita belajar membuat halaman register untuk administrator dengan Adobe [...]

  8. emm… mas,file index.php yang ada di dalam folder fileadmin. itu di bagian mananya, ya? kok, saya gak bisa nemuin… :? :? :?

  9. brawl says:

    maaf Gan kalaw dreamweaver yg dipake CS brapa ya… biar ane gk pusing cari menu barnya, coz ane masih pemula

  10. Harrie says:

    supaya gak lupa simpen di Add page.. :idea:

  11. endyC says:

    Makasih Mas tolong bantukan aku Pembuatan data base pada Mysql

  12. rachmat says:

    aku maw tax. yang mana harus di buat diluan dalam form registrasi?
    -Membuat Database MySQL
    -Membuat Koneksi ke Database
    -Membuat Halaman Register
    -Membuat Halaman Login
    -Memberikan Batasan Hak Akses Administrator
    -Halaman Administrator Website
    pliss. bantu aku donk. cos bulan april ini ada lomba web design. :| :lol:

    • chucky (admin) says:

      di urut aja sesuai tutorial dsn, bisa di lihat di bagian sidebar web ini…!!

      logika begini…
      sebelum kita membuat registrasi kehalaman administrator tentunya kita membutuhkan database untuk menyimpan data hasil registrasi.. kemudian agar kita bisa masuk kehalaman administrator tentunya kita membutuhkan sebuah halaman untuk melakukan login… dan pastinya dalam halaman administrator itu kita tidak ingin sembarang orang dapat mengakses halaman tersebut jadi kita perlu memberikan batasan akses.

  13. [...] tutorial dreamweaver sebelumnya saya sudah menjelaskan cara membuat halaman register dan halaman login utuk masuk ke halaman administrator, yang di mana halaman ini hanya admin yang terdaftar saja dapat [...]

  14. [...] register tentunya berisi form register atau formulir pendaftaran. Setelah kemarin tutorial membuat halaman login part 1 dan part 2, sekarang saatnya kita belajar membuat halaman register untuk administrator dengan Adobe [...]

  15. [...] tutorial sebelumnya Membuat Halaman Login sekarang saya akan lanjutkan dengan Membuat Halaman Login [...]

  16. dwija says:

    tutorialnya sangat membantu sekali, kapan dibuat kelanjutannya? :D terima kasih banget sudah banyak membantu

  17. [...] index.php ini dengan form login ke halaman administrator website. Silahkan lihat tutorialnya di Membuat Halaman Log Related posts:Setting Site di Dreamweaver CS3Di artikel sebelumnya saya telah menjelaskan Cara [...]

Komentar Anda!

Nama (Harus diisi)
Anda belum mengisi nama. Minimal 4 karakter. Maksimal 20 karakter.


Anda belum memasukkan email. Masukkan alamat email dengan benar. Minimal 5 karakter. Maksimal 30 karakter.


Minimal 5 karakter. Maksimal 60 karakter.

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: