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
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
(Telah didownload 1 kali, 1x didownload hari ini)
