Membuat Aplikasi Android Sistem Informasi DesaKu - Part 16

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

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.

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'

Setelah itu lakukan penambahan code pada code constructor seperti berikut

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

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

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

Setelah membuat sebuah fucntion componentDidMount seperti berikut codenya

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

Setelah membuat sebuah fucntion _onRefresh seperti berikut codenya.

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

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>
      );
    }
  }

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

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> 

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'
    }

Untuk posisi peletakannya , anda bisa perhatikan gambar dibawah ini.

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

Kemudian ketika kita klik Lihat Semua maka akan ditampilan seperti berikut

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