#Laravel - 13 Oct 2020
Merhabalar, bu yazımda Laravel Dinamik Selectbox Yapımından bahsedeceğim. Ajax kullanarak yaptığımız bu çalışmayı öncelikle kendi projem için uzun uğraşlar sonucu buldum ve çalışır vaziyette faaliyete geçirdim. Kullanımı oldukça basit.
İlk olarak veritabanımız içerisinde iki adet tablo oluşturalım.
- İl
- İlçe
- İl tablosu için id ve başlık sütunu
- İlçe tablosu için ise kategori ve başlık sütunu
php artisan make:model Il
php artisan make:model Ilcesırasıyla yazalım. Daha sonra
...\app
içerisinde model dosyalarımız oluşacaktır. Oluşturduğumuz il model dosyasının içine
protected $table = 'il';ilçe model dosyasının içine ise
protected $table = 'ilce';yazalım. Daha sonra ise controller oluşturmaya geçelim. Bunun için( Laravel Controllers Kullanımı yazısını okumanızı tavsiye ederim) öncelikle cmd yardımıyla aşağıdaki sizlerle paylaştığımız kodu çalıştırıyoruz.
php artisan make:controller TayfunController --resource
...\app\Http\Controllers
adresi içerisinde TayfunController adında php dosyamız oluşacaktır. Controller dosyamızın içerisine girelim ve aşağıda verdiğim kodları yapıştıralım.
public function index(){ $il = Il::all(); return view('index', compact('il') } public function regencies(){ $il_id = Input::get('id'); $regencies = Ilce::where('kategori', '=', $il_id)->get(); return response()->json($regencies); }Ekledikten sonra
namespace App\Http\Controllers;kısmının altına ise
use App\Il; use App\Ilce;kodlarını ekleyelim. Model ve Controller dosyalarında işimiz bitti. Şimdi rota oluşturmak için
\routes\web.php
dosyamızı açıyoruz.
Route::get('/', 'TayfunController@index'); Route::get('/json-regencies','TayfunController@regencies');kodlarını ekledikten sonra göstermek istediğimiz yere select kodlarımızı ve script kodlarımızı eklememiz kaldı.
<form method="get"> <div class="form-group"> <select class="form-control" name="il" id="provinces"> <option value="0" disable="true" selected="true">İl</option> @foreach ($il as $key => $value) <option value="{{ $value->id }}">{{ $value->baslik }}</option> @endforeach </select> </div> <div class="form-group"> <select class="form-control" name="ilce" id="regencies"> <option value="0" disable="true" selected="true">İl Seçiniz</option> </select> </div> </form>--------------------------------
<script type="text/javascript"> $('#provinces').on('change', function(e){ console.log(e); var id = e.target.value; $.get('/json-regencies?id=' + id,function(data) { console.log(data); $('#regencies').empty(); $('#regencies').append('<option value="0" disable="true" selected="true">Seçim yapınız</option>'); $.each(data, function(index, regenciesObj){ $('#regencies').append('<option value="'+ regenciesObj.kategori +'">'+ regenciesObj.baslik +'</option>'); }) }); });</script>