LAPORAN PROJECT AKHIRPERNGEMBANGAN PERANGKAT APLIKASI BERGERAK

" Sistem Informasi Program Teknologi Informasi & Ilmu Komputer (SIPTIIK) "

Nama Kelompok :

Fauzi Dwi Susanto (105060801111041)

Fawwaz Ali Akbar (105060800111030)

A. Mardhatilah Sukandar (105060807111077)

Rohman Widianto (105060813111001)

PROGRAM STUDI TEKNIK INFORMATIKA

PROGRAM TEKNOLOGI INFORMASI DAN ILMU KOMPUTER

UNIVERSITAS BRAWIJAYA

2013

1. JUDUL APLIKASI

" Sistem Informasi Program Teknologi Informasi & Ilmu Komputer (SIPTIIK) "

2. TUJUAN APLIKASI

Tersedianya Sistem Informasi Akademik berbasis Mobile yang bisa diakses setiap saat secara

online.

Menyajikan aplikasi mobile Kampus Online yang mewakili sebagian besar fitur-fitur pada jejaring

sosial Kampus Online versi web.

Memenuhi kebutuhan pengguna akan internet yang cepat untuk mengakses sistem informasi

online, khususnya dibidang akademik.

3. DESKRIPSI APLIKASI

Aplikasi ini merupakan application mobile yang mendukung system informasi dalam ruang lingkup

fakultas di bidang akademik maupun kemahasiswaan pada suatu universitas. Dalam hal ini adalah

sistem informasi PTIIK UB. Dalam implementasinya kami menggunakan bantuan jQuery mobile.

Untuk menampilkan informasi dari masing-masing list fitur yang ada kami menggunakan webview

yang sudah terdapat dalam server. Aplikasi ini menggunakan database database mysql. Untuk

mengontrol aktifitas insert, update dan delete informasi diatur oleh seorang admin.

Dalam implementasinya, secara fungsional aplikasi ini dibagi menjadi 2 jenis, yakni :

a. Admin

Admin berfungsi sebagai pengontrol aplikasi yang mempunyai hak akses insert, update dan

delete sistem informasi baik kategori akademik, kemahasiswaan, beasiswa maupun news.

Segala posting informasi baru akan diterima client dengan tanda notifikasi yang secara otomatis

masuk ke dalam device android client. Hal ini akan terus berjalan di client setiap admin

melakukan segala aktifitasnya baik insert,update atupun delete posting informasi.

b. Client

Client disini sebagai pemakai aplikasi android yang bisa melihat segala posting informasi yang

dikelola oleh admin baik infomasi akademik, kemahasiswaan, beasiswa ataupun news. Client

akan menerima notifikasi baru setiap ada perubahan yang dilakukan admin. Notifikasi tersebut

akan secara otomatis berisi judul informasi terbaru beserta kategori informasinya.

4. ANALISA FUNGSI PROGRAM

A. Admin

Pada admin ini adalah semua program yang terdapat dalam web admin, dalam ini menggunakan

CI (Code Iginiter). Berikut struktur adminnya :

Controllers

1. adminCont.php

a. public function index()

Fungsi ini digunakan untuk menampilkan keseluruhan data yang telah diinputkan admin

ke dalam database.

b. public function login()

Fungsi ini digunakan untuk login handling jika pada proses akses fungsi index tapi pada

session belum terdapat data login.

c. public function logout()

Fungsi yang digunakan untuk logout dari system dan menghapus data session.

d. function update()

Fungsi ini digunakan untuk meng-update data yang telah dikirim pada client sebelumnya.

Dan pada proses ini juga diimplementasikan fitur Push Notification untuk memberikan

notification pada device client.

e. function delAcademik()

Fungsi ini digunakan untuk menghapus data tertentu pada kategori tertentu sesuai

parameter yang dikirim.

f. function add()

Fungsi ini digunakan untuk mengirim data baru pada client. Dan pada proses ini juga

diimplementasikan fitur Push Notification untuk memberikan notification pada device

client.

Models

1. admin.php

a. function login($name, $pass)

Fungsi yang digunakan untuk mengambil data login dan proses verifikasi login pada

database.

b. function logout()

Fungsi yang dipanggil untuk mengosongkn session.

c. public function getData($query)

Fungsi yang digunakan untuk mengambil data pada database.

d. public function getRegistrationIDs()

Fungsi yang digunakan untuk mengambil data device_id client pada database yang telah

melakukan installasi applikasi SI PTIIK.

Views

1. formAdd.php

View yang digunakan untuk melakukan pengiriman data baru.

2. formUpdate.php

View yang digunakan untuk melakukan update data.

3. homeAdmin.php

View yang digunakan untuk tampilan home admin.

4. login.php

View yang digunakan untuk melakukan login.

B. Client

Pada client ini adalah semua program yang terdapat pada aplikasi android itu sendiri. Pada

program ini terdapat 2 package Class-class tersebut terdiri dari Opening.java, Kepo.java,

AcademicActivity.java, KemahasiswaanActivity.java, Beasiswa.java, dan NewsActivity.java

Opening.java

Class ini merupakan class yang berfungsi untuk mengatur tampilan awal program, yakni

tampilan yang berisi logo SIPTIIK.

Source Code :

package kepo.ptiik.wmf;

import com.google.android.gcm.GCMRegistrar;

import android.os.Bundle;import android.os.Handler;import android.app.Activity;import android.content.Intent;import android.util.Log;import android.view.Menu;

public class Opening extends Activity {Intent opening;public static String GCM_SENDER_ID = "53938453582";

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.opening);

GCMRegistrar.checkDevice(getApplicationContext());GCMRegistrar.checkManifest(getApplicationContext());final String regId =

GCMRegistrar.getRegistrationId(getApplicationContext());if (regId.equals("")) { GCMRegistrar.register(getApplicationContext(),

GCM_SENDER_ID);} else { Log.v("GCM LOG", "Device already registered.");}

new Handler().postDelayed(new Runnable(){ public void run(){ opening = new Intent(Opening.this,Kepo.class); Opening.this.startActivity(opening); Opening.this.finish(); }

},2000);

}

@Override public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.opening, menu); return true; }

}

Pada class opening.java ini juga terdapat import gcm. Fungsi dari import ini adalah untuk

mengecek ke server GCM dengan GCM_SENDER_ID diatas yang telah didaftarkan

sebelumnya dengan nama project SIPTIIK.

Class ini berfungsi menampilkan halaman awal program selama delay 2 detik yang sudah

dideklarasikan 2000. Setelah delay 2 detik maka akan mereference ke halaman Kepo.class

Activity yang dijalankan adalah "opening" yang ada pada AndroidManifest. Untuk tampilan

menu opening ini diatur dalam opening.xml yang terdapat dalam layout.

Kepo.java

Class ini merupakan class yang berfungsi untuk mengatur tampilan awal program, yakni

tampilan yang berisi logo SIPTIIK.

Source Code :

package kepo.ptiik.wmf;

import android.app.TabActivity;import android.content.Intent;import android.content.res.Resources;import android.os.Bundle;import android.widget.TabHost;

public class Kepo extends TabActivity {

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.kepo);

Resources res = getResources(); TabHost tabHost = getTabHost();

TabHost.TabSpec spec;

Intent intent;

intent = new Intent().setClass(this, AcademicActivity.class); // Initialize a TabSpec for each tab and add it to the TabHost spec = tabHost.newTabSpec("academic").setIndicator("Academic",

res.getDrawable(R.drawable.ic_tab_academic)) .setContent(intent); tabHost.addTab(spec);

// Do the same for the other tabs intent = new Intent().setClass(this, KemahasiswaanActivity.class); spec = tabHost.newTabSpec("mahasiswa").setIndicator("Mahasiswa", res.getDrawable(R.drawable.ic_tab_kemahasiswaan)) .setContent(intent); tabHost.addTab(spec);

intent = new Intent().setClass(this, BeasiswaActivity.class); spec = tabHost.newTabSpec("beasiswa").setIndicator("Beasiswa", res.getDrawable(R.drawable.ic_tab_beasiswa)) .setContent(intent); tabHost.addTab(spec);

intent = new Intent().setClass(this, NewsActivity.class); spec = tabHost.newTabSpec("news").setIndicator("News", res.getDrawable(R.drawable.ic_tab_news)) .setContent(intent); tabHost.addTab(spec);

tabHost.setCurrentTab(4); }

}

Pada class kepo.java ini mengatur fungsi tampilan tab-tab yang ada di atas web view yakni

academic, kemahasiwaan, beasiswa dan news. Activity yang dijalankan adalah "kepo" yang

ada pada AndroidManifest. Untuk tampilan menu Kepo.java ini diatur dalam kepo.xml yang

terdapat dalam layout.

Resources res = getResources(); merupakan fungsi untuk mengambil gambar

drawables, disini setiap tab mempunyai gambar icon masing-masing yang berbeda.

TabHost tabHost = getTabHost(); merupakan fungsi untuk activity TabHost.

TabHost.TabSpec spec; merupakan fungsi reusable TabSpec untuk setiap tab.

intent = new Intent().setClass(this, AcademicActivity.class);sspec = tabHost.newTabSpec("academic").setIndicator("Academic",

res.getDrawable(R.drawable.ic_tab_academic)) .setContent(intent);tabHost.addTab(spec);

Fungsi diatas membuat intent baru untuk kemahasiswaan dan menjalanakna class

AcadmicActivity. Setelah inisialisasi TabSpec pada tab kemahasiswaan dan menambahkannya

ke dalam TabHost.

AcademicActivity.java

Class ini mengatur tampilan tab Academic. Class ini merupakan kelas yang mengatur fungsi

ketika tab academic pada fungsi kepo.java dijalankan.

Source Code :

package kepo.ptiik.wmf;

