SISTEM INFORMASI AKADEMIK DAN PENGARSIPAN FILE BERBASIS ExTJS DAN WEBSERVICE MENGGUNAKAN APLIKASI ANDROID

Transkripsi

1 SISTEM INFORMASI AKADEMIK DAN PENGARSIPAN FILE BERBASIS ExTJS DAN WEBSERVICE MENGGUNAKAN APLIKASI ANDROID Syafri Arlis, Fakultas Ilmu Komputer Universitas Putra Indonesia YPTK, Padang Abstrak Sistem informasi akademik dan pengasipan file membawa manfaat ketersediaan informasi yang dapat diakses setiap saat dan visualisasi yang menarik. Dengan perkembangan teknologi perangkat mobile saat ini, maka penulis membuat sebuah aplikasi sistem informasi akademik dan pengarsipan file secara mobile yang menjadi media akses dan menampilkan informasi serta pengarsipan file berbasis ExTJS dan Android Kata Kunci : file, mobile, extjs, android 1. PENDAHULUAN Mengingat pentingnya informasi bagi pihak kampus, maka kualitas informasi harus di perhatikan. Hal ini bisa diatasi dengan penggunaan sistem informasi. Dengan menggunakan sistem informasi yang baik maka kualitas informasi juga akan baik. Penggunaan sistem informasi di kampus, selain untuk menjaga kualitas informasi, juga akan memudahkan bidang administrasi dalam mengolah data-data yang ada seperti data mahasiswa, data dosen,data jurusan, data fakultas, data kelas, data mata kuliah. Penggunaan sistem informasi di kampus, selain untuk menjaga kualitas informasi, juga akan memudahkan bidang administrasi dalam mengolah data-data yang ada seperti data mahasiswa, data dosen,data jurusan, data fakultas, data kelas, data mata kuliah. Pengolahan data ini akan sangat mudah dilakukan dengan menggunakan sistem informasi akademik. Selain itu, sistem informasi akademik akan membantu mahasiswa dalam menyusun kartu rancangan studi secara online. Berdasarkan hal diatas maka perlu sebuah sistem yang berfungsi sebagai sistem informasi akademik dan pengarsipan file dengan memanfaatkan kelebihan perangkat mobile smartphone dengan sistem operasi android. Sistem operasi android mendukung pengembangan aplikasi secara mandiri sehingga setiap orang bisa membuat aplikasinya sendiri. 2. LANDASAN TEORI 2.1 Definisi Mobile Web Service Definisi Web Service Web service adalah suatu sistem perangkat lunak yang dirancang untuk mendukung interoperabilitas dan interaksi antar sistem pada suatu jaringan. Web service digunakan sebagai suatu fasilitas yang disediakan oleh suatu website untuk menyediakan layanan (dalam bentuk informasi) kepada sistem lain, sehingga sistem lain dapat berinteraksi dengan sistem tersebut melalui layanan-layanan (service) yang disediakan oleh suatu sistem yang menyediakan web service. Web service menyimpan data informasi dalam format XML, sehingga data ini dapat diakses oleh sistem lain walaupun berbeda platform, sistem operasi, maupun bahasa compiler. Web service bertujuan untuk meningkatkan kolaborasi antar pemrogram dan perusahaan, yang memungkinkan sebuah fungsi di dalam Web Service dapat dipinjam oleh aplikasi lain tanpa perlu mengetahui detil pemrograman yang terdapat di dalamnya. Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

2 Web Service berjalan di port 80 yang merupakan protokol standar HTTP, dengan demikian mengurangi resiko terblokir oleh firewall. Kendala arsitektur COM/DCOM adalah memerlukan konfigurasi khusus di sisi firewall, dan ini tidak perlu dilakukan untuk mengakses Web Service. Beberapa alasan mengapa digunakannya web service adalah sebagai berikut: 1. Web service dapat digunakan untuk mentransformasikan satu atau beberapa bisnis logic atau class dan objek yang terpisah dalam satu ruang lingkup yang menjadi satu, sehingga tingkat keamanan dapat ditangani dengan baik. 2. Web service memiliki kemudahan dalam proses deployment-nya, karena tidak memerlukan registrasi khusus ke dalam suatu sistem operasi. Web service cukup diupload ke web server dan siap diakses oleh pihak-pihak yang telah diberikan otorisasi. 3. Web service berjalan di port 80 yang merupakan protokol standar HTTP, dengan demikian web service tidak memerlukan konfigurasi khusus di sisi firewall. Gambar 2.1 Komponen-komponen Web Service Web service secara keseluruhan memiliki empat layer komponen seperti pada gambar di atas, yaitu: 2. Layer 2: Simple Object Access Protocol (SOAP), merupakan protokol akses objek berbasis XML yang digunakan untuk proses pertukaran data/informasi antar layanan. 3. Layer 3: Web Service Definition Language (WSDL), merupakan suatu standar bahasa dalam format XML yang berfungsi untuk mendeskripsikan seluruh layanan yang tersedia. 2.4 Alat Bantu Pembuatan Sistem Eclipse Eclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platformindependent). Berikut ini adalah 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, akan tetapi Eclipse mendukung pengembangan aplikasi berbasis bahasa pemrograman lainnya, seperti C/C++, Cobol, Python, Perl, PHP, dan lain sebagainya. - Multi-role: Selain sebagai IDE untuk pengembangan aplikasi, Eclipse pun bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak, seperti dokumentasi, test perangkat lunak, pengembangan web, dan lain sebagainya. Eclipse pada saat ini merupakan salah satu IDE favorit dikarenakan gratis dan open source, yang berarti setiap orang boleh melihat kode pemrograman perangkat lunak ini. Selain itu, kelebihan dari Eclipse yang membuatnya populer adalah kemampuannya untuk dapat dikembangkan oleh pengguna dengan komponen yang dinamakan plug-in. 1. Layer 1: Protokol internet standar seperti HTTP, TCP/IP Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

3 2.4.2 ExTJS ExtJS merupakan framework yang focus pada kemudahan pengembangan user interface untuk aplikasi web. Dengan arsitektur ExtJS kita dapat membuat aplikasi web yang memiliki tampilan yang menarik dan professional hanya dengan sedikit membuat kode program. Pada awalnya ExtJS merupakan extension dari Yahoo User Inteface Library (YUI). ExtJS menyediakan apa yang menjadi kekurangan YUI yaitu kemudahan dalam penggunaan APInya dan widgets dengan tampilan yang professional. Javascript merupakan bahasa yang object oriented. Setiap data di dalam Javascript adalah objek. Numbers, strings, tanggal, dan Boolean (true atau false) semua adalah objek. Variable pada Javascript merupakan referensi dari objek yang kita assign, seperti halnya pointer/penunjuk terhadap lokasi sebuah objek. Dalam Javascript sebuah fungsi juga adalah objek dan dapat disimpan/assign pada sebuah variable dan juga dapat dikirimkan/passed sebagai parameter. Jadi sebuah deklarasi fungsi dalam Javascript adalah literal yang sama dengan deklarasi sebuah string. Dengan kemudahan dan komponen user interface yang kaya, aplikasi web ExtJS akan terlihat seperti aplikasi Desktop. Hal ini juga menyebabkan akan meningkatnya produktifitas developer, karena akan lebih focus pada bisnis proses dari web aplikasi yang dikembangkan dan tidak perlu lagi terlalu memikirkan masalah user interface. Beberapa fungsi dasar dari ExtJS. Masih dengan contoh sebelumnya kemudian kita akan tingkatkan penggunaan ExtJS. Fungsi-fungsi berikut akan kita gunakan pada setipa project dalam modul ini. a. Ext.Msg: Fungsi ini digunakan untuk membuat messagebox b. Configuration objects: digunakan untuk mendefinisikan bagaimana karakteristik widget ExtJS c. Ext.get: Fungsi ini digunakan untuk mengakses dan memanipulasi element-element dalam DOM 3. PERANCANGAN SISTEM 3.1. Analisa Sistem Dalam perancangan aplikasi mobile learning ini terdapat dua buah aplikasi yang akan dibuat. Pertama dalam bentuk aplikasi berbasis web dan yang kedua adalah aplikasi yang dapat diinstalkan pada perangkat mobile berbasis Android. Analisa sistem dapat didefenisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalaha, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikanperbaikannya. Analisa masalah dapat dilakukan agar penemuan masalah yang ada, dapat diketahui penyebabnya, sehingga nantinya dari analisa masalah tersebut didapatkan suatu bentuk pemecahan masalah. Aplikasi client harus terkoneksi dengan jaringan internet untuk dapat mengakses informasi yang tersimpan dalam database server. Aplikasi web dirancang bagi user yang tidak menggunakan perangkat mobile berbasis Android. Tampilan antarmuka antara aplikasi web dengan aplikasi mobile memiliki kesamaan namun dengan tambahan antarmuka untuk menginputkan data bagi administrator pada aplikasi web Perancangan Sistem dengan UML Use case Diagram Pada diagram use case, digambarkan fungsi-fungsi apa saja yang ada di dalam sistem informasi akademik dan pengarsipan file. Diagram use case ini menggambarkan sistem keseluruhan baik yang berbasis aplikasi web maupun aplikasi mobile. Pada aplikasi web mencakup keseluruhan dari use case yang digambarkan sedangkan untuk aplikasi mobile, use case yang digunakan meliputi sistem informasi akademik dan pengasirpan file. Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

