În tutorialul de astăzi vă voi arăta cum puteți scrie ușor un design pentru aplicația CRUD pe care am creat-o în tutorialele de aici, folosind tehnologia Bootstrap 5. Înainte de începe, Bootstrap este o librărie de coduri CSS, pe care le putem folosi pentru a stiliza mai rapid elementele HTML, cu ajutorul claselor. Mai exact, daca dorim să facem un fundal închis la culoare, folosind BS, vom scrie class="bg-dark". Tot ce trebuie să facem pentru a folosi librăria este să copiem eticheta link prezentă pe website-ul acesteia și opțional pe cea script pentru a folosi animații și efecte.

     Atenție, codul scris astăzi este strict HTML și CSS, datele care apar nu sunt luate dintr-o bază de date sau prin alte modalități PHP / JS. Pentru codul de backend accesează tutorialele anterioare folosind eticheta de aici.

     Bun, începem prin a deschide host-ul local XAMPP Control Panel pentru a putea accesa la adresa http://127.0.0.1/ fișierul nou creat, index.php, în care vom genera un tabel ce conține toate datele din sistem. Tabelul va avea fiecare linie diferită datorită funcției table-striped, textul de sus va avea un fundal închis la culoare pentru a arăta că este titlul ferestrei, iar butoanele vor fi colorate diferit și incluse în elemente ancoră pentru a trimite către celelalte pagini prezente în proiect. Întregul conținut din pagină va fi secționat într-un container 75%.

     Acesta a fost primul articol din seria de 5 tutoriale de design. Mai jos poți vedea sursa scrisă, împreună cu rezultatul foto de astăzi, rezultatul final al seriei video și link-uri către tutorialele ce urmează.

• Tutorial 1 - Intro
• Tutorial 2 - Creare
• Tutorial 3 - Citire
• Tutorial 4 - Actualizare
• Tutorial 5 - Ștergere