Ηλεκτρονική Σχολική Τάξη (η-Τάξη) | ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥ...

ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΩΝ ΕΦΑΡΜΟΓΩΝ - Γ'ΕΠΑΛ

S151119 - ΑΝΔΡΕΑΣ ΧΑΤΖΗΑΓΑΠΙΟΥ

Ενότητες μαθήματος

Εμφάνιση όλων των ενοτήτων

Project 2 - Bootstrap - index.php

Άσκηση 4 - Διαγραφή χρήστη (de... Project 3 - Persons με Bootstr...

Για να ξεκινήσουμε την μεταμόρφωση του ιστότοπου ξεκινήστε από την τελική μορφή του Project2

Κατεβάστε το zip
αποσυμπιέστε
αλλάξτε τα στοιχεία σύνδεσης
και συνεχίστε το διάβασμα παρακάτω για να κάνετε τις αλλαγές που περιγράφονται

Στόχος

Σε αυτό το μάθημα, θα μετατρέψουμε ένα βασικό index.php για διαχείριση λίστας εργασιών σε μια μοντέρνα, responsive και καλαίσθητη εφαρμογή χρησιμοποιώντας Bootstrap.

1. Ξεκινώντας με το Αρχικό index.php

Το αρχικό index.php είναι μια απλή σελίδα που συνδέεται με μια βάση δεδομένων και εμφανίζει τις εργασίες:

2. Προσθήκη Bootstrap

Για να κάνουμε τη σελίδα πιο ελκυστική, προσθέτουμε το Bootstrap στο <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

Και το JavaScript στο τέλος του <body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

📌 Μάθε περισσότερα για την Εισαγωγή του Bootstrap
https://getbootstrap.com/docs/5.3/getting-started/introduction/

3. Βελτίωση της Εμφάνισης της Σελίδας

Χρησιμοποιούμε container, bg-gradient, shadow και rounded για μια μοντέρνα εμφάνιση:

<body class="container py-5">
  <div class="p-5 mb-4 bg-gradient text-white rounded-4 shadow" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
    <h1 class="display-5 fw-bold">Η Λίστα των Εργασιών σου</h1>
    <p class="fs-4">Οργάνωσε και ολοκλήρωσε τις υποχρεώσεις σου.</p>
  </div>

Εδώ:

container py-5: Προσθέτει padding και κάνει τη σελίδα πιο ευρύχωρη.
bg-gradient text-white rounded-4 shadow: Δημιουργεί ένα ελκυστικό banner.
display-5 fw-bold: Ορίζει τη γραμματοσειρά και το μέγεθος του τίτλου.

📌 Μάθε περισσότερα για Bootstrap Grid και Layouts
https://getbootstrap.com/docs/5.3/layout/grid/

4. Βελτίωση του Πίνακα με Bootstrap

Χρησιμοποιούμε table table-striped table-hover για καλύτερη εμφάνιση του πίνακα:

<table class="table table-striped table-hover">
  <thead class="table-dark">
    <tr><th>Περιγραφή</th><th>Ημερομηνία</th><th>Κατάσταση</th><th>Ενέργειες</th></tr>
  </thead>

table-striped: Προσθέτει εναλλασσόμενα χρώματα στις γραμμές.
table-hover: Εμφανίζει εφέ hover στις γραμμές.
table-dark: Σκοτεινό header για καλύτερη ορατότητα.

📌 Μάθε περισσότερα για Bootstrap Tables:
https://getbootstrap.com/docs/5.3/content/tables/

5. Βελτίωση της Παρουσίασης των Δεδομένων και των Κουμπιών Δράσης

Σε αυτό το βήμα, εφαρμόζουμε βελτιώσεις στον τρόπο εμφάνισης της κατάστασης ολοκλήρωσης των εργασιών και στις επιλογές διαχείρισης.

Χρωματική ένδειξη κατάστασης εργασίας

Αρχικά, η κατάσταση ολοκλήρωσης της εργασίας εμφανιζόταν ως απλό κείμενο (Ολοκληρωμένη ή Μη ολοκληρωμένη). Τώρα, χρησιμοποιούμε τα Bootstrap badges για να το κάνουμε πιο εμφανές:

echo "<td>" . ($row['completed'] 
? '<span class="badge bg-success">Ολοκληρωμένη</span>' 
: '<span class="badge bg-warning text-dark">Μη ολοκληρωμένη</span>') . "</td>";

Αναβάθμιση των κουμπιών επεξεργασίας και διαγραφής

Πριν, τα κουμπιά "Επεξεργασία" και "Διαγραφή" ήταν απλά HTML <input type="submit">. Τώρα, χρησιμοποιούμε Bootstrap κουμπιά με εικονίδια για καλύτερη εμφάνιση και ευχρηστία:

echo "<td>
  <form method='post' action='update_task.php' class='d-inline'>
    <input type='hidden' name='id' value='" . $row["id"] . "'>
    <button type='submit' class='btn btn-primary btn-sm'>
      <i class='bi bi-pencil-square'></i> Επεξεργασία
    </button>
</form>
<form method='post' action='delete_task.php' class='d-inline'>
    <input type='hidden' name='id' value='" . $row["id"] . "'>
    <button type='submit' class='btn btn-danger btn-sm'>
      <i class='bi bi-trash'></i> Διαγραφή
    </button>
</form>
</td>";

btn btn-primary btn-sm: Κουμπί Bootstrap για "Επεξεργασία", μικρό (btn-sm) και μπλε χρώματος (btn-primary).
btn btn-danger btn-sm: Κουμπί Bootstrap για "Διαγραφή", μικρό και κόκκινο (btn-danger).
bi bi-pencil-square: Εικονίδιο μολυβιού (Bootstrap Icons) για το κουμπί επεξεργασίας.
bi bi-trash: Εικονίδιο κάδου απορριμμάτων για το κουμπί διαγραφής.
class='d-inline': Επιτρέπει τα κουμπιά να εμφανίζονται στην ίδια γραμμή.

📌 Μάθε περισσότερα για Bootstrap Badges & Buttons
https://getbootstrap.com/docs/5.3/components/buttons/
https://getbootstrap.com/docs/5.3/components/badge/

6. Αναβάθμιση της Φόρμας Προσθήκης Εργασίας

Σε αυτό το βήμα, βελτιώνουμε την εμφάνιση της φόρμας για την προσθήκη νέων εργασιών, χρησιμοποιώντας Bootstrap components ώστε να είναι πιο κομψή και λειτουργική.

Βελτίωση της επικεφαλίδας

<h2 class="text-center mt-5 mb-4">Προσθήκη Εργασίας</h2>

text-center: Κεντράρει τον τίτλο.
mt-5 mb-4: Προσθέτει κενό πάνω και κάτω για καλύτερη οργάνωση.

Χρήση Bootstrap Card για τη φόρμα

<form method="post" action="process_insert.php" class="card p-4 shadow rounded-4 mx-auto" style="max-width:500px;">

card p-4: Τοποθετεί τη φόρμα μέσα σε ένα Bootstrap Card, δίνοντας καλύτερη οργάνωση και εμφάνιση.
shadow rounded-4: Προσθέτει στρογγυλεμένες γωνίες και σκιά.
mx-auto: Κεντράρει τη φόρμα.
style="max-width:500px;": Περιορίζει το πλάτος της φόρμας στις 500px, ώστε να φαίνεται κομψή ακόμα και σε μεγάλες οθόνες.

Αναβάθμιση των input fields

<div class="mb-3">
  <label for="new_description" class="form-label">Περιγραφή:</label>
  <input type="text" name="new_description" class="form-control" required>
</div>

<div class="mb-3">
  <label for="new_due_date" class="form-label">Ημερομηνία Λήξης:</label>
  <input type="date" name="new_due_date" class="form-control" required>
</div>

form-label: Βελτιώνει το στυλ των labels.
form-control: Δίνει στα πεδία εισαγωγής responsive και όμορφη εμφάνιση.
mb-3: Προσθέτει κενό ανάμεσα στα πεδία.

Βελτίωση του checkbox

<div class="form-check mb-3">
  <input type="checkbox" name="new_completed" value="1" class="form-check-input" id="completedCheck">
  <label class="form-check-label" for="completedCheck">Ολοκληρωμένη</label>
</div>

form-check: Ορίζει τη σωστή δομή για τα checkboxes στο Bootstrap.
form-check-input: Βελτιώνει το στυλ του checkbox.
form-check-label: Διασφαλίζει σωστή στοίχιση της ετικέτας.

Κουμπιά με στυλ

<div class="d-flex justify-content-between">
  <button type="submit" class="btn btn-custom"><i class="bi bi-plus-circle"></i> Προσθήκη</button>
  <a href="index.php" class="btn btn-secondary">Ακύρωση</a>
</div>

d-flex justify-content-between: Τοποθετεί τα κουμπιά στις άκρες της φόρμας.
btn btn-custom: Προσθέτει ένα προσαρμοσμένο κουμπί για την προσθήκη εργασίας.
bi bi-plus-circle: Προσθέτει εικονίδιο "+" στο κουμπί προσθήκης.
btn btn-secondary: Στυλιζαρισμένο κουμπί για "Ακύρωση".

📌 Μάθε περισσότερα για Bootstrap Forms & Cards
https://getbootstrap.com/docs/5.3/forms/overview/
https://getbootstrap.com/docs/5.3/components/card/

Μετάβαση σε:

Μάθημα : ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΩΝ ΕΦΑΡΜΟΓΩΝ - Γ'ΕΠΑΛ

Κωδικός : S151119