Membuat Web

Profil Sekolah + PPDB Online

Agus Hariyanto

CV. LOKOMEDIA
Membuat Web Profil Sekolah + PPDB Online
Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)
Penulis : Agus Hariyanto
Membuat Web Profil Sekolah + PPDB Online PHP
- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2015
153 halaman; 14 x 21 cm
ISBN : 978-602-71905-1-1

Penerbit Lokomedia,
Cetakan Pertama : Februari 2015

Editor : Lukmanul Hakim

Cover : Subkhan Anshori
Layout : Lukmanul Hakim

Diterbitkan pertama kali oleh :

CV. LOKOMEDIA
Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak
Yogyakarta 55242.

email : redaksi@bukulokomedia.com
website : www.bukulokomedia.com

Copyright Lokomedia, 2015

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian

maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

ii
 UCAPAN TERIMAKASIH

Semoga Allah SWT akan membalas kamu dengan kebaikan yang

banyak dan semoga Allah SWT akan membalas kamu dengan balasan
yang terbaik.

Banyak pihak yang sudah terlibat dalam penulisan buku ini, baik secara
langsung maupun tidak langsung. Meski tidak bisa kami sebutkan satu
per satu, tetapi kepada semuanya kami mengucapkan terima kasih atas
sampainya buku ini di tangan Anda.
Ketika buku ini berada di tangan Anda, tentunya buku ini masih jauh
dari kata sempurna dan masih dibutuhkan dari kami untuk menambah
pengetahuan agar pada edisi-edisi yang akan datang dapat seperti yang
pembaca harapkan dan inginkan.
Untuk itu izinkan kami penulis untuk mengucapkan Syukron wa
Jazakallahu khairon kepada:
Kedua Orang tua yaitu Ibundaku tersayang (Alm.Rusminah) dan juga
Ayahanda yang sudah membimbing dan memberikan kesempatan untuk
menjadi bagian dari kehidupan.
Istriku satu-satunya; Setyawati Dwi Susanti terima kasih white coffenya
Buah dari Hatiku Yang Pertama; Yusuf Achsanul Azzam
Keluarga Besar KAHMI Kabupaten Pacitan.
Keluarga Besar PNPM-MPd Provinsi Jawa Timur, khusunya kabupaten
Pacitan, Ponorogo dan Trenggalek.
Keluarga Besar LPYP Insan Cita
Keluarga Besar STKIP PGRI Pacitan

iii
 Apabila Anda ingin langsung menggunakan
Proyek Web Profil Sekolah + PPDB Online,
lihat caranya di Video Tutorial yang ada di CD.

iv
 KATA PENGANTAR

Website Sekolah sekarang ini sedang menjadi tren di dunia pendidikan dan
website sekolah mendapatkaan perhatian serta tanggapan yang sangat bagus
dari berbagai pihak, baik dari tenaga kependidikan, siswa, dan juga masyarakat.
Dengan web sekolah, semua pihak bisa merasakan manfaat dari website sekolah.
Dengan adanya website/situs sekolah, maka memberikan informasi sekolah yang
terbaru, akurat dan cepat. Semua pihak dapat berinteraksi dengan pihak sekolah
sebagai tempat terbaik untuk mendidik dan mengajar peserta didik tanpa harus
datang ke sekolah maupun menggunakan media lain yang membutuhkan dana
besar. Selain itu, dengan adanya webiste sekolah maka akan dijadikan media
promosi mengenai kualitas, keunggulan serta kelebihan-kelebihan dari sekolah
kepada khalayak umum.
Selain manfaat diatas, website sekolah juga dapat digunakan sebagai media untuk
memberikan informasi mengenai penerimaan peserta didik baru. Dalam webiste
sekolah dapat ditampilkan informasi-informasi penting seperti syarat-syarat,
jadwal, tahapan dan ketentuan- ketentuan lain dalam melakukan penerimaan
peserta didik baru.
Penerimaan Peserta Didik Baru (PPDB) merupakan proses administrasi yang
terjadi setiap tahun untuk melanjutkan ke jenjang yang lebih tinggi. Dalam sistem
kerjanya dibutuhkan sebuah sistem pengolahan data untuk mempermudah kerja
sekolah dalam mengolah data calon siswa baru. Untuk itu, dibuatlah sebuah
Sistem Informasi Penerimaan Siswa Baru yang nantinya bisa mempermudah
kerja panitia penerimaan siswa baru dalam menginput dan mengolah data calon
siswa baru.
Kesimpulannya adalah bahwa website profil sekolah itu adalah sangat penting
dan bermanfaat. Untuk memberikan nilai tambah terhadap website sekolah, maka
dapat di integrasikan dengan aplikasi PPDB Online. Dengan demikian, maka
fungsi dari website sekolah akan semakin maksimal serta akan mempermudah
pengelolaan administrasi maupun transparansi dari proses penerimaan peserta
didik baru tersebut.
Dalam buku ini, selain mengintegrasikan antara website profil sekolah dengan
aplikasi PPDB online juga dibahas mengenai pengembangan website profil

