Tutorial BAB 2

Pada Bab 2 ini, praktikan akan mempraktekan cara membuat web CMS dengan aplikasi WordPress pada apache2 dan MySQL di Ubuntu Server. Agar praktikum berjalan sesuai prosedur maka Asisten Mengajar Shift atau Praktikan dapat membaca tujuan dan persyaratan praktikum bab ini sebelum memulai ke bab teori dan bab praktek.

Tujuan link

Persyaratan link

Disarankan praktikan menggunakan hardware dan software sesuai pada dokumentasi ini. Apabila terdapat versi yang lumayan lampau dari versi yang direcommendasikan atau hardware yang lawas maka sebaiknya bertanya kepada Asisten Mengajar Shift.

Teori link

Ada beberapa penjelasan singkat dari materi Bab 2 ini yang harus dimengerti oleh praktikan sebelum melanjutkan ke subbab berikutnya.

Apa itu WordPress? link

WordPress adalah sistem manajemen konten (CMS) yang bisa digunakan untuk membuat dan mengelola website atau blog. Sistem WordPress berjalan menggunakan PHP dan database MySQL atau MariaDB. Beberapa fitur unggulan WordPress antara lain adalah plugin dan tema, yang mampu menambahkan berbagai fungsi pada platform ini.

Saat ini, WordPress adalah CMS terpopuler yang menaungi lebih dari 42% website di dunia, dan angka ini diperkirakan masih terus meningkat. Dengan CMS, user bisa mengelola website dan memublikasikan kontennya tanpa harus menguasai bahasa pemrograman terlebih dulu.

Pada umumnya, CMS digunakan untuk blogging. Namun, WordPress bisa dimodifikasi menjadi website eCommerce (atau yang biasa kita sebut toko online), website portofolio, koran online, dan lain sebagainya.

mari kita bahas cara kerja WordPress dengan menggunakan Apache, PHP, dan MySQL pada subbab dibawah ini:

Apa itu Apache pada Wordpress? link

Apache adalah server web yang bertugas menerima request dari web browser(seperti Chrome, Firefox, dll.) dan mengirimkan kembali halaman web yang direquest. Ketika kita mengunjungi situs web WordPress, browser kita membuat permintaan ke server Apache untuk halaman web tertentu. Apache kemudian mengambil berkas-berkas yang diperlukan dan menyajikannya kepada browser kita.

Apa itu PHP pada Wordpress? link

PHP adalah bahasa pemrograman yang digunakan untuk membuat bagian dinamis dari situs web WordPress. Ketika server menerima request untuk halaman WordPress, PHP akan mengeksekusi berbagai skrip dan kode untuk menghasilkan konten yang dinamis. Ini termasuk mengambil informasi dari basis data (seperti postingan, halaman, dan pengaturan situs), memprosesnya, dan menyusun halaman web yang siap disajikan kepada pengguna.

Apa itu MySQL pada Wordpress? link

MySQL adalah sistem manajemen basis data yang digunakan oleh WordPress untuk menyimpan dan mengelola semua konten situs web, seperti postingan, halaman, komentar, pengguna, dan pengaturan lainnya. Saat PHP dijalankan, WordPress menggunakan MySQL untuk mengambil dan menyimpan informasi yang diperlukan untuk membangun halaman web yang akurat. Misalnya, ketika kita meminta untuk melihat halaman tertentu, WordPress menggunakan MySQL untuk menemukan konten yang sesuai dari basis data dan menampilkannya dalam halaman web yang dihasilkan.

Jadi, ketika kita mengakses situs WordPress, server Apache menerima request-an kita, PHP dieksekusi untuk menghasilkan konten dinamis, dan MySQL digunakan untuk mengambil dan menyimpan data yang diperlukan untuk halaman tersebut. Dengan berkolaborasi, ketiga komponen ini memungkinkan WordPress untuk menyajikan konten web yang dinamis dan interaktif kepada pengguna.

Topologi pada Bab 2 link

Untuk mempermudah dalam mengerti proses jalan dalam praktikum bab 2, maka kita harus mengerti topologi logik dari bab 2 ini. Berikut adalah topologi dari bab 2:

