6

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut (Rerung, 2018), “Orang banyak mengenal web dengan istilah WWW

(World Wide Web). World Wide Web adalah layanan internet paling populer saat ini

internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW”.

Suatu situs web akan dikenal dengan cepat apabila informasi yang disajikan

selalu up-to-date. Situs web di tempatkan pada server web. Sebuah server web yang

umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk

menangani layanan atas protokol HTTP yang disebut sebagai HTTP Server seperti

Apache HTTP Server, atau Internet Information Services (IIS). Pada bab ini

diuraikan beberapa konsep dasar sistem informasi web, sebagai berikut:

2.1.1. Sistem Informasi

1. Sistem

Sistem adalah sekelompok komponen dan elemen yang digabungkan menjadi

satu untuk mencapai tujuan tertentu.

Sedangkan menurut (Maniah & Hamidin, 2017), “Sistem dapat didefinisikan

sebagai kumpulan dari elemen-elemen berupa data, jaringan kerja dari prosedur-

prosedur yang saling berhubungan, sumber daya manusia, teknologi baik hardware

maupun software yang saling berinteraksi sebagai satu kesatuan untuk mencapai

tujuan/sasaran tertentu yang sama”.

7

Dalam prosedur kegiatan, sistem memiliki urutan dan syarat minimum sebagai

unsur pembentuk sistem, yaitu terdiri dari input, proses dan output. Berikut ini adalah

bentuk sistem yang paling sederhana :

Sumber : (Maniah & Hamidin, 2017)

Gambar II.1 System Life Style

Input merupakan data yang diperlukan sebagai informasi atau perintah dan

akan diproses sesuai dengan tujuan yang telah ditentukan sehingga dapat

menampilkan data hasil proses berupa data keluaran (Maniah & Hamidin, 2017)

2. Informasi

Menurut (Istiarni & Triningsih, 2018), “Informasi adalah data yang telah

disusun sedemikian rupa sehingga bermakna dan bermanfaat karena dapat

dikomunikasikan kepada seseorang yang akan menggunakannya untuk membuat

suatu keputusan”.

Sedangkan menurut Sutabri dalam (Wijianto & Anggoro, 2018), “Informasi

adalah data yang diklasifikasikan atau diolah atau diinterpretasikan untuk digunakan

dalam proses pengambilan keputusan”.

3. Sistem Informasi

Sistem informasi merupakan kumpulan sub-sub sistem yang dirancang untuk

mengolah data yang saling berkaitan menjadi informasi yang bermanfaat.

8

Menurut (Rukun & B. Herawan Hayadi, 2018), “Sistem informasi adalah

sebuah sistem informasi yang mempunyai fungsi mengumpulkan, memproses,

menyimpan, menganalisis, dan menyebarkan informasi untuk tujuan yang spesifik”.

2.1.2. Absensi

Menurut Setiawan dalam (Subiantoro & Sardiarinto, 2018) Absensi atau kartu

jam hadir adalah dokumen yang mencatat jam hadir setiap pegawai di suatu

perusahaan yang dapat berupa daftar hadir biasa atau kartu hadir yang diisi dengan

mesin pencatat waktu.

2.1.3. Internet

Menurut (Ferry, Christiyanto, & Saifudin, 2014), “Internet merupakan

jaringan global komputer dunia, dimana setiap komputer saling terhubung satu sama

lainnya; dari negara ke negara lainnya di seluruh dunia dan berisi berbagai macam

informasi, mulai dari teks, gambar, suara, video, dan lainnya”.

1. Website

Menurut (Susilo & Kesuma, 2014), “Website merupakan komponen atau

kumpulan komponen yang terdiri dari teks, gambar, suara dan animasi sehingga lebih

merupakan media informasi yang menarik untuk dikunjungi”.

Menurut (Marisa, 2017) menjelaskan bahwa:

Website dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk mempublikasikan informasi berupa teks, gambar, dan program multimedia lainnya berupa animasi (gambar gerak, tulisan gerak), suara, dan atau gabungan dari semuanya itu baik yang berssifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait antara satu halaman dengan halaman yang lain sering disebut sebagai hyperlink.

2. Web Server

Menurut (Rerung, 2018), “Web server adalah software yang menjadi tulang

belakang dari World Wide Web (WWW). Web server menunggu permintaan dari

9

client yang menggunakan browser seperti Netscape Navigator, Internet Explorer,

Mozzila, dan program browser lainnya”.

3. Web browser

Menurut (Semuel Yacobus Padang, 2017),“Web browser adalah aplikasi yang

digunakan untuk menampilkan web. Contoh aplikasi web browser: Internet Explore,

Chrome, Mozzila Firefox, Safari dan Opera”.

Sedangkan menurut Sibero dalam (Fandi, Imaniawan, & Elsa, 2017), “Web

Browser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan

menyajikan sumber informasi web”.

4. Web Hosting

Menurut Ahmadi dan Hermawan dalam (Wijianto & Anggoro, 2018), “Web

hosting adalah salah satu bentuk layanan jasa penyewaan tempat di internet yang

memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau

produknya di web atau situs internet”.

5. Domain

Menurut (Rahman, 2017), “Nama domain (bahasa Inggris: domain name)

adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer

seperti web server atau email server di jaringan komputer ataupun internet”.

2.1.4. Bahasa Pemrograman

1. Hypertext Prepocessor (PHP)

Menurut (Setiawan, 2017), “PHP merupakan singkatan “Hypertext

Preprocessor”, yang merupakan sebuah scripting tingkat tinggi yang dipasang pada

dokumen HTML”.

10

Berikut ini adalah kelebihan bahasa pemrograman PHP menurut (Supono dan

Vidiandry Putratamu ed.l, 2016) yaitu:

a. PHP adalah bahasa multiplatform yang artinya dapat berjalan di berbagai

mesin dan sistem operasi

b. PHP bersifat open source yang berarti dapat digunakan oleh siapa saja

secara gratis

c. Web server yang mendukun PHP dapat ditemukan dimana-mana dari mulai

apache, IIS, LigHTTPd, nginx, hingga Xitami dengan konnfigurasi yang

relatif mudah dan tidak berbelit-belit, bahkan banyak yang membuat dalam

bentuk paket atau package (PHP, MySQL, dan Web Server)

d. Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis,

komunitas dan developer yang siap membantu dalam pengembangan

e. Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah

karena memiliki refrensi yang banyak

f. Banyak bertebaran aplikasi dan program PHP yang gratis dan siap pakai

seperti wordpress dan prestashop

g. Dapat mendukung banyak database seperti MySQL, Oracle dan MS_SQL

2. Hypertext Markup Language (HTML)

Menurut (Rerung, 2018), “HTML adalah singkatan dari Hypertext Markup

Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat

berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu

halaman ke halaman lainnya hanya dengan meng-klik text tersebut”.

3. Cascading Style Sheet (CSS)

Menurut (Rerung, 2018) “CSS adalah singkatan dari Cascading Style Sheet.

CSS biasanya selalu dikaitkan dengan HTML karena keduanya memang saling

11

melengkapi dimana HTML ditujukan untuk membuat struktur, atau konten dan

halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web”.

Aturan dan penulisan kode CSS dibagi menjadi tiga cara, menurut (Setiawan,

2017) diantaranya:

a. Internal CSS

CSS Internal adalah istilah untuk kode CSS yang ditulis langsung dalam

HTML. Kode CSS ini dituliskan pada tag <style>.

Contoh struktur CSS internal:

<html>

<head>

<title>latihan</title>

<style type=”teks/CSS”>

H1{

Font-family : helvetica;

color: #cecece;

}

P{

Font-family : arial;

color: #cecece;

}

</style>

</head>

<body>

<h1>test internal CSS</h1><br/>

<p> lorem ipsum</p>

12

</body>

</html>

b. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.

Eksternal CSS ditulis di sebuah berkas khusus yang berekstensi (.css).

Contoh struktur CSS eksternal:

<linkhref=”style.CSS” type=”text/CSS”

rel=”stylesheet”/>

c. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML.

Contoh struktur Inline CSS :

<html>

<head>

<title>latihan</title>

</head>

<body>

<h1 style=”color:red; font-family;

Sans;”>test internal CSS</h1>

<p> lorem ipsum>

</body>

<html>

4. JavaScript

Menurut (Jubilee Enterprise, 2017), “JavaScript merupakan bahasa

pemrograman wajib yang harus dikuasai. JavaScript merupakan bahasa

pemrograman yang berkembang pesat”.

13

Kegunaan JavaScript adalah untuk menambah interaktif suatu website dan ada

beberapa hal tentang JavaScript menurut (Setiawan, 2017) yaitu :

a. Open source

b. JavaScript merupakan bahasa scripting yang ringan

c. JavaScript disisipkan dalam html

d. Dalam JavaScript, script akan langsung dieksekusi tanpa kompilasi

Contoh script pada JavaScript :

<html>

<head>

<!--contoh mybeta-- >

<title>JS</title>

</head>

<body>

<script type= “text/JavaScript”>

Document.write(“hallo, apa kabar Bet?”);

</script>

</body>

</html>

5. CKEditor

Menurut (Panunggali, 2017), “CKEditor adalah teks editor yang digunakan di

lingkungan web. CKEditor adalah sebuah WYSIWYG editor, yang berarti teks yang

di-edit akan sama dengan yang akan tampil”.

Sedangkan menurut (Jubilee Enterprise, 2017), “CKEditor adalah editor

tambahan yang bisa dimasukkan ke dalam sistem”.

14

CKEditor memiliki kelebihan yaitu mudah meng-impor data yang berbentuk

gambar yang berjenis .jpg, .jpeg, .png, .gif maupun yang lainnya. (Anton Subagia,

2016).

2.1.5. Basis Data

Menurut Kusrini dalam (Maulana, 2015), “Basis data adalah kumpulan data

yang saling berelasi. Data sendiri merupakan fakta mengenai obyek, orang, dan lain-

lain. Data dinyatakan dengan nilai (angka, deretan karakter, atau simbol)”.

Beberapa basis data yang digunakan untuk pembuatan website, diantaranya:

1. MySQL

MySQL atau MySQLi digunakan untuk mengakses atau berkomunikasi dengan

database, ada beberapa manfaat penggunaan MySQLi menurut (Semuel Yacobus

Padang, 2017) antara lain :

a. Menggunakan interface

b. Mendukung penggunaan prepared statement

c. Mendukung penggunaan multiple statement

d. Mendukung penggunaan transaction

e. Peningkatan terhadap kemampuan pencarian kesalahan program

f. Mendukung penggabungan dengan server

Contoh menjalankan query MySQL dengan MySQL server dan query MySQL

menggunakan MySQL extension dengan script PHP menurut (Anton Subagia, 2016)

adalah sebagai berikut :

Mysql_query (“select*from mahasiswa”, $dbh)

Sedangkan contoh menjalankan query mysql dengan script PHP yaitu :

<?PHP

//buat koneksi dengan Mysql i

15

$dbh = mysql_connect (‘local host’,’ root’,’) ;

//gunakan database kampus

$result = mysql_query (use kampus’,$dbh);

//tampilkan tabel mahasiswa

$result = mysql_query (‘select * from mahasiswa’, $dbh);

?>

2. PHP MyAdmin

Menurut Buana (2014:2), “phpMyAdmin adalah salah satu aplikasi yang

digunakan untuk memudahkan dalam melakukan pengelolaan database MySQL.

phpMyAdmin merupakan aplikasi web yang bersifat opensource.” Tujuan basis data

dibangun menurut (Robi Yanto, 2016) yaitu :

a. Kecepatan & Kemudahan (speed)

Dapat menyimpan data atau melakukan perubahan terhadap data atau

menampilkan kembali data tersebut secara lebih efektif.

b. Efisiensi Ruang Penyimpanan (space)

Dengan basis data, efisiensi ruang penyimpanan dapat dilakukan dengan

menerapkan sejumlah pengkodean, atau dengan membuat relasi-relasi antar

kelompok data yang saling berhubungan.

c. Keakuratan (accuracy)

Pengkodean atau pembentukan relasi antar data bersama dengan penerapan

aturan (constraint), keunikan data, yang secara ketat dapat diterapkan dalam

sebuah basis data sangat berguna untuk menekan ketidakakuratan

penyimpanan data.

16

d. Ketersediaan (availability)

Dengan pemanfaatan jaringan komputer, maka data yang berada di suatu

lokasi dapat diakses bagi lokasi lain

e. Kelengkapan (completeness)

Kelengkapan data yang disimpan dalam sebuah database besifat relatif, bisa

jadi saat ini dianggap sudah lengkap, tetapi belum tentu pada suatu saat

dianggap lengkap. Untuk mengakomodasi kelengkapan data.

f. Keamanan (security)

Aspek keamanan dapat diterapkan dengan ketat, dengan begitu kita dapat

menentukan pemakai basis data serta objek-objek di dalamnya, serta jenis-

jenis operasi apa saja yang boleh dilakukannya.

Sumber : (Supriyanti, 2017)

Gambar II.2. Tampilan PHP MyAdmin

2.1.6. Aplikasi Perangkat Lunak

1. Sublime Text

Menurut (Faridl, 2015), “Sublime text adalah teks editor berbasis Python,

sebuah teks editor yang elegan, kaya fitur, cross platform, mudah dan simpel yang

cukup terkenal di kalangan developer (pengembang), penulis dan desainer.”

17

Jadi dapat disimpulkan bahwa sublime text ialah teks editor yang digunakan

untuk membuat program aplikasi yang secara otomatis untuk mempermudah

programmer dalam mengetikkan kode editor.

