ilham
/
sekolah_adiwiyata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
ilhamwara 2025-08-21 10:41:40 +07:00
parent fe7e9da299
commit e83149996d
11 changed files with 504 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/Http/Controllers/AjaxController.php
View File

@ -43,6 +43,36 @@ class AjaxController extends Controller
'message' => 'Upload failed.',
]);
}
public function uploadTempImage(Request $request)
{
$request->validate([
'file.*' => 'required|file|mimes:png,jpg,jpeg|max:5120',
]);
$uploadedFiles = [];
if ($request->hasFile('file')) {
foreach ($request->file('file') as $file) {
$filename = uniqid() . '-' . time() . '.' . $file->getClientOriginalExtension();
$path = $file->storeAs('tmp_uploads', $filename);
$uploadedFiles[] = [
'filename' => $filename,
'url' => asset('storage/tmp_uploads/' . $filename),
];
}
return response()->json([
'success' => true,
'files' => $uploadedFiles, // Kembalikan semua file
]);
}
return response()->json([
'success' => false,
'message' => 'Upload failed.',
]);
}
public function sekolahNpsn(Request $request)
{
// dd($request->all());

3
app/Http/Controllers/FrontController.php
View File

@ -23,6 +23,7 @@ class FrontController extends Controller
return view('kegiatan_detail',$data);
}
function galeri() {
return view('galeri');
$data['kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->paginate(8);
return view('galeri',$data);
}
}

175
app/Http/Controllers/Modules/Konten/KegiatanController.php
View File

