Login Tunggal pada Berbagai Social Chat: Studi Kasus Twitter

Login Tunggal pada Berbagai Social Chat: Studi Kasus Twitter

Marvin Chandra Wijaya Fakultas Teknik, Universitas Kristen Maranatha, Bandung

Abstract At this time a person already has a lot of accounts on cloud computing. Social Chat such as facebook, twitter; email account such as Gmail, Microsoft Exchange - EWS, Microsoft Exchange IMAP, Office 365, Microsoft Exchange - Active sync; storage files such as Evernote, SkyDrive, Google Drive, Dropbox, Box is already widely used by people. With many accounts, it would appear the confusion when log in (fill in the username and password), so we need a single sign on for various accounts. By using a single login, user only need to remember one username and one password. Application uses open source program like XAMPP: Apache for web server, PHP for programming adan MYSQL for database. Keywords: cloud computing, single sign on, facebook

I.

Pendahuluan

1.1 Latar Belakang Berbagai akun yang dimiliki dalam internet baik berupa social chat (seperti : facebook, twitter, dll), email account (seperti : Gmail, Microsoft Exchange, dll), media penyimpanan dalam dunia intenet (seperti : SkyDrive, Google Drive, Dropbox, Box, dll) dapat membuat pengguna kewalahan sewaktu login (mengisikan username dan password), karena harus menghapal cukup banyak username dan password pada setiap akun1. Setiap akun memiliki alamat website yang berbeda-beda. Sebagai contoh untuk facebook menggunakan alamat URL www.facebook.com dan untuk twitter memiliki alamat URL www.twitter.com. Sehingga pengguna harus menghafal dan mengingat setiap alamat yang ada. Dengan adanya alamat tunggal maka dapat mempermudah setiap penggunaan dalam pembukaan setiap alamat karena cukup menggunakan satu alamat URL saja. Penggunaan satu alamat email dan dan membuat satu akun tunggal yang dapat mengakses beberapa akun pada beberapa tempat dapat mempermudah proses login. Selain itu dengan menggunakan satu alamat web terintegrasi maka dimungkinkan unutuk mengakses beberapa situs dalam suatu halaman (page) dalam satu situs yang sama.

1

6

Iwan Sofana, Cloud Computing – Teori, Praktek, CV. Informatika, 2012

Single Sign On pada Cloud Computing: Studi Kasus Twitter (Marvin Chandra Wijaya)

Gambar 1. Setiap orang memiliki banyak aplikasi dalam dunia internet Sumber : Dokumen Pribadi

Dalam sistem single sign on, setiap pengguna melakukan login pada satu server yang disebut dengan identity server. Setelah pengguna terindetifikasi oleh identity server tersebut, pengguna tersebut dapat mengakses akun pada server yang lain tanpa memasukkan username dan password kembali. Dengan tidak diperlukannya memasukkan username dan password berulang kali di beberapa situs.

Gambar 2. Menggunakan satu akun tunggal. Sumber : Dokumen Pribadi 7

Zenit Volume 2 Nomor 1 April 2013

1.2 Rumusan Masalah Berdasarkan latar belakang yang ada, dapat dirumuskan beberapa pokok permasalahan yang akan dianalisis dan dikaji :  Bagaimana membuat koneksi dengan server provider seperti twitter, facebook dan lainnya menggunakan satu akun ?  Bagaimana pengambilan data dari server provider seperti twitter, facebook dan lainnya menggunakan satu akun ?

1.3 Tujuan Berdasarkan rumusan masalah yang ada, dapat diarahkan tujuan pembahasan adalah sebagai berikut :  Membuat koneksi dengan server provider seperti twitter, facebook dan lainnya menggunakan satu akun.  Membuat aplikasi pengambilan data dari server provider seperti twitter, facebook dan lainnya menggunakan satu akun.

1.4 Batasan Masalah Berdasarkan tujuan pembahasan yang dibuat, aspek-aspek yang menjadi pembatasan masalah adalah :  Aplikasi yang dihasilkan berbasis web.  Aplikasi yang dihasilkan mampu melakukan koneksi dengan dua server provider pada saat yang bersamaan.  Aplikasi dibuat dengan menggunakan XAMPP. 2. METODE PENELITIAN Teknologi Single-sign-on (sering disingkat menjadi SSO) adalah teknologi yang mengizinkan pengguna jaringan agar dapat mengakses sumber daya dalam jaringan hanya dengan menggunakan satu akun pengguna saja. Teknologi ini sangat diminati, khususnya dalam jaringan yang sangat besar dan bersifat heterogen (di saat sistem operasi serta aplikasi yang digunakan oleh komputer adalah berasal dari banyak vendor, dan pengguna dimintai untuk mengisi informasi dirinya ke dalam setiap platform yang berbeda tersebut yang hendak diakses oleh pengguna). Dengan menggunakan SSO, seorang pengguna hanya cukup melakukan proses autentikasi sekali saja untuk mendapatkan izin akses terhadap semua layanan yang terdapat di dalam jaringan. Selain mendatangkan manfaat, SSO juga dapat mendatangkan bencana. Dari cara pandang seperti ini, beberapa pengamat memperkirakan bahwa penggunaan SSO dapat menghemat biaya untuk memelihara password yang rumit yang dapat mencapai ratusan dolar setiap pengguna tiap tahun. 2

2

8

Elcom, Cloud computing, Andi Publisher, 2012


Gambar 3. Single Sign On

2.1. Twitter Twitter adalah sebuah situs web yang dimiliki dan dioperasikan oleh Twitter Inc., yang menawarkan jejaring sosial berupa mikroblog sehingga memungkinkan penggunanya untuk mengirim dan membaca pesan yang disebut kicauan (tweets). Kicauan adalah teks tulisan hingga 140 karakter yang ditampilkan pada halaman profil pengguna. Kicauan bisa dilihat secara luar, namun pengirim dapat membatasi pengiriman pesan ke daftar teman-teman mereka saja. Pengguna dapat melihat kicauan penulis lain yang dikenal dengan sebutan pengikut ("follower"). Semua pengguna dapat mengirim dan menerima kicauan melalui situs Twitter, aplikasi eksternal yang kompatibel (telepon seluler), atau dengan pesan singkat (SMS) yang tersedia di negaranegara tertentu. Situs ini berbasis di San Bruno, California dekat San Francisco, situs ini pertama kali dibuat. Twitter juga memiliki server dan kantor di San Antonio, Texas dan Boston, Massachusetts. Sejak dibentuk pada tahun 2006 oleh Jack Dorsey, Twitter telah mendapatkan popularitas di seluruh dunia dan saat ini memiliki lebih dari 100 juta pengguna. Hal ini kadang-kadang digambarkan sebagai "SMS dari internet". Twitter memiliki logo berupa seekor burung berwarna biru yang bernama "Larry the "Bird", dinamai setelah nama seorang mantan pemain basket NBA, Larry Bird.3

Twitter adalah merupakan salah satu dari 10 situs web yang paling sering dikunjungi di seluruh dunia oleh Alexa trafik web analisis. Februari 2009 Compete.com blog entry mengatakan bahwa Twitter berada di tingkat ketiga sebagai situs yang digunakan jaringan sosial berdasarkan jumlah pengunjung bulanan sebanyak 6 juta pengunjung. Pada bulan Maret 2009, Nielsen.com blog menyatakan Twitter sebagai situs yang tumbuh tercepat--dalam kategori Komunitas Anggota. Twitter memiliki pertumbuhan bulanan sebesar 1.382%, meningkat dari 475.000 pengunjung pada Februari 2008 menjadi 7 juta pada Februari 2009. Kurang dari setengah kicauan yang dikirim-tampil menggunakan web, sedangkan sebagian besar pengguna menggunakan aplikasi pihak ketiga (berdasarkan analisis 500 juta kicauan oleh Sysomos). Ada banyak alat atau aplikasi dari twitter. Beberapa di antarnya adalah aplikasi TweetDeck, Salesforce.com, HootSuite, Twitterfeed, UberSocial, Snaptu, TweetWawa, SnapTwit, SimpleTweet, Gravity 3

_ ,” http://id.wikipedia.org/wiki/Twitter” 9


2.2. Twitter developer Fungsi yang dimiliki oleh twitter developer untuk para pembuat aplikasi adalah dengan menggunakan twitter cards. Twitter cards memiliki beberapa fungsi, yaitu :

1.

2.

3.

4.

5. Contoh pada twitter card, dihasilkan :

Gambar 4: Contoh dari twitter card dihasilkan Sumber : https://dev.twitter.com/docs/cards Tabel 1. Meta tag pada twitter cards 10


Sumber : https://dev.twitter.com/docs/cards/markup-reference Property

Card

Value

OpenGraph Fallback

twitter:card

all

summary, photo, gallery, product, app, player

twitter:site

summary, photo, gallery, product, app, player

@username of website

twitter:site:id

summary, photo, gallery, product, player

Same as twitter:user, but the user's Twitter ID

twitter:creator


@username of content creator

twitter:creator:id


Twitter user ID of content creator

twitter:description

summary, gallery, Description of content (maximum og:description product, player 200 characters)

twitter:title


Title of content (max 70 characters)

og:title

twitter:image

summary, photo, product, player

URL of image to use in the card

og:image

twitter:image:width


Width of image in pixels

og:image:width

twitter:image:height


Height of image in pixels

og:image:height

