Tutorial Insomnia: Solusi Mudah untuk Query Parameters Seperti di Postman

Tutorial Insomnia: Solusi Mudah untuk Query Parameters Seperti di Postman


Halo semuanya! Selamat datang kembali di blog Teknisi Serba Bisa. Pada kesempatan kali ini, saya akan membahas topik yang mungkin sudah sering Anda temui jika Anda bekerja dengan API, yaitu penggunaan query parameters. Jika Anda pernah menggunakan Postman, Anda pasti tahu betapa mudahnya menambahkan query parameters ke dalam URL API Anda. Namun, bagaimana jika Anda ingin menggunakan Insomnia sebagai alternatif? Sayangnya, fitur query parameter tidak tersedia secara langsung di Insomnia. Tapi jangan khawatir! Ada solusi yang sangat mudah dan efektif untuk mengatasi masalah ini.




Mengapa Memilih Insomnia?

 

Insomnia adalah alat yang kuat untuk mengelola dan menguji API, dengan antarmuka yang sederhana dan ringan. Meskipun tidak sepopuler Postman, Insomnia tetap menjadi pilihan yang menarik karena performanya yang cepat dan konsumsi sumber daya yang lebih rendah. Namun, satu hal yang mungkin menjadi kendala bagi pengguna Postman yang beralih ke Insomnia adalah absennya fitur query parameters yang tersedia secara langsung.

 

Solusi: Plugin Path Parameters

 

Untuk mengatasi masalah ini, Anda bisa menggunakan plugin bernama Path Parameters yang dikembangkan oleh Gregory Schier. Plugin ini memungkinkan Anda menambahkan query parameters di Insomnia dengan cara yang sangat mirip seperti di Postman. Berikut adalah langkah-langkah mudah untuk menginstal dan menggunakan plugin ini:

 

Instalasi Plugin Path Parameters

 

  1. Buka Insomnia di komputer Anda.
  2. Klik pada tab 'Plugins' di bagian atas layar.
  3. Di kotak pencarian, ketik 'insomnia-plugin-path-parameters'.
  4. Setelah plugin ini muncul, klik 'Install' dan plugin akan otomatis terpasang.

 

Menggunakan Path Parameters

 

Setelah plugin terpasang, Anda dapat mulai menggunakannya. Misalnya, jika Anda ingin menambahkan parameter id ke URL API Anda, Anda bisa menambahkannya di bagian yang telah disediakan oleh plugin ini.

 

Plugin ini akan otomatis mengelola query parameters sesuai dengan yang Anda masukkan, sama seperti yang Anda lakukan di Postman.

 

Kesimpulan

 

Dengan adanya plugin Path Parameters, Insomnia kini menjadi semakin user-friendly dan mampu bersaing dengan Postman dalam hal kemudahan penggunaan, terutama untuk penambahan query parameters. Jadi, jika Anda ingin mencoba alternatif baru yang lebih ringan dan cepat, Insomnia dengan plugin ini bisa menjadi pilihan tepat. Jangan ragu untuk mencobanya dan lihat sendiri betapa mudahnya pengelolaan API dengan Insomnia!

 

Terima kasih telah membaca artikel ini di blog Teknisi Serba Bisa. Semoga informasi yang saya bagikan bermanfaat bagi Anda. Jika Anda memiliki pertanyaan atau ingin berbagi pengalaman, jangan ragu untuk meninggalkan komentar di bawah. Sampai jumpa di artikel selanjutnya!


Link Plugin : https://insomnia.rest/plugins/insomnia-plugin-path-parameters

Fungsi PHP strip_tags untuk Keamanan dan Kebersihan Data

Fungsi PHP strip_tags untuk Keamanan dan Kebersihan Data


Halo, pembaca setia Teknisi Serba Bisa! Kali ini, kita akan membahas sebuah fungsi penting dalam pemrograman PHP yang sering digunakan untuk meningkatkan keamanan dan kebersihan data strip_tags. Bagi Anda yang sering bergelut dengan pengembangan web, pasti sudah tidak asing lagi dengan fungsi yang satu ini. Namun, bagi yang baru terjun ke dunia PHP, mari kita pelajari bersama fungsi ini secara lebih mendalam.

 

