1

BAB I

PENDAHULUAN

1.1 Konsep Dasar Website

Website memiliki konsep-konsep dasar yang menjadi acuan dalam

mempelajari suatu web. Pembelajaran tersebut meliputi pengertian website, elemen

dan komponen Website, serta internet sebagai jaringan yang membuat sebuah website

dapat diakses. Melalui pemahaman mengenai konsep dasar website tersebut dapat

mempermudah dalam proses perancangan dan pembuatan sebuah website.

Sistem dapat diartikan sebagai rangkaian dari dua atau lebih komponen-

komponen yang saling berhubungan, yang saling berinteraksi untuk mencapai suatu

tujuan. sistem merupakan suatu jaringan kerja yang terdiri dari prosedur-prosedur

yang saling berhubungan, kemudian berkumpul bersama-sama untuk melakukan atau

menyelesaikan kegiatan dan mencapai suatu sasaran tertentu. (Rahmawati &

Bachtiar, 2018).

Data merupakan sekumpulan keterangan atau fakta mentah berupa simbol,

angka, kata-kata atau citra, yang di dapatkan melalui proses pengamatan atau

pencarian ke sumber-sumber tertentu. Menurut (Rahmawati & Bachtiar, 2018)

“Sistem informasi merupakan sekumpulan aturan yang membentuk sistem dalam

menyajikan data yang memiliki arti (meaningfull) dan daya guna (useful) ”.

Untuk menjalankan program yang ada di dalam buku ini, Internet sebagai

jaringan yang sangat di butuhkan. Internet atau international network merupakan

rangkaian jaringan terbesar di dunia dimana suatu jaringan yang berada pada semua

organisasi di hubungkan dengan suatu jaringan terbesar sehingga dapat saling

berkomunikasi, internet dapat juga disebut jaringan dalam suatu jaringan yang luas.

2

Kemudian selanjutnya adalah tentang website. website merupakan

sekumpulan halaman yang terdiri dari beberapa halaman yang berisi berbagai

informasi dalam bentuk data digital baik berupa teks, gambar, video, audio, dan

animasi lainnya yang disediakan melalui jalur koneksi internet (Mara Destiningrum,

2017).

Website atau yang dikenal juga dengan istilah web adalah suatu sistem yang

berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks,

gambar, multimedia dan lainnya yang dapat diakses di internet yang berisikan semua

informasi yang dibutuhkan pengguna internet. Website terbagi menjadi beberapa

jenis, antara lain :

1. Website Berdasarkan Sifat

a. Website Statis

Secara sederhana, website statis dapat didefinisikan sebagai website yang

kontennya konstan atau tidak berubah. Setiap laman dibuat dengan kode

HTML dan menunjukkan informasi yang sama kepada setiap pengunjung.

Hanya webmaster atau developer yang bisa melakukan update pada konten

website statis. Karena website statis tidak membutuhkan update konten secara

berkala, website statis tidak memerlukan database. Biasanya website statis

digunakan untuk website perusahaan yang hanya perlu memberikan

informasi-informasi dasar seperti alamat, kontak, dan sejarah perusahaan.

b. Website Dinamis

Sebaliknya website dinamis adalah website yang kontennya selalu di-update

secara berkala. Kebanyakan website bersifat dinamis karena lebih mudah

dikelola dibandingkan website statis. Website dinamis menampilkan

3

kontennya dari database yang biasanya hanya bisa diakses oleh webmaster

atau developer.

2. Website Berdasarkan Platform

a. CMS

Metode pertama adalah cara yang paling populer, yaitu menggunakan

Content Management System (CMS). CMS adalah perangkat lunak atau

sistem yang digunakan untuk membuat dan mengatur konten digital. Anda

bisa membuat website dengan cepat dan mudah menggunakan CMS.

Beberapa CMS yang paling banyak digunakan adalah WordPress, Joomla!,

dan Drupal.

b. Website Builder

Website builder adalah platform yang membantu membuat website dengan

cepat, tanpa perlu memahami coding atau kemampuan desain sama sekali.

Website builder cocok untuk membuat website dalam waktu singkat, tidak

mempunyai kemampuan teknis dan tidak ada waktu untuk mempelajarinya.

