feat(builder): implementasi native drag and drop homepage layout builder yang 100% aman

front-page.php

@@ -3,7 +3,9 @@
 
 <main id="primary" class="site-main edukarsa-home">
 
-    <!-- 1. SLIDER -->
+    <!-- ==========================================
+         1. SLIDER (TERKUNCI DI PALING ATAS)
+    =========================================== -->
     <?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
     <section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
         <div class="slider-container" id="hero-slider-container">
@@ -33,10 +35,38 @@
     </section>
     <?php endif; ?>
 
-    <!-- 2. STATISTIK DESAIN KARTU MELAYANG -->
+    <!-- ==========================================
-    <?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
+         2. ENGINE BUILDER NATIVE (DRAG & DROP)
+    =========================================== -->
+    <?php
+    // Urutan Bawaan
+    $default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
+    
+    // Ambil Data Urutan dari Database
+    $layout_option = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
+    if (empty($layout_option)) $layout_option = implode(',', $default_layout);
+    
+    $sections = explode(',', $layout_option);
+    
+    // Konfigurasi Latar Parallax Global
+    $mid_bg = get_option('edukarsa_mid_bg_image'); 
+    $parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
+
+    // RENDER LOOP BERDASARKAN URUTAN ARRAY
+    foreach ( $sections as $index => $section ) {
+        $section = trim($section);
+        
+        switch ( $section ) {
+            
+            // --- SEKSI STATISTIK ---
+            case 'stats':
+                if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : 
+                    // Jika urutan pertama, berikan efek melayang (overlap slider)
+                    $is_first = ($index === 0);
+                    $margin_style = $is_first ? 'margin-top: -80px;' : 'margin-top: 50px;';
+                ?>
                 <section class="edukarsa-stats">
-        <div class="container stats-grid">
+                    <div class="container stats-grid" style="<?php echo $margin_style; ?>">
                         <?php for($i=1; $i<=3; $i++) : ?>
                         <div class="stat-item card-style stat-card-modern">
                             <div class="stat-icon-wrapper">
@@ -54,10 +84,14 @@
                         <?php endfor; ?>
                     </div>
                 </section>
-    <?php endif; ?>
+                <?php 
+                endif; 
+                break;
 
-    <!-- 3. ABOUT US / SAMBUTAN -->
+            // --- SEKSI TENTANG KAMI / SAMBUTAN ---
-    <?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
+            case 'about':
+                if ( get_option('edukarsa_tampil_about', 1) == 1 ) : 
+                ?>
                 <section class="edukarsa-section edukarsa-sambutan">
                     <div class="container sambutan-grid">
                         <div class="sambutan-image-wrapper">
@@ -79,10 +113,12 @@
                         </div>
                     </div>
                 </section>
-    <?php endif; ?>
-
-    <!-- 4. MILESTONES -->
                 <?php 
+                endif; 
+                break;
+
+            // --- SEKSI MILESTONE ---
+            case 'milestone':
                 if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : 
                     $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
                     if ( $query_milestone->have_posts() ) :
@@ -121,10 +157,10 @@
                 <?php 
                     endif; 
                 endif; 
-    ?>
+                break;
 
-    <!-- 5. PROGRAM UNGGULAN -->
+            // --- SEKSI PROGRAM UNGGULAN ---
-    <?php 
+            case 'program':
                 if ( get_option('edukarsa_tampil_program', 1) == 1 ) : 
                     $prog_sub   = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
                     $prog_title = get_option( 'edukarsa_program_title', 'Our Program' );
@@ -166,20 +202,18 @@
                         </div>
                     </div>
                 </section>
-    <?php endif; ?>
-
-    <!-- 6 & 7. WRAPPER PARALLAX -->
                 <?php 
-    $mid_bg = get_option('edukarsa_mid_bg_image'); 
+                endif; 
-    $parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
+                break;
+
+            // --- SEKSI VIDEO ---
+            case 'video':
+                if ( get_option('edukarsa_tampil_video', 1) == 1 ) : 
                 ?>
                 <div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
                     <div class="parallax-overlay"></div>
                     <div class="parallax-content relative-z2">
-            
+                        <section class="edukarsa-section edukarsa-videos" style="padding: 60px 0;">
-            <!-- 6. VIDEO -->
-            <?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
-            <section class="edukarsa-section edukarsa-videos" style="padding-bottom: 30px;">
                             <div class="container video-grid">
                                 <?php for($i=1; $i<=2; $i++) : ?>
                                 <div class="video-item">
@@ -198,15 +232,22 @@
                                 <?php endfor; ?>
                             </div>
                         </section>
-            <?php endif; ?>
+                    </div>
-
+                </div>
-            <!-- 7. KEUNGGULAN DINAMIS -->
                 <?php 
+                endif; 
+                break;
+
+            // --- SEKSI KEUNGGULAN ---
+            case 'keunggulan':
                 if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : 
                     $k_sub   = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
                     $k_title = get_option( 'edukarsa_keunggulan_title', 'Keunggulan Program' );
                 ?>
-            <section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 20px; padding-bottom: 80px;">
+                <div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
+                    <div class="parallax-overlay"></div>
+                    <div class="parallax-content relative-z2">
+                        <section class="edukarsa-section edukarsa-keunggulan" style="padding: 60px 0 80px;">
                             <div class="container">
                                 <div class="section-header text-center">
                                     <?php if ( ! empty( $k_sub ) ) : ?><span class="badge-title text-white"><?php echo esc_html( $k_sub ); ?></span><?php endif; ?>
@@ -237,14 +278,17 @@
                                 </div>
                             </div>
                         </section>
-            <?php endif; ?>
-            
                     </div>
                 </div>
+                <?php 
+                endif; 
+                break;
 
-    <!-- 8. CTA SECTION (FLOATING CARD) -->
+            // --- SEKSI CTA PENDAFTARAN ---
-    <?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
+            case 'cta':
-    <section class="edukarsa-cta-floating-section">
+                if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : 
+                ?>
+                <section class="edukarsa-cta-floating-section" style="padding: 50px 0;">
                     <div class="container">
                         <div class="cta-floating-card">
                             <div class="cta-floating-content">
@@ -259,10 +303,14 @@
                         </div>
                     </div>
                 </section>
-    <?php endif; ?>
+                <?php 
+                endif; 
+                break;
 
-    <!-- 9. LATEST NEWS (JUDUL BERSIH TANPA BADGE BERLEBIH) -->
+            // --- SEKSI LATEST NEWS ---
-    <?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
+            case 'news':
+                if ( get_option('edukarsa_tampil_news', 1) == 1 ) : 
+                ?>
                 <section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px; padding-bottom: 60px;">
                     <div class="container">
                         <div class="section-header text-center" style="margin-bottom: 35px;">
@@ -297,10 +345,12 @@
                         </div>
                     </div>
                 </section>
-    <?php endif; ?>
-
-    <!-- 10. SEKSI FAQ (JUDUL BERSIH TANPA BADGE REDUNDAN) -->
                 <?php 
+                endif; 
+                break;
+
+            // --- SEKSI FAQ ---
+            case 'faq':
                 if ( get_option('edukarsa_tampil_faq', 1) == 1 ) : 
                     $query_faq = new WP_Query( array( 'post_type' => 'faq', 'posts_per_page' => -1, 'order' => 'ASC' ) );
                     if ( $query_faq->have_posts() ) :
@@ -338,6 +388,13 @@
                 <?php 
                     endif;
                 endif; 
+                break;
+
+            // Mencegah eksekusi diluar blok template (White-list security)
+            default:
+                break;
+        }
+    }
     ?>
 
 </main>

