One place for hosting & domains
      • Fast, Secure, Realiable

        Powerful shared hosting on enterprise hardware.


        • Easy control panel
        • 1-Click script install
        • SSD disk storage
        • Unlimited transfer
        • 24/7 technical support
        • 99% uptime guarantee
      • Unlimited Web Hosting

        All the Feature You Need
        In One Package

        Power and Stability Guaranteed

        Learn more  

        UNLIMITED WEB HOSTING

        63%

        OFF

        starting at

        $29/month

      • High performance SSD Server

        At vero eos et accusamus iusto odio dignissimos ducimus blanditiis.

        Sign Up Now!
      • GET THE DOMAIN
        YOU WANT


        FOR THE PRICE
        YOU LOVE

      Cara Menggunakan Parameter Kueri di Angular


      Pengantar

      Parameter kueri di Angular memungkinkan penyaluran parameter opsional di setiap rute dalam aplikasi. Parameter kueri berbeda dengan parameter rute biasa, yang hanya tersedia di satu rute dan tidak opsional (mis., /product/:id).

      Dalam artikel ini, kita akan merujuk contoh aplikasi yang menampilkan daftar produk. Kita akan menyediakan nilai-nilai opsional order dan price-range yang dapat dibaca dan dipatuhi komponen penerima. Nilai-nilai yang disediakan akan memengaruhi pengurutan dan penyaringan daftar produk.

      Menggunakan Parameter Kueri bersama Router.navigate

      Jika Anda mengarahkan ke rute secara imperatif menggunakan Router.navigate, Anda akan menyalurkan parameter kueri dengan queryParams.

      Dalam contoh, jika kita ingin mengarahkan pengunjung ke produk dengan daftar yang diurutkan berdasarkan popularitas, maka kodenya terlihat seperti ini:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      Ini akan menghasilkan URL yang terlihat seperti ini:

      http://localhost:4200/products?order=popular
      

      Anda juga dapat menyediakan beberapa parameter kueri. Dalam contoh, jika kita ingin mengarahkan pengunjung ke produk dengan daftar yang diurutkan berdasarkan popularitas dan disaring dengan kisaran harga yang mahal, maka kodenya terlihat seperti ini:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      Ini akan menghasilkan URL yang terlihat seperti ini:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Sekarang, Anda telah memahami cara menggunakan queryParams untuk mengatur parameter kueri.

      Mempertahankan atau Menggabungkan Parameter Kueri dengan queryParamsHandling

      Secara asali, parameter kueri hilang dalam tindakan navigasi selanjutnya. Untuk mencegah hal itu, Anda dapat mengatur queryParamsHandling ke 'preserve' atau 'merge'.

      Dalam contoh, jika kita ingin mengarahkan pengunjung dari halaman dengan parameter kueri { order: 'popular' }, ke halaman /users sekaligus mempertahankan parameter kueri, kita perlu menggunakan 'preserve':

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      Ini akan menghasilkan URL yang terlihat seperti ini:

      http://localhost:4200/users?order=popular
      

      Dalam contoh, jika kita ingin mengarahkan pengunjung dari halaman dengan parameter kueri { order: 'popular' }, ke halaman /users sekaligus menyalurkan parameter kueri { filter: 'new' }, kita perlu menggunakan 'merge':

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      Ini akan menghasilkan URL yang terlihat seperti ini:

      http://localhost:4200/users?order=popular&filter=new
      

      Catatan: Mempertahankan parameter kueri yang digunakan harus dilakukan dengan preserveQueryParams diatur ke true, tetapi sekarang tidak lagi digunakan dalam Angular 4+, yang diganti dengan queryParamsHandling.

      Sekarang, Anda telah memahami cara menggunakan queryParamsHandling untuk mempertahankan dan menggabungkan parameter kueri.

      Dalam contoh, alih-alih menggunakan arahan RouterLink untuk menavigasi ke rute, Anda akan menggunakan queryParams seperti ini:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      Dalam contoh, jika Anda ingin menggunakan parameter kueri 'preserve' atau 'merge' di navigasi selanjutnya, Anda akan menggunakan queryParamsHandling seperti ini:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Sekarang Anda memahami cara menggunakan queryParams dan queryParamsHandling bersama RouterLink.

      Mengakses Nilai-nilai Parameter Kueri

      Karena kita telah mengetahui cara menggunakan parameter kueri opsional ke suatu rute, mari kita lihat cara mengakses nilai-nilai ini pada rute yang dihasilkan. Kelas ActivatedRoute memiliki properti queryParams yang menghasilkan parameter kueri yang dapat dilihat dan tersedia dalam URL saat ini.

      Dengan URL rute berikut:

      http://localhost:4200/products?order=popular
      

      Kita dapat mengakses parameter kueri order seperti ini:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      Dalam log konsol, kita akan melihat objek params:

      Output

      { order: "popular" }

      Dan nilai params.order:

      Output

      popular

      Ada juga queryParamMap, yang menghasilkan sesuatu yang terlihat bersama objek paramMap.

      Dengan URL rute berikut:

      http://localhost:4200/products?order=popular&filter=new
      

      Kita dapat mengakses parameter kueri seperti ini:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Kita menggunakan operator sebaran objek di sini, dan ini adalah bentuk yang dihasilkan dari data dalam orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Sekarang, Anda telah memahami cara menggunakan queryParams dan queryParamMap untuk mengakses nilai-nilai pada rute yang dihasilkan.

      Kesimpulan

      Dalam artikel ini, Anda telah menggunakan beragam contoh untuk mengatur dan mengambil parameter kueri di Angular. Anda telah diperkenalkan pada queryParams dan queryParamsHandling bersama Router.navigate dan RouterLink. Anda juga telah diperkenalkan pada queryParams dan queryParamMap dengan ActivatedRoute.

      Jika Anda ingin mempelajari lebih lanjut tentang Angular, lihat laman topik Angular kami untuk proyek latihan dan pemrograman.



      Source link

      Cara Menggunakan Integrasi Git di Visual Studio Code


      Pengantar

      Visual Studio Code (VS Code) telah menjadi salah satu editor paling populer untuk pengembangan web. Editor ini memperoleh popularitas demikian banyak berkat fitur bawaannya, termasuk integrasi kontrol sumber, yang dinamai Git. Memanfaatkan kemampuan Git dari dalam VS Code dapat membuat alur kerja Anda lebih efisien dan tangguh.

      Dalam tutorial ini, Anda akan mendalami penggunaan Integrasi Kontrol Sumber di VS Code dengan Git.

      Prasyarat

      Untuk mengikuti tutorial ini, Anda membutuhkan hal berikut ini:

      • Git yang terinstal di mesin Anda. Untuk lebih detail mengenai cara melakukannya, tinjaulah tutorial Memulai dengan Git.
      • Versi terbaru Visual Studio Code yang terinstal di mesin Anda.

      Langkah 1 — Memahami Tab Source Control

      Hal pertama yang perlu dilakukan untuk memanfaatkan integrasi kontrol sumber adalah menginisialisasi proyek sebagai repositori Git.

      Buka Visual Studio Code dan akseslah terminal bawaan. Anda dapat membukanya dengan pintasan keyboard CTRL + ` di Linux, macOS, atau Windows.

      Di terminal, buat direktori untuk proyek baru dan berpindah ke direktori itu:

      • mkdir git_test
      • cd git_test

      Kemudian, buat repositori Git:

      Cara lain untuk melakukannya pada Visual Studio Code adalah dengan membuka tab Source Control (ikon yang terlihat seperti persimpangan jalan) di panel sisi kiri:

      Ikon Source Control

      Selanjutnya, pilih Open Folder:

      Tangkapan layar yang menggambarkan tombol Open Folder

      Ini akan membuka penjelajah berkas Anda ke direktori saat ini. Pilih direktori proyek yang disukai dan klik Open.

      Kemudian, pilih Initialize Repository:

      Tangkapan layar yang menggambarkan tombol Initialize Repository

      Jika Anda memeriksa sistem berkas, Anda akan melihatnya menyertakan direktori .git. Caranya, gunakan terminal untuk menyusuri direktori proyek Anda dan menampilkan daftar semua konten:

      Anda akan melihat direktori .git yang dibuat:

      Output

      Karena repositori telah diinisialisasi, tambahkan berkas bernama index.html.

      Setelah melakukannya, Anda akan melihat berkas baru di panel Source Control ditampilkan dengan huruf U di sebelahnya.** U** singkatan untuk untracked file, artinya berkas yang baru atau telah diubah, tetapi belum ditambahkan ke repositori:

      Tangkapan layar dari berkas tak terlacak dengan indikator huruf U

      Kini Anda dapat mengklik ikon plus (+) melalui daftar berkas index.html untuk melacak berkas menurut repositori.

      Setelah ditambahkan, huruf di sebelah berkas akan berubah menjadi A.A menyatakan berkas baru yang telah ditambahkan ke repositori.

      Untuk menerapkan perubahan, ketikkan pesan penerapan ke kotak masukan di bagian atas panel Source Control. Kemudian, klik ikon centang untuk melakukan penerapan.

      Tangkapan layar dari berkas yang ditambahkan dengan indikator huruf A dan pesan penerapan

      Setelah melakukannya, Anda akan melihat bahwa tidak ada perubahan yang menunggu.

      Selanjutnya, tambahkan sedikit konten ke berkas index.html.

      Anda dapat menggunakan pintasan Emmet untuk menghasilkan kerangka HTML5 di VS Code dengan menekan tombol !, diikuti dengan tombol Tab. Lanjutkan dan tambahkan sesuatu di <body> seperti judul <h1> lalu simpan.

      Di panel kontrol sumber, Anda akan melihat bahwa berkas telah berubah. Huruf M akan ditampilkan di sebelahnya, yang menyatakan bahwa berkas telah dimodifikasi:

      Tangkapan layar dari berkas yang dimodifikasi dengan indikator huruf M

      Untuk latihan, lanjutkan dan terapkan juga perubahan ini.

      Karena kini Anda sudah terbiasa berinteraksi dengan panel kontrol sumber, Anda akan melanjutkan ke menafsirkan indikator gutter.

      Langkah 2 — Menafsirkan Indikator Gutter

      Dalam langkah ini, Anda akan mempelajari sesuatu yang disebut dengan “Gutter” dalam VS Code. Gutter adalah area tipis di sebelah kanan nomor baris.

      Jika Anda telah menggunakan pelipatan kode sebelumnya, ikon maximize dan minimize berada di dalam gutter.

      Mari kita mulai dengan membuat sedikit perubahan pada berkas index.html, misalnya perubahan pada konten dalam tag <h1>. Setelah melakukannya, Anda akan melihat tanda vertikal biru di gutter baris yang Anda ubah. Tanda biru vertikal menunjukkan bahwa baris kode yang bersangkutan telah diubah.

      Sekarang, coba hapus sebuah baris kode. Anda dapat menghapus salah satu baris di bagian <body> dari berkas index.html. Sekarang perhatikan, di gutter ada segitiga merah. Segitiga merah merupakan sebuah baris atau sekelompok baris yang telah dihapus.

      Terakhir, di bawah bagian <body>, tambahkan baris kode baru dan perhatikan bilah hijau. Bilah hijau vertikal menandakan sebuah baris kode yang telah ditambahkan.

      Contoh ini menggambarkan indikator gutter untuk baris yang dimodifikasi, baris yang dihapus, dan baris baru:

      Tangkapan layar dengan contoh tiga tipe indikator gutter

      Langkah 3 — Menjalankan Diff pada Berkas

      VS Code juga memiliki kemampuan untuk menjalankan diff pada berkas. Biasanya, Anda harus mengunduh alat diff terpisah untuk melakukannya, jadi fitur bawaan ini dapat membantu Anda bekerja lebih efisien.

      Untuk melihat diff, buka panel kontrol sumber dan klik ganda berkas yang diubah. Dalam hal ini, klik ganda pada berkas index.html. Anda akan diarahkan ke tampilan umum diff dengan versi berkas saat ini di sebelah kiri dan versi berkas yang diterapkan sebelumnya di sebelah kanan.

      Contoh ini menunjukkan bahwa sebuah baris telah ditambahkan dalam versi saat ini:

      Tangkapan layar dengan contoh tampilan layar belah dari diff

      Langkah 4 — Menggunakan Percabangan

      Dengan berpindah ke bilah bawah, Anda dapat membuat dan berpindah cabang. Jika Anda perhatikan bagian kiri bawah editor, Anda akan melihat ikon kontrol sumber (yang terlihat seperti persimpangan jalan) yang biasanya diikuti dengan master atau nama cabang saat ini.

      Indikator cabang di bilah bawah VS Code yang menampilkan: master

      Untuk membuat cabang, klik nama cabang itu. Menu yang akan muncul memberi Anda kemampuan membuat cabang baru:

      Konfirmasi untuk membuat cabang baru

      Lanjutkan dan buat cabang baru bernama test.

      Sekarang, buat perubahan pada berkas index.html yang menandakan Anda berada di cabang test yang baru, misalnya menambahkan tulisan this is the new test branch.

      Terapkan perubahan itu pada cabang test. Kemudian, klik lagi nama cabang di bagian kiri bawah untuk berpindah kembali ke cabang master.

      Setelah berpindah kembali ke cabang master, Anda akan melihat bahwa tulisan this is the new test branch yang diterapkan pada cabang test tidak ada lagi.

      Langkah 5 — Menggunakan Repositori Jauh

      Tutorial ini tidak akan membahasnya secara mendalam, tetapi melalui panel Source Control, Anda memiliki akses untuk menggunakan repositori jauh. Jika sebelumnya Anda pernah menggunakan repositori jauh, Anda akan melihat perintah yang familier seperti pull, sync, publish, stash, dll.

      Langkah 6 — Menginstal Ekstensi Berguna

      VS Code tidak hanya dilengkapi dengan banyak fungsionalitas bawaan untuk Git, juga ada beberapa ekstensi yang sangat populer untuk menambahkan fungsionalitas tambahan.

      Git Blame

      Ekstensi ini menyediakan kemampuan untuk melihat informasi Git Blame di bilah status baris yang dipilih saat ini.

      Mungkin terdengar merepotkan, tetapi jangan khawatir, ekstensi Git Blame hanyalah masalah kepraktisan, bukan menyulitkan. Pemikiran “menyalahkan” (blame) orang lain karena perubahan kode jauh dari niat mempermalukannya, melainkan agar mengetahui kepada siapa sebaiknya menanyakan potongan kode tertentu.

      Seperti yang Anda lihat di tangkapan layar, ekstensi ini menyediakan pesan singkat menyangkut baris kode saat ini yang sedang Anda kerjakan di bilah alat bawah yang menjelaskan siapa yang melakukan perubahan dan kapan diubah.

      Git Blame di bilah alat bawah

      Git History

      Meskipun Anda dapat melihat perubahan saat ini, menjalankan diff, dan mengelola cabang dengan fitur bawaan di VS Code, alat ini tidak memberikan gambaran mendalam mengenai riwayat Git Anda. Ekstensi Git History mengatasi masalah itu.

      Seperti yang dapat Anda lihat pada gambar di bawah, ekstensi ini memungkinkan Anda untuk mendalami secara menyeluruh tentang riwayat berkas, penulisnya, cabang, dll. Untuk mengaktifkan jendela Git History di bawah, klik kanan pada berkas dan pilih Git: View File History:

      Hasil ekstensi Git History

      Selain itu, Anda dapat membandingkan cabang dan penerapan, membuat cabang dari penerapan itu, dan banyak lagi.

      Git Lens

      Git Lens banyak menambah kemampuan Git yang disertakan dalam Visual Studio Code. Ini membantu Anda untuk memvisualisasikan secara cepat penulisan kode melalui anotasi Git blame dan lensa kode, menyusuri repositori Git, memperoleh gambaran berharga melalui perbandingan perintah-perintah, dan banyak lagi.

      Ekstensi Git Lens adalah salah satu ekstensi paling populer di komunitas, sekaligus paling andal. Sejauh ini, ekstensi ini dapat menggantikan setiap dua ekstensi sebelumnya dengan fungsionalitasnya.

      Untuk informasi “blame” (menyalahkan), pesan singkat muncul di sebelah kanan baris yang sedang Anda kerjakan untuk memberi tahu siapa yang membuat perubahan, kapan melakukannya, pesan commit yang bersangkutan. Ada beberapa potongan informasi tambahan yang muncul saat menggerakkan kursor di atas pesan ini seperti perubahan kode itu sendiri, rekaman waktu, dan banyak lagi.

      Fungsionalitas Git Blame di Git Lens

      Untuk informasi riwayat Git, ekstensi ini menyediakan banyak fungsionalitas. Anda memiliki akses mudah ke banyak opsi, termasuk menampilkan riwayat berkas, menjalankan diff terhadap versi sebelumnya, membuka revisi tertentu, dan banyak lagi. Untuk membuka berbagai opsi ini, Anda dapat mengklik teks di bilah status bawah yang berisikan penulis yang mengedit baris kode tersebut dan sudah berapa lama mengeditnya.

      Hal ini akan membuka jendela berikut:

      Fungsionalitas Git History di Git Lens

      Ekstensi ini dilengkapi fungsionalitas, dan perlu sebentar saja untuk menerapkan semua yang ditawarkannya.

      Kesimpulan

      Dalam tutorial ini, Anda telah mendalami cara menggunakan integrasi kontrol sumber dengan VS Code. VS Code dapat menangani banyak fitur yang sebelumnya mengharuskan Anda mengunduh alat terpisah.



      Source link

      Cara Menggunakan JSON.parse() dan JSON.stringify()


      Pengantar

      Objek JSON, yang tersedia di semua peramban modern, memiliki dua metode berguna untuk menangani konten yang berformat JSON: parse dan stringify. JSON.parse() mengambil string JSON dan mengubahnya menjadi objek JavaScript. JSON.stringify() mengambil objek JavaScript dan mengubahnya menjadi string JSON.

      Berikut adalah contohnya:

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      Meskipun metode itu biasanya digunakan pada objek, tetapi dapat juga digunakan pada larik:

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() dapat mengambil fungsi sebagai argumen kedua yang dapat mengubah nilai objek sebelum mengembalikannya. Di sini, nilai-nilai objek diubah menjadi huruf besar dalam objek yang dikembalikan dari metode parse:

      const user = {
        name: 'Sammy',
        email: '[email protected]',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      Catatan: Koma di akhir tidak valid di JSON, jadi JSON.parse() menghasilkan pesan kesalahan jika string yang diberikan padanya memiliki koma di akhir.

      JSON.stringify()

      JSON.stringify() dapat mengambil dua argumen tambahan, yang pertama menjadi fungsi replacer dan yang kedua menjadi nilai String atau Number yang digunakan sebagai space dalam string yang dikembalikan.

      Fungsi replacer dapat digunakan untuk menyaring nilai, karena nilai yang dikembalikan sebagai undefined akan dikeluarkan dari string yang dikembalikan:

      const user = {
        id: 229,
        name: 'Sammy',
        email: '[email protected]'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      Contoh dengan argumen space yang disalurkan:

      const user = {
        name: 'Sammy',
        email: '[email protected]',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "[email protected]",
      // ..."plan": "Pro"
      // }"
      

      Kesimpulan

      Dalam tutorial ini, Anda telah mendalami cara menggunakan metode JSON.parse() dan JSON.stringify(). Jika Anda ingin mempelajari lebih lanjut tentang menggunakan JSON di Javascript, lihat tutorial Cara Menggunakan JSON di JavaScript dari kami.

      Untuk informasi lebih lanjut tentang pengodean di JavaScript, lihat seri Cara Melakukan Pengodean di JavaScript dari kami, atau lihat halaman topik JavaScript kami untuk latihan dan proyek pemrograman.



      Source link