BAB III

TEORI PENUNJANG PKL

3.1. Landasan Teori

3.1.1. Browser
Browser adalah software yang biasa digunakan untuk mengakses
internet. Beberapa browser yang terkenal antara lain Microsoft Internet
Explorer, Mozilla Firefox, dan Opera. Pada browser terdapat baris
alamat (address bar). Pada bagian inilah pemakai mengetikkan alamat
situs web (misalnya berupa www.ibm.com) atau file halaman web
(misalnya

127.0.0.1/pertama.php). (Abdul Kadir, 2009)

3.1.2. HTML
HTML adalah kependekan dari Hyper Text Markup Language,
yang artinya tata cara penulisan yang digunakan dalam dokumen web.
Atau dapat juga diartikan sebagai bahasa yang digunakan untuk
merancang sebuah halaman web.

Untuk membuat dokumen HTML, dapat menggunakan software

Notepad, Microsoft Frontpage, Macromedia Dreamweaver dan Editor
Web lainnya.

HTML (Hyper Text Markup Language) merupakan bahasa asli

dari www, yang telah menjadi bahasa standar untuk menampilkan data di
internet. Perkembangan html sangatlah pesat, saat ini versi terakhir dari
html telah mencapai html 5.

Secara garis besar terdapat 4 jenis elemen dari HTML yaitu :

1. Structural, adalah kode program yang menentukan level atau
tingkatan dari sebuah tulisan.

Contoh : <h1>Mozilla</h1> akan memerintahkan browser untuk

menampilkan "Mozilla" sebagai tulisan tebal besar yang
menunjukkan sebagai Heading 1.
 21

2. Presentational, adalah kode yang menentukan tampilan dari sebuah

tulisan, tidak peduli dengan level dari tulisan tersebut.

20
Contoh : <b>Cetak Tebal</b> maka pada browser akan
menampilkan "Cetak Tebal". Namun kode-kode presentational saat
ini sudah mulai digantikan dengan penggunaan CSS (Cascading
Style Sheets) dan tidak direkomendasikan lagi untuk mengatur
tampilan tulisan.

3. HyperText kode program HTML yang menunjukkan hubungan

(link) ke bagian lain dari dokumen tersebut atau link ke dokumen
lain.

Contoh :
<a href="http://berrybenka.com/">dress</a> maka pada browser
akan menampilkan "dress" sebagai sebuah hyperlink yang menuju
url http://berrybenka.com/

4. Elemen
Widget yang membuat objek-objek lain seperti tombol <button>,
list <li>, dan garis horizontal <hr>, Konsep hypertext pada HTML
memungkinkan kita untuk membuat link pada suatu kelompok kata
atau frase untuk menuju ke bagian manapun dalam World Wide Web

(WWW). (Winda Febriani Kusuma, 2015)

3.1.3. PHP
PHP (singkatan dari Personal Home Page) adalah sebuah piranti
yang biasa dipakai untuk membuat aplikasi web. Aplikasi web adalah
aplikasi yang dijalankan melalui browser. (Abdul Kadir, 2009)

PHP biasa disebut bahasa pemrograman server-side, karena PHP

diproses pada komputer pada komputer server. Hal ini berbeda
 22

dibandingkan dengan bahasa pemrograman client-server seperti

JacaScript yang diproses pada web browser (client).

Intinya, PHP adalah sebuah bahasa pemrograman yang bisa

membantu dalam membuat aplikasi apa saja dan bisa diakses oleh siapa
saja menggunakan teknologi server-side. Server-side yang dimaksud
disini adalah PHP hanya akan berjalan pada aplikasi berbasis server,
baik itu server yang berjalan di komputer lokal (localhost) maupun
server yang berjalan secara online, karena PHP berjalan pada server,
maka PHP tidak bisa berjalan ketika diakses secara langsung.
Menurut https://id.wikipedia.org/wiki/PHP kelebihan
PHP dibanding bahasa pemrograman web lainnya, antara lain:

1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaannya.

2. Web Server yang mendukung PHP dapat ditemukan di mana - mana

dari mulai apache, IIS, Lightpad, hingga Xitami dengan konfigurasi
yang relatif mudah.

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

milis dan developer yang siap membantu dalam pengembangan.

4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling

mudah karena memiliki referensi yang banyak.

5. PHP adalah bahasa open source yang dapat digunakan di berbagai

mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan
secara runtime melalui console serta juga dapat menjalankan perintah-
perintah system.

3.1.4. CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet
yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis
dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah
untuk memformat halaman web yang ditulis dengan HTML, XML, dan
XHTML.
 23

CSS digunakan oleh penulis maupun pembaca halaman web

untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek
tampilan dokumen. CSS digunakan terutama untuk memisahkan antara
isi dokumen dengan presentasi dokumen (yang ditulis dengan CSS).
Memungkinkan juga untuk halaman yang sama untuk ditampilkan
dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti
melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara
atau pembaca layar), dan juga alat pembaca braille. Halaman HTML
atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari
segi gaya tampilan atau skema warna dengan menggunakan CSS.
(Winda Febriani Kusuma, 2015)

3.1.5. Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) adalah suatu rancangan atau
bentuk hubungan suatu kegiatan di dalam sistem yang berkaitan
langsung dan mempunyai fungsi di dalam proses tersebut. ERD adalah
suatu pemodelan dari basis data relasional yang didasarkan atas persepsi
di dalam dunia nyata, dunia ini senantiasa terdiri dari sekumpulan objek
yang saling berhubungan antara satu dengan yang lainnya. Suatu objek
disebut entity dan hubungan yang dimilikinya disebut relationship. Suatu
entity bersifat unik dan memiliki atribut sebagai pembeda dengan entity
lainnya

3.1.6. UML (Unified Modelling Language)

Unified Modelling Language adalah sebuah "bahasa" yg telah
menjadi standar dalam industri untuk visualisasi, merancang dan
mendokumentasikan sistem piranti lunak. UML menawarkan sebuah
standar untuk merancang model sebuah sistem. (Sri Dharwiyanti)

1. Konsepsi Dasar UML

Dari berbagai penjelasan rumit yang terdapat di dokumen dan
buku-buku UML. Sebenarnya konsepsi dasar UML bisa kita
rangkumkan dalam gambar dibawah.
 24

Gambar 3.1 Konsepsi Dasar UML

Abstraksi konsep dasar UML yang terdiri dari structural
classification, dynamic behavior, dan model management, bisa kita
pahami dengan mudah apabila kita melihat gambar diatas dari
Diagrams. Main concepts bisa kita pandang sebagai term yang akan
muncul pada saat kita membuat diagram. Dan view adalah kategori
dari diagaram tersebut.

2. Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang
diharapkan dari sebuah sistem. Yang ditekankan adalah “apa” yang
diperbuat sistem, dan bukan “bagaimana”. Sebuah use case
merepresentasikan sebuah interaksi antara aktor dengan sistem. Use
case merupakan sebuah pekerjaan tertentu, misalnya login ke sistem,
meng-create sebuah daftar belanja, dan sebagainya. Seorang/sebuah
aktor adalah sebuah entitas manusia atau mesin yang berinteraksi
dengan sistem untuk melakukan pekerjaan-pekerjaan tertentu.
 25

Sebuah use case dapat meng-include fungsionalitas use case

lain sebagai bagian dari proses dalam dirinya. Secara umum
diasumsikan bahwa use case yang di-include akan dipanggil setiap
kali use case yang meng-include dieksekusi secara normal. Sebuah
use case dapat di-include oleh lebih dari satu use case lain, sehingga
duplikasi fungsionalitas dapat dihindari dengan cara menarik keluar
fungsionalitas yang common.

Sebuah use case juga dapat meng-extend use case lain dengan
behaviour-nya sendiri. Sementara hubungan generalisasi antar use
case menunjukkan bahwa use case yang satu merupakan spesialisasi
dari yang lain.

Gambar 3.2 Contoh Use Case Diagram

