PANDUAN IMPLEMENTASI

SOFTWARE LOMBA MSI & LKIP

SMA Taruna Nusantara

Jl. Raya Purworejo Km. 5
 DAFTAR ISI

DAFTAR ISI ............................................................................................................................................... i

TAMPILAN UTAMA WEBSITE LOMBA MSI & LKIP .......................................................................... 1
A. Home.............................................................................................................................................. 1
B. Events – MSI ................................................................................................................................. 4
C. Events – LKIP ........................................................................................................................... 4
D. Formulir pendaftaran MSI........................................................................................................ 5
E. Formulir pendaftaran LKIP .......................................................................................................... 6
F. Peserta – MSI ............................................................................................................................... 7
G. Peserta – LKIP.......................................................................................................................... 7
H. Contact....................................................................................................................................... 8
I. Info penginapan ............................................................................................................................ 9
J. Hasil Lomba .................................................................................................................................. 9
TAMPILAN KONFIGURASI WEBSITE BAGI ADMIN ....................................................................... 10
A. Login Admin ................................................................................................................................ 10
B. Dashboard Admin....................................................................................................................... 11
C. Pages ....................................................................................................................................... 11
1. Menambah Pages baru ......................................................................................................... 12
2. Menghapus Pages ................................................................................................................. 13
3. Mengubah Pages ................................................................................................................... 14
D. Contacts................................................................................................................................... 15
E. TablePress .................................................................................................................................. 17
F. Timeline Stories .......................................................................................................................... 21
G. Cool Timeline .......................................................................................................................... 23
H. Visual From Builder ................................................................................................................ 25
I. Users ............................................................................................................................................ 30
J. Setting .......................................................................................................................................... 32
1. General .................................................................................................................................... 32
2. Writing ...................................................................................................................................... 33
3. Reading ................................................................................................................................... 34
4. Discussion ............................................................................................................................... 34

i
5. Media ....................................................................................................................................... 35
6. Permalinks ............................................................................................................................... 35
7. Pirate Forms............................................................................................................................ 36
8. Email ........................................................................................................................................ 39

ii
 TAMPILAN UTAMA WEBSITE LOMBA MSI & LKIP

A. Home
Halaman Home ini berisi informasi umu tentang lomba MSI & LKIP. Selain
itu juga berisi informasi hadiah dan fasilitas kirim pesan jika ada
pertanyaan dari peserta.Tombol berwarna merah dan hijau pada halaman
awal ini dapat diubah oleh admin baik tulisan maupun link yang akan
dituju. Menu ini hanya digunakan untuk link menampilkan informasi-
informasi penting.

1
2
3
B. Events – MSI
Pada halaman ini dijelaskan deskripsi tentan lomba MSI. Halaman ini juga
terdapat informasi tentang cara dan syarat pendaftaran peserta MSI.
Selain itu halamn ini juga memuat gambar poster lomab MSI.

C. Events – LKIP

4
 Pada halaman ini dijelaskan deskripsi tentan lomba LKIP. Halaman ini
juga terdapat informasi tentang cara dan syarat pendaftaran peserta LKIP

D. Formulir pendaftaran MSI

Halaman ini berfungsi supaya peserta yang akan mendaftar dappat
melakukan pendaftaran dengan mengisi isian yang ada pada halaman ini.
Halaman ini hanya diisi untuk peserta yang akan mendaftar MSI. Pada
halaman ini peserta diminta memasukkan nama lengkap, tanggal lahir,
alamat peserta, asal sekolah, alamat, alamat email, nomor telpon, dan
scan kartu pelajar atau tanda pengenal. Jika terdapat perubahan form,
admin dapat menambahkan form yang dibutuhkan.

