Tugas PWEB - Latihan Bootstrap

 ========================================================================

Nama: Putu Ravindra Wiguna

NRP: 5025201237

=========================================================================

Latihan Bootstrap

    Pada latihan kali ini, kita diminta untuk membuat tampilan web dengan menggunakan framework css yaitu Bootstrap. Yang mana diminta untuk membuat tampilan seperti pada gambar berikut ini:

Saya menggunakan dokumentasi bootstrap dan Membuat Template Web Responsive Dengan Bootstrap (kelasprogrammer.com) untuk membuat tampilan web yang serupa, hanya berbeda sedikit.

Berikut file codingan index.html nya

<!DOCTYPE html>  
<html>  
<head>  
 <!-- Load file CSS Bootstrap offline -->  
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<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>
</head>  
<body>
  <!-- Untuk navigation bar -->
  <nav class="navbar navbar-expand-md bg-dark">
    <!-- brand web -->
    <a href="index.html" class="navbar-brand">
      <h1 class="text-white" style="padding-left: 10px;">KelasProgrammer</h1>
    </a>

    <!-- collapsible button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
   
    <!-- link navbar -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ">
        <li class="navbar-item ">
          <a href="#" class="nav-link text-primary">Pemograman</a>
        </li>
        <li class="navbar-item">
          <a href="#" class="nav-link text-primary">Database</a>
        </li>
        <li class="navbar-item">
          <a href="#" class="nav-link text-primary">Framework</a>
        </li>
        <li class="navbar-item">
          <a href="#" class="nav-link text-primary">Lainnya</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="jumbotron text-center bg-secondary" style="padding: 50px;">
    <h1>Belajar Programming Itu Mudah</h1>
    <p>Tingkatkan skill programming kamu belajar tutorial pemograman gratis!</p>
  </div>

  <div class="container" style="margin-top:15px;">
    <div class="row">
      <div class="col-sm-3">
        <div class="thumbnail">
          <a href="index.html">
            <img src="https://akcdn.detik.net.id/visual/2020/06/02/09fb4d2c-e9d4-4949-b26d-969983c4bd54_169.jpeg?w=650" alt="" width="100%">
          </a>

          <div class="caption">
            <h3>Belajar HTML & CSS</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, cumque.</p>
            <p><a href="index.html" class="btn btn-light btn-block" role="button">
              Selengkapnya
            </a></p>
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="thumbnail">
          <a href="index.html">
            <img src="https://akcdn.detik.net.id/visual/2020/06/02/09fb4d2c-e9d4-4949-b26d-969983c4bd54_169.jpeg?w=650" alt="" style="width: 100%; height:100%;">
          </a>

          <div class="caption">
            <h3><a href="index.html" style="text-decoration: none;color:black">Web Programming</a></h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, cumque.</p>
            <p><a href="index.html" class="btn btn-light btn-block" role="button">
              Selengkapnya
            </a></p>
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="thumbnail">
          <a href="index.html">
            <img src="https://akcdn.detik.net.id/visual/2020/06/02/09fb4d2c-e9d4-4949-b26d-969983c4bd54_169.jpeg?w=650" alt="" width="100%">
          </a>

          <div class="caption">
            <h3>Belajar Python</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, cumque.</p>
            <p><a href="index.html" class="btn btn-light btn-block" role="button">
              Selengkapnya
            </a></p>
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="thumbnail">
          <a href="index.html">
            <img src="https://akcdn.detik.net.id/visual/2020/06/02/09fb4d2c-e9d4-4949-b26d-969983c4bd54_169.jpeg?w=650" alt="" width="100%">
          </a>

          <div class="caption">
            <h3>Desain UI & UX</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, cumque.</p>
            <p><a href="index.html" class="btn btn-light btn-block" role="button">
              Selengkapnya
            </a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="jumbotron text-center" style="margin-bottom: 0;">
    <p>Copyright 2022 PWEB B</p>
  </div>
</body>  
</html>  

Hasil tampilan index.html




Sekian terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Latihan CRUD - Pendaftaran Siswa Baru

Gambar
   ======================================================================== Nama: Putu Ravindra Wiguna NRP: 5025201237 ========================================================================= Latihan CRUD dengan PHP+MySQL Pendaftaran Siswa Baru      Pada latihan kali ini, kita diminta untuk membuat module back end untuk studi kasus pendaftaran siswa baru. Terdapat 7 modul yaitu: config.php form-daftar.php hapus.php index.php list-siswa.php proses-edit.php proses-pendaftaran.php dan 1 modul yang tidak diberikan yaitu form-edit.php Serta tampilan yang juga sudah ditentukan. Berdasarkan tutorial dari laman berikut  Tutorial PHP dan MySQL: Membuat Aplikasi CRUD [Studi Kasus Pendaftaran Siswa Baru] (petanikode.com) .  yang sudah sangat lengkap dan dijelaskan dengan baik agar mudah dipahami, saya mencoba membuat ketuju modul tersebut. Tidak banyak hal yang saya ubah, hanya penambahan sedikit di beberapa tempat, sisanya saya mencoba memahami code php di tiap modulnya tersebut. Berikut source
Baca selengkapnya

EAS PWEB 2022

Gambar
Putu Ravindra Wiguna 5025201237 EAS Pemograman Web B 1.      Rancangan Aplikasi a.       Deskripsi: Aplikasi pendaftaran calon pegawai kementrian kelautan dan perikanan provinsi Jawa Timur. Aplikasi ini akan digunakan oleh masyarakat yang ingin mendaftar sebagai calon pegawai pada kementrian kelautan dan perikanan. Aplikasi ini hanya menangani pendaftaran berkas, yakni pendaftar akan mendaftarkan dirinya pada aplikasi dengan mengisi data diri pada formulir serta mengirimkan berkas, data-data tersebut beserta berkasnya akan disimpan oleh aplikasi pada suatu database untuk diverifikasi oleh kementrian kelautan dan perikanan. Setiap calon pegawai yang ingin mendaftar perlu membuat akun terlebih dahulu. Pendaftar dapat mengedit datanya, tetapi hanya sampai batas tanggal tertentu, kemudian setelah tanggal tersebut tidak bisa lagi, dan itu saatnya memverifikasi. Pegawai ataupun staff pada kementrian kelautan dan perikanan yang bertugas untuk memverifikasi berkas calon pegawai dap
Baca selengkapnya

Tugas membuat validasi form dengan jQuery

Gambar
 Nama: Putu Ravindra Wiguna NRP: 5025201237 Validasi jQuery     Kali ini membuat website yang dapat melakukan validasi pengisian form data diri mahasiswa dengan bantuan library jQuery Berikut Tampilan Web: Berikut link gitub: RavindraWiguna/jQueryValidasi (github.com) Link Deploy: Latiha Validasi dengan jQuery (ravindrawiguna.github.io) Sekian terimakasih
Baca selengkapnya