SISTEM INFORMASI SMPN 4 WONOGIRI BERBASIS WEB SEBAGAI SARANA INFORMASI DAN PROMOSI SEKOLAH MENGGUNAKAN

FRAMEWORK BOOTSTRAP

NASKAH PUBLIKASI

diajukan oleh

Sanita Yuwana Septavi 10.12.5238

JURUSAN SISTEM INFORMASI SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM YOGYAKARTA YOGYAKARTA

2013

ii  

iii  

INFORMATION SYSTEM SMPN 4 WONOGIRI WEB BASED AS INFORMATION MEANS AND SCHOOL PROMOTION USING BOOTSTRAP

FRAMEWORK

SISTEM INFORMASI SMPN 4 WONOGIRI BERBASIS WEB SEBAGAI SARANA INFORMASI DAN PROMOSI SEKOLAH MENGGUNAKAN

FRAMEWORK BOOTSTRAP

Sanita Yuwana Septavi Erik Hadi Saputra

Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA

ABSTRACT

Internet is one of the biggest media in the world. Internet can be used as a driver of future educational advancement. It can be considered as a huge source of information. School website is an opportunity to provide the information and documentation of a school. Today, the existence of school website in education is very important and influential in advancing the quality of education. Because school website can also be used as media promotion of the fastest, accurate, inexpensive and easy.

The facilities in school is still simple, such as in SMPN 4 Wonogiri, this school is still using manual way to deliver the information, which is for the community or students who need the information about the school, they have to come and ask to the teachers directly. That is why the way to deliver the information is less of effective and efficient.

With the school website service in SMPN 4 Wonogiri, can increase the number of students, and SMPN 4 Wonogiri will be better known to the community and can facilitate the public and students in finding information about SMPN 4 Wonogiri. Keyword: Promotion, school Website

1  

1. Pendahuluan Pesatnya perkembangan teknologi informasi membuat masyarakat semakin akrab

dengan dengan situs-situs website, karena berfungsi memberikan informasi dengan cepat,

lengkap dan tidak terlalu banyak mengeluarkan biaya. Internet digunakan untuk keperluan

informasi yang dikemas lebih praktis dalam pencarian sebuah informasi yang dibutuhkan.

Informasi merupakan hal yang sangat penting dan dibutuhkan di dalam suatu organisasi

maupun instansi karena merupakan kebutuhan bagi manajemen di dalam pengambilan

keputusan. Informasi yang bisa diakses dengan cepat dan mudah merupakan hal yang sangat

dibutuhkan pada masa kini.

Bidang yang mendapatkan dampak cukup berarti dari perkembangan teknologi

informasi adalah bidang pendidikan, dimana pada dasarnya pendidikan merupakan suatu

proses komunikasi dan informasi dari pendidik kepada peserta didik yang berisi informasi-

informasi pendidikan. Informasi mengenai sekolah yang dapat diakses dimana saja tanpa harus

datang ke sekolah atau bertanya kepada orang lain.

Dalam penyampaian informasi SMP Negeri 4 Wonogiri selalu memberikan informasi

tentang sekolah dan kegiatan siswa disekolah. Namun penyampaian informasi pada SMPN 4

Wonogiri masih secara manual yaitu bagi masyarakat atau siswa yang membutuhkan informasi

sekolah harus datang dan bertanya langsung ke sekolah, sehingga menyebabkan

penyampaian informasi kurang efektif dan efisien karena penyampaian informasi seperti itu

tidak akan mencapai jangkauan yang luas. Selain itu SMPN 4 Wonogiri menginformasikan

sekolah melalui brosur dan spanduk, untuk mengenalkan pada masyarakat luas. Akan tetapi

hal ini kurang optimal dalam mempromosikan sekolah untuk menjaring siswa baru dan

menginformasikan berita dan kegiatan-kegiatan yang ada disekolah. Dengan adanya website

sekolah, SMPN 4 Wonogiri dapat meningkatkan pelayanan informasi dengan baik dan untuk

mempermudah, mempercepat sekaligus menghemat biaya dalam melakukan pengaksesan

informasi oleh masyarakat dan siswa.

2. Landasan Teori 2.1 Konsep Dasar Sistem 2.1.1 Pengertian Sistem

Sistem adalah sekumpulan objek – objek yang saling berelasi dan berinteraksi serta

huungan antar objek bisa dilihat sebagai satu kestuan yang dirancang untuk mencapai satu

tujuan. Sistem terdiri dari unsur-unsur seperti masukan (Input), pengolahan (Processing), serta

keluaran (Output).

Suatu sistem mempunyai karakteristik atau sifat-sifat yang tertentu, yaitu:

1. Komponen Sistem

Suatu sistem terdiri dari sejumlah komponen (component) yang saling berinteraksi,

yang artinya saling bekerja sama membentuk satu kesatuan. Komponen-komponen

sistem atau elemen-elemen sistem dapat berupa suatu subsistem atau bagian-bagian

2  

dari sistem. Setiap sistem tidak perduli betapun kecilnya, selalu mengandung

komponen-komponen atau subsistem-subsistem.

2. Batas Sistem

Batas sistem (boundary) merupakan daerah yang membatasi antara suatu sistem

dengan sistem yang lainnya atau dengan lingkungan luarnya. Batas sistem ini

memungkinkan suatu sistem dipandang sebagai satu kesatuan. Batas suatu sistem

menunjukkan ruang lingkup (scope) dari sistem tersebut.

3. Lingkungan Luar

Lingkungan luar (environment) dari suatu sistem adalah apapun diluar batas dari sistem

yang mempengaruhi operasi sistem. Lingkungan luar yang menguntungkan merupakan

energi dari sistem dan dengan demikian harus tetap dijaga dan dipelihara. Sedangkan

lingkungan luar yang merugikan harus ditahan dan dikendalikan, kalau tidak maka akan

mengganggu kelangsungan hidup dari sistem.

4. Penghubung Sistem

Penghubung (interface) merupakan media penghubung antara satu subsistem dengan

subsistem lainnya.

5. Masukan Sistem

Masukan (input) adalah energi yang dimasukkan ke dalam sistem. Masukan dapat

berupa masukan perawatan (maintenance input) dan masukan sinyal (signal input).

Maitenance input adalah energi yang dimasukan supaya sistem tersebut dapat

beroperasi. Signal input adalah energi yang diproses untuk didapatkan keluaran.

6. Keluaran Sistem

Keluaran (output) adalah hasil dari energi yang diolah dan diklasifikasikan menjadi

keluaran yang berguna dan sisa pembuangan.

7. Pengolah Sistem

Suatu sistem dapat mempunyai suatu bagian pengolah yang akan merubah masukan

menjadi keluaran.

8. Sasaran Sistem

Suatu sistem pasti mempunyai tujuan (goal) atau sasaran (objective). Suatu sistem

dikatakan berhasil bila mengenai sasaran atau tujuannya.

2.2 Konsep Dasar Sistem Informasi 2.2.1 Pengertian Sistem Informasi

Sistem informasi adalah suatu sistem di dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat

manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu

dengan laporan-laporan yang diperlukan. (Leitch & Davis, 1983)

2.3 Promosi Promosi merupakan aktifitas penyampaian informasi atau pesan kepada masyarakat

dan biasa dikatakan sebuah usaha untuk mengiklankan produk. Iklan atau periklanan adalah

3  

pengguna media bayaran oleh seorang penjual untuk mengkomunikasikan informasi persuasif

tentang produk (ide, barang, jasa) ataupun organisasi dan merupakan alat promosi yang kuat

(Suyanto.2003).

2.4 Perangkat Lunak yang Digunakan

2.4.1 Framework Bootstrap Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan

komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk

digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana

untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan

dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan

komponen-komponen lainnya.

Gambar 2.2 Struktur Bootstrap

Penjelasan :

1. Yang di dalam folder css

a. Bootstrap-responsive.css : file ini digunakan untuk mensetting layout halaman website

dan keunggulannya file ini dapat menyesuaikan sendiri ukuran website pada device

yang digunakan seperti desktop, I-phone, tablet,dan lainnya.

b. Bootstrap.css : file ini digunakan untuk mensetting keseluruhan style css di dalam

bootstrap tersebut.

c. Bootstrap-responsive.min.css dan bootstrap.min.css : merupakan file hasil compress

