6

BAB II

LANDASAN TEORI

2.1 Konsep Dasar Web

Pembuatan Tugas Akhir ini tidak lepas dari teori-teori yang mendukung

kemudahan dalam mempelajari dan merancang sebuah website yang diharapkan

dapat berfungsi secara maksimal.

A. Website

Menurut (Nurhadi, 2017) “Kumpulan-kumpulan halaman yang menampilkan

berbagai macam informasi teks, data, gambar diam maupun bergerak yang dimana

masing-masing dihubungkan dengan jaringan halaman atau hyperlink”. Website

menampilkan berbagai macam informasi gambar, teks dan lain-lain yang dapat

diakses berupa dokumen dalam bentuk teks, gambar dan lainnya yang digunakan

untuk memperoleh informasi.

Agar website dapat ditampilkan diperlukan server sebagai tempat untuk

menempatkan halaman web yang mengandung HTML dan juga bahasa

pemrograman yang harus diolah disisi server seperti PHP maka server digunakan

untuk meletakakan halaman web saja.

Secara garis besar website dapat digolongkan menjadi tiga

1. Website Statis

Website statis adalah website yang dibuat secara manual dengan mengetik

kode-kode html menjadi suatu halaman web yang mempunyai halaman web

tidak berubah.

7

2. Website Dinamis

Website dinamis merupakan website yang bisa diupdate secara mudah sehingga

isi dari website tersebut bisa berubah sesuai keinginan pemilik website

(dinamis) dan juga telah disediakan halaman backend yaitu untuk mengedit

konten dari website tersebut.

3. Website Interaktif

Webiste Interaktif adalah pengembangan lebih lanjut dari website dinamis

dimana dalam website interaktif terjadi komunikasi dua arah antara pengunjung

dan pengurus website atau antara pengunjung dan sesame pengunjung.

B. Bahasa Pemrograman

1. Java Script

Menurut (Prayitno Agus & Safitri Yulia, 2015) “Java Script adalah bahasa

pemrograman yang digunakan untuk membuat program yang digunakan agar

dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif, tidak

sekedar indah saja”. 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.

2. PHP

Menurut (Enteprise, 2016) “PHP merupakan script pemrograman berbasis

website yang sangat popular. Salah satu popularistasnya terletak pada kemudahan

mempelajari script PHP dibandingkan yang lain. PHP memiliki struktur yang khas”.

PHP merupakan salah satu bahasa pemrograman yang bersifat open source sehingga

source code PHP dapat disebarluaskan dan diubah secara bebas.

8

3. HTML

Hypertext Mark up Language atau HTML merupakan standar pembuatan

website secara luas agar laman website dapat ditampilkan pada layar komputer dan

kemudian dapat diakses untuk menampilkan berbagai informasi didalam sebuah

penjelajah web internet (Browser). Menurut (Enteprise, 2018) “HTML digunakan

untuk membuat struktur halaman website.Bisa dibilang secara umum bahwa HTML

digunakan untuk mendesain website. HTML tidak berdiri sendiri sebab pasti akan

digabungkan dengan CSS atau script lain, seperti Javascript. HTML sebagai program

untuk membuat desain sebuah website dimana kalian bisa menulis teks, memasukan

gambar, membuat form, dan sebagainya”.

4. CSS

Cascading Style Sheet yaitu perancangan bahasa desain web (style sheet

language) yang dilakukan dengan mengartikan fonts, margins, colors, background,

font sizes, dan lain sebagainya. Menurut (Enteprise, 2016) “CSS singkatan dari

Cascading Style Sheet. Jadi HTML digunakan untuk menentukan struktur dokumen

website dan CSS bertugas untuk mempercantik website tersebut. Secara definitive

CSS adalah kumpulan kode untuk mendefinisikan desain dari bahasa markup akan

tetapi sekarang CSS dapat diaplikasikan pula untuk sagala dokumen XML termasuk

juga didalam nya SVG dan juga XUL bahkan sampai dengan system operasi

Android.

5. SQL

Structured Query Language atau SQL adalah bahasa khusus yang digunakan

