google.com, pub-9228471708496696, DIRECT, f08c47fec0942fa0

Modul Interaktif Pengembangan Web

 

Modul Interaktif Pengembangan Web

Pelajari dasar-dasar Frontend dan Backend dalam pengembangan web.

Pengantar Pengembangan Web

Pengembangan web dibagi menjadi dua bagian utama:

  • Frontend: Bagian yang berinteraksi langsung dengan pengguna. Ini adalah apa yang Anda lihat dan klik di browser (HTML, CSS, JavaScript).
  • Backend: Bagian "di balik layar" yang mengelola data, logika bisnis, dan interaksi dengan database. Pengguna tidak melihatnya secara langsung.

1. Frontend (Sisi Klien)

Frontend dibangun menggunakan:

  • HTML (HyperText Markup Language): Struktur konten halaman web.
  • CSS (Cascading Style Sheets): Mengatur tampilan dan gaya halaman web.
  • JavaScript: Menambahkan interaktivitas dan perilaku dinamis ke halaman web.

Contoh Interaktif Frontend

Klik tombol di bawah ini untuk melihat bagaimana JavaScript dapat mengubah konten halaman secara langsung tanpa memuat ulang halaman.

Pesan akan muncul di sini setelah Anda mengklik tombol.

Kode Frontend (HTML, CSS, JavaScript)

<!-- HTML untuk tombol dan output -->
<button id="frontendButton" class="button-primary">Klik Saya!</button>
<div id="frontendOutput" class="output-box mt-4">
    Pesan akan muncul di sini setelah Anda mengklik tombol.
</div<

<!-- JavaScript untuk interaktivitas -->
<script>
    // Mendapatkan elemen tombol dan output
    const frontendButton = document.getElementById('frontendButton');
    const frontendOutput = document.getElementById('frontendOutput');

    // Menambahkan event listener untuk klik tombol
    frontendButton.addEventListener('click', () => {
        // Mengubah teks di elemen output
        frontendOutput.textContent = 'Anda baru saja berinteraksi dengan Frontend!';
        frontendOutput.style.color = '#2f855a'; // Mengubah warna teks
        frontendOutput.style.fontWeight = 'bold'; // Mengubah gaya teks
    });
</script>

2. Backend (Sisi Server)

Backend bertanggung jawab untuk:

  • Menyimpan dan mengelola data (menggunakan database seperti MySQL, PostgreSQL, MongoDB).
  • Menjalankan logika bisnis (misalnya, memproses pesanan, otentikasi pengguna).
  • Berkomunikasi dengan frontend melalui API (Application Programming Interface).

Bahasa dan framework backend populer meliputi Node.js (Express), Python (Django, Flask), PHP (Laravel), Ruby (Rails), Java (Spring), dan Go.

Contoh Konseptual Interaksi Backend

Meskipun kita tidak dapat menjalankan server backend di sini, kita dapat mensimulasikan bagaimana frontend akan "meminta" data dari backend menggunakan JavaScript (fungsi fetch).

Data dari simulasi backend akan muncul di sini.

Kode Interaksi Backend (Konseptual JavaScript)

<!-- JavaScript untuk simulasi interaksi backend -->
<script>
    // Mendapatkan elemen tombol dan output backend
    const backendButton = document.getElementById('backendButton');
    const backendOutput = document.getElementById('backendOutput');

    // Menambahkan event listener untuk klik tombol backend
    backendButton.addEventListener('click', async () => {
        backendOutput.textContent = 'Meminta data dari backend...';
        backendOutput.style.color = '#718096'; // Mengubah warna teks

        try {
            // Simulasi panggilan API ke backend
            // Dalam aplikasi nyata, ini akan menjadi URL server Anda, misal: '/api/data'
            const simulatedResponse = await new Promise(resolve => setTimeout(() => {
                resolve({ message: 'Ini adalah data dari backend!', timestamp: new Date().toLocaleString() });
            }, 1500)); // Menunda 1.5 detik untuk mensimulasikan latensi jaringan

            // Menampilkan data yang diterima dari backend
            backendOutput.textContent = `Backend merespons: "${simulatedResponse.message}" (pada ${simulatedResponse.timestamp})`;
            backendOutput.style.color = '#0056b3'; // Mengubah warna teks
            backendOutput.style.fontWeight = 'bold'; // Mengubah gaya teks

        } catch (error) {
            backendOutput.textContent = 'Terjadi kesalahan saat meminta data dari backend.';
            backendOutput.style.color = '#e53e3e'; // Mengubah warna teks menjadi merah untuk error
            console.error('Error fetching from simulated backend:', error);
        }
    });
