Bootstrap – The Eternal Path https://arasan.de Arasan.de Thu, 15 Sep 2022 15:23:11 +0000 de hourly 1 https://wordpress.org/?v=7.0.2 https://arasan.de/wp-content/uploads/2024/10/triquetra-512x512-1.png Bootstrap – The Eternal Path https://arasan.de 32 32 Symfony Todo App – TodoItems aus TablePlus Tabelle anzeigen https://arasan.de/symfony-todo-app-todoitems-aus-tableplus-tabelle-anzeigen/ Thu, 15 Sep 2022 15:16:12 +0000 https://arasan.de/?p=614
  • Symfony TodoApp – Projekt mit Git + Github erstellen
  • Symfony TodoApp – TodosController erstellen
  • Symfony TodoApp – Twig Template anpassen
  • Symfony Todo App – Bootstrap Styles hinzufügen
  • Symfony Todo App – TodosController: Create Route hinzufügen
  • Symfony Todo App – Datenbankverbindung erstellen
  • Symfony Todo App – Entity + Repository erstellen
  • Symfony Todo App – TodoItems aus TablePlus Tabelle anzeigen
  • Symfony todo App – Formular für Erstellen von TodoItems erzeugen
  • Symfony Todo App – Formular für Bearbeiten von TodoItems erzeugen
  • Symfony TodoApp – Löschen-Funktion für TodoItems erzeugen
  • Symfony TodoApp – Login + Registrierung hinzufügen

    • Wir fügen zuerst ein paar Einträge in die TodoItem-Tabelle ein, damit wir diese im Index-Twig-Template ausgeben können:

    Anschließend verwenden wir das TodoItemRepository im TodosController, um alle Tabellen-Einträge abzurufen und mit dd() auszugeben.

    Wir erhalten unsere 3 von Hand erstellten Einträge und können diese in einer Bootstrap-Tabelle ausgeben:

    ]]>         Symfony Todo App – Bootstrap Styles hinzufügen https://arasan.de/symfony-todo-app-bootstrap-styles-hinzufuegen/ Thu, 15 Sep 2022 13:23:43 +0000 https://arasan.de/?p=574
  • Symfony TodoApp – Projekt mit Git + Github erstellen
  • Symfony TodoApp – TodosController erstellen
  • Symfony TodoApp – Twig Template anpassen
  • Symfony Todo App – Bootstrap Styles hinzufügen
  • Symfony Todo App – TodosController: Create Route hinzufügen
  • Symfony Todo App – Datenbankverbindung erstellen
  • Symfony Todo App – Entity + Repository erstellen
  • Symfony Todo App – TodoItems aus TablePlus Tabelle anzeigen
  • Symfony todo App – Formular für Erstellen von TodoItems erzeugen
  • Symfony Todo App – Formular für Bearbeiten von TodoItems erzeugen
  • Symfony TodoApp – Löschen-Funktion für TodoItems erzeugen
  • Symfony TodoApp – Login + Registrierung hinzufügen

    • In diesem Schritt fügen wir die Bootstrap Styles hinzu! Dazu passen wir das Twig Layout an:

    Nach Hinzufügen von Bootstrap passen wir den Style des „Erstellen-Buttons“ an.

    ]]>         Bootstrap Formular Inline anzeigen https://arasan.de/bootstrap-formular-inline-anzeigen/ Tue, 13 Sep 2022 12:58:31 +0000 https://arasan.de/?p=521 Mit folgendem Code kann man ein Bootstrap Formular inline (Klasse „d-inline-block“) anzeigen:

    <!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form inline demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <a class="btn btn-primary mt-2" href="/websites/create" role="button">Create Website</a>
                    <form class="d-inline-block" action="websites/1/delete" method="post">
                        <button class="btn btn-danger mt-2" type="submit" role="button">Delete Website</button>
                    </form>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </main>