import android.annotation.SuppressLint;import android.app.Activity;import android.app.ProgressDialog;import android.content.Intent;import android.net.Uri;import android.os.Bundle;

import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;

@SuppressLint("SetJavaScriptEnabled")public class AcademicActivity extends Activity {

WebView browser; ProgressDialog mProgress; String urlError; boolean statusError=false;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.main);

browser = (WebView) findViewById(R.id.webkit);

browser = new WebView(this);

setContentView(browser);

WebSettings settings = browser.getSettings(); settings.setJavaScriptEnabled(true);

mProgress = ProgressDialog.show(this, "Loading", "Please wait for a moment...");

// add a WebViewClient for WebView, which actually handles loading data from web browser.setWebViewClient(new WebViewClient() {

// load url public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }

// katika finish loading page public void onPageFinished(WebView view, String url) { if(mProgress.isShowing()) { mProgress.dismiss(); } }

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { urlError=browser.getUrl(); browser.loadUrl("file:///android_asset/error.html"); statusError=true;

} });

browser.loadUrl("http://www.sipitik.id1945.com/sipitik/index.php/process/");

}

private int group1Id = 1;

int refreshId = Menu.FIRST; @Override

public boolean onPrepareOptionsMenu(Menu menu) { String webUrl = browser.getUrl(); menu.clear(); menu.add(group1Id, refreshId, refreshId, "refresh"); if(!webUrl.equals("http://www.sipitik.id1945.com/sipitik/index.php/process/")) {

menu.add(group1Id, shareId, shareId, "share"); } return super.onPrepareOptionsMenu(menu);

}

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.kepo, menu);

return super.onCreateOptionsMenu(menu);}

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case 1: refresh();

return true;

default: break;

} return super.onOptionsItemSelected(item);

}public void refresh(){

if(statusError){browser.loadUrl(urlError);

}else{String webUrl = browser.getUrl();browser.loadUrl(webUrl);}

}}

WebView browser; digunakan untuk deklarasi WebView dengan variable browser.

ProgressDialog mProgress; digunakan untuk deklarasi ProgressDialog dengan variable

browser. ProgressDialog berfungsi untuk menampilkan dialog tertentu ketika loading page dari

WebView.

String urlError; digunakan untuk deklarasi ketika load url eror.

boolean statusError=false; digunakan untuk mengeset statusError awal adalah false.

browser = (WebView) findViewById(R.id.webkit); merupakan inisialisasi WebView

dengan memanggil R.id.webkit yang berada pada main.xml pada layout.

mProgress = ProgressDialog.show(this, "Loading", "Please wait for a

moment..."); digunakan unttuk mengeset isi dari ProgressDialog yang akan ditampilkan dan

ditampung pada variable mProgress.

Saat menampilkan halaman WebView diberikan 3 kondisi yakni, ketika proses load, ketika

proses load selesai (menampilkan WEbview) dan ketika proses load gagal/eror. Back

Ketika diklik menu maka akan menampilkan menu refresh pada halaman webview awal.

KemahasiswaanActivity.java

Class ini mengatur tampilan tab Kemahasiswaan. Class ini merupakan kelas yang mengatur

fungsi ketika tab Mahasiswa pada fungsi kepo.java dijalankan. Secara fungsionalnya sama

seperti Academic hanya saja tab yang diajalankan berbeda.

BeasiswaActivity.java

Class ini mengatur tampilan tab Beasiswa. Class ini merupakan kelas yang mengatur fungsi

ketika tab beasiswa pada fungsi kepo.java dijalankan. Secara fungsionalnya sama seperti

Academic hanya saja tab yang diajalankan berbeda.

NewsActivity.java

Class ini mengatur tampilan tab News. Class ini merupakan kelas yang mengatur fungsi ketika

tab news pada fungsi kepo.java dijalankan. Secara fungsionalnya sama seperti Academic

hanya saja tab yang diajalankan berbeda.

GCMINterface.java

Class ini merupakan class yang mengatur notifkasi ke aplikasi client. Class ini mengatur mulai

dari icon notifikasi, judul notifikasi, serta pengaturan lain pada client. Namun sebelumnya

dilakukan proses pengecekan ke server GCM.

APIWrapper.java

Class ini merupakan class yang melakukan proses register secara otomatis yang nantinya jika

proses registrasi selesai maka akan menampilkan web view yang sudah dibuat sebelumnya.

5. SCREENSHOT PROGRAM

Tampilan awal aplikasi SIPTIIK

Tampilan Home aplikasi yang

sekaligus mengarah ke Tab Academic Tampilan Tab Mahasiswa

Tampilan Tab Beasiswa

Tampilan Tab News

Tampilan detail salah satu posting

pada tab News

Tampilan ketika loading

Tampilan ketika ada notifikasi aplikasi

SIPTIIK

Tampilan ketika notifikasi aplikasi

SIPTIIK dibuka

Tampilan ketika menggunakan fungsi

search pada tab mahasiswa