This commit is contained in:
HANIF FEBRIANSYAH 2024-09-15 20:59:56 +07:00
parent db82554138
commit ed41629e29
16 changed files with 457 additions and 322 deletions

View File

@ -12,13 +12,11 @@ public function index()
// Ambil semua data kursus // Ambil semua data kursus
$allLandingPages = DataKursus::all(); $allLandingPages = DataKursus::all();
// Ambil satu gambar secara acak untuk bagian atas // Pastikan ada data sebelum mencoba mengambil item acak
$randomLandingPage = $allLandingPages->random(); $randomLandingPage = $allLandingPages->isEmpty() ? null : $allLandingPages->random();
$randomLandingPages = $allLandingPages->isEmpty() ? collect() : $allLandingPages->random(min($allLandingPages->count(), 5));
// Ambil maksimal 6 gambar secara acak untuk bagian bawah return view('admin.dashboard', [ // Pastikan nama view sesuai dengan yang Anda gunakan
$randomLandingPages = $allLandingPages->random(min(count($allLandingPages), 6));
return view('admin.dahsboard', [
'randomLandingPage' => $randomLandingPage, 'randomLandingPage' => $randomLandingPage,
'randomLandingPages' => $randomLandingPages, 'randomLandingPages' => $randomLandingPages,
'allLandingPages' => $allLandingPages 'allLandingPages' => $allLandingPages

View File

@ -3,6 +3,7 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\DataKursus; use App\Models\DataKursus;
use Dflydev\DotAccessData\Data;
use Illuminate\Http\Request; use Illuminate\Http\Request;
class PengunjungController extends Controller class PengunjungController extends Controller
@ -21,7 +22,7 @@ public function home()
public function kursus() public function kursus()
{ {
$data_kursus = DataKursus::limit(6)->get(); $data_kursus = DataKursus::all();
foreach ($data_kursus as $item) { foreach ($data_kursus as $item) {
$item->deskripsi = \Illuminate\Support\Str::words($item->deskripsi, 26,); $item->deskripsi = \Illuminate\Support\Str::words($item->deskripsi, 26,);
} }
@ -39,6 +40,11 @@ public function search(Request $request)
return response()->json($kursus); return response()->json($kursus);
} }
public function maps()
{
$latilongti = DataKursus::all();
return view('user.peta', compact('latilongti'));
}
public function detail(string $id) public function detail(string $id)
@ -49,15 +55,14 @@ public function detail(string $id)
return view('user.detailKursus', compact(['data', 'imageNames'])); return view('user.detailKursus', compact(['data', 'imageNames']));
} }
public function rute(string $id)
{
// Ambil kursus berdasarkan ID
$ruteTerdekat = DataKursus::find($id);
// Jika data tidak ditemukan, bisa menampilkan halaman error atau redirect
public function maps() return view('user.rute', compact('ruteTerdekat'));
{
$latilongti = DataKursus::all();
return view('user.peta', compact('latilongti'));
}
public function rute()
{
return view('user.rute');
} }
} }

View File

@ -1,40 +0,0 @@
<x-adminlayout>
<div class="w-full pt-8 pb-8 px-6">
<div class="flex flex-col rounded-2xl overflow-hidden bg-white shadow-lg">
<!-- Bagian atas menampilkan satu gambar secara acak -->
<div class="relative">
@if ($randomLandingPage->img)
<div class="relative group">
<img src="{{ asset('storage/' . $randomLandingPage->img) }}"
class="object-cover w-full max-h-[600px] rounded-t-2xl" alt="Gambar">
<div
class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-semibold">{{ $randomLandingPage->nama_kursus }}</p>
</div>
</div>
@else
<div class="flex items-center justify-center h-[600px] bg-gray-200 rounded-t-2xl">
<p class="text-gray-600">Tidak ada gambar yang tersedia.</p>
</div>
@endif
</div>
<!-- Bagian bawah menampilkan maksimal 6 gambar secara acak -->
<div class="p-4">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
@foreach ($randomLandingPages as $page)
<div
class="relative group rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
<img src="{{ asset('storage/' . $page->img) }}" class="object-cover w-full h-full"
alt="">
<div
class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-semibold">{{ $page->nama_kursus }}</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</x-adminlayout>

View File

@ -0,0 +1,57 @@
<x-adminlayout>
<div class="w-full pt-10 pb-6 px-6">
<div class="flex flex-col rounded-2xl overflow-hidden bg-white">
<!-- Bagian atas menampilkan satu gambar secara acak -->
<div class="relative">
@if ($randomLandingPage)
@if ($randomLandingPage->img)
<div class="relative group">
<img src="{{ asset('storage/' . $randomLandingPage->img) }}"
class="object-cover w-full max-h-[600px] rounded-2xl" alt="Gambar">
<div
class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-semibold">{{ $randomLandingPage->nama_kursus }}</p>
</div>
</div>
@else
<div class="flex items-center justify-center h-[600px] bg-gray-200 rounded-t-2xl">
<p class="text-gray-600">Tidak ada gambar yang tersedia.</p>
</div>
@endif
@else
<div class="py-10 flex col-span-3">
<div class="bg-[#EBFEA1] w-full poppins-extrabold m-auto flex items-center justify-center p-2">
<p>Tidak Tersedia Kursus</p>
</div>
</div>
@endif
</div>
<!-- Bagian bawah menampilkan maksimal 6 gambar secara acak -->
<div class="py-4">
<div class="grid grid-cols-5 gap-4">
@if ($randomLandingPages->isNotEmpty())
@foreach ($randomLandingPages as $page)
<div
class="relative group rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
<img src="{{ asset('storage/' . $page->img) }}" class="object-cover w-full h-full"
alt="">
<div
class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-semibold">{{ $page->nama_kursus }}</p>
</div>
</div>
@endforeach
@else
<div class="py-10 flex col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-5">
<div
class="bg-[#EBFEA1] w-full poppins-extrabold m-auto flex items-center justify-center p-2">
<p>Tidak Tersedia Kursus</p>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</x-adminlayout>

