Cara menggunakan about me bootstrap template

Question

Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.

Table of Contents Show

Create a Website from Scratch
A "Layout Draft"
Side Content
Main Content
First Step - Basic HTML Page
Cara Pasang Template AdminLTE 3 di Laravel
Apakah bootstrap termasuk template?
Untuk proses instalasi secara online menggunakan format berbasis apa?
Framework bootstrap terdiri dari file apa saja?
Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

Create a Website from Scratch

A "Layout Draft"

It can be wise to draw a layout draft of the page design before creating a website:

Side Content

Some text some text..

Main Content

Some text some text..

First Step - Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.

Now we can easily make this background image to cover the full available space and make it a full-page background image.

Just replaceheight: 400px; with height: 100vh;

vh stands for viewport height.

height: 100vh; means 100% of available height.

Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.

6. Lalu kolom kedua (), kita isi dengan komponen form https://getbootstrap.com/docs/4.0/components/forms/.

<form method="post" action="#">
            
    <div class="form-group">
      <label for="">Nama Anda:</label>
      <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama">
    </div>

    <div class="form-group">
      <label for="">E-mail Anda:</label>
      <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
    </div>

    <div class="form-group">
      <label for="">Pesan Anda:</label>
      <textarea name="pesan" class="form-control" cols="30" rows="7"></textarea>
    </div>

    <input class="btn btn-primary" type="submit" value="POST">

  </form>

7. Maka seperti inilah script kedua kolom tersebut.

 <div class="row">
    <div class="col">
      <h1>Kontak Kami</h1>
      <p>
        Silahkan tinggalkan pesan anda, pada kolom yang tersedia.
      </p>
    </div>

    <div class="col">
      <form method="post" action="#">
        
        <div class="form-group">
          <label for="">Nama Anda:</label>
          <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama">
        </div>

        <div class="form-group">
          <label for="">E-mail Anda:</label>
          <input type="email" class="form-control" name="email" placeholder="Masukkan Email">
        </div>

        <div class="form-group">
          <label for="">Pesan Anda:</label>
          <textarea name="pesan" class="form-control" cols="30" rows="7"></textarea>
        </div>

        <input class="btn btn-primary" type="submit" value="POST">

      </form>
    </div>
  </div>

8. Maka seperti inilah tampilannya pada browser.

9. Lalu kita bisa buat folder beserta file CSS terbaru.

Tujuannya untuk menambahkan style pada Bootstrap, dengan style buatan kita sendiri.

Berikut ini adalah script kode CSS buatan kita sendiri.

body
{
    background-color: gainsboro;
}

.badan
{
    background-color: white;
    padding: 13px 0;
    margin-top: 30px;
}

.peding-100
{
    padding: 120px;
}

.peding-30
{
    padding: 30px;
}

10. Lalu satukan file CSS tersebut dengan file HTML yang sudah kita buat.

Tentunya pada tag <head></head>.

<link rel="stylesheet" href="css/tampilan.css">

Pada kode di atas, menunjukkan bahwa kita membuat file CSS bernama “tampilan.css” yang terdapat dalam folder “css”.

11. Lalu lakukan tambahan class CSS pada Container, dan Gridnya seperti contoh di bawah ini.

<div class="container badan">
      
      <div class="row">
        <div class="col peding-100">
          ...
        </div>

        <div class="col peding-30">
          ...
        </div>
      </div>

    </div>

Kita bisa lihat ada tambahan class seperti “.badan, .peding-100, .peding-30” bahkan perubahan pada tag .

Sekarang membangun website semakin mudah dan menyenangkan, banyak sekali template gratis yang dapat diunduh dan dimanfaatkan untuk membangun berbagai macam jenis website. Mungkin sebagian dari kita sudah pernah menggunakan template-template tersebut dan dikombinasikan dengan project php native, tapi pertanyaannya sekarang, bagaimana jika template-template tersebut diimplementasikan di framework laravel?. Apakah sulit?. Jawabannnya mudah sekali, kita akan menggunakan fitur templating yang telah disediakan oleh laravel dan untuk templatenya sendiri, kita akan menggunakan AdminLTE 3 kali ini.

Cara Pasang Template AdminLTE 3 di Laravel

1. Install laravel, untuk versi dan lokasi instalasinya bebas. Cara instalasinya bisa lihat artikel berikut ini: https://www.sahretech.com/2019/10/cara-install-laravel-di-localhost-server.html.

2. Download template AdminLTE 3 berikut ini download kemudian diekstrak.

3. Lalu Pindahkan folder AdminLTE 3 ke dalam folder public projek laravel, lalu ubah namanya menjadi admin.

Struktur Folder pada Laravel

4. Buka folder public/admin/pages/examples/blank.html lalu copy isinya.

5. Buat file baru dengan nama template.blade.php di dalam folder views, lalu paste script yang telah dicopy dari file blank.html sebelumnya.

6. Masih dalam file template.blade.php, tambahkan kode @yield('content) pada bagian yang ditandai dengan kotak merah, lalu cut bagian card pada bagian yang ditandai kotak merah pada gambar berikut ini. Sedikit penjelasan, @yield('content') adalah bagian yang akan diisi dengan konten dinamis di setiap halaman yang berbeda nantinya.

Membuat Admin Template

7. Kemudian kita perlu memperbaiki setiap path yang mengarah ke file lain. untuk itu kita perlu menambahkan {{ asset('...') }, bagaimana cara menggunakannya?. Lihat gambar berikut ini

Menambahkan Asset untuk Setiap Source File

8. Template bootstrap sudah berhasil dipasang di projek laravel kalian, langkah selanjutnya adalah menggunakan template tadi ke halaman atau file-file lainnya. Buka file welcome.blade.php lalu hapus isinya, kemudian tambahkan @extends('template') untuk menggunakan template yang telah kita buat sebelumnya, lalu tambahkan @section('content') dan jangan lupa juga untuk menambah @endsection. Langkah terakhir paste script yang telah kalian cut tadi di antara @section('content') dan @endsection.

Mencoba template ke halaman welcome

9. Jika langkah-langkah di atas sudah benar, selanjutnya jalankan php artisan dan lihat hasilnya di browser kalian masing-masing. Hasilnya akan tampak seperti gambar di bawah ini.

Hasil akhir menggunakan Template

Sekian tutorial cara memasang template bootstrap di laravel, semoga bermanfaat, dan bagi yang merasa kesulitan, ingin bertanya, atau punya kritik dan saran silahkan tinggalkan komentar di bawah ini. Sampai jumpa di tutorial pemrograman menarik lainnya.:)

Apakah bootstrap termasuk template?

Bootstrap merupakan framework CSS yang di dalamnya berisi template HTML, CSS, dan JavaScript yang untuk membuat sebuah website yang responsif dengan cepat dan mudah.

Untuk proses instalasi secara online menggunakan format berbasis apa?

Untuk proses instalasi secara online menggunakan format berbasis CDN (Content Delivery Network), sehingga proses integrasi menjadi lebih praktis dan mudah.

Framework bootstrap terdiri dari file apa saja?

Bootstrap terdiri dari kumpulan syntax yang dikompilasi dalam tiga file utama: Bootstrap.css, Bootstrap.js, dan Glyphicons.

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.

kode bootstrap