Home » Tutorial Dreamweaver » Halaman Administrator Website

Halaman Administrator Website

Sebelum memulai tuorial membuat halaman administrator website atau halaman admin di dreamweaver ini saya ingin meminta maaf kepada teman – teman yang megikuti tutorial dreamweaver di Mous Design, lama saya tidak bisa melanjutkan tutorial ini karena banyak urusan kerjaan. Banyak yang mengirimkan email ke saya, meminta supaya cepat untuk di updatekan tutorial pembuatan website dengan dreamweaver terutama membuat halaman administrator website ini.

Pada 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 mengakses halaman ini. Di dalam halaman administrator ini anda dapat membuat kategori artikel, menambahkan atau mengedit artikel anda.

Sekali lagi saya ingatkan tutorial membuat website dengan adobe dreamweaver cs 3 ini saya berikan secara bertahap, jika anda kebingungan dengan tutorial yang ada disni saya harapkan membaca tutorial ini dari awal, untuk melihat daftar isi tutorial dreamweaver anda bisa klik disini.

Untuk membuat halaman administrator website yang pertama kitalakukan adalah membuat layout atau tata letaknya.

Buka file home.php yang ada di dalam folder fileadmin milik anda. Kemudian melalui code view, ketikkan

<link href="style.css" type="text/css" rel="stylesheet" />

di atas tag </head>, kode tersebut fungsinya menghubungkan file home.php dengan file style.css yang ada di dalam folder fileadmin milik anda.

Jika anda belum memiliki / membuat file style.css silahkan anda buat terlebih dahulu, caranya tekan Ctrl + N, pilih CSS kemudian click Create, simpan dalam folder D:\website\xampp\htdocs\websiteku.com\fileadmin dengan nama style.css.

Masih tetap dalam tab home.php melalui code view, ketikkan kode berikut

<div id="header">
	<h2>Admin Websiteku</h2>
</div>

di bawah tag <body>

Kemudian klik icon New CSS Rule yang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift + F11 untuk menampilkan tab CSS Style.

icon new css rule Halaman Administrator Website

isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : body
  • Define in : style.css

Setelah muncul CSS Rule Definition for body in style.css, isikan pengaturannya sebagai berikut :

Type:

  • Font : pilih jenis  font yang ingin anda gunakan, pada kali ini saya akan menggunakan “Arial, Helvetica, sans-serif
  • Size : ukuran font yang akan anda gunakan, kali ini saya menggunakan ukuran 12 pixel

Box :

  • width : 920 pixel
  • float : left
  • Padding : centang same for all, pada kolom box isikan 10 pixel.

jika sudah klik ok, buka file style.css yang ada dalam folder fileadmin milik anda, kemudian simpan tekan Ctrl + S.

kembali ke tab home.php, klik New CSS Rule, isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #header
  • Define in : style.css

Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai berikut :

Box :

  • width : 900 pixel
  • float : left
  • Padding : centang same for all, pada kolom box isikan 10 pixel.

Jika sudah klik ok, kembali ke tab style.css simpan pekerjaan anda.

Sekarang kita akan membuat navigasi untuk halaman administrator website kita, ketikkan kode berikut di atas </body>

<div id="navigasi"></div>

simpan pekerjaan anda tekan Ctrl + S.

klik New CSS Rule, isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #navigasi
  • Define in : style.css

Setelah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut :

Box :

  • width : 900 pixel
  • float : left
  • Padding : hilangkan centang same for all, pada kolom right dan left isikan 10 pixel, pada kolom top dan bottom isikan 0 pixel.

Border :

  • Style : centang Same for all isikan solid.
  • Width : centang same for all isikan 1 pixel
  • Color : centang same for all isikan #CCCCCC

Jika sudah klik ok, kembali ke tab style.css simpan pekerjaan anda.

Kemudian ketikkan kode berikut

<ul>
    <li><a href="home.php">Home</a></li>
    <li><a href="editprofile.php">Profile</a></li>
    <li><a href="categories.php">Categories</a></li>
    <li><a href="post.php">Post</a></li>
    <li><a href="message.php">Message</a></li>
    <li><a href="logout.php">Logout</a></li>
</ul>

letakkan di bawah <div id=”navigasi”>, maka kodenya akan menjadi

<div id="navigasi">
<ul>
	<li><a href="home.php">Home</a></li>
    <li><a href="editprofile.php">Profile</a></li>
    <li><a href="categories.php">Categories</a></li>
    <li><a href="post.php">Post</a></li>
    <li><a href="message.php">Message</a></li>
    <li><a href="logout.php">Logout</a></li>
</ul>
</div>

Kode – kode tersebut membentuk link ke halaman yang lainnya, misalnya Profile di klik maka anda akan di bawa ke halaman editprofile.php, untuk penjelasan dan pembuatan halaman tersebut akan saya jelaskan pada tutorial berikutnya.

Kembali klik New CSS Rule, isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #navigasi ul
  • Define in : style.css

Setelah muncul CSS Rule Definition for #navigasi ul in style.css, isikan pengaturannya sebagai berikut :

Box :

  • width : 900 pixel
  • float : left
  • Padding : centang same for all isikan 0 pixel.

Jika sudah klik OK.

klik kembali New CSS Rule, isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #navigasi li
  • Define in : style.css

Setelah muncul CSS Rule Definition for #navigasi li in style.css, isikan pengaturannya sebagai berikut :

Block:

  • Display : inline

Box :

  • Margin : hilangkan centang same for all, pada bagian Left isikan 10 pixel

List :

  • Type: none

Jika sudah klik OK.

Selanjutnya ketikkan kode berikut,

