كيفاش نصاوب ألبوم صور بإستعمال Laravel الجزء الأول

فدرس اليوم غادي نشوفو كيفاش نديرو نصاوبو ألبوم صور بإستعمال Laravel غادي نزيدو صور فقاعدة البيانات منبعد غادي نديرو عرض ديال هاد الصور وغادي نشوفو كيفاش نعرضو صورة مختارة ونمسحوها من قاعدة البيانات.

نظرة سريعة بالفيديو


- إنشاء مشروع جديد وربطه بقاعدة البيانات


اول حاجة غادي نديروها غادي نخلقو مشروع جديد باستعمال cmd غادي نكتب الأمر cd c:/wamp/www من بعد الأمر composer create-project --prefer-dist laravel/laravel PhotosGallery ملي يكمل التحميل غادي نزيد قاعدة بيانات جديدة ونسميها gallery من بعد غادي نكتب الأمر php migrate باش البيانات ديالي يتزادو فقاعدة البيانات من بعد غادي نمشي للملف env. وغادي ندير الإتصال مع قاعدة البيانات ديالي الكود النهائي ديال env.

                                    
                                        APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:m1WkCo7SsvyIkcKgP1Og/rG2As9TV7LLsBE2BPdm1kE=
APP_URL=http://localhost

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

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

                                    
                                

- خلق جدول الصور فقاعدة البيانات


غادي نرجع ل cmd غادي نكتب الأمر cd c:wamp/www/PhotosGallery من بعد نكتب الأمر php artisan make:model Photo-m باش نزيد Model سميتو Photo غادي نمشي لdatabase/migrations غادي نلقا الملف سميتو create_photos_table مسبوق بالتاريخ ديال اليوم لي تخلق فيه وغادي نزيد فيه إسم الصورة من بعد غادي نكتب الأمر php migrate باش البيانات ديالي يتزادو فقاعدة البيانات الكود النهائي ديال create_photos_table.php وديالPhoto.php هو :

                                    
                                        <?php

//create_photos_table code

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

class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('photos');
    }
}

//Photo.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Photo extends Model
{
    //
    protected $fillable = ['name'];
}


                                    
                                

- الصفحة الرئيسية والصفحات الثانوية


أول حاجة غادي نمشي لresources/views غادي نزيد مجلد سميتو layouts غادي نزيد فيه ملف سميتو index-master.php لي غادي يكون أساس الصفحة الرئيسية وغادي يشمل ملفات css وjavascript لي غادي نحتاجو.

                                      
                                        <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>@yield('title')</title>

    <!-- Bootstrap -->
    <link href="{{URL::to('css/bootstrap.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    @yield('styles')
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    @yield('header')
    <div class="container">
        @yield('content')
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{{URL::to('js/bootstrap.min.js')}}"></script>
    @yield('scripts')
  </body>
</html>
                                      
                                    

header.blade.php


من بعد غادي نمشي لresources/views غادي نزيد مجلد سميتو includes غادي نزيد فيه ملف سميتو header.blade.php لي غادي تكون فيه لMenu

                                        
                                             <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{route('photos.index')}}">Photos Gallery</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Photos <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="{{route('photos.create')}}">Ajouter une photo</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
                                        
                                    

alert.blade.php


غادي نرجع للمجلد includes وغادي نزيد فيه ملف سميتو alert.blade.php لي غادي يكون فيه كود التحقق من الحقول وأنها كتستجب للمعايير لي موضوعة فل controller لي غادي نزيدوه من بعد كما غادي يكون فيها كود رسائل الخطأ ونجاح إضافة الصور

                                        
                                            @if(Session::has('success'))
    <div class="alert alert-success">{{Session::get('success')}}</div>
@endif
@if(Session::has('fail'))
    <div class="alert alert-danger">{{Session::get('fail')}}</div>
@endif
@if(count($errors) > 0)
    @foreach($errors->all() as $error)
        <div class="alert alert-danger">{{$error}}</div>
    @endforeach
@endif
                                        
                                    

كلمات مفاتيح :