WEB INFO SEKOLAH SURABAYA.

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

Basuki Rahmat, SSi, MT NIP. 369 070 602 091

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

Ir. Sutiyono, MT NIP. 196600713 198703 1001

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

dan Class Diagram untuk mendefinisikan fitur apa saja yang ada pada sistem, menampilkan hubungan antar objek yang ada pada sistem.

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 ini membahas tentang implementasi dari analisa sistem ke dalam sebuah bahasa pemrograman sehingga terbentuk suatu perangkat lunak sesuai yang dikehendaki.

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 ini berisi tentang kesimpulan yang dapat diambil dari permasalahan dan program dalam skripsi ini serta berisi tentang saran-saran yang dapat digunakan untuk perbaikan dan pengembangan lebih lanjut atas program yang telah dibuat.

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 semua orang.

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 menterjemahkan setiap perintah pada saat website tersebut sedang dijalankan.

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, dll.

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 menjangkau komunitasnya yang tersebar di seluruh dunia.

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 dari pembayaran aplikasi yang dijual oleh perusahaan tersebut.

• 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 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 digunakan secara luas untuk menampilkan halaman web. HTML saat ini

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++ • dll

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 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 platform), A (yang berarti Apache HTTP server), M (yang berarti MySQL), P (yang berarti PHP), dan P yang terakhir (yang berarti Perl). Jika di istilahkan

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 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 mengubah kode programnya.

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.

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 mengaktifkan GD extension silahkan ikuti langkah-langkah dibawah ini :

• 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(‘Canada’, 5447),

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 pengguna). Saat ini database MySQL telah digunakan hampir oleh semua

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, sebagai utility yang stand-alone atau sebagai bagian dari suatu aplikasi.

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 • DELETE untuk menghapus data

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 mengaktifkan web server Apache dan MySQL dari control panel XAMPP.

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 tombol “create”.

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 tahapan selanjutnya adalah melakukan perancangan sistem.

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 Software Engineering).

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 digunakan untuk melihat dari perspektif luar sistem (aktor).

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 yang lainnya. Lihat berita merupakan aktifitas user untuk melihat berita yang ada

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, pelanggan melakukan login (masuk) pada halaman website untuk bergabung,

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 sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang

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 kepada user.

Gambar 3.9Sequence Diagram Proses Lihat Berita

Untuk melihat berita yang ada, setelah masuk ke halaman utama, user bisa langsung memilih menu berita. Sistem akan langsung meng-query dari database

dan menampilkannya. Setelah itu user tinggal memilih berita mana yang akan 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 sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi

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.

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

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

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

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 : denkai_77@ymail.com Email : denkai77@gmail.com 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, berupa Yahoo Messenger, email dan nomor telepon.

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 master tersebut adalah tabel sekolah, Dan ada 2 tabel yang tidak memiliki relasi pada tabel lain, yaitu tabel berita dan tabel bukutamu.

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 varchar(1000), primary key (ID_BERITA)

);

• Skrip untuk membuat tabel bukutamu

create table BUKUTAMU (

ID_GB varchar(7) not null, NAMA_GB varchar(10),

EMAIL_GB varchar(50), KOMEN varchar(160), primary key (ID_GB)

);

• Skrip untuk membuat table history

