Membuat Aplikasi Android Sistem Informasi DesaKu - Part 15

React Native • Dec 16, 2019

Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 15, jadi jika anda belum mengikuti Tutorial Part 14 diharapkan anda untuk mengikuti  Tutorial Part 14 dahulu untuk memudahkan anda dalam memahami Tutorial Part 15 ini.

Pada Tutorial Part 14 kita menambahkan perubahan code php pada Suara_DesaKu.php kemudian kita juga telah melakukan testing langsung melihat hasil dari perubahan code ke aplikasi android dengan menjalankan server debug. Pada Tutorial Part 15 ini kita akan membuat tampilkan untuk Wisata DesaKu.

Baiklah sekarang buka folder project yaitu DesaKu dengan menggunakan Visual Studio Code

Buka Project Dengan Visual Studio Code
Buka Project Dengan Visual Studio Code

Sekarang kita akan membuat tampilan pada Fitur Wisata DesaKu, langsung saja ikuti langkah - langkah berikut ini.

  • Buka file Wisata_DesaKu.js yang berada di dalam folder src/screen, berikut tampilan code nya.
77
Wisata DesaKu

Baiklah sekarang lakukan perubahan code pada code import component dari react-native

  • Awal code seperti ini
import {
    View,
    Text
} from 'react-native'
Awal code
  • Perubahan Code seperti ini
import { 
    View,
    Text,
    FlatList,
    ActivityIndicator,
    RefreshControl,
    TouchableOpacity,
    Image,
    StatusBar,
    StyleSheet,
    Linking
} from 'react-native'
Perubahan Code
wa
Perubahan Code

Setelah itu lakukan perubahan code pada code constructor seperti berikut

  • Awal code seperti ini
constructor(props) {
        super(props);
        this.state = {  }
}
Awal code
  • Perubahan Code seperti ini
constructor(props) {
        super(props);
        this.state = { 
            data:[],
            isLoding: true,
            refreshing: false
         }
    }
Perubahan Code
sss
Perubahan Code


Kemudian kita akan membuat sebuah function, function adalah digunakan untuk membungkus program menjadi bagian-bagian kecil. Buat dan letakan function setelah code constructor.

 List_Wisata_DesaKu = () =>{
        return fetch('https://sisteminformasidesaku.000webhostapp.com/api/Wisata_DesaKu/list_wisata_desaku.php')
          .then((response) => response.json())
          .then((responseJson) => {
            console.log(responseJson)
            this.setState({
              isLoding:false,
              data: responseJson
            })
          })
      }
Membuat Function
80
Membuat Function

Kemudian tambahkan code componentDidMount agar function nya dijalan otomatis ketika aplikasi dijalankan pada saat awal buka aplikasinya dan letakan code ini setelah code Function.

 componentDidMount(){
        this.List_Wisata_DesaKu()
    }
componentDidMount
81
componentDidMount

Setelah membuat sebuah fucntion componentDidMount seperti berikut codenya

FlatListItemSeparator = () => {
      return (
        <View
          style={{
            height: .5,
            width: "100%",
            backgroundColor: "#000",
          }}
        />
      );
    }
FlatListItemSeparator
82
FlatListItemSeparator

Setelah membuat sebuah fucntion _onRefresh seperti berikut codenya.

_onRefresh(){
        this.setState({refreshing: true}) ;
         this.List_Wisata_DesaKu().then(() => {
           this.setState({
             refreshing: false
           })
         })
      }
Function _onRefresh
83
Function _onRefresh

Setelah membuat sebuah fucntion ListEmptyView seperti berikut codenya.

 ListEmptyView = (isLoading = this.state.isLoading) => {
      if (isLoading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }else{
        return (
          <View>
            <Text style={{textAlign: 'center'}}> Tidak Ada Data.</Text>
          </View>
      );
    }
  }
Function ListEmptyView
84
Function ListEmptyView

Setelah membuat sebuah fucntion renderItems seperti berikut codenya.

renderItems = ({ item }) => {
        const { id, nama_wisata_desaku, lokasi_wisata_desaku, photo_wisata_desaku, maps_wisata_desaku } = item
        return (
            <View style={styles.containerList}>
                <View style={styles.conGambar}>
                    <Image source={{ uri: photo_wisata_desaku }} style={styles.gmbr} />
                </View>
                <View style={styles.note}>
                    <Text style={styles.Judul}>{nama_wisata_desaku}</Text>
                    <Text style={styles.jalan}>{lokasi_wisata_desaku}</Text>
                    <Text style={styles.arah} onPress={() => Linking.openURL(maps_wisata_desaku)}>Petujuk Arah </Text>
                </View>
            </View>
        )
    }
Function renderItems
85
Function renderItems

Kemudian tambahkan code FlatList dan StatusBar pada retrun, berikut code nya.

