Pada artikel kali ini, saya akan membahas membuat project web sederhana
1. Membuka XAMPP, lalu klik start pada Apache dan MySQL.
2. Buka This PC > Local Disk (C:) > xampp > htdocs. Setelah itu membuat new folder yaitu praktikum, di dalam folder tersebut terdapat folder asset. Dan di dalam folder asset terdapat folder css, js dan image.
3. Buka sublime, setelah itu klik File > Open Folder> Lokal Disk (C:) > xampp > htdcos > praktikum > setelah itu klik select folder.
4. Save script di link bawah ini!!!
-------(save di folder css).
-------(save di folder js).
-------(save di folder js).
-------(save di folder js).
5. Setelah selesai kita men-save link yg diatas. Lalu kita buka Sublime > file > lalu buat script seperti dibawah ini!! Lalu save kan "index.php".
<!DOCTYPE html>
<html>
<head>
<title>praktikum</title>
<link rel="stylesheet" type="text/css" href="asset/css/coba.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>
6. Pada bagian kepala<head>terdapat tag<meta>yang menampung nilai viewport. Viewport digunakan untuk desain web yang responsif (responsive web design). Dan letakkan dibawah <head> paling atas.
<meta name="viewport" content="width=device-width, initial-scale=1">
7. Navigation Bar (NavBar)
Navbar dibuat dengan tag <nav> dan letakkan dibawah body. Navbar juga memiliki banyak pilihan component navbar
Navbar dibuat dengan tag <nav> dan letakkan dibawah body. Navbar juga memiliki banyak pilihan component navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="text-uppercase"><p class="navbar-brand" href="#">Home</a></p> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<p class="text-uppercase"><a class="nav-link" href="#">Anime List<span class="sr-only">(current)</span></a></p>
</li>
<li class="nav-item">
<p class="text-uppercase"><a class="nav-link" href="#">Jadwal Rilis</a></p>
</li>
<li class="nav-item active">
<p class="text-uppercase"><a class="nav-link" href="#">About<span class="sr-only">(current)</span></a></p>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
-Tampilan Desktop-
-Tampilan Mobile-
8. Carousel
Carousel atau sering juga disebut slideshow merupakan proses penampilan gambar
gambar yang diberi slide. Dan letakkan script setelah </nav>.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="asset/image/gambar.png">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="asset/image/suka.jpg">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="asset/image/yash.png">
</div>
</div>
</div>
-Tampilan Desktop-
9. Card
<div class="carousel-item active">
<img class="d-block w-100" src="asset/image/gambar.png">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="asset/image/suka.jpg">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="asset/image/yash.png">
</div>
</div>
</div>
-Tampilan Desktop-
-Tampilan Mobile-
Card adalah fitur yang diberikan di bootstrap 4 untuk membuat box yang memiliki border dan padding didalamnya, dalam card ini anda dapat mengatur bagian header, footer, content, warna dan pengaturan yang lain. Dan berikut langkah-langkahnya:
- Untuk membuat jarak makanya gunakan <hr>.
- Letakkan dibawah </div>.
- Tambahkan class .card didalam tag <div>.
- Didalam tag <div> buatlah tag <div> lagi dan tambahkan class .card-body untuk membuat bagian isi dari card tersebut.
<hr>
<div class="row">
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-md">
<div class="card">
<img class="card-img-top" src=asset/image/gambar.png alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Clannad</h4>
<h6 class="card-title">Description:</h6>
<p class="text-justify">A high school student who cares little about school or others meets a lonely girl who had to repeat a year while all her friends finished high school. He decides to hang out with her and soon meets more friendly students.</p>
<p class="card-text"><small class="text-muted">Released: 2004</small></p>
<p class="text-justify">A high school student who cares little about school or others meets a lonely girl who had to repeat a year while all her friends finished high school. He decides to hang out with her and soon meets more friendly students.</p>
<p class="card-text"><small class="text-muted">Released: 2004</small></p>
<button type="button" class="btn btn-secondary btn-lg">Go!!!</button>
</div>
</div>
</div>
</div>
-Tampilan Desktop-
-Tampilan Mobile-
Sekian,
Wassalamu'alaikum...
Tidak ada komentar:
Posting Komentar