LAPORAN KERJA PRAKTEK

(1)

ii

LAPORAN KERJA PRAKTEK

PT WHELLO INDONESIA PRIMA PEKANBARU PENGGUNAAN PLUGIN PAGE BUILDER WP BAKERY

Muhamad Ramadhani Zuliansyah 6304181097

PROGRAM STUDI REKAYASA PERANGKAT LUNAK JURUSAN TEKNIK INFORMATIKA

POLITEKNIK NEGERI BENGKALIS BENGKALIS- RIAU

2022

(2)

iii

(3)

iv

KATA PENGANTAR

Puji dan syukur peneliti panjatkan doa kepada Allah, karena berkat dan rahmat-Nyalah penulis dapat melaksankan kerja praktek dan menyelesaikan laporan kerja praktek yang dilaksanakan di kantor Badan Kepegawaian Pendidikan dan Pelatihan Kabupaten Bengkalis pada Bidang Pengadaan, Mutasi, Dan Promosi.

Shalawat serta salam semoga tercurahkan kepada Nabi Muhammad. Terima kasih kepada semua pihak-pihak yang terkait dalam pelaksanaan kerja praktek dan menyelesaikan laporan kerja praktek ini antara lain :

1. Bapak Ir. Joni Caster, MT sebagai Direktur Politeknik Negeri Bengkalis.

2. Ibu Rezki Kurniati, M.Kom sebagai Ketua Program Studi Rekayasa Perangkat Lunak.

3. Bapak Depandi Enda, M.Kom sebagai Dosen Pembimbing Kerja Praktek Politeknik Negeri Bengkalis.

4. Bapak Fajri Profesio Putra, M.Cs sebagai kordinator Kerja Praktek Program Studi Rekayasa Perangkat Lunak Politeknik Negeri Bengkalis.

5. Seluruh Dosen Prodi D4 Rekayasa Perangkat Lunak.

6. Bapak Feri Murdeni sebagai Kepala Cabang sekaligus Pembimbing kerja praktek di PT Whello Indonesia Prima Pekanbaru.

Dalam pelaksanaan kerja praktek dan pembuatan laporan kerja praktek masih terdapat banyak keterbatasan dan kekurangan sehingga jauh dari kata sempurna.

Kritik dan saran serta permohonan maaf dari pihak-pihak yang terkait sangat diharapkan dapat membangun kesempurnaan.

Bengkalis, 30 Juni 2022

Muhamad Ramadhani Zuliansyah

(4)

v

DAFTAR ISI

LEMBAR PENGESAHAN ... Error! Bookmark not defined.

KATA PENGANTAR ... iii

DAFTAR ISI ... v

DAFTAR GAMBAR ... vii

DAFTAR TABEL ... ix

DAFTAR LAMPIRAN ... x

BAB I. PENDAHULUAN ... 1

1.1 Latar Belakang Pemikiran KP ... 1

1.2 Tujuan dan Manfaat KP ... 1

1.3 Luaran Proyek Kerja Praktek ... 2

BAB II. GAMBARAN UMUM INSTANSI ... 3

2.1 Sejarah Singkat Instansi ... 3

2.2 Struktur Organisasi Instansi ... 4

2.3 Ruang Lingkup Instansi ... 4

BAB III. BIDANG PEKERJAAN SELAMA KP... 6

3.1 Menyelesaikan Pelatihan Online... 6

3.2 Menyelesaikan pelatihan HTML, CSS, tugas PHP dan tugas wordpress . 7 3.3 Redirect http://ctteurope.com/ ke https://ctteurope.com/, belajar dasar wordpress ... 11

3.4 Membuat Single Page, Page, Dan Archive Page Pada Website Perumahaninfo.Com ... 11

3.5 Mengikuti Bootcamp belajar membuat Header, Footer, dan Banner ... 12

3.6 Mengikuti Bootcamp Belajar Function, ShortCode, dan WP Query ... 13

3.7 Mengikuti Bootcamp belajar Hook wordpress ... 14

3.8 Mengikuti Bootcamp belajar plugin Visual Composer Page Builder ... 15

3.9 Mengajar Siswa Magang SMK Mengenai Wordpress... 18

BAB IV. PENGGUNAAN PLUGIN PAGE BUILDER WP BAKERY ... 20

4.1 Metodologi ... 20

4.1.1 Prosedur Pembuatan Sistem ... 20

4.1.2 Metodologi Pengumpulan Data ... 20

(5)

vi

4.1.3 Proses Perancangan ... 20

4.1.4 Tahapan dan Jadwal Pelaksanaan ... 20

4.2 Perancangan dan Implementasi ... 21

4.2.1 Analisis Data ... 21

4.2.2 Rancangan Sistem ... 21

4.2.3 Implementasi Sistem ... 27

4.2.4 Dampak Implementasi Sistem ... 30

BAB V. PENUTUP ... 31

5.1 Kesimpulan ... 31

5.2 Saran ... 31

DAFTAR PUSTAKA ... 32

(6)

vii

DAFTAR GAMBAR

Gambar 3. 1 Sertifikat PHP ... 6

Gambar 3. 2 Sertifikat Javascript ... 7

Gambar 3. 3 Sertifikat HTML & CSS ... 8

Gambar 3. 4 Tugas php yang diberikan ... 8

Gambar 3. 5 Kodingan class employe ... 10

Gambar 3. 6 Theme Wordpress ... 11

Gambar 3. 7 Redirect http ke https... 11

Gambar 3. 8 Tampilan halaman single page perumahan ... 12

Gambar 3. 9 ppt belajar header, footer, dan banner ... 12

Gambar 3. 10 Tampilan Header dan Banner ... 13

Gambar 3. 11 Tampilan Footer ... 13

Gambar 3. 12 Kodingan Shortcode banner ... 14

Gambar 3. 13 Tampilan edit page wordpress... 14

Gambar 3. 14 Kodingan Hook wordpress ... 15

Gambar 3. 15 Tampilan plugin WPBakery yang terinstal ... 15

Gambar 3. 16 Kodingan untuk membuat custom elemen WPBakery ... 16

Gambar 3. 17 Tampilan edit page menggunakan WPBakery ... 17

Gambar 3. 18 Tampilan elemen page builder ... 17

Gambar 3. 19 form dari custom elemen ... 17

Gambar 3. 20 Email dari pembimbing lapangan ... 18

Gambar 3. 21 PPT pengenalan wordpress ... 18

Gambar 3. 22 PPT belajar header, footer, dan banner ... 18

Gambar 3. 23 PPT belajar hook wordpress ... 19

Gambar 3. 24 PPT belajar menggunakan function, shortcode, dan WP Wuery ... 19

Gambar 3. 25 documentasi mengajar wordpress kepada anak magang SMK ... 19

Gambar 4. 1 Data post yang akan digunakan ... 21

Gambar 4. 2 Tampilan untuk mengupload plugin ... 21

Gambar 4. 3 Tampilan plugin yang sudah terinstall di menu plugin ... 22

Gambar 4. 4 Shortcode untuk menampilkan data ... 23

Gambar 4. 5 Mendaftarkan fungsi custom elemen ... 23

Gambar 4. 6 Fungsi custom elemen ... 23

Gambar 4. 7 kodingan untuk mengambil senua tipe post ... 24

Gambar 4. 8 membuat form custom elemen ... 25

Gambar 4. 9 Kodingan untuk membuat custom elemen ... 26

Gambar 4. 10 Step 1 untuk mengakses custom elemen ... 27

Gambar 4. 11 Step 2 untuk mengakses custom elemen ... 27

Gambar 4. 12 Step 3 untuk mengakses custom elemen ... 27

Gambar 4. 13 Tampilan custom elemen ... 28

Gambar 4. 14 Step 3 untuk mengakses custom elemen ... 28

Gambar 4. 15 Tampilan form custom elemen ... 28

Gambar 4. 16 form custom elemen ... 29

(7)

viii

Gambar 4. 17 Tampilan admin wordpress edit page ... 29

Gambar 4. 18 Hasil tampilan dari custom elemen ... 30

(8)

ix DAFTAR TABEL

Tabel 4. 1 Tahapan dan Jadwal ... 20

(9)

x DAFTAR LAMPIRAN

Lampiran 1 Surat Keterangan Kerja Praktek ... 33

Lampiran 2 Form Penilaian Kerja Praktek... 34

Lampiran 3 Sertifikat Kerja Praktek ... 35

Lampiran 4 Kegiatan Harian ... 36

(10)

1 BAB I. PENDAHULUAN

1.1 Latar Belakang Pemikiran KP

Kerja Praktek adalah langkah awal untuk memasuki dunia kerja yang sebenarnya untuk membandingkan ilmu yang didapat selama perkuliahan dengan yang ada dilapangan. Kerja Praktek dapat dikatakan sebagai ajang simulasi profesi mahasiswa Teknik Informatika Prodi Rekayasa Perangkat Lunak.

Dari hal-hal diatas maka penulis melakukan kerja praktek di PT Whello Indonesia Prima dengan latar belakang Web Developer yang sesuai dengan program studi D4 Rekayasa Perangkat Lunak sebagai Web Developer. Mengingat dengan semakin majunya teknologi saat ini, banyak instansi atau perusahaan yang memanfaatkan teknologi dalam pengembangan usahanya. Salah satunya perusahaan yang memenfaat kan teknologi dalam usahanya adalah PT Whello Indonesia Prima. Whello merupakan perusahaan yang bergerak dalam jasa Pembuatan Website, SEO(Search Engine Optimization), SEA(Search Engine Advertising), Social Media, jasa pembuatan aplikasi, dan Copywriting dengan didukung oleh tenaga yang professional dibidangnya dengan hasil yang sangat memuaskan.

