Flutterize : Basic Flutter menambahkan Depedency

Jika kita baru belajar flutter maka sudah hal yang wajib untuk mengerti menambahkan depedency. Di flutter banyak sekali library-library yang menarik sayang rasanya jika kita tidak menggunakannya untuk mepermudah pembuatan aplikasi kita.

ok to the point langsung saja kita membuat project baru, lalu bukalah pubspec.yaml di project yang kau buat

Seperti ini lah isi pubspec.yaml

name: flutter_fire
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

selanjutnya kita perlu library yang ingin kita tambahkan, di artikel ini saya akan mencontoh kan library Google fonts https://pub.dev/packages/google_fonts

(jika kalian ingin menggunakan depedency pilihan kalian pastikan itu berasal dari https://pub.dev/ )

di halaman pub.dev dokumentasi nya sudah cukup lengkap mulai dari install nya dan cara memakainnya

ok tambahkan depedency

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  google_fonts: ^1.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter

setelah menambahkan depedency IDE biasanya melakukan pub get secara otomatis tapi jika tidak, kita bisa melakukannya secara manual
ketikkan perintah berikut di terminal project atau arahkan terminalnya ke project

flutter pub get

lalu terminal akan menambahkan library nya ke project kita dan sekarang kita bisa menggunakan depedency baru saja kita tambahkan.

Sekian artikel ini Terima Kasih telah membacanya.
Have a Good Days 🙂

React JS: Setup Router

React js. Javascript library keluaran facebook ini cukup banyak di gandrungi banyak depelover karena performanya yang cukup powerfull. di artikel kali ini saya akan membahas cara penerapan routing di library ini. tetapi, sebelum membahas cara routing di react js saya akan membahas sedikit apa itu routing dalam website.

kalo kita terjemahkan kedalam bahasa indonesia routing adalah rute, jadi seperti namanya pada dasarnya kita memetakan sebuah URL ke sebuah file atau data tertentu. sudah terbayang? mari kita masuk ke routing di react js.

Step 1

Saya asumsikan kalian sudah menginstal project react, jika belum silahkan install disini dan pastikan sudah terinstall node dan npm di pc anda. jika sudah silahkan buka projectnya di code editor kalian kesukaan kalian masing-masing, kali ini saya akan memakai visual studio code untuk code editornya, buka terminal yang mengarah ke directory project anda lalu ketikan “npm start” untuk menyalakan servernya. lalu akan diberikan alamat server lokalnya, “Default: localhost:3000” jika sudah seperti inilah tampak project dan struktur folder awal react js.

Step 2

Untuk mengintegrasikan react router kita membutuhkan library yang bernama react router dom, buka terminal yang mengarah ke di directory project anda lalu ketikan “npm i react-router-dom” atau jika anda menggunakan yarn ketikan “yarn add react-router-dom” klik untuk lihat lebih lanjut.

jika sudah terinstall buka file app yang ada di directory src lalu import library react-router-dom yang tadi kita install

untuk contoh kita akan memidahkan laman about dan home. buatlah file berikut di dalam directory app:

  • Home.js
  • About.js

lalu buat struktur react seperti ini di masing masing file

import React from 'react'

function Home() {
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    )
}

export default Home

import React from 'react'

function About() {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    )
}

export default About

jika sudah buka file app lalu import kedua komponen tersebut dan bungkus kedalam class Router switch dan route lalu beri masing masing path dalam setiap route. jika sudah kodenya akan seperti ini

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

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

lalu beri link untuk berpindah, senhinnga kode terlihat seperti ini

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

mungkin sekian yang bisa saya berikan untuk hari ini. sekian terimakasih.

Flutterize: Fancy Bottom Navigation dengan Curved Navigation Flutter

Flutter sebenarnya sudah menyediakan bottom navigation, tapi disini kita akan belajar bagaimana cara mengcustom Bottom Navigation agar terlihat lebih baik dan lebih fancy menggunakan library curved navigation, jika ingin mengkunjungi dokumentasi nya silahkan buka link berikut ini : https://pub.dev/packages/curved_navigation_bar .

Ok tanpa bertele – tele lagi berikut adalah bentuk dari curved navigation

Sangat keren bukan dan juga untuk implementasi curved navigation sangatlah mudah ok berikut caranya :

Tambahkan Depedency-nya terlebih dahulu di pubspec.yaml berikut adalah depedency nya :

dependencies:
  curved_navigation_bar: ^0.3.4 #latest version in nov 2020

seteleh menambahkan depedency jangan lupa melakukan pub get (jika idea / text editor tidak otomatis melakukan pub get ) ok selanjutnya kita perlu membuat file atau statefull widget untuk bottom navigation,
berikut adalah contohnya :

import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget {
  BottomNavigation({Key key}) : super(key: key);

  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       
    );
  }
}

selanjutnya tambahkan bottom navigation di dalam scaffold

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

...

Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.blueAccent,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          //Handle button tap
        },
      ),
    );

berikut ini adalah hasilnya

ok selanjutnya kita akan menambahkan perpindahan page, disini kita akan menggunakan icon sebagai perumpamaan page atau screen


class _BottomNavigationState extends State<BottomNavigation> {

int selectedIndex = 0;
List<Widget> screenWidget = [
    Icon(Icons.history),
    Icon(Icons.keyboard),
    Icon(Icons.storage),
  ];

@override
  Widget build(BuildContext context) {
    return Scaffold(

Tambahkan variable screenWidget dan selectedIndex sebagai list page yang ingin dimasukkan *Icon diatas bisa diganti dengan page.


selanjutnya kita hanya perlu menambahkan onTap nya dan sedikit layout
seperti ini :

Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Stack(
        children: [
          // untuk page gunakan code dibawah ini
          // screenWidget.elementAt(selectedIndex),

          Center(
            child: screenWidget.elementAt(selectedIndex),
          )
        ],
      ),
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.blueAccent,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );

Dan berikut adalah hasilnya saat dijalan kan.

Bagaimana mudah kan jika ingin melihat full code nya ada dibawah ini :

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget {
  BottomNavigation({Key key}) : super(key: key);

  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int selectedIndex = 0;
  List<Widget> screenWidget = [
    Icon(Icons.history),
    Icon(Icons.keyboard),
    Icon(Icons.storage),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Stack(
        children: [
          // untuk page gunakan code dibawah ini
          // screenWidget.elementAt(selectedIndex),

          Center(
            child: screenWidget.elementAt(selectedIndex),
          )
        ],
      ),
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.blueAccent,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

Sekian, Terima Kasih.

API Otentikasi Menggunakan Passport Laravel

API Otentikasi Menggunakan Passport Laravel

Pada kesempatan kali ini kita akan membahas tentang cara membuat API otentikasi menggunakan passport di Laravel. Api sering juga di kaitkan sebagai Web Service digunakan untuk berkomunikasi atau mengintegrasikan dan mengizinkan dua aplikasi yang berbeda secara bersamaan untuk saling terhubung satu sama lain..

Poin yang kita akan buat dalam pembelajaran kali ini :

  1. Membuat API Login
  2. Membuat API Register
  3. Menampilkan data

Tools Yang diperlukan :

  1. Text editor (Visual Studio Code/sublime text)
  2. Composer
  3. Local Server (Xampp)
  4. Postman

Cara Membuat API Otentikasi Menggunakan Passport di Laravel

Dalam kasus ini kita akan mencoba proses login, register, logout dan menampilkan data.

1. Buat Project baru di laravel

Membuat Project Baru di laravel. jika sudah terinstall XAMPP dan Composer, tinggal ketik command berikut melalui terminal anda:

composer create-project laravel/laravel laravel_passport

Tunggu sampai proses installasi selesai.

2. Install Package Passport Menggunakan Composer

Masukan command “cd C:\xampp\htdocs\laravel_passport” pada jendela Command Prompt untuk masuk ke direktori project . saya beri nama project saya tadi dengan nama laravel_passport

lalu, silahkan ketik command di bawah ini untuk menginstall package passport di Laravel:

composer require laravel/passport

jika sudah terinstall, buka project anda di text editor (visual studio code/sublime).

3. Konfigurasi Package Passport

Agar package ini bisa dijalankan, maka kita perlu mendaftarkannya dulu di config/app.php. Tambahkan:

Laravel\Passport\PassportServiceProvider::class,

4. Buat Database dan Konfirguarasi

Buat database dengan nama laravel_passport, Lalu tambahkan pada bagian .env seperti berikut:

selanjutnya buka terminal Visual Studio Code, kemudian migrate dengan command :

php artisan migrate

Install passport dengan command agar mendapatkan token keys.

php artisan passport:install

5 .Ubah Model User

Buka User.php di dalam direktori app/User.php, kemudian ubah seperti berikut :

<?php

namespace App;

use Laravel\Passport\HasApiTokens;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

6. Ubah AuthService Provider

buka AuthServiceProvider.php di direktori app/Providers/AuthServiceProvider.php kemudian ubah seperti ini:

<?php

namespace App\Providers;

use Laravel\Passport\Passport;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();
        Passport::routes();
    }
}

7. Ubah Auth

Buka Config/auth.php , lalu cari kode seperti ini:

lalu ubah menjadi :

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    
    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
], 

8. Membuat Controller User

Ketik command di bawah ini:

php artisan make:controller Api/UserController

9. Membuat Route

Kemudian ubah UserController.php di dalam direktori app/Http/Controllers/Api/UserController.php menjadi :

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Support\Facades\Auth;
use Validator;

class UserController extends Controller
{

