Jadi kali ini saya akan membuat Authorization Token menggunakan middleware.

Membuat Middleware

yang pertama adalah, kita membuat middleware denga mengetikan :

php artisan make:middleware TokenAccess

lalu buka file TokenAccess.php yang berada di app\Http\Middleware, masukan baris berikut :

class TokenAccess
{  
   public function handle($request, Closure $next)
    {
     dd(str_random(50));    
    }
}

oiyah kenapa kita memasukan “dd(str_random(20))”, karna kita ingin membuat String Alfanumerik secara Acak yang akan nanti kita gunakan sebagai token Authorization.

Jalan kan dd nya

buka file api.php berada di routes\api.php dan tambah kan seperti berikut :

Route::group(['middleware' => ['tokenaccess']], function () {
  Route::get('cities', '[email protected]_city');
});

Setelah itu buka postman, lalu masukan http://127.0.0.1:8000/v1/cities :

Dan lalu kita mendaptkan Alfanumerik acak, yang nanti kita akan gunakan sebagai token Authorization

Ubah kembali file TokenAccess.php

Buka lagi file TokenAccess.php dan tambah kan code seperti berikut :

public function handle($request, Closure $next)
    {    $token='7qSLoQSLI9uWelaI2zeYmMlnLW4OiGIA67yEqKkw4DCPBQfQNw';
      if(!$request->header('Authorization')){
      return response()->json(['success' => false,    'status' => 401, 'message' => 'unauthorized'], 401);
     }else{
         if($request->header('Authorization') !== $token){
                return response()->json(['success' => false,    'status' => 401, 'message' => 'unauthorized'], 401);
      }
    }
     return $next($request);
  }

variabel token akan menjadi authorization kita saat mengakses semua api yang sudah kita buat, seperti cities.

Berhasil

jika berhasil maka akan tampil data nya seperti berikut :

Jika Gagal

Jika di Headers kita hapus token authorization, makan akan Tampil error seperti berikut ini :

Oke itu saja cara Authorization Token Api menggunakan middleware

terimakasi 🙂

oke minggu lalu kita sudah membahas tentang react router pada react js. bagi yang belum baca bisa baca disini. oke, apa yang kita bahas untuk minggu ini? oke minggu ini kita akan membahas Component Lifecycle pada react js.

jadi apa itu component lifecycle? oke pada dasarnya component lifecycle adalah sirklus hidup pada react js. Sama seperti manusia, setiap component di react js ternyata juga memiliki siklus hidup.

Component – component di react js akan melewati tiga fase hidup, yaitu :

• Mounting
• Updating
• Unmounting

oke gausah bingung saya akan menjelaskan dan menjabarkan beberapa hal diatas.

Mounting

Pada fase ini ada tiga methods yang akan di eksekusi yaitu:

• componentWillMount
• componentDidMount
• render

componentWillMount adalah method yang akan di eksekusi pertama kali, kemudian akan mengeksekusi method render.

Di dalam method render inilah kita menyimpan tag tag html yang nanti nanti akan di render sebagai jsx oleh react, gaya penulisan tag html di file html biasa juga sedikit berbrda dibandingkan dengan di jsx.

Setelah method render di eksekusi baru kemudian mengeksekusi method componentDidMount

operasi lain seperti request data dari API semuanya dilakukan di sini.

Updating

Fase updating adalah fase ketika sebuah component akan di render ulang, biasanya ini terjadi ketika ada perubahan pada state atau props yang mengakibatkan perubahan DOM.

Pada fase ini ada 5 methods yang akan di eksekusi yaitu:

• componentWillReceiveProps :
• fungsi ini akan di eksekusi bila state yang ada di component akan di update atau di ubah dengan nilai props yang baru.
• shouldComponentUpdate :
• funsi ini adalah untuk menentukan apakah sebuah component akan di render ulang atau tidak.Method ini akan mengembalikan nilai boolean true & false, jika true maka component akan di render ulang atau sebaliknya.
• componentWillUpdate :
• fungsi ini akan di eksekusi jika fungsi shouldComponentUpdate mengembalikan nilai true. Kemudian kembali method render akan di jalankan
• componentDidUpdate :
• fungsinya sama dengan componentDidMount yaitu untuk manipulasi DOM dan request data.

Unmount

Fase unmounting adalah fase ketika component di hapus dari DOM

di fase ini method yang akan di eksekusi hanya ada satu yaitu componentWillUnmount, yang akan di eksekusi sebelum sebuah component di hapus dari DOM.

mungkin sekian untuk hari ini, semoga bermanfaat.

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. 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&gt;
            <h1&gt;Home Page</h1&gt;
        </div&gt;
    )
}

export default Home

import React from 'react'

function About() {
    return (
        <div&gt;
            <h1&gt;About Page</h1&gt;
        </div&gt;
    )
}

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&gt;
      <div&gt;
        <Switch&gt;
          <Route path="/about"&gt;
            <About /&gt;
          </Route&gt;
          <Route path="/"&gt;
            <Home /&gt;
          </Route&gt;
        </Switch&gt;
      </div&gt;
    </Router&gt;
  );
}

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&gt;
      <div&gt;
        <nav&gt;
          <ul&gt;
            <li&gt;
              <Link to="/"&gt;Home</Link&gt;
            </li&gt;
            <li&gt;
              <Link to="/about"&gt;About</Link&gt;
            </li&gt;
            <li&gt;
              <Link to="/users"&gt;Users</Link&gt;
            </li&gt;
          </ul&gt;
        </nav&gt;
        <Switch&gt;
          <Route path="/about"&gt;
            <About /&gt;
          </Route&gt;
          <Route path="/"&gt;
            <Home /&gt;
          </Route&gt;
        </Switch&gt;
      </div&gt;
    </Router&gt;
  );
}

export default App;

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

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&gt; {
  @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&gt;[
          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&gt;[
          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.