Tuesday, 9 June 2015

Membuat Jejaring Sosial Sederhana dengan PHP MySql dan Bootstrap

Tutorial ini akan membahas langkah-langkah dalam membangun sebuah website jejaring sosial atau sosial media seperti Facebook, Twitter. Fungsi dasar dari sebuah jejaring sosial antara lain Pendaftaran User, Login, Logout, Foto profil, Update Status/ Gambar/ Video, Halaman Profil, Unggah Lokasi, Berbagi buku/musik/hobi favorit,Kirim pesan,Forum diskusi,Tambah teman, Notifikasi, Galeri, dan Masih banyak lagi. Fitur2 tersebut sebenarnya dapat kira buat dengan menggunakan modal dasar Bootstrap, Php dan database Mysql.Karena langkah dalam membangun sebuah jejaring sosial ini sangat banyak. Maka akan dibagi menjadi beberapa tahap. Oke, kita langsung saja ke tahap pertama yaitu membuat database untuk proses daftar user dan login. Bagi pembaca yang masih asing dengan Mysql dan bootstrap dapat mempelajarinya di
 http://jagocoding.com/category/twitter_bootstrap
dan

Perhatikan langkah-langkah berikut secara seksama.
1. Siapkan alat dan Bahannya :
    - Buat sebuah folder project di Localhost anda(\wamp\www\namaproject)
    - Download Bootstrap di sini dan Extract. Kemudian pada copykan isinya kedalam folder project yg anda buat tadi.


- Buatlah database Mysql dengan nama 'tutorialjaco' dan sebuah table dengan nama'user' dengan atribut seperti dibawah ini :


Syntax SQL nya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
CREATE TABLE `user` (
 `id_user` int(11) NOT NULL AUTO_INCREMENT,
 `nama_depan` varchar(30) CHARACTER SET utf8 DEFAULT NULL,
 `nama_belakang` varchar(30) CHARACTER SET utf8 DEFAULT NULL,
 `email` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
 `password` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
 `kelamin` varchar(30) CHARACTER SET utf8 DEFAULT NULL,
 `tgl_lahir` varchar(20) DEFAULT NULL,
 `agama` varchar(30) CHARACTER SET utf8 DEFAULT NULL,
 `foto_profil` varchar(100) DEFAULT NULL,
 `status` varchar(30) DEFAULT NULL,
 `alamat` varchar(100) DEFAULT NULL,
 `hobi` varchar(50) DEFAULT NULL,
 `level` varchar(50) DEFAULT NULL,
 `aktif` char(1) DEFAULT 'Y',
 `profil_singkat` text,
 PRIMARY KEY (`id_user`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

2. Jika semua bahan pada tahap 1 diatas sudah komplit, maka kita sudah bisa memulai untuk proses coding web nya. sebelum mulai, cek dulu tampilan desain yang akan kita buat dibawah ini :
Gambar Tampilan Index :


Gambar Modal Login :

3. Fungsi yang akan kita buat adalah Pendaftaran Akun User dan Login. Pertama buatlah sebuah project php.

1
2
3
4
5
6
7
8
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

4. Simpan file diatas dengan nama index.php pada folder namaproject yang sudah dibuat tadi.
5. Edit file index.php tadi. Tambahkan tautan untuk menggunakan file css dan javascript bootstrap dan juga jquery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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 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>
</body>
</html>

6. Sekarang framework bootstrap sudah siap digunakan.skrang saatnya membuat fungsi-fungsi yang dibutuhkan oleh index.php. Kita buat file php baru dan beri nama library.php dan kemudian kosongkan isinya. library.php ini akan berisi function-function yang akan ditampilkan dan digunakan pada halaman index.php 
Daripada bingung. langsung saja copykan isi syntax dibawah ini kedalam library.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<?php
function navbarindex(){
?>
    <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-usd"></span> BANGJACO <span class="glyphicon glyphicon-usd"></span></a>
            </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="#myModal" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login </a></li>
        </ul>
            </div>
        </div>
</nav>
    <?php
}
  
function modallogin(){
?>
<div id="myModal" class="modal fade"> <!-- Modal Login -->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Login Disini</h4>
            </div>
            <div class="modal-body"><!-- Modal body  Login -->
                <p>Masukkan Email dan Password Anda dengan Benar</p>
                <form name="login" method="post" action="login.php"><!--Pastikan nama file tujuan action benar -->
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
     </div>
     <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
      </div>
    <button type="submit" class="btn btn-primary">Login</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</form>
            </div><!-- Akhir Modal body Login -->
            <div class="modal-footer">
               <p class="text-warning"><small><center>Jangan Pernah Memberitahukan Email dan Password Anda pada Orang Lain.</center></small></p>
            </div>
        </div>
    </div>
</div><!-- Akhir Modal Login -->
  
<?php
}
  
function register(){
?>
    <hr>
    <h2> DAFTAR DISINI</h2>
<form action="simpan_account.php" enctype="multipart/form-data"  method="post" name="postform">
     <div class="row">
        <div class="col-xs-4"  style="background-color:#0C6">
        <div class="form-group">
    <label for="namadepan"> Nama Depan : </label>
      <input type="text" class="form-control" name="nama_depan"/>
    </div>
     </div>
      </div>
      <div class="row">
        <div class="col-xs-4" style="background-color:#0C9">
        <div class="form-group">
    <label for="namabelakang"> Nama Belakang : </label>
      <input type="text" class="form-control" name="nama_belakang"/>
      </div>
      </div>
      </div>
      
   <div class="row">
        <div class="col-xs-4"  style="background-color:#0CC">
        <div class="form-group">
    <label for="inputemail"> Email : </label>
      <input type="email" class="form-control" name="email"/>    
    </div>
     </div>
      </div>
   <div class="row">
        <div class="col-xs-4"  style="background-color:#0CF">
        <div class="form-group">
    <label for="inputpassword"> Password : </label>
      <input type="password" class="form-control" name="password"/>    
    </div>
     </div>
      </div>
   <div class="row">
        <div class="col-xs-4"  style="background-color:#9C0">
        <div class="form-group">
    <label for="inputjk"> Jenis Kelamin : </label>
         <select name="kelamin" class="form-control">
      <option value="0"class="form-control">
        <option value="Pria" class="form-control">Pria
        <option value="Wanita" class="form-control">Wanita
      </select>
    </div>
     </div>
      </div>
     <div class="row" >
        <div class="col-xs-4" style="background-color:#9C3">
        <div class="form-group">
    <label for="inputtanggal"> Tanggal Lahir : </label>
      <input type="date" class="form-control" name="tanggal"/>
      
    </div>
     </div>
      </div>
    <div class="row" >
        <div class="col-xs-4" style="background-color:#9C6"> 
    <center>
     <button type="submit" class="btn btn-primary" value="DAFTAR" onclick="return confirm('Apakah Anda yakin akan daftar?')" name="kirim">DAFTAR</button>   </center>
     </div>
     </div>
    </form>
<?php
}
function footer(){
?>
     <div class="container">
        <div class="row">
            <div class="col-sm-12">
            <hr>
                  <center> <p>&copy; Copyright 2014 Mataharicode Tutorialjaco</p></center>
            </div>
        </div>
       </div>
    <?php
}
  
function koneksi_db(){
$host = "localhost";
$database = "tutorialjaco";//sesuaikan nama db kamu
$user = "root";//sesuaikan usernya, kalau di cpanel usernya ganti juga, biasanya nama user akun cpanel
$password="";// sesuaikan password kamu, kalau di cpanel ganti juga, biasanya password akun cpanel
$link = mysql_connect($host,$user,$password);//koneksi ke db
mysql_select_db($database,$link);//pilih nama db
if(!$link)
echo "Error : ".mysql_error();
return $link;
}
  
?>

Funtion diatas antara lain :
a. Fungsi koneksi database
b. Fungsi form registrasi
c. Fungsi Modal Login.
d. Fungsi Navbar index
e. Fungsi Footer.
Manfaat ketika menggunakan Function misalnya jika kita ingin mengganti isi dari Footer sebuah halaman web, kita tidak perlu repot-repot mengganti footer pada semua halaman web, kita cukup mengganti isi function footer pada library.php

7. Kemudian edit index.php. Kita panggil function yg sudah kita buat menggunakan syntax 'Include' seperti berikut :

1
2
3
4
5
<?php
include ("library.php");
?>
Pasang syntax ini pada bagian atas index.php dan panggil function yang ada pada library.php dengan syntax berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
include ("library.php");
?>
<!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 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
navbarindex(); //memanggil function navbar
modallogin(); //memanggil function modal login
?>
<div class="container">
        <div class="jumbotron">
            <h2>NAMA SOSMED</h2>
            <p>Moto Sosmed <small>label sosmed</small></p>
        </div>
<?php  
register(); // memanggil form untuk registrasi
footer(); // memanggil footer dari web
?>
</div>
</body>
</html>

8. Save file index.php dan coba buka project yang dibuat pada localhost, insyaallah tidak ada notif error.Jika ada error laporan yah dicoment..  

9. Langkah untuk proses login dan regster akan dibahas pada tutorial part 2 karena panjang. Pada part 2 akan dibahas tentang SESSION login, proses Simpan pendaftaran akun ke database, Logout, validasi isi Form registrasi, Login gagal dan Login sukses menuju home.

Sebelumnya mari kita bahas sedikit tentang SESSION. Session adalah suatu cara agar suatu variabel dapat diakses pada banyak halaman web. Session biasanya disimpan di Folder Temporary( biasanya untuk wamp pada c:\wamp\temp ).
Fungsi Session yang akan kita pakai antara lain :
session_start() bergungsi mengaktifkan session.
session_destroy() berfungsi untuk menghapus session beserta file sessionnya.
session_unset()berfungsi untuk menghapus semua variabel yang terdaftar dalam session.
Nah, intinya kita akan memakai file $_SESSION['id_user'] yg login untuk dipakai pada banyak halaman web yang kita bangun. 
Sekrang kita akan buat dulu script untuk menyimpan Akun user yg daftar. Karena pada tutorial part 1 proses daftar memanggil halaman simpan_account.php , maka kita buat file simpan_account.php
1. Buatlah File php baru dan beri nama simpan_account.php
 isi file ini adalah sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
include"library.php";  // memanggil fungsi library
if(isset($_POST['kirim'])){ // kalau di klik daftar maka diproses
  
$conn=koneksi_db(); //memanggil koneksi database
//menampung variabel yg di POST dari form registrasi
$nama_depan=ucwords($_POST['nama_depan']);
$nama_belakang=ucwords($_POST['nama_belakang']);
$email=$_POST['email'];
$userpass=$_POST['password'];
$kelamin=$_POST['kelamin'];
$tanggal=$_POST['tanggal'];
  
  
// Validasi jika isi registrasi kosong
if (empty($_POST['nama_depan'])) die ("<script>alert('Anda Belum Mengisikan Nama Depan');window.location='javascript:history.go(-1)';</script>"); 
if (empty($_POST['nama_belakang'])) die ("<script>alert('Anda Belum Mengisikan Nama Belakang');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['kelamin'])) die ("<script>alert('Anda Belum Mengisikan Jenis Kelamin');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['tanggal'])) die ("<script>alert('Anda Belum Mengisikan Tanggal Lahir');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['email'])) die ("<script>alert('Anda Belum Mengisikan Email');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['password'])) die ("<script>alert('Anda Belum Mengisikan Password');window.location='javascript:history.go(-1)';</script>");
  
//Proses query insert ke database. variabel yg diisi null nantinya akan di proses ketika user memilih menu edit informasi info user.
  
$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,null,null,null,null,'MEMBER','Y',null)";
 $exe=mysql_query($query, $conn); //eksekusi query insert ke database
  