</body>

    Das Ergebnis sieht wie folgt aus:

    ]]>         Laravel TodoApp – Bootstrap hinzufügen https://arasan.de/laravel-todoapp-bootstrap-hinzufuegen/ Sat, 10 Sep 2022 20:11:36 +0000 https://arasan.de/?p=435
  • Laravel TodoApp – Projekt mit Git + Github erstellen
  • Laravel TodoApp – View (Blade Template) in Atom Editor bearbeiten:
  • Laravel TodoApp – MySQL Datenbank-Verbindung konfigurieren
  • Laravel TodoApp – Model + Migration erstellen
  • Laravel TodoApp – ListItem Form + Route + Controller erstellen
  • Laravel TodoApp – Formulardaten in Logdatei ausgeben
  • Laravel TodoApp – Formulardaten in Tabelle speichern
  • Laravel TodoApp – ListItems aus Tabelle ausgeben
  • Laravel TodoApp – Todo ListItem als erledigt markieren
  • Laravel TodoApp – Layout erstellen
  • Laravel TodoApp – Bootstrap hinzufügen
  • Laravel TodoApp – Welcome Blade Template umbenennen in Todos
  • Laravel TodoApp – Todo nur eintragen wenn User angemeldet
  • Laravel TodoApp – Nur eigene Todos anzeigen und bearbeiten

    • In diesem Schritt fügen wir Twitter Bootstrap zu unserem Projekt hinzu. Das erleichtert das Layout der App wesentlich.
    Außerdem lassen wir uns Registrierung + Login Masken automatisch erzeugen.
    Beim letzten Mal haben wir auch ein Layout angelegt, bei der Installation von Bootstrap wird ein separates Layout angelegt.

    Zuerst installieren wir Laravel-UI mithilfe von composer in der Kommandozeile:

    composer require laravel/ui

    Danach installieren wir Bootstrap:

    php artisan ui bootstrap --auth

    Nach Abschluss der Installation von Bootstrap lassen wir einmal die Installation von Node Package Manager laufen:

    npm install && npm run dev

    In unserer Todo-App sind eine Menge neuer Dateien erzeugt worden:

    Folgende Änderungen befinden sich jetzt in unserer App:

    • Neuer HomeController in App\Http\Controllers
    • Neuer ConfirmPasswordController in App\Http\Controllers\Auth
    • Neuer ForgotPasswordController in App\Http\Controllers\Auth
    • Neuer LoginController in App\Http\Controllers\Auth
    • Neuer RegisterController in App\Http\Controllers\Auth
    • Neuer ResetPasswordController in App\Http\Controllers\Auth
    • Neuer VerificationController in App\Http\Controllers\Auth
    • Anpassung von bootstrap.js in resources/js
    • Neues Verzeichnis sass in resources
    • Neues Layout app.blade.php in resources/views/layouts
    • Neue View confirm.blade.php in resources/views/auth/passwords
    • Neue View email.blade.php in resources/views/auth/passwords
    • Neue View reset.blade.php in resources/views/auth/passwords
    • Neue View login.blade.php in resources/views/auth
    • Neue View register.blade.php in resources/views/auth
    • Neue View verify.blade.php in resources/views/auth
    • Neue View home.blade.php in resources/views
    • Anpassung von web.php in routes

    Das sind die wichtigsten Neuerungen, eine Menge Neuerungen. Wir gehen diese Anpassungen einmal durch.

    Zuerst haben wir die Route „/register“, unter der ein neues Registrierungsformular vorhanden ist.
    Das Formular ist bereits mit Bootstrap gestylt und hat eine Navbar mit den Navigationsrouten „/“, „/register“ und „/login“.
    Wir können einen Namen, eine E-Mail-Adresse und Passwort eingeben und werden nach erfolgreicher Registrierung zum Dashboard weitergeleitet.

    Wir haben sogar bereits Fehlermeldungen, falls bestimmte Eingabefelder (wie z.B. das Passwortfeld) nicht ausgefüllt werden!

    Bei erfolgreicher Registrierung leitet das Formular den Benutzer automatisch zur Dashboard-Route!

    Der Logout leitet automatisch zu Startseite weiter.

    Das automatisch erzeugte Bootstrap Layout passt farblich nicht zu unserem bisherigen Layout, die Farben sind hell.
    Deshalb entfernen wir im nächsten Schritt unser Layout und verwenden das bereits erzeugte Bootstrap Layout.

    Verwendung von neuem Bootstrap Layout und der „card“ Klasse

    Das sieht dann im Browser folgendermaßen aus:

    Hier sind noch die neuen Auth-Routen sowie die Home-Route:

    Der HTML Code der Homeseite sieht wie folgt aus:

    ]]>         VSCode Developer Plugins https://arasan.de/vscode-developer-plugins/ Thu, 11 Aug 2022 09:35:24 +0000 https://arasan.de/?p=476
  • HTML CSS Support
  • Bootstrap 5 Quick Snippets
  • PHP Tools
  • PHP IntelliSense
  • PHP DocBlocker
  • Laravel Docs
  • Laravel Snippets
  • Laravel Blade Snippets

    • ]]>