Apa itu strip_tags?

 

strip_tags adalah sebuah fungsi dalam PHP yang digunakan untuk menghapus semua tag HTML dan PHP dari sebuah string. Ini sangat berguna ketika Anda ingin membersihkan data input dari pengguna, terutama ketika data tersebut berasal dari formulir (form) yang diisi secara bebas. Menghapus tag-tag ini dapat membantu mencegah serangan XSS (Cross-Site Scripting) dan menjaga tampilan konten agar tetap rapi.


Bagaimana Cara Kerjanya?


Sintaks dasar dari fungsi strip_tags adalah sebagai berikut:


strip_tags(string $string, array|string|null $allowed_tags = null): string


$string dalam hal ini artinya string yang ingin Anda bersihkan dari tag HTML dan PHP. $allowable_tags dalam hal ini opsional Daftar tag yang diperbolehkan tetap ada dalam string.


Berikut adalah contoh penggunaan sederhana dari strip_tags:

 

<?php
$input = "<p>Hello, <b>world!</b> <a href='https://teknisiserbabisa.com'>Click here</a></p>";
$output = strip_tags($input);
echo $output;
?>


Pada contoh di atas, strip_tags akan menghapus semua tag HTML, sehingga hasil yang dicetak adalah:


Hello, world! Click here


Mengizinkan Tag Tertentu

 

Terkadang, Anda mungkin ingin mempertahankan beberapa tag HTML untuk keperluan format. Anda bisa menggunakan parameter kedua dari strip_tags untuk menentukan tag yang diperbolehkan:


<?php
$input = "<p>Hello, <b>world!</b> <a href='https://teknisiserbabisa.com'>Click here</a></p>";
$output = strip_tags($input, '<b><a>');
echo $output;
?>


Pada contoh ini, tag <b> dan <a> tidak akan dihapus, sehingga hasilnya adalah:


Hello, world! Click here


Keuntungan Menggunakan strip_tags


  1. Keamanan: Menghapus tag berbahaya seperti <script> dapat mencegah serangan XSS.
  2. Kebersihan Data: Memastikan data yang ditampilkan tidak mengandung tag HTML yang tidak diinginkan.
  3. Kesesuaian Tampilan: Menghindari masalah tampilan yang disebabkan oleh tag HTML yang tidak tertutup dengan benar atau tidak sesuai konteks.

 

 Kesimpulan

 

Fungsi strip_tags dalam PHP adalah alat yang sangat berguna untuk meningkatkan keamanan dan kebersihan data input dari pengguna. Dengan menggunakan strip_tags, Anda dapat menghilangkan tag HTML dan PHP yang tidak diinginkan dari string, serta menjaga konten tetap aman dan rapi.

 

Semoga artikel ini bermanfaat bagi Anda yang ingin meningkatkan keterampilan dalam pemrograman PHP. Jika Anda merasa artikel ini menarik dan bermanfaat, jangan ragu untuk membagikannya kepada teman-teman atau rekan kerja Anda. Terima kasih telah membaca Teknisi Serba Bisa, sampai jumpa di artikel selanjutnya!

 

Bagikan Artikel Ini Jika Bermanfaat!

 

Selalu ingat, berbagi ilmu adalah salah satu cara terbaik untuk saling membantu dan berkembang bersama. Mari kita jadikan komunitas kita lebih kuat dan lebih pintar!

 

Referensi:

  • https://www.php.net/manual/en/function.strip-tags.php
  • https://stackoverflow.com/questions/36247382/remove-html-tags-from-strings-on-laravel-blade
     
Cara Import File SQL di DBeaver

Cara Import File SQL di DBeaver

Halo, sobat teknisi!


Pada artikel kali ini, kita akan membahas cara import file SQL di DBeaver. DBeaver adalah sebuah database manager yang dapat digunakan untuk mengelola berbagai jenis database, termasuk MySQL, PostgreSQL, dan Oracle.


Import file SQL dapat digunakan untuk memasukkan data dari file ke dalam database. Data yang dapat diimport dapat berupa data tabel, view, function, atau procedure.


Berikut adalah langkah-langkah untuk import file SQL di DBeaver



Setelah mengikuti langkah-langkah pada video di atas, data dari file SQL akan diimport ke database.


Demikianlah cara import file SQL di DBeaver. Semoga bermanfaat!

Membuka Command Pallate VSCode

Membuka Command Pallate VSCode


Halo, sobat teknisi!

 

Dalam artikel kali ini, kita akan membahas cara membuka Command Palette pada VSCode. Command Palette adalah fitur yang memungkinkan pengguna untuk mengakses berbagai perintah yang tersedia di VSCode. Perintah-perintah ini dapat digunakan untuk berbagai keperluan, seperti menjalankan perintah, membuka file, atau mengubah pengaturan.

 

Untuk membuka Command Palette, pengguna dapat menggunakan salah satu dari metode berikut:

 

  • Tekan Ctrl+Shift+P pada keyboard.
  • Klik menu View > Command Palette.
  • Klik ikon Command Palette di sudut kanan atas jendela VSCode.

 

Setelah Command Palette terbuka, pengguna dapat mulai memasukkan perintah yang ingin dijalankan. Perintah dapat dimasukkan dengan mengetik nama perintah atau menggunakan kata kunci. Misalnya, untuk menjalankan perintah New File, pengguna dapat mengetik New File atau file:new.

 

Selain itu, pengguna juga dapat menggunakan ikon yang tersedia di Command Palette untuk mengakses perintah tertentu. Misalnya, untuk membuka file baru, pengguna dapat klik ikon New File.

 

Berikut adalah beberapa contoh perintah yang dapat dijalankan di Command Palette:

 

  • New File : Menjalankan perintah New File untuk membuat file baru.
  • Open File : Menjalankan perintah Open File untuk membuka file yang ada.
  • Save : Menjalankan perintah Save untuk menyimpan file yang terbuka.
  • Save All : Menjalankan perintah Save All untuk menyimpan semua file yang terbuka.
  • Run : Menjalankan perintah Run untuk menjalankan file yang berisi kode.
  • Debug : Menjalankan perintah Debug untuk mendebug file yang berisi kode.

 

Semoga dengan artikel ini, Anda dapat memahami cara membuka Command Palette pada VSCode. Selamat mencoba!

 

Encode Base64 dengan JavaScript

Encode Base64 dengan JavaScript

Halo temen-temen, apa kabar? semoga semua dalam keadaan baik-baik saja. Pada kesempatan ini akan membahas mengenai encode Base64 menggunakan javascript.


Untuk demo dari praktikum encoce ada di bawah.

 

Perlu diketahui, javascript memiliki fungsi bawaan btoa() dan atob() fungsi ini terdapat pada fitur Web Api, untuk lebih jelasnya nanti saya akan berikan link di bagian referensi.


fungsi btoa() digunakan mendekode string data yang telah dikodekan menggunakan pengkodean Base64. sedangkan fungsi atob() digunakan untuk membuat string ASCII berenkode Base64 dari string biner (yaitu, string di mana setiap karakter dalam string diperlakukan sebagai byte data biner).


Kita akan menggunakan fungsi btoa()untuk praktikum ini.

 

Baca juga : Decode Base64 dengan JavaScript


Sebelum ke koding saya akan menjelaskan bagaimana nanti cara kerja nya, yang pertama akan ada field input tempat memasukkan string text, lalu setelah button encode diklik akan menampilkan hasil encode base64 dari string yang telah di inputkan.


Dari penjelasan di atas, setidaknya kita memerlukan :

  • Input type text
  • Button
  • Result Area, bisa sebuah tag <div> atau tag <p>


Pada praktikum ini saya menggunakan <p> sebagai result area.


Berikut adalah kodingan HTML lengkapnya.


<html>
 <head></head>
 <body>
  <input autocomplete="off" id="inputB64" type="text"> <button id="btnEncode" type="button">Encode</button>
  <p id="resultEncode"></p>
 </body>
</html>

 