5
E. Formulir pendaftaran LKIP
Halaman ini berfungsi supaya peserta yang akan mendaftar dappat
melakukan pendaftaran dengan mengisi isian yang ada pada halaman ini.
Halaman ini hanya diisi untuk peserta yang akan mendaftar LKIP. Pada
halaman ini peserta diminta memasukkan nama tim, nama lengkap ketua
tim, tanggal lahir, alamat, email, telpon, kelas, prestasi, rata-rata nilai
rapor semester terakir, scan kartu pelajar, nama anggota tim, tanggal
lahir, alamat, email, telpon, kelas, prestasi, rata-rata nilai rapor, scan kartu
pelajar, asal sekolah, alamat sekolah dan makalah yang akan
dilombakan. Jika terdapat perubahan form, admin dapat menambahkan
form yang dibutuhkan.

6
F. Peserta – MSI
Menu ini berfungsi untuk pengunjung website melihat daftar nama
peserta yang telah mendaftar lomba MSI. Selain itu juga digunakan untuk
memastikan bahwa peserta sudah terdaftar.

G. Peserta – LKIP

7
 Menu ini berfungsi untuk pengunjung website melihat daftar nama
peserta yang telah mendaftar lomba LKIP. Selain itu juga digunakan
untuk memastikan bahwa peserta sudah terdaftar

H. Contact
Menu ini berfungsi bagi pengunjung yang ingin menghubungi panitia
secara langsung. Halaman ini nantinya akan berisi daftarnama panitia
dan nomor telp yang bisa dihubungi. Isi pada halaman ini nantinya dapat
diubah sesuai panitia yang bertugas saat itu.

8
I. Info penginapan
Menu ini berfungsi untuk menampilkan halaman tentang rekomendasi
penginapan di sekitar kampus SMA Taruna Nusantara. Halaman ini untuk
memudahkan para peserta dari jauh yang akan menginap 1 hari sebelum
lomba dimulai. Dalam halaman ini hanya menampilkan nama-nama
penginapan dan alamatnya, namun tidak menyediakan fitur pemesanan
melalui aplikasi ini.

J. Hasil Lomba
Pada Menu ini terdapat 3 menu yaitu pengumuman babak penyisihan &
semifinal MSI dan babak final LKIP. Halaman ini untuk memudahkan para
peserta melihat peringkat hasil penyisihan dan semifinal MSI serta siapa
saja yang lolos babak final LKIP. Halamn ini berisi daftar nama-nama
peserta beserta nilainya. Menu ini dapat dimodifikasi sesuai data yang
dimasukkan.

9
 TAMPILAN KONFIGURASI WEBSITE BAGI ADMIN

A. Login Admin
Untuk melakukan perubahan pada konten yang terdapat pada website ini
pengguna harus login sebagai admin terlebih dahulu. Halaman admin
dapat diakses dengan menambahkan “/wp-admin” Setelah domain
website. Contoh : http://msi-lkip.info/wp-admin. Nanti akan muncul
halaman login. Untuk username dan password secara default adalah :
Username : admin
Password : admin1234
Jika Admin lupa password, maka ada fitur Lost your password? Untuk
melakukan perubahan paksa. Ketika menu ini di klik akan muncul
halaman diminta mengisikan alamat email untuk mengirim link reset
password.

10
B. Dashboard Admin
Halaman ini menampilkan tampilan dashboard user. Halaman ini berisi
informasi-informasi terbaru dari aktifitas website, mulai dari activity, Quick
Draft, Welcome page, dan Recent visual form builder. Dari dashboard ini
kita dapat mengetahui siapa saja yang baru saja mendaftar atau mengisi
formulir online lomba MSI atau LKIP.

C. Pages

11
Menu Pages berfungsi menampilkan isi konten haalaman-halaman yang
di tampilkan di website. Halaman yang terdapat disini akan tampil dan
dapat diatur pada halaman utama. Isi konten dapat diubah disini
menyesuaikan dengan informasi yang akan ditampilkan di website. Selain
bisa mengubah isi konten halaman yang ada admin juga bisa menambah
dan menghapus pages atau halaman. Untuk menambah Pages baru bisa
klik menu “Add New” dibagian atas.