Beberapa contoh website builder populer adalah Wix, Site Builder, dan

Weebly.

Kelebihan dari website builder adalah pengguna mendapatkan paket lengkap

membuat website, dari hosting, domain, hingga pilihan template. Pengguna

hanya perlu mengganti konten sesuai yang diinginkan dan bisa dibantu oleh

support dari penyedia website builder.

c. HTML dan CSS

Jenis website berdasarkan platform yang terakhir adalah website yang

menggunakan HTML dan CSS. Biasanya website statis dibuat menggunakan

metode ini. Metode membuat website terakhir ini memerlukan pengetahuan

4

tentang coding dan pemrograman menggunakan HTML dan CSS. Software

yang digunakan seperti Notepad++, Text Wrangler, atau Sublime Text.

3. Website Berdasarkan Fungsi

a. Blog atau Website Pribadi

Sejak awal tahun 2000-an, blog menjadi tren baru sebagai jurnal pribadi yang

bisa dikelola dan diakses secara online. Jika ingin menuliskan pengalaman

pribadi, opini, atau kisah perjalanan dapat bisa mempublikasikannya melalui

blog. Menuliskan cerita blog bahkan bisa dijadikan sebagai pekerjaan.

Banyak blogger Indonesia yang sukses melalui blog mereka seperti Trinity

Traveler, Anak Jajan, dan Sugeng.

b. Ecommerce/Toko Online

Anda juga dapat memanfaatkan website untuk membuat toko online.

Meskipun Anda sudah berjualan di marketplace atau media sosial, Anda tetap

memerlukan website. Sebagaimana Anda memiliki toko fisik di dunia nyata,

website dapat difungsikan sebagai “toko” Anda di dunia maya.

c. Website Perusahaan

Jika perusahaan Anda tidak melakukan transaksi secara online, Anda juga

perlu memiliki website resmi perusahaan agar calon konsumen bisa

menemukan informasi resmi tentang perusahaan Anda dari website

resmi. Dengan begitu, kepercayaan konsumen terhadap perusahaan Anda

akan meningkat karena mereka bisa menemukan informasi resmi yang

dibutuhkan melalui mesin pencarian.

d. Blog (Content Marketing)

Selain digunakan sebagai jurnal pribadi, blog juga dapat digunakan sebagai

alat content marketing. Anda dapat mendatangkan trafik ke website toko

5

online atau website perusahaan Anda melalui blog. Anda dapat membuat

konten atau artikel menggunakan kata kunci yang sering digunakan oleh

calon konsumen Anda.

1.2 Bahasa Pemrograman

Bahasa pemrograman, atau sering diistilahkan juga dengan bahasa komputer

atau bahasa pemrograman komputer adalah instruksi standar untuk memerintah

komputer. Bahasa pemrograman ini merupakan suatu himpunan dari aturan sintaks

yang dipakai untuk mendefinisikan program komputer. Bahasa ini memungkinkan

seorang programmer dapat menentukan secara persis data mana yang akan diolah

oleh komputer, bagaimana data ini akan disimpan/diteruskan, dan jenis langkah apa

yang akan diambil dalam berbagai situasi secara persis. Beberapa bahasa

pemrograman diantaranya :

1. HTML (Hypertext Markup Language)

HTML atau Hyper Text Markup Language merupakan salah satu format yang

digunakan dalam pembuatan dokumen atau aplikasi yang berjalan di halaman web.

HTML inilah yang menyusun sebuah halaman web menjadi sebagaimana yang kita

lihat melalui browser (penjelajah internet). HTML Biasanya berupa sebuah bahasa

Scripting, yaitu bahasa pemograman yang menyediakan fasilitas penerjemahan serta

kompilasi kode dalam satu rangkaian proses secara integrative sehingga

memungkinkan kode dibuat dapat langsung di jalankan sebagai program secara

dinamis.

Secara sederhana HTML terdiri dari header dan body, yang diawali dengan

penulisan <!DOCTYPE html> kemudian tag pembuka <html> dan tag akhir </html>.

Berikut contoh penulisan struktur dasar HTML :

6

<!DOCTYPE html>

<html>

<head>

<title>Judul Dokumen</title>

</head>

<body>

<p>Ini adalah isi dari dokumen</p>

</body>

</html>

2. PHP (Hypertext Processor)

Menurut (Firman, Wowor, & Najoan, 2016) “ PHP adalah akronim dari

Hypertext Preprocessor, yaitu suatu bahasa pemrograman berbasiskan kode – kode

(script) yang digunakan untuk mengolah suatu data dan mengirimkan nyakembali ke

web browser menjadi kode HTML”. PHP biasanya terpasang pada HTML. Dengan

bahasa pemrograman ini dapat dibuat suatu website yang dinamis. Kelebihan dari

PHP antara lain:

a. PHP merupakan suatu bahasa script yang tidak melakukan sebuah kompilasi

dalam penggunaannya.

b. PHP dapat berjalan pada Web server yang dirilis oleh Microsof, juga pada

Apache yang bersifat open source.

3. CSS (Cascading Style Sheet)

Casading Style Sheet adalah suatu intruksi bagaimana suatu web akan di

tampilkan, meskipun HTML juga bisa bisa melakukannya, akan tetapi css memiliki

keunggulan di dalam segi efisiensi, dimana file CSS bisa di setting internal ataupun

external. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word

yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,

images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa

berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web

yang dibuat dengan bahasa HTML.

7

4. JavaScript

JavaScript (Scripting Language), yaitu kumpulan instruksi perintah yang

digunakan untuk mengendalikan beberapa bagian dari sistem operasi yang biasa

diletakkan bersama kode HTML untuk menentukan suatu tindakan. JavaScript bisa

digunakan untuk banyak tujuan, misalnya untuk membuat efek baik di gambar

maupun teks.

5. jQuery

jQuery merupakan salah satu teknik atau kumpulan library JavaScript yang

sangat terkenal dengan animasinya. Dengan sedikit sentuhan, animasi dalam website

mudah kita ciptakan. Jquery dapat dianggap sebagai frame work JavaScript. jQuery

dirancang sedemikian rupa supaya membuat program menggunakan Javascript

menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode

lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

1.3 Aplikasi Pengola Basis Data

Basis data memiliki peran yang penting dalam suatu organisasi, dan di

manfaatkan untuk sejumlah tujuan utama organisai. Dengan basis data pengambilan

informasi dapat dilakukan dengan cepat dan mudah. Database adalah koleksi terpadu

dari data-data yang saling berkaitan dari suatu enterprise (perusahaan, instansi

pemerintah atau swasta).

Manfaat basis data adalah untuk kecepatan dan kemudahan (speed), efisiensi

ruang penyimpanan (space), keakuratan (accuracy), ketersediaan (availability),

kelengkapan (completeness), keamanan (security), dan kebersamaan (sharebility).

Berikut ini adalah aplikasi yang dapat digunakan untuk mengelola basis data:

8

1. Php MyAdmin

Pengertian Database Phpmyadmin adalah sebuah system yang di buat untuk

mengorganisasi, menyimpan dan menarik data dengan mudah. Database

PhpMyAdmin terdiri dari kumplan data yang terorganisir untuk 1 atau lebih

penggunaan, dalam bentuk digital.

Database digital di manage menggunakan Database Management System

(DBMS), yang menyimpan isi database, mengizinkan pembuatan dan maintenance

data, pencarian dan akses yang lain. Beberapa Database yang ada saat ini adalah :

Mysql, Sql Server, Ms.Access, Oracle, dan PostgreSql.

2. XAMPP

XAMPP adalah sebuah aplikasi yang berfungsi untuk menyimpan file

Website dan database. XAMPP merupakan program paket PHP dan MySQL berbasis

open source yang saat ini merupakan andalan para programming.

Sumber . (D.Melyani , 2015)

Kelebihan menggunakan XAMPP sebagai web server software adalah

sebagai berikut :

9

a. XAMPP berjalan pada background sehingga bisa tidak mengganggu aktivitas

lainnya.

b. Service tetap berjalan jika sistem di-log off, karena jika sebagai server,

pengaturan lalu lintas data harus tetap berjalan.

c. Dapat membatasi kewenangan tiap akun yang mengakses, jadi keamanan

lebih terjamin.

1.4 Analisa Kebutuhan

1.4.1 Kebutuhan Pengguna

Indonesia, seperti halnya semua negara di Dunia, tak luput dari dampak krisis

lingkungan global. Parahnya lagi, Indonesia di dalam territorial kenegaraannya

sendiri dihadapkan pada persoalan lingkungan hidup yang kian mengkhawatirkan.

Pencemaran sungai, pencemaran udara, penebangan liar (illegal logging), kebakaran

hutan (forest fire) serta banjir dan tanah longsor yang telah menelan korban jiwa juga

hilangnya materi yang tidak terhitung nilai kerugiannya.

Masyarakat harus lebih sadar akan lingkungan yang semakin memburuk ini,

namun kenyataannya, saat ini masih minim sumber informasi pada masyarakat

tentang pelestarian lingkungan sehingga masih ada kegiatan pelestarian lingkungan

yang belum diketahui oleh masyarakat lokal maupun luar daerah. Donasi juga lebih

ditujukan untuk kemanusiaan dan jarang sekali donasi untuk bumi sehingga

lingkungan bumi terabaikan. Serta belum ada media khusus yang dapat mencangkup

seluruh masyarakat.

Untuk itu, dalam rangka ingin membantu menyelamatkan lingkungan, penulis

ingin membuat sebuah sistem informasi berbasis web yang nantinya bisa digunakan

oleh semua masyarakat. Dalam program ini nantinya akan menjadi sumber informasi

10

dan donasi mengenai kegiatan pelestarian lingkungan. Disamping itu juga menjadi

wadah aspirasi masyarakat mengenai pelestarian lingkungan. Sehingga masyarakat

dipermudah untuk mencari informasi dan ikut berperan dalam kegiatan tersebut.

Informasi kegiatan dan berbagai artikel, yang dimaksud dari informasi

kegiatan dan berbagai artikel adalah memberikan informasi tentang adanya kegiatan

penanaman pohon yang ditampilkan melalui sistem ini serta berbagai macam artikel

tentang pemahaman tanaman, manfaat dari tanaman dan sebagai tanda bukti kegiatan

yang sudah dilaksanakan.

Dengan adanya program ini, diharapkan dapat membantu menyelamatkan

lingkungan alam terutama di Indonesia. Masyarakat menjadi lebih mudah untuk ikut

andil dalam pelestarian lingkungan dan menumbuhkan kembali rasa cinta terhadap

lingkungan.

1.4.2 Skenario Kebutuhan User

a. Skenario Kebutuhan Pengunjung

1) Pengunjung dapat melihat Artikel

2) Pengunjung dapat melihat kegiatan yang akan berlangsung maupun

sedang berlangsung.

3) Pengunjung dapat mendaftar sebagai Donatur.

4) Pengunjung dapat mendaftar sebagai Komunitas.

5) Pengunjung dapat memberikan saran dan komentar pada kegiatan atau

artikel yang dipubliskasikan oleh admin.

b. Skenario Kebutuhan Donatur

1) Donatur dapat memasukkan kode pada setiap donasi.

2) Donatur dapat menambah / mengubah data donasi.

11

3) Donatur dapat melakukan pembayaran

4) Donatur dapat melihat Histori Donasi

5) Donatur dapat mencetak laporan

c. Skenario Kebutuhan Komunitas.

1) Komunitas dapat mengajukan proposal kegiatan.

2) Komunitas dapat menulis artikel kegiatan

3) Komunitas dapat melihat Histori pengajuan.

1.4.3 Skenario Kebutuhan Admin

1) Mengelola artikel yang dibuat komunitas.

2) Menambah atau mengurangi artikel dan kategori.

3) Mengelola data donatur dan pembayaran donasi.

4) Mengelola data komunitas, data pengajuan komunitas dan data kegiatan

komunitas.

5) Mengupdate data donasi pada setiap kegiatan.

6) Mengelola data pengeluaran dan mencetaknya.

7) Mengedit tampilan user.

1.4.4 Kebutuhan Sistem

1) Pengguna harus melakukkan login terlebih dahulu untuk dapat mengakses

program ini kecuali user dengan memasukkan username dan password agar

