» » » Design Simple Messaging System (SMS) 2

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

00:30
,

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top