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

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

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

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

Project 4 - Students με Laravel

Project 3 - Persons με Bootstr...

1. Κάντε Remix το κώδικα ώστε να τον αντιγράψετε σε δικό σας λογαριασμό.

 

2. Μετέτρεψε το CRUD σου σε Laravel δομή

Από:

  • list.php
  • insert.php
  • process_insert.php
  • update.php
  • process_update.php
  • delete.php

Σε Laravel:

Routes (routes/web.php)

 
Route::resource('students', StudentController::class);
 

👉 Αυτό σου φτιάχνει αυτόματα:

  • index (list)
  • create (form insert)
  • store (process insert)
  • edit (form update)
  • update (process update)
  • destroy (delete)

3. Controller (όλη η λογική μαζί)

myapp/app/Http/Controllers/StudentController.php

 
php artisan make:controller StudentController --resource
 

Παράδειγμα:

 
public function index() {
     $students = Student::all();
     return view('students.index', compact('students'));
}

public function store(Request $request) {
     Student::create($request->all());
     return redirect()->route('students.index');
}

public function update(Request $request, $id) {
      $student = Student::findOrFail($id);
      $student->update($request->all());
      return redirect()->route('students.index');
}

public function destroy($id) {
      Student::destroy($id);
      return redirect()->route('students.index');
}
 

4. Model (αντικαθιστά τα raw SQL)

myapp/app/Models/Student.php

 
php artisan make:model Student -m
 
 
class Student extends Model {
     protected $fillable = ['name', 'email'];
}
 

👉 Αυτό αντικαθιστά:

 
INSERT INTO ...
UPDATE ...
DELETE ...
 

5. Views (Blade αντί για plain HTML)

myapp/resources/views/index.blade.php

myapp/resources/views/create.blade.php

myapp/resources/views/edit.blade.php

 

Παράδειγμα:

 
<!-- resources/views/students/index.blade.php -->
@foreach ($students as $student)
    {{ $student->name }}
@endforeach
 

README

 

Η ροή που ακολουθεί το Laravel ονομάζεται MVC (Model-View-Controller). Είναι μια οργανωμένη «αλυσίδα παραγωγής» όπου κάθε αρχείο έχει έναν πολύ συγκεκριμένο ρόλο.

Ας δούμε πώς κινείται μια αίτηση (π.χ. όταν πατάς το κουμπί "Update") μέσα στο σύστημα:

1. Η Διαδρομή μιας Αίτησης (Request Flow)

  1. Η Είσοδος (Public/index.php): Κάθε αίτηση μπαίνει πρώτα από αυτό το αρχείο. Είναι ο "τροχονόμος" που εκκινεί το framework.

  2. Το Τηλεφωνικό Κέντρο (routes/web.php): Η αίτηση φτάνει εδώ. Το Laravel κοιτάζει τη διεύθυνση (URL) και τη μέθοδο (GET, POST, PUT, DELETE). Αν βρει αντιστοιχία, π.χ. Route::put('/students/{id}', ...), στέλνει την αίτηση στον ανάλογο Controller.

  3. Ο Εγκέφαλος (app/Http/Controllers/StudentController.php): * Εδώ εκτελείται η λογική. Ο Controller "μιλάει" στο Model για να κάνει την εργασία στη βάση.

    • Για παράδειγμα, η μέθοδος update λαμβάνει τα δεδομένα ($request) και την ταυτότητα του μαθητή ($id).

  4. Ο Διαχειριστής Δεδομένων (app/Models/Student.php): Ο Controller καλεί το Model (π.χ. Student::create()). Το Model αναλαμβάνει να επικοινωνήσει με τη βάση δεδομένων (SQLite/PostgreSQL) χωρίς εσύ να γράψεις ούτε μια γραμμή SQL κώδικα.

  5. Η Παρουσίαση (resources/views/index.blade.php): Μόλις τελειώσει η δουλειά, ο Controller αποφασίζει πού θα σε στείλει. Είτε "σερβίρει" μια σελίδα (View) είτε δίνει εντολή στον browser να πάει σε άλλη διεύθυνση (redirect('/')).

Γιατί το Laravel υπερέχει από την "Απλή PHP"

