Panduan Pengelolaan Laman Unit Satuan Kerja

I. Pengantar
Template Website Unit Pelaksana Teknis Pemasyarakatan di lingkungan Kementerian
Hukum dan Hak Asasi Manusia Republik Indonesia telah di kembangkan oleh Pusdatin
sebagai wujud memberikan pelayanan terbaik bagi rakyat Indonesia yang membutuhkan
akses informasi seputar kegiatan Unit Pelaksana Teknis Pemasyarakatan sebagai satuan
kerja yang berada di bawah Kemenkumham dengan mengedepankan fitur layanan yang
mudah diakses oleh pengunjung serta informasi publik yang interaktif.

Framework CMS
Website Unit Pelaksana Teknis Pemasyarakatan ini dibangun menggunakan framework
CMS Joomla versi 3.10.x yang menawarkan banyak perubahan baik dari sisi kemudahan
penggunaan, bahasa pemrograman, keamanan dan kecepatan akses.

Mendukung Versi PHP7.4

PHP7 merupakan generasi terbaru PHP yang secara serius dikembangkan oleh Tim
pengembang PHP dengan mengedepankan kecepatan akses. PHP.47 menawarkan
kecepatan akses 2X lebih cepat dari versi sebelumnya.

Tampilan Website
Website Unit Pelaksana Teknis Pemasyarakatan di lingkungan Kementerian Hukum dan
HAM ini juga menampilkan tampilan muka dan fitur layanan yang lengkap. Dengan
website baru ini diharapkan dapat memudahkan para pengunjung website yang ingin
mendapatkan informasi seputar kegiatan dan layanan Unit Pelaksana Teknis
Pemasyarakatan serta dapat memberikan perubahan suasana bagi para pengunjungnya.

II. Fitur dan Layanan Website

a. Pengumuman (Running teks)
b. Interaktif Banner (multi functions)
c. Landing pages layanan
d. Berita Pusat dan Kantor Wilayah (Auto RSS)
e. Berita Terkini
f. Galeri Social Media (Instagram dan Twitter)
g. Form Pengaduan
h. Statistik Pengunjung
i. F.A.Q (Frequently Asked Questions)
j. Hak akses admin kanwil yang lebih luas

III. Dashboard Admin Website

Langkah awal dalam pengelolaan Laman terlebih dahulu silahkan masuk ke halaman
administrator
http://NAMA_LAMAN.kemenkumham.go.id/administrator/?KODE SECURITY , untuk
URL administrator nama laman disesuaikan dengan nama domain website dan kode
security disesuaikan dengan alamat url yang diberikan oleh Pusdatin
Halaman Login

Ket: Admin laman Login menggunakan Username dan Password yang telah diberikan

1. Logo
Setelah Login, User akan diarahkan menuju halaman administrator, untuk perubahan
Nama Satker pada logo silahkan klik menu Extension > Templates > Style

Akan muncul pilihan beberapa template default, pilih dan klik Template Satuan Kerja
atau yang bertanda Bintang

User akan diarahkan menuju halaman editor template. Langkah selanjutkan klik
tombol Template Options yang berwarna Hijau

Akan muncul halaman editor template, silahkan klik menu Basic, kemudian copy
seluruh script text yang ada pada kolom Text, bias dilakukan dengan cara blok seluruh
 text atau klik pada kolom text lalu tekan ctrl+A kemudian klik kanan mouse lalu pilih
menu copy

Proses editing script bisa dilakukan langsung pada kolom text tersebut atau juga
menggunakan aplikasi script editor (notepad atau notepad++) untuk menghindari
kesalahan editing. Selanjutnya sesuaikan nama laman dengan nama domain satker
yang telah diberikan. Silahkan buka aplikasi script editor lalu paste (ctrl+v) text yang
telah dicopy sebelumnya

Kemudian edit nama Satker dan nama Kantor Wilayah sesuai dengan satuan kerja dan
lokasi kanwil masing-masing tanpa menghapus syntax script yang ada seperti
<strong></strong> dan <hr/> , lalu copy (ctrl+c) kembali script tersebut dan paste
(ctrl+v) pada kolom text yang ada di halaman editor template

2. Top Bar

Untuk bagian Top Bar proses editing

dilakukan pada halaman editing template,
masuk kembali ke halaman editor template
klik menu Basic lalu pilih menu Social Icons.
Masukan seluruh url dari social media yang
dimiliki oleh satuan kerja pada kolom
masing-masing Socmed.
 Untuk Kontak telepon, email dan waktu
pelayanan, masih pada halaman editor
template klik menu Basic lalu pilih menu
Contact Info, masukan nomor telepon,
email dan waktu pelayanan pada kolom
masing-masing yang tertera pada halaman
editor.

3. Pengelolaan Menu

Untuk mengakses Menu Manager, pastikan user harus login halaman administrator
laman. Selanjutnya pilih Menus lalu Menu Manager.

Membuat Menu Baru

Setelah mengakses Menu Manager, pada bagian
pojok kiri atas pilih tombol New untuk mulai
membuat menu baru. Lalu akan muncul
halaman form seperti di gambar disamping, di
sini kita harus menuliskan beberapa opsi untuk
pembuatan menu yang baru, diantaranya:
• Title : masukan judul untuk menu yang akan
dibuat.
• Menu Type : masukan nama sistem dari menu
tersebut.
• Description : masukan deskripsi singkat
mengenai menu tersebut.
Jika sudah, klik tombol Save & Close untuk menyimpan pembuatan menu

Setelah berhasil menyimpan, maka akan otomatis kembali ke halaman sebelumnya.

Cari menu yang sudah dibuat tadi, lalu pada bagian kanan terdapat tombol Add a
module for this menu dan klik tombol tersebut.

Selanjutnya kamu akan diminta untuk menuliskan beberapa informasi mengenai

modul yang akan kamu tambahkan, diantaranya.
 • Title : masukan judul untuk modul menu.
• Module : pilih status menjadi Published, pilih posisi modul yang
diinginkan, untuk opsi lainnya biarkan default saja.
• Menu Assignment : pilih dimana halaman modul akan ditampilkan.
• Advanced : di sini kita bisa mengatur tata letak, cache, tags, dll.
• Permissions : berikan izin untuk modul baru.
Jika sudah, klik tombol Save & Close untuk menyimpan pembuatan menu

Menambahkan Item Baru

Untuk pengelolaan Menu hal penting yang diperhatikan adalah menentukan hirarki atau
struktur dari menu yang akan dibuat tersebut, tentukan apakah menu tersebut akan menjadi
submenu atau menu utama tersendiri, jika akan menjadi submenu pastikan pemilihan parent
pada halaman editor menu sudah tepat

Setelah membuat menu baru di laman, selanjutnya kita perlu menambahkan menu ke
dalam menu tersebut. Pada halaman administrator pilih Menus > Sample Menu > Add
New Menu Item.
Lalu nanti akan tampil halaman seperti di bawah dan ada beberapa tab, diantaranya
adalah :
• Menu Title : masukan judul untuk item menu kamu.
• Details : di sini kamu harus mengisikan bagian Menu Item Type dan
Select Article, untuk opsi lain biarkan default saja.
• Link Type : masukan atribut seperti judul tautan, css khusus, gambar
tautan, dll.
• Page Display : masukan detail halaman untuk item menu baru.
• Metadata : masukan metadata untuk item menu baru, ini merupakan
salah satu cara SEO yang baik.
• Module Assignment : tetapkan modul ke item. Jangan lupa klik Save & Close
untuk membuat item baru.
Terdapat beberapa Jenis menu pada laman satker diantaranya hidden menu dan main
menu. Hidden Menu adalah menu yang tidak ditampilkan oleh modul mana pun
biasanya dinamakan menu tersembunyi. Menu ini dapat digunakan untuk membuat
URL yang tidak terlihat di halaman mana pun di menu. Contoh, ini dapat berguna saat
kita ingin membuat suatu halaman artikel dengan URL kustom yang memiliki
pengaturan tertentu (tata letak, modul) yang dapat diakses hanya melalui halaman
lain (artikel, blog, kategori, modul, dll) tapi kita tidak ingin menampilkan Item
Menunya, di Menu Bar. Sedangkan Main Menu adalah menu yang memang dibuat
untuk ditampilkan di halaman beranda laman.

Untuk membuat menu terlihat menjadi

