Assalamm'alaikum Warahmatullahi Wabarakatuh
Pada kesempatan kali ini saya akan melanjutkan membuat halaman home sebagai halaman pertama yang tampil ketika admin berhasil login. Oiaa saya ini lemah dalam melakukan desain, jadi maaf kalo tampilan yang saya buat itu sangat sangat sederhana.. Nanti inshaa Allah saya akan mensempurnakan hasil karya saya pada akhir tutorial yaaa.. Oke untuk mengingat berikut adalah tampilan sederhana yang saya buat :
Oke untuk diketahui halaman website ini sudah responsive namun masih sangat simple karena saya belum sempat mensempurnakan tampilannya namun baru menyelesaikan fungsi dari halamannya.. Berikut script dari tampilan diatas dengan nama home.php
<html>
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="icon_thejak.ico" type="image/x-icon">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.php">Beranda</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="daftar_korwil.php">Kelola Daftar Korwil<span class="sr-only">(current)</span></a></li>
<li><a href="#">Kelola Jadwal Tour</a></li>
<li><a href="#">Profil Jakmania</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Produk Distro<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Jersey</a></li>
<li><a href="#">Jaket</a></li>
<li><a href="#">Atribut</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Sepatu</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login Anggota</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pengaturan <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logout.php">Logout</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1>Hallo Kawan Jakmania</h1>
<p>Di Halaman Ini Anda Dipersilahkan Untuk Mengelola Website Jakmania dan Diharuskan memiliki Etika dalam Memposting. Karena kami pengurus pusat tidak sembarangan dalam memberikan akses kepada para admin. Silahkan lanjutkan aktifitas kalian dan salam jempol telunjuk.. *Lulucon saja hehe</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Lanjut Membaca</a></p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="panel-footer">
<center>Website Pembelajaran Dasar</center>
</div>
</body>
</html>
Oke selesai,, apabila ada pertanyakan silahkan diajukan. Sekali lagi terimakasih atas perhatiannya dan semoga bermanfaat yaaa...
0 komentar:
Posting Komentar