Bagan Alir Flowchart Pengelolaan Database

perangkat lunak yang biasa disebut coding dan melakukan pengujian perangkat lunak kepada user yaitu pihak dari STMIK. 2.4.2.8. Installation and Delivery Instalasi dan Pengiriman Tahap installation and delivery berfungsi untuk memasukan sistem ke dalam operasi. Pembangun sistem menginstal sistem dari lingkungan pengembangannya ke dalam lingkungan produksi. Para analis sistem harus melatih para pengguna sistem, menuliskan berbagai macam manual pnegguna dan kontrol produksi, mengkonversi database yang ada menjadi database baru, dan melakukan pengujian sistem final. Prasyarat fase Installation and delivery adalah fase konstruksi dan pengujian. Installation and delivery juga melibatkan individu pelatihan yang akan menggunakan sistem dan mengembangkan dokumentasi untuk membantu para pengguna sistem. Tahap implementasi biasanya mencakup beberapa bentuk kajian untuk menilai keberhasilan proyek sistem selesai. Kegiatan ini mempromosikan perbaikan proses dan manajemen proyek masa depan.

2.5. Bagan Alir Flowchart

Bagan alir flowchart adalah bagian yang menunjukkan alir didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Bagan alir sistem System Flowchart merupakan bagan yang menunjukkan arus pekerjaan secara keseluruhan dari sistem. Bagan ini menjelaskan urutan-urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir sistem menunjukkan apa yang dikerjakan oleh sistem.

2.6. Tool Perancangan Sistem

Gambar 2.2 Struktur Model Analisis Pressman, 2002:354

2.6.1. Data Flow Diagram DFD

Data Flow Diagram DFD adalah suatu grafis diagram yang menggunakan beberapa symbol sederhana sampai pada menggambarkan alir data diantara entitas eksternal, pengolahan aktifitas, dan mengatur penggunaan dari alat-alat masukan atau pengeluaran O’Brien, 2005:G-5. DFD melayani dua tujuan : 1 untuk memberikan indikasi mengenai bagaimana data ditransformasi pada saat bergerak melalui sistem, dan 2 untuk Entity Relationship Diagram Data Flow Diagram State Transition Diagram Data Dictionary menggambarkan fungsi-fungsi yang mentransformasi aliran data Pressman, 2002. 2.6.1.1. Diagram Konteks Diagram konteks adalah diagram yang terdiri dari suatu proses dan menggambarkan ruang lingkup suatu sistem. Diagram konteks menggambarkan seluruh input ke sistem atau output ke sistem Ladjamudin, 2005:64.

2.6.2. Entity Relationship Diagram ERD

ERD menurut Jeffrey L. Whitten 2004:45. Diagram hubungan data digunakan untuk menggambarkan hubungan antara data store yang ada di dalam diagram aliran data. Entity Relationship Diagram ERD adalah suatu data perencanaan dan merupakan alat pengembangan sistem yang model hubungannya berada diantara satu kesatuan dalam satu proses bisnis O’Brien, 2005:G-7.

2.6.3. State Transition Diagram STD

State Transition Diagram STD mempresentasikan tingkah laku dari suatu sistem dengan menggambarkan keadaannya dan kejadian yang menyebabkan sistem mengubah keadaan. STD juga menunjukkan bahwa aksi diambil sebagai akibat dari suatu kejadian khusus Pressman, 2002:373.

2.7. Desain Perancangan Sistem

2.7.1. Desain Data

Desain data mentransformasi model domain informasi yang dibuat selama analisis ke dalam struktur data yang akan diperlukan untuk mengimplementasi perangkat lunak. Objek dan hubungan data yang ditetapkan dalam diagram hubungan entitas ERD dan isi data detail yang digambarkan didalam kamus data, menjadi basis bagi aktivitas desain dataPressman, 2002:400.

2.7.2. Desain Arsitektur

Desain arsitektur menentukan hubungan diantara elemen-elemen struktural utama dari program. Representasi desain tersebut kerangka kerja modular dari sebuah program komputer dapat diperoleh dari model-model analisis dan interaksi subsistem yang ditentukan dalam model analisis Pressman, 2002:400.

2.7.3. Desain Prosedural

Desain Prosedural mentransformasi elemen-elemen structural dari arsitektur program ke dalam suatu deskripsi dari komponen-komponen perangkat lunak. Informasi yang diperoleh dari STD berfungsi sebagai dasar bagi desain procedural Pressman, 2002:400.

2.7.4. Desain Interface

Desain interface menjelaskan internal dan eksternal antarmuka program serta desain antarmuka manusia. Internal dan eksternal desain antarmuka yang berdasarkan informasi yang diperoleh dari analisis model http:en.wikipedia.orgwikiDesign_document .

2.8. Perangkat Lunak Pengembangan Sistem

2.8.1. Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Javascript bergantung kepada browsernavigator yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut. Lain halnya dengan bahasa “Java” dengan mana JavaScript selalu di banding bandingkan yang memerlukan kompilator khusus untuk menterjemahkannya di sisi userklien.

2.8.2. JQUERY

JQuery adalah suatu library framework javascript yang menekankan bagaimana interaksi antara javascript dengan HTML. JQuery mempermudah dan mempercepat developer web dalam membuat kode Javascript. Secara standar, apabila seseorang membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami. Disinilah peranan JQuery sebagai Javascript Library, dimana pengembang web dapat langsung memanggil fungsi yang terdapat di dalam Library tersebut. Hakim, 2010:3. JQuery mempersingkat Ajax Asynchronous Javascript and XML. Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun JQuery dapat mempersingkatnya menggunakan Ajax call, perbandingannya 25 baris kode Ajax dapat disingkat menjadi 5 baris kode saja dengan JQuery. Alasan Penulis menggunakan Framework JQuery adalah karena JQuery telah banyak digunakan oleh website-website terkemuka di dunia, selain itu JQuery kompatibel dengan semua browser, File JQuery hanya satu dan ukurannya kecil sehingga cepat aksesnya, Fitur JQuery paling lengkap dibandingkan dengan Framework Javascript yang lain, JQuery dapat bekerja di berbagai web browser, seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera dan browser lainnya, JQuery Open source, sehingga dapat dimodifikasi sesuai kebutuhan. Hakim, 2010:4. Untuk memberikan gambaran agar tidak terjadi kesalah pahaman persepsi, berikut ini adalah teori perbandingan framework javascript lain yang sering digunakan oleh pengembang web. Namun penulis hanya membandingkan beberapa framework saja karena secara keseluruhan kurang lebih sama dengan yang penulis bahas, antara lain yaitu :

1. Yahoo User Interface Library YUI

YUI adalah salah satu framework JavaScript terbesar dalam daftar ini. YUI memiliki semua hal untuk membantu Anda membangun aplikasi web interaktif menggunakan teknik seperti DOM scripting, DHTML dan AJAX oleh satu set utilitas kuat dan kontrol. YUI memiliki fitur canggih yang cukup banyak, plugin, ekstensi yang membawa Anda pada waktu yang sangat lama untuk belajar. http:developer.yahoo.comyui

2. Dojo Toolkit

Dojo toolkit adalah javascript framework yang menyediakan library yang cukup banyak. Dibagi menjadi 3 bagian penting, yaitu Dojo core, base, Dijit, DojoX. Dojo base adalah bagian library yang mengatur tentang hal dasar pada dojo, dan harus dipanggil setiap kali kita akan menggunakan Dojo toolkit, bisa dikatakan ini adalah library wajib. Fungsi yang terdapat di base ini adalah fungsi ajax, fungsi penting dojo, dan DOM. Dojo core menyediakan fungsi untuk parsing widget, efek animasi tingkat lanjut, drag and drop, history handling, dll. Core ini menggunakan dojo base, namun dalam penggunaannya, hanya terdapat sedikit perbedaan saja. Dijit, sebuah kata singkat dari Dojo Widget, memokuskan pengembangannya untuk tampilan, menyimpan library untuk container set layout, form, dialog, text editor, kalender, color palette, dll. DojoX, disebut juga Dojo eXtension atau eXperimental, disimpan library fungsi yang belum pantas disimpan di paket utama basecore atau Dijit, namun tidak jarang juga library DojoX merupakan kombinasi penggunaan kedua library tersebut. http:dojotoolkit.org

3. DHTMLX

