Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Website Desa Dengan Golang, Vue TypeScript dan Tailwind CSS

21 members
DISKON 50%
Rp. 750.000
Rp. 375.000

TENTANG


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

Sementara itu, Vue TypeScript hadir sebagai salah satu teknologi frontend paling populer di dunia saat ini. Dengan dukungan component-based architecture, type safety, dan ekosistem yang mature, 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.

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

  • GoLang – Sebagai Backend.
  • Vue + TypeScript – Sebagai Frontend.
  • Tailwind CSS – Sebagai UI Framework.

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

  • Membuat arsitektur backend yang rapi.
  • Menggunakan GORM untuk menghubungkan aplikasi dengan database MySQL.
  • Membuat autentikasi menggunakan JWT (JSON Web Token).
  • Mengimplementasikan sistem Role & Permission yang dinamis.
  • Membuat middleware untuk keamanan dan validasi.
  • Menangani upload file, pagination, pencarian, hingga optimasi query.

Di sisi frontend, kita akan menggunakan Vue dengan TypeScript, di mana kita akan membangun halaman website desa yang interaktif dan ramah pengguna. Di dalamnya, kita akan belajar berbagai konsep penting, seperti:

  • Menggunakan Vue Router untuk navigasi.
  • Mengelola data fetching dan caching dengan Vue Query.
  • Mengelola state global dengan Pinia.
  • Membuat halaman login dengan autentikasi JWT.
  • Membuat form dinamis dengan validasi.
  • Menampilkan data dari API dengan pagination, pencarian, dan filtering.
  • Membuat dashboard admin dengan fitur manajemen Role & Permission.
  • Menerapkan desain modern dengan Tailwind CSS.

Tidak hanya berhenti di tahap pengembangan, kita juga akan mempelajari bagaimana cara melakukan deployment aplikasi ke VPS. Pada sesi ini, kita akan membahas langkah demi langkah:

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

Dengan mempelajari isi eBook ini, diharapkan teman-teman dapat menjadi seorang FullStack Developer yang menguasai GoLang dan Vue, serta mampu membangun aplikasi modern dari nol hingga siap production.


