Blogger templates

Kamis, 13 Desember 2012

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
1
<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
1
2
3
<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>
1
<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
1
2
3
4
5
6
7
8
<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
1
2
3
4
5
6
7
8
9
10
<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,
1
2
3
4
5
<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.

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More