LEMBAR PENGESAHAN. Tugas Akhir Program Studi Sistem Informasi Fakultas Teknik Universitas Widyatama. Oleh : Aburizal Fazrin K A

LEMBAR PENGESAHAN KONTROL PROSES PENGAJUAN CORPORATE SOCIAL RESPONSIBILITY UMKM BAGI PERUSAHAAN PEMBERI DANA BERBASIS WEB (Studi Kasus di BPPKU KADIN Kota Bandung)

Tugas Akhir Program Studi Sistem Informasi Fakultas Teknik Universitas Widyatama

Oleh : Aburizal Fazrin K A 11.08.005

Telah disetujui dan disahkan di Bandung, Juli 2012

Pembimbing Kampus,

Muh. Rozahi Istambul, S.Kom., M.T. NID. 0414106701

Ka.Prodi Sistem Informasi

Dekan Fakultas Teknik,

M. Rozahi Istambul, S.Komp., M.T.

Setiadi Yazid, Ir., M.Sc., Ph.D.

NID. 0414106701

NID. 1130905137

i

SURAT PERNYATAAN Saya yang bertandatangan di bawah ini :

Nama

: Aburizal Fazrin Kusumah Anhar

NPM

: 1108005

Tempat dan Tanggal Lahir

: Bandung, 21 April 1987

Alamat

: Jl. Sadang Sari II No. 35 Bandung 40134.

Menyatakan bahwa laporan Tugas Akhir ini adalah benar hasil karya saya sendiri. Bila terbukti tidak demikian, saya bersedia menerima segala akibatnya.

Bandung, 31 Juli 2012

Aburiuzal Fazrin K A

ii

ABSTRAK Industri kreatif berorientasi pasar di Bandung menghadapi banyak tantangan dari menghasilkan produk yang digemari hingga mengikuti pesatnya perkembangan tren masyarakat. Karena sebagian besar industry kreatif tersebut tergolong Usaha Mikro, Kecil, dan Menengah (UMKM), mereka memerlukan bantuan baik keahlian dan pendanaan untuk menghadapi persoalan yang muncul dan agar dapat tumbuh menjadi lebih besar dan bisa diandalkan. Pemerintah telah menerapkan Corporate Social Responsibility (CSR) sebagai sarana dalam membantu Usaha Mikro, Kecil, dan Menengah terutama dalam bidang pendanaan. Program CSR ini telah dicanangkan oleh pemerintah dengan “Peraturan Menteri BUMN No. 5/2007 Tentang Program Kemitraan BUMN dengan Usaha Kecil dan Program Bina Lingkungan,” sebagai salah satu landasan hukum. Pengembangan sistem menggunakan analisa berorientasi objek dengan metoda protyping, yang dilanjutkan dengan perancangan yang meliputi perancangan proses, perancangan basis data dan antarmuka. Implementasi hasil perancangan yaitu pengkodean dengan menggunakan bahasa pemrograman yang telah di tetapkan. Aplikasi berbasis web (web portal) adalah alat yang tepat untuk mengkoordinasikan BUMN dan UMKM dalam pengelolaan informasi CSR. Dalam web portal ini, UMKM dapat melihat informasi mengenai BUMN yang akan memberikan dana CSR. UMKM dapat mengajukan dana CSR hanya melalui web portal ini. Berikutnya BUMN dapat melihat UMKM mana saja yang telah mendapatkan dana CSR dan yang tidak mendapatkan juga dapat menjadi control proses antara BUMN pemberi dana CSR.

Kata Kunci: Corporate Social responsibility, UMKM, BUMN, Web portal.

iii

ABSTRACT Market-oriented creative industries in Bandung are facing plenty of obstacles, from providing well-liked products to keeping up with the latest market trend. Since most of those industries are small and micro businesses (UMKM), they are in need of more funding to deal with those problems and to help them evolve to be bigger and more reliable business. The government has implemented Corporate Social Responsibility (CSR) as a mean to help small and micro businesses by providing them with funding taken from Government-owned businesses i.e. BUMN. This program has been regulated by Indonesian government with formal and legal ruling. System development using object-oriented analisys methods prototyping, followed by a design that includes process design, database design and interface. Implementation results of the coding design using a programming language that has been set. A web-based application e.g. web portal is an excellent tool to coordinate between BUMN, UMKM, and the government. In this web portal, each side can view which UMKM has received the funding, also who provided the funds. The government can use this portal as a mean to monitor the process of funding. By regulating what data can be viewed by each side, it is also possible to give access to public to view some non-sensitive data regarding funds and grants of CSR.

Keywords: Corporate social Responsibility, UMKM, BUMN, Web portal.

iv

KATA PENGANTAR Segala puji dan syukur penulis ucapkan kehadirat ALLAH SWT sehingga penulis dapat menyelesaikan Laporan Tugas Akhir ini dengan judul “KONTROL PROSES PENGAJUAN CORPORATE SOCIAL RESPONSIBILITY UMKM BAGI PERUSAHAAN PEMBERI DANA BERBASIS WEB” Dalam penyusunan Laporan Tugas Akhir ini penulis tidak jarang selalu mendapat hambatan, tantangan dan kesulitan, hal ini disebabkan karena banyak faktor dari keterbatasan dan kemampuan yang penulis miliki. Penulis juga sadar sepenuhnya bahwa tanpa bantuan, bimbingan, petunjuk serta dorongan dari berbagai pihak, tidak mungkin Laporan Tugas Akhir ini dapat selesai, sehubungan dengan hal tersebut, maka penulis dalam kesempatan ini dengan segala kerendahan hati penulis mengucapkan terima kasih kepada: 1. Allah SWT atas semua rahmat, karunia serta pertolongan-Nya yang telah diberikan kepada penulis disetiap langkah dalam pembuatan program hingga penulisan laporan tugas akhir ini. 2. Ayah dan Ibu tercinta, kakak dan adik-adik ku, serta semua sanak sodara atas doanya dan segala dukungan, motivasi, dan kasih sayangnya yang telah diberikan kepada penulis. 3. Bapak M. Rozahi Istambul, S.komp., M.T. selaku Ketua Prodi Sistem Informasi Universitas Widyatama, sekaligus Dosen Pembimbing Tugas Akhir. 4. Bapak Murnawan, S.T., M.T. atas motivasi dan wawasan tentang dunia IT. 5. Seluruh Dosen Prodi Sistem Informasi Sistem Informasi yang telah banyak memberikan ilmunya kepada penulis, Ibu Sri Lestari, Ir., M.T., Ibu Maniah, Ir., M.T. selaku dosen wali, Ibu Sumi Kusumawati, Ir. Dan dosen lainnya. 6. Sarita Dwi Arizky, yang selalu ada disaat suka maupun duka, terima kasih atas doanya dan dukungannya serta kesabrannya.

v

7. Sahabat-sahabat angakatan 2008 yang selama ini telah menjadi sahabat yang baik, Sony, Tomy, Aci, Yan, Rayzam, Gita teman seperjuangan Tugas Akhir, Cecep, Charisma yang memberi motivasi, Tedy, Adit, Feby, Fauzan, Cahya, Ghilaman, Arini, Eliza, Nana, Tuti, Zahra, dan teman-teman ku yang lainnya. 8. Teman-teman DIS-Corner yang selama ini telah membantu dalam akreditasi Soni, Aci, Tomi, Cecep, S.T, Charisma, S.T, Yan, Rayzam, Fauzan, Irawan alias iwa. 9. Kaka Angakatan 2007, Fakhrurozi, S.T.,

Deden Pradeka, S.T., Risky

Destiana, S.T., Febrada Aditya, S.T., terima kasih atas dukungan dan motivasinya juga kodingnya. 10. Bapak Dany dan Fauzi (Sekretariat Prodi, Fakultas Teknik), Staff Karyawan Universitas Widyatama yang telah membantu dalam urusan administrasinya. 11. Terima kasih kepada Ticer yang telah membantu dalam pembuatan laporan dan sharing knowladge tentang berbagai hal, yang membuat saya berpikir lebih baik juga teman-teman Mabes Warkop KABITA Group. 12. Semua pihak yang telah membantu, yang tidak dapat penulis sebutkan satu per satu. Penulis menyadari bahwa kajian yang penulis bahas masih jauh dari sempurna. Namun demikian penulis mengharapkan semoga kajian pada Laporan Tugas Akhir ini dapat bermanfaat baik bagi penulis maupun bagi yang memerlukannya. Tidak lupa penulis meminta maaf bila pada penyusunan Laporan Tugas Akhir ini masih banyak kesalahan baik dari tulisan maupun bahasanya. Oleh karena itulah segala teguran, kritik, serta saran-saran yang sifatnya membangun sangat diharapkan penulis. Bandung, 31 Juli 2012

Aburiuzal Fazrin K A

vi

Daftar Isi

DAFTAR ISI LEMBAR PENGESAHAN................................................................................... i SURAT PERNYATAAN..................................................................................... ii ABSTRAK ......................................................................................................... iii ABSTRACT ....................................................................................................... iv KATA PENGANTAR ......................................................................................... v DAFTAR ISI ..................................................................................................... vii DAFTAR GAMBAR ........................................................................................ xiii DAFTAR TABEL ........................................................................................... xvii BAB I

PENDAHULUAN .............................................................................. I-1

1.1

Latar Belakang Masalah...................................................................... I-1

1.2

Identifikasi Masalah............................................................................ I-2

1.3

Rumusan Masalah............................................................................... I-2

1.4

Maksud dan Tujuan ............................................................................ I-3

1.5

Batasan Masalah ................................................................................. I-3

1.6

Metodologi Penelitian ......................................................................... I-4

1.7

Sistematika Penulisan ......................................................................... I-4

BAB II

LANDASAN TEORI ..................................................................... II-1

2.1

Corporate Social Resposibility ........................................................... II-1

2.2

Pengertian Web Browser................................................................... II-1

2.2.1

HTTP ......................................................................................... II-1

2.2.2

Web Browser .............................................................................. II-2

2.2.3

Web Server ................................................................................. II-2

2.2.4

World Wide Web (WWW) ......................................................... II-3

2.2.5

Hyper Text Markup Language (HTML) ...................................... II-3

2.3

Metodologi Yang Digunakan ............................................................. II-3

2.3.1

Prototyping-based Methodology ................................................. II-3

vii

Daftar Isi

2.3.2

Object Oriented Programming (OOP) ......................................... II-7

2.3.3

Unified Modeling Language ( UML ) ......................................... II-8

2.4

Tools Adobe Dreamweaver CS5.5 ................................................... II-15

2.4.1

Tentang Adobe Dreamweaver CS5.5 ........................................ II-15

2.4.2

Ruang kerja Adobe Dreamweaver CS5.5 .................................. II-16

2.4.3

PHP ( Personal Home Page Hypertext Preprocessor) ................ II-18

2.4.4

Script PHP ................................................................................ II-18

2.4.5

Embedded Script ...................................................................... II-19

2.4.6

Non Embedded Script ............................................................... II-19

2.5

MySQL............................................................................................ II-20

2.6

Apache ............................................................................................ II-21

BAB III

ANALISIS .................................................................................... III-1

3.1

Identifikasi Masalah............................... Error! Bookmark not defined.

3.2

Analisis Sistem Yang Sedang Berjalan.............................................. III-1

3.2.1

Skenario Proses Pengajuan Dana CSR ....................................... III-2

3.2.2

Kelemahan Sistem Lama ........................................................... III-3

3.3

Hasil Analisis ................................................................................... III-3

3.4

Analisis Sistem Baru ......................................................................... III-4

3.5

Skenario Proses Media Informasi Kontrol Dana CSR........................ III-5

3.6

Analisis Kebutuhan Perangkat Lunak yang dikembangkan dengan Model

Business Use Case ...................................................................................... III-5 3.6.1

Definisi Aktor ............................................................................ III-5

3.6.2

Deskripsi Use Case .................................................................... III-6

3.6.3

Use Case Media Media Informasi Kontrol Proses Dana CSR ..... III-7

3.6.4

Skenario Use Case Login ........................................................... III-8

3.6.4.1

Activity Diagram Use Case Login ...................................... III-8

viii

Daftar Isi

3.6.4.2

Skenario Use Case Admin Pengelolaan Media Informasi

Kontrol Proses Dana CSR ................................................................... III-9 3.6.4.3

Activity Diagram Admin Pengelolaan Media Informasi Dana

CSR

........................................................................................... III-9

3.6.4.4

Skenario Use Case UMKM Pengajuan Dana Media Informasi

Dana CSR ......................................................................................... III-20 3.6.4.5

Activity Diagram UMKM Pengajuan Dana Media Informasi

Dana CSR ......................................................................................... III-21 3.6.4.6

Skenario Use Case Mitra Manage Persetujuan Pengajuan Media

Informasi Dana CSR ......................................................................... III-21 3.6.4.7

Activity Diagram Mitra Manage Persetujuan Pengajuan Media

Informasi Dana CSR ......................................................................... III-22 BAB IV

PERANCANGAN......................................................................... IV-1

4.1

Perancangan Sistem .......................................................................... IV-1

4.2

Perancangan Menu............................................................................ IV-1

4.3

Model Use Case ................................................................................ IV-2

4.3.1

Use Case Diagram ..................................................................... IV-2

4.3.2

Definisi Actor ............................................................................ IV-3

4.3.3

Definisi Use Case ...................................................................... IV-4

4.3.4

Skenario Use Case ..................................................................... IV-4

4.4

Activity Diagram .............................................................................. IV-8

4.5

Realisasi Use Case Tahap Perancangan ............................................. IV-8

4.5.1

Class Diagram ........................................................................... IV-8

4.5.2

Sequence Diagram ..................................................................... IV-9

4.5.2.1

Sequence Diagram Login .................................................. IV-10

4.5.2.2

Sequence Diagram Login Mitra CSR ................................ IV-10

4.5.2.3

Sequence Diagram Login UMKM .................................... IV-11

4.5.2.4

Sequence Diagram Pengajuan Dana CSR.......................... IV-11

ix

Daftar Isi

4.5.2.5 4.5.3

Sequence Diagram Proses Pengajuan Dana CSR............... IV-12

Collaboration Diagram Login .................................................. IV-12

4.5.3.1

Collaboration Diagram Login ........................................... IV-13

4.5.3.2

Collaboration Diagram Login Mitra CSR.......................... IV-13

4.5.3.3

Collaboration Diagram Login UMKM .............................. IV-14

4.5.3.4

Collaboration Diagram Pengajuan Dana CSR ................... IV-14

4.5.3.5

Collaboratin Diagram Proses Pengajuan Dana CSR .......... IV-15

4.6

Lingkungan Operasional ................................................................. IV-15

4.7

Perangkat Lunak ............................................................................. IV-15

4.8

Perangkat Keras .............................................................................. IV-16

4.9

Karakteristik Pengguna ................................................................... IV-16

4.10 Layout Antarmuka ......................................................................... IV-17 4.10.1 Antarmuka Menu Utama.......................................................... IV-17 4.10.2 Antarmuka Menu Login ........................................................... IV-17 4.10.3 Antarmuka Menu Registrasi..................................................... IV-18 4.10.4 Antarmuka Menu Pengajuan Dana CSR................................... IV-18 4.10.5 Antarmuka Menu Pengajuan CSR dari UMKM ....................... IV-19 4.10.6 Antarmuka Menu Admin BUMN ............................................. IV-19 4.10.7 Antarmuka Menu Edit Proses Dana CSR ................................. IV-20 4.10.8 Antarmuka Menu View UMKM .............................................. IV-20 4.10.9 Antarmuka Menu View Info Pengajuan Dana CSR .................. IV-21 4.10.10 BAB V

Antarmuka Menu Mekanisme Pengajuan ............................. IV-22

IMPLEMENTASI .......................................................................... V-1

5.1

Implementasi ..................................................................................... V-1

5.2

Kebutuhan Sumberdaya ..................................................................... V-1

5.2.1

Kebutuhan Perangkat Keras (Hardware) ..................................... V-1

5.2.2

Keutuhan Perangkat Lunak (Software)........................................ V-2

x

Daftar Isi

5.3

Implementasi Antarmuka .................................................................. V-2 5.3.1

Antarmuka Form Login Admin ............................................... V-2

5.3.2

Antarmuka Menu Manajemen User ......................................... V-3

5.3.3

Antarmuka Menu Tambah Manajemen User ........................... V-3

5.3.4

Antarmuka Menu Edit Manajemen User .................................. V-4

5.3.5

Antarmuka Menu Beranda....................................................... V-4

5.3.6

Antarmuka Form Tambah Beranda.......................................... V-5

5.3.7

Antarmuka Edit Beranda ......................................................... V-6

5.3.8

Antarmuka Menu Mitra CSR................................................... V-6

5.3.9

Antarmuka Menu Tambah Mitra CSR ..................................... V-7

5.3.10

Antarmuka Menu Edit Mitra CSR........................................ V-8

5.3.11

Antarmuka Menu Pemilik UMKM ...................................... V-8

5.3.12

Antarmuka Menu UMKM ................................................... V-9

5.3.13

Antarmuka Menu Pengajuan Dari UMKM ........................... V-9

5.3.14

Antarmuka Menu Mekanisme ............................................ V-10

5.3.15

Antarmuka Menu Edit Mekanisme .................................... V-10

5.3.16

Antarmuka Menu Berita .................................................... V-11

5.3.17

Antarmuka Menu Tambah Berita ....................................... V-12

5.3.18

Antarmuka Menu Edit Berita ............................................. V-13

5.3.19

Antarmuka Menu Kontak .................................................. V-13

5.3.20

Antarmuka Menu Edit Kontak ........................................... V-14

5.3.21

Antarmuka Menu Link....................................................... V-14

5.3.22

Antarmuka Menu Tambah Link ......................................... V-15

5.3.23

Antarmuka Menu Edit Link ............................................... V-15

5.3.24

Antarmuka Menu View Pengajuan BUMN ........................ V-16

5.3.25

Antarmuka Menu Edit Proses Pengajuan BUMN ............... V-16

5.3.26

Antarmuka Menu Info CSR ............................................... V-17

5.3.27

Antarmuka Menu Tambah Info CSR.................................. V-17

5.3.28

Antarmuka Menu Edit Info CSR ........................................ V-18

5.3.29

Antarmuka Menu Info Pengajaun ...................................... V-18

xi

Daftar Isi

5.3.30

Antarmuka Menu Tambah Info Pengajuan ......................... V-19

5.3.31

Antarmuka Menu Edit Info Pengajuan ............................... V-20

5.3.32

Antarmuka Menu View Pengajuan BUMN ........................ V-20

5.3.33

Antarmuka Menu Registrasi Pemilik UMKM .................... V-21

5.3.34

Antarmuka Menu Profil Pemilik UMKM ........................... V-22

5.3.35

Antarmuka Menu Edit Profil Pemilik UMKM ................... V-23

5.3.36

Antarmuka Menu Edit Foto Profil Pemilik UMKM ........... V-24

5.3.37

Antarmuka Menu Pengajuan Dana CSR ............................ V-25

5.3.38

Antarmuka Menu Data UMKM ......................................... V-26

5.3.39

Antarmuka Menu Edit Data UMKM .................................. V-27

5.3.40

Antarmuka Menu Lampiran UMKM.................................. V-28

5.3.41

Antarmuka Menu Edit Lampiran UMKM .......................... V-28

5.3.42

Antarmuka Halaman Beranda ............................................ V-29

5.3.43

Antarmuka Halaman Mitra CSR ........................................ V-29

5.3.44

Antarmuka Halaman UMKM............................................. V-30

5.3.45

Antarmuka Halaman Info .................................................. V-31

5.3.46

Antarmuka Halaman Pengajuan CSR ................................. V-31

5.3.47

Antarmuka Halaman Mekanisme ....................................... V-32

5.3.48

Antarmuka Halaman Berita................................................ V-33

5.3.49

Antarmuka Halaman Kontak.............................................. V-33

5.4 BAB VI

Hasil Pengujian Dengan Menggunakan Metode Black Box .............. V-34 PENUTUP .................................................................................... VI-1

6.1

Kesimpulan....................................................................................... VI-1

6.2

Saran ................................................................................................ VI-1

DAFTAR PUSTAKA ....................................................................................... xix LAMPIRAN

xii

Daftar Gambar

DAFTAR GAMBAR Gambar II-1 Metodologi Prototyping [5] ......................................................... II-4 Gambar II-2 Contoh Actor ............................................................................... II-9 Gambar II-3 Contoh Use Case ......................................................................... II-9 Gambar II-4 Contoh Class ............................................................................. II-10 Gambar II-5 Start dan End State .................................................................... II-12 Gambar II-6 Transisi dari State_1 ke State_2 yang diwakili tanda panah ........ II-12 Gambar II-7 Actor pada Sequence diagram .................................................... II-13 Gambar II-8 Contoh Object Lifeline ............................................................... II-13 Gambar II-9 Contoh Activation ...................................................................... II-13 Gambar II-10 Contoh Message ...................................................................... II-14 Gambar II-11 Contoh Collaboration Diagram ............................................... II-14 Gambar II-12 Contoh Activity Diagram ......................................................... II-15 Gambar II-13 Tampilan awal Adobe Dreamweaver CS 5.5 ............................ II-16 Gambar II-14 Tampilan Ruang kerja Adobe Dreamweaver CS5.5 .................. II-17 Gambar II-15 Koneksi Data Base XAMPP..................................................... II-21 Gambar III-1 Gambaran Sistem lama Media Informasi Kontrol Proses Dana CSR ....................................................................................................................... III-2 Gambar III-2 Sistem Baru Media Informasi Kontrol Proses Dana CSR ........... III-4 Gambar III-3 Business Use Case Diagram ...................................................... III-7 Gambar III-4 Activity Diagram Use Case Login ............................................ III-9 Gambar III-5 Activity Diagram Admin Pengelolaan Media Informasi Dana CSR ..................................................................................................................... III-10 Gambar III-6 Activity Diagram Admin Manage User Media Informasi Dana CSR ..................................................................................................................... III-11 Gambar III-7 Activity Diagram Admin Manage Beranda Media Informasi Dana CSR .............................................................................................................. III-12 Gambar III-8 Activity Diagram Admin Manage Pemilik UMKM Media Informasi Dana CSR ..................................................................................................... III-14

xiii

Daftar Gambar

Gambar III-9 Activity Diagram Admin Manage UMKM Media Informasi Dana CSR .............................................................................................................. III-15 Gambar III-10 Activity Diagram Admin Manage Mekanisme Media Informasi Dana CSR ..................................................................................................... III-16 Gambar III-11 Activity Diagram Admin Manage Berita Media Informasi Dana CSR .............................................................................................................. III-17 Gambar III-12 Activity Diagram Admin Manage Kontak Media Informasi Dana CSR .............................................................................................................. III-18 Gambar III-13 Diagram Admin Manage Link Media Informasi Dana CSR ... III-19 Gambar III-14 Activity Diagram UMKM Pengajuan Dana Media Informasi Dana CSR .............................................................................................................. III-21 Gambar III-15 Activity Diagram Mitra Manage Persetujuan Pengajuan Media Informasi Dana ............................................................................................. III-22 Gambar IV-1 Perancangan Menu .................................................................... IV-2 Gambar IV-2 Use case Diagram ...................................................................... IV-3 Gambar IV-3 Activity Diagram ....................................................................... IV-8 Gambar IV-4 Class Diagram ........................................................................... IV-9 Gambar IV-5 Sequence Diagram login.......................................................... IV-10 Gambar IV-6 Sequence Diagram Login Mitra CSR ....................................... IV-10 Gambar IV-7 Sequence Diagram Login UMKM ........................................... IV-11 Gambar IV-8 Sequence Diagram Pengajuan Dana CSR ................................ IV-11 Gambar IV-9 Sequence Diagram Proses Dana CSR ...................................... IV-12 Gambar IV-10 Collaboration Diagram Login ............................................... IV-13 Gambar IV-11 Collaboration Diagram Login Mitra ...................................... IV-13 Gambar IV-12 Collaboration Diagram Login UMKM .................................. IV-14 Gambar IV-13 Collaboration Diagram Pengajuan Dana CSR ....................... IV-14 Gambar IV-14 Collaboration Diagram Proses Pengajuan Dana CSR ............ IV-15 Gambar IV-15 Antarmuka Menu Utama ....................................................... IV-17 Gambar IV-16 Antarmuka Menu Login ........................................................ IV-17 Gambar IV-17 Antarmuka Menu Registrasi .................................................. IV-18 Gambar IV-18 Antarmuka Menu Pengajuan Dana CSR ................................ IV-18

xiv

Daftar Gambar

Gambar IV-19 Antarmuka Menu Pengajuan CSR dari UMKM ..................... IV-19 Gambar IV-20 Antarmuka Menu Admin BUMN .......................................... IV-19 Gambar IV-21 Antarmuka Menu Edit Proses Dana CSR ............................... IV-20 Gambar IV-22 Antarmuka Menu View UMKM ............................................ IV-20 Gambar IV-23 Antarmuka Menu View Info CSR.......................................... IV-21 Gambar IV-24 Antarmuka Menu Mekanisme Pengajuan............................... IV-22 Gambar V-1 Antarmuka Form Login Admin.................................................... V-2 Gambar V-2 Antarmuka Form Menu Admin .................................................... V-3 Gambar V-3 Antarmuka Form Menu Tambah Manajemen User....................... V-3 Gambar V-4 Antarmuka Menu Edit Manajemen User ...................................... V-4 Gambar V-5 Antarmuka Menu Beranda ........................................................... V-4 Gambar V-6 Antarmuka Menu Tambah Beranda ............................................. V-5 Gambar V-7 Antarmuka Menu Edit Beranda.................................................... V-6 Gambar V-8 Antarmuka Menu Mitra CSR ....................................................... V-6 Gambar V-9 Antarmuka Menu Tambah Mitra CSR ......................................... V-7 Gambar V-10 Antarmuka Menu Edit Mitra CSR.............................................. V-8 Gambar V-11 Antarmuka Menu Edit Mitra CSR.............................................. V-8 Gambar V-12 Antarmuka Menu Pemilik UMKM............................................. V-9 Gambar V-13 Antarmuka Menu Pengajuan CSR.............................................. V-9 Gambar V-14 Antarmuka Menu Mekanisme .................................................. V-10 Gambar V-15 Antarmuka Menu Edit Mekanisme........................................... V-10 Gambar V-16 Antarmuka Menu Berita .......................................................... V-11 Gambar V-17 Antarmuka Menu Tambah Berita ............................................. V-12 Gambar V-18 Antarmuka Menu Tambah Berita ............................................. V-13 Gambar V-19 Antarmuka Menu Kontak......................................................... V-13 Gambar V-20 Antarmuka Menu Edit Kontak ................................................. V-14 Gambar V-21 Antarmuka Menu Link............................................................. V-14 Gambar V-22 Antarmuka Menu Tambah Link ............................................... V-15 Gambar V-23 Antarmuka Menu Edit Link ..................................................... V-15 Gambar V-24 Antarmuka Menu View Pengajuan BUMN .............................. V-16 Gambar V-25 Antarmuka Menu Edit Proses Pengajuan BUMN ..................... V-16

