Langkah Mudah Membuat aplikasi CRUD Menggunakan Laravel 9 dan Bootstrap 5 | CRUD Laravel 9 Indonesia

Introduction

In this tutorial, we will create a CRUD (Create, Read, Update, Delete) application using Laravel 9 and Bootstrap 5. The application will interact with a MySQL database and include features for data management and searching. By following these steps, you'll gain hands-on experience with Laravel's MVC architecture and Bootstrap's front-end capabilities.

Step 1: Prepare Your Environment

• Ensure you have the following installed:

  • XAMPP (for MySQL): Download XAMPP
  • Composer (PHP package manager): Download Composer
  • Laravel 9: Install via Composer.

• Set up a new MySQL database for your application.

Step 2: Create a New Laravel Project

• Open your terminal or command prompt.
• Run the following command to create a new Laravel project:

  composer create-project --prefer-dist laravel/laravel crud-laravel9
  

• Navigate to the project directory:

  cd crud-laravel9
  

Step 3: Set Up Routes and Controller

• Create a new controller for your CRUD operations:

  php artisan make:controller ItemController
  

• Open the routes/web.php file and define your routes:

  Route::resource('items', ItemController::class);
  

Step 4: Create Blade Templates

• Create a new Blade template for the front page:
  • Create a new file named index.blade.php in the resources/views directory.
• Use Bootstrap 5 to style your pages. Include Bootstrap in your Blade template:

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet">
  

Step 5: Configure Database and Migrations

• Open the .env file and configure your database settings:

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=your_database_name
  DB_USERNAME=your_username
  DB_PASSWORD=your_password
  

• Create a migration for your items table:

  php artisan make:migration create_items_table --create=items
  

• Edit the migration file to define your table structure:

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

• Run the migration:

  php artisan migrate
  

Step 6: Implement Create Functionality

• In ItemController, implement the store method to handle form submissions:

  public function store(Request $request)
  {
      $request->validate([
          'name' => 'required',
          'description' => 'required',
      ]);
  
      Item::create($request->all());
      return redirect()->route('items.index')->with('success', 'Item created successfully.');
  }
  

Step 7: Validate User Input

• Use Laravel's validation features to ensure data integrity. Implement validation in your store method as shown above.

Step 8: Display Data

• In the index method of ItemController, fetch and display items:

  public function index()
  {
      $items = Item::paginate(10);
      return view('index', compact('items'));
  }
  

Step 9: Implement Pagination

• Use Laravel's built-in pagination in your Blade template:

  {{ $items->links() }}
  

Step 10: Create Edit Functionality

• Add an edit method in ItemController to handle updates:

  public function edit(Item $item)
  {
      return view('edit', compact('item'));
  }
  

Step 11: Implement Delete Functionality

• Add a destroy method in ItemController:

  public function destroy(Item $item)
  {
      $item->delete();
      return redirect()->route('items.index')->with('success', 'Item deleted successfully.');
  }
  

Step 12: Add Search Functionality

• Implement a search feature in your index method:

  public function index(Request $request)
  {
      $search = $request->get('search');
      $items = Item::where('name', 'like', "%{$search}%")->paginate(10);
      return view('index', compact('items'));
  }
  

Conclusion

You have now created a fully functional CRUD application using Laravel 9 and Bootstrap 5. This project demonstrates key concepts such as routing, controllers, views, database migrations, and form validation. The next steps could include adding user authentication or enhancing the UI with more Bootstrap components. Explore the links provided for additional resources and example code. Happy coding!