<div id="conten">
<h3>Admin Home</h3>
<p>Selamat datang di halaman administrator websiteku, isi adalah contoh halaman depan admin website kita, kata - kata ini hanya untuk testing pada tutorial pembuatan halaman administrator website dan hanya sebagai contoh halaman administrator website, selanjutnya ganti tulisan isi terserah anda mengisinya dengan kata - kata milik anda sendiri, misalnya seperti peringatan untuk semua admin yang memasuki halaman administrator website.</p>
<p>Sekali lagi kata - kata dalam halaman administrator ini bisa anda ganti dan tolong di ganti, karena kata - kata ini hanya sebagai contoh semata dan tidak ada maksud untuk belajar mengolah kata, karena saya sendiri sudah pusing untuk mengolah kata - kata untuk halaman administrator website ini.</p>
</div>

Masih dalam tab home.php, klik New CSS Rule, isikan pengaturannya sebagai berikut :

  • Selector Type : Advanced (Ids, pseudo-class selectors)
  • Selector : #conten
  • Define in : style.css

Setelah muncul CSS Rule Definition for #conten in style.css, isikan pengaturannya sebagai berikut :

Box :

  • width : 900 pixel
  • float : left
  • Padding : centang same for all, pada kolom top isikan 10 pixel.
  • margin : hilangkan centang same for all, pada bagian top isikan 20 pixel.

Border :

  • Style : centang Same for all isikan solid.
  • Width : centang same for all isikan 1 pixel
  • Color : centang same for all isikan #CCCCCC

Jika sudah klik Ok. simpan semua pekerjaan anda tekan Ctrl + S.

Untuk melihat hasil jerih payah anda tadi atau melihat halaman administrator website anda tekan F12.

Untuk memperindah tampilan halaman administrator website anda, anda bisa menambahkan opsi CSS yang lainnya, misalnya background dan lain – lain. Silahkan di coba – coba agar anda lebih paham, lihat perubahannya pada file style.css.

Sekian dulu tutorial membuat halaman administrator website dengan Adobe dreamweaver cs 3, pada tutorial berikutnya saya akan jelaskan bagaimana cara agar membatasi akses kehalaman administrator website anda, jadi hanya orang yang terdaftar saja yang bisa masuk ke halaman administrator website milik anda.

Jika anda ingin berlangganan artikel mous design anda bisa masukkan email anda di kolom berlangganan yang ada di bagian kanan website ini, dan apa bila ada pertanyaan ataupun komentar silahkan berkomentar di dalam form komentar di bawah.

Akhir kata saya ucapkan terima kasih banyak dan salam sukses untuk anda semuanya.

lanjutan tutorial Memberikan Batasan Hak Akses Administrator bisa di lihat di sini

33 Komentar

  1. franda agustin says:

    update dari mu selalu kutunggu,,,cemerlang…thank you mas

  2. dea sapvitri says:

    ga ada contoh nya image nya ya gan? :D

  3. baron says:

    thanks gan atas tutorialnya, sangat membatu :D

  4. Kipply says:

    Sangat membantu tutorialnya gan,
    :-)

  5. iwan says:

    thanks gan,, :D

  6. Putu says:

    Gan, mau tanya kalau di CS6 kok pilihan advanced untuk CSS rulenya kok tidak ada ya gan??, kalau di CS6 pilihnya yang mana ya gan?, terimakasih sebelumnya gan,, minta bntuannya gan,, saya baru beljar buat web untuk skripsi saya gan,, tolong di bntu ya gan,, terima kasih :-)

  7. nickzoner says:

    tutorial yang mantap, besar jasa mu gan :D

  8. Astori S says:

    Keren tutorialnya.. sangat membantu..terimakasih admin :)

  9. Inal says:

    Aku suka sekali postingan disini…. sangat membangun anak bangsa kita…. :cry:

  10. burn says:

    web anda saja tidak dengan php

    • chucky (admin) says:

      :lol: :lol: hahahahah dari mana anda bisa tau?? saya gak punya banyak waktu buat file .html dalam setiap update berita bos…,, hahahahah…,,

      yaa klo gak pake gak pake php, saya rasa anda tidak bisa membuat komentar disini :D hehhehehehe :lol: :lol: :P !!

  11. samsul says:

    pa guru masuk loginnya ko gak masuk masuk apa kode nama dan passwordnya paguru

  12. samsul says:

    pa guru anu saya gag bisa masuk masuk ke login kode loginnya cara buatnya gimana pa guru

  13. solihin says:

    Keren… banget .. tpi belum mengerti eum ..

  14. munawar devrado says:

    :wink: :lol: :lol:

    benar2 bermanfaat, dari kagak ngerti apa itu mysql jadi bisa buat database dalam 1 jam baca web mous,,,saluttt

  15. Fitro rakhmat says:

    trima kasih atas tutorial nya gan.. :-)

  16. bagiilmu says:

    makasih infonya di coba dulu

  17. eko agus says:

    gan, kalo mau bikin login, kemudian setelah login lsg masuk ke dalam form yang berisi data masing2 user bisa dikasih pencerahan ga?

    • chucky (admin) says:

      ya di buat dulu formnya, kemudian dalam dreamweaver pad menu “Log In User” ==> nf login succes, go to “isikan file form yang anda buat tadi”..,, cuman seperti itu logikanya hahahahah..,, :D

  18. Me Grey says:

    Makasih ya informasinya…

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/

  19. aparmand says:

    thanks ya gan ats tutorialnya

  20. [...] anda memiliki atau membuat halaman administrator yang saya sudah jelaskan pada tutorial sebelumnya, langsung saja sekarang kita mulai memberikan [...]

  21. [...] tutorial selanjutnya kita akan Membuat Halaman Administrator. 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: