Main Menu

Membangun Website Desa Dengan Golang, Vue TypeScript dan Tailwind CSS

0 members

All Levels

DISKON 50%

Rp. 250.000

Rp. 500.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.

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

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Fika Ridaul Maulayya

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