Monday, January 3, 2022

Let's start quickly. If you want to create a Progress Bar and see it in the Terminal, let us show you the steps so that it can be used in any project idea

First, we create a command

php artisan make:command ProgressBarTestCommand

Inside app/Console/Commands/ProgressBarTestCommand.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class ProgressBarTestCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'progressbar:test';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $items = range(1, 3);

        $progressbar = $this->output->createProgressBar(count($items));

        $progressbar->start();

        foreach ($items as $item) {
            // perform some operation
            sleep(1);

            $progressbar->advance();
        }

        $progressbar->finish();

        return 0;
    }
}

Let's choose it and see the result and tell us about it in the comments

php artisan progressbar:test

How to upload multiple images with preview using Laravel and Vue

Image upload is one of the most popular features in modern web. But from all the components that can make up a form, the image upload component could be one of the most frustrating for a lot of developers since it demand a lot of effort and styling. And that's why I created Media-Upload package.

Media-Upload is an easy to setup Vue package for multiple images upload with preview that support the create and the update form, and it will handle the upload for you via ajax requests.

For this tutorial, we will create a simple form where you can also upload images using Laravel 8, Vue 3 and Bootstrap 5.

As you can see, media-upload preview the images instead of just an input file field.

Step 1: Backend Setup

First of all, let's stat with the backend by preparing the database.
we will need two tables, the posts table

Schema::create('posts', function (Blueprint $table) {
  $table->id();
  $table->string('title');
  $table->string('description');
  $table->timestamps();
});

and the images table

Schema::create('images', function (Blueprint $table) {
  $table->id();
  $table->foreignId('post_id')->constrained();
  $table->string('name');
  $table->timestamps();
});

and don't forget to setup your Models too.

Step 2: Media-Upload installation

You can install media-upload via npm:

$ npm install @s1modev/media-upload

or via yarn

$ yarn add @s1modev/media-upload

after the installation you can import it on your app.js file

require('./bootstrap');

import { createApp } from 'vue';

import { UploadMedia, UpdateMedia } from '@s1modev/media-upload';

let app=createApp({})

app.component('upload-media' , UploadMedia);
app.component('update-media' , UpdateMedia);

app.mount("#app")

Step 3: Create/Add form

In our create.blade.php we will create two inputs and use the <upload-media/> component

<form action="{{route('post.create')}}" method="post">
  @csrf
  <div class="form-group">
    <label for="">Title</label>
    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{old('title')}}
  </div>
  <div class="form-group mt-3">
    <label for="">Description</label>
    <textarea name="description" rows="4" class="form-control @error('title') is-invalid @enderror">{{old('description')}}</textarea>
  </div>
  <div class="mt-3">
    <label for="" class="m-0">Media</label>
      <div id="app">
        <upload-media 
          server='/api/upload'
          error="@error('media'){{$message}}@enderror">
        </upload-media>
      </div>
    </div>
    <button class="btn btn-primary text-white mt-4">Submit</button>
</form>

Usage

Now we will need to add this line in our api.php

//upload image
Route::post('/upload', [ImageController::class, 'store'])->name('upload');

In the ImageController we will create a function store() that temporary stores the uploaded image in tmp\uploads.

public function store(Request $request){
  $path = public_path('tmp/uploads');

  if (!file_exists($path)) {
    mkdir($path, 0777, true);
  }

  $file = $request->file('image');

  $name = uniqid() . '_' . trim($file->getClientOriginalName());

  $file->move($path, $name);

  return ['name'=>$name];
}

store() function will give the uploaded image a unique name and stores it in tmp/upload, and will return the unique name to <upload-media /> component so it could continue its work.

Create Post Controller

Setting up the web.php

Route::get('/post/create', [PostController\Create::class, 'index']);
Route::post('/post/create', [PostController\Create::class, 'store'])->name('post.create');

And in our create controller PostController/Create.php this is how the store() function looks like

