Bootstrap tidak terbaca di laravel

Halo sobat, kali ini saya akan berbagi pengalaman saya selama jadi Web Dev nih hehe yaitu mengenai hal baru yang saya jumpai ketika menggunakan Framework Laravel. Apa itu?

Ketika kalian merubah isi dari salah satu file view blade (contoh : buku.blade.php) tetapi kok ketika direfresh pada browser ga berubah ya tampilan atau isi nya? Padahal isi file nya udah diubah. Bahkan isi dari buku.blade.php nya udah dikosongin pun tetep engga ngaruh apa – apa pada view nya ketika dijalankan?

Yup itu udah saya alami beberapa kali dalam Laravel ini sob, engga hanya di View sih pernah juga di Controller nya yang saya ubah tetapi tidak ada respon apa – apa.

Tetapi itu jarang dijumpai kok, dan mungkin yang belum pernah menjumpai hal seperti ini bakalan bingung nih maksud nya apa? Heheh gapapa sob, kalian bookmark saja dulu CTRL + D pada browser kalian sekarang. Jadi jika suatu saat kalian menjumpai hal aneh pada project kalian, cukup buka gilacoding, dijamin bisa kok kalau ga bisa silahkan komen saja.

Untuk itu mari Restart xampp dan restart PC pun sudah dilakukan tetapi tidak selesai – selesai juga masalahnya berarti memang harus menggunakan cara berikut ini sob. Yuk simak

Pada project kalian, buka cmd di directory Project sama seperti kalian menjalankan command php artisan serve

Jalan kan beberapa perintah berikut :

Clear Applications Cache

php artisan cache:clear

Digunakan untuk menghapus file cache pada Laravel. Jika terdapat error Failed to clear cache. Kalian harus ke folder  storage/framework/cache/  tambahkan folder dengan nama data

 

Laravel Clear Route Cache

php artisan route:cache

Untuk menghapus cache pada route.

 

Laravel Clear View Cache

php artisan view:clear

Ini nih yang saya pake untuk mengatasi view yang tidak berubah ketika dijalankan. Yup, untuk menghapus cache view nya.

 

Laravel Clear Config Cache

php artisan config:cache

untuk menghapus konfigurasi cache, jika setelah menjalankan ini kalian mendapatkan error : auth.login not found? Cukup ke directory bootstrap > cache > rename file config.php menjadi config.php123 setelah itu kalian refresh browser nya lagi.

Sekarang jika kalian bermasalah pada Controller dan sudah menjalankan diatas tadi tetapi masih saja Error atau mendapati hal aneh lainnya? Coba cara dibawah ini lagi sob :

Pertama

php artisan clear-compiled

 

Lalu ini

composer dump-autoload

 

Sekarang coba kalian jalankan lagi

php artisan serve

 

Yhaaa! Berhasil kan? Untuk yang mau koreksi , berbagi pengalaman dan menambahkan silahkan berkomentar dibawah ini ya sob

 

Terima kasihh, jangan lupa di bookmark dan buka youtube gilacoding yhaa! https://www.youtube.com/channel/UCm3BDFVsLF5m1p5mUzMbTLQ

Ane coba tutorial di buku ini gan
Bootstrap tidak terbaca di laravel


nah masalahnya, ane udah ikuti semua coding, bahkan sampai copy paste, masalah muncul ketika ane load tag ".background" untuk diberi style di filer cssnya

ini file layout.blade.php

Spoiler for layout.blade.php:

<head>
{{HTML::style('css/bootstrap.min.css')}}
{{HTML::script('js/jquery-1.11.1.js')}}
{{HTML::script('js/bootstrap.min.js')}}
{{HTML::style('css/style.css')}}
</head>
<body>
<header>
/*code header*/
</header>

@yield('content')
</body>



dan ini isi file home.blade.php

Spoiler for home.blade.php:

@extends('layout')
@section('content')
<section class="header">
<div class="background"> </div>
</section>
@stop



