Laravel Bootstrap Modal Form Validasi: Panduan Lengkap – Codewithaden

Laravel memberikan cara mudah untuk memvalidasi tanpa Ajax.

Laravel Bootstrap Modal Form Validasi

Untuk membuat validasi formulir modal bootstrap di Laravel, gunakan validasi formulir AJAX sederhana menggunakan modal bootstrap. Server memeriksa semua bidang input terhadap yang ditentukan validasi , dan jika salah satu validasi rusak, itu akan mengalihkan ke halaman Buat kami dengan pesan kesalahan. Sekarang kami membuat aplikasi pencetak gol Liga Champion UEFA menggunakan Modal Bootstrap Laravel.

Pertama, kami akan menginstal Laravel dan kemudian mengkonfigurasinya.

Langkah 1: Mengkonfigurasi proyek Laravel.

Instal proyek Laravel baru dengan mengetikkan perintah berikut.

composer create-project --prefer-dist laravel/laravel championsleaguegoalscorer
 

Langkah 2: Siapkan database MySQL di file .env.

Konfigurasikan database di .env mengajukan.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=championsleague
DB_USERNAME=root
DB_PASSWORD= 

Saya telah mengatur kredensial basis data lokal.

Selanjutnya, migrasi dua tabel yang disediakan oleh Laravel. Beralih ke terminal Anda dan tekan perintah berikut.

php artisan migrate
 

Ini akan membuat 2 (dua) tabel di database Anda.

  1. pengguna
  2. Password_resets

Langkah 3: Bangun model, file migrasi, dan pengontrol untuk tabel pencetak gol kami.

Tekan perintah berikut di terminal Anda.

php artisan make:model Goalscorer -m
 

Ini akan membuat dua file.

  1. GOOTCORER.PHP model.
  2. create_goalscorers_table file migrasi.

Kita perlu membuat skema untuk tabel TheGoalscorers. Jadi navigasikan ke Laravel >> Database >> Migrasi >> create_goalscorers_table.

//create_goalscorers_table
/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('goalscorers', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('club');
            $table->string('country');
            $table->integer('score');
            $table->timestamps();
        });
    } 

Sekarang, migrasi tabel ke database.

php artisan migrate
 

Dalam database, Anda dapat melihat pencetak gol meja.

Langkah 4: Bangun file tampilan untuk menambahkan detail pencetak gol dalam database.

C file di Sumber daya >> tampilan >> create.blade.php dan tambahkan kode berikut.




  
    
    
    Champion League Goalscorer  
  

  	

Modal Example

@csrf

Langkah 5: Tambahkan kode jQuery.

Sekarang, termasuk jQuery.ajax () Fungsi di acara klik itu untuk mengirimkan permintaan ke server.

      

       

Kode akhir create.blade.php terlihat seperti di bawah.




  
    
    
    Champion League Goalscorer  
  

  	

Modal Example

@csrf

Laravel

Langkah 6: Buat satu pengontrol dan rute

php artisan make:controller GoalscorerController --resource
 

Itu akan membuat satu file pengontrol yang dipanggil GOOTCORERCONTROLLER.PHP.

Kami mendaftarkan satu rute di rute >> web.php mengajukan. Jadi mari kita lakukan itu.

// web.php

Route::resource('chempionleague','GoalscorerController'); 

Sekarang, beralih ke terminal Anda dan ketik perintah berikutnya.

php artisan route:list
 

Langkah selanjutnya adalah pergi ke GOOTCORERCONTROLLER.PHP mengajukan dan menambahkan beberapa kode ke fungsi create ()

// GoalscorerController.php

  /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    } 

Setelah memulai server pengembangan Laravel, buka terminal ikuti perintah berikut.

php artisan serve
 

Transfer ke browser dan tekan URL ini: http://localhost:8000/chempionleague/create

Langkah 7: Tulis fungsi toko untuk menyimpan data

Kami memerlukan pengkodean fungsi toko secara berurutan untuk menyimpan data dalam database.

//GoalscorerController.php
/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

         $validator = \Validator::make($request->all(), [
            'name' => 'required',
            'club' => 'required',
            'country' => 'required',
            'score' => 'required',
        ]);
        
        if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }
        $goalscorer= new Goalscorer();
        $goalscorer->name=$request->get('name');
        $goalscorer->club=$request->get('club');
        $goalscorer->country=$request->get('country');
        $goalscorer->score=$request->get('score');
        $goalscorer->save();
   
        return response()->json(['success'=>'Data is successfully added']);
    }
 

Langkah 8: Kesalahan tampilan

Jika Anda menekan tombol kirim dan semua bidang kosong, validator gagal dan menampilkan kesalahan.

Laravel

Akhirnya, Laravel Bootstrap Modal Form Validasi Tutorial sudah selesai.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *