Laporan tugas besar_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.



Documents

Laporan tugas besar_web