Sistem Informasi Rekapitulasi Data Girimart Di Koperasi UPN Veteran Jatim.

Bismillahirrahmannirahim,

Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun dapat menyelesaikan Skripsi yang berjudul ″SISTEM INFORMASI REKAPITULASI DATA GIRIMART DI KOPERASI UPN VETERAN

JATIM″ dengan tepat waktu, Shalawat dan salam diperuntukkan kepada junjungan kita nabi besar Muhammad SAW.

Tak lupa pada kesempatan ini penulis menyampaikan ucapam terima kasih yang sebesar-besarnya kepada semua pihak yang telah membantu dalam menyelesaikan Tugas Akhir ini. Ucapan terima kasih penulis sampaikan kepada yang terhormat :

1. Ibu dan Bapak tercinta di rumah yang senantiasa memberikan dukungan dan mendoakan penyusun supaya Skripsi ini segera terselesaikan.

2. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri Universitas Pembangunan Nasional “Veteran” Jawa Timur Surabaya

3. Bapak Basuki Rahmat, S.Si, MT selaku Ketua Jurusan Teknik Informatika Universitas Pembangunan Nasional “Veteran” Jawa Timur Surabaya.

4. Bapak Nur Cahyo Wibowo S.Kom., M.Kom selaku Dosen Pembimbing I di jurusan Teknik Informatika Universitas Pembangunan Nasional ″Veteran″ Jawa Timur Surabaya yang telah meluangkan waktu, memberikan arahan,

5. Bapak Rizky Parlika S.Kom. selaku Dosen Pembimbing II, penguji seminar TA dan penguji Lisan di jurusan Teknik Informatika Universitas Pembangunan Nasional ″Veteran″ Jawa Timur Surabaya yang telah memberikan saran, arahan, ilmu dan telah meluangkan waktunya sehingga penulis dapat menyelesaikan Tugas Akhir ini.

6. Adek tercinta di rumah yang mendoakan dan mendukung penyusun untuk menyelesaikan skripsi ini.

7. Fitri Meidianasari “TP” yang gendut (Gindul), Thanks yah karena memberikan semangat supaya optimis untuk bisa ikut lesan bulan november. 8. Bapak M. Irwan Afandi, ST, MSc. selaku Penguji Skripsi yang telah banyak

memberi masukan serta membuka wawasan baru.

9. Ibu Ir. Kartini, MT, serta Bapak Yusron Rijal S.Si, M.Kom selaku Dosen Penguji Ujian Lisan penulis yang telah meluangkan waktu dalam masa sidang.

10. Mas Aswin angkatan 04 (akong) terima kasih banyak atas semua bantuannya dan ajarannya sehingga penulis bisa menyelesaikan Tugas Akhir ini.

11. Terima kasih buat teman-teman PARASIT. Yudha, Chimi, Jadit, Dedy (chunk), Rhandy (Doyok), yang telah memberi dukungan untuk menyelesaikan skripsi ini, Semangat buat kalian dan cepat selesaikan skripsinya, buat Rina makasih juga doanya dari ponorogo sana dan juga Anggita (purbalingga), serta Erik (Bolang) yang sudah belajar bersama menyelesaikan Tugas Akhir ini.

12. Terima kasih buat teman-teman di UIBI. Pia, Eko dll, makasih telah meminjamkan tempat buat kerjain revisi.

13. Teman-teman penulis lainnya yang tidak mungkin penulis sebutkan namanya satu per satu terima kasih telah membantu dan memberikan do’anya kepada penulis untuk menyelesaikan skripsi ini.

Penulis menyadari bahwa skripsi ini masih banyak kekurangannya. Oleh sebab itu penulis mengharapkan kritik dan saran dari pembaca demi kesempurnaan skripsi ini.

Surabaya, 09 Desember 2010

KATA PENGANTAR... ii

DAFTAR ISI... v

DAFTAR GAMBAR... viii

DAFTAR TABEL... x

BAB I PENDAHULUAN... 1

1.1. Latar Belakang... 1

1.2. Perumusan Masalah... 3

1.3. Batasan Masalah... 3

1.4. Tujuan... 3

1.5 Manfaat... 4

1.6. Metodologi Pembuatan Skripsi... 4

1.7. Sistematika Penulisan... 5

BAB II TINJAUAN PUSTAKA ... 7

2.1 Konsep Dasar Sistem Informasi... 7

2.1.1 Komponen dan Elemen Sistem Informasi... 8

2.1.2 Arsitektur dan Klasifikasi Sistem Informasi……… 2.2 PHP..………... 13 16 2.3 Tipe Data Script PHP...……… 2.3.1 Tipe Data Integer... 2.3.2 Tipe Data Float... 2.3.3 Tipe Data String... 2.3.4 Tipe Data Array... 2.3.5 Tipe Data Object... 2.4 Operator Dalam Script PHP …...……… 17 17 17 18 19 22 23 2.4.1 Operator Aritmatika………. 24

2.4.2 Operator String………..………. 25

2.4.5 Operator Presedence... 2.4.6 Operator Nilai Variabel dari Form HTML...

27 28

2.5 XHTM…..……… 2.5.1 Perbedaan Antara XHTML dan HTML... 2.5.2 Valid XHTML...

29 30 32

2.6 AJAX... 33

2.6.1 Scrpit AJAX... 38

2.6.2 Script HTML... 42

2.6.3 Script PHP... 2.7 MySql... 43 44 2.7.1 Tipe Data MySql... 2.7.2 Structure Query Language... 45 46 BAB III ANALISA DAN PERANCANGAN SISTEM... 48

3.1 Analisis Permasalahan... 48

3.2 Perancangan Sistem... 48

3.2.1 Deskripsi Umum Sistem... 48

3.2.2 Kebutuhan Sistem... 50

3.2.2.1 Kebutuhan Pengguna... 50

3.2.3 Kebutuhan Basis Data... 3.2.3.1 Diagram Jenjang... 3.2.3.2 DFD... 3.2.3.3 CDM... 51 51 52 55 3.3 Desain Interface... 59

BAB IV IMPLEMENTASI SISTEM……… 62

4.1 Kebutuhan Sistem...……….. 62

4.1.1 Perangkat Sistem.……… 62 4.2 Implementasi...………. 4.2.1 Halaman Utama... 4.2.2 Halaman Home...

63 63 64

4.2.3 Halaman Master... a. Halaman Anggota Koperasi... b. Halaman Daftar Account... c. Halaman Daftar Perkiraan... 4.2.4 Halaman Transaksi... a. Halaman Input Transaksi... b. Halaman Input Kredit Anggota... c. Halaman Daftar Kredit Anggota... d. Halaman Daftar Arus Transaksi... e. Halaman Transaksi 10 Hari Tertinggi... f. Halaman Rekap Pinjaman Anggota Bulanan... 4.2.5 Halaman Rekapitulasi... 4.2.6 Halaman Grafik... a. Halaman Grafik Mingguan... b. Halaman Grafik Bulanan... c. Halaman Grafik Tahunan...

64 65 65 66 66 67 67 68 68 69 69 70 70 71 71 72

BAB V UJI COBA DAN EVALUASI………. 73

5.1 Uji Coba... 5.1.1 Uji Coba Sistem... 5.2 Uji Coba Login... 5.3 Uji Coba Input Anggota... 5.4 Uji Coba Input Daftar Account... 5.5 Uji Coba Daftar Perkiraan... 5.6 Uji Coba Input Transaksi... 5.7 Uji Coba Input Kredit Anggota... 5.8 Uji Hasil Input Transaksi... 5.9 Uji Coba Grafik...

73 73 74 75 76 77 78 79 80 81

BABVI PENUTUP……… 83

DAFTAR GAMBAR

Gambar 2.1. Interaksi Sistem Informasi... 9

Gambar 2.2. Hubungan Elemen Sistem Informasi... 11

Gambar 2.3 Tingkatan Perubahan Sistem... 14

Gambar 2.4 Interaksi AJAX dengan Server... 36

Gambar 2.5 Contoh Tampilan Project AJAX………....………. 22

Gambar 3.1 Deskripsi Sistem Informasi Rekapitulasi Data…….….………… 49

Gambar 3.2 Diagram Jenjang...……… 51

Gambar 3.3 Konteks Diagram...………. 52

Gambar 3.4 DFD Level 1...……….. 53

Gambar 3.5 CDM Database…….………... 56

Gambar 3.6 PDM Database...……… 57

Gambar 3.7 Interface Login...……… 59

Gambar 3.8 Interface Tambah Anggota...………. 59

Gambar 3.9 Interface Tambah Account...……… 60

Gambar 3.10 Interface Tambah Perkiraan….………... 60

Gambar 3.11 Interface Input Transaksi...…..………. 61

Gambar 3.12 Interface Kredit Anggota..………61

Gambar 4.1 Halaman Login...………. 63

Gambar 4.2 Halaman Home...…………..……….. 64

Gambar 4.3 Halaman Master………….…...……… 64

Gambar 4.4 Halaman Anggota Koperasi...……… 65

Gambar 4.5 Halaman Daftar Account…....……… 65

Gambar 4.6 Halaman Daftar Perkiraan………66

Gambar 4.7 Halaman Transaksi...….………... 66

Gambar 4.8 Halaman Input Transaksi………...………... 67

Gambar 4.9 Halaman Input Kredit Anggota.……… 67

Gambar 4.10 Halaman Daftar Kredit Anggota.…...……… 68

Gambar 4.11 Halaman Daftar Arus Transaksi….…………..………... 68

Gambar 4.12 Halaman 10 Hari Tertinggi...…...………. Gambar 4.13 Halaman Rekap Anggota Bulanan... Gambar 4.14 Halaman Rekapitulasi... Gambar 4.15 Halaman Grafik... Gambar 4.16 Halaman Grafik Mingguan... Gambar 4.17 Halaman Grafik Bulanan... Gambar 4.18 Halaman Grafik Tahunan... 69 69 70 70 71 71 72 Gambar 5.1 Gambar Login Gagal……….……… 74

Gambar 5.2 Halaman Utama Aplikasi……....……… 74

Gambar 5.3 Halaman Daftar Anggota……… 75

Gambar 5.4 Penambahan Anggota...……… 75

Gambar 5.5 Halaman Daftar Account………... 76

Gambar 5.6 Penambahan Daftar Account...……… 76

Gambar 5.7 Halaman Daftar Perkiraan.………... Gambar 5.8 Penambahan Daftar Perkiraan... 77 77 Gambar 5.9 Halaman Input Transaksi……… 78

Gambar 5.12 Penambahan Kredit Anggota………79

Gambar 5.13 Halaman Daftar Kredit Anggota.……… 80

Gambar 5.14 Halaman Rekapitulasi………. 80

Gambar 5.15 Grafik Mingguan……….………... 81 Gambar 5.16 Grafik Bulanan..………... Gambar 5.17 Grafik Tahunan...

81 82

DAFTAR TABEL

Tabel 2.1 Deklarasi Tipe Data String………... 19

Tabel 2.2 Operasi Aritmatika PHP...……… 24

Tabel 2.3 Operasi Bitwise...……….……… 26

ABSTRAK

Seiring dengan pesatnya perkembangan teknologi khusunya di bidang teknologi informasi dan komputer serta dalam rangka menghadapi era globalisasi, maka sebuah organisasi Koperasi UPN Veteran Jatim sangat membutuhkan informasi yang cepat dan akurat dalam melakukan proses laporan rekapitulasi data untuk membantu dalam proses pembukuan yang mudah, cepat dan tepat.

Di sini kebutuhan akan informasi secara akurat dan tepat sangat dibutuhkan, maka dari itu dibuatlah suatu aplikasi yang dapat menangani semua masalah pembukuan keuangan dari girimart ke koperasi. Dikarenakan banyaknya kelemahan yang ditimbulkan karena pengolahan data secara manual, maka pada tugas akhir ini akan berorientasi pada pembangunan aplikasi perangkat lunak untuk menangani masalah rekapitulasi data keuangan dari Girimart ke Koperasi agar lebih terkomputerisasi.

Hasil output dari sistem informasi rekapitulasi data ini adalah laporan keuangan yang meliputi laporan pemasukan, dan laporan pengeluaran yang memudahkan dalam menyediakan informasi tentang data-data perhitungan keuangan secara cepat dan tepat.

1.1. Latar Belakang

Kebutuhan manusia akan informasi memacu pesatnya perkembangan teknologi di bidang informasi dan telekomunikasi. Teknologi yang semakin meningkat didukung dengan sarana dan prasarana yang memadai, membuktikan bahwa kini informasi telah menjadi kebutuhan pokok dalam kehidupan manusia. Sistem informasi dan teknologi informasi dalam hal ini berfungsi sebagai pendukung untuk mengambil keputusan yang tepat berdasarkan informasi yang tersedia.

Dengan perkembangan teknologi informasi yang ada saat ini dapat melakukan pengolahan data dengan mudah, dapat menghasilkan suatu informasi yang kita butuhkan dengan akurat dan mengefektifkan waktu, serta dengan biaya yang kita keluarkan lebih efisien. Keunggulan inilah yang menjadikan teknologi informasi saat ini banyak berperan serta dalam segala bidang dan aspek kehidupan yang ada, dan berkembang sesuai dengan kebutuhan masyarakat.

Demikian halnya dalam pengelolaan rekapitulasi data pembukuan, teknologi informasi menjadi hal penting perusahaan dalam melakukan pengelolaan rekapitulasi data karena telah dipercaya dapat membantu bagian pembukuan data dalam menghasilkan laporan keuangan yang lebih akurat, dan mengefektifkan waktu dalam penyusunannya. Tentunya teknologi informasi yang digunakan untuk pengelolaan rekapitulasi data tersebut bukan hanya dapat mempermudah pihak yang terkait dalam perusahaan dalam menghasilkan laporan

Pengelolaan informasi dengan komputer umumnya memiliki jumlah yang besar dari segi data yang di kelola, dan juga memerlukan perangkat-perangkat pendukung dengan biaya pengelolaan dan perawatan yang besar, akan tetapi informasi yang dihasilkan lebih akurat, cepat dan efisien. Dalam melakukan tugasnya, bagian pembukuan di Koperasi Universitas Pembangunan Nasional Veteran Jawa Timur melakukan proses pengolahan data dan pencatatan secara manual ke dalam buku besar.

Informasi mengenai tentang pembukuan keuangan di Girimart Universitas Pembangunan Nasional Veteran Jawa Timur merupakan hal yang utama, sehingga diperlukan suatu sistem yang dapat mengelola data-data keuangan dengan baik sehingga memudahkan dalam menyediakan informasi tentang data-data perhitungan keuangan secara cepat dan tepat.

Di sini kebutuhan akan informasi secara akurat dan tepat sangat dibutuhkan, maka dari itu dibuatlah suatu aplikasi yang dapat menangani semua masalah pembukuan keuangan dari girimart ke koperasi. Dikarenakan banyaknya kelemahan yang ditimbulkan karena pengolahan data secara manual, maka pada tugas akhir ini akan berorientasi pada pembangunan aplikasi perangkat lunak untuk menangani masalah rekapitulasi data keuangan dari Girimart ke Koperasi agar lebih terkomputerisasi.

Pada Tugas Akhir ini, saya menggunakan sistem komputerisasi untuk sistem informasi rekapitulasi data dari Girimart yang akan di gunakan oleh pihak Koperasi UPN Vetaran Jatim. Dari uraian diatas Tugas Akhir ini mengangkat sebuah judul yaitu : “Sistem Informasi Rekapitulasi Data Girimart Di Koperasi

1.2. Perumusan Masalah

Berdasarkan latar belakang yang ada di atas, maka dapat dirumuskan permasalahan dari tugas akhir ini, yaitu:

a) Bagaimana membuat sistem yang terkomputerisasi, karena di koperasi masih menggunakan sistem manual

b) Bagaimana melakukan analisa laporan dari data yang dikumpulkan c) Bagaimana melakukan laporan kredit anggota dari girimart

1.3. Batasan Masalah

Dalam pembuatan sistem terdapat batasan-batasan masalah, ruang lingkup permasalahan hanya akan dibatasi pada:

a) Pembangunan software penggunakan bahasa pemrogaman PHP berbasis

Web yang digabungkan dengan Ajax

b) Menggunakan database MySql untuk menyimpan data

c) Tidak membahas masalah untuk pengembalian kredit anggota koperasi d) Tidak Membahas sistem rugi dan laba

e) Sistem informasi ini besifat offline, hanya digunakan oleh admin koperasi

1.4. Tujuan Penulisan

Tujuan dari Sistem Informasi rekapitulasi data dari girimart untuk koperasi adalah, memberikan kemudahan admin koperasi dalam melakukan rekapitulasi data, dan dapat melakukan analisa keuangan tiap minggu, bulan dan tahun, serta

 

1.5. Manfaat

Dengan adanya Sistem rekapitulasi data ini diharapkan dapat memberikan manfaat antara lain: 

a. Dapat memudahkan rekapitulasi data secara terkomputerisasi

b. Dapat menganalisa laporan dari grafik transaksi setiap minggu, bulan, dan tahun

c. Dapat memeriksa anggota yang melakukan kredit di girimart

1.6. Metodologi Penelitian

Dalam pembuatan Tugas Akhir kali ini, penulis akan menjelaskan tentang metode yang digunakan selama penulis menyusun dan membuat Tugas Akhir ini.

a) Studi literatur.

Melakukan pengamatan yang terjadi di perkuliahan, khususnya praktikum. Mempelajari dan mengumpulkan data serta informasi dari artikel maupun tutorial yang penulis cari di internet sesuai dengan materi penulisan tugas akhir.

b) Analisa dan perancangan sistem.

Menganalisa dan merancang konsep dari sistem koperasi yang masih menggunakan sistem manual dan mencari data-data yang berhubungan dengan sistem koperasi.

Pada tahap ini dilakukan proses implementasi dari hasil rancangan sistem yang akan dibuat dengan menggunakan bahasa pemrogaman PHP – AJAX dan database My SQL

d) Pengujian dan Evaluasi Sistem.

Melakukan uji coba sistem secara keseluruhan, apakah terjadi kesalahan proses dan melakukan modifikasi bila terjadi kesalahan proses.

e) Penulisan Skripsi

Pada tahap terakhir ini disusun buku sebagai dokumentasi dari pelaksanaan skripsi.

1.7. Sistematika Penulisan

Pada laporan Tugas Akhir ini akan menjelaskan secara lengkap tentang membangun sistem informasi rekapitulasi data dari Girimart untuk Koperasi dengan berdasarkan data-data yang telah di kumpulkan. Agar lebih memahami materi, laporan Tugas Akhir ini dibagi menjadi enam bab yang dilengkapi dengan penjelasan langkah-langkah dan ilustrasinya.

BAB I : PENDAHULUAN

Bab ini berisi tentang deskripsi umum tentang Tugas Akhir yang meliputi diantaranya latar belakang, batasan masalah, tujuan, manfaat, serta metodologi serta sistematika pembahasan.

BAB II : TINJAUAN PUSTAKA

BAB III : ANALISA DAN PERANCANGAN SISTEM

Bab ini berisi tentang analisa dari sistem yang akan dibuat dan perancangan sistem yang meliputi diantaranya deskripsi umum sistem, kebutuhan sistem, dan kebutuhan basis data.

BAB IV : IMPLEMENTASI

Bab ini berisi tentang hasil implementasi dari perancangan sistem sebelumnya yang meliputi implementasi basis data, implementasi design database,

implementasi pembuatan program dan implementasi form-form antarmuka

aplikasi (interface).

BAB V : UJI COBA DAN EVALUASI

Bab ini berisi tentang penjelasan lingkungan uji coba sistem, skenario uji coba, pengujian yang dilakukan untuk kelayakan sistem ini.

BAB VI : PENUTUP

Bab ini berisi tentang kesimpulan dan saran untuk pengembangan sistem lebih lanjut dalam upaya memperbaiki kelemahan pada sistem guna untuk mendapatkan hasil sistem sesuai dengan yang diinginkan dan kesempurnaan sistem.

BAB II

TINJAUAN PUSTAKA

Sebagai penunjang, di bawah ini akan disajikan sejumlah dasar-dasar teori yang digunakan sebagai dasar dalam penyusunan Tugas Akhir ini.

2.1 Koperasi

Koperasi adalah badan usaha yang beranggotakan orang-orang atau badan

hukum koperasi dengan melandaskan kegiatannya berdasarkan prinsip koperasi sekaligus sebagai gerakan ekonomi rakyat yang berdasarkan asas kekeluargaan. Koperasi bertujuan untuk menyejahterakan anggotanya.

Berdasarkan pengertian tersebut, yang dapat menjadi anggota koperasi yaitu:

1. Perorangan, yaitu orang yang secara sukarela menjadi anggota koperasi

2. Badan hukum koperasi, yaitu suatu koperasi yang menjadi anggota

koperasi yang memiliki lingkup lebih luas.

Pada Pernyataan Standard Akuntansi Keuangan (PSAK) No. 27 (Revisi 1998), disebutkan bahwa karateristik utama koperasi yang membedakan dengan badan usaha lain, yaitu anggota koperasi memiliki identitas ganda. Identitas ganda maksudnya anggota koperasi merupakan pemilik sekaligus pengguna jasa koperasi.

Umumnya koperasi dikendalikan secara bersama oleh seluruh anggotanya, dimana setiap anggota memiliki hak suara yang sama dalam setiap keputusan yang diambil koperasi. Pembagian keuntungan koperasi (biasa disebut Sisa Hasil

Usaha atau SHU) biasanya dihitung berdasarkan andil anggota tersebut dalam koperasi, misalnya dengan melakukan pembagian dividen berdasarkan besar pembelian atau penjualan yang dilakukan oleh si anggota.

2.1.1 Struktur Organisasi Koperasi UPN

Struktur organisasi Primkop UPN Veteran Jatim sudah sesuai dengan Surat Keputusan Menhankam Nomor : Kep/06/VI/1992 tanggal 5 Juni 1992 sebagai berikut :

Pembina

Ketua

Diskop & P2KM Badan Pengawas

Bendahara Sekretaris

Gambar 2.1 Struktur Organisasi Koperasi UPN

Ur. BIA Ur. Nikkop Ur. Renus