<View style={styles.maincontainer}>
                <StatusBar backgroundColor='#009688' />
                <FlatList
                    data={this.state.data}
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    keyExtractor={item => item.toString()}
                    renderItem={this.renderItems}
                    ListEmptyComponent={this.ListEmptyView}
                    refreshControl={
                        <RefreshControl refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh.bind(this)}
                        />
                    }

                />
            </View>
Code Di retrun
86
Code Di retrun

Setelah itu tambahkan code styling berikut sebelum code export default

const styles = StyleSheet.create({
    maincontainer:{
        flex:1
    },
    containerList:{
        margin:5,
        backgroundColor:'#009688',
        flexDirection:'row',
        borderRadius: 15
    },
    
    gmbr:{
        height: 100,
        width: 100,
        resizeMode:"center",
        borderRadius: 20
    },
    conGambar:{
        alignItems: 'center',
         width: 120,
         justifyContent:'center',
    },
    note:{
        width: 220,
        margin: 5,
    },
    Judul:{
        fontSize: 18,
        fontWeight:'bold',
        color:'#fff'
    },
    jalan:{
        fontSize: 13,
        color:'#fff'
    },
    arah:{
        fontSize:  20,
        color:'#fff',
        fontWeight:'bold'
    },
})
Code Styling
87
Code Styling

Berikut ini Code Lengkapnya

import React, { Component } from 'react';
import { 
    View,
    Text,
    FlatList,
    ActivityIndicator,
    RefreshControl,
    TouchableOpacity,
    Image,
    StatusBar,
    StyleSheet,
    Linking
} from 'react-native'

class Wisata_DesaKu extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:[],
            isLoding: true,
            refreshing: false
         }
    }

    List_Wisata_DesaKu = () =>{
        return fetch('https://sisteminformasidesaku.000webhostapp.com/api/Wisata_DesaKu/list_wisata_desaku.php')
          .then((response) => response.json())
          .then((responseJson) => {
            console.log(responseJson)
            this.setState({
              isLoding:false,
              data: responseJson
            })
          })
      }

    componentDidMount(){
        this.List_Wisata_DesaKu()
    }
    
    FlatListItemSeparator = () => {
        return (
          <View
            style={{
              height: .5,
              width: "100%",
              backgroundColor: "#000",
            }}
          />
        );
      }

      _onRefresh(){
        this.setState({refreshing: true}) ;
         this.List_Wisata_DesaKu().then(() => {
           this.setState({
             refreshing: false
           })
         })
      }

      ListEmptyView = (isLoading = this.state.isLoading) => {
        if (isLoading) {
          return (
            <View style={{flex: 1, paddingTop: 20}}>
              <ActivityIndicator />
            </View>
          );
        }else{
          return (
            <View>
              <Text style={{textAlign: 'center'}}> Tidak Ada Data.</Text>
            </View>
        );
      }
    }
    
    renderItems = ({ item }) => {
        const { id, nama_wisata_desaku, lokasi_wisata_desaku, photo_wisata_desaku, maps_wisata_desaku } = item
        return (
            <View style={styles.containerList}>
                <View style={styles.conGambar}>
                    <Image source={{ uri: photo_wisata_desaku }} style={styles.gmbr} />
                </View>
                <View style={styles.note}>
                    <Text style={styles.Judul}>{nama_wisata_desaku}</Text>
                    <Text style={styles.jalan}>{lokasi_wisata_desaku}</Text>
                    <Text style={styles.arah} onPress={() => Linking.openURL(maps_wisata_desaku)}>Petujuk Arah </Text>
                </View>
            </View>
        )
    }


    render() { 
        return ( 
            <View style={styles.maincontainer}>
                <StatusBar backgroundColor='#009688' />
                <FlatList
                    data={this.state.data}
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    keyExtractor={item => item.toString()}
                    renderItem={this.renderItems}
                    ListEmptyComponent={this.ListEmptyView}
                    refreshControl={
                        <RefreshControl refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh.bind(this)}
                        />
                    }

                />
            </View> 
         );
    }
}
const styles = StyleSheet.create({
    maincontainer:{
        flex:1
    },
    containerList:{
        margin:5,
        backgroundColor:'#009688',
        flexDirection:'row',
        borderRadius: 15
    },
    
    gmbr:{
        height: 100,
        width: 100,
        resizeMode:"center",
        borderRadius: 20
    },
    conGambar:{
        alignItems: 'center',
         width: 120,
         justifyContent:'center',
    },
    note:{
        width: 220,
        margin: 5,
    },
    Judul:{
        fontSize: 18,
        fontWeight:'bold',
        color:'#fff'
    },
    jalan:{
        fontSize: 13,
        color:'#fff'
    },
    arah:{
        fontSize:  20,
        color:'#fff',
        fontWeight:'bold'
    },
})
export default Wisata_DesaKu;
Code Lengkap

Perubahan code untuk fitur Daftar DesaKu sudah selesai, berikut  tampilan pada HP androidnya

phwassa
Tampilan Di Aplikasi Android

Demikian untuk Tutorial Part 15 ini akan kita lanjutkan pada Tutorial Part 16

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Recommended for you

No results for your search, try something different.