i PERANCANGAN WEBSITE INFORMASI DI SMK AL-ISLAH
MENGGUNAKAN PHP DAN MYSQL LAPORAN KULIAH KERJA PRAKTEK
Disusun Oleh Dimas Ardi Pratama
311510797
PROGRAM STUDI TEKNIK INFORMATIKA
SEKOLAH TINGGI TEKNOLOGI PELITA BANGSA
BEKASI
2018
ii LEMBAR PENGESAHAN
LAPORAN KULIAH KERJA PRAKTEK TAHUN 2018/2019
Ditujukan untuk memenuhi syarat kelulusn Mata Kuliah KPI216 (103971) – Kuliah Kerja Praktek
Disusun Oleh : Dimas Ardi Pratama
(311510797)
Telah Disetujui dan Disahkan oleh:
Dosen Pembimbing KKP Kaprodi Teknik Informatika
Suherman, S.Kom., M.Kom. Aswan S. Sunge, S.Kom., M.Kom. NIDN : 0308086805 NIDN : 0426018003
xi
KATA PENGANTAR Bismillahirrahmanirrahim
Segala puji bagi Allah SWT, yang telah memberikan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan laporan Kuliah Kerja Praktik ini dengan judul “PERANCANGAN WEBSITE INFORMASI DI SMK-AL ISLAH MENGGUNAKAN PHP DAN MYSQL” yang merupakan salah satu syarat dalam menempuh ujian akhir Program Strarta I pada Prodi Teknik Informatika STT Pelita Bangsa.
Penulis menyadari bahwa dalam penyusunan laporan Kuliah Kerja Praktik ini masih banyak kekurangan, baik mengenai isi maupun cara penulisan. Untuk itu penulis mengharapkan adanya tanggapan, baik berupa saran maupun kritik membangun sehingga dapat dijadikan tolak ukur dalam pembuatan tulisan-tulisan selanjutnya.
Pada kesempatan ini, penulis mengucapkan banyak terima kasih kepada bapak Suherman S.Kom. M.Kom selaku dosen pembimbing yang telah sabar membimbing hingga terselesaikannya laporan Kuliah Kerja Praktik ini.
Bekasi, November 2018 Penyusun
xii DAFTAR ISI
LEMBAR PENGESAHAN ... ii
KATA PENGANTAR ... xi
DAFTAR GAMBAR ... xviii
DAFTAR TABEL ... xxi
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Identifikasi Masalah ... 2
1.3 Rumusan Masalah ... 3
1.4 Batasan Masalah... 3
1.5 Tujuan Penelitian ... 4
1.6 Manfaat Penelitian ... 4
1.7 Tujuan dan Manfaat Kuliah Kerja Praktik ... 4
1.7.1 Tujuan Kuliah Kerja Praktik ... 4
1.7.2 Manfaat Penelitian ... 5
BAB II LANDASAN TEORI ... 6
2.1 Definisi Judul ... 6
2.1.1 Konsep Dasar Web ... 6
xiii
2.1.3 Internet ... 8
2.1.4 Web Server ... 9
2.1.5 Web Browser ... 10
2.2 Bahasa Pemrograman ... 10
2.2.1 HTML (Hypertext Markup Language ) ... 11
2.2.2 PHP ( PHP Hypertext Preprocessor ) ... 11
2.2.3 Perancangan ... 12
2.3 Basis Data ... 12
2.3.1 MySQL ... 13
2.4 Model Pengembangan Perangkat Lunak ... 15
2.4.1 IIlustrasi model waterfall ... 15
2.5 Sistem Informasi ... 16
2.5.1 Pengertian Sistem ... 17
2.6 Teori Pendukung ... 18
2.7 Software Pendukung ... 18
2.7.1 PhpMyadmin ... 18
2.7.2 UML (Unified Modeling Language) ... 19
2.7.3 Use Case Diagram ... 19
2.7.4 Activity Diagram ... 21
xiv
2.7.6 Class Diagram ... 24
BAB III HASIL DAN PEMBAHASAN... 26
3.1 Sejarah Instansi ... 26
3.2 Struktur Organisasi Sekolah ... 28
3.3 Analisis Sistem Yang Sedang Berjalan ... 29
3.4 Kelemahan Sistem Lama ... 30
3.5 Hasil Analisis ... 31
3.6 Skenario Proses Website Sekolah Smk Al-islah ... 32
3.7 Perancangan Modul ... 33
3.8 Perancangan Menu ... 34
3.9 Analisis Model Use Case ... 35
3.10 Model Use Case ... 35
3.10.1 Use Case Diagram ... 35
3.10.2 Activity Diagram Login Admin ... 36
3.10.3 Activity Diagram Menambah Agenda ... 37
3.10.4 Activity Diagram Menghapus Agenda ... 38
3.10.5 Activity Diagram Menambah Artikel ... 39
3.10.6 Activity Diagram Menghapus Artikel ... 40
3.10.7 Activity Diagram Mengubah Artikel ... 41
xv
3.10.9 Activity Diagram Menghapus Berita ... 43
3.10.10 Activity Diagram Mengubah Berita ... 44
3.10.11 Activity Diagram Menambah Info Sekolah ... 45
3.10.12 Activity Diagram Menghapus Info Sekolah ... 46
3.10.13 Activity Diagram Mengubah Info Sekolah ... 47
3.10.14 Activity Diagram Menambah Jurusan/Program ... 48
3.10.15 Activity Diagram Menghapus Jurusan/Program ... 49
3.10.16 Activity Diagram Mengubah Jurusan/Program ... 50
3.10.17 Activity Diagram Menambah Direktori Siswa ... 51
3.10.18 Activity Diagram Menghapus Direktori Siswa ... 52
3.10.19 Activity Diagram Mengubah Direktori Siswa ... 53
3.10.20 Activity Diagram Akses Link ... 54
3.10.21 Class Diagram ... 55
3.10.22 Sequence Diagram ... 56
3.10.23 Sequence Diagram Login ... 56
3.10.24 Sequence Diagram Tambah Agenda ... 57
3.10.25 Sequence Diagram Edit Agenda ... 57
3.10.26 Sequence Diagram Hapus Agenda ... 58
3.10.27 Sequence Diagram Tamabah Berita ... 58
xvi
3.10.29 Sequence Diagram Hapus Berita ... 59
3.10.30 Sequence Diagram Tambah Artikel ... 60
3.10.31 Sequence Diagram Edit Artikel ... 60
3.10.32 Sequence Diagram Hapus Artikel ... 61
3.10.33 Sequence Diagram Tambah Info Sekolah ... 61
3.10.34 Sequence Diagram Edit Info Sekolah ... 62
3.10.35 Sequence Diagram Hapus Info Sekolah ... 62
3.10.36 Sequence Diagram Tambah Jurusan/Program ... 63
3.10.37 Sequence Diagram Edit Jurusan/Program ... 63
3.10.38 Sequence Diagram Hapus Jurusan/Program ... 64
3.10.39 Sequence Diagram Tambah Direktori Siswa ... 64
3.10.40 Sequence Diagram Edit Direktori Siswa ... 65
3.10.41 Sequence Diagram Hapus Direktori Siswa ... 65
3.11 Spesifikasi Software Dan Hardware ... 66
3.11.1 Spesifikasi Software ... 66
3.11.2 Spesifikasi Hardware ... 66
3.12 Layout Antarmuka ... 66
3.12.1 Antar Muka Halaman Utama ... 67
3.12.2 Antar Muka Halaman Berita ... 67
xvii
3.12.4 Antarmuka Halaman Info Sekolah ... 68
3.12.5 Antarmuka Login Admin ... 69
3.12.6 Antarmuka Berita ... 70
3.12.7 Antarmuka Tambah Berita ... 70
3.12.8 Antarmuka Halaman Utama ... 71
BAB IV PENUTUP ... 72
4.1 Kesimpulan ... 72
4.2 Saran ... 72
xviii
DAFTAR GAMBAR
Gambar 2. 1 Metode Waterfall ... 15
Gambar 3. 1 Struktur Organisasi ... 28
Gambar 3. 2 Sistem Lama Sekolah Smk Al-Islah ... 30
Gambar 3. 3 Sistem Baru Website Smk Al-Islah ... 31
Gambar 3. 4 Perancangan Modul ... 33
Gambar 3. 5 Perancangan Menu ... 34
Gambar 3. 6 Use Case Diagram ... 35
Gambar 3. 7 Activity Diagram Login Admin ... 36
Gambar 3. 8 Activity Diagram Menambah Agenda ... 37
Gambar 3. 9 Activity Diagram Menghapus Agenda ... 38
Gambar 3. 10 Activity Diagram Menambah Artikel ... 39
Gambar 3. 11 Activity Diagram Menghapus Artikel ... 40
Gambar 3. 12 Activity Diagram Menambah Artikel ... 41
Gambar 3. 13 Activity Diagram Menambah Berita ... 42
Gambar 3. 14 Activity Diagram Menghapus Berita ... 43
Gambar 3. 15 Activity Diagram Mengubah Berita ... 44
Gambar 3. 16 Activity Diagram Menambah Info Sekolah ... 45
Gambar 3. 17 Activity Diagram Menghapus Info Sekolah ... 46
Gambar 3. 18 Activity Diagram Mengubah Info Sekolah ... 47
Gambar 3. 19 Activity Diagram Menambah Jurusan/Program ... 48
Gambar 3. 20 Activity Diagram Menghapus Jurusan/Program ... 49
xix
Gambar 3. 22 Activity Diagram Menambah Direktori Siswa ... 51
Gambar 3. 23 Activity Diagram Menghapus Direktori Siswa ... 52
Gambar 3. 24 Activity Diagram Mengubah Direktori Siswa ... 53
Gambar 3. 25 Activity Diagram Akses Link ... 54
Gambar 3. 26 Class Diagram... 55
Gambar 3. 27 Sequence Diagram Login ... 56
Gambar 3. 28 Sequence Diagram Tambah Agenda ... 57
Gambar 3. 29 Sequence Diagram Edit Gambar ... 57
Gambar 3. 30 Sequence Diagram Hapus Agenda ... 58
Gambar 3. 31 Sequence Diagram Tambah Berita ... 58
Gambar 3. 32 Sequence Diagram Edit Berita ... 59
Gambar 3. 33 Sequence Diagram Hapus Berita ... 59
Gambar 3. 34 Sequence Diagram Tambah Artikel ... 60
Gambar 3. 35 Sequence Diagram Edit Artikel ... 60
Gambar 3. 36 Sequence Diagram Hapus Artikel ... 61
Gambar 3. 37 Sequence Diagram Tambah Info Sekolah ... 61
Gambar 3. 38 Sequene Diagram Edit Info Sekolah ... 62
Gambar 3. 39 Sequence Diagram Hapus Info Sekolah... 62
Gambar 3. 40 Sequence Diagram Tambah Jurusan/Program ... 63
Gambar 3. 41 Sequence Diagram Edit Jurusan/Program... 63
Gambar 3. 42 Sequence Diagram hapus Jurusan/Program ... 64
Gambar 3. 43 Sequence Diagram Tambah Direktori Siswa ... 64
xx
Gambar 3. 45 Sequence Diagram Hapus Direktori Siswa ... 65
Gambar 3. 46 Antarmuka Halaman Utama ... 67
Gambar 3. 47 Antar Muka Halaman Baerita ... 67
Gambar 3. 48 Antarmuka Halaman Artikel ... 68
Gambar 3. 49 Antarmuka Halaman Info Sekolah ... 68
Gambar 3. 50 Antarmuka Halaman Administrator ... 69
Gambar 3. 51 Antarmuka Berita ... 70
xxi
DAFTAR TABEL
Tabel 2. 1 Use Case Diagram ... 20
Tabel 2. 2 Activity Diagram... 22
Tabel 2. 3 Squence Diagram ... 23
1 BAB I
PENDAHULUAN 1.1 Latar Belakang Masalah
Dunia pendidikan saat ini berkembang dengan begitu pesatnya perkembangan pesat ini, seiring dengan perkembanganya teknologi dan informasi yang sedang terjadi. Teknologi informasi yang beraneka ragam, memerlukan peningkatan mutu dan mekanisme pelayanan di bidang pendidikan agar lebih berdaya guna, sehingga Sumber Daya Manusia (SDM) yang telah di hasilkan dari dunia pendidikan dapat memberikan kontribusi dalam membangun dunia luar sesuai dengan keahliannya. Banyak cara yang dapat di lakukan untuk mendapatkan dan mengetahui perkembangan teknologi yang sedang terjadi. Salah satunya adalah dengan memanfaatkan komputer sebagai sarana untuk mengakses jaringan internet. Dengan perkembangan teknologi informasi pada saat ini, guru dapat memberikan layanan tanpa harus berhadapan langsung dengan siswa. Demikian pula siswa dapat memperoleh informasi dalam ruang lingkup yang lebih luas dari berbagai sumber melalui menggunakan internet. Pembelajaran maya, yaitu proses pembelajaran yang dilakukan dengan menggunakan internet. Biasa disebut dengan E-Learning.
e-learning yaitu model pembelajaran dengan menggunakan media teknologi
informasi dan komunikasi khususnya internet. Sekolah Smk Al-Islah, yang memiliki tingkat SMK ini memiliki tujuan yang sangat mulia, yaitu untuk
2
membantu pemerintah dalam mencerdaskan bangsa melalui usulan penyediaan sarana pendidikan guna meningkatkan Sumber Daya Manusia yang Berakhlakul Kharimah dan berkarakter. Pada dasarnya Sekolah Al-Islah belum mempunyai sistem informasi berbasis web, yang mengakibatkan proses penyampaian informasi tidak berjalan dengan maksimal untuk kalangan pelajar dan kurangnya komunikasi di luar akademik antara guru dengan murid. Melihat ketidak adanya sistem informasi akademik yang berbasis web, serta pengembangan teknologi informasi yang sangat penting untuk kemajuan sekolah dan besarnya manfaat yang diperoleh, peneliti membuat sebuah perancangan dalam hal sistem informasi akademik.
Berdasarkan latar belakang diatas, maka penulis tertarik untuk menetapkan judul “PERANCANGAN SISTEM WEBSITE INFORMASI DI SMK AL-ISLAH MENGGUNAKAN PHP DAN MYSQL”
1.2 Identifikasi Masalah
Berdasarkan pengamatan yang dilakukan di SMK Al-Islah ditemukan hal-hal yang menjadi permasalahan antara lain:
1. Sistem pengelolahan dan penyajian data siswa, guru serta informasi tentang sekolah Smk Al-islah yang masih secara manual.
2. Waktu yang dibutuhkan untuk mencari data relatif lama yaitu dengan memeriksa setiap berkas yang sangat banyak atau membuka folder-folder di komputer.
3 3. Dengan sistem manual dan komputer tanpa koneksi internet, pengguna
mengalami kesulitan dalam mengakses informasi dan mencari informasi yang kompleks.
1.3 Rumusan Masalah
Berdasarkan identifikasi masalah diatas, maka rumusan masalah yang ada ialah : 1. Bagaimana merancang sistem informasi yang sesuai untuk “Perancangan
sistem informasi berbasis web di SMK Al-Islah”
2. Bagaimana membuat sistem untuk mengelolah data informasi pada SMK Al-Islah yang dapat memberikan informasi secara cepat, akurat, valid, efektif.
1.4 Batasan Masalah
Untuk memudahkan yang akan diselesaikan guna menghindari adanya kegiatan diluar tujuan yang akan dicapai, sehingga dalam perancangan informasi berbasis
web diperlukan suatu batasan masalah. Adapun batasan masalahnya adalah sebagai
berikut :
1) Sistem hanya untuk lingkup SMK Al-Islah.
2) Sistem informasi ini hanya mengetahui tentang sistem informasi di SMK Al-Islah .
4 1.5 Tujuan Penelitian
1) Untuk membuat perancangan aplikasi informasi berbasis web di SMK Al-Islah.
2) Pembuatan perancangan sistem informasi ini dibuat dengan tujun agar dapat mengelola informasi tersebut.
3) Sistem informasi pada siswa ini agar dapat bekerja secara maksimal.
1.6 Manfaat Penelitian
1) Dapat memberikan manfaat kemudahan dan kepuasan kepada semua pihak sekolah dan siswa.
2) Manfaat bagi siswa melatih kedisiplinan dalam hal untuk memudahkan akses kegiatan dalam informasi yang ada di SMK Al-Islah.
3) Manfaat meberikan tambahan ilmu pengetahuan khususnya untuk menerapkan sistem informasi yang terkait dengan siswa.
1.7 Tujuan dan Manfaat Kuliah Kerja Praktik
1.7.1 Tujuan Kuliah Kerja Praktik
Tujuan Pembuatan “Perancangan Sistem Informasi Jurusan Teknik Informatika Fakultas Teknik Universitas Pelita Bangsa Berbasis Web” adalah untuk:
1) Membuat sebuah program aplikasi mengenai Sistem Informasi yang meliputi Pengembangan Diri, Kerja Praktek, Tugas akhir, Kreatifan Mahasiswa dan Informasi.
5 2) Membuat database untuk menyimpan data Informasi mahasiswa yang berkaitan dengan Pengembangan Diri, Kerja Praktek, Tugas Akhir, Kreatifan Mahasiswa dan Informasi.
3) Merancang Sistem informasi input dan output dengan memperbaiki sistem yang sudah ada agar lebih efektif dalam penyampaian informasi.
4) Mebuat media bagi mahasiswa dalam mendapatkan Informasi yang dapat diakses dari mana saja.
5)
1.7.2 Manfaat Penelitian
Adapun manfaat yang dihadapkan dapat diambil dan dapat memberikan manfaat dari penelitian ini adalah :
1) Bagi Peneliti
Sebagai proses pembelajaran pada suatu masalah yang dihadapi di dunia nyata, serta mengembangkan keterampilan, daya fikir serta kemampuan menerapkan ilmu yang selama ini didapat di bangku kuliah.
2) Bagi Jurusan
Sebagai rancangan sistem informasi berbasis web yang bisa memberikan kemudahan untuk mengembangkan dan meningkatkan pelayanan informasi jurusan Teknik Informatika di Fakultas Universitas Pelita Bangsa.
3) Bagi Pembaca
Sebagai referensi bagi orang yang akan melakukan penelitian dimasa yang akan datang.
6 BAB II LANDASAN TEORI
2.1 Definisi Judul
2.1.1 Konsep Dasar Web
Salah satu teknologi yang hampir selalu ada di dalam kehidupan kita adalah teknologi web. Dalam kehidupan masyarakat perkotaan saat ini, terutama kaum milenial, teknologi web telah menjadi aspek yang cukup penting, Halaman web membutuhkan jaringan internet sebagai media penyampaian, sedangkan jaringan internet membutuhkan halaman web sebagai isi atau pun content yang dapat dibagikan kepada para penggunanya. Ditambah dengan makin maraknya media sosial dan apikasi untuk bertukar pesan, setiap orang bisa berkomunikasi dengan temannya kapan saja dan di mana saja. Tapi bagaimana ya perkembangan teknologi tersebut dari awal ditemukan hingga saat ini. Dan kira-kira akan menjadi seperti apa teknologi web di masa mendatang. Menurut Sibero (2017:11) ”web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar, multimedia, dan lainnya pada jaringan internet”. Istilah
web biasanya sering digunakan di bidang teknologi komputer. Bagi orang-orang
yang berkecipung di dunia ini, istilah web bukanlah istilah yang asing bagi mereka. Akan tetapi, bagi kebanyakan orang awam yang tidak memahami dunia komputer sama sekali, istilah web tentunya merupakan istilah yang sangat awam atau bahkan aneh bagi mereka. Kebanyakan orang awam pada dasarnya sudah pernah melihat
7 dan menggunakan web akan teapi mereka tidak mengetahui apa itu defenisi web yang sesungguhnya. Berdasarkan dari teori tersebut, penulis menarik kesimpulan
web adalah fasilitas hyperteks untuk menampilkan data dan berisikan
dokumen-dokumen multimedia yang berupa teks, gambar, suara, animasi dan lainnya dengan menggunakan browser sebagai perangkat lunak untuk mengaksesnya.
2.1.2 Website
Dalam dunia teknologi yang pesat ini diperlukan suatu jaringan yang bias mempermudahkan serta mempercepat penyampaian informasi secara luas, dan dapat dengan mudah dan cepat oleh siapapun yang mendapatkan akses internet. Menurut Bekti (2015:35), “Website merupakan kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman. Menurut Abdullah (2015:1), “Web dapat diartikan sekumpulan halaman yang terdiri dari beberapa laman yang berisi informasi dalam bentuk data digital baik berupa text, gambar, video, audio, dan animasi lainnya yang disediakan melalui jalur koneksi internet”. Menurut Nilasari (2014:2)“Website atau sering disebut situs merupakan kumpulan halaman web yang dijalankan dari suatu alamat web domain. Dari uraian teori diatas penulis menarik kesimpulan website adalah kumpulan halaman-halaman yang dapat menampilkan teks, gambar, animasi, video, suara yang masing-masing dihubungkan dengan jaringan-jaringan halaman.
8 Secara umum, situs websitedi golongkan menjadi 3 jenis yaitu:
1. Website statis
Website statis adalah web yang mempunyai halaman tidak
berubah yang artinya untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan mengedit kode yang menjadi struktur dari situs itu.
2. Website dinamis
Website dinamis adalah website yang secara struktur diperuntukkan untuk
updatesesering mungkin, biasanya disediakan halaman backend untuk mengedit konten dari website tersebut.
3. Website interaktif
Website interaktif adalah website yang menyediakan fasilitas untuk pengguna biasa
berinteraksi dan beradu argumen mengenai suatu topik.
Dari uraian teori diatas penulis menarik kesimpulan website adalah kumpulan halaman-halaman yang dapat menampilkan teks, gambar, animasi, video, suara yang masing-masing dihubungkan dengan jaringan-jaringan halaman. Website dibagi menjadi tiga golongan yaitu website statis, website dinamis dan website interaktif.
2.1.3 Internet
Internet di masa kini bagaikan sudah menjelma menjadi kebutuhan primer
yang setara dengan makanan, pakaian, dan tempat tinggal. Tanpa adanya akses internet, rasanya kehidupan seseorang belum benar-benar hidup. Internet membuka
9 cakrawala manusia, sebagai sarana yang mampu memberitahu manusia tentang berbagai hal yang ada di kota lain, negara lain, bahkan benua lain. Menurut Ahmadi dan Hermawan (2013:68), Internet adalah komunikasi jaringan komunikasi global yang menghubungkan seluruh komputer di dunia meskipun berbeda sistem operasi dan mesin. Sedangkan menurut (Rohani, 2015) Internet saat ini telah menjadi sarana informasi yang semakin hari semakin luas. Internet menyajikan informasi yang tak terbendung dan tak terkendali. Informasi yang berguna maupun sampah semuanya semakin banyak dan dapat diakses oleh siapa saja. Berdasarkan pendapat para ahli, penulis dapat menyimpulkan internet adalah kumpulan dari jutaan komputer yang terhubung melalui jaringan global untuk membagi informasi secara bersama dengan mencangkup suatu jaringan yang sangat luas.
2.1.4 Web Server
Web server adalah untuk melakukan atau akan mentransfer berkas
permintaan pengguna melalui protokol komunikasi yang telah ditentukan sedemikian rupa. halaman web yang diminta terdiri dari berkas teks, video, gambar, file dan banyak lagi. pemanfaatan web server berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web termasuk yang di dalam berupa teks, video, gambar dan banyak lagi. Menurut Sibero (2013:11) “Web Server adalah sebuah komputer yang terdiri dari perangkat keras dan perangkat lunak”. Sedangkan menurut Supono dan Putratama(2016:6) “Web Serveradalah perangkat lunak server yang berfungsi untuk menerima permintaan dalam bentuk situs web melalui HTTP atau HTTPS dari klien itu, yang dikenal sebagai browser web dan mengirimkan kembali (reaksi) hasil dalam bentuk situs yang biasanya merupakan
10 dokumen HTML.” Dari penjelasan teori diatas, penulis menyimpulkan web server adalah komputer yang digunakan untuk menyimpan dokumen dengan mengakses dan menampilkan halaman web tersebut dari komputer client.
2.1.5 Web Browser
Web Browser adalah suatu program atau software yang digunakan untuk
menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer. Awalnya, web browser berorientasi pada teks dan belum dapat menampilkan gambar. Namun, web browser sekarang tidak hanya menampilkan gambar dan teks saja, tetapi juga memutar file multimedia seperti video dan suara. Menurut Sibero (2013:12) web browser adalah “aplikasi perangkat lunak yang digunakan untuk mengambil dan menyajikan sumber informasi web”.
Sedangkan menurut Kustiyahningsih dan Devie (2013:8)”web browser adalah Software yang digunakan untuk menampilkan informasi dari server web”.
Sejalan dengan teori diatas penulis menyimpulkan web browser adalah sebuah aplikasi atau software yang digunakan untuk menampilkan sumber informasi yang disajikan dari web server.
2.2 Bahasa Pemrograman
Bahasa pemograman merupakan suatu perangkat lunak yang menggunakan bahasa-bahasa pemograman yang digunakan untuk merancang atau membuat program sesuai keinginan dan kegunaan.
11 2.2.1 HTML (Hypertext Markup Language )
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Menurut Bekti (2015:35), “HTML adalah bahasa pemrograman yang digunakan untuk mendesain sebuah halam web”. Sedangkan menurut Elek media komputindo (2016:2), “HTML adalah singkatan dari hypertext markup language bahasa pemrograman ini terdiri dari tag dan aturan-aturan yang memungkinkan anda membuat dokumen hypertext. Halaman web adalah dokumen hypertext”.
Jadi, dapat disimpulkan bahwa HTML adalah bahasa pemograman yang digunakan untuk menulis halaman web dengan metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen.
2.2.2 PHP ( PHP Hypertext Preprocessor )
PHP merupakan singkatan rekursif Hypertext Preprocessor. Definisi dari PHP adalah bahasa pemrograman server-side yang dirancang untuk pengembangan web. Menurut Madcoms (2016:148), ”Php(Hypertext Preprocessor) adalah bahasa script yang dapat ditanamkan atau disisipkan ke dalam HTML. Php adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web”.
12 Sedangkan menurut Sidik (2012:5),PHP adalah kependekan dari PHP: Hypertext Preprocessor (rekursif, mengikut gaya penamaan di *nix), merupakan bahasa utama script server-side yang disisipkan pada HTML yang dijalankan diserver, dan juga bisa digunakan untuk membuat aplikasi dekstop.
Berdasarkan dari pendapat diatas, penulis menyimpulkan PHP adalah bahasa pemograman yang menggunakan script-script secara on the fly untuk membuat dokumen HTML yang dieksekusi di server web untuk membuat aplikasi web yang bersifat dinamis.
2.2.3 Perancangan
Menurut ( Soetam, 2011) Perancangan adalah sebuah proses yang mendefinisikan sesuatu yang akan dikerjakan dengan menggunakan teknik yang bervariasi serta di dalamnya melibatkan deskripsi mengenai arsitektur serta detail komponen dan juga keterbatasan yang akan dialami dalam proses pengerjaannya. Sedangkan menurut Satzinger, Jackson dan Burd (2012 : 5) perancangan sistem adalah sekumpulan aktivitas yang menggambarkan secara rinci bagaimana sistem akan berjalan. Hal itu bertujuan untuk menghasilkan produk perangkat lunak yang sesuai dengan kebutuhan user.
2.3 Basis Data
Data adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Perangkat lunak yang digunakan
13 untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system, DBMS). Sistem basis data dipelajari dalam ilmu informasi. MenurutIndrajani (2015:69), data adalah fakta fakta mentah kemudian dikelola sehingga menghasilkan informasi yang penting bagi sebuah perusahaaan atau organisasi. Sedangkan Menurut Connolly dan Begg (2010:65), basis data adalah sebuah kumpulan data yang secara logis terkait dan dirancang untuk memenuhi suatu kebutuhan informasi dari sebuah organisasi.
Berdasarkan referensi distas maka penulis dapat menyimpulkan basis data adalah sistem komputerisasi yang tujuannya adalah memelihara data yang sudsh diolah yang dapat digambarkan dengan aktivitas dari satu lebih atau oragnisasi yang berelasi dan data tersebut dapat diakses dengan mudah dan tepat saat dibutuhkan.
2.3.1 MySQL
MySQL adalah salah satu jenis database server atau RDBMS(Relation
Database Management System) yang sangat terkenal dan banyak digunakan untuk
membangun aplikasi web yang menggunakan database sebagai sumber dan pengolahan datanya. SQL sebagai bahasa dasar untuk mengakses databasenya sehingga mudah untuk digunakan, kinerja query cepat, dan mencukupi untuk kebutuhan database perusahaan-perusahaan yang berskala kecil sampai menengah,
MySQL juga bersifat open source (tidak berbayar). Menurut Nugroho (2013:26),
“MySQL adalah software atau program Database Server”. Sedangkan SQL adalah bahasa pemrogramannya, bahasa permintaan (query) dalam database server termasuk dalam MySQL itu sendiri. Menurut Buana (2014:2),“MySQL Merupakan
14 database server yang paling sering digunakan dalam pemograman PHP.Sedangkan menurut Raharjo (2015:16),MySQL merupakan software RDBMS (atau server
database) yang dapat mengelola database dengan sangat cepat, dapat menampung
data dalam jumlah sangat besar, dapat diakses oleh banyak user (multi-user), dan dapat melakukan suatu proses secara sinkron atau berbarengan (multi-threaded). Secara umum bahasa SQL dibagi menjadi tiga bagian (Setiawan dalam khairil, dkk 2012:60) yaitu:
1. DDL (Data Definition Language)
Digunakan untuk membangun objek-objek dalam sebuah database seperti tabel. Dengan DDL kita dapat menentukan tata letak baris, definisi kolom , kolom kolom kunci, lokasi file dan strategi penyimpanan.
2. DML (Data Manipulation Language)
Digunakan dalam manipulasi suatu tabel didalam database (menambah, mengedit,mencari dan menghapus). Perintah-perintah DML adalah SELECT,
INSERT, UPDATE dan DELETE.
3. DCL (Data Control Language)
Digunakan untuk menangani masalah kemanan dalam database server, dan hak-hak pada objek-objek database. Perintah-perintah yang dipakai. Berdasarkan teori tersebut dapat disimpulkan bahwa MySQL adalah perangkat lunak jenis database yang digunakan untuk membangun aplikasi web dengan menggunakan perintah
query dan escape character yang sama dengan PHP dan paling terkenal
15 2.4 Model Pengembangan Perangkat Lunak
Sumber: Rosa dan Shalahudin(2015:29) Gambar 2. 1 Metode Waterfall 2.4.1 IIlustrasi model waterfall
1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk didokumentasikan.
2. Desain
Desain perangkat lunak adalah proses multi langkah yang fokus pada desain pembuatan program perangkat lunak termasuk struktur data, arsitek perangkat lunak, representasi antarmuka, dan prosedur pengkodean. Tahap ini mentranslasikan kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain agar dapat diimplementasikan menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasil kan pada tahap ini juga perlu didokumentasikan.
Sistem/Rekaya sa Informasi
16 3. Pembuatan kode program
Desain harus ditranslasikan kedalam program perangkat lunak. Hasil dari tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada tahap desain. 4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir kesalahan(error) dan memastikan keluaran yang dihasilkan dengan yang diinginkan.
5. Pendukung(support) atau pemeliharaan(maintenance)
Tidak menutupi kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah dikirimkan ke user . perubahan bisa terjadi karena adanya kesalaahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
2.5 Sistem Informasi
Sistem informasi adalah kombinasi dari teknologi informasi dan aktivitas orang yang menggunakan teknologi itu untuk mendukung operasi dan manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang sering digunakan merujuk kepada interaksi antara orang, proses algoritmik, data, dan teknologi. Dalam pengertian ini, istilah ini digunakan untuk merujuk tidak hanya pada penggunaan
17 organisasi teknologi informasi dan komunikasi (TIK), tetapi juga untuk cara di mana orang berinteraksi dengan teknologi ini dalam mendukung proses tersebut.
2.5.1 Pengertian Sistem
Perkembangan teknologi informasi yang sangat cepat sudah mempengaruhi berbagai kehidupan dan profesi, hal ini menyebabkan perubahan sistem pada instansi atau perusahaan juga harus mengubah cara kerja. Menurut Romney dan Steinbart (2015:3): Sistem adalah rangkaian dari dua atau lebih komponen-komponen yang saling berhubungan, yang berinteraksi untuk mencapai suatu tujuan.Sebagian besar sistem terdiridari subsistem yang lebih kecil yang mendukung sistem yang lebih besar. Sedangkan menurut Azhar Susanto (2013:22) adalah “Sistem adalah kumpulan/group dari sub sistem/ bagian/ komponen apapun baik phisik atau pun non phisik yang saling berhubungan satu sama lain dan bekerja sama secara harmonis untuk mencapai satu tujuan tertentu.”Secara garis besar, sebuah sistem informasi terdiri atas tiga komponen tersebut mencangkup software,
hardware dan brainware.
Berdasarkan pendapat para ahli diatas dapat disimpulkan sistem adalah kumpulan atau kelompok yang saling berelasi dan berinteraksi, serta didukung oleh tiga komponen yaitu software, hardware dan brainware untuk mencapai tujuan bersama.
18 2.6 Teori Pendukung
Dalam teori pendukung ini membangun perangkat lunak memerlukan beberapa teori pendukung agar pembuatan website ini berjalan dengan baik dan menjadi acuan dan pedoman.
2.7 Software Pendukung
Pada penulisan tugas ini penulis menggunakan beberapa software pendukung. Berikut adalah penjelasan dari masing-masing software pendukung yang digunakan penulis.
2.7.1 PhpMyadmin
Pada umunya PhpMyadmin berfungsi sebagai salah satu aplikasi untuk mengelola database. Menurut Nugroho (2013:71), “phpMyAdmin adalah tools yang dapat digunakan dengan mudah untuk memanajemen database MySQL secara visual dan Server MySQl, sehingga kita tidak perlu lagi harus menulis query SQL setiap akan melakukan perintah operasi database”. Sedangkan menurut Buana (2014:2), “phpMyAdmin adalah salah satu aplikasi yang digunakan untuk memudahkan dalam melakukan pengelolaan database MySQL. phpMyAdmin merupakan aplikasi web yang bersifat opensource.”
Berdasarkan pendapat diatas, penulis menyimpulkan PhpMyadmin adalah program aplikasi yang digunakan untuk membantu pembuatan basisdata(database) yang dibuat oleh phpmyadmin.net.
19 2.7.2 UML (Unified Modeling Language)
Pada umumnya sekumpulan alat yang digunakan untuk melakukan abstraksi terhadap sebuah sistem atau perangkat lunak berbasis objek. Menurut Rosa dan Shalahuddin (2014:133), berpendapat bahwa UML (Unified Modeling Language) adalah “Salah standar bahasa yang banyak digunakan di dunia industri untuk mendefinisikan requerement, membuat analisa & desain, serta menggambarkan arsitektur dalam pemrograman berorintasi objek”. Sedangkan menurut Mulyani (2016:48) mengatakan UML (Unified Modeling Language) adalah “Sebuah teknik pengembangan sistem yang menggunakan bahasa grafis sebagai alat untuk pendokumentasian dan melakukan spesifikasi pada sistem”.
Dari beberapa penjelasan teori tersebut dapat disimpulkan bahwa UML (Unified Modeling Language) adalah terdiri dari diagram-diagram yang merupakan sekumpulan bentuk khusus untuk menggambarkan berbagai diagram piranti lunak. Diagram UML yang digunakan dalam penelitian ini adalah use case dan class diagram.
2.7.3 Use Case Diagram
Menurut Rosa dan M. Shalahudin (2014:155), use case atau diagram use case merupakan pemodelan untuk kelakuan (behavior) sistem informasi yang akan dibuat. Use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem informasi yang akan dibuat. Secara kasar, use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-fungsi itu.
20 Seadangkan menurut Sukamto dan Shalahuddin (2014:155), “Use Case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi-fungsi itu.”
Tabel 2. 1 Use Case Diagram
No Gambar Nama Keterangan
1 Actor Menspesifikasikan himpuan
peran yang pengguna mainkan ketika berinteraksi dengan use
case.
2 Dependency Hubungan dimana perubahan
yang terjadi pada suatu elemen mandiri (independent) akan mempengaruhi elemen yang bergantung padanya elemen
yang tidak mandiri
(independent).
3 Generalization Hubungan dimana objek anak
(descendent) berbagi perilaku dan struktur data dari objek yang ada di atasnya objek induk (ancestor).
4 Include Menspesifikasikan bahwa use
case sumber secara eksplisit.
5 Extend Menspesifikasikan bahwa use
21
6 Association Apa yang menghubungkan
antara objek satu dengan objek lainnya.
7 System Menspesifikasikan paket yang
menampilkan sistem secara terbatas.
8 Use Case Deskripsi dari urutan aksi-aksi
yang ditampilkan sistem yang menghasilkan suatu hasil yang terukur bagi suatu aktor.
9 Collaboration Interaksi aturan-aturan dan
elemen lain yang bekerja sama untuk menyediakan prilaku yang lebih besar dari jumlah dan elemen-elemennya (sinergi).
10 Note Elemen fisik yang eksis saat
aplikasi dijalankan dan mencerminkan suatu sumber daya komputasi.
2.7.4 Activity Diagram
Menurut Sukamto dan Shalahuddin (2014:161), Diagram aktivitas atau
activity diagram menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah
22 menggambarkan aktivitas sistem bukan apa yang dilakukan aktor, jadi aktivitas yang dapat dilakukan oleh sistem.
Tabel 2. 2 Activity Diagram
No Gambar Nama Keterangan
1 Actifity Memperlihatkan bagaimana
masing-masing kelas antarmuka saling berinteraksi satu sama lain.
2 Initial Node Bagaimana objek dibentuk atau
diawali.
3 Actifity Final
Node
Bagaimana objek dibentuk dan dihancurkan.
4 Fork Node Satu aliran yang pada tahap tertentu
berubah menjadi beberapa aliran. 5
Join Digunakan untuk menunjukan
kegiatan yang digabungkan. 6
Fork Digunakan untuk menunjukan
kegiatan yang dilakukan secara pararel.
7 Swimlane Menunjukan siapa yang
bertanggung jawab dalam melakukan aktivitas dalam suatu diagram.
8
Decision Digunakan untuk menggambarkan
suatu keputusan / tindakan yang harus diambil pada kondisi tertentu.
23 2.7.5 Squance Diagram
Menurut Sukamto dan Shalahuddin (2014:165), Sequnce Diagram menggambarkan kelakuan objek pada use case dengan mendeskripsikan waktu hidup objek dan message yang dikirmkan dan diterima antar objek. Oleh karena itu, untuk menggambar sequence diagram harus diketahui objek-objek yang terlibat dalam sebuah use case beserta metode-metode yang dimiliki kelas yang diinstansiasi menjadi objek itu. Membuat sequence diagram juga dibutuhkan untuk melihat skenario yang ada pada use case. Sedangkan menurut Indrajani (2015:50) “Squance diagram merupakan suatu diagram interaksi yang menggambarkan bagaimana objek-objek berpartisipasi dalam bagian interaksi (particular interaction ) dan pesan yang ditukar dalam urutan waktu”.
Tabel 2. 3 Squence Diagram
No Gambar Nama Keterangan
1
LifeLine Objek entity, antarmuka yang saling
berinteraksi.
2 Message Spesifikasi dari komunikasi antar objek
yang memuat informasi-informasi tentang aktifitas yang terjadi.
3 Actor Digunakan untuk menggambarkan User
24
4 Boundary Digunakan untuk menggambarkan
sebuah form.
5 Entity Class Digunakan untuk menggambarkan
hubungan kegiatan yang akan dilakukan.
6 ControlClass Digunakan untuk menghubunkan
boundary dengan tabel.
2.7.6 Class Diagram
Menurut Widodo dan Herlawati (2011:3) menjelaskan, “Class diagram adalah penggamabaran satu set objek yang memiliki atribut dan behavior yang sama.”Menurut Sukamto dan Shalahuddin (2014:141), bahwa Diagram kelas atau
class diagram menggambarkan struktur sistem dari segi pendefinisian kelas-kelas
yang akan dibuat untuk membangun sistem. Kelas memiliki apa yang disebut atribut dan metode atau operasi.
a. Atribut merupakan variable-variabel yang dimiliki oleh suatu kelas. b. Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu kelas.
Pada UML, class diagram sangat membantu dalam visualisasi struktur class dari suatu sistem. Hal ini disebabkan karena class memberikan deskripsi kelompok objek dengan properti, metode, dan relasi. Di samping itu class
25 Tabel 2. 4 Class Diagram
No Gambar Nama Keterangan
1 Generalization Hubungan dimana objek anak
(descendent) berbagi perilaku dan
struktur data dari objek yang ada di atasnya objek induk (ancestor).
2 Class Himpunan dari objek-objek yang
berbagi atribut serta operasi yang sama.
3 Collaboration Deskripsi dari urutan aksi-aksi yang
ditampilkan sistem yang menghasilkan suatu hasil yang terukur bagi suatu aktor.
4 Realization Operasi yang benar-benar dilakukan
oleh suatu objek.
5 Dependency Hubungan dimana perubahan yang
terjadi pada suatu elemen mandiri
(independent) akan mempegaruhi
elemen yang bergantung padanya elemen yang tidak mandiri.
6 Association Apa yang menghubungkan antara objek
26 BAB III
HASIL DAN PEMBAHASAN 3.1 Sejarah Instansi
Bekasi terkenal karena sebagai kota industri di indonesia. Masyarakat dari berbagai daerah di indonesia sering datang ke bekasi untuk bekerja di suatu perusahaan industri. Pencapain kualitas Sumber Daya Manusia (SDM) masyarakat Bekasi juga didukung oleh banyak lembaga pendidikan yang kompeten dan memiliki prestasi. Salah satunya di bidang pendidikan menengah kejuruan, dalam hal ini Sekolah Menengah Kejuruan.
Sesuai dengan arahan dari Direktorat Pembinaan SMK-Kementrian Pendidikan dan Kebudayaan, bahwa lulusa SMK didorong untuk: Bekerja, Menlanjutkan Pendidikan, maupun Wirausaha. Maka salah satu SMK yang berusaha mewujudkannya adalah SMK Al-Islah. Sekolah yang terkenal karena memiliki sejumlah prestasi, memiliki prestise, dan mengalami perkembangan pesat dan tidak melupakan nilai-nilai pendidikan agama.
Sekolah Menengah Kejuruan Al-Islah atau nama ringkasnya SMK Al-Islah, merupakan sebuah Sekolah Menengah Kejuruan yang terletak di kp. Kaliulu, Desa Tanjung Sari, Kecamatan Cikarang Utara, Bekasi.
SMK Al-Islah merupakn Sebuah Institusi formal dibawah naungan Yayasan Perguruan Islam Al-Islah (YAPIS) yang telah berdiri sejak Tahun 1998 dan telah meluluskan angkatan ke 17 pada tahun 2018, serta terakreditasi pada
27 Badan Akreditasi Sekolah (BAS) Provinsi Jawa Barat dengan No.02.00/100/BAS/2001 Kini SMK Al-Islah merupakan Lembaga alternatif bagi Sekolah-sekolah umum lainnya, karena selain Pendidikan umum juga diajarkan Pendidikan Agama, Seperti: Study Islam, Bacaan Al-Qur’an (Qiro’at), Praktek Ibdah serta banyak hal lainnya yang berkaitan dengan keagamaan, dengan harapan para siswa tidak hanya menguasai pelajaran umum dan mengamalkan ajaran Islam secara berkesinambungan, dan untuk memaksimalkan pembelajaran yang komperhenship, kami telah menyiapkan Tenaga Pendidikn terdiri dari S1, S2 sesuai dengan bidangnya masing-masing. Pada awal berdirinya SMK Al-Islah hanya memiliki 1 (Satu) Program Study kejuruan yaitu Pemasaran, Tetapi seiring berkembanya waktu kini SMK Al-Islah memiliki 4 (Empat) Program Study kejuruan yaitu Administrasi Perkantoran, Akuntansi, Pemasaran, Teknik Komputer Jaringan.
28 3.2 Struktur Organisasi Sekolah
Gambar 3. 1 Struktur Organisasi KETUA YAYASAN Drs. H. Agus Edi Susanto M .Pd KEPALA SEKOLAH Rahman Wilson Karo S .E KEPALA TATA USAHA Mustafa S.Kom WAKAUR . KURIKULUM Hj. Kholilah SIP WAKAUR KESISWAAN Nausan Maulana WAKAUR SARANA PRASARANA Dr. Siti Ropiah SH WAKAUR HUB. INDUSTRI Nazarudin S.Kom PEMBINA OSIS Tony Siswanto KAPRODI TEKNIK KOMPUTER JARINGAN Slamet Riyono S.Kom KAPRODI AKUNTANSI Wawan Hermawan SE KAPRODI ADMINISTRASI PERKANTORAN Triyana Riyana Sari Agustiani S. Pd KAPRODI PEMASARAN Sarah Munifah SE PENDIDIK
29 3.3 Analisis Sistem Yang Sedang Berjalan
Berdasarkan hasil observasi dan wawancara yang telah dilakukan di sekolah SMK Al-Islah, penyampaian infomasi sekolah SMK Al-Islah hanya dengan menggunakan papan pengumuman yang ada di depan sekolah dan surat pemberitahuan. Karena dalam pengolahan data informasi sekolah SMK Al-Islah masih secara manual, hal ini membuat penyampaian informasi sekolah belum berjalan secara optimal dengan keterbatasan penyampaian informasi. Dalam hal ini juga penyampaian berita serta kegiatan yang dilakukan oleh sekolah SMK Al-Islah masih belum terpublikasi dengan baik dikarenakan banyak kendala mengenai kearsipan sekolah yang tidak tersimpan dengan baik mengakibatkan data informasi rusak, hilang dan tidak jelas adanya. Kendala yang di hadapi tersebut adalah belum terdapatnya suatu media tempat menampung seluruh informasi atau pun kegiatan-kegiatan yang dilakukan oleh sekolah SMK Al-Islah.
Untuk mendapatkan informasi mengenai sekolah SMK Al-Islah, siswa dan masyrakat bisa melihat melalui papan pengumuman atau secara langsung mendatangi kantor kepala sekolah. Disamping itu kegiatan atau rapat orang tua wali yang akan dilaksanakan oleh sekolah SMK Al-Islah hanya melalui selembaran kertas, karena kurangnya sosialisasi sering kali surat tersebut tidak tersampaikan kepada orang tua wali. Cara seperti ini kurang optimal dan dapat memakan waktu yang lama. Selain itu yang lebih di khawatirkan lagi adalah jika informasi yang tidak sampai pada siswa, bila ini terjadi maka akan merugikan semua pihak yang terkait.
30 3.4 Kelemahan Sistem Lama
1. Dalam pengolahan data informasi sekolah yang masih secara manual sehingga tidak terjamin keamanan datanya sebagaimana mestinya.
2. Siswa dan siswi hanya dapat mengetahui informasi melalui papan pengumumuman yang ada di sekolah SMK Al-Islah.
3. Banyaknya informasi sekolah SMK Al-Islah masih belum terpublikasi dengan baik.
4. Info-info penting ataupun agenda kegiatan yang akan dilaksanakan oleh sekolah SMK Al-Islah belum tersampaikan secara baik dan menyeluruh.
31 3.5 Hasil Analisis
Setelah memahami dan menganalisis serta mengidentifikasi permasalahan di atas maka dapat di simpulkan bahwa perlu adanya website yang dapat mengolah dan menyimpan serta mempublikasikan semua informasi tentang sekolah SMK Al-Islah agar informasi tersebut dapat di kelola dan dapat tersampaikan kepada siswa dan masyarakat, dengan baik serta tepat waktu.
3.6 Hasil Analisa Sistem Baru
Fungsi utama website Sekolah SMK Al-Islah ini antara lain :
1. Memudahkan pengelolaan dan penyebaran informasi mengenai Sekolah SMK Al-Islah.
2. Mempublikasikan kegiatan yang akan dilaksanakan oleh Sekolah SMK Al-Islah.
32 3.6 Skenario Proses Website Sekolah Smk Al-islah
1. Penyedia informasi bisa langsung menginformasikan informasi penting kepada siswa dan siswi.
2. Sistem akan menampilkan informasi mengenai Sekolah SMK Al-Islah. 3. Menampilkan berita / info terbaru serta kegiatan yang akan dilaksanakan oleh
Sekolah SMK Al-Islah.
4. Sistem akan menampilkan link-link atau informasi penting lainnya yang terkait dengan Sekolah SMK Al-Islah dan informasi tentang pendidikan. 5. Siswa dan siswi / masyarakat dapat mengakses web dan melihat informasi
33 3.7 Perancangan Modul
Perancangan modul dari website Sekolah SMK Al-Islah digambarkan sebagai berikut :
34 3.8 Perancangan Menu
35 3.9 Analisis Model Use Case
Analisis di deskripsikan dengan menggunakan Use Case Business Diagram dan Scenario Use Case Business.
3.10 Model Use Case
Model use case menjelaskan mengenai aktor-aktor yang terlibat dengan perangkat lunak yang dibangun beserta proses-proses yang ada didalamnya.
3.10.1 Use Case Diagram
Diagram use case dari webiste Sekolah SMK Al-Islah adalah sebagai berikut :
Gambar 3. 6 Use Case Diagram
uc Use Case Model
Admin Menu dan Profil Prestasi Link Web Tambah Edit Hapus Tambah Edit Hapus User Tambah Edit Hapus Hal.Website Login Info Sekolah Artikel Berita Agenda Tambah Edit Hapus Tambah Edit Hapus Tambah Edit Hapus Tambah edit Hapus
36 3.10.2 Activity Diagram Login Admin
Activity Diagram adalah salah satu cara untuk memodelkan event-event yang
terjadi dalam suatu Use Case. Activity Diagram berikut menggambarkan proses login admin tehadap isi web sebagai berikut:
Gambar 3. 7 Activity Diagram Login Admin act Package1
Admin Memasukan Username & Passw ord
Mulai
Menampilkan Hal. Admin
selesai Cek Validasi
Ya
37 3.10.3 Activity Diagram Menambah Agenda
Activity Diagram adalah salah satu cara untuk memodelkan
event-event yang terjadi dalam suatu Use Case. Activity Diagram berikut menggambarkan proses menambah agenda tehadap isi web sebagai berikut:
Gambar 3. 8 Activity Diagram Menambah Agenda act activ ity diagram menambah agenda
Klik Menu Manaj emen Informasi
Mulai
Admin Masuk Pada Hal. Agenda
Sistem Menampilkan Hal.Agenda
Siste Menampilkan Form Tambah Agenda Admin Klik Tambah
Agenda
Admin Memasukan Judul Agenda
Admin Menentukan Tanggal
Tulis Isi Kegiatan
Pilih Warna Untuk Tanggal Agenda Mengeklik Tombol Simpan Menerbitkan Hal. Selesai Simpan Batal
38 3.10.4 Activity Diagram Menghapus Agenda
Activity Diagram berikut menggambarkan proses menghapus
agenda tehadap isi web sebagai berikut:
Gambar 3. 9 Activity Diagram Menghapus Agenda act activ ity menhapus agenda
mulai
klik menu manaj emen informasi
sistem menampilkan halaman berita
klik hapus
menghapus agenda admin masuk pada halaman berita
39 3.10.5 Activity Diagram Menambah Artikel
Activity Diagram berikut menggambarkan proses menambah artikel
tehadap isi web sebagai berikut:
Gambar 3. 10 Activity Diagram Menambah Artikel
act activ ity menambah artikel
mulai
klik menu manaj emen informasi admin masuk hal. Artikel
Admin klik tambah artikel
sistem menampilkan halaman artikel sistem menampilkan
form tambah artikel
admin memasukan j udul artikel
tulis artikel
memasukkan gambar gambar di crop nama pengirim
mengklik tombol simpan menerbitkan halaman
selesai simpan
40 3.10.6 Activity Diagram Menghapus Artikel
Activity Diagram berikut menggambarkan proses menghapus artikel
tehadap isi web sebagai berikut:
Gambar 3. 11 Activity Diagram Menghapus Artikel
act Activ ity Menghapus Ar...
Mulai
Klik Menu Manaj emen Informasi
Admin Masuk Pada Hal. Artikel Sistem Menampilkan Hal. Artikel Klik Hapus Menghapus Artikel Selesai
41 3.10.7 Activity Diagram Mengubah Artikel
Activity Diagram berikut menggambarkan proses mengubah artikel
tehadap isi web sebagai berikut:
Gambar 3. 12 Activity Diagram Menambah Artikel
act activ ity menambah artikel
mulai
klik menu manaj emen informasi
admin masuk hal. Artikel
klik edit
sistem menampilkan halaman artikel
sistem menampilkan form tambah artikel
edit j udul
edit isi artikel
edit gambar
hapus gambar
edit nama pengirim
mengklik tombol simpan menerbitkan halaman
selesai batal simpan
42 3.10.8 Activity Diagram Menambah Berita
Activity Diagram berikut menggambarkan proses menambah berita
terhadap isi web sebagai berikut:
Gambar 3. 13 Activity Diagram Menambah Berita
act Activ ity Menambah Berita
Klik Menu Manaj emen Info
AdmiN Masuk Pada Hal. Berita
Klik Tambah Berita
Sistem Menampilkan Hal. Berita Menampilkan Form Berita Admin Memasukan Topik Berita
Tulis Isi Berita
Memasukan Gambar
Gambar Di Crop
Klik Tombol Simpan Menerbitkan Hal.
Simpan
Selesai Batal
43 3.10.9 Activity Diagram Menghapus Berita
Activity Diagram berikut menggambarkan proses menghapus berita
tehadap isi web sebagai berikut:
Gambar 3. 14 Activity Diagram Menghapus Berita act Activ ity Menghapus Berita
Klik Menu Manaj emen Informasi
Admin Masuk Pada hal.Berita Sistem Menampilkan Hal.Berita Klik Hapus Menghapus Berita Selesai Mulai
44 3.10.10 Activity Diagram Mengubah Berita
Activity Diagram berikut menggambarkan proses mengubah berita
tehadap isi web sebagai berikut:
Gambar 3. 15 Activity Diagram Mengubah Berita act Activ ity Mengubah Berita
Klik Menu Manaj emen Informasi
Admin Masuk Pada Hal.Berita
Sistem Menampilkan Hal.Berita
Klik Edit
Menampilkan From Edit Berita
Edit Topik
Edit Isi Berita
Edit Gambar
Hapus Gambar
Klik Tombol Simpan Menerbitkan Berita
Simpan Mulai
Batal
45 3.10.11 Activity Diagram Menambah Info Sekolah
Activity Diagram berikut menggambarkan proses menambah info
sekolah terhadap isi web sebagai berikut:
Gambar 3. 16 Activity Diagram Menambah Info Sekolah act Activ ity Menambah Info Sekolah
Klik Menu Manaj emen Informasi
Admin Masuk Pada Hal.Info Sekolah
Sistem Menampilkan Hal.Info Sekolah
Menampilkan From Tambah Informasi Admin Klik Tambah
Informasi
Memasukan Judul
Isi Informasi
Mengklik Tombol
Simpan Menerbitkan Hal.
Simpan Mulai
Batal
46 3.10.12 Activity Diagram Menghapus Info Sekolah
Activity Diagram berikut menggambarkan proses menghapus info
sekolah tehadap isi web sebagai berikut:
Gambar 3. 17 Activity Diagram Menghapus Info Sekolah act Activ ity Menghapus Inf...
Klik Menu Manaj emen Informasi
Admin Masuk Pada Hal.Info Sekolah Sistem Menampilkan Hal.Info Sekolah Klik Hapus Menghapus Info Sekolah Selesai Mulai
47 3.10.13 Activity Diagram Mengubah Info Sekolah
Activity Diagram berikut menggambarkan proses mengubah info sekolah
tehadap isi web sebagai berikut:
Gambar 3. 18 Activity Diagram Mengubah Info Sekolah act Activ ity Mengubah Info Sekolah
Klik Menu Manaj emen Informasi
Admin Masuk Pada Hal.Info Sekolah
Sistem Menampilkan Hal.Info Sekolah
Menampilkan Form Edit Informasi Klik Edit
Edit Judul
Edit Informasi
Mengklik Tombol
Simpan Menerbitkan Hal.
Selesai Simpan
Mulai
48 3.10.14 Activity Diagram Menambah Jurusan/Program
Activity Diagram berikut menggambarkan proses menambah jurusan program keahlian terhadap isi web sebagai berikut:
Gambar 3. 19 Activity Diagram Menambah Jurusan/Program act Activ ity Menambah Jurusan/Program
Klik Menu Manaj emen Profil
Admin Masuk Pada Hal.Jurusan/Prog Sistem Menampilkan Hal.Jurusan/Prog Sistem Menampilkan From Tambah Jurusan/Prog Admin Klik Tambah
Jurusan/Prog
Admin Memasukan Jurusan/Prog.Keahlian
Mengklik Tombol
Simpan Menerbitkan Hal.
Selesai Simpan
Mulai
49 3.10.15 Activity Diagram Menghapus Jurusan/Program
Activity Diagram berikut menggambarkan proses menghapus jurusan program keahlian terhadap isi web sebagai berikut:
Gambar 3. 20 Activity Diagram Menghapus Jurusan/Program act Activ ity Menghapus Ju...
Klik Menu Manaj emen Profil
Admin Masuk Pada Hal.Jurusan/Prog Sistem Menampilkan Hal.Jurusan/Prog Klik Hapus Menghapus Jurusan/Prog
50 3.10.16 Activity Diagram Mengubah Jurusan/Program
Activity Diagram berikut menggambarkan proses mengubah jurusan program keahlian terhadap isi web sebagai berikut:
Gambar 3. 21 Activity Diagram Mengubah Jurusan/Program act Activ ity Mengubah Jurusan/Program
Klik Menu Manaj emen Profil
Admin Masuk Pada Hal.Jurusan/Prog
Sistem Menampilkan Hal.Jurusan/Prog
Menampilkan From Edit Jurusan/Prog Klik Edit
Edit Jurusan/Prog
Mengklik Tombol
Simpan Menerbitkan Hal.
Selesai Mulai
Simpan
51 3.10.17 Activity Diagram Menambah Direktori Siswa
Activity Diagram berikut menggambarkan proses menambah direktori siswa terhadap isi web sebagai berikut:
Gambar 3. 22 Activity Diagram Menambah Direktori Siswa act Activ ity Menambah Direktori Sisw a
Klik Menu Manaj emen Data Sisw a Admin Masuk Pada
Hal.Direktori Sisw a
Sistem Menampilkan Hal.Sisw a Sistem Menampilkan
From Tambah Sisw a Admin Klik Tambah
Sisw a Admin Memasukan Nama Memasukan NIS Memasukan Kelas Jenis Kelamin Tempat Lahir Tgl Lahir Alamat Sisw a Telp. Agama STTB NEM Wali File Foto Mengklik Tombol
Simpan Menerbitkan Hal. Simpan
Selesai Batal
52 3.10.18 Activity Diagram Menghapus Direktori Siswa
Activity Diagram berikut menggambarkan proses menghapus direktori siswa terhadap isi web sebagai berikut:
Gambar 3. 23 Activity Diagram Menghapus Direktori Siswa act Activ ity Menghapus Dire...
Klik Menu Manaj emen Data Sisw a
Admin Masuk Pada Ha.Direktori Sisw a Sistem Menampilkan Hal.Sisw a Klik Hapus Menghapus Sisw a Mulai Selesai
53 3.10.19 Activity Diagram Mengubah Direktori Siswa
Activity Diagram berikut menggambarkan proses mengubah direktori siswa terhadap isi web sebagai berikut:
Gambar 3. 24 Activity Diagram Mengubah Direktori Siswa act Activ ity Mengubah Direktori Sisw a
Klik Menu Manaj emen Data Sisw a Admin Masuk Pada Hal.Direktori Sisw a
Sistem Menampilkan Hal.Sisw a Sistem Menampilkan
From Edit Sisw a Admin Klik Edit Sisw a
Edit Nama Edit NIS Edit Kelas Edit Jenis Kelamin
Edit Tempat Lahir Edit Tgl Lahir Edit Alamat Sisw a
Edit Telp. Edit Agama Edit STTB Edit NEM Edit Wali File Foto Mengklik Tombol
Simpan Menerbitkan Hal.
Selesai Mulai
Simpan
54 3.10.20 Activity Diagram Akses Link
Activity Diagram berikut menggambarkan proses akses link
terhadap isi web sebagai berikut:
Gambar 3. 25 Activity Diagram Akses Link act Activ ity Akses Link
User Mencari Link Pada Hal.Website
User Mengklik Link Yang Ingin Dibuka
Sistem Menampilkan Link
Selesai Mulai
55 3.10.21 Class Diagram
Class diagram adalah diagram yang digunakan untuk menampilkan
beberapa kelas yang ada dalam sistem perangkat lunak yang akan dikembangkan. Class Diagram menunjukkan hubungan antar class dalam sistem yang sedang dibangun dan bagaimana mereka saling berkolaborasi untuk mencapai suatu tujuan. Berikut ini digambarkan class diagram dari Website Sekolah SMK Al-Islah:
Gambar 3. 26 Class Diagram
class class d Prestasi - filegambar: String - judul: String - ket: String + addprestasi() + deleteprestasi() + displayfoms() + editprestasi() + exit() + getfoms() Link Web - alamat: String - jenis: String - ket: String + addlink() + deletelink() + displayfoms() + editlink() + exit() + getfoms() Artikel - gambar: String - isiartikel: String - judulartikel: String - pengirim: String + addartikel() + deleteartikel() + displayfoms() + editartikel() + exit() + getfoms() Info Sekolah - isiinfo: String - judulinfo: String + deleteinfo() + displayfoms() + editinfo() + editinfo() + exit() + getfoms() Menu Login - password: String - username: String + <<get>>getdisplay() + <<get>>getfoms() + <<get>>inputdata() + exit() + login() Agenda - Isiagenda: String - Judulagenda: String - Tglagenda: String - Warnatgl: String + Deleteagenda() + Displayfoms() + Editagenda() + Editagenda() + Exit() + Getfoms() Berita - gambar: String - isiberita: String - topikberita: String + addberita() + deleteberita() + displayfoms() + editberita() + exit() + getfoms() Galeri Photo - judulalbum: String - tanggal: String + addphoto() + deletephoto() + displayfoms() + editphoto() + exit() + getfoms() Jej ak Pendapat - jawab: String - pertanyaan: String + addpendapat() + deletependapat() + displayfoms() + editpendapat() + exit() + getfoms() Gambar Atas - filegambar: String - jenisfile: String - judul: String + addgambar() + deletegambar() + displayfoms() + editgambar() + exit() + getfoms() Banner - alamatURL: int - filegambar: int - ket: int - posisi: int + addbanner() + deletebanner() + displayfoms() + editbanner() + exit() + getfoms()
Menu Dan Profil - isi: String - judul: String - link: String - menuutama: String - tampilkan: String - urut: String + addmenu() + deletemenu() + displayfoms() + editmenu() + exit() + getfoms() Menu Admin - Agenda: String - Artikel: String - Banner: String - Berita: String - Galeri Photp: String - Gambar Atas: String - Info Sekolah: String - Jejak Pendapat: String - Kategori Link: String - Link Web: String - Menu & Profil: String - Prestasi: String + Close() + Displayfoms() + Exit()
56 3.10.22 Sequence Diagram
Sequence Diagram adalah suatu diagram yang menggambarkan interaksi
antar obyek dan mengindikasikan komunikasi diantara obyek-obyek tersebut. berikut Sequence Diagram pada website Sekolah SMK Al-Islah:
3.10.23 Sequence Diagram Login
57 3.10.24 Sequence Diagram Tambah Agenda
Gambar 3. 28 Sequence Diagram Tambah Agenda 3.10.25 Sequence Diagram Edit Agenda
Gambar 3. 29 Sequence Diagram Edit Gambar
sd Sequence Tambah Agenda
Admin
Layar Agenda Tabel Aenda
Exit()
Data Disimpan() Mengisi From Agenda()
Masuk Ke Agenda()
Data Agenda T ersimpan() Klik T ombol T ambah Agenda()
Menampilkan From Agenda()
Menampilkan From T ambah Agenda()
sd Sequence Edit Agenda
Admin
Layar Agenda Tabel Agenda
Klik Edit()
Perubahan DiSimpan() Mengedit Informasi()
Masuk KeAgenda() Menampilkan Form Agenda()
Perubahan DiSimpan() Menampilkan Form Edit()
58 3.10.26 Sequence Diagram Hapus Agenda
Gambar 3. 30 Sequence Diagram Hapus Agenda 3.10.27 Sequence Diagram Tamabah Berita
Gambar 3. 31 Sequence Diagram Tambah Berita sd Sequence Hapus Agenda
Admin
Layar Agenda Tabel Agenda
Data Agenda Terhapus() Menampilkan Form Agenda()
Masuk KeAgenda()
Klik Hapus() Pilih Agenda()
Agenda DiHapus()
sd Sequence Tambah Berita
Admin
Layar Berita Tabel Berita
Masuk Keberita()
Data Berita Tersimpan() Menampilkan Form Tambah Berita()
Menampilkan Form Berita()
Exit()
Data Disimpan() Mengisi Form Berita()
59 3.10.28 Sequence Diagram Edit Berita
Gambar 3. 32 Sequence Diagram Edit Berita 3.10.29 Sequence Diagram Hapus Berita
Gambar 3. 33 Sequence Diagram Hapus Berita sd Sequence Edit Berita
Admin
Layar Berita Tabel Berita
Perubahan DiSimpan() Perubahan Tersimpan()
Klik Edit() Menampilkan Form Berita()
Masuk KeBerita()
Mengedit Informasi() Pilih Berita() Menampilkan Form Edit()
sd Sequence Hapus Berita
Admin
Layar Berita Tabel Berita
Pilih Berita()
Data Berita Terhapus() Menampilkan Form Berita()
Masuk KeBerita()
Klik Hapus()