</script>

Bagaimana Frontend dan Backend Bekerja Sama?

Ini adalah siklus kerja tipikal:

  1. Pengguna membuka halaman web (Frontend dimuat di browser).
  2. Pengguna melakukan tindakan (misalnya, mengklik tombol, mengisi formulir).
  3. JavaScript (di Frontend) mengirimkan permintaan (request) ke Backend (melalui API).
  4. Backend menerima permintaan, memprosesnya (mungkin berinteraksi dengan database), dan mengirimkan respons (response) kembali ke Frontend.
  5. JavaScript (di Frontend) menerima respons dan memperbarui tampilan halaman web tanpa perlu memuat ulang seluruh halaman.

Konsep ini dikenal sebagai arsitektur klien-server.

10 Langkah Perjalanan Pengembang Web

 Berikut adalah penjelasan lebih detail mengenai 10 langkah yang dapat Anda ambil untuk melanjutkan perjalanan Anda sebagai pengembang web, berdasarkan modul yang telah kita buat:

1. Pilih Jalur Spesialisasi (Frontend, Backend, atau Fullstack)

Ini adalah keputusan awal yang penting untuk memfokuskan pembelajaran Anda:

  • Frontend Developer: Anda akan fokus pada apa yang dilihat dan diinteraksikan pengguna.

    • Teknologi: Dalami satu atau lebih framework JavaScript modern seperti React, Vue.js, atau Angular. Masing-masing memiliki filosofi dan ekosistemnya sendiri.

    • Konsep Mendalam: Pelajari manajemen state (misalnya, Redux untuk React, Vuex untuk Vue, NgRx untuk Angular), routing (React Router, Vue Router, Angular Router), dan optimasi UI/UX untuk memastikan aplikasi responsif dan mudah digunakan.

    • Proyek: Mulai dengan aplikasi daftar tugas (Todo App) yang lebih kompleks (dengan fitur filter, edit, hapus, persistensi data lokal), galeri foto interaktif, atau dashboard sederhana yang menampilkan data dari API publik.

  • Backend Developer: Anda akan fokus pada logika di balik layar, server, dan database.

    • Teknologi: Pilih satu bahasa pemrograman dan framework backend. Contoh populer:

      • Node.js dengan Express: JavaScript di sisi server, cepat untuk prototyping dan aplikasi real-time.

      • Python dengan Django/Flask: Django untuk proyek besar dan kompleks (full-featured), Flask untuk proyek yang lebih kecil atau API sederhana.

      • Go dengan Gin/Echo: Cepat dan efisien, cocok untuk layanan mikro dan performa tinggi.

    • Konsep Mendalam: Pelajari desain API (RESTful API, GraphQL), otentikasi (JSON Web Tokens/JWT, OAuth 2.0), otorisasi (role-based access control), dan penanganan error yang robust.

    • Proyek: Bangun API RESTful untuk blog Anda sendiri, sistem manajemen pengguna dasar, atau layanan notifikasi sederhana.

  • Fullstack Developer: Anda akan menguasai kedua sisi (frontend dan backend).

    • Pendekatan: Ini adalah jalur yang membutuhkan waktu dan dedikasi lebih. Mulai dengan menguasai dasar-dasar salah satu sisi terlebih dahulu, lalu perlahan pelajari sisi lainnya.

    • Proyek: Mulai dengan proyek kecil yang mengintegrasikan frontend dan backend sederhana Anda, seperti aplikasi catatan yang menyimpan data di database, atau aplikasi polling sederhana.

2. Dalamilah Konsep Database

