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).
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:
Pengguna membuka halaman web (Frontend dimuat di browser).
Pengguna melakukan tindakan (misalnya, mengklik tombol, mengisi formulir).
JavaScript (di Frontend) mengirimkan permintaan (request) ke Backend (melalui API).
Backend menerima permintaan, memprosesnya (mungkin berinteraksi dengan database), dan mengirimkan respons (response) kembali ke Frontend.
JavaScript (di Frontend) menerima respons dan memperbarui tampilan halaman web tanpa perlu memuat ulang seluruh halaman.
Konsep ini dikenal sebagai arsitektur klien-server.
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.
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.
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.
Kali ini saya akan membahas bagaimanaSolusi 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.
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:
Kemudahan penggunaan dengan antarmuka intuitif
Fleksibilitas dengan dukungan multiple PHP versions
Performa yang superior dengan konsumsi memori yang lebih rendah
Portabilitas untuk development di mana saja
Terminal terintegrasi untuk workflow yang mulus
Dukungan berbagai framework PHP populer
Manajemen database yang lebih baik dengan HeidiSQL
Isolasi proyek untuk mengurangi konflik
Update dan pemeliharaan yang mudah
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 php, node 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.
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.
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.
Pada halaman pertama instalasi, Anda akan diminta untuk menerima License Agreement. Pilih opsi I accept the agreement dan klik Next.
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.
Pada halaman Select Additional Tasks, Anda dapat mencentang opsi Create a desktop icon jika Anda menginginkan shortcut di desktop. Lalu klik Next.
Pada halaman Ready to Install, klik Install dan tunggu hingga proses selesai.
Setelah instalasi selesai, klik Finish untuk menutup installer.
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.
Keterangan:
Setelah laragon versi 7 rilis, file yang didownload di halaman download laragon adalah laragon versi 7. Berdasarkan diskusi di repositori laragon, laragon versi 7 tidak lagi gratis dan menggunakan Paid Licensing model.
Setelah file laragon-wamp.exe selesai diunduh, klik dua kali untuk memulai instalasi. Berikut adalah langkah-langkah instalasi Laragon:
Pilih bahasa instalasi (misalnya, English), lalu klik Next.
Pilih lokasi instalasi Laragon, default-nya adalah C:\Laragon. Klik Next untuk melanjutkan.
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.
Pada halaman Ready to Install, klik Install untuk memulai proses instalasi Laragon.
Tunggu hingga proses instalasi selesai. Setelah itu, klik Finish untuk menutup installer dan membuka Laragon.
Menjalankan Laragon
Setelah Laragon terbuka, Anda akan melihat tampilan antarmuka Laragon yang intuitif dan user-friendly.
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:
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 laravel, codeigniter ataupun framework php lainnya. Di direktori root, kita bisa buat direktori project baru dengan nama sample-app.
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 php, node, 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.
Lalu selanjutnya kita tambahkan path laragon dengan klik menu Tools > Path > Add 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. 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.
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
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
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:
Menginstal Visual Studio Code sebagai editor kode yang powerful dan fleksibel.
Menginstal Laragon sebagai alternatif yang lebih mudah dan fleksibel dibandingkan XAMPP untuk server lokal.
Mengkonfigurasi Laragon dan menambahkannya ke path sistem, memungkinkan kita untuk menggunakan berbagai command line tool seperti PHP, Node.js, dan Composer langsung dari terminal.
Mendemonstrasikan cara membuat folder project baru di direktori root Laragon dan membukanya di Visual Studio Code.
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.