sanksi pelanggaran pasal 72 · bersinggungan dengan situs jejaring sosial seperti facebook dan...

18

Upload: hoangnguyet

Post on 03-Mar-2019

229 views

Category:

Documents


0 download

TRANSCRIPT

Sanksi Pelanggaran Pasal 72

Undang-undang Nomor 19 Tahun 2002

Tentang Hak Cipta

1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp 1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,00 (lima miliar rupiah).

2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp 500.000.000,00 (lima ratus juta rupiah).

M e m b u at S e n d i r i We b s i t e Pe r t e m a n a n

dengan PHP dan jQuery

www.bukulokomedia.com

Akhmad Dharma Kasman

iv

MEMBUAT SENDIRI WEBSITE PERTEMANAN DENGAN PHP DAN JQUERYPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Akhmad Dharma KasmanMEMBUAT SENDIRI WEBSITE PERTEMANAN DENGAN PHP & JQUERY- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2012 150 hlm; 15 x 23 cm ISBN : 978-979-1758-88-8

Penerbit Lokomedia, Cetakan Pertama : Oktober 2012

Editor : Siti MutmainahCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2012

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

v

Kata Pengantar

Kepopuleran situs jejaring sosial saat ini sudah tidak bisa diragukan lagi. Bahkan bersinggungan dengan situs jejaring sosial seperti Facebook dan Twitter sudah menjadi aktivitas rutin sehari-hari banyak orang. Akan tetapi hal tersebut tidak sebanding dengan hadirnya buku yang membahas pembangunan situs jejaring sosial dari nol. Kebanyakan buku yang beredar dewasa ini hanya membahas bagaimana memodifikasi CMS menjadi sebuah situs jejaring sosial, bukan bagaimana membangun sebuah situs jejaring sosial dari nol dengan bahasa pemrograman, khususnya bahasa pemrograman PHP dan jQuery.

Oleh karena itu, buku ini hadir untuk mengajak para pembaca langsung mempraktekkan bagaimana membuat situs jejaring sosial dari nol, mulai dari perancangan database, login dan pendaftaran member, pembuatan fitur-fitur jejaring sosial seperti update status, update komentar, upload foto, sampai pengiriman pesan pribadi (private messaging), semua terangkum dalam buku ini.

Penulis menyadari masih banyak kekurangan disana sini dalam penulisan buku ini. Untuk itu, saran dan kritik membangun akan sangat berguna bagi penyempurnaan buku untuk edisi-edisi mendatang. Jadi, jangan sungkan untuk menghubungi penulis.

Depok, Mei 2012

Penulis

[email protected]

vi

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

vii

Daftar Isi

BAB 1. Teknik Dasar Pemrograman Jejaring Sosial....................................................1

1.1. Fitur Update Status.......................................................................................................2

1.1.1. Posting Status ala jQuery....................................................................................0

1.1.2. Hapus Posting Status ala jQuery.........................................................................3

1.2. Fitur Komentar Status...................................................................................................2

1.2.1. Posting Komentar pada Status ala jQuery...........................................................0

1.2.2. Hapus Komentar pada Status ala jQuery............................................................3

1.3. Fitur Embed Konten Video atau Foto ala jQuery.........................................................3

1.4. Fitur Upload dan Cropping Image ala jQuery..............................................................3

1.5. Fitur Paging Bergaya Facebook.............................................................................. ....5

1.6. Fitur Pencarian User ala jQuery.............................................................................. ..10

1.7. Fitur Sistem Pertemanan.............................................................................................12

1.7.1. Menambah Pertemanan.....................................................................................30

1.7.2. Menghapus Pertemanan....................................................................................33

BAB 2. Proyek Membuat Website Pertemanan...........................................................21

2.1. Perancangan Database................................................................................................22

2.2. Mempersiapkan Folder Proyek..................................................................................22

2.3. Login dan Registrasi.................................................................... ...............................23

2.4. Halaman User atau Member.......................................................................................23

2.4.1. Halaman Utama (Home)..................................................................................30

2.4.1.1 Update Status........................................................................................30

2.4.1.2 Hapus Status..........................................................................................30

2.4.1.3 Update Komentar,,................................................................................30

2.4.1.4 Hapus Komentar....................................................................................30

2.4.1.5 Paging Status.........................................................................................30

2.4.1.6 Pencarian Member.................................................................................30

viii

2.4.2. Halaman Profile.................................................................................................33

2.4.3. Halaman Upload Foto Profile...........................................................................30

2.4.4. Halaman Permintaan Teman.............................................................................33

2.4.5. Pesan Pribadi (Private Message)......................................................................30

2.4.6. Halaman Galeri Foto.........................................................................................33

