Membuat Aplikasi Android Sistem Informasi DesaKu - Part 15
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

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 foldersrc/screen
, berikut tampilan code nya.

Baiklah sekarang lakukan perubahan code pada code import component dari react-native
- Awal code seperti ini
import {
View,
Text
} from 'react-native'
- Perubahan Code seperti ini
import {
View,
Text,
FlatList,
ActivityIndicator,
RefreshControl,
TouchableOpacity,
Image,
StatusBar,
StyleSheet,
Linking
} from 'react-native'

Setelah itu lakukan perubahan code pada code constructor
seperti berikut
- Awal code seperti ini
constructor(props) {
super(props);
this.state = { }
}
- Perubahan Code seperti ini
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_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
})
})
}

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

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

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>

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

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;
Perubahan code untuk fitur Daftar DesaKu
sudah selesai, berikut tampilan pada HP androidnya

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