Tips All

Hallo teman-teman! Dalam artikel ini, kita akan membahas langkah-langkah yang perlu kamu ketahui untuk membuat routing dengan mudah menggunakan Next JS App Router. Routing adalah konsep penting dalam dunia pengembangan web yang memungkinkan kamu mengarahkan pengguna dari satu halaman ke halaman lainnya dengan lancar dan teratur. Yap, langsung saja kita eksekusi🚀 Menentukan Route Untuk membuat atau menentukan routing pada Next JS App Router itu sangat mudah sekali. Dalam contoh kali ini, kita akan membuat routing yang isinya berupa halaman detail product atau kelas. Ikuti langkah-langkah berikut: Langkah Pertama: Membuat Folder Saat kita ingin membuat routing kita harus membuat folder terlebih dahulu di dalam folder app. Ketika kamu membuat folder, maka folder tersebut akan mendefinisikan nama routing yang akan kamu gunakan. Dalam contoh kali ini, kita akan membuat folder bernama detail: Namun, jika hanya membuat folder saja itu belum cukup untuk membuat sebuah routing. Mari kita lanjut langkah selanjutnya🚀 Langkah Kedua: Membuat File page.tsx Setelah kita membuat folder, selanjutnya adalah kita harus membuat file bernama page.tsx di dalam folder detail. Perlu diingat bahwa ketika ingin mendefinisikan routing atau pages baru, kita harus beri nama file page.tsx pada folder. Jika kita memberi nama file selain page.tsx maka file tersebut hanya akan menjadi komponen biasa dan tidak akan menjadi sebuah routing atau pages. Langkah Ketiga: Membuat Konten Setelah kita selesai membuat routing, Sekarang mari kita mencoba membuat konten dari routing tersebut. Kamu bisa langsung copy kode di bawah ini: import React from 'react' const DetailPages = () => { return ( <section className="h-screen w-full flex flex-col justify-center items-center"> <div className='bg-gray-50 w-[1000px] flex px-8 py-12 space-x-4'> <div className='w-[500px] flex justify-center'> <img src="<https://buildwithangga.com/storage/assets/thumbnails/thumbnail%20kelas%20web%20development%20microservice%20buildwith%20angga.png>" className='w-[300px] h-[200px]' alt="img" /> </div> <div className='w-[500px]'> <h3 className='font-semibold text-3xl'>Kelas Online Web Development Microservice: Website Kelas Online</h3> <p className='text-slate-400 mt-2'>Learn how to build a real project from scratch</p> <div className='mt-6 flex items-center space-x-3'> <button className='bg-[#335EF7] px-6 py-2 rounded-full text-white font-semibold'>Beli Kelas</button> <button className='bg-[#E5E9F2] px-6 py-2 rounded-full text-gray-700 font-semibold'>Lihat Benefit</button> </div> </div> </div> </section> ) } export default DetailPages Sesuaikan isi kontenmu sesuai kebutuhan ya. Setelah kita membuat konten, sekarang kamu bisa akses routing atau pages baru kamu di http://localhost:3000/detail. Berikut adalah gambar review dari kode di atas: Gimana, mudah bukan membuat routing pada Next JS App Router? Kamu sekarang dapat membuat routing sesuai kebutuhan kamu. Kesimpulan Next JS App Router menawarkan kinerja yang tinggi dengan pendekatan yang optimal dalam mengelola routing. Dengan kemampuan ini, aplikasi web kamu dapat berjalan lebih cepat dan responsif. Dukungan yang diberikan untuk prerendering secara alami membantu aplikasi web memuat halaman-halaman dengan cepat, meningkatkan pengalaman pengguna dan optimasi mesin pencari. Membuat routing dalam aplikasi web menggunakan Next JS App Router sebenarnya tidak sesulit yang dibayangkan, kan? Dalam artikel ini, kamu telah belajar langkah-langkah dasar untuk membuat routing yang lancar dan teratur. Buat kamu yang ingin mempelajari fitur-fitur selanjutnya, kamu bisa ikut kelas di BuildWithAngga. Salah satunya yaitu, Kelas Online Gratis NextJS Basic ataupun yang berupa project base yaitu, Kelas Online Web Development Microservice: Website Kelas Online. So, ayo kita menjadi expert bersama BuildWithAngga🚀 See you guys!

