FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/makanan/index.php

✕ Tutup

<?= $this->extend('layout/wrapper') ?>

<?= $this->section('style')?>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">

body {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--neo-dark);
        background-color: var(--neo-bg);
    }

/* --- SECTION TITLE NEO --- */
    .neo-page-title {
        font-size: 3.5rem;
        text-align: center;
        margin-bottom: 10px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--neo-dark);
        text-shadow: 4px 4px 0px var(--neo-yellow);
        letter-spacing: -1px;
    }

.badge-title {
        background: var(--neo-dark);
        color: var(--neo-white);
        padding: 8px 25px;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: 800;
        display: inline-block;
        box-shadow: 4px 4px 0px var(--neo-red);
        transform: rotate(-2deg);
        border: 2px solid var(--neo-dark);
        text-transform: uppercase;
    }

/* --- PRODUCT CARD NEO --- */
    .neo-card {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        overflow: hidden;
        box-shadow: 5px 5px 0px var(--neo-dark);
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: var(--neo-white);
    }

.neo-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 8px 8px 0px var(--neo-red);
    }

.neo-card-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-bottom: var(--border-thick);
        background: var(--neo-white);
    }

.neo-card-body {
        padding: 15px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        /* Memastikan background mengikuti parent */
        background-color: inherit; 
    }

.neo-title-menu {
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 5px;
        text-transform: uppercase;
        line-height: 1.2;
        color: var(--neo-dark);
    }

.neo-price {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--neo-red);
        margin-bottom: 15px;
    }

.neo-like-btn {
        background: var(--neo-white);
        color: var(--neo-dark);
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 6px 15px;
        font-weight: 800;
        font-size: 0.9rem;
        cursor: pointer;
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 2px 2px 0px var(--neo-dark);
    }

.neo-like-btn:hover {
        background: var(--neo-pink);
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0px var(--neo-dark);
    }

.like-count {
        font-weight: 800;
        font-size: 0.9rem;
        background: var(--neo-dark);
        color: var(--neo-white);
        padding: 5px 12px;
        border-radius: 50px;
        border: 2px solid var(--neo-dark);
    }

</style>
<?= $this->endSection()?>

<?= $this->section('content') ?>
<?php
function singkat_angka($n, $presisi=1) {
    if ($n < 900) {
        $format_angka = number_format($n, $presisi);
        $simbol = '';
    } else if ($n < 900000) {
        $format_angka = number_format($n / 1000, $presisi);
        $simbol = 'rb';
    } else if ($n < 900000000) {
        $format_angka = number_format($n / 1000000, $presisi);
        $simbol = 'jt';
    } else if ($n < 900000000000) {
        $format_angka = number_format($n / 1000000000, $presisi);
        $simbol = 'M';
    } else {
        $format_angka = number_format($n / 1000000000000, $presisi);
        $simbol = 'T';
    }
 
    if ( $presisi > 0 ) {
        $pisah = '.' . str_repeat( '0', $presisi );
        $format_angka = str_replace( $pisah, '', $format_angka );
    }
    
    return $format_angka . $simbol;
}
?>
<main id="main" style="padding-top: 100px; padding-bottom: 80px;">
    
    <section class="container mt-4">
        
        <div class="text-center mb-5">
            <div class="badge-title mb-2">🍽️ DAFTAR MENU KAMI</div>
            <h1 class="neo-page-title"><?= $jenis['jenis']?></h1>
        </div>
          
        <div class="row align-items-stretch" id="datanya">
            </div>

</section>

</main>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    // Format desimal
    function currencyFormat(num) {
        return Number(num).toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
    }

// Function tambah like
    function ubahdata(x) {
        $.ajax({
            type: 'POST',
            data: 'id_menu=' + x,
            url: '<?php echo base_url() . '/makanan/ambilnama' ?>',
            dataType: 'JSON',
            success: function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Mantap! Makasih Likenya 🔥',
                    showConfirmButton: false,
                    timer: 1200,
                    background: '#FDF4E3', // Warna neo-bg
                    color: '#181818',
                    backdrop: `rgba(0,0,0,0.4)`
                }).then(function() {
                    ambil_data(); // Reload data
                });
            }
        });
    }

// Auto load data
    ambil_data();

// Ambil datanya dan render ke HTML
    function ambil_data() {
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url() . "/makanan/tampil/" . $segment ?>',
            dataType: 'json',
            success: function(data) {
                var baris = '';
                
                // Array warna agar tampilan card variatif
                var colors = ['var(--neo-yellow)', 'var(--neo-pink)', 'var(--neo-blue)', 'var(--neo-white)'];

for (var i = 0; i < data.length; i++) {
                    var bgColor = colors[i % colors.length]; // Rotasi warna

baris += '<div class="col-lg-3 col-md-4 col-sm-6 col-6 mb-4">' +
                                '<div class="neo-card" style="background-color: ' + bgColor + ';">' +
                                    '<img class="neo-card-img" src="http://mienyinyir.com/pos/gambar/' + data[i].gambar + '" alt="' + data[i].nama_menu + '">' +
                                    '<div class="neo-card-body">' +
                                        '<h3 class="neo-title-menu">' + data[i].nama_menu + '</h3>' +
                                        '<div class="neo-price">Rp ' + currencyFormat(data[i].harga) + '</div>' +
                                        
                                        '<div class="mt-auto d-flex justify-content-between align-items-center flex-wrap gap-2">' +
                                            '<button type="button" onclick="ubahdata(' + data[i].id_menu + ')" class="neo-like-btn">' +
                                                '<i class="fa fa-heart" style="color:var(--neo-red);"></i> Suka' +
                                            '</button>' +
                                            '<span class="like-count">' + currencyFormat(data[i].likes) + ' <i class="fa fa-heart text-danger"></i></span>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                             '</div>';
                }
                $('#datanya').html(baris);
            }
        });
    }
</script>
<?= $this->endSection() ?>

Batal

⬅ Views 2 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 allproduk.php	php	16.7 KB	25/02/26 11:29	0644	✏️ ⬇
🐘 index.php	php	8.3 KB	25/02/26 10:44	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission