Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3]

(1)

Membuat Online Messanger atau Chat

dengan PHP, MySQL, JQuery, Bootsrtrap 3

dan Font Awesome 4 [Part 3]

Oleh: Arinadi Nur Rohmad

Asalamualaikum, Setelah di part sebelumnya kita sudah membuat design

dan proses register, sekarang kita akan membuat &ldquo;Proses

Sign-IN dan Sign-OUT&rdquo;. Disini kita akan membuat form

Sign-IN di index.php dapat berfungsi dengan cara mengecek data user

untuk dapat masuk ke Online Messanger kita. Sekarang siapkan ala...

Asalamualaikum,

Setelah di part sebelumnya kita sudah membuat design dan proses register, sekarang kita akan membuat “Proses Sign-IN dan Sign-OUT”.

Disini kita akan membuat form Sign-IN di index.php dapat berfungsi dengan cara mengecek data user untuk dapat masuk ke Online Messanger kita.

Sekarang siapkan alat dan bahannya.. Text editor.

1.

Browser. 2.

(2)

XAMPP atau server lain. 3.

Setelah semua terkumpul, sekarang kita mulai..

Langkah 1

Karena di Part 2 kita sudah membuat database dan file connect yang elah di include ke index.php dengan sukses, sekarang kita tinggal membuat proses untuk Sign-IN..

Caranya..

Buka index.php dengan text editor lalu cari komentar “//Memasukan File header”..

Letakan code ini di atas komentar “//Memasukan File header”, fungsi dari code sudah ada dalam komentar code ini..

//Proses Sign-IN/Login/Masuk

