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


فهاد الدرس الجديد من سلسلة laravel غادي نشوفو كيفاش نديرو upload لمجموعة دالصور بإستعمال dropzone.js لي هي javascript library ولي كتمكن من تخزين الصور فقاعدة البيانات بإستعمال drag & drop .

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

1- تحميل المشروع

أول شيء غادي تديرو هو تثبيت composer لي غادي يمكنك من تثبيت laravel يمكنلك تبحث عليه فغوغل وتحملو من الموقع الرسمي من بعد غادي تفتح cmd غادي نكتب الأمر cd c:\xampp\htdocs يلا كنتي خدام ب xampp كنتي خدام ب wamp غادي نكتب الأمر cd c:\wamp\www من بعد غادي تديرالأمر composer create-project --prefer-dist laravel/laravel laravel-multi-upload الإسم ديال المشروع هو laravel-multi-upload من بعد ما يتزاد المجلد فwamp/www أو xampp/htdocs غادي تزيد قاعدة بيانات ف phpmyadmin وتسميها store فيها 2 ديال الجداول products,photos الكود ديالها هو :

                                --
-- Structure de la table `photos`
--

CREATE TABLE `photos` (
  `id` int(10) UNSIGNED NOT NULL,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `product_id` int(10) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Structure de la table `products`
--

CREATE TABLE `products` (
  `id` int(10) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `description` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Index pour la table `photos`
--
ALTER TABLE `photos`
  ADD PRIMARY KEY (`id`),
  ADD KEY `photos_product_id_index` (`product_id`);

--
-- Index pour la table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT pour les tables exportées
--

--
-- AUTO_INCREMENT pour la table `photos`
--
ALTER TABLE `photos`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
--
-- AUTO_INCREMENT pour la table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
                            

2- الإتصال بقاعدة البيانات

من بعد فالملف env. لي فالمجلد الرئيسي ديال المشروع كنظيف عليه التغييرات لي غادي يمكنو باش نتصل بقاعدة البيانات الكود لي تغير هو :

                                DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=store
DB_USERNAME=root
DB_PASSWORD=''
                            

3- الملف ProductsController.php

كنمشي ل app/Http/Controllers كنزيد ملف جديد كنسميه ProductsController.php لي غادي تكون فيه fonction index لي كتسترجع les produits من قاعدة البيانات وكترسلهم للملف index لي غادي يكون الصفحة الرئيسية ديالنا في غادي يتعرضو المنتوجات كاملين لي عندنا ولي غادي نزيدوه من بعد ثم كاين ل fonction create لي كتوجه المستخدم للملف الخاص بإضافة produit ثم fonction store لي كتمكن من إضافة produit لقاعدة البيانات من بعد مكتستقبل المعلومات الخاصة به من الفورم لي غادي يكون فالملف add ولي غادي نزيدوه من بعد منبعد مكيتزاد كنزيد ل id ديالو فsession باش ملي نزيد الصور نزيد ل id ديالو معاهم ثم كاين ل fonction edit لي كتوجه المستخدم للملف الخاص بتعديل produit منبعد مكتسترجع ل produit لي اختار المستخدم بواسطة ل id ديالو وكترسلو للفورم لي غادي تكون فالملف update ثم كاين fonction update لي كتعدل المعلومات الخاصة ب produit من بعد مكتستقبل المعلومات الخاصة به من الفورم لي غادي يكون فالملفupdate ثم كاين ل fonction destroy لي كتسترجع produit واحد بواسطة ل id وكتمسحو وكتمسح معاه فنفس الوقت الصور ديالو من قاعدة البيانات الكود ديال الملف هو :

                                <?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductsController extends Controller
{
    //
    public function index(){
        $products = Product::all();
        return view('index',compact('products'));
    }
    public function create(){
        return view('add');
    }
    public function add(Request $request){
       $product = new Product();
       $product->title = $request->title;
       $product->description = $request->description;
       $product->save();
       session(['product_id' => $product->id]);
       return redirect()->route('photo.create');
    }
    public function edit($id){
        $product = Product::find($id);
        return view('update',compact('product'));
    }
    public function update(Request $request,$id){
       $product = Product::find($id);
       $product->title = $request->title;
       $product->description = $request->description;
       $product->update();
       session(['product_id' => $product->id]);
       return redirect()->route('photo.edit');
    }
    public function destroy($id){
        $product = Product::find($id);
        $product->photos()->delete();
        $product->delete();
        return redirect()->route('index')->with(['success'=>'Produit supprimé avec succés!']);
    }
}

                            

4- الملف Product.php

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

                                    <?php

namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    protected $fillable = [
        'title', 'description'
    ];
    public function photos(){
        return $this->hasMany('App\Photo');
    }
}

                                

5- الملف PhotosController.php

كنمشي ل app/Http/Controllers كنزيد ملف جديد كنسميه PhotosController.php لي غادي تكون فيه fonction create لي كتوجه المستخدم للملف الخاص بإضافة صور ديال ل produit ثم fonction add لي كتمكن من إضافة صور ل produit فقاعدة البيانات من بعد مكتستقبل الملفات من لinput file لي غادي يكون فالفورم لي كتجي مع dropzone.js par défaut من بعد كتعطي لكل صورة اسم وكتزيدهم فالمجلد images لي عندنا فالمجلد public ولي كيتزاد اوتوماتيكيا فاش كتضيف الصور منبعد كنزيد اسم الصور ول id ديال ل produit لي كنجبد من session فالجدول صور ثم كاين ل fonction edit لي كتوجه المستخدم للملف الخاص بتعديل صور produit اختار يعدلو ثم كاين fonction update لي كتعدل المعلومات الخاصة بصور produit من بعد مكتستقبل المعلومات الخاصة به من الفورم لي غادي يكون فالملف photo-update فكنخدم بل id ديال ل produit لي عندي ف session كنسترجعو وكنمسح التصاور ديالو السابقين وكنزيد الجداد الكود ديال الملف هو:

                                    <?php

namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;
use App\Photo;
use DB;
class PhotosController extends Controller
{
    //
    public function create(){
        return view('upload');
    }
    public function add(Request $request){
        $file = $request->file('file');
        $name = time().$file->getClientOriginalName();
        $file->move('images',$name);
        $photo = new Photo();
        $photo->product_id = session('product_id');
        $photo->name = $name;
        $photo->save();
    }   
    public function edit(){
        return view('photo-update');
    }
    public function update(Request $request){
        $id = session('product_id');
        $product = Product::find($id);
        $product->photos()->delete();
        $this->add($request);
    }
}

                                


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

بحث في الموقع


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