Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Website Pemetaan Potensi Desa Berbasis GIS Dengan Golang, Vue, Leaflet dan Tailwind CSS

14 members
DISKON 50%
Rp. 700.000
Rp. 350.000

TENTANG


GoLang adalah bahasa pemrograman modern yang dikenal karena performa tinggi, efisiensi memori, serta dukungan concurrency yang luar biasa. Dengan GoLang, kita dapat membangun layanan backend yang ringan, cepat, dan dapat di-deploy dengan mudah di server production.

Sementara itu, Vue + TypeScript menjadi salah satu teknologi frontend paling populer di dunia saat ini. Dengan dukungan Composition API, sistem type safety, dan ekosistem yang sangat matang, Vue membantu kita membangun aplikasi web yang interaktif, cepat, dan mudah di-maintain.

Untuk tampilan (UI), kita menggunakan Tailwind CSS, sebuah utility-first CSS framework yang sangat fleksibel dan memungkinkan kita membangun desain modern dengan cepat.

Dan yang paling menarik, pada eBook ini kita akan memperkenalkan teknologi Leaflet.js, library open-source yang kuat dan ringan untuk membangun aplikasi Geographic Information System (GIS). Dengan Leaflet, kita dapat menampilkan peta interaktif, menambahkan marker, garis, area batas desa, hingga menampilkan data spasial secara dinamis.

Dalam eBook ini, kita akan belajar bersama-sama bagaimana membangun sebuah Website Pemetaan Potensi Desa dengan memanfaatkan teknologi yang populer dan banyak digunakan di industri, yaitu:

  • GoLang – Sebagai Backend.
  • Vue + TypeScript – Sebagai Frontend.
  • Leaflet.js – Untuk integrasi peta interaktif (GIS).
  • Tailwind CSS – Sebagai UI Framework.

Pada bagian backend (GoLang), kita akan membangun layanan RESTful API yang menjadi fondasi dari aplikasi. Kita akan mempelajari banyak hal penting seperti:

  • Mendesain arsitektur backend yang rapi dan mudah dikembangkan.
  • Menggunakan GORM untuk berinteraksi dengan database MySQL.
  • Membuat sistem autentikasi menggunakan JWT (JSON Web Token).
  • Mengimplementasikan Role & Permission yang dinamis untuk keamanan akses.
  • Menambahkan middleware untuk validasi dan otorisasi.
  • Menangani upload file, pagination, pencarian, dan optimasi query.
  • Membuat endpoint khusus untuk data spasial seperti koordinat, batas wilayah (GeoJSON), dan lokasi potensi desa.

Di sisi frontend, kita akan menggunakan Vue + TypeScript untuk membangun halaman Website Pemetaan Potensi Desa yang interaktif dan ramah pengguna. Beberapa hal yang akan kita pelajari di bagian ini antara lain:

  • Menggunakan Vue Router untuk navigasi antar halaman.
  • Mengelola data fetching dan caching dengan TanStack Vue Query.
  • Mengelola state global menggunakan Pinia.
  • Membuat halaman login dan autentikasi berbasis JWT.
  • Menampilkan data dari API dengan pagination, pencarian, dan filtering.
  • Membuat dashboard admin dengan fitur manajemen Role & Permission.
  • Menerapkan desain modern dan responsif menggunakan Tailwind CSS.
  • Mengintegrasikan Leaflet.js untuk menampilkan peta interaktif desa.

Selanjutnya, kita akan fokus pada penerapan konsep Geographic Information System (GIS) menggunakan Leaflet di sisi frontend. Kita akan belajar bagaimana:

  • Menggunakan Leaflet Map untuk menampilkan peta dasar.
  • Menambahkan Layer untuk data batas administratif desa.
  • Menampilkan marker dinamis berdasarkan data potensi dari database.
  • Menggunakan Leaflet Draw untuk membuat editor geometri interaktif.
  • Mengonversi dan menyimpan data GeoJSON ke backend.
  • Menyesuaikan tampilan dan interaksi peta agar responsif di berbagai perangkat.

Tidak hanya berhenti di tahap pengembangan, di bagian akhir eBook ini kita juga akan mempelajari bagaimana cara melakukan deployment aplikasi ke server VPS (Virtual Private Server) agar dapat diakses publik. Langkah-langkah yang akan kita bahas mencakup:

  • Setup VPS di Ubuntu Server.
  • Meng-upload source code ke GitHub dan menggunakannya di server.
  • Proses build aplikasi GoLang menjadi binary siap jalan.
  • Proses build aplikasi Vue menggunakan Vite.
  • Konfigurasi NGINX sebagai reverse proxy.
  • Manajemen proses backend menggunakan systemd.
  • Konfigurasi SSL (HTTPS) menggunakan Certbot / Let’s Encrypt.
  • Menghubungkan domain agar website GIS desa dapat diakses publik dengan aman.

