Membuat sistem Login dan pendaftaran website menggunakan akun facebook

Posted by bg teuku On Monday, October 29, 2012 33 comments



TUTORIAL PINDAH DI SINI LEBIH POWERFULL DAN TERBARU

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,


READ MORE

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

Posted by bg teuku On Sunday, October 28, 2012 0 comments
khusus bagi calon pengguna  plugin Actif button After DO 







  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
READ MORE

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

Posted by bg teuku On 0 comments
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

READ MORE

Actif button after Do (plugin)

Posted by bg teuku On Friday, October 26, 2012 3 comments
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 :
READ MORE

Membuat link download aktif setelah meng "like" facebook

Posted by bg teuku On Thursday, October 25, 2012 7 comments

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)





READ MORE

Mengirim dan menampilkan data dari database berbasis chat

Posted by bg teuku On 0 comments
Setelah mempelajari bahan bahan sebelumnya tentang
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



READ MORE

membuat sistem online dan offline user dengan database mysql dan php

Posted by bg teuku On Wednesday, October 24, 2012 4 comments
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 .

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,
READ MORE

Cara mengirim data ke sistem database menggunakan php login form

Posted by bg teuku On 5 comments
Tampilan chat
Aplikasi chat dengan PHP dan mysql posting ini adalah lanjutan dari membuat Aplikasi chat dengan PHP dan mysql, dimana kita telah masuk ke dalam tahap untuk mengirim data  ke sistem database menggunakan php. pada proyek kita kali ini ada beberapa bagian yang mengharuskan untuk berhubungan dengan database mysql diantaranya
  • saat login / mendaftar chat
  • saat menampilkan pesan dari database
  • saat mengirim pesan ke database
  • saat menampilkan daftar user yang online
  • dan saat logout di lakukan
1. Sistem login 

pada halaman chat.php pastinya sudah mengerti bukan cara menampilkan login form  menggunakan session? bila belum baca lagi Aplikasi chat dengan PHP dan mysql untuk sekedar mengingat saya bawa lagi potongan script chat.php pada fungsi  login kemari