sehingga ukuran file lebih diperkecil, fungsi tetap sama dengan asilnya.

2. Yang di dalam folder img

a. File pertama merupakan image icon yang digunakan untuk icon – icon di bootstrap.

b. File kedua sama dengan yang sebelumnya, namun background yang digunakan

berwarna putih sedangkan yang sebelumya menggunakan background hitam.

3. Yang di dalam folder js

a. Bootstrap.js : merupakan file – file pengaturan javascript yang mengatur semua event di

dalam bootstrap.

b. Bootstrap.min.js : merupakan file – file hasil compress dari Bootstrap.js

4  

c. Jquery.js : file ini digunakan untuk memberikan sumber daya script di dalam

Bootstrap.js

3. Analisis dan Perancangan 3.1 Analisis Sistem

Dalam tahap analisis sistem dalam penelitian ini terdapat langkah-langkah dasar yang

dilakukan oleh analis sistem, yaitu :

a. Identifikasi Masalah (Identify)

b. Memahami kerja sistem yang ada (Understand)

c. Menganalisis sistem (Analize)

d. Membuat laporan (Report)

3.2 Perancangan 3.2.1 DFD (Data Flow Diagram)

Data Flow Diagram (DFD) atau Diagram Alir Data dipergunakan untuk

mendokumentasikan proses aliran data sistem. Pada sistem informasi sekolah berbasis web ini

dapat digambarkan DFD sebagai berikut :

AdminWebsite SMPN 4

Wonogiri

Data sejarahData visimisi

Data guruData ekstrakulikuler

Data fasilitasData contactusData informasi

Data beritaData slideshowData download

Data albumData foto

Data siswaData bk

Guest

Informasi sejarahInformasi visimisi

Informasi guruInformasi ekstrakulikuler

Informasi fasilitasInformasi contactusInformasi informasi

Informasi beritaInformasi slideshowInformasi download

Informasi albumInformasi foto

Informasi siswaInformasi bk

Bk

Siswa

Data pesan

Data pesanData siswa

Informasi pesan

Informasi pesan

Gambar 3.1 Context Diagram

5  

3.2.2 Perancangan Desain Halaman Website

HOME  PROFIL  PSB  INFORMASI BERITA GALERI DOWNLOAD CONTACT US 

Sejarah Singkat Profil 

Sejarah singkat Visi dan Misi Guru Ekstrakurikuler Fasilitas 

Pengumuman 

6  

4. Hasil Penelitian dan Pembahasan 4.1 Implementasi

Tahap implementasi sistem (system implementation) adalah tahap meletakkan sistem

supaya siap dioperasikan. (Jogiyanto, 1990) Tahap ini termasuk pembuatan database,

pembuatan program, dan pembuatan layout halaman aplikasi.

4.2 Pembahasan Database

Gambar 4.1 Tampilan Pembuatan Database

Dalam pembuatan database meliputi penentuan tipe data tiap field dan

pembuatannya. Untuk membuat database digunakan phpMyAdmin, karena phpmyadmin

memberikan kemudahan dengan tampilan grafis. Pertama kali kita buat database. Database

yang dibuat untuk sistem ini adalah smp4wonogiri. Untuk membuat database kita tinggal

mengisi textfield create new database pada phpMyAdmin dan tekan create.

4.3 Pembahasan Dan Listing Program 4.3.1 Halaman Menu Galeri

Halaman ini berisi foto yang diupload oleh admin. Pengujung dapat melihat foto

sesuai album yang dipilih dengan klik di salah satu album foto.

7  

Gambar 4.2 Halaman Galeri

Script: echo ' <!--- Page ----> <div id="post"> <div class="container"> <div class="span12 post"> // mengambil data foto dari database $query = mysql_query("SELECT * FROM `foto` WHERE id_album = '" . $id . "'"); // menampilkan data foto dari database while ($baris = mysql_fetch_array($query)) { echo ' <div class="span3 box"> <img src="./assets/upload/foto/' . $baris['foto'] . '" alt="" class="img-rounded"> </div> '; } echo ' </div>

8  

</div> </div> <!--- End Page ----> ';

Gambar 4.3 Kode Halaman Galeri

4.4 Pembahasan Tampilan 4.4.1 Halaman Depan Pada halaman ini pengunjung disajikan beberapa menu-menu utama,serta update berita dan

informasi terbaru.

Gambar 4.4 Halaman Depan

9  

5. Penutup 5.1 Kesimpulan

Berdasarkan uraian-uraian yang telah penulis jelaskan pada bab-bab terdahulu dan

pembuatan sistem, maka penulis dapat mengambil kesimpulan sebagai berikut:

1. Penyampaian informasi di SMP Negeri 4 Wonogiri lebih cepat dan dapat dikenal oleh

masyarakat luas dikarenakan menggunakan media website sebagai media penyampaian

informasi dan promosi. Untuk menghasilkan informasi yang cepat dan akurat dengan

menggunakan website melewati proses analisis perancangan menggunakan metode

SWOT dengan analisis kebutuhan fungsional dan nonfungsional kemudian menggunakan

analisis biaya dan manfaat dengan kelayakan ekonomi, NPV (Net Present Value) ,PP

(Payback Periode), dan ROI (Return On Investment) dan dilakukan uji coba menggunakan

White box testing dan Black box Testing.

2. Kelebihan yang di peroleh dengan adaya sistem informasi berbasis website di SMPN 4

Wonogiri adalah :

Dengan adanya website sekolah, SMPN 4 Wonogiri dapat meningkatkan pelayanan

informasi dengan baik dan untuk mempermudah, mempercepat sekaligus menghemat

biaya dalam melakukan pengaksesan informasi oleh masyarakat dan siswa.

3. Situs di SMPN 4 Wonogiri mempunyai beberapa fasilitas yaitu :

a. Penambahan akses bagi guru Bimbingan konseling dan siswa digunakan untuk

mengirim pesan. Setiap guru BK dan siswa diberikan username dan password.

Sehingga ketika siswa ingin melakukan bimbingan online kepada guru BK yang dipilih

harus melakukan login terlebih dahulu.

b. Penambahan fasilitas download dan upload materi memberikan peningkatan bagi

siswa dalam mempelajari pelajaran yang telah dipelajari di sekolah. Ketika ringkasan

materi yang telah dipelajari ataupun yang belum dipelajari sudah di upload oleh

admin.

5.2 Saran

Aplikasi website SMP Negeri 4 Wonogiri ini, walaupun sudah dibuat sesuai dengan

kemampuan usaha dan upaya yang dimiliki, tentu saja ada beberapa kelemahan yang harus

diperbaiki pada masa yang akan mendatang, untuk itu ada beberapa saran yang bisa diberikan

kepada pengembang sistem informasi agar sistem yang berikutnya bisa dibuat dan dapat

berjalan lebih baik lagi antara lain:

1. Website dapat disempurnakan dengan menambahkan fasilitas sistem informasi

akademik seperti pendaftaran siswa baru secara online, nilai online, dan ujian online.

2. Website tersebut belum adanya fasilitas login akun untuk guru, maka menyarankan

nantinya pihak penelitian selanjutnya, website tersebut dikembangkan lagi dengan

10  

adanya login akun untuk guru. Sehingga akan lebih meningkatkan mutu dan kualitas

tentang sekolah.

11  

DAFTAR PUSTAKA

Al Fatah, H. 2007. Analisis dan perancangan Sitem Informasi untuk Keunggulan Bersaing Perusahaan & Organisasi Modern. Yogyakarta: Andi Offset.

Arief, M. R. 2011. Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.

Jogiyanto. 1990. Analisis dan Desain Sistem Informasi: pendekatan terstruktur teori dan praktik aplikasi bisnis. Yogyakarta: Andi Offset.

Komputer, W. (2008). Menguasai Adobe Photoshop CS3. Yogyakarta: Andi Offset.

Kusrini. 2007. Strategi Perancangan dan Pengelolaan Basis Data. Yogyakarta: Andi Offset.

Leitch, R. A., & Davis, K. R.1983. Accounting Information Systems. New Jersey: Prentice-Hall.

Suyanto, M. 2005. Strategi Perancangan Iklan Televisi Perusahaan Top Dunia. Yogyakarta: Andi Offset.

http://www.kresnagaluh.com/2012/08/bootstrap-mendesain-web-menjadi-lebih.html(Diakses tanggal 1 Agustus 2013)

12