Lalu tambahkan kode JavaScript berikut.


// prepare variable
const inputToEncode = document.getElementById("inputB64");
const btnEncode = document.getElementById("btnEncode");
const resultArea = document.getElementById("resultEncode");
let encodedText = '';

// event ketika button encode dipencet
btnEncode.addEventListener("click", encodeInput);

// fungsi encode
function encodeInput(e) {
	// biar tidak lari ke halaman lain, karena btn pakenya tag anchor
    e.preventDefault();
    // cek apakah inputan isi atau kosong
    if (inputToEncode.value != '') {
    	// encode text
        encodedText = window.btoa(inputToEncode.value);
        // tampilkan ke result
        resultArea.innerHTML = encodedText;
        // scroll ke result
        window.scroll(0, resultArea.offsetTop);
    }
}

 

Penjelasan koding sudah saya letakkan di dalamnya ya. Berikut adalah demo dari encode base64 menggunakan javascript


Demo


Hasil :


Mungkin cukup sampai disini artike kali ini, semoga dapat bermanfaat, terima kasih.

 

Referensi :

  • https://developer.mozilla.org/en-US/docs/Web/API/btoa
  • https://developer.mozilla.org/en-US/docs/Web/API/atob
Decode Base64 dengan JavaScript

Decode Base64 dengan JavaScript

Halo temen-temen, apa kabar? semoga semua dalam keadaan baik-baik saja. Pada kesempatan ini akan membahas mengenai decode Base64 menggunakan javascript.


Untuk demo dari praktikum ini ada di bawah.


Perlu diketahui, javascript memiliki fungsi bawaan btoa() dan atob() fungsi ini terdapat pada fitur Web Api, untuk lebih jelasnya nanti saya akan berikan link di bagian referensi.


fungsi btoa() digunakan mendekode string data yang telah dikodekan menggunakan pengkodean Base64. sedangkan fungsi atob() digunakan untuk membuat string ASCII berenkode Base64 dari string biner (yaitu, string di mana setiap karakter dalam string diperlakukan sebagai byte data biner).


Kita akan menggunakan fungsi btoa()untuk praktikum ini.


Baca juga : Encode Base64 dengan JavaScript


Sebelum ke koding saya akan menjelaskan bagaimana nanti cara kerja nya, yang pertama akan ada field input tempat memasukkan encoded text base64, lalu setelah button decode diklik akan menampilkan hasil decode dari string base64 yang telah di inputkan.


Dari penjelasan di atas, setidaknya kita memerlukan :

  • Input type text
  • Button
  • Result Area, bisa sebuah tag <div> atau tag <p>


Pada praktikum ini saya menggunakan <p> sebagai result area.


Berikut adalah kodingan HTML lengkapnya.


<html>
 <head></head>
 <body>
  <input autocomplete="off" id="inputB64" type="text"> <button id="btnDecode" type="button">Decode</button>
  <p id="resultDecode"></p>
 </body>
</html>

 

Lalu tambahkan kode JavaScript berikut.


// prepare variable
const inputToDecode = document.getElementById("inputB64");
const btnDecode = document.getElementById("btnDecode");
const resultArea = document.getElementById("resultDecode");
let decodedText = '';

// event ketika button decode dipencet
btnDecode.addEventListener("click", decodeInput);

// fungsi decode
function decodeInput(e) {
	// biar tidak lari ke halaman lain, karena btn pakenya tag anchor
    e.preventDefault();
    // cek apakah inputan isi atau kosong
    if (inputToDecode.value != '') {
    	// decode text
        decodedText = window.atob(inputToDecode.value);
        // tampilkan ke result
        resultArea.innerHTML = decodedText;
        // scroll ke result
        window.scroll(0, resultArea.offsetTop);
    }
}

 

Penjelasan koding sudah saya letakkan di dalamnya ya. Berikut adalah demo dari decode base64 menggunakan javascript


Demo


Hasil :


Mungkin cukup sampai disini artike kali ini, semoga dapat bermanfaat, terima kasih.

 

Referensi :

  • https://developer.mozilla.org/en-US/docs/Web/API/btoa
  • https://developer.mozilla.org/en-US/docs/Web/API/atob
