André Schürrle

1650888368

So laden Sie eine Bilddatei mit Summernote Editor in Laravel hoch

In diesem Tutorial erfahren Sie, wie Sie Bilddateien mit dem Summernote-Editor in Laravel 8-Anwendungen hochladen.

Installieren Sie die Laravel 8-App

Führen Sie den folgenden Befehl auf dem Terminal aus, um das Laravel Fresh Application Setup für die Implementierung des Bilduploads mit dem Summernote-Editor in der Laravel 8-App zu installieren oder herunterzuladen:

composer create-project --prefer-dist laravel/laravel blog

App mit Datenbank verbinden

Navigieren Sie zu Ihrem Projektstammverzeichnis und öffnen Sie die „.env“-Datei. Fügen Sie dann wie folgt Datenbankdetails in die .evn-Datei ein:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Migrations- und Modelldatei erstellen

Führen Sie den folgenden Befehl auf dem Terminal aus, um eine Migration für die Post-Tabelle und das Post-Modell in der Laravel 8-App zu erstellen. Führen Sie also den folgenden Befehl an der Eingabeaufforderung aus:

cd blog

php artisan make:model Post -m

Navigieren Sie als Nächstes zu database/migrations und öffnen Sie create_posts_table.php. Aktualisieren Sie dann den folgenden Code in der Datei create_books_table.php wie folgt:

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->longText('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Führen Sie dann den folgenden Befehl an der Eingabeaufforderung aus:

php artisan migrate

Dieser Befehl erstellt Tabellen in Ihrer Datenbank.

Navigieren Sie danach zum App-Verzeichnis und öffnen Sie die Modelldatei Post.php. Fügen Sie dann den folgenden Code wie folgt in die Post.php-Modelldatei ein:

app/Post.php

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
}

Routen hinzufügen

Navigieren Sie zum Routenordner und öffnen Sie die Datei web.php. Fügen Sie dann die folgenden Routen wie folgt in die Datei web.php ein:

use App\Http\Controllers\PostController;

Route::get('summernote-image-upload', [PostController::class, 'index']);
Route::post('post-summernote-image-upload', [PostController::class, 'store']);

Controller erstellen

Führen Sie den folgenden Befehl auf dem Terminal aus, um eine Controller-Datei mit dem Namen PostController.php zu erstellen. Öffnen Sie also Ihr Terminal und führen Sie den folgenden Befehl aus, um die PostController-Datei wie folgt zu erstellen:

php artisan make:controller PostController

Navigieren Sie dann zu app/http/controllers und öffnen Sie die Datei PostController.php. Und aktualisieren Sie den folgenden Code in Ihrer PostController.php-Datei wie folgt:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Post;
 
class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('create');
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
   public function store(Request $request)
   {
 
       $this->validate($request, [
 
             'title' => 'required',
 
             'description' => 'required'
 
        ]);
 
    
       $description = $request->description;
 
       $dom = new \DomDocument();
 
       $dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);    
 
       $images = $dom->getElementsByTagName('img');
 
       foreach($images as $k => $img){
 
 
           $data = $img->getAttribute('src');
 
           list($type, $data) = explode(';', $data);
 
           list(, $data)      = explode(',', $data);
 
           $data = base64_decode($data);
 
           $image_name= "/upload/" . time().$k.'.png';
 
           $path = public_path() . $image_name;
 
           file_put_contents($path, $data);
 
           $img->removeAttribute('src');
 
           $img->setAttribute('src', $image_name);
 
        }
 
 
       $description = $dom->saveHTML();
 
       $summernote = new Post;
 
       $summernote->title = $request->title;
 
       $summernote->description = $description;
 
       $summernote->save();
 
 
 
   echo "<h1>Title</h1>" , $Title;
 
   echo "<h2>Description</h2>" , $description;
 
   }
 
}

Blade-Datei erstellen

Navigieren Sie zum Ordner Ressourcen/Ansichten. Und erstellen Sie 1 Blade-Ansichten mit dem Namen create.blade.php die Datei in diesem Ordner.

Öffnen Sie dann die Datei create.blade.php und aktualisieren Sie den folgenden Code in der Datei create.blade.php wie folgt:

<!DOCTYPE html>
<html>
<title>Laravel 8 Summernote Image Upload Example Tutorial - codequs.com</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">Laravel Summernote Image Upload Example</h6>
</div>
<div class="card-body">
<form method="post" action="{{ url('post-summernote-image-upload') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control"/>
</div>  
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea class="summernote" name="description"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
</body>
</html>

Entwicklungsserver ausführen

Führen Sie nun den folgenden Befehl auf dem Terminal aus, um den Entwicklungsserver zu starten:

php artisan serve

Testen Sie diese App

Öffnen Sie Ihren Browser und klicken Sie auf die folgende URL:

http://localhost:8000/summernote-image-upload

Laravel 8 Summernote Editor Bild-Upload-Beispiel, Sie haben gelernt, wie man Bilder mit Summernote Editor in Laravel-Apps hochlädt.

What is GEEK

Buddha Community

websolution stuff

websolution stuff

1612240385

How To Add Summernote Editor In Laravel

In this tutorial I will let you know how to use summernote editor in laravel, In laravel or php many editors are available but today I will give you example of summernote.

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

For summernote editor you need to add summernote js and css cdn, So, let’s start.

Read More : https://websolutionstuff.com/post/how-to-add-summernote-editor-in-laravel

Read More : How To Generate QR Code In Laravel

#laravel #summernote editor #editor #jquery #text editor

Seamus Quitzon

Seamus Quitzon

1595201363

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

websolution stuff

websolution stuff

1618976072

How To Hide Toolbar In Summernote Editor

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

In this small tutorial I will show you how to hide toolbar in summernote editor, many times customer’s have requirement to enable only specific tool or option in summernote editor, for this we need to customize toolbar in summernote.

How To Hide Toolbar In Summernote Editor

https://websolutionstuff.com/post/how-to-hide-toolbar-in-summernote-editor

#how to hide toolbar in summernote editor #summernote #editor #hide toolbar #summernote remove toolbar #summernote disable toolbar

websolution stuff

websolution stuff

1620190161

How To Hide Toolbar In Summernote Editor

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

In this small tutorial I will show you how to hide toolbar in summernote editor, many times customer’s have requirement to enable only specific tool or option in summernote editor, for this we need to customize toolbar in summernote.

How To Hide Toolbar In Summernote Editor

https://websolutionstuff.com/post/how-to-hide-toolbar-in-summernote-editor

#how to hide toolbar in summernote editor #summernote #editor #textbox editor #hide toolbar #toolbar

Juned Ghanchi

1621508419

Laravel App Development Company in India, Hire Laravel Developers

Hire our expert team of Laravel app developers for flexible PHP applications across various cloud service providers.

With this easy build technology, we develop feature-rich apps that make your complex business process a lot easier. Our apps are,

  • More secure and scalable.
  • A good framework lets you manage and organize resources better.
  • And have a rich community base.

Get your business a best in classlaravel app. Hire laravel app developers in India. We have the best organizational set-up to provide you the most advanced app development services.

#laravel app development company india #hire laravel developers india #laravel app development company #hire laravel developers #laravel development agency #laravel app programmers