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

Transkripsi

1

2 Membuat Simple Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 1] Oleh: Arinadi Nur Rohmad Episode "Design Sampul" Asalamualaikum, Dalam pembuatan Online Messanger atau Chat ini kita akan melakukanya secara berurutan sesuai dengan konsep CRUD (Creat, Read, Update, Delete).. Tapi dalam tutorial pertama ini kita belum akan&nbsp; melakukan CRUD karena kita akan memuali degan mendesign... Episode Design Sampul Asalamualaikum, Dalam pembuatan Online Messanger atau Chat ini kita akan melakukanya secara berurutan sesuai dengan konsep CRUD (Creat, Read, Update, Delete).. Tapi dalam tutorial pertama ini kita belum akan melakukan CRUD karena kita akan memuali degan mendesign. Sekarang kita akan membuat design awal untuk halaman index, halaman index disini nanti akan berisi form register, login dan deskripsi situs chat kita. Di tahap ini kita akan menggunakan Bootstrap 3 dan font Awesome 4 untuk mempercantik tampilan dengan mudah..

3 Sekarang siapkan alat dan bahannya.. 1. Text editor. 2. Browser. 3. XAMPP atau server lain. 4. JQuery. ( ) 5. Bootstrap 3. ( ) 6. Font Awesome 4. ( ) Setelah semua alat dan bahan sudah di dapatkan, saatnya kita mulai.. Langkah 1 Saya asumsikan anda sudah memasang XAMPP atau server lain.. Buka root direktori pada XAMPP folder bernama htdocs lalu buat sebuah folder project. Disini saya memberi contoh folder dengan nama sms atau saya sebut Simple Messanging System. Selanjutnya kita buat folder view di dalam folder sms.. Lalu buat folder bootstrap dan fa didalam folder view sebagai wadah file dari Bootstrap 3 dan Font Awesome 4. Lalu buat juga folder css, js, dan images untuk wadah file css, js, dan image yang mungkin akan kita perlukan nanti atau di tahap selanjutnya. Hasil struktur foldernya seperti ini.. sms/ ->view/ -->bootstrap/ -->css/ -->fa/ -->images/ -->js/ Langkah 2 sekarang extrak Bootstrap dan Font Awesome kedalam foldernya masing-masing yang telah kita buat tadi..

4 Bootstrap Font Awesome Dan untuk JQuery, rename jquery min.js dengan jquery.min.js agar lebih simple.. lalu letakan jquery.min.js yang sudah di download di folder view/js/..

5 Langkah 3 Sekarang kita akan membuat beberapa file yaitu index.php index_header.php index_footer.php index_style.css buatlah file diatas sesuai struktur folder ini: sms/ -index.php -index_header.php -index_footer.php ->view/ -->css/ ---index_style.css Langkah 4 Sekarang kita akan melakukan Coding untuk index_header.php dan index_footer.php sebagai struktur dasar.. Buka index_header.php dengan text editor.. Pastekan kode berikut, fungsi dari code sudah ada dalam komentar code.. <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>simple Messanging System</title>

6 <link href="view/bootstrap/css/bootstrap.min.css" rel="stylesheet">  <link href="view/fa/css/font-awesome.min.css" rel="stylesheet">  <link href="view/css/index_style.css" rel="stylesheet"> </head> <body> Lalu save.. Buka index_footer.php dengan text editor.. Pastekan kode berikut, fungsi dari code sudah ada dalam komentar code..  <script src="view/js/jquery.min.js"></script>  <script src="view/bootstrap/js/bootstrap.min.js"></script> </body> </html> Lalu save.. Kenapa harus memotong kepala dan kaki index? Agar kelak jika kita membutuhkan kode yang sama kita tinggal mengincludekan potongang code itu... Langkah 5 kita akan mulai mendesign, saya akan membuat layout dengan tiga bagian yaitu untuk deskripsi, sign-in, dan sign-up.. Pastekan code berikut pada index.php, fungsi dari code sudah ada dalam komentar code.. <?php //Memasukan File header include_once'index_header.php';?> <div class="container-fluid" style="margin-top: 10%"> <div class="row"> <div class="col-md-4 col-md-offset-3">  <div class="panel panel-default"> <div class="panel-heading">

7 <h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1> <div class="panel-body"> Description <div class="col-md-3">  <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-2x fa-unlock-alt text-success"></i> Sign-In</h3> <div class="panel-body"> Form  <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 class="panel-body"> Form <?php //memasukan file footer include_once'index_footer.php';?> Lalu save.. Langkah 6 Sekarang kita coba menampikan file yang kita design yang kita buat tadi.. Caranya, pastikan Apache pada XAMPP sudah Run.. Buka browser lalu kita ketikan alamat web kita pada address bar,

8 Disini saya menggunakan localhost/sms.. Jika berhasil akan tampil.. Tapi saya tidak terlalu suka dengan background bodynya yang berwarna putih.. Saya akan ganti dengan warna hijau.. Caranya, buka file index_style.css yang telah dibuat di langkah 3 tadi, lalu edit background body dengan code ini.. body{background: #88C425} lalu save. kemudian Refresh browser, jika berhasil akan seperti ini..

9 Langkah 7 Sekarang kita akan membuat form untuk Sign-in. Kita akan membuat 3 componen input yaitu: input text username input text password button submit sign-in kita buat dengan cara.. Buka index.php, cari komentar . Ganti tulisan Form di bawah komentar code dengan code berikut. <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"

10 class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button> </form> Lalu save Langkah 8 Sekarang kita akan membuat form untuk Sign-up. Kita akan membuat 6 componen input yaitu: input text username input text nama input text input text password1 input text password2 button submit sign-up kita buat dengan cara.. Buka index.php, cari komentar . Ganti tulisan Form di bawah komentar code dengan code berikut. <form action="" method="post"> <label for="up-username">username</label> <input id="up-username" type="text" name="up-username" class="form-control" maxlength="15"> <label for="up-name">nama Lengkap</label> <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50"> <label for="up- "> </label> <input 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>

11 <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> Lalu save. Ini adalah full code dari index.php <?php //Memasukan File header 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">

12 <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 fa-paper-plane-o text-success"></i> Sign-Up</h3> <div class="panel-body">  <form action="" method="post"> <label for="up-username">username</label> <input id="up-username" type="text" name="up-username" class="form-control" maxlength="15"> <label for="up-name">nama Lengkap</label> <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50"> <label for="up- "> </label> <input 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">

13 <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button> </form> <?php //memasukan file footer include_once'index_footer.php';?> Langkah 9 Kita coba tampilkan design form yang telah kita buat di browser. Caranya, masukan link web kita pada address bar. Disini saya menggunakan localhost/sms.. Jika berhasil tampilannya seperti ini.. Deskripsi secara optional dapat anda ubah sesuka hati dengan menyisipkan gambar atau apapun..

14 SELESAI Design Sampul.. jika ada kesulitan silahkan layangkan komentar.. Untuk membuat database dan system sign-in dan sign-out kita akan membahas di part berikutnya, follow saya untuk mendapat lanjutan tutorial ini.. 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..