privasi masing-masing pengguna tetap terjaga keamanannya.

2) Sistem melakukan pengolahan data atas data yang sudah diinput oleh

pengguna.

3) Sistem melakukan penyimpanan data agar bisa dicetak sewaktu-waktu.

4) Sistem dapat me rubah, menambah atau mengurangi data yang sudah ada.

12

5) Pengguna harus melakukan logout setelah selesai menggunakan program

kecuali user.

6) Keamanan sistem menggunakan MD5 saat login dan CAPTCHA saat

pendaftaran.

1.5 Rancangan Diagram Use Case

1. Diagram Use Case User

Gambar I.1 Diagram Use Case User

Deskripsi Diagram Use Case User/Pengguna Biasa

Tabel I.1

Deskripsi Diagram Use Case User/Pengguna Biasa

Use Case

Name User

Requirements Regristrasi/Pendaftaran sebagai Donatur/Komunitas

Goal Terdaftar dan mendapatkan akun untuk Login

Pre-

Conditions User melakukan pendaftaran sebagai Donatur/Komunitas

Post- Regristrasi dapat dilaksanakan atau di proses

13

Conditions

Failed end

Conditions -

Actor User

Main

Flow/Basic

Path

1. User dapat memilih regristrasi sebagai Donatur atau Komunitas

2. User melakukan Regristrasi/Pendaftaran Terlebih Dahulu

3. Setelah regristrasi selesai maka user akan mendapatkan akun berupa

email dan password untuk login sesuai regristrasi yang dipilih yaitu

Donatur atau Komunitas.

4. Di halaman login user memasukan email dan password kemudian klik

tombol “Login”

Invariant B

2. Diagram Use Case Donatur

Gambar I.2 Diagram Use Case Donatur

Deskripsi Diagram Use Case Donatur

Tabel I.2

Deskripsi Diagram Use Case Donatur

Use Case

Name Donatur

Requirements Melakukan Donasi dan konfirmasi pembayaran

Goal Konfirmasi pembayaran

Pre-

Conditions Donatur melakukan donasi untuk pohon

Post- Donasi dan konfirmasi pembayaran dapat dilaksanakan

14

Conditions

Actor Donatur dan Admin

Main

Flow/Basic

Path

1. Donatur melakukan Login terlebih dahulu

2. Donatur melakukan donasi pada form donasi untuk pohon setelah

pengisian data menunggu konfirmasi pembayaran

3. Donatur melakukan konfirmasi pembayaran dengan mengupload

bukti transfer melalui form konfirmasi pembayaran

4. Setelah melakukan konfirmasi pembayaran admin akan

memverifikasi di form data donasi

5. setelah kegiatan dari komunitas sudah dilaksanakan maka admin

akan memberikan tanda bukti berupa foto pohon yang dinamai.

6. Donatur dapat melihat histori donasi dan juga bukti dari kegiatan

berupa foto pohon yang dinamai nama donatur atau foto kegiatan.

Alternate

Flow/Invariant

A

-

Invariant B

3. Diagram Use Case Komunitas

Gambar I.3 Diagram Use Case Komunitas

15

Deskripsi Diagram Use Case Komuitas

Tabel I.3

Deskripsi Diagram Use Case Komunitas

Use Case

Name Komunitas

Requirements Pengajuan Kegiatan Alam/lingkungan untuk komunitas

Goal Pengajuan Kegiatan, Pencairan dana, dan pembuatan artikel dapat

dilaksanakan

Pre-Conditions Komunitas melakukan pengajuan kegiatan

Post-

Conditions Pengajuan kegiatan dan pembuatan artikel dapat dilaksanakan

Failed end

Conditions -

Actor Komunitas dan Admin

Main

Flow/Basic

Path

1. Komunitas melakukan login terlebih dahulu

2. Komunitas memilih menu pengajuan kegiatan

3. Masukan data sesuai form kemudian klik tombol “ajukan

kegiatan” maka data pengajuan akan tersimpan dalam sistem

4. Data dalam sistem akan di verifikasi oleh admin sesuai kriteria

atau persyaratan pengajuan.

5. Apabila kegiatan memenuhi syarat maka akan dipromosikan.

