Modul Koneksi Database

7/21/2019 Modul Koneksi Database

http://slidepdf.com/reader/full/modul-koneksi-database 1/26

CaraInst l PHP

ini adala

membanwebservlengkap

FTP Ser

anda bis

adanya pDan kele

versi 4 k

window

Install X

XAMPPXAMPP

Install X

Jalankan

Tentuka

kelanjutan

un sebuahr local kitaerdiri dari

ver 0.9.39,

kunjungi

aket dari X bihan dari

e 5. Bagi an

disini.

MPP di w

sudah terindi windows

MPP step

programny

drive temp

artikel sebe

ebsite ber akan menggpache 2.2.

Tomcat 7.0

ebsitenya (

MPP ini aAMPP ada

a yg belu

lumnya me

asis php munakan XA1, MySQL

.21 (with m

ttp://www.

an memudaPHP switch

memiliki

buat webs

sql dibutuhPP, karen 5.5.16, PH

od_proxy_

pachefrien

hkan kita m didalamny

AMPP sila

te sendiri,

kan webser program i 5.3.8, ph

jp as conn

s.org/en/xa

embuat web

dari php v

kan downl

ang dimana

er dan untui memilikiMyAdmin

ctor) untu

mpp-windo

site denganrsi 5 ke ver

ad XAMP

untuk

membuataket yang3.4.5, FileZ

lebih jelas

s.html). De

platform Pi 4 atau dar

1.7.4 for

illa

ya

ngan

P.i

ndows sang

tal di komp.

1

kemudian

at anda aka

at mudah se

ter anda. B

lik next, ja

menyimpa

kali anda la

erikut ini a

ngan klik c

hasil extra

kukan, ting

alah bebera

al klik next

pa langkah

dan oke

eng-install

ncel heheh

c dari XA P. Jika suda

h klik next

http://mous-design.com/membuat-website-sendiri.html

http://www.apachefriends.org/en/xampp-windows.html





http://nchc.dl.sourceforge.net/project/xampp/XAMPP%20Windows/1.7.4/xampp-win32-1.7.4-VC6-installer.exe


























































http://mous-design.com/membuat-website-sendiri.html



Install XAMPP step 2

Jika muncul tampilan seperti gambar di bawah, centang saja semua

Install XAMPP step 3

Kemudian akan muncul proses extrack file XAMPP, tunggu sampai proses selesai, kemudiantinggal next/ok, jika semua proses berjalan dengan lancar maka akan muncul XAMPP ControlPanel Application, klik start pada bagian kanan Apache dan Mysql sehinggal status menjadi

Running.



FINISH

Proses installasi XAMPP berakhir. gampang kan? silahkan cek dengan mengetikkanhttp://localhost pada browser anda. Jika muncul seperti gambar di bawah berarti proses install

xampp berhasil dan berjalan dengan baik,

Semoga tutorial di atas dapat membantu,

ikuti tutorial berikatnya “Layout Website Dengan Photoshop“

http://mous-design.com/layout-website-dengan-photoshop.html

http://mous-design.com/layout-website-dengan-photoshop.html



Membuat Database MySQL

Database 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 : websitek

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

http://localhost/phpmyadmin/

http://localhost/phpmyadmin/

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



• umber of field : 3

Me buat Hala an ogin

Sebelumkalau an

admin si

index.p

Halama

formnya

Setelah a

dreamw

Klik Ins

Klik Ins

1.

2. 3. T

4.

5. 6.

7.

Maka ak

isikan N

Kotak di

Pada bar

pada Id i

nya kita sud a belum m ah membuambuatnya s databaseilahkan bac ebsite kitadisini dan

ahkan lihat

p yang ada

login pada

terlebih da

nda membu

aver anda,

rt > Form

rt >Table,

ow : 3

ollomns : 3 able Width

order thick

ell paddingell spacing

lik ok.

n terlihat 9

ma, kotak

bawah Na

s Nama, kl

sikan nama

Sdisini. Bagi

di dalam fol

