DEV Community: AibnuHibban

🚀 Bytedocs is Now Live for Laravel, Rust, and Go!

AibnuHibban — Thu, 02 Oct 2025 10:01:49 +0000

A few weeks ago I introduced Bytedocs, a modern alternative to Swagger. in my first article where I shared the vision behind it. 🚀

Today, I’m super excited to share the next step:

👉 Bytedocs now works in Laravel, Rust, and Golang!

Yes—multi-language support is no longer just a vision, it’s already happening.

🌍 Multi-Language Support in Action

Laravel → bytedocs-laravel
Rust → bytedocs-rust
Go → bytedocs-go

So whether you’re building APIs in PHP, shipping microservices in Go, or exploring Rust for blazing-fast backends—you can now plug in Bytedocs and get clean, modern API documentation instantly.

⚠️ Heads up: I’m still actively working on the official documentation for each language, so expect improvements, guides, and examples rolling out soon. Feedback is more than welcome 🙌.

🎯 Why This Matters

Swagger/OpenAPI is still the big standard, no doubt. But developers today don’t just want static docs—they want:

✅ Interactive docs (explore, test, run flows)

✅ Scenario runner (chain requests like login → create → fetch → delete)

✅ Future-ready testing (performance/load testing coming soon)

✅ AI-powered insights (ask AI about endpoints, no more param guessing)

Bytedocs is about developer experience first. Docs shouldn’t just sit there—they should work with you.

⚡ What’s Next

Documentation polish (step-by-step guides, examples, best practices)
More languages (Node.js, Python, maybe Java 👀)
Load testing
.. any suggestions?

🚀 Bytedocs: A Modern Alternative to Swagger

AibnuHibban — Wed, 24 Sep 2025 01:32:23 +0000

For years, Swagger has been the go-to for API documentation. And while it’s solid, let’s be honest—it feels kinda outdated in today’s developer workflow.

That’s why I built Bytedocs: a fresh, modern alternative to Swagger that not only documents your APIs but also helps you test, explore, and even stress-test them.

👉 Check it out: bytedocs.dev

🤔 What Makes Bytedocs Different?

Unlike traditional tools that stop at generating static docs, Bytedocs is designed to be multi-language, interactive, and developer-friendly from day one.

Here’s what it brings to the table:

📚 Modern API Documentation

Clean, responsive, and easy-to-use docs.
Looks great across devices.
Not just another Swagger clone.

🌍 Multi-Language Support

Dedicated repos for different stacks.
Example: bytedocs-laravel
More languages coming soon (Go, Node.js, etc.).

🎯 Scenario Runner

Group multiple endpoints into a single scenario.
Run complete flows in one click (e.g., login → create → fetch → delete).
Great for integration and workflow testing.

🤖 AI Assistant

Ask AI about your endpoints directly.
No more hunting through pages of docs to figure out required params.

⚡ Roadmap: Load & Performance Testing

Planned native integration with K6.
Run load tests without leaving your API docs.

🛠 Getting Started

Want to try it out? Start with the Laravel package:
👉 bytedocs-laravel

Installation is simple, and you’ll have your docs live in minutes.

🌐 The API Documentation Landscape

Swagger may be the most widely known, but it’s not the only player in the game:

Scalar: a newer open-source project with a sleek UI and growing community (~12k GitHub stars). Great for modern docs, but still focused mostly on visualization.
Redoc: clean and minimal OpenAPI renderer, often used for public-facing docs.
Stoplight: more of a design-first platform with collaboration features.
ReadMe / Bump.sh / Mintlify: commercial platforms that bring analytics, portals, and customization on top of docs.

These tools are all awesome in their own ways, but most of them stay within the boundary of “documentation”

That’s where Bytedocs is different—it’s not just another viewer for your OpenAPI spec. It’s a developer toolkit that connects docs with scenarios, AI, and testing.

🎯 The Vision

I don’t want Bytedocs to just be “Swagger 2.0”.
The goal is to make it the all-in-one developer tool for APIs:

Write less boilerplate
Get clearer insights
Test faster
Scale with confidence

🤝 Join the Journey

This is just the beginning. I’d love your feedback, contributions, and ideas.
👉 bytedocs.dev
👉 bytedocs-laravel

💡 With Bytedocs, API documentation is no longer static—it’s interactive, intelligent, and future-ready.

When Technical Excellence Meets Organizational Chaos: A Developer's Survival Guide

AibnuHibban — Wed, 23 Jul 2025 00:53:13 +0000

How I navigated a company merger that tested both my technical skills and professional resilience

Last year, I found myself in what I initially thought was a dream scenario: working on a multi-tenant healthcare management system that had grown from a small proof-of-concept to serving 78+ active tenants. As one of the original developers who built the system from the ground up, I felt proud of what we'd accomplished with our small but efficient team.

Then came the merger.

The Technical Foundation We Built

Our journey started when our team lead decided to use an existing clinic management system as the foundation for a new public health center management platform. While the base code wasn't perfect—PHP 7.4, some anti-patterns, and legacy decisions—it was workable. When our lead eventually moved on, our small team of three developers inherited both the codebase and the responsibility of scaling it.

What we got right:

Implemented Redis for caching and session management
Containerized the entire application with Docker
Optimized the infrastructure for easier deployment
Built a multi-tenant architecture that could scale horizontally

What became challenging:

All VMs pointing to a single database (classic bottleneck)
32 tenants running on a single 32-core VM (performance issues)
No load balancer implementation yet
Monolithic Laravel application serving both API and views

The performance issues were real. When you have 32 active healthcare facilities hitting the same VM simultaneously, even 32 cores aren't enough without proper load distribution.

The Merger Storm

Then our parent company decided to "optimize for efficiency." Multiple subsidiaries were consolidated into a single office space, divided only by room partitions. What should have been a smooth organizational restructure turned into a masterclass in how not to manage change.

The communication breakdown:

No clear announcement about the merger timeline
Job descriptions remained undefined for weeks
Reporting structures were unclear
Working hours weren't standardized (our team worked 9-5, others 8-5)
No transition planning or documentation

Suddenly, we found ourselves in a larger organization with three distinct divisions:

Research & Development - The innovation team
Product Development - Building core features (where I ended up)
Project Support - Handling live implementations and customizations

Red Flags That Made Me Nervous

During one of the first all-hands meetings with our new technical leadership, I heard statements that immediately raised red flags:

"We're going to build systems with zero errors."

While I appreciate the ambition for quality, anyone with real-world development experience knows that "zero errors" is an unrealistic goal. What's achievable is robust error handling, comprehensive monitoring, and quick recovery mechanisms.

"We'll create a framework that works for all programming languages."

This statement revealed a fundamental misunderstanding of how different programming languages work. Each language has its own paradigms, runtime environments, and ecosystems. What you can create are consistent design patterns, API standards, and architectural guidelines that adapt to different languages.

These statements, combined with feedback from colleagues who had worked with the incoming team, painted a picture of technical leadership that prioritized buzzwords over practical solutions.

The Performance Challenge: A Learning Experience

While dealing with organizational chaos, I still had real technical problems to solve. Our main application was struggling under load, and I needed to identify and fix the bottlenecks.

The diagnosis process:

Database analysis - Confirmed that having all VMs hit a single database was creating a chokepoint
Resource monitoring - Discovered that CPU wasn't the only constraint; memory and I/O were also factors
Application profiling - Found several N+1 query problems and inefficient caching strategies

The solution approach:

Implemented proper database connection pooling
Added read replicas for reporting queries
Optimized the most frequently used queries
Planned for horizontal scaling rather than just vertical scaling

Key lesson: Sometimes the obvious solution (add more CPU cores) isn't the right solution. Performance problems are often architectural, not just resource-based.

Lessons Learned: Technical and Professional

Technical Insights

Multi-tenancy requires careful planning - Don't just throw more resources at performance problems. Design for scale from the beginning.
Monitor everything - You can't optimize what you don't measure. Implement comprehensive logging and monitoring before you have problems.
Database design matters - In a multi-tenant system, your database architecture will make or break your performance.

Professional Insights

Document your achievements - When organizational changes happen, having clear documentation of your contributions becomes crucial.
Communication gaps are red flags - If leadership can't clearly communicate changes, question whether they can lead effectively.
Technical competence matters - Be wary of leaders who make technically impossible promises or use buzzwords without understanding.
Know when to escalate - Sometimes you need to speak up about unrealistic expectations or poor communication.

What I Wish I'd Done Earlier

Looking back, there are several things I would have handled differently:

Technical preparation:

Implemented load balancing and database clustering before performance became critical
Created more comprehensive monitoring and alerting
Documented the architecture decisions more thoroughly

Professional preparation:

Asked more direct questions about the merger timeline and expectations
Requested formal documentation of role changes and reporting structures
Been more proactive about setting technical standards and expectations

Moving Forward: Practical Advice

If you find yourself in a similar situation, here's what I'd recommend:

For Technical Challenges

Start with monitoring - You need data before you can make informed decisions
Plan for horizontal scaling - Vertical scaling has limits
Design for failure - Systems will have errors; plan for graceful degradation
Choose technologies that fit your team's expertise - Don't chase trends if they don't solve real problems

For Organizational Challenges

Ask direct questions - Don't assume things will "work themselves out"
Document everything - Keep records of decisions, achievements, and concerns
Set clear expectations - Be explicit about what's realistic and what isn't
Have a backup plan - Know your market value and keep your options open

The Ongoing Journey

Mergers and organizational changes are part of the software development landscape. The key is maintaining your technical standards while navigating the human and political challenges that come with change.

Six months later, I'm still working through these challenges. Some have been resolved through better communication and clearer role definitions. Others remain ongoing negotiations between technical reality and business expectations.

The most important lesson? Your technical skills will get you through the day-to-day work, but your ability to communicate, set boundaries, and manage relationships will determine your long-term success.

What's your experience with company mergers or organizational changes? How do you balance technical excellence with organizational pressures? Share your thoughts in the comments below.

Create Your Own Lumen Installer (2020)

AibnuHibban — Wed, 16 Sep 2020 15:59:27 +0000

Bismillah

Alhamdulillah, I can still provide knowledge that may be useful for my friends who read ..

Fine, according to the title. We will create our own version of the Lumen Installer. Not only that, this script will also immediately take the latest version of Lumen .. When this article was written Lumen was already version 8

⚡️Lumen

Little explanation. Lumen is a Micro-Framework belonging to Laravel which is devoted to creating APIs.

🔨 Creating Lumen Installer

To make Lumen Installer I use Bash so that we can customize more comfortably.

Oh, yes. I made it on Linux, if you are a Windows user, maybe I can adjust it for the settings .. Ok 😉

Next .. To create Lumen Installer, here are the steps

Open Terminal CTRL + T
Create a Folder with a free name .. For example I use the name "bashku"

mkdir bashku

Enter into the folder and create a file with the name "lumen"

cd bashku
touch lumen

Then edit with nano (If you want to edit with a text editor, go ahead)

nano lumen

Paste the following code

#!/bin/bash

if [ "$1" != "" ]; then
    echo "Sedang Dibuatkan Projectnya di Folder $1"
    composer create-project --prefer-dist laravel/lumen "$1"
else
    echo "Sedang DIbuatkan Projectnay di sini"
    composer create-project --prefer-dist laravel/lumen .
fi

Press CTRL + X then Y and ENTER
After that go back to the * Directory * initial

cd ..

and edit . Bashrc

nano .bashrc

Paste the following code at the bottom

export PATH="$PATH:$HOME/bashku"

*The example above is because the folder I previously created was "bashku", it can be adjusted to the name of your folder

If you have pressed CTRL + X then Y and ENTER
then type source .bashrc in the terminal

source .bashrc

After that, try when you are terminated by:

lumen myproject

Will create project lumen in myproject directory (create a new folder)

lumen

Will create a lumen project in the current directory

⛅️ Closing

How? If there are problems, please discuss it in the comments column... The Bash script above is a basic bash script and is very easy to understand. 😃

That's all hopefully useful ...

Thank you 👊

Membuat Lumen Installer Sendiri (2020)

AibnuHibban — Wed, 16 Sep 2020 15:44:12 +0000

Bismillah

Alhamdulillah saya masih bisa memberikan ilmu yang semoga bermanfaat bagi teman teman yang membaca..

Baik, sesuai dengan judul. Kita akan membuat Lumen Installer sendiri dengan versi kita sendiri. Bukan hanya itu, Script ini juga akan langsung mengambil versi terbaru dari Lumen.. Ketika tulisan ini ditulis Lumen sudah versi 8

⚡️Lumen

Sedikit penjelasan. Lumen adalah sebuah Micro-Framework milik Laravel yang memang dikhususkan untuk membuat API.

🔨 Membuat Lumen Installer

Untuk membuat Lumen Installer saya menggunakan Bash agar kita bisa mengkustomisasi lebih enak.

Ohya. Saya membuatnya di Linux, Jika anda pengguna Windows mungkin bisa disesuaikan saya untuk pengaturannya.. Ok 😉

Lanjut.. Untuk membuat Lumen Installer, berikut adalah langkah langkahnya

Buka Terminal CTRL + T
Buat Folder dengan nama bebas.. Contoh saya menggunakan nama "bashku"

mkdir bashku

Masuk ke dalam folder tersebut dan buat file dengan nama "lumen"

cd bashku
touch lumen

Lalu edit dengan nano (Jika ingin mengedit dengan text editor silahkan saja)

nano lumen

Paste kode berikut

#!/bin/bash

if [ "$1" != "" ]; then
    echo "Sedang Dibuatkan Projectnya di Folder $1"
    composer create-project --prefer-dist laravel/lumen "$1"
else
    echo "Sedang DIbuatkan Projectnay di sini"
    composer create-project --prefer-dist laravel/lumen .
fi

Tekan CTRL + X lalu Y dan ENTER
Setelah itu kembali lagi ke Directory awal

cd ..

dan edit .bashrc

nano .bashrc

Paste kode berikut dibagian paling bawah

export PATH="$PATH:$HOME/bashku"

*Contoh diatas karena folder yg sebelumnya saya buat adalah "bashku" bisa disesuaikan dengan nama folder anda

Jika sudah Tekan CTRL + X lalu Y dan ENTER
lalu ketik "source .bashrc" di terminal

source .bashrc

Setelah itu coba ketika diterminal dengan :

lumen projectku

Akan membuat project lumen di directory projectku (membuat folder baru)

lumen

Akan membuat project lumen di directory saat ini

⛅️ Penutup

Bagaimana ? Jika ada kendala silahkan diskusi di kolom komentar.. Script Bash diatas adalah script bash basic dan sangat mudah di pahami.. 😃

Sekian Semoga Bermnafaat...

Terima Kasih 👊

Login Customization in Laravel 8

AibnuHibban — Sat, 12 Sep 2020 15:12:02 +0000

Bismillah

this time I can still write an article that hopefully can be useful for friends who read...

As the title implies, I want to share a little about Login Customization in Laravel 8

💡 Laravel 8 Update Info

Laravel has just updated to version 8 which brings a lot of new things, like using it TailwindCSS, Livewire, Folder Models, Jetstream, Factory Updates, and others ... You can read it yourself at https://laravel.com/docs/8.x/releases

With Jetstream, Laravel has removed the Laravel UI which was previously used in Laravel 6 and 7 as its Authentication Scaffold

Well .. Because of these changes, automatic customization for the login is different. Files that we usually encounter like LoginController.php are no longer in Laravel 8. Here are some Ways that have been found to customize Login in Laravel 8:

📬 Change the Email Input when Login

Go to Folder config > fortify.php
On Line 45 (Default) there is a key "username" => "email". Change the email to whatever you want, for example, username. So it becomes "username" => "username". That way you can log in using a username and password without the need for email. Of course it must also be adjusted to those in database.

🔓 Changing the Route / Destination After Successfully Login

Go to Folder app > Providers > RouteServiceProvider.php
Change the "/ dashboard" as desired on line 20

public const HOME = '/ dashboard';

after successful login it will go to the route you point here

🔐 Change the Minimum Requirement Password when registering

By default in Laravel 8, if we want to register then the password is at least 8 characters to change it:

Go to vendor > laravel > fortify > src > Rule > Password.php
Change protected $ length = 8; As you wish, for example 10
And if you want when registering, the password must have an Uppercase character, just change it $requireUppercase from false to true
And if you want to register, the password must be a number, just change $requireNumeric from false to true

✍️ Change Validation Language when Login & Register Error

Still in the same FIle as the previous step
Just scroll down a bit and you will see function message ()
Change the existing string in the function. to the language you want

Previous:

Afterwards:

❤️ Create Your Own Login Controller

So, for those of you who want to create your own login controller, you can follow these steps:

Create a file with the name LoginController.php in app > Http > Controllers. Actually for the controller name free. Just an example so that it fits its function.
then paste the following code in it

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller{
    public function authenticate(Request $request){
        // Retrive Input
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // if success login

            return redirect('berhasil');

            //return redirect()->intended('/details');
        }
        // if failed login
        return redirect('login');
    }
}

Change the part that I comment on the you wish
Add routes at routes > web.php Example:

Route::post('logged_in', [LoginController::class, 'authenticate']);

Change action attributes in login views and point to route

By creating your own Login Controller, you can also change your email to a username / other as you wish. Just change the text of the email in the $ credentials from the code I provided above.

⌛️ Closing

Ok, how? Already familiar with Authentication in Laravel 8? Actually there are many other Authentication configurations that can be changed.

So Hopefully Helpful ..

Thank you 👊

Kustomisasi Login di Laravel 8 (2020)

AibnuHibban — Sat, 12 Sep 2020 14:54:01 +0000

Bismillah

Alhamdulillah kali ini saya masih bisa menulis artikel yang semoga bisa bermanfaat bagi teman teman yang membaca..

Sesuai dengan judul, saya ingin sharing - sharing sedikit tentang Kustomisasi Login di Laravel 8

💡 Info Update Laravel 8

OK, langsung saja.. Laravel baru saja melakukan Update ke versi 8 yang membawa banyak sekali hal yang baru, Seperti menggunakannya TailwindCSS, Livewire, Folder Models, Jetstream, Pembaharuan Factory, dan lainnya.. yang teman - teman bisa baca sendiri di https://laravel.com/docs/8.x/releases

Dengan adanya Jetstream, Laravel telah menghapus Laravel UI yang sebelumnya digunakan di Laravel 6 dan 7 sebagai Authentication Scaffold nya

Nah.. Karena perubahan tersebut, Otomatis untuk melakukan kustomasi pada login pun berbeda. File" yang biasanya kita temui seperti LoginController.php sudah tidak ada di Laravel 8. Berikut adalah beberapa Cara yang telah temukan untuk kustomisasi Login di Laravel 8 :

📬 Mengubah Input Email ketika Login

Pergi ke Folder config > fortify.php
pada Line 45 (Default) ada key "username" => "email". Ubah email menjadi apapun yang teman teman inginkan misalkan username. Sehingga menjadi "username" => "username". Dengan begitu teman teman bisa login menggunakan username dan password tanpa butuh email. Tentu Saja harus disesuaikan juga dengan yg di database.

🔓 Mengubah Route / Tujuan Setelah Berhasil Login

Pergi ke Folder app > Providers > RouteServiceProvider.php
ubah "/dashboard" sesuai dengan keinginan pada line 20

public const HOME = '/dashboard';

Nantinya, setelah Login berhasil maka akan ke route yang teman teman arahkan disini

🔐 Mengubah Minimum Requirement Password ketika Register

Default / Bawaannya di Laravel 8 jika kita ingin register maka password minimal 8 Karakter untuk mengubahnya :

Pergi ke vendor > laravel > fortify > src > Rule > Password.php
Ubah protected $length = 8; Sesuai keinginan misalkan 10
Dan jika teman teman ingin ketika register passwordnya harus ada Karakter yang Uppercase / Besar tinggal ubah $requireUppercase dari false ke true
Dan kalau teman teman ingin juga ketika register passwordnya haru ada angkanya tinggal ubah $requireNumeric dari false ke true

✍️ Mengubah Bahasa Validasi ketika Error di Login & Register

Masih di FIle yang sama dengan langkah sebelumnya
Scroll saja ke bawah sedikit maka teman teman akan bertemu dengan function message()
Ubah String yang ada di function tsb. ke bahasa yang teman teman inginkan Sebelumnya : Sesudahnya :

❤️ Membuat Login Controller Sendiri

Nah, bagi teman teman yang ingin membuat login controller sendiri bisa ikuti langkah - langkah berikut :

Buat file dengan nama LoginController.php di app > Http > Controllers. Sebenanrnya untuk nama controller bebasa. Hanya contoh saja biar sesuai dengan fungsinya.
lalu paste code berikut di dalamnya

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller{
    public function authenticate(Request $request){
        // Inputan yg diambil
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // Jika berhasil login

            return redirect('berhasil');

            //return redirect()->intended('/details');
        }
        // Jika Gagal
        return redirect('login');
    }
}

Ubah bagian yang saya komentari sesuai keinginan teman teman
Tambah Route di routes > web.php Contoh :

Route::post('logged_in', [LoginController::class, 'authenticate']);

Ubah action attribut di views login dan arahkan ke route

Dengan membuat Login Controller sendiri, teman teman juga bisa mengubah email menjadi username / lainnya sesuai keinginan. Tinggal ubah saja tulisan email di dalam $credentials dari kode yang saya berikan di atas.

⌛️ Penutup

Ok, bagaimana ? Sudah terbiasa dengan Authentication di Laravel 8 ? Sebenarnya masih ada banyak konfigurasi Authentication lainnya yang bisa diubah. Kalo memang teman teman mau juga Konfigurasi Authentication lainnya mungkin bisa komen aja dibawah kali ya 😉

Sekian Semoga Bermanfaat..

Terima Kasih 👊

Konfigurasi Email di Lumen 7 (2020)

AibnuHibban — Sun, 30 Aug 2020 15:18:05 +0000

Assalamu'alaikum Warohmatullohi Wabarokatuh

Alhamdulillah ini adalah Artikel kedua di Dev.to ini. Kali ini saya ingin share / berbagi sedikit tentang Konfigurasi Email di lumen 7 .. So, Langsung saja

Bagi yang belum tau apa itu Lumen..

Lumen

The stunningly fast micro-framework by Laravel.

Begitulah Slogan yang di pasang di depan Halaman Resmi nya. Kurang lebih artinya Kerangka micro-framework milik Laravel yang sangat Cepat..

Lumen dikhususkan digunakan untuk membuat API dan Memiliki Struktur Folder yang sama persis seperti di Laravel .. Hanya saja di Lumen sudah tidak ada lagi Bagian - bagian yang "Berat", Seperti Views, Konfigurasi Bawaan dan lainnya..

Jika anda sudah terbiasa dengan Laravel, Menggunakan Lumen tidak akan membuat anda kesulitan

Install Lumen

Untuk Proses install anda bisa menggunakan Lumen Installer Lihat Dokumentasi

lumen new send_email

Install Dependencies

Jalankan Perintah dibawah untuk menginstall Illuminate/mail dan guzzlehttp/guzzle yang dibutuhkan untuk mengirim Email

composer require Illuminate/mail guzzlehttp/guzzle

Setelah selesai, buka text editor di project tersebut

⚙️ Konfigurasi

Pertama, Buat folder config lalu buat file di folder tersebut dan berikan nama mail.php
isi mail.php

<?php
return [
    'driver' => env('MAIL_DRIVER'),
    'host' => env('MAIL_HOST'),
    'port' => env('MAIL_PORT'),
    'from' => [
        'address' => env('MAIL_FROM_ADDRESS'),
        'name' => env('MAIL_FROM_NAME'),
    ],
    'encryption' => env('MAIL_ENCRYPTION'),
    'username' => env('MAIL_USERNAME'),
    'password' => env('MAIL_PASSWORD'),
    'markdown' => [
        'theme' => 'default',
        'paths' => [
            resource_path('views/vendor/mail'),
        ],
    ],
];

Kedua, Buka file app.php di Folder bootstrap
Cari Sintaks berikut

// $app->register(App\Providers\AppServiceProvider::class);

Lalu Uncomment "//", Sehingga menjadi

$app->register(App\Providers\AppServiceProvider::class);

Lakukan yang sama juga dengan sintaks berikut.

$app->withFacades();

Ketiga, Buka File AppServiceProvider yang berada di Folder app > Providers
Tambahkan Sintaks berikut di dalam function register()

        $this->app->singleton(
            'mailer',
            function ($app) {
                return $app->loadComponent('mail', 'Illuminate\Mail\MailServiceProvider', 'mailer');
            }
        );
        // Aliases
        $this->app->alias('mailer', \Illuminate\Contracts\Mail\Mailer::class);
        // Make Queue
        $this->app->make('queue');

Keempat, Buat File .env di Root Project jika bingung cari saja .env-example lalu rename menjadi .env

Setelah itu buka link berikut . Lalu lakukan generate dengan mengubah bagian Length menjadi 32, dan copy kode yang muncul di bawahnya..

Paste ke .env bagian APP_KEY

Jika sudah, lalu tambahkan Kode berikut di bagian mana saja yang penting di dalam .env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=emailanda@gmail.com
MAIL_PASSWORD=passwordanda
MAIL_ENCRYPTION=tls
MAIL_FROM_NAME=NamaPengirim

*Ubah emailanda@gmail.com menjadi akun gmail anda
*Ubah passwordanda menjadi password akun gmail anda
*Ubah NamaPengirim sesuai keinginan anda

Konfigurasi Akun Gmail

Pergi ke Link Berikut dan pastikan anda sudah Login ke akun gmail anda yang dimasukkan ke .env yang tadi
https://myaccount.google.com/lesssecureapps
Pastikan juga anda mematikan **Verifikasi 2 Langkah*

Setelah terbuka maka turn on

❤️ Selesai

Sampai Tahap ini maka konfigurasi sudah selesai, selanjutnya bisa membaca Kirim Email di Lumen 7 (2020) - (Besok). Masih ada yang ingin ditanyakan ? Bisa diskusi di bawah 😊

Sekian Semoga Bermanfaat..

Good Luck 👊

Datatables Versi HTML + CSS + JS menggunakan Grid.js

AibnuHibban — Sat, 29 Aug 2020 17:28:56 +0000

Bismillah

Alhamdulillah akhirnya sempat juga untuk menulis artikel, karena ini Artikel pertama saya di Dev.to mohon dimaklumi jika banyak kekurangan dalam berbagai hal 😊

Grid.js

Grid.js is a lightweight, advanced JavaScript table plugin that works everywhere.

Sesuai dengan slogan di websitnya, Grid.js menawarkan Plugin Table menggunakan Javascript dengan Tingkat Lanjut. Dengan Grid.js anda bisa membuat Datatables versi HTML + CSS + JS tanpa bantuan JQuery

Demo

https://aibnuhibban.github.io/DataTable-using-Gridjs/

Cara Penggunaan

Anda Bisa melihat Repository di Github yang sudah saya buat https://github.com/AIbnuHIbban/DataTable-using-Gridjs

Yang saya tuliskan dibawah adalah Salah Satu Cara Penggunaan yang Simple dan Tanpa Module

Tambah CSS dan JS

Tambah CSS dan JS ke Dalam Dokumen

CSS

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"  rel="stylesheet" />

<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>

Element

Siapkan Satu Tag HTML untuk menaruh Table yang ingin dipasangkan. Disini Kita tidak membutuhkan Tag <table> melainkan <div>

    <div id="gridtable"></div>

⚙️ Inisialisasi

Inisialisasi Awal anda bisa hanya dengan menuliskan seperti berikut di Javascript

new gridjs.Grid({
    search: true,
    pagination: {
        buttonsCount: 10,
        limit: 5,
        summary: true
    },
    sort: true,
    columns: ['No','Name', 'Username', 'Email', 'Website', {
        name: 'Actions',
        formatter: (cell, row) => gridjs.html(`<a onclick="return confirm('Delete Data ?')" href='javascript:void(0)'>Delete</a>`),
    }],
    server: {
        url: 'https://jsonplaceholder.typicode.com/users',
        then: data => data.map((res,i) => [i+1, res.name, res.username, res.email, res.website, null])
    },
    language: {
        'search': {
            'placeholder': 'Masukkan Kata Kunci...'
        },
        'pagination': {
            'previous': 'Sebelumnya',
            'next': 'Selanjutnya',
            'showing': ' 📋 Menampilkan',
            'results': () => 'Data',
            'to' : 'sampai',
            'of' : 'Data dari'
        }
    }
}).render(document.getElementById("gridtable"));

🎨 Tambah CSS Sedikit

Tambah CSS Sedikit untuk menambah kecantikan Tabel

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background:#F7F7F7
}
.gridjs-pagination .gridjs-pages button{
    padding: 10px 15px;
}
.gridjs-sort{
    outline: none;
    border: none;
}

😎 Hasilnya

ini salah satu cara penggunaan dari gridjs tanpa Framework dan JQuery. Sebenarnya Gridjs juga menyediakan untuk React, Vue, dan JQuery, Kalian bisa lihat sendiri di dokumentasinya.. Soo, Sekian saja untuk artikel kali ini, Semoga Bermanfaat ..

Github Repo : https://github.com/AIbnuHIbban/DataTable-using-Gridjs

Good Luck 👊