Membuat Layout Aplikasi Web Dengan PHP - Layout atau tampilan aplikasi web sangatlah diperlukan dalam membuat aplikasi web, dikarenakan untuk menarik perhatian pengunjung agar bisa nyaman dan tertarik untuk mengujungi web kita.
Pada kesempatan kali ini saya akan memberikan panduan untuk membuat Layout Aplikasi web dengan PHP, untuk membuat layout web ada beberapa hal yang harus diperhatikan agar dapat membuat tampilan yang menarik.
Pada kesempatan kali ini saya akan memberikan panduan untuk membuat Layout Aplikasi web dengan PHP, untuk membuat layout web ada beberapa hal yang harus diperhatikan agar dapat membuat tampilan yang menarik.
- Sebelum membuat alangkah baiknya anda membuat desain web terlebih dahulu bisa menggunakan aplikasi photoshop atau yang lainnya.
- Siapkan bahan-bahannya seperti mempersiapkan aplikasi-aplikasi yang dibutuhkan untuk membuat layout aplikasi web, seperti : XAMPP, TEXT EDITOR, WEB BROWSER, DLL
Berikut ini adalah tampilan aplikasi web yang sudah saya buat
Untuk membuat tampilan aplikasi web diatas anda bisa menggunakan script atau code php seperti berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sourcecode Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 610px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #000;
color: white;
padding: 5px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SOURCECODE</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="http://sourcecodeapplication.blogspot.co.id/">About</a></li>
<li><a href="http://sourcecodeapplication.blogspot.co.id/">Projects</a></li>
<li><a href="http://sourcecodeapplication.blogspot.co.id/">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-8 text-left">
<h1>Pengertian PHP</h1>
<p>PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.</p>
<hr>
<h3>Sourcecode Application</h3>
<p>Belajar Membuat Aplikasi dan Download Aplikasi Project</p>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p><a href="http://sourecodeapplication.blogspot.com">Sourcecode Application</a></p>
</footer>
</body>
</html>
Simpan script diatas dengan nama layout.php kemudian buka dengan menggunakan web browser anda.
Demikian panduan Membuat Layout Aplikasi Web Dengan PHP semoga dapat bermanfaat bagi anda dan dapa digunakan sebagaimana mestinya, terima kasih
0 Comments