Implementasi WordPress untuk Otomatisasi Pengurusan Surat di Tingkat RT/RW

WordPress,yang pada awalnya dirancang sebagai platform blogging,kini telah mengalami perkembangan signifikan dan menjadi sistem manajemen konten (CMS) yang mampu memenuhi berbagai kebutuhan.

WordPress menawarkan beberapa fitur utama yang menjadikannya CMS yang sangat fleksibel dan dapat disesuaikan dengan berbagai kebutuhan:

1. Custom Post Types: Selain jenis tulisan bawaan (Posts dan Pages),WordPress memungkinkan pembuatan Custom Post Types untuk konten yang lebih spesifik.
2. User Roles and Capabilities: WordPress menyediakan sistem peran pengguna (User Roles) dengan tingkat akses yang berbeda-beda.
3. Plugin Ecosystem: Ekosistem plugin WordPress yang luas menawarkan ribuan ekstensi untuk menambahkan fungsionalitas baru.

Penerapan Fitur WordPress dalam Project Pengurusan Surat Pengantar

Dalam project pengurusan surat ini,fitur-fitur WordPress di atas diimplementasikan sebagai berikut:

1. Custom Post Types:
   1. Submission: Menyimpan data permohonan surat yang diajukan oleh warga.
   2. Layanan: Menyimpan informasi tentang layanan yang disediakan oleh Kelurahan.
   3. Form Layanan: Menampilkan formulir yang dapat diisi oleh warga untuk mengajukan permohonan surat,terkait dengan layanan tertentu.
2. User Roles:
   1. Warga:Dapat mendaftar,melihat layanan,dan mengajukan permohonan surat.
   2. Pengurus RT/RW:Dapat memverifikasi dan mengelola permohonan surat,serta mengatur jadwal pertemuan dengan warga.
   3. Admin Situs:Bertanggung jawab atas pengelolaan situs secara keseluruhan,termasuk mengelola pengguna dan konten.
3. Plugins:
   1. Advanced Custom Fields (PRO):Menambahkan kolom khusus pada Custom Post Types dan profil pengguna untuk menyimpan informasi tambahan yang diperlukan.
   2. Custom Post Type UI:Memudahkan pembuatan dan pengelolaan Custom Post Types melalui antarmuka admin WordPress.
   3. Document Engine: Menghasilkan surat pengantar dalam format PDF secara otomatis.
   4. Frontend Admin: Memungkinkan warga dan pengurus RT/RW untuk berinteraksi dengan sistem melalui formulir di bagian depan situs (frontend).
   5. User Role Editor: Mengatur hak akses dan izin bagi setiap peran pengguna secara lebih detail.

Berikut adalah contoh tangkapan layar dan penjelasan singkat tentang modifikasi yang kami lakukan.

Homepage

Akses Permission

Untuk memastikan hanya pengguna dengan peran (User Role) tertentu yang dapat mengakses halaman spesifik, kami menggunakan kode berikut:

//Cek apakah user login atau tidak
if (!is_user_logged_in()) {
    wp_safe_redirect(home_url());
    exit;
}

//Cek apakah user adalah Warga / Pengurus RT / Pengurus RW
if (is_user_logged_in()) {
    $user = wp_get_current_user();
    $user_roles = (array) $user->roles;
    if (!current_user_can('administrator') && !in_array('pengurus-rt', $user_roles)) {
        wp_safe_redirect(home_url('/dashboard/'));
        exit;
    }
} else {
    wp_safe_redirect(home_url());
    exit;
}

//Redirect user yang login ke Dashboard
function redirect_logged_in_users_to_dashboard()
{
    if (is_user_logged_in() && is_front_page()) {
        $dashboard_page_id = 321; // Replace 123 with the actual ID of your "Dashboard" page
        wp_redirect(get_permalink($dashboard_page_id));
        exit;
    }
}
add_action('template_redirect', 'redirect_logged_in_users_to_dashboard');


//Buat WP Dashboard hanya bisa diakses oleh Admin utama (user id 1)
function restrict_admin_access()
{
    $current_user = wp_get_current_user();

    // Check if the user is in the admin area and not user ID 1
    if (is_admin() && $current_user->ID != 1) {
        wp_redirect(home_url()); // Redirect to the homepage
        exit; // Prevent further execution
    }
}
add_action('admin_init', 'restrict_admin_access');

Dashboard

Pada halaman ini, kami menampilkan ringkasan biodata pengguna, berita singkat dari admin, serta daftar permohonan yang telah mereka ajukan.

Dashboard

Halaman Layanan

Layanan

<?php
//Apabila user login, tampilkan link untuk ke halaman submit Form
if (is_user_logged_in()) {
    global $current_user;
    get_currentuserinfo(); ?>
    <?php
    $relatedForms = get_field('form');
    if ($relatedForms) {
        $relatedForm = $relatedForms[0];
        $permalink = get_permalink($relatedForm->ID);
        $title = get_the_title($relatedForm->ID);
    ?> <span class="layPengantar">
            <a href="<?php echo esc_url($permalink); ?>">Buat Pengantar</a>
        </span>
    <?php }  ?>
<?php } ?>

