{"id":9881,"date":"2024-04-10T17:00:45","date_gmt":"2024-04-10T15:00:45","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9881"},"modified":"2024-04-12T16:31:27","modified_gmt":"2024-04-12T14:31:27","slug":"laravel-einstieg-in-htmx","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/04\/10\/laravel-einstieg-in-htmx\/","title":{"rendered":"Laravel | Einstieg in <\/> htmx"},"content":{"rendered":"\n

TL;DR<\/h2>\n\n\n\n

Der Code f\u00fcr die in diesem Post erstelle Anwendung liegt hier<\/a>.<\/p>\n\n\n\n

Einrichten der Starter-App<\/h2>\n\n\n\n

Erstellen der Starter App. In diesem<\/a> Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchf\u00fchren k\u00f6nnen.<\/p>\n\n\n\n

Sie k\u00f6nnen auch direkt mit dem dazugeh\u00f6rigen Repository starten:<\/p>\n\n\n\n

\u276f git clone https:\/\/github.com\/r14r\/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx<\/pre>\n\n\n\n
\u276f composer install\n\u276f npm install\n\u276f npm run build\n\u276f php artisan<\/pre>\n\n\n\n
\u276f cp .env.example  .env\n\u276f php artisan migrate\n\u276f php artisan key:generate<\/pre>\n\n\n\n
\u276f php artisan serve<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
htmx einrichten<\/h3>\n\n\n\n
Installation<\/h4>\n\n\n\n
\u276f npm install htmx.org<\/pre>\n\n\n\n
Hinweis: Verwenden sie nicht das NPM Paket htmx<\/code>, dies hat einen anderen Inhalt<\/p>\n\n\n\n
Seite f\u00fcr unsere Beipiele erstellen (htmx Playground)<\/h3>\n\n\n\n
Routing erstellen<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Seite erstellen: resources\/views\/playground.blade.php<\/h4>\n\n\n\n
cp resources\/views\/dashboard.blade.php resources\/views\/playground.blade.php<\/pre>\n\n\n\n
Inhalt anpassen:<\/p>\n\n\n\n
<x-app-layout>\n    <x-slot name=\"header\">\n        <h2 class=\"font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight\">\n            {{ __('Playground') }} for Laravel and <<span style=\"color:#3d72d7\">\/<\/span>> htm<span\n                    style=\"color:#3d72d7\">x<\/span>\n        <\/h2>\n    <\/x-slot>\n\n    <div class=\"py-12\">\n        <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8\">\n            <div class=\"bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg\">\n                #\n            <\/div>\n        <\/div>\n    <\/div>\n<\/x-app-layout><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Navigationslinks anpassen<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ergebnis<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ersten htmx Aufruf hinzuf\u00fcgen<\/h3>\n\n\n\n
API Aufruf einrichten<\/h4>\n\n\n\n
Die Datei routes\/api.php<\/code> erweitern:<\/p>\n\n\n\n
Route::get('\/htmx\/message', function () {\n    return response('Dies ist eine Nachricht', 200)->header('Content-Type', 'application\/json');\n});<\/pre>\n\n\n\n
Playground Seite anpassen<\/h4>\n\n\n\n
<div hx-get=\"\/api\/htmx\/message\">\n    Mitteilungen laden...\n<\/div><\/pre>\n\n\n\n
Ergebnis<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
htmx Beispiele<\/h2>\n\n\n\n
Auf der htmx<\/span> – Projekteseite finden sie viele Beispiele<\/a>. Wir wollen nun einige davon in Laravel umsetzen.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
TL;DR Der Code f\u00fcr die in diesem Post erstelle Anwendung liegt hier. Einrichten der Starter-App Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchf\u00fchren k\u00f6nnen. Sie k\u00f6nnen auch direkt mit dem dazugeh\u00f6rigen Repository starten: htmx einrichten Installation Hinweis: Verwenden sie nicht das NPM Paket htmx, dies hat einen anderen Inhalt Seite f\u00fcr unsere Beipiele erstellen (htmx Playground) Routing erstellen Seite erstellen: resources\/views\/playground.blade.php Inhalt anpassen: Navigationslinks anpassen Ergebnis Ersten htmx Aufruf hinzuf\u00fcgen API Aufruf einrichten Die Datei routes\/api.php erweitern: Playground Seite anpassen Ergebnis htmx Beispiele Auf der htmx – Projekteseite finden sie […]<\/p>\n","protected":false},"author":1,"featured_media":8087,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[99,57],"tags":[],"class_list":["post-9881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/Laravel-Installation-einer-Beispielanwendung.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9881"}],"version-history":[{"count":10,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9881\/revisions"}],"predecessor-version":[{"id":9940,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9881\/revisions\/9940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/8087"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}