Praktek link

Ada beberapa poin penting yang harus semua ketahui sebelum ke subbab selanjutnya.

Kalau sudah tidak ada kendala, selanjutnya praktikum dapat memulai ke subab berikutnya.

Test Kembali DNS pada Bab Sebelumnya link

Nyalakan virtualbox yang telah terinstall Operating Sistem Linux Ubuntu Server 23.10.

Login pada Ubuntu Server dengan memasukan username jkl dan passwordnya jkl.

Sebelum kita test DNS pada bab sebelumnya. kita harus masuk ke Ubuntu Server memakai user root agar kita bisa mengakses lebih luas ke dalam Ubuntu Server. Kita ketik perintah sudo -i untuk masuk ke user tersebut.

Kita check kembali IP Address yang dipakai oleh Ubuntu Server apakah sama seperti yang telah kita config pada bab sebelumnya. kita ketik perintah ifconfig untuk melihat IP Address.

Kita juga check DNS yang kita config pada bab sebelumnya yaitu pada domain acsl-2024.com dan mail.acsl-2024.com. kita dapat mengetik perintah nslookup acsl-2024.com dan nslookup mail.acsl-2024.com. apabila sama maka kita dapat melanjutkan praktek bab ini.

  nslookup acsl-2024.com
nslookup mail.acsl-2024.com
  

Install Aplikasi Apache2 dan PHP 8.2 link

Sebelum kita install apache2 dan php8.2, kita harus check koneksi internet pada Ubuntu Server. apabila terjadi request timeout maka kesalahan terjadi pada konfigurasi netplan.

Saat menginstall aplikasi, Ubuntu Server membutuhkan repository update agar ia dapat meminta file installer yang kita butuhkan. Dengan cara perintah apt update.

  apt update
  

Setelah di-update repository maka kita dapat meng-install apache2 dan php8.2 pada ubuntu server yang dimana apache2 berguna sebagai web server untuk wordpress sedangkan php8.2 sebagai mengoptimalkan kemampuan situs dan menyesuaikan konten postingan atau halaman pada wordpress. Kita bisa ketik perintah apt install apache2 php8.2 untuk menginstallnya.

  apt install apache2 php8.2
  

Install Aplikasi MySQL Server link

Lalu kita meng-install mysql-server pada Ubuntu Server. mysql-server disini sebagai tempat database web aplikasi wordpress. Kita dapat mengetik perintah apt install mysql-server.

  apt install mysql-server
  

Install Aplikasi PHPmyAdmin link

Setelah aplikasi mysql-server telah di-install maka selanjutnya ialah aplikasi phpmyadmin. phpmyadmin berguna sebagai mengelola tabel dan data pada database mysql-server melalui web. Kita dapat mengetik perintah apt install phpmyadmin.

  apt install phpmyadmin
  

Saat penginstall phpmyadmin maka akan muncul tampilan konfigurasi phpmyadmin yang dimana ia meminta untuk memilih web aplikasi seperti apache2 atau lighttpd untuk melayani aplikasi phpmyadmin . dikarenakan kita sudah menginstall aplikasi apache2 maka kita pilih yes pada kolom apache2 dengan tekan spacebar keyboard.

Setelah itu kita pilih yes dengan tekan spacebar keyboard untuk menginstall dbconfig-common pada mysql-server.

Kita buat password dengan mengetik praktikan untuk user database phpmyadmin. lalu kita tekan ENTER untuk melanjutkan setup phpmyadmin.

Repeat password yang kita telah beri pada user database phpmyadmin.

Download file WordPress link

Download CMS WordPress memakai wget dengan mengetik perintah wget wordpress.org/latest.tar.gz.

  wget wordpress.org/latest.tar.gz
  

Setelah download selesai, kita lihat apakah file download yang tadi ada pada direktori yang sekarang kita akses. Kita dapat mengetik perintah ls -l.

  ls -l
  

Kalau sudah ada file wordpressnya. kita dapat uncompress file wordpress memakai perintah tar -xzf latest.tar.gz. Setelah berhasil ketik perintah ls -l kita bisa lihat ada folder bernama wordpress.

  tar -xzf latest.tar.gz
  

