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

Transkripsi

1

2 Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2] Oleh: Arinadi Nur Rohmad Episode System Sign-Up/Registerasi/Daftar User Asalamualaikum, Setelah di part 1 kita telah membuat form untuk Sign-in dan Sign-up yang sekarang kita akan membuat form itu dapat berfungsi untuk memasukan data (Sign-Up).. Sekarang siapkan Alat dan Bahannya.. Text editor. Browser. XAMPP atau server la... Episode System Sign-Up/Registerasi/Daftar User Asalamualaikum, Setelah di part 1 kita telah membuat form untuk Sign-in dan Sign-up yang sekarang kita akan membuat form itu dapat berfungsi untuk memasukan data (Sign-Up).. Sekarang siapkan Alat dan Bahannya.. 1. Text editor. 2. Browser.

3 3. XAMPP atau server lain. Setelah semua terkempul sekarang dapat 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 membuat Database sebagai wadah data user, Saya asumsikan anda sudah bias menggunakan PHPmyAdmin.. Buka XAMPP lalu Run Apache dan MySQL.. Langkah 2 Buka PhpMyAdmin.. Sekarang buat database dengan nama sesuka anda, saya menggunakan database name sms_db.. Lalu buat table user Dengan struktur sebagai berikut Lalu buat table biodata Dengan struktur sebagai berikut

4 Jika anda kesulitan, silahkan jalankan code SQL ini.. CREATE TABLE IF NOT EXISTS ùser` ( ìd_user` int(11) NOT NULL AUTO_INCREMENT, ùsername` varchar(15) NOT NULL, `password` text NOT NULL, PRIMARY KEY (ìd_user`), UNIQUE KEY ùsername` (ùsername`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; CREATE TABLE IF NOT EXISTS `biodata` ( ìd_user` int(11) NOT NULL, `nama` varchar(50) NOT NULL, ` ` 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 (ìd_user`), UNIQUE KEY ìd_user` (ìd_user`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; Jalankan di sini lalu GO.. Langkah 3 Buat folder system yang akan menampung file-file fungsi php kita agar lebih rapi.. Sekarang kita akan membuat connect.php di dalam folder system untuk mengkonekkan script php kita ke database.. Struktur foldernya seperti ini.. sms/ ->system/ --connect.php

5 ->view/ Kemudian buka connect.php dengan text editor.. Pastekan code ini, penjelasan 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 saya menggunakan 'sms_db'. //PROSES $connect_db=mysql_connect($host,$username,$password); $select_db=mysql_select_db($database); //ERROR if(!$connect_db){echo'terjadi ERROR pada Connect Database. Mungkin data yang anda masukan salah.'; exit; if(!$select_db){echo'database tidak dapat dipilih.. Masukan nama database dengan tepat.'; exit;?> Setting koneksi dengan benar dengan mengisi value yang masih kosong. Lalu save.. Langkah 4 Kita akan mulai membuat 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 DB include_once'system/connect.php'; //Memasukan File header include_once'index_header.php';?>

6 Kemudian masukan perintah mysql_close() dibawah include index_footer.. <?php //memasukan file footer include_once'index_footer.php'; //menutup koneksi MySQL mysql_close();?> Kenapa harus ada mysql_close()? Karena code ini di gunkan untuk menutup koneksi yang telah di gunkan dihalaman ini karena akan memberatkan server jika 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 dapat dipilih.. Masukan nama database dengan tepat. Berarti settingan anda sudah benar.. Langkah 5 Kita akan membuat proses Sign-Up.. Namun sebelumnya kita buat dulu file home.php karena jika proses register sukses maka anda akan di lempar ke home.php.. Untuk sementara, isi home.php dengan tulisan Ini halaman home.. Sekarang sudah bisa mulai kita mulai membuat Proses Sign-UP.. Buka index.php dengan text editor, Letakan code ini di bawah code include connect.php.. //Proses Sign-UP/Register if($_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_ =htmlentities(mysql_real_escape_string($_post['up- ']));