DEMO: http://desa-santri.my.id/

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
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 Post
Membuat Struct Page
Membuat Struct Product
Membuat Struct Photo
Membuat Struct Slider
Membuat Struct Aparatur
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 Posts
Membuat RESTful API Get Data Posts
Membuat RESTful API Insert Data Post
Membuat RESTful API Get Data Post By ID
Membuat RESTful API Update Data Post
Membuat RESTful API Delete Data Post
RESTful API Pages
Membuat RESTful API Get Data Pages
Membuat RESTful API Insert Data Page
Membuat RESTful API Get Data Page By ID
Membuat RESTful API Update Data Page
Membuat RESTful API Delete Data Page
RESTful API Products
Membuat RESTful API Get Data Products
Membuat RESTful API Insert Data Product
Membuat RESTful API Get Data Product By ID
Membuat RESTful API Update Data Product
Membuat RESTful API Delete Data Product
RESTful API Photos
Membuat RESTful API Get Data Photos
Membuat RESTful API Insert Data Photo
Membuat RESTful API Delete Data Photo
RESTful API Sliders
Membuat RESTful API Get Data Sliders
Membuat RESTful API Insert Data Slider
Membuat RESTful API Delete Data Slider
RESTful API Aparaturs
Membuat RESTful API Get Data Aparaturs
Membuat RESTful API Insert Data Aparatur
Membuat RESTful API Get Data Aparatur By ID
Membuat RESTful API Update Data Aparatur
Membuat RESTful API Delete Data Aparatur
RESTful API Public Posts
Membuat RESTful API Public Get Data Posts
Membuat RESTful API Public Get Data Post By Slug
Membuat RESTful API Public Get Data Posts Home
RESTful API Public Pages
Membuat RESTful API Public Get Data Page
Membuat RESTful API Public Get Data Page By Slug
RESTful API Public Products
Membuat RESTful API Public Get Data Products
Membuat RESTful API Public Get Data Product By Slug
Membuat RESTful API Public Get Data Products Home
RESTful API Public Photos
Membuat RESTful API Public Get Data Photos
Membuat RESTful API Public Get Data Photos Home
RESTful API Public Sliders
Membuat RESTful API Public Get Data Sliders
RESTful API Public Aparaturs
Membuat RESTful API Public Get Data Aparaturs
Membuat RESTful API Public Get Data Aparatur By ID
Membuat RESTful API Public Get Data Aparaturs Home
Konfigurasi CORS
Apa itu CORS ?
Installasi dan Konfigurasi CORS
Menambahkan Route Static File
Installasi & Persiapan Frontend (Vue)
Membuat Project Vue (TypeScript)
Install Library Pendukung
Konfigurasi Endpoint API Backend
Installasi & Konfigurasi Tailwind CSS
Assets Images
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 Category
Membuat Type Post
Membuat Type Page
Membuat Type Product
Membuat Type Photo
Membuat Type Slider
Membuat Type Aparatur
Membuat Type Dashboard
Membuat Type Auth
Membuat Type Theme
State Management (Pinia)
Membuat Store Auth
Membuat Store Theme
Authentication
Membuat Helper Permission
Membuat View dan Route Auth
Membuat Proses Login
Layout Admin
Membuat Component Header
Membuat Component Sidebar
Membuat Layout Admin
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
Permission 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
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
Post Composables
Membuat Composable Posts (Query)
Membuat Composable Post Create (Mutation)
Membuat Composable Post By Id (Query)
Membuat Composable Post Update (Mutation)
Membuat Composable Post Delete (Mutation)
CRUD Data Posts
Menampilkan List Data Posts
Membuat Proses Create Data Post
Membuat Proses Edit dan Update Data Post
Membuat Proses Delete Data Post
Page Composables
Membuat Composable Pages (Query)
Membuat Composable Page Create (Mutation)
Membuat Composable Page By Id (Query)
Membuat Composable Page Update (Mutation)
Membuat Composable Page Delete (Mutation)
CRUD Data Pages
Menampilkan List Data Pages
Membuat Proses Create Data Page
Membuat Proses Edit dan Update Data Page
Membuat Proses Delete Data Page
Product Composables
Membuat Composable Products (Query)
Membuat Composable Product Create (Mutation)
Membuat Composable Product By Id (Query)
Membuat Composable Product Update (Mutation)
Membuat Composable Product Delete (Mutation)
CRUD Data Products
Menampilkan List Data Products
Membuat Proses Create Data Product
Membuat Proses Edit dan Update Data Product
Membuat Proses Delete Data Product
Photo Composables
Membuat Composable Photos (Query)
Membuat Composable Photo Create (Mutation)
Membuat Composable Photo Delete (Mutation)
CRUD Data Photos
Menampilkan List Data Photos
Membuat Proses Create Data Photo
Membuat Proses Delete Data Photo
Slider Composables
Membuat Composable Sliders (Query)
Membuat Composable Slider Create (Mutation)
Membuat Composable Slider Delete (Mutation)
CRUD Data Sliders
Menampilkan List Data Sliders
Membuat Proses Create Data Slider
Membuat Proses Delete Data Slider
Aparatur Composables
Membuat Composable Aparaturs (Query)
Membuat Composable Aparatur Create (Mutation)
Membuat Composable Aparatur By Id (Query)
Membuat Composable Aparatur Update (Mutation)
Membuat Composable Aparatur Delete (Mutation)
CRUD Data Aparaturs
Menampilkan List Data Aparaturs
Membuat Proses Create Data Aparatur
Membuat Proses Edit dan Update Data Aparatur
Membuat Proses Delete Data Aparatur
Layout Web
Membuat Component Menu Desktop
Membuat Component Menu Mobile
Membuat Component Header
Membuat Component Footer
Membuat Layout Web
Membuat Reusable Component Card
Membuat Component Card Post
Membuat Component Card Page
Membuat Component Card Product
Membuat Component Card Photo
Membuat Component Card Aparatur
Halaman Homepage
Membuat View dan Route Home
Membuat Composable Slider Home
Membuat Component dan Menampilkan Sliders di Home
Membuat Composable Product Home
Membuat Component dan Menampilkan Products di Home
Membuat Composable Post Home
Membuat Component dan Menampilkan Posts di Home
Membuat Composable Photo Home
Membuat Component dan Menampilkan Photos di Home
Membuat Composable Aparatur Home
Membuat Component dan Menampilkan Aparaturs di Home
Page Composables Web
Membuat Composable Pages (Query)
Membuat Composable Page By Slug (Query)
Halaman Pages
Menampilkan Data Pages
Menampilkan Detail Data Page
Aparatur Composables Web
Membuat Composable Aparaturs (Query)
Membuat Composable Aparatur By Id
Halaman Aparaturs
Menampilkan Data Aparaturs
Menampilkan Detail Data Aparatur
Post Composables Web
Membuat Composable Posts (Query)
Membuat Composable Post By Slug
Halaman Posts
Menampilkan Data Posts
Menampilkan Detail Data Post
Product Composables Web
Membuat Composable Products (Query)
Membuat Composable Product By Slug
Halaman Products
Menampilkan Data Products
Menampilkan Detail Data Product
Photo Composables Web
Membuat Composable Photos (Query)
Halaman Photos
Menampilkan Data Photos
Membuat Fitur Pencarian
Membuat Fitur Pencarian di Header
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
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

Login
Login
Roles Permissions
Roles Permissions
Create Post
Create Post
Halaman Homepage
Halaman Homepage
Halaman Aparaturs
Halaman Aparaturs
Halaman Posts
Halaman Posts

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?