Embed Size (px)
DESCRIPTION
Desain web
Citation preview
Layout Website Dengan PhotoshopDi artikel sebelumnya saya telah menjelaskan Cara Install XAMPP di windows untuk menjalankan server local / localhost di komputer kita, dan kali ini saya akan memberikan sedikit tutorial pembuatan layout website menggunakan Adobe Photoshop, saat ini saya masih menggunakan Adobe Photosop CS 3.Sebelum membuat website lebih baik kita membuat layout website terlebih dahulu, arti kata layout adalah tata letak, jadi sebelum kita membangun sebuah website kita membuat sketsa tata letaknya terlebih dahulu. Sama seperti sebelum membangun rumah, kita pastinya sudah menyiapkan skesa tata letak rumah kita, tidak mungkin anda akan membuat rumah tanpa sketsa, atau bisa di bilang asal-asalan dan asal main tebak ukurannya.Disini nantinya kita akan menentukan lebar dari website kita, seperti lebar body website, lebar header, lebar navigasi/menu website, lebar konten, lebar footer, dan lebar sidebar/kolom samping. Disamping itu kita akan membuat beberapa background agar nantinya tampilan website kita lebih enak di pandang mata.
Pada kali ini kita akan membuat layout website yang simple – simple saja, untuk kedepannya anda bisa mengolah sendiri tampilannya, mau seperti apa terserah anda, yang penting konsep awalnya sudah anda mengerti.Website yang kita buat nantinya akan seperti gambar di bawah ini.
Nantinya kita akan membuat website menjadi 5 bagian, yaitu ada header, menu / navigasi, ada konten website, ada sidebar / kolom samping yang nantinya bisa anda isikan dengan menu tambahan seperti kategori dalam website, berita terbaru dan lain lain.
Membuat Layout Website, langkah pertamaPertama kita menentukan lebar website kita, buka program Adobe Photoshop anda, kemudian klik File -> New atau tekan Ctrl + N, isikan width 900
pixel, height 600 pixel, dan resolusi 72 pixel/inch, kemudian klik ok. Lihat pengaturannya pada gambar berikut.
Membuat Layout Website, langkah ke-2Buatlah guideline / garis bantu, pada menu bar Photoshop anda klik View -> New Guide, padaOreientation pilih Horizontal, pada Position ketikkan 150px, kemudian klik OK.
Ulangi langkah tadi, klik View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan20px, kemudian klik OK. Ini adalah batas kedalam dari kiri website sebesar 20 pixel.
Ulangi lagi langkah diatas, klik View -> New Guide, pada Oreientation pilih Vertical, pada Position ketikkan 880px, kemudian klik OK. Ini adalah batas kedalam dari kanan website sebesar 20 pixel.Karena lebar total website yang akan kita buat itu lebarnya 900pixel dan kita akan memberikan jarak kedalam dari sisi kanan dan kiri sebesar 20pixel maka kita membuat guidenya 900px – 20px = 880px.Lakukan lagi hal yang sama, klik View -> New Guide, pada Oreientation pilih Horizontal, pada Position ketikkan 185px, kemudian klik OK. Kali ini kita membuat batas untuk menu / navigasi website.Tinggi dari menu / navigasi website yang akan kita buat adalah 35pixel, dan tadi tinggi dari header yang kita buat adalah 150pixel, jadi untuk membuat garis bantu atau garis batas navigasi website adalah tinggi header + tinggi navigasi (150pixel + 35pixel ) =185pixel.
Sampai disini, saya harap anda mengerti konsep membuat garis bantu untuk layout website yang akan kita buat. Yuk lanjutin lagi buat garis bantunya Sekarang kita membuat garis bantu untuk footer, tadi di awal kita membuat tinggi dari layout website kita adalah 600 pixel, dan sekarang kita akan membuat garis bantu untuk bagian footer / bagian bawah website yaitu tingginya 80 pixel, jadi hitungan-hitungannya total tinggi website dikurangi footer (600 px – 80px) = 520px.
Klik View -> New Guide, pada Oreientation pilih Horizontal, pada Position ketikkan 520px, kemudian klik OK.Untuk membuat kolom sidebar / kolom samping dari website, View -> New Guide, pada Oreientationpilih Vertical, pada Position ketikkan 680px, kemudian klik OK.Terakhir kita akan membuat garis bantu untuk konten, View -> New Guide, pada Oreientation pilihVertical, pada Position ketikkan 660px, kemudian klik OK.Selesai sudah kita membuat garis bantu / guide line untuk layout website kita, jika anda melakukannya dengan benar maka akan tampak seperti gambar di bawah, setelah di berikan backgound.
Lho.. punya anda belum berisi background? yups, karena di awal kita tadi membuat Background Contens‘nya transparant. Saya anggap anda sudah bisa mengisi warna background pada layar kerja diphotoshop. Dan untuk
lebih jelasnya bagian-bagian dari layout kita, coba anda perhatikan gambar di bawah.
ket: lebar header sama dengan lebar navigasi / menu
Kalau kita perhatikan, konten dan sidebar tidak memiliki tinggi, itu karena nantinya tinggi dari konten dan sidebar akan menyesuaikan dari isinya.Setelah kita menentukan tata letak / layout website kita, sekarang saatnya untuk membuat design wesbite‘nya. Silahkan ikuti tutorialnya di “Design Website Dengan Photoshop“
Membuat website di dreamweaver CS3Kemarin aku sudah kasih download template website yang simple, bagi yang belum download silahkan download disini.Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapat folder images, disana ada beberapa file yang sudah aku pecah sebagai bahan pembuatan website di dreamweaver.Copy folder images tersebut kemudian paste kedalam folderD:\website\xampp\htdocs\websiteku.com
Sekali lagi aku ingatkan sebelum memulai tutorial membuat website di dreamweaver cs3 ini sebaiknya anda melakukan setting site di dreamweaver cs3 tutorialnya bisa di lihat disini.
Setting Site di Dreamweaver CS3Di artikel sebelumnya saya telah menjelaskan Cara Install XAMPP di windows untuk menjalankan server local / localhost di komputer kita, kali ini kita akan melakukan Setting Site di Dreamweaver CS3.
Setting site di Dreamweaver cs 3 sangat mudah, hanya 4 langkah saja, fungsi site di dreamweaver ini menghbungkan file – file yang ada di dalam web server kita. Sebaiknya sebelum melakukan setting site di dreamweaver cs3 anda menginstal XAMPP, lihat disini tutorialnyaKarena nantinya kita menaruh file – file website dala hasil instalasi XAMPP, pada artikel Cara Install XAMPP di windows kita menginstalnya di folder D:/website/xampp maka kal ini kita akan mearuh file – file website kita di D:/website/xampp/htdocs/websiteku.com.
Setting Site di Dreamweaver step 1Klik Site > New Site
Setting Site di Dreamweaver step 2Pada bagian ini kita akan mengatur Local Info website, isikan pengaturannya sebagai berikut :
Setting Site di Dreamweaver step 3Pada bagian ini kita akan mengatur Remote Info website, isi pengaturanya sebagai berikut :
Setting Site di Dreamweaver step 4Ini adalah bagian terakhir mensetting site di Dreamweaver cs 3, langkahnya sebagai berikut :
Dalam tutorial berikutnya kita langsung belajar bagaimana
Membuat website di dreamweaver cs3 tidak sesulit yang orang bayangkan, kita hanya perlu memahami sedikit kode dan beberapa tool yang sudah di sediakan oleh adobe dreamweaver, membuat website di dreamweaver anda hanya akan bermain klik mengklik dan sedikit sekali mengetikkan kode2.Kemarin ada seorang teman yang ingin belajar mebuat website di dreamweaver, dia bertanya kepada aku..Membuat website di Dreamweaver harus menginstall XAMPP?
“aku rasa membuat website di dreamweaver tidak perlu jika anda membuat website berbasis html, anda cukup menaruh filenya dimana saja yang anda suka”
Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :
1. Header2. Menu navigasi3. Konten4. Sidebar5. Footer
Langsung saja kita akan membuat website di dreamweaver, buka program Adobe Dreamweaver anda, Create new pilih php
Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat andamenginstal XAMPPD:\website\xampp\htdocs\websiteku.com
Berikutnya anda membuat file baru, tekan CTRL + N pada Blank Page pilih CSS kemudian klik create,simpan dengan nama style.css dalam folder yang sama dengan file index.php
Kembai ke file index.php, klik tab index.php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag </head>1 <link href="style.css" rel="stylesheet" type="text/css" />
Script tersebut berfungsi menghubungkan file CSS dengan index.php
Mengatur Body WebsiteMasih dalam file index.php, 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.
Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : body Define in : style.css
Jika sudah klik ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai berikut :
1. Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000
2. Background = Background color : #CCCCCC3. Box = width : 900 pixel
Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S
Mengatur Link WebsiteSekarang kita akan mengatur warna, ukuran, dan style Link secara default.Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : a Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :Type:
Color : #ff6000 Pada Decoration centang None
Jika sudah klik ok.Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : a:hover Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :Type:
Pada Decoration centang Underline Jika anda ingin mengubah warna link pada saat hover
klik icon kotak yang ada di sebelah tulisancolor, kemudian pilih warnanya.
Jika sudah klik ok.
Memuat Header WebsiteSetelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body>1 <div id="header"></div>
Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi 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 berikuType:
Size : 12 pixel Color : #FFFFFF
Background:
Background image : klik browse pilih header.jpg dalam folder images
Repeat : no-repeatBox :
Width : 860 pixel Float : Left Height : 110 pixel Padding : centang same for all, kemudian isikan 20
pixel
Jika sudah klik OK, kemudian simpan file style.css anda. Untuk melihat preview website anda tekan F12
Selanjutnya kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div
id=”header”> kemudian klik insert = > image = > logo.jpg
Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80
Masih tetap pada Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda.Dibawah code1 <a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
ketikkan1 <p>Deskripsi website anda disini</p>
ganti tulisan deskripsi website anda disini dengan deskripsi/penjelasan website anda.
Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5.
Memuat Menu Navigasi WebsiteSetelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link – link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>1 <div id="navigasi"></div>
Sekarang kita akan mengatur CSS untuk navigasiny. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #navigasi Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut :Background:
Background image : klik browse pilih bg-nav.jpg dalam folder images
Repeat : no-repeatBox :
Width : 860 pixel
Float : Left Height : 35 pixel Pada bagian padding hilangkan centang same for
all, left :20 pixel dan right: 20 pixel Pada bagian margin centang same for all isikan 0
pixel
Jika sudah klik ok, simpan file index.php dan style.css.Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
Setelah muncul jendela Table, isikan pengaturannya sebagai berikut :
Rows : 1 Columns : 4 Table Width kosongkan saja Border Thickness kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5
Jika sudah klik ok.Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut
Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #navigasi a Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :Type:
Color : #FFFFFF (kode warna putih)Jika sudah klik ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekanF12
Memuat Konten WebsiteSekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>1 <div id="conten-wrapper">
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #conten-wrapper Define in : style.css
Seleah muncul CSS Rule Definition for #conten-wrapper in style.css, isikan pengaturannya sebagai berikut :Background:
Background color : #DDDDDDBox :
Width : 860 pixel Float : Left Pada bagian margin centang same for all, isikan 0
pixel Pada bagian padding hilangkan centang same for
all, isikan top:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixel
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten-wrapper”>1 <div id="conten"></div>
Sehingga kodenya menjadi seperti berikut :
123
<div id="conten-wrapper"><div id="conten "></div></div>
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #conten Define in : style.css
Seleah muncul CSS Rule Definition for #conten in style.css, isikan pengaturannya sebagai berikut :Background:
Background color : #FFFFFFBox :
Width : 600 pixel Float : Left Pada bagian padding centang same for all, isikan
20 pixelJika sudah klik ok, simpan file index.php dan style.css.
Memuat Sidebar WebsiteSidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu – menu seperti berita terbaru atau link – link tertentu.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten”></div>1 <div id="sidebar"></div>
Sehingga kodenya menjadi seperti berikut :Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #sidebar Define in : style.css
Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut :Box :
Width : 200 pixel Float : Left Pada bagian margin centang same for all, isikan 0
pixel Pada bagian padding centang same for all, isikan
10 pixelJika sudah klik ok, simpan file index.php dan style.css.Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.1234
<div id="conten-wrapper"><div id="conten "></div><div id="sidebar "></div></div>
Memuat Footer Website
Fotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>1 <div id="footer"></div>
Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Advanced (Ids, pseudo-class selectors)
Selector : #footer Define in : style.css
Seleah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikutBackground:
Background image : klik browse pilih footer.jpg dalam folder images
Repeat : no-repeatBlock:
Text align : CenterBox :
Width : 860 pixel Float : Left Height : 80 pixel Pada bagian padding centang same for
all, isikan 20 pixel
Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :1234567891011121314151617181920212223
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Websiteku</title><link href="style.css" rel="stylesheet" type="text/css" /></head> <body> <div id="header"><a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a><p>Deskripsi website anda disini</p></div> <div id="navigasi"> <table border="0" cellspacing="5" cellpadding="5"> <tr> <td><a href="index.php">Home</a></td> <td><a href="#">Profile</a></td> <td><a href="#">Gallery</a></td> <td><a href="#">Contact</a></td> </tr> </table></div> <div id="conten-wrapper"><div id="conten"></div><div id="sidebar"></div></div> <div id="footer"></div></body></html>
2425262728293031323334
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalamfolder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.Sampai disini tutorial membuat website di dreamweaver, jika ada yang ingin anda tanyakan silahkan bertanya pada kolom komentar
Memecah File Index.php di Dreamweaver CS3Tutorial dreamweaver kali ini adalah kelanjutan tutorial kemarin yaitu membuat website di dreamweaver CS3, setelah kemarin kita membuat file index.php sekarang kita akan memecah file tersebut agar nantinya mudah di edit.
Langsung saja tutorial dreamweaver kali ini yaitu memecah file index.php dengan Dreamweaver,Buka program Adobe Dreamweaver anda, kemudian buka file index.php.Buatlah 3 file baru, tekan Ctrl + N pilih PHP, kemudian simpan beri nama :
1. header.php2. sidebar.php3. footer.php
Setelah anda membuat ke 3 file tersebut, hapus semua kode yang ada didalamnya. Sekarang kita akan menggabungkan semua file tersebut kedalam file index.php
Kemarin susunan kode website kita seperti berikut :123456789101112131415161718192021
<body> <div id="header"><a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a><p>Deskripsi website anda disini</p></div> <div id="navigasi"> <table border="0" cellspacing="5" cellpadding="5"> <tr> <td><a href="index.php">Home</a></td> <td><a href="#">Profile</a></td> <td><a href="#">Gallery</a></td> <td><a href="#">Contact</a></td> </tr> </table></div> <div id="conten-wrapper"><div id="conten"></div><div id="sidebar"></div></div> <div id="footer"></div></body>
22232425
Kemudian cut kode :123456789101112131415
<div id="header"><a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a><p>Deskripsi website anda disini</p></div> <div id="navigasi"> <table border="0" cellspacing="5" cellpadding="5"> <tr> <td><a href="index.php">Home</a></td> <td><a href="#">Profile</a></td> <td><a href="#">Gallery</a></td> <td><a href="#">Contact</a></td> </tr> </table></div>
Paste kedalam header.php, kemudian gabungkan file header.php dengan file index.php caranya ketikkan kode berikut1 <?php include ('header.php') ?>
letakkan di tempat kode yang anda cut tadi atau di bawah <body>
Selanjutnya kita akan menggabungkan atau menghubungkan file sidebar.php dengan file index.php. Cut kode berikut :1 <div id="sidebar"></div>
paste kedalam sidebar.php, dan ketikkan kode berikut di bawah <div id=”conten”></div>1 <?php include ('sidebar.php') ?>
Terakhir kita akan menggabungkan file footer.php dengan file index.php, cut kode berikut :1 <div id="footer"></div>
Paste kedalam file footer.php, dan ketikkan kode berikut tepat di atas </body>1 <?php include ('footer.php') ?>
Jadi dalam folder websiteku.com kita telah memiliki 4 file, yaitu :
1. index.php2. header.php3. sidebar.php4. footer.php
Sedangkan untk membuat halaman yang lainnya, misalnya profile, contact, dan gallery anda tinggal mencopy file index.php kemudian ubah namanya menjadi nama halaman tersebut, dan untuk jelasnya nanti akan saya terangkan dalam tutorial dreamweaver berikutnya.Jadi kesimpulannya jika anda memiliki ingin mengedit atau mengubah pada bagian sidebar, anda tinggal membuka file sidebar.php, dan jika anda memiliki file yang banyak anda tidak perlu merubah semua file anda, cukup sidebar.php saja yang perlu anda edit, itu karena fungsi dari include tadi.Tutorial membuat halaman profile di dreamweaver bisa lihat disini
Membuat Halaman ProfileTutorial Dreamweaver sebelumnya kita sudah memecah file index.php, pada tutorial Dreamweaver kali ini kita akan membuat halaman profile, dan kontak.
Pertama anda buka program Adobe dreamweaver milik anda, kemudian buka kembali file index.php, kemudian Save As atau tekan CTRL + SHIFT + S, beri nama profile.php.Melalui design view, tuliskan judul halaman anda, pada kali ini tulis saja Profile, kemudian blok tulisanProfile, pada panel Properties yang ada di bagian bawah ubah formatnya menjadi Heading 1
Selanjutnya tuliskan isi profile anda di bawah judul halaman anda, terserah anda mau menuliskan apa saja hehe.Untuk memulai paragraph baru tekan Enter saja, tekan Shift + Enter untuk menyisipkan pergantian baris. Terakhir simpan pekerjaan anda tekan Ctrl + S.
Untuk membuat halaman kontak caranya sama saja, anda tinggal buka file index.php kemudian Save As beri nama contact.php
Selanjutnya pada tutorial dreamweaver ini kita akan melink’an halaman – halaman tersebut, buka fileheader.php milik anda, tekan Ctrl + O pilih header.php lalu klik Open.
Pertama blok tulisan Profile yang ada di bagian navigasi pada file header.php milik anda, kemudian pada panel Properties klik icon folder / Browse for File yang ada dalam bagian link, kemudian pilih fileprofile.php.
Lakukan langkah yang sama untuk meLink’an halaman kontak milik anda. Terakhir simpan fileheader.php tekan Ctrl + S, kembali ke tab profile profile.php tekan F12 untuk melihat preview pekerjaan anda.Jika anda masih ingat pada tutorial dreamweaver membuat file index.php yang belum di pecah, bagian navigasi masih menyatu dalam 1 file, jadi ketika anda ingin memberikan link pada navigasi tersebut anda harus mengedit 1 persatu file – file yang anda miliki, misalnyamenu navigasi pada file index.php, profile.php dan contact.php. Itu baru 3 file, bagaimana jika anda memiliki ratusan file / halaman statis? repot bukan?, oleh sebab itu saya menyarankan anda memecah file tersebut .Setelah tutorial ini, kita akan langsung belajar membuat halaman administrator, yang dimana halaman pada halaman admin tersebut hanya bisa di akses oleh anda sendiri dengan cara memasukkan password dan id anda. Pada halaman admin ini andadapat mengedit konten – konten website anda.Yang ingin melanjutkan tutorialnya, langsung saja keeeee TKP (Membuat Database MySQL)
Membuat Database MySQLDatabase sangat diperlukan untuk membuat website dinamis untuk pengolahan semua data da informasi dalam website, sebelum memulai membuat database di server local / localhost anda harus menginstal XAMPP, silakan baca cara install Xampp di Windows.Membuat database MySQL sangat mudah karena sudah disediakan oleh Xampp, langsung saja kita mulai untuk membuat databse di server local,Pertama, ketikkan http://localhost/phpmyadmin pada browser anda, pada Create new database isikan websiteku.
Kemudian anda akan di bawa ke halaman pembuatan tabel baru, untuk kali ini kita langsung saja membuat tabel untuk admin.Pada Create new table on database websiteku isikan :
Name : websiteku Number of field : 3
Jika sudah klik Go.
Berikutnya anda isikan table admin, sebagai berikut
Jika sudah kilik Save.
Maka sekarang anda sudah memiliki tabel admin dalam databse websiteku.Selanjutnya kita akan membuat Membuat Koneksi ke Database.
Membuat Koneksi ke DatabaseUntuk membuat website dinamis dengan Dreamweaver kita perlu membuat koneksi ke database terlebih dahulu, sebelum membuat koneksi ke database di dreamweaver anda harus sudah mensetting site di dreamweaver, dan membuat database mysql.Pertama buatlah folder baru di dalam folder websiteku.com, beri nama fileadmin. Kemudian buka program Adobe Dreamweaver, buatlah file php baru beri nama index.php tekan CTRL + S simpan dalam folder fileadmin.Sekarang saatnya membuat koneksi ke database yang sudah kita buat sebelumnya, pada tab Applicationklik Databases, kemudian klik icon + pilih MySQL Connection,
isikan pengaturannya sebagai berikut : Connection name : websiteku MySQL Server: localhost User name : root (secara default username xampp
anda adalah root, jika anda merubah usernamenya maka sesuaikan dengan milik anda)
Password : kosongkan saja (kecuali anda sudah memberikan password pada databse anda)
Database : klik select kemudian pilih websiteku. terakhir klik ok
Setelah ini kita akan mengisi file index.php ini dengan form login ke halaman administrator website. Silahkan lihat tutorialnya di Membuat Halaman Login
Membuat Halaman LoginSebelumnya kita sudah membuat database website kita dan membuat koneksi di Dreamweaver, kalau anda belum membuatnya silahkan baca disini dan disini hehe.
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 : 32. Collomns : 33. Table Width : kosongkan saja4. Border thickness : kosongkan saja5. Cell padding : 56. Cell spacing : 57. Klik ok.
Maka akan terlihat 9 buah kotak dengan garis putus – putus. Pada baris kotak pojok kiri atas isikanNama, 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 Idisikan 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, padaId isikan password, yang lain biarkan secara default, kalau sudah klik Ok.Setelah muncul TextField untuk memasukkan password, klik TextField tersebut, pada panel Propertiesdi 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.
Jika sudah terseleksi, pada bagian panel Properties klik icon Merges selected cells using spans, kemudian pada Horz rubah menjadi Right.
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 panelProperties.Sampai disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :123456789101112131415
<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>
1617181920212223
<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.
Membuat Halaman Login Part-2Melanjutkan tutorial sebelumnya Membuat Halaman Login sekarang saya akan lanjutkan dengan Membuat Halaman Login Part-2.
Sebelum Membuat halaman login ini, buatlah 2 file php baru, beri nama :
1. home.php2. login-gagal.php
Simpan dalam folder fileadmin
File home.php ini adalah halaman depan administrator anda, sedangkan login-gagal.php ini adalah halaman yang dituju jika password dan username yang dimasukkan tidak cocok, isikan saja file login-gagal.php dengan kata – kata“Ooops, login gagal. Silahkan coba kembali”Pada kata Silahkan coba kembali berikan link menuju halaman index.php.Buka kembali file index.php milik anda, klik Insert > Data Objects > User Authecation > Log In User
Setelah muncul jendela Log In User, isikan pengaturannya seperti gambar berikut
Jika sudah klik ok.Sedikit penjelasan isian dari Log In User :
Get Input From Form : form login yang telah anda buat sebelumnya
Username field : kolom tempat anda mengisikan nama / username anda
Password field : kolom tempat anda mengisikan password anda
Validate usig connection : adalah koneksi dari website yang telah anda buat, jika anda belum membuatnya silahkan baca disini
Table : pada kali ini anda memilih table admin yang ada dalam database websiteku yang telah anda buat sebelumnya.
If login succeeds, go to : halaman yang dituju jika login berhasil
If login fails, go to : halaman yang dituju jika login gagal
Restric access base on : hak batasan login.Selanjutnya kita akan memberikan fungsi MD5 pada login form ini, melalui code view tekan CTRL + F (find) ketikkan1 $password=$_POST['password'];
kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini1 $password=md5 ($_POST['password']);
jadi kode keseluruhannya menjadi seperti ini123456789101112131415161
<?php require_once('../Connections/websiteku.php'); ?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue{ $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue;
7181920212223242526272829303132333435363738394
}}?><?php// *** Validate request to login to this site.if (!isset($_SESSION)) { session_start();} $loginFormAction = $_SERVER['PHP_SELF'];if (isset($_GET['accesscheck'])) { $_SESSION['PrevUrl'] = $_GET['accesscheck'];} if (isset($_POST['nama'])) { $loginUsername=$_POST['nama']; $password=md5 ($_POST['password']); $MM_fldUserAuthorization = ""; $MM_redirectLoginSuccess = "home.php"; $MM_redirectLoginFailed = "login-gagal.php"; $MM_redirecttoReferrer = false; mysql_select_db($database_websiteku, $websiteku); $LoginRS__query=sprintf("SELECT nama, password FROM `admin` WHERE nama=%s AND password=%s", GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text")); $LoginRS = mysql_query($LoginRS__query, $websiteku) or die(mysql_error()); $loginFoundUser = mysql_num_rows($LoginRS); if ($loginFoundUser) { $loginStrGroup = ""; //declare two session variables and assign them $_SESSION['MM_Username'] = $loginUsername; $_SESSION['MM_UserGroup'] = $loginStrGroup; if (isset($_SESSION['PrevUrl']) && false) { $MM_redirectLoginSuccess = $_SESSION['PrevUrl']; } header("Location: " . $MM_redirectLoginSuccess ); } else { header("Location: ". $MM_redirectLoginFailed ); }}?>
0414243444546474849505152535455565758596061626
364656667686970717273
ya cukup sekian tutorial membuat halaman login di dreamweaver cs kali ini, silahkan simpan pekerjaan anda tekan CTRL + S kemudian preview tekan F12, jika anda mencoba form login tersebut maka anda akan di bawa kehalaman login gagal, karena kita belum mengisi data2 dalam table admin dalam database websiteku.Tutorial berikutnya kita akan membuat halaman register admin atau form register untuk administrator.
Membuat Halaman RegisterHalaman register tentunya berisi form register atau formulir pendaftaran. Setelah kemarin tutorialmembuat halaman login part 1 dan part 2, sekarang saatnya kita belajar membuat halaman register untuk administrator dengan Adobe Dreamweaver CS3.
Pertama anda buat file php baru, simpan dalam folder fileadmin milik anda, dan beri nama register.php.klik Insert > Data Objects > Insert Record > Record Insertion From Wisard
Setelah muncul jendela Record Insertion From, isikan pengaturannya sebagai berikut :
Connection : pilih koneksi yang telah anda buat, kalau belum ada koneksi, silahkan baca tutorialmembuat koneksi dengan dreamweaver cs3
Table : pilih table admin, tabel yang anda buat dalam database milik anda. Jika anda belum membuat database silahkan di baca tutorial Membuat database Mysql
After inserting, go to : isikan file index.php yang berada dalam folder fileadmin, agar setelah anda mendaftar akan langsung di bawa ke halaman login.
Form fields : klik tulisan id kemudian hilangkan dengan meng-klik icon (-)
Terakhir klik ok.Selanjutnya kita akan memberikan fungsi MD5 pada form register, melalui code view tekan CTRL + F (find) ketikkan1 GetSQLValueString($_POST['password'], "text"));
kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini1 GetSQLValueString(md5 ($_POST['password']), "text"));
Simpan pekerjaan anda tekan CTRL + S kemudian preview teken F12, coba daftar kemudian test login dengan nama dan password yang telah anda buat tadi, kalau berhasil maka anda akan di bawa ke halamanhome.php.jadi kode keseluruhannya menjadi seperti ini :123456789101112131415161718192021222
<?php require_once('../Connections/websiteku.php'); ?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue{ $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue;}} $editFormAction = $_SERVER['PHP_SELF'];if (isset($_SERVER['QUERY_STRING'])) { $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);} if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { $insertSQL = sprintf("INSERT INTO `admin` (nama, password) VALUES (%s, %s)", GetSQLValueString($_POST['nama'], "text"), GetSQLValueString(md5 ($_POST['password']), "text")); mysql_select_db($database_websiteku, $websiteku); $Result1 = mysql_query($insertSQL, $websiteku) or die(mysql_error());
3242526272829303132333435363738394041424344454
$insertGoTo = "index.php"; if (isset($_SERVER['QUERY_STRING'])) { $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?"; $insertGoTo .= $_SERVER['QUERY_STRING']; } header(sprintf("Location: %s", $insertGoTo));}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head> <body><form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1"> <table align="center"> <tr valign="baseline"> <td nowrap="nowrap" align="right">Nama:</td> <td><input type="text" name="nama" value="" size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Password:</td> <td><input type="text" name="password" value="" size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right"> </td> <td><input type="submit" value="Insert record" /></td> </tr> </table> <input type="hidden" name="MM_insert" value="form1" /></form></body></html>
6474849505152535455565758596061626364656667686
9707172737475767778
Sekian tutorial membuat halaman register di dreamweaver cs3 ini, jika ada yang kurang jelas silahkan bertanya melalui form komentar di bawah.Untuk tutorial selanjutnya kita akan Membuat Halaman Administrator.
Halaman Administrator WebsiteSebelum memulai tuorial membuat halaman administrator website atau halaman admin di
dreamweaver ini saya ingin meminta maaf kepada teman – teman yang megikuti tutorial dreamweaver diMous 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 danhalaman 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, ketikkan1 <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 berikut1
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.
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 kolomtop 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 berikut1
2
3
4
5
<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>
6
7
8
<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 menjadi1
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 : inlineBox :
Margin : hilangkan centang same for all, pada bagian Left isikan 10 pixel
List :
Type: noneJika 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.
Memberikan Batasan Hak
Akses AdministratorPada tutorial kali ini kita akan memberikan batasan hak akses administrator atau memberikan hak akses ke halaman admin web, artinya jika ada pengunjung website yang jahi mencoba mengakses halaman utama website kita dengan cara mengetikkan URL website, misalnya mengetikkan “http://websiteku.com/fileadmin/home.php” maka orang yang mencoba mengakses URL tersebut akan di bawa ke halaman logout dan diminta untuk login menggunakan username dan password.Setelah anda memiliki atau membuat halaman administrator yang saya sudah jelaskan pada tutorial sebelumnya, langsung saja sekarang kita mulai memberikan batasan hak akses administrator.
Buka program adobe dreamweaver anda, kemudian buat file php baru simpan dalam folder fileadmintekan Ctrl + S beri nama logout.php
Selanjutnya buka file home.php > pada menu bar klik Insert > Data Objects > User Authentication >Restric Access To Page
Setelah muncut jendela Restric Access To Page isikan pengaturan sebagai berikut :
Restric based on : Username and Password
If Access denied, go to : klik brows pilih file logout.php
If Access denied, go to ini kira – kira maksudnya, jika ada user yang mencoba mengakses halaman administrator website anda tanpa proses login maka orang tersebut akan di bawa ke halaman logout.phpSilahkan coba ketikkan di browser anda “http://localhost/websiteku.com/fileadmin/home.php” maka secara otomatis anda akan di bawa ke halaman kosong.Setelah tutorial ini saya akan jelaskan bagaimana cara membuat halaman logout <<diklik aja linknya :D gak usah pikir panjang lagi heehehhe, caranya juga simple banget seperti memberikan batasan hak akses ini.
Membuat Halaman Log outSebelum memulai tutorial Membuat Halaman Log Out ini saya minta maaf atas keterlambatan update ini, karena banyak kesibukan jadi belum sempat update.
Kemarin terakhir kita sudah memberikan batasan hak akses halaman administrator, yang dimana jika ada user ingin mengakses salah satu halaman administrator tanpa melalui proses login maka secara otomatis dia akan di bawa ke halaman log out.Di halaman log out ini nantinya akan langsung mengarah kehalaman depan administrator dan meminta user yang jahil tersebut untuk melakukan login terlebih dahulu.Pertama jalankan program adobe dreamweaver milik anda, kemudian buka file log out.php yang terdapat dalam folder fileadmin.Setelah halaman log out / log out.php anda terbuka melalui code view hapus semua code yang terdapat dalam file tersebut.Selanjutnya pada menubar dreamweaver klik Insert > Data Objects > User Authentication > Log out User
Setelah muncul window / jendela Log out user isikan pengaturannya seperti berikut :
Log out when : pilih Page Load When done, go to : pilih file index.php yang ada
dalam folder fileadmin
Jika sudah klik ok, kemudian simpan pekerjaan anda, tekan Ctrl + S. Maka kode dari halaman log out sbb..1234567891011121314
<?php// *** Logout the current user.$logoutGoTo = "index.php";if (!isset($_SESSION)) { session_start();}$_SESSION['MM_Username'] = NULL;$_SESSION['MM_UserGroup'] = NULL;unset($_SESSION['MM_Username']);unset($_SESSION['MM_UserGroup']);if ($logoutGoTo != "") {header("Location: $logoutGoTo");exit;}?>
Sudah… hanya itu saja caranya hahhahaha, sebenarnya simple banget, sekarang coba test drive ketikkan “http://localhost/websiteku.com/fileadmin/home.php” pada browser anda, kalau sukses anda akan tetap berada di halaman depan / halaman login administrator.
Sekarang coba login kehalaman administrator anda, kemudian klik link log out pada navigasi, kalau sukses maka anda tetap akan di bawa kehalaman login.Cukup sekian tutorial membuat halaman log out, semoga dapat membantu.Nantikan tutorial berikutnya yaitu
