Membuat Jejaring Sosial sederhana dengan PHP, MYSQL, dan Bootstrap di Localhost (part 7)

Ketemu lagi dengan saya sobat.

Mohon maaf jika tutorial kemarin belum saya post-kan, seperti biasa di karenakan sibuk di hari minggu ,

kali ini saya coba lanjutin tutorial kita, gak terasa sudah sampai di PART 7. Kali ini kita akan buat halaman profil untuk user.

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 ini kita akan coba membuat layout untuk menampung fitur-fitur diatas.

Pertama

Di part 6 kita sudah membuat Kita sudah membuat kometar. Jadi seluruh dari part 1- part 6, akan memiliki tampilan home seperti berikut :

home.php

Dan database dengan tiga buah tabel seperti berikut :

tiga table

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 :

tampilan design social network

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 tempat 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 :

<?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'];

<head>

<title>Profil</title>

</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)

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

<?php echo include"header.php";?> </body>

Ganti isi file header.php berikut :

<li><a href = "profil.php?id_user=<?php echo "$_SESSION[id_user]";?>"><span class="glyphicon

Menjadi

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 :

<img src="foto/<?php echo $photo;?>" class="img-responsive">

</center>

</div>

Isikan kode berikut dibawah kode <?php echo include"header.php";?> pada profil.php untuk menampilkan foto profil dan nama user :

<img src="foto/<?php echo $photo;?>" class="img-rounded" width="125" height="125">

</a>

</div>

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

</div>

</div>

</div>

NB : jika nanti pas sobat klik fotonya, tapi tidak ke-zoom. Ganti <a href=”#myModalfoto”> dengan foto sobat di folder project sobat.

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

foto zoom sukses

Kelima

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

design foto dan nama user

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  pada file profil.php :

<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>Konfirmasi</center></a>

<a href="#myModalbatal" data-toggle="modal" class="btn btn-primary btn-block"><center>Batal Add</center></a>

</div>

<li><a href="#myModalpesan" data-toggle="modal" style="text-decoration:none"><center>Kirim Pesan</center></a></li>

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Teman <b class="caret"></b></a>

<a href="#myModalhapusteman" data-toggle="modal" style="text-decoration:none"><center>Hapus Teman</center></a>

</ul>

</li>

</ul>

</div>

</div>

Coba cek tampilan web nya. Seharusnya sudah seperti ini :

tampilan navigasi

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 :

$(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> sebagai berikut :

<li class="active"><a href="#sectionA">Status</a></li>

<li><a href="#sectionB">Galery</a></li>

</ul>

<br>

</div>

<?php if(($id_user == $_SESSION['id_user'])){ ?>

</div>

</form>

<?php } ?>

</div>

<br>

</div>

<p>Dalam Tahap Pengembangan</p>

</div>

</div>

<li><a href="#sectionD">TEMAN</a></li>

</ul>

</div>

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

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

<p>Dalam Tahap Pengembangan</p>

</div>

</div>

</div>

</div>

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

tampilan profil

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  pada profil.php :

<?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 :

tampilan hasil akhir

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.

Source hasil tutorial part 7 ini bisa di cek di komen bawah.. :D

NB : kalau pake php versi 5.5 keatas akan ada notice DEPRECATED bla bla bla.. Bug ini udh diatasi di hasil tutorial past7 di komen bawah.. lebih jelasnya tentang DEPRECATED ini bisa tanya mbah google gan.. thanks ...

Ini adalah tampilan home.php yang saya edit-edit. Jadi sobat bisa menyempurnakan social network sobat, agar menjadi lebih keren. Ini dia tampilannya :

tampilan edit home saya

Tampilan index.php :

tampilan index.php

Mungkin, tutorial part 8 masih lama, di karenakan saya juga masih menunggu update-tannya dari “TutorialJaco”. Mohon di maafkan jika masih ada kekurangannya.

Terima Kasih atas kerja kerasnya,

Silahkan bertanya jika merasa muncul notif error, maka saya akan segera membantunya.

Terima Kasih

4 comments:

UnknownJanuary 4, 2016 at 9:59 AM
sama sama gan, wah maaf ini dari aplikasi xampp gan. jadi nggak ada demonya, maaf ya
UnknownJanuary 4, 2016 at 7:06 PM
Wah bisa nih buat tugas kuliah, thanks gan

Kunjungi juga gan bagaimana menambah Bandwith WIFI menggunakan CMD
http://mencari-unik.blogspot.co.id/2016/01/cara-menambah-bandwith-jaringan-wifi.html
daniFebruary 10, 2016 at 10:22 AM
susah nih, rumit, ada cara yang lebih gampang gak?

WORLD-INFO

Membuat Jejaring Sosial sederhana dengan PHP, MYSQL, dan Bootstrap di Localhost (part 7)

4 comments:

Popular Post

Blog Stats

Blog Archive

Label

About Me

Followers