untuk membuat dan mengolah database. Menurut (Shalahudin & Sukamto, 2015)

“SQL atau Structured Query Language merupakan bahasa yang digunakan untuk

mengelola data pada RDBMS”. Dengan SQL atau biasa disebut query kita dapat

9

memanipulasi atau mengedit database sesuai yang kita kehendaki seperti

menjalankan query untuk mengambil data, menambah data, memperbarui data dan

menghapus data. Dalam implementasi SQL terdapat perintah yang digunakan untuk

mengakses serta menajemen data yang terdapat dalam database, tiga sub perintah

tersebut adalah :

a. DDL (Data Definition Language)

b. DML (Data Manipulation Language)

c. DCL (Data Control Language)

C. Basis Data

Definisi Basis Data adalah kumpulan data yang didalamnya terdapat satu atau

lebih table yang terhubung antara satu dengan lainnya, yang mana setiap pengguna

(user) diberi hak akses untuk bisa menggunakannya

1. MYSQL

MYSQL merupakan sebuah software sistem manajemen berbasis data SQL

atau DBMS. Menurut (Enteprise, 2018) “MYSQL membuat dan mengolah database.

Database sendiri dibutuhkan jika kita ingin menginput data dari user menggunakan

from HTML untuk kemudian diolah PHP agar bisa disimpan ke dalam database

MYSQL”. MYSQL merupakan turunan dari salah satu konsep utama dalam database

untuk pemilihan atau seleksi dan pemasukan data yang memungkinkan

2. PHP MyAdmin

PHP MyAdmin adalah aplikasi web yang menggunakan bahasa pemrograman

PHP yang mengandung unsur HTML/XHTML, CSS dan juga kode JavaScript.

Aplikasi ini untuk memudahkan pengelolaan basis data MYSQL. Menurut

(Enteprise, 2016) “PHP merupakan script pemrograman berbasis website yang

10

sangat popular. Salah satu popularistasnya terletak pada kemudahan mempelajari

script PHP dibandingkan yang lain. PHP memiliki struktur yang khas”.

3. XAMPP

Menurut (Aswadi, 2018) “Xampp merupakan gabungan dari beberapa aplikasi

yang dapat menjadikan komputer kita menjadi sebuah server. Aplikasi tools untuk

menyediakan proses pembuatan aplikasi web yang menyatu menjadi satu sehingga

memudahkan kita dalam pembuatan program web”.

D. Model Pengembangan Perangkat Lunak

Suatu penerapan struktur pada pengembangan suatu perangkat lunak atau

software yang bertujuan untuk mengembangkan system dan memberikan panduan

untuk menyukseskan proyek pengembangan system melalui tahpan-tahapan tertentu.

Menurut (Pascapraharastyan, 2014) “Model waterfall karena tahap demi tahap yang

dilalui harus menunggu selesainya tahap sebelumnya dan berjalan berurutan. Sebagai

contoh tahap desain harus menunggu selesainya tahap sebelumnya yaitu tahap

requirement”. Model Waterfall atau air terjun merupakan pendekatan perkembangan

perangkat lunak yang sistematik dan sekunsial yang dimulai pada tingkat dan

kemajuan sistem pada seluruh tahapan analisis, desain, kode pengujian, dan

pemeliharaan.

Sumber : Rossa dan Shalahuddin (2014:29)

Gambar II.1

Ilustrasi Model Waterfall

11

Berikut tahapan-tahapan model waterfall:

1. Rekayasa dan Pemodelan sistem/informasi

Membangun keseluruhan elemen sistem dan memilah bagian-bagian mana

yang akan dijadikan bahan untuk pengembangan perangkat lunak dengan

memperhatikan hubungannya dengan hardware, user, dan database.

2. Analisis kebutuhan perangkat lunak

Proses ini dilakukan penganalisaan dan pengumpulan kebutuhan sistem yang

dibutuhkan untuk kerja/ performansi dan antarmuka dan hasil penganalisaan

dan pengumpulan tersebut didokumentasikan dan diperlihatkan k epada

konsumen.

3. Desain

Proses ini berfokus pada struktur data, arsitektur perangkat lunak, representasi

interface, dan detail algoritma procedural yang merancang perangkat lunak

yang dapat diperkirakan sebelum dibuatnya proses pengkodean (coding).

4. Pengkodean

Pengkodean merupakan proses menterjemahkan perancangan desain ke bentuk

yang dapat dimengerti dengan menggunakan bahasa pemrograman.

5. Pengujian

Setelah proses pengkodean selesai dilanjutkan dengan proses pengujian pada

program perangkat lunak baik pengujian logika internal maupun pengujian

eksternal fungsional untuk memeriksa segala kemungkinan terjadinya

kesalahan dan memeriksa apakah hasil dari pengembangan tersebut sesuai

dengan hasil yang diinginkan.

12

6. Pemeliharaan

Proses pemeliharaan merupakan bagian paling akhir dari siklus pengembangan

dan dilakukan setelah perangkat lunak dipergunakan.

2.2 Peralatan Pendukung

Peralatan pendukung (tools system) merupakan alat yang digunakan untuk

menggambarkan logika model dari suatu sistem dengan menggunakan simbol-

simbol, lambang-lambang ataupun diagram-diagram yang menunjukkan secara

tepat arti dari fungsinya. Fungsi dari tools system adalah untuk menjelaskan kepada

user bagaimana fungsi dari sistem informasi dapart bekerja.

A. Struktur Navigasi

Struktur navigasi adalah struktur atau alur suatu program yang merupakan

rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat

membantu mengorganisasikan seluruh elemen pembuatan website.

Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan

dalam proses pembuatan website :

1. Struktur Navigasi Linier

Struktur navigasi linier mempunyai tampilan yang dapat ditampilkan pada

struktur jenis ini satu halaman.

Sumber : Simarta (2010:309)

Gambar II.2

Struktur Navigasi Linier

13

2. Struktur Navigasi Hirarki

Struktur ini biasa disebut struktur bercabang dimana struktur ini mengandalkan

percabangan untuk menampilkan data berdasarkan kriteria tertentu.

Sumber: Simarta (2010:310)

Gambar II.3

Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier

Struktur navigasi non linier merupakan pengembangan dari struktur linier,

struktur ini diperkenankan membuat navigasi bercabang. Percabangan pada

struktur non linier ini berbeda dengan percabangan struktur hirarki karena pada

percabangan ini tiap-tiap tampilan mempunyai kedudukan yang sama yaitu

tidak ada master page dan slave page.

Sumber : Simarta (2010:311)

Gambar II.4

Struktur Navigasi Non-Linier

14

4. Struktur Navigasi Composite (Campuran)

Struktur navigasi composite disebut juga struktur navigasi bebas yang

merupakan gabungan dari ketiga struktur yang ada. Struktur navigasi ini biasa

digunakan dalam pembuatan multimedia karena dapat memberikan

keinteraksian yang lebih tinggi.

Sumber : Simarta (2010:309)

Gambar II.5

Struktur Navigasi Composite (Campuran)

B. Enterprise Relationship Diagram (ERD)

1. Definisi ERD

Enterprise Relationship Diagram menurut (Yolan, 2015) “Alat pemodelan data

utama dan akan membantu mengorganisasikan data dalam suatu proyek kedalam

entitas-entitas dan menghubungkan antar entitas”.

Dalam pembentukan ERD terdapat 5 komponen yang akan

dibentuk yaitu:

Tabel II.1

Simbol Enterprise Relationship Diagram

Simbol Deskripsi

Entity Entitas merupakan data inti yang akan disimpan,

penanaman entitas biasanya lebih ke kata benda

dan belum merupakan nama table.

15

Atribut Atribut adalah field atau kolom data yang butuh

disimpan dalam suatu entitas.

Atribut multivalue

Field atau kolom data yang butuh disimpan dalam

suatu entitas yang nilainya lebih dari satu.

Relasi Relasi yang menghubungkan antar entitas,

biasanya diawali dengan kata kerja.

Assosiasi

Penghubung antara relasi dan entitas dimana

keduanya memiliki multiplicity kemungkinan

jumlah pemakaian maksimum keterhubungan