xv

Daftar Gambar

Gambar V-26 Antarmuka Menu Info CSR ..................................................... V-17 Gambar V-27 Antarmuka Menu Tambah Info CSR........................................ V-17 Gambar V-28 Antarmuka Menu Edit Info CSR .............................................. V-18 Gambar V-29 Antarmuka Menu Info Pengajuan ............................................ V-18 Gambar V-30 Antarmuka Menu Tambah Info Pengajuan ............................... V-19 Gambar V-31 Antarmuka Edit Info Pengajuan ............................................... V-20 Gambar V-32 Antarmuka Menu View Pengajuan BUMN .............................. V-20 Gambar V-33 Antarmuka Menu Registrasi Pemilik UMKM .......................... V-21 Gambar V-34 Antarmuka Menu Profil Pemilik UMKM ................................. V-22 Gambar V-35 Antarmuka Menu Edit Profil Pemilik UMKM ......................... V-23 Gambar V-36 Antarmuka Menu Edit Foto Profil Pemilik UMKM ................. V-24 Gambar V-37 Antarmuka Menu Pengajuan Dana CSR................................... V-25 Gambar V-38 Antarmuka Menu Data UMKM .............................................. V-26 Gambar V-39 Antarmuka Menu Edit Data UMKM ....................................... V-27 Gambar V-40 Antarmuka Menu Lampiran UMKM........................................ V-28 Gambar V-41 Antarmuka Menu Edit Lampiran UMKM ................................ V-28 Gambar V-42 Antarmuka Halaman Beranda .................................................. V-29 Gambar V-43 Antarmuka Halaman Mitra CSR .............................................. V-29 Gambar V-44 Antarmuka Halaman UMKM................................................... V-30 Gambar V-45 Antarmuka Halaman Info......................................................... V-31 Gambar V-46 Antarmuka Halaman Pengajuan CSR ....................................... V-31 Gambar V-47 Antarmuka Halaman Mekanisme ............................................. V-32 Gambar V-48 Antarmuka Halaman Berita...................................................... V-33 Gambar V-49 Antarmuka Halaman Kontak .................................................... V-33

xvi

Daftar Tabel

DAFTAR TABEL Tabel III-1 Deskripsi Aktor ............................................................................ III-6 Tabel III-2 Deskripsi Use Case ...................................................................... III-6 Tabel III-3 Skrenario Use Case Login ............................................................ III-8 Tabel III-4 Skenario Use Case Admin Pengelolaan Media Informasi Kontrol Proses Dana CSR ............................................................................................ III-9 Tabel III-5 Admin Manage User Media Informasi Dana CSR ...................... III-10 Tabel III-6 Admin Manage Beranda Media Informasi Dana CSR ................. III-11 Tabel III-7 Skenario Use Case Admin Manage Mitra Media Informasi Dana CSR ..................................................................................................................... III-12 Tabel III-8 Skenario Use Case Admin Manage Pemilik UMKM Media Informasi Dana CSR ..................................................................................................... III-13 Tabel III-9 Skenario Use Case Admin Manage UMKM Media Informasi Dana CSR .............................................................................................................. III-14 Tabel III-10 Use Case Admin Manage Mekanisme Media Informasi Dana CSR ..................................................................................................................... III-15 Tabel III-11 Skenario Use Case Admin Manage Berita Media Informasi Dana CSR .............................................................................................................. III-17 Tabel III-12 Use Case Admin Manage Kontak Media Informasi Dana CSR . III-18 Tabel III-13 Skenario Use Case Admin Manage Link Media Informasi Dana CSR ..................................................................................................................... III-19 Tabel III-14 Skenario Use Case UMKM Pengajuan Dana Media Informasi Dana CSR .............................................................................................................. III-20 Tabel III-15 Skenario Use Case Mitra Manage Persetujuan Pengajuan Media Informasi Dana CSR ..................................................................................... III-21 Tabel IV-1 Definisi Aktor .............................................................................. IV-3 Tabel IV-2 Definisi Use Case......................................................................... IV-4 Tabel IV-3 Skenario Use Case Media Informasi Kontrol Proses Dana CSR ... IV-4 Tabel IV-4 Skenario Use Case Login .............................................................. IV-5 Tabel IV-5 Skenario Use Case login UMKM ................................................. IV-6

xvii

Daftar Tabel

Tabel IV-6 Skenario Use Case Mitra CSR ..................................................... IV-6 Tabel IV-7 Karakteristik Pengguna Untuk Admin ........................................ IV-16 Tabel IV-8 Karakteristik Pengguna Mitra CSR ............................................ IV-16 Tabel IV-9 Karakteristik UMKM ................................................................. IV-16 Tabel V-1 Pengujian Perangkat ..................................................................... V-34

xviii

Bab I Pendahuluan

BAB I 1.1

PENDAHULUAN

Latar Belakang Masalah BPPKU KADIN Kota Bandung merupakan badan inkubator yang

dibentuk oleh Kadin dengan tujuan untuk membantu meningkatkan produktivitas dari anggota Kadin tersebut, dalam hal ini adalah UMKM binaan BPPKU KADIN Kota Bandung. Posisi dan kondisi produk UMKM dikota Bandung secara umum dapat dikatakan, bahwa peluang pasar untuk dapat dikembangkan masih potensial dan memiliki prospektif pasar yang menjanjikan, hal tersebut harus terus didorong melalui pembinaan yang berkelanjutan dari arah dan sasaran dari berbagai sisi untuk memperkuat kelembagaan UMKM di kota Bandung. Kota Bandung yang merupakan basis industri kreatif yang mengacu pada pangsa pasar yang berkembang mengikuti perubahan prilaku masyarakat konsumen saat ini, disisi lain persoalan-persoalan muncul yang sudah ditentukan menjadi hambatan bagi UMKM dikota Bandung yang harus segera dijawab melalui program bantuan yang lebih implementif guna mendukung perkembangan bisnis dari UMKM tersebut. Dalam hal ini lebih ditekankan kepada persoaalan dana untuk membantu modal dari usaha UMKM tersebut. Dengan adanya program Coorporate Social Responsibility, maka UMKM merasa dibantu dengan adanya bantuan dana tersebut. Dana Coorporate Social Responsibility (CSR) merupakan dana yang disediakan oleh perusahaan BUMN yang diatur dalam perundang-undangan di Indonesia. Dari sudut pandang Perusahaan pemberi dana CSR, Web Portal ini dimaksudkan untuk dapat saling kontrol antar Perusahaan pemberi dana CSR. Ini berkaitan dengan UMKM yang telah mengajukan dana CSR kepada Perusahaan dapat di kontrol dari Web Portal. Setiap UMKM yang telah dapat dana CSR dapat diketahui dari Web Portal, dan UMKM yang telah mandapatkan dana CSR dari satu Perusahaan tidak dapat lagi mengajukan dana CSR dari perusahaan lain. Ini

I-1

Bab I Pendahuluan

dimaksudkan untuk member kesempatan kepada UMKM lain yang membutuhkan dana CSR. Dengan adanya Web Portal ini diharapkan dana CSR yang diberikan Perusahaan dapat diserap secara menyeluruh kepada UMKM yang membutuhkan. Berdasarkan latar belakang masalah di atas maka penulis mengambil judul: Kontrol Proses Pengajuan Corporate Social Responsibility UMKM Bagi Perusahaan Pemberi Dana Berbasis Web. (Studi Kasus: BPPKU KADIN Kota Bandung) Aplikasi ini dikembangkan memanfaatkan teknologi informasi berbasis web, yaitu menggunakan PHP sebagai bahasa skrip (script language) dan MySQL untuk pengolahan database. 1.2

