rancang bangun sistem informasi sasaran kerja pegawai di dinas kominfo jatim

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Sesuai dengan Peraturan Pemerintah No 46 Tahun 2011 tentang

Penilaian Prestasi Kerja PNS, salah satunya setiap pegawai wajib untuk

melaporkan setiap kegiatan yang dia kerjakan. Keaktifan dalam

melaporkan kegiatan yang dikerjakan sangat penting, karena menunjang

penialain dan menentukan gaji yang di dapat.

Selama ini proses pelaporan kerja pegawai di Dinas Komunikasi

dan Informatika Prov Jawa Timur bagian PTIK masih menggunakan

proses manual, dengan menggunakan kertas, dan hanya dicetak pada saat

akan dilaporkan. Hal itu sangat tidak efisien karena kebanyakan pegawai

yang bekerja sudah memasuki usia senja, dan tak jarang para pegawai itu

lupa dengan kegaitan apa saja yang telah dikerjakan.

Dengan melihat permasalahan di atas, kami berinisiatif membuat

sebuah aplikasi berbasis web yang dapat melaporkan semua kegiatan yang

sudah di kerjakan oleh para pegawai, dengan hanya menginputkan data

kegiatan yang kemudian akan tersimpan dalam database. Kepala seksi

akan memberikan paraf kepada staff bawahannya dan Kepala bidang

hanya perlu mencari nama pegawai dan tanggal makan akan muncul

semua laporan kegiatan yang telah di inputkan para pegawai.

2

1.2 Rumusan Masalah

Dalam laporan ini kami akan memaparkan berapa rumusan masalah yang akan

dibahas, diantaranya :

a. Bagaimanakah rancangan aplikasi sasaran kinerja pegawai di Dinas

Komunikasi dan Informatika?

b. Bagaimanakah membuat aplikasi sesuai dengan rancangan yang telah

dibuat?

1.3 Tujuan dan Manfaat

1.3.1 Tujuan

Tujuan dari program kerja praktek ini yaitu:

1. Untuk membuat rancangan aplikasi Sasaran Kerja Pegawai di Dinas

Komunikasi dan Informatika Provinsi Jawa Timur.

2. Dapat membuat aplikasi sesuai dengan perancangan yang telah di

buat.

1.3.2 Manfaat

Adapun pembuatan website ini memberi manfaat bagi beberapa

pihak antara lain :

a. Bagi Dinas Kominfo Prov. Jawa timur :

3

1. Dapat membantu dalam proses pelaporan hasil kinerja tiap

pegawai.

2. Mempermudah pengarsipan data.

b. Manfaat bagi Unipdu :

Memberikan pengalaman kerja kepada mahasiswa dalam

rangka menerapkan/membandingkan teori dan pengetahuan

yang telah diterimanya di dalam perkuliahan atau praktikum

dengan situasi nyata di tempat KP dan mengerjakan tugas

khusus.

c. Manfaat bagi Mahasiswa :

1. Dapat mengerti dan memahami bagaimana proses bisnis

dalam sebuah perusahaan atau institusi.

2. Dapat belajar banyak tentang memanagemen kegiatan

3. Dapat membuat sebuah sistem yang bermanfaat.

1.4 Visi dan Misi Perusahaan

1.4.1 Visi

“Terwujudnya Penyebarluasan Informasi dan Pelayanan Publik

melalui TIK di Jawa Timur”

1.4.2 Misi

1. Meningkatkan kapasitas layanan penyebaran informasi,

memberdayakan potensi masyarakat serta kerjasama lembaga

komunikasi dan informatika.

4

2. Mengembangkan aplikasi, muatan layanan publik, standarisasi

penyelenggaraan pos dan telekomunikasi serta pemanfaatan

jaringan TIK dalam rangka peningkatan pelayanan publik.

1.5 Batasan Masalah

Adapun batasan masalah yang dibahas dalam Laporan Kerja

Praktek ini adalah tentang membuat Rancang Bangun Sistem Informasi

Sasaran Kerja Pegawai yang ada di Dinas Komunikasi dan Informatika

Provinsi Jawa Timur.

1.6 Metodologi Penulisan

Metodologi yang digunakan dalam penulisan pada laporan kerja praktek ini

adalah sebagai berikut :

1.6.1. Metode Pengumpulan Data

Metode pengumpulan data dalam penelitian ini adalah sebagai berikut:

i. Wawancara yaitu pengumpulan data dengan berkomunikasi langsung

dengan pegawai untuk mendapatkan gambaran alur pendistribusian

data.

5

ii. Observasi yaitu pengumpulan data dengan mengadakan tinjauan

langsung terhadap Dinas Komunikasi dan Informatika Prov. Jawa

Timur.

1.6.2. Metode Analisis Data

Setelah data terkumpul, data dianalisis untuk dapat mempermudah

menentukan masalah dan kendala yang dihadapi pihak Dinas

Komunikasi dan Informatika Provinsi Jawa Timur. Dari masalah yang

ada, diambil kesimpulan spesifikasi aplikasi yang akan dibangun.

1.6.3. Metode Pengembangan Website

Secara prinsip metode pengembangan website bertujuan untuk

membantu menghasilkan aplikasi yang berkualitas. Dalam hal ini

metode yang digunakan adalah metode Waterfall.

Berikut tahapan dalam metode waterfall :

1. System / Information Engineering and Modeling. Permodelan

ini diawali dengan mencari kebutuhan dari keseluruhan sistem yang

akan diaplikasikan ke dalam bentuk software. Hal ini sangat

penting, mengingat software harus dapat berinteraksi dengan

elemen-elemen yang lain seperti hardware, database, dsb. Tahap ini

sering disebut dengan Project Definition.

6

2. Software Requirements Analysis. Proses pencarian kebutuhan

diintensifkan dan difokuskan pada software. Untuk mengetahui

sifat dari program yang akan dibuat, maka para software engineer

harus mengerti tentang domain informasi dari software, misalnya

fungsi yang dibutuhkan, user interface, dsb. Dari 2 aktivitas

tersebut (pencarian kebutuhan sistem dan software) harus

didokumentasikan dan ditunjukkan kepada pelanggan.

3. Design. Proses ini digunakan untuk mengubah kebutuhan-

kebutuhan diatas menjadi representasi ke dalam bentuk “blueprint”

software sebelum coding dimulai. Desain harus dapat

mengimplementasikan kebutuhan yang telah disebutkan pada tahap

sebelumnya. Seperti 2 aktivitas sebelumnya, maka proses ini juga

harus didokumentasikan sebagai konfigurasi dari software.

4. Coding. Untuk dapat dimengerti oleh mesin, dalam hal ini adalah

komputer, maka desain tadi harus diubah bentuknya menjadi

bentuk yang dapat dimengerti oleh mesin, yaitu ke dalam bahasa

pemrograman melalui proses coding. Tahap ini merupakan

implementasi dari tahap design yang secara teknis nantinya

dikerjakan oleh programmer.

5. Testing / Verification. Sesuatu yang dibuat haruslah diujicobakan.

Demikian juga dengan software. Semua fungsi-fungsi software

harus diujicobakan, agar software bebas dari error, dan hasilnya

7

harus benar-benar sesuai dengan kebutuhan yang sudah

didefinisikan sebelumnya.

6. Maintenance. Pemeliharaan suatu software diperlukan, termasuk

di dalamnya adalah pengembangan, karena software yang dibuat

tidak selamanya hanya seperti itu. Ketika dijalankan mungkin saja

masih ada errors kecil yang tidak ditemukan sebelumnya, atau ada

penambahan fitur-fitur yang belum ada pada software tersebut.

Pengembangan diperlukan ketika adanya perubahan dari eksternal

perusahaan seperti ketika ada pergantian sistem operasi, atau

perangkat lainnya.

1.7 Sistematika Penulisan

Adapun sistematika penulisan yang digunakan dalam menyusun

laporan kerja praktek ini adalah :

1. BAB I : PENDAHULUAN

Bab ini menjelaskan latar belakang, tujuan dan manfaat kerja praktek

serta tujuan dan manfaat penulisan laporan kerja praktek, visi dan misi

perusahaan, batasan masalah penulisan laporan, metode penelitian yang

di gunakan dalam penyusunan laporan, dan sistematika penyusunan

laporan kerja praktek.

2. BAB II : LANDASAN TEORI

Bab ini berisi tentang penjelasan teori tentang sistem, sasaran kerja

pegawai,penjelasan tentang bagian-bagian dalam UML(use case diagram,

8

class diagram, activity diagram, dan sequence diagram), penggunaan

bahasa pemrograman PHP, penggunaan database MySql, Xampp,

HTML5, Css, JavaScript, JQuery, sereta penggunaan Notepad dan

sublime sebagai editor.

3. BAB III : PROFIL PERUSAHAAN

Bab ini menjelaskan tentangkedudukan dan alamat perusahaan,

struktur yang ada diperusahaan, tujuan dan sasaran, posisi dalam kerja

praktik, serta structural dalam bidang kerja praktek.

4. BAB IV : PEMBAHASAN

Membahas tentang kegiatan yang dilakukan selama Kerja Praktek

dan tentang Perancangan Sistem dan Implementasi Sistem tersebut.

5. BAB V : KESIMPULAN DAN SARAN

Bab ini menjelaskan tentang kesimpulan dan saran.

9

BAB II

LANDASAN TEORI

2.1 SISTEM

Sistem adalah seperangkat elemen yang membentuk kumpulan atau

procedure – procedure atau bagan – bagan pengolahan yang mencari suatu

tujuan bagian atau tujuan bersama dengan mengoperasikan data dan / atau

barang pada waktu rujukan tertentu untuk menghasilkan informasi dan /

atau energi dan / atau barang. (Murdick, R.G, 1991)

Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk

mencapai suatu tujuan tertentu. Sistem ini menggambarkan suatu kejadian-

kejadian dan kesatuan yang nyata adalah suatu objek nyata, seperti tempat,

benda, dan orang-orang yang betul-betul ada dan terjadi. (Jogianto,2005)

Elemen – elemen sistem antara lain :

Ada beberapa elemen yang membentuk sebuah sistem, yaitu : tujuan,

masukan, proses, keluaran, batas, mekanisme pengendalian dan umpan balik

serta lingkungan. Berikut penjelasan mengenai elemen-elemen yang

membentuk sebuah sistem :

a. Tujuan

10

Sebuah sistem sudah tentu mempunyai sasaran ataupun tujuan.

Dengan adanya sasaran sistem, maka kita dapat menentukan masukan yang

dibutuhkan sistem dan keluaran apa yang akan dihasilkan sistem tersebut

dapat dikatakan berhasil apabila mencapai/mengenai sasaran atau pun

tujuan. (Jogianto,2005)

b. Masukan

Masukan (input) sistem adalah energi yang masukan kedalam sistem.

masukan dapat berupa masukan perawatan (maintenance input), dan

masukan sinyal (signal input). Maintenance input adalah energi yang

dimasukan supaya tersebut dapat beroperasi.signal input adalah energi yang

diproses untuk didapatkan keluaran. sebagai contoh didalam komputernya

dan data adalah signal input untuk diolah menjadi informasi.

