Membuat Aplikasi Android Sistem Informasi DesaKu - Part 16

React Native Dec 16, 2019

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

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

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

Buka Project Dengan Visual Studio Code

Sebelum kita melakukan perubahan code pada File Artikel_DesaKu.js kita akan menampilkan Artikel DesaKu terlebih dahalu. Sekarang anda masuk ke dalam file Home.js untuk melakukan perubahan code. Ikutilah langkah - langkah berikut melalui gmabar di bawah ini.

90
Home

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

  • Awal code seperti ini
import {
  View,
  Text,
  StyleSheet,
  Image,
  StatusBar,
  YellowBox,
  TouchableOpacity
} from 'react-native'

Perubahan Code seperti ini

import {
  View,
  Text,
  StyleSheet,
  Image,
  StatusBar,
  YellowBox,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  RefreshControl,
  Linking
} from 'react-native'
Perubahan Code
91
Perubahan Code

Setelah itu lakukan penambahan code pada code constructor seperti berikut

constructor(props) {
        super(props);
        this.state = { 
            ------
            data:[],
            isLoding: true,
            refreshing: false
         }
    }
Tambahkan Code
92
Tambahkan 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_Artikel_DesaKu = () =>{
    return fetch('https://sisteminformasidesaku.000webhostapp.com/api/Artikel_DesaKu/list_artikel_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_Artikel_DesaKu()
    }
componentDidMount
94
componentDidMount

Setelah membuat sebuah fucntion componentDidMount seperti berikut codenya

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

Setelah membuat sebuah fucntion _onRefresh seperti berikut codenya.

_onRefresh(){
        this.setState({refreshing: true}) ;
         this.List_Artikel_DesaKu().then(() => {
           this.setState({
             refreshing: false
           })
         })
      }
Function _onRefresh
96
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
97
Function ListEmptyView

Setelah membuat sebuah fucntion renderItems seperti berikut codenya.

renderItems = ({ item }) => {
  const { id, title_artikel_desaku, tanggal_post_artikel_desaku, photo_artikel_desaku} = item
  return (
      <View style={styles.containerList}>
          <View style={styles.conGambar}>
              <Image source={{ uri: photo_artikel_desaku }} style={styles.gmbr} />
          </View>
          <View style={styles.note}>
              <Text style={styles.Judul}>{title_artikel_desaku}</Text>
              <Text style={styles.tgl}>{tanggal_post_artikel_desaku}</Text>
          </View>
      </View>
  )
}
Function renderItems
98
Function renderItems

Kemudian tambahkan code FlatList pada retrun, dan untuk posisinya anda bisa lihat digambar dibawah ini kemudian berikut code nya.

<View>
          <View style = {styles.Title}>
            <Text style={styles.jdlTitle}>Artikel DesaKu</Text>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Artikel_DesaKU')}>
            <Text style={styles.jdlTitle}>Lihat Semua</Text>
            </TouchableOpacity>
          </View>
                <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
99
Code Di retrun

Setelah itu tambahkan code styling berikut sebelum code styles

  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,
    },
    Judul:{
        fontSize: 18,
        fontWeight:'bold',
        color:'#fff'
    },
    tgl:{
        fontSize: 13,
        color:'#fff'
    },
    Title:{
      flexDirection:'row',
      justifyContent:'space-between'
    },
    jdlTitle:{
      fontSize:20,
      fontWeight:'bold'
    }
Code Styling

Untuk posisi peletakannya , anda bisa perhatikan gambar dibawah ini.

100
Code Styling

Berikut ini Code Lengkapnya untuk file Home.js

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

import Slideshow from 'react-native-slideshow';