3. Class Diagram
Class adalah sebuah spesifikasi yang jika diinstansiasi akan
menghasilkan sebuah objek dan merupakan inti dari pengembangan
dan desain berorientasi objek. Class menggambarkan keadaan
(atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk
memanipulasi keadaan tersebut (metoda/fungsi).
 26

Class diagram menggambarkan struktur dan deskripsi class,

package dan objek beserta hubungan satu sama lain seperti
containment, pewarisan, asosiasi, dan lain-lain.
Class memiliki tiga area pokok :
a. Nama (dan stereotype)
b. Atribut
c. Metoda
Atribut dan metoda dapat memiliki salah satu sifat berikut :
• Private, tidak dapat dipanggil dari luar class yang bersangkutan
• Protected, hanya dapat dipanggil oleh class yang bersangkutan
dan anak-anak yang mewarisinya

• Public, dapat dipanggil oleh siapa saja

Gambar 3.3 Contoh Class

4. Hubungan Antar Class
1) Asosiasi, yaitu hubungan statis antar class. Umumnya
menggambarkan class yang memiliki atribut berupa class lain,
atau class yang harus mengetahui eksistensi class lain. Panah
navigability menunjukkan arah query antar class.

2) Agregasi, yaitu hubungan yang menyatakan bagian (“terdiri

atas..”).

3) Pewarisan, yaitu hubungan hirarkis antar class. Class dapat

diturunkan dari class lain dan mewarisi semua atribut dan metoda
class asalnya dan menambahkan fungsionalitas baru, sehingga ia
disebut anak dari class yang diwarisinya. Kebalikan dari
pewarisan adalah generalisasi.
 27

4) Hubungan dinamis, yaitu rangkaian pesan (message) yang

dipassing dari satu class kepada class lain. Hubungan dinamis
dapat digambarkan dengan menggunakan sequence diagram yang
akan dijelaskan kemudian.

Gaembar 3.4 Contoh Class Diagram

