💍 Wedding Invitation Builder - Laravel 12

Sistem undangan pernikahan digital dengan 4 template yang dapat di-customize. Dibangun dengan Laravel 12, Tailwind CSS v4, dan fitur admin panel lengkap.

📋 Daftar Isi

Features
Requirements
Installation
Configuration
Usage
Template Overview
Template Customization
Advanced Customization
Troubleshooting
Support

✨ Features

🎨 4 Template Designs: Elegant Modern, Classic Romantic, Elegant Nature, Bugis Emerald
🎭 Scroll Animations: Smooth animations triggered by scroll (IntersectionObserver)
📱 Fully Responsive: Mobile-first design, perfect on all devices
🎵 Background Music: Auto-play music with toggle control
🎯 RSVP System: Guest confirmation with database storage
💬 Wishes & Messages: Guest book for wedding wishes
🔐 Admin Panel: Complete admin dashboard for managing guests and settings
🗺️ Google Maps Integration: Embed maps for event locations
📊 Guest Analytics: View confirmed guests, attendance statistics
🎨 Customizable Colors: Easy color scheme customization
⚡ Fast Performance: Optimized with Vite and modern CSS
🌐 SEO Ready: Meta tags and Open Graph support

📦 Requirements

Pastikan sistem Anda memenuhi requirements berikut:

PHP >= 8.2
Composer >= 2.0
Node.js >= 18.x
NPM atau Yarn
MySQL >= 8.0 atau PostgreSQL >= 13
Web Server: Apache atau Nginx

Extensions PHP yang diperlukan:

OpenSSL
PDO
Mbstring
Tokenizer
XML
Ctype
JSON
BCMath
Fileinfo

🚀 Installation

Step 1: Clone Repository

git clone https://github.com/username/wedding-invitation.git
cd wedding-invitation

Step 2: Install Dependencies

Install PHP dependencies dengan Composer:

composer install

Install JavaScript dependencies dengan NPM:

npm install

Step 3: Environment Configuration

Copy file .env.example ke .env:

cp .env.example .env

Generate application key:

php artisan key:generate

Edit file .env dan sesuaikan konfigurasi database:

APP_NAME="Wedding Invitation"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=wedding_invitation
DB_USERNAME=root
DB_PASSWORD=your_password

Step 4: Database Setup

Buat database baru:

CREATE DATABASE wedding_invitation;

Jalankan migrations:

php artisan migrate

Jalankan seeders (optional, untuk data dummy):

php artisan db:seed

Ini akan membuat:

Admin user (email: admin@example.com, password: password)
Sample event data
Sample guest data

Step 5: Build Assets

Build frontend assets dengan Vite:

npm run build

Untuk development dengan hot reload:

npm run dev

Step 6: Storage Link

Buat symbolic link untuk storage:

php artisan storage:link

Step 7: Serve Application

Jalankan development server:

php artisan serve

Aplikasi akan berjalan di http://localhost:8000

⚙️ Configuration

Admin Panel Access

URL: http://localhost:8000/admin

Default Credentials:

Email: admin@example.com
Password: password

⚠️ PENTING: Ganti password default setelah instalasi pertama!

Event Settings

Login ke admin panel
Klik Settings di sidebar
Klik Edit Event
Isi form dengan data event Anda:
- Event Type (Wedding, Seminar, Aqiqah, Birthday)
- Bride & Groom Names
- Parents Names
- Event Date & Time
- Venue Information
- Google Maps URL
- Instagram Accounts
- Love Story (optional)
- Background Music filename

Upload Music

Upload file musik ke public/music/
Format yang didukung: MP3, OGG, WAV
Recommended size: < 5MB
Ubah filename di Event Settings

Upload Images

Gallery Images:

public/images/gallery/

Couple Photos:

public/images/couple/

Recommended image size:

Gallery: 800x600px
Couple photos: 500x500px
Format: JPG atau PNG
Max size: 200KB per image

📖 Usage

Viewing Templates

Buka homepage: http://localhost:8000
Browse semua template yang tersedia
Klik Gunakan Template Ini untuk preview
Share link template ke tamu undangan

Managing Guests

Via Admin Panel:

Login ke /admin
Klik Guests di sidebar
View semua guest yang sudah RSVP
Filter by attendance status
Export data ke CSV

Guest RSVP Flow

Tamu membuka link undangan
Klik tombol Open Invitation
Scroll ke section RSVP
Isi form:
- Nama Lengkap
- Email (optional)
- Phone (optional)
- Konfirmasi Kehadiran (Hadir/Tidak Hadir)
- Jumlah Tamu
- Pesan/Ucapan
Submit form
Data tersimpan di database dan bisa dilihat di admin panel

🎯 Template Overview

Sistem undangan pernikahan ini memiliki 4 template yang dapat di-customize:

Template 1: Elegant Modern - Modern dengan glassmorphism dan smooth animations
Template 2: Classic Romantic - Klasik dengan nuansa romantis dan floral design
Template 3: Elegant Nature - Natural dan earthy dengan parallax effects
Template 4: Bugis Emerald - Traditional Bugis dengan Islamic elements

🎨 Template Customization

Struktur File

resources/views/
├── layouts/
│   └── app.blade.php                    # Main layout untuk semua template
├── templates/
│   ├── template-1/
│   │   ├── index.blade.php              # Template 1 main file
│   │   └── sections/                    # Template 1 sections (gallery, gift, dll)
│   ├── template-2/
│   │   ├── index.blade.php              # Template 2 main file
│   │   └── sections/                    # Template 2 sections
│   ├── template-3/
│   │   ├── index.blade.php              # Template 3 main file
│   │   └── sections/                    # Template 3 sections
│   └── template-4/
│       └── index.blade.php              # Template 4 main file (standalone)
└── home.blade.php                       # Template selector page

🎨 Template 1 - Elegant Modern

File: /resources/views/templates/template-1/index.blade.php

1. Mengubah Warna Tema

Template 1 menggunakan warna Primary (Blue) dan Gold. Untuk mengubahnya:

Lokasi: tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... ubah sesuai warna yang diinginkan
          600: '#0284c7',  // Warna utama
          700: '#0369a1',
        },
        gold: {
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
        }
      }
    }
  }
}

2. Mengubah Nama Pengantin

Lokasi: index.blade.php - Line 22-29 (Opening Cover)

<h2 class="font-script text-4xl sm:text-5xl md:text-6xl text-white mb-4">
    Nama Pria & Nama Wanita  <!-- UBAH DI SINI -->
</h2>

Lokasi: Line 63-72 (Hero Section)

<h1 class="font-script text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-4 leading-tight">
    Nama Pria  <!-- UBAH DI SINI -->
</h1>
<!-- ... -->
<h1 class="font-script text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-8 leading-tight">
    Nama Wanita  <!-- UBAH DI SINI -->
</h1>

Lokasi: Line 113-154 (Bride & Groom Cards)

<!-- Groom Card -->
<h3 class="font-script text-3xl sm:text-4xl text-primary-700 mb-2">
    Nama Lengkap Pria  <!-- UBAH DI SINI -->
</h3>
<p class="text-gray-600 mb-1">Putra dari</p>
<p class="font-medium text-gray-800">
    Bapak [Nama] & Ibu [Nama]  <!-- UBAH DI SINI -->
</p>
<a href="https://instagram.com/username" target="_blank">
    @username  <!-- UBAH DI SINI -->
</a>

<!-- Bride Card -->
<h3 class="font-script text-3xl sm:text-4xl text-gold-700 mb-2">
    Nama Lengkap Wanita  <!-- UBAH DI SINI -->
</h3>
<p class="text-gray-600 mb-1">Putri dari</p>
<p class="font-medium text-gray-800">
    Bapak [Nama] & Ibu [Nama]  <!-- UBAH DI SINI -->
</p>
<a href="https://instagram.com/username" target="_blank">
    @username  <!-- UBAH DI SINI -->
</a>

3. Mengubah Tanggal & Waktu Acara

Lokasi Controller: /app/Http/Controllers/InvitationController.php - Line 59

private function getInvitationData()
{
    $eventDate = '2025-12-31 19:00:00';  // UBAH DI SINI (Format: Y-m-d H:i:s)
    // ...
}

Lokasi View: index.blade.php - Line 32, 77-80, 229-235

<!-- Opening Cover -->
<p class="text-white/90 text-lg mb-2">Minggu, 31 Desember 2025</p>  <!-- UBAH -->

<!-- Hero Section -->
<p class="text-base sm:text-lg md:text-xl mb-2">
    Minggu, 31 Desember 2025  <!-- UBAH -->
</p>
<p class="text-sm sm:text-base opacity-90">
    Pukul 19.00 WIB  <!-- UBAH -->
</p>

<!-- Event Cards -->
<p>Minggu, 31 Desember 2025</p>  <!-- UBAH -->
<p>08.00 - 10.00 WIB</p>  <!-- UBAH (Akad) -->
<p>11.00 - 14.00 WIB</p>  <!-- UBAH (Resepsi) -->

4. Mengubah Lokasi Acara

Lokasi: index.blade.php - Line 240-243, 270-273

