Search This Blog

Menghubungkan Form Laravel

Untuk menghubungkan data dari Form 1 ke Form 2 (atau halaman hasil) di Laravel, Anda bisa memanfaatkan Route, Controller, dan Blade View.

Berikut adalah panduan langkah demi langkah untuk membuat contoh kasus input nama dari Form 1 lalu menampilkannya menjadi "Nama saya ..." di form/halaman berikutnya.

1. Buat Route (routes/web.php)

Tambahkan dua route: satu untuk menampilkan Form 1, dan satu lagi untuk menerima data dan menampilkannya di Form 2.

<?php

use App\Http\Controllers\FormController;
use Illuminate\Support\Facades\Route;

// Menampilkan Form 1
Route::get('/form1', [FormController::class, 'index'])->name('form1');

// Menerima data dari Form 1 dan mengarahkannya ke Form 2
Route::post('/form2', [FormController::class, 'process'])->name('form2');

Route::get('/', function () {
    return view('welcome');
});

2. Buat Controller (FormController.php)

Buat controller menggunakan Artisan CLI

php artisan make:controller FormController, lalu isi kodenya seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    // Menampilkan halaman Form 1
    public function index()
    {
        return view('form1');
    }

    // Memproses data dari Form 1 dan mengirimkannya ke Form 2
    public function process(Request $request)
    {
        // Validasi input nama (opsional tapi disarankan)
        $request->validate([
            'nama' => 'required|string|max:255',
        ]);

        $nama = $request->input('nama');

        // Kirim data nama ke view form2
        return view('form2', compact('nama'));
    }
}

3. Buat View Form 1 (resources/views/form1.blade.php)

Buat file Blade untuk form pertama yang berisi input text untuk nama.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form 1</title> </head> <body> <h2>Form 1: Masukkan Nama</h2> <form action="{{ route('form2') }}" method="POST"> @csrf <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" required> <button type="submit">Kirim</button> </form> </body> </html>

4. Buat View Form 2 / Hasil (resources/views/form2.blade.php)

Buat file Blade kedua untuk menangkap dan menampilkan data yang dikirimkan.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Form 2 / Hasil</title>

</head>

<body>

    <h2>Form 2: Hasil Output</h2>

    

    <!-- Menampilkan hasil input dari Form 1 -->

    <p>Nama saya <strong>{{ $nama }}</strong></p>


    <br>

    <a href="{{ route('form1') }}">Kembali ke Form 1</a>

</body>

</html>


php artisan serve

Setelah Anda menyimpannya, silakan refresh kembali halaman browser Anda ([http://127.0.0.1:8000/form1](http://127.0.0.1:8000/form1))






Penjelasan Singkat:

  1. form1.blade.php mengirimkan data menggunakan metode POST ke route form2 dengan menyertakan @csrf (keamanan wajib di Laravel).

  2. FormController menangkap data tersebut melalui parameter Request $request, lalu meneruskannya menggunakan fungsi view('form2', compact('nama')).

  3. form2.blade.php mencetak variabel $nama menggunakan sintaks Blade {{ $nama }} sehingga tampil sebagai "Nama saya [isi input]".

Penjelasan:

Secara sederhana, Route dalam Laravel (dan pengembangan web pada umumnya) berfungsi sebagai "pintu gerbang" atau "pengatur lalu lintas" yang menentukan ke mana pengguna harus diarahkan saat mereka mengakses alamat (URL) tertentu di browser.

Berikut adalah fungsi utama dari pembuatan route:

1. Menghubungkan URL dengan Logika (Controller / View)

Route bertugas mencocokkan URL yang diketik pengguna dengan fungsi atau file tampilan yang sesuai.

  • Contoh: Saat pengguna mengakses [domain.com/form1](https://domain.com/form1), route memberi tahu Laravel untuk membuka file tampilan form1.

2. Mengatur Jenis Request (HTTP Method)

Route membedakan bagaimana data dikirimkan atau diminta, seperti:

  • GET: Digunakan untuk menampilkan halaman (misal: membuka form).

  • POST: Digunakan untuk mengirim data baru ke server (misal: saat tombol submit ditekan).

  • PUT / DELETE: Digunakan untuk memperbarui atau menghapus data.

3. Mempermudah Pengelolaan URL (Named Routes)

Dengan memberikan nama pada sebuah route (contoh: ->name('form1')), kita bisa memanggil URL tersebut di dalam file Blade cukup dengan kodenya saja ({{ route('form1') }}).

  • Keuntungan: Jika suatu saat alamat URL diubah dari /form1 menjadi /halaman-pendaftaran, Anda tidak perlu mengubah link di seluruh file project satu per satu.

4. Menjaga Keamanan (Middleware)

Route memungkinkan kita memasang pengaman (middleware). Kita bisa mengatur agar sebuah route hanya bisa diakses oleh pengguna yang sudah login (terotentikasi) atau memblokir akses yang tidak sah.

Analogi Sederhana: Bayangkan Route seperti resepsionis di sebuah gedung. Ketika seorang tamu (pengguna) datang menanyakan alamat ruangan tertentu (URL), resepsionis bertugas mengecek tujuannya dan mengarahkannya ke ruangan yang benar (Controller atau View).

Secara sederhana, Controller dalam Laravel berfungsi sebagai "otak" atau pusat pengolah logika dari sebuah aplikasi.

Jika Route bertugas sebagai pintu gerbang (menentukan URL), maka Controller adalah tempat Anda menuliskan instruksi apa yang harus dikerjakan oleh aplikasi ketika pintu tersebut dibuka.

Berikut adalah fungsi utama dari pembuatan Controller:

1. Memisahkan Logika Program (Separation of Concerns)

Tanpa Controller, semua kode pemrograman (seperti logika database, validasi, dan pengolahan data) harus ditulis langsung di dalam file routes/web.php. Hal ini akan membuat file route menjadi sangat panjang, berantakan, dan sulit dirawat. Dengan Controller, kode menjadi rapi karena dipisah ke dalam file khusus.

2. Memproses Data dari Pengguna (Request & Validation)

Controller bertugas menangkap data yang dikirimkan oleh pengguna melalui form (seperti input nama yang kita buat sebelumnya), lalu memprosesnya. Anda juga bisa melakukan validasi data di sini untuk memastikan input dari pengguna sudah benar dan aman sebelum diolah lebih lanjut.

3. Menghubungkan Database dengan Tampilan (Model & View)

Controller bertugas sebagai jembatan:

  • Mengambil data dari database (melalui Model).

  • Mengolah data tersebut jika diperlukan.

  • Mengirimkannya ke halaman tampilan (View) agar bisa dibaca oleh pengguna.

Analogi Sederhana di Restoran:

  • Route adalah Pelayan yang menerima pesanan Anda di meja (mengarahkan URL).

  • Controller adalah Koki di dapur yang mengolah bahan-bahan mentah menjadi makanan yang siap saji sesuai pesanan.

  • View adalah Piring/Makanan yang akhirnya disajikan kembali ke hadapan Anda.

Studi Kasus 2:




FormControllerLatih2:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormControllerLatih2 extends Controller
{
    // Menampilkan halaman Form 1
    public function index()
    {
        return view('formhitung');
    }

    // Memproses data dari Form 1 dan mengirimkannya ke Form 2
    public function process(Request $request)
    {
   
        $nama = $request->input('nama');
        $nilai1 = $request->input('nilai1');
        $nilai2 = $request->input('nilai2');
       // Lakukan proses perhitungan (Contoh: Penjumlahan)
        // Anda bisa ubah operatornya menjadi +, -, *, atau /
        $hasil = ($nilai1 + $nilai2)/2;

        if ($hasil > 80) {
            $ket = "A";
        } else  if ($hasil > 60) {
            $ket = "B";

        } else  if ($hasil > 40) {
            $ket = "C";

        } else  if ($hasil > 20) {
            $ket = "D";

        } else {
            $ket = "E";
   
        }

        // Kirim data nama ke view form2
        return view('formhasil', compact('nama', 'nilai1', 'nilai2', 'hasil', 'ket'));
    }
}

Web:

<?php

use App\Http\Controllers\FormControllerLatih2;
use Illuminate\Support\Facades\Route;

// Menampilkan Form 1
Route::get('/formhitung', [FormControllerLatih2::class, 'index'])->name('formhitung');

// Menerima data dari Form 1 dan mengarahkannya ke Form 2
Route::post('/formhasil', [FormControllerLatih2::class, 'process'])->name('formhasil');

Route::get('/', function () {
    return view('welcome');
});

FormHitung.Blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Hitung</title>
</head>
<body>
    <h2>Form Hitung: Masukkan Nilai</h2>

    <form action="{{ route('formhasil') }}" method="POST">
        @csrf
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required>
        <label for="nilai1">Nilai 1:</label>
        <input type="number" id="nilai1" name="nilai1" required>
        <label for="nilai2">Nilai 2:</label>
        <input type="number" id="nilai2" name="nilai2" required>
        <button type="submit">Kirim</button>
    </form>
</body>
</html>
FormHasil.Blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Hasil</title>
</head>
<body>
    <h2>Form Hasil: Hasil Output</h2>
   
    <!-- Menampilkan hasil input dari Form 1 -->
    <p>Nama saya <strong>{{ $nama }}</strong></p>
    <p>Nilai 1: <strong>{{ $nilai1 }}</strong></p>
    <p>Nilai 2: <strong>{{ $nilai2 }}</strong></p>
    <p> Hasil Penjumlahan: <strong>{{ $hasil }}</strong></p>
    <p> Keterangan: <strong>{{ $ket }}</strong></p>

    <br>
    <a href="{{ route('formhitung') }}">Kembali ke Form Hitung</a>
</body>
</html>




Koneksi Database Laravel dan MySQl

 Studi Kasus:


Ilustrasi Relasi

  • Satu Mahasiswa dapat mengambil banyak Mata Kuliah melalui tabel KRS.
  • Satu Mata Kuliah dapat diambil oleh banyak Mahasiswa melalui tabel KRS.

-- ==========================================

-- 1. PEMBUATAN DATABASE

-- ==========================================

CREATE DATABASE IF NOT EXISTS db_akademik;

USE db_akademik;

 

-- ==========================================

-- 2. PEMBUATAN TABEL INDUK (PARENT TABLES)

-- ==========================================

 

-- Tabel Mahasiswa

CREATE TABLE mahasiswa (

    id_mahasiswa INT AUTO_INCREMENT PRIMARY KEY,

    nim VARCHAR(15) UNIQUE NOT NULL,

    nama_mahasiswa VARCHAR(100) NOT NULL

);

 

-- Tabel Mata Kuliah

CREATE TABLE mata_kuliah (

    id_matkul INT AUTO_INCREMENT PRIMARY KEY,

    kode_matkul VARCHAR(10) UNIQUE NOT NULL,

    nama_matkul VARCHAR(100) NOT NULL

);

 

-- ==========================================

-- 3. PEMBUATAN TABEL PERANTARA (JUNCTION TABLE)

-- ==========================================

 

-- Tabel KRS (Kartu Rencana Studi) dengan Foreign Key

CREATE TABLE krs (

    id_krs INT AUTO_INCREMENT PRIMARY KEY,

    id_mahasiswa INT NOT NULL,

    id_matkul INT NOT NULL,

   

    -- Menghubungkan Foreign Key ke tabel mahasiswa dan mata_kuliah

    CONSTRAINT fk_mahasiswa FOREIGN KEY (id_mahasiswa)

        REFERENCES mahasiswa(id_mahasiswa)

        ON DELETE CASCADE ON UPDATE CASCADE,

    CONSTRAINT fk_matkul FOREIGN KEY (id_matkul)

        REFERENCES mata_kuliah(id_matkul)

        ON DELETE CASCADE ON UPDATE CASCADE

);

 

-- ==========================================

-- 4. CONTOH PENGISIAN DATA (DML)

-- ==========================================

 

-- Masukkan data mahasiswa

INSERT INTO mahasiswa (nim, nama_mahasiswa) VALUES

('230101', 'Budi Santoso'),

('230102', 'Siti Rahma'),

('230103', 'Ahmad Fauzi');

 

-- Masukkan data mata kuliah

INSERT INTO mata_kuliah (kode_matkul, nama_matkul) VALUES

('IF101', 'Pemrograman Web'),

('IF102', 'Basis Data'),

('IF103', 'Algoritma Pemrograman');

 

-- Masukkan data KRS (Relasi Many-to-Many)

INSERT INTO krs (id_mahasiswa, id_matkul) VALUES

(1, 1), -- Budi mengambil Pemrograman Web

(1, 2), -- Budi mengambil Basis Data

(2, 1), -- Siti mengambil Pemrograman Web

(2, 3), -- Siti mengambil Algoritma Pemrograman

(3, 2); -- Ahmad mengambil Basis Data

 

-- ==========================================

-- 5. CONTOH QUERY MENAMPILKAN DATA (JOIN)

-- ==========================================

 

SELECT

    m.nim,

    m.nama_mahasiswa,

    mk.kode_matkul,

    mk.nama_matkul

FROM krs k

JOIN mahasiswa m ON k.id_mahasiswa = m.id_mahasiswa

JOIN mata_kuliah mk ON k.id_matkul = mk.id_matkul;

Langkah 1: Konfigurasi Koneksi Database (.env)

Buka file .env di root project Laravel Anda, lalu sesuaikan bagian konfigurasi database agar terhubung ke database db_akademik:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_akademik

DB_USERNAME=root

DB_PASSWORD=

Langkah 2: Membuat Model dan Migration

Gunakan Artisan CLI untuk membuat Model Mahasiswa sekaligus file migration-nya:

php artisan make:model Mahasiswa -m

Langkah 3: Membuat Controller (Resource Controller)

Buat Controller dengan opsi --resource agar otomatis menghasilkan fungsi CRUD (index, create, store, show, edit, update, destroy):

php artisan make:controller MahasiswaController –resource

Langkah 4: Menambahkan Route

Buka file routes/web.php, lalu daftarkan resource route untuk controller tersebut

Langkah 5: Membuat Tampilan (Views Blade)

Buat folder baru bernama mahasiswa di dalam direktori resources/views/. Di dalam folder tersebut, buat tiga file utama:

  1. resources/views/mahasiswa/index.php (Menampilkan tabel data & tombol hapus)
  2. resources/views/mahasiswa/create.php (Form input data baru)
  3. resources/views/mahasiswa/edit.blade.php (Form ubah data)
Selengkapnya:
Link

mengintegrasikan form dan tabel dengan Database MySQL menggunakan Migration dan Model di Laravel.

Buka:

http://localhost/phpmyadmin/ 


Pastikan aplikasi MySQL (seperti XAMPP / Laragon) sudah berjalan dan Anda telah membuat database kosong bernama db_mahasiswa di phpMyAdmin.


Langkah 1: Konfigurasi Database di File .env

Buka file .env di direktori utama proyek Anda, lalu sesuaikan bagian konfigurasi database (misalnya jika menggunakan XAMPP/Laragon):

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_mahasiswa

DB_USERNAME=root

DB_PASSWORD=


Langkah 2: Buat Model dan Migration

Jalankan perintah berikut di terminal Git Bash untuk membuat file Model Mahasiswa sekaligus file Migration-nya:

php artisan make:model Mahasiswa -m 


Langkah 3: Edit File Migration

Buka file migration yang baru saja terbuat di folder database/migrations/YYYY_MM_DD_HHMMSS_create_mahasiswas_table.php, lalu tambahkan kolom tabel berikut:

public function up(): void

{

    Schema::create('mahasiswas', function (Blueprint $table) {

        $table->id();

        $table->string('nim')->unique();

        $table->string('nama');

        $table->string('kelas');

        $table->timestamps();

    });

}


Setelah itu, jalankan migrasi database di terminal:

php artisan migrate

Langkah 4: Konfigurasi Model Mahasiswa.php

Buka file app/Models/Mahasiswa.php dan tambahkan properti $fillable agar data kolom dapat diisi secara masal (mass assignment):

Langkah 5: Kode Lengkap Konfigurasi Mahasiswa.php

Buka file Mahasiswa.php dan sesuaikan kodenya seperti berikut:

<?php


namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;


class Mahasiswa extends Model

{

    use HasFactory;


    // 1. Menentukan nama tabel di database (Opsional jika sesuai konvensi jamak/plural)

    protected $table = 'mahasiswas';


    // 2. Menentukan Primary Key tabel (Opsional, default: 'id')

    protected $primaryKey = 'id';


    // 3. Menentukan kolom yang boleh diisi secara massal (Mass Assignment)

    protected $fillable = [

        'nim',

        'nama',

        'kelas',

    ];


    // 4. Pengaturan Timestamps (created_at & updated_at)

    public $timestamps = true;

}

Penjelasan Properti Konfigurasi Model

  1. protected $table

    • Secara bawaan (default), Laravel akan menganggap nama tabel di database menggunakan bentuk jamak dalam bahasa Inggris (misal model Mahasiswa -> tabel mahasiswas).

    • Jika nama tabel di MySQL Anda berbeda (misalnya tbl_mahasiswa), Anda wajib mendefinisikannya:

      PHP
      protected $table = 'tbl_mahasiswa';
      
  2. protected $primaryKey

    • Default primary key di Laravel adalah id. Jika tabel Anda menggunakan nama kolom primary key lain (misal nim), definisikan seperti ini:

      PHP
      protected $primaryKey = 'nim';
      
  3. protected $fillable

    • Properti ini digunakan untuk keamanan (Mass Assignment Protection). Kolom yang dicantumkan di dalam array inilah yang diizinkan untuk diisi menggunakan perintah Mahasiswa::create($request->all()).

  4. protected $guarded (Alternatif dari $fillable)

    • Berfungsi sebagai kebalikan dari $fillable. Kolom yang dimasukkan di sini tidak boleh diisi secara massal. Jika ingin mengizinkan semua kolom diisi tanpa batasan:

      PHP
      protected $guarded = [];
      
  5. public $timestamps

  6. Default bernilai true. Jika tabel di MySQL Anda tidak memiliki kolom created_at dan updated_at, ubah menjadi false agar tidak terjadi error saat melakukan simpan data:

    PHP
    public $timestamps = false;

    Langkah 7: Buat Controller Menggunakan Artisan

    Buka terminal Git Bash di Visual Studio Code, lalu jalankan perintah berikut:

php artisan make:controller LatihanController

Langkah 8 : Kode Lengkap LatihanController.php

Buka file app/Http/Controllers/LatihanController.php dan ganti isinya dengan kode berikut:

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;

use App\Models\Mahasiswa; // 1. Import Model Mahasiswa untuk akses Database


class LatihanController extends Controller

{

    /**

     * Menampilkan halaman tabel berisi daftar data mahasiswa

     */

    public function getTabel()

    {

        // Ambil semua data mahasiswa dari tabel 'mahasiswas' di MySQL

        $dataMahasiswa = Mahasiswa::all();


        // Kirim variabel $dataMahasiswa ke view 'tabel.blade.php'

        return view('tabel', compact('dataMahasiswa'));

    }


    /**

     * Menampilkan halaman form untuk input data mahasiswa

     */

    public function getForm()

    {

        return view('form');

    }


    /**

     * Memproses dan menyimpan data yang dikirim dari form ke database

     */

    public function simpanForm(Request $request)

    {

        // 2. Validasi Input Form

        $request->validate([

            'nim'   => 'required|unique:mahasiswas,nim',

            'nama'  => 'required',

            'kelas' => 'required',

        ], [

            // Pesan Error Kustom (Opsional)

            'nim.required'   => 'NIM wajib diisi!',

            'nim.unique'     => 'NIM sudah terdaftar di database!',

            'nama.required'  => 'Nama Lengkap wajib diisi!',

            'kelas.required' => 'Kelas wajib diisi!',

        ]);


        // 3. Simpan Data ke Database menggunakan Model Mahasiswa

        Mahasiswa::create([

            'nim'   => $request->nim,

            'nama'  => $request->nama,

            'kelas' => $request->kelas,

        ]);


        // 4. Alihkan (Redirect) ke halaman tabel disertai pesan sukses

        return redirect()->route('mahasiswa.tabel')->with('success', 'Data mahasiswa berhasil disimpan!');

    }

}

Penjelasan Komponen Penting Controller

  1. use App\Models\Mahasiswa;

    • Berfungsi untuk menghubungkan Controller dengan Model Mahasiswa agar Controller dapat membaca dan menyimpan data ke tabel database MySQL.

  2. Mahasiswa::all()

    • Method Eloquent ORM untuk mengambil seluruh record/baris data yang ada pada tabel mahasiswas.

  3. compact('dataMahasiswa')

    • Digunakan untuk membungkus variabel $dataMahasiswa agar bisa diakses di dalam file view (tabel.blade.php).

  4. $request->validate([...])

    • Memastikan data yang dikirim pengguna dari form memenuhi aturan:

      • required: Wajib diisi (tidak boleh kosong).

      • unique:mahasiswas,nim: Nilai NIM tidak boleh sama dengan NIM yang sudah ada di tabel mahasiswas.

  5. Mahasiswa::create([...])

    • Menyimpan data baru secara otomatis ke kolom nim, nama, dan kelas pada tabel database MySQL.

  6. redirect()->route('mahasiswa.tabel')->with('success', ...)

    • Mengalihkan halaman kembali ke route tabel (/tabel) sambil membawa pesan flash session yang mengonfirmasi bahwa simpan data berhasil.

Langkah 9:
File Routes (routes/web.php)


https://gemini.google.com/u/2/app/e6255afb79cd7c74?pageId=none

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Bahan Ajar - All Rights Reserved
Template Modify by Agung Baitul H (0898-1983-200)
Proudly powered by Blogger E-Mail agung.abl@bsi.ac.id