Laravel İlk Uygulama

Laravel ile İlk Uygulamamızı Yapalım

Öncelikle yeni bir Laravel projesi oluşturalım:



Veritabanı Oluşturma ve Ayarlama

HeidiSQL gibi bir program ya da phpMyAdmin üzerinden bir veritabanı oluşturalım.Veritabanına istediğiniz ismi verebilirsiniz.Örnek:proje

Sonra .env dosyasında veritabanı ayarlarımızı yapalım.


DB_HOST=localhost

DB_DATABASE=proje

DB_USERNAME=root

DB_PASSWORD=



Oluşturduğumuz veritabanı için model oluşturmak ve migration işlemini gerçekleştirmek için 


php artisan make:model --migration Post

komutunu kullanıyoruz.Bu komut sayesinde Post.php adında bir model ve create_post_table adında migration oluşturduk.Bu migration dosyasını açıp aşağıdaki gibi düzenliyoruz.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
   public function up()
   {
       Schema::create('posts', function (Blueprint $table) {
           $table->increments('id');
           $table->string('slug')->unique();
           $table->string('title');
           $table->text('content');
           $table->boolean('status');
           $table->timestamps();
           $table->timestamp('published_at')->index();
       });
   }

   public function down()
   {
       Schema::drop('posts');
 }
}


Daha sonra migrate komutuyla tablomuzu oluşturuyoruz.

php artisan migrate


Rota Oluşturma

İlk önce route.php dosyasını aşağıdaki gibi güncelliyoruz.

<?php

Route::get('/', 'ContentController@index');
Route::get('/{slug}', 'ContentController@showPost');


Şimdi içerik controllerı olarak kullanacağımız bir controller dosyası oluşturalım.


php artisan make:controller ContentController

Ve bu dosyanın içeriğini aşağıdaki gibi değiştirelim:


<?php
namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;
use Carbon\Carbon;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class ContentController extends Controller
{
   public function index(){
              $posts = Post::where('published_at', '<=', Carbon::now())
                                            ->where('status', true)
                                            ->orderBy('published_at', 'desc')
                                            ->paginate(config('blog.posts_per_page'));
              return view ('index', compact('posts'));
   }

   public function showPost($slug){
              $post = Post::whereSlug($slug)->firstOrFail();
              return view ('post')->withPost($post);
   }
}

Görünüm Dosyalarının Oluşturulması

İlk olarak resouces/views dizininde index.blade.php adında bir görüntü dosyası oluşturuyoruz ve içeriğini düzenliyoruz.

<html>
<head>
<title>{{ config('blog.title') }}</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
         rel="stylesheet">
</head>
<body>
<div class="container">
   <h1>{{ config('blog.title') }}</h1>
   <h5>Page {{ $posts->currentPage() }} of {{ $posts->lastPage() }}</h5>
   <hr>
   <ul>
     @if(count($posts)<=0)
     <center><kbd>Sitede herhangi bir yazı bulunmamaktadır.</kbd></center>
     @else
       @foreach ($posts as $post)
         <li>
           <a href="/{{ $post->slug }}">{{ $post->title }}</a>
           <em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
           <p>
             {{ str_limit($post->content) }}
           </p>
         </li>
       @endforeach
     @endif
   </ul>
   <hr>
   {!! $posts->render() !!}

</div>
</body>
</html>


Daha sonlara yollanan postların görüntüleneceği post.blade.php adında bir görüntü dosyası oluşturalım:

<html>
<head>
<title>{{ $post->title }}</title>
<!-- Optional theme -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
     <h1>{{ $post->title }}<small>{{$post->slug}}</small></h1>
     <h5>{{ $post->published_at->format('M jS Y g:ia') }}</h5>
     <hr>
     <p class="lead">
     {!! nl2br(e($post->content)) !!}
     </p>
     <hr>
     <button class="btn btn-primary" onclick="history.go(-1)">
       Geri
     </button>
</div>
</body>
</html>

Admin Paneli Oluşturma

Admin panelini oluşturmak için öncelikle route.php dosyasına aşağıdaki kodları ekleyelim.


