October 2023

Seri Network Engineer

XAMPP
Ilu Inu Imu
___
Team Labkom FSTI ISTN

PENDAHULUAN
XAMPP adalah sebuah paket perangkat lunak yang menyediakan lingkungan pengembangan
web lokal yang lengkap. Nama "XAMPP" sendiri adalah singkatan yang merujuk pada
komponen-komponen utama yang terkandung di dalamnya.
Mulanya pada Tahun 2002, XAMPP pertama kali dikembangkan oleh Beltrán Rengifo dengan
nama proyek adalah singkatan yang mencakup komponen-komponen utamanya: X
(cross-platform), A (Apache HTTP Server), M (MySQL), P (PHP), dan P (Perl).

Didevelop sebagai solusi sederhana untuk menyediakan web framework yang lengkap dan
mudah diinstal di berbagai platform. Terus berkembang dengan beragam fitur hingga 2004,
Pengembangan dan pemeliharaan XAMPP dilanjutkan oleh komunitas pengembang. Versi-versi
terbaru terus menambahkan fitur dan komponen baru sesuai dengan kebutuhan pengguna dan
perkembangan teknologi web.

FSTI ISTN #1
 2

Install XAMPP

XAMPP dikembangkan oleh Apache Friends dan bersifat open source, yang berarti pengguna
dapat mengunduh, menginstal, dan menggunakannya secara gratis.
Kode sumber XAMPP juga terbuka, yang memungkinkan pengguna untuk memodifikasinya
sesuai kebutuhannya. File Instalasi bisa unduh dari
https://www.apachefriends.org/download.html

Fitur XAMPP

XAMPP mencakup komponen penting seperti server web, database, dan bahasa pemrograman,
sehingga Anda dapat melakukan pengembangan terpadu dalam satu lingkungan:

X (seharusnya berarti apa saja): Menunjukkan bahwa XAMPP dapat dijalankan di berbagai sistem operasi,
termasuk Windows, Linux, dan macOS.
A (Apache HTTP Server): Apache adalah server web yang sangat populer dan diakui secara luas. Dalam
XAMPP, Apache digunakan untuk menyajikan halaman web secara lokal.
M (MySQL): MySQL adalah sistem manajemen basis data relasional (RDBMS) yang sering digunakan.
XAMPP menyertakan MySQL untuk menyimpan dan mengelola data basis data.
P (PHP): PHP adalah bahasa pemrograman server-side yang sering digunakan untuk mengembangkan
aplikasi web dinamis. XAMPP menyediakan versi PHP agar pengembang dapat membuat dan menguji skrip
PHP secara lokal.
P (Perl): Awalnya, "P" ini merujuk pada Perl, tetapi versi XAMPP terbaru tidak selalu menyertakan Perl secara
default.

Selain komponen-komponen utama tersebut, XAMPP juga dapat menyertakan beberapa

komponen tambahan dan fitur pendukung:

phpMyAdmin; Antarmuka web untuk mengelola basis data MySQL dengan mudah.
Mercury Mail; Server email sederhana yang dapat dikonfigurasi untuk menguji fitur pengiriman email
dalam aplikasi web.
FileZilla FTP Server; Server FTP yang memungkinkan transfer file ke dan dari server.
Tomcat; Tomcat sering kali disertakan untuk mendukung pengembangan aplikasi Java.
Webalizer; Program analisis log web yang dapat memberikan statistik akses web.

XAMPP dirancang untuk menjadi solusi pengembangan web yang cepat dan mudah dijalankan
di lingkungan lokal (local PC). Ini memungkinkan para developer untuk menguji dan
mengembangkan situs web atau aplikasi web sebelum diimplementasikan /SANDBOX-MODE.

2
 3

A.Web Server

Web Server adalah komputer atau perangkat lunak yang bertanggung jawab untuk melayani
permintaan dari klien (biasanya peramban web/web browser) dengan mengirimkan konten web
ke klien melalui protokol HTTP (Hypertext Transfer Protocol).

Sederhananya adalah meng-host situs web dan memungkinkan para pengguna untuk
mengakses konten web tersebut melalui jaringan / internet, komponen pentingnya al:

1. Perangkat Lunak Server: Web server dapat berupa perangkat keras fisik, tetapi yang paling
umum adalah perangkat lunak (software) yang diinstal pada komputer atau server fisik. Contoh
perangkat lunak server web populer termasuk Apache, Nginx, Microsoft Internet Information
Services (IIS), dan LiteSpeed.

2. Protokol HTTP: HTTP adalah protokol komunikasi yang digunakan oleh web server untuk
berkomunikasi dengan peramban web. Ini memungkinkan permintaan dan respons antara klien
dan server.

