Introduce To Backend Devloper: A Comprehensive Guide to Installing Essential Tools and Extensions

Halo teman-teman AMCC! Saya yakin semuanya sangat antusias untuk memulai perjalanan pelatihan, bukan? Nah, jangan terburu-buru, karena kali ini kita akan merinci secara mendalam topik yang cukup penting, yaitu backend. Mari kita eksplorasi pengertian backend secara lebih mendalam dan bahas komprehensif mengenai materi-materi yang akan kita pelajari selama periode pelatihan ini. Selain itu, dalam tulisan ini juga akan kita bahas dengan detail mengenai berbagai alat atau tools yang akan kita persiapkan dan gunakan untuk mendukung kelancaran pelaksanaan pelatihan ini. Jadi, pastikan untuk membaca dengan cermat agar kalian benar-benar siap dan mendapatkan pemahaman yang kokoh sebelum kita memasuki sesi pelatihan yang intens!

Backend vs Frontend, apa sih bedanya?

Kita analogikan backend sebagai mesin tak terlihat dalam dunia teknologi, memainkan peran sentral dalam mendukung dan menjalankan aplikasi yang kita nikmati sehari-hari. Sementara frontend menangani antarmuka pengguna yang kita lihat dan sentuh, backend bekerja dengan canggih di balik layar, mengelola data, menangani logika bisnis, dan memastikan segala sesuatu berjalan lancar.

Roadmap pembelajaran

Pentingnya memiliki roadmap dalam proses pembelajaran adalah untuk memastikan bahwa langkah-langkah yang diambil sesuai dengan urutannya, sehingga tidak mengalami kebingungan atau melompat-lompat dalam materi yang pada akhirnya dapat menghasilkan pernyataan seperti “ngoding kok susah yaa”. Terkadang, kompleksitas dalam memahami konsep pemrograman tidak sebenarnya berasal dari tingkat kesulitan, melainkan lebih kepada pembelajaran yang tidak terstruktur atau kurangnya pengaturan langkah-langkah yang logis. Okey kita akan berikan urutan pembelajaran yang akan teman teman lakukan selama masa pelatihan, Simak baik baik yaa.

HTML

Pertama-tama, kita akan memulai perjalanan pembelajaran dengan merambah ke dalam dunia HTML. Mengapa penting untuk memahami HTML? Karena HTML bukan sekadar satu-satunya elemen, melainkan merupakan dasar utama dari sebuah situs web yang memberikan kerangka kerja fundamental. Di dalam pembelajaran ini, teman teman akan diarahkan untuk mendalami struktur HTML, menjelajahi bagaimana penggunaan tag-tag HTML memainkan peran krusial dalam membentuk setiap aspek dari halaman web.

PHP

PHP merupakan bahasa pemrograman yang beroperasi di lapisan yang berbeda dengan HTML, yang lebih fokus pada aspek tampilan dan presentasi dalam sebuah situs web. Dalam pembelajaran ini, teman teman akan mendalami fondasi PHP, mencakup aspek-aspek dasar seperti variabel, jenis data, fungsi, perulangan, dan sebagainya. Dengan mengeksplorasi konsep-konsep ini, teman teman akan memperoleh pemahaman yang kokoh dalam penggunaan PHP untuk memanipulasi data dan logika di lapisan belakang sebuah website.

Selain memahami dasar-dasar PHP, perjalanan pembelajaran ini juga akan membawa teman teman ke dalam dunia PHP berbasis objek (OOP). Konsep pemrograman berorientasi objek adalah langkah lanjutan yang akan diperkenalkan, memungkinkan teman teman untuk merancang dan mengorganisir kode dengan cara yang lebih terstruktur dan efisien.

MySQL

Seorang backend developer tak dapat terlepas dari peran penting database dalam ekosistem pengembangan. Dalam perjalanan pembelajaran ini, kita akan menggali lebih dalam tentang pemanfaatan database, mengajarkan teman teman bagaimana menyimpan, menghapus, dan mengedit data dalam suatu basis data. Selain itu, kita juga akan membahas secara mendalam integrasi antara MySQL dan PHP, membuka wawasan tentang cara menghubungkan dan mengelola data menggunakan kedua teknologi ini.