Ur. Buku Ur. Um

Unit Usaha I Unit Usaha II

Perc, Kontraktor, dll Cleaning Service

2.2 Konsep Dasar Sistem Informasi

Suatu sistem pada dasarnya adalah sekolompok unsur yang erat hubungannya satu dengan yang lain, yang berfungsi bersamasama untuk mencapai tujuan tertentu.Secara sederhana, suatu sistem dapat diartikan sebagai suatu kumpulan atau himpunan dari unsur, komponen, atau variabel yang terorganisir, saling berinteraksi, saling tergantung satu sama lain, dan terpadu. Dari defenisi ini dapat dirinci lebih lanjut pengertian sistem secara umum, yaitu :

a)Setiap sistem terdiri dari unsur-unsur

b)Unsur-unsur tersebut merupakan bagian terpadu sistem yang bersangkutan. c)Unsur sistem tersebut bekerja sama untuk mencapai tujuan sistem.

d)Suatu sistem merupakan bagian dari sistem lain yang lebih besar

Secara umum informasi dapat didefinisikan sebagai hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadiankejadian yang nyata yang digunakan untuk pengambilan keputusan. Informasi merupakan data yang telah diklasifikasikan atau diolah atau diinterpretasi untuk digunakan dalam proses pengambilan keputusan.

Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan informasi yang diperlukan untuk pengambilan keputusan.

Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja diperlukan Sistem ini menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan informasi yang diterima dengan menggunakan sistem informasi atau peralatan sistem lainnya.

2.2.1 Komponen dan Elemen Sistem Informasi

A. Komponen sistem informasi

Sistem informasi terdiri dari komponenkomponen yang disebut blok bangunan (building blok), yang terdiri dari komponen input, komponen model, komponen output, komponen teknologi, komponen hardware, komponen software, komponen basis data, dan komponen kontrol. Semua komponen tersebut saling berinteraksi satu dengan yang lain membentuk suatu kesatuan untuk mencapai sasaran.

1. Komponen input

Input mewakili data yang masuk kedalam sistem informasi. Input disini termasuk metode dan media untuk menangkap data yang akan dimasukkan, yang dapat berupa dokumen-dokumen dasar.

2. Komponen model

Komponen ini terdiri dari kombinasi prosedur, logika, dan model matematik yang akan memanipulasi data input dan data yang tersimpan di basis data dengan cara yang sudah ditentukan untuk menghasilkan keluaran yang diinginkan.

3. Komponen output

Hasil dari sistem informasi adalah keluaran yang merupakan informasi yang berkualitas dan dokumentasi yang berguna untuk semua pemakai sistem.

4. Komponen teknologi

Teknologi merupakan “tool box” dalam sistem informasi, Teknologi digunakan untuk menerima input, menjalankan model, menyimpan dan mengakses data, meghasilkan dan mengirimkan keluaran, dan membantu pengendalian dari sistem secara keseluruhan.

5. Komponen hardware

Hardware berperan penting sebagai suatu media penyimpanan vital bagi sistem informasi. Yang berfungsi sebagai tempat untuk menampung database atau lebih mudah dikatakan sebagai sumber data dan informasi untuk memperlancar dan mempermudah kerja dari sistem informasi.

Software berfungsi sebagai tempat untuk mengolah,menghitung dan memanipulasi data yang diambil dari hardware untuk menciptakan suatu informasi.

7. Komponen basis data

Basis data (database) merupakan kumpulan data yang saling berkaitan dan berhubungan satu dengan yang lain, tersimpan di pernagkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Data perlu disimpan dalam basis data untuk keperluan penyediaan informasi lebih lanjut. Data di dalam basis data perlu diorganisasikan sedemikian rupa supaya informasi yang dihasilkan berkualitas. Organisasi basis data yang baik juga berguna untuk efisiensi kapasitas penyimpanannya. Basis data diakses ataudimanipulasi menggunakan perangkat lunak paket yang disebut DBMS (Database Management System).

8. Komponen kontrol

Banyak hal yang dapat merusak sistem informasi, seperti bencana alam, api, air, debu, kecurangan-kecurangan, kegagalan-kegagalan sistem itu sendiri, ketidak efisienan, sabotase dan lain sebagainya. Beberapa pengendalian perlu dirancang dan diterapkan untuk meyakinkan bahwa hal-hal yang dapat merusak sistem dapat dicegah ataupun bila terlanjur terjadi sebuah kesalahan dapat langsung cepat diatasi.

B. Elemen sistem informasi

Sistem informasi terdiri dari elemenelemen yang terdiri dari orang, prosedur, perangkat keras, perangkat lunak, basis data, jaringan komputer dan komunikasi data. Semua elemen ini merupakan komponen fisik.

Gambar 2.2 Hubungan Elemen Sistem Informasi

1. Orang

Orang atau personil yang dimaksud yaitu operator komputer, analis sistem, programmer, personil data entry, dan manajer sistem informasi/EDP.

2. Prosedur

Prosedur merupakan elemen fisik. Hal ini di sebabkan karena prosedur disediakan dalam bentuk fisik seperti buku panduan dan instruksi. Ada 3 jenis prosedur yang dibutuhkan, yaitu instruksi untuk pemakai, instruksi untuk penyiapan masukan, instruksi pengoperasian untuk karyawan pusat komputer. 3. Perangkat keras

Perangkat keras bagi suatu sistem informasi terdiri atas komputer (pusat pengolah, unit masukan/keluaran), peralatan penyiapan data, dan terminal masukan/keluaran.

4. Perangkat lunak

Perangkat lunak dapat dibagi dalam 3 jenis utama :

a. Sistem perangkat lunak umum, seperti sistem pengoperasian dan sistem manajemen data yang memungkinkan pengoperasian sistem komputer. b. Aplikasi perangkat lunak umum, seperti model analisis dan keputusan. c. Aplikasi perangkat lunak yang terdiri atas program yang secara spesifik

dibuat untuk setiap aplikasi. 5. Basis data

File yang berisi program dan data dibuktikan dengan adanya media penyimpanan secara fisik seperti diskette, hard disk, magnetic tape, dan sebagainya. File juga meliputi keluaran tercetak dan catatan lain diatas kertas, mikro film, dan lain sebagainya.

6. Jaringan komputer

Jaringan komputer adalah sebuah kumpulan komputer, printer dan peralatan lainnya yang terhubung dalam satu kesatuan. Informasi dan data bergerak melalui kabel-kabel atau tanpa kabel sehingga memungkinkan pengguna jaringan komputer dapat saling bertukar dokumen dan data.

7. Komunikasi data

Komunikasi data adalah merupakan bagian dari telekomunikasi yang secara khusus berkenaan dengan transmisi atau pemindahan data dan informasi

diantara Komputer-komputer dan piranti-piranti yang lain dalam bentuk digital yang dikirimkan melalui media komunikasi data. Data berarti informasi yang disajikan oleh isyarat digital. Komunikasi data merupakan bagian vital dari suatu sistem informasi karena sistem ini menyediakan infrastruktur yang memungkinkan sebuah komputer dapat berkomunikasi satu sama lain.

2.2.2 Arsitektur dan Klasifikasi Sistem Informasi

A. Arsitektur sistem informasi

Sistem informasi dapat di bentuk sesuai kebutuhan organisasi masingmasing. Oleh karena itu, untuk dapat menerapkan sistem yang efektif dan efisien diperlukan perencanaan, pelaksanaan, pengaturan, dan evaluasi sesuai keinginan masingmasing organisasi. Guna dari sistem yang efektif dan efisien tidak lain untuk mendapatkan keunggulan dalam berkompetisi. Semua orang dapat menggunakan sistem informasi dalam organisasi, tetapi faktor efisiensi setiap sistem adalah berbeda.

Perlu diketahui, perubahan sistem, baik besar maupun kecil, selalu akan melalui tingkatan-tingkatan. Adapun tingkatan yang menjadi kunci yang digunakan untuk memecahkan bagian masalah baik itu secara menyeluruh maupun per bagian, yaitu sebagai berikut :

Gambar 2.3 Tingkatan Perubahan Sistem

Tingkat II : Design, merancang cara pemecahannya.

Tingkat III : Pelaksanaan, menerapkan design ke dalam sistem.

Tingkat IV : Kontrol, memeriksa tingkat pelaksanaan dijalankan sesuai dengan design

Tingkat V : Evaluasi, memeriksa apakah perubahan yang terjadi sesuai dengan tujuan semula.

Tingkat VI : Tindak lanjut, melaksanakn perubahan sesuai dengan hasil evaluasi yang ada.

B. Klasifikasi sistem informasi

Sistem informasi merupakan suatu bentuk integrasi antara satu komponen dengan komponen lain karena sistem memiliki sasaran yang berbeda untuk setiap kasus yang terjadi yang ada di dalam sistem tersebut. Oleh karena itu, sistem dapat di klasifikasikan dari beberapa sudut pandang, diantaranya :

a. Sistem abstrak atau sistem fisik

Sistem abstrak adalah sistem yang berupa pemikiran atau ide-ide yang tidak tampak secara fisik, misalnya sistem teologia, yaitu sistem yang berupa pemikiran hubungan antara manusia dengan Tuhan.

Sistem fisik merupakan sistem secara fisik, misalnya sistem komputer. b. Sistem alamiah dan sistem buatan manusia

Sistem alamiah adalah sistem yang terjadi melalui proses alam, tidak dibuat oleh manusia, misalnya sistem perputaran bumi.

Sistem buatan manusia merupakan sistem yang melibatkan interaksi manusia dengan mesin, yang disebut human machine system. Sistem informasi berbasis internet merupakan contoh human machine system karena menyangkut penggunaan komputer yang berinteraksi dengan manusia.

c. Sistem deterministik dan sistem probabilistik

Sistem deterministik adalah sistem yang beroperasi dengan tingkah laku yang dapat diprediksi.

Sistem probabilistik dalah sistem yang kondisi masa depannya tidak dapat diprediksi karena mengandung unsur probabilistik.

d. Sistem terbuka dan sistem tertutup

Sistem terbuka adalah sistem yang berhubungan dan di pengaruhi oleh lingkunagn luarnya. Sistem ini menerima masukan dan menghasilkan keluaran untuk subsistem lainnya.

Sistem tertutup adalah sistem yang tidak terhubung dan tidak terpengaruh oleh lingkungan luarnya. Sistem ini bekerja secara otomatis tanpa campur tangan pihak luar.

2.3 PHP

Script PHP (PHP : Hypertext Preprocessor) merupakan bahasa web

serverside yang bersifat open source. Bahasa PHP menyatu dengan script HTML yang sepenuhnya dijalankan pada server.

 Sebuah script yang tidak melakukan kompilasi dalam penggunanya.

 Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai IIS sampai dengan dengan Apache, dengan konfigurasi yang sangat mudah.

 Dalam sisi pengembangan lebih mudah, karena banyaknya developer yang membantu dalam pengembangannya.

 Pada sisi pemahaman, PHP adalah bahasa scripting yang paling mudah dikuasai karena referensi yang mudah ditemukan.

PHP adalah bahasa pemrograman Open Source yang dapat digunakan diberbagai Sistem Operasi (Unix, Linux, Windows) dan dapat dijalankan secara runtime melalui console ataupun terminal serta dapat dijalankan dengan perintah-perintah system.

