X

Saturday, April 15, 2023

Flutter : Membuat Splash Screen

 1. main.dart 



    import 'package:first_app/bloc/user_bloc.dart';
    import 'package:first_app/ui/splash_screen/splash_screen.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SplashScreen(),
        );
      }
    }
2. splash_screen.dart 

    import 'dart:async';

import 'package:first_app/ui/main_page.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreen createState() => _SplashScreen();
}

class _SplashScreen extends State<SplashScreen> {
  @override
  void initState(){
    super.initState();
    Timer(Duration(seconds: 1),
      () => Navigator.pushReplacement(context, MaterialPageRoute(builder:(context)=> MainPage())));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
              "URL_IMAGE",
              fit: BoxFit.contain,
              alignment: Alignment.center,
            )
          ],
        )
      ),
    );
  }
}

3. main_page.dart 

    import 'package:first_app/bloc/user_bloc.dart';
import 'package:first_app/model/user.dart';
import 'package:first_app/ui/user_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.blue[400], 
      title: Text("App Baru"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,  
        children: <Widget> [
          TextButton(
              style: TextButton.styleFrom(
                primary: Colors.blue,
              ),
              onPressed: () { },
              child: Text('Submit'),
            ),
            BlocBuilder<UserBloc, User>(builder: (context, user) => UserCard(user))

        ],
      ),
    );
  }
}

Read More

Sunday, October 9, 2022

Cara Membuat CRUD dengan MongoDb menggunakan Express JS


Pada postingan sebelumnya telah di bahas Cara Penginstalan dan Konfigurasi MongoDB maka melanjutkan pada postingan tersebut kita akan membahas mengenai Membuat CRUD dengan MongoDb menggunakan Express JS.

Sebelum memulai membuat CRUD dengan MongoDB ini pastikan anda telah menginstall :

1. Node Js

2. Compas atau Robo 3t (untuk meremote database MongoDB)

Selanjutnya pastikan anda sudah tahu cara pembuatan aplikasi menggunakan Express Js dengan membaca postingan Mengenal Apa itu Express JS Hingga Cara Penginstalan atau anda bisa melihat contoh penggunaan express + mysql Cara Membuat CRUD Database MySql dengan Node js.

Selanjutnya mari kita bekerja dengan Express Js dan MongoDB

Cara Membuat CRUD dengan MongoDb menggunakan Express JS

1. Membuat project baru dengan menggunakan perintah npm init kemudian npm install, untuk file utama sendiri gunakan index.js.
 
2. Edit file index.js (jika belum ada silahkan buat) seperti code di bawah :
var express = require('express');

var app = express();
var PORT= 8080;


app.listen(PORT, async (error) =>{
    if(!error){
        console.log("server running || port : "+PORT);
    }else {
        console.log("Error occurred, server can't start", error);
    }
});

3. Buka package.json dan tambahkan kode di bawah pada bagian scripts

"start" : "nodemon index.js"
Pastikan anda tela h menginstall nodemon, jika belum silahkan ketikkan npm i -g nodemon ini untuk kebutuhan running nantinya.

4. Install package express npm i express, kemudian install mongodb dengan npm i mongodb 
5. Selanjutnya tambahkan require dan connect ke mongodb


const {MongoClient} = require('mongodb');

var url_db = "mongodb://localhost:27017";
var db;

MongoClient.connect(url_db, function (err, client) {
    if (err){
        console.log(err);      
    }else{
        console.log("connect mongodb");
        db = client.db("nama_db");
    }
   
});
 

6. Select table

 
var data = await db.collection("nama_table").find().toArray()
 

 Ini akan menghasilkan data array. Jika ingin melakukan where, silahkan isi bagian find, contohnya find({username:"coding"}).


7. Insert Data ke table 


 dataSave = {
                "username":"test",
                "password":"pass",
            }
 
await db.collection("nama_table").insert(dataSave)
 


8. Update Data pada table

 where = {
                "id":1
            }
 
 data = {
                "username":"test",
                "password":"pass",
            }
var up = await db.collection('nama_table').update(where, {$set :data})
 

9. Delete data

 
var a = await db.collection("nama_table").remove();
 

atau 

 
await db.collection("nama_table").deleteOne({_id:ObjectId("4d513345cc9374271b02ec6c")})
 






Read More

Saturday, October 8, 2022

Mengatasi Error connect ECONNREFUSED 127.0.0.1:27017 MongoDB


Seperti yang terlihat pada gambar mongodb tidak bisa di akses karena mengalami error dimana mongodb tidak jalan. 

Untuk mengatasi hal ini, bisa dilakukan dengan kembali menjalankan mogodb.

1. Masuk ke Control Panel kemudian cari Administrative Tools

2. Cari Service kemudian klik dua kali.

3. Pada jendela baru cari MongoDB server kemudian klik dua kali


 

 

4. Klik start pada Service Status 


 

 

5. Buka kembali aplikasi Compas atau Robo 3t kemudian connect

Read More

Friday, October 7, 2022

Cara Mengatasi Error const utf8Encoder = new TextEncoder(); di Node js

 const utf8Encoder = new TextEncoder(); terjadi ketika project yang admin buat menggunakan node js versi 14.15.1 kemudian di deploy ke server yang menggunakan node js v 10.18.

Kurang lebih errornya seperti pada gambar di bawah setelah menjalankan npm start :


const utf8Encoder = new TextEncoder();
                    ^

ReferenceError: TextEncoder is not defined
    at Object.<anonymous> (C:\app\nodejs\helper\node_modules\whatwg-url\lib\encoding.js:2:21)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\app\nodejs\helper\node_modules\whatwg-url\lib\url-state-machine.js:5:34)
    at Module._compile (internal/modules/cjs/loader.js:778:30)


Setelah mencari di google ketemulah solusinya, yaitu dengan mengedit file encoding.js di "node_modules\whatwg-url\lib\encoding.js"

Ubah code 

"use strict";
const utf8Encoder = new TextEncoder();
const utf8Decoder = new TextDecoder("utf-8", { ignoreBOM: true });


Menjadi 

"use strict";
var util= require('util');
const utf8Encoder = new util.TextEncoder();
const utf8Decoder = new util.TextEncoder("utf-8", { ignoreBOM: true });


Selanjutnya silahkan di jalankan kembali.

Read More

Cara Menghubungkan Openfire (XMPP) dengan Node js

 Openfire merupakan sebuah aplikasi yang berada di bawah licensi Apache, bersifat open source. Aplikasi ini bekerja di ruang lingkup internet sebagai chat server / instant messaging server. 

Openfire menyediakan layanan chat server menggunakan protokol extensible messaging and presence protocol (XMPP) atau sering disebut Jabber.

Pengguna aplikasi ini dapat mendapatkan ataupun mengirim pesan secara Real Time Collaboration (RTC).

Sebelum memulai menghubungkan Openfire dengan Node js pastikan anda memiliki tools berikut :

1.  Openfire 

2. Spark (Software Chat)

3. Node Js


Berikut langkah-langkah Cara Menghubungkan Openfire (XMPP) dengan Node js

 1. Buka "http://localhost:9090/" di browser kesayangan kalian kemudian login

 


2. Pada halaman selanjutnya klik menu server ->  Server Settings -> HTTPBinding  kemudian enable pada dan setting port seperti pada gambar 


3. Masuk ke menu User/Groups -> Create New User untuk membuat user baru yang akan di test nantinya

Dalam hal ini kita sudah memiliki akun test dan akun admin, nantinya akun test akan di coba untuk mengirim pesan ke akun admin.

4. Buat project baru node js dengan nama "chat" kemudian buat file index.js dan jadikan sebagai file utama aplikasi yang dibuat 

