63
BAB III ANALISIS DAN PERANCANGAN SISTEM
3.1
Analisis Sistem Pada bab ini akan dijelaskan tentang analisis dan perancangan aplikasi yang akan
dikembangkan. Langkah-langkah yang diuraikan dalam analisis
dan perancangan ini
adalah proses analisis kebutuhan yang terdiri dari analisis fungsional, deskripsi kebutuhan, analisis pengguna , permodelan yang akan dibangun dengan menggambarkan diagramdiagram serta perancangan navigasi serta interface aplikasi tersebut. Analisis model yang dipakai pada pembuatan Aplikasi Ensiklopedia Sejarah Peradaban Islam berbasis Android yaitu menggunakan Analisis Berorientasi Objek atau Object Oriented Analysis (OOA). Analisis Berorientasi Objek yaitu yaitu tahapan untuk menganalisis spesifikasi atau kebutuhan akan system yang akan dibangun dengan konsep berorientasi objek, apakah benar kebutuhan yang ada dapatdiimplementasikan menjadi sebuah system berorientasi objek (M. Salahudin, dan Rosa AS, 2011: 96). 3.1.1 Analisis Fungsionalitas Analisis fungsional merupakan pemaparan mengenai fitur-fitur yang terdapat pada aplikasi. Adapun fitur-fitur tersebut yang menjadi spesifikasi kebutuhan pada aplikasi tersebut diantaranya : a.
Menyediakan fasilitas untuk memberikan pengetahuan secara luas terhadap sejarah terutama sejarah peradaban islam.
b.
Menyediakan fasilitas menampilkan daerah-daerah peradaban islam diselruh dunia.
c.
Menyediakan fasilitas secara maping agar dapat mengetahui tempat / daerah peradaban islam.
64
d.
Menyediakan fasilitas fitur untuk mengetahui tokoh-tokoh islam pada peradaban islam.
3.1.2 Analisis Kebutuhan Aplikasi yang akan dibuat mengacu pada pemodelan sistem seperti di atas. Dalam pembuatan aplikasi ini dibutuhkan aspek pendukung, yaitu perangkat keras (hardware), perangkat lunak (software), dan pengguna (brainware). a. Perangkat Keras (Hardware) Perangkat keras yang digunakan untuk membuat program dan simulasi pada emulator menggunakan komputer dengan spesifikasi sebagai berikut. 1.Compaq 510 2.Intel(R)Core(TM) 2DuoCPU
[email protected] (2 CPUs), 2.0GHz 3. RAM 2 GB 4.Harddisk 350Gb 5. OS Windows 7 Sedangkan untuk simulasi pada telepon selular dibutuhkan perangkat dengan spesifikasi mínimum sebagai berikut. 1. Processor 600 MHz 2. Resolusi layar 320 x 480 piksel 3. Memori internal 400 MB 4. Android OS 2.3 ( Gingerbread ) 5. GSM/CDMA/3G/WLAN b. Perangkat Lunak (Software) Pembuatan
pemodelan sistem,pembuatan
membutuhkan perangkat lunak sebagai berikut. 1. Java SE Development Kit versi 1.7 2. Android Software Development Kit (SDK). 3. IDE Eclipse Juno 4. Android Development Tools (ADT). 5. SQLite Database.
program
dan
simulasi
65
c. Pengguna / User (Brainware) Pengguna (user) aplikasi Ensiklopedia Sejarah Peradaban Islam memerlukan kriteria sebagai berikut: 1. User mengenal aplikasi yang dioperasikan pada sistem operasi android User terbiasa menggunakan aplikasi yang dioperasikanpadasistemoperasi android. 2. Administrator adalah orang yang mempunyai hak akses sepenuhnya atas controll baik di sisi client maupun di sisi server. 3.1.3 Karakteristik Pengguna Aplikasi ini dapat digunakan oleh siapa saja yang menggunakan mobile phone atau smartphone yang berbasis Android dengan tujuan untuk membantu user mengetahui sejarah peradaban islam dan informasi tempat-tempat / daerah-daerah peradaban islam yang ada di dunia dengan cepat dan mudah. Adapun karakteristik pengguna dalam pengguaan aplikasi ini sebagai berikut : Tabel 3.1 Karakteristik Pengguna No
Nama Pengguna
Layanan
1
User
-
Kemampuan
Dapat
mengetahui - Mampu
perjalanan
tokoh-tokoh
mengoprasikan
aplikasi disisi client secara
islam zaman dulu untuk
keseluruhan
menyiarkan ajaran islam -
Dan
dapat
mengetahui
penemuan-penemuannya 2.
Administrator
-
Dalam admin
aplikasi
client
mempunyai
-
Mampu mengoprasikan aplikasi baik disisi client
layanan yang sama dengan
maupun
disisi
server
user
sebagai hak akses full.
66
3.1.4 Perancangan 3.1.4.1 Perancangan Sistem Dalam
pembuatan
aplikasi
ini
dibutuhkan
perancangan
sistem
dengan
menggambarkan sebuah sistem kedalam bahasa pemodelan seperti : user case diagram, activiti diagram, squence diagram, class diagram dan perancangan antarmuka (interface). 3.1.4.1.1 Arsitektur Sistem a. Arsitektur Aplikasi Menyeluruh
Gamabar 3.1 Arsitektur Sistem Aplikasi Menyeluruh
67
b.
Arsitektur Akses Basis Data Dengan Objek JSON
SERVER CLIENT
JAVA
PHP SQL
HttpRequest internet
JSON
Database
Gamabar 3.2 Arsitektur Akses Basis Data Dengan Objek JSON
c. Arsitektur Boundary System Aplication System Boundary
SQL
Aplikasi (JAVA) user
Internet HttpRequest
API => PHP encode to JSON
Database
Control Panel
Admin
Gamabar 3.3 Arsitektur Boundary System
68
3.1.4.1.2 Use Case Diagram Use case diagram merupakan gambaran skenario dari interaksi antar user dengan sistem. Sebuah diagram use case menggambarkan hubungan antara aktor dan kegiatan apa yang dapat dilakukan terhadap aplikasi. 3.1.4.1.2.1 Use Case Diagram Secara Umum uc Use Case Model Proses Maping Tempat Bersej arah
Materi Bahasan
«include»
foto Tokoh Islam «extend»
«include»
«extend» «include»
«extend»
nama Materi
«extend»
Kata Bij ak
About User
Exit
Gambar 3.5 Use Case Diagram secara umum Pada diagram di atas terdiri dari 1 aktor dan 7 use case. Dalam diagram ini terdapat sebuah extend dan include. Exetend menunjukan bahwa satu use casemerupakan tambahan fungsional dari use case lain jika kondisi tertentu dipenuhi. Alur ini dimulai ketika pengguna memulai menjalankan aplikasi Ensiklopedia, dan aplikasi akan mengolah peringtah yang dipilih oleh pengguna yakni memilih categoricategori yang ada dalam menu utama. Dalam perintah tersebut aplikasi akan meminta menyambungkan ke internet untuk dapat mengakses data yang diinginkan. Sehingga aplikasi dapat menampilkan data sesuai yang diinginkan oleh user.
69
3.2 Perencanaan Perencanaan dilakukan untuk menggambarkan, merencanakan, dan membuat sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi dengan baik. Perencanaan ini merupakan hasil transformasi dari proses anilisis ke dalam perencanaan yang akan diimplementasikan. Hal yang utama dalam perencanaan adalah bahwa rancangan yang dibuat dapat dipergunakan dengan mudah oleh semua user. User ini tidak hanya seorang ahli yang dapat menggunakan aplikasi ini, namun orang awam pun dapat menggunakan aplikasi ini. Hal ini dikarenakan segmentasi aplikasi ini adalah untuk banyak orang. Selain itu, tentu saja yang perlu diperhatikan kinerja dari aplikasi yang dibuat sehingga dapat dipergunakan dalam waktu lama (long time). 3.2.1 Diagram Kelas (Class Diagram) Diagram kelas merupakan diagram yang menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan keadaan tersebut (metoda/fungsi). Pada dasarnya, kelas diagram juga menggambarkan struktur dan deskripsi kelas, package, dan objek beserta hubungan satu sama lain seperti pewarisan, asosiasi, dan lain-lain. 3.2.1.1 Package Diagram Sisi Client class Class skripsi.ozan.ensiklopedispi + AboutActi vity - DownloadJSON skripsi.ozan.materi
+ loadSi ngl eView
skripsi.ozan.connect
+ Mai nActi vi ty
+ Adapter + ConnectionDetector
+ bab1
+ SingleItemViewActi vi ty
«import»
«i mport»
+ SplashActivi ty
+ JSONParser
+ T empatActivi ty + T okohActi vity
«import»
skripsi.ozan.data
«i mport»
skripsi.ozan.loader
+ dataMateri
~ Bitm apDi spl ayer
+ DataT okoh
+ FileCache
+ JSONParser
+ ImgLoader + MemoryCache ~ PhotosLoader - PhotoT oLoad + Uti l s
Gambar 3.6 Package Diagram
+ bab2
70
3.2.1.2 Class Diagram Connect class skripsi.ozan.connect BaseAdapter Adapter ~ ~ ~ ~
context: Context data: ArrayList
> imageLoader: ImgLoader inflater: LayoutInflater
+ + + + +
Adapter(Context, ArrayList>) getCount() : int getItem(int) : Object getItemId(int) : long getView(int, View, ViewGroup) : View
JSONParser
ConnectionDetector -
_context: Context
+
+ +
ConnectionDetector(Context) isConnectingToInternet() : boolean
getJSONfromURL(String) : JSONObject
Gambar 3.7Class Diagram Connect 3.2.1.3 Class Diagram Data class skripsi.ozan.data
dataMateri -
materi: String
+ +
getMateri() : String setMateri(String) : void
DataTokoh ~
bahasan: String
+ +
getBahasan() : String setBahasan(String) : void
JSONParser ~ ~ ~
is: InputStream = null jObj: JSONObject = null json: String = ""
+ +
getJSONFromUrl(String) : JSONObject JSONParser()
Gambar 3.8 Class Diagram Data
71
3.2.1.4 Class Diagram Ensiklopedia class skripsi.ozan.ensiklopedispi Activity AboutActiv ity # +
onCreate(Bundle) : voi d onCreateOptionsMenu(Menu) : bool ean
Activity
Acti vi ty
TokohActiv ity
Activity OnClickListener
SingleItemView Activ ity
~ ~ + + ~ ~ ~ ~ +
adapter: Adapter arraylist: ArrayList> BAHASAN: Stri ng = "bahasan" FOT O: Stri ng = "foto" j sonarray: JSONArray j sonobject: JSONObject l istview: ListView mProgressDi alog: ProgressDi al og NAMA: String = "nama"
+ +
checkInternetConnecti on() : boolean onCreate(Bundl e) : void
~ ~ ~ ~
bahasan: String bmImg: Bitmap = null mProgressDialog: ProgressDialog nama: String
#
onCreate(Bundle) : voi d
MainActiv ity ~
i: Intent
+ # +
onCl ick(Vi ew) : void onCreate(Bundle) : voi d onCreateOpti onsMenu(Menu) : bool ean
AsyncTask Dow nloadJSON # # #
AsyncTask loadSingleView
doInBackground(Voi d) : Voi d onPostExecute(Void) : voi d onPreExecute() : voi d
# # #
doInBackground(Stri ng) : String onPostExecute(String) : void onPreExecute() : voi d
Acti vi ty SplashActiv ity
Activi ty TempatActiv ity #
onCreate(Bundle) : void
# # ~
_active: bool ean = true _splashTime: i nt = 1000 spl ashTread: Thread
+ +
onBackPressed() : void onCreate(Bundle) : voi d
Gambar 3.9 Class Diagram Ensiklopedia 3.2.1.5 Class Diagram Loader class skripsi.ozan.loader
FileCache -
cacheDir: File
+ clear() : void + FileCache(Context) + getFile(String) : File
MemoryCache ~fileCache
ImgLoader ~ ~ ~ ~ ~
executorService: ExecutorService fileCache: FileCache handler: Handler = new Handler() imageViews: Map = Collections... memoryCache: MemoryCache = new MemoryCache() stub_id: int = R.drawable.no_img {readOnly}
+ + ~ + -
clearCache() : void decodeFile(File) : Bitmap DisplayImage(String, ImageView) : void getBitmap(String) : Bitmap imageViewReused(PhotoToLoad) : boolean ImgLoader(Context) queuePhoto(String, ImageView) : void
~memoryCache
-
cache: Map<String, Bitmap> = Collections... limit: long = 1000000 size: long = 0 TAG: String = "MemoryCache" {readOnly}
+ + ~ + + +
checkSize() : void clear() : void get(String) : Bitmap getSizeInBytes(Bitmap) : long MemoryCache() put(String, Bitmap) : void setLimit(long) : void
Utils + CopyStream(InputStream, OutputStream) : void PhotoToLoad + imageView: ImageView Runnable ~photoToLoad + url: String BitmapDisplayer ~ bitmap: Bitmap ~ photoToLoad: PhotoToLoad
~photoToLoad
+ PhotoToLoad(String, ImageView) Runnable PhotosLoader
+ BitmapDisplayer(Bitmap, PhotoToLoad) + run() : void
~ photoToLoad: PhotoToLoad ~ PhotosLoader(PhotoToLoad) + run() : void
Gambar 3.10 Class Diagram Loader
72
3.2.1.6 Class Diagram Materi class skripsi.ozan.materi Activity bab1 ~ -
data_materi: JSONArray = null TAG_DAT A: String = "data_materi" {readOnly} TAG_MATERI: String = "materi" {readOnly} url: String = "http://skripsi...
#
onCreate(Bundle) : void
Activity bab2 ~ -
data_materi: JSONArray = null TAG_DAT A: String = "data_materi" {readOnly} TAG_MATERI: String = "materi" {readOnly} url: String = "http://skripsi...
#
onCreate(Bundle) : void
Gambar 3.11 Class Diagram Materi Berikut ini adalah penjelasan dari kelas, atribut, dan method yang disajikan dalam bentuk tabel yang merupakan deskripsi dari kelas diatas, digmbarkan pada tabel berikut: Tabel 3.1 Deskripsi, Atribut dan Method di Sisi Client No
Nama Kelas
Atribut
Method
1
SplashActivity
onCreat(Bundle):void onBackPressed():void
2.
MainActivity
Active=true; splashTime=1000; splashTread; Inten i;
3.
TokohActivity
JSONObject jsonobject; JSONArray jsonarray; ListView listview; progressDialog mProgressDialog; ArrayList String NAMA=”nama”; String FOTO=”foto”;
onCreat(Bundle):void
4.
AboutActivity
onCreate(Bundle savedInstanceState) onCreateOptionsMenu onClik(View v)
onCreat(Bundle):void onCreatOptionsMenu(Men u):void
73
No
Nama Kelas
Atribut
Method
5.
SingleItemViewActivity
onCreate(Bundle):void
6.
JSONParser
7.
Adapter
8.
ImgLoader
bmlmg:Bitmap=null foto:String mProgressDialog:ProgressDialog nama:String InputStream is = null; String result= ""; JSONObject jArray = null; getJSONfromURL(String) Context context; LayoutInflater inflater; ArrayList> data; ImgLoader imageLoader; executeService: ExecutorService fileCache:FileCache handler:Handler=new Handler{} imageView:Map= Collection memoryCache:MemoryCache=newMemor yCache{} stub_id:int=R.drawable.no_img{readOnly }
9
dataMateri
materi: String
10
DataTokoh
Bahasan: String
11
JSONParser
Is: InputStream=null jObj:JSONObject=null json:String=””
getCount() getItem() getItemId() getView() clearCache():void decodeFile(File):Bitmap DisplayImage(String,Imag eView):void getBitmap(String):Bitmap imageViewReused(PhotoT oLoad):Boolean ImgLoader(Context) queuePhoto(String,Image View):void getMateri: String setMateri(String): void getBahasan(): String setBahasan(String): void getJSONFromUrl(String):J SONObject JSONParser()
3.2.2 Diagram Sequence (Sequences Diagram) Sequence diagram dipergunakan dalam menggambarkan interaksi antar objek pada sistem berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Diagram sequence digambarkan dalam tiga kondisi diamna masing-masing diagramnya menggambarkan dalam satu case tertentu. Berikut ini adalah gambar sequence diagram pada proses pengolahan data dalam aplikasi Ensiklopedia.
74
3.2.2.1 Diagram Squence Sisi Client 3.2.2.1.1
Mulai Aplikasi
sd sequence alt ensiklopedia Splash screen
MenuUtama
User buka aplikasi () menampilkan splash screen () gambar masukmenuutama() menuutama()
Gambar 3.12 Squence Mulai Aplikasi Pada squence diagram di atas menggambarkan alur pesan yang diberikan oleh sistem terhadap user kita memulai aplikasi. Dalam diagram tersebut user akan diberikna tampilan splashscreen diawal kemudian sistem akan mencoba masuk pada menu utama. 3.2.2.1.2
Memilih Menu
sd Squence alt ensiklopedia Menu Utama
koneksi
Server
user meli hat menu()
:menu() memi l ih menu(i d) request(id) :resul t()
sinkronisasi(i d)
:data()
Gambar 3.13 Squence Memilih Menu
75
Pada Squence Diagram di atas di gambarkan sebuah pengolahan data ketika user memilih salah satu konten yang tersedia di menu utama. Ketika user user memilih kontent maka sistem akan mencoba meminta data (retrive data) dari server berupa parsing JSON. Apabila proses retrive data sukses maka akan ditampilkan beberapa data yang diperulakan oleh user. Namun apabila proses retrive data gagal dilakukan maka data tidak akan ditampilkan. Kegagalan proses retrive bisa dikarnakan 2 hal, yaitu dikarnakan koneksi internet terputus atau request time out . 3.2.2.1.3
Materi Bahasan , Maps
sd Squence alt ensiklopedia Materi Pembahasan
Google Maps
data image view
Katabijak
User download:materi() :materi()
mencari materi() memilih materi() submit:google(lat)(longi) mapstempatbersejarah() download:imageview() :imageview() view() :veiw()
Gambar 3.14 Squence Materi Bahasan Maps and Image View
76
Pada squence diagram di atas di gambarkan ketika user ingin meminta menampilkan tempat-tempat bersejarah secara maps. Di dalam proses ketika user ingin meminta menampilkan maps maka aplikasi akan mencoba menghubungkan ke server GoogleMaps untuk meminta data yang dibutuhkan. Apabila akses ke server sukses dilakukan maka aplikasi akan menampilkan maps dan langsung akan di deraction ke tempat yang kita tentukan. Kemudian proses akan memberikan beberapa materi bahasan yang telah di download begitu pula dikonten image view setelah di download, user akan melihat beberapa tokoh islam dengan penemuannya. 3.2.2.2 Diagram Squence Sisi Server 3.2.2.2.1
Login
sd Squence alt ensiklopedia
user
Login Screen
Security Manager
DB
login(username , pass) validasi user(username, pass) cek user detail(user name , pass) :result()
validasi() :result()
:result()
Gambar 3.15 Squence Diagram Login Pada squence diagram di atas digambarkan proses login. Seorang user untuk dapat memasuki menu control panel dari server aplikasi Ensiklopedia akan di minta untuk login
77
terlebih dahulu untuk diidentifikasi dan di autentifikasi usernamedan password apakah sesuai dengan yang terdapat di database kemudian untuk menentukan role dari user tersebut apakah seorang administrator. 3.2.3 Diagram Aktivitas (Activity Diagram) Diagram Aktivitas digunakan untuk menggambarkan urutan aktivitas yang dilakukan dalam sistem, mulai dari awal terjadinya aliran aktivitas, percabangan akibat pengambilan keputusan, pengulangan, serta keberadaan aksi simultan/pararel. 3.2.3.1 Activity Diagram Sisi Client 1. Activity Diagram Mulai Aplikasi alt startapp Splashscreen Start
cekinternet
Menuutama [tidak]
[tidak]
ActivityFinal
Gambar 3.16 Activity Diagram Mulai Aplikasi Dalam gambar Activity diagram diatas dijelaskan alur aktivitas dimulai dengan membuka aplikasi terlebih dahulu. Setelah membuka aplikasi dan akan muncul splashscreen kemudian secara otomatis proses akan berlanjut kepada menu utama.
78
2. Activity Diagram Materi alt Materi ActivityInitial
Menuutama
Materi
[noconnect]
cekinternet
[connect]
Materibahasan
Babbahasan
ActivityFinal
Gambar 3.17 Activity Diagram Proses Masuk Konten Bab Bahasan Paga gambar tersebut dijelaskan ketika aplikasi sudah masuk dan ada di halaman menu utama kemudian memilih content yang tersedia. Setelah memilih salah satu diantara konten yang ada, maka aplikasi akan melakukan proses retrieving data dari server, apabila proses retrieve tersebut berhasil maka data yang diminta akan ditampilkan. Namun apabila
79
proses retrieve tidak dilakukan, maka data tidak akan muncul dan aplikasi akan dikembalikan ke halaman menu utama . 2. Activity Diagram Maps (Tempat) Di gambar dibawa ini akan ditampilka activity diagram untuk pemprosesan retrive data info tempat bersejarah. act Tempatbersej arah
User
Menuutama
Tempatbersej arah
[noconnect]
cekinternet Benua
Namanegara
Maps
ActivityFinal
Gambar 3.18 Activity Diagram Proses Mencari Maps Pada gambar activity diagram diatas dijelaskan ketika user sudah memasuki aplikasi dan berada di halaman menu utama, kemudian memilih menu tempat bersejarah. Setelah memilih menu tempat bersejarah, maka aplikasi akan memberikan pilihan menu
80
benua-benua dan jika user memilih salah satu benua, maka aplikasi akan menampilkan beberapa negara yang menjadi tempat bersejarah. 3. Activity Diagram Tokoh act Activ ity
Start
Menuutama
Tokoh
[noconnect]
CekKoneksi
fotopenamuan
ActivityFinal
Gambar 3.19 Activity Diagram Proses Mencari Tokoh Pada gambar activity diagram diatas, ketika user memasuki aplikasi dan sudah berada didalam halaman menu utama dan memilih menu tokoh. Setelah user memilih menu tokoh secara otomatis aplikasi akan mencoba melakukan proses pemanggilan data dari server. Apabila proses pemanggilan data berhasil maka aplikasi akan menampilkan beberapa gambar atau foto yang sudah tersedia oleh server ke aplikasi.
81
4. Activity Diagram Kata-kata Bijak act katabij ak
User
Menuutama
[noconnect] Katabij ak
cekkoneksi
kumpulankatabij ak
ActivityFinal
Gambar 3.20 Activity Diagram Proses Mencari Kata-kata bijak Dimana pada gambar diatas menunjukan bahwa user memilih menu utama dan memilih untuk melihat kata-kata bijak yang bisa jadi motivasi tersendiri bagi user.
82
3.2.3.2 Activity Diagram Server 1. Activity Diagram Login act login
Start
Login
[no connect] cek internet
[connected]
Menu Utama
Acti vityFinal
Gambar 3.21 Activity Diagram Login pada Server Pada gambar Activity Diagram di atas, menggambarkan proses login untuk masuk ke halaman contor panel administrator dari aplikasi Ensiklopedia dari disisi server. Admin akan di validasi username dan password-nya kemudian akan di identifikasi jenis akun yang digunakan. Apabila validasi login gagal maka akan di minta untuk mengulangi untuk memasukan username dan password yang valid. Apabila proses login sukses di validasi maka akan masuk ke halaman utama control panel administrator.
83
3.3.3 Flowchart (Bagan Aliran) Mulai Aplikasi
Pilih Menu
Ya
tidak
Menu Utama
No connect
Koneksi
connected
Form-form bahasan No connected
Akhiri ?
Selesai
Gambar 3.22 Flowchart Aplikasi Ensiklopedia
84
3.3.4 Perancangan DataBase Basis data digunakan untuk menyimpan data-data yang dibutuhkan oleh sebuah aplikasi untuk selanjutnya di olah sehingga dapat dijadikan sebagai informasi. Basis data yang dibuat pada sistem yang akan dibangun yaitu dengan menggunakan MySql. Berikut adalah table-tabel yang dibutuhkan pada sistem yang akan dibangun. 1. Tabel Materi Tabel 3.1 Tabel Materi NO
Field
Type
Null
1
Id
Int(2)
Tidak
2
materi
text
Tidak
3
bab
Varchar(50)
Tidak
Default
Ekstra
2. Tabel Tempat Peninggalan Tabel 3.2 Tabel Tempat Peninggalan NO
Field
Type
Null
1
Id
Int(10)
Tidak
2
Kota
Varchar(10)
Tidak
3
Latitude
Double
Tidak
4
Longitude
Double
Tidak
Default
Ekstra Auto_increment
3. Tabel Tokoh Tabel 3.3 Tabel Tokoh NO 1
Field Id
Type Int(10)
Null Tidak
Default
Ekstra Auto_increment
85
NO
Field
2
Type Foto
Null
Varchar(100)
3
Bahasan
text
4
Nama
Varchar(100)
Default
Ekstra
Tidak
4. Tabel Bijak Tabel 3.4 Tabel Bijak NO
Field
Type
Null
1
Id
Int(10)
Tidak
2
Kutipan
Varchar(10)
Tidak
3
Kata
Varchar(10)
Tidak
Default
Ekstra Auto_increment
3.3.5 Perancangan Antar Muka (Interface) Perancangan antarmuka adalah proses membuat perancangan form-form tampilan layar baik di sisi client maupun sisi server. Selain itu dalam proses ini juga ditentukan bentuk dan isi dokumen sumber untuk memasukan data yang kemudian diolah menjadi keluaran (output) yang dapat digunakan oleh pengguna. 3.3.5.1 Mockup a.
Perancangan antarmuka Splash Screen
Gambar
Gambar 3.23 Splash Screen
86
b.
Perancangan antarmuka Menu Utama
a b
c
d
e
Gambar 3.24 Menu Utama Diskripsi dan keterangan gambar : a. Nama Aplikasi b. Form Materi, terdapat beberapa list dalam form materi c. About, terdapat tampilan tentang developer d. Exit, untuk mengakhiri aplikasi e. Background c.
Perancangan antarmuka Form Materi a
b
c d e
Gambar 3.24 Menu Utama
87
Deskripsi dan keterangan gambar : a. Nama Form Utama b. Form Bahasan, didalamnya terdapat beberapa list materi bahasan c. Form Tempat Bersejarah, terdapat tempat-tempat bersejarah islam di dunia d. Form Tokoh Ilmuan Muslim,halaman yang menunjukan beberapa cendikiawan muslim pada zaman peradaban islam. e. Form Kata Bijak, user dapat mengambil atau memahami kata-kata bijak yang berada di form tersebut. e.
Perancangan antarmuka Form Tempat Bersejarah
a
b
c
d
e
Gambar 3.25 Tempat Bersejarah Deskripsi dan keterangan gambar diatas adalah: a.
Judul Form
b.
Form benua Asia, beberapa tempat bersejarah di negara yang berada di benua Asia.
c.
Form benua Eropa, beberapa tempat bersejarah di negara yang berada di benua Eropa.
88
d.
Form benua Afrika, beberapa tempat bersejarah di negara yang berada di benua Afrika.
e.
Form benua Amerika, beberapa tempat bersejarah di negara yang berada di benua Amerika.
f.
Perancangan antarmuka Form Tokoh Islam
a
b
c
Gambar 3.25 Tempat Bersejarah Deskripsi dan keterangan gambar diatas adalah:
g.
a.
Judul Form
b.
Nama Tokoh Muslim
c.
Foto Tokoh Muslim
Perancangan antarmuka Form Kata Bijak a
Deskripsi dan keterangan gambar dikiri adalah: a. Judul Form
b
b. Kumpulan-kumpulan kata bijak
Gambar 3.26 Kumpulan Kata Bijak
89
