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

Sekarang siapkan alat dan bahannya.. 1. 2. 3. 4. 5.

Text editor. Browser. XAMPP atau server lain. JQuery. (http://code.jquery.com/jquery-1.11.1.min.js ) 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 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..

Bootstrap

Font Awesome

Dan untuk JQuery, rename jquery-1.11.1.min.js dengan jquery.min.js agar lebih simple.. lalu letakan jquery.min.js yang sudah di download di folder view/js/..

Langkah 3 Sekarang kita akan membuat beberapa file yaitu.. 1. 2. 3. 4.

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.. <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

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 src="view/bootstrap/js/bootstrap.min.js"> 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.. 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,

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

Langkah 7 Sekarang kita akan membuat form untuk Sign-in. Kita akan membuat 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 . Ganti tulisan “Form” di bawah komentar code dengan code berikut.

Username

Password

class="btn btn-success pull-right"> OK

Lalu save

Langkah 8 Sekarang kita akan membuat form untuk Sign-up. Kita akan membuat 6 componen input yaitu: 1. 2. 3. 4. 5. 6.

input text username input text nama input text email 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.

Username

Nama Lengkap

Email

Password

Ulangi Password

Send Data

Lalu save.

Ini adalah full code dari index.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..

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