PEMBUATAN APLIKASI ARSIP FILE BERBASIS WEBSITE

UNTUK KANTOR DPKOMINFO KABUPATEN

MANOKWARI

LAPORAN KERJA PRAKTEK

MUHAMMAD AMRI QUILO

NIM. 201665030

PROGRAM STUDI S1 TEKNIK INFORMATIKA

JURUSAN INFORMATKA
FAKULTAS TEKNIK
UNIVERSITAS PAPUA
MANOKWARI
2019

1
 LEMBAR PENGESAHAN

JUDUL : PEMBUATAN APLIKASI ARSIP FILE BERBASIS

WEBSITE UNTUK KANTOR DPKOMINFO
KABUPATEN MANOKWARI
NAMA : MUHAMMAD AMRI QUILO
NIM : 201665030
P. STUDI : S1 TEKNIK INFORMATIKA
JURUSAN : TEKNIK INFORMATIKA
FAKULTAS : TEKNIK

Disetujui,

Pembimbing Pembimbing Teknis

Julius P. P. Naibaho, S.Kom., M.Kom Teofilus Marpaung, S.Kom., M.Sc

Diketahui,

Ketua Program Studi

Christian Dwi Suhendra, S.T., M.Cs

1
 KATA PENGANTAR

Syukur Alhamdulillah penulis panjatkan kepada Allah SWT karena atas

segala rahmat dan hidayah-Nya Laporan Kerja Praktek ini dapat terselesaikan Dan
atas bantuan serta doa yang ditujukan untuk penulis, penulis ingin menyampaikan
ucapan terima kasih kepada :

1. Orang tua penulis yang selalu memberikan dukungan, semangat, kasih sayang
serta doa yang tiada hentinya.
2. Bapak Julius P.P.Naibaho, S.Kom., M.Kom selaku dosen pembimbing yang
telah memberikan dukungan, bimbingan dan nasihat untuk penulis.
3. Kepala Dinas Persandian Komunikasi dan Informasi Kabupaten Manokwari
yang telah mengizinkan dan menerima saya untuk melaksanakan kerja
praktek di Dinas Persandian Komunikasi dan Informasi Kabupaten
Manokwari.
4. Bapak Teofilus Marpaung, S.Kom., M.Sc selaku pembimbing lapangan yang
telah memberikan dukungan, bimbingan dan nasihat selama melaksanakan
kerja praktek di kantor DPKOMINFO Kabupaten Manokwari
5. Teman-teman angkatan 2016 yang memberikan bantuan, motivasi dan
semangat kepada penulis.
6. Dan juga kepada semua pihak bersangkutan yang telah membantu
terselesaikannya Laporan Kerja Praktek ini.

Penulis menyadari bahwa masih banyak kekurangan dalam penulisan laporan

ini, namun demikian penulis tetap berharap semoga laporan ini dapat bermanfaat
bagi pembaca sekalian.

Manokwari, 4 Oktober 2019

Penulis

Muhammad Amri Quilo

2
 DAFTAR ISI

Halaman

DAFTAR GAMBAR..............................................................................................vi
DAFTAR TABEL..................................................................................................vii
BAB I PENDAHULUAN........................................................................................1
1.1 Latar Belakang...................................................................................................1
1.2 Maksud dan Tujuan............................................................................................2
1.3 Manfaat..............................................................................................................2
1.4 Batasan Masalah.................................................................................................2
1.5 Waktu dan Tempat Pelaksanaan........................................................................3
BAB II KEADAAN UMUM...................................................................................4
2.1 Keadaan Umum Kantor......................................................................................4
2.2 Visi.....................................................................................................................4
2.3 Misi....................................................................................................................4
2.4 Tujuan................................................................................................................5
2.5 Sasaran...............................................................................................................5
2.6 Strategi...............................................................................................................6
2.7 Kebijakan...........................................................................................................6
2.8 Fungsi.................................................................................................................7
2.9 Struktur Organisasi.............................................................................................8
BAB III TINJAUAN PUSTAKA............................................................................9
3.1 Website...............................................................................................................9
3.1.1 Penjelasan Website..........................................................................................9
3.1.2 Sejarah dan Perkembangan Website.............................................................10
3.2 Server...............................................................................................................14
3.2.1 Pengertian Server..........................................................................................14
3.2.2 Cara Kerja Server..........................................................................................14
3.2.3 Fungsi Server................................................................................................15

3
3.3 Web Server.......................................................................................................16
3.3.1 Pengertian Web Server..................................................................................16
3.3.2 Cara Kerja Web Server.................................................................................17
3.3.3 Fungsi Web Server........................................................................................18
3.3.4 Web Server Sebagai Hardware.....................................................................18
3.3.5 Web Server Sebagai Software.......................................................................19
3.3.6 Produk Web Server.......................................................................................19
3.3.7 Keunggulan Masing-masing Web Server.....................................................20
3.4 Database...........................................................................................................21
3.4.1 Pengertian Database......................................................................................21
3.4.2 Sifat-sifat Database.......................................................................................21
3.4.3 Tipe Database................................................................................................21
3.5 Web Brower.....................................................................................................24
3.5.1 Pengertian Web Browser...............................................................................24
3.5.2 Fungsi Web Browser.....................................................................................24
3.6 HTML..............................................................................................................25
3.6.1 Pengertian HTML.........................................................................................25
3.6.2 Sejarah dan Perkembangan HTML...............................................................26
3.7 CSS...................................................................................................................29
3.7.1 Pengertian CSS..............................................................................................29
3.7.2 Sejarah dan Perkembangan CSS...................................................................31
3.8 PHP..................................................................................................................33
3.8.1 Pengertian PHP.............................................................................................33
3.8.2 Penjelasan dan Perkembangan PHP..............................................................34
3.9 JavaScript.........................................................................................................36
3.9.1 Pengertian JavaScript....................................................................................36
3.9.2 Sejarah dan Perkembangan JavaScript..........................................................38
3.10 MYSQL..........................................................................................................39
3.10.1 Pengertian MYSQL.....................................................................................39
3.10.2 Sejarah dan Perkembangan MYSQL..........................................................40
3.11 SQL................................................................................................................43

4
3.11.1 Pengertian SQL...........................................................................................43
3.11.2 Sejarah dan Perkembangan SQL.................................................................47
3.12 XAMPP..........................................................................................................48
3.12.1 Pengertian XAMPP.....................................................................................48
3.12.2 Sejarah dan Perkembangan XAMPP..........................................................49
3.13 Visual Studio Code........................................................................................49
3.14 PHPMyAdmin................................................................................................50
3.15 JQuery............................................................................................................52
3.15.1 Pengertian JQuery.......................................................................................52
3.15.2 Sejarah Perkembangan JQuery...................................................................54
3.16 Use Case Diagram..........................................................................................56
3.17 Activity Diagram............................................................................................57
3.18 Flowchart Diagram.........................................................................................58
BAB IV PEMBAHASAN......................................................................................60
4.1 Alat yang Digunakan........................................................................................60
4.1.1 Prangkat Keras..............................................................................................60
4.1.2 Perangkat Lunak............................................................................................60
4.2 Proses Pembuatan.............................................................................................61
4.2.1 Desain Use Case Diagram.............................................................................61
4.2.2 Desain Activity Diagram...............................................................................62
4.2.3 Desain Flowchart..........................................................................................68
4.2.4 Desain Database............................................................................................69
4.2.5 Desain Tampilan Aplikasi.............................................................................70
4.2.6 Memprogram Aplikasi..................................................................................74
BAB V PENUTUP.................................................................................................75
5.1 Kesimpulan......................................................................................................75
5.2 Saran.................................................................................................................75
DAFTAR PUSTAKA............................................................................................76
LAMPIRAN...........................................................................................................78

5
 DAFTAR GAMBAR

Halaman
Gambar 1 Struktur Organisasi DPKOMINFO..........................................................8
Gambar 2 Grafik Perkembangan Website...............................................................10
Gambar 3 Logo HTML...........................................................................................26
Gambar 4 Logo CSS................................................................................................29
Gambar 5 Logo PHP...............................................................................................33
Gambar 6 Logo JavaScript......................................................................................36
Gambar 7 Logo MYSQL.........................................................................................40
Gambar 8 Logo Xampp...........................................................................................48
Gambar 9 Logo Visual Studio Code.......................................................................50
Gambar 10 Logo Phpmyadmin................................................................................51
Gambar 11 Logo JQuery..........................................................................................53
Gambar 12 Use Case Diagram Aplikasi...................................................................61
Gambar 13 Activity Diagram Upload File...............................................................62
Gambar 14 Activity Diagram Hapus File.................................................................63
Gambar 15 Activity Diagram Download File..........................................................64
Gambar 16 Activity Diagram Tambah User............................................................65
Gambar 17 Activity Diagram Hapus User...............................................................66
Gambar 18 Activity Diagram Ubah Password.........................................................67
Gambar 19 Flowchart Diagram Aplikasi.................................................................68
Gambar 20 Halaman Login......................................................................................70
Gambar 21 Halaman Dashboard..............................................................................71
Gambar 22 Halaman Upload File.............................................................................71
Gambar 23 Halaman Arsip.......................................................................................72
Gambar 24 Halaman Reset Password.......................................................................72
Gambar 25 Halaman Setting....................................................................................73
Gambar 26 Halaman Tentang...................................................................................73

6
 DAFTAR TABEL

Halaman
Table 1 Presentasi Penggunaan Jenis Web Server...................................................19
Table 2 Simbol-Simbol Flowchart...........................................................................59
Table 3 Struktur Tabel Users....................................................................................69
Table 4 Struktur Tabel Arsip....................................................................................69

7
 BAB I PENDAHULUAN

1.1 Latar Belakang

Teknologi Informasi sangat penting bagi semua kalangan dan juga dunia
kerja, baik itu dunia industri, instansi, pendidikan, kesehatan, ilmu pengetahuan
dan lain sebagainya dalam menghadapi persaingan yang ketat di era globalisasi
saat ini berkaitan dengan teknologi komputer. (Franklin.Ursula.1989).
Mahasiswa jurusan Teknik Informatika dituntut harus dapat memahami tidak
hanya teori-teori yang diperoleh pada bangku perkuliahan saja melainkan dapat
mengimplementasikan di lapangan khususnya pada dunia kerja. Salah satu
Instansi Pemerintahan yang memanfaatkan Teknologi Informasi di Papua Barat
yaitu Dinas Persandian Komunikasi dan Informasi Kabupaten Manokwari.

Kantor Dinas Persandian Komunikasi dan Informasi Kabupaten

Manokwari terletak di jalan Percetakan Negara, kota Manokwari, provinsi
Papua Barat. Kantor DPKOMINFO Kabupaten Manokwari menyimpan berkas-
berkas dokument seperti surat-surat, laporan, dan dokumen-dokumen penting
lainnya tidak lagi dalam bentuk fisik atau kertas akan tetapi dalam bentuk
sebuah file yang tersimpan didalam sebuah komputer dengan rapih.

Hal tersebut membuktikan bahwa kantor DPKOMINFO Kabupaten

Manokwari sudah memanfaatkan Teknologi Informasi dalam kinerja
pekerjaannya terkhusus dalam memanejemen berkas-berkas penting mereka,
akan tetapi pemanfaatan Teknologi Informasi tersebut masih belum maksimal
dimana cara menyimpan nerkas-berkas tersebut belum memanfaatkan salah
satu kemajuan Teknologi Informasi yaitu Internet sehingga kekurangannya
ialah berkas-berkas tersebut hanya bisa diakses jika karyawan menggunakan
komputer yang menyimpan berkas tersebut.
Oleh karena itu muncul-lah sebuah ide untuk membuat sebuah aplikasi

1
 berbasis website yang berfungsi untuk menyimpan dan mengatur berkas-berkas
dalam bentuk file milik kantor DPKOMINFO. Dengan aplikasi berbasis
website ini memungkinkan file-file berkas yang tersimpan dapat diakses dari
perangkat apapun, dimanapun dan kapanpun selama prangkat yang ingin
mengakses aplikasi website tersebut terhubung dengan jaringan internet.

1.2 Maksud dan Tujuan

Adapaun maksud dan tujuan dari penulisan laporan kerja peraktek ini
sebagai berikut :
1. Bertujuan untuk meningkatkan efisiensi dalam hal menyimpan berkas-
berkas kantor DPKOMINFO.
2. Bertujuan agar berkar-berkas yang tersimpat dapat diakses dengan mudah
oleh seluruh karyawan kantor DPKOMINFO.
3. Bertujan agar menejemen penyimpanan file-file berkas kantor
DPKOMINFO lebih baik dan tertata rapi.

1.3 Manfaat

Adapun manfaat dari Kerja Praktek ini sebagai berikut :

1. Mahasiswa dapat mengenal dunia kerja secara lebih nyata.
2. Mahasiswa dapat mengimplementasikan ilmu yang didapat selama dibangku
perkuliahan di kerja praktek.
3. Membantu kinerja para staf kantor DPKOMINFO Kabupaten Manokwari.

1.4 Batasan Masalah

Adapun batasan masalah laporan kerja praktek ini sebagai berikut :

1. Menjadikan berkas-berkas file milik kantor DPKOMINFO dapat diakses dari
perangkat apapun, dimanapun, dan kapanpun.
2. Menjadikan berkas-berkas file milik kantor DPKOMINFO dapat
dimanajemen dengan baik dan efisien.

2
1.5 Waktu dan Tempat Pelaksanaan

Tanggal : 07 Januari – 07 Februari 2019

Hari : Senin – Jum’at
Waktu : 08.00 s/d 16.00 WIT
Instansi : Dinas Persandian, Komunikasi dan Informasi Kabupaten
Manokwari, Provinsi Papua Barat

BAB II KEADAAN UMUM

2.1 Keadaan Umum Kantor

Kantor Dinas Persandian Komunikasi dan Informasi Kabupaten

3
 Manokwari terletak di jalan Percetakan negara, Manokwari, Provinsi Papua
Barat. Gedung kantor berwarna biru dan disekeliling kantor ditanami
tumbuhan-tumbuhan hijau sehingga kantor terlihat sejuk. Halaman kantor
cukup luas sehingga kendaraan-kendaraan pegawai atau tamu dapat parkir
dengan mudah. Kantor dilengkapi fasilitas internet yang mempermudah para
pegawai untuk mencari informasi lewat internet.

2.2 Visi

Terwujudnya Tata Kelola Pemerintahan yang Maju Serta Profesionalisme

dalam Meningkatkan Layanan Komunikasi dan Informasi Publik yang Aman
dan Berklasifikasi Berbasis e-Government.

2.3 Misi

1. Meningkatkan tata kelola pemerintahan yang baik melalui peningkatan

kualitas birokrasi dan Aparatur Sipil Negara dalam memberikan pelayanan
prima bagi masyarakat pada Dinas Persandian, Komunikasi dan
Informatika.
2. Menyelenggarakan urusan Persandian dalam rangka Pengamanan
Informasi Berklasifikasi serta memfasilitasi Pelayanan Telekomunikasi di
Lingkungan Pemerintah Kabupaten Manokwari.
3. Menyelenggarakan layanan Informasi dan Komunikasi Publik menuju
masyarakat Kabupaten Manokwari secara maksimal, transparan, dan
akuntabel.
4. Penyediaan dan Pengembangan Infrastruktur Teknologi Informasi dan
Komunikasi Dalam Sistem Pemerintahan Berbasis Elektronik (E-
Government) yang Terintegrasi, Transparan, dan Responsif menuju
Manokwari Smart City.

4
2.4 Tujuan

1.Meningkatkan tata kelola pemerintahan yang baik melalui peningkatan

kualitas birokrasi dalam memberikan pelayanan prima kepada masyarakat.
2.Meningkatkan penyelenggaraan pengamanan Informasi berklasifikasi melalui
bidang persandian.
3.Meningkatkan ketersediaan sarana komunikasi bidang persandian yang
terkini dan terpelihara.
4.Meningkatkan pelayanan informasi dan komunikasi publik dalam rangka
penyebarluasan informasi pembangunan daerah.
5.Meningkatkan kerjasama dan hubungan layanan media dan informasi
kemasyarakatan.
6.Meningkatkan sistem layanan e-Government yang maju, transparan dan
responsive menuju Manokwari Smart City guna mendukung akuntabilitas
Pemerintahan Daerah.
7.Meningkatkan ketersediaan infrastruktur Teknologi Informasi dan
Komunikasi menuju Manokwari Smart City.

2.5 Sasaran

1. Peningkatan kualitas dan profesionalisme Aparatur Sipil Negara pada

Dinas Persandian, Komunikasi dan Informatika Kabupaten Manokwari.
2.Terwujudnya pemerintahan yang bersih, responsif dan akuntabel
3.Terciptanya keamanan Informasi berklasifikasi melalui bidang persandian.
4.Tersedianya sarana komunikasi bidang persandian yang terkini dan
terpelihara.
5.Tersedianya layanan informasi dan komunikasi publik dalam rangka
penyebarluasan informasi pembangunan daerah.
6.Terciptanya kerjasama dan hubungan layanan media dan informasi
kemasyarakatan yang optimal.
7.Tersedianya layanan sistem pemerintahan berbasis elektronik (e-Government)
yang maju, transparan dan responsive menuju Manokwari Smart City guna

5
 mendukung akuntabilitas Pemerintahan Daerah.
8. Terpenuhinya kebutuhan infrastruktur TIK di Kabupaten Manokwari
menuju Manokwari Smart City.

2.6 Strategi

1.Meningkatkan kelancaran penyelenggaraan pemerintahan yang bersih,

responsif dan akuntabel
2.Peningkatan pelayanan dengan menerapkan pelayanan prima bagi masyarakat
3.Menjalankan sistem pengamanan dan perlindungan informasi berklasifikasi
melalui satu pintu informasi pemerintah daerah.
4.Menyediakan infrastruktur pendukung layanan bidang persandian.
5.Menyelenggarakan layanan informasi dan komunikasi publik yang luas dan
berkualitas.
6.Menyelenggarakan kerjasama antar media yang aktif, terintegrasi dan
transparan dalam menyajikan informasi yang bertanggungjawab.
7.Menyelenggarakan layanan sistem pemerintahan berbasis elektronik yang
terintegrasi menuju Manokwari Smart City.
8.Penyediaan infrastruktur Teknologi Informasi dan Komunikasi (TIK) yang
terintegrasi dan terkini menuju Manokwari Smart City.

2.7 Kebijakan

1.Pengembangan kapasitas ASN pada Dinas Persandian, Komunikasi dan

Informatika melalui pendidikan, pelatihan, dan penyediaan kelengkapan
disiplin aparatur untuk meningkatkan profesionalisme.
2.Meningkatkan kualitas layanan administrasi dan sarana prasarana aparatur
penyelenggara pemerintahan yang bersih, responsif dan akuntabel
3.Meningkatkan pengamanan dan perlindungan informasi berklasifikasi pada
Sistem Informasi Pemerintah Daerah Satu Pintu melalui Dinas Persandian
Komunikasi dan Informatika.
4.Penyediaan infrastruktur bidang persandian yang terkini pada wilayah

6
 Kabupaten Manokwari.
5.Peningkatan pelayanan Informasi dan Komunikasi Publik melalui pemakaian
aset kekayaan daerah pada Dinas Persandian, Komunikasi dan Informatika
Kabupaten Manokwari secara transparan.
6. Peningkatan hubungan kerjasama antara Dinas Persandian, Komunikasi
dan Informatika Kabupaten Manokwari dengan seluruh media informasi
dalam menyajikan informasi yang bertanggung jawab.
7. Peningkatan layanan Sistem Pemerintahan Berbasis Elektronik (e-
Government) yang terintegrasi dan akuntabel menuju Manokwari Smart
City.
8. Peningkatan infrastruktur TIK yang terintegrasi dan terkini menuju
Manokwari Smart City.

2.8 Fungsi

1.Perumusan kebijakan di lingkup Dinas Persandian, Komunikasi dan

Informatika Kabupaten Manokwari.
2.Pelaksanaan kebijakan di lingkup Dinas Persandian, Komunikasi dan
Informatika Kabupaten Manokwari.
3.Pelaksanaan evaluasi dan pelaporan di lingkup Dinas Persandian, Komunikasi
dan Informatika Kabupaten Manokwari.
4.Pelaksanaan administrasi di lingkup Dinas Persandian, Komunikasi dan
Informatika Kabupaten Manokwari.
5.Pelaksanaan fungsi lain yang diberikan bupati terkait tugas dan fungsinya.

7
2.9 Struktur Organisasi

Gambar 1 Struktur Organisasi DPKOMINFO

8
 BAB III TINJAUAN PUSTAKA

3.1 Website

3.1.1 Penjelasan Website

Website adalah suatu kumpulan halaman web yang saling terhubung

yang umumnya berisikan kumpulan informasi berupa data teks, gambar,
animasi, audio, video maupun gabungan dari semuanya yang biasanya
dibuat untuk personal, organisasi dan perusahaan. Dari pengertian website
tersebut dapat dibedakan menjadi 2 yaitu web bersifat statis dan dinamis.
Bersifat statis apabila isi informasinya tetap dan isi informasinya hanya
dari pemilik website sedangkan web yang bersifat dinamis apabila isi
informasinya selalu berubah-ubah dan dapat diubah-ubah oleh pemilik
maupun pengguna website. Contoh web statis : website profil perusahaan,
sedangkan contoh web dinamis seperti facebook, twitter dll.

Website pertama kali dibuat oleh Tim Berners-Lee pada akhir 1980-an
dan baru resmi online pada tahun 1991. Tujuan awal Tim Berners-Lee
membuat sebuah website adalah supaya lebih memudahkan para peneliti di
tempatnya bekerja ketika akan bertukar atau melakukan perubahan
informasi.

Jika Anda ingin mengetahui seperti apa tampilannya, silakan akses

tautan berikut http://info.cern.ch/. Pada saat itu, website mulai dapat
digunakan secara gratis oleh publik baru diumumkan oleh CERN tepatnya
tanggal 30 April 1993.

Website dapat dimiliki oleh individu, organisasi, atau perusahaan.

Pada umumnya sebuah website akan menampilkan informasi atau satu

9
topik tertentu, meskipun saat ini banyak website yang menampilkan
berbagai informasi dengan topik yang berbeda.

3.1.2 Sejarah dan Perkembangan Website

Website pertama kali ditemukan oleh Sir Timothy John, Tim Berners-
Lee. Pada tahun 1991 website terhubung dengan jaringan.Ttujuan dari
dibuatnya website pada saat itu yakni untuk mempermudah tukar menukar
dan memperbaharui informasi kepada sesama peneliti di tempat mereka
bekerja. Dengan demikian pengertian website saat itu masih sebatas tukar
menukar informasi, bukan pengertian website secara terminologi.

Gambar 2 Grafik Perkembangan Website

(https://harmonipermata.com/wp-content/uploads/2018/09/perkembangan-web-768x446.jpg)

Website dipublikasikan ke publik setelah adanya pengumuman dari

CERN pada tanggal 30 april 1993. CERN menyatakan bahwa website
dapat digunakan secara gratis oleh semua orang. Pada saat ini pengertian
website sudah masuk ke dalam ranah publik karena sudah bisa digunakan
oleh semua orang dimanapun dan kapanpun.

Sejak web ditemukan tahun 1990, Web semakin populer dan menjadi

10
 layanan internet dengan pengguna terbanyak. Sebagian pengguna internet
bahkan mengira kalau Web adalah satu satunya layanan di internet.
Teknologi Web pun terus bergulir dari era web 1.0, web 2.0 dan trend
menuju web 3.0. Sayangnya, ciri ciri antara versi web 1.0, sampai 3.0
tidak ada kata sepakat antar para pakar. Namun demikian, bukan berarti
kita tidak tahu polanya. Berikut ini adalah pola dari masing-masing versi
web menurut bebeberapa sumber.

1. Web 1.0, Web 1.0 dimulai sejak web era 90-an. Ciri utama dari era ini
adalah informasi yang bersifat statis.

Ciri-ciri dari web 1.0 :

1. Website umumnya bersifat static yang jarang berubah atau sama

sekali tidak berubah.
2. Website umumnya tidak interaktif.
3. Umumnya teknologi yang dipakai adalah teknologi tertutup.
4. Kebanyakan desain webnya menggunakan Frame.
5. Tampilan kombinasi warna dan textnya terlihat biasa karena hanya
terbatas pada 16 warna dan 6 jenis font.
6. Informasi yang ada umumnya berupa berita text dan gambar.

Teknologi web 1.0 :

1. HTML dasar, CSS dasar dan Javascript.

2. Flash dan Java applet.
3. Browser populer adalah Netscape dan Internet Explorer.
4. Koneksi internet masih dial up maximal 56 kbps.

2. Web 2.0, Web 2.0 dimulai sejak era 2005 sampai sekarang, Ciri khas
dari era ini adalah user generated content dan jejaring social.

11
Ciri dari web 2.0 :

1. Website bersifat dinamis dan interaktif dengan adanya teknologi

AJAX.
2. User bukan hanya sebagai konsumen tetapi juga sebagai
produsen informasi dalam istilah populer adalah user generated
content ( contoh youtube atau wikipedia ).
3. Teknologi yang dipakai umumnya open source.
4. Desain web menggunakan CSS layout.
5. Informasi terdiri dari text, gambar, audio, video dan animasi.
6. Web sebagai media berkomunikasi dan berkolaborasi.
7. Jejaring social mendominasi di era ini.
8. Munculnya startup.
9. Munculnya jenis website seperti microbloging, photo dan video
sharing, online bookmarking, blog dan jejaring social.

Teknologi di Web 2.0 :

1. Ajax dan jQuery serta Javascript library mendominasi.

2. Meningkatnya penggunaan HTML5 dan makin menurunnya
pengguna Flash.
3. Mobile Web dan Responsive web design.
4. XML dan JSON untuk pertukaran data.
5. Web API dan Mashup (Mashup adalah istilah menggabungkan
beberapa layanan menjadi satu, contoh menampilkan tweet di
Google maps).
6. Browser yang popular adalah Chrome,safari dan Firefox.
koneksi internet menggunakan broadband (>1MB/s).
7. Android dan iOS mendominasi pengguna mobile web.

12
3. Web 3.0, Web 3.0 adalah generasi selanjutnya dari teknologi web.
Ciri dari web 3.0 ada pada akses mobile, Semantic web dan
personalifikasi. Beberapa website yang dianggap merupakan cikal
bakal dari web 3.0 adalah Instagram. Instagram disebut sebut sebagai
awal dari generasi web 3.0 karena layanan ini hanya tersedia lewat
mobile Device.

Ciri ciri Web 3.0 :

1. Integrasi web kedalam produk Rumah tangga seperti TV, Kulkas

atau Jendala pintar atau home entertainment contoh produk ini
adalah Smart windows dari samsung atau Google Nexus Q.
2. Semantic Web, Contoh dari penggunaan dari semantic web
adalah Knowledge graph di Google Search.
3. Natural language prosesing. Perintah menggunakan suara.
Contohnya adalah Siri, Voice Action Android atau Voice search
di Google.
4. Location based service dan personifikasi informasi. Web tidak
lagi memberikan informasi, namun solusi. Contoh layanan ini
adalah Layar dan Google Now.
5. Komputer (dan web) yang bisa dipakai , Contoh dari produk ini
adalah Google glass.

Teknologi web 3.0 :

1. Semantic Web (Contoh knowledge graph).

2. Artificial Intelegence (Siri).
3. Realtime comunication & colaboration (Google docs, Google
Wave).
4. Augment Reality (Layar, aplikasi di android).
5. Computer generated Information (Contoh Wolfram Alpha).

13
 6. HTML5 dan Cloud teknologi.

3.2 Server

3.2.1 Pengertian Server

Server adalah sebuah sistem komputer yang menyediakan jenis

layanan (service) tertentu dalam sebuah jaringan komputer. Server
didukung dengan prosesor yang bersifat scalable dan RAM yang besar,
juga dilengkapi dengan sistem operasi khusus, yang disebut sebagai sistem
operasi jaringan (network operating system).Server juga menjalankan
perangkat lunak administratif yang mengontrol akses terhadap jaringan
dan sumber daya yang terdapat di dalamnya, seperti halnya berkas atau
alat pencetak (printer), dan memberikan akses kepada workstation anggota
jaringan.

3.2.2 Cara Kerja Server

Secara sederhana, server bekerja atas permintaan dari sebuah klien.

Misalnya saja untuk kasus web server, ketika Anda mengetikkan suatu
alamat website menggunakan browser, maka artinya komputer Anda
sedang bertindak sebagai klien yang meminta informasi kepada web
server. Web server tersebut kemudian mengirimkan isi website ke
komputer Anda, sehingga Anda pun dapat mengakses isi website tersebut.

Untuk kasus lainnya, seperti server FTP, mungkin agak sedikit

berbeda. Pada server FTP, Anda dapat mengunggah sebuah dokumen atau
data menuju server FTP, sehingga dapat disimpan dalam server tersebut.
Sebagai klien, Anda berhak untuk menyimpan data Anda di server FTP.
Nantinya, jika ada orang lain yang tergabung dalam jaringan server

14
tersebut dan ingin mengunduh data atau dokumen Anda, maka server FTP
akan menyediakan koneksi untuk klien lain tersebut.

Secara umum, semua jenis server bekerja dengan menjalankan fungsi-

fungsi yang telah disebutkan sebelumnya, mulai dari melayani permintaan
data dari klien hingga memberikan perlindungan pada komputer klien.
Hanya saja, untuk jenis server yang berbeda, hal yang dilayani pun
berbeda.

Sebuah perangkat komputer yang dijadikan server biasanya dirancang

sedikit berbeda dari komputer – komputer klient. Dalam hal spesifikasi
perangkat dan juga dalam hal sistem operasi misalnya, spesifikasi
perangkat komputer yang digunakan sebagai server harus dibuat tinggi
(karena harus menangani lalu lintas data yang cukup besar), sedangkan
sistem operasinya harus menggunakan sistem operasi khusus server seperti
Windows Server atau pun Linux Ubuntu Server / Linuxt Mint Server.

3.2.3 Fungsi Server

Tugas utama server adalah melayani komputer client, dan di bagi

menjadi beberapa fungsi sesuai dengan jenis server, berikut penjelasannya

1. Server Aplikasi yaitu Server yang digunakan untuk menyimpan

berbagai macam aplikasi yang dapat diakses oleh client.

2. Server Data yaitu Server jenis ini di gunakan untuk menyimpan

berbagai data, baik data yang belum diolah ataupun data yang sudah diolah
menjadi informasi. data ini dapat di akses oleh client dengna bantuan
aplikasi yang ada di server.

3. Server Proxy yaitu server berfungsi untuk mengatur lalu lintas di

15
 jaringan melalui pengaturan proxy. Orang awam lebih mengenal proxy
server untuk mengkoneksikan komputer client ke Internet.

3.3 Web Server

3.3.1 Pengertian Web Server

Web server adalah perangkat lunak yang berfungsi sebagai penerima

permintaan yang dikirimkan melalui browser kemudian memberikan
tanggapan permintaan dalam bentuk halaman situs web atau lebih
umumnya dalam dokumen HTML. Namun, web server dapat mempunyai
dua pengertian berbeda, yaitu sebagai bagian dari perangkat keras
(hardware) maupun sebagai bagian dari perangkat lunak (software).

Jika merujuk pada hardware, web server digunakan untuk menyimpan

semua data seperti HTML dokumen, gambar, file CSS stylesheets, dan file
JavaScript. Sedangkan pada sisi software, fungsi web server adalah
sebagai pusat kontrol untuk memproses permintaan yang diterima dari
browser.

Jadi sebenarnya semua yang berhubungan dengan website biasanya

juga berhubungan dengan web server, karena tugas web server adalah
mengatur semua komunikasi yang terjadi antara browser dengan server
untuk memproses sebuah website.

Saat ini ada beberapa pilihan web server saat ini tersedia, nanti akan
kami coba bahas satu persatu mengenai kelebihan masing-masing web
server. Sebelumnya, mari kita coba bahas mengenai bagian lain dari web
server.

Pada tahun 1990 web server adalahproyek yang diusulkannya pada

16
atasannya di CERN (Organisasi Riset Nuklir Eropa) bernama CERN httpd
yang diusulkan oleh Sir Tim Berners-Lee. Web server ini berjalan pada
server NeXT. NeXT merupakan perusahaan yang didirikan oleh Steve
Jobs setelah keluar dari Apple.

Pada tahun yang sama ditemukan pula browser pertama kali yang
dinamakan WorldWideWeb.

3.3.2 Cara Kerja Web Server

Seperti penjelasan sebelumnya, saat mengambil halaman website,

browser mengirimkan permintaan ke server yang kemudian diproses oleh
web server. HTTP request dikirimkan ke web server. Sebelum memproses
HTTP request, web server juga melakukan pengecekan terhadap
keamanan. Pada web server, HTTP request diproses dengan bantuan
HTTP server. HTTP server merupakan perangkat lunak yang bertugas
menerjemahkan URL (alamat situs web) serta HTTP (protokol yang
digunakan browser untuk menampilkan halaman website). Kemudian web
server mengirimkan HTTP response ke browser dan memprosesnya
menjadi halaman situs web.

https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/What_is_a_web_server

Pada saat web server menerima HTTP request dari browser, jika
diperlukan web server akan mengirimkan query ke database untuk
memenuhi permintaan HTTP request yang dikirimkan oleh browser.

17
3.3.3 Fungsi Web Server

Jadi, selain berfungsi sebagai komunikasi penghubung dengan situs

web dan memproses HTTP request yang dikirimkan oleh browser, secara
umum beberapa fungsi web server adalah sebagai berikut :

1. Memastikan semua modul yang dibutuhkan tersedia dan siap

digunakan.
2. Membersihkan penyimpanan, cache, dan module yang tidak terpakai.
3. Melakukan pemeriksaan keamanan terhadap HTTP request yang
dikirimkan browser.

Namun, jika dipisahkan berdasarkan pengertian web server sebagai

hardware dan web server sebagai sofware, maka fungsinya sebagai berikut
:

3.3.4 Web Server Sebagai Hardware

Web Server (untuk membedakannya saya gunakan awalan kapital)

bertugas menjadi tempat penyimpanan skrip, gambar, maupun konten
halaman website. Web Server harus dapat diakses dari seluruh wilayah
yang mempunyai koneksi internet.

Anda bisa mendapatkan Web Server dari layanan penyedia hosting

Indonesia terbaik yang sesuai dengan kebutuhan. Ada beberapa
persyaratan yang bisa menjadi pertimbangan memilih penyedia layanan
server hosting untuk website Anda. Server harus cepat, mempunyai
kapasitas penyimpanan yang besar, dan memiliki kapasitas RAM yang
memadai.

18
3.3.5 Web Server Sebagai Software

Selain tempat penyimpanan, fungsi web server adalah sebagai

perangkat lunak yang melayani permintaan dari browser. Ada banyak web
server yang saat ini tersedia, salah satunya adalah Apache.

3.3.6 Produk Web Server

Selain lima besar web server pada tabel di bawah ini, ada banyak
sekali layanan yang ditawarkan, antara lain Oracle Servers IBM, Servers,
Gunicorn, Zope, Kestrel, Jetty dan masih banyak lagi.

Table 1 Presentasi Penggunaan Jenis Web Server

Tabel di atas merupakan tabel persentase penggunaan web server yang

digunakan oleh banyak website di internet. Seperti yang dapat Anda lihat,
Apache paling banyak digunakan dibandingkan dengan web server
lainnya. Survei dilakukan dengan mempertimbangkan beberapa poin
berikut:

1. Teknologi yang digunakan pada halaman website.

2. Hanya melibatkan 10 juta website teratas berdasarkan peringkat yang
disediakan oleh Alexa, rata-rata selama 3 bulan.
3. Tidak termasuk subdomain.

19
3.3.7 Keunggulan Masing-masing Web Server

Daftar berikut merupakan keunggulan dari lima besar web server yang
digunakan di seluruh dunia. Keunggulan yang kami coba bahas hanya
sebagian saja. Masih banyak keunggulan-keunggulan lain yang tidak bisa
langsung kami bahas satu persatu. Pada bagian ini tidak kami masukan
untuk layanan Google Web Server, dikarenakan layanan tersebut hanya
digunakan khusus untuk layanan online milik Google.

1. Apache : Pengaturan lebih mudah, Open Source, Komunitas yang

besar
2. NGINX : Ringan, Banyak fitur dan stabil, Performa tinggi
3. IIS : IIS mendukung penuh pada Windows Adanya kemampuan
pengecekan kesalahan, Kerja menggunakan PHP lebih stabil
4. LiteSpeed Web Server : Memiliki pencegahan DDoS, Recover
kesalahan secara langsung, Kompatibel dengan .htaccess

Setiap web server mempunyai keunggulan masing-masing. Apache

web server adalah layanan web server yang saat ini paling populer
digunakan. Apache atau terkadang disebut dengan Apache Tomcat dengan
dukungan pengembang open source dan komunitasnya mampu menjadi
raja dari web server lainnya. Selain dapat disesuaikan dengan kebutuhan
sistem, Apache dikenal kompatibel dengan berbagai sistem karena
memiliki banyak pilihan pengaturan.

Di samping itu, NGINX dikenal memiliki performa tangguh dan juga

ringan, meskipun tidak sepopuler Apache. Hal ini mungkin dikarenakan
kurangnya dukungan komunitas.

20
3.4 Database

3.4.1 Pengertian Database

Database / Basisdata adalah sekumpulan informasi yang diatur dalam

cara tertentu hingga sebuah program komputer dapat dengan cepat
memilih data yang diinginkan. Basisdata dapat diibaratkan sebagai sistem
pengarsipan elektronis. Basisdata tradisional terdiri dari field, record, dan
file. Field adalah item tertentu dari informasi; record adalah sekumpulan
field; dan file adalah kumpulan record. Sebagai contoh, buku telepon dapat
dianalogikan sebuah file yang terdiri dari banyak record dan setiap record
terdiri dari tiga field, yaitu nama, alamat, dan nomor telepon. Konsep
alternatif rancangan basisdata disebut hypertext. Dalam basisdata
hypertext, setiap obyek, apakah itu merupakan teks, gambar atau film,
dapat dihubungkan dengan obyek lainnya. Basisdata hypertext sangat
berguna untuk mengatur informasi yang sangat besar tetapi tidak
digunakan dalam analisis numerik. Untuk mengakses informasi dari
basisdata, diperlukan data base management system (DBMS). DBMS
adalah kumpulan program yang memungkinkan pengguna memasukan,
mengatur, atau memilih data dari basisdata.

3.4.2 Sifat-sifat Database

1. internal yaitu kesatuan (integritas) dari file-file yang terlibat.

2. Terbagi/share yaitu elemen-elemen database dapat dibagikan pada
para user baik secara sendiri-sendiri maupun secara serentak dan pada
waktu yang sama (concurrent sharing).

3.4.3 Tipe Database

Tipe Database Terdapat 12 tipe database, antara lain :

1. Operational database : Database ini menyimpan data rinci yang

21
 diperlukan untuk mendukung operasi dari seluruh organisasi. Mereka
juga disebut subject-area databases (SADB), transaksi database, dan
produksi database. Contoh: database pelanggan, database pribadi,
database inventaris, akuntansi database.

2. Analytical database : Database ini menyimpan data dan informasi yang

diambil dari operasional yang dipilih dan eksternal database. Mereka
terdiri dari data dan informasi yang dirangkum paling dibutuhkan oleh
sebuah organisasi manajemen dan End-user lainnya. Beberapa orang
menyebut analitis multidimensi database sebagai database, manajemen
database, atau informasi database.

3. Data warehouse : Sebuah data warehouse menyimpan data dari saat ini
dan tahun- tahun sebelumnya - data yang diambil dari berbagai database
operasional dari sebuah organisasi.

4. Distributed database : Ini adalah database-kelompok kerja lokal dan

departemen di kantor regional, kantor cabang, pabrik-pabrik dan lokasi
kerja lainnya. Database ini dapat mencakup kedua segmen yaitu
operasional dan user database, serta data yang dihasilkan dan digunakan
hanya pada pengguna situs sendiri.

5. End-user database : Database ini terdiri dari berbagai file data yang
dikembangkan oleh end-user di workstation mereka. Contoh dari ini
adalah koleksi dokumen dalam spreadsheet, word processing dan
bahkan download file.

6. External database : Database ini menyediakan akses ke eksternal, data

milik pribadi online tersedia untuk biaya kepada pengguna akhir dan
organisasi dari layanan komersial. Akses ke kekayaan informasi dari
database eksternal yang tersedia untuk biaya dari layanan online

22
 komersial dan dengan atau tanpa biaya dari banyak sumber di Internet.

7. Hypermedia databases on the web : Ini adalah kumpulan dari halaman-

halaman multimedia yang saling berhubungan di sebuah situs web.
Mereka terdiri dari home page dan halaman hyperlink lain dari
multimedia atau campuran media seperti teks, grafik, gambar foto, klip
video, audio dll.

8. Navigational database : Dalam navigasi database, queries menemukan

benda terutama dengan mengikuti referensi dari objek lain.

9. In-memory databases : Database di memori terutama bergantung pada

memori utama untuk penyimpanan data komputer. Ini berbeda dengan
sistem manajemen database yang menggunakan disk berbasis
mekanisme penyimpanan. Database memori utama lebih cepat daripada
dioptimalkan disk database sejak Optimasi algoritma internal menjadi
lebih sederhana dan lebih sedikit CPU mengeksekusi instruksi.

10. Document-oriented databases : Merupakan program komputer yang

dirancang untuk aplikasi berorientasi dokumen. Sistem ini bisa
diimplementasikan sebagai lapisan di atas sebuah database relasional
atau objek database. Sebagai lawan dari database relasional, dokumen
berbasis database tidak menyimpan data dalam tabel dengan ukuran
seragam kolom untuk setiap record. Sebaliknya, mereka menyimpan
setiap catatan sebagai dokumen yang memiliki karakteristik tertentu.
Sejumlah bidang panjang apapun dapat ditambahkan ke dokumen.
Bidang yang dapat juga berisi beberapa bagian data.

11. Real-time databases Real-time : Database adalah sistem pengolahan

dirancang untuk menangani beban kerja negara yang dapat berubah
terus- menerus. Ini berbeda dari database tradisional yang mengandung

23
 data yang terus- menerus, sebagian besar tidak terpengaruh oleh waktu.

12. Relational Database : Database yang paling umum digunakan saat ini.
Menggunakan meja untuk informasi struktur sehingga mudah untuk
mencari.

3.5 Web Brower

3.5.1 Pengertian Web Browser

Pengertian web browser adalah perangkat lunak atau software yang

digunakan untuk mencari, mengakses dan menampilkan halaman web,
terutama situs-situs website dan konten lain di internet.

web browser menerjemahkan halaman situs web yang dikirim

menggunakan HTTP/HTTPS (Hypertext Transfer Protocol )ataupun FTP
(Protokol Transfer Filie) menjadi konten yang dapat dibaca manusia.

Sebagian besar web browser mendukung plugin-plugin eksternal

untuk mendukung kinerja web browser seperti plugin untuk mendukung
pemutaran video, pemblokiran iklan dll.

3.5.2 Fungsi Web Browser

Fungsi utama web browser adalah sebagai penghubung antara user

dan situs-situs website. Beberapa fungsi web browser dijabarkan secara
singkat dalam list berikut ini:

1. Untuk menampilkan halaman atau situs-situs website.

2. Menerjemahkan script menjadi tampilan yang menarik.
3. Menjamin keamanan situs website yang dikunjungi.

24
 4. Mendukung penyimpanan data halaman secara offline.
5. Memberikan dukungan untuk akses ke mesin-mesin pencari seperti
google, yahoo dll.

3.6 HTML

3.6.1 Pengertian HTML

Pengertian HTML (HyperText Markup Language) adalah bahasa

markup standar yang digunakan untuk membuat sebuah halaman web,
yang kemudian dapat diakses untuk menampilkan berbagai informasi di
dalam sebuah penjelajahan Web Internet (Browser).

Disebut hypertext sebab di dalamnya terdapat sebuah text biasa yang

memiliki fungsi lain, kita bisa membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan meng-klik text
tersebut.

Sedangkan, disebut Markup Language sebab bahasa HTML

menggunakan tanda (mark) yang digunakan untuk menandai bagian-
bagian dari text. Contohnya, text yang terletak di antara tanda tertentu
akan menjadi tebal, dan apabila berada di antara tanda lainnya akan
terlihat besar. Tanda tersebut di kenal dengan sebutan HTML tag.

HTML merupakan sebuah bahasa yang awalnya bahasa yang

sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang
disebut sebagai SGML ( Standard Generalized Markup Language).

25
 Gambar 3 Logo HTML
( https://civitas.uns.ac.id/alvinat/wp-content/uploads/sites/741/2019/03/html5.png )

3.6.2 Sejarah dan Perkembangan HTML

Sejarah HTML atau Hypertext Markup Language telah menjadi

teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee
menciptakan HTML pada tahun 1989 sebagai cara sederhana namun
efektif untuk mengkodekan dokumen elektronik. Bahkan, tujuan awal dari
web browser adalah untuk melayani pembaca untuk membuka dokumen
berformat HTML.

Didalam HTML telah mengalami berbagai perkembangan dari

tiap-tiap versinya. Berikut adalah versi-versi dari perkembangan HTML
tersebut:

1. HTML Versi 2.0, Pada HTML Versi ini, penambahan kualitas HTML
terletak pada kemampuannya untuk menampilkan suatu form pada
dokumen. Dengan adanya form ini, kita dapat memasukkan nama,
alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir
dari adanya web interaktif.

2. HTML Versi 3.0, Versi HTML 3.0 menambahkan beberapa fasilitas

baru seperti FIGURE yang merupakan perkembangan dari IMAGE
untuk meletakkan gambar dan tabel. Selain itu, HTML ini juga

26
 mendukung adanya rumus-rumus matematika dalam dokumennya.
Versi ini yang disebut HTML+- tidak bertahan lama dan segera
digantikan dengan versi 3.2.

3. HTML Versi 3.2, HTML versi ini merupakan HTML yang sering
digunakan. Di dalamnya terdapat suatu teknologi untuk meletakkan
teks di sekeliling gambar, gambar sebagai latar belakang, tabel,
frame, stylesheet dan lain-lain. Selain itu pada HTML versi ini Kita
bisa menggunakan script di luar HTML untuk mendukung kinerja
HTML kita tersebut, seperti Javascript, VBScript dan lain-lain.

4. HTML Versi 4, HTML ini memuat banyak sekali perubahan dan

revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini hampir
terjadi di segala perintah HTML seperti tabel, image, link, text, meta,
imagemaps, form dan lain-lain.

5. HTML Versi 4.01, HTML versi 4.01 merupakan revisi dari HTML
4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil (minor
errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi
standarisasi untuk elemen dan atribut dari script XHTML 1.0.

6. HTML Versi 5.0, Teknologi ini mulai diluncurkan pada tahun 2009,
tetapi pada tanggal 4 Maret 2010 terdapat sebuah informasi bahwa
W3C (World Wide Web Consortium) dan IETF (Internet Engineering
Task Force) yaitu sebuah organisasi yang menangani HTML sejak
versi 2.0 telah mengmbangkan versi HTML terbaru, yaitu versi 5.0.

HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang

merupakan penggabungan antara CSS, HTML itu sendiri dengan
JavaScript. Beberapa kelebihan yang dimiliki oleh HTML5 adalah :

27
1. Cleaner code, Karena sebagian besar kode telah termasuk di dalam
sintaks HTML5, maka kode nampak terlihat lebih sederhana daripada
penggabungan antara HTML, CSS dan Java Script.

2. Greater consistency, HTML5 telah melakukan banyak sekali

penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih
sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat
developer terbantu dalam meningkatkan konsistensi dalam
membangun sebuah web.

3. Improve Semantics, Berbagai elemen kode di dalam HTML5 yang

telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih
ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header,
nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas
maksud serta tujuannya. Selain itu juga terbentuk dalam sebuah
“machine readible format”.

4. Improved Accessibility, Teknologi HTML5 yang memudahkan

struktur pembangunan sebuah web, maka developer dapat
membangun pemahaman yang lebih detil mengenai halaman web.

5. Client-side Database, HTML5 menyediakan model database SQL

yang baru dengan API yang dapat dibangun dalam konsep lokal,
dalam hal ini di sisi client.

6. Geolocation, HTML5 mempunyai API yang terintegrasi terhadap

geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas
lain seperti Google Latitude pada IPhone.

7. Offline Aplication Cache, Pengguna dapat terus melakukan interaksi

dengan aplikasi meskipun mereka terputus dari jaringan internet.

28
 8. Smarter Forms, Terdapat semacam reguler expression (regex) yang
membuat form mampu mengenali secara lebih baik tentang input,
validasi data dan interaksi dengan elemen lain (misal : format email,
password dll).

9. Sharper focus on Web Application Requiments, HTML5 membuat

sebuah mekanisme yang lebih mudah dalam hal pembuatan front end,
aplikasi chat, tools drag and drop, video player, pengolah grafis dan
masih banyak lagi.

3.7 CSS

3.7.1 Pengertian CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web
(style sheet language) yang mengontrol format tampilan sebuah halaman
web yang ditulis dengan menggunakan penanda (markup language).
Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan
XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumen
XML, termasuk SVG dan XUL bahkan ANDROID.

Gambar 4 Logo CSS

( https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200p
x-CSS3_logo_and_wordmark.svg.png )

29
 CSS dibuat untuk memisahkan konten utama dengan tampilan
dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat
meningkatkan daya akses konten pada web, menyediakan lebih banyak
fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik sebuah
tampilan, memungkinkan untuk membagi halaman untuk sebuah
formatting dan mengurangi kerumitan dalam penulisan kode dan struktur
dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam

berbagai style dengan menggunakan metode pembawaan yang berbeda
pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu,
pemilik konten web bisa menentukan link yang menghubungkan konten
dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari

dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun
pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk
dalam desain web diantaranya adalah warna, ukuran dan formatting.
Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi
memungkinkan untuk melakukan pengulangan pada tampilan-tampilan
tertentu dalam suatu web, sehingga akan memudahkan dalam membuat
halaman web yang banyak, yang pada akhirnya dapat memangkas waktu
pembuatan web.

Fungsi utama css adalah merancang, merubah, mendesain,

membentuk halaman website. Isi dari halaman website adalah tag-tag
html, logikanya css itu dapat merubah tag-tag html (yang sederhana)
sehingga menjadi lebih fungsional dan menarik.

30
3.7.2 Sejarah dan Perkembangan CSS

CSS pertama kali bermula sejak munculnya SGML pada tahun

1970-an. Sejak itu, CSS mengalami perkembangan yang sangat pesat.
Format dasar CSS yang banyak digunakan sekarang ini merupakan ide
dari seorang programmer bernama Hakon Wium Lie yang tertuang dalam
proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan
oktober 1994 (dalam konferensi W3C di Chacigo. Illinois).

Kemudian, beliau bersama dengan Bert Bos mengembangkan suatu

standart CSS. Pada tahun 1996, SCC resmi dipublikasikan. Pengerjaan
Proyek ini juga didukung oleh seorang progamer Thomas Reardon dari
perusahaan software ternama, Microsoft. Nama CSS didapat dari fakta
bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child)
pada setiap style.

CSS sendiri merupakan sebuah teknologi internet yang

direkomendasikan oleh World Wide Web Consortium atau W3C pada
tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape
melepas browser terbaru mereka yang telah sesuai atau paling tidak
hampir mendekati dengan standar CSS.Versi untuk saat ini ada 3 versi dari
CSS, yaitu CSS1, CSS2, dan CSS3.
Adapun perkembangan dari versi-versi CSS yang dibuat sampai
sekarang sebagai berikut :

1. CSS 1, Pada tanggal 17 Agustus 1996 World Wide Web Consortium

(W3C) menetapkan CSS sebagai bahasa pemrograman standard
dalam pembuatan web. Tujuannya adalah untuk mengurangi
pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena
kedua browser tersebut sedang bersaing mengembangkan tag sendiri

31
 untuk mengatur tampilan web. CSS 1 mendukung pengaturan
tampilan dalam hal Font (Jenis ketebalan), Warna, teks, background
dan elemen lainnya, Text attributes, misalnya spasi antar baris, kata
dan huruf, Posisi teks, gambar, table dan elemen lainnya, Margin,
border dan padding.

2. CSS 2, Pada tahun 1998, W3C menyempurnakan CSS tahap awal

dengan menciptakan standard CSS 2 yang menjadi standard hingga
saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1
dan diperluas dengan penekanan pada International Accessibiality
and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan
untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer.

3. CSS 3, adalah versi terbaru dari CSS yang mampu melakukan banyak
hal dalam mendesain website. CSS 3 dapat melakukan animasi pada
halaman website, diantaranya animasi warna dan animasi 3D. Dengan
CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya
pada smartphone dengan dukungan fitur baru yakni media query.
Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background,
border-radius, drop-shadow, border-image, CSS-Math dan CSS
Object Model. Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program

sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan

"Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat

diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut

32
 yang tumpul dan bayangan.

3.8 PHP

3.8.1 Pengertian PHP

Hypertext Preprocessor atau di singkat PHP adalah suatu bahasa

pemerograman yang digunakan untuk membuat web dinamis, walau bisa
juga digunakan untuk membuat program lain. Tentunya bahasa
pemerograman PHP berbeda dengan HTML, pada PHP Script/kode yang
di buat tidak dapat di tampilkan pada halaman/muka website begitu saja,
tapi harus diproses terlebih dahulu oleh web server lalu di tampilkan
dalam bentuk halaman website di web browser, Script PHP juga dapat di
sisipkan pada HTML dan script PHP selalu diawali dengan <?php dan di
akhiri dengan ?>. Manajamen database yang biasanya digunakan untuk
pemerograman PHP misalnya seperti MySQL, tapi ada juga yang
menggunakan Oracle, Microsoft Access, dan lain-lain.

PHP disebut juga sebagai bahasa pemerograman script server side,

karena PHP di proses pada komputer server.

Gambar 5 Logo PHP

(http://2.bp.blogspot.com/-b9uaEiBt060/T518NOqyIeI/AAAAAAAAA2I/wJc3m6P1U8M/s1600/php-logo.jpg)

Tepatnya tahun 1995, Rasmus Lerdorf mengembangkan bahasa

pemerograman PHP, dan saat ini dikelola oleh The PHP Group. Selain

33
digunakan untuk pemrograman web dinamis PHP juga dapat di gunakan
untuk membangun sebuah CMS. 

3.8.2 Penjelasan dan Perkembangan PHP

PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer

C. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang
wujudnya berupa sekumpulan script yang digunakan untuk mengolah data
form dari web. Jadi, awal mula PHP digunakannya untuk menghitung
jumlah pengunjung di dalam webnya.

Dengan alasan untuk meningkatkan performa, Rasmus Lerdorf

membuat ulang kode program tersebut dalam bahasa C. Lerdorf menyebut
kode program ini sebagai Personal Home Page. Versi ini pertama kali
keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang
dibuatnya untuk membuat halaman webnya menjadi dinamis. Selanjutnya
Rasmus merilis kode sumber tersebut untuk umum dan menamakannya
PHP/FI, kependekan dari Hypertext Preprocessing’/Form Interpreter.

Dengan perilisan kode sumber ini menjadi open source, maka banyak
programmer yang tertarik untuk ikut mengembangkan PHP. Kemudian
pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya
telah dapat mengakses database dan dapat terintegrasi dengan HTML.
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 1998 tepatnya pada
tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh
Rasmus sendiri bersama kelompok pengembang softwarenya.

PHP versi 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang
lebih lengkap lagi dibandingkan dengan versi sebelumnya. Perubahan

34
yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine
yang dibuat oleh Zeev Suraski dan Andi Gutmans yang merupakan
penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in
HTTP session, tidak lagi menggunakan library tambahan seperti pada
PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-
aplikasi yang dijalankan di atas teknologi web. Dalam hal ini, aplikasi
pada umumnya akan memberikan hasil pada web browser, tetapi
prosesnya secara keseluruhan dijalankan web server.

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 berorientasi objek ke dalam PHP untuk
menjawab perkembangan bahasa pemrograman ke arah paradigma
berorientasi objek.

Versi lanjutan dari PHP, yakni PHP 6.x sebenarnya telah lama
dikembangkan, bahkan sejak tahun 2005. Fokus pengembangan PHP 6
terutama dalam mendukung Unicode, agar PHP bisa mendukung berbagai
jenis karakter bahasa non-latin. Namun dikarenakan beberapa alasan
seperti kurangnya programmer, dan performa yang tidak memuaskan,
pengembangan PHP 6 dihentikan dan fitur yang ada dimasukkan ke dalam
PHP 5.

Pada tahun 2014, sebuah proyek lanjutan PHP mulai mengemuka,

yakni PHP7 yang berkembang dari proyek experimen yang dinamakan
PHPNG (PHP Next Generation). Proyek PHPNG bertujuan untuk
menyusun ulang kode PHP untuk meningkatkan performa.

35
 Pada Juli 2014, sebuah percobaan mendapati hasil bahwa PHPNG
mengalami peningkatan performa hampir 100% dari versi PHP
sebelumnya.

3.9 JavaScript

3.9.1 Pengertian JavaScript

JavaScript adalah bahasa skrip yang populer di internet dan dapat

bekerja di sebagian besar penjelajah web populer seperti Internet Explorer
(IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat
disisipkan dalam halaman web menggunakan tag SCRIPT.

Javascript adalah sebuah bahasa komputer atau kode pemrograman

yang digunakan pada website agar website tersebut menjadi lebih
interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client
side. Penggunaan kode javascript pada sebuah website bersifat opsional,
artinya tidak harus selalu ada. Namun, website-website maupun blog
modern saat ini hampir semuanya menggunakan kode javascript walaupun
sedikit.

Gambar 6 Logo JavaScript

(https://miro.medium.com/max/2104/1*DN7ToydkJZEdVaJVK_Nhvw.png)

JavaScript adalah program dalam bentuk script, yang akan dijalankan

oleh interpreter yang telah ditanamkan ke dalam browser web, sehingga

36
browser web dapat mengeksekusi program Javascript. Program Javascript
disisipkan ke dalam dokumen HTML dengan ditandai dengan tag yang
diawali dengan <script> dan diakhiri dengan </script>.
Fungsi adalah salah satu bagian yang paling indah dari Javascript.
Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas
pertama (first class function). Fungsi dapat disimpan dalam variabel,
dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk
fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini
membuka banyak kesempatan kepada pengembang untuk menuliskan
kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan
dan indah.

Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita
memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi
tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan
kembali kode (code reuse) dan penyimpanan informasi (information
hiding). Implementasi fungsi kelas pertama juga memungkinkan kita
menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti
layaknya sebuah lego. Dukungan terhadap pemrograman berorientasi
objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku
tertentu dari sebuah objek.

Ada 3 macam cara penulidan tag javascript, yaitu :

1. Menuliskan Tag dengan diawali <script type=”text/javascript” > dan

diakhir dengan </script> atribut yang menginformasikan kepada
browser bahwaprogram script yang ada dalam tag tersebut adalah
javascript dalam format text.
2. Menuliskan Tag dengan diawali <script language=”javascript” > dan
diakhir dengan </script> atribut ini digunakan dengan tujuan untuk
menentukan versi dari javascript yang digunakan, sebagai contoh

37
 <script language=”javascript1.2”> menyatakan bahwa javascript yang
kita gunakan adalah versi 2.1.
3. Menuliskan Tag dengan diawali <script language=”javascript”
type=”text/javascript” > dan diakhir dengan </script> cara campuran
ini yaitu penulisan lama dan penulisan baru disatukan, dilakukan
untuk mengantisipasi pengakses halaman web yang masih
menggunakan browser web yang mendukung javascript, tetapi belum
mendukung HTML

3.9.2 Sejarah dan Perkembangan JavaScript

JavaScript dibuat dan didesain selama sepuluh hari oleh Brandan Eich,
seorang karyawan Netscape, pada bulan September 1995. Awalnya bahasa
pemrograman ini disebut Mocha, kemudian diganti ke Mona, lalu
LiveScript sebelum akhirnya resmi menyandang nama JavaScript. Versi
pertama dari bahasa ini hanya terbatas di kalangan Netscape saja.
Fungsionalitas yang ditawarkan pun terbatas. Namun, JavaScript terus
dikembangkan oleh komunitas developer yang tak henti-hentinya
mengerjakan bahasa pemrograman ini.

Pada tahun 1996, JavaScript secara resmi disebut sebagai

ECMAScript, di mana ECMAScript 2 diluncurkan pada tahun 1998 dan
ECMAScript 3 diperkenalkan pada tahun 1999. ECMAScript tersebut
dikembangkan hingga akhirnya menjadi JavaScript sebagaimana yang kita
kenal saat ini. Tak hanya lintas browser, JavaScript juga bisa digunakan di
berbagai perangkat, termasuk perangkat mobile dan komputer.

Sejak saat itu, JavaScript terus bertumbuh dan berkembang. Pada

akhirnya di tahun 2016, sebanyak 92% website diketahui menggunakan
JavaScript. Hanya dala kurun waktu dua puluh tahun, JavaScript telah
beralih dari bahasa pemrograman yang serba terbatas dan ‘primitif’

38
 menjadi salah satu tool terpenting bagi web developer. Jika sebagian besar
waktu dihabiskan untuk berselancar di internet, maka Anda pastinya sudah
sangat familiar dengan JavaScript.

3.10 MYSQL

3.10.1 Pengertian MYSQL

MySQL adalah sebuah database management system (manajemen

basis data) menggunakan perintah dasar SQL (Structured Query
Language) yang cukup terkenal. Database management system (DBMS)
MySQL multi pengguna dan multi alur ini sudah dipakai lebih dari 6 juta
pengguna di seluruh dunia.

MySQL adalah DBMS yang open source dengan dua bentuk lisensi,
yaitu Free Software (perangkat lunak bebas) dan Shareware (perangkat
lunak berpemilik yang penggunaannya terbatas).

Jadi MySQL adalah database server yang gratis dengan lisensi GNU
General Public License (GPL) sehingga dapat Anda pakai untuk keperluan
pribadi atau komersil tanpa harus membayar lisensi yang ada.

Gambar 7 Logo MYSQL

( http://www.candra.web.id/wp-content/uploads/2011/10/logomysql.gif?w=640 )

39
 Seperti yang sudah disinggung di atas, MySQL masuk ke dalam jenis
RDBMS (Relational Database Management System). Maka dari itu, istilah
semacam baris, kolom, tabel, berlaku pada MySQL. Contohnya di dalam
MySQL sebuah database terdapat satu atau beberapa tabel.

SQL sendiri merupakan suatu bahasa yang dipakai di dalam

pengambilan data pada relational database atau database yang terstruktur.
Jadi MySQL adalah database management system yang menggunakan
bahasa SQL sebagai bahasa penghubung antara perangkat lunak aplikasi
dengan database server.

3.10.2 Sejarah dan Perkembangan MYSQL

MySQL dikembangkan oleh sebuah perusahaan Swedia bernama

MySQL AB, yang kala itu bernama TcX DataKonsult AB, sejak sekitar
1994–1995, meski cikal bakal kodenya bisa disebut sudah ada sejak 1979.
Tujuan mula-mula TcX membuat MySQL pada waktu itu juga memang
untuk mengembangkan aplikasi Web untuk klien TcX adalah perusahaan
pengembang software dan konsultan database. Kala itu Michael Widenius,
atau “Monty”, pengembang satu-satunya di TcX, memiliki aplikasi
UNIREG dan rutin ISAM yang dibuat sendiri dan sedang mencari
antarmuka SQL untuk ditempelkan di atasnya.

MySQL adalah sebuah perangkat lunak sistem manajemen basis data

SQL (bahasa Inggris: database management system) atau DBMS yang
multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia.
MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis
dibawah lisensi GNU General Public License (GPL), tetapi mereka juga
menjual dibawah lisensi komersial untuk kasus-kasus dimana
penggunaannya tidak cocok dengan penggunaan GPL.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat

40
lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode
sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan
disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana
memegang hak cipta hampir atas semua kode sumbernya.

Awalnya TcX memakai mSQL, atau “mini SQL”. Barangkali mSQL

adalah satu-satunya kode database open source yang tersedia dan cukup
sederhana saat itu, meskipun sudah ada Postgres. Namun ternyata,
menurut Monty, mSQL tidaklah cukup cepat maupun fleksibel. Versi
pertama mSQL bahkan tidak memiliki indeks. Setelah mencoba
menghubungi David Hughes pembuat mSQL dan ternyata mengetahui
bahwa David tengah sibuk mengembangkan versi dua, maka keputusan
yang diambil Monty yaitu membuat sendiri mesin SQL yang
antarmukanya mirip dengan mSQL tapi memiliki kemampuan yang lebih
sesuai kebutuhan.

Kemudian lahirlah MySQL. Nama MySQL (baca: mai és kju él) tidak
jelas diambil dari mana. Ada yang bilang ini diambil dari huruf pertama
dan terakhir nama panggilan Michael Widenius, Monty. Ada lagi yang
bilang kata My diambil dari nama putri Monty, yang memang diberi nama
My karena Monty memang aslinya seorang Finlandia.

MySQL versi 1.0 dirilis Mei 1996 secara terbatas kepada empat
orang. Baru di bulan Oktober versi 3.11.0 dilepas ke publik. Namun mula-
mula kode ini tidak diberikan di bawah lisensi General Public License,
melainkan lisensi khusus yang intinya kurang lebih begini: “Source code
MySQL dapat dilihat dan gratis, serta server MySQL dapat dipakai tanpa
biaya tapi hanya untuk kebutuhan nonkomersial. Untuk kebutuhan
komersial (mis: mengemas dan menjual MySQL, atau menyertakan
MySQL dalam program komersial lain) Anda harus bayar lisensi.”
Sementara distribusi Windows MySQL sendiri dirilis secara shareware.

41
 Barulah di versi-versi akhir seri 3.22 sepanjang 1998–1999 MySQL
menjadi semakin popular dan dilirik orang. Stabilitasnya sudah baik.
Kecepatannya meningkat. Sudah tersedia di berbagai platform, termasuk
Windows. Seri 3.22 ini banyak dipakai di berbagai instalasi.

Barulah pada Juni 2000 MySQL AB mengumumkan bahwa sejak

versi 3.23.19, MySQL adalah software bebas berlisensi GPL. Artinya,
“Source code MySQL dapat dilihat dan gratis, serta server MySQL dapat
dipakai tanpa biaya untuk kebutuhan apapun. Tapi jika Anda
memodifikasi source code, Anda juga harus melepasnya di bawah lisensi
yang sama, yaitu GPL.” Kini perusahaan MySQL AB, yang
beranggotakan sekitar 10 programmer dan 10 karyawan lain itu,
memperoleh pemasukan terutama dari jasa konsultasi seputar MySQL.
Versi publik pertama, yang hanya berjalan di Linux dan Solaris serta
sebagian besar masih belum terdokumentasi, dengan berangsur-angsur
diperbaiki dan ditambah fitur demi fiturnya tapi tetap dengan fokus utama
pengembangan pada kelangsingan dan kecepatan. Artinya, fitur-fitur yang
menyebabkan MySQL menjadi lambat tidaklah ditambahkan, atau ditunda
dulu, atau ditambahkan tapi menjadi fitur yang opsional.

Versi awal MySQL ini, meski sudah bisa dipakai untuk aplikasi Web
sederhana, belumlah memadai sama sekali untuk aplikasi bisnis hingga
sekarang, sehingga MySQL AB tetap memberikan dukungan technical
support untuk seri ini.

Setelah itu, pada bula Agustus 2002, Muncullah MySQL versi 4.0
beta yang dirilis pada bulan Maret 2003, lalu versi 4.0 beta dikembangkan
menjadi versi 4.1 beta yang dirilis pada bulan juni 2004. Kemudian pada
bulan maret 2005 muncullah MySQL versi 5.0 telah dirilis. Bahkan
MySQL AB memberikan embelembel recommended pada MySQL 5.0

42
 yang akhirnya diperbarui menjadi MySQL versi 5.1 Versi 5.1 saat ini
sedang dalam tahap re produksi sejak November 2005. Versi 5.1 saat ini
sedang dalam tahap re produksi sejak November 2005 dan terus dilakukan
pengembangan hingga sekarang ini.

3.11 SQL

3.11.1 Pengertian SQL

Structured Query Language atau biasa disebut SQL adalah suatu

bahasa khusus yang digunakan untuk mengakses data-data yang ada di
dalam sebuah database relasional. SQL adalah bahasa komputer yang
menggunakan standar ANSI (American Nasional Standard Institute) yang
dipakai dalam manajemen database relasional.

Dengan SQL atau bisa juga disebut query kita dapat memanipulasi
atau mengedit database sesuai yang kita kehendaki. seperti menjalankan
query untuk mengambil data, menambah data, memperbarui data dan
menghapus data.

Sampai sekarang hampir keseluruhan server database maupun

software-software database lainnya mengenal serta mampu mengartikan
bahasa SQL. oleh karenanya belajar bahasa SQL sangat penting bagi yang
bergelut dibidang IT maupun yang selalu bersinggungan dengan database
relasional.

Dalam implementasi SQL terdapat berbagai perintah yang digunakan

untuk mengakses serta manajemen data yang terdapat dalam database.
Perintah-perintah tersebut dapat dikelompokkan dalam tiga sub perintah,
Tiga sub perintah tersebut adalah :

43
1. DDL (Data Definition Language).
2. DML (Data Manipulation Language).
3. DCL (Data Control Language).

3.11.1.1 DDL (Data Definition Language)

DDL merupakan perintah dasar dari bahasa SQL yang

diperuntukkan untuk membuat sebuah struktur database baik dalam
pembuatan database maupun table. berikut beberapa perintah yang
termasuk dalam DDL, yaitu :

1. CREATE : perintah ini kita pakai untuk membuat, baik untuk

membuat database baru, table baru maupun kolom baru. Contoh
query-nya : CREATE DATABASE nama_database;.
2. ALTER : perintah ini dipakai saat kita ingin mengubah struktur
table yang sebelumnya sudah kita buat, seperti mengubah
kolom, mengubah nama table, menambah maupun menghapus
kolom serta menambah atribut pada sebuah kolom. Contoh
query-nya : ALTER TABLE nama_table ADD nama_kolom
type_data;.
3. RENAME : perintah RENAME digunakan untuk merubah nama
dari suatu table maupun kolom. Contoh query-nya: RENAME
TABLE nama_table_lama TO nama_table_baru;.
4. DROP : perintah ini kita gunakan untuk menghapus, baik untuk
menghapus database, table, kolom, maupun index. Contoh
query-nya : DROP DATABASE nama_database;.
5. SHOW : perintah ini digunakan untuk menampilkan tables.
Contoh query nya: SHOW TABLES;.

44
3.11.1.2 DML (Data Manipulation Language)

DML merupakan perintah-perintah dari bahasa SQL yang

digunakan untuk memanipulasi data yang ada di database. Berikut
perintah yang termasuk dalam DML :

1. INSERT : perintah INSERT ini digunakan untuk memasukkan

record baru kedalam suatu table dalam database. Contoh query-
nya: INSERT INTO nama_table VALUES (data1,data2,data3,…
dst);.
2. SELECT : perintah SELECT digunakan untuk menampilkan dan
mengambil data dari suatu table. perintah ini tidak hanya
menampilkan data dari satu table tapi juga bisa lebih dari satu
table dengan menggunakan relasi. Contoh query nya : SELECT
nama_kolom1, nama_kolom2 FROM nama_table;.
3. UPDATE : perintah UPDATE ini digunakan jika ingin
memperbarui data pada sebuah table, misalkan ada kesalahan
dalam memasukkan record, kita tidak perlu menghapusnya
cukup kita perbaiki dengan perintah tersebut. Contoh query-nya:
UPDATE nama_table SET nama_kolom1=data1 WHERE
nama_kolom=data;.
4. DELETE : perintah DELETE ini digunakan untuk menghapus
suatu record dari sebuah table. Contoh query-nya : DELETE
FROM nama_table WHERE nama_kolom=data;.

3.11.1.3 DCL (Data Control Language)

DCL adalah perintah SQL yang digunakan untuk mengatur hak

akses user, baik terhadap database maupun terhadap table dan field-field
yang ada. Dengan begitu admin database bisa menjaga kerahasiaan
suatu database. Berikut perintah yang termasuk dalam DCL :

45
 1. GRANT : perintah GRANT digunakan saat admin database
ingin memberikan hak akses ke salah satu user. Hak akses
tersebut bisa diatur atau dibatasi, misal nya user hanya diberi hak
akses untuk UPDATE saja. Bisa juga admin memberi hak akses
untuk merubah suatu table, baik INSERT, SELECT, UPDATE
maupun DELETE.

2. REVOKE : perintah REVOKE adalah kebalikan dari perintah

GRANT yaitu digunakan untuk mencabut atau menghapus hak
akses yang telah diberikan kepada salah satu user.

SQL (Structured Query Language) seperti sekilas yang sudah

dijelaskan di pengertian SQL diatas, memiliki beberapa fungsi sebagai
berikut :

1. SQL memungkinkan kita untuk mengakses dan mengubah

database.
2. SQL dapat menjalankan query terhadap database.
3. SQL bisa mengambil data dari database.
4. SQL bisa menyisipkan data ke dalam database.
5. SQL bisa memperbarui data ke dalam database.
6. SQL bisa menghapus data pada database.
7. SQL bisa membuat prosedur baru yang akan tersimpan di
database.
8. SQL dapat mengatur hak akses pada table, prosedur, dan hal-hal
lainnya.

Untuk menguasai berbagai hal tentang database atau basis data kita
dituntut dan wajib bisa menguasai bahasa SQL, dari query – query dasar
sampai yang tingkat kerumitannya luar biasa. oleh karenanya semoga
ulasan ini bisa membantu pembaca untuk lebih mengenal dan memahami

46
 dasar dari SQL. mulai dari pengertian sql, sejarahnya sampai dengan
fungsinya.

3.11.2 Sejarah dan Perkembangan SQL

Bila kita berbicara mengenai sejarah munculnya dan pengertian SQL

dapat mengacu pada artikel dari Jhonny Oracle yang merupakan salah
seorang peneliti di IBM. Artikel tersebut membahas mengenai ide
pembuatan sebuah basis data relasional yang muncul di tahun 1970,
tepatnya pada bulan Juni. Pada artikel tersebut juga dibahas mengenai
kemungkinan di masa mendatang untuk menciptakan sebuah bahasa data
yang standar. Oleh karena itulah kemudian muncul istilah SEQUEL yang
mengacu pada singkatan dari Structured English Query Language.

Selang beberapa waktu, IBM lantas mencanangkan proyek basis data

relasional SEQUEL dan karena namanya cukup sulit dieja maka disingkat
menjadi SQL. Setelah proses standardisasi selesari tahun 1986, lalu SQL
mengalami perbaikan tahun 1989. Tahun 1992 muncul versi SQL92 dan di
tahun 1999 dengan berbagai pembaharuan muncullah SQL99. Namun,
dalam dunia IT SQL yang sering digunakan mereferensikan pada SQL92.
Meski begitu, sampai sekarang pun sebenarnya tidak ada sebuah server
berbasis data yang menggunakan maupun mendukung SQL99. Ini lebih
tergantung pada dialek masing-masing server yang digunakan.

3.12 XAMPP

3.12.1 Pengertian XAMPP

XAMPP adalah perangkat lunak bebas, yang mendukung banyak

system operasi, merupakan kompilasi dari beberapa program. XAMPP
merupakan tool yang menyediakan paket perangkat lunak ke dalam satu
buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan

47
instalasi dan konfigurasi web server Apache, PHP dan MySQL secara
manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara
otomatis untuk anda atau auto konfigurasi.

XAMPP merupakan salah satu paket installasi Apache, PHP dan

MySQL instant yang dapat kita gunakan untuk membantu proses installasi
ketiga produk tersebut. Selain paket installasi instant XAMPP versi 1.6.4
juga memberikan fasiltias pilihan pengunaan PHP4 atau PHP5. Untuk
berpindah versi PHP yang ingin digunakan juga sangat mudah dilakukan
dengan mengunakan bantuan PHP-Switch yang telah disertakan oleh
XAMPP, dan yang terpenting XAMPP bersifat free atau gratis untuk
digunakan.

Gambar 8 Logo Xampp

( https://pngimage.net/wp-content/uploads/2018/06/xampp-logo-png-2.png )

XAMPP merupakan tool yang menyediakan paket perangkat lunak ke

dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi
melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL
secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya
secara otomatis. Merupakan web server yang mudah digunakan yang dapat
melayani tampilan halaman web yang dinamis. Untuk mendapatkanya
dapat mendownload langsung dari web resminya.

48
 3.12.2 Sejarah dan Perkembangan XAMPP

XAMPP merupakan pengembangan dari LAMP (Linux Apache,

MySQL, PHP and PERL), XAMPP ini merupakan project non-profit
yang dikembangkan oleh Apache Friends yang didirikan Kai ‘Oswalad’
Seidler dan Kay Vogelgesang pada tahun 2002, project mereka ini
bertujuan mempromosikan pengunaan Apache web server.

3.13 Visual Studio Code

Visual Studio Code adalah editor kode sumber yang dikembangkan oleh
Microsoft untuk Windows, Linux dan macOS. Ini termasuk dukungan untuk
debugging, kontrol Git yang tertanam dan GitHub, penyorotan sintaksis,
penyelesaian kode cerdas, snippet, dan refactoring kode. Ini sangat dapat
disesuaikan, memungkinkan pengguna untuk mengubah tema, pintasan
keyboard, preferensi, dan menginstal ekstensi yang menambah fungsionalitas
tambahan. Kode sumbernya gratis dan open source dan dirilis di bawah Lisensi
MIT yang permisif. Biner yang dikompilasi adalah freeware dan gratis untuk
penggunaan pribadi atau komersial.

.
Gambar 9 Logo Visual Studio Code
( https://miro.medium.com/max/600/1*u9Rw2zT1kQl0I0Oa-9vc_g.png )

Visual Studio Code didasarkan pada Electron, sebuah kerangka kerja yang
digunakan untuk menggunakan aplikasi Node.js untuk desktop yang berjalan
pada mesin tata letak Blink. Meskipun menggunakan kerangka Elektron,
perangkat lunak tidak menggunakan Atom dan sebagai gantinya
mempekerjakan komponen editor yang sama (kode nama "Monaco") yang

49
 digunakan dalam Azure DevOps (sebelumnya disebut Visual Studio Online dan
Layanan Tim Visual Studio).

Dalam Survei Pengembang Stack Overflow 2019, Visual Studio Code

mendapat peringkat alat lingkungan pengembang paling populer, dengan 50,7%
dari 87.317 responden mengklaim menggunakannya.

3.14 PHPMyAdmin

PhpMyAdmin adalah sebuah aplikasi open source yang berfungsi untuk

memudahkan manajemen MySQL. Dengan menggunakan PhpMyAdmin, anda
dapat membuat database, membuat tabel, menginsert, menghapus dan
mengupdate data dengan GUI dan terasa lebih mudah, tanpa perlu mengetikkan
perintah SQL secara manual.

Gambar 10 Logo Phpmyadmin

( https://i0.wp.com/fossnaija.com/wp-content/uploads/2017/08/phpmyadmin.png?ssl=1 )

PHPMyAdmin merupakan front-end MySQL berbasis web.

PHPMyAdmin dibuat dengan menggunakan PHP. Saat ini, PHPMyAdmin
banyak digunakan dalam hampir semua penyedia hosting yang ada di internet.
PHPMyAdmin mendukung berbagai fitur administrasi MySQL termasuk
manipulasi database, tabel, index dan juga dapat mengeksport data ke dalam
berbagai format data. PHPMyAdmin juga tersedia dalam 50 bahasa lebih,
termasuk bahasa Indonesia.

Dalam hal ini anda akan melihat betapa banyaknya manfaat yang akan bisa

50
 anda dapatkan di dalamnya. Manfaat tersebut yang jelas adalah memberikan
efisiensi bagi para pengembang atau web developer untuk menggunakan semua
perintah atau tulisan yang dituliskan dalam bahasa SQL yang sudah tersedia
didalamnya. Yang harus anda lakukan hanya tinggal mengelolah atau
mengcopy-nya saja sesuai kebutuhan anda saat ini. Yang jelas hal tersebut akan
memberikan kepada anda kemudahan yang lebih efektif untuk membuat
database langsung yang menuju kepada web server.

Dengan adanya fasilitas import tersebut, anda pun akan mampu

memanfaatkannya untuk membuat database dengan ekstensi SQL yang ada di
dalamnya. Pada versi offline, anda hanya tinggal memindahkannya saja ke versi
web yang sudah tersedia. Hal ini juga bisa disesuaikan saja sesuai dengan
kebijakan dari penyedia server terkait di dalamnya. Untuk pembuatan database
dan table tersebut juga bisa disesuaikan dengan aktivitas dasar yang tersedia
didalamnya, misalnya saja menghapus data, insert data, edit value, dan lain
sebagainya. Selain itu, perlu dipertimbangkan juga tentang menentukan primary
dan juga foreign key yang ada di dalamnya. Anda juga harus
mempertimbangkan mengenai kegiatan relasi data yang terdapat pada tabel-
tabel yang ada di dalamnya.

3.15 JQuery

3.15.1 Pengertian JQuery

JQuery adalah library JavaScript yang cukup andal, ringkas, dan

mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di
HTML seperti perubahan dan manipulasi dokumen, event handling,
animasi, dan Ajax dapat menjadi lebih sederhana. Hal ini didukung dengan
API yang mudah digunakan dan dapat bekerja di berbagai macam
browser.

51
 Menggunakan kombinasi versatility (keserbagunaan) dan extensibillty
(bisa dikembangkan), jQuery sudah mengubah cara ribuan bahkan jutaan
developer menggunakan bahasa pemrograman JavaScript. Ini
membuktikan bahwa jQuery merupakan salah satu library yang cukup
populer di JavaScript.

Jadi apa fungsi JQuery? Singkatnya, JQuery berfungsi sebagai library

JavaScript yang akan membantu Anda mengatur interaksi antara
JavaScript dengan HTML yang berjalan di sisi klien.

Gambar 11 Logo JQuery

( https://miro.medium.com/max/500/1*qTld1o0TCh7lEB-BZBXMdw.png )

JQuery mempunyai beberapa fitur unggulan, berikut beberapa fitur

unggulan JQuery yang perlu Anda ketahui:

1. Manipulasi HTML/DOM
2. Manipulasi CSS
3. HTML Event Methods
4. Efek dan Animasi
5. AJAX
6. CSS3 Compliant
7. Cross-Browser

Selain itu keunggulan utama dari penggunaan jQuery adalah

52
kesederhanaannya. Anda hanya membutuhkan sedikit pengetahuan
mengenai pemrograman untuk membuat berbagai macam animasi yang
menarik.

Library ini juga sangat fleksibel karena pengguna dapat menambahkan

plugin. Jadi ketika Anda tidak tahu bagaimana mengatur sebuah baris kode
menggunakan CSS, Anda dapat melakukannya menggunakan jQuery.

Library ini juga menjadi solusi cepat untuk menyelesaikan

permasalahan Anda dalam hal kecepatan. Selain itu, library ini merupakan
solusi yang pantas untuk dicoba. Melalui JQuery dan didukung kerja sama
sebuah tim yang solid membuat proses pengembangan menjadi lebih cepat
dan efektif, yang mana proses ini dapat menghemat biaya di dalam proses
pengambangan.

3.15.2 Sejarah Perkembangan JQuery

Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada
tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon
merasa kode kode behavior tidak elegan dan bahkan sangat jelek. maka dia
mulai memikirkan cara membuat library yang handal dan ringan untuk
javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah
versi pertama dari Jquery dan sampai sekarang masih terus dikembangkan
dan disempurnakan.

Semenjak dirilis pertama kali oleh john Resig, jQuery telah mencuri
perhatian para developer web. Buktinya, pada tahun-tahun berikutnya
jQuery telah banyak digunakan oleh website – website terkemuka di dunia
seperti Google, Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC,
ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe
Apple, WordPress, Mozila, Netflix , Digg, Time, dan masih banyak lagi.
Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio

53
21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk
Pincuran.com tentunya dan lain-lain.

Sekarang JQuery dikembangkan oleh team developer yang dipimpin

oleh Dave Metvin.Dipakai oleh lebih dari 65% dari 10 juta pengguna
website yang paling sering dikunjungi. JQuery menjadi Library Javascript
yang paling popular Sekarang.

Script JQuery dibuat untuk memudahkan pengaturan document seperti

menyeleksi object dengan element DOM dan membuat aplikasi dengan
AJAX. Jquery juga menyediakan layanan atau support para developers
untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga
memungkinkan para developer website membuat website lebih interaktif
dengan animasi, efek – efek, tema dan widget. Dengan menggunakan
JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis
atau website aplikasi menjadi keren.

Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di

platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio
untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC
Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka
Web Run-Time mereka.

54
3.16 Use Case Diagram

Pengertian Use Case adalah sebuah kegiatan atau juga interaksi yang saling
berkesinambungan antara aktor dan juga sistem. Atau dengan kata lain teknik
secara umum digunakan, guna mengembangkan software / sistem informasi,
guna memperoleh kebutuhan fungsional dari sistem yang ada.

Komponen tersebut kemudian menjelaskan komunikasi antara actor,

dengan sistem yang ada. Dengan demikian, use case dapat dipresentasikan
dengan urutan yang sederhana, dan akan mudah dipahami oleh para konsumen.

Use case ini adalah layanan atau juga fungi yang ada pada sistem untuk
para penggunanya. Sedangkan Use case Diagram, adalah gambaran efek
fungsionalitas yang diharapkan oleh sistem.

Komponen ini pastinya sangat membantu ketika Anda sedanh menyusun

requitment pada sebuah sistem, kemudian mengkomunikasikan rancangan
aplikasi tersebut pada konsumen, dan juga merancang test case untuk berbagai
fiture yang ada di sistem.

Use case ini dapat digunakan atau diaplikasikan ke use case lainnya,
sehingga duplikasi fungsionalitas dapat dihindari, caranya adalah dengan
menarik keluar fungsional yang common.
Use case sendiri juga mempunyai fungsi serta manfat yang baik untuk para
pembuat dan juga para konsumen. Fungsi use case diagram ini cukup banyak,
antara lain :

1. Dapat memperlihatkan urutan aktifitas proses yang ada pada sistem.

2. Dapat menggambarkan prose bisnis dan juga urutan aktivitas yang
ada dalam sebuah proses.

55
 Sedangkan manfaat dari Use case sendiri adalah ;

1. Untuk memudahkan komunikasi dengan menggunakan domain expert

dan juga end user.
2. Adanya Interface yang harus dimiliki oleh sebuah sistem.
3. Memberikan kepastian pemahaman yang pas, tentng requirement atau
juga kebutuhan sebuah sistem.
4. Dapat digunakan untuk mengidentifikasi, siapa yang sedang
berinteraksi dengan sistem, dan juga apa yang harus dilakukan untuk
sistem tersebut.
5. Biasanya digunakan untuk verifikasi.

3.17 Activity Diagram

Activity diagrams adalah sesuatu yang menggambarkan berbagai alir

aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir
berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir.
Activity diagram juga dapat menggambarkan proses paralel yang mungkin
terjadi pada beberapa eksekusi. Activity diagram merupakan state diagram
khusus, di mana sebagian besar state adalah action dan sebagian besar transisi
di-trigger oleh selesainya state sebelumnya atau internal processing. Oleh
karena itu activity diagram tidak menggambarkan behaviour internal sebuah
sistem dan interaksi antar subsistem secara eksak, tetapi lebih menggambarkan
proses-proses dan jalur-jalur aktivitas dari level atas secara umum.

Komponen yang ada pada activity diagram antara lain :

1.Activity atau state : Menunjukan aktivitas yang dilakukan.

2.Initial activity atau initial state : Menunjukan awal aktivitas dimulai.
3.Final Activity atau final state : Menunjukan bagian akhir dari aktivitas.
4.Decission : Digunakan untuk menggambarkan test kondisi untuk memastikan
bahwa control flow atau object flow mengalir lebih ke satu jalur. Jumlah

56
 jalur sesuai yang diinginkan.
5.Merge : Berfungsi menggabungkan flow yang dipecah oleh decission.
6.Synchronization : Diabgi menjadi 2 yaitu fork dan join: Fork digunakan untuk
memecah behaviour menjadi activity atau action yang paralel, sedangkan
join untuk menggabungkan kembali activity atau action yang paralel.
7.Swimlanes : Memecah activity diagram menjadi baris dan kolom untuk
membagi tangung jawab obyek-obyek yang melakukan aktivitas.
8.Transition : Menunjukan aktivitas selanjutnya setelah aktivitas sebelumnya.
Terkadang keliru dalam penggunaan decission dengan fork.

3.18 Flowchart Diagram

Pengertian flowchart atau diagram alir adalah suatu jenis diagram yang
mewakili algoritme, alir kerja atau proses, yang menampilkan langkah-langkah
dalam bentuk simbol-simbol grafis, dan urutannya dihubungkan dengan panah.
Diagram ini mewakili ilustrasi atau penggambaran penyelesaian masalah.
Diagram alir digunakan untuk menganalisa, mendesain, mendokumentasi atau
memanajemen suatu proses atau program di berbagai bidang.

Definisi flowchart adalah adalah suatu bagan dengan simbol-simbol

tertentu yang menggambarkan urutan proses secara mendetail dan hubungan
antara suatu proses (instruksi) dengan proses lainnya dalam suatu program.

Pada awalnya, flowchart memang berkembang dari industri komputer

yaitu untuk menggambarkan urutan proses penyelesaian masalah. Bagan alir
(flowchart) digunakan terutama untuk alat bantu komunikasi dan untuk
dokumentasi. Flowchart diterima di kalangan lain seperti manufaktur, militer,
manajemen, sains, dan lain sebagainya.

Lebih singkatnya, pengertian bagan air (flowchart) adalah urutan dari

logika suatu prosedur dalam pemcahan suatu masalah yang dituliskan berupa

57
simbol-simbol tertentu.

Berikut ini simbol-simbol yang digunakan dalam flowchart beserta

keterangan kegunaannya :

Table 2 Simbol-Simbol Flowchart

58
 BAB IV PEMBAHASAN

4.1 Alat yang Digunakan

Adapun alat-alat yang digunakan untuk membantu proses pembuatan

aplikasi arsip file ini terdiri sebagai berikut :

4.1.1 Prangkat Keras

1. Laptop dengan spesifikasi :

2. Prosessor : Intel(R) Core(TM) i3-6006U CPU @ 2.00GHz (4
CPUs), ~2.0GHz
3. Memory RAM : 8 GB
4. Tipe Sistem : 64 bit
5. Hardisk : 512 GB

4.1.2 Perangkat Lunak

1. Sistem Operasi : Windows 10

2. Local server : XAMPP
3. Teks Editor : Visual Studio Code
4. Web Browser : Google Chrome

59
4.2 Proses Pembuatan

Adapun proses apa saja yang dilakukan saat aplikasi ini dibuat adalah
sebagai berikut :

4.2.1 Desain Use Case Diagram

Use Case Diagram dibuat dengan tujuan untuk menentukan fitur-fitur

apa saja yang ingin dibuat dan dapat diakses oleh seorang user pada
aplikasi, berikut adalah Use Case Diagram dari aplikasi arsip file-Nya :

Gambar 12 Use Case Diagram Aplikasi

Pada Gambar 9 diatas menunjukan bahwa pada aplikasi nanti terdapat

sembilan menu yang dapat diakses oleh admin sedang untuk user biasa
dapat mengakses seluruh menu pada aplikasi kecuali menu Hapus

60
Dokumen dan Setting.

4.2.2Desain Activity Diagram

Activity Diagram yang dibuat bertujuan untuk menggambarkan alur

dari tampilan halaman-halaman aplikasi ketika aplikasi arsil file digunakan
oleh seorang user, berikut gambar dari Activity Diagram aplikasi arsip
file-Nya :

4.2.2.1 Activity Diagram Upload File

Gambar 13 Activity Diagram Upload File

61
4.2.2.2 Activity Diagram Hapus File

Gambar 14 Activity Diagram Hapus File

62
4.2.2.3 Activity Diagram Download File

Gambar 15 Activity Diagram Download File

63
4.2.2.4 Activity Diagram Tambah User

Gambar 16 Activity Diagram Tambah User

64
4.2.2.5 Activity Diagram Hapus User

Gambar 17 Activity Diagram Hapus User

65
 4.2.2.6 Activity Diagram Ubah Password

Gambar 18 Activity Diagram Ubah Password

4.2.3Desain Flowchart

Diagram Flowchart dibuat bertujuan untuk menggambarkan alur

66
logika dari aplikasi dimana ketika user mulai menggunakan aplikasi data
apa yang akan diterima aplikasi dan kemudian data tersebut akan diolah
seperti apa nantinya, berikut gambar dari diagram Flowchart aplikasi arsip
file-Nya :

Gambar 19 Flowchart Diagram Aplikasi

Pada Gambar 11 diatas menggambarkan alur logika dari aplikasi arsip

file yang dimulai dari user menginput data berupa username dan password
saat login sampai user melakukan upload file, menampilkan file, dan
menghapus file pada aplikasi.

4.2.4 Desain Database

Database pada aplikasi ini di desain memiliki dua tabel yaitu tabel
users dan tabel arsip, tabel users menyimpan data-data user seperti
username, password, dan data-data user lainnya, sedangkan tabel arsip

67
 akan menyimpan data-data file yang diupload oleh user ke aplikasi.

4.2.4.1 Tabel Users

Table 3 Struktur Tabel Users

4.2.4.2 No Nama Jenis Bawaan

Tabel 1 Id Int Tidak ada
2 Username Varchar (60) Tidak ada
Arsip 3 Password Varchar (255) Tidak ada
4 Access Tinyint (1) NULL
Table 4
Struktur
Tabel Arsip

No Nama Jenis Bawaan

4.2.5 1 Id Int Tidak ada
2 Nama_file Varchar (50) Tidak ada
3 Besar_file Int (50) Tidak ada
4 Jenis_file Varchar (6) Tidak ada
5 Pengirim_file Varchar (50) Tidak ada
6 Waktu_upload timestamp CURRENT_TIMESTAMP

Desain Tampilan Aplikasi

4.2.5.1 Login

Halaman Login merupakan halaman yang pertama kali akan diakses

otomatis saat user mengunjungi alamat domain aplikasi, yang berfungsi
untuk mengecek apakah user yang ingin menggunakan aplikasi tersebut
sudah terdaftar dalam sistem atau belum.

68
 Gambar 20 Halaman Login

4.2.5.2 Dashboard

Halaman Dashboard merupakan halaman yang akan pertama kali

ditampilkan saat user berhasil melakukan proses login pada halaman
login, pada dashboard user akan disajikan dengan informasi statistik
data-data yang tersimpan didalam aplikasi seperti berapa banyak file
word yang tersimpan, berapa banyak user yang terdaftar, dan lain-lain.

Gambar 21 Halaman Dashboard

69
4.2.5.3 Upload

Menu Upload merupakan menu yang berfungsi untuk user

mengupload sebuah file-file dengan ekstensi yang diizinkan (docx, xlsx,
pdf, pptx, txt, rar, zip) dan ukuran file yang ditentukan.

Gambar 22 Halaman Upload File

4.2.5.4 Arsip

Halaman arsip merupakan halaman yang berfungsi untuk

menampilkan daftar file-file yang tersimpan pada aplikasi, pada
halaman ini juga user bisa mendownload file yang sudah diupload jika
file tersbut dibutuhkan kembali.

70
 Gambar 23 Halaman Arsip

4.2.5.5 Reset Password

Menu reset password merupakan fitur yang berfungsi untuk

menggati password bawaan saat user didaftarkan oleh admin pertama
kali, sehingga password milik user yang mengetahui hanyalah user
sendiri.

Gambar 24 Halaman Reset Password

4.2.5.6 Setting

Menu Setting merupakan menu yang hanya dapat diakses oleh

71
admin dimana menu ini berfungsi untuk mendaftarkan user, menghapus
user, dan melihat daftar nama user yang terdaftar pada aplikasi.

Gambar 25 Halaman Setting

4.2.5.7 Tentang

Halaman tentang merupakan halaman terakhir yang berisi informasi

yang berkaitan tentang tujuan aplikasi ini dibuat.

Gambar 26 Halaman Tentang

72
4.2.6 Memprogram Aplikasi

Proses terakhir yaitu Memprogram atau biasa disebut juga coding

dimana pada proses ini penulis merubah desain-desain dari aplikasi yang
dibuat sebelumnya menjadi program yang dapat dijalankan dengan cara
mengimplementasikan desain-Nya kedalam kode program. Proses ini
terbagi dua yaitu :

1. Front-end

pada bagian front-end adalah proses memprogram tampilan dari

aplikasi dengan menggunakan bahasa markup untuk website yaitu HTML.
HTML digunakan untuk membuat struktur tampilan dari aplikasi website
yang akan dibuat dan untuk menghias tampilan dari struktur aplikasi-Nya
yaitu dengan menggunakan bahasa markup CSS.

2. Back-end

Pada bagian back-end adalah proses memprogram fungsi-fungsi dari

aplikasi yang akan dibuat contohnya fungsi untuk login, fungsi register
untuk mendaftarkan user, fungsi upload untuk mengupload file ke server
dan fungsi-fungsi yang lainnya. Bagian back-end dibuat dengan
menggunakan bahasa pemrograman PHP yang bahasa pemrogaman ini
akan berjalan disisi server dimana server akan merubah kode-kode pada
bahasa ini menjadi bahasa markup HTML dan kemudian dikirimkan ke
browser user.

73
 BAB V PENUTUP

5.1 Kesimpulan

Berdasarkan hasil pelaksanaan kegiatan Kerja Praktek di Dinas Persandian

Komunikasi dan Informasi, maka dapat ditarik kesimpulan yaitu :

1. Apilkasi penyimpanan file berbasis website yang dibuat bertujuan membantu

kinerja para staf kantor DPKOMINFO Kabupaten Manokwari dalam hal
penyimpanan file-file dokument penting.

5.2 Saran

Berdasarkan hasil dari pelaksanaan kegiatan kerja praktek di Dinas

Persandian Komunikasi dan Informasi, maka penulis memberikan beberapa saran
sebagai berikut :

1. Kepada para pegawai DPKOMINFO Kabupaten Manokwari agar aplikasi

yang dibuat diharapkan dapat digunakan semaksimal mungkin dan dapat
berguna bagi para staf DPKOMINFO Kabupaten Manokwari.

2. Kepada pihak yang ingin mengembagkan aplikasi agar menambahkan fitur

resposive pada aplikasi sehingga tampilan dari aplikasi dapat menyesuaikan
saat dibuka diberbagai perangkat.
 DAFTAR PUSTAKA

BeritaTeknologi,PengertianActivityDiagram
:http://jelajahteknologibaru.blogspot.com/2016/04/pengertian-
activity -diagram.html ( Di akses 28 November 2019 ).

DuniIlkom, Tutorial Belajar PHP Part 1: Pengertian dan Fungsi PHP dalam
PemrogramanWeb,https://www.duniailkom.com/pengertian-dan-
fungsi-php-dalam-pemograman-web/. ( di akses 27 November 2019 ).

Dem Project, Pengertian dan fungsi javascript dalam pemrograman web :

http://hengkiproject.blogspot.com/2015/09/pengertian-dan-fungsi-
javascript-dalam.html/. ( di akses 14 Desember 2019 ).

IT-Jurnal,PengertianCSS(CascadingStyleSheet) :https://www.it-
jurnal.com/pengertian-css-cascading-style-sheet/. ( Di akses 28
November 2019 ).

Infoku, Pengertian SQL, Jenis – Jenis Perintah SQL, Kupas Tuntas Tentang
SQL : https://nyengnyeng.com/pengertian-sql-kupas-tuntas-tentang-
sql/ ( di akses 14 Desember 2019 ).

JurnalPonsel, Pengertian XAMPP, Fungsi, Sejarah dan Bagian-bagiannya

(Lengkap) : https://www.jurnalponsel.com/pengertian-xampp/. ( Di
akses 28 November 2019 ).

Niagahoster, Pengertian MySQL, Fungsi, dan Cara Kerjanya (Lengkap) :

https://www.niagahoster.co.id/blog/mysql-adalah/. ( Di akses 28
November 2019 ).

75
Niagahoster, Pengertian Website Lengkap dengan Jenis dan Manfaatnya :
https://www.niagahoster.co.id/blog/pengertian-website/. ( Di akses
28 November 2019 ).

Niagahoster, Pengertian jQuery Serta Fungsi dan Contohnya :

https://www.niagahoster.co.id/blog/jquery-adalah/ ( di akses 14
Desember 2019 ).

Pelajaran.co.id, Pengertian Flowchart : Tujuan, Jenis, Simbol, Cara Membuat

dan Contohnya Lengkap :
https://www.pelajaran.co.id/2019/02/pengertian-flowchart.html. ( Di
akses 28 November 2019 ).

Salamadian, USE CASE : Pengertian, Fungsi, Contoh & Cara Membuatnya

Lengkap! :https://salamadian.com/pengertian-use-case-diagram-
adalah/. (Di akses 27 November 2019).

Wikipedia, Visual StudioCode

:https://en.wikipedia.org/wiki/Visual_Studio_Code. (Di akses 27
November 2019).

76
77
LAMPIRAN