imagine-fundal

Blog / 🖌 Design CRUD folosind Bootstrap 5 #5 - Ștergere
facebook instagram whatsapp tiktok twitter

     În articolul de astăzi vom încheia seria de 5 tutoriale de design Bootstrap 5 a aplicație CRUD creată anterior. Dată trecută am stilizat pagina de actualizare conținut. Poți accesa tutorialul anterior folosind ancora de aici. Acum, vom crea fișierul stergere.php, care reprezintă locul de unde vom șterge conținutul din baza de date.

     Cel mai important, înainte să începem să scriem cod, trebuie să pornim XAMPP Control Panel pentru a putea vizualiza la adresa http://127.0.0.1 sau http://localhost rezultatul. După ce am scris structura de baza HTML și am adăugat etichetele necesare librăriei CSS, vom folosi aceleași elemente ca data trecută, pentru începutul paginii, un container 75%, un titlu cu fundal întunecat și un buton de `acasă` 100%. Apoi, vom afișa un tabel cu datele utilizatorilor asemănători. Chiar dacă totul este hard-coded și nu există procesare de date, codul din aceste tutoriale poate fi implementat ușor la algoritmi PHP / SQL pentru a fi conectat la o bază de date.

     Un lucru foarte important la framework-urile de tipul Bootstrap sau Tailwind CSS este că trebuie să întelegem ce se întâmplă, de fapt, în spate, înainte de a le folosi. În această pagină se regăsesc doar elemente pe care le-am explicat anterior, așa că dacă există nelămuriri de invit să accesezi celelalte articole din serie.

     Am ajuns la finalul tutorialului și al seriei. Curând vom începe seria de articole în care veți învăța cum puteți scrie un panou de administrare complet, incluzând stilizare și alte detalii, pentru proiectele voastre. Mai jos puteți vedea lista de tutoriale din seria de Design CRUD, o fotografie cu rezultatul de astăzi și sursa fișierului nou creat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Design #5 - Ștergere</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
    <div class="container w-75 py-5">
        <div class="container w-100 py-4 bg-dark text-center text-light rounded shadow">
            <p class="fs-1">Utilizatorul <b class="text-success">admin</b> a fost șters</p>
        </div>
        <a href="index.php"><button class="btn btn-success my-2 w-100">Acasă</button></a>
        <div class="container w-100 border rounded bg-light mt-3 shadow-lg">
            <p class="fs-4 text-center mt-3"><b>Utilizatori similari:</b></p>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nume de utilizator</th>
                        <th class="w-25" scope="col">Prenume</th>
                        <th class="w-25" scope="col">Adresa de E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">2</th>
                        <td>admin</td>
                        <td>Andrei</td>
                        <td>admin@codulluiandrei.ro</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>admin</td>
                        <td>Andrei</td>
                        <td>admin@codulluiandrei.ro</td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>admin</td>
                        <td>Andrei</td>
                        <td>admin@codulluiandrei.ro</td>
                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td>admin</td>
                        <td>Andrei</td>
                        <td>admin@codulluiandrei.ro</td>
                    </tr>
                    <tr>
                        <th scope="row">6</th>
                        <td>admin</td>
                        <td>Andrei</td>
                        <td>admin@codulluiandrei.ro</td>
                    </tr>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

imagine

pbinfo / 213

imagine

pbinfo / 2689

imagine

pbinfo / 2574