यदि आप लारवेल में बिना जावास्क्रिप्ट की जटिलता के डायनामिक और इंटरैक्टिव वेब ऐप्स बनाना चाहते हैं, तो लाइववायर आपके लिए सबसे अच्छा विकल्प है। लाइववायर के साथ आप PHP में ही रियल-टाइम UI अपडेट्स, फॉर्म वैलिडेशन, और डेटा बाइंडिंग कर सकते हैं।
Table of contents [Show]
यदि आप लारवेल में बिना जावास्क्रिप्ट की जटिलता के डायनामिक और इंटरैक्टिव वेब ऐप्स बनाना चाहते हैं, तो लाइववायर आपके लिए सबसे अच्छा विकल्प है। लाइववायर के साथ आप PHP में ही रियल-टाइम UI अपडेट्स, फॉर्म वैलिडेशन, और डेटा बाइंडिंग कर सकते हैं। इस लारवेल लाइववायर ट्यूटोरियल हिंदी में में, हम आपको आसान चरणों में बताएंगे कि लारवेल में लाइववायर से डायनामिक टू-डू लिस्ट कैसे बनाते हैं। यह ट्यूटोरियल नए डेवलपर्स के लिए बहुत आसान है। तैयार हैं? चलिए शुरू करते हैं! 🚀
लाइववायर इतना लोकप्रिय क्यों है? आइए इसके कुछ मुख्य फायदों को समझें:
जानकारी: 2025 में 40% लारवेल डेवलपर्स लाइववायर को डायनामिक UI के लिए उपयोग करते हैं!
लारवेल और लाइववायर के साथ आप कई तरह के प्रोजेक्ट्स बना सकते हैं, जैसे:
सबसे पहले, एक नया लारवेल प्रोजेक्ट बनाएं। इसके लिए आपको चाहिए:
सेटअप कैसे करें?
English
composer create-project laravel/laravel livewire-appइससे “livewire-app” नाम का फोल्डर बनेगा।
cd livewire-app
php artisan serveब्राउज़र में http://localhost:8000 खोलें, आपको लारवेल का स्वागत पेज दिखेगा।
लाइववायर को अपने प्रोजेक्ट में जोड़ें।
composer require livewire/livewirephp artisan livewire:publish --assetsresources/views/layouts/app.blade.php में लाइववायर स्क्रिप्ट्स और स्टाइल्स जोड़ें:<!DOCTYPE html>
<html>
<head>
<title>Livewire App</title>
@livewireStyles
</head>
<body>
<div class="container">
@yield('content')
</div>
@livewireScripts
</body>
</html>
टू-डू लिस्ट के लिए डेटाबेस सेट करें।
.env फाइल में डेटाबेस जानकारी डालें:DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire_db
DB_USERNAME=your_username
DB_PASSWORD=your_passwordlivewire_db नाम का डेटाबेस बनाएं।php artisan make:model Task -mdatabase/migrations/ में माइग्रेशन फाइल में यह कोड डालें:Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->boolean('completed')->default(false);
$table->timestamps();
});
php artisan migrateapp/Models/Task.php में मॉडल अपडेट करें:namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
protected $fillable = ['title', 'completed'];
}
टू-डू लिस्ट के लिए लाइववायर कंपोनेंट बनाएं।
php artisan make:livewire TodoListयह दो फाइल्स बनाएगा: - app/Http/Livewire/TodoList.php (बैकएंड लॉजिक) - resources/views/livewire/todo-list.blade.php (फ्रंटएंड व्यू)
app/Http/Livewire/TodoList.php में यह कोड डालें:namespace App\Http\Livewire;
use App\Models\Task;
use Livewire\Component;
class TodoList extends Component
{
public $title;
public $tasks;
protected $rules = [
'title' => 'required|min:3',
];
public function mount()
{
$this->tasks = Task::all();
}
public function addTask()
{
$this->validate();
Task::create(['title' => $this->title]);
$this->title = '';
$this->tasks = Task::all();
}
public function toggleTask($id)
{
$task = Task::find($id);
$task->update(['completed' => !$task->completed]);
$this->tasks = Task::all();
}
public function deleteTask($id)
{
Task::find($id)->delete();
$this->tasks = Task::all();
}
public function render()
{
return view('livewire.todo-list');
}
}
resources/views/livewire/todo-list.blade.php में यह कोड डालें:<div>
<h2>टू-डू लिस्ट</h2>
<form wire:submit.prevent="addTask" class="mb-4">
<div class="input-group">
<input type="text" wire:model="title" class="form-control" placeholder="नया टास्क डालें">
<button type="submit" class="btn btn-primary">टास्क जोड़ें</button>
</div>
@error('title') <span class="text-danger">{{ $message }}</span> @enderror
</form>
<ul class="list-group">
@foreach($tasks as $task)
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<input type="checkbox" wire:click="toggleTask({{ $task->id }})" {{ $task->completed ? 'checked' : '' }}>
<span {{ $task->completed ? 'style=text-decoration:line-through' : '' }}>{{ $task->title }}</span>
</div>
<button wire:click="deleteTask({{ $task->id }})" class="btn btn-danger btn-sm">डिलीट</button>
</li>
@endforeach
</ul>
</div>
टू-डू लिस्ट को प्रदर्शित करने के लिए व्यू बनाएं।
resources/views/todos.blade.php बनाएं और यह कोड डालें:@extends('layouts.app')
@section('content')
<div class="container">
@livewire('todo-list')
</div>
@endsection
routes/web.php में रूट जोड़ें:Route::get('/todos', function () {
return view('todos');
})->name('todos');
टू-डू लिस्ट को प्रोफेशनल लुक देने के लिए:
resources/css/app.css में कस्टम स्टाइल्स डालें:body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.container {
max-width: 600px;
margin-top: 50px;
}
.list-group-item {
margin-bottom: 10px;
}
npm install
npm run devलाइववायर ऐप को टेस्ट करें।
http://localhost:8000/todos खोलें।
लाइववायर ऐप को ऑनलाइन ले जाएं।
.env फाइल कॉन्फिगर करें।
लाइववायर PHP से डायनामिक UI बनाने का आसान और तेज़ तरीका देता है।
हां, इस लारवेल लाइववायर ट्यूटोरियल हिंदी में गाइड के साथ नए डेवलपर्स आसानी से सीख सकते हैं।
इस गाइड के साथ 1-2 दिन। जटिल प्रोजेक्ट्स के लिए 1 सप्ताह।
हां, लाइववायर और Vue.js को एक साथ हाइब्रिड तरीके से उपयोग किया जा सकता है।
Hostinger पर अपने प्रोजेक्ट को अपलोड करें।
इस लारवेल लाइववायर ट्यूटोरियल हिंदी में से आपने सीखा कि लारवेल में लाइववायर से डायनामिक टू-डू लिस्ट कैसे बनाते हैं। इस गाइड को फॉलो करें और अपने प्रोजेक्ट्स में इंटरैक्टिव UI जोड़ें। कोई सवाल हो? नीचे कमेंट करें। अपनी वेबसाइट को Hostinger पर होस्ट करें और इसे ऑनलाइन ले जाएं।
आगे क्या सीखें? लारवेल टेस्टिंग, Vue.js, या Docker पर ट्यूटोरियल्स हिंदी में चाहिए? InHindi24.com पर और गाइड्स पढ़ें!
This guide provides a step-by-step tutorial for integrating PhonePe Payment Gateway v2 into a Laravel application using the API endpoint https://api.phonepe.com/apis/pg/checkout/v2/pay for payment initiation and https://api.phonepe.com/apis/pg/checkout/v2/order/{merchantOrderId}/status for status verification.
Learn how to import large CSV files into a users table in Laravel using AJAX with a progress bar. This guide includes duplicate checking, chunk processing, and commented code.