4 Gambar use case diagram dari sistem Informasi Kampus XYZ dapat dilihat pada gambar berikut ini : mudahnya sequence diagram adaalh gambaran tahap demi tahap yang seharusnya dilakukan untuk menghasilkan suatu sistem sesuai dengan use case diagram Sequence Diagram Admin Gambar 3.1 Use case diagram Class Diagram Class diagram mendefinisikan kelaskelas yang akan dibuat untuk membangun sistem informasi akademik dan pengarsipan file. kelas-kelas tersebut salah satunya adalah kelas main yang memiliki fungsi awal saat sistem dieksekusi. Dalam hal ini yang menjadi kelas main untuk aplikasi web adalah halaman index. Sedangkan untuk aplikasi mobile adalah tampilan splashscreen. Class diagram memberikan gambaran hubungan antara tabel-tabel yang ada dalam database. Masing-masing class memiliki atribute dan metoda atau fungsi dengan proses yang terjadi.gambar class diagram untuk Sistem Informasi Kampus XYZ pada gambar berikut ini: Gambar 3.3 Sequence Diagram Admin Sequence Diagram Mahasiswa Diagram ini menjelaskan urutan langkah-langkah kegiatan yang dilakukan Mahasiswa seperti pada gambar berikut ini: Gambar 3.2 Class diagram sistem Gambar 3.4 Sequence Diagram Mahasiswa Sequence Diagram Sequence diagram menjelaskan interaksi objek yang disusun berdasarkan urutan waktu. Secara Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

5 Sequence Diagram Dosen Diagram ini menjelaskan urutan langkah-langkah kegiatan yang dilakukan Mahasiswa seperti pada gambar berikut ini: Activity Diagram Activity Diagram merupakan sebuah diagram dimana didalam diagram tersebut terdapat semua aktivitas dalam sistem informasi akademik kampus ini. dalam activity diagram digambarkan aktivitas dari setiap aktor yang ada Acitivity Diagram Admin Activity diagram admin menggambarkan aktivitas-aktivitas yang dapat dilakukan oleh admin didalam sistem sistem informasi akademik dan pengarsipan ini. Pada activity diagram admin dibawah ini dapat kita liha aktivitas dari admin yaitu admin harus login Gambar 3.5 Sequense Diagram Dosen terlebih dahulu Sequence Diagram Staff Diagram ini menjelaskan urutan langkah-langkah kegiatan yang dilakukan Staf seperti pada gambar berikut ini: Gambar 3.6 Sequense Diagram Staff Gambar 3.7 Activity Diagram Admin Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