2. XAMPP Versi 3.2.2

XAMPP merupakan perangkat lunak (free software) bebas, yang mendukung

untuk banyak sistem operasi, yang merupakan kompilasi dari beberapa program.

Menurut (Dadan & Kerendi Developers, 2015), “XAMPP adalah salah satu

aplikasi webserver apache yang terintegrasi dengan MySQL dan PHP MyAdmin.

adalah singkatan dari X, Apache Server, MySQL, PHP MyAdmin, XAMPP dan

Phyton. Huruf X di depan menandakan XAMPP bisa diinstal di berbagai operating

system. XAMPP dapat diinstal pada Windows, Linux, Mac OS, dan Solaris”.

Kelebihan XAMPP menurut (Sarwandi, 2016) diantaranya :

1. Pemrosesan database sangat cepat.

2. Open source

3. Mudah dipelajari

4. Kompabilitas dengan berbagai sistem operasi dan web server yang ada

Sumber : (Wibowo, 2017)

Gambar II.3. Tampilan XAMPP Control Panel

18

3. Photoshop CC (Cloud Computing)

Photoshop CC (Cloud Computing) merupakan fitur dalam suatu aplikasi

pengeditan gambar atau foto yang dapat membuat pengeditan dan manipulasi

gambar menjadi lebih mudah dan menakjubkan. (Lee, 2015)

2.1.7. Framework

Menurut (Novianto, 2016), “Framework adalah kumpulan perintah atau fungsi

dasar yang membentuk aturan-aturan tertentu dan saling berinteraksi satu sama lain

sehingga dalam pembuatan aplikasi website, diharuskan mengikuti aturan dari

framework tersebut”.

1. Bootstrap

Menurut (Jubilee Enterprise, 2016), “Bootstrap adalah framework front-end

yang intuitif dan powerful untuk pengembangan aplikasi web yang lebih cepat dan

mudah. Bootstrap menggunakan HTML, CSS dan JavaScript”.

Sedangkan menurut (Novianto, 2016), “Bootstrap adalah platform untuk

membuat interface website dan aplikasi berbasis web. Bootstrap berisi kode HTML

dan CSS yang telah dilengkapi desain untuk tipografi, bentuk, tombol, navigasi dan

lain sebagainya”.

2.1.8. Model Pengembangan Perangkat Lunak

Waterfall atau air terjun adalah model yang dikembangkan untuk

pengembangan perangkat lunak, membuat perangkat lunak. Model berkembang

secara sistematis dari satu tahap ke tahap lain dalam model seperti air terjun. Model

air terjun (waterfall) sering juga disebut model sequential linear atau alur hidup

klasik (classic life cycle). Model air terjun menyediakan pendekatan alur hidup

perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain,

pengodean, pengujian, dan tahap pendukung (support).

19

Metode yang digunakan pada pengembangan perangkat lunak menggunakan

model waterfall yang terbagi menjadi lima tahapan menurut Rosa dan Shalahuddin

dalam (Susilo & Kesuma, 2014), yaitu:

1. Analisa kebutuhan perangkat lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat

lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat

lunak pada tahap ini perlu didokumentasikan.

2. Desain

Proses multi langkah yang fokus pada desain pembuatan program perangkat

lunak termasuk struktur data, arsitektur perangkat lunak, representasi

antarmuka, dan prosedur pengodean. Tahap ini mentranslasi kebutuhan

perangkat lunak dari tahap analisis kebutuhan ke representasi desain agar dapat

dimplementasikan menjadi program pada tahap selanjutnya. Desain perangkat

lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

3. Pembuatan kode program

Desain harus ditranslasikan kedalam program perangkat lunak. Hasil dari tahap

ini adalah program komputer sesuai dengan desain yang telah dibuat pada

tahap desain.

4. Pengujian

Pengujian fokus pada perangkat lunak secara dari segi logic dan fungsional dan

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk

meminimalisir kesalahan (error) dan memastikan keluaran yang duhasilkan

sesuai dengan keinginan yang dihasilkan.

20

5. Pendukung (support) atau pemeliharaan (maintenance)

Tidak menutup kemungkinan sebuah perangkat mengalami perubahan ketika

sudah dikirim ke user. Perubahan bisa terjadi karena adanya kesalahan yang

muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus

beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan

dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk

perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat

perangkat lunak baru.

Dengan berbagai kelemahan yang dimiliki model air terjun tapi model ini telah

menjadi dasar dari model-model yang lain dalam melakukan perbaikan model

pengembangan perangkat lunak.

2.2. Tools Program

Tools program merupakan alat yang digunakan untuk menggambarkan bentuk