dan ini isi file style.css

Spoiler for style.css:


body{
font-size: 14px;
background: #F2F4F5;
}

.background: { /* tag ".background ini yang g muncul gan*/
border: solid 1px #000000;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: 50% 50% no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.header .background: { /* di tag ".background ini juga g muncul*/
background-image: url("../img/header.jpg");
height: 400px;
forbidden -1;
}



mohon pencerahan, thks

Menggunakan Bootstrap Di Laravel

LaravelTutorial Laravel #17 : Menggunakan Bootstrap Di Laravel

Bootstrap tidak terbaca di laravel

  • By Diki Alfarabi Hadi
  • 20 December 2018
  • Laravel

Menggunakan Bootstrap Di Laravel – Selamat datang kembali di seri tutorial laravel lengkap dari dasar di www.malasngoding.com.

Sebelumnya kita telah banyak belajar tentang laravel. teman-teman bisa klik pada kategori menu laravel di www.malasngoding.com. untuk teman-teman yang belum mengikuti tutorial laravel dari dasar di www.malasngoding.com teman-teman bisa langsung mulai belajar dari tutorial laravel part 1 di www.malasngoding.com.

Dan semoga www.malasngoding.com terus bisa memberikan tutorial-tutorial pemrograman lengkap dan terbaik untuk teman-teman semua.

Oke langsung saja kita masuk ke materi menggunakan bootstrap di laravel.

Menggunakan Bootstrap Di Laravel

Pada tutorial laravel ini kita akan belajar tentang cara menghubungkan file CSS dan JS dengan project laravel kita.

Kita akan membuat beberapa contoh cara menghubungkan project laravel dengan file CSS atau JS.

Sebagai contoh kita akan mencoba menghubungkan bootstrap dengan project laravel kita.

Menghubungkan File CSS dan JS Dengan Laravel

File CSS, JS, gambar dan assets lainnya bisa teman-teman letakkan di dalam folder public dalam project laravel. letaknya ada di belajar_laravel/public.

Jika kita buka folder public, sudah ada folder css, js dan svg yang menyimpan masing-masing file css, js dan gambar default dari project laravel.

Bootstrap tidak terbaca di laravel

menghubungkan css dan js dengan laravel

Teman-teman bisa menghapus folder css dan js tersebut. dan bisa membuat folder assets, kemudian memasukkan file css dan js teman-teman ke dalam folder assets. tergantung gaya teman-teman.

Yang penting nanti intinya semua file css dan js kita letakkan di dalam folder public ini.

dan kemudian yang paling penting nanti link penghubungannya harus benar saat kita hubungkan dengan file view laravel nya.

Contohnya,

Misalnya di sini teman-teman mempunyai file style.css dalam folder css, dan mempunyai file app.js dalam folder js, maka cara menghubungkannya mudah sekali.

Cara menghubungkannya, buka file view yang ingin teman-teman hubungkan dengan css dan js ini. hubungkan dengan syntax berikut.

1

<link rel="stylesheet" type="text/css" href="/css/style.css">

atau

1

<link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">

atau untuk menghubungkan file JS nya,

1

<script type="text/javascript" src="/js/app.js"></script>

atau

1

<script type="text/javascript" src="{{ asset('/js/app.js') }}"></script>

Intinya saat kita menghubungkan laravel dengan file css dan js, secara default linknya dimulai dari folder public. Seperti yang teman-teman pada contoh penghubungan css dan js di atas.

 

Menghubungkan Bootstrap Dengan Laravel

Sebenarnya pada project laravel, sudah ada file css bootstrap secara default pada pertama kali kita menginstall laravel.

Letaknya ada pada file app.css dalam folder css.

Tidak percaya ?

Coba sekarang kita hubungkan file app.css tersebut dengan salah satu view yang sudah pernah kita buat pada tutorial sebelumnya.

Disini saya akan mencoba menghubungkan app.css dengan view index.blade.php. dimana pada view index.blade ini sebelumnya kita buat untuk halaman yang menampilkan data pegawai.

