Menangkap Data dari Form HTML

Di materi sebelumnya, kita sudah mempelajari dasar dari route sampai membuat route disertai parameter. Juga menggunakan route dengan controller.

Sekarang, materi yang dipelajari adalah bagaimana mengirimkan input form HTML dan tampil di view ? Mudahnya input dari view kemudian tampil lagi di view lain. 

Nah, input form ini ada banyak. Contohnya input text, button dan yang lain. Beberapa jenis input ini dapat dilihat mudah dengan editor Visual Studio Code dengan mengetik input [ spasi ] 


Contoh input text dan hasil di peramban internet

Sudah ada gambaran bukan!? Nah, langsung saja kita eksekusi... 🚀

Pertama, buat view baru, ex : formInput.blade.php

Kemudian, buatlah satu input teks dan satu tombol dengan dibungkus markah form

Lihat kode dibawah ini :

    <form action="{{url('/kirimForm')}}" method="post" name="latihanForm">
            Nama <input type="text" name="nama">
            <br>
        <input type="submit" value="Kirim">

  1. action adalah sebuah route yang akan dipanggil. Dan ini perlu di definisikan atau dibuat nanti dalam fail web.php
    Route dalam atribut action ini bebas dalam penamaannya. Ex : /kirimForm, yang perlu menjadi perhatian. Dalam fail web.php harus sama dengan route ini.
  2. method diisi dengan post atau get
  3. name ini merupakan atribut opsional. Boleh ada dan boleh tidak ditulis.
  4. Ingat atribut name dalam input. Ini yang nanti akan diambil value-nya.
  5. Penting! Jangan lupa menuliskan tutup markah </form> 

Setelah selesai di view ini, sekarang pindah ke fail web.php

Fail ini berada di dalam folder /resources/routes/

Buat dua route, satu untuk menampilkan view yang tadi dibuat yaitu formInput.blade.php. Dan satu lagi untuk meng-handle route yang tadi ada di dalam atribut action yaitu /kirimForm


Perhatikan penulisan huruf BESAR dan kecil...

Okey, dari route /kirimForm ada tulisan DataController ya ...

Nah ini perlu dibuat terlebih dahulu, karena fail ini belum ada. Untuk membuatnya jalankan perintah 

php artisan make:controller DataController 


Fail DataController akan dibuat dalam folder /app/Http/Controllers


Sekarang, saatnya pindah fail. Kita buka fail DataController.php

Buat method baru dengan nama kirim

Boleh dengan nama lain? Sementara ini tidak!

Sebab di route kita menuliskan kirim, perhatikan di fail web.php

Lengkapnya, method kirim ini


  1. kirim ( Request $request ) artinya method ini memiliki parameter instance dari kelas Request yang disediakan oleh Laravel. Kelas ini digunakan untuk menangkap dan mengelola data yang dikirimkan melalui permintaan HTTP (seperti data POST dari formulir).
  2. $nama merupakan variabel yang menampung nilai dari data formulir.
  3. $request->nama nilai yang diambil. Ini harus sama dengan atribut name di formulir input.
  4. return digunakan untuk membalikan view dengan data parameter nama.
Okey, selanjutnya bagian terakhir adalah membuat view baru sebagai tempat output ( menampilkan data )
Pada return di DataController, mengembalikan view tampilData bukan ? Coba lihat kembali!

Nah, langsung saja buat view baru dengan nama tampilData.blade.php dan isi dengan teks sederhana {{ $nama }}.


{{ }} merupakan perintah untuk output dalam format blade Laravel

Variabel $nama didapatkan sesuai dengan parameter yang ada di dalam method kirim. Di baris kode return.

Sampai sini, mari uji coba program sederhana ini!
Cek web.php

Pastikan route awal kita yaitu /, bagian return sudah menuju ke view formInput



Coba input kata atau lainnya dan tekan tombol kirim
Akan muncul inputan teks di view berikutnya 




Mudah bukan? Yups!
Ada pertanyaan !? Sampaikan melalui kolom komentar dibawah yaaa....

Ahmad Istakim

Alumni dari jurusan Manajemen Informatika di Universitas Sains Al-Qur'an (UNSIQ ) Wonosobo. Tertarik dalam bidang pendidikan, teknologi komputasi dan disiplin ilmu keislaman ( Tafsir, Hadits, Arudl, Nahwu-Sharaf, Fiqh maupun Aqidah ) - https://s.id/blog-islamQ. Pernah juga mengenyam pendidikan di beberapa pesantren yang ada di Kab. Wonosobo dan Kab. Purworejo

Posting Komentar

Lebih baru Lebih lama