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