1. Menambah Pages baru

Setelah klik add new maka akan tampil halaman seperti dibawah ini.
Setelah itu admin bisa mulai memasukkan konten atau informasi yang
akan ditampilkan dihalaman ini. Pada bagian atas terlebih dahulu diisi
judul kemudian dibawahya isi konten dan informasi yang akan
ditampilkan. Konten bisa berupa tulisan, gambar, video, table dan
form.

12
 Pada bagian kanan terdapat pilihan untuk mengatur Pages tersebut
akan dipublikasikan public atau tidak. Pada bagian visibility bisa
diubah ke private juga tidak akan di tampilkan, kebalikannya jika akan
ditampilkan dibuat public. Tombol publish berwarna biru fungsinya
untuk menyimpan kontan halaman yang sudah kita buat. Jika belum
siap dipublish bisa juga disimpan bentuk drfat terlebih dahulu,
kemudian di lain waktu dapat diubah kembali.

2. Menghapus Pages
Untuk menghapus pages dapat dilakukan satu persatu atau langsung
bayak sekaligus. Tombol adapat dilihat pada gambar berikut. Pages
yang dihapus tidak sepenuhya hilang namun disimpan terlebih dahulu
ke Trash, baru setelah admin yakin pages tersebut tidak digunakan
lagi dapat dihilangkan dari Trash.

13
3. Mengubah Pages
Untuk melakukan perubahan pages atau halaman silahkan arahkan
kursor ke judul page yang terdapat pada tabel. Akan muncul menu
edit, silahkan klik menu tersebut. Nanti akan muncul halaman seperti
saat akan menambah pages baru. Menu dan pilihannya sama hanya
sudah ada isi konten nya.

14
D. Contacts
Halaman ini berisikan daftar pertanyaan atau pesan dari pengunjung
website. Pesan ini muncul setelah peserta mengisi form pertanyaan
dibagian bawah halaman awal website. Pesan-pesan ini hanya dapat
dilihat saja namun tidak dapat dibalas. Untuk menjawab admin membalas
pesan melalui email yang dimasukkan oleh pengunjung website.

Untuk melihat pesan cukup arahkan kursor ke judul pesan yang akan kita
lihat. Akan muncul pilihan menu edit, trash, view. Klik view jika hanya ingin

15
melihat isi pesan kemudian akan muncul halaman baru seperti dibawah
ini.

Selain melihat isi pesan admin juga dapat mengubah isi atau tampilan
pesan. Klik edit maka akan halaman untuk mengubah pesan tersebut.

Jika pesan yang ada dianggap tidak penting dan perlu dihapus maka
dapat di hapus dengan klik menu trash. Namun dapat juga dilakukan
penghapusan secara kolektif.

16
E. TablePress
Halaman ini untuk menampilkan macam-macam table yang dibuat oleh
admin. Table ini dapat ditampilkan di halaman-halaman lain, sehingga
memudahkan admin dalam menampilkan data yang banyak. Tabel yang
dibuat diisi juga ada fasilitas import, sehingga tidak merepotkan admin
memasukkan data ulang.

Daftar tabel dapat diubah, hapus, copy, dan export. Untuk melakukan
perintah-peintah itu cukup arahkan kursor ke jduul tabel kemudian klik
perintah yang muncul. Untuk membuat tabel baru klik perintah Add New
pada bagian atas. Setelah itu masukkan judul tabel, deskripsi dan data

17
tabel. Pada bagian bawah terdapat opsi pilihan yang dapat digunakan
untuk mengatur tampilan tabel.