DHTMLX adalah GUI widget library JavaScript untuk membangun aplikasi web dinamis dengan pengalaman pengguna desktop dan Ajax loading data. Library DHTMLX dirilis di bawah kedua open-source GNU General Public License dan lisensi komersial. arsitektur library memungkinkan menggunakan komponen sebagai blok terpisah atau menggabungkan mereka ke dalam sebuah antarmuka berbasis Ajax umum. Struktur Modul: filosofi yang terletak di bawah library DHTMLX menyiratkan bahwa setiap komponen merupakan entitas yang terpisah dan mandiri yang dapat digunakan secara individual untuk memastikan beberapa bagian tertentu dari aplikasi, misalnya navigasi menu, treeview, datagrid, atau pemilih tanggal. Meskipun, komponen API memungkinkan mengorganisir mereka dalam tata letak antarmuka yang umum. Desktop-like functionality: drag-and-drop, in-line editing, operasi clipboard, validasi data, interaktivitas melalui Ajax. Mulai dari versi 2.5 komponen UI dapat memiliki tampilan dan perilaku yang mirip dengan unsur-unsur Window standar UI. Client-to server communication: library DHTMLX sepenuhnya bekerja pada sisi client dan dapat digunakan dengan bahasa back-end atau database. Selain itu, siap untuk menggunakan lapisan komunikasi dhtmlxConnector dapat digunakan untuk mengelola komunikasi client-server dengan PHP,. Net atau Java. Theming: mewarnai komponen antarmuka dapat dikustomisasi melalui SkinBuilder online, yang menghasilkan file CSS yang diperlukan dan gambar untuk menyediakan tema warna yang dipilih oleh pengembang. Mulai dari versi 2.6 - ada kulit beberapa preset yang tersedia. Touch UI support: DHTMLX merilis sebuah kerangka HTML5 JavaScript dioptimalkan untuk perangkat touchscreen dan mobile saat ini tersedia di alfa, rilis final direncanakan pada bulan Pebruari 2011. Cross-browser: library bekerja di semua browser modern: Safari, Internet Explorer, Mozilla Firefox, Opera, dan Chrome. http:dhtmlx.comdocsservices.shtml

4. Ample SDK

Ample SDK adalah sebuah standar javascript UI Framework berbbasis cross-browser untuk membangun Rich Internet Application RIA. Ample SDK menggunakan teknologi XML Seperti XUL, SVG atau HTML5 untuk layout User Interface, CSS untuk Style UI, dan Javascript dengan standar DOM API JQuery untuk logika aplikasi. Ample SDK menyetarakan browser dan membawa dukungan teknologi jika ada kehilangan. Ample SDK sepenuhunya ditulis dalam javascript dan karenanya tidak memerlukan komponen khusus yang dipasang di browser untuk beroperasi dengan baik. Ample SDK tidak memodifikasi infrastruktur browser melainkan mengisi fungsi yang hilang. Ample SDK terdiri dari sebuah Ample Runtime, implementasi User INterface Markup language, dan satu set plugin. Ample SDK free open source, didistribusikan menggunakan pendekatan dua lisensi dibawah lisensi MIT dan GPL. Ample SDK Runtime berfungsi penuh di semua browser web yang modern. User Interface bahasa masih sedang dilaksanakan diuji dan beberapa kebiasaan dapat diamati. http:www.amplesdk.comabout Dibawah ini adalah screenshot perbandingan framework javascript yang ada : Gambar 2.3. Perbandingan Framework Javascript sumber: http:en.wikipedia.orgwikiComparison_of_JavaScript_frameworks Adapun dari segi ketersediaankelengkapan fitur, berikut adalah gambaran perbandingan framework JQuery dengan framework lainnya : Gambar. 2.4. Perbandingan Framework Javascript Dari Segi Fitur sumber: http:en.wikipedia.orgwikiComparison_of_JavaScript_frameworks Perbandingan dari segi dukungan web browser : Gambar 2.5. Perbandingan Framework Javascript Dari Segi Dukungan web browser sumber: http:en.wikipedia.orgwikiComparison_of_JavaScript_frameworks

2.8.3. PHP

PHP merupakan kependekan dari kata Page Hypertext Preprocessor. PHP tergolong sebagai perangkat lunak open source yang diatur dalam aturan General Purpose Licences GPL. Dikatakan preprocessing karena pada proses skrip PHP diminta oleh pengguna maka PHP hanya mengeksekusi kode yang diminta dan mengirim hasil ke web server untuk dilanjutkan ke klien. PHP dapat berjalan di Apache maupun IIS Internet Information Services. Pemograman PHP sangat cocok di kembangkan dalam lingkungan web, karena php bisa dilekatkan pada script HTML atau sebaliknya. PHP dikhususkan untuk pengembangan web dinamis. Menurut Madcoms 2004:2 PHP memiliki keunggulan diantaranya yaitu: a. Memiliki tingkat akses yang lebih cepat. b. Memiliki tingkat lifecycle yang cepat sehingga selalu mengikuti perkembangan teknologi internet. c. PHP dapat mengakses ke beberapa database yang sudah ada, baik yang bersifat gratis maupun berbayar. Database tersebut antara lain MySql, PosgreSql, dan lain-lain. d. Mampu berjalan di platform sistem operasi Windows, Linux, Solaris, dan lain-lain.

2.8.4. MYSQL

