Başlık her ne kadar Laravel dese de bu yazının içeriği aslında tüm PHP projelerinde ve yazının mantığı tüm web programlama dillerinde kullanılabilir.
Ne demek istiyor bu başlık? Asset dediğimiz şey bildiğimiz CSS ve JavaScript dosyaları gibi front-endde import ettiğimiz dosyaların İngilizce ismi. Burada anlatacağım şey de bu dosyaları HTML ile import ederken duyulabilecek bir takım endişeleri ortadan kaldırmak ile ilgili. Mesela bu assetleri birden fazla import etmememiz gerekiyor. Ayrıca bootstrap.css dosyasını her kullanmak istediğinizde bu dosyanın yolunu yazıp blade dosyanızın içine mi ekleyeceksiniz? İşte bu yazıda bu gibi sorunlara nasıl kolay bir çözüm getirebiliriz onu anlatacağım.
Öncelikle referanslarımızı verelim. Anlatacağım fikri SleepingOwl Admin paketinde gördüm ve çok beğendim. Daha sonra biraz daha geliştirerek tüm projelerde kullanmaya başladım. Eminim öğrendikten sonra siz de bu şekilde yapmaya başlayacaksınız.
Yapacağımız şey aslında bir sınıf oluşturmak ve assetlerimizi bu sınıf yardımıyla yönetmek. Oluşturacağımız sınıfın adı MyAssetManager olsun. Sınıfımıza birkaç tane static array ekleyeceğiz. Bunlar da scripts ve styles olsun. scripts değişkeni ekleyeceğimiz JavaScript dosyalarını, styles da CSS dosyalarını tutacak.
class MyAssetManager {
protected static $styles = [];
protected static $scripts = [];
}Şimdi de script ve stil dosyalarını eklemek için birer metod oluşturalım:
public static function addScript($script) {
static::$scripts[] = $script;
}
public static function addStyle($style) {
static::$styles[] = $style;
}Assetleri almak istediğimizde de işleri bizim için kolaylaştıracak bir asset metodu oluşturalım:
protected static function assets($assets) {
return array_map(function ($asset) {
// Generate asset urls
if (strpos($asset, 'bower::') !== false) {
$asset = str_replace('bower::', '', $asset);
return asset('bower_components/' . $asset);
} else if(strpos($asset, 'css::') !== false) {
$asset = str_replace('css::', '', $asset);
return asset('css/' . $asset);
} else if(strpos($asset, 'js::') !== false) {
$asset = str_replace('js::', '', $asset);
return asset('js/' . $asset);
}
return $asset;
}, array_unique($assets));
}Bu metod $assets dizisinde birden fazla bulunan anahtarları çıkarıyor ve bu anahtarları (eklenen CSS ve JavaScript dosyaları) tam yolları ile değiştiriyor. Bu metod sayesinde CSS ve JavaScript dosyalarını eklerken dosyaların tam yolunu yazmak zorunda kalmayacağız. Mesela public/bower_components/bootstrap/dist/css/bootstrap.min.css dosyasını eklemek için tek yapmamız gereken static::addStyle(‘bower::bootstrap/dist/css/bootstrap.min.css’); . public/css klasöründeki stil dosyalarını eklerken css::dosya.css, public/js klasöründeki scriptleri eklerken de js::dosya.js diyebilirsiniz. Bu kısayolları çoğaltabilirsiniz.
Bir şeyleri hardcode etmemek ve işleri biraz daha kolaylaştırmak için de, yine bootstrap üzerinden gidelim, sınıfımıza şöyle bir metod ekleyebiliriz:
public static function addBootstrap() {
static::addScript('bower::bootstrap/dist/js/bootstrap.min.js');
static::addStyle('bower::bootstrap/dist/css/bootstrap.min.css');
}Artık bootstrapi eklemek için tek yapmamız gereken MyAssetManager::addBootstrap(); demek. Böylece tek seferde bootstrap için gereken tüm importları eklemiş olduk.
Eklediğiniz assetleri HTML ile import etmek
Şu ana kadar JavaScript ve CSS dosyalarını kolay bir şekilde ekleyebileceğimiz ve eklenen bu dosyaları unique bir şekilde alabileceğimiz bir metod içeren bir sınıf oluşturduk. Peki eklenen bu dosyaları nasıl import edeceğiz?
Scriptler ve stil dosyalarını alabilmek için öncelikle birer metod oluşturalım:
public static function styles() {
return static::assets(static::$styles);
}
public static function scripts() {
return static::assets(static::$scripts);
}CSS dosyalarını eklemek için <head>in bulunduğu blade dosyamızı açıyoruz ve head etiketini kapatmadan önce şunu yazıyoruz:
@foreach(App\MyAssetManager::styles() as $style)
<link rel="stylesheet" href="{{ $style }}"/>
@endforeachJavaScript dosyaları için de <body> etiketini kapatmadan önce şunu yazıyoruz:
@foreach(App\MyAssetManager::scripts() as $script)
<script src="{{ $script }}"></script>
@endforeachCSS ve JavaScript dosyalarını nasıl eklemeliyim?
Importları controllerlarınızın içerisinde ekleyebilirsiniz. Önemli olan HTML render edilmeden önce eklemek. Buna dikkat ettiğiniz sürece bir problem olmayacaktır. Bir örnek vermek gerekirse şöyle yapabilirsiniz:
class MainController extends Controller {
public function index() {
MyAssetManager::addJQuery;
MyAssetManager::addBootstrap();
return view('my-view');
}
}Örnekten de görüldüğü gibi artık herhangi bir kütüphaneyi tek satır kodla ekleyebilirsiniz. Ayrıca MyAssetManager sınıfını geliştirebilirsiniz. Örneğin satıriçi JavaScript kodları eklemeniz gerekiyorsa ve bunu blade dosyaları ile yapıyorsanız bu sınıfa birkaç ekleme yaparak tüm satıriçi script kodlarını yine aynı yöntemle ekleyebilirsiniz. Bir diğer örnek de bir klasör içerisindeki tüm scriptleri import etmek olabilir. Bunun için addScriptFolder gibi bir metod oluşturabilir ve klasörün içerisindeki tüm dosyaları okuyup addScript metodu ile import edebilirsiniz.