Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Menggunakan Teknologi Really Simple Syndication (RSS)

Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Menggunakan Teknologi Really Simple Syndication (RSS) Tri Yulianto 1, Afriyudi, M.Kom 2 , Febriyanti Panjaitan, M.Kom 3 Mahasiswa Universitas Bina Darma 1, Dosen Universitas Bina Darma 2, Dosen Universitas Bina Darma 3 Jalan Jenderal Ahmad Yani No.03 Palembang Pos-el : [email protected] 1, [email protected] 2, [email protected] 3 ________________________________________________________________________

Abstact : Web site has been used as a medium of communication, information, and promotion of online business. Many intansi education utilizing Web sites to support a variety of activities. Bureau of Quality Assurance is an Internal Agency Universitas Bina Darma (UBD), which serves to build academic quality assurance system in UBD in every sector in UBD start of the study program, the faculty, the development center to work units at UBD. BPM have a desire to develop earlier. There are several planned changes to the previous web-like design, color, additional information and as well as the addition of some menus. in this study using the system Development Web Site Design Method. BPM in the Web site will be harnessing the technology Really Simple Syndications (RSS) is a term in internet technology that refers to a way to syndicate the content of a Web site. Web sites were built within their BPM previous draft. BPM Web site can be accessed at the address www.bpmubd.com. Keyword: Analysis, Design, BPM UBD, WSDM, and RSS Abstrak : Situs Web selama ini digunakan sebagai media komunikasi, informasi, bisnis online dan promosi. Banyak intansi pendidikan yang memanfaatkan situs Web untuk menunjang berbagai kegiatan. Biro Penjamin Mutu merupakan Badan Internal Universitas Bina Darma (UBD) yang berfungsi membangun sistem penjaminan mutu akademik di UBD pada setiap sektor di UBD mulai dari program studi, fakultas, pusat pengembangan hingga unit kerja di lingkungan UBD. BPM mempunyai keinginan untuk mengembangkan sebelumnya. Ada beberapa rencana perubahan pada Web sebelumnya seperti desain, warna, penambahan informasi dan serta penambahan beberapa menu. pada penelitian ini Pengembangan sistemnya mengunakan Web Site Design Method. Di dalam situs Web BPM akan memanfaat kan teknologi Really Simple Syndications (RSS) adalah suatu istilah dalam teknologi internet yang merujuk pada cara mensindikasikan konten sebuah situs Web. situs Web BPM berhasil dibangun sesui dengan rancangan sebelumnya. Situs Web BPM bisa diakses di alamat www.bpmubd.com. Keyword : Analisis, Perancangan, BPM UBD, WSDM, dan RSS

1.

bentuk gambar, suara, dan teks yang di sajikan

PENDAHULUAN

dari satu domain. Situs Web selama ini digunakan sebagai

Biro Penjamin Mutu merupakan Badan Internal

media komunikasi, informasi, bisnis online dan

Universitas Bina Darma (UBD) yang berfungsi

promosi.

yang

membangun sistem penjaminan mutu akademik

memanfaatkan situs Web untuk menunjang

di UBD pada setiap sektor UBD mulai dari

berbagai kegiatan. Situs Web merupakan sebuah

program studi, fakultas, pusat pengembangan

sistem dengan informasi yang ditampilkan dalam

hingga unit kerja dilingkungan UBD. BPM

Banyak

intansi

pendidikan

Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto )

1

sudah lama menggunakan situs Web untuk

sistem yang meyediakan berita terbaru secara

menunjang berbagai kegiatan dan pemberian

otomatis. Sehingga pengguna dapat mengetahui

informasi. BPM mempunyai keinginan untuk

secara cepat berita terbaru dari situs tertentu

mengembangkan situs Web sebelumnya yang

tanpa harus mengunjungi situs tersebut. RSS

beralamat di http://blog.binadarma.ac.id/bpm.

adalah

Situs Web tersebut mempunyai beberapa menu

pengumpulan dan penyatuan isi halaman sebuah

seperti menu home, profile, standar mutu UBD,

Web. Sebuah file RSS memberikan data

struktur organisasi BMP, visi dan misi, peta

informasi ringkas tentang headline, link,dan

proses, daftar dokumen pendukung, search,

article dari situs Web lain. RSS menggunakan

archive, login, dan pengumuman. BPM akan

aplikasi XML sebagai formatnya. Sebuah file

merencanakan perubahan pada Web sebelumnya

RSS menerangkan isi dari sebuah saluran

seperti desain, warna, penambahan informasi dan

informasi yang berisi logo/image, site link, input

serta penambahan beberapa menu.

box dan items. Item pada file RSS sering disebut

sebuah

metode

terbuka

untuk

Dalam pengembangan sistem diperlukan

sebagai “news items”. Situs Web BPM dapat

analisis dan desain terhadap situs Web tersebut.

menyalin dan menggunakan RSS feed yang

Analisis

dilakukan

dimiliki situs Web atau blog lain untuk

dan desain

menginformasikan sebuah berita atau artikel, hal

berorientasi objek atau object oriented analysis

ini sering disebut dengan RSS feeds. RSS di

and design (OOAD). Peneliti menggunakan