inc/admin-menu.php

@@ -908,3 +908,117 @@ function edukarsa_about_page_html() {
     <?php
 }
 
+
+// =========================================================================
+// FITUR BUILDER TATA LETAK BERANDA (DRAG & DROP NATIVE)
+// =========================================================================
+
+add_action('admin_menu', function() {
+    add_submenu_page( 
+        'edukarsa_settings', 
+        edukarsa_t( 'Tata Letak Beranda', 'Homepage Layout' ), 
+        edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ), 
+        'manage_options', 
+        'edukarsa_layout', 
+        'edukarsa_layout_page_html' 
+    );
+});
+
+add_action('admin_init', function() {
+    register_setting('edukarsa_layout_group', 'edukarsa_homepage_layout', 'sanitize_text_field');
+});
+
+function edukarsa_layout_page_html() {
+    if ( ! current_user_can( 'manage_options' ) ) return;
+    
+    // Muat jQuery UI Sortable (Bawaan Inti WordPress)
+    wp_enqueue_script('jquery-ui-sortable');
+    
+    $default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
+    $saved_layout = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
+    $current_layout = explode(',', $saved_layout);
+    
+    // Pastikan seksi baru tidak hilang jika pernah disimpan di format lama
+    foreach($default_layout as $sec) {
+        if(!in_array($sec, $current_layout)) $current_layout[] = $sec;
+    }
+
+    $section_names = array(
+        'stats'      => edukarsa_t('📊 Statistik (3 Kotak Capaian)', '📊 Statistics Cards'),
+        'about'      => edukarsa_t('👤 Sambutan & Profil Pimpinan', '👤 Welcome & Leader Profile'),
+        'milestone'  => edukarsa_t('🏆 Rekam Jejak (Milestones)', '🏆 Milestones History'),
+        'program'    => edukarsa_t('📚 Program Unggulan / Kurikulum', '📚 Featured Programs'),
+        'video'      => edukarsa_t('🎬 Video Profil Parallax', '🎬 Parallax Videos'),
+        'keunggulan' => edukarsa_t('⭐ Poin Keunggulan (Grid Berurut)', '⭐ Advantages Grid'),
+        'cta'        => edukarsa_t('📢 Banner Ajakan (CTA) Pendaftaran', '📢 Admission CTA Banner'),
+        'news'       => edukarsa_t('📰 Berita & Warta Terkini', '📰 Latest News & Updates'),
+        'faq'        => edukarsa_t('❓ Seksi Tanya Jawab (FAQ)', '❓ Frequently Asked Questions')
+    );
+    ?>
+    <div class="wrap edukarsa-admin-wrap" style="max-width: 800px; margin-top: 25px;">
+        
+        <div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
+            <div style="padding: 25px 30px; background: #fafafa; border-bottom: 1px solid #f1f5f9;">
+                <h1 style="font-weight: 800; font-size: 22px; color: #0f172a; margin: 0 0 8px; line-height: 1.2;">
+                    <?php echo esc_html(edukarsa_t('🏗️ Builder Tata Letak Beranda', '🏗️ Homepage Layout Builder')); ?>
+                </h1>
+                <p style="color: #64748b; font-size: 14px; margin: 0;">
+                    <?php echo esc_html(edukarsa_t('Tahan dan geser (drag & drop) blok di bawah ini untuk mengatur urutan seksi di halaman beranda. Modul yang dimatikan di Pengaturan Utama akan otomatis dilewati.', 'Drag and drop the blocks below to rearrange the homepage sections. Modules disabled in Main Settings will be skipped automatically.')); ?>
+                </p>
+            </div>
+
+            <form action="options.php" method="post" style="padding: 30px;">
+                <?php settings_fields('edukarsa_layout_group'); ?>
+                
+                <div style="background: #eef2ff; border: 1px solid #c7d2fe; padding: 16px 20px; border-radius: 8px; margin-bottom: 15px; font-weight: 700; color: #3730a3; display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 22px;">🔒</span> 
+                    <?php echo esc_html(edukarsa_t('🌟 Slider Banner (Terkunci di Posisi Teratas)', '🌟 Slider Banner (Locked at Very Top)')); ?>
+                </div>
+
+                <input type="hidden" name="edukarsa_homepage_layout" id="layout_order" value="<?php echo esc_attr(implode(',', $current_layout)); ?>">
+                
+                <ul id="sortable-layout" style="margin: 0; padding: 0; list-style: none;">
+                    <?php foreach($current_layout as $sec): if(isset($section_names[$sec])): ?>
+                        <li data-id="<?php echo esc_attr($sec); ?>" style="background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; cursor: grab; display: flex; align-items: center; gap: 15px; transition: all 0.2s; position: relative;">
+                            <span class="dashicons dashicons-menu-alt2" style="color: #94a3b8; font-size: 24px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;"></span>
+                            <span style="font-size: 15px; font-weight: 700; color: #1e293b; flex-grow: 1;"><?php echo esc_html($section_names[$sec]); ?></span>
+                            <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; background: #f1f5f9; padding: 4px 10px; border-radius: 12px;">Draggable</span>
+                        </li>
+                    <?php endif; endforeach; ?>
+                </ul>
+
+                <div style="margin-top: 30px; text-align: right; border-top: 1px solid #f1f5f9; padding-top: 25px;">
+                    <?php submit_button(edukarsa_t('Simpan Tata Letak', 'Save Layout Order'), 'primary large', 'submit', false, array('style'=>'border-radius:8px; font-weight:700; padding:8px 30px; font-size: 15px;')); ?>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        #sortable-layout li:hover { box-shadow: 0 4px 12px rgba(11,74,142,0.08) !important; border-color: #0b4a8e !important; }
+        #sortable-layout li:hover .dashicons { color: #0b4a8e; }
+        .ui-sortable-helper { box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; transform: scale(1.02); z-index: 9999; border-color: #0b4a8e !important; }
+        .ui-sortable-placeholder { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; visibility: visible !important; height: 60px; margin-bottom: 12px; }
+    </style>
+
+    <script>
+    jQuery(document).ready(function($) {
+        $("#sortable-layout").sortable({
+            placeholder: "ui-sortable-placeholder",
+            cursor: "grabbing",
+            axis: "y",
+            containment: "parent",
+            tolerance: "pointer",
+            update: function(event, ui) {
+                var newOrder = [];
+                $("#sortable-layout li").each(function() {
+                    newOrder.push($(this).data('id'));
+                });
+                $("#layout_order").val(newOrder.join(','));
+            }
+        });
+        $("#sortable-layout").disableSelection();
+    });
+    </script>
+    <?php
+}