Database adalah jantung dari sebagian besar aplikasi web.

  • SQL (Relational Databases):

    • Dasar-dasar SQL: Kuasai perintah dasar seperti SELECT (mengambil data), INSERT (menambah data), UPDATE (mengubah data), dan DELETE (menghapus data).

    • Normalisasi Database: Pelajari cara merancang skema database yang efisien dan mengurangi redundansi data.

    • Contoh Database: Latih penggunaan PostgreSQL, MySQL, atau SQLite.

  • NoSQL (Non-relational Databases):

    • Kapan Digunakan: Pahami perbedaan fundamental dengan SQL dan kapan NoSQL lebih cocok (misalnya, untuk data tidak terstruktur, skalabilitas horizontal yang tinggi).

    • Contoh Database: Eksplorasi MongoDB (database berbasis dokumen), Redis (database key-value, sering untuk caching dan sesi), atau Cassandra (database kolom-family untuk data terdistribusi).

  • ORM (Object-Relational Mapping):

    • Fungsi: Pelajari bagaimana ORM memungkinkan Anda berinteraksi dengan database menggunakan objek dan metode dari bahasa pemrograman Anda (misalnya, JavaScript, Python) daripada menulis SQL mentah. Ini meningkatkan produktivitas dan mempermudah pemeliharaan kode.

    • Contoh ORM: Sequelize (Node.js), SQLAlchemy (Python), Hibernate (Java).

3. Praktikkan Version Control dengan Git dan GitHub

Version Control System (VCS) seperti Git adalah alat esensial untuk setiap pengembang.

  • Alur Kerja Git: Pahami konsep inti seperti:

    • Branching: Membuat cabang kode untuk fitur baru tanpa memengaruhi kode utama.

    • Merging: Menggabungkan perubahan dari satu branch ke branch lain.

    • Rebasing: Mengintegrasikan perubahan secara linear.

    • Latihan: Latih penggunaan perintah dasar Git (git init, git add, git commit, git push, git pull) secara rutin.

    • Kolaborasi: Latih kolaborasi dengan teman atau berkontribusi pada proyek open source untuk memahami alur kerja tim (pull requests, code reviews).

  • Profil GitHub:

    • Portofolio: Jadikan profil GitHub Anda sebagai portofolio digital yang menunjukkan proyek-proyek Anda, kontribusi, dan kemampuan coding.

    • Dokumentasi: Biasakan diri untuk mendokumentasikan proyek Anda dengan README yang jelas.

4. Bangun Proyek Nyata (dari Sederhana hingga Kompleks)

Pembelajaran terbaik adalah dengan praktik. Mulai dari proyek kecil dan tingkatkan kompleksitasnya.

  • Proyek Awal (Fokus Frontend Dasar):

    • Aplikasi kalkulator interaktif.

    • Jam digital dengan fitur alarm.

    • Daftar belanja sederhana yang menyimpan item di localStorage.

    • Permainan tebak angka.

  • Proyek Menengah (Integrasi Frontend & Backend Sederhana):

    • Aplikasi cuaca yang mengambil data dari API publik (misalnya, OpenWeatherMap API).

    • Blog sederhana dengan kemampuan admin untuk membuat, mengedit, dan menghapus postingan (membutuhkan database dan API backend).

    • Aplikasi chat real-time sederhana menggunakan WebSockets.

    • Sistem otentikasi pengguna dasar (login/registrasi).

  • Proyek Lanjutan (Aplikasi Skala Penuh):

    • Platform e-commerce sederhana (manajemen produk, keranjang belanja, checkout).

    • Platform media sosial mini (profil pengguna, postingan, komentar, like).

    • Sistem manajemen inventaris untuk bisnis kecil.

    • Aplikasi streaming video/audio (membutuhkan penanganan file besar dan streaming).

5. Pelajari Konsep Deployment Lebih Lanjut

Menerbitkan aplikasi Anda agar dapat diakses publik adalah langkah penting.

  • Penyedia Cloud: Eksplorasi layanan cloud terkemuka:

    • AWS (Amazon Web Services): EC2 (server virtual), S3 (penyimpanan objek), Lambda (serverless functions), RDS (database terkelola).

    • Google Cloud Platform (GCP): App Engine (platform as a service), Cloud Functions (serverless functions), Firestore (NoSQL database), Cloud SQL (SQL database).

    • Azure (Microsoft Azure): App Service, Azure Functions, Azure SQL Database.

    • PaaS (Platform as a Service): Heroku, Netlify, Vercel (sangat populer untuk frontend) yang menyederhanakan proses deployment.

  • Containerization (Docker):

    • Fungsi: Pelajari cara mengemas aplikasi Anda dan semua dependensinya ke dalam "kontainer" yang terisolasi. Ini memastikan aplikasi berjalan konsisten di lingkungan mana pun.

    • Manfaat: Mempermudah deployment, skalabilitas, dan kolaborasi antar pengembang.

  • CI/CD (Continuous Integration/Continuous Deployment):

    • Fungsi: Otomatisasi proses pengembangan perangkat lunak, mulai dari integrasi kode baru (CI) hingga pengujian dan deployment (CD).

    • Alat: GitHub Actions, GitLab CI/CD, Jenkins, CircleCI. Ini mempercepat siklus pengembangan dan mengurangi kesalahan manual.

6. Terus Belajar dan Ikuti Perkembangan Industri

Dunia pengembangan web sangat dinamis.

  • Sumber Daya:

    • Ikuti blog teknologi terkemuka (misalnya, freeCodeCamp, Smashing Magazine, Medium).

    • Dengarkan podcast pengembangan web.

    • Bergabunglah dengan komunitas pengembang online (Discord, Stack Overflow, forum lokal).

    • Hadiri webinar atau konferensi (virtual/fisik).

  • Teknologi Baru:

    • TypeScript: Pelajari superset JavaScript yang menambahkan penulisan statis (static typing) untuk kode yang lebih robust dan mudah dipelihara.

    • WebAssembly (Wasm): Pahami bagaimana Wasm memungkinkan kode yang ditulis dalam bahasa lain (C++, Rust) berjalan di browser dengan performa mendekati native.

    • Arsitektur Lanjutan: Pahami konsep seperti Microservices (membagi aplikasi besar menjadi layanan-layanan kecil yang independen) atau Serverless (menjalankan kode tanpa mengelola server) untuk aplikasi skala besar dan efisien.

    • GraphQL: Alternatif untuk REST API yang memungkinkan klien meminta hanya data yang mereka butuhkan, mengurangi over-fetching dan under-fetching.

7. Membangun Portofolio yang Kuat

Portofolio adalah cara terbaik untuk menunjukkan kemampuan Anda kepada calon pemberi kerja.

  • Kualitas daripada Kuantitas: Fokus pada beberapa proyek yang berkualitas tinggi yang menunjukkan kemampuan Anda dalam berbagai aspek (frontend, backend, database, deployment).

  • Dokumentasi: Setiap proyek harus memiliki README yang jelas yang menjelaskan apa itu proyek, bagaimana cara menjalankannya, teknologi yang digunakan, dan tantangan yang Anda hadapi.

  • Demo Langsung: Jika memungkinkan, host proyek Anda di platform gratis (Netlify, Vercel, Heroku free tier) sehingga orang lain dapat melihatnya langsung.

8. Pahami Struktur Data dan Algoritma Dasar

Meskipun ini lebih ke ilmu komputer dasar, pemahaman yang kuat akan membantu Anda menulis kode yang lebih efisien dan memecahkan masalah kompleks.

  • Struktur Data: Pelajari array, linked list, stack, queue, tree, hash table, dll.

  • Algoritma: Pahami algoritma pencarian (linear, binary search), pengurutan (bubble sort, quicksort, mergesort), dan dasar-dasar kompleksitas waktu/ruang (Big O notation).

9. Kembangkan Soft Skills

Kemampuan teknis saja tidak cukup.

  • Komunikasi: Mampu menjelaskan ide-ide teknis kepada non-teknis dan berkolaborasi dengan tim.

  • Pemecahan Masalah: Keterampilan untuk mengidentifikasi, menganalisis, dan menyelesaikan masalah.

  • Manajemen Waktu: Mengelola tugas dan tenggat waktu secara efektif.

  • Kerja Sama Tim: Berkontribusi secara positif dalam lingkungan tim.

10. Jaringan dan Komunitas

Terhubung dengan pengembang lain dapat mempercepat pembelajaran dan membuka peluang.

  • Komunitas Online: Bergabunglah dengan grup Discord, forum, atau sub-reddit yang relevan.

  • Meetup/Konferensi: Hadiri acara lokal atau virtual untuk belajar dari para ahli dan bertemu pengembang lain.

  • Mentorship: Cari mentor yang dapat membimbing Anda, atau jadilah mentor bagi orang lain setelah Anda memiliki pengalaman.