1.2 Tujuan dan Manfaat KP

Tujuan dilakukannya dari kegiatan kerja praktik antara lain :

1. Mengenal dunia pekerjaan yang sesungguhnya dan menyesuaikan diri dengan dunia kerja yang sebenarnya.

2. Menerapkan ilmu yang telah dipelajari selama perkuliahan dan mempelajari ilmu baru yang belum pernah dipelajari dan di dapatkan di perkuliahan.

3. Mempelajari ilmu baru di PT Whelo Indonesia Prima.

4. Sebagai salah satu persyaratan dalam menyelesaikan pendidikan Sarjana

Terapan Rekayasa Perangkat Lunak di Politeknik Negeri Bengkalis.

(11)

2 Manfaat yang didapatkan dari kegiatan kerja praktik antara lain :

1. Mendapatkan ilmu baru dan pengalaman dalam bidang Web Develepoer khusus nya Wordpress.

2. Meningkatkan kerja sama antara pihak instansi dengan lembaga Pendidikan khususnya Program studi D4 Rekayasa Perangkat Lunak.

3. Mendapatkan bonus dari instansi.

1.3 Luaran Proyek Kerja Praktek

Berdasarkan kegiatan yang sudah dilakukan selama proses kerja praktek

berlangsung selama 4 bulan yang dimulai dari 31 januari 2022 sampai dengan 31

mei 2022 maka target luaran yang diharapkan setelah melaksanakan program kerja

ialah dapat mempelajari dan menggunakan wordpress lebih mendalam.

(12)

3 BAB II. GAMBARAN UMUM INSTANSI

2.1 Sejarah Singkat Instansi

Whello Indonesia Prima didirikan pada mei 2017 di Pekanbaru, indonesia sebagai perluasan tim pengembangan dari Whello BV Amsterdam. Whello adalah full service digital marketing agency yang berasal dari Amsterdam dan kini membuka cabang di Indonesia, yaitu di Bali dan Pekanbaru (Riau).

Whello Indonesia Prima memberikan layanan berupa jasa pembuatan web, jasa SEO, jasa SEA, pembuatan konten, dan jasa beriklan di sosial media. Whello memiliki keinginan untuk tumbuh bersama customer. Baik itu keinginan untuk meningkatkan conversion, atau keinginan untuk muncul di halaman pertama Google. Whello Indonesia Prima cabang pekanbaru sendiri lebih fokus kepada jasa yang bergerak di bidang Web Developer seperti jasa pembuatan website toko online, website perusahaan, website travel dan website hotel dan pariwisata.

Gambar 2. 1 Logo PT Whello

Arti logo Whello sendiri ialah kami ingin meniru maskot kami yaitu paus.

Paus adalah hewan yang mengesankan dengan percikan terbesar. Komunikasi yang

bertujuan adalah dasar dari semua yang dilakukan paus. Dia mampu melakukan

kontak dengan rekan-rekannya dari jarak yang sangat jauh melalui gelombang

suara. Paus adalah ahli komunikasi dan menggunakan energinya dengan hemat. Dia

hanya menggunakan apa yang dia butuhkan.

(13)

4 2.2 Struktur Organisasi Instansi

Gambar 2. 2 Struktur Organisasi Instansi

Struktur organisasi Whello Indonesia diuraikan sebagai berikut : a. Web Developer.

b. SEO specialist.

c. SEA specialist.

d. Sales and Online Market Research.

e. Project Coordinator.

f. Digital Marketing Consultant.

g. Design Specialist.

h. Copywriter.

2.3 Ruang Lingkup Instansi

Adapun uraian Tugas dan Fungsi masing-masing bidang, adalah sebagai berikut:

1. Web Developer

Web Developer mempunyai tugas dalam membuat dan mengembangan website serta mengelola website.

2. SEO Specialist

SEO Specialist bertugas untuk mengoptimalkan kinerja halaman website

agar dapat muncul di peringkat pertama mesin pencari.

(14)

5 3. SEA Specialist

SEA Specialist bertugas untuk mengiklan bisnis di Google.

4. Sales and Online Market Research

Sales and Online Market Research bertugas analisa strategi marketing apa dan layanan Whello yang mana yang paling dibutuhkan klien.

5. Project Coordinator

Project Coordinator bertugas menyelesaikan dokumen proyek, memecahkan masalah proyek dan semua berkaitan dengan perencanaan dan pengendalian proyek.

6. Digital Marketing Consultant.

Digital Marketing Consultant bertugas menciptakan dan menerapkan strategi digital marketing untuk berbagai sektor bisnis.

7. Design Specialist

Design Specialist bertugas mendesign website orderan klien.

8. Copywriter

Copywriter bertugas menulis konten yang dapat mengkonversi pengunjung

