Di era digital saat ini, keamanan data menjadi salah satu prioritas utama bagi organisasi. Dengan semakin banyaknya data yang disimpan di cloud, penting untuk memahami bagaimana cara melindungi informasi sensitif. Amazon Web Services (AWS) menawarkan berbagai alat dan layanan untuk membantu menjaga keamanan data, salah satunya adalah AWS Identity and Access Management (IAM). Artikel ini akan membahas apa itu IAM dan praktik terbaik untuk melindungi data di AWS.

Apa Itu AWS IAM?

AWS IAM adalah layanan yang memungkinkan kamu untuk mengelola akses ke sumber daya AWS dengan aman. Dengan IAM, kamu dapat membuat dan mengelola pengguna, grup, dan kebijakan akses yang menentukan siapa yang dapat mengakses sumber daya tertentu dan apa yang dapat mereka lakukan dengan sumber daya tersebut.

Fitur Utama AWS IAM

1. Pengelolaan Pengguna dan Grup: IAM memungkinkan kamu untuk membuat pengguna dan grup, serta mengatur izin akses berdasarkan peran mereka dalam organisasi.
2. Kebijakan Akses yang Fleksibel: Kamu dapat membuat kebijakan akses yang mendetail untuk mengontrol izin pengguna. Kebijakan ini dapat ditetapkan pada pengguna, grup, atau sumber daya tertentu.
3. Multi-Factor Authentication (MFA): IAM mendukung MFA, yang menambahkan lapisan keamanan tambahan dengan meminta pengguna untuk memberikan informasi tambahan (seperti kode dari aplikasi autentikasi) saat masuk.
4. Audit dan Monitoring: Dengan AWS CloudTrail, kamu dapat melacak aktivitas pengguna dan perubahan yang dilakukan pada sumber daya AWS, sehingga memudahkan dalam audit dan pemantauan keamanan.

Praktik Terbaik untuk Keamanan Data di AWS

1. Prinsip Least Privilege: Berikan akses minimum yang diperlukan kepada pengguna untuk menyelesaikan tugas mereka. Ini membantu meminimalkan risiko jika akun pengguna terkompromi.
2. Gunakan MFA: Aktifkan MFA untuk semua pengguna, terutama untuk akun dengan akses administratif. Ini menambah lapisan perlindungan ekstra.
3. Rutin Tinjau Kebijakan Akses: Secara berkala, tinjau dan perbarui kebijakan akses untuk memastikan bahwa hanya pengguna yang memerlukan akses yang memilikinya.
4. Gunakan Role untuk Aplikasi: Alih-alih menggunakan kredensial pengguna, gunakan IAM Roles untuk memberikan akses kepada aplikasi yang berjalan di AWS. Ini mengurangi risiko kebocoran kredensial.
5. Audit dan Monitoring: Gunakan AWS CloudTrail untuk mencatat semua aktivitas API di akun AWS kamu. Ini membantu dalam mendeteksi aktivitas mencurigakan dan melakukan audit keamanan.
6. Enkripsi Data: Pastikan data yang disimpan di AWS dienkripsi, baik saat transit maupun saat disimpan. Gunakan AWS Key Management Service (KMS) untuk mengelola kunci enkripsi.
7. Pendidikan dan Pelatihan: Berikan pelatihan keamanan kepada semua pengguna untuk meningkatkan kesadaran tentang praktik terbaik dan potensi ancaman.

Kesimpulan

Keamanan data di AWS adalah tanggung jawab bersama antara AWS dan pengguna. Dengan memahami dan memanfaatkan AWS IAM serta menerapkan praktik terbaik, kamu dapat melindungi data sensitif dan mengurangi risiko kebocoran informasi. Ingatlah bahwa keamanan adalah proses yang berkelanjutan, dan penting untuk selalu memperbarui pengetahuan dan strategi keamanan kamu.

Jika kamu memiliki pertanyaan atau ingin berbagi pengalaman tentang keamanan di AWS, jangan ragu untuk meninggalkan komentar di bawah. Selamat menjaga keamanan data kamu!

API (Application Programming Interface) adalah komponen penting dalam pengembangan perangkat lunak modern. Mereka memungkinkan aplikasi untuk berkomunikasi dengan layanan eksternal dan mengakses data atau fungsi dari sumber daya yang berbeda. Dalam artikel ini, kita akan membahas cara berinteraksi dengan API eksternal dalam aplikasi Vue.js, salah satu kerangka kerja JavaScript yang populer, menggunakan Fetch API dan library Axios.

Menggunakan Fetch API

Fetch API adalah API bawaan yang telah tersedia di peramban web modern seperti Google Chrome, Mozilla Firefox, dan lainnya. Ini adalah cara yang efisien dan mudah untuk melakukan permintaan HTTP ke API eksternal dalam aplikasi Vue.js Anda.

Melakukan Permintaan GET

Untuk melakukan permintaan GET ke API eksternal, Anda dapat menggunakan kode berikut dalam komponen Vue Anda:

// Impor komponen Vue

import Vue from 'vue';

// Membuat instance Vue

new Vue({

  el: '#app',

  data: {

    responseData: null

  },

  mounted() {

    // Melakukan permintaan GET ke API eksternal

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(data => {

        this.responseData = data;

      })

      .catch(error => {

        console.error('Terjadi kesalahan:', error);

      });

  }

});

Dalam contoh di atas, kita menggunakan fetch() untuk melakukan permintaan GET ke URL https://api.example.com/data. Hasilnya kemudian diuraikan dengan response.json() dan disimpan dalam data Vue untuk digunakan dalam template.

Baca juga Memahami konsep komponen dalam Vue.Js

Melakukan Permintaan POST

Untuk melakukan permintaan POST dengan Fetch API, Anda dapat menggunakan kode berikut:

mounted() {

  // Data yang akan dikirim

  const dataToSend = {

    nama: 'John Doe',

    email: 'johndoe@example.com'

  };

  fetch('https://api.example.com/endpoint', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify(dataToSend)

  })

    .then(response => response.json())

    .then(data => {

      // Menggunakan data yang diterima setelah permintaan POST berhasil

    })

    .catch(error => {

      console.error('Terjadi kesalahan:', error);

    });

}

Menggunakan Axios

Axios adalah library HTTP client yang populer untuk melakukan permintaan HTTP dalam aplikasi Vue.js. Ini memberikan antarmuka yang lebih mudah digunakan dan banyak fitur yang berguna.

Instalasi Axios

Untuk menggunakan Axios, Anda perlu menginstalnya terlebih dahulu dalam proyek Vue.js Anda. Anda dapat melakukannya dengan perintah npm berikut:

npm install axios

Setelah menginstal Axios, Anda dapat mengimpornya ke dalam komponen Vue Anda:

import axios from 'axios';

Melakukan Permintaan GET

Berikut adalah contoh penggunaan Axios untuk melakukan permintaan GET:

mounted() {

  axios.get('https://api.example.com/data')

    .then(response => {

      this.responseData = response.data;

    })

    .catch(error => {

      console.error('Terjadi kesalahan:', error);

    });

}

Melakukan Permintaan POST

Untuk melakukan permintaan POST dengan Axios, Anda dapat menggunakan kode berikut:

mounted() {

  // Data yang akan dikirim

  const dataToSend = {

    nama: 'John Doe',

    email: 'johndoe@example.com'

  };

  axios.post('https://api.example.com/endpoint', dataToSend)

    .then(response => {

      // Menggunakan data yang diterima setelah permintaan POST berhasil

    })

    .catch(error => {

      console.error('Terjadi kesalahan:', error);

    });

}

Baca juga Manajemen status dengan Vuex dalam Vue.Js

Kesimpulan

Berinteraksi dengan API eksternal adalah bagian penting dari pengembangan aplikasi web modern, dan Vue.js menyediakan alat yang kuat untuk melakukan hal ini. Anda dapat memilih antara menggunakan Fetch API bawaan atau library seperti Axios, tergantung pada preferensi dan kebutuhan proyek Anda. Dengan memahami cara melakukan permintaan GET dan POST ke API, Anda dapat dengan mudah mengintegrasikan data eksternal ke dalam aplikasi Vue.js Anda.

Vue.js adalah salah satu framework JavaScript yang paling populer untuk pengembangan aplikasi web yang responsif dan dinamis. Dalam pengembangan aplikasi web modern, navigasi antar halaman atau komponen dalam aplikasi menjadi sangat penting. Inilah mengapa Vue Router hadir sebagai alat yang kuat untuk mengelola routing dalam aplikasi Vue.js Anda.

Apa itu Vue Router?

Vue Router adalah libreria resmi yang digunakan dalam ekosistem Vue.js untuk mengelola routing. Ini memungkinkan Anda untuk membuat aplikasi Vue.js yang memiliki beberapa halaman atau tampilan yang dapat diakses dengan mudah oleh pengguna. Routing adalah proses mengarahkan pengguna dari satu tampilan atau komponen ke tampilan atau komponen lainnya dalam aplikasi Anda.

Baca juga Pengenalan Vue Js: memahami dasar-dasar javascript yang populerframework

Dengan Vue Router, Anda dapat dengan mudah mengintegrasikan navigasi antar halaman ke dalam aplikasi Anda tanpa harus me-refresh seluruh halaman web. Ini memberikan pengalaman pengguna yang lebih mulus dan cepat dalam berpindah-pindah antar tampilan.

Mengenal Konsep Routing dalam Vue Router

Sebelum kita masuk ke penggunaan praktis Vue Router, mari pahami beberapa konsep penting:

1. Routes: Ini adalah daftar rute yang mendefinisikan tampilan atau komponen yang akan ditampilkan ketika URL tertentu diakses.
2. Router Instance: Router Vue adalah objek JavaScript yang mengatur semua routing dalam aplikasi Anda.
3. Route Components: Ini adalah komponen Vue yang akan ditampilkan ketika URL tertentu diakses. Setiap route biasanya memiliki satu komponen yang terkait.
4. Router View: Ini adalah komponen khusus yang menampilkan komponen yang sesuai dengan URL yang sedang diakses.
5. Router Link: Ini adalah komponen yang digunakan untuk membuat tautan ke rute lain dalam aplikasi Anda. Ini akan mengubah URL tanpa memuat ulang halaman.

Menggunakan Vue Router dalam Proyek Anda

Berikut adalah langkah-langkah sederhana untuk mengintegrasikan Vue Router dalam proyek Vue.js Anda:

Langkah 1: Instalasi Vue Router

Pertama, Anda perlu menginstal Vue Router ke dalam proyek Anda. Anda dapat melakukannya menggunakan npm atau yarn:

npm install vue-router

# atau

yarn add vue-router

Langkah 2: Mengimpor dan Menggunakan Vue Router

Setelah menginstal Vue Router, Anda perlu mengimpor dan menggunakannya dalam proyek Anda. Biasanya, ini dilakukan di dalam file main.js proyek Vue Anda.

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Langkah 3: Mendefinisikan Rute

Selanjutnya, Anda perlu mendefinisikan rute-rute aplikasi Anda. Ini biasanya dilakukan dalam file terpisah yang diberi nama routes.js atau sejenisnya. Contoh definisi rute:

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About },

  { path: '/contact', component: Contact }

]

Langkah 4: Membuat Router Instance

Buat instance router menggunakan definisi rute yang telah Anda buat:

const router = new VueRouter({

  routes

})

Langkah 5: Menampilkan Router View

Di dalam komponen induk Anda (biasanya di dalam file App.vue), tambahkan komponen <router-view></router-view> untuk menampilkan komponen yang sesuai dengan URL saat ini.

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

Langkah 6: Menambahkan Router Link

Gunakan komponen <router-link> untuk membuat tautan ke rute-rute yang telah Anda definisikan.

<router-link to="/">Home</router-link>

<router-link to="/about">About</router-link>

