Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

1

PERANCANGAN SISTEM INFORMASI UKM STMIK KOMPUTAMA

MAJENANG BERBASIS WEB

Diky Setiawan(1); Amarulloh Miftahul Khoeri(2); Henky Fajar Syafani(3); Ristianingsih(4); Raden Bagus

Bambang Sumantri(5)

* dikysetiawan773@gmail.com (1);krilinamar@gmail.com(2);hengkyfajar48@gmail.com(3);

ristianingsih613@gmail.com(4); bagussumantri@stmikkomputama.ac.id(5)

(1) (2) (3)(4)(5) Teknik Informatika STMIK Komputama Majenang

Abstract

Student activity unit (UKM) STMIK KOMPUTAMA MAJENANG is a student organization

outside the classroom that is engaged in various fields, such as Wanacetta, Racana Pramuka, Sports,

Web Programing, etc. Information dissemination to UKM itself is not yet fully effective, it needs

information media to publish information related to UKM. Among other things, to find out information

related to the field of UKM, participate in UKM, and can also participate in managing UKM

management. Therefore, this system was created to help students and lecturers to get information about

UKM and facilitate data management that can be accessed via a Web browser. This information system

was created using the Waterfall method, Boostrap Framework, Html, Css, PHP programming language

and MYSQL database. This system is still in the form of a design or prototype that has not been fully

completed, it is still in the development process. So that there is still a need for further processes in

completing the Prototype of this System both from Design, Content of the website, Testing, and also

maintenance.

Keywords: information media; Waterfall method; Boostrap Framework; Design

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

22

Latar Belakang

Pengetahuan dalam sistem informasi sangatlah penting pada suatu organisasi, karena dengan

pemahaman serta implementasi yang baik terhadap suatu sistem informasi akan berdampak

positif bagi organisasi tersebut dalam hal eksistensi, berdaya saing dan berhasil menggapai

tujuan dengan baik.

Pemahaman terhadap sistem informasi dan teknologi diperlukan bagi perusahaan, instansi

maupun organisasi dalam penyebaran media informasi, karena pentingnya peranan informasi

mendorong suatu organisasi untuk membangun sistem informasi yang tepat untuk membantu

pihak-pihak agar mendapatkan informasi yang dibutuhkan dari organisasi tersebut. Contoh

pemanfaatan teknologi informasi suatu organisasi yaitu organisasi kemahasiswaan yang juga

sering disebut Unit Kegiatan Mahasiswa (UKM).

Stmik Komputama Majenang memiliki beberapa jenis UKM sebagai sarana bagi mahasiswa untuk mengembangkan bakat, minat dan kreatifitas. Sarana tersebut memfasilitasi berbagai

bidang kegiatan diantaranya kesenian, keagamaan, olahraga dan sosial. Beberapa UKM yang ada

di Stmik Komputama Majenang berada dibawah koordinasi kepala bagian kemahasiswaan yang

bertanggung jawab langsung kepada Wakil Ketua III Stmik Komputama Majenang.

Adapun jenis-jenis UKM tersebut yaitu :

1. Olahraga 2. Wanacetta

3. Racana Pramuka

4. Web Programing

5. Jurnalistik

6. Seni dan Budaya

7. Robotik

Web merupakan kumpulan halaman web yang saling berkaitan. Web adalah sebuah sistem

yang berisi beragam informasi baik berupa teks, gambar, audio maupun video dan dapat diakses

melalui perangkat yang biasa disebut web browser. Web merupakan kumpulan informasi baik

yang bersifat statis maupun dinamis yang terdiri dari halaman yang dibuat.

Web Dinamis adalah sebuah halaman situs web menyimpan dan memiliki isi yang

dihasilkan secara dinamis berdasarkan permintaan dari pengguna web tersebut. Proses yang

terjadi pada web dinamis yaitu halaman diciptakan pada sisi server dengan kode program khusus

yang tidak bisa dilihat oleh pengguna. Sebagian besar sumber daya atau informasi dalam web

dinamis terletak di basis data (Herlambang: 2014).

Perancangan dan pengembangan web dapat dilakukan sebagai media informasi dari kegiatan Mahasiswa. Dengan adanya website, dapat memudahkan dalam menampilkan kegiatan

dari mahasiswa dan mempublikasikannya ke public. Perancangan dan pembangunan web dapat

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

23