    public $successStatus = 200;

    public function login(){
        if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){
            $user = Auth::user();
            $success['token'] =  $user->createToken('nApp')->accessToken;
            return response()->json(['success' => $success], $this->successStatus);
        }
        else{
            return response()->json(['error'=>'Unauthorised'], 401);
        }
    }

    public function register(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
            'c_password' => 'required|same:password',
        ]);

        if ($validator->fails()) {
            return response()->json(['error'=>$validator->errors()], 401);            
        }

        $input = $request->all();
        $input['password'] = bcrypt($input['password']);
        $user = User::create($input);
        $success['token'] =  $user->createToken('nApp')->accessToken;
        $success['name'] =  $user->name;

        return response()->json(['success'=>$success], $this->successStatus);
    }

    public function logout(Request $request)
    {
        $logout = $request->user()->token()->revoke();
        if($logout){
            return response()->json([
                'message' => 'Successfully logged out'
            ]);
        }
    }

    public function details()
    {
        $user = Auth::user();
        return response()->json(['success' => $user], $this->successStatus);
    }
} 

untuk proses ini kita akan menggunakan api.php. buka direktori routes/api.php kemudian tambahkan:

Route::post('login', 'API\[email protected]');
Route::post('register', 'API\[email protected]');

Route::group(['middleware' => 'auth:api'], function(){
    Route::get('user/detail', 'Api\[email protected]');
    Route::post('logout', 'Api\[email protected]');
}); 

Nah.. Sampai disini proses pembuatan API menggunakan package Passport sudah selesai, sekarang saat kita Tes dengan Postman!

10. Php artisan serve

Sebelum membuka Postman, langka berikutnya adalah, kita jalankan command berikut ini pada terminal :

php artisan serve

Selanjutnya buka Postman kalian, jika blum maka silakan Instal dulu.

11. Buka Postman

Proses Register

Hasilnya :

Proses Login :

Proses Tampil Data :

Ubah method ke GET dan Ubah juga TYPE menjadi Bearer Token, akan muncul kolom Token lalu masukan token hasil login tadi

Hasil :

Proses Logout :

Penutup

Cukup Sekian Artikel tentang Proses membuat API Otentikasi menggunakan package Passport ini.

Termikasih 🙂

Ketika Pemilik Bisnis Turun Gunung Untuk Perkara Teknis

Ketika Pemilik Bisnis Turun Gunung Untuk Perkara Teknis

Minggu kemarin ada sebuah perusahaan yang melakukan permintaan ke Rumah Coding untuk mengadakan training di kantornya yang berlokasi Solo. Karena permintaan yang cukup mendadak dan di waktu yang tidak tepat sehingga agak sulit mengatur jadwalnya. Kondisi saat itu, semua trainer sedang ada jadwal termasuk trainer Semarang pun berhalangan. Dengan beberapa pertimbangan, akhirnya saya sanggupi permintaan tersebut dengan saya sendiri sebagai trainernya. Sebenernya agak berat bagi saya karena training memakan waktu 4 hari, sedangkan banyak pekerjaan lain yang harus saya kerjakan. Tapi saya coba berpikir lain barangkali ada opportunity lain yang bisa digarap selesai training.

Alhamdulillah training berjalan lancar. Judulnya memang Corporate Training Android Basic Solo, tapi pada kenyataan-nya, justru saya yang banyak belajar dari direktur perusahaan ini. Beliau adalah Big Boss dengan jumlah karyawan mencapai 1000 lebih. Jumlah karyawan yang tidak sedikit untuk ukuran orang seumuran beliau. Karyawan beliau tersebar di seluruh Indonesia, mulai dari kota besar hingga pelosok. Bisnis beliau pun beragam mulai dari payment gateway, travel umroh, hingga apartement. Dan memang saya akui, beliau ada tipe pekerja kelas. Hal itu nampak jelas dari setiap response terhadap setiap tugas-tugas coding yang saya berikan.

Pertanyaan besarnya adalah untuk apa belajar android untuk orang selevel beliau. Alasan pertama adalah hobi. Aslinya beliau ini jurusan teknik informatika. Tetapi karena kesibukan di dunia bisnis, perlahan-lahan skill coding-nya mulai hilang ditelan kesibukan. Maka dari itu beliau request training ke Rumah Coding, tujuan-nya untuk merefresh skill codingnya.

Bisnis beliau yang pertama adalah sofware house. Dulu beliau mempunyai produk software antrian. Software antrian-nya sudah banyak dipakai di seluruh kantor cabang bank BNI di seluruh Kalimantan. Software antrian yang beliau buat termasuk salah satu pionir software antrian, di saat bank-bank yang lain masih menggunakan potongan kertas untuk antrian.

Alasan kedua adalah mencari inspirasi dan ide-ide produk digital yang fresh. Beliau banyak berdiskusi dengan saya mengenai seputar ide-ide produk digital yang bisa dieksekusi. Dan kebetulan saya sedikit banyak paham seluk beluk dunia startup. Dalam benak beliau, sudah ada beberapa ide produk baru yang ingin segera dieksekusi dan beliau banyak bertanya dari sisi teknis pembuatan-nya.

Alasan ketiga adalah beberapa bisnisnya yang sekarang sudah berjalan perlu membutuhkan beberapa aplikasi android. Beliau ingin tau sedikit seluk beluk dunia coding android. Dan ini tidak hanya terjadi pada beliau. Beberapa peserta yang training di Rumah Coding juga banyak yang profesinya sebagai pemilik bisnis (bisnis owner). Mereka ingin membuat aplikasi android dari bisnis-nya yang sekarang. Dan goal mereka sebenernya bukan ingin beralih menjadi android developer. Akan tetapi kadang seorang pemilik bisnis perlu mengetahui sedikit perkara teknis agar dapat mengambil keputusan yang tepat. Dan seperti itulah Steve Jobs. Steve Jobs tidak bisa coding, akan tetapi smart enough untuk menjelaskan hal-hal teknis kepada para pendengarnya.

Dan setelah training selesai, sudah dipastikan beliau langsung memberikan saya beberapa projek untuk digarap. Inilah yang saya sebut diawal sebagai opportunity lain.