Cara Merestart VSCode Tanpa Mencet Close

Cara Merestart VSCode Tanpa Mencet Close

Halo temen-temen, apa kabar? semoga semua dalam keadaan baik-baik saja. VSCode adalah teks editor favorit karena banyaknya resource yang menyediakan tutorial cara penggunaannya, selain itu teks editor ini bisa dibilang sangat handal untuk kebutuhan coding.

 

Seperti yang sudah dibahas tadi, karena banyak resource memudahkan kita untuk melakukan kustom pada VSCode sesuai kebutuhan aplikasi yang sedang kita develop. Misalkan saja ekstensi, kita perlu menginstalnya untuk kebutuhan utility entah itu mengetes API, membuat tampilan baris kode lebih menarik, semua bisa dilakukan dengan menginstal ekstensi. Beberapa ekstensi perlu tindakan merestart VSCode agar konfigurasi dari ekstensi dapat berjalan sempurna.



Siapa nih dari temen-temen yang mencoba untuk merestart VSCode masih menggunakan tombol close pada pojok kanan atas? ternyata ada cara agar tangan kita tidak repot-repot pindah dari keyboard, yup pakai command pallate.


Caranya yaitu dengan masuk ke command pallate.


Lalu ketikkan dan pilih Reload Window.


Selesai, VSCode kita sudah terestart sendirinya.


Cukup mudah kan teman-teman, mungkin sampai disini dulu artikel kita kali ini. Semoga membantu produktivitas ngoding kalian, terima kasih.

Membuka VSCode Dari Command Prompt

Membuka VSCode Dari Command Prompt

Halo Sobat Teknisi, apa kabar? semoga semua tetap semangat dan dalam kondisi yang baik-baik saja. Terimakasih masih setia berkunjung ke blog ini.


Pernahkan Sobat melihat seseorang membuka VSCode dari Command Prompt (CMD) dan langsung mncul semua file file atau folder nya di layar jendela VSCode?


Cara simpelnya dengan membuka CMD lalu mengetikkan berikut:

 

code .
// atau jika ingin membuka file terteu
code nama_file.ekstensi


Tapi pada kasus ini kita akan mencoba membuka mulai dari mencari foldernya.


Pertama tama, kita cari lokasi direktori semua berkas yang akan kita buka di VSCode nya, untuk contoh kasusnya seperti pada gambar di bawah ini:

 

Carilah lokasi direktori yang akan dibuka nantinya

Setelah ketemu, kita drag lokasi direktorinya. Lalu kita ketikkan cmd dan tekan enter,


 

Akan muncul jendela Command Prompt (CMD) yang langsung merujuk ke lokasi direktori yang dipilih tadi. Dan lanjutkan untuk mengetikkan code . tunggulah sebentar maka jendela VSCode akan terbuka.



Otomatis folder dan file yang dibuka merupakan isi dari folder yang kita pilih tadi, lihat hasilnya di gamabar bawah ini:



Begitu temen-temen artikel "Membuka VSCode Dari Command Prompt" jika dirasa menarik silahkan untuk membagikan ke temen-temen yang lainnya melalui tombol share di bawah ini, terimakasih semoga bermanfaat.

Persiapan Pemrograman C/C++ Visual Studio Code

Persiapan Pemrograman C/C++ Visual Studio Code

 
Halo Sobat Teknisi, apa kabar? semoga semua dalam kondisi baik-baik saja.
 
Jika dalam postingan sebelumnya membahas ekstensi dan settingan Visual Studio Code untuk Codeigniter untuk kali ini kita akan bahas mengenai pemrograman bahasa C/C++ dengan menggunakan teks editor Visual Studio Code.

Baca juga: Ekstensi dan Settingan Visual Studio Code Untuk Ngoding Codeigniter
 
Sebenarnya untuk pemrogaraman bahasa C hanya membutuhkan dua alat, yaitu compiler dan teks editor (VSCode, Sublime Text, dll).
 
