Selamat Datang lagi sobat...
Mari kita lanjutkan tutorialnya, ke part 6. Yaitu, membuat
Komentar Status
Kalau kita bikin status terus orang lain ga bisa komentar
kan jadi gak seru, makanya mari kita buat fitur komentarnya..
Sebelumnya di part 5 kita sudah membuat ganti foto profil
dan ganti password. Jadi kira-kira tampilan home-nya sekarang berbeda. bagi yang belum membacanya silahkan klik di bawah ini :
Ini adalah tampilan social network saya sampai sekarang :
 |
| tampilan home sekarang |
Yah dari pada kelamaan mending langsung buat saja.
Untuk membuat fitur komentar status, ikutilah langkah
berikut :
Pertama
Buatlah table "komentar" pada database dengan
atribut seperti berikut :
 |
| atribut table komentar |
Berikut adalah kode SQL-nya :
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
Sebelumnya, buka “home.php”, cut/hapus kode
<hr>...sampai ke bawah dan ganti dengan kode ini :
?>
<?php
include"tampilstatus.php";?>
<?php
Kode tersebut berfungsi untuk memanggil syntak
“tampilstatus.php”.
Buat form untuk menulis komentar pada 'tampilstatus.php '
Isikan kode ini kedalam “tampilstatus.php” :
<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-->
Maka tampilannya akan menjadi seperti ini :
 |
| home |
Kembali ke komentar,
Pada dasarnya kita hanya menambahkan kode dibawah tulisan
<!-- FORM ISI KOMENTAR -->. Hasilnya akan telihat seperti berikut :
 |
| komentar |
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 :
<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 :
<?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".
NB : jika sobat ingin mencoba komen, jangan menggunakan (. ,
‘ “), maka akan muncul notif error seperti ini.
 |
| gagal komentar |
Saya coba komen :
 |
| coba komentar |
Lihat ke DataBasenya :
 |
| database komentar sukses |
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 diatas bagian <!-- Tempat
tampilkan KOMENTAR --> yang ada pada "tampilstatus.php"
Ketikkan kode berikut tepat diatas <!-- Tempat tampilkan
KOMENTAR --> :
<?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 :
 |
| komentar sukses |
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.
Tutorial (part 7) selanjutnya membahas Halaman profil dari sebuah
jejaring sosial, yaitu:
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.
Yah, mungkin cukup untuk pertemuan hari ini, jika saya dalam
menge-postkan ada kesalahan. Mohon di maafin saja.
Jika, sobat mempunyai masalah/ muncul notif error, tanyakan
di kotak komentar. Sehingga saya bisa langsung memperbaikinya.
Sampai Jumpa di tutorial berikutnya sobat.....
Terima Kasih atas kerja kerasnya
No comments:
Post a Comment