website tersebut menjadi customer.

(15)

6 BAB III. BIDANG PEKERJAAN SELAMA KP

Spesifikasi tugas kerja prakek yang dilaksanakan mingguan diantaranya :

3.1 Menyelesaikan Pelatihan Online

Menyelesaikan pelatihan online PHP, Javascript, dan JQuery di website Progate. Mengerjakan tugas yang dengan menerapkan konsep oop untuk membuat menambah pengguna, menghubungkan class, menampilkan data pengguna, menghubungkan class dengan menggunakan id. Target yang diharapkan dalam menyelesaikan pelatihan online yakni satu minggu dan mendapatkan sertifikat PHP, Javascript, dan JQuery. Tidak ada kendala yang dihadapi, sertifikat bukti telah menyelesaikan pelatihan yakni :

Gambar 3. 1 Sertifikat PHP

(16)

7 Gambar 3. 2 Sertifikat Javascript

3.2 Menyelesaikan pelatihan HTML, CSS, tugas PHP dan tugas wordpress Menyelesaikan pelatihan online HTML, CSS diwebsite Progate, tugas PHP dan tugas wordpress yang diberikan.

Hal-hal di pelajari di pelatihan HTML dan CSS : 1. Flexbox

2. Responsive website 3. Font size responsive 4. Header responsive 5. Footer responsive

Target yang diharapkan dapat menyelesaikan tugas yang berikan yakni satu minggu

dan mendapatkan sertifikat dan menyelesaikan tugas dengan benar. Tidak ada

kendala yang dihadapi. Hasil pekerjaan tersebut yakni :

(17)

8 Gambar 3. 3 Sertifikat HTML & CSS

Gambar 3. 4 Tugas php yang diberikan

(18)

9

<?php

class Employee{

protected $host = "localhost";

protected $username = "root";

protected $password = "";

protected $dataBase = "data_employee";

protected $data = "";

public function __construct(){

$this->konek = mysqli_connect($this->host, $this->username , $this->password ,$this->dataBase);

}

// Fungsi Menampilkan data devisi public function tampilDevisi(){

$divisi = mysqli_query($this->konek,"SELECT * FROM data_divisi ORDER BY id DESC");

$rows=[];

while($row = mysqli_fetch_assoc($divisi)){

$rows[] = $row;

}

return $rows;

}

// Fungsi Menampilkan data gaji public function tampilGaji(){

$gaji = mysqli_query($this->konek,"SELECT * FROM data_gaji");

return $gaji;

}

// Fungsi Menampilkan data public function tampilData(){

$data = mysqli_query($this->konek,"SELECT * FROM data_karyawan ORDER BY id DESC");

return $data;

}

// Fungsi menambah data

public function tambahData($data){

$name = htmlspecialchars($data["name"]);

$age = htmlspecialchars($data["age"]);

$division = htmlspecialchars($data["division"]);

$salary = htmlspecialchars($data["salary"]);

$gaji = htmlspecialchars($data["gaji"]);

if($gaji === "Gaji Naik"){

$salary = $salary * 1.1;

} else if($gaji === "Gaji Turun"){

$salary = $salary - ($salary * 0.05);

} else{

$salary = $salary;

}

mysqli_query($this->konek, "INSERT INTO data_karyawan SET name='$name',age='$age',division='$division',salary='$salary'");

echo "<script>

alert('Data berhasil ditambahkan!');

document.location.href='../index.php';

</script>";

}

// Menampilkan data per id public function dataId($id){

$result = mysqli_query($this->konek, "SELECT * FROM data_karyawan WHERE id=$id");

$rows=[];

while($row = mysqli_fetch_assoc($result)){

(19)

10

$rows[] = $row;

}

return $rows;

}

// fungsi Update data

public function updateData($data){

$id = $data["id"];

$name = htmlspecialchars($data["name"]);

$age = htmlspecialchars($data["age"]);

$division = htmlspecialchars($data["division"]);

$salary = htmlspecialchars($data["salary"]);

$gaji = htmlspecialchars($data["gaji"]);

if($gaji === "Gaji Naik"){

$salary = $salary * 1.1;

} else if($gaji === "Gaji Turun"){

$salary = $salary - ($salary * 0.05);

} else{

$salary = $salary;

}

$query ="UPDATE data_karyawan

SET name='$name',age='$age',division='$division',salary='$salary' WHERE id=$id";

if(mysqli_query($this->konek,$query ) ){

mysqli_affected_rows($this->konek);

echo "<script>

alert('Data berhasil di Update!');

</script>";

};

}

//fungsi menghapus data

public function hapusData($id){

if (mysqli_query($this->konek,"DELETE FROM data_karyawan WHERE id=$id")){

echo "<script>

alert('data sudah di hapus');

</script>";

};

} }

?>

Gambar 3. 5 Kodingan class employe

(20)

