.. judul: Pembuat & Penjelasan Ekspresi Cron
.. slug: pembuat ekspresi cron
.. tanggal: 27-03-2026 12:00:00 UTC
.. tag: linux, cron, sysadmin, penjadwal, kalkulator, alat
.. kategori: Kalkulator
..tautan:
.. deskripsi: Membangun ekspresi cron secara interaktif. Pratinjau 10 waktu berjalan berikutnya, dapatkan penjelasan yang dapat dibaca manusia untuk setiap bidang, dan cari makro bernama seperti @daily dan @weekly.
.. ketik: teks
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { margin-bottom: 8px; font-weight: 600; color: rgba(255,255,255,0.95); font-size: 14px; }
.input-group input, .input-group select, .input-group textarea { padding: 14px; font-size: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.button-container { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-button { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.calc-button:hover  { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.calc-button:active { background: #3d8b40; transform: translateY(0); }
.calc-button.secondary { background: rgba(255,255,255,0.2); }
.calc-button.secondary:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
table { width: 100%; border-collapse: collapse; }
th { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 10px; text-align: left; }
td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
tr:hover td { background: #f8fff8; }
@media (max-width: 768px) { .input-grid { grid-template-columns: 1fr; } .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* Page-specific */
.fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
.cron-display { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #4CAF50; background: rgba(0,0,0,0.15); padding: 12px 18px; border-radius: 6px; margin-top: 12px; letter-spacing: 2px; text-align: center; }
.next-run-list { list-style: none; padding: 0; margin: 0; }
.next-run-list li { padding: 6px 0; border-bottom: 1px solid #eee; font-family: 'Courier New', monospace; font-size: 13px; }

/* Legacy class compatibility */
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.btn-sm { padding: 5px 12px; font-size: 12px; background: rgba(255,255,255,0.2); border: none; border-radius: 4px; color: white; cursor: pointer; margin: 2px; transition: all 0.3s ease; }
.btn-sm:hover { background: rgba(255,255,255,0.3); }
code { background: #f0f0f0; padding: 2px 5px; border-radius: 3px; font-family: monospace; }
.field-explain { display: flex; gap: 8px; margin: 4px 0; }
.field-label { font-weight: bold; width: 80px; color: #333; flex-shrink: 0; }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>Pembuat &amp; Penjelasan Ekspresi Cron</h2>
<p>Buat ekspresi cron dengan dropdown atau ketikkan ekspresi mentah untuk memecahkan kodenya.</p>
<div class="fields-grid">
<div class="input-group">
<label>Menit</label>
<input id="fMin" oninput="syncFields()" placeholder="0-59, *, */n" type="text" value="*"/>
</div>
<div class="input-group">
<label>Jam</label>
<input id="fHour" oninput="syncFields()" placeholder="0-23, *, */n" type="text" value="*"/>
</div>
<div class="input-group">
<label>Hari dalam Bulan</label>
<input id="fDom" oninput="syncFields()" placeholder="1-31, *, */n" type="text" value="*"/>
</div>
<div class="input-group">
<label>Bulan</label>
<input id="fMon" oninput="syncFields()" placeholder="1-12 or JAN-DEC" type="text" value="*"/>
</div>
<div class="input-group">
<label>Hari dalam Seminggu</label>
<input id="fDow" oninput="syncFields()" placeholder="0-7 or SUN-SAT" type="text" value="*"/>
</div>
</div>
<div class="cron-display" id="cronDisplay">* * * * *</div>
<div class="button-container">
<button class="calc-button" onclick="explainCron()">Jelaskan Ekspresi</button>
<button class="calc-button secondary" onclick="calcNextRuns()">Tampilkan 5 Proses Berikutnya</button>
</div>
</div>
<div class="presets" style="margin-bottom: 20px;">
<strong style="margin-right:4px;align-self:center">Preset cepat:</strong>
<button class="btn-sm" onclick="setPreset('@hourly')">@per jam</button>
<button class="btn-sm" onclick="setPreset('@daily')">@sehari-hari</button>
<button class="btn-sm" onclick="setPreset('@weekly')">@mingguan</button>
<button class="btn-sm" onclick="setPreset('@monthly')">@bulanan</button>
<button class="btn-sm" onclick="setPreset('*/5 * * * *')">setiap 5 menit</button>
<button class="btn-sm" onclick="setPreset('0 9 * * 1-5')">jam 9 pagi hari kerja</button>
<button class="btn-sm" onclick="setPreset('0 2 * * 0')">jam 02.00 hari Minggu</button>
<button class="btn-sm" onclick="setPreset('30 23 L * *')">23:30 hari terakhir</button>
</div>
<div class="input-group" style="margin-bottom:20px">
<label>Atau tempelkan ekspresi lengkap:</label>
<input id="fullExpr" oninput="parseFullExpr()" placeholder="e.g. 0 9 * * 1-5" type="text"/>
</div>
<div class="result-section" id="explanationSection" style="display:none">
<div class="section-header">Penjelasan Ekspresi</div>
<div class="section-content" id="explanationContent"></div>
</div>
<div class="result-section" id="nextRunSection" style="display:none">
<div class="section-header">Jadwal Berjalan Berikutnya</div>
<div class="section-content">
<ul class="next-run-list" id="nextRunList"></ul>
</div>
</div>
<div class="result-section">
<div class="section-header">Dinamakan Referensi Makro</div>
<div class="section-content">
<table>
<tr><th>Makro</th><th>Setara</th><th>Keterangan</th></tr>
<tr><td><code>@reboot</code></td><td>—</td><td>Jalankan sekali saat startup</td></tr>
<tr><td><code>@yearly / @annually</code></td><td><code>0 0 1 1 *</code></td><td>Setahun sekali, tengah malam tanggal 1 Januari</td></tr>
<tr><td><code>@monthly</code></td><td><code>0 0 1 * *</code></td><td>Sebulan sekali, tengah malam tanggal 1</td></tr>
<tr><td><code>@weekly</code></td><td><code>0 0 * * 0</code></td><td>Seminggu sekali, Minggu tengah malam</td></tr>
<tr><td><code>@daily / @midnight</code></td><td><code>0 0 * * *</code></td><td>Sekali sehari pada tengah malam</td></tr>
<tr><td><code>@hourly</code></td><td><code>0 * * * *</code></td><td>Satu jam sekali, pada :00</td></tr>
</table>
</div>
</div>
</div>
<script>
const MACROS = {
    '@reboot': null,
    '@yearly': '0 0 1 1 *', '@annually': '0 0 1 1 *',
    '@monthly': '0 0 1 * *',
    '@weekly': '0 0 * * 0',
    '@daily': '0 0 * * *', '@midnight': '0 0 * * *',
    '@hourly': '0 * * * *',
};

const MONTH_NAMES = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
const DOW_NAMES = ['SUN','MON','TUE','WED','THU','FRI','SAT'];

function setPreset(expr) {
    const resolved = MACROS[expr] || expr;
    if (!resolved) { alert('@reboot cannot be previewed — runs at system startup only.'); return; }
    document.getElementById('fullExpr').value = expr;
    const parts = resolved.split(' ');
    if (parts.length === 5) {
        document.getElementById('fMin').value = parts[0];
        document.getElementById('fHour').value = parts[1];
        document.getElementById('fDom').value = parts[2];
        document.getElementById('fMon').value = parts[3];
        document.getElementById('fDow').value = parts[4];
        syncFields();
    }
    calculate();
}

function syncFields() {
    const min = document.getElementById('fMin').value;
    const hour = document.getElementById('fHour').value;
    const dom = document.getElementById('fDom').value;
    const mon = document.getElementById('fMon').value;
    const dow = document.getElementById('fDow').value;
    document.getElementById('cronDisplay').textContent = `${min} ${hour} ${dom} ${mon} ${dow}`;
}

function parseFullExpr() {
    const expr = document.getElementById('fullExpr').value.trim();
    const resolved = MACROS[expr.toLowerCase()] || expr;
    if (!resolved) return;
    const parts = resolved.split(/\s+/);
    if (parts.length === 5) {
        document.getElementById('fMin').value = parts[0];
        document.getElementById('fHour').value = parts[1];
        document.getElementById('fDom').value = parts[2];
        document.getElementById('fMon').value = parts[3];
        document.getElementById('fDow').value = parts[4];
        syncFields();
    }
}

function expandField(val, min, max, names) {
    val = val.trim().toUpperCase();
    if (names) {
        names.forEach((name, i) => { val = val.replace(new RegExp(name, 'g'), String(i + (min === 0 ? 0 : 1))); });
    }
    const result = new Set();
    const parts = val.split(',');
    for (const part of parts) {
        if (part === '*' || part === '?') {
            for (let i = min; i <= max; i++) result.add(i);
        } else if (part.startsWith('*/')) {
            const step = parseInt(part.slice(2));
            if (!isNaN(step) && step > 0) for (let i = min; i <= max; i += step) result.add(i);
        } else if (part.includes('/')) {
            const [range, step] = part.split('/');
            const s = parseInt(step);
            const [a, b] = range.includes('-') ? range.split('-').map(Number) : [parseInt(range), max];
            if (!isNaN(s) && s > 0) for (let i = a; i <= b; i += s) result.add(i);
        } else if (part.includes('-')) {
            const [a, b] = part.split('-').map(Number);
            if (!isNaN(a) && !isNaN(b)) for (let i = a; i <= b; i++) result.add(i);
        } else if (part === 'L') {
            result.add('L');
        } else {
            const n = parseInt(part);
            if (!isNaN(n)) result.add(n);
        }
    }
    return result;
}

function getNextRuns(min, hour, dom, mon, dow, count) {
    const mins = expandField(min, 0, 59, null);
    const hours = expandField(hour, 0, 23, null);
    const mons = expandField(mon, 1, 12, MONTH_NAMES);
    const dows = expandField(dow, 0, 6, DOW_NAMES);
    const hasL = dom.trim().toUpperCase() === 'L';

    const runs = [];
    const now = new Date();
    now.setSeconds(0, 0);
    now.setMinutes(now.getMinutes() + 1); // start from next minute

    let dt = new Date(now);
    let iterations = 0;
    while (runs.length < count && iterations < 525960) { // max 1 year of minutes
        iterations++;
        const dtMon = dt.getMonth() + 1;
        const dtDow = dt.getDay();
        const dtDom = dt.getDate();
        const dtHour = dt.getHours();
        const dtMin = dt.getMinutes();
        const lastDay = new Date(dt.getFullYear(), dtMon, 0).getDate();

        if (!mons.has(dtMon)) { dt.setMonth(dt.getMonth() + 1); dt.setDate(1); dt.setHours(0, 0, 0, 0); continue; }
        const domOk = hasL ? dtDom === lastDay : dom.trim() === '*' || dom.trim() === '?' ? true : expandField(dom, 1, 31, null).has(dtDom);
        const dowOk = dow.trim() === '*' || dow.trim() === '?' ? true : dows.has(dtDow) || dows.has(dtDow === 0 ? 7 : dtDow);
        if (!domOk && !dowOk) { dt.setDate(dt.getDate() + 1); dt.setHours(0, 0, 0, 0); continue; }
        if (!hours.has(dtHour)) { dt.setHours(dt.getHours() + 1, 0, 0, 0); continue; }
        if (!mins.has(dtMin)) { dt.setMinutes(dt.getMinutes() + 1, 0, 0); continue; }
        runs.push(new Date(dt));
        dt.setMinutes(dt.getMinutes() + 1, 0, 0);
    }
    return runs;
}

function explainField(val, name, units) {
    val = val.trim();
    if (val === '*') return `Every ${units}`;
    if (val.startsWith('*/')) return `Every ${val.slice(2)} ${units}s`;
    if (val.includes('-') && !val.includes('/')) return `${name} ${val} (range)`;
    if (val.includes(',')) return `${name}s: ${val}`;
    return `${name} ${val}`;
}

function explainCron() {
    const min = document.getElementById('fMin').value;
    const hour = document.getElementById('fHour').value;
    const dom = document.getElementById('fDom').value;
    const mon = document.getElementById('fMon').value;
    const dow = document.getElementById('fDow').value;
    const section = document.getElementById('explanationSection');
    const content = document.getElementById('explanationContent');

    try {
        content.innerHTML = `
        <div class="field-explain"><span class="field-label">Minute:</span><span>${explainField(min, 'Minute', 'minute')}</span></div>
        <div class="field-explain"><span class="field-label">Hour:</span><span>${explainField(hour, 'Hour', 'hour')}</span></div>
        <div class="field-explain"><span class="field-label">Day/Month:</span><span>${dom.trim().toUpperCase() === 'L' ? 'Last day of month' : explainField(dom, 'Day', 'day')}</span></div>
        <div class="field-explain"><span class="field-label">Month:</span><span>${explainField(mon, 'Month', 'month')}</span></div>
        <div class="field-explain"><span class="field-label">Day/Week:</span><span>${explainField(dow, 'Weekday', 'weekday')}</span></div>
        `;
        section.style.display = 'block';
    } catch(e) {
        content.innerHTML = `<strong style="color:red">Parse error: ${e.message}</strong>`;
        section.style.display = 'block';
    }
}

function calcNextRuns() {
    const min = document.getElementById('fMin').value;
    const hour = document.getElementById('fHour').value;
    const dom = document.getElementById('fDom').value;
    const mon = document.getElementById('fMon').value;
    const dow = document.getElementById('fDow').value;
    const section = document.getElementById('nextRunSection');
    const list = document.getElementById('nextRunList');

    let runs;
    try { runs = getNextRuns(min, hour, dom, mon, dow, 5); }
    catch(e) {
        list.innerHTML = `<li style="color:red">Parse error: ${e.message}</li>`;
        section.style.display = 'block';
        return;
    }

    if (!runs.length) {
        list.innerHTML = '<li style="color:red">No future run times found. Check your expression — it may never match.</li>';
        section.style.display = 'block';
        return;
    }

    const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    const timeItems = runs.map(d => {
        const pad = n => String(n).padStart(2,'0');
        return `<li>${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${days[d.getDay()]} ${pad(d.getHours())}:${pad(d.getMinutes())}</li>`;
    });
    list.innerHTML = timeItems.join('');
    section.style.display = 'block';
}

// Init display
syncFields();
</script>