<!-- Akad Nikah -->
<p>Gedung Serbaguna</p>  <!-- UBAH -->
<p>Jl. Contoh No. 123, Jakarta</p>  <!-- UBAH -->

<!-- Resepsi -->
<p>Grand Ballroom Hotel</p>  <!-- UBAH -->
<p>Jl. Contoh No. 456, Jakarta</p>  <!-- UBAH -->

5. Menambahkan Google Maps

Lokasi: index.blade.php - Setelah event cards

<!-- Map Section -->
<div class="mt-12 rounded-2xl overflow-hidden shadow-xl animate-on-scroll" data-delay="400">
    <iframe
        src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
        width="100%"
        height="450"
        style="border:0;"
        allowfullscreen=""
        loading="lazy">
    </iframe>
</div>

Cara mendapatkan embed code:

Buka Google Maps
Cari lokasi acara
Klik "Share" → "Embed a map"
Copy code iframe
Paste di section map

6. Mengubah Background Music

Lokasi: index.blade.php - Line ~600

<audio id="background-music" loop>
    <source src="/music/wedding-bg.mp3" type="audio/mpeg">  <!-- UBAH -->
</audio>

Langkah-langkah:

Upload file musik ke public/music/
Ubah path di <source src="...">
Format yang didukung: MP3, OGG, WAV

7. Customize Gallery

File: /resources/views/templates/template-1/sections/gallery.blade.php

<!-- Ubah path gambar -->
<img src="{{ asset('images/gallery/photo1.jpg') }}" alt="Gallery 1">
<img src="{{ asset('images/gallery/photo2.jpg') }}" alt="Gallery 2">
<!-- ... -->

Langkah-langkah:

Upload foto ke public/images/gallery/
Ubah path di section gallery
Recommended size: 800x600px, format JPG/PNG

8. Customize Animations

Lokasi: index.blade.php - Bagian <style> di akhir file

/* Ubah durasi animasi */
.animate-on-scroll {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;  /* Ubah 0.8s */
}

/* Ubah jarak gerakan animasi */
.fade-in-left {
    transform: translateX(-50px);  /* Ubah -50px untuk jarak lebih jauh/dekat */
}

Tipe animasi yang tersedia:

animate-on-scroll - Fade in dari bawah
fade-in-left - Slide dari kiri
fade-in-right - Slide dari kanan
scale-in - Zoom in
slide-up - Slide dari bawah

Cara menggunakan:

<div class="fade-in-left" data-delay="200">
    <!-- Content -->
</div>

9. Mengubah Font

Lokasi: resources/css/app.css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Great+Vibes&display=swap');

@layer base {
  .font-script {
    font-family: 'Great Vibes', cursive;  /* Ubah font script */
  }

  .font-serif {
    font-family: 'Playfair Display', serif;  /* Ubah font serif */
  }
}

Font Recommendations:

Script: Great Vibes, Pacifico, Dancing Script, Sacramento
Serif: Playfair Display, Merriweather, Lora, Crimson Text

💕 Template 2 - Classic Romantic

File: /resources/views/templates/template-2/index.blade.php

1. Mengubah Warna Tema

Template 2 menggunakan warna Rose/Pink.

Lokasi: tailwind.config.js

colors: {
  rose: {
    100: '#ffe4e6',
    500: '#f43f5e',  // Warna utama - UBAH DI SINI
    600: '#e11d48',
  }
}

Atau ubah langsung di CSS:

Lokasi: index.blade.php - Bagian @push('styles')

:root {
  --color-primary: #f43f5e;  /* Pink/Rose - UBAH */
  --color-secondary: #ec4899;  /* UBAH */
}

2. Mengubah Ornamen Floral

Lokasi: sections/couple.blade.php

<!-- Ubah SVG ornamen -->
<svg class="floral-ornament">
  <!-- Edit path SVG sesuai design yang diinginkan -->
</svg>

3. Customize Timeline/Love Story

Lokasi: sections/timeline.blade.php

<!-- Timeline Item -->
<div class="timeline-item">
    <div class="timeline-date">2020</div>  <!-- UBAH tahun -->
    <div class="timeline-content">
        <h3>Pertama Bertemu</h3>  <!-- UBAH judul -->
        <p>Cerita singkat tentang pertemuan pertama...</p>  <!-- UBAH cerita -->
    </div>
</div>

<!-- Tambah item baru -->
<div class="timeline-item">
    <div class="timeline-date">2023</div>
    <div class="timeline-content">
        <h3>Lamaran</h3>
        <p>Cerita tentang lamaran...</p>
    </div>
</div>

4. Menambah/Mengurangi Section

Untuk menambah section baru:

Buat file di sections/nama-section.blade.php
Include di index.blade.php:

@include('templates.template-2.sections.nama-section')

Untuk menghilangkan section:

Comment atau hapus baris include:

{{-- @include('templates.template-2.sections.timeline') --}}

🌿 Template 3 - Elegant Nature

File: /resources/views/templates/template-3/index.blade.php

1. Mengubah Warna Tema

Template 3 menggunakan warna Brown/Earth tones.

Lokasi: tailwind.config.js

colors: {
  brown: {
    100: '#fef3c7',
    600: '#92400e',  // Brown - UBAH
    700: '#78350f',
  },
  cream: {
    200: '#fef3c7',
    300: '#fde68a',
  }
}

2. Mengubah Parallax Effect

Lokasi: index.blade.php - JavaScript section

// Parallax speed
document.querySelectorAll('.parallax').forEach(el => {
    const speed = el.dataset.speed || 0.5;  // UBAH 0.5 untuk speed berbeda
    const yPos = -(scrolled * speed);
    el.style.transform = `translateY(${yPos}px)`;
});

Cara menggunakan:

<div class="parallax" data-speed="0.3">
    <!-- Semakin kecil speed, semakin lambat gerakan -->
</div>

3. Customize Nature Elements

Lokasi: index.blade.php - Decorative elements

<!-- Ubah SVG daun/elemen nature -->
<svg class="leaf-ornament">
  <path d="..." />  <!-- Edit path untuk bentuk berbeda -->
</svg>

🕌 Template 4 - Bugis Emerald

File: /resources/views/templates/template-4/index.blade.php

1. Mengubah Warna Tema

Template 4 menggunakan warna Emerald/Green dengan Cream/Gold.

Lokasi: index.blade.php - Bagian <style> (Line 24-55)

/* Bugis Emerald Color Scheme */
.bg-emerald-dark {
    background-color: #003f30;  /* UBAH - Emerald gelap */
}

.bg-emerald {
    background-color: #059669;  /* UBAH - Emerald terang */
}

.bg-cream {
    background-color: #f9e7bc;  /* UBAH - Cream */
}

.text-emerald-dark {
    color: #003f30;  /* UBAH */
}

.text-emerald {
    color: #059669;  /* UBAH */
}

.text-cream {
    color: #f9e7bc;  /* UBAH */
}

Color Scheme Alternatives:

Ruby Red: #7C2D2D, #C85A54, #FFE5B4
Sapphire Blue: #0F4C75, #3282B8, #F5F5F5
Amethyst Purple: #4A148C, #7B1FA2, #F3E5F5

2. Mengubah Ayat Al-Quran

Lokasi: index.blade.php - Line 313-320

<p class="font-serif text-2xl sm:text-3xl mb-6 leading-relaxed" dir="rtl">
    وَمِنْ آيَاتِهِ أَنْ خَلَقَ لَكُم مِّنْ أَنفُسِكُمْ أَزْوَاجًا  <!-- UBAH ayat -->
</p>
<p class="text-xs sm:text-sm opacity-90 leading-relaxed">
    "Dan di antara tanda-tanda (kebesaran)-Nya..."  <!-- UBAH terjemahan -->
</p>
<p class="mt-4 font-serif text-lg">— QS. Ar-Rum: 21 —</p>  <!-- UBAH surat -->

3. Mengubah Mappatabe' (Pesan Traditional)

Lokasi: index.blade.php - Line 484-495

<h2 class="font-serif text-3xl mb-8">Mappatabe'</h2>  <!-- UBAH judul -->
<p class="font-serif text-base sm:text-lg leading-relaxed italic mb-6">
    "Rebba sipatokkong, mali siparappe, sipakalebbi..."  <!-- UBAH pesan Bugis -->
</p>
<p class="text-xs sm:text-sm opacity-90 leading-relaxed">
    (Artinya: Jatuh saling menopang...)  <!-- UBAH terjemahan -->
</p>

Alternative Messages:

Pesan adat Jawa
Pesan adat Sunda
Quotes pernikahan
Doa pernikahan

4. Customize Bugis Ornaments

Lokasi: index.blade.php - CSS section (Line 57-62)

/* Bugis Ornament Pattern */
.bugis-ornament {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px,
                                   rgba(249, 231, 188, 0.1) 10px,
                                   rgba(249, 231, 188, 0.1) 20px);  /* UBAH pattern */
}

Ornament Symbols:

Lokasi: Line 304, 331

<span class="text-3xl text-cream">✤</span>  <!-- UBAH symbol (✤, ❋, ✿, ❈) -->

5. Mengubah Decorative Frames

Lokasi: index.blade.php - CSS (Line 120-200)

