BERBASIS WEB
MAKALAH
Diajukan untuk memenuhi tugas Ujian Akhir Semester V mata kuliah
Web Programming I
Kelas : 12.5C.05
Segala puji dan syukur kita panjatkan kepada Allah SWT serta shalawat
dan salam kami sampaikan hanya bagi tokoh dan teladan kita Nabi Muhammad
SAW. Diantara sekian banyak nikmat Allah SWT yang membawa kita dari
kegelapan ke dimensi terang yang memberi hikmah dan yang paling bermanfaat
bagi seluruh umat manusia, sehingga oleh karenanya kami dapat menyelesaikan
salah satu tugas makalah mata kuliah Web Programming I yang berjudul
berkat dukungan material dari berbagai pihak, akhirnya kami dapat menyelesaikan
tugas ini dengan cukup baik, oleh karena itu melalui kesempatan ini kami
penulisan ini. Akhirnya kami menyadari bahwa Makalah ini sangat jauh dari
kesempurnaan. Oleh karena itu segala saran dan kritik yang membangun dari
semua pihak sangat kami harapkan demi perbaikan pada tugas selanjutnya.
Harapan kami semoga makalah ini bermanfaat khususnya bagi kami dan bagi
Penyusun
ii
DAFTAR ISI
Halaman Judul............................................................................................................i
Kata Pengantar ...........................................................................................................ii
Daftar Isi.....................................................................................................................iii
iii
BAB I
PENDAHULUAN
berbagai aspek kehidupan mulai dari personal hingga instansi. Dalam instansi
segala proses yang berkaitan dengan pembangunan dan perbaikan sistem. Salah
dalam sistem informasi antara lain adalah fleksibel, efektif dan efisien.
ujian tidak lagi dilaksanakan secara manual namun telah mengalami transformasi
Sistem ujian yang masih dilakukan secara manual termasuk dengan sistem
koreksi ujiannya, membuat guru biasanya harus menambah jam kerja untuk
membuat dan menilai soal ujian para siswa secara manual. Dalam kemajuan
teknologi informasi yang semakin pesat, ujian manual tidak lagi dapat dijadikan
sebagai kegiatan rutin. Untuk itu dibutuhkan sebuah sistem ujian berbasis web
1
2
kecurangan siswa karena soal yang disajikan akan berbeda satu dengan yang lain
serta dapat menghemat waktu yang biasanya digunakan untuk mengoreksi ujian
sesuai dengan kriteria sistem itu sendiri. Sistem ujian berbasis web juga memilki
manfaat finansial yaitu dapat menghemat kertas ujian karena menggunakan piranti
yang tidak sekali pakai. Penerapan sistem ujian berbasis web diharapkan akan
Sedangkan tujuan dari penulisan makalah ini adalah untuk memenuhi tugas
Web Programing I sebagai persyaratan untuk memperoleh nilai UAS pada jurusan
LANDASAN TEORI
yang mendukung guna membuat website Nampak lebih menarik. Unsur – unsur
A. Internet
solusi jaringan yang dapat menghubungkan beberapa jaringan local yang ada pada
yang ada pada setiap tempat. Tidak hanya itu juga dengan adanya fasilitas internet
setiap orang dapat melakukan kegiatan apa saja seperti mengirim email, mencari
data, bermain game, akses bank, atau bahkan melakukan pembelajaran secara
online.
3
4
dengan computer lain dalam sebuah jaringan atau dengan jaringan global yang di
sebut internet.
Pada saat kita menggunakan internet, ada tiga komponen dasar yang
1. Jaringan fisik computer, berfungsi sebagai media atau saluran yang digunakan
2. Protokol, berfungsi sebagai alat komunikasi dari satu sistem ke sistem lain.
3. Program aplikasi, adalah fasilitas yang digunakan oleh pemakai untuk dapat
berinteraksi di internet.
B. Website
sistem dengan informasi yang disajikan dalam bentuk teks, gambar, suara dan lain-
lain yang tersimpan dalam sebuah server web internet yang disajikan dalam bentuk
hypertext.
1. Website Statis adalah suatu website yang mempunyai halaman yang tidak
berubah. Yang artinya adalah untuk melakukan sebuah perubahan pada suatu
halaman hanya bisa dilakukan secara manual yitu dengan cara mengedit kode-
yang bisa diakses oleh para pengguna (user) pada umumnya, juga telah
disediakan halaman backend yaitu untuk mengedit konten dari website tersebut.
Contoh dari website dinamis seperti web berita yang didalamnya terdapat
3. Website Interaktif adalah suatu website yang memang pada saat ini memang
terkenal. Contohnya website interaktif seperti forum dan blog. Di website ini
para pengguna bisa berinteraksi dan juga beradu argumen mengenai apa yang
C. PHP
dalam server dan mampu membuat web menjadi interaktif dan dinamis. PHP dapat
mengolah data dari komputer client dan dari computer server itu sendiri, sehingga
PHP sebenarnya bahasa scripting seperti HTML, artinya source code php
ini tetap disimpan dalam bentuk teks dimana apabila diakses oleh user akan
langsung diparser oleh php-parser di servernya. Dan kode ini tidak di ubah ke
bentuk lain terlebih dahulu. Banyak tersedia platform PHP untuk mempermudah
pemrosesan. Cara penulisan script atau kode program PHP di awali dengan
pembukaan script :
<?php
6
?>
Kode program PHP dapat disisipkan dibagian manapun dalam HTML atau
XHTML. Halaman yang ada script PHP di dalamnya, harus disimpan dengan
ekstensi .php
D. HTML
pemrograman web adalah HTML, HTML kependekan dari Hyper Text Markup
Language dan dokumen HTML merupakan teks murni yang sering disebut dengan
dengan Tag <HTML>, dan kemudian dapat di akhiri dengan tanda tutup </HTML>.
Dengan menggunakan tanda mulai dan tanda akhir dapat diartikan bahwa semua isi
data yang ada didalam Tag <HTML> </HTML> merupakan halaman isi dari
sebuah web. Berikut adalah struktur data sebuah halaman HTML yang digunakan
<html>
<head>
<title>judul web</title>
……isi head…….
</head>
<body>
</body>
</html>
Dari script diatas dapat diperhatikan bahwa semua Tag yang digunakan
memiliki pasangan yaitu menggunakan kode pembuka ( < > ) dank ode penutup ( <
/ > ), sebagai contoh HTML yang dimulai dengan tanda <html> dan di akhiri dengan
bahwa semua Tag harus memiliki kode pembuka ( star tag ) dan penutup ( end tag
), akan tetapi nantinya akan tetapi mendapatkan beberapa Tag yang tidak
memerlukan kode penutup seperti perintah ganti baris <br>, halaman (<P>), dan
lainnya.
1. <html> </html> : didalam Tag HTML, hal yang harus ada adalah kode
<HTML>, karena kode ini akan menyatakan jenis dokumen yang kita ketik. Tag
<HTML> wajib ada dan kemudian harus ditutup dengan kode </HTML>.
2. <head> </head> : kode <HEAD> jika diartikan berarti kepala, didalam web pun
kode <HEAD> juga diartikan sebagai kepala dalam program. Kode <HEAD>
yang kemudian diakhiri dengan kode </HEAD> adalah merupakan kode yang
3. <title> </title> : kode ini selalu akan diletakkan didalam kode <HEAD>, kode
ini dimaksudkan untuk mendeklarasi judul yang akan tampil dalam browser web
yang dibuat.
4. <body> </body> : merupakan kode yang berguna untuk meletakan semua isi
web yang akan kita buat. Kode ini diawali tanda <BODHTML, hal yang harus
ada adalah kode <HTML>, karena kode ini akan menyatakan jenis dokumen
8
yang kita ketik. Tag <HTML> wajib ada dan kemudian harus ditutup dengan
kode </HTML>.
5. <head> </head> : kode <HEAD> jika diartikan berarti kepala, didalam web pun
kode <HEAD> juga diartikan sebagai kepala dalam program. Kode <HEAD>
yang kemudian diakhiri dengan kode </HEAD> adalah merupakan kode yang
6. <title> </title> : kode ini selalu akan diletakkan didalam kode <HEAD>, kode
ini dimaksudkan untuk mendeklarasi judul yang akan tampil dalam browser web
yang dibuat.
7. <body> </body> : merupakan kode yang berguna untuk meletakan semua isi
web yang akan kita buat. Kode ini diawali tanda <BODY> dan diakhiri dengan
</BODY>.
besar dan kecil, misalnya pada saat mengetik <HTML> maka akan sama bila
menggunakan kode <Html> atau <html>. Jadi pada HTML idak mengenal istilah
case sensitive seperti yang ada pada sistem operasi LINUX maupun UNIX.
E. MySQL
dalam katagori database managemen sistem, yaitu data base yang terstruktur dalam
diletakkan deserver yang bisa diakses melalui komputer client. Pengaksesan dapat
tersebut di-link oleh suatu relasi yang memungkinkan kombinasi data dari beberapa
untuk interaksi antara script program dengan database server dalam hal pengolahan
data. Dengan SQL, maka dapat dibuat tabel yang akan diisi data, memanipulasi data
F. Dreamweaver
suatu perangkat lunak web editor yang digunakan untuk membangun dan
mendesign suatu website dengan fitur – fitur yang menarik dan kemudahan dalam
penggunaannya”.
lainnya dan dapat berintegrasi pada beberapa perangkat lunak lainnya, dan tidak
salah jika perangkat lunak ini menjadi pilihan para web-designer amatir maupun
expert.
10
G. Xampp
Menurut Madcoms (2009:1) Xampp adalah salah satu paket software web
server yang terdiri dari Apache, MySQL, PHP, dan phpMyAdmin. Proses instalasi
Xampp sangat mudah, karena tidak perlu melakukan konfigurasi Apache, PHP, dan
otomatis.
Fungsi Xampp adalah sebagai server yang berdiri sendiri (localhost), yang
terdiri atas program Apache HTTP, Server, MySQL database, dan penerjemah
bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama Xampp
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP,
dan Perl. Program ini tersedia dalam GNU General Public Lisensi dan bebas,
merupakan web server yang mudah digunakan yang dapat melayani tampilan
basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara
data yang sudah diolah atau informasi dan membuat informasi tersedia saat
dibutuhkan”.
Pada intinya basis data adalah media untuk menyimpan data agar dapat di
Relationship Diagram (ERD) adalah suatu rancangan atau bentuk hubungan suatu
kegiatan didalam sistem yang berkaitan langsung dan mempunyai fungsi didalam
proses tersebut”. ERD merupakan suatu pemodelan dari basis data relasional yang
didasarkan atas presepsi didalam dunia nyata, dunia ini senantiasa terdiri dari
sekumpulan objek yang saling berhubungan antara satu dengan yang lainnya. Suatu
objek disebut entity dan hubungan yang dimiliki disebut relationship. Suatu entity
bersifat unik dan memiliki atribut sebagai pembeda dengan entity lainnya.
dalam basis data berdasarkan objek – objek dasar data yang mempunyai hubungan
antara relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk
menggambarkannya digunakan beberapa notasi dan simbol. Pada dasarnya ada tiga
1. Entity
Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat dibedakan.
2. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi
yang lain.
12
3. Hubungan / Relasi
diagram relasi adalah sebuah garis lurus yang menghubungkan dua buah entity.
Kunci relasi harus mengidentifikasi sebuah baris yang unik didalam sebuah
relasi.
1. Superkey
Satu atau lebih atribut yang dapat membedakan setiap baris data dalam tabel
secara uni.
2. Kandidat Key
Merupakan kumpulan atribut minimal yang membedakan setiap baris data dalam
Nilai dari kunci relasi harus mengidentifikasi sebuah baris yang unik didalam
sebuah relasi. Kunci relasi terdiri dari satu atau lebih atribut – atribut relasi. Agar
bisa menjadi sebuah primary key, sebuah atribut haruslah memenuhi persyaratan
Kunci yang tidak ada didunia nyata, tetapi diadakan dan dijadikan primary key.
Kunci alternative dibuat ketika tidak ada satu pun atribut dalam sebuah relasi
yang bisa mewakili relasi tersebut, atau ada yang bisa menjadi kandidat key
5. Komposit Key
6. Foreign Key
Sebuah foreign key adalah sekumpulan atribut dalam suatu relasi (missal A)
sedemikian sehingga kompul atribut ini bukan kunci relasi A tetapi merupakan
7. Kardinalitas Pemetaan
entity lain dengan suatu relationship sets. Kardinalitas pemetaan meliputi, antara
lain :
terbentuk dari hasil antar himpunan entitas”. Logical record strukture dibentuk
dengan nomor dari tipe record. Logical record strukture terdiri dari link-link
diantara tipe record. Link ini menunjukan arah dari satu tipe record lainnya. Banyak
link dari LRS yang diberi tanda field-field yang kelihatan pada kedua link tipe
record.
14
“SDLC atau System Development Life Cycle adalah proses mengembangkan atau
mengubah suatu sistem perangkat lunak dengan menggunakan model – model dan
perangkat lunak sebelumnya berdasarkan best practice atau cara – cara yang sudah
teruji baik.
Beberapa model dasar akan dibahas pada subbab – subbab berikutnya. Selain model
– model dasar yang akan dibahas, masih banyak model – model yang muncul
SDLC air terjun (waterfall) sering juga disebut model sekuensial linier (sequential
Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara
sekuensial atau urut dimulai dari analisis, desain, pengkodean, pengujian dan tahap
lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat
2. Desain
Desain perangkat lunak adalah proses multi langkah yang focus pada desain
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap
ini adalah program komputer sesuai dengan desain yang telah dibuat pada tahap
desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara segi lojik dan fungsional dan
memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk
ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan
yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus
model navigasi dasar, yang harus dikenal dengan baik oleh desainer, karena setiap
model navigasi dapat memberikan solusi untuk kebutuhan yang berbeda. Macam-
dimulai dari satu halaman. Beberapa desainer web menggunakan satu halaman
Gambar II.1
2. Hierarchical model
Diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node
dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi
dalam perusahaan.
Gambar II.2
3. Spoke-and-hub model
Hanya menggunakan satu node untuk berhubungan dengan node lain. Pada
model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman
Gambar II.3
digunakan karena user dapat mengakses semua topik dengan subtopik dengan
cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan
Gambar II.4
pengujian perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan
masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang
dibutuhkan.
19
dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan.
2. Pemilihan Input.
3. Pemilihan Output.
4. Seleksi Input.
5. Pengujian.
6. Review Hasil.
7. Evaluasi.
Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat
mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan
spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian
kotak hitam harus dibuat dengan kasus benar dan kasus salah.
berorientasi objek”.
Use case diagram yaitu salah satu jenis diagram pada UML yang
menggambarkan interaksi antara sistem dan aktor, use case diagram juga dapat
2. Activity Diagram
Activity diagram atau diagram aktivitas yaitu salah satu jenis diagram pada UML
yang dapat memodelkan proses-proses apa saja yang terjadi pada sistem.
3. Sequence diagram
Sequence diagram yaitu salah satu jenis diagram pada UML yang menjelaskan
interaksi objek yang berdasarkan urutan waktu, sequence diagram juga dapat
4. Class diagram
Class diagram yaitu salah satu jenis diagram pada UML yang digunakan untuk
menampilkan kelas-kelas maupun paket-paket yang ada pada suatu sistem yang
21
nantinya akan digunakan. Jadi diagram ini dapat memberikan sebuah gambaran
5. Statemachine diagrag
Statemachine diagram yaitu salah satu jenis diagram pada UML yang
6. Communication diagram
Communication diagram yaitu salah satu jenis diagram pada UML yang dapat
menggambarkan interaksi antara objek yang ada pada sistem. Hampir sama
7. Deployment diagram
Deployment diagram yaitu salah satu diagram pada UML yang menunjukan tata
letak suatu sistem secara fisik, dapat juga dikatakan untuk menampilkan bagian-
bagian softwere yang terdapat pada hardwere dan digunakan untuk menerapkan
digunakan sistem.
BAB III
PEMBAHASAN
Gambar III.1
22
23
B. Activity Diagram
Gambar III.2
Gambar III.3
Gambar III.4
Gambar III.5
Gambar III.6
Struktur navigasi pada sistem ujian sekolah berbasis web ini berfungsi untuk
memperlihatkan keseluruhan dari isi website beserta hubungan antar isi. Struktur
Gambar III.7
Gambar III.8
Gambar III.9
Gambar III.10
Gambar III.11
Gambar III.12
Gambar III.13
Gambar III.14
Gambar III.15
Gambar III.16
Gambar III.17
Gambar III.18
Gamabr III.19
Gambar III.20
PENUTUP
4.1. Kesimpulan
web yang telah dibahas pada bab sebelumnya, penulis dapat memberikan
2. Sistem ujian berbasis web memberikan manfaat yaitu tidak perlu melakukan
pengadaan kertas ujian dan menghemat waktu untuk koreksi ujian sehingga
efisiensi dan efektitas yang menjadi tujuan pembuatan sistem ujian berbasis web
dapat tercapai.
4.2. Saran
berikut :
3. Perlu adanya maintenans web secara berkala agar sistem bisa berjalan
dengan baik.
37
DAFTAR PUSTAKA
Sugiri, dan Haris Saputro. 2008. Pengelolaan Database MySQL dengan PHP
Maxikom.
Rosa, A.S. dan M. Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur dan
Andi.
Riyanto. 2005. Migrasi Micosoft SQL server dengan Postgre SQL. Jakarta: Elex
Media Komputindo.
Sutopo, Aries Hadi. 2007. Pemrograman Flash dengan PHP dan MySQL.
Nugroho, Adi. 2010. Rekayasa Perangkat Lunak Berbasis Objek dengan Metode
38