twitter:image0, twitter:image1, twitter:image2, and twitter:image3

gallery

1st, 2nd, 3rd, and 4th image in the gallery, respectively

twitter:player

player

HTTPS URL of player iframe

twitter:player:width

player

Width of iframe in pixels

twitter:player:height

player

Height of iframe in pixels

twitter:player:stream

player

URL to raw video or audio stream

twitter:data1

product

Top customizable data field, can be a relatively short string (ie "$3.99")

twitter:label1

product

Customizable label or units for the information in twitter:data1 (best practice: use all caps)

twitter:data2

product

Bottom customizable data field, can be a relatively short string (ie "Seattle, WA")

twitter:label2

product

Customizable label or units for the information in twitter:data1 (best practice: use all caps)

twitter:app:name:iphone

all

Name of your iPhone app

twitter:app:id:iphone

all

Your app ID in the iTunes App Store (Note: NOT your bundle ID) 11


Property

Card

Value

twitter:app:url:iphone

all

Your app's custom URL scheme (you must include "://" after your scheme name)

twitter:app:name:ipad

all

Name of your iPad optimized app

twitter:app:id:ipad

all

Your app ID in the iTunes App Store

twitter:app:url:ipad

all

Your app's custom URL scheme

twitter:app:name:googleplay

all

Name of your Android app

twitter:app:id:googleplay

all

Your app ID in the Google Play Store

twitter:app:url:googleplay

all

Your app's custom URL scheme

Contoh pada twitter timelines adalah :

Gambar 5. Contoh Embedded timelines Sumber : https://dev.twitter.com/docs/embedded-timelines

Contoh pada embedded tweet :

Gambar 6. Contoh Embeded Tweet Sumber : https://dev.twitter.com/docs/embedded-tweets

12

OpenGraph Fallback


Maka hasil dari embedded tweet adalah :

Gambar 7. Hasil dari embedded tweet Sumber : https://dev.twitter.com/docs/embedded-tweets 2.3 XAMPP Banyak sekali bahaas pemograman yang dapat dipelajari untuk membangun sebuah aplikasi berbasis web. Mulai dari HTML, XML, Perl, CGI Script, Java Script, Java Servets, ASP, PP dan lain sebagainya. Sedangkan database yang digunakan pun bervariasi mulai dari Microsoft Access, SQL Server, MySQL dan lain-lain. Tetapi kebanyakan dar program dan database di atas berdiri sendiri sebagai sebuah perangkat lunak, sehingga menyulitkan proses intalasi dan aktivasi, jika akan digunakan secara terintegrasi. J Wynia, seorang ahli pemograman web server side berkebangsaan Czech menciptakan perangkat lunak yang berisi tiga paket utama untuk keperluan pemograman web server side yang disebut PHP Triad. PHP Triad terdiri atas “APACHE” yang menjalankan fungsi sebagai web server, “PHP” sebagai bahasa pemograman berbasis web (web programming) dan “MYSQL” untuk keperluan pengelolaan data berbasis web (web database). Sesuai dengan perkembangannya nama PHP Triad berubah menjadi XAMPP. XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket.Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi. Versi XAMPP yang ada saat ini adalah Versi 1.4.14 atau yang terbarunya anda bisa diunduh pada http://www.apachefriends.org/en/xampp-window.html. Software XAMPP versi ini terdiri atas: a. Apache b. MySQL c. PHP d. phpMyAdmin 2.3.1. APACHE Apache sudah berkembang sejak versi pertamanya. Apache bersifat open source, artinya setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode programnya. Apache berfungsi menghasilkan halaman web yang benar untuk pengguna, berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan. 2.3.2. PHP Bahasa pemrograman PHP merupakan bahasa pemrograman untuk mebuat web yang bersifat server-side scripting. PHP memungkinkan untuk membuat suatu halaman web yang bersifat dinamis. PHP dapat dijalankan pada berbagai macam Operating System (OS), misalnya Windows, Linux dan

13


Mac OS.Selain Apache, PHP juga mendukung beberapa web server lain, misalnya Microsoft IIS, Caudium, PWS dan lain-lain. PHP dapat memanfaatkan database untuk menghasilkan halaman web yang dinamis. Sistem manajemen database yang sering digunakan bersama PHP adalah MySQL. Namun PHP juga mendukung sistem menajamen database lainnya seperti Oracle, Microsoft Acces, Interbase, d-Base, PostgreSQL dan sebagainya. Sama dengan web server lainnya PHP juga bersifat open source sehingga setiap orang dapat menggunakannya dengan gratis.

