Membuat Online Messanger Atau Chat Dengan Php, Mysql, Jquery, Bootsrtrap 3 Dan Font Awesome 4 [Part 3]

Asalamualaikum,

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

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

Sekarang siapkan alat dan bahannya..

  1. Text editor.
  2. Browser.
  3. XAMPP atau server lain.

Setelah semua terkumpul, kini kita mulai..

 

Langkah 1

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

Caranya..

Buka index.php dengan text editor kemudian 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/Masukelseif($_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 ketika 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, kalau 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 lainheader('Location: home.php');}}}

Kenapa tidak menyimpan data Username dan Password di session?

Tidak menyimpan username, alasannya ialah username sanggup di ubah-ubah. Saya lebih baik meload database untuk mengambil username dan info lain dari id yang kita simpan di session..

Tidak meyimpan password, alasannya ialah disebuah lembaga banyak sobat saya yang memperlihatkan saran biar tidak menyimpan data belakang layar di session atau cookies. Karena mungkin saja user sanggup menampilkanya dan di decripsi yang tentunya sangat berbahaya..

 

Langkah 2

Pada arahan 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  <!– Form Sign-in/Login/Masuk –>..

<!-- ERROR Sign-IN/Login/Daftar --><?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 DBinclude_once'system/connect.php';//Proses Sign-UP/Registerif($_POST['sign-up']) //sesuai dengan nama button pada form sign-up{//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 emailif (!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 kemudian sha1 kemudian md5 biar aman..  $enc_pass1=md5(sha1(md5($up_password1)));$enc_pass2=md5(sha1(md5($up_password2)));//Mencocokan Passwordif($enc_pass1!=$enc_pass2){$up_error_msg='Password Tidak Cocok.';}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 eksklusif $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 lainheader('Location: home.php');exit;}}}}}}//Proses Sign-IN/Login/Masukelseif($_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 ketika 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, kalau 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 lainheader('Location: home.php');}}}//Memasukan File headerinclude_once'index_header.php';?><div class="container-fluid" style="margin-top: 5%"><div class="row"><div class="col-md-5 col-md-offset-2"><!-- Deskripsi --><div class="panel panel-default"><div class="panel-heading"><h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1></div><div class="panel-body"><img src="view/images/icon.png" class="img-responsive center-block">Membuat Simple Messanging system..</div></div></div><div class="col-md-3"><!-- Layout Sign-in/Login/Masuk --><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"><!-- ERROR Sign-IN/Login/Daftar --><?php if($in_error_msg){echo'<div class="alert alert-danger">';echo $in_error_msg;echo'</div>';}?><!-- Form Sign-in/Login/Masuk --><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><div class="form-group"><label for="in-password">Password</label><input id="in-password" type="password" name="in-password" class="form-control"></div><button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button></form></div></div><!-- Layout Sign-up/Daftar --><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3></div><div class="panel-body"><!-- ERROR Sign-up/Daftar --><?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'</div>';}?><!-- Form Sign-up/Daftar --><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><div class="form-group"><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><div class="form-group"><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><div class="form-group"><label for="up-password1">Password</label><input id="up-password1" type="password" name="up-password1" class="form-control"></div><div class="form-group"><label for="up-password2">Ulangi Password</label><input id="up-password2" type="password" name="up-password2" class="form-control"></div><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 footerinclude_once'index_footer.php';//menutup koneksi MySQLmysql_close();?>

 

Langkah 3

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

 

Jika berhasil anda akan di lempar ke halaman home.php

 

Langkah 4

Setelah simpulan menciptakan proses sign in kini kita akan menciptakan 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 arahan sudah ada di komentar code..

<?php session_start();session_unset($_SESSION['chat_i_id']); //menghapus sessionheader('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..

Original Post By Arinadi Nur Rohmad

 

Author: 
    author
    No related post!