Perbaikan

database/factories/DataKursusFactory.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\DataKursus>
+ */
+class DataKursusFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'nama_kursus' => fake()->sentence(3), // contoh nama kursus
+            'deskripsi' => fake()->paragraph,
+            'paket' => fake()->randomElement(['Paket A', 'Paket B', 'Paket C']), // contoh opsi paket
+            'metode' => fake()->randomElement(['Online', 'Offline', 'Hybrid']), // metode pembelajaran
+            'fasilitas' => fake()->sentence(6), // contoh fasilitas
+            'lokasi' => fake()->city,
+            'latitude' => fake()->latitude,
+            'longitude' => fake()->longitude,
+        ];
+    }
+}

database/seeders/DatabaseSeeder.php

@@ -2,6 +2,7 @@
 
 namespace Database\Seeders;
 
+use App\Models\DataKursus;
 use App\Models\User;
 // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
@@ -20,5 +21,7 @@ public function run(): void
             'email' => 'admin@gmail.com',
             'password' => 'admin123',
         ]);
+
+        DataKursus::factory(10)->create();
     }
 }

package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "flowbite": "^2.5.2"
+            },
             "devDependencies": {
                 "autoprefixer": "^10.4.20",
                 "axios": "^1.6.4",
@@ -537,6 +540,74 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
+        "node_modules/@rollup/plugin-node-resolve": {
+            "version": "15.3.0",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
+            "integrity": "sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==",
+            "license": "MIT",
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.1",
+                "@types/resolve": "1.20.2",
+                "deepmerge": "^4.2.2",
+                "is-module": "^1.0.0",
+                "resolve": "^1.22.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^2.78.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/pluginutils": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+            "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "estree-walker": "^2.0.2",
+                "picomatch": "^4.0.2"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+            "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.21.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -765,7 +836,12 @@
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/resolve": {
+            "version": "1.20.2",
+            "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+            "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
             "license": "MIT"
         },
         "node_modules/ansi-regex": {
@@ -1095,6 +1171,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/deepmerge": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1189,6 +1274,12 @@
                 "node": ">=6"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "license": "MIT"
+        },
         "node_modules/fast-glob": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -1242,6 +1333,27 @@
                 "node": ">=8"
             }
         },
+        "node_modules/flowbite": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.5.2.tgz",
+            "integrity": "sha512-kwFD3n8/YW4EG8GlY3Od9IoKND97kitO+/ejISHSqpn3vw2i5K/+ZI8Jm2V+KC4fGdnfi0XZ+TzYqQb4Q1LshA==",
+            "license": "MIT",
+            "dependencies": {
+                "@popperjs/core": "^2.9.3",
+                "flowbite-datepicker": "^1.3.0",
+                "mini-svg-data-uri": "^1.4.3"
+            }
+        },
+        "node_modules/flowbite-datepicker": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz",
+            "integrity": "sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@rollup/plugin-node-resolve": "^15.2.3",
+                "flowbite": "^2.0.0"
+            }
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -1328,7 +1440,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -1372,7 +1483,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
@@ -1398,7 +1508,6 @@
             "version": "2.15.0",
             "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
             "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.2"
@@ -1443,6 +1552,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-module": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+            "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+            "license": "MIT"
+        },
         "node_modules/is-number": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -1577,6 +1692,15 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "license": "MIT",
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -1702,7 +1826,6 @@
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/path-scurry": {
@@ -1980,7 +2103,6 @@
             "version": "1.22.8",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
             "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-core-module": "^2.13.0",
@@ -2009,7 +2131,7 @@
             "version": "4.21.0",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
             "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "@types/estree": "1.0.5"
@@ -2242,7 +2364,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
             "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"

package.json

@@ -12,5 +12,8 @@
         "postcss": "^8.4.41",
         "tailwindcss": "^3.4.10",
         "vite": "^5.0"
+    },
+    "dependencies": {
+        "flowbite": "^2.5.2"
     }
 }

resources/js/app.js

@@ -1 +1,2 @@
 import './bootstrap';
+import 'flowbite';

resources/views/admin/ubahDataKursusAdmin.blade.php

@@ -94,7 +94,8 @@ class="relative overflow-x-auto py-10 w-full max-w-2xl max-h-full bg-white round
                                             @if (!empty($dataKursus->img_konten))
                                                 @foreach (json_decode($dataKursus->img_konten, true) as $image)
                                                     <img src="{{ asset('storage/' . $image) }}"
-                                                        class="object-cover h-64 w-auto px-5 flex-shrink-0 " alt="Gambar">
+                                                        class="object-cover h-64 w-auto px-5 flex-shrink-0 "
+                                                        alt="Gambar">
                                                 @endforeach
                                             @else
                                                 <p>Tidak ada gambar yang tersedia.</p>

resources/views/components/layout.blade.php

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+
     @include('components.navbar')
-  @include('partials.head')
     @include('partials.font')
 
 </head>
+
 <body>
+    <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
     {{ $slot }}
 </body>
 
 @include('components.footer')
+
 </html>
-
-

resources/views/partials/head.blade.php

@@ -1,14 +1,19 @@
+<!-- Flowbite CSS dan JS -->
 <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+
+<!-- CSS Aplikasi -->
 @vite('resources/css/app.css')
+
+<!-- Viewport untuk Responsif -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+
-@stack('script')
+<!-- Leaflet CSS dan JS -->
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
-    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>
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+
-    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<!-- Leaflet Routing Machine CSS dan JS -->
-<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>
+
+@stack('script')

resources/views/user/detailKursus.blade.php

@@ -10,37 +10,53 @@
             <!-- 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">
-                @foreach ($imageNames as $index => $imageName)
+                @if (!empty($imageNames) && count($imageNames) > 0)
+                    @foreach ($imageNames as $index => $img_konten)
                         <div class="hidden duration-1000 ease-in-out" data-carousel-item>
-                        <img src="{{ asset('storage/' . $imageName) }}"
+                            <img src="{{ asset('storage/' . $img_konten) }}"
                                 class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                                 alt="...">
                         </div>
                     @endforeach
-
+                @else
+                    <div class="hidden duration-1000 ease-in-out" data-carousel-item>
+                        <img src="https://via.placeholder.com/600x400"
+                            class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+                            alt="No image available">
                     </div>
+                @endif
+            </div>
+
             <!-- Slider indicators -->
             <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
+                @if (!empty($imageNames) && count($imageNames) > 0)
                     @for ($i = 0; $i < count($imageNames); $i++)
-                    <button type="button" class="w-3 h-3 rounded-full" aria-current="{{ $i === 0 ? 'true' : 'false' }}"
+                        <button type="button" class="w-3 h-3 rounded-full"
-                        aria-label="Slide {{ $i + 1 }}" data-carousel-slide-to="{{ $i }}"></button>
+                            aria-current="{{ $i === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $i + 1 }}"
+                            data-carousel-slide-to="{{ $i }}"></button>
                     @endfor
+                @else
+                    <button type="button" class="w-3 h-3 rounded-full" aria-current="true"
+                        aria-label="No slides available"></button>
+                @endif
             </div>
+
+
             <!-- Slider controls -->
             <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"
                 data-carousel-prev>
                 <span
                     class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
-                    <svg class="w-4 h-4 text-white  rtl:rotate-180" aria-hidden="true"
+                    <svg class="w-4 h-4 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                        fill="none" viewBox="0 0 6 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M5 1 1 5l4 4" />
                     </svg>
                     <span class="sr-only">Previous</span>
                 </span>
-
             </button>
+
             <button type="button"
                 class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                 data-carousel-next>

resources/views/user/peta.blade.php

@@ -1,81 +1,125 @@
 <x-layout>
     <style>
-        /* Set the height of the map */
+        #map1 { 
-        #map {
-            /* Height will be controlled by Tailwind CSS classes */
             max-width: 100%;
         }
     </style>
-    <div class="container">
+    <div class="container flex flex-col">
         <div class="py-10 bg-white">
             <div class="bg-[#EBFEA1] poppins-extrabold m-auto flex items-center justify-center p-2">
                 <p>Halaman ini berisi tentang kursus di Pare!</p>
             </div>
         </div>
         <div class="pb-10">
-            <!-- Apply Tailwind CSS classes for responsive width and height -->
+            <!-- Peta Leaflet -->
-            <div id="map"
+            <div id="map1"
                 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>
+        </div>
+    </div>
 
-            <!-- Leaflet JS -->
+    <!-- Leaflet CSS dan JS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
-            <script>
-                // Initialize the map with default center and zoom level
-                const map = L.map('map').setView([-7.7523414, 112.1700522], 15); // Latitude and Longitude
 
-                // Add a tile layer from OpenStreetMap
+    <!-- Flowbite JS -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Inisialisasi peta dengan koordinat dan tingkat zoom
+            const map = L.map('map1').setView([-8.1675862,113.68492], 13); // Gunakan 'map1' untuk ID peta yang sesuai
+
+            // Tambahkan lapisan ubin 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);
 
-                // Array to hold markers data from the database
+            // Menambahkan marker secara dinamis dengan data dari Blade
+            @foreach ($latilongti as $latilongti)
+                L.marker([{{ $latilongti->latitude }}, {{ $latilongti->longitude }}])
+                    .addTo(map)
+                    .bindPopup('<a href="/kursus/{{ $latilongti->id }}/detail"><b>{{ $latilongti->nama_kursus }}</b><br>Location: {{ $latilongti->latitude }}, {{ $latilongti->longitude }}')
+                    .openPopup();
+            @endforeach
+        });
+    </script>
+</x-layout>
+
+
+
+
+{{-- <x-layout>
+    <style>
+        #map {
+            height: 400px;
+            /* Tinggi default */
+            max-width: 100%;
+        }
+    </style>
+    <div class="container flex">
+        <div class="py-10 bg-white">
+            <div class="bg-[#EBFEA1] poppins-extrabold m-auto flex items-center justify-center p-2">
+                <p>Halaman ini berisi tentang kursus di Pare!</p>
+            </div>
+        </div>
+        <div class="pb-10">
+            <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>
+        </div>
+    </div>
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script>
+        const map = L.map('map').setView([-7.7523414, 112.1700522], 15);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
         const markers = [
             @foreach ($latilongti as $latilongti)
                 {
-                            coords: [{{ $latilongti->latitude }}, {{ $latilongti->longitude }}],
+                    // coords: [{{ $latilongti->latitude }}, {{ $latilongti->longitude }}],
-                            popupText: '{{ $latilongti->nama_kursus }}',
+                    // popupText: '{{ $latilongti->nama_kursus }}',
-                            href: '{{ route('admin.dataKursus') }}' // Menambahkan href
+                    // href: '{{ route('admin.dataKursus') }}'
+
+
+                    coords: [-8.1537943,113.7333205],
+                    popupText: 'anjai',
+                    href: '#'
                 },
             @endforeach
         ];
-                // Add markers to the map
+
         markers.forEach(marker => {
-                    L.marker(marker.coords).addTo(map)
+            L.marker(marker.coords).addTo(map).bindPopup(marker.popupText);
-                        .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
+                iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-red.png',
-                        iconSize: [25, 41], // Size of the icon
+                iconSize: [25, 41],
-                        iconAnchor: [12, 41], // Point of the icon which will correspond to marker's location
+                iconAnchor: [12, 41],
-                        popupAnchor: [1, -34], // Point from which the popup should open relative to the iconAnchor
+                popupAnchor: [1, -34]
             });
 
-                    // 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 {
             alert("Geolocation is not supported by this browser.");
         }
     </script>
-        </div>
+</x-layout> --}}
-    </div>
-</x-layout>

resources/views/user/rute.blade.php

@@ -52,10 +52,10 @@
                 } else {
                     // Tambahkan marker untuk lokasi pengguna jika belum ada
                     userMarker = L.marker(e.latlng, {
-                            interactive: false
+                            interactive: true
                         }).addTo(map)
                         .bindPopup("Lokasi Anda")
-                        .openPopup();
+                        .openPopup(); // Buka popup "Lokasi Anda" saat marker ditambahkan
                 }
                 // Pindahkan peta ke lokasi pengguna dengan smooth pan
                 map.panTo(e.latlng);
@@ -82,7 +82,7 @@
             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>';
+                    div.innerHTML = '<p class="p-4" ></p>';
                     return div;
                 },
                 onRemove: function(map) {
@@ -92,6 +92,8 @@
             L.control.customControl = function(opts) {
                 return new L.Control.CustomControl(opts);
             }
+
+            
             L.control.customControl({
                 position: 'topleft'
             }).addTo(map);

tailwind.config.js

@@ -4,6 +4,7 @@ export default {
         "./resources/**/*.blade.php",
         "./resources/**/*.js",
         "./resources/**/*.vue",
+        "./node_modules/flowbite/**/*.js"
     ],
     theme: {
         container: {
@@ -28,5 +29,5 @@ export default {
         },
         extend: {},
     },
-    plugins: [],
+    plugins: [require("flowbite/plugin")],
 };