TUGAS PROJECT WEB PROGRAMMING 1
Assalamu'alaykum warahmatullahi wabarakatuh..
Saya adalah perwakilan dari kelompok yaitu dengan membuat Web Informasi "Toko Kue" dengan menggunakan Bootstrap dan JQuery.
Kelompok kami berangggotakan yaitu :
1. Elisa Siti Julaeha
2. Fina Sifaul Nufus
3. Cindy Windari
4. Septiana Eka Cahyani
Web informasi yang bertemakan toko kue ini, kami memberi dengan nama "Azzahra Cookies"
Sebelumnya, kami akan menjelaskan pengertian dari Web Responsive, HTML, CSS, Bootstrap, dan JQuery
- Responsive Web Design adalah suatu keadaan sebuah halaman web dimana tampilannya akan cocok, rapi dan tetap enak dilihat jika diakses dari perangkat apapun dengan resolusi layar yang berbeda. Misalnya, ketika anda mengakses blog ini dengan perangkat (PC/HP/Tablet) yang berbeda, anda akan melihat tampilannya berbeda karena menyesuaika dengan layar.
- HTML (Hypertext Markup Language) adalah bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks,grafik,serta multimedia dan juga untuk menghubungkan antar tampilan web page
- CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.
- Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer.
- JQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML.
Berikut langkah - langkah pembuatan web informasi Toko Kue "Azzahra Cookies" :
1. Download terlebih dahulu Bootstrap dengan versi 3.3.7, untuk link download nya bisa klik disini. Setelah download, extract file bootstrap tersebut, ubah file dengan nama "cookies". Dan selalu buka web get.bootstrap.com untuk memudahkan pembuatan website nya
2. Buka aplikasi Text Editor "Sublime Text 3" lalu buka folder bootstrap tersebut
3. Simpan terdahulu dengan nama file index.html untuk membuat basic template html. Lalu buka web get.bootstrap.com untuk copy basic template html tersebut ke sublime text 3.
4. Setelah itu, buat juga file dengan nama style.css
5. Lalu, buat codingan script html nya seperti ini :
<!DOCTYPE html>
<html lang="en" id="home">
<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>AZZAHRA COOKIES</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- 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/html5s0hiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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 href="#home" class="navbar-brand page-scroll">AZZAHRA COOKIES</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about" class="page-scroll">About</a></li>
<li><a href="#product" class="page-scroll">Product</a></li>
<li><a href="#contact" class="page-scroll">Contact</a></li>
</ul>
</div>
</nav>
<!-- akhir navbar -->
<!-- jumbotron -->
<div class="jumbotron text-center">
<img src="img/k.jpg" class="img-circle">
<h1>AZZAHRA COOKIES</h1>
<p>Aneka Jenis Kue Kering</p>
</div>
<!-- akhir jumbotron -->
<!-- about -->
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="text-center">About</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<p>Azzahra Cookies menyediakan berbagai macam jenis kue kering yaitu Kue Putri Salju, Kue Nastar, Kue Kastengel, Kue Kering Cokelat, Kue Cokelat isi Kurma, dan Kue Bola-Bola Cokelat</p>
</div>
<div class="col-sm-5">
<p>Kualitas Kue Kering dari Azzahra Cookies dibuat tanpa bahan pengawet apapun, yang memiliki rasa lezat, enak, nikmat, dan bentuk kreasinya yang selalu memikat hati pelanggan. Kami membuat kue kering ini dengan cara higienis agar tetap bersih. Dan tentunya harga yang kami berikan juga sangat terjangkau :)
</p>
<p>Menerima pesanan kue kering untuk acara-acara tertentu seperti acara keluarga, ulang tahun, dll.
</p>
<p>Kami juga menyediakan kue kering dengan berbagai macam rasa dalam bentuk parcel.
</p>
</div>
</div>
</div>
</section>
<!-- akhir about -->
<!-- product -->
<section class="product" id="product">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Product</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/01.jpg">
</a>
<p>Kue Putri Salju</p>
</div>
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/08.jpg">
</a>
<p>Kue Nastar</p>
</div>
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/10.jpg">
</a>
<p>Kue Kastangel</p>
</div>
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/11.jpg">
</a>
<p>Chocochips </p>
</div>
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/12.jpg">
</a>
</div>
<div class="col-sm-4">
<a href="" class="thumbnail">
<img src="img/product/07.jpg">
</a>
</div>
</div>
</div>
</section>
<!-- akhir product -->
<!-- contact -->
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Contact</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" id="nama" class="form-control" placeholder="masukkan nama">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" id="email" class="form-control" placeholder="masukkan e-mail">
</div>
<div class="form-group">
<label for="telp">No. Telephone</label>
<input type="tel" id="telp" class="form-control" placeholder="masukkan no telephone">
</div>
<select class="form-control">
<option>-- Pilih Kategori --</option>
<option>Admin 1</option>
<option>Admin 2</option>
</select>
<div class="form-group">
<label for="pesan">Pesan</label>
<textarea class="form-control" rows="10" placeholder="masukkan pesan"></textarea>
</div>
<button type="submit" class="btn btn-primary">Kirim Pesan</button>
</form>
</div>
</div>
</section>
<!-- akhir contact -->
<!-- footer -->
<footer>
<div class="container text-center">
<div class="row">
<div class="col-sm-"12>
<p><i class="glyphicon glyphicon-copyright-mark"></i> Copyright 2019 | built with <i class="glyphicon glyphicon-heart"> </i> by. Azzahra Cookies</a>.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a href=""></a>
</div>
</div>
</div>
</footer>
<!-- akhir footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Codingan script style.css :
html {
position: relative;
}
body {
margin-bottom: 100px;
margin-top: 30px;
}
.jumbotron {
height: 550px;
background-image: url('../img/header.jpg');
background-attachment: fixed;
background-size: cover;
background-position: 0 -100px;
color: #eaeaea;
overflow: hidden;
}
.jumbotron img {
width: 300px;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}
hr {
width: 250px;
border-top: 3px solid #999;
}
section {
min-height: 600px;
}
.product {
background-color: #eee;
}
.contact {
min-height: 800px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #333;
padding-top: 30px;
}
footer p {
color: #aaa;
font-size: 0.9em;
}
footer p i {
color: purple;
}
6. Untuk memudahkan dalam memanipulasi sebuah elemen, sehingga dapat menimbulkan efek animasi yang keren sesuai orang yang membuat programnya membutuhkan JQuery.
Buka website jquery.com atau langsung klik disini. Lalu, download JQuery versi 3.4.1
7. Setelah itu, buat file baru dengan nama script.js
Lalu, buat codingan seperti ini :
Untuk memilih animasi pada jquery bisa cari di jquery easing atau klik link disini.
Pilih animasi nya pada 'Example' yang sesuai keinginan. Disini kami memakai animasi nya yaitu 'easeInOutExpo'
8. Jadilah website responsive toko kue "AZZAHRA COOKIES"
Berikut tampilan website nya
Sekian dari cara pembuatan website informasi toko kue, mohon maaf jika ada kesalahan dalam kata-kata.
Semoga bermanfaat :)
Wassalamu'alaykum warahmatullahi wabarakatuh..