/* Section Frame Ornaments */
.section-frame::before,
.section-frame::after {
    content: '✤';  /* UBAH symbol */
    font-size: 3rem;  /* UBAH ukuran */
    opacity: 0.4;  /* UBAH opacity */
}

/* Four Corner Frame */
.four-corner-frame::before,
.four-corner-frame::after {
    width: 80px;  /* UBAH ukuran frame */
    height: 80px;
    border: 3px solid #f9e7bc;  /* UBAH ketebalan & warna */
    opacity: 0.3;  /* UBAH opacity */
}

6. Customize Bottom Navigation

Lokasi: index.blade.php - Line 599-649

<!-- Ubah item navigation -->
<a href="#opening" class="nav-item">
    <svg>...</svg>
    <span>Home</span>  <!-- UBAH label -->
</a>

<!-- Tambah item baru -->
<a href="#new-section" class="nav-item">
    <svg class="w-6 h-6">
        <!-- SVG icon baru -->
    </svg>
    <span>New Section</span>
</a>

Menambah/mengurangi dots indicator:

<!-- Tambah/kurangi sesuai jumlah nav items -->
<div id="nav-dots" class="flex justify-center items-center gap-1.5 pb-2 pt-1">
    <div class="dot w-1.5 h-1.5 rounded-full bg-cream"></div>
    <div class="dot w-1.5 h-1.5 rounded-full bg-cream/30"></div>
    <div class="dot w-1.5 h-1.5 rounded-full bg-cream/30"></div>
    <!-- Tambah dot baru untuk section baru -->
</div>

🌐 Global Customization

Customization yang berlaku untuk semua template.

1. Mengubah Event Data via Admin Panel

URL: /admin/event-settings

Fields yang bisa diubah:

Event Type (Wedding, Seminar, Aqiqah, Birthday, Other)
Bride Name, Father, Mother
Groom Name, Father, Mother
Event Title & Description
Event Date, Time Start, Time End
Venue Name, Address, City
Google Maps URL
Coordinates (Latitude, Longitude)
Instagram Bride & Groom
Love Story
Background Music filename

Cara menggunakan:

Login ke /admin
Klik "Settings" di sidebar
Klik "Edit Event"
Isi form sesuai kebutuhan
Klik "Save"

2. Mengganti Layout Wrapper

File: /resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Undangan Pernikahan')</title>  <!-- UBAH title -->

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100">  <!-- UBAH background -->
    @yield('content')
    @stack('scripts')
</body>
</html>

3. Mengubah Metadata SEO

Lokasi: Setiap template - Bagian @section('title')

@section('title', 'Wedding Invitation - Nama Pengantin')  <!-- UBAH -->

<!-- Tambahkan meta description -->
<meta name="description" content="Undangan pernikahan Nama Pria & Nama Wanita">
<meta name="keywords" content="undangan, pernikahan, wedding">

<!-- Open Graph untuk social media -->
<meta property="og:title" content="Wedding Invitation - Nama Pengantin">
<meta property="og:description" content="31 Desember 2025">
<meta property="og:image" content="{{ asset('images/og-image.jpg') }}">

4. Mengubah Favicon

Lokasi: public/favicon.ico

Generate favicon dari https://favicon.io/
Replace file public/favicon.ico
Tambahkan di layouts/app.blade.php:

<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">

5. RSVP Form Customization

Fields default:

Nama Lengkap
Email (optional)
Nomor Telepon (optional)
Konfirmasi Kehadiran (Hadir/Tidak Hadir)
Jumlah Tamu
Pesan/Ucapan

Untuk menambah field:

Migration: Tambah kolom di tabel guests

php artisan make:migration add_custom_field_to_guests_table

public function up()
{
    Schema::table('guests', function (Blueprint $table) {
        $table->string('custom_field')->nullable();
    });
}

Model: Update $fillable di app/Models/Guest.php

protected $fillable = [
    'name', 'email', 'phone', 'attendance', 'number_of_guests',
    'message', 'custom_field'  // Tambah di sini
];

View: Tambah input di form RSVP

<div>
    <label class="block text-sm font-medium mb-2">Custom Field</label>
    <input type="text" name="custom_field" class="w-full px-4 py-3...">
</div>

Validation: Update di GuestController.php

$validated = $request->validate([
    // ...
    'custom_field' => 'nullable|string|max:255',
]);

🚀 Advanced Customization

1. Membuat Template Baru

Langkah-langkah:

Copy template existing:

cp -r resources/views/templates/template-1 resources/views/templates/template-5

Rename file sesuai kebutuhan
Tambahkan route di routes/web.php:

Route::prefix('template-5')->name('template5.')->group(function () {
    Route::get('/', [InvitationController::class, 'template5'])->name('index');
    Route::post('/rsvp', [GuestController::class, 'store'])->name('rsvp.store');
});

