Admin dashboards op maat

Nova 4 Dashboard Codana Styled

Laravel Nova is een tool om het maken van admin panels te vergemakkelijken. Een generator is het zeker niet, het genereert immers geen bestanden. Het is ook geen CMS, veel van de functies die je van een CMS kan verwachten komen out-of-the-box mee, maar het is wel eindeloos flexibeler en meer gericht op ontwikkelaars. Dus de beste manier om het te beschrijven is als een admin panel tool die het voor een developer gemakkelijker maakt om een goed gestiijlde UI te genereren voor de backoffice van zijn/haar product.

Laravel Nova 3.0 vs 4.0

Laravel Nova 3.0 had al veel nuttige functionaliteiten:

  • een hele hoop aan premade fields
  • een global search
  • CRUD integratie
  • Lenses 
  • Actions
  • ...

Maar er zijn ook wel wat pijnpunten die vanuit de community vaak terugkwamen. In 4.0 hebben de Nova developers dan ook laten zien dat ze luisteren naar de community en Nova vooral willen vormen naar de noden van de mensen die het gebruiken.

Adminpaneel op maat?

Geef ons een seintje zodat we samen een sterk plan kunnen maken.

Packages/features

Dependent Fields

Een goed voorbeeld hiervan is het gebruik van dependent fields. De mogelijkheid om je fields in een fictieve container te steken die zichtbaar wordt aan de hand van afhankelijke waarden in het formulier.

Tot heden moest je hiervoor een package gebruiken (epartment /nova-dependency-container), een package die alles kon en ook super werkt met 2,5M downloads op de teller. Hieraan was dus zeker te zien dat heel veel mensen dit nodig hadden en ook actief gebruiken.

Deze functionaliteit is nu mee ingewerkt in Laravel Nova 4.0, zodat je backend niet meer afhankelijk hoeft te zijn van deze 3rd party package.

Select::make('Purchase Type', 'type')
    ->options([
        'personal' => 'Personal',
        'gift' => 'Gift',
    ]),

// Recipient field configuration is customized based on purchase type...
Text::make('Recipient')
    ->readonly()
    ->dependsOn(
        ['type'],
        function (Text $field, NovaRequest $request, FormData $formData) {
            if ($formData->type === 'gift') {
                $field->readonly(false)->rules(['required', 'email']);
            }
        }
    ),

 

Impersonate menu

Impersonation

Een gebruiker impersonaten is vooral voor een beheerder heel bruikbaar om vanuit het oogpunt van een bepaalde user de interface te kunnen benaderen. Een package die hier veel voor gebruikt werd was KABBOUCHI/nova-impersonate. Vanaf Nova 4.0 zal ook dit een geïntegreerde functionaliteit zijn die mee in het hele pakket zal geshipped worden. Nog een dependency die weggewerkt werd 👌

Mobile Friendly Dark Mode Nova 4

Responsive Design

Nova 4.0 introduceert een grondige vernieuwde gebruikersinterface die nu volledig responsive is, zodat je jouw platform ook onderweg op je telefoon kan gebruiken.

Ook één van de meest gevraagde styling features werd geïmplementeerd: "dark mode"!

Branding Nova 4 Codana Styled

Painless Branding

Er is een nieuwe branding-optie toegevoegd aan de Nova configuratie, zodat je eenvoudig de "primaire kleur" en het logo die in de Nova-interface worden gebruikt, kan aanpassen zonder dat je een aangepast Nova-"thema" hoeft te maken.

Laravel Nova 4 Codana Styled Sidebar

Custom Menus

Er is nu ook ondersteuning voor een volledig aanpasbare sidebar en gebruikersmenu. In feite kan je elk item in Nova's navigatie (linkse sidebar) volledig aanpassen, inclusief het maken van menusecties, menugroepen en meer. Ook hiervoor was voordien er een package nodig om dit te kunnen doen, zoals bijvoorbeeld digital-creative/collapsible-resource-manager.

Upgrades

Laravel-mix

Laravel Nova bestaat ondertussen al een langere tijd en Laravel Mix werd in die tijd nooit geüpdatete, daardoor is er nu een grote inhaalbeweging gedaan van v1 naar v6.

Tailwind 3

In Nova 3.0 wordt nog gebruikt gemaakt van Tailwind CSS 0.6.0, ook hier komt een upgrade: Tailwind CSS 3!