Tertarik training di Rumah Coding?
Follow @idrumahcoding dan kunjungi www.rumahcoding.co.id

rumahcoding #androidbasic #kursusandroid #androidsolo #codingsolo #kursuscoding #kursusprogramming #corporatetraining #inhousetraining

oleh : Lhuqita Fazry

Sabilal Muhtadin : Membangun Jaringan dari Codingan

Sabilal Muhtadin : Membangun Jaringan dari Codingan

Saat ini, membangun memiliki koneksi/jaringan merupakan salah satu hal penting di dunia kerja. Mendapatkan informasi yang kita butuhkan, adalah saah satu manfaat dari memiliki koneksi. Untuk memiliki koneksi, kita bisa memulainya dengan interaksi di social media, mengikuti suatu paguyuban, atau bahkan mengikuti sebuah kursus.

Mengikuti sebuah kursus, adalah cara Pak Sabilal Muhtadin agar bisa memiliki koneksi dengan teman-teman yang berminat pada programming, termasuk menjalin koneksi dengan trainernya. Berawal dari ketertarikannya dalam membuat website, lulusan kebendaharaan STAN ini, mulai mencoba belajar autodidak dari video pembelajaran yang ada di Youtube.

Namun, hal tersebut berjalan kurang baik, akhirnya diputuskan untuk mengikuti kursus. Disamping mengetahui cara membuat website, Ia juga ingin menambah koneksi dari teman teman yang berminat dalam pemrograman. Meski saat ini, beliau bekerja sebagai PNS di Kementerian Keuangan, dimana programming adalah hal baru baginya, Ia tetap semangat belajar pemrograman.

Setelah mengikuti kelas PHP Code Igniter di Rumah Coding, beliau berharap dapat terus mengembangkan kemampuannya, dan bisa keep in contact dengan trainer. Agar suatu saat ketika mengerjakan project web tersebut, Ia bisa sharing mengenai permasalahan yang dihadapi.

Rumah Coding Goes to Bandung

Rumah Coding Goes to Bandung

Halo readers, kali ini kita akan membahas tentang Bandung nih. Karena akhir November kemarin, tepatnya tanggal 30, Rumah Coding berkesempatan mengunjungi objek wisata tersebut. Tujuannya untuk mengagumi keindahan alam ciptaan Allah, dan sebagai ajang refreshing sejenak dari rutinitas harian. 

Karena perjalanan dari Depok ke lokasi tujuan cukup jauh, maka diputuskan untuk berangkat pada pukul 05.30 WIB. Namun karena ada sedikit kendala, jam keberangkatan akhirnya mundur menjadi pukul 06.00 WIB. Perjalanan berangkat diselingi dengan pembagian doorprize, serunya, untuk bisa mendapatkan doorprize, peserta diwajibkan menjawab pertanyaan-pertanyaan ajaib yang dilontarkan MC.

Sampai di lokasi pertama yaitu Situ Patenggang jam menunjukkan sekitar pukul 11.00 WIB. Perjalanan yang cukup panjang, namun terbayar dengan pemandangan alam yang indah dan cuaca yang sejuk disana. Acara dilanjutkan dengan perkenalan dari Tim Rumah Coding beserta keluarga. Kemudian dilanjutkan dengan makan siang tentunya disambung dengan acara kuis doorprize lanjutan, dan sesi foto bersama. Sayangnya kondisi Situ agak mengejutkan, yaitu air Situ yang surut/kering cukup banyak, dilihat dari luasnya kondisi tanah yang pecah-pecah.

Setelah istirahat, sholat dan makan siang, waktunya beranjak ke lokasi wisata selanjutnya, yaitu Kawah Putih. Namun, baru saja berjalan kea rah bis, hujan turun cukup deras. Setelah melewati voting yang cukup sengit XD, akhirnya diputuskan rombongan tetap melanjutkan ke kawah putih, sembari berdoa semoga disana kering, alias tidak hujan.