Σε ένα απλό σύστημα PHP με μεμονωμένα αρχεία .php που περιέχουν διάσπαρτο κώδικα HTML και SQL, τα προβλήματα εμφανίζονται γρήγορα. Να γιατί το Laravel είναι καλύτερο:

  • Ασφάλεια από "Script Kiddies" (SQL Injection): Στην απλή PHP πρέπει να καθαρίζεις χειροκίνητα κάθε input. Το Laravel χρησιμοποιεί το Eloquent ORM, το οποίο προστατεύει αυτόματα τη βάση σου από επιθέσεις SQL Injection.

  • Προστασία CSRF: Αν ξεχάσεις το @csrf στην απλή PHP, η φόρμα σου είναι ευάλωτη. Το Laravel αρνείται να δεχτεί δεδομένα από "ξένες" πηγές αν δεν υπάρχει το κατάλληλο token.

  • Καθαρός Κώδικας (Separation of Concerns): Στην απλή PHP, η SQL, η HTML και η λογική είναι στο ίδιο αρχείο («μακαρονάδα»). Στο Laravel, η εμφάνιση είναι στα Views, η λογική στους Controllers και η βάση στα Models. Έτσι, αν θέλεις να αλλάξεις το design, δεν κινδυνεύεις να χαλάσεις τη βάση δεδομένων.

  • Διαχείριση URLs (Routing): Στην απλή PHP, τα URLs σου είναι student_edit.php?id=5. Στο Laravel έχεις όμορφα, "φιλικά" URLs όπως /students/5/edit, τα οποία βοηθούν και στο SEO.

  • Ετοιμοπαράδοτα Εργαλεία: Το Laravel σου δίνει έτοιμα συστήματα για Authentication (Login/Register), Validation (έλεγχο αν το email είναι έγκυρο) και Migrations (διαχείριση της δομής της βάσης), που στην απλή PHP θα έπρεπε να γράψεις από το μηδέν.

  • Συντηρησιμότητα: Αν μετά από 6 μήνες θέλεις να αλλάξεις κάτι, στο Laravel ξέρεις ακριβώς πού να πάς. Στην απλή PHP, πρέπει να ψάξεις σε δεκάδες αρχεία για να βρεις πού γίνεται η σύνδεση με τη βάση ή πού κλείνει ένα <div>.

Tutorials

https://www.launchidea.in/blog/laravel/understanding-laravel-models

https://www.w3schools.in/laravel/

 

Ερωτήσεις αυτοαξιολόγησης

https://docs.google.com/forms/d/e/1FAIpQLSdD0q9PWOyVQYpjXyBQkseQDotdFlMGbKF5ThYVR22DKIsiVQ/viewform?usp=publish-editor

 

Εργασία για το σπίτι

Φύλλο Εργασίας 1: Βελτίωση Εφαρμογής CRUD στο Laravel (Blade & Bootstrap)

Σκοπός της άσκησης: Μέχρι τώρα, στην απλή PHP, γράφαμε τον βασικό κορμό της HTML (<html>, <head>, <body>) σε κάθε αρχείο ξεχωριστά. Στο Laravel, χρησιμοποιούμε τη μηχανή Blade για να φτιάξουμε ένα κεντρικό "καλούπι" (Layout) και να το χρησιμοποιούμε παντού! Επιπλέον, θα κάνουμε την εφαρμογή μας να φαίνεται επαγγελματική προσθέτοντας το framework Bootstrap.

Στο project σας έχετε ήδη 3 αρχεία (views): index.blade.php, create.blade.php, και edit.blade.php.

Ερώτημα 1ο: Δημιουργία και Χρήση ενός Γενικού Layout (Καλούπι)

Στόχος: Να δημιουργήσετε ένα κεντρικό αρχείο διάταξης (Layout) για να μην επαναλαμβάνετε τον βασικό κώδικα HTML σε κάθε σελίδα.

Οδηγίες (Βήμα-Βήμα):

  1. Δημιουργία του Layout:

    • Μέσα στον φάκελο resources/views/ του Laravel project σας, δημιουργήστε ένα νέο αρχείο και ονομάστε το layout.blade.php.

  2. Συγγραφή του βασικού HTML:

    • Ανοίξτε το layout.blade.php και γράψτε τον βασικό σκελετό μιας ιστοσελίδας (HTML5).

    • Στο σημείο όπου θέλετε να εμφανίζεται το περιεχόμενο της κάθε ξεχωριστής σελίδας (π.χ. οι φόρμες ή η λίστα των μαθητών), θα χρησιμοποιήσετε την εντολή @yield του Blade.

    Αντιγράψτε τον παρακάτω κώδικα στο layout.blade.php:

    HTML
     
    <!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Εφαρμογή Μαθητών</title>
</head>
<body>

    <!-- Εδώ θα μπαίνει δυναμικά το περιεχόμενο από τα άλλα αρχεία! -->
    @yield('content')

</body>
</html>

  3. Σύνδεση των υπόλοιπων αρχείων με το Layout:

    • Τώρα πρέπει να πούμε στα αρχεία μας (create, edit, index) να "κληρονομήσουν" αυτό το Layout.

    • Ανοίξτε το αρχείο create.blade.php (Προσθήκη Μαθητή) και μετατρέψτε το ολόκληρο ώστε να μοιάζει έτσι:

    Blade
     
    @extends('layout')