Inertia.JS

Inertia implementeert een nieuwe benadering voor het bouwen van klassieke server-driven web-apps.
Dankzij Inertia wordt het mogelijk om volledig client-side rendered, single page apps te maken zonder veel complexiteit met zich mee te brengen dat meestal wel meekomt met moderne SPA’s . Het doet dit door gebruik te maken van bestaande server-side frameworks.

Inertia heeft geen routing aan de client-side en er is ook geen API voor nodig. Bouw eenvoudig controllers en page views zoals u altijd hebt gedaan!

Not a framework

Inertia is geen framework en het is ook geen vervanging voor uw bestaande framework aan de server- of client-side. Het is eerder ontworpen om met hen samen te werken. Zie Inertia als lijm die de twee verbindt. Inertia doet dit via adapters. Er zijn momenteel drie officiële client-side adapters (React, Vue en Svelte) en twee server-side adapters (Laravel en Rails).

Concreet voorbeeld in Nova 4.0

Het gebruik van Inertia.js zal je vooral merken als je custom tools hebt/gaat maken die gebruik maken van de Vue router.
Nova heeft hierbij dus de Vue router vervangen door Inertia.js. Hiedoor zal je bij de upgrade naar 4.0 en hoger custom tools moeten gaan migraten van Vue routes naar het registreren van Inertia page components en backend routes.

Als voorbeeld hebben we een Nova 3 Vue router registratie:

// In tool.js...

Nova.booting((Vue, router) => {
  router.addRoutes([
    {
      name: 'sidebar-tool',
      path: '/sidebar-tool',
      component: require('./components/Tool'),
    },
  ])
})

Wanneer we naar Nova 4 upgraden, zal je de tool components moeten registeren als volgt:

// In tool.js...

Nova.booting((Vue) => {
  Nova.inertia('SidebarTool', require('./component/Tool').default)
})

Wanneer je Vue component geregistreerd is, zal je een server-side route moeten definiëren voor je tool om je component te kunnen renderen:

// In je ToolServiceProvider.php...

use Laravel\Nova\Nova;

Nova::router()
    ->group(function ($router) {
        $router->get('sidebar-tool', function ($request) {
            return inertia('SidebarTool');
        });
    });

 

Auteur: Noah Gillard
PHP / Laravel Developer
Noah Gillard AI generated Face

More insights

Cross-platform applicaties met React Native

Nog nooit was het ontwikkelen van native mobiele applicaties zo toegankelijk als vandaag. Bij Codana doen we dit door gebruik te maken het React Native, een open-source framework dat werd ontwikkeld door Meta.

Auteur: Jinse Camps
Architect | Analyst
Jinse Camps
dev

Laracon EU 2024

Een fantastisch leerrijke ervaring om met een hoop Laravel gepassioneerde mensen te inspireren! Iets wat niet gemist kan worden en heel veel voeling geeft met de community. Wat een top evenement! Wie zien we volgende edities? 😮

Auteur: Noah Gillard
PHP / Laravel Developer
Noah Gillard AI generated Face
laracon codana persoon

Een efficiënt datamanagementsysteem voor toerisme

Een TDMS of Tourist Data Management System, is simpelweg een platform dat data uit verschillende bronnen ophaalt, intern al dan niet automatisch verwerkt en deze gegevens terug aanbiedt aan externe platformen.

Auteur: Tom Van den Eynden
Web Architect | Coordinator
Tom Van den Eynden
laptop

Systemen voor gegevensbeheer in toerisme

In dit artikel verkennen we wat een TDMS is, waarom het essentieel is voor de toerisme-industrie, en hoe technologieën zoals Laravel en ElasticSearch het verschil kunnen maken. 

Auteur: Tom Van den Eynden
Web Architect | Coordinator
Tom Van den Eynden
tdms

Beveiliging van Laravel 101

In deze blogpost gaan we dieper in op een aantal veelvoorkomende Laravel beveiligingsfouten.

Auteur: Robbe Reygel
PHP developer
laravel

Test Driven Development - toepassing op een project

TDD, of voluit Test Driven Development, is een aanpak van ontwikkeling waarbij we vertrekken van het schrijven van tests. 

Auteur: Sarah Jehin
PHP developer
Sarah Jehin
development