<?php 
//Apabila Post type Layanan ada Field PDF, tampilkan link Download
if (get_field('pdfLink')) : ?>
    <span class="layDownload">
        <a href="<?php the_field('pdfLink'); ?>" target="_blank">Download</a></span>
    </span>
<?php endif; ?>

Form Submission

Pada halaman pengajuan permohonan, warga akan melihat kembali informasi profil mereka dan persyaratan yang diperlukan. Untuk memastikan permohonan dapat diakses oleh pengurus RT/RW yang sesuai, kami menggunakan taksonomi (kategori) RT dan RW pada post “Submission”. Taksonomi ini bersifat tersembunyi (hidden field) dan akan diperbarui secara otomatis berdasarkan informasi RT dan RW yang terdapat pada profil warga.

Form Layanan

Kami menggunakan fungsi ACF Form dari plugin Advanced Custom Fields untuk menampilkan grup field ACF di bagian depan (frontend) situs, sehingga warga dapat mengisi formulir permohonan dengan mudah.

//Ambil USER ID dan tampilkan data-data yang diperlukan
$user_ID = get_current_user_id();
$rt = get_field('rt', 'user_' . $user_ID);
$rw = get_field('rw', 'user_' . $user_ID);
$alamat = get_field('alamat', 'user_' . $user_ID);
$tempatlahir = get_field('tempat_lahir', 'user_' . $user_ID);
$tanggallahir = get_field('tgl_lahir', 'user_' . $user_ID);

//Update sehingga tanggal yang ditampilkan berformat tanggal Indonesia
setlocale(LC_TIME, 'id_ID');
$formatted_date = strftime('%d %B %Y', strtotime($tanggallahir));

$gender = get_field('gender', 'user_' . $user_ID);
$agama = get_field('agama', 'user_' . $user_ID);
//data lainnya panggil disini... 

acf_form_head();

Kami menambahkan kode JavaScript agar secara otomatis menambahkan setiap permohonan surat (post) yang dipublikasikan ke dalam taksonomi RT/RW yang sesuai.

window.onload = function () {
    const radioRTs = document.querySelectorAll('[data-taxonomy="rt"] ul.acf-checkbox-list li label input[type="radio"]');
    const chooseuserRT = document.getElementById("userRT");
    const radioRWs = document.querySelectorAll('[data-taxonomy="rw"] ul.acf-checkbox-list li label input[type="radio"]');
    const chooseuserRW = document.getElementById("userRW");

    function setRTRadio(text) {
        for (const radioRT of radioRTs) {
            const labelText = radioRT.nextElementSibling.textContent.trim();
            if (labelText === text) {
                radioRT.checked = true;
                return;
            }
        }
        console.warn("Option text not found in radio button group:", text);
    }
    setRTRadio(chooseuserRT.textContent);

    function setRWRadio(text) {
        for (const radioRW of radioRWs) {
            const labelTextRW = radioRW.nextElementSibling.textContent.trim();
            if (labelTextRW === text) {
                radioRW.checked = true;
                return;
            }
        }
        console.warn("Option text not found in radio button group:", text);
    }
    setRWRadio(chooseuserRW.textContent);
};

Setelah permohonan surat dihubungkan dengan taksonomi RT/RW, sistem dapat memfilter permohonan berdasarkan taksonomi tersebut. Hal ini memungkinkan pengurus RT/RW untuk melihat daftar permohonan yang relevan dengan wilayah mereka di dashboard WordPress.

Submission List

Pada halaman ini, kami menampilkan daftar permohonan yang diajukan oleh pengguna yang sedang login. Untuk itu, kami menggunakan query WordPress untuk mengambil data permohonan (post type “Submission”) yang relevan.

Agar tampilan lebih optimal dan mudah digunakan, kami menambahkan beberapa fitur:

• Pagination: Jika jumlah permohonan melebihi 20, halaman ini akan menampilkan pagination untuk memudahkan navigasi.
• Dropdown Filter: Pengguna dapat memfilter permohonan berdasarkan statusnya ( “Belum direview”, “Revisi”, “Dijadwalkan” atau “Ditolak”) melalui dropdown filter.
• Jumlah Permohonan per Status: Kami juga menampilkan jumlah permohonan untuk setiap status agar pengguna dapat melihat gambaran umum dari permohonan mereka. Informasi ini didapatkan melalui query tambahan yang menghitung jumlah permohonan berdasarkan statusnya.

Submission List

Query Utama