elseif($_POST['sign-in']){ //sesuai nama button submit pada form sign-in //Mengambil value dari form..

$in_username=htmlentities(mysql_real_escape_string($_POST['in-username'])) ;

$in_password=htmlentities(mysql_real_escape_string($_POST['in-password'])) ;

//Cek data kosong.

if(!$in_username){$in_error_msg='Username Kosong.';} elseif(!$in_password){$in_error_msg='Password Kosong.';} else{

$enc_pass=md5(sha1(md5($in_password)));//Proses Encripsi password. samakan struktur encripsi dengan encripsi pada saat register. saya

menggunkan md5->sha1->md5. //Proses Sign-IN

$sign_qry=mysql_query("SELECT id_user FROM user WHERE

username='$in_username' AND password='$enc_pass'");//mencocokan data Username dan Password

$num_rows=mysql_num_rows($sign_qry);//Cek jumlah data yang di temukan.

if($num_rows!=1){ //Memastikan jumlah data yang ditemukan hanya 1 user, jika 1 orang maka akan dinyatakan bahya data sudah valid.

$in_error_msg='Terjadi tidak kecocokan antara Username dan Password'; }else{ //COCOK //ambil id user $data_user=mysql_fetch_assoc($sign_qry); $id_user=$data_user['id_user']; //membuat session $_SESSION['chat_i_id']=$id_user; //melempar ke halaman lain

(3)

header('Location: home.php'); }

} }

Kenapa tidak menyimpan data Username dan Password di session?

Tidak menyimpan username, karena username dapat di ubah-ubah. Saya lebih baik meload database untuk mengambil username dan informasi lain dari id yang kita simpan di session..

Tidak meyimpan password, karena disebuah forum banyak teman saya yang memberikan saran agar tidak menyimpan data rahasia di session atau cookies. Karena mungkin saja user dapat menampilkanya dan di decripsi yang tentunya sangat berbahaya..

Langkah 2

Pada kode diatas error yang terjadi sudah di deskripsikan dengan $in_error_msg, tetapi belum ditampikan.

Untuk menampilkan pesan error di atas form, silahkan patekan code ini di atas Komentar ..

<?php if($in_error_msg){echo'<div class="alert alert-danger">';echo $in_error_msg;echo'</div>';}?>

jika terjadi error maka form akan kembali kosong, untuk mengatasinya kita tambakan data yang telah diambil ke value..

Ganti input username dengan code ini..

<input value="<?php echo $in_username;?>" id="in-username" type="text" name="in-username" class="form-control" maxlength="15">

Lalu save..

Ini Full Code index.php

<?php

//Connect DB

include_once'system/connect.php'; //Proses Sign-UP/Register

(4)

{

//Mengambil value dari form..

$up_username=htmlentities(mysql_real_escape_string($_POST['up-username'])) ; $up_name=htmlentities(mysql_real_escape_string($_POST['up-name'])); $up_email=htmlentities(mysql_real_escape_string($_POST['up-email'])); $up_password1=htmlentities(mysql_real_escape_string($_POST['up-password1'] )); $up_password2=htmlentities(mysql_real_escape_string($_POST['up-password2'] ));

//Cek data kosong.

if(!$up_username){$up_error_msg='Username Kosong.';} elseif(!$up_name){$up_error_msg='Nama lengkap Kosong.';} elseif(!$up_email){$up_error_msg='Email Kosong.';}

elseif(!$up_password1){$up_error_msg='Password Kosong.';} elseif(!$up_password2){$up_error_msg='Password Kosong.';} else{

//Cek Keunikan Username

$username_qry=mysql_query("SELECT username FROM user WHERE username='$up_username' LIMIT 0,1");

$cek_username=mysql_num_rows($username_qry); if($cek_username!='0'){

$up_error_msg='Username Sudah digunakan. Coba yang lain'; }

else{

//Cek format email

if (!filter_var($up_email, FILTER_VALIDATE_EMAIL)) {

$up_error_msg='Email tidak Valid.'; }

else {

//Cek keunikan email

$email_qry=mysql_query("SELECT email FROM biodata WHERE email='$up_email' LIMIT 0,1");

$cek_email=mysql_num_rows($email_qry); if($cek_email!='0'){

$up_error_msg='Email Sudah digunakan.'; }

else{

//encripsi password md5 lalu sha1 lalu md5 biar aman.. :)

$enc_pass1=md5(sha1(md5($up_password1))); $enc_pass2=md5(sha1(md5($up_password2))); //Mencocokan Password

if($enc_pass1!=$enc_pass2){

$up_error_msg='Password Tidak Cocok.'; }

(5)

else{

//Proses Input data di 2 table

$go1=mysql_query("INSERT INTO user VALUE ('', '$up_username', '$enc_pass1')");

$id_user=mysql_insert_id();//Ambil id user secara langsung

$go2=mysql_query("INSERT INTO biodata (id_user,nama,email,reg_date) VALUE

('$id_user','$up_name','$up_email',NOW())"); //membuat session

$_SESSION['chat_i_id']=$id_user; //melempar ke halaman lain

header('Location: home.php'); exit; } } } } } } //Proses Sign-IN/Login/Masuk

elseif($_POST['sign-in']){ //sesuai nama button submit pada form sign-in //Mengambil value dari form..

$in_username=htmlentities(mysql_real_escape_string($_POST['in-username'])) ;

$in_password=htmlentities(mysql_real_escape_string($_POST['in-password'])) ;

//Cek data kosong.

if(!$in_username){$in_error_msg='Username Kosong.';} elseif(!$in_password){$in_error_msg='Password Kosong.';} else{

$enc_pass=md5(sha1(md5($in_password)));//Proses Encripsi password. samakan struktur encripsi dengan encripsi pada saat register. saya

menggunkan md5->sha1->md5. //Proses Sign-IN

$sign_qry=mysql_query("SELECT id_user FROM user WHERE

username='$in_username' AND password='$enc_pass'");//mencocokan data Username dan Password

$num_rows=mysql_num_rows($sign_qry);//Cek jumlah data yang di temukan.

if($num_rows!=1){ //Memastikan jumlah data yang ditemukan hanya 1 user, jika 1 orang maka akan dinyatakan bahya data sudah valid.

$in_error_msg='Terjadi tidak kecocokan antara Username dan Password';

}else{ //COCOK

//ambil id user

(6)

$id_user=$data_user['id_user']; //membuat session

$_SESSION['chat_i_id']=$id_user; //melempar ke halaman lain

header('Location: home.php'); }

} }

//Memasukan File header

include_once'index_header.php'; ?>

<h1 class="panel-title"><i class="fa fa-3x

fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1> </div>

Membuat Simple Messanging system.. </div>

</div> </div>

<div class="panel panel-default"> <div class="panel-heading">

<h3 class="panel-title"><i class="fa fa-2x fa-lock text-success"></i> Sign-In</h3> </div> <div class="panel-body">  <?php if($in_error_msg){echo'<div class="alert alert-danger">';echo $in_error_msg;echo'</div>';}?>  <form action="" method="post"> <div class="form-group">

<label for="in-username">Username</label> <input value="<?php echo $in_username;?>" id="in-username" type="text" name="in-username" class="form-control" maxlength="15">

</div>

<label for="in-password">Password</label> <input id="in-password" type="password" name="in-password" class="form-control">

(7)

OK</button>

</form> </div> </div>

<div class="panel panel-default"> <div class="panel-heading">

</div> <div class="panel-body">  <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'</div>';}?>  <form action="" method="post"> <div class="form-group">

<label for="up-username">Username</label> <input value="<?php echo $up_username;?>" id="up-username" type="text" name="up-username" class="form-control" maxlength="15">

</div>

<label for="up-name">Nama Lengkap</label> <input value="<?php echo $up_name;?>" id="up-name" type="text" name="up-name" class="form-control" maxlength="50">

</div>

<label for="up-email">Email</label> <input value="<?php echo $up_email;?>" id="up-email" type="email" name="up-email" class="form-control" maxlength="70">

</div>

<label for="up-password1">Password</label> <input id="up-password1" type="password" name="up-password1" class="form-control">

</div>

<label for="up-password2">Ulangi Password</label>

(8)

<button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button> </form> </div> </div> </div> </div> </div> <?php

//memasukan file footer

include_once'index_footer.php'; //menutup koneksi MySQL

mysql_close(); ?>

Langkah 3

Sekarang coba lakukan login dengan data yang anda register/daftarkan.

(9)

Langkah 4

Setelah selesai membuat proses sign in sekarang kita akan membuat proses sign out.. Buat file “out.php” di folder “system” yang telah kita buat di Part 2..

Buka file out.php dengan text editor..

Lalu pastekan code berikut, fungsi dari kode sudah ada di komentar code.. <?php session_start();

session_unset($_SESSION['chat_i_id']); //menghapus session header('Location: ../index.php');

?> Lalu save..

Langkah 5

Sekarang kita tambahkan link sementara untuk Sign-Out di home.php.. Buka home.php dengan text editor..

Lalu tambahkan link yang menuju ke “system/out.php”.. Contoh..

<a href=” system/out.php”>Sign-OUT</a> Lalu save..

Selesai Membuat Proses Sign-IN dan Sign-OUT..

Dituorial berikutnya kita akan melai mendesign home.php sebagai halaman utama Online massanger kita..

Tunggu tutorial berikutnya..

Jika kesulitan atau ada kesalahan, silahkan layangkan komentar dibawah ini.. Terimakasih..

(10)

Original Post By Arinadi Nur Rohmad

Tentang Penulis

Arinadi Nur Rohmad

Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3]