antara entitas satu dengan yang lain disebut dengan

kardinalitas.

Sumber : Sukamto dan Shalahudin (2013:50)

C. Unifield Modeling Language (UML)

Unified Modeling Language menurut (Akil Ibnu, 2018) “Bahasa pemodelan

yang sudah diakui dan memiliki fitur yang lengkap untuk analisis dan desain

berorientasi objek”. Diantaranya :

1. Use Case Diagram

Use case diagram merupakan pemodelan untuk melakukan (behavior) sistem

informasi yang akan dibuat. Use case digunakan untuk mengetahui fungsi apa saja

yag ada didalam sebuah sistem informasi dan siapa saja yang berhak menggunakan

fungsi-fungsi itu. Berikut adalah simbol-simbol yang ada pada diagram use case:

16

Tabel II.2

Simbol Use Case

Simbol Deskripsi

Aktor a. Aktor adalah orang atau sistem yang mendapat

manfaat dan bersifat eksternal dari sistem.

b. Berpartisipasi secara berurutan dengan

mengirim dan menerima pesan.

c. Ditempatkan dibagian atas diagram

d. Digambarkan sebagai default figure tongkat

Use Case a. Bagian utama dari fungsionalitas

sistem

b. Memperpanjang use case lain

c. Dapat menyertakan use case lain

d. Ditempatkan didalam batas

sistem

Batas Subjek a. Termasuk nama subjek didalam atau diatas

b. Merupakan ruang lingkup subjek, misal sistem

atau individu.

Association Menghubungkan actor dengan use case yang

digunakan untuk berinteraksi.

Include a. Penyertaan fungsionalitas dari satu use case

didalam yang lain

b. Memiliki panah yang ditarik dari kasing

pangkalan ke kasing bekas

Extends a. Ekstensi dari use case untuk memasukan

perilaku opsional

b. Memiliki panah yang ditarik dari use case

ekstensi ke use case dasar.

Generalization a. Kasus penggunaan khusus ke lebih umum.

b. Memiliki panah yang ditarik dari kasing khusus

ke kasing dasar.

Sumber : Dennis (2012:518)

17

2. Activity Diagram

Diagram aktivitas atau activity diagram menggambarkan workflow (aliran

kerja) atau aktivitas dari sebuah sistem atau proses bisnis atau menu yang ada pada

perangkat lunak. Berikut simbol-simbol yang ada pada diagram aktivitas :

Tabel II.3

Simbol Activity Diagram

Simbol Deskripsi

Action

a. Simple dan dapat dikompilasi

b. Dilabeli dengan nama.

Activity

a. Digunakan untuk mewakili serangkaian

tindakan

b. Dilabeli dengan nama

Class Name

a. Digunakan mewakili suatu objek yang

terhubung ke satu set aliran objek.

b. Dilabel dengan nama.

Control Flow Memperlihatkan urutan eksekusi

Object Flow

Memperlihatkan aliran suatu objek dari satu

aktivitas atau aksi ke aktivitas atau aksi lain.

Initial Node Menggambarkan awal dari serangkaian tindakan

atau kegiatan

Final Activity Node

Digunakan untuk menghentikan semua aliran

control dan objek mengalir dalam suatu kegiatan

atau tindakan

18

Final Flow Node Digunakan untuk menghentikan aliran control

tertentu atau aliran objek

Decition Node a. Digunakan untuk mewakili kondisi pengujian

untuk memastikan bahwa aliran control atau

aliran objek hanya turun satu jalur.

b. Diberi label dengan kriteria keputusan untuk

melanjutkan ke jalur tertentu

Merge Node Digunakan untuk meyatukan kembali jalur keputusan berbeda yang dibuat menggunakan

simpul keputusan

Fork Node

Digunakan untuk membagi perilaku menjadi serangkaian kegiatan atau tindakan yang paralel

atau bersamaan

Join Node

Digunakan untuk menyatukan kembali serangkaian kegiatan atau tindakan yang paralel

atau bersamaan

Swimlane a. Digunakan untuk memecahkan diagram

aktivitas menjadi baris dan kolom untuk

