Selamat bertemu kembali sobat.....
Pada tutorial sebelumnya kita telah
membuat database “world-info, kumpulan function 'library.php' ,index.php ,login
dan logout, home.php serta beberapa halaman php lainnya. Di tutorial part3 ini
kita akan mencoba membuat validasi akses pada setiap halaman dengan
memanfaatkan $_SESSION['id_user'].
Maksud validasi hak
akses ini adalah jika user belum login maka dia tidak bisa mengakses halaman
home dan halaman lain yang membutuhkan login. Sedangkan kalau user sudah login
maka ketika mengakses halaman index maka akan dialihkan ke halaman home.
Sebelum kita mulai pastikan pembaca
sudah paham dengan semua file yg telah dibuat pada Part1 dan Part2. untuk sobat yang belum paham: silahkan di baca lagi.
Sesuaikan
nama databasenya, jangan sering dirubah-rubah agar koneksi halaman php ke
database mysql tetap lancar.
Untuk mencegah user mengakses halaman yg tidak semestinya
kita bisa gunakan $_SESSION . Kita akan tambahkan kode nya satu persatu pada
tiap halaman. Caranya adalah sebagai berikut :
1. Buka halaman index.php
Ubahlah kode pada bagian atas :
<?php
include ("library.php");
?>
Menjadi kode syntak
ini :
<?php
session_start();
include("library.php");
if(empty($_SESSION['id_user'])){
//fungsi jika session kosong belum login
?>
Dan tambahkan kode
setelah syntak </html> di bawah ini :
<?php
}
else
{
header("Location:home.php");
}
?>
Jadi keadaan
halaman index sekarang telah berada dalam sebuah fungsi if. Logikanya begini :
MULAI SESSION
CEK SESSION, JIKA
KOSONG (belum login) MAKA
tampilkan halaman
index buat daftar atau login
KALAU SESSION ADA
NILAINYA(sudah login) MAKA
halaman dialihkan
ke Home.php
2. sobat harus perhatikan konsep menaruh
script Halaman ditengah fungsi IF diatas. Halaman-halaman selanjutnya akan
diberikan proses yang sama. Lakukan pengapitan halaman web seperti langkah 1
diatas pada halaman daftar_sukses.php
dan gagallogin.php.
3. Setelah
daftar_sukses.php dan gagallogin.php selesai ditambahkan kodenya, selanjutnya
adalah home.php.
Buka home.php dan
lakukan proses berikut :
ubah lah kode pada
bagian atas home.php :
<?php
session_start();
include("library.php");
$id_user=$_SESSION['id_user'];//memakai
variabel id_user dari SESSION
$nama_depan=$_SESSION['nama_depan'];
$nama_belakang=$_SESSION['nama_belakang'];
?>
Menjadi :
<?php
session_start();
include "library.php";//
menggukan library
if(isset($_SESSION['id_user'])){
//jika session udh ada isinya alias udh login
if(isset($_GET['id_user'])){
//jika ada variabel
get['id_user'], variabel ini dikirim ke halaman ini dengan menggunakan fungsi
?id_user= yg nantinya akan menempel pada link action. kalau bingung ntar ada
contohnya :D
$id_user=$_GET['id_user'];
}
if(empty($_GET['id_user'])){
// jika tidak ada nilai GET yang dikirim ke halaman ini maka variabel $id_user
nilainya adalah = $_SESSION
$id_user=$_SESSION['id_user'];
}
$link=koneksi_db();//buka
koneksi database
//query eksekusi
mencari data array
$query=mysql_fetch_array(mysql_query("select
* from user where id_user='$id_user'",$link));
//menyimpan hasil
query pada variabel
$nama_depan=$query['nama_depan'];
$nama_belakang=$query['nama_belakang'];
<strong>$photo</strong>=$query['foto_profil'];
?>
dan berikan kode
berikut pada bagian akhir setelah </html> :
<?php
}else{
header("Location:index.php");
}
?>
NB : Variabel
$photo diatas nanti akan digunakan untuk menampilkan foto profil user. Jika
kita ingin menambahkan foto profil default untuk user maka lakukan langkah
berikut :
a. cari gambar di
google yg seperti ini, atau sobat bisa menyimpan gambar ini :
 |
| foto default.jpg |
Kemudian buat
folder baru pada folder namaproject dengan nama foto. seperti ini :
 |
| new folder project |
Beri nama foto tadi
dengan nama: default.jpg dan simpan kedalam folder foto yang baru kita buat.
b. Buka phpmyadmin,
pilih database 'tutorialjaco' -> pilih table 'user' kemudian lihat isi dari
kolom 'foto_profil' masih NULL.
 |
| foto profil masih "NULL" |
Yang perlu kita
lakukan adalah merubah isi dari foto_profil itu menjadi 'default.jpg' sesuai
nama foto yang telah kita bahas sebelumnya.Untuk merubah nya lakukan dengan cara
berikut :
Klik edit.
 |
| klik edit |
Beri nama
“default.jpg” pada foto_profil. Kemudian klik GO pada bagian bawah.
 |
| ganti foto profil |
c. Setelah database dirubah, buka file 'simpan_account.php'
kemudian ubahlah kode $query menjadi seperti berikut :
$query="insert
into user
(id_user,nama_depan,nama_belakang,email,password,kelamin,tgl_lahir,agama,foto_profil,status,alamat,hobi,level,aktif,profil_singkat)values(null,'$nama_depan','$nama_belakang','$email','$userpass','$kelamin','$tanggal',null,'default.jpg',null,null,null,'MEMBER','Y',null)";
4. Foto profil
default dan hak akses halaman sudah dibereskan. Selanjutnya adalah Membuat
tampilan 'home.php'yang layak disebut jejaring sosial :D . Halaman home yang
akan kita bangun memiliki tampilan header sebagai berikut :
 |
| tampilan header |
Struktur menu nya :
·
Brand = Tutorial jaco
·
Search Bar
·
Member List
·
Notifikasi
·
Profil
·
Home
·
Dropdown Menu (Edit info,Ganti password,Ganti
foto, Logout)
Untuk membuat header seperti diatas kita gunakan bootstrap
agar lebih mudah.Buatlah sebuah new file php dengan nama header.php dan kosong
kan isinya. kemudian isikan code berikut :
<nav
id="myNavbar" class="navbar navbar-default navbar-inverse
navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped
for better mobile display -->
<div class="container">
<div
class="navbar-header">
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle
navigation</span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a
class="navbar-brand" href="index.php"><span
class="glyphicon glyphicon-th-large"></span> WORLD-INFO
<span class="glyphicon
glyphicon-th-large"></span></a>
<form role="search"
class="navbar-form navbar-left" action="cariteman.php"
method="post">
<div
class="form-group">
<input type="text"
placeholder="Search" class="form-control">
</div>
</form>
</div>
<!-- Collect the nav links,
forms, and other content for toggling -->
<div class="collapse
navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav
navbar-right">
<li><a href =
"memberpopular.php">Member List</a></li>
<li
class="dropdown">
<a
data-toggle="dropdown" class="dropdown-toggle"
href=""><span class="glyphicon glyphicon-exclamation-sign"
title="Notifikasi"></span></a>
<ul role="menu"
class="dropdown-menu" style="width:400px">
<li class="well-sm
clearfix">Notifikasi</li>
<li
class="divider"></li>
<li class="well-sm
clearfix"><a href="#">Lihat Semua
Notifikasi</a></li>
</ul>
<li><a href =
"logout.php">Logout</a></li>
</li>
<li><a href =
"profil.php?id_user=<?php echo
"$_SESSION[id_user]";?>"><span class="glyphicon
glyphicon-user"></span><?php echo ' '.$nama_depan.'
'.$nama_belakang;?></a></li>
<li
class="active"><a href = "home.php?id_user=<?php echo
"$_SESSION[id_user]";?>"><span class="glyphicon
glyphicon-log-out"></span> HOME</a></li>
<li class="dropdown">
<a
data-toggle="dropdown" class="dropdown-toggle"
href="#"><b class="caret"></b></a>
<ul role="menu"
class="dropdown-menu" style="width:200px">
<li><a
href="editinfo.php">Edit Info</a></li>
<li><a
href="gantifoto.php">Ganti Foto</a></li>
<li><a
href="gantipassword.php">Ganti Password</a></li>
<li
class="divider"></li>
<li><a
href="logout.php"><span class="glyphicon
glyphicon-log-out"></span> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Kode diatas adalah kode untuk membuat sebuah navigasi bar.
Navigasi bar ini akan dipanggil pada banyak halaman web, antara lain home.php,
profil.php , editinfo.php, gantipassword.php, gantifoto.php dll. jika kita
ingin merubah isi dari navbar ini kita cukup mengganti isi dari header.php
5. kita akan membuat sebuah 'Badge' untuk ditampilkan dalam
halaman web seperti berikut ini :
 |
| tampilan badge social network |
Buatlah sebuah file php baru dengan nama bagiankiri.php dan
kosongkan isinya. kemudian ketikkan kode berikut :
<div class="col-md-12"><!--BAGIAN
MENU KIRI-->
<br>
<div class="list-group">
<a href="pesan.php" class="list-group-item">
<span class="glyphicon
glyphicon-envelope"></span> Pesan <span class="badge">0</span>
</a>
<a href="galeri.php" class="list-group-item">
<span class="glyphicon
glyphicon-picture"></span> Galeri <span class="badge">0</span>
</a>
<a href="teman.php" class="list-group-item">
<span class="glyphicon
glyphicon-user"></span> Teman <span class="badge">0</span>
</a>
</div>
</div><!--/.BAGIAN MENU KIRI-->
Ketika ada email yang belum dibaca, angka disamping tulisan
pesan akan bertambah. begitu juga dengan galeri, angka disamping galeri adalah
angka jumlah foto yang di upload. Angka disamping teman adalah jumlah teman
yang dimiliki.
6. Kalau sudah lengkap yang kita butuhkan untuk halaman
home. Maka kita edit home.php yang lama menjadi seperti ini :
<?php
session_start();
include
"library.php";
if(isset($_SESSION['id_user'])){
if(isset($_GET['id_user'])){
$id_user=$_GET['id_user'];
}
if(empty($_GET['id_user'])){
$id_user=$_SESSION['id_user'];
}
$link=koneksi_db();
$query=mysql_fetch_array(mysql_query("select
* from user where id_user='$id_user'",$link));
$nama_depan=$query['nama_depan'];
$nama_belakang=$query['nama_belakang'];
$photo=$query['foto_profil'];
?>
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>Selamat
Datang</title>
<link
rel="stylesheet" type="text/css"
href="css/bootstrap.min.css">
<link
rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script
type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script
type="text/javascript"
src="js/bootstrap.min.js"></script>
</head>
<body>
<?php echo
include"header.php";?>
<div
class="container">
<div class="jumbotron">
</div>
<div
class="row" style="background-color:#0C9">
<div
class="col-md-2"><!--mulai colmd 2-->
<div class="row">
<div class="col-md-12">
<div
class="thumbnail">
<img src="foto/<?php
echo $photo;?>" class="thumbnail">
<div
class="caption">
<h4><?php echo
$nama_depan.' '.$nama_belakang;?></h4>
</div>
</div>
</div>
<?php
include"bagiankiri.php";?>
</div>
</div><!--akhir colmd 2-->
<div
class="col-md-6"><!--mulai colmd 6-->
<div class="row">
<div class="col-md-1">
</div>
<div
class="col-md-9">
<form
action="updatestatus.php" method="post">
<div
class="row">
<div
class="form-group">
<textarea
maxlength="255" cols="40" rows="4"
name="update" class="form-control" placeholder="Tulis
status.."></textarea>
<button
type="submit" class="btn btn-primary pull-left"
value="POST" name="kirim">POST</button>
</div>
</div>
</form>
</div>
<div
class="col-md-2">
</div>
</div><!--/.STATUS-->
</div><!--akhir colmd 6-->
<div
class="col-md-4"><!--mulai colmd 4-->
</div><!--akhir colmd 4-->
</div>
<?php
footer();
?>
</div> <!-- END
CONTAINER -->
</body>
</html>
<?php
}else{
header("Location:index.php");
}
?>
dengan
kode seperti diatas kita akan mendapatkan tampilan seperti berikut ini :
 |
| Tampilan Home |
Jika
nanti sobat mengalami notif error, silahkan tanyakan atau laporkan saja di
kotak komentar. Jika lancar-lancar saja, jangan lupa backlink ataupun follow
ya.
Untuk
proses Update status akan dibahas pada part4 nanti. Terima kasih telah berjuang
keras sampai sekarang.
Terima
Kasih dan Sampai Jumpa.....
No comments:
Post a Comment