Membuat Web Profil Sekolah + PPDB Online. Agus Hariyanto CV. LOKOMEDIA

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 : [email protected] 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 : [email protected]

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


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 scriptscript PHP agar mampu mengakomodasi dari semua manfaat web profil sekolah.


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


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


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


Gambar 1.3 Alur Pembahasan Buku


9

Membuat Web Profil Sekolah + PPDB Online. Agus Hariyanto CV. LOKOMEDIA

Recommend Documents