public function store(Request $request){

  $this->validate($request,[
    'title'=>'required',
    'description'=>'required',
    'media'=>'required',
  ]);

  $post = Post::create([
    'title'=>$request->title,
    'description'=>$request->description,
  ]);

  foreach($request->media as $image){     
    $from = public_path('tmp/uploads/'.$image);
    $to = public_path('post_images/'.$image);

    File::move($from, $to);
    $post->images()->create([
      'name' => $image,
    ]);
  }

  $posts = Post::get();
  return redirect()->route('post.dashboard', ['posts'=>$posts]);
}

This code simply store the post and uses the unique images names to move the added images from the temporary location /tmp/uploads file to its final location /post_images.

Note that tmp/uploads and /post_images directories need to be created!

Step 4: Update/Edit form

In the update form update.blade.php we will need to use the second component <update-media/>

<form action="{{route('post.update', $post->id)}}" method="post">
  @csrf
    <div class="form-group">
      <label for="">Title</label>
      <input type="text" name="title" class="form-control" value="{{$post->title}}" required>
    </div>
    <div class="form-group mt-3">
      <label for="">Description</label>
      <textarea name="description" rows="4" class="form-control" required>{{$post->description}}</textarea>
    </div>
    <div class="mt-3" id="app">
      <update-media 
        server='/api/upload' 
        media_file_path='/post_images'
        media_server="/api/media/{{$post->id}}" 
        error="@error('media'){{$message}}@enderror">
      </update-media>
    </div>
    <button class="btn btn-primary text-white mt-4">Save</button>
</form>

will need the saved images names to preview it, so don't forget to add this line in the api.php

//return post images
Route::post('/media/{post}', [ImageController::class, 'getImages'])->name('post.images');

and also we should add the getImages function in our ImageController

public function getImages(Post $post){
  $images = $post->images;
  return ['media'=>$images];
}

Update post controller

we will need to add this two line in our web.php

Route::get('/post/update/{post}',[PostController\Update::class, 'index']);
Route::post('/post/update/{post}',[PostController\Update::class, 'update'])->name('post.update');

And finally we will need an update() function in our PostController/Update.php

public function update(Post $post, Request $request){
  $this->validate($request,[
    'title'=>'required',
    'description'=>'required',
    'media'=>'required',
  ]);

  $post->update($request->all());

  if(isset($request->added_media)){
    foreach($request->added_media as $image){

      $from = public_path('tmp/uploads/'.$image);
      $to = public_path('post_images/'.$image);

      File::move($from, $to);
      $post->images()->create([
        'name' => $image,
      ]);
    }
  }

  if(isset($request->deleted_media)){
    foreach($request->deleted_media as $deleted_media){
      File::delete(public_path('post_images/'.$deleted_media));
      Image::where('name', $deleted_media)->delete();
    }
  }

  $posts = Post::get();
  return redirect()->route('post.dashboard', ['posts'=>$posts]);
}

this function basically add the added images and delete the deleted image.

You will find this project in this repository

Homework

In the situation when a user upload the images on the form but leave the form before the final submit, the temporary images are still stored on the server and won't get moved or deleted.

well it’s up to you how to deal with this situation, but I recommend you to schedule an artisan command using Laravel scheduling to cleanup all those images that have not been used.

https://dev.to/simodev/how-to-upload-multiple-images-with-preview-using-laravel-and-vue-282j

Deploy Laravel Project with Apache on Ubuntu

Hello Developers,

Laravel is a free and open-source PHP framework based on the Symfony framework and follows the Model-View-Controller design pattern. It comes with tools and resources that help you build robust and modern PHP applications. It offers a rich set of features, including Eloquent ORM, Support MVC Architecture, Template Engine, Libraries & Modular, Multiple back-ends for session and cache storage, and more.

Laravel powered millions of applications on the internet. But there are very few articles on the internet explaining how you can deploy the Laravel application with Apache on the Ubuntu server.

