TUGAS AKHIR
Disusun oleh :
LANANG PRIAMBODO
NPM. 0434010197
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR
SURABAYA
TUGAS AKHIR
Diajukan Untuk Memenuhi Sebagai Persyaratan
Dalam Memperoleh Gelar Sarjana Komputer
Jurusan Teknik Informatika
Disusun oleh :
LANANG PRIAMBODO
NPM. 0434010197
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR
SURABAYA
WEB INFO SEKOLAH SURABAYA
Disusun Oleh :
LANANG PRIAMBODO
NPM. 0434010197
Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang V Tahun Akademik 2010/2011
Pembimbing Utama Pembimbing Pendamping
Nur Cahyo Wibowo, S.Kom, M.Kom Mohammad Irwan Afandi, ST, MSc NPT. 379 030 401 971 NPT. 376 070 702 201
Mengetahui,
Ketua Jurusan Teknik Informatika Fakultas Teknologi Industri UPN ”Veteran” Jawa Timur
WEB INFO SEKOLAH SURABAYA
Disusun Oleh :
LANANG PRIAMBODO
NPM. 0434010197
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skripsi Jurusan Teknik Informatika Fakultas Teknologi Industri
Universitas Pembangunan Nasional ”Veteran” Jawa Timur Pada Tanggal 10 Juni 2011
Pembimbing : Tim Penguji :
1. 1.
Nur Cahyo Wibowo, S.Kom, M.Kom Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 971 NPT. 379 030 401 971
2. 2.
Mohammad Irwan Afandi, ST, MSc Mohammad Irwan Afandi, ST, MSc NPT. 376 070 702 201 NPT. 376 070 702 201
3.
Hj. Asti Dwi Irfianti, S.Kom, M.Kom NPT. 373 020 602 131
Mengetahui,
Dekan Fakultas Teknologi Industri
Universitas Pembangunan Nasional ”Veteran” Jawa Timur
FAKULTAS TEKNOLOGI INDUSTRI
KETERANGAN REVISI
Kami yang bertanda tangan di bawah ini menyatakan bahwa mahasiswa berikut: Nama : Lanang Priambodo
NPM : 0434010197 Jurusan : Teknik Informatika
Telah mengerjakan revisi/ tidak ada revisi*) pra rencana (design)/ skripsi ujian lisan gelombang V, TA 2010/2011 dengan judul:
“WEB INFO SEKOLAH SURABAYA”
Surabaya, 16 Juni 2011 Dosen Penguji yang memerintahkan revisi:
1) Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 971
2) Mohammad Irwan Afandi, ST, MSc NPT. 376 070 702 201
3) Hj. Asti Dwi Irfianti, S.Kom, M.Kom NPT. 373 020 602 131
Mengetahui,
Pembimbing Utama Pembimbing Pendamping
Nur Cahyo Wibowo, S.Kom, M.Kom Mohammad Irwan Afandi, ST, MSc NPT. 379 030 401 971 NPT. 376 070 702 201
{
}
{
}
Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun dapat menyelesaikan Tugas Akhir dengan judul “Web Info Sekolah Surabaya”.
Tugas Akhir dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik Informatika, Fakultas Teknologi Industri, UPN ”VETERAN” Jawa Timur.
Melalui Tugas Akhir ini penyusun merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat bergerak. Namun, penyusun menyadari bahwa Tugas Akhir ini masih jauh dari sempurna. Oleh karena itu penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.
Penyusun menyadari bahwasanya dalam menyelesaikan Tugas Akhir ini telah mendapat banyak bantuan dan dukungan dari berbagai pihak, untuk itu pada kesempatan yang berharga ini, penyusun menyampaikan terima kasih kepada: 1. Ayahanda, Ibu dan Nenek tersayang di rumah yang senantiasa memberikan
dukungan dan mendoakan penyusun supaya Tugas Akhir ini segera terselesaikan.
dorongan serta motivasi kepada penyusun untuk menyelesaikan Tugas Akhir. 4. Bapak Mohammad Irwan Afandi, ST, MSc selaku Dosen Pembimbing II yang
dengan sabar telah meluangkan banyak waktu, pikiran dan tenaga di antara kesibukan beban-beban kegiatan akademik untuk memberikan bimbingan dan kesempatan penyusun untuk berkreasi dalam proses pembuatan Tugas Akhir. 5. Bapak Nur Cahyo Wibowo, S.Kom, M.Kom, Bapak Mohammad Irwan
Afandi, ST, MSc dan Ibu Hj. Asti Dwi Irfianti, S.Kom, M.Kom selaku Penguji Ujian Lisan yang telah banyak memberi masukan serta membuka wawasan baru.
6. Saudara penyusun tercinta, Dek Kahpi, Dek Aka, Si Coy dan Totos yang telah memberikan hiburan ringan ketika penyusun berada pada titik jenuh.
7. ”Dulur-dulur” satu angkatan yang telah lulus dulu : Dana, Fahmy, Habibi, Arief ”Sudrun” Ardiyanto, Reza, dan Jufri yang ”gak bosen2” menanyakan kelulusanku dan selalu menyemangati agar segera menyelesaikan kuliah ini.
Surabaya, 16 Juni 2011
ABSTRAK... i
KATA PENGANTAR... ii
DAFTAR ISI... iv
DAFTAR GAMBAR... vii
BAB I PENDAHULUAN... 1
1.1. Latar Belakang... 1
1.2. Perumusan Masalah... 2
1.3. Batasan Masalah... 3
1.4. Tujuan dan Manfaat Penelitian... 4
1.5. Metodologi Penelitian... 4
1.6. Sistematika Penulisan... 5
BAB II TINJAUAN PUSTAKA ... 7
2.1. Konsep Dasar Website... 7
2.1.1. Komponen Penyusun Web... 8
2.2. Portal... 9
2.3. HTML………..…... 17
2.3.1. Browser………..……….. 19
2.3.2. HTML Editor………... 19
2.3.3. URL………. 20
2.4. XAMPP…... 20
2.4.1. Apache………... 21
2.4.2. PHP………... 22
2.4.3. PHPlot………….……… 24
2.4.4. MySQL……….……….……….. 27
3.2. Perancangan Sistem... 33
3.2.1. UML... 34
3.2.2. Use Case Diagram... 36
3.2.3. Activity Diagram... 38
3.2.4. Sequence Diagram... 41
3.2.5. Class Diagram... 44
3.3. Perancangan Antar Muka... 47
3.3.1. Tampilan Halaman Utama Web... 47
3.3.2. Tampilan Halaman Info Sekolah... 48
3.3.3. Tampilan Halaman Halaman Berita... 49
3.3.4. Tampilan Halaman Bukutamu... 49
3.3.5. Tampilan Halaman About Us... 50
BAB IV IMPLEMENTASI SISTEM... 51
4.1. Lingkungan Implementasi... 51
4.2. Implementasi Basis Data... 51
4.3. Implementasi Antar Muka... 53
4.3.1. Halaman Utama... 53
4.3.2. Halaman Info Sekolah... 54
4.3.3. Halaman Berita... 57
4.3.4. Halaman Buku Tamu... 57
4.3.5. Halaman About Us... 58
BAB V UJI COBA DAN EVALUASI... 59
5.1. Lingkungan Uji Coba…... 59
5.2. Skenario Uji Coba…... 59
5.3. Pelaksanaan Uji Coba…... 60
5.3.1. Uji Coba Proses Membuka Halaman Web pada setiap Halaman... 60
BAB VI PENUTUP... 71
6.1. Kesimpulan... 71
6.2. Saran... 71
Gambar 2.1. Tampilan Go.com…...……… 10
Gambar 2.2. Tampilan Lycos.com……….………. 11
Gambar 2.3. Tampilan Altavista.com..………... 12
Gambar 2.4. Tampilan Rediff.com……….……… 13
Gambar 2.5. Tampilan Sina.com……….……… 13
Gambar 2.6. Tampilan usa.gov………..………. 14
Gambar 2.7. Tampilan mylicense.in.gov/eGov ……..……… 15
Gambar 2.8. Contoh portal perusahaan, tampilan tiki-online.com.……….16
Gambar 2.9. Contoh portal komunitas, tampilan honda-tiger.or.id/forum.………17
Gambar 2.10. Bagian-bagian dari URL ………20
Gambar 2.11. Tampilan Awal XAMPP ………21
Gambar 2.12. Tampilan Info PHP Versi 5.3.5……… 23
Gambar 2.13. Tampilan GD Extension………... 24
Gambar 2.14. Contoh Grafik Menggunakan PHPlot………... 27
Gambar 2.15. Menjalankan MySQL Melalui Command Promt ……….30
Gambar 2.16. Mengaktifkan Apache dan MySQL ………. 31
Gambar 2.17. TampilanHalaman Utama phpMyAdmin ..……….31
Gambar 2.18. Membuat Database Dengan Nama Infosekolah………. 32
Gambar 2.19. Notifikasi Setelah Berhasil Membuat Database ……… 32
Gambar 2.20. Memasukkan Data Pada Tabel Sekolah ………. 32
Gambar 3.1. Metodologi UML………. 35
Gambar 3.2. Konsepsi Dasar UML………... 36
Gambar 3.3. Use Case Diagram Aplikasi………. 37
Gambar 3.4. Contoh Activity Diagram Dari Proses Login………. 39
Gambar 3.5. Activity Diagram Cari Info Sekolah..………. 39
Gambar 3.6. Activity Diagram Dari ProsesLihat Berita……… 40
Gambar 3.7. Activity Diagram Dari Proses Isi Buku Tamu……….... 41
Gambar 3.8. Sequence Diagram Proses Cari Info Sekolah………. 42
Gambar 3.12. Rancangan Awal Halaman Utama Web………. 47
Gambar 3.13. Rancangan Awal Halaman Info Sekolah……… 48
Gambar 3.14. Rancangan Awal Halaman Berita……… 49
Gambar 3.15. Rancangan Awal Halaman Buku Tamu……….. 49
Gambar 3.16. Rancangan Awal Halaman About Us………. 50
Gambar 4.1. Tampilan Halaman Utama Web………. 54
Gambar 4.2. Tampilan Halaman Info Sekolah……… 56
Gambar 4.3. Tampilan Halaman Berita……….57
Gambar 4.4. Tampilan Halaman Buku Tamu……….. 58
Gambar 4.5. Tampilan Halaman About Us………. 58
Gambar 5.1. Spesifikasi Perangkat Uji Coba ………. 59
Gambar 5.2. Tampilan Halaman Utama……….. 61
Gambar 5.3. Tampilan Halaman Info Sekolah……… 61
Gambar 5.4. Tampilan Halaman Berita……….. 62
Gambar 5.5. Tampilan Halaman Buku Tamu... 63
Gambar 5.6. Tampilan Halaman About Us... 63
Gambar 5.7. Tampilan Halaman Info Sekolah Data Pencarian Tidak Ada…… 64
Gambar 5.8. Pencarian Info Berdasarkan Nama Sekolah... 65
Gambar 5.9. Hasil Pencarian Info Umum Sekolah... 65
Gambar 5.10. Pencarian History Berdasarkan Nama Sekolah………66
Gambar 5.11. Hasil Pencarian History Sekolah SMAN 02... 67
Gambar 5.12. Pencarian Berdasarkan Membandingkan Sekolah... 68
Gambar 5.13. Hasil Pencarian Dengan Membandingkan Sekolah………. 68
Gambar 5.14. Uji Coba Mengisi Buku Tamu…………... 69
ABSTRAK
Kemampuan teknologi informasi yang semakin berkembang membuat
komputer dan internet saat ini dapat dimanfaatkan dalam berbagai bidang, salah
satunya adalah bidang pendidikan.
Sejalan dengan banyaknya fasilitas pendidikan
yang ada di kota Surabaya, kebutuhan informasi akan fasilitas pendidikan itu sendiri
juga perlu diperhatikan. Mulai dari penyebaran informasi dan cepat tidaknya
informasi tersampaikan kepada masyarakat. Oleh karena itu dengan dibangun dan
dirancangnya
Web Info Sekolah Surabaya
ini yang bertujuan agar dapat memberi
kemudahan masyarakat dalam memperoleh informasi tentang sekolah khususnya
yang ada di kota Surabaya
.
Saat ini perkembangan perangkat lunak open source
(OS) berlangsung pesat
dengan berbagai variasi yang bermacam-macam. Dukungan banyak kalangan
terhadap perangkat lunak open source yang mudah didapat, menjadi daya tarik lain
yang menunjang popularitas perangkat lunak ini. Salah satu OS yang populer di
kalangan programmer dalam perancangan web adalah PHP. Dalam pembuatan
Web
Info Sekolah Surabaya
ini menggunakan bahasa pemrograman PHP dan
menggunakan database MySQL.
Hasil uji coba membuktikan bahwa
Web Info Sekolah Surabaya
telah sesuai
dengan apa yang direncanakan oleh penyusun. Dan mampu menampilkan data-data
info sekolah disertai dengan grafik history siswa dan nilai. Web ini berjalan dengan
lancar pada web browser Mozilla Firefox versi 4.0.1.
PENDAHULUAN
1.1 Latar Belakang
Pendidikan adalah salah satu indikator yang dapat digunakan untuk melihat perkembangan kota, termasuk tingkat kecerdasan masyarakat. Di Surabaya, pengembangan kegiatan pendidikan beserta penyediaan fasilitasnya, tidak hanya dilakukan oleh pemerintah, namun juga oleh pihak swasta dan organisasi sosial kemasyarakatan. Catatan sejarah menunjukkan, pendirian sekolah dan penyelenggaraan pendidikan di Surabaya pertama kali dilakukan pada tahun 1818.
Sebagai kota pendidikan, Surabaya telah menyediakan sarana dan
prasarana pendidikan yang memadai, meliputi tingkat pendidikan dasar,
menengah dan pendidikan tinggi. Hampir di semua bidang ilmu pengetahuan
dengan tingkat akademi dan politeknik, dari S1 hingga S3, dapat ditemukan di
lembaga pendidikan di Surabaya. Pengembangan sebagai kota pendidikan
bertujuan untuk pengembangan kualitas SDM yang ada. Hingga saat ini, jumlah
sekolah yang ada di Surabaya, adalah :
• Kelompok bermain/pra sekolah : 1070 buah
• SD negeri dan swasta : 969 buah
• SLTP negeri dan swasta : 342 buah
• SMU dan SMK negeri dan swasta : 266 buah
Di Surabaya juga telah dibangun sekolah-sekolah unggulan dengan
fasilitas yang lengkap serta kurikulum dan metode pengajaran yang membuat para
siswa lebih berkembang dengan maksimal dalam menyerap pelajaran yang
disampaikan. Salah satu sistem pendidikan yang diterapkan di sekolah-sekolah
tersebut adalah full day school, seperti yang diterapkan pada sekolah Ciputra dan
sekolah Al Hikmah. Namun kemajuan dan modernisasi yang terjadi di Surabaya
tidak membuat hal ini menghapus atau meniadakan lembaga pendidikan informal,
seperti pondok pesantren dan madrasah.
Sejalan dengan banyaknya fasilitas pendidikan yang ada, kebutuhan
informasi akan fasilitas pendidikan itu sendiri juga perlu diperhatikan. Mulai dari
penyebaran informasi dan cepat tidaknya informasi tersampaikan kepada
masyarakat. Oleh karena itu dengan dibangun dan dirancangnya Web Info Sekolah Surabaya ini yang bertujuan agar dapat memberi kemudahan masyarakat dalam memperoleh informasi tentang sekolah yang ada di Surabaya,
khususnya sekolah-sekolah negeri.
1.2 Perumusan Masalah
Berdasarkan latar belakang yang telah dijelaskan diatas, maka dapat dirumuskan masalah dalam tugas akhir ini, yaitu :
a. Bagaimana mendesain dan mengimplementasikan Web Info Sekolah Surabaya.
1.3 Batasan Masalah
Pada pembuatan Web Info Sekolah Surabaya ini perlu didefinisikan batasan masalah mengenai sejauh mana pembuatan aplikasi ini akan dikerjakan. Beberapa batasan masalah tersebut antara lain :
a. Web ini dibuat dan dikelola oleh personal, bukan organisasi resmi seperti Diknas kota Surabaya. Dan dibuat untuk keperluan menyelesaikan Tugas Akhir.
b. Untuk memperoleh data sekolah diambil dari website Diknas kota Surabaya dan website/blog sekolah. Dan jika ada data sekolah yang tidak ada, untuk sementara digunakan data fiktif. Jika kedepannya Web Info Sekolah Surabaya ini direalisasikan maka harus menggunakan data riil dan disesuaikan dengan data yang ada pada Dinas Pendidikan Kota Surabaya dan Sekolah.
c. Informasi sekolah yang ditampilkan merupakan informasi umum tentang sekolah seperti : nama sekolah, alamat sekolah, visi dan misi sekolah, sejarah sekolah, fasilitas, prestasi, history (meliputi prosentase kelulusan siswa; perbandingan jumlah siswa mendaftar, diterima dan lulus), nomor telepon dan email/website sekolah.
d. Yang menjadi fokus dalam web ini adalah Sekolah Dasar (SD), Sekolah Menengah Pertama (SMP) dan Sekolah Menengah Atas (SMA) negeri. e. Untuk update data sekolah dilakukan admin melalui database. Sehingga
untuk halaman admin ditiadakan.
f. Aplikasi ini menggunakan bahasa pemrograman HTML, PHP dan
1.4 Tujuan dan Manfaat
Tujuan dari pembuatan aplikasi ini antara lain membuat web yang menarik dan interaktif, memudahkan penyampaian informasi tentang sekolah yang ada di kota Surabaya kepada masyarakat baik yang berdomisili di dalam maupun luar kota Surabaya. Diharapkan proyek tugas akhir ini dapat memberikan kontribusi pada dunia pendidikan. Dan untuk selanjutnya memungkinkan direalisasikan dimasa yang akan datang.
1.5 Metodologi Penelitian
Langkah-langkah yang ditempuh untuk keperluan pembuatan tugas akhir ini antara lain:
a. Studi Literatur
Mengumpulkan referensi baik dari buku maupun internet. Sebagai acuan untuk referensi tentang perancangan dan pembuatan Web Info Sekolah Surabaya.
b. Perancangan Sistem
Melakukan analisa awal tentang sistem yang akan dibuat yaitu suatu pemecahan masalah yang dilakukan untuk perancangan dan pembuatan
Web Info SekolahSurabaya. Perancangan sistem meliputi:
1) Pembuatan Use Case Diagram, Activity Diagram, Sequence Diagram
2) Pembuatan dan perancangan sistem menggunakan XAMPP yang berisikan ApacheWeb Server, PHP , MySQL dan PHPMyAdmin. c. Pembuatan Kesimpulan
Dalam bagian akhir skripsi dibuat kesimpulan dan saran sesuai dengan dasar teori yang mendukung dalam pembuatan skripsi ini.
1.6 Sistematika Penulisan
Sistematika penulisan laporan/buku pada skripsi ini adalah sebagai berikut: BAB I : PENDAHULUAN
Bab ini berisi tentang deskripsi umum skripsi yang meliputi latar belakang, perumusan masalah, batasan masalah, tujuan dan manfaat, serta metodologi dan sistematika pembahasan.
BAB II : TINJAUAN PUSTAKA
Bab ini berisi mengenai konsep dan teori pembelajaran yang menjadi landasan pembuatan skripsi antara lain: Web Portal, XAMPP,PHP, MySQL dan PHPMyAdmin.
BAB III : ANALISA DAN PERANCANGAN SISTEM
Pada tahap ini akan dibuat deskripsi umum sistem serta dilakukan analisa kebutuhan sistem, selain itu juga dilakukan perancangan aplikasi yang akan dibuat, sehingga dihasilkan disain antarmuka dan proses-prosesnya.
BAB IV : IMPLEMENTASI PROGRAM
BAB V : UJI COBA DAN EVALUASI SISTEM
Bab ini menjelaskan tentang ujicoba dan evaluasi pembuatan Web Info Sekolah Surabaya, sehingga dapat diketahui apakah aplikasi tersebut telah memenuhi tujuan yang diharapkan. Dari proses ini akan didapatkan evaluasi program sehingga dapat dilakukan suatu perbaikan.
BAB VI : PENUTUP
BAB II
TINJAUAN PUSTAKA
2.1 Konsep Dasar Website
Menurut Abdul Kadir (2003) mengemukakan bahwa Web merupakan
salah satu layanan yang tersedia dan sekarang digunakan secara meluas di seluruh
dunia adalah layanan world wide web atau sering hanya disebut dengan web saja.
Web bisa dikatakan sebagai koleksi dokumen atau arsip yang terdapat pada
internet yang saling terhubung dan memungkinkan pengguna untuk melihat, mencari atau mengambil informasi yang tersedia.
Website atau situs merupakan kumpulan halaman yang menampilkan
informasi data, teks, gambar, data animasi, suara, dan gabungan dari semuanya,
baik yang bersifat statis maupun yang bersifat dinamis yang membentuk suatu
rangkaian bangunan yang saling terkait dengan jaringan-jaringan halaman.
Secara terminologi, pengertian website adalah kumpulan dari halaman-halaman
situs/link, yang biasanya terangkum dalam sebuah domain atau subdomain, yang
tempatnya berada di dalam World Wide Web (WWW) di internet.
Website pertama kali ditemukan oleh Sir Timothy John, Tim Berners-Lee.
Pada 1991 website terhubung dengan jaringan. Tujuan dari dibuatnya website
pada saat itu yakni untuk mempermudah tukar menukar dan memperbaharui
informasi kepada sesama peneliti di tempat mereka bekerja. Website
dipubliksikan ke publik setelah adanya pengumuman dari CERN pada tanggal 30 April 1993. CERN menyatakan bahwa website dapat digunakan secara gratis oleh
Ada 2 macam jenis website, yakni yang website statis dan website dinamis.
Website statis, yakni website yang informasinya merupakan informasi satu arah,
yakni hanya berasal dari pemilik software-nya saja. Umumnya website ini bersifat
tetap, jarang berubah, dan hanya bisa di-update oleh pemiliknya saja. Contoh dari
website statis ini, yaitu web profil perusahaan.
Sedangkan website dinamis merupakan website yang mempunyai arus
informasi dua arah, yakni yang berasal dari pengguna dan pemillik, sehingga
pengupdate-an dapat dilakukan oleh pengguna dan juga pemilik website. Contoh
dari website dinamis ini, yaitu Friendster, Multiply, Facebook, dll.
2.1.1. Komponen Penyusun Web
a. Nama Domain (Domain name / URL –Uniform Resource Locator)
Alamat unik di dalam dunia maya (internet) yang berguna untuk
menemukan sebuah website. Umumnya URL ini di perjual-belikan dengan
sistem sewa tahunan. Dan biasanya di belakang URL ini mepunyai akhiran
sesuai dengan lokasi dan kepentingan atas di buatnya website tersebut,
contohnya .co.id
b. Rumah Tempat Website (Web Hosting)
Web Hosting merupakan ruangan yang terdapat dalam harddisk sebagai
tempat penyimpanan data, file, video, email, database,dll. Yang nantinya
akan ditampilkan di dalam website tersebut. c. Bahasa Program (Scripts Program)
Bahasa Program merupakan bahasa yang digunakan untuk
Contoh dari bahasa program, yakni HTML, PHP, Java Script, XML, JSP,
ASP. dll
d. Desain Website
Pendesainan website merupakan hal yang penting. Faktor userfriendly
harus diterapkan dalam pembuatan desain sebuah website. Membuat pemakai
website merasa nyaman dan mudah dalam penggunaannya membuat pemakai
website akan terus mengunjunginya.
e. Program Transfer Data ke Pusat Data
FTP (File Transfer Protocol) merupakan akses yang diberikan pada saat
mengakses web hosting, FTP berguna untuk memindahkan file-file website
yang ada pada komputer ke pusat web hosting agar dapat terakses ke seluruh dunia. Untuk mengembangkan sebuah halaman web baik sebagai website
atau web application perlu diperhatikan komponen penyusun sebuah halaman
web. Komponen penyusun ini akan bekerja sama untuk memberikan layanan
web dengan teknologi internet.
2.2 Portal
Menurut Onno W. Purbo portal (istilah : pintu gerbang) adalah tempat
utama penyedia informasi. Sedangkan web atau website adalah wadah/tempat
meletakan naskah yang di tulis dalam format HTML yang bisa di download
menggunakan web browser seperti internet explorer. Portal adalah salah satu
aplikasi yang dijalankan di atas website. Masih banyak lagi jenis aplikasi yang
bisa dijalankan di atas website, seperti e-commerce, media online, teleeducation,
Kemampuan portal yang lebih spesifik adalah penyediaan kandungan
informasi yang dapat diakses menggunakan beragam perangkat, misalnya
komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant),
atau bahkan telepon genggam (hand phone).
Portal web mulai populer di akhir tahun 1990. Setelah perkembangan
perambah web (web browser) pada pertengahan tahun 1990, banyak perusahaan mencoba membangun portal untuk mendapatkan perolehan pasar mereka melalui
Internet. Portal web mendapat perhatian khusus karena bagi banyak pengguna,
portal web merupakan halaman awal yang dibuka oleh perambah web mereka.
Netscape Netcenter telah menjadi bagian dari America Online, Walt Disney
meluncurkan Go.com, dan Excite telah menjadi bagian dari AT&T di akhir
1990-an.
Banyak portal yang mengawali keberadaan mereka baik sebagai penyedia
direktori Internet maupun fasilitas mesin pencari (Excite, Lycos, AltaVista,
infoseek, dan Hotbot adalah beberapa layanan yang tertua dari yang ada).
Ekspansi cakupan layanan dilakukan sebagai strategi untuk mengamankan basis
pengguna dan memperpanjang masa kunjungan pengguna pada suatu portal.
Layanan yang membutuhkan pendaftaran seperti email gratis, fitur tertentu, dan
chatroom dianggap mampu mendorong kunjungan yang berulang pada suatu
portal. Game, chat, email, berita, dan layanan lain juga bertujuan agar pengunjung
tinggal lebih lama, di mana hal tersebut akan menambah penghasilan iklan.
Gambar 2.3 Tampilan Altavista.com
Jenis Portal
• Portal web daerah
Sejalan dengan perkembangan dan kesuksesan portal web internasional
seperti Yahoo!, portal daerah juga bermunculan. Beberapa portal daerah memiliki kandungan lokal seperti ramalan cuaca, peta jalan dan informasi
bisnis lokal. Ekspansi menyolok lainnya pada beberapa tahun terakhir adalah
perpindahan ke pasar yang tadinya tak terpikirkan seperti RRC. Portal web
dengan "kandungan lokal - jangkauan global" bermunculan di negara-negara
seperti India (Rediff) dan RRC (Sina). Portal-portal semacam ini mampu
Gambar 2.4 Tampilan Rediff.com
• Portal web pemerintah
Pada akhir meledaknya bisnis dot-com di tahun 1990-an, banyak
pemerintah yang berkomitmen membuat situs portal sebagai layanan
informasi bagi warga negara mereka. Di Amerika Serikat, portal utamanya
adalah usa.gov, di Inggris portal utama layanan informasi bagi warganegara
adalah directgov dan busineslink.gov.uk untuk layanan informasi bisnis.
Beberapa penelitian yang bersifat internasional dilakukan untuk mengukur
kemampuan transaksional portal-portal ini, yang paling menyolok adalah
penelitian yang diselenggarakan oleh Accenture.
Gambar 2.7 Tampilan mylicense.in.gov/eGov
Banyak negara bagian di Amerika memiliki portal mereka
masing-masing yang menyediakan akses langsung ke aplikasi eCommerce (contohnya
Hawaii Business Express dan myIndianaLicense), situs-web kantor
perwakilan dan departemen, dan informasi lebih spesifik tentang tempat
tinggal, kegiatan bisnis, serta tempat-tempat kunjungan yang menarik.
Kebanyakan negara bagian tersebut di atas menugaskan suatu
perusahaan untuk mengelola portal mereka. Salah satu perusahaan yang
paling sukses saat ini adalah NICUSA yang mengelola 18 portal negara
bagian. NICUSA memfokuskan pada model pendanaan mandiri dan tidak
memungut biaya kepada negara atas pengelolaan, melainkan lebih ditopang
• Portal web perusahaan
Pada awal tahun 2000-an, terjadi pergeseran fokus yang sebelumnya
mengarah pada industri portal web menjadi mengarah pada portal intranet
korporasi atau "web perusahaan". Ketika mengharapkan jutaan pengguna
yang tidak berafiliasi untuk kembali pada suatu portal web publik telah
memberikan kesuksesan finansial yang bernilai, sehingga penggunaan portal
web pribadi untuk menyatukan komunikasi web dan pemikiran dalam suatu
perusahaan besar mulai dilihat oleh kebanyakan orang sebagai teknologi yang
mampu menghemat biaya dan tenaga kerja. Banyak badan analisis telah
memprediksi bahwa pembelanjaan perusahaan untuk portal web intranet akan
menjadi salah satu dari 5 bidang yang memiliki prospek pertumbuhan paling
pesat pada sektor teknologi internet dalam dekade pertama abad ke-21.
• Portal web komunitas
Ketika disebut sebagai Portal Komunitas, sebuah situs-web biasanya
sengaja didesain dan dibangun berdasarkan pertimbangan pada selera
(kolektif) suatu komunitas. Oleh sebab itu fasilitas-fasilitas yang disediakan
pada Portal Komunitas cenderung berupaya memenuhi kebutuhan komunitas
[image:30.612.131.505.233.541.2]tersebut.
Gambar 2.9 Contoh portal komunitas, tampilan honda-tiger.or.id/forum
2.3 HTML
Hypertext Markup Language (HTML) adalah bahasa mark-up yang umum
digunakan untuk membuat halaman web dan menampilkan berbagai informasi di
dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya
banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML
(Standard Generalized Markup Language), HTML adalah sebuah standar yang
merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya
oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan browser web seperti
Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh
aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser. Sebenarnya HTML bukanlah sebuah bahasa pemrograman.
Apabila di tinjau dari namanya, HTML merupakan bahasa mark-up atau
penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk
menentukan format atau style dari teks yang di tandai. Pada dasarnya elemen HTML ada 2 kategori:
1. Elemen <head> berfungsi untuk memberikan informasi atau
mendeklarasikan dokumen tersebut.
2. Elemen <body> berfungsi untuk menentukan bagaimana isi suatu
dokumen ditampilkan pada browser.
Sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu di
awali dengan <namatag> dan di akhiri dengan </namatag>.
Berikut adalah contoh HTML:
<html> <head>
<title>Contoh HTML</title> </head>
<body>inilah contoh kode HTML </body>
2.3.1 Browser
Browser atau web browser adalah program yang dipakai untuk membaca
dokumen HTML pada WWW. Atau bisa juga didefinisikan suatu software yang
digunakan untuk mencari alamat suatu website yang terdapat pada jaringan
internet. Contoh web browser antara lain: Netscape Navigator, Internet Explorer,
Opera, Mozilla, Conqueror, NCSA Mosaic, Cello, Lynx, SlipKnot, dan
sebagainya.
2.3.2 HTML Editor
HTML editor adalah aplikasi yang digunakan untuk membuat halaman
web. Meskipun tag html sebuah web dapat ditulis menggunakan editor apapun, html editor khusus menyediakan kenyamanan dan fungsionalitas yang baik.
Sebagai contoh, beberapa HTML editor bekerja tidak hanya dengan HTML, tapi
juga dengan teknologi yang berhubungan seperti CSS, XML dan Javascript. Pada
beberapa kasus mereka juga mengatur komunikasi dengan web server melalui
FTP dan Webdav, serta manajemen versi seperti CVS atau Subversion.
Contoh-contoh HTML Editor :
• Microsoft Frontpage
• Macromedia Dreamweaver
• Netscape Navigator Gold
• Netscape Composer
• CoffeeCup
• CU-HTML
• Notepad/Notepad++
2.3.3 URLs
URL merupakan singkatan dari Uniform Resource Locator.
Menginformasikan lokasi sebuah file pada WWW dan juga mengidentifikasi
layanan internet, seperti FTP, WWW, yang menghandle file tsb. Istilah ini juga
dipakai untuk menunjukkan suatu tempat yang berisikan informasi di Internet spt
[image:33.612.135.508.229.524.2]di bawah :
Gambar 2.10 Bagian-bagian dari URL
Keterangan :
• Protocol adalah metode transfer data dari satu komputer ke komputer lain.
Antara komputer client dan komputer server.
a. HTTP; HyperText Transfer Protocol
b. Gopher
c. FTP
d. news
• Network location adalah mesin tempat data tersebut berada.
• path - dokumen - menunjukkan di direktori mana dokumen tersebut
berada.
• File name adalah nama file html yang berada dalam direktori web server.
2.4 XAMPP
XAMPP jika dibahas huruf per huruf adalah X (yang berarti cross, cross
XAMPP adalah suatu installer web server yang berisi Apache HTTP dan MySQL
dan mendukung program PHP dan Perl.
XAMPP merupakan tools yang menyediakan paket perangkat lunak ke
dalam satu buah paket. Dengan meng-install XAMPP maka tidak perlu lagi
melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara
[image:34.612.132.508.245.521.2]manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis.
Gambar 2.11 Tampilan Awal XAMPP
2.4.1 Apache
Apache sudah berkembang sejak versi pertamanya. Sampai saat ditulisnya
artikel ini versi terakhirnya yang ada yaitu Apache ver 2.2.17. Apache bersifat
open source, artinya setiap orang boleh menggunakannya, mengambil dan bahkan
Tugas utama apache adalah menghasilkan halaman web yang benar
kepada peminta, berdasarkan kode PHP yang dituliskan oleh pembuat halaman
web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja
suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk
mendukung halaman web yang dihasilkan.
2.4.2 PHP (Hypertext Preprocessor)
Menurut Abdul Kadir (2002, 2003) mengemukakan PHP (Hypertext
Preprocessor) merupakan bahasa pemrograman yang file-nya diletakkan dibagian
server dan seluruh prosesnya dikerjakan di server, kemudian hasilnya dikirimkan
ke client, tempat pemakai menggunakan browser (lebih dikenal dengan istilah
server-side scripting). PHP bekerja didalam sebuah dokumen HTML (Hypertext
Markup Language) untuk menghasilkan isi dari sebuah halaman web sesuai
permintaan.
Kelebihan PHP adalah bersifat tidak memiliki ketergantungan terhadap
berbagai platform, jadi PHP dapat dijalankan dalam platform apapun, baik itu
Linux, Windows ataupun Macintosh. Kelebihan lain dari PHP adalah kemudahan
melakukan pengkodean, karena perintah PHP mirip dengan
perintah-perintah bahasa C. Yang membedakan PHP dengan bahasa pemrograman lain adalah adanya tag penentu, yaitu diawali dengan “<?” atau “<?php” dan diakhiri
dengan “?>”.
PHP memungkinkan untuk membuat halaman web yang bersifat dinamis.
Selain Apache, PHP juga mendukung beberapa web server lain, misalnya
sering digunakan bersama PHP adalah MySQL. Namun PHP juga mendukung
sistem manajemen database Oracle, Microsoft Acces, Interbase, d-Base,
PostgreSQL dan database lainnya.
Hingga kini PHP sudah berkembang hingga versi ke 5. PHP 5 mendukung
penuh Object Oriented Programing (OOP), integrasi XML, mendukung semua
ekstensi terbaru MySQL, pengembangan web services dengan SOAP dan REST,
serta ratusan peningkatan kemampuan lainnya dibandingkan versi sebelumnya.
Sama dengan web server lainnya PHP juga bersifat open source sehingga setiap
orang dapat menggunakannya dengan gratis.
[image:36.612.137.504.253.660.2]2.4.3 PHPlot
PHPlot adalah suatu kelas PHP untuk membuat chart untuk keperluan
ilmiah maupun bisnis. Syarat-syarat yang dibutuhkan dalam pembuatan chart
menggunakan PHPlot antara lain, butuh minimal PHP versi 4.3.0. Kemudian perlu
juga mengaktifkan GD extension. Untuk mengetahui apakah PHP yang digunakan
sudah mengaktifkan GD extension atau belum, silahkan buat file PHP yang diberi nama phpinfo.php misalnya, kemudian simpan disembarang tempat yang bisa
diakses di web server. Isi phpinfo.php dengan sintak php seperti dibawah ini :
<?php phpinfo(); ?>
Buka file tersebut melalui browser, kemudian akan tampil konfigurasi PHP.
Carilah tabel yang judulnya ‘gd’ seperti gambar di bawah ini:
Gambar 2.13 Tabel GDExtension
Jika tidak ditemukan, berarti PHP belum memiliki GD extension. Untuk
[image:37.612.134.508.250.596.2]• Periksa phpinfo() dan pastikan GD support enabled. Jika masih disabled
berarti GD Library belum aktif. Untuk mengaktifkannya bukalah file
php.ini dan pada bagian dynamic extension carilah:
;extension=php_gd.dll
• Aktifkan dengan cara menghapus tanda titik koma didepannya sehingga
menjadi seperti ini:
extension=php_gd.dll
• Restart web server anda. Jika GD Library masih belum bekerja, pastikan
anda memiliki file php_gd.dll atau php_gd2.dll didalam folder lib pada
PHP anda. Jika anda tidak memiliki filenya, downloadlah di
http://www.php.net atau http://www.boutell.com/gd/.
Penggunaan PHPlot juga sangat mudah, apalagi didukung dengan dokumentasi
yang lengkap. Contoh script PHP untuk menampilkan chart pie sebagai berikut:
<?php
# PHPlot Example: Pie/text-data-single
require_once ‘phplot.php’;
# The data labels aren’t used directly by PHPlot.
# They are here for our
# reference, and we copy them to the legend below.
$data = array(
array(‘Australia’, 7849),
array(‘Dem Rep Congo’, 299),
array(‘Columbia’, 944),
array(‘Ghana’, 541),
array(‘China’, 3215),
array(‘Philippines’, 791),
array(‘South Africa’, 19454),
array(‘Mexico’, 311),
array(‘United States’, 9458),
array(‘USSR’, 9710),
);
$plot =& new PHPlot(800,600);
$plot->SetImageBorderType(‘plain’);
$plot->SetPlotType(‘pie’);
$plot->SetDataType(‘text-data-single’);
$plot->SetDataValues($data);
# Set enough different colors;
$plot->SetDataColors(array(‘red’, ‘green’, ‘blue’,
‘yellow’, ‘cyan’, ‘magenta’, ‘brown’,
‘lavender’, ‘pink’, ‘gray’, ‘orange’));
# Main plot title:
$plot->SetTitle("World Gold Production, 1990\n".
"(1000s of Troy Ounces)");
# Build a legend from our data array.
# Each call to SetLegend makes one line as:
# "label: value".
foreach ($data as $row)
$plot->SetLegend(implode(‘: ‘, $row));
$plot->DrawGraph();
Dari script PHP diatas akan menghasilkan gambar seperti ini :
Gambar 2.14 Contoh Grafik Menggunakan PHPlot
2.4.4 MySQL
Menurut Haris Saputro (2003) mengemukakan bahwa MySQL adalah
sebuah program pembuat database yang bersifat open source, artinya siapa saja
boleh menggunakannya dan tidak dicekal. MySQL sebenarnya produk yang
berjalan pada platform linux. Karena sifatnya yang open source, dia dapat
dijalankan pada semua platform baik windows maupun linux.
MySQL termasuk jenis RDBMS (Relational Database Management
System). Selain itu, MySQL juga merupakan program pengakses database yang bersifat jaringan sehingga dapat digunakan untuk aplikasi multi user (banyak
[image:40.612.134.505.103.522.2]programmer database, apalagi dalam pemrograman web. Kelebihan lain dari
MySQL adalah menggunakan bahasa Query standar yang dimiliki SQL.
SQL (Structured Query Language) adalah bahasa terstruktur yang khusus
digunakan untuk mengolah database, yang telah distandarkan untuk semua
program pengakses database seperti oracle, postgreSQL, SQLserver dan lainnya.
SQL pertama kali didefinisikan oleh American National Standards
Institute (ANSI) pada tahun 1986. MySQL adalah pasangan serasi dari PHP.
MySQL dibuat dan dikembangkan oleh MySQL AB yang berada di Swedia.
Ada beberapa fungsi yang digunakan dalam pembuatan aplikasi antara
PHP dan MySQL. Fungsi tersebut sangat erat kaitannya dengan query SQL. Akan
tetapi, tidak dapat langsung menggunakan perintah SQL pada scriptPHP. Disini fungsi MySQL inilah yang digunakan sebagai penghubung antar SQL sehingga
query tersebut dapat dijalankan pada admin dan dapat dilihat hasilnya oleh user. Di dalam MySQL tersedia query untuk membuat fungsi search, jumlah,
update, ataupun edit data dari database, namun pada script PHP dapat langsung
ditulis melalui script Mysql_query dengan code select, insert, delete, update, dan
syntax-syntax lainnya. Dengan kata lain MySQL adalah sebuah sistem manajemen
database.
Database adalah merupakan sekumpulan data yang terstruktur untuk
menambah, mengakses, dan memproses data yang tersimpan dalam database
komputer, dibutuhkan sebuah sistem database manajemen seperti MySQL. Sejak
komputer menjadi alat yang sangat bagus untuk menangani sejumlah besar data,
SQL (Structured Query Language) adalah sebuah bahasa yang
dipergunakan untuk mengakses data dalam basis data relasional. Bahasa ini secara
de facto merupakan bahasa standar yang digunakan dalam manajemen basis data
relasional. Secara umum, SQL terdiri dari dua bahasa, yaitu Data Definition
Language (DDL) dan Data Manipulation Language (DML).
DDL digunakan untuk mendefinisikan, mengubah, serta menghapus basis
data dan objek-objek yang diperlukan dalam basis data, misalnya tabel, view,
user, dan sebagainya. Secara umum, DDL yang digunakan adalah CREATE untuk
membuat objek baru, USE untuk menggunakan objek, ALTER untuk mengubah
objek yang sudah ada, dan DROP untuk menghapus objek. DDL biasanya
digunakan oleh administrator basis data dalam pembuatan sebuah aplikasi basis data.
DML digunakan untuk memanipulasi data yang ada dalam suatu tabel.
Perintah yang umum dilakukan adalah:
• SELECT untuk menampilkan data
• INSERT untuk menambahkan data baru
• UPDATE untuk mengubah data yang sudah ada
Gambar 2.15 Menjalankan MySQL Melalui Command Promt
2.4.5 PHPMyAdmin
Pengelolaan database dengan MYSQL harus dilakukan dengan
mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud
tertentu. Jika ingin membuat database, ketikkan baris perintah yang sesuai untuk
membuat database. Jika ingin menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu cukup menyulitkan karena harus
hafal dan mengetikkan perintahnya satu persatu.
Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola
data base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan adanya
phpMyAdmin pembuatan tabel, mengisi data dan lain-lain ada dengan mudah
dikerjakan tanpa harus hafal perintahnya. Untuk mengaktifkan phpMyAdmin
langkah-langkahnya adalah : yang pertama setelah XAMPP terinstall, harus
Gambar 2.16 Mengaktifkan Apache dan MySQL
Yang kedua, jalankan browser (IE, Mozilla Firefox atau Opera) lalu
ketikkan alamat web berikut : http://localhost/phpmyadmin/ pada address bar lalu
tekan Enter.
Gambar 2.17 TampilanHalaman Utama phpMyAdmin
Langkah ketiga apabila telah nampak interface (tampilan antar muka)
phpMyAdmin bisa dimulai dengan mengetikkan nama database kemudian tekan
[image:44.612.131.505.256.606.2]Gambar 2.18 Membuat Database Dengan Nama Infosekolah
Gambar 2.19 Notifikasi Setelah Berhasil Membuat Database
Untuk langkah selanjutnya membuat tabel beserta atribut-atributnya dan
mengisi data tabel.
ANALISA DAN PERANCANGAN SISTEM
3.1 Identifikasi Masalah
Perancangan Web Info Sekolah Surabaya pada penelitian ini dirancang
untuk menyediakan informasi tentang sekolah negeri yang ada di Surabaya (baik
SD, SMP maupun SMA). Info sekolah yang ditampilkan akan berupa tulisan dan
grafik. Untuk info yang akan ditampilkan dengan grafik adalah info tentang
history sekolah, yaitu perbandingan jumlah siswa mendaftar, jumlah siswa yang
diterima dan jumlah siswa yang lulus. Dan juga data tentang perbandingan nilai masuk dan nilai lulus. Selain ditampilkan dengan grafik, data history juga
ditampilkan dengan tulisan. Aplikasi web info sekolah ini diharapkan akan
memberi kemudahan kepada masyarakat untuk mendapatkan info sekolah yang
ada di kota Surabaya.
Pada perancangan web info sekolah ini digunakan beberapa tools
penunjang perangkat lunak, diantaranya : XAMPP yang berisikan MySQL, Apache
Web Server dan phpMyAdmin. Untuk mendesain dan merancang database,
menggunakan Power Designer 11. Dan Untuk mendesain secara visual dan
mengelola situs web maupun halaman web, dan editor html menggunakan
Macromedia Dreamweaver 8.
3.2 Perancangan Sistem
Setelah menganalisa permasalahan yang telah dijelaskan sebelumnya maka
Dimana pada tahap perancangan sistem ini, meliputi : Use Case Diagram, Activity
Diagram, Sequence Diagram dan Class Diagram.
3.2.1 UML
Unified Modelling Language (UML) adalah sebuah "bahasa" yg telah
menjadi standar dalam industri untuk visualisasi, merancang dan
mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar
untuk merancang model sebuah sistem.
Dengan menggunakan UML kita dapat membuat model untuk semua jenis
aplikasi piranti lunak, dimana aplikasi tersebut dapat berjalan pada piranti keras,
sistem operasi dan jaringan apapun, serta ditulis dalam bahasa pemrograman apapun. Tetapi karena UML juga menggunakan class dan operation dalam konsep
dasarnya, maka ia lebih cocok untuk penulisan piranti lunak dalam bahasa-bahasa
berorientasi objek seperti C++, Java, C# atau VB.NET. Walaupun demikian,
UML tetap dapat digunakan untuk modeling aplikasi prosedural dalam VB atau C.
Seperti bahasa-bahasa lainnya, UML mendefinisikan notasi dan
syntax/semantik. Notasi UML merupakan sekumpulan bentuk khusus untuk
menggambarkan berbagai diagram piranti lunak. Setiap bentuk memiliki makna
tertentu, dan UML syntax mendefinisikan bagaimana bentuk-bentuk tersebut
dapat dikombinasikan. Notasi UML terutama diturunkan dari 3 notasi yang telah
ada sebelumnya: Grady Booch OOD (Object-Oriented Design), Jim Rumbaugh OMT (Object Modeling Technique), dan Ivar Jacobson OOSE (Object-Oriented
Sejarah UML sendiri cukup panjang. Sampai era tahun 1990 seperti kita
ketahui puluhan metodologi pemodelan berorientasi objek telah bermunculan di
dunia. Diantaranya adalah: metodologi booch [1], metodologi coad [2],
metodologi OOSE [3], metodologi OMT [4], metodologi shlaer-mellor [5],
metodologi wirfs-brock [6], dsb. Masa itu terkenal dengan masa perang
metodologi (method war) dalam pendesainan berorientasi objek. Masing-masing
metodologi membawa notasi sendiri-sendiri, yang mengakibatkan timbul masalah
baru apabila kita bekerjasama dengan group/perusahaan lain yang menggunakan
metodologi yang berlainan.
Gambar 3.1 Metodologi UML
Dimulai pada bulan Oktober 1994 Booch, Rumbaugh dan Jacobson, yang
merupakan tiga tokoh yang boleh dikata metodologinya banyak digunakan
mempelopori usaha untuk penyatuan metodologi pendesainan berorientasi objek.
Pada tahun 1995 direlease draft pertama dari UML (versi 0.8). Sejak tahun 1996
pengembangan tersebut dikoordinasikan oleh Object Management Group
(OMG – http://www.omg.org). Tahun 1997 UML versi 1.1 muncul, dan saat ini
Rumbaugh
Booch Jacobson
Odell
Shlaer and Mellor
Gamma
Meyer
OMG
versi terbaru adalah versi 1.5 yang dirilis bulan Maret 2003. Booch, Rumbaugh
dan Jacobson menyusun tiga buku serial tentang UML pada tahun 1999 [7] [8]
[9]. Sejak saat itulah UML telah menjelma menjadi standar bahasa pemodelan
untuk aplikasi berorientasi objek.
Gambar 3.2 Konsepsi Dasar UML
Dari berbagai penjelasan rumit yang terdapat di dokumen dan buku-buku
UML. Sebenarnya konsepsi dasar UML bisa dirangkumkan seperti pada Gambar
3.2 diatas.
3.2.2 Use Case Diagram
Use Case Diagram digunakan untuk menggambarkan secara grafis perilaku software aplikasi. Merepresentasikan high-level view dari sistem yang
Use case diagram menggambarkan fungsionalitas yang diharapkan dari
sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan
“bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara aktor
dengan sistem. Use case merupakan sebuah pekerjaan tertentu, misalnya login ke
sistem, meng-create sebuah daftar belanja, dan sebagainya. Seorang/sebuah aktor
adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk
melakukan pekerjaan-pekerjaan tertentu.
Gambar 3.3 Use Case Diagram Aplikasi
Lihat info sekolah merupakan aktifitas user untuk melihat info sekolah
yang sebelumnya user harus memasukkan kata kunci dari info sekolah yang
diinginkan. Pada halaman info sekolah user bisa memilih data info sekolah
ditampilkan berdasarkan info umum, berdasarkan history, berdasarkan daerah atau per kecamatan dan user bisa membandingkan antara sekolah satu dengan sekolah
pada halaman web yang isinya berhubungan dengan pendidikan dan informasi
terbaru dari sekolah yang ada di Surabaya. Bukutamu merupakan aktifitas user
untuk memberikan saran maupun masukan baik tentang Web Info Sekolah
Surabaya maupun tentang yang lain.
3.2.3 Activity Diagram
Pada dasarnya. Diagram aktivitas adalah Diagram flowchart yang
diperluas yang menunjukkan aliran kendali satu aktivitas ke aktivitas lain.
Kegunaan diagram ini adalah untuk memodelkan workflow atau jalur kerja,
memodelkan operasi, bagaimana objek-objek bekerja, aksi-aksi dan pengaruh
terhadap objek.Activity diagram menunjukkan apa yang terjadi, tetapi tidak menunjukkan siapa yang melakukan apa. Dalam pemrograman hal tersebut tidak
menunjukkan class mana yang bertanggungjawab atas setiap action. Pada
pemodelan bisnis, hal tersebut tidak bisa menunjukkan organisasi mana yang
menjalankan sebuah action. Swimlane adalah sebuah cara untuk
mengelompokan activity berdasarkan actor (mengelompokkan activity dari
sebuah urutan yang sama). Actor bisa ditulis nama actor ataupun sekaligus
dengan lambang actor (stick figure) pada use case diagram. Swimlane
digambarkan secara vertikal, walaupun terkadang digambarkan secara
horizontal.
Activity diagram merupakan salah satu diagram yang umum digunakan dalam UML untuk menjabarkan proses atau aktivitas dari aktor. Sebagai contoh,
jika pelanggan belum terdaftar, maka akan ditolak oleh sistem dan
dikembalikan.
Gambar 3.4 Contoh Activity Diagram Dari Proses Login
Untuk proses pencarian info sekolah, user memasukkan kata kunci atau
nama sekolah yang dicari. Kemudian sistem akan meng-query kata kunci dengan
data yang ada didalam database. Jika sesuai maka data info sekolah yang dicari
akan ditampilkan ke dalam web. Dan jika tidak sesuai dengan data yang ada di
dalam database maka akan ditampilkan data kosong.
Start
memasukkan nama,email dan saran
ditampilkan
End
Disimpan dalam database
data buku tamu benar
data bukutamu salah
sistem : user
Gambar 3.7 Activity Diagram Dari Proses IsiBukutamu
Pada Activity Diagram bukutamu, user bisa memasukkan pesan atau
komentar pada web. Yang sebelumnya user diharuskan memasukkan nama, email
dan pesan atau komentar. Setelah itu data akan disimpan dalam database
bukutamu.
3.2.4 Sequence Diagram
Sequence diagram menggambarkan interaksi antar objek di dalam dan di
digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal
(waktu) dan dimensi horizontal (objek-objek yang terkait).
Sequence diagram biasa digunakan untuk menggambarkan skenario atau
rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event
untuk menghasilkan output tertentu. Diawali dari apa yang men-trigger aktivitas
tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa
yang dihasilkan. Masing-masing objek, termasuk aktor, memiliki lifeline vertikal.
Message digambarkan sebagai garis berpanah dari satu objek ke objek lainnya.
Pada fase desain berikutnya, message akan dipetakan menjadi operasi/metoda dari
class. Activation bar menunjukkan lamanya eksekusi sebuah proses, biasanya
diawali dengan diterimanya sebuah message.
Sequence diagram proses cari info sekolah dimulai dari user masuk ke
halaman utama web, kemudian user memilih menu info sekolah dan memilih
pencarian info sekolah (berdasarkan info umum, history, perkecamatan atau
membandingkan antar sekolah). Kemudian memasukkan kata kunci atau nama
sekolah yang diinginkan. Sistem akan meng-query kata kunci yang telah
dimasukkan ke database. Jika data yang dicari ada, maka akan ditampilkan
[image:56.612.134.507.254.584.2]kepada user.
Gambar 3.9Sequence Diagram Proses Lihat Berita
Untuk melihat berita yang ada, setelah masuk ke halaman utama, user bisa
dan menampilkannya. Setelah itu user tinggal memilih berita mana yang akan
[image:57.612.132.510.140.514.2]ditampilkan lebih detail.
Gambar 3.10Sequence Diagram Mengisi Buku Tamu
Untuk mengisi buku tamu, user harus memasukkan nama, email dan
pesan. Setelah itu klik tombol ”Submit” dan data akan disimpan dalam database.
3.2.5 Class Diagram
Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan
objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus
menawarkan layanan untuk memanipulasi keadaan tersebut (metoda/fungsi).
Class diagram menggambarkan struktur dan deskripsi class, package dan
objek beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi,
dan lain-lain.
Class memiliki tiga area pokok :
a. Nama (dan stereotype)
b. Atribut
c. Metoda
Atribut dan metoda dapat memiliki salah satu sifat berikut :
a. Private, tidak dapat dipanggil dari luar class yang bersangkutan
b. Protected, hanya dapat dipanggil oleh class yang bersangkutan dan
anak-anak yang mewarisinya
c. Public, dapat dipanggil oleh siapa saja
Class dapat merupakan implementasi dari sebuah interface, yaitu class
abstrak yang hanya memiliki metoda. Interface tidak dapat langsung
diinstansiasikan, tetapi harus diimplementasikan dahulu menjadi sebuah class.
Dengan demikian interface mendukung resolusi metoda pada saat run-time.
Sesuai dengan perkembangan class model, class dapat dikelompokkan
menjadi package. Kita juga dapat membuat diagram yang terdiri atas package.
Hubungan Antar Class
1. Asosiasi, yaitu hubungan statis antar class. Umumnya menggambarkan
mengetahui eksistensi class lain. Panah navigability menunjukkan arah
query antar class.
2. Agregasi, yaitu hubungan yang menyatakan bagian (“terdiri atas..”).
3. Pewarisan, yaitu hubungan hirarkis antar class. Class dapat diturunkan
dari class lain dan mewarisi semua atribut dan metoda class asalnya dan
menambahkan fungsionalitas baru, sehingga ia disebut anak dari class
yang diwarisinya. Kebalikan dari pewarisan adalah generalisasi.
4. Hubungan dinamis, yaitu rangkaian pesan (message) yang di-passing dari
satu class kepada class lain. Hubungan dinamis dapat digambarkan dengan
menggunakan sequence diagram yang akan dijelaskan kemudian.
[image:59.612.153.494.251.658.2]Berita id_berita judul_berita isi_berita Bukutamu id_gb nama email komen Sekolah id_sekolah nama_seko alamat_seko visi_misi sejarah_seko fasilitas prestasi no_tlp website email kecamatan History id_history tahun jml_siswa_daftar jml_siswa_diterima jml_siswa_lulus rata_nilai_masuk rata_nilai_keluar
3.3 Perancangan Antar Muka
Berikut ini adalah rancangan awal untuk tampilan dari Web Info Sekolah
Surabaya untuk memberikan gambaran awal, maka perlu dibuat suatu rancangan
input dan output dari Web Info Sekolah Surabaya ini. Gambar rancangan awal
untuk halaman utama, halaman info sekolah, halaman berita, halaman bukutamu
dan halaman about us.
3.3.1 Tampilan Halaman Utama Web
Beranda Info Sekolah Berita Buku Tamu About Us
LOGO
Selamat Datang di Portal Info Sekolah Surabaya
Pendidikan adalah salah satu indikator yang dapat digunakan untuk melihat perkembangan kota, termasuk tingkat kecerdasan masyarakat. Di Surabaya, pengembangan kegiatan pendidikan beserta penyediaan fasilitasnya, tidak hanya dilakukan oleh pemerintah, namun juga oleh pihak swasta dan organisasi sosial kemasyarakatan. Catatan sejarah menunjukkan, pendirian sekolah dan penyelenggaraan pendidikan di Surabaya pertama kali dilakukan pada tahun 1818.
Sebagai kota pendidikan, Surabaya telah menyediakan sarana dan prasarana pendidikan yang memadai, meliputi tingkat pendidikan dasar, menengah dan pendidikan tinggi. Hampir di semua bidang ilmu pengetahuan dengan tingkat akademi dan politeknik, dari S1 hingga S3 dapat ditemukan di lembaga pendidikan di Surabaya. Pengembangan sebagai kota pendidikan bertujuan untuk pengembangan kualitas SDM yang ada.
Sejalan dengan banyaknya fasilitas pendidikan yang ada, kebutuhan informasi akan fasilitas pendidikan itu sendiri juga perlu diperhatikan. Mulai dari penyebaran informasi dan cepat tidaknya informasi tersampaikan kepada masyarakat. Kemajuan teknologi informasi yang demikian pesat serta potensi pemanfaatannya yang…….
Copyright © 2011
[image:60.612.141.515.248.556.2]Tampilan halaman di atas adalah rancangan awal untuk halaman utama
Web Info Sekolah Surabaya. Di halaman utama berisi tentang
penjelasan-penjelasan umum tentang Web Info Sekolah Surabaya.
3.3.2 Tampilan Halaman Info Sekolah
Beranda Info Sekolah Berita Buku Tamu About Us
LOGO
Info Sekolah
Untuk pencarian berdasarkan Nama Sekolah
Masukkan kata kunci seperti : "SMAN 01", "MIN", "SMP SURABAYA", dan lain-lain.
Untuk pencarian berdasarkan History
Masukkan kata kunci seperti : "SMAN01", "SMPN12", "SDN", dan lain-lain.
Untuk pencarian berdasarkan daerah atau per-Kecamatan
Silahkan pilih daerah atau kecamatan di combo box.
Untuk membandingkan sekolah
Masukkan kata kunci seperti : "SMAN01", SMAN15", "SMPN12", dan lain-lain.
Cari Sekolah Masukkan kata kunci :
Copyright © 2011
Gambar 3.13 Rancangan Awal Halaman Info Sekolah
Tampilan halaman di atas adalah halaman info sekolah. Di halaman ini
digunakan untuk mencari informasi sekolah (berdasarkan info umum, history,
maupun membandingkan sekolah), yang sebelumnya memasukkan kata kunci dan
“klik” tombol cari. Jika data yang dicari ada, akan langsung ditampilkan.
Cari
Cari
[image:61.612.136.513.177.528.2]3.3.3 Tampilan Halaman Berita
BERITA
Pengumuman Kelulusan 2010-2011
Bagi para siswa-siswi kelas XII, kini saatnya kalian semua berserah diri kepada Tuhan Yang Maha Esa, atas segala perjuangan yang telah kalian lakukan selama 3 tahun di SMA Negeri 2 Surabaya. Pengumuman kelulusan disampaikan pada hari Senin………
Sekolah Seluruh Siswanya Tak Lulus Ujian Nasional
TEMPO Interaktif, Jakarta - Menteri Pendidikan Nasional, Muhammad Nuh mengungkapkan dari hasil pelaksanaan ujian nasional tingkat menengah atas terdapat lima SMA/MA yang siswanya tidak lulus seluruhnya. Hanya Nuh menolak menyebutkan identitas sekolah bersangkutan. Nuh juga menyebut untuk tahun ini, di tingkat SMA dan MA, Nusa Tenggara Timur menjadi propinsi dengan nilai presentase ketidaklulusan siswa paling tinggi, yaitu sebesar 5,57 persen.
Copyright © 2011
Gambar 3.14 Rancangan Awal Halaman Berita
Halaman berita berisikan tentang berita pendidikan baik yang terkait
dengan sekolah maupun tidak. Data berita disimpan di dalam database, akan
diload jika ada interaksi pada halaman berita.
3.3.4 Tampilan Halaman Bukutamu
BUKU TAMU
Nama : Email : Comment :
Copyright © 2011
Gambar 3.15 Rancangan Awal Halaman Bukutamu
[image:62.612.136.511.206.640.2]Pada halaman buku tamu user bisa memasukkan pesan dengan
memasukkan nama, email dan isi pesan. Setelah selesai memasukkan semua data,
tekan tombol “submit”, data akan disimpan dalam database.
3.3.5 Tampilan halaman about us
Beranda Info Sekolah Berita Buku Tamu About Us
LOGO
About Us
Assalammu'alaikum Wr. Wb.
Puji syukur kami panjatkan ke hadirat Allah SWT yang atas berkat rahmat dan hidayah-Nya kami bisa menyelesaikan "Web Portal Info Sekolah Surabaya" ini. Web portal ini bertujuan untuk memperkenalkan Sekolah sebagai lembaga pendidikan dengan memanfaatkan media teknologi internet. Dengan adanya web ini, kami berharap sekolah dapat lebih dikenal di kalangan yang lebih luas. Selain itu melalui web ini juga, kami berharap dapat memberi kemudahan bagi para siswa dan orang tuanya untuk mengakses informasi mengenai sekolah dengan cepat, efisien dan online 24 jam. Akhir kata, kami berharap web ini dapat memberikan manfaat positif bagi siapa saja yang mengunjungi web kami ini.
Wassalammu'alaikum Wr. Wb.
Kontak Kami
YM : [email protected] Email : [email protected] Telepon : 081931547637
Copyright © 2011
Gambar 3.16 Rancangan Awal Halaman About Us
Pada halaman about us berisikan ucapan syukur atas selesai dibuatnya
Web Portal Info Sekolah Surabaya. Dan juga terdapat kontak pembuat web,
[image:63.612.137.513.196.559.2]IMPLEMENTASI SISTEM
4.1 Lingkungan Implementasi
Web Portal Info Sekolah Surabaya diimplementasikan pada sistem komputer
dengan spesifikasi sebagai berikut:
Sistem operasi : Microsoft Windows Xp Service Pack 3
Jenis komputer : Notebook Acer Aspire 4530
Prosesor : AMD Turion 64 X2 2.0 GHz
RAM : 1,25Gb
Hard Disk : 160 GB
4.2 Implementasi Basis Data
Pada tahap ini akan dibahas mengenai implementasi basis data dari perancangan
yang telah dibahas sebelumnya. Pada perancangan aplikasi ini, menggunakan database
bawaan aplikasi XAMPP versi 1.7.4 berupa MySQL versi 5.5.8 dan editor database
bawaan berupa phpMyAdmin versi 3.3.9.
Pada perancangan yang telah dibuat sebelumnya, terdapat 4 tabel yang akan
digunakan oleh aplikasi, dan 1 tabel merupakan table master atau merupakan tabel utama
yang primary key-nya akan diturunkan pada 1 tabel lain yang saling berelasi. 1 tabel
[image:64.612.130.510.254.517.2]master tersebut adalah tabel sekolah, Dan ada 2 tabel yang tidak memiliki relasi pada
Tabel bukutamu tidak berelasi pada tabel yang lainnya karena memang tidak berkaitan pada info sekolah yang akan ditampilkan.
Setelah rancangan CDM dibuat dan kemudian di-generate ke PDM. Jika ada
tidak ada error, kemudian di Generate Database sehingga menghasilkan skrip
database seperti dibawah ini :
• Skrip untuk membuat tabel berita
create table BERITA (
ID_BERITA varchar(7) not null, JUDUL_BERITA varchar(50),
ISI_BERITA v