Teks editor adalah alat atau program yang digunakan untuk menulis kode dari suatu program. Sedangkan compiler merupakan program yang digunakan untuk menerjemahkan bahasa C ke dalam bahasa mesin sehingga dapat dimengerti oleh komputer.
 
Ada juga teks editor yang sudah terdapat pula compilernya, program tersebut dinamakan IDE kependekan dari Integreted Development Environment.
 

1. Persiapkan Teks Editor

Ada banyak sekali pilihan teks editor yang bisa digunakan untuk menulis program C contohnya Notepad, Notepad++, Gedit, Geany, Mousepad, Kate, Atom, VS Code, Sublime Text, dsb. 

Sesuai dengan judul artikel ini maka gunakan Visual Studio Code. Sobat bisa download di link bawah ini.


2. Compiler

Compiler adalah program yang berfungsi untuk menerjemahkan bahasa C menjadi bahasa mesin, shingga dapat dimengerti oleh komputer. Compiler C juga ada banyak jenisnya, ada GCC (GNU C Compiler), Clang, lcc, LuxCC, Tiny C Compiler, Borland Turbo C, VBCC, XL C, Small-C, dll.
 
Pada kesempatan ini kita mencoba untuk menginstall MinGW sebagai compiler bahasa C nya.
 
 
Jika sudah didownload maka jalankan file mingw-get-setup.exe dengan cara klik kanan lalu run as administrator.
 
Baca juga : Cara Menghindari Block Saat Akan Menginstall Program
 
Installer ini membutuhkan koneksi internet ya Sobat semua

  • Setelah jendela instalasi terbuka klik install
  • Selanjutnya akan diminta menentukan lokasi install, taruh saja di C:\MinGW.
  • Berikutnya, MinGW akan mendownload paket yang dibutuhkan. Tungglah sampai prosesnya selesai, jika sudah klik Continue.
 
Berikutnya, kita menentukan paket yang akan di install.
 
Silahkan pilih mingw32-gcc-v3-core-bin untuk compiler bahasa C. Caranya klik kanan, kemudian pilih Mark for Installation.
 
Setelah itu, masuk ke menu Installation dan pilih Apply Changes.
masuk ke menu Installation dan pilih Apply Changes

Setelah itu tunggulah sampai paket yang sudah kita pilih tadi selesai di download. Jangan khawatir proses instalasi akan berjalan otomatis setelah selesai download.

Buka eksplorer arahkan ke direktori tempat menginstall MinGW tadi lalu buka folder bin untuk melanjutkan ke step berikutnya. Contoh direktori lengkapnya sebagai berikut: C:\MinGW\bin

Terlihat di sana ada program dengan nama gcc, program inilah yang akan kita butuhkan untuk mengkompilasi program C.

Program ini akan dieksekusi melalui CMD, tapi saat ini komputer kita belum mengenali perintah gcc.

Agar perintah gcc dapat dikenali, kita harus menambahkannya ke dalam path pada environtment variable.

Jika sudah buka start lalu ketik system env, lihat gambar di bawah ini.

Setelah terbuka system environment kemudian masuk ke tab Advenced dan klik Environtment Variables
 
Pada System Variables pilih Path, kemudian klik Edit.

Tambahkan path baru dengan mengklik New, lalu masukan alama folder gcc yakni C:\MinGW\bin

Terakhir klik OK.

3. Persiapan Untuk Visual Studio Code


Setelah selesai melakukan instalasi MinGW pada perangkat Sobat, masih ada pekerjaan lagi selanjutnya. Kali ini khusus untuk teks editor Visual Studio Code nya. Pertama-tama silahkan buka aplikasi VSCode milik Sobat lalu buka jendela ekstensi dengan Ctrl+Shift+X.

Baca juga: Ekstensi dan Settingan Visual Studio Code Untuk Ngoding Codeigniter

Sobat harus menginstall bebearapa ekstensi berikut ini supaya nanti bisa ngoding lalu di run langsung dari VSCode nya.

C/C++

Ekstensi ini berfungsi menyediakan semua dukungan bahasa untuk C / C ++ ke Visual Studio Code, termasuk fitur seperti IntelliSense dan debugging.

