About Me

Hai, saya Rosihan Ari Yuana. Saya sehari-hari adalah mengajar di Universitas Sebelas Maret.

Bidang riset saya tentang adaptive learning, computer aided learning, dan datascience

Selain itu, saya juga seorang penulis buku dan blogger.

More about me...

  • Home
  • /
  • PHP
  • /
  • Membuat Buku Tamu dengan Akun Facebook (Bag 2)
PHP

Membuat Buku Tamu dengan Akun Facebook (Bag 2)

Wah… akhirnya sempat juga menulis kelanjutan dari membuat buku tamu dengan akun Facebook ini. Maaf ya.. agak lama jedanya dengan yang bagian pertama. OK, sekarang saatnya saya bahas bagaimana cara membuat buku tamunya, setelah bagian yang pertama kita bahas konsep dasar membuat aplikasi yang memanfaatkan Facebook Connect.

Untuk membuat buku tamu dengan akun FB ini, kita membutuhkan database untuk menyimpan komentar-komentar yang masuk ke buku tamu. Berikut ini struktur tabel yang kita butuhkan

CREATE TABLE `guestbook` (
  `id` int(11) auto_increment,
  `idFB` varchar(20),
  `tgl` date,
  `komentar` text,
  PRIMARY KEY  (`id`)
)

Keterangan:
Field ‘id‘ nanti berisi bilangan unik yang bersifat autoincrement, ‘idFB‘ digunakan untuk menyimpan no ID Facebook dari mereka yang mengisi komentar, ‘tgl‘ nantinya digunakan untuk menyimpan tanggal pengisian komentar, dan ‘komentar‘ untuk isi komentarnya.

Mungkin Anda bertanya, kenapa identitas nama atau email dari pengisi komentar tidak disediakan fieldnya? lho kan dari ID Facebook nya kan nanti bisa kita dapatkan dengan menggunakan http://graph.facebook.com/ID seperti yang pernah dibahas sebelumnya?. Sehingga di sini kita cukup menyimpan ID Facebook dari komentator.

Nah… setelah kita set tabel untuk menyimpan data komentar, kita bisa buat script buku tamunya. Oya, pastikan Anda telah memahami konsep dasar membuat aplikasi yang menggunakan Facebook Connect. Jika belum, pastikan Anda telah membaca artikel sebelumnya ya. Jika Anda nekat, resiko bingung silakan ditanggung sendiri 🙂

Konsep pembuatan scriptnya adalah sbb:

Pertama, kita perhatikan dahulu script template dari aplikasi yang menggunakan Facebook Connect sbb:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php include "cookie.php"; ?>
 
    <?php if ($cookie) { ?>
 
    <!-- script setelah user melakukan login FB -->
    <!-- diletakkan di sini -->
 
    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>
 
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

dengan script cookie.php nya sbb:

cookie.php

<?php
 
define('FACEBOOK_APP_ID', 'Isikan App ID di sini');
define('FACEBOOK_SECRET', 'Isikan App Secret di sini');
 
function get_facebook_cookie($app_id, $application_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $application_secret) != $args['sig']) {
    return null;
  }
  return $args;
}
 
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
 
?>

Perhatikan bagian

<!-- script setelah user melakukan login FB -->
<!-- diletakkan di sini -->

pada script template di atas. Di situlah nantinya kita letakkan script untuk memasukkan komentar buku tamu melalui form. Karena form isian buku tamu itu muncul setelah pengunjung melakukan login dengan menggunakan akun FB mereka. Sehingga scriptnya menjadi seperti ini

bukutamu.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <h1>Buku Tamu Dengan Facebook</h1>

    <?php include "cookie.php"; ?>

    <?php
    // koneksi ke mysql
    mysql_connect(dbHost, dbUser, dbPass);
    mysql_select_db(dbName);

    // proses simpan data komentar ke DB 

    if (isset($_POST['submit']))
    {
       // baca tanggal posting komentar
       $tgl = date("Y-m-d");
       // baca ID FB dari pengisi komentar 
       $idFB = $_POST['idFB'];
       // baca isi komentar
       $komentar = $_POST['komentar'];

       // query simpan data ke tabel guestbook
       $query = "INSERT INTO guestbook (idFB, tgl, komentar) VALUES ('$idFB', '$tgl', '$komentar')";
       mysql_query($query);
    } 

    ?>
 
    <?php if ($cookie) { ?>
    <?php
    // setelah login sukses

    // proses parsing data JSON profile user dengan ID Facebook 
    $user = json_decode(file_get_contents("http://graph.facebook.com/".$cookie['uid']), true);
 
    // menampilkan sapaan berisi nama lengkap
    echo "<p>Selamat datang ".$user['name'].", silakan isi buku tamunya di sini</p>";
    ?>

    <form method="post" action="<?php $_SERVER['PHP_SELF']?>">
    <textarea name="komentar" cols="30" rows="10"></textarea>
    <input type="hidden" name="idFB" value="<?php echo $cookie['uid']; ?>">
    <br>
    <input type="submit" name="submit" value="Simpan">
    </form>   

    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>
 
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Proses submit pengisian buku tamu pada script di atas diarahkan ke script itu sendiri, sehingga pada form buku tamu menggunakan

<form method="post" action="<?php $_SERVER['PHP_SELF']?>">

Nah… sampai sini kita sudah membuat aplikasi untuk pengisian buku tamunya setelah pengunjung login menggunakan akun FB nya. Lantas… data komentar buku tamunya ditampilkan di mana? Anda dapat membuat script untuk menampilkan komentar-komentar yang sudah masuk di dalam script di atas sekaligus. Trus… diletakkan di mana script nya? Jika Anda ingin komentar-komentar tersebut muncul setelah pengunjung login, ya berarti diletakkan di dalam

<?php if ($cookie) { ?>

sebelum bagian form untuk input komentar, karena data komentar ditampilkan di atas form komentar. Namun, jika Anda ingin agar komentar tersebut muncul baik pengunjung sudah login atau belum maka letakkan sebelum

<?php if ($cookie) { ?>

tapi setelah proses simpan datanya lho ya? atau setelah bagian proses insert data komentar ke database

if (isset($_POST['submit']))
{
  ...
}

soalnya kalo diletakkan sebelum bagian tersebut, maka Anda harus merefresh script buku tamu untuk melihat komentar yang terakhir masuk, karena data komentar ditampilkan dahulu sebelum proses insert data nya. Sehingga script buku tamunya menjadi

bukutamu.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <h1>Buku Tamu</h1>
    <?php include "cookie.php"; ?>
    <?php
    // koneksi ke mysql
    mysql_connect(dbHost, dbUser, dbPass);
    mysql_select_db(dbName);

    // proses simpan data komentar ke DB 

    if (isset($_POST['submit']))
    {
       // baca tanggal posting komentar
       $tgl = date("Y-m-d");
       // baca ID FB dari pengisi komentar 
       $idFB = $_POST['idFB'];
       // baca isi komentar
       $komentar = $_POST['komentar'];

       // query simpan data ke tabel guestbook
       $query = "INSERT INTO guestbook (idFB, tgl, komentar) VALUES ('$idFB', '$tgl', '$komentar')";
       mysql_query($query);
    } 

    // proses menampilkan semua data komentar
    
    $query = "SELECT * FROM guestbook ORDER BY id DESC";
    $hasil = mysql_query($query);
    while ($data = mysql_fetch_array($hasil))
    {
       // proses parsing data profile pengisi komentar berdasarkan ID FB
       $user = json_decode(file_get_contents("https://graph.facebook.com/".$data['idFB']), true);
       // menampilkan photo profile
       echo "<p><img src='https://graph.facebook.com/".$data['idFB']."/picture'><br>";
       // menampilkan nama profile dan link profile FB nya
       echo "Nama: <a href='".$user['link']."'>".$user['name']."</a><br>";
       // menampilkan email profile FB
       echo "Email: ".$user['email']."<br>";
       // menampilkan tanggal posting komentar 
       echo "Tanggal posting: ".$data['tgl']."<br>";
       // menampilkan komentarnya
       echo "Komentar: ".$data['komentar']."</p><hr>";
    }
    ?>
 
    <?php if ($cookie) { ?>
    <?php
    // setelah login sukses

    // proses parsing data JSON profile user dengan ID Facebook 
    $user = json_decode(file_get_contents("http://graph.facebook.com/".$cookie['uid']), true);
 
    // menampilkan sapaan berisi nama lengkap
    echo "<p>Selamat datang ".$user['name'].", silakan isi buku tamunya di sini</p>";
    ?>

    <form method="post" action="<?php $_SERVER['PHP_SELF']?>">
    <textarea name="komentar" cols="30" rows="10"></textarea>
    <input type="hidden" name="idFB" value="<?php echo $cookie['uid']; ?>">
    <br>
    <input type="submit" name="submit" value="Simpan">
    </form>   

    <?php } else { ?>
      <!-- jika user belum login maka munculkan tombol login -->
      <fb:login-button></fb:login-button>
    <?php } ?>
 
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Berikut ini tampilan dari script di atas bila pengunjung belum login (belum ada komentar yang masuk)

Buku Tamu dengan Facebook

Sedangkan di bawah ini tampilan buku tamu jika belum login namun sudah ada komentar yang masuk

Buku Tamu dengan Facebook

Setelah login, maka akan tampil form isian komentar buku tamu. Perhatikan tampilan di bawah ini bahwa terdapat ucapan selamat datang kepada nama si pengunjung. Nama pengunjung diambil dari profile FB berdasarkan ID FB nya.

Buku Tamu dengan Facebook

Sedangkan tampilan berikut ini setelah komentar disubmit. Dalam contoh ini, emailnya kosong karena untuk profile saya, email di profile FB saya buat private.

Buku Tamu dengan Facebook

Mudah bukan membuatnya? Nah… untuk artikel selanjutnya (bagian ke-3) akan saya bahas bagaimana cara komentar yang diisikan ke dalam buku tamu tersebut otomatis masuk ke Wall FB (update status FB) nya si pengisi komentar. Tunggu ya…

 

Bagikan artikel ini jika bermanfaat !

Saya seorang dosen dan peneliti di Universitas Sebelas Maret. Bidang penelitian saya tentang: adaptive learning, datascience, dan computer aided learning. Selain itu saya juga seorang blogger, serta penulis buku tentang pemrograman, dan matematika.

Leave a Reply