modul koneksi database
DESCRIPTION
koneksi databaseTRANSCRIPT
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 2/26
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.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 3/26
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“
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 4/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 5/26
• 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,
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 6/26
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.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 7/26
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.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 8/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 9/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 10/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 11/26
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 12/26
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' ] ) ) {
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 13/26
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 ) ;
}
}
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 14/26
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.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 15/26
• 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;
} }
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 16/26
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 >
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 17/26
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">
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 18/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 19/26
• 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<di v i d="navi gasi "></ di v>
simpan pekerjaan anda tekan Ctrl + S.
klik New CSS Rule, isikan pengaturannya sebagai berikut :
• Selector Type : Advanced (Ids, pseudo‐class selectors)
• Selector : #navigasi
• Define in : style.css
Setelah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai
berikut :
Box :
• width : 900 pixel
• float : left
• Padding : hilangkan centang same for all, pada kolom right dan left isikan 10 pixel, pada kolom
top dan bottom isikan 0 pixel.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 20/26
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>
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 21/26
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 Type : Advanced (Ids, pseudo‐class selectors)
• Selector : #navigasi ul
• Define in : style.css
Setelah muncul CSS Rule Definition for #navigasi ul in style.css, isikan pengaturannya sebagai
berikut :
Box :
• width : 900 pixel
•
float
:
left
• Padding : centang same for all isikan 0 pixel.
Jika sudah klik OK.
klik kembali New CSS Rule, isikan pengaturannya sebagai berikut :
• Selector Type : Advanced (Ids, pseudo‐class selectors)
• Selector : #navigasi li
• Define in : style.css
Setelah muncul CSS Rule Definition for #navigasi li in style.css, isikan pengaturannya sebagai
berikut :
Block:
• Display : inline
Box :
• Margin : hilangkan centang same for all, pada bagian Left isikan 10 pixel
List :
• Type: none
Jika sudah klik OK.
Selanjutnya ketikkan kode berikut,
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 22/26
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 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.
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 23/26
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
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 24/26
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 :
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 25/26
• 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 ;
}
?>
7/21/2019 Modul Koneksi Database
http://slidepdf.com/reader/full/modul-koneksi-database 26/26
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