5. Activity Diagram
Activity diagrams 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 (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.

Sebuah aktivitas dapat direalisasikan oleh satu use case atau

lebih. Aktivitas menggambarkan proses yang berjalan, sementara use
 28

case menggambarkan bagaimana aktor menggunakan sistem untuk

melakukan aktivitas.

Sama seperti state, standar UML menggunakan segiempat

dengan sudut membulat untuk menggambarkan aktivitas. Decision
digunakan untuk menggambarkan behaviour pada kondisi tertentu.
Untuk mengilustrasikan proses-proses paralel (fork dan join)
digunakan titik sinkronisasi yang dapat berupa titik, garis horizontal
atau vertikal. Activity diagram dapat dibagi menjadi beberapa object
swimlane untuk menggambarkan objek mana yang bertanggung
jawab untuk aktivitas tertentu.

Gambar 3.5 Contoh Activity Diagram

6. Sequence Diagram
Sequence diagram menggambarkan interaksi antar objek di
dalam dan di sekitar sistem (termasuk pengguna, display, dan
sebagainya) berupa message yang digambarkan terhadap waktu.
 29

Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi

horizontal (objek-objek yang terkait).

Sequence diagram biasa digunakan untuk menggambarkan

skenario atau rangkaian langkah-langkah yang dilakukan sebagai
respons dari sebuah event untuk menghasilkan output tertentu.
Diawali dari apa yang men-trigger aktivitas tersebut, proses dan
perubahan apa saja yang terjadi secara internal dan output apa yang
dihasilkan.

Masing-masing objek, termasuk aktor, memiliki lifeline

vertikal. Message digambarkan sebagai garis berpanah dari satu
objek ke objek lainnya. Pada fase desain berikutnya, message akan
dipetakan menjadi operasi/metoda dari class. Activation bar
menunjukkan lamanya eksekusi sebuah proses, biasanya diawali
dengan diterimanya sebuah message. Untuk objek-objek yang
memiliki sifat khusus, standar UML mendefinisikan icon khusus
untuk objek boundary, controller dan persistent entity.

3.2. Tools
3.2.1. Perangkat Lunak yang Digunakan
1. MySql
MySql termasuk dalam kategori database management
system, yaitu suatu database yang terstrukturdalam pengolahan dan
penampilan datanya. MySql merupakan databse yang bersifat
clietserver, di mana data diletakkan di server yang bisa diakses
melalui komputer client. Pengaksesan dapat dilakukan apabila
komputer telah terhubung dengan server. Berbeda dengan database
dekstop, di mana segala pemrosesan data harus dilakukan pada
komputer yang bersangkutan.

MySql dapat juga dikatakan sebagai Relational Database

Management System (RDBMS), yaitu hubungan antara tabel yang
 30

berisi data-data pada suatu tabel. Dengan demikian dapat

mempercepat pencarian suatu data. Tabel-tabel tersebut di-link oleh
suatu relasi yang memungkinkan kombinasi data dari beberapa tabel
ketika user menginginginkan tampilnya informasi dari suatu
database.

MySql merupakan database yang dikembangkan dari bahasa

SQL (Structure Query Language). SQL merupakan bahasa
terstruktur yang digunakan untuk interaksi antar script program
dengan database server dalam pengolahan data. Dengan SQL, maka
dapat dibuat tabel yang akan diisi data, memanipulasi data seperti
menambah, menghapus dan meng-update data, serta membuat suatu
perhitungan berdasarkan data yang ditemukan. SQL tidak hanya
terbatas digunakan untuk mendapat suatu tampilan database statis,
namun juga dikembangkan SQL3 yang berencana membuat SQL
menjadi bahasa yang mendekati mesin turing misalnya computable
query atau recursive query.

MySql didesain agar dapat berjalan mencapai 100 akses

secara berkesinambungan. MySql dibuat untuk berjalan dengan
cepat, sehingga harus membuang beberapa kemampuan, misalnya
partition table seperti yang digunakan saat menggunakan database
Oracle. Dalam pemakaian sehari-hari fasilitas tersebut sangat jarang
digunakan karena lebih sering berinteraksi dengan database
berukuran kecil. Namun demikian MySql mampu berjalan pada
database yang berukuran sampai 100 GB. Hal ini sangat
menakjubkan karena hanya merupakan software gratis, namun
memiliki kinerja yang cukup tinggi.

MySql merupakan multithreaded, sehingga memungkinkan

daemon untuk menghandle permintaan layanan secara simultan.
Model koneksi dengan protokol TCP/IP membuat akses ke database
lebih cepat dibanding jika menggunakan model mapping driver,
semacam Novel Netwatre untuk membuat program client-server.
 31

(Sugiri, Haris Sapurto, 2008)

2. PhpMyADmin
Setiap RDBMS (Relation Database Mangement System)
seperti Oracle, SQL Server, MySql dan lain-lain, pasti memiliki tool
yang dapat digunakan untuk mempermudah pengoperasian database.
Oracle memiliki TOAD. SQL Server memiliki Enterprise Manager
dan SQL Query Analyzer. Sedangkan MySql memiliki tool atau
aplikasi yang disebut PhpMyAdmin.
PhpMyAdmin merupakan aplikasi berbasiskan web yang
dikembangkan menggunakan bahasa pemrograman PHP. Melalui
PhpMyAdmin, user dapat melakukan perintah query tanpa harus
mengetikkan seperti pada MS DOS. Perintah tersebut misalnya
administrasi user dan privilages, export dan import database,
manajemen database, manajemen tabel dan struktur table, dan
sebagainya. PhpMyAdmin sangat user friendly, sehingga mudah
digunakan walaupun pengguna baru (newbie). (Sugiri, Haris
Sapurto, 2008)

3. XAMPP Control Panel

XAMPP adalah singkatan dari Cross-Platform (X), Apache
(A), MySql (M), PHP (P), dan Perl (P). Sesuai namanya, dalam
XAMPP sudah memuat semua yang dibutuhkan dalam membangun
sebuah aplikasi berbasis web dengan PHP dan Database MySQL.

Dengan adanya software ini, maka pengujian script,

manipulasi data dan proses pengembangan aplikasi bisa kita lakukan
dimana dan kapan saja tanpa harus memperhitungkan kualitas
jaringan internet. Artinya XAMPP itu berfungsi sebagai pengganti
Hosting Online. Baru nanti ketika aplikasi siap di-online-kan, maka
source code yang sudah di ujicobakan di server lokal bisa di upload
ke Hosting agar bisa diakses melalui jaringan intermet. (Agus
Hariyanto, 2017)

4. Notepad ++
 32

Menurut http://notepadplus-plus.org/, Notepad++ adalah

source code editorgratis dan Notepad++ mendukung beberapa
bahasa pemrograman. Berjalan di lingkungan MS Windows,
penggunaannya diatur oleh GPL License. Berdasarkan pada
komponen editor yang kuat Scintilla, Notepad++ ditulis dalam C++
dan murni menggunakan Win32 API dan STL yang menjamin
kecepatan eksekusi lebih tinggi dan ukuran program yang lebih
kecil. Dengan mengoptimalkan sebagai rutinitas sebanyak mungkin
tanpa kehilangan keramahan pengguna, Notepad++ berusaha untuk
mengurangi emisi karbon dioksida dunia. Bila menggunakan daya
CPU yang sedikit, PC dapat bekerja lebih ringan dan mengurangi
konsumsi daya, sehingga menghasilkan lingkungan yang lebih hijau.

5. Enterprise Architect
Sparx Systems Enterprise Architect adalah alat pemodelan
dan desain visual berdasarkan OMG UML . Platform mendukung:
desain dan konstruksi sistem perangkat lunak; memodelkan proses
bisnis; dan memodelkan domain berbasis industri. Hal ini digunakan
oleh bisnis dan organisasi untuk tidak hanya memodelkan arsitektur
sistem mereka, tetapi untuk memproses implementasi model-model
ini di seluruh siklus hidup pengembangan aplikasi lengkap.

3.2.2. Perangkat Keras yang Digunakan

Spesifikasi perangkat keras yang digunakan untuk membuat
website:
- Laptop : HP 1000 Notebook PC
- RAM : 2,00 GB
- Harddisk : 196 GB
- Monitor : 14 inch
Karena aplikasi ini bersifat website, maka perangkat keras
dengan spesifikasi seperti di atas yang digunakan pada pembuatan
aplikasi ini, dapat menggunakan dan mengakses aplikasi ini dengan
baik.
 33

3.3. Metode Praktek Kerja Lapangan

3.3.1. Metode penelitian
Metode pengumpulan data dan informasi dalam penyusunan
Laporan Praktek Kerja Lapangan ini yaitu melalui:

1. Wawancara, yaitu mengumpulkan data dan informasi secara

langsung dengan narasumber yang terkait.
2. Sudi Literatur, yaitu mengumpulkan data dan informasi dari sumber
bacaan, seperti buku, jurnal, paper, dan bacaan-bacaan yang ada
kaitannya dengan laporan.

3. Melakukan observasi di sekolah SMK Al Huda Bumiayu serta

mengumpulkan semua data-data yang dibutuhkan dalam
pembangunan webisite sekolah.

3.3.2. Metode Analisis Data

Metode penelitian yang diterapkan pada penelitian ini adalah
dengan pengembangan metode waterfall. Metodewaterfall merupakan
model pengembangan sistem informasiyang sistematik dan sekuensial.
 34

Gambar 3.6 Bagan metode waterfall

Metode Waterfall memiliki tahapan-tahapan sebagai berikut:

1. Requirements analysis and definition
Layanan sistem, kendala, dan tujuan ditetapkan oleh hasil konsultasi
dengan pengguna yang kemudian didefinisikan secara rinci dan
berfungsi sebagai spesifikasi sistem.

2. System and software design

Tahapan perancangan sistem mengalokasikan kebutuhan-kebutuhan
sistem baik perangkat kerasmaupun perangkat lunak dengan
membentuk arsitektur sistem secara keseluruhan. Perancangan
perangkat lunak melibatkan identifikasi dan penggambaran abstraksi
sistem dasar perangkat lunak dan hubungannya.

3. Implementation and unit testing

Pada tahap ini, perancangan perangkat lunak direalisasikan sebagai
serangkaian program atau unit program. Pengujian melibatkan
verifikasi bahwa setiap unit memenuhi spesifikasinya.

4. Integration and system testing

Unit-unit individu program atau program digabung dandiuji sebagai
sebuah sistem lengkap untuk memastikan apakah sesuai dengan
kebutuhan perangkat lunak atau tidak. Setelah pengujian, perangkat
lunak dapat dikirimkan ke customer

5. Operation and maintenance

Biasanya (walaupun tidak selalu), tahapan ini merupakan tahapan
yang paling panjang. Sistem dipasang dan digunakan secara nyata.
Maintenance melibatkan pembetulan kesalahan yang tidak
ditemukanpada tahapan-tahapan sebelumnya, meningkatkan
implementasi dari unit sistem, dan meningkatkan layanan sistem
sebagai kebutuhan baru.
 35

Gambar 3.2 Alur Penelitian