Detail Cerita Share Cerita Search Cerita

b. Detail Cerita

a k t o r :ListFragment MainActivity :ContentFragment 1a. memilih satu Story 2. mengirim data Story yang dipilih 4. tampil detail story Storybean 1b. meneruskan pesan a k t o r ListFragment MainActivity 1a 1b 2 3 ContentFragment Storybean 3. mengambil isi cerita berdasarkan id yang dikirim 4a Model Analisis : Diagram Sequence : Gambar 3.16 Diagram Sequence Detail Cerita Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 ListFragment Controller Halaman yang menampilkan data cerita secara listing 3 ContentFragment Controller Halaman ini menampilkan detail cerita 4 StoryBean Entity Berfungsi menyimpan database cerita

c. Share Cerita

a k t o r :ContentFragment MainActivity 1. menekan tombol share 4. tampil daftar media sosial 2. memanggil fungsi share a k t o r MainActivity 1,5 ContentFragment 3. syncronisasi dengan media sosial 5. memilih media untuk berbagi 8. mengirim data pada media sosial 6. meminta data gambar dan judul 7. mengambil data 2 , 6 4, 8 3, 7 Model Analisis : Diagram Sequence : Gambar 3.17 Diagram Sequence Share Cerita Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 ContentFragment Controller Halaman ini menampilkan detail cerita d. Favorite Cerita a k t o r :ContentFragment 1. menekan tombol bintang 4. data tersimpan warna bntang berubah 2. mengirim id data cerita yang dipilih a k t o r Database Adapter 1 DatabaseHelper 2 ContentFragment Model Analisis : Diagram Sequence : 3. menyimpan id cerita pada table favorit 3 4 Gambar 3.18 Diagram Sequence Favorite Cerita Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 ContentFragment Controller Halaman ini menampilkan detail cerita 3 DatabaseAdapter Entity Kelas ini berfungsi menyimpan dat yang difavoritkan

e. Search Cerita

a k t o r :ListFragment MainActivity StoryBean 1a. menekan tombol search 3. tampil text field kosong 1b. mengirim pesan a k t o r ListFragment MainActivity 1a, 4 1b , 5 8 Storybean 6. mencocokan kata kunci dengan data 2. memanggil fungsi search 4. memasukan kata kunci 5. mengirim kata kunci 7. mencari data 8. tampil data pencarian 3 6 2 7 Diagram Sequence : Gambar 3.19 Diagram Sequence Search Cerita Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 ListFragment Controller Halaman yang menampilkan data cerita secara listing 3 StoryBean Entity Berfungsi menyimpan database cerita f. Lokasi Cerita a k t o r :ContentFragment MainActivity :MapsFragment 1a. menekan tombol maps 2. mengirim data longitude dan latitude 4. tampil penunjuk arah 1b. meneruskan pesan a k t o r ContentFragment MainActivity 1a 1b 2 MapsFragment 4 3. memanggil fungsi direction 3 Diagram Sequence : Gambar 3.20 Diagram Sequence Lokasi Cerita Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 ContentFragment Controller Halaman ini menampilkan detail cerita 3 MapsFragment Controller Halaman ini menampilkan peta lokasi berdasarkan data yang dimiliki

3.3.5.3 Sequence Diagram Nearby

a k t o r :MainFragment MainActivity :MapsFragment 1a. memilih menu Nearby 2. memanggil clas mapsfragment 4. tampil semua lokasi Storybean 1b. meneruskan pesan a k t o r MainFragment MainActivity 1a,5a 1b 5 b 2 3 MapsFragment Storybean 3. mengambil semua data longitude dan latitude 4,7 5a. memilih salah satu lokasi 5b. meneruskan pesan 7. tampilpenunjuk arah 6. memanggil fungsi directionpenunjuk arah 6 Diagram Sequence : Gambar 3.21 Diagram Sequence Nearby Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 MainFragment Controller Halaman Menu Utama untuk memilih menu 3 MapsFragment Controller Halaman ini menampilkan peta lokasi berdasarkan data yang dimiliki 4 StoryBean Entity Berfungsi menyimpan database cerita

3.3.5.4 Sequence Diagram About

a k t o r :MainFragment MainActivity :About 1a. pilih menu about 2. memanggil class About 3. tampil halaman About 1b. meneruskan pesan a k t o r MainActivity MainFragment About 1a 1b 2 3 Gambar 3.22 Diagram Sequence About Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 MainFragment Controller Halaman Menu Utama untuk memilih menu 3 About Interface Halaman Menu About berisi tentang informasi mengenai aplikasi LegendStory

3.3.5.5 Sequnce Diagram Help

a k t o r :MainFragment MainActivity :Help 1a. pilih menu Help 2. memanggil class Help 3. tampil halaman Help 1b. meneruskan pesan a k t o r MainActivity MainFragment Help 1a 1b 2 3 Gambar 3.23 Diagram Sequence Help Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 MainFragment Controller Halaman Menu Utama untuk memilih menu 3 About Interface Halaman Menu Help berisi tentang penjelasan aplikasi

3.3.5.6 Sequence Diagram Pilih Bahasa

