Assalamualaikum Warohmatullah Hiwabarakatu
Semangat pagi,,
Kali ini saya akan menjelaskan cara membuat Web sederhana dengan menggunakan Framework, dan saya akan menggunakan Framework BOOTSTRAP.
Bootstrap merupakan salah satu framework yang sangat membantu dalam membuat dan mendesain sebuah web/blog dan sangat populer dan banyak digunakan oleh front-end developer. namun, jika anda baru belajar membuat sebuah web saya sarankan mengerti dulu dasar-dasar penggunaan beberapa bahasa pemrograman berbasis web seperti HTML dan CSS seperti cara menggunakan tag tag pada HTML, bagaimana pemanggilan sebuah CSS file. sebab dalam penggunaan Bootstrap, kita akan lebih banyak menggunakan / memanggil ID dan Class pada CSS.
Semangat pagi,,
Kali ini saya akan menjelaskan cara membuat Web sederhana dengan menggunakan Framework, dan saya akan menggunakan Framework BOOTSTRAP.
Bootstrap merupakan salah satu framework yang sangat membantu dalam membuat dan mendesain sebuah web/blog dan sangat populer dan banyak digunakan oleh front-end developer. namun, jika anda baru belajar membuat sebuah web saya sarankan mengerti dulu dasar-dasar penggunaan beberapa bahasa pemrograman berbasis web seperti HTML dan CSS seperti cara menggunakan tag tag pada HTML, bagaimana pemanggilan sebuah CSS file. sebab dalam penggunaan Bootstrap, kita akan lebih banyak menggunakan / memanggil ID dan Class pada CSS.
Struktus file pada Bootstrap :
Bootstrap akan berisi 4 folder, yaitu css,font,img dan js.
Pertama-tama pastikan anda memiliki :
XAMPP
SUBLIME TEXT 3 / NOTEPAD C++
BOOTSTRAP
Langkah-langkahnya :
1. buatlah folder dengan nama yang anda ingin kan, contoh nya Praktikum. dan letakkan folder praktikum tadi diroot Xampp, yaitu c:/xampp/htdocs/praktikum.
2. Ekstrak Bootstrap ke folder root Xampp, yaitu c:/xampp/htdocs/praktikum (di sini saya beri nama asset yang berada dalam folder pratikum, namun bisa sesuaikan yang anda inginkan).
3. jalankan Apache pada Xampp, pastikan Apache berjalan (tidak error).
5. Buatlah Script menggunakan Sublime text 3 / Notepad c++ dan untuk memulai pemanggilan css file pada Bootstrap, gunakan Script di bawah ini dan simpan dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title>Praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</head>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
<html>
<head>
<title>Praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</head>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
(script yang berwarna merah menunjukkan tempat pemanggilan Bootstrap.min.css)
4. dan untuk selanjutnya anda dapat menambahkan script pada bagian (body) web sesuai yang anda inginkan, dan sebagai contoh gunakan script di bawah ini !
<!DOCTYPE html>
<html>
<head>
<title>Praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</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="#">Praktikum Web</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="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</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">
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/bale_bale.jpg" width="600" height="500" alt="">
</a>
<h2>
<a href="#">Pantai Bale Bale, Kemilau Wisata Pulau Batam</a>
</h2>
<p>Pantai Bale Bale, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Batam. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Batam. Pantai Bale-Bale ini terletak di daerah Nongsa tepatnya di Kampung Tua Bakau Serip Nongsa. Jadi patokan untuk menuju pantai ini yaitu gapura besar berwarna kuning yang bertuliskan "Kampung Tua Bakau Serip", ikuti saja jalan beraspal yang ada, pantainya sendiri terletak di antara pemukiman warga.</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/tegar_putri.jpg" width="600" height="600" alt="">
</a>
<h2>
<a href="#">Pantai Tegar Putri - Wisata Pantai Pasir Putih & Pemandangan Sunset</a>
</h2>
<p>Pantai Tegar Putri salah satu destinasi wisata favorit di Pulau Batam. Bagi wisatawan yang berkunjung Ke Batam merasa belum lengkap liburnya jika tidak mampir ke Pantai Tegar Putri. Pantai Tegar Putri yg berada dikawasan jembatan 6 barelang galang baru...pantai ini baru dibuka untuk umum tgl 1 januari 2016..patokan untuk menemukan pantai ini tak begitu sulit, jika kalian sudah tau tower kembar hasyim.. nah sekitar 500 meter dari tower kembar ini..akan ada 1 tower lagi disebelah kanan...nah pantai tegar putri disebelah kirinya..</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/vio_vio.jpg" width="600" height="800" alt="">
</a>
<h2>
<a href="#">Pantai Vio Vio Barelang Batam</a>
</h2>
<p>Salah satu dari sekian banyak obyek wisata pantai yang dapat Anda temui di Batam. Pantai ini terletak di pulau Galang, dan menghadap ke arah Barat. Pantainya cukup bersih, bibir pantainya masih ada, dan lumayan tidak tergerus abrasi. Ticket masuknya sangat terjangkau, hanya 10.000 rupiah per orang. yang menarik adalah ada ayunan di tengah pantai, dan ada persewaan gazebo untuk bersantai</p>
</div>
</div>
<!-- /.row -->
<footer align="center">
<div class="row">
<div class="col-lg-12">
<p font="bold">Copyright © Your Website 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
</body>
</html>
<html>
<head>
<title>Praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</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="#">Praktikum Web</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="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</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">
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/bale_bale.jpg" width="600" height="500" alt="">
</a>
<h2>
<a href="#">Pantai Bale Bale, Kemilau Wisata Pulau Batam</a>
</h2>
<p>Pantai Bale Bale, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Batam. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Batam. Pantai Bale-Bale ini terletak di daerah Nongsa tepatnya di Kampung Tua Bakau Serip Nongsa. Jadi patokan untuk menuju pantai ini yaitu gapura besar berwarna kuning yang bertuliskan "Kampung Tua Bakau Serip", ikuti saja jalan beraspal yang ada, pantainya sendiri terletak di antara pemukiman warga.</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/tegar_putri.jpg" width="600" height="600" alt="">
</a>
<h2>
<a href="#">Pantai Tegar Putri - Wisata Pantai Pasir Putih & Pemandangan Sunset</a>
</h2>
<p>Pantai Tegar Putri salah satu destinasi wisata favorit di Pulau Batam. Bagi wisatawan yang berkunjung Ke Batam merasa belum lengkap liburnya jika tidak mampir ke Pantai Tegar Putri. Pantai Tegar Putri yg berada dikawasan jembatan 6 barelang galang baru...pantai ini baru dibuka untuk umum tgl 1 januari 2016..patokan untuk menemukan pantai ini tak begitu sulit, jika kalian sudah tau tower kembar hasyim.. nah sekitar 500 meter dari tower kembar ini..akan ada 1 tower lagi disebelah kanan...nah pantai tegar putri disebelah kirinya..</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/vio_vio.jpg" width="600" height="800" alt="">
</a>
<h2>
<a href="#">Pantai Vio Vio Barelang Batam</a>
</h2>
<p>Salah satu dari sekian banyak obyek wisata pantai yang dapat Anda temui di Batam. Pantai ini terletak di pulau Galang, dan menghadap ke arah Barat. Pantainya cukup bersih, bibir pantainya masih ada, dan lumayan tidak tergerus abrasi. Ticket masuknya sangat terjangkau, hanya 10.000 rupiah per orang. yang menarik adalah ada ayunan di tengah pantai, dan ada persewaan gazebo untuk bersantai</p>
</div>
</div>
<!-- /.row -->
<footer align="center">
<div class="row">
<div class="col-lg-12">
<p font="bold">Copyright © Your Website 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
</body>
</html>
(script yang berwarna merah menunjukkan isi/ <body> yang anda ingin kan. dan pastikan jika anda ingin men-drop gambar, video, atau yang lainnya di jadikan satu folder dengan folder yang telah di buat diatas)
5. buka web Browser, lalu ketikkan localhost/praktikum, maka hasilnya akan seperti ini.
Selesai.
Terimakasih.
Wassalamualaikum.
0 komentar:
Posting Komentar