menetapkan aktivitas atau tindakan individu

untuk individu atau objek yang bertanggung

jawab untuk menjalankan aktivitas atau

tindakan.

b. Diberi label dengan nama individu atau objek

yang bertanggung jawab.

Sumber : Dennis (2008:166)

3. Sequence Diagram

Sequence diagram merupakan diagram yang menggambarkan kolaborasi

dinamis antara sejumlah object yang digunakan untuk menjelaskan interaksi antar

objek dalam urutan waktu. Berikut simbol-simbol yang ada pada diagram sequence :

19

Tabel II.4

Simbol Sequence Diagram

Simbol Deskripsi

Aktor a. Berpartisipasi secara berurutan dengan

menirim atau menerima pesan

b. Digambarkan sebagai default figure tongkat

atau sebagai persegi panjang dengan actor di

dalamnya alternative

Object a. Berpartisipasi dalam urutan dengan mengirim

dan menerima pesan

b. Ditempatkan dibagian atas diagram

Lifeline

a. Menunjukkan kehidupan suatu objek selama

suatu urutan

b. Berisi X pada titik dimana kels tidak lagi

berinteraksi

Execution Occurrence a. Persegi panjang sempit yang menempatkan

bagian atas garis hidup

b. Menunjukkan ketika suatu objek mengirim atau

menerima pesan.

Message

a. Menyampaikan informasi dari suatu objek ke

objek lainnya

b. Panggilan operasi ditandai dengan pesan yang

dikirim dan panah padat sedangkan

pengembalian ditandai dengan nilai yang

dikembalikan dan ditampilkan sebagai panah

putus-putus.

Guard Condition

Merupakan tes yang harus

dipenuhi untuk pesan yang akan

dikirim

20

Object Destruction

X

X ditempatkan di akhir garis hidup bjek untuk

menunjukkan bahwa ia keluar

Frame

Menunjukkan konteks diagram urutan.

Sumber : Dennis (2010:531)

`

4. Deployment Diagram

Deployment diagram merupakan model diagram dalam UML untuk

memvisualisasikan, menspesifikasikan dan mendokumentasikan proses yang terjadi

pada suatu sistem perangkat lunak berbasis Oject Oriented yang akan dibangun.

Berikut adalah simbol-simbol pada deployment diagram :

Tabel II.5

Simbol Deployment Diagram

Simbol Deskripsi

Node a. Sumber daya komputasi misalnya computer

klien,server,jaringan terpisah atau perangkat

jaringan invidual

b. Dilabeli dengan nama

c. Dapat berisi stereotip yang secara spesifik

melabeli jenis node yang diwakili misalnya

perangkat,workstation klien,server aplikasi dan

lain-lain.

Artifact a. Spesifikasi dari perangkat lunak atau basis data

misalnya basis data atau table atau tampilan

basis data, komponen atau lapisan perangkat

lunak.

b. Dilabeli dengan nama

c. Saya menghitung stereotip yang secara spesifik

21

melabeli jenis artefak misalnya table basis data

file sumber, file yang dapat dieksekusi dan lain-

lain.

Node with a deployed artifact Menggambarkan artefak yang

ditempatkan pada simpul fisik.

Communication Path a. Mewakili hubungan antara dua

node

b. Memungkinkan node untuk bertukar pesan

c. Dapat berisi stereotip yang secara

spesifik melabeli jenis jalur

komunikasi yang diwakili

misalnya LAN, internet, serial,

parallel.

Sumber : Dennis (2010:531)

D. Black Box Testing

Black box testing adalah pengujian yang dilakukan hanya mengamati hasil

eksekusi melalui data uji dan memeriksa fungsional dari perangkat lunak. Pengujian

dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan, dan keluaran dari

perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Pengujian kotak hitam

dilakukan dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan

memakai perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan.

Menurut (Janti, 2017) “Black box testing adalah tipe testing yang memperlakukan

perangkat lunak yang tidak diketahui internalnya. Pengujian black box juga

merupakan pendekatan komplemeter yang memungkinkan besar mampu

mengungkap kelas kesalahan”.