Pada part 5 ini, kita akan beralih dulu ke cara membuat halaman / page. Pada part-part sebelumnya kita baru membangun halaman beranda (home/index.html) dan baru sampai bagian My Projects + tombol Lihat Semua Projects. Tombol ini tentunya harus mengarah ke suatu halaman yang menampilkan semua projects karena pada bagian My Projects itu hanya menampilkan beberapa projects saja.
Silahkan buat folder baru di folder root website masing-masing, bebas mau dibuat dimana tapi disarankan sejajar saja dengan folder CSS supaya tidak kesulitan memanggilnya nanti. Silahkan buat folder baru, berinama apa saja yang penting tanpa spasi dan usahakan huruf kecil semua supaya tidak bingung memanggilnya. Misalnya “pages“.
Sekarang, buka code editornya misalnya aplikasi Sublime Text. Buat file baru di code editor kemudian Save sebagai file HTML didalam folder “pages” tadi. Kasih nama file itu yang gampang-gampang aja supaya gak ribet manggilnya, misalnya semua-projects.html. Sekarang saatnya membangun halaman ini.
Buka kembali file index.html / beranda, salin code dari paling atas DOCTYPE sampai tag penutup /nav Bootstrap. Tempelkan di file semua-projects.html, kemudian salin lagi code di index.html bagian bawahnya dari mulai script di footer sampai tag penutup </html> dan tempelkan di file semua-projects.html tepat dibawah tag penutup </nav> tadi. Maka hasilnya akan seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tutorial Rio Bermano</title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</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="../index.html">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li class="active"><a href="#">Semua Projects</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Kustom</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jqueryo.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Kenapa disalin dari index.html ? Karena navigasi ini kita buat sama antara halaman beranda dan halaman semua projects, silahkan ganti atau buat berbeda jika ingin menampilkan navigasi berbeda. Diantara code yang disalin ini baru kita membangun sebuah halaman.
Sejauh ini, waktu dilihat semua-projects.html di browser pasti berantakan. Gak perlu khawatir 😀 itu cuma soal direktori aja. Karena posisi index.html dan semua-projects.html berbeda (tidak sejajar) maka kita perlu merubah cara pemanggilan CSS dan Script yang ada di semua-projects.html.
Silahkan tambahkan dua titik dan garis miring (../) disetiap pemanggilan direktori, contoh: src=”../js/bootstrap.min.js”. Begitu juga untuk file CSS dan file lainnya karena posisi index dan semua projects berbeda, kalo masih bingung tinggal di copy aja code diatas atau klik disini untuk mempelajari lebih lanjut tentang memanggil file di root direktori berbeda.
Jangan lupa, pada menu Semua Projects dikasih link yang mengarah ke halaman semua-projects.html contoh: “pages/semua-projects.html“. Bisa klik disini juga untuk mempelajari cara menyisipkan link di HTML atau klik disini untuk membuat link a href pada menu terbuka di tab browser baru ketika di klik.
Selanjutnya, silahkan salin code dari file index.html bagian My Skills yang sebelumnya sudah dibuat dan tempelkan di file semua-projects.html setelah tag penutup </nav>:
<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Portfolios / Projects</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href="../portfolio/portfolio1.html"><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div><!-- akhir class row portfolio pertama-->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div><!-- akhir class row portfolio kedua-->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div><!-- akhir class row portfolio kedua-->
</div>
Karena ini hasil salinan dari My Skills, artinya tampilannya akan sama dengan apa yang ditampilkan pada bagian My Skills di index.html. Silahkan ganti-ganti aja sesuai keinginan. Bisa perhatikan pada kode diatas, sudah ganti bagian-bagiannya sehingga berbeda dengan apa yang ditampilkan di My Skills. Save dan lihat hasilnya !
Untuk menambahk atau mengurangi baris, bisa atur aja di bagian row. Setelah mengatur halaman ini, jangan lupa untuk memberikan link di tombol Lihat Semua Project pada bagian My Projects index.html yang mengarah ke halaman semua-projects.html. Berikan link href=”pages/semuaprojects.html”.
Tambahan
Mumpung ingat, kita buat bagian Footer yang akan digunakan untuk menampilkan copyright. Silahkan buat code seperti ini:
<div class="container-fluid">
<div class="row copyright text-center">
<p>All Rights Reserved 2016 | <a href="https://posciety.com">Tutorial Rio Bermano</a></p>
</div>
</div>
Buat kode ini di sebelum script Bootstrap bagian bawah atau di setelah bagian terakhir setiap masing-masing halaman. Selanjutnya berikan nilai pada file CSS seperti ini, untuk mengatur style dari Footer:
.copyright {
background-color: #c41617;
padding: 1% 0;
}
.copyright p {
color: #fff;
}
.copyright a {
color: #000;
}
.copyright a:hover {
text-decoration: none;
color: #fff;
}
Silahkan atur style nya sesuai selera ya… Jangan lupa buat Copyright juga di halaman index.html dan di semua halaman yang kalian buat.
Masih bingung ? Lihat : Video tutorial cara membuat template Bootstrap sendiri part 5.
Sudah paham ? Yuk lanjut ke part berikutnya, atau lihat lagi part sebelumnya.
Selamat mencoba !