Hello, Spirit of learning!!! Tahukah kamu apa itu Node.js? Node.js adalah lingkungan runtime yang dirancang untuk menjalankan JavaScript di luar peramban (browser). Dengan Node.js, kamu dapat mengembangkan aplikasi berbasis server menggunakan JavaScript. Kamu juga dapat membangun aplikasi jaringan dan server-side yang real-time dan scalable. Jika kamu tertarik dengan pengembangan web menggunakan JavaScript, Node.js adalah pilihan yang sangat baik! 🚀 Mari kita jelajahi 5 Tips & Trik Meningkatkan Performa Aplikasi Node.js yang cepat dan efisien!!! 1. Hindari Memblokir Event Loop 5Tips&TrikNodeJS_BuildWithAngga Event loop adalah mekanisme yang memungkinkan Node.js untuk menangani banyak permintaan secara asinkron. Kita harus menghindari melakukan operasi yang berat atau lama di dalam event loop, karena akan menghambat proses lainnya. Node.js dirancang untuk menangani operasi-asinkron dengan efisien, menggunakan event loop untuk mengelola tugas tanpa memblokir. Sebagai gantinya, kita dapat menggunakan teknik seperti async/await, promise, atau callback untuk menjalankan operasi tersebut di luar event loop. Untuk menghindari memblokir event loop, Kamu dapat: Menggunakan fungsi-asinkron sebanyak mungkin.Pindahkan tugas yang intensif CPU ke thread pekerja terpisah menggunakan modul worker_threads. const { Worker, isMainThread, parentPort } = require('worker_threads'); if (isMainThread) { // Jika berada di thread utama const worker = new Worker(__filename); // Mendengarkan pesan dari worker worker.on('message', (result) => { console.log('Result from worker: ', result); }); // Mengirim pesan ke worker untuk melakukan tugas CPU-intensif worker.postMessage('Perform CPU-intensive task'); } else { // Jika berada di worker thread parentPort.on('message', (message) => { // Mensimulasikan tugas CPU-intensif for (let i = 0; i < 1e9; i++); // Mengirim pesan kembali ke thread utama bahwa tugas selesai parentPort.postMessage('Task completed'); }); } 2. Gunakan Caching untuk Meningkatkan Waktu Respons Caching 5Tips&TrikNodeJS_BuildWithAngga Caching adalah teknik yang memungkinkan kita untuk menyimpan data yang sering digunakan di dalam memori atau penyimpanan eksternal. Dengan caching, kita dapat mengurangi waktu akses ke sumber daya yang lambat, seperti database atau API eksternal. Kita dapat menggunakan modul seperti redis, cached, atau node-cache untuk mengimplementasikan caching di Node.js. Berikut adalah contoh cache dalam memori: const http = require('http'); const data = require('./data.json'); const cache = {}; http.createServer((req, res) => { // Mengambil URL permintaan sebagai kunci untuk cache const key = req.url; // Mengecek apakah data sudah ada di dalam cache if (cache[key]) { // Jika sudah ada, langsung mengirimkan data dari cache sebagai respons res.end(cache[key]); } else { // Jika data belum ada di cache // Memproses data (dalam contoh ini, disimulasikan dengan processData) const result = processData(data); // Menyimpan hasil pemrosesan ke dalam cache cache[key] = result; // Mengirimkan hasil pemrosesan sebagai respons res.end(result); } }).listen(8000); Jika kamu lebih memilih untuk menggunakan redis berikut ini contoh penerapannya : const http = require('http'); const redis = require('redis'); const client = redis.createClient(); // Menangani kesalahan koneksi ke Redis client.on('error', (err) => { console.error('Error:', err); }); // Membuat server HTTP http.createServer((req, res) => { // Menggunakan URL permintaan sebagai kunci untuk Redis const key = req.url; // Mengambil data dari Redis dengan kunci tertentu client.get(key, (err, result) => { // Menangani kesalahan saat mengambil data dari Redis if (err) { console.error(err); res.end(); return; } // Jika data sudah ada di Redis, mengirimkan data tersebut sebagai respons if (result) { res.end(result); } else { // Jika data belum ada di Redis // Memproses data (dalam contoh ini, disimulasikan dengan processData) const newData = processData(); // Menyimpan hasil pemrosesan ke Redis dengan kunci tertentu client.set(key, newData); // Mengirimkan hasil pemrosesan sebagai respons res.end(newData); } }); }).listen(8000); 3. Gunakan Kompresi untuk Mengurangi Payload Respons 5Tips&TrikNodeJS_BuildWithAngga Kompresi adalah teknik yang memungkinkan kita mengurangi ukuran data yang dikirim dari server ke klien. Dengan kompresi, kita dapat meningkatkan kecepatan dan efisiensi transfer data, serta menghemat bandwidth. Mengompresi respons server kita dapat secara signifikan mengurangi ukuran data yang dikirim ke klien, sehingga menghasilkan waktu respons yang lebih cepat dan penggunaan bandwidth yang lebih rendah. Kita dapat menggunakan middleware kompresi dengan Express.js untuk mengaktifkan kompresi gzip. Pertama kita install compression package: npm install compression Kemudian, kita tambahkan middleware ke aplikasi Express.js: // Mengimpor modul Express untuk membuat server web const express = require('express'); // Mengimpor modul Compression untuk mengompresi respons HTTP const compression = require('compression'); // Membuat objek aplikasi Express const app = express(); // Menggunakan middleware Compression untuk mengompresi respons app.use(compression()); // Menangani permintaan GET pada route utama ('/') app.get('/', (req, res) => { // Mengirim respons 'Hello, World!' ke klien res.send('Hello, World!'); }); // Menjalankan server pada port 8000 app.listen(8000); 4. Optimalkan Parsing dan Stringifikasi JSON 5Tips&TrikNodeJS_BuildWithAngga Parsing dan stringifikasi JSON adalah proses yang mengubah data JSON menjadi objek JavaScript dan sebaliknya. Proses ini dapat memakan waktu dan sumber daya yang cukup besar, terutama jika data JSON yang ditangani sangat besar atau kompleks. Kita dapat menggunakan modul seperti fast-json-parse, fast-json-stringify, atau json-stream untuk mengoptimalkan parsing dan stringifikasi JSON di Node.js. Pertama kita install libraries: npm install fast-json-parse fast-json-stringify Kemudian tambahkan kode berikut : // Mengimpor modul FastJsonParse untuk parsing JSON dengan cepat const FastJsonParse = require('fast-json-parse'); // Mengimpor modul fast-json-stringify untuk mengonversi objek JavaScript ke JSON dengan cepat const fastJsonStringify = require('fast-json-stringify'); // JSON string yang akan di-parse const jsonString = '{"foo": "bar"}'; // Membuat instance FastJsonParse dengan JSON string const jsonParser = new FastJsonParse(jsonString); // Mendapatkan hasil parsing dari instance FastJsonParse const result = jsonParser.value; // Konfigurasi schema untuk fast-json-stringify const stringify = fastJsonStringify({ type: 'object', properties: { foo: { type: 'string' } } }); // Menggunakan fast-json-stringify untuk mengonversi objek JavaScript ke JSON const jsonStringified = stringify({ foo: 'bar' }); 5. Gunakan Linter dan Formatter untuk Kualitas Kode yang Konsisten 5Tips&TrikNodeJS_BuildWithAngga Linter dan formatter adalah alat yang membantu kita dalam menulis kode yang rapi, bersih, dan konsisten. Linter dapat mendeteksi dan memperbaiki kesalahan sintaks, gaya, atau logika di kode yang telah kita tulis. Formatter dapat mengatur dan memformat kode sesuai dengan aturan yang telah ditentukan. Kita dapat menggunakan modul seperti eslint, prettier, atau standard untuk mengimplementasikan linter dan formatter di Node.js. Pertama-tama kita install ESLint and Prettier: npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier Kemudian, buat file .eslintrc.json di direktori root proyek yang kita buat dan konfigurasikan ESLint dengan plugin Prettier { "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } Kesimpulan Pada artikel ini kita telah menjelajahi panduan singkat untuk meningkatkan performa aplikasi Node.js dengan lima tips praktis. Pertama, kita dapat menghindari operasi yang memblokir event loop dengan memanfaatkan teknik seperti async/await atau callback, serta memindahkan tugas CPU-intensif ke worker threads. Selanjutnya, optimalisasi waktu respons dapat dicapai dengan memanfaatkan caching, baik dalam memori atau menggunakan penyimpanan eksternal seperti Redis. Tips ketiga mengajak untuk menggunakan kompresi gzip dengan middleware seperti compression untuk mengurangi ukuran payload respons, meningkatkan efisiensi transfer data, dan menghemat bandwidth. Selain itu, optimalkan parsing dan stringifikasi JSON dengan modul seperti fast-json-parse dan fast-json-stringify. Terakhir, untuk menjaga konsistensi dan kualitas kode, kita dapat menggunakan Linter dan formatter seperti ESLint dan Prettier. Dengan mengikuti tips-tips ini, kita dapat meningkatkan kinerja, responsivitas, dan keberlanjutan kode dalam proyek Node.js. Apakah kamu tertarik dengan pembahasan mengenai Node.js? Ikuti Rekomendasi Kelas di BuildWithAngga Kelas Online Node JavaScript Dasar | BuildWithAngga dan Kelas Online Membuat Website Voucher Game dengan terintegrasi API VocaGame | BuildWithAngga. Mari kamu dapat berekplorasi bagaimana pembuatan project Node JS untuk meningkatkan skills dan pengalaman kamu dalam development sebuah aplikasi!!!

Halo, teman-teman! Kali ini kita akan berkenalan dengan Next JS, sebuah framework yang memudahkan kita dalam mengembangkan aplikasi web menggunakan React JS. Jangan khawatir, kita akan bahas dengan santai, ya! Next JS bukan hanya sekadar tambahan untuk React, tapi lebih dari itu. Mari kita mulai pembelajaran kita dengan Next JS dan lihat apa yang bisa kita pelajari bersama-sama! 🚀 Apa itu Next JS? Next JS adalah sebuah framework JavaScript, diciptakan secara khusus untuk bekerja bersama dengan React JS. Dalam analogi pengembangan web, Next JS dapat dianggap sebagai sekutu setia bagi React, yang membantu mengatasi berbagai tantangan yang muncul dalam proses pengembangan aplikasi web modern. Berikut adalah poin-poin penting tentang Next JS: Framework Full-Stack: Next JS bukan hanya membangun tampilan website front-end, tetapi juga menangani proses rendering dan pengelolaan database back-end. Dengan Next JS, kita tidak perlu menggunakan dua framework terpisah untuk mengembangkan website.Siap Produksi: Ketika kita melakukan setup proyek Next JS, proyek tersebut langsung siap untuk dijalankan tanpa perlu mengubah mode dari pengembangan ke produksi.Optimasi: Next JS mendukung pre-rendering (static generation dan server-side rendering) untuk meningkatkan performa dan SEO. Selain itu, Next JS memiliki fitur code splitting dan routing yang intuitif.Dukungan CSS: Next JS menyediakan dukungan untuk CSS dan Sass, serta berbagai library.Digunakan oleh Perusahaan Besar: Banyak perusahaan besar seperti TikTok, Hulu, Nike, AT&T, Ticketmaster, dan Marvel menggunakan Next JS untuk website mereka. Jadi, Next JS adalah framework yang membantu kita membangun website dengan lebih efisien dan handal. Yuk, bangun website dengan Next JS 🚀 Cara Install Project Next JS Setelah kita berkenalan dengan Next JS, sekarang saatnya kita mencoba meng-install project Next JS. Kamu bisa memasukkan perintah di bawah ini pada terminal: npx create-next-app@latest Pada saat instalasi, kamu harus mengisi pertanyaan berikut: What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/* Jika terminalnya sudah seperti gambar di bawah, maka instalasi sudah selesai. Menjalankan Project Next JS Setelah kita melakukan instalasi, sekarang kita akan mencoba menjalankan project. Sebelum menjalankan project kamu harus ada di dalam folder project nya terlebih dahulu. Jika belum, kamu bisa memasukkan perintah di bawah ini pada terminal: cd nama-project Jika kita sudah di dalam project-nya, sekarang mari kita jalankan project kita dengan memasukkan perintah di bawah ini pada terminal: npm run dev Berikut review gambar pada terminal jika kita menjalankan project-nya: Pada terminal di atas artinya kita sudah berhasil menjalankan project-nya dan bisa diakses melalui http://localhost:3000. Berikut adalah review gambar tampilan project pertama kita: Yeah, akhirnya kita sudah membuat first project kita menggunakan Next JS. Sekarang kamu bisa ubah tampilan web kamu sesuai kebutuhan kamu ya!. Kelebihan dan Kekurangan Next JS Next JS memiliki beberapa kelebihan yang patut diperhatikan: Lebih SEO Friendly: Pada Next JS, halaman website sudah terbentuk dalam format HTML saat browser memuatnya. Ini memudahkan mesin pencari seperti Google untuk mengindeks konten website. Jadi, website kita lebih ramah terhadap SEO.Setup Proyek Mudah: Next JS memudahkan setup project dan menghilangkan kebutuhan untuk konfigurasi manual. Ketika kita membuat project Next JS, project tersebut langsung siap untuk dijalankan tanpa perlu mengubah mode dari pengembangan ke produksi.Performa yang Baik: Dukungan pre-rendering (static generation dan server-side rendering) pada Next JS mengoptimalkan kecepatan loading halaman. Selain itu, fitur code splitting dan routing yang intuitif juga membantu meningkatkan performa.Deploy Mudah: Next JS dapat dengan mudah di-deploy di berbagai platform hosting. Ini memudahkan kita untuk mempublikasikan website dengan cepat. Namun, seperti halnya segala sesuatu, Next JS juga memiliki beberapa keterbatasan: Kurva Pembelajaran: Bagi developer yang baru mengenal React, ada sedikit kurva pembelajaran saat menggunakan Next JS, terutama jika kita ingin memanfaatkan server-side rendering secara optimal. Meskipun begitu, dengan kelebihan-kelebihan yang dimilikinya, Next JS tetap menjadi pilihan yang kuat untuk mengembangkan aplikasi web dengan React. Kesimpulan Next JS menonjol dengan kelebihan seperti kemudahan setup project, performa yang optimal berkat pre-rendering, dan kemudahan dalam deploy di berbagai platform hosting. Fitur SEO friendly memastikan indexabilitas konten oleh mesin pencari seperti Google, meningkatkan visibilitas situs. Namun, tantangan terletak pada kurva pembelajaran, terutama bagi pengembang baru dalam memahami konsep-konsep seperti server-side rendering. Meskipun demikian, dengan kelebihan yang ditawarkan, Next JS tetap menjadi pilihan menarik bagi developer yang mengutamakan performa dan efisiensi dalam pengembangan web modern. Jadi, setelah kita mengenal Next JS lebih dalam, kita sudah tau bahwa Next JS adalah pilihan yang kuat untuk mengembangkan aplikasi web dengan React. Dengan fitur-fitur unggul dan dukungan dari perusahaan besar, Next JS memudahkan pengembangan website yang efisien dan handal. Buat kamu yang ingin mempelajari fitur-fitur selanjutnya, kamu bisa ikut kelas di BuildWithAngga. Salah satunya yaitu, Kelas Online Gratis NextJS Basic ataupun yang berupa project base yaitu, Kelas Online Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game. So, ayo kita menjadi expert bersama BuildWithAngga🚀 See you guys!

Hai Sobat BWA!🙌 Testing adalah sebuah proses yang digunakan dalam pengembangan software untuk memeriksa dan memastikan kode bekerja dengan baik sesuai dengan yang diharapkan. Laravel, salah satu framework PHP yang populer, memiliki fitur testing yang sangat lengkap dan memudahkan developer dalam melakukan testing. Penasaran dengan bagaimana cara menggunakan fitur tersebut? Simak artikel berikut sampai habis ya! Apa itu PHP Unit? PHPUnit adalah kerangka kerja testing yang digunakan oleh Laravel untuk unit testing. Laravel mempunyai integrasi native dengan PHPUnit dan membuatnya mudah untuk menulis dan menjalankan tes. Unit testing ini sudah ter-install otomatis bersamaan saat kita meng-install Laravel. Fitur testing pada Laravel mendukung berbagai jenis testing, termasuk unit testing, feature testing, dan browser testing. Unit testing biasanya digunakan untuk menguji sebuah fungsi atau method secara individu. Sedangkan feature testing digunakan untuk menguji sebuah fitur secara keseluruhan. Browser testing digunakan untuk menguji aplikasi Laravel seperti yang akan dilakukan oleh user melalui browser. Secara umum, direktori tests pada Laravel terdiri dari 2 direktori yaitu sebagai berikut: Direktori Unit: Direktori ini difokuskan untuk menguji function, methods, atau class. Tes unit bertujuan untuk menguji apakah unit kode berjalan seperti yang diharapkan.Direktori Feature: Direktori feature difokuskan pada pegujian bagian yang lebih besar dari aplikasi. Contohnya untuk menguji bagaimana berbagai komponen dalam aplikasi berinteraksi satu sama lain. Jenis tes ini juga dapat digunakan untuk testing sebuah permintaan HTTP lengkap. Cara Membuat Test Baru pada Laravel Pada contoh kali ini, kita akan menguji fungsi ‘create’ pada aplikasi yang kita punya. Ikuti langkah-langkah berikut mulai dari awal ya! 1. Buat project Laravel dengan perintah berikut composer create-project laravel/laravel be_test 2. Buat tabel baru pada database dan jangan lupa untuk konfigurasi file .env 3. Buat file migration dengan mengetik perintah berikut pada command prompt php artisan make:migration create_task_table 4. Lalu, isikan file migration dengan code berikut <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateTaskTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('description')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('tasks'); } } 5. Jalankan perintah php artisan migrate untuk melakukan migrasi database 6. Kemudian buat model dengan menjalankan perintah php artisan make:model Task kemudian isikan kode berikut pada file model <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Task extends Model { use HasFactory; protected $fillable = [ 'title', 'description', ]; } 7. Setelah selesai membuat model, buat controller dengan menjalankan perintah php artisan make:controller TaskController 8. Buka file TaskController dan isikan kode berikut <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Task; class TaskController extends Controller { public function index() { $tasks = Task::all(); return view('tasks.index', compact('tasks')); } public function store(Request $request) { $request->validate([ 'title' => 'required', 'description' => 'required', ]); Task::create($request->all()); return redirect()->route('tasks.index')->with('success', 'Task created successfully.'); } public function edit(Task $task) { return view('tasks.edit', compact('task')); } public function update(Request $request, Task $task) { $request->validate([ 'title' => 'required', 'description' => 'required', ]); $task->update($request->all()); return redirect()->route('tasks.index')->with('success', 'Task updated successfully.'); } public function destroy(Task $task) { $task->delete(); return redirect()->route('tasks.index')->with('success', 'Task deleted successfully.'); } } 9. Setelah selesai membuat hal-hal di atas, sekarang kita akan membuat file untuk proses testing menggunakan PHPUnit. Jalankan perintah berikut untuk membuat file test php artisan make:test TaskTest --unit Folder TaskTest akan terletak dalam direktori tests/Unit 10. Buka file TaskTest.php dan salin kode berikut <?php namespace Tests\Unit; use Tests\TestCase; use App\Models\Task; use Illuminate\Foundation\Testing\RefreshDatabase; class TaskTest extends TestCase { use RefreshDatabase; /** @test */ public function it_can_create_a_task() { // Arrange $data = [ 'title' => 'Learn Laravel', 'description' => 'Write unit tests for Laravel applications' ]; // Act $task = Task::create($data); // Assert $this->assertInstanceOf(Task::class, $task); $this->assertEquals('Learn Laravel', $task->title); $this->assertEquals('Write unit tests for Laravel applications', $task->description); } } Test di atas adalah untuk melakukan uji coba apakah fungsi ‘create’ dapat berjalan dengan semestinya 11. Untuk menjalankan test, ketik perintah berikut pada command prompt php artisan test 12. Dan jika test yang dijalankan berhasil akan muncul seperti ini Kesimpulan Itulah penjelasan mengenai ‘Apa itu PHPUnit dan Bagaimana Cara Menggunakannya pada Laravel’. Dengan menggunakan fitur ini, testing dapat dilakukan dnegan lebih cepat dan tanpa ribet. Fitur ini sangat membantu dan memudahkan kita dalam menyusun Testing Script Automation. Semoga artikel ini bermanfaat dan bagi kalian yang tertarik untuk mempelajari tentang Laravel, kalian bisa mempelajarinya secara gratis melalui BuildWithAngga loh! Jangan lupa kepoin kelas-kelasnya ya! Sampai jumpa di artikel selanjutnya🙌

Hallo, temen-temen developer web. Dalam artikel ini, kita akan membahas langkah demi langkah tentang bagaimana membuat carousel menggunakan shadcn-ui. Mulai dari instalasi hingga penggunaan komponen carousel, kamu akan mendapatkan pemahaman kuat tentang bagaimana mengimplementasikannya dalam proyek web kamu. Buat kamu yang belum melakukan instalasi shadcn-ui di Proyek, kamu bisa melakukan instalasi terlebih dahulu pada artikel sebelumnya, yaitu "Cara Install shadcn-ui Pada Project Next JS". Mari kita mulai!🔥 Instalasi Carousel dan Card Untuk menggunakan komponen carousel pada shadcn-ui tentunya kamu harus instal terlebih dahulu. Kamu bisa menjalankan kode di bawah menggunakan terminal: npx shadcn-ui@latest add carousel Karena kita akan membuat carousel sebuah card maka kita perlu juga untuk instalasi card juga. Silahkan jalankan kode di bawah ini: npx shadcn-ui@latest add card Jika sudah berhasil di-install maka akan ada file carousel.tsx , card.tsx dan button.tsx pada folder components\ui seperti gambar di bawah ini: Jika sudah seperti gambar di atas maka instalasi sudah selesai. Penggunaan Komponen Carousel Sekarang, saatnya kita bahas bagaimana menggunakan carousel dari shadcn-ui. Ketika kamu sudah berhasil meng-install-nya, langkah berikutnya adalah memulai penggunaannya. 1. Langkah Pertama: Import Semua Komponen Carousel dan Card Jika kamu menggunakan Next JS versi App Router, kamu bisa memulai dari file page.tsx . Lalu import semua komponen dari carousel dan card, kamu bisa copy dan paste kode di bawah ini dan simpan paling atas: import { Card, CardContent } from "@/components/ui/card" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel" 2. Langkah Kedua: Gunakan Komponen Carousel Setelah kita import semua komponen dari carousel, selanjutnya adalah menggunakan komponen tersebut ke dalam user interface. Silahkan kamu copy kode di bawah: export default function Home() { return ( <main className="h-screen w-full flex flex-col justify-center items-center "> <Carousel className="w-full max-w-xs"> <CarouselContent> </CarouselContent> <CarouselPrevious /> <CarouselNext /> </Carousel> </main> ) } Pada kode di atas yang paling penting adalah kita harus masukan konten kita di dalam tag <CarouselContent></CarouselContent> . 3. Langkah Ketiga: Gunakan Komponen Card Ke Dalam Konten Carousel Pada contoh kali ini kita akan memasukkan sebuah card ke dalam konten yang akan di-jadikan sebuah carousel. Silahkan kamu copy kode di bawah ini dan paste di dalam tag <CarouselContent></CarouselContent> {Array.from({ length: 5 }).map((_, index) => ( <CarouselItem key={index}> <div className="p-1"> <Card> <CardContent className="flex flex-col aspect-square items-center justify-center p-6"> <img src="<https://buildwithangga.com/storage/assets/thumbnails/cnbbxwi2-Thumbnail%20(2).jpg>" /> <h6 className="my-4 font-semibold">Kelas Online Full-Stack JavaScript NextJS 2024 Developer: Bikin Website Toko Online</h6> <p>Konten ke {index + 1}</p> </CardContent> </Card> </div> </CarouselItem> ))} Lalu, di atas ada sebuah kode Array.from dengan diberikan panjang 5 lalu di-iterasi atau perulangan menggunakan map() . Artinya, Sebuah komponen card yang ada di dalam kode map() akan dilakukan perulangan, yang dimana hasil perulangan tersebut menghasilkan 5 komponen card yang akan dimunculkan di user interface. Jadi kita tidak perlu menulis banyak kode. Buat kamu yang belum paham penggunaan map() , alangkah baiknya kamu membaca artikel "Penggunaan Method Map pada Array JavaScript" terlebih dahulu agar tidak bingung. Berikut review sebuah gambar dari hasil kode di atas: Setelah mencoba praktek penggunaan carousel, sekarang kamu sudah bisa menampilkan konten dengan cara yang menarik dan interaktif di halaman web kamu. Dengan menguasai cara menggunakan carousel, kamu dapat dengan mudah membuat tampilan yang dinamis dan memikat bagi pengunjung situs web kamu. Penutup Salah satu keuntungan menggunakan carousel adalah memberikan pengalaman pengguna yang lebih interaktif dan menarik. Dengan menggunakan carousel, kamu dapat menampilkan banyak konten dalam satu area tanpa harus mengorbankan ruang pada halaman. Sudah selesai, ya! Kamu telah mengeksplorasi cara membuat carousel menggunakan shadcn-ui. Itu adalah langkah besar dalam membangun situs web yang menarik dan interaktif bagi pengunjung. Dengan carousel, kamu bisa menampilkan konten dengan cara yang menarik dan dinamis. Buat kamu yang ingin cepat-cepat menjadi expert, di BuildWithAngga telah menyediakan kelas-kelas berupa project base dari yang gratis hingga berbayar!. Yang dimana kamu akan mendapatkan materi-materi yang belum pernah kamu pelajari dan bisa dijadikan sebuah portfolio. Jika kamu ingin tau bagaimana cara membuat website e-commerce, langsung saja cek Kelas Online Full-Stack JavaScript NextJS 2024 Developer: Bikin Website Toko Online. So, ayo kita menjadi expert bersama BuildWithAngga🚀 See you guys!

Hallo, temen-temen developer web. Dalam artikel ini, kita akan membahas langkah demi langkah tentang bagaimana membuat hover card menggunakan shadcn-ui. Mulai dari instalasi hingga penggunaan komponen hover card. Dengan hover card, pengguna bisa melihat informasi tambahan atau detail tentang suatu item hanya dengan mengarahkan kursor mouse ke atasnya. Misalnya, saat kamu me-navigasi ke gambar produk di toko online, hover card bisa menampilkan detail harga, ulasan, dan opsi pembelian tanpa harus mengklik lebih lanjut. Buat kamu yang belum melakukan instalasi shadcn-ui di Proyek, kamu bisa melakukan instalasi terlebih dahulu pada artikel sebelumnya, yaitu "Cara Install shadcn-ui Pada Project Next JS". Instalasi Hover Card Agar kita bisa menggunakan hover card, kita harus meng-install-nya terlebih dahulu komponen hover card. Kamu bisa jalankan teks di bawah ini menggunakan terminal: npx shadcn-ui@latest add hover-card Jika sudah berhasil di-install maka otomatis akan generate folder baru bernama components\ui dan berisikan file bernama hover-card.tsx seperti gambar di bawah ini: Jika sudah seperti gambar di atas maka instalasi sudah selesai. Penggunaan Komponen Hover Card Sekarang saatnya kita bahas bagaimana menggunakan hover card dari shadcn-ui. Ketika kamu sudah berhasil meng-install-nya, langkah berikutnya adalah memulai penggunaannya. 1. Langkah Pertama: Import Semua Komponen Hover Card Jika kamu menggunakan Next JS versi App Router, kamu bisa memulai dari file page.tsx . Lalu import semua komponen dari hover card, kamu bisa copy dan paste kode di bawah ini dan simpan paling atas: import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card" Sebelum kita menggunakan komponennya, mari kita bahas terlebih dahulu komponen HoverCard , HoverCardContent , dan HoverCardTrigger : HoverCard: Kamu bisa memikirkan HoverCard sebagai wadah untuk semua informasi atau konten tambahan yang ingin kamu tampilkan kepada pengguna saat mereka melakukan hover.HoverCardContent: HoverCardContent adalah bagian dari HoverCard yang berisi konten tambahan atau informasi yang ingin kamu tampilkan kepada pengguna. Ini bisa berupa teks, gambar, atau bahkan kombinasi keduanya. Isi HoverCardContent akan muncul ketika pengguna mengarahkan kursor mouse ke HoverCard.HoverCardTrigger: HoverCardTrigger adalah elemen yang memicu atau mengaktifkan tampilan HoverCardContent saat pengguna melakukan hover di atasnya. Sudah pahamkan? Mari kita lanjut ke penggunaan🔥 2. Langkah Kedua: Gunakan Komponen Hover Card Setelah kita import semua komponen hover card, selanjutnya adalah menggunakan komponen tersebut ke dalam user interface. Silahkan kamu copy kode di bawah: export default function Home() { return ( <main className="h-screen w-full flex flex-col justify-center items-center"> <HoverCard> <HoverCardTrigger>What Is BuildWithAngga?</HoverCardTrigger> <HoverCardContent> </HoverCardContent> </HoverCard> </main> ) } Pada kode di atas kita telah menggunakan komponen dari hover card dan hanya baru mengisikan komponen tag <HoverCardTrigger> </HoverCardTrigger> 3. Langkah Ketiga: Buat Konten Hover Card Selanjutnya adalah kita harus membuat konten hover card di dalam tag <HoverCardContent></HoverCardContent> . Kamu bisa copy kode di bawah ini: <div className="flex space-x-4 p-4"> <img src="<https://buildwithangga.com/themes/front/images/logo_bwa_new.svg>" className="w-[60px] h-[60px]" alt="logo" /> <div> <h6 className="font-semibold text-sm mb-1">BuildWithAngga</h6> <p className="text-sm text-muted-foreground">BuildWithAngga menyediakan kelas UI/UX design, Web Development, dan Freelancer untuk pemula.</p> </div> </div> Berikut review sebuah gambar dari hasil kode di atas: Penutup Hover card memiliki keunggulan yang memungkinkan pengguna untuk melihat informasi tambahan dengan cepat tanpa harus meninggalkan halaman. Selain itu, hover card juga membantu mengatur tata letak halaman dengan cara yang lebih estetis dan efisien, memastikan informasi penting tetap terlihat namun tidak mengganggu pengalaman pengguna secara keseluruhan. Nah, begitulah cara kamu bisa membuat hover card menggunakan shadcn-ui! Gimana, gampang kan? Dengan langkah-langkah yang udah kamu ikuti tadi, sekarang kamu udah bisa bikin situs web-mu makin keren dengan hover card yang interaktif. Buat kamu yang ingin tidak sabar menjadi expert! Di BuildWithAngga telah menyediakan kelas-kelas berupa project base dari yang gratis hingga berbayar!. Yang dimana kamu akan mendapatkan materi-materi yang belum pernah kamu pelajari dan bisa dijadikan sebuah portfolio. Jika kamu ingin tau bagaimana cara membuat website Job Portal, langsung saja cek Kelas Online Full-Stack JavaScript Next JS Developer: Build Job Portal Website. So, ayo kita menjadi expert bersama BuildWithAngga🚀 See you guys!

Pada saat membangun aplikasi yang solid dan handal, sangat penting untuk mempertimbangkan penanganan error dengan serius. Bahasa pemrograman Go memiliki pendekatan yang unik terhadap penanganan error yang memungkinkan pengembang untuk mengelola error secara efisien dan ekspresif. Konsep ini merupakan bagian integral dari praktik pengembangan yang baik dalam Go. Apa itu Error Handling? Error handling adalah proses dalam pemrograman yang berfokus pada penanganan dan manajemen error yang mungkin terjadi selama eksekusi program. Ini mencakup identifikasi, penanganan, dan pelaporan error agar aplikasi dapat berjalan dengan lancar dan dapat diandalkan. Di Go, error handling dibangun di sekitar konsep nilai yang disebut error. Error adalah tipe data dasar yang mewakili kondisi yang tidak normal atau kegagalan dalam eksekusi suatu fungsi. Pengembang dapat menggunakan nilai error untuk mengevaluasi keadaan program dan mengambil tindakan yang sesuai. Pendekatan Go terhadap Error Handling Go memiliki pendekatan yang jelas dan konsisten dalam penanganan error. Di Go, hampir setiap fungsi yang berpotensi menghasilkan error akan mengembalikan dua nilai: nilai aktual dan nilai error. Ini memungkinkan pemanggil fungsi untuk memeriksa apakah operasi berhasil atau gagal, dan jika gagal, alasannya. Misalnya, pertimbangkan fungsi os.Open yang digunakan untuk membuka file: Dalam contoh di atas, os.Open mengembalikan dua nilai: file yang berhasil dibuka dan error (jika ada). Pemeriksaan if err != nil digunakan untuk menentukan apakah error terjadi. Jika iya, kode dalam blok if akan menangani error tersebut. Pengelolaan Error Lanjutan Selain menggunakan pengecekan error dengan if, Go juga menyediakan cara lain untuk mengelola error dengan lebih rinci. Salah satunya adalah dengan menggunakan blok defer untuk menangani operasi pembersihan yang diperlukan, seperti menutup file atau koneksi, setelah selesai menggunakan sumber daya tersebut. Dalam contoh di atas, file.Close() akan dipanggil secara otomatis ketika fungsi tempat defer ditempatkan selesai dieksekusi, bahkan jika terjadi error di antara. Mengkustomisasi Pesan Error Go memungkinkan pengembang untuk membuat pesan error yang lebih deskriptif dan informatif dengan menggunakan paket errors. Paket ini menyediakan fungsi New untuk membuat nilai error baru dengan pesan yang ditentukan oleh pengguna. Dalam contoh di atas, jika pembagian dengan nol terjadi, fungsi divide akan mengembalikan error baru dengan pesan yang sesuai. Penanganan Error Hierarkis Go juga memungkinkan pengembang untuk mengelompokkan dan mengkategorikan jenis error dengan menggunakan tipe data yang disesuaikan. Ini memungkinkan penanganan error yang lebih terstruktur dan informatif. Dalam contoh di atas, MyError adalah tipe data kustom yang mengimplementasikan interface error, sehingga dapat digunakan sebagai nilai error. Ini memberikan fleksibilitas tambahan dalam mengelola jenis-jenis error yang berbeda. Kesimpulan Penanganan error adalah aspek penting dari pengembangan perangkat lunak yang handal dan robust. Dalam Go, pendekatan yang jelas dan konsisten terhadap penanganan error memungkinkan pengembang untuk mengelola error dengan efisien dan ekspresif. Dengan memahami konsep-konsep dasar seperti nilai error, pengelolaan error lanjutan dengan defer, dan pembuatan pesan error yang disesuaikan, pengembang dapat meningkatkan kualitas perangkat lunak yang mereka buat dan membuatnya lebih dapat diandalkan. Semoga dengan pemahaman Go, Kamu lebih siap untuk menghadapi tantangan dalam pengembangan aplikasi Go yang lebih kompleks. Jangan ragu untuk terus belajar dan menjelajahi fitur-fitur menarik dalam bahasa Go! Dan untuk pengalaman belajar yang lebih mendalam, yuk bergabung di Build with Angga dan kembangkan keterampilan pemrograman Go Kamu bersama komunitas yang solid dan dukungan dari instruktur ahli. Mari bergabung dan berkembang bersama-sama! 🚀 BuildWithAngga

Pada artikel kali ini kita akan membahas penggunaan method forEach() yang ada pada Array Prototype JavaScript. Buat kamu yang belum belajar JavaScript dasar, kamu bisa belajar terlebih dahulu ya di Kelas JavaScript ES6 Dasar dan buat kamu yang ingin belajar method forEach() alangkah baiknya membaca artikel sebelumnya, yaitu "Memahami Array Prototype dalam JavaScript". Kamu pernah engga terjebak dalam aliran data di dalam array JavaScript dan bertanya-tanya ada cara yang efisien untuk menangani setiap elemennya? Nah, kamu harus tau bahwa ada method JavaScript untuk melakukan iterasi dengan efisien dan mudah, yaitu dengan method forEach. Di dunia pemrograman JavaScript, terkadang kita berhadapan dengan tumpukan data yang membingungkan. Namun, jangan khawatir! Metode forEach adalah method terbaik kamu dalam menavigasi array dan melakukan tugas-tugas yang diperlukan pada setiap elemennya. Pengenalan Method forEach Nah, mari kita mulai dengan pembicaraan tentang method forEach . Jadi, bayangkan kamu punya sebuah tim yang terdiri dari sekelompok orang. Sekarang, kamu ingin memberi tugas kepada setiap orang dalam tim tersebut, tapi kamu tidak ingin capek-capek menyuruh mereka satu-satu. Nah, itulah saat nya method forEach digunakan! Jadi, dalam dunia JavaScript. Method forEach adalah cara efisien untuk memberikan tugas kepada setiap elemen pada dalam sebuah array. Ini seperti kamu memberi tugas ke setiap orang dalam tim kamu dengan satu perintah, dan kemudian mereka semua melakukannya tanpa kamu perlu berkali-kali menginstruksi satu per satu. Sangat praktis, bukan? Pokoknya, dengan forEach, kamu bisa menjalankan sebuah fungsi untuk setiap elemen dalam array. Jadi, tidak perlu repot-repot menggunakan loop atau instruksi berulang kali. Semua dilakukan dengan mudah dan cepat! Penggunaan Method forEach Method forEach memungkinkan kamu untuk menjalankan sebuah fungsi pada setiap elemen dalam sebuah array. Ini sangat berguna ketika kamu ingin melakukan operasi pada setiap elemen dalam array tanpa perlu menuliskan loop for secara manual. Contohnya, kita punya sebuah array numbers yang berisi beberapa angka: let numbers = [1, 2, 3, 4, 5]; Sekarang, kita ingin menampilkan setiap angka dalam array tersebut ke dalam console. Kita bisa menggunakan forEach untuk melakukannya: numbers.forEach(function(number) { console.log(number); }); Gambar dari hasil console di atas Dalam contoh di atas, forEach akan menjalankan function yang diberikan pada setiap elemen dalam array numbers. Function tersebut akan menerima satu argumen, yaitu nilai dari elemen saat ini dalam iterasi. Kita menyebutnya number di sini, tetapi kamu bisa memberikan nama apa pun yang kamu inginkan. Fungsi tersebut kemudian memanggil console.log(number) untuk menampilkan setiap angka ke dalam console. Ini sangat berguna karena kita tidak perlu repot membuat variabel iterator dan mengelola iterasi secara manual. Method forEach menangani semuanya untuk kita. Contoh Penggunaan Method forEach Selanjutnya Misalkan kamu memiliki sebuah aplikasi yang menampilkan daftar buah-buahan favorit pengguna. Dalam kode JavaScript, kamu memiliki array yang berisi nama-nama buah seperti apple, banana, mango, dan orange. Sekarang, kamu ingin mengubah format penampilan nama-nama tersebut dengan nembahkan kata I Like di depan setiap nama buah, sehingga hasil nya menjadi lebih ramah dan menarik bagi pengguna. Mari kita buat sebuah array fruits yang berisikan daftar nama-nama buah: Let's write code🚀 const fruits = ['apple', 'banana', 'mango', 'orange']; Sekarang, kamu ingin menampilkan setiap nama buah dalam array tersebut dengan tambahan kata I Like di depan setiap nama buahnya. Kamu dapat melakukannya dengan menggunakan method forEach seperti ini: fruits.forEach((fruitName) => { console.log('I like ' + fruitName); }); Gambar dari hasil console di atas Dalam contoh ini, forEach digunakan untuk melakukan iterasi pada setiap elemen dalam array fruits. Function yang diberikan kepada forEach kemudian dipanggil untuk setiap elemen dalam array, di mana kita menambahkan kata I Like di depan setiap nama buah dan menampilkannya menggunakan console.log. Keuntungan Menggunakan Method forEach Nah, alasan utama kamu mungkin ingin menggunakan method forEach di JavaScript adalah kemudahan dan kejelasannya. Bayangkan aja, dengan forEach, kamu bisa melewati setiap elemen dalam array tanpa perlu repot mengatur variabel iterasi atau mengkhawatirkan batasan loop. Misalnya, daripada harus menghitung dari 0 sampai panjang array untuk mengakses setiap elemennya, kamu bisa langsung memanggil forEach dan melakukan sesuatu pada setiap elemen. Ini membuat kode jadi lebih bersih dan lebih mudah dipahami. Selain itu, dengan menggunakan forEach, kamu juga mengurangi kemungkinan terjadinya kesalahan. Saat kamu menggunakan loop tradisional seperti for atau while, terkadang kamu bisa lupa untuk menambah atau mengurangi variabel iterasi, atau bahkan bisa lupa menambah tanda kurung kurawal dengan benar. Tapi dengan forEach, semua itu diatur oleh JavaScript untuk kamu, jadi kamu bisa lebih fokus pada apa yang ingin kamu lakukan dengan setiap elemen array. Jadi, singkatnya, menggunakan method forEach bisa membuat kode kamu lebih bersih, lebih mudah dipahami, dan lebih rentan terhadap kesalahan. Jadi, ngapain pake loop yang ribet kalau ada forEach, kan? Kesimpulan Setelah membahas berbagai aspek tentang penggunaan method forEach pada array JavaScript, kita dapat menyimpulkan bahwa method ini sangat berguna dalam memanipulasi dan mengelola data dalam sebuah array. Dengan menggunakan forEach, kamu dapat dengan mudah menjalankan sebuah function pada setiap elemen dalam array tanpa perlu repot dengan pengaturan index atau kondisi loop. Dengan demikian, penggunaan method forEach menjadi salah satu praktik terbaik dalam pengembangan JavaScript modern. Dengan memahami dan menguasai method ini, kamu dapat meningkatkan produktivitas dalam menulis kode dan membuat aplikasi JavaScript yang lebih baik dan lebih efisien. Semoga penjelasan dan contoh yang telah diberikan dapat memberikan manfaat dan menginspirasi kamu untuk terus mengeksplorasi bahasa pemrograman JavaScript. See you guys! ✨

Hai Sobat BWA!🙌 Seperti yang kita tau, Laravel merupakan salah satu framework PHP yang populer hingga saat ini. Dengan banyaknya fitur yang dimilikinya, dapat memudahkan kita untuk mengembangkan sebuah aplikasi website. Salah satu fitur yang dimiliki oleh Laravel adalah fitur autentikasi. Dan pada artikel kali ini, kita akan membahas tentang fitur autentikasi tersebut yaitu JWT atau Json Web Token. Simak artikel ini sampai habis ya! Pengenalan JWT JWT atau Json Web Token adalah sebuah token yang digunakan untuk mengotentikasi permintaan API pada Laravel. Dengan menggunakan JWT, kita dapat membuat token yang akan digunakan oleh pengguna untuk mengakses API kita. Token ini akan berisi informasi yang dapat kita gunakan untuk mengidentifikasi pengguna dan mengizinkan akses ke sumber daya yang terproteksi. JWT terdiri dari tiga bagian utama yaitu sebagai berikut: 1. Header Bagian ini berisi informasi tentang jenis token dan algoritma yang digunakan. { "alg": "HS256", "typ": "JWT" } 2. Payload Payload berisi informasi tentang data yang ingin kita kirim dengan token. Contohnya seperti id user, role, expired date, dll. { "sub": "1234567890", "name": "John Doe", "admin": true } 3. Verify Signature Bagian ini digunakan untuk memverifikasi integritas data. Bagian ini adalah gabungan dari bagian header dan payload yang ditambahkan kode rahasianya. HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret) Cara Menginstall JWT 1. Jalankan text editor dan buka folder Laravel yang akan di-install JWT 2. Pada command prompt, install JWT dengan mengetik perintah berikut: composer require tymon/jwt-auth:dev-develop --prefer-source 3. Buka file config/app.php dan tambahkan kode berikut di dalam array providers Tymon\JWTAuth\Providers\LaravelServiceProvider::class, Lalu, tambahkan facades berikut ke dalam array aliases 'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class, 'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class, 4. Publish package JWT dengan menjalankan perintah berikut php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider" 5. Setelah selesai, jalankan perintah berikut php artisan jwt:secret Cara Implementasi JWT 1. Buka file User.php (app/User.php) dan tambahkan kode berikut: use Illuminate\Foundation\Auth\User as Authenticatable; use Tymon\JWTAuth\Contracts\JWTSubject; Dan kode berikut pada bagian bawah public function getJWTIdentifier() { return $this->getKey(); } public function getJWTCustomClaims() { return []; } 2. Tambahkan method register pada class UserController.php public function register(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', 'password' => 'required|string|min:6|confirmed', ]); if($validator->fails()){ return response()->json($validator->errors()->toJson(), 400); } $user = User::create([ 'name' => $request->get('name'), 'email' => $request->get('email'), 'password' => Hash::make($request->get('password')), ]); $token = JWTAuth::fromUser($user); return response()->json(compact('user','token'),201); } 3. Tambahkan method login pada class UserController.php public function login(Request $request) { $credentials = $request->only('email', 'password'); try { if(! $token = JWTAuth::attempt($credentials)) { return response()->json(['error' => 'invalid_credentials'], 400); } } catch (JWTException $e) { return response()->json(['error' => 'could_not_create_token', 500]); } return response()->json(compact('token')); } 4. Tambahkan method getAuthenticatedUser public function getAuthenticatedUser() { try { if (! $user = JWTAuth::parseToken()->authenticate()) { return response()->json(['user_not_found'], 404); } } catch (Tymon\JWTAuth\Exceptions\TokenExpiredException $e) { return response()->json(['token_expired'], $e->getStatusCode()); } catch (Tymon\JWTAuth\Exceptions\TokenInvalidException $e) { return response()->json(['token_invalid'], $e->getStatusCode()); } catch (Tymon\JWTAuth\Exceptions\JWTException $e) { return response()->json(['token_absent'], $e->getStatusCode()); } // return response()->json(compact('user')); return response()->json([ 'status' => 1, 'message' => 'Succes login!', 'data' => $user ]); } 5. Membuat Route untuk Autentikasi API Pada command prompt, tambahkan perintah berikut membuat JWTMiddleware yang akan melindungi route API dari akses yang tidak terautentikasi php artisan make:middleware JwtMiddleware 6. Buka file JwtMiddleware.php (app/Http/Middleware/JwtMiddleware.php). Ubah barisan kode menjadi seperti berikut: <?php namespace App\Http\Middleware; use Closure; use JWTAuth; use Exception; use Tymon\JWTAuth\Http\Middleware\BaseMiddleware; class JwtMiddleware extends BaseMiddleware { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { try { $user = JWTAuth::parseToken()->authenticate(); } catch (Exception $e) { if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException){ return response()->json(['status' => 'Token is Invalid']); }else if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException){ return response()->json(['status' => 'Token is Expired']); }else{ return response()->json(['status' => 'Authorization Token not found']); } } return $next($request); } } 7. Buka Kernel.php (app/Http/Kernel.php) dan tambahkan baris kode berikut di array routeMiddleWare 'jwt.verify' => \App\Http\Middleware\JwtMiddleware::class, 8. Buka api.php, kemudian modifikasi isinya menjadi seperti berikut <?php use Illuminate\Http\Request; Route::post('/register', 'UserController@register'); Route::post('/login', 'UserController@login'); Route::group(['middleware' => ['jwt.verify']], function () { Route::get('/kelas', 'KelasController@show'); //contoh Route::post('/kelas', 'KelasController@store'); }); Kesimpulan Nah, itulah ‘Cara Install dan Implementasi JWT pada Laravel’. Setelah meng-install dan mengimplementasi JWT, kalian bisa mencoba API yang kalian buat dengan aplikasi Postman. Dengan menggunakan JWT, kita dapat membuat token yang akan digunakan oleh pengguna untuk mengakses API kita. Token ini akan berisi informasi yang dapat kita gunakan untuk mengidentifikasi pengguna dan mengizinkan akses ke sumber daya yang terproteksi. Eitss, bagi kalian yang tertarik untuk mempelajari tentang JWT pada Laravel, kalian bisa mempelajarinya secara gratis melalui BuildWithAngga loh! Jangan lupa kepoin kelas-kelasnya ya! Sampai jumpa di artikel selanjutnya🙌

Hello, fellow developers! Tahukah kalian bahwa chrome banyak menyediakan ekstensi yang dapat membantu frontend developer dalam meningkatkan produktivitas dan mempermudah proses pengembangan web? Mulai dari alat bantu efektivitas desain, hingga ekstensi untuk analisis performa, Chrome memiliki ekosistem yang kaya dengan tools yang dapat mempercepat setiap tahapan pada pengembangan frontend. Beberapa ekstensi Chrome berikut dapat mengubah cara kalian bekerja dan membuat pengalaman pengembangan web menjadi lebih menyenangkan😊. Pada artikel ini kita akan mengulas “10 Rekomendasi Ekstensi Chrome yang Tidak Boleh Dilewatkan oleh Frontend Developer!” Without futher do, let's explore all these essential Chrome extensions! 1. Daily.dev Daily.dev adalah sebuah platform online yang dirancang khusus untuk mempermudah developer dalam proses belajar, kolaborasi, dan pertumbuhan secara profesional. Ekstensi ini sangat cocok untuk Frontend Developer karena memungkinkan kallian untuk: Mendapatkan informasi termasuk berita, ulasan, dan panduan terkini tentang teknologi web dan pengembangan.Mengumpulkan artikel dan tutorial yang relevan dengan subjek atau topik pilihan.Melakukan diskusi dengan developer lain yang aktif.Meningkatkan produktivitas dan efisiensi dalam proses belajar dan kolaborasi. Penasaran gimana isinya? Kalian bisa langsung mengunduh ekstensi tersebut melaui Daily.dev Chrome Extension. 2. Wappalyzer Jika kalian ingin mengetahui rahasia dibalik suatu halaman web, alat ini adalah salah satu cara untuk mengetahuinya! Wappalyzer adalah sebuah alat yang memungkinkan pengguna untuk mengidentifikasi teknologi yang digunakan pada suatu situs web. Alat ini dapat digunakan untuk mengetahui teknologi apa saja yang digunakan pada suatu situs web, seperti CMS, platform e-commerce, web analytics tools, dan masih banyak lagi. Wappalyzer menyediakan beberapa fungsi utama yang berguna dalam menganalisis teknologi pada suatu situs web. Fungsi-fungsi tersebut antara lain: Analisis teknologi pesaing untuk mendapatkan wawasan dalam strategi pesaing.Optimasi kinerja dengan mengidentifikasi plugin, pustaka JavaScript, dan teknologi lain yang mempengaruhi kinerja situs.Memantau keamanan dengan memberikan informasi tentang potensi kerentanan keamanan berdasarkan teknologi yang digunakan.Membantu dalam pemilihan teknologi dan framework yang sesuai untuk proyek pengembangan.Melacak perubahan teknologi pada suatu situs web seiring waktu.Menyediakan akses instan melalui API untuk informasi teknologi, tumpukan teknologi, detail perusahaan, dan informasi kontak. Wappalyzer tersedia sebagai ekstensi untuk browser Chrome yang bisa kalian dapatkan melalui Wappalyzer Chrome Extension. 3. Fonts Ninja Fonts Ninja dapat membantu para developer dalam hal identifikasi font yang digunakan pada suatu situs web. Dengan menggunakan Fonts Ninja, kalian dapat dengan cepat mengetahui jenis font yang digunakan pada suatu situs web dan mencoba font tersebut secara legal. Hal ini dapat membantu para developer dalam mempercepat proses desain dan meningkatkan keterampilan desain. Berikut yang dapat kalian lakukan dengan Fonts Ninja: mengidentifikasi font,melihat pratinjau, dan mengekstrak informasi font seperti warna dan ukuran.menyesuaikan font yang kalian temui, menjelajahi berbagai opsi font, dan menganalisis elemen font pada halaman web.memungkinkan untuk membuat koleksi font favorit berupa bookmark untuk referensi di kemudian hari. Dengan menambahkan Extension Fonts Ninja ke web browser, kini kalian dapat meningkatkan keterampilan desain dan mempercepat proses desain web kalian. 4. ColorZilla ColorZilla adalah sebuah ekstensi untuk browser Chrome yang membantu para pengembang web dan desainer grafis dalam tugas-tugas yang berkaitan dengan warna, baik yang sederhana maupun yang kompleks. Jika kalian menemui situs web dengan palet warna yang menarik, alat ini membantu mengidentifikasi kombinasi atau warna individual dalam hitungan detik! Beberapa manfaat dan fitur dari ColorZilla antara lain: Color Picker untuk memilih warna dari halaman web dan menyalin kode warna ke clipboard.Eye Dropper untuk memilih warna dari halaman web dengan akurasi pixel-per-pixel.Gradient Generator untuk membuat gradient CSS dengan mudah dan cepat.Webpage Color Analyzer untuk menganalisis palet warna dari halaman web dan mengekspor palet tersebut ke format yang berbeda.Palette Viewer untuk melihat palet warna yang telah disimpan dan mengelolanya.Color History untuk melihat riwayat warna yang telah dipilih sebelumnya. Masih banyak fitur-fitur lainnya yang tersedia pada ColorZilla. Kalian dapat mencoba langsung dengan mengunduhnya melalui link Install ColorZilla Extension. 5. Web Developer Checklist Web Developer Checklist merupakan alat yang berguna untuk monitoring suatu web baik dari segi nilai SEO, kualitas code, tampilan mobile, serta performance. Tools ini memberikan daftar periksa mengenai semua hal yang perlu diselesaikan pada sebuah halaman sebelum dipublikasikan. Checklist ini membantu memastikan bahwa tidak ada langkah penting yang terlewat, menjaga konsistensi dalam desain dan fungsionalitas, serta mengidentifikasi masalah potensial secara dini. Web Developer Checklist membantu kita sebagai frontend developer memastikan bahwa semua komponen, termasuk komponen kecil sekalipun tidak dilewatkan diantaranya, seperti: Halaman 404FaviconBroken linksSitemapdll. Komponen-kompenen tersebut membutuhkan waktu yang sangat sedikit untuk dibangun, namun sering kali mereka terlupakan ketika berfokus pada gambaran yang lebih besar. Nah! biar web kalian teteap konsisten dan tidak ada komponen yang terlupakan, jangan lupa untuk instal Web Developer Checklist Extension! 6. React Developer Tools React Developer Tools dirancang khusus untuk library JavaScript React yang bersifat open source. Jika kalian mengembangkan web dengan React, ekstensi ini membantu kalian melakukan inspeksi pada library sesuai kebutuhan. Ekstensi ini memungkinkan kalian untuk melakukan: Inspeksi dan ubah struktur komponen React yang membentuk halaman.Verifikasi props, state, hooks, dan lainnya untuk setiap komponen.Detektasi apakah React.js digunakan dalam sebuah aplikasi. Ketika ekstensi ini terpasang pada browser, kalian akan melihat dua ikon muncul di toolbar Chrome. Satu untuk Komponen (Components) dan yang lainnya untuk Profiler. Komponen menunjukkan apa yang digunakan React pada halaman tersebut, dan Profiler menampilkan data kinerja. Untuk menginstal ekstensi ini, kalian dapat mengunjungi Chrome Web Store dan mencarinya dengan kata kunci "React Developer Tools" atau kunjungi link React Developer Tools Extension. 7. Page Ruler Page Ruler adalah ekstensi Chrome yang berguna untuk mengukur elemen-elemen pada halaman web secara akurat. Cara menggunakan Page Ruler cukup sederhana. Setelah kalian memasang ekstensi ini, pilih ikon penggaris di toolbar Chrome hingga berubah menjadi warna oranye. Selanjutnya, halaman akan memudar, memungkinkan untuk menggambar area yang ingin diukur. Page Ruler kemudian akan menampilkan pengukuran yang tepat dari area tersebut dalam kotak popup kecil di sampingnya. Ekstensi ini berguna ketika kalian perlu mengukur elemen-elemen pada halaman web dengan presisi, membantu dalam desain atau pengembangan web. Meskipun sederhana, Page Ruler dapat memberikan informasi yang akurat dan membantu meningkatkan pengalaman pengguna dan desain situs web. 8. Window Resizer Window Resizer adalah ekstensi Chrome yang berguna untuk mengubah ukuran jendela browser secara cepat. Ekstensi ini memungkinkan pengguna untuk menguji responsivitas suatu situs web dengan mudah, menyesuaikan ukuran jendela browser sesuai dengan berbagai perangkat. Berikut adalah beberapa fitur utama dari Window Resizer: Preset Perangkat: Ekstensi ini menyediakan berbagai preset perangkat seperti iPhone, iPad, MacBook, dan perangkat Android lainnya. Pengguna dapat memilih preset yang sesuai untuk mengubah ukuran jendela browser secara otomatis.Kustomisasi Ukuran: Selain preset, Window Resizer juga memungkinkan pengguna untuk menentukan ukuran kustom untuk menguji responsivitas situs web pada berbagai resolusi.Opsi Orientasi: Pengguna dapat mengubah orientasi jendela antara tampilan potrait dan landscape untuk menguji responsivitas situs web pada perangkat dengan orientasi yang berbeda. Window Resizer sangat berguna bagi pengembang web dan desainer untuk memastikan bahwa situs web mereka responsif dan dapat diakses dengan baik di berbagai perangkat. Kalian dapat menginstal ekstensi ini melalui link berikut Instal Extension Window Resizer untuk memulai pengujian responsivitas situs web secara praktis. 9. Lighthouse Ekstensi Lighthouse adalah alat open-source yang dirancang untuk membantu pengembang web meningkatkan kinerja, kualitas, dan kebenaran aplikasi web. Alat ini dapat dijalankan melalui Chrome DevTools, baris perintah, atau sebagai modul Node. Saat melakukan audit pada halaman web, Lighthouse menjalankan serangkaian tes dan kemudian menghasilkan laporan tentang seberapa baik halaman tersebut berkinerja. Dari sini, pengguna dapat menggunakan tes yang gagal sebagai indikator tentang apa yang dapat dilakukan untuk meningkatkan aplikasi mereka. Beberapa audit yang disediakan oleh Lighthouse antara lain: Audit Kinerja: Mengukur kinerja halaman dan menemukan peluang untuk mempercepat waktu muat halaman.Audit Aksesibilitas: Menentukan apakah semua pengguna dapat mengakses konten dan menavigasi situs dengan efektif.Audit Best Practices: Meningkatkan kesehatan kode halaman web dengan mengikuti praktik terbaik.Audit SEO: Memastikan bahwa halaman web dioptimalkan untuk peringkat hasil mesin pencari.Audit PWA: Mengukur apakah situs web tersebut cepat, andal, dan dapat diinstal. Tools ini membantu kalian memantau kinerja situs, aksesibilitas, dan responsivitas mobile, memberikan wawasan tentang apa yang dilakukan dengan baik dan di mana perlu perbaikan. 10. CSS Viewer CSS Viewer adalah ekstensi Chrome yang sederhana namun sangat efektif bagi web developer. Sesuai dengan namanya, ekstensi ini menampilkan properti CSS dari suatu halaman saat kursor mouse diarahkan ke elemen tersebut. Sebuah jendela popup kecil akan muncul, menunjukkan data CSS yang membentuk elemen yang sedang diarahkan. Jika kalian ingin membuat tema WordPress yang sederhana atau tema yang modern dan kompleks, ini adalah ekstensi yang memudahkan identifikasi properti CSS kunci di mana pun kalian akan mengarahkan mouse. Berikut manfaat yang dapat kalian dapatkan dari ekstensi CSS Viewer: Melihat properti CSS yang diterapkan pada elemen tertentu.Menampilkan informasi seperti warna, ukuran, jenis huruf, dan properti CSS lainnya.Membantu pengembang web dalam memahami dan menganalisis desain halaman web.Memudahkan pengembang web dalam memeriksa dan memahami styling pada halaman web.Mengurangi waktu untuk mencari tahu properti CSS dengan cara tradisional. Untuk mengunduh ekstensi ini, kalian dapat mengunjungi Chrome Web Store dan mencarinya dengan kata kunci "CSS Viewer" atau langsung mengunjungi link berikut CSS Viewer Extension. Kesimpulan Ekstensi-ekstensi tersebut memberikan tambahan nilai yang signifikan dalam pengembangan frontend. Mulai dari alat pengukuran, identifikasi teknologi, hingga pemeriksaan performa, setiap ekstensi memiliki peran khususnya yang dapat meningkatkan efisiensi dan kualitas pengembangan. Meskipun kalian tidak harus memiliki tools tersebut, keberadaan ekstensi yang tepat dapat meningkatkan produktivitas para pengembang. Oleh karena itu, sangat disarankan kepada kalian untuk mengeksplor dan mencoba setiap ekstensi sesuai kebutuhan dan preferensi masing-masing. Jangan ragu untuk berbagi ekstensi favorit kalian atau memberikan rekomendasi, sehingga dapat memperkaya daftar ekstensi yang berguna bagi seluruh komunitas frontend developer. Last but not least! buat kalian yang ingin mengasah skill programming kalian, yuk join Kelas Gratis di BuildWithAngga. Kalian dapat memilih berbagai macam topic pembelajaran seputar web development mulai dari fundamental hingga advanced. Keep learning, growing and see you in the next article!😉