18
Table Option
1. Table head row : untuk mengatur baris pertama tabel sebagai nama
kolom atau tidak
2. Table foot row : untuk mengatur baris terakir tabel sebagai nama
kolom atau tidak
3. Alternating row colors : untuk membuat warna baris berbeda setiap
barisnya
4. Row hover highlighting : untuk membuat saat kursor diarahkan be
baris maka baris tersebut akan berubah warna
5. Print table name : menampilkan nama tabel saat tabel ditampilkan di
content
6. print table description : menampilkan deskripsi tabel saat tabe
ditampilkan di content
7. extra CSS style : memasukkan code CSS untuk mengubah tampilan
tabel

Features of the DataTables JavaScript Library

19
1. Use DataTables : menjalankan fitur tabel data menggunakan
javascript. fungsinya agar halaman tidak berat saat menampilkan data
yang banyak
2. Sorting : mengaktifkan fitur pengurutan berdasarkan kolom
3. Search/Filtering : mengaktifkan fitur pencarian dan pemilihan data
4. Pagination : mengaktifkan fitur pembagian halaman. Dipengaturan ini
bisa admin atur jumlah baris yang akan ditampilkan setiap
halamannya
5. Pagination Length Change : Mengaktifkan fitur pengunjung dapat
mengubah urutan baris saat pagination aktif
6. Info : Menampilkan informasi jumlah data pada tabel
7. Horizontal Scrolling : mengaktifkan scroll tabel mendatar ke kanan
atau kiri

Untuk melakukan import tabel cukup klik menu Import lalu pilih file Excel
yang akan dijadikan tabel.

20
 Untuk mendapatkan tabel yang sudah ada menjadi file Excel atau PDF
maka admin dapat memanfaatkan fitur Export

F. Timeline Stories
Menu ini berfungsi untuk membuat diagram waktu suatu kegiatan, dalam
website ini digunakan oleh admin untuk menampilkan jadwal dan waktu
kegiatan. Timeline ini bermanfaat bagi pengunjung website untuk
mengetahui jadwal lomba. yang dimaksud timeline adalah seperti
dibawah ini.

21
Dalam membuat timeline admin cukup memasukkan judul kegiatan,
deskripsi kegiatan dan waktu. Setelah semua dimasukkan dan dibuat
makan akan tampil timeline dengan tampilan seperti diatas.

Menu yang ditandai dengan segi empat adalah menu untuk

menambahkan kegiatan pada timeline. sedangkan tanda elips adalah
menu untuk menghapus banyak kegiatan sekaligus. sedangkan untuk

22
 melakukan perubahan bisa dengan mengarahkan kursor ke judul
kegiatan yang akan diubah, maka akan muncul pilihan menu lalu klik edit.

G. Cool Timeline
Menu ini berhubungan dengan menu sebelumnya yaitu timeline stories.
Jika timeline stories berisi kegiatan-kegiatan yang tampil di timeline, cool
timeline berfungsi mengatur tampilan timeline yang akan ditampilkan ke
halaman utama. Pada prinsipnya menu ini hanya mengatur konfigurasi
tampilan, judul, dan warna pada timeline supaya lebih menarik.

23
24
H. Visual From Builder
Menu ini berfungsi inti pada website ini karena berfungsi untuk membuat
form isian untuk peserta melakukan pendaftaran. Pada menu awal admin
diminta membuat terlebih dahulu form yang akan digunakan. Sama
seperti menu-menu yang lain, form yang sudha dibuat dapat diubah,
hapus atau menambah form baru.

