T</>TahuCoding

Part 1 - Tutorial GIS Interaktif Menggunakan Laravel Inertia & React - Setup Project

Loading...

GIS (Geographic Information System) adalah sistem informasi geografis dan menjadi salah satu project populer yang sering digunakan sebagai tugas kuliah bahkan project besar. Pada kesempatan kali ini kita akan belajar banyak hal dari backend hingga frontend, dimulai dari instalasi laravel hingga membuat interaksi pada map menggunakan mapbox & react.js. Selain itu kamu akan belajar bagaiman caranya menggunakan Inertia.js agar aplikasi laravel kita menjadi Single Page Application. Yukk mari kita mulai!

Step 1: Buat Project Laravel 10

Pertama-tama, buka cmd/terminal.

Kemudian jalankan perintah berikut untuk mendownload dan menginstall project Laravel 10:

composer create-project laravel/laravel laravel-inertia-map

Step 2: Setup Database

Setelah menginstall project Laravel, mari konfigurasi database terlebih dahulu.

Buka file .env. Lalu tambahkan detail database sebagai berikut:

.env
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=nama databasemu
 DB_USERNAME=username databasemu
 DB_PASSWORD=password databasemu

Step 3: Setup Inertia & React.js menggunakan Laravel Breeze

Laravel Breeze merupakan sebuah kit yang membantumu dalam scaffold project laravel-mu, seperti fitur autentikasi, edit profile, reset password hingga setup inertia. Pada kesempatan kali ini kita akan menggunakan laravel breeze untuk setup Inertia dan React.js.

Install laravel breeze menggunakan command berikut:

composer require laravel/breeze --dev

Setelah selesai install, jalankan command berikut untuk memulai setup dari laravel breeze.

php artisan breeze:install

Setelah command dijalankan, pastikan memilih opsi berikut:

Breeze Options

Setelah proses setup laravel breeze selesai, lakukan migrasi pada database.

php artisan migrate

Kemudian jalankan laravel dev server dan client dev server

php artisan serve
npm run dev

Jika berhasil buka projectmu pada http://localhost:8000/, maka akan muncul tampilan berikut:

Laravel welcome page

Step 4: Lakukan Registrasi dan modikasi Dashboard

Buat akun pertamamu pada halaman register dan lengkapi data yang diminta.

Laravel Register page

Setelah proses registrasi selesai, maka kamu akan di redirect ke halaman dashboard.

Laravel Dashboard page

Pastikan sebelum melanjutkan ketahap ini, kamu sudah belajar tentang React.js

Pindah ke file Dashboard.jsx kemudian lakukan modifikasi pada line berikut

resources\js\Pages\Dashboard.jsx
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
 
export default function Dashboard({ auth }) {
  return (
    <AuthenticatedLayout
      user={auth.user}
      header={
        <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
          Dashboard GIS
        </h2>
      }
    >
      <Head title="Dashboard GIS" />
 
      <div className="py-12">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
            <div className="p-6 text-gray-900 dark:text-gray-100 ">
              Selamat Datang
            </div>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  );
}

Step 5: Setup Mapbox

Pastikan kamu sudah memiliki akun pada Platform Mapbox

Setelah berhasil registrasi, buatlah access token yang nanti akan kita gunakan agar dapat mengakses map.

Mapbox Dashboard page

Install dependencies yang kita butuhkan agar dapat menggunakan mapbox

npm install --save react-map-gl mapbox-gl

Setelah selesai tambahkan Mapbox pada dashboard

resources\js\Pages\Dashboard.jsx
import Map from "react-map-gl";
 
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
 
export default function Dashboard({ auth }) {
  return (
    <AuthenticatedLayout
      user={auth.user}
      header={
        <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
          Dashboard GIS
        </h2>
      }
    >
      <Head title="Dashboard GIS" />
 
      <div className="py-12">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
            <div className="p-6 text-gray-900 dark:text-gray-100 ">
              Selamat Datang
            </div>
          </div>
          <div className="h-max">
            <Map
              mapboxAccessToken="MAPBOX ACCESS TOKEN"
              initialViewState={{
                longitude: 106.8291201,
                latitude: -6.1836782,
                zoom: 12,
              }}
              style={{ width: "100%", height: 600 }}
              mapStyle="mapbox://styles/mapbox/streets-v9"
            />
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  );
}

Load mapbox css pada app.blade.php:

resources\views\app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
 
        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Agar tampilan height dari map tidak hancur tambahkan css pada app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
div[mapboxgl-children] {
  height: fit-content !important;
}

Berikut tampilan map yang sudah berhasil kita integrasikan:

Dashboard Mapbox page

Alternatif Bagi yang tidak punya Mapbox Access Token

Bagi kamu yang tidak memilik kartu kredit atau debit dengan visa ketika registrasi pada mapbox kamu dapat menggunakan alternatif lain yaitu maplibre.

NOTE: Bagi yang menggunakan MapLibre pastikan di tutorial part 2 dan 3 import map sesuai dengan settingan saat ini!

Install maplibre dependencies:

npm install --save react-map-gl maplibre-gl

Pada app.blade.php ganti css map menggunakan code berikut:

resources\views\app.blade.php
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css' />

Modifikasi import map, hapus mapboxAccessToken dan load style token gratis, pastikan copy paste mapStyle tanpa ada perubahan:

resources\js\Pages\Dashboard.jsx
import Map from "react-map-gl/maplibre";
 
// ...rest of your code
 
<Map
  initialViewState={{
    longitude: 106.8291201,
    latitude: -6.1836782,
    zoom: 12,
  }}
  style={{ width: "100%", height: 600 }}
  mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL"
/>;

Jika sudah maka map-mu akan berfungsi sebagaiman mestinya.

Kita sudahi dulu ya teman-teman, nanti di tutorial berikutnya kita akan belajar untuk menambahkan interaksi CRUD untuk marker pada map, stay tune dan happy coding!

Selanjutnya

Part 2 - Tutorial GIS Interaktif Menggunakan Laravel Inertia & React