Tutorial Android & React Native Aplikasi Android Sistem Informasi DesaKu · Bab 13 dari 20

Membuat Aplikasi Android Sistem Informasi DesaKu - Part 13

Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 13, jadi jika anda belum mengikuti Tutorial Part 12 [/membuat-aplikasi-android-sistem-informasi-desaku-part-12/] diharapkan anda untuk mengikuti Tutorial Part 12 [/membuat…

Oleh Wandi Pratama

15 Desember 2019 5 menit baca

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

Pada Tutorial Part 12 kita menambahkan code php pada file koneksi.php dan list* kemudian kita juga telah menambahkan data - data pada database secara manual. Pada Tutorial Part 13 ini kita akan membuat tampilkan untuk Daftar DesaKu.

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

Buka Project Dengan Visual Studio Code

Setelah masuk ke dalam folder src/navigasi kemudian klik file index.js

index.js

Kemudian code pada file index.js tersebut lakukan perubahan code seperti berikut, anda bisa lihat pada gambar di bawah ini.

Bagian Code Awalnya seperti ini

Artikel_DesaKU : Artikel_DesaKU,
Daftar_DesaKu : Daftar_DesaKu,
Suara_DesaKu : Suara_DesaKu,
Wisata_DesaKu : Wisata_DesaKu

Bagian Code Awalnya

Setelah dilakukan perubahan pada code tersebut, code nya seperti berikut ini.

Artikel_DesaKU: {
    	screen: Artikel_DesaKU,
    	 navigationOptions: () => ({
                title:'Artikel DesaKu'
              }),
    },
    Daftar_DesaKu: {
    	screen: Daftar_DesaKu,
    	 navigationOptions: () => ({
                title:'Daftar DesaKu'
              }),
    },
    Suara_DesaKu: {
    	screen: Suara_DesaKu,
    	 navigationOptions: () => ({
                title:'Suara DesaKu'
              }),
    },
    Wisata_DesaKu: {
    	screen: Wisata_DesaKu,
    	 navigationOptions: () => ({
                title:'Wisata DesaKu'
              }),
    },

Perubahan Code index.js

Untuk lebih jelasnya perhatikan gambar berikut ini

Perubahan Code index.js

Setelah dilakukan perubahan code tersebut jangan lupa untuk menyimpan hasil perubahan code tersebut. Sekarang kita akan membuat tampilan pada Fitur Daftar DesaKu, langsung saja ikuti langkah - langkah berikut ini.

Buka file Daftar_DesaKu.js yang berada di dalam folder src/screen, berikut tampilan code nya.

Daftar 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

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

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

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

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_Daftar_DesaKu()
    }

componentDidMount

Setelah membuat sebuah fucntion componentDidMount seperti berikut codenya

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

FlatListItemSeparator

Setelah membuat sebuah fucntion _onRefresh seperti berikut codenya.

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

Fuction _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

Setelah membuat sebuah fucntion renderItems seperti berikut codenya.

renderItems = ({ item }) => {
        const { id, nama_desaku, lokasi_desaku, photo_desaku, maps_desaku } = item
        return (
            <View style={styles.containerList}>
                <View style={styles.conGambar}>
                    <Image source={{ uri: photo_desaku }} style={styles.gmbr} />
                </View>
                <View style={styles.note}>
                    <Text style={styles.judul}>{nama_desaku}</Text>
                    <Text style={styles.text}>{lokasi_desaku}</Text>
                    <Text style={styles.textPetujukArah} onPress={() => Linking.openURL(maps_desaku)}> Petujuk Arah </Text>
                </View>
            </View>
        )
    }

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

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'
    },
    text:{
        fontSize: 10
    },
    textPetujukArah:{
        fontSize:  20,
        color:'#fff'
    }
  
})

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 Daftar_DesaKu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            isLoding: true,
            refreshing: false
        }
    }

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

    componentDidMount() {
        this.List_Daftar_DesaKu()
    }

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

    _onRefresh() {
        this.setState({ refreshing: true });
        this.List_Daftar_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_desaku, lokasi_desaku, photo_desaku, maps_desaku } = item
        return (
            <View style={styles.containerList}>
                <View style={styles.conGambar}>
                    <Image source={{ uri: photo_desaku }} style={styles.gmbr} />
                </View>
                <View style={styles.note}>
                    <Text style={styles.judul}>{nama_desaku}</Text>
                    <Text style={styles.text}>{lokasi_desaku}</Text>
                    <Text style={styles.textPetujukArah} onPress={() => Linking.openURL(maps_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'
    },
    text:{
        fontSize: 10
    },
    textPetujukArah:{
        fontSize:  20,
        color:'#fff'
    }
  
})
export default Daftar_DesaKu;

Code Lengkap

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

Daftar DesaKu

Demikian untuk Tutorial Part 13 ini akan kita lanjutkan pada Tutorial Part 14,

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 15 Desember 2019.

Bagikan WhatsApp Telegram X

Tentang penulis

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

Tulisan lainnya

Membuat Aplikasi Android Sistem Informasi DesaKu - Part 13

Tentang penulis

Terkait

Basic React Native Part 30 - React Native Share API

Basic React Native Part 29 - React Native AsyncStorage

Basic React Native Part 28 - React Native Copy to Clipboard