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

(1)

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&amp;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.

(2)

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

Sekarang siapkan alat dan bahannya.. Text editor.

1.

Browser. 2.

XAMPP atau server lain. 3. JQuery. (http://code.jquery.com/jquery-1.11.1.min.js ) 4. Bootstrap 3. (https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip 5. )

Font Awesome 4. (http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip ) 6.

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

(3)

sekarang extrak Bootstrap dan Font Awesome kedalam foldernya masing-masing yang telah kita buat tadi..

Bootstrap

Font Awesome

(4)

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

Langkah 3

Sekarang kita akan membuat beberapa file yaitu.. index.php 1. index_header.php 2. index_footer.php 3. index_style.css 4.

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>

(5)

<title>Simple Messanging System</title>

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

</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'; ?>

(6)

<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">  <div class="panel panel-default"> <div class="panel-heading">

</div> <div class="panel-body"> Form </div> </div>  <div class="panel panel-default"> <div class="panel-heading">

</div> <div class="panel-body"> Form </div> </div> </div> </div> </div> <?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..

(7)

Buka browser lalu kita ketikan alamat web kita pada address bar, 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.

(8)

Langkah 7

Sekarang kita akan membuat form untuk Sign-in. Kita akan membuat 3 componen input yaitu:

input text username 1.

input text password 2.

button submit sign-in 3.

kita buat dengan cara..

Buka index.php, cari komentar . Ganti tulisan “Form” di bawah komentar code dengan code berikut.

<label for="in-username">Username</label> <input id="in-username" type="text"

name="in-username" class="form-control" maxlength="15"> </div>

<label for="in-password">Password</label> <input id="in-password" type="password" name="in-password" class="form-control">

</div>

(9)

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

input text nama 2.

input text email 3.

input text password1 4.

input text password2 5.

button submit sign-up 6.

kita buat dengan cara..

Buka index.php, cari komentar .

Ganti tulisan “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>

<label for="up-name">Nama Lengkap</label> <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50">

</div>

<label for="up-email">Email</label> <input id="up-email" type="email" name="up-email" class="form-control" maxlength="70">

</div>

<label for="up-password1">Password</label> <input id="up-password1" type="password" name="up-password1" class="form-control">

</div>

<label for="up-password2">Ulangi Password</label>

(10)

</div>

</form> Lalu save.

Ini adalah full code dari index.php

<?php

//Memasukan File header

include_once'index_header.php'; ?>

<h1 class="panel-title"><i class="fa fa-3x

fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1> </div>

Membuat Simple Messanging system.. </div>

</div> </div>

<div class="panel panel-default"> <div class="panel-heading">

</div>

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

(11)

<label for="in-password">Password</label> <input id="in-password" type="password" name="in-password" class="form-control">

</div>

OK</button>

</form> </div> </div>

<div class="panel panel-default"> <div class="panel-heading">

</div>

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

<label for="up-name">Nama Lengkap</label> <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50">

</div>

<label for="up-email">Email</label> <input id="up-email" type="email" name="up-email" class="form-control" maxlength="70">

</div>

<label for="up-password1">Password</label> <input id="up-password1" type="password" name="up-password1" class="form-control">

</div>

<label for="up-password2">Ulangi Password</label>

(12)

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

(13)

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

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