Perjalanan menjadi pengembang web adalah proses berkelanjutan. Dengan dedikasi, praktik, dan kemauan untuk terus belajar, Anda akan terus berkembang!

Solusi Error Pada core/common.php pada CodeIgniter

 

Kali ini saya akan membahas bagaimana Solusi Error Pada core/common.php pada CodeIgniter, Jika anda membuat sebuah website dengan Codeigniter dan muncul error seperti ini :

A PHP Error was encountered
Severity: Notice
Message: Only variable references should be returned by reference
Filename: core/Common.php
Line Number: 257

——————————————————————————————————————–

SOLUSI

Silahkan Anda masuk ke directory /system/core/Common.php, kemudian ganti kode pada line 257 seperti di bawah ini :

return $_config[0] =& $config;

Menjadi

$_config[0] =& $config; return $_config[0];

——————————————————————————————————————-

PENJELASAN

Hal ini terjadi karena ketidaksesuaian antara versi PHP dengan versi CodeIgniter yang digunakan, di sarankan sebaiknya menggunakan versi PHP terbaru dan versi CodeIgniter yang terbaru juga. Namun jika kebutuhannya menggunakan versi CodeIgniter yang lama, maka lakukan langkah seperti di atas untuk menghilangkan ERROR.

Terimakasih, Semoga bermanfaat.

Panduan Lengkap Menggunakan Visual Studio Code dan Laragon untuk Web Development

 Apakah Anda menghadapi kendala saat menggunakan XAMPP? Seperti mengalami masalah dengan port yang sudah digunakan oleh aplikasi lain, terutama port 80 dan 443, sedangkan mengubah port default boleh jadi rumit bagi pemula. Kendala pada saat ingin menjalankan multiple versi PHP dalam satu instalasi XAMPP dan untuk upgrade atau downgrade PHP memerlukan reinstalasi XAMPP atau konfigurasi manual yang rumit. Kendala pada saat membuat dan mengkonfigurasi virtual host di XAMPP cenderung lebih kompleks dibandingkan beberapa alternatif lainnya. Kesulitan untuk update php atau mysql, karena proses update PHP atau MySQL bisa menjadi rumit dan berisiko merusak instalasi yang ada. Dan aneka kendala lainnya, seperti keamanan, keterbatasan tools, masalah kompatibilitas dan lain-lain.

Bayangkan berapa banyak waktu yang terbuang karena masalah-masalah ini. Setiap menit yang Anda habiskan untuk mengatasi konflik port atau berjuang dengan konfigurasi adalah menit yang bisa Anda gunakan untuk coding. Berapa banyak proyek yang tertunda karena Anda tidak bisa menjalankan multiple versi PHP? Bagaimana dengan klien yang menunggu karena lingkungan development Anda tidak portabel?

Pengembangan web seharusnya menyenangkan dan produktif, bukan sumber frustrasi dan hambatan.

Kabar baiknya ada tools alternative yang dapat kita gunakan sebagai solusi terhadap kendala yang kita alami pada saat menggunakan Xampp, yaitu Laragon. Laragon menawarkan:

  1. Kemudahan penggunaan dengan antarmuka intuitif
  2. Fleksibilitas dengan dukungan multiple PHP versions
  3. Performa yang superior dengan konsumsi memori yang lebih rendah
  4. Portabilitas untuk development di mana saja
  5. Terminal terintegrasi untuk workflow yang mulus
  6. Dukungan berbagai framework PHP populer
  7. Manajemen database yang lebih baik dengan HeidiSQL
  8. Isolasi proyek untuk mengurangi konflik
  9. Update dan pemeliharaan yang mudah
  10. Komunitas yang aktif dan suportif

Solusi tersebut saya gunakan ketika saya diminta untuk mengisi pelatihan web programming pada saat Setup Laravel Development Environment di OS Windows. Selain laragon, saya juga menggunakan Visual Studio Code sebagai code editor di pelatihan web programming tersebut. Dan pada artikel kali ini, kita akan membahas bagaimana cara menginstal kedua tools tersebut, melakukan konfigurasi, serta tips dan trik agar Anda dapat memulai proyek pengembangan web dengan lebih cepat.

Overview

