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

Episode System Sign-Up/Registerasi/Daftar User

Asalamualaikum,

Setelah di part 1 kita telah menciptakan form untuk Sign-in dan Sign-up yang kini kita akan menciptakan form itu sanggup berfungsi untuk memasukan data (Sign-Up)..

Sekarang siapkan Alat dan Bahannya..

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

Setelah semua terkempul kini sanggup kita mulai tutorial Part 2, Sesuaidengan Konsep CRUD (Creat, Read, Update, Delete) yang pertama kali kita kerjakan adalah “Membuat Proses Sign-Up/Register/Daftar”..

Sekarang Kita mulai..

 

Langkah 1

Kita akan menciptakan Database sebagai wadah data user,

Saya asumsikan anda sudah bias memakai PHPmyAdmin..

Buka XAMPP kemudian Run Apache dan MySQL..

 

Langkah 2

Buka PhpMyAdmin..

Sekarang buat database dengan nama sesuka anda, aku memakai database name “sms_db”..

Lalu buat table “user”

Dengan struktur sebagai berikut

 

Lalu buat table “biodata”

Dengan struktur sebagai berikut

 

 

Jika anda kesulitan, silahkan jalankan code SQL ini..

CREATE TABLE IF NOT EXISTS `user` (  `id_user` int(11) NOT NULL AUTO_INCREMENT,  `username` varchar(15) NOT NULL,  `password` text NOT NULL,  PRIMARY KEY (`id_user`),  UNIQUE KEY `username` (`username`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;CREATE TABLE IF NOT EXISTS `biodata` (  `id_user` int(11) NOT NULL,  `nama` varchar(50) NOT NULL,  `email` text NOT NULL,  `kelamin` enum('','L','P') NOT NULL,  `lahir` date NOT NULL,  `lokasi` varchar(50) NOT NULL,  `bio` text NOT NULL,  `foto` text NOT NULL,  `reg_date` date NOT NULL,  PRIMARY KEY (`id_user`),  UNIQUE KEY `id_user` (`id_user`)) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Jalankan di sini kemudian “GO”..

 

 

Langkah 3

Buat folder  “system” yang akan menampung file-file fungsi php kita biar lebih rapi..

Sekarang kita akan menciptakan “connect.php” di dalam folder  “system” untuk mengkonekkan script php kita ke database..

Struktur foldernya ibarat ini..

sms/

->system/

–connect.php

->view/

 

Kemudian buka connect.php dengan text editor..

Pastekan code ini, klarifikasi fungsi dan perintah code sudah ada dalam komentar code..

<?php //DATA$host=''; //isi dengan hostname database anda, untuk XAMPP biasanya 'localhost'.$username=''; //isi dengan username database anda, untuk XAMPP biasanya 'root'.$password=''; //isi dengan password database anda,untuk XAMPP secara standart kosong ''.$database=''; //isi dengan database yang digunakan, disini aku memakai 'sms_db'.//PROSES$connect_db=mysql_connect($host,$username,$password);$select_db=mysql_select_db($database);//ERRORif(!$connect_db){echo'Terjadi ERROR pada Connect Database. Mungkin data yang anda masukan salah.'; exit;}if(!$select_db){echo'Database tidak sanggup dipilih.. Masukan nama database dengan tepat.'; exit;}?>

Setting koneksi dengan benar dengan mengisi value  yang masih kosong.

Lalu save..

 

Langkah 4

Kita akan mulai menciptakan proses register..

Buka index.php yang di part 1 sudah di buat, buka dengan text editor..

Include kan connect.php di atas include index_header..

<?php//Connect DBinclude_once'system/connect.php';//Memasukan File headerinclude_once'index_header.php';?>

 

Kemudian masukan perintah mysql_close() dibawah  include index_footer..

<?php//memasukan file footerinclude_once'index_footer.php';//menutup koneksi MySQLmysql_close();?>

Kenapa harus ada mysql_close()? Karena code ini di gunkan untuk menutup koneksi yang telah di gunkan dihalaman ini sebab akan memberatkan server jikalau terus di buka, kata guru saya..

Lalu save..

Cek ke benaran settingan connect db anda dengan membuka halaman index..

Buka browser, masukan “localhost/sms” di address bar..

Jika tidak ada pesan “Terjadi ERROR pada Connect Database. Mungkin data yang anda masukan salah.” Atau “Database tidak sanggup dipilih.. Masukan nama database dengan tepat.”

Berarti settingan anda sudah benar..

 

Langkah 5

Kita akan menciptakan proses Sign-Up..

Namun sebelumnya kita buat dulu file “home.php” sebab jikalau proses register sukses maka anda akan di lempar ke “home.php”..

Untuk sementara, isi home.php dengan goresan pena “Ini halaman home”..

Sekarang sudah sanggup mulai kita mulai menciptakan Proses Sign-UP..

Buka index.php dengan text editor, Letakan code ini di bawah code include 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){$error_msg='Username Kosong.';}elseif(!$up_name){$error_msg='Nama lengkap Kosong.';}elseif(!$up_email){$error_msg='Email Kosong.';}elseif(!$up_password1){$error_msg='Password Kosong.';}elseif(!$up_password2){$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'){$error_msg='Username Sudah digunakan. Coba yang lain';}else{//Cek format emailif (!filter_var($up_email, FILTER_VALIDATE_EMAIL)){$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'){$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){$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 pribadi $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;}}}}}}

Kenapa tidak menyimpan data Username dan Password di session?

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

Tidak meyimpan password, sebab disebuah lembaga banyak teman aku 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 6

Pada isyarat diatas error yang terjadi sudah di deskripsikan dengan $up_error_msg, tetapi belum ditampikan.

Untuk menampilkan pesan error di atas form, silahkan patekan code ini di atas Komentar <!– Form Sign-up/Daftar –>..

<!-- ERROR Sign-up/Daftar --><?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_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 hingga email dengan code ini..

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

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 pribadi $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;}}}}}}//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"><!-- Form Sign-in/Login/Masuk --><form action="" method="post"><div class="form-group"><label for="in-username">Username</label><input 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 7

Kita coba melaksanakan register..

 

Jika berhasil maka akan dilempar ke halaman home.php dengan goresan pena “Ini Halaman Home”  ibarat  yang dibentuk di langkah 4..

Untuk mengecek keberhasilan input data kita silahkan cek data di database..

Table “user

 

 

Table “biodata

 

 

SELESAI Membuat Proses Sign-up/Register/Daftar..

Tunggu tutorial Part berikutnya,

Follow aku untuk menerima update tutorial dari saya..

Jika ada kesulitan atau kesalahan, silahkan berkomentar dibawah sini..

Jujur menciptakan tutorial itu 3-4x lebih sulit daripada coding sendiri, tapi kepuasan untuk membuatkan ilmu itu sebanding dengannya..

Terimakasih

Original Post By Arinadi Nur Rohmad

Author: 
    author
    No related post!