7 $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_ ){$error_msg=' Kosong.'; elseif(!$up_password1){$error_msg='password Kosong.'; elseif(!$up_password2){$error_msg='password Kosong.'; //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'; //Cek format if (!filter_var($up_ , FILTER_VALIDATE_ )) { $error_msg=' tidak Valid.'; else { //Cek keunikan $ _qry=mysql_query("select FROM biodata WHERE ='$up_ ' LIMIT 0,1"); $cek_ =mysql_num_rows($ _qry); if($cek_ !='0'){ $error_msg=' Sudah digunakan.'; //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){ $error_msg='password Tidak Cocok.'; //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, ,reg_date) VALUE

8 ('$id_user','$up_name','$up_ ',now())"); //membuat session $_SESSION['chat_i_id']=$id_user; //melempar ke halaman lain header('location: home.php'); exit; 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 6 Pada kode 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 ..  <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'';?> jika terjadi error maka form akan kembali kosong, untuk mengatasinya kita tambakan data yang telah diambil ke value.. Ganti input username sampai dengan code ini.. <label for="up-username">username</label> <input value="<?php echo $up_username;?>"

9 id="up-username" type="text" name="up-username" class="form-control" maxlength="15"> <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"> <label for="up- "> </label> <input value="<?php echo $up_ ;?>" id="up- " type=" " name="up- " class="form-control" maxlength="70"> Lalu save Ini Full Code index.php <?php //Connect DB include_once'system/connect.php'; //Proses Sign-UP/Register if($_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_ =htmlentities(mysql_real_escape_string($_post['up- '])); $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_ ){$up_error_msg=' Kosong.'; elseif(!$up_password1){$up_error_msg='password Kosong.'; elseif(!$up_password2){$up_error_msg='password Kosong.'; //Cek Keunikan Username $username_qry=mysql_query("select username FROM user WHERE username='$up_username' LIMIT 0,1");

10 $cek_username=mysql_num_rows($username_qry); if($cek_username!='0'){ $up_error_msg='username Sudah digunakan. Coba yang lain'; //Cek format if (!filter_var($up_ , FILTER_VALIDATE_ )) { $up_error_msg=' tidak Valid.'; else { //Cek keunikan $ _qry=mysql_query("select FROM biodata WHERE ='$up_ ' LIMIT 0,1"); $cek_ =mysql_num_rows($ _qry); if($cek_ !='0'){ $up_error_msg=' Sudah digunakan.'; //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.'; //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, ,reg_date) VALUE ('$id_user','$up_name','$up_ ',now())"); //membuat session $_SESSION['chat_i_id']=$id_user; //melempar ke halaman lain //Memasukan File header header('location: home.php'); exit;

11 include_once'index_header.php';?> <div class="container-fluid" style="margin-top: 5%"> <div class="row"> <div class="col-md-5 col-md-offset-2">  <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 class="panel-body"> <img src="view/images/icon.png" class="img-responsive center-block"> Membuat Simple Messanging system.. <div class="col-md-3">  <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 class="panel-body">  <form action="" method="post"> <label for="in-username">username</label> <input id="in-username" type="text" name="in-username" class="form-control" maxlength="15"> <label for="in-password">password</label> <input id="in-password" type="password" name="in-password" class="form-control"> <button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button> </form>  <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-2x

12 fa-paper-plane-o text-success"></i> Sign-Up</h3> <div class="panel-body">  <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'';?>  <form action="" method="post"> <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"> <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"> <label for="up- "> </label> <input value="<?php echo $up_ ;?>" id="up- " type=" " name="up- " class="form-control" maxlength="70"> <label for="up-password1">password</label> <input id="up-password1" type="password" name="up-password1" class="form-control"> <label for="up-password2">ulangi Password</label> <input id="up-password2" type="password" name="up-password2" class="form-control"> <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button> </form>

13 <?php //memasukan file footer include_once'index_footer.php'; //menutup koneksi MySQL mysql_close();?> Langkah 7 Kita coba melakukan register.. Jika berhasil maka akan dilempar ke halaman home.php dengan tulisan Ini Halaman Home seperti yang dibuat di langkah 4.. Untuk mengecek keberhasilan input data kita silahkan cek data di database.. Table user

14 Table biodata SELESAI Membuat Proses Sign-up/Register/Daftar.. Tunggu tutorial Part berikutnya, Follow saya untuk mendapat update tutorial dari saya.. Jika ada kesulitan atau kesalahan, silahkan berkomentar dibawah sini.. Jujur membuat tutorial itu 3-4x lebih sulit daripada coding sendiri, tapi kepuasan untuk berbagi ilmu itu sebanding dengannya.. Terimakasih 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..