A. JUDUL
Template Bootstrap untuk Administrator Pages
B. PENDAHULUAN
1. Pengertian
Template web , halaman utama yang digunakan untuk menghasilkan halaman web.
2. Latar Belakang
Template dibuat agar supaya sebuah website terlihat lebih menarik, dan menjadi pusat perhatian dari pengunjung. Disini pada halaman admin, akan kita buatkan sebuah template agar tidak monoton tampilannya.
3. Maksud danTujuan
-
Memudahkan admin dalam mengoperasikan
- Menarik perhatian administrator
4. Hasil yang
Diharapkan
- Halaman admin dapat diberi template yang menarik, sehingga si admin lebih mudah dalam berinterksi dengan sistem
C. ALAT dan BAHAN
-
Laptop
-
Browser
-
Text Editor
D. JANGKA WAKTU
2 jam
E. LANGKAH-LANGKAH
1. Siapkan bootstrap vendor yakni bisa di download
a. bootstrap.min.js disini
b. bootstrap.min.css disini
c. Untuk jquery bisa didonload di jquery.com
2. Setelah itu, buat sebuah index yang berisisikan script seperti diwawah ini
3. Script diatas berisi tag tag, dan link untuk memanggil file-file yang hendak di includekan.<!DOCTYPE html><html lang="en"><head><title>Administrator</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../bootstrap/css/bootstrap.css"><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><script src="../jQuery/jqeury.js"></script><script src="../jQuery/jqeury.min.js"></script><script src="../JS/bootstrap.js"></script><script src="../JS/bootstrap.min.js"></script><style>/* Set height of the grid so .sidenav can be 100% (adjust if needed) */.row.content {height: 558px}/* Set gray background color and 100% height */.sidenav {background-color: #f1f1f1;height: 100%;}/* Set black background color, white text and some padding */footer {background-color: #555;color: white;padding: 15px;}/* 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><div class="container-fluid"><div class="row content"><div class="col-sm-3 sidenav"><h4>Mebel's Company</h4><ul class="nav nav-pills nav-stacked"><li class="active"><a href="index.php">Home</a></li><li><a href="produksi/index.php">Produksi</a></li><li><a href="staf/index.php">Pegawai</a></li><li><a href="produksi/index.php">Inventory</a></li><li><a href="produksi/index.php">Financial</a></li><li><a href="logout.php">Logout</a></li></ul><br><div class="input-group"><input type="text" class="form-control" placeholder="Search Blog.."><span class="input-group-btn"><button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button></span></div></div><div class="col-sm-9"><h4><small>RECENT POSTS</small></h4><hr><h2>I Love Food</h2><h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5><h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br><p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br></div></div></div></div><footer class="container-fluid"><p>Footer Text</p></footer></body></html>
4. Buka hasilnya di browser.
6. Sehingga pada file administrator sudah ada template nya.
7. Untuk template insert yang saya buat saya beri polosan seperti gambar dibawah :
F. HASIL yang DIDAPAT
Pada halaman admin tidak polosan lagi, akan tetapi lebih menarik. Karena sudah ada templatenya.
G. PENEMUAN
PERMASALAHAN
-
H. KESIMPULAN
Template tidak hanya dipasang di halaman utama saja, akan tetapi juga pada halaman administrator, agar lebih mudah ketika mengoperasikan.
I. REFERENSI
Tidak ada komentar:
Write komentar