5. Edit file index.js sebagai berikut, dan jangan lupa mengganti code-serverhost dengan kode yang ada di dashboard openfire bagian server -> server manager -> Environment -> Server Host Name (FQDN) 

const express = require('express');
var bodyParser = require('body-parser');
const { client, xml } = require("@xmpp/client");
const debug = require("@xmpp/debug");

const app = express();
const PORT = 3000;

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });
 
  debug(xmpp, true);
 
  xmpp.on("error", (err) => {
    console.error(err);
  });
 
  xmpp.on("offline", () => {
    console.log("offline");
  });
 
  xmpp.on("stanza", async (stanza) => {
    console.log("terhubung")
    if (stanza.is("message")) {
      await xmpp.send(xml("presence", { type: "unavailable" }));
    //await xmpp.stop();
    }
  });
  xmpp.on("online", async (address) => {
    // Makes itself available
    await xmpp.send(xml("presence"));
 
    // Sends a chat message to itself
    const message = xml(
      "message",
      { type: "chat", to: address },
      xml("body", {}, "hello world"),
    );
    await xmpp.send(message);
  });
 
  xmpp.start().catch(console.error);

app.get('/send', async (req, res)=>{
    const message = xml(
        "message",
        { type: "chat", to: "admin@code-serverhost" },
        xml("body", {}, "Hai"),
          );
      await xmpp.send(message);
    res.send("ok")
})

app.listen(PORT, async (error) =>{
    if(!error){
        console.log("server running || port : "+PORT);
    }else {
        console.log("Error occurred, server can't start", error);
    }
});

 

Kode yang perlu di perhatikan ada pada 

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });
 
  debug(xmpp, true);
 
  xmpp.on("error", (err) => {
    console.error(err);
  });
 
  xmpp.on("offline", () => {
    console.log("offline");
  });
 
  xmpp.on("stanza", async (stanza) => {
    console.log("terhubung")
    if (stanza.is("message")) {
      await xmpp.send(xml("presence", { type: "unavailable" }));
    //await xmpp.stop();
    }
  });
  xmpp.on("online", async (address) => {
    // Makes itself available
    await xmpp.send(xml("presence"));
 
    // Sends a chat message to itself
    const message = xml(
      "message",
      { type: "chat", to: address },
      xml("body", {}, "hello world"),
    );
    await xmpp.send(message);
  });

Kode ini berfungsi untuk menghubungkan aplikasi dengan jabber, sekaligus mendapatkan respon apakah telah terhubung atau tidak. 

Untuk service bagian 

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });

 Silahkan sesuaikan dengan akses ke jabber atau openfire kalian.

Kemudian untuk melakukan pengetesan pengiriman pesan terdapat pada kode bagian :

  app.get('/send', async (req, res)=>{
      const message = xml(
          "message",
          { type: "chat", to: "admin@code-serverhost" },
          xml("body", {}, "Hai"),
            );
        await xmpp.send(message);
      res.send("ok")
  })

 Ketika url yang di akses "http://localhost:3000/send" aplikasi akan otomatis mengirim pesan ke admin@localhost.

Pengiriman pesan ini dapat di modif sesuai kebutuhan entah menggunakan POST atau yang liannya.

6. Jalankan aplikasi dengan mengetikkan perintah "npm start" jika terdapat module yang belum terinstall silahkan install terlebih dahulu misalnya "npm i express", "npm i body-parse", "npm i @xampp/client", "npm i @xampp/debug".
 

7. Buka aplikasi SPARK dan login sebagai admin untuk nantinya melihat pesan yang terkirim dari test.



8. Buka url "http://localhost:3000/send" di browser, jika berhasil pesan akan otomatis terkirim ke admin 


Read More

Tuesday, October 4, 2022

Membuat Single Page Application (SPA) di React JS

SPA merupakan singkatan dari Single Page Application yaitu sebuah istilah untuk aplikasi yang menggunakan satu halaman sebagai tampilan dari halamannnya. Dimana semua aksi reload page di lakukan dalam halaman tersebut tanpa memuat utuh satu halaman. Hal ini dapat membuat web lebih menarik dan tentunya lebih cepat sebab hanya bagian tertentu yang akan di load.

Menggunakan React Js kita bisa memanfaatkan package react-router-dom untuk membuat Single Page Application. Berikut cara Membuat Single Page Application (SPA) di React JS



1. Menginstall package dengan mengetikkan perintah di bawah : 

npm i react-router-dom

2. Edit file src/App.js seperti Berikut 

import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom'
import Home from './Home';
import About from './About';
import Profile from './Profile';

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
        </ul>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/about' element={<About/>}/>
          <Route path='/profile' element={<Profile/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;




3. Buat Home.js 

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}


4. Buat About.js 

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
      <div>About</div>
    )
  }
}



5. Buat Profile.js 

import React, { Component } from 'react'

export default class Profile extends Component {
  render() {
    return (
      <div>Profile</div>
    )
  }
}



6. Jalankan aplikasi dengan perintah npm start

Read More

Monday, October 3, 2022

Syntax CRUD Mysql pada Django Python

 Sebelumnya kita pernah membahas tentang Cara Menghubungkan Database Mysql dengan Django maka pada kesempatan kali ini kita akan membahas Syntax CRUD Mysql pada Django Python. CRUD (Create Read Update and Delete) merupakan hal dasar yang harus dimiliki untuk dapat membuat aplikasi nntinya.

 Sebelum memulai  terlebih dahulu kita harus membuat model kemudian melakukan migrate ke database sama halnya ketika menggunakan Laravel.

Edit file models.py 

from django.db import models

# Create your models here.
class user(models.Model):
    name= models.CharField(max_length=255)
    username= models.CharField(max_length=255)
    email= models.CharField(max_length=255) 
    created_at = models.DateTimeField(auto_now_add=True)

    class Meta:
        db_table = 'user'


Setelah membuat model ketikkan perintah di bawah untuk melakukan migrasi.
python manage.py makemigrations
 Kemudian ketikkan 
python manage.py migrate
Berikut Syntax CRUD Mysql pada Django Python
Insert Data ke Database 
Buat file baru bernama FormUser.py untuk melakukan validasi form.

from dataclasses import field
from django import forms
from .models import kata_baku

class FormUser(forms.ModelForm):   
    class Meta:
        model = user
        fields = '__all__'
        error_messages = {
            'name' : {
                'required':'Name Harus di Isi'
            },
            'username' : {
                'required':'Username Harus di Isi'
            },
            'email' : {
                'required':'Email Harus di Isi'
            },
 
        }


Kemudian aksi untuk melakukan insert database adalah sebagai berikut :
def add_data(request):
    form = FormUser(request.POST or None, request.FILES or None)
    if request.method == "POST":
        if form.is_valid():
            form.save()
            return JsonResponse({'result':'success'})
        else:
            return HttpResponse(form.errors)

Select Data dari Database
Semua data :
def data(request):
    get = user.objects.all()
    data ={
        'title':"Data",
        'data' : get
    }
    return JsonResponse({'result':'success', 'data':data})
 
Berdasarkan parameter yang dipilih :

 data = user.objects.filter(username="coding")
 atau 
 data = user.objects.get(username="coding")   
        

Menggunakan fungsi Where <>
 
data = user.objects.filter(~Q(username="coding"))
        
 Where like :

 data = user.objects.filter(username__contains="codin")
        
Menggunakan fungsi Where In :

 data = user.objects.filter(username__in=dataArray)
        

Menggunakan fungsi Where not In :
 
data = user.objects.filter(~Q(username__in=dataArray))
        
 
 Update Data 
 
data = user.objects.get(id=1)
data.username="blog"
data.save() 
        
 
Delete data 
 data = user.objects.get(id=1)    
 data.delete()
 
 





Read More