(Jogianto,2005)

c. Proses

Suatu sistem dapat mempunyai suatu bagian pengolah yang akan

merubah masukan menjadi keluaran. suatu sistem produksi akan mengolah

masukan berupa bahan baku dan bahan-bahan yang lain menjadi keluaran

berupa barang jadi. (Jogianto,2005)

d. Keluaran

Keluaran (output) sistem adalah hasil dari energi yang diolah dan

diklafikasikan menjadi keluaran yang berguna dan sisa pembuangan.

misalnya untuk sistem komputer, panas yang dihasilkan adalah keluaran

11

yang tidak berguna dan merupakan hasil sisa pembuangan, sedang informasi

adalah keluaran yang dibutuhkan. (Jogianto,2005)

e. Batas

Batasan sistem (boundary) merupakan daerah yang membatasi antara

suatu sistem dengan sistem yang lainnya atau dengan lingkungan luarnya.

batasan suatu sistem menunjukan ruang lingkup dari sistem tersebut.

(Jogianto,2005)

f. Mekanisme Pengendalian dan Umpan Balik

Mekanisme pengendalian (control mechanism) diwujudkan dengan

menggunakan umpan balik (feedback), yang mencuplik keluaran. Umpan

balik ini digunakan untuk mengendalikan baik masukan maupun proses.

Tujuannya adalah untuk mengatur agar sistem berjalan sesuai dengan

tujuan. (Jogianto,2005)

7. Lingkungan

Lingkungan luar (evinronment) dari suatu sistem adalah apapun diluar

batas sistem yang mempengaruhi operasi. Lingkungan luar sistem dapat

bersifat menguntungkan dana dapat juga bersifat menguntungkan sistem

tersebut. Lingkungan luar yang menguntungkan berupa energi dari sistem

dan dengan demikian harus tetap dijaga dan dipelihara. sedang lingkunagn

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

menggangu kalangsungan hidup dari sistem. (Jogianto,2005)

12

2.2 Sasaran Kerja Pegawai

SKP adalah Sasaran Kerja Pegawai yang ada dalam salah satu unsur

di dalam Penilaian Prestasi Kerja PNS yang diatur dalam Peraturan

Pemerintah Nomor 46 Tahun 2011. Penilaian pelaksanaan pekerjaan

pegawai negeri sipil merupakan suatu kegiatan yang dilakukan untuk

mengevaluasi tingkat pelaksanaan pekerjaan seorang pegawai yang di

lakukan oleh atasan kepada pegawai. (PP No. 46, 2011)

Penilaian prestasi kerja PNS merupakan suatu proses penilaian secara

sistematis yang dilakukan oleh pejabat penilai terhadap sasaran kerja

pegawai dan perilaku kerja PNS (Pasal 1 ayat 2 PP No. 46 Tahun 2011).

Tujuannya adalah untuk mengevaluasi kinerja PNS , yang dapat memberi

petunjuk bagi manajemen dalam rangka mengevaluasi kinerja unit dan

kinerja organisasi secara keseluruhan. Penilaian prestasi kerja PNS

menggabungkan antara penilaian Sasaran Kerja Pegawai Negeri Sipil

dengan Penilaian Perilaku Kerja. Penilaian prestasi kerja tersebut terdiri dari

dua unsur yaitu SKP (sasaran kerja pegawai) dan Perilaku Kerja dengan

bobot penilaian masing-masing unsur SKP sebesar 60 % dan Perilaku Kerja

sebesar 40 %.

Unsur Sasaran Kerja Pegawai :

a. Kualitas

b. Kuantitas

c. Waktu

13

d. Biaya (PP No 46,2011)

2.3 UML

Unfied Modelling Language (UML) adalah keluarga notasi grafis

yang didukung oleh meta-model tunggal, yang membantu pendeskripsian

dan desain sistem perangkat lunak, khususnya sistem yang dibangun

menggunakan pemrograman berorientasi objek (OO). UML merupakan

standar yang relatif terbuka yang dikontrol oleh Object Management

Company (OMG), sebuah konsorsium terbuka yang terdiri dari banyak

perusahaan. (Martin Fowler, 2005)

UML (Unified Modeling Language) adalah sebuah bahasa yang berdasarkan

grafik atau gambar untuk memvisualisasi, menspesifikasikan, membangun dan

pendokumentasian dari sebuah sistem pengembangan software berbasis Object

Oriented. UML juga memberikan standar penulisan sebuah sistem blue print, yang

meliputi konsep bisnis proses, penulisan kelas-kelas dalam bahasa program yang

spesifik, skema database, dan komponen-komponen yang diperlukan dalam sistem

software. (Nuvan Balafif,2015)

14

2.3.1 Use Case Diagram

Use Case Diagram adalah teknik untuk merekam persyaratan

fungsional sebuah sistem. Use Case mendeskripsikan interaksi tipikal

antara para pengguna sistem dengan sistem itu sendiri, dengan memberi

sebuah narasi tentang bagaimana sistem tersebut digunakan. Use Case

Diagram menampilkan aktor mana yang menggunakan use case mana,

uses case mana yang memasukkan use case lain dan hubungan antara

aktor dan use case. (Martin Fowler,2005)

2.3.2 Class Diagram

Class diagram merupakan himpunan dari objek-objek yang sejenis.

Sebuah objek memiliki keadaan sesaat (state) dan perilaku (behavior).

State sebuah objek adalah kondisi objek tersebut yang dinyatakan

dalam attribute/properties. Sedangkan perilaku suatu objek

mendefinisikan bagaimana sebuah objek bertindak/beraksi dan

memberikan reaksi. (Munawar,2005)

2.3.3 Activity Diagram

Activity diagram adalah teknik untuk menggambarkan logika

prosedural, proses bisnis, dan jalur kerja. Dalam beberapa hal, activity

diagram memainkan peran mirip diagram alir, tetapi perbedaan prinsip

15

antara notasi diagram alir adalah activity diagram mendukung behavior

paralel. Node pada sebuah activity diagram disebut sebagai action,

sehingga diagram tersebut menampilkan sebuah activity yang tersusun

dari action. (Martin Fowler ,2005)

2.3.4 Sequence Diagram

Sequence diagram adalah grafik dua dimensi dimana obyek

ditunjukkan dalam dimensi horizontal, sedangkan lifeline ditunjukkan

dalam dimensi vertikal. (Munawar ,2005)

Sequence diagram adalah suatu diagram interaksi yang

menekankan pada pengaturan waktu dari pesan-pesan. Diagram

ini menampilkan sekumpulan peran dan pesan-pesan yang dikirim

dan diterima oleh instansi yang memegang peranan tersebut.

Sequence diagram menangkap objek dan class yang terlibat dalam

skenario dan urut-urutan pesan yang ditukar antara objek diperlukan

untuk melaksanakan fungsionalitas skenario. Sequence diagram

berasosiasi dengan use case selama proses pengembangan. Dalam

Unified Model Language (UML), objek dalam sequence diagram

digambar dengan segiempat yang berisi nama objek yang diberi garis

bawah. Objek dapat diberi nama dengan tiga cara : (nama objek), (nama

objek dan class) atau (hanya nama class (anonymous object)). (Booch

,2005)

16

2.4 PHP

PHP merupakan bahasa scripting server-side, dimana pemrosesan

datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan

menerjemahkan skrip program, baru kemudian hasilnya akan dikirim

kepada client yang melakukan permintaan. (Didik Dwi Presetyo,2004)

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:

a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaannya.

b. Web Server yang mendukung PHP dapat ditemukan dimana - mana

dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi

yang relatif mudah.

c. Lebih mudah dikembangkan.

d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling

mudah karena memiliki referensi yang banyak.

2.5 MySql

MySQL merupakan salah satu database server yang berkembang di

lingkungan open source dan didistribusikan secara free (gratis) dibawah

lisensi GPL. (Didik Dwi Prasetyo,2004)

MySQL merupakan RDBMS (Relational Database Management

System) server. RDBMS adalah program yang memungkinkan pengguna

17

database untuk membuat, mengelola, dan menggunakan data pada suatu

model relational. Dengan demikian, tabel-tabel yang ada pada database

memiliki relasi antara satu tabel dengan tabel lainnya.

Adapun keunggulan yang bisa diberikan oleh Mysql adalah sebagai

berikut:

1. Cepat, handal dan Mudah

Dalam penggunaannya MySQL lebih cepat tiga sampai empat kali

dari pada database server komersial yang beredar saat ini, mudah

diatur dan tidak memerlukan seseorang yang ahli untuk mengatur

administrasi pemasangan MySQL.

2. Didukung oleh berbagai bahasa

Database server MySQL dapat memberikan pesan error dalam

berbagai bahasa seperti Belanda, Portugis, Spanyol, Inggris,

Perancis, Jerman, dan Italia.

3. Mampu membuat tabel berukuran sangat besar

Ukuran maksimal dari setiap tabel yang dapat dibuat dengan

MySQL adalah 4 GB sampai dengan ukuran file yang dapat

ditangani oleh sistem operasi yang dipakai.

4. Lebih Murah

MySQL bersifat open source dan didistribusikan dengan gratis

tanpa biaya untuk UNIX platform, OS/2 dan Windows platform.

5. Melekatnya integrasi PHP dengan MySQL

18

Keterikatan antara PHP dengan MySQL yang sama-sama software

opensource sangat kuat, sehingga koneksi yang terjadi lebih cepat

jika dibandingkan dengan menggunakan database server lainnya.

Modul MySQL di PHP telah dibuat built-in sehingga tidak

memerlukan konfigurasi tambahan pada file konfigurasi php ini.

2.6 XAMPP

XAMPP adalah sebuah software yang berfungsi untuk menjalankan

website berbasis PHP dan menggunakan pengolah data MySQL dikomputer

local. (Yogi wicaksono,2008)

XAMPP berperan sebagai server web pada komputer anda. XAMPP

juga dapat disebut sebuah C-Panel server virtual, yang dapat membantu

anda melakukan preview sehingga dapat memodifikasi website tanpa

harus online atau terakses dengan internet.

2.7 HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan

menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari

Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali

diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada

tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan.

https://id.wikipedia.org/wiki/Juni_2011

https://id.wikipedia.org/wiki/1997

https://id.wikipedia.org/wiki/1990

https://id.wikipedia.org/wiki/HTML

https://id.wikipedia.org/wiki/Internet

https://id.wikipedia.org/w/index.php?title=Waring_Wera_Wanua&action=edit&redlink=1

https://id.wikipedia.org/wiki/Bahasa_markah

19

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki

teknologi HTML agar mendukung teknologi multimedia terbaru, mudah

dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera

Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah

bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun

XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan

XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan

secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Berikut tujuan dibuatnya HTML5 :

a. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

b. Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

c. Penanagan kesalahan yang lebih baik

d. Lebih markup untuk menggantikan scripting

e. HTML5 merupakan perangkat mandiri

f.Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

a. Unsur kanvas untuk menggambar

b. Video dan elemen audio untuk media pemutaran

c. Dukungan yang lebih baik untuk penyimpanan secara offline

d. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav,

section.

https://id.wikipedia.org/wiki/Perangkat_lunak

