View source for Debian : Konfigurasi Web Server (Apache)

[[File:Apache.jpg|thumb|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 <code>GET /index.html</code>).
* '''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''': <code>.htaccess</code> 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 <code>.htaccess</code>).
* 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<syntaxhighlight lang="linux-config">
apt install apache2 -y
</syntaxhighlight>Tunggu prosesnya hingga selesai.

Setelah prosesnya selesai ketikkan perintah berikut untuk memeriksa apakah Apache sudah berjalan di server Debian<syntaxhighlight lang="linux-config">
systemctl status apache2
</syntaxhighlight>Jika muncul seperti pada gambar di bawah ini, maka sudah di pastikan Apache sudah berjalan di Debian Server

[[File:Apache2.jpg|800x800px]]

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.
[[File:Apache3.jpg|799x799px]]

== Konfigurasi file hosts ==
Untuk mengkonfigurasi file hosts ketikkan perintah berikut ini<syntaxhighlight lang="linux-config" line="1">
nano /etc/hosts
</syntaxhighlight>setelah file hosts terbuka ketikkan perintah berikut ini<syntaxhighlight lang="linux-config">
192.168.200.248   smktkj.net
</syntaxhighlight>Sesuaikan ip address dan nama domain dengan server masing-masing, setelah di tambakkan simpan konfigurasi. dan hasilnya akan terlihat seperti pada gambar berikut ini

[[File:Hosts.jpg|946x946px]]

== 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<syntaxhighlight lang="linux-config" line="1">
cd /etc/apache2/sites-available
nano domain1.conf
</syntaxhighlight>setelah file domain1.conf terbuka isi dengan baris konfigurasi seperti berikut ini<syntaxhighlight lang="linux-config" line="1">
<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>	
</syntaxhighlight>Setelah file Virtualhost di buat tahap selanjutnya adalah meng-enable kan Virtualhost tersebut, untuk itu jalankan perintah berikut ini<syntaxhighlight lang="linux-config" line="1">
a2ensite domain1.conf
a2enmod rewrite
systemctl restart apache2 
systemctl status apache2 
</syntaxhighlight>

== Membuat direktori/dokumen root ==
Untuk membuat dokumen root jalankan perintah berikut ini<syntaxhighlight lang="linux-config" line="1">
cd /var/www
mkdir smktkj.net
cd smktkj.net
nano index.html	
</syntaxhighlight>Kemudian akan terbuka file index.html. isikan script html seperti pada berikut ini<syntaxhighlight lang="html" line="1">
<!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>
</syntaxhighlight>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.