const Icon_Admin = require('../assets/icon_admin.png')
const Daftar_DesaKu = require('../assets/Daftar_DesaKu.png')
const Suara_DesaKu = require('../assets/Suara_DesaKu.png')
const Wisata_DesaKu = require('../assets/Wisata_DesaKu.png')

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      position: 1,
      interval: null,
      dataSource: [
        {
          title: 'Matahari Terbit Pantai Samas',
          caption: 'Pandang Yang Indah',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-38-35.jpg?raw=true',
        }, {
          title: 'Ombak Pantai Samas',
          caption: 'Ombak Yang Membuat Tegang',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-01.jpg?raw=true',
        }, {
          title: 'Bersepeda dan Beristirahat',
          caption: 'Gegunung Krete Bantul Yogyakarta',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-06.jpg?raw=true',
        }, {
          title: 'Danau Yang Dengan Pemandangan Yang Indah',
          caption: 'Gegunung Krete Bantul Yogyakarta',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-42.jpg?raw=true',
        },
      ],
      data:[],
      isLoding: true,
      refreshing: false
    };
  }

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

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

  _onRefresh(){
    this.setState({refreshing: true}) ;
     this.List_Artikel_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, title_artikel_desaku, tanggal_post_artikel_desaku, photo_artikel_desaku} = item
  return (
      <View style={styles.containerList}>
          <View style={styles.conGambar}>
              <Image source={{ uri: photo_artikel_desaku }} style={styles.gmbr} />
          </View>
          <View style={styles.note}>
              <Text style={styles.Judul}>{title_artikel_desaku}</Text>
              <Text style={styles.tgl}>{tanggal_post_artikel_desaku}</Text>
          </View>
      </View>
  )
}


  componentWillMount() {
    this.setState({
      interval: setInterval(() => {
        this.setState({
          position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1
        });
      }, 5000)
    });
  }

  componentWillUnmount() {
    clearInterval(this.state.interval);
  }

  componentDidMount(){
    this.List_Artikel_DesaKu()
  }

  render() {
    YellowBox.ignoreWarnings([''])
    return (
      <View style={styles.Container}>
        <StatusBar backgroundColor='#009688' />
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
          <Image source={Icon_Admin} style={styles.img_style} />
        </View>
        <Slideshow
          dataSource={this.state.dataSource}
          position={this.state.position}
          onPositionChanged={position => this.setState({ position })}
        />
        <View style={styles.FiturLainnya}>
          <View style={styles.namaFiturLainnya}>
            <Text style={styles.textNamaFiturLainnya}>Fitur Lainnya</Text>
          </View>
          <View style={styles.buttonFiturLainnya}>
            <View style={styles.flex}>
              <View style={styles.flexContainer}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Daftar_DesaKu')}>
                <View style={styles.center}>
                <Image source={Daftar_DesaKu} style={styles.IconFitur} />
                <Text>Daftar DesaKu</Text>
                </View>
                </TouchableOpacity>
              </View>
              <View style={styles.flexContainer}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Suara_DesaKu')}>
                <View style={styles.center}>
                <Image source={Suara_DesaKu} style={styles.IconFitur} />
                <Text>Suara DesaKu</Text>
                </View>
                </TouchableOpacity>
              </View>
              <View style={styles.flexContainer}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Wisata_DesaKu')}>
                <View style={styles.center}>
                <Image source={Wisata_DesaKu} style={styles.IconFitur} />
                <Text>Wisata DesaKu</Text>
                </View>
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <View>
          <View style = {styles.Title}>
            <Text style={styles.jdlTitle}>Artikel DesaKu</Text>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Artikel_DesaKU')}>
            <Text style={styles.jdlTitle}>Lihat Semua</Text>
            </TouchableOpacity>
          </View>
                <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> 
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  Container: {
    flex: 1
  },
  MainContainer: {
    flexDirection: 'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical: 'center',
    marginLeft: 5
  },
  img_style: {
    height: 30,
    width: 30
  },
  FiturLainnya: {
    margin: 10
  },
  textNamaFiturLainnya: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  buttonFiturLainnya: {
    margin: 10,
  },
  flex: {
    flexDirection: 'row',
    justifyContent:'space-between'
  },
  flexContainer:{
    height:80,
    width:'30%',
    justifyContent:'center',
    alignItems:'center'
  },
  IconFitur: {
    height: 50,
    width: 50,
    borderRadius:15
  },
  center:{
    alignItems:'center'
  },

    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,
    },
    Judul:{
        fontSize: 18,
        fontWeight:'bold',
        color:'#fff'
    },
    tgl:{
        fontSize: 13,
        color:'#fff'
    },
    Title:{
      flexDirection:'row',
      justifyContent:'space-between'
    },
    jdlTitle:{
      fontSize:20,
      fontWeight:'bold'
    }
})

export default Home

Sekarang buka file Artikel_DesaKu.js yang berada di dalam folder src/screen, dan Hapus semua code yang ada kemudian Ganti dengan code berikut ini.

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

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

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

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

  _onRefresh(){
    this.setState({refreshing: true}) ;
     this.List_Artikel_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, title_artikel_desaku, tanggal_post_artikel_desaku, photo_artikel_desaku} = item
  return (
      <View style={styles.containerList}>
          <View style={styles.conGambar}>
              <Image source={{ uri: photo_artikel_desaku }} style={styles.gmbr} />
          </View>
          <View style={styles.note}>
              <Text style={styles.Judul}>{title_artikel_desaku}</Text>
              <Text style={styles.tgl}>{tanggal_post_artikel_desaku}</Text>
          </View>
      </View>
  )
}

  componentDidMount(){
    this.List_Artikel_DesaKu()
  }

  render() {
    return (
      <View style={styles.Container}>
        <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({
  Container: {
    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,
    },
    Judul:{
        fontSize: 18,
        fontWeight:'bold',
        color:'#fff'
    },
    tgl:{
        fontSize: 13,
        color:'#fff'
    },
    Title:{
      flexDirection:'row',
      justifyContent:'space-between'
    },
    jdlTitle:{
      fontSize:20,
      fontWeight:'bold'
    }
})

export default Artikel_DesaKu

Berikut Tampilan didalam aplikasi android nya

pwes
Tampilan Home

Kemudian ketika kita klik Lihat Semua maka akan ditampilan seperti berikut

psa
Lihat Semua

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

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin