كيفاش دير images upload ب dropzone.js و laravel الجزء الثاني


فهاد الجزء الثاني من كيفاش دير images upload ب dropzone.js و laravel غادي نكملو الملفات الأساسية لي غادي تكون هي ل header و footer منبعد غادي نزيدو الصفحة الرئيسية ديالنا لي غادي يتعرضو فيها كل المنتوجات لي عندنا فقاعدة البيانات.

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

1- الملف Photo.php

ف app كنزيد ملف كنسميه Photo.php ولي عبارة عن model فيه ل fonction product لي كتدير la relation مابين la table photos و products ولي كتقولنا بلي كل photo ديال produit واحد الكود ديال الملف هو:

                                <?php

namespace App;
use Illuminate\Database\Eloquent\Model;
class Photo extends Model
{
    protected $fillable = [
        'name','photo_id'
    ];
    public function product(){
        return $this->belongsTo('App\Product');
    }
}
                            

2- الملف main-layout.blade.php

فالمجلد views زيد مجلد جديد سميه includes فيه زيد 3 ملفات واحد header.blade.php وآخر footer.blade.php وثالت سميه main-layout.blade.php هادا هو الملف لي غادي يربط الصفحات ديالنا بملفات css و js وغادي يكون هو الملف الأساسي ديال كل الصفحات الكود ديال الملف هو :

                                <!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">
    <!-- Latest compiled and minified CSS -->
    @yield('styles')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Laravel MultiUpload</title>
  </head>
  <body>
    @yield('header')
    <div class="container">
        @yield('content')
    </div><!-- /.container -->
    @yield('footer')
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    @yield('scripts')
  </body>
</html>

                            

3- الملف header.blade.php

ف header.blade.php كاين القائمة ديالنا لي كتمكن من التنقل بين الصفحات الكود ديال الملف هو:

                                <nav class="navbar navbar-default">
    <div class="container">
        <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="#">Laravel MultiUpload</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="{{route('index')}}">Accueil</a></li>
            <li><a href="{{route('product.create')}}">Ajouter</a></li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
                            

4- الملف footer.blade.php

فالمجلد includes زيد ملف جديد سميه footer.blade.php هادا هو الملف لي غادي يكون فيه ل footer ديالنا الكود ديال الملف هو :

                                    <footer>
    <div class="text-primary">
        DarijaCoding &copy2017
    </div>
</footer>
                                

5- الملف index.blade.php

فالمجلد views زيد ملف جديد سميه index.blade.php هادي هي الصفحة الرئيسية ديالنا لي فيها العرض ديال كل المنتوجات لي عندنا فقاعدة البيانات و لي كنستقبلهم من ل fonction index لي ف ProductsController وكنخدم ب foreach باش كنعرض كل معلومة فبلاصتها وكاين الروابط لي كتمكن من تعديل أو حدف المنتوجات لي معروضين وكاين أيضا رسائل النجاح والخطأ الكود ديال الملف هو:

                                    @extends('includes.main-layout')

@section('styles')
    <link rel="stylesheet" href="{{URL::to('css/main.css')}}">
@endsection
@section('header')
   @include('includes.header')
@endsection
@section('content')
   <div class="row" style="margin-top:50px;">
        <div class="col-md-7 col-md-offset-2">
            @if(Session::has('fail'))
                <div class="alert alert-danger">
                    {{Session::get('fail')}}
                </div>
            @endif
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {{Session::get('success')}}
                </div>
            @endif
            @if(count($errors) > 0)
                @foreach($errors->all() as $error)
                    <div class="alert alert-danger">{{$error}}</div>
                @endforeach
            @endif
            @foreach($products as $product)
            <h3 class="text-primary">{{$product->title}}</h3>
            <hr>
                <div class="row">
                    @foreach($product->photos as $photo)
                        <div class="col-md-2">
                            <img class="thumbnail" src="{{URL::to('images/'.$photo->name)}}" width="100" height="100" alt="">
                        </div>
                    @endforeach
                </div>
            <p class="lead">{{$product->description}}</p>
               <a href="{{route('product.edit',$product->id)}}" class="btn btn-warning">Modifier</a>
               <a href="{{route('product.delete',$product->id)}}" class="btn btn-danger">Supprimer</a>
            <hr>
            @endforeach
        </div>
   </div>
@endsection
@section('footer')
   @include('includes.footer')
@endsection
@section('scripts')

@endsection
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد