
Beberapa Perintah untuk Menghapus Sampah Docker di Mac Os.

Cara menghapus semua images yang tidak digunakan saja

```bash
docker image prune
```

Cara menghapus file sampah yang tidak digunakan

```bash
docker system prune
```

Melihat Semua File

```bash
docker system df
```

Untuk menghapus nya dapat menggunakan perintah berikut:

```bash
docker system prune -a --volumes
```

Demikian Tips menggunakan Docker untuk Menghapus sampah-sampah docker


Cara Membersihkan Sampah Docker dengan Command Line di Macbook, Tutorial Docker, Cara menghapus semua images yang tidak digunakan saja

Cara Membersihkan Sampah Docker


Ada beberapa cara men `deploy` aplikasi laravel ke server, dengan cara git, manual, menggunakan `app hosting`, dan untuk menggunakan automatic deployment biasanya akan sangat memudahkan anda dalam memanage project.

### Keuntungan Menggunakan Automatic Deploy

Ketika ada perubahan, anda tidak perlu edit di server langsung karena itu resikonya besar. Apalagi perubahannya itu banyak, pasti akan banyak waktu untuk mengecek ulang kodenya. Namun dengan adanya automatic deployment anda akan sangat mudah ketika di project yang anda kerjakan bisa di edit di lokal, dan menggunakan `command line` yang simple.

Dengan begitu code anda bisa teratur, perubahan pun tetap bisa anda track dengan `git` dengan mengecek perubahannya.

### Menginstall Package Laravel Deployer