@ -45,13 +45,14 @@ class KegiatanController extends Controller
$action .= '<a href="'.url('konten/kegiatan/update/'.encode_id($row->KegiatanId)).'" data-toggle="tooltip" title="Edit Data" class="btn btn-xs btn-block btn-primary"><i class="fal fa-pencil text-white"></i></a>';
$action .= '<a href="#" data-href="'.url('konten/kegiatan/delete/'.encode_id($row->KegiatanId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data btn btn-xs btn-block btn-danger"><i class="fal fa-trash text-white"></i></a>';
}
$image = json_decode($row->image);
$_data[] = [
'no' => $key+1,
'id' => encode_id($row->KegiatanId),
'judul' => $row->judul,
'created_at' => dateTime($row->created_at),
'image' => '<image src="'.asset('uploads/'.$row->image).'" width="80">',
'image' => '<image src="'.asset($image[0]).'" width="80">',
'action' => $action,
];
@ -93,30 +94,46 @@ class KegiatanController extends Controller
$keg->kategori = $request->kategori;
$keg->body = $request->body;
if (@$request->hasFile('image')) {
$file = $request->file('image');
$destinationPath = public_path('uploads/kegiatan');
$current = Carbon::now()->format('Y/m/d');
$path = $destinationPath . '/' . $current;
$fileName = $file->getClientOriginalName();
$fileMime = $file->getClientMimeType();
$fileExtension = $file->getClientOriginalExtension();
$fileSize = $file->getSize();
if(($fileExtension != 'jpg') && ($fileExtension != 'jpeg') && ($fileExtension != 'png')){
return redirect()->back()->with([
'message' => 'Maaf File Harus Berupa PNG,JPEG,JPG!',
'type' => "error"
]);
}
$newFilename = session('id').'_'.uniqid('file_') . '.' . $fileExtension;
if(@$request->input_upload_files){
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
$filePaths = [];
if(is_array(@$request->input_upload_files)){
$filePathTim = 'kegiatan/' . $current . '/' . $newFilename;
$uploaded = $file->move($path, $newFilename);
$keg->image = $filePathTim;
$oldImages = json_decode($keg->image, true) ?? [];
foreach (@$request->input_upload_files as $file) {
$tempPath = storage_path('app/tmp_uploads/' . $file);
if (file_exists($tempPath)) {
$path = public_path('uploads/kegiatan/' . date('Y') );
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
$newPath = 'uploads/kegiatan/'.date('Y').'/'.$file;
copy($tempPath, public_path($newPath));
$newfilePaths[] = $newPath;
}
}
// gabungkan file lama + file baru
$filePaths = array_merge($oldImages, $newfilePaths);
}else{
$tempPath = storage_path('app/tmp_uploads/' . @$request->input_upload_files);
if (file_exists($tempPath)) {
$path = public_path('uploads/kegiatan/' . date('Y') );
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
$newPath = 'uploads/kegiatan/'.date('Y').'/'.@$request->input_upload_files;
copy($tempPath, public_path($newPath));
$filePaths[] = $newPath;
}
}
$path = $filePaths;
$keg->image = json_encode($path);
}
$keg->save();
}else{
@ -126,31 +143,69 @@ class KegiatanController extends Controller
$keg->kategori = $request->kategori;
$keg->body = $request->body;
if (@$request->hasFile('image')) {
$file = $request->file('image');
$destinationPath = public_path('uploads/kegiatan');
$current = Carbon::now()->format('Y/m/d');
$path = $destinationPath . '/' . $current;
$fileName = $file->getClientOriginalName();
$fileMime = $file->getClientMimeType();
$fileExtension = $file->getClientOriginalExtension();
$fileSize = $file->getSize();
if(($fileExtension != 'jpg') && ($fileExtension != 'jpeg') && ($fileExtension != 'png')){
return redirect()->back()->with([
'message' => 'Maaf File Harus Berupa PNG,JPEG,JPG!',
'type' => "error"
]);
}
$newFilename = session('id').'_'.uniqid('file_') . '.' . $fileExtension;
// if (@$request->hasFile('image')) {
// $file = $request->file('image');
// $destinationPath = public_path('uploads/kegiatan');
// $current = Carbon::now()->format('Y/m/d');
// $path = $destinationPath . '/' . $current;
// $fileName = $file->getClientOriginalName();
// $fileMime = $file->getClientMimeType();
// $fileExtension = $file->getClientOriginalExtension();
// $fileSize = $file->getSize();
// if(($fileExtension != 'jpg') && ($fileExtension != 'jpeg') && ($fileExtension != 'png')){
// return redirect()->back()->with([
// 'message' => 'Maaf File Harus Berupa PNG,JPEG,JPG!',
// 'type' => "error"
// ]);
// }
// $newFilename = session('id').'_'.uniqid('file_') . '.' . $fileExtension;
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
// if (!File::exists($path)) {
// File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
// }
$filePathTim = 'kegiatan/' . $current . '/' . $newFilename;
$uploaded = $file->move($path, $newFilename);
$keg->image = $filePathTim;
// $filePathTim = 'kegiatan/' . $current . '/' . $newFilename;
// $uploaded = $file->move($path, $newFilename);
// $keg->image = $filePathTim;
// }
if(@$request->input_upload_files){
$filePaths = [];
if(is_array(@$request->input_upload_files)){
foreach (@$request->input_upload_files as $file) {
$tempPath = storage_path('app/tmp_uploads/' . $file);
if (file_exists($tempPath)) {
$path = public_path('uploads/kegiatan/' . date('Y') );
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
$newPath = 'uploads/kegiatan/'.date('Y').'/'.$file;
copy($tempPath, public_path($newPath));
$filePaths[] = $newPath;
}
}
}else{
$tempPath = storage_path('app/tmp_uploads/' . @$request->input_upload_files);
if (file_exists($tempPath)) {
$path = public_path('uploads/kegiatan/' . date('Y') );
if (!File::exists($path)) {
File::isDirectory($path) or File::makeDirectory($path, 0777, true, true);
}
$newPath = 'uploads/kegiatan/'.date('Y').'/'.@$request->input_upload_files;
copy($tempPath, public_path($newPath));
$filePaths[] = $newPath;
}
}
$path = $filePaths;
$keg->image = json_encode($path);
}
$keg->save();
}
return redirect()->back()->with([
@ -224,4 +279,34 @@ class KegiatanController extends Controller
return response()->json(['success' => true,'message' => 'Berhasil update data','type' => 'success']);
}
function imageDelete(Request $request,$id){
$keyId = decode_id($id);
$keg = Kegiatan::where('KegiatanId',$keyId)->first();
// Ambil nama file yang mau dihapus
$fileToDelete = $request->url; // contoh: 'uploads/kegiatan/2025/file2.pdf'
// Ambil data lama
$images = json_decode($keg->image, true) ?? [];
// Cari dan hapus dari array
$newImages = array_filter($images, function ($img) use ($fileToDelete) {
return $img !== $fileToDelete;
});
// Hapus file fisik juga
$fullPath = public_path($fileToDelete);
if (File::exists($fullPath)) {
File::delete($fullPath);
}
// Simpan array baru ke DB
$keg->image = json_encode(array_values($newImages)); // reset index array
$keg->save();
return response()->json([
'status' => 'success',
'message' => 'Image deleted successfully',
]);
}
}

2
database/migrations/2025_08_08_085907_create_kegiatans_table.php
View File

@ -17,7 +17,7 @@ return new class extends Migration
$table->string('judul')->nullable();
$table->text('body')->nullable();
$table->string('kategori')->nullable();
$table->string('image')->nullable();
$table->json('image')->nullable();
$table->timestampsTz();
});
}

138
resources/views/galeri.blade.php
View File

@ -6,98 +6,36 @@
</div>
<div class="flex flex-row gap-10">
<div class="grid grid-rows-1 md:grid-cols-3 lg:grid-cols-4 gap-5">
@foreach($kegiatan as $dataKeg)
<?php
$images = json_decode($dataKeg->image);
?>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('SDN Ciracas 15.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<img src="{{ asset($images[0]) }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 15 Ciracas</h4>
<h4 class="mb-5 font-bold text-white w-50">{{ $dataKeg->judul }}</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
{{-- <button class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10">Open dialog</button> --}}
<a href="#" data-url="{{ asset('SDN Ciracas 15.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('SDN Pondok Kelapa 05.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 05 Pondok Kelapa</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('SDN Pondok Kelapa 05.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sma 67.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMAN 67 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('sma 67.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('man 2 jakarta.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi MAN 2 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('man 2 jakarta.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sdn lebak bulus 4.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 04 Lebak Bulus</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('sdn lebak bulus 4.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sma 10.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMAN 10 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('sma 10.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sdn pulogadung 07.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 07 Pulogadung</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('sdn pulogadung 07.jpg') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('berita.png') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMPN 197 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" data-url="{{ asset('berita.png') }}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<a href="#" data-url="{{$dataKeg->image}}" data-judul="{{$dataKeg->judul}}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
@endforeach
</div>
</div>
</section>
<div id="myModal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-1/2 p-6 relative">
<img src="" id="image" alt="" class="w-full">
<!-- Tombol aksi -->
<br>
<div class="flex justify-end space-x-2">
<div id="carousel" class="relative w-full flex transition-transform duration-500">
<img id="image" src="" alt="" class="w-full rounded">
<!-- tombol navigasi -->
<button id="prev" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white px-3 py-1 rounded">‹</button>
<button id="next" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white px-3 py-1 rounded">›</button>
</div>
<div class="flex justify-end space-x-2 mt-1">
<button onclick="closeModal()" class="bg-gray-300 text-gray-700 px-4 py-2 cursor-pointer rounded">Tutup</button>
</div>
</div>
@ -106,12 +44,44 @@
@section('js')
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
$('.btnmodal').on('click',function(){
document.getElementById('myModal').classList.remove('hidden');
$('#image').attr('src',$(this).data('url'));
});
function closeModal() {
document.getElementById('myModal').classList.add('hidden');
}
let slides = [];
let currentIndex = 0;
$('.btnmodal').on('click', function(e){
e.preventDefault();
$('#myModal').removeClass('hidden');
$('#judul').html($(this).data('judul'));
// ambil data-images dan parse JSON
slides = $(this).data('url');
if (!Array.isArray(slides)) {
slides = JSON.parse(slides);
}
console.log(slides);
currentIndex = 0;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
});
// tombol navigasi
$('#next').on('click', function(){
if(slides.length > 0){
currentIndex = (currentIndex + 1) % slides.length;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
}
});
$('#prev').on('click', function(){
if(slides.length > 0){
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
}
});
function closeModal(){
$('#myModal').addClass('hidden');
}
</script>
@endsection

149
resources/views/index.blade.php
View File

@ -88,7 +88,10 @@
<div class="flex flex-row gap-10">
<div class="w-full lg:w-2/3">
<div class="flex flex-col gap-3">
<img src="{{ asset('uploads/'.$kegiatan[0]->image) }}" alt="" class="w-full lg:w-[100%] rounded-[10px]">
<?php
$image = json_decode($kegiatan[0]->image);
?>
<img src="{{ asset($image[0]) }}" alt="" class="w-full lg:w-[100%] rounded-[10px]">
<div class="flex flex-row gap-3 items-center">
<span class="p-2 bg-warning text-xs rounded-[10px] text-white">Kegiatan {{ $kegiatan[0]->kategori }}</span>
<span class="text-xs opacity-[50%]">{{ date('D',strtotime($kegiatan[0]->created_at)) }}, {{ date('d M Y',strtotime($kegiatan[0]->created_at)) }}</span>
@ -105,9 +108,12 @@
<div class="hidden lg:block w-1/3">
<div class="flex flex-col gap-3">
@foreach($kegiatan as $dataKeg)
<?php
$images = json_decode($dataKeg->image);
?>
<div class="flex items-center gap-3 flex-row border-b-1 border-b-[#eee] pb-3">
<div class="flex justify-end w-2/5">
<img src="{{ asset('uploads/'.$dataKeg->image) }}" class="rounded-[10px] ">
<img src="{{ asset($images[0]) }}" class="rounded-[10px] ">
</div>
<div class="flex flex-col gap-3 justify-center w-3/5">
<span class="text-xs opacity-[50%]">{{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}</span>
@ -130,87 +136,80 @@
</div>
<div class="flex flex-row gap-10">
<div class="grid grid-rows-1 md:grid-cols-3 lg:grid-cols-4 gap-5">
@foreach($kegiatan as $dataKeg)
<?php
$images = json_decode($dataKeg->image);
?>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('SDN Ciracas 15.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<img src="{{ asset($images[0]) }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 15 Ciracas</h4>
<h4 class="mb-5 font-bold text-white w-50">{{ $dataKeg->judul }}</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('SDN Pondok Kelapa 05.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 05 Pondok Kelapa</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sma 67.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMAN 67 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('man 2 jakarta.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi MAN 2 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sdn lebak bulus 4.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 04 Lebak Bulus</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sma 10.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMAN 10 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('sdn pulogadung 07.jpg') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SDN 07 Pulogadung</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
<div class="relative group w-full overflow-hidden rounded-lg shadow-[10px_10px_10px_0px_rgba(0,0,0,0.25)]">
<img src="{{ asset('berita.png') }}" class="w-full h-full object-cover" alt="Galeri">
<div class="absolute inset-0 bg-success bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center p-4 gap-3">
<h4 class="mb-5 font-bold text-white w-50">Dokumentasi SMPN 197 Jakarta</h4>
{{-- <p class="text-white text-sm font-normal">1 Agustus 2025</p> --}}
<a href="#" class="p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<a href="#" data-url="{{$dataKeg->image}}" data-judul="{{$dataKeg->judul}}" class="btnmodal p-2 text-black text-sm bg-white opacity-50 rounded-[10px] mx-auto md:mx-0 text-center flex flex-row justify-between gap-3 w-40 ">
<span>Lihat Detail</span> <x-lucide-arrow-right width="20" class="text-black text-right"/>
</a>
</div>
</div>
@endforeach
</div>
</div>
</section>
<div id="myModal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-1/2 p-6 relative">
<div id="carousel" class="relative w-full flex transition-transform duration-500">
<img id="image" src="" alt="" class="w-full rounded">
<!-- tombol navigasi -->
<button id="prev" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white px-3 py-1 rounded">‹</button>
<button id="next" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white px-3 py-1 rounded">›</button>
</div>
<div class="flex justify-end space-x-2 mt-1">
<button onclick="closeModal()" class="bg-gray-300 text-gray-700 px-4 py-2 cursor-pointer rounded">Tutup</button>
</div>
</div>
</div>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
let slides = [];
let currentIndex = 0;
$('.btnmodal').on('click', function(e){
e.preventDefault();
$('#myModal').removeClass('hidden');
$('#judul').html($(this).data('judul'));
// ambil data-images dan parse JSON
slides = $(this).data('url');
if (!Array.isArray(slides)) {
slides = JSON.parse(slides);
}
console.log(slides);
currentIndex = 0;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
});
// tombol navigasi
$('#next').on('click', function(){
if(slides.length > 0){
currentIndex = (currentIndex + 1) % slides.length;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
}
});
$('#prev').on('click', function(){
if(slides.length > 0){
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
$('#image').attr('src', "{{ asset('/') }}"+slides[currentIndex]);
}
});
function closeModal(){
$('#myModal').addClass('hidden');
}
</script>
@endsection

5
resources/views/kegiatan.blade.php
View File

@ -7,9 +7,12 @@
<div class="flex flex-row">
<div class="grid grid-rows-1 md:grid-cols-3 lg:grid-cols-4 gap-5">
@foreach($kegiatan as $dataKeg)
<?php
$image = json_decode($dataKeg->image);
?>
<div class="p-3 border border-[#eaeaea] rounded-[10px] shadow-[2px_1px_5px_0px_rgba(0,0,0,0.10)]">
<div class="flex flex-col gap-3">
<img src="{{ asset('uploads/'.$dataKeg->image) }}" alt="" class="w-full object-cover rounded-sm h-40 lg:w-[100%]">
<img src="{{ asset($image[0]) }}" alt="" class="w-full object-cover rounded-sm h-40 lg:w-[100%]">
<div class="flex flex-row gap-3 items-center">
<span class="p-2 bg-warning text-xs rounded-[10px] text-white">Kegiatan {{ $dataKeg->kategori }}</span>
<span class="text-xs opacity-[50%]">{{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}</span>

80
resources/views/kegiatan_detail.blade.php
View File

@ -5,7 +5,44 @@
<div class="w-full lg:w-2/3">
<div class="p-3 shadow-[1px_1px_5px_0px_rgba(0,0,0,0.25)] rounded-[10px]">
<div class="flex flex-col gap-3">
<img src="{{ asset('uploads/'.$kegiatan->image) }}" alt="" class="w-full lg:w-[100%] rounded-[10px]">
<?php
$image = json_decode($kegiatan->image);
?>
<div id="carousel" class="relative w-full mx-auto">
<!-- Images -->
<div class="overflow-hidden rounded-xl relative">
<div id="carousel-inner" class="flex transition-transform duration-500">
@foreach ($image as $img)
<div class="w-full flex-shrink-0">
<img src="{{ asset($img) }}" class="w-full lg:w-[100%] rounded-[10px] object-cover" alt="Image">
</div>
@endforeach
</div>
</div>
<!-- Prev button -->
<button id="prevBtn"
class="absolute left-2 top-1/2 -translate-y-1/2 bg-gray-800/60 text-white p-2 rounded-full">
‹
</button>
<!-- Next button -->
<button id="nextBtn"
class="absolute right-2 top-1/2 -translate-y-1/2 bg-gray-800/60 text-white p-2 rounded-full">
›
</button>
<!-- Indicators -->
<div id="indicators" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex space-x-2">
@foreach ($image as $index => $img)
<button class="w-3 h-3 rounded-full {{ $index === 0 ? 'bg-white' : 'bg-gray-400' }}"></button>
@endforeach
</div>
</div>
{{-- <img src="{{ asset($image[0]) }}" alt="" class="w-full lg:w-[100%] rounded-[10px]"> --}}
<div class="flex flex-row gap-3 items-center">
<span class="p-2 bg-warning text-xs rounded-[10px] text-white">Kegiatan {{ $kegiatan->kategori }}</span>
<span class="text-xs opacity-[50%]">{{ date('D',strtotime($kegiatan->created_at)) }}, {{ date('d M Y',strtotime($kegiatan->created_at)) }}</span>
@ -46,9 +83,12 @@
<div class="p-3 shadow-[1px_1px_5px_0px_rgba(0,0,0,0.25)] rounded-[10px]">
<div class="flex flex-col gap-3">
@foreach($lainnya as $dataKeg)
<?php
$image = json_decode($dataKeg->image);
?>
<div class="flex items-center gap-3 flex-row pb-3">
<div class="flex justify-end w-2/5">
<img src="{{ asset('uploads/'.$dataKeg->image) }}" class="rounded-[10px] ">
<img src="{{ asset($image[0]) }}" class="rounded-[10px] ">
</div>
<div class="flex flex-col gap-3 justify-center w-3/5">
<span class="text-xs opacity-[50%]">{{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}</span>
@ -89,4 +129,40 @@
window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'noopener,noreferrer,width=600,height=400');
}
</script>
<script>
const carouselInner = document.getElementById("carousel-inner");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const indicators = document.querySelectorAll("#indicators button");
const totalSlides = indicators.length;
let currentIndex = 0;
function updateCarousel() {
carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
indicators.forEach((dot, idx) => {
dot.classList.toggle("bg-white", idx === currentIndex);
dot.classList.toggle("bg-gray-400", idx !== currentIndex);
});
}
prevBtn.addEventListener("click", () => {
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
updateCarousel();
});
nextBtn.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % totalSlides;
updateCarousel();
});
indicators.forEach((dot, idx) => {
dot.addEventListener("click", () => {
currentIndex = idx;
updateCarousel();
});
});
</script>
@endsection

131
resources/views/modules/konten/kegiatan/form.blade.php
View File

@ -1,6 +1,7 @@
@extends('layouts.master')
@section('page-css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/css/formplugins/dropzone/dropzone.css')}}">
@endsection
@section('breadcrumbs')
<ol class="breadcrumb page-breadcrumb">
@ -22,7 +23,7 @@
<div class="card-header">
<i class="fal fa-align-justify"></i> {{$title}}
</div>
<form action="{{route($route.'.store')}}" method="POST" enctype="multipart/form-data">
<form action="{{route($route.'.store')}}" method="POST" enctype="multipart/form-data" id="form">
{{csrf_field()}}
<div class="card-body">
<div class="row">
@ -76,7 +77,16 @@
<div class="form-group">
<label class="col-xl-12 form-label" for="fname">Image</label>
<div class="col-12 pr-1">
<input type="file" accept=".png,.jpg,.jpeg" name="image" class="form-control @error('image') is-invalid @enderror">
{{-- <input type="file" accept=".png,.jpg,.jpeg" name="image" class="form-control @error('image') is-invalid @enderror"> --}}
<div style="border: 2px dashed #0087F7; padding: 20px;" class="dropzone" id="my-dropzone">
<div class="dz-message">
Drop PDF files here or click to upload
</div>
</div>
<div id="uploaded-files" style="margin-top: 20px; display:none;">
<ul id="file-list">
</ul>
</div>
@error('image')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
@ -84,6 +94,26 @@
</div>
</div>
@if(@$item->image)
<?php
$image = json_decode($item->image);
?>
<div class="col-12 mb-3">
<div class="form-group">
<div class="col-12 pr-1">
<div class="row mb-2">
@foreach($image as $img)
<div class="col-3">
<img src="{{ asset($img) }}" alt="" class="img-fluid">
<a href="#" data-url="{{ $img }}" data-href="{{ route($route.'.image.delete',encode_id($item->KegiatanId)) }}" class="btn btn-danger btnDeleteImage mt-1 btn-block">Hapus</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endif
</div>
</div>
<div class="card-footer">
@ -102,9 +132,59 @@
@section('page-js')
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/formplugins/dropzone/dropzone.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote();
});
$('.btnDeleteImage').on('click',function(){
var base_url = $(this).attr('data-href');
var url = $(this).attr('data-url');
swal({
title: "Hapus Data!",
text: "Apa anda yakin ingin menghapus data ini ?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Ya Hapus Sekarang",
cancelButtonText: "Tidak",
closeOnConfirm: true,
closeOnCancel: true
},
function(isConfirm) {
if(isConfirm){
request = $.ajax({
url: base_url,
xhrFields: {
withCredentials: true
},
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
},
data:{
url:url
},
type: "POST",
});
// Callback handler that will be called on success
request.done(function(response, textStatus, jqXHR){
console.log(response);
toastr.success("Berhasil Menhapus Data", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
setInterval(window.location.reload(), 5000);
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
toastr.error(
"Gagal "+textStatus, errorThrown
);
});
}
});
return false;
});
$(document).ready(function() {
$('.numberInput').on('input', function() {
@ -124,5 +204,52 @@
}
});
});
const myDropzone = new Dropzone(".dropzone", {
url: "{{ url('uploadTempImage') }}", // URL ke controller kamu
method: "POST",
xhrFields: {
withCredentials: true
},
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
},
// maxFilesize: 1, // dalam MB
acceptedFiles: ".png,.jpg,.jpeg",
paramName: "file", // nama input file yang dikirim ke controller
params: {
_token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
uploadMultiple: true,
init: function() {
this.on("successmultiple", function(files, response) {
console.log('Upload success multiple:', response);
const fileList = document.getElementById('file-list');
response.files.forEach(function(fileInfo) {
const li = document.createElement('li');
li.innerHTML = `<a>${fileInfo.filename}</a>`;
fileList.appendChild(li);
// Tambahkan ke hidden input kalau perlu
const hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'input_upload_files[]';
hiddenInput.class = 'removeFormKriteria';
hiddenInput.value = fileInfo.filename;
var elem = '<input type="hidden" name="input_upload_files[]" value="'+fileInfo.filename+'" class="removeFormKriteria uploadedFiles is-required">';
$('#form').append(elem);
});
});
this.on("error", function(file, response) {
console.error('Upload error:', response);
toastr.error(response, 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
this.removeFile(file);
});
}
});
</script>
@endsection

1
routes/modules/modules.php
View File

@ -43,6 +43,7 @@ Route::name('konten.')->prefix('konten')->group(function () {
Route::get('/update/{id?}',[KegiatanController::class,'update'])->name('update');
Route::get('/grid',[KegiatanController::class,'grid'])->name('grid');
Route::get('delete/{id?}',[KegiatanController::class,'delete'])->name('delete');
Route::post('image/delete/{id?}',[KegiatanController::class,'imageDelete'])->name('image.delete');
});
Route::name('galeri.')->prefix('galeri')->group(function () {

1
routes/web.php
View File

@ -28,6 +28,7 @@ Route::post('get/kecamatan',[AjaxController::class,'getKecamatan'])->name('getKe
Route::post('get/sekolah',[AjaxController::class,'getSekolah'])->name('getSekolah');
Route::post('sekolahNpsn',[AjaxController::class,'sekolahNpsn'])->name('sekolahNpsn');
Route::post('uploadTemp', [AjaxController::class, 'uploadTemp'])->name('uploadTemp');
Route::post('uploadTempImage', [AjaxController::class, 'uploadTempImage'])->name('uploadTempImage');
Route::get('hash/{hash}', function ($hash) {
return Hash::make($hash);
});