v
sekolah dari sisi internal peserta didik sekolah tersebut. Pada kahir bab buku ini
akan dibahas bagaimana cara membangun sebuah blog yang ditujukan untuk
peserta didik.
Dengan adanya kemampuan serta kreativitas dari peserta didik dalam mengelola
blog yang terintegrasi dengan website sekolah maka diharapkan akan memberikan
ruang yang lebih bagi seluruh civitas akademis sekolah dalam mengembangkan
potensi yang dimiliki sekolah.

Pacitan, Desember 2014

Agus Hariyanto
Web : www.imagomedia.com
Email : agus_pacitan@yahoo.co.id

vi
 DAFTAR ISI

BAB 1. Gambaran Umum Web Profil Sekolah dan PPDB Online.............1

1.1. Pentingnya Web Profil Sekolah dan PPDB Online.....................................2
1.2. Alur PPDB Online........................................................................................4
1.3. Merancang Web Profil Sekolah dan PPDB Online.....................................5
1.4. Konten Web Profil Sekolah dan PPDB Online............................................6
1.5. Menyiapkan Perangkat untuk Membangun Website...................................8

BAB 2. Dasar-Dasar Pemrograman PHP.....................................................11

2.1. Sekilas Tentang Pemrograman PHP...........................................................12
2.2. Tool yang Digunakan dalam Pemrograman PHP......................................13
2.2.1. Web Server dan Database.................................................................13
2.2.2. Web Browser.....................................................................................14
2.2.3. Text Editor.........................................................................................15
2.3. Kolaborasi PHP dan Database....................................................................16
2.3.1. Membuat Database dan Tabel MySQL di phpMyAdmin...............16
2.3.2. Import dan Export Database dengan phpMyAdmin.......................18
2.3.3. Koneksi dengan Database.................................................................21
2.4. Pengolahan Database dengan PHP.............................................................22
2.4.1. Mengolah Database melalui phpMyAdmin.....................................23
2.4.2. Mengolah Database dengan PHP.....................................................24
2.4.3. Memasukkan Data ke Database (Create).........................................25
2.4.4. Menampilkan Data dari Database (Read)........................................27
2.4.5. Edit Data di Database (Update)........................................................29

vii
 2.4.6. Menghapus Data dari Database (Delete).........................................30
2.5. Mengatur Tampilan Data dengan CSS.......................................................31
2.5.1. Inline Style........................................................................................32
2.5.2. Internal Style Sheets.........................................................................33
2.5.3. External Style Sheets........................................................................33

BAB 3. Kolaborasi PHP dengan AJAX/jQuery...........................................35

3.1. Sekilas Tentang AJAX................................................................................36
3.2. Beberapa Keguanaan AJAX.......................................................................37
3.3. Menyederhanakan AJAX dengan jQuery..................................................40
3.4. Apa dan Bagaimana jQuery itu?.................................................................41
3.5. Cara Penerapan jQuery dalam Coding PHP..............................................42

BAB 4. Aneka Trik PHP Pendukung Proyek...............................................45

4.1. Menambahkan Google Custom Search di Website...................................46
4.1.1. Setup Search Engine.........................................................................47
4.1.2. Kustomisasi Control Panel...............................................................49
4.1.3. Mengaplikasikan Google CSE pada Kode Website Kita................50
4.2. Customer Service Online dengan Zopim Live Chat..................................54
4.3. Membuat Scrollbar di Website...................................................................56
4.4. Membuat Tombol Load More....................................................................59
4.5. Membuat Load More Saat Scroll ke Bawah..............................................65
4.6. Membuat Image/Url Preview dengan Tooltip...........................................69
4.6.1. Image Preview untuk Blog Siswa....................................................70
4.6.2. Url Preview untuk Blog Siswa.........................................................73
4.6.3. Url Preview pada Halaman HTML..................................................77
4.4. Membuat Form Login dengan Database....................................................80

viii
BAB 5. Membedah Proyek Web Profil Sekolah dan PPDB Online..........85
5.1. Mempersiapkan Folder Proyek..................................................................86
5.2. Membuat Database dan Import Tabel........................................................91
5.3. Konfigurasi Web Profil Sekolah dan PPDB Online...................................93
5.4. Membuat File .htaccess..............................................................................96
5.5. Membuat Template dan Hitung Jumlah Pengunjung................................99
5.6. Membuat Menu Navigasi Warna Warni dengan CSS.............................101
5.7. Mengatur Content dan Widget oleh Administrator..................................103
5.8. Setting Content (Halaman Utama)...........................................................106
5.9. Setting Widget (Sidebar Widget)..............................................................110
5.10. Setting Halaman Statis............................................................................113
5.11. Setting Halaman Blog Siswa..................................................................114
5.12. Membuat Halaman Pendaftaran Calon Peserta Didik...........................115
5.13. Membuat Halaman Bukti Pendaftaran...................................................119
5.14. Pengelolaan Data Pendaftar dan Laporan PDF.....................................122
5.15. Membuat Halaman Info PPDB Online..................................................124
5.16. Setting Daya Tampung dan Nilai Tes Minimal......................................126
5.17. Setting Hasil Seleksi Calon Peserta Didik Baru....................................128
5.18. Setting Halaman Buku Tamu dan Kontak.............................................130

BAB 6. Membuat Web Blog Siswa dgn Make Over Blogger Template.. 133
6.1. Mengapa Siswa Harus Mempunyai Blog................................................134
6.2. Mengapa Blogger Sebagai Media Blog Siswa........................................136
6.3. Make Over Blogger Agar Terlihat Lebih Profesional..............................138
6.3.1. Download Template Blogger..........................................................138
6.3.2. Instalasi Template Blogger.............................................................139
6.3.3. Mengubah Default Setting Posting dan Komentar........................139

ix
 6.3.4. Mengubah Default Setting Blog Feed............................................140
6.3.5. Memahami Layout Template Blogger...........................................141
6.3.6. Setting Menu Blogger.....................................................................142
6.3.7. Setting Ikon Social Media..............................................................143
6.3.8. Setting Halaman Manual Slider.....................................................143
6.3.9. Setting Halaman Post Slider (Slide Show JSON).........................146
6.3.10. Membuat Horizontal Post Slider (1)............................................147
6.3.11. Membuat Horizontal Post Slider (2)............................................148
6.3.12. Membuat Vertikal Post Slider.......................................................149
6.4. Mengubah Nama Domain Default Blogger.............................................150

x
BAB I
Gambaran Umum
Web Profil Sekolah
dan PPDB Online
 BAB 1
Gambaran Umum Web Profil Sekolah
dan PPDB Online

1.1 Pentingnya Web Profil Sekolah dan PPDB Online