@section('content')
    <h1>Add Student</h1>

    <form method="POST" action="/students">
        @csrf

        Name: <input type="text" name="name"><br>
        Email: <input type="text" name="email"><br>

        <button type="submit">Save</button>
    </form>
@endsection

Τι πρέπει να κάνετε: Αφού εφαρμόσετε τα παραπάνω στο create.blade.php, κάντε ακριβώς το ίδιο (δηλαδή χρησιμοποιήστε τα @extends('layout') και @section('content')...@endsection) και στα αρχεία edit.blade.php και index.blade.php, περικλείοντας όλο τον υπάρχοντα κώδικά τους μέσα στο @section.

Ερώτημα 2ο: Μορφοποίηση με Bootstrap

Στόχος: Να ομορφύνουμε το περιβάλλον χρήστη (UI) χρησιμοποιώντας έτοιμες κλάσεις CSS από το Bootstrap, χωρίς να γράψουμε δικό μας CSS. Το μαγικό εδώ είναι ότι θα το προσθέσουμε μόνο στο Layout και θα εφαρμοστεί παντού!

Οδηγίες (Βήμα-Βήμα):

  1. Εισαγωγή του Bootstrap στο Layout:

    • Ανοίξτε το αρχείο layout.blade.php που φτιάξατε στο 1ο ερώτημα.

    • Μέσα στην ετικέτα <head>, κάτω από το <title>, επικολλήστε το παρακάτω link για να φορτώσετε το Bootstrap μέσω διαδικτύου (CDN):

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

  2. Στοίχιση περιεχομένου:

    • Για να μην είναι τα πάντα κολλημένα αριστερά στην οθόνη, τυλίξτε το @yield('content') μέσα στο layout.blade.php με ένα div που έχει την κλάση container (μια έτοιμη κλάση του Bootstrap):

    HTML
     
    <div class="container mt-5">
    @yield('content')
</div>

    (Σημείωση: Το mt-5 σημαίνει Margin Top 5, δίνει δηλαδή λίγο κενό από το πάνω μέρος της οθόνης).

  3. Ομορφύνοντας τα κουμπιά και τις φόρμες (Παράδειγμα):

    • Ανοίξτε το create.blade.php. Προσθέστε έτοιμες κλάσεις του Bootstrap στα input και στα button για να αλλάξουν εμφάνιση.

    • Η φόρμα σας στο create.blade.php μπορεί να γίνει κάπως έτσι:

    Blade
     
    <form method="POST" action="/students">
    @csrf

    <div class="mb-3">
        <label class="form-label">Name:</label>
        <input type="text" name="name" class="form-control">
    </div>

    <div class="mb-3">
        <label class="form-label">Email:</label>
        <input type="text" name="email" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">Save</button>
</form>

Τι πρέπει να κάνετε: Εφαρμόστε παρόμοιες αλλαγές (κλάσεις btn btn-primary για το Update, btn btn-danger για το Delete, και form-control για τα input) στο αρχείο edit.blade.php. Στο index.blade.php, κάντε το κουμπί του "Add Student" να μοιάζει με πραγματικό κουμπί προσθέτοντας στην ετικέτα <a> την κλάση class="btn btn-success".

 

 

Φύλλο Εργασίας 2: Επέκταση Δεδομένων & Λογική στα Views (Blade)

Σκοπός της άσκησης: Σε αυτό το εργαστήριο θα δούμε πώς μπορούμε να προσθέσουμε μια νέα πληροφορία (ένα νέο πεδίο) στο σύστημά μας, κατανοώντας τη διαδρομή που κάνουν τα δεδομένα στο Laravel: από τη Βάση Δεδομένων, στο Μοντέλο και τελικά στην Οθόνη μας (View). Στο τέλος, θα χρησιμοποιήσουμε δομές επιλογής (if-else) απευθείας μέσα στην HTML μας χάρη στο Blade!

Ερώτημα 1ο: Προσθήκη του πεδίου "Βαθμός" (Grade)

Στόχος: Να προσθέσετε το πεδίο grade (ακέραιος αριθμός) σε κάθε μαθητή. Για να γίνει αυτό σωστά στο Laravel, πρέπει να ενημερώσουμε 4 διαφορετικά σημεία.

Οδηγίες:

  1. Ενημέρωση της Βάσης Δεδομένων (Migrations):

    • Πηγαίνετε στον φάκελο  database/migrations/ και βρείτε το αρχείο (myapp/database/migrations/2026_04_21_111504_create_students_table.php) που τελειώνει σε _create_students_table.php.

    • Μέσα στη συνάρτηση up(), προσθέστε τη γραμμή για τον βαθμό κάτω από το email:

      PHP
       
      $table->string('email');
