Debian : Konfigurasi Web Server (Apache)

Apache2

Apa itu Apache web Server ?

Apache HTTP Server (sering disebut “Apache”) adalah software open-source yang berfungsi untuk menyajikan konten web (HTML, PHP, gambar, dll.) ke pengguna melalui protokol HTTP/HTTPS.

Dikembangkan oleh Apache Software Foundation, proyek ini sudah eksis sejak 1995 dan merupakan salah satu web server tertua serta paling berpengaruh dalam perkembangan internet.

Cara kerja Apache

• Client request: Browser mengirim permintaan HTTP ke server (misalnya GET /index.html).
• Apache menerima request melalui port (default: 80 untuk HTTP, 443 untuk HTTPS).
• Processing: Apache membaca konfigurasi (VirtualHost, modul, aturan keamanan).
• Response: Apache mengirim balik konten (HTML, JSON, file statis, atau hasil skrip PHP/Python/Perl melalui integrasi).

• Browser menampilkan hasil ke user.

Kelebihan Apache di bandingkan Web Server lainnya

• Stabil & matang: Teruji puluhan tahun, banyak dokumentasi dan komunitas.
• Modular: Bisa diaktifkan/disable modul sesuai kebutuhan (SSL, URL rewrite, autentikasi, dll.).
• Multi-platform: Bisa jalan di Linux, Windows, Unix, bahkan macOS.
• Konfigurasi fleksibel: .htaccess memungkinkan konfigurasi per-folder.
• Kompatibilitas luas: Bekerja baik dengan banyak bahasa pemrograman & CMS (WordPress, Drupal, Joomla).

Kekurangan Apache di bandingkan Web Server lainnya

• Lebih berat dibanding Nginx dalam melayani traffic besar (karena arsitektur berbasis process/thread per connection).
• Skalabilitas terbatas: Pada traffic sangat tinggi (puluhan ribu koneksi bersamaan), performanya menurun dibanding Nginx atau LiteSpeed.

• Konfigurasi kadang rumit: Fleksibilitas tinggi = rawan salah konfigurasi.

Posisi Apache di Dunia Web Server

• Tahun 2000-an → Apache mendominasi >60% website.
• Sekarang (2025) → Persaingannya ketat dengan Nginx, LiteSpeed, dan Caddy.
• Apache masih populer di shared hosting dan sistem legacy, sedangkan Nginx banyak dipakai untuk reverse proxy dan situs dengan traffic besar.

Kapan Apache Cocok Dipakai?

• Jika Anda butuh kompatibilitas tinggi dengan aplikasi lama/legacy.
• Jika ingin konfigurasi fleksibel (misalnya CMS dengan .htaccess).
• Untuk belajar dasar web server, karena konsepnya fundamental dan dokumentasinya sangat banyak.

Install Apache web server di Debian Server

Untuk menginstall Apache web server di Server Debian jalankan perintah berikut

apt install apache2 -y

Tunggu prosesnya hingga selesai. Setelah prosesnya selesai ketikkan perintah berikut untuk memeriksa apakah Apache sudah berjalan di server Debian

systemctl status apache2

Jika muncul seperti pada gambar di bawah ini, maka sudah di pastikan Apache sudah berjalan di Debian Server

Untuk lebih memastikan lagi, jalankan software browser seperti Google chrome, kemudian ketikkan alamat server debian, jika muncul halaman seperti pada gambar di bawah ini, maka Apache web server sudah berjalan di server debian.

Konfigurasi file hosts

Untuk mengkonfigurasi file hosts ketikkan perintah berikut ini

nano /etc/hosts

setelah file hosts terbuka ketikkan perintah berikut ini

192.168.200.248   smktkj.net

Sesuaikan ip address dan nama domain dengan server masing-masing, setelah di tambakkan simpan konfigurasi. dan hasilnya akan terlihat seperti pada gambar berikut ini

Membuat VirtualHost