dilakukan dengan banyak metode, salah satunya yaitu metode air terjun (waterfall) sering juga disebut model sekuensial linier (sequential linear) atau alur hidup klasik (classic life cycle)

(Dermawan: 2017).

Tujuan dari rancangan Web ini yaitu menghasilkan sebuah prototype yang dapat digunakan

untuk mempermudah dalam mengakses informasi kegiatan mahasiswa karena belum adanya web

untuk Organisasi di kampus, sebagai wadah dari UKM, dan publikasi dari organisasi.

Menurut Hutahaean (2015:13) mengemukakan bahwa: Sistem informasi adalah suatu sistem di

dalam suatu organisasi yang mempertemukan kebutuhan pengelolaan transaksi harian,

mendukung operasi, bersifat manajerial, dan kegiatan strategi dari suatu organisasi dan

menyediakan pihak luar tertentu dengan laporan-laporan yang dibutuhkan. Adapun Menurut

Lucas dalam Djahir dan Pratita (2015:14) mengemukakan bahwa “sistem informasi adalah suatu

kegiatan dari prosedur-prosedur yang diorganisasikan, bila mana dieksekusi akan menyediakan

informasi untuk mendukung pengambilan keputusan dan pengendalian di dalam organisasi”.

Metodeologi Metode yang di gunakan yaitu metode WaterFall atau bisa juga di sebut dengan metode

air terjun, yang merupakan salah satu metode dalam SDLC (Software Development Life Cycle)

yaitu model air terjun (Waterfall) yang dimulai dengan tahapan analisis, desain, pengodean dan

pengujian.

Model Waterfall

Model waterfall adalah paradigma perangkat lunak tertua dan sering digunakan dalam perancangan dan pembangunan perangkat lunak, di mana merekomendasikan model sistematis

dengan pendekatan sekuensial terhadap pengembangan perangkat lunak. Model waterfall terdiri

dari beberapa tahap yaitu analisis kebutuhan sistem, perancangan perangkat lunak, implementasi

perangkat lunak, pengujian perangkat lunak dan pemeliharaan perangkat lunak.

Ilustrasi Model Waterfall Adapun metode air terjun menurut Sukamto dan Shalahuddin

(2015:29) yaitu:

1. Analisis Kebutuhan Proses pengumpulan kebutuhan dilakukan secara insentif 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.

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

24

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain

pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat

lunak, representasi antarmuka, dan prosedur pengkodean. Tahap ini mentranslasi

kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain

agar dapat diimplementasikan menjadi program pada tahap selanjutnya. Desain

perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

Sistem/Rekayasa Informasi Analisis Desain Pengodean Pengujian.

3. Pembuatan Kode

Program Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil

dari tahap ini adalah program komputer sesuai dengan desain yang telah dibuat

pada tahap desain.

4. Pengujian

Pengujian fokus pada perangkat lunak secar adari segi logic dan fungsional serta

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai

dengan yang diinginkan.

5. Pendukung (support) atau Pemeliharaan (maintenance) Tidak menutup

kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah

dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan 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.

HTML

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang

dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi

seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript.

Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan

struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan

dokumen.

CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa

pemograman. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks,

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

25

warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar

paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah

bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS

memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda

Menurut Jayan (2010:2) mengemukakan bahwa “CSS merupakan singkatan dari Cascading Style

Sheet. Kegunaannya adalah untuk mengatur tampilan dokumen HTML, contohnya seperti

pengaturan jarak antar baris, teks, warna dan format border bahkan penampilan file gambar.”

ERD

Entity Relationship Diagram (ERD) juga dikenal ER Diagram atau ER model, adalah jenis

diagram struktural yang digunakan dalam desain basis data. ERD berisi simbol dan konektor

berbeda yang memvisualisasikan dua informasi penting: Entitas utama dalam cakupan sistem,

dan hubungan antar entitas-entitas utama (Visual Diagram: 2020).

FRAMEWORK

Framework adalah sebuah kerangka program yang digunakan untuk membantu developer

untuk mengembangkan kode secara konsisten. Dengan adanya framework developer bisa

mengurangi jumlah bug pada aplikasi yang dibuat. Karena, fungsi dan variabel yang sudah tersedia di dalam komponen framework. Framework yang di pakai dalam perancangan ini yaitu

boostrap, lebih tepatnya merupakan boostrap 4.

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs

web dan aplikasi web. Kerangka kerja ini berisi templat desain

berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka

lainnya, serta juga ekstensi opsional JavaScript. Tidak seperti kebanyakan kerangka kerja web

lainnya, kerangka kerja ini hanya fokus pada pengembangan front-end saja.

MY SQL

Menurut Arief (2011e:151) MySQL (My Structure Query Languange) adalah “salah satu

jenis database server yang sangat terkenal dan banyak digunakan untuk membangun aplikasi web

yang menggunakan database sebagai sumber dan pengelolaan datanya”. Mysql bersifat open

source dan menggunakan SQL (Structured Query Languange). MySQL biasa dijalankan

diberbagai platform misalnya windows Linux, dan lain sebagainya.

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

26

PHP Menurut Arief (2011c:43) PHP adalah Bahasa server side scripting yang menyatu dengan

HTML untuk membuat halaman web yang dinamis. Karena PHP merupakan server-side-

scripting maka sintaks dan perintah-perintah PHP akan diesksekusi diserver kemudian hasilnya

akan dikirimkan ke browser dengan format HTML.

Hasil dan pembahasan

Hasil penelitian ini merupakan sistem informasi UKM berbasis web yang dapat

digunakan dalam penyebaran informasi dan pengelolaan data pada Unit Kegiatan Mahasiswa.

Sistem informasi ini dikembangkan menggunakan bahasa pemrograman PHP dan MySQL

sebagai database.

1. Analisis Kebutuhan

Dalam melakukan perancangan dan pembangunan web ada beberapa tipe pengguna

dengan kemampuan akses yang berbeda, sebagai berikut:

1) Admin

a. Dapat mengolah data pengguna, artikel, dan laporan artikel.

2) Mahasiswa dan pengunjung

a) Mahasiswa dapat melihat dan dapat mengikuti Ukm pada form pendaftaran yang

sudah tersedia.

b) Mahasiswa & pengunjung dapat memberi saran dan kritik pada website.

3) Pengunjung tidak terdaftar

a. Melihat dan mencari artikel.

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

27

ID.Psn Nama Prodi Semester Pesan

ID.Pdftrn Nama Prodi Semester UKM

Ambil

Pendaftaran

Admin

Fedback

Use Case Diagram

Sistem informasi ini menggunakan Rancangan basis data Use Case Diagram yang di tampilkan Sebagai berikut :

Gambar 1. ERD UKM

Username

Pass

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

28

2. Desain Lay Out

1. Halaman Awal

Gambar 2.Halaman Awal

2. Halaman Awal Tengah

Halaman ini berisi dengan tentang dan berita atau pun pengumuman terbaru dari

website.

Gambar 3.Halaman Awal tengah

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

29

3. Halaman Awal Bawah

Berisi Foto Gallery dari kegiatan Mahasiswa dan form untuk memasukan kritik

dan saran.

Gambar 4.Halaman Awal bawah

4. Halaman Form Pendaftaran

Halaman ini berisi tentang data dari mahasiswa yang akan melakukan pendaftaran

untuk mengikuti UKM yang ada.

Gambar 5.Halaman Form Pendaftaran

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

30

5. Halaman Salah Satu UKM

Gambar 6.Halaman Contoh Ukm

6. Halaman Kritik dan Saran

Halaman ini berisi tentang kritik dan saran yang ingin disampaikan pengunjung

tentang layanan dan kepuasan dari Mahasiswa dan pengunjung terhadap Website

Sistem Informasi UKM.

Gambar 7.Halaman Kritik dan saran

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

31

3. Pembuatan Kode

Pembuatan kode dilakukan menggunakan lembar kerja atau framework, yaitu Boostrap

4. Pembuatan kode menggunakan Boostrap 4, Html, dan juga Css, Serta menggunakan

Bahasa Pemograman PHP.

4. Pengujian

Pengujian dilakukan dengan melakukan implementasi langsung pada web, tetapi

belum dilakukan hosting sebab web ini masih berupa rancangan / Prototype yang belum jadi

seutuhnya, Serta masih dalam proses pengembangan.

5. Pendukung

Situs web Tanduran Ilmu dibuat menggunakan PHP versi 7.4.12 yang masih di

dukung oleh www.php.net.

Kesimpulan

Dari perancangan sistem informasi UKM Stmik Komputama Majenang berbasis web

dapat di simpulkan sebagai berikut :

1. Sistem ini ditujukan untuk menjadi sumber informasi bagi unit kegiatan mahasiswa.

2. Sistem dapat membantu dalam menyediakan informasi, menyeleksi proposal dan laporan serta dalam pengelolaan penyimpanan data mengenai kegiatan mahasiswa.

3. Sistem informasi UKM Stmik Komputama Majenang berbasis web dibuat dengan bahasa PHP, menggunakan Framework boostrap 4, serta Database MySql.

4. Sistem yang dirancang masih berbentuk Prototype yakni belum sepenuhya selesai, dan masih dalam proses pengembangan.

Saran

Sistem Informasi UKM berbasis web ini masih berbentuk Prototype. Semoga bisa di

selesaikan dalam proses pengembangannya, dan Diharapkan dengan sistem informasi ini dapat mempermudah unit kegiatan mahasiswa dan pengelola lainnya dalam pengurusan UKM

mahasiswa di STMIK KOMPUTAMA MAJENANG dapat berjalan lebih efektif dan efisien.

Jurnal Teknologi dan Bisnis Vol. 3, No.1, Page: 22 – 32, Year : 2021

32

Refrensi

Al Haris, F. H. S., Anwariningsih, S. H., & Barid, A. J. (2018). PEMODELAN APLIKASI UNIT KEGIATAN MAHASISWA (UKM) UNIVERSITAS SAHID SURAKARTA. JURNAL GAUNG

INFORMATIKA, 8(2).

Asri, S. A., Bawa, I. G. N. B. C., & Suhendar, F. R. (2017). Sistem Informasi Pengelolaan

Kegiatan UKM Berbasis Web di Lingkungan Politeknik Negeri Bali. Logic: Jurnal Rancang

Bangun dan Teknologi, 16(2), 112.

Graha, S., Saputra, W. A., & Nugroho, A. S. B. (2019). Rancang Bangun Sistem Informasi UKM

Shorinji Kempo Di Politeknik Negeri Banjarmasin. Poros Teknik, 11(2), 94-103.

Jonathan, W., & Lestari, S. (2015). Sistem informasi UKM berbasis website pada desa Sumber Jaya. Jurnal Teknologi Informasi dan Bisnis Pengabdian Masyarakat Darmajaya, 1(1), 1-16.

Nugroho, A. (2015). Perancangan Sistem Informasi Pengelolaan Aset Ukm (Unit Kegiatan

Mahasiswa) STMIK STIKOM Bali Berbasis Client Server. Proceedings Konferensi Nasional

Sistem dan Informatika (KNS&I).

Pramitasari, B., & Nurgiyatna, N. (2019). Sistem Informasi Unit Kegiatan Mahasiswa

Universitas Muhammadiyah Surakarata Berbasis Web. Emitor: Jurnal Teknik Elektro, 19(2), 59-

65.

Sadewa, I., & Siahaan, K. (2016). Analisis dan Perancangan Sistem Informasi Unit Kegiatan

Mahasiswa (UKM) Berbasis Web pada Universitas Batanghari. Jurnal Manajemen Sistem

Informasi, 1(2), 135-146.

Sauri, S., Haryono, A. T., Astuti, I. F., Khairina, D. M., & Cahyadi, D. (2015). Sistem Informasi

Unit Kegiatan Mahasiswa (UKM) Sepakbola Universitas Mulawarman Berbasis

Web. Informatika Mulawarman: Jurnal Ilmiah Ilmu Komputer, 10(2), 46.

Setiawan, R., & Mulyani, A. (2017). Rancang Bangun Sistem Informasi Unit Kegiatan

Mahasiswa Seni Dan Budaya Sekolah Tinggi Teknologi Garut. Jurnal Algoritma, 14(2), 350-

357.

Wildaningsih, W., & Yulianeu, A. (2019). Sistem Informasi Pengolahan Data Anggota Unit

Kegiatan Mahasiswa (UKM) Zaradika STMIK DCI Tasikmalaya. Jurnal Manajemen dan Teknik

Informatika (JUMANTAKA), 2(1).

Yusuf, M., & Mulyono, H. (2018). Analisis dan Perancangan Sistem Informasi Promosi Berbasis

Web Pada Asosiasi UMKM Muaro Jambi. Jurnal Manajemen Sistem Informasi, 3(1), 1-11.