omandreas.files.wordpress.com  · web viewmenyediakan bahasa pemodelan visual untuk pengembangan...

17
19 BAB III LANDASAN TEORI 3.1 Pengertian Perancangan Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu (Kamus Bahasa Indonesia, 1988). Sedangkan menurut Sardi (2004), perancangan merupakan penggambaran, perencanaan, pembuatan sketsa dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi. 3.2 Pengertian Web site Web site merupakan kumpulan halaman web yang saling terhubung dan file-filenya saling terkait. Web terdiri dari page atau halaman, dan kumpulan halaman yang dinamakan home page. Home page berada pada posisi teratas, dengan halaman-halaman terkait berada di bawahnya. Biasanya setiap halaman di bawah home page disebut child page, yang berisi hyperlink ke halaman lain dalam web (Gregorius, 2000). Web site awalnya merupakan suatu layanan sajian informasi yang menggunakan konsep hyperlink, yang memudahkan surfer atau pengguna internet melakukan penelusuran informasi di internet. Informasi yang disajikan dengan web menggunakan konsep multimedia, informasi dapat disajikan dengan menggunakan banyak

Upload: others

Post on 07-Nov-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

19

BAB III

LANDASAN TEORI

3.1 Pengertian Perancangan

Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu

(Kamus Bahasa Indonesia, 1988). Sedangkan menurut Sardi (2004),

perancangan merupakan penggambaran, perencanaan, pembuatan sketsa dari

beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan

berfungsi.

3.2 Pengertian Web site

Web site merupakan kumpulan halaman web yang saling terhubung dan

file-filenya saling terkait. Web terdiri dari page atau halaman, dan kumpulan

halaman yang dinamakan home page. Home page berada pada posisi teratas,

dengan halaman-halaman terkait berada di bawahnya. Biasanya setiap

halaman di bawah home page disebut child page, yang berisi hyperlink ke

halaman lain dalam web (Gregorius, 2000).

Web site awalnya merupakan suatu layanan sajian informasi yang

menggunakan konsep hyperlink, yang memudahkan surfer atau pengguna

internet melakukan penelusuran informasi di internet. Informasi yang

disajikan dengan web menggunakan konsep multimedia, informasi dapat

disajikan dengan menggunakan banyak media, seperti teks, gambar, animasi,

suara, atau film.

3.3 Pengertian Perancangan Website

Perancangan Website merupakan tahap persiapan untuk rancang bangun

implementasi suatu web, yang menggambarkan bagaimana suatu web

dibentuk yang dapat berupa penggambaran, perencanaan dan pembuatan

sketsa atau pengaturan dari beberapa elemen terpisah ke dalam satu kesatuan

yang utuh dan berfungsi termasuk mengkonfigurasikan komponenkomponen

perangkat lunak dan perangkat keras dari suatu web. Perancangan web dalam

Page 2: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

20

skala besar membutuhkan strategi yang tepat agar perancangan web berjalan

dengan baik, tepat waktu, dan sesuai dengan sasaran yang ditargetkan. Web

skala besar merupakan sebuah web dengan banyak fungsi yang diakses

banyak orang. Semakin besar suatu web maka akan semakin kompleks

pemeliharaan dan pengembangannya lebih lanjut

3.4 Definisi Profil

Identitas dari individu atau organisasi yang memberikan informasi

kepada yang membutuhkan, dengan maksud untuk mengenali, memahami,

dan mempelajari individu atau organisasi tersebut.

3.5 Alat Bantu Perancangan Sistem

Unified Modelling Language (UML) adalah alat atau tool untuk

memodelkan, mendokumentasikan, menspesifikasi pembangunan perangkat

lunak berorientasi objek.

Tujuan dari UML adalah sebagai berikut :

1. Menyediakan bahasa pemodelan visual untuk pengembangan

pemrograman berorientasi objek.

2. Menyediakan basis formal untuk pemahaman pemodelan PBO.

3. Mendorong pemahaman tool berorientasi objek.

Diagram dalam UML terdiri atas diagram terstruktur dan diagram perilaku

berikut ini :

a. Diagram Terstruktur : Class diagram, Object diagram, Component

diagram, Deployment diagram.

b. Diagram Perilaku : Activity Diagram, Use case diagram, Sequence

diagram, Collaboration diagram.

Pada bab ini akan dibahas 4 diagram dasar yang biasa dipakai dalam

analisis dan perancangan yaitu Activity Diagram, Use case diagram,

Sequence diagram, dan Class diagram.

Page 3: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

21

3.5.1 Use Case Diagram

Use case diagram seperti yang telihat pada tabel 3.1 (Adi

Nugroho, 2010) menggambarkan fungsionalitas yang diharapkan dari

sebuah sistem, kebutuhan sistem dari sudut pandang pengguna.

Diagram ini menggambarkan interaksi antara use case dan actor, dan

diharapkan mampu mengilustrasikan systemrequirment atau

kebutuhan sistem. Use case meliputi semua yang ada di dalam sistem,

sedangkan actor meliputi semua yang ada diluar sistem.

Tabel 3.1 Simbol-simbol dalam Use Case Diagram

SIMBOL NAMA KETERANGAN

Actor

Seseorang atau apa saja yang

berhubungan dengan sistem yang

sedang dibangun

Use caseMenggambarkan bagaimana

seseorang menggunakan system

Relasi

asosiasi

Relasi yang dipakai untuk

menunjukkan hubungan antara

actor dan use case

Relasi

include

Memungkinkan satu use case

menggunakan fungsionalitas yang

disediakan oleh usecase lainnya

Relasi extend

Memungkinkan suatu use case

secara optional menggunakan

fungsionalitas yang disediakan oleh

usecase lainnya

3.5.2 Sequence Diagram

Sequence diagramseperti yang telihat pada tabel 3.2 (Adi Nugroho,

2010) adalah diagram interaksi yang disusun berdasarkan urutan

Page 4: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

22

waktu. Setiap diagram sekuensial mempresentasikan satu flow dari

beberapa flow didalam use case.

Tabel 3.2 Simbol-simbol dalam Sequence Diagram

SIMBOL NAMA KETERANGAN

Actor

Orang ataupun pihak yang akan

mengelola system

Lifeline

Menggambarkan sebuah objek

dalam sebuah sistem atau salah

satu komponennya

Create

Message

Pembuatan sebuah message

sederhana antar elemen dan juga

mengindikasikan komunikasi

antara objek

Syncronous

Message

Message ini mengaktifkan

sebuah proses dan sampai

selesai, baru bisa mengirimkan

sebuah message baru

Message to

self

Suatu hasil kembalian sebuah

operasi dan berjalan pada objek

itu sendiri

Page 5: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

23

3.5.3 Activity diagram

Activity diagramseperti yang telihat pada tabel 3.3 (Adi Nugroho,

2010) digunakan untuk menampilkan rangkaian kegiatan,

menunjukkan alur kerja dari suatu titik awal ke titik akhir keputusan,

merinci banyak jalur yang ada dalam perkembangan peristiwa yang

terkandung dalam kegiatan.

Page 6: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

24

Tabel 3.3 Simbol-simbol dalam Activity Diagram

SIMBOL NAMA KETERANGAN

Start state Titik awal atau permulaan

End stateTitik akhir atau akhir dari

aktivitas

ActivityActivity atau aktivitas yang

dilakukan olehactor

DecisionPilihan untuk mengambil

keputusan

Interaction Alur

3.5.4 Class Diagram

Class Diagram seperti yang telihat pada tabel 3.4 (Adi Nugroho,

2010) digunakan untuk menampilkan kelas-kelas atau paket-paket

dalam sistem dan relasi antar mereka. Class diagram menunjukkan

kelas-kelas yang ada di sistem dan hubungan antar kelas-kelas itu,

atribut dan operasi dikelas-kelas. Class diagram menggambarkan

keadaan (atribute/property) suatu sistem, sekaligus menawarkan

layanan untuk memanipulasi keadaan tersebut (metode/fungsi).

Tabel 3.4 Simbol-simbol dalam Class Diagram

SIMBOL NAMA KETERANGAN

Class

Himpunan dari objek-objek yang

berbagi atribut serta operasi yang

sama

Generalization

Garis yang melambangkan konsep

pewarisan dari sautu kelas ke satu

atau lebih sub kelas

........................ Association

Apa yang menghubungkan antara

objek satu dengan objek lainnya

Page 7: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

25

3.6 Perangkat Pembuatan Pemrograman Web

Dalam pembuatan database web diperlukan beberapa perangkat lunak

(software) yang mendukung aplikasi-aplikasi dari web database itu sendiri,

sebagai berikut :

2.6.1 XAMPP

Xampp merupakan tool yang menyediakan paket perangkat lunak

kedalam satu buah paket. Dalam paketnya saudah terdapat Apache

(web server), MySQL (database), PHP (server side scripting), Perl,

FTP server, PHP MyAdmin dan berbagai pustaka bantu lainnya.

Dengan menginstall XAMPP maka tidak perlu lagi melakukan

installasi dan konfigurasi web server Apache, PHP, dan MySQL

secara manual. XAMPP akan menginstallasi dan

mengkonfigurasikannya secara otomatis untuk anda.

Gambar 3.1 Tampilan Utama XAMPP

Page 8: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

26

2.6.2 Adobe Dreamweaver CS3

Menurut Devisi Penelitian MADCOMS (2007:3) Dreamweaver

merupakan software utama yang digunakan oleh Web Designer

maupun Web Programmer dalam mengembangkan suatu situs web.

Hal ini disebabkan ruang kerja, fasilitas dan kemampuan

Dreamweaver yang mampu meningkatkan produktivitas dan

efektifitas dalam desain maupun membangun situs web.

Dreamweaver CS3 memiliki peningkatan kemampuan toolbar,

dimana Dreamweaver CS3 dapat digunakan untuk memodifikasi

tampilan toolbar atau menambahkan fungsi baru. Untuk lebih jelasnya

berikut ini tampilan ruang kerja type coder Dreamweaver CS3.

Gambar 3.2 Adobe Dreamweaver CS3

1. Insert Bar, Berisi tombol-tombol untuk menyisipkan berbagai

macam objek seperti; image, tabel dan layer kedalam dokumen.

Page 9: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

27

2. Document Tool Bar, berisi tombol-tombol dan menu pop up

yang menyediakan tampilan berbeda dari jendela dokumen.

3. Coding Window, merupakan tempat untuk menuliskan kode

program yang akan dieksekusi oleh komputer. Hasil eksekusi

kode program ini, akan berupa halaman-halaman web.

4. Panel Group, adalah kumpulan panel yang saling berkaitan satu

sama lain dan keberadaannya mendukung tampilan halaman web

yang dibuat. Isi dalam panel group dikelompokan dibawah satu

judul web yang dibangun.

5. Property Inspector, digunakan untuk melihat dan mengubah

property objek atau teks yang ada dalam tampilan halaman web.

6. Site Panel, digunakan untuk mengatur file-file dan folder untuk

membentuk susunan direktori sebuah situs web.

2.6.3 HTML

Hyper Text Markup Language (HTML) adalah bahasa yang

mengatur bagaimana tampilan isi dari situs web, di dalam HTML ada

tag-tag dimana tag berfungsi menyediakan informasi berkaitan dengan

sifat dan struktur konten serta referensi untuk gambar dan media

lainnya (Edy Winarno, ST,M.Eng, Ali Zaki, dan SmitDev

Community, 2014:2).

Dokumen HTML terdiri dari unsur HTML, ditandai dengan

tag awal <html> dan diakhiri dengan tag penutup </html>. Tidak

diperlukan suatu program editor khusus untuk menggunakan perintah-

perintah HTML karena dapat ditulis pada berbagai editor diantaranya

Notepad, EditPlus, Komodo Editor, Macromedia

Dreamweaverataupun editor lain yang berbasis GUI (Graphical User

Interface).

Page 10: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

28

2.6.4 PHP

PHP merupakan sebuah bahasa pemrograman server side scripting

yang lahir sejalan dengan perkembangan internet. PHP (Hypertex

Preprocessor) merupakan script yang terintegrasi dengan HTML dan

mampu menyajikan informasi yang dinamis. Pengertian dari server

side scripting adalah bahwa script PHP akan dijalankan di server

selanjutnya hasil eksekusi tersebut akan dikirimkan ke browser.

PHP diciptakan oleh Rasmus Lerdorf tahun 1994. Dalam versi

pertamanya tersebut, Rasmus menggabungkan beberapa script perl

untuk membuat catatan tentang pengunjung homepagenya. Kemudian

dikembangkanlah engine untuk script sehingga lebih powerful dan

muncul PHP versi selection. Kemudian beberapa programmer

bergabung dan mengembangkan PHP versi ketiganya yang kemudian

dikenal luas. (Muhamad Miftakul Amin, 2008:1).

2.6.5 MySQL

MySQL (MyStructure Query Language) adalah sebuah

perangkat lunak sistem manajemen basis data SQL (database

management system) atau DBMS dari sekian banyak DBMS, seperti

Oracle, MS SQL, PostgreSQL, dan lain-lain. MySQL merupakan

DBMS yang multithread, multi-user yang bersifat gratis dibawah

lisensi GNUGeneral Public Licence (GPL).

Menurut Edy Winarno, ST,M.Eng, Ali Zaki, dan SmitDev

Community(2014), MySQL merupakan tipe data relasional yang

artinya MySQL menyimpan datanya dalam bentuk tabel-tabel yang

saling berhubungan.MySQLmemiliki beberapa kelebihan, di

antaranya:

a. MySQL dapat berjalan dengan stabil pada berbagai sistem operasi,

seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, dan

masih banyak lagi.

Page 11: omandreas.files.wordpress.com  · Web viewMenyediakan bahasa pemodelan visual untuk pengembangan pemrograman berorientasi objek. Menyediakan basis formal untuk pemahaman pemodelan

29

b. Bersifat open source, MySQL didistribusikan secara open souce

(gratis), dibawah lisensi GNUGeneral Public Licence (GPL).

c. Bersifat Multiuser, MySQL dapat digunakan oleh beberapa user

dalam waktu yang bersamaan tanpa mengalami masalah,

d. MySQL memiliki kecepatan yang baik dalam menangani query

(perintah SQL). Dengan kata lain, dapat memproses lebih banyak

SQL persatuan waktu.

e. Dari segi keamanan data, MySQL memiliki beberapa lapis, seperti

level subnetmask, nama host, dan ijin akses user dengan sistem

perijinan yang mendetail serta password yang terenkripsi.