lebih besar tidak seperti tampilan biasanya,
template yang digunakan saat ini juga
sudah mendukung penggunaan mega
menu. Mega menu berfungsi selain
menampilkan fungsi menu juga dapat
menampilan modul yang difungsikan
seperti menu dan akan tampil seolah
seperti menu pada umumnya.
Langkah awal konfigurasi mega menu ada
pada template editor, klik menu extension
> template > style lalu pilih template yang
sedang aktif digunakan (template satuan
kerja), klik tombol template option lalu klik tombol Menu lalu pilih parent menu yang
akan menggunakan mega menu.
 Akan muncul halam konfigurasi
mega menu. Tentukan lebar menu
yang diinginkan kemudian
tentukan berapa jumlah kolom
yang diinginkan kemudian
Pilih jumlah kolom kemudian
secara otomatis child menu
(submenu) yang berada di bawah
parent menu tersebut akan muncul
mengisi kolom-kolom yang
tersedia.

Klik tanda icon (+) pada masing-

masing kolom lalu aan muncul list
modul yang dapat ditampilkan
pada mega menu, Klik Insert pada
modul yang dipilih kemudian klik
save

4. Pengelolaan Slide Banner

Untuk diketahui sebagai catatan, Banner yang
digunakan pada website satker memiliki ukuran
1080 x 428 pixel.

Untuk menambah atau merubah gambar

pada slide, langkah pertama tentunya
menyiapkan gambar slider yang akan
ditampilkan. "Sebagai catatan sebaiknya jika
gambar memiliki ukuran file yang besar
sebaiknnya dilakukan proses image
compressing, cara mudahnya bisa
menggunakan aplikasi Adobe Photoshop
dengan cara melakukan penyimpanan
kembali kedalam format lain yaitu save for
web" dengan demikian kualitas ukuran gambar tidak berubah namun memiliki ukuran
file yang jauh lebih kecil. Selanjutnya mengunggah gambar tersebut kedalam website
dengan cara klik menu component > unite slider kemudian klik edit slide
 Langkah selanjutnya adalah
menduplikat banner yang sebelumnya
telah ada dengan cara klik tombol
duplicate. Kemudian klik gambar pada
slide kedua, lalu akan muncul kotak
dialog berisi file browser dimana kita diminta mengunggah gambar banner yang akan
ditampilkan. Pada bagian Upload file klik Choose Files, kemudian tentukan gambar
lalu klik Start Upload

Untuk perubahan teks pada banner, dilakukan dengan cara klik tombol edit slide
kemudian akan muncul halaman editor slide seperti berikut

Klik pada layer text yang akan dirubah kemudian lakukan edit text pada bagian kolom
text/html di sisi kanan halaman editor, perhatikan kode editor <> (jika ada) dan jangan
sampai terhapus
5. Pengelolaan Konten Berita
Untuk pengelolaan artikel berita, yang perlu diperhatikan adalah penentuan kategori
dari artikel tersebut, karena pada laman satker ini ada beberapa kategori yang perlu
diperhatikan diantaranya adalah kategori Berita
Utama dan beberapa kategori lain yang
dibutuhkan pada modul berbeda untuk
menampilkan artikel lainnya.
Langkah pertama dalam membuat konten berita
adalah menyiapkan narasi artikel tersebut. Klik
Content > Article > Add New Article, Akan muncul
halam editor dari artikel yang akan dibuat

Pada kolom Title isikan judul dari artikel berita, kemudian buat narasi berita pada
kolom editor lalu tentukan category dari artikel tersebut, arahkan pada kategori Berita
Utama
6. Menyisipkan gambar pembuka (Intro Image) pada konten berita
Untuk menyisipkan gambar pada artikel
berita sebagai gambar utama/pembuka,
klik tab Images and Links lalu akan tampil
halaman dimana Anda dapat mengunggah
gambar untuk disisipkan pada artikel berita
sebagai gambar pembuka. Klik Select
kemudian akan tampil halaman image
manager. Buat folder baru untuk agar
penempatan gambar tertata rapih dalam folder

Klik New Folder pada sisi kanan atas

kemudian masukan nama folder lalu
klik create.
Klik folder yang telah dibuat kemudian klik tombol Upload, akan muncul halaman
upload gambar, klik Browse kemudian pilih gambar lalu klik Upload. Setelah gambar
terupload, klik gambar tersebut lalu klik Insert.
Setelah berhasil menyisipkan
gambar pada kolom intro image,
klik save & close maka gambar
akan muncul pada bagian atas
halaman artikel berita ketika
berita tersebut diakses dari
halaman muka seperti gambar
dibawah ini.
7. Menyisipkan gambar didalam konten berita
Untuk menyisipkan gambar pada artikel berita, dapat dilakukan dengan cara