Dan pada halaman histori pengajuan komunitas akan ada notif pada

tabel bagian status.

6. kemudian pencairan dana diverifikasi oleh admin.

7. Setelah kegiatan selesai komunitas diwajibkan membuat artikel

pada menu artikel yang ada pada halaman komunitas.

Alternate

Flow/Invariant

A

-

Invariant B

16

4. Diagram Use Case Admin

Gambar I.4 Diagram Use Case Admin

Deskripsi Diagram Use Case Admin

Tabel I.4

Deskripsi Diagram Use Case Admin

Use Case

Name Admin

Requirements Pengelolahan Website

Goal Semua transaksi berjalan lancar dan dapat cetak laporan

Pre-Conditions Admin melakukan pengelolaan data pada seluruh sistem yang ada

Post-

Conditions Pengelolaan data dapat dilaksanakan

17

Failed end

Conditions -

Actor Admin

Main

Flow/Basic

Path

1. Admin melakukan Login terlebih dahulu

2. Admin melakukan pengelolaan data pada serluruh sistem yaitu

tentang, kegiatan, pengajuan, artikel, pembayaran, donasi, donatur

komunitas, nomor rekening, kontak, pengeluaran, cetak laporan

pengeluaran, dan cetak laporan donasi

Alternate

Flow/Invariant

A

-

Invariant B

1.6 Rancangan Diagram Aktifity

1. Diagram Activity User

Gambar I.5 Diagram Activity User

18

2. Diagram Activity Donatur

Gambar I.6 Diagram Activity Donatur

19

3. Diagram Activity Komunitas

Gambar I.7 Diagram Activity Komunitas

20

4. Diagram Activity Admin

Gambar I.8 Diagram Activity Admin

21

1.7 Entity Relationship Diagram (ERD)

Gambar 1.9 Entity Relationship Diagram (ERD) bagian Donatur

22

Gambar 1.10 Entity Relationship Diagram (ERD) bagian Admin Dan Komunitas

23

1.8 Logical Structure Record (LRS)

Gambar 1.11 Logical Structure Record (LRS)

24

1.9 Class Model/Class Diagram

Gambar 1.12 Class Model/Class Diagram

25

1.10 Sequence Diagram

1. Sequence Diagram Form Donasi

Gambar 1.13 Sequence Diagram Form Donasi

2 Sequence Diagram Form Pengajuan Kegiatan

Gambar 1.14 Sequence Diagram Form Pengajuan Kegiatan

26

3 Sequence Diagram Form Cetak Laporan Donasi Terkumpul

Gambar 1.15 Sequence Diagram Form Cetak Laporan Donasi Terkumpul

4 Sequence Diagram Laporan Pengeluaran

Gambar 1.16 Sequence Diagram Laporan Pengeluaran

27

1.11 Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

a. Server

1) CPU

a) Processor Pentium Core 2 Duo

b) RAM DDR2 2 GB

c) Hard Disk 500 GB

2) Mouse Teknologi sensor: Logitech Advanced Optical Tracking

3) Keyboard USB (typewriter key)

4) Monitor dengan resolusi layar minimum 1024x768 SVGA

5) Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1) CPU

a) Proccessor Pentium ® 4

b) RAM DDR2 2 GB

c) Harddisk 500 GB

2) Mouse Teknologi sensor: Logitech Advanced Optical Tracking

3) Keyboard USB (typewriter key)

4) Monitor resolusi layar minimum 1024x768 SVGA

5) Koneksi internet dengan kecepatan 56 kbps.

2. Spesifikasi Software

a. Server

1) Sistem operasi yang umum digunakan seperti : Microsoft Windows 8

atau Linux (Ubuntu, Fedora,Slax dll).

2) Aplikasi bundle web server seperti :XAMPP, WampServer dll.

28

3) Aplikasi Web Browser seperti Mozila Firefox, Opera, Internet

Explorer, Google Chrome dll

b. Client

1) Sistem operasi yang umum digunakan seperti : Microsoft Windows 8

atau Linux (Ubuntu, Fedora,Slax dll).

2) Aplikasi Web Browser seperti Mozila Firefox, Opera, Internet

Explorer, Google Chrome dll