PPDB-WEB

LAPORAN PEMROGRAMAN BERBASIS WEB
Penerimaan Peserta Didik Baru (PPBD) Page 1
PEMROGRAMAN BERBASIS WEB
WEB PENERIMAAN PESERTA DIDIK BARU
(PPDB)
Disusun oleh:
LUKIE PERDANASARI 1110651187
FARIS LUTHFIR ROHMAN 1110651250
RISKI RAHMAD TULLAH 1110651099
MIFTAHUL HUDA 1110651006
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012

I. Tujuan
1. Memenuhi tugas besar sebagai syarat kelulusan mata kuliah Pemrograman
Berbasis Web.
2. Dapat menerapkan fungsi CRUD (Create Read Update Delete) atau Insert,
Update, Delete, dan View data dengan baik dan benar pada Web.
3. Dapat melakukan hosting Web yang telah dibuat baik yang berbayar ataupun
tidak sehingga web dapat dilihat oleh publik.
II. Perlengkapan yang dibutuhkan
1. Modul atau refrensi tentang Pemrograman Berbasis Web
2. LCD dan Komputer
3. Notepad++, XAMPP, Browser
4. Alat tulis
III. Dasar Teori
1. Pendahuluan
Web Penerimaan Peserta Didik Baru (PPDB) merupakan web yang
sebenarnya sudah diterapkan pada Web Pendaftaran Peserta Seleksi Nasional
Mahasiswa Perguruan Tinggi Negeri (SNMPTN). Tidak jauh beda dengan Web
Pendaaftaran Peserta SNMPTN, Web PPDB ini juga menerapkan sistem transfer
untuk melakukan biaya pendaftaran.
Web PPDB ini ditujukan untuk siswa Sekolah Dasar (SD) yang akan
melanjutkan ke Sekolah Menengah Pertama (SMP). Namun jangkauan pada
sistem Web ini hanya diperuntukkan dalam satu wilayah Kabupaten Jember saja,
sehingga siswa yang mendaftar adalah siswa yang akan sekolah pada SMP N
dalam Kabupaten Jember.
Sebelum melakukan pendaftaran peserta diharapkan memperhatikan
persyaratan yang harus dipenuhi dan prosedur yang harus dilakukan. Setelah
persyaratan terpenuhi peserta diharapkan segera melakukan pembayaran
pendaftaran pada Bank yang telah tentukan, setelah melakukan transfer, maka

peserta akan mendapat username dan password dari Bank tersebut sebagai login
untuk pendaftaran.
Setelah melakukan login peserta dapat melakukan pendaftaran pada form
pendaftaran dan form yang telah ada harus diisi semua. Disaat mendaftar peserta
dibebaskan memilih Sekolah Menengah Pertama Negeri yang hendak diinginkan.
Terdapat dua sistem penyeleksian Peserta Didik Baru, dimana yang pertama
adalah penyeleksian berdasarkan rata-rata nilai Ujian Nasional. Proses
penyeleksian nilai rata-rata disediakan dalam Web, pada tiap sekolah mempunyai
grade yang berbeda dalam menentukan nilai rata-rata. Setelah peserta lolos
melalui seleksi nilai rata-rata, maka peserta berhak melakukan seleksi tulis
disekolah yang dituju. Setelah seleksi selesai dilaksanakan, maka pengumuman
peserta yang lolos juga dapat dilihat pada Web PPDB.
2. Studi Literatur
Web adalah singkatan dari World Wide Web merupakan aplikasi yang
terdapat sistem dokumen hypertext yang dapat diakses atau dijalankan melalui
Internet. Untuk menciptakan sebuah web maka harus mengenal beberapa bahasa
pemrograman berbasis web. Seperti PHP, HTML, dll.
a. PHP (Hypertext Preprocessor)
PHP merupakan sebuah bahasa scripting yang terpasang pada HTML.
Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah
beberapa fungsi PHP yang spesifik. Tujuan utama penggunaan bahasa ini
adalah untuk memungkinkan perancang web menulis halaman web
dinamik dengan cepat.
b. HTML (Hyper Text Markup Language)
Bahasa HTML adalah bahasa yang sederhana dan hanya memiliki
sedikit kesulitan. Bahasa yang merupakan dasar dari framework Internet
ini ditemukan oleh Tim Berners-Lee pada tahun 1989. Hampir setiap situs
web menggunakan bahasa ini, entah sekedar menampilkan texs, animasi,
tampilan grafis ataupun suara. Bahasa HTML sebenarnya berasal dari