View File

@ -3,14 +3,14 @@
<div class="container"> <div class="container">
<div class="py-10"> <div class="py-10">
<div class="flex justify-end items-center pb-4 ">
<a class="bg-[#4F7F81] py-2 px-4 rounded-xl shadow-md shadow-gray-600 hover:bg-[#3F6A6B] text-white font-bold"
href="{{ route('admin.create') }}">Tambah Data</a>
</div>
<div class="relative overflow-x-auto sm:rounded-lg"> <div class="relative overflow-x-auto sm:rounded-lg">
<div class="flex justify-end items-center pb-4 ">
<a class="bg-[#4F7F81] py-2 px-4 rounded-xl shadow-md shadow-black text-white font-bold"
href="{{ route('admin.create') }}">Tambah Data</a>
</div>
<table class="w-full text-sm text-left rtl:text-right shadow-md shadow-black text-gray-500"> <table class="w-full text-sm text-left rtl:text-right shadow-md shadow-gray-600 text-gray-500">
<thead class="text-xs text-gray-700 uppercase shadow-md shadow-black bg-gray-50"> <thead class="text-xs text-gray-700 uppercase shadow-md shadow-gray-600 bg-gray-50">
<tr> <tr>
<th scope="col" class="px-6 py-3">No</th> <th scope="col" class="px-6 py-3">No</th>
<th scope="col" class="px-6 py-3">Nama Kursus</th> <th scope="col" class="px-6 py-3">Nama Kursus</th>
@ -19,34 +19,40 @@
<th scope="col" class="px-6 py-3">Aksi</th> <th scope="col" class="px-6 py-3">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md shadow-black"> <tbody class="shadow-md shadow-gray-600">
@foreach ($courses as $index => $course) @foreach ($courses as $index => $course)
<tr class="odd:bg-white even:bg-gray-50 shadow-md shadow-black"> <tr class="odd:bg-white even:bg-gray-50 shadow-md shadow-gray-600">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"> <th scope="row"
{{ $index + 1 }} class="justify-center items-center px6 py-4 font-medium text-gray-900 whitespace-nowrap">
<p class="m-auto space-x-2 flex justify-center">
{{ $index + 1 }}
</p>
</th> </th>
<td class="px-6 py-4"> <td class="px-6 py-4 m-auto">
{{ $course->nama_kursus }} {{ $course->nama_kursus }}
</td> </td>
<td class="px-6 py-4"> <td class="px-6 py-4 m-auto">
{{ $course->deskripsi }} {{ $course->deskripsi }}
</td> </td>
<td class="px-6 py-4"> <td class="px-6 py-4 m-auto">
<img src="{{ asset('storage/' . $course->img) }}" class="w-72 h-auto object-cover" <img src="{{ asset('storage/' . $course->img) }}"
alt=""> class="w-72 h-14 shadow-md shadow-gray-500 object-cover" alt="">
</td> </td>
<td class="px-6 py-4 flex space-x-2"> <td class="justify-center items-center px6 py-4">
<a href="/admin/{{ $course->id }}/edit-kursus" <div class="m-auto space-x-2 flex justify-center">
class="font-medium text-white hover:underline py-2 px-4 bg-[#4F7F81] rounded-xl">
Edit <a href="/admin/{{ $course->id }}/edit-kursus"
</a> class="font-medium shadow-md shadow-gray-600 hover:bg-[#3F6A6B] text-white py-2 px-4 bg-[#4F7F81] rounded-xl">
<!-- Tombol DELETE --> Edit
<button data-modal-target="popup-modal-{{ $course->id }}" </a>
data-modal-toggle="popup-modal-{{ $course->id }}" <!-- Tombol DELETE -->
class="font-medium text-white hover:underline py-2 px-4 bg-[#4F7F81] rounded-xl" <button data-modal-target="popup-modal-{{ $course->id }}"
type="button"> data-modal-toggle="popup-modal-{{ $course->id }}"
Hapus class="font-medium shadow-md shadow-gray-600 hover:bg-[#3F6A6B] text-white py-2 px-4 bg-[#4F7F81] rounded-xl"
</button> type="button">
Hapus
</button>
</div>
<!-- Modal Konfirmasi --> <!-- Modal Konfirmasi -->
<div id="popup-modal-{{ $course->id }}" tabindex="-1" <div id="popup-modal-{{ $course->id }}" tabindex="-1"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
@ -112,16 +118,8 @@ class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-
}); });
</script> </script>
</td> </td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>