Ternyata di area kawah putih, tidak hujan sama sekali, yeaaay. Dengan suka cita, semua antusias untuk menaiki mobil angkutan khusus menuju kawah putih. Jalanan yang tidak rata, berdebu, dan cukup jauh mewarnai perjalanan menuju area kawah. Sesampainya disana, selain kawah putih, ada arena untuk berkuda juga loh.

Usai berfoto, akhirnya diputuskan kita akan kembali ke bis, menuju lokasi berkutnya yaitu Wisata Belanja Cibaduyut. Namun di tengah perjalanan, ternyata cukup macet dan dikhawatirkan perjalanan pulang akan semakin larut bila tetap dilanjutkan. Akhirnya diputuskan untuk langsung pulang.

Meski ada satu destinasi yang tak sempat disinggahi, namun teman-teman dari Rumah Coding merasa bersyukur bisa memiliki kesempatan mengunjungi objek-objek wisata tersebut.

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Tutorial Flutter #1 – Pengenalan dan Cara Install Flutter

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Rumahcoding.co.idPengenalan dan Cara Install Flutter. Sebagai seorang pengembang aplikasi mobile, pastinya sudah memikirkan bagaimana cara membangun aplikasi mobile yang bisa digunakan di android dan ios dalam sekali kerja. Jika sampai saat ini masih memisahkan antara pengembangan android dan ios secara terpisah, itu artinya akan memakan banyak waktu, tenaga dan biaya untuk mengerjakannya.

Flutter hadir dengan kemampuan membangun aplikasi ios dan android dalam sekali pengembangan. Bayangkan saja dengan sekali membuat aplikasi maka sudah bisa diinstall di android maupun ios, keren!

Apa Itu Flutter?

Flutter merupakan sekumpulan SDK (Software Development Kit) untuk pengembangan aplikasi mobile yang dikembangkan oleh Google. Sama seperti react native maupun ionic, framework ini dapat digunakan untuk mengembangkan aplikasi mobile yang berjalan di ios maupun android. Bahasa yang digunakan oleh flutter merupakan Bahasa C, C++, Dart maupun Skia yang membuat framework buatan Google ini sangat menarik untuk kita pelajari.

Benefit Mengembangkan Aplikasi Mobile dengan Flutter

Ada banyak benefit yang bisa kita dapatkan apabila menggunakan flutter dalam mengembangkan aplikasi android maupun ios, di antaranya:

1. Fast Development

Flutter memiliki fitur widget-widget maupun class yang dapat membantu pengembangan aplikasi android maupun ios. Selain itu, flutter juga memiliki fitur hot reload yang dapat mempercepat compile / render perubahan-perubahan pada aplikasi yang kita kembangkan tanpa harus melakukan compile ulang.

2. Expressive and Flexsible UI

Flutter telah menyediakan banyak material UI yang berguna untuk membangun mobile app dengan canggih dan elegan. Material yang disediakan flutter sangat beragam dan lebih flexsible. Cukup dengan import satu material saja, maka Anda sudah bisa menggunakan banyak widget.

Selain itu, widget-widget yang disediakan flutter mudah dipelajari karena disediakan dokumentasi saat menggunakan widget tersebut.

3. Native Performance

Flutter memiliki kemampuan native performance, yaitu aplikasi yang Anda buat bisa berjalan di masing-masing di platform. Misalnya sintax scrooling di android dan ios berbeda, namun hanya dengan satu kali bekerja menggunakan flutter scrooling, Anda sudah bisa membuat system scrooling yang bisa bekerja dengan baik di android maupun ios.

4. Complete Documentation and Dependencies

Dokumentasi yang disediakan flutter sangat lengkap. Selain itu, depedensi yang Anda butuhkan sangat mudah diaplikasikan karena masing-masing depedensi ada tutorial dan cara menggunakannya. Hal ini membuat flutter semakin powerfull dalam membangun aplikasi mobile.

Tutorial Install Flutter

Flutter telah menyediakan dokumentasi bagaimana cara atau tutorial install flutter baik saat menggunakan windows, linux ataupun mac os.

