Default page

⚝ One Hat Cyber Team ⚝

Your IP: 192.168.31.6
Server IP: 192.168.1.11
Server: Linux pams 6.1.0-29-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.123-1 (2025-01-02) x86_64
PHP Version: 8.2.28
Buat File | Buat Folder

Dir : ~/var/www/lppm/Modules/Backend/Opini/Views/

Edit File: create.php

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0"><?= $title ?></h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active"><?= $li_1 ?></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <form action="<?= base_url('admin/opini/add') ?>" method="post" enctype="multipart/form-data" id="form-opini">
            <?= csrf_field() ?>
            
            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                        <div class="card-body p-3">
                            <div class="mb-3">
                                <label class="form-label small fw-bold text-muted text-uppercase">Judul Opini</label>
                                <input type="text" name="title" class="form-control form-control-sm border-light bg-light" 
                                       style="font-size: 14px;" value="<?= old('title') ?>" placeholder="Masukkan judul menarik..." required>
                            </div>
                            
                            <style>
                                .ck-editor__editable_inline { min-height: 300px; font-size: 14px; }
                                #image-frame { border: 2px dashed #dee2e6 !important; aspect-ratio: 16/9; overflow: hidden; }
                            </style>

<div class="mb-0">
                                <label class="form-label small fw-bold text-muted text-uppercase">Isi Konten</label>
                                <textarea name="content" id="editor"><?= old('content') ?></textarea>
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-lg-4">
                    <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
                        <div class="card-body p-3 text-center">
                            <h6 class="fw-bold small mb-3 text-muted text-uppercase text-start">Gambar Sampul</h6>
                            
                            <div class="position-relative mb-3">
                                <div id="image-frame" class="rounded d-flex align-items-center justify-content-center bg-light">
                                    <div id="placeholder-preview" class="text-center">
                                        <i class="bi bi-image text-muted fs-1"></i>
                                        <p class="small text-muted mb-0">Klik Choose File</p>
                                    </div>
                                    <img id="image-preview-result" src="#" class="img-fluid w-100 h-100" 
                                         style="display: none; object-fit: cover;">
                                </div>
                            </div>

<input type="file" id="upload-image" class="form-control form-control-sm border-light bg-light" accept="image/*">
                            <input type="hidden" name="cropped_image" id="cropped_image">
                            
                            <div style="font-size: 11px;" class="text-muted mt-2">Rasio otomatis 16:9. Maks 2MB.</div>
                        </div>
                    </div>

<div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
                        <div class="card-body p-3">
                            <h6 class="fw-bold small mb-3 text-muted text-uppercase">Atribut Penulisan</h6>
                            
                            <div class="mb-3">
                                <label class="form-label small">Nama Penulis</label>
                                <input type="text" name="author_name" class="form-control form-control-sm border-light bg-light" placeholder="Nama penulis...">
                            </div>

<div class="mb-3">
                                <label class="form-label small">Tanggal Publish</label>
                                <input type="datetime-local" name="published_at" class="form-control form-control-sm border-light bg-light" value="<?= date('Y-m-d\TH:i') ?>">
                            </div>

<div class="mb-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" name="headline" id="headlineSwitch" value="1">
                                    <label class="custom-control-label small fw-bold" for="headlineSwitch">Jadikan Headline</label>
                                </div>
                            </div>

<div class="mb-3">
                                <label class="form-label small">Status</label>
                                <select name="status" class="form-control form-control-sm border-light bg-light">
                                    <option value="draft">Draft (Simpan)</option>
                                    <option value="published">Published (Tayang)</option>
                                </select>
                            </div>

<button type="submit" class="btn btn-primary btn-sm w-100 rounded-pill py-2 fw-bold shadow-sm">
                                <i class="bi bi-cloud-arrow-up me-1"></i> Simpan Opini
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

<div class="modal fade" id="cropperModal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white p-2 px-3">
                <h6 class="modal-title">Sesuaikan Foto (16:9)</h6>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0 bg-dark">
                <div style="max-height: 500px; overflow: hidden;">
                    <img id="image-to-crop" style="display: block; max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-sm btn-light border" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-primary px-4 shadow-sm" id="crop-button">Potong & Gunakan</button>
            </div>
        </div>
    </div>
</div>

// --- 2. CROPPER LOGIC (BOOTSTRAP 4) ---
        let cropper = null;
        const imageToCrop = document.getElementById('image-to-crop');
        const uploadInput = document.getElementById('upload-image');
        const $modal = $('#cropperModal'); // Selector jQuery untuk BS4

// Pilih File
        $(uploadInput).on('change', function(e) {
            const files = e.target.files;
            if (files && files.length > 0) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    imageToCrop.src = event.target.result;
                    // Buka modal gaya BS4
                    $modal.modal('show');
                };
                reader.readAsDataURL(files[0]);
            }
        });

// Inisialisasi Cropper saat modal tampil sempurna
        $modal.on('shown.bs.modal', function() {
            if (cropper) {
                cropper.destroy();
            }
            cropper = new Cropper(imageToCrop, {
                aspectRatio: 16 / 9,
                viewMode: 2,
                autoCropArea: 1,
                ready: function() {
                    console.log("Cropper is ready");
                }
            });
        });

// Hancurkan cropper saat modal tutup
        $modal.on('hidden.bs.modal', function() {
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
            uploadInput.value = ""; // Reset file input
        });

// Tombol Potong diklik
        $('#crop-button').on('click', function() {
            if (!cropper) return;

const canvas = cropper.getCroppedCanvas({
                width: 800,
                height: 450
            });

if (canvas) {
                const base64data = canvas.toDataURL('image/jpeg', 0.8);

// Update Preview di halaman
                $('#image-preview-result').attr('src', base64data).show();
                $('#placeholder-preview').hide();

// Simpan Base64 ke hidden input
                $('#cropped_image').val(base64data);

// Tutup Modal
                $modal.modal('hide');
            }
        });

});
</script>