3. Permintaan (Request) dan Respons (Response): Klien (biasanya peramban web) mengirim
permintaan HTTP ke web server untuk mengakses halaman web atau sumber daya lainnya. Web
server memproses permintaan ini dan mengirimkan respons yang berisi konten yang diminta,
seperti halaman HTML, gambar, video, atau file lainnya.

3
 4

4. Alamat IP dan Nama Domain: Untuk mengakses situs web, klien harus tahu alamat IP server
web. Namun, alamat IP bisa sulit diingat, oleh karena itu nama domain seperti
"www.websaya.com" digunakan sebagai gantinya. Sistem DNS (Domain Name System)
menghubungkan nama domain ke alamat IP server web yang sesuai.

5. Port: Port adalah alamat jaringan yang digunakan untuk mengarahkan permintaan HTTP ke
server web yang benar. Port default untuk HTTP adalah 80, dan untuk HTTPS (HTTP Secure)
adalah 443. Saat Anda mengakses situs web melalui peramban, klien secara otomatis
menggunakan port ini jika tidak ada yang ditentukan

Semua web yang dibuat, nantinya diletakkan pada folder instalasi /HTDOCS atau sesuai dengan
konfigurasi dari path Adminnya; konfigurasi pada httpd.conf:

yang umumnya pada posisi:

<Directory "C:/xampp/htdocs">

Untuk praktek web server, misal download web dari link

https://themewagon.com/themes/villa-agency lalu extarct dan letakkan pada path
C:\XAMPP\HTDOCS\VILLA-AGENCY

Lalu pada browser jalankan sesuai IP address dan path alamat web:
http://localhost/VillaAgency-1.0.0/ atau http://127.0.0.1/VillaAgency-1.0.0/
atau
atau https://127.0.0.1:80/VillaAgency-1.0.0/
atau
https://localhost/VillaAgency-1.0.0/ atau https://127.0.0.1/VillaAgency-1.0.0/
atau https://127.0.0.1:443/VillaAgency-1.0.0/

4
 5

port 80 dan port 443 digunakan sebagai akses web server !(sesuai port yang terbuka pada
XAMPP)

Dan hasilnya adalah sbb:

atau bisa juga menggunakan ip address posisi xampp tersebut diinstall

buka cmd atau terminal lalu ketik ipconfig:

5
 6

http://192.168.1.3/VillaAgency-1.0.0/ atau https://192.168.1.3/VillaAgency-1.0.0/

akan menghasilkan web client yang sama, hanya bedanya jika ada perangkat lain yang
terhubung dalam jaringan tersebut maka semua bisa akses menggunakan link ip address
tersebut

B.Database Server

6
 7

Database Server adalah sistem manajemen database (DBMS) open source yang sangat populer.
Dan umum digunakan untuk menyimpan, mengelola, dan mengakses data dalam berbagai jenis
aplikasi, termasuk aplikasi web.

MySQL adalah salah satu database server relasional, yang berarti data disimpan dalam tabel
yang berhubungan satu sama lain, memungkinkan Anda untuk mengakses dan mengelola data
dengan cara yang terstruktur.Dalam XAMPP, MySQL adalah salah satu komponen utama yang
digunakan untuk menyediakan database server. Ini dapat digunakan untuk mengembangkan
dan menguji aplikasi web yang memerlukan database.

Lalu, phpMyAdmin adalah aplikasi web open source yang digunakan untuk mengelola dan
mengelola basis data MySQL melalui antarmuka berbasis web. Tools ini memungkinkan
pengguna untuk melakukan berbagai tugas, seperti membuat tabel, mengimpor dan
mengekspor data, menjalankan kueri SQL, dan mengelola pengguna dan izin.

Dalam konteks XAMPP, phpMyAdmin sering digunakan untuk mengelola basis data MySQL
yang terhubung ke server web Apache. Anda dapat mengakses phpMyAdmin melalui peramban
web Anda untuk melakukan tugas administrasi database.Untuk menjalankannya, bisa dengan
cara klik button admin pada XAMPP COntrol Panel, maupun langsung ketik pada
peramban/browser:

C.File Server

File server adalah sebuah komputer atau perangkat keras yang digunakan untuk menyimpan,
mengelola, dan menyediakan akses kepada berkas-berkas (files) kepada klien atau perangkat

7
 8

lain dalam jaringan komputer/internet. Artinya berfungsi sebagai pusat penyimpanan data yang
dapat diakses oleh banyak pengguna atau perangkat dalam suatu jaringan sesuai previledge
masing-masing akun. Berikut adalah beberapa poin penting tentang file server:

1.Sebagai Penyimpanan Sentral:

yaitu berfungsi sebagai lokasi sentral untuk menyimpan berkas-berkas data, seperti dokumen,
gambar, video, file aplikasi, dan lainnya yang dibatasi sesuai akun masing-masing.

2.Akses Berbasis Jaringan:

yaitu melalui protokol jaringan seperti SMB/CIFS (untuk jaringan Windows), NFS (Network File
System), FTP (File Transfer Protocol), dan lainnya.

3.Manajemen Hak Akses

Sehingga administrator dapat mengontrol siapa yang memiliki izin untuk membaca, menulis, atau
menghapus berkas-berkas tertentu.

Pada XAMPP, pengguna bisa memulai dengan membuat group untuk mengakses folder tertentu,

8
 9

Lalu membuat user dan password para pengguna dalam group tersebut:

Serta dapat ditentukan pula bisa akses apa saja terhadap folder yang diberikan:

Untuk sisi client, pengguna dapat menggunakan filezilla client; atau secara definisi adalah sbb:
FileZilla Client adalah perangkat lunak yang digunakan untuk mentransfer file antara
komputer lokal dan server jarak jauh melalui protokol FTP (File Transfer Protocol), SFTP (SSH

9
 10

File Transfer Protocol), dan FTPS (FTP Secure).

FIlezilla client ini dapat mengelola berkas dan direktori di komputer lokal dan server jarak jauh,
termasuk membuat, menghapus, menyalin, memindahkan, dan mengganti nama berkas.

Sehingga pengguna dapat mengunggah (upload) berkas dari komputer lokal ke server atau
mengunduh (download) berkas dari server ke komputer lokal.Contoh nya adalah FILEZILLA

D. Mail Server

Mail Server/server email, adalah komponen perangkat keras dan perangkat lunak yang
bertanggung jawab untuk mengirim, menerima, menyimpan, dan mengelola email dalam
sebuah jaringan komputer (lokal maupun melalui internet).

Mail server mendukung berbagai protokol email, seperti SMTP (Simple Mail Transfer Protocol)
untuk pengiriman, POP3 (Post Office Protocol) atau IMAP (Internet Message Access Protocol)
untuk pengambilan pesan.

Setelah mengaktifkan Mercury pada fitur XAMPP, lalu buka konfigurasi Mercury melalui butoon
admin. Perlu beberapa pengaturan, termasuk nama domain, pengaturan POP3, dan SMTP.
Untuk kebutuhan localhost/jaringan local, silakan menggunakan IP yang sedang menjalankan
XAMPP atau localhost atau 127.0.0.1

10
 11

Pada halaman Admin yang sudah terbuka, klik Configuration -> Mercury SMTP Server.
Kemudian pilih tab Connection Control dan lakukan unchecklist seperti gambar di bawah lalu
klik OK:

11
 12

Sehingga Menjadi:

12
 13

Ketikkan localhost atau 127.0.0.1:

Konfirgurasi SMTP dan POP3 dengan cara mengaktifkannya (Checlist) pada :

13
 14

Setting pada 5 Option sbb:

Daftarkan List Pengguna email, dengan cara:

Klik Configuration -> Manage Local users ->klik Add -> isi data untuk email pengguna:

Data pada kolom username adalah untuk nama awal email yangakan dibuat, sedangkan
personal name adalah nama yang akan ditampilkan, password mail adalah password untuk
email yang dibuat. Sehingga pastikan untuk mengingat username dan password; dan buat email
minimal dua buah untuk dapat melakukan uji sent-receive mail nantinya.

14
 15

Buat Beberapa akun untuk latihan mail server:

Setelah server mail siap, selanjutnya pengaturan pada Mail User Agent (MUA); MUA adalah
antarmuka yang digunakan oleh pengguna untuk mengakses email.
Hal Ini bisa berupa aplikasi desktop seperti Microsoft Outlook, Thunderbird, atau bisa berupa
layanan webmail seperti Gmail atau Yahoo Mail.

Misal, menggunakan Tools Mail CLient Mozilla Thunderbird.

