Tutorial Proses Pengerjaan Tugas Akhir Pemrogaman Internet (Sosial Media) Tahap 8 (Halaman Permintaan Teman, Pesan Pribadi, Galeri Foto, Dan List/Daftar Teman)

Yupz jumpa lagi dengan saya kawan TA.PA

Kurang 2 tahap lagi untuk dapat menyelesaikan tutorial ini.... Jadi... SEMANGAT ya kawan :) hhehehe

Langsung saja kita akan masuk ke tahap 8 ini

Halaman Permintaan Teman

Permintaan teman bisa dilakukan ketika sesama member tidak memiliki hubungan pertemanan. Untuk tampilannya, silahkan lihat gambar sebelumnya. Ketika belum memiliki pertemanan, maka akan diarahkan untuk membuat pertemanan dengan menampilkan tombol Add Friend. Potongan skrip menambahkan teman ada pada file profile.php. Berikut adalah penjelasan dari skrip :

Skrip tambah_teman.php

Skrip profil.php memiliki aksi ke file tambah_teman.php yang menyimpan permintaannya ke tabel permintaan_teman.

Setelah permintaan pertemanan dilakukan, si peminta pertemanan tidak otomatis menjadi teman, tetapi akan muncul sebagai notifikasi permintaan pertemanan di sisi penerima. Konsep ini sama seperti fasilitas Friend Request pada Facebook. Si penerima permintaan teman, bisa menerima atau menolak permintaan pertemanan yang dikirimkan untuknya.

Nah pada website pertemanan ini, ketika ada permintaan teman, maka akan ada sebuah notifikasi permintaan teman pada bagian atas halaman (header). Contohnya bisa dilihat pada gambar dibawah ini :

Selain notifikasi permintaan pertemanan, pesan yang masuk juga akan diberikan notifikasi (mengenai Pesan akan dibahas pada tahap berikutnya). Notifikasi permintaan teman akan hilang, ketika member yang diminta pertemanan sudah memberikan respon terhadap notifikasi (menerima/menolak). Notifikasi tersebut diatur oleh file atas.php yang sudah dibahas sebelumnya pada saat pembuatan file-file pendukung pada tahap sebelumnya
Skrip permintaan_teman.php

Ketika member meng-klik notifikasi permintaan pertemanan, maka akan diarahkan ke file permintaan_teman.php.

Setelah icon notifikasi permintaan teman di-klik lihat gambar sebelumnya, maka akan tampil daftar Permintaan Teman yang menyediakan dua pilihan dalam bentuk tombol, yaitu Tolak Teman atau Terima Teman. Lihat gambar di bawah ini.

Pesan Pribadi (Private Message)

Yupz saya kira semua orang setuju ketika tidak semua hal dalam Website Pertemanan sifatnya tidak terlalu terbuka untuk umum, artinya member juga bisa mengirimkan pesan secara pribadi ke member lain. Tentunya fitur ini termasuk penting dalam membangun sebuah Website pertemanan, mengingat hampir semua situs jejaring sosial seperti Facebook, Twitter, bahkan forum-forum yang ada di dunia maya saat ini memiliki fitur PM alias Private Messaging.

Dalam proyek ini, fitur pesan pribadi ditampilkan saat pmember berada pada profile orang lain yang telah menjadi temannya. Dan pesan pribadi ditampilkan dalam bentuk jendela pop-up dengan mengklik ikon bergambar surat di bagian atas Halaman Profile, tepatnya disamping kiri ikon kamera seperti di gambar bawah ini.

Apabila ikon bergambar surat (pesan pribadi) di-klik, maka akan tampil jendela pop-up yang isinya berupa form Kirim Pesan. Lihat gambar di bawah ini :

Dan untuk penjelasan skripnya adalah :

Skrip profile.php

Adapun letak skrip untuk menampilkan jendela pop-up pada gambar di atas terdapat pada skrip ini, tepatnya pada bagian form kirim pesan.
Skrip surat.css

