Anda di halaman 1dari 140

APLIKASI PENGARSIPAN SURAT MASUK DAN SURAT

KELUAR PADA DINAS KELAUTAN DAN PERIKANAN


PROVINSI SUMATERA UTARA

TUGAS AKHIR

ATIKA SARI
152406054

PROGRAM STUDI D3 TEKNIK INFORMATIKA


FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2018
APLIKASI PENGARSIPAN SURAT MASUK DAN SURAT
KELUAR PADA DINAS KELAUTAN DAN PERIKANAN

UNIVERSITAS SUMATERA UTARA


PROVINSI SUMATERA UTARA

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh gelar


Ahli Madya

ATIKA SARI
152406054

PROGRAM STUDI D3 TEKNIK INFORMATIKA


FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2018
PERNYATAAN ORISINALITAS

UNIVERSITAS SUMATERA UTARA


APLIKASI PENGARSIPAN SURAT MASUK DAN SURAT KELUAR PADA
DINAS KELAUTAN DAN PERIKANAN PROVINSI SUMATERA UTARA

TUGAS AKHIR

Saya menyatakan bahwa laporan tugas akhir ini adalah hasil karya sendiri, kecuali
beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, 04 Juni 2018

Atika Sari
152406054

UNIVERSITAS SUMATERA UTARA


PENGESAHAN LAPORAN TUGAS AKHIR

Judul : Aplikasi Pengarsipan Surat Masuk dan Surat


Keluar Pada Dinas Kelautan dan Perikanan
Povinsi Sumatera Utara
Kategori : Laporan Tugas Akhir
Nama Mahasiswa : Atika Sari
Nomor Induk Mahasiswa : 152406054
Program Studi : Diploma 3 Teknik Informatika
Fakultas : MIPA – Universitas Sumatera Utara

Disetujui di
Medan, 04 Juni 2018

Ketua Program Studi Pembimbing,

Dra. Normalina Napitupulu, M.Sc. Drs. Agus Salim Harahap, M.Si.


NIP.196311061989022001 NIP.195408281981031004

UNIVERSITAS SUMATERA UTARA


APLIKASI PENGARSIPAN SURAT MASUK DAN SURAT KELUAR PADA DINAS
KELAUTAN DAN PERIKANAN PROVINSI SUMATERA UTARA

ABSTRAK

Arsip merupakan bagian pekerjaan kantor yang sangat penting. Arsip sangat
dibutuhkan dalam pelaksanaan kegiatan kantor karena arsip merupakan pusat ingatan
untuk setiap kegiatan dalam kantor. Akan tetapi, dalam penanganan arsip surat
instansi masih tidak efisien karena dilakukan secara manual sehingga banyak
memakan waktu untuk penemuan kembali. Penelitian ini bertujuan untuk merancang
sebuah aplikasi pengarsipan surat secara terkomputerisasi yang dapat mempermudah
pencarian informasi kearsipan secara cepat, akurat dan efisien waktu. Perancangan
aplikasi ini berbasis web dengan penyimpanan dokumen bersifat softcopy. Adapun
metode penelitian yang digunakan untuk meyelesaikan berbagai permasalahan yang
terjadi adalah pustaka, observasi, wawancara, analisis sistem, perancangan sistem,
pembuatan program dan pengujian program. Hasil penelitian ini yaitu aplikasi yang
dapat mengelola surat masuk dan surat keluar yang dapat digunakan sebagai
alternative untuk memecahkan masalah pada Dinas Kelautan dan Perikanan Provinsi
Sumatera Utara dan diharapkan dapat membantu bagian administrasi kantor untuk
mengelola arsip secara efektif dan efisien, dengan menggunakan media komputer
dalam pengelolaan arsip surat masuk dan surat keluar.

Kata kunci : aplikasi, berbasis web, pengarsipan surat, perancangan APPLICATION OF


ARCHIVING INCOMING AND OUTGOING MAIL AT
THE MARINE AND FISHERY DEPARTEMENT OF NORTH SUMATERA
PROVINCE

ABSTRACT

The archive is part the office work which is very important. The archive is necessary
in the implementation of the activities of the office because the archive is the centre
of remembrance for every activity in the office. However, in the instant mail archive
handling, still not efficient because it is done manually so much time consuming to
find the letter. This research aims to design an archiving application letter in which
computerization can make it easier to search, archival information in a timely,
accurate and time-saving. This web-based application design with storage documents
are softcopy. As for the methods of study used to finish the various problems that
occur are a library, observation, interview, system analysis, system design,
manufacture, program and testing program. The results of this research that is an
application that can manage yor incoming mail and outgoing mail can be used as an
alternative to solve the problem at the Marine and Fishery Departement of North
ii

UNIVERSITAS SUMATERA UTARA


Sumatera Province and is expected to help the section administrative office to
manage effectively and effectively archive, by using media computers in the
management of the archives of the incoming mail and outgoing mail.

Keywords : applications, web-based, mail archiving, design

PENGHARGAAN

Puji dan syukur kehadirat Allah SWT, karena dengan ridha dan karunia-Nya
serta berkah dan rahmat-Nya, penulis dapat menyelesaikan penyusunan Laporan
Tugas Akhir ini dengan judul “Aplikasi Pengarsipan Surat Masuk dan Surat
Keluar Pada Dinas Kelautan dan Perikanan Provinsi Sumatera Utara”, sebagai
salah satu syarat untuk memperoleh gelar Ahli Madya pada Jurusan Diploma 3
Teknik Informatika Universitas Sumatera Utara.
Dalam penyusunan tugas akhir ini, penulis menyadari masih terdapat banyak
kekurangan sehingga jauh dari kata sempurna. Namun penulis merasa laporan ini
adalah salah satu kebanggaan tersendiri bagi penulis, serta penulis juga berharap atas
kritik dan saran yang bersifat membangun bagi penulis untuk ke depannya.
Selanjutnya dengan segala kerendahan dan ketulusan hati, penulis
menyampaikan ucapan terima kasih kepada semua pihak yang telah memberikan
bantuan dan dorongan baik secara langsung maupun tidak langsung sehingga penulis

iii

UNIVERSITAS SUMATERA UTARA


dapat menyelesaikan laporan tugas akhir. Ucapan terima kasih penulis tujukan
kepada:
1. Bapak Drs. Agus Salim Harahap, M.Si. selaku pembimbing yang telah meluangkan waktu
dalam memberi pengarahan dan bimbingan baik kritik dan saran kepada penulis selama
penyusunan laporan tugas akhir ini.
2. Ibu Dra. Normalina Napitupulu, M.Sc. selaku Ketua Program Studi D3 Teknik Informatika
FMIPA USU.
3. Bapak Drs. James Piter Marbun, M.Kom. selaku Sekretaris Program Studi D3 Teknik
Informatika FMIPA USU.
4. Bapak Dr. Kerista Sebayang, M.S. selaku Dekan FMIPA USU
5. Ibu Dr. Nursahara Pasaribu, M.Sc. selaku Wakil Dekan I FMIPA USU yang telah
mengeluarkan surat permohonan untuk melaksanakan riset.
6. Dosen-dosen serta staf akademik USU
7. Rekan-rekan mahasiswa/i D3 Teknik Informatika FMIPA USU

8. Dan semua pihak yang telah banyak membantu penulis dalam menyelesaikan Tugas Akhir ini
yang tidak dapat disebutkan satu persatu.

Penghargaan ucapan terima kasih yang tak terhingga penulis ucapkan kepada
Ayahanda Sukirman dan Ibunda Sudarwati yang penulis cintai dan sayangi, serta
kakak dan adik yang turut memberikan dukungan dan bantuan serta semangat dan
do’a selama menjalankan pendidikan.
Akhir kata semoga ketulusan serta bantuan dari semua pihak tersebut di atas kiranya
mendapat balasan berkah dan anugerah dari Allah SWT.

Medan, 04 Juni 2018

Atika Sari

iv

UNIVERSITAS SUMATERA UTARA


DAFTAR ISI

PENGESAHAN LAPORAN TUGAS AKHIR i


ABSTRAK ii
ABSTRACT iii
PENGHARGAAN iv
DAFTAR ISI vi
DAFTAR TABEL viii
DAFTAR GAMBAR ix
DAFTAR LAMPIRAN x
DAFTAR SINGKATAN xi

BAB 1 PENDAHULUAN 1
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Batasan Masalah 2
1.4 Tujuan 2

UNIVERSITAS SUMATERA UTARA


1.5 Manfaat 3
1.6 Sistematika Penulisan Tugas Akhir 3

BAB 2 TINJAUAN PUSTAKA 5


2.2 Aplikasi Web 6
2.3 Sistem Informasi 6
2.4 Basis Data 7
2.5 Surat 9
2.6 Arsip 16
2.7 PHP 18
2.8 HTML 20
2.9 MySQL 22
2.10 XAMPP 24
2.11 PHPMyAdmin 25
2.12 Sublime 26
2.13 Flowchart 27
2.14 Flowmap 30
2.15 ERD 31
2.16 DFD 33
BAB 3 METODE PENELITIAN 36
3.1 Tempat dan Waktu Penelitian 36
3.2 Tahapan Kegiatan Penelitian 36
3.3 Analisis Sistem 39
3.4 Perancangan Sistem 43
BAB 4 HASIL DAN PEMBAHASAN 54
4.1 Penggunaan Aplikasi 54
4.2 Pengujian Aplikasi 61
BAB 5 PENUTUP 65
5.1 Kesimpulan 65
5.2 Saran 65
DAFTAR PUSTAKA 66
vi

UNIVERSITAS SUMATERA UTARA


2.1 Pengertian Komputer 5

LAMPIRAN

vii

UNIVERSITAS SUMATERA UTARA


viii

UNIVERSITAS SUMATERA UTARA


Nomor
DAFTAR TABEL

Judul Halaman
Tabel

2.1 Simbol-simbol flowchart 29


2.2 Simbol-simbol flowmap 30
2.3 Simbol-simbol entity relationship diagram 33
2.4 Simbol-simbol data flow diagram 35
3.1 Waktu pelaksanaan penelitian 36
3.2 Flowmap arsip surat masuk yang sedang berjalan 39
3.3 Flowmap arsip surat keluar yang sedang berjalan 40
3.4 Flowmap arsip surat masuk yang diusulkan 41
3.5 Flowmap arsip surat keluar yang diusulkan 42
3.6 Tabel user 49
3.7 Tabel surat masuk 49
3.8 Tabel surat keluar 50
4.1 Hasil pengujian form login 61
4.2 Hasil pengujian menu utama 62
4.3 Hasil pengujian menu surat masuk 63
4.4 Hasil pengujian menu surat keluar 64
DAFTAR GAMBAR

Judul Halaman
Gambar

3.1 Flowchart aplikasi pengarsipan surat masuk dan surat keluar 31


3.2 Diagram konteks aplikasi pengarsipan surat masuk dan surat keluar 44
3.3 DFD level 0 aplikasi pengarsipan surat masuk dan surat keluar 45
3.4 DFD level 1 proses 2 aplikasi pengarsipan surat masuk dan surat keluar 45
3.5 DFD level 1 proses 3 aplikasi pengarsipan surat masuk dan surat keluar 46
3.6 ERD aplikasi pengarsipan surat masuk dan surat keluar 48
3.7 Perancangan struktur menu 50
3.8 Perancangan login user 51
3.9 Perancangan input surat masuk 51
3.10 Perancangan input surat keluar 52
3.11 Perancangan output surat masuk 52
ix

UNIVERSITAS SUMATERA UTARA


Nomor
3.12 Perancangan output surat keluar 53
4.1 Tampilan form login 54
4.2 Tampilan menu utama 55
4.3 Tampilan tambah surat masuk 55
4.4 Tampilan tambah surat keluar 56
4.5 Tampilan data surat masuk 56
4.6 Tampilan data surat keluar 57
4.7 Tampilan lihat surat masuk 57
4.8 Tampilan lihat surat keluar 58
4.9 Tampilan edit surat masuk 58
4.10 Tampilan edit surat keluar 59
4.11 Pencarian data surat masuk 59
4.12 Pencarian data surat keluar 60
4.13 Laporan surat masuk 60
4.14 Laporan surat keluar 61
DAFTAR LAMPIRAN

Judul Halaman
Lampiran

1. Listing Program L-1


2. Surat Keterangan Dosen Pembimbing Tugas Akhir
3. Surat Permohonan Izin Riset Pengambilan Data
4. Surat Izin Riset Pengambilan Data
5. Surat Keterangan Hasil Uji Program Tugas Akhir
6. Kartu Bimbingan Tugas Akhir

UNIVERSITAS SUMATERA UTARA


Nomor

xi

UNIVERSITAS SUMATERA UTARA


DAFTAR SINGKATAN

API = Application Programming Interface


CERN = Conseil Europeen pourla Recherche Nucleaire
CSS = Cascading Style Sheets
CTSS = Compatible Time Sharing System
DFD = Data Flow Diagram
ERD = Entity Relationship Diagram
FI = Form Interpreted
GPL = General Public License
GUI = Graphical User Interface
HTML = HypetText Markup Language
PHP = Hypertext Preprocessing
MySQL = My Structured Query Language
HTTP = HyperText Transfer Protocol
IIS = Internet Information Services
I/O = Input/Output
ISO = International Organization for Standardization
IT = Information and Technology
LAMP = Linux, Apache, MySQL, Perl
MATLAB = Matrix Laboratory
mSQL = mini Structured Query Language
ODBC = Open Database Connectivity
RDBMS = Relational Database Management System
SDLC = System Development Life Cycle
SGML = Standart Generalized Markup Language
TCL = Transaction Control Language
TR = Technical Report
XML = Extensible Markup Language
WWW = World Wide Web

BAB 1 PENDAHULUAN

1.1 Latar Belakang


Pada era globalisasi teknologi komputer memegang peranan yang sangat
penting untuk membantu proses aktivitas kerja di instansi maupun perkantoran baik
dari lembaga pemerintah maupun swasta. Dalam dunia perkantoran keberadaan
teknologi komputer juga sangat berguna bagi pihak instansi untuk mempermudah
kinerja dalam kegiatan sehari-hari terutama dalam pengolahan data surat masuk dan
surat keluar.

xii

UNIVERSITAS SUMATERA UTARA


xiii

Pada saat ini, prosedur yang diterapkan dalam pengarsipan surat masuk dan
surat keluar pada Dinas Kelautan dan Perikanan Provinsi Sumatera Utara masih
dilakukan secara manual. Dokumentasi surat masuk dan keluar hanya berupa
penulisan di buku besar dan penyimpanan dokumen masih bersifat hardcopy sehingga
membutuhkan waktu yang cukup lama dalam proses pencarian dokumen lama.
Begitu pentingnya peran pengarsipan dalam menangani surat masuk dan surat
keluar tersebut, maka penulis mencoba untuk menerapkan sistem pengarsipan yang
lama dengan sistem pengarsipan yang baru yaitu dengan menggunakan sistem
komputerisasi, yang diharapkan dapat lebih mempermudah dan mempercepat dalam
proses pengolahan data dan mendapatkan informasi dengan cepat dan efisien.
Berdasarkan hasil analisis tersebut, maka penulis mencoba untuk menerapkan sistem
pengarsipan pada Dinas Kelautan dan Perikanan Provinsi Sumatera Utara. Sehingga
penulis memilih judul “Aplikasi Pengarsipan Surat Masuk dan Surat Keluar
Pada Dinas Kelautan dan Perikanan Provinsi Sumatera Utara” pada tugas akhir
ini.

1.2 Rumusan Masalah


Berdasarkan latar belakang yang telah diuraikan, maka rumusan masalah
dalam penelitian ini yaitu :
a. Bagaimana konsep pengolahan sistem kearsipan yang diterapkan Dinas Kelautan
dan Perikanan Provinsi Sumatera Utara.
b. Permasalahan yang dihadapi instansi dalam pengelolahan surat.
c. Bagaimana merancang dan mengimplementasikan aplikasi berbasis komputerisasi
yang dapat menangani kearsipan surat dengan baik, efektif dan efisien.

1.3 Batasan Masalah


Batasan masalah dilakukan agar penulis dapat memberikan pemahaman yang
terarah dan sesuai dengan yang diharapkan. Agar pembahasan tidak menyimpang dari
pokok perumusan masalah yang ada, maka permasalahan yang akan dibahas pada
aplikasi ini antara lain :

UNIVERSITAS SUMATERA UTARA


a. Aplikasi yang dibangun digunakan untuk mengelola data yang berkaitan dengan
arsip surat masuk dan surat keluar pada Kantor Dinas Kelautan dan Perikanan
Provinsi Sumatera Utara.
b. Aplikasi yang dibangun berbentuk website dengan bahasa pemrograman HTML
dan PHP.
c. Penelitian ini membahas tentang pengarsipan dan perlakuan data, dengan sistem
keamanan berupa password.

1.4 Tujuan
Berdasarkan latar belakang dan rumusan masalah yang telah diuraikan, maka
adapun tujuan dari penelitian ini adalah :
a. Mengetahui permasalahan yang dihadapi instansi dalam mengelola kearsipan
surat.
b. Menghasilkan aplikasi pengarsipan surat masuk dan surat keluar pada Dinas
Kelautan dan Perikanan Provinsi Sumatera Utara berbasis web.

1.5 Manfaat
Berdasarkan tujuan yang telah diuraikan, maka adapun manfaat dari penelitian
ini adalah :
a. Membantu dan memberi kemudahan kepada Dinas Kelautan dan Perikanan
Provinsi Sumatera Utara dalam proses kearsipan surat masuk dan surat keluar.
b. Dengan adanya aplikasi ini diharapkan proses kearsipan surat masuk dan surat
keluar lebih akurat, cepat dan efektif dibandingkan dengan kearsipan surat secara
manual.

1.6 Sistematika Penulisan Tugas Akhir


Untuk memahami lebih jelas tugas akhir ini, maka materi-materi yang tertera
pada Tugas Akhir ini dikelompokkan menjadi beberapa bab dengan sistematika
penulisan sebagai berikut :

UNIVERSITAS SUMATERA UTARA


xv

BAB 1 PENDAHULUAN
Berisikan latar belakang, rumusan masalah, batasan masalah, tujuan,
manfaat serta sistematika penulisan laporan.

BAB 2 TINJAUAN PUSTAKA


Berisikan penjelasan singkat mengenai pengertian komputer, aplikasi
web, sistem informasi, basis data, penjelasan tentang surat dan arsip
surat, PHP, HTML, MySQL, XAMPP, PHPMyAdmin, sublime text,
flowchart, flowmap, ERD serta DFD.

BAB 3 METODE PENELITIAN


Berisikan tempat dan waktu penelitian, tahapan kegiatan penelitian
yang didalamnya mencakup metode pengumpulan data dan metode
pengembangan sistem, analisis sistem berjalan ataupun sistem yang
diusulkan, perancangan sistem seperti flowchart, diagram konteks
serta DFD, perancangan logika basis data, perancangan fisik basis data
dan perancangan antarmuka sistem.

BAB 4 HASIL DAN PEMBAHASAN


Berisikan pemaparan proses dan sekaligus hasil analisis. Pembahasan
merupakan hal terpenting yang perlu dipaparkan. Di sinilah para
pembaca akan dapat menilai sejauh mana penulis mengembangkan
wawasannya dalam sebuah penelitian.

BAB 5 PENUTUP
Berisikan tentang kesimpulan dan saran. Kesimpulan merupakan inti
dari proses penelitian yang telah dilaksanakan. Selanjutnya penulis
menyampaikan saran-saran terhadap hasil aplikasi yang dipandang
memiliki banyak kekurangan yang berkaitan dengan peningkatan
efisiensi dan efektifitas aplikasi yang dirancang dimasa yang akan
datang. Selanjutnya penulis perlu mencantumkan beberapa buku yang