11 Gambar 3. 6 Theme Wordpress

3.3 Redirect http://ctteurope.com/ ke https://ctteurope.com/, belajar dasar wordpress

Meredirect halaman suatu website yang telah terinstall SSL. Target yang diharapkan dalam menyelesaikan masalah tersebut yakni satu minggu. Tidak ada kendala pada saat menyelesaikan semua tugas yang diberikan. Hasil pekerjaan yakni:

Gambar 3. 7 Redirect http ke https

3.4 Membuat Single Page, Page, Dan Archive Page Pada Website Perumahaninfo.Com

Membuat halaman single page , page, dan archive page pada website

perumahaninfo.com. Target dalam menyelesaikan masalah tersebut yakni satu

minggu. Ada kendala sedikit pada pembuatan archive page karena masih terlalu

dasar pemahaman dan tatacara pembuatannya sesuai aturan perusahaan. Hasil

pekerjaan yakni:

(21)

12 Gambar 3. 8 Tampilan halaman single page perumahan

3.5 Mengikuti Bootcamp belajar membuat Header, Footer, dan Banner Mengikuti bootcamp untuk belajar membuat Header, Footer, dan Banner yang diadakan Whello sendiri. Target dalam meneyelasaikan belajar tersebuat yakni satu minngu. Tidak ada kendala ditemui dalam belajar wordpress tersebut.

Hasil pekerjaan ialah :

Gambar 3. 9 ppt belajar header, footer, dan banner

(22)

13 Gambar 3. 10 Tampilan Header dan Banner

Gambar 3. 11 Tampilan Footer

3.6 Mengikuti Bootcamp Belajar Function, ShortCode, dan WP Query Mengikuti bootcamp untuk belajar membuat Function, ShortCode, dan QP Query yang diadakan Whello sendiri. Target dalam meneyelasaikan belajar tersebuat yakni satu minngu. Tidak ada kendala ditemui dalam belajar wordpress tersebut. Hasil pekerjaan ialah :

/**

* page banner shortcode */

add_shortcode( 'banner_app', function($atts){

ob_start();

extract(shortcode_atts(

array(

'text' => '', 'text_button' => '', 'image' => '', 'image_size' => '', 'extra_class' => '',

), $atts ));

?>

(23)

14

<?= $text ?>

</div>

</div>

<?php } );

Gambar 3. 12 Kodingan Shortcode banner

Gambar 3. 13 Tampilan edit page wordpress

3.7 Mengikuti Bootcamp belajar Hook wordpress

Belajar menggunakan hook wordpress dan membuat hook wordpress yang diadakan Whello sendiri. Target dalam meneyelasaikan belajar tersebuat yakni satu minngu. Tidak ada kendala ditemui dalam belajar wordpress tersebut. Hasil pekerjaan ialah :

/**

* custom action dan filters *

*/

function button(){

echo "<button>lihat semua post...</button>";

}

add_action( 'button_readmore', 'button' );

function boundry_line(){

echo "<hr class='mt-3'>";

}

add_action( 'boundry_line', 'boundry_line');

/**

* background add */

function date_post(){

$date = get_the_time('F j, Y');

echo $date;

}

add_action( 'date_post', 'date_post');

// custom button text

function button_custom_text(){

echo 'MENU';

}

(24)

15

add_filter( 'button_name', 'button_custom_text' );

// text tirtle back to default function text_title($title){

$post_id = get_the_ID( );

if($post_id == 24){

$title = 'ini title';

}

return $title;

}

add_filter( 'title_add', 'text_title' );

/**

* skip urutan post ganjil */

function skip_post(){

$img = get_the_post_thumbnail_url();

$show = "<div class='col mt-2 '><div class='card'style='width: 25rem;'><img src='$img' class='w-100' alt=''>

</div></div>";

return $show;

}

add_filter( 'skip', 'skip_post');

Gambar 3. 14 Kodingan Hook wordpress

3.8 Mengikuti Bootcamp belajar plugin Visual Composer Page Builder Mengikuti Bootcamp belajar plugin Visual Composer Page Builder yang diadakan Whello sendiri. Target dalam meneyelasaikan belajar tersebuat yakni satu minngu. Tidak ada kendala ditemui dalam belajar wordpress tersebut. Hasil pekerjaan ialah :

Gambar 3. 15 Tampilan plugin WPBakery yang terinstal