https://id.wikipedia.org/wiki/Konsortium_Waring_Wera_Wanua

https://id.wikipedia.org/wiki/Konsortium_Waring_Wera_Wanua

https://id.wikipedia.org/wiki/HTML

20

e. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

2.8 Css (Cascading Style Sheets)

CSS adalah suatu bahasa stylesheet yang mengatur tampilan suatu

dokumen. ( Saleh & Rubianto,2008)

Pada umumnya CSS digunakan untuk memformat halaman web yang

ditulis dengan HTML dan XHTML.Dengan CSS, tampilan website akan

lebih cantik dan konsisten. Ada dua cara menuliskan kode CSS, yaitu :

1. Internal dengan cara menuliskan langsung diantara tag

HTML/XHTML.

2. External dengan cara menyimpan CSS kedalam file yang terpisah

kemudian dipanggil didalam Web saat dibuka.

2.9 Java Script

Java Script adalah bahasa pemrograman yang diinterpretasikan bukan

di compile, diadopsi dari bahasa C/C++ yang dikembangkan menjadi bahasa

pemrograman web client side. Java script didesain untuk bekerja sama

dengan HTML membuat web page yang interaktif. (Brooks,2007)

21

Java Script adalah bahasa pemrograman yang digabungkan dengan

HTML untuk membuat halaman web yang beranimasi, interaktif dan

memiliki visual effect yang dinamis. (Farland & Sawyer,2008)

2.10 JQuery

JQuery adalah library JavaScript multiplatform yang dirancang untuk

memudahkan penyusunan client-side script pada file HTML. Digunakan

oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia,

JQuery adalah library JavaScript yang paling populer saat ini. JQuery

merupakan sebuah perangkat lunak bebas sumber terbuka yang berada

dibawah lisensi MIT. Syntax JQuery dirancang sedemikian rupa untuk

memudahkan pengembang website dalam menavigasi dokumen, menyeleksi

elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta

membangun aplikasi AJAX.

Fitur-fitur inti jQuery meliputi penyeleksian, traversal, dan manipulasi

elemen-elemen DOM dimampukan oleh sebuah selector engine

(dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya

pemrograman baru yang memadukan antara algoritma dan struktur data

DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript

lainnya seperti YUI v3 dan Dojo, dan kemudian menstimulasi

pengembangan Selectors API standar.

Keuntungan dari pemanfaatan JQuery antara lain:

22

a. Memisahkan JavaScript dan HTML : Tanpa menggunakan atribut-

atribut HTML untuk memanggil fungsi Javascript dalam

penanganan event, JQuery bisa dipergunakan untuk menangani

event dengan script JS saja.

b. Singkat dan Jelas : JQuery mengutamakan penulisan kode yang

singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang

dapat dirangkaikan (chain-able) dan nama-nama fungsi yang

pendek.

c. Mengatasi masalah kompatibilitas antar – browser : JavaScript

engine pada berbagai browser memiliki perbedaan satu sama lain,

sehingga script yang berjalan pada suatu browser bisa gagal pada

browser lainnya. JQuery mengatasi segala inkonsistensi antar-

browser tersebut dan menyajikan antarmuka yang konsisten

bekerja pada semua browser.

d. Ekstensibel : JQuery menjadikan pengembangan framework

sangat simpel. Berbagai event, elemen, dan metode baru dapat

dengan mudah ditambahkan dan digunakan ulang sebagai plugin.

Fitur-fitur JQuery :

a. Penyeleksian elemen-elemen DOM menggunakan selector engine

Sizzle. Sizzlemerupakan perangkat lunak multiplatform sumber

terbuka yang berawal sebagai proyek sampingan jQuery.

23

b. Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan

nama-nama dan atribut elemen, misalnya id dan class, sebagai

kriteria seleksi simpul-simpul DOM.

c. Events

d. Efek dan animasi

e. AJAX

f. Obyek-obyek deferred and promose untuk mengontrol pemrosesan

asinkron

g. Penguraian JSON

h. Ekstensibilitas melalui plugin

i. Sejumlah utilitas, misalnya: informasi agen pengguna (user

agent), deteksi fitur perangkat

j. Metode-metode kompatibilitas yang tersedia secara bawaan pada

browser-browser modern, namun membutuhkan pencadangan

pada browser yang lebih tua, misalnya `inArray()` dan `each`

k. Dukungan multi-browser.

2.11 Notepad++

Notepad++ adalah Code Editor (software penyunting kode) yang

mendukung berbagai bahasa pemrograman seperti HTML, CSS, PHP,

XML, Java, JSP, JavaScript, Perl Pascal, dan lain-lain yang dapat bekerja

pada System Operasi Windows. Kelebihan Notepad++ jika dibanding

Notepad bawaan Windows adalah memiliki kelengkapan fitur untuk

24

mempermudah pengguna saat mengedit kode termasuk saat mengedit kode

HTML dan kode CSS.

Fitur-fitur Notepad++ :

a. Tabbed document interface

b. Drag-and-drop

c. Multiple Clipboard (plugin required)

d. Split screen editing and synchronized scrolling

e. Spell checker (requires Aspell) (Spell checker does not distinguish

between text and code)

f. Supports text encoding formats such as Unicode, for international

writing systems

g. Find and replace over multiple documents

h. File comparison

i. Zooming

j. Syntax Highlighting dan syntax folding, yang memudahkan pengguna

dengan manampilakan warna yang berbeda dalam penulisan syntax

agar lebih mudah dikenali.

k. WYSIWYG (What You See Is What You Get) sehingga pengguna

dapat mencetak hasil sesuai yang dituliskan dalam program termasuk

warna dan konfigurasi font syntaxnya.

l. Style Configurator, yang memungkinkan Software Notepad++ untuk

mengatur warna background, huruf ukuran dan jenisnya.

25

m. Multi-Document, yang memungkinkan Software Notepad++ mengedit

dua file secara bersamaan.

n. Multi-View, yang memungkinkan Software Notepad++ membuka

banyak file dalam satu window dengan tab yang user friendly.

o. Search support, mempermudah pencarian kata kunci pada syntax yang

rumit dan banyak.

Namun kelemahan software ini hanya mampu digunakan untuk

mengedit source code program saja, untuk melakukan compile dan running

code program tetap harus dilakukan pada compiler bahasa pemograman

yang bersangkutan.

2.12 Sublime

Sublime Text adalah teks editor berbasis Python, sebuah teks editor

yang elegan, kaya akan fitur, cross-platform, mudah dan simpel yang cukup

terkenal di kalangan pengembang, penulis, dan desainer. Para programmer

biasanya menggunakan sublime Text untuk menyunting source code yang

sedang ia kerjakan. Sampai saat ini Sublime Text sudah mencapai pada

versi 3 Beta.

Berikut ini adalah beberapa kelebihan yang di milki Sublime Text:

a. Multi Platform

26

Kelebihan pertama dari Sublime Text adalah software ini tersedia

dalam berbagai platform sistem operasi, antara lain Windows, Linux

dan MacOs.

b. Plugin

Plugin-nya sangat beragam, sehingga bisa memudahkan programmer

dalam mengembangkan software-nya.

c. Tema dan color scheme yang bervariasi, Anda bahkan bisa

membuatnya sendiri atau mendownloadnya secara terpisah.

d. Membuka File Besar

Sublime Text mampu membuka dan mengedit sebuah file teks yang

sangat besar tanpa masalah.

e. Drag & Drop

Menyeret dan melepas file teks ke dalam editor akan membuka tab

baru secara otomatis. Anda juga bisa menentukan lokasi tab pada saat

menyeret file teks tersebut.

f.Membuka banyak dokumen sekaligus ke dalam tab baru

g. Editor Sublime Text yang terpisah bisa di jadikan sebagai tab

Editor Sublime Text pada jendela terpisah bisa jadikan sebagai tab

baru dengan cara di seret. Tampilan jendela dapat dibagi baik secara

vertikal maupun horizontal.

27

BAB III

PROFIL PERUSAHAAN

3.1 Kedudukan dan Alamat

A. Kedudukan

Dinas Komunikasi dan Inforrnatika merupakan unsur pelaksana

otonomi daerah, dipimpin oleh seorang kepala dinas, yang berada di bawah dan

bertanggung jawab kepada Gubernur melalui Sekretaris Daerah.

B. Alamat

Dinas Komunikasi dan Informatika Pemerintah Provinsi Jawa Timur

Jl. Ahmad Yani 242-244 Surabaya

email : [email protected]

website : http://kominfo.jatimprov.go.id

Telp. (031) 8294608, Fax (031) 8294517

Peta Lokasi :

28

Gambar 1. Peta Lokasi Dinas Kominfo Prov. Jatim

3.2 Tujuan Dan Sasaran

A. Tujuan

1. Meningkatkan pengetahuan, kecerdasan, pemberdayaan dan

kesejahteraan masyarakat melalui penyelenggaraan komunikasi dan

informatika dalam rangka meningkatkan keterbukaan informasi

public.

2. Meningkatkan layanan pemanfaatan, infrastruktur TIK secara tertib

adminisytrasi penyelenggaraan pos dan telekomunikasi.

B. Sasaran

a. Meningkatnya diseminasi informasi dan keterbukaan pelayanan

public.

29

b. Meningkatnya pemberdayaan masyarakat melalui jaringan


c. Meningkatnya pengembangan dan pemanfaatan infrastruktur TIK

serta layanan public.

d. Meningkatnya layanan penyelenggaraan pos dan telekomunikasi.

3.3 Tugas dan Fungsi

A. Tugas

Dinas Komunikasi dan Informatika mernpunyai tugas melaksanakan urusan

pemerintahan daerah berdasarkan asas otonomi dan tugas pembantuan di

bidang komunikasi dan informatika.

B. Fungsi

a. Perumusan kebijakan teknis di bidang komunikasi dan informatika .

b. Penyelenggaraan urusan pemerintahan dan pelayanan umum di bidang


c. Pembinaan dan pelaksanaan tugas sesuai dengan lingkup tugasnya.

d. Pelaksanaan tugas lain yang diberikan oleh Gubernur.

30

3.4 Struktur Organisasi Perusahaan

b. Struktur Organisasi

Dinas Komunikasi dan Informatika, terdiri atas :

a. Kepala Dinas

b. Sekretariat, membawahi :

1. Sub Bagian Tata Usaha.

2. Sub Bagian Penyusunan Program.

3. Sub Bagian Keuangan.

c. Bidang Pengembangan Teknologi Informatika, membawahi:

1. Seksi Pengembangan Perangkat Lunak.

2. Seksi Pengembangan Perangkat Keras.

3. Seksi Layanan Teknologi Informasi dan Komunikasi.

iii. Bidang Diseminasi dan Informasi, membawahi :

1. Seksi Layanan Informasi Publik.

2. Seksi Media Interaktif.

3. Seksi Media Informasi.

iv. Bidang Jaringan Komunikasi, membawahi :

1. Seksi Komunikasi Sosial.

2. Seksi Kemitraan Profesi Komunikasi dan Informasi.

3. Seksi Komunikasi Pemerintah.

v. Bidang Pemberdayaan Teknologi Informasi dan Komunikasi,

membawahi :

31

1. Seksi Pemberdayaan Teknologi Informasi dan Komunikasi

Pemerintah.

2. Seksi Pemberdayaan Teknologi Informasi dan Komunikasi

Masyarakat.

3. Seksi Pengembangan Muatan Teknologi Informasi dan

Komunikasi.

vi. Bidang Pos dan Telekomunikasi, membawahi :

1. Seksi Pos dan Filateli.

2. Seksi Telekomunikasi.

3. Seksi Pengawasan dan Penertiban.

vii. Bidang Pengelolaan Infrastruktur Teknologi Informasi dan

Komunikasi, membawahi:

1. Seksi Pengembangan Infrastruktur Teknologi Informasi dan

Komunikasi ;

2. Seksi Pengendalian Infrastruktur Teknologi Informasi dan

Komunikasi;

3. Seksi Pemeliharaan Infrastruktur Teknologi Informasi dan

Komunikasi.

viii. Unit Pelaksana Teknis Dinas.

ix. Kelompok Jabatan Fungsional

32

3.4 Pejabat Struktural

No Nama Jabatan 1 Ir. Eddy Santoso, MM Kepala Dinas 2 RR. Sri Ambarrukmi W, SH Sekretaris 3 Agus Budi Sartama, BA Kepala Sub Bagian Tata Usaha 4 Eko Roedhy Loegmanto, SH Kepala Sub Bagian Penyusunan Program5 Samsuri, S.Sos, M.Si Kepala Sub Bagian Keuangan 6 Ambar Sulistyorini, SH, MM Kabid Jaringan Komunikasi 7 Hari Tunariono, S.Sos, MA Kasi Kemitraan Profesi Kominfo 8 Anie Susi Lestari, SE, M.Si Kasi Komunikasi Sosial 9 M. Rahmat, SE, MM Kasi Komunikasi Pemerintah 10 Drs. Mardijono, M.Si. Kabid Pemberdayaan TIK 11 Sofia Kurniawati, SE, M.Si Kasi Pemberdayaan TIK Pemerintah 12 Dra. Oetami Trisna Sayekti Kasi Pemberdayaan TIK Masyarakat 13 Yanti Dyah Harsono, S.Sos, M.Si Kasi Pengembangan Muatan TIK 14 Ir. Djoko Purwono, M.T Kabid Pengembangan TI 15 Dendy Eka Puspawadi,S.Si Kasi Layanan Teknologi Informatika 16 Dra.Ec.Nirmala Dewi, M.M Kasi Pengembangan Perangkat Keras 17 Hartanto, SH, MM Kasi Pengembangan Perangkat Lunak 18 Ir. Sri Hardriyanti, M.MT Kabid Diseminasi dan Informasi 19 Tutik Wora Wari, S.Sos Kasi Media Interaktif 20 Alimudin, S.Sos, M.Si Kasi Media Informasi 21 Agus Dwi Muhanan, S.Sos, MM Kasi Layanan Informasi Publik 22 Ir. Hagung Sipri, M.M Kabid Pengelolaan Infrastuktur TIK 23 Ir. Agung Martono Kasi Pemeliharaan Infrastruktur TIK 24 Agus Budi Sampurno, SE Kasi Pengendalian Infrastruktur TIK 25 Drs. M. Natsir. M.Si Kasi Pengembangan Infrastruktur TIK 26 Sigit Prasetyadi,SH, M.M Kabid Pos dan Telekomunikasi 27 Idham Ashari Kasim Putra, ST, MM Kasi Telekomunikasi 28 Dra. Roestiningsih, MM Kasi Pos dan Filateli 29 Dewi Mariza, S.Sos Kasi Pengawasan dan Penertiban

Tabel 1. Tabel Pejabat Struktural Dinas Kominfo

3.5 Posisi Kerja dalam Kerja Praktek

Dalam proses Kerja Praktik ini, kami di tugaskan pada bagian

Pemberdayaan Teknologi Informasi dan Komunikasi(PTIK). Pada Bidang

33

Pemberdayaan Teknologi Informasi dan Komunikasi(PTIK) terdapat 14

anggota dan terbagi dalam 3 seksi.

A. Struktural dalam PTIK

Berikut daftar struktural dalam Bidang Pemberdayaan Teknologi

Informasi dan Komunikasi(PTIK) :

No NIP Nama Nama Jabatan Unit Organisasi1. 19590125

198003 1 005

Drs, Mardijono,

M.Si

Kabid PTIK Dinas Komunikasi

dan Informatika

2. 19661117 199011 2

001

Sofia Kurniawati, S.E., M.Si

Kasi PTIK Pemerintah

Bidang PTIK

3. Pengolah Data PTIK Pemerintah

Seksi PTIK Pemerintah

4. 19671113 200701 1

023

Sucipto Pengolah Data PTIK Pemerintah


5. 199911117 201503 2

002

Gigih Redana Putry Wahana,

Amd

Pelaksana PTIK Pemerintah


6. Pelaksana Penerapan E-Government TIK

bagi Pemerintah


7. 19620419 198303 2

006

Dra. Oetami Trisna Sayekti

Kasi PTIK Masyarakat

Bidang PTIK

8. 19830331 201001 2

009

Ana Eristia Wulandari,

S.Kom

Pranata Komputer Seksi PTIK Masyarakat

9. 19630321 199003 2

002

Maria Odete C.E.S. Silva

Pelaksana Penerapan TIK Pemerintah/

Telecenter

Seksi PTIK Masyarakat

10. 19660630 201212 1

001

Hamidun Pelaksana Penerapan TIK Pemerintah/

Telecenter


34

11. 19701121 100701 1

013

Marsudi Pelaksana Penerapan TIK Pemerintah/

Telecenter


12. 19670518 199003 3

009

Yanti Dyah Harsono,

S.Sos, M.Si

Kasi Pengembangan Muatan Teknologi

Informasi

Bidang PTIK

13. 19661112 198603 3

006

Tutik Supriyati

Pengolah data Pengembangan

Muatan TIK

Seksi Pengembangan

Muatan Teknologi Informasi

14. 19770626 201001 2

005

Retno Yuni Widayaningsih

,ST


Muatan TIK

Seksi Pengembangan


15. 19661129 199602 1

001

Heri Dwi Oetojo


Muatan TIK

Seksi Pengembangan


16. 19660201 198903 1

018

Nurhadi Pelaksana Perekam Data Muatan Website

Pemprov. Jatim

Seksi Pengembangan Muatan Teknologi Informasi

Tabel 2. Sruktural PTIK

B. Sasaran kerja Bidang PTIK

Bidang Pemberdayaan Teknologi Informasi dan Komunikasi

mempunyai tugas melakukan pemberdayaan telematika pemerintahan,

masyarakat dan pengembangan muatan telematika.

Bidang Pemberdayaan Teknologi Informasi dan Komunikasi, membawahi:

a. Seksi Pemberdayaan Teknologi Informasi dan Komunikasi

Pemerintah, mempunyai tugas:

35

i. Menyiapkan pengumpulan bahan pemberdayaan Telematika

pemerintahan.

ii. Menyiapkan bahan penyusunan pedoman dalam rangka

pemberdayaan Telematika Pemerintahan.

iii. Menyiapkan bahan fasilitasi penerapan telematika pemerintahan.

iv. Menyiapkan bahan koordinasi dibidang pemberdayaan

telematika pemerintahan.

v. melaksanakan tugas-tugas lain yang diberikan oleh Kepala

Bidang.

b. Seksi Pemberdayaan Teknologi Informasi dan Komunikasi

Masyarakat, mempunyai tugas:

i. Menyiapkan bahan pengumpulan bahan pemberdayaan

Telematika bagi masyarakat.

ii. Menyiapkan bahan penyusunan pedoman dalam rangka

pemberdayaan Telematika bagi Masyarakat.

iii. Menyiapkan bahan fasilitasi penyelenggaraan penerapan

telematika dilingkungan masyarakat.

iv. Menyiapkan bahan koordinasi dibidang pemberdayaan

Telematika masyarakat.

v. Menyiapkan bahan sosialisasi pemanfaatan telematika kepada

masyarakat.

vi. Melaksanakan tugas-tugas lain yang diberikan oleh Kepala

Bidang.

36

c. Seksi Pengembangan Muatan Teknologi Informasi, mempunyai

tugas:

i. Menyiapkan bahan pengumpulan bahan pengembangan

muatan telematika.

ii. Menyiapkan bahan penyusunan desain format dan media

dalam rangka pengembangan muatan telematika.

iii. menyiapkan bahan perekayasaan pengembangan muatan

telematika.

iv. melaksanakan tugas-tugas lain yang diberikan oleh Kepala

Bidang .

3.6 Gambar Perusahaan

Gambar 2. Gambaran Perusahaan

37

.................

Gambar 3. Launching MiGila Gambar 4. Depan Kantor Kominfo

38

BAB IV

PEMBAHASAN

4.1 Pelaksanaan Kerja Praktek

Pelaksanaan Kerja Praktek dilakukan di Dinas Komunikasi dan Informatika

Provinsi Jawa Timur, Jl.Ahmad Yani No 242 – 244 Surabaya.

Pelaksanaannya selama 1 bulan terhitung sejak tanggal 10 Agustus 2015

s/d 10 September 2015. Kerja praktek dilakukan di bawah pengarahan dan

bimbingan Ibu Yanti Dyah Harsono, S.Sos, M.Si, selaku Kepala Seksi

Bidang Pengembangan Muatan Teknologi Informasi.

4.2 Perancangan Sistem

Perancangan sistem ditujukan untuk memberikan gambaran mengenai

sistem yang dikembangkan.

4.2.1 Analisis Kebutuhan

Berikut ini daftar kebutuhan yang dibutuhkan dalam membangun Aplikasi

Sasaran Kerja Pegawai sesuai dengan hasil wawancara dengan Ibu Yanti

Dyah Harsono, S.Sos, M.Si selaku Kepala Seksi Bidang Pengembangan

Muatan Teknologi Informasi :

1. Sistem dapat menampilkan data staff.

39

2. Sistem dapat menampilkan pengelolaan database.

3. Sistem dapat menampilkan menu input kegiatan staff.

4. Sistem dapat menampilkan informasi tentang laporan kegiatan staff.

5. Sistem dapat memberikan paraf untuk laporan kegiatan staff.

6. Sistem dapat menampilkan cetak hasil kegiatan staff.

4.2.2 Desain Sistem

A. Use Case Diagram

a. Identifikasi Aktor

Berdasarkan analisis kebutuhan, maka terdapat 3 jenis aktor, yaitu:

1. Aktor pertama adalah “Kepala Bidang” yang mempunyai akses

menginputkan kegiatan, mengatur dan mengolah semua data yang

ada dalam Website, menambah pegawai dan memberikan paraf,

serta mengelola database.

2. Aktor kedua adalah “Kepala Seksi” yang mempunyai akses untuk

menginputkan kegiatan,melaporkan kegiatan kepada kepala

bidang, mencetak laporan, melihat data pegawai, melihat kegiatan

Staff dan memberikan paraf Staff.

3. Aktor ketiga adalah “Staff” yang mempunyai hak akses untuk

menginputkan laporan kegiatan, dan mencetak hasil laporan

kegiatan.

40

b. Gambaran Use Case Keseluruhan

Gambar 5. Use Case Aplikasi SKP

Keterangan :

1. Use Case Login :

- Input NIP

- Input Pasword

2. Use Case Management Data, terdiri dari :

- Menambah

- Mengedit Data

- Menghapus Data

41

3. Use Case Input Kegiatan

4. Use Case Lihat Kegiatan

5. Use Case Paraf

6. Use Case Cetak Laporan

7. Use Case Pengelola Database:

- Restore Database

- Backup Database

8. Use Case Setting Akun

9. Use Case LogOut

c. Gambaran Use Case Tiap Aktor

- Aktor “Kepala Bidang”

1. Use Case Login

2. Input Kegiatan

3. Lihat Laporan Kegiatan

4. Use Case Management Data Kasi, terdiri dari :

- Menambah Kasi

- Mengedit Data Kasi

- Menghapus Data Kasi


6. Use Case Paraf

7. Use Case Pengelola Database:

- Restore Database

- Backup Database

42


9. Use Case LogOut

Gambar Use Case Kepala Bidang :

Gambar 6. Use Case Kepala Bidang

- Aktor “Kepala Seksi”

1. Use Case Login

2. Use Case Management Data Staff, terdiri dari :

- Menambah Staff

- Mengedit Data Staff

43

- Menghapus Data Staff



5. Use Case Paraf



8. Use Case LogOut

Gambar Use Case Kepala Seksi :

Gambar 7. Use Case Kepala Seksi

44

- Aktor “Staff”

1. Use Case Login





6. Use Case LogOut

Gambar Use Case Staff :

Gambar 8. Use Case Staff

45

B. Class Diagram

Gambar 9. Class Diagram SKP

46

C. Activity Diagram

a. Daftar Activity Diagram “Kepala Bidang”

1. Activity Diagram : “Login”

Gambar 10. Activity diagram Login Kepala Bidang

Activity diagram login menjelaskan kegiatan apa saja yang di lakukan

user saat melakukan login, mulai dari input NIP sebagai user ID dan

password.

47

2. Activity Diagram : “Input Kegiatan”

Gambar 11. Activity Diagram Input Kegiatan

Aktivity diagram Input Kegiatan dimulai dengan user (Kepala

Bidang) masuk Dashboard kabid, kemudian sistem akan menampilkan

dashboard kabid. Kemudian pilih menu Input Kegiatan dan sistem

akan menampilkan form input kegiatan. User mengisi form input

kegiatan lalu menekan tombol simpan, sistem akan menyimpan isian,

jika benar maka akan muncul pesan atau alert pesan sukses, jika gagal

akan muncul alert pesan gagal.

48

3. Activity Diagram : “Laporan Kegiatan”

Gambar 12. Activity Diagram Laporan Kegiatan

Aktivity diagram Laporan Kegiatan dimulai dengan user (Kepala


dashboard kabid. Kemudian pilih menu Laporan Kegiatan dan sistem

akan menampilkan table list kegiatan. User mencari kegiatan

berdasarkan tanggal, sistem menampilkan laporan berdasarkan

tanggal.

49

4. Activity Diagram : “Cetak Laporan”

Gambar 13. Activity Diagram Cetak Laporan

Aktivity diagram Cetak Laporan dimulai dengan user (Kepala


dashboard kabid. Kemudian pilih menu Laporan Kegiatan dan sistem

akan menampilkan table list kegiatan. User menekan tombol cetak

laporan, sistem mencetak laporan dalam bentuk pdf.

50

5. Activity Diagram : “Input Kepala Seksi”

Gambar 14. Activity Diagram Input Kepala Seksi

Langkah Aktivity diagram input kepala seksiini dimuklai dengan User

masuk dalam dashboard kabid, kemudian pilih menu tambah pegawai, isikan

form data pegawai dan klik simpan. Saat menyimpan, jika benar maka akan

muncul pesan Sukses, dan jika gagal akan muncul pesan Gagal menyimpan.

51

6. Activity Diagram : “Lihat Kegiatan”

Gambar 15. Activity Diagram Lihat Kegiatan

Activity diagram ntuk melihat List Kegiatan Pegawai dimulai dengan

masuk dashboard kabid, kemudian pilih menu list kegiatan staff dan sistem

akan menampilkan semua list kegiatan staff. Cari list kegiatan staff

berdasarkan keinginan (dapat dicari berdasarkan tanggal,bulan, maupun

tahun), dan sistem akan menampilkan list kegiatan berdasarkan inputan.

52

7. Activity Diagram : “Paraf”

Gambar 16. Activity Diagram Paraf

Activity diagram untuk memberikan paraf dari kabid kepada kasi

dimulai dengan masuk halaman dashboard kabid, kemudian pilih menu list

kegiatan pegawai, sistem akan menapilkan list kegiatan pegawai. Jika dirasa

pekerjaan itu sudah sesuai, paraf kegiatan pegawai dengan menekan tombol

paraf dan sistem akan menampilkan pesan sukses memparaf.

53

8. Activity Diagram : “Backup”

Gambar 17. Activity Diagram Backup

Activity diagram untuk proses backup yaitu pertama user harus masuk

dashboard kabid terlebih dahulu, kemudian pilih menu pengolah database.

Pilih menu backup lalu klik tombol proses backup. Saat menekan tombol

proses backup, sistem akan menampilkan script sql. Dan meudian user

menekan tombol download database saat mendownload maka proses backup

sudah dilakukan.

54

9. Activity Diagram : “Restore”

Gambar 18. Activity Diagram Restore

Activity diagram untuk proses restore yaitu pertama user harus masuk

dashboard kabid terlebih dahulu, kemudian pilih menu pengolah database.

Pilih menu restore lalu pilih file database yang akan direstore.setelah selesai

memilih file, tekan tombol proses restore dan sistem akan segera memulai

proses restore.

55

10. Activity Diagram : “Setting Akun”

Gambar 19. Activity Diagram Setting Akun

Activity diagram untuk proses setting akun yaitu pertama user

(kepala bidang) masuk kehalaman dashboard kabid, lalu user memilih

menu account setting setelah menu di tekan makan akan muncul menu

setting account, disini user dapat mengganti profile dan authentifikasi

dari username dan password.

56

11. Activity Diagram : “LogOut”

Gambar 20. Activity Diagram LogOut

Activity diagram untuk proses logout user (kabid) yaitu pertama

masuk kedalam dashboard kabid(kepala bidang) setelah masuk di

halaman yang di tuju pilih menu logout,maka sistem akan men destroy

semua session yang terkait dengan login kepala bidang,jika berhasil

maka akan di redirect ke halaman awal.

57

b. Activity Diagram “Kepala Seksi”

1. Activity Diagram : “Login”

Gambar 21. Activity Diagram Login Kepala Seksi

Activity diagram untuk proses login user (kepala seksi) adalah

halaman pertama aplikasi,halaman login ini di gunakan untuk

authentifikasi/atau seleksi hak akses user ke dalam sistem,dalam hal

ini username menggunakan NIP (nomor induk pegawai) dan

password.

58


Gambar 22. Activity Diagram Input Kegiatan

Activity diagram untuk proses input kegiatan (kepala seksi) yaitu

pertaman user masuk kedalam dashboard halaman kasi,setelah

berhasil selanjutnya pilih menu Inputan Kegiatan lalu akan muncul

form inputan kegiatan dari kasi,lalu kasi mengisi kegiatan form yang

telah tampil kemudian klik tombol simpan, jika form berhasil di

simpan maka data di simpan jika gagal maka data gagal di masukan

database.


59


Activity laporan kegiatan kasi ini yaitu segala aktifitas user dalam

mencari data atau laporan yang di petakan dengan tanggal,pertama

user masuk kedalam halaman dashboard,selanjutnya pilih menu

Laporan Kegiatan lalu cari laporan kegiatan berdasarkan tanggal,jika

berhasil maka data akan terseleksi dengan tanggal yang telah di

inputkan.

60

4. Activity Diagram : “Cetak”


Activity cetak laporan yaitu pertama user (kasi) masuk kehalaman

dashboard jika berhasil, lalu pilih menu laporan maka akan tapil

record laporaan yang telah di inputkan lalu klik tombol cetak

laporan,jika sukses maka akan di redirect ke halaman pdf viewer.

61

5. Activity Diagram : “Input Staff”

Gambar 25. Activity Diagram Input Staff

Activity Input Staff adalah halaman dimana kasi akan

menambahkan staff baru sesuai dengan seksi yang di inginkan,

pertaman user masuk kehalaman dashboard jika berhasil maka klik

tombol menu tambah pegawai kemudian user mengisi data staff pada

form yang tampil jika sudah, klik tombol Simpan jika data berhasil di

simpan maka akan muncul alert berhasil jika data gagal masuk

kedalam database maka akan muncul alert gagal masuk kedalam

database.

62

6. Activity Diagram : “List Kegiatan Staff”

Gambar 26. Activity Diagram List Kegiatan Staff

Activity List Kegiatan Staff yaitu kegiatan dimana kasi dapat

melihat seluruh kegiatan yang di lakukan oleh staff yang berada di

naungan seksi masing-masing, pertama user (kasi) masuk kedalam

halaman dashboard jika berhasil maka klik tombol list kegiatan staff

lalu kasi dapat mencari kegiatan berdasarkan request.

63

7. Activity Diagram : “Paraf Staff”

Gambar 27. Activity Diagram Paraf Staff

Activity Paraf Staff adalah seorang kasi akan memparaf staff

sebagai persetujuan jika staff telah melakukan kegiatan yang telah di

bebankan kepadanya, pertama kasi masuk kehalaman dashboard jika

berhasil kamudian pilih menu list kegiatan pegawai jika sudah tampil

record kegiatan staff maka klik tombol paraf jika berhasil maka akan

menampilkan alert success memberi paraf jika gagal dalam pemberian

paraf maka akan menampilkan alert gagal.

64


Gambar 28. Activity Diagram Setting Akun Kepala Seksi


(kepala seksi) masuk kehalaman dashboard kasi, lalu user memilih


edit profile dan edit password, disini user dapat mengganti profile dan

authentifikasi dari username dan password.

65

9. Activity Diagram : “Log Out”

Gambar 29. Activity Diagram Log Out

Activity diagram logout yaitu pertama user (kasi) masuk kedalam

dashboard kasi lalu pilih menu logout, maka session akan terhapus

dari sistem.

66

c. Activity Diagram Staff

1. Activity Diagram : “Login Staff”

Gambar 30. Activity Diagram Login Staff

Activity diagram untuk proses login user (staff) adalah halaman

pertama aplikasi, halaman login ini di gunakan untuk authentifikasi /

atau seleksi hak akses user ke dalam sistem, dalam hal ini username

menggunakan NIP (nomor induk pegawai) dan password.

67


Gambar 31. Activity Diagram Input Kegiatan Staff

Activity diagram untuk proses input kegiatan (staff) yaitu

pertaman user masuk kedalam dashboard halaman kasi, setelah

berhasil selanjutnya pilih menu Inputan Kegiatan lalu akan muncul

form inputan kegiatan dari kasi, lalu kasi mengisi kegiatan form yang

telah tampil kemudian klik tombol simpan, jika form berhasil di

simpan maka data di simpan jika gagal maka data gagal di masukan

database.

68



Activity diagram untuk laporan kegiatan staff yaitu adalah record

kegiatan yang telah di lakukan oleh staff, pertama user(staff) masuk

kedalam dashboard lalu pilih menu laporan kegiatan, maka akan

tampil record kegiatan selama dia inputkan.

69

4. Activity Diagram : “Cetak Laporan”


Activity cetak laporan yaitu pertama user (staff) masuk kehalaman

dashboard jika berhasil lalu pilih menu laporan kegiatan maka akan tapil

record laporaan yang telah di inputkan lalu klik tombol cetak laporan, jika

sukses maka akan di redirect ke halaman pdf viewer.


70

Gambar 34. Activity Diagram Setting Akun


(staff) masuk kehalaman dashboard staff, lalu user memilih menu

account setting setelah menu di tekan makan akan muncul menu edit

profile dan edit password, disini user dapat mengganti profile dan

authentifikasi dari username dan password.

71

6. Activity Diagram : “Log Out”

Gambar 35. Activity Diagram Log Out

Activity diagram logout yaitu pertama user (staff) masuk kedalam

dashboard kasi lalu pilih menu logout,maka session akan terhapus dari

sistem.

72

D. Sequence Diagram

a. Sequence Diagram : “Login”

Gambar 36. Sequence Diagram Login

Squence diagram merupakan diagram yang seolah olah sudah

dekat dengan tampilah antar muka (interface) dari sebuah sistem, pada

sequence ini menjelaskan bagaimana alur kerja sistem saat seorang

login kedalam sistem,pertama user masuk kedalam sistem dengan

menggunakan NIP dan Password, keduanya sudah terdaftar dalam

database maka halaman akan di redirect sesuai level pegawai.

73

b. Sequence Diagram : “Kepala Bidang”

1. Input Kegiatan

Gambar 37. Sequence Diagram Input Kegiatan Kabid

Squence input kegiatan kabid yaitu pertama sistem akan

menampilakan forminputan,selanjutanya data yang telah di isikan

akan di masukan kedalam database jika data berhasil di masukan

makan akan ada tanda berhasil,jika gagal maka akan ada

pemberitahuan gagal.

74

2. Laporan Kegiatan

Gambar 38. Sequence Diagram Laporan Kegiatan Kabid

Squence diagram laporan kegiatan yaitu pertama sistem akan

menampilakan halaman setelah user meng klik menu Laporan Kabid

maka sistem akan mengambil data yang ada di database terkait dengan

halaman kabid,jika data ada maka akan di tampilkan jika data kosong

maka data kosong.

75

3. Edit Laporan Kegiatan

Gambar 39. Sequence Diagram Edit Laporan Kegiatan Kabid

Squence Edit Laporan Kabid yaitu aktivitas sistem dalam mengedit

laporang yang telah terecord oleh sistem,pertama istem akan menampilkan

halaman kabid, jika berhasil record data laporan terkait dengan kegiatan

kabid akan tampil lalu ketika user menekan tombol update akan di redirect

ke halaman edit sesuai dengan NIP masing masing user,jika sudah di update

maka selanjutnya data akan di update dari database.

76

4. Hapus Laporan Kegiatan

Gambar 40. Sequence Diagram Hapus Laporan Kegiatan Kabid

Squence Hapus Laporan yaitu sistem akan menghapus laporan

yang telah terecord oleh sistem,pertama user masuk kehalaman yang

di inginkan selanjutnya pilih menu laporan kegiatan maka akan tampil

record kegiatan,tekan tombol hapus sesuai dengan laporang yang akan

di hapus,maka sistem akan menghapus data yang telah di pilih dari

daftar yang telah terecord.

77

5. Cetak Laporan

Gambar 41. Sequence Diagram Cetak Laporan

Squence diagram cetak laporan yaitu dimana sistem akan

menampilkan halaman yang di gunakan sistem untuk mencetak

laporan yang telah di terecord, pertama user memilih menu laporan

kegiatan lalu sistem akan menampilkan halaman laporan staff,

selanjutnya klik tombol cetak laporan kegiatan makan sistem akan

menampikan halaman cetak.

78

6. Input Kepala Seksi

Gambar 42. Sequence Diagram Input Kepala Seksi

Squence input kepala seksi yaitu dimana sistem akan menyimpan

hasil inputan dari form inputan pegawai dari kepala seksi, pertama

seksi akan menampilkan form inputan kepala seksi setelah user

menekan tombol input pegawai, setelah form terisi semua maka data

akan di simpan kedalam database, jika data berhasil disimpan maka

aka nada alert berhasil menyimpan.

79

7. Lihat data Staff

Gambar 43. Sequence Diagram Data Staff

Pertama sistem akan menapilkan halaman data staff setelah user

menekan tombol data staff, jika user memasukan tanggal sesuai dengan

inputan maka sistem akan mengambil data yang telah tersimpan kedalam

database.

80

8. Edit Data Staff

Gambar 44. Sequence Diagram Edit Data Staff

Squence edit data staff yaitu diamana sistem akan mengupdate data

yang telah tersimpan kedalam database, petama sistem akan menampilkan

record data staff. Selanjutnya user menekan tombol update maka sistem akan

me-redirect kedalam halaman edit pegawai, lalu klik tombol update maka

sistem akan mengupdate data sesuai dengan ID masing-masing user.

81

9. Hapus Staff

Gambar 45. Sequence Diagram Hapus Staff

Pertama sistem akan menampilkan halaman record data staff

setelah user menekan menu data staff, selanjutnya klik menu hapus

maka sistem akan menghapus data sesuai dengan ID yang telah tampil

di interface halaman depan.

82

10. List Laporan Kegiatan

Gambar 46. Sequence Diagram List Kegiatan

Pertama Sistem akan menampilkan list kegiatan setelah user

menekan menu list kegiatan staff, selanjutnya sistem akan mengambil

data dari database lalu akan di tampilkan kedalam sistem.

83

11. Memberikan paraf

Gambar 47. Sequence Diagram Paraf Kabid

Sequence Paraf Kabid yaitu dimana sistem akan mengupdate data

yang telah tersimpan di dalam database mengenai paraf staf, pertama

user masuk kehalaman laporan kegiatan kasi selanjutanya klik tombol

paraf maka sistem akan memaraf data yang telah di pilih.

84

12. Pengolah Database:- Backup

Gambar 48. Sequence Diagram Backup

Sequence backup pertama sistem akan menampilkan halaman

backup setelah user menekan menu pengolah database,lalu klik

tombol backup maka sistem akan membackup database, lalu tekan

download untuk mengambil file sqlnya.

85

- Restore

Gambar 49. Sequence Diagram Restore

Sequence restore yaitu memngolah data kembali setelah data di

backup. Pertama masuk ke halaman kabid lalu pilih menu pengola database

maka sistem akan mengalihkan halaman database. Selanjutnya pilih tab

menu restore, pilih file sql yang telah di backup, lalu klik tombol restore.

86

13. Setting Akun

Gambar 50. Sequence Diagram Setting Akun

Sequence diagram untuk proses setting akun yaitu pertama

user(kabid) masuk kehalaman dashboard staff. Lalu user memilih


edit profile dan edit password, disini user dapat mengganti profile dan

authentifikasi dari username dan password dan sistem akan

mengupdate semua data yang berkaitan dengan profile akun.

87

c. Sequence Diagram : “Kepala Seksi”

1. Input Laporan Kegiatan

Gambar 51. Sequence Diagram Input Kegiatan Kasi


menampilakan halaman setelah user (kasi) meng klik menu Laporan

Kegiatan maka sistem akan menampilkan form inputan laporan yang

ada di sistem,jika semua telah terisi maka klik tombol simpan maka

semua data akann di simpan ke dalam database.

88

2. Lihat laporan kegiatan

Gambar 52. Sequence Diagram Laporan Kegiatan Kasi

Pertama Sistem menampilkan laporan kegiatan setelah user

menekan menu laporaan kegiatan kasi. Selanjutnya sistem mengambil

data dari database lalu akan di tampilkan kedalam sistem.

89


Gambar 53. Sequence Diagram Edit Laporan Kegiatan Kasi

Squence edit laporan kasi yaitu diamana sistem akan mengupdate data

yang telah tersimpan kedalam database,petama sistem akan menampilkan

record data laporan,selanjutnya user menekan tombol update maka sistem

akan me_redirect kedalam halaman edit laporan kegiatan kasi,lalu klik

tombol update maka sistem akan mengupdate data sesuai dengan ID masing-

masing user

90


Gambar 54. Sequence Diagram Hapus Laporan Kegiatan Kasi

Pertama sistem akan menampilkan halaman record laporan

kegiatan kasi setelah user menekan menu laporan kegiatan.

Selanjutnya klik menu hapus maka sistem akan menghapus data

sesuai dengan ID yang telah tampil di interface halaman depan.

91

5. Cetak Laporan Kegiatan

Gambar 55. Sequence Diagram Cetak Laporan Kegiatan Kasi

Squence diagram cetak laporan kegiatan kasi yaitu dimana sistem

akan menampilkan halaman yang di gunakan sistem untuk mencetak

laporan yang telah di terecord,pertama user memilih menu laporan

kegiatan kasi lalu sistem akan menampilkan halaman laporan

staff,selanjutnya klik tombol cetak laporan kegiatan makan sistem

akan menampikan halaman cetak.

92

6. Input Staff

Gambar 56. Sequence Diagram Input Staff Kasi

Squence input pegawai atau staff yaitu dimana sistem akan

menyimpan hasil inputan dari form inputan pegawai dari kepala

seksi,pertama halaman staff akan menampilkan form inputan pegawai

atau staff, setelah user menekan tombol input pegawai,setelah form

terisi semua maka data akan di simpan kedalam database,jika data

berhasil disimpan maka aka nada alert berhasil menyimpan.

93

7. Data Staff

Gambar 57. Sequence Diagram Data Staff Kasi

Pertama sistem akan menampilkan halaman record data staff kasi

setelah user menekan menu data staff, maka data akan tampil di

interface halaman depan, jika di dalam database datanya kosong maka

di interface kosong, jika ada maka data akan di tampilkan.

94

8. Hapus Staff

Gambar 58. Sequence Diagram Hapus Staff Kasi

Pertama sistem akan menampilkan halaman record data staff

setelah user menekan menu data staff, selanjutnya klik menu hapus

maka sistem akan menghapus data sesuai dengan ID yang telah tampil

di interface halaman depan.

95

9. Record Kegiatan

Gambar 59. Sequence Diagram Record Kegiatan Staff

Sequence record kegiatan staff yaitu sistem menampilakan daftar

kegiatan staff yang telah terecord dalam database, pertama user

memilih menu record kegiatan, lalu menampilkan semua data yang

ada di dalam database.

96

10. Lihat list kegiatan Staff

Gambar 60. Sequence Diagram List Kegiatan Staff Kasi

Pertama Sistem akan menampilkan list kegiatan setelah user

menekan menu list kegiatan staff. Selanjutnya sistem akan mengambil

data dari database lalu akan di tampilkan kedalam sistem, jika data

kosong maka di interface akan kosong jika data ada maka data akan di

tampilkan.

97

11. Paraf

Gambar 61. Sequence Diagram Paraf Kasi

Sequence paraf kasi yaitu dimana seorang kasi memaraf hasil kegiatan

yang di lakukan oleh staff. Pertama kasi membuka halaman list kegiatan,

sistem akan menampilkan semua data yang kegiatan yang di lakukan oleh

staff, selanjutnya pilih tombol paraf.

98

12. Setting akun

Gambar 62. Sequence Diagram Setting Akun Kasi

Sequnce diagram untuk proses setting akun yaitu pertama user

(kasi) masuk kehalaman dashboard staff. Lalu user memilih menu

account setting setelah menu di tekan makaakan muncul menu edit


authentifikasi dari username dan password jika semua data telah di

ganti maka klik tombol update maka sistem akan mengupdate data

yang tealh di pilih.

99

d. Sequence Diagram : “Staff”

1. Input Laporan Kegiatan

Gambar 63. Sequence Diagram Input Kegiatan Staff


menampilakan halaman setelah user (staff) meng klik menu Laporan

Kegiatan maka sistem akan menampilkan form inputan laporan yang

ada di sistem, jika semua telah terisi maka klik tombol simpan maka

semua data akann di simpan ke dalam database.

100

2. Laporan Kegiatan

Gambar 64. Sequence Diagram Laporan Kegiatan Staff

Pertama Sistem akan menampilkan laporan kegiatan setelah user

menekan menu laporaan kegiatan staff, selanjutnya sistem akan

mengambil data dari database lalu akan di tampilkan kedalam sistem.

101


Gambar 65. Sequence Diagram Edit Laporan Kegiatan Staff

Squence edit laporan staff yaitu diamana sistem akan mengupdate data

yang telah tersimpan kedalam database,petama sistem akan menampilkan

record data laporan, selanjutnya user menekan tombol update maka sistem

akan me_redirect kedalam halaman edit laporan kegiatan staff, lalu klik

tombol update maka sistem akan mengupdate data sesuai dengan ID masing-

masing user.

102


Gambar 66. Sequence Diagram Hapus Laporan Kegiatan Staff

Pertama sistem akan menampilkan halaman record data laporan

krgiatan staff setelah user menekan menu laporan kegiatan staff,

selanjutnya klik menu hapus maka sistem akan menghapus data sesuai

dengan ID yang telah tampil di interface halaman depan.

103

5. Cetak Laporan Kegiatan

Gambar 67. Sequence Diagram Cetak Laporan Kegiatan Staff

Squence diagram cetak laporan kegiatan staff yaitu dimana sistem

akan menampilkan halaman yang di gunakan sistem untuk mencetak

laporan yang telah di te_record. Pertama user memilih menu laporan

kegiatan kasi lalu sistem akan menampilkan halaman laporan staff,

selanjutnya klik tombol cetak laporan kegiatan makan sistem akan

menampikan halaman cetak.

104

6. Setting akun

Gambar 68. Sequence Diagram Setting Akun Staff

Sequnce diagram untuk proses setting akun yaitu pertama user

(staff) masuk kehalaman dashboard staff, lalu user memilih menu

account setting setelah menu di tekan makaakan muncul menu edit


authentifikasi dari username dan password jika semua data telah di

ganti maka klik tombol update maka sistem akan mengupdate data

yang telah di pilih.

105

e. Sequence Diagram LogOut

Gambar 69. Sequence Diagram Log Out

Sequnce diagram Log Out yaitu di mana sistem akan me_redirect

halam di awal atau halaman default user,pertama user masuk

kehalaman sesuai level authentifikasi setelah itu klik tombol logout.

4.2.3 Desain Database

Gambar 70. Desain Database

106

4.2.4 Desain Tampilan Antar muka

1. Desain Antarmuka Halaman Login

Gambar 71. Desain Antarmuka Halaman Login

Pada saat login, User harus menginputkan User Name/ID dan

Password, yang mana User Name / ID ini di isi dengan NIP masing-

masing User.

2. Desain Antarmuka Halaman Kepala Bidang

Gambar 72. Desain Antarmuka Halaman Kepala Bidang

107

Pada Halaman Kepala Bidang terdapat menu : Dashboard, Input

Kegiatan, Laporan Kegiatan, Input Kepala Seksi, Data Kepala Seksi,

List Kegiatan (Kepala Seksi dan Staff), Pengelola Database, Log Out

dan Setting Akun.

3. Desain Antarmuka Halaman Kepala Seksi

Gambar 73. Desain Antarmuka Halaman Kepala Seksi

Pada Halaman Kepala Seksi terdapat menu : Dashboard, Input

Kegiatan, Laporan Kegiatan, Input Kepala Staff, Data Staff, List

Kegiatan Staff, Log Out dan Setting Akun.

108

4. Desain Antarmuka Halaman Staff

Gambar 74. Desain Antarmuka Halaman Staff

Pada Halaman Staff terdapat menu : Dashboard, Input Kegiatan,

Laporan Kegiatan, Log Out dan Setting Akun.

5. Desain Antarmuka Input Pegawai

Gambar 75. Desain Antarmuka Input Pegawai

Dalam menginputkan pegawai atau staff, data yang harus di isi adalah NIP

yang nanti akan menjadi User ID, Password, Nama Pegawai, Jenis Kelamin

109

Pegawai, Nomor HP, Alamat Email, Alamat Web atau Blok, Alamat Staff serta

Unit Organisasi.

6. Desain Antarmuka Data Staff

Gambar 76. Desain Antarmuka Data Staff

Dalam desain antarmuka data staff, nantinya akan menampilkan data staff

yang berhubungan dengan alur proses bisnis aplikasi. Data yang ditampilkan

adalah NIP yang digunakan sebagai User ID, Nama, Unit Organisasi, serta Aksi

yang berisikan Record Kegiatan (untuk menampilkan laporan kegiatan dari staff),

Edit (untuk mengedit data Staff), dan Hapus(untuk menghapus data staff).

110

7. Desain Antarmuka Input Laporan Kegiatan

Gambar 77. Desain Antarmuka Input Laporan Kegiatan

Halaman desain Input Kegiatan menggambarkan apasaja yang harus di

inputkan user untuk melaporkan setiap kegiatan yang user kerjakan.

8. Desain Antarmuka Laporan Kegiatan

Gambar 78. Desain Antarmuka Laporan Kegiatan

Menampilkan semua kegiatan yang sudah di inputkan oleh user, dapat

menampilkan secara keseluruhan, maupun menampilkan data inputan berdasarkan

tanggal.

111

9. Desain Antarmuka Pengelolaan Data Base

a. Desain Antarmuka Menu Backup

Gambar 79. Desain Antarmuka Menu Backup

Desain menu Pengolah Database diletakkan di halaman Kepala Bidang Sebagai

Super Admin, yang akan mengatur semua data yang ada di dalam aplikasi. Menu Backup

bertujuan untuk menghapus seluruh data yang ada di dalam aplikasi.

b. Desain Antarmuka Menu Restore

Gambar 80. Desain Antarmuka Menu Restore

112

Menu Restore bertujuan untuk mengembalikan semua data yang sudah di backup

kembali ke dalam aplikasi.

10. Desain Antarmuka Cetak Laporan

Gambar 81. Desain Antarmuka Menu Cetak

11. Desain Antarmuka Setting Akun

Gambar 82. Desain Antarmuka Menu Setting Akun

113

4.3 Implementasi Sistem

4.3.1 Lingkungan Implementasi

Lingkungan implementasi meliputi Implementasi Perangkat keras,

Perangkat Lunak, Antarmuka dan Pengujian Sistem.

4.3.2 Implementasi Perangkat Keras

Perangkat keras yang digunakan untuk untuk mebangun aplikasi ini

adalah :

- Processor : dengan kecepatan minimal 1 Ghz

- Hardisk : 500Gb

- RAM : 2 Gb

- LAN Card : 10/100Mbps

- VGA : Intel HD Graphics 3000

4.3.3 Implementasi Perangkat Lunak

Kebutuhan perangkat lunak merupakan faktor-faktor yang harus

dipenuhi untuk merancang sebuah perangkat lunak (aplikasi) sehingga

perangkat lunak tersebut sesuai dengan maksud dan tujuan pembuatan.

Beberapa perangkat lunak pendukung yang harus di install adalah

sebagai berikut :

- Sistem Operasi : Windows 7 Home Basic

- WebServer : Xampp for Windows

- DBMS : MySQL

114

- Desain Web : Notepad++ dan SublimeText sebagai Editor PHP

- Browser : Google Chrome

4.3.4 Implementasi Antarmuka

a. Implementasi Antarmuka Halaman Login

Gambar 83. Implementasi Antarmuka Halaman Login

b. Implementasi Antarmuka Halaman Kepala Bidang

Gambar 84. Implementasi Antarmuka Halaman Kabid

115

c. Implementasi Antarmuka Halaman Kepala Seksi

Gambar 85. Implementasi Antarmuka Halaman Kasi

d. Implementasi Antarmuka Halaman Staff

Gambar 86. Implementasi Antarmuka Halaman Staff

116

e. Implementasi Antarmuka Input Kepala Seksi

Gambar 87. Implementasi Antarmuka Input Kasi

f. Implementasi Antarmuka Input Staff

117

Gambar 88. Implementasi Antarmuka Input Staff

g. Implementasi Antarmuka Data Staff

Gambar 89. Implementasi Antarmuka Data Staff

h. Implementasi Antarmuka Input Laporan Kegiatan

118

Gambar 90. Implementasi Antarmuka Input Laporan Kegiatan

i. Implementasi Antarmuka Laporan Kegiatan

Gambar 91. Implementasi Antarmuka Laporan Kegiatan

j. Implementasi Antarmuka Pengelolaan Data Base

- Implementasi Antarmuka Menu Backup

Gambar 92. Implementasi Antarmuka Menu Backup

119

- Implementasi Antarmuka Menu Restore

Gambar 93. Implementasi Antarmuka Menu Restore

k. Implementasi Antarmuka Cetak Laporan

Gambar 94. Implementasi Antarmuka Menu Restore

l. Implementasi Antarmuka Setting Akun

120

Gambar 95. Implementasi Antarmuka Setting Akun

Gambar 96. Implementasi Antarmuka Menu Rubah Password

4.4 Pengujian Sistem

Pengujian Perangkat Lunak adalah elemen kritis dari jaminan kualitas

Perangkat Lunak dan mempresentasikan kajian pokok dari spesifikasi,

desain dan pengkodean. Pengujian adalah eksekusi sebuah program

dengan maksud menemui kesalahan. Pengujian dilakukan dengan metode

“Black Box”

121

Skenario Pengujian Kepala Bidang

No Kelas Uji Butir Uji Jenis Pengujian

1 Login

Isi Data Login Black Box

Verifikasi Username Black Box

Verifikasi Password Black Box

2 Input Kegiatan Input Data Black Box

Upload Data Black Box

3 Laporan Kegiatan

Tampilkan Laporan Kegiatan Black Box

Edit Laporan Kegiatan Black Box

Hapus Laporan Kegiatan Black Box

Cetak Laporan Black Box

4 Input Staff Tambah Data Staff Black Box

5 Lihat Data Staf

Tampilkan Data Staff Black Box

Edit Data Staff Black Box

Hapus Data Staff Black Box

6 Lihat Laporan Tampilkan Laporan Black Box

Paraf Black Box

7 Pengolah

Database

Backup Black Box

Restore Black Box

8 Setting Akun Tampilkan setting akun Black Box

9 Logout Menghapus Session Kabid Black Box

Table 3 Skenario Pengujian Kepala Bidang

Skenario Pengujian Untuk Kepala Seksi


1 Login




2 Input Staff Tambah Data Staff Black Box

122

3 Input Kegiatan Input laporan Black Box

Upload data Black Box

4

Laporan Kegiatan

Tampilkan Laporan Black Box

Edit Laporan Black Box

Hapus Laporan Black Box

Cetak Black Box

5

Lihat Data Staf

Tampilkan Data Staff Black Box

Edit Data Staff Black Box

Hapus Data Staff Black Box

6 List Kegiatan

Staff

Tampilkan Kegiatan Staff Black Box

Paraf Black Box


8 Logout Menghapus Session Kasi Black Box

Table 4 Skenario Pengujian Kepala Seksi

Skenario Pengujian Untuk Staff


1 Login




2 Input Kegiatan Input laporan Black Box

Upload data Black Box

4

Laporan Kegiatan

Tampilkan Laporan Black Box

Edit Laporan Black Box

Hapus Laporan Black Box

Cetak Black Box


8 Logout Menghapus Session Staff Black Box

Table 5 Sekenario Pengujian Staff

123

1. Pengujian Login

Kasus dan Hasil Uji

Aksi Yang Diharapkan Pengamatan Kesimpulan

Memasukkan

NIP Valid

Mengisikan data

pada field NIP

Dapat mengisi

field NIP

[x] Diterima

[ ] Ditolak

Memasukkan

Password Valid

Mengisikan data

pada field passwordl

Dapat mengisi

field password

[x] Diterima

[ ] Ditolak

Pilih tombol

Login

Data NIP dan data

password yang

dicari

Berfungsi yaitu

masuk ke

halaman admin

[x] Diterima

[ ] Ditolak

Table 6 Pengujian Login

2. Pengujian Laporan Kegiatan

Kasus dan Hasil Uji


Input Laporan

Kegiatan

Menampilkan form

input laporan

Dapat

menampilkan

form input

kegiatan

[x] Diterima

[ ] Ditolak

Upload File Mengupload file

yang dipilih

Dapat

mengupload file

yang dipilih

[x] Diterima

[ ] Ditolak

Edit Laporan Mengedit laporan

yang dipilih

Berfungsi yaitu

mengedit laporan

yang dipilih

[x] Diterima

[ ] Ditolak

Hapus Laporan Hapus laporan yang

dipilih

Berfungsi yaitu

menghapus

laporan yang

dipilih

[x] Diterima

[ ] Ditolak

Button Simpan Menyimpan Inputan Berfungsi yaitu

menyimpan

[x] Diterima

[ ] Ditolak

124

inputan.

Button Cetak

Laporan

Cetak laporan yang

dipilih

Berfungsi yaitu

mencetak laporan

yang dipilih

[x] Diterima

[ ] Ditolak

Table 7 Pengujian Input Laporan Kegiatan

3. Pengujian Data Staff

Kasus dan Hasil Uji


Lihat Data Staff Menampilkan data

Staff

Dapat

menampilkan

data Staff

[x] Diterima

[ ] Ditolak

Tambah Staff

Baru

Menampilkan form

input staff

Dapat

menampilkan

form staff

[x] Diterima

[ ] Ditolak

Edit Data Staff Mengedit data staff

yang dipilih

Dapat mengedit

data staff yang

dipilih

[x] Diterima

[ ] Ditolak

Button Simpan Menyimpan data

inputan

Dapat

menyimpan data

inputan

[x] Diterima

[ ] Ditolak

Hapus Staff Menghapus Data

Staaf

Dapat Menghapus

Data Staff

[x] Diterima

[ ] Ditolak

Table 8 Pengujian Data Staff

4. Pengujian List Kegiatan Staff

125

Kasus dan Hasil Uji


Lihat List

Kegiatan Staff

Menampilkan list

kegiatan Staff

Dapat

menampilkan list

kegiatan Staff

[x] Diterima

[ ] Ditolak

Paraf Memberi paraf

untuk kegiatan kasi

dan staff

Dapat

memberikan paraf

untuk kegiatan

kasi dan staff

[x] Diterima

[ ] Ditolak

Table 9 Pengujian List Kegiatan Staff

5. Pengujian Pengolah Database

Kasus dan Hasil Uji


Masuk menu

Pengolah

Database

Menampilkan menu

pengolah database

Dapat

menampilkan

menu pengolah

database

[x] Diterima

[ ] Ditolak

Backup Membackup

database

Dapat

membackup

database

[x] Diterima

[ ] Ditolak

Restore Merestore database Dapat merestore

database

[x] Diterima

[ ] Ditolak

Table 10 Pengujian Pengolah Database

6. Pengujian Setting Akun

126

Kasus dan Hasil Uji


Masuk menu

Setting Akun

Menampilkan menu

Setting Akun

Dapat

menampilkan

menu Setting

Akun

[x] Diterima

[ ] Ditolak

Edit Data Menampilkan form

edit data

Dapat

menampilkan

form edit data

[x] Diterima

[ ] Ditolak

Rubah

Password

Merubah Password Dapat merubah

Password

[x] Diterima

[ ] Ditolak

Button Simpan Menyimpan data

inputan

Dapat

menyimpan data

inputan

[x] Diterima

[ ] Ditolak

Table 11 Pengujian Setting Akun

7. Pengujian LogOut

Kasus dan Hasil Uji


Mengklik

tombol logout

Tombol logout

berhasil diklik

Tombol logout

berhasil diklik

[x] Diterima

[ ] Ditolak

Menghapus

Session

Session berhasil

dihapus

Session berhasil

dihapus

[x] Diterima

[ ] Ditolak

Menampilkan

Form Login

Form Login berhasil

ditampilkan

Form Login

berhasil

ditampilkan

[x] Diterima

[ ] Ditolak

Table 12 Pengujian LogOut

4.5 Analisa Hasil

127

Untuk dapat mengetahui apakah aplikasi kami diterima, pada saat akhir

Kerja Praktik kami membagikan sebuah Kuisioner penilaian, tujuan dari

kuisioner ini adalah agar dapat mengetahui apakah aplikasi kami ini sudah

sesui dengan permintaan dan kebutuhan instansi terkait atau belum.

Dari hasil kuisioner tersebut dapat disimpulkan bahwa aplikasi dapat

diterima dengan baik, baik dari desain antarmuka dan fungsi-fungsi antar

menu semuanya mendapat penilaian yang baik dari tiap-tiap responden.

Selain mendapat penilaian yang baik, kami juga mendapat banyak masukan

yang membangun guna perkembangan aplikasi ini untuk selanjutnya.

BAB V

128

PENUTUP

5.1 Simpulan

Kesimpulan dari kerja praktek ini adalah :

1. Aplikasi Sasaran Kinerja Pegawai ini mendapatkan penilaain yang

baik dari pegawai Dinas Kominfo Bidang Pemberdayaan Teknogi

Informasi Dan Komunikasi.

2. Dalam pembuatan sebuah aplikasi kita perlu melihat dan menganalisa

apa saja yang dibutuhkan, kemudian merencanakan pembuatan

aplikasi.

3. Dalam membuat aplikasi kita harus menyesuaikan dengan kebutuhan

dan keinginan dari client.

5.2 Saran

Dari hasil kuisioner terdapat berbagai satan untuk mengembangkan

aplikasi ini kedepannya, yaitu:

1. Pemberian button Selesai yang otomatis akan menampilkan waktu

selesai pengerjaan.

2. Menu Setting akun diharapkan dapat menampilkan foto staff /

pegawai.

Daftar Pustaka

129

http://teddyginting.blogspot.com/2013/02/pengertian-sistem-menurut-para-ahli.html, Diakses pada 1-September-2015, 09.00

http://elib.unikom.ac.id/files/disk1/374/jbptunikompp-gdl-jujunjuhar-18655-3-babiil-i.pdf, Diakses pada 1-September-2015, 09.25

http://dir.unikom.ac.id/s1-final-project/fakultas-teknik-dan-ilmu-komputer/manajemen-informatika/2011/jbptunikompp-gdl-indrawardh-24507/3-unikom-i-i.pdf/ori/3-unikom-i-i.pdf, Diakses pada 1-September-2015, 09.47

http://library.binus.ac.id/eColls/eThesisdoc/Bab2/2012-1-00074-SI%20Bab2001.pdf, Diakses pada 1-September-2015, 10.21

http://monica.ilearning.me/tugas-akhir/bab-ii/, Diakses pada 1-September-2015, 10.21

http://repository.usu.ac.id/bitstream/123456789/28037/4/pengenalan-Personal-home-

page-PHP/Chapter%20II.pdf, Diakses pada 1-September-2015, 12.09

http://www.bkn.go.id/produk/skp, Diakses Pada 20-september-2015

http://imaniania5.blogspot.com/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html, akses:20-08-15,11.30

http://jastroklasik.blogspot.com/2011/12/apa-itu-notepad_23.html diakses pada

21-08-2015,11.45

https://id.wikipedia.org/wiki/HTML5, diakses pada 20-08-15, 11.20

Lampiran

https://id.wikipedia.org/wiki/HTML5

http://jastroklasik.blogspot.com/2011/12/apa-itu-notepad_23.html

http://imaniania5.blogspot.com/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html,%20akses:20-08-15,11.30

http://imaniania5.blogspot.com/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html,%20akses:20-08-15,11.30

http://www.bkn.go.id/produk/skp

http://monica.ilearning.me/tugas-akhir/bab-ii/

http://library.binus.ac.id/eColls/eThesisdoc/Bab2/2012-1-00074-SI%20Bab2001.pdf

http://dir.unikom.ac.id/s1-final-project/fakultas-teknik-dan-ilmu-komputer/manajemen-informatika/2011/jbptunikompp-gdl-indrawardh-24507/3-unikom-i-i.pdf/ori/3-unikom-i-i.pdf



http://elib.unikom.ac.id/files/disk1/374/jbptunikompp-gdl-jujunjuhar-18655-3-babiil-i.pdf

http://elib.unikom.ac.id/files/disk1/374/jbptunikompp-gdl-jujunjuhar-18655-3-babiil-i.pdf

http://teddyginting.blogspot.com/2013/02/pengertian-sistem-menurut-para-ahli.html

130

Gambar 97 Penyerahan cinderamata oleh pihak Fakultas

Gambar 98 Foto Bersama di Kantor Kominfo

131

Gambar 99 Acara Workshop Kominfo

Gambar 100 Peringatan HUT RI ke-70

Gambar 101 Demo Aplikasi