How To Make A Word Counter Online Tool In Laravel - FreeCodeBlog

Last updated: Dec 14, 2021

Word counter in laravel? Yes. Do you want to make a word counter online tool using laravel? Yes. Want to publish a laravel word counter in laravel website so that visitor can use it to count words in online? Yes. Don't worry, You can make a laravel word counter after reading in word counter making by laravel tutorial. So don't be late. Let's start to make a word counter online tool in Laravel to count the number of words from any text or post. An online word counter tool can calculate how many words you have used in your text.

 

How To Make A Word Counter Online Tool In Laravel
How To Make A Word Counter Online Tool In Laravel

 

Hello friends, In this tutorials I will make a laravel online word counter tool so that you or anyone can use it to count the number of words from text. I will use laravel ui vue package to make a laravel online word counter tool. You can make a laravel word counter online tool using others user authentication packages. You can read install laravel ui package in any kind of laravel version tutorial before continue this tutorial.

 

1. Controller.

I will make 2 controller to make online word counter tool. I will use API route for this tutorial. So run below command to make a word counter web and API controller.

 

/*
| Web Controller
*/
php artisan make:controller WordCounterController
/*
| Api Controller
*/
php artisan make:controller Api/WordCounterController

 

Have you used Word Counter Controller on Web and API controllers? Now you need to use API and web controller in API and Web route. Next you need to make API and web get route.

 

/*
| Web Route
*/
use App\Http\Controllers\WordCounterController;

Route::get('/word-counter', [WordCounterController::class, 'word_counter'])->name('word.counter');
/*
| Api Route
*/
use App\Http\Controllers\Api\WordCounterController;

Route::get('/word-counter', [WordCounterController::class, 'word_counter']);

 

Now add “word_counter” method in word counter web controller. Don't forget to use str in API controller.

 

/*
| In Web Controller
*/
public function word_counter()
{
  return view('word_counter');
}
/*
| Api Route
*/
use Illuminate\Support\Str;
public function word_counter(Request $request)
{
  return Str::wordCount($request->text);
}

 

2. Blade File.

Go to resources views folder to create a laravel blade file. Paste below code into blade file after created.

 

/*
| word_counter.blade.php
*/
@extends('layouts.app')
@section('content')
<word-counter></word-counter> 
@endsection

 

3. Vue File.

Now go to resources js folder to open “app.js” file. paste below line into this file.

 

/*
| app.js
*/
Vue.component('word-counter', require('./components/WordCounter.vue').default);

 

Next create a “WordCounter.vue” file into components folder. paste below code into this file.

 

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">How To Make A Word Counter Online Tool In Laravel</div>

                    <div class="card-body">
                    <textarea class="form-control" id="text" cols="30" v-model="text" required autofocus autocomplete="text" rows="4"></textarea>
                    <div class="text-left py-3">
                    <button @click="send()" type="button" class="btn btn-primary btn-sm">Send</button>
                    <span>Total Word:- {{word}}</span> 
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              text: '',
              word: 0,
            }
        },
        mounted() {
            console.log('How To Make A Word Counter Online Tool In Laravel.')
        },
        methods: {
        send(){
         axios.get("/api/word-counter?text="+this.text)
               .then(response => {
                this.word = response.data;
                })
                .catch(e => {
                    console.log(e);
            });
        },
        },
    }
</script>

 

4. Use Word Counter.

Created a word counter online tool in Laravel? Want to check out the Laravel Word Counter works you created? Go to word counter url and type some words. Now click on send button to see result after typing some words.

 

http://127.0.0.1:8000/word-counter

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
How To Use Vue Multiselect In Laravel With Vue Js

Sometimes you need to add vue multiselect third party package in your laravel 8 with vue 3 project. We have many third party (vue multiselect) to u... Read More

Best Shared Hosting For Laravel Project

A shared web hosting service is a kind of web hosting service where a lot of websites function under one web server. This is the lowest costly serv... Read More

How To Make A User Email Verification In Laravel

Want to make a user email verification in laravel using ui, jetstream, breeze user authentication package? Yes! Okay then you must need to read thi... Read More

How To Add Laravel Website To Google Search Console

Want to add your Laravel website to Google Search Console? Yes!, To rank Laravel website on Google, you need to add your Laravel website to Google... Read More

All About Laravel Env File

Read this tutorial to know all about laravel env file. laravel env file is most important for live server. In this tutorial I will explain you abou... Read More