What is Database? – Database Management System (DBMS)

❓What is Database

A database is an organized collection of data stored electronically.
It allows users and applications to easily access, update, and manipulate information.
This data contains text, numbers, images, videos and more.
Databases are fundamental to modern computing
Supports various applications from online shopping platforms to social media networks.
It is widely used in business, government, healthcare, and many other sectors
It manages data, enables informed decision-making and efficient operations.
To make real use Data, we need Database management systems. (DBMS)

<div class="infographic-dbba" id="dbbaWrap">
  <style>
    .infographic-dbba {
      --ink:        #1a1a1a;
      --ink-soft:   #5c5c5c;
      --paper:      #ffffff;
      --paper-alt:  #f6f3ee;
      --accent:     #2563eb;
      --accent-soft:#e3ebfd;
      --line:       #ddd6c9;
      --before-bg:  #fdece0;
      --before-ink: #b45309;
      --after-bg:   #dcf3e8;
      --after-ink:  #0f766e;

      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding: 2.5rem 1.5rem 2.75rem;
      border-radius: 14px;
      box-sizing: border-box;
      max-width: 720px;
      margin: 0 auto;
    }
    .infographic-dbba[data-theme="dark"] {
      --ink:        #e8e6e1;
      --ink-soft:   #9a968c;
      --paper:      #121212;
      --paper-alt:  #1e1e26;
      --accent:     #5b8def;
      --accent-soft:#202942;
      --line:       #2c313d;
      --before-bg:  #3a2a1c;
      --before-ink: #f0a95a;
      --after-bg:   #17332b;
      --after-ink:  #6bcfb9;
    }
    .infographic-dbba * { box-sizing: border-box; }

    .dbba-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--accent); font-weight: 700; margin: 0 0 0.4rem; text-align: center;
    }
    .dbba-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.6rem; text-align: center; letter-spacing: -0.01em; }

    .dbba-stage {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 60px 0;
    }

    .flip-card { perspective: 900px; height: 130px; }
    .flip-card-inner {
      position: relative; width: 100%; height: 100%;
      transition: transform .6s; transform-style: preserve-3d;
      cursor: pointer; border-radius: 12px;
    }
    .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

    .flip-face {
      position: absolute; inset: 0; backface-visibility: hidden;
      border-radius: 12px; padding: 0.9rem 1rem;
      display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
    }
    .flip-front { background: var(--before-bg); }
    .flip-back { background: var(--after-bg); transform: rotateY(180deg); }

    .flip-icon { font-size: 1.5rem; line-height: 1; }
    .flip-front .flip-icon, .flip-front .flip-label { color: var(--before-ink); }
    .flip-back .flip-icon, .flip-back .flip-label { color: var(--after-ink); }
    .flip-tag {
      font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
      opacity: 0.75;
    }
    .flip-front .flip-tag { color: var(--before-ink); }
    .flip-back .flip-tag { color: var(--after-ink); }
    .flip-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.25; }

    /* Right-column cards: mirror the content to the right edge */
    .flip-card:nth-child(2n) .flip-face {
      align-items: flex-end;
      text-align: right;
    }

    .dbba-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 132px; height: 132px; border-radius: 50%;
      background: var(--paper); border: 1px solid var(--line);
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.3rem; text-align: center; z-index: 2;
    }
    .dbba-center-icon { font-size: 1.6rem; }
    .dbba-center-label { font-size: 0.85rem; font-weight: 700; line-height: 1.2; transition: color .3s; }
    .dbba-center-label.state-before { color: var(--before-ink); }
    .dbba-center-label.state-after { color: var(--after-ink); }

    .dbba-controls { display: flex; justify-content: center; margin-top: 1.4rem; }
    .dbba-toggle-btn {
      font: inherit; font-weight: 600; font-size: 0.88rem;
      background: var(--accent); color: var(--paper);
      border: none; border-radius: 8px; padding: 0.65rem 1.3rem; cursor: pointer;
      transition: opacity .15s;
    }
    .infographic-dbba[data-theme="dark"] .dbba-toggle-btn { color: #0c0c0c; }
    .dbba-toggle-btn:hover { opacity: 0.88; }

    .dbba-hint { text-align: center; font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.6rem; }

    @media (max-width: 560px) {
      .dbba-stage {
        display: flex; flex-direction: column; align-items: center;
        padding: 0; gap: 12px;
      }
      .flip-card { height: 100px; width: 100%; }
      .dbba-center {
        position: static; transform: none; order: -1;
        width: 112px; height: 112px; margin-bottom: 6px;
      }
      .flip-card:nth-child(2n) .flip-face {
        align-items: flex-start;
        text-align: left;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .infographic-dbba *, .infographic-dbba *::before, .infographic-dbba *::after {
        transition-duration: 0.001ms !important;
      }
    }
  </style>

  <p class="dbba-eyebrow">Data Storage, Then &amp; Now</p>
  <h2 class="dbba-title">Life Before vs. After Databases</h2>

  <div class="dbba-stage" id="dbbaStage">
    <div class="dbba-center" id="dbbaCenter">
      <div class="dbba-center-icon">🗄</div>
      <div class="dbba-center-label state-before" id="dbbaCenterLabel">Before<br>Database</div>
    </div>
  </div>

  <div class="dbba-controls">
    <button class="dbba-toggle-btn" id="dbbaToggleBtn" type="button">🔄 Show: After Database</button>
  </div>
  <p class="dbba-hint">Click any card to flip it, or use the button to flip all four at once.</p>
</div>

<script>
(function () {
  var wrapper = document.getElementById('dbbaWrap');

  // Dark mode detection — body attribute wins, then cookie, then light default
  var bodyAttr = document.body.getAttribute('data-darkmode');
  var dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');

  var pairs = [
    { icon: '⚙', before: 'Manual Management', after: 'Efficient Management' },
    { icon: '▤', before: 'Data Overload', after: 'Prevents Overload' },
    { icon: '⏱', before: 'Slow Data Access', after: 'Quick Retrieval' },
    { icon: '▣', before: 'Limited Storage', after: 'Scalable Storage' }
  ];

  var stage = document.getElementById('dbbaStage');
  var center = document.getElementById('dbbaCenter');
  var cards = [];

  pairs.forEach(function (p) {
    var card = document.createElement('div');
    card.className = 'flip-card';
    card.innerHTML =
      '<div class="flip-card-inner">' +
        '<div class="flip-face flip-front">' +
          '<div class="flip-icon">' + p.icon + '</div>' +
          '<div class="flip-tag">Before</div>' +
          '<div class="flip-title">' + p.before + '</div>' +
        '</div>' +
        '<div class="flip-face flip-back">' +
          '<div class="flip-icon">' + p.icon + '</div>' +
          '<div class="flip-tag">After</div>' +
          '<div class="flip-title">' + p.after + '</div>' +
        '</div>' +
      '</div>';
    card.addEventListener('click', function () {
      card.classList.toggle('is-flipped');
    });
    stage.insertBefore(card, center);
    cards.push(card);
  });
  // Re-append center last so it stacks visually above/between the cards
  stage.appendChild(center);

  var centerLabel = document.getElementById('dbbaCenterLabel');
  var toggleBtn = document.getElementById('dbbaToggleBtn');
  var allAfter = false;

  toggleBtn.addEventListener('click', function () {
    allAfter = !allAfter;
    cards.forEach(function (card) {
      card.classList.toggle('is-flipped', allAfter);
    });
    if (allAfter) {
      centerLabel.innerHTML = 'After<br>Database';
      centerLabel.classList.remove('state-before');
      centerLabel.classList.add('state-after');
      toggleBtn.textContent = '🔄 Show: Before Database';
    } else {
      centerLabel.innerHTML = 'Before<br>Database';
      centerLabel.classList.remove('state-after');
      centerLabel.classList.add('state-before');
      toggleBtn.textContent = '🔄 Show: After Database';
    }
  });
})();
</script>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});