{"id":51670,"date":"2024-11-20T09:06:13","date_gmt":"2024-11-20T02:06:13","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51670"},"modified":"2024-12-20T15:31:51","modified_gmt":"2024-12-20T08:31:51","slug":"belajar-laravel-bagian-7","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-7\/","title":{"rendered":"Belajar Laravel Part 7:\u00a0CRUD Menampilkan Data Dari Database"},"content":{"rendered":"\n<p>Pada sesi belajar Laravel bagian 6, kita telah mempelajari cara membuat tampilan <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-6\/\" target=\"_blank\" rel=\"noopener\" title=\"belajar laravel maintenance mode\">maintenance mode<\/a>. Dalam lanjutan belajar laravel bagian ke 7 ini, kita akan melanjutkan dengan mempelajari CRUD di Laravel. Artikel ini akan membahas cara membuat CRUD untuk menampilkan data dari database menggunakan Laravel.<\/p>\n\n\n\n\n\n<p>Suatu website memiliki 4 fungsi dasar yang menjadikannya menarik dan informatif. Empat fungsi dasar tersebut yaitu membuat, mengubah, menghapus dan menampilkan data, hingga tampilan website yang dinamis dan informatif. 4 Fungsi dasar tersebut sering disingkat sebagai CRUD.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu CRUD?<\/h2>\n\n\n\n<p>CRUD adalah singkatan dari <em>Create<\/em>, <em>Read<\/em>, <em>Update<\/em>, dan <em>Delete<\/em>. Di Laravel sendiri, untuk membuat CRUD bisa dilakukan dengan 2 cara, yaitu menggunakan <em>Query Builder <\/em>atau menggunakan <em>Eloquent<\/em>.<\/p>\n\n\n\n<p>Supaya lebih mudah dalam mempelajarinya, pada artikel ini kami akan membahas cara membuat CRUD di Laravel menggunakan <em>Query Builder<\/em>. Untuk cara membuat CRUD menggunakan <strong>Eloquent<\/strong>, akan dibahas dilain waktu.<\/p>\n\n\n\n<p>Selengkapnya tentang CRUD bisa Anda pelajari di artikel berikut: <a href=\"https:\/\/www.rumahweb.com\/journal\/crud-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"crud adalah\">Apa Itu  CRUD?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Membuat CRUD menggunakan Query Builder<\/strong><\/h2>\n\n\n\n<p>Pada sesi belajar Laravel CRUD kali ini, kita sedikit mengulang pembelajaran di pertemuan ke 3 sebelumnya, tentang membuat database.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Membuat Database di phpMyAdmin<\/h3>\n\n\n\n<p>Silakan Anda <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-membuat-database\/#Cara_membuat_database_di_XAMPP_localhost\" target=\"_blank\" rel=\"noopener\" title=\"cara membuat database di localhost\">membuat database di locahost<\/a> melalui PHPMyAdmin. Sebagai contoh, kami membuat database dengan nama <strong>dbrw-laraveltutorial<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2. Isi Sample Data<\/h3>\n\n\n\n<p>Setelah itu, silakan inputkan script berikut dikolom SQL, untuk membuat table dan mengisi <em>sample <\/em>datanya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-- phpMyAdmin SQL Dump\n-- version 5.2.1\n-- https:\/\/www.phpmyadmin.net\/\n--\n-- Host: localhost:3306\n-- Waktu pembuatan: 18 Nov 2024 pada 02.32\n-- Versi server: 8.0.30\n-- Versi PHP: 8.3.9\n\nSET SQL_MODE = \"NO_AUTO_VALUE_ON_ZERO\";\nSTART TRANSACTION;\nSET time_zone = \"+00:00\";\n\n\n\/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT *\/;\n\/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS *\/;\n\/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION *\/;\n\/*!40101 SET NAMES utf8mb4 *\/;\n\n--\n-- Database: `dbrw-laraveltutorial`\n--\n\n-- --------------------------------------------------------\n\n--\n-- Struktur dari tabel `pegawai`\n--\n\nCREATE TABLE `pegawai` (\n  `pegawai_id` int NOT NULL,\n  `pegawai_nama` text NOT NULL,\n  `pegawai_jabatan` text NOT NULL,\n  `pegawai_umur` int NOT NULL,\n  `pegawai_alamat` varchar(1000) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;\n\n--\n-- Dumping data untuk tabel `pegawai`\n--\n\nINSERT INTO `pegawai` (`pegawai_id`, `pegawai_nama`, `pegawai_jabatan`, `pegawai_umur`, `pegawai_alamat`) VALUES\n(1, 'Rudi', 'Web Designer', 25, 'Jl. Jogja'),\n(3, 'Gawati Yulia Yuliarti', 'Belum \/ Tidak Bekerja', 39, 'Psr. Jend. Sudirman No. 876, Salatiga 94485, Sulsel'),\n(4, 'Shakila Unjani Sudiati S.Pd', 'Belum \/ Tidak Bekerja', 37, 'Ki. Gotong Royong No. 646, Sukabumi 30063, Sulut'),\n(5, 'Cinthia Sudiati', 'Biarawati', 35, 'Dk. Dahlia No. 270, Pagar Alam 27372, Sulut'),\n(6, 'Gamani Budiman', 'Tukang Cukur', 31, 'Dk. Madiun No. 162, Padang 84417, NTB'),\n(7, 'Kamaria Nurdiyanti', 'Konsultan', 40, 'Gg. Cut Nyak Dien No. 315, Pagar Alam 16040, NTB'),\n(8, 'Cakrabuana Sitompul S.E.', 'Petani \/ Pekebun', 27, 'Kpg. Bayan No. 121, Surakarta 95950, DKI'),\n(9, 'Paramita Ilsa Widiastuti', 'Penyiar Televisi', 29, 'Ki. Nanas No. 510, Tebing Tinggi 39880, Babel'),\n(10, 'Lidya Aisyah Uyainah S.Gz', 'Penata Busana', 32, 'Ds. Jaksa No. 818, Payakumbuh 16409, Pabar'),\n(11, 'Oni Rahimah', 'Penata Rias', 25, 'Jln. Industri No. 231, Langsa 99305, Sumbar'),\n(12, 'Karen Astuti', 'Desainer', 26, 'Ds. R.M. Said No. 149, Cirebon 24653, Pabar'),\n(13, 'Kajen Wasita', 'Penulis', 36, 'Dk. Gajah No. 836, Ambon 15105, Gorontalo'),\n(14, 'Lintang Farida S.E.', 'Pedagang', 33, 'Dk. Moch. Toha No. 723, Bontang 86180, Jateng'),\n(15, 'Jumari Cengkal Simbolon', 'Wakil Presiden', 28, 'Ki. Bagis Utama No. 784, Bengkulu 27766, Sulteng'),\n(16, 'Laras Melani', 'Apoteker', 36, 'Ds. Sukajadi No. 367, Yogyakarta 53106, Malut'),\n(17, 'Siti Puspasari', 'Pelaut', 38, 'Psr. Banceng Pondok No. 6, Sabang 96597, Kaltim'),\n(18, 'Nadia Hartati', 'Penata Rambut', 37, 'Gg. Katamso No. 18, Tidore Kepulauan 92688, Aceh'),\n(19, 'Puput Cici Lailasari S.T.', 'Psikiater \/ Psikolog', 37, 'Kpg. Baranangsiang No. 12, Tidore Kepulauan 36147, Bengkulu'),\n(20, 'Zaenab Safitri', 'Buruh Nelayan \/ Perikanan', 34, 'Kpg. Gajah Mada No. 825, Padangsidempuan 17341, Kalbar'),\n(21, 'Arsipatra Hutasoit', 'Promotor Acara', 25, 'Ds. Salak No. 439, Bitung 97331, Maluku'),\n(22, 'Ajimat Dongoran S.Kom', 'Pegawai Negeri Sipil (PNS)', 26, 'Kpg. Kalimantan No. 88, Lhokseumawe 55880, Pabar'),\n(23, 'Sabar Utama', 'Penyiar Radio', 26, 'Ki. Baya Kali Bungur No. 349, Bitung 19647, Sulteng'),\n(24, 'Gandi Asmuni Firmansyah S.I.Kom', 'Penerjemah', 32, 'Jr. Pelajar Pejuang 45 No. 346, Pekalongan 59404, Bengkulu'),\n(25, 'Dadi Daniswara Marpaung S.IP', 'Tukang Gigi', 32, 'Jln. Kiaracondong No. 119, Bau-Bau 79924, Sumut'),\n(26, 'Putri Widiastuti', 'Programmer', 35, 'Psr. Gotong Royong No. 493, Palu 75920, Papua');\n\n--\n-- Indexes for dumped tables\n--\n\n--\n-- Indeks untuk tabel `pegawai`\n--\nALTER TABLE `pegawai`\n  ADD PRIMARY KEY (`pegawai_id`);\n\n--\n-- AUTO_INCREMENT untuk tabel yang dibuang\n--\n\n--\n-- AUTO_INCREMENT untuk tabel `pegawai`\n--\nALTER TABLE `pegawai`\n  MODIFY `pegawai_id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=53;\nCOMMIT;\n\n\/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT *\/;\n\/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS *\/;\n\/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION *\/;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3. Sesuaikan Config Database<\/strong><\/h3>\n\n\n\n<p>Lakukan pengaturan config database di file <strong>.env<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=dbrw-laraveltutorial\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DB_Database<\/strong> adalah nama database yang telah Anda buat.<\/li>\n\n\n\n<li><strong>DB_Username<\/strong> adalah nama user databasenya. Secara default berisi root.&nbsp;<\/li>\n\n\n\n<li><strong>DB_Password<\/strong>&nbsp; adalah password databasenya. Biasanya di localhost kosong<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4. Routing<\/strong><\/h3>\n\n\n\n<p>Sesuaikan Route yang berada di <strong>routes\/web.php <\/strong>untuk mengakses controller <strong>PegawaiController<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>use Illuminate\\Support\\Facades\\DB;\nuse App\\Http\\Controllers\\PegawaiController;\n\n\/\/ Route untuk menampilkan data Pegawai\nRoute::get('\/pegawai', &#091;PegawaiController::class, 'index']);<\/code><\/pre>\n\n\n\n<p><strong>Keterangan<\/strong> Pada script diatas, saat route \u2018\/pegawai\u2019 diakses maka kita akan dibawa ke method <strong>index()<\/strong> pada PegawaiController.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5. Controller<\/strong><\/h3>\n\n\n\n<p>Selanjutnya membuat <code>PegawaiController <\/code>menggunakan perintah artisan berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nphp artisan make:controller PegawaiController\n<\/code><\/pre>\n\n\n\n<p>Letak filenya ada di <strong>app\/Http\/Controllers\/PegawaiController.php<\/strong>. Isi file <strong>PegawaiController.php<\/strong> menggunakan code berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Support\\Facades\\DB;\nuse Illuminate\\Http\\Request;\n\nclass PegawaiController extends Controller\n{\n    public function index()\n    {\n        \/\/ Mengambil semua data pegawai\n        $pegawai = DB::table('pegawai')-&gt;get();\n        \n        \/\/ Mengirim data ke view\n        return view('pegawai.index', &#091;'pegawai' =&gt; $pegawai]);\n    }\n}<\/code><\/pre>\n\n\n\n<p><strong>Penjelasan <\/strong>:<\/p>\n\n\n\n<p>Mengambil data pegawai menggunakan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$pegawai = DB::table('pegawai')-&gt;get();<\/code><\/pre>\n\n\n\n<p>Perintah tersebut merupakan perintah yang mirip dengan <strong>select * from pegawai<\/strong><\/p>\n\n\n\n<p>Selanjutnya datanya dikirim ke view menggunakan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>return view('pegawai.index', &#091;'pegawai' =&gt; $pegawai]);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6. View<\/strong><\/h3>\n\n\n\n<p>Selanjutnya, kita akan belajar laravel untuk membuat view untuk menampilkan data Pegawai, letak filenya ada di <em>resources\/views\/pegawai\/index.blade.php<\/em>. Pastikan setelah folder Views Anda membuat folder pegawai. Nantinya letak file index.blade.php berada di dalam folder pegawai.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Data Pegawai&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h3&gt;Data Pegawai&lt;\/h3&gt;\n \n\t&lt;a href=\"\/pegawai\/tambah\"&gt; + Tambah Pegawai Baru&lt;\/a&gt;\n\t\n\t&lt;br\/&gt;\n\t&lt;br\/&gt;\n\n\n    &lt;table border=\"1\"&gt;\n        &lt;thead&gt;\n            &lt;tr&gt;\n                &lt;th&gt;ID&lt;\/th&gt;\n                &lt;th&gt;Nama&lt;\/th&gt;\n                &lt;th&gt;Alamat&lt;\/th&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            @foreach($pegawai as $p)\n                &lt;tr&gt;\n                    &lt;td&gt;{{ $p-&gt;pegawai_id }}&lt;\/td&gt;\n                    &lt;td&gt;{{ $p-&gt;pegawai_nama }}&lt;\/td&gt;\n                    &lt;td&gt;{{ $p-&gt;pegawai_alamat }}&lt;\/td&gt;\n&lt;td&gt;\n\t\t\t\t&lt;a href=\"\/pegawai\/edit\/{{ $p-&gt;pegawai_id }}\"&gt;Edit&lt;\/a&gt;\n\t\t\t\t|\n\t\t\t\t&lt;a href=\"\/pegawai\/hapus\/{{ $p-&gt;pegawai_id }}\"&gt;Hapus&lt;\/a&gt;\n\t\t\t&lt;\/td&gt;\n\n                &lt;\/tr&gt;\n            @endforeach\n        &lt;\/tbody&gt;\n    &lt;\/table&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>Penjelasan<\/strong><\/p>\n\n\n\n<p>(<strong>$pegawai as $p<\/strong>) : data yang dikirim controller ke view ditangkap sebagai <code>$pegawai<\/code>. Selanjutnya untuk memudahkan penulisan <code>$pegawai<\/code> dimisalkan sebagai <code>$p<\/code>.&nbsp;<\/p>\n\n\n\n<p>Selanjutnya dilakukan perulangan menggunakan <strong><em>foreach<\/em><\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7. Jalankan Aplikasi Laravel<\/strong><\/h3>\n\n\n\n<p>Untuk menjalankan aplikasi Laravel di localhost menggunakan perintah artisan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve<\/code><\/pre>\n\n\n\n<p>Akses aplikasi di browser dengan URL: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-gridlove-acc-color\">http:\/\/localhost:8000\/pegawai<\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"669\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai.jpg\" alt=\"data pegawai - belajar laravel CRUD\" class=\"wp-image-51671\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai.jpg 908w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-300x221.jpg 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-768x566.jpg 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-370x273.jpg 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-270x199.jpg 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-570x420.jpg 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-740x545.jpg 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/data-pegawai-80x60.jpg 80w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/a><\/figure>\n\n\n\n<p>Selamat, sampai disini data Anda sudah tampil. Untuk panduan CRUD lainnya akan kami tulis di edisi artikel selanjutnya. <\/p>\n\n\n\n<p>Demikian tutorial belajar Laravel bagian ke 7 tentang CRUD. Pada series belajar Laravel selanjutnya, kami akan membahas tentang cara <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-8\/\" title=\"\">tambah data<\/a> pegawai di Laravel menggunakan Query Builder. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada sesi belajar Laravel bagian 6, kita telah mempelajari cara membuat tampilan maintenance mode. Dalam lanjutan belajar laravel bagian ke 7 ini, kita akan melanjutkan dengan mempelajari CRUD di Laravel. Artikel ini akan membahas cara membuat CRUD untuk menampilkan data dari database menggunakan Laravel. Suatu website memiliki 4 fungsi dasar yang menjadikannya menarik dan informatif. [&hellip;]<\/p>\n","protected":false},"author":319,"featured_media":51743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1587,2247,796,1497],"class_list":{"0":"post-51670","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-laravel","9":"tag-crud","10":"tag-laravel","11":"tag-tutorial-laravel"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/11\/banner-belajar-laravel-bagian-7.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-dro","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/319"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=51670"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51670\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/51743"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=51670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=51670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=51670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}