Watch more tutorial at youtube. Subscribe now!

Laravel 10 Simple CRUD with Image 2023 Updated

Laravel 10 CRUD with Image, Laravel 10 simple CRUD with Image
3 min read

Laravel 10 Simple CRUD  with Image 2023 Updated {tested windows 10 & windows 11 xampp server}



Sure, here is a simple example of a CRUD (Create, Read, Update, Delete) application using Laravel with image uploading functionality:

1. First, create a new Laravel project using the following command:

```
composer create-project --prefer-dist laravel/laravel your-project-name
```
2. Next, create a database and add the database credentials to the `.env` file.

3. Generate a model and migration for the `Posts` table using the following command:

```
php artisan make:model Post -m
```

4. In the `posts` migration file, add the following code to create the necessary columns for the `Post` model:

```php
Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content');
    $table->string('image')->nullable();
    $table->timestamps();
});
```

5. Run the migration to create the `posts` table:

```
php artisan migrate
```

6. Create a controller using the following command:

```
php artisan make:controller PostController --resource
```
7. In the `PostController`, add the following code:

```php
public function store(Request $request)
{
    $request->validate([
        'title' => 'required',
        'content' => 'required',
        'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048'
    ]);

    $post = new Post;
    $post->title = $request->title;
    $post->content = $request->content;

    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $name = time().'.'.$image->getClientOriginalExtension();
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $name);
        $post->image = $name;
    }

    $post->save();

    return redirect()->route('posts.index');
}

public function update(Request $request, $id)
{
    $request->validate([
        'title' => 'required',
        'content' => 'required',
        'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048'
    ]);

    $post = Post::find($id);
    $post->title = $request->title;
    $post->content = $request->content;

    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $name = time().'.'.$image->getClientOriginalExtension();
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $name);
        $post->image = $name;
    }

    $post->save();

    return redirect()->route('posts.index');
}
```

8. In your`routes/web.php` file, add the following routes:

```php
Route::resource('posts', 'PostController');
```


9. Create the views for the CRUD operations. Here's an example of the `create.blade.php` view:

```html
<form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
    @csrf
    <div>
        <label for="title">Title</label>
        <input type="text" name="title" id="title" required>
    </div>
    <div>
        <label for="content">Content</label>
        <textarea name="content" id="content" required></textarea>
    </div>
    <div>
        <label for="image">Image</label>
        <input type="file" name="image" id="image">
    </div>
    <button type="submit">Create Post</button>
</form>
```

10. Lastly, to display the image in the view, add the following code to the `index.blade.php` file:

```html
@foreach($posts as $post)
    <div>
        <h2>{{ $post->title }}</h2>
        <p>{{ $post->content }}</p>
        @if($post->image)
            <img src="{{ asset('images/'.$post->image) }}" alt="{{ $post->title }}" height="100">
        @endif
               <div>
            <a href="{{ route('posts.edit', $post->id) }}">Edit</a>
            <form method="POST" action="{{ route('posts.destroy', $post->id) }}">
                @csrf
                @method('DELETE')
                <button type="submit">Delete</button>
            </form>
        </div>
    </div>
@endforeach
```
And that's it! You now have a simple Laravel CRUD application with image uploading functionality.

إرسال تعليق