UNIVERSITAS SUMATERA UTARA


telah dikaji selama proses penelitian berlangsung pada daftar pustaka.
Jika ada beberapa hal yang dipandang perlu untuk dilampirkan,
penulis dapat menyisipkannya setelah daftar kepustakaan disusun.

BAB 2 TINJAUAN PUSTAKA

2.1 Pengertian Komputer


Istilah komputer (computer) diambil dari bahasa latin Computare yang berarti
menghitung (to compute atau reckon). Dengan demikian komputer diartikan sebagai
alat hitung atau mesin hitung. Akan tetapi komputer sangat berbeda dengan
kalkulator. Perbedaannya adalah komputer dapat mengolah data dengan kecepatan
dan ketelitian yang tinggi. Selain itu komputer dapat menyimpan data dalam memori
atau storage unitnya dan dapat melakukan proses secara kontiniu dan otomatis tanpa
banyak campur tangan manusia. Berikut definisi komputer menurut beberapa ahli :
a. Menurut Robert H. Blissmer komputer merupakan suatu alat elektronik yang
mampu melakukan beberapa tugas seperti menerima input yang kemudian
memproses input tadi dengan programnya dan menyimpan perintah-perintah dan
hasil dari pengolahan tersebut sehingga menyediakan output dalam bentuk
informasi.
b. Menurut Donald H. Sanders komputer adalah sistem elektronik untuk
memanipulasi data yang cepat dan tepat serta dirancang dan diorganisasikan
supaya secara otomatis menerima dan menyimpan data input, memprosesnya dan

UNIVERSITAS SUMATERA UTARA


xvii

menghasilkan output dibawah pengawasan suatu langkah-langkah intruksiintruksi


program yang tersimpan di memori (stored program).

Dari beberapa definisi tersebut, dapat disimpulkan bahwa komputer adalah : a.


Alat elektronik
b. Dapat menerima input data
c. Dapat mengolah data
d. Dapat memberikan informasi
e. Menggunakan suatu program yang tersimpan di memori komputer
f. Dapat menyimpan program dan hasil pengolahan
g. Bekerja secara otomatis
Sedang yang disebut dengan program adalah kumpulan dari instruksi atau perintah
terperinci yang sudah dipersiapkan supaya komputer dapat melakukan fungsinya
dengan cara yang sudah ditentukan.

2.2 Aplikasi Web


Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang
disebut HTML (HyperText Markup Language) dan protokol yang digunakan
dinamakan HTTP (HyperText Transfer Protocol). Pada perkembangan berikutnya,
sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML.
Aplikasi web sendiri merupakan sebuah aplikasi yang mengunakan teknologi
browser untuk menjalankan aplikasi dan diakses melalui jaringan komputer (Remick,
2011). Aplikasi web dibedakan menjadi dua macam, yaitu web statis dan web
dinamis. Web statis dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi
seperti ini terletak pada keharusan untuk memelihara program secara terus-menerus
untuk mengikuti setiap perubahan yang terjadi. Kelemahan ini diatasi dengan model
aplikasi web dinamis.
Dengan memperluas kemampuan HTML, yakni dengan menggunakan
perangkat lunak tambahan, perubahan informasi dalam halaman-halaman web dapat
ditangani melalui perubahan data, bukan melalui perubahan program. Sebagai
implementasinya, aplikasi web dapat dikoneksikan ke basis data. Dengan demikian
perubahan informasi dapat dilakukan oleh operator atau yang bertanggung jawab
terhadap kemutakhiran data dan tidak menjadi tanggung jawab pemrogram. Dengan

UNIVERSITAS SUMATERA UTARA


menggunakan pendekatan web dinamis dimungkinkan untuk membentuk aplikasi
berbasis web (web-based application).

2.3 Sistem Informasi


Untuk dapat mengetahui pengertian sistem informasi, terlebih dahulu akan
dibahas komponen-komponen pendukung sistem informasi sebagai berikut :

UNIVERSITAS SUMATERA UTARA


7

a. Data
Data adalah kenyataan yang menggambarkan suatu kejadian-kejadian dan
kesatuan nyata. Kejadian-kejadian (event) adalah sesuatu yang terjadi pada saat
yang tertentu. Data merupakan bentuk yang masih mentah, belum dapat bercerita
banyak, sehingga perlu diolah lebih lanjut. Data diolah melalui suatu model
untuk menghasilkan informasi. Data dapat berbentuk simbol-simbol semacam
huruf-huruf atau alphabet, angka-angka, bentuk-bentuk suara sinyal-sinyal,
gambar-gambar dan sebagainya (Jogiyanto, 2004).
b. Informasi
Informasi dapat didefinisikan sebagai hasil dari pengolahan data dalam suatu
bentuk yang lebih berguna dan lebih berarti bagi penerimanya yang
menggambarkan suatu kejadian-kejadian (event) yang nyata (fact) yang
digunakan untuk pengambilan keputusan (Jogiyanto, 2004).
c. Sistem
Sistem terdiri dari sejumlah komponen yang saling berinteraksi yang artinya
saling bekerja sama membentuk satu kesatuan. Suatu sistem dapat didefinisikan
sebagai suatu kesatuan yang terdiri dari dua atau lebih komponen atau subsistem
yang berinteraksi untuk mencapai suatu tujuan tertentu (Jogiyanto, 2004).

Dari definisi komponen-komponen pendukung sistem informasi tersebut


dapat disimpulkan bahwa sistem informasi adalah suatu sistem didalam suatu
organisasi yang merupakan kombinasi dari orang-orang, fasilitas, teknologi, media,
prosedur-prosedur, dan pengendalian yang ditujukan untuk mendapatkan jalur
komunikasi penting, memproses tipe transaksi rutin tertentu, memberi sinyal kepada
manajemen dan lainnya terhadap kejadian-kejadian internal dan eksternal yang
penting dan menyediakan suatu dasar informasi untuk pengambilan keputusan yang
cerdik (Jogiyanto, 2004).

2.4 Basis Data


Basis data (database) merupakan kumpulan dari beberapa data yang saling
berhubungan satu dengan yang lainnya, tersimpan di perangkat keras komputer dan
digunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu

UNIVERSITAS SUMATERA UTARA


8

komponen yang penting dalam sistem informasi, karena merupakan basis dalam
menyediakan informasi bagi para pemakai. Penerapan database dalam sistem
informasi disebut dengan database system. Sistem basis data (database system)
adalah suatu sistem informasi yang mengintegrasikan kumpulan dari data yang saling
berhubungan satu dengan yang lainnya dan membuatnya tersedia untuk beberapa
aplikasi yang bermacam-macam didalam suatu organisasi (Jogiyanto, 2004).

2.4.1 Jenjang data


Sampai dengan membentuk suatu database, data mempunyai jenjang mulai
dari karakter-karakter (character) item data (data item atau field), record, file dan
kemudian database. Karakter merupakan bagian data yang terkecil, dapat berupa
karakter numerik, huruf atau karakter-karakter khusus (special character) yang
membentuk suatu item data. a. Field
Suatu field menggambarkan suatu atribut dari record yang menunjukkan suatu
item dari data, seperti misalnya nama, alamat, dan lain sebagainya. Kumpulan
dari field membentuk suatu record.
b. Record
Kumpulan dari field yang membentuk suatu record. Record menggambarkan
suatu unit data individu yang tertentu. Kumpulan dari record membentuk suatu
file. Misalnya file personalia, tiap-tiap record dapat mewakili data tiap-tiap
karyawan.
c. File
File terdiri dari record-record yang menggambarkan satu kesatuan data yang
sejenis. Misalnya file matakuliah berisi data tentang semua matakuliah yang ada. d.
Database
Kumpulan dari file yang membentuk suatu database.

UNIVERSITAS SUMATERA UTARA


9

2.5 Surat
Secara umum surat merupakan sarana komunikasi dalam bentuk tulisan.
Biasanya sistem komunikasi dengan menggunakan surat ini diterapkan pada
perusahaan atau instansi. Penggunaan surat sebagai alat komunikasi lebih dominan
diterapkan oleh organisasi ataupun perusahaan. Dalam organisasi atau perusahaan,
surat menyurat menjadi kegiatan pokok guna mempererat ikatan relasi dengan pihak
lain. Karena setiap perusahaan pasti memiliki kegiatan operasional, seperti transaksi
jualbeli dan menjalin kerjasama. Dalam kegiatan operasional seperti itu lah yang
menjadikan surat menyurat sebagai kegiatan pokok. Berikut definisi tentang surat
menurut beberapa ahli :
a. Dra. Sedarmayanti, M.Pd.
Surat merupakan alat komunikasi tertulis yang berasal dari satu pihak yang
dibuat dan ditujukan kepada pihak lain guna menyampaikan informasi.
b. O. Setiawan Djuharie dan Teddy Sutandi
Surat merupakan sarana komunikasi tertulis guna menyampaikan informasi
pernyataan, pesan kepada pihak lain yang memiliki keperluan kegiatan dengan
berbagai pihak tertentu.
c. I. G. Warsanto
Surat adalah sejenis warkat yang dipergunakan sebagai sarana komunikasi
tertulis antara pihak satu dengan pihak lainnya, dengan menggunakan kertas
berukuran tertentu.
d. Djoko Purwanto
Surat merupakan alat komunikasi yang digunakan guna menyampaikan informasi
secara tertulis oleh salah satu pihak yang ditujukan kepada pihak lain, baik yang
berkaitan dengan bisnis maupun kegiatan non bisnis.

Dari definisi beberapa ahli tersebut diatas maka dapat disimpulkan bahwa surat
merupakan suatu sarana komunikasi tertulis untuk menyampaikan informasi,
pernyataan, atau pesan kepada pihak lain yang mempunyai keperluan kegiatan
dengan bentuk tertentu.

UNIVERSITAS SUMATERA UTARA


10

2.5.1 Surat masuk


Surat masuk merupakan sarana komunikasi tertulis yang diterima dari instansi
lain atau dari perorangan, baik yang diterima melalui pos maupun yang diterima dari
kurir dengan menggunakan buku ekspedisi. (Hadi, 2003).

2.5.2 Surat keluar


Surat keluar atau surat balasan merupakan jawaban dari surat masuk ataupun
informasi yang perlu disampaikan kepada pihak lain, baik berupa laporan-laporan
maupun informasi lainnya. Cara penanganan surat keluar tidak berbeda dengan surat
masuk, surat keluar tidak diberi lembaran disposisi. Sebelum surat keluar atau surat
balasan dikirim ke alamat yang dituju terlebih dahulu dicatat dalam buku ekspedisi
yang bersangkutan untuk diarsipkan. (Hadi, 2003).

2.5.3 Bagian-bagian surat


Bagian-bagian surat merupakan salah satu syarat dan ketentuan penulisan
surat yang baik dan benar. Untuk itu, berikut ini akan dijelaskan tentang
bagianbagian surat. Bagian-bagian surat yang akan diuraikan dibawah ini merupakan
bagian-bagian surat resmi, bagian-bagian surat resmi tersebut adalah sebagai berikut:
a. Kepala Surat/Kop Surat
Kepala surat atau yang biasa disebut dengan kop surat merupakan bagian teratas
dalam sebuah surat. Fungsi penyertaan kepala surat tersebut tidak terlepas dari
pemberian informasi mengenai nama, alamat, kegiatan dari lembaga tersebut
serta juga bisa menjadi alat promosi. Biasanya setelah penulisan kepala surat atau
kop surat terdapat sebuah garis horizontal pemisah yang memisahkan antara
kepala surat dengan bagian-bagian surat yang lain seperti tempat dan tanggal
pembuatan.
b. Tempat dan Tanggal Surat
Pencantuman tempat dan tanggal surat tersendiri ditujukan untuk memberikan
informasi mengenai tempat dan tanggal penulisan surat tersebut. Untuk tempat
biasanya tidak dicantumkan kembali jika tempat sudah ditulis di kepala surat

UNIVERSITAS SUMATERA UTARA


11

yang berupa alamat instansi. Tapi bagi surat bukan resmi yang tidak memiliki
kepala surat, wajib menuliskannya.
c. Nomor Surat
Sebuah surat resmi yang mewakili sebuah lembaga, instansi, perusahaan atau
organisasi biasanya menggunakan penomoran terhadap surat yang dikeluarkan
atau yang diterima. Nomor surat biasanya meliputi nomor urut penulisan surat,
kode surat, tanggal, bulan dan tahun penulisan surat.
d. Lampiran
Bagian lampiran merupakan bagian penjelas yang menginformasikan bahwa ada
sejumlah berkas atau dokumen yang disertakan dalam surat tersebut. Jika tidak
terdapat berkas atau dokumen yang dilampirkan, maka bagian lampiran
ditiadakan.
e. Hal
Pada bagian surat ke lima ini berisi hal atau perihal. Hal berfungsi memberikan
petunjuk bagi pembaca mengenai pokok isi surat tersebut.
f. Alamat Dalam
Terdapat dua alamat yang dituliskan dalam surat, yaitu alamat luar (yang ditulis
di sampul surat) dan alamat dalam (yang ditulis di dalam surat). Alamat yang
dimaksud dalam bagian ini merupakan alamat dalam.
g. Salam Pembuka
Bagian surat yang ke tujuh adalah salam pembuka yang berfungsi sebagai sapaan
dalam surat. Salam pembuka ditulis dengan huruf kapital di awal dan diakhiri
oleh tanda koma.
h. Isi Surat
Didalam bagian ini, yaitu bagian isi surat resmi terdapat sub bagian seperti
pembuka, isi dan penutup.
i. Salam Penutup
Salam penutup merupakan penutup surat yang biasanya menggunakan kata
"Hormat saya, Hormat kami, Wassalam". Penulisan salam penutup tersebut
seperti salam pembuka, diawali oleh huruf kapital dan diakhiri oleh tanda koma.
j. Nama Jelas Pengirim dan Tanda tangan

UNIVERSITAS SUMATERA UTARA


12

Setelah salam penutup, terdapat nama jelas pengirim surat beserta tanda
tangannya.

k. Tembusan
Tembusan merupakan bagian surat yang menunjukkan pihak atau orang lain yang
juga berhak mendapatkan surat tersebut.

2.5.4 Jenis-jenis surat


Berikut ini akan dijelaskan mengenai jenis-jenis atau macam-macam dari
surat, antara lain sebagai berikut :
a. Jenis Surat Berdasarkan Wujudnya
1. Telegram
Telegram merupakan jenis surat yang berisi pesan yang cukup singkat, proses
pengirimnya melalui pesawat telegram. Surat akan sampai kepada pihak yang
dituju dalam waktu yang singkat.
2. Kartu Pos
Kartu pos yaitu jenis surat terbuka yang terbuat dari kertas berukuran 10 x 15
sentimeter. Umumnya lembaran suratnya tebal, sehingga disebut kartu. Surat
ini memiliki fungsi untuk menyampaikan informasi yang singkat. Karena
sifatnya terbuka, surat ini dapat dilihat oleh pihak lain yang bukan haknya
sebagai penerima. Jenis surat seperti ini umumnya dijual di kantor pos.
3. Surat Bersampul
Surat bersampul adalah surat yang dikirimkan kepada pihak lain dengan
dilapisi menggunakan sampul surat. Surat bersampul ini memiliki kelebihan
tersendiri, yaitu lebih terjaga kerahasiaan isinya, tak banyak aturan dalam
penulisannya, dan lebih santun dalam proses surat menyurat.
4. Warkat Pos
Warkat pos merupakan surat tertutup yang terbuat dari sehelai kertas. Jenis
surat ini dapat dilipat menjadi amplop. Jadi, lembaran surat ini juga bisa
dimanfaatkan sebagai amplop. Fungsi dari surat ini adalah guna
menyampaikan berita yang cukup panjang pada sehelai kertas. Sama halnya
dengan kartu pos, jenis surat ini juga umum di jual di kantor pos.

UNIVERSITAS SUMATERA UTARA


13

b. Jenis Surat Berdasarkan Pembuatannya


1. Surat Pribadi
Surat pribadi ini ditulis dengan atas nama pribadi dan isinya berkaitan dengan
permasalahan pribadi. Surat ini dapat ditujukan kepada teman, keluarga,
ataupun instansi.
2. Surat Resmi
Surat resmi merupakan surat yang biasa digunakan oleh sebuah organisasi
atau perusahaan, yang mana ditujukan kepada pihak organisasi atau
perusahaan yang bersangkutan.
c. Jenis Surat Berdasarkan Isi Pesan Surat
1. Surat Keluarga
Surat keluarga ialah surat yang isinya menyangkut permasalahan dalam
keluarga.
2. Surat Sosial
Surat sosial merupakan surat dari pihak lembaga sosial yang ditujukan kepada
perorangan, perusahaan, ataupun organisasi tertentu. Surat ini berisi tentang
permasalahan sosial yang akan, sedang atau telah terjadi.
3. Surat Setengah Resmi
Surat setengah resmi ini ialah surat dari perorangan yang ditujukan kepada
lembaga organisasi atau instansi tertentu.
4. Surat Niaga
Surat niaga adalah surat yang dibuat oleh sebuah perusahaan yang bergerak di
bidang perniagaan atau penjualan produk. Surat jenis ini berisi mengenai
proses permintaan, tawar menawar, dan transaksi antara perusahaan dengan
konsumennya atau dengan perusahaan lain.
5. Surat Pengantar
Surat pengantar diberikan kepada perorangan atau suatu lembaga sebagai
pengantar atau acuan seseorang guna menjalin relasi dengan pihak penerima
surat.

UNIVERSITAS SUMATERA UTARA


14

6. Surat Dinas
Surat dinas merupakan surat yang berisi mengenai permasalahan kedinasan
atau pemerintahan dari suatu organisasi atau instansi pemerintah. Surat ini
dapat diarahkan kepada perorangan, instansi lain dan organisasi tertentu.
d. Jenis Surat Berdasarkan Keamanan Pesan Surat
1. Surat Rahasia
Jenis surat rahasia adalah surat yang berisi data atau dokumen ringan.
Hanyalah beberapa pihak tertentu dalam sebuah perusahaan yang dapat
mengetahui isi pesan dalam surat ini. Pada proses pengirimannya, surat ini
diberikan dua buah sampul yang dicantumkan kode Rahasia (R), lalu pada
satu sampul lainnya tidak diberi kode apapun.
2. Surat Sangat Rahasia
Surat sangat rahasia sifatnya lebih berat dari surat rahasia, karena dalam surat
ini berisikan dokumen sangat vital yang berkaitan dengan keamanan suatu
negara. Surat sangat rahasia ini juga diberikan sampul sebanyak 3 buah.
Sampul yang pertama diberikan kode Sangat Rahasia (RS), pada sampul
kedua diberikan kode Sangat Rahasia Sekali (SRS) serta dibubuhi segel
sebagai jaminan keutuhan surat, dan pada sampul yang terluar dibuat sebiasa
mungkin demi menjaga ancaman kejahatan.
3. Surat Konfidensial
Surat konfidensial ini hanya dapat diketahui oleh beberapa pihak pejabat yang
bersangkutan saja, karena terkait isinya yang memerlukan kebijakan dari
pejabat tersebut.
e. Jenis Surat Berdasarkan Ruang Lingkupnya
1. Nota
Nota merupakan jenis surat yang dibuat oleh atasan yang diperuntukkan ke
bawahan atau sebaliknya didalam satu ruang lingkup kantor. Fungsi dari nota
sendiri sebagai sarana untuk meminta data/dokumen atau informasi.
2. Memo

UNIVERSITAS SUMATERA UTARA


15

Memo atau biasa juga disebut memorandum adalah jenis surat yang dibuat
atasan dan diperuntukkan juga kepada bawahan atau kepada pejabat yang
setingkat. Surat memo ini berisikan catatan singkat mengenai pokok
permasalahan sebagai pengingat atau pesan yang ingin dibicarakan.
3. Surat Eksternal
Surat eksternal yaitu surat yang dibuat oleh sebuah perusahaan dan ditujukan
kepada perusahaan lainnya. Biasanya surat eksternal berisi tentang
permintaan hubungan kerja sama ataupun transaksi lainnya antar perusahaan.
4. Internal
Surat internal yaitu surat yang dibuat oleh salah satu pihak dalam perusahaan,
kemudian ditujukan kepada pihak lain yang juga bekerja dalam perusahaan
tersebut. Seperti pimpinan memberikan surat mutasi kepada salah satu staf
nya.
f. Jenis Surat Berdasarkan Jumlah Pembaca Surat
1. Surat Edaran
Surat edaran ialah surat yang ditujukan kepada beberapa orang, baik kepada
pihak dalam maupun pihak luar perusahaan yang bersangkutan. Sifat dari
surat ini berisi sesuatu yang hanya diketahui oleh pejabat tertentu. Namun,
ada juga surat edaran yang cakupannya lebih luas.
2. Surat Pengumuman atau Pemberitahuan
Surat pengumuman merupakan surat yang diperuntukkan kepada beberapa
orang, perusahaan, ataupun pihak lain dalam jumlah banyak. Pengumuman
dapat diterapkan dalam ruang lingkup yang kecil maupun yang lebih luas.
3. Surat Personal Target
Personal target berarti ditujukan kepada satu orang, yang mana orang tersebut
adalah nama yang tertera pada alamat suratnya dan sifatnya pun hanya dapat
diketahui oleh penerima yang dituju.
g. Jenis Surat Berdasarkan Proses Penyelesaian Surat
1. Surat Kilat
Surat kilat ini merupakan surat yang pesannya harus dikirimkan ataupun
disampaikan kepada penerima dalam waktu secepat mungkin. Dan juga,

UNIVERSITAS SUMATERA UTARA


16

balasan atau tanggapan dari surat tersebut harus dikirimkan kembali dengan
cepat.

2. Surat Segera
Surat segera yaitu surat yang pesannya harus disampaikan sesegera mungkin
kepada penerima surat. Namun tak sama dengan surat kilat, karena balasan
surat segera ini tak perlu dikirimkan kembali dengan cepat.
h. Jenis Surat Berdasarkan Sifat Umum Surat
1. Surat Kaleng
2. Surat Terbuka
3. Surat Tertutup.

2.6 Arsip
Istilah arsip dalam bahasa Belanda disebut Archief. Kata ini juga berasal dari
bahasa Yunani yaitu Arche yang berarti permulaan. Kemudian berkembang menjadi
kata Archia yang berarti catatan. Selanjutnya dari kata Archia berubah lagi menjadi
kata Ar-chieon yang berarti gedung pemerintahan. Sedangkan dalam bahasa Latin
disebut Archium. Pada akhirnya dalam bahasa Indonesia dipakai istilah “Arsip”
sampai sekarang ini (Sedarmayanti, 2001).
Menurut Sutarto (1997) Arsip adalah suatu warkat yang disimpan secara
sistematis karena mempunyai suatu kegunaan agar setiap kali diperlukan dapat secara
cepat ditemukan kembali. Sedangkan Lembaga Administrasi Negara memberikan
rumusan secara lengkap bahwa Arsip adalah segala kertas, buku naskah, gambaran
peta, bagan atau dokumen lainnya. Dimana diartikan sebagai segala macam bentuk
dan sifat aslinya atau salinan serta dengan segala cara penciptaannya oleh suatu
badan sebagai bukti dari pada tujuan organisasi, fungsi-fungsi kebijaksanaan,
keputusan-keputusan, prosedur-prosedur, kegiatan lainnya dari pada pemerintahan
karena informasi yang penting terkandung didalamnya.
Pengertian Arsip di Indonesia, diatur dalam Undang-Undang No.7 tahun
1971 tentang “Ketentuan Pokok Kearsipan” pada Bab I pasal 1 berbunyi sebagai
berikut :

UNIVERSITAS SUMATERA UTARA


17

a. Naskah-naskah yang dibuat dan diterima oleh lembaga Negara dan Badan-badan
Pemerintahan dalam bentuk corak apapun, baik dalam keadaan tunggal maupun
berkelompok dalam rangka pelaksanaan kegiatan Pemerintah.
b. Naskah-naskah yang dibuat dan diterima oleh Badan-badan swasta dan/atau
perorangan dalam bentuk corak apapun, baik dalam keadaan tunggal maupun
berkelompok, dalam rangka pelaksanaan kebangsaan.

Dari definisi diatas jelas bahwa Arsip yaitu pusat ingatan bagi seluruh
kegiatan pekerjaan dimana surat atau warkat yang diproses berdasarkan
pengklasifikasian atau penggolongan yang disusun, disimpan dan dipelihara
sedemikian rupa selama masih diperlukan.

2.6.1 Peranan arsip


Arsip mempunyai peranan sebagai sumber informasi dan sumber
dokumentasi. Sebagai sumber informasi, arsip dapat membantu mengingatkan
petugas yang lupa mengenai suatu masalah. Sebagai sumber dokumentasi, arsip dapat
dipergunakan oleh pemimpin organisasi untuk membuat ataupun mengambil
keputusan secara tepat mengenai masalah yang sedang dihadapi. Oleh sebab itu dapat
disimpulkan bahwa peranan arsip adalah sebagai berikut : a. Alat utama ingatan
organisasi
b. Bahan atau alat pembuktian
c. Bahan dasar perencanaan dan pengambilan keputusan
d. Bahan informasi kegiatan ilmiah lainnya.

2.6.2 Maksud dan tujuan kearsipan


Pekerjaan menyimpan surat atau dokumen-dokumen sering pula disebut
administrasi kearsipan. Adapun pendapat yang mengatakan, bahwa kearsipan adalah
segala kegiatan yang berkenaan dengan pengurusan arsip-arsip, baik arsip dinas
maupun arsip pribadi. Kearsipan merupakan kegiatan-kegiatan yang berkenaan
dengan penerimaan, pencatatan, pengiriman, penyingkiran maupun pemusnahan surat
menyurat atau berbagai macam warkat lainnya. a. Maksud Kearsipan

UNIVERSITAS SUMATERA UTARA


18

Maksud Kearsipan adalah agar tercipta suatu pengertian atau pemahaman tata
cara yang seragam dalam penyelenggaraan arsip di lingkungan perusahaan.

b. Tujuan Kearsipan
1. Arsip menyediakan informasi. Informasi yang terdapat didalam arsip
merupakan sejumlah data terolah dan terpilih yang disusun dengan teratur
sehingga memudahkan instansi apabila membutuhkan informasi instansi tidak
perlu tersandung kemampuan untuk mengingat-ingat sesuatu.
2. Arsip memudahkan pengawasan. Arsip yang tersimpan rapi merupakan
sumber yang sangat berguna untuk mengadakan perbandingan antara hasil
yang diperoleh dengan hasil yang diinginkan instansi dapat menggunakan
standar pelaksanaan untuk mengukur hasil nyata dengan tindakan itu, yaitu
dengan menentukan tingkat efisiensi dan efektifitas manajemen.
3. Arsip merupakan alat untuk membuat kebijaksanaan. Kendatipun kegunaan
arsip dalam membentuk keputusan itu tidak langsung, arsip dianggap sebagai
bahan yang sangat berguna untuk penafsiran analisa dan penentuan pilihan
kebijaksanaan yang akan dilaksanakan. Kebijaksanaan seharusnya disusun
berdasarkan data sehingga dapat melihat kecenderungan sebuah
kebijaksanaan di masa yang akan datang.
4. Arsip memudahkan pembakuan kerja. Arsip yang distandarisasi memberikan
kemudahan yang berarti bagi pemakai arsip itu, karena arsip-arsip
diseragamkan baik bentuknya maupun sistemnya, pemakai arsip itu
mendapatkan kemudahan yang besar dalam penelusuran informasi.
5. Arsip memenuhi undang-undang. Banyak hal yang dimaksudkan kedalam
arus sistem arsip dapat menjadi bahan pembuktian dari sudut hukum
buktibukti itu bukan saja menyuruh instansi untuk menunaikan kewajibannya
tetapi juga merupakan perlindungan bagi instansi ataupun sebuah perusahaan.

2.7 PHP
Hypertext Preprocessor (PHP) adalah salah satu bahasa server-side yang
didesain khusus untuk aplikasi web. PHP dapat disisipkan diantara bahasa HTML
dan karena bahasa server-side, maka bahasa PHP akan dieksekusi di server, sehingga

UNIVERSITAS SUMATERA UTARA


19

yang dikirimkan ke browser adalah hasil jadi dalam bentuk HTML dan kode PHP
tidak akan terlihat (Sutarman, 2003).
PHP merupakan bahasa pemrograman yang digunakan secara luas untuk
penanganan pembuatan dan pengembangan sebuah situs web. PHP merupakan salah
satu bahasa pemrograman web yang masih muda namun telah mengalami
perkembangan yang cukup signifikan dan telah banyak digunakan oleh user dalam
membuat sebuah aplikasi web, baik perseorangan maupun perusahaan.

2.7.1 Sejarah PHP