Kemudian, karena style CSS dari pesan pribadi agak berbeda dengan style aplikasi secara umum, maka kita akan pisahkan style css-nya dengan nama surat.css yang bisa diletakkan di folder css.
Skrip surat.js

Dan proses penanganan Javascript dari penampilan , pengiriman dan pembalasan pesan terdapat pada file surat.js di folder js.

Skrip kirim_pesan.php

Penyimpaan data pengiriman pesan ke database akan ditanganioleh file kirim_pesan.php setelah tombol ber-id kirmi_pesan diklik dan diproses oleh file surat.js.

Skrip kirim_pesan.php

Penyimpanan data pengiriman pesan ke database akan ditangani oleh file kirim_pesan.php setelah tombol ber-id kirim_pesan diklik dan diproses oleh file surat.js.

Pesan akan disimpan ke dalam tabel pesan dan field dibuka langsung diberikan nilai 1 untuk menandai bahwa pesan tersebut pada Profile yang dikirimin pesan. Bentuk notifikasi pesan bisa dilihat pada gambar sebelumnya.

Skrip inbox.php

Selanjutnya, pesan-pesan yang telah terkirim akan ditampilkan oleh file inbox.php Pesan yang belum dibuka atau belum dibaca ditandai dengan huruf tebal, sedangkan yang sudah dibuka atau dibaca tidak ditandai oleh huruf tebal.

Pesan yang masuk ke inbox member juga diberikan paging yang membatasi tampilan 10 pesan per halaman. Kemudian, masing-masing pesan diberikan seuah CheckBox yang bertujuan agar penghapusan pesan bisa dilakukan secara bersamaan (multiple delete). Lihatlah gambar dibawah ini :

Skrip hapus_pesan.php

Fungsinya adalah untuk menghapus pesan adalah hapus_pesan.php.

Skrip bukapesan.php

Kalau inbox.php untuk menampilkan pesan yag masuk, maka file bukapesan.php bertugas untuk menampilkan pesan satu persatu secara keseluruhan dan juga sekaligus membalas pesan.

Untuk mencobanya, silahkan buka salah satu Pesan yang ada di Inbox (lihat gambar sebelumnya), lalu klik link Balas, maka akan tampil form untuk membalas Pesan tersebut. Lihat gambar dibawah ini :

Skrip balas_pesan.php

Skrip ini berfungsi untuk menyimpan data balsan pesan ke dalam tabel pesan ditangani oleh file balas_pesan.php.

Halaman Galeri Foto

Halaman galeri foto dalam proyek ini hanya menampilkan foto-foto yang ter-upload lewat Status saja, tidak ada halaman khusus untuk meng-upload foto, silahkan Anda kembangkan sendiri lewat contoh-contoh yang telah diberikan sebelumnya. Selain itu , galeri foto status ini menggunakan plugin jquery gancybox agar terlihat lebih oke.

Seperti halnya halaman Profile, halaman galeri foto juga dapat dibedakan ketika member mebuka galeri sendiri atau galeri orang lain.

Galeri ini pun diberikan sebuah paging yang dibatasi sebanyak 16 foto per halaman untuk ditampilkan. Dan berikut adalah penjelasan skripnya :

Skrip galeri.php

Untuk mencobanya, pada Halaman Profile, klik link Photo ayng berada di bagian kiri, maka akan tampil halaman Galeri Foto. Lihat gambar dibawah ini :

Halaman List/Daftar Teman

Pada halaman list.daftar teman tentunya akan menampilkan daftar teman dari member yang telah tersimpan dalam array teman. Selain menampilkan daftar teman. Selain menampilkan daftar teman yang ada, pada halamana ini member juga bisa menghapus teman, sehingga tidak memiliki pertemanan lagi.

List/daftar teman dibatasi 10 member per halaman oleh paging, dan berikut adalah penjelasan dari skripnya :

Skrip daftar_teman.php

Untuk mencobanya, pada Halaman Profile , klik link Friends yang terdapat di bagian kiri maka akan tampil daftar/list teman. Lihat gambar dibawah ini :