Laravel: Blade Template Engine'de CSS ve JS yüklememe sorunu

23-04-2019, 16:59:52

Kendi işlerimde kullanmak üzere bir yazılım geliştirmeye çalışıyorum ve kullanıcı panelini oluşturma aşamasındayım. Henüz 1-2 haftadır PHP'ye ve Laravel'e başladım. Bu yüzden sorumu olabildiğince bunu göz önünde bulundurarak cevaplayabilirseniz sevinirim.

Sorunum şu:
Temel tema dosyam olan main.blade.php'ye head, navbar ve sidebar kısımlarını partials klasöründe oluşturup çektim ve içerisinde bir "content" alanı oluşturdum. Önce bu alana ana kontrol panelim olan dashboard.blade.php dosyasını oluşturup çektim. Hiçbir sorun olmadan istediğim gibi gözüküyor. Daha sonra kullanıcı listesini görüntüleyeceğim userlist.blade.php'yi oluşturdum ve routes'tan "admin/userlist" bağlantısını tanımladım. Fakat "admin/userlist" bağlantısına girince hiçbir CSS ve JS dosyasını çekmiyor. Halbuki içeriği dashboard.blade.php ile aynı. Sadece içeriğinde kullanıcı listesini gösterecek.

Bu neden kaynaklanıyor olabilir?

View klasörü içerisinde Admin adında yeni bir klasör oluşturdum ve bu klasörün içeriği şölye:

|--admin
|----pages
|------dashboard.blade.php
|------userlist.blade.php
|----partials
|------_head.blade.php
|------_navbar.blade.php
|------_sidebar.blade.php
|----main.blade.php

main.blade.php

<!doctype html>
<html lang="tr">
<head>
@include('admin.partials._head')
</head>
<body>
@include('admin.partials._navbar')

<div class="container-fluid">
<div class="row">
@include('admin.partials._sidebar')
@yield('content')
</div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jsjquery-3.4.0.slim.min.js"></script>
<script src="jspopper.min.js"></script>
<script src="jsbootstrap.min.js"></script>
@yield('scripts')
</body>
</html>

_head.blade.php

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="cssbootstrap.min.css">
<!-- Admin Panel CSS -->
<link rel="stylesheet" href="cssadmin.css">
@yield('stylesheets')

<title>Plan Proje - Beta @yield('title')</title>

dashboard.blade.php

@extends('admin.main')

@section('title', '| Anasayfa')
    
@section('content')

<main role="main" class="main col-md-10">
<!-- Content -->
<p class="lead">Anasayfa içeriği buraya gelecek!</p>
</main>

@endsection

userlist.blade.php

@extends('admin.main')

@section('title', '| Kullanıcı Listesi')

@section('content')

<main role="main" class="main col-md-10">
        <!-- Content -->
        <p class="lead">Kullanıcı listesi buraya gelecek!</p>
</main>
    
@endsection

23-04-2019, 17:04:26

#2

CodeMaster_

js ve css dosyalarını çağırırken asset func. kullanırsan sıkıntı çekmezsin.

örnek verecek olursak

<link rel="stylesheet" href="{{ asset('cssadmin.css ') }}">

23-04-2019, 17:14:13

#3

imyusyil

CodeMaster_ adlı üyeden alıntı: mesajı görüntüle

js ve css dosyalarını çağırırken asset func. kullanırsan sıkıntı çekmezsin.

örnek verecek olursak

<link rel="stylesheet" href="{{ asset('cssadmin.css ') }}">

Teşekkür ederim, düzeldi. Diğer türlü çekmemesinin sebebi nedir acaba?

Bir de şimdi anlamış oldum Helper'ların ne olduğunu siz yazınca.

23-04-2019, 19:39:16

#4

ztk

Kimlik doğrulama veya yönetimden onay bekliyor.

imyusyil adlı üyeden alıntı: mesajı görüntüle

Teşekkür ederim, düzeldi. Diğer türlü çekmemesinin sebebi nedir acaba?

Bir de şimdi anlamış oldum Helper'ların ne olduğunu siz yazınca.

Eğer asset helper ını kullanmazsan yazmış olduğun css adresi ana sayfada çalışır sadece, çünkü aynı dizin seviyesinde dosyayı arar.
Yani siteadi.com/main.css gibi
ama başka bir rotadayken mesela siteadi.com/haberler de iken css dosyasını şöyle arar. siteadi.com/haberler/main.css
Bu yüzden çekmez.
Css dosyasını çekerken ya adresin başına / koyarak (/main.css gibi) kök dizinde aramasını sağlayacaksın (bu sefer de localhost/projeadi gibi bir durumda localhosta kadar iner), yada asset helperını kullanacaksın.

Bu yüzden asset helper ı varken kullanmamak zorluk çıkarmaktan başka bir işe yaramaz.

24-04-2019, 22:52:33

#5

imyusyil

