PETUNJUK TEKNIS PEMBUATAN WEBSITE SEKOLAH sch.co.id

Transkripsi

1 PETUNJUK TEKNIS PEMBUATAN WEBSITE SEKOLAH sch.co.id Supported By PT RIKAT ABADI MANUNGGAL RAM 2016

2 A. DESIGN TAMPILAN WEBSITE SCH. Web sch adalah sebuah website sekolah yang dinamis, dimana sekolah bisa melakukan customize atau perubahan sendiri terhadap tampilan dan konten dari websitenya tanpa harus mempelajari bahasa pemrograman web. Langkah pertama : 1. Memasukan URL yang telah di tentukan, biasanya diawali dengan seperti contoh akan seperti : Ini adalah bentuk web publik yang akan di desain oleh sekolah secara mandiri, secara default tampilan web sekolah yang belum di design hanya berupa menu home/beranda dan sign in/login ke dalam web operator. 2. Merubah Tampilan Web Publik Untuk merubah tampilan web publik maka kita harus login terlebih dahulu pada menu Sign In. Dengan menggunakan username dan password simdik.info yang biasa di gunakan untuk pendataan di website simdik.info.

3 Setelah login maka akan muncul seperti : Secara garis besar menu-menu yang muncul setelah anda login kedalam web sekolah adalah menu-menu yang ada di simdik.info, dimana jika melakukan perubahan data di web sekolah maka data di simdik.info pun berubah. Selain menu-menu yang ada di simdik.info ada tambahan menu CMS, dimana modul CMS (lihat gambar diatas ) ini digunakan untuk mengatur web publik sekolah baik tampilan, isi dan lain sebagainya. Selanjutnya akan kita bahas mengenai modul CMS. a. Domain Modul Domain ini digunakan untuk melakukan setup profile web sekolah seperti Judul yang muncul pada tampilan website, header & footer website, Logo website, icon tampilan website, icon-icon social media yang akan muncul di website sekolah seperti facebook, twitter dan juga tampilan map dari lokasi sekolah yang akan bisa dilihat di website sekolah.

4 Langkah-langkah melakukan setup profile web sekolah : Langkah 1 : Pilih Menu CMS kemudian klik sub menu Domain maka akan muncul edit Langkah 2 Langkah 3 Langkah 4 : Klik tombol Edit yang ada di grid : Masukkan Nama Sekolah, Domain, Title, Pilih Time Zone, Sekolah, Header dan Footer, Link Social media, Headline dan juga lokasi geografis pada kolom yang telah disediakan. : Klik Simpan maka tampilan website sekolah akan seperti gambar di bawah. Header Logo Icon Title Headline Footer Sosial Network b. Menu Pada bagian menu digunakan untuk membuat menu-menu dan sub menu yang akan digunakan pada website sekolah seperti menu Profile sekolah, Visi & Misi, Sejarah Sekolah, Sambutan Kepala Sekolah dan lain sebagainya. Langkah-langkah membuat menu dan sub menu pada web sekolah : Langkah 1 : Pilih Menu CMS kemudian klik sub menu Menu maka akan muncul

5 Langkah 2 Langkah 3 Langkah 4 Langkah 5 : Klik Tombol Tambah untuk menambah Menu atau Sub Menu yang baru : Jika Menu yang dibuat merupakan sub menu dari menu yang lain maka checklist sub account of lalu pilih menu induknya : Masukan Urutan, Deskripsi, URL (jika ada link ke web lain isikan alamat urlnya), Icon, dan Pilih Menu Top / Footer juga privacy (jika akan diberi komentar ke facebook atau dishare) pada kolom yang telah disediakan : Klik Tombol Simpan Jika Telah Selesai Untuk Mengisi Content dari menu klik icon (+) yang ada pada grid

6 c. Sub Page Sub Page merupakan bagian dari page, dimana page (page telah di definisikan oleh pengembang) itu terdiri dari : LCT sidebar Tampilan web teridiri dari 3 kolom (kiri kecil - tengah agak besar kanan kecil) Left sidebar Tampilan web terdiri dari 2 kolom (kiri agak besar - kanan kecil) Right sidebar Tampilan web terdiri dari 2 kolom (kiri kecil - kanan agak besar) Full width Tampilan terdirii dari 1 kolom besar Untuk mengatur tampilan dari page (sub page ) kita harus definisikan terlebih dahulu apakah tampilannyaa 1 kolom, 2 kolom ataupun 3 kolom dimana semua ini bisa kita atur di modul Sub Page. Untuk Sub Page sendiri terdiri dari beberapa bagian yaitu : Conten Menu Centen Menu adalah tampilan yang akan ditampilan ketika menu-menu yang dibuat dibagian menu di klik sebagai contoh misalnya menu visi dan misi tampilannya kita setting Left Sidebar. Home Home ini merupakan tampilan awal sebuah website atau ketika Anda mengklik Menu Beranda. Untuk Home sendiri kita bisa buat tampilannya menjadi 2 kolom atau 3 kolom. Kebanyakan biasanya 2 Kolom tetapi ada juga yang membuat tampilan awalnya menjadi 3 Kolom.

7 Read Read ini biasanya berhubungan dengan berita atau kita klik galeri foto. Ketika kita klik judul berita atau gambar foto kita bisa set tampilannya apakah 2 Kolom atau Full Width 1 Kolom More Index More Index biasanya digunakan untuk melihat berita atau konten-konten sebelumnya karena biasanya di dalam sebuah website yang ditampilkan di awal hanya beberapa saja dan ketika Anda klik More Anda bisa definisikan tampilannya apakah 2 kolom atau 3 Kolom Secara default jika kita tidak melakukan setup sub page maka semua tampilan adalah 1 kolom atau full width Langkah-langkah melakukan setup tampilan web subpage pada web sekolah : Langkah 1 : Pilih Menu CMS kemudian klik sub menu subpage maka akan muncul Langkah 2 Langkah 3 Langkah 4 : Klik Tombol Tambah : Pilih Page (Kolomnya 1/2/3) dan juga kategori Sub Pagenya (Content Menu, Home, Read dan More Index) : Klik Simpan Setelah selesai.

8 d. Sub Kategori Sama halnya dengan Sub Page dimana merupakan bagian dari page begitupun dengan Sub Kategori merupakan bagian dari Kategori, dimana Kategori (Kategori telah di definisikan oleh pengembang) itu terdiri dari : Berita Berisi tentang Berita atau Info Terkini ataupun pengumuman sekolah Galeri Foto Berisi kumpulan foto dari kegiatan di sekolah ataupun foto-foto sekolah Link Terkait Berisi kumpulan link terkait misal link ke web dinas pendidikan, simdik.info, kemdikbud dan lain sebagainya Download Berisi kumpulan file yang bisa di download oleh setiap orang Foto Utama Tampilan atau header utama website sekolah biasanya merupakan banner sekolah Lainnya Bisa digunakan untuk menampung tampilan gambar misalnya mengenai gambar tokoh inspiratih, kata bijak atau pun kata mutiara dan lain sebagainya. Sub Kategori berfungsi untuk mengelompokan kategori-kategori diatas menjadi beberapa sub misalnya Galeri Foto bisa di subkan menjadi beberapa sub kategori misal menjadi Sub Kategori Kegiatan UN, Sub Kategori Kegiatan Ekskul dan Berita di sub kategorikan menjadi Berita Umum, Atau Juga Berita Sekolah. Sebagai Catatan tidak semua kategori bisa di Sub Kan menjadi beberapa Sub Kategori, hanya 2 Kategori saja yang bisa kita sub kan menjadi beberapa Sub Kategori yaitu Berita dan Galeri Foto. Langkah-langkah melakukan setup sub Kategori : Pada dasarnya langkah-langkahnya sangat sederhana dan hampir sama dengan langkah-langkah setup menu-menu yang telah dijelaskan diatas sehingga tidak kami jelaskan lebih lanjut. e. Setup Modul Setup ini digunakan untuk melakukan setting terhadap tampilan dari website secara keseluruhan dimana pada modul ini Anda bisa menentukan posisi dari kategorikategori seperti Foto Utama, Berita, Galeri Foto, Download, Link Terkait posisinya akan diletakkan dimana. Setup ini sangat berkaitan dengan bagian-bagian yang lain yaitu dengan Sub Page dan Kategori. Dimana yang harus kita setup adalah utamanya adalah Kategori yaitu Foto Utama, Berita, Galeri Foto, Download, Link Terkait dan Kategori Lainnya.

9 Langkah-langkah melakukan setup tampilan kategori website: Langkah 1 : Pilih Menu CMS kemudian klik sub menu setup maka akan muncul Langkah 2 : Klik Tambah Langkah 3 Langkah 4 : Pilih Kategori Misal Foto Utama : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage)

10 Langkah 5 Langkah 6 Langkah 7 Langkah 8 Langkah 9 Langkah 10 : Pilih Sub Page (Pada saat tampilan sub page apa saja foto utama ini akan ditampilan misal pada saat klik Home, Content Menu, Read, Kontak, dan More Index). Jika di Checklist semua maka foto utama ini akan selalu muncul pada setiap halaman website, jika hanya di checklist Home maka foto utama ini akan muncul ketika Anda mengklik menu Home tetapi ketika Anda klik Content Menu maka foto utama ini tidak akan ditampilkan. : Pilih Posisi (Untuk kategori Foto Utama harus dikosongkan jika tidak maka tidak akan bisa disimpan) : Masukkan urutan (Untuk Kategori Foto Utama biasanya 1 karena banner/ Foto Utama sekolah biasanya ditampilkan di paling atas halaman utama) : Pilih Modelnya (Untuk Foto Utama Modelnya hanya bisa dipilih Judul dan Ringkasan saja, Kategori Berita Model yang bisa dipilih adalah Judul, Ringkasan, Waktu, Foto, Editor, Dan More) : Masukkan Row. Row disini adalah jumlah dari kategori yang akan ditampilkan di halaman website misal diisi 5 untuk kategori berita maka hanya 5 berita terbaru yang ditampilkan. : Klik Simpan Jika Telah Selesai

11 Disini Kami akan contohkan bagaimana melakukan setup untuk kategori Foto Utama dimana kita akan membuat foto utama ini akan selalu muncul di setiap halaman website Langkah 1 : Pilih Menu CMS kemudian klik sub menu setup maka akan muncul Langkah 2 : Klik Tambah Langkah 3 : Pilih Kategori Foto Utama Langkah 4 : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage) Langkah 5 : Pilih Sub Page dengan checklist semuanya karena kita akan menampilkan foto utama ini di semua halaman website Langkah 6 : Kosongkan Posisi (Untuk kategori Foto Utama harus dikosongkan jika tidak maka tidak akan bisa disimpan) Langkah 7 : Masukkan urutan (Untuk Kategori Foto Utama biasanya 1 karena banner/ Foto Utama sekolah biasanya ditampilkan di paling atas halaman utama) Langkah 8 : Pilih Modelnya (Untuk Foto Utama Modelnya hanya bisa dipilih Judul dan Ringkasan saja) Langkah 9 : Masukkan Row 1.

12 Langkah 10 : Klik Simpan Jika Telah Selesai Contoh Melakukan Setup untuk Kategori Link Terkait yang akan muncul di halaman home, Content Menu, dan Read Langkah 1 : Pilih Menu CMS kemudian klik sub menu setup maka akan muncul Langkah 2 Langkah 3 Langkah 4 Langkah 5 Langkah 6 Langkah 7 : Klik Tambah : Pilih Kategori Link Terkait : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage) : Pilih Sub Page checklist Home, Content Menu dan Read karena kita akan menampilkan link terkait di sub page tersebut saja : Pilih Posisi Misal kita akan menampilkan di Kanan halaman pilih Right dengan syarat pagenya yang dipilih adalah 3 (Right Side Bar). Jika Pilih Content maka Posisi Link Terkait ini akan muncul di Bar yang lebih besar misal Untuk Page 3 (Right Side Bar) maka jika dipilih content maka posisi link terkait akan muncul dibagian kiri yang kolomnya paling besar. : Masukkan urutan (urutan kecil berarti dia posisinya akan berada paling atas)