Panduan ini membahas tentang langkah-langkah instalasi visual studio code dan laragon. Setelah proses install selesai, kita coba buat folder di direktori root laragon dan kita coba buka folder tersebut menggunakan visual studio code sebagai simulasi ketika kita mengembangkan project web. Selain itu kita juga akan bahas bagaimana cara menambahkan path ke environment variable, sehingga kita bisa run command phpnode dan composer yang kedepannya akan sering kita gunakan ketika mengembangkan aplikasi web.

Tujuan Utama:

  • Menginstal Visual Studio Code.
  • Menginstal dan mengatur Laragon sebagai server lokal.
  • Setup environment variable untuk command yang akan digunakan untuk development.

Table of Content


Step 1: Menginstal Visual Studio Code

Download Visual Studio Code

Langkah pertama untuk memulai perjalanan Anda sebagai pengembang web adalah dengan menginstal Visual Studio Code. Akses website resmi Visual Studio Code dan klik tombol Download untuk platform Windows.

download visual studio code

Setelah itu, tunggu hingga proses download selesai.

Proses Instalasi

Setelah file installer VSCodeUserSetup-x64-1.82.2 berhasil diunduh, klik dua kali untuk memulai proses instalasi.

  1. Pada halaman pertama instalasi, Anda akan diminta untuk menerima License Agreement. Pilih opsi I accept the agreement dan klik Next.

    mulai install

  2. Pilih direktori tempat Anda ingin menginstal VS Code. Default-nya adalah di C:\Program Files\Microsoft VS Code. Anda bisa menggunakan pengaturan default atau menyesuaikan direktori sesuai keinginan Anda. Klik Next.

    setup direktori vscode

  3. Pada halaman Select Additional Tasks, Anda dapat mencentang opsi Create a desktop icon jika Anda menginginkan shortcut di desktop. Lalu klik Next.

    select additional task

  4. Pada halaman Ready to Install, klik Install dan tunggu hingga proses selesai.

    ready to install

Setelah instalasi selesai, klik Finish untuk menutup installer. finish install visual studio code

Menjalankan Visual Studio Code

Setelah instalasi selesai, Anda bisa membuka VS Code langsung dari desktop icon atau melalui start menu.

Step 2: Menginstal Laragon

Download Laragon

Untuk lingkungan server lokal, Laragon adalah pilihan yang sempurna karena ringan dan mudah digunakan. Anda bisa mengunduhnya dari website resmi Laragon. Klik menu Download dan pilih versi Laragon - Full dari daftar pilihan.

download laragon

Keterangan:

Proses Instalasi Laragon

Setelah file laragon-wamp.exe selesai diunduh, klik dua kali untuk memulai instalasi. Berikut adalah langkah-langkah instalasi Laragon:

  1. Pilih bahasa instalasi (misalnya, English), lalu klik Next.

    pilih bahasa

  2. Pilih lokasi instalasi Laragon, default-nya adalah C:\Laragon. Klik Next untuk melanjutkan.

    pilih lokasi install laragon

  3. Anda akan melihat opsi konfigurasi seperti autostart pada saat Windows mulai, dan menambahkan Notepad++ serta terminal ke Laragon. Anda bisa memilih opsi sesuai preferensi, lalu klik Next.

    atur konfigurasi laragon

  4. Pada halaman Ready to Install, klik Install untuk memulai proses instalasi Laragon.

    ready install

  5. Tunggu hingga proses instalasi selesai. Setelah itu, klik Finish untuk menutup installer dan membuka Laragon.

    selesai install laragon

Menjalankan Laragon

Setelah Laragon terbuka, Anda akan melihat tampilan antarmuka Laragon yang intuitif dan user-friendly.

tampilan awal laragon

Untuk memulai layanan seperti Apache dan MySQL, Anda cukup klik Start All. Laragon akan menjalankan semua layanan yang diperlukan untuk pengembangan aplikasi web, termasuk Apache, MySQL, dan PHP.

Membuka folder project di visual studio code