//proses setelah eksekusi
if ($exe){
    echo "<script>location.replace('daftar_sukses.php')</script>";
}else{
    echo "<script>alert('daftar Gagal')
    location.replace('index.php')</script>";
}
  
}
else// else isset
{
unset($_POST['kirim']);
}
?>
2. Jika pendaftaran akun sukses, maka akan diarahkan ke halaman web daftar_sukses.php . Maka dari itu kita buat dulu halaman 'daftar_sukses.php'
Isinya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
include("library.php");//Memanggil function library
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap 3 Responsive Layout Example</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
navbarindex();//memanggil fungsi navbarindex
modallogin();//memanggil fungsi modallogin
?>
  
<div class="container">
        <div class="jumbotron">
            <h2>NAMA SOSMED</h2>
            <p>Moto Sosmed <small>label sosmed</small></p>
        </div>
<div class="row">
        <div class="col-md-4">
        </div>
<!-- ISI -->
        <div class="col-md-4">
            <h3><center>PENDAFTARAN AKUN SUKSES! SILAHKAN LOGIN</center></h3>
                <form name="login" method="post" action="login.php">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
     </div>
     <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
      </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>
                </div>
        </div>
<?php  
footer();// memanggil fungsi footer
?>
</div>
</body>
</html>
tampilan daftar_sukses.php 
Halaman ini berfungsi untuk menampilkan 'Pesan Daftar Sukses' dan menyediakan Form Login dilayar untuk proses login.
Untuk pendaftaran dengan validasi ke Email atau daftar dengan Facebook akan dibahas dalam lain kesempatan. 
3. Membuat fungsi untuk proses login. Buatlah file php baru dengan nama 'login.php' dan isikan code seperti berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
session_start();// memulai/membuat file Session
include ("library.php");// memanggil fungsi library
  
$link=koneksi_db();//membuat koneksi ke database
//menampung variabel yg dikirim dari form login
$email = $_POST['email'];
$password = $_POST['password'];
  
//cek query
$cek = mysql_query("SELECT * FROM user WHERE email ='$email' AND password ='$password'");
  
if(mysql_num_rows($cek)==1){//jika ada yang cocok akan bernilai 1
$hasil=mysql_fetch_array($cek);
$_SESSION['id_user'] = $hasil['id_user'];// membuat variabel session['id_user']
$_SESSION['nama_depan'] = $hasil['nama_depan'];// membuat variabel session['nama_depan']
$_SESSION['nama_belakang'] = $hasil['nama_belakang'];// membuat variabel session['nama_belakang']
  
header("location:home.php");// jika sukses masuk ke home.php
}
else
{
header("location:gagallogin.php");// jika login gagal maka masuk ke halaman gagallogin.php
}
?>
 4. Karena pada proses login diatas memanggil halaman web loginggagal.php maka kita buat file php dengan nama logingagal.php