Pada awalnya PHP merupakan singkatan dari Personal Home Page (Situs
personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada
waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa
sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka,
maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada
November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah
diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul
ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter
PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998,
perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut
sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang Hypertext
Preprocessing (PHP).
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis
tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak
dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya
untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan
stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter
PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman

UNIVERSITAS SUMATERA UTARA


20

berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa


pemrograman ke arah paradigma berorientasi objek. Server web bawaan
ditambahkan pada versi 5.4 untuk mempermudah pengembang menjalankan kode
PHP tanpa menginstall software server. Versi terbaru dan stabil dari bahasa
pemograman PHP saat ini adalah versi 7.0.16 dan 7.1.2 yang resmi dirilis pada
tanggal 17 Februari 2017.

2.7.2 Kelebihan PHP


Berikut ini adalah beberapa kelebihan dari bahasa pemrograman PHP, antara
lain yaitu :
a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan
sebuah kompilasi dalam penggunaannya.
b. Web Server yang mendukung PHP dapat ditemukan di mana-mana dari mulai
apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.
c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan
developer yang siap membantu dalam pengembangan.
d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah
karena memiliki referensi yang banyak.
e. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux,
Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console
serta juga dapat menjalankan perintah-perintah sistem.

2.8 HTML
Hypertext Markup Language (HTML) adalah suatu bahasa yang digunakan
untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung
pada suatu platform tertentu (platform independent). Dokumen HTML adalah suatu
dokumen teks biasa, dan disebut sebagai markup language karena mengandung
tanda-tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen (Sutarman, 2003).
Untuk menjalankan dokumen HTML harus menggunakan program khusus
yang disebut web browser atau browser. HTML adalah merupakan pengembangan

UNIVERSITAS SUMATERA UTARA


21

dari standar pemformatan dokumen teks yaitu Standart Generalized Markup


Language (SGML). Ciri utama dokumen HTML adalah adanya tag dan elemen.
Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD>
yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen
<BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser,
seperti paragraf, list (daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan
tanda lebih kecil “<” (tag awal) dan tanda lebih besar “>” (tag akhir). Dalam
penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag
container. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> yang
terdapat tanda “/” pada akhir tag.

2.8.1 Sejarah HTML


Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang
kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan
menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi
dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem
markah berbasis internet. Berners-Lee menspesifikasikan HTML dan menulis
jaringan beserta perangkat lunaknya di akhir 1990. Pada tahun yang sama,
BernersLee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam
sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN.
Pada catatan pribadinya, sejak 1990 dia mendaftar beberapa dari banyak daerah yang
menggunakan hypertext dan pertama-tama menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah
dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim
Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18 elemen awal mula, versi
sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh
SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis
format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.
HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan
menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual
maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan

UNIVERSITAS SUMATERA UTARA


22

di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan
menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan
di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML,
yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan
oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi,
perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik
untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah
umum didasarkan pada unsur-unsur dari pada hanya efek cetak, dengan pemisahan
struktur dan markah juga, HTML telah semakin bergerak ke arah ini dengan CSS.

2.9 MySQL
My Structured Query Language (MySQL) adalah sebuah implementasi dari
sistem manajemen basis data relasional (RDBMS) yang didistribusikan secara gratis
di bawah lisensi General Public License (GPL). Setiap pengguna dapat secara bebas
menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh
dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya merupakan
turunan salah satu konsep utama dalam basis data yang telah ada sebelumnya
Structured Query Language (SQL). SQL adalah sebuah konsep pengoperasian basis
data, terutama untuk pemilihan atau seleksi dan pemasukan data, yang
memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis.

2.9.1 Sejarah MySQL


MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"
Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan
sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan
koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty
bekerja pada perusahaan bernama TcX di Swedia.
TcX pada tahun 1994 mulai mengembangkan aplikasi berbasis web, dan
berencana menggunakan UNIREG sebagai sistem database. Namun sayangnya,
UNIREG dianggagap tidak cocok untuk database yang dinamis seperti web. TcX
kemudian mencoba mencari alternatif sistem database lainnya, salah satunya adalah

UNIVERSITAS SUMATERA UTARA


23

miniSQL (mSQL). Namun mSQL versi 1 ini juga memiliki kekurangan, yaitu tidak
mendukung indexing, sehingga performanya tidak terlalu bagus.
Dengan tujuan memperbaiki performa mSQL, Monty mencoba menghubungi
David Hughes (programmer yang mengembangkan mSQL) untuk menanyakan
apakah ia tertarik mengembangkan sebuah konektor di mSQL yang dapat
dihubungkan dengan UNIREG ISAM sehingga mendukung indexing. Namun saat itu
Hughes menolak, dengan alasan sedang mengembangkan teknologi indexing yang
independen untuk mSQL versi 2.
Dikarenakan penolakan tersebut, David Hughes, TcX dan juga Monty
akhirnya memutuskan untuk merancang dan mengembangkan sendiri konsep sistem
database baru. Sistem ini merupakan gabungan dari UNIREG dan mSQL yang source
codenya dapat bebas digunakan. Sehingga pada May 1995, sebuah RDBMS baru,
yang dinamakan MySQL dirilis.
David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL di
‘jual’ dengan model bisnis baru. Ia mengusulkan agar MySQL dikembangkan dan
dirilis dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari menjual jasa
“support” untuk perusahaan yang ingin mengimplementasikan MySQL. Konsep
bisnis ini sekarang dikenal dengan istilah Open Source.
Pada tahun 1995 itu juga, TcX berubah nama menjadi MySQL AB, dengan
Michael Widenius, David Axmark dan Allan Larsson sebagai pendirinya. Titel “AB”
di belakang MySQL, adalah singkatan dari “Aktiebolag”, istilah PT (Perseroan
Terbatas) bagi perusahaan Swedia.

2.9.2 Kelebihan dan kekurangan MySQL


Hal paling mendasar yang menjadikan MySQL pilihan utama sebagai
database yang digunakan adalah karena MySQL menggunakan Lisensi GPL dan
multiplatform, sehingga tidak membutuhkan biaya besar dalam membuat aplikasi.
Tapi alasan tersebut tidaklah cukup untuk menjadikan MySQL sebagai RDBMS yang
akan digunakan.

Berikut ini adalah beberapa kelebihan dari MySQL, antara lain yaitu : a.
Berlisensi GPL dan Multi Platform

UNIVERSITAS SUMATERA UTARA


24

b. Dapat di integrasikan dengan beberapa bahasa Pemrograman seperti .Net, Java,


Python, Perl yang merupakan bahasa pemrograman yang paling dominan di
kalangan programmer
c. Mendukung ODBC untuk sistem operasi Windows sehingga bisa digunakan
aplikasi yang berjalan di windows
d. Bisa dijalankan pada spesifikasi hardware yang rendah karena lebih hemat
resource memory dibandingkan database lain sehingga mudah digunakan untuk
bahan pembelajaran
e. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih
dari 20 bahasa meskipun bahasa indonesia belum termasuk didalamnya.

Berikut ini adalah beberapa kekurangan dari MySQL, antara lain yaitu :
a. Banyak mengklaim kurang support terhadap pemrograman Visual/Desktop,
sehingga sedikit yang menggunakan untuk aplikasi visual
b. Karena berlisensi GPL sehingga sulit mendapatkan update untuk problem yang
urgent, sehingga perusahaan skala menengah keatas lebih memilih RDBMS
berlisensi dan disupport seperti Oracle dan MS SQL Server
c. Sangat diragukan dalam menangani data skala besar, karena ada beberapa opini
yang pro dan kontra terhadap kemampuan MySQL terhadap pengolahan data
yang besar.

2.10 XAMPP
XAMPP merupakan perangkat lunak bebas, yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program. XAMPP adalah perangkat
yang menggabungkan tiga aplikasi kedalam satu paket, yaitu Apache, MySQL, dan
PHPMyAdmin. XAMPP merupakan salah satu paket installasi Apache, PHP dan
MySQL instant yang dapat kita gunakan untuk membantu proses installasi ketiga
produk tersebut. Program ini tersedia dalam GNU General Public License dan bebas,
merupakan web server yang mudah untuk digunakan.

UNIVERSITAS SUMATERA UTARA


25

2.10.1 Sejarah XAMPP


XAMPP merupakan pengembangan dari LAMP (Linux Apache, MySQL, PHP
and Perl), XAMPP ini merupakan project non-profit yang di kembangkan oleh
Apache Friends yang didirikan Kai 'Oswalad' Seidler dan Kay Vogelgesang pada
tahun 2002, project mereka ini bertujuan mempromosikan pengunaan Apache web
server. XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), Nama
XAMPP sendiri merupakan singkatan dari X (empat sistem operasi), Apache,
MySQL, PHP dan Perl.

2.10.2 Bagian penting XAMPP


Mengenal bagian penting dari XAMPP yang biasa digunakan pada umumnya,
antara lain yaitu :
a. htdoc adalah folder tempat meletakkan berkas-berkas yang akan dijalankan,
seperti berkas PHP, HTML dan skrip lain.
b. PHPMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada
dikomputer. Untuk membuka halaman PHPMyAdmin, buka browser lalu
ketikkan alamat http://localhost/PHPMyAdmin, maka akan muncul halaman
PHPMyAdmin.
c. Kontrol Panel yang berfungsi untuk mengelola layanan (service) XAMPP. Seperti
menghentikan (stop) layanan, ataupun memulai (start).

2.11 PHPMyAdmin
PHPMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa
pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui
WWW (World Wide Web). PHPMyAdmin mendukung berbagai operasi MySQL,
diantaranya mengelola basis data, tabel-tabel, bidang (fields), relasi (relations),
indeks, pengguna (users), perizinan (permissions), dan lain sebagainya dengan
mudah, tanpa harus menghafal baris perintahnya. Pada dasarnya, mengelola basis
data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah
yang sesuai (command line) untuk setiap maksud tertentu.

UNIVERSITAS SUMATERA UTARA


26

2.11.1 Sejarah PHPMyAdmin


Sebelum adanya PHPMyAdmin para pengelola database harus mengelola
database melalui perintah command text. Pada Linux menggunakan terminal,
sementara pada windows menggunakan command prompt. Karena MySQL adalah
sistem manajemen database RDBMS tanpa GUI untuk mengelolanya. Semakin
berkembangnya penggunaan MySQL memicu pihak pengembang ketiga untuk
mengembangkan sistem GUI grafis untuk melakukan manajemen database pada
MySQL.
Pengembangan PHPMyAdmin dimulai pada tahun 1998 oleh Tobias
Ratschiller seorang konsultan IT. Ratschiller mengerjakan sebuah program bernama
MySQL-Webadmin dengan bebas, yang merupakan produk dari Petrus
Kuppelwieser, yang telah berhenti mengembangkannnya pada saat itu. Ratschiller
menulis kode baru untuk PHPMyAdmin, dan ditingkatkan pada konsep dari proyek
Kuppelwiesser. Ratschiller meninggalkan proyek PHPMyAdmin pada tahun 2001.
Sekarang, Sebuah tim dari delapan pengembang yang dipimpin oleh Oliver Muller
meneruskan pengembangan PHPMyAdmin di SourceForge.net.
Sejak versi 3.0.0, PHPMyAdmin bergabung dengan GoPHP5 dan bisa
menciptakan kompatibilitas kode dengan versi PHP dan MySQL lama. Versi 3 ke
atas memerlukan setidaknya PHP 5.2 dan MySQL 5. PHPMyAdmin pernah
memenangkan beberapa penghargaan, diantaranya sebagai aplikasi berbasis PHP
terbaik serta mendapatkan predikat sebagai "Tool terbaik untuk SysAdmins" dari
komunitas SourceForge.net. Hingga kini PHPMyAdmin telah dikembangkan lebih
dari belasan tahun dan secara konsisten memperbaiki kualitasnya.

2.12 Sublime
Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan teknologi
Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi Vim, Aplikasi ini
sangatlah fleksibel dan powerfull. Fungsionalitas dari aplikasi ini dapat
dikembangkan dengan menggunakan sublime packages. Sublime Text bukanlah
aplikasi opensource dan juga aplikasi yang dapat digunakan dan didapatkan secara

UNIVERSITAS SUMATERA UTARA


27

gratis, akan tetapi beberapa fitur pengembangan fungsionalitas (packages) dari


aplikasi ini merupakan hasil dari temuan dan mendapat dukungan penuh dari
komunitas serta memiliki linsensi aplikasi gratis.
Sublime Text mendukung berbagai bahasa pemrograman dan mampu
menyajikan fitur syntax highlight hampir di semua bahasa pemrogramman yang
didukung ataupun dikembangkan oleh komunitas seperti C, C++, C#, CSS, D,
Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua,
Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and
XML. Biasanya bagi bahasa pemrograman yang didukung ataupun belum
terdukung secara default dapat lebih dimaksimalkan atau didukung dengan
menggunakan add-ons yang bisa didownload sesuai kebutuhan user.

2.13 Flowchart
Flowchart (bagan alir) adalah bagan (chart) yang menunjukkan alir (flow) di
dalam program atau prosedur sistem secara logika. Bagan alir (flowchart) digunakan
terutama untuk alat bantu komunikasi dan untuk dokumentasi.
Indrajani (2011), flowchart merupakan penggambaran secara grafik dari
langkah-langkah dan urutan prosedur program yang biasanya mempermudah
penyelesaian masalah.

2.13.1 Jenis-jenis flowchart


Berikut ini akan dijelaskan jenis-jenis atau macam-macam dari flowchart,
antara lain yaitu :
a. System Flowchart
Bagan alir sistem (system flowchart) dapat didefinisikan sebagai bagan yang
menunjukkan arus pekerjaan secara keseluruhan dari sistem. Bagan ini
menjelaskan urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir
sistem menunjukkan apa yang dikerjakan pada sistem.
b. Document Flowchart

UNIVERSITAS SUMATERA UTARA


28

Bagan alir dokumen (document flowchart) atau disebut juga bagan alir formulir
(form flowchart) atau paperwork flowchart merupakan bagan alir yang
menunjukkan arus dari laporan dan formulir termasuk tembusan-tembusannya.
c. Schematic Flowchart
Bagan alir skematik (schematic flowchart) merupakan bagan alir yang mirip
dengan bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem.
Perbedaannya adalah, bagan alir skematik selain menggunakan simbol-simbol
bagan alir sistem, juga menggunakan gambar-gambar komputer dan peralatan
lainnya yang digunakan. Maksud penggunaan gambar-gambar ini adalah untuk
memudahkan komunikasi kepada orang yang kurang paham dengan
simbolsimbol bagan alir. Penggunaan gambar-gambar ini memudahkan untuk
dipahami, tetapi sulit dan lama dalam proses menggambarnya.
d. Program Flowchart
Bagan alir program (program flowchart) merupakan bagan yang menjelaskan
secara rinci langkah-langkah dari proses program. Bagan alir program dibuat dari
derivikasi bagan alir sistem. Bagan alir program dapat terdiri dari dua macam,
yaitu bagan alir logika program (program logic flowchart) dan bagan alir
program komputer terinci (detailed computer program flowchart).
1. Bagan alir logika program digunakan untuk menggambarkan tiap-tiap
langkah di dalam program komputer secara logika. Bagan alir logika program
ini dipersiapkan oleh analis sistem.
2. Bagan alir program komputer terinci digunakan untuk menggambarkan
instruksi-instruksi program komputer secara terinci. Bagan alir ini
dipersiapkan oleh pemrogram.
e. Process Flowchart
Bagan alir proses (process flowchart) merupakan bagan alir yang banyak
digunakan di teknik industri. Bagan alir ini juga berguna bagi analis sistem untuk
menggambarkan proses dalam suatu prosedur.

UNIVERSITAS SUMATERA UTARA


29

Tabel 2.1 Simbol-simbol flowchart


Simbol Keterangan Simbol Keterangan
Flow Direction Symbol, Simbol manual input
menghubungkan antara simbol untuk pemasukan data
yang satu dengan yang secara manual on-
lainnya. Simbol ini disebut online keyboard
juga conecction line
Terminator Symbol, digunakan Simbol Preparation,
untuk permulaan (start) atau untuk mempersiapkan
akhir (stop) dari suatu kegiatan penyimpanan yang
akan digunakan untuk
tempat penyimpanan
didalam storage
Conecctor Symbol, digunakan Predefine Proses, untuk
untuk keluar-masuk ataupun pelaksana suatu bagian/
menyambungkan proses dalam sub program/prosedure
lembar/halaman yang sama
Conecctor Symbol, digunakan Simbol Display, untuk
untuk keluar-masuk ataupun menyatakan peralatan
menyambungkan proses dalam output yang digunakan
lembar/halaman yang berbeda yaitu layar, plotter,
printer dan sebagainya
Processing Symbol, simbol Simbol Disk and On-
untuk menunjukkan proses Line Storage,
pengolahan yang dilakukan digunakan untuk
oleh komputer menyatakan input yang
berasal dari disk atau di
simpan ke disk
Simbol Manual Operation, Simbol Magnetik Tape
digunakan untuk menunjukkan Unit, untuk menyatakan
pengolahan yang tidak input berasal dari pita
dilakukan oleh komputer magnetik atau output di
simpan kepita magnetik

UNIVERSITAS SUMATERA UTARA


30

Simbol Decision, digunakan Simbol Punch Card,


untuk pemilihan proses menyatakan bahwa
berdasarkan kondisi yang ada input berasal dari kartu
atau output ditulis ke
kartu
Simbol Input-Output yang Simbol Dokumen untuk
menyatakan proses input dan menyatakan bahwa
output tanpa tergantung input berasal dari
dengan jenis peralatannya dokumen dalam bentuk
kertas atau output
dicetak ke kertas

2.14 Flowmap
Pada tahun 1990 flowmap mulai dikembangkan dengan program sederhana
untuk aliran barang maupun aliran manusia didalam menggambarkan peta. Program
flowmap dikembangkan oleh Tom De Jong (Universitas Utrecht Belanda). Flowmap
adalah gabungan peta dan flowchart, yang menunjukan pergerakan benda dari satu
lokasi ke lokasi lain. Flowmap menolong analisis dan programmer untuk
memecahkan masalah ke dalam segmen-segmen yang lebih kecil dan menolong
dalam menganalisis alternatif-alternatif lain dalam pengoprasian.

Tabel 2.2 Simbol-simbol flowmap


Simbol Keterangan Simbol Keterangan

Dokumen, menunjukkan I/O Manual, menunjukkan


baik untuk proses manual, dimana pekerjaan dilakukan
mekanik dan komputer secara manual
Kartu punch, menunjukkan Proses, menunjukkan kegiatan
I/O yang menggunakan kartu proses dari operasi
punch program komputer
Pita mekanik, menunjukkan Disket, menunjukkan I/O
I/O yang menggunakan pita menggunakan disket
mekanik
Pita kertas berlubang, yaitu Keyboard, menunjukkan input
menunjukkan proses I/O yang yang menggunakan
menggunakan pita berlubang online keyboard
Garis alir, menunjukkan Penghubung, menunjukkan
aliran proses penghubung ke halaman yang
sama atau halaman yang lain

UNIVERSITAS SUMATERA UTARA


31

Operasi luar, menunjukkan Disk, menunjukkan I/O yang


operasi yang dilakukan diluar menggunakan harddisk
operasi komputer
Sort offline, menunjukkan Drum magnetk, menunjukkan
proses pengurutan data diluar I/O yang menggunakan drum
proses komputer magnetik
Simpanan offline, file non Simpanan offline, file non
N komputer yang diarsip urut A komputer yang diarsip urut
angka huruf

Hal yang dapat dilakukan untuk pembuatan diagram flowmap yang baik adalah
dengan cara seperti berikut :
a. Pembuatan flowmap untuk pertama kalinya adalah membagi-bagi diagram ke
dalam kolom-kolom
b. Setiap kolom diberi nama entitas yang terlibat
c. Diagram dibaca dari atas ke bawah dan dari kiri ke kanan
d. Setiap kolom terdapat siklus pengolahan data input-proses-output
e. Ketika menyeberangi garis yang memisahkan antara satu kolom dengan kolom
lain, gunakan simbol konektor
f. Cara mengakses file komputer adalah melalui simbol proses komputer
g. Prosedur kerja yang kejadiannya tidak bersamaan dapat digambarkan melalui
flowmap yang terpisah.

2.15 ERD
Menurut Brady dan Loonam (2010), Entity Relationship Diagram (ERD)
merupakan teknik yang digunakan untuk memodelkan kebutuhan data dari suatu
organisasi, biasanya oleh System Analys dalam tahap analisis persyaratan proyek
pengembangan sistem. Sementara seolah-olah teknik diagram atau alat peraga
memberikan dasar untuk desain database relasional yang mendasari sistem informasi
yang dikembangkan. ERD bersama-sama dengan detail pendukung merupakan model
data yang pada gilirannya digunakan sebagai spesifikasi untuk database.

UNIVERSITAS SUMATERA UTARA


32

Dapat disimpulkan bahwa ERD secara umum merupakan suatu model untuk
menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar
data yang mempunyai hubungan antar relasi. ERD memodelkan struktur data dan
hubungan antar data.

2.15.1 Komponen ERD


Dalam pembentukan ERD terdapat tiga komponen yang akan dibentuk, antara
lain sebagai berikut : a. Entitas
Pengertian entity (entitas) yaitu suatu objek yang dapat dibedakan dari lainnya
yang dapat diwujudkan dalam basis data. Pengertian lainnya menurut Brady dan
Loonam (2010), entitas adalah objek yang menarik di bidang organisasi yang
dimodelkan.
Contoh : Mahasiswa, Kartu Anggota Perpustakaan (KAP) dan Buku.
b. Hubungan atau Relasi (Relationship)
Suatu hubungan adalah hubungan antara dua jenis entitas dan direpresentasikan
sebagai garis lurus yang menghubungkan dua entitas.
Contoh : Mahasiswa mendaftar sebagai anggota perpustakaan (KAP), relasinya
adalah mendaftar.
c. Atribut
Atribut memberikan informasi lebih rinci tentang jenis entitas. Atribut memiliki
struktur internal berupa tipe data.

2.15.2 Derajat relasi


Derajat relasi atau kardinalitas rasio merupakan penjelaskan mengenai
jumlah maksimum hubungan antara satu entitas dengan entitas lainnya. a. One to
One (1:1)
Setiap anggota entitas A hanya boleh berhubungan dengan satu anggota entitas B,
begitu pula sebaliknya.
b. One to many (1:M)
Setiap anggota entitas A dapat berhubungan dengan lebih dari satu anggota
entitas B tetapi tidak sebaliknya.

UNIVERSITAS SUMATERA UTARA


33

c. Many to one (M:1)


Setiap entitas pada himpunan entitas A berhubungan dengan paling banyak satu
entitas pada himpunan entitas B, tetapi tidak sebaliknya.
d. Many to many (M:M)
Setiap entitas A dapat berhubungan dengan banyak entitas himpunan entitas B
dan demikian pula sebaliknya.

Tabel 2.3 Simbol-simbol entity relationship diagram


Nama Simbol Simbol Keterangan
Entitas Entitas adalah suatu objek yang
dapat diidentifikasi dalam
lingkungan pemakai

Relasi Relasi menunjukkan adanya


hubungan di antara sejumlah
entitas yang berbeda

Atribut Atribut berfungsi


mendeskripsikan karakter entitas
(atribut yang memiliki key diberi
garis bawah)

Garis Garis sebagai penghubung antara


relasi dengan entitas, relasi dan
entitas dengan atribut

2.16 DFD
Menurut Andri Kristanto Data Flow Diagram (DFD) adalah suatu model
logika data atau proses yang dibuat untuk menggambarkan dari mana asal data dan
ke mana tujuan data yang keluar dari sistem, di mana data tersimpan, proses apa yang
menghasilkan data tersebut dan interaksi antara data tersimpan dan proses yang
dikenakan pada data tersebut.

UNIVERSITAS SUMATERA UTARA


34

Menurut Tata Sutabri DFD adalah suatu network yang menggambarkan suatu
sistem otomatis atau komputerisasi, manualisasi atau gabungan dari keduanya, yang
penggambarannya disusun di dalam bentuk kumpulan komponen sistem yang saling
berhubungan sesuai dengan aturan.

2.16.1 Level DFD


Dalam proses perancangan DFD terdapat tiga level yang akan dibentuk,
antara lain sebagai berikut : a. Diagram Konteks
Menggambarkan satu lingkaran besar yang dapat mewakili seluruh proses yang
terdapat di dalam suatu sistem. Merupakan tingkatan tertinggi di dalam DFD dan
biasanya diberi nomor 0 (nol). Semua entitas eksternal yang ditunjukkan pada
diagram konteks yaitu berupa aliran-aliran data utama menuju dan dari sistem.
Diagram konteks ini sama sekali tidak memuat penyimpanan data dan tampak
sederhana untuk diciptakan.
b. Diagram Nol (Diagram level-1)
Merupakan satu lingkaran besar yang mewakili lingkaran-lingkaran kecil yang
ada di dalamnya. Merupakan pemecahan dari diagram konteks ke diagram nol.
Di dalam diagram nol ini memuat penyimpanan data.
c. Diagram Rinci
Merupakan diagram yang menguraikan proses apa yang ada di dalam diagram
nol.

2.16.2 Fungsi DFD


Berikut ini akan dijelaskan mengenai fungsi-fungsi dari data flow diagram
antara lain sebagai berikut :
a. Sebagai alat pembuatan model yang memungkinkan professional sistem untuk
menggambarkan sistem sebagai suatu jaringan proses fungsional yang
dihubungkan satu sama lain dengan alur data, baik itu secara manual maupun
komputerisasi.
b. Sebagai salah satu dari alat pembuatan model yang sering dipergunakan,
khususnya jika fungsi-fungsi sistem merupakan bagian yang lebih penting dan

UNIVERSITAS SUMATERA UTARA


35

kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD
adalah alat pembuatan model yang memberikan penekanan pada fungsi sistem.
c. Sebagai alat perancangan sistem yang berorientasi pada alur data dengan
menggunakan konsep dekomposisi dapat digunakan untuk penggambaran analisa
maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem
kepada pemakai maupun pembuat program.

Tabel 2.4 Simbol-simbol data flow diagram


Nama Simbol Simbol Keterangan
External Entity External Entity merupakan di
lingkungan luar sistem yang
bisa berupa orang, organisasi
atau sistem lain

Process Process merupakan proses


seperti aritmatik penulisan
suatu formula atau pembuatan
laporan

Data Storage Data Storage (simpan data)


adalah berupa suatu file atau
database pada sistem
komputer atau catatan manual

Data Flow Data Flow (arus data), arus


data ini mengalir diantara
proses, simpan data dan
kesatuan luar

UNIVERSITAS SUMATERA UTARA


36

UNIVERSITAS SUMATERA UTARA


BAB 3 METODE PENELITIAN

3.1 Tempat dan Waktu Penelitian


Tempat penelitian merupakan hal yang mendasari pemilihan, pengolahan
serta penafsiran suatu data dan keterangan yang berkaitan dengan apa yang menjadi
tujuan penelitian. Penelitian ini dilaksanakan pada Kantor Dinas Kelautan dan
Perikanan Provinsi Sumatera Utara pada sub bagian umum.

Tabel 3.1 Waktu pelaksanaan penelitian


No Kegiatan Maret April Mei
1 2 3 4 1 2 3 4 1 2 3 4
Pengumpulan Data
1.
dan Informasi
2. Perancangan Aplikasi
Pemrograman
3.
Aplikasi
4. Pengujian Aplikasi
5. Pembuatan Laporan

3.2 Tahapan Kegiatan Penelitian


Tahapan kegiatan penelitian dalam perancangan Aplikasi Pengarsipan Surat
Masuk dan Surat Keluar ini terdiri dari metode pengumpulan data dan metode
pengembangan sistem. Dalam pembuatan aplikasi dibutuhkan beberapa komponen,
diantaranya ialah :
a. Perangkat keras (hardware)
Satu unit laptop Lenovo tipe G40-70 dengan spesifikasi :
1. Prosesor : Intel® Celeron® 2957U @ 1.40GHz (2 CPUs), ~1.4GHz
2. Memori : 2 GB
3. Hardisk : 500 GB

b. Perangkat lunak (software)

UNIVERSITAS SUMATERA UTARA


38

Sistem operasi : Windows 8.1 Professional 64-bit


Bahasa pemrograman : HTML dan PHP versi 5.6.20
Database : MySQL versi 10.1.3
Server offline : XAMPP versi 3.2.2
Web editor : Sublime Text 2 versi 1.0.0.1
Desain grafis : Paint versi 6.3
Browser : Google Chroome versi 33.0.1750.5

3.2.1 Metode pengumpulan data


Metode yang digunakan penulis dalam melakukan pengumpulan data pada
penelitian ini adalah :
a. Studi Pustaka, yaitu dilakukan dengan melakukan mengumpulkan dan
mempelajari teori-teori serta literatur yang berhubungan dengan judul penelitian.
b. Wawancara (interview), yaitu pengumpulan data berdasarkan tatap muka dan
tanya jawab dengan salah satu karyawan sub bagian umum pada Kantor Dinas
Kelautan dan Perikanan Provisi Sumatera Utara supaya memperoleh informasi
yang akurat sehingga diharapkan dapat menjadi bahan masukkan maupun
pertimbangan dalam proses penelitian.
c. Observasi, yaitu mengumpulkan data melalui pengamatan langsung pada tempat
penelitian. Penulis mengamati sub bagian umum pada Dinas Kelautan dan
Perikanan Provinsi Sumatera Utara dalam pengolahan kearsipan surat masuk dan
surat keluar serta bagaimana cara menemukan arsip kembali saat dibutuhkan.
d. Dokumentasi, mengumpulkan data dengan cara mencari dokumen-dokumen yang
terkait dalam penelitian. Dokumen dalam penelitian ini berupa buku-buku, karya
tulis ilmiah dan dokumentasi lainnya yang dianggap berkaitan dengan penelitian.

UNIVERSITAS SUMATERA UTARA


39

3.2.2 Metode pengembangan sistem


Metode pengembangan sistem dalam tugas akhir ini menggunakan System
Development Life Cycle (SDLC). SDLC merupakan siklus pengembangan sistem
yang merupakan sekumpulan langkah, prosedur, konsep serta aturan dalam
mengembangkan sebuah sistem. Tahap ini menjelaskan alur dan tahapan yang
dilakukan dalam pengembangan sistem. Melalui tahapan ini, diharapkan sistem yang
dikembangkan dapat terselesaikan dan sesuai dengan sasaran yang ditetapkan.
Metode SDLC dengan model proses air terjun (waterfall) atau lebih dikenal dengan
istilah siklus kehidupan klasik. Model air terjun adalah aliran searah dari atas ke
bawah secara teratur, setiap tahap dalam SDLC waterfall harus diselesaikan terlebih
dahulu sebelum melanjutkan ke tahap berikutnya. Adapun tahapan yang harus
dilakukan dalam SDLC waterfall meliputi : a. Pengumpulan Data
Mengumpulkan data dan informasi yang dibutuhkan untuk perancangan aplikasi
dengan cara observasi secara langsung pada tempat penelitian.
b. Analisis Sistem
Dilakukan untuk memperoleh informasi tentang sistem, menganalisis data–data
yang ada dalam sistem dan juga menganalisis poin–poin masalah pada sistem
terutama mengenai kelebihan dan kekurangan sistem.
c. Perancangan (Desain)
Membangun dan mengembangkan sistem yang diusulkan berupa perancangan
sistem Data Flow Diagram (DFD), dimana tahapan ini dibangun dengan
memperoleh informasi yang diantaranya memastikan informasi yang didapat
akurat dan memberikan ulasan-ulasan secara terperinci.
d. Penulisan Program (Coding)
Membuat program didalam aplikasi agar dapat berjalan sesuai dengan yang
difungsikan.
e. Uji Program
Pengujian akan dilaksanakan jika program telah selesai dikerjakan. Bila saat
pengujian terdapat kesalahan maka perlu adanya perbaikan terhadap program
agar menghasilkan hasil yang maksimal.

UNIVERSITAS SUMATERA UTARA


40

3.3 Analisis Sistem


Menurut Mc. Leod (2007) Analisis sistem ialah penelitian terhadap sistem
yang telah ada dengan tujuan untuk merancang sistem baru atau memperbaharui
sistem yang telah ada tersebut.

3.3.1 Sistem yang sedang berjalan


Flowmap prosedur arsip surat masuk dan surat keluar yang sedang berjalan
pada Dinas Kelautan dan Perikanan Provinsi Sumatera Utara :

Tabel 3.2 Flowmap arsip surat masuk yang sedang berjalan

Instansi/Perusahaan Lain Sekretaris Perwakilan Kepala Dinas

Surat dari Surat dari


Instansi/Perusahaan Instansi/Perusahaan
lain lain

Mencatat
data surat
masuk

Surat masuk Surat masuk

UNIVERSITAS SUMATERA UTARA


41

Tabel 3.3 Flowmap arsip surat keluar yang sedang berjalan

UNIVERSITAS SUMATERA UTARA


42

3.3.2 Evaluasi sistem yang sedang berjalan


Sistem pengarsipan surat masuk dan surat keluar yang sedang berjalan di
Dinas Kelautan dan Perikanan Provinsi Sumatera Utara masih terdapat kekurangan,
diantaranya :
a. Kesulitan dalam pencarian arsip surat masuk dan surat keluar
b. Cara penyimpanan yang kurang efektif sehingga memungkinkan arsip dapat
hilang.

3.3.3 Sistem yang diusulkan


Dari evaluasi sistem yang sedang berjalan terdapat beberapa kendala oleh
karenanya penulis mengajukan untuk membuat Aplikasi Pengarsipan Surat Masuk
dan Surat Keluar untuk menanggulangi kendala yang ada sehingga sistem dapat
berjalan secara cepat, tepat, efektif dan efisien.
Gambaran umum sistem yang diusulkan dalam proses perancangan sistem ini
ialah penulis akan membangun sebuah aplikasi yang nantinya aplikasi tersebut
dikelola oleh seorang user (salah satu pegawai sekretaris perwakilan pada sub bagian
umum).
Tabel 3.4 Flowmap arsip surat masuk yang diusulkan

Instansi/Perusahaan lain User Kepala Dinas

Surat masuk Surat masuk

Input data surat


masuk

Database
Surat masuk
surat masuk

UNIVERSITAS SUMATERA UTARA


43

Tabel 3.5 Flowmap arsip surat keluar yang diusulkan

UNIVERSITAS SUMATERA UTARA


44

3.4 Perancangan Sistem


Menurut Satzinger, Jackson dan Burd (2012) Perancangan Sistem adalah
sekumpulan aktivitas yang menggambarkan secara rinci bagaimana sistem akan
berjalan. Hal itu bertujuan untuk menghasilkan produk perangkat lunak yang sesuai
dengan kebutuhan user. Menurut Kenneth dan Jane (2006) menjelaskan bahwa
perancangan sistem adalah kegiatan merancang detil dan rincian dari sistem yang
akan dibuat sehingga sistem tersebut sesuai dengan kebutuhan yang telah ditetapkan
dalam tahap analisa sistem. a. Flowchart

Start

Login/Input
Username dan Password

Cek
Tidak
Login
Y/T

Ya

Halaman Utama

Input Surat Masuk Laporan Surat Masuk


Input Surat Keluar Laporan Surat Keluar

Tidak
Logout

Ya
End

Gambar 3.1 Flowchart aplikasi pengarsipan surat masuk dan surat keluar

b. Diagram konteks

UNIVERSITAS SUMATERA UTARA


45

Diagram konteks atau disebut juga dengan model sistem fundamental


merepresentasikan seluruh elemen sistem sebagai sebuah proses tunggal dengan
data input output yang ditunjukkan oleh anak panah yang masuk dan keluar
secara berurutan. Berikut ini merupakan diagram konteks dari aplikasi
pengarsipan surat masuk dan surat keluar :

Laporan Surat Masuk


Laporan Surat Keluar

0
Aplikasi Pengarsipan
User Surat Masuk dan
Surat Keluar

Input Surat Masuk


Input Surat Keluar

Gambar 3.2 Diagram konteks aplikasi pengarsipan surat masuk dan surat keluar

c. DFD Level 0
Pada level ini terdapat empat proses utama yaitu proses login, proses surat
masuk, proses surat keluar dan proses laporan.
1. Login, proses ini adalah proses login yang dilakukan oleh user dengan
menginput username dan password sehingga user dapat mengelola aplikasi.
2. Surat masuk, proses ini adalah proses pendataan yang dilakukan oleh user
terhadap data dari surat masuk dengan diarsipkan untuk keperluan tertentu.
3. Surat keluar, proses ini adalah proses pendataan yang dilakukan oleh user
terhadap data dari surat yang akan keluar dengan diarsipkan untuk keperluan
tertentu.
4. Laporan, proses ini adalah proses mencetak data yang dilakukan oleh user
terhadap data surat masuk dan data surat keluar yang telah di input sebagai
laporan untuk keperluan tertentu.

UNIVERSITAS SUMATERA UTARA


46

Input username
dan password 1.0 verifikasi
D1 User
Login

Input data data surat


2.0
surat masuk masuk
Surat D2 Surat Masuk
Masuk
User
Input data data surat
surat keluar 3.0 keluar
Surat D3 Surat Keluar
Keluar

laporan surat masuk 4.0 data surat masuk


laporan surat keluar Laporan data surat keluar

Gambar 3.3 DFD level 0 aplikasi pengarsipan surat masuk dan surat keluar

UNIVERSITAS SUMATERA UTARA


47

Gambar 3.5 DFD level 1 proses 3 aplikasi pengarsipan surat masuk dan surat keluar

3.4.1 Perancangan basis data sistem


Perancangan sering disebut dengan istilah desain yang dapat diartikan sebagai
proses untuk membuat dan menciptakan objek baru. Proses dalam pembuatan sebuah
desain basis data bertujuan untuk mendukung sistem informasi dan kearsipan
berbasis komputerisasi pada instansi. Tujuan dari desain basis data ini ialah untuk
menentukan data-data yang dibutuhkan dalam sistem, sehingga informasi dalam
merancang aplikasi pengarsipan surat ini dapat terpenuhi dengan baik.

UNIVERSITAS SUMATERA UTARA


48

a. Perancangan logika basis data


Normalisasi merupakan suatu proses pengelompokan elemen data menjadi
tabeltabel yang menunjukan entitas beserta relasinya yang berfungi untuk
menghilangkan redudansi data, menentukan key yang unik untuk mengakses data
dan untuk pembentukan relasi sedemikian rupa sehingga database tersebut
mudah untuk dimodifikasi. Berikut tahap-tahap dalam proses normalisasi pada
aplikasi pengarsipan surat masuk dan surat keluar :
1. Bentuk Tidak Normal (Unnormal)
{no_agenda, no_surat, kd_surat, tgl_surat, tgl_terima, jenis_surat, pengirim,
pengolah, tujuan, dari, keterangan, file_surat, username, password}
2. Bentuk Normal Pertama (1 NF)
{no_agenda1, no_agenda2, no_surat, kd_surat, tgl_surat1, tgl_surat2,
tgl_terima, jenis_surat1, jenis_surat2, pengirim, pengolah, tujuan, dari,
keterangan1, keterangan2, file_surat1, file_surat2, username, password}
3. Bentuk Normal Kedua (2 NF) tbsurat_masuk = {tgl_terima, no_agenda,
pengirim, no_surat, tgl_surat, jenis_surat, pengolah,
keterangan, file_surat}
tbsurat_keluar = {tgl_surat, no_agenda, kd_surat, tujuan, jenis_surat,
dari, keterangan, file_surat}
tbuser = {username, password}
4. Bentuk Normal Ketiga (3 NF) tbsurat_masuk = {tgl_terima, no_agenda*,
pengirim, no_surat, tgl_surat, jenis_surat, pengolah,
keterangan, file_surat}
tbsurat_keluar = {tgl_surat, no_agenda*, kd_surat, tujuan, jenis_surat, dari,
keterangan, file_surat}
tbuser = {username*, password}

UNIVERSITAS SUMATERA UTARA


49

Berikut ini adalah Entity Relationship Diagram (ERD) dalam perancangan


sistem pengarsipan surat masuk dan surat keluar :

jenis_surat
tgl_terima pengirim

tgl_surat pengolah

no_surat keterangan

no_agenda* Surat Masuk file_surat

menginput

1
username* User password
1

menginput

M
no_agenda* file_surat
Surat Keluar
kd_surat keterangan

tgl_surat dari
jenis_surat tujuan

Gambar 3.6 ERD aplikasi pengarsipan surat masuk dan surat keluar

b. Perancangan fisik basis data


Perancangan struktur database ialah untuk menentukan file database yang
digunakan seperti field, tipe data dan ukuran data. Dalam merancang suatu sistem
yang baik dibutuhkan beberapa file yang bertujuan untuk memudahkan
pengambilan informasi pengolahan data. File-file tersebut akan berhubungan satu
sama yang lain dan dapat digunakan sesuai dengan kebutuhan pemakai atau user.
Berikut adalah tabel yang digunakan dalam perancangan sistem pengarsipan
surat masuk dan surat keluar :

UNIVERSITAS SUMATERA UTARA


50

1. Tabel User Nama tabel : tbuser


Primary Key : username

Tabel 3.6 Tabel user


Field Name Type Size
Username Varchar 50
Password Varchar 50

2. Tabel Surat Masuk


Nama tabel : tbsurat_masuk
Primary Key : no_agenda

Tabel 3.7 Tabel surat masuk


Field Name Type Size
tgl_terima Date -
no_agenda varchar 20
Pengirim varchar 100
no_surat varchar 50
tgl_surat Date -
jenis_surat varchar 20
Pengolah varchar 30
Keterangan varchar 200
file_surat varchar 30

3. Tabel Surat Keluar


Nama tabel : tbsurat_keluar
Primary Key : no_agenda

Tabel 3.8 Tabel surat keluar


Field Name Type Size

UNIVERSITAS SUMATERA UTARA


51

tgl_surat Date -
no_agenda Varchar 20
kd_surat Varchar 20
jenis_surat Varchar 20
Tujuan Varchar 100
Dari Varchar 30
Keterangan Varchar 200
file_surat Varchar 30

3.4.2 Perancangan antarmuka sistem


Perancangan antarmuka sistem yang diusulkan dalam Aplikasi Pengarsipan
Surat Masuk dan Surat Keluar ini terdiri dari Perancangan struktur menu,
Perancangan login, Perancangan input dan Perancangan output. a. Perancangan
struktur menu

Login

Halaman Utama

Kelola Cetak Aksi

Laporan Laporan
Surat Masuk Surat Keluar

Surat Masuk Surat Keluar Logout

Gambar 3.7 Perancangan struktur menu

UNIVERSITAS SUMATERA UTARA


52

Perancangan
b. login user

APLIKASI ARSIP SURAT

Masukkan username

Masukkan password

LOGIN

Gambar 3.8 Perancangan login user

c. Perancangan input surat masuk

Surat Masuk

No. Agenda
No. Surat
Tanggal
Surat
Tanggal
Terima
Jenis Surat
Pengirim
Pengolah

Keterangan

File Surat Choose File


Simpan Reset

Gambar 3.9 Perancangan input surat masuk

UNIVERSITAS SUMATERA UTARA


53

Perancangan

d. input surat keluar

Surat Keluar

No. Agenda
Kode Surat
Tanggal Surat
Jenis Surat

Tujuan

Dari

Keterangan

File Surat Choose File


Simpan Reset

Gambar 3.10 Perancangan input surat keluar

e. Perancanganoutput surat masuk

PEMERINTAHAN PROVINSI SUMATERA UTARA


DINAS KELAUTAN DAN PERIKANAN
Jalan Sei Batugingging Nomor 6 Telepon 4568819

DAFTAR PENGENDALI SURAT


MASUK

Tanggal Tanggal Pengolah Keterangan


No. Agenda Pengirim No. Surat
Terima Surat

Gambar 3.11 Perancangan output surat masuk

UNIVERSITAS SUMATERA UTARA


54

Perancangan

f. output surat keluar

PEMERINTAHAN PROVINSI SUMATERA UTARA


DINAS KELAUTAN DAN PERIKANAN
Jalan Sei Batugingging Nomor 6Telepon 4568819

DAFTAR PENGENDALI SURAT


KELUAR

Tanggal Surat No. Agenda Kode Surat Tujuan Dari Keterangan

Gambar 3.12 Perancangan output surat keluar

UNIVERSITAS SUMATERA UTARA


BAB 4 HASIL DAN PEMBAHASAN

4.1 Penggunaan Aplikasi


Penggunaan Aplikasi Pengarsipan Surat Masuk dan Surat Keluar pada kantor Dinas
Kelautan dan Perikanan Provinsi Sumatera Utara, dilihat dari perancangan aplikasi ke
dalam bentuk tampilan sebuah aplikasi.

4.1.1 Form login


Form login digunakan sebagai pengamanan sistem dari penyalahgunaan hak akses,
sehingga keamanan data dapat terjamin. Pada form login, user diminta untuk
memasukkan username dan password untuk dapat mengakses dan mengolah data
surat, baik data surat masuk maupun data surat keluar. Untuk lebih jelas proses login
dapat dilihat pada gambar di bawah ini.

Gambar 4.1 Tampilan form login

UNIVERSITAS SUMATERA UTARA


56

4.1.2 Menu utama


Menu utama adalah menu yang akan tampil ketika login berhasil dilakukan. Dalam
menu utama terdapat beberapa menu diantaranya adalah home, surat masuk, surat
keluar, laporan surat masuk, laporan surat keluar serta logout.

Gambar 4.2 Tampilan menu utama

4.1.3 Tambah surat masuk


Menu tambah surat masuk merupakan halaman dimana user dapat menginput data
surat masuk yang didalamnya berisikan nomor agenda, nomor surat, tanggal surat,
tanggal terima, jenis surat, pengirim, pengolah, keterangan serta file surat.

Gambar 4.3 Tampilan tambah surat masuk

UNIVERSITAS SUMATERA UTARA


57

4.1.4 Tambah surat keluar


Menu tambah surat keluar merupakan halaman dimana user dapat menginput data
surat keluar yang didalamnya berisikan nomor agenda, kode surat, tanggal surat, jenis
surat, tujuan, dari, keterangan serta file surat.

Gambar 4.4 Tampilan tambah surat keluar

4.1.5 Data surat masuk


Menu data surat masuk merupakan halaman untuk melihat data-data surat masuk
yang telah di input. Dibawah ini merupakan tampilan semua data surat masuk.

Gambar 4.5 Tampilan data surat masuk

UNIVERSITAS SUMATERA UTARA


58

4.1.6 Data surat keluar


Menu data surat keluar merupakan halaman untuk melihat data-data surat keluar
yang telah di input. Dibawah ini merupakan tampilan semua data surat keluar.

Gambar 4.6 Tampilan data surat keluar

4.1.7 Lihat surat masuk


Menu lihat surat masuk merupakan halaman untuk melihat seluruh data surat masuk
yang dipilih. Dibawah ini merupakan tampilan data surat masuk yang dipilih dengan
nomor agenda 972.

Gambar 4.7 Tampilan lihat surat masuk

UNIVERSITAS SUMATERA UTARA


59

4.1.8 Lihat surat keluar


Menu lihat surat keluar merupakan halaman untuk melihat seluruh data surat keluar
yang dipilih. Dibawah ini merupakan tampilan data surat keluar yang dipilih dengan
nomor agenda 2180.

Gambar 4.8 Tampilan lihat surat keluar

4.1.9 Edit surat masuk


Menu edit surat masuk merupakan halaman untuk mengubah isi data surat masuk
yang telah di input kecuali nomor agenda dan file surat. Dibawah ini merupakan
tampilan ubah data surat masuk dengan nomor agenda 972.

Gambar 4.9 Tampilan edit surat masuk

UNIVERSITAS SUMATERA UTARA


60

4.1.10 Edit surat keluar


Menu edit surat keluar merupakan halaman untuk mengubah isi data surat
keluar yang telah di input kecuali nomor agenda dan file surat. Dibawah ini
merupakan tampilan ubah data surat keluar dengan nomor agenda 2180.

Gambar 4.10 Tampilan edit surat keluar

4.1.11 Pencarian data surat masuk


Pada form pencarian data surat masuk user dapat mencari data surat masuk
berdasarkan nomor agenda. Surat yang dimaksud akan muncul pada form pencarian
data.

Gambar 4.11 Pencarian data surat masuk

UNIVERSITAS SUMATERA UTARA


61

4.1.12 Pencarian data surat keluar


Pada form pencarian data surat keluar user dapat mencari data surat keluar
berdasarkan nomor agenda. Surat yang dimaksud akan muncul pada form pencarian
data.

Gambar 4.12 Pencarian data surat keluar

4.1.13 Laporan surat masuk


Tampilan laporan data surat masuk yang akan di cetak setelah data surat
masuk di input. Berikut adalah tampilannya.

Gambar 4.13 Laporan surat masuk

UNIVERSITAS SUMATERA UTARA


62

4.1.14 Laporan surat keluar


Tampilan laporan data surat keluar yang akan di cetak setelah data surat keluar
di input. Berikut adalah tampilannya.

Gambar 4.14 Laporan surat keluar

4.2 Pengujian Aplikasi


Pengujian merupakan suatu keharusan dalam membuat aplikasi untuk mendapatkan
informasi mengenai kualitas dari aplikasi yang telah dibuat dan mengetahui apakah
fungsi-fungsi dari aplikasi tersebut telah berjalan sesuai dengan tujuan. Metode dari
pengujian sistem dalam penelitian ini yaitu metode pengujian Black Box.
a. Hasil pengujian form login
Tabel 4.1 Hasil pengujian form login
Kasus dan Hasil Uji
Aksi Yang Diharapkan Pengamatan Kesimpulan
Login User Pesan pemberitahuan: Pilihan aksi sesuai Berhasil
Anda berhasil login! yang diharapkan
Klik Ok dan berpindah
ke halaman menu utama

UNIVERSITAS SUMATERA UTARA


63

b. Hasil pengujian menu utama


Tabel 4.2 Hasil pengujian menu utama
Kasus dan Hasil Uji
Aksi Yang Diharapkan Pengamatan Kesimpulan
Klik Menu Home Berpindah ke halaman Pilihan aksi sesuai Berhasil
home yang diharapkan

Klik Menu Surat Berpindah ke halaman Pilihan aksi sesuai Berhasil


Masuk surat masuk yang diharapkan

Klik Menu Surat Berpindah ke halaman Pilihan aksi sesuai Berhasil


Keluar surat keluar yang diharapkan

Klik Menu Berpindah ke halaman Pilihan aksi sesuai Berhasil


Laporan Surat cetak laporan surat yang diharapkan
masuk
Masuk
Klik Menu Berpindah ke halaman Pilihan aksi sesuai Berhasil
Laporan Surat cetak laporan surat yang diharapkan

Keluar keluar
Klik Menu Logout Pesan konfirmasi: Pilihan aksi sesuai Berhasil
yang diharapkan
Apakah anda yakin
ingin keluar? Jika
memilih Ok maka
keluar dari aplikasi dan
berpindah ke form
login. Jika Cancel maka
tetap pada halaman
menu
utama

UNIVERSITAS SUMATERA UTARA


64

c. Hasil pengujian menu surat masuk


Tabel 4.3 Hasil pengujian menu surat masuk
Kasus dan Hasil Uji
Aksi Yang Diharapkan Pengamatan Kesimpulan
Klik Tambah Berpindah ke halaman Pilihan aksi sesuai Berhasil
tambah surat masuk yang diharapkan
Surat Masuk
Klik Choose File Membuka penyimpanan Pilihan aksi sesuai Berhasil
dokumen pada komputer yang diharapkan

Klik Simpan Data yang telah di input Pilihan aksi sesuai Berhasil
tersimpan dan berpindah yang diharapkan
ke halaman data surat
masuk

Klik Reset Data yang telah di input Pilihan aksi sesuai Berhasil
akan di set ulang yang diharapkan

Klik Icon Lihat Berpindah ke halaman Pilihan aksi sesuai Berhasil


detail surat masuk yang diharapkan

Klik Surat (Zoom) Memperbesar ukuran Pilihan aksi sesuai Berhasil


file surat masuk yang diharapkan

Klik Icon Ubah Berpindah ke halaman Pilihan aksi sesuai Berhasil


ubah surat masuk yang diharapkan

Klik Button Ubah Menyimpan data yang Pilihan aksi sesuai Berhasil
yang diharapkan
telah diperbaharui
sebelumnya dan
berpindah ke halaman
data surat masuk
Klik Icon Hapus Menghapus data surat Pilihan aksi sesuai Berhasil
masuk yang diharapkan

Mengisi Menampilkan data surat Pilihan aksi sesuai Berhasil


form masuk yang diinginkan yang diharapkan
pencarian dan klik
button cari

UNIVERSITAS SUMATERA UTARA


65

Klik halaman Berpindah ke halaman Pilihan aksi sesuai Berhasil


yang diinginkan yang diharapkan
pada Page
d. Hasil pengujian menu surat keluar
Tabel 4.4 Hasil pengujian menu surat keluar
Kasus dan Hasil Uji
Aksi Yang Diharapkan Pengamatan Kesimpulan
Klik Tambah Berpindah ke halaman Pilihan aksi sesuai Berhasil
tambah surat keluar yang diharapkan
Surat Keluar
Klik Choose File Membuka penyimpanan Pilihan aksi sesuai Berhasil
dokumen pada komputer yang diharapkan

Klik Simpan Data yang telah di input Pilihan aksi sesuai Berhasil
yang diharapkan
tersimpan dan berpindah
ke halaman data surat
keluar
Klik Reset Data yang telah di input Pilihan aksi sesuai Berhasil
akan di set ulang yang diharapkan

Klik Icon Lihat Berpindah ke halaman Pilihan aksi sesuai Berhasil


detail surat keluar yang diharapkan

Klik Surat (Zoom) Memperbesar ukuran Pilihan aksi sesuai Berhasil


file surat keluar yang diharapkan

Klik Icon Ubah Berpindah ke halaman Pilihan aksi sesuai Berhasil


ubah surat keluar yang diharapkan

Klik Button Ubah Menyimpan data yang Pilihan aksi sesuai Berhasil
yang diharapkan
telah diperbaharui
sebelumnya dan
berpindah ke halaman
data surat keluar
Klik Icon Hapus Menghapus data surat Pilihan aksi sesuai Berhasil
keluar yang diharapkan

Mengisi Menampilkan data surat Pilihan aksi sesuai Berhasil


form keluar yang diinginkan yang diharapkan
pencarian dan klik
button cari

UNIVERSITAS SUMATERA UTARA


66

Klik halaman Berpindah ke halaman Pilihan aksi sesuai Berhasil


yang diinginkan yang diharapkan
pada Page

UNIVERSITAS SUMATERA UTARA


BAB 5 PENUTUP

5.1 Kesimpulan
Berdasarkan hasil dari analisis perancangan dan pengujian program maka
dapat disimpulkan bahwa :
a. Dengan adanya aplikasi pengarsipan surat masuk dan surat keluar maka
diharapkan dapat membantu proses pengarsipan pada Dinas Kelautan dan
Perikanan Provinsi Sumatera Utara secara terkomputerisasi, yaitu dengan adanya
fitur untuk menambah dan mengubah data surat serta mempermudah memperoleh
data yang diinginkan.
b. Meningkatkan produktifitas kerja khususnya dari segi proses pengarsipan surat
masuk dan surat keluar dan pembuatan laporan akan menjadi lebih cepat dan
akurat.

5.2 Saran
Adapun beberapa saran yang penulis harapkan agar dapat meningkatkan
efisiensi dan efektifitas aplikasi ini dimasa yang akan datang antara lain :
a. Aplikasi yang dirancang oleh penulis saat ini masih sangat sederhana, untuk
pengembangan selanjutnya diharapkan dapat membuat perancangan yang lebih
inovatif dengan desain antar muka yang lebih menarik.
b. Laporan surat masuk dan surat keluar sebaiknya dilakukan secara berskala agar
pengecekan laporan surat masuk dan surat keluar dapat dilakukan secara
maksimal.

66

UNIVERSITAS SUMATERA UTARA


DAFTAR PUSTAKA

Agung, 2016. Metode Pengembangan Sistem SDLC (System Development Life Cycle).
http://agung-technology.blogspot.com/2016/05/metode-pengembangan-sistem
-sdlc-system.html di akses 2 April 2018.

Alambiyah W, 2015. Sejarah phpMyAdmin.


http://wahidin-alambiyah-19.blogspot.co.id/2015/01/sejarahphpmyadmin.html
di akses 31 Maret 2018.

Ali U, 2017. Pengertian Diagram Konteks dan Data Flow Diagram (DFD).
http:// www. pengertianpakar.com /2017/04/ pengertian-diagram-konteksdan-
data-flow-diagram-dfd.html di akses 2 April 2018.

Eka R, 2016. Pengertian, Bagian, Fungsi dan Sejarah Xampp.


http://mooza5.blogspot.co.id/ 2016/01/ pengertian-bagian-fungsi-dan-sejarah.
html di akses 31 Maret 2018.

Fathoni A, 2014. Bagian-bagian Surat: Penjelasan & Contoh.


http:// www.zonasiswa.com/ 2014/01/ bagian-bagian-surat-penjelasan-contoh.
html di akses 30 Maret 2018.

Hartono J, 2004. Pengenalan Komputer: Dasar Ilmu Komputer, Pemrograman,


Sistem Informasi dan Intelegensi Buatan. Andi. Yogyakarta.

Herlinnairine, 2014. Entity Relationship Diagram (ERD) dan Contoh


Kasus.
https:// herlinnairine. wordpress.com/ 2014/02/06/entity-relationship-diagram-
erd-dancontoh-kasus/ di akses 1 April 2018.

Kadir A, 2003. Pemrograman WEB Mencakup: HTML, CSS, JavaScript & PHP.
Andi Yogyakarta.

Maulana, 1999. Manajemen Kearsipan. Gramedia Pustaka Utama. Jakarta.

Munir FL, 2016. Pengertian, Jenis-Jenis, Simbol-Simbol dan Contoh Flowchart.


https://fahmilatiefmunir.blogspot.co.id/2016/01/pengertian-jenis-jenis-
fungsidan.html di akses 1 April 2018.

Musligudin M, Oktafianto, 2016. Analisis dan Perancangan Sistem Informasi


Menggunakan Model Terstruktur dan UML. CV Andi Offset. Yogyakarta.

Refo R, 2016. Pengertian Surat, Jenis-Jenis Surat beserta Fungsi dan Contohnya.
https://deweezz.com/pengertian-surat-dan-jenis-jenis-surat/ di akses 30 Maret
2018.

UNIVERSITAS SUMATERA UTARA


67

Sam H, 2017. Pengertian Analisis Sistem Menurut Para Ahli.


http://www.dosenpendidikan.com/analisis-sistem-pengertian-menurut-para-
ahli-fungsi -tahapan/ di akses 2 April 2018.

Sedarmayanti, 2003. Tata Kearsipan Dengan Memanfaatkan Teknologi Modern. CV


Mandar Maju. Bandung.

Sutarman, 2003. Membangun Aplikasi Web dengan PHP dan MySQL. Graha Ilmu.
Yogyakarta.

Sutarto, 1999. Sekretaris dan Tata Warkat. Gajah Mada Univercity Press. Yogyakarta.

Tarmizi H, 2017. Pengertian Sublime Text.


http://hasantarmizi.blogspot.co.id/2017/04/pengertian-sublime-text.html di akses
2 April 2018.

UNIVERSITAS SUMATERA UTARA


L-1

LISTING PROGRAM

1. index.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Login - Aplikasi Arsip Surat</title>
<style> *{ padding: 0; margin:
0; } body:before{ content: "";
position:fixed; z-index: -1;
background-size: cover; background-
position: center bottom; display:
block;
background-image: url(images/bg_login.jpg);
height: 100%; width: 100%;
filter:blur(5px); -webkit-filter:
blur(7px);
} input[type=text]{ width:
65%; text-align: center;
font-size: 15px; padding:
10px 10px; margin: 2px 0;
box-sizing: border-box;
border: 3px solid #cccccc;
-webkit-transition: 0.5s;
transition: 0.5s;
background: transparent;
outline: none;
}
input[type=text]:focus{ bor
der: 3px solid #003366;
border-radius: 7px;
}
input[type=password]
{ width: 65%; text-
align: center; font-size:
15px; padding: 10px 10px;
margin: 2px 0; box-
sizing:border-box; border:
3px solid #cccccc;
-webkit-transition: 0.5s;
transition: 0.5s;
background: transparent;
outline: none;
}
input[type=password]:focus{ bor
der: 3px solid #003366; border-
radius: 7px;
}

UNIVERSITAS SUMATERA UTARA


L-2

</style>
</head>
<body>
<center style="padding-top:12%">
<big><h1><p style="color:#ffffff;
fontfamily:monospace"><img
src="images/indexnm.png" width="2.5%"> Aplikasi
Arsip Surat</p></h1></big>
<br><br>
<form action="cek-login.php" method="post">
<table>
<tr>
<td><input style="color:white;
marginleft:17.4%; font-family:monospace"
placeholder="Masukkan username" type="text"
name="username" size="70%" required></td> </tr>
<tr>
<td><input style="color:white;
marginleft:17.4%; font-
family:monospace;background:transparent"
placeholder="Masukkan password" type="password"
name="password" size="70%" required></td>
</tr>
<tr>
<td><button style="margin-left:17.4%;
margintop:1.5%; width:65%;font-
family:monospace;height:130%;background:#cccccc"
type="submit" name="login"><h3><img src="images/key.bmp"
width="4%"> LOGIN</h3></td>
</tr>
</table>
</form>
</center>
</body>
</html>

2. cek-login.php
<?php
include "koneksi.php";

$login = mysql_query("SELECT * FROM tbuser WHERE


username='$_POST[username]' AND
password='$_POST[password]'"); $benar =
mysql_num_rows($login);
$cek = mysql_fetch_array($login);

if ($benar > 0)
{ session_start();
$_SESSION['username']=$cek['username'];
$_SESSION['password']=$cek['password'];

UNIVERSITAS SUMATERA UTARA


L-3

echo "<script>alert('Anda berhasil login!');</script>";


echo "<meta http-equiv='refresh' content='0; home.php'>";
} else{ echo "<meta http-equiv='refresh'
content='0; url=index.php'>";
echo "<script>alert('Username dan password anda
salah!');</script>";
}
?>

3. koneksi.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "dbarsip";

$konek = mysql_connect($server, $username, $password) or


die("Gagal koneksi ke server MySQL!" .mysql_error());
$bukadb = mysql_select_db($database) or die("Gagal membuka
database $database" .mysql_error());
?>

4. home.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>

UNIVERSITAS SUMATERA UTARA


L-4

</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk" cla
ss="menuItem">Surat Masuk</a>

<a href="keluar.php" title="Surat Keluar"


class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/Home.gif">
Home</span>
<span class="header">
<br>
Hai User, Selamat Datang di halaman Aplikasi
Pengarsipan Surat Masuk dan Surat Keluar
<br>
Silahkan klik menu pilihan yang berada di
sebelah kiri untuk mengelola arsip surat.
<br>
<br>
</span>

UNIVERSITAS SUMATERA UTARA


L-5

</p>

<img src="images/corner_sub_bl.gif" alt="bottom


corner" class="vBottom"/>
</div>
</div>

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
5. masuk.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>

UNIVERSITAS SUMATERA UTARA


L-6

<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Data
Surat Masuk</span>
</p>

<form action="cari_masuk.php" method="post">


<table>
<tr>
<td width="76.2%"><b><a href="add_masuk.php"
style="color:#000;margin-left:10.8%;border:0"><img
src="images/Create.bmp" width="2.38%"> Tambah Surat
Masuk</a></b></td>
<td><input type="text" name="cari" size="25"
placeholder=" Cari berdasarkan no.agenda"></td>
<td><input title="Cari Surat Masuk" type="submit"
id="submit" style="background:#80ff00"
value="Cari"></td> </tr>
</table>
<center>
<table border="2" width="85%" >
<thead>
<tr style="background:#80ff00">
<th colspan="12"></th>

UNIVERSITAS SUMATERA UTARA


L-7

</tr>
<tr>
<th>No.</th>
<th>No. Agenda</th>
<th>No. Surat</th>
<th>Pengirim</th>
<th>Pengolah</th>
<th colspan="3">Action</th>
</tr>
</thead>

<tbody> <?
php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
$halaman = 5;
$page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] :
1;
$mulai = ($page>1) ? ($page * $halaman) - $halaman : 0;
$result = mysql_query("SELECT * FROM tbsurat_masuk");
$total = mysql_num_rows($result);
$pages = ceil($total/$halaman);
$query = mysql_query("select * from tbsurat_masuk LIMIT
$mulai, $halaman")or die(mysql_error);
$no =$mulai+1;
while ($data = mysql_fetch_assoc($query)) {
?>
<center>
<tr style="text-align:center">
<center><td><?php echo $no++; ?></td> </center>
<td><?php echo $data['no_agenda']; ?></td>
<td><?php echo $data['no_surat']; ?></td>
<td><?php echo $data['pengirim']; ?></td>
<td><?php echo $data['pengolah']; ?></td>
<td><?php echo "<a
href=detail_masuk.php?no_agenda=$data[no_agenda]
title=Lihat class=view></a>"?></td>
<td><?php echo "<a
href=edit_masuk.php?no_agenda=$data[no_agenda] title=Edit
class=update></a>"?></td> <td><?php echo "<a
href=hapus_masuk.php?no_agenda=$data[no_agenda] title=Hapus
class=erase></a>"?></td>
</tr></center>
<?php } ?>
<tr style="background:#80ff00">
<th colspan="12"></th>
</tr>
</tbody>
</table>
</center></form>

UNIVERSITAS SUMATERA UTARA


L-8

<center><table width="84.5%" style="border:0px ">


<tr>
<td style="color:#000"
width="50%"><small>Jumlah: <?php echo $total; ?> surat
masuk</small></td>
<td><small>Page:<?php for ($i=1; $i<=$pages ;
$i++){ ?>
<a style="border:0; color:#000" href="?
halaman=<?php echo $i; ?>"><?php echo $i; ?></a>
<?php } ?></small></td>
</tr>
</table></center>
<br>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>

6. keluar.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>

UNIVERSITAS SUMATERA UTARA


L-9

</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/keluar.png">
Data Surat Keluar</span>
</p>

<form action="cari_keluar.php" method="post">


<table>

UNIVERSITAS SUMATERA UTARA


L-10

<tr>
<td width="76.2%"><b><a href="add_keluar.php"
style="color:#000;margin-left:10.8%;border:0"><img
src="images/Create.bmp" width="2.38%"> Tambah Surat
Keluar</a></b></td>
<td><input type="text" name="cari" size="25"
placeholder=" Cari berdasarkan no.agenda"></td>
<td><input title="Cari Surat Keluar" type="submit"
id="submit" style="background:#80ff00" value="Cari"></td>
</tr>
</table>
<center>
<table border="2" width="85%">
<thead>
<tr style="background:#80ff00">
<th colspan="12"></th>
</tr>
<tr>
<th>No.</th>
<th>No. Agenda</th>
<th>Kode Surat</th>
<th>Tujuan</th>
<th>Dari</th>
<th colspan="3">Action</th>
</tr>
</thead>

<tbody> <?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
$halaman = 5;
$page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] :
1;
$mulai = ($page>1) ? ($page * $halaman) - $halaman : 0;
$result = mysql_query("SELECT * FROM tbsurat_keluar");
$total = mysql_num_rows($result);
$pages = ceil($total/$halaman);
$query = mysql_query("select * from tbsurat_keluar LIMIT
$mulai, $halaman")or die(mysql_error);
$no =$mulai+1;
while ($data = mysql_fetch_assoc($query)) {
?>
<tr style="text-align:center">
<center><td><?php echo $no++; ?></td> </center>
<td><?php echo $data['no_agenda']; ?></td>
<td><?php echo $data['kd_surat']; ?></td>
<td><?php echo $data['tujuan']; ?></td>
<td><?php echo $data['dari']; ?></td>
<td><?php echo "<a

UNIVERSITAS SUMATERA UTARA


L-11

href=detail_keluar.php?no_agenda=$data[no_agenda]
title=Lihat class=view></a>"?></td>
<td><?php echo "<a
href=edit_keluar.php?no_agenda=$data[no_agenda] title=Edit
class=update></a>"?></td> <td><?php echo "<a
href=hapus_keluar.php?no_agenda=$data[no_agenda]
title=Hapus class=erase></a>"?></td>
</tr>
<?php } ?>

<tr style="background:#80ff00">
<th colspan="12"></th>
</tr>
</tbody>
</table>
</center></form>
<center><table width="84.5%" style="border:0px ">
<tr>
<td style="color:#000" width="50%"><small>Jumlah:
<?php echo $total; ?> surat keluar</small></td>
<td><small>Page:<?php for ($i=1; $i<=$pages ;
$i++){ ?>
<a style="border:0; color:#000"
href="?halaman=<?php echo $i; ?>"><?php echo $i; ?></a>
<?php } ?></small></td>
</tr>
</table></center>
<br>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>

7. add_masuk.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>

UNIVERSITAS SUMATERA UTARA


L-12

<title>Home - Aplikasi Arsip Surat</title>


<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>

UNIVERSITAS SUMATERA UTARA


L-13

<div class="bottomCorner"> <img


style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png">
Tambah Surat Masuk</span>
</p>

<form action="add_masuk.php" method="post">


<center>
<table>
<tr>
<td>No. Agenda</td>
<td>:</td>
<td><input type="text" name="id" size="20"
required></td> </tr>
<tr>
<td>No. Surat</td>
<td>:</td>
<td><input type="text" name="no_surat"
size="44" required></td>
</tr>
<tr>
<td>Tanggal Surat</td>
<td>:</td>
<td><input type="date" name="tgl"
required></td> </tr>
<tr>
<td>Tanggal Terima</td>
<td>:</td>
<td><input type="date" name="terima"
required></td> </tr>
<tr>
<td>Jenis Surat</td>
<td>:</td>
<td>
<select name="jenis">
<option value="Surat
Pemberitahuan">Surat Pemberitahuan</option>
<option value="Surat Permohonan">Surat
Permohonan</option>
<option value="Surat Keterangan">Surat
Keterangan</option>
<option value="Surat Keputusan">Surat
Keputusan</option>

UNIVERSITAS SUMATERA UTARA


L-14

<option value="Surat Pengantar">Surat


Pengantar</option>
<option value="Surat Undangan">Surat
Undangan</option>
<option value="Surat Perintah">Surat
Perintah</option>
<option value="Surat Biasa">Surat
Biasa</option>
<option value="Surat Izin">Surat
Izin</option>
<option
value="Lainnya">Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>Pengirim</td>
<td>:</td>
<td><textarea type="text" name="pengirim"
rows="2" cols="35" required></textarea></td>
</tr>
<tr>
<td>Pengolah</td>
<td>:</td>
<td>
<select name="olah">
<option value="Bagian Kepegawaian">Bagian
Kepegawaian</option>
<option value="Bagian Keuangan">Bagian
Keuangan</option>
<option value="Bagian Budidaya">Bagian
Budidaya</option>
<option value="Bagian Tangkap">Bagian
Tangkap</option>
<option value="Bagian Program">Bagian
Program</option>
<option value="Bagian PWP3K">Bagian
PWP3K</option>
<option value="Bagian PSDKP">Bagian
PSDKP</option>
<option value="Bagian Umum">Bagian
Umum</option>
<option value="Kadis">Kadis</option>
</select>
</td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>

UNIVERSITAS SUMATERA UTARA


L-15

<td><textarea name="ket" rows="5" cols="35"


required></textarea></td>
</tr>
<tr>
<td>File Surat</td>
<td>:</td>
<td><input type="file" name="file"
required></td> </tr>
</table></center>

<input type="submit" name="submit" style="margin:


0px 0px 0px 453px;background:#80ff00;border:0"
value="Simpan">
<input type="reset" name="reset"
style="background:#80ff00;border:0" value="Reset">
</form>

<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
if (isset($_POST['submit'])) {
$no_agenda = $_POST['id'];
$no_surat = $_POST['no_surat'];
$tgl_surat = $_POST['tgl'];
$tgl_terima = $_POST['terima'];
$jenis_surat = $_POST['jenis'];
$pengirim = $_POST['pengirim'];
$pengolah = $_POST['olah'];
$keterangan = $_POST['ket'];
$file_surat = $_POST['file'];

$sql = "INSERT INTO tbsurat_masuk values

('$no_agenda','$no_surat','$tgl_surat','$tgl_terima','$jenis_
s urat','$pengirim','$pengolah',
'$keterangan','$file_surat')";
$query = mysql_query($sql) or die(mysql_error());
if ($query) {
echo "<script>window.alert('Surat masuk berhasil
di tambah!');
window.location=(href='masuk.php')</script>";
} }?>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-16

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
8. add_keluar.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat

UNIVERSITAS SUMATERA UTARA


L-17

Keluar" class="menuItem">Laporan Surat Keluar</a>


</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/keluar.png">
Tambah Surat Keluar</span>
</p>

<form action="add_keluar.php" method="post">


<center>
<table>
<tr>
<td>No. Agenda</td>
<td>:</td>
<td><input type="text" name="id" size="20"
required></td> </tr>
<tr>
<td>Kode Surat</td>
<td>:</td>
<td><input type="text" name="kode" size="44"
required></td> </tr>
<tr>
<td>Tanggal Surat</td>
<td>:</td>
<td><input type="date" name="tanggal"
required></td> </tr>
<tr>
<td>Jenis Surat</td>
<td>:</td>
<td>
<select name="jenis">
<option value="Surat Pemberitahuan">Surat
Pemberitahuan</option>

UNIVERSITAS SUMATERA UTARA


L-18

<option value="Surat Permohonan">Surat


Permohonan</option>
<option value="Surat Keterangan">Surat
Keterangan</option>
<option value="Surat Keputusan">Surat
Keputusan</option>
<option value="Surat Pengantar">Surat
Pengantar</option>
<option value="Surat Undangan">Surat
Undangan</option>
<option value="Surat Perintah">Surat
Perintah</option>
<option value="Surat Biasa">Surat
Biasa</option>
<option value="Surat Izin">Surat
Izin</option>
<option value="Lainnya">Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>Tujuan</td>
<td>:</td>
<td><textarea type="text" name="tujuan"
rows="2" cols="35" required></textarea></td>
</tr>
<tr>
<td>Dari</td>
<td>:</td>
<td>
<select name="dari">
<option value="Bagian Kepegawaian">Bagian
Kepegawaian</option>
<option value="Bagian Keuangan">Bagian
Keuangan</option>
<option value="Bagian Budidaya">Bagian
Budidaya</option>
<option value="Bagian Tangkap">Bagian
Tangkap</option>
<option value="Bagian Program">Bagian
Program</option>
<option value="Bagian PWP3K">Bagian
PWP3K</option>
<option value="Bagian PSDKP">Bagian
PSDKP</option>
<option value="Bagian Umum">Bagian
Umum</option>
<option value="Kadis">Kadis</option>
</select>
</td>

UNIVERSITAS SUMATERA UTARA


L-19

</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td><textarea type="text" name="ket" rows="5"
cols="35" required></textarea></td> </tr>
<tr>
<td>File Surat</td>
<td>:</td>
<td><input type="file" name="file"
required></td> </tr>
</table></center>

<input type="submit" name="submit" style="margin:


0px 0px 0px 448px;background:#80ff00;border:0"
value="Simpan">
<input type="reset" name="reset"
style="background:#80ff00;border:0" value="Reset">
</form>

<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
if (isset($_POST['submit'])) {
$no_agenda = $_POST['id'];
$kd_surat = $_POST['kode'];
$tgl_surat = $_POST['tanggal'];
$jenis_surat = $_POST['jenis'];
$tujuan = $_POST['tujuan'];
$dari = $_POST['dari'];
$keterangan = $_POST['ket'];
$file_surat = $_POST['file'];

$sql = "INSERT INTO tbsurat_keluar values

('$no_agenda','$kd_surat','$tgl_surat','$jenis_surat','$tuj
uan','$dari','$keterangan','$file_surat')";
$query = mysql_query($sql) or die(mysql_error());
if ($query) {
echo "<script>window.alert('Surat keluar berhasil
di tambah!');
window.location=(href='keluar.php')</script>";
} }?>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-20

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
9. cari_keluar.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>

UNIVERSITAS SUMATERA UTARA


L-21

<a href="cetak_keluar.php" title="Laporan Surat


Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/keluar.png">
Data Surat Keluar</span>
</p>

<form action="cari_keluar.php" method="post">


<table>
<tr>
<td width="76.2%"><b><a href="add_keluar.php"
style="color:#000;margin-left:10.8%;border:0"><img
src="images/Create.bmp" width="2.38%"> Tambah Surat
Keluar</a></b></td>
<td><input type="text" name="cari" size="25"
placeholder=" Cari berdasarkan no.agenda"></td>
<td><input title="Cari Surat Keluar" type="submit"
id="submit" style="background:#80ff00"
value="Cari"></td> </tr>
</table>
<center>
<table border="2" width="85%">
<thead>
<tr style="background:#00ff00">
<th colspan="8"></th>
</tr>
<tr>
<th>No.</th>
<th>No. Agenda</th>
<th>Kode Surat</th>
<th>Tujuan</th>
<th>Dari</th>

UNIVERSITAS SUMATERA UTARA


L-22

<th colspan="3">Action</th>
</tr>
</thead>
<tbody> <?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip"); $nomor =
0;
$cari = $_POST['cari'];
$tampil = mysql_query("SELECT * FROM `tbsurat_keluar` where
no_agenda like '%$cari%'"); $total =
mysql_num_rows($tampil); while ($data =
mysql_fetch_array($tampil)) {
?>
<tr style="text-align:center">
<center><td><?php echo $nomor=$nomor+1;
?></td></center>
<td><?php echo $data['no_agenda']; ?></td>
<td><?php echo $data['kd_surat']; ?></td>
<td><?php echo $data['tujuan']; ?></td>
<td><?php echo $data['dari']; ?></td>
<td><?php echo "<a
href=detail_keluar.php?no_agenda=$data[no_agenda]
title=Lihat class=view></a>"?></td>
<td><?php echo "<a
href=edit_keluar.php?no_agenda=$data[no_agenda] title=Edit
class=update></a>"?></td> <td><?php echo "<a
href=hapus_keluar.php?no_agenda=$data[no_agenda]
title=Hapus class=erase></a>"?></td>
</tr>
<?php } ?>
<tr style="background:#80ff00">
<th colspan="13"></th>
</tr>
</tbody>
</table></center>
</form>
<center><table width="84.5%" style="border:0px ">
<tr>
<td style="color:#000"
width="50%"><small>Jumlah: <?php echo $total; ?> surat
keluar</small></td>
</tr>
</table></center>
<br><br>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-23

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
10. cari_masuk.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>

UNIVERSITAS SUMATERA UTARA


L-24

<a href="cetak_keluar.php" title="Laporan Surat


Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Data
Surat Masuk</span>
</p>

<form action="cari_masuk.php" method="post">


<table>
<tr>
<td width="76.2%"><b><a href="add_masuk.php"
style="color:#000;margin-left:10.8%;border:0"><img
src="images/Create.bmp" width="2.38%"> Tambah Surat
Masuk</a></b></td>
<td><input type="text" name="cari" size="25"
placeholder=" Cari berdasarkan no.agenda"></td>
<td><input title="Cari Surat Masuk" type="submit"
id="submit" style="background:#80ff00"
value="Cari"></td> </tr>
</table>
<center>
<table border="2" width="85%">
<thead>
<tr style="background:#80ff00">
<th colspan="8"></th>
</tr>
<tr>
<th>No.</th>
<th>No. Agenda</th>
<th>No. Surat</th>
<th>Pengirim</th>
<th>Pengolah</th>

UNIVERSITAS SUMATERA UTARA


L-25

<th colspan="3">Action</th>
</tr>
</thead>
<tbody> <?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip"); $nomor =
0;
$cari = $_POST['cari'];
$tampil = mysql_query("SELECT * FROM `tbsurat_masuk` where
no_agenda like '%$cari%'"); $total =
mysql_num_rows($tampil); while ($data =
mysql_fetch_array($tampil)) {
?>
<tr style="text-align:center">
<center><td><?php echo $nomor=$nomor+1;
?></td></center>
<td><?php echo $data['no_agenda']; ?></td>
<td><?php echo $data['no_surat']; ?></td>
<td><?php echo $data['pengirim']; ?></td>
<td><?php echo $data['pengolah']; ?></td>
<td><?php echo "<a
href=detail_masuk.php?no_agenda=$data[no_agenda]
title=Lihat class=view></a>"?></td>
<td><?php echo "<a
href=edit_masuk.php?no_agenda=$data[no_agenda] title=Edit
class=update></a>"?></td> <td><?php echo "<a
href=hapus_masuk.php?no_agenda=$data[no_agenda] title=Hapus
class=erase></a>"?></td>
</tr>
<?php } ?>
<tr style="background:#80ff00">
<th colspan="13"></th>
</tr>
</tbody>
</table></center>
</form>
<center><table width="84.5%" style="border:0px ">
<tr>
<td style="color:#000"
width="50%"><small>Jumlah: <?php echo $total; ?> surat
masuk</small></td>
</tr>
</table></center>
<br><br>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-26

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
11. detail_keluar.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<script type="text/javascript"
src="jquery1.4.3.min.js"></script>
<script type="text/javascript"
src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css"
type="text/css" rel="stylesheet"/>

<script type="text/javascript">
$(document).ready(function(){
$(".fancy").fancybox();
});
</script>

<link rel="stylesheet" type="text/css"


href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>

UNIVERSITAS SUMATERA UTARA


L-27

<a href="home.php" title="Home"


class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner">
<img style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Data
Surat Masuk</span>
</p>

<table style="margin-left:4.2%">
<tr>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda'];
$sql = mysql_query("select * from tbsurat_keluar
where no_agenda='$no_agenda'");
$data = mysql_fetch_array($sql); {
?>

UNIVERSITAS SUMATERA UTARA


L-28

</tr>

<a href="scan/<?php echo $data['file_surat'];?>"


class="fancy" style="border:0" title="Zoom"> <?
php echo"<img style='margin-left:47px' src='scan/".
$data['file_surat']."'width='133px'
height='171px'/>";?>
</a>

<tr>
<td>No. Agenda</td>
<td> : <?php echo $data['no_agenda']; ?></td>
</tr>
<tr>
<td>Kode Surat</td>
<td> : <?php echo $data['kd_surat']; ?></td>
</tr>
<tr>
<td>Tanggal Surat</td>
<td> : <?php echo $data['tgl_surat']; ?></td>
</tr>
<tr>
<td>Jenis Surat</td>
<td> : <?php echo $data['jenis_surat']; ?></td>
</tr>
<tr>
<td>Tujuan</td>
<td> : <?php echo $data['tujuan']; ?></td>
</tr>
<tr>
<td>Dari</td>
<td> : <?php echo $data['dari']; ?></td>
</tr>
<tr>
<td>Keterangan</td>
<td> : <?php echo $data['keterangan']; ?></td>
</tr>
<?php } ?>

</table>
<br>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-29

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
12. detail_masuk.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<script type="text/javascript"
src="jquery1.4.3.min.js"></script>
<script type="text/javascript"
src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css"
type="text/css" rel="stylesheet"/>

<script type="text/javascript">
$(document).ready(function(){
$(".fancy").fancybox();
});
</script>

<link rel="stylesheet" type="text/css"


href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>

UNIVERSITAS SUMATERA UTARA


L-30

<a href="home.php" title="Home"


class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Data
Surat Masuk</span>
</p>

<table style="margin-left:4.2%">
<tr>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda'];
$sql = mysql_query("select * from tbsurat_masuk
where no_agenda='$no_agenda'");
$data = mysql_fetch_array($sql); {
?>

UNIVERSITAS SUMATERA UTARA


L-31

</tr>

<a href="scan/<?php echo $data['file_surat'];?>"


class="fancy" style="border:0" title="Zoom"> <?
php echo"<img style='margin-left:47px' src='scan/".
$data['file_surat']."'width='133px'
height='171px'/>";?>
</a>

<tr>
<td>No. Agenda</td>
<td> : <?php echo $data['no_agenda']; ?></td>
</tr>
<tr>
<td>No. Surat</td>
<td> : <?php echo $data['no_surat']; ?></td>
</tr>
<tr>
<td>Tanggal Surat</td>
<td> : <?php echo $data['tgl_surat']; ?></td>
</tr>
<tr>
<td>Tanggal Terima</td>
<td> : <?php echo $data['tgl_terima']; ?></td>
</tr>
<tr>
<td>Jenis Surat</td> <td> : <?php echo
$data['jenis_surat']; ?></td>
</tr>
<tr>
<td>Pengirim</td>
<td> : <?php echo $data['pengirim']; ?></td>
</tr>
<tr>
<td>Pengolah</td>
<td> : <?php echo $data['pengolah']; ?></td>
</tr>
<tr>
<td>Keterangan</td>
<td> : <?php echo $data['keterangan']; ?></td>
</tr>
<?php } ?>

</table>
<br>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom corner"
class="vBottom"/>

UNIVERSITAS SUMATERA UTARA


L-32

</div>
</div>

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
13. edit_keluar.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>

UNIVERSITAS SUMATERA UTARA


L-33

<a href="cetak_masuk.php" title="Laporan Surat


Masuk" class="menuItem">Laporan Surat Masuk</a>
<a href="cetak_keluar.php" title="Laporan Surat
Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Edit
Surat Keluar</span>
</p>
<p>
<form action="" method="post">
<center>
<table>
<tr>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda'];
$sql = mysql_query("select * from tbsurat_keluar
where no_agenda='$no_agenda'");
$data = mysql_fetch_array($sql);
$jenis_surat = $data['jenis_surat'];
$dari = $data['dari'];
?>
</tr>
<tr>
<td>No. Agenda</td>
<td>:</td>
<td><input type="text" name="no_agenda"
size="20" value="<?php echo $data['no_agenda'];?>" required
/></td>
</tr>

UNIVERSITAS SUMATERA UTARA


L-34

<tr>
<td>Kode Surat</td>
<td>:</td>
<td><input type="text" name="kd_surat"
size="44" value="<?php echo $data['kd_surat'];?>" required
/></td>
</tr>
<tr>
<td>Tanggal Surat</td>
<td>:</td>
<td><input type="date" name="tgl_surat"
value="<?php echo $data['tgl_surat'];?>" required></td>
</tr>
<tr>
<td>Jenis Surat</td>
<td>:</td>
<td>
<select name="jenis_surat">
<option value="Surat Pemberitahuan"
<?php if( $jenis_surat=='Surat Pemberitahuan'){echo
"selected"; } ?>>Surat Pemberitahuan</option>
<option value="Surat Permohonan" <?php
if( $jenis_surat=='Surat Permohonan'){echo "selected"; } ?
>>Surat Permohonan</option>
<option value="Surat Keterangan" <?php
if( $jenis_surat=='Surat Keterangan'){echo "selected"; }
?>>Surat Keterangan</option>
<option value="Surat Keputusan" <?php
if( $jenis_surat=='Surat Keputusan'){echo "selected"; }
?>>Surat Keputusan</option>
<option value="Surat Pengantar" <?php
if( $jenis_surat=='Surat Pengantar'){echo "selected"; }
?>>Surat Pengantar</option>
<option value="Surat Undangan" <?php
if( $jenis_surat=='Surat Undangan'){echo "selected"; }
?>>Surat Undangan</option>
<option value="Surat Perintah" <?php
if( $jenis_surat=='Surat Perintah'){echo "selected"; }
?>>Surat Perintah</option>
<option value="Surat Biasa" <?php
if( $jenis_surat=='Surat Biasa'){echo "selected"; } ?
>>Surat
Biasa</option>
<option value="Lainnya" <?php if(
$jenis_surat=='Lainnya'){echo "selected"; }
?>>Lainnya</option>
</select>
</td>
</tr>
<tr>

UNIVERSITAS SUMATERA UTARA


L-35

<td>Tujuan</td>
<td>:</td>
<td><textarea type="text" name="tujuan"
rows="2" cols="35" required><?php echo $data['tujuan'];?
></textarea></td>
</tr>
<tr>
<td>Dari</td>
<td>:</td>
<td>
<select name="dari">
<option value="Bagian Kepegawaian"
<?php if( $dari=='Bagian Kepegawaian'){echo "selected"; }
?>>Bagian Kepegawaian</option>
<option value="Bagian Keuangan"<?php
if( $dari=='Bagian Keuangan'){echo "selected"; } ?>>Bagian
Keuangan</option>
<option value="Bagian Budidaya"<?php
if( $dari=='Bagian Budidaya'){echo "selected"; } ?>>Bagian
Budidaya</option>
<option value="Bagian Tangkap"<?php if(
$dari=='Bagian Tangkap'){echo "selected"; } ?>>Bagian
Tangkap</option>
<option value="Bagian Program"<?php if(
$dari=='Bagian Program'){echo "selected"; } ?>>Bagian
Program</option>
<option value="Bagian PWP3K"<?php if(
$dari=='Bagian PWP3K'){echo "selected"; } ?>>Bagian
PWP3K</option>
<option value="Bagian PSDKP"<?php if(
$dari=='Bagian PSDKP'){echo "selected"; } ?>>Bagian
PSDKP</option>
<option value="Bagian Umum"<?php if(
$dari=='Bagian Umum'){echo "selected"; } ?>>Bagian
Umum</option>
<option value="Kadis"<?php if(
$dari=='Kadis'){echo "selected"; } ?>>Kadis</option>
</select>
</td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td><textarea name="keterangan" rows="5"
cols="35" required><?php echo $data['keterangan'];?
></textarea></td>
</tr>
<tr>
<td></td><td></td>

UNIVERSITAS SUMATERA UTARA


L-36

<td><input type="submit" name="ubah"


style="background:#80ff00;border:0" value="Ubah">
</td>
</tr>
</table>
</center>
</form>

<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
if (isset($_POST['ubah'])) {
$no_agenda = $_POST['no_agenda'];
$kd_surat= $_POST['kd_surat'];
$tgl_surat = $_POST['tgl_surat'];
$jenis_surat = $_POST['jenis_surat'];
$tujuan = $_POST['tujuan'];
$dari = $_POST['dari'];
$keterangan = $_POST['keterangan'];

$sql=("UPDATE tbsurat_keluar SET


no_agenda='$no_agenda', kd_surat='$kd_surat',
tgl_surat='$tgl_surat',
jenis_surat='$jenis_surat', tujuan='$tujuan',
dari='$dari', keterangan='$keterangan' WHERE
no_agenda='$no_agenda'");
$query = mysql_query($sql) or die(mysql_error());
if ($query) {
echo "<script>window.alert('Surat Keluar berhasil
diubah!');
window.location=(href='keluar.php')</script>";
}
}
?>
<tr style="background:#00ff00">
<th colspan="13"></th>
</tr>
</tbody>
</table>
</center></form>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="footer">
<div id="footerLeft"></div>

UNIVERSITAS SUMATERA UTARA


L-37

<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>

14. edit_masuk.php
<!DOCTYPE html>
<html xml:lang="en" lang="en-AU">
<head>
<title>Home - Aplikasi Arsip Surat</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body>
<div id="siteBox">
<div id="header">
<img src="images/corner_tl.gif" alt="corner"
style="float:left;" />
<img src="images/corner_tr.gif" alt="corner"
style="float:right;" /> <span class="title">
<span class="white"><img src="images/indexnm.png">
ARSIP SURAT | </span>DINAS KELAUTAN DAN PERIKANAN
<span class="subTitle">Provinsi Sumatera Utara</span>
</span>
</div>

<div id="content">
<div id="contentLeft">
<p>
<span class="header"><img src="images/index.jpg">
Kelola</span>
</p>
<p>
<a href="home.php" title="Home"
class="menuItem">Home</a>
<a href="masuk.php" title="Surat Masuk"
class="menuItem">Surat Masuk</a>
<a href="keluar.php" title="Surat Keluar"
class="menuItem">Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Cetak</span>
</p>
<p>
<a href="cetak_masuk.php" title="Laporan Surat
Masuk" class="menuItem">Laporan Surat Masuk</a>

UNIVERSITAS SUMATERA UTARA


L-38

<a href="cetak_keluar.php" title="Laporan Surat


Keluar" class="menuItem">Laporan Surat Keluar</a>
</p>
<p>
<span class="header"><img src="images/index.jpg">
Aksi</span>
</p>
<p>
<a href="index.php" title="Logout" class="menuItem"
onClick="return confirm('Apakah anda yakin ingin
keluar?')">Logout</a>
</p>
<div class="bottomCorner"> <img
style="margin-left:90%;"
src="images/corner_sub_br.gif" alt="bottom corner"
class="vBottom"/>
</div>
</div>

<div id="contentRight">
<p>
<span class="header"><img src="images/n.png"> Edit
Surat Masuk</span>
</p>
<p>
<form action="" method="post">
<center>
<table>
<tr>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda'];
$sql = mysql_query("select * from tbsurat_masuk where
no_agenda='$no_agenda'"); $data =
mysql_fetch_array($sql);
$jenis_surat = $data['jenis_surat'];
$pengolah = $data['pengolah'];
?>
</tr>
<tr>
<td>No. Agenda</td>
<td>:</td>
<td><input type="text" name="no_agenda"
size="20" value="<?php echo $data['no_agenda'];?>"
required></td> </tr>
<tr>
<td>No. Surat</td>
<td>:</td>

UNIVERSITAS SUMATERA UTARA


L-39

<td><input type="text" name="no_surat"


size="44" value="<?php echo $data['no_surat'];?>"
required></td> </tr>
<tr>
<td>Tanggal Surat</td>
<td>:</td>
<td><input type="date" name="tgl_surat"
value="<?php echo $data['tgl_surat'];?>" required></td>
</tr>
<tr>
<td>Tanggal Terima</td>
<td>:</td>
<td><input type="date" name="tgl_terima"
value="<?php echo $data['tgl_terima'];?>" required></td>
</tr>
<tr>
<td>Jenis Surat</td>
<td>:</td>
<td>
<select name="jenis_surat">
<option value="Surat Pemberitahuan"
<?php if( $jenis_surat=='Surat Pemberitahuan'){echo
"selected"; } ?>>Surat Pemberitahuan</option>
<option value="Surat Permohonan" <?php
if( $jenis_surat=='Surat Permohonan'){echo "selected"; } ?
>>Surat Permohonan</option>
<option value="Surat Keterangan" <?php
if( $jenis_surat=='Surat Keterangan'){echo "selected"; }
?>>Surat Keterangan</option>
<option value="Surat Keputusan" <?php
if( $jenis_surat=='Surat Keputusan'){echo "selected"; }
?>>Surat Keputusan</option>
<option value="Surat Pengantar" <?php
if( $jenis_surat=='Surat Pengantar'){echo "selected"; }
?>>Surat Pengantar</option>
<option value="Surat Undangan" <?php
if( $jenis_surat=='Surat Undangan'){echo "selected"; } ?
>>Surat Undangan</option>
<option value="Surat Perintah" <?php
if( $jenis_surat=='Surat Perintah'){echo "selected"; }
?>>Surat Perintah</option>
<option value="Surat Biasa" <?php if(
$jenis_surat=='Surat Biasa'){echo "selected"; } ?>>Surat
Biasa</option>
<option value="Lainnya" <?php if(
$jenis_surat=='Lainnya'){echo "selected"; }
?>>Lainnya</option>
</select>
</td>
</tr>

UNIVERSITAS SUMATERA UTARA


L-40

<tr>
<td>Pengirim</td>
<td>:</td>
<td><textarea name="pengirim" rows="2"
cols="35" required><?php echo $data['pengirim'];?
></textarea></td>
</tr>
<tr>
<td>Pengolah</td>
<td>:</td>
<td>
<select name="pengolah">
<option value="Bagian Kepegawaian"
<?php if( $pengolah=='Bagian Kepegawaian'){echo "selected";
} ?>>Bagian Kepegawaian</option>
<option value="Bagian Keuangan"<?php
if( $pengolah=='Bagian Keuangan'){echo "selected"; }
?>>Bagian Keuangan</option>
<option value="Bagian Budidaya"<?php
if( $pengolah=='Bagian Budidaya'){echo "selected"; }
?>>Bagian Budidaya</option>
<option value="Bagian Tangkap"<?php if(
$pengolah=='Bagian Tangkap'){echo "selected"; } ?>>Bagian
Tangkap</option>
<option value="Bagian Program"<?php if(
$pengolah=='Bagian Program'){echo "selected"; } ?>>Bagian
Program</option>
<option value="Bagian PWP3K"<?php if(
$pengolah=='Bagian PWP3K'){echo "selected"; } ?>>Bagian
PWP3K</option>
<option value="Bagian PSDKP"<?php if(
$pengolah=='Bagian PSDKP'){echo "selected"; } ?>>Bagian
PSDKP</option>
<option value="Bagian Umum"<?php if(
$pengolah=='Bagian Umum'){echo "selected"; } ?>>Bagian
Umum</option>
<option value="Kadis"<?php if(
$pengolah=='Kadis'){echo "selected"; } ?>>Kadis</option>
</select>
</td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td><textarea name="keterangan" rows="4"
cols="35" required><?php echo $data['keterangan'];?
></textarea></td>
</tr>
<tr>
<td></td><td></td>

UNIVERSITAS SUMATERA UTARA


L-41

<td><input type="submit" name="ubah"


style="background:#80ff00;border:0" value="Ubah">
</td>
</tr>
</table>
</center>
</form>

<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");
if (isset($_POST['ubah'])) {
$no_agenda = $_POST['no_agenda'];
$no_surat= $_POST['no_surat'];
$tgl_surat = $_POST['tgl_surat'];
$tgl_terima = $_POST['tgl_terima'];
$jenis_surat = $_POST['jenis_surat'];
$pengirim = $_POST['pengirim'];
$pengolah = $_POST['pengolah'];
$keterangan = $_POST['keterangan'];

$sql=("UPDATE tbsurat_masuk SET


no_agenda='$no_agenda', no_surat='$no_surat',
tgl_surat='$tgl_surat',
tgl_terima='$tgl_terima',
jenis_surat='$jenis_surat', pengirim='$pengirim',
pengolah='$pengolah',
keterangan='$keterangan' WHERE
no_agenda='$no_agenda'");
$query = mysql_query($sql) or die(mysql_error());
if ($query) {
echo "<script>window.alert('Surat Masuk berhasil
diubah!');
window.location=(href='masuk.php')</script>";
}
}
?>
<tr style="background:#00ff00">
<th colspan="13"></th>
</tr>
</tbody>
</table>
</center></form>
<p>
<span class="header"></span>
</p>
<img src="images/corner_sub_bl.gif" alt="bottom
corner" class="vBottom"/>
</div>
</div>

UNIVERSITAS SUMATERA UTARA


L-42

<div id="footer">
<div id="footerLeft"></div>
<div id="footerRight">&nbsp;</div>
</div>
</div>
</body>
</html>
15. hapus_keluar.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda']; $sql =


"DELETE FROM tbsurat_keluar WHERE
no_agenda='$no_agenda'";
$query = mysql_query($sql) or die(mysql_error());
if ($query)
{
echo "<script>window.alert('Data surat keluar berhasil
dihapus!')
window.location=(href='keluar.php')</script>";
}
?>
16. hapus_masuk.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip");

$no_agenda = $_GET['no_agenda']; $sql =


"DELETE FROM tbsurat_masuk WHERE
no_agenda='$no_agenda'";
$query = mysql_query($sql) or die(mysql_error());
if ($query)
{
echo "<script>window.alert('Data surat masuk berhasil
dihapus!')
window.location=(href='masuk.php')</script>";
}
?>
17. cetak_keluar.php
<html>
<body onLoad="window.print();">
<br>
<center>
<table border ="0" cellpadding="0">
<tr>
<td> <img src="images/logo.jpg"></td>
<td>

UNIVERSITAS SUMATERA UTARA


L-43

<br><center>PEMERINTAHAN PROVINSI SUMATERA UTARA


<br><big><b>DINAS KELAUTAN DAN
PERIKANAN</b></big>
<br><small>Jalan Sei Batugingging Nomor 6 Telepon
4568819
<br>MEDAN</small>
</td>
</tr>
</table>

<HR size="2.5" NOSHADE>


<br><small><b><u>DAFTAR PENGENDALI SURAT</u>
<br>KELUAR</b></small>
<br><br>
</center>
<table width="100%" align="center"
cellspacing="0" cellpadding="2" border="1px" >
<tr>
<th width="12.3%" align="center"
bgcolor="#CCCCCC">Tanggal Surat</th>
<th width="10.8%" align="center"
bgcolor="#CCCCCC">No. Agenda</th>
<th width="12.5%" align="center"
bgcolor="#CCCCCC">Kode Surat</th>
<th width="20%" align="center"
bgcolor="#CCCCCC">Tujuan</th>
<th width="13%" align="center"
bgcolor="#CCCCCC">Dari</th>
<th width="38.4%" align="center"
bgcolor="#CCCCCC">Keterangan</th>
</tr> <?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip"); $nomor =
0;
$tampil = mysql_query("select * from tbsurat_keluar");
while ($data = mysql_fetch_array($tampil)) {
?>
<tr style="text-align:center">
<td><?php echo $data['tgl_surat']; ?></td>
<td><?php echo $data['no_agenda']; ?></td>
<td><?php echo $data['kd_surat']; ?></td>
<td><?php echo $data['tujuan']; ?></td>
<td><?php echo $data['dari']; ?></td>
<td><?php echo $data['keterangan']; ?></td>
</tr>
<?php } ?>
</table>
</body>
</html>

UNIVERSITAS SUMATERA UTARA


L-44

18. cetak_masuk.php
<html>
<body onLoad="window.print();">
<br>
<center>
<table border ="0" cellpadding="0">
<tr>
<td> <img src="images/logo.jpg"></td>
<td>
<br><center>PEMERINTAHAN PROVINSI SUMATERA UTARA
<br><big><b>DINAS KELAUTAN DAN
PERIKANAN</b></big>
<br><small>Jalan Sei Batugingging Nomor 6 Telepon
4568819
<br>MEDAN</small>
</td>
</tr>
</table>

<HR size="2.5" NOSHADE>


<br><small><b><u>DAFTAR PENGENDALI SURAT</u>
<br>MASUK</b></small>
<br><br>
</center>
<table width="100%" align="center" cellspacing="0"
cellpadding="2" border="1px" >
<tr>
<th width="12.3%" align="center"
bgcolor="#CCCCCC">Tanggal Terima</th>
<th width="9.8%" align="center"
bgcolor="#CCCCCC">No. Agenda</th>
<th width="22%" align="center"
bgcolor="#CCCCCC">Pengirim</th>
<th width="6%" align="center"
bgcolor="#CCCCCC">No. Surat</th>
<th width="11.3%" align="center"
bgcolor="#CCCCCC">Tanggal Surat</th>
<th width="10%" align="center"
bgcolor="#CCCCCC">Pengolah</th> <th
width="30.6%" align="center"
bgcolor="#CCCCCC">Keterangan</th>
</tr> <?php
mysql_connect("localhost","root","");
mysql_select_db("dbarsip"); $nomor =
0;
$tampil = mysql_query("select * from tbsurat_masuk"); while
($data = mysql_fetch_array($tampil)) {
?>
<tr style="text-align:center">
<td><?php echo $data['tgl_terima']; ?></td>

UNIVERSITAS SUMATERA UTARA


L-45

<td><?php echo $data['no_agenda']; ?></td>


<td><?php echo $data['pengirim']; ?></td>
<td><?php echo $data['no_surat']; ?></td>
<td><?php echo $data['tgl_surat']; ?></td>
<td><?php echo $data['pengolah']; ?></td>
<td><?php echo $data['keterangan']; ?></td>
</tr>
<?php } ?>
</table>
</body>
</html>

19. style.css
body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 1.0em; background-
color: #000; }
#siteBox
{ float:
left; width:
100%; color:
#000; }
#header
{ float:
left; width:
100%;
height: 4em;
background: url(../images/bg_menuatas.png);
} #header a { float: right;
width: 8em; padding: 5px 10px
5px 10px; font-size: 0.6em;
text-align: center; text-
transform: uppercase; text-
decoration: none; color: #FFF;
background-color: #666;
border-bottom: 2px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
}
#header a:hover, #header a.active
{ padding-top: 10px; background-
color: #333;
}
#header a.lastMenuItem {
background-image: url(../images/corner_tr.gif);
background-repeat: no-repeat; background-
position: top right; border-right: 0px;

UNIVERSITAS SUMATERA UTARA


L-46

} a .desc { display: none;


text-transform: lowercase;
color: #FC0;
}
a:hover .desc, .active .desc
{ display: block;
} .title { float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em; font-
weight: bold; text-
transform: uppercase;
text-align: right; line-
height: 0.75em; letter-
spacing: -0.15em; color:
#80ff00;} .adminlogin
{ float: left; padding:
1em 30px 0 49.6em; font-
size: 1em; font-weight:
bold; text-align: right;
line-height: 1.35em;
letter-spacing: -0.15em;
} .subTitle { display:
block; font-size: 0.54em;
text-transform: lowercase;
line-height: 1.8em;
letter-spacing: 0.01em;
} #content { float:
left; width: 100%;
padding: 1em 0 1em 0;
background-color: #056;
}
#contentLeft { float:
left; width: 19%;
margin-bottom: 1.5em;
background: #b0e0e6 url(../images/corner_sub_tr.gif)
norepeat top right;
}
#contentRight
{ float: right;
width: 79.8%;
background: #b0e0e6 url(../images/corner_sub_tl.gif)
norepeat top left; }
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em; line-height:
1.8em;
}
#content a { text-
decoration: none; color:
#fff;
border-bottom: 1px solid #AAA;

UNIVERSITAS SUMATERA UTARA


L-47

}
#content a:hover { color: #DDD;
background-color: #888; border-
bottom: 1px solid #EEEEEE;
}
.header, .subHeader {
display: block;
clear: both; font-
weight: bold; font-
size: 1em; color:
#000;
border-bottom: 1px solid #AAA;
} .subHeader {
border: 0px;
}
#content a.view { display:
block; margin-left: 11px;
padding: 5px 0px 10px 23px;
background: url(../images/view.gif) no-repeat center
left; border: 0px;
}
#content a.erase { display:
block; margin-left: 11px;
padding: 5px 0px 10px 23px;
background: url(../images/hapus.bmp) no-repeat center
left; border: 0px;
}
#content a.update
{ display: block;
margin-left: 11px; padding:
5px 0px 12px 23px;
background: url(../images/edit.gif) no-repeat center
left; border: 0px;
}
#content a.menuItem
{ display: block;
padding: 5px 0px 5px 54px;
background: url(../images/bg_menukiri.jpg) no-repeat
center left; border: 0px;
}
#content a:hover.menuItem
{ color: #fff;
background: #888 url(../images/bg_menuatas.png) no-repeat
center left; border: 0px; } #footer { float: left;
width: 100%; height: 3em;
margin-bottom: 1em !important; margin-
bottom: 0;
font-size: 0.6em; text-
transform: lowercase;
line-height: 2.6em; color:
#0AD;

UNIVERSITAS SUMATERA UTARA


L-48

background: url(../images/bg_menuatas.png);}
#footerLeft
{ float: left;
width: 60%;
height: 3em; text-
align: left;
background: url(../images/corner_bl.gif) no-repeat bottom
left;} #footerRight { float: right; width: 35%;
height: 3em; text-align: right;
background: url(../images/corner_br.gif) no-repeat bottom
right;} #footer a { color: #0AD;} #footer a:hover
{ color: #666666;} .grey { font-size: 0.9em; color:
#AAA;} .white { color: #FFF;} acronym { cursor: help;
border-bottom: 1px dotted #AAA;} li
{
margin-left:
50px;} .imgLeft,
.imgRight { margin:
5px;} .imgLeft
{ float: left;
margin-left: 0px;}
.imgRight { float:
right; margin-right:
50px;} .bottomCorner {
text-align: right;}
.vBottom {
vertical-align: bottom;}

20. logout.php
<?php
session_start();
session_destroy();

header('location:index.php');
?>

UNIVERSITAS SUMATERA UTARA


L-48

UNIVERSITAS SUMATERA UTARA


UNIVERSITAS SUMATERA UTARA
L-49

UNIVERSITAS SUMATERA UTARA


L-50

UNIVERSITAS SUMATERA UTARA


UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA

Anda mungkin juga menyukai