2.4 Tipe Data Script PHP

PHP memiliki 5 jenis tipe data dasar yaitu, Integer, Float, String, Array dan Object. Berbeda dengan dengan program-program lainnya, jenis tipe data

PHP tidak dapat langsung ditentukan sendiri, melainkan akan ditentukan berdasarkan untuk apa variabel tersebut digunakan pada saat program dijalankan.

2.4.1 Tipe Data Integer

Int atau Integer merupakan tipe bilangan bulat. Tipe data integer memiliki ukuran maksimum 32 bit atau bisa menampung nilai sampai 2 milyar.

$test = 123 // desimal $test = -123 // negatif desimal $test = 0123 // octal

$test = 01A // hexadesimal

Apabila nilai dari sebuah variabel di luar jangkauan tipe data integer, maka otomatis akan dikonversi ke tipe float.

2.4.2 Tipe Data Float

Floating point merupakan tipe data yang berisikan bilangan pecahan atau bilangan desimal. Data floating memiliki nilai maksimum mencapai 1.8E308. Bentuk dari data ini adalah desimal ataupun bentuk pangkat. Perhatikan contoh berikut ini :

$nilai_desimal=0.298;

$nilai_pangkat=298.0E-5;

2.4.3 Tipe Data String

Tipe data String dinyatakan dengan menggunakan tanda kutip tunggal (' ') atau menggunakan tanda kutip ganda (“ ”). perhatikan contoh berikut ini :

$string='Selamat Belajar PHP'; $string=”Selamat Belajar PHP”;

Perbedaan penggunaan antara dua tanda kutip tersebut adalah , jika menggunakan tanda kutip tunggal, apabila dalam sebuah variable yang memiliki data string tesebut tedapat variable yang lain, maka nilai dari variable tersebut akan dieklarasikan atau dicetak nama variable itu sendiri. Perhatikan contoh berikut ini :

<html><head>

<tittle>Data String PHP</tittle></head> <body>

<?

//data_string.php $warna=”Putih”;

$data1=”Warna bunga melati adalah $warna”; $data2=”Warna bunga melati adalah $warna”; echo”<br>$data1”;

echo’<br>$data2’; ?>

</body></html>

Jalankan program diatas dengan menggunakan browser, sehingga menyebabkan tampak bahwa string yang menggunakan petik ganda, variabel $warna akan dicetak isinya, yaitu “Putih”. Sebaliknya untuk string yang menggunakan tanda petik tunggal, penulisan variabel $warna akan tercetak apa adanya. Untuk menulis atau mendeklarasikan baris baru, backslash, tanda dollar, maka harus menambahkan tanda backslash (\) didepan karakter tersebut.

Tabel 2.1 Deklarasi Tipe Data String

Deklarasi Pengertian \n Untuk berpindah ke baris baru/ baris berikutnya.

\r Untuk berpindah ke baris berikutnya paragraf baru.

\t Untuk membentuk tab Horizontal.

\\ Untuk menuliskan tanda backslash.

\$ Untuk menuliskan tanda dollar.

\” Untuk menuliskan tanda kutip.

\[0-9]{3,7} Digunakan untuk mendeklarasikan karakter berurutan

sesuai dengan formatnya menggunakan ekpesi reguler.

2.4.4 Tipe Data Array

Array adalah jenis tipe data yang mengandung satu atau lebih data di dalam sebuah variabel. Penulisan Array dimulai dengan indeks 0(nol) dan apabila nilai index array tidak ditentukan, maka otomatis index akan diurutkan sesuai dengan urutan penulisan. Sintaks penulisan array :

$nama_variabel _array ( nilai array ) ; atau

$nama_variabel_array [ key ] = nilai array ;

Berikut ini adalah contoh penulisan data array :

<html><head>

<tittle>Program PHP</tittle></head> <body>

<?

//data_array.php

$nama_hari=array ('Minggu', 'Senin', 'Selasa','Rabu','Kamis','Jumat','Sabtu'); $data[]=40;

$data[]='600'; $data[]=”80”; $data[]=”data array”; $data[]=''array; $nama[awal]=”Prima”; $nama[akhir]=”Fauzyah”;

for ($hari=0; $hari<=6; $hari++) {

echo”<br>Hari $nama_hari[$hari]”;

}

for ($i=0; $i<5; $i++) {

Perhatikan contoh diatas, array dideklarasikan secara langsung dengan memasukkan nilainya. Apabila nilai array tidak diisi, maka secara otomatis nilai tersebut akan diisi dengan nilai angka index. Setelah dijalankan dengan program tersebut adalah browser, maka hasilnya akan tampak sebagai berikut :

 Hari Minggu Hari Senin Hari Selasa Hari Rabu Hari Kamis Hari Jumat Hari Sabtu

Variabel $data[0] nilainya adalah: 40 Variabel $data[1] nilainya adalah: 600 Variabel $data[2] nilainya adalah: 80

Variabel $data[3] nilainya adalah: data array Variabel $data[4] nilainya adalah: array Variabel $data[awal] nilainya adalah: Prima Variabel $data[akhir] nilainya adalah: Fauzyah  

PHP adalah bahasa pemrograman lain mengenal adanya penggunaan istilah array multidimensi, yaitu array bertingkat. Perhatikan contoh berikut ini :

Penulisan array dapat dideklarasikan dalam bentuk tabel berikut ini adalah :

Apabila program diatas dijalankan dibrowser, maka akan menghasilkan nilai kuning yang dapat dipanggil dengan menggunakan fungsi echo, yaitu :

echo $hewan [“warna”][“putih”]

Hasil dari script diatas dengan menggunkan browser sebagai berikut : Nilai dari Variabel $hewan[“Warna”][“Putih”] adalah Kelinci Hewan

Empat Kuda Kaki

Dua Ayam

Putih Kelinci

Hitam Musang Warna

Coklat Kucing

//data_array2.php

//didefinisikan dengan array hewan $hewan=array(

“kaki”=>array (”empat”=>”kuda”, “dua”=>”ayam”), “warna”=>array (“putih”=>”kelinci”, “hitam”=>”musang”, ”coklat”=>”kucing”)

);

//tampilkan array buah [warna][jeruk] echo “Nilai dari variabel \$hewan[\”warna\”] \”putih\”] adalah ”.$hewan[“warna”][“putih”]; ?>

2.4.5 Tipe Data Object

Tipe data object adalah tipe data yang dapat berupa bilangan, variabel, ataupun fungsi. Dengan dibuatnya data object ini dapat membantu programmer untuk membuat sebuah program. Data ini dapat disertakan ke dalam program, sehingga meringkas beberapa fungsi dan dapat memperkecil ukuran file. Semakin kecil ukuran file, maka semakin singkat waktu yang dibutuhkan untuk mengakses file tersebut. Contoh dari penulisan data object adalah :

<html><head>

<tittle>Program PHP</tittle></head>

<body>

<?

Class warna_daun{

Function warna () {

return “Pada umumnya berwarna hijau, tapi

kadang kuning atau coklat”;

}

}

$daun=new warna_daun;

echo “Warna daun adalah “ .$warna_daun->$warna();

?>

</body></html>

2.5 Operator Dalam Script PHP

Operator digunakan untuk memanipulasi suatu variabel untuk mendapatkan sebuah nilai baru. Nilai variabel yang akan dimodifikasi menggunakan operator disebut Operand.

2.5.1 Operator Aritmatika

Operator ini digunakan untuk operasi aritmatika, misalnya penambahan, pengurangan, perkalian dan pembagian. Perhatikan tabel operasi aritmatika PHP berikut ini :

Tabel 2.2 Operasi Aritmatika PHP

Operator Nama + Addition

- Subtraction / Division * Multiplication % Modulus

Contoh penggunaan operator Aritmatika :

<html>

<title> Operator Aritmatika</title> <body>

<H1>Operator Aritmatika</H1> <?php

Echo ”5 + 2 =”, 5 + 2, ”<br>” ; Echo ”5 - 2 =”, 5 - 2, ”<br>” ; Echo ”5 * 2 =”, 5 *2, ”<br>” ; Echo ”5 / 2 =”, 5 / 2, ”<br>” ;

Echo ”5 % 2 =”, 5 % 2, ”<br>” ; ?>

</body> </html>

Apabila program diatas dijalankan dibrowser, maka akan menghasilkan : Operator Aritmatika

5 + 2 = 7 5 - 2 = 3 5 * 2 = 10 5 / 2 = 2.5 5 % 2 = 1

2.5.2 Operator String

Operator String adalah operator yang digunakan untuk menggabungkan teks, baik teks dengan variabel, maupun suatu teks dengan teks yang lain. Operator ini dideklarasikan dengan memberikan tanda titik (.) diantaranya operan dalam suatu operasi.

Perhatikan contoh berikut ini :

<?

$a=”Hello”;

$b=”Selamat Belajar PHP”;

$c=$a.” “.$b;

echo “<br>$c”;

//Variabel $c berisikan “Hello Selamat Belajar PHP” ?>

Apabila program tersebut dijalankan dibrowser, maka akan menghasilkan tulisan “Hello Selamat Belajar PHP”. Variabel $c adalah gabungan antar variabel $a yang bernilai “Hello”. Teks “”, dan variabel $b yang bernilai “Selamat Belajar PHP”.

2.5.3 Operator Bitwise

Tabel 2.3. Operasi Bitwise

Operator Nama Contoh Keterangan

& And $a & $b Bit akan bernilai 1 jika $a dan $b

bernilai 1

| Or $a | $b Bit akan bernilai 1 jika $a atau $b

bernilai 1

^ Xor $a ^ $b Bit akan bernilai 1 jika $a atau $b,

tetapi tidak kedua-duanya berniali 0

~ Not $a ~ $b Bit akan bernilai 1 jika $a dan $b

bernilai 0

<< Shift Left $a << $b Menggeser bit $a sebanyak $b langkah ke kiri. Setiap pengertian “dikalikan dengan nilai dua”

>> Shift Right $a >> $b Menggeser bit $a sebanyak $b langkah ke kanan. Setiap pengertian “dibagi dengan nilai dua”

Operator ini berfungsi untuk menghasilkan nilai bilangan binary (bit), yaitu 1 dan 0. perhatikan tabel operasi bitwise diatas

2.5.4 Operator Perbandingan

Operasi perbandingan digunakan pada struktur operasi kontrol program, seperti if dan else, dimana perbandingan antara dua pilihan lain. Perhatikan Tabel 2.4 yang menampilkan operasi perbandingan.

Tabel 2.4 Operasi Perbandingan

Operator Nama Contoh Keterangan

> Lebih dari $a > $b True jika $a lebih besar dari

$b

< Lebih kecil $a < $b True jika $a lebih kecil dari

$b

>= Lebih dari atau

sama dengan

$a >= $b True jika $a lebih besar atau sama dengan dari $b

<= Lebih kecil atau

sama dengan

$a <= $b True jika $a lebih kecil atau sama dengan dengan dari $b

== Sama dengan $a == $b True jika $a sama dengan dari

$b

!= Tidak sama dengan $a != $b True jika $a tidak sama

dengan $b

2.5.5 Operator Presedence

