Tutorial Proses Pengerjaan Tugas Akhir Pemrogaman Internet (Sosial Media) Tahap 6 (Update serta Hapus Status dan Komentar)

Yupz jumpa lagi di malam yang sesunyi ini.... hahaha yaiyalah udah tengah malam kawan.... :v

Sekarang kita akan masuk ketahap pembuatan bagian yang sering dilakukan para member kita nantinya, yaitu update status, dan komen :v  khususnya untuk member yang masih muda, galau dan bersemangat hehehe :3

Okey sekarang kita langsung mulai aja tahapannya silahkan dinikmati kawan....

Update Status

Seperti telah dibahas pada tahapan sebelumnya, pada halaman utama user, member bisa memposting status mereka sendiri dan update status akan tampil di halaman utama maupun profil member itu sendiri. Contohnya pada gambar di bawah ini :

                               

Untuk membuatnya, kita akan membutuhkan empat buah file yang berkaitan, antara lain : home.php, walll.js, uploadgambar.php dan status.ajax.

Berikut adalah keterangan skripnya :

• Skrip home.php
  
  Untuk mengupdate status pada halaman utama member terdapat pada potongan bagian dari home.php
  
  Elemen textArea, ber-id update adalah tempat untuk mengisikan status, dan id elemen ini akan dikirim ke file wall.js untuk pemrosesannya.
  
  Selain textArea, elemen input type dibuat dengan nilai value adalah $uid yang login, hal ini berfungsi untuk memberikan tanda bahwa status ditulis di dinding sendiri, bukan di dinding orang lain, setelah itu id input type ini juga akan dikirim ke file wall.js.
  
  Status disini tidak hanya bisa diposting berupa teks, melainkan bisa meng-update status sekaligus gambar. Pemrosesan status bergambar akan dikirimkan ke file uploadgambar.php, dan id photoimg akan dikirimkan ke file wall.js. Input type hidden ber-id id_dinding2 berfungsi untuk memberikan tanda apakah gambar di upload di dinding sendiri atau dinding orang lain, dalam hal ini gambar akan disimpan di dinding sendiri.

• Skrip wall.js
  
  Untuk pemrosesan potongan skrip dari home.php tersebut, perhatikan potongan skrip wall.js //Toggle unpload foto
  
  Javascript tersebut berfungsi untuk menampilkan dan menyembunyikan elemen div ber id bukafoto ketika mengklik link ber-id klikfoto (icon bergambar kamera) dengan efek slide Toggle. Contoh bisa dilihat di gambar di bawah :
  
                          
  
  Javascript tersebut berfungsi untuk mengupload gambar dan menampilkan thumbnail gambar ketika ada positng status berupa gambar. Skrip tersebut berkaitan dengan file uploadgambar.php dalam pemrosesan upload gambar.

• Skrip upload gambar.php
  
  Untuk pemrosesan upload gambar, untuk mencobanya silahkan tulis status dilengkapi dengan gambar, lalu upload, seperti pada gambar di bawah ini :

• Skrip wall.js
  
  Perhatikan bagian javascript untuk update status. Javascript tersebut berfungsi untuk memproses update status.
  
  Perhatikan elemen-elemen seperti upldateval, id_dinding dan image_url yang elemen-elemen id yang dikirimkan ke file home.php

• Skrip status_ajax.php
  Ketika elemen sukses diproses oleh Javascript, maka tugas penyimpanan data status akan dilakukan oleh file status_ajax.php.

Hapus Status

Penghapusan akan terjadi ketika member menghapus statusnya sendiri, dan tidak bisa menghapus status member lain. Untuk menghapus Status, ada empat file yang saling berkaitan, yaitu wall.js, buka_status.php, status_ajax.php, hapus_status_ajax.php,.

• Skrip wall.js
  
  Perhatikan pada potongan skrip hapus status, proses penghapusan terjadi ketika link x yang ber-id stdelete diklik. Link tersebut berada pada file buka_status.php dan status_ajax.php.
  
  Sebelum penghapusan, konfirmasi pertanyaan apakah ingin dihapus akan muncul terlebih dahulu sebelum data benar-benar dihapus.
  
  Selain Status, Komentar yang berada pada Status juga akan ikut terhapus.
  .

• Skrip hapus_status_ajax.php
  
  Penanganan penghapusan data Status dilakukan oleh file hapus_status_ajax.php.

Update Komentar

Status pada Website Pertemanan, rasanya kurang pas jika tidak bisa dikomentari,. Biasanya seseorang yang menuliskan statusnya pada dinding, ingin direspon juga oleh member lain atau teman-temannya.

Untuk membuatnya, kita membutuhkan lima file yang saling berkaitan, yaitu wall.js, buka_komentar_ajax.php, komentar_ajax.php, buka_status.php dan status_ajax.php.

• Skrip wall.js
  
  Perhatikan pada potongan Buka Komentar, Komentar Collapse, dan Update Komentar.
  
  Pada skrip bagian Buka Komentar berfungsi untuk menampilkan dan menyembunyikan textArea tempat penulisan komentar. TextArea akan muncul dan sembunyi saat mengklik link COmment. Adapun letak skrip link Comment berada pada file buka_status.php dan status_ajax.php.
  
  Javascript akan merespon efek slideToogle ketiak link Comment ber-class commentopen diklik. Untuk mencobanya, login sebagai member lain untuk mengomentari Dicky, misalnya login dengan Email:diecy@rocketmail.com dan Password dicky. Kemudian berikan komentar salah satu Status dengan mengklik link Comment, maka tambpil form Komentar di bawah Status tersebut
  
  Selanjutnya adalah bagian skrip Komentar Collapse berfungsi untuk menampilkan Komentar Status secara collapse, karena ketika komentar pada status berjumlah lebih dari dua, komentar yang ditampilkan adlaah dua komentar terakhir, untuk melihat semau komentar kita harus mengklik link View All Comment. Contohnya bisa dilihat pada gambar di bawah.
  
  Bagian skrip Update Komentar berfungsi untuk menyimpan data komentar lewat form yang berada pada file buka_status.php dan status.ajax.php.
  
  Perhatikan nama class comment_button pada kode diatas, nilai class tersebutlah yang dikirim ke Update Komentar.

• Skrip komentar_ajax.php
  
  Penanganan penyimpanan data komentar dilakukan oleh skrip ini.

• Skrip buka_komentar.php
  
  Skrip ini berfungsi untuk menampilkan data komentar yang tersimpan dalam database.

Hapus Komentar

Untuk hapus komentar, file-file yang terkait adalah wall.js, buka_komentar.php, komentar_ajax.php dan hapus_komentar_ajax.php.

• Skrip wall.js
  
  Bagian skrip Hapus Komentar akan dieksekusi ketika link yang ber-id stcommentdelete di-klik, dimana elemen stcommentdelete terletak pada file buka_komentar.php dan komentar_ajax.php.

• Skrip hapus_komentar_ajax.php
  
  Penanganan hapus komentar akan dijalankan oleh skrip ini. Untuk mencobanya silahkan hapus salah satu Komentar pada Status dengan mengklik tandax, maka akan tampil kotak dialog peringatan seperti pada gambar dibawah ini :

Yupz selesai juga tutorial tahap 6 ini.... terimakasih sudah membacanya dari blog saya ini :)
dan jangan lupa ... pengunjung yang baik pasti meninggalkan komentar ..

setelah itu silahkan lanjut ke tahap berikutnya kawan :)