View File

@ -4,8 +4,7 @@
<div class="py-10"> <div class="py-10">
<div class="pb-4 flex"> <div class="pb-4 flex">
<a class="px-4 flex text-white text-lg justify-center shadow-md shadow-gray-600 items-center py-2 rounded-xl bg-[#4F7F81]"
<a class="px-4 flex text-white text-lg justify-center items-center py-2 rounded-xl bg-[#4F7F81]"
href="{{ route('admin.dataKursus') }}"><svg class="w-5 h-5 text-white " aria-hidden="true" href="{{ route('admin.dataKursus') }}"><svg class="w-5 h-5 text-white " aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@ -32,6 +31,7 @@ class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg curs
id="file_input" type="file" name="img"> id="file_input" type="file" name="img">
</div> </div>
<!-- Deskripsi --> <!-- Deskripsi -->
<div> <div>
<label for="deskripsi" class="block mb-2 text-sm font-medium text-gray-900">Deskripsi</label> <label for="deskripsi" class="block mb-2 text-sm font-medium text-gray-900">Deskripsi</label>
@ -66,17 +66,7 @@ class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Longitude" /> placeholder="Longitude" />
</div> </div>
@if ($errors->any())
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
role="alert">
<strong class="font-bold">Error:</strong>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Paket --> <!-- Paket -->
<div> <div>
@ -114,17 +104,28 @@ class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border bor
placeholder="Write your thoughts here..."></trix-editor> placeholder="Write your thoughts here..."></trix-editor>
</div> </div>
</div> </div>
@if ($errors->any())
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
role="alert">
<strong class="font-bold">Error:</strong>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<button type="button" data-modal-target="popup-modal" data-modal-toggle="popup-modal" <button type="button" data-modal-target="popup-modal" data-modal-toggle="popup-modal"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"> class="shadow-md shadow-gray-600 text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">
Submit Submit
</button> </button>
<!-- Modal Konfirmasi --> <!-- Modal Konfirmasi -->
<div id="popup-modal" tabindex="-1" <div id="popup-modal" tabindex="-1"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full"> <div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div class="relative bg-white rounded-lg shadow ">
<button type="button" <button type="button"
class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center "
data-modal-hide="popup-modal"> data-modal-hide="popup-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 14 14"> fill="none" viewBox="0 0 14 14">
@ -134,20 +135,19 @@ class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hov
<span class="sr-only">Close modal</span> <span class="sr-only">Close modal</span>
</button> </button>
<div class="p-4 md:p-5 text-center"> <div class="p-4 md:p-5 text-center">
<svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" <svg class="mx-auto mb-4 text-[#3F6A6B] w-12 h-12 " aria-hidden="true"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg> </svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400"> <h3 class="mb-5 text-lg font-normal text-black ">
Apakah Anda yakin ingin mengirimkan formulir ini?</h3> Apakah Anda yakin ingin mengirimkan formulir ini?</h3>
<button id="confirm-submit" <button id="confirm-submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"> class="text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
Ya, Kirim Ya, Kirim
</button> </button>
<button type="button" <button type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-[#3F6A6B] focus:z-10 focus:ring-4 focus:ring-gray-100 "
data-modal-hide="popup-modal">Tidak, Batal</button> data-modal-hide="popup-modal">Tidak, Batal</button>
</div> </div>
</div> </div>

View File

@ -36,7 +36,7 @@ class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg curs
<div class="ml-2"> <div class="ml-2">
<!-- Modal toggle --> <!-- Modal toggle -->
<button data-modal-target="file-upload-modal" data-modal-toggle="file-upload-modal" <button data-modal-target="file-upload-modal" data-modal-toggle="file-upload-modal"
class="block w-20 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm py-3 text-center" class="block w-20 text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm py-3 text-center"
type="button"> type="button">
Detail Detail
</button> </button>
@ -79,24 +79,29 @@ class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg curs
<!-- Modal toggle --> <!-- Modal toggle -->
<button data-modal-target="multiple-files-modal" <button data-modal-target="multiple-files-modal"
data-modal-toggle="multiple-files-modal" data-modal-toggle="multiple-files-modal"
class="block w-20 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm py-3 text-center" class="block w-20 text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm py-3 text-center"
type="button"> type="button">
Detail Detail
</button> </button>
<!-- Multiple Files Modal --> <!-- Multiple Files Modal -->
<div id="multiple-files-modal" tabindex="-1" aria-hidden="true" <div id="multiple-files-modal" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> class="hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative overflow-x-auto p-10 w-full max-w-2xl max-h-full bg-white rounded-lg shadow-lg"> <div
class="relative overflow-x-auto py-10 w-full max-w-2xl max-h-full bg-white rounded-lg shadow-lg">
<div class="flex space-x-4">
<!-- Flex container to arrange images horizontally -->
@if (!empty($dataKursus->img_konten)) @if (!empty($dataKursus->img_konten))
@foreach (json_decode($dataKursus->img_konten, true) as $image) @foreach (json_decode($dataKursus->img_konten, true) as $image)
<img src="{{ asset('storage/' . $image) }}" class="object-cover m-auto" <img src="{{ asset('storage/' . $image) }}"
alt="Gambar"> class="object-cover h-64 w-auto px-5 flex-shrink-0 " alt="Gambar">
@endforeach @endforeach
@else @else
<p>Tidak ada gambar yang tersedia.</p> <p>Tidak ada gambar yang tersedia.</p>
@endif @endif
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +166,7 @@ class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border bor
</div> </div>
</div> </div>
<button type="submit" <button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button> class="text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
</form> </form>
</div> </div>
</div> </div>

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
@include('components.navbarAdmin') @include('components.navbarAdmin')
@include('partials.head') @include('partials.head')
@include('partials.font') @include('partials.font')

View File

@ -1,8 +1,9 @@
<div class="bg-[#4F7F81]"> <div class="bg-[#4F7F81]">
<nav class="border-gray-200 container bg-[#4F7F81] "> <nav class="border-gray-200 container bg-[#4F7F81] ">
<div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center "> <a href="{{ route('user.home') }}" class="flex items-center ">
<img src="{{ asset('img/Rectangle 65.png') }}" class="h-14 object-cover w-14 lg:mw-20 lg:h-20" alt="Flowbite Logo" /> <img src="{{ asset('img/Rectangle 65.png') }}" class="h-14 object-cover w-14 lg:mw-20 lg:h-20"
alt="Flowbite Logo" />
<span <span
class="self-center text-2xl sm:text-3xl lg:text-4xl text-white font-semibold whitespace-nowrap pt-4 aclonica-regular">LearnMap</span> class="self-center text-2xl sm:text-3xl lg:text-4xl text-white font-semibold whitespace-nowrap pt-4 aclonica-regular">LearnMap</span>
</a> </a>
@ -28,7 +29,7 @@ class="{{ request()->is('beranda') ? 'bg-[#EBFEA1] md:bg-transparent md:text-wh
</li> </li>
<li class=""> <li class="">
<a href="{{ route('user.kursus') }}" <a href="{{ route('user.kursus') }}"
class="{{ request()->is('kursus','detailKursus') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 rounded hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm "> class="{{ request()->is('kursus', 'kursus/*/detail','kursus/*/rute') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 rounded hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm ">
Kursus Kursus
</a> </a>
</li> </li>

View File

@ -1,13 +1,16 @@
<div class="bg-[#4F7F81]"> <div class="bg-[#4F7F81]">
<nav class="border-gray-200 container bg-[#4F7F81] "> <nav class="border-gray-200 container bg-[#4F7F81]">
<div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center"> <a href="{{ route('admin.home') }}" class="flex items-center">
<img src="{{ asset('img/Rectangle 65.png') }}" class="h-14 object-cover w-14 lg:mw-20 lg:h-20" alt="Flowbite Logo" /> <img src="{{ asset('img/Rectangle 65.png') }}" class="h-14 object-cover w-14 lg:mw-20 lg:h-20"
alt="Flowbite Logo" />
<span <span
class="self-center text-2xl sm:text-3xl lg:text-4xl text-white font-semibold whitespace-nowrap pt-4 aclonica-regular">LearnMap</span> class="self-center text-2xl sm:text-3xl lg:text-4xl text-white font-semibold whitespace-nowrap pt-4 aclonica-regular">
LearnMap
</span>
</a> </a>
<button data-collapse-toggle="navbar-solid-bg" type="button" <button data-collapse-toggle="navbar-solid-bg" type="button"
class="inline-flex text-white items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-gray-200 " class="inline-flex text-white items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-gray-200"
aria-controls="navbar-solid-bg" aria-expanded="false"> aria-controls="navbar-solid-bg" aria-expanded="false">
<span class="sr-only">Open main menu</span> <span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@ -19,31 +22,89 @@ class="inline-flex text-white items-center p-2 w-10 h-10 justify-center text-sm
<div class="hidden w-full md:block md:w-auto" id="navbar-solid-bg"> <div class="hidden w-full md:block md:w-auto" id="navbar-solid-bg">
<ul <ul
class="flex flex-col font-medium mt-4 rounded-lg bg-white md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent"> class="flex flex-col font-medium mt-4 rounded-lg bg-white md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent">
<li class=""> <li class="">
<a href="{{ route('admin.home') }}" <a href="{{ route('admin.home') }}"
class="{{ request()->is('admin/dashboard') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 rounded hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm "> class="{{ request()->is('admin/dashboard') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 hover:bg-[#EBFEA1] rounded-lg md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm">
Dashboard Dashboard
</a> </a>
</li> </li>
<li class=""> <li class="">
<a href="{{ route('admin.dataKursus') }}" <a href="{{ route('admin.dataKursus') }}"
class="{{ request()->is('admin/data-kursus','admin/tambahdata') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 rounded hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm "> class="{{ request()->is('admin/data-kursus', 'admin/create-data', 'admin/*/edit-kursus') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm">
Data Kursus Data Kursus
</a> </a>
</li> </li>
<li class=""> <li class="">
<form method="POST" action="{{ route('logout') }}"> <div
@csrf class="text-gray-900 block py-2 px-3 md:p-0 rounded-lg hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm">
<button type="submit" <button type="button" data-modal-target="popup-modal" data-modal-toggle="popup-modal">
class="{{ request()->is('peta') ? 'bg-[#EBFEA1] md:bg-transparent md:text-white md:underline' : 'text-gray-900' }} block py-2 px-3 md:p-0 rounded hover:bg-[#EBFEA1] md:hover:bg-transparent md:border-0 md:hover:text-white poppins-extrabold text-sm "> Keluar
Keluar </button>
</button> </div>
</form>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</div> </div>
<!-- Modal Konfirmasi -->
<div id="popup-modal" tabindex="-1"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow">
<button type="button"
class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
data-modal-hide="popup-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center">
<svg class="mx-auto mb-4 text-[#3F6A6B] w-12 h-12" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<h3 class="mb-5 text-lg font-normal text-black">
Apakah Anda yakin ingin mengirimkan formulir ini?
</h3>
<div class="flex justify-center">
<form id="logout-form" method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit"
class="text-white bg-[#4F7F81] hover:bg-[#3F6A6B] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
Ya, Keluar
</button>
</form>
<button type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-[#3F6A6B] focus:z-10 focus:ring-4 focus:ring-gray-100"
data-modal-hide="popup-modal">
Tidak, Batal
</button>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-modal-toggle]').forEach(button => {
button.addEventListener('click', () => {
const targetId = button.getAttribute('data-modal-target');
document.getElementById(targetId).classList.remove('hidden');
});
});
document.querySelectorAll('[data-modal-hide]').forEach(button => {
button.addEventListener('click', () => {
const targetId = button.getAttribute('data-modal-hide');
document.getElementById(targetId).classList.add('hidden');
});
});
});
</script>