Identifikasi Masalah Berdasarkan hasil penelitian dan pengamatan penulis, diperlukan

informasi UMKM dan perusahaan yang memberi dana CSR yang dapat membantu para UMKM yang akan mengajukan dana CSR untuk membantu usaha bisnis UMKM tersebut. Maka dari itu penulis mencoba untuk mengidentifikasi masalah sebagai berikut. 1. Belum tersedianya media elektronik yang dapat mempermudah dalam mengajukan dana CSR. 2. Tidak ada pemberitahuan mengenai informasi UMKM yang telah mendapat dana CSR dari perusahaan, agar tidak terjadi UMKM mendapatkan dana lebih dari satu perusahaan pemberi dana CSR. 3. Tidak ada Kesempatan UMKM untuk mendapatkan dana CSR jika media informasi mengenai dana CSR belum ada. 1.3

Rumusan Masalah Rumusan masalah yang ada antara lain: 1. Bagaimana UMKM yang ingin mendapatkan dana CSR dari perusahaan, hanya mengajukan melalui aplikasi yang telah disediakan dalam website,

I-2

Bab I Pendahuluan

mendapatkan informasi lebih lanjut hanya dengan mengakses website tesebut, mengisi tentang informasi profil pribadi dan profil UMKM? 2. Bagaimana BUMN memberikan informasi tentang pengajuan dana CSR dan kontrol proses dana CSR dari UMKM yang telah mendapatkan dana CSR dapat dikontrol melalui media informasi berbasis website? 1.4

Maksud dan Tujuan Tujuan dari tugas akhir ini adalah untuk menghasilkan suatu perangkat

lunak yang memiliki kemampuan dalam memberikan informasi kepada UMKM dan juga perusahaan pemeberi dana yaitu : 1. Meberikan kemudahan proses penyampaian tentang informasi CSR kepada UMKM, Perusahaan, dan BPPKU KADIN Kota Bandung dengan media informasi berbasis web. 2. Membangun suatu media informasi yang dapat mempermudah UMKM terkait dengan informasi dana CSR yang diajukan. 1.5

Batasan Masalah Agar penulis Tugas Akhir ini lebih terfokus dan terarah maka akan

diberikan batasan terhadap layanan yang akan dibahas, antara lain: 1. Informasi terhadap pengajuan dana CSR ini dikhususkan bagi para UMKM yang berada dibawah binaan BPPKU KADIN Kota Bandung dan Non BPPKU KADIN Kota Bandung. 2. Asumsi ada dua perusahaan yang memberikan dana CSR, dari salah satu perusahaan yang telah memberikan dana CSR kepada UMKM, maka data dari UMKM tersebut akan disimpan di database Web Portal dan akan di tampilakan dengan tujuan dapat di ketahui oleh perusahaan lainnya dan UMKM yang telah menerima dana CSR tidak dapat mengajukan dana CSR ke Perusahaan lainnya.

I-3

Bab I Pendahuluan

3. UMKM yang dapat mengajukan dana CSR, hanya UMKM yang berdasarkan kritreria yang sesuai dengan peraturan yang diberikan oleh perusahaan pemberi dana CSR. 1.6

Metodologi Penelitian Tahapan yang dilakukan dalam penelitian adalah sebagai berikut : 1. Pengumpulan Data Pengumpulan data dilakukan berdasarkan dari dokumen yang telah diberikan oleh pihak yang bersangkutan. 2. Pengembangan Sistem Pengembangan sistem menggunakan analisa berorientasi objek dengan metoda protyping, yang dilanjutkan dengan perancangan yang meliputi perancangan proses, perancangan basis data dan antarmuka. 3. Pengimplementasian Implementasi

hasil

perancangan

yaitu

pengkodean

dengan

menggunakan bahasa pemrograman yang telah di tetapkan. 1.7

Sistematika Penulisan Penyusunan laporan Tugas Akhir ini menggunakan kerangka pembahasan

yang terbentuk dalam susunan bab, dengan uraian sebagai berikut : BAB I PENDAHULUAN Pada bab ini berisi tentang latar belakang, identifikasi masalah, rumusan masalah, tujuan dan manfaat penelitian, pembatasan masalah atau ruang lingkup, metode penelitian, dan sistematika penulisan. BAB II LANDASAN TEORI Pada bab ini memuat teori-teori yang menjadi dasar pengetahuan yang digunakan dalam menyusun laporan untuk membangun Kontrol Proses a Coorporate Social Responsibity UMKM bagi Perusahaan pemberi dana berbasis web.

I-4

Bab I Pendahuluan

BAB III ANALISIS SISTEM Pada bab ini diuraikan mengenai analisa sistem yang sudah ada sebelumnya dan sistem yang akan dibuat. BAB IV PERANCANGAN SISTEM Menguraikan tentang perancangan sistem yang mencakup perancangan basis data dan pemodelan sistem dengan UML (Unified Modeling Language) dalam menyelesaikan permasalahan yang ada. BAB V IMPLEMENTASI SISTEM Berisi tentang implementasi hasil desain pada bab empat dan penyesuaian kebutuhan sistem agar sistem berjalan dengan optimal. BAB VI PENUTUP Bab ini berisi tentang kesimpulan dan saran dari hasil penyusunan laporan Tugas Akhir yang telah disusun.

I-5

Bab II Landasan Teori

BAB II LANDASAN TEORI 2.1

Corporate Social Resposibility a. Corporate Social Responsibility diartikan sebagai komitmen usaha untuk bertindak etis, beroperasi secara legal dan berkontribusi untuk peningkatan ekonomi bersamaan dengan peningkatan kualitas hidup dari karyawan dan keluarganya, komuniti lokal dan masyarakat secara lebih luas. [3] “Corporate Social Responsibility” adalah komitmen perusahaan untuk meningkatkan kesejahteraan komunitas melalui praktik bisnis yang baik dan mengkontribusikan sebagian sumber daya perusahaan. [9] b. Corporate Social Responsibility adalah komitmen perusahaan untuk memberikan kontribusi jangka panjang terhadap satu issue tertentu di masyarakat atau lingkungan untuk dapat menciptakan lingkungan yang lebih baik. Kontribusi dari perusahaan ini bisa berupa banyak hal, misalnya: bantuan dana, bantuan tenaga ahli dari perusahaan, bantuan berupa barang, dll. Di sini perlu dibedakan antara program Corporate Social Responsibility dengan kegiatan amal. Kegiatan amal hanya berlangsung

sekali

atau

sementara

waktu

dan

biasanya

justru

menimbulkan ketergantungan publik terhadap perusahaan. Sementara, program Corporate Social Responsibility merupakan program yang berkelanjutan dan bertujuan untuk menciptakan kemandirian publik. 2.2

Pengertian Web Browser Adapun beberapa istilah yang berkaitan dengan Aplikasi Kontrol Proses

Corporate Social Responsibility Berbasis Web di Universitas Widyatama adalah sebagai berikut: 2.2.1

HTTP Pengertian HTTP atau definisi HTTP (HyperText Transfer Protocol)

adalah sebuah protokol untuk meminta dan menjawab antara client dan server.

II-1


Sebuh client HTTP seperti web browser, biasanya memulai permintaan dengan membuat hubungan TCP/IP ke port tertentu di tempat yang jauh (biasanya port 80). Sebuah server HTTP yang mendengarkan di port tersebut menunggu client mengirim kode permintaan (request) yang akan meminta halaman yang sudah ditentukan, diikuti dengan pesan MIME yang memiliki beberapa informasi kode kepala yang menjelaskan aspek dari permintaan tersebut, diikut dengan badan dari data tertentu. 2.2.2

Web Browser Suatu sistem di internet yang memungkinkan siapapun agar bisa

menyediakan informasi. Dengan menggunakan teknologi tersebut, informasi dapat diakses selama 24 jam dalam satu hari dan dikelola oleh mesin. Untuk mengakses informasi yang disediakan web, diperlukan berbagai perangkat lunak, yang disebut dengan web browser. Beberapa domain name : 2.2.3

co, com: perusahaan komersial net: perusahaan networking org, or: organisasi nonprofit atau yayasan edu, ac, sch: lembaga pendidikan mil: lembaga militer. Web Server Web server adalah software yang menjadi tulang belakang dari world wide

web (www). Web server menunggu permintaan dari client yang menggunakan browser seperti Netscape Navigator, Internet Explorer, Mozila, dan program browser lainnya. Jika ada

permintaan dari browser, maka web server akan

memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML (standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja.

II-2


Web server, untuk berkomunikasi dengan client-nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol). [1] 2.2.4

World Wide Web (WWW) WWW atau World Wide Web maupun Web saja adalah sebuah sistem

