LATIHAN WEBSITE BOOTSTRAP

 Minggu ini, kita akan membuat website dengan bantuan grid container bootstrap.



Link Website: Link

Link Repository: Repository

Penjelasan: 

Di head html, kita menambah import file bootstrap dan jquery agar bisa digunakan, 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Template Web Responsive dengan Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Untuk header, bisa digunakan class navbar.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
        <img src="https://media.discordapp.net/attachments/975483864829001728/1024713773770096640/unknown.png" alt="logo" style="width:200px;">
    </a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Pemrograman</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Database</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Framework</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lainnya</a>


Dan untuk setiap kolom artikel bisa menggunakan class col-sm-3, dengan 3 berarti kolom akan menggunakan 3/12 dari layar website.

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="thumbnail">
                <a><img src="https://media.discordapp.net/attachments/975483864829001728/1024708496362586152/unknown.png?width=659&height=653" width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3>Belajar HTML & CSS</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                </div>


Komentar

Posting Komentar

Postingan populer dari blog ini

Latihan Backend PHP + MYSQL

Gambar
Repository Github:  Poodoop/Tugas-CRUD-PHP-MYSQL (github.com)  Untuk latihan PHP, saya membuat sistem CRUD (Create, Read, Update, Delete) pendaftaran siswa menggunakan PHP dan MYSQL. Referensi yang dipakai adalah  Tutorial PHP dan MySQL: Membuat Aplikasi CRUD [Studi Kasus Pendaftaran Siswa Baru] (petanikode.com) .  Pertama, kita menggunakan phpmyadmin untuk membuat database yang bisa diakses website. Kita bisa menghubungkan database tersebut dengan PHP pada file config.php yang akan dibuat dengan MYSQLI. kode website akan dibuat didalam folder xampp/htdocs agar bisa diakses. <?php $server = "localhost" ; $user = "root" ; $password = "" ; $nama_database = "pendaftaran_siswa" ; $db = mysqli_connect ( $server , $user , $password , $nama_database ); if ( ! $db ){     die ( "Gagal terhubung dengan database: " . mysqli_connect_error ()); } else {     echo "koneksi berhasil" ; } ? > Pada halaman indeks, ada dua link, ya
Baca selengkapnya

Pertemuan 3 Javascript

Gambar
     Berikut ini adalah contoh pengimplementasian javascript di html, dimana akan dibuat login dan signup form.      Untuk source codenya, saya menggunakan tag input text, password, submit, dan button. Pengimplementasian javascript bisa menggunakan tag script, dan disini saya memakai javascript untuk memberikan alert sukses login jika form disubmit, dan membuat halaman html signup jika button signup dipencet. index.html <! 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.0" >     < title > Login Form </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body > < h3 > Login </ h3 > < form="Login_form" onsubmit = " submit
Baca selengkapnya