2.4.7. Halaman List/Daftar Teman..............................................................................33

2.5. Halaman Administrator...............................................................................................24

BAB 3. Cara Menjalankan Website Pertemanan........................................................39

BAB I

Teknik Dasar Pemrograman Jejaring Sosial

2 Membuat Website Pertemanan dgn PHP & jQuery

Bab 1

Teknik Dasar Pemrograman Jejaring Sosial

Masih ingatkah Anda dengan situs jejaring sosial friendster, yang pernah digandrungi sekali sekitar tahun 2006 ke atas. Dulu, fitur layanan situs jejaring sosial friendster jelas-jelas sangat menghipnotis penggunanya di negeri ini. Mulai dari fitur berkirim pesan, mengisi testimoni, edit profile sampai mengubah tampilan (style css) dari halaman profile.

Semakin hari, fitur dan fasilitas situs jejaring sosial sejenis semakin canggih dan semakin memanjakan para penggunanya. Lihat saja facebook, situs yang didirikan oleh Mark Zuckerberg ini telah menjadi situs jejaring sosial nomor 1 di dunia, termasuk di Indonesia yang menjadi negara ke 3 terbesar di dunia yang menggunakannya. Adalah fitur Status dan komentar Update pada dinding (Wall) yang membuat situs ini terkenal dan banyak digemari. Selain itu, facebook juga memiliki fitur yang dilengkapi dengan AJAX Technology yang memungkinkan bagian tertentu dari sebuah halaman dapat di-update tanpa harus me-refresh /membuka kembali halaman itu. Fitur Chatting, Photo Tagging, Privacy Setting dan banyak lainnya menjadikan facebook berbeda dengan situs sejenis.

Dalam bab ini, saya akan membahas beberapa fitur yang sering kita temui dalam situs jejaring sosial seperti facebook, diantaranya Update Status, Komentar, Pesan (Messages), Pertemanan, Paging ala Facebook, Upload dan Resize Foto Profil dan fitur Pencarian Teman.

1.1 Fitur Update Status ala jQuery

1.1.1 Posting Status ala jQuery

Fitur ini memungkinkan kita mengetahui keadaan teman-teman kita tanpa harus bertemu/berkomunikasi langsung dengannya. Dengan fitur ini, kita dapat mengetahui kondisi dari banyak teman-teman kita dalam waktu yang sama dan kapan saja. Kita juga akan lebih tahu berita-berita terkini yang sedang ramai dibicarakan oleh teman-teman kita.

Untuk membuatnya, langkah pertama adalah membuat database yang berguna untuk menampung data status, silahkan ketik alamat http://localhost/phpmyadmin, buat database dengan nama jejaring dan nama tabelnya adalah status. Adapun struktur tabelnya sebagai berikut:

3Bab I. Teknik Dasar Pemrograman Jejaring Sosial

Struktur Tabel status

Langkah berikutnya, kita akan membuat file CSS yang mengatur tata letak (layout) halaman dari fitur Status yang akan kita buat.

Skrip style.css /* Style Status */#update {width:400px;font-size:12px;}

input,textarea {border:1px solid silver;background-color:#fff;color:#404040;font-size:12px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;font-family:”lucida grande”,tahoma,verdana,arial,sans-serif;font-size:12px;margin:3px 0;padding:3px;}

#wall_container {margin:0 auto;font-size:11px;background-color:#FFFFFF;width:520px;font-family:”lucida grande”,tahoma,verdana,arial,sans-serif;}

#flashmessage {border-bottom:dashed 1px #dedede;padding:5px;}

.stbody {margin-bottom:5px;border-bottom:dashed 1px #dedede;overflow:auto;background-color:#FFFF33;}

#updateboxarea {background-color:#FFFF00;

4 Membuat Website Pertemanan dgn PHP & jQuery

padding-left:5px;}

.sttext {min-height:30px;word-wrap:break-word;overflow:hidden;padding:5px;display:block;font-family:”lucida grande”,tahoma,verdana,arial,sans-seriffont-size:12px;width:500px;}

.stdelete {font-weight:bold;float:right;cursor:pointer;}

a:link {text-decoration:none;}

Selanjutnya, kita buat file PHP yang menghubungkan ke database jejaring yang telah kita buat sebelumnya.

Skrip db.php<?phpdefine(‘DB_SERVER’, ‘localhost’);define(‘DB_USERNAME’, ‘root’);define(‘DB_PASSWORD’, ‘’);define(‘DB_DATABASE’, ‘jejaring’);$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD);$database = mysql_select_db(DB_DATABASE);?>

File PHP berikutnya yang akan kita buat adalah halaman utama website yang biasanya bernama index.php. Perhatikan skrip berikut:

Skrip index.php<html><head><title>Membuat Status Jejarig Sosial</title><link href=”style.css” rel=”stylesheet” type=”text/css”><script type=”text/javascript” src=”jquery.1.4.2.min.js”></script><script type=”text/javascript” src=”update.js”></script></head><body><div id=”wall_container”><div id=”updateboxarea”><h2>Tulis Statusmu ..! </h2><textarea cols=”30” rows=”4” name=”update” id=”update”></textarea><input type=”submit” value=”Update” id=”update_button” />

5Bab I. Teknik Dasar Pemrograman Jejaring Sosial

</form></div><div id=”flashmessage”><div id=”flash” align=”left”></div></div><div id=”status”><?php include(‘buka_status.php’); ?></div></div></body></html>

Penjelasan Skrip:

Yang perlu diperhatikan adalah nama elemen yang akan kita kirimkan variabelnya ke jquery, yaitu elemen yang memiliki id elemen, seperti id=update pada elemen textarea, id=update_button pada elemen input type, id=flash dan id=status pada elemen div.

Pada file index.php, kita juga menyertakan file php lain yaitu buka_status.php yang berfungsi untuk menampilkan status-status yang sudah tersimpan di database.

Skrip buka_status.php<?phpinclude_once ‘db.php’;

$query = mysql_query(“SELECT * FROM status ORDER BY id_status DESC”);

while($row=mysql_fetch_array($query)){ $id_status=$row[‘id_status’]; $status=$row[‘status’];?>

<div class=”stbody” ><div class=”sttext”><?php echo $status; ?> </div></div>

<?php } ?>

Masih pada file index.php. Perhatikan pada bagian tag head, kita menyertakan file jquery.1.4.2.min.js (library jquery), file style.css (file css yang telah kita buat sebelumnya) dan file jquery bernama update.js yang akan kita buat berikutnya.