Dalam satu server kita dapat menjalankan banyak domain/subdomain, di Apache konfigurasi ini disebut sebagai VirtualHost. sebagai contoh kita akan membuat domain dengan nama smktkj.net.

untuk membuat VirtualHost ketik kan perintah berikut ini

cd /etc/apache2/sites-available
nano domain1.conf

setelah file domain1.conf terbuka isi dengan baris konfigurasi seperti berikut ini

<VirtualHost *:80>
    ServerName smktkj.net
    DocumentRoot /var/www/smktkj.net
    <Directory /var/www/smktkj.net>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
    ErrorLog /var/log/apache2/linux.lan.error.log
    CustomLog /var/log/apache2/linux.lan.access.log combined
</VirtualHost>

Setelah file Virtualhost di buat tahap selanjutnya adalah meng-enable kan Virtualhost tersebut, untuk itu jalankan perintah berikut ini

a2dissite 000-default.conf
systemctl reload apache2
a2ensite domain1.conf
a2enmod rewrite
systemctl restart apache2 
systemctl status apache2

Membuat direktori/dokumen root

Untuk membuat dokumen root jalankan perintah berikut ini

cd /var/www
mkdir smktkj
cd smktkj
nano index.html

Kemudian akan terbuka file index.html. isikan script html seperti berikut ini

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portofolio Saya</title>
  <style>
    /* ====== RESET ====== */
    * {
      margin: 0; padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      line-height: 1.6;
      color: #333;
      background: #f9f9f9;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* ====== NAVBAR ====== */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      z-index: 1000;
    }
    nav {
      max-width: 1200px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
    }
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: #0077ff;
    }
    .nav-links {
      display: flex;
      gap: 1.5rem;
    }
    .nav-links a:hover {
      color: #0077ff;
    }
    .menu-toggle {
      display: none;
      font-size: 1.5rem;
      cursor: pointer;
    }

    /* ====== HERO ====== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 0 1rem;
      background: linear-gradient(to right, #0077ff, #00c6ff);
      color: white;
    }
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    .hero p {
      font-size: 1.2rem;
      max-width: 600px;
      margin-bottom: 2rem;
    }
    .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      background: white;
      color: #0077ff;
      font-weight: bold;
      transition: all 0.3s;
    }
    .btn:hover {
      background: #f0f0f0;
    }

    /* ====== ABOUT ====== */
    section {
      padding: 4rem 1rem;
      max-width: 1200px;
      margin: auto;
    }
    .about {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
      gap: 2rem;
      align-items: center;
    }
    .about img {
      width: 100%;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .about-text h2 {
      margin-bottom: 1rem;
      color: #0077ff;
    }

    /* ====== PORTFOLIO ====== */
    .portfolio h2 {
      text-align: center;
      margin-bottom: 2rem;
      color: #0077ff;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
      gap: 1.5rem;
    }
    .card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .card img {
      width: 100%;
      display: block;
    }
    .card:hover {
      transform: translateY(-5px);
    }
    .card-body {
      padding: 1rem;
    }
    .card-body h3 {
      margin-bottom: 0.5rem;
    }
    .card-body p {
      font-size: 0.9rem;
      color: #555;
    }

    /* ====== CONTACT ====== */
    .contact h2 {
      text-align: center;
      margin-bottom: 2rem;
      color: #0077ff;
    }
    form {
      max-width: 600px;
      margin: auto;
      display: grid;
      gap: 1rem;
    }
    input, textarea {
      padding: 0.8rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      outline: none;
      width: 100%;
    }
    input:focus, textarea:focus {
      border-color: #0077ff;
    }
    button {
      padding: 0.8rem;
      background: #0077ff;
      border: none;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }
    button:hover {
      background: #005fcc;
    }

    /* ====== FOOTER ====== */
    footer {
      text-align: center;
      padding: 2rem 1rem;
      background: #111;
      color: #aaa;
      margin-top: 3rem;
    }
    footer a {
      color: #0077ff;
    }

    /* ====== RESPONSIVE NAV ====== */
    @media(max-width: 768px) {
      .nav-links {
        position: absolute;
        top: 70px; right: 0;
        background: white;
        flex-direction: column;
        width: 200px;
        padding: 1rem;
        gap: 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        display: none;
      }
      .nav-links.active {
        display: flex;
      }
      .menu-toggle {
        display: block;
      }
    }
  </style>
</head>
<body>

  <!-- ====== HEADER ====== -->
  <header>
    <nav>
      <div class="logo">Portofolio</div>
      <div class="menu-toggle">&#9776;</div>
      <div class="nav-links">
        <a href="#hero">Beranda</a>
        <a href="#about">Tentang</a>
        <a href="#portfolio">Proyek</a>
        <a href="#contact">Kontak</a>
      </div>
    </nav>
  </header>

  <!-- ====== HERO ====== -->
  <section class="hero" id="hero">
    <h1>Halo, Saya Novy</h1>
    <p>Saya seorang Web Developer yang berfokus pada desain elegan, performa cepat, dan pengalaman pengguna yang optimal.</p>
    <a href="#portfolio" class="btn">Lihat Proyek</a>
  </section>

  <!-- ====== ABOUT ====== -->
  <section class="about" id="about">
    <img src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Foto Profil">
    <div class="about-text">
      <h2>Tentang Saya</h2>
      <p>
        Saya memiliki pengalaman dalam pengembangan web front-end dan back-end. 
        Terampil dalam HTML, CSS, JavaScript, serta framework modern. 
        Saya percaya setiap website harus intuitif, responsif, dan menyenangkan untuk digunakan.
      </p>
    </div>
  </section>

  <!-- ====== PORTFOLIO ====== -->
  <section class="portfolio" id="portfolio">
    <h2>Proyek Terbaru</h2>
    <div class="grid">
      <div class="card">
        <img src="https://marvel-b1-cdn.bc0a.com/f00000000100045/www.elmhurst.edu/wp-content/uploads/2018/12/5-skills-project-management-degree-elmhurst-college-infographic-thumb.jpg" alt="Project 1">
        <div class="card-body">
          <h3>Project 1</h3>
          <p>Website company profile modern dan responsif.</p>
        </div>
      </div>
      <div class="card">
        <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 2">
        <div class="card-body">
          <h3>Project 2</h3>
          <p>Aplikasi dashboard berbasis web dengan integrasi API.</p>
        </div>
      </div>
      <div class="card">
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 3">
        <div class="card-body">
          <h3>Project 3</h3>
          <p>Landing page elegan untuk promosi produk digital.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== CONTACT ====== -->
  <section class="contact" id="contact">
    <h2>Hubungi Saya</h2>
    <form id="contactForm">
      <input type="text" placeholder="Nama" required>
      <input type="email" placeholder="Email" required>
      <textarea rows="5" placeholder="Pesan" required></textarea>
      <button type="submit">Kirim Pesan</button>
    </form>
  </section>

  <!-- ====== FOOTER ====== -->
  <footer>
    <p>&copy; 2025 Portofolio Novy. Dibuat dengan ❤️. 
      <br><a href="#hero">Kembali ke atas</a></p>
  </footer>

  <!-- ====== SCRIPT ====== -->
  <script>
    // Toggle Menu Mobile
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    menuToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });

    // Form Handler (demo)
    const form = document.getElementById('contactForm');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      alert("Terima kasih! Pesan Anda telah terkirim.");
      form.reset();
    });
  </script>

</body>
</html>

Setelah semua di ketik, simpan dan keluar dengan seperti biasa.

Tahap selanjutnya silahkan di buka kembali sotware browsernya, bisa google chrome atau yang lainnya, kemudian ketikkan ip address server debian. seharusnya tampilan akan bebrubah menjadi website yang lebih bagus lagi.