View File

@ -4,4 +4,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@stack('script') @stack('script')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>

View File

@ -8,22 +8,24 @@
<div class="container flex justify-end items-center pb-16"> <div class="container flex justify-end items-center pb-16">
<div id="default-carousel" class="relative w-full" data-carousel="slide"> <div id="default-carousel" class="relative w-full" data-carousel="slide">
<!-- Carousel wrapper --> <!-- Carousel wrapper -->
<div class="relative h-48 sm:h-[250px] md:h-[350px] lg:h-[450px] xl:h-[500px] 2xl:h-[600px] overflow-hidden rounded-lg"> <div
@foreach ($imageNames as $index => $imageName) class="relative h-48 sm:h-[250px] md:h-[350px] lg:h-[450px] xl:h-[500px] 2xl:h-[600px] overflow-hidden rounded-lg">
<div class="hidden duration-1000 ease-in-out" data-carousel-item> @foreach ($imageNames as $index => $imageName)
<img src="{{ asset('storage/' . $imageName) }}" <div class="hidden duration-1000 ease-in-out" data-carousel-item>
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" <img src="{{ asset('storage/' . $imageName) }}"
alt="..."> class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
</div> alt="...">
@endforeach </div>
@endforeach
</div> </div>
<!-- Slider indicators --> <!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse"> <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
@for ($i = 0; $i < count($imageNames); $i++) @for ($i = 0; $i < count($imageNames); $i++)
<button type="button" class="w-3 h-3 rounded-full" aria-current="{{ $i === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $i + 1 }}" data-carousel-slide-to="{{ $i }}"></button> <button type="button" class="w-3 h-3 rounded-full" aria-current="{{ $i === 0 ? 'true' : 'false' }}"
@endfor   aria-label="Slide {{ $i + 1 }}" data-carousel-slide-to="{{ $i }}"></button>
</div> @endfor
</div>
<!-- Slider controls --> <!-- Slider controls -->
<button type="button" <button type="button"
class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
@ -55,10 +57,11 @@ class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/3
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<p class="poppins-medium text-3xl text-black py-4">Kampung Inggris LC - Language Center </p> <p class="poppins-medium text-3xl xl:text-4xl text-black pb-4">Kampung Inggris LC - Language Center </p>
<button class="poppins-regular py-2 px-4 bg-[#4F7F81] text-white rounded-xl text-xl shadow-xl">Rute <a href="/kursus/{{ $data->id }}/rute" target="_blank"
Terdekat</button> class="poppins-regular py-2 px-4 bg-[#4F7F81] text-white rounded-xl text-xl shadow-xl">Rute Terdekat</a>
<p class="text-black text-2xl py-4 poppins-semibold">Deskripsi</p>
<p class="text-black text-2xl pt-10 xl:pt-16 poppins-semibold">Deskripsi</p>
<p class="poppins-regular text-black text-2xl pb-2 max-w-7xl"> <p class="poppins-regular text-black text-2xl pb-2 max-w-7xl">
{{ $data->deskripsi }} {{ $data->deskripsi }}
</p> </p>