Buat Config WordPress pada Sites Apache2 link

Copy file template yang ada pada apache2 yaitu 000-default.conf di-rename sebagai acsl-2024.com.conf dengan mengetik perintah cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/acsl-2024.com.conf.

  cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/acsl-2024.com.conf
  

Kita edit file acsl-2024.com.conf dengan ketik perintah nano /etc/apache2/sites-available/acsl-2024.com.conf.

  nano /etc/apache2/sites-available/acsl-2024.com.conf
  

Lalu kita edit variable VirtualHost, Servername, DocumentRoot pada file acsl-2024.com.conf. lalu save konfigurasi dengan cara tekan CTRL+X , Y lalu tekan ENTER.

Penjelasan konfigurasi Apache2 dibawah adalah sebuah virtualhost pada aplikasi apache2. Berikut adalah penjelasan dari setiap barisnya:

• <VirtualHost 192.168.10.123:80>: Ini adalah konfigurasi alamat IP dan port yang virtualhost akan melayani. Dalam hal ini, virtualhost akan melayani permintaan yang masuk ke IP address 192.168.10.123 pada port 80.

• ServerName www.acsl-2024.com: Ini adalah konfigurasi nama server untuk virtualhost. Dalam hal ini, nama servernya adalah www.acsl-2024.com. Ini adalah bagian dari permintaan HTTP yang digunakan untuk mengarahkan klien ke virtualhost yang benar.

• ServerAdmin [email protected]: Ini adalah konfigurasi alamat email administrator server untuk virtualhost. Ini adalah alamat email yang digunakan untuk mengirimkan pesan saat kesalahan server.

• DocumentRoot /var/www/: Ini menentukan web direktori dimana file yang diminta oleh klien akan dicari. Dalam hal ini, file akan dicari di dalam direktori web adalah /var/www/.

• ErrorLog ${APACHE_LOG_DIR}/error.log: Ini adalah konfigurasi lokasi file log untuk menyimpan pesan kesalahan yang terjadi pada server. Variabel ${APACHE_LOG_DIR} secara default log bawaan Apache menggunakan direktori /var/log/apache2.

• CustomLog ${APACHE_LOG_DIR}/access.log combined: Ini adalah konfigurasi lokasi file log untuk menyimpan catatan akses server. Catatan akses ini mencatat setiap permintaan yang diterima oleh server, bersama dengan detailnya seperti alamat IP klien, waktu permintaan, dan hasil permintaan.

  <VirtualHost 192.168.10.123:80>
        ServerName www.acsl-2024.com
        ServerAdmin [email protected]
        DocumentRoot /var/www/

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
  

Buat Include PHPMyAdmin pada Config Apache2 link

Kita edit file apache2.conf dengan mengetik perintah nano /etc/apache2/apache2.conf.

  nano /etc/apache2/apache2.conf
  

tekan tombol keyboard Pg Down untuk turun tulisan dokumen ke paling bawah dan ketik config Include /etc/phpmyadmin/apache2.conf. lalu save konfigurasi dengan cara tekan CTRL+X , Y lalu tekan ENTER.

  .....
Include /etc/phpmyadmin/apache.conf
  

Disable Website Default dan Enable Website Baru link

Ketik perintah a2ensite acsl-2024.com.conf untuk men-enable website wordpress yang kita telah buat tadi.

  a2ensite acsl-2024.com.conf
  

Ketik perintah a2dissite 000-default.conf untuk men-disable website bawaan dari apache2 agar bisa di-replace website wordpress.

  a2dissite 000-default.conf
  

Copy folder WordPress ke DocumentRoot link

