Tutorial Proses Pengerjaan Tugas Akhir Pemrogaman Internet (Sosial Media) Tahap 7 (Pagging Status, Pencarian Member,serta Halaman Profil, dan Upload Foto Profil)

Selamat pagi kawan...

Yupz sampai juga kita ke tahap yang ke 7 ini, dan tinggal beberapa tahap lagi untuk website buatan kita nantinya akan berhasil... jadi jangan menyerah :)

Kita langsung saja mulai untuk tahap 7 ini ....

Pagging Status

Seperti yang telah dibahas pada tahap sebelumnya mengenai paging ala Facebook, trik tersebut akan coba kita terapkan pada proyek kita ini. Kita akan membatasi sepuluh status terakhir yang akan tampil pada halaman utama. Jika Status lebih dari 10, maka link Show Older Posts akan tampil dan jika di-klik paginggnya, amaka akan tampil status berikutnya tanpa me-refresh halaman.

Ada dua buah file yang terkait untuk membuat paging ini, yaitu wall.js dan buka_status.php. Berikut adalah penjelasan skripnya :

• Skrip buka_status.php
  
  Skrip in bertugas untuk membuat pagging status.
  
  Jika query status memeiliki record=sepuluh, maka div id paging akan menampilkan link Show Older Posts. Namun, jika query status lebih kecil dari sepuluh, maka div id pagging akan menampilkan link No More Post.
  
  Dan calss bernama load_more_home akan dikirimkan nilainya ke file wall.js.
  
  Untuk melihat hasil paging, silahkan scroll browser sampai ke data paling bawah, nanti akan terlihat link Show Older Posts.

Pencarian Member

Selanjutnya kita akan menjelaskan trik, yaitu Pencarian User ala Facebook. Untuk membuatnya , kita membutuhkan dua file, yaitu pencarian.php dan suggest.js.

Yupz, karena posisi Form Pencarian ada pada bagian atas aplikasi, maka file atas.php juga dibutuhkan untuk menulis member yang dicari. Dan berikut adalah penjelasan skrip skripnya :

• Skrip Suggest.js
  
  Skrip ini menerima nilai dari id inputstring yang diterima dari skrip atas.php.

• Skrip pencarian.php
  
  Proses pencarian member di dalam database akan ditangani oleh skrip ini.
  
  Untuk mencobanya, Anda bisa mengetikkan salah satu huruf pada Form Pencarian yang terdapat di bagian atas website, misalnya huruf d, maka akan langsung ditampilkan nama-nama member yang mengandung huruf d. Lihat gambar di bawah ini :
  
                 
  
  Untuk mempersempit pencarian member, Anda bisa mengetikkan satu huruf lagi, misalnya i, nanti akan langsung ditampilkan nama-nama yang mengandung huruf di.

Halaman Profil

Sama seperti Halaman Utama, pada Halaman Profile juga menampilkan Update Status terakhir. Yang membedakan adalah kepemilikan dinding (wall)nya saja, dimana pada Halaman Utama menampilkan Status semua member tanpa terkecuali, sedangkan pada Halaman Profil hanya menampilkan Status si pemilik profile atau pemilik dinding.

Selain itu, Halaman Profile akan membedakan siapa yang sedang membuka profile, artinya apakah member sedang membuka profile sendiri atau membuka profile orang lain. Dan ketika member belum memiliki pertemanan, maka akan diarahkan untuk membuat pertemanan terlebih dahulu (Add Friend).

Disamping itu , ketika member sedang membuka profil teman, maka akan ditampilkan link ntuk mengirimkan Pesan.

Pada bagian kiri website, tepatnya dibawah foto profile menampilkan tiga buah link, yaitu Wall, Photo dan Friends.

Untuk lebih jelasnya, ini adalah penjelasan dari skrip skripnya :

• Skrip profile.php
  
  Untuk mencobanya, silahkan klik link Profile salah satu yang terdaftar di website ini, maka akan tampil Halaman Profile member tersebut. Lihat gamber dibawah ini.
  
                         
  
  Sekarang sudah jelas kan perbedaan tampilan antara Halaman Utama dan Halaman Profile. Dan yang perlu diperhatikan adalah link-link yang ada dibawah foto profile. yaitu Wall, Photo, Friends yang merupakan hasil dari file kiri.php yang telah kita bahas pada tahap sebelumnya.
  
  Sedangkan apabila membuat Profile dari seseorang yang bukan/belum menjadi teman kita, maka akan tampil tombol Add Friend yang menyarankan agar berteman dengan Profile yang dibuka tersebut, lihat gambar dibawah ini :
  
                               
  
  Adapun untuk Update Status, Komentar dan Paging Halaman Profil hampir sama dengan Halaman Utama, yang membedakan hanyalah kepemilikan dinding (wall)-nya saja.

Halaman Upload Foto Profile

Fitur upload foto profile juga merukan penerapan trik. Foto profile yang diupload nanti akan menjadi foto utama di halaman Website Pertemanan dan menjadi foto yang tampil pada kolom Status maupun Komentar.

Foto yang diupload akan disimpan ke dalam dua bentuk, yaitu ukuran sebenarnya dan  ukuran thumbnail 50x50 px. Ukuran sebenarnya digunakan untuk foto profil dan foto thumbnail akan dijadikan foto Status dan Komentar.

Untuk membuatnya, dibutuhkan dua buah file, yaitu profile_photo.php dan gambar_profile_ajax.php. Dan berikut adalah penjelasan skripnya :

• Skrip profile_photo.php
  
  Untuk mencobanya silahkan klik link Edit Profile Pic pada Halaman Utama, maka akan tampil form upload foto seperti pada gambar dibawah ini :

• Skrip gambar_profile_ajax.php
  
  Bertugas untuk menyimpan hasil update foto profil ke database.
  
  Untuk mencobanya, silahkan lihat lagi gambar diatas yaitu pada halaman form upload foto, klik tombol Browse untuk mencari gambar/foto di komputer, lalu klik tombol Submit, maka fotonya akan langsung ditampilkan dibawah form upload foto tersebut. Selanjutnya, pilih dan drag pada area gambar untuk melakukan cropping (pemotongan), apabila tampil kotak dialog penyimpanan foto thumbnail, klik OK, maka hasil cropping akan langsung ditampilkan dibawah foto aslinya. Lihat gambar dibawah :

Yupz selesailah tahap 7 ini... di malam yang sedingin ini ... ditemani hujan rintik-rintik.... 

Sampai jumpa lagi kawan di tahap 8 nanti.

Dan jangan lupa pengunjung yang baik pasti meninggalkan komen yang baik pula :)