Teknologi bagi web developer selalu berganti dengan cepat, hari ini lagi belajar apa besoknya tiba tiba ada framework atau teknologi baru. Semua berganti terlalu cepat, dan mau ga mau kita sebagai programmer juga harus beradaptasi. Jangan mau ketinggalan trend namun di sisi lain juga harus fokus. Kesempatan kali ini kita

Maka dari itu saya menulis postingan ini, pengennya setelah membaca kalian bisa langsung waspada, terinspirasi atau bahkan evaluasi progress kalian selama belajar. Dan pastinya kalian ga ketinggalan trend dunia software engineeering yang berkembangnya terlalu pesat ini

Pengertian Web Developer

Web Developer singkatnya adalah orang yang bekerja untuk mengembangkan web. Kenapa mengembangkan, web developer ketika bekerja masih mengandalkan beberapa framework, package, library, yang didapat dari third party. Dengan kata lain, web developer gak begitu invent/menemukan metode baru saat ia mengerjakan project atau aplikasi

Sehingga bisa dibilang role sebagai web developer ini masih sangat mudah dipelajari dibandingkan dengan role pekerjaan lain.

Baca Juga: Dari Software Engineer Menjadi Product Engineer

Perbedaan Web Developer, Web Engineer, Web Programmer

Pernah ga kalian waktu menemukan akun akun techbros di Twitter, Facebook, Instagram mereka menuliskan nama pekerjaan mereka di bio. Ada yang menuliskannya web developer, web engineer, web programmer. Kira kira apa sih perbedaannya?

Sebenarnya letak perbedaannya ada pada apa yang mereka kerjakan. Tadi sudah dibahas bahwa web developer tugasnya hanya membuat web berdasarkan third party library orang lain. Maka web engineer dan web programmer punya beberapa perbedaan yang mencolok

Web Developer:

• Mengembangkan aplikasi web dengan mengandalkan package, library, framework, CMS pihak ketiga. Bisa berbayar, bisa juga open-source

Web Engineer:

• Membuat rancangan ulang dari aplikasi web beradasarkan fundamental cara kerja website untuk menemukan fitur terbaru, menguji performace, atau memberikan keefektifan tampilan web  yang berbeda

 Kalau kalian pernah mendengar istilah reverse engineering, maka web engineer juga melakukan hal ini namun untuk field web saja

Web Programmer:

• Orang yang menuliskan kode program untuk website

Yup, sesederhana itu. Karena memang fokus seorang web programmer hanya menuliskan kode saja untuk membuat aplikasi web, atau beberapa task pekerjaan. Maka dari itu Pak Sandhika Galih menamakan channel Youtubenya Web Programming UNPAS, karena memang beliau memfokuskan materi videonya untuk menuliskan kode mulai dari hello world! sampai yang ribet ribet seperti OOP dan Asynchronous

Ya meskipun Pak Sandhika menambahkan muatan materi lain seperti framework, namun yang menjadikan dirinya unik adalah betapa beliau bisa mengajarkan segalanya dari yang benar benar basic hingga advanced

Baca Juga:  Retropeksi Hakiki 3 Tahun Terakhir Terjun Belajar Ilmu Komputer

Jenis Jenis Web Development

Ada beberapa jenis web development yang harus difahami, ini sangat penting untuk menentukan karir kalian kedepan bakalan seperti apa

Front End Development

Front End Developer bertugas untuk merancang tampilan antar muka sebuah website. Mulai dari mendesignnya di Figma hingga mengkoding hasilnya ke dalam web. Kadang kedua role ini pun dipisah ada UI/UX Designer ada juga Front End Developer. Namun, masih ada dijumpai berbagai perusahaan masih menggabungkan role ini karena -mungkin dirasa hanya sedikit task UX Designer yang dibutuhkan

Ada beberapa hal yang harus dipelajari jika kamu ingin masuk ke role ini

UI Library

UI Library adalah tools yang berisikan berbagai macam komponen UI yang bisa digunakan untuk tampilan web. Jadi alih alih kalian menuliskan kode dari awal, kalian bisa mengcopy paste kan UI library dari dokumentasi dan menyesuaikannya ke dalam aplikasi kalian

UI Library terkenal: Shadcn/UI, MaterialUI, RadixUI, HeadlessUI

CSS Framework

CSS Framework adalah kerangka berbasis CSS yang memudahkan positioning, layout sebuah website. Perbedaan CSS Framework dengan UI Library adalah CSS Framework tidak begitu mendalam menangani events di dalam komponenya. Jadi kadang ketika menggunakan UI Library kita pun masih membutuhkan CSS Framework sebagai bantuan. Misal, TailwindCSS dengan Shadcn/UI, ChakraUI dengan TailwindCSS, dan lain sebagainya

CSS Framework terkenal: Bootstrap, TailwindCSS

Oh iya, Tailwind selain menyediakan CSS Framework bernama TailwindCSS ia juga menyediakan UI Library bernama TailwindUI yang berbayar

Back End Developer

Back End Developer adalah programmer yang bertugas untuk membuat sistem di balik web, mulai dari bagaimana data diproses, diambil, diakses, hingga autentikasi ketika user masuk ke dalam website. Intinya segala hal yang berususan masalah 'dapur' rancangan bagaimana website bekerja.