Kita copy semua file yang berada folder yang bernama wordpress ke folder /var/www/ dengan perintah cp -r wordpress/* /var/www/

  cp -r wordpress/* /var/www/
  

Copy dan Rename File PHP WordPress link

Kita copy dan rename file PHP WordPress yang bernama wp-config-sample.php menjadi wp-config.php agar kita bisa menyalakan setup wordpress pada web browser. Dengan ini kita bisa ketik perintah cp /var/www/wp-config-sample.php /var/www/wp-config.php.

  cp /var/www/wp-config-sample.php /var/www/wp-config.php
  

Lalu kita buka file wp-config.php yang kita telah buat sebelumnya dengan perintah nano /var/www/wp-config.php.

  nano /var/www/wp-config.php
  

Pada config ini kita akan menaruh DB_NAME, DB_USER, dan DB_PASSWORD untuk database wordpress. karena database untuk wordpress belum kita buat. Kita lewati dahulu untuk config ini dengan cara tekan CTRL+X saja.

Buat User dan Database pada MySQL untuk WordPress link

Ketik perintah mysql untuk masuk ke mysql command dengan user root agar kita bisa buat user dan database untuk wordpress.

  mysql
  

Kita buat database yang bernama wordpress dengan mode karakter data dengan utf8 dan aturan set karakter data dengan utf_unicode_ci.

  CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
  

Kita buat user yang bernama wordpress dengan password 12345678 dengan jenis password mysql_native_password.

  CREATE USER 'wordpress'@'%' IDENTIFIED WITH mysql_native_password BY '12345678';
  

Kita beri semua user yang bernama wordpress untuk diberi akses hak istimewa ke database yang bernama wordpress.

  GRANT ALL ON wordpress.* TO 'wordpress'@'%';
  

Lalu kita refresh hak istimewa pengguna di mysql.

  FLUSH PRIVILEGES;
  

Setelah semua selesai, lalu kita keluar dari sql command.

  exit;
  

Edit File PHP WordPress link

Edit file wp-config.php untuk memberikan akses wordpress ke dalam database mysql dengan ketik perintah nano /var/www/wp-config.php.

  nano /var/www/wp-config.php
  

Lalu kita edit pada kolom variable DB_NAME dengan database yang bernama wordpress. Edit juga variable DB_USER isi dengan user wordpress dan variable DB_PASSWORD isi dengan password 12345678. lalu save konfigurasi dengan cara tekan CTRL+X , Y lalu tekan ENTER.

  // ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'wordpress' );

/** Database username */
define( 'DB_USER', 'wordpress' );

/** Database password */
define( 'DB_PASSWORD', '12345678' );
  

Restart Service Apache2 dan MySQL link

Setelah disimpan lalu kita restart service apache2 dan mysql untuk menyegarkan config-config yang telah kita edit sebelumnya.

  systemctl restart apache2.service
systemctl restart mysql.service
  

Check Database WordPress pada Web PHPMyAdmin link

buka browser pada Windows kita, lalu kita ketik url dengan IP Address yang telah kita config sebelumnya yaitu untuk wordpress kita masukan VirtualHost pada Apache2 config dengan Interface Adapter 1 pada VirtualBox. Pada Tutorial ini memakai IP Address 192.168.10.123 untuk interface pertama pada virtualbox enp0s3 yaitu dengan mengetik pada urlbar http://192.168.10.123/phpmyadmin

Setelah dapat mengakses ke phpmyadminnya, kita masukan username dan password pada login phpmyadmin dengan username wordpress dan password 12345678.

Ketika berhasil login pada phpmyadmin, kita klik ke menu bar yang bertulisan Basis data atau Databases.

Database dapat dilihat pada baris Basis data atau Databases terdapat database yang bernama wordpress. sampai disini untuk praktek pada Ubuntu Server sudah selesai.

Setup WordPress link

Setelah kita check database wordpress maka kita bisa melanjutkan setup wordpress dengan mengetik alamat url IP Address Adapter 1 VirtualBox pada urlbar web browser http://192.168.10.123/wp-admin/install.php.

Isikan form data pada halaman wordpress, bisa sesuaikan gambar dibawah atau sesuai keinginan praktikan. Setelah terisi semua klik button Install WordPress yang berada sebelah kiri bawah lalu tunggu beberapa detik untuk wordpress melakukan instalasinya.

Setelah selesai menginstall login dengan username dan password yang kita buat saat setup wordpress.

Hasil link

Setelah berhasil login kita bisa edit dashboard yang kita mau, seperti mengedit content, install plugin, dan memilih tema untuk wordpress kita.