{"id":52743,"date":"2025-01-17T15:35:06","date_gmt":"2025-01-17T08:35:06","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=52743"},"modified":"2025-02-03T15:28:19","modified_gmt":"2025-02-03T08:28:19","slug":"belajar-laravel-bagian-9","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-9\/","title":{"rendered":"Belajar Laravel Bagian 9: Membuat CRUD Edit Data"},"content":{"rendered":"\n<p>Pada sesi belajar Laravel&nbsp;bagian ke 8, kita telah mempelajari CRUD tentang cara membuat <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-8\/\" target=\"_blank\" rel=\"noopener\" title=\"belajar laravel crud\">CRUD tambah data<\/a>. Dalam lanjutan belajar laravel bagian ke 9 ini, kita akan belajar membuat CRUD edit data di Laravel, tentunya masih menggunakan Query Builder.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Membuat CRUD Edit data di Laravel<\/h2>\n\n\n\n<p>Pada sesi belajar Laravel CRUD bagian edit data ini, kita akan menggunakan Query Builder. Query Builder adalah fitur canggih dari Laravel yang memudahkan pengelolaan database. <\/p>\n\n\n\n<p>Dengan fitur ini, kita tidak perlu sepenuhnya memahami perintah <em>query <\/em>database seperti MySQL. Aplikasi yang kita buat pun dapat terhubung ke database dengan lebih mudah. Berikut ini langkah-langkah membuat fitur edit data pegawai di Laravel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Langkah 1. Membuat <em>route <\/em>edit data pegawai<\/h3>\n\n\n\n<p>Langkah pertama, mari membuat <em>route <\/em>edit data pegawai di file routes\/web.php. Pada baris terakhirnya, silakan Anda tambahkan <em>script <\/em>berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Route::get('\/pegawai\/edit\/{id}', &#091;PegawaiController::class, 'edit']);<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<p>{id} pada Route diatas digunakan sebagai identitas\/ nomor mana yang ingin dilakukan edit. Setelah mendapatkan id data yang akan di edit, maka informasi id tersebut akan diteruskan ke PegawaiController method edit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Langkah 2: Membuat method edit di PegawaiController<\/h3>\n\n\n\n<p>Berikutnya, membuat <em>method <\/em>edit di PegawaiController. Id yang dikirimkan oleh <em>route <\/em>sebelumnya, ditindaklanjuti oleh <em>controller <\/em>untuk memanggil detail data sesuai dengan <strong>id <\/strong>yang diminta.<\/p>\n\n\n\n<p>Silakan edit file <strong>app\/Http\/Controllers\/PegawaiController.php<\/strong>, tambahkan code berikut.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ method untuk edit data database ke table pegawai\n    public function edit($id)\n    {\n        \/\/ digunakan u, Ambil data pegawai berdasarkan id\n        $pegawai = DB::table('pegawai')-&gt;where('pegawai_id', $id)-&gt;first();\n\n\n        \/\/ Digunakan u, tampilkan view edit dan kirim data pegawai\n        return view('pegawai.edit', &#091;'pegawai' =&gt; $pegawai]);\n    }\n<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<p>Perintah tersebut digunakan untuk memanggil data pegawai dengan id yang dipilih. Selanjutnya, data tersebut ditampilkan ke <em>form <\/em>edit pegawai.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Langkah 3: Membuat View untuk Form Edit<\/h3>\n\n\n\n<p>Selanjutnya, buat <em>form <\/em>edit pegawai. Silakan membuat file untuk <em>form <\/em>edit di <strong>resources\/views\/pegawai\/edit.blade.php<\/strong>. Silakan tuliskan kode berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Edit Data Pegawai&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h2&gt;Form Edit Data Pegawai&lt;\/h2&gt;\n\n\n    &lt;!-- Ini adalah Tombol kembali ke halaman utama pegawai --&gt;\n    &lt;p&gt;\n        &lt;a href=\"\/pegawai\"&gt;Kembali&lt;\/a&gt;\n    &lt;\/p&gt;\n\n\n    &lt;!-- Contoh Form Edit Data Pegawai Sederhana --&gt;\n    &lt;form action=\"\/pegawai\/update\/{{ $pegawai-&gt;pegawai_id }}\" method=\"post\"&gt;\n        {{ csrf_field() }}\n        &lt;table&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;label for=\"nama\"&gt;Nama&lt;\/label&gt;&lt;\/td&gt;\n                &lt;td&gt;&lt;input type=\"text\" id=\"nama\" name=\"nama\" value=\"{{ $pegawai-&gt;pegawai_nama }}\" required=\"required\"&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;label for=\"jabatan\"&gt;Jabatan&lt;\/label&gt;&lt;\/td&gt;\n                &lt;td&gt;&lt;input type=\"text\" id=\"jabatan\" name=\"jabatan\" value=\"{{ $pegawai-&gt;pegawai_jabatan }}\" required=\"required\"&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;label for=\"umur\"&gt;Umur&lt;\/label&gt;&lt;\/td&gt;\n                &lt;td&gt;&lt;input type=\"number\" id=\"umur\" name=\"umur\" value=\"{{ $pegawai-&gt;pegawai_umur }}\" required=\"required\"&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;label for=\"alamat\"&gt;Alamat&lt;\/label&gt;&lt;\/td&gt;\n                &lt;td&gt;&lt;textarea id=\"alamat\" name=\"alamat\" required=\"required\"&gt;{{ $pegawai-&gt;pegawai_alamat }}&lt;\/textarea&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td colspan=\"2\" style=\"text-align: right;\"&gt;\n                    &lt;input type=\"submit\" value=\"Simpan Data\"&gt;\n                &lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/table&gt;\n    &lt;\/form&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<p>Saat tombol Submit di klik, data yang telah diisi di <strong>form edit<\/strong> kemudian dikirimkan ke method pegawai <strong>update.<\/strong> Tak lupa, buat <em>route <\/em>updatenya terlebih dahulu.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Langkah 4: Membuat Route untuk Update Data<\/strong><\/h3>\n\n\n\n<p>Langkah ke empat, membuat <em>route <\/em>untuk melakukan proses update data. Silakan tambahkan script berikut di file <strong>routes\/web.php<\/strong>. Tambahkan kode berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Route::post('\/pegawai\/update\/{id}', &#091;PegawaiController::class, 'update']);<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<p>Dari <em>route <\/em>tersebut, datanya akan dikirim ke <strong>PegawaiController<\/strong> dengan <em>method <\/em><strong>update<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Langkah 5: Membuat Method update di Controller<\/strong><\/h3>\n\n\n\n<p>Langkah ke lima, buat <em>method <\/em><strong>update <\/strong>di <strong>PegawaiController<\/strong> untuk memproses perubahan data. Silakan edit file <strong>app\/Http\/Controllers\/PegawaiController.php&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Membuat method proses edit data\n    public function update(Request $request, $id)\n    {\n        \/\/ Validasi data\n        $request-&gt;validate(&#091;\n            'nama' =&gt; 'required|string|max:255',\n            'jabatan' =&gt; 'required|string|max:255',\n            'umur' =&gt; 'required|integer|min:18',\n            'alamat' =&gt; 'required|string',\n        ]);\n\n        \/\/ Update data pegawai di database\n        DB::table('pegawai')-&gt;where('pegawai_id', $id)-&gt;update(&#091;\n            'pegawai_nama' =&gt; $request-&gt;nama,\n            'pegawai_jabatan' =&gt; $request-&gt;jabatan,\n            'pegawai_umur' =&gt; $request-&gt;umur,\n            'pegawai_alamat' =&gt; $request-&gt;alamat,\n        ]);\n\n        \/\/Setelah itu redirect kembali ke halaman utama data pegawai\n        return redirect('\/pegawai')-&gt;with('success', 'Selamat Data pegawai Anda berhasil diupdate');\n    }\n\n<\/code><\/pre>\n\n\n\n<p>Setelah data pegawai berhasil di edit, selanjutnya halaman website akan dialihkan ke tampilan utama Data Pegawai dengan menampilkan pesan sukses \u2018Selamat Data pegawai Anda berhasil diupdate&#8217;.<\/p>\n\n\n\n<p>Sampai disini, langkah pembuatan fitur edit telah selesai dilakukan. Terakhir adalah tahap testing untuk memastikan program yang dibuat sesuai dengan rencana.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Langkah 6: Melakukan testing edit data pegawai<\/strong><\/h3>\n\n\n\n<p>Langkah terakhir melakukan <em>testing <\/em>pada menu edit yang baru saja dibuat.&nbsp;Silakan jalankan terlabih dahulu <em>service <\/em>Laravelnya dengan perintah artisan berikut.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve&nbsp;<\/code><\/pre>\n\n\n\n<p>Selanjutnya, akses url&nbsp; <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-gridlove-acc-color\">http:\/\/127.0.0.1:8000\/pegawai<\/mark>&nbsp;dari browser favorit Anda, lalu lakukan <em>testing <\/em>edit data pegawai.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"192\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-1024x192.jpg\" alt=\"belajar laravel crud - edit data pegawai\" class=\"wp-image-52744\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-1024x192.jpg 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-300x56.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-768x144.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-370x69.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-270x51.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-570x107.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1-740x138.jpg 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_1.jpg 1272w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Klik tombol edit pada salah satu pegawai yang ingin diubah informasi identitasnya.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"321\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_2.jpg\" alt=\"tampilan form edit\" class=\"wp-image-52745\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_2.jpg 371w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_2-300x260.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_2-270x234.jpg 270w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Kami akan mencoba mengubah nama pegawai, setelah itu klik Simpan Data.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"226\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-1024x226.jpg\" alt=\"hasil update data\" class=\"wp-image-52746\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-1024x226.jpg 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-300x66.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-768x170.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-370x82.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-270x60.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-570x126.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3-740x164.jpg 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/Screenshot_3.jpg 1235w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Selamat, data berhasil di edit.&nbsp;Terasa mudah bukan?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Fitur edit data pada CRUD laravel adalah salah satu bagian penting dalam pengelolaan aplikasi berbasis database. Untuk memastikan fitur ini berjalan dengan baik, ada beberapa langkah yang harus dilakukan secara berurutan, seperti membuat route edit, membuat method edit di controller, membuat view, hingga menambahkan route update datanya. <\/p>\n\n\n\n<p>Dengan mengikuti langkah-langkah diatas, Anda dapat membuat fitur edit data berfungsi secara baik dan dapat diimplementasikan dalam beberapa bagian pada website.<\/p>\n\n\n\n<p>Demikianlah cara membuat fitur edit data di Laravel menggunakan Query Builder. Kita hampir sampai di penghujung series CRUD Laravel. Pada sesi belajar laravel selanjutnya, kami akan menjelaskan tentang bagaimaan cara <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-10\/\" target=\"_blank\" rel=\"noopener\" title=\"\">membuat CRUD hapus<\/a> data pegawai. Semoga bermanfaat.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada sesi belajar Laravel&nbsp;bagian ke 8, kita telah mempelajari CRUD tentang cara membuat CRUD tambah data. Dalam lanjutan belajar laravel bagian ke 9 ini, kita akan belajar membuat CRUD edit data di Laravel, tentunya masih menggunakan Query Builder. Membuat CRUD Edit data di Laravel Pada sesi belajar Laravel CRUD bagian edit data ini, kita akan [&hellip;]<\/p>\n","protected":false},"author":319,"featured_media":52754,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1587,2247,796,1497],"class_list":{"0":"post-52743","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-laravel","9":"tag-crud","10":"tag-laravel","11":"tag-tutorial-laravel"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/banner-belajar-laravel-membuat-crud-edit-data.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-dIH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/319"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=52743"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52754"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=52743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=52743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=52743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}