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...
Ekstensi dan Settingan Visual Studio Code Untuk Ngoding Codeigniter

Ekstensi dan Settingan Visual Studio Code Untuk Ngoding Codeigniter


Halo Sobat Teknisi, Keberadaan ekstensi sangat membantu programmer dalam mempercepat menulis kode program. Visual Studio Code memiliki marketplace, dan berisi kumpulan plugin yang dapat diinstal ke teks editor untuk membuatnya lebih powerfull. Bagi pengguna Windows dapat menampilkan jendela ekstensi dengan Ctrl+Shift+X.

Berikut ini adalah daftar ekstensi Visual Studio Code terutama bagi pengembang frontend yang menggunakan Codeigniter, Bootsrap.

1. Auto Rename Tag

Ekstensi ini memungkinkan untuk mengganti tag <ini-tag></ini-tag> secara otomatis jika tag pembukanya diganti. Bayangkan jika kita memiliki kode program yang banyak dan panjang maka untuk mencari tag nya juga memerlukan waktu serta tenaga. Jadi dengan kita menggunakan ekstensi ini tidak perlu untuk mencari ujung dari tag yang akan diubah tersebut, cukup mencari head tag nya maka ujung dari tag juga otomatis telah diubah.

Untuk mendapatkan ekstensi bisa menggunakan link di bawah ini:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

2. IntelliSense for CSS class names in HTML

Menurut dari deskripsi ekstensinya, Ekstensi Visual Studio Code yang menyediakan pelengkapan nama kelas CSS untuk atribut kelas HTML berdasarkan definisi yang ditemukan di ruang kerja Anda atau file eksternal yang direferensikan melalui elemen tautan.

Ekstensi ini dapat ditemukan di sini:
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
 

3. Live Server

Ekstensi ini berfungsi sebagai web server lokal di komputer kita, mirip-mirip seperti XAMPP jika di Windows.

Sobat bisa mendapatkannya di sini:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


4. One Dark Pro

Ekstensi ini merupakan tema yang menyerupai kode editor Atom bagi Sobat yang suka tema gelap-gelapan bisa untuk menginstall ekstensi ini.

https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

5. open in browser

Saat menulis kode kita juga perlu melihat tampilannya akan seperti apa, ekstensi ini dapat dengan mudah membuka dokumen yang sedang kita tulis kodenya dibuka di browser dengan mengklik kanan lalu open in default browser. Maka browser akan menampilkan tampilan dokumen yang sedang kita develop.
 
Berikut ini adalah shortcut yang bisa digunakan untuk membuka berdasarkan default browser atau browser lain yang terinstal di komputer.
 
Key Command
Alt + B open in default browser
Shift + Alt + B open in specified browser
 
Sobat bisa mendapatkan ekstensinya di bawah ini:
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

6. PHP intellisense for codeigniter

Ekstensi yang khusus untuk framework CodeIgniter, cara kerjanya menyajikan prediksi kata saat menulis program dengan CI.

https://marketplace.visualstudio.com/items?itemName=small.php-ci


7. PHP Intelephense

Intelephense adalah server bahasa PHP berkinerja tinggi yang dikemas penuh dengan fitur-fitur penting untuk pengembangan PHP yang produktif.
 
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
 
Begitu temen-temen ekstensi yang dapat Sobat instal di Visual Studio Code untuk ngoding Codeigniter.

Settingan VSCode Untuk Ngoding Codeigniter


1. Menonaktifkan PHP Suggest Basic

Karena tadi di atas kita sudah menginstall ekstensi PHP Intelephense maka kita perlu mendisable PHP Suggest bawaan dari VSCode jadi kita hanya memaksimalkan dari kinerja ekstensi

Cara setting VSCode Menonaktifkan PHP Suggest Basic:
 
Pilih File >> Preferensces >> Setting atau cara cepatnya Ctrl+,
 
Jika sudah masuk di setting nya ketikkan php maka akan muncul PHP > Suggest: Basic lalu unchek
 

2.  Nayalakan Format On Save

Kode program jika dilihat sangatlah membosankan karena hampir semuanya berisi baris kode, namun jika tampilan kodenya rapi merupakan daya tarik tersendiri dan juga kita tidak bingung saat melakukan debugging. Format On Save pada VSCode berfungsi merapikan baris kode yang kita buat setelah kita melakukan save.

Cara setting VSCode menyalakan Format On Save:

Kembali ke setting seperti petunjut pada nomor 1 di atas,

Jika sudah masuk di setting nya ketikkan format on save maka akan muncul Editor: Format On Save lalu kita checklist
 

Saya kira sekian artikel kali ini kurang lebihnya mohon maaf, semoga dapat bermanfaat. Apabila Sobat memiliki rekomendasi ekstensi yang lain untuk VSCode jangan ragu menuliskannya di komentar.
 
Jangan lupa juga untuk membagikan ke teman yang lainnya juga, terimakasih.
Mengatasi Tampilan Visual Stuido Code yang Hitam

Mengatasi Tampilan Visual Stuido Code yang Hitam

 
 
Visual Studio Code merupakan salah satu kode editor kesukaan para programmer dikarenakan fitur yang dibawanya mempermudah proses pengkodingan sebuah program.
 
Baca juga: Download Sublime Text 3 Full Gratis
 
Sobat Teknisi sangat disarankan untuk mencoba memasang kode editor ini ke leptop atau komputer milik Sobat sendiri dan rasakan sensasinya.
 
Pada artikel kali ini akan dibahas mengenai masalah yang bisa saja dijumpai oleh beberapa Sobat yang telah menginstal VSCode namun menggunakan OS Windows 7.
 
Pertama kali membuka VSCode ini akan dihadapkan dengan tampilan Welcome, namun kali ini tampilan pesan Welcome tersebut tidak muncul malah yang muncul hanyalah warna hitam atau blank screen.
 
Hal ini, dikarenakan pada Sistem Operasi Windows 7 spesifikasi yang dibutuhkan untuk memasang Visual Studio Code adalah .NET Framework 4.5.2, namun secara default .NET Framework Windows 7 adalah versi .NET Framework 3.5.
 
Baca juga: Download .NET Framework Offline Installer
 
Solusi untuk mengatasi masalah tersebut adalah dengan memasangkan .NET Framework terbaru pada Windows 7. Namun, pada kasus tertentu terdapat solusi lain yang dapat dilakukan untuk mengatasi permasalahan tersebut, berikut adalah caranya:
 
1. Klik kanan pada shortcut Visual Studio Code, lalu pilih Properties.
 
2. Pada jendela properties Visual Studio Code pilih Shortcut.
 
3. Kemudian tambahkan --disable-gpu setelah penutup petik dua (")
 
"C:\Users\KRESNA\AppData\Local\Programs\Microsoft VS Code\Code.exe" --disable-gpu 
 
Atau bisa lihat contohnya di gambar bawah ini:
 

4. Pilih Ok
 
Dan jika diperlukan untuk merestart komputer Sobat. Begitu temen-temen artikel kali ini, semoga dapat membantu menyelesaikan masalah yang sedang dihadapi. Jangan lupa untuk membagikan artikel ini ke temen yang lain supaya ilmunya lebih berkah. Terimakasih, wassalam...
Langganan: Postingan (Atom)