petunjuk teknis pembuatan website sekolah...

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.

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.

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


edit

Icon Title

Header

Logo

Headline

Footer Sosial

Network

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

pengembang) itu terdiri dari

• LCT sidebar

Tampilan web teridir

• Left sidebar

Tampilan web terdiri dari 2 kolom (kiri agak besar

• Right sidebar

Tampilan web terdiri dari 2 kolom (kiri

• Full width

Tampilan terdiri dari 1 kolom

Untuk mengatur tampilan dari page (sub page )

apakah tampilannya 1 kolom, 2 kolom ataupun 3 kolom dimana semua ini bisa kita atur

di modul Sub Page. Untuk Sub Page sendi

• Conten Menu

Centen Menu adalah

dibagian menu di klik sebagai contoh misalnya menu visi dan mi

setting Left Sidebar

• Home

Home ini merupakan tampilan awal sebuah website atau ketika Anda mengklik

Menu Beranda.

atau 3 kolom.

tampilan awalnya menjadi 3 Kolom.

Page merupakan bagian dari page, dimana page (page telah di definisikan oleh

itu terdiri dari :

teridiri dari 3 kolom (kiri kecil - tengah agak besar

terdiri dari 2 kolom (kiri agak besar - kanan kecil)

terdiri dari 2 kolom (kiri kecil - kanan agak besar)

terdiri dari 1 kolom besar

Untuk mengatur tampilan dari page (sub page ) kita harus definisikan terlebih dahulu


Untuk Sub Page sendiri terdiri dari beberapa bagian yaitu :

Centen Menu adalah tampilan yang akan ditampilan ketika menu

dibagian menu di klik sebagai contoh misalnya menu visi dan mi

setting Left Sidebar.


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.

(page telah di definisikan oleh

tengah agak besar – kanan kecil)

kita harus definisikan terlebih dahulu


ri terdiri dari beberapa bagian yaitu :

tampilan yang akan ditampilan ketika menu-menu yang dibuat

dibagian menu di klik sebagai contoh misalnya menu visi dan misi tampilannya kita


Untuk Home sendiri kita bisa buat tampilannya menjadi 2 kolom

biasanya 2 Kolom tetapi ada juga yang membuat

• 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 : 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


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 3 : Pilih Kategori Foto Utama


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 .


Contoh Melakukan Setup untuk Kategori Link Terkait yang akan muncul di halaman

home, Content Menu, dan Read




Langkah 3 : Pilih Kategori Link Terkait


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 .


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 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


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 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


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 .


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


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 2 : Pilih Kategori Link Terkait



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 2 : Pilih Kategori Galeri Foto



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)

petunjuk teknis pembuatan website sekolah...

Documents