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

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

 bootstrap

 

Font Awesome

 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. 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 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">
    <!-- 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 kode 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 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">
            <!-- 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 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,

Disini saya menggunakan “localhost/sms”..

Jika berhasil akan tampil..

 1

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

2

 

 

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 <!-- Form Sign-in/Login/Masuk -->.

Ganti tulisan “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 membuat form untuk Sign-up.

Kita akan membuat 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 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>
                        <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 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">
            <!-- 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 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..

 3

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


About Author

Arinadi Nur Rohmad

Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..


Comment & Discussions

  • YBR (Guest)
    Keren mastah :v

  • Rifangi
    gan gimanaya caranya buat slide tp pilihan buttonnya disamping

  • L.Muh.Saleh Afiandy
    kok sampulnya aja gan

  • Permana Sidik
    ko di klik ga ada tutorialnya ?

  • Makasih Gan , Bagi Yang Bingung Gak ada sampulnya coba upload foto sendiri , tinggal edit bagian description ganti jadi <img src="gambar kalian" heigth=300px width=300px>

  • Please LOGIN before if you want to give the comment.