Mozilla Thunderbird adalah klien surel atau aplikasi surat elektronik yang digunakan untuk
mengelola dan mengirim surel atau email (bisa di unduh di
https://www.thunderbird.net/en-US/).
Silakan Download dan lakukan proses penginstalan:

15
 16

Pilih Instalasi default:

kemudian klik Email untuk membuat email baru. Isi pengguna berdasarkan list pengguna pada
XAMPP Mercury terdaftar.Proses ini Tidak perlu ada koneksi internet, karena sengaja untuk
pengujian local !

16
 17

Misal tes pengiriman email dari dari userx ke user1

Maka pada user1 akan muncul sbb:

Selanjutnya tahap uji mail server dengan mengirim dan menerima email. Para Developer dapat
menggunakan alat pengembangan web yang disediakan oleh XAMPP, seperti PHP, untuk
mengirim email melalui server email lokal tersebut.Arsip email ini disimpan dalam berbagai
format, seperti mbox, Maildir, atau basis data SQL lainnya.

Pada alias, pengguna dapat membuat list alias beberapa nama sehingga email lebih interaktif;
misal : localhost.com, kampus.com dan sebagainya

17
 18

Dengan koleksi beberapa alias al:

18
 19

Sehingga penamaan pengirim dan penerima bisa di modifikasi sesuai nama domain interaktif:

Dan pada tes pengiriman dari user1@kampus.com :

Dan pada tes penerimaan pada user2@localhost.com

Catatan:
Mail server adalah tidak selalu sederhana dan dapat memerlukan pemahaman yang mendalam

19
 20

tentang pengaturan server email kemudiannya.

Selain itu, penggunaan mail server pada XAMPP adalah sebatas info pengujian lokal dan perlu
pendalaman kembali terkait keamanan untuk digunakan dengan tujuan produksi.

E.Enterprise Java Web Server

Apache Tomcat, yang sering disebut hanya sebagai Tomcat, adalah sebuah server web yang
berfungsi sebagai container aplikasi web Java. Service ini dikembangkan oleh Apache Software
Foundation dan dirilis sebagai perangkat lunak open source. Tomcat dirancang khusus untuk
menjalankan aplikasi web berbasis Java, terutama aplikasi yang mematuhi standar Java EE (Java
Platform, Enterprise Edition).

Contoh hasil JSP Web:

<%@ page import="java.io.*,java.util.Locale" %>

<%@ page import="javax.servlet.*,javax.servlet.http.* "%>
<%@ page import="java.text.DateFormat,java.util.Date" %>
<%
String title = "Locale Specific Dates";
Locale locale = request.getLocale( );
String date = DateFormat.getDateTimeInstance( DateFormat.FULL, DateFormat.SHORT,
locale).format(new Date( ));
String[]arT=new String[10];
arT[0]="Ini adalah tank Keren..buatan ABC";
arT[1]="Ini adalah tank Keren..buatan DEF";
arT[2]="Ini adalah tank Keren..buatan GHI";
arT[3]="Ini adalah tank Keren..buatan JKL";
arT[4]="Ini adalah tank Keren..buatan MNO";
arT[5]="Ini adalah tank Keren..buatan PQR";
arT[6]="Ini adalah tank Keren..buatan STU";
arT[7]="Ini adalah tank Keren..buatan VWX";
arT[8]="Ini adalah tank Keren..buatan WXY";
arT[9]="Ini adalah tank Keren..buatan XYZ";

for ( int i = 1; i <= 10; i++){ %>

<div class="col">
<div class="card shadow-sm">
<img src="assets/tank/tank<% out.print(i);%>.jpg"
class="bd-placeholder-img card-img-top"
width="100%"
height="225"
>

20
 21

<div class="card-body">
<p class="card-text"><% out.print(arT[i-1]);%></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">Series-<% out.print(i);%></small>
</div>
</div>
</div>
</div>
<%}%>

Atau uji Servlet:

import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
public class Login extends HttpServlet {

21
 22

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
request.getRequestDispatcher("/Header.html").include(request, response);
request.getRequestDispatcher("/Login.html").include(request, response);
}
catch(ServletException | IOException ee){
out.println(ee.toString());
}

Catatan tentang Tomcat Web Server:

Container Aplikasi Web: Tomcat adalah "container" aplikasi web, yang berarti ia menyediakan
lingkungan untuk menjalankan aplikasi web Java; yaitu dengan mengelola permintaan HTTP,
dan menjalankan servlet dan komponen JavaServer Pages (JSP).

Kompatibilitas Java EE: Tomcat support service dengan spesifikasi Java EE, antara lain servlet,
JSP, JNDI (Java Naming and Directory Interface), JTA (Java Transaction API), dan lainnya.

Ringan dan Cepat: Tomcat dikenal karena ukurannya yang relatif kecil dan kemampuannya
untuk dimulai dengan cepat, lebih aman dan lebih sederhana.

22
 23

Artinya, Tomcat biasanya digunakan sebagai server web untuk aplikasi web Java, terutama
untuk aplikasi yang tidak memerlukan keseluruhan stack Java EE yang lebih berat. Sebagai
server web yang ringan dan fleksibel, Tomcat adalah pilihan yang populer bagi pengembang
Java untuk menguji, mengembangkan, dan menjalankan aplikasi web Java secara lokal sebelum
mempublikasikannya di server produksi.

Pada aplikasi Apache Netbeans, atur posisi Path Tomcat yang digunakan (Path Tomcat\bin):

23
 24

Misal pengaturan sebagai berikut:

Atau melalui Default Tomcat XAMPP

C:\xampp\tomcat

Selamat Berkarya……

24