bahasa lama yang disebut dengan SGML (Standard Generalized Markup
Language). Namun perkembangan HTML sudah dimulai sejak kurang lebih
10 tahun bahasa tersebut diperkenalkan.
Selain itu, dalam membuat web juga terdapat teknologi yang dapat
dimanfaatkan untuk mempercantik tampilan seperti CSS, Javascript, JQuery, dan
AJAX. Tidak hanya mempercantik tetapi juga membuat animasi pada tampilan
ataupun button.
a. CSS (Cascading Style Sheets)
suatu bahasa stylesheet yang digunakan untuk mengatur tampilan
suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang
paling umum dari CSS adalah untuk memformat halaman web yang ditulis
dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat
dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL.
Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
CSS digunakan oleh penulis maupun pembaca halaman web untuk
menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan
dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen
(yang ditulis dengan HTML atau bahasa markup lainnya) dengan
presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat
meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan
kontrol terhadap tampilan, dan mengurangi kompleksitas serta
pengulangan pada stuktur isi.
CSS memungkinkan halaman yang sama untuk ditampilkan dengan
cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui
layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau
pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML
yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya
tampilan atau skema warna dengan menggunakan CSS.
b. JavaScrip

JavaScript adalah bahasa scripting yang paling populer di internet dan
bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox,
Netscape, Opera. JavaScript digunakan pada Web pages untuk
meningkatkan design, validate forms, detect browsers, create cookies, GUI
dsb.
Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa
pemrograman yang powerful & sangat kompleks – sama dengan C & C++.
JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk
menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai
dipanggil atau saat seorang user meng-klik pada HTML element.
JavaScript dapat membaca dan menulis HTML elements - JavaScript
dapat membaca dan mengubah isi dari HTML element.
JavaScript dapat digunakan untuk mem-validasi data - JavaScript
dapat digunakan untuk mem-validasi form data sebelum di-submitted ke
server, hal ini akan mengamankan server dari pemrosesan extra
c. JQuery
jQuery adalah sebuah library Javascript yang sangat ringkas dan
sederhana untuk memanipulasi komponen di dokumen HTML, menangani
event, animasi, efek dan memproses interaksi ajax. jQuery dirancang
sedemikian rupa supaya membuat program menggunakan Javascript
menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis
kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.
jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses
loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3
dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser –
cross browser.
jQuery adalah library Javascript yang gratis dan open source. Oleh
karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan
pengembangan website kita. Tanpa library seperti jQuery, menerapkan
Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru

belajar Javascript. Plugin tambahan seperti JQuery UI (user interface)
semakin memudahkan kita mengembangkan website yang cantik dan
interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya
kemampuan jQuery.
d. Ajjax
AJAX adalah singkatan dari Asynchronous JavaScriptAnd XML. AJAX
merupakan teknik baru di dunia pengembanan halaman web yang
berguna untuk membuat aplikasi web, yang lebih “kaya” dibandingkan
dengan aplikasi web biasa. Ajax memungkinkan sebuah halaman web
memperbarui data dari server yang ditampilkannya tanpa harus
melakukanrefresh, sehingga halaman terlihat lebih responsif.
Fitur dan ciri utama AJAX adalah sebuah halaman web tidak perlu di-
refresh setiap kali ada data baru yang ingin ditampilkan. Dengan demikian,
sebuah aplikasi web akan terasa seperti aplikasi desktop saja. kecepatan,
interaktivis, fungsionalitas, dan tingkat kegunaan halaman web akan
meningkat.
Dari namanya, terlihat bahwa AJAX bersifat asynchronous. Arti
asinkron di sini bahwa permintaan data tambahan dari server dan
loadingnya dilakukan di background tanpa mempengaruhi tampilan dan
sifat halaman web sekarang.
Jadi, sembari AJAX bekerja mengambil data dari server, user yang
membuka halaman web masih tetap bisa berinteraksi dengan alaman web
tersebut, di mana halaman web tidak mengalami freezing seperti halnya
aplikasi web konvensional.
Dalam pembuatan web juga terdapat fungsi CRUD (Create Read Update
Delete) atau Insert, Update, Delete, dan View data merupakan fungsi yang selalu
ada dalam sebuah web.

IV. Hasil
1. Halaman Beranda
Pada tampilan web ini memanfaatkan CSS, twiter bootstrap, dan JavaScrip.