internet digambarkan dengan icon

bahasa pemodelan Unified Modeling Language

Web BPM yang menggunakan file RSS dari blog

(UML). Dengan menggunakan UML peneliti

dan situs Web yang dapat menampilkan intisari

dapat mendefinisikan requirement, membuat

berita dari situs Web tersebut (RSS).

dan

desain

yang

menggunakan teknik analisis

analisis dan desain, serta menggambarkan arsitektur

dalam

pemrograman

berorientasi

Berdasarkan

hal

diatas

. Situs

penulis

melakukan penelitian dengan judul “ANALISIS

objek.

DAN PERANCANGAN SITUS WEB BIRO

Untuk menghasilkan situs Web yang berkualitas

PENJAMINAN

sesuai

MENGGUNAKAN

berdasarkan

keinginan

pengguna

penelitian ini menggunakan metode Web Site

MUTU TEKNOLOGI

(BPM) REALLY

SIMPLE SYNDICATIONS (RSS)”.

Design Method (WSDM) merupakan metode

Rumusan masalah dalam penelitian ini

rekayasa Web yang pendekatannya terpusat pada

adalah bagaimana menganalisis dan merancang

pengguna untuk pengembangan situs Web, jadi

situs Web Biro Penjaminan Mutu (BPM)

model-model

menggunakan

aplikasinya

berdasarkan

pada

kebutuhan informasi dari pengguna.

Teknologi

Really

Simple

Syndication (RSS) ?

Pada situs Web BPM akan menggunakan

Batasan masalah dalam penelitian ini

teknologi Really Simple Syndication yaitu untuk

Penulis hanya mengembangkan situs Web BPM

mengitegrasikan content Web ke dalam Web

dengan menggunakan Web Site Design Method

utama BPM melalui pertukaran informasi antar

(WSDM) dan teknologi RSS.

2

Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16

Adapaun tujuan dari penelitian ini yaitu

2.3

Metode Penelitian

Mengembangkan situs Web sesuai dengan kebutuhan

pengguna,

dan

Menghasilkan

Metode

penelitian

yang

digunakan

perangkat lunak yaitu situs Web BPM. Adapun

adalah metode penelitian tindakan (action

manfaat

research)

dari

penelitian

ini

adalah

dapat

adalah

suatu

penelitian

yang

digunakan oleh BPM agar semua kegiatan dan

dikembangkan bersama-sama antara peneliti dan

pemberian informasi lebih efektif dan efisien,

mengambil keputusan (decision maker) tentang

dan untuk unit kerja dilingkungan UBD dapat

variabel-variabel yang dapat dimanipulasikan

terbantukan dalam mencari dan mendapatkan

dan dapat segera digunakan untuk menetukan

informasi BPM.

penelitian dan pembangunan. Peneliti decision

maker

bersama-sama

dan

menentukan

masalah, membuat desain serta melaksanakan

2.

program untuk membangun situs Web BPM.

METODOLOGI PENELITIAN

Ciri utama dari penelitian tindakan Waktu dan Tempat Penelitian

adalah tujuanya untuk memperoleh penemuan

Waktu penelitian dilakukan selama 5

yang signifikan secara operasional sehingga

(lima) bulan, dari bulan Maret 2015 sampai

dapat digunakan ketika penelitian dilaksanankan.

bulan

ini

Penelitian tindakan mengadakan rangka kerja

Biro

penelitian yang didasarkan pada observasi

2.1

Juli

2015,

berlangsung.

selama

Penelitian

penelitian

dilakukan

di

Penjaminan Mutu (BPM) Universitas Bina

objektif (Nazir, 2003, hal. 79-83).

Darma, Jln.A Yani No.03 Palembang, Sum-Sel. 2.4 2.2

Metode Pengumpulan Data

Data Penelitian Metode untuk memperoleh data dan Institusi yang menjadi objek penelitian

teori yang mendukung penelitian ini adalah

adalah Biro Penjaminan Mutu Universitas Bina

sebagai berikut :

Darma. Data penelitian yang digunakan adalah

1. Metode Kepustakaan

data kualitatif

yaitu data yang berwujud

Metode dilakukan dengan mencari bahan data

pertanyaan atau berupa kata-kata (Riduwan,

yang mendukung dalam pendefinisian masalah,

2004: hal. 106). Sumber data yang digunakan

teori melalui buku, jurnal, dan modul yang

adalah data primer dan data sekunder. Data

berhubungan dengan penelitian ini.

primer diperoleh dengan melakukan wawancara

2. Metode Wawancara

kepada

Metode wawancara adalah teknik tanya jawab

pengguna

memenuhi

sistem

kebutuhan

(BPM)

sistem

yang

untuk akan

terhadap

pengguna

sistem

(BPM)

untuk

dibangun. Data sekunder diperoleh dari meninjau

menggali bagian sistem mana yang di anggap

langsung ke web BPM sebelumnya.

kurang baik oleh peneliti, agar dapat menggali kebutuhan user secara lebih bebas.

Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto )

3

3. Metode Observasi

pengguna dapat mengenal baik sistem yang

Pengumpulan data dengan menganalisa agar

dibangun.

dapat melihat langsung bagai mana sistem lama

3. Desain implementasi

berjalan dan mampu menghasilkan gambaran

Dalam fase ini, model-model dari class diagram,

lebih baik terhadap sistem yang di analisis

use case diagram, activity diagram, dan

(Riduwan, 2004, hal. 102-104).

rancangan antar muka yang sudah di analisis dan desain sebelumnya akan diterjemahkan kedalam

2.5

Metodologi Pengembangan Perangkat

bahasa pemrograman PHP5. Dalam situs Web

Lunak

BPM akan menggunakan teknologi RSS yang befungsi untuk mengumpulkan dan menyatukan

Metode pengembangan perangkat lunak

isi dari sebuah halaman Web lain. Tujuan

yang digunakan peneliti adalah Web Site Design

penggunaan RSS adalah untuk mempermudah

Method (WSDM) merupakan pendekatan yang

dalam pencarian informasi dengan cepat dan

terpusat pada pengguna untuk pengembangan

mudah. Dengan adanya RSS pengguna tidak

situs Web, yaitu model-model aplikasi yang

harus mengunjungi situs Web utama informasi

berdasarkan pada kebutuhan informasi dari

yang dicarinya, karena sudah ada dalam situs

kelompok pengguna. Proses pengembangan ini

Web BPM, dengan begitu lebih efektif dan

di bagi dalam empat fase, yaitu :

efisien dengan adanya RSS.

1. Pemodelan pengguna

4. Implementasi

Dalam fase ini, peneliti menentukan kebutuhan

Dalam fase ini, hasil dari desain implementasi

pengguna

dan

yaitu situs Web BPM, nantinya akan digunakan

dikelompokkan dalam kebutuhan sistem. Dosen

oleh BPM untuk menunjang berbagai kegiatan

dilingkungan

dan aktifitas yang berhubungan dengan BPM

untuk

diklasifikasikan

BPM

sebagai

pengguna,

pengunjungnya adalah dosen Universitas Bina

agar lebih efektif dan efisien.

Darma, dan admin BPM sebagai operator yang

Berikut ini penjelasan mengenai fase

mengelola informasi Web.

pemodelan, tujuannya dalam mengidentifikasi

2. Desain konseptual

peran-peran

Dalam fase ini, mendesain diagram kelas, use

menunjukkan dua tugas berikut, yaitu :

case, aktivitas, dan antar muka untuk mewakili

a. Klasifikasi pengguna

model sistem dan model navigasional untuk

Tugas

mewakili kemungkinan dari model navigasi.

pengunjung dan pengguna (BPM) potensial dari

Perancangan model navigasi dan perancangan

situs Web, klasifikasi menurut minat pengguna,

antar muka yang ada pada situs Web BPM yaitu,

dan pilihan navigasi. WSDM mengajukan

menu beranda, tentang BPM (Profil, struktur

penganalisisan lingkungan organisasi dengan

organisasi

kontak,

aplikasi yang akan digunakan dan memusatkan

pengumuman, dan RSS Link. Tujuannya agar

perhatian pada dosen yang berada dilingkungan

BMP,

visi

dan

misi),

ini

pengguna

merupakan

yang

berbeda

identifikasi

dari

BPM.

4

Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16

b. Deskripsi kelompok pengguna

2.7

Really Simple Syndication (RSS)

Tugas ini merupakan deskripsi mendetail dari kelompok pengguna (BPM) yang diidentifikasi

Really Symple Sindycation (RSS) adalah

pada tugas sebelumnya. Kebutuhan informasi,

istilah dalam teknologi internet yang merujuk

kebutuhan fungsional, dan kebutuhan keamanan

pada cara mensindikasikan konten sebuah situs

untuk masing-masing kelompok pengguna di

Web

gambarkan dalam class diagram, use case

memudahkan pengguna internet agar selalu

diagram, dan activity diagram. (Simarmata,

dapat mengetahui ringkasan berita terbaru dari

2009: hal. 217-218).

situs Web lain. Sebuah file RSS memberikan data

26

Syndication).

(Web

informasi

ringkas

Layanan

(summary)

ini

tentang

headlines, links, dan article dari situs Web. File

Biro Penjaminan Mutu UBD

RSS termasuk dalam file metadata yaitu unitBiro Penjamin Mutu merupakan Badan

unit informasi tentang informasi yang biasa

Internal Universitas Bina Darma (UBD) yang

digunakan

untuk

berfungsi membangun sistem penjaminan mutu

deskriptif

tentang

akademik di UBD pada setiap sektor di UBD

karakteristik dari data.

menyediakan content,

informasi

context

dan

mulai dari program studi, fakultas, pusat

Fitzgerald. M (2004, dalam Elyyani)

pengembangan hingga unit kerja di lingkungan

RSS adalah kosakata XML sederhana yang

UBD.

digunakan untuk meringkas informasi yang berada dalam sebuah situs. RSS adalah sebuah

2.7

Rekayasa Web (Web Engineering)

istilah dalam teknologi internet yang merujuk pada cara mensindikasikan konten sebuah situs

yang

Rekayasa Web adalah sebuah aplikasi

Web (Web Syndication).

RSS di internet

menggunakan

digambarkan dengan icon

.

pendekatan

sistematis,

disiplin, dan terukur untuk pengembangan,

Sebuah file RSS memiliki struktur yang

operasi dan pemeliharaan aplikasi berbasis Web

terdiri dari 4 tipe eleman utama yaitu channel,

(Web-based applications). Menurut Murugesan,

image, items, dan tex input.

dkk (1999, dalam Simarmarta 2009) Rekayasa

1. Channel

Web menggunakan pendekatan sistematis, sains,

Elemen channel terdiri atas metadata yang

rekayasa serta prinsip-prinsip manajemen untuk

menjelaskna channel itu sendiri. Sebuah elemen

kesuksesan

aplikasi,

channel memerlukan pendefinisian : nama dari

pengembangan, dan sistem Web berkualitas

channel , deskripsi <description>, bahasa tinggi. Tujuan utama rekayasa Web adalah <language>, kesuksesan dalam mengatur kompleksitas serta Pendefinisan ke empat tag tersebut dalam tag keanekaragaman pengembangan aplikasi Web channeldirender kedalam format HTML. Title (Simarmata, 2009: h. 1). pada sebuah elemen channel diberlakukan terhadap pemeliharaan dan URL channel <link>. Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 5 headline link, diikuti URL untuk menunjukkan Elemen textinput merupakan elemen optional dimana channel itu berasal beserta deskripsi yang digunakan sebagai sistem feedback dari channel yang mendeskripsikan tentang channel sebuah tersebut. Sedangkan pendefinisian language diperbolehkan satu textinput per channel. berita. Elemen textinput hanya digunakan sebagai filter ketika aggregators mengambil news yang kemudian ditampilkan sesuai dengan format bahasa yang 2.8 PHP telah didefinisikan di channel. PHP (Hypertext Prepocessor) 2. Image merupakan bahasa pemrograman berbasis Web Elemen image adalah elemen optional yang yang memiliki kemampuan untuk memproses memasukka sebuah logo pada RSS. Secara dan mengolah data secara dinamis. PHP default lebar dari image adalah 88 piksel dan memiliki beberapa veri yaitu PHP/FI, PHP3, tinggi 31 piksel. Tapi dapat menentukan sendiri PHP4, dan PHP5. PHP5 saat ini sudah nilai piksel yang di inginkan. Tag-tag seperti mendukung pemrograman berorientasi objek. title, url, link, width, dan hight memperbolehkan PHP5 mampu menangani dan membuat session renderer mentranslasi kedalam file HTML. pada objek serta model keamanan dengan md5 3. Item (Komputer, 2009, h. 6). Dari sekian elemen yang ada dalam channel yang merupakan elemen penting adalah elemen 2.9 Framework item, yang merupakan bagian dinamis dari sebuah RSS. Sementara elemen lain bersifat Framework bisa disebut kerangka kerja. konstan pada channel, elemen item justru terus Dalam pengertian sederhana, framework dapat dapat berubah setiap saat bergantung dari isi diartikan sebagai kumpulan potongan-potongan berita yang ingin disampaikan. Elemen item program (kelas dan fungsi) yang disusun dan pada HTML di render sebagai headline news. diorganisasikan sedemikian rupa, sehingga dapat Isinya tergantung dari pengunggahan yang digunakan kembali untuk membantu membuat dilakukan secara berkala yang dilakukan oleh aplikasi utuh tanpa harus membuat semua admin atau siapa saja yang bertanggung jawab kodenya dari awal. pada isi Web. Item-item yang diperbolehkan satu dari sekian banyak framework PHP. Pada dibatasi hanya Pembatasan ini boleh 15 item. dasarnya “core” framework kumpulan class karena RSS yang saling berhubungan (Basuki, 2014, h.13). sampai dilakukan CodeIgniter adalah salah menampilkan informasi terbaru yang di update secara berkala. Sedangkan title dibatasi kurang dari 100 karakter sementara untuk 2.10 Analisis dan Desain Berorientasi Objek pendeskripsian item dibatasi kurang dari 500 karakter. 4. Textinput 6 Analisis dan Desain berorientasi objek atau Object Oriented Analysis adnd Desaign Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 (OOAD) adalah tahapan untuk menganalisis dan BPM yang di rancang. Use case menjelaskan memetakan spesifikasi atau kebutuhan sistem sebuah interaksi antara satu atau lebih aktor yang akan di bangun dengan konsep berorientasi dengan sistem informasi. Use case berfungsi objek agar lebih mudah di implementasikan untuk mengetahui apa saja yang ada didalam dengan pemrograman berorientasi objek (Rosa & situs Web BPM Shalahuddin, 2013, h. 114-120). menggunakan fungsi-fungsi itu. Berikut adalah dan siapa saja yang berhak diagram use case dari situs web BPM : Unified Modeling Language (UML) 2.11 Beranda UML adalah salah satu standar bahasa Struktur Organisasi BPM Kontak Pengguna Pengumuman requirement, serta menggambarkan arsitektur dalam pemrograman berorientasi objek (Rosa & Shalahuddin, 2013, h. 133). Visi dan Misi BPM Tentang BPM yang banyak digunakan didunia industri untuk membuat analisis dan desain, mendefinisikan Profil BPM RSS Link Gambar 2. Use Case Diagram Pengguna Situs Web BPM 2.11.1 Class Diagram Edit Tambah Tambah Hapus Edit Diagram kelas atau class diagram menggambarkan struktur sistem dari sistem. Berikut adalah <<include>> Validasi Memeriksa Status Login Edit Admin <<include>> class Log Out Tambah Main Beranda 1 1 1 1 1 1..* 1 1 1 1..* ProfilBPM +nama +getNama() +setNama() 1..* 1 +tampilProfilBPM() 11 1 1..* 1..* 1..* 1 1 1 1 1..* VisiDanMisiBPM +tampilVisiDanMisiBPM() 1 1 1 Pengumuman 1 1 +tampilPengumuman() 1 1 1 RSS Link 1 +tampiilRSSLink() 1 1 1 1 1 +tambah() +edit() +hapus() 1 KoneksiBasisData 1 +open() +execute() +getResult() +Close() 11 2.11.3 Activity Diagram +userName +password +nama +hak_Akses 1 1 1 AdminBPM +host +datavase +username +password Gambar 3. Use Case Diagram Admin Situs Web BPM 1 Organisasi +edit() 1 1 1 1 RSSLink 1 +login() +logOut() +cekStatusLogin() +tampilStrukturOrganisasiBPM() 1 +tambah() +edit() +hapus() 1 Validasi StrukturOrganisasiBPM 1 1 1 1 1 1 Admin 1 +tampilMenu() +formLogin() +formPengumuman() +formAdmin() +tampilBeranda() +tampilTentangBPM() +tampilProfilBPM() +tampilVisidanMisiBPM() +tampilStrukturOrganisasiBPM() +tampilKontak() +tampilBabeyudi's Blog() +tampilPengumuman() 1 Hapus Edit pengumuman AntarMuka Pengguna ORGANISASI +tambah() +edit() +hapus() TentangBPM +tampilSubMenuProfilBPM() +tampilSUbMenuVisidanMisBPMi() +TampilSubMenuStrukturOrganisasiBPM() <<include>> PENGUMUMAN +main() +tampilkanHome() Hapus <<include>> Diagram dari situs Web BPM : 1 RSS LINK Login segi pendefinisian kelas-kelas yang akan dibuat untuk membangun ADMIN 1 +getUserName() +setUserName() +getPassword() +setPassword() +getNama() +SetNama() +getHakAkses() +SetHakAkses() +queryEditData() +queryHapusData() +queryTambahData() +queryMelihatData() +queyCekLogin() Gambar 1. Class Diagram Situs Web BPM Diagram aktivitas atau activity diagram menggambarkan workflow (aliran kerja) atau aktifitas dari sebuah sistem atau proses bisnis atau menu yang ada pada situs 2.11.2 Use case Diagram situs Web BPM Use case diagram merupakan Web BPM. Diagram aktivitas menggambarkan aktivitas sistem bukan apa pemodelan untuk kelakuan (behavior) situs Web Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 7 yang dilakukan actor. Berikut adalah activity Pengguna Logo UBD Biro Penjaminan Mutu Universitas Bina Darma Beranda Tentang BPM Kontak diagram situs Web BPM : Sistem Buka Web BPM Menampilkan Menu Melihat menu Kategori Pengumuman Pengumuman RSS Link XXXXXXXXXX Xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx Link RSS Feeds Statistik Hubungi Copyright © 2015 Gambar 6. Desain Halaman Beranda Gambar 4. Activity Diagram Pengguna Situs Web BPM 2. Desain Halaman Profil BPM Halaman profil BPM adalah halaman yang Admin Sistem menampilkan profil BPM, merupakan sub dari Login Meminta username dan password Tentang BPM akan muncul sub Tentang BPM Masukkan username dan password tidak yaitu Profil BPM, Visi dan Misi BPM, dan ya Admin RSS Link Organisasi Stuktur Organisasi BPM. Kemudian pengguna Pengumuman mengeklik menu Profil BPM. Berikut adalah LogOut Gambar 5. Activity Diagram Admin Situs Web BPM 2.12 Desain Antar Muka Desain antarmuka pemakai guna untuk memberikan gambaran tahapan penggunaan situs Web BPM atau untuk menuntun pengguna ke proses perancangan antarmuka pemakai. Adapun rancangan antarmuka yang akan dibuat dalam Web ini antara lain sebagai berikut : 1. Desain Halaman Beranda Halaman beranda adalah halaman pertama ketika pengguna mengakses situs Web BPM. Di dalam berada terdapat pengumuman yang sudah dibuat oleh admin BPM. Berikut adalah tampilan halaman beranda. Tentang BPM. Apabila pengguna mengeklik tampilan halaman profil BPM. Logo UBD Biro Penjaminan Mutu Universitas Bina Darma Beranda Tentang BPM Kontak Kategori Profil BPM RSS Link XXXXXXXXXX Xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx RSS Feeds Pengumuman Link Hubungi Statistik Copyright © 2015 Gambar 7. Desain Halaman Profil BPM 3. Desain Halaman Visi dan Misi BPM Halaman visi dan misi BPM adalah halaman yang menampilkan visi dan misi BPM yang merupakan sub dari Tentang BPM. Apabila pengguna mengeklik menu Tentang BPM akan muncul sub Tentang BPM yaitu Profil BPM, Visi dan Misi BPM, dan Stuktur Organisasi 8 Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 BPM. Kemudian pengguna mengeklik menu Visi 5. Desain Halaman Kontak dan Misi BPM. Halaman Berikut adalah tampilan halaman visi dan misi BPM. kontak yang mengeklik menu Kontak akan tampil halaman Biro Penjaminan Mutu Universitas Bina Darma Beranda Tentang BPM Kontak Kategori Visi Dan Misi BPM RSS Link XXXXXXXXXX Xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx RSS Feeds Pengumuman Link Hubungi Statistik Copyright © 2015 Gambar 8. Desain Halaman Visi dan Misi BPM 4. Desain Halaman Struktur Organisasi BPM Halaman struktur organisasi BPM adalah halaman yang menampilkan struktur organisasi BPM yang merupakan sub dari Tentang BPM. Apabila pengguna mengeklik menu Tentang BPM akan muncul sub Tentang BPM yaitu Profil BPM, Visi dan Misi BPM, dan Stuktur Organisasi BPM. Kemudian pengguna kontak sebagai berikut : Logo UBD Biro Penjaminan Mutu Universitas Bina Darma Beranda Tentang BPM Kontak Kategori Kontak Link RSS Feeds Hubungi Statistik Copyright © 2015 Gambar 10. Desain Halaman Kontak BPM 6. Desain Halaman Login Halaman login salah satu struktur organisasi maka akan menampilkan tugas dari organisasi tersebut. Logo UBD Biro Penjaminan Mutu Universitas Bina Darma Beranda Tentang BPM Kontak Kategori Struktur Organisasi Pengumuman RSS Link Link RSS Feeds Hubungi adalah halaman yang menampilkan form login untuk admin. Halaman login admin di buat terpisah dengan halaman utama situs Web BPM. Berikut adalah halam login untuk admin : LOGIN adalah tampilan halaman Struktur Organisasi BPM. Apabila pengguna mengeklik Pengumuman RSS Link mengeklik menu Struktur Organisai BPM. Statistik halaman menampilkan kontak BPM. Apabila pengguna Logo UBD Berikut adalah Email ........ lOGIN Gambar 11. Desain Halaman Login Apabila admin berhasil login, akan tampil halaman admin sebagai berikut : Copyright © 2015 Gambar 9. Desain Halaman Struktur Organisasi BPM Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 9 Dalam situs Web BPM terdapat menu diantaranya menu Beranda, Tentang BPM (Profil Home ADMIN RSS LINK ORGANISASI INFORMASI Logout Selamat Datang BPM, Visi dan Misi BPM, dan Struktur Organisasi BPM, Kontak, Pengumuman dan Link RSS. Penggunaan teknologi RSS bertujuan untuk mengetahui konten berita terbaru dari situs Web lain tanpa harus mengunjungi situs Web tersebut. Link RSS dapat diambil dari berbagai situs Web, blog yang menyediakan RSS Feed. Gambar 12. Desain Halaman Home Admin Untuk menguji serta menjalankan situs Web BPM peneliti menggunakan browser google 3. crome, hasilnya dapat berjalan dengan lancar HASIL seperti apa yang sudah dirancang pada bab sebelumnya. Hasil dari penelitian ini berupa situs Web BPM yang beralamat di www.bpmubd.com dengan 3.1 Pembahasan memanfaatkan teknologi RSS yang dibangun menggunakan bahasa pemrograman PHP5 yang Berikut adalah pembahasan dari hasil uji mendukung pemrograman berorientasi objek. coba situs Web BPM mengenai alur kerja situs Framework yang digunakan adalah framework Web BPM dan tampilan dari setiap menu-menu CodeIgniter. CodeIgniter merupakan merupakan yang ada di situs Web BPM. Berikut adalah salah satu framework PHP yang digunakan untuk tampilan-tampilan dari situs Web BPM : mengembangkan aplikasi Web. Metode penelitian yang digunakan adalah metode action research. Dalam mengupulkan data dan bahanbahan yang dibutuhkan untuk penelitian penulis menggunakan Pengguna mengakses alamat www.bpmubd.com, kemudian akan tampilan guna halaman Pertama (beranda). Halaman beranda memperoleh data yang akurat dalam membangun pada situs Web BPM merupakan halaman situs Dalam pengembanganya pertama ketika pengguna atau pengunjung penulis menggunakan metode Web Site Design membuka situs web BPM yang beralamat di Method (WSDM) merupakan pendekatan yang www.bpmubd.com. Di dalam halaman berada terpusat pada pengguna untuk pengembangan akan menampilkan pengumuman-pengumuman situs Web. Dalam metode WSDM terdapat 4 yang telah dibuat oleh BPM sebelumnya. Berikut tahap dalam pengembangan aplikasi web yaitu adalah tampilan dari halaman beranda. Web dan BPM. kepustakaan, Halaman Beranda metode wawancara, metode 3.1.1 metode observasi desain pengguna, desain konseptual , desain implementasi, dan implementasi. 10 Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 tentang visi dan misi BPM. Berikut adalah tampilan dari halaman visi dan misi BPM. Gambar 13. Halaman Beranda 3.1.2 Gambar 15. Halaman Visi dan Misi BPM Halaman Profil BPM Pengguna mengakses alamat 3.1.4 www.bpmubd.com, kemudian memilih menu Tentang BPM pilih Profil BPM. Profil BPM merupakan sub menu dari tentang BPM yang menampilkan profil BPM. Di halaman ini menjelaskan fungsi dari Biro Penjaminan Mutu UBD. Berikut adalah tampilan dari halaman profil BPM. Halaman Struktur Organisasi BPM Pengguna mengakses alamat www.bpmubd.com, kemudian memilih menu Tentang BPM pilih Struktur Organisasi BPM. Halaman struktur organisasi BPM merupakan sub menu dari menu tentang BPM yang menampilkan struktur organisasi BPM. Di halaman ini menjelaskan tugas-tugas dari setiap organisasi yang ada di dalam BPM UBD. Berikut adalah tampilan halaman struktur organisasi BPM. Gambar 14. Halaman Profil BPM 3.1.3 Halaman Visi dan Misi BPM Pengguna mengakses alamat www.bpmubd.com, kemudian memilih menu Tentang BPM pilih Visi dan Misi BPM. Halaman visi dan misi BPM merupakan sub Gambar 16. Halaman Struktur Organisasi BPM Apabila pengguna mengeklik PM Akademik, maka akan menampilkan tugas dari organisasi tersebut. Berikut tampilan dari PM Akademik. menu dari tentang BPM yang menampilkan visi dan misi BPM. Di halaman ini menjelaskan Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 11 Gambar 17. Halaman Detail Struktur Organisasi BPM 3.1.5 Apabila pengguna mengeklik salah satu pengumuman akan menampilkan detail isi dari Halaman Kontak Pengguna Gambar 19. Halaman Pengumuman pengumuman tersebut. Berikut adalah tampilan mengakses alamat www.bpmubd.com, kemudian memilih menu dari halaman pengumuman yang telah di klik sebelumnya. Kontak. Halaman kontak merupakan halaman yang menampilkan alamat, tempat, no telp, dan email dari BPM UBD. Halaman ini dibuat untuk memberikan informasi kepada pengguna. Berikut adalah tampilan dari halaman kontak. Gambar 20. Halaman Detail Pengumuman 3.1.7 Halaman RSS Link Pengguna mengakses alamat www.bpmubd.com, kemudian memilih menu Gambar 18. Halaman Kontak Link RSS. Halaman RSS Link merupakan 3.1.6 halaman yang menampilkan informasi bisa Halaman Pengumuman berupa artikel, berita baik dari Web atau blog Pengguna alamat yang menyediakan RSS. Berita atau Artikel www.bpmubd.com, kemudian memilih menu tersebut akan selalu update secara otomatis, pengumuman. pengumuman karena mengikuti isi dari Web atau blog. Dengan menampilkan begitu pengguna akan memperolah beirta dan pengumuman-pengumuman yang telah dibuat artikel lebih cepat dan mudah. Berikut adalah oleh admin BPM. Berikut adalah tampilan dari tampilan dari halaman Link RSS. merupakan mengakses Halaman halaman yang halaman pengumuman. 12 Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 Gambar 23. Halaman Login Admin Gambar 21. Halaman RSS Link Apabila pengguna mengeklik salah satu Untuk dapat menggunakan halaman user name berita atau artikel yang ada di halaman Link RSS admin, admin harus memasukkan , akan menampilkan detail dari berita atau artikel dan password yang benar makan akan tampil tersebut. Berikut adalah tampilan dari artikel halaman home admin. Di halaman ini akan ada yang dipilih sebelumnya. beberapa menu seperti home, admin, RSS link, organisasi, pengumuman, dan logout. Berikut adalah tampilan halaman home. Gambar 22. Halaman Detail RSS Link 3.1.8 Gambar 24. Halaman Home Admin Halaman Login Admin Admin mengkases alamat www.bpmubd.com/admin, akan menampilkan halaman login untuk admin. Halaman ini dibuat terpisah dari situsWeb BPM dengan tujuan untuk memberikan keamanan pada data-data yang telah dibuat oleh admin sebelumnya. Di sini admin harus memasukan user name dan password yang benar sehingga dapat menggunakan fasilitas admin. Berikut adalah tampilan dari halaman login. 3.1.9 Halaman Admin Untuk dapat menggunakan halaman ini, pengguna harus login sebagai admin, Dengan cara memasukkan user name dan password sebagai admin. Setelah sukses, pilih menu ADMIN. Halaman admin merupakan halaman yang berisikan tool-tool yang bisa digunakan oleh admin, menghapus, dan seperti menambah mengedit username login, dan password yang sudah ada. Berikut adalah tampilan halaman admin. Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 13 3.1.10 Halaman RSS Link Untuk dapat menggunakan halaman ini, pengguna harus login sebagai admin, Dengan cara memasukkan user name dan password sebagai admin. Setelah sukses, pilih menu RSS LINK. Halaman RSS link merupakan halaman Gambar 25. Halaman Admin Pada halaman admin ada tool tambah, edit, dan hapus. Apabila admin mengeklik menu tambah yang digunakan untuk menambahkan RSS yang baru, mengedit, dan menghapus RSS yang sudah ada. Berikut adalah tampilan dari halaman RSS dam menambahkan dengan username “BPM” dan password “123” dan di simpan ke dalam database, maka akan tampil halaman tambah sebagai berikut : .Gambar 28. Halaman RSS Link 3.1.11 Halaman Organisasi Gambar 26. Halaman Tambah Admin Hasil dari tambah admin yang baru dibuat sebagai berikut : Untuk dapat menggunakan halaman ini, pengguna harus login sebagai admin, Dengan cara memasukkan user name dan password sebagai admin. Setelah sukses, pilih menu Organisasi. Halaman organisasi merupakan halaman yang digunakan untuk mengedit foto dan nama organisasi BPM. Berikut adalah tampilan dari halaman organisasi. Gambar 27. Hasil Tambah Admin 14 Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 Gambar 29. Halaman Organisasi Gambar 31. Halaman Tambah Pengumuman Berikut adalah hasil dari pengumuman yang 3.1.12 Halaman Pengumuman dibuat oleh admin. Untuk dapat menggunakan halaman ini, pengguna harus login sebagai admin, Dengan cara memasukkan user name dan password sebagai admin. Setelah sukses, pilih menu PENGUMUMAN. Halaman pengumuman merupakan halaman yang digunakan untuk membuat pengumuman baru, mengedit, dan menghapus pengumuman yang sudah ada. Berikut adalah tampilan dari halaman pengumuman. Gambar 32. Hasil Pengumuman Baru Ini adalah tampilan pengumuman di situs Web BPM yang terdapat di halaman pengumuman. Berikut adalah tampilan pengumuman yang baru dibuat. Gambar 30. Halaman Pengumuman Apabila admin mengeklik tool Tambah maka akan tampil seperti gambar berikut: Gambar 33. Hasil Pengumuman Baru di Halaman Pengumuman Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Mengggunakan Teknologi Really Simple Syndication (Tri Yulianto ) 15 4. Yogyakarta. SIMPULAN Dari hasil dan pembahasan yang sudah dijelaskan maka dapat disimpulkan sebagai berikut : 1. Situs Web BPM menggunakan berhasil bahasa dibangun PHP5 dengan framework CodeIgniter. 2. Situs Web BPM dapat di akses di www.bpmubd.com. 3. Menu-menu pada situs Web BPM sesuai dengan fungsinya setelah di jalankan dengan menggunakan web browser google chrome. 4. Situs Web BPM menggunakan Teknologi RSS dan memberikan RSS Feed sebagai umpan apabila situs Web lain ingin Komputer, Wahana. (2009). PHP Programing. Andi, Yogyakarta. Nazir, Moh. (2003). Metode Penelitian. Ghalia, Indonesia. Riduwan. (2004). Metode dan Teknik Menyusun Tesis. Alfabeta, Bandung. Rosa & Shalahudin. (2013). Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek. Informatika, Bandung. RSS, Bab4. Di akses 5 Mei 2015, Dari : http://ferryas.lecturer.pens.ac.id/2012 _2013/TekWeb/day-4.pdf. Simarmata, Janner. (2009). Rekayasa Web. Andi, Yogyakarta. memperoleh informasi BPM. 5. Dengan menggunakan RSS, akan memberikan kemudahan bagi pengguna dalam mencari berita dan artikel dari situs Web lain. 6. RSS pada situs Web BPM dapat berjalan dengan baik. DAFTAR RUJUKAN Basuki, Awan pribadi. (2014). Proyek Membangun Website Berbasis PHP dengan CodeIginiter. Lokomedia, Yogyakarta. Elyyani. Otomatisasi Integrasi Content Web Menggunakan Teknologi Really Simple Syndication (RSS). Di akses 29 April 2015, Dari :jurnal.lapan.go.id/index.php/berita_ dirgantara/article/download/.../1536. Kadir, Abdul. (2008). Belajar Database Menggunakan MySQL. Andi, 16 Jurnal Ilmiah Informatika Vol.xx No.2, Agustus 2015:1 -16 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/analisis-dan-perancangan-situs-web-biro-penjaminan-mutu-meng" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Menggunakan Teknologi Really Simple Syndication (RSS)"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <a href="https://adoc.pub/about">About Us</a> | <a href="https://adoc.pub/privacy">Privacy Policy</a> | <a href="https://adoc.pub/term">Terms of Service</a> | <a href="https://adoc.pub/copyright">Copyright</a> | <a href="https://adoc.pub/contact">Contact Us</a> | <a href="https://adoc.pub/cookie_policy">Cookie Policy</a> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

Analisis dan Perancangan Situs Web Biro Penjaminan Mutu Menggunakan Teknologi Really Simple Syndication (RSS)

Recommend Documents