menggunakan toolbar yang ada pada halan editor, klik icon toolbar kemudian
akan muncul halaman Image Manager Extend, pilih gambar yang akan ditambahkan.
Jika belum ada, unggah gambar terlebih dahulu seperti cara yang telah dijelaskan
sebelumnya. Langkah selanjutnya klik gambar yang akan disisipkan, pastikan lokasi
folder gambar muncul pada kolom URL kemudian tentukan dimensi dari gambar
dengan cara mengisi ukuran gambar pada kolom dimensions. Agar dimensi gambar
tetap terlihat proporsional klik checkbox Proportional, tentukan posisi gambar yang
diingikan, klik Alignment tentukan posisi gambar, tentukan pula margin gambar yang
dibutuhkan. Untuk preview gambar sebelum ditampilkan dapat dilihat pada pojok
kanan dari halaman Image Manage Extended, kemudian klik Insert.

Setelah berhasil menyisipkan gambar pada artikel berita, klik save & close maka
gambar akan muncul dalam artikel berita ketika berita tersebut diakses dari halaman
muka seperti gambar dibawah ini.
8. Pengelolaan Layanan Satuan Kerja dan Ragam Informasi
Layanan satuan kerja memungkinkan satuan kerja menampilkan aplikasi unggulan
yang digunakan pada satuan kerja. Pada modul ini administrator satuan kerja dapat
merubah icon, merubah link direct atau menambahkan informasi lainnya berupa list
artikel seperti prosedur layanan yang ada pada satuan kerja.

Langkah pertama yang dilakukan adalah klik menu SP Page Builder > Page kemudian
akan muncul list page yang ada pada laman, klik page Home kemudian akan muncul
layout dari halaman tersebut.
Note : “Page builder hanya membantu admin dalam mengatur tata letak modul dalam
halaman, tidak semua yang ditampilkan pada halaman diatur menggunakan page builder”

Sebagian dari modul ada yang tidak di atur menggunakan page builder, diantaranya
section Top Bar, Title, Bottom dan Footer. Untuk modul-modul yang berada pada
section tersebut diatur langsung pada layout template, tidak menggunakan page
builder, tujuannya agar section tersebut dapat muncul disetiap page yang kita
inginkan.

Setelah masuk kedalam page Home, selanjutnya adalah mencari modul dari layanan
satker yang akan di edit. Scroll halaman ke bawah dari cari row dengan text block
Layanan Satuan Kerja.
Klik icon Pen yang ada di masing-masing layanan untuk melakukan perubahan pada
tiap layanan, kemudaian akan tampil halaman editor addon dari layanan tersebut.

Pada bagian Title tentukan judul

dari layanan tersebut.
Jika layanan tersebut dibuat
untuk mengarahkan ke link
tertentu silahkan tambahkan URL
dari layanan tersebut.

Untuk layanan satuan kerja yang akan

menampilkan list artikel seperti
Prosedur Layanan dan Program
Pembinaan sebelumnya admin harus
menyiapkan terlebih dahulu artikel
terkait layanan tersebut dan
menggabungkan semua artikel
tersebut kedalam satu kategori untuk
selanjutnya ditampilkan
menggunakan hidden menu dengan
menu type Category list. Langkah selanjutnya adalah menambahkan link menu hidden
tersebut pada kolom URL, aktifkan Open Link In New Tab jika menginginkan halaman
tersebut tampil pada jendela tab baru di browser.

Seperti halnya editing pada layanan satuan kerja, untuk melakukan editing pada
tombol menu ragam informasi cara yang dilakukannya pun sama, yang membedakan
hanya posisi row nya saja. Cari row dengan Text block Ragam Informasi kemudian
pada row button grup lakukan editing addon seperti langkah yang telah dijelaskan
sebelumnya pada layanan satuan kerja
 Note : Untuk membuat page baru, hal yang perlu diperhatikan tentukan jumlah
kolom (maksimal 12) dari tiap row yang dibuat serta pemilihan addon yang akan
digunakan, jika menggunakan addon joomla modul, pastikan modul yang akan
ditampilkan menggunakan addon telah disiapkan sebelumnya

9. Pengelolaan Galeri Photo

Untuk pengelolaan galeri photo langkah pertama yang harus
dilakukan adalah mengelompokan photo sesuai kategori,
lalu kemudian mengkategorikan album yang akan dibuat.
Tampilan galeri yang berjalan merupakan tampilan dari
photo-photo yang bersumber dari satu album, namun tidak
menutup kemungkinan admin juga dapat merubah tampilan
menjadi list album jika terdapat banyak album dalam galeri
tersebut

Klik menu Component > SP Easy Image Gallery > Album

maka akan muncul halaman list album seperti gambar
berikut

Untuk membuat kategori baru klik menu kategori pada pada menu yang terdapat pada
sisi sebelah kiri halaman, kemudian klik New, akan muncul halaman pengelolaan
categori baru, Masukan title dari kategori yang akan dibuat, tentukan parent kategori
jika diperlukan
Setelah membuat kategori langkah berikutnya adalah membuat album untuk
mengelompokan photo-photo yang nantinya akan diupload. Sama seperti pembuatan
kategori, klik menu albums pada menu yang terdapat pada sisi sebelah kiri halaman,
kemudian klik New, akan muncul halaman pengelolaan album baru, Masukan title
dari kategori yang akan dibuat, tentukan kategori dari album tersebut lalu pilih atau
upload gambar yang akan menjadi cover dari album tersebut, jika dirasa perlu
tambahkan deskripsi pada bagian editor album tersebut lalu klik save

Setelah itu akan muncul tab image pada bagian atas editor dimana admin dapat
mengunggah semua photo yang akan ditampilkan.

Untuk mengatur layout photo yang terlihat dari halaman depan, penbgaturan
dilakukan pada module. Klik extension > modules kemudian cari module Galeri Foto
 Pengaturan tampilan pada galeri foto dilakukan
pada halaman editor modul seperti gambar
disamping.

Penentuan layout bisa ditentukan dari album foto.

Bisa menggunakan single album atau list album.
Ketika memilih list album maka yang akan tampil
pada halaman depan adalah list dari seluruh
album yang ada. Sebaliknya jika memiolih single
album maka foto yang muncul hanya foto-foto
yang ada pada album yang kita pilih.

10. Konfigurasi Media Sosial

Untuk merubah konfigurasi akun media social twitter
satuan kerja caranya cukup mudah, klik extension >
modules kemudian cari modules dengan nama
twitter feed akan muncul halaman pengelolaan
modul dan masukan twitter username pada kolom
pengelolaan modul tersebut.

11. Konfigurasi Section Botom

Untuk merubah gambar Peta lokasi satuan kerja, user diharuskan mengetahui posisi
satuan kerja melalui google map. Buka browser lalu ketik url map.google.com
kemudian pada kolom pencarian ketik nama satuan kerja lalu klik icon share/Bagikan,
klik tab sematkan peta lalu kli Salin HTML

Langkah selanjutnya klik extension > modules lalu pilih module Map, akan muncul
halaman editor lalu klik tab Code. Paste Code yang telah di copy sebelumnya ke
 halaman editor untuk menggantikan code yang telah di blok seperti gambar dibawah
ini.

12. Konfigurasi Section Footer

Untuk perubahan Section footer, perubahan dilakukan
pada halaman editor template. Langkah selanjutkan klik
tombol Template Options yang berwarna Hijau cara
yang dilakukan yaitu klik menu Basic lalu pilih menu
Footer, Lakukan editing text pada kolom Copyright,
rubah text yang berwarna merah.
<text style="color:#ffd000;">Nama Unit Satuan Kerja
Kelas XXX (edit)<br/>Kantor Wilayah Kementerian
Hukum dan Hak Asasi Manusia Nama Provinsi
(edit)<br/><text style="color:white;">Copyright ©
{year} Pusat Data dan Teknologi Informasi

Demikian panduan pengelolaan laman Satuan Kerja ini dibuat semoga dapat membatu rekan-rekan
administrator satuan kerja dalam melakukan pengelolaan website.

Untuk pertanyaan dan konsultasi dapat menghubungi

Pusat Data dan Teknologi Informasi

---oOo---