Untuk mendapatkannya Sobat bisa gunakan link dibawah ini.
Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

Code Runner

Dengan menggunakan ekstensi ini bisa menjalankan beberapa bahasa pemrograman dengan menggunakan beberapa perintah khusus. Bahasa yang disupport diantaranya: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, dan beberapa kustomisasi bahasa yang telah dilakukan.
 
Untuk mendapatkannya Sobat bisa download dan pasang di VSCode yang bersumber dari link berikut.
Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Setelah kedua ekstensi tersebut sudah terpasang ada sedikit settingan yang harus Sobat lakukan.

Setting Visual Studio Code untuk Bahasa C/C++


Pilih File >> Preferensces >> Setting atau cara cepatnya Ctrl+,
 
Jika sudah masuk di setting nya ketikkan run, lihat gambar di bawah ini untuk lebih jelas langkah settingnya.
 Checklist semua yang ada didalam kotak merah tersebut.

Tiga hal yang perlu Sobat cari:
  1. Code-runner : Run In Terminal. Ini diperlukan agar saat kita menjalankan program dengan Code Runner dapat langsung dijalankan di terminal yang ada di Visual Studio Code.
  2. Code-runner : Save All Files Before Run. Pengaturan ini berfungsi agar saat kita menjalankan program yang telah kita buat, seluruh file kita akan otomatis tersimpan.
  3. Code-runner : Save File Before Run. Hal ini berfungsi agar saat menjalankan program, file yang dibuka saat ini otomatis tersimpan.

Catatan:
Saat melakukan instalasi ekstensi C/C++ tidak terinstal malah hanya tampil notifikasi sedang mendownload saja, Sobat boleh cancel aktivitas tersebut lalu install secara manual menggunakan VSIX...

Contohnya seperti dibawah ini,

Prosesnya hanya sampai di download saja, dan progres bar nya tidak menunjukkan penambahan.

Mengatasi Stuck Downloading C/C++ Visual Studio Code

Langkah pertama buka tab ekstensi dari C/C++ lalu scroll ke bawah sampai ketemu Offline Instalation.

Disitu terlihat ada file yang bsia didownload secara manual lalu kita pasangkan melalui VSIX..

Buka link berikut ini untuk download C/C++ berekstensi .vsix VSCode
Setalah itu pilih file yang sesuai dengan pertimbangan jenis sistem operasi serta versi VSCode Sobat.

Jika telah di download, lakukan instalasi dengan pilih titik tiga yang terletak di bagian atas tab ekstensi VSCode, lalu pilih Instal from VSIX, lihat gambar dibawah ini.


Selesai.

Cara Menjalankan Code Runner di VSCode


Ada dua cara untuk menjalankannya,yang pertama dengan mengklik ikon seperti 'play' dipojok kanan atas VSCode.

Atau bisa menggunakan kombinasi shorcut Ctrl + Alt + N untuk run kode C/C++ yang langsung ditampilkan di terminal VSCode.

Artikel ini mengambil dari beberapa referensi di web, beberapa yang bisa saya tulisakan sebagai berikut:
  • https://www.petanikode.com/c-windows/
  • https://www.sepitkom-info.com/2020/02/cara-install-visual-studio-code-untuk.html

Dan semua pihat terkait yang tidak bisa saya sebutkan, saya ucapkan terimakasih semoga dapat bermanfaat bagi kita semua.

Saya kira sekian artikel "Persiapan Pemrograman C/C++ Visual Studio" silahkan share ke teman yang lain supaya jika mengalami permasalahan yang sama mereka bisa mengatasinya juga. Wassalam.
Show Hide Password HTML CSS Javascript

Show Hide Password HTML CSS Javascript

 
Halo Sobat Teknisi, apa kabar? semoga semua baik-baik saja. Terimakasih telah berkunjung ke blog ini, semoga tulisan yang ada di sini dapat menjawab pertanyaan Sobat saat ini.
 
Pada artikel kali ini akan dibahas cara membuat fitur show hide password.
 
