Σε αρχάριο επίπεδο, συνιστάται πάντα να ξεκινάτε με ένα πολύ βασικό σε οποιαδήποτε τεχνολογία για να μάθετε. Η εφαρμογή CRUD είναι ο πρώτος τρόπος για να κατανοήσετε τη συνδεσιμότητα της βάσης δεδομένων και το συγχρονισμό εφαρμογών. Το Laravel 10 κυκλοφόρησε και έχουμε ήδη συζητήσει τα νέα χαρακτηριστικά του Laravel 10. Σήμερα, θα ξεκινήσουμε με μια πολύ βασική εφαρμογή CRUD στο Laravel 10. Έτσι, μπορούμε να δούμε πώς να εγκαταστήσουμε και να εργαστούμε με το Laravel 10. Στη συνέχεια, θα προχωρήσουμε στα πιο προχωρημένα σεμινάρια με παραδείγματα αυτής της σειράς. Λοιπόν, ας ξεκινήσουμε με την πρώτη εφαρμογή στο Laravel 10.
Προαπαιτούμενα
Θα δημιουργήσουμε μια νέα εφαρμογή στο Laravel 10. Επομένως, για να το έχετε αυτό, θα χρειαστείτε τις παρακάτω διαμορφώσεις και εργαλεία.
- PHP >=8.1
- Συνθέτης
- Διακομιστής Apache/Nginx
- VS Code Editor (Προαιρετικό)
- MySQL (έκδοση > 5)
Θα χρησιμοποιήσω το composer για να δημιουργήσω μια νέα εφαρμογή στο Laravel 10. Ωστόσο, εάν είστε χρήστης Mac, μπορείτε επίσης να χρησιμοποιήσετε το πρόγραμμα εγκατάστασης Laravel.
Εγκαταστήστε το Laravel 10 για μια εφαρμογή CRUD
Για την εγκατάσταση μιας εφαρμογής Laravel, κοιτάξτε το τερματικό και πατήστε την παρακάτω εντολή.
composer create-project --prefer-dist laravel/laravel todo-appΘα χρειαστούν μερικά δευτερόλεπτα για να έχετε μια ολοκαίνουργια εφαρμογή Laravel 10.
Μόλις εγκατασταθεί το Laravel 10, μπορείτε να ανοίξετε το έργο στο πρόγραμμα επεξεργασίας. Τώρα, εκτελέστε την εφαρμογή χρησιμοποιώντας την παρακάτω εντολή.
php artisan serveΤώρα, πλοηγηθείτε στο πρόγραμμα περιήγησης και επισκεφθείτε localhost:8000
Έτσι, η εφαρμογή Laravel 10 λειτουργεί σωστά. Τώρα, στο επόμενο βήμα, θα ρυθμίσουμε τη βάση δεδομένων για το έργο μας.
Δημιουργήστε και διαμορφώστε μια βάση δεδομένων για την εφαρμογή CRUD
Θα διαχειρίζομαι τη βάση δεδομένων με phpMyAdmin. Ως εκ τούτου, έχω δημιουργήσει μια βάση δεδομένων και τώρα πρόκειται να διαμορφώσω τα διαπιστευτήρια της βάσης δεδομένων στην εφαρμογή Laravel 10.
CREATE DATABASE laravel_todo;Για τη διαμόρφωση της βάσης δεδομένων στην εφαρμογή Laravel, πρέπει να πλοηγηθείτε στον ριζικό φάκελο του έργου. Τώρα, αναζητήστε το .env αρχείο και στην ενότητα Βάση δεδομένων, προσθέστε τις παρακάτω διαμορφώσεις.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_todo
DB_USERNAME=root
DB_PASSWORD=rootΜετά τη διαμόρφωση της βάσης δεδομένων, πρέπει να δημιουργήσουμε το μοντέλο, τη μετεγκατάσταση και τον ελεγκτή για την εφαρμογή todo.
Δημιουργήστε ένα μοντέλο, μια μετεγκατάσταση και έναν ελεγκτή στο Laravel 10
Μπορείτε να δημιουργήσετε ένα μοντέλο, μια μετεγκατάσταση και έναν ελεγκτή με μία κίνηση χρησιμοποιώντας την παρακάτω εντολή.
php artisan make:model Todo -mcΉ μπορείτε να ακολουθήσετε τη γραμμή εντολών για την επιλογή όπως φαίνεται παρακάτω.
Έχω δημιουργήσει τον ελεγκτή πόρων για την εφαρμογή Todo.
Συνιστάται: Πώς να εγκαταστήσετε και να ρυθμίσετε το PHP Composer στο MacOS
Τώρα, στο επόμενο βήμα, πρέπει να γράψετε ένα σχήμα για τους πίνακες στη μετανάστευση που δημιουργήθηκε.
Προσθέστε την εφαρμογή Migration For Todo
Για τη δημιουργία ενός σχήματος βάσης δεδομένων, απλώς κοιτάξτε τον φάκελο με τις μετεγκαταστάσεις. Τώρα, βρείτε το δημιουργημένο αρχείο μετεγκατάστασης.
Στη συνέχεια, προσθέστε το σχήμα όπως φαίνεται παρακάτω.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->string('description')->nullable();
$table->boolean('is_completed')->default(false);
$table->boolean('is_deleted')->default(false);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('todos');
}
};Αφού δημιουργήσετε τη μετεγκατάσταση, πρέπει να προσθέσετε μια ιδιότητα με δυνατότητα συμπλήρωσης στο μοντέλο της. Λοιπόν, μεταβείτε στο μοντέλο Todo.php. Στη συνέχεια, προσθέστε το παρακάτω απόσπασμα εκεί.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
use HasFactory;
protected $fillable = [
'title',
'description',
'is_completed',
'is_deleted'
];
}Στη συνέχεια, πρέπει να κάνετε μετεγκατάσταση του σχήματος. Έτσι, θα απορρίψει την αρχιτεκτονική του πίνακα στη βάση δεδομένων. Για να το κάνετε αυτό, θα χρειαστεί να εκτελέσετε την παρακάτω εντολή.
php artisan migrateΗ παραπάνω εντολή θα μεταφέρει τους πίνακες όπως φαίνεται παρακάτω.
Μετά τη μετεγκατάσταση, θα ξεκινήσουμε το λειτουργικό μέρος της εφαρμογής CRUD στο Laravel 10.
Λειτουργικότητα για εφαρμογή CRUD στο Laravel 10
Δημιουργούμε την εφαρμογή Todo. Ως εκ τούτου, πρέπει να γράψουμε τα παρακάτω αποσπάσματα στο TodoController.
<?php
namespace App\Http\Controllers;
use App\Models\Todo;
use Illuminate\Http\Request;
class TodoController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
try {
$todos = Todo::all();
return view('index', compact('todos'));
} catch (Exception $e) {
Log::error($e->getMessage());
}
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
try {
$todo = Todo::create([
'title' => $request->title,
'description' => $request->description
]);
if ($todo) {
return redirect()->route('todos.index')->with('success', 'Todo list created successfully!');
}
return back()->with('error', 'Unable to create todo. Please try again.');
} catch (Exception $e) {
Log::error($e->getMessage());
}
}
/**
* Display the specified resource.
*/
public function show(Todo $todo)
{
return view('show', compact('todo'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Todo $todo)
{
return view('edit', compact('todo'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Todo $todo)
{
try {
$todo['title'] = $request->title;
$todo['description'] = $request->description;
$todo->save();
return redirect()->route('todos.index')->with('success', 'Todo list updated successfully!');
} catch (Exception $e) {
Log::error($e->getMessage());
}
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Todo $todo)
{
try {
if ($todo) {
$todo->delete();
return redirect()->route('todos.index')->with('success', 'Todo list deleted successfully!');
}
return back()->with('error', 'Todo list not found!');
} catch (Exception $e) {
Log::error($e->getMessage());
}
}
}Αφού προσθέσουμε τις παραπάνω λειτουργίες, πρέπει να δημιουργήσουμε δύο προβολές αντίστοιχα.
Συνιστάται: Κυκλοφόρησε το Laravel 10 – Δείτε τα εκπληκτικά χαρακτηριστικά του Laravel 10
Δημιουργία Προβολών για την εφαρμογή Todos
Για την εφαρμογή todos, θα δημιουργήσουμε τις ακόλουθες προβολές.
- master.blade.php
- index.blade.php
- create.blade.php
- show.blade.php
- edit.blade.php
Τώρα, ας ξεκινήσουμε προσθέτοντας ένα προς ένα τα αποσπάσματα σε αυτές τις προβολές.
@extends('master')
@section('content')
@section('title') | Todos Listing @endsection
<div class="row">
<div class="col-xl-12 text-end">
<a href="{{ route('todos.create') }}" class="btn btn-primary"> Add Todo </a>
</div>
</div>
<div class="card my-3">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
@if (Session::has('success'))
<div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
{{ Session::get('success') }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
@elseif (Session::has('error'))
<div class="alert alert-danger d-flex alert-dismissible align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
{{ Session::get('error') }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
@endif
<table class="table table-striped">
<thead class="bg-secondary text-light">
<tr >
<th>Id</th>
<th width="20%">Title</th>
<th width="45%">Description</th>
<th width="15%">Completed</th>
<th width="20%">Action</th>
<tr>
</thead>
<tbody>
@forelse ($todos as $todo)
<tr>
<td>{{ $todo->id }}</td>
<td>{{ $todo->title }}</td>
<td>{{ $todo->description }}</td>
<td>{{ $todo->is_completed == 1 ? 'Yes' : 'No' }}</td>
<td>
<form action="{{ route('todos.destroy', $todo->id) }}" method="post">
@csrf
<a href="{{ route('todos.show', $todo->id) }}" title="View" class="btn btn-sm btn-info">
View
</a>
<a href="{{ route('todos.edit', $todo->id) }}" title="Edit" class="btn btn-sm btn-success">
Edit </a>
@method('DELETE')
<button type="submit" onclick="return confirm('Are you sure?');" title="Delete" class="btn btn-sm btn-danger"> Delete </button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="4">
<p class="text-danger text-center fw-bold"> No todos found! </p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@endsectionΣτη συνέχεια, θα έχουμε μια άποψη για να δημιουργήσουμε ένα όλα λίστα. Επομένως, προσθέστε το παρακάτω απόσπασμα για αυτό.
@extends('master')
@section('content')
@section('title') | Create Todo @endsection
<div class="row">
<div class="col-xl-6 col-lg-8 mx-auto">
<form action="{{ route('todos.store') }}" method="post">
@csrf
<div class="card">
<div class="card-header">
<h5 class="card-title"> Create Todo </h5>
</div>
<div class="card-body">
<div class="form-group my-3">
<label for="title"> Title </label>
<input type="text" required name="title" id="title" class="form-control" placeholder="Title" />
</div>
<div class="form-group my-3">
<label for="description"> Description </label>
<textarea name="description" required id="description" class="form-control" placeholder="Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</div>
</form>
</div>
</div>
@endsectionΠαρόμοια, έχουμε μια ξεχωριστή προβολή για την εμφάνιση του ενιαία όλα.
@extends('master')
@section('content')
@section('title') | View Todo @endsection
<div class="row">
<div class="col-xl-6 col-lg-8 mx-auto">
<div class="card">
<div class="card-header">
<h5 class="card-title"> View Todo </h5>
</div>
<div class="card-body">
<div class="form-group my-3">
<label for="title"> Title </label>
<input type="text" readonly disabled class="form-control" value="{{ $todo->title ?? '' }}" />
</div>
<div class="form-group my-3">
<label for="description"> Description </label>
<textarea readonly disabled class="form-control" placeholder="Description">{{ $todo->description ?? '' }}</textarea>
</div>
<div class="form-group my-3">
<label for="description"> Completed </label>
<input type="text" readonly disabled class="form-control" value="{{ $todo->is_completed == 1 ? 'Yes' : 'No' }}" />
</div>
<div class="form-group">
<a href="{{ route('todos.index') }}" class="btn btn-success"> Back </a>
</div>
</div>
</div>
</div>
</div>
@endsectionΣτη συνέχεια, έχουμε επεξεργασία blade αρχείο για να ενημερώσετε την εργασία.
@extends('master')
@section('content')
@section('title') | Update Todo @endsection
<div class="row">
<div class="col-xl-6 col-lg-8 mx-auto">
<form action="{{ route('todos.update', $todo->id) }}" method="post">
@csrf
@method('PUT')
<div class="card">
<div class="card-header">
<h5 class="card-title"> Update Todo </h5>
</div>
<div class="card-body">
<div class="form-group my-3">
<label for="title"> Title </label>
<input type="text" name="title" required id="title" class="form-control" placeholder="Title" value="{{ $todo ? $todo->title : '' }}" />
</div>
<div class="form-group my-3">
<label for="description"> Description </label>
<textarea name="description" required id="description" class="form-control" placeholder="Description">{{ $todo ? $todo->description : '' }}</textarea>
</div>
<div class="form-group my-3">
<label for="completed"> Completed </label>
<select class="form-control" name="completed" id="completed">
<option value="1" {{ $todo->is_completed == 1 ? 'selected' : '' }}> Yes </option>
<option value="0" {{ $todo->is_completed == 0 ? 'selected' : '' }}> No </option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success"> Update </button>
</div>
</div>
</div>
</form>
</div>
</div>
@endsectionΑυτό ήταν, τελειώσαμε με το κομμάτι της λειτουργικότητας.
Συνιστάται: Πώς να εγκαταστήσετε και να ρυθμίσετε το PHP Composer στο MacOS
Όμως, για να τρέξουμε την εφαρμογή todo, κάτι χάσαμε. Αυτή είναι η διαδρομή.
Προσθήκη διαδρομής για εφαρμογή CRUD στο Laravel 10
Για την προσθήκη της διαδρομής για αυτό Εφαρμογή CRUD (εφαρμογή Todo), μεταβείτε στο αρχείο web.php. Στη συνέχεια, προσθέστε τις παρακάτω διαδρομές.
<?php
use App\Http\Controllers\TodoController;
use Illuminate\Support\Facades\Route;
Route::resource('todos', TodoController::class);Τώρα, ήρθε η ώρα να ελέγξετε το αποτέλεσμα. Επομένως, εκτελέστε την εφαρμογή στο πρόγραμμα περιήγησης και ελέγξτε για τα αποτελέσματα.
Ελέγξτε τα αποτελέσματα της εφαρμογής CRUD στο Laravel 10
Αρχικά, δεν θα έχουμε λίστα Todo. Ξεκινήστε λοιπόν να προσθέτετε τη λίστα εργασιών.
Αφού προσθέσετε τη λίστα Todo, αποθηκεύστε την.
Έχουμε την επιλογή Προβολή για να ελέγξουμε τις λεπτομέρειες Todo.
Μπορείτε να ενημερώσετε τη λίστα εργασιών κάνοντας κλικ στην επιλογή επεξεργασίας.
Αυτό είναι όλο για τη θέση της εφαρμογής CRUD στο Laravel 10.
Τελικές Λέξεις
Ως αποτέλεσμα, δημιουργήσαμε μια βασική εφαρμογή Todo χρησιμοποιώντας λειτουργίες CRUD στο Laravel 10. Μπορείτε να επεκτείνετε περαιτέρω αυτήν την εφαρμογή Todo ανάλογα με τις ανάγκες σας. Αυτό ήταν απλώς και επίδειξη για τους αρχάριους που θέλουν να ξεκινήσουν το Laravel 10 απευθείας χωρίς να έχουν προηγούμενη γνώση σχετικά με αυτό. Ελπίζω ότι αυτή η ανάρτηση θα σας φανεί χρήσιμη.