yang saling terkait dalam sebuah dokumen berformat hypertext yang berisi beragam informasi, baik tulisan, gambar, suara, video, dan informasi multimedia lainnya dan dapat diakses melalui sebuah perangkat yang disebut web browser. 2.2.5

Hyper Text Markup Language (HTML) HyperText Markup Language (HTML) adalah bahasa dari World Wide

Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. HTML inilah yang menjadi dasar bila akan menjelajah internet dan melihat halaman web yang menarik, terlebih bila menggunakan CSS. [4] Contoh dokumen HTML sederhana adalah seperti di bawah ini Hello World
Welcome to my site!
2.3

Metodologi Yang Digunakan Adapun metodologi yang digunakan dalam pengembangan sistem kontrol

proses CSR berbasis web antara lain meliputi: Prototyping-based Methodology, Object Oriented Programming dan Unified Modeling Language (UML). 2.3.1

Prototyping-based Methodology Salah satu model rekayasa perangkat lunak adalah Prototyping-based

Methodology .Pemodelan ini memungkinkan untuk pengembangan piranti lunak yang jauh lebih cepat dibanding metode waterfall.

II-3


Berikut adalah gambaran pengembangan sistem perangkat lunak atau System Development Life Cycle (SDLC) dengan menggunakan metode prototyping.

Gambar II-1 Metodologi Prototyping [5]

Penjelasan dari tahap-tahap prototyping adalah sebagai berikut: 1. Perencanaan (Planning) Perencanaan sistem sangat diperlukan, karena piranti lunak biasanya merupakan bagian dari suatu sistem yang lebih besar. Pembuatan sebuah piranti lunak dapat dimulai dengan melihat dan mencari apa yang dibutuhkan oleh sistem. Dari sini kebutuhan sistem tersebut akan diterapkan ke dalam piranti lunak yang dibuat. [14] 2. Analysis, Design, Implementation. Tahap ini merupakan ciri dari penggunaan metode prototyping, Tahapan analisis, desain, dan implementasi dilakukan secara berulang, setiap selesai satu iterasi, hasil pengembangan yang disebut prototype ditunjukkan ke stakeholder atau klien untuk dinilai. Hasil penilaian ini digunakan untuk membangun prototype berikutnya. Proses ini berulang sampai System prototype yang dihasilkan memenuhi kriteria yang sudah ditentukan pada

II-4


proses Planning. Apabila hasil pengembangan masih belum sesuai dengan kebutuhan sistem, dilakukan revisi dengan mengulang dari tahap analisis. Tahap ini terbagi menjadi tiga: a. Analisis (Analysis) Merupakan proses pengumpulan kebutuhan piranti lunak. Untuk memahami dasar dari program yang akan dibuat, seorang analis harus mengetahui ruang lingkup informasi, fungsi-fungsi yang dibutuhkan, kemampuan kinerja yang ingin dihasilkan dan perancangan antar-muka pemakai piranti lunak tersebut. b. Perancangan (Design) Perancangan piranti lunak merupakan proses bertahap yang memfokuskan pada empat bagian penting, yaitu: Struktur data, arsitektur piranti lunak, detail prosedur, dan karakteristik antar muka pemakai. c. Implementasi (Implementation) Proses ini akan menguji kode program yang telah dibuat dengan memfokuskan pada bagian dalam piranti lunak. Tujuannya untuk memastikan bahwa semua pernyataan telah diuji dan memastikan juga bahwa input yang digunakan akan menghasilkan output yang sesuai. 3. Implementasi sistem Ini adalah tahapan implementasi prototype terakhir yang telah memenuhi kriteria yang diterapkan pada tahap perencanaan. Pada tahapan ini biasanya jarang sekali dijumpai revisi program karena revisi telah dilakukan berulang kali pada pembangunan prototype-prototype sebelumnya di tahap ke dua. Tahap pengujian dibagi menjadi dua bagian, pengujian internal dan pengujian eksternal. Pengujian internal bertujuan menggambarkan bahwa semua pernyataan sudah dilakukan pengujian, sedangkan pengujian eksternal bertujuan untuk menemukan kesalahan serta memastikan output yang dihasilkan sesuai dengan yang diharapkan. 2.3.1.1

System Prototype Pertama Pada system prototype pertama, penulis mencoba mengikuti langkah-

langkah dari metode tersebut.

II-5


Tahap pertama yaitu tahapa analisis, dimana penulis mencoba menganalisis proses system yang akan dibuat. Tahapan ini meliputi lingkup informasi yang dibutuhkan, fungsi-fungsi yang dibutuhkan, kemampuan kinerja yang ingin dihasilkan dan perancangan antar-muka pemakai piranti lunak tersebut. Tahap kedua yaitu perancangan, penulis mencoba merancang antar muka pemakai. Dimana website yang akan dibuat sesuai dengan prosedur yang telah di analisis sebagai contoh adalah proses dari halaman utama website, proses coding dari setiap tahapan halaman website. Tahap ketiga adalah implementasi, dimana pada tahap ini seluruh yang telah dirancang pada tahap kedua diuji, dimulai dari uji kode program setiap halaman website berikut prosedurnya dengan tujuan menghasilkan output yang sesuai dengan tahapan analisi. 2.3.1.2

System Prototype kedua Pada tahap system prototype kedua ini adalah, penulis mencoba untuk

lebih menyempurnakan dari tahap pertama, dimana pada tahap kedua penulis membuat inti dari proses yang yang menjadi kekurangan pada tahap pertama. Sesuai dengan metode yang menjadi rujukan pernulis, tahap berikutnya adalah tahapan system prototype kedua yang menjadikan sistem yang telah di uji kembali pada tahapan implementasi. Tahap Pertama adalah tahap analisis, dimana penulis menganalisis kembali dari kekurangan yang telah dianalisis pada tahap pertama, jika benar terjadi keurangan maka sesuai metode harus kembali ke tahap analisis. Berbeda dengan tahap pertama, tahap analisis pada system prototype kedua ini hanya menganalisis kekurangan yang akan ditambahkan. Tahap kedua adalah tahap perancagan, penulis mencoba merancang kekurangan yang telah dianalisis pada tahap pertama. Kekurangan tersebut merupakan inti dari proses sistem yang akan dibuat. Tahap ketiga adalah tahap implementasi, tahap terakhir dari criteria yang telah ditetapkan pada tahap pertama dan selanjutnya, penulis menyelesaikan inti dari proses yang telah direncanakan. Tahap pengujian dibagi menjadi dua bagian, pengujian internal dan pengujian eksternal. Pengujian internal bertujuan

II-6


menggambarkan bahwa semua pernyataan sudah dilakukan pengujian, sedangkan pengujian eksternal bertujuan untuk menemukan kesalahan serta memastikan output yang dihasilkan sesuai dengan yang diharapkan. 2.3.2

Object Oriented Programming (OOP) Object Oriented Programming (OOP) adalah suatu metode pemrograman

yang berbasiskan pada objek, secara singkat pengertian dari OOP adalah koleksi objek yang saling berinteraksi dan saling memberikan informasi satu dengan yang lainnya. Suatu program disebut dengan pemrograman berbasis obyek (OOP) karena terdapat: 1. Encapsulation (pembungkusan) a.

Variabel dan method dalam suatu obyek dibungkus agar terlindungi

b.

Untuk mengakses, variabel dan method yang sudah dibungkus tadi perlu

interface c.

Setelah variabel dan method dibungkus, hak akses terhadapnya bisa

ditentukan. d.

Konsep pembungkusan ini pada dasarnya merupakan perluasan dari tipe

data struktur 2.

Inheritance (pewarisan) a.

Sebuah class bisa mewariskan atribut dan method-nya ke class yang lain

b.

Class yang mewarisi disebut superclass

c.

Class yang diberi warisan disebut subclass

d.

Sebuah subclass bisa mewariskan atau berlaku sebagai superclass bagi

class yang lain disebut multilevel inheritance. Keuntungan Penggunaan Pewarisan a. Subclass memiliki atribut dan method yang spesifik yang membedakannya dengan superclass, meskipun keduanya mirip (dalam hal kesamaan atribut dan method). b. Dengan

demikian

pada

pembuatan

subclass,

programmer

bisa

menggunakan ulang source code dari superclass disebut dengan istilah reuse.

II-7


c. Class-class yang didefinisikan dengan atribut dan method yang bersifat umum yang berlaku baik pada superclass maupun subclass disebut dengan abstract class. 3. Polymorphism (polimorfisme – perbedaan bentuk) Polimorfisme artinya penyamaran suatu bentuk dapat memiliki lebih dari satu bentuk. [1] 2.3.3

Unified Modeling Language ( UML ) Unified Modeling Language (UML) adalah keluarga notasi grafis yang