Tambahkan method di controller InvitationController.php:

public function template5()
{
    $data = $this->getInvitationData();
    return view('templates.template-5.index', $data);
}

Tambahkan di home page home.blade.php:

<!-- Template 5 Card -->
<div class="...">
    <!-- Template preview -->
    <a href="{{ route('template5.index') }}">Gunakan Template Ini</a>
</div>

2. Menambahkan Custom Animation

Lokasi: Template file - Bagian <style>

/* Custom animation keyframes */
@keyframes customFadeIn {
    from {
        opacity: 0;
        transform: translateY(50px) rotate(5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* Custom animation class */
.custom-fade-in {
    opacity: 0;
    animation: customFadeIn 1s ease-out forwards;
}

/* Dengan scroll trigger */
.custom-fade-in.animated {
    animation-play-state: running;
}

JavaScript untuk trigger:

document.querySelectorAll('.custom-fade-in').forEach(el => {
    animateOnScroll.observe(el);
});

3. Integrasi dengan Payment Gateway

Untuk digital gift/angpao online:

Install package (contoh: Midtrans)

composer require midtrans/midtrans-php

Buat migration untuk transactions

php artisan make:migration create_transactions_table

Buat controller

php artisan make:controller PaymentController

Tambahkan button di gift section:

<button onclick="openPayment()">
    Kirim Angpao Digital
</button>

Implementasi payment flow sesuai dokumentasi provider

4. Menambahkan WhatsApp Share

Lokasi: Setiap template - Tambahkan button share

<button onclick="shareWhatsApp()" class="btn-share">
    <svg><!-- WhatsApp icon --></svg>
    Share ke WhatsApp
</button>

<script>
function shareWhatsApp() {
    const text = 'Undangan Pernikahan Nama Pria & Nama Wanita - 31 Desember 2025';
    const url = window.location.href;
    const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`;
    window.open(whatsappUrl, '_blank');
}
</script>

5. Add to Calendar Integration

<button onclick="addToCalendar()" class="btn-calendar">
    <svg><!-- Calendar icon --></svg>
    Tambah ke Kalender
</button>

<script>
function addToCalendar() {
    const event = {
        title: 'Pernikahan Nama Pria & Nama Wanita',
        description: 'Undangan pernikahan',
        location: 'Grand Ballroom Hotel, Jakarta',
        start: '2025-12-31T19:00:00',
        end: '2025-12-31T22:00:00'
    };

    // Google Calendar URL
    const googleCalUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(event.title)}&dates=${event.start.replace(/[-:]/g, '')}/${event.end.replace(/[-:]/g, '')}&details=${encodeURIComponent(event.description)}&location=${encodeURIComponent(event.location)}`;

    window.open(googleCalUrl, '_blank');
}
</script>

6. Live Streaming Integration

Untuk acara hybrid (offline + online):

<!-- YouTube Embed -->
<section id="live-streaming" class="py-20">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-serif text-center mb-8">Live Streaming</h2>

        <div class="max-w-4xl mx-auto">
            <div class="aspect-w-16 aspect-h-9">
                <iframe
                    src="https://www.youtube.com/embed/VIDEO_ID"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>

            <div class="mt-4 text-center">
                <p class="text-gray-600">
                    Live streaming akan dimulai pada:<br>
                    <strong>31 Desember 2025, 19:00 WIB</strong>
                </p>
            </div>
        </div>
    </div>
</section>

7. Photo Booth / Upload Photo

Fitur untuk tamu upload foto:

Create migration:

php artisan make:migration create_guest_photos_table

Create upload form:

<form action="{{ route('photo.upload') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="photo" accept="image/*" capture="camera">
    <input type="text" name="caption" placeholder="Caption...">
    <button type="submit">Upload</button>
</form>

Display photos gallery:

<div class="photo-gallery">
    @foreach($guestPhotos as $photo)
        <div class="photo-item">
            <img src="{{ asset('storage/' . $photo->path) }}">
            <p>{{ $photo->caption }}</p>
        </div>
    @endforeach
</div>

📱 Responsive Customization

Breakpoints Tailwind CSS

- sm: 640px   (Mobile landscape)
- md: 768px   (Tablet)
- lg: 1024px  (Desktop)
- xl: 1280px  (Large desktop)

Customize untuk Mobile

<!-- Desktop: 3 kolom, Mobile: 1 kolom -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Content -->
</div>

<!-- Hide di mobile -->
<div class="hidden md:block">
    <!-- Content hanya tampil di desktop -->
</div>

<!-- Show hanya di mobile -->
<div class="block md:hidden">
    <!-- Content hanya tampil di mobile -->
</div>

🎨 Color Scheme Ideas

Pastel Theme

:root {
  --primary: #FFB6C1;   /* Light Pink */
  --secondary: #E6E6FA; /* Lavender */
  --accent: #FFDAB9;    /* Peach */
}

Bold & Modern

:root {
  --primary: #FF6B6B;   /* Coral Red */
  --secondary: #4ECDC4; /* Turquoise */
  --accent: #FFE66D;    /* Yellow */
}

Classic Elegant

:root {
  --primary: #2C3E50;   /* Navy Blue */
  --secondary: #ECF0F1; /* Light Gray */
  --accent: #C0A080;    /* Gold */
}

Rustic Natural

:root {
  --primary: #8B4513;   /* Saddle Brown */
  --secondary: #DEB887; /* Burlywood */
  --accent: #F5DEB3;    /* Wheat */
}

🔧 Troubleshooting

Animations Tidak Berjalan

Solusi:

Pastikan JavaScript loaded:

@push('scripts')
<script>
    console.log('Script loaded');
</script>
@endpush

Check IntersectionObserver support:

if ('IntersectionObserver' in window) {
    // Code here
} else {
    console.log('IntersectionObserver not supported');
}

Warna Tidak Berubah

Solusi:

Rebuild Tailwind:

npm run build

Clear cache:

php artisan cache:clear
php artisan view:clear

Background Music Tidak Autoplay

Solusi:

Browser modern memblock autoplay. Gunakan user interaction:

// Play music setelah user click button
openButton.addEventListener('click', function() {
    backgroundMusic.play().catch(e => {
        console.log('Autoplay prevented:', e);
    });
});

Gambar Tidak Muncul

Solusi:

Check path:

{{ asset('images/photo.jpg') }}  <!-- Correct -->

Create symbolic link:

php artisan storage:link

Check file permissions:

chmod -R 755 public/images

Installation Issues

Error: "composer install" gagal

Solusi:

# Clear composer cache
composer clear-cache

# Install ulang dengan verbose
composer install -vvv

# Atau gunakan --ignore-platform-reqs jika ada masalah dengan PHP version check
composer install --ignore-platform-reqs

Error: "npm install" gagal

Solusi:

# Clear npm cache
npm cache clean --force

# Hapus node_modules dan package-lock.json
rm -rf node_modules package-lock.json

# Install ulang
npm install

Error: "SQLSTATE[HY000] [1045] Access denied"

Solusi:

Periksa credentials database di .env
Pastikan database sudah dibuat
Test koneksi:

php artisan tinker
DB::connection()->getPdo();

Error: "Mix file does not exist" atau "Vite manifest not found"

Solusi:

# Build assets
npm run build

# Atau run dev server
npm run dev

Error: "Class 'Vite' not found"

Solusi:

# Clear cache
php artisan config:clear
php artisan cache:clear
php artisan view:clear

# Rebuild autoload
composer dump-autoload

Permission Issues (Linux/Mac)

Solusi:

# Set correct permissions
sudo chown -R $USER:www-data storage
sudo chown -R $USER:www-data bootstrap/cache
chmod -R 775 storage
chmod -R 775 bootstrap/cache

📚 Resources

Colors

Coolors: https://coolors.co/ (Color palette generator)
Adobe Color: https://color.adobe.com/

Music

YouTube Audio Library: https://www.youtube.com/audiolibrary
Free Music Archive: https://freemusicarchive.org/

💡 Tips & Best Practices

Performance
- Optimize images (max 200KB per image)
- Use lazy loading untuk images
- Minify CSS/JS untuk production
Accessibility
- Gunakan semantic HTML
- Add alt text untuk images
- Ensure good color contrast
Testing
- Test di berbagai devices (mobile, tablet, desktop)
- Test di berbagai browsers (Chrome, Firefox, Safari)
- Test loading speed dengan Google PageSpeed Insights
Backup
- Selalu backup before customize
- Use version control (Git)
- Document your changes
Security
- Sanitize user input
- Use CSRF protection (Laravel default)
- Keep dependencies updated

📞 Support

Jika ada pertanyaan atau butuh bantuan:

Email: support@example.com
Documentation: Check README.md
Issues: Create issue di GitHub repository

☕ Buy Me a Coffee

Jika project ini bermanfaat untuk Anda, dukung pengembangan selanjutnya:

☕ Buy Me a Coffee via Saweria

Dukungan Anda sangat berarti untuk pengembangan fitur-fitur baru! 🙏

Last Updated: {{ date('Y-m-d') }} Version: 1.0.0

Happy Customizing! 🎉💍

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
app		app
bootstrap		bootstrap
config		config
database		database
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.env.example.undangan		.env.example.undangan
.gitattributes		.gitattributes
.gitignore		.gitignore
ADMIN_PANEL_GUIDE.md		ADMIN_PANEL_GUIDE.md
AESTHETIC_BACKGROUNDS_GUIDE.md		AESTHETIC_BACKGROUNDS_GUIDE.md
ANIMATION_GUIDE.md		ANIMATION_GUIDE.md
ANIMATION_QUICK_REFERENCE.md		ANIMATION_QUICK_REFERENCE.md
ANIMATION_UPDATE_SUMMARY.md		ANIMATION_UPDATE_SUMMARY.md
BACKGROUND_CHEATSHEET.md		BACKGROUND_CHEATSHEET.md
BACKGROUND_EXAMPLES.md		BACKGROUND_EXAMPLES.md
CARD_DESIGN_UPDATE.md		CARD_DESIGN_UPDATE.md
EVENT_MANAGEMENT_GUIDE.md		EVENT_MANAGEMENT_GUIDE.md
FEATURES_UPDATE.md		FEATURES_UPDATE.md
FINAL_SESSION_SUMMARY.md		FINAL_SESSION_SUMMARY.md
FULL_VERSION_GUIDE.md		FULL_VERSION_GUIDE.md
INTEGRATION_COMPLETE.md		INTEGRATION_COMPLETE.md
INTEGRATION_GUIDE.md		INTEGRATION_GUIDE.md
MULTI_TEMPLATE_GUIDE.md		MULTI_TEMPLATE_GUIDE.md
NEXT_STEPS.md		NEXT_STEPS.md
README.md		README.md
README_UNDANGAN.md		README_UNDANGAN.md
SECTION_IDEAS.md		SECTION_IDEAS.md
SESSION_COMPLETE_SUMMARY.md		SESSION_COMPLETE_SUMMARY.md
TEMPLATE_3_COMPLETE.md		TEMPLATE_3_COMPLETE.md
TEMPLATE_3_SUMMARY.md		TEMPLATE_3_SUMMARY.md
artisan		artisan
composer.json		composer.json
composer.lock		composer.lock
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

yusril713/template-undangan

Folders and files

Latest commit

History

Repository files navigation

💍 Wedding Invitation Builder - Laravel 12

📋 Daftar Isi

✨ Features

📦 Requirements

🚀 Installation

Step 1: Clone Repository

Step 2: Install Dependencies

Step 3: Environment Configuration

Step 4: Database Setup

Step 5: Build Assets

Step 6: Storage Link

Step 7: Serve Application

⚙️ Configuration

Admin Panel Access

Event Settings

Upload Music

Upload Images

📖 Usage

Viewing Templates

Managing Guests

Guest RSVP Flow

🎯 Template Overview

🎨 Template Customization

Struktur File

🎨 Template 1 - Elegant Modern

1. Mengubah Warna Tema

2. Mengubah Nama Pengantin

3. Mengubah Tanggal & Waktu Acara

4. Mengubah Lokasi Acara

5. Menambahkan Google Maps

6. Mengubah Background Music

7. Customize Gallery

8. Customize Animations

9. Mengubah Font

💕 Template 2 - Classic Romantic

1. Mengubah Warna Tema

2. Mengubah Ornamen Floral

3. Customize Timeline/Love Story

4. Menambah/Mengurangi Section

🌿 Template 3 - Elegant Nature

1. Mengubah Warna Tema

2. Mengubah Parallax Effect

3. Customize Nature Elements

🕌 Template 4 - Bugis Emerald

1. Mengubah Warna Tema

2. Mengubah Ayat Al-Quran

3. Mengubah Mappatabe' (Pesan Traditional)

4. Customize Bugis Ornaments

5. Mengubah Decorative Frames

6. Customize Bottom Navigation

🌐 Global Customization

1. Mengubah Event Data via Admin Panel

2. Mengganti Layout Wrapper

3. Mengubah Metadata SEO

4. Mengubah Favicon

5. RSVP Form Customization

🚀 Advanced Customization

1. Membuat Template Baru

2. Menambahkan Custom Animation

3. Integrasi dengan Payment Gateway

4. Menambahkan WhatsApp Share

5. Add to Calendar Integration

6. Live Streaming Integration

7. Photo Booth / Upload Photo

📱 Responsive Customization

Breakpoints Tailwind CSS

Customize untuk Mobile

🎨 Color Scheme Ideas

Pastel Theme

Bold & Modern

Classic Elegant

Rustic Natural

🔧 Troubleshooting

Animations Tidak Berjalan

Warna Tidak Berubah

Packages