{"id":284,"date":"2023-03-15T03:05:26","date_gmt":"2023-03-14T20:05:26","guid":{"rendered":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/?p=284"},"modified":"2024-07-22T14:14:30","modified_gmt":"2024-07-22T07:14:30","slug":"contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023","status":"publish","type":"post","link":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/","title":{"rendered":"Contoh Pengerjaan Soal UKK SMK RPL Paket 2 Tahun 2023"},"content":{"rendered":"\n<p>Pada artikel ini akan dicontohkan pengerjaan minimal untuk <a rel=\"noreferrer noopener\" href=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2136-P2-SPK-Rekayasa-Perangkat-Lunak.pdf\" target=\"_blank\">Soal Paket 2 UKK Kompetensi Keahlian RPL Tahun 2022\/2023<\/a> menggunakan framework Laravel 9. Semua tahapan pada artikel ini harus diperhatikan agar target pengerjaan dapat tercapai dengan lancar.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Tahap persiapan ini diperlukan jika lingkungan pengembangan Anda belum sesuai dengan kebutuhan pengembangan di Laravel 9, atau masih menggunakan platform server lain semisal XAMPP atau Laragon 5. Jika masih ada XAMPP yang terinstall, cukup pastikan semua service (Apache, MariaDB, FileZilla Server) di-uninstall, dan di-stop melalui XAMPP Control Panel (jalankan sebagai Administrator). Selain itu, hapus path menuju ke PHP (dan Composer, jika ada) dari User dan System Environment Variables. Untuk memastikan semua path untuk PHP dan Composer sudah sesuai, cek dengan menjalankan perintah <strong>php -v<\/strong> dan <strong>composer -V<\/strong> di Command Prompt atau terminal milik VSCode. Untuk mengecek versi npm, yang digunakan adalah <strong>npm &#8211;version<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>PERHATIAN<\/strong>: Setiap kali Anda selesai mengubah setting Environment Variables, pastikan Anda <mark>menutup semua aplikasi terminal yang ada (cmd, powershell, cmder, git bash, termasuk juga VSCode), lalu buka kembali<\/mark> untuk mengecek berhasil tidaknya pengubahan setting path yang sudah dilakukan.<\/code><\/pre>\n\n\n\n<p>Pada bawaan Laragon 6, versi yang muncul (saat artikel ini dibuat) adalah <strong>php 8.1.10<\/strong>, <strong>composer 2.4.1<\/strong>, dan <strong>npm 8.18.0<\/strong>. Setting ini sudah memenuhi saat kita ingin mengerjakan project menggunakan Laravel 9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalasi dan setting Laragon 6<\/h2>\n\n\n\n<p>Unduh Laragon 6 (Full version) menggunakan setting bahasa &#8220;English&#8221;, lalu lakukan instalasi Laragon 6 seperti biasa, dengan semua setting diaktifkan. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"481\" data-attachment-id=\"301\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-26\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?fit=581%2C481&amp;ssl=1\" data-orig-size=\"581,481\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?fit=300%2C248&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?fit=581%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?resize=581%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-301\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?w=581&amp;ssl=1 581w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?resize=300%2C248&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image.png?resize=242%2C200&amp;ssl=1 242w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/figure>\n\n\n\n<p>Setelah instalasi dan reboot, masuk ke bagian preferensi, lalu aktifkan setting berikut agar nantinya Anda tidak perlu menjalankan semua layanan yang diperlukan di Laragon secara manual setiap kali akan memulai bekerja:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"205\" data-attachment-id=\"304\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-1-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?fit=529%2C205&amp;ssl=1\" data-orig-size=\"529,205\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?fit=300%2C116&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?fit=529%2C205&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?resize=529%2C205&#038;ssl=1\" alt=\"\" class=\"wp-image-304\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?w=529&amp;ssl=1 529w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?resize=300%2C116&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-1.png?resize=516%2C200&amp;ssl=1 516w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/figure>\n\n\n\n<p>Pastikan Anda memilih Allow Access saat ada konfirmasi dari Windows Firewall menanyakan akses bagi Apache dan mysqld, ketika Start All diklik untuk pertama kalinya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penambahan Laragon ke Path <\/h2>\n\n\n\n<p>Pada framework Laravel, penggunaan command line interface merupakan suatu keharusan, dan akan mengotomasi banyak hal. Untuk itu kita harus memastikan path ke php, composer, npm, dan sebagainya sudah diset dengan baik. Untuk menambahkan setting ini kita tidak perlu membuka setting Environment Variables, namun cukup menggunakan menu yang Ada pada Laragon (Tools-&gt;Path-&gt;Add Laragon to Path):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"375\" data-attachment-id=\"306\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-2-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?fit=638%2C375&amp;ssl=1\" data-orig-size=\"638,375\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?fit=300%2C176&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?fit=638%2C375&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?resize=638%2C375&#038;ssl=1\" alt=\"\" class=\"wp-image-306\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?w=638&amp;ssl=1 638w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-2.png?resize=340%2C200&amp;ssl=1 340w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Penambahan Opsi Laravel 9 pada Quick App<\/h2>\n\n\n\n<p>Secara default, saat Laragon 6 dirilis (September 2022), opsi Quick app untuk Laravel akan memilih versi Laravel terbaru saat itu (versi 9). Namun sejak dirilisnya Laravel 10 pada tanggal 14 Februari 2023 yang lalu, menu Quick app akan otomatis menginstallkan Laravel 10, dan saat ini sepertinya masih belum <em>compatible <\/em>dengan komponen Datatables yang akan kita gunakan, serta beberapa perubahan yang mungkin belum sesuai dengan langkah-langkah yang ada pada artikel ini. Untuk menambahkan menu instalasi Laravel 9, buka menu Quick app -&gt; Configuration.. pada Laragon, lalu tambahkan baris berikut di bawah entry untuk &#8220;Laravel=&#8230;&#8221;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Laravel 9=composer create-project laravel\/laravel:^9.* %s --prefer-dist<\/code><\/pre>\n\n\n\n<p>Sehingga isi file konfigurasi menjadi seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"103\" data-attachment-id=\"308\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-3-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?fit=784%2C103&amp;ssl=1\" data-orig-size=\"784,103\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-3\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?fit=300%2C39&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?fit=784%2C103&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?resize=784%2C103&#038;ssl=1\" alt=\"\" class=\"wp-image-308\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?w=784&amp;ssl=1 784w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?resize=300%2C39&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-3.png?resize=768%2C101&amp;ssl=1 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<p>Setting <strong>9.*<\/strong> tersebut memberitahukan kepada composer untuk menggunakan versi <em>major<\/em> 9, dengan versi <em>minor <\/em>terbaru. Simpan, lalu tutup editor. Kini, menu Quick app seharusnya sudah menyediakan pilihan untuk menginstall Laravel 9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penambahan phpMyAdmin ke Laragon 6<\/h2>\n\n\n\n<p>Salah satu faktor yang mungkin membuat beberapa orang sulit berpaling dari XAMPP dan mulai menggunakan Laragon adalah tidak tersedianya phpMyAdmin secara default, dan menyediakan HeidiSQL sebagai aplikasi antarmuka pengelola basis data bawaan, saat kita mengklik tombol &#8220;Database&#8221; di Laragon. Padahal, di Laragon 6, untuk menggantinya dengan phpMyAdmin caranya sangat mudah, yaitu dengan mengakses menu Tools-&gt;Quick add-&gt;*phpmyadmin:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"445\" data-attachment-id=\"333\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-13-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?fit=569%2C445&amp;ssl=1\" data-orig-size=\"569,445\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-13\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?fit=300%2C235&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?fit=569%2C445&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?resize=569%2C445&#038;ssl=1\" alt=\"\" class=\"wp-image-333\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?w=569&amp;ssl=1 569w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?resize=300%2C235&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-13.png?resize=256%2C200&amp;ssl=1 256w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/figure>\n\n\n\n<p>Langkah tersebut akan membantu mengunduh phpMyAdmin versi terbaru dari situs resminya, menambahkan setting yang diperlukan, hingga menggantikan tombol &#8220;Database&#8221; dari HeidiSQL ke phpMyAdmin. Nantinya, phpMyAdmin hanya akan sedikit kita gunakan pada contoh pengerjaan ini.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Text Editor yang akan digunakan selama pengerjaan ini adalah Microsoft Visual Studio Code (VSCode), yang dapat dikembangkan menggunakan Extensions spesifik untuk pengembangan menggunakan Laravel 9. Install VSCode versi terbaru dari web <a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\" target=\"_blank\">https:\/\/code.visualstudio.com<\/a> . Setelah itu, install Extension berikut untuk mendukung pengembangan pada artikel ini:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PHP Intelephense by Ben Mewburn<\/li>\n\n\n\n<li>Laravel Snippets by Winnie Lin<\/li>\n\n\n\n<li>Laravel Blade Snippets by Winnie Lin<\/li>\n\n\n\n<li>Material Icon Theme by Philipp Kief<\/li>\n\n\n\n<li>Duplicate selection or line by Greg Bacchus<\/li>\n\n\n\n<li>Bootstrap 5 Quick Snippets by Anbuselvan Rocky<\/li>\n\n\n\n<li>Bootstrap 5 Icon Snippets by Joshua Needham<\/li>\n<\/ul>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Buka menu Quick app di Laragon, lalu pilih menu Laravel 9 yang sudah ditambahkan sebelumnya. Masukkan nama aplikasi yang akan dibuat. Pada contoh ini kita akan menggunakan <strong>pelaporan<\/strong> . Nama aplikasi yang kita isikan tersebut nantinya oleh Laragon akan otomatis digunakan sebagai domain name untuk mengakses alamat aplikasi di http:\/\/pelaporan.test, serta nama database di MySQL, dan nama <em>project folder <\/em>di laragon\/www. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"227\" height=\"130\" data-attachment-id=\"313\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-4-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-4.png?fit=227%2C130&amp;ssl=1\" data-orig-size=\"227,130\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-4\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-4.png?fit=227%2C130&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-4.png?fit=227%2C130&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-4.png?resize=227%2C130&#038;ssl=1\" alt=\"\" class=\"wp-image-313\" \/><figcaption class=\"wp-element-caption\">Isikan nama aplikasi tanpa spasi, sebaiknya menggunakan huruf kecil semua, dan bisa menggunakan tanda dash (-), lalu klik OK. <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"289\" data-attachment-id=\"315\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-5-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?fit=431%2C289&amp;ssl=1\" data-orig-size=\"431,289\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-5\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?fit=300%2C201&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?fit=431%2C289&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?resize=431%2C289&#038;ssl=1\" alt=\"\" class=\"wp-image-315\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?w=431&amp;ssl=1 431w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?resize=300%2C201&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-5.png?resize=298%2C200&amp;ssl=1 298w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><figcaption class=\"wp-element-caption\">Saat ada prompt dari Windows UAC semacam ini, pilih Yes karena ini diperlukan untuk membuatkan nama domain baru di <em>hosts file <\/em>milik Windows.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"512\" data-attachment-id=\"320\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/2023-03-14_140423\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?fit=942%2C512&amp;ssl=1\" data-orig-size=\"942,512\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2023-03-14_140423\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?fit=300%2C163&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?fit=942%2C512&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?resize=942%2C512&#038;ssl=1\" alt=\"\" class=\"wp-image-320\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?w=942&amp;ssl=1 942w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?resize=300%2C163&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?resize=768%2C417&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_140423.png?resize=368%2C200&amp;ssl=1 368w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><figcaption class=\"wp-element-caption\">Jika semuanya berjalan dengan lancar, maka akan ada tampilan progress seperti gambar di atas, dan tidak ada pesan error atau kegagalan, hingga muncul informasi Project path dan Pretty url.<\/figcaption><\/figure>\n\n\n\n<p>Jika karena suatu hal tidak muncul command prompt, maka Laragon dapat ditutup dahulu melalui menu klik kanan -&gt; Exit, lalu jalankan kembali Laragon. Seharusnya sudah tampil command prompt seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"414\" height=\"126\" data-attachment-id=\"321\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-7-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?fit=414%2C126&amp;ssl=1\" data-orig-size=\"414,126\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-7\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?fit=300%2C91&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?fit=414%2C126&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?resize=414%2C126&#038;ssl=1\" alt=\"\" class=\"wp-image-321\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?w=414&amp;ssl=1 414w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-7.png?resize=300%2C91&amp;ssl=1 300w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/figure>\n\n\n\n<p>Hingga langkah ini, sebenarnya tampilan awal (Welcome Screen) milik Laravel sudah bisa Anda tampilkan dengan mengakses alamat http:\/\/nama-aplikasi.test , atau dalam hal ini yang digunakan adalah http:\/\/pelaporan.test . Bisa juga kita buka melalui menu klik kanan pada Laragon-&gt;www.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"637\" data-attachment-id=\"326\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/2023-03-14_152656\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?fit=941%2C637&amp;ssl=1\" data-orig-size=\"941,637\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2023-03-14_152656\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?fit=300%2C203&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?fit=941%2C637&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?resize=941%2C637&#038;ssl=1\" alt=\"\" class=\"wp-image-326\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?w=941&amp;ssl=1 941w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?resize=300%2C203&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?resize=768%2C520&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_152656.png?resize=295%2C200&amp;ssl=1 295w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Pada command prompt yang muncul di tampilan sebelumnya, jika pada saat instalasi VSCode centang pada &#8220;add to PATH&#8221; tidak dinonaktifkan, Anda bisa langsung memulai membuka project folder yang dibuat oleh Laragon saat instalasi Laravel 9 menggunakan perintah: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>code .<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"26\" data-attachment-id=\"322\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-8-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-8.png?fit=272%2C26&amp;ssl=1\" data-orig-size=\"272,26\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-8\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-8.png?fit=272%2C26&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-8.png?fit=272%2C26&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-8.png?resize=272%2C26&#038;ssl=1\" alt=\"\" class=\"wp-image-322\" \/><figcaption class=\"wp-element-caption\">Contoh membuka project folder di VSCode melalui command prompt<\/figcaption><\/figure>\n\n\n\n<p>Atau, jika karena sebab lain cara tersebut tidak dapat dilakukan, maka Anda tetap dapat membuka folder tersebut melalui menu yang ada di VSCode (File-&gt;Open Folder&#8230;).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"340\" data-attachment-id=\"323\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-9-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?fit=494%2C340&amp;ssl=1\" data-orig-size=\"494,340\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-9\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?fit=300%2C206&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?fit=494%2C340&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?resize=494%2C340&#038;ssl=1\" alt=\"\" class=\"wp-image-323\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?w=494&amp;ssl=1 494w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?resize=300%2C206&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-9.png?resize=291%2C200&amp;ssl=1 291w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><figcaption class=\"wp-element-caption\">Pilih &#8220;Yes, I trust the authors&#8221; saat ditanyakan oleh VSCode, yang ingin memastikan bahwa project folder tersebut aman dari &#8220;program jahat&#8221;, dan agar pengerjaan bisa dilanjutkan dengan lancar. Pada contoh di atas, saya juga mencentang &#8220;Trust the authors of all files in the parent folder &#8216;www'&#8221;, karena nantinya juga bisa berisi project lain yang kita kerjakan di Laragon, sehingga tidak perlu ditanyakan berulang kali.<\/figcaption><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p>File .env merupakan cara Laravel (dan beberapa aplikasi lain) untuk menyimpan berbagai konfigurasi aplikasi mencakup berbagai hal, termasuk nama aplikasi, URL aplikasi, setting koneksi database, dan sebagainya. Untuk keperluan saat ini, silakan sesuaikan APP_URL dan DB_DATABASE saja, misal:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"286\" height=\"257\" data-attachment-id=\"327\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-10-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?fit=286%2C257&amp;ssl=1\" data-orig-size=\"286,257\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-10\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?fit=286%2C257&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?fit=286%2C257&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?resize=286%2C257&#038;ssl=1\" alt=\"\" class=\"wp-image-327\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?w=286&amp;ssl=1 286w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-10.png?resize=223%2C200&amp;ssl=1 223w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/figure>\n\n\n\n<p>APP_URL menyesuaikan dengan tampilan pada Pretty url setelah instalasi Laravel. DB_DATABASE sama dengan nama aplikasi yang Anda masukkan saat instalasi Laravel melalui menu Laragon Quick app. Diasumsikan tidak ada perubahan pada password user root di MySQL, maka DB_PASSWORD dibiarkan kosong. Simpan, lalu tutup dari editor.<\/p>\n\n\n\n<p>OPSIONAL: Jika pada langkah ini Anda ingin melakukan pengujian konektivitas database serta validitas file .env, buka terminal milik VSCode dengan menu Terminal-&gt;New Terminal, lalu jalankan perintah <strong>php artisan tinker<\/strong> . Pada prompt milik tinker, jalankan:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">DB::connection()-&gt;getPdo();<\/pre>\n\n\n\n<p>Jika kita melakukan kesalahan setting database atau semacanya, maka akan muncul tampilan semacam ini:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"143\" data-attachment-id=\"334\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-14-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?fit=643%2C143&amp;ssl=1\" data-orig-size=\"643,143\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-14\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?fit=300%2C67&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?fit=643%2C143&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?resize=643%2C143&#038;ssl=1\" alt=\"\" class=\"wp-image-334\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?w=643&amp;ssl=1 643w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-14.png?resize=300%2C67&amp;ssl=1 300w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<p>Keluar dari tampilan tinker dengan perintah <strong>exit<\/strong><\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Jika dulu kita terbiasa membuat tabel-tabel (dan objek database lainnya) di MySQL melalui phpMyAdmin, maka Laravel menyediakan fitur Database Migrations untuk berbagai kemudahan dan fleksibilitas, selain tentunya untuk alasan kepraktisan dan portabilitas, karena Laravel Migrations mengotomasi pembuatan database sekaligus relasi antar tabel dengan sintaks yang relatif ringkas. Namun sebelum membuat migration, akan kita lakukan revisi\/modifikasi pada struktur database yang ada pada soal UKK P2, sehingga lebih ringkas, <em>usable<\/em>, dan mendekati kesesuaian dengan konvensi yang ada di Laravel Models. Pada soal UKK P2, berikut ini adalah struktur database yang disarankan (beserta keterangan bahwa database dapat disesuaikan):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"879\" height=\"638\" data-attachment-id=\"337\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/2023-03-14_162339\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?fit=879%2C638&amp;ssl=1\" data-orig-size=\"879,638\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2023-03-14_162339\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?fit=300%2C218&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?fit=879%2C638&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?resize=879%2C638&#038;ssl=1\" alt=\"\" class=\"wp-image-337\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?w=879&amp;ssl=1 879w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?resize=300%2C218&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?resize=768%2C557&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_162339.png?resize=276%2C200&amp;ssl=1 276w\" sizes=\"auto, (max-width: 879px) 100vw, 879px\" \/><\/figure>\n\n\n\n<p>Jika kita amati, ada beberapa hal yang bisa kita optimalkan dari struktur database tersebut tanpa mengurangi fungsionalitasnya, sekaligus mengintegrasikannya dengan mekanisme autentikasi Laravel UI yang akan kita gunakan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tabel <strong>petugas<\/strong> dan <strong>masyarakat<\/strong> sebenarnya memiliki banyak kemiripan, secara umum hanya berbeda pada keberadaan kolom nik dan level. Dengan menambahkan kolom nik dan level pada tabel <strong>users<\/strong> milik laravel UI, serta menambahkan level baru sebagai &#8220;masyarakat&#8221; sekaligus menjadi <em>default value <\/em>bagi level, maka tabel users sudah dapat mewakili tabel petugas dan masyarakat, karena bagaimanapun keduanya adalah pengguna sistem yang memerlukan akses ke aplikasi.<\/li>\n\n\n\n<li>Karena tabel masyarakat dilebur ke tabel users, sedangkan tabel users menggunakan primary key berupa id (bigint, auto increment, khas Laravel), maka foreign key pada tabel pengaduan yang tadinya berupa nik, dapat kita ganti menjadi <strong>user_id<\/strong>. <\/li>\n\n\n\n<li>Semua primary key untuk tabel pengaduan dan tanggapan, kita ganti dengan id sesuai konvensi Laravel, cukup kolom id saja.<\/li>\n\n\n\n<li>Foreign key untuk pengaduan yang diberikan tanggapan, kita ganti dengan pengaduan_id, berelasi dengan tabel pengaduan.<\/li>\n\n\n\n<li>Foreign key untuk petugas yang memberikan tanggapan, kita ganti dengan <strong>petugas_id<\/strong>, berelasi dengan tabel users.<\/li>\n\n\n\n<li>Nama tabel pengaduan dan tanggapan tidak disesuaikan menggunakan konvensi Laravel menjadi pengaduans dan tanggapans, namun dipertahankan dengan menambahkan setting property $table pada Model nantinya.<\/li>\n\n\n\n<li>Timestamp khas Laravel digunakan, namun meski demikian, field tgl_pengaduan dan tgl_tanggapan tetap dipertahankan.<\/li>\n<\/ul>\n\n\n\n<p>Hasilnya, aplikasi hanya akan memiliki tabel-tabel bawaan Laravel UI ditambah dengan tabel pengaduan dan tanggapan, sehingga secara umum jika nantinya tabel failed_jobs, migrations, password_resets, dan personal_access_tokens kita sembunyikan, strukturnya akan menjadi:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"726\" data-attachment-id=\"339\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/2023-03-14_165915\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?fit=804%2C726&amp;ssl=1\" data-orig-size=\"804,726\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2023-03-14_165915\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?fit=300%2C271&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?fit=804%2C726&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?resize=804%2C726\" alt=\"pdm-revisi-laravel\" class=\"wp-image-339\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?w=804&amp;ssl=1 804w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?resize=300%2C271&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?resize=768%2C693&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/2023-03-14_165915.png?resize=221%2C200&amp;ssl=1 221w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Salah satu prinsip pembuatan database migration (serta pembuatan tabel di database pada umumnya) adalah: dahulukan pembuatan tabel yang tidak memiliki ketergantungan dengan tabel lain. Atau dengan kata lain, dahulukan tabel yang tidak memiliki foreign key. Maka yang pertama akan kita lakukan adalah memodifikasi tabel users agar memuat kolom nik, telp, dan level. Lalu kita buat tabel pengaduan, yang memiliki referensi ke tabel users, dan terakhir kita buat tabel tanggapan yang memiliki referensi ke tabel pengaduan dan users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Memodifikasi Tabel users<\/h2>\n\n\n\n<p>Buka terminal, lalu jalankan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:migration add_columns_to_users_table<\/code><\/pre>\n\n\n\n<p>Akan muncul pesan semacam ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> INFO  Migration &#091;C:\\laragon\\www\\pelaporan\\database\\migrations\/2023_03_14_100916_add_columns_to_users_table.php] created successfully.<\/code><\/pre>\n\n\n\n<p>Tekan tombol Ctrl lalu klik pada nama file yg dihasilkan tersebut, atau buka melalui Explorer milik VSCode, pada folder database\\migrations. Sesuaikan kode pada bagian komentar di blok <code>public function up()<\/code> menjadi seperti ini:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function up()\n    {\n        Schema::table('users', function (Blueprint $table) {\n            $table-&gt;string('nik',16)-&gt;unique()-&gt;nullable()-&gt;after('password');\n            $table-&gt;string('telp',20)-&gt;after('nik');\n            $table-&gt;enum('level',['administrator','petugas','masyarakat'])\n                -&gt;default('masyarakat')-&gt;after('telp');\n        });\n    }<\/pre>\n\n\n\n<p>Nantinya, kode tersebut akan menyisipkan kolom yang diperlukan pada tabel users yang sudah ada. Pada kode tersebut, kita memberitahukan kepada DBMS yang digunakan bahwa kolom nik nantinya berupa string berukuran 16 digit, unik (tidak boleh ada nik yang sama antar user), namun bersifat nullable sehingga boleh dikosongkan. Kemudian, modifier <code>default('masyarakat')<\/code> akan membuat kolom level terisi dengan value &#8220;masyarakat&#8221; saat ada yang registrasi. Perlu diingat juga, bahwa <em>modifier<\/em> <code>after()<\/code> yang kita gunakan tersebut hanya berlaku di MySQL dan MariaDB, jadi tidak bisa digunakan di DBMS lain.<\/p>\n\n\n\n<p>Laravel mendeteksi bahwa operasi yang akan dilakukan adalah penambahan kolom pada tabel users, menggunakan library <strong>TableGuesser<\/strong>, sesuai format nama migration yang kita gunakan: <strong>add_columns_to_users_table<\/strong>, begitu pula dengan penamaan migration yang akan kita gunakan pada bagian berikutnya. Canggih ya? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Menambahkan Tabel Pengaduan<\/h2>\n\n\n\n<p>Jalankan perintah berikut di terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:migration create_pengaduan_table<\/code><\/pre>\n\n\n\n<p>Dengan cara yang sama seperti sebelumnya, buka file yang dihasilkan lalu lengkapi <code>public function up()<\/code> menjadi sebagai berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function up()\n    {\n        Schema::create('pengaduan', function (Blueprint $table) {\n            $table-&gt;id();\n            $table-&gt;dateTime('tgl_pengaduan');\n            $table-&gt;foreignId('user_id')-&gt;constrained();\n            $table-&gt;text('isi_laporan');\n            $table-&gt;string('foto');\n            $table-&gt;enum('status', ['0','proses','selesai']);\n            $table-&gt;timestamps();\n        });\n    }<\/pre>\n\n\n\n<p>Jika diamati, kode tersebut memiliki perbedaan pada bagian <code>Schema::create()<\/code>, di mana sebelumnya untuk menambahkan kolom kita diberikan kode <code>Schema::table()<\/code>, karena memang keperluannya berbeda. Lalu, isi dari blok  <code>Schema::create()<\/code> akan otomatis memiliki kode untuk pembuatan id (primary key) dan timestamps (created_at dan updated_at). Hal yang baru lainnya adalah penggunaan modifier <code>foreignId()<\/code> dan <code>constrained()<\/code>, di mana kita mendefinisikan kolom user_id menjadi foreign key yg merujuk pada tabel yang diasumsikan oleh Laravel akan bernama <strong>users<\/strong>. Nanti pada contoh lain akan kita temukan penggunaan yang berbeda atas modifier <code>constrained()<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Menambahkan Tabel Tanggapan<\/h2>\n\n\n\n<p>Jalankan perintah di terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:migration create_tanggapan_table<\/code><\/pre>\n\n\n\n<p>Dengan cara yang sama seperti sebelumnya, buka file yang dihasilkan lalu lengkapi <code>public function up()<\/code> menjadi sebagai berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function up()\n    {\n        Schema::create('tanggapan', function (Blueprint $table) {\n            $table-&gt;id();\n            $table-&gt;foreignId('pengaduan_id')-&gt;constrained('pengaduan');\n            $table-&gt;dateTime('tgl_tanggapan');\n            $table-&gt;text('tanggapan');\n            $table-&gt;foreignId('petugas_id')-&gt;constrained('users');\n            $table-&gt;timestamps();\n        });\n    }<\/pre>\n\n\n\n<p>Hal baru yang kita temukan adalah bahwa modifier <code>constrained()<\/code> sekarang memuat nama tabel yang menjadi rujukan\/referensi bagi foreign key yang kita buat. Jika tidak kita definisikan nama tabelnya, pada kode di atas TableGuesser milik Laravel akan menganggap pengaduan_id akan merujuk ke ID milik tabel bernama <strong>pengaduans<\/strong>, dan petugas_id dikira merujuk ke tabel bernama <strong>petugases<\/strong>. Argumen pada modifier <code>constrained()<\/code> akan memberitahukan nama tabel yang digunakan sebagai rujukan. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Menjalankan Migration<\/h2>\n\n\n\n<p>Menjalankan migration di Laravel untuk pertama kalinya akan mengeksekusi semua file migrasi yang ada di dalam folder database\\migrations, lalu mencatatnya ke dalam tabel migrations. Pada tutorial-tutorial mengenai Laravel UI, biasanya migration akan dijalankan pada tahap akhir instalasi Laravel UI. Namun untuk keperluan saat ini, kita akan menjalankan migration sebelum instalasi Laravel UI, karena struktur tabel yang dibutuhkan sudah disertakan sewaktu instalasi Laravel. <\/p>\n\n\n\n<p>Sebelum menjalankan migration, pastikan semua file untuk keperluan migration <strong>sudah di-save<\/strong>. Jalankan perintah berikut untuk menjalankan migration:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan migrate<\/code><\/pre>\n\n\n\n<p>Jika tidak ada error pada saat dijalankan, seharusnya tampilan yang didapatkan kurang lebih seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"345\" data-attachment-id=\"352\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-15-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?fit=1237%2C417&amp;ssl=1\" data-orig-size=\"1237,417\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-15\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?fit=300%2C101&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?fit=1024%2C345&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15-1024x345.png?resize=1024%2C345&#038;ssl=1\" alt=\"\" class=\"wp-image-352\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?resize=1024%2C345&amp;ssl=1 1024w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?resize=768%2C259&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?resize=593%2C200&amp;ssl=1 593w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-15.png?w=1237&amp;ssl=1 1237w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Pada tahap ini, jika Anda cek pada phpMyAdmin, seharusnya semua struktur tabel yang diinginkan, beserta relasinya, sudah tercipta dengan rapih di MySQL. Bahkan jika Anda cek menggunakan fitur Designer, PDM (Physical Data Model) yang dihasilkan sudah ada garis penghubung <em>relationship<\/em>-nya. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"562\" data-attachment-id=\"354\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-16-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?fit=597%2C562&amp;ssl=1\" data-orig-size=\"597,562\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-16\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?fit=300%2C282&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?fit=597%2C562&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?resize=597%2C562&#038;ssl=1\" alt=\"\" class=\"wp-image-354\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?w=597&amp;ssl=1 597w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?resize=300%2C282&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-16.png?resize=212%2C200&amp;ssl=1 212w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<p>Jika menemui error, teliti errornya dengan seksama, perbaiki, lalu jalankan migration kembali. Jika perlu, jalankan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan migrate:fresh<\/code><\/pre>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Autentikasi merupakan mekanisme untuk memastikan identitas pengguna yang akan masuk ke sistem atau aplikasi. Mekanisme yang umumnya dipakai adalah pengecekan kesesuaian pasangan username atau email, dengan password yang digunakan. Biasanya, menggunakan pemrograman PHP <em>native <\/em>tanpa framework, pembuatan mekanisme login apalagi lengkap dengan registrasi pengguna, akan sangat menyita waktu. Namun Laravel menyediakan berbagai mekanisme autentikasi yang bisa digunakan, dan salah satunya adalah Laravel UI Auth, yang menyediakan mekanisme <em>scaffolding<\/em> (kerangka tampilan dan <em>logic<\/em> dasar) untuk keperluan Login, Register, Forget Password, dan sebagainya, dengan waktu penyiapan yang sangat singkat. Namun dengan perubahan yang sudah kita lakukan sebelumnya terhadap tabel <strong>users<\/strong>, ada beberapa kode yang perlu disesuaikan agar proses registrasi tidak error nantinya. <\/p>\n\n\n\n<p>Yajra Datatables merupakan paket untuk memudahkan pemanfaatan komponen <a rel=\"noreferrer noopener\" href=\"https:\/\/datatables.net\" target=\"_blank\">Datatables<\/a> dengan lebih praktis di Laravel, secara <em>server-side<\/em>. Karena ada beberapa langkah pada instalasi Yajra Datatables yang beririsan dengan penyiapan Laravel UI Auth, maka bisa kita kerjakan sekaligus pada bagian ini.<\/p>\n\n\n\n<p>Install Laravel UI dan Yajra Datatables menggunakan perintah berikut di terminal (<strong>secara bergantian, baris demi baris<\/strong>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer require laravel\/ui --dev\nphp artisan ui bootstrap --auth\ncomposer require yajra\/laravel-datatables:9.*<\/code><\/pre>\n\n\n\n<p><mark style=\"background-color:#fffcc5\" class=\"has-inline-color\">CATATAN: pada saat artikel ini ditulis, sudah ada pembaruan pada Yajra Datatables terbaru menjadi versi 10.1, yang tidak compatible dengan Laravel 9, sehingga kita harus menambahkan versi yang dibutuhkan secara spesifik, dalam hal ini adalah 9.*<\/mark><\/p>\n\n\n\n<p>Lalu, lakukan instalasi Laravel Datatables Vite untuk kelengkapan komponen yang dibutuhkan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i laravel-datatables-vite --save-dev<\/code><\/pre>\n\n\n\n<p>Setelah prosesnya selesai, buka file <strong>resources\\js\\app.js<\/strong> , tambahkan kode berikut pada baris terakhir, lalu simpan file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'laravel-datatables-vite';<\/pre>\n\n\n\n<p>Selanjutnya, buka file <strong>resources\\sass\\app.scss<\/strong> , tambahkan kode berikut pada baris terakhir, lalu simpan file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ DataTables\n@import 'bootstrap-icons\/font\/bootstrap-icons.css';\n@import \"datatables.net-bs5\/css\/dataTables.bootstrap5.min.css\";\n@import \"datatables.net-buttons-bs5\/css\/buttons.bootstrap5.min.css\";\n@import 'datatables.net-select-bs5\/css\/select.bootstrap5.css';<\/pre>\n\n\n\n<p>Jalankan perintah berikut pada terminal <strong>setiap <\/strong>akan melakukan pengujian halaman web di browser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>Jika Anda akses URL aplikasi di browser, sekarang seharusnya sudah muncul menu baru bernama Login dan Register. <\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Dengan adanya penambahan kolom pada tabel users, maka ada beberapa penyesuaian yang perlu kita lakukan pada fitur registrasi agar tidak memicu error dan dapat menyimpan data dengan baik.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian Views<\/h2>\n\n\n\n<p>Edit file <strong>resources\\views\\auth\\register.blade.php<\/strong> , tambahkan form field berikut di bawah BS5 row untuk konfirmasi password (baris 63):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;label for=\"nik\" class=\"col-md-4 col-form-label text-md-end\"&gt;{{ __('NIK') }}&lt;\/label&gt;\n                            &lt;div class=\"col-md-6\"&gt;\n                                &lt;input id=\"nik\" type=\"text\" class=\"form-control @error('nik') is-invalid @enderror\" name=\"nik\" value=\"{{ old('nik') }}\" autocomplete=\"nik\"&gt;\n                                @error('nik')\n                                    &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                        &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                    &lt;\/span&gt;\n                                @enderror\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;label for=\"telp\" class=\"col-md-4 col-form-label text-md-end\"&gt;{{ __('Telp') }}&lt;\/label&gt;\n                            &lt;div class=\"col-md-6\"&gt;\n                                &lt;input id=\"telp\" type=\"text\" class=\"form-control @error('telp') is-invalid @enderror\" name=\"telp\" value=\"{{ old('telp') }}\" autocomplete=\"telp\"&gt;\n                                @error('telp')\n                                    &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                        &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                    &lt;\/span&gt;\n                                @enderror\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;<\/pre>\n\n\n\n<p>Tentunya akan lebih baik lagi jika label bagi form dan tampilan lain kita sesuaikan juga menggunakan Bahasa Indonesia. Namun, jangan mengganti atribut id dan name elemen form bawaan dari Laravel UI, apalagi route. Contoh tampilan setelah disesuaikan adalah sebagai berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"646\" data-attachment-id=\"364\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-17-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?fit=930%2C646&amp;ssl=1\" data-orig-size=\"930,646\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-17\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?fit=300%2C208&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?fit=930%2C646&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?resize=930%2C646&#038;ssl=1\" alt=\"\" class=\"wp-image-364\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?w=930&amp;ssl=1 930w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?resize=768%2C533&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-17.png?resize=288%2C200&amp;ssl=1 288w\" sizes=\"auto, (max-width: 930px) 100vw, 930px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian Model<\/h2>\n\n\n\n<p>Model menentukan interaksi antara aplikasi dengan tabel yang berada di database. Dengan adanya perubahan yang kita lakukan sebelumnya pada tabel users, maka model User yang berada di <strong>app\\Models\\User.php<\/strong> perlu kita sesuaikan agar <em>property <\/em><code>$fillable<\/code> menjadi seperti ini:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">protected $fillable = [\n        'name',\n        'email',\n        'password',\n        'nik',\n        'telp',\n        'level'\n    ];<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian Controller<\/h2>\n\n\n\n<p>Di Laravel, Controller sebagai pengendali <em>logic <\/em>aplikasi berada di folder app\\Http\\Controllers. Edit file <strong>app\\Http\\Controllers\\Auth\\RegisterController.php<\/strong> sebagai berikut:<\/p>\n\n\n\n<p>Tambahkan 2 aturan validator baru di bawah aturan yang sudah ada:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">'nik' =&gt; ['numeric','unique:users','digits:16'],\n'telp' =&gt; ['required','string','min:5','max:20'],<\/pre>\n\n\n\n<p>Level tidak ditambahkan pada validator, karena selain sudah memiliki default value, nilainya tidak dimintakan melalui form Registrasi. Selanjutnya, pada kode untuk <code>User::create()<\/code>, tambahkan 2 baris berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">'nik' =&gt; $data['nik'],\n'telp' =&gt; $data['telp'],<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pengujian Fitur Registrasi dan Login<\/h2>\n\n\n\n<p>Sekarang, seharusnya fitur register sudah berjalan dengan lancar dan bisa memasukkan data dengan baik di tabel users. Buatlah setidaknya 3 contoh user baru untuk keperluan pengujian, dan jangan lupa catat kombinasi email serta password bagi masing-masing user tersebut. Lalu, lakukan penyesuaian (Edit) melalui phpMyAdmin untuk membedakan level pengguna bagi user yang sudah dibuat, pastikan ada yang mewakili dari masing-masing level: <strong>admin<\/strong>, <strong>petugas<\/strong>, dan <strong>masyarakat<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"250\" data-attachment-id=\"367\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-18-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?fit=486%2C250&amp;ssl=1\" data-orig-size=\"486,250\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-18\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?fit=300%2C154&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?fit=486%2C250&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?resize=486%2C250&#038;ssl=1\" alt=\"\" class=\"wp-image-367\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?w=486&amp;ssl=1 486w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-18.png?resize=389%2C200&amp;ssl=1 389w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><figcaption class=\"wp-element-caption\">Contoh 3 record user dengan level yang berbeda<\/figcaption><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Meski pada langkah sebelumnya kita sudah membuat migration dan berhasil menciptakan struktur tabelnya di database, namun untuk pengerjaan berikutnya kita membutuhkan Model bagi masing-masing tabel yang baru kita buat, serta melakukan beberapa penyesuaian yang diperlukan. Sedangkan Model untuk tabel users sudah ada dari awal karena merupakan bawaan dari instalasi Laravel. Untuk menghemat waktu dan meningkatkan efisiensi pengetikan kode, kita juga akan sekaligus membuat <strong>Resource Controller<\/strong> dan <strong>FormRequest<\/strong> saat membuat <strong>Model<\/strong>. Buat model Pengaduan sekaligus Resource Controller dan FormRequest-nya dengan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:model Pengaduan -crR<\/code><\/pre>\n\n\n\n<p>Begitu pula dengan Model Tanggapan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:model Tanggapan -crR<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"432\" data-attachment-id=\"368\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-19-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?fit=1268%2C535&amp;ssl=1\" data-orig-size=\"1268,535\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-19\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?fit=300%2C127&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?fit=1024%2C432&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19-1024x432.png?resize=1024%2C432&#038;ssl=1\" alt=\"\" class=\"wp-image-368\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?resize=1024%2C432&amp;ssl=1 1024w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?resize=300%2C127&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?resize=768%2C324&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?resize=474%2C200&amp;ssl=1 474w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-19.png?w=1268&amp;ssl=1 1268w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Tampilan jika perintah di atas berjalan dengan lancar.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Penambahan Resource Route<\/h2>\n\n\n\n<p>Karena pada langkah sebelumnya kita sudah menambahjan Resource Controller, maka semua aksi yang ada di dalamnya bisa dengan ringkas dibuatkan route-nya menggunakan Resource Route. Jika Anda ingin mempelajari lebih lengkap mengenai Resource Controller dan Resource Route, serta verba yang digunakan, pelajari <a rel=\"noreferrer noopener\" href=\"https:\/\/laravel.com\/docs\/10.x\/controllers#resource-controllers\" target=\"_blank\">tautan ini<\/a>. Tambahkan 2 baris berikut pada bagian bawah <strong>routes\\web.php<\/strong> :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Route::resource('pengaduan', App\\Http\\Controllers\\PengaduanController::class);\nRoute::resource('tanggapan', App\\Http\\Controllers\\TanggapanController::class);<\/pre>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Model yang sudah kita miliki perlu disesuaikan karena beberapa hal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Perlu adanya penyesuaian nama tabel (property <code>$table<\/code>) yang tidak sesuai dengan konvensi Laravel (tidak plural)<\/li>\n\n\n\n<li>Perlu ada penyesuaian property <code>$fillable<\/code> dan <code>$dates<\/code> <\/li>\n\n\n\n<li>Perlu pendefinisian <em>relationship <\/em>antar tabel, agar mempermudah saat melakukan query data<\/li>\n<\/ul>\n\n\n\n<p>Penyesuaian pada model Pengaduan:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class Pengaduan extends Model\n{\n    use HasFactory;\n    protected $table = 'pengaduan';\n    protected $fillable = ['tgl_pengaduan',\n                           'user_id',\n                           'isi_laporan',\n                           'foto',\n                           'status'\n                          ];\n    protected $dates = ['tgl_pengaduan'];                      \n\n    public function user() {\n        return $this-&gt;belongsTo(User::class);\n    }\n\n    public function tanggapan() {\n        return $this-&gt;hasMany(Tanggapan::class);\n    }\n\n}<\/pre>\n\n\n\n<p>Penyesuaian pada model Tanggapan:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class Tanggapan extends Model\n{\n    use HasFactory;\n    protected $table = 'tanggapan';\n    protected $fillable = ['pengaduan_id',\n                            'tgl_tanggapan',\n                            'tanggapan',\n                            'petugas_id'\n                          ]; \n    protected $dates = ['tgl_tanggapan'];                        \n\n    public function petugas() {\n        return $this-&gt;belongsTo(User::class,'petugas_id');\n    }                      \n}<\/pre>\n\n\n\n<p>Penyesuaian pada model User, mencakup apa yang sudah dikerjakan sebelumnya, serta penambahan relationship:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class User extends Authenticatable\n{\n    use HasApiTokens, HasFactory, Notifiable;\n\n    \/**\n     * The attributes that are mass assignable.\n     *\n     * @var array&lt;int, string&gt;\n     *\/\n    protected $fillable = [\n        'name',\n        'email',\n        'password',\n        'nik',\n        'telp',\n        'level'\n    ];\n\n    \/**\n     * The attributes that should be hidden for serialization.\n     *\n     * @var array&lt;int, string&gt;\n     *\/\n    protected $hidden = [\n        'password',\n        'remember_token',\n    ];\n\n    \/**\n     * The attributes that should be cast.\n     *\n     * @var array&lt;string, string&gt;\n     *\/\n    protected $casts = [\n        'email_verified_at' =&gt; 'datetime',\n    ];\n\n    public function pengaduan() {\n        return $this-&gt;hasMany(Pengaduan::class);\n    }\n\n    public function tanggapan() {\n        return $this-&gt;hasMany(Tanggapan::class);\n    }\n}<\/pre>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Untuk menyederhanakan aplikasi, pada contoh ini akan ditampilkan form pengaduan pada halaman Home, hanya bagi user dengan level &#8220;masyarakat&#8221;, karena sesuai pembagian privilege pada soal, hanya masyarakat yang bisa menulis Laporan Pengaduan. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pembuatan Form Pengaduan<\/h2>\n\n\n\n<p>Buka file <strong>resources\\views\\home.blade.php<\/strong> , lalu buat\/salin div dengan class card, sejajar dengan yang sudah ada, namun ditambah dengan kondisional pada Laravel Blade, bahwa bagian tersebut hanya akan ditampilkan bagi user dengan level &#8220;masyarakat&#8221;. Berikut adalah keseluruhan div dengan class <strong>col-md-8<\/strong> setelah disesuaikan:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">        &lt;div class=\"col-md-8\"&gt;\n            &lt;div class=\"card\"&gt;\n                &lt;div class=\"card-header\"&gt;{{ __('Dashboard') }}&lt;\/div&gt;\n                &lt;div class=\"card-body\"&gt;\n                    Anda login sebagai &lt;strong&gt;{{ Auth::user()-&gt;name }}&lt;\/strong&gt;, level: {{ Auth::user()-&gt;level }}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n            @if (Auth::user()-&gt;level == 'masyarakat')\n            &lt;br&gt;\n            &lt;div class=\"card\"&gt;\n                &lt;div class=\"card-header\"&gt;Laporan Pengaduan&lt;\/div&gt;\n                    &lt;!-- form start --&gt;\n                {{ Form::open(['url'=&gt;route('pengaduan.store'), 'files' =&gt; true]) }}\n                &lt;div class=\"card-body\"&gt;\n                    @if (session('success'))\n                        &lt;div class=\"alert alert-dismissible alert-success fade show\" role=\"alert\"&gt;\n                            {{ session('success') }}\n                            &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n                        &lt;\/div&gt;\n                    @endif\n\n                    &lt;div class=\"row mb-3\"&gt;\n                        &lt;label for=\"name\" class=\"col-md-4 col-form-label text-md-end\"&gt;Isi Laporan&lt;\/label&gt;\n                    \n                        &lt;div class=\"col-md-6\"&gt;\n                            &lt;textarea id=\"isi_laporan\" class=\"form-control @error('isi_laporan') is-invalid @enderror\" \n                                name=\"isi_laporan\" required autocomplete=\"isi_laporan\" autofocus&gt;{{ old('isi_laporan') }}&lt;\/textarea&gt;    \n                    \n                            @error('isi_laporan')\n                                &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                    &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                &lt;\/span&gt;\n                            @enderror\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div class=\"row mb-3\"&gt;\n                        &lt;label for=\"name\" class=\"col-md-4 col-form-label text-md-end\"&gt;Foto Pendukung&lt;\/label&gt;\n                    \n                        &lt;div class=\"col-md-6\"&gt;\n                            &lt;input id=\"foto\" type=\"file\" class=\"form-control @error('foto') is-invalid @enderror\" name=\"foto\" value=\"{{ old('foto') }}\" required autocomplete=\"foto\" autofocus&gt;\n                    \n                            @error('foto')\n                                &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                    &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                &lt;\/span&gt;\n                            @enderror\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n\n                    &lt;div class=\"row mb-3\"&gt;\n                        &lt;div class=\"col-md-4\"&gt;&lt;\/div&gt;\n                    \n                        &lt;div class=\"col-md-6\"&gt;\n                            &lt;button type=\"submit\" class=\"btn btn-primary\" dusk=\"create-pengaduan\" id=\"save\"&gt;Simpan&lt;\/button&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;  &lt;!-- \/.card-body --&gt;\n                {{ Form::close() }}\n            &lt;\/div&gt; {{-- .card --}}\n            @endif\n        &lt;\/div&gt; {{-- .col-md-8 --}}<\/pre>\n\n\n\n<p>Jika Anda uji coba untuk login menggunakan user dengan level yang berbeda (masyarakat dan admin\/petugas), maka saat ini tampilan halaman Home\/Dashboard akan memberikan tampilan yang berbeda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian FormRequest<\/h2>\n\n\n\n<p>FormRequest merupakan class yang digunakan untuk memisahkan validasi dan autorisasi penyimpanan atau pembaharuan data yang sebelumnya lazim disatukan pada Controller. Semua FormRequest yang telah kita generate sebelumnya akan tersimpan di folder <strong>app\\Http\\Requests<\/strong>. Untuk keperluan kita saat ini, sesuaikan <strong>StorePengaduanRequest.php<\/strong> menjadi:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class StorePengaduanRequest extends FormRequest\n{\n    \/**\n     * Determine if the user is authorized to make this request.\n     *\n     * @return bool\n     *\/\n    public function authorize()\n    {\n        return true;\n    }\n\n    \/**\n     * Get the validation rules that apply to the request.\n     *\n     * @return array&lt;string, mixed&gt;\n     *\/\n    public function rules()\n    {\n        return [\n            'isi_laporan' =&gt; 'required|min:10',\n            'foto' =&gt; 'required|mimes:jpeg,png,jpg'\n        ];\n    }\n}<\/pre>\n\n\n\n<p>Setting di atas selain membuat StorePengaduanRequest boleh digunakan untuk menerima request dari pengguna (<code>return true<\/code>), juga memvalidasi dengan ketentuan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>isi_laporan tidak boleh kosong, minimal diisi 10 karakter.<\/li>\n\n\n\n<li>foto tidak boleh kosong, dan harus dalam format jpeg, png, atau jpg.<\/li>\n<\/ul>\n\n\n\n<p>CATATAN: Jika Anda lupa mengeset authorize() dari false menjadi true, maka semua request yang menggunakan ini akan memunculkan error 403.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Memproses Penyimpanan Pengaduan dan Foto<\/h2>\n\n\n\n<p>Untuk bisa memproses penyimpanan laporan pengaduan baru ke database, sesuai route yang dituju pada form sebelumnya, kita harus menyesuaikan aksi <strong>store()<\/strong> pada PengaduanController (<strong>app\\Http\\Controllers\\PengaduanController.php<\/strong>):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function store(StorePengaduanRequest $request)\n    {\n        $fileFoto = $request-&gt;file('foto');\n        $namafile = time().$fileFoto-&gt;getClientOriginalName();\n\n        Storage::disk('local')-&gt;putFileAs(\n            'public\/',\n            $fileFoto,\n            $namafile\n        );\n\n        $pengaduan = new Pengaduan;\n        $pengaduan-&gt;tgl_pengaduan = Carbon::now();\n        $pengaduan-&gt;user_id = Auth::id();\n        $pengaduan-&gt;isi_laporan = $request-&gt;isi_laporan;\n        $pengaduan-&gt;foto = $namafile;\n        $pengaduan-&gt;status = '0';\n\n        $pengaduan-&gt;save();\n\n        return redirect(route('home'))-&gt;with(['success' =&gt; 'Laporan berhasil disimpan']);\n    }<\/pre>\n\n\n\n<p>Karena kode di atas memanfaatkan beberapa class yang akan error jika tidak ditambahkan sintaks untuk mengimpornya terlebih dahulu (use), maka pastikan pada bagian awal dari PengaduanController.php terdapat kode berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">use App\\Models\\Pengaduan;\nuse App\\Http\\Requests\\StorePengaduanRequest;\nuse App\\Http\\Requests\\UpdatePengaduanRequest;\nuse Carbon\\Carbon;\nuse Illuminate\\Support\\Facades\\Auth;\nuse Illuminate\\Support\\Facades\\Storage;<\/pre>\n\n\n\n<p>Cara lain yang lebih elegan dan wajar saat Anda <em>coding <\/em>sendiri adalah dengan memanfaatkan <em>autocomplete<\/em> dari PHP Intelephense, pilih dari daftar yang muncul, tekan enter, sehingga sintaks use yang sesuai akan otomatis ditambahkan oleh editor:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"154\" data-attachment-id=\"377\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-20-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?fit=725%2C154&amp;ssl=1\" data-orig-size=\"725,154\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-20\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?fit=300%2C64&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?fit=725%2C154&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?resize=725%2C154&#038;ssl=1\" alt=\"\" class=\"wp-image-377\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?w=725&amp;ssl=1 725w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-20.png?resize=300%2C64&amp;ssl=1 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/figure>\n\n\n\n<p>Namun, sebelum Anda menguji coba form untuk melakukan pengiriman laporan Pengaduan, terlebih dahulu kita perlu membuat softlink terhadap folder storage, untuk diletakkan di folder public, agar kode di atas dapat berfungsi. Perintah ini hanya perlu dijalankan 1 kali saja di terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan storage:link<\/code><\/pre>\n\n\n\n<p>CATATAN: Saat baru berpindah sistem (misal, upload ke web server produksi), link &#8220;storage&#8221; pada folder public perlu dihapus terlebih dahulu, lalu jalankan kembali <code>php artisan storage:link<\/code><\/p>\n\n\n\n<p>Pada tahap ini, jika tidak ada yang terlewatkan, seharusnya aplikasi Anda sudah bisa menyimpan laporan Pengaduan ke database, serta mengupload file ke <strong>public\\storage\\<\/strong>.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Halaman daftar pengaduan perlu dibuat untuk menampilkan daftar pengaduan yang sudah masuk dari masyarakat, agar bisa dikelola dan ditindak lanjuti dengan baik.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penambahan Menu Pengaduan<\/h2>\n\n\n\n<p>Menu utama &#8220;Pengaduan&#8221; dapat kita tambahkan untuk memfasilitasi menampilkan halaman web dengan datatables yang memuat data kontekstual:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bagi Administrator dan Petugas, akan menampilkan semua laporan pengaduan yang ada di sistem, aksi untuk verifikasi dan validasi (mengubah menjadi berstatus &#8220;proses&#8221;), serta memberikan tanggapan.<\/li>\n\n\n\n<li>Bagi Masyarakat, hanya akan menampilkan laporan pengaduan yang ia kirimkan sendiri, beserta tanggapan yang didapatkan.<\/li>\n<\/ul>\n\n\n\n<p>Hal ini tentunya meringkas kode program karena kita tidak perlu membuat file terpisah untuk menangani dua hal yang memiliki kemiripan, dan hanya berbeda pada beberapa komponen tampilannya saja. Menu utama dapat kita tambahkan pada file <strong>resources\\views\\layout\\app.blade.php<\/strong> dengan menambahkan List Item (&lt;li&gt;) pada bagian &lt;ul&gt; dengan komentar &#8220;Left Side of Navbar&#8221;, menjadi sebagai berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">                    &lt;!-- Left Side Of Navbar --&gt;\n                    &lt;ul class=\"navbar-nav me-auto\"&gt;\n                        &lt;li class=\"nav-item\"&gt;\n                            &lt;a class=\"nav-link\" href=\"{{ route('pengaduan.index') }}\"&gt;\n                                &lt;i class=\"bi-envelope-paper-fill\"&gt;&lt;\/i&gt;\n                                Pengaduan\n                            &lt;\/a&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"301\" data-attachment-id=\"381\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-21-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?fit=552%2C301&amp;ssl=1\" data-orig-size=\"552,301\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-21\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?fit=300%2C164&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?fit=552%2C301&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?resize=552%2C301&#038;ssl=1\" alt=\"\" class=\"wp-image-381\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?w=552&amp;ssl=1 552w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?resize=300%2C164&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-21.png?resize=367%2C200&amp;ssl=1 367w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Penyiapan PengaduanDataTable Class<\/h2>\n\n\n\n<p>Buat PengaduanDataTable menggunakan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan datatables:make Pengaduan<\/code><\/pre>\n\n\n\n<p>Perintah tersebut akan menghasilkan file app\\DataTables\\PengaduanDataTable.php yang perlu kita sesuaikan agar bisa menampilkan datatable saat halaman Daftar Pengaduan diakses. Berikut adalah contoh penyesuaian yang sudah dilakukan pada PengaduanDataTable.php, yang tentunya masih bisa Anda kustomisasi sendiri sesuai kebutuhan:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nnamespace App\\DataTables;\n\nuse App\\Models\\Pengaduan;\nuse Illuminate\\Database\\Eloquent\\Builder as QueryBuilder;\nuse Illuminate\\Support\\Facades\\Auth;\nuse Yajra\\DataTables\\EloquentDataTable;\nuse Yajra\\DataTables\\Html\\Builder as HtmlBuilder;\nuse Yajra\\DataTables\\Html\\Button;\nuse Yajra\\DataTables\\Html\\Column;\nuse Yajra\\DataTables\\Html\\Editor\\Editor;\nuse Yajra\\DataTables\\Html\\Editor\\Fields;\nuse Yajra\\DataTables\\Services\\DataTable;\n\nclass PengaduanDataTable extends DataTable\n{\n    \/**\n     * Build DataTable class.\n     *\n     * @param QueryBuilder $query Results from query() method.\n     * @return \\Yajra\\DataTables\\EloquentDataTable\n     *\/\n    public function dataTable(QueryBuilder $query): EloquentDataTable\n    {\n        return (new EloquentDataTable($query))\n            -&gt;editColumn('tgl_pengaduan', function($data) { \n                return $data-&gt;tgl_pengaduan-&gt;format('d-m-Y H:i'); \n            })\n            -&gt;editColumn('isi_laporan', function($data) {\n                return substr($data-&gt;isi_laporan, 0, 50).'...';\n            })\n            -&gt;addColumn('action', function($pengaduan) {\n                return view('pengaduan.actions', [\n                    'model' =&gt; $pengaduan,\n                    'detail_url' =&gt; route('pengaduan.show', $pengaduan-&gt;id)\n                ]);\n            })\n            -&gt;setRowId('id');\n    }\n\n    \/**\n     * Get query source of dataTable.\n     *\n     * @param \\App\\Models\\Pengaduan $model\n     * @return \\Illuminate\\Database\\Eloquent\\Builder\n     *\/\n    public function query(Pengaduan $model): QueryBuilder\n    {\n        if (Auth::user()-&gt;level == 'masyarakat') {\n            return $model-&gt;newQuery()-&gt;with('user')\n                         -&gt;withCount('tanggapan')\n                         -&gt;where('user_id',Auth::id());\n        } else {\n            return $model-&gt;newQuery()-&gt;with('user')\n                         -&gt;withCount('tanggapan');\n        }    \n    }\n\n    \/**\n     * Optional method if you want to use html builder.\n     *\n     * @return \\Yajra\\DataTables\\Html\\Builder\n     *\/\n    public function html(): HtmlBuilder\n    {\n        return $this-&gt;builder()\n                    -&gt;setTableId('pengaduan-table')\n                    -&gt;columns($this-&gt;getColumns())\n                    -&gt;minifiedAjax()\n                    \/\/-&gt;dom('Bfrtip')\n                    -&gt;orderBy(1)\n                    \/\/ -&gt;selectStyleSingle()\n                    -&gt;buttons([\n                        \/\/ Button::make('excel'),\n                        \/\/ Button::make('csv'),\n                        \/\/ Button::make('pdf'),\n                        \/\/ Button::make('print'),\n                        \/\/ Button::make('reset'),\n                        \/\/ Button::make('reload')\n                    ]);\n    }\n\n    \/**\n     * Get the dataTable columns definition.\n     *\n     * @return array\n     *\/\n    public function getColumns(): array\n    {\n        return [\n            Column::make('id'),\n            Column::make('tgl_pengaduan'),\n            Column::make('user.name')\n                -&gt;title('Nama Pelapor'),\n            Column::make('isi_laporan')\n                -&gt;title('Ringkasan Laporan'),\n            Column::make('status'),\n            Column::make('tanggapan_count')\n                -&gt;title('Jml. Tanggapan'),\n            \/\/ Column::make('created_at'),\n            \/\/ Column::make('updated_at'),\n            Column::computed('action')\n                -&gt;exportable(false)\n                -&gt;printable(false)\n                -&gt;width(60)\n                -&gt;addClass('text-nowrap')\n                -&gt;title('Aksi'),\n        ];\n    }\n\n    \/**\n     * Get filename for export.\n     *\n     * @return string\n     *\/\n    protected function filename(): string\n    {\n        return 'Pengaduan_' . date('YmdHis');\n    }\n}\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian Aksi index() pada PengaduanController<\/h2>\n\n\n\n<p>Sesuaikan function <code>index()<\/code> pada <strong>app\\Http\\Controllers\\PengaduanController.php<\/strong> menjadi sebagai berikut (jangan lupa tambahkan juga kode untuk use di bagian atas file):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">use App\\DataTables\\PengaduanDataTable;\n\n....\n\n\npublic function index(PengaduanDataTable $dataTable)\n    {\n        return $dataTable-&gt;render('pengaduan.index');\n    }<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pembuatan View untuk Index dan Actions bagi Pengaduan<\/h2>\n\n\n\n<p>Buat file baru bernama <strong>index.blade.php<\/strong> di folder <strong>resources\\views\\pengaduan<\/strong>, dengan isi kode sebagai berikut:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@extends('layouts.app')\n \n@section('content')\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"card\"&gt;\n            &lt;div class=\"card-header\"&gt;Data Laporan Pengaduan&lt;\/div&gt;\n            &lt;div class=\"card-body\"&gt;\n                {{ $dataTable-&gt;table() }}\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n@endsection\n \n@push('scripts')\n    {{ $dataTable-&gt;scripts(attributes: ['type' =&gt; 'module']) }}\n@endpush<\/pre>\n\n\n\n<p>Buat juga file bernama <strong>actions.blade.php<\/strong> di folder yang sama dengan index, berisi:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;a title=\"Detail\" class=\"btn btn-sm btn-primary detail\" data-id=\"{{ $model-&gt;id }}\" href=\"{{ $detail_url }}\"&gt;\n        &lt;i class=\"bi bi-file-text\"&gt;&lt;\/i&gt; Detail\n    &lt;\/a&gt;<\/pre>\n\n\n\n<p>Kode tersebut akan dipanggil oleh PengaduanDataTable saat membangun kolom <em>custom<\/em> untuk aksi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian App Layout<\/h2>\n\n\n\n<p>Agar script bagi Datatable dapat berjalan dengan baik, kita perlu meletakkan kode <code>@stack('scripts')<\/code> sebelum closing tag dari tag body (&lt;\/body&gt;) pada file <strong>resources\\views\\layouts\\app.blade.php<\/strong> :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">...\n    @stack('scripts')\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p>Hasilnya, jika saat ini kita mengakses menu Pengaduan, akan tampil halaman Data Laporan Pengaduan dengan fitur yang cukup lengkap. Lakukan uji coba tampilan menggunakan jenis user yang berbeda-beda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" data-attachment-id=\"386\" data-permalink=\"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/2023\/03\/15\/contoh-pengerjaan-soal-ukk-smk-rpl-paket-2-tahun-2023\/image-22-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?fit=1455%2C669&amp;ssl=1\" data-orig-size=\"1455,669\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-22\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?fit=300%2C138&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?fit=1024%2C471&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22-1024x471.png?resize=1024%2C471&#038;ssl=1\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?resize=1024%2C471&amp;ssl=1 1024w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?resize=300%2C138&amp;ssl=1 300w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?resize=768%2C353&amp;ssl=1 768w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?resize=435%2C200&amp;ssl=1 435w, https:\/\/i0.wp.com\/guru.smkn1pacitan.sch.id\/hendri\/wp-content\/uploads\/sites\/2\/2023\/03\/image-22.png?w=1455&amp;ssl=1 1455w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p>Saat ini, jika tombol Detail diklik, maka tidak akan memicu error karena aksi yang dituju oleh route sudah ada, meski masih kosong. Hal ini karena belum kita tambahkan kode untuk memuat view yang sesuai, serta data yang akan ditampilkan ke dalam view tersebut.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyiapan View untuk Detail<\/h2>\n\n\n\n<p>Untuk menampilkan detail pengaduan beserta foto dan tanggapannya, maka buatlah file <strong>resources\\views\\pengaduan\\detail.blade.php<\/strong> lalu isikan kode:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@extends('layouts.app')\n\n@section('content')\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"row justify-content-center\"&gt;\n            &lt;div class=\"col-md-8\"&gt;\n                &lt;div class=\"card\"&gt;\n                    &lt;div class=\"card-header\"&gt;Detail Laporan Pengaduan&lt;\/div&gt;\n                    &lt;div class=\"card-body\"&gt;\n                          &lt;table class=\"table table-striped\"&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;ID&lt;\/td&gt;\n                                &lt;td&gt;{{ $pengaduan-&gt;id }}&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Tanggal Laporan&lt;\/td&gt;\n                                &lt;td&gt;{{ $pengaduan-&gt;tgl_pengaduan-&gt;format('d-m-Y H:i') }}&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Nama Pelapor&lt;\/td&gt;\n                                &lt;td&gt;{{ $pengaduan-&gt;user-&gt;name }}&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Isi Laporan&lt;\/td&gt;\n                                &lt;td&gt;{{ $pengaduan-&gt;isi_laporan }}&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Foto&lt;\/td&gt;\n                                &lt;td&gt;&lt;img src=\"{{ asset('storage\/'.$pengaduan-&gt;foto) }}\" width=\"480\"&gt;&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Status&lt;\/td&gt;\n                                &lt;td&gt;{{ $pengaduan-&gt;status }}&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td&gt;Tanggapan&lt;\/td&gt;\n                                &lt;td&gt;\n                                    @if($tanggapan-&gt;isNotEmpty())\n                                    &lt;table class=\"table table-striped\"&gt;\n                                        &lt;tr&gt;\n                                            &lt;th&gt;Tanggal&lt;\/th&gt;\n                                            &lt;th&gt;Isi Tanggapan&lt;\/th&gt;\n                                            &lt;th&gt;Nama Petugas&lt;\/th&gt;\n                                        &lt;\/tr&gt;    \n                                        @foreach ($tanggapan as $item)\n                                        &lt;tr&gt;\n                                            &lt;td&gt;{{ $item-&gt;tgl_tanggapan-&gt;format('d-m-Y H:i') }}&lt;\/td&gt;\n                                            &lt;td&gt;{!! nl2br($item-&gt;tanggapan) !!}&lt;\/td&gt;\n                                            &lt;td&gt;{{ $item-&gt;petugas-&gt;name }}&lt;\/td&gt;\n                                        &lt;\/tr&gt;\n                                        @endforeach\n                                    &lt;\/table&gt;   \n                                    @else \n                                        Belum ada tanggapan pada pengaduan ini.\n                                    @endif \n                                &lt;\/td&gt;\n                            &lt;\/tr&gt;\n                          &lt;\/table&gt;\n                    &lt;\/div&gt; &lt;!-- \/.card-body --&gt;\n                &lt;\/div&gt; &lt;!-- \/.card --&gt;          \n                @if (Auth::user()-&gt;level != 'masyarakat') \n                &lt;br&gt;\n                &lt;div class=\"card\"&gt; \n                    &lt;div class=\"card-header\"&gt;Tanggapi Pengaduan&lt;\/div&gt;      \n                    {{ Form::open(['url'=&gt;route('tanggapan.store')]) }}\n                    &lt;div class=\"card-body\"&gt;\n                        @if (session('success'))\n                            &lt;div class=\"alert alert-dismissible alert-success fade show\" role=\"alert\"&gt;\n                                {{ session('success') }}\n                                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n                            &lt;\/div&gt;\n                        @endif\n                        {{ Form::hidden('pengaduan_id', $pengaduan-&gt;id) }}\n                        \n                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;label for=\"name\" class=\"col-md-4 col-form-label text-md-end\"&gt;Tanggapan&lt;\/label&gt;\n                            &lt;div class=\"col-md-6\"&gt;\n                                &lt;textarea id=\"tanggapan\" class=\"form-control @error('tanggapan') is-invalid @enderror\" \n                                    name=\"tanggapan\" required autocomplete=\"tanggapan\" autofocus&gt;{{ old('tanggapan') }}&lt;\/textarea&gt;    \n                        \n                                @error('tanggapan')\n                                    &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                        &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                    &lt;\/span&gt;\n                                @enderror\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;!-- \/.card-body --&gt;\n          \n                    &lt;div class=\"card-footer\"&gt;\n                        &lt;button type=\"submit\" class=\"btn btn-primary\" dusk=\"create-tanggapan\" id=\"save\"&gt;Simpan&lt;\/button&gt; \n                    &lt;\/div&gt; &lt;!-- \/.card-footer --&gt;\n                    {{ Form::close() }}\n                &lt;\/div&gt; &lt;!-- \/.card --&gt;\n                @endif                \n            &lt;\/div&gt; &lt;!-- \/.col-md-8 --&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n@endsection\n@push('scripts')\n    \n@endpush<\/pre>\n\n\n\n<p>Terlihat pada kode tersebut bahwa halaman web ini didesain untuk menampilkan 1 data pengaduan saja, secara lengkap, beserta daftar tanggapan yang ada, jika ada. Lalu, terdapat juga form jika user yang melihat halaman ini adalah admin atau petugas, akan ditampilkan untuk memberikan tanggapan. Namun, untuk menampilkan semua itu, kita membutuhkan aksi yang sesuai pada controller yang dituju.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyesuaian aksi show() pada PengaduanController<\/h2>\n\n\n\n<p>Aksi <code>show()<\/code> dapat disesuaikan menjadi seperti ini (perhatikan penempatan use):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">use App\\Models\\Tanggapan;\n\n....\n\npublic function show($id)\n    {\n        $pengaduan = Pengaduan::findOrFail($id);\n        $tanggapan = Tanggapan::where('pengaduan_id',$id)-&gt;get();\n        $data = compact('pengaduan','tanggapan');\n        if (Auth::user()-&gt;level != 'masyarakat' &amp;&amp; $pengaduan-&gt;status != 'selesai') {\n            $pengaduan-&gt;update(['status'=&gt;'proses']);\n        }    \n        return view('pengaduan.detail', $data); \n    }<\/pre>\n\n\n\n<p>Sehingga pada tahap ini, halaman Detail sudah bisa menampilkan rincian pengaduan yang kita pilih untuk ditampilkan detailnya.<\/p>\n\n\n\n<p>leren sik. Sesuk maneh. Kurang sithik.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada artikel ini akan dicontohkan pengerjaan minimal untuk Soal Paket 2 UKK Kompetensi Keahlian RPL Tahun 2022\/2023 menggunakan framework Laravel 9. Semua tahapan pada artikel ini harus diperhatikan agar target pengerjaan dapat tercapai dengan lancar. Tahap persiapan ini diperlukan jika lingkungan pengembangan Anda belum sesuai dengan kebutuhan pengembangan di Laravel &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":true,"_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":[22,21],"tags":[19,17,16,24,23,26,25,7],"class_list":["post-284","post","type-post","status-publish","format-standard","hentry","category-laravel","category-pemrograman-web","tag-datatables","tag-laragon","tag-laravel","tag-pelaporan","tag-pengaduan","tag-ukk","tag-ukk-rpl","tag-vscode"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9kWip-4A","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":70,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/posts\/284\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guru.smkn1pacitan.sch.id\/hendri\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}