didukung oleh meta-model tunggal, yang membantu pendeskripsian dan desain sistem perangkat lunak, khususnya sistem yang dibangun menggunakan pemrograman berorientasi objek (OO). [5] Selain itu UML adalah bahasa pemodelan yang menggunakan konsep orientasi object. UML dibuat oleh Grady Booch, James Rumbaugh, dan Ivar Jacobson di bawah bendera Rational Software Corp. UML menyediakan notasinotasi yang membantu memodelkan sistem dari berbagai perspektif. UML tidak hanya digunakan dalam pemodelan perangkat lunak, namun hampir dalam semua bidang yang membutuhkan pemodelan. UML dideskripsikan oleh beberapa diagram, di antaranya: [2] 1. Use Case Diagram Use Case Diagram digunakan untuk menggambarkan sistem dari sudut pandang pengguna sistem tersebut (user), sehingga pembuatan use case diagram lebih dititikberatkan pada fungsionalitas yang ada pada sistem, bukan berdasarkan alur atau urutan kejadian. Sebuah use case diagram merepresentasikan sebuah interaksi antara aktor dengan sistem. [11] Komponen-komponen yang terlibat dalam use case diagram:

II-8


a. Aktor

Gambar II-2 Contoh Actor[11]

Pada dasarnya aktor bukanlah bagian dari use case diagram, namun untuk dapat terciptanya suatu use case diagram diperlukan aktor, di mana aktor tersebut merepresentasi seseorang atau sesuatu (seperti perangkat atau sistem lain) yang berinteraksi dengan sistem yang dibuat. Sebuah aktor mungkin hanya memberikan informasi inputan pada sistem, hanya menerima informasi dari sistem atau keduanya menerima dan memberi informasi pada sistem. Aktor hanya berinteraksi dengan use case, tetapi tidak memiliki kontrol atas use case. Aktor digambarkan dengan stick man. b. Use Case Gambaran fungsionalitas dari suatu sistem, sehingga pengguna sistem paham dan mengerti kegunaan sistem yang akan dibangun.

Gambar II-3 Contoh Use Case

Ada beberapa relasi yang terdapat pada use case diagram: 1. Association, menghubungkan link antar element. 2. Generalization, disebut juga pewarisan (inheritance), sebuah elemen dapat merupakan spesialisasi dari elemen lainnya. 3. Dependency, sebuah element bergantung dalam beberapa cara ke element lainnya. 4. Aggregation, bentuk association dimana sebuah elemen berisi elemen lainnya.

II-9


Tipe relasi yang mungkin terjadi pada use case diagram: 1. <>, yaitu kelakuan yang harus terpenuhi agar sebuah event dapat terjadi, dimana pada kondisi ini sebuah use case adalah bagian dari use case lainnya. 2. <<extends>>, kelakuan yang hanya berjalan di bawah kondisi tertentu seperti menggerakkan peringatan. 3. <>, merupakan pilihan selama asosiasi hanya tipe relationship yang dibolehkan antara aktor dan use case. c. Class Diagram Class adalah sebuah spesifikasi yang 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 (metode/fungsi). Class Diagram menggambarkan struktur dan deskripsi Class, Package dan objek beserta hubungan satu sama lain seperti pewarisan, asosiasi, dan lain-lain.

Gambar II-4 Contoh Class

Class memiliki tiga area pokok : 1. Nama (Class Name) 2. Atribut 3. Metode (Operations) Pada UML, class digambarkan dengan segi empat yang dibagi beberapa bagian. Bagian atas merupakan nama dari class. Bagian yang tengah merupakan struktur dari class (atribut) dan bagian bawah merupakan sifat dari class (metode/operasi).

II-10


Atribut dan metode dapat memiliki salah satu sifat berikut : 1. Private , tidak dapat dipanggil dari luar class yang bersangkutan. 2. Protected ,hanya dapat dipanggil oleh class yang bersangkutan dan class lain yang mewarisinya. 3. Public, dapat dipanggil oleh class lain. Hubungan antar class: Asosiasi, yaitu hubungan statis antar class. Umumnya menggambarkan class yang memiliki atribut berupa class lain, atau class yang harus mengetahui eksistensi class lain. 1. Agregasi, yaitu hubungan yang menyatakan bagian (“terdiri atas”). 2. Pewarisan, yaitu hubungan hirarki antar class. Class dapat diturunkan dari class lain dan mewarisi semua atribut dan metode class asalnya serta bisa menambahkan fungsionalitas baru. Sehingga class tersebut disebut anak dari class yang diwarisinya. 3. Hubungan dinamis, yaitu rangkaian pesan (message) class dari satu class kepada class lain. Hubungan dinamis dapat digambarkan dengan menggunakan sequence diagram yang akan dijelaskan kemudian. d. Statechart Diagram Menggambarkan semua state (kondisi) yang dimiliki oleh suatu objek dari suatu class dan keadaan yang menyebabkan state berubah. Statechart diagram tidak digambarkan untuk semua class, hanya yang mempunyai sejumlah state yang terdefinisi dengan baik dan kondisi class berubah oleh state yang berbeda. State adalah sebuah kondisi selama kehidupan sebuah objek atau ketika objek memenuhi beberapa kondisi, melakukan beberapa aksi atau menunggu sebuah event. State dari sebuah objek dapat dikarakteristikkan oleh nilai dari satu atau lebih atribut-atribut dari class. State dari sebuah objek ditemukan dengan pengujian/pemeriksaan pada atribut dan hubungan dari objek. Notasi UML untuk state adalah persegipanjang/bujur sangkar dengan ujung yang dibulatkan.

II-11


Gambar II-5 Start dan End State

Masing-masing diagram harus mempunyai satu dan hanya satu start state ketika objek mulai dibuat. Sebuah objek boleh mempunyai banyak stop state.

Gambar II-6 Transisi dari State_1 ke State_2 yang diwakili tanda panah

Sebuah state transition dapat mempunyai sebuah aksi dan/atau sebuah kondisi penjaga (guard condition) yang terasosiasi dengannya, dan mungkin juga memunculkan sebuah event. Sebuah aksi adalah kelakuan yang terjadi ketika state transition terjadi. Sebuah event adalah pesan yang dikirim ke objek lain di sistem. Kondisi penjaga adalah ekspresi boolean (pilihan Ya atau Tidak) dari nilai atributatribut yang mengijinkan sebuah state transition hanya jika kondisinya benar. Kedua aksi dan penjaga adalah kelakuan dari objek dan secara tipikal menjadi operasi. e. Sequence Diagram Menggambarkan interaksi antara sejumlah objek dalam urutan waktu. Kegunaannya untuk menunjukkan rangkaian pesan yang dikirim antara objek juga interaksi antar objek yang terjadi pada titik tertentu dalam eksekusi sistem. Di bawah merupakan simbol yang digunakan pada sequence diagram :

II-12


Gambar II-7 Actor pada Sequence diagram

Actor adalah pesan dari seseorang atau sistem lain yang bertukar informasi dengan sistem yang lainnya, kemudian lifeline berhenti atau mulai pada titik yang tepat.

Gambar II-8 Contoh Object Lifeline

Object lifeline menunjukkan keberadaan dari sebuah objek terhadap waktu. Yaitu objek dibuat atau dihilangkan selama suatu periode waktu diagram ditampilkan, kemudian lifeline berhenti atau mulai pada titik yang tepat.

Gambar II-9 Contoh Activation

Activation menampilkan periode waktu selama sebuah objek atau aktor melakukan aksi. Dalam object lifeline, activation berada diatas lifeline dalam bentuk kotak persegi panjang, bagian atas dari kotak merupakan inisialisasi waktu dimulainya suatu kegiatan dan yang dibawah merupakan akhir dari waktu.

II-13


Gambar II-10 Contoh Message

Message adalah komunikasi antar objek yang membawa informasi dan hasil pada sebuah aksi. Message menyampaikan dari lifeline sebuah objek kepada lifeline yang lain, kecuali pada kasus sebuah message dari objek kepada objek itu sendiri, atau dengan kata lain message dimulai dan berakhir pada lifeline yang sama.

f. Collaboration Diagram Diagram ini menggambarkan interaksi objek yang diatur objek sekelilingnya dan hubungan antara setiap objek dengan objek yang lainnya. Dalam menunjukkan pertukaran pesan, collaboration diagram menggambarkan objek dan hubungannya (mengacu ke konteks). Jika penekannya pada waktu atau urutan gunakan sequence diagram, tapi jika penekanannya pada konteks gunakan collaboration diagram.

1 : message()

Object

: Actor 2 : message()

Object1

Gambar II-11 Contoh Collaboration Diagram

g. Activity Diagram Menggambarkan rangkaian aliran dari aktivitas, digunakan untuk mendeskripsikan aktivitas yang dibentuk dalam suatu operasi sehingga dapat juga digunakan untuk aktifitas lainnya. Diagram ini sangat mirip dengan flowchart karena memodelkan workflow dari satu aktivitas ke aktivitas lainnya atau dari

