SSL digunakan untuk mengamankan data transaksi online dengan mengenkripsinya sehingga tidak dapat dibaca pihak lain. Tutorial ini menjelaskan langkah-langkah membuat sertifikat SSL menggunakan XAMPP, meliputi pembuatan virtual host, sertifikat CA, sertifikat klien, penandatanganan sertifikat, dan instalasi sertifikat CA di browser.

1. TUTORIAL MEMBUAT
SERTIFIKAT SSL
MENGGUNAKAN XAMPP
Yoga Pratama Putra
Dosen Pembimbing : Muhammad Jazman, S.Kom., M.Info.Sys.

2. INTRODUCTION
SSL memastikan data transaksi yang terjadi secara online di enkripsi/acak
sehingga tidak dapat dibaca oleh pihak lain. Kegunaan utamanya adalah untuk menjaga
keamanan dan kerahasiaan data ketika melakukan transaksi.
Alasan utama mengapa menggunakan SSL adalah untuk menjaga informasi
sensitif selama dalam proses pengiriman melalui Internet dengan cara dienkripsi,
sehingga hanya penerima pesan yang dapat memahami dari hasil enkripsi tersebut. Hal
ini sangat penting, karena informasi yang kita kirimkan di Internet membutuhkan proses
perjalanan dari komputer ke komputer sampai mencapai server tujuan.
Dalam pembuatan SSL pada xampp, penulis menggunakan sebuah virtual host
untuk membuat domain yang berbeda dari localhost. Jadi nantinya kita akan memiliki 2
domain utama yaitu localhost dan domain virtual host yang akan kita buat.

3. LANGKAH – LANGKAH MEMBUAT
VIRUTAL HOST
Buka Command Prompt sebagai
admnistrator
STEP 1

4. Setelah kita berhasil menjalankan
CMD, maka kita lakukan pengujian
dengan menjalankan perintah SET
US, perintah SET US disini gunanya
hanya untuk menampilkan
Environment Variable yang dimulai
dengan huruf US
STEP 2

5. Kita akan membuat sebuah DNS baru
pada Microsoft Windows, dengan cara :
C:WindowsSystem32driversetchos
ts
STEP 3

6. NEXT..
Jika berhasil maka perintah akan
otomatis membuka file di notepad.
Lalu tambahkan DNS baru pada
baris paling bawah, seperti pada
gambar – SAVE.

7. STEP 3
Setelah anda menyimpan
konfigurasi, maka
langkah selanjutnya
melakukan testing pada
DNS yang anda buat.
Dengan cara 

8. STEP 4
Tambahkan settingan pada berkas
httpd.conf yang berada di folder
xampp
*Note :
Sesuaikan lokasi xammp, dengan
lokasi anda menginstall xampp.

9. NEXT..
Jika berhasil maka akan
membuka file httpd.conf seperti
pada gambar, lalu tambahkan
teks berikut pada baris akhir :
NameVirtualHost *:80
<VirtualHost *:80>
ServerAdmin email@admin.com
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
ServerAlias localhost.localdomain
ErrorLog "logs/localhost.error.log"
CustomLog "logs/localhost.access.log" combined
</VirtualHost>
Include "conf/sites-enabled/*.conf"

10. NEXT...
Maksud perintah sebelumnya adalah mengaktifkan Name Based Virtual Host di port
80 untuk semua IP Address kita (*). ServerAdmin di sini adalah email admin yang nanti keluar
kalau ada error pada VirtualHost kita.
Perintah yang penting di sini adalah ServerName dan ServerAlias : localhost disini
artinya adalah sebagai domain untuk virtualhost jika mengakases localhost atau
localhost.localdomain maka apache akan otomatis memberikan file yang ada pada
DocumentRoot.

11. STEP 5
1. kita akan membuat sebuah folder
“sites-enabled”, yang berfungsi
sebagai tempat kita menyimpan
konfigurasi DNS VirtualHost kita.
2. Kita akan membuat file untuk
konfigurasi DNS VirtualHost yang
akan disimpan pada folder sites-
enabled.

12. NEXT..
Jika muncul pemberitahuan
seperti pada gambar
disamping, maka klik ‘yes’.
Selanjutnya masukkan perintah berikut ini
: <VirtualHost *:80>
ServerAdmin admin@yoga.putra.com
DocumentRoot "C:/xampp/vhosts/yoga.putra/public_html"
ServerName yoga.putra
ServerAlias www.yoga.putra
ErrorLog "C:/xampp/vhosts/yoga.putra/logs/error.log"
CustomLog "C:/xampp/vhosts/yoga.putra/logs/access.log" combined
</VirtualHost>
<Directory "C:/xampp/vhosts/yoga.putra/public_html">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>

13. NEXT...
Maka hasilnya seperti pada gambar
disamping.

14. STEP 6
Buatlah 3 folder baru dengan perintah sbg berikut :
1. mkdir C:xamppvhosts
2. mkdir C:xamppvhostsyoga.putra
3. mkdir C:xamppvhostsyoga.putralogs
4. mkdir C:xamppvhostsyoga.putrapublic_html

15. STEP 7
Sekarang, restart Apache pada
xampp Anda dengan menekan
tombol Stop, tunggu sebentar, lalu
start.
Jika belum dijalankan, cukup klik
tombol start saja.

16. STEP 8
Jika semua proses berhasil maka kita
akan memiliki 2 DNS yaitu, localhost dan
VirtualHost kita, seperti pada gambar :
Tampilan localhost 

17. NEXT..
Tampilan DNS VirtualHost
Untuk mengisi tampilan virtual host Anda, maka anda cukup copy dan paste file website yang
anda miliki ke folder “C:/vhosts/yoga.putra/public_html”

18. LANGKAH – LANGKAH MEMBUAT
SSL
1. Perisapan
2. Membuat Sertifikat CA
3. Membuat Sertifikat Untuk Client
4. Menandatangani Sertifikat Request
5. Meletakan CRT dan Key ke Apache
6. Menginstall sertifikat CA

19. STEP 1 : PERSIAPAN
Buka cmd dan masuk ke direktori C:

20. STEP 2
Buat folder baru yang bernama “sslcert” Lalu masuk ke folder tersbut :

21. STEP 3
Buatlah folder baru kembali yang bernama
“certs private”, folder certs ini berfungsi
sebagai tempat penyimpanan semua
sertifikat dan private berfungsi sebagai
penyimpanan private key.

22. STEP 4
Sekarang buat sebuah
berkas bernama serial,
dan isi dengan 100001.
Berkas serial ini nantinya
digunakan untuk
otomatis memberi nomor
serial untuk setiap
sertifikat yang
dihasilkan.
ketikan perintah : echo 100001 >serial (enter)
selanjutnya ketikan : copy con serial (enter)
100001 maka akan muncul pesan
<Yes/No/All> :ketik All (enter)
lalu tekan ctrl + z (enter)

23. STEP 5
Buat sebuah dile baru bernama “certindex.txt”
ketikan perintah notepad certindex.txt (enter)
Hasil perintah
tersebutuntuk menampung daftar sertifikat yang
telah kita tandatangani. Jadi biarkan
kosong

24. STEP 6
Kemudia buatlah sebuah file baru yang bernama “openssl.cnf”
Masukkan semua teks yang ada
pada slide berikutnya

25. #
# OpenSSL configuration file.
#
# Establish working directory.
dir = .
[ ca ]
default_ca = CA_default
[ CA_default ]
serial = $dir/serial
database = $dir/certindex.txt
new_certs_dir = $dir/certs
certificate = $dir/cacert.pem
private_key = $dir/private/cakey.pem
default_days = 3650
#default_md = md5
default_md = sha1
preserve = no
email_in_dn = no
nameopt = default_ca
certopt = default_ca
policy = policy_match
[ policy_match ]
countryName = match
stateOrProvinceName = match
organizationName = match
organizationalUnitName = optional
commonName = supplied
emailAddress = optional
[ req ]
default_bits = 2048 # Size of keys
default_keyfile = key.pem # name of generated keys
#default_md = md5 # message digest algorithm
default_md = sha1 # message digest algorithm
string_mask = nombstr # permitted characters
distinguished_name = req_distinguished_name
req_extensions = v3_req
[ req_distinguished_name ]
# Variable name Prompt string
#------------------------- ----------------------------------
0.organizationName = Organization Name (company)
organizationalUnitName = Organizational Unit Name (department,
division)
emailAddress = Email Address
emailAddress_max = 40
localityName = Locality Name (city, district)
stateOrProvinceName = State or Province Name (full name)
countryName = Country Name (2 letter code)
countryName_min = 2
countryName_max = 2
commonName = Common Name (hostname.com, IP, or your name)
commonName_max = 64
Lanjutan

26. # Default values for the above, for consistency and less typing.
# Variable name Value
#------------------------ ------------------------------
0.organizationName_default = Universitas Islam Negeri Sultan Syarif Kasim
localityName_default = Pekanbaru
stateOrProvinceName_default = Riau
countryName_default = ID
[ v3_ca ]
basicConstraints = CA:TRUE
subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid:always,issuer:always
[ v3_req ]
basicConstraints = CA:FALSE
subjectKeyIdentifier = hash
Lanjutan
Hasil script tersebut

27. STEP 7 : MEMBUAT SERTIFIKAT CA
Ketikan perintah berikut :
C:xamppapachebinopenssl.exe req -new -x509 -extensions v3_ca -keyout privateCAkey.pem -
out CAcert.pem -days 3650 -config ./openssl.cnf (enter)

28. STEP 8
Kemudian masukkan Password yang akan kita gunakan sebagai CA.

29. STEP 9
Setelah berhasil memasukkan password CA maka kita akan diminta untuk mengisi
data berikut :
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Organization Name (company) [Universitas Islam Negeri Sultan Syarif Kasim]:
Organizational Unit Name (department, division) []:SIF2014
Email Address []:yogapratamaputra0@gmail.com
Locality Name (city, district) [Pekanbaru]:
State or Province Name (full name) [Riau]:
Country Name (2 letter code) [ID]:
Common Name (hostname.com, IP, or your name) []:yoga.putra.com
Anda bisa sesuaikan
Anda bisa sesuaikan
Anda bisa sesuaikan

30. NEXT..
Contoh gambar :

31. STEP 10 : MEMBUAT SERTIFIKAT CLIENT
ketikan perintah berikut ini :
C:xamppapachebinopenssl req -new -nodes -out localhost-req.pem -keyout private/localhost-
key.pem -config ./openssl.cnf (enter)
Jika anda ingin membuat client baru,
Anda cukup mengganti seluruh nama
“localhost” menjadi nama DNS anda

32. STEP 11
Kemudian isilah informasi tersebut
:
Organization Name (company) [Universitas Islam Negeri Sultan Syarif Kasim]:
Organizational Unit Name (department, division) []:IT Department
Email Address []:rahmad.riansyah@gmail.com
Locality Name (city, district) [Pekanbaru]:
State or Province Name (full name) [Riau]:
Country Name (2 letter code) [ID]:
Common Name (hostname.com, IP, or your name) []:localhost

33. STEP 12 : MENANDATANGANI SERTIFIKAT
Biasanya perintah ssl tidak akan berjalan jika kita belum melakukan setting path,
maka ketikan text berikut untuk mengaktifkan path :
set path=C:xamppapachebin;%PATH% (enter)

34. STEP 13
Selanjutnya kita akan menandatangani sertifikat request
openssl ca -out localhost.crt.pem -config ./openssl.cnf -infiles
localhost-req.pem (enter)
Jika anda ingin menandatangani
sertifikat lainnya, anda cukup
mengganti seluruh nama
“localhost” dengan DNS anda.

35. STEP 14
Jika langkah sebelumnya berhasil, maka selanjutnya kita akan memindahkan file
CRT dan KEY ke Apache pada xampp. *sesuaikan lokasi xampp anda

36. STEP 15
Kemudian edit pengaturan pada “httpd-ssl.conf”

37. NEXT..
Edit semua file yang telah diblock sesuai
dengan sertifikat yang anda miliki. Lalu
restart Apache pada xampp.

38. STEP 16 : MENGINSTALL SERTIFIKAT CA
Selanjutnya kita akan menginstall sertifikat CA pada browser.
Disini saya menggunakan Mozilla Firefox V. 48.0.2
Buka browser  pilih menu sepert pada gambar  Option

39. STEP 17
Selanjutnya pilih Advanced  Certificates  View Certificates

40. STEP 18
Lalu installkan sertifikat anda dengan mengimport sertifikat yang anda miliki.
Disini saya menginstall sertifikat
“yoga.putra”

41. STEP 19
Setelah berhasil kita dapat melihat informasi mengenai sertifikat yang kita miliki
dengan klik tombol View.

42. STEP 20
Meskipun kita telah menginstall sertifikat ke browser tetap saja koneksi https kita akan dibaca koneksi
yang tidak aman. Namun itu tidak masalah, lebih baik dari pada pemberitahuan eror yang anda terima.

43. SEKIAN
Terima Kasih