Sistem Informasi Geografis Tata Letak Kantor Dinas Se-Kabupaten Batubara
BAB 2
LANDASAN TEORI
2.1 Pengertian Sistem
Sistem adalah sekumpulan elemen yang saling terkait atau terpadu yang
dimaksudkan untuk mencapai suatu kesatuan yang terdiri dari dua atau lebih
komponen atau subsistem yang berinteraksi untuk mencapai suatu tujuan
(Hartono,2000).
2.2 Pengertian Informasi
Informasi adalah suatu data yang telah diproses sehingga dapat mengurangi
ketidakjelasan tentang keadaan atau suatu kejadian. Sedangkan kata data itu sendiri
adalah fakta atau kenyataan yang sebenarnya. Informasi juga dapat didefinisikan
sebagai hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih
berarti bagi penerimanya yang menggambarkan suatu kejadian-kejadian (event)
yang nyata (fact) yang digunakan untuk pengambilan keputusan. (Hartono, 1999).
2.3 Pengertian Sistem Informasi
Sistem informasi dapat didefinisikan sebagai Suatu sistem yang dibuat oleh
manusia yang terdiri dari komponen-komponen dalam organisasi untuk mencapai
Universitas Sumatera Utara
8
suatu tujuan yaitu menyajikan informasi. Sekumpulan prosedur organisasi yang
pada saat dilaksanakan akan memberikan informasi bagi pengambil keputusan dan
atau untuk mengendalikan organisasi.
Sistem informasi adalah suatu sistem didalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi
organisasi yang bersifat manajerial dalam kegiatan strategi dari suatu organisasi
untuk dapat menyediakan kepada pihak luar tertentu dengan laporan-laporan yang
diperlukan (Yasin, 2012). Menurut Robert A. Leitch dan K.Roscoe Davis “Sistem
informasi merupakan suatu sistem di dalam suatu organisasi yang mempertemukan
kebutuhan pengolahan transaksi harian dengan kegiatan strategi dari organisasi
tersebut dan menyediakan laporan kepada pihak tertentu”. (Jogiyanto, 2001).
Sistem informasi adalah pengaturan orang, data, proses dan information
technology (IT) / teknologi informasi yang berinteraksi untuk mengumpulkan,
memproses, menyimpan dan menyediakan sebagai output informasi yang
diperlukan untuk mendukung sebuah organisasi (Whitten 2006, h. 10).
2.4 Geografi
Istilah ini digunakan karena GIS dibangun berdasarkan pada ‘geografi’ atau
‘spasial’. Object ini mengarah pada spesifikasi lokasi dalam suatu space. Objek bisa
berupa fisik, budaya, atau ekonomi alamiah. Penampakan tersebut ditampilkan
pada suatu peta untuk memberikan gambaran yang representatif dari spasial suatu
Universitas Sumatera Utara
9
objek sesuai dengan 10 kenyataannya dibumi. Simbol, warna dan gaya garis
digunakan untuk mewakili setiap spaisal yang berbeda pada peta dua dimensi.
2.5 Sistem Informasi Geografis
Sistem informasi geografis adalah suatu sistem informasi khusus yang mengelola
data yang memiliki informasi spasial (bereferensi keruangan). Atau dalam arti yang
lebih sempit, adalah sistem komputer yang memiliki kemampuan untuk
membangun, menyimpan, mengelola dan menampilkan informasi berefrensi
geografis, misalnya data yang diidentifikasi menurut lokasinya. Para praktisi juga
memasukkan orang yang membangun dan mengoperasikannya dan data sebagai
bagian dari sistem ini.
2.6 Peta
Peta merupakan gambaran wilayah geografis, bagian permukaan bumi yang
disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensionalyang
tercetak hingga peta digital yang tampil di layar komputer. Peta dapat digambarkan
denganberbagai gaya, masingmasing menunjukkan permukaan yang berbeda untuk
subjek yang sama untuk menvisualisasikan dunia dengan mudah, informatif dan
fungsional. Peta berbasis komputer (digital) lebih serba guna dan dinamis karena
bisa menunjukkan banyak view yang berbeda dengan subjek yang sama. Peta ini
juga 14 memungkinkan perubahan skala, animasi gabungan, gambar, suara, dan
bisa terhubung ke sumber informasi tambahan melalui internet. Peta digital dapat
Universitas Sumatera Utara
10
diupdate ke peta tematik baru dan bisa menambahkan detail informasi geografi
lainnya.
2.7 Google Maps
Google Maps adalah sebuah jasa peta globe virtual gratis dan online disediakan oleh
Google
dapat
ditemukan
di
http://maps.google.com
(Wikipedia.org).
Ia
menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia dan
baru-baru ini, Bulan, dan juga menawarkan perencana rute dan pencari letak bisnis
di U.S., Kanada, Jepang, Hong Kong, Cina, UK, Irlandia (hanya pusat kota) dan
beberapa bagian Eropa. Google Maps masih berada dalam tahap beta. Melalui fitur
Google Maps, pengguna internet dapat browsing informasi grafis berikut:
1. Satellite Map Pengguna dapat menikmati gambar satelit planet bumi.
Pengguna juga dapat menikmati foto satelit lebih detail lengkap dengan cara
zooming pada bagian peta yang diinginkan.
2. Hasil Pencarian Integrasi Mencari lokasi, bisnis, peta buatan pengguna dan
real estate.
3. Draggable Maps Peta digital mapping yg dragable (bisa digeser) dengan
bantuan mouse.
4. Terrain Maps (Peta Topograpi) Terrain Maps menyediakan informasi fitur
peta fisik atau peta topograpi yg biasa disediakan buku peta Atlas.
5. Earth Map Earth Map menyediakan informasi peta bumi dimana akan
tampak bumi secara utuh dan bila di-zoom akan terlihat awan yang
Universitas Sumatera Utara
11
menyelimuti bumi beserta pulau dan lautan yang tampak nyata dari
ketinggian.
6. My Location Dengan fitur ini pengguna dapat mengetahui letak dimana
lokasi dari pengguna tersebut
2.8 Google Maps API
Google Maps API adalah suatu library yang berbentuk JavaScript. Cara membuat
Google Maps untuk ditampilkan pada suatu web atau blog sangat mudah hanya
dengan membutuhkan pengetahuan mengenai HTML serta JavaScript, serta
koneksi Internet yang sangat stabil. Dengan menggunakan Google Maps API, kita
dapat menghemat waktu dan biaya untuk membangun aplikasi peta digital yang
handal, sehingga kita dapat fokus hanya pada data-data yang akan ditampilkan.
Dengan kata lain, kita hanya membuat suatu data sedangkan peta yang akan
ditampilkan adalah milik Google sehingga kita tidak dipusingkan dengan membuat
peta suatu lokasi, bahkan dunia.
Pada Google Maps API terdapat 4 jenis pilihan model peta yang disediakan
oleh Google, diantaranya adalah:
1. ROADMAP, ini yang saya pilih, untuk menampilkan peta biasa 2 dimensi
2. SATELLITE, untuk menampilkan foto satelit
3. TERRAIN, untuk menunjukkan relief fisik permukaan bumi dan
menunjukkan
seberapa
tingginya
suatu
lokasi,
contohnya
akan
menunjukkan gunung dan sungai 18
Universitas Sumatera Utara
12
4. HYBRID, akan menunjukkan foto satelit yang diatasnya tergambar pula apa
yang tampil pada ROADMAP (jalan dan nama kota)
2.9 HTML5
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi
di dalam sebuah penjelajah web internet dan pemformatan hypertext sederhana
yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud
yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak
pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman
web dengan perintah-perintah HTML.
HTML5 adalah standar baru dari HTML. Versi HTML sebelumnya yaitu
HTML 4.01 muncul pada tahun 1999. Internet mengalami perubahan yang sangat
signifikan sejak saat itu sampai sekarang. HTML5 didesain untuk memenuhi
hampir semua kebutuhan user.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium)
dan WHATWG (Web Hypertext Application Technology Working Group). Dimana
WHATWG dengan bentuk web aplikasi dan W3C merupakan pengembangan dari
HTML 2.0 pada tahun 2006, kemudian memutuskan untuk bekerja sama dan
membentuk versi baru dari HTML5. Tujuan dibuatnya HTML5, yaitu:
a. Fitur baru harus didasarkan pada HTML5, CSS3 (Cascading Style Sheets),
DOM (Document Object Mode).
Universitas Sumatera Utara
13
b. Mengurangi ketergantungan untuk plugin eksternal (seperti Flash).
c. Penanganan kesalahan yang lebih baik.
d. Lebih markup untuk menggantikan scripting.
e. HTML5 merupakan perangkat mandiri.
f. Proses pengembangan dapat terlihat untuk umum.
Fitur terbaru yang terdapat dalam HTML5 yaitu:
a. Unsur kanvas untuk menggambar
b. Video dan elemen audio untuk media pemutaran
c. Dukungan yang lebih untuk penyimpanan secara offline.
d. Elemen konten yang lebih spesifikasi, seperti artikel, footer, header, nav,
section.
e. Bentuk control form seperti kalender, tanggal, waktu, email, url, search.
2.10 CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman. Pada umumnya CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bahasa HTML dan
XHTML.
Menurut BPTIK (Badan Pengembangan Teknologi Informasi dan
Komunikasi) CSS adalah sebuah pemrogaman atau boleh dibilang script yang
Universitas Sumatera Utara
14
mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga
tampilan akan menjadi lebih terstruktur dan seragam.
Untuk saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, CSS3. CSS3 adalah versi
terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3
juga dapat melakukan animasi pada halaman website, diantaranya animasi warna
hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni
media query. Selain itu, banyak fitur baru pada CSS3 seperti multiple background,
border-radius, drop-shadow, border-images, CSS Math, dan CSS Objek Model.
2.11 JavaScript
JavaScript adalah bahasa script yang berdasar pada objek yang memperbolehkan
pemakai untuk banyak aspek interaksi pada suatu dokumen HTML. Dimana objek
tersebut dapat berupa window, frame, URL, dokumen, form, button, atau item yang
lain, yang semuanya itu mempunyai property yang saling berhubungan dengannya
dan masing-masing memiliki nama, lokasi, warna dan atribut lain.
Untuk dapat mempelajari pemrograman JavaScript, ada 2 piranti yang
diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata
(word processor) yang menghasilkan file dalam format ASCII murni. Bila
pengguna windows dapat menggunakan notepad, Wordpad, atau menggunakan
Ultraedit Text Editor.
Browser yang mendukung JavaScript yaitu Internet
Explorer, Opera, FireFox dan lain-lain. Kode dalam JavaScript dapat dituliskan
Universitas Sumatera Utara
15
langsung pada file HTML dengan dengan menggunakan tag container .
Dengan kata lain tidak perlu menuliskan program JavaScript dengan file terpisah.
Tag container adalah tag yang diawali dengan dan diakhiri
dengan .
2.12 MySQL
MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"
Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan
sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan
koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty
bekerja pada perusahaan bernama TcX di Swedia.
MySQL adalah sebuah implementasi dari sistem manajemen basis data
relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL
(General Public License). Setiap pengguna dapat secara bebas menggunakan
MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan
produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan
salah satu konsep utama dalam basis data yang telah ada sebelumnya, SQL
(Structured Query Language). SQL adalah sebuah konsep pengoperasian basis data,
terutama untuk pemilihan atau seleksi dan pemasukkan data, yang memungkinkan
pengoperasian data dikerjakan dengan mudah secara otomatis.
Universitas Sumatera Utara
16
2.13 Flowchart
Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah
algoritma
atau
memperlihatkan
proses
menggunakan
langkah-langkah
yang
beberapa bangun
dilakukan
oleh
geometri
untuk
program
dalam
menyelesaiklan masalah (Opim Salim Sitompul, 2014). Berikut ini adalah simbolsimbol standar pada sebuah flowchart beserta fungsinya.
Tabel 2.1. Simbol Flowchart
No
Nama
1
Simbol
Fungsi
Terminator
Digunakan untuk
mewakili simbol start atau
end.
2
Arrow
Menunjukkan alur proses.
3
Rectangle
Menunjukkan langkah
pemrosesan.
4
Trapezium
Simbol untuk inputoutput.
5
Document
Digunakan untuk
mewakili output.
6
Decision
7
Preparation
Simbol yang berfungsi
untuk menyatakan
keputusan.
Simbol yang berfungsi
untuk proses inisialisasi
atau pemberian harga
awal.
Universitas Sumatera Utara
17
Tabel 2.1. Lanjutan
No
8
Nama
Connector
Simbol
Fungsi
Simbol untuk keluarmasuk atau
penyambungan proses
pada halaman yang
berbeda.
9
Manual Input
Simbol untuk
pemasukkan data secara
manual melalui keyboard.
10
Manual
Operation
Simbol yang
menunjukkan pengolahan
yang tidak dilakukan oleh
komputer.
11
Predefine
Process
Simbol untuk pelaksanaan
suatu bagian (subprosedur)
12
Display
Simbol yang menyatakan
peralatan output yang
digunakan seperti layar,
printer, plotter, dan
sebagainya.
13
Magnetic Disk
Simbol yang digunakan
untuk penyimpanan data
ke database.
Storage Data
Simbol yang menyatakan
input yang berasal dari
disk atau disimpan ke
disk.
14
Universitas Sumatera Utara
18
2.14 Data Flow Diagram
Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur
data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran
analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna
ataupun ke pembuat program.
Di dalam DFD terdapat tiga level, yaitu:
1. Diagram Konteks (DFD Level 0)
Diagram konteks menggambarkan satu lingkaran besar yang dapat
mewakili seluruh proses yang terdapat dalam suatu sistem. Diagram konteks
merupakan tingkatan tertinggi dalam Data Flow Diagram dan biasanya
diberi penomoran nol. Semua entitas eksternal ditunjukkan dalam diagram
konteks beserta dengan aliran-aliran data utama, baik dari dan menuju
sistem.
2. Diagram Nol (DFD Level 1)
Diagram nol merupakan satu lingkaran besar yang mewakili lingkaranlingkaran kecil yang ada pada diagram konteks. Dengan kata lain diagram
nol merupakan pemecahan dari diagram konteks.
3. Diagram Rinci
Lebih rinci lagi, diagram rinci adalah diagram yang menguraikan prosesproses yang terdapat di dalam diagram nol.
Universitas Sumatera Utara
19
Berikut merupakan simbol-simbol standar menurut Yourdan dan DeMarco yang
digunakan untuk membuat sebuah Data Flow Diagram.
Tabel 2.2. Simbol Data Flow Diagram
No
Nama
1
Kesatuan Luar
2
Arus Data
3
Proses
4
Simpanan Data
Simbol
Media
Nama data store
Fungsi
Sebagai kesatuan
(entitas) di lingkungan
luar sistem yang dapat
berupa orang,
organisasi, sumber asli
transaksi, atau penerima
akhir.
Berfungsi untuk
menghubungkan antara
proses, simpanan data,
dan kesatuan luar.
Berupa kegiatan atau
proses yang sedang
dilakukan.
Menunjukkan informasi
yang tersimpan.
Universitas Sumatera Utara
LANDASAN TEORI
2.1 Pengertian Sistem
Sistem adalah sekumpulan elemen yang saling terkait atau terpadu yang
dimaksudkan untuk mencapai suatu kesatuan yang terdiri dari dua atau lebih
komponen atau subsistem yang berinteraksi untuk mencapai suatu tujuan
(Hartono,2000).
2.2 Pengertian Informasi
Informasi adalah suatu data yang telah diproses sehingga dapat mengurangi
ketidakjelasan tentang keadaan atau suatu kejadian. Sedangkan kata data itu sendiri
adalah fakta atau kenyataan yang sebenarnya. Informasi juga dapat didefinisikan
sebagai hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih
berarti bagi penerimanya yang menggambarkan suatu kejadian-kejadian (event)
yang nyata (fact) yang digunakan untuk pengambilan keputusan. (Hartono, 1999).
2.3 Pengertian Sistem Informasi
Sistem informasi dapat didefinisikan sebagai Suatu sistem yang dibuat oleh
manusia yang terdiri dari komponen-komponen dalam organisasi untuk mencapai
Universitas Sumatera Utara
8
suatu tujuan yaitu menyajikan informasi. Sekumpulan prosedur organisasi yang
pada saat dilaksanakan akan memberikan informasi bagi pengambil keputusan dan
atau untuk mengendalikan organisasi.
Sistem informasi adalah suatu sistem didalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi
organisasi yang bersifat manajerial dalam kegiatan strategi dari suatu organisasi
untuk dapat menyediakan kepada pihak luar tertentu dengan laporan-laporan yang
diperlukan (Yasin, 2012). Menurut Robert A. Leitch dan K.Roscoe Davis “Sistem
informasi merupakan suatu sistem di dalam suatu organisasi yang mempertemukan
kebutuhan pengolahan transaksi harian dengan kegiatan strategi dari organisasi
tersebut dan menyediakan laporan kepada pihak tertentu”. (Jogiyanto, 2001).
Sistem informasi adalah pengaturan orang, data, proses dan information
technology (IT) / teknologi informasi yang berinteraksi untuk mengumpulkan,
memproses, menyimpan dan menyediakan sebagai output informasi yang
diperlukan untuk mendukung sebuah organisasi (Whitten 2006, h. 10).
2.4 Geografi
Istilah ini digunakan karena GIS dibangun berdasarkan pada ‘geografi’ atau
‘spasial’. Object ini mengarah pada spesifikasi lokasi dalam suatu space. Objek bisa
berupa fisik, budaya, atau ekonomi alamiah. Penampakan tersebut ditampilkan
pada suatu peta untuk memberikan gambaran yang representatif dari spasial suatu
Universitas Sumatera Utara
9
objek sesuai dengan 10 kenyataannya dibumi. Simbol, warna dan gaya garis
digunakan untuk mewakili setiap spaisal yang berbeda pada peta dua dimensi.
2.5 Sistem Informasi Geografis
Sistem informasi geografis adalah suatu sistem informasi khusus yang mengelola
data yang memiliki informasi spasial (bereferensi keruangan). Atau dalam arti yang
lebih sempit, adalah sistem komputer yang memiliki kemampuan untuk
membangun, menyimpan, mengelola dan menampilkan informasi berefrensi
geografis, misalnya data yang diidentifikasi menurut lokasinya. Para praktisi juga
memasukkan orang yang membangun dan mengoperasikannya dan data sebagai
bagian dari sistem ini.
2.6 Peta
Peta merupakan gambaran wilayah geografis, bagian permukaan bumi yang
disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensionalyang
tercetak hingga peta digital yang tampil di layar komputer. Peta dapat digambarkan
denganberbagai gaya, masingmasing menunjukkan permukaan yang berbeda untuk
subjek yang sama untuk menvisualisasikan dunia dengan mudah, informatif dan
fungsional. Peta berbasis komputer (digital) lebih serba guna dan dinamis karena
bisa menunjukkan banyak view yang berbeda dengan subjek yang sama. Peta ini
juga 14 memungkinkan perubahan skala, animasi gabungan, gambar, suara, dan
bisa terhubung ke sumber informasi tambahan melalui internet. Peta digital dapat
Universitas Sumatera Utara
10
diupdate ke peta tematik baru dan bisa menambahkan detail informasi geografi
lainnya.
2.7 Google Maps
Google Maps adalah sebuah jasa peta globe virtual gratis dan online disediakan oleh
dapat
ditemukan
di
http://maps.google.com
(Wikipedia.org).
Ia
menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia dan
baru-baru ini, Bulan, dan juga menawarkan perencana rute dan pencari letak bisnis
di U.S., Kanada, Jepang, Hong Kong, Cina, UK, Irlandia (hanya pusat kota) dan
beberapa bagian Eropa. Google Maps masih berada dalam tahap beta. Melalui fitur
Google Maps, pengguna internet dapat browsing informasi grafis berikut:
1. Satellite Map Pengguna dapat menikmati gambar satelit planet bumi.
Pengguna juga dapat menikmati foto satelit lebih detail lengkap dengan cara
zooming pada bagian peta yang diinginkan.
2. Hasil Pencarian Integrasi Mencari lokasi, bisnis, peta buatan pengguna dan
real estate.
3. Draggable Maps Peta digital mapping yg dragable (bisa digeser) dengan
bantuan mouse.
4. Terrain Maps (Peta Topograpi) Terrain Maps menyediakan informasi fitur
peta fisik atau peta topograpi yg biasa disediakan buku peta Atlas.
5. Earth Map Earth Map menyediakan informasi peta bumi dimana akan
tampak bumi secara utuh dan bila di-zoom akan terlihat awan yang
Universitas Sumatera Utara
11
menyelimuti bumi beserta pulau dan lautan yang tampak nyata dari
ketinggian.
6. My Location Dengan fitur ini pengguna dapat mengetahui letak dimana
lokasi dari pengguna tersebut
2.8 Google Maps API
Google Maps API adalah suatu library yang berbentuk JavaScript. Cara membuat
Google Maps untuk ditampilkan pada suatu web atau blog sangat mudah hanya
dengan membutuhkan pengetahuan mengenai HTML serta JavaScript, serta
koneksi Internet yang sangat stabil. Dengan menggunakan Google Maps API, kita
dapat menghemat waktu dan biaya untuk membangun aplikasi peta digital yang
handal, sehingga kita dapat fokus hanya pada data-data yang akan ditampilkan.
Dengan kata lain, kita hanya membuat suatu data sedangkan peta yang akan
ditampilkan adalah milik Google sehingga kita tidak dipusingkan dengan membuat
peta suatu lokasi, bahkan dunia.
Pada Google Maps API terdapat 4 jenis pilihan model peta yang disediakan
oleh Google, diantaranya adalah:
1. ROADMAP, ini yang saya pilih, untuk menampilkan peta biasa 2 dimensi
2. SATELLITE, untuk menampilkan foto satelit
3. TERRAIN, untuk menunjukkan relief fisik permukaan bumi dan
menunjukkan
seberapa
tingginya
suatu
lokasi,
contohnya
akan
menunjukkan gunung dan sungai 18
Universitas Sumatera Utara
12
4. HYBRID, akan menunjukkan foto satelit yang diatasnya tergambar pula apa
yang tampil pada ROADMAP (jalan dan nama kota)
2.9 HTML5
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi
di dalam sebuah penjelajah web internet dan pemformatan hypertext sederhana
yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud
yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak
pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman
web dengan perintah-perintah HTML.
HTML5 adalah standar baru dari HTML. Versi HTML sebelumnya yaitu
HTML 4.01 muncul pada tahun 1999. Internet mengalami perubahan yang sangat
signifikan sejak saat itu sampai sekarang. HTML5 didesain untuk memenuhi
hampir semua kebutuhan user.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium)
dan WHATWG (Web Hypertext Application Technology Working Group). Dimana
WHATWG dengan bentuk web aplikasi dan W3C merupakan pengembangan dari
HTML 2.0 pada tahun 2006, kemudian memutuskan untuk bekerja sama dan
membentuk versi baru dari HTML5. Tujuan dibuatnya HTML5, yaitu:
a. Fitur baru harus didasarkan pada HTML5, CSS3 (Cascading Style Sheets),
DOM (Document Object Mode).
Universitas Sumatera Utara
13
b. Mengurangi ketergantungan untuk plugin eksternal (seperti Flash).
c. Penanganan kesalahan yang lebih baik.
d. Lebih markup untuk menggantikan scripting.
e. HTML5 merupakan perangkat mandiri.
f. Proses pengembangan dapat terlihat untuk umum.
Fitur terbaru yang terdapat dalam HTML5 yaitu:
a. Unsur kanvas untuk menggambar
b. Video dan elemen audio untuk media pemutaran
c. Dukungan yang lebih untuk penyimpanan secara offline.
d. Elemen konten yang lebih spesifikasi, seperti artikel, footer, header, nav,
section.
e. Bentuk control form seperti kalender, tanggal, waktu, email, url, search.
2.10 CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman. Pada umumnya CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bahasa HTML dan
XHTML.
Menurut BPTIK (Badan Pengembangan Teknologi Informasi dan
Komunikasi) CSS adalah sebuah pemrogaman atau boleh dibilang script yang
Universitas Sumatera Utara
14
mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga
tampilan akan menjadi lebih terstruktur dan seragam.
Untuk saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, CSS3. CSS3 adalah versi
terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3
juga dapat melakukan animasi pada halaman website, diantaranya animasi warna
hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni
media query. Selain itu, banyak fitur baru pada CSS3 seperti multiple background,
border-radius, drop-shadow, border-images, CSS Math, dan CSS Objek Model.
2.11 JavaScript
JavaScript adalah bahasa script yang berdasar pada objek yang memperbolehkan
pemakai untuk banyak aspek interaksi pada suatu dokumen HTML. Dimana objek
tersebut dapat berupa window, frame, URL, dokumen, form, button, atau item yang
lain, yang semuanya itu mempunyai property yang saling berhubungan dengannya
dan masing-masing memiliki nama, lokasi, warna dan atribut lain.
Untuk dapat mempelajari pemrograman JavaScript, ada 2 piranti yang
diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata
(word processor) yang menghasilkan file dalam format ASCII murni. Bila
pengguna windows dapat menggunakan notepad, Wordpad, atau menggunakan
Ultraedit Text Editor.
Browser yang mendukung JavaScript yaitu Internet
Explorer, Opera, FireFox dan lain-lain. Kode dalam JavaScript dapat dituliskan
Universitas Sumatera Utara
15
langsung pada file HTML dengan dengan menggunakan tag container .
Dengan kata lain tidak perlu menuliskan program JavaScript dengan file terpisah.
Tag container adalah tag yang diawali dengan dan diakhiri
dengan .
2.12 MySQL
MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"
Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan
sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan
koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty
bekerja pada perusahaan bernama TcX di Swedia.
MySQL adalah sebuah implementasi dari sistem manajemen basis data
relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL
(General Public License). Setiap pengguna dapat secara bebas menggunakan
MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan
produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan
salah satu konsep utama dalam basis data yang telah ada sebelumnya, SQL
(Structured Query Language). SQL adalah sebuah konsep pengoperasian basis data,
terutama untuk pemilihan atau seleksi dan pemasukkan data, yang memungkinkan
pengoperasian data dikerjakan dengan mudah secara otomatis.
Universitas Sumatera Utara
16
2.13 Flowchart
Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah
algoritma
atau
memperlihatkan
proses
menggunakan
langkah-langkah
yang
beberapa bangun
dilakukan
oleh
geometri
untuk
program
dalam
menyelesaiklan masalah (Opim Salim Sitompul, 2014). Berikut ini adalah simbolsimbol standar pada sebuah flowchart beserta fungsinya.
Tabel 2.1. Simbol Flowchart
No
Nama
1
Simbol
Fungsi
Terminator
Digunakan untuk
mewakili simbol start atau
end.
2
Arrow
Menunjukkan alur proses.
3
Rectangle
Menunjukkan langkah
pemrosesan.
4
Trapezium
Simbol untuk inputoutput.
5
Document
Digunakan untuk
mewakili output.
6
Decision
7
Preparation
Simbol yang berfungsi
untuk menyatakan
keputusan.
Simbol yang berfungsi
untuk proses inisialisasi
atau pemberian harga
awal.
Universitas Sumatera Utara
17
Tabel 2.1. Lanjutan
No
8
Nama
Connector
Simbol
Fungsi
Simbol untuk keluarmasuk atau
penyambungan proses
pada halaman yang
berbeda.
9
Manual Input
Simbol untuk
pemasukkan data secara
manual melalui keyboard.
10
Manual
Operation
Simbol yang
menunjukkan pengolahan
yang tidak dilakukan oleh
komputer.
11
Predefine
Process
Simbol untuk pelaksanaan
suatu bagian (subprosedur)
12
Display
Simbol yang menyatakan
peralatan output yang
digunakan seperti layar,
printer, plotter, dan
sebagainya.
13
Magnetic Disk
Simbol yang digunakan
untuk penyimpanan data
ke database.
Storage Data
Simbol yang menyatakan
input yang berasal dari
disk atau disimpan ke
disk.
14
Universitas Sumatera Utara
18
2.14 Data Flow Diagram
Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur
data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran
analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna
ataupun ke pembuat program.
Di dalam DFD terdapat tiga level, yaitu:
1. Diagram Konteks (DFD Level 0)
Diagram konteks menggambarkan satu lingkaran besar yang dapat
mewakili seluruh proses yang terdapat dalam suatu sistem. Diagram konteks
merupakan tingkatan tertinggi dalam Data Flow Diagram dan biasanya
diberi penomoran nol. Semua entitas eksternal ditunjukkan dalam diagram
konteks beserta dengan aliran-aliran data utama, baik dari dan menuju
sistem.
2. Diagram Nol (DFD Level 1)
Diagram nol merupakan satu lingkaran besar yang mewakili lingkaranlingkaran kecil yang ada pada diagram konteks. Dengan kata lain diagram
nol merupakan pemecahan dari diagram konteks.
3. Diagram Rinci
Lebih rinci lagi, diagram rinci adalah diagram yang menguraikan prosesproses yang terdapat di dalam diagram nol.
Universitas Sumatera Utara
19
Berikut merupakan simbol-simbol standar menurut Yourdan dan DeMarco yang
digunakan untuk membuat sebuah Data Flow Diagram.
Tabel 2.2. Simbol Data Flow Diagram
No
Nama
1
Kesatuan Luar
2
Arus Data
3
Proses
4
Simpanan Data
Simbol
Media
Nama data store
Fungsi
Sebagai kesatuan
(entitas) di lingkungan
luar sistem yang dapat
berupa orang,
organisasi, sumber asli
transaksi, atau penerima
akhir.
Berfungsi untuk
menghubungkan antara
proses, simpanan data,
dan kesatuan luar.
Berupa kegiatan atau
proses yang sedang
dilakukan.
Menunjukkan informasi
yang tersimpan.
Universitas Sumatera Utara