1. Prerequisites

The operating system running Ubuntu Linux
A root or non-root user with Sudo privileges
Has stable internet connection
Terminal window / Command line

2. Install Apache On Ubuntu

If you have installed Apache, you can skip this. If you have not installed Apache, then you click on this link: Install Apache on Ubuntu 20.04 LTS

3. Install Composer On Ubuntu

There are a few steps that we can follow to deploy Laravel on Apache. The first one is to install all the required dependencies on the server. The second is to clone the git repository or create a new Laravel project inside our project directory.
So, Let's get started with the first step.

If we are going to clone a git repo, we have to install git on our server. It is straightforward. And, we also have to install composer on the server because we have to install Laravel's dependencies using composer update or composer install command. So, Let's, first of all, install the git and composer on our server.

Execute the following commands to install git and composer on the Ubuntu server.

sudo apt-get update
sudo apt-get install git composer -y

4. Install Laravel

Option 1: Clone a Git Repository

Git is a free and open-source distributed version control system designed to handle small and extensive projects with speed and efficiency.

Git is the most popular version control system developed by Linux itself, Linus Torvalds. It is straightforward to use, and millions of developers worldwide use git to manage different versions of their code. If you are working your Laravel code with git, go to your site's document root on your server and execute the git clone command.

I will deploy it inside the default document root of the Apache webserver. It means that I will navigate to /var/www/html and execute the git clone command, just like this.

cd /var/www/html
git clone https://github.com/laravel/laravel.git .
composer install

For example, I am cloning the Laravel project from the official git repository of Laravel. You can clone your project from the repository you desire. Just replace the URL, and you are good to go. We added the "." at the end of the git clone command to clone the project files in the same directory.

Option 2: Deploy a new Laravel Project

If you choose the first option, you can skip this second option. But if you want to deploy a brand new Laravel project on your server, you can use the composer. Execute the following commands in your DocumentRoot to deploy a new Laravel project.

cd /var/www/html
composer create-project --prefer-dist laravel/laravel .

5. Update ENV File and Generate An Encryption Key

To copy the file from .env.example to .env and generate an encryption key, run the following commands.

cd /var/www/html
cp .env.example .env
php artisan key:generate

Next, edit the .env file and define your database:

cd /var/www/html
nano .env

Change the following lines:

APP_URL=https://techvblogs.com

DB_CONNECTION=mysql
DB_HOST=YOUR_DB_HOST
DB_PORT=3306
DB_DATABASE=techvblogs
DB_USERNAME=admin
DB_PASSWORD=YOUR_PASSWORD

After updating your .env file, press CTRL+X, Y, and Enter key to save the .env file.

6. Configure Apache for Laravel

Laravel is tricky. It is because the main index.php file of the project lives in the project's public directory. It means that we have to update our virtual host so that it should route the traffic into the public directory inside our project directory.

Next, We will need to create an Apache virtual host configuration file for Laravel. Run the following command:

sudo nano /etc/apache2/sites-available/techvblogs.conf

Add the following lines:

<VirtualHost *:80>

    ServerAdmin admin@techvblogs.com
    ServerName techvblogs.com
    DocumentRoot /var/www/html/public

    <Directory /var/www/html/public>
       Options +FollowSymlinks
       AllowOverride All
       Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

After updating your virtual host file, press CTRL+X, Y, and Enter key to save the updated virtual host file.

Next, activate the Apache rewrite module and Laravel virtual host configuration using the following command.

sudo a2enmod rewrite
sudo a2ensite techvblogs.conf

Finally, restart the Apache server to apply the changes. Run the following command:

sudo service apache2 restart

If your Apache server successfully restarts, you will be able to access your Laravel project in the browser.

Thank you for reading this blog.

https://dev.to/sureshramani/how-to-deploy-laravel-project-with-apache-on-ubuntu-36p3

Mehedi Hasan's BLog