1. Tutorial Install Flutter di Windows

Bagi Anda pengguna windows, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/windows

2. Tutorial Install Flutter di Mac OS

Bagi Anda pengguna Mac OS, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/macos

3. Tutorial Install Flutter di Linux

Bagi Anda pengguna Linux, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/linux

Kesimpulan

Demikianlah pembahasan pengenalan flutter, cara install flutter dan apa manfaat dari menggunakan flutter untuk membangun aplikasi mobile app. Semoga bermanfaat untuk pembaca sekalian. Aamiin.

Akhmad Fauzi : Teman Perjalanan

Akhmad Fauzi : Teman Perjalanan

Ada yang tahu, cuplikan film Harry Potter, dimana Ronald Weasly sewot karena menganggap dirinya hanyalah teman/pemanis bagi si Harry Potter yang terkenal? Well, mungkin Ron sedang kesal saja, jadi terlontarlah kata-kata itu. Namun salah satu hal terbaik dalam hidup adalah memiliki teman perjalanan yang dapat dijadikan panutan. Nah special guest kali ini, Mas Akhmad Fauzi merupakan ‘teman perjalanan’ Pak I Gede Sujana Eka Putra dari MDPI. Meski lebih tepat dikatakan juniornya Pak Sujana, ungkapnya dengan rendah hati. Diakui mas Akhmad, Bersama dengan Pak Sujana, banyak pembelajaran yang bisa Ia ambil. See, menjadi teman perjalanan banyak sekali manfaatnya kan?

Lulusan Sekolah Menengah Kejuruan

Memiliki nama lengkap Akhmad Fauzi, beliau saat ini berdomisili di Pemogan, Denpasar Selatan. Tapi mas Akhmad ini perantauan lho dari Bekasi, wah seru ya merantau ke Pulau Dewata. Siapa yang tidak kenal dengan keindahan tersebut? Jangankan warga Indonesia, turis mancanegara juga mengakui keindahan pulau ini, makanya banyak yang menjadikan pulau ini sebagai destinasi wisata/berlibur.

Kembali ke mas Akhmad, meski perantauan di Denpasar, namun Pendidikan sekolah menengahnya diselesaikan disana. Usut punya usut, ternyata mas Akhmad lulusan Sekolah Menengah Kejuruan Rekayasa Perangkat Lunak. Beliau menuturkan, pada saat itu kejuruan RPL masih sangat jarang.

Tak puas jika belajar hanya sampai sekolah kejuruan, mas Akhmad melanjutkan Pendidikan Sarjana pada jurusan Sistem Informasi. Mengantongi title sarjana, memantapkan langkah mas Akhmad untuk segera menapaki dunia pasca kampus, yaitu bekerja.

Membersamai di MDPI

Tiga tahun setelah kelulusannya, saat ini mas Akhmad menempati posisi Junior Software Developer dibawah arahan Pak Sujana. Perjalanan karir mas Akhmad tidak selalu mulus, sebelum menempati posisi saat ini, beliau pernah bekerja di dua instansi yang berbeda. Selain bekerja beliau juga aktif mengikuti mailing list/milis untuk mendapatkan informasi. Termasuk posisinya saat ini, ia ketahui melalui job posting di milis.

Sibuk bekerja di Masyarakat Dan Perikanan Indonesia/ MDPI, tak membuat mas Akhmad acuh terhadap kompetisi internasional bidang perikanan yang ia tekuni saat ini. Bersama dengan Pak Sujana, mas Akhmad membuat aplikasi website dengan nama traceability. Menjagokan webnya dalam ajang tersebut, membuatnya menempati posisi Juara II, satu langkah didepan Amerika yang juga berhasil mendapat Juara III, pencapaian yang sangat membanggakan ya. Diakui, memang teknologi yang berkembang saat ini sudah mengarah kepada Artificial Intelligence. Seperti India yang telah menerapkannya, dan menyabet Juara I.  

