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

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  melaksanakan CRUD alasannya yaitu kita akan memuali degan mendesign.

Sekarang kita akan menciptakan design awal untuk halaman index, halaman index disini nanti akan berisi form register, login dan deskripsi situs chat kita.

Di tahap ini kita akan memakai Bootstrap 3 dan font Awesome 4 untuk mempercantik tampilan dengan mudah..

Sekarang siapkan alat dan bahannya..

  1. Text editor.
  2. Browser.
  3. XAMPP atau server lain.
  4. JQuery. (http://code.jquery.com/jquery-1.11.1.min.js )
  5. Bootstrap 3. (https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip )
  6. Font Awesome 4. (http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip )

Setelah semua alat dan materi sudah di dapatkan, saatnya kita mulai..

Langkah 1

Saya asumsikan anda sudah memasang XAMPP atau server lain..

Buka root direktori pada XAMPP folder berjulukan “htdocs” kemudian buat sebuah folder project. Disini saya memberi pola 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 menyerupai 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..

Bootstrap

 

 

Font Awesome

 

 

Dan untuk JQuery, rename jquery-1.11.1.min.js dengan  jquery.min.js semoga lebih simple..

lalu letakan jquery.min.js yang sudah di download di folder view/js/..

 

Langkah 3

Sekarang kita akan menciptakan beberapa file yaitu..

  1. index.php
  2. index_header.php
  3. index_footer.php
  4. 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 melaksanakan Coding untuk index_header.php dan index_footer.php sebagai struktur dasar..

Buka index_header.php dengan text editor..

Pastekan instruksi 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"><!-- view port, melihat ukuran layar device --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Judul --><title>Simple Messanging System</title><!-- Bootstrap --><link href="view/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome --><link href="view/fa/css/font-awesome.min.css" rel="stylesheet"><!-- CSS anda --><link href="view/css/index_style.css" rel="stylesheet"></head><body>

Lalu save..

 

Buka index_footer.php dengan text editor..

Pastekan instruksi berikut, fungsi dari code sudah ada dalam komentar code..

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="view/js/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="view/bootstrap/js/bootstrap.min.js"></script></body></html>

Lalu save..

Kenapa harus memotong kepala dan kaki index? Agar kelak jikalau kita membutuhkan instruksi yang sama kita tinggal mengincludekan potongang code itu…

 

Langkah 5

kita akan mulai mendesign,

saya akan menciptakan layout dengan tiga bab 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 headerinclude_once'index_header.php';?><div class="container-fluid" style="margin-top: 10%"><div class="row"><div class="col-md-4 col-md-offset-3"><!-- 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">Description</div></div></div><div class="col-md-3"><!-- Form Sign-in/Login/Masuk --><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><div class="panel-body">Form</div></div><!-- Form 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">Form</div></div></div></div></div><?php//memasukan file footerinclude_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 kemudian kita ketikan alamat web kita pada address bar,

Disini saya memakai “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 dibentuk di langkah 3 tadi, kemudian edit background body dengan code ini..

body{background: #88C425}

lalu save.

kemudian Refresh browser, jikalau berhasil akan menyerupai ini..

 

 

Langkah 7

Sekarang kita akan menciptakan form untuk Sign-in.

Kita akan menciptakan 3 componen input yaitu:

  1. input text username
  2. input text password
  3. button submit sign-in

kita buat dengan cara..

Buka index.php, cari komentar <!– Form Sign-in/Login/Masuk –>.

Ganti goresan pena “Form” di bawah komentar code dengan code berikut.

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

Lalu save

 

Langkah 8

Sekarang kita akan menciptakan form untuk Sign-up.

Kita akan menciptakan 6 componen input yaitu:

  1. input text username
  2. input text nama
  3. input text email
  4. input text password1
  5. input text password2
  6. button submit sign-up

kita buat dengan cara..

Buka index.php, cari komentar <!– Form Sign-up/Daftar –>.

Ganti goresan pena “Form” di bawah komentar code dengan code berikut.

<form action="" method="post"><div class="form-group"><label for="up-username">Username</label><input 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 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 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>

Lalu save.

 

Ini yaitu full code dari index.php

<?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"><!-- 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"><!-- Form Sign-up/Daftar --><form action="" method="post"><div class="form-group"><label for="up-username">Username</label><input 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 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 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';?>

 

Langkah 9

Kita coba tampilkan design form yang telah kita buat di browser.

Caranya, masukan link web kita pada address bar. Disini saya memakai “localhost/sms”..

Jika berhasil tampilannya menyerupai ini..

 

Deskripsi secara optional sanggup anda ubah sesuka hati dengan menyisipkan gambar atau apapun..

 

SELESAI Design Sampul..

jika ada kesulitan silahkan layangkan komentar..

Untuk menciptakan database dan system sign-in dan sign-out kita akan membahas di part berikutnya, follow saya untuk menerima lanjutan tutorial ini..

Terimakasih

Original Post By Arinadi Nur Rohmad

Author: 
    author
    No related post!