View File

@ -14,78 +14,67 @@
<div class="container pb-20"> <div class="container pb-20">
<div class="flex justify-between items-center pb-4 "> <div class="flex justify-between items-center pb-4 ">
<p class="text-black poppins-semibold"> <p class="text-black poppins-semibold text-xl">
Kursus Populer Kursus Populer
</p> </p>
<a href="/kursus" class="py-1 px-4 rounded-full bg-white "> <a href="/kursus" class="py-1 px-4 rounded-full bg-white font-bold text-lg ">
Lihat Semua Kursus Lihat Semua Kursus
</a> </a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 m-auto justify-center items-center"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 m-auto justify-center items-center">
@foreach ($landingpage as $landingpage) @if ($landingpage->isNotEmpty())
<div class="transition ease-in-out delay-75 hover:-translate-y-1 hover:scale-105 duration-300 max-w-max bg-white border border-gray-200 rounded-lg shadow "> @foreach ($landingpage as $landingpage)
<a href="#"> <div
<img class="rounded-lg m-auto flex justify-center items-center w-full max-h-64 object-cover" class="w-full h-full bg-white border border-gray-200 rounded-lg transition ease-in-out delay-0 hover:-translate-y-1 hover:scale-100 duration-300">
src="{{ asset('storage/' . $landingpage->img) }}" alt="" /> <div class="">
</a> <a href="#">
<div class="p-5"> <img class="rounded-lg m-auto flex justify-center items-center w-full h-72 object-cover"
<a href="#"> src="{{ asset('storage/' . $landingpage->img) }}" alt="" />
<h5
class="mb-2 text-2xl poppins-regular font-extrabold tracking-tight text-gray-900 ">
{{ $landingpage->nama_kursus }}</h5>
</a>
<p class="mb-3 font-normal poppins-regular text-gray-700">
{{ Str::words($landingpage->deskripsi, 30, '...') }}
</p>
<div class="flex items-center">
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg class="w-4 h-4 text-gray-300 me-1 " aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
</div>
<div class="flex justify-end">
<a href="/kursus/{{ $landingpage->id }}/detail"
class="inline-flex items-center px-6 font-extrabold py-2 text-sm text-center ring-2 text-black ring-black hover:text-white hover:bg-[#4F7F81] hover:ring-[#4F7F81] rounded-full focus:ring-4 focus:outline-none focus:ring-blue-300 -700 ue-800">
Lihat
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a> </a>
<div class="p-5 h-44">
<a href="#">
<h5
class="mb-2 text-2xl poppins-regular font-extrabold tracking-tight text-gray-900 ">
{{ $landingpage->nama_kursus }}</h5>
</a>
<p class="mb-3 font-normal poppins-regular text-gray-700">
{{ Str::words($landingpage->deskripsi, 30, '...') }}
</p>
</div>
</div> </div>
<div class="flex items-end justify-end bg-white rounded-b-lg ">
<div class="mb-4 mr-4 ">
<a href="/kursus/{{ $landingpage->id }}/detail"
class="inline-flex items-center px-6 py-2 text-sm font-extrabold text-black ring-2 ring-black rounded-full hover:text-white hover:bg-[#4F7F81] hover:ring-[#4F7F81] focus:ring-4 focus:outline-none focus:ring-blue-300">
Lihat
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a>
</div>
</div>
</div>
@endforeach
@else
<div class="py-10 flex col-span-3">
<div class="bg-[#EBFEA1] w-full poppins-extrabold m-auto flex items-center justify-center p-2">
<p>Tidak Tersedia Kursus</p>
</div> </div>
</div> </div>
@endforeach @endif
</div> </div>
</div> </div>
</div> </div>
<div class="container py-10"> <div class="container py-16">
<p class="text-xl poppins-semibold ">Tentang Kami</p> <p class="text-xl poppins-semibold ">Tentang Kami</p>
<div class="grid xl:grid-cols-2 grid-cols-1 "> <div class="grid xl:grid-cols-2 grid-cols-1 ">
<div class="text-xl poppins-semibold"> <div class="text-xl poppins-semibold">