$table->integer('grade')->nullable(); // ΝΕΑ ΓΡΑΜΜΗ (το nullable επιτρέπει να είναι κενό αρχικά)

    • Ανοίξτε το τερματικό σας (Terminal) και τρέξτε την εντολή: php artisan migrate:fresh (Προσοχή: Αυτό θα διαγράψει τα παλιά δεδομένα και θα ξαναφτιάξει τους πίνακες από την αρχή με το νέο πεδίο).

  2. Ενημέρωση του Μοντέλου (Model):

    • Ανοίξτε το app/Models/Student.php.

    • Προσθέστε το 'grade' στον πίνακα $fillable. Αυτό λέει στο Laravel "επιτρέπω στον χρήστη να αποθηκεύσει μαζικά και τον βαθμό" (είναι μέτρο ασφαλείας).

      PHP
       
      protected $fillable = ['name', 'email', 'grade'];

  3. Ενημέρωση των Φορμών (Views - Create & Edit):

    • Ανοίξτε το resources/views/create.blade.php. Προσθέστε ένα νέο πεδίο (input) για τον βαθμό, όπως ακριβώς κάνατε για το Όνομα και το Email:

      Blade
       
      <div class="mb-3">
    <label class="form-label">Grade:</label>
    <input type="number" name="grade" class="form-control" min="0" max="20">
</div>

    • Κάντε το ίδιο και στο resources/views/edit.blade.php, φροντίζοντας να τυπώσετε την υπάρχουσα τιμή του βαθμού στο value:

      Blade
       
      <div class="mb-3">
    <label class="form-label">Grade:</label>
    <input type="number" name="grade" value="{{ $student->grade }}" class="form-control" min="0" max="20">
</div>

  4. Ενημέρωση του Controller (ΔΕΝ ΑΠΑΙΤΕΙΤΑΙ):

    • Ανοίξτε το (myapp/app/Http/Controllers/StudentController.php) StudentController.php σας και επιβεβαιώστε ότι αποθηκεύονται τα δεδομένα χρησιμοποιώντας το $request->all(). Είστε έτοιμοι! Δεν χρειάζεται να αλλάξετε τίποτα. Το Laravel θα δει το νέο πεδίο στη φόρμα και θα το αποθηκεύσει αυτόματα επειδή το βάλατε στο $fillable.

Δοκιμή: Ανοίξτε τον browser, πατήστε "Add Student" και δοκιμάστε να αποθηκεύσετε έναν μαθητή με βαθμό!

Ερώτημα 2ο: Challenge - Έξυπνη Εμφάνιση με Blade Conditions

Στόχος: Στο αρχείο index.blade.php βλέπουμε τη λίστα με όλους τους μαθητές. Θέλουμε το σύστημα να μας δείχνει δίπλα στο όνομά τους έναν χαρακτηρισμό, ο οποίος θα αλλάζει αυτόματα ανάλογα με τον βαθμό τους!

Οδηγίες Challenge:

Ανοίξτε το αρχείο resources/views/index.blade.php. Εκεί που εμφανίζετε τα στοιχεία του μαθητή μέσα στη λούπα @foreach, θέλω να προσθέσετε τη λογική του Blade.

Στο Blade, η δομή ελέγχου if γράφεται πολύ απλά, βάζοντας ένα @ μπροστά, χωρίς να χρειαζόμαστε τα <?php ... ?>:

Blade
 
@if(ΣΥΝΘΗΚΗ 1)
   <!-- HTML Κώδικας -->
@elseif(ΣΥΝΘΗΚΗ 2)
   <!-- HTML Κώδικας -->
@else
   <!-- HTML Κώδικας -->
@endif

Τι πρέπει να φτιάξετε: Χρησιμοποιήστε το $student->grade για να φτιάξετε την εξής λογική:

  • Αν ο βαθμός είναι μεγαλύτερος ή ίσος του 18, να τυπώνεται δίπλα η λέξη "Άριστα" με πράσινο χρώμα.

  • Αλλιώς, αν ο βαθμός είναι μεγαλύτερος ή ίσος του 10, να τυπώνεται "Προάγεται" με μπλε χρώμα.

  • Αλλιώς (για βαθμούς κάτω του 10), να τυπώνεται "Απορρίπτεται" με κόκκινο χρώμα.

(Hint: Για τα χρώματα, μπορείτε να βάλετε τη λέξη μέσα σε ένα <span> χρησιμοποιώντας τις κλάσεις του Bootstrap που μάθαμε στο προηγούμενο μάθημα, π.χ. <span class="badge bg-success">Άριστα</span>, <span class="badge bg-primary">, <span class="badge bg-danger">).