Membuat sistem Login dan pendaftaran website menggunakan akun facebook

TUTORIAL PINDAH DI SINI LEBIH POWERFULL DAN TERBARU

Demodownload

Kita ketahui persaingan social network kali ini di dominasi oleh facebook setelah meninggalkan berkilo-kilo meter social network seperti Friendster jauh di belakangnya, hal ini membuat situs-situs lainnya membuat pembaruhuan demi eksitensinya di dunia maya dengan memasang sebuah plugin yang memudahkan pengunjung untuk mendaftarkan dirinya pada situs tersebut maka di instal-lah plugin pendaftaran menggunakan akun facebook untuk pengambilan data dari database facebook ke database pribadi situs  tersebut seperti username, email, password dan lain-lain melalui kebijakan API FACEBOOK

Dengan itu memungkinkan kita untuk membuat pendaftran pada website pribadi dengan akun facebook pengunjung, 'so' situs yang kita kelola akan lebih mengikuti perkembangan zaman dan lebih mudah dalam langkah-langkah pengunjung untuk melakukan login dan pendaftaran. selain itu para webmaster atau pengelola situs akan mendapatkan data yang valid sesuai data dari database facebook

contoh website yang sudah berintgrasi dengan pendaftaran facebook :

1. http://www.histats.com/
2. http://beta.photobucket.com/
3. dan masih banyak yang lainnya

jadi bagi anda-anda yang sudah mempunyai website dan mau menggunakan layanan dari facebook ini untuk menjadikan plugin pendaftarannya menggunkan akun facebook silah kan baca tutorial ini

hal yang paling di butuhkan adalah pemahaman tentang php , database mysql dan java script, bila] belum paham, bisa belajar untuk membuat aplikasi chat dengan php dan mysql karena pada tutorial tersebut bila anda berhasil membangun aplikasinya, otomatis anda akan paham tentang keseluruhan cara kerja php dengan database dan java script,

coution: saya tidak menyarankan menjalankan aplikasi ini pada localhost, maka dari itu anda memerlukan webhosting untuk menjalankan dan mempraktekannya

ok kita lanjut

download dulu folderzipnya disini
upload ke webhosting anda dan extrak sehingga menampilkan seperti ini

 setelah itu masuk ke phpmy admin dan import table

-- phpMyAdmin SQL Dump
-- version 3.4.11.1
-- http://www.phpmyadmin.net
--
-- Inang: localhost
-- Waktu pembuatan: 01 Nov 2012 pada 00.54
-- Versi Server: 5.1.65
-- Versi PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `icarahip_c`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `daftarfb`
--