Disamping adalah
sourcode untuk
membuat menu
yang ada
disamping.
2. Halaman Jadwal
Source code yang digunakan dalam membuat table pada jadwal. Source code yang
ditampilkan diatas hanyalah awalan saja, karena selebihnya souce code sama hanya saja
mengganti untuk no setelahnya, jenis kegiatan setelahnya, tanggal setelahnya dan
keterangan setelahnya.
Berikut adalah tampilan halaman jadwal.

3. Halaman Persyaratan

4. Halaman prosedur Pendaftaran

5. Halaman Pendaftaran
a. Login
Dalam web ini terdapat 2 user, yaitu admin dan peserta. Sehingga ada 2 jenis tampilan
pada login, tampilan sebagai peserta dimana usernya adalah siswa dan sebagai admin
dimana usernya adalah pengelolah web.
Pertama, adalah login sebagai admin .
Setelah admin melakukan login maka admin akan dibawa pada halaman yang berhak
dikelolah oleh admin. Admin berhak melihat peserta terdaftar yang diterima dan ditolak. Admin
berhak melihat sekolah yang ada pada setiap rayon. Dan admin berhak menambahkan sekolah pada
setiap rayon.

Tidak hanya melihat peserta terdaftar yang diterima ataupun ditolak, tetapi admin juga
dapat menghapus peserta yang dirasa terdapat identitas ganda.
Ketika admin akan menghapus peserta nomor 1, maka admin akan klik hapus dan
kemudian akan tampil pesan bertuliskan “Anda Yakin Akan Menghapus?”, maka klik “OK”
dan daftar peserta nomor 1 telah terhapus.

Ketika melihat lagi daftar siswa maka nomor 1 telah digantikan oleh peserta lainnya.
Kode yang
digunakan
untuk
membuat
fungsi
hapus.

Tidak hanya melihat sekolah yang terdapat pada setiap rayon, admin juga dapat
menambahkan sekolah pada setiap rayon .
Pada form tambah sekolah, semua kolom harus diisi, ketika satu kolom saja tidak terisi
maka admin tidak dapat melanjutkan pada kolom selanjutnya.
Setelah semua terisi, dan telah sukses ditambahkan, selanjutnya kita cek apakah sekolah
yang ditambahkan sudah terdaftar dalam rayon yang dimaksudkan admin.
Maka sekolah telah terdaftar dalam rayon yang dimaksudkan .

Untuk memberikan fungsi pada button “Tambahkan”, sehingga button akan berfungsi atau
melanjutkan apabila semua kolom terisi semua.
Kedua, adalah login sebagai peserta.
Ketika siswa akan melakukan pengisian pendaftaran, maka siswa harus login terlebih
dahulu sesuai username dan password yang telah diterima ketika melakukan transfer
biaya pendaftaran.

Sebelum melakukan sign in diharapkan
perserta maupun admin memperhatikan
betul apakah yang telah diketikkan sesuai
username dan password yang diterima,
karena ketika user salah dalam menuliskan
username dan password maka akan terdapat
peringatan seperti disamping. Dan sebaliknya,
user akan dapat melanjutkan setelah ussernam
dan password sesuai.
b. Form Pendaftaran

Apabila ketika dalam pengisian terdapat satu kolom yang tidak terisikan maka siswa
tidak dapat melanjutkan pada kolom selanjutnya, jadi siswa wajib mengisi semua kolom
yang ada.
Setelah mengisi semua yang ada pada form pendaftaran, maka jangan lupa memberi
tanda cek pada kotak disebelah tulisan dengan mengekliknya, karena ketika tanda tersebut
tidak diberikan maka tidak dapat melanjutkan kemenu berikutnya dan akan terdapat
peringatan.
Adapun Source code yang digunakan untuk melakukan fungsi seperti tersebut.
Setelah dapat
melanjutkan pada
halaman berikutnya,
maka yang dilakukan
adalah sama halnya
dalam mengisi form
pada halaman
Sebelumnya.

6. Halaman Pengumuman
Pada halaman ini peserta dapat melihat hasil seleksi mereka berdasarkan nilai rata-
rata ujian nasional. Terdapatg keterangan bahwa warna “Hijau” adalah peserta yang
diterima, sedangkan warna “Merah” adalah peserta yang ditolak.
Terdapat tulisan “Export Data ke Excel” maksudnya untuk melihat hasil seleksi
secara detail, peserta dapat melihatnya dengan men-download terlebih dahulu dan
akan teerbuka berupa excel. Peserta dapat melihat secara rinci nilai yang
diperolehnya maupun peserta lainnya berdasarkan nilai rata-rata ujiannya, sehingga
dengan begitu peserta dapat meningkatkan belajar untuk seleksi tulisnya.

