I have three tables.
- galleries
- design_studios
- design_studio_gallery
galleries
public function up()
{
Schema::create('galleries', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('caption');
$table->string('picture');
$table->text('description');
$table->timestamps();
});
}
design_studios
public function up()
{
Schema::create('design_studios', function (Blueprint $table) {
$table->bigIncrements('id');
$table->bigInteger('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->string('title');
$table->string('slug');
$table->string('lang');
$table->string('image')->nullable();
$table->text('sliders');
$table->text('body');
$table->timestamps();
});
Schema::create('category_design_studio', function (Blueprint $table) {
$table->bigInteger('category_id')->unsigned();
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
$table->bigInteger('design_studio_id')->unsigned();
$table->foreign('design_studio_id')->references('id')->on('design_studios')->onDelete('cascade');
$table->primary(['category_id' , 'design_studio_id']);
});
Schema::create('gallery_design_studio', function (Blueprint $table) {
$table->bigInteger('gallery_id')->unsigned();
$table->foreign('gallery_id')->references('id')->on('galleries')->onDelete('cascade');
$table->bigInteger('design_studio_id')->unsigned();
$table->foreign('design_studio_id')->references('id')->on('design_studios')->onDelete('cascade');
$table->primary(['gallery_id' , 'design_studio_id']);
});
}
I want to create multiple gallery with dynamic.
My blade
@extends('Admin.master')
@section('style')
<link rel="stylesheet" href="{{ asset('themes/css/dropzone.css') }}">
@endsection
@section('content')
<h3><i class="fas fa-plus-square ml-2"></i>افزودن استدیو طراحی جدید</h3><hr>
@include('Admin.layouts.errors')
<form action="{{ route('design-studios.store') }}" method="post" enctype="multipart/form-data" id="form">
@csrf
<input type="hidden" name="sliders">
<div class="col-md-6">
<div class="form-group">
<label for="title">عنوان</label>
<input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}">
</div>
</div>
<div class="form-group">
<label for="body">متن</label>
<textarea class="form-control" id="body" name="body"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category">دسته بندی</label>
<select name="category" id="category" class="form-control">
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lang">زبان</label>
<select id="lang" name="lang" class="form-control">
<option value="fa">فارسی</option>
<option value="en">انگلیسی</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<fieldset class="border p-3">
<legend>اسلایدر</legend>
<div class="dropzone" id="drop">
</div>
</fieldset>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="image">تصویر</label>
<input id="image" name="image" type="file" class="form-control">
<small>این تصویر برای اسلایدشو در صفحه اصلی میباشد.</small>
</div>
</div>
<div class="form-group">
<fieldset class="border p-3">
<legend>گالری</legend>
<div class="row border-danger" id="showGallery">
</div>
<div class="row mb-2 bg-white mb-5">
<div class="w-100 text-center">
<p>گالری دیگری را اضافه کنید.</p>
<a id="addGallery" class="bg-primary text-white pt-2 pb-2 pl-3 pr-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">
<i class="fas fa-check ml-2"></i>دخیره
</button>
</div>
</form>
@endsection
@section('script')
<script src="{{ asset('themes/js/dropzone.js') }}"></script>
<script src="{{ asset('themes/ckeditor/ckeditor.js') }}"></script>
<script>
let sliders = [];
Dropzone.autoDiscover = false;
$(document).ready(function(){
$('#drop').dropzone({
url: '{{ route('dropzone') }}',
method: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(f, r) {
let {slider} = r;
if(slider)
sliders.push(slider);
$('input[name="sliders"]').val(JSON.stringify(sliders));
},
});
});
CKEDITOR.replace('body', {
filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form',
extraPlugins: 'easyimage',
cloudServices_tokenUrl: 'http://localhost:8000/admin/ckeditor/image-upload',
cloudServices_uploadUrl: 'http://localhost:8000/admin/ckeditor/image-upload'
});
let countGallery = 1;
$('#addGallery').click(function () {
countGallery++;
dynamicGallery(countGallery);
});
dynamicGallery(countGallery);
function dynamicGallery (number) {
let html = '' +
'<div class="col-md-6">\n' +
'<div class="form-group">\n' +
'<label for="caption">عنوان گالری</label>\n' +
'<input type="text" id="caption" name="caption[]" class="form-control">\n' +
'</div>\n' +
'<div class="form-group">\n' +
'<label for="description">متن گالری</label>\n' +
'<textarea type="text" id="description" name="description[]" class="form-control"></textarea>\n' +
'</div>\n' +
'<div class="form-group">\n' +
'<label for="picture">تصویر گالری</label>\n' +
'<input type="file" id="picture" name="picture[]" class="form-control">\n' +
'</div>\n' +
'</div>';
$('#showGallery').append(html);
}
$('body').on('click','label', function (e) {
e.preventDefault();
$(this).next().focus();
});
</script>
@endsection
DesignStudioController.php
public function store(Request $request)
{
$designStudio = new DesignStudio;
$designStudio->user_id = 1;
$designStudio->title = $request->title;
$designStudio->lang = $request->lang;
$designStudio->body = $request->body;
if($request->has('image')) {
$image = $request->file('image');
$filename = $image->getClientOriginalName();
$image->move(public_path('images/slideShows'), $filename);
$designStudio->image = $request->file('image')->getClientOriginalName();
}
$designStudio->sliders = json_decode($request->sliders, true);
$designStudio->save();
$designStudio->categories()->attach($request->category);
$designStudio->galleries()->attach($request->caption);
$designStudio->galleries()->attach($request->description);
$designStudio->galleries()->attach($request->picture);
return redirect()->route('design-studios.index');
}