website tent

ulu.

ka file inde

emudian ik

> Form

isikan table

: kosongkan

ess : koson

: 5 : 5

buah kotak

i sebelah k

a isikan Pa

k di dalam

, yang lain

ebelum meanda yang

der fileadm

unya berisi

.php dalam

ti langkah

propertyny

saja

kan saja

dengan gari

nan nama i

ssword, da

otak paling

iarkan seca

an membuaisini hehe. t koneksi di Dreamweav

ulai tutoriengikuti tu

in.

ogin form,

folder filea

langkahny

sbb :

s putus – pu

sikan : (titi

di sebelah

kanan, ke

a default, k

l ini anda htorial ini da

ertama kit

min, klik k

a :

tus. Pada b

dua).

kanan Pass

udian klik

alau sudah

er ,

rus membui awal silah

at tabel untkan buka fil

ke

akan mem uat login

e dalam are kerja

ris kotak pojok kiri atas

ord isikan : (titik dua).

nsert > Fo

lik Ok.

m > Text Field,

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





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



















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 :

1

2

34

56

7

89

10

111213

14

1516

17

1819

20

21

2223

<f ormi d=" f orm1" name="f or m1" met hod="post " act i on=""> <t abl e cel l spaci ng="5" cel l paddi ng="5"> <t r > <t d>Nama</ t d> <t d>: </ t d> <t d><l abel > <i nput t ype="t ext " name="nama" i d="nama" / > </ l abel ></ t d> </ t r > <t r >

<t d>Passwor d</ t d> <t d>: </ t d> <t d><l abel > <i nput t ype="t ext " name="passwor d" i d="passwor d" / > </ l abel ></ t d> </ t r> <t r al i gn="r i ght "> <t d col sp n="3"><l abel a > <i nput t ype="submi t " name="l ogi n" i d="l ogi n" val ue="Logi n" / > </ l abel ></ t d> </ t r> </ t abl e></ f or m>

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




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

isikan pengaturannya sebagai berikut :

• Connection name : websiteku

• MySQL Server: localhost

• User name : root (secara default username xampp anda adalah root, jika anda merubahusernamenya maka sesuaikan dengan milik anda)

•

Password : kosongkan saja (kecuali anda sudah memberikan password pada databseanda)

• 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

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


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




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



Melanjutkan 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.php 2. login‐gagal.php

Simpan dalam folder fileadmin

File home.php ini adalah halaman depan administrator anda, sedangkan login-gagal.php iniadalah 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






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








23 case "def i ned":

24

$t heVal ue = ( $theVal ue ! = " " ) ? $t heDef i nedVal ue : $t heNot Def i nedVal ue;

25

break;

26

}

27

28

29

?>

30 <?php

31 / / *** Val i dat e request t o l ogi n t o t hi s s i t e.

32 i f

( ! i sset ( $_SESSI ON) ) {

33 sessi on_star t ( ) ;

34

}

35

36

$l ogi nFor mAct i on = $_SERVER[ ' PHP_SELF' ] ;

37

i f ( i sset ( $_GET[ ' accesscheck' ] ) ) {

38

39

40

41

$l ogi nUser name=$_POST[ ' nama' ] ;

42 $passwor d=md5 ( $_POST[ ' password' ] ) ;

43 $MM_f l dUserAut hori zat i on = "" ;

44

$MM_r edi r ect Logi nSuccess = "home. php";

45

$MM_r edi r ect Logi nFai l ed = "l ogi n- gagal . php" ;

46

$MM_r edi r ect t oRef err er = f al se;

47

mysql _sel ect _db( $database_websi t eku, $websi t eku) ;

return $theVal ue;

}

}

$_SESSI ON[ ' PrevUr l ' ] = $_GET[ ' accesscheck' ] ;

}