CREATE TABLE IF NOT EXISTS `daftarfb` (
  `id` int(250) NOT NULL AUTO_INCREMENT,
  `username` text NOT NULL,
  `email` text NOT NULL,
  `facebook_id` text NOT NULL,
  `join_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data untuk tabel `daftarfb`
--

INSERT INTO `daftarfb` (`id`, `username`, `email`, `facebook_id`, `join_date`) VALUES
(1, 't.saddam', '', '1525835474', '2012-10-30'),
(2, 'carahipnotis.net', '', '100000301388746', '2012-10-30'),
(3, 'carahipnotisdotnet', '', '100001952779079', '2012-10-30');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

setelah itu ikuti langkah-langkah di bawah ini

• langkah 1

Membuat aplikasi facebook facebook, http://www.facebook.com/developers/createapp.php bila sudah ada simpan key dan kode rahasianya
bila belum klik create new app

isi "app name" dengan nama aplikasi anda
app namespace judul aplikasi anda
tidak perlu chek list "webhosting"

lalu lanjutkan

setelah itu
yang berkolom merah

APP id adalah aplikasi id nya
App secret adalah id rahasianya

kedua kode tersebut yang nantinya akan kita pastekan pada bagian-bagian tertentu di php script
untuk form 

dan untuk site url pada website with facebook login adalah halaman pengembalian dan tempat semua data dari facebook di proses ke sistem database mysql kita
misalnya

http://www.namasituskamu.com/nama-folder/facebook_auth.php

• langkah 2

selanjuntnya mengganti seluruh app id , app secret dan url pada tiap tiap file,
kita mulai dengan file index.php

 <h4>Hello sobat!</h4>
              </div>

              <a href="https://www.facebook.com/dialog/oauth?client_id=1236111xxxxxx48&redirect_uri=http://i.carahipnotis.net/pendaftaranfb/facebook_auth.php&scope=publish_stream" title="Signup with facebook">
                <button class="btn btn-primary">Signup with facebook</button>
              </a>
    
            </div>

yang berwarna merah adalah

•  app id anda yang anda dapatkan saat mendaftar aplikasi facebook

•  redirect_uri sebagai halaman kembalian setelah diarahkan ke facebook dan melakukan perizinan  akses foto nama dll. nah di halaman ini akan di lakukan proses input dengan php ke database sistem

lalu pada halaman facebook_auth.php 

$code = $_GET['code'];

$app_id = "12xxxx11184459948";
$app_secret = "5e07e5b18756xxxxa9204bbe520b25b";
$my_url = "http://i.carahipnotis.net/pendaftaranfb/facebook_auth.php";

ganti semua  yang berwarna merah dengan data anda

nah sampai disini, sebelum saya jelaskan cara kerja script-script tersebut anda boleh mengujinya dengan mengetik alamat index dari folder tersebut pada broser, klik signup , biasanya banyak terjadi kendala setelah anda sign up dan diarah kan ke facebook .tidak terkecuali saya, di beberapa kejadian memang perlukan waktu untuk facebook untuk saving data anda ke sistem mereka selama beberpa menit bahkan jam, solusinya coba lagi 24x selama 24 jam :D .

namun setelah seharian belum juga merubah ke adaan coba chek lagi data-data yang di masukan mungkin saja ada kekeliruan dan ada data yang tak di masukan, kalau sudah dan belum menemukan permasalahannya, ya saya juga akan coba bantu, silahkan berkomentar pada kotak komentar di bawah,

Tutorial mendaftar plugin Actif button After DO dengan fungsi shared via twitter

khusus bagi calon pengguna  plugin Actif button After DO 

 Demo

1. saddamfahmy@yahoo.com (email anda)
2. Membuat link download  aktif setelah meng "like" facebook(judul postingan/judul download anda)
3. saddamfahmy (boleh alamat twitter pribadi atau situs anda , tulis tanpa "@")
4. http://i.carahipnotis.net/twitt.zip (alamat download anda)
5. http://phpscriptdownload.blogspot.com/2012/10/membuat-tombol-aktif-setelah-klik-like-facebook.html (halaman sumber)
6. setelah itu copy link yang di berikan sebagai alamat downloadnya sebarkan sesuai kebutuhan

untuk mengechek langsung  klik link tersebut

 penampakan kalau sudah di shared via twitter

tutorial Mendaftar Dan membuat kotak like facebook (Like box Facebook)

Caranya sangat mudah, namun coba fokus pada form plat form facebook nah yang perlu anda isi adalah, nama halaman fans page anda di facebook, bagi blogger pasti sudah familiar dengan yang satu ini, jadi saya tidak memperpanjang lagi 
 ---------------------------------------------------------------------------------
  Ternyata masih banyak juga yang bingung ok  ikuti langkah-langkahnya 
pergi ke halaman facebook fans page anda, bila belum punya buat dulu search di google cara pembuatanya

berikut adalaha penampakan facebook fanspage untuk situs ini

 

 perhatikan yang berkolom merah, copy dan pastekan pada halaman pendaftaran pada platform facebook, selanjutnya isi kolom-kolom sesuia keterangan, klik daftar, dan uji linknya

Actif button after Do (plugin)

Plugin ini di ciptakan untuk promosi dan sekaligus untuk mendapatkan backling dari pengunjung, yang tentunya sangat bermanfaat untuk misi SEO blog atau website anda.

cara kerjanya:

saat pengunjung memasuki halaman download, pengunjung akan memasuki dahulu halaman plugin seperti di bawah

Namun pengunjung tidak bisa menekan tombol download karena tombol tersebut dalam keadaan nonaktif  untuk mengangtifkannya pengunjung harus melakukan sesuatu dengan mengklik tautan diatas tombol dan melakukan sesuatu baik like facebook atau juga shared via twitter, setelah itu semua di lakukan oleh pengunjung maka otomatis  tombol download berubah warna menjadi lebih terang yang menandakan tombol sudah aktif.

saya baru membuat plugin ini untuk dua fungsi saja

1. facebook like box
2. shared via twitter

sedangkan fungsi-fungsi yang lain ikutan belakangan karena belum berhasil saya aplikasi kan dengan csript ini.
 anda boleh memilih sesuai selera dengan mengisi form paling bawah pada postingan ini berikut tutorialnya(must read)
1 tutorial pengisian  plugin Actif button After DO untuk fungsi like box facebook 
2 tutorial pengisian form plugin Actif button after do untuk fungsi Twitter
 

Like box

Facebook like box

Email	:
Tittle/judul	:
platform facebook	:
Link Download	:
Sumber	:

Shared Twitt

share di twitter

Email	:
Tittle/judul	:
@	:
Link Download	:
Sumber	:

Membuat link download aktif setelah meng "like" facebook

Demodownload

sistem ini berajalan menggunkan php j-query dan script script lainya namun saya tidak akan menjelaskan tentang script-script nya karena saya pribadi belum mengerti untuk menjelaskan namun hanya mengerti untuk diri pribadi, aplikasi ini bernama a Simple Tweet to Download System pada situs sumbernya http://tutorialzine.com/

sedikit review tentang aplikasi ini, aplikasi ini merupakan halaman dimana link download di letakkan. namun pengunjung tidak semerta -merta bisa langsung mendownload karena tombol downloadnya berada pada mode tidak aktif, sesuai dengan informasi yang diletakan pada halaman tersebut pengunjung harus melakukan sesuatu yaitu meng-"klik" link try it untuk di arahkan kepada sebuah halaman twitter API yang memungkinkan si pengunjung untuk melakukan twitt pada akun twitternya secara otomatis (tidak perlu mengetik lagi ) menyangkut kepada halaman postingan tersebut, intinya hal ini dilakukan sebagai tindakan mempromosikan postingan di twitter.

Tetapi saya sudah memodifikasinya dengan mengganti bahasa dan menggantikan yang semula menggunakan plugin developt twitter, sekarang saya ganti menggunakan plugin dari facebook sehingga penampilannya berubah seperti ini

nah, setelah pengunjung si calon president  pendownload ini akan mengangtifkan tombol download dengan melakukakan klik pada try it, setelah itu pengunjung akan di bawa ke halaman plugin like box dari facebook,
setelah like dan menutup halaman tersebut secara otomatis tombol downloadnya berubah warna yang menandakan tombol telah aktif dan langsung bisa di download.

Menurut saya, plugin like box dari facebook lebih menguntungkan untuk website kita dari pada harus melakukan twett di twitter. alasanya, dengan plugin like box kita sudah berinvestasi atau menjaga pengunjung untuk kembali mengunjungi, karena pengunjung ini semerta-merta mencari atau menyukai tema bahasan pada blog atau situs anda sehingga apabila di kemudian hari kita menginformasikan melalui halaman fans page facebook kemungkinan besar si pengunjung akan kembali lagi , ingat lho pengunjung yang kembali lagi akan mengasumsi kan search engine bahwa situs anda adalah situs yang mengandung konten yang berguna sehingga pengunjung mau kembali lagi ke situs anda
sebenarnya apabila menggunakan plugin twitter juga tidak kalah menguntungkan, hanya saja konten anda harus di sukai oleh banyak orang sehingga pengguna twitter yang melihat  tweet tersebut  akan mengunjungi.
lainhalnya tema bahasan tentang blog ini yang hanya segelintir saja yang menyukainya , oleh karena itu saya memodifikasi aplikasi ini sehingga bisa di gunakan untuk like box facebook,


jika anda tertarik menggunakan plugin twitter sebagai   pendukung aplikasi ini silahkan mengunjungi alamat sumber dan baca cara menggunakanya, hanya saja situs tersebut berbahasa inggris baku tapi jangan kuatir ,jangan segan untuk mendownload tentang cara pemakaianya silahkan lalu apabila ada yang kurang di mengertio, silahkan mengisi form komentar di bawah insyaallah saya akan share hingga aplikasi tersebut bisa anda gunakan, dan bagi anda yang sependapat dengan saya menggunkn plugin like box facebook lanjutkan membacanya karena saya akan membagikan tutorialnya disini



pertama-tama buka twittdownload-asset-js-jquery.tweetAction.js pada webhosting atau localhost anda
maka akan menampilkan seperti ini

(function($){

var win = null;

$.fn.tweetAction = function(options,callback){

// Default parameters of the tweet popup:

options = $.extend({
url:window.location.href
}, options);

return this.click(function(e){

if(win){
// If a popup window is already shown,
// do nothing;
e.preventDefault();
return;
}

var width = 550,
height = 350,
top = (window.screen.height - height)/2,
left = (window.screen.width - width)/2;

var config = [
'scrollbars=yes','resizable=yes','toolbar=no','location=yes',
'width='+width,'height='+height,'left='+left, 'top='+top
].join(',');

// Opening a popup window pointing to the twitter intent API:
win = window.open('http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FShareIlmuMastersite&width=292&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=false',config);

// Checking whether the window is closed every 100 milliseconds.
(function checkWindow(){

try{
// Opera raises a security exception, so we
// need to put this code in a try/catch:

if(!win || win.closed){
throw "Closed!";
}
else {
setTimeout(checkWindow,100);
}
}
catch(e){
// Executing the callback, passed
// as an argument to the plugin.

win = null;
callback();
}

})();

e.preventDefault();
});

};

})(jQuery);

1. (merah) merupakan link dari like box facebook
2. (ungu) merupakan nama dari  facebook fans page anda nah anda bisa mengganti yang berwarna ungu dengan nama fecbook fans page anda atau ganti seluruh urlnya (yang berwarna merah)

(Bila anda belum mengerti apa itu like box dan apa itu nama facebook fans page silahkan cari di google dulu)

sudah selesai proyek kita kali ini silahkan di upload di hosting masing-masing semoga sukses,

bagi blogger yang berkeinginan mempunyai plugin diatas, silahkan isi komentarnya di bawah dengan, email dan link download nya , insyallah saya akan membuatkan dengan mengiimkan alamat nya,

ok evry body(betul gak tulisanya?) selamat berkerja
 uda ane buat yang otomatisnya tinggal daftar dan dapatkan linknya baca aja

Actif button after Do (plugin)

Demodownload

Mengirim dan menampilkan data dari database berbasis chat

Setelah mempelajari bahan bahan sebelumnya tentang

• Halaman untuk mengirim data  ke sistem database menggunakan php(user login)
• membuat sistem online dan offline dengan database mysql dan php
• Membuat kotak list user yang online menggunakan refress automatis
• membuat logout   

sekarang saatnya untuk memahami bagaimana aplikasi chat menggunakan php mysql ini dapat  mengirim pesan dan menampilkan pesan dari user untuk di lihat oleh pengguna lain. dalam kasus ini kita masih menggunkan script php yang dapat menghubungkan dengan database diantarnya bagaimana mengirim data ke database dan bagaimana mengambil pesan ke databas mysql. namun yang membuat rumit proyek ini adalah  pengiriman dan pengambilan data di fokus kan pada 1 halaman yaitu pada halaman chat.php sedangkan fungsi pengiriman dan pengambilanya di lakukan oleh halaman yang berbeda

• message-line.php = untuk menampilkan dan mengambil data yang selanjutnya di tampilkan pada halaman Chat.php
• post-message.php= Untuk mengirim data ke database 

semua itu dilakukan di belakang layar menggunakan fungsi java script  yang di dalamnya terdapat ajax sehingga tidak harus melakukan refresh halaman aplikasi ini untuk berkerja, denga java script ini aplikasi website chatting kita dapat berkerja secara sistematik,

coba di lihat pada halaman chat.php dan teukan bagian java script seperti ini

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){  
        var clientmsg = $("#usermsg").val();
        $.post("post-message.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        return false;
    });
  
    //Load the file containing the chat log
    function loadLog(){      
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
        $.ajax({
            url: "message-line.php",
            cache: false,
            success: function(html){      
                $("#chatbox").html(html); //Insert chat log into the #chatbox div              
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
                if(newscrollHeight > oldscrollHeight){
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                }              
              },
        });
    }
    setInterval (loadLog, 1000);    //Reload file every 2.5 seconds
  
    //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Are you sure you want to end the session?");
        if(exit==true){window.location = 'index.php?logout=true';}      
    });
});
</script>

perhatikan dan pelajari script di atas, terdapat fungsi untuk mengirim pesan dengan post-message.php, 
 menampilkan pesan dengan message-line.php  dan ajax refresh,




sedangkan pada halaman-halaman tersebut masih menggunkan sistem php sederhana diantaranya manupulasi table database dan fungsi session, 

tentang css atau mempercantik atau pengembangannya silahkan di lakukan sendiri saya hanya menyampaikan dasarnya yang jauh dari kesempurnaaan

berakhir sudah proyek membuat Aplikasi chat dengan PHP dan mysql serta javascript  apabila terdapat kesalahan atau kekeliruan silahkan sampaikan menggunkan kotak komentar ,
kita sama-sama belajar dan memperbaiki untuk kelancaran hobi dalam meng-codding-kan website ,
atau ada yang tidak di mengerti isikan pada kotak komentar agar sama-sama kita mengsharingkan ilmu kita

Demodownload

membuat sistem online dan offline user dengan database mysql dan php

Membuat sistem online dan offline user chat dengan database mysql dan php adalah ttutorial selanjutnya dari tutorila induk Membuat aplikasi chat Dengan PHP MYSQL serta java script .

Demodownload

Aplikasi chat dengan PHP dan mysql alurnya seperti ini :

1. saat user mendaftar, otomatis php akan mengirimkan data bahwa ada user yang online bermode on ke database sehingga user yang bermode on ini akan tampil di daftar user yang online 
2. saat user exit user akan otomatis terhapus di database sehingga hilang pada daftar user yang online 

cara kerjanya seperti ini:

• saat user mendaftar ke aplikasi chat tentunya kita memerlukan kode php untuk mengirimkan data ke database . cek pada halaman peiksa.php

 

$q=mysql_query("insert into chat(nama, pesan, waktu, status, situs)values
( '$nama', '$nama baru saja masuk','$waktu','on', '$situs')");

code yang berwarna merah adalah kuncinya 'status' merupakan nama  salah satu kolom dari table chat kita sedangkan 'on' merupakan tanda atau statusnya yang menandakan user online , data ini dikirim ke database chat bersama-sama data yang lain (nama,pesannya, waktu status ,situs) sehingga masuk ke dalam database

• Sekarang untuk menampilkan user tersebut, kita menggunakan kode php untuk menampilkan nama pada tiap baris yang berstatus 'ON' ,lihat pada halaman daftaruser.php

$km=mysql_query("SELECT * FROM chat where status='on'");
$m = mysql_num_rows($km);
while($row=mysql_fetch_array($km))
{
echo "<a href=".$row['situs']." >".$row['nama']."</a><br>
";}

1.  pemanggilan SELECT * FROM chat where status='on' adalah memilih semua  data pada table chat tetapi yang berstatus 'on'
2.  $row=mysql_fetch_array($km) minta izin untuk mengakses dan menampilkan isi dari data menggunakan perintah .$row['nama-kolom']. 
3. "echo" perintah untuk menampilkan 
4. kita bubuhkan link <a href> dimana link di tuju, $row['situs'] merupakan  alamat situs sang user 
5. krtikan pada broser localhost/aplikasichat/daftaruser.php  maka akan tampil

• Menampilkan data tersebut pada halaman chat, kita menggunkan metode script ajax yang merefres halaman tersebut tiap beberapa detik sekali sehingga, database akan di baca secara realtime otomatis manfaatnya akan langsung memunculkan data baru tanpa harus merefres halaman

lihat pada halaman chat.php

Reloadthis merupakan cara kita menampilkan data user yang online menggunakan ajax yang bisa refresh otomatis diantara div tersebut memang kosong karena kita memanggil data tersebut menggunkan javascript yang ber id=reloadthis
kode java script tersebut bernama lihatuser.js

function Ajax(){
var xmlHttp;
    try{  
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
        setTimeout('Ajax()',1000);
    }
}
xmlHttp.open("GET","daftaruser.php",true);
xmlHttp.send(null);
}

window.onload=function(){
    setTimeout('Ajax()',100);
}

function buka(){
open('formpesan.html','form','menubar=no,width=500,height=400');
}

 getElementById('ReloadThis'= mendapatkan kode element ber-id= reload this, untuk dapat di tampilkan halaman ("GET","daftaruser.php) Daftaruser.php, dan di set halamannya dengan ajax tiap 100 milisecond .


Halaman lihatuser.js memang berada pada luar halaman maka dari itu kita (kembali ke halaman chat.php)
membubuhkan kode

seperti diatas pada halaman chat.php

• proses logout , lihat halaman chat.php pada kode <div class="logout"><a href="logout.php?op=out">logout</a></div> akan menampilkan kata logout yang akan di arahkan ke halaman logout.php

else if($op=="out"){

$jm=mysql_query("DELETE FROM chat WHERE nama = '$_SESSION[nama]' and status='on'");
$j = mysql_num_rows($jm);


{
    unset($_SESSION['nama']);
    unset($_SESSION['situs']);
    header("location:chat.php");
}}
?>

1. (merah) pemanggilan ke database dengan php untuk menghapus data yang bernama sesuai dengan season dan mencari nama yang berstatus on untuk di hapus
2. (orange) memerintahkan broser untuk tidak lagi mengadopsi sesion nama dan situs

• nah setelah itu user akan kembali di bawa ke login form pada halaman chat.php dan secara otomatis user tersebut akan hilang dari muka bumi daftar user

berakhir sudah pembahasan pada pembahasan ini tunggu pembahasan selanjutnya,