View File

@ -11,11 +11,12 @@
<div class="flex"> <div class="flex">
<div class="relative w-full"> <div class="relative w-full">
<input type="search" id="search-dropdown" <input type="search" id="search-dropdown"
class="block pr-12 p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg focus:ring-blue-500 focus:border-blue-500" class="block pr-12 p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-s-lg rounded-e-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="Pencarian Nama Kursus"/> placeholder="Pencarian Nama Kursus" />
<div class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-[#4F7F81] rounded-e-lg border border-[#4F7F81]"> <div
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="absolute top-0 end-0 px-4 pt-3 pb-2.5 text-sm font-medium h-full text-white bg-[#4F7F81] rounded-e-lg border border-[#4F7F81]">
fill="none" viewBox="0 0 20 20"> <svg class="w-4 h-4 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" /> stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg> </svg>
@ -26,29 +27,35 @@ class="block pr-12 p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-
</div> </div>
</div> </div>
<div id="kursus-container" class="pb-20 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 m-auto justify-center items-center"> <div id="kursus-container"
class="pb-20 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 m-auto justify-center items-center">
@foreach ($data_kursus as $kursus) @foreach ($data_kursus as $kursus)
<div class="shadow-2xl transition ease-in-out delay-75 hover:-translate-y-1 hover:scale-105 duration-300 bg-white border border-gray-300 rounded-lg kursus-item"> <div
<a href="#"> class="kursus-item w-full h-full bg-white border shadow-lg border-gray-200 rounded-lg transition ease-in-out delay-0 hover:-translate-y-1 hover:scale-100 duration-300">
<img class="rounded-lg m-auto w-full max-h-64 object-cover" <div>
src="{{ asset('storage/' . $kursus->img) }}" alt="{{ $kursus->nama_kursus }}" />
</a>
<div class="p-5">
<a href="#"> <a href="#">
<h5 class="mb-2 text-2xl poppins-regular font-extrabold tracking-tight text-gray-900 nama-kursus"> <img class="rounded-lg m-auto flex justify-center items-center w-full h-72 object-cover"
{{ $kursus->nama_kursus }} src="{{ asset('storage/' . $kursus->img) }}" alt="" />
</h5>
</a> </a>
<p class="mb-3 font-normal poppins-regular text-gray-700"> <div class="p-5 h-44">
{{ Str::limit($kursus->deskripsi, 200, '...') }} <a href="#">
<h5
</p> class="nama-kursus mb-2 text-2xl poppins-regular font-extrabold tracking-tight text-gray-900">
<div class="flex justify-end mt-8"> {{ $kursus->nama_kursus }}
</h5>
</a>
<p class="mb-3 font-normal poppins-regular text-gray-700">
{{ Str::words($kursus->deskripsi, 30, '...') }}
</p>
</div>
</div>
<div class="flex items-end justify-end bg-white rounded-b-lg">
<div class="mb-4 mr-4">
<a href="/kursus/{{ $kursus->id }}/detail" <a href="/kursus/{{ $kursus->id }}/detail"
class="inline-flex items-center px-6 py-2 text-sm font-extrabold text-black ring-2 ring-black hover:text-white hover:bg-[#4F7F81] hover:ring-[#4F7F81] rounded-full focus:ring-4 focus:outline-none"> class="inline-flex items-center px-6 py-2 text-sm font-extrabold text-black ring-2 ring-black rounded-full hover:text-white hover:bg-[#4F7F81] hover:ring-[#4F7F81] focus:ring-4 focus:outline-none focus:ring-blue-300">
Lihat Lihat
<svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
fill="none" viewBox="0 0 14 10"> xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" /> stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg> </svg>
@ -58,6 +65,7 @@ class="inline-flex items-center px-6 py-2 text-sm font-extrabold text-black ring
</div> </div>
@endforeach @endforeach
</div> </div>
</div> </div>
<script> <script>

View File

@ -1,78 +1,118 @@
<x-adminlayout> <div class="">
<style>
/* Set the height of the map */ </div>
#map {
/* Height will be controlled by Tailwind CSS classes */ <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
max-width: 100%; <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
@vite('resources/css/app.css')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@stack('script')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
<div id="map" class="w-full h-full object-cover">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Inisialisasi peta
var map = L.map('map').setView([-7.7523414, 112.1700522], 13);
// Menambahkan tile layer dari OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// Variabel untuk menyimpan marker lokasi pengguna
var userMarker;
if (L.Browser.ielt9) {
alert('Upgrade your browser, dude!');
} }
</style> // Cek jika browser mendukung geolocation
<div class="container"> if (navigator.geolocation) {
<div class="py-10 bg-white"> // Menemukan lokasi awal pengguna
<div class="bg-[#EBFEA1] poppins-extrabold m-auto flex items-center justify-center p-2"> map.locate({
<p>Halaman ini berisi Rute menuju ke MANA</p> setView: true,
</div> maxZoom: 16.5
</div> });
<div class="pb-10">
<!-- Apply Tailwind CSS classes for responsive width and height -->
<div id="map"
class="w-full h-56 sm:h-64 md:h-96 lg:h-[500px] xl:h-[650px] max-w-4xl rounded-lg shadow-lg"></div>
<!-- Leaflet JS --> // Mengatur fungsi callback ketika lokasi ditemukan
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> map.on('locationfound', function(e) {
<script> if (userMarker) {
// Initialize the map with default center and zoom level userMarker.setLatLng(e.latlng);
const map = L.map('map').setView([-7.7523414, 112.1700522], 15); // Latitude and Longitude
// Add a tile layer from OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Array to hold markers data from the database
const markers = [
{
coords: [,],
popupText: '#',
},
];
// Add markers to the map
markers.forEach(marker => {
L.marker(marker.coords).addTo(map)
.bindPopup(marker.popupText);
});
// Function to handle the successful retrieval of the user's location
function onLocationFound(e) {
// Create a custom icon for the user's location
const userIcon = L.icon({
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-red.png', // Red marker icon
iconSize: [25, 41], // Size of the icon
iconAnchor: [12, 41], // Point of the icon which will correspond to marker's location
popupAnchor: [1, -34], // Point from which the popup should open relative to the iconAnchor
});
// Add a marker for the user's location with the custom red icon
const userMarker = L.marker(e.latlng, {
icon: userIcon
}).addTo(map);
userMarker.bindPopup("You are here").openPopup();
// Center the map on the user's location
map.setView(e.latlng, 15);
}
// Function to handle the error in retrieving the user's location
function onLocationError(e) {
alert("Unable to retrieve your location.");
}
// Request the user's location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onLocationFound, onLocationError);
} else { } else {
alert("Geolocation is not supported by this browser."); // Tambahkan marker untuk lokasi pengguna jika belum ada
userMarker = L.marker(e.latlng, {
interactive: false
}).addTo(map)
.bindPopup("Lokasi Anda")
.openPopup();
} }
</script> // Pindahkan peta ke lokasi pengguna dengan smooth pan
</div> map.panTo(e.latlng);
</div>
</x-adminlayout> // Tambahkan marker untuk lokasi tujuan
var latLng2 = L.latLng({{ $ruteTerdekat->latitude }}, {{ $ruteTerdekat->longitude }});
L.marker(latLng2, {
interactive: false
}).addTo(map)
.bindPopup("{{ $ruteTerdekat->nama_kursus }}")
.openPopup();
// Tambahkan kontrol routing
L.Routing.control({
waypoints: [e.latlng, latLng2],
routeWhileDragging: false, // Nonaktifkan drag
collapsible: true, // Kontrol tetap bisa diperlihatkan tapi tidak bisa diubah
createMarker: function() {
return null;
} // Tidak membuat marker tambahan
}).addTo(map);
});
L.Control.CustomControl = L.Control.extend({
onAdd: function(map) {
var div = L.DomUtil.create('div', 'custom-control');
div.innerHTML = '<p class="p-4" >Kontrol Kustom</p>';
return div;
},
onRemove: function(map) {
// nothing to do here
}
});
L.control.customControl = function(opts) {
return new L.Control.CustomControl(opts);
}
L.control.customControl({
position: 'topleft'
}).addTo(map);
// Tangani error jika geolocation tidak tersedia
map.on('locationerror', function(e) {
console.error("Geolocation error: " + e.message);
// Informasikan pengguna jika terjadi kesalahan
L.popup()
.setLatLng([-7.7523414, 112.1700522])
.setContent("Unable to retrieve your location.")
.openOn(map);
});
} else {
// Informasikan pengguna jika geolocation tidak didukung
L.popup()
.setLatLng([-7.7523414, 112.1700522])
.setContent("Geolocation is not supported by this browser.")
.openOn(map);
}
});
</script>
</div>