MVC

Pembelajaran kali ini akan membawa teman teman lebih jauh ke dalam dunia pengembangan perangkat lunak modern, di mana konsep MVC memainkan peran kunci dalam merancang dan memahami struktur aplikasi dengan lebih efektif. Kita akan menggali lebih dalam untuk memahami bagaimana setiap komponen dari Model, View, dan Controller berinteraksi satu sama lain, membentuk fondasi yang kuat bagi aplikasi yang terstruktur dan mudah dipelihara.

Laravel

Pada pembelajaran ini teman teman akan dibimbing melalui langkah-langkah praktis dalam memahami framework Laravel, memberikan pemahaman yang mendalam tentang cara memanfaatkannya secara efektif dalam pengembangan perangkat lunak. Pada tahap ini, kita akan menjelajahi segala aspek framework ini, termasuk fitur-fitur unggulannya, dan bagaimana mengimplementasikannya dengan benar.

Final Project

Sebagai penutup dari periode pelatihan ini, teman teman akan diajak untuk berpartisipasi dalam final project yang akan memadukan elemen-elemen dari kedua dunia, yaitu backend dan frontend. Teman teman diminta untuk bergabung dan membentuk kelompok dengan divisi frontend. Dalam final project ini, kita akan mengadopsi framework Laravel sebagai landasan untuk mengembangkan aplikasi, sambil menerapkan semua pengetahuan yang telah diakuisisi selama proses pembelajaran sebelumnya.

Instalasi software pendukung pelatihan

Sebelum kita adakan sesi pelatihan, langkah awal yang harus kita lakukan adalah mempersiapkan perangkat lunak atau alat yang akan mendukung kelancaran seluruh proses pembelajaran. Dalam kesempatan ini, kita akan memberikan panduan dan bimbingan kepada teman teman untuk melakukan instalasi dua perangkat lunak kunci, yaitu Visual Studio Code (VS Code) dan XAMPP.

VS Code

Visual Studio Code (VS Code) adalah editor sumber terbuka yang ringan dan cepat, dikembangkan oleh Microsoft. Dirancang untuk pengembangan lintas platform, VS Code menyediakan berbagai fitur kaya seperti penyorot sintaks, autocompletion, dan debugging. Dengan dukungan ekstensi, pengguna dapat mengonfigurasi lingkungan pengembangan sesuai kebutuhan proyek. Berikut Langkah Langkah instalasi VS Code

1. Download Installer VS Code

Buka https://code.visualstudio.com/ lalu klik tombol download

1. Double click pada installer yang sebelumnnya telah di download
2. License agreement

Pilih “I accept agreement” lalu klik next

1. Pilih lokasi instalasi

Disarankan untuk tidak mengubahnya langsung saja klik next

1. Start menu folder

Disarankan tidak mengubahnya langsung saja klik next

1. Centang semua pada bagian “Select additional task“

1. Setelah semua, klik install dan tunggu sampai prosesnya selesai

XAMPP

XAMPP adalah perangkat lunak yang menyediakan lingkungan pengembangan web lokal dengan server Apache, database MySQL, dan PHP. Berikut Langkah Langkah instalasi XAMPP

1. Download installer XAMPP

Gunakan link ini https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/8.1.25/xampp-windows-x64-8.1.25-0-VS16-installer.exe untuk mendownload installer. XAMPP yang kita pakai untuk pelatihan ini adalah versi 8.1.25

1. Double click pada installer

Terkadang muncul peringatan seperti gambar dibawah, langsung saja klik ok

1. Pilih aplikasi yang ingin di install

Pada pelatihan ini disarankan untuk menginstall semua aplikasi dengan cara men-ceklis semuanya, bisa dilihat pada gambar dibawah ini

1. Pilih lokasi installasi

Disarankan untuk tidak menggunakan drive system ©, gunakan selain drive tersebut

1. Klik next sampai proses instalasi
2. Tunggu sampai proses selesai

1. Menjalankan XAMPP

Buka XAMPP lalu klik start pada bagian apache dan mysql, jika sudah hasilnya akan seperti pada gambar

