Membuat Aplikasi Android Sistem Informasi DesaKu - Part 17
Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 17, jadi jika anda belum mengikuti Tutorial Part 16 diharapkan anda untuk mengikuti Tutorial Part 16 dahulu untuk memudahkan anda dalam memahami Tutorial Part 17 ini.
Pada Tutorial Part 16 sebelumnya menambahkan perubahan code php pada Artikel_DesaKu.php
kemudian kita juga telah melakukan testing langsung melihat hasil dari perubahan code ke aplikasi android dengan menjalankan server debug
. Pada Tutorial Part 17 ini kita akan melakukan perubahan dan membuat file componet yang baru untuk membuat Dashboard Admin DesaKu
.
Sebelum kita memulai membuat File Component
yang baru untuk Dashboard Admin DesaKu
, kita akan menginstall library tambahan dari react-navigation
yaitu kita akan menginstall library react-navigation-tabs
, dengan library ini akan tampilan Dashboard Admin DesaKu
dengan menu berbentuk Tab dibagian bawah.
Menginstall Library React Navigation Tabs dengan cara mengikuti langkah - langkah berikut ini.
- Pertama buka terminal kemudian masuk ke dalam folder project kita yaitu
DesaKu
cd DesaKu/

- Setelah itu Jalankan perintah berikut untuk menginstal
React Navigation Tabs
sudo npm install --save react-navigation-tabs

- Berikut merupakan proses install dan pastikan
Komputer atau Laptop
anda terkoneksi dengan internet, tunggu hingga selesai lama atau tidak nya tergantung kecepatan internet anda.

- Jika proses install
react-navigation-tabs
sekarang kita buat folderpage
pada foldersrc/screen
.

Setelah membuat Folder Page
sekarang buatlah beberapa file berikut ini dan tambahkan code pada masing file seperti pada langkah - langkah di bawah ini.
- Buatlah file dengan nama
Admin_Artkel_DesaKu.js
kemudian tambahkan code berikut ini pada fileAdmin_Artkel_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Admin_Artikel_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Admin_Artikel_DesaKu</Text>
</View>
);
}
}
export default Admin_Artikel_DesaKu;
- Buatlah file dengan nama
Admin_Daftar_DesaKu.js
kemudian tambahkan code berikut ini pada fileAdmin_Daftar_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Admin_Daftar_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Admin_Daftar_DesaKu</Text>
</View>
);
}
}
export default Admin_Daftar_DesaKu;
- Buatlah file dengan nama
Admin_Wisata_DesaKu.js
kemudian tambahkan code berikut ini pada fileAdmin_Wisata_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Admin_Wisata_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Admin_Wisata_DesaKu</Text>
</View>
);
}
}
export default Admin_Wisata_DesaKu;
- Buatlah file dengan nama
Login_Admin_DesaKu.js
kemudian tambahkan code berikut ini pada fileLogin_Admin_DesaKu.js
.
import React, { Component } from 'react';
import { StyleSheet,
TextInput,
View,
Alert,
Button,
Text,
Image,
Modal,
TouchableOpacity,
YellowBox,
AsyncStorage
} from 'react-native';
class Login_Admin_DesaKu extends Component {
constructor(props) {
super(props)
this.state = {
UserEmail: '',
UserPassword: ''
}
}
componentDidMount(){
AsyncStorage.getItem('admin').then(value => {
if (value != null) {
this.props.navigation.navigate('App')
}
})
}
UserLoginFunction = () =>{
const { UserEmail } = this.state ;
const { UserPassword } = this.state ;
fetch('https://sisteminformasidesaku.000webhostapp.com/api/Admin_DesaKu/login_admin_desaku.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username_admin_desaku: UserEmail,
password_admin_desaku: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
this.setState({ nama_lengkap: responseJson });
if(responseJson === 'Data Matched')
{
AsyncStorage.setItem('admin', this.state.nama_lengkap)
this.props.navigation.navigate('App', { Email: UserEmail });
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render() {
YellowBox.ignoreWarnings(['componentWillReceiveProps']);
return (
<View style={styles.MainContainerImage}>
<View styles={styles.MainContainerForm}>
<Text style= {styles.TextComponentStyle}>Admin DesaKu</Text>
<TextInput
placeholder="Masukan Nama"
onChangeText={UserEmail => this.setState({UserEmail})}
underlineColorAndroid='transparent'
autoCapitalize = 'none'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Masukan Password"
onChangeText={UserPassword => this.setState({UserPassword})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
</View>
<View style={styles.btnStyle}>
<TouchableOpacity onPress={this.UserLoginFunction}>
<Text>Login</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainerImage :{
flex:1,
justifyContent:'center',
margin: 10,
},
MainContainerForm :{
alignItems:'center',
justifyContent:'center',
margin: 10,
},
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
width: '80%',
borderWidth: 1,
borderColor: '#2196F3',
borderRadius: 5 ,
marginLeft:'10%'
},
TextComponentStyle: {
fontSize: 20,
color: "#000",
textAlign: 'center',
marginBottom: 15
},
styImage:{
height:100,
width:100,
borderRadius:30
},
styLogin:{
height:40,
width:40,
borderRadius:10,
},
btnStyle:{
alignItems:'flex-end',
marginRight:'10%'
},
});
export default Login_Admin_DesaKu;
- Buatlah file dengan nama
Tambah_Artikel_DesaKu.js
kemudian tambahkan code berikut ini pada fileTambah_Artikel_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Tambah_Artikel_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Tambah_Artikel_DesaKu</Text>
</View>
);
}
}
export default Tambah_Artikel_DesaKu;
- Buatlah file dengan nama
Tambah_Daftar_DesaKu.js
kemudian tambahkan code berikut ini pada fileTambah_Daftar_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Tambah_Daftar_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Tambah_Daftar_DesaKu</Text>
</View>
);
}
}
export default Tambah_Daftar_DesaKu;
- Buatlah file dengan nama
Tambah_Wisata_DesaKu.js
kemudian tambahkan code berikut ini pada fileTambah_Wisata_DesaKu.js
.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class Tambah_Wisata_DesaKu extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>Tambah_Wisata_DesaKu</Text>
</View>
);
}
}
export default Tambah_Wisata_DesaKu;
Setelah beberapa File Component tersebut buat, maka anda akan melihat pada folder Page
akan terdapat file tersebut.

