Tutorial Proses Pengerjaan Tugas Akhir Pemrogaman Internet (Sosial Media) Tahap 5 (Halaman Member dan Home)

Bila pada tahap-tahap sebelumnya ada yang kurang jelas... silahkan anda tanyakan di bagian komentar di bagian paling bawah.....

Karena disini saya akan menjelaskan secara bertahap, jadi kalau ada bagian yang eror pada tahap sebelumnya tidak akan bisa dilanjutkan ke tahap berikutnya... oleh karena itu tanyakanlah keeroran anda... :3  hehe... dan semoga saya bisa mengatasinya.. jika tidak akan saya tanyakan ke mbah Google nantinya...

Yupz.. sekarang masuk ke tahap 5 kawan bersiaplah.... bersiaplah.... bersiaplah....  dan selamat menikmati... salam  TA.PA  ...... Dan langsung kita mulai saja :

Halaman User / Member

Pada situs jejaring sosial seperti Facebook, ketika user atau member berhasil login ke sistem, maka member dapat mengakses seluruh halaman-halaman yang di-izinkan  diakses oleh Facebook.Misalnya, user bisa membuka halaman utama dari Facebook yang menampilkan status ter-update dari daftar teman atau member dapat membuka halaman profile dari member lain yang sudah menjadi teman atau emmber juga bisa membuka halaman pesan pribadi untuk membaca atau mengirim pesan dan lain sebagainya.

Pada tahap ini, saya akan mengajak anda untuk membuat fitur gitur tersebut, dimana ketika user berhasil mendaftarkan dirinya dan berhasil melakukan login, maka member dapat mengakses halaman-halaman yang di-izinkan oleh aplikasi, diantaranya:

1. Halaman Utama
2. Halaman Profil
3. Halaman Upload Foto Profil
4. Halaman Permintaan Teman
5. Pesan Pribadi (Membaca dan Mengirim Pesan)
6. Halaman Galeri Foto
7. Halamn Daftar Teman.

Sebelum halaman-halaman tersebut, kita akan membuat File-file Pendukung terlebih dahulu berupa fungsi-fungsi yang nantinya akan digunakan. FIle tersebut adalah file cek_sesi.php, time_stamp.php,tolink.php, dimana ketiga file tersebut disimpan di dalam folder include.

Selain ketiga file tersebut kita juga akan membuat dua buah file menu navigasi, yaitu atas.php dan kiri.php yang gunanya untuk mempersingkat coding dan mengurangi pengulangan coding untuk menu-menu navigasi, dimana kedua file tersebut akan disimpan di dalam folder utama (jejaring).

Berikut adalah penjelasan skrip skrip tersebut :

• Skrip cek_sesi.php
  
  Skrip cek_sesi.php berfungsi untuk mengecek apakah member sudah melakukan login atau belum pada halaman-halaman yang diberikan otorisasi berupa sesi user login. Jika user membuka halaman-halaman yang diotorisasi tanpa sesi, maka akan diarahkan ke halaman login.

• Skrip time_stamp.php
  
  Skrip ini berfungsi untuk mendapatkan selisih waktu status atau komentar sejak dibuat samapai status atau komentar dibaca.
  
  Selisih waktu yang dicari akan menghasilkan berapa lama status atau komentar dibaca (dalam selisih detik, menit, jam, hari, bulan sampai tahun).

• Skrip tolink.php
  
  Skrip ini berfungsi untuk merubah teks biasa menjadi hyperlink yang digunakan ketika update status yang ditulis berupa url/link, maka fungsi ini akan mengkonversi teks menjadi hyperlink.

• Skrip atas.php
  
  Skrip ini akan menampilkan notifikasi permintaan teman dan pesan yang masuk. Dan juga ada form input yang berfungsi untuk pencarian user, pembahasannya ada pada tahap-tahap berikutnya. Dan menampilkan link Home, Profile dan Logout pada bagian atas (header) halaman.

• Skrip kiri.php
  
  Skrip ini untuk menampilkan navigasi/link di bagian kiri pada halaman Profile, yaitu Wall, Photo, dan Friends.

• Skrip dinding.css
  
  Dan terakhir adalah file css untuk mengatur tampilan Website Pertemanan secara keseluruhan. Kita berinama filenya dinding.css simpan pada folder css.
  

Halaman Utama (home)

Halaman utama pada website ini akan menampilkan Update Terakhir Status dan Komentar dari semua member yang tergabung atau terdaftar pada aplikasi. Artinya, member yang membuka halaman utama dapat mengetahuidan membaca update status semua member meski belum memiliki pertemanan antara member tersebut.

Selain membaca update status, member yang berada di halaman utama juga dapat mengupdate statusnya sendiri, mengomentari status ataupun menghapus status atau komentar sendiri.

Berikut adalah penjelasan skripnya :

• Skrip home.php
  
  Pada enam baris awal berfungsi untuk membuka sesi dengan fungsi start dan menyertakan file koneksi dan cek sesi.
  
  Pada bagian head kita membutuhkan file css dan bebrapa file jquery yang berkaitan dengan skrip di bagian body halaman.
  
  File jquery.1.4.2.min.js, jquery.livequery.js, jquery.form.js, jquery.oembed.js dan wall.js adalah file jquery yang berhubungan dengan update, hapus komentar maupun status. Sedangkan file suggest.js akan berkaitan dengan skrip pencarian member yang nanti akan dibahas.

• Skrip buka_status.php
  
  Pada div ber-id "content" terdapat file yang bernama buka_status.php, file ini berfungsi untuk menampilkan data status yang telah tersimpan didalam database.

• Skrip wall.js
  
  Skrip ini berguna untuk menangani proses JaveScript pada halaman utama.

Sekarang saatnya untuk mengujinya. Pada halaman utama Website Pertemanan, silahkan login dengan mengisikan Email dan Password, misalnya Email: diecynew@rocketmail.com dan Passwordnya: dicky. Apabila berhasil login, maka akan tampil halaman utama untuk user Dicky.

Apabila anda perhatikan di bagian header website pertemanan(hasil skrip atas.php) terdapat notifikasi (pesan baru dan permintaan teman), form pencarian user, dan link navigasi (Home, Profile, Logout) lihat pada gambar di bawah ini :

Pada halaman utama member, pembahasan akan kita bagi lagi menjadi beberapa bagian, yaitu update status, hapus status, update komentar, hapus komentar, paging halaman status dan pencarian member.......

Untuk itu sekian dulu tahap 5 saya ucapkan terimakasih... dan sampai jumpa di tahap selanjutnya serta jangan lupa untuk meninggalkan komen yang bermanfaat dari anda :)