SISTEM INFORMASI PENGOLAHAN DATA TABUNGAN SISWA MI BAHRUL ULUM BERBASIS WEB MOBILE MENGGUNAKAN CODEIGNITER DAN BOOTSTRAP Azza Abidatin Bettaliyah 1) 1) Dosen Prodi Teknik Informatika Fakultas Teknik Universitas Islam Lamongan Email : bettaliy.azza@yahoo.com ABSTRAK Sistem informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan. Web Mobile atau Responsive Web Design sendiri adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Codeigniter adalah sebuah framework PHP yang dapat membantu mempercepat developer dalam pengembangan aplikasi web berbasis PHP dibandingkan jika menulis semua kode program dari awal. Codeigniter menyediakan banyak library untuk mengerjakan tugas-tugas yang umumnya ada pada sebuah aplikasi berbasis web. Kata kunci : Sistem Informasi, Web mobile, Codeigniter ABSTRACT The information system is a system within an organization reconcile the needs of daily transaction processing, support the operation, managerial and strategic activities of an organization and provide certain outside parties with the necessary reports. Mobile Web or Responsive Web Design itself is a technique used to create a website layout to adjust to the display device of visitors, both size and orientation. So the display located on the desktop computer with a display that is accessed through the SmartPhone for example, it would be different zoom. CodeIgniter is a PHP framework that can help accelerate developer in PHP based web application development than if you write all the code from scratch. CodeIgniter provides a lot of libraries to do the tasks that generally exist in a web-based application. Keywords: Information Systems, Mobile Web, Codeigniter I. PENDAHULUAN Perkembangan teknologi di masa kini sangat pesat, khusunya di bidang teknologi informasi. Dengan perkembangan teknologi yang semakin maju dan berkembang pesat, manusia dapat membuat berbagai macam peralatan dan alat bantu dalam menjalankan berbagai aktifitas untuk mendukung produktifitas. Dengan merambahnya teknologi ke berbagai sendi kehidupan, salah satunya adalah bidang pendidikan. SDN sekarbagus II merupakan sekolah dasar negeri yang di naungi oleh dinas pendidikan kabupaten lamongan. Selain kegiatan belajar mengajar di SDN sekarbagus II juga mengadakan program program sekolah yang lainnya, salah satunya adalah tabungan siswa. Tabungan siswa dinilai banyak bermanfaat karena mengajarkan anak untuk hemat, belajar menyisihkan uang jajan yang diberikan orangtua, dan bagi siswa yang kurang mampu tabungan siswa ini bisa membantu biaya sekolahnya. Sistem yang berjalan pada saat ini masih menggunakan cara manual yaitu dengan pembukuan. Masalah yang muncul dengan sitem manual ini adalah sering hilangnya buku tabungan, membutuhkan waktu untuk pencarian data siswa ketika memasukkan data transaksi penyetoran, dengan jumlah frekwensi transaksi yang banyak maka akan membutuhkan waktu yang relatif lama. Jika terjadi kesalahan 841
pencatatan data maka harus melakukan pengecekan ulang secara terus menerus untuk menghindari kesalahan yang fatal. Harus melakukan perhitungan secara terus menerus jika dilakukan transaksi penyetoran maupun penarikan tabungan siswa. Kesalahan juga banyak terjadi dalam mengolah data serta penyimpanan dan perawatan dokumen berbentuk kertas, dimana hal ini sangat sulit ditanggulangi. Berdasarkan masalah masalah tersebut saya membuat Sistem Informasi Pengelolaan Data Tabungan Siswa MI Bahrul Ulum berbasis web Mobile Menggunakan Codeigniter Dan Bootstrap. Tujuan Penelitian Berdasarkan pokok permasalahan yang dikemukakan sebelumnya, maka dapat ditarik tujuan penelitihan sebagai berikut : 1. Untuk mempermudah pekerjaan para staff pengajar dalam hal mencatat tabungan siswa. Manfaat Penelitian Peneliti ini diharapkan dapat memberi manfaat untuk : 1. Dengan adanya aplikasi ini diharapkan bisa memperkecil adanya catatan yang salah dan juga bisa menghemat kertas-kertas II. LANDASAN TEORI Sistem Informasi Sistem informasi adalah suatu bentuk sistem komunikasi di mana data direpresentasikan dan diproses sebagai bentuk memori sosial. Sistem informasi juga dapat dianggap sebagai bahasa semi formal yang mendukung orang dalam pengambilan keputusan dan tindakan. Maka sistem informasi merupakan fokus utama dari studi untuk disiplin sistem informasi dan organisasi informatika. Sistem ini diselenggarakan informasi dari manusia, perangkat lunak, perangkat keras, jaringan komunikasi dan sumber data untuk mengumpulkan, mengubah, dan mendistribusikan informasi dalam sebuah organisasi. Jadi sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, kegiatan manajerial dan strategis dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan. Komponen Sistem Informasi Komponen sistem informasi terdiri dari komputer, instruksi, fakta yang tersimpan, manusia dan prosedur. Sistem informasi dapat dikategorikan dalam empat bagian yaitu : Sistem Informasi Manajemen Sistem Pendukung Keputusan Sistem Informasi Eksekutif Sistem Pemrosesan Transaksi Fungsi Sistem Informasi Berikut merupakan fungsi sistem informasi, antara lain : Meningkatkan aksesibilitas data yang tersaji secara tepat waktu dan akurat bagi para pemakai, tanpa mengharuskan adanya perantara sistem informasi. Menjamin tersedianya kualitas dan keterampilan dalam memanfaatkan sistem informasi secara kritis. Mengembangkan proses perencanaan yang efektif. Mengidentifikasi kebutuhan-kebutuhan akan keterampilan pendukung sistem informasi. Menetapkan investasi yang akan diarahkan pada sistem informasi. Mengantisipasi dan memahami konsekuensi-konsekuensi ekonomis dari sistem informasi dan teknologi baru. Memperbaiki produktivitas dalam aplikasi pengembangan dan pemeliharaan sistem. Web Mobile Web Mobile atau Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device. Kelebihan Dan Kekurangan Kelebihan teknik ini adalah sudah mulai banyak digunakan dikalangan web desainer luar maupun lokal dan memiliki beberapa keuntungan, salah satunya adalah penghematan penggunaan 842
sub domain, yang tadinya saat mengakses harus menggunakan kata mobile atau m didepan domainnya, sekarang cukup dengan mengetik nama domainnya saja dan tampilan akan menyesuaikan dengan device yang digunakan. Keuntungan yang paling utama tentu saja dapat mengurangi jumlah development menjadi satu saja untuk dipakai semua devices. Lalu kelemahan dari teknik ini adalah jika digunakan pada website yang bertujuan untuk menampilkan gambar saja, seperti website fotografi misalnya. Resource gambar yang diload oleh device kita akan sama dengan yang diload dikomputer kita. Untuk itu kita perlu memperhatikan apakah website yang kita buat cocok untuk dipakaikan teknik Responsive ini. Cara menggunakannya yaitu dengan teknik yang sama saja dengan kita membuat design dengan HTML dan CSS. Namun setelah selesai membuat tampilan untuk desktop, kita harus buat satu file CSS untuk device lainnya. Untuk file CSS yang kedua, pembuatannya akan sedikit berbeda dengan CSS yang pertama, karena adanya trik khusus yaitu Media Queries Boilerplate, yang digunakan untuk mendeteksi layar device. PHP PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman clientside seperti JavaScript yang diproses pada web browser (client). Fungsi PHP Dalam Pemrograman Web Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap. Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll. Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script. Codeigniter Codeigniter adalah sebuah framework PHP yang dapat membantu mempercepat developer dalam pengembangan aplikasi web berbasis PHP dibandingkan jika menulis semua kode program dari awal. Codeigniter menyediakan banyak library untuk mengerjakan tugas-tugas yang umumnya ada pada sebuah aplikasi berbasis web. Selain itu, struktur dan susunan logis dari codeigniter membuat aplikasi yang Anda buat menjadi semakin teratur dan rapi. Dengan demikian, Anda dapat focus pada fitur-fitur apa yang dibutuhkan aplikasi Anda dengan membuat kode program seminimal mungkin. Codeigniter pertama kali dibuat oleh Rick Ellis, CEO Ellislab, Inc. (http://ellislab.com), sebuah perusahaan yang memproduksi sebuah CMS (content management system) yang cukup handal, yaitu expression engine (http://www.expressionengine.com). Saat ini, codeigniter dikembangkan dan dimaintain oleh expression engine development team. Adapun beberapa keuntungan menggunakan codeigniter, diantaranya yaitu: 1. Gratis 2. Ditulis Menggunakan PHP 4 3. Berukuran kecil 4. URL yang sederhana 5. Tidak memerlukan Template Engine 6. Dokumentasi lengkap dan jelas Bootstrap Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersam-sama. Selain komponen antarmuka,bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponenkomponen lainnya. Mengutip pengembang yang menciptakan Bootstrap, Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah. Lisensi yang digunakan oleh Bootstrap yaitu lisensi Apache 2.0, sebuah lisensi yang sangat terbuka sehingga kita dapat dengan bebas dan mudah menggunakan Bootstrap, tanpa perlu khawatir akan ancaman legal dari Twitter atau pihak lainnya. Langkah-langkah yang dibutuhkan untuk menggunakan Bootstrap pada website yang akan kita kembangkan sangatlah sederhana. 843
Sederhananya, penggunaan Bootstrap dapat dicapai dengan tiga langkah singkat, yaitu: 1. Download Bootstrap pada website resminya. 2. Lakukan ekstraksi file zip hasil download. 3. Masukkan CSS Bootstrap pada file HTML anda. Sangat sederhana, dan begitu selesai memasukkan Bootstrap pada file HTML, anda akan dapat melihat perubahan pada elemenelemen HTML yang ada, tanpa harus melakukan apapun. Bootstrap adalah Boot atau booting dalam perangkat keras berarti proses mengaktifkan komputer sampai diambil alih oleh sistem operasi. Proses boot ini dikenal dengan dua cara, yaitu warm boot dan cold boot.warm boot, berarti mengaktifkan kembali, tanpa harus dimatikan terlebih dahulu, misalnya dengan menekan tombol reset, atau memencet sekaligus tombol CTRL+ALT+DEL pada sistem operasi Disk Operating System (DOS). Bootstrap loader adalah sebuah program yang cukup sederhana untuk dipanggil secara manual dengan pertolongan sakelar. Program ini mampu memanggil program pemanggil lain yang lebih kompleks sehingga dapat menjalankan program buatan sendiri. Bootstrapping adalah pemuatan dan execution program bootstrap loader.bootstrap ButtonAdalah tombol atau sakelar yang pertama kali akan ditekan apabila hendak menyalakan komputer. Penekanan tombol ini akan menyebabkan sistem operasi berhubungan dengan memori. Bootstrap program adalah kode yang disimpan di code ROM yang dapat menempatkan kernel, memasukkannya kedalam memori, dan memulai eksekusinya Macam macam booting: -CoolBooting Cool booting adalah proses booting saat komputer yang tadinya mati harus lebih dahulu menghidupkan power. Langkah-langkah melakukan cool booting,yaitu: 1.Pastikan bahwa kabel pada power suply atau listrik sudah terpasang 2.Hidupkan monitor dengan menekan tombol power pada monitor, biasanya tombol power berada pada bagian bawah monitor. 3.Tekan tombol power di depan CPU. 4.Kemudian Klik tombol start. 5.Klik turn off komputer. -WarmBooting Warm booting adalah booting komputer dalam keadaan hidup.cara untuk melakukan warm booting antara lain mengikuti langkah-langkah (4 dan 5 diatas). Adobe Photoshop Adobe Photoshop adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto dan bersama Adobe Acrobat dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS(Creative Suite), versi Sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3, versi kesebelas adalah Adobe Photoshop CS4, versi kedua belas adalah Adobe Photoshop CS5, dan versi yang terakhir (ketigabelas) adalah Adobe Photoshop CS6. Photoshop tersedia untuk Microsoft Windows, Mac OS X, dan Mac OS versi 9 ke atas juga dapat digunakan oleh sistem operasi lain seperti Linux dengan bantuan perangkat lunak tertentu seperti CrossOver. Fungsi Photoshop Banyak sekali fungsi Photoshop, tapi sebelum itu inilah fungsi Tool-tool pada Photoshop. 1.Crop & Slice Tool Crop Tool Shortcut (C), digunakan untuk memotong gambar, foto ataupun canvas (kertas kerja). Pemotongan dengan alat ini dilakukan secara permanen mengubah bentuk dimensi lebar dan tinggi foto. Pemotongan dilakukan dengan menentukan area potong berbentuk kotak dari sebuah foto. Slice Tool Shortcut (C), digunakan untuk kebutuhan website dengan cara memotong hasil desain yang telah dibuat di Photoshop menjadi potongan yang lebih kecil. Slice Select Tool Shortcut (C), digunakan untuk memilih potongan pada sebuah desain yang telah dipotong sebelumnya dengan menggunakan slice tool. 2.Annotation, Measuring & Navigation Tool 844
Eyedropper Tool Shortcut (I), digunakan untuk mengambil sample warna dari sebuah gambar ataupun foto, sample warna diambil dengan cara mengklik warna target yang kemudian secara otomatis akan mengubah warna depan (foreground color) pada toolbox. Ruler Tool Shortcut (I), digunakan untuk mengukur dimensi lebar dan tinggi. alat ini biasanya digunakan untuk kebutuhan website seperti mengukur dan memperkirakan interface tinggi & lebar tombol, header ataupun area website lainnya. Satuan yang digunakan biasanya pixels. Note tool Shortcut (I), digunakan untuk memberikan catatan pada hasil desain yang telah di buat. Catatan ini berguna sebagai pengingat dalam proses pembuatan desain ataupun dapat berguna sebagai media untuk penyampaian sebuah pesan ketika bekerja secara team. Hand Tool Shortcut (H), digunakan untuk menggeser/memindah bidang pandang foto atau gambar di dalam window view area atau dalam kondisi gambar sedang di perbesar (zoom in). Cukup tekan dan tahan tombol spasi untuk meminjam alat ini. Zoom Tool Shortcut (Z), digunakan untuk memperbesar ataupun memperkecil tampilan foto atau gambar. Pengaturan zoom in atau zoom out dapat dilakukan melalui option bar. 3.Selection Tool Move Tool Shortcut (V), alat ini digunakan untuk memindahkan posisi layer dalam satu foto ataupun memindahkan sebuah foto atau layer dalam sebuah foto ke foto yang lain / foto yang berbeda. Rectangular Marquee Tool Shortcut (M), alat ini digunakan untuk menyeleksi objek yang berbentuk kotak. Klik kanan diatas alat ini maka akan muncul alat lain dari kelompok marquee tool seperti Eliptical Marquee Tool, Single Row Marquee tool dan Single Column Marquee Tool. Eliptical Marquee Tool Shortcut (M), alat ini digunakan untuk menyeleksi objek yang berbentuk lingkaran seperti menyeleksi lingkaran mata, ban mobil dan objek lain. Alat ini masih satu kelompok dengan Rectangular Marquee Tool. Lasso Tool Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas, alat ini akan membentuk seleksi sesuai dengan gerakan mouse, penggunaan alat ini sangat bergantung dengan gerakan mouse sehingga cukup sulit mengendalikan dan mencapai hasil yang maksimal. Polygonal Lasso Tool Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas bersudut, alat ini membentuk seleksi melalui titiktitik point yang dibuat dengan menggunakan klik kiri mouse. Alat ini juga dapat digunakan untuk memotong dan mengubah background foto. Magnetic Lasso Tool Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas, cara kerja alat ini adalah menempel pada tepi objek yang akan dipotong ketika mouse bergerak mengelilingi tepian objek, selama proses seleksi alat ini membentuk titik-titik penghubung seleksi. Magic Wand Tool Shortcut (W), digunakan untuk menyeleksi satu jenis warna (warna solid) pada foto. Alat ini dapat menyeleksi dengan pengaturan nilai tolerance atau nilai cakupan warna, semakin besar nilai tersebut maka semakin luas cakupan warna yang di seleksi. 4.Retouching Tool Spot Healing Brush Shortcut (J), digunakan untuk menghapus noda pada sebuah foto ataupun gambar, alat ini juga biasanya digunakan untuk menghilangkan noda di wajah ataupun menghilangkan jerawat diwajah. Patch Tool Shortcut (J), digunakan untuk memperbaiki foto dengan cara memanfaatkan pola yang terdapat pada foto tersebut. Perbaikan dilakukan dengan menyeleksi kerusakan area kemudian menarik seleksi tersebut diatas pola target untuk menutupi area kerusakan. 845
Red Eye Tool Shortcut (J), digunakan untuk menghilangkan efek mata merah yang timbul pada foto akibat pengambilan foto dalam kondisi gelap menyebabkan flash kamera memantulkan warna merah pembuluh darah dibalik mata. Clone Stamp Tool Shortcut (S), digunakan untuk mengambil sample dari sebuah area gambar kemudian mengkloning / menerapkan sample tersebut untuk dilukiskan diatas area foto lain berdasarkan sample foto yang diambil. Pattern Stamp Tool Shortcut (S), digunakan untuk melukis image dengan menggunakan pola tertentu sesuai dengan pola yang dipilih pada option bar. Eraser Tool Shortcut (E), digunakan untuk menghapus foto atau gambar dalam sebuah layer raster. Background Eraser Tool Shortcut (E), digunakan untuk menghapus foto atau gambar sehingga menghasilkan layer transparant pada bagian foto atau pada area yang dihapus. Magic Eraser Tool Shortcut (E), digunakan untuk menghapus area tertentu dari sebuah foto atau gambar yang memiliki warna yang serupa (satu warna solid) menjadi transparan dengan satu kali klik pada area warna tersebut. Bisa dimanfaatkan untukmenghapus background satu warna. Blur Tool digunakan untuk menghaluskan/mengaburkan area tertentu dari sebuah foto atau gambar. Dengan mengaburkan gambar akan memberikan kesan halus, blur juga dapat menyamarkan pixels gambar. Sharpen Tool digunakan untuk menajamkan area tertentu dari sebuah foto atau gambar. Smudge Tool digunakan untuk menggosok/mencoreng area tertentu dari sebuah foto atau gambar seolah-olah di pengaruhi oleh sapuan jari telunjuk diatas sebuah lukisan. Dodge Tool Shortcut (O), digunakan untuk menerangkan warna di area tertentu pada gambar atau foto dengan memberikan highlights pada area tertentu hingga area tersebut tampak lebih cerah / terang. Burn Tool Shortcut (O), digunakan untuk menggelapkan warna di area tertentu pada gambar atau foto dengan memberikan shadow / bayangan pada area tertentu hingga tampak lebih gelap. Sponge Tool Shortcut (O), digunakan untuk mengubah saturation di area tertentu pada area gambar atau foto. 5.Painting Tool Brush Tool Shortcut (B), digunakan untuk melukis foto atau gambar dengan goresan kuas berdasarkan warna depan (foreground color) yang telah dipilih. History Brush Tool Shortcut (Y), digunakan untuk melukis image menggunakan snapshot atau state history dari Image. Art History Brush Tool Shortcut (Y), digunakan untuk melukis image menggunakan snapshot atau state history dari image, dengan model artistik tertentu. Pencil Tool Shortcut (B), digunakan untuk melukis dengan efek goresan pensil. Gradient Tool Shortcut (G), digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan dua warna atau lebih. Gradient ini juga memiliki beberapa pengaturan dan tipe untuk menghasilkan efek perpaduan warna yang sesuai dengan keinginan. Paint Bucket Tool Shortcut (G), digunakan untuk mengecat atau mewarnai area tertentu atau 846
layer tertentu berdasarkan warna depan (foreground color) yang telah dipilih. 6.Drawing and Type Tool Path Selection Tool Shortcut (A), digunakan untuk menyeleksi path yang telah dibuat dengan menggunakan pen tool. Horizontal Type Tool Shortcut (T), digunakan untuk membuat teks secara horizontal. Selain alat ini ada juga Vertical Type Tool untuk membuat teks secara vertical dan type mask untuk membuat teks dalam bentuk seleksi. Pen Tool Shortcut (P), digunakan untuk menggambar path sudut ataupun lengkung. Alat ini biasa juga digunakan untuk menyeleksi objek. Selain alat ini ada kumpulan alat lain untuk menambah titik point, mengurangi dan memodifikasi path yang telah dibuat. setela Eclipse Eclipse adalah merupakan salah satu IDE favorit yang digunakan untuk melakukan pemrograman, termasuk ketika membuat aplikasi Android. Disamping bersifat gratis serta opensource sehingga setiap orang bisa melihat kode pemrogramannya, Eclipse juga menyediakan beragam plug-in yang mampu dikembangkan oleh penggunanya untuk mengasilkan aplikasi. Berikut adalah sifat-sifat dari Eclipse: Multi-Platform: Target sistem operasi Eclipse adalah Microsoft windows, Linux, Solaris, AIX, HP-UX dan Mac OS X. Multi-language: eclipse dikembangkan dengan bahasa pemrograman java, namun Eclipse mendukung pengembangan aplikasi berbasis bahasa pemrograman lainnya, seperti: C/C++, Cobol, Python, Perl, PHP dan sebagainya. Multi-role: selain sebagai IDE untuk mengembangkan aplikasi, Eclipse pun dapat digunakan untuk aktifitas dalam siklus dalam siklus pengembangan perangkat lunak, sebagai dokumentasi, test perangkat lunak, pengembangan web dan sebagainya. III. ANALISA DAN PERANCANGAN SISTEM Analisa sistem Analisa kebutuhan sistem merupakan beberapa kebutuhan bahan sistem yang akan dipergunakan untuk menambah dan membantu jalan proses pembuatan suatu obyek. Analisa Kelayakan Sistem Analisis kelayakan sistem merupakan proses yang digunakan untuk menentukan kelayakan dari game tersebut untuk dapat dilanjutkan dan dikembangkan. Dalam analisis tersebut terdapat proses untuk mempelajari atau menganalisa permasalahan yang telah ditentukan dalam pembuatan game sesuai dengan tujuan akhir yang akan dicapai. Sehingga dapat ditentukan apakah game tersebut layak dipakai atau tidak. Didalam analisis kelayakan sistem juga terdapat aspekaspek kelayakan sebagai berikut. 1. Kelayakan Teknologi 2. Kelayakan Operasional Perancangan Sistem Setelah semua tahap analisis dilakukan, maka akan didapatkan gambaran dengan jelas mengenai apa yang harus dikerjakan. Tahap selanjutnya yaitu memikirkan bagaimana membentuk sistem tersebut agar dapat terimplementasi dengan baik sesuai perencanaan. Tahap ini disebut dengan Perancangan Sistem. Use Case Diagram Use case diagram merupakan pemodelan untuk menggambarkan kelakuan sistem yang akan dibuat. Diagram use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Dengan kata lain, diagram use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsifungsi tersebut. Gambar 1. Diagram Use Case Activity Diagram Diagram aktivitas atau activity diagram menggambarkan workflow (aliran kerja) atau 847
aktivitas dari sebuah sistem atau proses bisnis. Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancanakan, bagaimana masing-masing alur berawal. Gambar 2. Activity Diagram User menjalankan aplikasi, setelah itu user dapat melihat menu awal dan user menekan menu login dan sistem menampilkan halaman login, lalu user memasukkan user name dan passwordnya. Setelah itu user dapat melihat menu utama, user menekan menu tabungan, setelah sistem menampilkan form menu tabungan, user memasukkan data pemasukan atau pengeluaran tabungan, setelah itu sistem akan mencetak bukti transaksi, setelah user mendapat bukti transaksi, lalu user menutup sistem aplikasi. Squence Diagram Diagram sequence berfungsi untuk menggambarkan perilaku objek pada use case dengan mendeskripsikan waktu hidup objek dan message yang dikirimkan dan diterima antar objek. Gambar 3. Squence Diagram Input dan Output Input : 1. Admin dapat memasukkan username dan password. 2. Admin memasukkan data pemasukan tabungan. 3. Admin memasukkan data pengeluaran tabungan. 4. Admin mencetak laporan. Output : 1. Admin mendapatkan bukti transaksi. 2. Admin mendapatkan hasil laporan. Fitur Utama 1. Menu awal yaitu login dan exit. 2. Menu utama yaitu data siswa, data tabungan, dan laporan. Implementasi Implementasi merupakan tahap kelanjutan dari kegiatan perancangan sistem, tahap ini merupakan tahap meletakkan sistem supaya siap untuk dioperasikan dan dapat dipandang sebagai usaha untuk mewujudkan sistem yang telah dirancang. Manual Program Dalam menjalankan suatu sistem atau aplikasi, penjelasan tentang menu-menu yang ditawarkan sangatlah penting, karena tanpa adanya manual program atau panduan seorang user akan kesulitan dalam menggunkan program yang telah dibuat. Manual Instalasi Yang dimaksud dengan manual instalasi pada pemrograman berbasis android yaitu proses pembuatan file setup/package, proses instalasi file setup, dan proses upload ke Google Play. Pemeliharaan Sistem Tahap pemeliharaan sistem dilakukan setelah tahap implemetasi. Pemeliharaan sistem merupakan suatu upaya untuk memperbaiki, menjaga, menanggulangi, mengembangkan sistem yang ada. Pemeliharaan ini di perlukan untuk meningkatkan efisiensi dan efektivitas kinerja sistem agar dalam penggunaanya dapat optimal. IV. KESIMPULAN Setelah melalui beberapa tahapan dalam menyelesaikan Sistem Informasi Pengelolaan Data Tabungan Siswa MI Bahrul Ulum berbasis web Mobile menggunakan Codeigniter Dan Bootstrap dapat ditarik kesimpulan bahwa aplikasi ini dapat digunakan untuk mempermudah para pengajar mencatat hasil tabungan siswa. DAFTAR PUSTAKA Basuki, Pribadi Awan. 2014. Proyek Membangun Website Berbasis PHP Dengan Codeigniter. Yogyakarta : Lokomedia 848
Hartono, Jogiyanto. 2009. Sistem Teknologi Informasi. Yogyakarta : Penerbit Andi Hendratman, Hendi. 2012. The Magic of Adobe Photoshop. Bandung : Informatika Suprianto, Dodit. 2008. Buku Pintar Pemograman PHP. Bandung : Oase Media Hasnatyas, Pengertian Web Responsive, 23 April 2013, http://mengintipkebawah.blogspot.com/20 13/04/pengertian-webresponsive.html?m=1, diakses pada tanggal 5 maret 2015. Zuck Lee, Pengertian Dan Keuntungan Menggunakan Codeigniter, 5 Januari 2012, http://zuckloverz.blogspot.com/2012/01/p engertian-dan-keuntunganmenggunakan.html?m=1, diakses pada tangal 5 maret 2015. Bertzzie's Ran, Bootstrap Sebuah Framework CSS dari Twitter, 21 Juni 2013, http://bertzzie.com/post/31/bootstrapsebuah-framework-css-dari-twitter, diakses pada tangal 5 maret 2015. Dunia Ilkom, Pengertian Dan Fungsi PHP Dalam Pemograman Web, 05 Februari 2014, http://www.duniailkom.com/pengertiandan-fungsi-php-dalam-pemograman-web/ http://volkshymne.blogspot.co.id/2011/03/penger tian-bootstrap.html 849
Halaman ini sengaja dikosongkan 850