Step-by-Step Guide to Image Upload with CRUD 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)
Installation of Laravel 10
To set up Laravel, you want to have composer hooked up in your system. If you don`t have it, you could down load and set up it from the reliable 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”.
Setting up the database
Next, we want to installation the database for our application. Open the .env record withinside the root listing of your undertaking and replace 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.
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 want to replace the migration record to feature the desired fields for our merchandise table. Open the migration record and upload the subsequent 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
Create a Controller
In this step, we can create a controller for our application. To create a controller, run the subsequent command withinside the terminal
php artisan make:controller ProductController --resource
This will create a controller named “ProductController”.
Define routes
Now, we want to outline the routes for our application. Open the “routes/web.php” report and upload the subsequent code:
Route::resource('products', 'ProductController');
Create Views
In this step, we are able to create perspectives for our application. Create a listing named “products” interior the “resources/perspectives” listing and create the subsequent documents interior it:
create.blade.php
edit.blade.php
index.blade.php
show.blade.php
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!');
}
}
Test the application
Now, we're geared up to check our application. Start the improvement server via way of means of walking the subsequent command withinside the terminal:
php artisan serve
Open your browser and navigate to “http://localhost:8000/products”. You have to be capable of carry out CRUD operations with picture add functionality.
FAQ's
What is CRUD functionality?
CRUD is an acronym from the world of computer programming and refers to the four functions considered necessary to implement a persistent storage application: create, read, update and delete.
What are the 7 CRUD methods?
CRUD is 4 distinct operations and there are seven RESTful actions. Create, Read, Update, Edit, Delete are CRUD actions. R of CRUD holds Index, New, Show, Edit and Edit, and Delete. The actions determine whether your consuming data, or feeding it, all the others are feeding it.
What are the 4 CRUD methods?
CRUD is the acronym for CREATE, READ, UPDATE and DELETE. These terms describe the four essential operations for creating and managing persistent data elements, mainly in relational and NoSQL databases.
How to upload and display an image in HTML?
Use the code < img src=”(your title)” alt=”Image” height=”(your image height)” width=”(your image width)”>. HTML is pretty straightforward language but it's okay if you don't want to learn it in-depth.
What is image API?
The Image API enables you to create Image objects that store bitmap data from GIF, animated GIF, JPEG, and PNG files.
0 Comments
No Comment Available