Route::get('admin', function () {
return redirect('/admin/post');
});

$router->group([
'namespace' => 'Admin',
'middleware' => 'auth',
], function () {
resource('admin/post', 'ContentController');
});

// Logging in and out
Route::get('/auth/login', 'Auth\AuthController@getLogin');
Route::post('/auth/login', 'Auth\AuthController@postLogin');
Route::get('/auth/logout', 'Auth\AuthController@getLogout');

Şimdi admin için controller yapısını oluşturalım.
Zaten var olan AuthController dosyasını şu şekilde değiştirelim:


<?php

namespace App\Http\Controllers\Auth;

use App\User;
use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class AuthController extends Controller
{
   use AuthenticatesUsers;
   protected $redirectAfterLogout = '/auth/login';
   protected $redirectTo = '/admin/post';

   public function __construct()
   {
         $this->middleware('guest', ['except' => 'getLogout']);
   }

   protected function validator(array $data)
   {
       return Validator::make($data, [
           'name' => 'required|max:255',
           'email' => 'required|email|max:255|unique:users',
           'password' => 'required|confirmed|min:6',
       ]);
   }
}

Sonra aşağıdaki artisan komutuyla Admin/ContentController dosyasını oluşturalım

php artisan make:controller Admin\\ContentController

ve bu dosyada aşağıdaki index methodunu tanımlayalım.

public function index()
   {
       return view('admin.post');
   }

Admin panelinin görünüm dosyası için resources/views dizininde admin adında bir klasör oluşturalım ve içinde post.blade.php adında dosyamızı açalım.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin Sayfamız</title>
<meta charset="utf-8">
<meta name="v" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>

   .navbar {
     margin-bottom: 0;
     border-radius: 0;
   }

   footer {
   background-color: #e6e6e6;
     padding: 28px;
   }
</style>
</head>

<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>                      
     </button>
     <a class="navbar-brand" href="#">Admin</a>
   </div>
   <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav">
       <li><a href="#">AnaSayfa</a></li>
       <li><a href="#">Kullanıcılar</a></li>
     </ul>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="../auth/logout"><span class="glyphicon glyphicon-log-in"></span> Çıkış Yap</a></li>
     </ul>
   </div>
</div>
</nav>

<div class="jumbotron">
<div class="container text-center">
    <h1>Kullanıcılar</h1>
   
<div class="jumbotron">
<div class="col-md-6 text-center">
   </div>
 
<div class="container text-center">
   <div class="col-md-6 text-right">
       <a href="/admin/post/create" class="btn btn-success btn-md">
         <i class="fa fa-plus-circle"></i> Kullanıcı Kayıdı Ekle
       </a>
   </div>
 
       <div class="row">
       <div class="col-sm-12">
       <table id="posts-table" class="table table-striped table-bordered">
           <thead>
             <tr>
                 <th>Yayınlanma Tarihi</th>
                 <th>Başlık</th>
                 <th data-sortable="false"></th>
             </tr>
           </thead>
           <tbody>
            
               <tr>
                
                   <a href="/admin/post/{{ $post->id }}/edit"
                         class="btn btn-xs btn-info">
                     <i class="fa fa-edit"></i> Düzenle
                   </a>
                   <a href="/{{ $post->slug }}"
                         class="btn btn-xs btn-warning">
                     <i class="fa fa-eye"></i> Görüntüle
                   </a>
 
                 
                   <form action="/admin/delete/{{ $post->id }}" method="POST">
                     <button class="btn btn-xs btn-danger">Sil</button>
                   </form>
                 </td>
               </tr>
             
           </tbody>
         </table>
       </div>
     </div>
   </div>    
</div>
</div>
</div>
</div>

</body>
</html>