Isi halaman ini mirip dengan halaman daftar_sukses.php bedanya hanya Pesan yang tertulis yaitu pesan Email dan password salah.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
include("library.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap 3 Responsive Layout Example</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
navbarindex();
modallogin();
?>
  
<div class="container">
        <div class="jumbotron">
            <h2>NAMA SOSMED</h2>
            <p>Moto Sosmed <small>label sosmed</small></p>
        </div>
<div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
            <h3><center>Password $ Email Anda Salah. Silahkan Ulangi Login!</center></h3>
                <form name="login" method="post" action="login.php">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
     </div>
     <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
      </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>
                </div>
        </div>
<?php  
footer();
?>
</div>
</body>
</html>
Tampilan logingagal.php
5. Jika Login sukses, maka user akan dialihkan ke halaman Home. Halaman home yang kita buat kali ini masih home sederhana.Untuk pembuatan home yang lengkap akan dibahas pada tutorial selanjutnya. Pada home kali ini akan dibuat button untuk logout. kita buat dulu halaman home sederhananya, buat file php baru dengan nama home.php dan isi dengan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?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'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HOME</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>
  
<div class="container">
        <div class="jumbotron">
            <h2>NAMA SOSMED</h2>
            <p>Moto Sosmed <small>label sosmed</small></p>
        </div>
<div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
          <center>  <h3>SUKSES LOGIN</h3>
                INI ADALAH HALAMAN HOME SEMENTARA <br>
 Anda Login dengan id_user=<?php echo $id_user;?><br>
  
                nama anda : <?php echo $nama_depan.' '.$nama_belakang;?><br>
SILAHKAN LOGOUT DISINI<br></center>
<p><a href="logout.php" class="btn btn-warning btn-lg btn-block">LOGOUT</a></p>
                </div>
        </div>
<?php  
footer();
?>
</div>
</body>
</html>
Tampilan Home diatas menampilkan variabel id_user, nama_depan, nama_belakang yang disimpan lebih dahulu pada SESSION. 
6. Button logout pada menu script diatas akan memanggil halaman logout.php maka kita buat sebuah halaman baru dengan nama logout.php
isi halaman ini sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title> Logout </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body   bgcolor="black">
<?php
session_start();
unset($_SESSION['id_user']);
echo "<script>
    location.replace('index.php')</script>";
?>
<center>
</center>
</body>
</html><span style="line-height: 1.428571429; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"> </span>
Fungsi dari logout ini adalah menghapus nilai dari variabel session['id_user']. setelah logout user akan diarahkan ke halaman awal web yaitu index.php 
 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. Kalau masih bingung, bisa donlod file rar nya disini. Sesuaikan nama databasenya jika dirubah2 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 :
1
2
3
4
5
<?php
include ("library.php");
?>
menjadi :
1
2
3
4
5
6
7
8
9
<?php
session_start();
include("library.php");
if(empty($_SESSION['id_user'])){ //fungsi jika session kosong belum login
?>
dan tambahkan pada bagian paling bawah setelah </html> :
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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

Untuk kode index.php lengkapnya cek kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
include ("library.php");
if(empty($_SESSION['id_user'])){
?>
<!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 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
navbarindex();
modallogin();
?>
<div class="container">
        <div class="jumbotron">
            <h2>TUTORIAL JAGOCODING</h2>
            <p>BELAJAR TERUS YAH<small>semangat</small></p>
        </div>
<?php 
register();
  
footer();
?>
</div>
</body>
</html>
<?php
}
else
{
header("Location:home.php");
}
?><span style="line-height: 1.428571429; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"> </span>
2. 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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?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> :

1
2
3
4
5
6
7
8
9
<?php
}else{
header("Location:index.php");
}
?>

Variabel $photo diatas nanti akan digunakan untuk menampilkan foto profil user. Jika kita ingin menambahkan foto profil default untuk user maka lakukan step berikut :

a. cari gambar di google yg seperti ini :


Kemudian buat folder baru pada folder namaproject dengan nama foto. seperti ini :

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



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.
Beri nama foto. Kemudian klik GO pada bagian bawah.


c. Setelah database dirubah, buka file 'simpan_account.php' kemudian ubahlah kode $query menjadi seperti berikut :
1
$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 :

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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<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> TUTORIAL JACO <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>
  
                <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 :



Buatlah sebuah file php baru dengan nama bagiankiri.php dan kosongkan isinya. kemudian ketikkan kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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 yg 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 jumalh teman yang dimiliki.

6. Kalau sudah lengkap yg kita butuhkan untuk halaman home. Maka kita edit home.php yang lama menjadi seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<?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>Twitter Bootstrap 3 Responsive Layout Example</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 kitas akan emndapatkan tampilan seperti berikut ini :


Untuk proses Update status akan dibahas pada kesempatan berikutnya. Soalnya udah maghrib ini mau buka puasa dulu. kalau ada eror atau kesulitan silahkan coment yah. Semoga bermanfaat bagi para pembaca.


Kali ini kita akan coba bahas tentang cara Update status.. di part3 kita sudah mempunyai sebuah halaman home yang terdapat sebuah form textarea tempat menulis status kita. Bagi yang masih bingung dengan home.php bisa diunduh disini . Setelah buka link ini, cek bagian kiri atas, pilih File->download untuk mendownload. Pada file baru ini sudah diberikan penjelasan pada bagian-bagian home.php
Mari kita perhatikan lagi form update status pada halaman home kita. Ini tampilannya :


Mari kita buka file home.php dan kita cek lagi code form diatas, codenya sebagai berikut :
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-md-9">    <!-- Kode Form Update Status -->           
<form action="updatestatus.php" method="post">   <!-- form update status -->                                      
<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><!-- end form update status -->
</div><!-- Akhir Kode Form Update Status -->
Form diatas memiliki method POST. Kita akan nge_POST isi textarea dengan name="update" ke halaman "updatestatus.php" .

Karena itu mari kita buat file php baru dengan nama "updatestatus.php" untuk mengolah status ke dalam database. Kosongkan isi kode pada "updatestatus.php".

Mari kita cek database kita terlebih dahulu. Baru ada 1 tabel kan? tabel user doank. Nah, untuk menampung isi status kita buat tabel baru pada database 'tutorialjaco" dengan nama tabel "status".
 Atributnya begini :
 SQL nya :
1
2
3
4
5
6
7
8
9
CREATE TABLE `status` (
 `id_status` int(11) NOT NULL AUTO_INCREMENT,
 `id_user` int(11) NOT NULL,
 `isi_status` text NOT NULL,
 `tanggal_status` datetime NOT NULL,
 `dihapus` varchar(1) DEFAULT 't',
 PRIMARY KEY (`id_status`),
 KEY `id_user` (`id_user`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1
Setelah kita memiliki tabel 'status'pada database. Kita buka lagi file "updatestatus.php". Isikan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
session_start();
$id_user=$_SESSION['id_user']; //memanggil variabel id_user yg login dari Session
//id_user yg bisa update status kan yg login doank
$isi_status = $_POST['update'];//menampung isi status dari textarea
if (empty($_POST['update'])) die ("<script>alert('Anda Belum Mengisikan status');window.location='javascript:history.go(-1)';</script>");
//kalau isi textarea updatestatus kosong maka ga bisa update
  
 include"library.php"; // memanggil file library
 $link=koneksi_db();// membuat link koneksi ke database, koneksi_db adalah function yang ada dalam library
 $eksekusi=mysql_query("INSERT INTO status VALUE(NULL,'$id_user','$isi_status',NOW(),'t')",$link) ;
 //eksekusi query insert ke dalam database tabel status. Kalau sudah di hosting hati2 nama tabelnya case sensitive
 if($eksekusi)//jika eksekusi berhasil, maka
 {
 echo "<script>location.replace('home.php')</script>";//pindah ke home.php(refresh halaman)
 }
 else { //kalau gagal update
 echo "gagal bro".mysql_error();// tampilkan errornya knpa...
 }
 ?>

Kalau sudah selesai simpan file "updatestatus.php" diatas, tes untuk update status pada halaman home dan cek apakah status yang anda buat berhasil masuk ke database. Ane coba sih udh berhasil masuk ke database. Tampilan :


Kalau sudah sukses masuk ke Database. Selanjutnya kita akan coba untuk menampilkan status tersebut pada halaman home dengan format seperti pada jejaring sosial pada umumnya.Misalnya seperti ini :


Untuk membuat tampilan diatas, buka file.php. Isikan kode berikut diantara kode:

1
2
3
4
5
</form><!-- end form update status -->
<!--isi disini-->
</div><!-- Akhir Kode Form Update Status -->

Kode :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<hr>
     <div class="row" style="background-color:#9F3">
     <div class="media"><!-- class media sudah disediakan bootstrap lho -->
   <a href="#" class="pull-left"><!-- Sementara href nya kosong dulu,ntar diganti link ke profil-->
        <img src="foto/default.jpg" class="media-object img-rounded" width="50" height="50" alt="Sample Image"></a>
   <div class="media-body"><!-- isi media nama, tanggal, ama status -->
       <h4 class="media-heading"> NAMA USER <small><i>January 10, 2014</i></small></h4>
        <p>ini isi status nya nanti disini. </p>
    </div> <!-- akhir media-body-->
</div><!-- akhir media -->
       <div class="row">
        <!--kode komentar disni ntar-->
       </div>
</div><!-- akhir row tampil isi status -->
    

Hingga terlihat seperti ini :




Kemudian jalankan halaman web home.php apakah tamppilannya sudah sesuai contoh? kalau belum cek kodenya lagi. Kalau sudah kita lanjut ke tahap berikutnya.

Tahap berikut adalah mengganti isi Nama user , tanggal dan isi status dengan variabel hasil query. Kita akan menyisipkan script Php untuk mengambil isi dari tabel status dan menaruhnya dibawah kotak merah pertama pada gambar diatas. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$query1 = mysql_query("SELECT * FROM status JOIN user USING(id_user) WHERE dihapus = 't' ORDER BY id_status DESC");
while($row=mysql_fetch_array($query1)){
  $id_status=$row['id_status'];
  $id_us=$row['id_user'];
  $isi_status=$row['isi_status'];
  $tanggal_status=$row['tanggal_status'];
$nm_dp=$row['nama_depan'];
$nm_blk=$row['nama_belakang'];
$fot=$row['foto_profil']; 
?>

Kemudian berikan tutup kurung kurawal fungsi perulangan while, taruh diatas kotak merah ketiga(terbawah).

1
2
3
4
5
<?php
}
?>

Jadinya seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
$query1 = mysql_query("SELECT * FROM status JOIN user USING(id_user) WHERE dihapus = 't' ORDER BY id_status DESC");
// query join antara tabel status dan tabel user
while($row=mysql_fetch_array($query1)){ //kalau array dari hasil query ada nilainya
  $id_status=$row['id_status']; //menyimpan id_status
  $id_us=$row['id_user'];//menyimpan id_user yang punya status
  $isi_status=$row['isi_status'];//menyimpan isi status
  $tanggal_status=$row['tanggal_status'];//menyimpan tanggal status
$nm_dp=$row['nama_depan']; //menyimpan nama depan pemilik status
$nm_blk=$row['nama_belakang'];//menyimpan nama belakang pemilik status
$fot=$row['foto_profil'];//menyimpan foto pemilik status
  
?> 
                    <hr>
                    <div class="row" style="background-color:#9F3">
                    <div class="media">
    <a href="#" class="pull-left">
        <img src="foto/default.jpg" class="media-object img-rounded" width="50" height="50" alt="Sample Image">
    </a>
    <div class="media-body">
        <h4 class="media-heading"> NAMA USER <small><i>January 10, 2014</i></small></h4>
        <p>ini isi status nya nanti disini. </p>
     </div>
</div>
                    <div class="row">
                    <!--kode komentar disni ntar-->
</div>
</div>
<?php
} //tutup while
?>
Sekarang cek apakah ada error atau tidak. Jika semua kode tepat kira-kira tampilannya akan jadi seperti ini:


Kita sudah bisa melakukan perulangan sejumlah status yang ada di dalam tabel. Langkah selanjutnya adalah memasukkan tiap2 variabel hasil query kedalam tiap kotak masing2. Perhatikan gambar berikut :
Kotak merah diatas adalah variabel yang akan kita ubah. 

1. Ubah "foto/default.jpg" menjadi  
1
"<?php echo'foto/'.$fot;?>"
2. Ubah NAMA USER menjadi 
1
<?php echo $nm_dp.' '.$nm_blk;?>
3. Ubah January 10, 2014 menjadi 
1
<?php echo $tanggal_status; ?>
4. Ubah isi status menjadi
1
<?php echo $isi_status; ?>

Kalau sudah coba di lihat tampilan web nya. Hasil dari tampilan web akan jadi begini :


Coba logout dan buat user baru kemudian update statusnya. Kalau sudah bisa update status gini nantinya akan ditambahkan fungsi hapus status, Komentar dan hapus komentar pada tutorial selanjutnya. Kemudian juga akan dibahas fungsi Ubah Password, ganti fotoprofil dan ganti info user. 


Mari kita lanjutkan project yg sebelumnya sudah kita buat. di part 4 kita sudah bisa update status. nah kali ini kita akan buat fungsi untuk hapus status yang sudah kita buat. 
Project yang sudah berjalan hingga part4 bisa di donlod disini. Pada project ini sudah diberikan sedikit perubahan yaitu :
Kode untuk menampilkan status diatas telah di pindah ke dalam file "tampilstatus.php" . Tujuannya adalah agar lebih mudah ketika mau mengedit kode tersebut. Caranya sangat mudah, tinggal buat file php baru dengan nama tampilstatus.php kemudian hapus isinya, lalu cut kode diatas ke file tampilstatus.php. Kemudian tinggal panggil tampilstatus.php ke halaman yg kita cut tadi seperti ni :
Tujuan kita sekrang adalah mengisi kode pada bagian berikut :
Kita akan membuat sebuah fungsi untuk menghapus status yang kita miliki. Perlu diketahui sebelumnya bahwa status yang dihapus ini tidak bisa sepenuhnya dihapus, apalagi ketika kita sudah menerapkan sistem basis data yang relasional dengan menggunakan foreign key.Disini kita akan merubah isi attribut "dihapus" yang ada pada tabel status tersebut. Nilai atribut "dihapus" dari sebuah status pada saat dibuat adalah "t" dan ketika dihapus akan bernilai "y". Dan status yang tampil pada halaman home hanya status yang tidak dihapus. Jadi yang tampil hanya yg bernilai 't' bukan? 
Mari kita cek kode dari link "Hapus" diatas pada file tampilstatus.php berikut :
1
2
3
4
5
6
7
<li class="dropdown">
     <a data-toggle="dropdown" class="dropdown-toggle" href="#"><b class="caret"></b></a>
     <ul role="menu" class="dropdown-menu" style="width:50px">
      <li> <a href="hapus_status.php?id_status=<?php echo $row['id_status'];?>">Hapus</a></li>
      <!-- id_status digunakan untuk di GET pada halaman hapus_status.php nanti -->
     </ul>
</li>
Link untuk melakukan proses hapus adalah
" hapus_status.php?id_status=<?php echo $row['id_status'];?>"
Maksud dari link diatas adalah sebagai berikut :
  • link halaman php tujuan = hapus_status.php
  • ?id_status = variabel $_GET yang memiliki nilai id_status dari status yang akan kita hapus.
  • <?php echo $row['id_status'];?> = nilai id_status yg dihapus
Buat sebuah file php baru dengan nama hapus_status.php . Isikan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
session_start();// memulai menggunakan/memanggil variabel session
//kode dibawah ini adalah kode untuk mengambil isi dari variabel $_GET['id_user'] yang dikirim dari halaman home
  
if(isset($_GET['id_status'])){//jika $_GET['id_status'] ada isisnya maka
$id_status=$_GET['id_status']; //menyimpan nilai $_GET
}
$id_user=$_SESSION['id_user'];//variabel id_user nilainya adalah id_user yang login
  
 include"library.php";//menggunakan library.php
  $link=koneksi_db();//membuat koneksi ke database
//eksekusi query update nilai dari atribut dihapus
 $exe=mysql_query("UPDATE status set dihapus='y' where id_user='$id_user' AND id_status='$id_status'",$link) ;
  
 if($exe)//jika sukses
 {
 echo "<script>
    location.replace('home.php')</script>";
 }
 else { //jika gagal
 echo "<script>
    location.replace('home.php')</script>";
 }
 ?>
Cek komentar dari kode diatas agar mengerti maksdunya. Kemudian coba anda update sebuah status di halaman Home kemudian anda hapus. Sukses bukan? tentu saja status yang dapat kita hapus adalah status milik kita.
------------------------------------------------------------------------
Berikutnya kita coba untuk membuat fitur ubah foto profil.
Pertama-tama mari kita cek file "header.php" kita
Tamppilannya :
Kodenya dropdown gambar diatas :
1
2
3
4
5
6
7
8
9
10
<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>
Dari kode diatas kita bisa cek link tujuan proses ganti foto adalah file "gantifoto.php". Maka dari itu kita buat terlebih dahulu file tersebut dan kosongkan isinya.
  
Tampilan halaman gantifoto.php yang akan kita buat adalah sebagai berikut :

Bentuknya mirip dengan halaman home tentu saja kodenya juga mirip, terdapat Header bar dibagian atas, Foto profil,Badge pesan galeri teman, dan nama User dikiri. Kodenya seperti berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<?php
session_start();// memakai session
include "library.php";//memakai isi library
if(isset($_SESSION['id_user'])){
if(isset($_GET['id_user'])){
$id_user=$_GET['id_user'];//mengisi variabel id_user
}
if(empty($_GET['id_user'])){
$id_user=$_SESSION['id_user'];//mengisi variabel id_user
}
$link=koneksi_db();//membuat koneksi ke database
//memulai proses query untuk mengambil nilai atribut dari yang sedang login
$query=mysql_fetch_array(mysql_query("select * from user where id_user='$id_user'",$link));
//mengisikan nilai tiap variabel
$nama_depan=$query['nama_depan'];
$nama_belakang=$query['nama_belakang'];
$photo=$query['foto_profil'];
?>
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $nama;?></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>
   <script type="text/javascript" src="js/scripts.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php 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"><!-- kolom foto profil yg login -->
            <div class="thumbnail">
                <img src="foto/<?php echo $photo;?>" class="img-circle"> <!-- bisa diganti dengan class="img-thumbnail" untuk foto bulat-->
                <div class="caption" style="background-color:#0C6">
                    <center><h4><?php echo $nama_depan.' '.$nama_belakang;?></h4></center>
                </div>
            </div>
        </div>   
                    <?php include"bagiankiri.php";?> <!-- menampilkan kotak pesan, galeri, dan teman -->
</div>
        </div><!--akhir colmd 2-->
                        
        <div class="col-md-10" style="background-color: #0FF"> <!--BAGIAN KANAN-->       
<ul class="breadcrumb"><!-- header halaman -->
    <li class="active"><b>Ganti Foto Profil</b></li>
</ul>
  
<div class="row">              
<div class="col-md-6">
<!-- Form ganti foto -->              
<form enctype="multipart/form-data"method="post" action="proses_foto.php?id_user=<?php echo $_SESSION['id_user'];?> " >
                     
            Pilih Gambar : <input type="file" name="gmb" class="form-control">
                  
                    <button class="btn btn-info" type="submit" name="kirim">GANTI</button>
                
</form>
</div>
<div class="col-md-6">
                
            </div>                                       
</div>
            <hr>                                          
</div>
</div>
</div> <!--/.CONTAINER-->
<?php footer(); ?>
</body>
</html>
<?php
}else{
header("Location:index.php");
}
?>

Skrang coba dicek apakah tampilannya sudah sesuai gambar tampilan diatas. Anda dapat mengubah tampilan tersebut dengan mengganti bootstrap-nya. 
Untuk proses penggantian foto kita memerlukan file php proses untuk ganti fotonya. Kita cek kode form ganti foto diatas :
1
2
3
4
5
6
7
<form enctype="multipart/form-data"method="post" action="proses_foto.php?id_user=<?php echo $_SESSION['id_user'];?> " >
                     
            Pilih Gambar : <input type="file" name="gmb" class="form-control">
                    <button class="btn btn-info" type="submit" name="kirim">GANTI</button>
</form>

Action halaman tujuannya adalah
 proses_foto.php?id_user=<?php echo $_SESSION['id_user'];?> 

Maksud link tersebut :
  • proses_foto.php adalah halaman file php tujuan
  • ?id_user= adalah variabel $_GET yang akan dikirim ke halaman proses_foto.php
  • <?php echo $_SESSION['id_user'];?> adalah isi dari id_user yang login

Untuk proses ganti foto ke database kita buat dulu file php baru dengan nama "proses_foto.php" dan kosongkan isinya. Kemudian ketikkan kode berikut :
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
session_start();//menggunakan session
$id_user=$_SESSION['id_user'];//mengisi veriabel id_user dengan nilai id_user yang login
/*PENGATURAN GAMBAR di FOLDER*/
 $folder = "foto/";//nama folder nya 'foto', sudah sama dengan folder dalam namaproject
 $folder = $folder . basename( $_FILES['gmb']['name']);
  
 $gambar        =($_FILES['gmb']['name']);//isi variabel gambar agar acak
  
 include"library.php";
 $link=koneksi_db();//membuat koneksi
  
 $query="update user set foto_profil = '$gambar' where id_user='$id_user'" ;//query update ke table user
 $exe=mysql_query($query,$link);//eksekusi query
 if ($exe) {
move_uploaded_file($_FILES['gmb']['tmp_name'], $folder);//memindahkan gambar ke folder foto
 header ("location:home.php");
 }
 else {
 header ("location:setting.php"); }
 ?>
Jika sudah, mari kita coba untuk ganti foto profilnya.. Nih hasil percobaan ane :

---------------------------------------------------------------
Selanjutnya kita buat fitur ganti password nya..
Cek kode dropdown berikut : 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
  
Pada kode diatas terdapat link "gantipassword.php" untuk mengganti password. Mari buat 1 file php baru dengan nama "gantipassword.php" kemudian kosongkan isinya. Kemudian ketikkan kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<?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>
<head>
<meta charset="utf-8">
<title><?php echo $nama;?></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>
   <script type="text/javascript" src="js/scripts.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php 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"><!-- kolom foto profil yg login -->
            <div class="thumbnail">
                <img src="foto/<?php echo $photo;?>" class="img-circle"> <!-- bisa diganti dengan class="img-thumbnail" untuk foto bulat-->
                <div class="caption" style="background-color:#0C6">
                    <center><h4><?php echo $nama_depan.' '.$nama_belakang;?></h4></center>
                </div>
            </div>
        </div>   
                    <?php include"bagiankiri.php";?> <!-- menampilkan kotak pesan, galeri, dan teman -->
</div>
        </div><!--akhir colmd 2-->
                                      
        <div class="col-md-10" style="background-color: #CCC"> <!--BAGIAN KANAN-->       
<ul class="breadcrumb">
    <li class="active">Ganti Password</li>
</ul>
<div class="row">              
<div class="col-md-6">               
<form method="post" class="form-horizontal" action="password_proses.php">   
    <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-4">Password Lama</label>
        <div class="col-xs-8">
            <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password Lama">
        </div>
    </div>
            <div class="form-group">
        <label for="inputPasswordbaru" class="control-label col-xs-4">Password Baru</label>
        <div class="col-xs-8">
            <input type="password" name="password_baru" class="form-control" id="inputPassword" placeholder="Password Baru">
        </div>
    </div>
            <div class="form-group">
        <label for="inputPasswordulang" class="control-label col-xs-4">Ulangi</label>
        <div class="col-xs-8">
            <input type="password" name="password_baru_ulang" class="form-control" id="inputPassword" placeholder="Ulangi Password Baru">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-success" name="kirim" value="Simpan">Simpan</button>
        </div>
    </div>
</form>
</div>
<div class="col-md-6">
           
            </div>                                       
</div><!--/.STATUS-->
            <hr>                                          
</div><!--/.BAGIAN KANAN-->
</div>
</div> <!--/.CONTAINER-->
  
<?php footer(); ?>
</body>
</html>
<?php
}else{
header("Location:index.php");
}
?>

Kode diatas sebenarnya mirip dengan gantifoto.php hanya bagian isinya yang berbeda. Tampilan halaman ganti password sebagai berikut :

 
Terdapat 3 buah kolom. Password lama, Password baru, dan Ulangi Password Baru. Cara kerjanya seperti ini :
  • Pertama akan dicek apakah password lama milik user yang Login sesuai dengan isi kotak "password lama". Apabila tidak sesuai maka ganti password ditolak. Apabila sesuai maka lanjut ke tahap berikutnya.
  • Kedua akan dicek Apakah isi password baru dan ulangi password sudah sama. apabila berbeda maka proses ganti password ditolak. Apabila sama maka lanjut ke tahap pergantian password.
Perhatikan "Name" yang ada pada form diatas yang akan di gunakan untuk proses ubah password. Antara lain :
  • name="password"
  • name="password_baru"
  • name="password_baru_ulang"
Method dari form ganti password adalah POST dan actionnya adalah "password_proses.php". Maka dari itu mari kita buat 1 file php baru dengan nama "password_proses.php" dan ketikkan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
session_start();//memulai dan menggunakan variabel session
$id_user=$_SESSION['id_user'];//mengisi id_user yang login
  
//mengambil isi variabel yang di POST dari form ganti password
$password=$_POST['password'];
$password_baru=$_POST['password_baru'];
$password_baru_ulang=$_POST['password_baru_ulang'];
  
//validasi jika isi kosong
if (empty($_POST['password'])) die ("<script>alert('Anda Belum Mengisikan Password');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['password_baru'])) die ("<script>alert('Anda Belum Mengisikan Password Baru');window.location='javascript:history.go(-1)';</script>");
if (empty($_POST['password_baru_ulang'])) die ("<script>alert('Anda Belum Mengisikan Ulangi Password Baru');window.location='javascript:history.go(-1)';</script>");
  
 include"library.php";//gunakan library
  
 $link=koneksi_db();//membuat koneksi ke database
  
 $query=mysql_fetch_array(mysql_query("select * from user where id_user='$id_user'",$link));
 //eksekusi query untuk mendapatkan password user yang sedang login
 $password_user=$query['password'];//menyimpan password user yg asli(sedang login)
  
 if($password_user!=$password)  die ("<script>alert('Password Lama Salah');window.location='javascript:history.go(-1)';</script>");
 if($password_baru!=$password_baru_ulang)  die ("<script>alert('Ulangi Password Baru Tidak Sesuai');window.location='javascript:history.go(-1)';</script>");
  
 $query1="update user set password= '$password_baru' where id_user='$id_user'";//
 $exe=mysql_query($query1,$link);
 if ($exe) {
 header ("location:home.php");
 }
 else {
 header ("location:gantipassword.php"); }
 ?>
Cek Komentar pada kode diatas untuk penjelasan kodenya.  Coba ganti password anda. Sukses kan?? heheh

Komentar Status
Kalau kita bikin status terus orang lain ga bisa komentar kan jadi ga seru, makanya mari kita buat fitur komentarnya..

Sebelum kita mulai, ada versi terbaru dari tutorial "namaproject" kita. Penampilannya seperti ini :





Ane cuma nambahin hiasan ama ganti warna aja sih. Sama nambahin isi database user n status baru. Kalau yang udh punya desanin sendiri silahkan dipake, kalau yg mau pake versi baru ini silahkan didownload ajah disini. Ane saranin sih pake yg terbaru ini karena tutorialnya pake yg terbaru ini :D

Untuk membuat fitur komentar status, ikutilah langkah berikut :

Pertama
Buatlah table "komentar" pada database dengan atribut seperti berikut :


SQL nya seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CREATE TABLE `komentar` (
 `id_komentar` int(11) NOT NULL AUTO_INCREMENT,
 `id_status` int(11) NOT NULL,
 `id_komentator` int(11) NOT NULL,
 `isi_komen` text NOT NULL,
 `tanggal_komen` datetime NOT NULL,
 `dihapus` char(1) DEFAULT 't',
 PRIMARY KEY (`id_komentar`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Coba perhatikan SQL diatas. id_status adalah id tamu dari tabel status dan id_komentator adalah id user yang memberikan komentar. Anda boleh menambahkan index Foreign key pada kedua atribut tersebut. Kalau tidak juga tidak masalah.

Kedua 
Buat form untuk menulis komentar pada 'tampilstatus.php '

ganti isi 'tampilstatus.php' dengan kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<hr>
     <div class="row" style="background-color: #F96"><!-- Mulai Row Status warna pink pastel-->
                    <br />
          <div class="col-sm-10">
                <div class="media"><!--start media status -->
                       <a href="#" class="pull-left">
                         <img src="<?php echo'foto/'.$fot;?>" class="media-object img-rounded" width="50" height="50" alt="Sample Image">
                       </a>
                       <div class="media-body">
                          <h4 class="media-heading"> <?php echo $nm_dp.' '.$nm_blk;?> <small><i><?php echo $tanggal_status; ?></i></small></h4>
                          <p><?php echo $isi_status; ?></p>
                         </div>
                  </div><!--end media status -->
          </div><!--end col-sm-10 -->
          <div class="col-sm-2">
                 <?php if ($row['id_user']==$id_user) { ?><!-- Jika id yg punya status sama dengan yang login bisa ngehapus -->
                                     
                <div class="collapse navbar-collapse" id="navbarCollapse"><!-- dropdown menu hapus -->
                    <ul class="nav navbar-nav">                        
                    <li class="dropdown">
                           <a data-toggle="dropdown" class="dropdown-toggle" href="#"><b class="caret"></b></a>
                              <ul role="menu" class="dropdown-menu" style="width:50px">
                                    <li> <a href="hapus_status.php?id_status=<?php echo $row['id_status'];?>">Hapus</a></li>
                                     <!-- id_status digunakan untuk di GET pada halaman hapus_status.php nanti -->
                              </ul>
                        </li>                                   
                    </ul>
                 </div> <!-- END dropdown menu hapus -->
                                     
                  <?php } ?>
          </div><!-- End div col-sm-2 -->
                             
     </div><!-- End row status warna pink pastel-->
                    <div class="row" style="background-color:#FFF"><!-- Mulai row Komentar -->
                     <hr />
                                           
                     <!-- Tempat tampilkan KOMENTAR -->
                      
                     <!-- FORM ISI KOMENTAR -->
                            <div class="col-sm-1">
                                <!-- jarak kosong samping foto kecil user yang login -->
                            </div>
                                 <div class="col-sm-1"><!-- menampilkan foto kecil user yang login -->
                                 <img src="<?php echo'foto/'.$photo;?>" class="media-object img-rounded" width="30" height="30" alt="Sample Image">
                            </div>
                    <div class="col-sm-10"><!-- menampilkan form untuk beri komentar -->
                                    <form action="komentar.php?id_status=<?php echo $row['id_status'];?>" method="post">
                                        <input class="form-control" type="text" name="komentar" placeholder="Komentar..."></textarea>
                                    </form>
                                    <br>
</div>
  
                         <br />
                           
</div><!--end row Komentar-->

Pada dasarnya kita hanya menambahkan kode dibawah tulisan <!-- FORM ISI KOMENTAR -->. Hasilnya akan telihat seperti berikut :


Cek Komentar pada Kode diatas untuk penjelasan. Bagian status diberi warna pink pastel diatas agar lebih mudah untuk membedakan kode yang menampilkan status dan kode untuk menampilkan form. Jika anda sudah paham kode masing-masing, nantinya kode untuk menampilkan komentar akan diletakkan diantara warna Pink Pastel dan Putih atau lebih tepatnya pada kode berikut :  <!-- Tempat tampilkan KOMENTAR -->

Cara mengirim Komentar dengan menekan "ENTER" setelah mengetik komentar. 

Form komentar adalah sebagai berikut :

1
2
3
4
5
<form action="komentar.php?id_status=<?php echo $row['id_status'];?>" method="post">
                                        <input class="form-control" type="text" name="komentar" placeholder="Komentar..."></textarea>
</form>
Deskripsi form diatas :
  • Method form adalah POST. 
  • Halaman Tujuan action adalah "komentar.php".
  • ?id_status mendeklarasikan variabel $_GET['id_status'] yang dikirim ke halaman "komentar.php"
  • =<?php echo $row['id_status'];?> mengisikan nilai id_status yang dikomen kedalam variabel $_GET['id_status']
  • name="komentar" variabel yang di post bernama 'komentar'
  
Ketiga

Kita buat file php baru dengan nama "komentar.php" untuk memproses inputan dari form kedalam database.

Ketikkan Kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
session_start();// memulai Session
include "library.php";// menggunakan library
if (empty($_POST['komentar'])) die ("<script>alert('Anda Belum Mengisikan Komentar');window.location='javascript:history.go(-1)';</script>");  // kalau komentar kosong maka kembali lagi
$id_status= $_GET['id_status']; //mengambil nilai id_status dari url
$link=koneksi_db();// membuat koneksi ke database
$id_user=$_SESSION['id_user'];//menampung id_user yang login
$komen=$_POST['komentar'];// menamppung isi komentar pada variabel $komen
$query="insert into komentar values(null,'$id_status','$id_user','$komen',now(),'t')";// query insert ke database, perhatikan atribut tabel
$exe=mysql_query($query,$link);//eksekusi query
  
if($exe){
 echo "<script>
    location.replace('home.php')</script>";
 }
 else {
 echo "gagal".mysql_error();
 }
 ?>

Cek komentar pada kode diatas untuk dipelajari.

Jika sudah kemudian cobalah untuk komentar pada sebuah status di halaman home dan cek apakah status tersebut masuk ke dalam database tabel "komentar". Hasil cek ane masuk gan.

Ane komen :



Cek di DB nya :



Keempat
Kalau sudah bisa masuk ke DB tinggal nampilin ke halaman home. Cara untuk tampilin ke home ini kurang lebih sama dengan cara nampilin status dari DB ke home.  Kode untuk menampilkannya ditaruh dibawah bagian  <!-- Tempat tampilkan KOMENTAR --> yang ada pada "tampilstatus.php"

Ketikkan kode berikut tepat dibawah <!-- Tempat tampilkan KOMENTAR --> :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
 $query3 = mysql_query("SELECT * FROM komentar join status using(id_status)JOIN user USING(id_user) where id_status = '$id_status' ORDER BY id_status DESC");
  while($row1=mysql_fetch_array($query3)){
  $id_komentar_status=$row1['id_komentar'];//id_komentar
  $isi_komentar_status=$row1['isi_komen'];//isi dari komentar
  $id_komentator=$row1['id_komentator'];//id_komentator
  $tgl_komen=$row1['tanggal_status'];//tgl komentar
$query4=mysql_fetch_array(mysql_query("select * from user where id_user='$id_komentator'"));// query untuk mendapatkan data komentator
  $nama_depan4=$query4['nama_depan'];//nama_depan Komentator
  $nama_belakang4=$query4['nama_belakang'];//nama belakang komentator
  $foto4=$query4['foto_profil'];//foto komentator
  ?>
  
 <div class="col-sm-12">
                <div class="media"><!--start media komentar -->
                       <a href="<?php echo'foto/'.$foto4;?>" class="pull-left">
                          <img src="<?php echo'foto/'.$foto4;?>" class="img-rounded" width="30" height="30">
                       </a>
                       <div class="media-body">
                          <h4 class="media-heading"><a href = "profil.php?id_user=<?php echo $id_komentator;?>"><?php echo $nama_depan4.' '.$nama_belakang4;?></a> <small><i><?php  echo $tgl_komen;?></i></small></h4>
                          <p> <?php echo$isi_komentar_status; ?></p>
                         </div>
                  </div><!--end media komentar-->
 </div><!--end col-sm-12-->
           
<?php
  }
?>

Maka kita bisa melihat hasilnya seperti ini :


Coba saja komen ke status yang sudah ada. Anda dapat menyisipkan <hr> untuk memisahkan baris antar komentar. Sekian dulu turial kali ini. Semoga bermanfaat bagi para pembaca yang ingin membangun website dengan fitur jejaring sosial.

 halaman profil untuk user. 

Sebelum kita mulai, project kita dari part6 bisa di donload disini :

https://drive.google.com/file/d/0B8XxJSlwn9vpNnJfU0Nlc2tMQ3c/edit?usp=sharing

Di link tersebut anda dpt mengunduh file progres project yang terakhir hingga tutorial part6. 

Halaman profil dari sebuah jejaring sosial paling tidak harus memiliki fitur sebagai berikut :
1. Foto Profil dan Nama User
2. Info Biodata User
3. Halaman Status User
4. Daftar Teman
5. Button Add Friend
6. Button Kirim Pesan, dll.

Kali kita akan Coba membuat layout untuk menampung fitur2 diatas.

Pertama

Siapakan file project dan Database hingga part 6 yang dapat di download pada link diatas. Kita akan memiliki tampilan home seperti berikut :



Database dengan tiga buah tabel seperti berikut :




Kedua

 Kita buat desain layout. Misalnya kita ambil contoh halaman profil dari web Jejaring Sosial yang sudah ada semacam facebook, google +, dll. Kali ini kita ambil desain mirip desain Jagocoding seperti ini :




Penjelasan :
1. Bar Navigasi sama dengan header bar dari halaman Home
2. Foto Profil sama dengan halaman Home
3. Nama User sama dengan halaman home
4. Add Fren muncul jika membuka halaman user lain yang belum berteman, Add Fren berganti menjadi "Tunggu Konfirmasi" jika sudah nge-Add tapi lum diterima, Add Fren berganti menjadi "Terima Request" jika sudah di-Add tpi lum diterima, Add Fren berganti menjadi "Berteman" jika sudah ada konfirmasi pertemanan.
5. Kirim pesan akan memunculkan modal kirim pesan kepada user yg sedang dibuka halaman profilnya.
6. Status adalah tempat melihat status User yang dibuka halaman profilnya.
7. Galery adalah temapt melihat Foto User yang dibuka halaman profilnya.
8. Info adalah tempat melihat biodata dan statistik user 
9. Teman adalah temapt melihat daftar teman dari user yang dilihat profilnya


Ketiga

Mari kita mulai dengan membuat satu file php baru dengan nama 'profil.php' kemudian save pada folder 'namaproject'. Kemudian ganti isinya dengan kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?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'];
?>
     
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profil</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  
footer();
?>
</body>
</html>
<?php
}else{
header("Location:index.php");
}
?>

  • Kode diatas berfungsi untuk Cek Session User Login, dan Pemanggilan CSS & Js bootstrap dan Jquery. User yang belum login tidak dapat mengakses Halaman Profil. Pada beberapa Situs Jejaring Sosial, kita bisa melihat halaman profil dari user meskipun tidak login. Karena hal ini memerlukan pengaturan privasi yg sedikit lebih rumit maka kita akan bahas hal ini dikesempatan berikutnya. Kita fokus dulu untuk membangun fitur dasar dari halaman profil.

Keempat


  • Ubah warna <body> menjadi hitam dengan img background yg sudah disimpan di dalam folder Foto. (Silahkan ganti warna lain)

1
<body  background="foto/website-backgrounds-free.jpg">

  • Dalam profil.php. Panggil header.php dalam tag<body> </body> seperti berikut :

1
<body  background="foto/website-backgrounds-free.jpg">
1
<li><a href = "profil.php?id_user=<?php echo "$_SESSION[id_user]";?>"><span class="glyphicon glyphicon-user"></span><?php echo   ' '.$_SESSION['nama_depan'].' '.$_SESSION['nama_belakang'];?></a></li>
1
<?php echo include"header.php";?> </body>

  • Ganti isi file header.php berikut :

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

Menjadi :
 
1
<li><a href = "profil.php?id_user=<?php echo "$_SESSION[id_user]";?>"><span class="glyphicon glyphicon-user"></span><?php echo' '.$_SESSION['nama_depan'].' '.$_SESSION['nama_belakang'];?></a></li>

 Agar nama pada header bar tetap menampilkan nama user yang login. 

  • Buka file profil.php dan pastekan kode Modal untuk menampilkan pop up foto profil diantara tab </body> dan </html> sebagai berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="myModalfoto" class="modal fade"> <!-- modal untuk pop up img -->
    <div class="modal-dialog">
        <div class="modal-content">
             
            <div class="modal-body">
<center>
                <img src="foto/<?php echo $photo;?>" class="img-responsive">
</center>
            </div>
            
        </div>
    </div>
</div>

  • Isikan kode berikut dibawah kode <?php echo include"header.php";?>  pada profil.php untuk menampilkan foto profil dan nama user :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="container">
        <br><br>
           <div class="row" style="background-color: #C36">
           <p></p><!-- jarak doank -->
            
           <div class="col-md-6"><!--mulai div clas md 6 -->
           <div class="row">
           <div class="col-sm-4"><!-- tampilkan foto profil -->            
            <a href="#myModalfoto"  data-toggle="modal">
             <img src="foto/<?php echo $photo;?>" class="img-rounded" width="125" height="125">
             </a>
            </div>
             
           <div class="col-sm-8"><!-- tampilkan Nama User -->
            <div style="margin-top:50px"><!-- Jika klik nama user maka akan menuju ke halaman profil user -->
           <h3> <a href = "profil.php?id_user=<?php $query2=mysql_fetch_array(mysql_query("select * from user where id_user='$id_user'"));
$id=$query2['id_user'];
  
if($query2){ echo $id; }else{ echo $_SESSION['id_user'];}?>"> <?php echo $nama_depan.' '.$nama_belakang;?></a><br>
 </h3>
            </div>
            </div>
            </div> <br>
           </div><!-- end div clas md 6 -->
  <!-- ISIKAN KODE KIRIM PESAN DAN ADD FRIEND DIBAWAH KOMENTAR INI -->
            </div><!-- end row -->        
</div><!-- end container profil foto dan nama -->

  • Coba cek tampilan webnya, seharusnya sudah bisa tampil seperti ini jika klik foto profil:

Kelima
Saat ini kita sudah membagi halaman berwarna pink diatas sebagai berikut :


Halaman abu-abu diatas berisi foto dan nama user. Halaman disebelah kanan(putih) akan kita isi dengan button kirim pesan dan Add Friend.

  • Isikan kode berikut dibawah kode <!-- ISIKAN KODE KIRIM PESAN DAN ADD FRIEND DIBAWAH KOMENTAR INI --> pada file profil.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div class="col-md-6"><!--mulai div clas md 6 -->
     <div class="row">
         
          <div class="pull-right" style="margin-top: 50px; width:50%">
           <div class="row">
                   <div class="col-sm-6">
                                    <a href="#myModalteman" data-toggle="modal" class="btn btn-primary btn-block"><center>Add Teman</center></a>
                <a href="#myModalkonfirmasi" data-toggle="modal" class="btn btn-primary btn-block"><center>Konfrimasi</center></a>
                                    <a href="#myModalbatal" data-toggle="modal" class="btn btn-primary btn-block"><center>Batal Add</center></a>
                   </div>
                   <div class="col-sm-5">
                      <div class="navbar navbar-static">
                             <div class="navbar-inner">
                              <ul role="navigation" class="nav" style="background-color:#FFF">
                      <li><a href="#myModalpesan" data-toggle="modal" style="text-decoration:none"><center>Kirim Pesan</center></a></li>
                                                    
                       <li class="dropdown" style="background-color:#FFF">
                                                               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Teman <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                     <a href="#myModalhapusteman" data-toggle="modal" style="text-decoration:none"><center>Hapus Teman</center></a>
                   </ul>
                        </li>                                                              
                  
                            </ul>
                         </div>
                       </div>
                    </div>
           </div>
          </div>          
       </div>             
  </div><!-- end div clas md 6 -->


  • Coba cek tampilan web nya. Seharusnya sudah seperti ini :


  • Button Diatas akan dipakai nanti nya pada saat pembuatan fitur pertemanan. Untuk semetara biarkan tetap seperti itu.

Keenam
Mari kita buat section bar untuk mengisi bagian "STATUS, GALERY, INFO, dan TEMAN" seperti pada rancangan diatas. 
  • Kode ini memerlukan javascript tambahan untuk mengaktifkan SECTION, maka dari itu ketik kode berikut diatas </head> pada profil.php :
  
1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>
  • Setelah itu kita isi kode untuk menampilkan section-bar dibawah kode </div><!-- end container profil foto dan nama --> sebagai berikut :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<div class="container"><br> <!-- container isi status dan info -->
<div class="row" style="background-color:#FFF">
<div class="col-md-6">
<ul class="nav nav-pills nav-justified" id="myTab">
<li class="active"><a href="#sectionA">Status</a></li>
<li><a href="#sectionB">Galery</a></li>                 
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<br>
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1">
</div>
<div class="col-md-11 col-sm-11 col-xs-11">
<?php if(($id_user == $_SESSION['id_user'])){ ?>
<form action="updatestatus.php" method="post">   <!-- form update status -->                                           
<div class="row">
<div class="form-group">
<textarea maxlength="255" cols="40" rows="4" name="update" class="form-control" placeholder="Tulis status.."></textarea>
<p></p><!-- JARAK DOANK -->
<button type="submit" class="btn btn-primary pull-left" value="POST" name="kirim">POST</button>
</div>
</div>                           
</form><!-- end form update status -->
<?php } ?>
 <!-- KETIKKAN KODE tampil status dibawah sini -->
</div>
</div>
<br>
</div>
<div id="sectionB" class="tab-pane fade">
<p>Dalam Tahap Pengembangan</p>
</div>     
</div>         
</div> <!-- end div-col-md-6 -->
<div class="col-md-6">
<ul class="nav nav-pills nav-justified" id="myTab">
<li class="active"><a href="#sectionC">INFO</a></li>
<li><a href="#sectionD">TEMAN</a></li>                 
</ul>
<div class="tab-content">
<div id="sectionC" class="tab-pane fade in active">
<div class=" row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<div class="row">
<div class=" col-md-12" style="background-color: #CCC">
<h4>
<?php
$query3=mysql_fetch_array(mysql_query("select * from user where id_user='$id_user'"));
$profil=$query3['profil_singkat'];
if($profil){ echo $profil; }else{ echo " Profil belum diisi ";}?>
</h4>
</div>
</div>                        
<div class="row">
<div class=" col-md-12" style="background-color: #CCC">
<h4>
<?php
$query4=mysql_fetch_array(mysql_query("select * from user where id_user='$id_user'"));
$tanggal=$query4['tgl_lahir'];
$kelamin=$query4['kelamin'];
$agama=$query4['agama'];
$status=$query4['status'];
$alamat=$query4['alamat'];
$hobi=$query4['hobi'];
if($query4){ echo "Nama Lengkap : ";echo $nama_depan.' '.$nama_belakang; ?> <br> <?php
echo "Tanggal Lahir  : ";echo $tanggal; ?> <br> <?php
echo "Gender : ";echo $kelamin; ?> <br> <?php
echo "Agama : ";echo $agama; ?> <br> <?php
echo "Alamat  : ";echo $alamat; ?> <br> <?php
echo "Status : ";echo $status; ?> <br> <?php
echo "Hobi : ";echo $hobi;
}else{ echo " Profil belum diisi ";}
?>
</h4>
</div>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<p>Dalam Tahap Pengembangan</p>
</div>
</div>
</div><!-- end div-col-md6 ke-2 -->
</div><!-- end row -->
</div><!-- end container -->


  • Coba periksa tampilannya. seharusnya kita sudah punya tampilan seperti ini :




Ketujuh 

Selanjutnya kita harus dapat menampilkan status yg kita update pada halaman profil ini. Status yang di post akan muncul dibawah form update status.  
Untuk menampilkan status ini kodenya mirip dengan kode pada halaman home. Hanya querynya sedikit berbeda. 

  • Ketikkan kode berikut dibawah kode  <!-- KETIKKAN KODE tampil status dibawah sini --> pada profil.php :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
$query1 = mysql_query("SELECT * FROM status JOIN user USING(id_user) WHERE id_user='$id_user' AND dihapus = 't' ORDER BY id_status DESC");
while($row=mysql_fetch_array($query1)){
  $id_status=$row['id_status'];
  $id_us=$row['id_user'];
  $isi_status=$row['isi_status'];
  $tanggal_status=$row['tanggal_status'];
  $nm_dp=$row['nama_depan'];
  $nm_blk=$row['nama_belakang'];
  $fot=$row['foto_profil'];
   
?>
<?php include"tampilstatus.php";?>
<?php
}
?>
<br>

  • Kemudian coba cek tampilan halaman profil website kita dan coba update status. Status yang kita update akan muncul pada halaman wall kita. Coba ganti nilai id_user pada URL dengan angka lain untuk mengecek halaman profil user lain.
Tampilan hasil akhirnya :


Demikian tutorial untuk halaman profil ini. Fitur berikutnya yang akan dibahas adalah pertemanan, dan update biodata profil user. Silahkan dipelajari dan dicoba tahap demi tahap agar bisa. Maaf jika ada kesalahan.

Posted by at
Labels:

10 comments:

Subscribe to: Post Comments (Atom)