vc_map(array(

"name" => __("Bootcamp post", "bootcamp"), "base" => "post_type",

"category" => __("bootcamp element", "bootcamp"), "icon" => "icon-wpb-call-to-action",

"params" => array(

array(

"type" => "checkbox",//tipe form

"heading" => __("Type Post", "bootcamp"),//label form "param_name" => "post_type",//param name

"save_always" => true,//properti save element "admin_label" => true,// label admin

"value" => $post,//value

"description" => __("Select which post types to be displayed", "my- text-domain"),//description

), array(

"type" => "textfield",

"heading" => __("Post Per Page", "bootcamp"),

(25)

16

"param_name" => "posts_per_page", "value" => "",

"save_always" => true,

"description" => __("Select how much posts to be displayed", "my-text- domain"),

), array(

"type" => "dropdown",

"heading" => __( "Order by", "bootcamp" ), "param_name" => "order_by",

"value" => array(

"None" => "none", "ID" => "ID", "title" => "title", "name" => "name", "date" => "date", "modified" => "modified", ),

"save_always" => true, ),

array(

"heading" => __( "Order ", "bootcamp" ), "param_name" => "order",

"value" => array(

"Ascending" => "ASC", "Descending" => "DESC", ),

array(

"heading" => __( "Post Status", "bootcamp" ), "param_name" => "post_status",

"value" => array(

"Publish" => "publish", "pending" => "pending", "Draft" => "draft", "Future" => "future", "Private" => "private", ),

"dependency" => array('element' => "post_type", 'value' =>

array("page","post")),//conditional ),

array(

"type" => "checkbox",

"heading" => __( "Who Read Post", "bootcamp" ), "param_name" => "meta_value",

"value" => array(

"Cowok" => "cowok", "Cewek" => "cewek"

),

"save_always" => true, )

) ));

Gambar 3. 16 Kodingan untuk membuat custom elemen WPBakery

(26)

17 Gambar 3. 17 Tampilan edit page menggunakan WPBakery

Gambar 3. 18 Tampilan elemen page builder

Gambar 3. 19 form dari custom elemen

(27)

18 3.9 Mengajar Siswa Magang SMK Mengenai Wordpress

Mengajari siswa magang SMK dari awal mengenal wordpress dari pengenalan wordpress sampai mempelajari tentang page builder atau visual composer. Target dalam meneyelasaikan belajar tersebuat yakni satu bulan. Tidak ada kendala ditemui dalam belajar wordpress tersebut. Hasil pekerjaan ialah :

Gambar 3. 20 Email dari pembimbing lapangan

Gambar 3. 21 PPT pengenalan wordpress

Gambar 3. 22 PPT belajar header, footer, dan banner

(28)

19 Gambar 3. 23 PPT belajar hook wordpress

Gambar 3. 24 PPT belajar menggunakan function, shortcode, dan WP Wuery

Gambar 3. 25 documentasi mengajar wordpress kepada anak magang SMK

(29)

20 BAB IV. PENGGUNAAN PLUGIN PAGE BUILDER WP BAKERY

4.1 Metodologi

4.1.1 Prosedur Pembuatan Sistem

Page builder merupakan plugin wordpress untuk kustomisasi tata letak dan menampilkan element content website sesuai kebutuhan. WPBakery memberi Anda kontrol penuh atas setiap elemen situs WordPress Anda. Baik Anda ingin bekerja dengan editor front-end atau Anda lebih suka editor skematik back-end.

Cara menggunakan plugin ini pertama kita harus mendapatkan plugin ini dengan cara membeli dari situs resmi nya https://wpbakery.com/ dikarenakan untuk menggunakan plugin ini berbayar, akan tetapi banyak fitur yang bisa sangat membantu anda dalam mendevelopmen website dengan menggunakan worpress.

4.1.2 Metodologi Pengumpulan Data

Data yang dibutuhkan untuk membuat custom element pada page builder WPBakery adalah data post yang dimiliki dan yang ingin di gunakan untuk nantinya di tampilkan ke halaman yang dinginkan.

4.1.3 Proses Perancangan

Proses perancangan akan dimulai dengan menganalisis data,membuat custom post type untuk menampung data, membuat shortcode untuk nantinya menampilkan data, dan terakhir membuat custom elemen WPBakery.

4.1.4 Tahapan dan Jadwal Pelaksanaan

Tabel 4. 1 Tahapan dan Jadwal

No Uraian

Kegiatan

Bulan

Januari Februari Maret April Mei

1 2 3 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3

1 Persiapan 2 Pelaksanaan 3 Penilaian 4 Penyampaian

laporan

(30)

21 4.2 Perancangan dan Implementasi

4.2.1 Analisis Data

Proses pengambilan datanya sendiri dari post type yang telah diisi dengan data yang dibutuhkan dan nantinya akan digunakan untuk ditampilkan di halaman sebuah website. Seperti dibawah ini :

Gambar 4. 1 Data post yang akan digunakan

4.2.2 Rancangan Sistem

Ada beberapa tahapan dalam perancangan sebagai berikut : 1. Menginstall plugin WPbakery

a. Menginstall plugin WPBakery yang sudah di download dengan cara buka halaman admin WPBakery, setelah itu klik menu plugin pada menu admin wordpress, lalu add plugin dengan mengklik tombol add new dan upload plugin WPBakery.

Gambar 4. 2 Tampilan untuk mengupload plugin

(31)

22 b. Setelah install plugin selesai, selanjutnya cek apakah plugin berhasil diinstall dan aktifkan plugin jika sudah terinstall, jika belum coba ulangi kembali. Contoh plugin yang telah terinstall dan diaktifkan:

Gambar 4. 3 Tampilan plugin yang sudah terinstall di menu plugin

2. Membuat shortcode untuk menampilkan data post

a. Membuat shortcode yang nantinya akan digunakan untuk menampilkan data yang diinginkan sesuai dengan data yang telah ada dan shortcode nya diletakkan di file function.php pada folder tema yang sedang digunakan. Pembuatan shortcode sebagai berikut:

/**

* POST TYPE */

add_shortcode( 'post_type', function($atts){

ob_start();

/**

* parameter initial */

extract(shortcode_atts(

array(

'post_type' => '', 'posts_per_page' => '', 'order_by' => '', 'order' => '', 'post_status' => '', 'meta_value' => '', ),

$atts ));

$post_type = explode(',', $post_type);

$args = array(

'post_type' => $post_type, 'posts_per_page' => $posts_per_page, 'order_by' => $order_by, 'order' => $order, 'post_status' => $post_status, );

if(!empty($meta_value)){

$meta_value = explode(',', $meta_value);

$args['meta_query'] = array(

array(

'key' => 'pembaca',

(32)

23

'value' => $meta_value, ),

);

}

$query_post = new WP_Query($args);

?>

<?php

while( $query_post->have_posts() ){

$query_post->the_post();

$id = get_the_ID( );

$title = get_field('title')?:get_the_title();

$category = get_the_terms( $id, $genre_tax );

$slug = get_post_field('post_name');

$content = get_field('content')?:get_the_content();

$content = (str_word_count($content) > 60 ? substr($content,0,200)."" : $content);

$thumbnile = get_the_post_thumbnail_url();

echo "<div class='col-6 card m-3' style='width:

20rem;'>

<h5 class='card-title'>$title</h5>

<p class='card-text'>$content</p>

</div>

</div>";

};?>

</div>

<?php

/* Restore original Post Data */

wp_reset_postdata();

return ob_get_clean();

} );

// listing shortcode

Gambar 4. 4 Shortcode untuk menampilkan data

3. Membuat custom elemen dengan vc_map(). cek Dokumentasi VC_MAP() untuk tahu lebih detail.

a. mendaftarkan custom elemen ke action vc_before_init

//mendaftarkan custom elemen ke action vc_before_init add_action( 'vc_before_init', 'vc_post_type_dua' );

Gambar 4. 5 Mendaftarkan fungsi custom elemen

b. Membuat function custom elemen contohnya :

//membuat function custom element function vc_post_type_dua(){

}

Gambar 4. 6 Fungsi custom elemen

(33)

24 c. Karena ingin menampilkan data dari custom post type ketik kodingan

di bawah ini untuk mengambil semua post type yang telah di buat

function vc_post_type_dua(){

$post_type = get_post_types(array('public' => true), 'objects');

unset($post_type["attachment"]);

$post= [];

foreach($post_type as $p){

$post[$p->name] = $p->labels->singular_name;

} }

Gambar 4. 7 kodingan untuk mengambil senua tipe post

d. Setelah itu baru lah membuat form custom elemen yang dibuat menggunakan function vc_map() :

vc_map(array(

"params" => array(

array(

"heading" => __("Type Post", "bootcamp"),//label form

"param_name" => "post_type",//param name "save_always" => true,//properti save element "admin_label" => true,// label admin

"description" => __("Select which post types to be displayed", "my-text-domain"),//description

), array(

"heading" => __("Post Per Page", "bootcamp"), "param_name" => "posts_per_page",

"value" => "", "save_always" => true,

"description" => __("Select how much posts to be displayed", "my-text-domain"),

), array(

"value" => array(

array(

"value" => array(

(34)

25

array(

"value" => array(

"dependency" => array('element' => "post_type", 'value' => array("page","post")),//conditional

), array(

"value" => array(

),

) ));

Gambar 4. 8 membuat form custom elemen

e. Untuk kodingan full seperti dibawah ini:

/**

* membuat custom element WPBakery */

//mendaftarkan custom elemen ke action vc_before_init add_action( 'vc_before_init', 'vc_post_type_dua' );

//membuat function custom element function vc_post_type_dua(){

//mengambil data post type yang ada

$post_type = get_post_types(array('public' => true), 'objects');

unset($post_type["attachment"]);

$post= [];

foreach($post_type as $p){

$post[$p->name] = $p->labels->singular_name;

}

//membuat custom element dan form yang akan digunakan vc_map( array(

"params" => array(

array(

"heading" => __("Type Post", "bootcamp"),//label form

"param_name" => "post_type",//param name "save_always" => true,//properti save element "admin_label" => true,// label admin

"description" => __("Select which post types to be displayed", "my-text-domain"),//description

),

(35)

26

array(

"heading" => __("Post Per Page", "bootcamp"), "param_name" => "posts_per_page",

"value" => "", "save_always" => true,

"description" => __("Select how much posts to be displayed", "my-text-domain"),

), array(

"value" => array(

array(

"value" => array(

array(

"value" => array(

"dependency" => array('element' => "post_type", 'value' => array("page","post")),//conditional

), array(

"value" => array(

),

) ));

}

Gambar 4. 9 Kodingan untuk membuat custom elemen

(36)

27 4.2.3 Implementasi Sistem

Setelah itu untuk implementasi sistem buat page yang ingin ditampilkan sesuai dengan custom elemen yang telah dibuat. Seperti dibawah ini :

a. Klik bagian Backend editor

Gambar 4. 10 Step 1 untuk mengakses custom elemen

b. Klik tanda tambah element bertanda merah

Gambar 4. 11 Step 2 untuk mengakses custom elemen

c. Klik kategori elemen bootcamp elemen

Gambar 4. 12 Step 3 untuk mengakses custom elemen

(37)

28 Tampilan akan seperti ini :

Gambar 4. 13 Tampilan custom elemen

d. Klik Bootcamp post untuk mengimplementasi custom elemen yang baru saja kita buat :

Gambar 4. 14 Step 3 untuk mengakses custom elemen

Maka tampilan akan menjadi seperti ini :

Gambar 4. 15 Tampilan form custom elemen

(38)

29 e. Isi form sesuai dengan kebutuhan yang akan digunakan

Gambar 4. 16 form custom elemen

Setelah itu klik tombol save change

f. Selanjutnya publish page yang barusan kita buat

Gambar 4. 17 Tampilan admin wordpress edit page

(39)

30 g. Setelah berhasil publish preview halaman yang baru saja kita buat.

Maka akan tampil sesuai data yang ada pada custom post type masing- masing dan juga penulisan html css nya. Seperti dibawah ini :

Gambar 4. 18 Hasil tampilan dari custom elemen

4.2.4 Dampak Implementasi Sistem

Kerja praktek yang telah dilakukan dengan baik di PT Whello Indonesia

Prima, Pekanbaru selama 4 bulan terhitung sejak 31 Januari 2022 sampai 31 Mei

2022. Adapun dampak implementasi pada diri sendiri adalah dapat mempelajari

dan menambah wawasan tentang wordpress lebih mendalam yang mengarah

kepada web developer wordpress. Sedangkan bagi instansi adalah untuk merekrut

karyawan baru yang sesuai dengan kriteria dari perusahaan.

(40)

31 BAB V. PENUTUP

5.1 Kesimpulan

Selama kerja praktek ini penulis berkesempatan belajar dari hal dasar hingga lebih mendalam tentang CMS Wordpress dan juga mengikuti bootcamp yang diadakan oleh PT Whello Indonesia Prima. Banyak sekali ilmu baru yang penulis dapatkan selama penulis kerja praktek di PT Whello Indonesia Prima salah satu nya yaitu cara menggunakan plugin page builder yaitu WPBakery yang dapat memudahkan developer web yang menggunakan CMS Wordpress.

5.2 Saran

Saran agar mahasiswa yang akan melaksanakan Kerja Praktek agar mempersiapkan diri dengan lebih baik dalam belajar di perkuliahan kampus.

Karena supaya mahasiswa mempunyai dasar dalam bidangnya agar nantinya tidak

terjadi kendala selama melaksanakan Kerja Praktek. Kepada mahasiswa yang akan

melaksanakan kerja praktek agar tidak berdiam diri jika tidak ada tugas yang diberi,

usahakan untuk bertanya atau belajar hal baru dengan para karyawan atau dari

sumber lainnya agar Kerja Praktek yang dilaksanakan mendapat pengalaman dan

pengetahuan yang baru.

(41)

32 DAFTAR PUSTAKA

Politeknik Negeri Bengkalis, 2022. Buku Panduan Laporan Kerja Praktek(KP) Mahasiswa Politeknik Negeri Bengkalis.

PT WHELLO INDONESIA PRIMA(whello.id), diakses tanggal 20 Juni 2022.

09.00 WIB.

(42)

33 Lampiran 1 Surat Keterangan Kerja Praktek

(43)

34 Lampiran 2 Form Penilaian Kerja Praktek

(44)

35 Lampiran 3 Sertifikat Kerja Praktek

(45)

36 Lampiran 4 Kegiatan Harian

(46)

37

(47)

38

(48)

39

(49)

40

(50)

41

(51)

42

(52)

43

(53)

44

(54)

45

(55)

46

(56)

47

(57)

48

(58)

49

(59)

50

(60)

51

(61)

52

(62)

53

(63)

54

(64)

55

(65)

56

(66)

57

(67)