i f ( i sset ( $_POST[ ' nama' ] ) ) {



48

49 $Logi nRS__query=spr i nt f ( "SELECT nama, passwor d FROM `admi n` WHERE nama=%s

AND passwor d=%s",

50

51

GetSQLVal ueSt r i ng( $l ogi nUsername, "t ext " ) , GetSQLVal ueSt r i ng( $password,

" text" ) ) ;

52

53

$Logi nRS = mysql _quer y( $Logi nRS__quer y, $websi t eku) or di e( mysql _er r or ( ) ) ;

54

$l ogi nFoundUser = mysql _num_r ows( $Logi nRS) ;

55

i f ( $l ogi nFoundUser) {

56

57

58

$_SESSI ON[ ' MM_User name' ] = $l ogi nUser name;

59 $_SESSI ON[ ' MM_User Gr oup' ] = $l ogi nSt r Gr oup;

60

61 i f ( i sset ( $_SESSI ON[ ' Pr evUr l ' ] ) && f al se) {

62 $MM_r edi r ect Logi nSuccess = $_SESSI ON[ ' Pr evUr l ' ] ;

63

}

64

header ( "Locat i on: " . $MM_r edi r ectLogi nSuccess ) ;

65

}

66

el se {

67

68

69 ?>

70

71

72

$l ogi nSt r Gr oup = "" ;

/ / decl ar e two sessi on var i abl es and assi gn them

header ( "Locat i on: " . $MM_r edi r ect Logi nFai l ed ) ;

}

}



73

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 Register

Halaman register tentunya berisi form register atau formulir pendaftaran. Setelah

kemarin tutorial membuat 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

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.

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

















• 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

1Get SQLVal ueSt r i ng( $_POST[ ' passwor d' ] , "t ext" ) ) ;

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

1Get SQLVal ueSt r i ng( md5 ( $_POST[ ' password' ] ) , " t ext " ) ) ;

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 akandi bawa ke halaman home.php.

jadi kode keseluruhannya menjadi seperti ini :

12

3

4

56

7

89

101112

13

14

151617

18

19

20

2122

2324

25

2627

28

<?php r equi r e_once( ' . . / Connect i ons/ websi t eku. php' ) ; ?><?php i f ( ! f unct i on_exi st s( "Get SQLVal ueSt r i ng") ) { f uncti on GetSQLVal ueSt r i ng( $t heVal ue, $theType, $theDef i nedVal ue = "" ,$theNot Def i nedVal ue = "" ){

$t heVal ue = get _magi c_quotes_gpc( ) ? st r i psl ashes( $t heVal ue) : $t heVal ue;

$t heVal ue = f unct i on_exi st s( "mysql _r eal _escape_st r i ng") ?mysql _r eal _escape_st r i ng( $t heVal ue) : mysql _escape_st r i ng( $t heVal ue) ;

swi t ch ( $t heType) { case "text": $t heVal ue = ( $theVal ue != "") ? " ' " . $t heVal ue . " ' " : "NULL"; br eak;

case "l ong": case " i nt " :

$t heVal ue = ( $theVal ue ! = "" ) ? i nt val ( $t heVal ue) : "NULL"; break;

case "doubl e" : $t heVal ue = ( $theVal ue != "") ? " ' " . doubl eval ( $t heVal ue) . "' " :

"NULL"; break;

case "dat e" : $t heVal ue = ( $theVal ue != "") ? " ' " . $t heVal ue . " ' " : "NULL"; break;

case "def i ned": $t heVal ue = ( $theVal ue ! = "" ) ? $t heDef i nedVal ue : $theNotDef i nedVal ue;

break; } return $theVal ue;

} }





29

3031

32

33

3435

36

3738

39

4041

42

43

44

4546

4748

49

5051

52

5354

5556

57

58

5960

61

6263

64

6566

67

6869

70

71

7273

74

$edi t For mAct i on = $_SERVER[ ' PHP_SELF' ] ;i f ( i sset ( $_SERVER[ ' QUERY_STRI NG' ] ) ) {

$edi t For mAct i on . = "?" . ht ml ent i t i es( $_SERVER[ ' QUERY_STRI NG' ] ) ; }

i f ( ( i sset ( $_POST["MM_i nsert " ] ) ) && ( $_POST[ "MM_i nsert " ] == " f orm1") ) {

$i nsert SQL = spr i nt f ( " I NSERT I NTO `admi n` ( nama, passwor d) VALUES ( %s,%s) " , Get SQLVal ueSt r i ng( $_POST[ ' nama' ] , " t ext " ) , GetSQLVal ueSt r i ng( md5 ( $_POST[ ' password' ] ) ,

" text" ) ) ;

mysql _sel ect_db( $dat abase_websi t eku, $websi t eku) ; $Resul t 1 = mysql _query( $i nser t SQL, $websi t eku) or di e( mysql _er r or ( ) ) ;

$i nser t GoTo = " i ndex. php" ; i f ( i sset ( $_SERVER[ ' QUERY_STRI NG' ] ) ) {

$i nser t GoTo . = ( st r pos( $i nser t GoTo, ' ?' ) ) ? "&" : " ? " ; $i nser t GoTo . = $_SERVER[ ' QUERY_STRI NG' ] ;

} header ( spr i nt f ( "Locat i on: %s", $i nser t GoTo) ) ;

} ?><! DOCTYPE ht ml PUBLI C "- / / W3C/ / DTD XHTML 1. 0 Transi t i onal / / EN" "ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d"><html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml "><head><meta ht t p- equi v="Cont ent - Type" cont ent ="t ext/ ht ml ; char set =ut f - 8" / ><t i t l e>Unt i t l ed Document </ t i t l e></ head>

<body><f orm act i on="<?php echo $edi t FormAct i on; ?>" met hod="post " name="f or m1" i d="f orm1">

<t abl e al i gn="cent er "> <t r val i gn="basel i ne"> <t d nowr ap="nowr ap" al i gn="r i ght ">Nama: </ t d> <t d><i nput t ype="t ext " name="nama" val ue="" si ze="32" / ></ t d> </ t r> <t r val i gn="basel i ne"> <t d nowr ap="nowr ap" al i gn="r i ght ">Password: </ t d> <t d><i nput t ype="t ext " name="passwor d" val ue="" si ze="32" / ></ t d> </ t r> <t r val i gn="basel i ne"> <t d nowr ap="nowr ap" al i gn="r i ght "> </ t d> <t d><i nput t ype="submi t " val ue=" I nser t r ecor d" / ></ t d> </ t r>

</ t abl e> <i nput t ype="hi dden" name="MM_i nser t " val ue="f orm1" / ></ f or m></ body></ html >



75

7677

78

Halaman Administrator Website

Sebelum memulai tuorial membuat halaman administrator website atau halaman admin di

dreamweaver ini saya ingin meminta maaf kepada teman – teman yang megikuti tutorial

dreamweaver di Mous Design, lama saya tidak bisa melanjutkan tutorial ini karena banyakurusan 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 codeview, ketikkan

1<l i nk hr ef ="st yl e. css" t ype="t ext / css" r el ="st yl esheet " / >

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, caranyatekan 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<di v i d="header">

http://mous-design.com/

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



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





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




http://mous-design.com/



2

3

<h2>Admi n Websi t eku</ h2>

</ di v>

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 : #header


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<di v i d="navi gasi "></ di v>

simpan pekerjaan anda tekan Ctrl + S.

klik New CSS Rule, isikan pengaturannya sebagai berikut :


• Selector : #navigasi


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

berikut :

Box :


• float : left

• Padding : hilangkan centang same for all, pada kolom right dan left isikan 10 pixel, pada kolom

top dan bottom isikan 0 pixel.



Border :

• Style : centang Same for all isikan solid.

• Width : centang same for all isikan 1 pixel

• Color : centang same for all isikan #CCCCCC

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

Kemudian ketikkan kode berikut

1

2

3

4

5

6

7

8

<ul >

<l i ><a hr ef ="home. php">Home</ a></ l i >

<l i ><a hr ef ="edi t pr of i l e. php">Pr of i l e</ a></ l i >