II-14


aktivitas ke status. Pembuatan activity diagram pada awal pemodelan proses dapat membantu memahami keseluruhan proses. Activity diagram juga digunakan untuk menggambarkan interaksi antara beberapa use case.

Activity1

Activity2

Activity3

Gambar II-12 Contoh Activity Diagram

2.4

Tools Adobe Dreamweaver CS5.5

2.4.1

Tentang Adobe Dreamweaver CS5.5 Adobe Dreamweaver CS5.5 merupakan salah satu software dari kelompok

Adobe yang banyak digunakan untuk mendesain situs Web. Adapun Adobe Dreamweaver CS5.5 itu sendiri adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelolah situs atau halaman Web. Dreamweaver CS5.5 memiliki performa yang lebih baik dan memiliki tampilan yang memudahkan anda untuk membuat halaman web, baik dalam jendela desain maupun dalam jendela kode. Dreamweaver CS5 didukung dengan cara pemakaian yang praktis dan standar, dan juga didukung untuk pengembangan penggunaan HTML, CSS3, XML, dan RSS, dan kemudahan-kemudahan lain yang diperlukan. [6] Dreamweaver CS5.5 merupakan software yang digunakan oleh Web desainer maupun Web programmer dalam mengembangkan Web. Hal ini disebabkan ruang kerja, fasilitas, dan kemampuan Adobe Dreamweaver CS5.5

II-15


yang mampu meningkatkan produktivitas dan efektivitas dalam desain maupun membangun sebuah situs Web. [11]

Gambar II-13 Tampilan awal Adobe Dreamweaver CS 5.5

Jika ingin membuat file HTML baru, klik pilihan HTML pada bagian Create New, sedangkan untuk file yang menggunakan kode program PHP atau bahasa pemrograman yang lainnya yang tercantum dalam pada pilihan maka klik pilihan. Hal ini karena kemudahan dalam bekerja dengan Adobe Dreamweaver CS5.5 sehingga sekaligus dapat menggunakan bahasa pemrograman lainnya. 2.4.2

Ruang kerja Adobe Dreamweaver CS5.5 Perhatikan ruang kerja Adobe Dreamweaver CS5.5 pada gambar di bawah

ini. Ruang kerja pada Adobe Dreamweaver CS5.5 memiliki komponen-komponen yang memberikan faslitas dan ruang untuk menuangkan kreasi saat bekerja. Sebelum memulai untuk merancang sebuah web, pemakai harus mengenal tampilan layar dari Adobe Dreamweaver CS5.5. Tampilan layer Adobe Dreamweaver CS5.5 terbagi menjadi enam area utama, yaitu Insert Bar,

II-16


Document Toolbar, Document Window, Panel Groups, Tag Selector, dan Property Inspector dimana area ini digunakan sebagai workspace untuk mendesain, membuat layout, membuat script dan lain-lain. Setiap tool - tool yang ada pada toolbox dapat dipergunakan untuk membangun dan merancang suatu website mulai dari dasar. Di bawah ini merupakan gambar tampilan layar kerja dari Adobe Dreamweaver CS5.5

Gambar II-14 Tampilan Ruang kerja Adobe Dreamweaver CS5.5

Keterangan: 1. Document Window, berfungsi untuk menampilkan dokumen di mana anda sekarang bekerja. 2. Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti image, tabel, dan frame ke dalam dokumen. 3. Dokumen Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari Document Window,

misalnya

Code Split, atau Design. 4. Coding Toolbar, berisi tombol-tombol yang digunakan untuk mempermudah pekerjaan pada jendela Code. 5. Panels Group, adalah Kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokkan di bawah satu judul.

II-17


6. Tag selector, berfungsi untuk menampilakan hirarki tag di sekitar pilihan yang aktif pada Design view. 7. Property Inspector, digunakan untuk melihat dan mengubah berbagai property objek yang terpilih. 8. Status Bar, Hand Tool dan Zoom, menampilkan status pekerjaan anda dan mengatur tampilan jendela desain. 9. Ruler, mempermudah pengukuran secara akurat. 10. Files Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs web anda Apabila pada tampilan, Workspace Setup, anda memilih Coder, maka akan tampil ruang kerja Code yang sama seperti pada tampilan jendela Designer. Pada ruang kerja tipe Coder ini anda bisa bekerja dengan menggunakan kodekode program PHP ataupun bahasa pemrograman lain. 2.4.3

PHP ( Personal Home Page Hypertext Preprocessor) PHP merupakan bahasa pemrograman berbasis web dengan menggunakan

server. Dengan menggunakan PHP maka kemudahan dalam berinteraksi dengan banyak database dan karena script ini bersifat open source. PHP atau Personal Home Page dibuat pertama kali pada tahun 1994 oleh Rasmus Lerdoff, Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. [12] Kemudian pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP hingga sampai kemudian setelah empat kali revisi, pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. 2.4.4

Script PHP Setiap program PHP disebut dengan script. Script berupa file text yang

dapat dibuat dengan menggunakan program editor file text biasa seperti notepad, edit, dan lainya. Script PHP diawali dengan tag .

II-18


Setiap baris atau statement harus diakhiri dengan menggunakan tanda titik koma (;) dan umumnya setiap statement dituliskan dalam satu baris. Script PHP merupakan script yang digunakan untuk menghasilkan halaman-halaman web. Cara penulisan script juga dibedakan menjadi 2, yaitu Embedded Script dan Non Embedded Script. 2.4.5

Embedded Script Adalah script PHP yang disisipkan diantara tag-tag HTML. Script PHP

digunakan apabila isi dari suatu dokumen HTML diinginkan dari hasil eksekusi suatu script PHP Contoh Script 2.4.6

Non Embedded Script

Script PHP dalam non embedded script ini digunakan sebagai murni pembuatan program dengan PHP, tag HTML yang dihasilkan untuk membuat dokumen merupakan bagian dari script PHP. PHP merupakan singkatan dari "PHP: Hypertext Preprocessor", adalah sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java, asp dan Perl, ditambah beberapa fungsi PHP yang spesifik. Tujuan utama bahasa ini adalah untuk memungkinkan perancang web untuk menulis halaman web dinamik dengan cepat. Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan system database di dalam web.

II-19


Sistem database yang dapat didukung oleh PHP antara lain: 1. Oracle 2. MySQL 3. Ms. Access 4. Sybase 5. PostgreSQL PHP dapat berjalan di berbagai sistem operasi seperti windows 98/NT, UNIX/LINUX, Solaris maupun Macintosh. Keunggulan lainnya dari PHP adalah, PHP juga mendukung komunikasi dengan layanan seperti protocol IMAP, SNMP, NNTP, POP3 bahkan HTTP. 2.5

MySQL MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL

(bahasa Inggris: database management system) atau DBMS yang multithread, dan multi-user. MySQL adalah Relational Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Di mana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closed source atau komersial. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam database sejak lama, yaitu SQL (Structured Query Language). [3] SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Keandalan suatu sistem database (DBMS) dapat diketahui dari cara kerja optimizer-nya dalam melakukan proses perintah-perintah SQL, yang dibuat oleh user maupun program-program aplikasinya.Sebagai database server, MySQL dapat dikatakan lebih unggul dibandingkan database server lainnya dalam query data. Hal ini terbukti untuk query yang dilakukan oleh single user, kecepatan query MySQL bisa sepuluh kali lebih cepat dari PostgreSQL dan lima kali lebih cepat dibandingkan Interbase.

II-20


Gambar II-15 Koneksi Data Base XAMPP

2.6

Apache APACHE merupakan salah satu jenis program yang bertujuan untuk

mengirimkan kembali sintaks yang telah diberikan oleh user dan menampilkan kembali dalam bentuk dalam format hasilnya saja. Program APACHE ini hanya terdapat pada sebuah server yang terdapat pada ISP (Internet Service Provider) atau di Indonesia disebut Jasa Penyelenggara Internet. Saat ini program yang paling banyak terdapat pada server-server di dunia adalah APACHE. Hal ini disebabkan karena beberapa keunggulan yang diberikan. Keunggulan-keunggulan tersebut antara lain : 1. Memiliki kemapuan pembacaan yang tinggi dan mudah disesuaikan 2. Memiliki tingkat keamanan yang tinggi. Hal ini dibutuhkan bagi para penyimpan data yang memiliki tingkat kerahasian tertentu. 3. Dapat dijalankan untuk berbagai macam system operasi.

II-21

LEMBAR PENGESAHAN. Tugas Akhir Program Studi Sistem Informasi Fakultas Teknik Universitas Widyatama. Oleh : Aburizal Fazrin K A

Recommend Documents

Welcome to my site!