{"id":90,"date":"2025-05-19T12:51:39","date_gmt":"2025-05-19T12:51:39","guid":{"rendered":"https:\/\/dila.infokand23.my.id\/blog\/?p=90"},"modified":"2025-05-19T12:55:41","modified_gmt":"2025-05-19T12:55:41","slug":"praktikum-7-pemrograman-web-konfigurasi-laravel","status":"publish","type":"post","link":"https:\/\/dila.infokand23.my.id\/blog\/praktikum-7-pemrograman-web-konfigurasi-laravel\/","title":{"rendered":"Praktikum 7 Pemrograman Web &#8211; Konfigurasi Laravel"},"content":{"rendered":"\n<p><strong>A. Tujuan Praktikum<\/strong><\/p>\n\n\n\n<ol style=\"list-style-type:upper-alpha\" class=\"wp-block-list\"><\/ol>\n\n\n\n<p>Tujuan praktikum ini yaitu mahasiswa mampu installasi Laravel, membuat project baru Laravel, mengenal struktur Laravel, konsep MVC laravel<\/p>\n\n\n\n<p><strong>B. Langkah-langkah<\/strong><\/p>\n\n\n\n<p><strong>1. Instalasi Laravel<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p>Untuk menginstall laravel, diperlukan beberapa persyaratan yang harus dipenuhi dan aplikasi lain untuk mendukungnya<\/p>\n\n\n\n<ol style=\"list-style-type:lower-alpha\" class=\"wp-block-list\">\n<li>System requirements<\/li>\n<\/ol>\n\n\n\n<p>\u2713 PHP &gt;= 8.2<\/p>\n\n\n\n<p>\u2713 Ctype PHP Extension<\/p>\n\n\n\n<p>\u2713 cURL PHP Extension<\/p>\n\n\n\n<p>\u2713 DOM PHP Extension<\/p>\n\n\n\n<p>\u2713 Fileinfo PHP Extension<\/p>\n\n\n\n<p>\u2713 Filter PHP Extension<\/p>\n\n\n\n<p>\u2713 Hash PHP Extension<\/p>\n\n\n\n<p>\u2713 Mbstring PHP Extension<\/p>\n\n\n\n<p>\u2713 OpenSSL PHP Extension<\/p>\n\n\n\n<p>\u2713 PCRE PHP Extension<\/p>\n\n\n\n<p>\u2713 PDO PHP Extension<\/p>\n\n\n\n<p>\u2713 Session PHP Extension<\/p>\n\n\n\n<p>\u2713 Tokenizer PHP Extension<\/p>\n\n\n\n<p>\u2713 XML PHP Extension<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"284\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-44.jpg\" alt=\"\" class=\"wp-image-91\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-44.jpg 430w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-44-300x198.jpg 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n\n\n\n<p>       b. XAMPP<\/p>\n\n\n\n<p>XAMPP berfungsi sebagai paket perangkat lunak yang menyediakan lingkungan server lokal lengkap dengan Apache sebagai web server, PHP sebagai bahasa pemrograman, dan MySQL sebagai sistem manajemen basis data, sehingga memungkinkan pengembang menjalankan, menguji, dan mengembangkan aplikasi Laravel secara offline di komputer mereka.<\/p>\n\n\n\n<p>XAMPP dapat didownload pada link https:\/\/www.apachefriends.org\/index.html kemudian install sesuai dengan Langkah-langkah wizard.<\/p>\n\n\n\n<p>Kita dapat melakukan pengecekan terhadap versi php menggunakan command promt<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"459\" height=\"202\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-45.jpg\" alt=\"\" class=\"wp-image-92\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-45.jpg 459w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-45-300x132.jpg 300w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/figure>\n\n\n\n<p>Pastikan PHP yang terinstall adalah PHP versi 8.2 ke atas<\/p>\n\n\n\n<p>       c. Composer<\/p>\n\n\n\n<p>Composer di Laravel berfungsi sebagai pengelola dependensi (ketergantungan) atau paket untuk aplikasi web. Dengan kata lain, Composer membantu Anda mengelola dan menginstal library atau paket pihak ketiga yang dibutuhkan oleh aplikasi Anda.<\/p>\n\n\n\n<p>Download composer pada link <a href=\"https:\/\/getcomposer.org\/Composer-Setup.exe\">https:\/\/getcomposer.org\/Composer-Setup.exe<\/a>, selanjutnya install sesuai dengan Langkah-langkah wizard.<\/p>\n\n\n\n<p>Untuk melihat composer yang terinstall, kita dapat melihatnya melalui command promt<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"112\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-46.jpg\" alt=\"\" class=\"wp-image-93\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-46.jpg 464w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-46-300x72.jpg 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/figure>\n\n\n\n<p>       d. GIT<\/p>\n\n\n\n<p>Git adalah alat software development yang berfungsi sebagai sistem kontrol versi (version control system) untuk menyimpan, mengelola, dan berbagi kode sumber (source code) secara efisien dan kolaboratif.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"99\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-47.jpg\" alt=\"\" class=\"wp-image-94\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-47.jpg 328w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-47-300x91.jpg 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p>       e. Node JS dan NPM<\/p>\n\n\n\n<p>Node JS pada Laravel berfungsi untuk menangani masalah frontedn dan build asset UI (Library UI). Sedangkan NPM &nbsp;(Node Package Manager) yang berfungsi mengelola paket untuk ekosistem Javascript, NPM biasanya secara otomatis terinstall Ketika<\/p>\n\n\n\n<p>menginstall node js. Node js dapat didownload pada situs resminya yaitu <a href=\"https:\/\/nodejs.org\/id\">https:\/\/nodejs.org\/id<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"339\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-48.jpg\" alt=\"\" class=\"wp-image-95\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-48.jpg 602w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-48-300x169.jpg 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p>        f. Cmder<\/p>\n\n\n\n<p>Cmder adalah aplikasi terminal untuk Windows yang berfungsi sebagai pengganti Command Prompt (CMD) dengan tampilan yang lebih menarik dan fitur lebih lengkap, seperti tab multi-terminal, dukungan Git, serta kemudahan menjalankan perintah-perintah developer seperti Laravel, Composer, dan Git dalam satu tempat yang nyaman.<\/p>\n\n\n\n<p>Cmder dapat didownload melalui link <a href=\"https:\/\/cmder.app\/\">https:\/\/cmder.app\/<\/a><\/p>\n\n\n\n<p><strong>2. Membuat project Baru di Laravel<\/strong><\/p>\n\n\n\n<p>Setelah semua kebutuhan dan persyaratan terpenuhi, kita dapat memulai membuat project baru. Ada dua cara yang dapat digunakan untuk membuat project laravel, yaitu:<\/p>\n\n\n\n<ol style=\"list-style-type:lower-alpha\" class=\"wp-block-list\">\n<li>Laravel Installer\n<ul class=\"wp-block-list\">\n<li>Dowload installer Laravel menggunakan composer dengan ketik perintah <strong>composer global require laravel\/installer<\/strong> pada terminal (cmder)<\/li>\n\n\n\n<li>Buat project baru dengan perintah <strong>laravel new example-app<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Composer\n<ul class=\"wp-block-list\">\n<li>Buat project Laravel menggunakan perintah berikut.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>composer create-project laravel\/laravel=^versi namaproject &#8211;prefer-dist<\/strong> (download versi Laravel yang stabil)<\/p>\n\n\n\n<p>Pada Praktikum ini, saya menggunakan cara kedua untuk membuat projectnya<\/p>\n\n\n\n<p>Ketika dimasukkan perintah <strong>composer create-project laravel\/laravel=^12 newProject &#8211;prefer-dist <\/strong>cmder akan langsung memproses perintah tersebut dan menyiapkan project baru kita yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat folder baru bernama newProject.<\/li>\n\n\n\n<li>Mengunduh Laravel versi 12 dan file intinya.<\/li>\n\n\n\n<li>Menginstal semua dependensi (library yang dibutuhkan Laravel).<\/li>\n\n\n\n<li>Membuat struktur folder dan file dasar proyek Laravel.<\/li>\n\n\n\n<li>Mengatur file konfigurasi seperti .env, artisan, dsb.<\/li>\n<\/ul>\n\n\n\n<p>Setelah selesai, kita dapat masuk ke folder newProject yang sudah terbuat dan menjalankan command <strong>php artisan serve <\/strong>untuk melihat dimana server berjalan dan kita dapat menggunakan link yang diberikan untuk melihatnya di browser<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"339\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-49.jpg\" alt=\"\" class=\"wp-image-96\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-49.jpg 602w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-49-300x169.jpg 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"339\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-53.jpg\" alt=\"\" class=\"wp-image-100\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-53.jpg 602w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-53-300x169.jpg 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p>Selanjutnya, masukkan command <strong>npm install &amp;&amp; npm run build<\/strong><\/p>\n\n\n\n<p>Npm install berfungsi untuk Mengunduh dan menginstal semua paket front-end yang dibutuhkan Laravel dari file package.json (seperti Vite, Tailwind, Bootstrap, dsb) dan npm run build Memproses dan mengompilasi aset-aset (CSS, JS) menjadi versi yang sudah siap pakai dan cepat diakses di browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"166\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-50.jpg\" alt=\"\" class=\"wp-image-97\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-50.jpg 436w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-50-300x114.jpg 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/figure>\n\n\n\n<p>Selanjutnya masukkan script <strong>composer run dev. <\/strong>Script ini memungkinkan untuk menjalankan beberapa perintah development secara bersamaan dengan satu command sederhana.<\/p>\n\n\n\n<p><strong>3. Running Project<\/strong><\/p>\n\n\n\n<p>Untuk menjalankan dan mengedit project, buka file project tadi di VSCode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"339\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-51.jpg\" alt=\"\" class=\"wp-image-98\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-51.jpg 602w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-51-300x169.jpg 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p>Ketika kita create project tadi, sudah langsung disiapkan struktur folder dan file dasar proyek Laravel sehingga kita tidak perlu membuatnya satu persatu. Salah satunya file web.php di folder routes yang berfungsi untuk menentukan dan mengatur semua rute (URL) yang diakses lewat browser.<\/p>\n\n\n\n<p>Ketika kita membuka file tersebut, sudah ada code:<\/p>\n\n\n\n<p>&lt;?php<\/p>\n\n\n\n<p>use Illuminate\\Support\\Facades\\Route;<\/p>\n\n\n\n<p>Route::get(&#8216;\/&#8217;, function () {<\/p>\n\n\n\n<p>&nbsp; &nbsp; return view(&#8216;welcome&#8217;);<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<p>Ketika kita menjalankan kode ini, dia akan menampilkan halaman awal laravel.<\/p>\n\n\n\n<p>Kita dapat menambahkan halaman baru melalui file web.php ini. Contohnya<\/p>\n\n\n\n<p>Route::get(&#8216;\/helo&#8217;, function(){<\/p>\n\n\n\n<p>&nbsp; &nbsp; return &#8220;Hello World&#8221;;<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<p>Ketika dibuka di browser, maka ia akan return atau menampilkan tulisan Hello World<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"208\" src=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-52.jpg\" alt=\"\" class=\"wp-image-99\" srcset=\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-52.jpg 519w, https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/05\/image-52-300x120.jpg 300w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A. Tujuan Praktikum Tujuan praktikum ini yaitu mahasiswa mampu installasi Laravel, membuat project baru Laravel, mengenal struktur Laravel, konsep MVC [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}