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" /> |
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> |
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.
isikan pengaturannya sebagai berikut :
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : body
- Define in : style.css
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.
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
Box :
- width : 900 pixel
- float : left
- Padding : centang same for all, pada kolom box isikan 10 pixel.
Sekarang kita akan membuat navigasi untuk halaman administrator website kita, ketikkan kode berikut di atas </body>
1
| <div id="navigasi"></div> |
klik New CSS Rule, isikan pengaturannya sebagai berikut :
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : #navigasi
- Define in : style.css
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
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> |
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> |
Kembali klik New CSS Rule, isikan pengaturannya sebagai berikut :
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : #navigasi ul
- Define in : style.css
Box :
- width : 900 pixel
- float : left
- Padding : centang same for all isikan 0 pixel.
klik kembali New CSS Rule, isikan pengaturannya sebagai berikut :
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : #navigasi li
- Define in : style.css
Block:
- Display : inline
Box :
- Margin : hilangkan centang same for all, pada bagian Left isikan 10 pixel
List :
- Type: none
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> |
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : #conten
- Define in : style.css
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
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