Selamat Datang lagi sobat...
Sobat, masih mengikuti tutorial ini kan? Terima kasih ya....
untuk sobat yang belum membaca part sebelumnya, klik di bawah ini
Di part 4, Kali ini kita akan coba bahas tentang cara Update
status.. ini dia contoh tampilan update status yang akan kita buat nanti.
 |
| tampilan update status social network |
di part3 kita sudah mempunyai sebuah halaman home yang
terdapat sebuah form textarea tempat menulis status kita.
Mari kita perhatikan lagi form update status pada halaman
home kita. Ini tampilannya :
 |
| tampilan update status |
Mari kita buka file home.php dan kita cek lagi code form
diatas, codenya sebagai berikut :
<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"
.
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 :
 |
| atribut table status |
Kode SQL-nya :
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.
Karena itu mari kita buat file php baru dengan nama
"updatestatus.php"untuk mengolah status ke dalam database. Kosongkan
isi kode pada "updatestatus.php".
Isikan kode berikut :
<?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. saya coba udah berhasil masuk
ke database.
Tampilan :
 |
| sukses update status |
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 tampilan berikut ini :
 |
| status |
Untuk membuat tampilan seperti gambar di atas, buka home.php
dengan notepad. Lalu tambahkan kode di dalamnya :
</form><!--
end form update status -->
<!—jangan lupa
isikan kodenya di sini-->
</div><!--
Akhir Kode Form Update Status -->
ini kode
syntak-nya. Copy pastekan di antara kode yang di atas.
<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>Oktober 28, 2015</i></small></h4>
<p>isi statusnya nanti ada di sini. </p>
</div> <!-- akhir media-body-->
</div><!--
akhir media -->
<div class="row">
<!--kode komentar disni ntar-->
</div>
</div><!--
akhir row tampil isi status -->
Jika sobat masih
bingung, lihat gambar di bawah ini:
 |
| kode tampil status |
Kemudian jalankan halaman
web home.php apakah tampilannya 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 orange pertama pada gambar diatas.
Berikut kodenya :
<?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).
<?php
}
?>
Jika sobat bingung,
lengkapnya ini saja :
<?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>Oktober 28, 2015</i></small></h4>
<p>isi statusnya nanti ada 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:
 |
| status ulang sukses |
Kita sudah bisa
melakukan perulangan sejumlah status yang ada di dalam tabel. Langkah selanjutnya
adalah memasukkan tiap-tiap variabel hasil query kedalam tiap kotak
masing-masing.
Sobat, Perhatikan
gambar berikut :
 |
| mengubah kode s-query |
NB : Kotak yang saya beri warna-warni ubah menjadi :
1. Ubah
"foto/default.jpg" menjadi
"<?php
echo'foto/'.$fot;?>"
2. Ubah NAMA USER
menjadi
<?php
echo $nm_dp.' '.$nm_blk;?>
3. Ubah Oktober 28,
2015 menjadi
<?php
echo $tanggal_status; ?>
4. Ubah isi status
menjadi
<?php
echo $isi_status; ?>
Kalau sudah coba di
lihat tampilan web nya. Hasil dari tampilan web akan jadi begini,
Hahhaha.... linkin park buat status.
Ada M. Shadow
(vokalis avenged sevenfold) juga.
wkwkwkkw
 |
| tampilan home akhir |
Jika punya sobat muncul tampilan seperti gambar di atas,
jadi sudah lancar-lancar saja. Jika tidak, periksa lagi kode-kodenya dari awal.
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 part 5. Kemudian
juga akan dibahas fungsi Ubah Password, ganti fotoprofil dan ganti info user.
Jika sobat memiliki kesulitan saat belajar ini, terus
berusaha ya, jangan pernah menyerah.... saya dulu juga pernah mengalaminya.
Sering muncul notif error terus.... tapi setelah saya mempelajarinya terus,
teliti memeriksa kode-kodenya, search mbah google, terus bisa-bisa sendiri
deh.hehehehe
Terima Kasih telah berkerja keras, jika ada pertanyaan tulis
di kotak komentar.
Sampai Jumpa lagi di tutorial berikutnya.....
No comments:
Post a Comment