Presendence adalah urutan operasi sesuai dengan tingkatan operator. Jadi, operasi perhitungan dijalankan sesuai dengan urutan atau tingkatan yang lebih tinggi terlebih dahulu. Berikut ini adalah Tabel 2.5 tentang prioritas eksekusi operator dari level tertinggi hingga paling rendah

Tabel 2.5. Operasi Presedence

Nomor Prioritas Operator

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ()[]

~ ! ++ -- $ & * / %

+ - <> <= >= == != & ^ ! && ||

= += -= *= /= &= |= ^= .= AND (AND)

XOR (||) OR

Perhatikan contoh : 10 – 5 * 4

Operasi ini akan menghasilkan nilai -10 dan bukannya 20, sebab operator * (perkalian) mempunyai level yang lebih tingdi dari pada – (pengurangan), sehingga urutan operasinya adalah 5 dikalikan 4 terlebih dahulu, kemudian mengurangi 10.

2.5.6 Operasi Nilai Variabel dari Form HTML

Salah satu ciri web yang dinamis adalah menyediakan form dapat dimanfaatkan pengunjung untuk mengirim informasi kepada server.

Dengan demikian, ada interaksi dua arah antara pengunjung dan webmaster (pemilik web site), sehingga suatu web site menjadi lebih hidup.

Dalam pembuatan form ini. Yang perlu diperhatikan adalah tag <FORM> beserta atributnya, seperti method, action, dan input data yang lainnya. Action adalah atribut yang menunjukkan isian atau informasi, bahwa data akan dikirimkan ke suatu file proses data yang akan diakses. Atribut method mempunyai dua macam pilihan nilai, yaitu POST dan GET.

a) Jika menggunakan pilihan GET, maka semua isian dikirimkan ke server dalam satu kesatuan URL-nya.

b) Jika menggunakan pilihan POST, data isian akan dikirimkan ke server terpisah dengan URL-nya.

Kelemahan dari method GET adalah data yang digunakan sebagai paramater akan tampil pada URL, selain itu method GET tidak dapat mengirim data dalam jumlah yang besar. Kemudian yang tidak kalah pentingnya adalah name (nama) dari inputan data, karena nama dari kontrol data ini akan menjadi variabel yang membawa data isian dari form.

2.6 XHTML

XHTML (eXtensible HyperText Markup Language) adalah sebuah kombinasi antara HTML (HyperText Markup Language) dan XML (eXtensible HTML Language) yang merupakan bentuk sempurna dari HTML. Pada penulisan XHTML memiliki aturan lebih ketat dan mengharuskan penulisan tag bersih

XHTML merupakan bentuk HTML yang didefinisikan sebagai aplikasi XML yang artinya XHTML berisi semua elemen dengan HTML 4.01 dikombinasikan dengan sintaks XML. XML adalah markup language dimana semua penulisan tag harus dibuat secara benar agar dapat menghasilkan dokumen yang memiliki susunan tag kode baik. XML di desain untuk mendiskripsikan data, dan HTML di desain untuk menampilkan data.

Perkembangan teknologi browser, dimana kini tidak hanya ada di komputer saja (browser ada juga di PDA, handphone, Game Console, dsb), memunculkan kebutuhan adanya sebuah scirpt yang standart dan bebas dari kesalahan agar dapat berjalan dengan baik disemua platform alat penangananya.

Kombinasi HTML dan XML (yang lalu dikenal dengan nama XHTML) menggunakan aturan yang ketat dalam hal penulisan. Halaman XHTML dapat dibaca pada peralatan yang mendukung XML. Keuntungan XML adalah dapat menyajikan dokumen “well-formed” dan support di banyak browser.

2.6.1 Perbedaan Antara XHTML dan HTML

Sebenarnya, XHTML tidak terlalu berbeda dengan HTML 4.01. Jika kita sudah memiliki kemampuan HTML 4.0.1,maka akan sangat membantu dalam memulai XHTML. Perbedaannya adalah :

1. Dalam XHTML, semua elemen harus saling tersarang dan harus selalu

ditutup. Maksudnya harus saling tersarang adalah semua elemen harus ditulis dengan tag pembuka dan ditutup berurutan dengan penutupnya lebih dahulu. Contohnya : <p> <b>Paragraph ini ditulis dengan cetak tebal yang

dimulai dengan tag <b> dan diakhiri oleh tag </b>. </b></p>

Paragraph ini ditulis dengan cetak tebal yang dimulai dengan tag <b> dan diakhiri oleh tag </b>.

2. Sekalipun dan tampil di browser hanya dengan menuliskan <p><b> tanpa menutupnya dengan </p></b>, hal tersebut bukan merupakan penulisan XHTML yang benar.

3. Elemen XHTML harus ditulis dengan hutuf kecil (lowercase).

Jika dalam HTML anda bebas untuk menuliskan dengan : <HTML><HEAD>

<TITTLE> ini adalah tittle situs saya </TITTLE> </HEAD> <BODY>

<P ALIGN=”CENTER”>Ini adalah pargraph align center </P> </BODY></HTML>

Dalam XHTML anda harus mengubah dengan huruf kecil semua, berikut script yang akan digunakan :

<html><head>

<tittle>ini adalah tittle situs saya</tittle></head> <body>

<p align=”center”> Ini adalah paragraph align center </p> </body></html>

2.6.2 Valid XHTML

Seringkali menemui sebuah web site atau blog memasang banner kecil atau sekedar text link tertulis “Valid XHTML”. Jika melihat, pasti link tujuan ataupun text link tersebut mengarah pada sebuah url :

validator.w3.org/check?uri=www.namadomain.com

Bagi yang sudah mengerti tentu tidak penasaran lagi dan tinggal membuktikan kebenaran validitas banner atau text link tersebut, sedangkan bagi yang belum tahu, mengklik hal tersebut dapat membuat semakin bertanya-tanya.

Valid XHTML adalah sebuah penanda yang diberikan kepada setiap website/ blog oleh konsorium W3C yang menjelaskan kepada setiap bahwa website yang sedang dikunjungi sudah menggunakan kode-kode programan HTML lanjutan (XHTML) yang sudah valid. Valid disini berati kode yang ditulis sudah sesuai dengan aturan-aturan yang ada dalam standart penulisan XHTML (HTML lanjut). Beberapa aturan dasar untuk valid XHTML adalah :

a) Penulisan tag XHTML menggunakan huruf kecil, tidak seperti standart penulisan HTML jaman dulu, sekalipun kode yang dituliskan sama persis. b) Setiap kode XHTML yang dibuka harus ditutup kembali. Sebagai contoh :

jika anda melakukan pembukaan dengan tag <body> maka anda harus kembali menutupnya ketika sudah selesai dengan tag <body> dengan </body>.

c) Setiap tag yang tidak memiliki penutup harus ditutup dengan dirinya sendiri. Beberapa diantaranya adalah :

 penulisan tag <br>, dimana yang benar adalah <br/>

 Penulisan tag <img>, dimana yang benar adalah <img src=”” alt=””/>

 Penulisan tag <hr>, dimana yang benar adalah <hr/>

d) Setiap tag <li> ataupun <ol> harus dimulai dengan tag <ul> dan ditutup dengan tag </ul> setelah </li> ataupun </ol>.

e) Tag yang mendefinisikan tag lebih general dituliskan belakangan. Sebagai contoh : anda tidak boleh menuliskan <center> <p> ini adalah paragraph teks yang berposisi center </p> </center>. Yang benar anda harus menuliskannya menjadi :

<p align=”center”>Ini adalah pargraph teks yang berposisi center</p>

2.7 AJAX (Asynchronous JavaScript and XMLHTTP)

Suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:

 DOM yang diakses dengan client side scripting language, seperti

VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi

 Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa

framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.

 XML umumnya digunakan sebagai dokumen transfer, walaupun format

lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM

 JSON dapat menjadi pilihan alternatif sebagai dokumen transfer,

mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

AJAX itu sendiri diperkenalkan oleh seorang pakar pembuat program khususnya pemrograman berbasis web. Orang yang sangat berjasa tersebut tidak lain dan tidak bukan adalah Rasmus Lerdorf, dari tangan dingin Rasmus Lerdorf ini pulalah beberapa waktu yang lalu lahirlah PHP.

Untuk mengaplikasikan AJAX dalam website, yang dibutuhkan adalah browser yang menyediakan layanan Javascript, dan komponen XMLHTTP bagi pengguna Internet Explorer (IE), dan XMLHttpRequest untuk Firefox, Safary, Opera dan browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat pengguna internet banyak yang menggunakan IE dan Firefox.

Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah teknologi javascript, yang notabene sudah lama digunakan. Oleh karena itu, bagi yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX. Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX, HTML, PHP), akan tetapi keseluruhan dari hal tersebut. Hal ini karena penggunaan AJAX tidak hanya pada sisi client (browser), tapi juga melibatkan respon dari server.

Dengan menggunakan konsep ini, page HTML bisa membuat koneksi secara asinkron ke server dengan cara mengambil XML atau dokumen text. Selanjutnya XML atau dokumen text ini akan digunakan oleh javascript untuk meng-update atau memodifikasi Document Object Model (DOM) pada page HTML.

Untuk selanjutnya teknologi ini juga dikenal web remoting atau remote scripting. Developer Web dapat mengkombinasikan plug in, java applets atau hidden frame untuk mengemulasikan interaksi antara page HTML dengan dokumen XML. Dalam teknologi Javascript telah disediakan sebuah object yaitu XMLHTTPRequest. Object ini sudah banyak disupport oleh banyak browser

Berikut ini ilustrasi yang menggambarkan interaksi AJAX dengan Server :

Gambar 2.4 Interaksi AJAX dengan Server

Konsep AJAX ini ide awalnya dikemukakan oleh Rasmus Lerdorf. Rasmus Lerdorft mengemukakan konsep AJAX ini dalam sebuah miling list (milist). Berawal dari milist tersebut konsep AJAX kemudian dikenal dan dikembangkan oleh banyak orang. Berikut ini isi milist yang dikirimkan oleh Rasmus Lerdorf.

function createRequestObject() { List: php-general

Subject: [PHP] Rasmus' 30 second AJAX Tutorial - [was Re: [PHP] AJAX & PHP] From: Rasmus Lerdorf <rasmus () lerdorf ! com>

Date: 2005-07-21 22:50:56

Message-ID: 42E026D0.3090601 () lerdorf ! com

I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became "AJAX". And it really isn't as complicated as a lot of people make it out to be. Here is a simple example from one of my apps. First the Javascript:

function createRequestObject() { var ro;

var browser = navigator.appName;

if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{

ro = new XMLHttpRequest(); }

return ro; }

http.send(null); }

function handleResponse() { if(http.readyState == 4){

var response = http.responseText; var update = new Array();

if(response.indexOf('|' != -1)) {

update = response.split('|');

document.getElementById(update[0]).innerHTML = update[1]; }

} }

This creates a request object along with a send request and handle response function. So to actually use it, you could include this js in your page. Then to make one of these backend requests you would tie it to something. Like an onclick event or a straight href like this:

<a href="javascript:sndReq('foo')">[foo]</a>

That means that when someone clicks on that link what actually happens is that a backend request to rpc.php?action=foo will be sent.

In rpc.php you might have something like this:

switch($_REQUEST['action']) { case 'foo':

/ do something / echo "foo|foo done"; break;

... }

Now, look at handleResponse. It parses the "foo|foo done" string and splits it on the '|' and uses whatever is before the '|' as the dom element id in your page and the part after as the new innerHTML of that element. That means if you have a div tag like this in your page:

<div id="foo"> </div>

Once you click on that link, that will dynamically be changed to:

<div id="foo"> foo done </div>

That's all there is to it. Everything else is just building on top of this. Replacing my simple response "id|text" syntax with a richer XML format and makine the request much more complicated as well. Before you blindly install large "AJAX" libraries, have a go at rolling your own functionality so you know exactly how it works and you only make it as complicated as you need. Often you don't need much more than what I have shown here.

Expanding this approach a bit to send multiple parameters in the request, for example, would be really simple. Something like:

Atas dasar konsep yang dikemukakan oleh Rasmus Lerdorf tersebut, penulis (Eko Heri Susanto) mencoba untuk mengembangkan lebih lanjut bagaimana memanfaatkan konsep AJAX untuk membangun aplikasi web yang fleksibel dan interaktif.

2.7.1 Script AJAX

Langkah pertama yang akan dilakukan adalah menyiapkan script AJAX. Untuk lebih jelasnya, dibawah ini di paparkan bagaimana cara membuat script AJAX.

/*

=========================================================== AJAX Routine Class

Author :Eko Heri Version :1.0

=========================================================== */

