anu

app/Http/Controllers/SantriController.php

@@ -82,62 +82,58 @@ public function store(Request $request)
         }
     }
 
-    public function update(Request $request, Santri $santri, $id)
+    public function update(Request $request, $id)
     {
-        $request->validate(
+        $request->validate([
-            [
+            'nama' => 'required',
-                'nama' => 'required',
+            'alamat' => 'required',
-                'alamat' => 'required',
+            'status_santri' => 'required',
-                'status_santri' => 'required',
+            'role_santri' => 'required',
-                'role_santri' => 'required',
+            'jk' => 'required',
-                'jk' => 'required',
+            'tanggal_lahir' => 'required|date',
-                'tanggal_lahir' => 'required',
+            'foto' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
-                'foto' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
+        ], [
-            ],
+            'nama.required' => 'wajib mengisi nama santri',
-            [
+            'alamat.required' => 'wajib mengisi alamat santri',
-                'nama.required' => 'nama santri wajib di isi',
+            'status_santri.required' => 'wajib mengisi status santri',
-                'alamat.required' => 'alamat santri wajib di isi',
+            'role_santri.required' => 'wajib mengisi role santri',
-                'status_santri.required' => 'wajib memilih status santri',
+            'jk.required' => 'wajib mengisi jenis kelamin',
-                'role_santri.required' => 'wajib memilih role santri',
+            'tanggal_lahir.required' => 'wajib mengisi tanggal lahir santri',
-                'jk.required' => 'wajib memilih jenis kelamin santri',
+            'tanggal_lahir.date' => 'tanggal lahir harus dalam format tanggal yang benar',
-                'tanggal_lahir.required' => 'wajib mengisi tanggal lahir santri'
+        ]);
-            ]
-        );
-
-        $fotoPath = null;
-
-        if ($request->has('foto')) {
-            $foto = $request->file('foto');
-            $fotoName = time() . '_' . $foto->getClientOriginalName();
-
-            $foto->move(public_path('fotoSantri/'), $fotoName);
-            $fotoPath = 'fotoSantri/' . $fotoName;
-        }
-
-        $santri = Santri::findOrFail($id);
 
         try {
-            if ($request->file('foto') == '') {
+            $santri = Santri::findOrFail($id);
-                $santri->nama = $request->nama;
+            $fotoPath = $santri->foto;
-                $santri->alamat = $request->alamat;
+
-                $santri->status_santri = $request->status_santri;
+            if ($request->hasFile('foto')) {
-                $santri->role_santri = $request->role_santri;
+                if ($santri->foto && File::exists(public_path($santri->foto))) {
-                $santri->jk = $request->jk;
+                    File::delete(public_path($santri->foto));
-                $santri->tanggal_lahir = $request->tanggal_lahir;
+                }
-            } else {
+
-                File::delete('fotoSantri/' . basename($santri->foto));
+                $foto = $request->file('foto');
-                $santri->foto = $fotoPath;
+                $fotoName = time() . '_' . $foto->getClientOriginalName();
-                $santri->nama = $request->nama;
+                $foto->move(public_path('fotoSantri'), $fotoName);
-                $santri->alamat = $request->alamat;
+                $fotoPath = 'fotoSantri/' . $fotoName;
-                $santri->status_santri = $request->status_santri;
-                $santri->role_santri = $request->role_santri;
-                $santri->jk = $request->jk;
-                $santri->tanggal_lahir = $request->tanggal_lahir;
             }
 
-            return redirect()->back()->with('success', 'Data Berhasil Di Ubah');
+            $updateStatus = $santri->update([
+                'nama' => $request->nama,
+                'alamat' => $request->alamat,
+                'status_santri' => $request->status_santri,
+                'role_santri' => $request->role_santri,
+                'jk' => $request->jk,
+                'tanggal_lahir' => $request->tanggal_lahir,
+                'foto' => $fotoPath
+            ]);
+
+            if (!$updateStatus) {
+                return redirect()->back()->with('error', 'Gagal memperbarui data: Update gagal di database.');
+            }
+
+            return redirect()->back()->with('success', 'Data Berhasil Diubah');
         } catch (\Throwable $th) {
-            return redirect()->back()->with('error', 'Gagal' . $th->getMessage());
+            return redirect()->back()->with('error', 'Gagal memperbarui data: ' . $th->getMessage());
         }
     }
 

resources/js/Components/ModalInput.jsx

@@ -1,10 +1,14 @@
 import { Inertia } from "@inertiajs/inertia";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const ModalInput = ({ fields, tableName, options }) => {
+const ModalInput = ({ fields, tableName, options, initialData, onClose }) => {
     const [formData, setFormData] = useState({});
     const [errors, setErrors] = useState({});
 
+    useEffect(() => {
+        setFormData(initialData || {})
+    }, [initialData]);
+
     const handleChange = (e) => {
         if (e.target.type === "file") {
             setFormData({ ...formData, [e.target.name]: e.target.files[0] });
@@ -15,32 +19,45 @@ const ModalInput = ({ fields, tableName, options }) => {
 
     const handleSubmit = (e) => {
         e.preventDefault()
-        console.log("tableName:", tableName); // Debugging
+        // console.log("tableName:", tableName); 
-
 
         const formDataObj = new FormData()
         Object.keys(formData).forEach((key) => {
             formDataObj.append(key, formData[key])
         })
 
-        Inertia.post(`/add${tableName}`, formDataObj, {
+        if (initialData) {
-            forceFormData: true,
+            Inertia.post(`/update${tableName}/${initialData.id}`, formDataObj, {
-            onError: (errors) => setErrors(errors),
+                forceFormData: true,
-            onSuccess: () => {
+                onError: (errors) => setErrors(errors),
-                document.getElementById('my_modal_7').checked = false
+                onSuccess: () => {
-                setFormData({})
+                    document.getElementById('my_modal_7').checked = false
-                setErrors({})
+                    setFormData({})
-            }
+                    setErrors({})
-        })
+                    onClose({})
+                }
+            })
+        } else {
+            Inertia.post(`/add${tableName}`, formDataObj, {
+                forceFormData: true,
+                onError: (errors) => setErrors(errors),
+                onSuccess: () => {
+                    document.getElementById('my_modal_7').checked = false
+                    setFormData({})
+                    setErrors({})
+                }
+            })
+        }
     }
 
     return (
         <div>
-            <label htmlFor="my_modal_7" className="btn">Open Modal</label>
+            <input type="checkbox" id="modal_input" className="modal-toggle" />
-            <input type="checkbox" id="my_modal_7" className="modal-toggle" />
             <div className="modal" role="dialog">
                 <div className="modal-box">
-                    <h2 className="font-bold text-lg text-center mb-5">Tambah Data</h2>
+                    <h2 className="font-bold text-lg text-center mb-5">
+                        {initialData ? "Edit Data" : "Tambah Data"}
+                    </h2>
                     <form onSubmit={handleSubmit} encType="multipart/form-data">
                         {Object.keys(fields).map((field) => (
                             <div key={field} className="mb-2">
@@ -53,7 +70,9 @@ const ModalInput = ({ fields, tableName, options }) => {
                                             onChange={handleChange}
                                             className="select select-bordered w-full select-secondary"
                                         >
-                                            <option disabled value="">Pilih {field.replace("_", " ")}</option>
+                                            <option disabled value="">
+                                                Pilih {field.replace("_", " ")}
+                                            </option>
                                             {options[field] && Object.entries(options[field]).map(([key, value]) => (
                                                 <option key={key} value={key}>{value}</option>
                                             ))}
@@ -69,26 +88,23 @@ const ModalInput = ({ fields, tableName, options }) => {
                                         <input
                                             type={fields[field]}
                                             name={field}
-                                            onChange={(e) =>
+                                            value={formData[field] || ""}
-                                                setFormData({
+                                            onChange={handleChange}
-                                                    ...formData,
-                                                    [field]: e.target.type === "file" ? e.target.files[0] : e.target.value
-                                                })
-                                            }
                                             className="grow border-none focus:ring-0"
                                             placeholder={`Masukkan ${field.replace("_", " ")}`}
                                         />
-
                                     )}
                                 </label>
                                 {errors[field] && <p className="text-red-500 text-sm">{errors[field]}</p>}
                             </div>
                         ))}
 
-                        <button type="submit" className="btn btn-secondary">Tambah Data</button>
+                        <button type="submit" className="btn btn-secondary">
+                            {initialData ? "Simpan Perubahan" : "Tambah Data"}
+                        </button>
                     </form>
                 </div>
-                <label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
+                <label className="modal-backdrop" htmlFor="modal_input">Close</label>
             </div>
         </div>
     );

resources/js/Pages/list-admin/santri/IndexSantri.jsx

@@ -1,16 +1,28 @@
-import React from 'react'
+import React, { useState } from 'react';
-import { Head } from '@inertiajs/react'
+import { Head } from '@inertiajs/react';
-import ModalInput from '@/Components/ModalInput'
+import ModalInput from '@/Components/ModalInput';
+
+export default function IndexSantri({ santri, fields, options }) {
+    const [selectedSantri, setSelectedSantri] = useState(null);
 
-export default function IndexSantri({ santri, fields, options, santris }) {
     return (
         <div className="text-red-900">
             <Head title="Daftar Santri" />
             <h1>Daftar Santri</h1>
-            <ModalInput fields={fields} options={options} tableName="santris" />
+
+            <ModalInput
+                fields={fields}
+                options={options}
+                tableName="santris"
+                initialData={selectedSantri}
+                onClose={() => setSelectedSantri(null)}
+            />
+
+            <label htmlFor="modal_input" className="btn btn-primary">Tambah Santri</label>
+
             {santri ? santri.map((item, i) => {
                 return (
-                    <div key={i}>
+                    <div key={i} className="border p-4 mb-2">
                         <p>Nama: {item.nama}</p>
                         <p>Alamat: {item.alamat}</p>
                         <p>Status: {item.status_santri}</p>
@@ -18,10 +30,17 @@ export default function IndexSantri({ santri, fields, options, santris }) {
                         <p>Jenis Kelamin: {item.jk}</p>
                         <p>Tanggal Lahir: {item.tanggal_lahir}</p>
                         <p>Foto: {item.foto}</p>
-                        <hr />
+                        <div className="mt-2">
+                            <button className="btn btn-warning btn-sm" onClick={() => {
+                                setSelectedSantri(item);
+                                document.getElementById('modal_input').checked = true;
+                            }}>
+                                Edit
+                            </button>
+                        </div>
                     </div>
-                )
+                );
             }) : ""}
         </div>
     );
-}
+}

routes/web.php

@@ -28,6 +28,7 @@
 
 Route::get('/data-santri', [SantriController::class, 'index'])->name('indexSantri');
 Route::post('/addsantris', [SantriController::class, 'store'])->name('storeSantri');
+Route::post('/updatesantris/{id}', [SantriController::class, 'update'])->name('updateSantri');
 
 Route::get('/dashboard', function () {
     return Inertia::render('Dashboard');