Post on 18-Feb-2018
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 1/71
BAB IPENDAHULUAN
A. Latar Belakang Surat merupakan hal yang tidak dapat dipisahkan dari proses
administrasi dalam suatu instansi. Surat merupakan alat
penyampaian yang sangat murah dan daya jangkau lebih luas,
surat juga sering dijadikan bukti hitam diatas putih dalam suatu
organisasi baik swasta maupun negeri. Surat juga memiliki peranan
penting dalam penyampaian informasi secara tidak langsung.
Mengingat pentingnya surat dalam suatu instansi maka surat
dikelola dengan baik dan benar sesuai dengan fungsi serta tujuan
surat tersebut.Dalam era informasi ini kegiatan administrasi semakin
komplek disamping berbagai macam peraturan yang ada dalam
kehidupan sosial masyarakat yang juga mempengaruhi
perkembangan pengolahan surat. Kesadaran dan perhatian
terhadap surat yang secara informatif memberikan gambaran
mengenai proses administrasi tersebut tampaknya sudah banyak
disadari oleh berbagai instansi. Oleh karena itu penciptaan,
penggunaan dan penyampaian surat merupakan hal yang menjadi
perhatian dibanyak kantor atau organisasi yang menjalankan
sistem administrasi modern.P!K "Pusat eknologi !nformasi dan Komunikasi# $MP
merupakan unit pelaksana teknis "$P# yang menyelenggarakan
layanan eknologi, !nformasi, dan Komunikasi "!K# di $ni%ersitas
Muhammadiyah Purwokerto. Selama ini, $P P!K mengalami
kesulitan dalam pembuatan dan pendokumentasian surat
&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 2/71
menyurat karena format surat yang berbeda'beda, serta tidak
adanya staf administrasi yang bertugas mendokumentasikan surat
beserta lampiran'lampirannya.(erdasarkan hal di atas, $P P!K membutuhkan sebuah
aplikasi untuk mengelola dan mendokumentasikan surat'surat
tersebut beserta lampiran'lampirannya. Oleh sebab itu maka
dalam kerja praktek ini mengambil tema )*ancang (angun +plikasi
Persuratan Online dengan studi kasus persuratan di $P P!K
khususnya surat keluar. Dengan adanya +plikasi Persuratan Online
ini, diharapkan dapat membantu $P P!K dalam hal pembuatan
dan pendokumentasian surat, khususnya surat keluar sehingga
pekerjaan dapat diselesaikan dengan cepat dan e-sien.
B. Tujuan ujuan pelaksanaan kerja praktek ini adalah
&. Membangun aplikasi persuratan khususnya pembuatan surat
keluar untuk mempermudah pekerjaan staf P!K./. Surat keluar beserta lampirannya dapat terdokumentasi dalam
bentuk -le agar lebih mudah diakses jika sewaktu'waktu
diperlukan.
C. Batasan Masalah
Pada pembuatan aplikasi Persuratan Online ini terdapat
batasan'batasan masalah yang meliputi, yaitu
&. +plikasi ini dibuat untuk membuat surat keluar dan
dokumentasi 0 pengarsipan surat keluar beserta lampiran'
lampirannya.
/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 3/71
/. Setiap surat hanya bisa melampirkan & dokumen lampiran. 1ika
-le lampiran lebih dari &, maka harus dikompress terlebih dahulu
dengan ekstensi 2ip atau rar.3. 4kstensi lampiran berupa doc, doc5, 5ls, 5ls5, ppt, ppt5, pdf, rar,
2ip, jpg, jpeg, dan png.6. Setiap username hanya boleh mempunyai & jabatan.
D. Manfaat
Dengan adanya pembangunan )+plikasi Persuratan Online
ini, diharapkan dapat membantu dalam pembuatan surat dengan
format yang baik dan benar dan tentu saja dengan proses yang
lebih mudah serta terdokumentasi.
E. Waktu dan Temat Pelaksanaan7aktu +pril 8 1uni /9&:
empat $P Pusat eknologi !nformasi dan Komunikasi "P!K#$ni%ersitas Muhammadiyah Purwokerto
3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 4/71
BAB II!A"IAN PU#TA!A
A. Al$kas$+plikasi adalah satu unit perangkat lunak yang dibuat
untuk melayani kebutuhan akan beberapa akti%itas "(uyens,
/99&#. Sedangkan menurut Dhanta "/99;3/#, aplikasi
"application# adalah software yang dibuat oleh suatu perusahaan
komputer untuk mengerjakan tugas'tugas tertentu, misalnya
Microsoft Word, Microsoft Excel.
B. Al$kas$ Web+plikasi web adalah jenis aplikasi yang diakses melalui
browser, misalnya Internet Explorer dan Mozilla Firefox . "Kadir,
/99;#.
C. #uratSurat adalah sarana komunikasi untuk menyampaikan
informasi tertulis oleh suatu pihak kepada pihak lain. <ungsinya
mencakup lima hal sarana pemberitahuan, permintaan, buah
pikiran, dan gagasan, alat bukti tertulis, alat pengingat, bukti
historis, dan pedoman kerja "Putra, /9&/#.&. Surat Masuk
Menurut 7ursanto "&;;=&9#, Surat masuk adalah sarana
komunikasi tertulis yang diterima dari instansi lain atau dari
perusahaan. Dapat pula diberikan pengertian bahwa surat
masuk adalah semua jenis surat yang diterima melalui pos
"kantor pos# dengan menggunakan buku pengiriman "buku
ekspedisi#./. Surat Keluar
Menurut 7ursanto " &;;&&66#, surat keluar adalah surat yang
sudah lengkap " bertanggal, bernomor, berstempel dan telah
6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 5/71
ditandatangani oleh pejabat yang berwenang yang dibuat oleh
suatu instansi atau lembaga lain#.
D. PHP(ahasa pemrograman P>P termasuk bahasa pemrograman
berbasis web yang bersifat cross platform atau dapat dijalankan di
berbagai macam sistem operasi. Saat ini P>P telah mencapai le%el
:. Pada %ersi ini banyak sekali -tur' -tur menarik yang telah
disediakan. Di antaranya adalah fungsi pengolah string, -le
manipulator, dukungan %isual gra-s, dan masih banyak lagi yang
lainnya "7ahana, /9&3#.
E. DatabaseDatabase sering dide-nisikan sebagai kumpulan data yang
terkait. Secara teknis, yang berada dalam sebuah database adalah
sekumpulan tabel atau objek lain "indeks, view, dan lain'lain#.
ujuan utama pembuatan database adalah untuk memudahkan
dalam mengakses data. Data dapat ditambahkan, diubah, dihapus,
atau dibaca dengan relatif mudah dan cepat "Kadir, /99;#.
F. MySQLMy!" merupakan software yang tergolong database server
dan bersifat Open o#rce. Open o#rce menyatakan bahwa
software ini dilengkapi dengan so#rce code "kode yang dipakai
untuk membuat My!"#, selain tentu saja bentuk exec#table'nya
atau kode yang dapat dijalankan secara langsung dalam sistem
operasi, dan bisa diperoleh dengan cara mengunduh di internet
secara gratis. >al menarik lainnya adalah My!" juga bersifat
m#ltiplatform. My!" dapat dijalankan pada berbagai sistem
operasi "Kadir, /99;#.
:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 6/71
%. Ad&'e Dream(ea)er
Dreamwea%er merupakan software >M? editor profesional
untuk mendesain web secara %isual, mengelola situs atau halaman
web, selain itu juga dapat digunakan sebagai media penulisan
bahasa pemrograman web "Madcoms, /99;#.
@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 7/71
BAB III%AMBA*AN UMUM
A. Pr&+l Pusat Tekn&l&g$ Inf&rmas$ dan !&mun$kas$ Un$)ers$tas
Muhammad$,ah Pur(&kert&+dalah pusat layanan teknologi, informasi, dan komunikasi
"!K# di bidang $ardware, software, jaringan dan pelatihan
komputer di lingkungan $MP. ujuan dari P!K adalah mendukung
tercapainya $MP yang unggul,modern, islami dengan memberikan
pelayanan dalam bidang !K yang terbaik kepada segenap si%itas
akademika $MP.
-. $s$ PTI! Menjadi $nit Pelayan eknis "$P# yang $nggul, Modern, !slami.a. $nggul adalah P!K memiliki dan memberikan layanan
yang bermutu kepada segenap si%itas akademika $MP
sesuai dengan standar penjaminan mutu $MP.b. Modern adalah P!K dalam memberikan layanan kepada
segenap si%itas akademika $MP bekerja dengan cerdas,
cepat, tepat dan manusiawi.c. !slami adalah P!K dalam menyelenggarakan layanannya
menganut prinsip bekerja itu ibadah yang berlandaskan +l'
AurBan dan +s'Sunnah.
/. M$s$ PTI! a. Menyelenggarakan layanan eknologi, !nformasi, dan
Komunikasi "!K# secara profesional sesuai dengan tandard
Operating %roced#re "SOP# yang berlaku dan menjalankan
manajemen P!K yang transparan dan akuntabilitas.b. Meningkatkan dan mengembangkan kompetensi Sumber
Daya Manusia "SDM# P!K dalam ilmu pengetahuan,
=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 8/71
teknologi, dan +l'!slam sehingga dapat memberikan layanan
yang maksimal.c. Mengaktualisasikan prinsip'prinsip dan nilai'nilai !slam
dalam penyelenggaraan P!K.B. #truktur UPT
(erdasarkan S+$+ $ni%ersitas Muhammadiyah Purwokerto
tahun /9&/ $P P!K dipimpin oleh seorang Ketua. P!K memiliki 6
Di%isi, yaitu Di%isi &ardware01aringan, Di%isi oftware01aringan,
Di%isi Sistem !nformasi, dan Di%isi Pelatihan. Masing'masing di%isi
di pimpin oleh seorang kepala. P!K menyampaikan laporan
pertanggungjawaban kegiatannya kepada 7akil *ektor !C "(idang
Pengembangan dan Kerjasama#.+dapun tugas dan fungsi dari masing'masing bagian adalah
sebagai berikut-. !etua PTI!
a. Memimpin pelaksanaan tugas dan fungsi P!K.
'. Mengkonsultasikan perencanaan pengembangan layanan
!K kepada pimpinan $ni%ersitas.0. Menyusun dan menetapkan rencana stratejik serta rencana
kegiatan dengan memperhatikan usulan dari di%isi'di%isi
P!K.d. Menyampaikan laporan tahunan kepada pimpinan
uni%ersitas.e. Memberikan pertimbangan dalam rekrutmen dan
penerimaan staf teknik !K di lingkungan uni%ersitas.f. Melaksanakan pembinaan terhadap teknisi !K yang
bertugas di P!K dan di lingkungan $ni%ersitas.g. Memberikan masukan di bidang !K kepada pimpinan
uni%ersitas.h. Memasyarakatkan layanan !K di lingkungan uni%ersitas
untuk mendorong percepatan peningkatan mutu akademik,
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 9/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 10/71
a. Menyusun *encana Kegiatan dan +nggaran ahunan "*K+#
sesuai dengan perencanaan pengembangan layanan !K
dan rencana stratejik yang telah di tetapkan.'. Melaksanakan dan membuat laporan pelaksanaan kegiatan
dan penggunaan anggaran.0. Memberikan layanan
-2 Perencanaan, pembuatan, dan maintenance aplikasi
des(top bagi $MP./2 Perencanaan, pembuatan, dan maintenance aplikasi
web bagi $MP.32 !nternet kabel.42 )eleconference.
d. Mengelola komputer server di lingkungan $MP.e. etting peralatan jaringan $MP "witc$ dan *o#ter #.f. Mengelola gateway 1aringan Kabel $MP "erver !nternet
Kabel#.g. Mengelola !P %#blic $MP.h. Mengelola +andwit$ $MP.$. Membuat dokumentasi setiap aplikasi yang dibuat, setting
peralatan jaringan, dan pengelolaan !P %#blic dan +andwit$
$MP. j. Menyusun laporan pelaksanaan layanan di%isi
software0jaringan secara periodik kepada ketua P!K.k. Membantu di%isi lain secara teknis.l. Melaksanakan tugas'tugas lain dalam ruang lingkup !K
sesuai dengan penugasan atasan.
4. D$)$s$ #$stem Inf&rmas$a. Menyusun *encana Kegiatan dan +nggaran ahunan "*K+#
sesuai dengan perencanaan pengembangan layanan !K
dan rencana stratejik yang telah di tetapkan.'. Melaksanakan dan membuat laporan pelaksanaan kegiatan
dan penggunaan anggaran.0. Memberikan layanan
&9
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 11/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 12/71
*e6u$rement
Anal,s$s
Des$gn
Test$ng
C&de
Ma$ntenan0e
BAB IMET7DE PELA!#ANAAN
Metode pelaksanaan yang digunakan dalam kerja praktek ini
adalah metode pengembangan W')E*F'"". Metode siklus hidup
pengembangan sistem atau yang sering disebut juga dengan siklus
hidup sistem merupakan proses pembuatan dan pengubahan sistem
serta model dan metodologi yang digunakan untuk mengembangkan
sistem 8 sistem tersebut. Dalam rekayasa perangkat lunak, konsep
W')E*F'"" mendasari berbagai jenis metodologi pengembangan
perangkat lunak. Metodologi 8 metodologi ini membentuk suatu
kerangka kerja untuk perencanaan dan pengendalian pembuatan
sistem informasi, yaitu proses pengembangan perangkat lunak dan
umumnya merujuk pasa sistem komputer atau informasi. ahapan dari
pengembangan sistem dengan metode W')E*F'"" diantaranya
sebagai berikut
Eambar &. Metode Pengembangan Sistem Waterfall
A. Peren0anaan #$stemPerencanaan sistem di lakukan dengan cara
mengumpulkan data'data yang dibutuhkan untuk membangun
&/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 13/71
aplikasi yang akan dibuat, dengan menggunakan teknik
pengumpulan data sebagai berikut&. Obser%asiObser%asi dilakukan dengan cara mengumpulkan
data tentang format surat keluar yang baik dan benar di (+$
dan P!K $MP./. 7awancara
7awancara dilakukan dengan mengajukan
pertanyaan kepada staf P!K dan (+$ untuk mengetahui
permasalahan yang terjadi sehingga dapat disimpulkan
pembuatan aplikasi apa yang tepat untuk memecahkan
permasalahan tersebut.
B. Anal$s$s+nalisis yang dilakukan yaitu dengan mempelajari data
hasil obser%asi dan wawancara agar diketahui permasalahan yang
ada, sehingga ditemukan solusi yang tepat untuk memecahkan
masalah yang ada, dan diterapkan dalam aplikasi yang akan
dibuat.
C. Desa$n 8Peran0angan2Kegiatan yang dilakukan dalam proses perancangan
sistem adalah menentukan arsitektur sistem secara keseluruhan.
Perancangan sistem melibatkan desain sistem ini yang nantinya
akan diimplementasikan. Pada tahap ini saya merancang dan
mendesain alur sistem yang akan digunakan di $P P!K . erdapat
beberapa desain diagram yang menggambarkan alur dari aplikasi
ini yaitu&. Diagram #se case dimaksudkan untuk mengetahui proses apa
saja yang akan terjadi dan siapa saja aktor yang terlibat dalam
sistem.
&3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 14/71
/. 'ctivity Diagram dimaksudkan untuk menjelaskan atau
memodelkan setiap event event yang terjadi dalam suatu #se
case. Secara esensial mirip diagram alir, memperlihatkan
aliran kendali dari suatu akti%itas ke akti%itas lainnya "Fugroho,
/99:#.
D. Coding
-oding merupan penerjemahan desain dalam bahasa
yang bisa dikenali oleh komputer. Dilakukan oleh programmer yang
akan menerjemahkan transaksi yang diminta oleh user. Dalam
aplikasi ini bahasa yang di gunakan adalah bahasa P>P. ahapan
ini lah yang merupakan tahapan secara nyata dalam mengerjakan
suatu sistem. Dalam artian penggunaan komputer akan
dimaksimalkan dalam tahapan ini. Setelah pengkodean selesai
maka akan dilakukan testing terhadap sistem yang telah dibuat
tadi.
E. Testing
ahapan pengujian "testing dilakukan dengan menjalankan
+plikasi Persuratan Online, supaya nantinya aplikasi tersebut bisa
berfungsi dan berjalan dengan baik tanpa ada error . Metode
pengujian yang digunakan adalah menggunakan pengujian blac(
box . Pengertian +lac( +ox esting itu sendiri menurut >anif +l <atta
"/99=#, +lac( +ox esting terfokus pada apakah unit program
memenuhi kebutuhan "re/#irement yang disebutkan dalam
spesi-kasi. Pada blac( box testing, cara pengujiannya hanya
&6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 15/71
dilakukan dengan menjalankan atau mengeksekusi unit atau
modul, kemudian diamati apakah hasil dari unit itu sesuai dengan
proses bisnis yang diinginkan. $ntuk dapat menjalankan aplikasi
ini dibutuhkan $ardware dan software pendukung sebagai berikut
& Komputer
/ Sistem Operasi "Windows atau lainnya#
0 Web browser 1Mozilla Firefox, 2oogle -$rome, dll#
3 4'M%%
>asil dari pengujian akan dijelaskan pada (+( C.
9. Pemel$haraan
Perangkat lunak yang sudah disampaikan kepada
pelanggan pasti akan mengalami perubahan. Perubahan tersebut
bisa karena mengalami kesalahan karena perangkat lunak harus
menyesuaikan dengan lingkungan "periperal atau sistem operasi#
baru, atau karena pelanggan membutuhkan perkembangan
fungsional.
Pada fase pemeliharaan ini dilakukan beberapa kegiatan meliputi
&. Memperbaiki desain dan error pada program./. Memodi-kasi sistem untuk beradaptasi dengan perubahan
lingkungan dan kebutuhan.3. Melibatkan sistem untuk menyelesaikan masalah.6. Menjaga sistem dari kemungkinan masalah di masa yang akan
datang.
&:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 16/71
BAB
HA#IL dan PEMBAHA#AN
A. Anal$s$s !e'utuhan
+plikasi Persuratan Online di P!K ini memiliki beberapa
kebutuhan dalam proses penerapannya, seperti
&. Kebutuhan $ardware
Kebutuhan $ardware yang diperlukan untuk
implementasi aplikasi ini adalah satu unit komputer dengan
sistem operasi Windows sebagai alat untuk menjalankan
aplikasi.
/. Kebutuhan oftware
$ntuk kebutuhan software yang diperlukan adalah sebagai
berikut
a. Web browser 1Mozilla Firefox, 2oogle -$rome, dll
b. 4'M%%
c. Kebutuhan pemakai
Kebutuhan pemakai meliputi orang 8 orang yang
terlibat dalam +plikasi Persuratan Online, yaitu staf P!K.
Staf P!K akan diberikan penjelasan dan petunjuk tentang
pemakaian sistem +plikasi Persuratan Online ini sehingga
nantinya sistem yang diterapkan akan berjalan dengan
baik.
&@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 17/71
B. Peran0angan
Pada perancangan ini meliputi perancangan desain
sistem dan perancangan desain database yang diimplementasikan
pada +plikasi Persuratan Online. $ntuk penjelasan dari beberapa
perancangan di atas adalah sebagai berikut
&. Perancangan desain sistem
Pada tahap ini adalah melakukan rancangan sistem pada
+plikasi Persuratan Online di P!K, serta membuat desain
program dan -tur'-tur apa yang akan dibuat. Pada tahap ini
perancangan sistem menggunakan 5se -ase diagram dan
'ctivity Diagram untuk mengetahui peran apa yang dapat
dilakukan oleh #ser , yaitu sebagai berikut
a. 5se case diagram
&=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 18/71
Eambar /. 5se case diagramKeterangan 5se case diagram&# Ketua P!K bisa membuat surat dan langsung
mencetaknya. Ketua P!K juga bisa membuat #ser baru
dan menghapus #ser yang sudah ada./# Kepala di%isi dan admin bisa membuat surat, namun
untuk mencetak surat harus meminta persetujuan Ketua
P!K terlebih dahulu.
b. 'ctivity diagram
&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 19/71
Eambar 3. +cti%ity diagram Ketua P!K
&;
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 20/71
Eambar 6. +cti%ity Diagram Kepala Di%isi 0 +dmin
/. Perancangan database+plikasi Persuratan Online menggunakan database My!",
terdiri atas beberapa tabel yaitu
a. abel tujuan(erisi tujuan surat beserta kodenya berdasarkan
peraturan penomoran surat. abel &. abel ujuan
/9
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 21/71
Nama T$e data Extra Primary
Key
tujuanGid int '#to increment 6estujuanGna
ma varc$ar 178tujuanGko
de varc$ar 10
b. abel urusan(erisi urusan surat beserta kodenya berdasarkan
peraturan penomoran surat. abel /. abel urusan
Nama T$e data ExtraPrimary
Key urusanGid int '#to
increment
6es
urusanGna
ma
varc$ar178
$rusanGko
de
varc$ar17
c. abel arsip(erfungsi untuk menyimpan isi surat secara umum.
abel 3. abel arsip
NamaT$e
dataExtra
Primary
Key arsipGid Int '#to
increment
6es
nomor Int noGsurat 9arc$ar17
8tanggal DatetujuanGid InturusanGid Int
jenissurat 9arc$ar1:
8lampiran 9arc$ar1:
8
perihal )inytext
/&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 22/71
kepada )inytext isiGsurat )ext
tembusan )inytext userGid Int ketuaGid Int detailGid Int tugasGid Int undangan
Gid
Int
sppdGid Int lampiranGi
d
Int
status 9arc$ar1:7
d. abel arsipGdetail(erisi detail dari surat ugas dan SPPD, yaitu nama, nik,
dan jabatan dari orang yang diberi tugas. abel 6. abel arsipGdetail
Nama T$e data ExtraPrimary
Key arsipdetailG
id
Int '#to
increment
6es
detaiGid Int nama 9arc$ar1;8
8nik 9arc$ar1:7
jabatan 9arc$ar1;8
8
e. abel sppdGdetail(erisi detail dalam Surat Perintah Perjalanan Dinas yang
tidak ada pada isi surat secara umum. abel :. abel sppdGdetail
Nama T$e data ExtraPrimary
Key
//
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 23/71
sppdGid Int 6eskeperluan 9arc$ar1;88
mulaiGtanggal
9arc$ar1:7
sampaiGtang
gal
9arc$ar1:7
tempatGtujua
n
9arc$ar1;88
transportasi 9arc$ar1;88biaya 9arc$ar1;88
f. abel tugasGdetail(erisi detail dalam Surat ugas yang tidak ada pada isi
surat secara umum. abel @. abel tugasGdetail
Nama T$e Data ExtraPrimary
Key tugasGid Int 6es
tujuanGtugas
tinytext
dari 9arc$ar1:7sampai 9arc$ar1:7
g. abel undanganGdetail(erisi detail dalam Surat $ndangan yang tidak ada
pada isi surat secara umum.
abel =. abel undanganGdetail
Nama T$e Data ExtraPrimary
Key undanganGi
d
Int 6es
haritanggal 9arc$ar178waktu 9arc$ar178tempat )inytext acara tinytext
/3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 24/71
h. abel lampiran(erisi rincian lampiran surat.
abel . abel lampiran
Nama T$e Data ExtraPrimary
Key lampiranGid Int 6esnama 9arc$ar178e5t 9arc$ar1;8si2e 9arc$ar178lokasi 9arc$ar1:77
i. abel #ser (erisi data pengguna +plikasi Persuratan Online. abel ;. abel user
Nama T$e Data ExtraPrimary
Key userGid Int '#to
increment
6es
username 9arc$ar1:7password 9arc$ar1:7
namaGuser 9arc$ar1;88 jabatanGuser 9arc$ar178le%el 9arc$ar1:7
j. abel userGhistory(erisi data dari tabel user yang telah dihapus.
abel &9. abel userGhistory
Nama T$e Data Extra
Primary
Key userGid Int 6esusername 9arc$ar1:7password 9arc$ar1:7namaGuser 9arc$ar1;88
jabatanGuse
r
9arc$ar178
le%el 9arc$ar1:7
/6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 25/71
Sedangkan untuk diagram relasi antar tabel dijelaskan
pada gambar dibawah ini
Eambar :. *elasi +ntar abel Database
C. Pengk&dean>asil dari perancangan desain sistem dan perancangan
database diimplementasikan dalam suatu tampilan. +dapun
tampilan tersebut dapat dilihat sebagai berikut&. >alaman login
>alaman login, ditunjukkan pada gambar @, merupakan
halaman pertama yang tampil saat membuka +plikasi
Persuratan Online. Proses kerja dari halaman ini adalah
pengguna harus mengisi #sername dan kata sandi, kemudian
setelah terisi dengan benar klik tombol "ogin, dan apabila nama
pengguna atau kata sandi tidak sesuai maka tidak akan bisa
masuk aplikasi.
/:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 26/71
Eambar @. >alaman "ogin
/. >alaman utama 0 home>alaman utama adalah halaman yang tampil setelah
berhasil login pada halaman login. Pada aplikasi Persuratan
Online, terdapat 3 le%el pengguna yaitu ketua, kadi%, dan
admin sehingga setiap le%el mempunyai tampilan halaman
utama yang berbeda.a. ?e%el ketua
Pada le%el ketua, ditunjukkan pada gambar =,
mempunyai 6 menu utama yaitu (uat Surat, Daftar Surat
Keluar, Daftar unggu, dan etting.
/@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 27/71
Eambar =. >alaman utama untuk le%el ketua
b. ?e%el kadi%Pada le%el kadi%, ditunjukkan pada gambar ,
mempunyai / menu utama yaitu (uat Surat dan Daftar
Surat Keluar.
Eambar . >alaman utama untuk le%el kadi%
c. ?e%el adminPada le%el admin, ditunjukkan pada gambar ;,
mempunyai menu utama yang sama seperti le%el kadi%
yaitu (uat Surat dan Daftar Surat Keluar. etapi pada saat
pembuatan surat, kolom tanda tangan pada le%el kadi%
akan berisi nama dan jabatan kepala di%isi yang
bersangkutan "yang membuat surat#, sedangkan pada le%el
/=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 28/71
admin kolom tanda tangan akan berisi nama dan jabatan
Ketua P!K.
Eambar ;. >alaman utama untuk le%el admin
3. >alaman buat suratPada menu buat surat, terdapat &3 sub menu yaitu (uat
Surat $ndangan, (uat Surat 4daran, (uat Surat Pengumuman,
(uat Surat Pengantar, (uat Surat Pemberitahuan, (uat Surat
ugas, (uat Surat Permohonan, (uat Surat Perintah Perjalanan
Dinas "SPPD#, (uat Surat Pertanggungjawaban, (uat Surat
eguran, (uat Surat *ekomendasi, (uat Surat Keterangan, dan
(uat Surat (+P.a. (uat surat undangan
>alaman (uat Surat $ndangan, ditunjukkan pada
gambar &9, berfungsi untuk membuat surat undangan.
/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 29/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 30/71
Eambar &&. >alaman (uat Surat 4daran
c. >alaman buat surat pengumuman>alaman (uat Surat Pengumuman, ditunjukkan pada
gambar &/, berfungsi untuk membuat surat pengumuman.
39
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 31/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 32/71
Eambar &3. >alaman (uat Surat Pengantar
e. >alaman buat surat pemberitahuan>alaman (uat Surat Pemberitahuan, ditunjukkan pada
gambar &6, berfungsi untuk membuat surat
pemberitahuan.
3/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 33/71
Eambar &6. >alaman (uat Surat Pemberitahuan
f. >alaman buat surat tugas>alaman (uat Surat ugas, ditunjukkan pada gambar
&:, berfungsi untuk membuat surat tugas.
33
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 34/71
Eambar &:. >alaman (uat Surat ugas
g. >alaman buat surat permohonan
>alaman (uat Surat Permohonan, ditunjukkan pada
gambar &@, berfungsi untuk membuat surat permohonan.
36
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 35/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 36/71
Eambar &=. >alaman (uat SPPD
i. >alaman buat surat pertanggungjawaban>alaman (uat Surat Pertanggungjawaban, ditunjukkan
pada gambar &, berfungsi untuk membuat surat
pertanggungjawaban.
3@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 37/71
Eambar &. >alaman (uat Surat Pertanggungjawaban
j. >alaman buat surat teguran>alaman (uat Surat eguran, ditunjukkan pada
gambar &;, berfungsi untuk membuat surat teguran.
3=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 38/71
Eambar &;. >alaman (uat Surat eguran
k. >alaman buat surat rekomendasi>alaman (uat Surat *ekomendasi, ditunjukkan pada
gambar /9, berfungsi untuk membuat surat rekomendasi.
3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 39/71
Eambar /9. >alaman (uat Surat *ekomendasi
l. >alaman buat surat keterangan>alaman (uat Surat Keterangan, ditunjukkan pada
gambar /&, berfungsi untuk membuat surat keterangan.
3;
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 40/71
Eambar /&. >alaman (uat Surat Keterangan
m. >alaman buat surat (+P>alaman (uat Surat (+P, ditunjukkan pada gambar
//, berfungsi untuk membuat surat (+P.
69
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 41/71
Eambar //. >alaman (uat Surat (+P
6. >alaman edit surat>alaman edit surat adalah halaman untuk mengubah
surat yang sudah dibuat jika ada kesalahan. $ntuk le%el admin
dan kadi%, jika surat yang sudah jadi diubah kembali, maka
surat tersebut harus disetujui kembali oleh ketua P!K agar
dapat dicetak. Hontoh halaman edit surat ada pada gambar /3.
6&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 42/71
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 43/71
Eambar /6. >alaman Daftar Surat Keluar
Keterangan gambar /6a. Kolom )Fo Surat berisi nomor surat dengan lin( untuk
melihat isi surat yang sudah dibuat "gambar /:#. ?ink
tersebut akan terbuka jika surat sudah disetujui oleh Ketua
P!K.b. Kolom )?ampiran akan menampilkan nama -le dan bisa
diunduh jika pembuat surat sudah mengunggah -le
lampiran. Sedangkan apabila tidak ada lampiran 0 belum
diunggah, kolom lampiran akan menampilkan tulisan
)5pload pada surat yang dibuat oleh pengguna, atau
menampilkan )') pada surat yang dibuat oleh pengguna
lain. >alaman #pload lampiran ditunjukkan pada gambar /@.c. Kolom )Status menunjukkan status surat. Status surat
disetujui ditunjukkan pada gambar /= , status menunggu
ditunjukkan pada gambar /, sedangkan status ditolak
ditunjukkan pada gambar /;.
63
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 44/71
d. Kolom )+ksi berisi perintah untuk cetak dan edit surat.
Surat dapat dicetak jika status surat tersebut disetujui. !kon
cetak surat ditunjukkan pada gambar 39. !kon edit surat,
ditunjukkan pada gambar 3&, hanya muncul pada surat
yang dibuat oleh pengguna yang membuat surat tersebut.
Famun, jika surat sudah pernah dicetak, ikon edit akan
hilang karena surat yang sudah dicetak tidak boleh dirubah.
>alaman cetak surat ditunjukkan pada gambar 3/.
Eambar /:. >alaman ?ihat Surat
66
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 45/71
Eambar /@. >alaman #pload lampiran
Eambar /=. Status disetujui
Eambar /. Status menunggu
Eambar /;. Status ditolak
Eambar 39. !kon untuk cetak surat
Eambar 3&. !kon untuk edit surat
6:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 46/71
Eambar 3/. >alaman cetak surat@. >alaman daftar tunggu
>alaman daftar tunggu hanya ada pada le%el ketua saja.
>alaman ini berisi daftar surat keluar yang dibuat oleh admin
dan Kepala Di%isi yang membutuhkan persetujuan terlebih
dahulu dari Ketua P!K sebelum dicetak. >alaman daftar
tunggu ditunjukkan pada gambar 33.
6@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 47/71
Eambar 33. >alaman daftar tunggu
Keterangan gambar 33a. Pada kolom )Fo Surat berisi nomor surat yang jika diklik
akan menampilkan isi surat.b. Pada kolom )?ampiran berisi -le lampiran "jika ada# dan
dapat diunduh saat diklik.c. Pada kolom )+ksi berisi ikon untuk menyetujui dan
menolak surat. !kon untuk menyetujui surat ditunjukkan
pada gambar 36, sedangkan ikon untuk menolak surat
ditunjukkan pada gambar 3:.
Eambar 36. !kon untuk menyetujui surat
Eambar 3:. !kon untuk menolak surat
6=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 48/71
=. >alaman etting>alaman setting, ditunjukkan pada gambar 3@, berisi
daftar pengguna +plikasi Persuratan Online.
Eambar 3@. >alaman setting
Keterangan gambar 3@a. Di atas tabel data #ser terdapat tombol ambah $ser yang
apabila ditekan akan redirect ke halaman tambah user.
>alaman tambah user ditunjukkan pada gambar 3=.
b. Pada kolom )+ksi terdapat ikon hapus, ditunjukkan pada
gambar 3, yang digunakan untuk menghapus user0
pengguna. Data pengguna yang dihapus akan masuk ke
tabel userGhistory pada database surat sehingga isi surat
yang ada pada arsip tidak akan berubah isinya.
Eambar 3=. >alaman tambah user
6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 49/71
Eambar 3. !kon hapus
. ab menu penggunaMenu ini terdapat pada kanan atas yang ditandai
dengan nama pengguna. +pabila menu tersebut diklik, maka
akan muncul tampilan seperti pada gambar 3;.
Eambar 3;. ab menu pengguna
Pada gambar di atas, terdapat button *ubah Password dan
button Sign Out.a. ombol *ubah %assword digunakan untuk merubah
password, jadi pengguna tidak perlu menghubungi ketua
P!K jika ingin merubah password. >alaman *ubah
%assword ditunjukkan pada gambar 69.b. ombol ign O#t digunakan untuk keluar dari +plikasi
Persuratan Online.
6;
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 50/71
Eambar 69. >alaman *ubah %assword
D. Penguj$an>asil pengujian menggunakan blac(<box testing pada
beberapa interface dengan inp#t atau kondisi tertentu serta tidak
membahas seluruh sistem yang ada, berikut inii akan dijelaskan
menggunakan tabel pengujian seperti&. abel pengujian halaman login
abel &&. abel pengujian halaman login
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
"ogin
ombol
"ogin
diklik
5sername
"F!K# dan
Kata sandi
dengan
le%el
ketua
>alaman
utama
untuk
le%el
ketua
terbuka
(ena
r
/ >alaman
"ogin
ombol
"ogin
diklik
5sername
"F!K# dan
Kata sandi
dengan
le%el kadi%
>alaman
utama
untuk
le%el kadi%
terbuka
(ena
r
3 >alaman
"ogin
ombol
"ogin
diklik
5sername
"F!K# dan
Kata sandi
dengan
le%el
>alaman
utama
untuk
le%el
admin
(ena
r
:9
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 51/71
admin terbuka
/. abel pengujian tab menu pengguna abel &&. abel pengujian tab menu pengguna
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& ab Menu
Pengguna
ombol
*ubah
%asswor
d diklik
' >alaman
*ubah
%assword
terbuka
(ena
r
/ ab Menu
Pengguna
ombol
ign O#t
diklik
' >alaman
"ogin
terbuka
dan tidak
bisa
kembali ke
halaman
sebelumn
ya dengan
tombolbac( di
browser
(ena
r
3. abel pengujian halaman rubah password abel &3. abel pengujian halaman rubah password
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman*ubah
%assword
ombol#bmit
diklik
%asswordlama dan
password
baru
%asswordlama
diganti
dengan
password
baru
(enar
6. abel pengujian halaman buat surat
abel &6. abel pengujian halaman buat surat
:&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 52/71
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
(uat Surat
$ndangan
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
/ >alaman
(uat Surat4daran
ombol
#bmit diklik
Mengisi
data suratundangan
dengan
benar
Data
tersimpandan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
3 >alaman
(uat Surat
Pengumuman
ombol
#bmit
diklik
Mengisi
data surat
undangandengan
benar
Data
tersimpan
dan tampilpada
>alaman
Daftar
Surat
Keluar
(ena
r
6 >alaman
(uat Surat
Pengantar
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alamanDaftar
Surat
Keluar
(ena
r
: >alaman
(uat Surat
Pemberitahu
an
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alaman
Daftar
(ena
r
:/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 53/71
Surat
Keluar
@ >alaman
(uat Surat
ugas
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
= >alaman
(uat SuratPermohonan
ombol
#bmit diklik
Mengisi
data suratundangan
dengan
benar
Data
tersimpandan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
>alaman
(uat SPPD
ombol
#bmit
diklik
Mengisi
data surat
undangandengan
benar
Data
tersimpan
dan tampilpada
>alaman
Daftar
Surat
Keluar
(ena
r
; >alaman
(uat Surat
Pertanggung
'jawaban
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alamanDaftar
Surat
Keluar
(ena
r
&9 >alaman
(uat Surat
eguran
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alaman
Daftar
(ena
r
:3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 54/71
Surat
Keluar
&& >alaman
(uat Surat
*ekomendasi
ombol
#bmit
diklik
Mengisi
data surat
undangan
dengan
benar
Data
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
&/ >alaman
(uat SuratKeterangan
ombol
#bmit diklik
Mengisi
data suratundangan
dengan
benar
Data
tersimpandan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
&3 >alaman
(uat Surat
(+P
ombol
#bmit
diklik
Mengisi
data surat
undangandengan
benar
Data
tersimpan
dan tampilpada
>alaman
Daftar
Surat
Keluar
(ena
r
:. abel Pengujian >alaman edit surat abel &:. abel pengujian halaman edit surat
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
Edit Surat
$ndangan
ombol
#bmit
diklik
Merubah
data surat
undangan
dengan
benar
Data
terganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
(ena
r
:6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 55/71
Keluar
/ >alamanEdit Surat
4daran
ombol#bmit
diklik
Merubahdata surat
undangan
dengan
benar
Dataterganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(enar
3 >alaman
Edit SuratPengumuma
n
ombol
#bmit diklik
Merubah
data suratundangan
dengan
benar
Data
terganti,tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
6 >alaman
Edit SuratPengantar
ombol
#bmit diklik
Merubah
data suratundangan
dengan
benar
Data
terganti,tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
: >alaman
Edit Surat
Pemberitahuan
ombol
#bmit
diklik
Merubah
data surat
undangandengan
benar
Data
terganti,
tersimpandan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
@ >alaman
Edit Surat
ugas
ombol
#bmit
diklik
Merubah
data surat
undangan
Data
terganti,
tersimpan
(ena
r
::
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 56/71
dengan
benar
dan tampil
pada
>alamanDaftar
Surat
Keluar
= >alaman
Edit Surat
Permohonan
ombol
#bmit
diklik
Merubah
data surat
undangan
dengan
benar
Data
terganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
>alaman
Edit SPPD
ombol
#bmit
diklik
Merubah
data surat
undangan
dengan
benar
Data
terganti,
tersimpan
dan tampil
pada
>alaman
DaftarSurat
Keluar
(ena
r
; >alaman
Edit Surat
Pertanggung
'jawaban
ombol
#bmit
diklik
Merubah
data surat
undangan
dengan
benar
Data
terganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
&9 >alaman
Edit Surat
eguran
ombol
#bmit
diklik
Merubah
data surat
undangan
dengan
benar
Data
terganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
(ena
r
:@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 57/71
Keluar
&& >alamanEdit Surat
*ekomendasi
ombol#bmit
diklik
Merubahdata surat
undangan
dengan
benar
Dataterganti,
tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(enar
&/ >alaman
Edit SuratKeterangan
ombol
#bmit diklik
Merubah
data suratundangan
dengan
benar
Data
terganti,tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
&3 >alaman
Edit Surat(+P
ombol
#bmit diklik
Merubah
data suratundangan
dengan
benar
Data
terganti,tersimpan
dan tampil
pada
>alaman
Daftar
Surat
Keluar
(ena
r
@. abel pengujian halaman daftar surat keluar
abel &@. abel pengujian halaman daftar surat keluar
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
daftar surat
keluar
"in(
pada
kolom
nomor
surat
diklik
' >alaman
?ihat
Surat
terbuka
(ena
r
:=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 58/71
/ >alaman
daftar surat
keluar
"in(
pada
kolomlampiran
diklik
' Mengundu
h jika ada
lampiran, jika tidak
ada
lampiran
halaman
#pload
lampiran
terbuka
(ena
r
3 >alaman
daftar surat
keluar
!kon
cetak
pada
kolom
+ksi
' >alaman
cetak
surat
terbuka
(ena
r
6 >alaman
daftar surat
keluar
!kon edit
pada
kolom
+ksi
diklik
' >alaman
edit surat
terbuka
(ena
r
=. abel pengujian halaman #pload lampiran abel &=. abel pengujian halaman #pload lampiran
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
#pload
lampiran
ombol
browse
diklik
' Menampilka
n jendela
untuk -le
(ena
r
/ >alaman#pload
lampiran
ombol#bmit
diklik
Famalampiran
dan -le
lampiran
Datatersimpan
dan lin(
tampil di
halaman
daftar surat
keluar
(enar
. abel pengujian halaman daftar tunggu
:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 59/71
abel &. abel pengujian halaman daftar tunggu
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
daftar
tunggu
"in(
pada
kolom Fo
Surat
diklik
' >alaman
lihat surat
terbuka
(ena
r
/ >alaman
daftar
tunggu
"in(
pada
kolom
lampiran
diklik
' Mengunduh
jika ada
lampiran,
jika tidak
ada
lampiran
halaman
#pload
lampiran
terbuka
(ena
r
3 >alaman
daftartunggu
!kon
Menyetujui surat
diklik
' Status
suratberubah
menjadi
disetujui
dan hilang
dari daftar
tunggu
(ena
r
6 >alaman
daftar
tunggu
!kon
menolak
surat
diklik
' Status
surat
berubah
menjadi
ditolak dan
hilang dari
daftar
tunggu
(ena
r
;. abel pengujian halaman setting abel &;. abel pengujian halaman setting
N& interfae :ang !n"#t $#t"#t #tat
:;
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 60/71
d$uj$ us
& >alamansetting ombol ambah
5ser
diklik
' >alamantambah
#ser
terbuka
(enar
/ >alaman
setting
!kon
hapus
pada
kolom
+ksi
diklik
' Data #ser
terhapus
(ena
r
&9.abel pengujian halaman tambah #ser abel /9. abel pengujian halaman tambah #ser
N& interfae :ang
d$uj$
!n"#t $#t"#t #tat
us
& >alaman
tambah#ser
ombol
#bmit diklik
5sernam
e, passwor
d, nama,
dan
jabatan
Data
tersimpandan tampil
di daftar
#ser
(ena
r
E. Imlementas$ dan emel$haraan
Pada tahap implementasi ini yaitu dengan memasang
aplikasi pada P!K $ni%ersitas Muhammadiyah Purwokerto.
Kemudian melakukan pelatihan kepada staf P!K yang bertujuan
supaya staf P!K dapat mengerti bagaimana penggunaan aplikasi
Persuratan Online.
@9
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 61/71
Pada tahap pemeliharaan dilakukan untuk mengatasi
apabila terjadi kesalahan'kesalahan yang belum ditemui pada saat
pengujian, yang memungkinkan untuk perbaikan apabila hal
tersebut terjadi.
@&
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 62/71
BAB I
PENUTUP
A. !E#IMPULAN
Kesimpulan dari kerja praktek ini adalah dengan
terbangunnya +plikasi Persuratan Online yang berguna untuk
membuat surat, dimana staf P!K dapat membuat surat tanpa
perlu mengatur format karena format surat sudah diatur sesuai
dengan jenis surat, pencarian arsip surat lama yang lebih cepat
dan e-sien, dan penyimpanan data yang lebih aman. Dengan
demikian proses pembuatan surat dan pengarsipan surat keluar di
P!K dapat menjadi lebih mudah.
B. #A*AN
Saran yang digunakan dalam pembuatan +plikasi Persuratan
Online di P!K $ni%ersitas Muhammadiyah Purwokerto adalah
&. Mengembangkan aplikasi dengan menambahkan surat masuk
sehingga staf P!K lebih dipermudah dengan pengarsipan surat
masuk dan surat keluar pada & aplikasi.
/. Mengembangkan aplikasi ini dengan menambahkan jaringan ke
unit selain P!K sehingga untuk surat keluar yang ditujukan pada
lingkup $MP tidak perlu dicetak melainkan hanya dikirim secara
online.
@/
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 63/71
Semoga +plikasi Persuratan Online dapat digunakan secara
maksimal di P!K $ni%ersitas Muhammadiyah Purwokerto.
DA9TA* PU#TA!A
(uyens, 1., /99&, Web Database Development, 1akarta 4le5 Media
Komputindo.Dhanta, *., /99;, %engantar Ilm# =omp#ter, Surabaya !ndah.
<atta, >.+., /99=, 'nalisis dan %erancangan istem Informasi #nt#( =e#ngg#lan +ersaing %er#sa$aan dan Organisasi Modern,
Iogyakarta +ndi OJset.
Kadir, +., /99;, From >ero to ' %ro? Memb#at 'pli(asi Web dengan%&% dan Database My!", Iogyakarta Penerbit +ndi.
Madcoms, /99;, Ma$ir dalam @ &ari? 'dobe Dreamweaver -3, Iogyakarta Penerbit +ndi.
Fugroho, +., /99:, *ational *ose #nt#( %emodelan +erorientasi ObAe(,
(andung !nformatika.
Putra, <., /9&/, Pengertian Surat, Macam'Macam dan Hontoh Surat,$ttps?BBfebianp#tra.wordpress.comB:8;:B8@B8;Bpengertian<s#rat<macam<macam<dan<conto$<s#ratB , diakses tanggal /@ Maret/9&:.
7ahana, /9&3, &ot )ip C )ri( %&% %rogramming, Iogyakarta Penerbit
+ndi.7ursanto, &;;&, =earsipan ;, Iogyakarta Kanisius.
@3
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 64/71
LAMPI*AN
?ampiran &. Pedoman Penomoran Surat $MP
Ped&man Pen&m&ran #uratUn$)ers$tas Muhammad$,ah Pur(&kert&
N&
.Tujuan1#urat !&de !eterangan
&. $MP "ke dalam# +& (adan Pelaksana >arian "(P>#+/ Senat+3 *ektor+6 7akil *ektor
+: Dekan+@ 7akil Dekan+= Program Studi+ ?embaga+; (iro+&9 $P+&& Dosen+&/ Mahasiswa+&3 Senat Mahasiswa+&6 $KM+&: !MM+&@ Karyawan+&= ?ain'lain, $mum
/. Muhammadiya
h "keluar#
(& ingkat Pusat(/ ingkat 7ilayah "Propinsi#(3 ingkat Daerah "Kabupaten#(6 Ortom "!MM, !*M#
3. Pemerintah
"keluar#
H& DiktiH/ KopertisH3 +ptisiH6 KopertaisH: Depdiknas, Depag, SetingkatH@ Pemda Dati !
H= Pemda Dati !!H (ank, ($MFH; ?ain'lain, $mum
6. Perguruan
inggi "keluar#
D& PFD/ PSD3 Perorangan, ?ain'lain
:. $rusan'urusan ! Kemahasiswaan!! +kademik "Pendidikan Pengajaran#!!! Penelitian, Pengabdian Masyarakat
Kerjasama#!C Personalia
C Perpustakaan
@6
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 65/71
C! Peralatan, Perlengkapan,
+dministrasi
C!! KeuanganC!!! ?ain'lain, $mum
@. Fo $rut & Dimulai dari tanggal & bulan 1anuari
sampai tanggal 3& Desember=. 1enis >uruf ' Halibri. 1enis Kertas ' Auarto;. 1enis Surat S.Kep
.
Surat Keputusan
S.Ket
.
Surat Keterangan
S.$d. Surat $ndangan
S.4d. Surat 4daranS.Pu. Surat PengumumanS.Pt. Surat PengantarS.Pb. Surat PemberitahuanS.u. Surat ugasS.Ku. Surat KuasaS.Pj. Surat PerjanjianS.Ph. Surat PermohonanSPPD Surat Perintah Perjalanan DinasS.Pjn. Surat PertanggungjawabanS.g. Surat eguran
S.$p. Surat $capanS.*e. Surat *ekomendasiS.!c. Surat !2in Huti
&9
.
Penggunaan
Singkatan
<K!P <akultas Keguruan dan !lmu
Pendidikan<4 <akultas 4konomi< <akultas eknik<P <akultas Pertanian<+! <akultas +gama !slam<.Psi. <akultas Psikologi<.<ar. <akultas <armasi
<S <akultas Sastra<> <akultas >ukum<ikes <akultas !lmu Kesehatan?PPM ?embaga Penelitian dan Pengabdian
Masyarakat?PP! ?embaga Pengkajian dan Pengamalan
!slam?1M ?embaga 1aminan MutuP!K Pusat eknologi !nformasi dan
KomunikasiP( Pusat (ahasa
P3+! Pusat Peningkatan dan Pengembangan
@:
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 66/71
+kti%itas !nstruksionalPPM( Pusat Penerimaan Mahasiswa (aru
S+H Student +d%isory HenterHDH Hareer De%elopment HenterPerp. Perpustakaan(+$ (iro +dministrasi $mum(+K (iro +dministrasi Keuangan(++ (iro +dministrasi +kademik(K (iro Kemahasiswaan(>K (iro >umas dan Kerjasama
@@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 67/71
?ampiran /. Hontoh >asil Hetak Surat $ndangan
?ampiran 3. Hontoh >asil Hetak Surat Pengantar
@=
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 68/71
@
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 69/71
?ampiran 6. Hontoh >asil Hetak Surat 4daran
?ampiran :. Hontoh >asil Hetak SPPD
@;
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 70/71
?ampiran @. Hontoh >asil Hetak Surat ugas
=9
7/23/2019 Rancang Bangun Aplikasi Persuratan Online di PTIK Universitas Muhammadiyah Purwokerto
http://slidepdf.com/reader/full/rancang-bangun-aplikasi-persuratan-online-di-ptik-universitas-muhammadiyah 71/71