Hello readers, welcome to our another blog on Laravel! This blog shares the tips on How to Upload Images with Titles and Descriptions using Laravel. This tutorial will take you through setting up a Laravel project, creating a database, and configuring models, controllers, and views to handle blog posts. You’ll learn to validate and store image uploads securely, ensuring a seamless blog creation experience.
By the end, you’ll have a comprehensive blog platform where users can create posts with enhanced imagery. Whether you’re new to Laravel or looking to enhance your skills, these steps will help you build and improve your projects efficiently. Let’s get started!
Before we begin, let’s thoroughly explore the necessary steps to install Laravel, ideal for those new to this framework!
Step 1: Open a terminal and set your desired path for creating the project.
Step 2: Now write the command “ composer create-project laravel/laravel post_a_blog “. This command will provide us with all the necessary files and a sample template for our project.
Step 3: The next command is “ cd [project-name] “ to open the project in the terminal.
Step 4: To view the sample template, we can use the command “ php artisan serve “.
Step 5: Now let’s create a database with the name “lara_blogposting” in MySQL, where we will store our blog data. Also, set the same DB name in the .env file to make a database connection with our project.
Step 6: After setting up all the above requirements, we will now start to code for our blog posting project.
(I) We will first create a model using the command “php artisan make: model Blog” and write the following code in it:
In post_a_blog\app\Models\Blog.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
use HasFactory;
public $fillable = ['pics', 'date', 'title', 'description'];
}
(ii)Next, we will make a controller using the command “ php artisan make: controller BlogController “ and write the following code in it :
In post_a_blog\app\Http\Controllers\BlogController.php
<?php
namespace App\Http\Controllers;
use App\Models\Blog;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class BlogController extends Controller
{
public function index()
{
$blogs = Blog::paginate(9);
return view('blogs.index', ['blogs' => $blogs]);
}
public function create()
{
return view('blogs.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'date' => 'required',
'description' => 'required',
'pics' => 'required|image|mimes: jpeg, png, jpg, gif,svg|max:2048',
]);
$input = $request->all();
if ($image = $request->file('pics')) {
$destinationPath = 'uploads/';
$profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
$image->move($destinationPath, $profileImage);
$input['pics'] = "$profileImage";
}
Blog::create($input);
return back()->with('msg', 'Blog added successfully.');
}
}
(iii)After creating the model and controller, we will code for the view of our project:
(a) Create a folder inside views with the name ‘layouts’ to keep the header and footer files
In post_a_blog\resources\views\layouts\ header.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<br><br>
In post_a_blog\resources\views\layouts\ footer.blade.php
<br><br>
<div class="card">
<div class="card-header">
Footer
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
In post_a_blog\resources\views\layouts\ main.blade.php
@include('layouts.header')
@yield('main-container')
@include('layouts.footer')
(b) Create a folder inside views with the name ‘blogs’ to keep the blog index and blog create files
In post_a_blog\resources\views\blogs\index.blade.php
@extends('layouts.main')
@section('main-container')
<div class="blog_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="blog_taital">Latest Blogs</h1>
<a href="/blog/create" class="btn btn-success">Add Blog</a>
</div>
</div>
<br>
<div class="blog_section_2">
<div class="row">
@foreach ($blogs as $blog)
<div class="col-md-4">
<div class="blog_img"><img src="/uploads/{{ $blog->pics }}"></div>
<div class="btn_main">
<div class="date_text">{{ $blog['date'] }}</div>
</div>
<div class="blog_box">
<h3 class="blog_text">{{ $blog['title'] }}</h3>
<p class="lorem_text"> {{ $blog['description'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endsection
In post_a_blog\resources\views\blogs\create.blade.php
@extends('layouts.main')
@section('main container)
@if (Session::has('msg'))
<div class="alert alert-danger">{{ Session::get('msg') }}</div>
@endif
<div class="container">
<div class=" panel panel-primary">
<div class="panel-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="cta-form">
<h2>Add Blog</h2>
<p></p>
</div>
<form action="/blog/create" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<label for="title" class="form__label">Title</label>
<input type="text" name="title" placeholder="Title" class="form__input" id="title" />
<br><br>
<label for="date" class="form__label">Date</label>
<input type="text" name="date" placeholder="date" class="form__input" id="date" />
<br><br>
<label for="description" class="form__label">Description</label>
<input type="text" name="description" placeholder="description" class="form__input"
id="description" />
<br><br>
<label for="Upload-image">Upload-image</label>
<input type="file" name="pics" class="form-control">
<br><br>
<button type="submit" class="btn btn-success">Upload</button>
</form>
</div>
</div>
</div>
@endsection
(iv) To store blog data, we will create a table in the database using migration. The command for migration will be “ php artisan make: migration create_blogs_table ”. Add the following code in the migration file:
In post_a_blog\database\migrations\ 2024_06_16_105341_create_blogs_table.php
<?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('blogs', function (Blueprint $table) {
$table->id();
$table->string('pics');
$table->string('date');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('blogs');
}
};
(v) Now, to create the specified table in the database, we will use the command “ php artisan migrate”.
(vi) At last, we will set routes.
In post_a_blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BlogController;
Route::get('/', [BlogController::class, 'index']);
Route::get('/blog/create', [BlogController::class, 'create']);
Route::post('/blog/create', [BlogController::class, 'store']);
Step 7: As we have made changes in the routes, we have to use the command “ php artisan optimize ” to optimize the routes.
Step 8: Finally, now it’s time to run our project using the command “php artisan serve”.
Our home page will have the following output
Creating a blog page will have the following output
After adding a new blog, our home page will look something like this:
In this way, we can upload an image with its title, and description in Laravel. I hope you will find these steps easy to understand and use them in enhancing your Laravel projects.
Explore beyond one framework! Enrich your skills as a versatile web developer with our comprehensive course at the Web Development Institute in Delhi.
Congratulations! You’ve now created a fully functional blog posting application in Laravel, complete with image uploads, titles, and descriptions. We’ve covered setting up the Laravel project, creating a database, and configuring models, controllers, and views. Additionally, you learned how to validate and store image uploads securely.
This tutorial should give you a solid foundation to build upon and customize further. We hope you found these steps straightforward and valuable for enhancing your Laravel projects. Those who are new to programming can go for professional courses at the Web Development Institute in Delhi.
PHP knowledge of Laravel is incomplete, make it complete with our master course on PHP and Laravel.
Thank you for following along, and happy coding! If you have any questions or need further assistance, feel free to reach out at ADMEC Multimedia Institute in Delhi.
Ready to level up your Laravel skills?
Dive into advanced techniques with our certificate course at ADMEC Multimedia. Master MVC architecture and create robust web applications using PHP Laravel.
Author Intro:
Hi, I’m Vishnu, a computer science student with a keen interest in web design. Currently pursuing a Web Design Master Course. I’m passionate about creating user-friendly and visually engaging websites. My journey is fueled by a love for blending creativity with cutting-edge technology to enhance digital experiences.