Salah satu aplikasi basis data adalah MySql yang merupakan sebuah program pembua basis data yang bersifat open source, artinya siapa saja boleh menggunakan tanpa dicekal Bunafit Nugroho, 2004:29. Sedangkan menurut Wahana Komputer 2006:181 MySql merupakan sistem manajemen basis data yang fungsinya untuk menambah, mengakses, dan memproses data yang disimpan dalam sebuah basis data komputer. Kelebihan MySql menurut Wahana Komputer2006:182 antara lain: a. Mampu berjalan di berbagai platform misalnya Windows, Mac OS, Solaris, dan lain-lain. b. Menyediakan mesin penyimpanan engine storage transaksi dan non transaksi. c. Server tersedia sebagai program yang terpisah untuk digunakan pada lingkungan jaringan klienserver. d. Mempunyai library yang dapat ditempelkan pada aplikasi berdiri sendiri standalone application sehingga aplikasi tersebut dapat digunakan pada komputer yang tidak mempunyai jaringan. e. Mempunyai sistem password yang aman dan fleksibel.

2.8.5. Apache Web Server

Web Server adalah sebuah bentuk server yang khusus digunakan untuk menyimpan halaman website atau homepage Bunafit Nugroho, 2004:6. Web server menunggu permintaan dari client yang menggunakan browser, seperti Mozilla, Internet Explorer, Opera, Google Chrome, Netscape dan lain-lain. Web server dalam berkomunikasi dengan kliennya menggunakan protocol HTTP Hyper Text Transfer Protokol. Apache berada dibawah GNU, General Public License yang bersifat free sehingga sehingga apache dapat di download gratis pada alamat http:apache.org saat ini Apache banyak digunakan sebagai web server untuk portal-portal besar. Adapun pertimbangan dalam memilih Apache adalah : a. Apache termasuk dalam kategori free software. b. Instalasi Apache sangat mudah c. Mampu beroperasi pada banyak platform sistem operasi seperti AUX, Free BSD, HP-UX, IRIX, Linux, Solaris, Windows dan lain-lain. d. Apache mudah dalam penambahan pheriferal lainnya hanya ke dalam platform web server, misalnya menambahkan modul.

2.8.6. Cascading Style Sheet CSS

Cascading Style Sheets CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium W3C. CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen yang ditulis dengan HTML atau bahasa markup lainnya dengan presentasi dokumen yang ditulis dengan CSS. Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara sewaktu dibacakan oleh browser basis-suara atau pembaca layar, dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

2.8.7. Adobe Photoshop CS4

Adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan fotogambar dan pembuatan efek. Aplikasi Adobe Photoshop CS 4.0 selain tangguh dalam mengedit, memodifikasi bitmap atau foto, juga banyak lagi menyediakan fasilitas-fasilitas lain yang menarik. Untuk memenuhi setiap kebutuhan yang menarik, seperti pengaturan warna yang semakin akurat, penggunaan fasilitas efek dan filter yang semakin canggih, dan fasilitas pemodifikasian tipografi teks yang unik dan fantastik. Khaerudin, 2005:13. Gambar 2.6. Lingkungan Kerja Adobe Photoshop CS 4.0

2.9. Pengelolaan Database

Database adalah kumpulan data yang terdiri atas satu atau lebih tabel yang terintegrasi satu sama lain, dimana setiap pemakai user diberi wewenang otoritas untuk dapat mengakses mengubah, menghapus, menganalisis, menambah, dan memperbaiki data dalam tabel tersebut O’Brien, 2005:G-5. Ada dua cara data dikelola yaitu flat file file datar dan relational berhubungan. Pada flat file data diimasukkan dalam tabel tunggal yang berisi kolom dan baris. Biasanya data secara flat file dapat menimbulkan masalah. Pengelolaan database dimana beberapa tabel dimasukkan dalam satu file dan tabel satu dengan yang lainnya saling berhubungan melalui field yang sama kunci disebut pengelolaan database secara relational. Hubungan antara tabel satu dengan tabel lainnya melalui field yang sama disebut relasi. Relasi dibuat menggunakan kunci. Ada dua macam kunci : pertama primary key kunci utama yaitu suatu kolom atau sekumpulan kolom yang akan digunakan untuk mengidentifikasi secara tunggal setiap baris dari suatu tabel Kasiman, 2006:383. Kedua foreign key kunci tamu yaitu field yang berisi nilai identifikasi dengan record yang berkaitan dalam tabel lainnya. Ada tiga bentuk relasi antarkabel Kasiman, 2006:383: a. Relasi one-to-one satu ke satu, menghubungkan secara tepat dua entitas dengan satu kunci key. Misalnya dalam suatu perusahaan satu orang memiliki satu computer kerja. b. Relasi one-to-many satu ke banyak, hubungan antar entitas dimana kunci key pada suatu tabel muncul berkali-kali dalam tabel lainnya. Misalnya banyak pegawai bekerja untuk satu departemen. c. Relasi many-to-many banyak ke banyak, merupakan hubungan yang sering menyebabkan permasalahan dalam prakteknya. Dalam hubungan many-to- many, kunci utama primary key dari tabel kedua dapat muncul beberapa kali tabel pertama.

