LAPORAN TUGAS BESAR

PEMROGRAMAN BERBASIS WEB

Disusun oleh:

Erfan Bahtiar (1110651009)

Nurul Wemi (1110651019)

Febri Eko Waluyo (1110651132)

Zainul Muhabat (1110651037)

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 konsep dasar Twitter Bootstrap dan penggunaannya sebagai templating

pada website.

Memahami dasar JavaScript dan penggunaannya pada web.

Memahami dasar jQuery dan penggunaannya

Memahami pengertian AJAX.

Memahami konsep asynchronous pada client-server.

Memahami penerapan AJAX di PHP.

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.

Contoh Program JavaScript

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.

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

a) Admin

Di bagian admin ini, kita harus login terlebih dahulu untuk dapat masuk ke

admin. Syarat masuk atau login, kita harus mempunyai username dan

password.

Berikut langkah-langkahnya :

Setelah kita login user name dan password, maka sebagai pengguna admin tersebut dapat

mengendalikan website tersebut sesuai aturan yang telah ada.

Sebagai pengguna user, kita juga dapat mengedit, dan menghapus daftar calon siswa yang telah

terdaftar. Alasan user dapat menghapus dapat dikarenakan data pada calon siswa tersebut tidak

sesuai dengan data pada ijazah yang sudah ada.

Web kami ini juga dapat menambah user atau petugas admin.

Gambar diatas adalah cara untuk menambah user atau petugas admin. Yang diantaranya harus

mengisi form nama lengkap, username, dan password yang akan digunakan oleh calon user.

Admin juga dapat menginput berita tentang sekolah tersebut.

b) Calon Pendaftar Siswa Baru

Disini adalah cara calon siswa untuk mendaftar ke sekolah SMAN 1 Trigger. Calon siswa juga

wajib mengisi data pada form pendaftaran yang sudah tersedia pada web. Calon siswa harus

mengisi data pada form tersebut sesuai dengan ijazah SMP/ MTs / sederajat. Jika data tidak

sesuai dengan ijazah, maka admin atau user dapat me-remove atau menghapus semua data calon

siswa tersebut.

Setelah calon siswa mengisi data pada form pendaftaran, maka data tersebut akan otomatis

tersimpan.

Web ini juga menampilkan grafik yang isinya adalah data jumlah calon siswa dan jumlah

sekolah yang telah terdaftar pada SMAN 1 Trigger.

Calon siswa juga dapat melihat berita-berita tentang SMAN 1 Trigger.

Jika calon siswa mendapat kesalahan atau informasi lebih lanjut, calon siswa dapat mengisi

pesan pada form kontak yang sudah tersedia. Pesan tersebut akan dibaca oleh admin yang sedang

bertugas dan admin akan menindaklajuti.

4. Tentang Kami

5. Kendala

o Sulit menerapkan fitur AJAX pada WEB

o Sulit menampilkan grafik pada FusionCharts Free - Simple Column 3D Chart

using data XML method php.

o Terlalu rumit dalam menghostingnya.

o Pembuatan session pada tiap file yang tidak dapat di akses oleh user selain admin.

o Membuat page menjadi dinamis.

6. Kesimpulan

Berdasarkan website yang telah dikerjakan, calon siswa akan lebih mudah untuk

mendaftar dimana saja, tanpa harus datang ke sekolah tersebut.

Calon siswa lebih mudah mendapatkan info sekolah yang akan dipilih.

Pendaftaran lebih ringkas atau lebih simple dalam pengisian data calon siswa

tersebut.