13 Langkah 8 Langkah 9 Langkah 10 : Pilih Modelnya (Untuk link terkait modelnya hanya bisa dipilih Judul dan More saja) : Masukkan Row 5 jika ingin menampilkan jumlah link terkait sebanyak 5 link per halamannya. : Klik Simpan Jika Telah Selesai Contoh Untuk berkreasi misal menampilan Kategori Galeri Foto di Posisi Kolom lebih besar ketika di Klik Home dan menampilkan Galeri Foto Di kolom Kanan ketika Anda Klik Content Menu dan Read. Langkah 1 : Pilih Menu CMS kemudian klik sub menu setup maka akan muncul Langkah 2 Langkah 3 Langkah 4 Langkah 5 Langkah 6 Langkah 7 : Klik Tambah : Pilih Kategori Galeri Foto : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage Misal 3 Right Side Bar) : Pilih Sub Page checklist Home : Pilih Posisi Content karena kita akan menampilkan galeri foto pada tampilan 2 Kolom dan di kolom yang lebih besar : Masukkan urutan (urutan kecil berarti dia posisinya akan berada paling atas)

14 Langkah 8 : Pilih Modelnya (Untuk Geleri Foto modelnya hanya bisa dipilih Galeri Foto dan More saja) Langkah 9 : Masukkan Row 5 jika ingin menampilkan jumlah Galeri Foto sebanyak 5 link per halamannya. Langkah 10 : Klik Simpan Jika Telah Selesai Langkah 11 : Kembali Ke Langkah 1, 2, 3 dan 4 Langkah 12 : Pilih Sub Page Content Menu dan Read Langkah 13 : Pilih Posisi Right karena kita akan menampilkan galeri foto pada tampilan 2 Kolom dan di kolom yang lebih Kecil yaitu di kanan Langkah 14 : Masukkan urutan (urutan kecil berarti dia posisinya akan berada paling atas) Langkah 15 : Pilih Modelnya (Untuk Geleri Foto modelnya hanya bisa dipilih Galeri Foto dan More saja) Langkah 16 : Masukkan Row 5 jika ingin menampilkan jumlah Galeri Foto sebanyak 5 link per halamannya. Langkah 17 : Klik Simpan Jika Telah Selesai f. Content Setelah membuat kerangka tampilan website seperti yang telah dijelaskan di atas maka langkah berikutnya adalah melakukan pengisian terhadap kategori website. Misalkan : Berita Download Fhoto Utama Galeri Fhoto Link Terkait Contoh Untuk mengisi content Berita. Langkah 1 : Pilih Menu CMS kemudian klik sub menu content maka akan muncul Langkah 2 : Pilih Kategori Berita

15 Langkah 3 Langkah 4 Langkah 5 Langkah 6 Langkah 7 Langkah 8 : Klik Tambah : Masukan Judul : Photo (jika ada) dengan klik browse dan arahkan ke file foto : Ringkasan berita dan isi berita : Editor (siapa yang menulis atau mempublikasikan berita, biasanya berupa inisial) : Simpan, maka akan seperti Contoh Untuk mengisi content Link Terkait. Langkah 1 : Pilih Menu CMS kemudian klik sub menu content maka akan muncul

16 Langkah 2 Langkah 3 Langkah 4 Langkah 5 Langkah 6 Langkah 7 : Pilih Kategori Link Terkait : Klik Tambah : Masukan Judul : URL (biasanya alamat website yang dimaksud), misal : Editor (siapa yang menulis atau mempublikasikan link terkait) : Simpan, maka akan seperti Contoh Untuk mengisi content Galeri Foto. Langkah 1 : Pilih Menu CMS kemudian klik sub menu content maka akan muncul Langkah 2 : Pilih Kategori Galeri Foto Langkah 3 : Klik Tambah Langkah 4 : Masukan Judul Langkah 5 : Browse (Arahkan kepada file foto yang akan kita tampilkan di website) Langkah 6 : Mengisi Ringkasan (jika ada) Langkah 7 : Editor Langkah 8 : Simpan maka akan seperti :

17 B. Menu simdik Menu simdik ini adalah menu yang sama seperti pada pendataan web simdik.info seperti Kesiswaan, Formulir, Download, Report dan Forum. Semua menu di maksud dalam penggunanaanya sama seperti di web pendataan simdik.info. Help Support Contact : Arief Wangsa Arifin ( ) Basuki Rachman ( ) Cucu Supriatna ( ) Doni Setyawan ( )