Welcome to our comprehensive guide on how to build a CRUD (Create, Read, Update, and Delete) application using Laravel 10 and incorporating image uploads. Laravel is a popular PHP framework known for its elegance and simplicity, which makes it a top choice for web developers. In this tutorial, we will walk you through the process of creating a CRUD application while also integrating image upload functionality.
Prerequisites:
- PHP (version 7.4 or higher)
- Composer (latest version)
- Laravel 10 (latest version)
- A code editor (e.g., Visual Studio Code)
- A web server (e.g., Apache or Nginx)
- A database (e.g., MySQL or SQLite)
Let’s dive in!
Step 1: Installation of Laravel 10
To install Laravel, you need to have composer installed on your system. If you don’t have it, you can download and install it from the official website.
Once you have installed Composer, open your terminal and run the following command to install Laravel 10:
composer create-project --prefer-dist laravel/laravel laravel10crud
This will install Laravel 10 in a directory named “laravel10crud”.
Step 2: Setting up the database
Next, we need to set up the database for our application. Open the .env file in the root directory of your project and update the following:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel10crud
DB_USERNAME=root
DB_PASSWORD=
Replace the values with your own database details.
Step 3: Create a Model and Migration
Now, we will create a model and migration for our application. To create a model and migration, run the following command in the terminal:
php artisan make:model Product -m
This will create a model named “Product” and a migration for the same.
Next, we need to update the migration file to add the required fields for our products table. Open the migration file and add the following code:
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description');
$table->float('price');
$table->string('image');
$table->timestamps();
});
}
Finally, run the following command to create the products table in the database:
php artisan migrate
Step 4: Create a Controller
In this step, we will create a controller for our application. To create a controller, run the following command in the terminal:
php artisan make:controller ProductController --resource
This will create a controller named “ProductController”.
Step 5: Define routes
Now, we need to define the routes for our application. Open the “routes/web.php” file and add the following code:
Route::resource('products', 'ProductController');
Step 6: Create Views
In this step, we will create views for our application. Create a directory named “products” inside the “resources/views” directory and create the following files inside it:
- create.blade.php
- edit.blade.php
- index.blade.php
- show.blade.php
Step 7: Implement CRUD functionality
Finally, we need to implement the CRUD functionality in the controller. Open the “ProductController” and add the following code:
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('products.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required|numeric',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
$product = new Product([
'name' => $request->get('name'),
'description' => $request->get('description'),
'price' => $request->get('price'),
'image' => $imageName,
]);
$product->save();
return redirect('/products')->with('success', 'Product saved!');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$product = Product::find($id);
return view('products.show', compact('product'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$product = Product::find($id);
return view('products.edit', compact('product'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$request->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required|numeric',
'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$product = Product::find($id);
$product->name = $request->get('name');
$product->description = $request->get('description');
$product->price = $request->get('price');
if ($request->hasFile('image')) {
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
$product->image = $imageName;
}
$product->save();
return redirect('/products')->with('success', 'Product updated!');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$product = Product::find($id);
$product->delete();
return redirect('/products')->with('success', 'Product deleted!');
}
}
Step 8: Test the application
Now, we are ready to test our application. Start the development server by running the following command in the terminal:
php artisan serve
Open your browser and navigate to “http://localhost:8000/products”. You should be able to perform CRUD operations with image upload functionality.
Conclusion
In this tutorial, we learned how to perform CRUD operations with image upload functionality in Laravel 10. We covered the basics of Laravel and learned how to create a model, migration, controller, views, and routes. We also learned how to validate form data and perform CRUD operations in the database. I hope this tutorial was helpful and you can use the knowledge you gained to build your own web applications.