BapakNgoding

Cara Mengkoneksikan PHP ke Microsoft Access (MS ACCESS)

2020-01-12T22:45:00.000+07:00

Halo teman-teman ngoding, kali ini BapakNgoding akan membagikan artikel lagi yang berbuhungan dengan PHP yaitu tentang "Cara Mengkoneksikan PHP ke Microsoft Access (MS ACCESS)",
mungkin banyak yang jarang menggunakan MS Acces dikarenakan menurut saya MS Access masih kalah populer dibandingkan DBMS lainnya, namun karena ini termasuk ilmu yang berguna maka tidak ada salahnya jika kita belajar ilmu tersebut bukan hehe...
namun sebelum itu kita harus tahu dulu apa itu PHP dan Microsoft Access yang akan dijelaskan di bawah.

➤PHP adalah singkatan dari "PHP Hypertext Prepocessor" dimana PHP adalah bahasa pemgrograman yang biasanya digunakan pada server side, untuk lebih jelasnya dapat kalian baca di sini Pengertian Bahasa PHP.

➤Microsoft Access atau yang bisa kita sebut MS ACCESS adalah sebuah aplikasi untuk memanajemen database yang dibuat oleh Microsoft

Nah sekarang jika kalian sudah tau apa itu PHP dan MS Access, langsung saja kita ke tutorialnya yaitu sebagai berikut:

Pastikan kalian sudah mempunyai MS Access
Buat Database baru dengan mengklik Blank database

Halaman utama pada MS Access
Setelah itu beri nama sesuka kalian, pada tutorial ini saya memberi nama "myDatabase.accdb"
Nah jika sudah sekarang buat table baru dengan nama master_guru lalu isi dengan field seperti pada gambar di bawah

Design table master_guru
Sekarang download XAMPP untuk 32 bit, jika kalian sudah punya maka gunakan yang sudah ada, INGAT HARUS VERSI 32 Bit MESKIPUN PC KALIAN ADA 64 BIT

Xampp 32 bit
Sekarang buka PHP (php.ini) dengan cara mengklik Config pada Apache kemudian pilih PHP

Config PHP di Xampp
Sekarang setelah file php.ini terbuka tambahkan kode di bawah tepat di daftar list setelah
-Many DLL....

extension=php_odbc.dll

File php.ini
Setelah itu start Apache pada XAMPP kalian

Start Apache
Sekarang download dan buka odbc versi 3.51 atau kalian dapat mendownloadnya di sini
Jika sudah buka odbc kalian dengan versi 32 bit dan klik MS Access Database dan pilih Add

Odbc 3.51
Kemudian pilih Microsoft Access Driver(*.mdb, *.accdb)
Setelah itu masukan data-data yang diminta seperti nama koneksi kalian, lokasi file MS Access kalian seperti gambar di bawah

Setting ODBC
Jika sudah klik Oke maka ditampilan awal odbc kalian akan keluar nama koneksi kalian sesuai Data Source Name yang kalian masukan tadi

Perhatikan akan keluar list baru sesuai nama pada Data Source Name
Sekarang konektor kita telah siap, sekarang saatnya kita membuat website php kita
Buat folder baru dengan nama tutorial_msaccess di dalam folder xampp/htdocs
Buat file koneksi.php di dalam folder tutorial_msaccess kalian kemudian copykan kode di bawah ini

<?php
$con=odbc_connect("myConnection","","");
?>
Catatan:

1. Pada tulisan yang saya beri warna merah adalah nama koneksi kita sesuai Data Source Name yang kalian masukan pada ODBC tadi
Sekarang buatlah file baru bernama tambah_guru.php yang akan kita buat untuk menambah data guru dan ketikan kode berikut

<?php
error_reporting(0);
include("koneksi.php");
if ($_POST["submit"]) {
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
$mapel = $_POST["mapel"];
$tgl_lahir = $_POST["tgl_lahir"];
$query = "INSERT INTO master_guru(nama,mapel,alamat,tanggal_lahir)VALUES('$nama','$alamat','$mapel','$tgl_lahir')";
odbc_exec($con, $query);
}
?>

<head>
<title>Tambah Guru</title>
<h2>Tambah Guru</h2>
</head>
<a href='daftar_guru.php'>Tambah Guru</a>
<form method="post" action="">
<table>
<tr>
<td>Nama</td>
<td><input type='text' name='nama'></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type='text' name='alamat'></td>
</tr>
<tr>
<td>Mapel</td>
<td><input type='text' name='mapel'></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td><input type='date' name='tgl_lahir'></td>
</tr>
</table>
<input type='submit' name='submit' value='Simpan'>
</form>
Setelah itu buatlah file lagi bernama daftar_guru.php untuk melihat data guru kemudian ketikan kode berikut

<?php
include("koneksi.php")
?>
<style>
th, td {
padding: 10px;
}
</style>
<title>Daftar Guru</title>
<h1> Daftar Guru</h1>
<a href='tambah_guru.php'>Tambah Guru</a>
<table border=1 style="border-collapse:collapse">
<tr>
<th>No</th>
<th>Nama</th>
<th>Mapel</th>
<th>Alamat</th>
<th>Tanggal lahir</th>
</tr>
<?php
$query = "SELECT * FROM master_guru";
$query_ex = odbc_exec($con, $query);
$no = 1;
while ($data = odbc_fetch_array($query_ex)) {

?>
<tr>
<td style="text-align:center"><?php echo $no++ ?></td>
<td><?php echo $data["nama"]; ?></td>
<td><?php echo $data["mapel"]; ?></td>
<td><?php echo $data["alamat"]; ?></td>
<td><?php echo $data["tanggal_lahir"]; ?></td>
</tr>
<?php
}
?>
Buka http://localhost:8080/tutorial_msaccess/daftar_guru.php maka kalian akan melihat table yang berisi daftar para guru seperti gambar di bawah

http://localhost:8080/tutorial_msaccess/daftar_guru.php
Lalu kalian tekan tombol Tambah Guru atau bisa juga dengan menuju http://localhost:8080/tutorial_msaccess/tambah_guru.php maka kalian akan melihat form untuk menambah data guru seperti gambar di bawah

http://localhost:8080/tutorial_msaccess/tambah_guru.php

Nah sekarang kalian coba masukan data pada halaman tambah_guru kemudian lihat pada file database access kalian di dalam table master_guru maka akan ada data baru sesuai yang kalian masukan tadi

Baca Juga : Cara Koneksi Database MySQL ke Visual Basic 6.0

Itulah tadi "Cara Mengkoneksikan PHP ke Microsoft Access (MS ACCESS)".
Sekian dari saya BapakNgoding,terimakasih 👋

Cara Penggunaan Redux pada React Native Lengkap dengan Penjelasannya

2020-01-04T19:09:00.000+07:00

Kenapa kita harus memakai Redux?

Bukanya lebih mudah jika tidak memakai Redux?

Apa sih keuntungan memakai Redux?

Mungkin pertanyaan-pertanyaan diatas seringkali kita dengar saat ada orang yang sudah bisa membuat suatu program namun tidak mengerti atau memakai Redux pada saat membuatnya termasuk saya dulu 😆. Ya bagi kebanyakan programmer pasti setuju jika menggunakan Redux adalah suatu keharusan terutama pada Framework React dan Angular karena berhubungan dengan State, nah semenjak itulah saya mulai belajar tentang Redux dan penggunaanya terutama pada React karena saya seorang React Native developer, namun untuk framework lain penggunaanya pun sama saja, jadi mari kita cari tahu dulu mulai dari,

Apa itu Redux?
Redux adalah sebuah framework yang fungsinya adalah untuk mengatur State dimana State sendiri adalah kumpulan data-data pada suatu component atau bisa kita sebut juga temporary memori atau memori sementara.

Kenapa kita harus menggunakan Redux serta keunggulannya?
Salah satu alasan utama kenapa kita harus menggunakan Redux yaitu :

Memudahkan kita dalam mengelola suatu data dalam tiap komponen
Lebih efisien karena kita cukup membuat satu State lalu kita bisa menggunakannya kapanpun kita mau
Sebagai business logic seperti tempat melakukan authorization, pengelolaan data sehingga lebih rapi tanpa mencampurnya dengan View atau UI kita.

Bagaimama Cara Kerja Redux?
Redux bekerja dengan 3 komponen utama yaitu Action, Reducer, dan Store dimana ketiganya bekerja dengan cara seperti pada gambar di bawah :

Siklus Redux

Dari gambar di atas kita dapat menyimpulkan bahwa :

View mengirim Action kepada Reducer
Reducer mengeksekusi perintah sesuai type Action lalu mereturn fungsi yang sesuai yang kemudian akan mengubah state aplikasi kita
Store menyimpan state dari reducer

Nah sekarang kalian tau kan tentang apa itu redux dan kenapa kita harus menggunakanya, sekarang tanpa panjang lebar lagi kita langsung saja masuk ke topik utama pada artikel ini yaitu "Cara Menggunakan Redux pada React Native".

Berikut langkah-langkah pembuatannya :

Buat project React Native baru dan beri nama terserah pada kasus ini saya menamainya reduxTutorial
Tambah package redux dengan mengetikan perintah berikut pada Terminal/CMD anda :

npm install redux
npm install react-redux
npm install react-native-elements
npm install react-native-gesture-handler
npm install react-native-vector-icons
npm install react-navigation
npm install react-navigation-stack
Note : Pada text yang bewarna merah berarti harus ada untuk mengimplementasikan Redux dan selebihnya opsional

Setelah itu kita akan membuat tiga file yaitu action.js ,reducer.js , dan store.js lalu menempatkannya dalam folder redux_src seperti pada gambar berikut :

Struktur Redux
Jika sudah sekarang kita akan membuat action terlebih dahulu dengan cara ketikan code berikut pada file action.js

const StoreItem = (newItem) => {
return {
type: 'STORE_ITEM',
data: newItem
}
}

module.exports = { StoreItem }
Note : Pada variabel StoreItem terdapat fungsi dimana fungsi tersebut akan me-return sebuah object yang didalamnya terdapat properties Type (Harus ada) dan Data (Opsional) dimana nantinya akan diproses oleh reducer karena Action hanyalah object yang memiliki informasi-informasi pada action kita

Jika sudah kemudian kita buat reducer dengan mengetikan perintah berikut pada file reducer.js

const INITIAL_STATE = {
action: {
data: 0
}
};

const itemReducer = (prevState = INITIAL_STATE, action) => {
switch (action.type) {
case "STORE_ITEM":
return { prevState, action }
default:
return prevState
}
}

export default itemReducer
Note : Pada reducer kita membuat sebuah fungsi yang akan mengembalikan object sesuai dengan Type yang telah diminta pada kode jika Type nya ternyata adalah STORE_ITEM maka akan mengembalikan object { prevState, action } dimana prevState adalah state sebelumnya dan action adalah state setelah action atau sesudahnya dan jika bukan type tersebut maka akan mengembalikan prevState dan INITIAL_STATE adalah state mula-mula atau state awal

Sekarang kita akan membuat store dimana store adalah tempat state kita disimpan, kita dapat membuat store dengan mengetikan perintah berikut pada file store.js

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store
Note : kita bisa membuat store hanya dengan memanggil fungsi createStore() lalu memasukannya dengan parameter reducer kita

Setelah selesai sekarang mari kita buat halaman untuk mengimplementasikan redux kita, pertama-tama mari kita buat file Navigator.js yang berisi kode berikut:

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack';

import Home from './home'
import ListItem from './list_item'

const MainNavigator = createStackNavigator({
Home: { screen: Home, navigationOptions: { header: null } },
ListItem: { screen: ListItem, navigationOptions: { header: null } }

})

const Navigator = createAppContainer(MainNavigator)

export default Navigator
Note : Disana kita hanya membuat navigator biasa untuk memindahkan halaman kita nantinya

Sekarang mari kita buat file App.js dan ketikan kode berikut :

import React, { Component } from 'react';

import { Provider } from 'react-redux'
import Navigator from './Navigator'
import store from './redux_src/store'

export default class App extends React.Component {
constructor(props) {
super(props)
//...
this.store = store
}

render() {
return (
<Provider
store={this.store}>
<Navigator/>
</Provider>
)
}
}
Note : Disana dapat dilihat bahwa saya memanggil fungsi Provider dari react-redux dimana Provider berarti penyedia, penyedia yang dimaksud adalah penyedia state kita yang akan kita buat dengan properties store = { this.store } dimana store sendiri berasal dari file store.js

Sekarang kita buat file baru lagi yaitu home.js

import React, { Component } from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TextInput, Colors } from 'react-native';
import { Button } from 'react-native-elements'

import { connect } from 'react-redux'

import { StoreItem } from './redux_src/action'
import store from './redux_src/store'

class Home extends Component {

constructor(props) {
super(props)
//...
}

render() {
return (
<>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Text style={{ textAlign: "center", fontWeight: "bold", fontSize: 20 }}>Selamat datang di TokoATK</Text>
<View style={{ display: "flex", flexDirection: "row", marginTop: 20 }}>
<Text style={{ textAlignVertical: "center" }}>Nama Barang: </Text>
<TextInput
placeholder="masukan nama barang"
onChangeText={(_) => {
this.setState({
nama: _
})
}}
>
</TextInput>
</View>
<Button
title="Tambah Barang"
onPress={() => {
this.props.addItem(this.state.nama)
}}
/>
<Button
buttonStyle={{ marginTop: 20 }}
title="Daftar Barang"
onPress={() => {
this.props.navigation.navigate('ListItem')
}}
/>

<View style={{ padding: 20 }}>
<View style={{ width: '100%', height: 3, backgroundColor: 'black' }} />
<Text style={styles.list_barang}>Daftar Barang</Text>
<Text style={{ fontSize: 15 }}>{this.props.action.data}</Text>
</View>
</ScrollView>
</>
);
}
}

const styles = StyleSheet.create({
scrollView: {
padding: 20,
},
list_barang: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 15,
textDecorationLine: 'underline',
marginTop:10
}
});

// MENGUBAH STATE MENJADI PROPS
const mapStateToProps = (state) => {
const { action, prevState } = state
return { action }
}
/////////////////////////////////////

// DISPATCH KE PROPS
const mapDispatchToProps = (dispatch) => ({
addItem: (params) => dispatch(StoreItem(params))
})
////////////////////////////////////

export default connect(mapStateToProps, mapDispatchToProps)(Home)
Note: Perhatikan pada text yang bewarna merah dan saya tebali disana saling berhubungan artinya kita memanggil fungsi addItem saat tombol "Tambah Barang" ditekan, lalu pada variable mapStateToProps artinya kita mengubah State menjadi Props begitu juga pada fungsi mapDispatchToProps kita mengubah Dispatch menjadi Props dimana Dispatch berfungsi untuk mengubah data pada State kita. Kemudian kita connect kan kedua variabel tadi dan memasukannya ke dalam class Home dengan meggunakan fungsi connect(). Kemudian kita memanggil state di dalam props kita tadi dengan {this.props.action.data}

Sekarang State kita sudah berjalan pada halaman Home, namun kita akan mencoba memanggil state tersebut pada halaman lain yaitu pada halaman list_item, yaitu dengan membuat file list_item dan ketikan kode berikut :

import React, { Component } from "react";
import { Text, StyleSheet,View } from "react-native";

import { connect } from 'react-redux'

class ListItem extends Component {
render() {
return (
<>
<View style={{ padding: 20 }}>
<View style={{ width: '100%', height: 3, backgroundColor: 'black' }} />
<Text style={styles.list_barang}>Daftar Barang</Text>
<Text style={{ fontSize: 15 }}>{this.props.action.data}</Text>
</View>
</>
)
}
}

const styles = StyleSheet.create({
scrollView: {
padding: 20,
},
list_barang: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 15,
textDecorationLine: 'underline',
marginTop: 10
}
});

// MENGUBAH STATE MENJADI PROPS
const mapStateToProps = (state) => {
const { action, prevState } = state
return { action }
}
/////////////////////////////////////

export default connect(mapStateToProps)(ListItem)
Note : Penjelasanya masih sama seperti pada point no 10 😁

Nah berikut tampilan aplikasi saat dijalankan

Halaman Home

Halaman List item

Disana dapat kita lihat bahwa State pada halaman Home juga dapat diakses pada halaman ListItem, nah itulah State Management 😁.

Nah itulah "Cara penggunaan atau implementasi Redux pada React Native" sebelum saya tutup jika kalian belum berhasil silahkan kalian lihat di Github saya dengan klik disini

Cara Membuat Google Sign-in dan Auth pada React Native dan Firebase

2019-12-30T09:08:00.000+07:00

Pada saat kita membuat sebuah aplikasi atau startup terutama yang membutuhkan login atau akses pada user tertentu seringkali membuat kita bingung tentang bagaimana cara mengamankan data-data para user pengguna aplikasi kita bukan?. Saya pun merasakannya mulai dari mengamankan password user, data user, dan informasi-informasi penting lainnya, karena saat kita membuat aplikasi kitalah para developer yang bertanggung atas data-data user tersebut. Oleh karena itulah banyak pembuat aplikasi mulai memanfaatkan fitur Google yaitu OAuth, dimana OAuth sendiri adalah Open Authorization yang artinya protokol yang membagikan informasi-informasi pribadi user seperti yang sudah dilakukan oleh Google dan Facebook, salah satunya adalah kita seringkali melihat login dengan Google atau login dengan Facebook pada suatu aplikasi.

Google Auth React Native

Nah saat ini kita akan membuat seperti itu untuk aplikasi kita, namun sebelumnya saya akan menjelaskan bahwa artikel ini adalah lanjutan dari artikel sebelumnya yaitu tentang Tutorial React Native jika kalian belum membacanya silahkan klik disini Tutorial React Native

Nah tanpa panjang lebar lagi mari kita langsung membuat OAuth pada project kita sesuai langkah-langkah berikut:

Buka project kalian dan ketikan perintah berikut pada Terminal / CMD

npm install @react-native-community/google-signin
Setelah itu buka Firebase Console kemudian pilih menu Authentication

Pilih Authentication
Kemudian akan terlihat tampilan seperti gambar di bawah lalu pilih Siapkan metode masuk

Pilih siapkan metode masuk
Jika sudah pilih metode masuk yang ingin kalian gunakan, pada kasus ini kita akan menggunakan Google Sign-in karena itu kita memilih Google

Pilih metode masukan
Kemudian masukan nama project anda yang ingin ditampilkan kepada pengguna aplikasi kita dan masukan juga email untuk project kita, lalu jangan lupa klik aktifkan pada pojok kanan atas

Gambar konfigurasi OAuth
Kemudian klik simpan, sekarang buka file App.js di project anda dan ketikan kode berikut untuk mengimport package '@react-native-community/google-signin'

import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-community/google-signin';
Masih di file App.js tambahkan kode berikut

componentDidMount() {
GoogleSignin.configure({
scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
webClientId: '<CLIENT ID>', // client ID of type WEB for your server (needed to verify user ID and offline access)
offlineAccess: false, // if you want to access Google API on behalf of the user FROM YOUR SERVER
hostedDomain: '', // specifies a hosted domain restriction
loginHint: '', // [iOS] The user's ID, or email address, to be prefilled in the authentication UI if possible. [See docs here](https://developers.google.com/identity/sign-in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login.
accountName: '', // [Android] specifies an account name on the device that should be used
iosClientId: '<FROM DEVELOPER CONSOLE>', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
});
}
Note : Ganti tulisan yang saya beri warna merah dengan kode yang kita
dapatkan pada point no 8

Sekarang kita buka halaman seperti pada point no 4 dan pilih Konfigurasi Web SDK lalu copy ID Klien Web ke dalam webClientId pada point no 7

Copy kode ID Klien Web
Sekarang buat fungsi _signIn() dimana fungsi ini berfungsi untuk memproses Authentication Google lalu ketikan kode berikut

_signIn = async () => {
try {
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
} catch (error) {
console.log(error.code)
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
// user cancelled the login flow
console.log("Cancelled")
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log("In Progress")
// operation (e.g. sign in) is in progress already
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log("Not Available")
// play services not available or outdated
} else {
console.log(error)
// some other error happened
}
}
};
Jika sudah sekarang ketikan kode berikut pada fungsi render() di file App.js

render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Text
style={{ textAlign: "center", fontSize: 20, fontWeight: "bold" }}
>Google Auth React Native</Text>
<View style={styles.btn_view}>
<GoogleSigninButton
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this._signIn}
disabled={this.state.isSigninInProgress} />
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
Sekarang buka jalankan aplikasi anda maka tampilannya akan seperti gambar dibawah, jika sudah sekarang coba klik tombol Login dengan Google

Gambar tampilan awal
Kalau sudah berhasil maka akan keluar seperti gambar di bawah, yang artinya aplikasi kita sudah dapat tersambung dengan API Google

Gambar jika Auth kita berhasil
Namun setelah kita berhasil menghubungkan API Google maka sekarang kita harus menyimpannya ke firebase kita yaitu dengan menambahkan kode berikut ke dalam file android/app/build.gradle

dependencies {
// ...
implementation "com.google.firebase:firebase-auth:17.0.0" // Tambahkan ini
}
Setelah itu tambahkan juga kode ini ke dalam file android/app/src/main/java/com/namaAplikasi/MainApplication.java

import io.invertase.firebase.auth.RNFirebaseAuthPackage; // Tambahkan ini

public class MainApplication extends Application implements ReactApplication {
// ...

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new RNFirebaseAuthPackage()); // Tambahkan ini
return packages;
}
};
// ...
}
Setelah itu ganti kode di file App.js pada point no 9 dengan kode berikut

_signIn = async () => {
try {
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
const credential = firebase.auth.GoogleAuthProvider.credential(userInfo.idToken, userInfo.accessToken)
const firebaseUserCredential = await firebase.auth().signInWithCredential(credential)
} catch (error) {
console.log(error.code)
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
// user cancelled the login flow
console.log("Cancelled")
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log("In Progress")
// operation (e.g. sign in) is in progress already
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log("Not Available")
// play services not available or outdated
} else {
console.log(error)
// some other error happened
}
}
};
Note : Dapat dilihat bahwa di sana saya menambahkan variabel credential dan firebaseUserCredential dimana credential sendiri berfungsi untuk mendapatkan idToken dan accessToken dari akun yang kita masukan lalu firebaseUserCredential sendiri berfungsi untuk menambahkan akun berupa credential yang sudah kita dapatkan pada variabel credential

Baca Juga : Cara Setting Koneksi Firebase ke React Native

Setelah selesai sekarang coba buka aplikasi anda lagi dan login maka user baru akan terdaftar pada firebase anda seperti gambar berikut

Pada gambar di atas terlihat
bahwa akun kita berhasil ditambahkan ke firebase

Note: Jika tidak bisa silahkan hapus lagi aplikasi anda lalu install lagi

Nah itulah tadi "Cara Membuat Google Sign-in dan Auth pada React Native dan Firebase" jika ada yang masih kurang paham silahkan tanya pada kolom komentar di bawah

Akhir kata dari saya, selamat belajar dan mencoba 😁

Cara Menggunakan Array dan ArrayList pada Java Serta Contoh Penggunaanya

2019-12-25T09:40:00.000+07:00

Pada artikel ini BapakNgoding akan membahas sesuatu yang sudah banyak diketahui oleh orang terutama para developer atau orang yang suka ngoding hehe😁, sesuai judul pada artikel kali ini kita akan membahas apa itu Array dan ArrayList serta apa sih fungsinya dalam membuat program.

Apa itu Array ?

Array adalah sebuah variabel atau object yang di dalamnya terdapat sekumpulan variabel-variabel lain yang bertipe sama. Sebagai contoh jika kita punya variabel list_hari yang didalamnya terdiri dari nama-nama hari mulai dari senin sampai dengan minggu, nah untuk membuat hari tersebut maka kita harus membuat array dengan tipe data String karena nama hari adalah String.

- Contoh array yang menampung nama-nama hari :

list_hari = [ "Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu" ];

Pada saat ini kita sudah tahu apa itu array bukan?, sekarang kita akan mencoba membuatnya dengan menggunakan Bahasa Java dan Netbeans

Buat project baru dengan nama ArrayTutorial pada Netbeans anda

Membuat project baru
Sekarang coba buat array list_hari dengan mengetikan perintah berikut di dalam public static void main()

// TODO code application logic here
String[] list_hari = {"Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"};
System.out.println("Nama Hari: \n");
for (int i = 0; i < list_hari.length; i++) {
System.out.println(list_hari[i]);
}
Penjelasan:

a.) Disana saya membuat sebuah variabel list_hari yang berfungsi untuk menampung nama-nama hari

b.) Kemudian saya mengulangnya sesuai panjang dari array yaitu 7 karena senin sampai minggu berjumlah 7 hari.

c.) Setelah itu saya menampilkan nama hari dalam array sesuai dengan letak index array, sebagai contoh kita dapat melihat jika hari "Senin" terletak pada urutan pertama pada variabel list_hari maka dari itu index dari "Senin" adalah 0, lalu hari "Selasa" terletak pada urutan kedua maka dari hari "Selasa" memiliki index 1, dan kalian bisa melihatnya sendiri di bawah jika isi dari variabel list_hari dijabarkan.

{ list_hari[0] = Senin
list_hari[1] = Selasa
list_hari[2] = Rabu
list_hari[3] = Kamis
list_hari[4] = Jumat
list_hari[5] = Sabtu
list_hari[6] = Minggu }

💡 ingat dalam array angka pertama dimulai dari angka 0 kemudian angka 1 lalu angka 2 dan seterusnya

Sekarang coba jalankan maka akan keluar hasil seperti gambar dibawah

Hasil program saat dijalankan
Kalian juga dapat membuat array dengan mendeskripsikannya terlebih dahulu dengan mengetikan kode berikut di dalam public static void main()

String[] list_hari = new String[7];
list_hari[0] = "Senin";
list_hari[1] = "Selasa";
list_hari[2] = "Rabu";
list_hari[3] = "Kamis";
list_hari[4] = "Jumat";
list_hari[5] = "Sabtu";
list_hari[6] = "Minggu";
System.out.println("Nama Hari: \n");
for (int i = 0; i < list_hari.length; i++) {
System.out.println(list_hari[i]);
}
Penjelasan:

a.) Disana saya membuat object baru dengan nama list_hari lalu mendefiniskannya sebagai Array yang menampung data bertipe String dan memiliki panjang 7

Sekarang coba jalankan program kalian maka hasilnya pun akan sama dengan nomor 4 😁

Sekarang kita akan lanjut kepada ArrayList

Apa itu ArrayList?
ArrayList adalah sebuah object array yang tidak memiliki batas, artinya kita tidak perlu mendefiniskan panjang array saat mendefinisikannya, untuk lebih jelasnya silahkan perhatikan kode dibawah

→ Tanpa ArrayList

String[] list_hari = new String[7];

list_hari[0] = "Senin";

list_hari[1] = "Selasa";

list_hari[2] = "Rabu";

list_hari[3] = "Kamis";

list_hari[4] = "Jumat";

list_hari[5] = "Sabtu";

list_hari[6] = "Minggu";

System.out.println("Nama Hari: \n");

for (int i = 0; i < list_hari.length; i++) {

System.out.println(list_hari[i]);

}

→ Menggunakan ArrayList

ArrayList list_hari = new ArrayList<String>();
list_hari.add("Senin");
list_hari.add("Selasa");
list_hari.add("Rabu");
list_hari.add("Kamis");
list_hari.add("Jumat");
list_hari.add("Sabtu");
list_hari.add("Minggu");
System.out.println("Nama Hari: \n");
for (int i = 0; i < list_hari.size(); i++) {
System.out.println(list_hari.get(i));
}

Dapat kita lihat bahwa jika kita menggunakan Array biasa maka kita diharuskan untuk mendefinisikan panjang dari Array tersebut, namun jika menggunakan ArrayList maka kita tinggal menambahkan data ke dalam Array tersebut tanpa khawatir melewati batas yang telah kita tentukan.

Sekarang mari kita coba buat Toko Buku dengan menggunakan Array, dengan langkah-langkah berikut:

Buat project baru dengan nama ArrayTutorial
Setelah itu buat variable list_hari dengan type ArrayList lalu tidak lupa juga Scanner untuk menerima inputan dari user, dengan mengetikan perintah berikut setelah public class ArrayTutorial

static ArrayList<String> list_hari = new ArrayList<String>();
static Scanner input = new Scanner(System.in);
Note : Disana saya membuat ArrayList dengan static karena kita tidak membuat object baru dari class ArrayTutorial, jika kalian masih bingung silahkan baca Mengenal Class, Method Static dan Non Static Serta Contohnya di Java

Setelah itu kita buat fungsi menu() untuk menampilkan menu utama dengan perintah berikut

static void menu() {
System.out.println("Toko Buku");
System.out.println("1. Tambah buku");
System.out.println("2. List Buku");
System.out.println("3. Cari Buku");
System.out.println("Pilih nomor: ");
int index = input.nextInt();
switch (index) {
case 1:
tambahBuku();
break;
case 2:
listBuku();
break;
case 3:
cariBuku();
break;
default:
menu();
}
}
Sekarang kita buat fungsi untuk menambah buku baru dengan mengetikan perintah berikut

static void tambahBuku() {
System.out.print("\nMasukan nama buku: ");
String nama = input.next();
list_hari.add(nama);
System.out.println("\nMasukan lagi? [y/n]");
String again = input.next();
if (again.equalsIgnoreCase("y")) {
tambahBuku();
} else {
menu();
}
}
Note: disana saya menambah buku dengan menggunakan fungsi list_hari.add(nama) dimana nama adalah inputan yang telah kita masukan dan list_hari adalah ArrayList

Baca Juga : Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS

Sekarang kita buat fungsi untuk melihat semua buku di dalam Array list_hari dengan perintah di bawah

static void listBuku() {
System.out.println("\nDaftar Buku: ");
for (int i = 0; i < list_hari.size(); i++) {
System.out.println(list_hari.get(i));
}
System.out.println("");
menu();
}
Setelah itu kita buat fungsi untuk mencari buku berdasarkan nama buku dengan perintah berikut

static void cariBuku() {
int index = 0;
boolean found = false;
System.out.print("\nMasukan nama buku: ");
String nama = input.next();
for (int i = 0; i < list_hari.size(); i++) {
if (list_hari.get(i).toString().equalsIgnoreCase(nama)) {
index = i;
found = true;
break;
}
}
if (found) {
System.out.println(list_hari.get(index));
} else {
System.out.println("\nBuku tidak ditemukan\n");
}
menu();
}
Nah sekarang coba jalankan program kalian maka akan seperti tampilan di bawah kemudian coba gunakan setiap fungsinya 😁

Gambar Tampilan Aplikasi kita

Berikut source code lengkapnya saya sertakan di bawah ini:

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package arraytutorial;

import java.util.ArrayList;
import java.util.Scanner;

/**
*
* @author windows
*/
public class ArrayTutorial {

static ArrayList<String> list_hari = new ArrayList<String>();
static Scanner input = new Scanner(System.in);

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
// TODO code application logic here

list_hari.add("Novel");
list_hari.add("Pelajaran");
menu();
}

static void menu() {
System.out.println("Toko Buku");
System.out.println("1. Tambah buku");
System.out.println("2. List Buku");
System.out.println("3. Cari Buku");
System.out.println("Pilih nomor: ");
int index = input.nextInt();
switch (index) {
case 1:
tambahBuku();
break;
case 2:
listBuku();
break;
case 3:
cariBuku();
break;
default:
menu();
}
}

static void tambahBuku() {
System.out.print("\nMasukan nama buku: ");
String nama = input.next();
list_hari.add(nama);
System.out.println("\nMasukan lagi? [y/n]");
String again = input.next();
if (again.equalsIgnoreCase("y")) {
tambahBuku();
} else {
menu();
}
}

static void cariBuku() {
int index = 0;
boolean found = false;
System.out.print("\nMasukan nama buku: ");
String nama = input.next();
for (int i = 0; i < list_hari.size(); i++) {
if (list_hari.get(i).toString().equalsIgnoreCase(nama)) {
index = i;
found = true;
break;
}
}
if (found) {
System.out.println(list_hari.get(index));
} else {
System.out.println("\nBuku tidak ditemukan\n");
}
menu();
}

static void listBuku() {
System.out.println("\nDaftar Buku: ");
for (int i = 0; i < list_hari.size(); i++) {
System.out.println(list_hari.get(i));
}
System.out.println("");
menu();
}

}

Nah itulah tadi artikel saya tentang "Cara menggunakan Array dan ArrayList pada Java Serta Contoh Penggunaanya"

Selamat mencoba 😁

Cara Setting Koneksi Firebase ke React Native

2019-12-20T12:39:00.000+07:00

Kebanyakan yang kita jumpai saat ingin mencoba menggunakan firebase adalah kita bingung untuk menghubungkannya ke aplikasi kita khususnya di React Native, karena kebanyakan saat saya mencari tutorial untuk menghubungkannya maka yang keluar adalah tutorial dengan menggunakan java atau kotlin.

Karena itulah kali ini BapakNgoding akan membuat sebuah Tutorial untuk menghubungkan/mengkoneksikan React Native ke Firebase, namun sebelum itu kalian harus tahu dulu apa itu Firebase dan cara kerjanya dengan melihat docs milik Firebase.

Sumber :
https://i.ytimg.com/vi/iosNuIdQoy8/maxresdefault.jpg

Nah langsung saja kita ke langkah-langkahnya.

Buat project baru di Firebase, kalian bisa membuat project baru di Firebase dengan link berikut https://firebase.google.com/ lalu tekan go to console di pojok kanan atas.
Setelah itu klik tombol Tambah Project lalu ikuti langkah-langkahnya
Jika sudah berhasil membuat project sekarang kita tinggal menambahkan aplikasi kita, pada kasus ini saya memilih android karena saya akan menggunakannya untuk React Native.

Gambar Project Overview Firebase
Setelah itu masukan data-data yang diminta oleh Firebase, pada langkah pertama kita akan memasukan nama paket ( dapat dilihat di MainActivity dengan awalan com. ...... ), nama aplikasi ( terserah ), lalu SHA-1 dimana dapat kita buat dengan mengetikan perintah berikut pada Terminal / CMD anda lalu copy file debug.keystore di dalam folder ./android dan pastekan ke dalam folder android di project anda

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
Note: keytool diatas adalah keytool untuk versi debug

Masukan data yang diminta oleh gambar di atas

Setelah selesai sekarang download file google-services.json dan taruh ke dalam directory android/app/ pada project anda.

Download file google-services.json
Jika sudah sekarang masukan kode berikut pada file android/build.gradle

buildscript {
repositories {
google()  // Tambahkan ini
}
dependencies {
...
classpath 'com.google.gms:google-services:4.2.0'  // Tambahkan ini
}
}

allprojects {
...
repositories {
google()  // Tambahkan ini
...
}
}
Jika sudah masukan juga kode berikut pada file android/app/build.gradle

apply plugin: 'com.android.application'

dependencies {
implementation 'com.google.firebase:firebase-analytics:17.2.0' //Tambahkan Firebase SDK
}

apply plugin: 'com.google.gms.google-services' //Tambahkan juga kode ini

Note : Pastikan bahwa file google-services.json sudah berada di dalam folder android/app/

Sekarang Firebase kita sudah terhubung ke project React Native kita, sekarang kalian tinggal memilih fitur yang ingin kalian gunakan di Firebase.

Sebagai contoh saya akan mencoba menggunakan fitur Cloud Firestore pada Firebase dengan menggunakan react-native-firebase, kalian bisa membaca docs nya disini https://rnfirebase.io/docs

Berikut langkah-langkahnya :

Buka Firebase dan pilih Database lalu pilih Cloud Firestore lalu tekan Buat Database dan pilih lokasi server dan tunggu hingga proses pembuatan Cloud Firestore selesai.
Setelah selesai sekarang buat data terserah karena ini hanya untuk mengetes

Membuat contoh data pada Cloud Firestore
Setelah kita selesai membuat contoh data maka kita tinggal menampilkannya pada project kita
Install package react-native-firebase dengan mengetikan perintah berikut:

npm install react-native-firebase
Lalu tambahkan kode berikut ke dalam file android/app/build.gradle

dependencies {

// ...
implementation "com.google.android.gms:play-services-base:16.1.0" // Tambahkan kode ini
implementation "com.google.firebase:firebase-core:16.0.9" // Tambahkan kode ini
implementation "com.google.firebase:firebase-firestore:19.0.0" // Tambahkan kode ini

}
Tambahkan juga kode berikut ke dalam file android/app/src/main/java/com/[nama aplikasi]/MainApplication.java

// ...
import com.facebook.react.ReactApplication;
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // Tambahkan ini

public class MainApplication extends Application implements ReactApplication {
// ...

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new RNFirebaseFirestorePackage()); // Tambahkan ini
return packages;
}
};
// ...
}
Untuk Cloud Firestore kita harus memasukan kode berikut ke dalam file android/app/build.gradle

//..
android {
//..

defaultConfig {
//..
multiDexEnabled true // Tambahkan ini jika ingin menggunakan Firestore
}
//..
}
Sekarang copy kode berikut ke dalam file App.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import firebase from 'react-native-firebase';

export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
data: []
}
const ref = firebase.firestore().collection('user')
const list_data = []
ref.onSnapshot((_) => {
_.forEach(doc => {
const { nama } = doc.data()
list_data.push(nama)
})
this.setState({
data: list_data
})
})
}

render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Text
style={{ textAlign: "center", fontSize: 20, fontWeight: "bold" }}
>Cloud Firestore di React Native</Text>
<View style={{paddingTop:20 }}>
{this.state.data.map((data) => {
return (
<Text>{data}</Text>
)
})}
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
}

const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
padding:20,
},
});

Note:
1. Disana saya menggunakan package react-native-firebase dengan mengimportnya menggunakan import firebase from react-native-firebase
2. Setelah iut saya mengambil data dari firebase dengan perintah dibawah lalu memasukannya ke dalam state data :

const ref = firebase.firestore().collection('user')
const list_data = []
ref.onSnapshot((_) => {
_.forEach(doc => {
const { nama } = doc.data()
list_data.push(nama)
})
this.setState({
data: list_data
})
})
Jika sudah ubah aturan di Cloud Firestore agar dapat dibaca oleh siapapun dengan mengklik gambar berikut

Klik tombol Aturan
Lalu ganti kode di kanan dengan kode berikut:

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}

Note : Jika menggunakan Firebase Auth maka tidak perlu diganti!

Sekarang coba buka project react native anda maka hasil datanya akan ditampilkan di layar anda seperti gambar dibawah :

Gambar tampilan aplikasi

Nah itulah tadi "Cara Setting Koneksi Firebase ke React Native"

Sekian dari BapakNgoding dan selamat mencoba, jika kalian mengalami kesulitan bisa kalian comment kan di

Cara Menggunakan Socket.IO dengan NodeJS, ExpressJS, MariaDB

2019-12-16T06:15:00.000+07:00

Apa itu Socket.IO?

Socket.IO adalah sebuah library pada javascript yang mempunyai fungsi untuk membangun real-time antara client dan server, misalnya kita punya website yang menampilkan data pegawai dari sebuah perusahaan sebanyak lima orang lalu kita tambahkan satu orang, maka jumlah total pegawai akan menjadi enam orang. Nah pada saat menambahkan orang itulah jika kita menggunakan real-time maka data di website yang semula lima orang akan otomatis berubah menjadi enam orang tanpa perlu mereload website kita terlebih dahulu, kebanyakan sistem-sistem perusahaan sudah menerapkan real-time pada websitenya. Maka dari itu kali ini BapakNgoding akan membuat sebuah tutorial untuk belajar menggunakan Socket.io dan membuat real-time di datatabase menggunakan Socket.IO pada website kita, pada contoh kali ini saya akan menggunakan EJS dan MariaDB seperti tutorial saya sebelum-sebelumnya.

Socket.IO
sumber : https://miro.medium.com/max/2792/1*tWm33yhceKIL22QqOORu2w.png

Nah berikut langkah-langkahnya :

Buat folder baru lalu ketikan perintah pada CMD/Terminal berikut di dalam direktori yang barusan anda buat

npm init
Sekarang setelah mengetikan perintah diatas akan terdapat file package.json.
Masih didalam folder yang sama ketikan perintah berikut

npm install body-parser
npm install ejs
npm install express
npm install socket.io
npm install mariadb
Sekarang kita buat databasenya seperti tutorial-tutorial saya sebelumnya yaitu dengan membuat database sekolah dan di dalamnya terdapat table master_guru seperti gambar berikut

Gambar struktur database sekolah

Gambar field dari table master_guru
Setelah kita membuat database kita akan membuat file di dalam directory yang telah kalian buat tadi
Pertama-tama silahkan buat file db_config.js dan ketiken kode berikut

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }
Note : Seperti biasa ganti text bewarna merah dengan konfigurasi database anda

Setelah itu buat file app.js dan ketikan kode berikut

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const http = require('http')
const server = http.createServer(app)
const db = require('./db_config.js')

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await db.query('SELECT * FROM master_guru order by GuruID asc')
res.send(result)
})

app.route('/tambah_guru')
.get((req, res) => {
res.render("../views/add_guru.ejs")
})
.post(async (req, res) => {
const { name, mapel } = req.body
const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)
res.json(result)
})

server.listen(3000, () => console.log("Run at localhost:3000"))
Note : Pada contoh diatas saya membuat sebuah route untuk menambah guru dan menampilkannya tanpa socket.io yang artinya belum real-time

Setelah itu buat folder views dan buat folder home.ejs di dalamnya dimana isi file home.ejs adalah sebagai berikut :

<body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<a href="/tambah_guru">+ Tambah Guru</a>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function () {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "POST",
resultType: "JSON",
success: function (result) {
ApiToTable(result)
}
})
})

function ApiToTable(results) {
const table = document.getElementById("table_guru")
for (var t = table.rows.length - 1; t > 0; t--) {
table.deleteRow(t)
}
const result_data = results.data
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
console.log()
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
no.innerHTML = i + 1
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
}
}
</script>
Setelah selesai sekarang buat file lagi didalam folder views dan beri nama add_guru.ejs, lalu ketikan kode berikut

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Tambah Guru +</h1>
<input type="text" placeholder="Nama Guru" id="input_name"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="tambah_guru()">
</div>
<script>
function tambah_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/tambah_guru',
method: "POST",
data: {
name: name,
mapel: mapel,
},
success: function (result) {
if(result.success){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>
Nah sekarang coba buka 2 browser dan jalankan localhost:3000 dan klik tambah guru pada salah satu browser anda lalu tambahkan data, selanjutnya masukan data guru dan klik Simpan setelah itu lihat pada browser satunya apakah data guru baru langsung otomatis tertambah tanpa kita reload terlebih dahulu? jelas tidak kan, maka dari itu kali ini kita akan menambahkan socket.io agar data tersebut langsung tertambah tanpa perlu kita restart

Gambar buka dua browser dan masukan data guru baru seperti gambar sebelah kanan
Sekarang tambahkan kode berikut ke dalam file app.js

const io = require('socket.io')(server)
app.use(function (req, res, next) {
req.io = io;
next();
})
io.on('connection', function (socket) {
console.log('connect')
socket.on('change',async function(socket){
const result = await db.query('SELECT * FROM master_guru order by GuruID asc')
io.emit('new_data',{
data : result.data
})
})
})
Note : Bisa dilihat disana kita mengimport package socket.io yang akan digunakan saat pengimplementasian real-time nanti lalu kita juga membuat perintah kalau saat server menerima parameter change maka socket.io akan langsung mengirim data terbaru. Perlu diingat bahwa emit di socket.io artinya adalah mengirim parameter socket dan on pada socket.io berfungsi sebagai penerima yang artinya jika kita menerima sesuatu maka server harus .....

Lalu sekarang tambahkan juga kode berikut ke dalam file home.ejs

<script src="/socket.io/socket.io.js"></script>
const socket = io();
socket.on('new_data', function (socket_result) {
console.log(socket_result)
ApiToTable(socket_result)
})
Note: Disana kita mengimport package socket.io dengan perintah <script src="/socket.io/socket.io.js"></script> lalu kita memberi fungsi kalau saat kita menerima parameter berupa new_data dari server maka kita akan memanggil fungsi ApiToTable() untuk memasukan data terbaru.

Yang terakhir adalah tambahkan juga kode berikut pada file add_guru.ejs

<script src="/socket.io/socket.io.js"></script>
const socket = io();
socket.emit('change','data')
Note: Tambahkan text bewarna merah ke dalam fungsi tambah_guru() {}, disana kita menyuruh socket.io untuk mengirim parameter berupa change yang nantinya akan direspon oleh server pada penjelasan nomor 10

Setelah selesai sekarang coba buka lagi localhost:3000 dan buka dua browser persis seperti pada nomor 9, lalu masukan data dan tara data akan otomatis menambah tanpa perlu kita reload.

Berikut adalah source code lengkap :

app.js

const express = require('express')

const app = express()

const bodyParser = require('body-parser')

const http = require('http')

const server = http.createServer(app)

const db = require('./db_config.js')

const io = require('socket.io')(server)

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

.post(async function (req, res) {

const result = await db.query('SELECT * FROM master_guru order by GuruID asc')

res.send(result)

})

app.route('/tambah_guru')

.get((req, res) => {

res.render("../views/add_guru.ejs")

})

.post(async (req, res) => {

const { name, mapel } = req.body

const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)

res.json(result)

})

io.on('connection', function (socket) {

console.log('connect')

socket.on('change', async function (socket) {

const result = await db.query('SELECT * FROM master_guru order by GuruID asc')

io.emit('new_data', {

data: result.data

})

server.listen(3000, () => console.log("Run at localhost:3000"))

home.ejs

<body>

<a href="/tambah_guru">+ Tambah Guru</a>

<thead>

<tr>

<th scope="col">Mapel</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</body>

$(document).ready(function () {

const url = "http://localhost:3000/"

const socket = io();

socket.on('new_data', function (socket_result) {

console.log(socket_result)

ApiToTable(socket_result)

})

$.ajax({

url: url,

method: "POST",

resultType: "JSON",

success: function (result) {

ApiToTable(result)

}

})

function ApiToTable(results) {

const table = document.getElementById("table_guru")

for (var t = table.rows.length - 1; t > 0; t--) {

table.deleteRow(t)

}

const result_data = results.data

for (var i = 0; i < result_data.length; i++) {

var data = result_data[i]

console.log()

var row = table.insertRow(i + 1)

var no = row.insertCell(0)

var nama = row.insertCell(1)

var mapel = row.insertCell(2)

no.innerHTML = i + 1

nama.innerHTML = data.Name

mapel.innerHTML = data.Mapel

}

</script>

add_guru.ejs

<h1>Tambah Guru +</h1>

</div>

function tambah_guru() {

const socket = io();

socket.emit('change','data')

const name = document.getElementById("input_name").value

const mapel = document.getElementById("input_mapel").value

$.ajax({

url: 'http://localhost:3000/tambah_guru',

method: "POST",

data: {

mapel: mapel,

success: function (result) {

if(result.success){

alert("Data berhasil dimasukan")

}else{

alert("Gagal")

}

})

}

</script>

db_config.ejs

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "rafael",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }

Nah itulah beberapa cara untuk membuat real-time pada database dengan menggunakan socket.io pada NodeJS, ExpressJS, dan Database

Sekian dari BapakNgoding dan mohon maaf bila ada kesalahan kata atau apapun itu dan jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

Cara Membuat Pagination di ExpressJS dan NodeJS

2019-12-10T06:20:00.000+07:00

Apa itu pagination ?

Kenapa pagination harus diterapkan pada setiap aplikasi entah itu web/desktop/mobile?

Bagaimana cara membuat pagination?

Yah kebanyakan programmer pemula setelah selesai membuat aplikasi terutama menampilkan data dari database menggunakan API sering kali tidak menggunakan pagination, padahal pagination adalah hal yang sangat penting dikarenakan data-data pada database sangatlah banyak dimana jika di dalam sebuah database terdapat 1.000 data maka kita akan menampilkan sebanyak 1.000 baris data pada halaman. Hmm kebayangkan jika di suatu halaman terdapat 1000 baris halaman maka halaman tersebut akan sangatlah panjang. Hal itulah yang sangat fatal jika saat kita membuat sebuah program tanpa menggunakan pagination maka akan terjadi hal seperti tadi. Maka dari itu kita wajib memberi pagination atau batasan-batasan data agar tidak terjadi hal seperti barusan.

Maka dari itu kali ini BapakNgoding akan memberi kalian Cara Membuat Pagination di ExpressJS. Sebelum itu pastikan kalian sudah tau caranya menampilkan data API kedalam sebuah website ya jika belum kalian bisa melihat artikel saya sebelumnya yaitu Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

Nah berikut langkah-langkah membuat pagination pada ExpressJS.

Buat folder baru lalu install ExpressJS dan EJS dengan mengetikan perintah dibawah ini pada CMD/Terminal anda

npm install express
npm install body-parser
npm install ejs
npm install mariadb
Buat database baru beserta tablenya, pada contoh kali ini saya membuat database sekolah dan table master_guru.

Struktur database dengan menggunakan Navicat

master_guru

Isi table master_guru

Sekarang buat file baru bernama db_config.js dan ketikan kode berikut

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }
Note : Ganti teks yang bewarna merah dengan konfigurasi database MariaDB anda.

Sekarang buat file app.js dan ketikan kode berikut :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const db = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.send("Server telah berjalan")
})

app.listen(port, () => console.log("Server run at 3000"))
Sekarang buka localhost:3000 dan kalian akan melihat tulisan "Server telah berjalan" yang artinya sekarang kita tinggal menambah route dan view pada server tersebut
Sekarang buat folder baru bernama views dan buat file baru bernama home.ejs di dalam folder views tersebut

Struktur file
Ketikan kode berikut ke dalam file home.ejs

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="display: table;margin: 0 auto">
<nav aria-label="Page navigation example">
<ul class="pagination" id='pagination_ul'>
</ul>
</nav>
</div>
</div>

<script>

function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;

if (query === url || query === "") return;

for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);

if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}

$(document).ready(function () {
const url = "http://localhost:3000/get_data_guru"
const per_page = 10 //setting agar setiap halaman berisi 10 data
const pagination_ul = document.getElementById("pagination_ul")
var url_now = parseURLParams(window.location.search)
var start = (url_now == null) ? 0 : (url_now.page * per_page) - per_page
console.log(`start ${start}`)
// var index_page = start >= 1 ? (start * per_page) - per_page : 0;
var index_page = 0 + start;
$.ajax({
url: url,
method: "GET",
resultType: "JSON",
data: {
start: start,
page: per_page,
},
success: function (results) {
console.log(results)
const table = document.getElementById("table_guru")
const result_data = results.result.data
const result_rows = results.page_rows / per_page

for (var i = 0; i < result_data.length; i++) {
index_page += 1;
var data = result_data[i]
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
var action = row.insertCell(3)
no.innerHTML = index_page
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`
}
//perulangan untuk membuat tombol halaman sebanyak jumlah pembagian jumlah data di database dengan 10
for (var p = 0; p < result_rows; p++) {
var li = document.createElement("li")
li.innerHTML = `<li class="page-item"><a class="page-link" href="/?page=${p + 1}">${p + 1}</a></li>`
pagination_ul.appendChild(li)
}
}
})
})
</script>
Note : Disana saya menggunakan DOM untuk memasukan data dari API ke dalam table di html, jika kalian belum tau caranya kalian bisa melihat artikel ini Cara Memasukan Data API ke dalam Table di EJS Template
Disana saya membatasi page hanya dengan 10 data per halaman, jika kalian ingin lebih kalian bisa mengganti teks yang bewarna merah lalu saya membuat tombol pagination dengan mengambil data dari result_rows dimana result_rows sendiri adalah hasil bagi dari jumlah semua data pada table di database kita dengan jumlah perhalaman, sebagai contoh saya punya 20 data lalu dibagi 10 maka hasilnya adalah 2 dan DOM akan membuat tombol sebanyak 2 kali

Sekarang ganti file app.js menjadi seperti kode berikut:

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const db = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})

app.route('/get_data_guru')
.get(async function (req, res) {
const { start, page } = req.query
const result = await db.query(`SELECT * FROM master_guru limit ${start},${page}`)
const page_rows = await db.query(`SELECT * FROM master_guru`)
res.send(
{
result: result,
page_rows: page_rows.data.length
}
)
})

app.listen(port, () => console.log("Server run at 3000"))
Note : Disana saya membatasi data dari API dengan query SELECT * FROM master_guru limit ${start},${page} dimana data hanya ditampilkan mulai dari variable start dan dibatasi dengan variable page, dan variable start sendiri kita kirimkan dengan method GET dan variable page_rows berisi semua data dari table yang kemudian diambil jumlahnya dengan page_rows.data.length lalu dikirimkan dengan res.send() dan result sendiri adalah data dari hasil query

Sekarang jalankan localhost:3000 dan disana kalian akan melihat seperti gambar dibawah dan klik tombol pagination maka data di website kalian akan berubah sesuai page

Gambar localhost:3000 pada halaman 1

Lalu pada halaman 2

Gambar localhost:3000 pada halaman 2

Taraa.... pagination telah jadi. Sekarang kalian hanya tinggal menambahkan data sebanyak mungkin tanpa takut halaman pada website kalian akan menampilkan banyak data hingga ratusan bahkan ribuan dalam satu halaman

Berikut semua file dalam membuat pagination di EJS

app.js

const express = require('express')

const app = express()

var bodyParser = require('body-parser');

const db = require('./db_config')

const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

app.route('/get_data_guru')

.get(async function (req, res) {

const { start, page } = req.query

console.log(start,page)

const result = await db.query(`SELECT * FROM master_guru limit ${start},${page}`)

const page_rows = await db.query(`SELECT * FROM master_guru`)

res.send(

{

result: result,

page_rows: page_rows.data.length

}

)

})

app.listen(port, () => console.log("Server run at 3000"))

home.ejs

<thead>

<tr>

<th scope="col">Mapel</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</ul>

</nav>

</div>

function parseURLParams(url) {

var queryStart = url.indexOf("?") + 1,

queryEnd = url.indexOf("#") + 1 || url.length + 1,

query = url.slice(queryStart, queryEnd - 1),

pairs = query.replace(/\+/g, " ").split("&"),

parms = {}, i, n, v, nv;

if (query === url || query === "") return;

for (i = 0; i < pairs.length; i++) {

nv = pairs[i].split("=", 2);

n = decodeURIComponent(nv[0]);

v = decodeURIComponent(nv[1]);

if (!parms.hasOwnProperty(n)) parms[n] = [];

parms[n].push(nv.length === 2 ? v : null);

}

return parms;

}

$(document).ready(function () {

const url = "http://localhost:3000/get_data_guru"

const per_page = 10 //setting agar setiap halaman berisi 10 data

const pagination_ul = document.getElementById("pagination_ul")

var url_now = parseURLParams(window.location.search)

var start = (url_now == null) ? 0 : (url_now.page * per_page) - per_page

console.log(`start ${start}`)

// var index_page = start >= 1 ? (start * per_page) - per_page : 0;

var index_page = 0 + start;

$.ajax({

url: url,

method: "GET",

resultType: "JSON",

data: {

start: start,

page: per_page,

success: function (results) {

console.log(results)

const table = document.getElementById("table_guru")

const result_data = results.result.data

const result_rows = results.page_rows / per_page

for (var i = 0; i < result_data.length; i++) {

index_page += 1;

var data = result_data[i]

var row = table.insertRow(i + 1)

var no = row.insertCell(0)

var nama = row.insertCell(1)

var mapel = row.insertCell(2)

var action = row.insertCell(3)

no.innerHTML = index_page

nama.innerHTML = data.Name

mapel.innerHTML = data.Mapel

const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`

}

//perulangan untuk membuat tombol halaman sebanyak jumlah pembagian jumlah data di database dengan 10

for (var p = 0; p < result_rows; p++) {

var li = document.createElement("li")

li.innerHTML = `<li class="page-item"><a class="page-link" href="/?page=${p + 1}">${p + 1}</a></li>`

pagination_ul.appendChild(li)

}

})

</script>

db_config.js

const mariadb = require('mariadb')

const conn = mariadb.createConnection({

host: "localhost",

user: "root",

database: "sekolah",

password: "password",

port: 3307,

});

const query = function (params) {

return new Promise(function (resolve, reject) {

conn.then(async (conn) => {

try {

const result = await conn.query(params)

resolve({

success: true,

data: result

})

} catch (e) {

console.log(e)

reject({

success: false

})

}

})

}

module.exports = { query }

Nah itulah tadi Cara Membuat Pagination di ExpressJS, dari BapakNgoding.

Baca Juga : Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS

Sekian dari saya dan mohon maaf bila ada kesalahan kata, dan jangan lupa share artikel ini untuk tetap mendukung perkembangan artikel kami.

Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS

2019-12-05T16:02:00.000+07:00

Biasanya kebanyakan programmer akan memvalidasi apakah email yang dimasukan user saat mendaftar sudah benar, atau nomor teleponya dengan mengirimkan sebuah kode validasi tertentu entah melalui SMS jika yang ingin diverifikasi adalah nomor telepon user tersebut, atau bisa juga dengan mengirimkan sebuah email berisi kode tertentu kepada user baru dimana kode tersebut akan diminta oleh aplikasi saat user mendaftar akun.

Sumber :
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT62idUBX0tXm-rjjDm-G6XYrtKTeDUrdvYeRSxetKtJalrnFj7Lg&s

Nah kebanyakan email berisi kode tersebut dikirimkan dengan otomatis oleh sebuah library atau fungsi tertentu saat ada user mendaftar baru, jadi bukan admin yang mengirimkannya melainkan sebuah fungsi yang sudah dibuat sedemikian rupa agar mengirim email otomatis, nah pada artikel ini BapakNgoding akan membuat aplikasi pengirim email otomatis dengan menggunakan javascript.

Nah tanpa panjang lebar lagi mari kita langsung saja ke langkah-langkahnya seperti berikut ini :

Buat project javascript baru seperti biasanya yaitu dengan mengetikan npm init pada Terminal/CMD anda
Setelah selesai akan terdapat file package.json sekarang kita install package emailjs dengan mengetikan perintah berikut pada Terminal/CMD anda:

npm install emailjs
npm install express
npm install ejs
npm install body-parser
Note : emailjs sendiri adalah sebuah package/library javascript yang bisa mengirimkan email secara otomatis.

Sekarang buat file baru yaitu email_config.js dan ketikan code berikut :

var email = require('emailjs/email')

var server = email.server.connect({
user: "alamat email anda",
password: "password email anda",
host: "smtp.gmail.com",
port: 587,
tls: true
})

module.exports = { server }

Note: Ganti text yang saya warnai merah dengan alamat email dan password email
anda lalu kita mengexport nya dengan perintah module.export = {server}

Sekarang buat file baru bernama app.js lalu ketikan kode berikut ini

const email_config = require('./email_config')
const express = require('express')
const app = express()
const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({ extended: true }))

app.post('/kirim_email', function (req, res) {
const { subject, text, email_tujuan } = req.body
email_config.server.send({
text: text,
from: "pemilutunanetra@gmail.com",
to: email_tujuan,
subject: subject
}, function (err, msg) {
console.log(msg)
msg != null ? res.send(msg) : res.send(err)
})
})

app.listen(3000, () => console.log('Run in localhost:3000'))
Note : Disana saya membuat route dengan app.post(/kirim_email) yang artinya kita akan memanggil route tersebut di localhost:3000/kirim_email

Setelah selesai sekarang jalankan dengan mengetikan node app.js, dan jangan lupa pastikan kalau komputer/laptop anda telah terhubung ke internet!
Sekarang coba pengirim email anda dengan menggunakan postman, yaitu dengan membuka postman lalu masukan url http://localhost:3000/kirim_email, dan juga jangan lupa pilih POST, kemudian masukan email_tujuan, subject, dan text sehingga seperti gambar berikut

Gambar postman setelah mengirim email

Sekarang coba cek email tujuan yang sobat masukan pada postman tadi, jika berhasil maka akan keluar email yang tadi kita kirimkan pada inbox email tujuan sobat.

Gambar jika email yang dikirimkan oleh emailjs telah masuk

Nah itulah tadi Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS, dari BapakNgoding.

Baca Juga : Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Sekian dari saya dan mohon maaf bila ada kesalahan kata, dan jangan lupa share artikel ini untuk tetap mendukung perkembangan artikel kami.

Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

2019-12-03T00:52:00.000+07:00

Setelah kemarin kita membahas tentang Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB kali ini saya akan membuat CRUD lagi namun dengan cara lain khusunya di bagian API.

Yap kali ini saya akan membagikan artikel membuat CRUD dengan menggunakan Knex.
Sebelum lanjut alangkah baiknya jika kita tau terlebih dahulu apa itu Knex.

Knex adalah salah satu query builder yang dimiliki Javascript dan NodeJS, query builder sendiri adalah pengganti query SQL yang biasanya kita ketikan secara manual seperti jika kita biasanya mengetikan "SELECT * FROM nama_table" untuk menampilkan data dari suatu table maka jika menggunakan Knex kita hanya perlu mengetikan knex('nama_table'), terlihat lebih simple bukan?
selain itu menggunakan query builder juga memberikan kita beberapa keuntungan seperti

Mempersingkat waktu pembuatan query SQL
Mengurangi dan memperpenggunaan kata dalam suatu script program
Membantu kita saat ingin migrate database

Di point no 3 saya menyebutkan tentang migrate database, dimana migrate database sendiri adalah perpindahan antara database satu ke database lain seperti MySQL ke Oracle tentu saja keduanya memiliki query yang berbeda kan, nah dengan query builder kita tidak perlu menggantinya lagi di program kita karena query builder akan selalu menyesuaikannya dengan database kita.
Pada saat artikel ini ditulis Knex telah mendukung Postgres, MSSQL, MySQL, MariaDB, SQLite3, dan Oracle

Sekarang mari kita lanjut ke langkah penggunaanya sebagai berikut namun sebelum lanjut saya sarankan membaca artikel saya tentang Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB karena disana cara kerjanya sama dengan artikel ini cuma berbeda di bagian API nya saja.

Install Knex dan Konfigurasi Database

Buat project baru dengan mengetikan npm init pada CMD/Terminal
Install package-package berikut dengan cara mengetikannya pada CMD/Terminal anda

npm install express
npm install ejs
npm install mysql
npm -g install nodemon
npm install knex
Note : Pada Knex database MariaDB dan MySQL sama-sama menggunakan package mysql
Buat database pada contoh ini saya membuat database dengan nama sekolah

Gambar : Struktur Database

Sekarang buat field master_guru dengan isi sebagai berikut :

Gambar : Struktur table master_guru
Buat file baru bernama db_config.js lalu masukan kode berikut ke dalamnya :

const knex = require('knex')({
client: 'mysql',
connection:{
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
}
})

module.exports = { knex }
Note : Ganti text bewarna merah dengan konfigurasi anda dan untuk client sesuaikan dengan database anda, untuk MariaDB dan MySQL sama-sama menggunakan mysql

Buat file app.js lalu ketikan kode berikut ke dalamnya :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const { knex } = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.get('/', function (req, res) {
res.send('Welcome to BapakNgoding')
})

app.listen(port, () => console.log("Server run at 3000"))
Disana terlihat kita mengimport knex package dari file db_config.js, sekarang kita dapat menjalankannya dengan mengetikan nodemon app.js pada CMD lalu membukanya di localhost:3000
Buat folder views dan buat file home.ejs, edit_guru.ejs, dan add_guru.ejs di dalamnya seperti gambar berikut :

Gambar Struktur file

Nah persiapan kita telah selesai sekarang mari kita buat CRUD nya dengan langkah-langkah berikut :

CREATE

Langkah untuk membuat CREATE dengan Knex adalah :

Buka file app.js lalu tambahkan kode berikut :

app.route('/tambah_guru')
.get((req, res) => {
res.render("../views/add_guru.ejs")
})
.post(async (req, res) => {
const { name, mapel } = req.body
const result = await knex('master_guru').insert({ name: name, mapel: mapel })
res.json(result)
})

Note : Disana saya memasukan data ke table master_guru dengan menggunakan knex('master_guru').insert({}) sebagai pengganti query "INSERT INTO ... " dimana master_guru adalah nama table yang akan kita ditambah datanya

Buka file add_guru.ejs lalu tambahkan juga kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Tambah Guru +</h1>
<input type="text" placeholder="Nama Guru" id="input_name"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="tambah_guru()">
</div>

<script>
function tambah_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/tambah_guru',
method: "POST",
data: {
name: name,
mapel: mapel,
},
success: function (result) {
if(result){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>
Setelah selesai sekarang buka browser dan ketikan localhost:3000/tambah_guru dan masukan data guru yang ingin dimasukan seperti gambar di bawah :

Gambar localhost:3000/tambah_guru
Selesai sekarang coba buka database anda dan lihat apakah data guru yang baru sudah berhasil dimasukan, jika belum silahkan coba lagi langkah diatas.

READ

Setelah membuat CREATE sekarang kita akan menampilkan data dari table master_guru ke dalam website kita.

Buka file app.js lalu tambahkan kode berikut ke dalamnya :

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await knex('master_guru')
res.send(result)
})
Note : Disana saya menggunakan query knex('master_guru') sebagai pengganti query "SELECT * FROM master_guru"

Buka file home.ejs lalu masukan kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<a href="/tambah_guru">+ Tambah Guru</a>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<script>
$(document).ready(function () {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "POST",
resultType: "JSON",
success: function (results) {
const table = document.getElementById("table_guru")
const result_data = results
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
console.log(data)
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
var action = row.insertCell(3)
no.innerHTML = i + 1
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`
action.innerHTML = `<a href='/edit_guru?${params_get}'>Edit</a>
|<a href='/delete_guru?id=${data.GuruID}'>Delete</a> `
}
}
})
})
</script>
Note : Disaya saya menggunakan DOM untuk memasukan data dari API ke dalam table saya, kalian bisa menemukan caranya di link berikut Cara Memasukan Data API ke dalam Table di EJS Template

Setelah selesai sekarang coba buka localhost:3000 maka tampilannya akan seperti gambar di bawah

Gambar localhost:3000

UPDATE

Cara untuk membuat query update dengan menggunakan Knex adalah sebagai berikut :

Buka file app.js lalu tambahkan kode berikut :

app.route('/edit_guru')
.get(function (req, res) {
const { id, name, mapel } = req.query
res.render('../views/edit_guru.ejs', {
id: id,
name: name,
mapel: mapel
})
})
.post(async function (req, res) {
const { id, name, mapel } = req.body
const result = await knex('master_guru').where('GuruID', '=', id)
.update({
Name: name,
Mapel: mapel
})
result_res = result == 1 ? true : false //masukan nilai true jika result = 1 dan false jika result = 0
console.log(result_res)
res.send(result_res)
})
Note : Disana saya menggunakan knex('master_guru').where('GuruID', '=', id).update({ Name: name, Mapel: mapel}) dimana jika kita querykan biasa akan menjadi "UPDATE master_guru SET Name = 'name', Mapel = 'Mapel' WHERE id='id'"

Buka file edit_guru.ejs dan tambahkan kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Edit Guru </h1>
<input type="text" placeholder="Nama Guru" id="input_name" value="<%=name%>"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel" value="<%=mapel%>"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="edit_guru()">
</div>

<script>
function edit_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/edit_guru',
method: "POST",
data: {
id: '<%= id %>',
name: name,
mapel: mapel,
},
success: function (result) {
alert("Data berhasil diperbarui")
}
})
}
</script>
Setelah selesai sekarang buka localhost:3000/ lalu pilih salah satu guru yang ingin diperbarui dan klik edit
Setelah masuk ke halaman edit maka isikan data baru yang ingin diperbarui dari data guru yang kalian pilih sebelumnya lalu klik simpan

Gambar setelah tombol simpan ditekan

DELETE

Nah untuk perintah Delete menggunakan Knex adalah sebagai berikut :

Buka file app.js lalu tambahkan kode berikut :

app.route('/delete_guru')
.get(async function (req, res) {
const { id } = req.query
const result = await knex('master_guru').where('GuruID', '=', id)
.del()
res.redirect('/')
})
Note : Disana saya menggunakan knex('master_guru').where('GuruID', '=', id)del() sebagai pengganti query "DELETE FROM master_guru WHERE GuruID='id'"

Sekarang buka localhost:3000 lalu pilih salah satu data guru yang ingin dihapus setelah itu klik tombol delete dan Taraaa.. data tersebut telah dihapus

Gambar sebelum ditekan tombol delete

Gambar setelah ditekan tombol delete

Nah itulah "Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB" Berikut semua file saya beserta isinya

app.js

const express = require('express')

const app = express()

var bodyParser = require('body-parser');

const { knex } = require('./db_config')

const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/tambah_guru')

.get((req, res) => {

res.render("../views/add_guru.ejs")

})

.post(async (req, res) => {

const { name, mapel } = req.body

const result = await knex('master_guru').insert({ name: name, mapel: mapel })

res.json(result)

})

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

.post(async function (req, res) {

const result = await knex('master_guru')

res.send(result)

})

app.route('/edit_guru')

.get(function (req, res) {

const { id, name, mapel } = req.query

res.render('../views/edit_guru.ejs', {

id: id,

mapel: mapel

})

.post(async function (req, res) {

const { id, name, mapel } = req.body

const result = await knex('master_guru').where('GuruID', '=', id)

.update({

Name: name,

Mapel: mapel

})

result_res = result == 1 ? true : false //masukan nilai true jika result = 1 dan false jika result = 0

console.log(result_res)

res.send(result_res)

})

app.route('/delete_guru')

.get(async function (req, res) {

const { id } = req.query

const result = await knex('master_guru').where('GuruID', '=', id)

.del()

res.redirect('/')

})

app.listen(port, () => console.log("Server run at 3000"))

db_config.js

const knex = require('knex')({
client: 'mysql',
connection:{
host: "localhost",
user: "root",
database: "sekolah",
password: "rafael",
port: 3307,
}
})

module.exports = { knex }

add_guru.ejs

edit_guru.ejs

home.ejs

Nah itulah semua file saya untuk Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Sekian dari BapakNgoding dan mohon maaf bila ada kesalahan kata atau apapun itu dan jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

2019-12-01T01:03:00.000+07:00

Pada artikel kali ini BapakNgoding akan membuat sebuah artikel tentang CRUD dimana kali ini saya akan membuat CRUD menggunakan NodeJS, ExpressJS, dan MariaDB sebagai databasenya. Namun sebelum saya masuk ke pokok pembahasannya mari kita pelajari dulu apa itu CRUD.

CRUD adalah singkatan dari (Create, Read, Update, Delete) yang artinya adalah sebagai berikut :

Create adalah membuat atau memasukan data baru ke dalam sebuah database
Read adalah menampilkan hasil data dari database ke dalam sebuah Website
Update adalah mengubah atau memperbarui suatu data dari database
Delete adalah menghapus suatu data dari database

Seperti itulah kurang lebihnya pengertian CRUD, dan tentu saja semua itu dilakukan dengan menggunakan API dan bukan manual dari databasenya hehe..

Nah tanpa panjang lebar lagi mari kita ke pokok pembahasan.

Pertama-tama buat project baru yaitu dengan mengetikan npm init pada Terminal/CMD anda
Setelah langkah 1 selesai maka akan terdapat file package.json di directory tempat anda melakukan langkah 1
Setelah selesai sekarang ketikan perintah di bawah ini pada Terminal/CMD anda

npm install express
npm install mariadb
npm install ejs
Buat file baru bernama App.js dan ketikan code berikut :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.get('/', function (req, res) {
res.render("../views/home.ejs")
})

app.listen(port, () => console.log("Server run at 3000"))
Buat folder views dan buat file home.ejs, edit_guru.ejs, add_guru.ejs, lalu buat file db_config.js hingga memiliki struktur seperti gambar berikut :

Gambar Struktur semua file

Nah sekarang coba jalankan dengan mengetikan perintah berikut :

node app.js

Jika sudah seperti gambar di atas sekarang coba buka localhost:3000 di browser dengan cara mengetikannya di url browser anda, jika berhasil dibuka maka kita ke langkah selanjutnya yaitu membuat Database MariaDB.

Untuk membuat database sebenarnya cukup simple dalam contoh ini saya akan membuat sebuah database dengan nama sekolah dengan struktur sebagai berikut :

struktur database sekolah

Dimana isi dari table master_guru adalah sebagai berikut :

Gambar daftar field di table master_guru

Nah selesai membuat database sekolah sekarang mari kita mulai membuat CRUD, dengan langkah-langkah sebagai berikut :

Setting Database

Nah langkah pertama sebelum membuat CRUD adalah kita harus membuat sebuah file db_config.js dimana didalamnya terdapat konfigurasi untuk menyambungkan API kita ke database kita.

Tambah kode berikut ke dalam file db_config.js

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }

Note : Ganti text yang bewarna merah sesuai dengan konfigurasi Database MariaDB anda
Sekarang save dan file konfigurasi telah siap lalu import ke dalam file app.js dengan menambahkan kode berikut ke dalam file app.js

const db = require('./db_config')
Nah sekarang kita bisa menggunakan fungsi query yang berada di dalam file db_config ke file app.js dimana db tersebut akan kita gunakan untuk mengeksekusi Query SQL

CREATE

Langkah untuk membuat CREATE atau menambah data pada database melalui website adalah sebagai berikut :

Tambah kode berikut di dalam file app.js

app.route('/tambah_guru')
.get((req, res) => {
res.render("../views/add_guru.ejs")
})
.post(async (req, res) => {
const { name, mapel } = req.body
const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)
res.json(result)
})
Tambahkan kode berikut ke dalam file add_guru.ejs

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Tambah Guru +</h1>
<input type="text" placeholder="Nama Guru" id="input_name"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="tambah_guru()">
</div>

<script>
function tambah_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/tambah_guru',
method: "POST",
data: {
name: name,
mapel: mapel,
},
success: function (result) {
if(result.success){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>

Note : Disana saya menggunakan ajax sebagai perantara API, namun kalian bisa menggunakan apapun seperti XMLHttpRequest, dll

Nah sekarang coba buka localhost:3000/tambah_guru dan masukan nama serta mapel guru, jika data berhasil dimasukan maka akan terlihat seperti gambar berikut :

Gambar hasil akhir menambah data di table_master guru jika sukses

Read

Nah sekarang kita akan menampilkan data dari table master_guru ke dalam website kita dengan menggunakan langkah-langkah berikut :

Tambahkan kode berikut ke dalam file app.js

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await db.query('SELECT * FROM master_guru')
res.send(result)
})
Tambahkan kode berikut ke dalam file home.ejs

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<a href="/tambah_guru">+ Tambah Guru</a>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<script>
$(document).ready(function () {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "POST",
resultType: "JSON",
success: function (results) {
const table = document.getElementById("table_guru")
const result_data = results.data
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
console.log(data)
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
var action = row.insertCell(3)
no.innerHTML = i + 1
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`
action.innerHTML = `<a href='/edit_guru?${params_get}'>Edit</a>
|<a href='/delete_guru?id=${data.GuruID}'>Delete</a> `
}
}
})
})
</script>

Disana saya menggunakan table dan memasukan data dari API ke dalam table menggunakan DOM, jika kalian belum tau caranya kalian bisa lihat artikel berikut : Cara Memasukan Data API ke dalam Table di EJS Template
Sekarang coba buka localhost:3000/ dan jika telah berhasil maka akan keluar data guru-guru di dalam table master_guru seperti gambar berikut:

Gambar halaman utama setelah dilakukan penambahan guru

UPDATE

Nah sekarang kita akan membuat update atau halaman untuk mengubah data di table master_guru melalui website kita dengan langkah-langkah berikut :

Tambah kode berikut ke dalam file app.js

app.route('/edit_guru')
.get(function (req, res) {
const { id, name, mapel } = req.query
res.render('../views/edit_guru.ejs', {
id: id,
name: name,
mapel: mapel
})
})
.post(async function (req, res) {
const { id, name, mapel } = req.body
const result = await db.query(`UPDATE master_guru SET Name='${name}', Mapel='${mapel}' WHERE GuruID='${id}'`)
res.send(result)
})
Sekarang tambahkan juga kode berikut ke dalam file edit_guru.ejs

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Edit Guru </h1>
<input type="text" placeholder="Nama Guru" id="input_name" value="<%=name%>"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel" value="<%=mapel%>"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="edit_guru()">
</div>

<script>
function edit_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/edit_guru',
method: "POST",
data: {
id: '<%= id %>',
name: name,
mapel: mapel,
},
success: function (result) {
if (result.success) {
alert("Data berhasil diperbarui")
} else {
alert("Gagal")
}
}
})
}
</script>
Note : arti dari <%= id %>, <%= name %> , <%= mapel %> disana adalah saya mengambil parameter dari file app.js sebelumnya yaitu :

res.render('../views/edit_guru.ejs', {
id: id,
name: name,
mapel: mapel
})
Sekarang coba pilih salah satu data guru dan tekan tombol edit di halaman localhost:3000 lalu masukan data terbarunya seperti gambar berikut:

Gambar hasil akhir dari edit guru jika berhasil

Jika sudah maka data akan otomatis terganti seperti berikut :

Gambar data setelah di update

DELETE

Nah yang terakhir adalah delete dimana kita akan menghapus data di table master_guru melalui website dengan langkah-langkah berikut :

Tambahkan kode berikut ke dalam file app.js

app.route('/delete_guru')
.get(async function (req, res) {
const { id } = req.query
const result = await db.query(`DELETE FROM master_guru WHERE GuruID='${id}'`)
res.redirect('/')
})

Note : Disana saya menghapus data di table master_guru berdasarkan id yang diberikan di parameter GET

Sekarang coba pilih salah satu data guru dan tekan tombol delete di halaman localhost:3000, jika berhasil maka data akan langsung terhapus seperti berikut :

Gambar data guru setelah dihapus

Nah itulah tadi beberapa caranya, berikut adalah isi kode dari semua file yang tadi kita buat :

App.js

const express = require('express')

const app = express()

var bodyParser = require('body-parser');

const db = require('./db_config')

const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/tambah_guru')

.get((req, res) => {

res.render("../views/add_guru.ejs")

})

.post(async (req, res) => {

const { name, mapel } = req.body

const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)

res.json(result)

})

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

.post(async function (req, res) {

const result = await db.query('SELECT * FROM master_guru')

res.send(result)

})

app.route('/edit_guru')

.get(function (req, res) {

const { id, name, mapel } = req.query

res.render('../views/edit_guru.ejs', {

id: id,

mapel: mapel

})

.post(async function (req, res) {

const { id, name, mapel } = req.body

const result = await db.query(`UPDATE master_guru SET Name='${name}', Mapel='${mapel}' WHERE GuruID='${id}'`)

res.send(result)

})

app.route('/delete_guru')

.get(async function (req, res) {

const { id } = req.query

const result = await db.query(`DELETE FROM master_guru WHERE GuruID='${id}'`)

res.redirect('/')

})

app.listen(port, () => console.log("Server run at 3000"))

db_config.js

const mariadb = require('mariadb')

const conn = mariadb.createConnection({

host: "localhost",

user: "root",

database: "sekolah",

password: "rafael",

port: 3307,

});

const query = function (params) {

return new Promise(function (resolve, reject) {

conn.then(async (conn) => {

try {

const result = await conn.query(params)

resolve({

success: true,

data: result

})

} catch (e) {

console.log(e)

reject({

success: false

})

}

})

}

module.exports = { query }

home.ejs

<a href="/tambah_guru">+ Tambah Guru</a>

<thead>

<tr>

<th scope="col">Mapel</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

$(document).ready(function () {

const url = "http://localhost:3000/"

$.ajax({

url: url,

method: "POST",

resultType: "JSON",

success: function (results) {

const table = document.getElementById("table_guru")

const result_data = results.data

for (var i = 0; i < result_data.length; i++) {

var data = result_data[i]

console.log(data)

var row = table.insertRow(i + 1)

var no = row.insertCell(0)

var nama = row.insertCell(1)

var mapel = row.insertCell(2)

var action = row.insertCell(3)

no.innerHTML = i + 1

nama.innerHTML = data.Name

mapel.innerHTML = data.Mapel

const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`

action.innerHTML = `<a href='/edit_guru?${params_get}'>Edit</a>

|<a href='/delete_guru?id=${data.GuruID}'>Delete</a> `

}

})

</script>

add_guru.ejs

<h1>Tambah Guru +</h1>

</div>

function tambah_guru() {

const name = document.getElementById("input_name").value

const mapel = document.getElementById("input_mapel").value

$.ajax({

url: 'http://localhost:3000/tambah_guru',

method: "POST",

data: {

mapel: mapel,

success: function (result) {

if(result.success){

alert("Data berhasil dimasukan")

}else{

alert("Gagal")

}

})

}

</script>

edit_guru.ejs

</div>

function edit_guru() {

const name = document.getElementById("input_name").value

const mapel = document.getElementById("input_mapel").value

$.ajax({

url: 'http://localhost:3000/edit_guru',

method: "POST",

data: {

id: '<%= id %>',

mapel: mapel,

success: function (result) {

if (result.success) {

alert("Data berhasil diperbarui")

} else {

alert("Gagal")

}

})

}

</script>

Baca Juga : Mengenal Class, Method Static dan Non Static Serta Contohnya di Java

Nah itulah tadi beberapa Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB.

Sekian dari saya dan mohon maaf bila ada kesalahan kata atau apapun itu.

Jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

Mengenal Class, Method Static dan Non Static Serta Contohnya di Java

2019-11-29T19:49:00.000+07:00

Pada artikel kali ini BapakNgoding akan membahas pengertian tentang "Apa itu Method perbedaan Method Static dan Non Static di Java".

Mungkin bagi kalian yang sudah lama mengenal dan menggunakan java sudah tidak asing lagi dengan apa itu method dan perbedaan antara method static dan non static di java, namun kebanyakan mereka sudah mengetahui method dan cara penggunaanya namun belum tahu apa perbedaan method static dan non static, maka dari itu kali ini BapakNgoding akan membahas mengenai Method dan seputarnya.

Apa itu Method?

Method adalah sebuah fungsi yang dibuat oleh programmer dan bertujuan untuk mempermudah pengerjaan suatu program, adapun kelebihan-kelebihan dari membuat fungsi sendiri adalah sebagai berikut :

Mempermudah programmer untuk mengubah suatu fungsi karena hanya fungsi tersebut yang diubah tanpa mengganggu fungsi lain.
Merapikan struktur script program sehingga tidak semuanya dimasukan dalam method main() di java
Mempermudah pembagian penugasan dalam menulis suatu script dalam tim, misal alex ditugaskan untuk membuat fungsi A dan tony ditugaskan untuk memperbaiki fungsi B yang ternyata ditemukan BUG.
Memperpendek banyak baris script coding dalam suatu file

Itulah beberapa manfaat dan kelebihan dalam menggunakan fungsi, tentu saja masih banyak kelebihan dan manfaat lainnya, nah sekarang mari kita ke materi selanjutnya yaitu static.

Apa itu Static?

Static artinya kita tidak perlu membuat suatu object untuk method tersebut, sebagai contoh kita tidak perlu membuat NamaMethod methodku = new NamaMethod(); tetapi langsung ke method tersebut jika kita menggunakan Static namun jika kita tidak menggunakan Static maka kita harus mendeklarasikan fungsi dengan NamaMethod methodku = new NamaMethod();
nah sekarang mari kita ke materi selanjutnya yaitu pengembalian nilai atau return;

Apa itu Return?

Return artinya kita membuat fungsi yang mengembalikan suatu nilai tertentu sebagai contoh berikut.

static int penjumlahan(int a, int b) {
int hasil = a + b;
return a + b; //mengembalikan nilai a + b
}

Disana kita bisa melihat jika fungsi penjumlahan mengembalikan nilai hasil, dimana variable berisi hasil adalah hasil penjumlahan dari a + b, dimana nilai yang dikembalikan nanti akan disimpan ke dalam variabel pemanggil jika ada, lalu apa itu void, void artinya fungsi tersebut tidak mengembalikan nilai apapun kepada pemanggil.

Nah berikut contoh dari penerapan method sederhana.

Buat project JavaApplication baru dalam kasus ini saya menggunakan netbeans

Membuat project baru di java
Ketikan script berikut di luar method main

static int penjumlahan(int a, int b) {
int hasil = a + b;
return a + b; //mengembalikan nilai a + b
}
Ketikan juga script berikut di dalam method main

int hasil_penjumlahan = penjumlahan(5, 2);
System.out.println(hasil_penjumlahan)
Berikut adalah hasil akhir dari program tersebut saat dijalankan

Hasil akhir method

Nah itulah penerapan method sederhana di java, namun kita belum selesai. kebanyakan artikel hanya menjelaskan sampai disini saja namun kali ini saya akan membuat contoh perbedaan saat menggunakan static dan non static.

Baca Juga : Perbandigan React Native dan Flutter

Penerapan dengan static :

Buat project baru di netbeans dengan nama StaticExample.
Buat class baru di dalam package staticexample beri nama PenjumlahanClass sehingga struktur project kita seperti berikut :

Struktur Static Example
Ketikan script code berikut ke dalam class PenjumlahanClass yang baru kita tambahkan

static int angka1;
static int angka2;

static int penjumlahan() {
int hasil = angka1 + angka2;
return hasil;
}
Sehingga menjadi seperti berikut :

PenjumlahanClass dengan Static
Tambahkan juga script code berikut ke dalam class StaticExample di dalam method main()

PenjumlahanClass.angka1 = 3;
PenjumlahanClass.angka2 = 2;
int hasil_penjumlahan = PenjumlahanClass.penjumlahan();
System.out.println("Hasil Penjumlahan: " + hasil_penjumlahan);
Sehingga menjadi seperti berikut :

StaticExample Class dengan Static
Sekarang jika kita jalankan maka code tersebut akan dapat dijalankan dengan sukses, namun berbeda lagi jika kita hapus static pada PenjumlahanClass, dimana jika kita coba jalankan maka akan error.

StaticExample dengan static ketika dijalankan

Sekarang kita terapkan jika tanpa static :

Ganti script code di dalam PenjumlahanClass menjadi seperti berikut

int angka1;
int angka2;

int penjumlahan() {
int hasil = angka1 + angka2;
return hasil;
}
Sehingga menjadi seperti berikut :

PenjumlahanClass tanpa menggunakan static
Ganti juga script code di dalam method main() pada StaticExample menjadi seperti berikut

PenjumlahanClass myClass = new PenjumlahanClass();
myClass.angka1 = 3;
myClass.angka2 = 2;
int hasil_penjumlahan = myClass.penjumlahan();
System.out.println("Hasil Penjumlahan: " + hasil_penjumlahan);
Terlihat jelas perbedaanya bukan, disana saya membuat object baru dengan menggunakan PenjumlahanClass myClass = new PenjumlahanClass(); sedangkan pada contoh dengan static kita tanpa menambahkan code tersebut.

StaticExample tanpa menggunakan static
Sekarang jalankan program sobat dan lihat hasilnya dimana code akan tereksekusi dengan baik seperti berikut :

StaticExample tanpa menggunakan static ketika dijalankan

Nah sekarang kalian sudah paham kan seputar tentang method, dan sekarang waktunya saya pamit dan selamat berjumpa lagi kesempatan selanjutnya.

Sekian dari saya mohon maaf jika ada kesalahan kata.

Cara Membuat Voice to Text di React Native

2019-11-27T17:06:00.000+07:00

Voice To Text ?

Apa Perbedaanya dengan Text to Voice ?

Mungkin banyak dari kalian yang tau cara membuat Text to Voice seperti yang telah saya bahas pada artikel sebelumnya tentang Cara Membuat Text to Voice di React Native? Namun kesulitan untuk membuat kebalikannya yaitu Voice to Text, atau mungkin juga kalian pernah membuatnya namun dengan menggunakan Google API, IBM Watson atau lainnya yang biasanya ribet. Nah kali ini saya akan mencoba membuat Voice to Text tanpa menggunakan API apapun dan hanya menggunakan Package react-native-voice.

Sumber
https://miro.medium.com/max/556/1*NhOH4X9wKWfO6o8faYFf-w.png

Nah tanpa basa-basi lagi mari langsung saja kita mencoba membuatnya dengan langkah-langkah sebagai berikut:

1. Download dan pasang react-native-voice di project kalian dengan mengetikan perintah berikut di CMD/Terminal yang sudah berlokasi di directory folder project kalian :

npm install react-native-voice

2. Linkkan project anda dengan package yang telah kita install tadi dengan mengetikan perintah berikut di CMD:

react-native link react-native-voice

2. Import package react-native-voice ke file kita dengan menambahkan syntax berikut:

import Voice from 'react-native-voice';

3. Pastekan code berikut ke dalam file anda

constructor(props) {
super(props)
this.state = {
started: null,
recognized: null,
results: null.
}

Voice.onSpeechStart = this.onSpeechStart.bind(this)
Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this)
Voice.onSpeechResults = this.onSpeechResults.bind(this)

}

Penjelasan:

- Di sana saya membuat sebuah state yang bernama results yang berfungsi sebagai variable penampung hasil Voice to Text yang telah kita gunakan

- Di sana saya mendekalarsikan sebuah constructor untuk fungsi Voice dimana saya menuliskan sebagai berikut :

A. Voice.onSpeechStart = this.onSpeechStart.bind(this)
- Saat Voice kita mulai atau start maka akan package akan otomatis menyambungkannya dengan fungsi onSpeechStart(e) yang akan kita buat nanti

B. Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this)
- Saat Voice kita mulai atau start maka akan package akan meminta otorisasi kepada pengguna jika package ingin menggunakan microphone, nah hasil nya akan dimasukan ke dalam fungsi onSpeechRecognized(e)

C. Voice.onSpeechResults = this.onSpeechResults.bind(this)
- Saat Voice kita sudah mendapatkan hasil atau telah selesai maka hasilnya akan dimasukan ke dalam fungsi onSpeechResults(e) yang nantinya akan diproses

4. Buat fungsi untuk menangani pemrosesan mulai dari start mengubah voice menjadi text dan berakhir, yang telah kita definisikan di no 3 tadi seperti berikut :

onSpeechStart(e) {
this.setState({
started: '√',
});
}
onSpeechRecognized(e) {
this.setState({
recognized: '√',
});
}
async onSpeechResults(e) {
console.log(e.value)
await this.setState({
results: e.value,
});
}
onStartButtonPress(e) {
console.log("START")
Voice.getSpeechRecognitionServices()
Voice.start('id-ID');
}

Penjelasan:

- Fungsi onSpeechStart(e) berfungsi saat voice perekaman dimulai
- Fungsi onSpeechRecognized(e) berfungsi saat voice dikenali
- Fungsi onSpeechResults(e) berfungsi untuk menganani hasil Voice to Text atau suara kita yang telah direkam dan ditranslatekan menjadi text

- Fungsi onStartButtonPress(e) yaitu fungsi saat tombol ditekan yaitu sebagai berikut:

A. console.log("START") menampilkan start di cmd kita

B. Voice.getSpeechRecognitionServices() untuk meminta otorisasi kepada user bahwa package akan menggunakan fitur microphone di perangkat sobat

C. Voice.start('id-ID') untuk memulai perekaman suara sobat yang nantinya akan ditranslatekan menjadi teks dan disana saya menggunakan id-ID yang artinya saya menggunakan Bahasa Indonesia sebagai pengenalan suaranya, dimana saat user berbicara maka yang harus dibicarakan adalah Bahasa Indonesia dan bukan bahasa inggris. Kita bisa menggubahnya sesuai language code yang dapat kalian lihat disini Language Code

5. Nah sekarang sobat tinggal membuat Button yang berfungsi sebagai tanda jika perekaman suara akan dimulai dan akan memanggil fungsi onStartButtonPress(e)

<Button
title="Mulai Voice to Text"
onPress={() => {
Tts.stop()
this.onStartButtonPress(this) //memanggil fungsi onStartButtonPress()
}}
/>

6. Nah sekarang sobat tinggal menekan tombol tersebut dan coba bicara, nantinya suara yang sobat bicarakan akan ditranslatekan menjadi text, namun tidak semua langsung berhasil. Berikut caranya bagi yang error :

1. Tambah kode berikut ke dalam file NamaProject/android/gradle.properties

android.useAndroidX=true
android.enableJetifier=true

2. Didalam file package.json kalian tambahkan kode berikut didalam "scripts"{ }

"postinstall" : "npx jetify"

3. Install jetifier dengan perintah berikut

npm install --save-dev jetifier
npx jetify

4. Terakhir jalankan file anda dengan perintah berikut di CMD/Terminal yang sudah berada di directory project anda

npx react-native run-android

5. Nah selesai, jika masih belum bisa silahkan comment dibawah nanti akan kami bantu.

Baca Juga : Cara Membuat Text to Voice di React Native

Sekian dari saya BapakNgoding tentang "Cara Membuat Voice to Text di React Native", silahkan kalian comment jika ada masukan atau saran, dan saya mohon maaf sebesar-besarnya jika ada kesalahan kata, dan jangan lupa bagikan artikel kepada teman anda ini jika artikel ini bermanfaat agar teman anda juga mendapat manfaat dari artikel ini dan tetap ikuti perkembangan dari BapakNgoding ya :)

Perbandingan React Native dan Flutter ( React Native vs Flutter )

2019-11-27T00:03:00.000+07:00

Bingung memilih antara belajar Flutter atau React Native ?

Ingin belajar Flutter tapi ragu jika lebih bagus React Native ?

Ya pertanyaan itulah yang sering dibicarakan orang-orang khusunya bagi pemula yang ingin belajar membuat aplikasi Android, kebanyakan dari mereka sulit memilih antara belajar React Native atau Flutter. Nah oleh karena itulah kali ini BapakNgoding akan membuat artikel tentang "Perbandingan React Native dan Flutter", namun bahasan kali ini hanya berdasarkan pandangan dan pengalaman saya. Oke tanpa basa-basi langsung saja kita ke pokok masalah.

Awalnya saya juga bingung memilih bahasa programming untuk membuat aplikasi android, jadi bukan hanya kalian saja ya hehe.., sempat saya mencoba menggunakan cordova di awal saat saya ingin membuat aplikasi android namun pada bahasan kali ini saya hanya akan membahas antara Flutter dan React Native saja karena dua framework itulah yang sedang trending-trending nya saat ini. Sebelum nya saya hanya membuat aplikasi android dengan Java, namun karena pesatnya informasi dan teman saya yang menyarankan saya untuk belajar Flutter maka saya mencoba Flutter dahulu sebelum React Native karena saya berasal dari Java. Mungkin bagi kalian yang berasal dari Java bisa belajar Flutter telebih dahulu karena mirip-mirip berbeda lagi jika kalian berasal dari Javascript maka saya menyarankan belajar React Native terlebih dahulu, jujur menurut saya pribadi perbedaan antara Flutter dan React Native sendiri sangatlah minim yang artinya keduanya memiliki syntax dan cara kerja yang hampir sama. Saya saat migrasi dari Flutter ke React Native pun sempat tidak merasakan perbedaan yang banyak. Alasan saya pindah ke React Native adalah karena saya mencoba mencari library/package yang lebih banyak untuk aplikasi saya, karena menurut saya package milik Javascript atau yang biasa kita sebut npm lebih lengkap daripada Flutter, namun untuk urusan Documentation atau Doc saya lebih suka Doc milik Flutter karena lebih bagus hehe, untuk urusan performa saya masih belum bisa membandingkan karena hanya memiliki sedikit perbedaan, dan untuk urusan lainnya saya kira sama saja. Tergantung selera kita saja untuk memilih dari kedua Framework tersebut. React Native sendiri dikembangkan oleh Facebook dan Flutter sendiri dikembangkan oleh Google. Hmm sama-sama bagus kan 😁. Satu lagi yang saya suka dan keunggulan dari Flutter adalah adanya fitur Flutter Doctor dimana fitur tersebut dapat mengidentifikasi apabila ada kesalahan system yang menjalankan Flutter mulai dari SDK, Android Studio, dll.

Jadi menurut saya inilah point-point penting untuk memilih antara React Native atau Flutter

Jika kalian berasal dari Javascript saya menyarankan untuk menggunakan React Native, begitu juga sebalikanya jika kalian berasal dari Java maka saya menyarankan untuk menggunakan Flutter.
Cobalah semuanya lalu bandingkan sendiri hehe jika mau hehe 😁
Sesuaikan dengan kebutuhan kalian, dimana menurut saya jika menggunakan Flutter aplikasi akan lebih cepat jadi daripada menggunakan React Native dikarenakan terdapat fitur Flutter Doctor tadi
Jangan terlalu lama ragu dan cepat pelajari apa yang kalian yakini, jika tidak nyaman barulah pindah hehe 😁
Ingat setiap developer harus mengikuti perkembangan zaman, maka kita harus beradaptasi dengan adanya fitur-fitur baru.
Pantang menyerah dan tetap semangat

Note:
Artikel ini ditulis berdasarkan pemahaman dan pengalaman saya saja selama menggunakan Flutter dan React Native

Baca Juga : Cara Membuat Text to Voice di React Native

Nah itulah beberapa tips dalam memilih antara React Native atau Flutter menurut BapakNgoding. Sekian dari saya dan mohon maaf sebesar-besarnya jika ada kesalahan kata.

Cara Membuat Text to Voice di React Native

2019-11-25T18:39:00.001+07:00

Apa itu Text to Voice ?

Sumber :
https://miro.medium.com/max/600/1*4cfke5axE_HYZ4-bXDXwtg.jpeg

Mungkin bagi kalian orang IT sudah mengetahui apa itu Text to Voice, namun tidak jarang juga ada yang belum tau apa itu Text to Voice dan bagaimana cara menggunakannya. Nah tenang saja karena kali ini BapakNgoding akan membahas mengenai apa itu Text to Voice dan bagaimana cara menggunakanya di ReactNative. Text to Voice adalah sebuah komponen atau sistem yang digunakan untuk mengubah atau mengonvert Text menjadi Suara atau Bunyi yang nantinya akan digunakan seperti GoogleAssistant. Nah setelah kita tau tentang Text to Voice sekarang kita akan mencoba menggunakannya di React Native, tanpa panjang lebar lagi mari kita coba langsung sesuai langkah-langkah berikut.

1. Download dan install react-native-tts, nah react-native-tts inilah yang nantinya akan kita gunakan untuk mengubah text menjadi suara dengan perintah berikut :

npm install react-native-tts

2. Link kan package yang telah kita download di node-modules kita ke dalam project react native kita dengan menggunakan perintah berikut :

react-native link react-native-tts

3. Import package react-native-tts kedalam project anda dengan menggunakan perintah berikut :

import Tts from 'react-native-tts';

Disana saya mengimport package react-native-tts dan menyimpannya ke variabel Tts

Baca Juga : Cara Membuat Halaman Slide di React Native

4. Buat fungsi untuk menggunakan react-native-tts

function onPressButton() {
Tts.setDefaultRate(0.3)
Tts.speak(
`Hello im Text to Voice`,
{ androidParams: { KEY_PARAM_VOLUME: 10 } }
)
}

Fungsi diatas lah yang nantinya akan kita panggil setelah menekan sebuah tombol yang akan kita buat nantinya, namun sebelum itu saya jelaskan terlebih dahulu arti dari script diatas :

- Disana saya menggunakan fungsi Tts.setDefaultRate(0.3) untuk mengatur kecepatan dari suara yang dihasilkan, jadi semakin besar nilai yang kita masukan maka semakin cepat juga komponen tersebut membaca text kita
- Lalu fungsi KEY_PARAM_VOLUME: 10 adalah untuk mengatur volume dari perangkat kita saat suara tersebut dibacakan

5. Buat button yang akan memanggil fungsi onPressButton() diatas

Jadi fungsi dari button diatas adalah untuk memanggil fungsi onPressButton() yang telah kita buat pada fungsi no 4. Sekarang coba tekan tombol tersebut dan dengarkan suara "Hello im Text to Voice"
yang akan otomatis dibacakan sesuai parameter yang kita masukan, dan Tara... sekarang kita telah menggunakan Text to Voice seperti GoogleAssistant. Mungkin saya juga akan membagikan cara untuk mengubah Voice menjadi Text namun dilain kesempatan ya 😁

Note !

- Apabila belum berhasil silahkan coba hapus aplikasi di perangkat anda dan coba install ulang lagi lalu ikuti lagi langkah diatas. Atau jika masih belum bisa silahkan ketik lewat komentar di bawah

Sekian artikel dari saya tentang "Cara Membuat Text to Voice di React Native". Semoga apa yang saya bagikan ini bisa berguna bagi teman-teman sekalian, dan saya mohon maaf sebesar-besarnya bila ada kata-kata saya yang salah atau kurang berkenan di hati sobat sekalian.

Cara Memasukan Data API ke dalam Table di EJS Template

2019-11-23T11:41:00.000+07:00

Sudah berhasil menarik API namun bingung bagaimana menampilkannya dengan table di EJS ?

Bingung memasukan API ke table ?

Jika pertanyaan kalian seperti pertanyaan diatas, selamat karena pada artikel kali ini BapakNgoding akan membahas mengenai bagaimana Cara Memasukan Data API ke dalam Table di EJS Template.
Sebelum kita masuk ke pokok pembahasan kita harus tahu dulu apa itu EJS ?.
EJS adalah salah satu template engine atau view pada NodeJS yang dimana EJS sendiri adalah front-end.

Sumber :
https://www.geeksread.com/wp-content/uploads/2018/06/EJS-Conditionals-and-Loops.png

Nah setelah kita tahu apa itu EJS, langsung saja kita ke pokok pembahasan.
Saat kita ingin membuat sebuah website entah bisnis, toko atau apapun yang menggunakan table maka kita pasti akan memasukan data dari API tersebut ke dalam table yang kita miliki, nah pada saat memasukan itulah kebanyakan orang akan bingung bagaimana caranya terutama bagi yang baru tau atau baru mengenal DOM (Document Object Mode), nah karena persoalan itulah kali ini BapakNgoding akan memberitahu caranya memasukan data dari API ke dalam Table dengan DOM.

Tanpa panjang lebar lagi beginilah caranya:

1. Asumsikan kita sudah mempunyai API dengan response berikut :

{ "result": [ { "id": 5, "date": "2019-10-28T17:00:00.000Z", "size": "40FT", "no_count": "sadsasadc", "tujuan": "sdsaassa", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 8, "date": "2019-10-27T17:00:00.000Z", "size": "40FT", "no_count": "sadsasad", "tujuan": "asd", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 9, "date": "2019-10-29T17:00:00.000Z", "size": "40FT", "no_count": "sadsasad", "tujuan": "asd", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 10, "date": "2019-10-29T17:00:00.000Z", "size": "20FT", "no_count": "23RTAWDFRRW", "tujuan": "sdsaassa", "zona": "ZONA1", "supir": "Supir1", "harga": 350000, "id_zona": 1 } ], }

2. Buat Table di file EJS anda seperti berikut

<table class="table" id="rekapan_table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Tanggal</th>
<th scope="col">Size</th>
<th scope="col">Zona</th>
<th scope="col">No Container</th>
<th scope="col">Tujuan</th>
<th scope="col">Supir</th>
<th scope="col">Harga</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

3. Baca API tadi dengan menggunakan apapun, namun pada kasus kali ini saya menggunakan ajax

function GetAPI() {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "GET",
resultType: "JSON",
success: function (results) {
const table = document.getElementById("rekapan_table")
const result_data = results.data
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var tanggal = row.insertCell(1)
var size = row.insertCell(2)
var zona = row.insertCell(3)
var no_count = row.insertCell(4)
var tujuan = row.insertCell(5)
var supir = row.insertCell(6)
var harga = row.insertCell(7)
var action = row.insertCell(8)
no.innerHTML = i + 1
tanggal.innerHTML = convertDate(data.date)
size.innerHTML = data.size
no_count.innerHTML = data.no_count
tujuan.innerHTML = data.tujuan
zona.innerHTML = data.zona
supir.innerHTML = data.supir
harga.innerHTML = convertToRupiah(data.harga)
const params_get = `id_get=${data.id}&no_count_get=${data.no_count}&tanggal_get=${data.date}&tujuan_get=${data.tujuan}&supir_get=${data.supir}&zona_get=${data.id_zona}&harga_get=${data.harga}&`
action.innerHTML = `<a href='/edit_pengiriman?${params_get}'>Edit</a>
|<a href='#' onclick=deleteConfirm(${data.id})>Delete</a> `
}
}
})
}

Penjelasan Fungsi:

1. success: function (results){ } : untuk menyimpan hasil dari API ke dalam parameter results
2. for ( var i = 0 ; i < result_data.length ; i++) { } : untuk mengulang fungsi sesuai panjang result_data
3. var row = table.insertRow( i + 1 ) : untuk membuat baris baru dalam table
4. var no = row.insertCell(0) : untuk menambah kolom baru dalam row
5. no.innerHTML = i + 1 : untuk memasukan data atau tulisan ke dalam kolom yang telah dipilih

! Perhatian untuk var no kita buat sesuai nama field yang kita butuhkan. Disana saya juga membuat var zona karena saya membutuhkan field zona untuk menampung data zona.

4. Nah setelah selesai coba kalian buka lagi Website kalian dan Tara..., Data dari API kalian akan langsung masuk ke website kalian. Berikut adalah tampilan dari website saya

Data dari API ke Table

Nah berikut adalah bagaimana "Cara Memasukan Data API ke dalam Table di EJS Template", Sekian dari saya dan saya mohon maaf sebesar-besarnya bila ada kata saya yang kurang berkenan.

Cara Membuat Slider di React Native

2019-11-22T09:25:00.001+07:00

Halo Sobat coding, kali ini BapakNgoding akan membahas sesuatu tentang ngoding lagi setelah sekian lama saya tidak membahas seputar ngoding. Kali ini saya akan membuat artikel tentang "Cara Membuat Slider di React Native". Sebelum itu bagi kalian yang tidak mengetahui apa itu ReactNative bisa mencari-cari terlebih dahulu di Google. Nah tanpa panjang lebar mari kita masuk ke inti artikel ini.

Sumber
https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native.png

Pertama-tama kita akan mencari tahu dulu apa itu Slider,
Slider atau slide adalah halaman yang bisa di slide ke arah tertentu, yang intinya halaman yang bisa dislide entah ke kanan atau ke kiri.

Nah berikut langkah-langkah membuat slider atau slide di React Native

1. Download dan install ReactNative AppIntroSlider dengan mengetikan perintah berikut

npm install react-native-app-intro-slider

2. Setelah selesai maka langsung kita buka project kita dan lanjut ke tahap selanjutnya yaitu mengimport package AppIntroSlider dengan menambahkan-nya

import AppIntroSlider from 'react-native-app-intro-slider';

3. Buat variable slides state yang nantinya berfungsi sebagai tempat menyimpan data slides anda nantinya.

const slides = [
{
key: 'key1',
title: 'Title 1',
text: 'Slides ke 1",
image: require('./assets/gambar1.jpg'),
backgroundColor: '#27ae60',
},

{
key: 'key2',
title: 'Title 2',
text: 'Slides ke 2',
image: require('./assets/gambar2.jpg'),
backgroundColor: '#27ae60',
},

{
key: 'key3',
title: 'Title 3',
text: 'Slides ke 1',
image: require('./assets/gambar3.jpg'),
backgroundColor: '#2980b9',
}
];

Baca Juga : Cara Membuat Text to Voice di React Native

4. Buat Fungsi untuk merender atau membaca item di slides array anda:

_renderItem = ({ item }) => {
return (
<View style={_style.parent}>
<Text style={_style.text_header}>Judul ke 1 {item.title}</Text>
<Text style={_style.text_body}>Text : {item.text}</Text>
<Image
placeholderStyle={{ backgroundColor: "#222f3e" }}
PlaceholderContent={<ActivityIndicator />}
source={item.image}
style={_style.box_style}
/>
</View>
);
}

5. Buat fungsi untuk mengecek apakah slides sudah selesai

_onDone = () => {
// User finished the introduction. Show real app through
// navigation or simply by controlling state
this.setState({ showRealApp: true });
}

6. Berikut jika semua codenya disatukan

import React from 'react';
import { StyleSheet, ActivityIndicator } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
{
key: 'key1',
title: 'Title 1',
text: 'Slides ke 1",
image: require('./assets/gambar1.jpg'),
backgroundColor: '#27ae60',
},

{
key: 'key2',
title: 'Title 2',
text: 'Slides ke 2',
image: require('./assets/gambar2.jpg'),
backgroundColor: '#27ae60',
},

{
key: 'key3',
title: 'Title 3',
text: 'Slides ke 1',
image: require('./assets/gambar3.jpg'),
backgroundColor: '#2980b9',
}
];

export default class App extends React.Component {
this.state = {
showRealApp: false
}
_renderItem = ({ item }) => {
return (
<View style={_style.parent}>
<Text style={_style.text_header}>Judul ke 1 {item.title}</Text>
<Text style={_style.text_body}>Text : {item.text}</Text>
<Image
placeholderStyle={{ backgroundColor: "#222f3e" }}
PlaceholderContent={<ActivityIndicator />}
source={item.image}
style={_style.box_style}
/>
</View>
);
}
_onDone = () => {
// saat page sudah selesai
this.setState({ showRealApp: true });
}
render() {
if (this.state.showRealApp) {
return <App />;
} else {
return <AppIntroSlider
renderItem={this._renderItem} slides={slides} onDone={this._onDone}/>;
}
}
}

Nah berikut adalah artikel tutorial tentang "Cara Membuat Slider di React Native".
Jika ada yang belum jelas atau kurang jelas bisa kalian tanyakan di kolom komentar ya 😀,
Sekian dari saya dan mohon maaf sebesar-besarnya jika ada kata-kata saya yang kurang berkenan.

Baca juga tentang Daftar Perintah di Linux OpenSUSE

Daftar Perintah atau Command Terminal di OpenSUSE

2019-11-16T09:22:00.001+07:00

Halo Sobat BapakNgoding kali ini saya akan membagikan artikel seputar dunia linux khusunya di distro OpenSUSE yaitu tentang "Daftar Perintah atau Command Terminal di OpenSUSE", namun sebelum saya membagikan artikel ini saya ingin memastikan bahwa kalian semua tahu apa itu OpenSUSE kan? Jika belum tahu OpenSUSE adalah salah satu distro linux. Nah setelah tahu apa itu OpenSUSE maka kita akan lanjut ke sesi selanjutnya yaitu daftar Command di terminal karena kita tahu bahwa command itu sangat penting terutama untuk kita pengguna linux, dengan menguasai command di terminal maka akan sangat membantu kita dan tentu saja jika kita bisa memanfaatkan command dengan baik maka kita akan mendapatkan banyak fitur dari linux tersebut.

Gambar Terminal di Linux OpenSUSE

Nah tanpa panjang lebar lagi saya akan membagikan command tersebut

SERVICES COMMAND

LIST ALL SERVICE
# systemctl list-units --type service

START, STOP, and RESTART SERVICE
# systemctl start service_name
# systemctl stop service_name
# systemctl restart service_name

SERVICE STATUS
# systemctl status service_name

MANAGE DATE AND TIME
# timedatectl

SHOW OVERRIDEN CONFIG FILES
# systemd-delta

ANALYZE BOOT TIMES
# systemd-analyze blame
# systemd-analyze plot > filename.svg

SHOW THE JOURNAL INFORMATION
# journalctl -u service_name
# journalctl -f (like tail -f)
# journalctl -b (message since last boot)

ZYPPER PACKAGE

ADD REPOSITORY

# zypper ar -f [URL] [ALIAS]

LIST FILE IN PACKAGE

# rpm -ql package

REFRESH REPOSITORIES

# zypper ref

PERFORM DISTRIBUTION TO UPGRADE

# zypper dup

UPDATE INSTALLED PACKAGES

# zypper up

PACKAGE SEARCH

# zypper se package/dependancy

PACKAGE INFORMATION
# zypper if package

LOOK WHICH PACKAGE OWNS A FILE
# zypper se --provides file_path

FILE SYSTEM

LIST DISKS OR PARTITION

# fdisk -l

SEE DISK SPACE USAGE

# df -h

LIST MOUNTED FILE

# findmnt

# cat /proc/mounts

MOUNT A CD OR DVD/ISO

# mount -t iso9660 -o loop dvd-image.iso mount_point

LOOK SPACE USAGE USED BY A FILE

# du -h

MOUNT PARTITION

# mount -t [type] [device] [mount_point]

UNMOUNT FILE SYSTEMS

# unmount /dev/device

# unmount /mount_point

NETWORK COMMAND

SHOW NETWORK

# ip a

# iwconfig

SHOW ROUTES

# ip r

SHOW ACTIVE CONNECTIONS

# netstat -anp

PING HOST

# ping -a hostname

SHOW OPEN PORTS

# netstat -ntplu

CHANGE HOSTNAME

# echo 'machine.host' > /etc/HOSTNAME

CPU OR MEMORY CONFIGURATION AND INFORMATION

SHOW RUNNING PROCESSES

# ps -ef

# top -c

# pstree

VIEW CPU INFORMATION

# lscpu

# cat /proc/cpuinfo

# uname -i

# uname -p

SHOW MEMORY USE

# cat /proc/meminfo

SHOW OPEN DIRECTORY

# lsoff

ENABLE OR DISABLE SWAP

# swapon -a

BUILD SERVICE CONFIGURATION

ADD FILES TO A PACKAGE

# osc add *

COMMIT CHANGES

# osc commit -m "your_comment"

SUBMIT CHANGED PACKAGE

# osc sr -m"your_comment"

BRANCH A PACKAGE

# osc bco [project] [package]

YaST MANAGEMENT

RUN YaST with GUI

# yast --qt

RUN YaST with CLI

# yast --ncurses

LIST ALL YaST Modules

# yast -l

LOAD Yast MODULE

# yast module_name

Nah itulah beberapa command/perintah untuk OpenSUSE. Semoga dengan adanya artikel ini akan memudahkan pengguna Linux khususnya OpenSUSE, akhir kata dari saya terimakasih dan saya mohon maaf sebesar-besarnya bila ada kata yang kurang berkenan.

Pengalamanku Menggunakan OpenSUSE

2019-11-08T18:03:00.003+07:00

Halo teman-teman, pada postingan saya kali ini saya akan bercerita tentang pengalaman saya menggunakan OpenSUSE, namun sebelum saya bercerita kita akan mencari tahu dulu apakah OpenSUSE itu. OpenSUSE adalah salah Sistem Operasi yang berbasis Linux atau bisa kita sebut OpenSUSE adalah salah satu distro Linux.

Gambar OpenSUSE

Nah setelah kita tahu apa itu OpenSUSE mari saya lanjutkan cerita saya. Awal mula saya menggunakan OpenSUSE adalah setelah acara GNOME Asia Summit 2019, disanalah pertama kali saya berkenalan dengan OpenSUSE karena saya melihat komunitas OpenSUSE disana hehe...😁
Setelah acara tersebut selesai saya mencoba OpenSUSE dilaptop saya dimana laptop saya adalah laptop TUF Gaming yang mayoritas penggunanya menggunakan windows untuk bermain game karena memang laptop tersebut adalah laptop gaming namun saya malah menggunakan Linux sebagai OS nya hehe 😂.
Versi OpenSUSE yang saya gunakan pertama kali adalah OpenSUSE Leap 15.1 karena versi tersebut adalah versi stabil. Namun seiring berjalannya waktu saya memutuskan untuk menggantinya dengan OpenSUSE Tumbleweed karena saya ingin mencoba hal-hal baru, dimana di OpenSUSE Tumbleweed banyak aplikasi-aplikasi yang baru meskipun belum stabil dan juga karena saya juga seorang developer maka saya gemar mencoba hal-hal baru. Sampai artikel ini terbit-pun saya masih menggunakan OpenSUSE Tumbleweed. Hal pertama yang saya bingungkan adalah saat pertama kali menginstallnya karena ada sedikit masalah saat penginstallan, namun masalah tersebut berhasil saya atasi dan saya menginstallnya dengan sukses. Selang beberapa lama saya mendapati masalah lagi yaitu Driver NVIDIA saya belum diinstall lalu saya pun mencoba menginstallnya berkali-kali dan meskipun agak susah karena versi NVIDIA saya adalah 1050 Ti, namun setelah saya coba berkali-kali hingga bertanya kepada komunitas OpenSUSE di Telegram dan memformat laptop saya hingga 6 kali akhirnya Driver tersebut pun sukses diinstall di laptop saya. Pada saat itu saya merasa sangat bahagia sekali 😂, lalu saya mulai membiasakan dengan OpenSUSE dari ngoding sampai mengerjakan tugas kampus-pun saya menggunakan OpenSUSE dan hingga sekarang pun saya masih menggunakannya.

- Kesan dan pesan saya untuk yang ingin mencobanya adalah
1. Untuk pertama kali mungkin memang susah dan bingung namun setelah berkali-kali kita mencobanya maka hal tersebut akan mudah 😊
2. Jangan takut untuk mencoba karena kita tau tak akan ada pelangi jika tidak hujan
3. Cobalah menggunakan OpenSource daripada menggunakan OS bajakan hehe😂
4. Jika ada masalah kita bisa bertanya di grup Telegram atau Facebook OpenSUSE atau bisa juga bertanya di kolom komentar di bawah, nanti saya akan mencoba membantunya 👌

Sekian dari saya tentang "Pengalamanku Menggunakan OpenSUSE" dan jika ada kesalahan atau kata yang kurang berkenanan saya mohon maaf yang sebesar-besarnya.

Indonesia Open Infrastructure Day 2019

2019-11-03T11:20:00.002+07:00

Pada tanggal 02 November 2019, saya mengikuti Indonesia Open Infrastructure Day 2019 yang diadakan di Hotel Golden Tulip Legacy yang bertempat di Jl. Mayjen HR. Muhammad No. 269, Surabaya, Indonesia.

https://origin.pegipegi.com/jalan/images/pict1L/Y4/Y951864/Y951864039.jpg

Bagi saya ini adalah kedua kalinya saya mengikuti acara seperti ini setelah Gnome Assia Summit 2019 kemarin yang diadakan di Universitas Muhammadiyah Gresik, dimana artikel saat saya mengikuti event tersebut akan saya buat dilain hari.

Saya berangkat dari Gresik menggunakan sepeda motor dengan teman saya dari Gresik juga, kami berangkat pukul 07.30 WIB dan sampai di tempat tujuan sekitar pukul 08.30 WIB. Sesampainya disana kami langsung naik ke lantai ke 2 dan melakukan registrasi peserta lalu melanjutkan masuk ke hall dan mengikuti seminar tersebut. Di sana saya bertemu banyak teman saya khususnya dari komunitas OpenSUSE, seperti Pak Ahmad Harris, Pak Edwin Zakaria, Mas Kukuh Syafaat, dan lainnya. Saya mengikuti acara tersebut hingga pada penghujung acara yaitu penutupan yang dilakukan oleh Kak Joko selaku Ketua KLAS.

Akhir kata dari saya, Indonesia Open Infrastructure Day 2019 adalah acara yang keren khususnya bagi para pendukung Open Source seperti saya . Saya harap acara tesebut diselenggarakan lagi tahun depan.

Inilah Daftar Android Yang Bisa Update Ke Android 7.0 dan Kelebihan Serta Kelemahan Android 7.0 Lengkap

2018-04-09T05:41:00.000+07:00

Mungkin banyak diantara kalian yang ingin mengupdate OS android anda ke Android 7.0 atau yang biasa disebut android Nugget, tetapi anda tidak tahu apakah android anda sudah mencukupi syarat untuk update ke OS terbaru yaitu 7.0 . Nah kali ini BapakNgoding akan membagikan daftar list android yang bisa update ke versi 7.0. Tetapi sebelum itu mari kita bahas apa itu android 7.0 dan apa saja kelebihan dan kelemahanya seperti kata pepatah "Tidak Ada Gading Yang Tak Retak" begitu juga dengan android 7.0 ini. Yang langsung saja kita bahas :

A.Kelebihan Android Nougat atau Android 7.0

1. Kinerja android lebih cepat dengan performa multitasking yang lebih cepat.

Siapa sih yang tidak mau android dengan performa dan kecepatan yang super kencang..? Nah salah satu kelebihan Android Nougat adalah Android tersebut memberi kinerja yang lebih cepat daripada versi android yang terdahulu.

2. Memiliki tingkat keamanan yang lebih baik dan booting cepat.

Android versi ini memiliki fitur baru yang dinamakan Trusted Face yang memungkinkan kita mengunci dengan menggunakan wajah kita selain itu android versi 7.0 ini memiliki booting yang cukup cepat sehingga pengguna tidak perlu menunggu lama-lama untuk menyalakan gadget mereka

3. Memiliki menu notifikasi yang akan mempermudah penggunanya ketika ada pesan masuk dan notifikasi dari aplikasi.

Pada android 7.0 kalian bisa mengontrol notifikasi yang masuk jadi pada saat kalian melihat video kalian bisa membalasnya dengan cara membalasnya langsung tanpa membuka aplikasi tersebut

4. Mode malam untuk menghemat baterai dengan cara meredupkan layar saat gelap atau malam hari.

Tapi untuk mengaktifkan mode ini kalian harus mendownload aplikasi Night Mode di Play Store

B.Kelemahan Android Nougat atau Android 7.0

1. Memakan Memori yang besar untuk membackup data.

Android Nougat memiliki pengaturan setiap kita Online perangkat kita akan membackup data data di android kita, tapi tidak semua data akan dibackup karena ukuran backup android nougat memiliki data yang memakan size bergiga giga sementara kita masih memiliki akses internet yang terbatas.

2. Baterai yang boros.
Dengan banyaknya fitur yang dimiliki oleh Android Nougat maka tidak heran bila Android Nougat memakai daya baterai yang boros. Solusinya adalah matikan semua aplikasi yang tidak dipakai atau anda juga bisa mendownload aplikasi penghemat baterai di play store.

3.Memakai RAM yang besar.

Yah seperti yang kita ketahui dengan fitur secangih tersebut perangkat kita juga membutuhkan ram yang besar juga agar tidak terjadi putus putus atau lag.

4.Membutuhkan perangkat yang canggih.
Android Nougat memiliki segudang fitur canggih jadi kita juga diharuskan memiliki perangkat android yang canggih juga.

Nah dengan banyaknya beragam fitur baru tadi pasti banyak yang ingin mengupgrade android nya ke android 7.0 tetapi tidak semua smartphone bisa mengupdate OS nya ke Android 7.0.

Berikut beberapa Smartphone yang bisa update ke Android 7.0 :

1. Samsung

Samsung Galaxy S7
Samsung Galaxy S7 Edge
Samsung Galaxy S6
Samsung Galaxy S6 Edge
Samsung Galaxy S5
Samsung Galaxy Note 7
Samsung Galaxy Note 5
Samsung Galaxy Note 4
Samsung Galaxy A7
Samsung Galaxy A5
Samsung Galaxy J7
Samsung Galaxy J5
Samsung Galaxy Alpha

2. Sony

Xperia X Series
Xperia Z5 Premium
Xperia Z5
Xperia Z5 Compact
Xperia Z4/Z3+
Xperia Z3
Xperia Z3 Plus
Xperia C5 Ultra
Xperia XA Ultra
Xperia C4
Xperia M4 Aqua
Xperia M5

3. LG

LG V10
LG GS
LG G4
LG G Flex 2

4. Asus

Zenfone 3 Deluxe
Zenfone 3 Ultra
Zenfone 3
Zenfone 2
Zenfone 2 Laser
Zenfone Max
Zenfone Zoom

5. One Plus

OnePlus One
OnePlus 2
OnePlus 3

6. HTC

HTC 10
One M9
One M9 Plus
One A9
One E9 Plus

7. Motorola

Moto Z
Moto Z Force
Moto X Style
Moto X Force
Moto X Play
Droid Turbo

8. Xiaomi

Xiaomi Mi 5
Xiaomi Redmi Note 3
Xiaomi Mi 4S
Xiaomi Mi 4C
Xiaomi Redmi 2 Prime
Xiaomi Redmi 3/3S/3A
Xiaomi Mi Max
Xiaomi Mi Note/Pro
Xiaomi Mi Pad
Xiaomi Mi4i

Nah itulah beberapa Smartphone yang bisa mengupdrade OS nya ke OS 7.0 . Sekian dari saya BapakNgoding dan jangan lupa baca artikel saya yang lain ya.

Macam Macam Jenis OS Android Dari Dulu Hingga Sekarang beserta Penjelasannya Lengkap

2018-04-03T23:21:00.000+07:00

Operating System Android atau lebih umum disebut OS Android menurut saya adalah komponen pengolah software
dan hardware di dalam sebuah perangkat atau device. Sebenarnya OS itu bermacam macam ada yang untuk Windows, Linux, Mac os, DOS, Android, dll. Android sendiri dibuat sekitar tahun 2007-2008 dengan produk awal Google Nexus one menggunakan Android versi 1.1 dan tersedia di pasaran pada tanggal 5 januari 2010.

Tapi kali ini BapakNgoding akan membahas Macam
Macam Jenis OS Android. OS Android dari dulu hingga sekarang sudah ada 12 macam jenis OS android apa
sajakah itu ?, Mari kita bahas sekarang.

1. Android versi 1.1

Android pertama ini dinamai dengan Android dengan OS Versi 1.1 mulai dirilis pada tanggal 9 maret 2009 dengan beberapa pembaruan pada user interface atau antar muka bagi pengguna, alarm, gmail, dll.

2. Android cupcake (versi 1.5)
Android cupcake ini adalah os android pertama yang menggunakan nama makanan dan generasi penerus dari versi 1.1 dengan beberapa pembaruan pada tampilan, mengupload video ke youtube, dan bluetooth yang lebih cepat.

3. Android donut (versi 1.6)
Android generasi ketiga ini atau yang dikenal dengan android donut adalah android penerus versi 1.5 dengan perbaikan pada pencarian yang lebih cepat, teknologi EVDO, resolusi yang lebih tajam ,dll.

4. Android eclair (versi 2.1)
Android versi ini adalah andorid generasi ke empat dengan fitur baru yaitu google map,flash untuk kamera, dan bluetooh versi terbaru.

5. Android froyo (versi 2.2)
Diluncurkan pada tahun 2010 dengan penambahan vitur adobe flash player 10.1, penggunaan memori ekstrenal, dan peningkatan kecepatan,

6. Android gingerbread (versi 2.3)
Android generasi ke enam ini adalah android pertama yang bisa dual camera, peningkatan di game, audio, dan video. juga interface yang lebih hemat energi.

7. Android honeycomb (versi 3.1)
Android ini ditujukan untuk android dengan bentuk tablet dan tidak bisa digunakan untuk ponsel dan didesai khusus agar bisa meningkatkan kemampuan tablet berbasis android.

8. Android ice cream sandwich (versi 4.0)
Android ini mampu menghasilkan interface yang lebih bagus daripada generasi sebelumnya dan juga terdapat fitur font, dan pembuka kunci dengan wajah.

9. Android jelly bean (versi 4.1)
Android dengan banyak fitur baru yaitu informasi cuaca, lalu lintas, dan peningkatan performa responsif.

10. Android kitkat (versi 4.4)
Android yang terdapat fasilitas cloud printing, perintah suara dari google dan kamera yang bisa dibuka tanpa membuka kunci.

11. Android lolipop (versi 5.5)
Android dengan peningkatan performa dan grafik serta memiliki fitur agar baterai lebih hemat,mendukung prosesor 64 bit, dan material design

12. Android Marshmallow (versi 6.0)
Android dengan fitur baru yaitu modus "doze", mendukung usb tipe c, android pay, pembuka layar dengan sidik jari, app permision

13. Android Nougat (Versi 7.0)

Android Nougat atau Android 7.0 adalah OS Android terbaru
serta memiliki beberapa fitur baru diantaranya sebagai berikut : Kinerja android lebih cepat dengan performa multitasking yang lebih cepat, Memiliki tingkat keamanan yang lebih baik, Memiliki menu notifikasi yang akan mempermudah penggunanya ketika ada pesan masuk dan notifikasi dari aplikasi, Mode malam untuk menghemat baterai dengan cara meredupkan layar saat gelap atau malam hari.

Baca Juga : Daftar Android yang bisa diupdate ke versi 7.0

Sekian dari saya semoga artikel yang saya buat bermanfaat untuk para pembaca sekalian dan jangan lupa terus baca blog saya ya.

Pengertian Bahasa Php, dan Sejarahnya Serta Fungsinya dan Cara Menguasainya Dalam Waktu Singkat

2018-04-01T06:28:00.001+07:00

Apa itu bahasa php?? Anda bingung harus belajar apa dahulu jika ingin menjadi desainner web..? Anda tidak tahu perbedaan HTML dan PHP..? Karena itu mari kita bahas apa itu bahasa PHP..??

PHP atau yang sering disebut Bahasa Pemrograman PHP adalah sebuah bahasa pemrograman yang memang didesain untuk mendesain atau mengembangkan sebuah web entah itu web statismaupun web dinamis. PHP sendiri kadang disebut sebagai bahasa pemrograman server side yang artinya PHP diproses di komputer server. Keuntungan dari PHP adalah dapat digunakan oleh semua orang secara gratis atau free dan memiliki sifat open source.

Saat ini hampir semua programmer web di seluruh dunia menggunakan bahasa pemrograman PHP sebagai bahasa standar mereka untuk mengembangkan atau mendesain sebuah website.

Sejarah PHP

PHP sendiri dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada saat itu PHP diberi nama Form Interpreted (FI), yang berupa kumpulan skrip yang mengolah data dari web.

Nama PHP sendiri didapat saat Rasmus merilis kode sumber untuk umum, dan dengan perilisan itulah saat ini PHP menjadi open source. Oleh karena itu banyak sekali programmer web yang tertarik dengan bahasa tersebut.

Penggunaan PHP

Penggunaan bahasa php biasanya diselipkan dalam file .html #catatan : PHP banyak digunakan untuk membuat website dinamis yaitu website yang membutuhkan update atau website yang memiliki anggota, sedangkan HTML biasanya digunakan untuk membuat website statis yaitu website yang jarang diupdate seperti blog pribadi, dll.

1. Variabel

Variabel dalam PHP selalu diawali dengan simbol dolar ( $ ) variabel sendiri adalah suatu nilai yang nilainya selalu diubah ubah sesuai dengan kebutuhan.

2. Awalan dan Akhiran

Awalan dan akhiran PHP selalu diawali dengan tanda

<?php dan diakhiri dengan tanda ?> . Salah satu perbedaan PHP dan Html adalah dari awalan dan akhiranya jika html selalu diawali tanda <html> dan diakhiri </html> maka php selalu diawali dengan tanda <?php dan diakhiri dengan tanda ?> .

3. Fungsi dalam PHP

Dalam PHP terdapat ratusan fitur yang disediakan untuk mendesain dan mengelola website kita baik itu web statis maupun dinamis, seperti contoh fungsi "echo" adalah untuk menampilkan tulisan atau kata kata dalam PHP, "pow()" untuk memangkatkan nilai dengan syarat angka pertama adalah nilai yang ingin dihitung dan angka ke dua adalah nilai pangkat seperti: pow(10,2) yang artinya adalah 10 kuadrat atau 10 pangkat 2. Dan masih banyak juga fungsi yang lain. Yang akan saya bahas di web saya selanjutnya.

CONTOH PROGRAM

Kali ini saya akan memberi contoh halaman web yang ditulis dengan bahasa PHP.

<?php
echo " belajar bahasa php di BapakNgoding ";
?>

Kode diatas adalah untuk menampilkan tulisan " belajar bahasa php di BapakNgoding".

Pada contoh ini saya akan memberi contoh bahasa PHP diselipkan dengan html:

<?php
error_reporting(0);
$alas=$_POST["alas"];
$tinggi=$_POST["tinggi"];
$luas=$alas*$tinggi/2;
?>
<html>
<head>
<b>Menghitung luas segitiga</b><br><br>
</head>
<body>
<form action="" method="POST">
<label>Masukan Alas Segitiga</label>
<input type="text" name="alas" value="<php echo $alas?>"><br>
<label>Masukan tinggi Segitiga</label>asda
<input type="text" name="tinggi" value="<?php echo $tinggi?>"><br>
<label>Luas</label>
<input type="text" name="luas" value="<?php echo $luas ?>"><br>
<input type="submit" name="hitung" value="hitung">
</body>
</form>

Keterangan:

Error reporting berfungsi untuk menangani error yang terjadi
$alas,$tinggi, dan $luas adalah variabel dalam file tersebut
Form adalah form dalam file tersebut agar data dapat dibaca dan menggunakan method "POST" dan fungsi dari dari form action adalah form/file apa yang ingin dieksekusi ketika tombol hitung diklik, disitu saya mengisi form action=" " yang artinya jika tombol hitung di klik maka akan mengeksekusi form default atau form milik kita ( biasanya form action = " diisi dengan nama file php kita")
Input type = text adalah agar menampilkan form yang harus kita isi agar mendapatkan nilai dari variabel
Input type= submit adalah agar file tersebut bisa mengeksekusi form yang telah kita kirim dengan tombol hitung.

Sekian dari saya bila ada kata kata saya yang kurang berkenan saya mohon maaf. Bila ada pertanyaan silahkan tanya di kolom komentar.

Program C++ Menghitung Volume Balok Dengan Penjelasan

2018-03-31T00:18:00.000+07:00

Apa anda bingung bagaimana cara membuat aplikasi penghitung luas balok dengan C++..?? Memang Bahasa C++ adalah bahasa yang mudah untuk membuat aplikasi seperti penghitung Volume Balok dan lain lain.

Kali ini saya akan membahas tentang Program C++ Untuk Menghitung Volume Balok.
Mungkin para pembaca sekalian ada yang sudah tau bagaimana cara membuat Program C++ Untuk Menghitung Volume Balok. Tapi kali ini saya akan memberitahu bagi yang belum bisa atau belum tahu cara membuat Program C++ Untuk Menghitung Volume Balok. Sebelum itu mari kita bahas apa itu bahasa C++ . Bahasa C++ adalah bahasa pemrograman yang dibuat oleh Bjarne Stroustrup pada awal tahun 1970- an, bahasa tersebut diturunkan dari bahasa sebelumnya yaitu bahasa B, pada awalnya bahasa tersebut dirancang untuk pengganti bahasa pemrograman pada sistem Unix.

Nah langsung saja saya ajarkan:

Pastikan anda sudah punya aplikasi yang mendukung bahasa pemograman C++. Kalau saya memakai aplikasi Turbo C++, bagi yang belum punya bisa didownload disini.
Ketikan bahasa pemograman C++ dibawah ini kedalam aplikasi kalian masing-masing.

#include <iostream.h>
#include <conio.h>
void main()
{
clrscr();
int panjang,lebar,tinggi;
cout<<"Masukan panjang balok: ";
cin>>panjang;
cout<<"Masukan lebar balok: ";
cin>>lebar;
cout<<"Masukan tinggi balok: ";
cin>>tinggi;
cout<<"Volume balok adalah " <<panjang*lebar*tinggi;
getch();
}

Keterangan :

1. Cout berfungsi untuk menampilkan tulisan yang ingin ditampilkan ke Turbo C++

2. Cin berfungsi untuk memasukan data ke variabel c++ dengan format ">> (nama variabel)

3. #include iostream dan #include conio digunakan agar perintah cin maupun cout dapat dieksekusi tanpa include iostream dan conio sistem akan bingung untuk mengeksekusi perintah yang telah kita tulis. Atau perintah tersebut berfungsi sebagai kompilator

Penggunaan Cout: Cout digunakan dengan cara mengetik perintah Cout lalu ditambah simbol << "lalu perintah disini"

Perintah Cin: Cin digunakan dengan cara mengetik perintah Cin lalu ditambah simbol >> dan nama variabel setelah simbol >>.

Nah selesai sekarang coba jalankan kode C++ diatas.

Nah Berikut cara membuat Program C++ Untuk Menghitung Volume Balok. Semoga Blog saya bermanfaat untuk pembaca sekalian. Jika ada pertanyaan atau ada yang belum paham silakan tanya saja di kolom komentar nanti akan saya jawab secepat mungkin. Sekian dari saya BapakNgoding.

Cara Membuat CRUD Dengan PHP

2018-03-30T16:58:00.000+07:00

Kalian penasaran dengan arti CRUD di PHP ?

Apakah CRUD itu dan bagaimana cara membuatnya ?
Apa fungsi CRUD ? Serta apa tujuan CRUD dibuat?

Nah kali ini BapakNgoding akan membahas pengertian dan bagaimana cara membuat CRUD, Yuk langsung simak di bawah tentang Cara Membuat CRUD Dengan PHP

A.PENGERTIAN CRUD

CRUD adalah singkatan dari Create,Read,Update dan Delete yang artinya adalah suatu fungsi yang biasannya digunakan dalam sebuah website,visual basic, maupun aplikasi pengolah data lainnya dan sangat dibutuhkan dalam website dinamis seperti sosial media maupun dalam website perusahaan yang membutuhkan CRUD.

Pengertian CRUD sendiri adalah :

Create (C) : Menambahkan data ke database kita

Read (R) :Menampilkan data dari database ke PHP

Update (U) : Mengedit data di database lewat form PHP

Delete (D) : Menghapus data di database kita lewat form atau interface PHP yaitu Website

Nah setelah kita mengetahui arti dari CRUD sekarang kita akan belajar mengenai Bagaimana Cara Membuatnya.?
Nah tanpa panjang lebar mari kita bahas di bawah :

1. Create

Create digunakan untuk menambahkan data dari website atau interface PHP kita ke dalam database MySQL kita.

<?php
error_reporting(0);
if($_POST["simpan"])
{
$con=mysqli_connect("localhost","root","","toko_buku");
$kd_jenis=$_POST["kd_jenis"];
$nama=$_POST["nama"];
$pengarang=$_POST["pengarang"];
$harga=$_POST["harga"];
$insert="insert into master_buku (kode_jenis,nama_buku, pengarang,harga)VALUES('".$kd_jenis."','".$nama."','".$pengarang."','".$harga."')";
mysqli_query($con,$insert);
echo "<b>Data Tersimpan</b>";
}
?>
<html>
<head>
<title>Form Input Data</title>
</head>
<body>
<form name="masukan_data" action="input_data.php" method="POST">
<table border="1" height="200px">
<tr>
<td colspan="2"><center> <font size="5" face="arial">Input Data</font></center></td>
</tr>
<tr>
<td width="150px"> <font size="3" face="arial"><b>Kode Jenis</b></font></td>
<td><input type="text" name="kd_jenis" style="height:30px;width:250px"></td>
</tr>
<tr>
<td width="150px"> <font size="3" face="arial"><b>Nama</b></font></td>
<td><input type="text" name="nama" style="height:30px;width:250px"></td>
</tr>
<tr>
<td width="150px"> <font size="3" face="arial"><b>Pengarang</b></font></td>
<td><input type="text" name="pengarang" style="height:30px;width:250px"></td>
</tr>
<tr>
<td width="150px"> <font size="3" face="arial"><b>Harga</b></font></td>
<td><input type="text" name="harga" style="height:30px;width:250px"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="simpan" value="SIMPAN" style="height:30px;width:150px" ></td>
</tr>
</table>
</form>

Nah Coding yang digunakan adalah

Coding diatas adalah script untuk menambahkan data ke dalam database toko_buku dan dimasukan ke dalam tabel master_buku.

Penjelasan:

Coding yang digunakan untuk memasukan data ke dalam database MySQL adalah $insert="insert into master_buku (kode_jenis,nama_buku, pengarang,harga) VALUES ('".$kd_jenis."','".$nama."','".$pengarang."','".$harga."')";
Perintah tersebut adalah perintah yang digunakan di MySQL untuk menambahkan datanya namun sekarang kita menggunakannya di PHP dan nantinya perintah tersebut akan dikirimkan ke MySQL dan dijalankannya dengan perintah mysqli_query ($con,$insert);

Hasil dari Coding diatas adalah :

2. Read

Read sesuai artinya "membaca" tapi apa yang dibaca? yah tentu saja database MySQL kita arti dibaca disini adalah database kita dibaca oleh PHP dan ditampilkan ke Web kita.
Nah Coding untuk read/menampilkan database adalah :

<?php
error_reporting(0);
$con=mysqli_connect("localhost","root","","toko_buku");
?>
<table border="1">
<tr>
<td>No</td>
<td>Kode Buku</td>
<td>Kode Jenis</td>
<td>Nama Buku</td>
<td>Pengarang</td>
<td>Harga</td>
<td>Action</td>
</tr>
<?php
$view="select * from master_buku";
$data=mysqli_query($con,$view);
$no=1;
while($d=mysqli_fetch_array($data))
{
?>
<tr>
<td width=40px><?php echo $no++?></td>
<td><?php echo $d["kode_buku"]?></td>
<td><?php echo $d["kode_jenis"]?></td>
<td width=100px><?php echo $d["nama_buku"]?></td>
<td width=100px><?php echo $d["pengarang"]?></td>
<td width=100px><?php echo $d["harga"]?></td>
<td><a href="delete.php?ni=<?php echo $d["kode_buku"];?>">Delete </a><a href ="edit.php?ni =<?php echo $d["kode_buku"];?>">Edit </a>
</tr>
<?php
}
?>

Nah Coding Read adalah seperti diatas.

$view="select * from master_buku";
$data=mysqli_query($con,$view);

Coding diatas lah yang mempunyai fungsi untuk menampilkan database kita di website dimana $view sebagai script di MySQL untuk menampilkan data lalu dieksekusi oleh $data dan datanya akan ditampilkan oleh while ($d=mysqli _fetch_array($data)) dimana kita menggunakan while karena data yang akan kita tampilkan akan lebih dari satu maka dari itu kita menggunakan agar perintah mysqli_fetch_array terus diulang sampai semua data telah ditampilkan.
Hasil dari Coding diatas adalah :

3.Update

Nah yang ketiga adalah update kalian pasti sudah tau kan apa itu update, ya update adalah mengedit atau merubah data lewat website kita, Update sendiri biasanya terdapat atau dimasukan di form view seperti gambar diatas disebelah field harga ada field Action yang bertuliskan Edit & Delete

tulisan tersebut adalah link yang jika ditekan kita bisa mengedit atau menghapus nya.

Nah langsung saja kita masuk ke codingnya seperti dibawah ini :

<?php
error_reporting(0);
$con=mysqli_connect("localhost","root","","toko_buku");
$page=$_GET["ni"];
?>
<form action="" method="POST">
<table border="1">
<tr>
<td width=100px>Kode Jenis</td>
<td><input type="text" name="kode"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Pengarang</td>
<td><input type="text" name="pengarang"></td>
</tr>
<tr>
<td>Harga</td>
<td><input type="text" name="harga"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="simpan" value="Simpan"></td>
</tr>
</form>
<?php
if($_POST["simpan"])
{
$kode=$_POST["kode"];
$nama=$_POST["nama"];
$pengarang=$_POST["pengarang"];
$harga=$_POST["harga"];
$view="UPDATE master_buku SET kode_jenis='".$kode."', nama_buku='".$nama."', pengarang='".$pengarang."',harga='".$harga."' WHERE kode_buku='".$page."'";
mysqli_query($con,$view);
echo "Data sukses diedit";
header("location:tampilan.php");
}
?>

Nah kali ini code yang berfungsi untuk mengupdate adalah

$view="UPDATE master_buku SET kode_jenis='".$kode."', nama_buku='".$nama."', pengarang='".$pengarang."', harga='".$harga."' WHERE kode_buku='".$page."'";

mysqli_query($con,$view);

$view adalah script MySQL yang digunakan untuk mengupdate data dan dieksekusi oleh mysqli_query ($con,$view);

Nah tampilan hasil codingnya sebagai berikut :

4. Delete

Nah yang terakhir adalah delete yang digunakan untuk menghapus data di database kita, langsung saja kita lihat codingnya :

<?php
error_reporting(0);
$con=mysqli_connect("localhost","root","","toko_buku");
$page=$_GET["ni"];
$delete="delete from master_buku where kode_buku='".$page."'";
mysqli_query($con,$delete);
echo "Hapus Sukses";
header("location:tampilan.php");
?>

Untuk Delete ini kita hanya tinggal mengeklik tulisan delete di form view atau lihat dinomor 3 dan data akan otomatis terhapus. Coding yang berfungsi untuk menghapus adalah

$delete="delete from master_buku where kode_buku = '".$page."'";

mysqli_query($con,$delete);

$delete adalah script yang digunakan untuk menghapus data di database kita lalu dieksekusi oleh mysqli_query ($con, $delete); dimana $page adalah kata kunci yang dipakai untuk menentukan data mana yang akan dihapus maka dari itu kita menggunakan $page=$_GET["ni"]; dimana $_get adalah link url kita dan ["ni"] berisi kode_buku seperti coding di nomor 3 yaitu <a href="delete.php?ni=<?php echo $d["kode_buku"];?>"> dan ni = kode_buku

Nah inilah hasil akhirnya

Nah berikut adalah cara membuat CRUD mungkin agak ribet bagi pemula namun hal yang mudah bagi yang sudah biasa, saran saya adalah terus belajar karena tanpa belajar saya pun tidak bisa, jika ada yang kurang paham bisa ditanyakan di kolom komentar di bawah seperti kata pepatah ( Malu Bertanya Sesat di Jalan)

Sekian dari BapakNgoding. Terimakasih :)

Cara Koneksi Database MySQL ke Visual Basic 6.0

2018-02-06T15:44:00.000+07:00

Kalian ingin membuat aplikasi menggunakan visual basic 6?

Kalian bingung cara menghubungkan database MySQL ke Visual basic 6.0?

Tenang kali ini BapakNgoding akan membahasnya dalam artikel ini.

Nah kali ini BapakNgoding akan membahas bagaimana cara membuat koneksi antara Database MySQL ke Visual Basic 6 atau yang biasa kita sebut "VB 6", nah sesuai pertanyaan yang telah saya ajukan diatas. Mari kita bahas bagaimana cara-caranya. Nah sebelum saya mulai membahasnya pastikan dulu kalian sudah mempunyai aplikasi Visual Basic 6 dan MySQL. Jika kalian belum punya MySQL kalian bisa mendownloadnya disini Download MySQL dan jika kalian belum punya Visual Basic 6.0 kalian bisa mendownload disini Download Visual Basic 6.0

Nah berikut langkah langkahnya:

1. Download ODBC versi 3.51

Nah langkah pertama yang harus kalian lakukan adalah kalian harus mempunya ODBC terlebih dahulu.

ODBC sendiri adalah singkatan dari Open Database Connectivity atau yang disingkat ODBC adalah aplikasi yang dibuat untuk mengkoneksikan database MySQL ke Visual Basic 6.0. Saya sendiri merekomendasikan ODBC versi 3.51 karena penggunaanya yang lebih mudah.

2. Buka ODBC 3.51 Dikomputer Anda

Setelah selesai mendownload ODBC versi 3.51 sekarang yang harus kalian lakukan adalah membukanya, jika kalian tidak tau letak ODBC kalian, kalian bisa klik search di windows anda dengan mengetikan ODBC di kolom search, biasanya di pojok kiri bawah bila Windows 8 dan Windows 10 dan untuk windows 7 di kolom pencarian/search di taskbar.

3. Klik Add di Pojok Kanan Atas

Klik Add di pojok kanan atas, tepatnya diatas tombol Remove. Tombol Add tersebut untuk menambahkan Database MySQL kita ke ODBC yang nantinya akan diteruskan ke Visual Basic 6.0

4.Pilih MySQL ODBC 3.51 Driver di pilihan yang tersedia

Pilih MySQL ODBC 3.51 Driver di Create New Data Source MySQL ODBC 3.51 Driver adalah versi ODBC yang kita gunakan yaitu 3.51, jika kalian menggunakan versi lain pilih versi yang anda gunakan.

5. Ketikan user = root dan pilih Database yang ingin dikoneksikan dengan visual basic dan beri nama di Data Source Name

Isikan user dengan root agar bisa mendeteksi database MySQL di ODBC 3.51, root sendiri adalah nama username MySQL default kita. Jika Username MySQL anda berbeda ketikan nama username MySQL anda di kolom user setelah itu pilih Database yang ingin anda koneksikan di pilihan Database.

6.Memberi Nama di Data Source Name

Setelah selesai mengatur user dan database MySQL yang ingin kita koneksikan ke visual basic 6.0 sekarang kita beri nama koneksi tersebut di kolom Data Source Name. Setelah kita beri nama lalu kita klik OK dan nanti nama yang telah kita setting di kolom Data Source Name akan muncul di Daftar pertama kita seperti gambar dibawah

Gambar 1

Gambar 2

Nah setelah kalian selesai memasukan nama di kolom Data Source Name nanti database yang kalian telah beri nama akan muncul seperti di gambar 2

Sampai Langkah Ini Database MySQL kita sudah tersedia di ODBC dan sudah siap untuk digunakan/dikoneksikan dengan Visual Basic kita.

Tapi sebelum saya tutup artikel saya kali ini saya akan memberi tambahan lanjutan yaitu untuk memasukan data dari visual basic ke MySQL.

1. Langkah pertama yaitu Buka Visual Basic kita.

Setelah kita berhasil mendaftarkan kita ke ODBC langkah selanjutnya adalah dengan membuka aplikasi Visual Basic kita. Sebelum itu pastikan kita sudah membuka koneksi untuk MySQL kita di XAMPP

2. Memunculkan Data Grid dan Adodc di Visual Basic

Sekarang kita harus memunculkan menu Data Grid dan Adodc di Kolom General kita caranya yaitu kalian bisa membuka menu Components di opsi project di atas atau kalian juga bisa menekan tombol CTRL + T di keyboard kita.

Kolom Components sendiri seperti gambar di bawah.

Setelah kalian berhasil membuka menu Components langkah selanjutnya adalah centang Microsoft ADO Data Control 6.0 (OLEDB) dan Microsoft DataGrid Control 6.0 (OLEDB), atau jika kalian kurang jelas kalian bisa lihat gambar diatas.

3. Pilih Data Grid dan Adodc di kolom General

Setelah kalian berhasil memunculkan Data Grid dan Adodc di kolom general kalian seperti gambar di bawah sekarang kalian harus memilih dan menggunakanya di project atau form vb kalian.

4. Sambungkan Adodc kalian dengan Database yang telah kalian buat di Adodc

Sekarang setelah kalian telah memunculkan Data Grid dan Adodc sekarang kalian harus menghubungkan Adodc yang telah kalian tampilkan dengan database MySQL kalian di Adodc. Caranya adalah : Buka properties adodc dan cari Connection String lalu pilih Use Connection String lalu pilih Microsoft OLE DB Provider for ODBC Drivers

dan Klik next

5. Pilih Database yang telah anda buat di ODBC dan masukan ke kotak Data Link Properties

Setelah kalian pilih Microsoft OLE DB Provider for ODBC Drivers dan kalian klik Next sekarang kalian harus memasukan nama Database yang telah kalian buat di ODBC
di kolom Use Data Source lalu kalian klik Apply dan Ok

6. Pilih table di database anda yang ingin dimasukan datanya lewat Visual Basic

Sekarang kalian harus memilih table mana yang ingin kalian masukan datanya lewat Visual Basic, caranya adalah pilih RecordSource di properties Adodc1 seperti gambar 1 dibawah dan pilih Command Type dengan tulisan
2-adCmdTable dan pilih salah satu table anda yang datanya akan dimasukan melalui form visual basic seperti di gambar 2 saya memilih table stok_obat

Gambar1

Gambar 2

7. Tampilkan data Adodc1 di DataGrid

Selesai sekarang anda hanya tinggal menampilkan data dari Adodc1 yang telah anda setting dan menampilkannya di DataGrid sobat caranya adalah pilih DataSource di properties DataGrid dan ubah menjadi Adodc1.

Nah selesai sekarang tinggal mengetikan codingnya saja ke dalam Visual Basic sobat. Untuk macam-macam codingnya akan saya bahas di artikel selanjutnya.

Sekian dari BapakNgoding bila ada yang kurang jelas bisa kalian tanyakan di kolom komentar, dan jangan lupa share artikel ini ke teman atau keluarga sobat yang ingin belajar Coding.

( Baca juga :Cara Menghubungkan Database MySQL ke PHP )

BapakNgoding

Cara Mengkoneksikan PHP ke Microsoft Access (MS ACCESS)

Cara Penggunaan Redux pada React Native Lengkap dengan Penjelasannya

Cara Membuat Google Sign-in dan Auth pada React Native dan Firebase

Cara Menggunakan Array dan ArrayList pada Java Serta Contoh Penggunaanya

Cara Setting Koneksi Firebase ke React Native

Cara Menggunakan Socket.IO dengan NodeJS, ExpressJS, MariaDB

Cara Membuat Pagination di ExpressJS dan NodeJS

Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS

Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

Mengenal Class, Method Static dan Non Static Serta Contohnya di Java

Cara Membuat Voice to Text di React Native

Perbandingan React Native dan Flutter ( React Native vs Flutter )

Cara Membuat Text to Voice di React Native

Apa itu Text to Voice ?

Cara Memasukan Data API ke dalam Table di EJS Template

Baca Juga : Cara Membuat Text to Voice di React Native

Penjelasan Fungsi:

Cara Membuat Slider di React Native

Nah berikut langkah-langkah membuat slider atau slide di React Native

Baca Juga : Cara Membuat Text to Voice di React Native

Daftar Perintah atau Command Terminal di OpenSUSE

SERVICES COMMAND

ZYPPER PACKAGE

FILE SYSTEM

NETWORK COMMAND

CPU OR MEMORY CONFIGURATION AND INFORMATION

BUILD SERVICE CONFIGURATION

YaST MANAGEMENT

Pengalamanku Menggunakan OpenSUSE

Indonesia Open Infrastructure Day 2019

Inilah Daftar Android Yang Bisa Update Ke Android 7.0 dan Kelebihan Serta Kelemahan Android 7.0 Lengkap

B.Kelemahan Android Nougat atau Android 7.0

Macam Macam Jenis OS Android Dari Dulu Hingga Sekarang beserta Penjelasannya Lengkap

Sekian dari saya semoga artikel yang saya buat bermanfaat untuk para pembaca sekalian dan jangan lupa terus baca blog saya ya.

Pengertian Bahasa Php, dan Sejarahnya Serta Fungsinya dan Cara Menguasainya Dalam Waktu Singkat

Keterangan:

Program C++ Menghitung Volume Balok Dengan Penjelasan

Apa anda bingung bagaimana cara membuat aplikasi penghitung luas balok dengan C++..?? Memang Bahasa C++ adalah bahasa yang mudah untuk membuat aplikasi seperti penghitung Volume Balok dan lain lain.

Nah langsung saja saya ajarkan:

Keterangan :

Cara Membuat CRUD Dengan PHP

Kalian penasaran dengan arti CRUD di PHP ?

Apakah CRUD itu dan bagaimana cara membuatnya ?Apa fungsi CRUD ? Serta apa tujuan CRUD dibuat?

Nah kali ini BapakNgoding akan membahas pengertian dan bagaimana cara membuat CRUD, Yuk langsung simak di bawah tentang Cara Membuat CRUD Dengan PHP

A.PENGERTIAN CRUD

Pengertian CRUD sendiri adalah :

1. Create

Penjelasan:

2. Read

3.Update

4. Delete

Cara Koneksi Database MySQL ke Visual Basic 6.0

Kalian ingin membuat aplikasi menggunakan visual basic 6?

1. Download ODBC versi 3.51

2. Buka ODBC 3.51 Dikomputer Anda

3. Klik Add di Pojok Kanan Atas

4.Pilih MySQL ODBC 3.51 Driver di pilihan yang tersedia

5. Ketikan user = root dan pilih Database yang ingin dikoneksikan dengan visual basic dan beri nama di Data Source Name

6.Memberi Nama di Data Source Name

Sampai Langkah Ini Database MySQL kita sudah tersedia di ODBC dan sudah siap untuk digunakan/dikoneksikan dengan Visual Basic kita.

1. Langkah pertama yaitu Buka Visual Basic kita.

2. Memunculkan Data Grid dan Adodc di Visual Basic

3. Pilih Data Grid dan Adodc di kolom General

4. Sambungkan Adodc kalian dengan Database yang telah kalian buat di Adodc

5. Pilih Database yang telah anda buat di ODBC dan masukan ke kotak Data Link Properties

6. Pilih table di database anda yang ingin dimasukan datanya lewat Visual Basic

7. Tampilkan data Adodc1 di DataGrid

Apakah CRUD itu dan bagaimana cara membuatnya ?
Apa fungsi CRUD ? Serta apa tujuan CRUD dibuat?