<l i ><a hr ef ="cat egori es. php">Categori es</ a></ l i >

<l i ><a href ="post . php">Post </ a></ l i >

<l i ><a href ="message. php">Message</ a></ l i >

<l i ><a href =" l ogout . php">Logout </ a></ l i >

</ ul >

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

1

2

3

4

5

6

7

8

9

10

<di v i d="navi gasi ">

<ul >

<l i ><a href ="home. php">Home</ a></ l i >

<l i ><a hr ef ="edi t pr of i l e. php">Pr of i l e</ a></ l i >

<l i ><a hr ef ="categori es. php">Categori es</ a></ l i >

<l i ><a hr ef ="post . php">Post </ a></ l i >

<l i ><a href ="message. php">Message</ a></ l i >

<l i ><a hr ef =" l ogout . php">Logout </ a></ l i >

</ ul >

</ di v>



Kode – kode tersebut membentuk link ke halaman yang lainnya, misalnya Profile di klik makaanda 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 : #navigasi ul


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

berikut :

Box :


•

float

:

left

• Padding : centang same for all isikan 0 pixel.

Jika sudah klik OK.

klik kembali New CSS Rule, isikan pengaturannya sebagai berikut :


• 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

<di v i d="cont en">

<h3>Admi n Home</ h3>

<p>Sel amat dat ang di hal aman admi ni st r at or websi t eku, i si adal ah cont ohhal aman depan admi n websi t e ki t a, kata - kat a i ni hanya unt uk t est i ng pada

t utor i al pembuat an hal aman admi ni st r at or websi t e dan hanya sebagai cont ohhal aman admi ni st r at or websi t e, sel anj ut nya gant i t ul i san i si t er ser ah andamengi si nya dengan kat a - kat a mi l i k anda sendi r i , mi sal nya seper t i peri ngatanunt uk semua admi n yang memasuki hal aman admi ni st r at or websi t e. </ p>

<p>Sekal i l agi kat a - kat a dal amhal aman admi ni st r ator i ni bi sa anda gant idan t ol ong di gant i , kar ena kat a - kata i ni hanya sebagai cont oh semat a dant i dak ada maksud unt uk bel aj ar mengol ah kata, karena saya sendi r i sudahpusi ng unt uk mengol ah kata - kat a unt uk hal aman admi ni st r at or websi t ei ni . </ p>

</ di v>

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


• Selector : #conten


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

berikut :

Box :


• 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 kehalamanadministrator website anda, jadi hanya orang yang terdaftar saja yang bisa masuk ke halaman

administrator website milik anda.

Jika anda ingin berlangganan artikel mous design anda bisa masukkan email anda di kolom

berlangganan yang ada di bagian kanan website ini, dan apa bila ada pertanyaan ataupun

komentar silahkan berkomentar di dalam form komentar di bawah.

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

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

Pada 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 mengaksesURL 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/memberikan-batasan-hak-akses-administrator.html



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










If Access denied, go to ini kira – kira maksudnya, jika ada user yang mencoba mengakseshalaman 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.

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

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



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



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

1

2

3

4

5

6

7

8

9

10

unset ( $_SESSI ON[ ' MM_User Gr oup' ] ) ;

11

i f ( $l ogout GoTo ! = " " ) {header( "Locat i on: $l ogout GoTo") ;

12

13

14

<?php

/ / *** Logout t he cur r ent user .

$l ogoutGoTo = " i ndex. php" ;

i f ( ! i sset ( $_SESSI ON) ) {

sessi on_star t ( ) ;

}

$_SESSI ON[ ' MM_User name' ] = NULL;

$_SESSI ON[ ' MM_User Gr oup' ] = NULL;

unset ( $_SESSI ON[ ' MM_User name' ] ) ;

exi t ;

}

?>



Sudah… hanya itu saja caranya hahhahaha, sebenarnya simple banget, sekarang coba test driveketikkan “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 l og 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

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

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

Documents

Modul Koneksi Database