Setelah di ekspor ke excel
Untuk membuat warna blog pada nama peserta yang diterima atau ditolak,
sebelumnya harus mengerti kode pada tiap-tiap warna sehingga dapat membuat
warna sesuai yang diinginkan. Dan untuk membedakan warna antara peserta yang
diterima dan peserta yang ditolak, code yang digunakan adalah.

Sedangkan code-code untuk export kedalam excel.
7. Halaman Tambahan
Pada menu tambahan terdapat sub-menu sambutan dan berita, pada sub-menu
sambutan hanya berisi sambutan dari admin kepada calon dan atau peserta didik.
Sedangkan pada sub-menu berita merupakan isi berita terkini tentang dunia
pendidikan di Kabupaten Jember.

8. Halaman Panduan
Pada halaman panduan terdapat sub-menu ketenyuan dan sub-menu prosedur. Seb-
menu ketentuan ber-isi tentang syarat siswa yang boleh menjadi peserta didik di
Kabupaten Jember. Sedangkan prosedur sma halnya pada tampilan menu prosedur
yang ada di tool atas.

9. Halaman Informasi
Pada menu Informasi merupakan menu yang me-informasikan perihal PPBD kepada
calon peserta, yaitu “Daftar Rayon” dan “Siswa Terdaftar”. Daftar rayon merupakan
daftar seluruh Sekolah Menengah Pertama Negeri di Kabupaten Jember yang dibagi
berdasarkan Wilayah, sehingga memudahkan calon peserta untuk memilih sekolah
mana yang akan dituju. Sedangkan Siswa daftar merupakan daftar dari nama siswa
beserta sekolah asal dan sekolah tujuannya.

10. Halaman Forum
Menu forum hanya berisikan tentang pendapat, seperti sub-menu “Forum Wali
Murid”, sub-menu “Kritik dan Saran” dan sub-menu “Tanya Jawab”.
11. Database

a. User
b. Daftar
c. Data Wali
d. Rayon

e. Sekolah
f. Masukan

V. Kendala
1. Membuat keamanan pada form admin
2. Membuat komentar pada form kritik dan saran, sehingga berfungsi seperti
halnya facebook, atau pada blog.
3. Menambahkan animasi JQuery
4. Export data pada excel
5. Membuat fungsi pada form pendaftaran colom total nilai, sehingga ketika me-
inputkan nilai, secara otomatis total nilai akan menampilkan hasilnya.
6. Memberikan fungsi hapus pada table daftar peserta diterima dan ditolak
secara otomatis, sehingga akan hilang dari daftar tanpa me-reload terlebih
dahulu.
7. Menambahkan edit dan berfunsi pada daftar sekolah.
8. Ketika melakukan hosting

VI. Kesimpulan
1. Untuk membuat web yang indah tidak cukup hanya dengan memacu pada
bahasa pemrograman web.
2. Terdapat banyak bahasa pemrograman web yang dapat dikombinasikan
untuk menciptakan web yang indah
3. Tidak hanya berbacu pada bahasa pemrograman saja, memanfaatkan
teknologi untuk meciptakan animasi atau tampilan-tampilan lainnya yang
tidak membuat monoton.
4. Seperti CSS, JavaScrip, JQuery dan Ajjax yang telah diterapkan pada web
PPDB.
5. CSS digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam
bahasa markup.
6. CSS adalah untuk memformat halaman web yang ditulis dengan HTML.
7. JavaScrip bekerja pada banyak browser seperti Internet Explorer, Mozilla,
Firefox, Netscape, Opera.
8. JavaScript digunakan pada Web pages untuk meningkatkan design, validate
forms, detect browsers, create cookies, GUI dsb.
9. jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading
halaman web yang dibuat.
10. Ajax adalah bahasa JavaScript yang sudah cukup berumur.
11. Ajax merupakan kombinasi dari XHTML (atau HTML) dan CSS untuk bahasa
mark up dan tampilan.

PPDB-WEB

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a PPDB-WEB

Semelhante a PPDB-WEB (20)

PPDB-WEB