ztk adlı üyeden alıntı: mesajı görüntüle

Eğer asset helper ını kullanmazsan yazmış olduğun css adresi ana sayfada çalışır sadece, çünkü aynı dizin seviyesinde dosyayı arar.
Yani siteadi.com/main.css gibi
ama başka bir rotadayken mesela siteadi.com/haberler de iken css dosyasını şöyle arar. siteadi.com/haberler/main.css
Bu yüzden çekmez.
Css dosyasını çekerken ya adresin başına / koyarak (/main.css gibi) kök dizinde aramasını sağlayacaksın (bu sefer de localhost/projeadi gibi bir durumda localhosta kadar iner), yada asset helperını kullanacaksın.

Bu yüzden asset helper ı varken kullanmamak zorluk çıkarmaktan başka bir işe yaramaz.

Teşekkürler, şimdi anladım. Üç, dört haftada HTML, CSS, Bootstrap, ardından PHP manuellerini gözden geçirmeye çalıştım. Sonra biraz Yii'ye baktım, fakat güzel bir kaynak bulunca Laravel'e döndüm.

Bir iki sorum daha var, NPM ile paket yüklemeyi anlayamadım Laravel'e. Kaynak öneriniz var mı? Birkaç farklı kaynaktan baktım, ama sürekli app.css ve app.js içine en son import ediyorlar paketlerin CSS ve JS'lerini. Bu durum sürekli bu dosyaları şişirip yüklenme konusunda performansı etkilemez mi? Ben anlayamadığımdan NPM'yi, hepsini manuel olarak dizinler içine atıp sonrasında gerekli sayfalara CSS ve JS dosyalarını çekiyorum. İleride sanırım paketleri güncelleme konusunda sıkıntı yaşayacağım NPM olmadığı için. NPM ayrıca yüklediğimiz bu paketleri güncelleyebiliyor da değil mi?

Ya da NPM dışında Laravel'e özgü bu şekilde eklenti paketleri yükleme/güncelleme yöntemi mevcut mu?

25-04-2019, 00:05:35

#6

ztk

imyusyil adlı üyeden alıntı: mesajı görüntüle

Teşekkürler, şimdi anladım. Üç, dört haftada HTML, CSS, Bootstrap, ardından PHP manuellerini gözden geçirmeye çalıştım. Sonra biraz Yii'ye baktım, fakat güzel bir kaynak bulunca Laravel'e döndüm.

Bir iki sorum daha var, NPM ile paket yüklemeyi anlayamadım Laravel'e. Kaynak öneriniz var mı? Birkaç farklı kaynaktan baktım, ama sürekli app.css ve app.js içine en son import ediyorlar paketlerin CSS ve JS'lerini. Bu durum sürekli bu dosyaları şişirip yüklenme konusunda performansı etkilemez mi? Ben anlayamadığımdan NPM'yi, hepsini manuel olarak dizinler içine atıp sonrasında gerekli sayfalara CSS ve JS dosyalarını çekiyorum. İleride sanırım paketleri güncelleme konusunda sıkıntı yaşayacağım NPM olmadığı için. NPM ayrıca yüklediğimiz bu paketleri güncelleyebiliyor da değil mi?

Ya da NPM dışında Laravel'e özgü bu şekilde eklenti paketleri yükleme/güncelleme yöntemi mevcut mu?

Şimdi bu olay çok uzun bir hikaye.
https://scotch.io/tutorials/using-la...ll-your-assets
Şu kaynaktan faydalanmak iyidir.
Bu app.css ve app.js yi anlamak için biraz webpack i anlamak gerekir. Yukarıdaki kaynakta biraz mantığı anlaşılıyor ama anahtar kelime webpack.
Bunu öğrenirseniz gerisi çorap söküğü gibi gelecektir.

25-04-2019, 00:47:44

#7

imyusyil

ztk adlı üyeden alıntı: mesajı görüntüle

Şimdi bu olay çok uzun bir hikaye.
https://scotch.io/tutorials/using-la...ll-your-assets
Şu kaynaktan faydalanmak iyidir.
Bu app.css ve app.js yi anlamak için biraz webpack i anlamak gerekir. Yukarıdaki kaynakta biraz mantığı anlaşılıyor ama anahtar kelime webpack.
Bunu öğrenirseniz gerisi çorap söküğü gibi gelecektir.

Tekrar teşekkür ederim. Gündüz gözüyle detaylıca inceleyeceğim.

21-08-2019, 15:14:08

#8

ahmetguldas

Kimlik doğrulama veya yönetimden onay bekliyor.

CodeMaster_ adlı üyeden alıntı: mesajı görüntüle

js ve css dosyalarını çağırırken asset func. kullanırsan sıkıntı çekmezsin.

örnek verecek olursak

<link rel="stylesheet" href="{{ asset('cssadmin.css ') }}">

burada nasıl bir fonksiyon oluşturmamız gerekiyor peki