Ada beberapa hal yang harus kalian pelajari

RESTFul API

RESTFul API adalah sebuah sistem di dalam aplikasi dimana sebuah aplikasi bisa tekoneksi secara data dan real time dengan aplikasi lain. 

Menurut Binar Academy Blog, API singkatan dari Application Programming Interface adalah kumpulan aturan / code yang membuat 2 program atau lebih dapat berkomunikasi. API menjadi jembatan antar sistem yang menghubungkan client (program yang membutuhkan data) dengan server (database)

Kalian juga harus belajar apa saja prinsip prinsip RestAPI mulai apa itu GET, POST, PUT, DELETE, dan lainnya

Database Design

Database Design adalah skill untuk merancang relationship database, hal ini penting karena berkaitan dengan fitur fitur krusial dalam sebuah aplikasi web. Jadi ketika kalian ingin membuat aplikasi, kalian harus terbayang dulu bagaimana databasenya di-design dengan efisien dan efektif

Kalian harus mengerti apa itu konsep one to many, one to one, many to many, many to one.

SQL Query

SQL Query adalah kode yang berisi instruksi untuk mengambil (meretrieve) data dari database. Semua backend engineer maupun develope wajib menguasai hal ini. Karena menggunakan SQL Query dianggap lebih efektif dan berperan besar terhadap performa website

"SELECT * FROM users"

ORM (Object Relational Mapping)

ORM adalah tool/library/package yang berfungsi untuk mengambil data dari database namun berbasis function sehingga jauh lebih mudah digunakan

User::all() 

Menggunakan Larvel Eloquent

Fullstack Developer

Kalo tadi kita sudah belajar dua role yaitu Front End Developer dan Back End Developer, maka Fullstack Developer bertugas untuk menangangi dua duanya. Intinya kita sebagai fullstack developer ditugaskan untuk membuat aplikasi seutuh utuhnya. 

Mungkin beberapa hal yang harus dipelajari dari role role diatas sudah sangat overwhelming. Namun sekarang banyak sekali teknologi, framework, library, yang men-support kita jika ingin beralih menjadi fullstack developer

Fullstack Framework

Dua Framework ini merupakan framework yang saya rekomendasikan jika kamu mau jadi fullstack developer karena framework ini menangani sistem backend dari suatu aplikasi juga kita sebagai programmer juga bisa melakukan design dan coding terhadap tampilan web secara leluasa

NextJS

NextJS adalah framework frontend bahkan fullstack yang mendukung server side rendereing, sehingga kamu bisa melakukan fetching data dari server dan merender tampilan antar muka langsung dari server

Laravel Livewire

Laravel Livewire merupakan framework dari Laravel yang memberikan fitur jauh lebih mutahir, sehingga kita sebagai programmer bisa mengubah tampilan web dari server

Server Client Fundamental

Server Client adalah konsep dalam aplikasi web dimana server dan client saling berkomunikasi untuk bisa menjalankan web. Sebenarnya ini kosenp basic how the website works aja si, dimana browser (client) memberikan request kepada server lalu server memberikan response. Bisa berupa tampilan web html, json, dan lain sebagainya

Dulu seorang programmer harus ngbuild server dan client ini secara terpisah. Bikin server dulu pake nodejs, golang, atau pyhton, lalu client/clientnnya dibuat lagi dari reactjs, vuejs, atau angular. Lama kelamaan konsep ini sangat ribet kalo dikerjain sendirian. Maka dari itulah banyak sekali Fullstack Framework (yang sudah disebutkan diatas) mulai bermunculan

Skill Yang Dibutuhkan

• HTML (hyper text markup  language) adalah sebuah basis atau struktur program dari browser yang dirancang untuk memetakan apa saja yang harus ditampilkan dari sebuah website. Perlu digaris bawahi bahwa, HTML bukan bahasa pemograman. HTML adalah struktur kode yang mempunyai aturan tertentu dan kita tidak bisa melakukan operasi logika, aritmatika, dan kondisi di dalamnya
• CSS adalah sebuah program yang ditujukan untuk mengubah tampilan warna, karakter, layout, posisi pada sebuah struktur HTML. CSS juga bukan bahasa pemograman karena tidak melakukan operasi logik, dan hitung hitungan
• Javascript adalah bahasa pemograman script yang bisa melakukan segala operasi dan menjalankan fungsi dalam web

PHP, Golang (Pilih salah satu)

Untuk kebutuhan backend saya menyarankan salah satu atau dua duanya lebih baik dari bahasa pemograman PHP atau Golang, karena bahasa pemograman ini demandnya sedang naik dan dari segi performa juga sangat sering diandalkan

• PHP adalah bahasa pemograman berbasis web yang sangat mutahir untuk melakukan request response dalam web, mengambil data dari database, dan lain sebagainya. Meskipun banyak haters, kepopuleran PHP tidak pernah lekang oleh jaman!
• Golang adalah bahasa pemograman yang dikembangkan oleh Google. Sebenarnya fungsinya persis sama seperti Javascript, namun perbedaannya Golang jauh lebih object oriented, setiap kalian menuliskan kode meskipun hanya hello world, kalian harus membuat class/object terlebih dahulu

Laravel, ReactJS (Pilih salah satu)

Ini merupakan framework yang setidaknya kalian harus pelajar kalo mau menjadi web developer. Karena framework ini mudah digunakan dan sangat sering digunakan di industri

• Laravel adalah framework web berbasis PHP. Laravel memiliki keunikan dari segi nama nam syntaxnya yang sangat mudah diingat. Laravel memiliki komunitas yang besar sehingga tidak heran Laravel punya banyak sekali fitur fitur untuk para programmer mengembangkan aplikasinya dengan mudah seperti Laravel Livewire, Laravel Eloquent, Laravel Tinker, Laravel Valet, Laravel Socialite, Laravel Jetstream, dan masih banyak lagi!
• ReactJS adalah framework berbasis javascript yang memudahkan programmer membuat user interface dengan komponen. Pastikan kalian sudah memahami javascript dengan mendalam sebelum belajar framework ini ya

• MySQL adalah database berbasis SQL, MySQL berisi data data mulai dari column, rows, dan fields. Kalian bisa memanipulasinya secara dinamis dan tidak real time
• PostgreSQL adalah database seperti MySQL namun dengan fitur yang lebih scalable dan mampu menangani workload yang jauh lebih banyak (duh jadi mau belajar PostgreSQL)

• Docker adalah sebuah konsep virtualisasi dalam OS dimana beberapa aplikasi bisa dijadikan satu induk, namun alih alih aplikasi ini berjalan pada OS Guest seperti konsep virtualisasi pada umumnya. Docker mempunya konsep tersendiri bernama containerization, dimana aplikasi aplikasi yang dibawahi terisolasi dari OS Host
• Kubernetes adalah sebuah teknologi open source yang menghandle containerzation yang banyak. 

Kali ini kita akan belajar bagaimana cara menerapkan berbagai macam studi kasus middleware di dalam project NextJS. Namun saya harapkan kalian sudah menyelesaikan bagaimana cara membuat API dengan NextJS di postingan sebelumnya

Apa Itu Middleware?

Singkatnya, middleware merupakan script atau function yang dijalankan sebelum request selesai. Artinya, sebelum request diterima oleh server, kode atau function ini akan dijalankan terlebih dahulu

illustrasi cara kerja middleware

Dalam konteks teknologi NextJS, dengan middleware programmer bisa memodifikasi, mengarahkan, request maupun response. 

Apa Itu NextJS?

NextJS merupakan framework berbasis javascript (juga typescript) yang digunakan untuk frontend. NextJS memiliki banyak fitur Server Side Rendering yang mutahir dan menjadi favorit oleh semua programmer

Meskipun ditujukan untuk front-end programmer, NextJS juga bisa menangani urusan backend seperti mengambil data dari database, pembuatan api, dan lain sebagainya. Bisa dikatakan, NextJS juga merupkan framework yang harus dicoba kalo kamu mau seorang fullstack developer

Baca Juga: Tutorial NextJS 13 & Typescript: Membuat Navbar Dengan Shadcn/UI

Kapan Middleware Harus Dibuat?

Biasanya middleware dibuat apapbila diharuskan ada batasan atau aturan untuk user ketika mereka mengakses aplikasi kita

Semisal, kita hanya ingin user yang login adalah hanya admin saja, nah hal ini bisa ditangani di tengah tengah komunikasi antar request dan response saat user ingin login ke dalam aplikasi. Atau, kita ingin aplikasi kita hanya bisa diakses beberapa kali saja dalam sehari, maka kita bisa membuat middleware untuk menangani hal ini

Baca Juga: Konsep Middleware dan Cara Menggunakannya Di NodeJS

Studi Kasus

Matcher

Matcher merupakan jenis middleware dimana function tertentu akan dijalankan pada route tertentu saja.

Pertama buat file middleware.ts dan tulis kode berikut

import { NextResponse } from "next/server";

export function middleware(request: Request) {
  const regex = new RegExp("/api/*");

  if (regex.test(request.url)) {
  }

  console.log("Middleware!");
  console.log(request.url);
  const origin = request.headers.get("origin");
  console.log(origin);

  return NextResponse.next();
}

export const config = {
  matcher: "/api/:path*",
}; 

hasil keluaran config

Penjelasan: Sebelum request diterima server, maka console.log akan berjalan dan memunculkan data data dari request seperti url dan method. Persis yang ingin sudah kita tuliskan di file middleware.ts tersebut

Rate Limiter

Rate limiter merupakan tool yang berfungsi untuk memberikan token atau batasan berapa kali user bisa mengakses api kita. Untuk bisa melakukannya, kita harus menginstall package dari npm

npm i limiter

Buat file limiter.ts di dalam folder api/config dengan isi kode berikut

import { RateLimiter } from "limiter";

export const limiter = new RateLimiter({
  tokensPerInterval: 3,
  interval: "minute",
  fireImmediately: true,
});

Buat file route.ts di app/hello. Kita akan menguji limiter ini pada route sederhana

import { NextResponse } from "next/server";
import { limiter } from "../config/limiter";

export async function GET(request: Request) {
  const origin = request.headers.get("origin");

  const remaining = await limiter.removeTokens(1);
  console.log("remaining", remaining);

  if (remaining < 0) {
    return new NextResponse(null, {
      status: 429,
      statusText: "Too Many Request",
      headers: {
        "Access-Control-Allow-Origin": origin || "*",
        "Content-Type": "text/plain",
      },
    });
  }

  return NextResponse.json({ message: "Hello World!" });
}

Penjelasan: Setiap kali kita ingin mengakses api/hello, setiap menit token akan berkurang 1. Dan jika sudah ada dibawah 0 atau sudah habis maka api akan terblock

isi console

api terblock yang diakses lewat browser

Baca Juga: Cara Membuat CRUD API (Create, Read, Update, Delete) Dengan NodeJS dan MongoDB

CORS

CORS adalah singkatan dari Cross Origin Resource Sharing, yaitu kebijakan keamanan yang diterapkan oleh browser web untuk melindungi pengguna dari serangan lintas domain (cross-domain attacks). CORS origin berfungsi untuk mengatur bagaimana sebuah sumber daya web di server (misalnya, file JavaScript, font, atau gambar) dapat diakses oleh halaman web di domain lain.

Kita bisa menerapkan CORS ini untuk api kita, sehingga hanya user dengan headers tertentu yang bisa mengaksesnya. Artinya, kita sebagai programmer yang mempunyai kendali atas api ini bisa diakses oleh siapa

Namun untuk bisa seorang user mengakses aplikasi kita, kita juga harus memberikan aturan yang jelas, kita bisa memberikannya pada headers

Buka file route.ts pada folder app/api/todo

Lalu ubah function GET menjadi seperti ini

export async function GET(request: Request) {
  const origin = request.headers.get("origin");

  const res = await fetch(DATA_SOURCE_URL);
  const todos: Todo[] = await res.json();

  return new NextResponse(JSON.stringify(todos), {
    headers: {
      "Accept-Control-Allow-Origin": origin || "*",
      "Content-Type": "application/json",
    },
  });
}

dan ubah file middleware.ts menjadi seperti ini

// middleware.ts
import { NextResponse } from "next/server";

const allowedOrigins =
  process.env.NODE_ENv === "production"
    ? ["https://www.yoursite.com", "https://yoursite.com"]
    : ["http://localhost:3000", "https://www.google.com"];

export function middleware(request: Request) {
  const origin = request.headers.get("origin");
  console.log(origin);

  if ((origin && !allowedOrigins.includes(origin)) || !origin) {
    return new NextResponse(null, {
      status: 400,
      statusText: "Bad Request",
      headers: { "Content-Type": "text/plain" },
    });
  }

  console.log("Middleware!");
  console.log(request.url);
  console.log(request.method);

  return NextResponse.next();
}

export const config = {
  matcher: "/api/:path*",
};

Apakah kalian juga menggunakan NextJS? Pernah ga coba membuat API dari framework terkenal ini? Kalo belum pernah saya akan sharing ke kalian bagaimana cara membuat API menggunakan NextJS ini sangat berguna agar aplikasi kita bisa saling terintergrasi dengan medium aplikasi lainnya seperti mobile frintend atau bahkan sesama backend

Apa Itu Restful API?

RESTful API adalah sebuah antar muka yang memungkinkan dua sistem komputer saling berkomunikasi menggunakan internet

Misalkan nih, kalian membuat sebuah aplikasi. Namun disisi lain kalian ingin membuat aplikasi lain dengan sistem, stack berbeda dengan aplikasi lainnya dan masih terhubung. Daripada capek capek bikin aplikasi baru dari 0 dan datanya juga kosong, kenapa tidak koneksikan aja data data yang ada di aplikasi lama ke aplikasi lainnya

Hal ini pernah saya alami sewaktu membuat panel admin. Setiap data yang saya inputkan, tidak hanya terbaca lewat aplikasi admin saya, namun juga terhadap aplikasi aplikasi mobile atau web lain yang sudah terhubung melalui API

Baca Juga: Cara Membuat REST API Hanya Dengan NodeJS. Tanpa Framework!

Nah sudah faham kan apa itu API? Kali ini kita akan  mencoba membuatnya menggunakan NextJS, sebuah framework berbasis javascript yang sering digunakan untuk kebutuhan frontend namun ia juga kaya akan fitur untuk mendevelop API, meneria response dan mengirim request dengan mudah

Langkah Langkah

Buat project NextJS

Masukkan perintah berikut

npx create-next-app@latest nama-project --typescript
cd nama-project
npm run dev

Setelah membuat project, buat folder bernama api di dalam folder app, sehingga bisa menjadi seperti ini app/api

route ini akan memberikan url untuk berkomunikasi menggunakan API kita

Atur Environment

Buat file bernama .env*local lalu buka file .gitignore. Pastikan .env*local berada di dalamnya

Lalu tulis DATA_API_KEY=secret 

Sebenarnya kalian bisa menggantikan kata secret menjadi kalimat atau kode kode  yang lebih rumit lagi. Tapi karena ini hanya contoh jadi singkat saja ya

Buat Types

Buat file bernama types.d.ts

File ini akan menggambarkan bagaimana tipe data dari response kita sehingga bisa meminimalisir error

type Todo = {
  userId: number;
  id: number;
  title: string;
  isCompleted: boolean;
};

Disini lah kita akan mempelajari jenis jenis apa saja request itu.

Jenis Jenis Request

GET /api/todos Untuk menerima semua response

Buat file routes.ts, lalu tuliskan kode berikut di dalamnya

import { NextResponse } from "next/server";

const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos";

export async function GET() {
  const res = await fetch(DATA_SOURCE_URL);

  const todos: Todo[] = await res.json();

  return NextResponse.json(todos);
} 

Sebenarnya kalian bisa mengambil data dari database langsung lalu menjadikannya sebagai response. Namun, karena ini hanya contoh, sementara kita akan mengambilr source datanya dari jsonplaceholder

Masukkan url berikut localhost:3000/todos/api di dalam browser kalian. Maka akan muncul data seperti ini

localhost:3000/todos/api

DELETE /api/todos Untuk menerima semua response

Tulis kode berikut di dalam app/api/route.ts 

export async function DELETE(req: Request) {
  const { id }: Partial<Todo> = await req.json();

  if (!id) return NextResponse.json({ message: "Todo id required" });

  await fetch(`${DATA_SOURCE_URL}/${id}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      "API-Key": API_KEY,
    },
  });

  return NextResponse.json({ message: `Todo is ${id} is deleted` });
}

Jangan lupa juga masukkan juga key & value untuk API_KEY di dalam .env, masukkan kode berikut

API_KEY=secret

Untuk mencobanya buka aplikasi Postman atau API Tester lainnya.

Maka data berhasil dihapus dengan respons message seperti berikut

POST /api/todos Untuk mengirimkan request berisi body ke server

Prinsipnya sama dengan route untuk delete, namun kalian perlu menambahkan data di dalam body berupa userId dan title

export async function POST(req: Request) {
  const { userId, title }: Partial<Todo> = await req.json();
  if (!userId || !title)
    return NextResponse.json({ message: "title or user is required" });
  await fetch(`${DATA_SOURCE_URL}/${userId}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      "API-Key": API_KEY,
    },
  });
  return NextResponse.json({ message: `Todo is ${title} is submitted` });
}

PUT /api/todos mengirimkan request untuk merubah data di server

Masukkan data apa saja yang ingin di rubah mulai dari userId, id, title, dan lain sebagainya di dalam body