Gunakan package dari **lorisleiva** agar anda bisa lebih mudah untuk mendeploy aplikasi laravel anda. Silahkan anda cek githubnya di [Laravel Deployer](https://github.com/lorisleiva/laravel-deployer)

```bash
composer require deployer/deployer:^7.0
```

Copy/paste file `deploy.php` atau `deploy.yml` sample nya seperti ini jika anda menggunakan `deploy.yml`

```yml
import:
  - recipe/laravel.php
  - contrib/php-fpm.php
  - contrib/npm.php

config:
  application: 'mylaravelapp'
  repository: 'git@github.com:lorisleiva/mylaravelapp.git'
  php_fpm_version: 8.0

hosts:
  prod:
    remote_user: loris
    hostname: mylaravelapp.com
    deploy_path: '~/{{application}}'

tasks:
  deploy:
    - deploy:prepare
    - deploy:vendors
    - artisan:storage:link
    - artisan:view:cache
    - artisan:config:cache
    - artisan:migrate
    - npm:install
    - npm:run:prod
    - deploy:publish
    - php-fpm:reload
  npm:run:prod:
    script:
      - 'cd {{release_or_current_path}} && npm run prod'

after:
  deploy:failed: deploy:unlock
```

Edit beberapa bagian dan sesuaikan dengan server anda :

```yml
config:
  application: 'aplikasilaravelanda'
```

Ubah application dengan nama Aplikasi Laravel anda.

```yml
config:
  repository: 'git@github.com:lorisleiva/mylaravelapp.git'
  php_fpm_version: 8.0
```

Ubah repository dengan repo aplikasi laravel anda. dan tentukan versi php yang anda gunakan.

Ubah juga bagian ini :

```yml
hosts:
  prod:
    remote_user: loris
    hostname: mylaravelapp.com
    deploy_path: '~/{{application}}'
```

Jika anda ingin langsung mendeploy ke production bisa langsung isi bagian `prod` dengan server anda. Atau anda bisa juga menggunakan 2 kriteria yang ingin anda gunakan seperti ini :

```yml
hosts:
  stagging:
    remote_user: loris
    hostname: stagging.aplikasi.com
    deploy_path: '~/{{application}}'
  production:
    remote_user: loris
    hostname: aplikasi.com
    deploy_path: '~/{{application}}'
```

Ubah bagian `remote_user` dengan user di server anda,

> Saran untuk anda ketika anda ingin menggunakan ini, gunakan user yang selain `root` contoh user yang sering digunakan menggunakan `deployer`

Bagian hostname bisa anda isi dengan endpoint domain server anda. contohnya `aplikasi.com` dan bagian `deploy_path` adalah direktori tempat aplikasi anda di simpan.

Dibagian `Task` anda bisa menggunakan beberapa command untuk command setelah aplikasi anda di deploy ke server :

```yml
tasks:
  deploy:
    - deploy:prepare
    - deploy:vendors
    - artisan:storage:link
    - artisan:view:cache
    - artisan:config:cache
    - artisan:migrate
    - npm:install
    - npm:run:prod
    - deploy:publish
    - php-fpm:reload
```

Beberapa opsi jika anda sudah melakukan `npm run prod` di local sebaiknya tidak memerlukan command `npm install` lagi. biasanya saya compile di local dan hanya menggunakan seperti ini :

```yml
tasks:
  deploy:
    - deploy:prepare
    - deploy:vendors
    - artisan:storage:link
    - artisan:view:cache
    - artisan:config:cache
    - artisan:migrate
    - deploy:publish
```

Karena saya tidak akan mereload juga untuk `php-fpm` dan sekarang saatnya untuk melakukan deploying ke server.

Gunakan terminal / cmd anda di project direktori :

```bash
dep deploy
```

Dan akan di proses oleh package tersebut, jika anda ingin login ke SSH anda hanya tinggal mengetik :

```bash
dep ssh
```

Copy file `.env` anda yang sebelumnya sudah anda setting dan tulis ulang di `.env.example` sehingga anda akan mudah mengaturnya di server nanti, masukan perintah di server anda :

```bash
cp .env.example && php artisan key:generate
```

Ubah `.env` anda di server dengan variable `database` dan lainnya yang sudah anda buat sebelumnya.

Demikian tutorial cara **Deploy Laravel Dengan Laravel Deployer** semoga bermanfaat untuk anda semua happy coding...


Ada beberapa cara men `deploy` aplikasi laravel ke server, dengan cara git, manual, menggunakan `app hosting`, dan untuk menggunakan automatic deployment

Deploy Laravel Dengan Laravel Deployer


Jadi, katakanlah Anda telah menulis aplikasi yang luar biasa di `Next.js` dan Anda ingin menerapkannya ke platform kemas yang bagus seperti Digital Ocean atau Fly.io. Tetapi katakanlah Anda, seperti saya pada awal minggu lalu, belum pernah membuat aplikasi Node dalam container sebelumnya dan membutuhkan kursus kilat tentang cara melakukannya?

Inilah yang saya pelajari melalui proses ini untuk menyebarkan Tweet Sapu ke fly.io - baik langkah pertama yang naif untuk membuat wadah berfungsi sama sekali dan kemudian juga beberapa pengoptimalan yang diperlukan untuk itu.

### Ikuti Setup Docker Untuk Nextjs

Jika Anda ingin mengikuti, Anda harus menginstal Docker Desktop dan Yarn. Agar semuanya dapat direplikasi, saya menggunakan contoh Next.js Blog-Starter-Typescript dalam instruksi ini. Anda dapat mengaturnya secara lokal dengan perintah ini:

```bash
yarn create next-app --example blog-starter-typescript blog-starter-typescript-app
```

> Sebagai catatan tambahan, tips dan trik di sini bersifat umum untuk semua aplikasi Node dalam container, tetapi Dockerfile itu sendiri hanya akan berfungsi sebagai copy-paste yang tidak di-tweak jika Anda menggunakan Next.js. Jadi, jika Anda menggunakan platform yang berbeda, Anda mungkin harus mengubah file mana yang disimpan di penampung akhir Anda.

### Dasar-Dasar Persiapan

Jadi mari kita mulai dengan 101 - apa itu Docker dan mengapa Anda ingin menggunakannya. Pada intinya, Docker Containers adalah komputer virtual kecil yang diserialisasi ke disk dalam format standar. Untuk membuatnya, Anda membutuhkan tiga bahan:

- Gambar awal untuk dibangun - biasanya ini adalah gambar sistem operasi lengkap dengan beberapa perangkat lunak pra-instal dari Docker Hub.

* File baru untuk ditambahkan - dalam hal ini kode untuk aplikasi Anda.

* Langkah-langkah untuk menggabungkan dua komponen pertama. Inilah yang disimpan dalam file `Docker` dan file .`dockerignore`.

Dengan menggunakan ketiga komponen ini, Anda dapat membungkus perangkat lunak Anda ke dalam wadah standar yang dapat dijalankan di mesin apa pun yang menginstal perangkat lunak Docker. (Perhatikan bahwa ini memiliki peringatan besar "dalam teori" terlampir - jika Anda melakukan operasi yang kompleks dan canggih maka Anda mungkin mengalami batas kemampuan Docker. Namun, untuk aplikasi Next.js langsung seperti yang saya gunakan menggunakan di sini, ini bekerja dengan sangat baik.)

### File Docker yang Naif

Jadi seperti apa instruksi ini untuk aplikasi Next.js kami?

```dockerfile
COPY
# Naively Simple Node Dockerfile

FROM node:14.17-alpine

RUN mkdir -p /home/app/ && chown -R node:node /home/app
WORKDIR /home/app
COPY --chown=node:node . .

USER node

RUN yarn install --frozen-lockfile
RUN yarn build

EXPOSE 3000
CMD [ "yarn", "start" ]

```

Letakkan ini di file bernama `Dockerfile` di folder root aplikasi Anda.

### Memahami Dockerfile

Jadi apa fungsinya? Nah, Docker akan melewati instruksi ini satu per satu dan melakukan hal berikut:

```dockerfile
COPY
FROM node:14.17-alpine
```

Ini memberi tahu Docker bahwa aplikasi Anda sedang dibangun di atas wadah yang telah diinstal sebelumnya dengan Alpine Linux dan Node 14.17 (dengan npm dan benang).

```dockerfile
RUN mkdir -p /home/app/ && chown -R node:node /home/app
WORKDIR /home/app
COPY --chown=node:node . .

USER node
```

Ini adalah instruksi nyata pertama kami - kami membuat direktori bernama `/home/app`, memberikan kepemilikannya kepada pengguna bernama node, menjadikannya "direktori kerja" untuk wadah kami (di mana Docker mengharapkan file program utama kami untuk hidup), dan salin file di direktori tempat kami menjalankan docker build ke dalam wadah. Ingat wadah pada dasarnya adalah komputer kecil virtual, jadi kita harus menyalin file kita di sana untuk mengaksesnya!

Kami kemudian menjadi pengguna simpul itu. Secara default Docker berjalan sebagai root pada mesin yang ada. Tapi itu cukup berbahaya karena memberikan hak akses root ke kode apa pun yang kita jalankan, yang berarti sedikit kelemahan keamanan di Node atau salah satu dependensi NPM kita berpotensi memberikan akses ke seluruh server kita. Jadi, untuk menghindari itu, kami beralih ke pengguna non-root.

```dockerfile
RUN yarn install --frozen-lockfile
RUN yarn build
```

Kami menginstal dependensi NPM kami dan membangun server Next.js kami dalam mode produksi.

```dockerfile
EXPOSE 3000
CMD [ "yarn", "start" ]
```

Dan akhirnya kedua perintah ini memberikan instruksi Docker yang akan digunakannya ketika mencoba menjalankan software ini. Yang pertama memberi tahu Docker bahwa wadah ini mengharapkan koneksi pada port 3000, jadi itu harus mengekspos bahwa meninggalkan wadah (kami akan menghubungkannya sebentar dengan flag -p). Yang kedua memberi tahu Docker bahwa perintah untuk menjalankan untuk memulai wadah ini adalah yarn start.

### Bangun dan Jalankan!

Sekarang saatnya untuk menjalankan langkah-langkah itu dan membuat wadah Anda. Jalankan perintah berikut di terminal di direktori proyek Anda (Anda dapat mengganti beberapa-nama dengan tag pribadi seperti zacks-blog-1.0):

```bash
docker build -t some-name .
```

Gambar bawaan Anda, berisi mesin virtual yang siap menjalankan aplikasi web Anda, sekarang akan muncul secara lokal jika Anda memeriksa `docker image ls`:

```bash
$ docker image ls
REPOSITORY    TAG       IMAGE ID       CREATED          SIZE
some-name     latest    4c73a8c8d35c   2 minutes ago    622MB
```

Mari kita mulai:

```bash
docker run -p 3000:3000 some-name
```

(Anda dapat menambahkan flag -d setelah dijalankan untuk menjalankan server di latar belakang.)

Anda akan melihat log yang sama seperti jika Anda menjalankan yarn start secara normal. Dan, karena flag -p `3000:3000`, container Anda sekarang akan terhubung ke port `3000` lokal Anda, jadi jika Anda mengunjungi `http://localhost:3000` Anda akan melihat template blog Anda:

### Optimalkan - Mempersiapkan produksi ini

Besar! Anda sekarang telah mengemas aplikasi Anda. Tetapi sebelum Anda menerapkannya ke platform hosting favorit Anda, ada beberapa hal yang perlu kita lakukan.

Anda mungkin telah memperhatikan di atas bahwa ukuran gambar yang kami buat lebih dari 600MB - itu lebih dari 4x ukuran proyek kami di disk di luar wadah! Masalah ini hanya bertambah ketika aplikasi Anda menjadi lebih kompleks - versi bawaan dari wadah Tweet Sapu Frontend lebih dari 5GB pada saat ini! Itu banyak data untuk diunggah ke server Anda!

Hampir semua masalah ukuran ini terkait dengan satu kekhasan Docker - hampir setiap baris di Dockerfile membuat "lapisan" baru di gambar Docker akhir Anda. Setiap lapisan menangkap perubahan yang dibuat pada mesin virtual setelah baris itu berjalan. Ini adalah alat pengoptimalan yang kuat karena memungkinkan Docker untuk menggunakan kembali pekerjaan yang telah dilakukan - misalnya jika Anda memiliki beberapa pengaturan yang tidak pernah berubah seperti baris mkdir kami, Docker dapat menghitung lapisan itu sekali dan menggunakannya kembali untuk semua pembangunan berikutnya. Namun, itu juga dapat menyebabkan masalah ukuran gambar (karena banyak file yang tidak dibutuhkan mungkin akan disimpan di lapisan tersebut) dan masalah keamanan (karena Anda mungkin menangkap nilai rahasia di lapisan tersebut yang dapat disedot oleh seseorang yang mendapatkan akses ke file Anda. gambar akhir).

Anda dapat melihat lapisan dan ukurannya masing-masing menggunakan perintah ini (kredit ke posting ini tempat saya mendapatkannya):

```bash
docker history --human --format "{{.CreatedBy}}: {{.Size}}" some-name

```

```dockerfile
CMD ["yarn" "start"]: 0B
EXPOSE map[3000/tcp:{}]: 0B
RUN /bin/sh -c yarn build # buildkit: 10.6MB
RUN /bin/sh -c yarn install --frozen-lockfil…: 340MB
USER node: 0B
COPY . . # buildkit: 155MB
WORKDIR /home/app: 0B
RUN /bin/sh -c mkdir -p /home/app/ && chown …: 0B
/bin/sh -c #(nop)  CMD ["node"]: 0B
/bin/sh -c #(nop)  ENTRYPOINT ["docker-entry…: 0B
/bin/sh -c #(nop) COPY file:238737301d473041…: 116B
/bin/sh -c apk add --no-cache --virtual .bui…: 7.62MB
/bin/sh -c #(nop)  ENV YARN_VERSION=1.22.5: 0B
/bin/sh -c addgroup -g 1000 node     && addu…: 104MB
/bin/sh -c #(nop)  ENV NODE_VERSION=14.17.0: 0B
/bin/sh -c #(nop)  CMD ["/bin/sh"]: 0B
/bin/sh -c #(nop) ADD file:282b9d56236cae296…: 5.62MB
```

Dari sini kita dapat melihat bahwa sekitar 117MB ukuran gambar terjadi sebelum perintah pertama kita - ini adalah ukuran dasar dari gambar Alpine-Node yang sedang kita bangun sehingga tidak banyak yang dapat kita lakukan tentang itu. Tapi mari kita fokus pada dua pengoptimalan utama yang dapat kita lakukan setelah titik itu:

### Mudah: Abaikan Barang

Di Dockerfile naif kami, kami menjalankan perintah COPY --chown=node:node . .. Ini menyalin semua file di direktori kami saat ini ke dalam wadah Docker. Ini hampir selalu bukan yang Anda inginkan! Misalnya, Anda mungkin memiliki file .env dengan rahasia di dalamnya yang akan berakhir dalam teks biasa di gambar Docker akhir. (Anda harus menggunakan fitur rahasia env di platform hosting Anda.)

Dalam kasus aplikasi ini, ini tidak perlu menyalin folder node_modules (sejak kita memasangnya lagi dengan benang) dan folder .next (karena kita membangun kembali aplikasi di dalam wadah). Kami dapat memperbaikinya dengan file .dockerignore. File ini, di root proyek kami, memberi tahu Docker untuk melewati file dan folder tertentu saat menjalankan COPY.

```dockerfile
COPY
# .dockerignore file
.DS_Store
.next
node_modules
```

### Lanjutan: Dapatkan Kontainer Anda sebuah Kontainer

Sekarang otak galaksi bergerak di sini adalah menggunakan wadah untuk wadah kita. Kami akan membuat dua yang hanya digunakan untuk membangun aplikasi secara terpisah dari yang diunggah ke server. Ini menyelamatkan kita dari keharusan mengunggah lapisan yang berisi semua file yang digunakan atau dibuat dalam perjalanan ke tujuan itu. Inilah Dockerfile untuk itu (dengan komentar yang menjelaskan apa yang dilakukan setiap blok):

```dockerfile
# Double-container Dockerfile for separated build process.
# If you're just copy-pasting this, don't forget a .dockerignore!

# We're starting with the same base image, but we're declaring
# that this block outputs an image called DEPS that we
# won't be deploying - it just installs our Yarn deps
FROM node:14-alpine AS deps

# If you need libc for any of your deps, uncomment this line:
# RUN apk add --no-cache libc6-compat

# Copy over ONLY the package.json and yarn.lock
# so that this `yarn install` layer is only recomputed
# if these dependency files change. Nice speed hack!
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# END DEPS IMAGE

# Now we make a container to handle our Build
FROM node:14-alpine AS BUILD_IMAGE

# Set up our work directory again
WORKDIR /app

# Bring over the deps we installed and now also
# the rest of the source code to build the Next
# server for production
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

# Remove all the development dependencies since we don't
# need them to run the actual server.
RUN rm -rf node_modules
RUN yarn install --production --frozen-lockfile --ignore-scripts --prefer-offline

# END OF BUILD_IMAGE

# This starts our application's run image - the final output of build.
FROM node:14-alpine

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# Pull the built files out of BUILD_IMAGE - we need:
# 1. the package.json and yarn.lock
# 2. the Next build output and static files
# 3. the node_modules.
WORKDIR /app
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/package.json /app/yarn.lock ./
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/public ./public
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.next ./.next

# 4. OPTIONALLY the next.config.js, if your app has one
# COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/next.config.js  ./

USER nextjs

EXPOSE 3000

CMD [ "yarn", "start" ]
```


Jadi, katakanlah Anda telah menulis aplikasi yang luar biasa di Next.js dan Anda ingin menerapkannya ke platform kemas yang bagus seperti Digital Ocean atau Fly.io

Deploy Nextjs Menggunakan Docker Secara Efisien dengan Multi Stage Docker


Laravel Resources Membantu Kita untuk Mempermudah dalam mengerjakan Backend Api menggunakan Laravel, Beberapa Tips untuk anda yang menggunakan Laravel dalam Membangun Api bisa juga menggunakan ini, kalo menurut saya lebih mudah dan flexible menggunakan ini dibanding Laravel Fractal / Transformer, tetapi terkadang juga memang ada beberapa yang lebih baik menggunakan transformer.

Kali ini saya tidak akan membahas Laravel Transformer atau Laravel Fractal melainkan menggunakan Laravel Api Resources mari kita mulai sekarang.

Disini kita akan membuat table dan Crud Methodnya menggunakan Laravel Api Resources :

```bash
php artisan make:migration create_posts_table
```

Dan Ubah File Tersebut sesuai dengan kebutuhan anda di isi table posts tersebut :

```php
...
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug')->unique();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
...
```

Lalu kita migrate table `posts` ke database :

```bash
php artisan migrate
```

dan kita buat juga **Controller** serta **Model** dengan menggunakan perintah :

```bash
php artisan make:model Post -c
```

Di file **Model** kita akan mengubahnya seperti ini :

```php
    protected $table = 'posts';

// Silahkan tambahkan field lain yang harus diubah
    protected $fillable = ['title', 'slug'];

```

Perintah diatas akan membuat model `Post` dan `PostController` dan sekarang kita buat juga untuk Api Resources nya di Laravel dengan menggunakan perintah :

```bash
php artisan make:resource PostResource
```

dan akan menghasilkan file `PostResource`

Sekarang kita akan edit file `PostResource` nya

```php
<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class PostResource extends JsonResource
{

    public function toArray($request)
    {
        // Akan Kita ubah bagian ini
        return parent::toArray($request);
    }
}
```

Ubah Menjadi

```php
<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;
use Carbon\Carbon;

class PostResource extends JsonResource
{

    public function toArray($request)
    {
        // Setelah Diubah, Disini saya akan menampilkan Title, Id, Slug dan Created at Column di database
        return [
            'id' => $this->id,
            'title' => $this->title
            'slug' => $this->slug
            'created_at' => Carbon::parse($this->created_at)->format('d-m-Y')

        ];
    }
}
```

Nah Sekarang kita akan Ubah file `PostController` yang tadinya seperti ini :

```php
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Http\Resources\PostResource;
use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $blog = Post::get();

        return PostResource::collection($blog);
    }
```

Dan hasil Response dari Api yang telah kita buat akan menghasilkan Json Format dan siap dikonsumsi oleh Frontend.

Demikian Tips tentang Laravel kali ini ..

Happy Coding...


Laravel Resources Membantu Kita untuk Mempermudah dalam mengerjakan Backend Api menggunakan Laravel, Beberapa Tips untuk anda yang menggunakan Laravel dalam Membangun Api bisa juga menggunakan ini

Laravel Api Resources Mempercepat Manipulasi Response Json


Laravel baru-baru ini sudah mengeluarkan First Partynya untuk Implementasi **Authentication** dengan **Sanctum** package dari First party Laravel Juga. Berikut adalah Sedikit penjelasan Sanctum :

**Laravel Sanctum :**

Laravel Sanctum menyediakan sistem otentikasi kelas bulu untuk SPA (aplikasi satu halaman), aplikasi seluler, dan API berbasis token sederhana. Sanctum memungkinkan setiap pengguna aplikasi Anda menghasilkan beberapa token API untuk akun mereka. Token ini dapat diberikan kemampuan / cakupan yang menentukan tindakan mana yang diizinkan untuk dilakukan oleh token.

**Laravel Breeze :**

Laravel Breeze adalah implementasi minimal dan sederhana dari semua fitur otentikasi Laravel, termasuk login, registrasi, reset kata sandi, verifikasi email, dan konfirmasi kata sandi. Lapisan tampilan default Laravel Breeze terdiri dari template Blade sederhana yang ditata dengan Tailwind CSS.

Laravel Breeze akan kita gunakan sebagai backend Api dan nanti akan kita gunakan Nextjs untuk Front end. Nah mari kita mulai sekarang untuk menginstall dan menjajal `Laravel Breeze` dan `Laravel Sanctum Beraksi`

Pertama kita buat Project Laravel terlebih dahulu menggunakan [Laravel Installer](https://laravel.com/docs/9.x/installation) dan saya biasa menggunakan **Valet** :

```bash
laravel new breezebackend && cd breezebackend
```

Sekarang kita install laravel breeze

```bash
composer require laravel/breeze --dev
```

Lalu kita publish package breeze untuk Api only :

```bash
php artisan breeze:install api
// dan masukan juga
php artisan migrate
```

dan nanti akan menghasilkan beberapa file di `App/Http/Controllers/Auth`.

Oke Sekarang kita sudah membuat Authentication Setup Untuk Api dan sekarang kita buat Nextjs nya.

```bash
yarn create next-app breezefrontend
cd breezefrontend
```

Install beberapa package npm :

```bash
yarn add axios swr --save
```

Buat file di folder `hooks` jika belum ada buat terlebih dahulu foldernya, dan filenya seperti ini :

```js
import useSWR from 'swr';
import axios from '@/lib/axios';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
  const router = useRouter();

  const {
    data: user,
    error,
    revalidate,
  } = useSWR('/api/user', () =>
    axios
      .get('/api/user')
      .then((res) => res.data)
      .catch((error) => {
        if (error.response.status !== 409) throw error;

        router.push('/verify-email');
      })
  );

  const csrf = () => axios.get('/sanctum/csrf-cookie');

  const register = async ({ setErrors, ...props }) => {
    await csrf();

    setErrors([]);

    axios
      .post('/register', props)
      .then(() => revalidate())
      .catch((error) => {
        if (error.response.status !== 422) throw error;

        setErrors(Object.values(error.response.data.errors).flat());
      });
  };

  const login = async ({ setErrors, setStatus, ...props }) => {
    await csrf();

    setErrors([]);
    setStatus(null);

    axios
      .post('/login', props)
      .then(() => revalidate())
      .catch((error) => {
        if (error.response.status !== 422) throw error;

        setErrors(Object.values(error.response.data.errors).flat());
      });
  };

  const forgotPassword = async ({ setErrors, setStatus, email }) => {
    await csrf();

    setErrors([]);
    setStatus(null);

    axios
      .post('/forgot-password', { email })
      .then((response) => setStatus(response.data.status))
      .catch((error) => {
        if (error.response.status !== 422) throw error;

        setErrors(Object.values(error.response.data.errors).flat());
      });
  };

  const resetPassword = async ({ setErrors, setStatus, ...props }) => {
    await csrf();

    setErrors([]);
    setStatus(null);

    axios
      .post('/reset-password', { token: router.query.token, ...props })
      .then((response) => router.push('/login?reset=' + btoa(response.data.status)))
      .catch((error) => {
        if (error.response.status != 422) throw error;

        setErrors(Object.values(error.response.data.errors).flat());
      });
  };

  const resendEmailVerification = ({ setStatus }) => {
    axios
      .post('/email/verification-notification')
      .then((response) => setStatus(response.data.status));
  };

  const logout = async () => {
    if (!error) {
      await axios.post('/logout');

      revalidate();
    }

    window.location.pathname = '/login';
  };

  useEffect(() => {
    if (middleware === 'guest' && redirectIfAuthenticated && user)
      router.push(redirectIfAuthenticated);
    if (middleware === 'auth' && error) logout();
  }, [user, error]);

  return {
    user,
    register,
    login,
    forgotPassword,
    resetPassword,
    resendEmailVerification,
    logout,
  };
};
```

Jika sudah maka penggunaannya nanti di page login contohnya :

```js
import { useAuth } from '@/hooks/auth'
...
const { login } = useAuth({
        middleware: 'guest',
        redirectIfAuthenticated: '/dashboard',
})

...

// Functionnya seperti ini :
login({ email, password, setErrors, setStatus })

```

Bagian Register juga buat seperti ini :

```js
import { useAuth } from '@/hooks/auth'
...
const { register } = useAuth({
        middleware: 'guest',
        redirectIfAuthenticated: '/dashboard',
})

...

// Functionnya seperti ini :
register({ name, email, password, password_confirmation, setErrors })

```


Laravel baru-baru ini sudah mengeluarkan First Partynya untuk Implementasi Authentication dengan Sanctum package dari First party Laravel Juga

Laravel Breeze Api Untuk Nextjs


Saya baru mempelajari tentang metode cache di laravel untuk lebih meningkatkan performance, salah satunya mengguanakan Cache di Laravel menggunakan **Redis**.

> Catatan : Harap pastikan Redis sudah terinstall di local laptop anda, jika belum anda bisa install terlebih dahulu, karena yang akan kita bahas disini menggunakan Redis

Install `predis` di laravel menggunakan `composer` karena jika anda menggunakan `phpredis` tidak mendukung `serializer` nantinya :

```bash
composer require predis/predis
```

Baik sekarang kita akan benahi dulu file `.env` kita ketika ingin mengubah menggunakan Redis dan Cache Laravel :

```yaml
# Ubah cache driver menggunakan redis
CACHE_DRIVER=redis
# jika ada perubahan silahkan sesuaikan pengaturan redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
```

Lalu sekarang ini sudah bisa kita gunakan di controller kita :

```php
if (Cache::has('products')) {
    $products = Cache::get('products');
} else {
    $products = Cache::remember('products', now()->addMinute(), function() {
        return Product::query()->orderBy('created_at', 'DESC')->get();
    });
}

return view('product.index', ['product' => $products]);
```

Kenapa menggunakan `if` karna ini akan kita cek terlebih dahulu ketika ada Cache dengan id `products` maka akan kita tarik data tersebut

```php

if (Cache::has('products')) {
    $products = Cache::get('products');
}
```

Lalu bagian `else` kita definisikan bahwa tidak ada id di `redis` dengan nama `products` dan kita bisa membuat cache tersebut dengan cara menariknya :

```php
...
else {
    $products = Cache::remember('products', now()->addMinute(), function() {
        return Product::query()->orderBy('created_at', 'DESC')->get();
    });
}
...
```

Jangan lupa dalam proses `Create`, `Update` dan `Delete` ataupun create maka hapus cache nya agar nanti ketika ada data baru ataupun perubahan bisa muncul yang terbaru :

```php
$product = Product::create(...);

Cache::forget('products');

```

Oke sekarang kita akan coba buka dengan aplikasi Redis GUI yaitu Medis App atau lainnya yang bisa anda gunakan. dan hasilnya kita akan dapatkan seperti ini


Saya baru mempelajari tentang metode cache di laravel untuk lebih meningkatkan performance, salah satunya mengguanakan Cache di Laravel menggunakan Redis

Laravel Cache dengan Redis Gaskeun Bro


Beberapa hari yang lalu saya mencoba menggunakan **Laravel Deployer** untuk mendeploy Laravel saya di Versi 9. namun beberapa kali ada masalah ketika saya mencoba untuk mendeploy dengan package [Deployer Package](https://deployer.org). Saat ini saya mengubah strategi untuk Mendeploy Laravel App saya menggunakan Package First Parti dari Laravel yang dinamakan [Laravel Envoy](https://laravel.com/docs/9.x/envoy) dan teman-teman bisa melihat dokumentasinya disana.

Namun beberapa hal yang tidak bisa ditemukan di `Laravel Envoy` ini tidak bisa sama dengan `Deployer`. Untuk lebih jelasnya silahkan bandingkan sendiri ya. Nah sekarang yang akan saya bahas menggunakan Envoy Laravel. Mari Kita Setup :

### Buat File Envoy.blade.php

Buatlah file `Envoy.blade.php` di `root` project kita :

dan untuk setup kita buat seperti ini :

```php
@setup
	require __DIR__.'/vendor/autoload.php';
	$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
	try {
		$dotenv->load();
		$dotenv->required(['DEPLOY_SERVER', 'DEPLOY_REPOSITORY', 'DEPLOY_PATH'])->notEmpty();
	} catch ( Exception $e )  {
		echo $e->getMessage();
		exit;
	}

	$server = $_ENV['DEPLOY_SERVER'] ?? null;
	$repo = $_ENV['DEPLOY_REPOSITORY'] ?? null;
	$path = $_ENV['DEPLOY_PATH'] ?? null;
	$slack = $_ENV['DEPLOY_SLACK_WEBHOOK'] ?? null;
	$healthUrl = $_ENV['DEPLOY_HEALTH_CHECK'] ?? null;

	if ( substr($path, 0, 1) !== '/' ) throw new Exception('Careful - your deployment path does not begin with /');

	$date = ( new DateTime )->format('YmdHis');
	$env = isset($env) ? $env : "production";
	$branch = isset($branch) ? $branch : "master";
	$path = rtrim($path, '/');
	$release = $path.'/releases/'.$date;
@endsetup
```

Mari saya jelaskan sedikit tentang kode diatas :

```php
require __DIR__.'/vendor/autoload.php';
```

ini nanti dibutuhkan untuk loader dari `composer`

```php
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
```

Baris kode diatas untuk menarik data yang kita buat dari `.env` file kita.

```php
try {
    $dotenv->load();
    $dotenv->required(['DEPLOY_SERVER', 'DEPLOY_REPOSITORY', 'DEPLOY_PATH'])->notEmpty();
} catch ( Exception $e )  {
    echo $e->getMessage();
    exit;
}
```

Jika ada file `.env` maka akan kita gunakan, namun jika tidak ada maka akan exit

```php
$server = $_ENV['DEPLOY_SERVER'] ?? null;
$repo = $_ENV['DEPLOY_REPOSITORY'] ?? null;
$path = $_ENV['DEPLOY_PATH'] ?? null;
$slack = $_ENV['DEPLOY_SLACK_WEBHOOK'] ?? null;
$healthUrl = $_ENV['DEPLOY_HEALTH_CHECK'] ?? null;
```

Bagian ini akan kita ambil dari .env yang sudah kita buat samplenya :

```yaml
---
DEPLOY_SERVER=serverkamu.com
DEPLOY_REPOSITORY=git@github.com:githubkamu/repokamu.
DEPLOY_PATH=/var/www/html
DEPLOY_HEALTH_CHECK=serverkamu.com
---
## Env Lainnya
```

Setup Servernya seperti ini :

```php
@servers(['web' => $server])
```

setelah setup sudah semua sekarang kita buat lanjutannya, kita buat initial setup seperti ini :

```php
@task('init')
	if [ ! -d {{ $path }}/storage ]; then
		cd {{ $path }}
		git clone {{ $repo }} --branch={{ $branch }} --depth=1 -q {{ $release }}
		echo "Repository cloned"
		mv {{ $release }}/storage {{ $path }}/storage
		ln -s {{ $path }}/storage {{ $release }}/storage
		echo "Storage directory set up"
		cp {{ $release }}/.env.example {{ $path }}/.env
		ln -s {{ $path }}/.env {{ $release }}/.env
		echo "Environment file set up"
		rm -rf {{ $release }}
		echo "Deployment path initialised. Edit {{ $path }}/.env then run 'envoy run deploy'."
	else
		echo "Deployment path already initialised (storage directory exists)!"
	fi
@endtask

```

Penjelasan kode diatas adalah :

```php
if [ ! -d {{ $path }}/storage ]; then
    // Jika di folder DEPLOY_PATH tidak ada folder storage
else
    echo "Deployment path already initialised (storage directory exists)!"
    // Jika di folder DEPLOY_PATH sudah ada folder storage maka return nya echo
fi
```

di function `else` disini menentukan jika sudah melakukan initial atau sudah ada folder storage di folder `DEPLOY_PATH` env yang tadi kita buat maka tidak akan dibuat lagi.

```php
cd {{ $path }}
git clone {{ $repo }} --branch={{ $branch }} --depth=1 -q {{ $release }}
echo "Repository cloned"
```

Jika tidak ada maka Envoy akan clone dari repo dan branch yang kita tentukan nanti perintahnya.

```php
mv {{ $release }}/storage {{ $path }}/storage
ln -s {{ $path }}/storage {{ $release }}/storage
echo "Storage directory set up"
```

Nah sekarang jika belum ada storage folder maka dibuatlah storage folder lalu di link ke release folder nantinya.

```php
cp {{ $release }}/.env.example {{ $path }}/.env
ln -s {{ $path }}/.env {{ $release }}/.env
echo "Environment file set up"
```

Lalu proses diatas akan mengcopy file `.env` jika belum ada maka akan di copy dari `.env.example` menjadi `.env`

```php
rm -rf {{ $release }}
echo "Deployment path initialised. Edit {{ $path }}/.env then run 'envoy run deploy'."
```

Menghapus folder release jika memang sudah ada.

### Memulai Membuat Urutan Envoy Laravel

Setelah Setup kita beres seperti diatas maka kita sekarang akan membuat urutan **task** untuk mendeploy file-file laravel kita.

```php
@story('deploy')
	deployment_start
	deployment_links
	deployment_composer
	deployment_migrate
	deployment_cache
	deployment_finish
	health_check
	deployment_option_cleanup
@endstory
```

Diatas adalah urutan tasknya dan kita sekarang akan membuat tasknya.

**Task No 1 : Clone Repositories**

```php
@task('deployment_start')
	cd {{ $path }}
	echo "Deployment ({{ $date }}) started"
	git clone {{ $repo }} --branch={{ $branch }} --depth=1 -q {{ $release }}
	echo "Repository cloned"
@endtask
```

Penjelasan Task diatas Kita akan login ke server dan ke direktori `DEPLOY_PATH` yang kita buat. lalu Proses dimulai, dan mengeluarkan `echo` Deployment started, lalu akan di clone repo kita ke server dengan branch dari perintah kita.

**Task No 2 : Remove Release Old**

```php
@task('deployment_links')
	cd {{ $path }}
	rm -rf {{ $release }}/storage
	ln -s {{ $path }}/storage {{ $release }}/storage
	echo "Storage directories set up"
	ln -s {{ $path }}/.env {{ $release }}/.env
	echo "Environment file set up"
@endtask
```

Ditahap dua ini kita ke path direktori yang sudah kita targetkan di `.env` dengan nama `DEPLOY_PATH` dan menghapus storage dari release (sebelumnya). lalu akan kita link storagenya ke storage release terbaru kita begitu juga dengan `.env` targetnya.

**Task No 3 : Install Composer Package**

```php
@task('deployment_composer')
	echo "Installing composer dependencies..."
	cd {{ $release }}
	composer install --no-interaction --quiet --no-dev --prefer-dist --optimize-autoloader
@endtask
```

Menginstall package-package dengan composer siapa tau ada package baru yang belum di install.

**Task No 4 : Migrate Database**

```php
@task('deployment_migrate')
	php {{ $release }}/artisan migrate --env={{ $env }} --force --no-interaction
@endtask
```

Melakukan migrasi dari schema database yang kita buat, dan belum ada di database server. namun jika sudah ada ini akan otomatis tidak termigrasi.

**Task No 5 : Npm Package install & Run Production**

```php
@task('deployment_npm')
	echo "Installing npm dependencies..."
	cd {{ $release }}
	npm install --no-audit --no-fund --no-optional
	echo "Running npm..."
	npm run {{ $env }} --silent
@endtask
```

Jika laravel teman-teman mempunya package-package npm maka bisa sekaligus menggunakan ini. seperti install bootstrap, inertia, livewire, tailwindcss dan lainnya. jadi ketika teman-teman ingin langsung proses npm production bisa juga memanfaatkan ini.

**Task No 6 : Clear Cache and Config**

```php
@task('deployment_cache')
	php {{ $release }}/artisan view:clear --quiet
	php {{ $release }}/artisan cache:clear --quiet
	php {{ $release }}/artisan config:cache --quiet
	echo "Cache cleared"
@endtask
```

Menghapus Cache dari semua yang dibuat dari sebelumnya dan membuat cache baru jika ada. Jadi nanti tidak perlu lagi memasukan perintah diatas.

**Task No 7 : Restart Queue & Symbolic Links**

```php
@task('deployment_finish')
	php {{ $release }}/artisan storage:link
	echo "Storage symbolic links created"
	php {{ $release }}/artisan queue:restart --quiet
	echo "Queue restarted"
	ln -nfs {{ $release }} {{ $path }}/current
	echo "Deployment ({{ $date }}) finished"
@endtask
```

Membuat **symbolic links** lagi untuk release terbaru hasil dari clone, dan merestart `queue` jika teman-teman mengaktifkannya / mempunyai queue di aplikasinya. Lalu membuat symbolic links lagi ke `current` app yang kita deploy.

**Task No 8 : Cleanup Old Release**

```php
@task('deployment_option_cleanup')
	cd {{ $path }}/releases
	@if ( isset($cleanup) && $cleanup )
		find . -maxdepth 1 -name "20*" | sort | head -n -4 | xargs rm -Rf
		echo "Cleaned up old deployments"
	@endif
@endtask

```

Clean up untuk menghapus release sebelumnya.

**Task No 9 : Health Check**

```php
@task('health_check')
	@if ( ! empty($healthUrl) )
		if [ "$(curl --write-out "%{http_code}\n" --silent --output /dev/null {{ $healthUrl }})" == "200" ]; then
			printf "\033[0;32mHealth check to {{ $healthUrl }} OK\033[0m\n"
		else
			printf "\033[1;31mHealth check to {{ $healthUrl }} FAILED\033[0m\n"
		fi
	@else
		echo "No health check set"
	@endif
@endtask
```

Pengecekan apakah ada response dari web app yang kita deploy apa tidak nya.

Demikian artikel **Laravel Envoy Cara Deploy Laravel Otomatis dengan Git Repositories** saya buat agar bisa sharing pengalaman saya ke teman-teman.

Semoga bermanfaat.


Namun beberapa hal yang tidak bisa ditemukan di Laravel Envoy ini tidak bisa sama dengan Deployer. Nah sekarang yang akan saya bahas menggunakan Envoy Laravel. Mari Kita Setup

Laravel Envoy Cara Deploy Laravel Otomatis dengan Git Repositories


Laravel Notification menggunakan delay yang diinginkan dengan menjeda beberapa menit atau bisa menggunakan `Carbon`.

Dengan Menggunakan `Carbon` anda bisa menggunakan Notification di Laravel sesuai yang diinginkan, mari sekarang kita mulai.

### Buat Notification Di Laravel

Buat Notifikasi dengan Mengirim Email dan Database

```bash
php artisan make:notification SendEmailNotification --markdown=email.notification
```

Lalu akan terbuat 2 file yaitu di folder `App\Notifications` dan di folder `resources/views/email` nah sekarang kita akan membuat Action untuk mengirimkan Notifikasi tersebut dengan menggunakan Controller

```bash
php artisan make:controller KirimNotificationController
```

Lalu buka file `KirimNotificationController` di folder `App\Http\Controllers` dan edit :

```php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Invoice;
use App\Models\User;

class KirimNotificationController extends Controller
{
    public function kirim($id)
    {

        // Delay selama 10 Menit
        $delay = now()->addMinutes(10);
        // Delay Selama 10 Detik
        // $delay = now()->addSeconds(10);

        $invoice = Invoice::find($id)
        $user = User::find(1)

        $user->notify((new SendEmailNotification($invoice))->delay($delay));

    }
}


```

penjelasan bahwa dengan kode diatas adalah notifikasi akan dikirim dengan jeda waktu 10 menit menggunakan DateTime menggunakan `Carbon` atau `now()` disini bisa anda lihat [Now Helper](https://laravel.com/docs/9.x/helpers#method-now)

Atau anda juga bisa menspesifikasikan beberapa notifikasi dengan delay yang berbeda di Laravel 9 :

```php
$user->notify((new SendEmailNotification($invoice))->delay([
    'mail' => now()->addMinutes(5),
    'sms' => now()->addMinutes(10),
]));

```

Bahkan anda juga bisa mendefinisikan delay di file `SendEmailNotification` dengan menambahkan function `withDelay` seperti ini :

```php

/**
 * Determine the notification's delivery delay.
 *
 * @param  mixed  $notifiable
 * @return array
 */
public function withDelay($notifiable)
{
    return [
        'mail' => now()->addMinutes(5),
        'sms' => now()->addMinutes(10),
    ];
}

```

jangan lupa ketika anda membuat notification diatas maka harus di implementasikan `ShouldQueue` di file `SendEmailNotification` seperti berikut :

```php

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Notification;

class SendEmailNotification extends Notification
{
    use Queueable;
    ...
}

```

Menjadi seperti ini :

```php

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Notification;

class SendEmailNotification extends Notification implements ShouldQueue
{
    use Queueable;
    ...
}

```

Demikian tutorial **Laravel Notification Menggunakan Delay Yang Diinginkan** yang bisa saya share. Happy Coding...


Laravel Notification menggunakan delay yang diinginkan dengan menjeda beberapa menit atau bisa menggunakan Carbon.

Laravel Notification Menggunakan Delay Yang Diinginkan


[Laravel Responder](https://github.com/flugg/laravel-responder) adalah paket untuk membangun respons API, mengintegrasikan Fractal ke Laravel dan Lumen. Itu dapat mengubah data Anda menggunakan transformer, membuat dan membuat serialisasi respons sukses dan kesalahan, menangani pengecualian, dan membantu Anda menguji respons Anda.

### Installasi Package

Install package dengan `composer` di `root` project anda

```bash
composer require flugger/laravel-responder
```

Jika anda menggunakan Laravel 5 kebawah bisa menambahkan / mendaftarkan ke Provider Laravel di file `config/app.php` seperti berikut :

```php
Flugg\Responder\ResponderServiceProvider::class,
```

dan menambahkan facade di file `config/app.php`

```php
'Responder' => Flugg\Responder\Facades\Responder::class,
'Transformation' => Flugg\Responder\Facades\Transformation::class,
```

Publish Package nya dengan cara publish vendor :

```bash
php artisan vendor:publish --provider="Flugg\Responder\ResponderServiceProvider"
```

### Pemakaian Package

Menggunakan Package ini bisa berbagai macam cara diantaranya `inject` Responder Service dari package ini contohnya seperti ini :

```php
...
use Flugg\Responder\Responder;

...
public function index(Responder $responder)
{
    return $responder->success();
}
```

atau anda juga bisa menggunakan `responder()` helper :

```php
return responder()->success();
```

atau jika anda menginginkan response error bisa menggunakan helper seperti ini :

```php
return responder()->error();
```

### Menggunakan Facade Langsung

Untuk menggunakan metode facade bisa dilakukan seperti ini :

```php
return Responder::success();
```

### Menggunakan MakeResponses Trait

Untuk menggunakan Trait bisa seperti ini :

```php
return $this->success();
```

Metode `success` dan `error` masing-masing mengembalikan `SuccessResponseBuilder` dan `ErrorResponseBuilder`, yang keduanya memperluas ResponseBuilder abstrak, memberi mereka perilaku umum. Mereka akan dikonversi ke JSON ketika dikembalikan dari pengontrol, tetapi Anda dapat secara eksplisit membuat instance `Illuminate\Http\JsonResponse` dengan metode respons:

```php
return responder()->success()->toArray();
```

atau jika response nya error maka akan seperti ini :

```php
return responder()->error()->toArray();
```

### Menggunakan Transformer Data

Anda dapat melampirkan transformator ke respons dengan mengirimkan argumen kedua ke metode sukses. Misalnya, di bawah ini kami melampirkan `transformer` penutup sederhana, mengubah daftar produk menjadi hanya menampilkan namanya:

```php
return responder()->success(Product::all(), function ($product) {
    return ['name' => $product->name];
})->respond();
```

Anda juga dapat mengubah menggunakan kelas transformator khusus:

```php
return responder()->success(Product::all(), ProductTransformer::class)->respond();
```

atau bisa juga seperti ini :

```php
return responder()->success(Product::all(), new ProductTransformer)->respond();
```

dan untuk mendedikasikan **Model** ke salah satu **Transformer** tambahkan fungsi seperti ini di model anda :

```php
...
use Flugg\Responder\Contracts\Transformable;
...
class Product extends Model implements Transformable {}
```

```php
/**
 * Get a transformer for the class.
 *
 * @return \Flugg\Responder\Transformers\Transformer|string|callable
 */
public function transformer()
{
    return ProductTransformer::class;
}
```

Demikian artikel ini saya buat biar temen-temen lebih efisien dalam mendevelop Applikasi API di **Laravel**


Laravel Responder adalah paket untuk membangun respons API, mengintegrasikan Fractal ke Laravel Itu dapat mengubah data Anda menggunakan transformer

Laravel Responder Package Laravel Untuk Api Response


Untuk Membuat Pivot table di laravel sangat dimudahkan karna memang power Eloquent sendiri memang sangat Powerfull. dan sekarang saya akan membahas Untuk Relasi Data Pivot antara table `product` dan `tag` sekarang bisa ditambahkan table `product_tag` agar kita lebih mudah dalam memanage Relasi Pivot Table:

```bash
php artisan make:migration create_product_tag_table
```

dan sekarang sudah ada file `xxx_create_product_tag_table` dan sekarang tambahkan di schema file migration tersebut seperti ini :

```php
...
Schema::create('product_tag', function (Blueprint $table) {
    $table->id();
    // kolom product_id akan direlasikan ke table product
    $table->foreignId('product_id')->constrained('product');
    // kolom tag_id akan direlasikan ke table product
    $table->foreignId('tag_id')->constrained('tag');
    $table->timestamps();
});
...
```

Sekarang buat model untuk table tersebut agar nanti bisa kita relasikan menggunakan Table itu:

```bash
php artisan make:model ProductTag
```

Edit file `ProductTag` model menjadi seperti ini :

```php
...
use Illuminate\Database\Eloquent\Relations\Pivot;
// Di Class ganti Model Menjadi Pivot
class ProductTag extends Pivot
{
    use HasFactory;

    // Relasi Ke Model Product
    public function product(): BelongsTo
    {
        return $this->belongsTo(Product::class, 'product_id');
    }

    // Relasi Ke Model Tag

    public function tag(): BelongsTo
    {
        return $this->belongsTo(Tag::class, 'tag_id');
    }

}
...

```

Sekarang kita sudah berhasil membuat relasi dengan model baru yaitu `ProductTag` dan sekarang kita ubah dan tambahkan relasi model `Product` nya seperti ini :

```php
public function tags(): BelongsToMany
{
    return $this->belongsToMany(Tag::class, 'product_tag', 'product_id', 'tag_id')
                ->using(ProductTag::class);
}
```

### Proses Merelasikan ketika membuat Product

Sekarang kita buat proses di controller `ProductController` ini bisa juga dengan nama file yang anda buat sebelumnya di tahap proses yang diinginkan:

```php
...
// Proses Create Product
$product = Product::create(...);
// Proses Relasi ke Tags yang tadi kita buat
$product->tags()->attach($request->input('tags'));
```

### Query Relasi Laravel Pivot Table

Relasi Load di Laravel Untuk Menarik data load tags dalam product bisa berbagai cara, saya lebih menggunakan cara yang simple seperti ini :

```php
...
// Cari produk berdasarkan parameter :id
$product = Product::find($id);
// Load data tags yang berhubungan dengan product
$product->load('tags');

return view('product.show', ['product' => $product]);
```


Untuk Membuat Pivot table di laravel sangat dimudahkan karna memang power Eloquent sendiri memang sangat Powerfull. dan sekarang saya akan membahas Untuk Relasi Data Pivot

Membangun Web apps tentunya banyak sekali pertimbangan antara lain dari sisi sustainable Apps itu sendiri dan memperhatikan database

Membangun Apps MultiTenant dengan Laravel


Hashnode memiliki api untuk bisa diakses sepenuhnya oleh blogger seperti saya, dan saya sangat menikmatinya ketika ngeblog menggunakan [Hashnode](https://hashnode.com) jika teman-teman ingin menggunakan atau ingin bermain-main dengan api hashnode silahkan buka [Playground Api Hashnode](https://api.hashnode.com/) dan sekarang kita coba query postingan kita :

```gql
query GetPosts {
  user(username: "xxxxxx") {
    photo
    name
    socialMedia {
      twitter
      linkedin
    }
    publication {
      posts(page: 2) {
        _id
        coverImage
        slug
        title
        brief
        cuid
      }
    }
  }
}
```

Maka nanti akan menghasilkan output seperti ini :

```json
{
  "data": {
    "user": {
      "publication": {
        "posts": [
          {
            "_id": "61dbd4cab0c3ca3df9b47b62",
            "title": "Tutorial Deploy Aplikasi Laravel Secara Otomatis Dengan Deployer di Ubuntu 16.04"
          },
          {
            "_id": "61dbd4b2cda0d0294b699b19",
            "title": "Menggunakan Select2 Ajax Depends di Laravel"
          },
          {
            "_id": "61dbd4b5b0c3ca3df9b47b49",
            "title": "Optimasi Docker untuk Production"
          },
          {
            "_id": "61dbd498cda0d0294b699aee",
            "title": "Tutorial Laravel Upload dengan Package ImageUp"
          },
          {
            "_id": "61dbd495b0c3ca3df9b47b28",
            "title": "Setup Laravel di Macbook dengan Valet"
          }
        ]
      }
    }
  }
}
```

Baik sekarang kita install [CRA](https://create-react-app.dev/) dengan cara memasukan

```bash
npx create-react-app my-app
```

Lalu install `@apollo/client` dan `graphql` di project React kita :

```bash
yarn add @apollo/client graphql
```

Buat Page Home disini saya menggunakan JSX saya buat file di `src/views/Home.jsx`

```jsx
const Home = () => {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(false)
    const [author, setAuthor] = useState({})

    const blogFetch = async () => {
        const client = new ApolloClient({
            uri: 'https://api.hashnode.com/',
            cache: new InMemoryCache(),
        })

        const { data } = await client.query({
            query: gql`
              query GetPosts {
                user(username: "nakamuraagatha") {
                    name
                    photo
                    numPosts
                    socialMedia {
                        twitter
                        linkedin
                    }
                    publication {
                        posts(page: ${pageql} ) {
                        _id
                        coverImage
                        slug
                        title
                        brief
                        }
                    }
                }
              }
            `,
          })
          setPosts(data.user.publication.posts);
          setAuthor({
            logo: data.user.photo,
            name: data.user.name,
            twitter: data.user.socialMedia.twitter,
            linkedin: data.user.socialMedia.linkedin,
        })
    }
```

dan jangan lupa gunakan **useEffect**

```jsx
useEffect(() => {
  blogFetch();
}, []);
```

dan sekarang kita bisa loop

```jsx
{
  posts.map((post, index) => {
    <div key={index}>
      <h1>{post.title}</h1>
    </div>;
  });
}
```

Lalu Sekarang kita buat Detail Blognya dengan nama file `BlogDetail.jsx` dan diantara kedua komponent ini akan dihubungkan dengan `react-router` dan kita harus menginstallnya

```bash
yarn add react-router-dom@6
```

saya menggunakan react router versi terbaru agar lebih update, sekarang kita atur route nya di `App.jsx` biar nanti saling berhubungan

```jsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import BlogDetail from './views/BlogDetail';
import Home from './views/Home';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path=":slug" element={<BlogDetail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;
```

Dan sekarang kita ke file `Home.jsx` kembali untuk menghubungkan link ke ` BlogDetail.jsx` seperti dibawah

```jsx
import { Link } from 'react-router-dom';

<Link to={`${post.slug}`}>Read More</Link>;
```

dan Kita benahi `BlogDetail.jsx` untuk menangkap parameter yang diberikan di `Home.jsx` tadi menggunakan component `Link` dari react-router-dom silahkan ubah menjadi

```jsx
const BlogDetail = () => {
    const [post, setPost] = useState({})
    const params = useParams()
    const slug = params.slug.toString()

  const blogLoad = () => {
             const client = new ApolloClient({
                uri: 'https://api.hashnode.com/',
                cache: new InMemoryCache(),
            })

            const { data } = await client.query({
                query: gql`
                  query PostDetail {
                    post (slug: "${slug}", hostname: "usernamekamu.hashnode.dev") {
                        title
                        dateAdded
                        coverImage

                        contentMarkdown
                    }
                  }
                `,
              })
              setPost(data.post)
}

```

Nah sekarang sudah bisa ngeblog dengan Reactjs dan Backend Menggunakan Hashnode,

untuk hasilnya teman-teman bisa langsung cek Blog saya [ImanSugirman.com](https://imansugirman.com)

Terimakasih [Hashnode](https://hashnode.com), saya sangat menyukainya...


Hashnode memiliki api untuk bisa diakses sepenuhnya oleh blogger seperti saya, dan saya sangat menikmatinya ketika ngeblog menggunakan

Membuat Blog Dengan React, Apollo Graphql dan Hashnode Api Gratis


Laravel membuat para developer semakin flexible dengan adanya fitur ini, jadi kita bisa membuat **Facade** custom yang akan kita buat sendiri, disini saya hanya akan menerangkan bagaimana cara ServiceProvider dan Facade Custom dan contoh penggunaannya.

Pertama kita buat ServiceProvider terlebih dahulu contoh kita akan menarik data dari Api [Raja Ongkir Api](https://rajaongkir.com/dokumentasi/starter) : dan kita akan membuat file `RajaongkirServiceProvider`

```bash
php artisan make:provider RajaongkirServiceProvider
```

Ubah file `RajaongkirServiceProvider` di folder `app/Providers` dan ubah menjadi seperti ini :

```php
...
use App\Services\RajaongkirService;

...
 /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        $this->app->singleton('Rajaongkir', function ($app) {
            return new RajaongkirService;
        });
    }
...
```

dan tambahkan file class `Rajaongkir.php` di folder **Facades** yang kita buat juga jadi hasilnya nanti akan ada di `App\Facades\Rajaongkir.php`

```php
<?php

namespace App\Facades;

use Illuminate\Support\Facades\Facade;

class Rajaongkir extends Facade
{
    protected static function getFacadeAccessor()
    {
        return 'Rajaongkir';
    }
}

```

dan sekarang kita buat file untuk Servicenya di folder **Services** yang nanti akan jadi seperti ini `Services/RajaongkirService.php` dan nanti isinya seperti ini :

```php

<?php

namespace App\Services;

use Illuminate\Support\Facades\Http;

class RajaongkirService
{

    public function __construct()
    {
        $this->key = 'apikey';
        $this->url = 'https://api.rajaongkir.com/starter';
    }

    public function getProvince()
    {
// Kita gunakan facade Http untuk http client
        $data = Http::withHeaders([ 'key'  => $this->key])->acceptJson()->get($this->url.'/province');

        return $data->json();
    }
```

Cara menggunakan Facade diatas nanti kita terapkan di controller dengan contoh kita akan membuat / memunculkan Provinsi yang ada di rajaongkir, pertama kita akan buat dulu controllernya dengan :

```bash
php artisan make:controller ProvinceController
```

Lalu di index method kita akan memanggil facade tersebut

```php

<?php

namespace App\Http\Controllers\Member;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Facades\Rajaongkir;

class ProvinceController extends Controller
{
    public function index()
    {
         $province = Rajaongkir::getProvince();

dd($province);
    }
}

```

nah sekarang kita sudah bisa mengkonsumsi api dari Rajaongkir. kamu juga bisa kembangkan fitur ini untuk integrasi api, integrasi lainnya yang tak terbatas.

Semoga bermanfaat..


Laravel membuat para developer semakin flexible dengan adanya fitur ini, jadi kita bisa membuat Laravel Facade

Membuat Facade Custom Laravel dan ServiceProvider


Laravel adalah Framework PHP yang sangat komplit menurut saya, karena hadir dengan fitur-fitur yang modern dan lengkap diantara lainnya. Anda bisa menggunakan Laravel untuk Skala Kecil maupun besar tergantung kebutuhan anda.

### Menggunakan Notifikasi Email

Ketika anda akan mengirimkan email, invoice, estimasi dari Framework laravel maka anda perlu menggunakan fitur `Notification` dan saat ini saya akan membahas notifikasi dengan Email saja. Jika anda ingin menggunakan notifikasi ke channel lain anda bisa menggunakan [Laravel Notification Channel](https://laravel-notification-channels.com/).

Oke sekarang kita harus membuat `notification_table` atau mempublish table `notifications`

ketik diterminal :

```bash
php artisan notifications:table
```

dan akan membuat otomatis file di folder `database/migrations` dengan nama file `xxx_create_notifications_table.php` lalu lakukan migration

```bash
php artisan migrate
```

### Buat Class Notification

Sekarang kita buat Class Notification baru dengan memasukan perintah :

```bash
php artisan make:notification InvoicePaid
```

yang mana akan tercipta file di folder `App/Notifications` dengan file `InvoicePaid.php` jangan lupa juga untuk menambahkan `Notifiable` di model yang akan diberi notifikasi, contohnya disini model `User` karena mengandung email untuk menerima Notifikasi.

```php
<?php

namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;
}

```

Untuk memastikan arah Notifikasi ke email user maka tambahkan juga :

```php
    // Tambahkan ini di User Model `App\Models/User`
    public function routeNotificationForMail($notification)
    {
        // Jika di table users ada kolom email untuk notifikasi
        return $this->email;

        // Jika di table users ada kolom email dan nama untuk notifikasi
        return [$this->email => $this->name];
    }
```

Saatnya mengatur Notifikasi yang tadi kita buat di `App/Notifications/InvoicePaid` di bagian `toMail` ubah dengan notifikasi yang anda inginkan misalnya :

```php
/**
 * Get the mail representation of the notification.
 *
 * @param  mixed  $notifiable
 * @return \Illuminate\Notifications\Messages\MailMessage
 */
public function toMail($notifiable)
{
    return (new MailMessage)
                // Sample Parameter Error
                // ->error()
                ->greeting('Hi Bro!')
                ->subject('Notification Subject')
                ->from('barrett@example.com', 'Barrett Blair')
                ->line('...')
                ->attach('/direktori/file.pdf');

}
```

### Menggunakan Blade Markdown untuk Isi Email

Jika anda menginginkan lebih leluasa dengan isi emailnya maka :

```bash
php artisan make:notification InvoicePaid --markdown=mail.invoice.paid
```

dan akan membuat file di folder `resources/views/mail/invoice/paid.blade.php` dan anda bisa mengeditnya dengan bahasa `markdown` dan ubah file `InvoicePaid` menjadi seperti ini :

```php
/**
 * Get the mail representation of the notification.
 *
 * @param  mixed  $notifiable
 * @return \Illuminate\Notifications\Messages\MailMessage
 */
public function toMail($notifiable)
{
    $url = url('/invoice/'.$this->invoice->id);

    return (new MailMessage)
                ->subject('Invoice Paid')
                ->markdown('mail.invoice.paid', ['url' => $url]);
}
```

Ubah juga isi emailnya di folder `resources/views/mail/invoice/paid.blade.php` menjadi :

```php
@component('mail::message')
# Invoice Paid

Your invoice has been paid!

@component('mail::button', ['url' => $url])
View Invoice
@endcomponent

Thanks,<br>
{{ config('app.name') }}
@endcomponent
```

Untuk Fitur-fitur Email nanti akan saya bahas di artikel selanjutnya.

### Menyimpan Notifikasi ke Database

Ubah file `InvoicePaid.php` tadi bagian bawahnya di method `toArray` dengan parameter yang anda inginkan contohnya seperti ini.

```php
/**
 * Get the array representation of the notification.
 *
 * @param  mixed  $notifiable
 * @return array
 */
public function toArray($notifiable)
{
    return [
        'invoice_id' => $this->invoice->id,
        'amount' => $this->invoice->amount,
    ];
}
```

Dan anda bisa memunculkan notifikasi di setiap user dengan cara seperti ini :

```php
$user = App\Models\User::find(1);

foreach ($user->notifications as $notification) {
    echo $notification->type;
}
```

### Mengirimkan Notifikasi dari Controller

Untuk mengirimkan notifikasi anda perlu memberikan triger di controller / proses / action yang anda buat :

```php
use Illuminate\Support\Facades\Notification;

Notification::send($users, new InvoicePaid($invoice));
```

Atau anda juga bisa menggunakan `Delay` background job atau `queue` dengan menambahkan seperti ini :

```php
// parameter $delay ini berarti pekerjaan pengiriman email akan ditunda 10menit
$delay = now()->addMinutes(10);

$user->notify((new InvoicePaid($invoice))->delay($delay));

```

### Menggunakan Provider SMTP untuk Mengirimkan Email

Biasanya ketika anda akan mengirimkan email maka diperlukan sender provider dan sekarang kita contohkan menggunakan [Mailtrap](https://mailtrap.io) sebelum menginstall / menggunakan Mailtrap install terlebih dahulu Guzzle Package :

```bash
composer require guzzlehttp/guzzle
```

Daftar terlebih dahulu di [Mailtrap](https://mailtrap.io) secara gratis untuk mendapatkan `Credential` untuk kita terapkan di `.env` file.

Lalu edit di `.env` file anda dan ubah seperti ini :

```yml
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=xxxxxx
MAIL_PASSWORD=xxxxxx
MAIL_ENCRYPTION=tls
```

Jika sudah lalu coba proses pengiriman email tersebut.

happy coding....


Laravel adalah Framework PHP yang sangat komplit menurut saya, karena hadir dengan fitur-fitur yang modern dan lengkap diantara lainnya

Membuat Notification Email dan Database di Laravel


Google Font adalah Layanan Font berbasis cloud yang bisa digunakan untuk web atau lainnya, disini akan saya bahas menambahkan Layanan Google font menggunakan `Nextjs` dan berikut adalah caranya :

Buat file dengan nama `_document.jsx` di folder **pages** disini karna saya menggunakan `jsx` maka saya pakai jsx silahkan anda sesuaikan nama filenya.

dan buat seperti ini :

```jsx
import Document, { Head, Html, Main, NextScript } from 'next/document';
import { createGetInitialProps } from '@mantine/next';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
  static getInitialProps = getInitialProps;

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```


Google Font adalah Layanan Font berbasis cloud yang bisa digunakan untuk web atau lainnya, disini akan saya bahas menambahkan Layanan Google font

Menambahkan Google Font di Nextjs


Pada tutorial sebelumnya kita membahas tentang Menggunakan Datatables dengan Link artikel [Menggunakan Laravel Datatables dari Yajra](/menggunakan-laravel-datatables-dari-yajra) silahkan anda bisa lihat dan pelajari dan sekarang kita akan menambahkan fitur Datatables Filter lebih dalam menggunakan `Scope Datatables` bagaimana caranya?

Ikuti tutorial ini sampai selesai sehingga anda bisa memahami Datatables Filter menggunakan `Service Implementation`.

### Membuat Scope Class Dari Yajra

Masukan perintah untuk membuat Scope dan akan dibuat otomatis di folder `App\Datatables\Scopes` :

```bash
php artisan datatables:scope UserScope
```

Lalu buka dan edit file `UserScope.php`

```php
<?php

namespace App\DataTables\Scopes;

use Yajra\DataTables\Contracts\DataTableScope;

class UserScope implements DataTableScope
{

    public function apply($query)
    {
        // return $query->where('id', 1);
    }
}

```

> Asumsi disini kita sudah membuat User dengan Enum Status atau Dengan `boolean` dengan nilai `1 dan 0` sehingga menghasilkan 2 variable.

Ubah dengan text editor anda menjadi :

```php
<?php

namespace App\DataTables\Scopes;

use Illuminate\Http\Request;
use Yajra\DataTables\Contracts\DataTableScope;

class UserScope implements DataTableScope
{
    protected $request;
    // Tambahkan Class Request
    public function __construct(Request $request)
    {
        $this->request  = $request;
    }

    public function apply($query)
    {
        // Field mana saja yang ingin di filter kasus disini akan memfilter `status` user
        $filters =  [
            'status',
        ];
        // Untuk Lebih variatif nantinya kita akan buat dinamis seperti ini

        foreach ($filters as $field) {
            if ($this->request->has($field)) {
                if($this->request->get($field) !== null){
                    $query->where($field, '=', $this->request->get($field));
                }
            }
        }

        return $query;
    }
}
```

Sekarang kita akan kembali mengedit UserController yang dibuat sebelumnya. Jika anda tidak tahu caranya maka bisa pelajari di artikel [Menggunakan Laravel Datatables dari Yajra](/menggunakan-laravel-datatables-dari-yajra)

Tambahkan `Scope` yang kita tadi buat dengan nama `UserScope` seperti ini :

```php
->addScope(new UserScope($request))
```

Sehingga akan menjadi seperti ini untuk UserController yang anda buat :

```php
<?php

namespace App\Http\Controllers\General;

use App\DataTables\UserDataTable;
use App\DataTables\Scopes\UserScope;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    // Tambahkan Request Class untuk menggunakannya nanti di scope
    public function index(UserDataTable $datatables, Request $request)
    {
        // Tambahkan addScope
        return $datatables->addScope(new UserScope($request))->render('users.index');
    }
    ...
```

Oke di Controller sudah berhasil mengkoneksikan antara `UserController` dan `UserScope` saatnya merubah di bagian `UserDatatables`

Ubah `UserDatatables` dibagian `minifiedAjax()` dengan ini :

```php
public function html()
{
    return $this->builder()
                ...
                ->minifiedAjax()
```

Dan ubah menjadi

```php
->ajax([
    'url'  => route('users.index'),
    'type' => 'GET',
    'data' => "function(data){
        _token            = '{{ csrf_token() }}',
        data.status    = $('select[name=status]').val();
        ...
    }"
])
```

Setelah memberikan parameter dengan `ajax` maka selanjutnya kita akan mengubah di sisi `view` users yang tadi kita buat dengan menambahkan script :

```javascript
$(document).ready(function () {
  var reqTable = $('.table').DataTable();

  $('#search-filter').on('submit', function (e) {
    reqTable.draw();
    e.preventDefault();
  });
});
```

dan tidak lupa untuk di bagian atas / filternya nanti diberikan button :

```php
<div class="col-2">
    <label for="status">Select Status</label>

    <select name="status" id="status" class="status form-control show-tick show-menu-arrow">
        <option value="">Select Status</option>
        <option value="1">Aktif</option>
        <option value="0">Non Aktif</option>
        ...
    </select>
</div>
<div class="col-2">
    <label for="status"></label>
    <div class="form-group mt-2">
        <button type="submit" class="btn btn-success">Filter</button>
    </div>
</div>
```

Demikian artikel tentang **Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra** lanjutan dari artikel Sebelumnya

happy coding...


Pada tutorial sebelumnya kita membahas tentang Menggunakan Datatables dengan Link artikel Menggunakan Laravel Datatables dari Yajra

Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra


Tutorial ini akan membahas cara menambahkan Google Analytics ke aplikasi Next.js Anda. Implementasinya mudah dan tidak memerlukan perpustakaan pihak ketiga.

Dalam 5 langkah mudah, saya akan menunjukkan cara menyiapkan Google Analytics.

Untuk tutorial ini, Anda akan membutuhkan:

### Tambahkan ID Google Analytics Anda ke file .env.local Next.js

Pertama, mulailah dengan membuat file `.env.local` tempat Anda akan menempatkan kunci Google Analytics Anda.

> Tip: Periksa `.gitignore` Anda untuk memastikan bahwa Anda tidak melakukan file ini secara tidak sengaja. `.env.local` seharusnya sudah disertakan secara default di proyek Next.js Anda, tetapi periksa untuk memastikannya.

```js
NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>
```

### Masukkan kode pelacakan Google Analytics ke dalam aplikasi Next.js

Sekarang setelah kunci Anda disetel, Anda perlu memasukkan dan mengonfigurasi tag situs Global Google Analytics (alias gtag) ke jendela browser Anda.

Untuk mengakses elemen kepala di aplikasi Next.js Anda, Anda perlu membuat file `_document.js` khusus ke dalam folder halaman Anda.

> Tip: Bingung tentang apa itu file dokumen kustom? Jangan ragu untuk memeriksa [dokumentasi Next.js](https://nextjs.org/docs/messages/next-script-for-ga) pada dokumen kustom.

```js
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

### Fungsi khusus untuk melacak tampilan halaman dan Event

Set kunci: periksa! Tag situs global dikonfigurasi: periksa!

Mari beralih ke bagian pelacakan Google Analytics. Untuk melacak dengan benar perilaku pengguna Anda, Anda perlu mencatat tampilan halaman dan secara opsional, peristiwa tertentu yang dipicu di aplikasi Anda.

Untuk melakukannya, saya sarankan Anda membuat folder `lib` di mana Anda akan meletakkan semua kode Anda yang terkait dengan perpustakaan pihak ketiga dan folder lain di dalamnya yang disebut ga untuk Google Analytics.

Di dalam folder `lib/ga` Anda, buat `index.js` dengan dua fungsi: satu untuk mencatat tampilan halaman dan acara lainnya.

```js
// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  });
};

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params);
};
```

file `lib/ga/index.js`

### Catat tampilan halaman di aplikasi Next.js Anda

Cara termudah untuk mencatat tampilan halaman di aplikasi Next.js Anda adalah dengan berlangganan router Anda dan mendengarkan acara `routeChangeComplete`.

Untuk melakukannya, masuk ke file `_app.js` Anda dan dengan useEffect, periksa peristiwa baru yang terjadi dengan router Anda. Ada banyak jenis acara tetapi kami hanya peduli ketika pengguna berhasil menavigasi ke halaman baru **routeChangeComplete**.

> Catatan: Jika Anda tertarik, ada banyak jenis event router di Next.js. Anda mungkin, misalnya, tertarik untuk mencatat ketika terjadi kesalahan (routeChangeError).

```js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

import * as ga from '../lib/ga';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url);
    };
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;
```

### Buat Event tertentu di aplikasi Next.js Anda

Sekarang setelah tampilan halaman kami dilacak, Anda mungkin tertarik untuk mencatat peristiwa tertentu dalam aplikasi Anda. Berikut adalah daftar peristiwa Default Google Analytics.

Ini adalah contoh cara mencatat istilah penelusuran yang dimasukkan oleh pengguna:

```js
import { useState } from 'react';

import * as ga from '../lib/ga';

export default function Home() {
  const [query, setQuery] = useState('');

  const search = () => {
    ga.event({
      action: 'search',
      params: {
        search_term: query,
      },
    });
  };

  return (
    <div>
      <div>
        <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
      </div>
      <div>
        <button onClick={() => search()}>Search</button>
      </div>
    </div>
  );
}
```


Tutorial ini akan membahas cara menambahkan Google Analytics ke aplikasi Next.js Anda. Implementasinya mudah dan tidak memerlukan perpustakaan pihak ketiga

Menggunakan Google Analytic di Nextjs


Laratrust adalah Sebuah package yang dipadukan dengan Laravel dan terasa harmoni ketika digunakan untuk web aplikasi yang sangat banyak menggunakan otentikasi dan otorisasi, biasanya ini digunakan untuk aplikasi besar dalam pengembangan software-software yang banyak aturan-aturan dari mulai pembuat, approval, penerima, pengedit dan lainnya. Sepertinya semua software memang harus menggunakan ini, karna pastinya akan banyak sekali kemungkinan-kemungkinan tidak kita prediksi didepan, nah kali ini kita akan mencoba Menginstall dan menggunakan [Package Laratrust](https://laratrust.santigarcor.me) ini :

Pertama install terlebih dahulu

```bash
composer require santigarcor/laratrust
```

Lalu Publish package laratrust

```bash
php artisan vendor:publish --tag="laratrust"
```

Jangan lupa untuk Clear Cache terlebih dahulu :

```bash
php artisan config:clear
```

Lalu sekarang kita setup untuk [Laratrust Package](https://laratrust.santigarcor.me/docs/6.x/installation.html) dengan memasukan perintah :

```bash
php artisan laratrust:setup
```

Dengan otomatis model `Role` dan `Permission` akan dibuat oleh **Laratrust**

Biasanya setelah melakukan setup harus kembali di `autoload` lagi composernya, dan kita harus memasukan perintah :

```bash
composer dump-autoload
```

sekarang silahkan migrate database :

```bash
php artisan migrate
```

### Menggunakan Laratrust Role

Jika anda ingin membuat role / jabatan seseorang di sistem maka baiknya dibuat dan disimpan di database

Berikut contoh membuat role di Controller :

```php
$owner = Role::create([
// contoh ketika ingin membuat role yang namanya owner
    'name' => 'owner',
    'display_name' => 'Project Owner', // optional
    'description' => 'User is the owner of a given project', // optional
]);
```

Dan berikut membuat permission dicontroller :

```php
$owner = Permission::create([
// contoh ketika ingin membuat role yang namanya owner
    'name' => 'create_project',
    'display_name' => 'Create Project', // optional
    'description' => 'Create Project description', // optional
]);
```

Dan ketika user itu akan dikaitkan dengan mendelegasikannya menjadi `role owner` bisa seperti ini :

```php
$user = User::find(1);
$user->attachRole($owner);
```

Dengan mengaitkan user sebagai `owner` maka sudah terotomasi akan memberikan permission `create_project`

### Middleware

Penerapan Middleware jika anda menggunakan seperti ini di `routeMiddleware` :

```php
'role' => \Laratrust\Middleware\LaratrustRole::class,
'permission' => \Laratrust\Middleware\LaratrustPermission::class,
'ability' => \Laratrust\Middleware\LaratrustAbility::class,
```

### Implementasi Controller Dalam Pencegahan

Untuk Implementasi di controller laravel bisa menggunakan dengan :

```php
$users = User::whereRoleIs('admin')->get();
```

Jika anda ingin membuat pencegahan di `route` bisa dengan cara

```php
Route::group(['prefix' => 'admin', 'middleware' => ['role:owner']], function() {
    Route::get('/', 'AdminController@welcome');
    Route::get('/manage', ['middleware' => ['permission:manage-admins'], 'uses' => 'AdminController@manageAdmins']);
});
```


Laratrust adalah Sebuah package yang dipadukan dengan Laravel dan terasa harmoni ketika digunakan untuk web aplikasi yang sangat banyak menggunakan otentikasi dan otorisasi

Menggunakan Laratrust Untuk Role Akses di Laravel


### Penjelasan Laravel DataTables

Pada tutorial kali ini saya akan menjelaskan bagaimana cara mengintegrasikan Laravel dengan **DataTables** dengan menggunakan package dari [Yajra Box](https://github.com/yajra/laravel-datatables) dan akan kita integrasikan dengan Project Laravel yang kita buat.

### Install Menggunakan Composer

Masukan perintah :

```bash
# Jika ingin menginstall keseluruhan termasuk html builder dan buttons
composer require yajra/laravel-datatables-oracle:"~9.0"

# Jika Hanya ingin sebagian yang di install
composer require yajra/laravel-datatables
```

Itu untuk menginstall semua package dari Laravel Datatables dari **Yajrabox**, untuk mempublish package gunakan perintah :

#### Laravel DataTables

Fungsi untuk mempublish Laravel `Datatables` dan akan mempublish semua package dari Yajra Datatables beserta Service implementation :

```bash
php artisan vendor:publish --tag=datatables
```

#### HTML Builder Plugin

Jika ingin mempublish Package html buildernya anda juga bisa mempublish satu per satu package yang ada di dalamnya :

```bash
php artisan vendor:publish --tag=datatables-html
```

#### Buttons Plugins

Jika ingin mempublish package button yang ada di package Yajra Datatables

```bash
php artisan vendor:publish --tag=datatables-buttons
```

### Penggunaan Laravel Datatables Service Implementation

Kenapa menggunakan `Service Implementation`? karena ini akan memudahkan anda jika anda pemula dalam mengimplementasikan Datatables di Laravel. bahkan kode anda bisa menjadi lebih rapi juga mengurangi sedikit penulisan `jquery` atau `ajax`.

Oke Saatnya kini membuat datatables untuk User, Untuk Membuat Class DataTables sekarang masukan perintah :

```bash
php artisan datatables:make UsersDataTable
```

Dan sekarang kita punya file di `App\DataTables\UsersDataTable` lalu anda akan melihat :

```php
<?php
namespace App\DataTables;

use App\Models\User;
use Yajra\DataTables\Services\DataTable;

class RolesDataTable extends DataTable
{

    public function dataTable($query)
    {
        return datatables($query)
            ->addColumn('action', 'users.action');
    }


    public function query(User $model)
    {
        return $model->newQuery();
    }


    public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->addAction(['width' => '80px'])
                    ->parameters($this->getBuilderParameters());
    }


    protected function getColumns()
    {
        return [
            'id',
            'name',
            'email',
            'created_at',
            'updated_at'
        ];
    }


    protected function filename()
    {
        return 'users_' . date('YmdHis');
    }
}

```

Perhatikan untuk nanti akan kita tambahkan fitur buttons di datatables ini :

```php
->addColumn('action', 'users.action');
```

Nanti anda bisa membuat buttons dengan menambahkan file di `resources/views/users/action.blade.php` dengan sample seperti ini :

```php
{!! Form::open(['route' => ['users.destroy', $id], 'method' => 'delete']) !!}
    <a href="{{ route('users.show', $id) }}" class='btn btn-default btn-icon'>
        View
    </a>
    <a href="{{ route('users.edit', $id) }}" class='btn btn-default btn-icon'>
        Edit
    </a>
    {!! Form::button('Hapus', [
        'type' => 'submit',
        'class' => 'btn btn-default btn-icon',
        'onclick' => "return confirm('Are you sure?')"
    ]) !!}
{!! Form::close() !!}
```

### Buat UserController

Lalu Buatlah Controller dengan memasukan perintah :

```bash
php artisan make:controller UserController
```

Dan akan membuat file `App\Http\Controllers\UserController` lalu edit dan tulis seperti ini :

```php
<?php

namespace App\Http\Controllers\General;

use App\DataTables\UserDataTable;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(UserDataTable $datatables)
    {
        return $datatables->render('users.index');
    }
    ...
```

Buat lah file `users/index.blade` di folder `resources/views` kurang lebih seperti ini :

```php
@extends('layouts.app')

@section('title', 'User Management')

@section('content')
<div class="mb-5">
    <div class="card">
        <div class="card-header pb-0">
            <h5 class="pb-0 mb-0">Data User</h5>
        </div>
        <div class="card-body">
            // Jika ingin menambahkan Class css bisa disini
            {!! $dataTable->table(['class' => 'table table-bordered']) !!}
        </div>
    </div>
</div>
@endsection


@push('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
@endpush

```

### Buat Route Untuk User

Untuk membuat Controller anda berjalan dengan Datatables tadi yang kita buat kita tambahkan `route` untuk `users` tadi di folder `routes/web` :

```php
<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

...
    Route::resource('users', UserController::class);
...
```

Lalu anda bisa mengakses laravel anda di `laravelku.test/users` dan akan langsung muncul list datatables users tadi.

Demikian tutorial **Menggunakan Laravel Datatables dari Yajra** Untuk tahap selanjutnya anda bisa menambahkan Ajax Filter dengan menambahkan `Scope Datatables` di artikel [Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra](/menambahkan-scope-dan-ajax-filter-di-laravel-datatables-dari-yajra)


Pada tutorial kali ini saya akan menjelaskan bagaimana cara mengintegrasikan Laravel dengan DataTables dengan menggunakan package dari Yajra Box dan akan kita integrasikan dengan Project Laravel yang kita buat.

Menggunakan Laravel Datatables dari Yajra


Laravel Memiliki Package first party untuk memonitoring job `queue` atau background job yang bisa dijadwalkan atau delaying. Package itu disebut `Horizon` gratis dan sangat bagus dalam visualisasi. Jika anda sebelumnya adalah `Rails Developer` anda pastinya sudah faham dengan hal ini karena di **Ruby on Rails** itu ada yang namanya Sidekiq. Horizon hanyalah package yang hanya bisa memonitoring `Queue` dari laravel, sedangkan yang melakukan job action proccessing nya biasanya menggunakan `Redis`.

Selain Redis anda juga bisa menggunakan AWS sqs dari amazon, namun jika aplikasi anda masih terhitung kecil dan tidak terlalu komplex, Redis masih sangat berfungsi dengan baik.

Baiklah sekarang kita akan mengimplementasikan menggunakan Horizon dan Redis di Server Aplikasi Laravel anda.

### Install Redis di Server Ubuntu

Untuk menginstall redis anda harus mengerti beberapa cara untuk menggunakan `sudo` untuk pengguna ubuntu.

Update terlebih dahulu semua package dari server anda.

```bash
sudo apt update
```

Lalu instal Redis dengan mengetik:

```bash
sudo apt install redis-server
```

Ini akan mengunduh dan menginstal Redis serta dependensinya. Setelah ini, ada satu perubahan konfigurasi penting yang harus dibuat di dalam berkas konfigurasi Redis, yang dihasilkan secara otomatis selama instalasi.

Edit konfigurasi Redis dengan `nano` dengan cara mengetik :

```bash
sudo nano /etc/redis/redis.conf
```

Edit bagian `supervised` menggunakan `systemd` yang ada di file `/etc/redis/redis.conf`

```bash
# If you run Redis from upstart or systemd, Redis can interact with your
# supervision tree. Options:
#   supervised no      - no supervision interaction
#   supervised upstart - signal upstart by putting Redis into SIGSTOP mode
#   supervised systemd - signal systemd by writing READY=1 to $NOTIFY_SOCKET
#   supervised auto    - detect upstart or systemd method based on
#                        UPSTART_JOB or NOTIFY_SOCKET environment variables
# Note: these supervision methods only signal "process is ready."
#       They do not enable continuous liveness pings back to your supervisor.
supervised systemd
```

Restart Redis anda dengan memasukan perintah :

```bash
sudo systemctl restart redis.service
```

### Setup Aplikasi Laravel anda

Baik sekarang kita kembali ke Aplikasi Laravel anda dan menginstall package `horizon` dari laravel

```bash
composer require laravel/horizon
```

Setelah menginstall package sekarang kita install `horizon` nya

```bash
php artisan horizon:install
```

Dan akan menghasilkan file `config/horizon.php` sekarang kita konfigurasikan `horizon.php` dan sesuaikan dengan kebutuhan anda. Untuk membedakan antara development dan production.

```php
'environments' => [
    'production' => [
        'supervisor-1' => [
            'maxProcesses' => 10,
            'balanceMaxShift' => 1,
            'balanceCooldown' => 3,
        ],
    ],

    'local' => [
        'supervisor-1' => [
            'maxProcesses' => 3,
        ],
    ],
],
```

Di pengaturan `Default` kita akan menggunakan `redis sebagai defaultnya` :

```php
'defaults' => [
    'supervisor-1' => [
        'connection' => 'redis',
        'queue' => ['default'],
        'balance' => 'auto',
        'maxProcesses' => 1,
        'memory' => 128,
        'tries' => 1,
        'nice' => 0,
    ],
],
```

Anda juga harus mengkonfigurasikan untuk `permission` akses hanya user tertentu dan itu bisa anda setup difile `app/Providers/HorizonServiceProvider.php` menjadi seperti ini :

```php
/**
 * Register the Horizon gate.
 *
 * This gate determines who can access Horizon in non-local environments.
 *
 * @return void
 */
protected function gate()
{
    Gate::define('viewHorizon', function ($user) {
        return in_array($user->email, [
            'anda@aplikasi.com',
        ]);
    });
}

```

Publish semua package dari `horizon` dengan memasukan perintah :

```bash
php artisan horizon:publish
```

Dan script di file `composer.json` agar otomatis publish horizon ketika melakukan composer reload :

```json
{
  "scripts": {
    "post-update-cmd": ["@php artisan horizon:publish --ansi"]
  }
}
```

Jika anda masih tahap development anda bisa menjalankan perintah :

```bash
# Untuk Menjalankan Horizon
php artisan horizon
# Untuk Melakukan Pause
php artisan horizon:pause
# Untuk Melakukan Melanjutkan
php artisan horizon:continue

```

Sedangkan untuk di Production nanti menggunakan `supervisord`

### Install Supervisord di Server

Install Supervisor di Server

```bash
sudo apt-get install supervisor
```

Lalu anda harus membuat file di folder `/etc/supervisor/conf.d` dengan nama contohnya `horizon.conf` sample nya seperti ini :

```bash
[program:horizon]
process_name=%(program_name)s
# Sesuaikan dengan Direktori Aplikasi anda
command=php /home/forge/example.com/artisan horizon
autostart=true
autorestart=true
# Sesuaikan dengan User Aplikasi anda
user=forge
redirect_stderr=true
# Sesuaikan dengan Direktori Aplikasi anda
stdout_logfile=/home/forge/example.com/horizon.log
stopwaitsecs=3600
```

Masukan beberapa perintah untuk menjalankan `supervisord`

```bash
# Perintah untuk Membaca Kembali
sudo supervisorctl reread
# Perintah untuk Mengupdate
sudo supervisorctl update
# Perintah untuk Memulai Horizon dengan menggunakan `supervisor`
sudo supervisorctl start horizon
```

Sekarang saatnya kita coba untuk menggunakannya **Go Run** gaesss...

```bash
php artisan make:job UploadDataProcessJob
```

Dan akan membuat file di `App/Jobs/UploadDataProcessJob` lalu sekarang kita edit :

```php
<?php

namespace App\Jobs;

use App\Models\User;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Notification;


class CandidateProccessJob implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    // Parameter yang diterima dari Controller
    protected $user;


    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function handle()
    {
        $user = $this->user;

        // Contoh jika Job Processingnya mengirimkan Email ke User
        Notification::send($user, new SendEmailToUser($user));

    }
```

Untuk Lebih lengkap Membuat Notification anda bisa membaca artikel tentang [Membuat Notification Email dan Database di Laravel](/membuat-notification-email-dan-database-di-laravel)

Dan cek di url `https://aplikasianda.com/horizon` maka akan muncul `queue` dan jika anda membuat banyak job pun akan tampil disana sehingga proses `background job` akan sangat tertata.

Demikian artikel tentang **Menggunakan Laravel Horizon Package untuk Memonitoring Queue**


Laravel Memiliki Package first party untuk memonitoring job queue atau background job yang bisa dijadwalkan atau delaying

Menggunakan Laravel Horizon Package untuk Memonitoring Queue


Pada setiap aplikasi biasanya ada beberapa batasan untuk beberapa orang. Hal ini bisa dibatasi berdasarkan `roles` atau jabatan seseorang dalam sebuah perusahaan, atau jika jabatan tersebut ada lebih dari 1 orang dan masing-masingnya ada beberapa perbedaan maka ada juga fungsi `permission` dalam sebuah aplikasi, yang berfungsi untuk memilah dan memilih beberapa akses yang bisa disesuaikan dengan jabatan atau orang didalamnya.

Solusi untuk melakukan pembatasan `roles` dan `permission` itu menggunakan package dari **Spatie** yang memang sudah banyak dipakai oleh para developer laravel.

### Instalasi Laravel Permission dari Spatie Package

Untuk menginstal anda bisa menulis perintah :

```bash
composer require spatie/laravel-permission
```

**Opsional**: Package akan didaftarkan secara otomatis. Atau Anda dapat menambahkan di `app.php` secara manual di file `config/app.php` Anda:

```php
'providers' => [
    // ...
    Spatie\Permission\PermissionServiceProvider::class,
];
```

Setelah instalasi maka anda bisa mempublish file config dengan cara :

```bash
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
```

Dan file `permission.php` akan ada di folder `config` anda untuk anda bisa mengkonfigurasikan pengaturan permission. Jangan lupa setelah anda mempublish anda sebaiknya mengoptimasikan dan clear cache untuk aplikasi anda.

```bash
php artisan optimize:clear
 # or
php artisan config:clear
```

Jalankan perintah migration dari console laravel anda.

```bash
php artisan migrate
```

### Integrasikan Dengan Model User anda

Integrasikan permission dengan `User` model anda yang berada di `App\Models` :

```php
use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;

    // ...
}
```

Untuk membuat salah satu **Role** anda bisa menggunakan `eloquent` dengan cara seperti ini :

```php
use Spatie\Permission\Models\Role;

$role = Role::create(['name' => 'writer']);
```

Maka hasilnya anda akan melihat di database tabel `roles` akan tampil `writer`. Selanjutnya anda bisa membuat `permission` dengan `eloquent` seperti ini :

```php
use Spatie\Permission\Models\Permission;

$permission = Permission::create(['name' => 'edit_articles']);
```

Lalu penggabungan dalam setiap role itu jika memiliki permission maka akan seperti ini :

```php
$role->givePermissionTo($permission);
```

yang mana artinya adalah `$role` yang bernama `writer` memiliki izin untuk `edit_articles` jika anda ingin mengedit roles tersebut maka nanti anda harus menggunakan `eloquent` di method `update` seperti ini :

```php
$role->syncPermissions($permissions);
```

### Menetapkan User Mempunyai Salah Satu Roles

Selanjutnya anda akan menetapkan salah satu **User** anda akan menggunakan kode seperti ini :

```php
// User dengan id 1
$user = User::find(1);

// User ditetapkan sebagai `writer` dan sudah terotomatis user ini mendapatkan izin permission yang berkaitan dengan roles writer
$user->assignRole('writer');

// Atau anda bisa juga menetapkan 2 roles sekaligus
$user->assignRole('writer', 'admin');

// Dan ketika anda melakukan update bisa juga menggunakan
$user->syncRoles(['writer', 'admin']);
```

Dan anda juga bisa mencari user dengan roles tertentu menggunakan Eloquent :

```php
// User mana saja yang memiliki roles writer
$user->hasRole('writer');
```

Setelah anda men-setup dan menentukan user tersebut ditetapkan roles sebagai `writer` contohnya. Ini tidak bisa langsung anda gunakan pembatasannya di `route` laravel. Untuk lebih lengkap di laravel ada yang berfungsi sebagai `middleware` dan package ini bisa anda gunakan sebagai `middleware` dengan cara menggunakan method `can` bawaan dari **Laravel Gate** dan roles tertentu.

Dan nanti akan bisa digunakan seperti ini di file `route` anda :

```php
Route::group(['middleware' => ['can:edit_articles']], function () {
    //
});
```

Maka dari itu anda harus memasukan `middleware` bawaan dari Spatie Package dengan cara mengedit file `app/Http/Kernel.php` seperti ini :

```php
protected $routeMiddleware = [
    // ...
    'role' => \Spatie\Permission\Middlewares\RoleMiddleware::class,
    'permission' => \Spatie\Permission\Middlewares\PermissionMiddleware::class,
    'role_or_permission' => \Spatie\Permission\Middlewares\RoleOrPermissionMiddleware::class,
];
```

Anda bisa menggunakan Pembatasan `route` dengan cara seperti ini :

```php
Route::group(['middleware' => ['role:super-admin']], function () {
    //
});

Route::group(['middleware' => ['permission:publish articles']], function () {
    //
});

Route::group(['middleware' => ['role:super-admin','permission:publish articles']], function () {
    //
});

Route::group(['middleware' => ['role_or_permission:super-admin|edit articles']], function () {
    //
});

Route::group(['middleware' => ['role_or_permission:publish articles']], function () {
    //
});
```

Atau bisa juga menggunakan multi dengan cara menambahkan pipa `|` seperti ini :

```php
Route::group(['middleware' => ['role:super-admin|writer']], function () {
    //
});

Route::group(['middleware' => ['permission:publish articles|edit articles']], function () {
    //
});

Route::group(['middleware' => ['role_or_permission:super-admin|edit articles']], function () {
    //
});
```

Tidak hanya itu anda juga masih bisa membatasi di `Controller` dalam method `__construct` seperti ini :

```php
public function __construct()
{
    $this->middleware(['role:super-admin','permission:publish articles|edit articles']);
}
```

atau bisa seperti ini juga :

```php
public function __construct()
{
    $this->middleware(['role_or_permission:super-admin|edit articles']);
}
```

Jika anda ingin menggunakan Custom Exception dengan cara menambahkan di file `app/Exceptions/Handler.php` dengan cara seperti ini :

```php
public function render($request, Throwable $exception)
{
    if ($exception instanceof \Spatie\Permission\Exceptions\UnauthorizedException) {
        return response()->json([
            'responseMessage' => 'You do not have the required authorization.',
            'responseStatus'  => 403,
        ]);
    }

    return parent::render($request, $exception);
}
```

### Membatasi View Dengan Blade Directive

Jika sebelumnya anda bisa membatasi `route` di laravel dengan `middleware` anda bisa juga membatasi tampilan dengan menggunakan teknik blade directive contohnya saja ketika roles manager bisa melihat tampilan **a** dan tidak bisa melihat tampilan **b** namun seorang writer / roles lain tidak bisa melihat tampilan **a** namun bisa melihat tampilan **b** anda bisa menggunakan metode seperti ini :

```php
@role('manager')
    a
@else
    b
@endrole

// Atau bisa juga spesifik

@role('manager')
    a
@else
    b
@endrole

// Bisa juga menggunakan @hasrole

@hasrole('manager')
    I am a manager!
@else
    I am not a manager...
@endhasrole

```

Jika ingin menggunakan method `can` anda bisa menggunakan seperti ini :

```php
@can('edit_articles')
  //
@endcan
```

atau

```php
@if(auth()->user()->can('edit articles') && $some_other_condition)
  //
@endif
```

Untuk Lebih jelasnya anda bisa melihat dokumentasi [Spatie Permission](https://spatie.be/docs/laravel-permission/v4/basic-usage/blade-directives)

Demikian tutorial tentang **Menggunakan Laravel Permission dari Spatie**


Pada setiap aplikasi biasanya ada beberapa batasan untuk beberapa orang. Hal ini bisa dibatasi berdasarkan roles atau jabatan seseorang

Menggunakan Laravel Permission dari Spatie


Jika Anda sedang membangun aplikasi Next.js atau aplikasi Server-Side Rendering (SSR), akan terlihat keren jika ada bilah progress yang menunjukkan progress saat memuat halaman baru. Saat ini saya (Jan 2021) membangun boilerplate Next.js untuk aplikasi baru saya dan saya ingin menambahkan komponen progress bar karena jika saya tidak membuat komponen yang dapat dimodifikasi dengan mudah dengan melewatkan props, itu akan sia-sia karena Saya harus melakukan kembali semua pekerjaan untuk semua aplikasi baru saya.

Berikut cara membuat Progress Bar di Nextjs:

pertama kita install dulu package `nprogress` di project :

```bash
yarn add nprogress --save
```

Edit `app.js`

```js
...
import "nprogress/nprogress.css";
import { Router } from 'next/router';
import nProgress from 'nprogress';

Router.events.on("routeChangeStart", nProgress.start);
Router.events.on("routeChangeError", nProgress.done);
Router.events.on("routeChangeComplete", nProgress.done);

export function App({ Component, pageProps })
...
```


Jika Anda sedang membangun aplikasi Next.js atau aplikasi Server-Side Rendering (SSR), akan terlihat keren jika ada bilah progress yang menunjukkan progress saat memuat halaman baru. Saat ini saya (Jan 2021) membangun boilerplate Next.js

Menggunakan NProgress di Nextjs


Dalam menggunakan package baiknya kita melihat dulu untuk kebutuhan kita dan jangan asal install karena akan menyebabkan beban yang berat untuk aplikasi laravel anda. Dan saya biasanya akan memakai package laravel yang sederhana saja, sesuai kebutuhan dari projectnya. Untuk menggunakan `enum` memang cukup lumayan ribet di laravel makanya saya ingin memudahkan pekerjaan dengan package.

> Perlu diketahui, jika memang anda rajin maka mending membuat package sendiri atau membuat helper sendiri ketimbang memakai package orang lain karena fitur dengan menggunakan package lain biasanya ada banyak kegunaan melebihi apa yang kita butuhkan.

### Menginstall Package Enum Laravel

Baiklah kita akan memulainya sekarang, Install package `enum` laravel menggunakan [Laravel Enum](https://github.com/mad-web/laravel-enum) Package.

```bash
composer require mad-web/laravel-enum
```

Lalu berikut cara Penggunaannya, misal anda ingin menambahkan kolom `status` di table users maka buatlah enumnya seperti ini contohnya :

```bash
php artisan make:enum UserStatusEnum
```

atau jika anda ingin menambahkan argumen lain biar lebih cepat bisa menggunakan :

```bash
php artisan make:enum UserStatusEnum Active=active Pending=pending
```

dan akan menghasilkan file di folder `App\Enums\UserStatusEnum` dan samplenya seperti ini:

```php
<?php

namespace App\Enums;

use MadWeb\Enum\Enum;

/**
 * @method static UserStatus Active()
 * @method static UserStatus Pending()
 */

final class UserStatusEnum extends Enum
{
    // Sebagai Defaultnya ketika anda membuat record maka akan menggunakan `Active`
    const __default = self::Active;

    const Active = 'active';
    const Pending = 'pending';
}

```

Lalu tambahkan lah kolom `status` di migration bisa dengan mengetik :

```bash
php artisan make:migration add_status_to_users_table
```

atau anda bisa menambahkan kolom ditable `users` seperti ini :

```php
<?php

use App\Enums\UserStatusEnum;

...
$table->enum('status', ['Pending' => UserStatusEnum::Pending, 'Active' => UserStatusEnum::Active])->default(UserStatusEnum::Pending);
...
```

Lakukan `migrate` :

```bash
php artisan migrate

```

atau jika anda sudah melakukan `migrate` anda bisa memigratekan ulang :

```bash
php artisan migrate:fresh
```

### Pengaturan di Model User

Enum Package Laravel sangat bagus ketika anda mengatur di model `User` anda karena untuk membaca bahwa `kolom` status itu berisi enum, dan cara menerapkan di `User` modelnya di file `App\Models\User` :

```php
protected $casts = [
    'status' => UserStatusEnum::class,
];
```

Cara menggunakan di Eloquent cukup mudah dalam method `store` sekarang coba tambahkan :

```php
$user = User::first();

$status = $user->status; // PostStatusEnum

// Memberikan status kepada user dengan status Pending
$user->status = UserStatusEnum::Pending();

// Menyimpan status User
$user->save();

```

Cara memunculkan / menampilkannya pun mudah anda bisa direct langsung seperti ini :

```php
$user = User::first();

// Nanti di blade gunakan seperti ini :
{{ $user->status }}
// Atau
{{ $user->status->label() }}

```

Demikian tutorial tentang **Menggunakan Package Enum Laravel**

happy coding...


Dalam menggunakan package baiknya kita melihat dulu untuk kebutuhan kita dan jangan asal install karena akan menyebabkan beban yang berat untuk aplikasi laravel anda

Menggunakan Package Enum Laravel


### Implementasi Select2 dengan Laravel

Bidang `select2_from_ajax` dan `select2_from_ajax_multiple` memungkinkan Anda untuk menyaring hasil dari select2, tergantung pada apa yang telah dipilih dalam formulir. Katakanlah Anda harus memilih2 bidang. Ketika panggilan AJAX dibuat ke bidang kedua, semua variabel lain di halaman juga bisa lewat - itu berarti Anda dapat memfilter hasil dari select2 kedua.

Katakanlah Anda ingin menunjukkan dua pilihan:

- Yang pertama menunjukkan Categories
- yang kedua menunjukkan Artikel, tetapi hanya dari kategori di atas

Di CrudController Anda, Anda akan melakukan:

```php
<?php


$this->crud->addField([    // SELECT2
            'label'         => ‘Category',
            'type'          => 'select',
            'name'          => ‘category',
            'entity'        => 'category',
            'attribute'     => 'name',
        ]);

        $this->crud->addField([ // select2_from_ajax: 1-n relationship
            'label'                => "Article", // Table column heading
            'type'                 => 'select2_from_ajax_multiple',
            'name'                 => 'articles', // the column that contains the ID of that connected entity;
            'entity'               => 'article', // the method that defines the relationship in your Model
            'attribute'            => 'title', // foreign key attribute that is shown to user
            'data_source'          => url('api/article'), // url to controller search function (with /{id} should return model)
            'placeholder'          => 'Select an article', // placeholder for the select
            'minimum_input_length' => 0, // minimum characters to type before querying results
            'dependencies'         => [‘category’], // when a dependency changes, this select2 is reset to null
            // ‘method'                    => ‘GET’, // optional - HTTP method to use for the AJAX call (GET, POST)
        ]);
```

#### Buat API Controller untuk Category dan Route dibuat seperti ini :

```php

Route::get('api/article', 'App\Http\Controllers\Api\ArticleController@index');
Route::get('api/article/{id}', 'App\Http\Controllers\Api\ArticleController@show’);

```

#### Maka controller itu akan terlihat seperti ini:

```php
<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Backpack\NewsCRUD\app\Models\Article;
use Illuminate\Http\Request;

class ArticleController extends Controller
{
    public function index(Request $request)
    {
        $search_term = $request->input('q');
        $form = collect($request->input('form'))->pluck('value', 'name');

        $options = Article::query();

        // if no category has been selected, show no options
        if (! $form['category']) {
            return [];
        }

        // if a category has been selected, only show articles in that category
        if ($form['category']) {
            $options = $options->where('category_id', $form['category']);
        }

        if ($search_term) {
            $results = $options->where('title', 'LIKE', '%'.$search_term.'%')->paginate(10);
        } else {
            $results = $options->paginate(10);
        }

        return $options->paginate(10);
    }

    public function show($id)
    {
        return Article::find($id);
    }
}
```


Bidang select2_from_ajax dan select2_from_ajax_multiple memungkinkan Anda untuk menyaring hasil dari select2, tergantung pada apa yang telah dipilih dalam formulir

Menggunakan Select2 Ajax Depends di Laravel


Saat ini banyak sekali yang menjadi arogan dikarenakan sallary IT semakin naik dan itu cukup bagus untuk Industri Teknologi, seperti yang kita lihat dipasaran, sekarang untuk Sallary Senior Backend Enginer saja bisa sampai Rp **20.000.000** oke let say perusahaan itu maju dan tumbuh dengan omset dan profit hingga milyaran rupiah itu tidak terlalu berpengaruh dan malah membuat perusahaan untung. Karena banyak sekali perusahaan melakukan **Kesalahan ketika melakukan Hiring Developer**, tidak sedikit yang merasa rugi karena proses Hiring itu sangat tidak ketat. Sehingga sangat buruk dalam performance di perusahaan.

### Efisiensi Atau Eskalasi

Yakin anda melakukan **Efisiensi** dengan cara mengurangi Backend Enginer anda?. Bulshit...itu hanya akan menjadikan perusahaan semakin terpuruk karena anda hanya memangkas biaya untuk Sallary **Backend Enginering**, secara pengeluaran Perusahaan itu memang sehat, tetapi secara waktu bisa jadi anda melakukan kesalahan, anda akan sangat rugi di sisi waktu karena yang seharusnya Produk Launching sesuai deadline malah terbengkalai gara-gara dikerjakan oleh para **Junior** yang tidak sanggup bekerja cepat.

Nah Sekarang anda tidak melakukan Efisiensi sedikitpun yang ada anda akan sangat rugi di waktu dengan deadline yang molor akan sangat rugi, dan harusnya anda sudah meraup **Cuan** yang lumayan besar malah terpending karena masih dalam tahap development. Untuk Menyiasatinya anda akhirnya menambah orang lagi dengan alih efisiensi **Budget Sallary** yang mengambil tenaga Junior untuk menghasilkan produk lebih cepat **Jadi dan Selesai** namun tetap saja terbengkalai disisi `bugs`. dan anda menjadikan Efisiensi berubah jadi **Eskalasi** Biaya yang sangat besar karena menambahkan orang dan menambah beban biaya.

### Menjadi Terhebat dengan Arogansi

Programmer terkadang sangat arogan ketika uang menjadi nilai untuk dirinya, terutama dalam hal **sallary** mereka akan dibuai dengan harga diri mereka senilai uang itu dan melupakan **Perjuangan Diri** yang mana ketika anda Berbisnis anda akan bisa lebih sukses daripada itu. Sayangnya mereka tanpa sadar membuat nilai uang menjadikan mereka lupa akan sejatinya mereka tidak merasakan kebebasannya. Meskipun beberapa perusahaan sebenarnya sudah sangat peduli dengan kebebasan para **developer** seperti bekerja diluar ruangan, bekerja hanya dirumah, dan lain-lain.

Tidak Jelas arah kedepannya apa yang akan dia lakukan. Mereka akan shock dengan kondisi yang sangat dinamis ini (Covid19) sangat memukul banyak bidang usaha termasuk IT.

### Membandrol Harga Termahal

Dengan status bahwa mereka adalah Programmer terhebat dengan Sallary **20.000.000** dan mereka akhirnya mendapatkan SideJob yang lumayan besar dengan budget **40.000.000** mereka menolaknya karena mereka itu arogan dan ingin dinilai lebih dari **100.000.000**

**Nanti Saya Lanjutkan Ceritanya Gaesss...**


Saat ini banyak sekali yang menjadi arogan dikarenakan sallary IT semakin naik dan itu cukup bagus untuk Industri Teknologi, seperti yang kita lihat dipasaran

Menjadi Programmer Terlaku Daripada Programmer Terhebat


Pada hari kamis tanggal 08 April 2021 malam saya merasa storage macbook saya sudah mulai dipenuhi package-package yang berat saatnya menghapus semua dan menginstall ulang untuk package-package yang baru dan terupdate. Alhamdulillahnya tidak terjadi masalah yang besar, hanya beberapa masalah dan sudah bisa teratasi. Contohnya saja Untuk Node Package, saya berencana untuk menghapus beberapa yang tidak terpakai sama sekali dan saya akan share apa yang saya lakukan untuk menghapus node, npm, nvm.

### Menghapus Node Package di Macbook

Jangan lupa untuk mengecek versi node anda yang terakhir masukan perintah :

```bash
node -v
v14.16.1
```

terakhir yang saya pakai seperti itu node versi `v14.16.1` dan sudah sangat berat sekali banyak package yang di install di versi ini.

Untuk Menghapus `Node` anda bisa menggunakan brew (jika anda menginstallnya menggunakan brew sebelumnya ).

```bash
brew uninstall node --force
```

Dan ini tidak akan terhapus semua node package anda. Sekarang cara untuk membersihkannya yang mengandung node di semua folder ketik :

```bash
sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp
```

> Hati-hati folder ini akan terhapus semua silahkan cek kembali isi folder masing-masing sebelum melakukan penghapusan

Untuk Lebih memastikan silahkan cek :

To completely uninstall node + npm is to do the following:

- Ke Folder `/usr/local/lib` dan hapus semua folder node dan folder `node_modules`
- Ke Folder `/usr/local/include` hapus semua folder node hapus semua folder `node_modules`
- Ke Folder `/usr/local/bin` dan hapus semua `node` executable

Dan anda harus juga menghapus beberapa folder lagi :

```bash
sudo rm -rf /opt/local/bin/node /opt/local/include/node /opt/local/lib/node_modules
sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node.1 /usr/local/lib/dtrace/node.d
```

Lakukan brew uninstall untuk `npm` jika sebelumnya diinstall via brew :

```bash
brew uninstall npm --force
```

Jika anda menggunakan `nvm` atau node version manager harus juga menguninstallnya dengan cara cek folder `$NVM_DIR` biasanya di `~/.nvm`

### Menghapus Package PHP dan Upgrade Versi PHP di Macbook

Saya menggunakan `brew` untuk menginstall php dan sebelumnya php yang saya pakai versi `7.4` sudah saatnya saya menggunakan php versi 8. dan saya menguninstallnya terlebih dahulu.

```bash
brew uninstall php --force
```

Uninstall juga nginx

```bash
brew uninstall nginx --force
```

Selain itu jika ada mysql dan redis silahkan di uninstall juga. btw hati-hati jika anda masih ada database yang digunakan jangan hapus mysql ya.

```bash
brew uninstall redis --force
# Jika Ingin menghapus mysql
brew uninstall mysql --force
```

### Menginstall kembali PHP dan Laravel Valet

Install kembali php dengan brew. Sehingga yang terinstall adalah php versi 8

```bash
brew install php
```

lakukan pengecekan

```bash
php -v
# Hasilnya
PHP 8.0.3 (cli) (built: Mar  4 2021 20:39:15) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.3, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.3, Copyright (c), by Zend Technologies
```

Install kembali valet dari laravel

```bash
composer global require laravel/valet
```

Tentukan direktori mana yang akan anda install sebagai pusat dari aplikasi misalnya saja folder `~/Sites` ketik :

```bash
valet install
# Jangan lupa untuk melakukan valet park
valet park
```

Gunakan versi php terbaru di valet :

```bash
valet use php
```

Dan selesai, Alhamdulillah gak ada masalah...

happy coding...


Pada hari kamis tanggal 08 April 2021 malam saya merasa storage macbook saya sudah mulai dipenuhi package-package yang berat saatnya menghapus semua dan menginstall

Rebuild Semua Package Di Macbook


Google Cloud Merupakan Layanan Komputasi awan yang di buat oleh [Google](https://gogole.com) dengan model bervariasi dari harga murah hingga paling mahal tersedia disana. Disini saya hanya akan menjelaskan untuk setup Laravel menggunakan Google Cloud.

### Setup Google Cloud Virtual Compute

Buat dari harga yang termurah karna kita akan test Google Cloud menggunakan laravel ini :

![Google Cloud Harga!](https://res.cloudinary.com/alifa-media-kreatif/image/upload/c_fit,q_87,r_0,w_645/v1647508813/imansugirman/Jepretan_Layar_2022-03-17_pukul_16.18.48_itjjle.png 'Google Cloud')

Lalu Login dengan SSH Client menggunakan Google Cloud Terminal Console:

![Google Cloud Harga!](https://res.cloudinary.com/alifa-media-kreatif/image/upload/c_fit,q_87,r_0,w_645/v1647509264/imansugirman/Jepretan_Layar_2022-03-17_pukul_16.27.28_nmwn67.png 'Google Cloud')

```bash
cd .ssh
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

setelah di generate nanti akan terbuat file `id_rsa.pub` nanti copy paste ke github anda untuk nanti menggunakan [Deployer Package]('https://deployer.org') dan jika sudah sekarang kita akan menginstall lemp stack ( Linux, Nginx, MySQL, PHP )

### Setup Lemp Stack Ubuntu 20

Untuk menampilkan laman web kepada pengunjung situs kita, kita akan menggunakan Nginx, yang merupakan server web berkinerja tinggi. Kita akan menggunakan manajer paket apt untuk memperoleh perangkat lunak ini.

Karena ini adalah kali pertama kita menggunakan apt untuk sesi ini, maka mulailah dengan memperbarui indeks paket server Anda. Setelah itu, Anda dapat menggunakan apt install untuk menginstal Nginx:

```bash
sudo apt update
sudo apt install nginx
```

Lalu aktifkan firewall :

```bash
sudo ufw app list
```

Nanti Outputnya akan seperti ini

```bash
# Output
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH
```

Dan sekarang proteksi dengan firewall seperti ini :

```bash
sudo ufw allow 'Nginx HTTP'
```

dan kita akan melihat status firewall dengan seperti ini :

```bash
sudo ufw status
```

```bash
# Output
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)
```

Setelah menginstall Nginx sekarang kita akan menginstall **Mysql**

```bash
sudo apt install mysql-server
```

dan menginsall Mysql dengan aman :

```bash
sudo mysql_secure_installation
```

Setelah Mysql Server sekarang login ke `mysql` dengan sudo untuk test apakah mysql sudh terinstall :

```bash
sudo mysql
```

### Install PHP di Lemp Stack Ubuntu 20

Anda sekarang telah menginstal komponen PHP Anda. Selanjutnya, Anda akan mengonfigurasi Nginx untuk menggunakannya.

Tambahkan Package php dari `ppa:ondrej`

```bash
sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
```

Dan sekarang install php 8

```bash
sudo apt update
sudo apt install php8.0-fpm
```

Buat Direktori untuk App dan Website kita nanti :

```bash
sudo mkdir /var/www/your_domain
```

```bash
sudo chown -R $USER:$USER /var/www/your_domain
```

```bash
sudo nano /etc/nginx/sites-available/your_domain
```

Setup Nginx dan tambahkan sites-available :

```nginx
server {
    listen 80;
    server_name your_domain www.your_domain;
    root /var/www/your_domain;

    index index.html index.htm index.php;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
     }

    location ~ /\.ht {
        deny all;
    }

}
```

Aktifkan Pengaturan Nginx dengan memasukan perintah :

```bash
sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/
```


Google Cloud Merupakan Layanan Komputasi awan yang di buat oleh Google dengan model bervariasi dari harga murah hingga paling mahal

Setup Google Cloud Server Untuk Laravel


Gridsome adalah Static Site Generator yang dibangun dengan bahasa pemrograman `vue` dengan Gridsome anda juga bisa membuat Blog dengan menggunakan `markdown` dan sangat intuitive dan sangat flexible. Untuk menginstallnya anda bisa menggunakan command line :

```bash
# jika anda menggunakan npm bisa menggunakan npm
npm install --global @gridsome/cli
# Atau bisa menggunakan yarn
yarn global add @gridsome/cli

```

Lalu anda bisa menggunakan command untuk membuat Static Page atau Blog dengan cara :

```bash
# Static Site
gridsome create my-gridsome-site
# Blog
gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git
```

### Menambahkan Tailwind ke Gridsome

Untuk menambahkan tailwind versi 2 anda bisa menggunakan 2 opsi dengan cara menambahkan plugins dari gridsome atau dengan cara manual. Saya lebih memilih opsi manual karena menurut saya lebih ringan. Baiklah sekarang kita mulai tambahkan.

```bash
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

buatlah folder `css` di dalam folder `/src` dan tambahkan file `main.css` dan menjadi `/src/css/main.css` dan edit file `main.css` menjadi seperti ini :

```css
@tailwind base;

@tailwind components;

@tailwind utilities;
```

Dan sekarang kita akan mengimport `main.css` di `main.js` dengan cara menambahkan :

```js
import '~assets/css/main.css';
```

Dan sekarang kita akan mempublish `tailwind.config.js` dengan cara memasukan perintah :

```bash
npx tailwind init
```

Edit lah file `tailwind.config.js` dengan seperti ini :

```js
module.exports = {
  purge: {
    content: [
      './src/**/*.vue',
      './src/**/*.js',
      './src/**/*.jsx',
      './src/**/*.html',
      './src/**/*.pug',
      './src/**/*.md',
    ],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};
```

Sekarang kita harus mengatur lagi file `gridsome.config.js` dengan menambahkan beberapa `import` dari `tailwind` dan `autoprefixer` seperti ini :

```js
// Tambahkan 2 package ini diatasnya
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'BlogPost',
        path: './content/blog/**/*.md',
      },
    },
  ],
  templates: {
    BlogPost: '/blog/:slug',
  },
  // Dan tambahkan css loaderoption setelah templates
  css: {
    loaderOptions: {
      postcss: {
        plugins: [tailwindcss, autoprefixer],
      },
    },
  },
};
```

Dan selesai anda bisa membuat style menggunakan tailwind di template vue anda.

happy coding....


Gridsome adalah Static Site Generator yang dibangun dengan bahasa pemrograman `vue` dengan Gridsome anda juga bisa membuat Blog

Setup Gridsome Menggunakan Tailwindcss Versi 2


Laravel Octane Menggunakan Server fly.io Semakin Cepat yang lain makin ketinggalan Karena Laravel octane sangat Cepat. begitulah `Octane` Bekerja. Ditenagai Server Swoole dan dikombinasikan dengan Nginx Server.

Sekarang kita akan Mulai dengan Installasi Laravel terbaru :

Jika anda Menggunakan **Composer**

```bash
composer create-project laravel/laravel example-app
```

Lalu pergi ke project directory anda yaitu example-app dengan cara :

```bash
cd example-app
```

### Mulai Install Laravel Octane

Nah Jika project sudah dibuat sekarang kita install Package Laravel Octane :

```bash
composer require laravel/octane
```

Dan Octane Harus diinstall dengan cara :

```bash
php artisan octane:install
```

Maka akan membuat file `config/octane.php` silahkan tentukan Ingin menggunakan [Swoole](https://openswoole.com/docs/get-started/installation) atau [RoadRunner](https://roadrunner.dev/) saya menyarankan menggunakan Swoole karna lebih cepat sedikit dibanding RoadRunner. Tetapi kembali lagi ke preferensi masing-masing.

> Hati-hati ketika menggunakan Laravel Octane maka resiko beberapa package pihak ke tiga ada yang belum kompatible

Jika anda menggunakan Swoole maka silahkan install terlebih dahulu Swoole :

```bash
pecl install openswoole
```

Setelah menginstall Octane maka beberapa setup di `.env` harus ditetapkan ketika anda ingin menggunakan Swoole atau RoadRunner

```yaml
OCTANE_HTTPS=true
OCTANE_SERVER=swoole
```

Dan coba sekarang jalankan di Local menggunakan :

```bash
php artisan octane:start --watch
```

### Setup Install Fly.io

Untuk membuat Server fly io diharapkan install `flyctl` yaitu cli dari [fly.io](https://fly.io) untuk memudahkan anda berinteraksi dengan server.

Jika anda belum mendaftar silahkan mendaftar ke website [fly.io](https://fly.io) dan menginstall CLI

Jika menggunakan Brew :

```bash
brew install flyctl
```

Jika Menggunakan Shell Script :

```bash
curl -L https://fly.io/install.sh | sh
```

Lalu login ke Fly dashboard menggunakan `cli` dengan cara :

```bash
flyctl auth login
```

### Saatnya Laravel Octane Terbang

Untuk mendeploy Aplikasi Laravel cukup mudah, sebelum mendeploy anda diharapkan menggunakan Docker Desktop dan bisa anda download di [Docker Website](https://docs.docker.com/desktop/install/mac-install/) agar nanti prosesnya mudah.

Posisi Ke Project yang sudah anda buat

```bash
cd ...project
```

Lalu mulai membuat Web App di Fly :

```bash
flyctl launch
```

nanti akan muncul pertanyaan dan auto deteksi bahwa project kita menggunakan Laravel. dan masukan nama Apps nya. dan ketika ada pertanyaan **ingin deploy sekarang ?** silahkan jawab **No** karna kita harus mensetup dulu docker nya nanti di server **fly.io**

Lalu cek di folder `docker` dan anda akan menemukan file `supervisor.conf` silahkan `uncomment` dibagian `[program:octane]`

Jika anda menggunakan swoole maka pengaturannya seperti ini :

```conf
[program:octane]
user=app
priority=5
autostart=true
autorestart=true
stdout_events_enabled=true
stderr_events_enabled=true
;rr command=php -d variables_order=EGPCS /var/www/html/artisan octane:start --server=roadrunner --host=0.0.0.0 --rpc-port=6001 --port=8000
command=php -d variables_order=EGPCS /var/www/html/artisan octane:start --server=swoole --host=0.0.0.0 --port=8000
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
```

Dan sekarang silahkan Deploy menggunakan :

```bash
flyctl deploy
```


Laravel Octane Menggunakan Server fly.io Semakin Cepat yang lain makin ketinggalan Karena Laravel octane sangat Cepat

Setup Laravel Octane Deploy Ke Fly.io


Setup nextjs dengan docker untuk Deploy ke Fly.io, karena sangat cepat dan andal

Buat Project dengan Nextjs :

```bash
yarn create next-app nextfly
```

Lalu ubah next.config.js

```js
const nextConfig = {
  reactStrictMode: true,
  // config output akan menjelaskan ke nextjs bahwa akan menggunakan docker
  output: 'standalone',
};
module.exports = nextConfig;
```

dan Buat file `Dockerfile` seperti ini

```dockerfile
# Install dependencies only when needed
# Dockerfile
FROM node:16-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile


FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1
ARG NEXT_PUBLIC_API_URL

RUN yarn build

FROM node:16-alpine AS runner
WORKDIR /app


ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 8080

CMD ["node", "server.js"]

```

dan deploy dengan perintah :

```bash
flyctl deploy
```


Setup nextjs dengan docker untuk Deploy ke Fly.io, karena sangat cepat dan andal

Setup Nextjs Docker Deploy Ke Fly.io


Dalam tahap development adakalanya kita merapihkan code kita ketika akan di deploy, karena kita atau team lainnya akan merasa kesulitan memahami kode yang kita buat dari itu lah kita harus benar-benar mensetup dari awal dalam membuat project `Nextjs` dan kita akan merasa kesulitan juga dalam merapihkannya.

Dalam tahap ini saya akan sharing dalam mempersiapkan project `Nextjs` untuk lebih rapih dan tertata tidak berantakan. baiklah kita mulai Membuat file `.eslintignore` agar tidak terbawa ke **github**

```bash
**/node_modules/*
**/out/*
**/.next/*
```

Lalu kita buat juga file `.eslintrc.json` seperti ini :

```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "next/core-web-vitals",
    "next",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      // Disini bisa disesuaikan, karena saya menggunakan jsx maka
      "jsx": true,
      "modules": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@next/eslint-plugin-next", "react-hooks"],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "off"
  }
}
```

Pada bagian ini saya menggunakan `jsx` maka saya setting bagian `ecmaFeatures` menjadi `jsx` menjadi `true`:

```json
...
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  }
  ...
```

Lalu sekarang kita buat file `jsconfig.json` untuk memudahkan ketika import :

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/lib/*": ["lib/*"],
      "@/components/*": ["components/*"],
      "@/layouts/*": ["layouts/*"]
    }
  },
  "exclude": ["node_modules"]
}
```

Jangan lupa juga untuk membuat file `.prettierignore` untuk mendisable file apa saja yang tidak diikut sertakan :

```bash
# Ignore :
build
.next
node_modules
yarn.lock
package-lock.json
styles
```

Terakhir kita buat file `.prettierrc` :

```json
{
  "endOfLine": "auto",
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true
}
```

Demikian pengaturan Eslint dan Prettier versi saya, semoga bermanfaat...


Dalam tahap development adakalanya kita merapihkan code kita ketika akan di deploy, karena kita atau team lainnya akan merasa kesulitan memahami

Setup Nextjs Prettier dan Eslint


### Penjelasan Laravel

Laravel adalah kerangka kerja web open source PHP yang dirancang untuk membuat tugas pengembangan web umum, seperti otentikasi, routing, dan caching, lebih mudah. Deployer adalah alat deployment PHP open-source dengan dukungan out-of-the-box untuk sejumlah kerangka kerja populer, termasuk Laravel, CodeIgniter, Symfony, dan Zend Framework.

### Introduction

Deployer mengotomatiskan penerapan dengan menggandakan aplikasi dari repositori Git ke server, menginstal dependensi dengan Composer, dan mengonfigurasi aplikasi sehingga Anda tidak perlu melakukannya secara manual. Ini memungkinkan Anda menghabiskan lebih banyak waktu untuk pengembangan, alih-alih upload dan konfigurasi, dan memungkinkan Anda menerapkan lebih sering.

Dalam tutorial ini, Anda akan menggunakan aplikasi Laravel secara otomatis tanpa downtime apa pun. Untuk melakukan ini, Anda akan mempersiapkan lingkungan pengembangan lokal dari mana Anda akan menyebarkan kode dan kemudian mengkonfigurasi server produksi dengan Nginx dan database MySQL untuk melayani aplikasi.

### Prerequisites

Sebelum memulai panduan ini, Anda memerlukan hal-hal berikut:

- Satu server Ubuntu 16.04 dengan pengguna non-root dengan hak akses sudo seperti yang dijelaskan dalam Pengaturan Server Awal dengan tutorial Ubuntu 16.04.

- Tumpukan LEMP diinstal seperti yang dijelaskan dalam Cara Menginstal Linux, Nginx, MySQL, PHP (LEMP stack) di tutorial Ubuntu 16.04.

- PHP, Komposer, dan Git yang diinstal di server Anda dengan mengikuti Langkah 1 dan 2 tentang Cara Menginstal dan Menggunakan Komposer pada Ubuntu 16.04.

- Paket php-xml dan php-mbstring diinstal di server Anda. Instal ini dengan menjalankan: sudo apt-get install php7.0-mbstring php7.0-xml.

- `Server Git`. Anda dapat menggunakan layanan seperti GitLab, Bitbucket atau GitHub. GitLab dan Bitbucket menawarkan repositori pribadi secara gratis, dan GitHub menawarkan repositori pribadi mulai dari $ 7 / bulan. Sebagai alternatif, Anda dapat membuat server Git pribadi dengan mengikuti tutorial Cara Mengatur Server Git Pribadi pada VPS.

- Nama domain yang mengarah ke server Anda. Cara Mengatur Nama Inang dengan tutorial DigitalOcean dapat membantu Anda mengonfigurasi ini.

- Komposer dan Git yang terpasang di komputer lokal Anda juga. Metode pemasangan yang tepat tergantung pada sistem operasi lokal Anda. Petunjuk untuk menginstal Git tersedia di halaman Unduhan proyek Git dan Anda dapat mengunduh Komposer langsung dari situs web proyek Composer.

#### Step 1 — Menyiapkan Laravel Aplikasi di Lokal

Karena Anda akan membuat dan menerapkan aplikasi Anda dari komputer lokal Anda, mulailah dengan mengkonfigurasi lingkungan pengembangan lokal Anda. Deployer akan mengontrol seluruh proses penerapan dari mesin lokal Anda, jadi mulailah dengan menginstalnya

---

Note: If you use Windows on your local machine you should use a BASH emulator (like Git bash) to run all local commands.
{: .alert .alert--info}

---

```bash
curl -LO https://deployer.org/deployer.phar
```

Lalu Masukan Perintah

```bash
php -r "if (hash_file('sha1', 'deployer.phar') === '35e8dcd50cf7186502f603676b972065cb68c129') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('deployer.phar'); } echo PHP_EOL;"
```

Dan Outputnya adalah :

```shell
Installer verified
```

Buat sistem Penyebar tersedia luas. Perhatikan bahwa jika Anda menjalankan Windows atau macOS pada komputer lokal Anda, Anda mungkin perlu membuat direktori `/usr/local/bin/dep` sebelum menjalankan perintah ini:

```shell
sudo mv deployer.phar /usr/local/bin/dep
```

Buatlah agar file `deployer.phar` bisa di eksekusi :

```shell
sudo chmod +x /usr/local/bin/dep
```

Selanjutnya anda harus membuat aplikasi Laravel di `Local` Computer / PC atau MAC.

Contoh disini menginstall Laravel Versi 5.5

```shell
composer create-project --prefer-dist laravel/laravel laravel-app "5.5.*"
```

Anda telah menginstal semua Aplikasi Laravel yang diperlukan di `Komputer Local atau Mac` Anda. Dengan itu di tempat, kita akan beralih ke menciptakan repositori `Git` untuk aplikasi.

### Menghubungkan ke Remote Git Repository Anda

**Deployer** dirancang untuk memungkinkan pengguna menyebarkan kode dari mana saja. Untuk memungkinkan fungsi ini, diperlukan pengguna untuk memasukkan kode ke repositori di Internet dari mana Penyebar kemudian menyalin kode ke server produksi. Kami akan menggunakan Git, sistem kontrol versi open-source, untuk mengelola kode sumber aplikasi Laravel. Anda dapat terhubung ke server Git menggunakan protokol SSH, dan untuk melakukan ini dengan aman, Anda perlu membuat kunci SSH. Ini lebih aman daripada otentikasi berbasis kata sandi dan biarkan Anda menghindari mengetik kata sandi sebelum setiap penerapan.

Jalankan perintah berikut pada `local machine` Anda untuk menghasilkan kunci SSH. Perhatikan bahwa -f menentukan nama file dari file kunci, dan Anda dapat mengganti `gitkey` dengan nama file Anda sendiri. Ini akan menghasilkan sepasang kunci SSH (bernama `gitkey` dan `gitkey.pub`) ke folder `~/.ssh/`.

```bash
ssh-keygen -t rsa -b 4096 -f  ~/.ssh/gitkey
```

Ada kemungkinan bahwa Anda memiliki kunci SSH lebih banyak di komputer lokal Anda, jadi konfigurasikan klien SSH untuk mengetahui kunci privat SSH yang akan digunakan ketika tersambung ke server Git Anda.

Buat file konfigurasi SSH di **Komputer Lokal** Anda:

```bash
touch ~/.ssh/config
```

Buka file dan tambahkan pintasan ke server Git Anda. Ini harus berisi direktif `HostName` (menunjuk ke nama host server Git Anda) dan direktif `IdentityFile` (menunjuk ke jalur file dari kunci SSH yang baru Anda buat:

```bash
Host mygitserver.com
    HostName mygitserver.com
    IdentityFile ~/.ssh/gitkey
```

Simpan dan tutup file, lalu batasi izinnya:

```bash
chmod 600 ~/.ssh/config
```

Sekarang klien SSH Anda akan tahu kunci pribadi mana yang digunakan untuk terhubung ke server Git.

Tampilkan konten file kunci publik Anda dengan perintah berikut:

```bash
cat ~/.ssh/gitkey.pub
```

Salin hasilnya dan tambahkan kunci publik ke server Git Anda.

Jika Anda menggunakan layanan hosting Git, baca dokumentasinya tentang cara menambahkan kunci SSH ke akun Anda:

- [Add SSH keys to GitHub](https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/)
- [Add SSH keys to GitLab](https://docs.gitlab.com/ee/gitlab-basics/create-your-ssh-keys.html)
- [Add SSH keys to Bitbucket](https://confluence.atlassian.com/bitbucket/set-up-an-ssh-key-728138079.html)

Sekarang Anda akan dapat terhubung ke server Git Anda dengan mesin lokal Anda. Uji koneksi dengan perintah berikut:

```bash
ssh -T git@mygitserver.com
```

Jika perintah ini menghasilkan kesalahan, periksa bahwa Anda telah menambahkan kunci SSH Anda dengan benar dengan merujuk pada dokumentasi layanan hosting Git Anda dan coba hubungkan lagi.

Sebelum mendorong aplikasi ke repositori Git jarak jauh dan menerapkannya, pertama-tama konfigurasikan server produksi.

### Mengkonfigurasi Pengguna Penggambaran

Deployer menggunakan protokol SSH untuk secara aman menjalankan perintah di server. Karena alasan ini, langkah pertama yang akan kita ambil untuk mengonfigurasi server produksi adalah membuat pengguna yang dapat digunakan Deployer untuk masuk dan menjalankan perintah di server Anda melalui SSH.

Masuk ke server LEMP Anda dengan pengguna non-root sudo dan buat pengguna baru bernama "deployer" dengan perintah berikut:

```bash
sudo adduser deployer
```

Laravel memerlukan beberapa direktori yang dapat ditulis untuk menyimpan file dan upload yang di-cache, sehingga direktori yang dibuat oleh pengguna **deployer** harus dapat ditulis oleh server web Nginx. Tambahkan pengguna ke grup `www-data` untuk melakukan ini:

```bash
sudo usermod -aG www-data deployer
```

Izin default untuk file yang dibuat oleh pengguna deployer harus `644` untuk file dan `755` untuk direktori. Dengan cara ini, pengguna deployer akan dapat membaca dan menulis file, sementara grup dan pengguna lain akan dapat membacanya.

Lakukan ini dengan mengatur umask default deploy ke **022**:

```bash
sudo chfn -o umask=022 deployer
```

Kami akan menyimpan aplikasi di direktori `/var/www/html/`, jadi ubah kepemilikan direktori ke pengguna **deployer** dan grup **www-data**.

```bash
sudo chown deployer:www-data /var/www/html
```

Pengguna deployer harus dapat memodifikasi file dan folder dalam direktori `/var/www/html`. Karena itu, semua file dan subdirektori baru yang dibuat dalam direktori `/var/www/html` harus mewarisi id grup folder **(www-data)**. Untuk mencapai ini, atur ID grup pada direktori ini dengan perintah berikut:

```bash
sudo chmod g+s /var/www/html
```

Deployer akan mengkloning repo Git ke server produksi menggunakan SSH, jadi Anda ingin memastikan bahwa koneksi antara server LEMP Anda dan server Git aman. Kami akan menggunakan pendekatan yang sama yang kami gunakan untuk komputer lokal kami, dan kami akan menghasilkan kunci SSH untuk pengguna **deployer**.

Beralih ke pengguna **deployer** di server Anda:

```bash
su - deployer
```

Selanjutnya, buat pasangan kunci SSH sebagai pengguna deployer. Kali ini, Anda dapat menerima nama file default dari kunci SSH:

```bash
ssh-keygen -t rsa -b 4096
```

Tampilkan kunci publik:

```bash
cat ~/.ssh/id_rsa.pub
```

Salin kunci publik dan tambahkan ke server Git seperti yang Anda lakukan pada langkah sebelumnya.

Mesin lokal Anda akan berkomunikasi dengan server menggunakan SSH juga, jadi Anda harus menghasilkan kunci SSH untuk pengguna **deployer** di komputer lokal Anda dan menambahkan kunci publik ke server.

Di **Komputer Lokal** Anda jalankan perintah berikut. Jangan ragu untuk mengganti `deployerkey` dengan nama file pilihan Anda:

```bash
ssh-keygen -t rsa -b 4096 -f  ~/.ssh/deployerkey
```

Salin keluaran perintah berikut yang berisi kunci publik:

```bash
cat ~/.ssh/deployerkey.pub
```

Di **Server Anda** saat pengguna **deployer** menjalankan yang berikut:

```bash
nano ~/.ssh/authorized_keys
```

Tempel kunci publik ke editor dan tekan `CTRL-X`, `Y`, lalu `ENTER` untuk menyimpan dan keluar.

Batasi izin file:

```bash
chmod 600 ~/.ssh/authorized_keys
```

Sekarang beralih kembali ke pengguna sudo:

```bash
exit
```

Sekarang server Anda dapat terhubung ke server Git dan Anda dapat masuk ke server dengan pengguna **deployer** dari komputer lokal Anda.

Masuk dari komputer lokal Anda ke server Anda sebagai pengguna **deployer** untuk menguji koneksi:

```bash
ssh deployer@your_server_ip  -i ~/.ssh/deployerkey
```

Setelah Anda masuk sebagai deployer, uji koneksi antara server Anda dan server `Git` juga:

```bash
ssh -T git@mygitserver.com
```

Akhirnya, keluar dari server:

```bash
exit
```

Dari sini, kita dapat melanjutkan untuk mengkonfigurasi Nginx dan MySQL di server web kami.

### Mengkonfigurasi Nginx

Kami sekarang siap untuk mengkonfigurasi server web yang akan melayani aplikasi. Ini akan melibatkan konfigurasi akar dokumen dan struktur direktori yang akan kita gunakan untuk menyimpan file Laravel. Kami akan mengatur Nginx untuk melayani file kami dari direktori `/var/www/laravel`.

Pertama, kita perlu membuat file konfigurasi blok server untuk situs baru.

Masuk ke server sebagai pengguna sudo Anda dan buat file konfigurasi baru. Ingat untuk mengganti example.com dengan nama domain Anda sendiri:

```bash
sudo nano /etc/nginx/sites-available/example.com
```

Tambahkan blok server ke bagian atas file konfigurasi:

```bash
#example.com '>/etc/nginx/sites-available/example.com

server {
        listen 80;
        listen [::]:80;

        root /var/www/html/laravel-app/current/public;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;
}
```

Kedua `listen` arahan di bagian atas memberitahu Nginx port mana untuk didengarkan, dan direktif `root` mendefinisikan document root tempat Laravel akan diinstal. `current/public` di jalur direktori root adalah tautan simbolik yang menunjuk ke rilis terbaru dari aplikasi. Dengan menambahkan direktif `index`, kami memberi tahu Nginx untuk melayani file `index.php` terlebih dahulu sebelum mencari rekan HTML mereka saat meminta lokasi direktori. Direktif `server_name` harus diikuti oleh domain Anda dan alias apa pun.

Kami juga harus memodifikasi cara Nginx menangani permintaan. Ini dilakukan melalui direktif `try_files`. Kami ingin mencoba melayani permintaan sebagai file terlebih dahulu dan, jika tidak dapat menemukan file dengan nama yang benar, harus mencoba untuk melayani file indeks default untuk direktori yang sesuai dengan permintaan. Kegagalan ini, harus melewati permintaan ke file `index.php` sebagai parameter query.

```bash
server {
        listen 80;
        listen [::]:80;

        root /var/www/html/laravel-app/current/public;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }
}
```

Selanjutnya, kita perlu membuat blok yang menangani eksekusi sebenarnya dari setiap file PHP. Ini akan berlaku untuk semua file yang diakhiri dengan .php. Ini akan mencoba file itu sendiri dan kemudian mencoba untuk meneruskannya sebagai parameter ke file `index.php`.

Kami akan mengatur arahan `fastcgi` untuk memberi tahu Nginx untuk menggunakan jalur aplikasi yang sebenarnya (diselesaikan setelah mengikuti tautan simbolis), alih-alih tautan simbolis. Jika Anda tidak menambahkan baris ini ke konfigurasi, jalur tempat tautan simbolik akan di-cache, artinya versi lama aplikasi Anda akan dimuat setelah penyebaran. Tanpa arahan ini, Anda harus membersihkan cache secara manual setelah setiap penerapan dan permintaan ke aplikasi Anda berpotensi gagal. Selain itu, `fastcgi_pass` directive akan memastikan bahwa Nginx menggunakan soket yang digunakan php7-fpm untuk komunikasi dan file `index.php` digunakan sebagai indeks untuk operasi ini.

```bash
# example.com '>/etc/nginx/sites-available/example.com
server {
        listen 80;
        listen [::]:80;

        root /var/www/html/laravel-app/current/public;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }


        location ~ \.php$ {
                include snippets/fastcgi-php.conf;

                fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                fastcgi_param DOCUMENT_ROOT $realpath_root;

                fastcgi_pass unix:/run/php/php7.0-fpm.sock;

        }
}
```

Akhirnya, kami ingin memastikan bahwa Nginx tidak mengizinkan akses ke file `.htaccess` tersembunyi. Kami akan melakukan ini dengan menambahkan satu blok lokasi tambahan yang disebut `location ~ / \ an.ht` dan, dalam blok itu, direktif yang menentukan `deny all;`.

Setelah menambahkan blok lokasi terakhir ini, file konfigurasi akan terlihat seperti ini:

```bash
server {
        listen 80;
        listen [::]:80;

        root /var/www/html/laravel-app/current/public;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }


        location ~ \.php$ {
                include snippets/fastcgi-php.conf;

                fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                fastcgi_param DOCUMENT_ROOT $realpath_root;

                fastcgi_pass unix:/run/php/php7.0-fpm.sock;

        }

        location ~ /\.ht {
                deny all;
        }

}
```

Simpan dan tutup file (`CTRL-X`, `Y`, lalu `ENTER`), dan kemudian aktifkan blok server baru dengan membuat tautan simbolis ke direktori yang `sites-enabled` :

```bash
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
```

Uji file konfigurasi Anda untuk kesalahan sintaks:

```bash
sudo nginx -t
```

Jika Anda melihat kesalahan apa pun, kembali dan periksa kembali file Anda sebelum melanjutkan. Mulai ulang Nginx untuk mendorong perubahan yang diperlukan:

```bash
sudo systemctl restart nginx
```

Server Nginx sekarang dikonfigurasi. Selanjutnya, kita akan mengkonfigurasi database MySQL aplikasi.

### Mengkonfigurasi MySQL

Setelah instalasi, MySQL menciptakan pengguna root secara default. Pengguna ini memiliki hak yang tidak terbatas, jadi ini adalah praktik keamanan yang buruk untuk menggunakan pengguna root untuk database aplikasi Anda. Sebagai gantinya, kami akan membuat database untuk aplikasi dengan pengguna yang berdedikasi.

Masuk ke konsol MySQL sebagai root:


Laravel adalah kerangka kerja web open source PHP yang dirancang untuk membuat tugas pengembangan web umum, seperti otentikasi

Tutorial Deploy Aplikasi Laravel Secara Otomatis Dengan Deployer di Ubuntu


### Bagaimana Cara Kerja Homebrew

Pengguna Mac tingkat lanjut mungkin menghargai menggunakan manajer paket Homebrew, yang sangat menyederhanakan proses pemasangan perangkat lunak dan alat baris perintah pada Mac

#### Hello Bro :computer:

Misalnya, jika Anda ingin mudah menginstal alat baris perintah favorit di Mac seperti tong kecil, htop, wget, nmap, pohon, irssi, tautan, colordiff, atau hampir semua utilitas baris perintah unix lain yang dikenal, Anda dapat melakukannya dengan mudah perintah. Homebrew mengunduh dan membuat paket untuk Anda.

Ini jelas ditujukan untuk pengguna Mac yang lebih teknis dan cerdas yang menghabiskan banyak waktu di baris perintah. Meskipun tidak ada masalah khusus untuk pengguna pemula yang memasang Homebrew di Mac mereka, kemungkinan pemula merasa berguna adalah tipis, kecuali mereka bermaksud untuk mempelajari lingkungan baris perintah. Bandingkan itu untuk memberi kekuatan kepada pengguna yang praktis tinggal di lingkungan terminal, apakah pengguna Mac lama atau bermigrasi ke platform dari dunia Windows atau Linux, yang akan segera melihat nilai Homebrew.

### Persyaratan untuk Memasang Homebrew di Mac OS

Prasyarat untuk menginstal Homebrew pada Mac termasuk yang berikut:

- Mac menjalankan Mac OS X 10.10 atau lebih baru, meskipun versi sebelumnya didukung
- Menggunakan `Command Line Tools` Alat Baris Perintah harus diinstal pada Mac (baik secara mandiri atau melalui Xcode)
- Pengetahuan tentang baris perintah dan menggunakan `bash` atau `zsh`

### Cara Memasang Homebrew di Mac OS

Cara termudah untuk menginstal Homebrew adalah melalui ruby dan curl, diselesaikan dengan satu perintah. Pendekatan ini sama untuk menginstal Homebrew di semua versi Mac OS dan Mac OS X yang didukung.

- Buka aplikasi "Terminal", yang ditemukan di / Aplikasi / Utilitas

- Masukkan perintah berikut ke dalam satu baris terminal:

- Tekan Return dan Anda akan melihat serangkaian baris tentang apa yang akan dipasang skrip dan di mana, tekan Kembali lagi untuk menyetujui atau tekan Escape untuk membatalkan

- Masukkan kata sandi administrator (diperlukan oleh eksekusi `sudo`) untuk memulai instalasi

- Pemasangan Homebrew akan memakan waktu cukup lama tergantung pada kecepatan koneksi Mac dan internet Anda, karena setiap paket yang diperlukan diunduh dan dipasang oleh skrip.

Sekarang Anda siap memasang paket perangkat lunak melalui Homebrew, atau Anda dapat membaca dokumentasi bantuan dengan perintah berikut:

Mengingstall Homebrew :

Masukan Perintah Pada Terminal Mac anda :

```bash
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Lalu, buka bantuan dengan :

```bash
brew help
```

### Menginstal Paket Perangkat Lunak melalui Homebrew di Mac

Instalasi paket dengan Homebrew sangat mudah, cukup gunakan sintaks berikut:

```bash
brew install [package name]
```

Misalnya, untuk menginstal `wget` melalui Homebrew Anda bisa menggunakan sintaks berikut:

```bash
brew install wget
```

Sederhana, mudah. Setelah selesai Anda dapat menjalankan wget seperti biasa.

### Kesimpulan

Homebrew bukan satu-satunya cara untuk menginstal perangkat lunak baris perintah, Anda dapat menginstal alat baris perintah pada Mac sendiri dan kemudian mengkompilasi dan membuat perangkat lunak secara mandiri.

Sebagai contoh, kami mendiskusikan menginstal wget di Mac OS tanpa Homebrew di sini dan ini menggunakan konfigurasi dan proses yang umum. Tidak ada yang salah dengan pendekatan itu (dan boleh dibilang mungkin lebih baik bagi pengguna yang menginginkan paket terbatas dan jejak yang lebih ramping) tetapi jika Anda terbiasa dengan manajer paket seperti dpkg, apt-get, atau rpm Anda hampir pasti akan menghargai dan lebih suka menggunakan `Homebrew`.

### Referensi

- Website Resmi [Homebrew](https://brew.sh)
- Repository Github [Github](https://github.com/Homebrew)


Pengguna Mac tingkat lanjut mungkin menghargai menggunakan manajer paket Homebrew, yang sangat menyederhanakan proses pemasangan perangkat lunak dan alat baris perintah pada Mac

Tutorial Install Homebrew di Mac OSX


### Laravel Image Manipulation

Dalam Build aplikasi kemungkinan kita akan menemukan masalah dalam mengelola folder foto, ukuran dan tata letaknya. Nah kali ini saya akan mengupas bagaimana cara **Upload** menambahkan fitur **unggah gambar** dan ubah ukuran di sebagian besar aplikasi yang saya buat. Laravel sudah dikemas dengan pengunggahan file yang sangat mudah, tetapi banyak hal menjadi rumit dan setelah itu kita akan menemukan masalah ketika kita mau memanipulasi gambar yang diunggah. Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengunggah dan mengubah ukuran proses gambar menjadi halus.

Aplikasi yang saya buat biasanya memiliki semacam pengontrol apakah `request` file untuk diunggah. Setelah mengunggah, kita perlu mengubah ukurannya dan kemudian membersihkan file lama dan memperbarui database dengan jalur gambar yang baru diunggah. Solusi sederhana akan menjadi seperti ini:

```php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;

class UserAvatarController extends Controller
{
    public function store(Request $request)
    {
        // validate the image
        $this->validate($request, [
            'avatar' => 'required|image|max:2000'
        ]);

        // get the user
        $user = auth()->user();

        // upload and resize using Intervention Image
        $filename = 'uploads/avatar-'.$user->id.'.jpg';

        Image::make($request->file('avatar'))
            ->fit(200, 200)
            ->save($filename, 80);

        // update model
        $user = auth()->user();
        $oldAvatar = $user->avatar;
        $user->update(['avatar' => $filename]);

        // delete old image
        unlink($oldAvatar);

        return [
            'avatar' => asset($filename)
        ];
    }
}
```

Sekarang kita bisa melakukan yang lebih baik. Kita akan menggunakan [qcod/laravel-imageup](https://github.com/qcod/laravel-imageup) package untuk membuat proses ini **santuy**.

### Install Package

Anda dapat menginstal Package melalui `composer` :

```bash
composer require qcod/laravel-imageup
```

Package akan secara otomatis mendaftar sendiri. Jika Anda perlu mendaftarkannya secara manual, Anda dapat menambahkannya di array penyedia `config/app.php`:

```php
QCod\ImageUp\ImageUpServiceProvider::class
```

Anda dapat mempublikasikan file konfigurasi dengan:

```bash
php artisan vendor:publish --provider="QCod\ImageUp\ImageUpServiceProvider" --tag="config"
```

Ini akan membuat config / imageup.php dengan semua pengaturan yang dapat Anda sesuaikan.

### Konfigurasi

Sekarang kami memiliki `package`, mari kita kaitkan dengan model Pengguna kami untuk menangani fungsionalitas pengunggahan avatar.

```php
use QCod\ImageUp\HasImageUploads;

class User extends Authenticatable
{
    use Notifiable, HasImageUploads;

    /**
     * All the images fields for model
     *
     * @var array
     */
    protected static $imageFields = [
        'avatar' => [
            'placeholder' => 'https://api.adorable.io/avatars/160',
            'width' => 160,
            'height' => 160,
            'resize_image_quality' => 90,
            'crop' => true
        ]
    ];

    //...
}
```

Itu saja, untuk memberi Anda fungsionalitas mengunggah. Sekarang di UserController kami, Anda dapat membuat permintaan dengan file gambar untuk mengunggah dan mengubah ukuran dan melakukan semua hal yang telah kami lakukan sebelumnya secara otomatis hanya dalam 2 baris kode.

```bash
public function store(Request $request)
{
    $user = auth()->user();
    $user->update($request->all());

    return $user;
}
```

Segera setelah `Model::saved()` acara dipecat ini akan memeriksa file apa pun yang bernama avatar dalam $ request. Jika menemukannya, itu akan secara otomatis mengunggah dan memotongnya berdasarkan konfigurasi yang kami berikan dalam definisi bidang `$modelFields` Model pengguna.

Jika Anda melihat ke array $ imageFields dari model Pengguna, Anda dapat melihat bahwa kami telah menyediakan `['width' => 160, 'height' => 160, 'crop' => true]`. Yang memberitahu untuk memotong gambar pada ukuran itu. Jika Anda menghilangkan gambar opsi pangkas akan diubah ukurannya dengan menjaga rasio aspek gambar.

### Mengunggah dan Mengubah Ukuran Gambar secara Manual

Itu bagus untuk mengunggah otomatis dan dalam sebagian besar kasus itu sudah cukup. Tapi bayangkan Anda perlu mengunggah gambar dan memotongnya secara manual. File gambar dapat sudah tersedia di sistem file server atau berasal dari permintaan pengguna.

> Pastikan Anda telah menonaktifkan unggahan otomatis dengan menyetel $ autoUploadImages = false; pada model atau dengan memanggil $ model-> setImagesField (['avatar' => ['auto_upload' => false]); jika tidak, Anda tidak akan melihat unggahan manual Anda, karena itu akan ditimpa oleh unggahan otomatis saat model disimpan.

Mari kita lihat betapa mudahnya mengunggah dan mengubah ukuran gambar secara manual.

```php
$user = User::findOrFail($id);

$user->uploadImage(request()->file('avatar'), 'avatar');
// or
$user->uploadImage(request()->file('avatar'));
```

Unggah gambar untuk bidang `$field` diberikan, jika `$field` nol, itu akan mengunggah ke opsi gambar pertama yang ditentukan pada larik Model `imageFields`.

### Ubah ukuran Gambar

Jika Anda sudah memiliki gambar, Anda dapat memanggil metode ini untuk mengubah ukurannya dengan opsi yang sama yang kami gunakan untuk bidang gambar.

```php
$user = User::findOrFail($id);

// resize image, it will give you resized image, you need to save it
$imageFile = '/images/some-big-image.jpg';
$image = $user->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);

// or you can use uploaded file
$imageFile = request()->file('avatar');
$image = $user->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);
```

### Pangkas Gambar

Anda dapat menggunakan metode pemangkasan ini ($ x, $ y) untuk mengatur koordinat pemangkasan x dan y. Ini akan sangat berguna jika Anda mendapatkan koordinat dari semacam perpustakaan pemangkasan gambar front-end seperti [CropperJs](https://fengyuanchen.github.io/cropperjs/).

```php
$user = User::findOrFail($id);

// uploaded file from request
$imageFile = request()->file('avatar');

// coordinates from request
$coords = request()->only(['crop_x', 'crop_y']);

// resizing will give you intervention image back
$image = $user->cropTo($coords)
    ->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);

// or you can do upload and resize like this, it will override field options crop setting
$user->cropTo($coords)
    ->uploadImage(request()->file('cover'), 'avatar');
```

Seperti yang Anda lihat Ini memberi Anda banyak penyesuaian dan Anda dapat memanipulasi gambar Anda dengan cara apa pun yang Anda inginkan, Terima kasih kepada pustaka Gambar Intervensi yang mengagumkan yang digunakan di bawah tenda.

### Opsi penyesuaian ImageUp Laravel

Laravel ImageUp memungkinkan Anda untuk menyesuaikan cara pengunggahan dan pengubahan ukuran akan ditangani dari opsi bidang yang ditentukan, berikut adalah hal-hal yang dapat Anda sesuaikan:

```php
<?php
namespace App;

use QCod\ImageUp\HasImageUploads;
use Illuminate\Database\Eloquent\Model;

class User extends Model {

    use HasImageUploads;

    // which disk to use for upload, can be override by field options
    protected $imagesUploadDisk = 'local';

    // path in disk to use for upload, can be override by field options
    protected $imagesUploadPath = 'uploads';

    // auto upload allowed
    protected $autoUploadImages = true;

    // all the images fields for model
    protected static $imageFields = [
        'avatar' => [
            // width to resize image after upload
            'width' => 200,

            // height to resize image after upload
            'height' => 100,

            // set true to crop image with the given width/height and you can also pass arr [x,y] coordinate for crop.
            'crop' => true,

            // what disk you want to upload, default config('imageup.upload_disk')
            'disk' => 'public',

            // a folder path on the above disk, default config('imageup.upload_directory')
            'path' => 'avatars',

            // placeholder image if image field is empty
            'placeholder' => '/images/avatar-placeholder.svg',

            // validation rules when uploading image
            'rules' => 'image|max:2000',

            // override global auto upload setting coming from config('imageup.auto_upload_images')
            'auto_upload' => false,

            // if request file is don't have same name, default will be the field name
            'file_input' => 'photo'
        ],
        'cover' => [
            //...
        ]
    ];
}
```

### Kesimpulan

Meskipun saya telah mencoba untuk menutupi sebagian besar fitur untuk [qcod/laravel-imageup](https://github.com/qcod/laravel-imageup) tetapi jika Kamu memerlukan bantuan dengan ini jangan lupa periksa [Dokumentasi Github](https://github.com/qcod/laravel-imageup#laravel-imageup) untuk ini. Saya harap ini membantu Anda. Jika Anda menemukan masalah dalam paket, silakan buka masalah, saya akan segera memperbaikinya. Selamat coding 😎


Dalam Build aplikasi kemungkinan kita akan menemukan masalah dalam mengelola folder foto, ukuran dan tata letaknya. Nah kali ini saya akan mengupas bagaimana cara Upload menambahkan 

Iman Sugirman