Sebelum praktek, kita harus menyiapkan Jquery terlebih dahulu. Jquery adalah library dari Javascript Sobat bisa mendownload atau memanggilnya menggunakan internet. Tetapi pada kesempatan kali ini kita akan menggunakan jquery secara online.
 
Berikut ini adalah kode HTML nya:
<body>
  <div class="body-form">
    <div class="form-content-user">
      <label for="password">Username</label>
      <input type="text" id="username" required autocomplete="off">
    </div>
    <div class="form-content-pass">
      <label for="password">Password</label>
      <input type="password" id="password" required autocomplete="off">
      <span id="togglePass"><span id="showPass">Show</span></span>
    </div>
        <button id="submit">Submit</button>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Perhatikan kodenya
<input type="password" id="password" required autocomplete="off">
<span id="togglePass"><span id="showPass">Show</span></span>

Yang menjadi fokus kita adalah id="" di setiap tag nya, ingat-ingat peletakan dan namanya. Karena id itulah yang akan kita panggil di script.

Setelah itu tambahkan CSS:
html {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f0f0f0;
}
.body-form {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-content-user {
  margin-bottom: 10px;
}
label{
  margin-bottom: 5px;
  display: block;
}
input {
  width: 100%;
  height: 25px;
  border: none;
}
input:focus {
  border: 1px solid #007bff;
}
#togglePass {
  background-color: #343a40;
  display: block;
  margin: 10px 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
}
button {
  width: 100%;
  background-color: #007bff;
  height: 30px;
  color: #fff;
}
 
Setelah itu tambahkan script, boleh langsung dimasukkan dalam HTML atau dibuat file sendiri dengan format .js lalu dipanggil di HTML nya. Berikut ini adalah script js nya:
$(document).ready(function(){
  $('#togglePass').on('click', function(event) {
    event.preventDefault();
    if ($('#password').attr("type") == "text") {
      $('#password').attr('type', 'password');
      $('#showPass').html('Show');
    } else if ($('#password').attr("type") == "password") {
      $('#password').attr('type', 'text');
      $('#showPass').html('Hide');
    }
  })
  $('#submit').on('click', function() {
    $(this).html('Loading..');
  })
})
 
Penjelasan script di atas,
$(document).ready(function(){
Jika di translate ke bahasa manusia kurang lebih artinya, "jquery jika dokumen siap maka jalankan fungsi ini". Fungsinya mana? jika dokumen telah siap maka semua semua script yang berada di dalam kurung kurawal {} akan dijalankan.
 
$('#togglePass').on('click', function(event) {
  event.preventDefault();
  if ($('#password').attr("type") == "text") {
    $('#password').attr('type', 'password');
    $('#showPass').html('Show');
  } else if ($('#password').attr("type") == "password") {
    $('#password').attr('type', 'text');
    $('#showPass').html('Hide');
  }
})
Jquery carikan id bernama togglePass lalu jika di klik jalankan fungsi ini:
  • Pada kondisi if pertama, jika id bernama password ber-atribut typenya text, ganti atributnya menjadi password, lalu carikan id bernama showPass tampilkan tulisan 'Show'.
  • Pada kondisi if kedua, jika id bernama password ber-atribut typenya password, ganti atributnya menjadi text, lalu carikan id bernama showPass tampilkan tulisan 'Hide'. 

 

$('#submit').on('click', function() {
  $(this).html('Loading..');
})
Sebenarnya script diatas tidak ada sangkut pautnya dengan show hide password, tapi bisa Sobat gunakan jika ingin membuat tampilan saat submit ada feedback nya, biar ada efek-efek nya gitu.

Sobat bisa cek demonya di bawah ini:

See the Pen Show Hide Password by Yusuf B (@yfbahtiar) on CodePen.


Begitu temen-temen cara membuat input password dapat dilihat dan ditutup isi fieldnya, hal ini sangat bermanfaat bagi user untuk mencegah kesalahan dalam menginput password.
 
Semoga dapat bermanfaat, jangan lupa untuk menekan tombol share di bawah ini supaya temen yang lain juga tidak ketinggalan informasi menarik dari blog teknisiserbabisa.com ini. Terimakasih, wassalam...
Langganan: Postingan (Atom)