export async function PUT(request: Request) {
    const { userId, id, title, completed }: Todo = await request.json()

    if (!userId || !id || !title || typeof (completed) !== 'boolean') return NextResponse.json({ "message": "Missing required data" })

    const res = await fetch(`${DATA_SOURCE_URL}/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'API-Key': API_KEY
        },
        body: JSON.stringify({
            userId, title, completed
        })
    })

    const updatedTodo: Todo = await res.json()

    return NextResponse.json(updatedTodo)
}

GET /api/todos/{userId} menerima response berdasarkan id yang dikirimkan lewat parameter

Kita juga bisa mengambil data berdasarkan id yang ada di dalam parameter. Caranya kalian buat folder baru bernama [id] di dalam folder api, lalu buat file route.ts

import { NextResponse } from "next/server";

const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos";

export async function GET(request: Request) {
  const id = request.url.slice(request.url.lastIndexOf("/") + 1);

  const res = await fetch(`${DATA_SOURCE_URL}/${id}`);

  const todo: Todo = await res.json();

  if (!todo.id) return NextResponse.json({ message: "Todo not found" });

  return NextResponse.json(todo);
}

Laravel Livewire memiliki banyak sekali fitur yang membantu produktifitasan programmer, salah satunya adalah Validation. Fitur ini memungkinkan user tidak memasukkan data data yang sembarangan ke dalam database. Kali ini kita akan belajar bagaimana cara menggunakan validation pada laravel livewire 3

Sebelum dimulai pastikan kalian sudah mempunyai project laravel dan menginstall livewire di dalamnya ya

Langkah Langkah 

Buat component baru misal:TaskIndex

php artisan make:component TaskIndex

Lalu buka file CreateTask dan masukkan kode berikut

 #[Rule('required|max:10|string')]

di bawah property kalian

Rule ini akan bertindak untuk memberikan error apabila data yang dimasukkan tidak sesuai dengan yang kita inginkan

Pada kode diatas ditunjukkan bahwa data yang dimasukkan tidak boleh kosong, maksimal 10 karakter, dan bertipe data string.

Kode seperti ini biasa disebut dengan attributes dimana function atau variabel dibawahnya akan diproses oleh function function pada kode bawaan laravel

Dengan kode ini kalian tidak perlu menuliskan function validation yaitu $this->validate, karena secara otomatis attribute yang sudah kita tulis akan menanganinya

Kalian pasti pernah menjumpai error Undefined method 'layout', kali ini kita akan mencoba untuk mengatasinya. 

Buat file IntelephenseHelper.php

Lalu isi kode berikut

<?php

namespace Illuminate\Contracts\View;

use Illuminate\Contracts\Support\Renderable;

interface View extends Renderable
{
  /** @return static */
  public function layout();
  public function title();
}

Lalu tuliskan lagi method layout di component livewire kalian seperti berikut

    public function render()
    {
        return view('livewire.task-index')->layout('layouts.app')->title('Home For Task')->with([
            'button' => 'New Task'
        ]);
    }

Maka error akan hilang

Kali ini kita akan belajar bagaimana menggunakan laravel livewire untuk membuat aplikasi web. Kita menggunakan Laravel Livewire karena teknologi ini mampu menangani server side rendering, dimana segala komponen dan isi halan web semuanya ditangani pada sisi server dan bukan klien. Bagaimana itu penjelasan lengkapnya. Kalian bisa membaca postingan ini lebih lengkap

Langkah Langkah

Buat project laravel

composer create-project laravel/laravel nama-project

Instal Laravel Livewire

composer require laravel/livewire

Buat folder bernama layout

Buat folder bernama layout di resources/views. Ini akan berisi file app.blade.php, footer.blade.app, nav.blade.php. Kita akan menuliskan kode pada masing masing file ini

app.blade.php

<html lang="en">
<head>
    <meta
        charset="UTF-8"
    />
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    />
    <meta
        http-equiv="X-UA-Compatible"
        content="ie=edge"
    />
    <title>
        {{ $title ?? 'Hostinger Livewire' }}
    </title>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <link
        href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap"
        rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-800">
<div class="relative h-full isolate overflow-hidden  px-6 lg:px-8">
    <header>
        @include('layouts.nav')
    </header>
    <div class="relative isolate">
        <div class="mx-auto px-2 sm:px-4 py-2.5">
            @yield('content')
            @isset($slot)
                {{ $slot }}
            @endisset
        </div>
    </div>
    <footer class="absolute bottom-0 w-full align-center">
        @include('layouts.footer')
    </footer>
</div>
</body>
</html> 

footer.blade.php

<div class="text-center pt-20 sm:pt-10">
    <p class="font-bold text-gray-200">
        This template has been created by
        <a
            href="https://www.youtube.com/@yasyaindra"
            class="text-pink-400 transition-all hover:text-pink-500"
            target="_blank">
            @yasyaindra
        </a>
    </p>

    <ul class="py-4">
        <li class="inline pr-4 text-xl text-white transition-all hover:text-green-400">
            <a href="https://www.youtube.com/@yasyaindra">
                <i class="fa-brands fa-youtube"></i>
            </a>
        </li>
        <li class="inline pr-4 text-xl text-white transition-all hover:text-green-400">
            <a href="https://www.instagram.com/yasyaindra/">
                <i class="fa-brands fa-instagram"></i>
            </a>
        </li>
    </ul>
</div>

nav.blade.php

<nav class="bg-transparent border-gray-200 px-2 sm:px-4 py-2.5 rounded">
    <div class="container flex flex-wrap justify-between items-center mx-auto">
        <div class="hidden w-full md:block md:w-auto" id="navbar-default">
            <ul class="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent">
                <li>
                    <a
                        href="https://www.youtube.com/@yasyaindra"
                        class="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4" aria-current="page">
                        YouTube
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Buat file index.blade.php di resources/views

Tuliskan kode berikut

@extends('layouts.app')

@section('content')
    <h1 class="font-bold tracking-tight text-white sm:text-6xl">
        Home
    </h1>
@endsection

Buat component livewire dengan perintah berikut

php artisan make:livewire task-index

perintah ini akan secara otomatis membuatkan kita dua file. tast-index.blade.php di folder livewire dan TaskIndex di app/Livewire

Kita akan menuliskan kode di TaskIndex ini sehingga component ini bisa memanfaatkan layout yang sudah kita buat barusan.

<?php

namespace App\Livewire;

use App\Models\Task;
use Livewire\Component;

class TaskIndex extends Component
{
    public $name;

    public function add() {
        dd($this->name);
    }

    public function render()
    {
        return view('livewire.task-index')->layout('layouts.app')->title('Home For Task')->with([
            'button' => 'New Task'
        ]);
    }
}

Kalo kalian mengalami error saat menuliskan kode layout atau title. Kalian bisa menanganinya dengan cara berikut

Baca Juga: Cara Install Laravel 10 Di Laragon

Jangan lupa, buat juga component button di dalam folder components.

Buat file button.blade.php di folder resources/views/components

Lalu tulis kode berikut

<button
    type="submit" wire:click='add'
    class="rounded-md bg-pink-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-pink-500">
    {{ $button }}
</button>

dan buat input.blade.php

Arahkan route /tasks ke dalam halaman task-index

Buka file web.php dan tambahkan kode berikut

Route::get('/tasks', TaskIndex::class);

Hasil

halaman home (index.blade.php)

/tasks

Saya akan membeberkan bagaimana cara saya membuat aplikasi web. Kalian boleh menirukan proses saya ini, atau boleh juga mengkritisi lewat kolom komentar di bawah. 

Bayangkan kalian adalah seorang programmer profesional yang sedang mendapatkan project untuk membuat aplikasi inventaris yang memiliki fitur fitur seperti menghitung keluar masuk barang beserta jumlah, harga, dan foto. Kira kira apa yang pertama kali terbesit ketika kalian membaca requiredment yang ada di pikirian kalian? upah yang didapat? Ahhh, itu mah udah pasti. Tapi ada beberapa hal lain yang sepertinya harus kalian pikirkan juga

Disini saya akan menyebutkan apa saja, beserta mengurutkannya. 

Semua cara yang saya beberkan di bawah murni berdasarkan pengalaman saya ya, tentu cara yang saya gunakan berbeda dengan programmer programmer lain. Saya hanya sebatas bisa sharing saja di blog ini

Menentukan Tech Stack

Hal pertama yang terpintas tentunya adalah tech stack apa yang saya gunakan. ini berkaitan juga dengan skala aplikasi itu sendiri. Kalau ternyata memang butuh aplikasi yang simple, sederhana dan bisa segera diluncurkan, biasanya saya akan langsung menggunakan Laravel. Kalian bisa tahu alasannya dengan membaca postingan saya sebelumnya disini

Baca Juga: Rekomendasi Tech Stack Untuk Para Programmer di Tahun 2024 

Namun jika aplikasi yang ingin dibuat mempunyai tampilan front end yang interaktif dan dinamis, yang artinya untuk menjalankan fitur aplikasi kita tidak perlu reload halama, saya akan lansung menggunakan ReactJS

Merancang Database

Kalau sudah menentukan tech stack yang ingin digunakan, selanjutnya saya akan langsung menggambarkan relasi database yang nantinya ini juga akan berhubungan terhadap fitur fitur yang ingin dibuat. Misal, ada fitur following & followers maka design databasenya pun berbeda. Atau fitur keranjang belanja, itu pun memiliki design database yang berbeda juga.

Maka dari itu, database design merupakan proses paling krusial. Proses yang menjadi pondasi dari aplikasi kita nantinya

Mendesign User Interface (UI)

Disclaimer, kemampuan UX/UI saya pun sebenarnya masih dangkal. Namun jujur saya sangat pragmatis untuk proses ini. Terkadang saya hanya melihat website yang mirip yang ingin saya buat lalu meniru posisi posisi tombol, gambar, headernya. 

Mengkoding

Yup, kalo langkah langkah diatas sudah dilewati, saatnya mengkoding. Mulai dari design front end menggunakan HTML, dan backendnya menggunakan PHP dan MySQL

Deployment

Ini adalah proses paling menantang dan nagih. Karena ibaratnya ikut lomba lari maraton, kita seperti hampir ingin melewati garis finish. Untuk proses deployment saya mengikuti techstack yang saya buat. Kalau PHP saya akan menggunakan shared hosting, tapi kalau ReactJS maka saya akan menggunakan Vercel. Tentu bisa mendeploy aplikasi react menggunakan VPS atau server sungguhan, namun saya sama sekali belum mencobanya

Sudah lama tidak update blog, kali ini kita akan membahas tech stack apa saja yang sering kali saya gunakan kita membuat aplikasi web maupun mobile. Sebenarnya setiap programmer mempunyai tech stacknya sendiri sendiri. Jadi sebenarnya tujuan postingan ini dibuat lebih ingin ke sharing dan siapa tau kalian keracunan ikut ikutan menggunakan tech stack yang saya gunakan dan tidak hanya itu saya juga akan memberikan resource kalian untuk belajar

Selama belajar pemograman saya sering sekali pindah pindah tech stack. Pertama kali pada tahun 2018 saya menggunakan PHP, lalu ganti ke Javascript dan NodeJS & ReactJS, lalu balik lagi ke PHP. Pada saat itu saya masih kebingungan menentukan mana ya tech stack yang nyaman. Namun seiring berjalannya waktu dan bertambahnya umur, justru saya sangat menghindari sekali belajar technology baru. Perkembangannya sangat cepat dan bisa mengurangi fokus belajar saya

Maka dari itu, ada baiknya kita lebih baik fokus saja sama salah satu atau dua tech stack yang nyaman. Yang terpenting adalah alat alat ini bisa menangani pembuatan aplikasi yang diinginkan.

Karean tidak dipungkiri di tahun 2023 ini saja, banyak sekali teknologi baru yang dirilis dan ngtrend, sampe sampe programmer mau dari jaman dulu pun harus belajar lagi dari awal. Contohnya ia lah Bun, Rust, HTMX, . Belum lagi Laravel yang masih aktif meluncurkan package package terbaru demi memanjakan developer. Jadi kita sebagai programmer harus pintar  pintar memilih tech stach yang cocok, agar tidak tersesat saat belajar dan mengembangkan aplikasi yang diinginkan

Apa Itu Tech Stack?

Tech Stack adalah sebuah pengelompokan teknologi apa saja yang digunakan ketika kita ingin membuat program. Ibarat seperti orang yang memasakan, kita memiliki resep atau bumbu favorit sehingga masakan yang dihidangkan bisa enak. 

Kalo kalian sudah faham apa definisi tech stack, disini saya akan merekomendasikan tech stack yang sebaiknya kalian pelajari, karena apa? karena saya juga masih aktif menggunakan tech stack berikut. Kita akan mengkategorisasikannya ya

Web Development

Laravel, Laravel Livewire, Laravel Sanctum, PHP, MySQL, Bootstrap

Yup, ini bisa dikatakan merupakan comfort tech stack yang sering saya gunakan. Karena alur pembuatan aplikasi menggunaka teknologi ini sungguh melekat di pikiran saya. Jadi bisa dikatakan ini adalah top of mind tech stack pilihan saya 

Selain untuk kebutuhan fullstack, saya juga menggunakan laravel ini untuk kebutuhan backend dan pembuatan API

Kalo kalian ingin ngulik kalian bisa mengunjui channel youtube Code With Dary

NextJS, Prisma, MySQL, Shadcn/UI, Tailwind, Typscript

Ini merupakan tech stack yang jujur bagi saya masih sangat challenging. Karena teknologi diatas masih sebentar saya pelajari, jadi mungkin butuh waktu yang lumayan lama sampe akhirnya saya menjumpai momen Eurika! hahaha

Misalkan aplikasi web yang membutuhkan kompleksitas tampilan luar yangs sulit, saya akan menggunakan tech stack ini. Apalagi UI component dari Shadcn/UI menurut saya sangat memanjakan mata dan nyaman digunakan

Untuk tech stack ini kalian bisa pelajar lewat channel youtube Code With Antonio

Mobile Development

React Native, Metro

Sebenarnya saya make teknologi ini karena udah kadung belajar React. Jadi males mau pindah ke Flutter. Kalian bisa belajar React Native di dbestech, Freecodecamp

DevOps

Nginx, Apache, Ubuntu

Saya terkadang masih masih menggunakan hosting sharing dari penyedia seperti Hostinger. Tapi untuk beberapa kasus saya terkadang menyewa di VPS lokal seperti IdCloudHost. Kalian bisa belajar ngulik tentang deployment ini di Build With Angga

Data Science/Analytic

Python, PowerBI, Google Colab, Anaconda

Jujur saya sudah lama tidak mengulang belajar lagi seputar data science, namun terakhir saya berkutat pada kasus kasus yang berkaitan dengan data science, saya menggunakan teknolog teknologi diatas. Kalo kalian ingin belajar kalian bisa ikut course Dicoding atau di youtube Freecodecamp, Kylie Ying

Kesimpulan dan Penutup

Itu dia beberapa tech stack yang udah saya beberkan, kira kira kamu jadi pengen belajar yang mana nih. Kasih tau di kolom komentar

Hey there, savvy shoppers! As the holiday season approaches, there's one thing on everyone's mind – Black Friday deals! And if you're looking to boost your confidence and embrace your curves, look no further than Shapellx's Black Friday shapewear deals. Trust me, this Black Friday, you won't want to miss out on the incredible deals this game-changing shapewear brand has to offer.

Let's be real!

We all have those moments when we want to look and feel our absolute best. Whether it's a special event, a night out, or just a regular Tuesday, Shapellx's Shapewear has got your back – or should we say, your curves!

It's not just about squeezing into a smaller size; it's about enhancing your natural beauty and feeling comfortable in your own skin. From waist trainers to bodysuits, Shapellx offers a range of shapewear that caters to every body type and outfit. And the best part? They have the best butt lifting shapewear for which you don't have to sacrifice comfort for confidence.

Product link : Link

Let's talk waist trainers!

If you've ever dreamt of achieving that coveted hourglass figure, Shapellx's waist trainers are a game-changer. Made with high-quality materials that are both breathable and flexible, these waist trainers provide the perfect balance between comfort and compression. Say goodbye to muffin tops and hello to a smoother, more defined waistline.

Product link : Link

Let's dive into bodysuits!

Shapellx's bodysuits are designed to give you a seamless and sculpted look. Whether you're rocking a body-hugging dress or your favorite pair of jeans, these bodysuits will smooth out any lumps and bumps, leaving you looking flawless. Plus, they come in a variety of styles and colors, so you can find the perfect one to complement your wardrobe.

Product link : Link

But what really sets Shapellx apart is their commitment to inclusivity. They understand that everybody is unique, and their shapewear is designed to celebrate that diversity. No matter your size or shape, Shapellx has a solution for you. This Black Friday, take advantage of their amazing deals to find shapewear that not only fits your body but also fits your style.

Let's rock the shapewears!

Don’t forget the confidence boost that comes with rocking their best tummy control shapewear. It's not about conforming to society's standards; it's about embracing your curves and feeling empowered in your own skin. Shapellx's tummy control shapewear is here to help you do just that.

Product link : Link

So, why should you add Shapellx to your Black Friday shopping list? Because it's more than just shapewear – it's a confidence booster, a curve enhancer, and a celebration of your unique beauty. Treat yourself this Black Friday and invest in shapewear that not only transforms your silhouette but also transforms the way you feel about yourself.

In conclusion, Shapellx's Shapewear is a must-have this Black Friday. Don't miss out on the opportunity to snag these confidence-boosting pieces at unbeatable prices. Your curves will thank you, and your confidence will soar to new heights! Happy shopping!