a k t o r :MainFragment MainActivity :SettingDialog 1a. menekan tombol setting 2. memanggil class Setting 3a. tampil pilihan bahasa :Setting 4a. pilih bahasa yang dimau 5. mengubah bahasa sesuai pilihan 6a. tampil menu utama dengan bahasa yang dipilih 1b. meneruskan pesan 4b .meneruskan pesan 3b .meneruskan pesan 6b .meneruskan pesan a k t o r MainFragment MainActivity 1a,4a 1b, 4b 2 5 3a 3b ,6 b 6a SettingDialog Setting Model Analisis : Diagram Sequence : Gambar 3.24 Diagram Sequence Pilih Bahasa Legend Story No Nama Kelas Tabel Tipe Deskripsi 1 MainActivity Interface Kelas ini sebagai penghubung antara user dengan activity yang dimau 2 MainFragment Controller Halaman Menu Utama untuk memilih menu 3 SettingDialog Interface Kelas ini menampilkan pop-up berupa radiobutton untuk memilih bahasa 4 Setting Entity Pengaturan bahasa yang dipakai dalam aplikasi 3.3.6 Class Diagram Class diagram merupakan banyaknya class yang ada pada pembuatan aplikasi ini yang menjelaskan hubungan-hubungan antara satu class dengan class yang lainnya. Berikut ini adalah class diagram yang digunakan untuk menggambarkan struktur kelas yang ada pada aplikasi ini: Storybean Api PHP SplashFragment DatabaseAdapter DatabaseHelper ContentFragment MainFragment MainActivity MapsFragment ListFragment About Setting DirectionManager GoogleDirection PicassoTarget Help SettingDialog Gambar 3.25 Diagram Kelas Legend Story

3.3.7 Topologi Sistem

Topologi sistem adalah perancangan untuk mengetahui komponen apa saja yang diperlukan untuk membangun sistem. Komponen yang diperlukan untuk membangun aplikasi ini adalah web server yang nanti akan terhubung dengan aplikasi menggunakan internet, database server yang memiliki atribut yaitu id , title , images , body_ing , body_ind ,address ,latitude , longitude dan juga database lokal adalah semua data yang di ambil oleh database lokal saat menginstall aplikasi pada smartphone sehingga memiliki arsitektur yang sama dengan database server. Berikut adalah gambaran dari topologi sistem yang akan dibangun: Gambar 3.26 Topologi Sistem Legend Story

3.3.8 Perancangan Tampilan Interface

Desain antarmuka interface adalah desain masukan input yang akan digunakan untuk memasukan data ke dalam sistem.  Rancangan Tampilan Splash Screen Tampilan pembuka dari aplikasi ini berupa splash screen yang berjalan selama beberapa detik . saat splash screen ini berjalan maka secara otomatis sistem akan mengambil data dari server Gambar 3.27 Desain Splash Screen Legend Story  Rancangan Tampilan Menu Utama Rancangan tampilan menu utama ini adalah tampilan dimana user dapat memilih berbagai pilihan menu yang ada sesuai keingingan, seperti menu story dengan menekan tombol story , menu nearby dengan menekan tombol nearby , menu favorite SPLASH dengan menekan tombol favorite , menu help dengan menekan tombol help dan menu about dengan tombol about Gambar 3.28 Desain Menu Utama Legend Story  Rancangan Tampilan Menu Story Rancangan tampilan menu story ini adalah tampilan dimana user dapat memilih user dapat memilih story dari daftar list story Gambar 3.29 Desain Menu Story Legend Story Legend Story 1 2 3 4 5 1. STORY 2. NEARBY 3. FAVORITE 4. HELP 5. ABOUT Legend Story JUDUL STORY JUDUL STORY JUDUL STORY JUDUL STORY JUDUL STORY  Rancangan Tampilan Detail Story Rancangan tampilan detail story adalah tampilan dimana user menampilkan semua data story yang ada , selain itu user dapat mengetahui lokasi dengan menekan tombol maps , menandai story yang disukai dengan menekan tombol favorite , dan membagi cerita dengan menekan tombol share Gambar 3.30 Desain Detail Story Legend Story Legend Story GAMBA R DETAIL STORY FAVORI T MAP S SHAR E  Rancangan Tampilan Nearby Rancangan tampilan nearby adalah tampilan dimana user menampilan semua lokasi story yang ada di server , user juga dapat menuju lokasi yang dituju dengan menekan salah satu lokasi yang dituju Gambar 3.31 Desain Nearby Legend Story  Rancangan Tampilan Penunjuk Arah Rancangan tampilan penunjuk arah ini digunakan user untuk mengetahui penunjuk arah ke lokasi yang di tuju Legend Story PETA Gambar 3.32 Desain Petunjuk Arah Legend Story  Rancangan Tampilan Favorite Rancangan tampilan favorite adalah tampilan dimana user menampilan data story yang ditandai oleh user Gambar 3.33 Desain Favorite Legend Story Legend Story JUDUL STORY JUDUL STORY Legend Story PETA = lokasi user = lokasi wisata  Rancangan Tampilan Help Rancangan tampilan menu help adalah tampilan untuk menjelaskan fungsi-fungsi icon dalam aplikasi Gambar 3.34 Desain Help Legend Story  Rancangan Tampilan About Rancangan tampilan menu about adalah tampilan mengenai informasi tentang aplikasi ini. Gambar 3.34 Desain About Legend Story Legend Story LEGENDSTORY DEVELOPED BY AMELIA ENDAH Legend Story Icon keterangan Icon keterangan Icon keterangan Icon keterangan 76 BAB IV IMPLEMENTASI dan PEMBAHASAN

4.1 Implementasi