Sekarang buka file Admin_DesaKu.js
yang berada pada folder src/screen
kemudian Hapus
semua code ada, setelah itu Ganti
dengan code berikut ini.
import {createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import WellcomeScreen from './Page/Login_Admin_DesaKu'
import Admin_Artikel_DesaKu from './Page/Admin_Artkel_DesaKu'
import Admin_Daftar_DesaKu from './Page/Admin_Daftar_DesaKu'
import Admin_Wisata_DesaKu from './Page/Admin_Wisata_DesaKu'
import Tambah_Artikel_DesaKu from './Page/Tambah_Artikel_DesaKu'
import Tambah_Daftar_DesaKu from './Page/Tambah_Daftar_DesaKu'
import Tambah_Wisata_DesaKu from './Page/Tambah_Wisata_DesaKu'
const AuthStackNavigator = createStackNavigator({
Wellcome : {
screen : WellcomeScreen,
navigationOptions: () => ({
header:null
}),
},
Tambah_Artikel_DesaKu : {
screen : Tambah_Artikel_DesaKu,
navigationOptions: () => ({
title:' Tambah Artikel DesaKu'
}),
},
Tambah_Daftar_DesaKu : {
screen : Tambah_Daftar_DesaKu,
navigationOptions: () => ({
title:'Tambah Daftar DesaKu'
}),
},
Tambah_Wisata_DesaKu : {
screen : Tambah_Wisata_DesaKu,
navigationOptions: () => ({
title:'Tambah Wisata DesaKu'
}),
},
})
const AppTabNavigator = createBottomTabNavigator({
Artikel : {
screen : Admin_Artikel_DesaKu,
navigationOptions: () => ({
title:'Artikel DesaKu'
}),
},
DesaKu : {
screen : Admin_Daftar_DesaKu,
navigationOptions: () => ({
title:'Daftar DesaKu'
}),
},
Wisata : {
screen : Admin_Wisata_DesaKu,
navigationOptions: () => ({
title:'Wisata DesaKu'
}),
}
})
const AuthSwitch = createSwitchNavigator({
Auth : AuthStackNavigator,
App: AppTabNavigator,
})
export default createAppContainer(AuthSwitch)
Sekarang Tambahkan data ke Admin_Desa didalam database secara manual, cara sudah dibahas pada Tutorial Part 12
Berikut Tampilan pada Aplikasi Android

Kemudian masukan username
dan password
sudah masukan secara manual kedalam database. Jika belum tau cara baca di Tutorial Part 12


Baiklah Demikian untuk Tutorial Part 17 kita akan lanjutkan Pada Tutorial Part 18.