<router-link to="/contact">Contact</router-link>

Langkah 7: Menjalankan Aplikasi Anda

Terakhir, Anda perlu menjalankan aplikasi Anda dengan router yang telah diatur:

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

Baca juga Panduan praktis pengembangan aplikasi web dengan vue

Kesimpulan

Dengan Vue Router, Anda dapat dengan mudah mengelola navigasi dalam aplikasi Vue.js Anda. Ini memungkinkan Anda untuk membuat aplikasi web yang lebih responsif, cepat, dan nyaman bagi pengguna. Dengan memahami konsep dasar routing dan mengikuti langkah-langkah di atas, Anda akan dapat mengintegrasikan Vue Router ke dalam proyek Vue.js Anda dengan mudah. Semoga artikel ini membantu Anda memahami bagaimana menggunakannya!

Vue.js adalah salah satu framework JavaScript yang paling populer dan mudah digunakan untuk pengembangan aplikasi web. Dengan desain yang ringan dan fokus pada tampilan (UI), Vue.js memungkinkan pengembang untuk dengan mudah membangun aplikasi web interaktif dan responsif. Artikel ini akan membantu Anda memulai dengan Vue.js dengan langkah-langkah praktis dan panduan sederhana.

Langkah 1: Persiapan Lingkungan

Sebelum Anda dapat mulai mengembangkan aplikasi web menggunakan Vue.js, Anda perlu memastikan bahwa lingkungan pengembangan Anda sudah siap. Pastikan Anda telah menginstal Node.js di komputer Anda. Anda dapat mengunduh dan menginstal Node.js dari situs resmi Node.js.

Setelah Node.js terinstal, Anda dapat memverifikasi instalasi Node.js dan npm (Node Package Manager) dengan menjalankan perintah berikut di terminal:

node -v

npm -v

Langkah 2: Membuat Proyek Vue.js

Setelah Anda memiliki Node.js dan npm yang terinstal, langkah berikutnya adalah membuat proyek Vue.js. Anda dapat melakukan ini dengan menggunakan Vue CLI (Command Line Interface), alat resmi untuk mengelola proyek Vue.js.

Untuk menginstal Vue CLI, jalankan perintah berikut:

npm install -g @vue/cli

Setelah Vue CLI terinstal, Anda dapat membuat proyek Vue.js baru dengan perintah berikut:

vue create nama-proyek-anda

Ikuti instruksi yang muncul di layar untuk mengkonfigurasi proyek Anda. Anda dapat memilih opsi default atau mengkustomisasi konfigurasi sesuai kebutuhan Anda.

Baca Juga Pengenalan Vue.js

Langkah 3: Struktur Proyek Vue.js

Proyek Vue.js yang baru dibuat akan memiliki struktur dasar yang terorganisir dengan baik. Struktur dasar ini termasuk folder-folter seperti src untuk kode sumber aplikasi, public untuk berkas-berkas statis, dan node_modules untuk dependensi proyek.

Anda akan bekerja terutama di dalam folder src, di mana Anda akan menemukan file App.vue sebagai komponen utama dan folder components untuk menyimpan komponen-komponen tambahan.

Langkah 4: Menggunakan Komponen Vue.js

Komponen adalah bagian fundamental dari aplikasi Vue.js. Anda dapat membuat dan menggunakan komponen untuk mengorganisasi dan merancang tampilan aplikasi Anda. Misalnya, untuk membuat komponen sederhana, Anda dapat membuat file MyComponent.vue dalam folder components:

<template>

  <div>

    <h1>Halo, Saya adalah komponen Vue.js!</h1>

  </div>

</template>

<script>

export default {

  name: 'MyComponent'

}

</script>

<style scoped>

/* Gaya khusus untuk komponen ini */

</style>

Kemudian, Anda dapat menggunakan komponen ini di dalam file App.vue:

<template>

  <div id="app">

    <MyComponent />

  </div>

</template>

<script>

import MyComponent from './components/MyComponent.vue';

export default {

  components: {

    MyComponent

  }

}

