Mengenal OWASP (Open Web Application Security Project)

  OWASP (Open Web Application Security Project) adalah sebuah organisasi nirlaba global yang fokus pada peningkatan keamanan aplikasi web.

  OWASP (Open Web Application Security Project) adalah sebuah organisasi nirlaba global yang fokus pada peningkatan keamanan aplikasi web.

 Tujuan utama dari OWASP adalah untuk menyediakan informasi, alat, dan sumber daya untuk membantu organisasi dan pengembang dalam mengembangkan, menguji, dan meningkatkan keamanan aplikasi web.

    OWASP memiliki komunitas yang luas yang terdiri dari para ahli keamanan, pengembang, dan profesional TI dari berbagai belahan dunia. Komunitas ini bekerja sama untuk mengembangkan berbagai jenis proyek, alat, panduan, dan standar keamanan yang berkaitan dengan aplikasi web.

Beberapa proyek yang dikembangkan oleh OWASP meliputi daftar 10 besar kerentanan keamanan aplikasi web, 

    Kenali OWASP: Mulailah dengan memahami apa itu OWASP dan apa tujuan dari organisasi ini. Anda dapat mengunjungi situs web OWASP untuk mengetahui lebih lanjut tentang organisasi ini, visi dan misinya, serta kegiatan dan proyek-proyek yang dilakukan.

    Pelajari top 10 risiko keamanan aplikasi web: OWASP Top 10 adalah daftar risiko keamanan aplikasi web yang paling umum. Pelajari setiap risiko dan cara menghindari atau mengurangi dampaknya.

    Pelajari metode pengujian keamanan aplikasi web: OWASP menyediakan panduan pengujian keamanan aplikasi web yang komprehensif. Pelajari teknik pengujian keamanan yang berbeda, termasuk pengujian manual dan otomatis, serta pengujian statis dan dinamis.

    Pelajari praktik pengembangan yang aman: Pelajari praktik-praktik pengembangan yang aman, termasuk manajemen sesi, pengelolaan sandi, validasi input, sanitasi output, dan penggunaan enkripsi.

    Ikuti pelatihan dan sertifikasi: OWASP menawarkan berbagai pelatihan dan sertifikasi yang dapat membantu Anda memahami lebih dalam tentang keamanan aplikasi web. Anda dapat mengunjungi situs web OWASP untuk mengetahui lebih lanjut tentang pelatihan dan sertifikasi yang ditawarkan.

    Bergabung dengan komunitas OWASP: Bergabunglah dengan komunitas OWASP untuk berinteraksi dengan para ahli keamanan aplikasi web dan memperoleh pengalaman praktis dalam pengujian keamanan aplikasi web.

    Dengan mempelajari OWASP, Anda akan memperoleh pengetahuan tentang risiko keamanan aplikasi web dan bagaimana mencegahnya, serta teknik pengujian keamanan dan praktik pengembangan yang aman. Hal ini dapat membantu Anda menjadi seorang ahli keamanan aplikasi web yang terampil dan berpengalaman.

Continue Reading →

Extension pada Visual Studio Code

         Extension pada Visual Studio Code yaitu program kecil yang dapat ditambahkan ke perangkat lunak untuk meningkatkan fungsionalitas dan memperluas kemampuan program . Dalam konteks Visual Studio Code, ekstensi biasanya ditulis dalam bahasa pemrograman seperti JavaScript, TypeScript, dan Python, dan berisi kode tambahan yang dapat diinstal dan diaktifkan pada aplikasi.

Ekstensi pada Visual Studio Code dapat melakukan berbagai tugas yang bermanfaat, seperti:

1.      Menambahkan bahasa pemrograman atau kerangka kerja baru ke Visual Studio Code.

2.      Menyediakan fitur baru yang tidak disertakan dalam Visual Studio Code, seperti pengaturan tampilan, analisis kode, dan debugging.

3.      Meningkatkan produktivitas pengguna dengan menambahkan fitur otomatisasi, shortcut keyboard, dan banyak lagi.

       Ribuan ekstensi yang tersedia untuk diinstal dan digunakan pada Visual Studio Code, pengguna dapat menyesuaikan pengalaman mereka dan meningkatkan produktivitas dalam pengembangan software.

    Untuk menginstal ekstensi pada Visual Studio Code, ikuti langkah-langkah berikut:Buka Visual Studio Code.

Klik pada ikon "Ekstensi" pada bilah sisi kiri atau tekan tombol keyboard "Ctrl + Shift + X" (Windows/Linux) atau "Cmd + Shift + X" (Mac).

1. Cari ekstensi yang ingin Anda instal di kotak pencarian di bagian atas halaman "Ekstensi".
2. Setelah menemukan ekstensi yang diinginkan, klik tombol "Instal" di samping nama ekstensi.
3. Tunggu hingga instalasi selesai.
4. Jika diminta untuk mengizinkan akses atau memasang dependensi lain, ikuti petunjuk yang diberikan.

        Ada banyak ekstensi yang dapat digunakan oleh programmer pada Visual Studio Code, tergantung pada bahasa pemrograman yang digunakan dan preferensi individu. Berikut adalah beberapa ekstensi populer yang sering digunakan oleh programmer:

1. Bracket Pair Colorizer

     Mengelompokkan pasangan tanda kurung, tanda kurung siku, dan tanda kurung kurawal dengan warna yang sesuai untuk memudahkan membaca dan mengelola kode.

    GitLens

        Membantu programmer dalam mengelola kode pada sistem kontrol versi Git, memberikan informasi tentang siapa yang melakukan perubahan terakhir pada kode, menunjukkan perubahan pada file, dan sebagainya.

            Live Server

        Memungkinkan programmer untuk mengakses aplikasi web secara lokal dan secara otomatis melakukan penyegaran browser ketika ada perubahan pada kode.

                                                Prettier

        Menata kode dengan rapi dan konsisten, mengikuti konvensi bahasa pemrograman yang digunakan.

IntelliSense

    Memberikan sugesti kode, dokumentasi, dan tautan yang berguna dalam proses pengetikan kode.

Remote Development

        Memungkinkan programmer untuk bekerja dengan kode pada mesin jauh atau lingkungan lain dengan menggunakan SSH atau Visual Studio Code Remote Extension.

Python

    Menambahkan fitur dan kemampuan yang berguna untuk pengembangan aplikasi Python.

Docker

Memudahkan pengembang untuk membangun, menguji, dan menjalankan aplikasi pada container Docker.

    Setelah ekstensi diinstal, Kita perlu me-restart Visual Studio Code agar perubahan diaktifkan.

    Anda dapat mengelola ekstensi yang terinstal dengan mengklik ikon "Ekstensi" dan memilih "Pengaturan" (ikon roda gigi) di sudut kanan atas. Di sana, Anda dapat mengaktifkan atau menonaktifkan ekstensi, memperbarui ekstensi, atau menghapusnya

Dan itulah sebagian extensi yang populer dan kurang lebihnya banyak digunakan oleh programmer pada Text Editor Visual Studio Code

Sebenarnya  banyak extensi yang tersedia untuk di instal dan di gunakan pada Visual Studio Code Tergantung Kebutuhan penggunanya.

Continue Reading →

password generator dengan menggunakan Python

     Untuk membuat password tentu harus sedikit rumit paling simple menggunakan kombinasi antara huruf dengan angka, 

kali ini saya akan membuat sebuah cara membuat paswword rumit otomatis dengan bahasa pemerograman Python.

kali ini saya membuat password generator dengan menggunakan Text Editor VS code.

adapun langkah-langkah untuk pembuatan nya yaitu :

Langkah 1: Impor modul-modul yang dibutuhkan

    Untuk membuat password generator, kita perlu menggunakan modul random dan string pada Python. Modul random akan digunakan untuk menghasilkan angka acak, sedangkan modul string akan digunakan untuk menghasilkan karakter acak yang akan digabungkan menjadi password.

1.    import random
2.    import string

Langkah 2: Tentukan panjang password yang diinginkan

    Setelah impor modul yang dibutuhkan, selanjutnya kita tentukan panjang password yang diinginkan oleh pengguna. Kita dapat meminta input dari pengguna untuk menentukan panjang password atau kita dapat menetapkan panjang password secara default.

        length = int(input("Masukkan panjang password yang diinginkan: "))

Langkah 3: Buat password generator

    Setelah menentukan panjang password, kita dapat membuat password generator. Untuk itu, kita dapat menggunakan fungsi random.choice pada modul random untuk memilih karakter acak dari modul string.

        def password_generator(length):

 letters = string.ascii_letters