Jika sudah start, kita bisa membuktikannya melalui browser, akses http://localhost:80

Untuk mengakses database gunakan http://localhost:80/phpmyadmin

Instalasi Ekstensi

Dalam Visual Studio Code (VS Code), ekstensi adalah modul tambahan atau plugin yang dapat diinstal untuk memperluas fungsionalitas dan mendukung berbagai bahasa pemrograman, kerangka kerja, atau alat pengembangan. Ekstensi ini dapat menyediakan fitur-fitur tambahan seperti penyorotan sintaks, otomatisasi, integrasi dengan alat pihak ketiga, dan banyak lagi. Dengan ekstensi akan memudahkan kita sebagai developer dalam penulisan kode serta meningkatkan produktivitas. Untuk mendownload ekstensi klik tab ekstensi lalu search nama ekstensi yang ingin di install. Berikut adalah ekstensi yang akan digunakan selama pelatihan

Prettier

Prettier adalah sebuah ekstensi yang berfungsi untuk memformat kode secara otomatis. Dengan menggunakan ekstensi ini, kode akan menjadi lebih rapi, konsisten, dan mudah dibaca.

Phpfmt

PHPfmt adalah sebuah ekstensi yang berfungsi untuk memformat kode PHP secara otomatis. Dengan menggunakan ekstensi ini, kode PHP akan menjadi lebih rapi, konsisten, dan mudah dibaca.

PHP intelephense

PHP Intelephense adalah sebuah ekstensi yang berfungsi untuk memberikan fitur-fitur Intellisense untuk bahasa pemrograman PHP. Dengan menggunakan ekstensi ini, teman teman dapat dengan mudah menyelesaikan kode, mendapatkan saran untuk nama variabel, fungsi, dan kelas, serta menemukan kesalahan sintaks.

PHP Namespace Resolver

Ekstensi PHP Namespace Resolver pada Visual Studio Code adalah sebuah ekstensi yang berfungsi untuk membantu menyelesaikan kode PHP yang menggunakan namespace. Ekstensi ini akan secara otomatis mengimpor namespace yang dibutuhkan, sehingga tidak perlu mengetik kode import secara manual.

Laravel Blade Formatter

Laravel Blade Formatter pada Visual Studio Code adalah sebuah ekstensi yang berfungsi untuk memformat kode Blade secara otomatis. Dengan menggunakan ekstensi ini, kode Blade Anda akan menjadi lebih rapi, konsisten, dan mudah dibaca.

Laravel Blade Snippets

Laravel Blade Snippets adalah sebuah ekstensi yang berfungsi untuk memberikan fitur-fitur snippet untuk kode Blade. Dengan menggunakan ekstensi ini, teman teman dapat dengan mudah menulis kode Blade, seperti tag Blade, helper Blade, dan fitur Blade lainnya.

Laravel Extra Intellisense

Laravel Extra Intellisense adalah sebuah ekstensi yang berfungsi untuk memberikan fitur-fitur Intellisense tambahan untuk kode Laravel. Dengan menggunakan ekstensi ini, teman teman dapat dengan mudah menyelesaikan kode Laravel, mendapatkan saran untuk nama variabel, fungsi, dan kelas Laravel, serta menemukan kesalahan sintaks Laravel.

Laravel Snippets

Laravel Snippets adalah sebuah ekstensi yang berfungsi untuk menyediakan fitur-fitur snippet untuk kode Laravel. Dengan menggunakan ekstensi ini, teman teman dapat dengan mudah menulis kode Laravel, seperti tag Blade, helper Blade, dan fitur Laravel lainnya.

Konfigurasi ekstensi

Lakukan konfigurasi ini agar ekstensi yang sebelumnya telah di download dapat dipakai secara maksimal

Buka setting dengan cara klik tombol gir yang ada di pojok kiri bawah lalu klik setting atau bisa menggunakan shortcut “ctrl + ,”

Pada bagian pencarian ketikkan “format on save” lalu centang

Buka konfigurasi json dengan cara klik tombol berlogo file di pojok kanan atas

Tambahkan konfigurasi seperti yang yang ada di dalam kotak merah

Setelah ditambahkan lalu save dengan cara “ctrl + s”