</script>

Langkah 5: Menjalankan Aplikasi

Setelah Anda membuat komponen dan mengatur struktur proyek Anda, Anda dapat menjalankan aplikasi dengan perintah:

npm run serve

Aplikasi Anda akan dijalankan di server pengembangan dan dapat diakses melalui peramban web dengan alamat http://localhost:8080/.

Kesimpulan

Ini adalah panduan singkat tentang bagaimana memulai pengembangan aplikasi web dengan Vue.js. Vue.js adalah framework yang kuat dan intuitif yang memungkinkan Anda untuk dengan cepat membuat aplikasi web yang interaktif dan responsif. Dengan langkah-langkah yang telah dijelaskan di atas

Apa itu Vue.js?

Mengapa Vue.js?

1. Ringan dan Mudah Dipelajari: Vue.js adalah salah satu framework JavaScript yang lebih ringan dan mudah dipelajari dibandingkan dengan alternatifnya seperti React atau Angular. Dokumentasi yang kuat dan komunitas yang aktif membuatnya sangat ramah bagi pemula.
2. Kemudahan Integrasi: Anda dapat dengan mudah mengintegrasikan Vue.js dengan proyek yang sudah ada. Ini berarti Anda tidak perlu memulai dari awal jika Anda ingin menggunakan Vue.js dalam aplikasi yang sudah ada.
3. Reaktif: Vue.js menggunakan pendekatan reaktif untuk mengelola komponen, yang berarti tampilan akan selalu diperbarui secara otomatis saat data yang digunakan berubah. Hal ini membuat pengembangan aplikasi yang responsif menjadi lebih mudah.
4. Komponen yang Kuat: Vue.js mempromosikan penggunaan komponen sebagai unit dasar dalam pengembangan aplikasi. Komponen memungkinkan pemisahan yang baik antara logika aplikasi dan tampilan, sehingga mempermudah pemeliharaan dan pengembangan.
5. Ekosistem yang Berkembang Pesat: Vue.js memiliki ekosistem yang berkembang pesat dengan banyak plugin, ekstensi, dan alat bantu yang dapat mempercepat pengembangan.

Konsep Kunci dalam Vue.js

1. Komponen: Komponen adalah bagian dasar dari aplikasi Vue.js. Mereka adalah unit mandiri yang dapat digunakan untuk mengelola tampilan dan logika aplikasi. Komponen dapat bersarang satu sama lain, membentuk struktur aplikasi yang kompleks.
2. Direktif: Vue.js menggunakan direktif (directive) dalam sintaksis templatingnya untuk mengikat perilaku HTML ke model data Vue. Direktif yang paling umum adalah v-bind untuk mengikat atribut, dan v-on untuk menangani peristiwa.
3. Model Data: Vue.js menggunakan objek JavaScript sebagai model data untuk mengelola informasi yang akan ditampilkan dan diubah di dalam aplikasi. Model data ini adalah bagian yang paling reaktif dalam Vue.js.
4. Rute: Vue Router adalah pustaka resmi untuk mengelola rute dalam aplikasi Vue.js. Ini memungkinkan Anda membuat aplikasi berbasis SPA dengan navigasi yang halus.
5. Manajemen Keadaan: Vuex adalah pustaka resmi untuk manajemen keadaan dalam aplikasi Vue.js. Ini membantu Anda mengelola data yang harus dibagikan antara komponen dan mempertahankan keadaan aplikasi secara konsisten.

Kesimpulan

Kali ini kita akan  belajar tentang perbedaan Asynchronous dan Synchronous Programming dalam pemrograman Javascript dan bagaimana kedua metode ini mempengaruhi kecepatan eksekusi program. Asynchronous dan Synchronous adalah istilah yang sering digunakan dalam pemrograman Javascript.

Asynchronous Programming adalah pendekatan pemrograman yang tidak terikat pada input output (I/O) protocol. Ini berarti bahwa pemrograman asynchronous tidak melakukan pekerjaan secara berurutan seperti pemrograman lama. Sebaliknya, pekerjaan dilakukan secara independen dan tanpa harus menunggu proses lain selesai. Hal ini membuat waktu eksekusi menjadi lebih singkat dan cepat.