View File

@ -7,8 +7,8 @@
use App\Http\Controllers\PengunjungController; use App\Http\Controllers\PengunjungController;
Route::middleware('auth')->group(function () {
// ADMIN // ADMIN
Route::get('/admin/dashboard', [AdminDashboardController::class, 'index'])->name('admin.home'); // SHOW DASHBOARD Route::get('/admin/dashboard', [AdminDashboardController::class, 'index'])->name('admin.home'); // SHOW DASHBOARD
Route::get('/admin/data-kursus', [AdminDataKursusController::class, 'dataKursus'])->name('admin.dataKursus'); //SHOW DATA Route::get('/admin/data-kursus', [AdminDataKursusController::class, 'dataKursus'])->name('admin.dataKursus'); //SHOW DATA
Route::get('/admin/create-data', [AdminDataKursusController::class, 'create'])->name('admin.create'); // SHOW TAMBAH DATA Route::get('/admin/create-data', [AdminDataKursusController::class, 'create'])->name('admin.create'); // SHOW TAMBAH DATA
@ -19,6 +19,8 @@
Route::post('/admin/store', [AdminDataKursusController::class, 'store'])->name('kursus.store'); // TOMBOL TAMBAH DATA Route::post('/admin/store', [AdminDataKursusController::class, 'store'])->name('kursus.store'); // TOMBOL TAMBAH DATA
Route::delete('/admin/delete/{id}', [AdminDataKursusController::class, 'destroy'])->name('delete'); // TOMBOL DELETE DATA Route::delete('/admin/delete/{id}', [AdminDataKursusController::class, 'destroy'])->name('delete'); // TOMBOL DELETE DATA
});
// LOGIN // LOGIN
Route::get('/login', [LoginController::class, 'index'])->name('login'); // SHOW LOGIN Route::get('/login', [LoginController::class, 'index'])->name('login'); // SHOW LOGIN
@ -26,5 +28,5 @@
Route::get('/beranda', [PengunjungController::class, 'home'])->name('user.home'); // SHOW TAMPILAN AWAL Route::get('/beranda', [PengunjungController::class, 'home'])->name('user.home'); // SHOW TAMPILAN AWAL
Route::get('/kursus', [PengunjungController::class, 'kursus'])->name('user.kursus'); //SHOW TAMPILAN SELURUH KHURSUS Route::get('/kursus', [PengunjungController::class, 'kursus'])->name('user.kursus'); //SHOW TAMPILAN SELURUH KHURSUS
Route::get('/peta', [PengunjungController::class, 'maps'])->name('user.peta'); //SHOW PETA SELURUH TITIK KURSUS Route::get('/peta', [PengunjungController::class, 'maps'])->name('user.peta'); //SHOW PETA SELURUH TITIK KURSUS
Route::get('/kursus/rute', [PengunjungController::class, 'rute'])->name('user.rute'); //SHOW PETA SELURUH TITIK KURSUS Route::get('/kursus/{id}/rute', [PengunjungController::class, 'rute'])->name('user.rute'); //SHOW PETA SELURUH TITIK KURSUS
Route::get('/kursus/{id}/detail', [PengunjungController::class, 'detail'])->name('kursus.detail'); // DETAIL KHURSUS MASING" Route::get('/kursus/{id}/detail', [PengunjungController::class, 'detail'])->name('kursus.detail'); // DETAIL KHURSUS MASING"