create table HISTORY (

ID_HISTORY varchar(7) not null, TAHUN_HIS varchar(4),

JML_SISWA_DAFTAR varchar(4), JML_SISWA_TERIMA varchar(4), JML_SISWA_LULUS varchar(4), RATA_NEM_MASUK varchar(5), RATA_NEM_KELUAR varchar(5), primary key (ID_HISTORY)

• Skrip untuk membuat tabel sekolah

create table SEKOLAH (

ID_SEKOLAH varchar(7) not null, NAMA_SEKO varchar(30),

ALAMAT_SEKO varchar(50), VISI_MISI varchar(1000), SEJARAH_SEKO varchar(2000), NO_TLP_SEKO varchar(12), WEBSITE_SEKO varchar(50), EMAIL_SEKO varchar(50), primary key (ID_SEKOLAH)

);

4.3 Implementasi Antar Muka

Pada tahap ini akan dijelaskan tentang implementasi antarmuka tiap-tiap halaman dari Web Info Sekolah Surabaya berdasarkan perancangan awal web yang telah dibuat sebelumnya. Halaman-halaman web tersebut, yaitu :

1. Halaman Menu Utama

2. Halaman Info Sekolah

3. Halaman Berita

4. Halaman Buku Tamu

4.3.1 Halaman Utama

Halaman utama menjelaskan sedikit sejarah pendidikan di kota Surabaya. Kemudian menjelaskan tujuan pembuatan Web Info Sekolah Surabaya ini dan juga manfaat dengan dibuatnya Web Info Sekolah Surabaya. Sehingga pengguna dapat mengerti tujuan dari dibuatnya Web Info Sekolah Surabaya ini. Pada halaman ini tidak terhubung dengan database.

Gambar 4.1 TampilanHalaman Utama Web

4.3.2 Halaman Info Sekolah

Halaman info sekolah ini merupakan halaman utama dari Web Portal Info Sekolah Surabaya, halaman ini digunakan untuk mencari info sekolah dan ditampilkan secara detail berdasarkan kata kunci yang dimasukkan. Proses pencarian dibagi menjadi 4, pencarian berdasarkan informasi umum sekolah, berdasarkan history sekolah, pencarian berdasarkan daerah/kecamatan dan

membandingkan sekolah. Untuk informasi umum sekolah data yang ditampilkan meliputi :

• Nama Sekolah

• Visi dan Misi

• Sejarah

• Fasilitas yang dimiliki sekolah

• Prestasi yang telah diraih oleh sekolah

• Alamat dan nomor telepon

• Website dan email

Sedangkan untuk informasi history sekolah, data yang ditampilkan meliputi :

• Pagu (Jumlah siswa yang mendaftar, jumlah siswa yang diterima dan

jumlah siswa yang lulus).

• Perbandingan rata-rata nilai nem yang masuk/diterima dan rata-rata nilai

nem yang keluar/lulus.

• Data-data diatas disajikan baik berupa tabel dan grafik.

Untuk pencarian berdasarkan daerah/kecamatan, akan menampilkan sekolah mana saja yang termasuk dalam satu kecamatan. Dan untuk pencarian dengan membandingkan sekolah maksimal 3 sekolah.

4.3.3 Halaman Berita

Halaman ini sedikit menampilkan berita apa saja yang terkait dengan sekolah dan pendidikan. Baik masalah kurikulum, masalah kelulusan, masalah universitas, dan lain-lain.

Gambar 4.3 TampilanHalaman Berita

4.3.4 Halaman Buku Tamu

Pada halaman ini user dapat mengisi buku tamu sebagai sarana untuk pemberian saran atau masukan dalam pembuatan Web Portal Info Sekolah Surabaya, semua pesan user akan ditampilkan di dalam web.

Gambar 4.4 TampilanHalaman Buku Tamu

4.3.5 Halaman About Us

Pada halaman About Us berisi informasi kontak Yahoo Messenger, Email

dan no telepon pembuat.

UJI COBA DAN EVALUASI

5.1. Lingkungan Uji Coba

Pada bagian ini akan dijelaskan mengenai spesifikasi perangkat keras yang digunakan dalam uji coba, step-by-step uji coba dilakukan dengan screenshot setiap fungsi aplikasi, uji coba ini dilakukan dengan menggunakan spesifikasi perangkat keras 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,25 Gb

Hard Disk : 160 GB

Gambar 5.1 Spesifikasi Perangkat Uji Coba

5.2. Skenario Uji Coba

Untuk memastikan bahwa aplikasi ini berjalan lancar, penyusun akan menyusun skenario yang akan diuji coba, antara lain:

1. Uji coba proses membuka halaman Web pada setiap halaman untuk mengetahui

apakah web page dapat dibuka dan berfungsi dengan baik.

2. Uji coba pencarian pada halaman info sekolah. Pencarian berdasarkan informasi

3. Uji coba pengisian Buku Tamuyang berfungsi sebagai sarana untuk pengisian saran, kritik dan masukan dari pengguna dengan tujuan sebagai penyempurnaan Web Portal Info Sekolah Surabaya yang lebih baik.

5.3 Pelaksanaan Uji Coba

Pada sub-bab ini akan dijelaskan step-by-step mengenai pelaksanaan skenario uji coba yang telah dijabarkan pada sub-bab sebelumnya, uji coba dilakukan per halaman. Untuk membuktikan uji coba aplikasi disertakan gambar tentang kejadian-kejadian yang sedang berlangsung pada perangkat keras

(notebook) yang digunakan. Untuk browser yang digunakan uji coba, menggunakan Mozilla Firefox versi 4.0.1.

5.3.1 . Uji Coba Proses Membuka Halaman Web pada Setiap Halaman

Pada tahap ini, uji coba membuka halaman Web Portal Info Sekolah Surabaya. Uji coba langkah-langkah membuka halaman web terdiri dari beberapa tahap, antara lain :

• Gambar 5.2 adalah proses ketika masuk ke dalam halaman utama dengan

mengetikkan url http://localhost/infosekolah maka otomatis akan masuk ke dalam halaman utama dengan url http://localhost/infosekolah/home.html. Tampilan awal Web Info Sekolah Surabaya bisa dilihat pada gambar dibawah ini.

Gambar 5.2 TampilanHalaman Utama

• Gambar 5.3 adalah proses masuk ke halaman berikutnya yaitu halaman info sekolah dengan cara mengklik pilihan button info sekolah di bagian header. Apabila sudah masuk halaman info sekolah maka url yang tertulis pada

browser adalah http://localhost/infosekolah/daftarskul.html.

• Gambar 5.4 adalah proses masuk ke dalam halaman berikutnya yaitu halaman

berita dengan cara mengklik pilihan button berita di bagian header. Apabila sudah masuk halaman berita maka url yang tertulis pada browser adalah

http://localhost/infosekolah/load_berita.php.

Gambar 5.4 TampilanHalaman Berita

• Gambar 5.5 adalah proses masuk ke halaman berikutnya yaitu halaman buku

tamu dengan cara menglik pilihan menu buku tamu di bagian header. Apabila sudah masuk ke halaman buku tamu maka url yang tertulis pada browser

adalah http://localhost/infosekolah/isibukutamu.php. Di halaman ini user bisa memasukkan nama, email dan pesan atau komentar yang akan disampaikan. Dan setelah data tersimpan dalam database, pesan atau komentar akan ditampilkan ke dalam web lagi.

Gambar 5.5 TampilanHalaman Buku Tamu

• Gambar 5.6 adalah proses masuk ke halaman berikutnya yaitu halaman about

us dengan cara menglik pilihan button about us di bagian header. Apabila sudah masuk ke halaman about us maka url yang tertulis pada browser adalah

http://localhost/infosekolah/about.html.

Pada halaman about us berisikan kontak pembuat web (berisikan Yahoo Messenger, email dan nomor telepon pembuat).

5.3.2 Uji Coba Pencarian Pada Halaman Info Sekolah

Pengoperasian cari info sekolah dengan mengisi kata kunci. Langkah selanjutnya adalah klik tombol ”Cari” sistem akan mencari di dalam database, jika data yang dicari ada maka akan ditampilkan. Jika data yang dicari tidak ada maka yang ditampilkan tabel kosong saja.

Gambar 5.8 Pencarian Info Berdasarkan Nama Sekolah

Memasukkan kata kunci sekolah yang dicari adalah “SMAN 01”, kemudian tekan tombol “Cari”. Tampilan hasil pencarian akan seperti gambar dibawah ini :

Gambar 5.9 menampilkan hasil pencarian dari “SMAN 01” yang ditampilkan berdasarkan informasi umum sekolah.

Gambar 5.10 Pencarian History Berdasarkan Nama Sekolah

Memasukkan kata kunci sekolah yang dicari adalah “SMAN02”, kemudian tekan tombol “Cari”. Tampilan hasil pencarian akan seperti gambar dibawah ini :

Gambar 5.11 Hasil Pencarian History Sekolah SMAN 02

Gambar 5.11 menampilkan hasil pencarian history dari “SMAN02” yang menampilkan data siswa mendaftar, siswa diterima, siswa lulus, data nilai rata-rata masuk dan data nilai rata-rata-rata-rata lulus. Dan menampilkan grafik data siswa.

Gambar 5.12 Pencarian Berdasarkan Membandingkan Sekolah

Pilih sekolah yang akan dicari dengan meng-klik combobox. Sekolah yang akan dibandingkan adalah “SMAN01”, “SMAN02” dan “SMAN03”, kemudian tekan tombol “Bandingkan”. Tampilan hasil pencarian akan seperti gambar dibawah ini :

Gambar 5.13 menampilkan hasil pencarian dari perbandingan “SMAN01”, “SMAN02” dan “SMAN03”.

5.3.3 Uji Coba Pengisian Buku Tamu

Pengoperasian pada halaman Buku Tamu dengan mengisi nama, email dan pesan atau komentar yang akan disampaikan oleh pengguna. Langkah selanjutnya adalah klik tombol ”Send” maka data nama, email dan pesan atau komentar akan disimpan ke dalam database. Jika user ingin menghapus tulisan yang ada pada field nama, email dan pesan, user hanya perlu menekan tombol ”Reset”.

Gambar 5.14 Uji Coba Mengisi Buku Tamu

Setelah tombol “Send” di-klik maka data akan disimpan ke dalam database dan setelah itu akan muncul notifikasi seperti gambar 5.15 di bawah ini :

Gambar 5.15 Data Telah Tersimpan Dalam Database

5.4. Evaluasi

Hasil evaluasi dari uji coba terhadap aplikasi yang telah dilakukan membuktikan bahwa aplikasi telah berjalan dengan baik sesuai dengan fungsinya masing-masing. Untuk kedepannya Web Info Sekolah Surabaya bisa dikembangkan dengan lebih sempurna, dan fasilitas yang dimiliki lebih banyak dibandingkan dengan saat ini dan semoga bisa terealisasi dan di-upload melalui internet. Untuk upload di internet, data sekolah harus riil dan harus sesuai dengan data yang ada di Dinas Pendidikan Kota Surabaya.

68

Gambar 5.12 Pencarian Berdasarkan Membandingkan Sekolah

Pilih sekolah yang akan dicari dengan meng-klik combobox. Sekolah yang akan dibandingkan adalah “SMAN01”, “SMAN02” dan “SMAN03”, kemudian tekan tombol “Bandingkan”. Tampilan hasil pencarian akan seperti gambar dibawah ini :

Gambar 5.13 menampilkan hasil pencarian dari perbandingan “SMAN01”, “SMAN02” dan “SMAN03”.

5.3.3 Uji Coba Pengisian Buku Tamu

Pengoperasian pada halaman Buku Tamu dengan mengisi nama, email dan pesan atau komentar yang akan disampaikan oleh pengguna. Langkah selanjutnya adalah klik tombol ”Send” maka data nama, email dan pesan atau komentar akan disimpan ke dalam database. Jika user ingin menghapus tulisan yang ada pada field nama, email dan pesan, user hanya perlu menekan tombol ”Reset”.

70

Gambar 5.15 Data Telah Tersimpan Dalam Database

5.4. Evaluasi

Hasil evaluasi dari uji coba terhadap aplikasi yang telah dilakukan membuktikan bahwa aplikasi telah berjalan dengan baik sesuai dengan fungsinya masing-masing. Untuk kedepannya Web Info Sekolah Surabaya bisa dikembangkan dengan lebih sempurna, dan fasilitas yang dimiliki lebih banyak dibandingkan dengan saat ini dan semoga bisa terealisasi dan di-upload melalui internet. Untuk upload di internet, data sekolah harus riil dan harus sesuai dengan data yang ada di Dinas Pendidikan Kota Surabaya.

PENUTUP

6.1 Kesimpulan

Setelah dilakukan uji coba maka kesimpulan yang didapat dari perancangan Web Portal Info Sekolah Surabaya ini adalah sebagai berikut :

a. Web Info Sekolah Surabaya telah berjalan dengan baik. Mulai dai halaman utama hingga halaman about us, semua bisa berjalan lancar pada web browser Mozilla Firefox versi 4.0.1. Dengan menggunakan library PHPlot data text bisa ditampilkan menjadi grafik dan menjadikan tampilan penyampaian info history lebih menarik dibandingkan ditampilkan dengan data text biasa .

b. Proses pencarian info sekolah berhasil berjalan dan data yang ditampilkan berupa data dan grafik. Untuk pembuatan grafik pada PHP, memerlukan tambahan library. Pada aplikasi Web Info Sekolah Surabaya menggunakan tambahan library PHPlot. Masih banyak aplikasi maupun library yang bisa juga digunakan untuk menggambarkan grafik pada PHP, seperti JPGraph, LibChart, dll.

6.2 Saran

72

b. Pada siap-online.com untuk sekolah yang ingin menampilkan informasi tentang sekolahnya harus mendaftar dan dikenakan biaya. Pada Web Info Sekolah Surabaya diharapkan kedepannya free tanpa harus membayar, dan fasilitasnya dikembangkan seperti siap-online.com atau bahkan lebih banyak dibandingkan dengan siap-online.com.

c. Data untuk informasi sekolah hendaknya lebih banyak dan lebih detail (informasi tentang sekolah lebih banyak, baik informasi umum maupun history sekolah). Dan data history sekolah ditampilkan dengan grafik yang lebih menarik.

DAFTAR PUSTAKA

Kadir, Abdul. 2003. “Pemrograman Web Mencakup:HTML, CSS, JAVASCRIPT dan PHP”. STMIK Pelita Nusantara & ANDI. Yogyakarta.

Kadir, Abdul. 2008. “Tuntunan Praktis Belajar Database Menggunakan MySql”. Andi. Yogyakarta.

Kurniawan, Rulianto. 2008. “Membangun Situs dengan PHP untuk Orang Awam”. Maxikom. Palembang.

Lenawati, Mei. 2007. “Mahir Dreamweaver 8 dengan PHP”. ANDI & MADCOMS. Yogyakarta.

Madscom. 2008. “PHP dan MySQL Untuk Pemula”. Andi. Yogyakarta.

Wahana Komputer. 2006. “Pengelolahan Database dengan MySQL”. Andi. Yogyakarta.

Wahidin. 2005. “17 Jam Belajar Dreamweaver MX 2004 Untuk Orang Awam”. Maxikom. Palembang.