PETUNJUK TEKNIS

PEMBUATAN WEBSITE SEKOLAH

sch.co.id

Supported By

PT RIKAT ABADI MANUNGGAL

Copyright @ RAM 2016

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 ”http://”, seperti contoh
http://smp215jkt.sch.co.id/, 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.
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.
 Langkah-langkah melakukan setup profile web sekolah :
Langkah 1 : Pilih Menu CMS kemudian klik sub menu Domain maka akan muncul
tampilan seperti gambar dibawah ini.

edit

Langkah 2 : Klik tombol Edit yang ada di grid

Langkah 3 : Masukkan Nama Sekolah, Domain, Title, Pilih Time Zone, Email
Sekolah , Header dan Footer, Link Social media, Headline dan juga
lokasi geografis pada kolom yang telah disediakan.
Langkah 4 : 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
tampilan seperti gambar dibawah ini.
Langkah 2 : Klik Tombol Tambah untuk menambah Menu atau Sub Menu yang
baru
Langkah 3 : Jika Menu yang dibuat merupakan sub menu dari menu yang lain
maka checklist sub account of lalu pilih menu induknya
Langkah 4 : 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
Langkah 5 : Klik Tombol Simpan Jika Telah Selesai

Untuk Mengisi Content dari menu klik icon (+) yang ada pada grid
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
teridir 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 terdiri dari 1 kolom besar

Untuk mengatur tampilan dari page (sub page ) kita harus definisikan terlebih dahulu
apakah tampilannya 1 kolom, 2 kolom ataupun 3 kolom dimana semua ini bisa kita atur
di modul Sub Page. Untuk Sub Page sendiri
sendiri terdiri dari beberapa bagian yaitu :
• Conten Menu
Centen Menu adalah tampilan yang akan ditampilan ketika menu-menu
menu yang dibuat
dibagian menu di klik sebagai contoh misalnya menu visi dan misi
mi tampilannya kita
setting Left Sidebar.
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.
• 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
tampilan seperti gambar dibawah ini.

Langkah 2 : Klik Tombol Tambah

Langkah 3 : Pilih Page (Kolomnya 1/2/3) dan juga kategori Sub Pagenya (Content
Menu, Home, Read dan More Index)
Langkah 4 : Klik Simpan Setelah selesai.
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 kategori-
kategori 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.
Langkah-langkah melakukan setup tampilan kategori website:
Langkah 1 : Pilih Menu CMS kemudian klik sub menu setup maka akan muncul
tampilan seperti gambar dibawah ini.

Langkah 2 : Klik Tambah

Langkah 3 : Pilih Kategori Misal Foto Utama

Langkah 4 : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage)
Langkah 5 : 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.
Langkah 6 : Pilih 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, Kategori Berita Model yang bisa dipilih adalah
Judul, Ringkasan, Waktu, Foto, Editor, Dan More)
Langkah 9 : 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.
Langkah 10 : Klik Simpan Jika Telah Selesai
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
tampilan seperti gambar dibawah ini.

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 .
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
tampilan seperti gambar dibawah ini.

Langkah 2 : Klik Tambah

Langkah 3 : Pilih Kategori Link Terkait
Langkah 4 : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage)
Langkah 5 : Pilih Sub Page checklist Home, Content Menu dan Read karena kita
akan menampilkan link terkait di sub page tersebut saja
Langkah 6 : 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.
Langkah 7 : Masukkan urutan (urutan kecil berarti dia posisinya akan berada
paling atas)
Langkah 8 : Pilih Modelnya (Untuk link terkait modelnya hanya bisa dipilih Judul
dan More saja)
Langkah 9 : Masukkan Row 5 jika ingin menampilkan jumlah link terkait sebanyak
5 link per halamannya .
Langkah 10 : 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
tampilan seperti gambar dibawah ini.

Langkah 2 : Klik Tambah

Langkah 3 : Pilih Kategori Galeri Foto
Langkah 4 : Pilih Page (biasanya disamakan dengan yang ada di Menu subpage
Misal 3 Right Side Bar)
Langkah 5 : Pilih Sub Page checklist Home
Langkah 6 : Pilih Posisi Content karena kita akan menampilkan galeri foto pada
tampilan 2 Kolom dan di kolom yang lebih besar
Langkah 7 : Masukkan urutan (urutan kecil berarti dia posisinya akan berada
paling atas)
 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
tampilan seperti gambar dibawah ini.

Langkah 2 : Pilih Kategori Berita

Langkah 3 : Klik Tambah
Langkah 4 : Masukan Judul
Langkah 5 : Photo (jika ada) dengan klik browse dan arahkan ke file foto
Langkah 6 : Ringkasan berita dan isi berita
Langkah 7 : Editor (siapa yang menulis atau mempublikasikan berita, biasanya
berupa inisial)
Langkah 8 : Simpan, maka akan seperti

Contoh Untuk mengisi content Link Terkait.

Langkah 1 : Pilih Menu CMS kemudian klik sub menu content maka akan muncul
tampilan seperti gambar dibawah ini.
Langkah 2 : Pilih Kategori Link Terkait
Langkah 3 : Klik Tambah
Langkah 4 : Masukan Judul
Langkah 5 : URL (biasanya alamat website yang dimaksud), misal
http://simdik.info
Langkah 6 : Editor (siapa yang menulis atau mempublikasikan link terkait)
Langkah 7 : Simpan, maka akan seperti

Contoh Untuk mengisi content Galeri Foto.

Langkah 1 : Pilih Menu CMS kemudian klik sub menu content maka akan muncul
tampilan seperti gambar dibawah ini.

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 :
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 (08128022461)

Basuki Rachman (081381092244)
Cucu Supriatna (085691799400)
Doni Setyawan (081310191882)