2.3.3. MySQL SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang khusus digunakan untuk mengolah database.SQL pertama kali didefinisikan oleh American National Standards Institute (ANSI) pada tahun 1986. MySQL adalah sebuah sistem manajemen database yang bersifat open source. MySQL dapat digunakan untuk membuat dan mengola database beserta isinya. MySQL dapat dimanfaatkan untuk menambahkan, mengubah dan menghapus data yang berada dalam database. MySQL dapat digunakan untuk mengelola database mulai dari yang kecil sampai dengan yang sangat besar. MySQL juga dapat menjalankan perintahperintah Structured Query Language (SQL) untuk mengelola database-database yang ada di dalamnya.

2.3.4. PHPMyAdmin Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Selain dengan mengetikan setiap baris perintah query-nya, maka dapat juga menggunakan phpMyadmin untuk mempermudah manipulasi database. Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin dapat membuat tabel, mengisi data dan lain-lain dengan mudah tanpa harus hafal perintahnya. Untuk mengaktifkan phpMyAdmin langkah-langkahnya adalah : yang pertama setelah XAMPP terinstall, maka harus mengaktifkan web server Apache dan MySQL dari control panel XAMPP. Yang kedua, jalankan browser (IE, Mozilla Firefox atau Opera) lalu ketikkan alamat web berikut : http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak interface (tampilan antar muka) phpMyAdmin dapat dimulai dengan mengetikkan nama database, nama tabel dan seterusnya.

3. HASIL DAN PEMBAHASAN 3.1 Perancangan Adapun langkah-langkah cara kerja website yang dibuat adalah :  Halaman Pembuka  Halaman Login  Halaman Pendaftaran anggota baru / registrasi  Halaman Utama setelah login  Halaman untuk setting  Halaman untuk menampilkan facebook, chat, dan lain-lain. Sehingga dalam pembuatan program ini diperlukan juga database untuk kebutuhan data anggota (master) dan juga data anggota (detail) yang berisi setting ataupun aktivitas dari setiap anggotanya. 14


3.2 Coding Pada bagian ini akan dibahas beberapa bagian dari coding yang dibuat. Adapu coding yang dibuat untuk setiap halaman website cukup banyak, disini akan ditampilkan beberapa bagian coding yang penting yang berkaitan dengan koneksi dengan twitter. 

Pada penggunaan embedded timelines diperlukan iframe seperti di bawah ini :

Tweets by $email <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt p':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertB efore(js,fjs);}}(document,"script","twitter-wjs"); 

Pada pembuatan tweet button diperlukan tag seperti di bawah ini : 1.

Tweet 2. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.cr eateElement(s);js.id=id;js.src="https://platform.twitter.com/widgets. js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter -wjs");



Pada pembuatan follow button diperlukan tag seperti di bawah ini : 1.

Follow @twitterapi 2. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.cr eateElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fj s.parentNode.insertBefore(js,fjs);}}(document,"script","twitterwjs");

3.2 Hasil Tampilan Pada saat web dibuka maka akan muncul homepage seperti di bawah ini. Pengguna dapat memasukkan username dan password untuk Single Sign ON, atau membuat username baru :

15


Gambar 8. Halaman Pembuka / login Sumber : Dokumen Pribadi Pengguna dapat mendaftarkan akun-akun pada facebook, twitter dan lain sebagainya :

Gambar 9. Pendaftaran Akun Sumber : Dokumen Pribadi

Pada gambar di bawah ini adalah contoh ketika twitter dibuka.

Gambar 10. Twitter Sumber : Dokumen Pribadi Pada contoh di bawah ini adalah ketika hendak melakukan twit :

16


Gambar 11. Twit Sumber : Dokumen Pribadi

Gambar di bawah ini contoh ketika login ke facebook. Dalam gambar tersebut diperlihatkan contoh dalam satu page, dapat terkoneksi ke twitter dan facebook secara bersamaan.

Gambar 12. Facebook Sumber : Dokumen Pribadi

4. SIMPULAN Pembuatan koneksi ke berbagai akun telah berhasil dilakukan. Dalam satu page yang sama juga dapat terkoneksi ke beberapa akun berbeda secara bersamaan. Hanya saja perlu adanya pengaturan lebih lanjut dan lebih baik lagi dalam pengorganisasian akun.

DAFTAR PUSTAKA 1. 2. 3. 4. 5. 6. 7.

Iwan Sofana, Cloud Computing – Teori, Praktek, CV. Informatika, 2012 Elcom, Cloud computing, Andi Publisher, 2012 _ , http://id.wikipedia.org/wiki/Facebook Twitter, https://dev.twitter.com/docs/cards Twitter, https://dev.twitter.com/docs/embedded-timelines Twitter, https://dev.twitter.com/docs/embedded-tweets Twitter, https://dev.twitter.com/docs/cards/markup-reference

17

Login Tunggal pada Berbagai Social Chat: Studi Kasus Twitter

Recommend Documents