<div class="listWrapper">
    <?php

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'submission', // Replace 'submission' with your actual custom post type
        'author' => $user_id,
        'posts_per_page' => 20,
        'paged' => $paged
    );
    if (!empty($selected_status)) {
        $args['meta_compare'] = '=';
        $args['meta_key'] = 'status';
        $args['meta_value'] = $selected_status;
    }
    $the_query = new WP_Query($args);

    if ($the_query->have_posts()) :
        while ($the_query->have_posts()) : $the_query->the_post();
            get_template_part('part/listItem'); // Ensure this template part handles your custom post type
        endwhile;
        if ($the_query->max_num_pages > 1) :
            echo '<div class="pagination">';
            echo paginate_links(array(
                'base'         => get_pagenum_link(1) . '%_%', // Adjust as needed
                'format'       => '?paged=%#%',  // Adjust as needed
                'current'      => max(1, get_query_var('paged')),
                'total'        => $the_query->max_num_pages,
                'prev_text' => __('Previous'),
                'next_text' => __('Next'),
            ));
            echo '</div>';
        endif;
    else :
        _e('Tidak ada pengajuan Surat Pengantar.'); // Adjust message as needed

    endif;

    wp_reset_postdata();
    ?>
</div>

Kode tambahan (menghitung post berdasarkan status dan Dropdown untuk memfilter status)

<div id="PostHeading">
    <div class="subStatus">
        <?php
        $status_counts = array(
            'review' => 0,
            'revisi' => 0,
            'jadwal' => 0,
            'tolak' => 0
        );

        $count_args = array(
            'post_type' => 'submission',
            'posts_per_page' => -1,
            'tax_query' => array( 
                array(
                    'taxonomy' => 'rt',
                    'field' => 'slug',
                    'terms' => $rt
                )
            ),
            'fields' => 'ids',
        );
        $count_query = new WP_Query($count_args);

        // Count posts with each status
        if ($count_query->have_posts()) {
            foreach ($count_query->posts as $post_id) {
                $status = get_post_meta($post_id, 'status', true);
                if (array_key_exists($status, $status_counts)) {
                    $status_counts[$status]++;
                }
            }
        }
        wp_reset_postdata();
        echo "<div><span class='statReview'>" . $status_counts['review'] . "</span> review</div>";
        echo "<div><span class='statRevisi'>" . $status_counts['revisi'] . "</span> revisi</div>";
        echo "<div><span class='statJadwal'>" . $status_counts['jadwal'] . "</span> terjadwal</div>";
        echo "<div><span class='statTolak'>" . $status_counts['tolak'] . "</span> ditolak</div>";
        $selected_status = isset($_GET['status']) ? $_GET['status'] : '';
        ?>
    </div>
    <div class="subFilter">
        <form method="get">
            <select name="status" onchange="this.form.submit()">
                <option value="">Semua Status</option>
                <option value="review" <?php selected('review', $selected_status); ?>>Belum direview</option>
                <option value="revisi" <?php selected('revisi', $selected_status); ?>>Harap Revisi</option>
                <option value="jadwal" <?php selected('jadwal', $selected_status); ?>>Dijadwalkan</option>
                <option value="tolak" <?php selected('tolak', $selected_status); ?>>Ditolak</option>
            </select>
        </form>
    </div>
</div>

Query Pengurus RT/RW

Submission RT/RW

Daftar permohonan pada halaman pengurus RT/RW menampilkan permohonan yang relevan dengan wilayah mereka. Untuk mencapai hal ini, kami memodifikasi query WordPress agar memfilter permohonan berdasarkan taksonomi RT, bukan berdasarkan ID pengguna seperti pada halaman pengguna biasa.

$rt_args = array(
    'post_type' => 'submission',
    'posts_per_page' => -1, 
    'tax_query' => array(
        array(
            'taxonomy' => 'rt',
            'field' => 'slug',
            'terms' => $rt
        )
    ),
    'fields' => 'ids', 
);
$rt_query = new WP_Query($rt_args);

Selanjutnya, pengurus RT/RW dapat mengedit permohonan surat yang diajukan warga. Mereka memiliki opsi untuk mengubah status permohonan.

Edit Submission

Pada permohonan yang sudah dijadwalkan, kami menyediakan tautan (link) “Cetak” dan “Unduh PDF” yang dapat diakses oleh warga dan pengurus. Tautan ini memudahkan warga untuk mencetak atau menyimpan surat pengantar dalam format PDF. Selain itu, pengurus juga diberikan tautan pintasan (shortcut) ke halaman wa.me untuk berkomunikasi dengan warga melalui WhatsApp.

Halaman cetak permohonan merupakan tampilan khusus dari permohonan tunggal (single-submission). Halaman ini menampilkan data warga yang mengajukan permohonan, termasuk informasi pribadi dan detail permohonan. Selain itu, terdapat tombol yang memungkinkan pengguna untuk mencetak permohonan tersebut dalam format fisik.

Submission Print

Kami menggunakan plugin Document Engine untuk menghasilkan dokumen PDF dari permohonan surat.

Submission PDF

Demikianlah studi kasus tentang bagaimana WordPress, dengan fitur Custom Post Type, User Level, dan plugin gratis, dapat mempermudah proses pengurusan surat keterangan.

Ingin tahu lebih banyak tips dan trik seputar WordPress, UI/UX, marketing, dan sosial media? Jangan lupa ikuti halaman Facebook kami untuk mendapatkan informasi terbaru!