Snippet Programming Code: JQuery

Banyak orang yang diuntungkan dengan hadirnya facebook, selain sebagai media sosial facebook juga banyak sekali digunakan untuk bermacam-macam kepentingan, seperti halnya periklanan, pengembangan, ataupun sarana yang lainnya. Untuk kali ini penulis ingin berbagi tentang layanan facebook yang bisa kita ambil keuntungannya, yaitu adalah Login Facebook API. Singkatnya adalah, kita menggunakan authentifikasi user dengan mengambil login dari facebook untuk aplikasi web yang kita buat, jadi kita tidak usah repot-repot membuat database user untuk menyimpan data detail user diaplikasi kita. langkahnya sebagai berikut :

1. Login terlebih dahulu di https://developers.facebook.com
2. Menuju ke menu App dan daftarkan sebagai developer
3. Buat aplikasi baru dengan klik create new app, isi appication name

Create New App

4. Setelah itu akan muncul dashboard dari application yang kita daftarkan, beserta ID dan kode rahasianya pada dashboard ada beberapa yang harus kita isi secara benar, yaitu adalah "App Domain" dan "Website With Facebook Login". Isi keduanya dengan domain dimana aplikasi web kita berada, misalnya "http://localhost/FB-API/index.html" nanti secara otomatis akan menjadi "localhost".

Dashboard Facebook Appication

5. langkah selanjutnya adalah menyiapkan halaman login tersebut. didalam contoh yang kita masukan adalah ada pada index.html

untuk kode HTML-nya :

<html>
<head>

<!-- load main library JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- load facebook API -->
<script src="//connect.facebook.net/en_US/all.js"></script>

</head>
<body>

<!-- facebook button -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>;

</body>
</html>

dan untuk kode javascript-nya :

<!--javascript untuk authentifikasi aplikasi kita dengan aplikasi yang di daftarkan di facebook-->
<script>
//load SDK facebook-nya
(function(d){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
}(document));

//initialize awal dan pengecekan ID applikasi
window.fbAsyncInit = function() {
 FB.init({
 appId : 'xxxxxxxxxxxxxxx', // App ID
 channelUrl : 'http://localhost/FB-API/index.html', // Channel
 Filestatus : true, // cek login
 statuscookie : true, // enable cookies to allow the server to access the
 sessionxfbml : true // parse XFBML
 });

 //kondisi authentifikasi apabila user terdaftar atau tidak 
 FB.Event.subscribe('auth.authResponseChange', function(response) {
 //status apabila sudah valid atau belum
 if (response.status === 'connected') {
  //fungsi setelah login valid
  testAPI();
 } else if (response.status === 'not_authorized') {
  FB.login();
 } else {
  FB.login();
 }
 });
};

//fungsi setelah login valid
function testAPI() {
 console.log('Welcome! Fetching your information.... ');
 FB.api('/me', function(response) {
  console.log('Good to see you, ' + response.name + '.');
 });
}
</script>

6. Lalu save, apabila aplikasi berhasil maka button login dari facebook akan muncul di aplikasi kita

Facebook Login Button

Facebook Login form popup

Success facebook login

HTML 5 sudah menyediakan layanan untuk audio player, dimana kita dapat membuat suatu player dengan mudah di website kita sendiri, selain itu kita juga dapat mengkontrol dengan bantuan Jquery, beriukut ini adalah contoh kodenya :

<html>

<head>

<title>KodeKodeKode Player</title>

<style>

.player-doom{

width: 300px;

height: 30px;

background-color: rgb(22, 21, 21);

border-radius: 6px;

}

.audioplayer{

display: inline-block;

float: left;

}

.player-rewind,.player-pref,.player-next,.player-shuffle{

display: inline-block;

float: left;

width: 21px;

height: 20px;

background-color: white;

margin-left: 10px;

margin-top: 5px;

}

</style>

$(document).ready(function(){

var index = 0

//buat daftar object yang berisikan judul lagu yang akan di masukan ke playlist

//path disini adalah alamat lagu yang kita simpan

var trackList = [{path : "Catapult.mp3"},

{path : "R U Mine.mp3"},

{path : "Baby Im Yours.mp3"}]

var musicBox = $('#audioplayer').bind('play', function() {

//fungsi apabila tombol play di tekan

playing = true;

}).bind('pause', function() {

//fungsi apabila tombol pause di tekan

playing = false;

}).bind('ended', function() {

//fungsi shuffle apa blia lagu telah habis

var randomNum = Math.ceil(Math.random()*trackList.length) - 1;

$('#audioplayer')[0].pause();

$('#audioplayer').attr("src", trackList[randomNum].path);

$('#audioplayer')[0].play();

index = randomNum;

console.log(trackList[randomNum].path)

}).get(0)

//set apabila playlist di tekan, mengambil judul lagu yang di tekan, class "song"

$(".song").click(function(){

var text = $(this).text();

$('#audioplayer')[0].currentTime = 0;

$('#audioplayer').attr("src", text + '.mp3');

$('#audioplayer')[0].play();

})

</script>

</head>

<body>

browser kamu tidak support elemen audio

</audio>

</div>

<!-- playlist kita sediakan dengan class "song" maka

apabila di tekan jquery pergantian lagu berdasarkan judul akan terjadi-->

<div class="song">Catapult</div>

</body>

</html>

Snippet Programming Code

Menu

Friday, 18 October 2013

Login With Facebook API In Our Web Application

Saturday, 5 October 2013

Create Audio Player With HTML 5 And Jquery