Silahkan teman-teman baca tutorial CRUD Laravel sebelumnya jika belum.

belajar_laravel/resources/views/index.blade.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Membuat Pencarian Pada Laravel - www.malasngoding.com</title>

<link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">

</head>

<body>

 

<div class="container">

<div class="card">

<div class="card-body">

 

<h2 class="text-center"><a href="https://www.malasngoding.com">www.malasngoding.com</a></h2>

 

<h3>Data Pegawai</h3>

 

<p>Cari Data Pegawai :</p>

 

<div class="form-group">

</div>

<form action="/pegawai/cari" method="GET" class="form-inline">

<input class="form-control" type="text" name="cari" placeholder="Cari Pegawai .." value="{{ old('cari') }}">

<input class="btn btn-primary ml-3" type="submit" value="CARI">

</form>

 

<br/>

 

<table class="table table-bordered">

<tr>

<th>Nama</th>

<th>Jabatan</th>

<th>Umur</th>

<th>Alamat</th>

<th>Opsi</th>

</tr>

@foreach($pegawai as $p)

<tr>

<td>{{ $p->pegawai_nama }}</td>

<td>{{ $p->pegawai_jabatan }}</td>

<td>{{ $p->pegawai_umur }}</td>

<td>{{ $p->pegawai_alamat }}</td>

<td>

<a class="btn btn-warning btn-sm" href="/pegawai/edit/{{ $p->pegawai_id }}">Edit</a>

<a class="btn btn-danger btn-sm" href="/pegawai/hapus/{{ $p->pegawai_id }}">Hapus</a>

</td>

</tr>

@endforeach

</table>

 

<br/>

Halaman : {{ $pegawai->currentPage() }} <br/>

Jumlah Data : {{ $pegawai->total() }} <br/>

Data Per Halaman : {{ $pegawai->perPage() }} <br/>

<br/>

 

{{ $pegawai->links() }}

</div>

</div>

</div>

 

 

</body>

</html>

Di sini kita hanya menghubungkan dengan file app.css

1

<link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">

jika teman-teman tidak ingin menggunakan fungsi asset() seperti pada contoh di atas, teman-teman juga bisa langsung menuliskan href=”/css/app.css”.

Dan kemudian pada bagian selanjutnya saya hanya menambahkan class-class bootstrap.

Untuk teman-teman yang mau membaca tutorial bootstrap di malasngoding.com, silahkan kunjungi link di bawah ini.

Tutorial Bootstrap Lengkap Dari Dasar Sampai Mahir

Oke sekarang kita lihat bagaimana hasilnya.

localhost:8000/pegawai

Bootstrap tidak terbaca di laravel

Menggunakan Bootstrap Di Laravel

Seperti hasil yang teman-teman lihat pada gambar di atas. kita telah berhasil menggunakan bootstrap pada laravel.

Silahkan teman-teman explore lagi dengan mencoba langsung menerapkan template atau file css yang teman-teman custom sendiri.

Oke terima kasih telah membaca tutorial Menggunakan Bootstrap Di Laravel.

Sampai jumpa di tutorial laravel selanjutnya.

Silahkan teman-teman baca juga tutorial membuat CRUD dengan laravel sebelumnya.

Tutorial Membuat CRUD dengan Laravel

Tutorial membuat CRUD dengan Laravel Part 1 – Menampilkan data dari database

Tutorial membuat CRUD dengan Laravel Part 2 – Input data ke database

Tutorial membuat CRUD dengan Laravel Part 3 – Update data di database

Tutorial membuat CRUD dengan Laravel Part 4 – Hapus data dari database

Tutorial membuat CRUD dengan Laravel Part 5 – Kesimpulan & Source code

 

 