Skrip update.js$(document).ready(function() {// Update Status$(“#update_button”).click(function() {var updateval = $(“#update”).val();var dataString = ‘update=’+ updateval;if(updateval==’’) { alert(“Status Harus Di isi”);}

6 Membuat Website Pertemanan dgn PHP & jQuery

else { $(“#flash”).show(); $(“#flash”).fadeIn(400).html(‘Loading Update...’); $.ajax({ type: “POST”, url: “status_ajax.php”, data: dataString, cache: false, success: function(html) { $(“#flash”).fadeOut(‘slow’); $(“#status”).prepend(html); $(“#update”).val(‘’); $(“#update”).focus(); } });}return false;});});

Penjelasan Skrip:

Saat kita mengklik tombol Update (id=update_button) pada halaman index.php, maka nilai id=update pada halaman index.php akan kita buatkan variabelnya bernama updateval. Kemudian kita buatkan variabel dataString untuk menampung data pada variabel updateVal. Jika updateVal kosong, maka jquery akan mengirimkan pesan “Status Harus Di isi”.

Selanjutnya, data akan diambil lewat ajax, dan memanggil file “status_ajax.php”. Jika Data Sukses diambil lewat ajax, maka pada halaman index.php, div yang ber-id flash akan kita hilangkan dengan efek fadeOut, div yang ber-id status diberikan aksi prepend (memasukan elemen pada bagian awal elemen, pada hal ini status terakhir yang ditulis akan berposisi paling atas pada index.php), lalu akan mengosongkan textarea yang ber-id update dan fokus kursor pada elemen tersebut.

Pada file update.js terdapat baris kode url: “status_ajax.php” , artinya kita harus membuat file tersebut.

Skrip status_ajax.php<?phpinclude_once ‘db.php’;if(isSet($_POST[‘update’])){ $update = $_POST[‘update’]; $query = mysql_query(“INSERT INTO `status` (status) VALUES (‘$update’)”); $query = mysql_query(“SELECT * FROM status ORDER BY id_status DESC”);

$row=mysql_fetch_array($query);

$id_status=$row[‘id_status’]; $status=$row[‘status’];

7Bab I. Teknik Dasar Pemrograman Jejaring Sosial

?><div class=”stbody” id=”stbody<?php echo $id_status; ?>”> <div class=”sttext”> <?php echo $status; ?> </div></div>

<?php } ?>

Penjelasan Skrip:

Skrip status_ajax.php berfungsi untuk menyimpan data status dan menampilkan data status terakhir yang dimasukkan pada bagian index.php.

Untuk memudahkan, simpanlah semua file yang telah kita buat diatas (index.php, style.css, update.js, jquery-1.4.2.min.js, buka_status.php dan status_ajax.php) dalam sebuah folder bernama status.

Sekarang kita akan mengujinya di browser, ketikkan http://localhost/status/, maka akan tampil hasilnya seperti pada gambar 1.1.

Gambar 1.1 Fitur Posting Status ala jQuery

8 Membuat Website Pertemanan dgn PHP & jQuery

Untuk mengujinya lebih lanjut, silahkan Isi status di form textArea, lalu klik tombol Update, maka hasilnya akan langsung ditampilkan dibawahnya (tanpa berpindah halaman dan tanpa Refresh).

1.1.2 Hapus Posting Status ala jQuery

Setelah kita berhasil membuat posting status, idealnya status yang sudah tertulis pun bisa kita hapus. Nah, untuk membuat status bisa dihapus tanpa me-load halaman dengan jQuery, mari simak pembahasannya.

Untuk menghapus status, kita akan sedikit modifikasi skrip-skrip posting status yang telah kita buat pada sub-bab 1.1.1 dan menambahkan satu file lagi bernama hapus_ajax.php.

Oke, pertama yang akan kita modifikasi adalah file buka_status.php, perhatikan kode yang ditebalkan.

Skrip buka_status.php (modifikasi untuk fitur hapus Status)<?phpinclude_once ‘db.php’;

$query = mysql_query(“SELECT * FROM status ORDER BY id_status DESC”);

while($row=mysql_fetch_array($query)){ $id_status=$row[‘id_status’]; $status=$row[‘status’];?>

<div class=”stbody” id=”stbody<?php echo $id_status; ?>”><div class=”sttext”><a class=”stdelete” href=”#” id=”<?php echo $id_status; ?>” title=”Delete Update”> X </a><?php echo $status;?> </div></div><?php }?>

Penjelasan Skrip:

Pada kode yang kita tambahkan, kita akan membuat tanda X sebagai link untuk menghapus, dimana link X tersebut dibuatkan id dengan nilai id adalah field id_status, dimana nilai id akan dikirimkan ke jQuery untuk proses penghapusan.

Selanjutnya, file yang harus dimodifikasi adalah file update.js, perhatikan kode yang ditebalkan.

Skrip update.js (modifikasi untuk fitur hapus Status)$(document).ready(function() {// Update Status$(“#update_button”).click(function() {

9Bab I. Teknik Dasar Pemrograman Jejaring Sosial

var updateval = $(“#update”).val();var dataString = ‘update=’+ updateval;if(updateval==’’) { alert(“Status Harus Di isi”);}else { $(“#flash”).show(); $(“#flash”).fadeIn(400).html(‘Loading Update...’); $.ajax({ type: “POST”, url: “status_ajax.php”, data: dataString, cache: false, success: function(html) { $(“#flash”).fadeOut(‘slow’); $(“#status”).prepend(html); $(“#update”).val(‘’); $(“#update”).focus(); } });}return false;});

// Hapus Status$(‘.stdelete’).live(“click”,function() {var ID = $(this).attr(“id”);var dataString = id_status=’+ ID;

if(confirm(“Apakah Anda yakin akan menghapus Status? “)){$.ajax({type: “POST”,url: “hapus_status.php”,data: dataString,cache: false,success: function(html){$(“#stbody”+ID).slideUp(); } });}return false;});

});

Penjelasan Skrip:

Maksud dari kode yang ditambahkan adalah ketika kita mengklik .stdelete dalam hal ini stdelete adalah nama class dari link X, maka akan dibuatkan variabel id dengan nilai id adalah field idstatus. Kemudian variabel tersebut kita buatkan variabel stringnya dengan nama dataString. Sebelum proses ajax, kita buatkan pesan penghapusan, “Apakah Anda yakin akah menghapus status???!!”. Jika iya, maka proses penghapusan dengan

10 Membuat Website Pertemanan dgn PHP & jQuery

memanggil file “hapus_status.php” akan dijalankan dan pada div stbody akan diberikan efek slideUp saat proses hapus berhasil dilakukan.

Dan terakhir, kita akan membuat file baru dengan nama hapus_status.php yang berfungsi untuk menghapus data status dari tabel status berdasarkan id_status yang di-klik oleh user.

Skrip hapus_status.php<?phpinclude_once ‘db.php’;

if(isSet($_POST[‘id_status’])){$id_status=$_POST[‘id_status’];$query = mysql_query(“DELETE FROM `status` WHERE id_status = ‘$id_status’”);}?>

Sekarang kita akan mengujinya di browser, ketikkan http://localhost/status/. Untuk mencobanya, silahkan klik salah satu link bertanda X pada salah satu Status, maka akan tampil kotak dialog seperti pada gambar 1.2.

Gambar 1.2 Fitur Hapus Posting Status ala jQuery