4.7.19
- 4.7.19


Aplikasi ViSual Studio Code (VSC) adalah sebuah teks editor pemrograman ringan buatan Microsoft untuk sistem operasi lintas platform, seperti Linux, Mac, dan Windows. Kehebatan Teks editor ini adalah banyaknya plugin (extension) yang dapat dipasang via marketplace Visual Studio Code untuk mendukung pemrograman (seperti PHP, C++, C#, Python, Go, Java, dan lain-lain).



Teori singkat instalasi extension Visual Studio code

Aplikasi ViSual Studio Code Editor

VS (Visual Studio) Code editor adalah sebuah teks editor pemrograman ringan buatan Microsoft untuk sistem operasi lintas platform, seperti Linux, Mac, dan Windows.

Teks editor ini mendukung bahasa pemrograman HTML, JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lain dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio Code (seperti PHP, C++, C#, Python, Go, Java, dan lain-lain).

PHP

PHP singkatan dari PHP: Hypertext Preprocessor yaitu bahasa pemrograman web server-side yang bersifat open source. PHP merupakan script yang terintegrasi dengan HTML dan berada pada server (server side HTML embedded scripting).

PHP adalah script yang digunakan untuk membuat halaman website yang dinamis. Dinamis berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client.

4 PHP extension / plugin yang bantu programmer PHP bekerja

Keunggulan dari Visual Studio Code adalah banyaknya extension atau plugin yang dapat digunakan oleh programmer PHP dalam membantu pekerjaan membangun aplikasi berbasis web.

Extension yang akan kita install pada Visual Studio Code khusus untuk membantu membuat aplikasi web menggunakan PHP adalah sebagai berikut:

1.PHP Intelephense

Intelephense adalah fitur code completion dengan saran kode yang detail dimana go to langsung ke sumber. Extension ini membuat programmer tidak perlu mengingat seluruh sintaks perintah yang akan ditulis karena fitur intellisense dapat langsung bekerja tanpa konfigurasi.

Syarat utama agar fitur ini bekerja baik, kamu harus menggunakan PHP versi 7 keatas.

extension VS Code


2.PHP Debug

PHP Debug adalah fitur yang sangat membantu untuk mencari kesalahan (bug) pada saat kita mengerjakan pemrograman. Fitur PHP Debug antara lain:
  • Line breakpoints
  • Conditional breakpoints
  • Function breakpoints
  • Step over, step in, step out
  • Break on entry
  • Breaking on uncaught exceptions and errors / warnings / notices
  • Multiple, parallel requests
  • Stack traces, scope variables, superglobals, user defined constants
  • Arrays & objects (including classname, private and static properties)
  • Debug console
  • Watches
  • Run as CLI
  • Run without debugging

extension VS Code


3.Auto Close Tag

Ektensi atau plugin ini keren juga lho, pas kamu mengetik skrip program misal html, secara otomatis visual studio code akan menutup tag closing. Ausoom!

extension VS Code


4.Auto Rename Tag

Plugin ini juga memudahkan programmer PHP dalam menulis kode, setiap mengedit tag pembuka, otomatis akan merubah juga tag penutup. Cool!

extension VS Code


Baca juga : Praktik menginstall XAMPP - server lokal pemrograman PHP

Indikator Pencapaian Kompetensi Menginstall extension VS Code

  1. Melakukan konfigurasi Visual studio code agar dapat optimal saat membuat aplikasi berbasis web dengan bahasa PHP
  2. Mengoperasikan Visual studio code untuk membuat aplikasi berbasis web dengan bahasa PHP

Tujuan Menginstall extension VS Code

Melalui kegiatan praktikum mengoperasikan Visual Studio Code untuk pemrograman PHP, anda dapat:
  1. Melakukan konfigurasi Visual studio code agar dapat optimal saat membuat aplikasi berbasis web dengan bahasa PHP dengan benar
  2. Mengoperasikan Visual studio code untuk membuat aplikasi berbasis web dengan bahasa PHP dengan tepat

Alat dan bahan

  1. Komputer
  2. Aplikasi Visual Studio Code yang sudah terinstall di komputer masing-masing

Langkah kerja : Menginstall extension Visual Studio Code

1. Hidupkan komputer masing-masing

Buka aplikasi Visual Studio Code. Ada 2 cara: pertama, melalui shortcut Visual Studio code yang ada di desktop dan kedua, melalui menu start->Visual Studio code folder -> Visual studio code (menu ini hanya ada di Windows 10). Pastikan juga komputer anda sudah terkoneksi dengan internet.

Klik ikon VSC pada desktop


Jendela VS Code sudah terbuka


2. Klik menu extension (1) pada Visual Studio code

Setelah itu, anda ketik Intelephense (2), maka akan terdapat banyak extension yang tersedia. Kalian klik tombol hijau Install (3) untuk memulai instalasi extension.

Klik ikon ektensi di samping kiri interface


Setelah selesai dengan Intelephense, ketik lagi untuk mencari extension PHP Debug. Klik tombol hijau Install untuk memulai instalasi extension.

Langkah selanjutnya install Extension Auto close tag dan auto rename tag. Cara dan prosedurnya sama dengan langkah diatas. Cukup mudah dan saya yakin kalian bisa!

Beres...

3. Menguji extension Visual Studio Code

1. Buatlah file baru melalui menu File->New File

Selain menggunakan menu diatas, kamu dapat langsung membuat file baru dengan shortcut ctrl + n. Setelah itu, langsung simpan dengan cara klik menu file -> save. Berinama index dan simpan difolder yang telah disepakati. Oiya, gunakan shortcut ctrl + s untuk menghemat tenaga, sama aja kok!

Membuat file baru dan menyimpannya langsung


Ketik kode HTML dibawah ini menggunakan Visual Studio Code.

<html>
<head>
<title>HTML Tutorial/title>
</head>
<body>
<h2>Dokumen HTML Sederhana</h2>
HTML- <i>Hyper Text Markup Language</i>
<p>
Salam:<br> <a href="https://www.rsetiawan.com " target="_blank"> Rudy Setiawan</a>
<p>
Oleh: <b>Rudy Setiawan</b>
<br>&copy;2013 Rsetiawan
<br>Protected by: copyscape
</body>
</html>

Silahkan diamati dan laporkan hasilnya melalui laporan praktikum

Tugas Praktik

  1. Kerjakan praktikum diatas dengan seksama dan teliti
  2. Buatlah laporan praktikum untuk kegiatan menginstall LARAGON bahasa pemrograman PHP

Prosedur pengiriman tugas praktik

  1. Simpan tugas-tugas dengan format penamaan : nama_kelas_nama_tugas (contoh: rudy_XTKJ_praktik menginstall LARAGON bahasa pemrograman PHP)
  2. Kumpulkan hasil pekerjaan melalui ketua kelas ATAU kemudian Upload hasil tugasmu melalui link ini ==> upload tugas
  3. Selamat bekerja
 

Start typing and press Enter to search