Membuat Aplikasi Android Sistem Informasi DesaKu - Part 17

React Native • Dec 17, 2019

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/
Masuk ke Folder DesaKu
Masuk ke Folder DesaKu
Masuk ke Folder DesaKu
  • Setelah itu Jalankan perintah berikut untuk menginstal React Navigation  Tabs
sudo npm install --save react-navigation-tabs
Install React Navigation Tabs
102
Install 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.
103
Proses Instalasi
  • Jika proses install react-navigation-tabs sekarang kita buat folder page pada folder src/screen.
104
Buat Folder Page

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 file Admin_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;
Admin Artikel DesaKu
  • Buatlah file dengan nama Admin_Daftar_DesaKu.js kemudian tambahkan code berikut ini pada file Admin_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;
Admin Daftar DesaKu
  • Buatlah file dengan nama Admin_Wisata_DesaKu.js kemudian tambahkan code berikut ini pada file Admin_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;
Admin Wisata DesaKu
  • Buatlah file dengan nama Login_Admin_DesaKu.js kemudian tambahkan code berikut ini pada file Login_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;
Login Admin DesaKu
  • Buatlah file dengan nama Tambah_Artikel_DesaKu.js kemudian tambahkan code berikut ini pada file Tambah_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;
Admin Wisata DesaKu
  • Buatlah file dengan nama Tambah_Daftar_DesaKu.js kemudian tambahkan code berikut ini pada file Tambah_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;
Tambah Daftar DesaKu
  • Buatlah file dengan nama Tambah_Wisata_DesaKu.js kemudian tambahkan code berikut ini pada file Tambah_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;
Tambah Wisata DesaKu

Setelah beberapa File Component tersebut buat, maka anda akan melihat pada folder Page akan terdapat file tersebut.

105
File Component 

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)
Admin DesaKu

Sekarang Tambahkan data ke Admin_Desa didalam database secara manual, cara sudah dibahas pada Tutorial Part 12

Berikut Tampilan pada Aplikasi Android

106
Home

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

107
Login
108

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

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

Recommended for you

No results for your search, try something different.