LAPORAN TUGAS BESAR

PEMROGRAMAN BERBASIS WEB

“Penerimaan Peserta Didik Baru SMA Negeri 1 Pasuruan”

Disusun oleh:

Dewi Intan Mustikasari (1110651038)

Ilmi Amaliyah R. (1110651002)

Yeni Wahyuningtyas (1110651040)

Tut Wuri Handayani (1110651239)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2013

1. Tujuan

Memahami dasar JavaScript dan penggunaannya pada website.

Memahami dasar jQuery dan penggunaannya pada website.

Memahami konsep dasar CSS dan penggunaannya pada web.

Memahami JavaScript dan penggunaanya.

Memahami ajax dan juga penerapannya.

2. Dasar Teori

Adapun fitur-fitur teknologi yang digunakan dalam Project ini antara lain :

1) Javascript

JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan

pada suatu dokumen HTML. Bahasa ini merupakan bahasa pemrograman untuk

memberikan kemampuan tambahan terhadap HTML yang berjalan pada sisi user/client,

bukan pada sisi server.

2) Jquery

JQuery adalah library JavaScript yang sangat ringkas dan sederhana untuk memanipulasi

komponen di HTML, menangani even, animasi, dan efek. Slogan jQuery: write less, do more.

Yaitu menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak. jQuery merupakan

library yang gratis dan open source.

a) CSS

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah aliran dari suatu kode

ke kode lain yang saling berhubungan. CSS merupakan kumpulan kode-kode

berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman

HTML.

Terdiri dari beberapa set peraturan yang memiliki: selector, property, value.

selector {property: value;}

Selector menunjukkan bagian mana yang hendak diatur/diformat.

Property bagian dari selector yang hendak diatur.

Value adalah nilai dari pengaturannya.

b) Bootstrap

Secara default, templating bootstrap tanpa memiliki fitur responsive. Responsive features

berfungsi untuk menjadikan CSS berbasis pada beberapa kondisi: rasio, width, tipe display,

dan lain-lain. Dengan fitur responsif tersebut, dapat menyesuaikan dengan layar device.

c) MetroUI

3) AJAX

AJAX adalah singkatan dari Asynchronous Javascript and XML AJAX dibuat dari

serangkaian teknologi dengan kemampuan: Javascript, XML, dan metode komunikasi

asinkron antara client dan server. Dalam prosesnya, AJAX menggunakan metode

XMLHttpRequest untuk tukar menukar data antara client & server. Javascript

menangkap isyarat dan menggunakan jalur komunikasi pada server melalui

XMLHttpRequest untuk memanggil method yang tersimpan pada server. XML

sebagai mekanisme pengiriman data. Jika javascript telah menerima respon dari server,

maka javascript memanipulasi struktur DOM dengan menampilkan data dari server dan

diterima client melalui browser.

3. Hasil Project

i. Untuk User Admin

a) Halaman Admin

Dan setelah Login dengan Username dan Password admin, maka akan

muncul tampilan home administrasi seperti gambar dibawah ini :

b) Halaman Home Admin

Dan ketika kita memilih menu Setting, di dalam menu setting ada 3 menu

lagi yaitu Manage Menu, Manage User, Informasi.

c) Halaman Manage Menu, Halaman manage menu ini digunakan untuk

mengaktif dan non aktifkan menu, misalnya ketika tanggal pendaftaran telah

habis, menu pendaftar akan di non aktifkan, dan menu pengumuman di

aktifkan.

d) Halaman Manage User, Dari halaman ini kita bisa melihat siapa saja

admin yang telah online.

e) Biodata, Halaman ini digunakan admin untuk melihat biodata pendaftar

yang sudah mendaftarkan dirinya.

f) Nilai Rapor, Halaman ini digunakan admin untuk melihat nilai pendaftar

yang sudah mendaftarkan dirinya.

g) Cetak Nilai, Halaman ini digunakan untuk mencetak nilai pendaftar.

h) Logout, Halaman ini digunakan untuk Log out setelah selesai melakukan

proses,

ii. Untuk User Selain Admin

a) Untuk tampilan home awal seperti ini :

b) Untuk peserta didik baru yang ingin mendaftar adalah klik menu daftar baru

dan setelah itu tampilannya menjadi seperti ini :

c) Setelah selesai klik daftar setalah itu muncul tampilan seperti ini, dan

silahkan di catat no.peserta dan passwordnya.

d) Setelah itu lakukan Login dan tampilannya seperti ini :

e) Setelah selesai mengisi form login klik Login, dan setelah itu muncul

tampilan seperti ini dan silahkan isi kelengkapan biodatanya.

f) Setelah selesai klik simpan dan selanjutnya mengisi form nilai raport.

g) Setelah itu klik simpan dan lakukan cetak dokumen biodata dan nilai rapor.

h) Setelah semua proses selesai klik tombol Log out dan tunggu pengumuman.

4. Kendala

a) Kurangnya komunikasi antar anggota kelompok sehingga menyebabkan projek ini

kurang maksimal.

5. Kesimpulan

Kesimpulan dari web Penerimaan Peserta Didik Baru SMA NEgeri 1 Pasuruan ini

adalah Sistem pendaftaran Siswa SMA yang dilakukan secara online. Supaya Siswa

yang rumahnya jauh tidak kesusahan untuk melakukan pendaftaran dikarenakan siswa

bisa mendaftarkan dirinya secara simple di website ini. Web ini menggunakan fitur

AJAX, JQuery, JavaScript.