Latihan Bootstrap

Latihan Bootstrap (Pertemuan ke-5) 

Pemrograman Web C

Hans Sean Nathanael | 5025201019 | 2022/2023


        Pada pertemuan kelima mempelajari framework bootstrap untuk mempermudah membuat situs HTML yang responsive pada semua device. Setelah penjelasan, terdapat tugas latihan membuat situs menggunakan bootstrap. Berikut adalah situs yang dibuat.


Situs contoh: situs contoh

Repository contoh: repository contoh


Situs hasil latihan: situs latihan

Repository latihan: repository



Source code situs contoh:
 <!DOCTYPE html>   
 <html>   
 <head>   
  <!-- Load file CSS Bootstrap offline -->   
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">   
 <script src="js/jquery-3.4.1.min.js"></script>   
 </head>   
 <body>   
 <div class="container">   
    <div class="row">   
      <div class="col-md-12" style="background-color:AntiqueWhite ;">   
       <h1><center>Judul Halaman</center></h1>   
      </div>   
    </div>   
    <div class="row">   
      <div class="col-md-3" style="background-color:GreenYellow;">   
      <h2>Silebar</h2>   
      <p>Link 1</p>   
      <p>Link 2</p>   
      <p>Link 3</p>   
      <p>Link 4</p>   
      </div>   
      <div class="col-md-9" style="background-color:LightCyan;">   
         <h2>Konten</h2>   
         <p>Konten website dapat diisi pada bagian ini</p>   
      </div>   
    </div>   
    <div class="row"style="background-color:MediumPurple;" >   
      <div class="col-md-12">   
      <h2><center>Footer</center></h2>   
      </div>   
    </div>   
 </div>   
 </body>   
 </html>


Source code situs latihan

 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>Kelas Programmer</title>  
     <meta charset="UTF-8">  
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <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://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>  
   </head>  
   <body>  
     <header>  
       <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  
         <a class="navbar-brand" href="#">Kelas Programmer</a>  
         <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">  
               <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>  
             </li>  
           </ul>  
         </div>  
        </nav>  
     </header>  
     <div class="container">  
       <div class="row">  
         <div class="col-md-12">  
           <div class="row">  
             <p class="m-0 mt-3 text-center" style="font-size: 36px;">Belajar Programming Itu Mudah</p>  
             <p class="text-center" style="font-size: 16px;">Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>  
           </div>  
         </div>  
         <div class="col-md-3 mb-1">  
           <div class="card">  
             <img src="./assets/cplusplus.png" class="img-thumbnails" alt="Belajar C++" style="max-height: 128px;">  
             <div class="card-body">  
               <p class="m-0" style="font-size: 24px; font-weight: bold">Belajar C/C++</p>  
               <p>Belajar C/C++ dengan mudah dan cepat dipandu oleh ahli.</p>  
             </div>  
           </div>  
         </div>  
         <div class="col-md-3 mb-1">  
           <div class="card">  
             <img src="./assets/Java-Logo.png" class="img-thumbnails" alt="Belajar PBO Java" style="max-height: 128px;">  
             <div class="card-body">  
               <p class="m-0" style="font-size: 24px; font-weight: bold">Belajar Java</p>  
               <p>Belajar konsep pemrograman berorientasi objek Java.</p>  
             </div>  
           </div>  
         </div>  
         <div class="col-md-3 mb-1">  
           <div class="card">  
             <img src="./assets/database.jpg" class="img-thumbnails" alt="Belajar database" style="max-height: 128px;"">  
             <div class="card-body">  
               <p class="m-0" style="font-size: 24px; font-weight: bold">Belajar SQL</p>  
               <p>Belajar cara membuat skema basis data dan implementasinya pada basis data SQL menggunakan MySQL.</p>  
             </div>  
           </div>  
         </div>  
         <div class="col-md-3 mb-1">  
           <div class="card">  
             <img src="./assets/datastructure.png" class="img-thumbnails" alt="Belajar Struktur Data" style="max-height: 128px;">  
             <div class="card-body">  
               <p class="m-0" style="font-size: 24px; font-weight: bold">Belajar Struktur Data</p>  
               <p>Belajar konsep struktur data seperti array dinamis, linked list, hash map, dan lainnya.</p>  
             </div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </body>  
 </html>

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Pemrograman Web Membuat Curriculum Vitae Menggunakan HTML dan CSS

Gambar
Tugas 1 Hans Sean Nathanael |  5025201019 | 2022/2023      Pertemuan pertama perkuliahan kelas pemrograman web dimulai dengan pengenalan mata kuliah, membahas HTML, dan sebagai tugas awal membuat sebuah curriculum vitae dengan menggunakan HTML dan CSS. Pada postingan ini saya akan membagikan apa yang telah saya buat. Saya membuat sebuah CV sederhana yang sebagian besar hanya berisikan tulisan informasi dan kualifikasi diri. Referensi yang saya gunakan berasal dari w3school dan stackoverflow. Link curriculum vitae: curriculum vitae  (situs dapat diakses, hanya saja wifi ITS susah mengakses kemungkinan karena alasan keamanan, bisa diakses bila menggunakan kuota internet HP) Link source code: repository source code   index.html 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <base href="https://hanssean.000webhostapp.com/" target="_self"> 5: <title>Hans Sean's Personal Blog</title> 6: <meta charset=&quo
Baca selengkapnya

Latihan Backend PHP dan MySQL Episode 3

Gambar
Latihan Backend PHP dan MySQL Episode 3 Membuat File Laporan PDF Hans Sean Nathanael | 5025201019 | 2022/2023     Perjalanan selanjutnya dari kelas pemrograman web adalah mempelajari cara membuat file laporan dalam bentuk PDF. Agar backend web dapat melakukan tugas tersebut, dibutuhkan library FPDF. Kelas dimulai dengan pengenalan FPDF dan diakhiri dengan tugas. Library tersebut dapat diunduh pada  FPDF  dan versi yang digunakan adalah versi 1.85. Setelah selesai diunduh, file zip FPDF diekstrak pada folder bernama "phpfpdf" yang terdapat di root directory proyek. Untuk menggunakan library tersebut adalah dengan memanggil require("phpfpdf/fpdf.php") Untuk dokumentasi FPDF berserta tutorial menggunakannya dapat dilihat pada situsnya .     Untuk menyelesaikan tugas kali ini, saya menambahkan fitur pembuatan laporan PDF ini pada web tugas backend yang pertama yaitu pada tugas pembuatan form pendaftaran. Pada tampilan daftar pendaftar terdapat tombol untuk membuka lap
Baca selengkapnya

Latihan jQuery

Gambar
 Latihan Sederhana jQuery Hans Sean Nathanael | 5025201019 | 2022/2023          Pada pertemuan keenam kuliah kelas pemrograman web membahas tentang jQuery, bagaimana cara menambahkan library jQuery pada HTML, kemudian syntax-syntax jQuery, fitur, dan cara menggunakan jQuery. Kemudian di akhir kelas terhadap latihan sederhana jQuery yaitu membuat sebuah situs dengan tombol yang dapat menampilkan angka dan angkanya akan bertambah setiap kali tombol ditekan. Perubahan HTML dilakukan dengan menggunakan function-function jQuery. Situs:  situs Repository:   repository Berikut adalah source code yang dibuat <!DOCTYPE html> <html> <head> <title>Latihan jQuery</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" inte
Baca selengkapnya