Setelah menginstal VS Code dan Laragon, langkah selanjutnya adalah menghubungkan keduanya agar Anda bisa bekerja dengan smooth dalam satu environment development. Anda bisa membuka direktori project di Visual Studio Code dengan cara sederhana:

  1. Buka Laragon, klik Root. Ini akan membuka direktori root di mana proyek Anda berada, yaitu C:\laragon\www. Sebagai contoh di sini kita akan buat direktori project baru, di mana pada real project nanti kita buat langsung menggunakan command composer apabila kita mengembangkan project laravelcodeigniter ataupun framework php lainnya. Di direktori root, kita bisa buat direktori project baru dengan nama sample-app.
  2. Buka Visual Studio Code, klik menu File > Open Folder dan pilih folder yang baru saja Anda buat di direktori root Laragon, yaitu C:\laragon\www\sample-app.

Step 3: Konfigurasi Awal

Pada tahapan ini kita akan setup environment variable supaya kita bisa run command seperti phpnode, dan composer, di mana command tersebut dapat kita gunakan ketika kita melakukan development project.

Pertama kita buka kembali laragon, lalu kita klik menu untuk membuka menu laragon.

buka menu laragon

Lalu selanjutnya kita tambahkan path laragon dengan klik menu Tools > Path > Add Laragon to Pathadd laragon to path

Sekarang kita coba run command untuk mengecek apakah laragon berhasil ditambahkan ke dalam path. Untuk mengecek apakah sudah berhasil, kita buka terminal atau command prompt dengan menekan menu Terminal di inteface laragon. Buka terminal Setelah terminal terbuka, kita run command berikut ini untuk mengecek versi php yang terinstall di laragon.

php -v

Selanjutnya kita bisa lihat versi php pada output yang ditampilkan seperti pada gambar berikut ini. cek versi php

Seperti yang kita lihat pada gambar di atas, versi php yang terinstall adalah PHP versi 8.1

Selanjutnya kita coba cek versi node js yang terinstall, kita buka kembali terminal dan run command berikut ini.

node -v

cek versi nodejs

Seperti yang terlihat pada output yang ditampilkan di terminal, versi node js yang terinstall pada laragon adalah versi 18.8.0.

Dan yang terakhir kita cek apakah kita bisa run composer. Buka kembali terminal lalu run command berikut ini.

composer

tes run command composer

Seperti yang terlihat pada gambar di atas, kita bisa lihat output dari command composer.

Conclusion

Dalam tutorial ini, kita telah mempelajari langkah-langkah penting untuk mempersiapkan lingkungan pengembangan web yang efisien dan produktif menggunakan Visual Studio Code dan Laragon. Berikut adalah ringkasan dari apa yang telah kita capai:

  1. Menginstal Visual Studio Code sebagai editor kode yang powerful dan fleksibel.
  2. Menginstal Laragon sebagai alternatif yang lebih mudah dan fleksibel dibandingkan XAMPP untuk server lokal.
  3. Mengkonfigurasi Laragon dan menambahkannya ke path sistem, memungkinkan kita untuk menggunakan berbagai command line tool seperti PHP, Node.js, dan Composer langsung dari terminal.
  4. Mendemonstrasikan cara membuat folder project baru di direktori root Laragon dan membukanya di Visual Studio Code.
  5. Memverifikasi instalasi dan konfigurasi dengan mengecek versi PHP, Node.js, dan ketersediaan Composer melalui command line.

Dengan lingkungan pengembangan yang sudah siap ini, Anda dapat menghindari berbagai kendala yang sering dijumpai saat menggunakan XAMPP, seperti konflik port, kesulitan dalam menjalankan multiple versi PHP, atau kompleksitas dalam mengkonfigurasi virtual host. Laragon menawarkan solusi yang lebih intuitif dan fleksibel, memungkinkan Anda untuk fokus pada pengembangan aplikasi web tanpa terhambat oleh masalah konfigurasi yang rumit.

Kombinasi Visual Studio Code dan Laragon memberikan Anda toolkit yang powerful untuk memulai perjalanan Anda dalam pengembangan web atau meningkatkan efisiensi workflow Anda jika Anda sudah berpengalaman. Dengan lingkungan yang sudah diatur dengan baik ini, Anda siap untuk memulai proyek web Anda dengan lebih cepat dan produktif.

Modul Interaktif Pengembangan Web

  Modul Interaktif Pengembangan Web Pelajari dasar-dasar Frontend dan Backend dalam pengembangan web. Pengantar Pengembangan Web Pengembanga...