PANDUAN MANUAL
PT QWORDS COMPANY INTERNATIONAL
DAFTAR ISI
DAFTAR ISI............................................................................................................................................... 2 BAB 1.
PENGENALAN ........................................................................................................................... 3
a.
Tampilan Cerdas....................................................................................................................... 3
b.
Tampilan Prestasi ..................................................................................................................... 3
c.
Tampilan Berbakti .................................................................................................................... 4
BAB 2.
Managemen Konten................................................................................................................. 5
2.1
Login ........................................................................................................................................ 5
2.2
Input Berita / Posting ............................................................................................................... 6
2.3
Edit Berita / Postingan............................................................................................................ 13
2.4
Hapus Tulisan ......................................................................................................................... 15
2.5
Halaman ................................................................................................................................ 16
BAB 3.
KUSTOMISASI TAMPILAN WEB ............................................................................................... 17
3.1
Membuat Menu Navigasi ....................................................................................................... 17
3.2
Membuat dan Mengatur Widget ............................................................................................ 22
3.3
Kustomisasi Halaman ............................................................................................................. 25
2
BAB 1. PENGENALAN DIGITALIQ merupakan Content Management Systems (CMS) yang di buat khusus untuk Management Web Sekolah yang terdiri dari 3 Template Utama. Adapun tampilan templatenya sebagai berikut: a. Tampilan Cerdas
Gambar 1.1 Tampilan Tema Cerdas
b. Tampilan Prestasi
Gambar 1.2 Tampilan Prestasi
3
c. Tampilan Berbakti
Dengan adanya alternative tersebut akan memudahkan pihak sekolah untuk mengatur tampilan webnya. Karena CMS DIGITALIQ telah user friendly sehingga sangat mudah untuk di gunakan.
4
BAB 2. Managemen Konten 2.1
Login
Untuk Mengakses Kontrol Admin Silahkan Akses dengan mengetikan format berikut di browser anda Namasekolah.sch.id/wp-admin Catatan: Namasekolah diganti dengan alamat web sekolah anda. Seperti ini
Gambar 2.1 URL Login Admin
Kemudian anda akan di bawa kehalaman login admin seperti ini
Gambar 2.2 Halaman Login Admin
Isikan Nama Pengguna dan password seperti di instalasi, dan silahkan centang saya jika anda menggunakan computer pribadi anda. Sekarang Klik Masuk Log dan jika berhasil anda akan di bawa menavigasi ke halaman control admin seperti di bawah ini. Pada halaman admin anda sediakan akses penuh untuk full customize / merubah sepenuhnya halaman website anda.
5
Gambar 2.3 Halaman Utama Admin
2.2
Input Berita / Posting
Langkah Pertama untuk membuat Berita ialah Klik Pos
Gambar 2.4 Langkah Pertama Membuat Postingan
Gambar 2.5 Tampilan Managemen Post
Gambar di atas adalah tampilan managemen pos, di sini anda bias melihat jumlah postingan atau berita yang telah di inputkan sebelumnya. Untuk membuat postingan baru klik tambah baru seperti di gambar 2.5. Setelah itu anda akan di bawa ke tampilan input postingan baru seperti di bawah ini.
6
Gambar 2.6 Tampilan Input Berita / Post Baru
Kemudian untuk menambahkan judul isi form berikut
Gambar 2.7 Form Input Judul
Kemudian untuk konten berita, sudah di sediakan formnya seperti di bawah ini
Gambar 2.8 Form Input Berita
7
Keterangan: No 1 2
Nama Tambahkan Media Kotak Peralatan
3 4
Kolom Konten Visual
5
Teks
6
Bebas Gangguan
7
Jumlah Kata
Keterangan Upload Gambar atau Video ke dalam konten Standar Toolbox untuk memodifikasi konten, kurang lebih sama dengan fitur standar di Ms. Word Tempat anda menginputkan tulisan anda Menampilkan Tulisan anda dengan mode visual (Mudah di pahami orang umum) Menampilkan tulisan anda dengan mode html, (Untuk yang berpengalaman dengan bahasa HTML) Menampilkan Form Input Konten secara bersih, agar anda lebih fokus pada tulisan anda Menampilkan jumlah kata yang telah anda tulis
Kategori Sebelah kanan dari Form Input konten, anda akan mendapati Form Kategori. Fungsinya adalah untuk mengkategorikan tulisan anda ke dalam sub – sub yang lebih spesifik. Sehingga pembaca bias dengan mudah mengenali tulisan anda berdasarkan kategori yang sedang di bacanya. Untuk memasukan tulisan anda kedalam kategori, anda hanya perlu mengklik kategori yang sudah ada. Untuk menambahkan kategori baru klik +Tambah Kategori Baru , maka akan muncul tambahan form seperti ini. Gambar 2.9 Form Kategori
Isikan nama kategori baru di form yang telah di sediakan, Dalam contoh kali ini kita akan isikan “Akademik” sebagai kategori baru. Klik Kategori Induk di bawahnya jika anda ingin menjadikan kategori baru tersebut sub dari kategori yang lain. Seperti contoh di samping, ekstrakulikuler,dan tips merupakan sub kategori dalam berita. Jika sudah Selesai, klik “Tambah Kategori Baru”
Gambar 2.10 Tambah Kategori Baru
8
Bisa anda lihat di gambar 2.11 kategori baru telah berhasil di tambahkan. Anda bisa memilih kategori lainnya jika anda ingin tulisan anda berada di 2 atau lebih kategori sekaligus.
Gambar 2.11 Kategori Baru Berhasil di Tambahkan
TAG Tag adalah kata-kata yang berhubungan dengan suatu artikel. Seringa kali juga disebut kata kunci yang berhubungan dengan artikel. Untuk membuat tag, caranya mudah sekali buatlah beberapa kata kunci, pisahkan dengan tanda koma (,) seperti di bawah ini contohnya
Gambar 2.12 Form Tag
Klik “Tambahkan”
Gambar 2.13 Input Tag dengan koma
Untuk menghapus Tag, klik icon
Gambar 2.14 Input Tag Selesai di Tambahkan
di samping tag. Mudah bukan? 9
Gambar Fitur Dengan Fitur ini memungkinkan anda untuk mengeset tampilan gambar utama dalam postingan atau berita anda sebagai icon untuk di tampilkan di homepage. Untuk menggunakannya klik “Buat Gambar Utama”. Maka akan Gambar 2.15 Form Gambar Fitur
muncul form media seperti di bawah ini.
Gambar 2.16 Tahapan Memilih Gambar Utama
Keterangan No 1 2
Nama Unggah Berkas Filter Hasil
3
Kotak Gambar
4
Buat Gambar Utama
Keterangan Upload Gambar atau Video untuk di jadikan gambar utama Menyaring hasil gambar berdasarkan postingan, seperti tanggal dan pencarian Menampilkan semua gambar yang telah terupload, klik salah satu gambar yang ada untuk di jadikan gambar utama dengan. Tombol untuk memproses gambar yang terpilih menjadi gambar utama
10
Di samping ini adalah tampilan gambar fitur selesai di pilih. Untuk mengganti gambar dengan gambar yang lain klik “Hapus gambar andalan”
Gambar 2.17 Tampilan gambar fitur selesai
Publikasi
Menu Terakhir adalah terbitkan atau sering juga di sebut sebagai menu publikasi. Dengan fitur yang telah di sediakan. Anda bisa menyimpan, pratamilan postingan, mengatur privasi postingan anda, atau penjadwalan posting. Berikut Keterangan lebih detailnya:
Gambar 2.18 Form Publikasi / Terbitkan
Keterangan No 1 2 3 4
Nama Simpan Konsep Pratampil Status Kenampakan
Keterangan Simpan Tulisan anda untuk di lanjutkan di lain waktu Untuk Melihat tampilan tulisan anda apabila setelah di publikasikan Untuk mensetting status dari tulisan, masih dalam konsep atau revisi Untuk mengatur hak akses postingan tersebut, ada 3 pengaturan, yaitu: Umum : Semua orang bisa melihatnya Di lindungi dengan kata sandi : hanya yang tahu passwordnya bisa mengakses halaman tulisan anda Privat: Hanya anda sendiri yang bisa melihat postingannya 11
5
Terbitkan
6
Pindahkan ke tong sampah Terbitkan
7
Untuk mengatur waktu kapan postingan anda akan di tampilkan. Fungsinya seperti alarm, system akan otomatis mengepost tulisan anda di waktu yang telah anda tentukan. Untuk menghapus tulisan / postingan anda Tombol untuk mempublikasikan tulisan anda web sekolah.
Gambar 2.19 Tampilan Posting Baru Siap diPublikasikan
Jika Tulisan anda telah siap, klik terbitkan seperti yang sudah di kotak merah di gambar 2.19, Kemudian aka nada notifikasi bahwa tulisan anda telah diterbitkan, seperti gambar di bawah ini, klik Lihat Tulisan untuk melihat tulisan anda.
Gambar 2.20 Tulisan diterbitkan
12
Gambar 2.21 Tulisan Berhasil di Inputkan
2.3
Edit Berita / Postingan
Pada tampilan Dasbor admin, sorot pointer anda ke pos, dan klik Semua pos
Gambar 2.22 Langkah Pertama Edit Tulisan
13
Gambar 2.23 Pilih Tulisan yang akan di edit
Pilih tulisan anda yang hendak anda edit dengan menyorot pointer anda ke tulisan yang hendak di edit.
Gambar 2.24 Tampilan Menu Pos / Tulisan
No 1 2
Nama Sunting Sunting Cepat
3 4
Tong Sampah Tampil
Keterangan Untuk Mengedit Tulisan Untuk Mengedit tulisan secara langsung di halaman tersebut, tapi yang bisa anda edit terbatas judul, kategori, tag, publikasi, dll, tidak bisa edit konten. Lihat gambar 2.25 Untuk Menghapus Tulisan anda. Melihat tampilan tulisan di web sekolah anda
Gambar 2.25 Tampilan Sunting Cepat
Klik Edit jika anda hendak mengedit tulisan anda secara seutuhnya 14
Gambar 2.26 Tampilan Sunting Pos
2.4
Hapus Tulisan
Merujuk pada tutorial edit di gambar 2.23, untuk menghapus tulisan klik tong sampah pada tulisan yang hendak di hapus. Untuk keamanan tulisan anda, tulisan tidak akan langsung terhapus, hanya tidak di tampilkan di web sekolah. Sehingga sewaktu waktu jika anda memerlukan tulisan anda kembali anda bisa mengembalikannya lagi. Untuk mengaksesnya kembali di table pos akan ada menu tong sampah apabila ada tulisan yang di masukan di tong sampah.
Gambar 2.27 Tong sampah
Gambar 2.28 Menu Tong Sampah
15
Klik Kembalikan jika anda ingin menarik kembali tulisan anda ke halaman web sekolah anda, atau hapus secara permanen jika anda ingin menghapus tulisan anda selamanya (Hati-hati!). yang sudah terhapus tidak bisa kembali.
2.5
Halaman
Pada dasarnya cara membuat Halaman dan bagaimana cara mengelolanya sama seperti post. Hanya bedanya ialah terletak di fungsinya. Halaman di gunakan untuk tampilan yang lebih statis, seperti profil, akademik, kontak Oleh karena itu di halaman tidak ada fitur kategori atau tag. Berbeda dengan post yang dinamis yang di gunakan untuk membuat berita, artikel dll. Namun di halaman memiliki kelebihan yang tidak di miliki di pos, yaitu hirarki halaman. Yang memungkinkan anda membuat sub-sub dari halaman tersebut. Misal; Profil visi dan misi Sejarah Singkat Struktur Organisasi
Akademi Silabus Materi Uji Kalender Akademik
Kesiswaan Ekstrakulikuler Prestasi Siswa
Gambar 2.29 Tampilan Menu Halaman
16
BAB 3. KUSTOMISASI TAMPILAN WEB 3.1
Membuat Menu Navigasi
Gambar 3.1 Menu Navigasi
Menu Navigasi di buat dari halaman yang telah di buat sebelumnya. Untuk mengatur setingannya sangat mudah. Pada halaman Dasboard Admin sorot pointer anda ke tampilan, dan pilih menu.
Gambar 3.2 Membuat Navigasi Menu
17
Berikan nama untuk menu anda. Setelah itu klik Tombol Buat Menu
Gambar 3.3 Membuat Menu Navigasi Baru
Ketika anda sudah membuat menu baru, maka anda bisa menambahkan halaman, link, kategori, ke dalam menu navigasi anda. Cukup dengan check list seperti gambar di samping ini. Jika anda rasa sudah cukup klik “Tambahkan Ke Menu”. Kemudian untuk membuat sub-sub dari menu navigasi caranya sangat mudah, klik menunya dan geser kearah menu utamanya. Maka akan otomatis menu tadi menjadi sub dari navigasi tersebut. Seperti ini contohnya Gambar 3.4 Centang untuk menambahkan menu
18
Gambar 3.5 Menu Navigasi Belum Terstruktur
Gambar 3.6 Menu Navigasi Sudah Terstruktur
Menambahkan Kustom Link Ke Dalam Menu Navigasi Klik Taut Tersuai, maka akan muncul form seperti di samping. Isikan URL dengan alamat website yang ingin anda pasang di menu navigasi, Isikan Teks Tautan sebagai tampilan Teks di menu navigasi nanti. Jika Sudah Selesai Klik “Tambahkan Ke Menu” Gambar 3.7 Form Taut Tersuai
Jika di rasa sudah fix, klik
lokasinya di pojok kanan atas.
19
Navigasi Menu berhasil di buat, selanjutnya untuk memasangkannya di menu header, klik kelola Lokasi.
Gambar 3.8 Navigasi menu berhasill di buat
Kelola Lokasi Pada tahap ini anda akan mengelola lokasi navigasi di halaman web anda. Masing-masing template memiliki jumlah menu yang berbeda. Pada template CERDAS mendukung 4 Lokasi, berikut cara memasangnya:
Gambar 3.9 Kelola Lokasi
Untuk memasangnya klik pilih di lokasi yang di inginkan. Biarkan kosong atau jangan di rubah apabila anda menghendaki menu itu kosong. Contohnya seperti ini:
20
Gambar 3.10 Kelola Lokasi Menu terpilih
Klik Simpan Perubahan, dan lihatlah perbedaan di web sekolah anda. Sebelum dirubah,
Gambar 3.11 Menu Navigasi
Setelah dirubah
Gambar 3.12 Menu Navigasi Setelah di modif
No 1 2
Keterangan Top Navigation Main Navigation 21
3.2
Membuat dan Mengatur Widget
Gambar 3.13 Widget pada kotak merah
DIGITALIQ menyediakan fitur widget agar anda bisa menambahkan widget dengan leluasa, di halaman website sekolah anda. Widget di letakan di sidebar, dan sangat mudah sekali untuk kustomisasinya. Pada menu dasbor admin klik tema dan pilih sub widget.
Gambar 3.14 pilih widget pada tampilan
22
Gambar 3.15 Tampilan Menu Widget
Untuk merubahnya sangat mudah sekali, anda hanya perlu klik di widget yang tersedia, dan memilih untuk di masukan di sidebar yang sedang aktif setelah itu klik button tambahkan widget.
Klik Tambahkan widget
Gambar 3.16 Tambah Widget Kalender
Gambar 3.17 Menambahkan Kalender ke Sidebar
23
Isikan Judul untuk di Tampilkan di halaman web, namun anda juga bisa mengosonginya. Berikutnya untuk mengatur posisi widget, anda hanya perlu menggeser urutannya, sama seperti membuat menu.
Gambar 3.18 Widget Kalender telah di urutkan
Ketika anda mengatur widget, otomatis sistem akan menyimpannya. Untuk melihat hasilnya anda bisa mengecek kembali di halaman website anda.
Gambar 3.19 Widget yang telah terupdate
24
3.3
Kustomisasi Halaman
DIGITALIQ menyediakan fitur kustomisasi standar website. Untuk mengakses fitur ini arahkan pointer anda ke arah tampilan, dan pilih sub menu sesuaikan.
Gambar 3.20 Kustomisasi Halaman
Gambar 3.21 Kustomisasi Tampilan Layaout
25
Keterangan No 1 2 3 4 5
Nama Tema Kustomisasi Element Pratampil Close Simpan & Terbitkan
Keterangan Menampilkan Tema yang sedang aktif, Klik ubah untuk mengganti tema Element web yang dapat kita rubah Menampilkan kondisi web apabila element tersebut di rubah (Preview) Menutup halaman penyesuaian (Jangan lupa di simpan sebelum keluar) Untuk menyimpan hasil penyesuaian anda
Dengan fitur ini anda bisa dengan leluasa kustomisasi tampilan website dengan seperti apa yang anda inginkan. Yang perlu anda catat di sini adalah setiap template memiliki pengaturan elemen yang berbeda, namun cara penggunaannya umumnya sama. Sehingga orang awam sekalipun dapat menggunakannya.
3.4 Kustomisasi Slider
Gambar 3.22 Slider
Berikut langkah-langkah untuk merubah slider yang berada di halama utama web. Pada halaman utama admin, klik slider
Gambar 3.23 Klik Slider
26
Perlu anda perhatikan, Jika slider di halama utama anda slider panjang penu seperti contoh di atas, pilihlah no 2 slider –lebar penuh , namun sebaliknya jika tidak lebar penuh, pilihlah slider ke 1. Karena pada contoh ini menggunakan slider penuh, kita klik nomor 2
Gambar 3.24 Pilih Slider berdasarka template
Untuk menambahkan gambar baru klik add slider
Gambar 3.25 Tambah Slide
Anda bisa memilih gambar dari galeri yang pernah anda upload, atau bisa upload denga klik Unggah Berkas,
Gambar 3.26 Pilih Slider
27
Jika Sudah Selesai Klik insert into Slider
Gambar 3.27 tambah slider
Klik gambar baru yang telah di tambahkan.
Gambar 3.28 Pilih Gambar
Selanjutnya klik link to, maksudnya ialah ketika gambar ini berupa slider, dan di klik maka pengunjung akan di arahkan ke halaman web.
Gambar 3.29 navigasi link
28
Pilih custom url
Gambar 3.30 custom url
Isikan URL alamat postingannya atau berita. Opsi Open link in a new window/tab opsional untuk di centang. Jika di centang maka pengunjung akan beralih ke tab baru jika di klik.
Gambar 3.31 Inputkan Alamatnya
Selanjutnya untuk pilihan Title atribut & alternative text opsional boleh di kosongi atau di isi. Jika di isi silahkan di isi dengan Judul Gambar tersebut, dan alternative text di isi dengan keterangan. Jika sudah selesai klik perbarui.
Gambar 3.32 Perbarui Slider
29
Anda telah menambahkan gambar baru untuk slider anda. Sekarang untuk mengurutkan penampilan slidernya silahkan geser urutan posisi gambarnya. Prosesnya kurang lebih sama seperti mengurutkan posisi widget
Gambar 3.33 sebelum di urutkan
Sudah di urutkan
Gambar 3.34 Sesudah di urutkan
Tahap terakhir janga lupa klik update.
Gambar 3.35 Update Slider
30
Sekarang Kita cek hasilnya di halaman utama web kita.
Gambar 3.36 Slider Terupdate
31
