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 aku memakai notepad++
Langkah 4
Sekarang kita akan melaksanakan koding untuk header.php dan footer.php sebagai struktur dasar dalam pembuatan pola ini.
Pastekan arahan berikut untuk header.php
1 |
<!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 arahan berikut
1 |
<!-- 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, alasannya untuk menghemat script yang ada untuk lebih mengefisiensi waktu
Langkah 5
Sekarang kita mulai mendesain tampilan halaman utamanya.
Buat file index.php dan pastekan arahan berikut
1 |
<?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 arahan berikut
1 |
body{background: #88C425} |
Sekarang coba teman kanal di localhost, kira-kira tampilannya menyerupai ini dan terimakasih
Selesai sudah desain tampilan SMS yang dibuat, tunggu tutorial selanjutnya untuk membuat full programnya. Terimakasih