Dengan mempelajari isi eBook ini, diharapkan teman-teman dapat menjadi seorang FullStack Developer yang menguasai GoLang untuk membangun backend REST API yang efisien, mampu menggunakan Vue + TypeScript untuk membangun frontend modern, memahami penerapan GIS (Geographic Information System) menggunakan Leaflet, dapat melakukan deployment aplikasi dari nol hingga siap production.

DAFTAR ISI


Pendahuluan
Cover
Kata Pengantar
Lisensi
Tentang
Prasyarat
Prasyarat Backend (GoLang)
Prasyarat Frontend (Vue)
Prasayarat FullStack GoLang dan Vue
Installasi & Persiapan Backend (GoLang)
Installasi GoLang
Membuat Project GoLang
Konfigurasi Live Reload GoLang (Air)
Konfigurasi File .env
Database
Apa itu Gorm ?
Installasi & Konfigurasi Gorm
Membuat Table dan Relasi Dengan Models
Konfigurasi Auto Migration
Membuat Seeder Permissions
Membuat Seeder Roles
Membuat Seeder Users
Membuat Seeder Setting
Menjalankan Proses Seeding
JWT (JSON Web Token)
Apa itu JWT (JSON Web Token) ?
Installasi dan Membuat Middleware Auth
Membuat Middleware Permission
Structs
Apa itu Struct ?
Membuat Struct Success dan Error Response
Membuat Struct Permission
Membuat Struct Role
Membuat Struct User
Membuat Struct Category
Membuat Struct Map
Membuat Struct Setting
Membuat Struct Dashboard
Helpers
Membuat Helper Hash
Membuat Helper JWT (Generate Token)
Membuat Helper Validator
Membuat Helper Permission
Membuat Helper Slug
Membuat Helper Upload
Membuat Helper Pagination
RESTful API Auth
Membuat RESTful API untuk Login
RESTful API Dashboard
Membuat RESTful API Dashboard
RESTful API Permissions
Membuat RESTful API Get Data Permissions
Membuat RESTful API Insert Data Permission
Membuat RESTful API Get Data Permission By ID
Membuat RESTful API Update Data Permission
Membuat RESTful API Delete Data Permission
Membuat RESTful API List Semua Data Permissions
RESTful API Roles
Membuat RESTful API Get Data Roles
Membuat RESTful API Insert Data Role
Membuat RESTful API Get Data Role By ID
Membuat RESTful API Update Data Role
Membuat RESTful API Delete Data Role
Membuat RESTful API List Semua Data Role
RESTful API Users
Membuat RESTful API Get Data Users
Membuat RESTful API Insert Data User
Membuat RESTful API Get Data User By ID
Membuat RESTful API Update Data User
Membuat RESTful API Delete Data User
RESTful API Categories
Membuat RESTful API Get Data Categories
Membuat RESTful API Insert Data Category
Membuat RESTful API Get Data Category By ID
Membuat RESTful API Update Data Category
Membuat RESTful API Delete Data Category
Membuat RESTful API List Semua Data Categories
RESTful API Maps
Membuat RESTful API Get Data Maps
Membuat RESTful API Insert Data Map
Membuat RESTful API Get Data Map By ID
Membuat RESTful API Update Data Map
Membuat RESTful API Delete Data Map
RESTful API Settings
Membuat RESTful API Get Data Setting
Membuat RESTful API Update Data Setting
RESTful API Public
Membuat RESTful API Public Category
Membuat RESTful API Public Setting
Konfigurasi CORS
Apa itu CORS ?
Installasi dan Konfigurasi COR
Menambahkan Route Static File
Installasi & Persiapan Frontend (Vue)
Membuat Project Vue (TypeScript)
Install Library Pendukung
Konfigurasi Endpoint API Backend
Installasi & Konfigurasi Tailwind CSS
TanStack Query
Apa itu TanStack Query ?
Install dan Konfigurasi TanStack Query
Types
Membuat Type Params
Membuat Type Permission
Membuat Type Role
Membuat Type User
Membuat Type Map
Membuat Type Category
Membuat Type Setting
Membuat Type Auth
Membuat Type Dashboard
State Management (Pinia)
Membuat Store Auth
Membuat Store Sidebar
Layout Aplikasi
Membuat Component Header
Membuat Layout Aplikasi
Authentication
Membuat Helper Permission
Membuat View dan Route Auth
Membuat Proses Login
Halaman Dashboard
Membuat View dan Route Dashboard
Membuat Composable Dashboard (Query)
Menampilkan Statistik Data
Halaman Forbidden
Membuat View dan Route Forbidden
Membuat Reusable Component
Membuat Component Loading
Membuat Component Error
Membuat Component Table Empty Row
Membuat Component Pagination
Permissions Composables
Membuat Composable Permissions (Query)
Membuat Composable Permission Create (Mutation)
Membuat Composable Permission By Id (Query)
Membuat Composable Permission Update (Mutation)
Membuat Composable Permission Delete (Mutation)
Membuat Composable Permission All (Query)
CRUD Data Permissions
Menampilkan List Data Permissions
Membuat Proses Create Data Permission
Membuat Proses Edit dan Update Data Permission
Membuat Proses Delete Data Permission
Role Composables
Membuat Composable Roles (Query)
Membuat Composable Role Create (Mutation)
Membuat Composable Role By Id (Query)
Membuat Composable Role Update (Mutation)
Membuat Composable Role Delete (Mutation)
Membuat Composable Role All (Query)
CRUD Data Roles
Menampilkan List Data Roles
Membuat Proses Create Data Role
Membuat Proses Edit dan Update Data Role
Membuat Proses Delete Data Role
User Composables
Membuat Composable Users (Query)
Membuat Composable User Create (Mutation)
Membuat Composable User By Id (Query)
Membuat Composable User Update (Mutation)
Membuat Composable User Delete (Mutation)
CRUD Data Users
Menampilkan List Data Users
Membuat Proses Create Data User
Membuat Proses Edit dan Update Data User
Membuat Proses Delete Data User
Setting Composables
Membuat Composable Setting
Membuat Composable Setting Update (Mutation)
Map Editor Configuration
Membuat Helper Map GeoJSON Parser
Membuat Composable Map Configuration
Membuat Component RecenterOnProps
Membuat Component GeometryEditor
Membuat Component MapWithGeometryEditor
Settings
Menampilkan dan Update Setting
Category Composables
Membuat Composable Categories (Query)
Membuat Composable Category Create (Mutation)
Membuat Composable Category By Id (Query)
Membuat Composable Category Update (Mutation)
Membuat Composable Category Delete (Mutation)
Membuat Composable Category All (Query)
CRUD Data Categories
Menampilkan List Data Categories
Membuat Proses Create Data Category
Membuat Proses Edit dan Update Data Category
Membuat Proses Delete Data Category
Map Composables
Membuat Composable Maps (Query)
Membuat Composable Map Create (Mutation)
Membuat Composable Map By Id (Query)
Membuat Composable Map Update (Mutation)
Membuat Composable Map Delete (Mutation)
CRUD Data Maps
Menampilkan List Data Maps
Membuat Proses Create Data Map
Membuat Proses Edit dan Update Data Map
Membuat Proses Delete Data Map
Sidebar Composables
Membuat Composable Media Query
Membuat Composable Sidebar Breakpoint Sync
Public Composables
Membuat Composable Setting Public
Membuat Composable Categories Public
Membuat Composable Home Data
Component Public
Membuat Component Category Item
Membuat Component Sidebar
Membuat Component Map Viewer
Halaman Home (Maps)
Membuat View dan Route Home
Menampilkan Sidebar dan Category
Menampilkan Maps
Deployment Backend (GoLang)
Membeli VPS (Virtual Private Server)
Membeli Domain
Menghubungkan Domain ke Server VPS
Setup VPS
Upload Project Backend (GoLang) di GitHub
Deploy Project Backend (GoLang) di VPS
Memasang SSL di VPS
Deployment Frontend (Vue)
Build Project Frontend (Vue)
Deploy Project Frontend (Vue) di VPS
Memasang SSL untuk Frontend (Vue)
Penutup
Source Code
Penutup

TOOLS

Tools yang digunakan dalam course ini

Golang
Golang

An open-source programming language

See More
Vue Js
Vue Js

The Progressive JavaScript Framework

See More
TypeScript
TypeScript

strongly typed programming language

See More
Leaflet Js
Leaflet Js

JavaScript library for interactive maps

See More
Vue Query
Vue Query

Hooks for fetching and caching.

See More
Pinia
Pinia

State Management in Vue

See More
Tailwind CSS
Tailwind CSS

A utility-first CSS framework

See More

SCREENSHOTS

Screenshot hasil projek dari course ini

Home (Maps)
Home (Maps)
Login
Login
Dashboard
Dashboard
Roles Permissions
Roles Permissions
Create Maps
Create Maps
Settings
Settings

BENEFITS

Manfaat yang akan Anda dapatkan dari course ini


Ebook

Source Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Tim expert yang menyusun course ini

Fika Ridaul Maulayya
Fika Ridaul Maulayya
PREMIUM MEMBER

Full-Stack Developer, Content Creator and CEO & Founder SantriKoding.com


Butuh Bantuan?