25
Saat kita klik Add New atau edit form maka akan tampil halaman untuk
membuat isian-isian yang diisi oleh peserta yang akan mendaftar lomba.
Pada bagian setting berisi konfigurasi awal yang harus diisi untuk form
ini.
1. Label Aloghment : menentukan posisi tulisan sebagia label
2. e-mail subject : Subject email yang digunakan saat mengirim
pemberitahuan melalui email kepada peserta
3. Your name or company : nama instansi yang akan di tampilkan saat
mengirim email
4. user’s name : memilih form yang akan diambil isinya kemudian
dimasukkan ke email
5. reply-to e-mail : email yang digunakan panitia atau admin untuk
mengirim email ke peserta
6. user’s E-mail : memilih form yang akan diambil isinya kemudian dikirimi
email oleh email admin
7. e-mail to : mengatur email penerima pemberitahuan jika ada yang
mengisi formulir
8. Uang pendaftaran : biaya pendaftaran
9. nomor rekening : no rekening panitia untuk melakukan pembayaran
10. atas nama rekening : atas nama rekening panitia
11. Confirmation : untuk mengatur tampilan yang akan tampil pada
halaman konfirmasi setelah peserta selesai mengisi formulir
12. Notifikasi : untuk mengatur tampilan notifikasi yang dikirim ke
email peserta

Untuk menambah field atau isian cukup klik pilihan yang ada pada bagian
kiri.
26
1. Section : field judul
2. Text : isian bebas berupa text
3. Teaxtarea : isian bebas berupa text namun banyak dan panjang. biasa
digunakan untuk menulis alamat
4. checkbox : boleh memilih banyak pilihan
5. radio : hanya boleh memilih salah satu pilihan
6. select : berupa menu dropdown dan hanya boleh memilih satu
7. address : berupa isian text panjang naum sudah berformat alamat
rumah lengkap sampai kode pos
8. Date : isian berupa tanggal
9. Email : isian email peserta
10. Url : isian berupa link ke halaman lain
11. Currency : isian untuk penulisan uang
12. number : isian hanya berupa angka
13. Time : isian berupa waktu
14. Phone : isian untuk nomor telepon
15. HTML : isian berupa source code HTML
16. File Upload : field untuk mengupload file tertentu
17. Instuctions : field berisi informasi untuk formulir

Jika sudah terlanjur dibuat lalu salah maka field dapat dihapus dengan
cara klik tombol delete pada field yang sudah dipilih tersebut. Jika field-
field sudah berhasil tersusun seusai kebutuhan maka klik tombol save.
untuk menduplikasi formulir maka cukup klik tombol duplicate. Jika
formulir sudah tidak digunakan dan akan dihapus maka klik tombol
delete.

27
Untuk melihat data yang telah mengisi formulir maka klik menu entri, lalu
akan tampil halaman berupa tabel dan berisi data-data peserta yang telah
mendaftar.

Data tersebut dapat kita hapus atau pun lihat. untuk menghapus dan
melihat pertama-tama arahkan kursor ke baris yang akan di aksi
kemudian klik perintah yang diinginkan.

28
Jika admin ingin mengunduh data dalam bentuk excel maka dapat
menggunakan menu export. admin harus memilih terlebih dahulu form
mana yang akan di ambil datanya, kemudian admin menentukan field
mana saja yang akan diambil. setelah admin seleai melakukan pemilihan
form dan field maka klik tombol Download export to file. Jika berhasil
maka kita akan mendapat file dengan format csv lalu dapat kita buka
menggunakan aplikasi MS. Excel.

29
 Untuk melakukan konfigurasi tambahan secara global maka dapat
dilakukan di menu Setting.

I. Users

30
Menu ini berfungsi untuk melakukan pengaturan pengguna yang berhak
mengubah isi konten website ini.

Admin dapat menambah dan menghapus user yang ada. setiap user
dapat diatur role nya supaya dapat dilaukan pembagian tugas. role ini
terdiri dari :
1. Subcriber : user tidak dapat melakukan perubahan konten apapun,
hanya sekedar mengikuti update dan informasi pada website ini
2. Contributor : user dapat ikut membuat posting dan menanggapi
komentar
3. Author : user hanya dapat menambah posting namun tidak dapat
menghapus maupun mengubah
4. Editor : user hanya dapat mengubah posting yang sudah ada, tidak
bisa menambah
5. Administrator : user dapat mengakses semua fitur yang terdapat di
website ini

31
J. Setting
Menu ini berisikan konfigurasi-konfigurasi penting yang perlu diatur
sedemikian rupa agar website berjalan dengan normal. Mana menu
setting ini terdapat 8 pembagian kategori menu yaitu General, Writing,
Reading, Discussion, Media, Permalink, Pirate Forms, dan Email.
1. General
Pada menu ini admin melakukan konfigurasi sebagia berikut :
• Site titel : nama website
• Tagline : kata-kata slogan yang tampil di website
• Address (URL) : alamat website
• Site Address (URL) : alamat website
• Email Address : Email admin pemilik website

32
 • Membership : Pengaturan apakah semua pengunjung bebas
mengajukan pendaftaran sebagai user atau tidak
• New User Default Role : Role dasar bagi user baru
• Timezone : Penentuan zona waktu
• Date Format : Pengaturan format tanggal
• Time Format : Pengaturan format waktu
• Week Starts On : hari pertama pada setiap minggu
• Site Language : Bahasa untuk website

2. Writing
Menu ini untuk melakukan konfigurasi default saat admin membuat
post baru akan dimasukkan sebagai kategori apa. Selain itu juga ada
pengaturan untuk posting melalui email.

33
3. Reading
Meni ini untuk mengatur tampilan saat artikel dibaca oleh pengunjung
website.

4. Discussion
Menu ini untuk mengatur tampilan dan mengatifkan fitur diskusi pada
asrtikel yang di psoting oleh admin. dengan fitur ini admin dapat
berkomunikasi terkait postingan yang diupload di website sehingga
website menjadi komunikatif.

34
5. Media
Menu ini untuk mengatur penyimpanan file yang diupload di website
ini. File dapat diatur sesuai waktu upload supaya mudah mencarinya.
Selain itu dapat ditentukan juga default ukuran yang bisa diupload di
website ini.

6. Permalinks

35
 Menu ini untuk mengatur penyingkatan link tehadap psotingan atau
page yang ada di website ini. admin dapat mengatur link-link yang ada
akan ditampilkan seperti apa.

7. Pirate Forms
Menu ini untuk mengatur tampilan contact us pada halaman utama
website. Fitur ini untuk membuka tampilan agar pengunjung dapat
langsung mengirim pesan kepada pengelola website terkait
pertanyaan tentang lomba. lalu admin dapat menjawab melalui email
yang dimasukkan oleh pengunjung tersebut. pada tab option admin
dapa mengatur email yang digunakan untuk menerima notifikasi
pesan. Lalu ada pilihan juga, pesan yang masuk akan disimpan di
database atau tidak.

36
Pada tab Fields Settings admin bisa mengubah field mana saja yang
wajib diisi atau tidak saat pengunjung akan mengajukan pesan.

37
Pada tab Field Labels admin dapat mengubah label yang tampil pada
tampilan pesan. Label dapat disesuaikan dengan keinginan admin
atau pengelola website.

Pada tab Alert Messages berisi pesanyang tampil jika pengunjung

slaah memasukkan isian pada field yang ditentukan.

38
 Pada tab SMTP admin harus mengatur konfigurasi SMPT supaya
pesan dapat dikieim juga ke email admin sebagai notifikasi.

8. Email
Menu ini bertujuan supaya segala aktifitas yang ada di website ini
dapat terhubung dengan email pengelola website. Pada halaman ini
admin hanya perlu memasukkan email yang digunakan sebagai email
admin website ini. Metode pengiriman email juga dapat diubah sesuai
pilihan.

39
Supaya website ini dapat melakukan pengiriman email maka perlu
juga diatur SMTP hnay terlebih dahulu sesuai service SMTP yang
digunakan oleh admin.

Untuk melakukan pengetesan apakah fitur email berhasil berjalan atau

tidak maka cukup admin memasukkan email tujuan pada field to. Jika
muncul pesan “Send test email success” maka email sudah berfungsi.
40
41