Incoming search terms:

  • laravel bootstrap
  • bootstrap laravel
  • cara memasukan template ke laravel
  • https://www malasngoding com/menggunakan-bootstrap-di-laravel/
  • cara membuat web di laravel
  • install bootstrap laravel
  • memanggil css di laravel
  • bootstrap di laravel
  • cara memasang bootstrap di laravel
  • integrate bootstrap template with laravel


  • SHARE :

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

  • Author's profile
  • All posts by Diki Alfarabi Hadi

Tags: bootstrap dan laravel, bootstrap laravel, cara menambahkan bootstrap ke laravel, css js laravel, integrasi bootstrap dengan laravel, laravel assets, laravel bootstrap, laravel css js, laravel javascript, laravel responsive project, laravel template bootstrap, laravel template layout, laravel website, memanggil css di laravel, membuat website dengan laravel and bootstrap, Menghubungkan bootstrap dengan laravel, menghubungkan css dan js di laravel, penggunaan yield laravel, perbedaan laravel dan bootstrap, template laravel, tutorial laravel bootstrap

Produk

  • Bootstrap tidak terbaca di laravel
    Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
  • Bootstrap tidak terbaca di laravel
    Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
  • Bootstrap tidak terbaca di laravel
    Source Code Toko Sport PHP dan MySQLi Rp 200,000
  • Bootstrap tidak terbaca di laravel
    Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

  • Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
  • Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
  • Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
  • Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
  • Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

Bootstrap tidak terbaca di laravel
Bootstrap tidak terbaca di laravel
Bootstrap tidak terbaca di laravel

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

Bootstrap tidak terbaca di laravel

Laravel

Tutorial Laravel #41 : Action URL Laravel

19 April 2019

Action URL Laravel – Action URL adalah sebuah fitur pada laravel untuk tujuan generate URL ke controller, dan juga bisa mengirimkan data parameter seperti pada ...

Diki Alfarabi Hadi

Bootstrap tidak terbaca di laravel

Laravel

Tutorial Laravel #40 : Multi Bahasa Localization Laravel

14 April 2019

Multi Bahasa Localization Laravel – Multi bahasa merupakan fitur pada website untuk menampilkan informasi dalam berbagai bahasa. Laravel telah menyediakan fitur multi bahasa. sehingga untuk ...

Diki Alfarabi Hadi

Bootstrap tidak terbaca di laravel

Laravel

Tutorial Laravel #39 : Import Excel Laravel

12 April 2019

Import Excel Laravel – Setelah sebelumnya kita belajar tentang membuat export atau cetak laporan excel pada laravel, seperti ada yang kurang jika kita tidak membahas ...

Diki Alfarabi Hadi

Bootstrap tidak terbaca di laravel

Laravel

Tutorial Laravel #38 : Export Excel Laravel

12 April 2019

Export Excel Laravel – Fitur export atau cetak laporan excel merupakan salah satu fitur yang paling penting. bagi teman-teman yang sering membuat aplikasi pesanan dari ...

Apa perbedaan laravel dan bootstrap?

Perbedaan antara Laravel dan Bootstrap Bootstrap adalah kerangka kerja HTML, CSS, dan JS yang paling banyak digunakan untuk membuat situs web yang responsif dan mengutamakan seluler. Laravel, di sisi lain, digambarkan sebagai “Kerangka PHP Laravel Untuk Pengrajin Web.”.

File views di laravel diakhiri dengan ekstensi apa?

Laravel membuat ekstensi sendiri untuk menangani bagian view, yaitu ekstensi .blade.php.

Bagaimana cara install laravel via Composer?

Install Laravel dengan composer create-project.
composer: jalankan composer..
create-project: buat sebuah project..
laravel/laravel: vendor name/project name dari tim pengembang Laravel..
coba1: simpan semua file ke dalam folder coba1..

Bagaimana cara melihat versi laravel?

Cek Versi Laravel Menggunakan Baris Perintah Buka terminal di sistem Anda. Sekarang navigasikan ke direktori root web aplikasi Laravel dan kemudian jalankan perintah PHP berikut untuk memeriksa versi Laravel.