Daha sonra aynı dizinde auth adında bir klasör oluşturalım ve onun içine de login.blade.php adında dosya oluşturalım.



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Giriş Sayfası</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
   <div class="container-fluid">
       <div class="row">
         <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
             <div class="panel-heading">Admin Sayfası Girişi</div>
             <div class="panel-body">
                 <form class="form-horizontal" role="form" method="POST"
                       action="{{ url('/auth/login') }}">
                 <input type="hidden" name="_token" value="{{ csrf_token() }}">
                 <div class="form-group">
                   <label class="col-md-4 control-label">E-Mail</label>
                   <div class="col-md-6">
                     <input type="email" class="form-control" name="email">
                     </div>
                 </div>

                 <div class="form-group">
                   <label class="col-md-4 control-label">Şifre</label>
                   <div class="col-md-6">
                     <input type="password" class="form-control" name="password">
                     </div>
                 </div>


                 <div class="form-group">
                   <div class="col-md-6 col-md-offset-4">
                       <button type="submit" class="btn btn-primary">Giriş Yap</button>
                     </div>
                 </div>
               </form>
             </div>
           </div>
         </div>
       </div>
     </div>
</body>



Veritabanına Yeni Kullanıcı Ekleme

Tablomuza kullanıcı ekleme işlemini artisan tinker komutuyla gerçekleştiriyoruz.

php artisan tinker

komutunu çalıştırıyoruz.Sonra,










yukarıdaki gibi kullanıcımızın adını,eposta ve şifre bilgilerini giriyoruz.



Admin/ContentController dosyası içerisindeki index fonsiyonunun içeriğini aşağıdaki gibi değiştirelim

public function index()
   {
       return view('admin.post')->withPosts(Post::all());
   }


Sonra route.php dosyasına aşağıdaki kodları ekleyelim.

Route::delete('/admin/delete/{id}', function ($id) {
   Post::findOrFail($id)->delete();
   return redirect('/admin/post/');
});


Admin Panelinden Post Oluşturma

resources/views/admin dizininde create.blade.php dosyası oluşturalım.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin || {{config('blog.title')}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
   /* Remove the navbar's default margin-bottom and rounded borders */
   .navbar {
     margin-bottom: 0;
     border-radius: 0;
   }

   footer {
   background-color: #f2f2f2;
     padding: 25px;
   }
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>                      
     </button>
     <a class="navbar-brand" href="#">Admin Paneli</a>
   </div>
   <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav">
        <li><a href="#">AnaSayfa</a></li>
       <li><a href="#">Yazılar</a></li>
     </ul>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="../auth/logout"><span class="glyphicon glyphicon-log-in"></span> Çıkış Yap</a></li>
     </ul>
   </div>
</div>
</nav>
<div class="panel-body">
       <form action="/admin/post/create" method="POST" class="form-horizontal">
           {{ csrf_field() }}
           <!-- Task Name -->
           <div class="form-group">
               <label for="task" class="col-sm-3 control-label">Yazı Başlığı</label>
               <div class="col-sm-6">
                   <input type="text" name="title" id="task-name" class="form-control">
               </div>
           </div>
           <div class="form-group">
               <label for="task" class="col-sm-3 control-label">Yazı URL'si</label>
               <div class="col-sm-6">
                   <input type="text" name="slug" id="task-name" class="form-control">
                </div>
           </div>
           <div class="form-group">
             <label for="task" class="col-sm-3 control-label">Yazı İçeriği</label>
             <div class="col-sm-6">
                     <textarea class="form-control" name="content" id="exampleTextarea" rows="6"></textarea>
             </div>
           </div>
             <div class="checkbox">
               <label for="task" class="col-sm-6 control-label">
                 <input type="checkbox" name="status" value="0">Yayınlanacak mı?
               </label>
             </div>
             <hr><hr>
           <center>
           <div class="form-group">
               <div class="col-sm-offset-3 col-sm-6">
                   <button type="submit" class="btn btn-default">
                       <i class="fa fa-plus"></i> Yeni Yazı Ekle
                     </button>
               </div>
           </div>
           </center>
       </form>
   </div>
</body>
</html>




Daha sonra bu yaptıklarımızı da rota olarak route.php dosyasına ekleyelim.

Route::get('/admin/post/create/', function(){
   return view('admin.create');
});

Route::post('/admin/post/create/', 'Admin\ContentController@store' );


app/Http/Controllers/Admin dizininde bulunan ContentController.php dosyasına

sınıf tanımlanmasından önce 

use Carbon\Carbon;

ekleyelim, sonra store fonsiyonunu aşağıdaki gibi değiştirelim.

public function store(Request $request)
   {
       $post = new Post;
       $post->title = $request->title;
       $post->slug = $request->slug;
       $post->content = $request->content;
       if($request->status != '')
           $post->status = 1;
       else
           $post->status = 0;
       $post->created_at = Carbon::now();
       $post->published_at = Carbon::now();
       $post->updated_at = Carbon::now();
       $post->save();

       return redirect('/admin/post/');
   }


Post Düzenleme

resources/views/admin dizininde edit.blade.php adında bir dosya oluşturalım .

<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin || Kullanıcı Ekle</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
   /* Remove the navbar's default margin-bottom and rounded borders */
   .navbar {
     margin-bottom: 0;
     border-radius: 0;
   }
 
   /* Add a gray background color and some padding to the footer */
   footer {
   background-color: #f2f2f2;
     padding: 25px;
   }
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>                      
     </button>
     <a class="navbar-brand" href="#">Admin</a>
   </div>
   <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav">
       <li><a href="#">AnaSayfa</a></li>
       <li><a href="#">Kullanıcılar</a></li>
     </ul>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="../auth/logout"><span class="glyphicon glyphicon-log-in"></span> Çıkış Yap</a></li>
     </ul>
   </div>
</div>
</nav>
 
<div class="panel-body">
       <form action="/admin/post/{id}/edit" method="POST" class="form-horizontal">
           
           <div class="form-group">
               <div class="col-sm-6">
                   <input type="hidden" name="no" id="task-name" class="form-control">
               </div>
           </div>
           
           <div class="form-group">
               <label for="task" class="col-sm-3 control-label">Kullanıcı</label>
               <div class="col-sm-6">
                   <input type="text" name="title" id="task-name" class="form-control" >
               </div>
           </div>
           <div class="form-group">
               <label for="task" class="col-sm-3 control-label">Kullanıcı URL'si</label>
               <div class="col-sm-6">
                   <input type="text" name="slug" id="task-name" class="form-control">
               </div>
           </div>
           <div class="form-group">
             <label for="task" class="col-sm-3 control-label">Görüşler</label>
             <div class="col-sm-6">
                    <textarea class="form-control" name="content" id="exampleTextarea" rows="6" ></textarea>
             </div>
           </div>
             <div class="checkbox">
               <label for="task" class="col-sm-6 control-label">
                 
                  <input type="checkbox" name="status" checked="true">Yayınlanacak mı?
                 
                  
                 
               </label>
             </div>
             <hr><hr>
           <center>
           <div class="form-group">
               <div class="col-sm-offset-3 col-sm-6">
                   <button type="submit" class="btn btn-default">
                       <i class="fa fa-plus"></i> Güncelle
                     </button>
               </div>
           </div>
           </center>
       </form>
   </div>
</body>
</html>

Sonra route.php dosyasına aşağıdaki kodları ekleyelim

Route::get('/admin/post/{id}/edit', function($id){
   $post = Post::where('id', $id)->first();
   return view('admin.edit', ['post' => $post]);
});

Route::post('/admin/post/{id}/edit', 'Admin\ContentController@edit');

Admin/ContentController dosyasındaki edit fonksiyonunu da aşağıdaki gibi değiştirelim.

public function edit($id, Request $request)
   {
       /*$affected = Post::where('id', 3)
               ->first()
                 ->update(['title' => 'içerik']);*/
       $post = Post::find($request->no);
       $post->title = $request->title;
       $post->content = $request->content;
       $post->slug = $request->slug;
       if($request->status != '')
           $post->status = 1;
       else
           $post->status = 0;
       $post->updated_at = Carbon::now();
       $post->save();
       return redirect('/admin/post/');
   }



1 yorum:

  1. Yazınız gerçekten çok işime yaradı , umarım ileride elixir yapısından da bahsedersiniz . Devamını bekliyorum . Teşekkürler

    YanıtlaSil