Website PP Statistik 1.3.0 29/11/2016
Daftar Gambar Gambar 1. 1 Tampilan Awal PP Statistik... 5 Gambar 1.2 Tampilan Menu berita.4 Gambar 1.3 Tampilan Berita 5 Gambar 1.4 Tampilan Tambah Baru..5 Gambar 1.5 Tampilan Add New Berita.5 Gambar 1. 6 Tampilan Menu Tabel... 7 Gambar 1. 7 Tampilan Table... 7 Gambar 1.8 Tampilan Add New 7 Gambar 1.9 Tampilan Add Table..7 Gambar 1.10 Tampilan ShortCode..7 Gambar 1.11 Tampilan import a table.8 Gambar 1.12 Tampilan Menu Laman 9 Gambar 1.13 Tampilan Laman 9 Gambar 1. 14 Tampilan Edit Beranda... 10 Gambar 1.15 Tampilan SiteOrigin Layout Slider.10 Gambar 1.16 Tampilan Edit Frame..10 Gambar 1.17 Tampilan Open Builder.11 Gambar 1.18 Tampilan SiteOrigin Editor.11 Gambar 1.19 Tampilan SiteOrigin Headline..12 Gambar 1.20 Tampilan SiteOrigin Post Carousel..12 Gambar 1.21 Tampilan Build Post Query 12 Gambar 1.22 Tampilan Halaman SiteOrigin Editor..13 Gambar 1.23 Tampilan Menu Media.14 Gambar 1.24 Tampilan Halaman Media..14 Gambar 1. 25 Tampilan Tambah Foto... 15 Gambar 1. 26 Tampilan Halaman Visualizer Library part 1... 16 Gambar 1. 27 Tampilan Halaman Visualizer Library part 2... 16 Gambar 1. 28 Tampilan Halaman Visualizer Library part 3... 17 Gambar 1. 29 Gambar Short-Code Grafik... 17 Gambar 1.30 Gambar Tampilan.17 Gambar 1.31 Theme Setting (Kustom Header) 18 Gambar 1. 32 Menu Tampilan -> Widget... 18 Gambar 1.33 Menu Widget..19 Gambar 1.34 Edit Footer.19
Gambar 1.35 Menu Sesuaikan (Customize) 20 Gambar 1. 36 Tampilan Menu Typography... 21 Gambar 1. 37 Menu general... 22 Gambar 1.38 Menu Header..21 Gambar 1.39 Menu Footer 22 Gambar 1.40 Menu.22
Daftar Isi I. Manual Sistem Operasi Dengan Detail Fitur/Modul... 5 I.1 Struktur Tampilan Website PP Statistik... 5 II. Pengoperasi Website PP Statistik... 5 II.1 Menu Berita... 5 II.2 Menu Table... 6 II.3 Menu Laman (Side menu, Grafik, Tabel, Berita)... 9 II.4 Menu Media... 14 II.5 Pemilihan Header... 17 II.6 Widget (Footer dan Copyright)... 18 II.7 Widget Sesuaikan (Customizer)... 19
I. Manual Sistem Operasi Dengan Detail Fitur/Modul I.1 Struktur Tampilan Website PP Statistik Untuk tujuan penyederhanaan dalam pengoperasian website Badan Pusat Statistik, struktur sistem webiste ini dibuat sederhana dan memaksimalkan fungsinya, sehingga dalam pemanfaatan tidak akan membutuhkan waktu lama untuk mempelajari pengoperasiannya. Berikut ini merupakan tampilan dari website PP Statistik: Gambar 1. 1 Tampilan Awal PP Statistik II. Pengoperasi Website PP Statistik II.1 Menu Berita Dalam menu berita ini berfungsi untuk menambahkan berita yang berada dihalaman berita website PP Statistik, yang apabila diklik akan muncul tampilan seperti ini: Gambar 1. 2 Tampilan Menu Berita
ini: Dan apabila menu berita tersebut apabila diklik akan memunculkan tampilan seperti Gambar 1. 3 Tampilan Berita Dan apabila admin ingin menambahkan berita, admin hanya tinggal klik tambah baru yang posisi menu tersebut ada dibagian kiri atas. Berikut ini merupakan tampilan menu tambah baru tersebut: Gambar 1. 4 Tampilan Tambah Baru Gambar 1. 5 Tampilan Add New Berita II.2 Menu Table Menu table ini berfungsi untuk membuat table serta menambahkan table dari file lokal, menu table sendiri terdapat beberapa anak menu yaitu add new table, import a table, export a table, dan lain-lain. Berikut ini merupakan tampilan dari menu-menu yang ada di tabel:
Gambar 1. 6 2 Tampilan Menu Tabel Dan apabila menu tabel tersebut apabila diklik akan memunculkan tampilan seperti ini: Gambar 1. 7 3 Tampilan Table
Apabila admin ingin membuat tabel baru, maka admin harus mengklik menu add new yang berada di atas. Dan apabila menu add new di klik, maka akan muncul tampilan seperti ini : Gambar 1. 8 Tampilan Add New Apabila admin mengklik add table, maka akan muncul tampilan seperti ini : Gambar 1. 9 Tampilan Add Table
Pada halaman ini, admin bisa mengisi data berdasarkan baris dan kolom yang sudah dibuat serta bisa menambahkan baris dan kolom. Apabila admin ingin menampilkan table yang sudah dibuat ke tampilan website, admin harus meng-copy shortcode yang berada di kanan atas kemudian klik save changes untuk menyimpan table yang sudah dibuat. Berikut ini merupakan tampilan shortcode: Gambar 1. 10 Tampilan Shortcode Apabila admin ingin memasukan table yang sudah dibuat di excel maka admin harus mengklik import a table. Berikut adalah tampilan menu import table: Gambar 1. 11 Tampilan menu import a table Admin bisa upload file dengan cara klik file upload pada import source, format yang dipilih hanya.csv lalu bisa pilih apakah file yang di upload sebagai tabel baru, replace tabel atau row yang lama. Kemudian klik import. Setelah admin klik import, akan muncul tampilan edit tabel seperti di gambar 1.9 lalu klik save changes. II.3 Menu Laman (Side menu, Grafik, Tabel, Berita) Dalam menu laman ini berfungsi untuk mengedit halaman tabel, grafik, dan berita serta menambahkan side menu yang berada di sebelah kiri, yang apabila diklik akan muncul tampilan seperti ini:
Gambar 1. 12 Tampilan Menu Laman ini: Dan apabila menu laman tersebut apabila diklik akan memunculkan tampilan seperti Gambar 1. 13 Tampilan Laman Apabila admin ingin mengedit menu beranda, maka admin harus mengklik menu tersebut yang sudah ada di halaman laman. Berikut ini merupakan tampilan apabila ingin mengedit halaman beranda: Gambar 1. 4 Tampilan Edit Beranda
Berikut ini terdapat penjelasan mengenai SiteOrigin: SiteOrigin Layout Slider, untuk melakukan penggantian gambar. Berikut ini merupakan tampilan dari SiteOrigin Layout Slider: Gambar 1. 15 Tampilan SiteOrigin Layout Slider Pada halaman ini, admin bisa mengubah atau menambahkan gambar. Jika ingin menambahkan gambar, klik add dan jika ingin mengedit gambar, klik tanda panah yang ada disebelah kanan frame. Berikut adalah tampilan untuk edit frame : Gambar 1. 16 Tampilan Edit Frame Jika admin mengedit kata Badan Pusat Statstik Pemerintah Provinsi DKI Jakarta yang ada di dalam gambar, maka admin harus mengklik open builder. Berikut ada tampilan open builder:
Gambar 1. 17 Tampilan Open Builder Pada halaman ini, admin tidak hanya menyisipkan kata-kata saja melainkan media lain. Untuk mengeditnya, klik edit pada siteorigin editor. Disana admin bisa mengubah kalimat serta memberikan warna atau mengubah posisi kalimat lalu klik done. Berikut adalah tampilan SiteOrigin Editor : Gambar 1. 18 Tampilan SiteOrigin Editor SiteOrigin Headline, untuk membuat sidemenu. berikut adalah tampilan siteorigin headline: Gambar 1. 19 Tampilan SiteOrigin Headline
Pada halaman ini, admin bisa memberikan tautan pada bagian destination url supaya pada saat menu tersebut di klik, akan menuju ke halaman lain. Selain itu admin bisa mengubah warna pada serta memberikan size pada font, lalu klik done. SiteOrigin Post Carousel, berguna untuk membuat tampilan berita menjadi bentuk slider. Berikut adalah tampilan SiteOrigin Post Carousel: Gambar 1. 20 Tampilan SiteOrigin Post Carousel Pada halaman ini, admin bisa memilih tipe konten yang akan ditampilkan di website dengan klik build post query. Berikut ini tampilan yang ada di halaman build post query : Gambar 1. 21 Tampilan Build Post Query Pada menu Post Type berfungsi untuk menentukan tipe konten yang akan di tampilkan pada website lalu klik save query. SiteOrigin Editor, berguna untuk untuk membuat kata-kata atau kalimat. Berikut ini adalah tampilan halaman SiteOrigin Editor :
Gambar 1. 22 Tampilan Halaman SiteOrigin Editor Pada halaman ini, admin bisa memasukkan kalimat ataupun short-code yang ada pada table maupun grafik, lalu klik done. Dan setiap admin sudah selesai menambahkan data atau mengedit tampilan, maka admin harus mengklik tombol publikasi atau simpan. * Penjelasan SiteOrigin ini juga berlaku pada halaman profil, berita, statistik, dan lain-lain II.4 Menu Media Dalam menu media ini berfungsi untuk mengupload file dan membuat grafik, yang apabila diklik akan muncul tampilan seperti ini: Gambar 1. 23 Tampilan Menu Media Menu media sendiri terdapat anak menu yaitu pustaka, tambah baru, kategori file, dan lain-lain. Dan apabila menu media diklik oleh admin maka akan muncul tampilan seperti ini:
Gambar 1. 24 Tampilan Media Dan apabila admin ingin menambahkan file atau foto terbaru, maka admin harus mengklik menu tambah baru yang berada di posisi atas. Dan yang apabila menu tambah baru tersebut diklik, maka akan muncul tampilan seperti ini: Gambar 1. 55 Tampilan Tambah Foto Ketika admin sudah mengklik menu add new, admin harus memilih file dengan cara mengklik select files. Setelah admin mengklik select files, maka file tersebut akan tersimpan secara otomatis. Apabila admin ingin membuat grafik, klik visualizer library pada menu media. Berikut adalah tampilan halaman visualizer library :
Gambar 1. 66 Tampilan Halaman Visualizer Library part 1 Pada halaman ini, hanya bisa mendukung file berformat.csv untuk membuat grafik. Klik add new untuk membuat grafik baru. Lalu akan muncul tampilan seperti ini : Gambar 1. 77 Tampilan Halaman Visualizer Library part 2 Setelah memilih grafik yang akan dibuat, klik next maka muncul tampilan seperti ini :
Gambar 1. 88 Tampilan Halaman Visualizer Library part 3 Admin bisa memasukkan data melalui lokal atau dari web. Jika dari web, maka akan muncul halaman untuk memasukkan URL yang dituju lalu klik create chart. Setelah itu admin bisa copy short-code yang ada pada halaman utama visualizer library untuk bisa di masukkan kedalam SiteOrigin Editor supaya bisa ditampilkan pada website. Berikut ini adalah contoh short-code untuk grafik : Gambar 1. 99 Gambar Short-Code Grafik II.5 Pemilihan Header Jika Anda ingin mengubah tampilan header, Anda bisa klik menu Tampilan -> Theme Setting. Tampilan menu seperti berikut Gambar 1. 30 Menu Tampilan Saat Anda menekan Theme Setting maka akan tampil seperti berikut
Gambar 1. 31 Theme Setting (Kustom Header) Tekan Save Changes untuk menyimpan pengaturan Anda. II.6 Widget (Footer dan Copyright) Menu ini digunakan untuk melakukan pengaturan di bagian Footer dan Copyright. Pertamatama klik menu Tampilan -> Widget Gambar 1. 3210 Menu Tampilan -> Widget Setelah itu klik menu Footer Widget -> Layout Builder ->Open Builder untuk mengedit tampilan footer.
Gambar 1. 33Menu Widget Setelah Open Builder di klik maka tampilan akan menjadi seperti berikut Gambar 1. 34 Edit Footer Anda bisa klik di Siteorigin Editor untuk mengedit konten. Selanjutnya Anda juga bisa mengedit area Copyright dengan klik menu Copyright Widget -> Siteorigin Editor. II.7 Widget Sesuaikan (Customizer) Menu ini digunakan untuk mengedit warna, tipografi, dan juga widget dengan tampilan yang lebih menarik karena Anda bisa langsung melihat perubahan yang Anda lakukan. Pertama-tama Klik menu Tampilan -> Sesuaikan maka tampilan akan seperti berikut
Gambar 1. 35 Menu Sesuaikan (Customize) Menu Typography digunakan untuk pengaturan font pada web Gambar 1. 36 Tampilan Menu Typography Menu General digunakan untuk melakukan pengaturan yang umum seperti nama Web dan juga logo instansi
Gambar 1. 3711 Menu General Menu Header dan Menu Footer digunakan untuk mengatur pewarnaan pada header dan footer Gambar 1. 38 Menu Header
Gambar 1. 39 Menu Footer Menu Menu, digunakan untuk melakukan pengaturan menu pada header. Klik Menu kemudian primary. Anda bisa mengatur tampilan link dan juga urutan menu. Gambar 1. 40 Menu