logical model dari perancangan sistem informasi, dimana simbol-simbol, lambang-

lambang dan diagram-diagram menunjukkan secara tepat fisiknya. Logical model

dapat digambarkan dengan struktur navigasi, Entity Relationship Diagram (ERD),

Logical Record Structure (LRS) dan pengujian web.

2.2.1. Struktur Navigasi

Menurut Binanto dalam (Andriansyah, 2016), ada empat macam bentuk dasar

navigasi, yaitu:

1. Struktur Navigasi Berurut (Linier)

Struktur navigasi linierhanya mempunyai satu rangkaian cerita yang berurut

yang menampilkan satu demi satu tampilan layar secara berurut menurut

urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu

halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman

21

sebelumnya atau dua halaman sesudahnya, pengguna akan melakukan navigasi

secara berurutan, dalam frame atau byte informasi satu ke yang lainnya.

Sumber: (Andriansyah, 2016)

Gambar II.4. Struktur Navigasi Linier

2. Struktur Navigasi Tidak Berurut (Non-Linier)

Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi

linier. Pada struktur ini diperkenankan membuat navigasi bercabang.

Percabangan yang dibuat pada struktur non-linier ini berbeda dengan

percabangan pada struktur hirarki, karena pada percabangan non-linier ini

walaupun terdapat percabangan tetap tiap-tiap tampilan mempunyai kedudukan

yang sama yaitu tidak ada Master Page dan Slave Page, pengguna akan

melakukan navigasi dengan bebas melalui isi proyek dengan tidak terikat jalur

yang sudah ditentukan sebelumnya.

Sumber: (Andriansyah, 2016)

Gambar II.5. Struktur Navigasi Non-Linier

3. Struktur Navigasi Hirarki

Struktur dasar ini disebut juga struktur linier dengan percabangan karena

pengguna melakukan navigasi disepanjang cabang pohon yang terbentuk oleh

logika ini.

22

Sumber: (Andriansyah, 2016)

Gambar II.6. Struktur Navigasi Hirarki

4. Struktur Navigasi Campuran (Composite)

Struktur navigasi jenis ini pengguna akan melakukan navigasi dengan bebas

(secara non-linier), tetapi terkadang dibatasi presentasi linier film atau

informasi penting dan pada data yang paling terorganisasi secara logis pada

suatu hirarki.

Sumber: (Andriansyah, 2016)

Gambar II.7. Struktur Navigasi Composite

2.2.2. Entity Relationship Diagram (ERD)

Menurut (Robi Yanto, 2016), “Entity Relationship Diagram (ERD) adalah suatu

diagram untuk menggambarkan desain konseptual dari model konseptual suatu basis

data relasional”.

Menurut (Andriansyah, 2016), “ERD merupakan diagram yang

menggambarkan hubungan yang terjadi antar tabel”.

23

2.2.3. Logical Record Structure (LRS)

Menurut Andriansyah (2016:53), “Logical Record Structure (LRS) merupakan

transformasi dari penggambaran ERD dalam bentuk yang lebih jelas dan mudah untuk

dipahami”.

2.2.4. Implementasi

Implementasi merupakan langkah realisasi perangkat lunak yang dibuat setelah

pengkodean dan perancangan antar muka pengguna dilakukan.

Menurut (Salusu, 2015), “Implementasi adalah seperangkat kegiatan yang

dilakukan menyusul satu keputusan. Suatu keputusan dimaksudkan untuk mencapai

sasaran tertentu”.

2.2.5. Pengujian Web

Menurut Rosa dan Shalahuddin dalam (Wijianto & Anggoro, 2018), “Black

Box Testing (pengujian kotak hitam) yaitu menguji perangkat lunak dari segi

spesifikasi fungsional tanpa menguji desain dan kode program”.

Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat

mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian kotak

hitam harus dibuat dengan kasus yang benar dan kasus yang salah, misalkan untuk

kasus proses login maka kasus uji yang dibuat adalah:

1. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang benar.

2. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang salah, misalnya nama pemakai benar tapi kata sandi salah, atau sebaliknya,

atau keduanya salah.

24

Kelebihan Black Box Testing menurut (Sigalingging & Budiarti, 2016),

diantaranya adalah :

a. Fokus pada internal perangkat lunak untuk menemukan kesalahan dan

memastikan program dapat berjalan dengan baik.

b. Perangkat lunak dan kebutuhan didefinisikan pada awal perancangan.

c. Fokus pada keperluan fungsional aplikasi.

d. Pengembang software dapat membuat himpunan kondisi input untuk melatih

seluruh syarat fungsional suatu aplikasi.