Salah satu tuntutan era globalisasi dalam dunia pendidikan adalah adanya sebuah
pengelolaan sekolah yang terintegrasi dengan sebuah sistem informasi dan
teknologi berbasis komputer. Oleh karena itu, sudah semestinya perkembangan
teknologi informasi dan komputer yang kebanyakan orang mengkaitkan dengan
teknologi internet (interconnected-networking) itu direspon oleh sekolah dalam
rangka meningkatkan pelayanan dan kualitas pendidikan kepada siswa.
Website merupakan salah satu media penyampaian informasi dan publikasi yang
mudah diakses dari mana saja, kapan saja tanpa terbatas oleh wilayah geografis
yang dapat dimanfaatkan oleh sekolah.
Website dapat diartikan sebagai kumpulan halaman yang menampilkan
informasi data teks, data gambar, data animasi, suara, video dan atau gabungan
dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu
rangkaian bangunan yang saling terkait, dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman (hyperlink).
Website bersifat statis apabila isi informasi website tetap, jarang berubah, dan
isi informasinya searah, hanya dari pemilik website. Sedangkan website bersifat
dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya
interaktif dua arah, berasal dari pemilik serta pengguna website.
Website sekolah sekarang ini sedang menjadi tren di dunia pendidikan dan
website sekolah banyak mendapatkaan perhatian, tanggapan yang sangat bagus
dari berbagai pihak, baik dari tenaga kependidikan, siswa, dan juga masyarakat.
Dengan adanya website sekolah, semua pihak bisa merasakan manfaatnya.
Berikut beberapa kegunaan Website Sekolah, diantaranya:
1. Memperkenalkan Profil Sekolah, sehingga masyarakat mengetahui
informasi penting tentang sekolah seperti Fasilitas yang tersedia, Visi dan
Misi Sekolah, Sejarah berdirinya sekolah dan informasi lainnya terkait
dengan sekolah.

2 Responsive Web Profil Sekolah + PPDB Online

2. Dengan Web Sekolah, akan membantu berinteraksinya semua civitas
akademik, baik dari internal sekolah maupun ekstra sekolah. Dengan
disediakan buku tamu dan halaman kontak, dimungkinkan civitas akademika
yang ada dengan mudah berkomunikasi tanpa batas ruang dan waktu.
3. Sebagai media resmi sekolah untuk media publikasi informasi resmi ke
masyarakat, seperti Berita Terkait Kegiatan Sekolah, Pengumuman, Pers
Release, Artikel. Semua informasi ini bisa dikemas dalam bentuk tulisan
maupun gambar dan video. Dengan demikian, informasi sekolah terbaru
dapat ditampilkan secara atraktif, menarik dan selalu update.
4. Web Sekolah dapat menampilkan karya siswa, baik berupa karya yang
ditampilkan dalam internal web sekolah maupun masuk dalam jaringan atau
network sekolah terkait.
5. Membantu sekolah menginformasikan terkait Penerimaan Peserta Didik
Baru (PPDB) secara online. Sehingga akan memudahkan Calon Siswa,
Orang Tua Murid dan pihak sekolah dalam mengelola sistem penerimaan
peserta didiknya yang baru.
Berdasarkan beberapa manfaat tersebut, maka perlu dibangun sebuah aplikasi
Web Profil Sekolah dan PPDB Online yang mampu mengakomodasi manfaat-
manfaat tersebut. Selain itu, dikarenakan perkembangan IT yang pesat, maka
Web Profil Sekolah yang dibangun haruslah mampu menyesuaikan dengan
kemajuan teknologi yang ada.
Agar Web Sekolah tidak ketinggalan zaman dan terkesan kurang bonafit, minimal
ada beberapa syarat yang harus dipenuhi dalam membangun Web Sekolah, yaitu:
1. Kompatibel dengan berbagai macam browser dan sistem operasi.
2. Dapat diakses, baik pada layar dekstop maupun sarana mobile/smartphone.
3. Memiliki tampilan yang menarik dan memiliki page speed yang bagus.
4. Memiliki halaman admin untuk memudahkan mengelola content website.
5. Memiliki ruang interaksi antara pengunjung dengan pengelola dan
pengunjung dengan pengunjung.
6. User friendly atau memiliki struktur content yang ramah pengunjung.
7. Website diusahakan dapat dengan mudah di index oleh Search Engine dan
mendukung Media Sosial (Facebook, Twitter, Google Plus, dan lain-lain).
8. Mudah dikembangkan, baik dari sisi sistem maupun content sesuai dengan
kebutuhan sekolah.

