gambar/jurnal - Program Studi SMKN 2 PBM

PENGEMBANGAN WEBSITE YAYASAN PENDIDIKAN PRABUMULIH DENGAN
MENGGUNAKAN FRAMEWORK CODEIGNITER DAN BOOTSTRAP
JEPRI YANDI (201221047)
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
(STMIK) PRABUMULIH
2016
JURUSAN SISTEM INFORMASI
teknologi informasi berbasis website. Salah
ABSTRAK
SKRIPSI ini dibuat sebagai salah satu
syarat dalam memperoleh Gelar Sarjana
Strata 1 pada Sekolah Tinggi Manajemen
Informatika
Komputer
(STMIK)
Prabumulih. Dalam Skripsi ini penulis
memberikan
Judul
“Pengembangan
Website Yayasan Pendidikan Prabumulih
dengan Framework CodeIgniter dan
Bootstrap”. Skripsi ini berkaitan dengan
Pengembangan website dangan tampilan
yang responsive dan pendataan alumni
pada Yayasan Pendidikan Prabumulih.
Pengumpulan data untuk Skripsiini
dilakukan pada Yayasan Pendidikan
Prabumulih. Penulis membuat Skripsi ini
dengan tujuan untuk membuat tampilan
website
menjadi
responsive
dan
penambahan halaman pendataan alumni
pada
website
Yayasan
Pendidikan
Prabumulih.
satu
teknologi
informasi
yang
sering
Key word : Bootstrap, Pengembangan
website, Code Igniter
skala kecil hingga besar. Adanya fasilitas
dibicarakan akhir-akhir ini adalah jaringan
komunikasi global yang dikenal dengan
sebutan Internet. Internet merupakan sarana
yang mampu menghubungkan pengguna
(user) di berbagai tempat di dunia sehingga
seakan-akan tidak ada jarak antara para
pengguna tersebut.
Keberadaan
Internet
saat
ini
memberikan keuntungan secara langsung
maupun tidak langsung kepada dunia bisnis,
pendidikan, komunitas dan banyak lagi dari
dalam internet memungkinkan data-data
bisa disimpan, diambil dan dikirimkan
1.
PENDAHULUAN
secara mudah keseluruh penjuru dunia
Perkembangan
teknologi
informasi
dengan berbagai cara, data dan informasi
berjalan
dengan
pesat.
Mulai
dari
yang ada dapat dihubungkan dengan mudah
penyampaian
informasi
secara
nondan cepat hanya dengan menggunakan
elektronik hingga sekarang menggunakan
hyperlinks ( penghubung virtual ). Internet
juga dapat mempermudah penyampaian
untuk diperbarui. Permasalahan ini dapat
informasi, salah satu contoh penyampaian
ditanggulangi dengan suatu metode yang
informasi adalah melalui situs atau website.
sedang
Website merupakan salah satu
berkembang
pemrograman.
Salah
yaitu
sistem
satunya
dengan
alternatif penyampaian informasi kepada
Framework PHP yang bernama Code
user.
Igniter dan Bootstrap.
Dengan
adanya
website
maka
penyampaian informasi akan menjadi cepat
Framework Code Igniter dan bootstrap
dan efisien. Pada perguruan tinggi tentunya
adalah salah satu bahasa pemrograman
website sangat diperlukan, dengan adanya
yang
website maka akan membantu mahasiswa
pengembangan
mendapatkan informasi seputar kampus
tampilan yang dinamis dan responsive.
secara cepat dan efisien.
Responsive
Yayasan
Pendidikan
dapat
mempermudah
sebuah
adalah
dalam
website
dimana
dengan
tampilan
Prabumulih
halaman website akan support di berbagai
merupakan Perguruan Tinggi pertama di
macam platform ( perangkat). Dengan
kota
tampilan yang responsive akan membuat
Prabumulih.
Saat
ini
Yayasan
pendidikan Prabumulih sudah memiliki
tampilan website akan lebih elegan.
sistem informasi berbasis website sehingga
memudahkan para mahasiswanya untuk
2. LANDASAN TEORI
2.1 PENGEMBANGAN
Menurut Sells dan Richey ( Alim Sumarno,
memdapatkan informasi terbaru seputar
2012 : 22) pengembangan berarti proses
kampus. Namun website tersebut masih
menterjemahkan
membutuhkan
pengembangan.
atau
menjabarkan
Karena
spesifikasi rancangan kedalam bentuk fitur
tampilan halaman website belum responsive
fisik.
serta belum adanya pendataan alumni pada
website tersebut. Pengolahan data alumni
2.2 WEBSITE
yang masih menggunakan cara dokumen
Menurut Arief (2011 : 72) Website adalah
cetak,
suatu sistem yang berisikan dokumen-
mengakibatkan pengolahan data
belum dapat dilakukan dengan cepat dan
dokumen
multimedia
masih sering terjadi kesalahan serta sulit
animasi,
video)
(teks,
didalamnya
gambar,
yang
menggunakan protokol HTTP (Hypertext
yang dapat
membuat
layout
halaman
Transfer Protocol) dan untuk mengakses
website, tabel, tombol, form, navigasi, dan
menggunakan perangkat lunak yang disebut
komponen lainnya dalam sebuah website
browser
hanya dengan memanggil fungsi CSS
(class) dalam berkas HTML yang telah
2.3 FRAMEWORK
didefinisikan. Selain itu juga terdapat
Menurut Siena (2010:13) Framework yaitu
komponen-komponen
lainnya
yang
kerangka kerja, dapat di artikan sebagai
dibangun menggunakan JavaScript. Sumber
kumpulan dari library (Class) yang bisa
: http://wikipedia.org (2011)
diturunkan, atau bisa langsung dipakai
fungsi nya oleh modul-modul atau fungsi
yang akan dikembangkan.
2.6 PHP (PERSONAL HOME PAGE)
Menurut Lenawati (2010:36) Pemrograman
web berbasis server side telah berkembang
2.4 FRAMEWORK CODE IGNITER
sangat pesat. Kebutuhan akan kecepatan,
Menurut Siena (2010:14) Code Igniter
integitas dan keamanan informasi menjadi
adalah sebuah framework PHP yang dapat
parameter penentu suatu perangkat lunak
mempercepat pengembang untuk membuat
yang akan digunakan. Personal Home Page
sebuah aplikasi website. dilengkapi banyak
(PHP)
library
dan
helper
yang
berguna
merupakan
bahasa
skrip
yang
di
digunakan untuk membuat halaman web
dalamnya dan tentunya
mempermudah
yang dinamis. PHP bersifat open source
proses development.
product. Pengguna dapat mengubah source
code
2.5 BOOTSTRAP
Boostrap adalah sebuah alat bantu untuk
ddan
mendistribusikannya
secara
bebas serta diedarkan secara gratis.
membuat sebuah tampilan halaman website
yang
dapat
seorang
pendesain
mempercepat
pengembang
halaman
pekerjaaan
website
website.
ataupun
bootstrap
dibangun dengan teknolgi HTML dan CSS
2.7 MYSQL
Menurut
Lenawati
(2010:39)
MySQL
merupakan Data Base Management System
(DBMS) yang bersifat open source. MySQL
memiliki bagian berupa Structured Query
Language (SQL) yang digunakan untuk
tahun 1999 tanggal 12 November 1999.
mengolah
relasional
Pada tahun 2000 didirikanlah 3 sekolah di
yang ada didalamnya. Sejak dahulu MySQL
Yayasan Pendidikan Prabumulih yaitu :
merupakan pasangan serasi PHP dalam
Sekolah Tinggi Ilmu Ekonomi (STIE),
pembuatan web yang dinamis dan dikenal
Sekolah Tinggi Manajemen Informatikan
sebagai database yang pertama kali.
dan Komputer (STMIK), dan Sekolah
database-database
Tinggi Ilmu Teknik (STIT).
Program studi yang terdapat pada
2.8 SUBLIME TEXT
Menurut Eric Hauge (2013:32) Sublime
Text merupakan program text editor yang
biasa digunakan untuk membuat web.
Program
ini
banyak
digunakan
oleh
pengembang web karena fitur-fiturnya yang
menarik dan kemudahan penggunaannya.
Sublime Txet adalah Cross-platform text
dan sumber kode editor
masing-masing Sekolah Tinggi ini
ada
5
Program
Program
Studi
Studi
yaitu
Ekonomi
Manajemen (S1) dan Ekonomi
Akuntansi (D3), Program Studi
Sistem
Informasi
(S1)
dan
Komputer Akuntansi (D3), serta
Teknik Tambang (D3).
dengan Python application programming
interface(API). Ini mendukung banyak
bahasa pemrograman dan bahasa markup,
dan fungsinya dapat diperpanjang oleh
pengguna plugin, biasanya dibuat dan
dikelola dibawah lisensi free-software.
3.2 DESAIN PENELITIAN
Desain penelitian merupakan rencana dan
struktur penyelidikan yang digunakan untuk
memperoleh bukti-bukti empiris dalam
menjawab pertanyaan penelitian. Desain
penelitian ini merupakan kerangka atau
3.
METODELOGI PENELITIAN
3.1 SEJARAH SINGKAT YAYASAN
perincian prosedur kerja yang dilakukan
pada waktu meneliti, sehingga diharapkan
PENDIDIKAN PRABUMULIH
Yayasan Pendidikan Prabumulih didirikan
dengan
AKTA
Pendirian
Yayasan
Pendidikan Prabumulih dengan nomor : 37
dapat memberikan gambaran jika penelitian
ini telah jadi atau selesai.
4.2 USE CASE DIAGRAM
3.3 METODE
PENGEMBANGAN
SISTEM
Agar
produk
Validasi Admin
yang
dihasilkan
dalam
Website
Login
pengembangan sesuai dengan tujuan, maka
Berita
Input Berita
penelitian ini menggunakan pendekatan
Admin
User
Pengumuman
Input Pengumuman
model pengembangan rekayasa perangkat
Data Dosen
lunak Waterfall, dimana produk melalui
Update Data Alumni
Data Alumni
beberapa tahapan, yaitu tahap analisis
Updata data dosen
kebutuhan (requirement), tahap desain.
Gambar 4.1 Use Case Diagram
Tahap implementasi, dan terakhir tahap
pengujian aplikasi sebelum akhirnya siap
4.3 ACTIVITY DIAGRAM
untuk digunakan.
Mulai
4.
ANALISIS DAN PERANCANGAN
SISTEM
4.1 ANALISA
User
Mencari Informasi
Admin
SISTEM
YANG
Login
Berita
BERJALAN
Pengumuman
Menurut Mardi (2011:124) analisis sistem
Menampilkan Hal. Administrator
Logout
Dosen
adalah melakukan desain sistem pemecahan
Alumni
masalah secara rinci. Analisis ini bertujuan
untuk menjelaskan atau menjabarkan cara
kerja sistem dan proses yang terjadi pada
sistem informasi yang ada. Hasil analisis
sistem ini merupakan gambaran awal yang
nantinya akan digunakan untuk mengetahui
kelemahan yang ada pada sistem lama dan
membuat analisis sistem yang diusulkan.
Gambar 4.2 Activity Diagram
Selesai
4.4 CLASS DIAGRAM
3.
Halaman Data Dosen
Home Profil Dosen Alumni Pengumuman
Header
MenuLogin
Berita
-idberita
-judul
-isi
-tanggal
-gambar
+tambahberita()
+hapusberita()
+ubahberita()
+kembali()
-username
-password
+getform()
+displayform()
+exit()
Data Dosen Ypp
pengumuman
-id
-judul
-isi
-tanggal
-gambar
+tambahpengumuman()
+hapuspengumuman()
+ubahpengumuman()
+kembali()
x
x
x
x
x
x
x
x
MenuAdmin
datadosen
-id
-namadosen
-jabatan
-tempatlahir
-tanggallahir
-jeniskelamin
-alamat
+tambahdatadosen()
+hapusdatadosen()
+ubahdatadosen()
+kembali()
-Berita : string
-Pengumuman : string
-Data Alumni : string
-Data Dosen : string
+chose()
+displayform()
+exit()
dataalumni
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
-id
-NIM
-tempatlahir
-tanggallahir
-jeniskelamin
-alamat
-telp
-tahunlulus
-pekerjaan
+tambahdataalumni()
+hapusdataalumni()
+ubahdata alumni()
+kembali()
x
x
x
x
x
x
x
x
Berita Terbaru
-xxxxxxxxxxxx
-xxxxxxxxxxxx
x
x
x
x
x
x
x
x
Pengumuman
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Jurnal
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Donwload
File
-xxxxxxxxxxx
-xxxxxxxxxxx
Footer
Gambar 4.6 Halaman Data Dosen
Gambar 4.3 Class Diagram
4.5 PERANCANGAN INPUT
4.
Halaman Data Alumni
Home Profil Dosen Alumni Pengumuman
Header
Data Alumni Ypp
1.
Halaman Home
Home Profil Dosen Alumni Pengumuman
Header
Berita Terbaru
Xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
x
x
x
x
x
x
x
x
Berita Terbaru
-xxxxxxxxxxxx
-xxxxxxxxxxxx
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
Berita Terbaru
-xxxxxxxxxxxx
-xxxxxxxxxxxx
x
x
x
x
x
x
x
x
Pengumuman
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Jurnal
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Pengumuman
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Donwload
File
-xxxxxxxxxxx
-xxxxxxxxxxx
Jurnal
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Donwload File
-xxxxxxxxxxx
-xxxxxxxxxxx
Footer
Gambar 4.4 Halaman Home
2.
Halaman Profil
Home Profil Dosen Alumni Pengumuman
Header
Profil Kampus
Xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
Footer
Gambar 4.7 Halaman Data Alumni
5.
Halaman Pengumuman
Home Profil Dosen Alumni Pengumuman
Header
Pengumuman
Xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
Berita Terbaru
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Berita Terbaru
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Pengumuman
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Pengumuman
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Jurnal
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Jurnal
-xxxxxxxxxxxx
-xxxxxxxxxxxx
Donwload File
-xxxxxxxxxxx
-xxxxxxxxxxx
Footer
Gambar 4.8 Halaman Pengumuman
Donwload File
-xxxxxxxxxxx
-xxxxxxxxxxx
Footer
Gambar 4.5 Halaman Profil
5.
HASIL DAN PEMBAHASAN
5.1 HASIL
Perangkat lunak yang dihasilkan dalam
penelitian
diimplementasikan
sebagai
sebuah
website
menggunakan
metode
3.
HALAMAN DATA DOSEN
waterfall. perangkat lunak yang dihasilkan
dalam sebuah file PHP & MYSQL yang di
integrasikan melaui Bootstrap sehingga
tampilan halaman website akan responsive.
dengan tampilan yang responsive maka
Gambar 5.3 Halaman Data Dosen
akan memudahkan user untuk membaca
informasi yang ada di website Yayasan
4.
HALAMAN DATA ALUMNI
Pendidikan Prabumulih melalui platform
yang memiliki ukuran layar yang berbedabeda
5.2 IMPLEMENTASI ANTAR MUKA
1.
HALAMAN HOME
Gambar 5.4 Halaman Data Alumni
5.
HALAMAN PENGUMUMAN
Gambar 5.1 Halaman Home
2.
HALAMAN PROFIL
Gambar 5.5 Halaman Pengumuman
6.
KESIMPULAN DAN SARAN
6.1 KESIMPULAN
Berdasarkan hasil penelitian yang telah
dilakukan, dapat disimpulkan bahwa :
Gambar 5.2 Halaman Profil
1.
Website
Prabumulih
Yayasan
dibuat
Pendidikan
dengan
menggunakan
framework
code
igniter dan boostrap sehingga
pengembangan penelitian di masa yang
akan datang sebagai berikut :
tampilannya bisa responsive
2.
Website
Yayasan
1.
Pendidikan
yang
menggunakan
platform
yang
2.
responsive
berbagai
Website
macam
Yayasan
Pendidikan
Prabumulih
berbeda-beda
3.
Menambah fitur-fitur lain seperti
login mahasiswa, login dosen,
Yayasan
Prabumulih
website
Menambah form registrasi bagi
alumni
ukuran layarnya
3.
tampilan
menjadi lebih menarik
Prabumulih bisa dibuka dengan
tampilan
Memperbaiki
Pendidikan
Ditambah
input KRS dan KHS online dan
halaman
lain-lain
pendataan alumni pada website
Yayasan Pendidikan Prabumulih.
Sehingga
bisa
membantu
mengelola pendataan alumni pada
Yayasan Pendidikan Prabumulih
4.
Dengan
adanya
7.
DAFTAR PUSTAKA
Arief.2010. Manajemen Informasi dan
Teknologi Informasi. Jakarta : Gramedia
Agus
Rahmat
Herbowo.2012.Web
Responsive
untuk
Situs
Berita
Menggunakan Framework CodeIgniter.
Jakarta: Jurnal Ilmiah Sinus
halaman
pendataan alumni pada website
Yayassan Pendidikan Prabumulih,
Hanggara Yoga.2012. Analisis Sistem
Informasi Pengolahan Data Alumni
Sekolah berbasis Code Igniter php
Framework. Yogyakarta : Jurnal STMIK
Yogyakarta
maka akan mempermudah alumni
untuk
memperoleh
data
dan
informasi tentang alumni tanpa
harus datang langsung ke kampus
berbagai
Pressman Roger S. 2010. Rekayasa
Perangkat Lunak. Yogyakarta : Andi
Publishing
Lenawati.2010. Analisis dan Desain Sistem
Informasi. Yogyakarta : Graha Ilmu
6.2 SARAN
Mengingat
Haughe
Eric.2013.
Konsep
Web
Engineering. Yogyakarta : Gava Media
keterbatasan
yang
Sells dan Riches.2012.
Strategis. Semarang : UKS
Managemen
dimiliki penulis baik dari sisi pemikiran dan
waktu, maka penulis menyarankan untuk
Shelly dan Velmart.2011. Aplikasi Dalam
Pemasaran. Jakarta : Gramedia Pustaka
Utama
Siena.2010. Cara Mudah Memadukan Web
Design dan Web Programming. Jakarta :
Elexmedia Komputindo
Sigit Prasetyo Karisma Utomo.2014.
Analisa dan Desain Sistem Informasi.
Yogyakarta : Madcoms
Sidik Berta.2011. Rekayasa Perangkat
Lunak. Bandung : Modula
Sukmadinata.2010. Basis Data Dalam
Tinjauan Konseptual. Yogyakarta : ANDI
Sam Soleh Muhammad.2013.Pembangunan
Website Sekolah SMK Islam Sudirman
Kedungjati. Bandung : Tugas Akhir
Universitas Widyatama
Septian
Gungun.2011.Trik
Pintar
Menguasai Codeigniter. Jakarta : PT Elex
Media Komputindo
Wiryokusumo Iskandar.2011. Analisis dan
Perancangan Sistem. Yogyakarta : Gava
Media
Winarto
Edi.2014.
Cara
Mudah
Memadukan Web Design dan Web
Programming.
Jakarta : Elexmedia
Komputindo
Yudha Abdi Nugroho.2014.
Bangun KRS Online pada
Palangkaraya
Framework
Palangkaraya:
Palangkaraya
Rancang
STMIK
menggunakan
CodeIgniter.
Jurnal
STMIK