Design Simple Messaging System (SMS) 2

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

Melanjutkan tutorial sebelmunya di Design Simple Messaging System (SMS)
Dilangkah-langkah nanti kita akan mengoding di text editor, disini saya menggunakan notepad++

Langkah 4
Sekarang kita akan melakukan koding untuk header.php dan footer.php sebagai struktur dasar dalam pembuatan contoh ini.
Pastekan kode berikut untuk header.php

<!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/style.css" rel="stylesheet">
</head>
<body>

Lalu save, kemudian buat file footer.php lalu pastekan kode berikut

<!-- 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 dalam beberapa file, karena untuk menghemat script yang ada untuk lebih mengefisiensi waktu

Langkah 5
Sekarang kita mulai mendesain tampilan halaman utamanya.
Buat file index.php dan pastekan kode berikut

<?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 Messaging System [SMS]</h1>
                </div>
                <div class="panel-body">
                    <img src="view/images/icon.jpg" class="img-responsive center-block">
                    Membuat Simple Messaging system..
                </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 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>
            <!-- 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 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';
?>

Lalu save...
Langkah 6
buka file style.css dan pastekan kode berikut

body{background: #88C425}

Sekarang coba teman akses di localhost, kira-kira tampilannya seperti ini dan terimakasih

Selesai sudah desain tampilan SMS yang dibuat, tunggu tutorial selanjutnya untuk membuat full programnya. Terimakasih

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Design Simple Messaging System (SMS) 2, Diterbitkan oleh sourcecodeaplikasi2 pada Kamis, 24 Juli 2014. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.