Dwi Al-Ikhs

Pengantar Struktur Data

Materi

Praktikum

Silahkan gunakan editor Visual Studio Code atau Notepad++dan Xampp

Fifo.php 
<?php
session_start();

// Inisialisasi queue di session
if (!isset($_SESSION['queue'])) {
    $_SESSION['queue'] = [];
}

// Fungsi enqueue
if (isset($_POST['enqueue'])) {
    $val = trim($_POST['value']);
    if ($val !== '') {
        $_SESSION['queue'][] = $val;
    }
}

// Fungsi dequeue
if (isset($_POST['dequeue'])) {
    if (!empty($_SESSION['queue'])) {
        array_shift($_SESSION['queue']); // ambil elemen pertama
    }
}

// Fungsi clear
if (isset($_POST['clear'])) {
    $_SESSION['queue'] = [];
}

$queue = $_SESSION['queue'];
?>
<!doctype html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Visualisasi Queue (FIFO) dengan PHP</title>
  <style>
    body{font-family: Arial, sans-serif; padding:20px; background:#f7f9fc;}
    h1{font-size:20px;}
    form{margin-bottom:20px;}
    input[type=text]{padding:6px; border:1px solid #ccc; border-radius:4px;}
    button{padding:6px 12px; border:0; border-radius:4px; margin:4px; cursor:pointer;}
    .enqueue{background:#2b6ef6; color:white;}
    .dequeue{background:#f57c00; color:white;}
    .clear{background:#b71c1c; color:white;}
    .queue-box{display:flex; gap:10px; border:2px dashed #ccc; padding:12px; border-radius:8px; background:white; min-height:60px; align-items:center;}
    .item{padding:10px 14px; background:#eef6ff; border-radius:6px; font-weight:bold;}
    .front{border:2px solid #4caf50;}
    .rear{border:2px solid #f57c00;}
  </style>
</head>
<body>

<h1>Visualisasi Queue (FIFO) dengan PHP</h1>

<form method="post">
  <input type="text" name="value" placeholder="Masukkan nilai..." />
  <button type="submit" name="enqueue" class="enqueue">Enqueue</button>
  <button type="submit" name="dequeue" class="dequeue">Dequeue</button>
  <button type="submit" name="clear" class="clear">Clear</button>
</form>

<div class="queue-box">
  <?php if (empty($queue)): ?>
    <em>Queue kosong</em>
  <?php else: ?>
    <?php foreach ($queue as $i => $val): ?>
      <div class="item <?php echo $i === 0 ? 'front' : ($i === count($queue)-1 ? 'rear' : ''); ?>">
        <?php echo htmlspecialchars($val); ?>
      </div>
    <?php endforeach; ?>
  <?php endif; ?>
</div>

<p>Ukuran queue: <strong><?php echo count($queue); ?></strong></p>

</body>
</html>
LinearSearch.php 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Perbandingan Linear Search JS vs PHP</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>Perbandingan Waktu Eksekusi Linear Search (JS vs PHP)</h2>
<canvas id="myChart" width="600" height="400"></canvas>
<pre id="output"></pre>

<script>
function linearSearch(arr, target) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
}

function testLinearSearchJS(size, target) {
  let arr = Array.from({length: size}, (_, i) => i + 1);
  let start = performance.now();
  let result = linearSearch(arr, target);
  let end = performance.now();
  return (end - start);
}

// Uji di JS
let jsTimes = [
  testLinearSearchJS(100, 100),
  testLinearSearchJS(1000, 1000),
  testLinearSearchJS(10000, 10000)
];

// -------------------
// Masukkan hasil PHP dari script linearSearch.php (jalankan di server lokal)
// Contoh hasil (bisa kamu update manual sesuai mesinmu):
let phpTimes = [
  0.02,   // waktu PHP untuk 100 elemen
  0.05,   // waktu PHP untuk 1000 elemen
  0.35    // waktu PHP untuk 10000 elemen
];
// -------------------

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['100', '1000', '10000'],
    datasets: [
      {
        label: 'JavaScript',
        data: jsTimes,
        backgroundColor: 'rgba(54, 162, 235, 0.6)'
      },
      {
        label: 'PHP',
        data: phpTimes,
        backgroundColor: 'rgba(255, 99, 132, 0.6)'
      }
    ]
  },
  options: {
    responsive: false,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Waktu Eksekusi (ms)'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Jumlah Elemen'
        }
      }
    }
  }
});
</script>
</body>
</html>
Stack_Queue.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Stack (LIFO) vs Queue (FIFO)</title>
  <style>
    :root{font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
    body{padding:2rem;background:#f4f6fb;color:#0b2545}
    h1{font-size:22px;margin-bottom:1rem;text-align:center}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
    .panel{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(12,34,64,0.08);display:flex;flex-direction:column}
    h2{font-size:18px;margin:0 0 10px}
    label{display:block;margin-top:10px;font-size:13px;color:#3b4b66}
    input[type=text]{width:100%;padding:10px;border-radius:8px;border:1px solid #e1e6ef;margin-top:6px}
    button{margin-top:10px;padding:8px 12px;border-radius:8px;border:0;background:#2b6ef6;color:white;cursor:pointer;font-size:13px}
    button.secondary{background:#f3f6ff;color:#1b3a8a}
    .stack-box{height:260px;border:2px dashed #e6eefb;border-radius:8px;padding:12px;display:flex;flex-direction:column-reverse;overflow:auto}
    .stack-item{padding:10px;border-radius:8px;background:linear-gradient(180deg,#eef6ff,#ffffff);margin:4px 0;font-weight:600;display:flex;justify-content:space-between}
    .queue-box{height:120px;border:2px dashed #e6eefb;border-radius:8px;padding:12px;display:flex;align-items:center;overflow-x:auto;gap:10px}
    .queue-item{padding:10px 14px;border-radius:8px;background:linear-gradient(180deg,#eef6ff,#ffffff);font-weight:600;flex-shrink:0}
    .meta{margin-top:12px;font-size:13px;color:#41506a}
    .log{margin-top:12px;background:#0b1220;color:#eaf0ff;padding:8px;border-radius:8px;height:90px;overflow:auto;font-family:monospace;font-size:12px}
    .small{font-size:12px;color:#5b6a86}
  </style>
</head>
<body>
  <h1>Perbandingan Stack (LIFO) vs Queue (FIFO)</h1>
  <div class="grid">
    <!-- STACK PANEL -->
    <div class="panel" id="stackPanel">
      <h2>Stack (LIFO)</h2>
      <label for="stackValue">Nilai:</label>
      <input id="stackValue" type="text" placeholder="Masukkan nilai..." />
      <div style="display:flex;gap:6px;flex-wrap:wrap">
        <button id="stackPush">Push</button>
        <button id="stackPop" class="secondary">Pop</button>
        <button id="stackPeek" class="secondary">Peek</button>
        <button id="stackClear" class="secondary">Clear</button>
      </div>
      <div class="meta">
        <div>Ukuran: <span id="stackSize">0</span></div>
        <div>Keadaan: <span id="stackState">Kosong</span></div>
      </div>
      <div class="stack-box" id="stackBox"></div>
      <div class="log" id="stackLog"></div>
    </div>

    <!-- QUEUE PANEL -->
    <div class="panel" id="queuePanel">
      <h2>Queue (FIFO)</h2>
      <label for="queueValue">Nilai:</label>
      <input id="queueValue" type="text" placeholder="Masukkan nilai..." />
      <div style="display:flex;gap:6px;flex-wrap:wrap">
        <button id="enqueue">Enqueue</button>
        <button id="dequeue" class="secondary">Dequeue</button>
        <button id="frontBtn" class="secondary">Front</button>
        <button id="rearBtn" class="secondary">Rear</button>
        <button id="queueClear" class="secondary">Clear</button>
      </div>
      <div class="meta">
        <div>Ukuran: <span id="queueSize">0</span></div>
        <div>Keadaan: <span id="queueState">Kosong</span></div>
      </div>
      <div class="queue-box" id="queueBox"></div>
      <div class="log" id="queueLog"></div>
    </div>
  </div>

<script>
  // Stack class
  class Stack {
    constructor(){ this.items=[]; }
    push(e){this.items.push(e)}
    pop(){return this.items.length===0?null:this.items.pop()}
    peek(){return this.items.length===0?null:this.items[this.items.length-1]}
    size(){return this.items.length}
    isEmpty(){return this.items.length===0}
    clear(){this.items=[]}
  }
  // Queue class
  class Queue {
    constructor(){ this.items=[]; }
    enqueue(e){this.items.push(e)}
    dequeue(){return this.items.length===0?null:this.items.shift()}
    front(){return this.items.length===0?null:this.items[0]}
    rear(){return this.items.length===0?null:this.items[this.items.length-1]}
    size(){return this.items.length}
    isEmpty(){return this.items.length===0}
    clear(){this.items=[]}
  }

  // --- STACK logic ---
  const stack=new Stack();
  const stackBox=document.getElementById('stackBox');
  const stackSize=document.getElementById('stackSize');
  const stackState=document.getElementById('stackState');
  const stackLog=document.getElementById('stackLog');

  function renderStack(){
    stackBox.innerHTML='';
    stack.items.forEach((v,i)=>{
      const div=document.createElement('div');
      div.className='stack-item';
      div.textContent=v;
      if(i===stack.items.length-1){
        const badge=document.createElement('span');
        badge.textContent='TOP'; badge.style.fontSize='11px'; badge.style.opacity='0.6';
        div.appendChild(badge);
      }
      stackBox.appendChild(div);
    });
    stackSize.textContent=stack.size();
    stackState.textContent=stack.isEmpty()?"Kosong":"Ada isi";
  }
  function logStack(msg){const l=document.createElement('div');l.textContent=new Date().toLocaleTimeString()+" — "+msg;stackLog.prepend(l)}

  document.getElementById('stackPush').onclick=()=>{
    const val=document.getElementById('stackValue').value.trim();
    if(val===''){alert('Masukkan nilai!');return;}
    stack.push(val);renderStack();logStack('push('+val+')');document.getElementById('stackValue').value='';
  }
  document.getElementById('stackPop').onclick=()=>{const p=stack.pop();if(p===null){alert('Kosong');logStack('pop() gagal');}else{renderStack();logStack('pop() -> '+p)}}
  document.getElementById('stackPeek').onclick=()=>{const p=stack.peek();if(p===null){alert('Kosong');logStack('peek() kosong');}else{alert('Peek: '+p);logStack('peek() -> '+p)}}
  document.getElementById('stackClear').onclick=()=>{stack.clear();renderStack();logStack('clear()')}

  // --- QUEUE logic ---
  const queue=new Queue();
  const queueBox=document.getElementById('queueBox');
  const queueSize=document.getElementById('queueSize');
  const queueState=document.getElementById('queueState');
  const queueLog=document.getElementById('queueLog');

  function renderQueue(){
    queueBox.innerHTML='';
    queue.items.forEach((v,i)=>{
      const div=document.createElement('div');
      div.className='queue-item';
      div.textContent=v;
      if(i===0){div.style.border='2px solid #4caf50';div.title='Front'}
      if(i===queue.items.length-1){div.style.border='2px solid #f57c00';div.title='Rear'}
      queueBox.appendChild(div);
    });
    queueSize.textContent=queue.size();
    queueState.textContent=queue.isEmpty()?"Kosong":"Ada isi";
  }
  function logQueue(msg){const l=document.createElement('div');l.textContent=new Date().toLocaleTimeString()+" — "+msg;queueLog.prepend(l)}

  document.getElementById('enqueue').onclick=()=>{
    const val=document.getElementById('queueValue').value.trim();
    if(val===''){alert('Masukkan nilai!');return;}
    queue.enqueue(val);renderQueue();logQueue('enqueue('+val+')');document.getElementById('queueValue').value='';
  }
  document.getElementById('dequeue').onclick=()=>{const d=queue.dequeue();if(d===null){alert('Kosong');logQueue('dequeue() gagal');}else{renderQueue();logQueue('dequeue() -> '+d)}}
  document.getElementById('frontBtn').onclick=()=>{const f=queue.front();if(f===null){alert('Kosong');logQueue('front() kosong');}else{alert('Front: '+f);logQueue('front() -> '+f)}}
  document.getElementById('rearBtn').onclick=()=>{const r=queue.rear();if(r===null){alert('Kosong');logQueue('rear() kosong');}else{alert('Rear: '+r);logQueue('rear() -> '+r)}}
  document.getElementById('queueClear').onclick=()=>{queue.clear();renderQueue();logQueue('clear()')}

  // Inisialisasi
  ['10','20'].forEach(v=>stack.push(v));renderStack();logStack('init push 10,20');
  ['A','B','C'].forEach(v=>queue.enqueue(v));renderQueue();logQueue('init enqueue A,B,C');
</script>
</body>
</html>