Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

friends friends friends

Laravel-10 ve VueJs-3 Dersleri

1- XAMPP

Laravel 10.x requires a minimum PHP version of 8.1. Laravel 10.x kurabilmek için PHP sürümünüzün 8.1 ve üzeri olması gerekiyor. Eğer sisteminizde PHP geliştirmek için XAMPP ve WAMP daha önceden kuruluysa PHP versiyonunuzu öğrenmek için aşağıdaki kodu CMD komut satırında kullanabilirsiniz:

php -v

Eğer, sürümünüz eski ise XAMPP indirip kurulum yapabilirsiniz aksi halde başlangıçta bazı problemler yaşayabilirsiniz. Laravel'i 2 şekilde kurabilirsiniz. Bu kurulumlardan birinde Composer kullanacağız.

2- COMPOSER

Eğer daha önceden Composer yüklü ise versiyonunuzu öğrenmek için aşağıdaki kodu kullanabilirsiniz:

composer -V

LARAVEL KURULUMU

Laravel kurmak için 2 yol var:

1.YOL

composer create-project laravel/laravel example-app

2.YOL(COMPOSER İLE KURULUM)

composer global require laravel/installer
 
laravel new example-app

Daha sonra proje dizinine gitmek için aşağıdaki kodları CMD komut satırı ekranında çalıştırabiliriz:

cd example-app

Şimdi projenizi Visual Studio veya PHPStorm gibi bir IDE üzerinde açabilirsiniz. Bu editörlerin kendi Terminal ekranından kod yazmaya devam edeceğiz.

php artisan serve

Bu kodlar yardımıyla web sitesi ayağa kalkmış olmalı. Şimdi tarayıcınızdan http://127.0.0.1:8000/ veya http://localhost:8000/ adresine gidin ve ilk Laravel ekranınızı görün.

LARAVEL VERİ TABANI BAĞLANTISI

Dizin içinde env adında ki dosya içinde global değişkenler ve veri tabanı bağlantı ayarları var. Buraya veri tabanı adımızı, kullanıcı adımızı ve şifremizi yazmamız gerekiyor. Veri tabanı oluşturmak için öncelikle http://localhost/phpmyadmin/ adresinde gidin ve yeni bir veri tabanı oluşturun. (XAMPP üzerinde MYSQL aktif olmalı)

Veri tabanı bilgilerinizi env dosyanızda aşağıdaki gibi düzenleyebilirsiniz:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=okuldb
DB_USERNAME=root
DB_PASSWORD=

VERİ TABANINA TABLO EKLEME

Veri tabanınız, içindeki tablolarla birlikte daha önceden hazır olabilir veya siz PHPMYADMIN üzerinden kendiniz elle tablo eklemiş iseniz bu bölümü geçebilirsiniz. Ancak kodlarla birlikte bir tablo eklemek isterseniz devam edelim.

Şimdi aşağıdaki kodları, IDE Terminal ekranında çalıştırabiliriz:

VERİ TABANINDA TABLO OLUŞTURMA

php artisan make:migration create_unvanlar_table

database/migration klasörü içinde 2023_09_20_124555_create_unvanlar_table.php adında taslak bir dosya oluştu. Bu dosyada yapacağımız düzenlemeler ile veri tabanına unvanlar adında daha sonra bir tablo ekleyeceğiz. Burada tablo kolonlarını istediğiniz gibi ekleyebilirsiniz.

Ayrıca database/migrations klasörü içinde çeşitli dosyalar oluştu. Bu dosyaları kendimize göre düzenledikten sonra aşağıdaki kodları çalıştırarak veri tabanında otomatik tablolar oluşturabiliriz:

php artisan migrate

Eğer Nothing to migrate. hatası alırsanız aşağıdaki kodu çalıştırın:

php artisan migrate:reset
//daha sonra
php artisan migrate

CONTROLLER DOSYASI OLUŞTURMA

Şimdi Controller dosyamızı oluşturalım:

php artisan make:controller UnvanlarController --api

app/Http/Controllers dosyasında UnvanlarController.php adında bir dosya oluşacak.

MODEL DOSYASI OLUŞTURMA

Şimdi Model dosyamızı oluşturalım:

php artisan make:model Unvanlar

Model dosyamızı aşağıdaki gibi düzenleyebiliriz.


class Unvanlar extends Model
{
   protected $table = 'unvanlar';
   protected $primaryKey = 'unvanID';
   protected $fillable = [
    'unvanAd'
   ];
    use HasFactory;
}

Şimdi Controller dosyamızı aşağıdaki gibi hazırlayalım:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Unvanlar;

class UnvanlarController extends Controller
{
    
    protected $unvanlar;
    public function __construct(){
        $this->unvanlar = new Unvanlar();
    }
    
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        return $this->unvanlar->all();
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        return $this->unvanlar->create($request->all());
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
       return $unvan= $this->unvanlar->find($id);
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        $unvan= $this->unvanlar->find($id);
        $unvan->update($request->all());
        return $unvan;
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        $unvan = $this->unvanlar->find($id);
        return $unvan->delete();
    }
}

ROUTE LIST

Daha sonra aşağıdaki kodu terminalde çalıştıralım ve ekleme, silme, düzenleme adreslerini listeleyelim. Bunları POSTMAN'de kullanacağız ve bu adresler üzerinden ekleme,silme ve düzenleme gibi işlemler yapabileceğiz.

php artisan route:list

Vite js Kurulumu

Yukarıda backend işlemelerini hallettik, şimdi bir tane frontend yapalım. Onun için yeni bir dizin oluşturacağız. Ancak Vue kullanmak istiyorum.

npm create vite@latest frontend-app --template vue

Gelen komut ekranında sırasıyla Vue ve Javascript'i seçiyoruz. Daha sonra aşağıdaki komutları sırasıyla çalıştıralım:

cd frontend-app
npm install
npm run dev

Aşağıdaki gibi bir uyarı alacağız:

VITE v4.4.9  ready in 720 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

  LARAVEL v10.24.0  plugin v0.8.0

  ➜  APP_URL: http://localhost

Şimdi src / components dizinine gidelim ve vite.config.js dosyasında bazı değişiklikler yapalım.


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server : {
    port : 8082
  }
})

Axios Kurulumu

Axisos kurulumu için aşağıdaki kodu çalıştırabilirsiniz:

npm install --save axios
Laravel Laravel 10 Angular with vite
0 Beğeni
Laravel
Önceki Yazı

Çizimlerinizi Resme Dönüştürün

18 Eyl. 2023 tarihinde yayınlandı.
Sonraki Yazı

Düşük Kalite Logonu Yüksek Kaliteli Hale Getir

18 Eyl. 2023 tarihinde yayınlandı.
arrow