001: function Ajax() 002: {

003: var http_request = false;

004: //var _datareturn='';//data return

005: var _postvalue='';//get data from form value 006: var _method='';//get or post

007: var _url='';//url address

008: var _responsetype='';//text or xml 009: var _formobject;//form id

010: var _documentid='';//get document id 011:

012: function setMethod(setValue){ 013: _method=setValue;

014: return false; 015: }

016: this.setMethod=setMethod; 017:

018: function setUrl(setValue){ 019: _url=setValue;

020: }

021: this.setUrl=setUrl; 022:

023: function setResponseType(setValue){ 024: _responsetype=setValue;

025: }

026: this.setResponseType=setResponseType; 027:

028: function setDocumentId(setValue){ 029: _documentid=setValue;

030: }

031: this.setDocumentId=setDocumentId; 032:

033: function setFormObject(setValue){ 034: _formobject=setValue;

035: }

036: this.setFormObject=setFormObject; 037:

042: if (window.XMLHttpRequest) 043: { // Mozilla, Safari ,...

044: http_request = new XMLHttpRequest(); 045: if (http_request.overrideMimeType) 046: {

047: http_request.overrideMimeType('text/xml'); 048: // See note below about this line

049: } 050: } 051: else

052: if (window.ActiveXObject) 053: { // IE

054: var aVersions = [ "MSXML2.XMLHttp.6.0", 055: "MSXML2.XMLHttp.5.0",

056: "MSXML2.XMLHttp.4.0", 057: "MSXML2.XMLHttp.3.0", 058: "Microsoft.XMLHTTP" ];

059: for (var i = 0; i < aVersions.length; i++) 060: {

061: try 062: {

063: http_request = new ActiveXObject(aVersions[ i ]); 064: break;

065: }

066: catch (e) 067: {

068: // Do nothing 069: }

070: }//end for

071: }//end if window.ActiveXObject 072: if (!http_request)

073: {

074: alert ('Giving up :( Cannot create an XMLHTTP instance'); 075: return false;

076: } 077:

078: var timestamp = new Date();

079: var uniqueURI = _url+ (_url.indexOf("?") > 0 ? "&" : "?")+ "timestamp="+

timestamp.getTime(); 080:

081: if(_method=="get") 082: {

083: http_request.open('GET', uniqueURI, true); 084: http_request.onreadystatechange = handleResponse; 085: http_request.send(null);

086: } 087: else 088: {

089: if(!_formobject)return false;

090: for(i = 0; i < _formobject.length; i++) 091: {

092: if (_postvalue.length) _postvalue += '&'; 093: switch(_formobject.elements[i].type) 094: {

095: case "text":

096: _postvalue += _formobject.elements[i].name + '=' + encodeURI(_formobject.elements[i].value);

097: break;

098: case "password":

099: _postvalue += _formobject.elements[i].name + '=' + encodeURI(_formobject.elements[i].value); 100: break;

101: case "textarea":

102: _postvalue += _formobject.elements[i].name + '=' + encodeURI(_formobject.elements[i].value); 103: break;

104: case "hidden":

110: _postvalue +=

_formobject.elements[i].options[_formobject.elements[i]. selectedIndex-1].value;

111: } 112: break; 113: }//end switch 114: }//end for

115: http_request.open('POST', uniqueURI, true); 116: http_request.onreadystatechange = handleResponse; 117: http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 118: http_request.send(_postvalue);

119: for(i = 0; i < _formobject.length; i++) 120: {

121: if((_formobject.elements[i].type=="text")|| 122: (_formobject.elements[i].type=="textarea")|| 123: (_formobject.elements[i].type=="hidden")|| 124: (_formobject.elements[i].type=="password")) 125: _formobject.elements[i].value="";

126: } 127:

128: }//end else 129: }//end function

130: this.createRequest=createRequest; 131:

132: function handleResponse() 133: {

134: if (http_request.readyState == 4) 135: {

136: if (http_request.status == 200) 137: {

138: var docid=new Array(); 139: var i;

140: docid=_documentid.split('~'); 141:

142: if(_responsetype=="text") 143: {

144: var responsetxt=new Array();

145: responsetxt=http_request.responseText.split('|'); 146:

147: for(i=0;i<docid.length;i++) 148: {

149: document.getElementById(docid[i]).innerHTML=''+responsetxt[i]; 150: }

151: }

152: else if(_responsetype=="xml") 153: alert(http_request.responseXML); 154:

155: } else alert('There was a problem with the request.'); 156: }//else alert('There was a problem with the request

'+http_request.readyState); 157: return false;

158: }//end function 159: }//end class 160:

161: function doRequest(requestmethod, urladdress, responsetype, documentid, formobject){

162: try 163: {

164: var obj=new Ajax();

165: obj.setMethod(requestmethod); 166: obj.setUrl(urladdress);

Jika dilihat pada contoh script diatas, terdapat dua function utama yang menjadi inti dari AJAX yaitu function createRequest dan function handleRequest. Penjelasan kedua fungsi ini bisa dilihat dibawah ini.

Function createRequest ini bertugas untuk menginisialisasi object XMLHttpRequest, dimana object tersebut nantinya digunakan sebagai media komunikasi dengan server. Dalam function createRequest tersebut disertakan pengecekan object XMLHttpRequest yang disupport oleh browser client yang antara lain XMLHttpRequest untuk jenis browser FireFox, Safary, Opera dan ActiveXObject untuk Microsoft Internet Explorer (lihat baris 042 sampai dengan 072).

Pada umumnya dalam membangun aplikasi web, terdapat dua metode yang paling umum digunakan yaitu metode get dan post. Kedua metode ini akan dijalankan pada saat fungsi open pada object XMLHttpRequest kita panggil. Metode get pada umumnya digunakan untuk mengambil data dari server yang selanjutnya data tersebut ditampilkan di browser. Penanganan metode get ini bisa dilihat pada baris ke 081 sampai dengan 085 pada contoh script diatas. Metode post pada umumnya digunakan untuk mengirimkan data dari client ke server. Penanganan metode post ini bisa dilihat pada baris ke 089 sampai dengan 111 pada contoh script diatas.

Jika createRequest berfungsi sebagai media komunikasi client-server, maka fungsi handleRequest bertugas untuk menangani respon dari server. Jika diamati pada baris ke 134 terdapat deklarasi if (http_request.readyState == 4) dimana

property readystate = 4 ini menunjukkan status respon dari server telah selesai (complete). Readystate itu sendiri terbagi menjadi 4 buah yaitu :

 0 - The request is not initialized

 1 - The request has been set up

 2 - The request has been sent

 3 - The request is in process

 4 - The request is complete 

Setelah respon dari server selesai dilakukan tentunya langkah selanjutnya adalah menampilkan hasil respon tersebut ke browser kita. Untuk menampilkan hasil respon tersebut bisa anda lihat pada baris ke 149 pada contoh script diatas. Untuk mencobanya simpan terlebih dahulu script dengan nama ajax.js.

Sampai disini script AJAX telah selesai kita bahas. Untuk selanjutnya kita akan menyiapkan HTML serta script PHP. Dalam contoh kali ini akan membuat autocomplete combobox untuk menampilkan merk serta tipe-tipe handphone.

2.7.2 Script HTML

Dibawah ini adalah script HTML yang merupakan interface dari web kita.

01: <html> 02: <head>

03: <script type='text/javascript' src='ajax.js'></script> 04: <title>AJAX Kita</title>

05: </head> 06: <body>

07: Pilih Merk dan type Handphone anda 08: <form>

09: <select name="merkhp" onchange="javascript:

doRequest('get','rpc.php?kode='+this.value,'text','typehp')";> 10: <option value=''>- Pilih Merk HP -</option>

11: <option value='1'>Nokia</option> 12: <option value='2'>Siemens</option> 13: <option value='3'>Sony-Ericsson</option> 14: </select>

15: <br><br>

16: <div id="typehp"> 17: </div>

Pada baris ke 03 contoh diatas terdapat deklarasi include javascript ajax.js. Pemisahan javascript dan tag HTML sengaja dilakukan untuk mempermudah maintenance aplikasi.

Pada baris 09 terdapat pemanggilan event onchange pada combobox merk hp. Dimana dalam event tersebut terdapat pemanggilan fungsi doRequest yang telah dibuat pada class AJAX diatas. Pada fungsi doRequest tersebut terdapat deklarasi parameter ‘rpc.php?kode=’+this.value. parameter ini berfungsi sebagai link request browser ke web service.

Pada baris 16 terdapat element HTML <div id=”typehp”>. Element div ini berfungsi sebagai tempat untuk menampilkan hasil response yang berupa combobox type handphone. Sebenarya hampir semua element bisa digunakan untuk menampilkan hasil respon tidak hanya element div saja dengan catatan attribute id-nya diisi. Contoh : <p id=”typehp”></p>

Sampai disini sudah berhasil mendesain HTML-nya. Langkah terakhir tinggal membuat script PHP-nya.

2.7.3 Script PHP

01: <?php

02: $kode = $_GET['kode']; 03: switch ($kode) { 04: case "1":

05: echo "<select>

06: <option>6280</option> 07: <option>9300</option> 08: <option>N90</option> 09: </select>";

10: break; 11: case "2": 12: echo "<select>

13: <option>CFX65</option> 14: <option>CX65</option> 15: <option>EF81</option> 16: </select>";

Script PHP diatas masih sangat sederhana, masih bisa dikembangkanmisalnya dikoneksikan dengan database MySql dan lain sebagainya.

Sampai disini keseluruhan project telah telah selesai dikerjakan. Untuk mencobanya bisa mengaktifkan Apache, kemudian jalankan web tersebut pada browser. Jika tidak ada kesalahan pada script, maka pada browser akan muncul page autocomplete combobox tanpa load ulang isi page seperti gambar 2.5.

Gambar 2.5 Contoh tampilan project AJAX

2.8 MySql

MySQL adalah database yang menghubungkan script PHP, menggunakan perintah query dan escape character yang sama dengan PHP. MySQL mempunyai tampilan client yang mempermudah dalam meng-akses database dengan kata sandi untuk mengijinkan proses yang boleh dilakukan.

Kelebihan dari MySQL dapat melakukan transaksi dengan mudah dan efisien serta mampu menangani jutaan user dalam waktu yang bersamaan.

2.8.1 Tipe data MySql

a) Tipe Data Numeric

Pada tipe data numerik MySQL menggunakan standart ANSI SQL, maka jika bekerja dengan sistem database yang berbeda akan tetap dikenal. Pada Tabel 2.6 akan menampilkan beberapa tipe data numeric yang umum digunakan.

Tabel 2.6 Tipe Data Numerik

Tipe Data Nilai

TINYINT() -128 sampai 127 normal 0 sampai 255 UNSIGNED SMALLINT() -32768 sampai 32767 normal 0 sampai 65535 UNSIGNED

INT() -2147483648 sampai 2147483647 normal 0 sampai 4294967295 UNSIGNED BIGINT() -9223372036854775808 sampai 9223372036854775807 normal 0 sampai

18446744073709551615 UNSIGNED FLOAT(M,D) Bilangan real presisi – tunggal DOUBLE(M,D) Bilangan real presisi – ganda DECIMAL( , ) Nilai sampai +/-79,228 x 10/24

b) Tipe Data String

Walaupun tipe numeric dan date sangat penting, namun kebanyakan dari tipe data yang akan digunakan berada di format String. Pada Tabel 2.7 akan menampilkan beberapa tipe data string di dalam MySQL.

Tabel 2.7 Tipe Data String

Tipe Data Nilai Status

CHAR(M) M=0-255 karakter Binary

VARCHAR (M) M=0-255 karakter (membaca nilai karakter yang digunakan)

Binary

TINYBLOB 0-255 bytes Case sensitive

BLOB 0-65,535 bytes Case sensitive

TINYTEXT 0-255 bytes Not case sensitive TEXT 0-65,535 bytes Not case sensitive

c) Tipe Data Date and Time

MySQL memiliki beberapa tipe data yang tersedia untuk menampilkan tanggal dan waktu, diantaranya dapat dilihat pada Tabel 2.8.

Tabel 2.8 Tipe Data Date and Time

Tipe Data Nilai Format

DATE 1000-01-01 sampai 9999-12-31 YYYY-MM-DD TIME -838:59:59 sampai 838:59:59 Hh:mm:ss DATETIME 1000-01-01 00:00:00 sampai 9999-12-31

23:59:59

YYYY-MM-DD hh:mm:ss

TIMESTAMP 19700101000000 sampai 2037+ YYYYMMDDhhmmss

YEAR 1900 – 2155 YYYY

2.8.2 Structured Query Language ( SQL )

SQL adalah bahasa standard yang digunakan oleh hampir semua database seperti MySQL, Oracle atau Microsoft SQL Server. Database menggunakan perintah SQL untuk memodifikasi data di dalam tabel, karena SQL dirancang dengan mudah untuk menguraikan hubungan antara tabel dengan baris. Perintah SQL yang sering digunakan antara lain Insert, Select, Update dan Delete.

A. Perintah INSERT

Insert merupakan perintah untuk menambahkan data baru ke dalam tabel

Sintaks :

INSERT INTO nama_tabel (fields) VALUES(nilai_fields);

B. Perintah SELECT

Select merupakan perintah untuk menampilkan data dari tabel. Dalam menampilkan data, dapat pula menambahkan kondisi-kondisi tertentu sesuai dengan kebutuhan.

Sintaks :

SELECT ekspresi_dan_fields FROM nama_tabel [ WHERE kondisi ]

[ ORDER BY field [ ASC | DESC ] ] [ LIKE field [ kondisi ] ]

[ LIMIT offset, rows ] ;

C. Perintah UPDATE

Update adalah perintah SQL yang digunakan untuk memodifikasi satu atau lebih field di dalam satu tabel.

Sintaks :

UPDATE nama_tabel

SET field1=’nilai_baru1’,

Field2=’nilai_baru2’

[ WHERE kondisi ]

D. Perintah DELETE

Pada saat menggunakan perintah Delete, harus diperhatikan spesifikasi field yang akan dihapus, karena pada saat menjalankan perintah Delete tidak terdapat pesan konfirmasi sebelumnya yang akan mengakibatkan data terhapus semua.

Sintaks :

DELETE FROM nama_tabel

BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1 Analisis Permasalahan

Aplikasi yang akan dibuat pada Skripsi ini adalah sebuah sistem informasi rekapitulasi data dan aplikasi ini merupakan suatu aplikasi berbasis PHP (Hypertext Preprocessor) dan AJAX (Asynchronous JavaScript) dan

menggunakan MySql sebagai database, dimana sistem informasi ini dapat

memudahkan admin koperasi dalam melakukan pencatatan rekapitulasi data dari girimart. Tetapi sistem informasi ini meskipun berbasis PHP yang pada umumnya merupakan bahasa pemrogaman berbasis web, sitem informasi ini bersifat offline dan hanya digunakan oleh admin koperasi.

3.2 Perancangan Sistem

Perancangan sistem berisikan penjelasan tentang deskripsi umum sistem, proses-proses akan dijabarkan dalam data flow diagram, entitiy relationship diagram

3.2.1 Deskripsi Umum Sistem

Deskripsi dari arsitektur sistem pada Gambar 3.1 adalah sebagai berikut :

A. User atau pengguna menjalankan sistem informasi untuk melakukan

rekapitulasi data dalam komputer atau laptop.

B. Laptop atau komputer adalah media yang digunakan untuk meletakkan sistem informasi rekapitulasi data.

C. User dapat menambah data anggota, disini pengguna bisa menambahkan jumlah anggota dengan mengklik tanda tambah pada form tambah anggota.

D. Proses penambahan data terjadi.

E. User dapat menyimpan transaksi-transaksi, di sini pengguna bisa

menyimpan keseluruhan transaksi yang ada pada sistem, kemudian klik menu simpan.

F. Proses penyimpanan terjadi.

G. User dapat merekapitulasi data transaksi.

H. User mendapatkan laporan rekapitulasi data transaksi. I. User dapat melihat laporan diagram transaksi.

J. User mendapatkan data laporan diagram transaksi.

3.2.2 Kebutuhan Sistem

Dengan mengidentifikasi deskripsi pada Gambar 3.1 telah diketahui bahwa terdapat beberapa fokus utama pada sistem yaitu berupa proses penambahan anggota, proses penyimpanan transaksi serta rekapitulasi transaksi, ataupun proses laporan diagram transaksi, semua proses data tersebut merupakan kebutuhan pengguna.

3.2.2.1Kebutuhan Pengguna

Berdasarkan arsitektur pada Gambar 3.1 untuk memenuhi kebutuhan pengguna dalam berinteraksi dengan sistem serta untuk mengetahui kebutuhan-kebutuhan apa saja yang berpengaruh pada sistem nantinya, maka perlu dijabarkan kebutuhan apa saja yang akan dibutuhkan oleh pengguna, antara lain:

a. Komputer / Laptop tidak tergantung merk, apapun bisa dipakai.

b. Menu untuk home, sebagai halaman muka dari sistem rekapitulasi data. c. Menu master, terdiri dari menu daftar anggota, user acount, dan menu

perkiraan.

d. Menu transaksi, agar user atau pengguna bisa menyimpan data transaksi dan kredit anggota koperasi.

e. Menu rekapitulasi, supaya user atau pengguna bisa melihat laporan rekapitulasi data.

f. Menu grafik, dimana user bisa melihat hasil dari grafik yang

3.2.3 Kebutuhan Basis Data

Dalam Sistem Rekapitulasi Data Girimart Di Koperasi UPN Veteran Jatim dibutuhkan basis data untuk mengatur semua data setoran transaksi dari Girimart, selain itu juga untuk mengatur data anggota yang melakukan kredit di Girimart.

3.2.3.1 Diagram Jenjang

Hasil dari DFD yang yelah dibuat diatas dapat digambarkan dengan menggunakan diagram jajaran genjang, berikut adalah gambar diagram jenjang :

Gambar 3.2. : Diagram Jenjang

Dari diagran yang telah dibuat terdapat 2 level diantara level 0 terdapat 1 proses yang global yaitu Sistem Rekapitulasi Data dan level 1 terdapat 4 proses diantaranya adalah pendaftaran Anggota koperasi, penginputan seluruh transaksi, melihat rekapitulasi transaksi dan melihat laporan grafik transaksi. Fungsi dari diagram jenjang adalah dapat melihat

Level _Sistem

Informasi Rekapitulasi Data 0 1 Pendaftaran Anggota Menginput Keseluruhan Transaksi Melihat Laporan Grafik Transaksi Melihat Rekapitulasi Transaksi Koperasi

3.2.3.2 DFD (Data Flow Diagram)

Dari Gambar 3.2. maka dapat dideskripsikan beberapa proses yang terjadi pada sistem ini. Proses tersebut dapat digambarkan sebagai berikut adalah :

laporan Rekapitulasi

Data Transaksi 0

Sistem Informasi Rekapit lasi Data

+

Admin

Gambar 3.3. : Konteks Diagram

Konteks diagram pada system Rekapitulasi Data Girimart Di Koperasi UPN Veteran Jatim ini adalah gambaran garis besar dari proses yang terjadi dalam sistem tersebut. Cuma terdapat 1 entitas yaitu Admin, admin dari koperasi UPN Veteran Jatim, dimana admin adalah orang yang memiliki hak penuh untuk melakukan semua proses data yang terjadi, diantaranya adalah seperti proses mendaftarkan anggota, menginputkan transaksi, transaksi kredit anggota serta melakukan laporan rekapitulasi data.

Laporan Grafik Rekapitulasi

Data Load Rekapitulasi Transaksi Data Load Rekapitulasi Data Save Transaksi Data Save Transaksi Kredit Anggota

Data Load Anggota Koperasi

Data Transaksi Kredit Anggota

Data Save Account

Data Account

Data Save Anggota Koperasi

Data Anggota Koperasi

laporan Rekapitulasi Data Transaksi Admin 1 Menginput Transaks i 2

Menginput Kredit A nggota

3

Melihat Data Rekapi tulasi

4

Melihat Data Grafik Rekapitulasi 5 Menginput Anggota Koperasi Menginput Account Baru Anggota Koperasi User Transaksi

Gambar 3.4. DFD Level 1

Pada DFD level 1 ini memiliki 6 proses diantaranya adalah menginput accaout baru, menginput anggota koperasi, menginput transaksi, menginput kredit anggota, melihat data rekapitulasi, dan melihat

Accaount baru adalah proses untuk pendataan user atau admin yang berhak dalam melakukan semua proses yang ada di dalam Sistem Informasi Rekapitulasi Data.

Proses menginput anggota koperasi dapat dideskripsikan sebagai berikut, admin melakukan pengisian data anggota diisi sesuai dengan ketentuan yang telah ditentukan. Kemudian data yang telah diisi kemudian di simpan di dalam database sistem.

Proses penginputan kredit anggota ini juga di lakukan oleh admin. Proses ini masuk kedalam proses data transaksi, kemudian proses data transaksi kredit anggata akan masuk ke database anggota dan transaksi, sehingga bisa mengetahui anggota yang melakukan kredit.

Proses penginputan transaksi dapat dideskripsikan sebagai berikut pada penginputan transaksi, admin memasukan semua transaksi yang terjadi pada setiap harinya, kemudian menyimpanya ke dalam database transaksi, sehingga bisa diketahui dilaporan transaksi.

Proses melihat data rekapitulasi dapat dijelaskan sebagai berikut, admin atau user ingi melihat laporan-laporan yang terjadi pada setiap transaksi dengan mengambil dari database transaksi.

Proses melihat data rekapitulasi grafik dapat dideskriptifkan sebagai berikut, admin mengambil data dari keseluruhan transaksi, kemudian sistem secara otomatis akan menampilkan gambar grafik yang sesuai dari database transaksi.

3.2.3.3 CDM (Concept Diagram Modeling)

Dari analisa keterangan di atas nantinya dibutuhkan 5 buah tabel untuk kebutuhan penyimpanan data dalam sistem tersebut diantaranya adalah Tabel User, Transaksi, Pinjaman, Anggota, dan Perkiraan. Penjelasan dari tabel tersebut adalah sebagai berikut :

a. Tabel User : Tabel ini berisikan data user untuk atau admin yang berhak

untuk mengakses sistem, dengan id_user sebagai primary key. Tabel user berelasikan dengan Tabel Transaksi, sehingga primary key dari Tabel Transaksi yaitu id_transaksi, sehingga id_user akan menjadi foreign_key pada Tabel transaksi. Tabel ini mempunyai 4 atribut diantaranya id_user, nama user, user name dan password.

b. Tabel Transaksi : Tabel ini berisikan untuk transaksi data dari girimart.

Tabel ini berelasikan dengan Tabel User, Perkiraan dan pinjaman. Untuk ke tabel User, karena setiap transaksi pasti di isikan oleh user, jadi id_user akan menjadi foreign_key di tabel transaksi. Untuk relasi ke tabel perkiraan, setiap transaksi memiliki perkiraan, jadi id_perkiraan akan menjadi foreign key. Untuk tabel pinjaman, setiap transaksi pasti ada pinjaman dari kredit, jadi id_pinjaman akan menjadi foreign_key di tabel transaksi. Tabel ini mempunyai 4 atribut diantaranya id_transaksi keteranganTransaksi, tglTransaksi, dan biaya

c. Tabel Perkiraan : Tabel ini berisikan perkiraan yang akan di pakai dari

semua transaksi, jadi berealisasikan dengan tabel transaksi, id_perkiraan akan menjadi foreign_key di tabel transaksi. Tabel ini mempunyai 3

d. Tabel Pinjaman : Tabel ini berisikan pinjaman dari semua transaksi kredit

anggota, tabel ini berelasi dengan tabel transaksi dan tabel anggota. Tabel ini memiliki 1 atribut yaitu idPinjaman.

e. Tabel Anggota : Tabel ini berisikan data-data dari anggota, tabel ini

berelasi dengan tabel pinjaman sehingga Nip anggota sebagai Primary Key akan menjadi foreign_key di tabel pinjaman. Tabel ini memiliki 4 atribut, diantaranya NIP, noAnggota, namaAnggota, noKtp, tabel ini berealisasikan dengan tabel pinjaman.

Gambar 3.6 PDM Database

Penjelasan atribut di tiap tabel : User :

1. Id_user : id_user adalah seorang admin dari koperasi yang berhak penuh dalam melakukan semua transaksi-transksi data yang ada dalam sistem

2. namaUser : beriskan nama dari Id_user

3. Password : merupakan security key dari id_user Transaksi :

2. idPerkiraan : data akan berisikan perkiraan pada sebuah transaksi, idPerkiraan ini berstatus sebagai foreign key di tabel transaksi 3. IdUser : berisikan user atau admin yang melakukan inputan pada

tabel transaksi, idUser juga berstatus foreign key di tabel transaksi

4. keteranganTransaksi : berisikan tentang keterangan sebuah

transaksi

5. tglTransaksi : berisikan tanggal yang terjadi pada sebuah transaksi, dan bisa terisi secara otomatis

6. biaya : berisikan jumlah biaya sebuah transaksi

perikiraan :

1. IdPerkiraan : berisikan id pada sebuah perkiraan 2. namaPerkiraan : berisikan nama sebuah perkiraan

3. status : berisikan sebuah status perkiraan yang merupakan sebuah pemasukan atau pengeluaran

Pinjaman :

1. idPinjaman : berisikan id pada waktu melakukan pinjaman

2. idTransaksi : berisikan sebuah transaksi pinjaman, idTransaksi bersifat foreign key pada tabel pinjaman

3. Nip : berisikan Nip dari anggota yang melakukan kredit, Nip

bersifat foreign key pada tabel pinjaman

4. tglPinjaman : berisikan tanggal pada saat melakukan pinjaman Anggota :

1. Nip : berikan nomer id dari masing-masing anggota 2. noAnggota : berisikan no urut anggota

3. namaAnggota : berisikan nama dari seorang anggota 4. noktp: berisikan no KTP (kartu tanda penduduk)

3.3 Desain Interface

Interface pada Sistem Informasi Rekapitulasi Data Girimart Di Koperasi UPN Veteran Jatim adalah sebagai berikut :

a. Interface Login

Gambar 3.7 Interface Login Login

Username :

Pada interface login semua harus diisi. Username dan password. Karena kalau tidak diisi maka tidak bisa mengakses halaman aplikasi

b. Interface Tambah Anggota Password :

Login

Tambah Anggota No Anggota : Nama Anggota :

No KTP :

Pada Interface tambah anggota terdapat beberapa inputan yang harus diisi. No anggota harus diisi sesuai dengan no anggota koperasi, nama untuk diisi dengan nama anggota, no KTP diisi sesuasi dengan no kartu tanda penduduk.

c. Interface Tambah Account

Tambah Account Nama Anggota : Username :

Password :

Simpan

Gambar 3.9 Interface Tambah Account

Pada Interface tambah accaount terdapat beberapa inputan yang harus diisi. Nama anggota, username dan password, semua kolom itu harus diisi, karena user account akan menjadi admin pada aplikasi ini.

d. Interface Tambah Perkiraan

Gambar 3.10 Interface Tambah Perkiraan Tambah Perkiraan

Nama Perkiraan : Status :

Simpan

Pada Interface tambah perkiraan terdapat beberapa inputan yang harus diisi. Nama perkiraan, dan status, status adalah status dari perkiraan berupa, pemasukan atau pengeluaran

e. Interface Input Transaksi

Input Transaksi Nama Perkiraan : Username :

Biaya :

Simpan

Gambar 3.11 Interface Input Transaksi

Pada Interface input transaksi terdapat beberapa inputan yang harus diisi. Nama perkiraan, biaya, untuk keterangan tidak wajib untuk diisi.

f. Interface Kredit Anggota

Input Kredit Anggota Nama Anggota : Pinjaman :

Simpan

Gambar 3.12 Interface Kredit Anggota

Pada Interface input transaksi semua inputan kolom yang ada di interface anggota harus diisi. Nama anggota, dan pinjaman.

3.4 Flowcart

input perkiraan dan merekapnya didaftar rekapitulasi. Berikut adalah system flowcart dari Sistem Informasi Rekapitulasi Data Girimart Di Koperasi UPN Veteran Jatim sebagai berikut :

5.7 Uji Coba Input Kredit Anggota

Pada uji coba ini akan di uji cobakan untuk input kredit koperasi dari girimart, Gambar 5.11 adalah tampilan gambar dari menu input kredit anggota, didalamnya terdapat menu nama anggota, dan pinjaman

Gambar 5.11 Halaman Kredit Anggota

Setelah melakukan input penambahan kredit anggota, akan terlihat pada Gambar 5.12 dibawah, tampilan input kredit anggota berhasil.

83

Setelah melakukan penambahan, secara otomatis anggota yang melakukan kredit langsung tersimpan pada halaman kredit anggota, seperti terlihat pada Gambar 5.13 dibawah ini

Gambar 5.13 Halaman Daftar Kredit Anggota

5.8 Uji Hasil Input Transaksi

Pada uji coba ini akan di uji cobakan untuk melihat input keseluruhan dari semua transaksi yang terjadi, Gambar 5.14 adalah tampilan gambar dari keseluruhan transaksi yang ada di menu rekapitulasi

5.9 Uji Coba Grafik

Pada uji coba ini akan di uji cobakan untuk melihat tampilan grafik dari semua transaksi yang terkumpul.

a. Pada Gambar 5.15 adalah tampilan dari gambar Grafik mingguan, perhitunganya diambil dari total akhir saldo setiap minggu

Gambar 5.15 Grafik Mingguan

b. Pada Gambar 5.16 adalah tampilan dari gambar Grafik bulanan, perhitunganya diambil dari total akhir saldo setiap bulan.

85

c. Pada Gambar 5.17 adalah tampilan dari gambar Grafik tahunan, perhitunganya diambil dari total akhir saldo setiap tahun.

6.1. Kesimpulan

Setelah melakukan uji coba maka dapat diambil kesimpulan yaitu :

a. Membuat sistem yang terkomputerisasi dengan menggunakan beberapa komponen. Diantaranya, komponen input, komponen model, komponen output, komponen teknologi, komponen hardware, komponen software, dan komponen basis data.

b. Sistem ini membantu dalam melakukan analisa laporan data, dimana data didapat dari transaksi-transaksi yang dilakukan rekapitulasi.

c. Sistem ini membantu melakukan analisa keuangan laporan kredit anggota, dengan cara melihat laporan dari kredit anggota.

6.2 Saran

Berdasarkan pengalaman dalam proses pembuatan aplikasi ini, terdapat beberapa saran yang diusulkan oleh penyusun terkait untuk pengembangan aplikasi lebih lanjut. Saran-saran tersebut antara lain:

a. Aplikasi ini bisa di kembangkan untuk melakukan rekapitulasi data dari badan usaha milik koperasi lainya, tidak hanya digunakan untuk rekapitulasi data dari Girimart saja.

b. Aplikasi bisa ditambahkan dengan pelayanan sms Gateway untuk tiap anggota yang ingin mengetahui informasi kredit anggota.

DAFTAR PUSTAKA

Eko Heri Susanto. 2008. Membangun Aplikasi Web Dengan Ajax. Dari http://www.jawadwipa.com , diakses online 08-10-2010 Hakim, Lukman. 2008. Membongkar Trik Rahasia Para Master PHP.

Lokomedia. Yogyakarta.

Kurniawan, Rulianto. 2007. 54 Trik Tersembunyi PHP. Maxicom. Palembang. Prasetyo, Didik Dwi. 2006. 101 Tip & Trik Pemrograman PHP. Elex Media

Komputindo. Jakarta.

Rafiza. 2006. Panduan dan Referensi Kamus Fungsi PHP 5. PT Elex Media Komputindo. Jakarta.