Sedangkan Synchronous Programming memiliki pendekatan yang lebih tradisional, dengan task yang dieksekusi satu per satu sesuai urutan dan prioritas. Namun, Synchronous Programming memiliki kemudahan yang tidak ditawarkan oleh Asynchronous Programming.

Baca juga Apa itu AJAX

Kedepannya, kedua pendekatan ini akan terus berkembang dan berada pada satu tujuan yang sama. Terlebih dengan semakin berkembangnya teknologi seperti Rest API. Pelajari lebih lanjut tentang Asynchronous dan Synchronous Programming dalam pemrograman Javascript!

Angular adalah salah satu framework populer untuk pembuatan aplikasi web modern. Ini memungkinkan Anda membuat aplikasi yang responsif, interaktif, dan mudah digunakan dengan cara yang efisien dan terstruktur. Dalam artikel ini, kita akan membahas dasar-dasar Angular dan bagaimana Anda dapat memulai menggunakannya.

Angular adalah framework JavaScript open-source yang dikembangkan oleh Google. Ini dapat digunakan untuk membuat aplikasi berbasis Single Page Application (SPA), yang memungkinkan Anda membuat aplikasi web yang responsif dan memuat halaman secara real-time tanpa memuat ulang halaman seluruhnya.

Baca juga Pengertian React JS

Angular menggunakan konsep pemrograman berorientasi komponen, yang memungkinkan Anda membagi aplikasi Anda menjadi komponen yang terpisah dan dapat dipakai kembali. Setiap komponen memiliki logic, template, dan styling yang terpisah, sehingga memudahkan Anda dalam memelihara dan mengembangkan aplikasi Anda.

Untuk memulai menggunakan Angular, Anda perlu memasang Angular CLI, yang merupakan alat untuk membuat dan mengelola proyek Angular. Setelah itu, Anda dapat membuat proyek baru menggunakan perintah "ng new [nama proyek]".

Angular menggunakan bahasa pemrograman TypeScript, yang merupakan bahasa pemrograman yang didesain khusus untuk pengembangan aplikasi web. TypeScript memiliki tipe data yang jelas dan memiliki fitur seperti class dan interface, yang membuat kode Anda lebih terstruktur dan mudah dibaca.

Setelah membuat proyek baru, Anda dapat memulai membuat komponen baru dengan menggunakan perintah "ng generate component [nama komponen]". Setiap komponen terdiri dari tiga bagian: template HTML, class TypeScript, dan styling CSS. Anda dapat mengatur interaksi antar komponen dengan menggunakan properti input dan output.

Baca juga Apa itu jQuery

Angular juga memiliki fitur bawaan seperti direktif, yang memungkinkan Anda memodifikasi componen tanpa harus menulis logika baru. Contohnya, direktif ngFor memungkinkan Anda menampilkan daftar item secara dinamis dalam template.

Untuk membuat aplikasi yang memiliki routing, Anda dapat menggunakan module Router. Router memungkinkan Anda menentukan bagaimana aplikasi Anda harus bereaksi terhadap perubahan URL, sehingga menjadikan aplikasi Anda seperti aplikasi multi-halaman. Anda dapat menentukan rute dan memetakan URL ke komponen tertentu, sehingga memudahkan pengguna untuk menavigasi aplikasi Anda.

Angular juga memiliki fitur bawaan untuk mengelola data, seperti HTTP client untuk mengirim dan menerima data dari server, dan observables untuk memantau perubahan data dalam aplikasi. Anda juga dapat menggunakan service untuk mengelola data dan logika bisnis Anda, sehingga memudahkan Anda dalam memelihara dan mengembangkan aplikasi Anda.

Angular juga memiliki banyak komponen UI bawaan dan library tambahan seperti Angular Material, yang memudahkan Anda dalam membuat antarmuka pengguna yang responsif dan interaktif. Anda juga dapat menggunakan fitur seperti form validation dan templating untuk membuat antarmuka pengguna yang mudah digunakan.

Kesimpulan

Angular adalah salah satu framework pemrograman web terpopuler yang memungkinkan Anda membuat aplikasi SPA dengan cara yang efisien dan terstruktur. Dengan menggunakan konsep pemrograman berorientasi komponen, TypeScript, dan fitur seperti routing dan data management, Anda dapat membuat aplikasi web yang responsif, interaktif, dan mudah digunakan.

Jika Anda tertarik untuk mempelajari Angular lebih lanjut, Anda dapat memulainya dengan membaca dokumentasi resmi, mengikuti tutorial online, atau mengikuti kelas pemrograman. Dengan mempelajari Angular, Anda dapat membuat aplikasi web modern dan memperluas skill pemrograman Anda.

Kita akan membuat layout website responsive menggunakan librari semantic-ui-react. Semantic UI adalah semacam UI frameworks yang memudahkan kita membuat website template atau style website, karena source css, javascript, dan html telah siap untuk digunakan atau diimplementasikan ke dalam project website. Dengan ui framework, kita tidak perlu lagi membuat style website dan fungsi-fungsi javascript dari awal, sangat membantu mempercepat pengembangan aplikasi yang kita buat. Librari semantic-ui-react adalah komponen-komponen react js yang dibuat menggunakan style semantic ui (semantic-ui.com). Semua dokumentasi dari setiap komponen react js bisa kita pelajari melalui website https://react.semantic-ui.com. Pada tutorial sebelumnya kita telah membuat halaman-halaman website menggunakan librari react-router-dom. Tutorial kali ini kita akan membuat layout website responsive yang sudah ada navigasi atau menu untuk menuju ke setiap halaman website. Contoh layout yang akan kita buat seperti ini https://react.semantic-ui.com/layouts/homepage Ikuti langkah-langkah berikut ini: 1. Masuk ke project react js yang telah kita buat, dan install librari semantic-ui-react.

$ cd aplikasi-reactjs
$ npm install --save semantic-ui-react

2. Install package css dari semantic ui.

$ npm install --save semantic-ui-css

3. Import semantic-ui-css di dalam file index.js: 4. Buat folder containers dan components di dalam src:

$ mkdir src/containers
$ mkdir src/components

5. Buatlah file-file berikut ini pada folder nya masing-masing: src/components/HomepageHeading.js ---- src/containers/DesktopContainer.js ---- src/containers/MobileContainer.js ---- src/containers/FooterContainer.js ---- src/containers/ResponsiveContainer.js ---- src/Router.js ---- src/pages/HomePage.js ---- src/pages/AboutPage.js ---- src/pages/ContactPage.js ---- 6. Jalankan aplikasi react js anda di localhost: $ npm start Baiklah sampai disini project react js kita sudah memiliki layout yang responsive terdiri dari navigasi, header, footer dan content setiap page. Berikut ini adalah file-file yang baru dibuat dan yang di-edit: File Baru: src/components/HomepageHeading.js src/containers/DesktopContainer.js src/containers/FooterContainer.js src/containers/MobileContainer.js src/containers/ResponsiveContainer.js src/index.js src/Router.js src/pages/AboutPage.js src/pages/ContactPage.js src/pages/HomePage.js Langkah selanjutnya adalah upload hasil kerja anda ke server hosting. Ikut langkah-langkah pada tutorial bagian 2. Anda bisa melihat hasil dari tutorial ini di alamat website www.opetstudio.com. Source code tutorial di https://github.com/opetstudio/tutorial-reactjs/tree/tutorial-bagian-3. Okey, sekian tutorial cara membuat layout website react js menggunakan librari semantic-ui-react, jika ada bagian yang kurang anda mengerti, anda bisa bertanya langsung di kolom komentar. Ikuti terus seri tutorial react js dalam bahasa Indonesia untuk seri yang akan datang. Terima kasih telah membaca tutorial yang sederhana ini. Semoga bermanfaat. Salam..!!!