numbers = string.digits

symbols = string.punctuation

password = ''.join(random.choice(letters + numbers + symbols) for _ in range(length))

          return password

    Fungsi ini akan menghasilkan password acak dengan panjang yang diinginkan, yang terdiri dari karakter alfabet, angka, dan simbol.

Langkah 4: Jalankan program

        Setelah membuat password generator, kita dapat menjalankan program untuk menguji apakah password generator berfungsi dengan baik. Berikut adalah contoh program lengkap:

 

    Setelah program dijalankan, pengguna diminta untuk memasukkan panjang password yang diinginkan, kemudian program akan menghasilkan password acak sesuai dengan panjang yang dimasukkan oleh pengguna.

Sekian tutorial singkat ini, semoga bermanfaat.

Continue Reading →

Mempelajari Tailwind CSS

Perkenalan tailwind CSS

     Apa itu tailwind css! tailwind css dibuat oleh Adam Wathan, seorang yang cukup terkenal di komunitas laravel dengan beberapa coursenya. Kali ini dia menawarkan konsep baru yang berbeda dari bootstrap, bulma, atau css framework lainnya lewat Tailwind css.

ketika kita menggunakan tailwindcss, kita berasa sedang bekerja dengan css secara langsung namun menggunakan class yang reusable.

Kelebihannya TilwindCss yaitu kita bisa melakukan desain website kita dengan lebih custom dan bebas, tidak perlu khawatir apakah framework css kita sudah menyediakan atau belum.

perbandingan tailwind sendiri dibandingkan cara lama (penamaan kelas yang spesifik) . Contoh membuat elemen notifikasi chat.

Contoh nama kelas spesifik:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="blablabla Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">Bla bla bla</h4>
    <p class="chat-notification-message">Pesan kamu....!</p>
  </div>
</div><style>
  .chat-notification {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Dengan tailwind

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">bla bla bla</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

BERIKUT CARA INSTALL TAILWND CSS

Install Tailwind CSS pada React menggunakan CRA

Jalankan perintah berikut pada terminal untuk membuat sebuah Create React App project:

npx create-react-app my-app
cd my-app

Install tailwindcss:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Selain package tailwindcss kita juga menginstal beberapa package lain seperti @tailwindcss/postcss7-compat @tailwindcss/postcss7-compat , hal ini dikarenakan CRA tidak support PostCSS dan kita harus menginstall package tambahan agar tailwindcss bisa diinstall sebagai PostCSS plugin.

Kemudian install package craco agar kita bisa mengubah konfigurasi dari PostCSS.

npm install @craco/craco

Update file package.json pada bagian scripts, ganti react-scripts:

{
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

Kemudian buat file konfigurasi craco dengan nama craco.config.js di root folder, tambahkan tailwindcss dan autoprefixer sebagai plugin PostCSS.

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Buat sebuah file konfigurasi untuk tailwindcss dengan nama tailwind.config.js di root folder, dan salin konfigurasi berikut:

module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Langkah berikutnya adalah menambahkan tailwindcss ke file CSS.

Buka file src/index.css, ganti isi dari file tersebut

Dari:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Menjadi:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian jalankan perintah npm start untuk menjalankan aplikasi.

Konsep Dasar

Kita akan bahas beberapa konsep dasar pada tailwindcss. Tidak semuanya, tapi dengan memahami konsep ini kamu sudah bisa mulai menggunakan tailwindcss.

Utility First

Seperti yang sudah disebutkan sebelumnya, bahwa tailwindcss menggunakan utility class atau helper class seperti bg-purple-500 untuk membuat custom desain menggantikan CSS.

Kita lihat code sebelumnya:

<button class="bg-purple-500 text-white 
   py-1 px-4 
   border rounded hover:bg-purple-800">Klik Disini</button>

Utility class yang ada pada code diatas:

• Class-class di atas mewakili property dan value sendiri.

  • bg-blue-500 merepresentasikan property background-color: #4299e1;
  • text-white merepresentasikan property color: #fff;
  • font-bold merepresentasikan property font-weight: 700;
  • py-2 maksudnya padding-y atau padding-vertical merepresentasikan property padding-top: 0.5rem; dan padding-bottom: 0.5rem;
  • px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property padding-left: 1rem; dan padding-right: 1rem;
  • rounded merepresentasikan border-radius: .25rem;

Continue Reading →