Bab I. Gambaran Web Sekolah dan PPDB Online 3

 1.2 Alur PPDB Online
Salah satu fitur yang sekarang menjadi trend dari perkembangan web sekolah
adalah diselenggarakannya Penerimaan Peserta Didik Baru (PPDB) secara
Online. PPDB online bisa dilaksanakan oleh Dinas Pendidikan terkait atau
dilaksanakan secara mandiri oleh masing-masing sekolah.
Dalam buku ini, kami hanya membahas terkait pelaksanaan PPDB Online yang
terintegrasi dengan Web Profil Sekolah untuk sekolah umum. Sebelum membuat
program terkait pelaksanaan PPDB secara online, sebaiknya kita mengetahui
proses dan alur Penerimaan Peserta Didik Baru, lihat infografis pada gambar 1.1.

Gambar 1.1 Alur PPDB Online

4 Responsive Web Profil Sekolah + PPDB Online

1.3 Merancang Web Profil Sekolah dan PPDB Online
Setelah kita mengetahui manfaat dan keunggulan serta syarat-syarat minimal dari
Website Profil Sekolah yang terintegrasi dengan PPDB online, selanjutnya adalah
bagaimana merancang desain dari sebuah website agar mampu mengakomodasi
semua kebutuhan akan manfaat dan tujuan dari dibangunnya website tersebut.
Diumpamakan bahwa pembahasan Pentingnya Website Profil Sekolah dan PPDB
Online (sub-bab 1.1) adalah hasil riset atau survey atas kebutuhan dari sebuah
aplikasi web profil sekolah, maka langkah selanjutnya adalah bagaimana hasil
riset tersebut kita rancang dalam sebuah satu kesatuan website profil sekolah yang
utuh. Berikut rancangan untuk halaman pengunjung. Lihat gambar 1.2.

Gambar 1.2 Rancangan Web Profil Sekolah

Gambar 1.2 merupakan rencana bangunan website untuk menempatkan script-

script PHP agar mampu mengakomodasi dari semua manfaat web profil sekolah.

Bab I. Gambaran Web Sekolah dan PPDB Online 5

 1.4 Konten Web Profil Sekolah & PPDB Online
Untuk memaksimalkan fungsi web profil sekolah dibutuhkan tab-tab untuk
menempatkan script PHP agar tujuan dari web profil sekolah bisa dicapai. Berikut
tab-tab yang disediakan adalah:
Tab Tag,
Tab tag berfungsi untuk menampilkan slogan atau tag dari sekolah terkait.
Dengan tag ini, diharapkan mampu mengangkat citra dari sekolah.
Tab Social Icon.
Dengan pesatnya perkembangan media sosial, ini mau tidak mau membuat
konektivitas antara pihak satu dan pihak lain semakin dekat. Media sosial
memegang peranan penting untuk membangun jaringan dan social icon ini
berfungsi untuk membuat koneksi antara website sekolah dengan media
sosial.
Tab Header.
Dalam tab header memuat logo sekolah dan nama sekolah, bisa juga untuk
menampilkan image atau tag unggulan sekolah.
Tab Menu.
Sudah menjadi kewajiban dari sebuah website yaitu memiliki menu sebagai
terminal navigasi untuk mengunjungi semua halaman yang disediakan.
Adapun Menu yang disediakan dalam website profil sekolah ada dua kategori
menu, yaitu Menu Utama dan Sub Menu.
Halaman Beranda.
Beranda website memiliki peranan penting dalam memberikan kesan
pertama pada pengunjung. Hampir semua pengunjung webiste pertama kali
melihat bagaimana halaman berandanya dulu, baru kemudian memtuskan
untuk menejelajahi content atau tidak.
Oleh karena itu, beranda harus didesain semenarik mungkin, seinformatif
mungkin untuk memancing pengunjung menelusuri lebih jauh isi dan
informasi yang disediakan.
Berkaitan dengan hal tersebut, dalam buku ini juga kami bahas membuat
content halaman beranda yang bisa dikustomisasi melalui halaman
administrator, sehingga halaman beranda dapat diatur layout maupun isi
utama yang ingin ditampilkan.

6 Responsive Web Profil Sekolah + PPDB Online

 Content halaman beranda kami bagi menjadi dua, yaitu content utama dan
widget content. Silahkan lihat versi demonya di dalam script yang kami
sertakan di CD atau di http://demos.imagomedia.co.id/ppdbonline.
Halaman-Halaman Pendukung.
Halaman pendukung yang dimaksud disini adalah halaman yang memuat
content dinamis yang mencakup beberapa hal sebagai berikut:
Halaman Profil Sekolah
Halaman profil memuat Visi Misi Sekolah, Sejarah Singkat, Fasilitas,
Sambutan Kepala Sekolah dan lain-lain tergantung dari masing-masing
sekolah apa yang akan ditonjolkan.
Halaman Pengumuman dan Agenda.
Dalam halaman ini dapat ditampilkan secara dinamis berupa informasi,
agenda kegiatan maupun pengumuman penting kepada siswa,
masyarakat dan pengunjung umum.
Halaman Informasi.
Dalam halaman informasi merupakan inti dari website sekolah. Halaman
ini memegang peranan untuk menampilkan informasi sekolah. baik
yang berbentuk Berita, Artikel, Video dan Gambar-Gambar pendukung
informasi sekolah.
Halaman PPDB Online.
Dalam Halaman PPDB online memuat semua informasi PPDB seperti
Jadwal PPDB, Alur PPDB, Aturan PPDB dan ketentuan lain. Selain
itu, dalam halaman PPDB juga memuat informasi terkait Formulir
Pendaftaran dan Informasi Hasil PPDB.
Halaman Interaksi.
Pada halaman interaksi memungkinkan pengunjung berinteraksi secara
online dengan administrator atau pengunjung lain. Oleh karena itu,
harus disediakan halaman buku tamu dan halaman kontak administrator.
Halaman Gallery Photo.
Setiap sekolah pasti memiliki kegiatan rutin, dimana dari beberapa
kegiatan itu merupakan unggulan dari suatu sekolah. Karena merupakan
unggulan pastilah didokumentasikan. Sehingga wajib hukumnya dalam
web Profil Sekolah memiliki halaman Gallery Photo yang interaktif

Bab I. Gambaran Web Sekolah dan PPDB Online 7

 untuk memajang aksi-aksi dari civitas akademika yang ada.
Halaman Karya Siswa.
Siswa merupakan bagian terpenting dari sekolah, maka sekolah harus
menempatkan siswa sebagai prioritas utama. Oleh karena itu, harus
disediakan ruang bagi siswa untuk menampilkan karya-karya terbaiknya.
Siswa atau peserta didik adalah sebuah subjek unik dengan berbagai
macam ide, kreatifitas dan gagasan yang terkadang ide dan kreatifitas
melebihi ruang yang disediakan sekolah.
Oleh karena itu, pada buku ini juga dibahas terkait pembuatan blog
(dengan memanfaatkan blogger) untuk siswa, tetapi tetap dengan
subdomain tetap pada url web sekolah. Sementara pada bagian website
profil sekolah hanya menampilkan link menuju halaman blog siswa
tersebut.

1.5 Menyiapkan Perangkat untuk Membangun Website

Setelah tahap perencanaan selesai, mari kita sekarang menyiapkan perangkat
yang digunakan untuk membangun hasil rancangan web tersebut.
Apa saja yang digunakan untuk membangun website profil sekolah dan PPDB
Online? Tool yang digunakan adalah PHP, Database MySQL, CSS, AJAX
dan jQuery, JSON dan Javascript. Untuk penjelasan dari masing-masing tool
tersebut, silahkan agan-agan ke TKP, yaitu pada Bab 2 dan Bab 3.
Untuk mempermudah alur pembelajaran dalam membuat website profil sekolah
dan PPDB Online, silahkan lihat Book Map dari Buku ini. Lihat gambar 1.3.

8 Responsive Web Profil Sekolah + PPDB Online

Gambar 1.3 Alur Pembahasan Buku

Bab I. Gambaran Web Sekolah dan PPDB Online 9