Forem: jasuke-dev

Auto reload in laravel using laravel-mix and browserSync

jasuke-dev — Sun, 25 Dec 2022 05:30:46 +0000

if you want to auto reload the page every time your project file change you can use browserSync

Prerequisite

in this method you must already have laravel project and install and use laravel-mix

Install browserSync and browserSync web[ack plugin

npm install browser-sync browser-sync-webpack-plugin --save-dev

add following code to webpack.mix.js

mix.browserSync('127.0.0.1:8000');

then you can watch your project

watch your project with npm run watch (mix watch)

Add TailwindCss to laravel use laravel-mix

jasuke-dev — Sun, 25 Dec 2022 05:14:07 +0000

Here i will tell you how to add tailwindCss to your laravel project.

First install tailwindCss, postCss and autoprefixer packages to your project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Second add tailwindCss to laravel-mix configuration

on webpack.mix.js add following code

const mix = require('laravel-mix');

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

at './resource/css/app.css add this tailwind directives

@tailwind base;
@tailwind components;
@tailwind utilities;

Then add link style on your blade file

  <link rel="stylesheet" href="{{ asset('css/app.css') }}">

Lastly you can compile laravel-mix

make sure you have alredy set "npm run watch:mix" watch on package.json

npm run watch

Now you can use tailwindcss on your laravel project

Import Data From CSV with pdf file Using JSON and Base 64 in Laravel

jasuke-dev — Sun, 06 Mar 2022 08:57:51 +0000

Recently I have a problem that required importing data in CSV that in every row of the data related to one pdf file. Here examples of data in csv

The pdf file has name of data in column accno

The solution that I found is to convert csv data to JSON file along with converting pdf file to base 64 (This is done in order to be able to save the pdf file into JSON). Here the code to converting csv file to JSON with Python.

import csv
import base64
import json

with open('data_collection.csv', 'r') as datainput:
    reader = csv.reader(datainput, delimiter=';')

    list = []
    row = next(reader)

    for row in reader:
        with open('{}.pdf'.format(row[0]), "rb") as pdf_file:
            base64_byte = base64.b64encode(pdf_file.read())
            base64_string = base64_byte.decode('utf-8')

            dict = {
                'inventory_code' : row[0],
                'title' : row[1],
                'year' : row[2],
                'isbn' : row[3],
                'base64file' : base64_string
            }
            list.append(dict)

    jsonString = json.dumps(list)
    jsonFile = open("data.json", "w")
    jsonFile.write(jsonString)
    jsonFile.close()

So after that I have data.json that contain data from csv + base 64 from pdf file

In Laravel Project

blade file

Just simple input file that send POST request

....
    <form method="POST" action="/import" enctype="multipart/form-data">
        @csrf
        <input type='file' name="file"/>
        <button type="submit">Import Data</button>
    </form>              
....

Web.php

Define Route to handle POST Request in web.php

Route::post('/import', [importController::class, 'index']);

ImportController

Make import Controller to handle JSON file and storing the logic to save data in the model

<?php

namespace App\Http\Controllers;

use App\Models\Book;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Storage;

class importController extends Controller
{
    public function index(){
        $JSONfile = file_get_contents(request()->file('file'));
        $JSON_decode = json_decode($JSONfile);

        foreach ($JSON_decode as $row) 
        {
            //decode bs64 string to bytes
            $b64_pdf = utf8_decode($row->base64file);

            //randomize name 
            $RandName = Str::random(10).'.'.'pdf';
            $pathName = $RandName;

            //bring back pdf file from base 64 and save it in public directory
            Storage::disk('public')->put($RandName, base64_decode($b64_pdf, true));

            //save data to table
            Book::create([
                'accno' => empty($row->accno) ? NULL : $row->accno, 
                'title'    => empty($row->title) ? NULL : $row->title, 
                'year'    => empty($row->year) ? NULL : $row->year, 
                'isbn'    => empty($row->isbn) ? NULL : $row->isbn, 
                'path'    => $pathName, 

            ]);
        }
    }
}

Now you can import your data along with pdf file simultaneously, if you have another solution please tell me in comment section thanks

Add Tom Select to Laravel using Laravel MIX

jasuke-dev — Fri, 04 Mar 2022 07:48:40 +0000

This is how to add Tom Select package to youre laravel project

Installing Tom Select

Open terminal in youre laravel project and install the package

npm i tom-select

Applying Tom Select JS

open /resources/js/app.js and add Tom Select js in there

window.TomSelect = require('tom-select')

Applying Tom Select CSS

Tom Select functionality will not work with out the css file, add Tom Select CSS to /resources/css/app.css

...
@import '/node_modules/tom-select/dist/css/tom-select.default.css';
...

There are many css file, select what you like

Build laravel mix

npm run development

Add app.js and app.css to blade file

Dont forget to add app.js and app.css from public folder

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>

Done Tom Select has been succesfully add to youre laravel project