2.10. Studi Sejenis

Berdasarkan pengamatan penulis pada penelitian sebelumnya terdapat beberapa penelitian yang hampir serupa dengan judul pengembangan web portal menggunakan JQuery. Sebagai perbandingan dengan penelitian sebelumnya, diantaranya dikemukakan oleh Duwiyatno2010, didalam penelitiannya menjelaskan tentang pembuatan web portal Kabupaten Bangka Barat yang merupakan salah satu kabupaten di Provinsi Bangka Belitung. Latar belakang penelitiannya karena pengenalan potensi daerah Kabupaten Bangka Barat belum menggunakan media portal informasi. Oleh karena itu, dibutuhkan portal informasi yang dapat digunakan sebagai alternatif media periklanan dalam memperkenalkan berbagai potensi tersebut. Metode pengembangan yang digunakan menggunakan waterfall, perangkat pemrograman open source yang berbasis web PHP versi 5.25, basis data MySQL versi 5.0.51, dan pengujian perangkat lunak dilakukan dengan metode BlackBox. Portal informasi yang dihasilkan dapat digunakan untuk mengakses informasi pemerintahan, informasi potensi daerah, peluang investasi, fasilitas pesan singkat, link, polling, dan kontak admin. Pada penelitian Rifandi 2010, menjelaskan tentang pembuatan website portal komunitas mengenai teknologi informasi dengan menggunakan PHP, JQuery dan MYSQL dimana website ini dapat digunakan sebagai media informasi bagi user untuk mencari informasi mengenai teknologi informasi seperti tentang antivirus, jaringan, database, windows, dan lain-lain. Dalam penulisan ini, menggunakan PHP sebagai bahasa pemrograman, JQuery sebagai framework untuk tampilan, MySQL sebagai database-nya dan APACHE sebagai server lokalnya. Website ini dibuat dengan tujuan untuk menambah informasi untuk user yang membutuhkan artikel tentang perkembangan teknologi informasi. Serta membuat website yang interaktif, artinya pengunjung dapat secara langsung interaktif dengan pengunjung lain atau dengan admin melalui fitur chat, hubungi kami, polling dan komentar atau menggunakannya sebagai sumber artikel dengan RSS Really Simple Syndication atau news Feed yang merupakan sebuah file dokumen dengan format XML, dimana informasi tersebut dapat diambil dan ditampilkan pada website lain. Pada Penelitian Haerul Zaman 2008, menjelaskan tentang pembuatan aplikasi web portal Hukum Perhimpunan Advokat berbasis web PHP dan MQSQL. Penelitian ini bertujuan untuk memberikan kecepatan akses informasi, terutama informasi yang berkaitan dengan perkembangan dunia hukum, baik di kalangan anggota maupun publik. Serta menyediakan wadah untuk menampung pesan, keluhan atau komentar dari anggota maupun publik mengenai kinerja organisasi HAPI. Pada penelitian ini menggunakan software aplikasi pembuatan web yaitu HTML editor Dreamweaver MX, PHP Triad dan database MySQL, serta ditambah penggunaan aplikasi grafis Adobe Photoshop dan aplikasi teks animasi Swish. Pada Penelitian Ilham Wahyu Danil 2009, menjelaskan tentang pembuatan portal berbasis web menggunakan PHP dan MYSQL Pada SMA Negeri 18 Medan. Portal ini dimaksudkan agar sekolah dapat menyediakan informasi yang lebih cepat dan akurat pada siswa maupun masyarakat yang juga dapat membantu dalam mempromosikan sekolah ini. Portal ini dirancang dengan menggunakan bahasa program web, yaitu PHP 5.0 dan MySQL 5.0 sebagai server database serta Apache 2.0 sebagai web server. Portal ini dirancang sedemikian rupa agar dapat menarik minat siswa dalam memperoleh niformasi yang lebih cepat dan akurat serta menarik. Portal ini bersifat dinamis, yaitu berarti bahwa informai yang diberikan tersebut dapat berubah sewaktu- waktu berdasarkan keadaan yang sedang terjadi. Portal ini meliputi banyak informasi