Meski sudah pernah memenangkan ajang internasional, tak membuat mas Akhmad berpuas diri. Kini ia turut belajar android intermediate di Rumah Coding. Semua ini dilakukan agar dapat menyempurnakan system website dan android, yang pada pada pelaksanaannya mempermudah user menginput data hingga menghasilkan dokumentasi perikanan yang efektif dan efisien. Karena tujuan teknologi, salah satunya tentu untuk memudahkan pekerjaan manusia, bukan?

Mari kita doakan semoga kerja keras mas Akhmad dan Tim dapat segera terwujud, agar semakin banyak nelayan kecil yang terbantu dan berdaya dan sejahtera di negerinya sendiri. Jangan lupa, kerja keras yang kita lakukan, dengan membantu kehidupan orang banyak tentu akan dihitung sebagai amal kebaikan.

CSRF Attack & Solution

CSRF Attack & Solution

A. CSRF Attack

  1. Untuk mencoba serangan, anda bisa mendownload project web yang sudah tersedia untuk penetrasi, download di sini -> https://github.com/raesene/bWAPP
  2. Kemudian download aplikasi sender penetrasi tambahan Burp Suite di sini -> https://portswigger.net/burp/communitydownload
  3. Setelah anda download, install pada localhost anda. Jika bingung, bisa lihat tutorial berikut -> https://www.youtube.com/watch?v=F3QcgmCuEC0
  4. Jika sudah terinstall, masuk ke halaman Login
    http://localhost/bwapp/login.php

5. Kemudian login dengan Login : bee, Password : bug

6. Untuk serangan CSRF terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba CSRF (Change Password) kemudian pilih Hack

7. Setelah masuk ke halaman yang di tuju, klik kanan -> View page source ( Google Chrome )

8. Kemdian block baris code seeperti gambar di bawah, copy + paste di editor anda.

9. Buatlah sebuah file csrf.html simpan di lokasi yang anda inginkan. Paste code di atas.

10. Sekarang copy + paste url pada halaman ganti password

11. Sekarang kita akan mengganti password menggunakan file crsf.html yang dibuat, ubah code seperti gambar berikut

12. untuk melakukan perubahan password, buka file csrf.html pada browser anda, klik Change

13. Kemudian coba anda login dengan password baru yang dibuat lewat file csrf.html

B. Solution

  1. Untuk mengatasi serangan CSRF (Change Password) , pada bagian form input, tambahkan current password field seperti gambar di bawah

2. Pada saat handling request get password_curr , tambahkan code berikut ( Sesuaikan nama tabel dan kolom )

if(isset($_REQUEST["password_curr"]))
                {
                              
                    $password_curr = $_REQUEST["password_curr"];
                    $password_curr = mysqli_real_escape_string($link, $password_curr);
                    $password_curr = hash("sha1", $password_curr, false);                

                    $sql = "SELECT password FROM users WHERE login = '" . $login . "' AND password = '" . $password_curr . "'";

                    // Debugging
                    // echo $sql;    

                    $recordset = $link->query($sql);             

                    if(!$recordset)
                    {

                        die("Connect Error: " . $link->error);

                    }

                    // Debugging                
                    // echo "<br />Affected rows: ";                
                    // printf($link->affected_rows);

                    $row = $recordset->fetch_object();   

                    if($row)
                    {

                        // Debugging
                        // echo "<br />Row: ";
                        // print_r($row);

                        $sql = "UPDATE users SET password = '" . $password_new . "' WHERE login = '" . $login . "'";

                        // Debugging
                        // echo $sql;

                        $recordset = $link->query($sql);

                        if(!$recordset)
                        {

                            die("Connect Error: " . $link->error);

                        }

                        // Debugging              
                        // echo "<br />Affected rows: ";         
                        // printf($link->affected_rows);

                        $message = "<font color=\"green\">The password has been changed!</font>";

                    }

                    else
                    {

                        $message = "<font color=\"red\">The current password is not valid!</font>";

                    }
                
                }