Lesson List

Pembuka?

Merupakan informasi yang berkaitan dengan isi dari materi yang akan dipelajari

Persiapan?

Menjelaskan tentang persiapan yang harus Anda lakukan sebelum mempraktekan semua materi yang ada.

Pengenalan CodeIgniter 4?

Materi yang wajib Anda kerjakan dan pahami, semua materi-materi berikutnya akan mengacu pada projek ini.

Bootstrap dan Font Awesome?

Penggunaan Bootstrap dan Font Awesome untuk mempercepat dan mempercantik desain website.

Pelengkap AGC?

Membahas cara membuat dan atau menggunakan script siap pakai untuk keperluan pembuatan web AGC kita nantinya.

AGC Hotel dengan File JSON?

Membahas tentang cara memanfaat data hotel dari Agoda.com untuk dijadikan sebagai sumber data Web AGC dalam format JSON.

AGC Hotel dengan Database?

Membahas tentang cara memanfaatkan data hotel dari Agoda.com untuk dijadikan sebagai sumber data Web AGC dalam format Database.

PHP To HTML Converter?

Membahas cara membuat tools untuk melakukan konversi Web AGC yang dibuat menggunakan bahasa pemroraman PHP agar menjadi halaman web HTML.

Jutaan Data Produk Siap Pakai?

Berisi link daftar produk siap pakai, tidak perlu scrape lagi.

Dasar-Dasar Web Scraping?

Topik ini membahas tentang cara mengumpulkan data dengan teknik web scraping.

Web AGC dengan Teknik Web Scraping

JSON, HTML & XML Movie Generator?

Tools ini dibuat dengan menggunakan PHP dan Blade sebagai sistem templatingnya. Kami tidak menjelaskan secara mendetail dari NOL proses pembuatan tools ini, namun jika Anda sudah paham tentang PHP dan telah menyelesaikan materi-materi sebelumnya diharapkan Anda dapat dengan mudah memahami alur pembuatan tools ini.
Go to Course Home
Penggunaan Bootstrap pada CodeIgniter

Penggunaan Bootstrap pada CodeIgniter

Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk pengembangan front-end website.

Untuk menggunakan bootstrap silahkan kunjungi situs resminya, yaitu https://getbootstrap.com kemudian klik tombol “Download”.

Jika proses download sudah selesai silahkan ekstrak file ZIP tersebut dan masukan ke dalam folder public dalam projek Anda, untuk lebih jelasnya perhatikan gambar berikut:

Cara menggunakan bootstrap dapat dilihat pada dokumentasi resmi situs https://getbootstrap.com

Di dalam paket Bootstrap yang sudah di download sudah terdapat Popper, namun tidak untuk JQuery, oleh karenanya silahkan download JQuery dari situs resminya yaitu: https://jquery.com

Karena Bootstrap yang digunakan pada materi ini adalah versi 4.5.2 (versi terbaru pada saat materi ini disusun) maka JQuery yang harus di download adalah versi 3.5.1

Klik kanan pada link yang ada, kemudian pilih menu “Save link as…” simpanlah file JQuery tersebut ke dalam folder “public/bootstrap” pada projek Anda.

Untuk melihat apakah Bootstrap sudah dapat digunakan pada projek Anda silahkan modifikasi View dengan nama file index.php agar tampak seperti baris kode berikut:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

    <title><?php echo WEB_TITLE; ?></title>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>
          <?php echo WEB_TITLE; ?> |
          <?php echo WEB_TAGLINE; ?>
        </h1>
      </div>

      <div class="row">
        <div class="col-sm">
          <pre>
            <?php print_r($post['content']); ?>
          </pre>
        </div>

        <div class="col-sm">
          <ul>
            <?php foreach($post['content'] as $content): ?>
              <li><?php echo $content['title']; ?></li>    
            <?php endforeach; ?>
          </ul>
        </div>
      </div>
    </div>

    <script src="/bootstrap/jquery-3.5.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Jika sudah selesai simpanlah perubahannya dan kemudian lihat hasilnya.

Jika tampilan halaman home page tampak seperti di atas itu menandakan bahwa Bootstrap sudah dapat digunakan pada web projek Anda.

 

← Previous Next →