6 Acitivity Diagram Mahasiswa Activity diagram mahasiswa menggambarkan aktivitas-aktivitas yang dapat dilakukan oleh mahasiswa didalam sistem informasi akdemik ini. Pada activity diagram mahasiswa dibawah ini dapat kita liha aktivitas dari mahasiswa. Gambar 3.9 Activity Diagram Dosen Acitivity Diagram Staff Activity diagram Staf menggambarkan aktivitas-aktivitas yang dapat dilakukan oleh Staff didalam sistem Informasi dan pengarispan ini. Pada activity diagram Staf dibawah ini dapat kita liha aktivitas dari Staf. Gambar 3.8 Activity Diagram Mahasiswa Acitivity Diagram Dosen Activity diagram dosen menggambarkan aktivitas-aktivitas yang dapat dilakukan oleh dosen didalam sistem Informasi dan pengarsipan file ini. Pada activity diagram dosen dibawah ini dapat kita liha aktivitas dari dosen. Gambar 3.10 Activity Diagram staf Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

7 Deployment Diagram Diagram ini menunjukkan konfigurasi komponen dalam proses eksekusi aplikasi. Aplikasi mobile learning ini dibangun untuk dapat diakses melalui aplikasi website melalui browser dan dapat diakses melalui aplikasi mobile yang dibuat khusus untuk diinstalkan pada perangkat mobile berbasis android. Diagram deployment aplikasi mobile learning untuk pembelajaran unsur-unsur kimia dapat dilihat pada Gambar Tampilan Startup ADT Server PHP server Client Browser Components User Interface Bussiness process Gambar 4.3 Tampilan Startup ADT Android OS MySQL Components Data 4.4. Tampilan Virtual Gambar 3.11 Deployment diagram sistem 4. HASIL DAN PEMBAHASAN 4.1. Tampilan antarmuka ikon aplikasi Setelah aplikasi selesai diinstal maka icon louncher aplikasi akan terlihat pada sistem menu perangkat mobile. Untuk menjalankan aplikasi, user dapat mengklik icon tersebut. Gambar 4.4 Tampilan Virtual 4.5. Tampilan Main Menu Pada Android Gambar 4.1 Main Menu Desktop 4.2. Tampilan antarmuka pada web Saat icon louncher aplikasi diklik sistem perangkat akan mulai membuka aplikasi. Gambar 4.5 Tampilan Main Menu Gambar 4.2 Main Menu Web Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan

8 5. KESIMPULAN Dari pembahasan dan hasil analisa yang dilakukan sampai terbentuknya sistem informasi akademik dan pengarsipan file berbasis extjs dan webservice menggunakan aplikasi android maka penulis menarik kesimpulan sebagai berikut : 1. Dengan adanya sistem informasi akademik dan pengarsipan file berbasis extjs dan webservice menggunakan aplikasi android ini, pengguna akan lebih mudah dalam mendapatkan informasi akademik karena pada aplikasi dapat diakses secara mobile, sehingga pengguna dapat belajar dimana saja dan kapan saja dengan menggunakan perangkat mobile. 2. Sistem ini perlu beberapa pengembangan, perkembangan akademik diharapkan dapat sejalan dengan perkembangan kebutuhan informasi, dan kebutuhan pihak manapun atas informasi yang lebih baik dan lebih lengkap dapat dipenuhi oleh sistem yang dirancang. Simarmata, Janner Basis Data. Yogyakarta: Andi. DAFTAR REFERENSI Ally, M Using learning theories to design instruction for mobile learning devices. Proceedings of the Mobile Learning 2004 International Conference, Rome. Dharma Kasman, Akhmad ( 2013 ).Kolaborasi Dahsyat Android Dengan php & mysql. Yogyakarta : Loko Media. Holzner, Steve. Ajax For Dummies. Hoboken: Wiley Publishing. Inc., 2006 Kofler, Michael. The Definitive Guide to MySQL, Second Edition. Berkeley: Apress, Purnomo, Vita Prihatoni. 100% Javascript. Jakarta: Dian Rakyat, 2008 Safaat, Nazruddin Pemrograman Aplikasi Mobile Smartphone dan Tablet PC Berbasis Android. Bandung: Informatika Bandung Sakur, Stendy B PHP 5 Pemrograman Berorientasi Objek Konsep & Implementasi. Yoyakarta: Andi. Sayfri Arlis- Sistem Informasi Akademik dan Pengarsipan