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 Catatan: Namasekolah.sch.id/wp-admin 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 Nama Keterangan 1 Tambahkan Media Upload Gambar atau Video ke dalam konten 2 Kotak Peralatan Standar Toolbox untuk memodifikasi konten, kurang lebih sama dengan fitur standar di Ms. Word 3 Kolom Konten Tempat anda menginputkan tulisan anda 4 Visual Menampilkan Tulisan anda dengan mode visual (Mudah di pahami orang umum) 5 Teks Menampilkan tulisan anda dengan mode html, (Untuk yang berpengalaman dengan bahasa HTML) 6 Bebas Gangguan Menampilkan Form Input Konten secara bersih, agar anda lebih fokus pada tulisan anda 7 Jumlah Kata 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. Gambar 2.9 Form Kategori Untuk menambahkan kategori baru klik +Tambah Kategori Baru, maka akan muncul tambahan form seperti ini. 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 Gambar 2.14 Input Tag Selesai di Tambahkan Untuk menghapus Tag, klik icon 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 Nama Keterangan 1 Unggah Berkas Upload Gambar atau Video untuk di jadikan gambar utama 2 Filter Hasil Menyaring hasil gambar berdasarkan postingan, seperti tanggal dan pencarian 3 Kotak Gambar Menampilkan semua gambar yang telah terupload, klik salah satu gambar yang ada untuk di jadikan gambar utama dengan. 4 Buat Gambar Utama 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 Nama Keterangan 1 Simpan Konsep Simpan Tulisan anda untuk di lanjutkan di lain waktu 2 Pratampil Untuk Melihat tampilan tulisan anda apabila setelah di publikasikan 3 Status Untuk mensetting status dari tulisan, masih dalam konsep atau revisi 4 Kenampakan 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 Untuk mengatur waktu kapan postingan anda akan di tampilkan. Fungsinya seperti alarm, system akan otomatis mengepost tulisan anda di waktu yang telah anda tentukan. 6 Pindahkan ke tong Untuk menghapus tulisan / postingan anda sampah 7 Terbitkan 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 Nama Keterangan 1 Sunting Untuk Mengedit Tulisan 2 Sunting Cepat 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 3 Tong Sampah Untuk Menghapus Tulisan anda. 4 Tampil 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 Akademi Kesiswaan visi dan misi Silabus Ekstrakulikuler Sejarah Singkat Materi Uji Prestasi Siswa Struktur Organisasi Kalender Akademik Gambar 2.29 Tampilan Menu Halaman 16
3.1 Membuat Menu Navigasi BAB 3. KUSTOMISASI TAMPILAN WEB 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 Gambar 3.7 Form Taut Tersuai 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 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, Setelah dirubah Gambar 3.11 Menu Navigasi Gambar 3.12 Menu Navigasi Setelah di modif No Keterangan 1 Top Navigation 2 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 Nama Keterangan 1 Tema Menampilkan Tema yang sedang aktif, Klik ubah untuk mengganti tema 2 Kustomisasi Element Element web yang dapat kita rubah 3 Pratampil Menampilkan kondisi web apabila element tersebut di rubah (Preview) 4 Close Menutup halaman penyesuaian (Jangan lupa di simpan sebelum keluar) 5 Simpan & Terbitkan 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 Untuk menambahkan gambar baru klik add slider Gambar 3.24 Pilih Slider berdasarka template 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 Klik gambar baru yang telah di tambahkan. Gambar 3.27 tambah slider 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 Sudah di urutkan Gambar 3.33 sebelum di urutkan Tahap terakhir janga lupa klik update. Gambar 3.34 Sesudah di urutkan Gambar 3.35 Update Slider 30
Sekarang Kita cek hasilnya di halaman utama web kita. Gambar 3.36 Slider Terupdate 31