<? session_start();
function loginForm(){
    echo'
<div id="loginform">
<p align="center">APLIKASI CHAT<br>
</p>
<form name="login" action="periksa.php?op=in" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
        <td>Username</td>
        <td>:</td>
        <td>
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td>Situs</td>
        <td>:</td>
        <td>
          <input type="text" name="situs" placeholder="http://situsmu.net/" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3">
          <input type="submit" name="login" value="Login" />
        </td>
    </tr>
</table>

</form>
</div>
';}


keterangan :
  1. (warna) adalah halaman yang menjadi tempat proses pemasukan data dan pembuatan seasion sedangkan (warna) adalah data yang menunjukan atau tanda masuk (in) yang akan di tangkap oleh halaman periksa.php sesudah pengguna menekan tombol
  2. (warna) berorientasikan "name" pada fungsi input sebagai informasi atau tanda yang akan di tangkap oleh halaman periksa.php
  3. (warna) adalah funsi untuk menampilkan text informasi  pada kolom yang apabila kolom di klik maka informasi tersebut akan otomatis menghilang
penampakan form login seperti ini



saat login pada  proyek Aplikasi chat dengan PHP dan mysql akan diarahkan ke halaman periksa.php untu data yang kita kirimkan di proses di halaman ini , dalam pemosesran halamna ini menggunakan menggunakan  dua fungsi yaitu
  1. insert dan
  2. select
  3. adopsi session
untuk lebih jelasnya perhatikan script dari halaman periksa.php ini


<?php
session_start();
include "config.php";

$waktu = date("H:i");
$nama = $_POST['nama'];
$situs = $_POST['situs'];
$op = $_GET['op'];

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


if($op=="in"){

    $cek = mysql_query("SELECT * FROM chat WHERE nama='$nama' AND situs='$situs'");
    if(mysql_num_rows($cek)==1){//jika berhasil akan bernilai 1
        $c = mysql_fetch_array($cek);
        $_SESSION['nama'] = $c['nama'];
        $_SESSION['situs'] = $c['situs'];
     
        if($c['nama']=="$nama"){
            header("location:chat.php");
        }
    }else{
         die("wahhhh,,,, traubel  <a href=\"javascript:history.back()\">ulangi</a>");
    }
}
keterangan

  1. (warna) halaman ini meminta kepada browser untuk mengangtifkan atau mengadopsi session sesuai perintah php
  2. (warna) metode include merupakan meode yang di gunakan untuk memasukan bagian halaman lain ke sebuah halaman, sedangkan include "config.php"; merpakan memasukan halaman confiq dimana halaman config.php ini berisi script jembatan bagi php untuk mengakses database. bila ada yang masih bingung coba search di goolge tentang php dan mysql metode delete, insert, update dll
  3. (warna)  nah ini yang menjadi sarung tangan bisbol atau penangkap data yang dikirimkan pada halaman login sebelumnya 
  4. (warna)  merupakan perintah mysql untuk memasukan data yang dikirim dan di tangkap ke database
  5. (warna)  yang ini mengambil perintah "in" pada halaman chat.php login form artinya masuk dan saat perinyah ini berjalan dia akan memeriksa pada table database nama dan situs yang cocok sesuai dengan data yang di masukan pada saat proses login, di situ juga terlihat fungsi script  untuk mengak ses tiap baris atau kolom database  (mysql_num_rows($cek)$c = mysql_fetch_array($cek);  dan pada (warna) menunjukan atau memerintah kan kepada browser untuk mengadopsi $c['nama']; atau kolom nama yang di masukan pada login form untuk di jadikan seasion $_SESSION['nama']
  6.   if($c['nama']=="$nama"){
                header("location:chat.php"); ---------> jika nama pada baris nama di database  cocok dengan nama yang dikirimkan lewat login form maka situs langsung  otomatis  diarahkan kembali ke chat.php
     jika tidak atau terjadi kendala maka akan keluar fungsi "echo" di mana keluar  peringatan untuk mengulang kembali proses login

    setelah di arahkan pada halaman chat.php maka secera otomatis akan membaca seasson pada browser yang sudah di perintahkan maka from yang akan di munculkan bukan lagi from login melainkann form chat,
    sampai disini saya yakin semuanya paling tidak sudah mngerti alur dari kerjaan scrip-script ini ,ternyata sangat asik bukan mempelajari php dan mysql ?
    ok, saya sangat welcome kepada pertanyaan ,dengan pertanyaan saya bisa merasa di hargai karena tulisan sederhana yang jauh dari kata sempurna ini ternyata di pelajari sunguh-sunguh oleh anda, maka dari itu ajukan pertanyaan saya akan sebisa mungkin menjawabnya

    ok, sampai disini pembahasan tentang  mengirim data  ke sistem database menggunakan php dalam bentuk login formnya , di lain waktu saya akan memposting kelanjutannya salam codding

READ MORE

Membuat aplikasi chat Dengan PHP MYSQL serta java script

Posted by bg teuku On Tuesday, October 23, 2012 18 comments
Aplikasi chat dengan PHP dan mysql adalah sarana interaksi pada dunia maya dengan sebuah progam berbasis website yang di dalamnya kita gunakan script-script PHP serta database MYSQL sabagai penyimpan datanya, jadi nanti kita juga akan mempelajari pemahaman tentang:

  • Bagaimana cara PHP mengirim data ke database
  • Bagaimana cara PHP mengambil/membaca data dari database
  • Bagaimana cara merefresh halaman atau bagian website secara otomatis
  • Bagaimana cara mempercantik halaman dengan CSS
  • Bagaimana cara membuat form login user
  • Bagaimana cara menampilkan user yang sedang online
  • dan lain-lain
ok sampai disini, saya akan menjelaskan cara kerja dari proyek yang akan kita buat
  1. user mengisi nama dan email/ nama dan  situs 
  2. user menekan tombol login
  3. user diarahkan ke form chating
  4. Otomatis user akan masuk pada kolom daftar user yang online
  5. user dapat membaca dan mengirim  pesan
  6. user menekan tombol exit
  7. user otomatis keluar dari kolom daftar user
  8. user kembali download bokep(just kidding bro)
saya harapkan bagi yang mengikuti tutorial cara membuat aplikasi chat dengan php dan mysql sudah memahami  :
  •  seputar html
  • apa itu PHP ,dasar php
  • apa itu database mysql, mysql
  • apa itu java script
  • apa itu css
  • apa itu suster ngesot (just-kidding lagi)
kalau belum tau silahkan buka tab baru ketikan www.google.com cari deh informasi-informasi tentang suster ngesot, eh tengtang html, php, mysql, java script dan css.
nah yang sudah tau, selamat anda berhak memeruskan bacaan anda tapi masih ada tantangan yang lebih sulit lagi, berupa syarat
berikut syarat yang ingin mengikuti tutorial cara membuat aplikasi chat dengan php dan mysql
  • terinstal apache mysql mydatabase di komputer , boleh menggunakan xampp----> rekomendasi saya  
  • pastikan sudah PW (posisi wenak)
  • pastikan sudah mandi
  • and the last wajib senyum  :)
nah silahkan download xampp, wampp atau yang lainya , cari tutorial cara mendownload wampp nya di google, nah untuk point yang selanjutnya tidak kalah penting agar anda rilexs dan tetap konsen dalam menggulati code dan script nanti,


sekali lagi ni sebelum benar-benar mempelajari tutorial cara membuat  Aplikasi chat dengan PHP dan mysql harus benar-benar sudah menguasai PHP dan pernak perniknya, karena tutorial cara membuat  Aplikasi chat dengan PHP dan mysql  adalah pembelajaran tingkat badai alias lumayan pembelajaran tingkat lanjut,,

ok kita mulai,

pertama-tama kita harus membuat halaman login user

harus di baca : halaman login user disini di satukan langsung dengan halaman kotak chatnya, sehingga kita memadukan dengan seasion ( baca: seputar season pada php) sehingga prosesnya akan menampilkan login form saat season kosong, namun saat season sudah terisi maka akan menampilkan kotak chatnya oleh karena itu kita membutuhkan script php sebagai berikut:

<? function loginForm()
{ echo' ini kotak komentar ' :}
 ?>
 <?
php if(!isset($_SESSION['nama'])){ loginForm(); }
 else{
 ?>
 ini kolom chatnya

 <?
 } ?>

code diatas hanya seumpamanya alias contoh  jadi kita gunakan fungsi "if"  arti dari kode diatas akan meng "echo" kan login form. tetapi saat halaman sudah terinfeksi season maka akan meng "echo" kan  kolom chatnya,

seoson disini adalah rekaman yang di lakukan oleh browser saat kita login pertama, kali jadi nama kita akan di rekam oleh browser , tentunya setelah kita memerintahkan browser untuk merekam,

penampakan kode yang sebenarnya adalah sbb



<?
 session_start(); // session di mulai
function loginForm(){// saat sesion masih kosong akan menampilkan fungsi login from
    echo'
<div id="loginform">
<p align="center">APLIKASI CHAT<br>
</p>
<form name="login" action="periksa.php?op=in" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
        <td>Username</td>
        <td>:</td>
        <td>
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td>Situs</td>
        <td>:</td>
        <td>
          <input type="text" name="situs" placeholder="http://situsmu.net/" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3">
          <input type="submit" name="login" value="Login" />
        </td>
    </tr>
</table>

</form>
</div>
';}
?>
<?php  //<-------- fungsi yang di gunakan untuk mengechek sudah atau belum adanya seasion
if(!isset($_SESSION['nama'])){
    loginForm();
}
else{
?>



code diatas hanyalah potongan paling atas pada halaman chatnya jadi perlu kita tambahkan lagi kode untuk menampilkan kotak chat
berikut kode yang sudah di padukan





<?
function loginForm(){
echo'


<?
function loginForm(){
 echo'


<p align="center">Kami Menyediakan fasilitas COSTUMER Chat, <br>
</p>
</div>
<form name="login" action="periksalogin.php" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
      <td><span class="userchat">Username</span></td>
        <td><span class="userchat">:</span></td>
        <td><span class="userchat">
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td><span class="userchat">situs</span></td>
        <td><span class="userchat">:</span></td>
        <td><span class="userchat">
          <input type="text" name="hp" placeholder="www.terserah.com" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3"><span class="uesernamedanhp">
          <input type="submit" name="login" value="Login" />
        </span></td>
    </tr>
</table>

</form>
 ' :}
?>



 ' :}
?>

<?php
if(!isset($_SESSION['nama'])){
loginForm();
}
else{

?>



<div id="wrapper">
<div id="menu">
    <p class="welcome">Welcome <b><?php echo $_SESSION['nama']; ?></b></p>

<div style="clear:both"></div>
</div>

<div id="chatbox"></div>

<form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" placeholder="ketik pesan" />
    <input name="submitmsg" type="submit" class="tombol"  id="submitmsg" value="Kirim"  />
  </form>
</div>


<script type="text/javascript" src="chat.min.js"></script>
<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'); //auto scrol ke bawah
}
  },
});
}
setInterval (loadLog, 1000); //refres otomatisnya

//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>




<?php
}
?>

nah di atas merubakan halaman chat komplitnya, yang sudah di tambahkan java scriptnya (merah), yang berkaitan dengan fungsi-fungsi chating diantaranya auto scrol ke bawah , refresh automatis dan fungsi exit

poyek Membuat aplikasi chat Dengan PHP MYSQL serta java script kita belum lah selesai halaman diatas harus juga di dukung oleh halaman lainya yang akan kita pelajari pada posting selanjutnya
diantaranya,



 selanjutnya,



READ MORE

Welcome To this Blog

Posted by bg teuku On Monday, October 22, 2012 0 comments
Halo nama saya adalah T saddam fahmi Moely, saat postingan ini saya tulis saya berstatus sebagai mahasiswa di perguruan negeri yaitu univesitas malikussalleh jurusan Ekonomi manajemen,
Insyaallah saya akan menyandang title SE (Sarjana Ekonomi) paling cepat satu tahun di mulai dari sekarang, namun demikian, minat dan ketertarikan saya lebih kepada IT yang fokus kepada desain website, pemograman website, perkodean dan semua yang berhubungan dengan kecanggihan masa kini dalam hal dunia maya. aktifitas yang saya tekuni sebagai mahasiswa ekonomi membuat penyaluran hobi ini harus saya tekuni sendiri di sela-sela kesempatan padatnya dunia perkuliahan dengan belajar sendiri tanpa menekuni pendidikan formal, namun dengan semangat juang yang tinggi saya akn menekuni dunia webmaster ini mengatas namakan HOBI, MINAT, dan KESENANGAN meski tanpa guru meski tanpa materi perkuliahan.

Maka dari itu dengan hadirnya situs ini saya berharap menjadi titik semangat saya untuk terus belajar dan memperdalam sekaligus menjadi History pembelajaran Pribadi khususnya dan menjadi tempat share ilmu umumnya,

Jadi apabila anda mendapatkan situs ini dan kebetulan (mudah-mudahan) bermanfaat bagi anda ayo kita share kepada seluruh peminat mengatas namakan kesamaan hobi untuk sama-sama dapat di kritik sehingga setiap individu dapat memperbaiki dan menambah ilmu yang ada,

saya juga minta doanya demi kesuksesan saya, dan dapat menjadikan hal ini menjadi sumber penghidupan saya kelak, so motto blog ini adalah

saling kritik, saling membagi, saling memperbaiki dan saling mendoakan
sekian kata-kata sambutannya akhir kata semangat! Wassalamualaium
 
READ MORE