Perbaikan
This commit is contained in:
HANIF FEBRIANSYAH
parent
052170dd3e
commit
66818a062b
|
|
@ -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,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -12,5 +12,8 @@
|
|||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"vite": "^5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"flowbite": "^2.5.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB |
|
|
@ -1 +1,2 @@
|
|||
import './bootstrap';
|
||||
import 'flowbite';
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
@include('components.navbar')
|
||||
@include('partials.head')
|
||||
@include('partials.font')
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
|
||||
@include('components.navbar')
|
||||
@include('partials.font')
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{ $slot }}
|
||||
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
|
||||
{{ $slot }}
|
||||
</body>
|
||||
|
||||
@include('components.footer')
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
<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" />
|
||||
|
||||
<!-- Leaflet CSS dan JS -->
|
||||
<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>
|
||||
|
||||
<!-- Leaflet Routing Machine CSS dan JS -->
|
||||
<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')
|
||||
|
|
|
|||
|
|
@ -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/' . $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="{{ asset('storage/' . $imageName) }}"
|
||||
<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="...">
|
||||
alt="No image available">
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@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">
|
||||
@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>
|
||||
@endfor
|
||||
@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' }}" 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"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
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" xmlns="http://www.w3.org/2000/svg"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,125 @@
|
|||
<x-layout>
|
||||
<style>
|
||||
/* Set the height of the map */
|
||||
#map {
|
||||
/* Height will be controlled by Tailwind CSS classes */
|
||||
#map1 {
|
||||
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 -->
|
||||
<div id="map"
|
||||
<!-- Peta Leaflet -->
|
||||
<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>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<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
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Array to hold markers data from the database
|
||||
const markers = [
|
||||
@foreach ($latilongti as $latilongti)
|
||||
{
|
||||
coords: [{{ $latilongti->latitude }}, {{ $latilongti->longitude }}],
|
||||
popupText: '{{ $latilongti->nama_kursus }}',
|
||||
href: '{{ route('admin.dataKursus') }}' // Menambahkan href
|
||||
},
|
||||
@endforeach
|
||||
];
|
||||
// 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 {
|
||||
alert("Geolocation is not supported by this browser.");
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// 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: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
const markers = [
|
||||
@foreach ($latilongti as $latilongti)
|
||||
{
|
||||
// coords: [{{ $latilongti->latitude }}, {{ $latilongti->longitude }}],
|
||||
// popupText: '{{ $latilongti->nama_kursus }}',
|
||||
// href: '{{ route('admin.dataKursus') }}'
|
||||
|
||||
|
||||
coords: [-8.1537943,113.7333205],
|
||||
popupText: 'anjai',
|
||||
href: '#'
|
||||
},
|
||||
@endforeach
|
||||
];
|
||||
|
||||
markers.forEach(marker => {
|
||||
L.marker(marker.coords).addTo(map).bindPopup(marker.popupText);
|
||||
});
|
||||
|
||||
function onLocationFound(e) {
|
||||
const userIcon = L.icon({
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-red.png',
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34]
|
||||
});
|
||||
|
||||
const userMarker = L.marker(e.latlng, {
|
||||
icon: userIcon
|
||||
}).addTo(map);
|
||||
userMarker.bindPopup("You are here").openPopup();
|
||||
|
||||
map.setView(e.latlng, 15);
|
||||
}
|
||||
|
||||
function onLocationError(e) {
|
||||
alert("Unable to retrieve your location.");
|
||||
}
|
||||
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(onLocationFound, onLocationError);
|
||||
} else {
|
||||
alert("Geolocation is not supported by this browser.");
|
||||
}
|
||||
</script>
|
||||
</x-layout> --}}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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")],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue