Ketikan MD

Cara convert angka romawi ke angka desimal dengan bahasa pemrograman dart

2023-04-01T07:12:00.002-07:00

Di tutorial kali ini saya ingin membagi sedikit ilmu bagaimana cara convert angka romawi ke angka desimal menggunakan bahasa pemrograman Dart,

Adapun code nya bisa dilihat dibawah ini:

void main() {
  print(convertRomawiToNumber("III"));
}

String convertRomawiToNumber(String? romawi) {
  Map<String, int> romawiToNumber = {
    "I": 1,
    "V": 5,
    "X": 10,
    "L": 50,
    "C": 100,
    "D": 500,
    "M": 1000
  };
  int total = 0;
  List<int> listRomawiToNumber = [];

  //cek invalid INPUT
  if (romawi == null || romawi.length < 1) {
    return "INVALID INPUT";
  }
  
  //cek invalid ROMAWI
  for (int i = 0; i < romawi.length; i++) {
    if (!(romawiToNumber.keys.toList().contains(romawi.split("")[i]))) {
      return "INVALID ROMAWI";
    }
  }

  //Convert ROMAWI TO NUMBER
  for (int i = 0; i < romawi.length; i++) {
    listRomawiToNumber.add(romawiToNumber[romawi.split("")[i]]!);
  }

  //SET DEFAULT TOTAL WITH LAST VALUE LIST RESULT ROMAWI TO NUMBER
  total += listRomawiToNumber[listRomawiToNumber.length - 1];
  
  //LOGIC CHECK ROMAWI
  for (int i = listRomawiToNumber.length - 1; i >= 0; i--) {
    if (i >= 1) {
      if (listRomawiToNumber[i] <= listRomawiToNumber[i - 1]) {
        total += listRomawiToNumber[i - 1];
      } else {
        total -= listRomawiToNumber[i - 1];
      }
    }
  }
  
  //RETURN TOTAL
  return total.toString();
}

Dari kode diatas jika dijalankan maka akan keluar hasil convert angka romawi III menjadi angka desimal 3

Menjalankan gitlab runner menggunakan docker

2022-12-24T01:30:00.000-08:00

Tutorial ini merupakan catatan belajar saya dalam menggunakan GitLab CI/CD dan Docker.

Gitlab Runner adalah sebuah service yang digunakan untuk menjalankan job dan mengirimkan hasilnya kembali ke GitLab.. Shared runner sudah tersedia di Gitlab dan dapat digunakan gratis, tapi anda tetap dapat menghubungkan private runner anda ke gitlab jika kurang puas dengan Shared Runner yang disediakan.

Untuk menjalankan gitlab runner menggunakan docker gunakan perintah

docker run -d --name gitlab-runner --restart always \

-v /var/run/docker.sock:/var/run/docker.sock \

-v /srv/gitlab-runner/config:/etc/gitlab-runner \

-v /usr/bin/docker:/usr/bin/docker \

gitlab/gitlab-runner:latest

*Pastikan sudah terinstall docker

Melihat container yang ada di docker dengan perintah docker ps -a

Terlihat terdapat satu container yang berjalan dengan nama gitlab-runner

Untuk masuk ke dalam container gunakan perintah

docker exec -it gitlab-runner bash

Untuk mendapatkan URL dan Token yang akan didaftarkan di gitlab runner dan melihat

gitlab runner yang sudah terdaftar di server gitlab, dengan masuk ke halaman:

setting->CI/CD->Runner

Terdapat register runner dengan url dan token yang akan digunakan pada gitlab runner.

Untuk menghubungkan gitlab-runner dengan server gitlab gunakan perintah

Gitlab-runner register maka akan menampilkan inputan:

Isian yang dimasukkan diambil dari halaman setting->CI/CD->Runner pada server gitlab yang telah dilihat sebelumnya.

Terutama Gitlab install URL dan Registration token

Jika tidak perlu masuk dalam container bisa menggunakan perintah:

docker exec gitlab-runner gitlab-runner register

Jika di server gitlab gitlab-runner belum jalan, lakukan verify gitlab runner dengan perintah:

docker exec gitlab-runner gitlab-runner verify

Sekarang gitlab runner di docker kita sudah tersambung dengan server gitlab .

Untuk menjalankan gitlab runner yang sudah didaftarkan untuk project pastikan pilihan enable shared runners for this project didisable (dimatikan).

Note: jika saat menjalankan pipeline terdapat output error docker not found solusinya

1. Create docker group if not exist : sudo groupadd docker

2. Add user to docker group : sudo usermod -aG docker ${USER}

3. Change docker.sock to new permission : sudo chmod 666 /var/run/docker.sock

4. Finally restart docker daemon service : sudo systemctl restart docker

Tutorial menambahkan 3D models ke dalam aplikasi projek Flutter dengan vectary

2022-06-17T10:31:00.001-07:00

Selamat malam semuanya....

Sesuai dengan judul artikel ini,kali ini saya akan bahas bagaimana menambahkan 3D model ke dalam aplikasi Project flutter dengan memanfaatkan fitur dari website vectary...

Untuk menggunakan fitur dari website vectary,hal pertama yang harus kita lakukan adalah mendaftar ke website tersebut atau bisa langsung dengan login menggunakan akun google kita...

Buka website vectary.com. Selanjutnya masuk dengan akun google.

Setelah berhasil login,kita akan di diperlihatkan halaman dashboard dari website vectary. Selanjutnya pilih new project -> Pilih Template yang ingin ditampilkan pada project aplikasi kita.

Setelah proses diatas selesai,selanjutnya kita kembali ke project flutter (disini saya menggunakan Android Studio). Untuk menampilkan template yang kita pilih dari website vectary ke dalam project flutter,disini kita harus menambahkan package webview_flutter.

Setelah package ditambahkan jangan lupa untuk klik pub get. Setelah proses diatas selesai selanjutnya buat file dart baru dengan nama vectary_screen.dart dan ikuti kode nya seperti dibawah.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class VectaryScreen extends StatefulWidget {
  const VectaryScreen({Key? key}) : super(key: key);

  @override
  State<VectaryScreen> createState() => _VectaryScreenState();
}

class _VectaryScreenState extends State<VectaryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Vectary'),
        elevation: 0,
        actions: const [
          Icon(Icons.shopping_cart),
          SizedBox(
            width: 20,
          ),
          Icon(Icons.share),
          SizedBox(
            width: 20,
          ),
        ],
      ),
      bottomNavigationBar: _buildBottomBarActions(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Expanded(
            child: WebView(
              initialUrl:
                  'https://app.vectary.com/p/4lepw7bb8QnDkTRO8uRiB7',
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          _buildProductTitle(),
        ],
      ),
    );
  }

  Widget _buildBottomBarActions() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                  child: Container(
                height: 50,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Center(
                  child: Text(
                    'Buy Now',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                    ),
                  ),
                ),
              )),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: Container(
                  height: 50,
                  width: 200,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: const Center(
                    child: Text(
                      'Add to bag',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }

  Widget _buildProductTitle() {
    return Column(
      children: const [
        Text(
          'Sneaker',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          'Sneaker X',
          style: TextStyle(
            fontSize: 16,
          ),
        ),
        SizedBox(
          height: 8,
        ),
      ],
    );
  }
}

Setelah itu ubah file main.dart seperti code dibawah

import 'package:flutter/material.dart';
import 'package:tutorials_vectary/vectary_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tutorial Vactary',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const VectaryScreen(),
    );
  }
}

Jika semua langkah sudah dilakukan,jalankan aplikasinya maka hasilnya seperti ini

Link demo:https://www.youtube.com/shorts/es4sAPyTRbI?&ab_channel=ShortsYu

Instalasi prometheus dan grafana untuk monitoring

2022-02-19T23:52:00.003-08:00

Untuk artikel kali ini penulis akan membuat artikel cara instalasi prometheus yang di combine dengan grafana untuk melakukan monitoring server, untuk kasus ini menggunakan server OS ubuntu.

Langkah awal silahkan download file node-exporter di link berikut. Node-exporter merupakan perangkat lunak yang digunakan tepat di samping aplikasi yang ingin diperoleh matriksnya.

https://prometheus.io/docs/guides/node-exporter/

File node-exporter yang sudah di download.

Extract file yang sudah didownload dengan perintah tar

List file yang di extract,terdapat nama folder node_exporter pindahkan/copy ke

folder /usr/local/bin.

Perintah untuk copy file/folder ke /usr/local/bin.

Membuat file .service sebagai contoh dibuatkan nama node-exporter.service di folder /etc/systemd/system

[Unit]

Description=Node Exporter

Wants=network-online-target

After=network-online-target

[Service]

User=ion

Group=root

Type=simple

ExecStart=/usr/local/bin/node_exporter

[Install]

WantedBy=multi-user.target

Untuk menjalankan service yang dibuatkan sebelumnya gunakan perintah systemctl start node-exporter.service

Untuk melihat status service apakah sudah berjalan gunakan perintah systemctl status node-exporter.service. Pastikan service statusnya running.

Untuk mengecek apa service node-exporter sudah berjalan dengan mengakses di browser url

http://localhost:9100/metrics

Atau bisa menggunakan terminal dengan perintah curl localhost:9100/metrics

Langkah selanjutnya instalasi prometheus di docker, prometheus merupakan sistem monitoring berbasis metriks.Download image Prometheus hal ini menggunakan versi 2.32.1 dengan perintah docker pull prom/prometheus:v2.32.1

Sekarang buatkan container prometheus dengan image yang sudah di download. Dengan perintah seperti berikut.

docker run -d --name prometheus --restart always --net host \

-v /home/ion/Downloads/prometheus/prometheus_config/:/etc/prometheus \

-v prometheus-data:/prometheus \

-v /etc/localtime:/etc/localtime:ro \

prom/prometheus:v2.32.1

Buat file dalam folder sebagai contoh di /home/ion/Downloads/prometheus/prometheus_config dengan nama file prometheus.yaml isinya seperti dibawah.

scrape_configs:

# The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.

- job_name: 'prometheus'

# metrics_path defaults to '/metrics'

# scheme defaults to 'http'.

static_configs:

- targets: ['localhost:9090']

- job_name: 'node'

scrape_interval: 10s

static_configs:

- targets: ['localhost:9100']

Untuk mengecek container prometheus sudah berjalan dengan semestinya Akses menggunakan browser dengan url http://localhost:9090, jika berhasil tampilan akan seperti ini.

Langkah selanjutnya instalasi grafana di docker, grafana merupakan alat yang populer untuk membuat dashboard untuk berbagai sistem pemantauan dan non monitor, salah satu tools yang dapat digunakan untuk membuat dashboard saat menggunakan Prometheus. Download image grafana dengan perintah docker pull grafana/grafana:8.3.3

Sekarang membuat container grafana dengan image yang sudah di download. Dengan perintah seperti berikut.

docker run -d --net host --name grafana grafana/grafana:8.3.3

Untuk mengecek container grafana sudah berjalan dengan semestinya Akses menggunakan browser dengan url http://localhost:3000/login. jika berhasil maka akan muncul form login, secara default login menggunakan username dan password admin.

Menambahkan Data source

Masuk ke menu Configuration > Data Source > Add data source

Type > Prometheus

Link untuk melihat Template dashboard grafana.

grafana.com/grafana/dashboards/11074

Import template dashboard grafana

Tanda tambah > import

Isikan id yang didapatkan di link grafana.com/grafana/dashboards/11074 terus tekan tombol load disamping isian kolom.

Setelah tombol load di tekan maka akan muncul tampilan berikut, langsung tekan tombol import maka akan langsung di redirect ke halaman dashboard monitoring.

Tampilan halaman monitoring grafana

Sekian , Terimakasih

Cara menampilkan Progress indicator dengan Image.Network() pada Flutter

2022-02-06T06:37:00.005-08:00

Tutorial kali ini saya ingin membagikan cara menampilkan Progress Indicator dengan Image.Network() pada Flutter...

Code penggunaan Widget Image.Network() sebelum menggunakan progress ketika gambar di load dari internet serta hasilnya:

code image network

Agar ketika proses load gambar dari internet menampilkan progress dialog ubah code diatas menjadi seperti ini..

code setelah

Jika dijalankan maka akan Kelihatan perbedaan sebelum dan sesudah kita meletakkan progress dialog ketika load gambar dari internet...

Saya menyarankan jika ingin load gambar dari internet lebih baik menggunakan Plugin cached_network_image link plugin disini.

Cara menampilkan emulator di dalam jendela Android Studio pada project Flutter

2022-02-06T06:24:00.003-08:00

Sesuai judul artikel,Hari ini saya akan menulis artikel bagaimana cara mengatasi emulator tidak bisa berjalan didalam jendela Android Studio pada project flutter...

Pada versi terbaru Android Studio terdapat fitur untuk menjalankan emulator didalam jendela Android Studio tetapi pada kasus project Flutter default/bawaan fitur tersebut tidak berfungsi meski fitur sudah diaktifkan. Dari permasalahan diatas setelah melakukan riset dan pencarian akhirnya saya menemukan cara mengatasi masalah diatas...

Adapun caranya:

Pertama pastikan fitur enable to lunch windows emulator diaktifkan dengan cara pilih menu setting->pilih tools->emulator->centang menu Launch in a tool window..

Selanjutnya agar fitur aktif pada project flutter kita pastikan untuk mengimpor modul android ke dalam project flutter, dengan cara pilih menu project structure->pilih modules->klik tombol tambah/plus->lalu pilih android (pastikan project di select dulu)->klik OK ....

Setelah langkah diatas sudah diikuti maka permasalahan sudah terselesaikan...

Demikian tutorial kali ini,,semoga dapat membantu....

Membuat aplikasi sederhana tebak jenis kelamin dengan flutter

2022-01-03T01:10:00.006-08:00

Siang semuanya, hari ini saya ingin membagi tutorial sederhana Membuat aplikasi sederhana tebak jenis kelamin dengan Flutter dengan memanfaatkan API dari website genderize.io .Jadi cara kerja aplikasi ini nantinya dengan hanya memasukkan nama,aplikasi akan menampilkan tebakan atau prediksi jenis kelamin dari nama tersebut...

OK pertama tama kita tambahkan package http ke file pubspec.yaml selanjutnya jangan lupa untuk melakukan perintah flutter pub get agar package di load ke project kita...

Selanjutnya buat kan Directory baru dengan nama screen dan didalam directory tersebut kita buat file dart baru dengan nama home_screen ...maka tampilan struktur project nya seperti ini

Lalu masuk ke file main.dart dan ubah code nya seperti dibawah

import 'package:flutter/material.dart';
import 'package:tebak_jenis_kelamin/screen/home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

Setelah langkah diatas selesai diikuti selanjutnya masuk ke file home_screen.dart di dalam file ini kita akan membuat layout beserta logic untuk tebak jenis kelamin berdasarkan nama, Untuk code nya seperti dibawah :

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController _namaController = TextEditingController();
  final String faseLoading = "faseLoading";
  final String faseDone = "faseDone";
  String fase = "";

  String? nama;
  String? jenisKelamin;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: const Text(
            "Tebak Jenis Kelamin",
            style: TextStyle(fontSize: 20),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              _search(context),
              fase == ""
                  ? Container()
                  : fase == faseLoading
                      ? Container(
                          margin: const EdgeInsets.only(top: 20),
                          child: const CircularProgressIndicator())
                      : _jenisKelamin()
            ],
          ),
        ),
      ),
    );
  }

  Widget _search(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 1),
      color: const Color(0xFFEEEEEE),
      child: Card(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(3))),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                padding: const EdgeInsets.only(left: 10, right: 5),
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5),
                      bottomLeft: Radius.circular(5)),
                ),
                child: TextFormField(
                    controller: _namaController,
                    focusNode: FocusNode(canRequestFocus: false),
                    onSaved: (val) {},
                    cursorColor: Theme.of(context).colorScheme.primary,
                    decoration: const InputDecoration(
                      hintText: 'Masukkan nama',
                      hintStyle:
                          TextStyle(fontSize: 16.0, color: Color(0xFFcccccc)),
                      errorStyle: TextStyle(height: 0),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.transparent),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.transparent),
                      ),
                      border: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.transparent),
                      ),
                    ),
                    style:
                        const TextStyle(color: Colors.black, fontSize: 16.0)),
              ),
            ),
            GestureDetector(
              onTap: () {
                if (_namaController.text != "") {
                  tebakJenisKelamin();
                  FocusScope.of(context).requestFocus(FocusNode());
                } else {
                  setFase("");
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                    content: Text("Nama belum diisi"),
                  ));
                }
              },
              child: Wrap(
                children: [
                  Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 12, horizontal: 10),
                    decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primary,
                        borderRadius: const BorderRadius.only(
                            bottomRight: Radius.circular(3),
                            topRight: Radius.circular(3))),
                    child: const Icon(
                      Icons.search,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _jenisKelamin() {
    if (jenisKelamin != null) {
      return Container(
        margin: const EdgeInsets.only(top: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              jenisKelamin == "male" ? "Laki-laki" : "Perempuan",
              style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
            ),
            Icon(
              jenisKelamin == "male" ? Icons.male : Icons.female,
              color: jenisKelamin == "male" ? Colors.blue : Colors.pink,
              size: 100,
            ),
          ],
        ),
      );
    }

    return Container();
  }

  tebakJenisKelamin() async {
    setFase(faseLoading);
    var url =
        Uri.parse('https://api.genderize.io/?name=${_namaController.text}');
    var response = await http.get(url);
    var body = json.decode(response.body);
    setState(() {
      jenisKelamin = '${body['gender']}';
      setFase(faseDone);
    });
  }

  setFase(String fase) {
    setState(() {
      this.fase = fase;
    });
  }
}

Demikian tutorial kali ini..semoga tulisan ini bermanfaat untuk yang membaca tulisan ini serta untuk penulis pribadi....

Demo aplikasi silahkan klik disini

Terima kasih!!!!

Tutorial Ambil Gambar dari Galeri dan Kamera di Flutter

2021-12-30T22:06:00.012-08:00

Tutorial kali ini kita akan membahas bagaimana implementasi package image_picker pada project flutter kita agar bisa mengambil gambar dari galeri atau kamera,disini saya menggunakan package image_picker dengan versi ^0.8.4+4, untuk melihat versi terbaru silahkan kunjungi link disini. Project ini sudah mendukung null safety sehingga jika teman-teman ingin ikuti tutorial ini saya sarankan agar upgrade versi flutter anda agar mendukung null safety...

Pertama kita tambahkan package image_picker pada file pubspec.yaml, selanjutnya jangan lupa untuk melakukan perintah pub get agar package di load ke project kita...

Berikutnya jika langkah di atas sudah dilakukan kita akan memulai membuat design halaman awal dengan tampilan gambar seperti di bawah

untuk code nya seperti ini:

    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          leadingWidth: 35,
          iconTheme: const IconThemeData(color: Colors.white),
          title: Container(
            padding: const EdgeInsets.only(top: 10, bottom: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const <Widget>[
                Text(
                  "Image Picker",
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ],
            ),
          ),
          actions: [
            GestureDetector(
                onTap: () {
                  showModalBottomSheet(
                    context: context,
                    backgroundColor: Colors.transparent,
                    builder: ((builder) => _ambilGambar()),
                  );
                },
                child: Container(
                    padding: const EdgeInsets.only(right: 8),
                    child: const Icon(Icons.image_search)))
          ],
        ),
        body: Container(
          color: const Color(0xFFf2f2f2),
          child: _image == null
              ? const Center(
                  child: Icon(
                  Icons.image_aspect_ratio,
                  color: Color(0xFFE0E0E0),
                  size: 100,
                ))
              : Image(
                  width: double.infinity,
                  height: double.infinity,
                  image: FileImage(File(_image!.path))),
        ));

Selanjutnya kita akan membuat tampilan bottom sheet dialog beserta aksi tombol dimana design nya akan menampilkan dua pilihan untuk memilih mengambil gambar dari camera atau galeri

source code untuk Widget tampilan bottom sheet dialog beserta logicnya :

 Widget _ambilGambar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)),
      ),
      child: Wrap(
        children: <Widget>[
          Container(
            width: double.infinity,
            padding: const EdgeInsets.only(top: 10, bottom: 20),
            child: const Text(
              "Ambil Gambar",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.camera);
                },
                child: Column(
                  children: [
                    const Icon(
                      Icons.camera,
                      size: 40,
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 5),
                        child: const Text("Ambil dari Kamera"))
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.gallery);
                },
                child: Column(
                  children: [
                    const Icon(
                      Icons.image,
                      size: 40,
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 5),
                        child: const Text("Ambil dari Galeri"))
                  ],
                ),
              ),
            ),
          ]),
          Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 10),
              margin: const EdgeInsets.only(top: 20),
              color: Theme.of(context).colorScheme.primary,
              child: const Text(
                'TUTUP',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ))
        ],
      ),
    );
  }

  Future getImage(ImageSource src) async {
    var image = await _picker.pickImage(source: src);
    setState(() {
      _image = image;
    });
  }

Tampilan ketika memilih camera atau galeri dan hasilnya:

Untuk source code lengkapnya:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const ImagePickerPage(),
    );
  }
}

class ImagePickerPage extends StatefulWidget {
  const ImagePickerPage({Key? key}) : super(key: key);

  @override
  State<ImagePickerPage> createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  XFile? _image;
  final ImagePicker _picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          leadingWidth: 35,
          iconTheme: const IconThemeData(color: Colors.white),
          title: Container(
            padding: const EdgeInsets.only(top: 10, bottom: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const <Widget>[
                Text(
                  "Image Picker",
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ],
            ),
          ),
          actions: [
            GestureDetector(
                onTap: () {
                  showModalBottomSheet(
                    context: context,
                    backgroundColor: Colors.transparent,
                    builder: ((builder) => _ambilGambar()),
                  );
                },
                child: Container(
                    padding: const EdgeInsets.only(right: 8),
                    child: const Icon(Icons.image_search)))
          ],
        ),
        body: Container(
          color: const Color(0xFFf2f2f2),
          child: _image == null
              ? const Center(
                  child: Icon(
                  Icons.image_aspect_ratio,
                  color: Color(0xFFE0E0E0),
                  size: 100,
                ))
              : Image(
                  width: double.infinity,
                  height: double.infinity,
                  image: FileImage(File(_image!.path))),
        ));
  }

  Widget _ambilGambar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)),
      ),
      child: Wrap(
        children: <Widget>[
          Container(
            width: double.infinity,
            padding: const EdgeInsets.only(top: 10, bottom: 20),
            child: const Text(
              "Ambil Gambar",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.camera);
                },
                child: Column(
                  children: [
                    const Icon(
                      Icons.camera,
                      size: 40,
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 5),
                        child: const Text("Ambil dari Kamera"))
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.gallery);
                },
                child: Column(
                  children: [
                    const Icon(
                      Icons.image,
                      size: 40,
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 5),
                        child: const Text("Ambil dari Galeri"))
                  ],
                ),
              ),
            ),
          ]),
          Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 10),
              margin: const EdgeInsets.only(top: 20),
              color: Theme.of(context).colorScheme.primary,
              child: const Text(
                'TUTUP',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ))
        ],
      ),
    );
  }

  Future getImage(ImageSource src) async {
    var image = await _picker.pickImage(source: src);
    setState(() {
      _image = image;
    });
  }
}

Demikian tutorial kali ini..semoga tulisan ini bermanfaat untuk yang membaca tulisan ini serta untuk penulis pribadi....

Demo aplikasi silahkan klik disini

Terima kasih!!!!

Source Code Aplikasi Resep masakan menggunakan Flutter

2021-12-19T20:32:00.007-08:00

Hari ini saya ingin membagikan source code aplikasi resep masakan menggunakan Flutter,dimana aplikasi ini menggunakan API dari https://masak-apa-tomorisakura.vercel.app/ dan sudah mendukung null safety.

Aplikasi ini memiliki fitur:
1. Daftar resep terbaru
2. Daftar resep per kategori
3. Daftar kategori
4. Pencarian resep

Beberapa tampilan dari aplikasi ini

Demo aplikasi silahkan klik disini

Untuk mendownload source code nya silahkan klik tombol di bawah

Cara mengatasi dual monitor tidak berfungsi atau tidak terbaca pada Ubuntu 18.04

2021-12-06T19:39:00.005-08:00

Tutorial kali ini saya akan membagi pengalaman saya menggunakan Ubuntu 18.04 ketika menggunakan dual monitor menggunakan kabel HDMI dimana monitor kedua tidak terbaca atau tidak menampilkan layar...Setelah beberapa cara saya lakukan akhirnya saya menemukan cara yang berhasil di kasus saya yaitu dengan cara...

Pertama buka terminal lalu ketik kan perintah sebagai berikut:

sudo dpkg-reconfigure gdm3 (mengganti manager tampilan bolak-balik antara gdm3 dan lightdm)

Jika perintah diatas sudah di lakukan maka akan tampil dialog pilihan (gdm3 dan lightdm) maka pilih lightdm, langkah selanjutnya ketik kan perintah

sudo apt-get install --reinstall lightdm ubuntu-desktop (menginstal ulang lightdm dan mengonfigurasi ulang lagi alih-alih menggunakan gdm3). Jika semua langkah sudah dilakukan cabut ulang kabel HDMI dan masukkan kembali...

Demikian tutorial Cara mengatasi dual monitor tidak berfungsi atau tidak terbaca pada Ubuntu 18.04

Menjalankan Winbox dengan wine pada linux

2021-12-02T08:06:00.002-08:00

Bagi Pengguna linux untuk menjalankan aplikasi windows tidak mudah, salah satu cara untuk menjalankan aplikasi windows di linux bisa menggunakan wine. Pertama pastikan teman” sudah menginstall aplikasi paket wine.Untuk mengecek apakah wine sudah terinstall apa belum dengan mengetikkan wine --version.

Sebelum memulai pastikan kita memiliki 2 file yang sudah didownload yaitu aplikasi winbox.exe dan gambar Winbox.png, disini filenya saya simpan di folder KetikanMD. Untuk aplikasi winbox bisa di download melalui link ini.

https://mikrotik.com/download

Copy 2 file yang sudah didownload ke folder windows pada folder instalasi wine

Pastikan kedua file sudah ada di folder windows

Sekarang kita coba menjalankan winbox tanpa harus berada dengan satu folder dengan aplikasi winbox.exe

Untuk membuat pintasan yang memungkinkan aplikasi untuk dijalankan, kita buatkan file winbox.desktop di folder /usr/share/applications

Membuat file winbox.desktop menggunakan nano, disini teman” bebas menggunakan editor yang teman” mengerti.

Berikut isian file winbox.Desktop

[Desktop Entry]
Name=Winbox
GenericName=Mikrotik winbox
TryExec=wine winbox
Exec=wine winbox.exe
Terminal=false
Icon=/home/ion/.wine/drive_c/windows/Winbox.png
Type=Application
Categories=Internet
Comment=Remote Mikrotik
Keywork=mikrotik;winbox

Jika semua langka diatas sudah dilakukan maka kita telah berhasil menjalankan aplikasi winbox.

Membuat Makefile dan kegunaannya

2021-11-20T04:14:00.003-08:00

Sekarang kita akan mempelajari makefile. Apa Sih itu makefile, Makefile adalah kumpulan script yang akan di-eksekusi oleh command make. make merupakan automation-tools yang diciptakan di Unix-type OS. Jadi jika OS anda merupakan satu clan dengan Unix (Linux, MacOS) maka command ini seharusnya ada.

Beberapa kegunaan makefile yaitu ketika kita diharuskan mengetikkan command yang panjang tiap kali melakukan sesuatu dan harus menghafal semua command yang panjang tersebut. Namun telah dibuat suatu cara untuk mempermudah pekerjaan tersebut, yaitu dengan penggunaan makefile.

Konsepnya sederhana, kita hanya perlu define beberapa command dan proses yang akan dilakukan didalam Makefile. Selanjutnya kita tinggal memanggil script tersebut dengan command make.

Jika kita menjalankan make, Program ini akan mencari sebuah file bernama makefile pada direktori, lalu mengeksekusinya. Jika terdapat beberapa makefile, maka dapat pula dieksekusi dengan perintah :

make –f makefile

Adapun lebih lengkap mengenai make dapat dilihat dengan man make.

Untuk case ini kita mempunyai project django dan menjalankan project django menggunakan makefile. Kita sudah membuat file dengan nama Makefile didalam folder yang sama dengan project django seperti dibawah ini.

*Bagi teman” yang belum tahu cara instalasi django bisa kunjungi link ini.

Kita memiliki Makefile dengan isi seperti gambar dibawah.

Penjelasan:

Baris 2,6,10:
- nama definisi command saat dipanggil make

Baris 3,7,11:

- eksekusi command pada django

.PHONY: runserver

berarti kata "runserver" tidak mewakili nama file di Makefile ini;
berarti Makefile tidak ada hubungannya dengan file bernama "runserver" di direktori yang sama.

Cara menggunakan makefile untuk memanggil define command yang kita buat yaitu dengan cara seperti berikut:

Menjalankan server Django

Penjelasan:

Make runserver

kata “runserver” mewakili definisi command yang merujuk ke command “@python manage.py runserver” yang sudah kita buatkan sebelumnya di dalam file Makefile.

Create app project Django

Penjelasan:

Make createartikel

kata “createartikel” mewakili definisi command yang merujuk ke command “@python manage.py startapp artikel” yang sudah kita buatkan sebelumnya di dalam file Makefile, setelah mengeksekusi perintah “Make createartikel” secara otomatis akan terbuat folder dengan nama artikel.

Create app project Django secara dinamis dengan variabel

Penjelasan:

Make createapp app=berita
- kata “createapp” mewakili definisi command yang merujuk ke command “@python manage.py startapp $(app)” yang sudah kita buatkan sebelumnya di dalam file Makefile.

- Kata “app” merupakan nama variabel yang sudah didefinisikan di command “@python manage.py startapp $(app)”.

- Kata “berita” merupakan nama app yang akan kita buatkan, kata “berita” bisa diubah sesuai keinginan.

Setelah selesai mengeksekusi perintah “Make createapp app=berita” secara otomatis akan terbuat folder dengan nama berita.

Begitu kira” penggunaan makefile, teman” bisa menggunakan makefile sesuai kebutuhan.

Lebih jauh tentang makefile bisa kunjungi artikel berikut.

https://www.gnu.org/software/make/manual/make.html

Menampilkan Tombol Flutter Hot Restart di Navigation Bar Toolbar pada Android Studio

2021-11-10T01:00:00.003-08:00

Default tampilan actions flutter pada bagian Navigation Bar Toolbar yang ada pada Android Studio tidak ada tombol Flutter Hot Restart namun berada pada bagian bawah di menu Debug seperti gambar dibawah. Dan setelah otak atik Android Studio, saya menemukan cara mengatasi masalah yang saya sebutkan diatas...

Adapun cara untuk Menampilkan Tombol Flutter Hot Restart di Navigation Bar Toolbar...

Pertama pilih menu File lalu pilih Settings (atau menggunakan kombinasi tombol Ctrl+Alt+S) maka akan muncul halaman settings. Selanjutnya pada menu Appearance & Behavior pilih sub menu Menus and Toolbars lalu klik folder Run/Debug.

Selanjutnya klik simbol Plus/Tambah maka akan muncul popup lalu pilih Add Action

Maka akan muncul tampilan untuk menambahkan Actions baru, pada kolom search masukkan kata Flutter hot restart selanjutnya pilih action tersebut lalu klik OK.

Jika berhasil menambahkan action tadi maka akan muncul daftar actions seperti gambar di bawah lalu klik OK

Jika semua langkah berhasil dilakukan maka tampilan Android Studio akan seperti gambar dibawah

Plugin agar tampilan Android Studio terlihat keren dan nyaman di pandang mata

2021-11-09T10:31:00.005-08:00

Android Studio adalah salah satu IDE (Integrated Development Environment) yang didesain khusus untuk pengembangan Android. Sebagai seorang Mobile Developer, Pemilihan Tema/tampilan Android Studio salah satu faktor yang bisa meningkatkan kinerja dan kecepatan saat menulis code....

Dari Pengalaman pribadi menggunakan android studio ada beberapa plugin yang cocok agar tampilan Android Studio terlihat lebih keren dan nyaman dipandang mata, plugin ini cocok untuk anda yang suka tampilan dark mode (mode gelap). Berikut daftar plugin yang wajib di pasang pada IDE Android Studio:

1. One dark Theme (tema untuk Android Studio)

2.Atom Material Icons (ikon untuk Android Studio)

Adapun cara memasang Plugin pada Android Studio adalah dengan cara klik menu File->pilih Settings -> akan muncul window baru Selanjutnya pilih menu Plugins dan pada bagian marketplace ketik kan satu persatu plugin diatas lalu klik tombol install...setelah kedua plugin diatas di install, restart Android Studio dengan cara klik menu File -> lalu pilih menu Invalidate Caches/Restart ->lalu pilih pilihan Just Restart tunggu beberapa saat maka Android Studio akun terbuka lagi....

Jika tema Android Studio tidak berubah menggunakan tema One Dark Theme maka kita harus ubah setelah tema Android Studio dengan cara klik File setelah itu pilih Settings lalu pilih menu Appearance & Behavior dan pilih sub menu Appearance ->pada bagian Theme pilih One Dark setelah itu pilih OK maka tema Android Studio akan berubah...

Membuat Bottom Navigation Bar dengan Flutter

2021-10-26T18:58:00.004-07:00

Selamat siang teman teman hari ini saya akan membagikan tutorial cara membuat Bottom Navigation Bar dengan menggunakan Flutter....

Contoh Bottom Navigation Bar yang akan kita buat seperti gambar di bawah:

Pertama tama kita sediakan 2 file dart dengan nama:

home.dart
bottom_navigation.dart

Adapun code untuk File home.dart sebagai berikut:

import 'package:bottom_navigation_bar/bottom_navigation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BottomNavigation(title: 'Bottom Navigation Bar'),
    );
  }
}

Selanjutnya untuk file bottom_navigation.dart masukkan code dibawah:

import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget {
  const BottomNavigation({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int currentPage = 0;
  String text = "Home Page";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(text),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setPage(4, "Add Items"),
        child: const Icon(
          Icons.add,
          color: Colors.white,
          size: 30,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.blue,
        shape: const CircularNotchedRectangle(),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                  onPressed: () => setPage(0, "Home Page"),
                  icon: Icon(
                    Icons.home,
                    color: currentPage == 0 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              IconButton(
                  onPressed: () => setPage(1, "Search Page"),
                  icon: Icon(
                    Icons.search,
                    color: currentPage == 1 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              const SizedBox(),
              IconButton(
                  onPressed: () => setPage(2, "Notifications Page"),
                  icon: Icon(
                    Icons.notifications,
                    color: currentPage == 2 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              IconButton(
                  onPressed: () => setPage(3, "History Page"),
                  icon: Icon(
                    Icons.history,
                    color: currentPage == 3 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
            ],
          ),
        ),
      ),
    );
  }

  void setPage(int index, String text) {
    setState(() {
      currentPage = index;
      this.text = text;
    });
  }
}

Jika cara diatas sudah dilakukan maka selanjutnya jalankan aplikasi, jika tampilan aplikasi sama dengan contoh diatas....SELAMAT anda sudah bisa membuat Bottom Navigation Bar dengan Flutter

Untuk lebih jelasnya silahkan lihat tutorial nya di video berikut
Link Youtube

Tutorial Membuat Spinner Multi Select Menggunakan flutter

2021-08-09T12:24:00.000-07:00

Selamat malam teman teman,pada kesempatan kali ini saya ingin membagi tutorial bagaimana cara membuat spinner multi select menggunakan flutter dengan memanfaatkan package multi_select_flutter. Pada tutorial kali ini saya menggunakan versi ^4.0.0 .

Adapun hasil akhir tampilan dari tutorial kali ini adalah seperti berikut:

Disini saya mengasumsikan teman teman sudah bisa membuat project baru flutter, Di tutorial ini saya menggunakan IDE Android Studio, bagi teman teman yang menggunakan IDE Visual Studio Code tidak masalah karena itu tergantung dari kenyamanan teman teman dalam menulis code....

OK,Untuk menggunakan package multi_select_flutter kita harus menambahkan pada file pubspec.yaml seperti contoh dibawah:

Jangan lupa setelah menambahkan dependencies ke pubspec.yaml agar melakukan perintah flutter pub get pada terminal yang bertujuan memerintahkan flutter untuk menambahkan dependencies ke folder dependencies yang telah flutter sediakan.

Atau bisa dengan cara klik "Pub get" pada sudut kanan atas di file pubspec.yaml.

Selanjutnya kita perlu ubah isi dari file main.dart menjadi seperti berikut:

import 'package:flutter/material.dart';
import 'package:multi_select_flutter/bottom_sheet/multi_select_bottom_sheet_field.dart';
import 'package:multi_select_flutter/chip_display/multi_select_chip_display.dart';
import 'package:multi_select_flutter/util/multi_select_item.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Select',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Multi Select'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static List<SpinnerMulti> _angka = [
    SpinnerMulti(id: 1, name: "Satu"),
    SpinnerMulti(id: 2, name: "Dua"),
    SpinnerMulti(id: 3, name: "Tiga"),
    SpinnerMulti(id: 4, name: "Empat"),
    SpinnerMulti(id: 5, name: "Lima"),
  ];
  final _itemsAngka = _angka
      .map((angka) => MultiSelectItem<SpinnerMulti>(angka, angka.name))
      .toList();
  List<SpinnerMulti?> _selectedAngka = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Color.fromRGBO(33, 33, 33, 0.5),
                        width: 1,
                      ),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: MultiSelectBottomSheetField<SpinnerMulti?>(
                      initialChildSize: 0.7,
                      decoration: BoxDecoration(color: Colors.transparent),
                      maxChildSize: 0.95,
                      title: Text("Angka"),
                      buttonText: Text(
                        "Angka",
                        style:
                            TextStyle(color: Color.fromRGBO(33, 33, 33, 0.7)),
                      ),
                      items: _itemsAngka,
                      searchable: true,
                      searchHint: "Cari",
                      buttonIcon: Icon(
                        Icons.add_circle_outline,
                        color: Color.fromRGBO(33, 33, 33, 0.5),
                      ),
                      cancelText: Text("Tutup"),
                      onConfirm: (values) {
                        setState(() {
                          _selectedAngka = values;
                        });
                      },
                      chipDisplay: MultiSelectChipDisplay(
                        decoration: BoxDecoration(
                          border: Border(
                            top: BorderSide(
                                width: 1.0,
                                color: Color.fromRGBO(33, 33, 33, 0.5)),
                          ),
                        ),
                        onTap: (item) {},
                      ),
                    ) // This trailing comma makes auto-formatting nicer for build methods.
                    ),
              ],
            ),
          ),
        ));
  }
}

class SpinnerMulti {
  final int id;
  final String name;

  SpinnerMulti({required this.id, required this.name});
}

Setelah semua langkah sudah kita lakukan,silahkan running project nya...

Sekian tutorial kali ini, Jangan sungkan untuk bertanya di kolom komentar di bawah jika mendapat error....

Cara instalasi Framework Django

2021-05-04T23:39:00.002-07:00

Kali ini ketikanMD akan membuat tutorial yang sesuai dengan judulnya yaitu instalasi Framework django.

1. Pastikan kita sudah menginstall python, untuk mengecek dengan perintah python --version

2. Sekarang kita akan melakukan install PIP, PIP yaitu (PIP Install Packages) / Paket manager pada pemrograman python.

# apt install python3-pip python-dev

3. Melakukan verifikasi instalasi PIP.

$ pip3 -V

4. Selanjutnya kita akan membuat folder di “~/ketikanMD/” dengan nama “django” untuk menampung project django kita.

5. membuat Env (pastikan sudah berada di dalam folder project) dengan Module yang digunakan untuk membuat Virtual Environments yaitu module venv, kegunaan Virtual environments untuk membuat sebuah environment yang terisolasi dari dunia luar. Sehingga, modul python apapun yang diinstall tidak mempengaruhi environment global, dan yang terpenting, project lainnya.

$ python -m venv env

* Terlihat ada folder dengan nama env

6. masuk/mangaktifkan Virtual Environment

$ source env/bin/activate

* Terlihat ada tanda (env) setalah mengeksekusi perintah diatas

7. Melihat package yang sudah diinstall pip.

8. Melakukan upgrade pip

$ pip install --upgrade pip

9. Melakukan instalasi django disini kita akan instalasi versi 2.2, disini bisa sesuaikan dengan versi django kebutuhan teman".

$ pip install Django==2.2

10. Mengecek instalasi paket django menggunakan pip

11. Sekarang kita akan membuat project django dengan nama project “ketikanMD” dengan perintah django-admin startproject ketikanMD, secara otomatis akan terbuat folder berdasarkan nama project yang sudah ditentukan yaitu ketikanMD.

12. Menjalankan project yang kita buat, pastikan kita masuk ke dalam folder project kita yaitu ketikanMD

$ python manage.py runserver

13. Buka browser dan masukkan url http://127.0.0.1:8000 (sesuaikan dengan tampilan tanda kotak merah).

Sekarang kita sudah berhasil menginstall django dan menjalankan project django

14. Untuk Keluar dari environment

$ deactive

* secara otomatis tanda (env) akan hilang

Semoga Berhasil

Source code Aplikasi Mesin ATM Sederhana menggunakan bahasa pemrograman C++

2021-05-04T07:46:00.002-07:00

Gimana kabarnya teman teman sekalian...

Hari ini saya akan membagikan source code aplikasi Mesin ATM sederhana yang dibuat menggunakan bahasa pemrograman C++,dimana aplikasi ini memiliki 4 menu yaitu:

1. Tarik Tunai

2. Tabung Tunai

3. Cek Saldo

4. Transfer

Di dalam aplikasi ini juga diterapkan perulangan do while untuk menanyakan apakah akan melakukan transaksi kembali setelah transaksi sebelumnya berhasil...

Berikut saya lampir kan source code nya:

#include <iostream>
#include <cstdlib>

using namespace std;
int saldo_awal;

void header(){
cout<<"=========================================\n"
	<<"\t	SELAMAT DATANG DI ATM BERKAH		\n"
	<<"========================================= \n";
}
void footer(){
cout<<"=========================================\n"
	<<"\t	Terima Kasih atas kunjungan anda\n"
	<<"\t silahkan cek kembali uang anda\n"
	<<"dan pastikan tidak ada barang yang tertinggal\n"
	<<"========================================= \n";
}

void cekSaldo(){
    	cout<<"total saldo anda sekarang adalah "<<saldo_awal <<" rupiah"<< endl;
	cout<<"=========================\n";
}

int main(){
	
int tarik,setor,rekTujuan,transfer,kode;
string ulang;

header();
                    
cout<<"silahkan masukkan Saldo Awal anda:";
cin>>saldo_awal;

menu :
	cout<<"\nselamat datang\n\n";
	do{
	 system ("cls");
cout<<"PILIHAN MENU\n";
cout<<"1.tarik tunai\n2,tabung tunai\n3,cek saldo\n4,transfer\n\n";
cout<<"Masukkan kode menu :";
cin>>kode;
if(kode == 1){
	tarik :
cout<<"\n==========================\n";
cout<<"tarik tunai\n";
cout<<"============================\n";
cout<<"silahkan masukkan uang yang anda ingin ambil:";
cin>>tarik;
if(tarik<0){
cout<<"Jumlah penarikan masih kosong\n";
system("cls");
header();
goto tarik;
}
else{
	if (tarik>saldo_awal){
		cout<<"saldo tidak mencukupi\n";
	}
else{
	saldo_awal-=tarik;
	cout<<"=========================\n";
	cout<<"silahkan hitung kembali uang yang telah anda ambil\n";
	cekSaldo();
}
system("cls");
}
}else if (kode==2){
	setor :
cout<<"\n==========================\n";
cout<<"setor tunai\n";
cout<<"============================\n";
cout<<"silahkan masukkan uang yang anda ingin setor:";
cin>>setor;
if(setor<0){
cout<<"Jumlah setor masih kosong\n";
system("cls");
header();
goto setor;
}else{
	saldo_awal+=setor;
	cout<<"=========================\n";
	cout<<"silahkan hitung kembali uang yang telah anda ambil\n";
	cekSaldo();
}
}else if (kode==3){
	cout<<"\n=======================\n";
	cout<<"cek saldo\n";
	cout<<"=========================\n";
	cekSaldo();
system("cls");

}else if (kode==4){
	transfer :
cout<<"\n==========================\n";
cout<<"transfer\n";
	cout<<"=========================\n";
 cout << "Masukkan No. Rekening Tujuan: ";
      cin >> rekTujuan;
cout<<"============================\n";
cout<<"silahkan masukkan jumlah uang yang anda ingin transfer:";
cin>>transfer;
if(transfer<0){
cout<<"Jumlah transfer masih kosong\n";
system("cls");
header();
goto transfer;
}
else{
	if (transfer>saldo_awal){
		cout<<"saldo tidak mencukupi\n";
	}
else{
	saldo_awal-=transfer;
	cout<<"=========================\n";
	cout << " Anda telah transfer ke " << rekTujuan << " sebesar " << transfer <<
	" Rupiah"<< endl;
cekSaldo();
}
system("cls");
}
}else{
	cout<<"\nkode yang anda masukkan tidak ada,\npastikan kode yang anda masukkan benar\n";
system("pause");
system("cls");
header();
goto menu;
}
  cout << "Anda ingin melakukan transaksi lainnya ? <y/n> ";
      cin >> ulang;
      if (ulang == "y")
	{
	  system ("cls");
	}
      else if (ulang == "n")
	{
	  system ("cls");
	  cout <<
	    "Terima Kasih telah menggunakan ATM BERKAH\n Semoga hari anda menyenangkan ";
	}
}  while (ulang == "y");
}

Gambar Hasil menjalankan program

Saya berharap semoga melalui tulisan ini dapat membantu teman teman sekalian..

Menjalankan golang di Docker

2021-05-03T08:08:00.002-07:00

Sekarang kita akan membahas bagaimana cara menjalankan file golang menggunakan docker, tanpa basa basi kita mulai:

1.Membuat folder sebagai contoh disini kita akan membuat foder dengan nama “belajar-golang” di dalam folder ~/Document/ untuk menampung file go dan Dockerfile. Setelah itu Masuk ke dalam folder belajar-golang

2.Membuat file Dockerfile di folder belajar-golang yang didalamnya berisi script berikut.

FROM golang:latest

RUN mkdir /app

WORKDIR /app

3. Menjalankan dockerfile dengan membuat image baru sebagai contoh “go-simple” dengan perintah

- docker build -t go-simple .

4. Mengecek images “go-simple” yang telah dibuat dengan perintah

- docker images

5. Membuat container menggunakan image id “go-simple” dengan nama container “golang”.

- docker run -td -v ~/Documents/belajar-golang:/app --name golang 17f5d90daf3c

6. Mengecek container apakah sudah berjalan dan pastikan status dalam keadaan up.

7. Sekarang kita akan membuat file main.go dengan isian code sebagai berikut

package main
import "fmt"
func main() {
   nama := "KetikanMd"
   fmt.Println(nama)
}

8. Pastikan file main.go dan dockerfile didalam folder yang sama.

9. Sekarang kita akan menjalankan file go ada di dalam container yang sudah syncron dengan file yang ada di local laptop kita.

- docker exec golang go run main.go

* maka output yang dikeluarkan yaitu ketikanMD sesuai output yang diinginkan pada file main.go

Semoga berhasil....

Cara mengetahui IP parangkat dalam satu jaringan

2021-05-01T00:06:00.003-07:00

Kali ini ketikanmd akan menulis artikel berkaitan dengan pengalaman pribadi sipenulis, kasusnya saya sama rekan kerja sedang melakukan maintenance jaringan salah satu kendala yang kami hadapi yaitu kebingungan untuk mengatahui ip address perangkat access point hal ini dikarenakan yang melakukan settingan perangkat AP nya karyawan sebelumnya. setelah mencari beberapa cara kami mendapatkan satu cara yang dibilang cara terakhir yaitu menggunakan script setelah menemukan beberapa ip yang statusnya success maka kami coba satu" untuk mengetahui ip perangkat yang kami cari alhasil kami berhasil, tidak perlu banyak cerita langsung saja ke tutorialnya:

Note: disini menggunakan sistem operasi windows.

pertama buka powershell, dengan cara ketik powershell di pencarian windows
Copykan script berikut ke powershell

Penjelasan:

-simpan perintah ping ke dalam variable $ping

$ping = New-Object System.Net.Networkinformation.Ping

1..254 | % { $ping.send(“192.168.7._$”) | select address, status}

1..254 -> range ip yang akan diping
192.168.7. -> network ip yang akan di ping.

Sesuaikan dengan case yang dilapangan, Semoga bermamfaat walaupun ini bukan cara yang terbaik tapi tidak menutup kemungkinan kita akan membutuhkan.

Mengerjakan challenge SOAL dengan menggunakan bahasa pemrograman C++

2021-03-24T00:26:00.005-07:00

Hari ini saya akan mengerjakan sebuah soal dengan menggunakan bahasa pemrograman C++. Adapun soal yang akan saya kerjakan adalah sebagai berikut:

25 / 100

Keterangan:

- dibutuhkan 25 hari untuk membangun sebuah kebiasaan

- dibutuhkan 100 hari untuk membangun sebuah gaya hidup

Berdasarkan rumus di atas, seorang lelaki sebut saja si Aldi bertekad membuat kegiatan lari pagi sebagai gaya hidupnya. Jika lari pagi sudah tercatat sebagai kebiasaannya sejak Minggu, 1 Januari 2021 maka pada hari dan tanggal berapakah dia mulai lari pagi dan lari pagi menjadi gaya hidupnya?

Ketentuan:

1. Tiap bulan memiliki 30 hari, tiap tahun memiliki 12 bulan.

2. Menggunakan maksimal 7 variabel.

3. Terdapat 4 input-an untuk hari, tanggal, bulan dan tahun. 

4. Minimal terdapat dua penggunaan switch-case.

5. Terdapat penggunaan statement looping.

Berikut saya tampilkan source code nya:

#include <iostream>

using namespace std;

string KonversiHari (int inputHari){
  switch (inputHari){
    case 0:
      return "Minggu";
      break;
    case 1:
      return "Senin";
      break;
    case 2:
      return "Selasa";
      break;
    case 3:
      return "Rabu";
      break;
    case 4:
      return "Kamis";
      break;
    case 5:
      return "Jumat";
      break;
    case 6:
      return "Sabtu";
      break;
    default:
      return "Hari salah";
    }


}

string KonversiBulan (int inputBulan){
  switch (inputBulan){
    case 1:
      return "Januari";
      break;
    case 2:
      return "Februari";
      break;
    case 3:
      return "Maret";
      break;
    case 4:
      return "April";
      break;
    case 5:
      return "Mei";
      break;
    case 6:
      return "Juni";
      break;
    case 7:
      return "Juli";
      break;
    case 8:
      return "Agustus";
      break;
    case 9:
      return "September";
      break;
    case 10:
      return "Oktober";
      break;
    case 11:
      return "November";
      break;
    case 12:
      return "Desember";
      break;
    default:
      return "Bulan salah";
    }


}

int CekHari (int hari, int hitungan){
  if (hari == 0){
      if (((hitungan + hari) % 7) == 0){
	  return hari;
      }else{
	  return 7 - ((hitungan + hari) % 7);
      }
      return hari;
    }else
     return hari - (hitungan % 7);
}


void CekKebiasaan (string keterangan, int hari, int hitungan,
	      int inputTanggal, int inputBulan, int inputTahun, bool mulai){
  int tanggal = inputTanggal;
  int bulan = inputBulan;
  int tahun = inputTahun;
  if (mulai)
    {
      for (int i = hitungan; i >= 1; i--)
	{
	  tanggal--;
	  if (tanggal < 1)
	    {

	      tanggal = 30;
	      bulan--;
	      if (bulan < 1)
		{
		  bulan = 12;
		  tahun--;
		}
	    }

	}
    }
  else
    {

      for (int i = 1; i <= hitungan; i++)
	{

	  tanggal++;
	  if (tanggal > 30)
	    {
	      tanggal = 1;
	      bulan++;
	      if (bulan > 12)
		{

		  bulan = 1;
		  tahun++;
		}
	    }
	}

    }

  cout << keterangan <<
    KonversiHari (mulai ? CekHari (hari, hitungan)
		  : ((hitungan +
		      hari) %
		     7)) << ", " << tanggal << " " <<
    KonversiBulan (bulan) << " " << tahun;
}



int main (){
  int inputHari, inputTanggal, inputBulan, inputTahun;
  cout << "Masukkan hari (0 = Minggu..... 6 = Sabtu)" << endl;
  cout << "Pilihan Anda: ";
  cin >> inputHari;
  cout << "\nMasukkan tanggal: ";
  cin >> inputTanggal;
  cout << "\nMasukkan bulan: ";
  cin >> inputBulan;
  cout << "\nMasukkan tahun: ";
  cin >> inputTahun;
  CekKebiasaan ("\nAldi mulai pada hari ", inputHari, 25,
		inputTanggal, inputBulan, inputTahun, true);
  cout << "\nMenjadi kebiasaan pada hari " <<
    KonversiHari (inputHari) << ", " << inputTanggal << " " <<
    KonversiBulan (inputBulan) << " " << inputTahun;
  CekKebiasaan ("\nMenjadi gaya hidup pada hari ", inputHari, 75,
		inputTanggal, inputBulan, inputTahun, false);
  return 0;
}

Script mengaktifkan user hotspot sesuai jadwal harian pada mikrotik

2021-03-16T22:51:00.006-07:00

Ketemu lagi niiiii, penulis akan membagikan tutorial dan script yang digunakan berdasarkan pengalaman pribadi si penulis kasusnya si pelanggan punya beberapa user hotspot sedangkan si pelanggan pengen setiap user bisa dipakai berdasarkan hari tertentu akhirnya setelah otak atik dan mencari tutorial di berbagai sumber akhirnya penulis menemukan script yang work it, langsung saja ke tutorial.

Hal pertama Pastikan pengaturan waktu pada router mikrotik sudah sesuai dengan waktu wilayah anda hal ini mutlak diperlukan ketika anda sudah implementasikan rule-rule berdasarkan waktu misalnya dalam case ini penggunaan scheduler.

Pengaturan waktu pada router mikrotik memiliki alternatif lain yaitu menggunakan service NTP (Network Time Protocol) yang memungkinkan router bisa melakukan sinkronisasi waktu, untuk case ini router kita akan jadikan NTP Client, pengaturan sntp client pada router mikrotik bisa dilakukan pada menu System > SNTP Client.

Setelah pengaturan sntp selesai dan waktu router mikrotik sudah sesuai sekarang kita akan membuat scheduler untuk menambahkan script.

Untuk penjadwalan kita bisa konfigurasi pada menu System > Scheduler lalu klik icon "+" untuk membuat schedule baru. Berikut nama misalnya "Aktif User", waktu eksekusi script setiap jam 1 malam dan interval waktu setiap 1 hari, untuk kolom On Event masukkan script yang sudah disediakan dibawah.

Selanjutnya kita buatkan user hotspot di menu Ip > Hotspot, pada halaman hotspot pilih tab users lalu klik icon "+" untuk membuat User baru dan jangan lupa untuk menambahkan comment pada masing" user hal ini dikarenakan sebagai kunci pada script untuk melakukan disable atau enable user seperti pada gambar dibawah.

Untuk melakukan mengujian sesuaikan dengan waktu yang sudah disetting pada kolom Start Time.

Berikut penulis sertakan Script nya

:local date [/system clock get date]

# Math Calculation here
:local result ""
:local months [:toarray "jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec"]
:local daytbl [:toarray "sun,mon,tue,wed,thu,fri,sat"]

:local month [:pick $date 0 3]
:local day [:pick $date 4 6]
:local dayc [:pick $date 5 6]
:local year [:pick $date 7 11]

# if the first char is a 0 (zero) only read last char, else script fails
:if ([:pick $date 4 5] = 0) do={ :set day ($dayc)}

:local sum 0
:local aaa 0
:local yyy 0
:local mmm 0
:local nmonth 1

:for mindex from=0 to=[:len $months] do={
  :if ([:pick $months $mindex] = $month) do={:set nmonth ($mindex + 1) }
}

:set aaa ((14 - $nmonth) / 12)
:set yyy ($year - $aaa)
:set mmm ($nmonth + 12 * $aaa - 2)
:set sum (7000 + $day + $yyy + ($yyy / 4) - ($yyy / 100) + ($yyy / 400) + ((31 * $mmm) / 12))
:set sum ($sum - (($sum / 7) * 7))
:set result [:pick $daytbl $sum]

:if ($result = "mon") do={/ip hotspot user set disable=no [find comment=Senin]} else= {/ip hotspot user set disable=yes [find comment=Senin]}
:if ($result = "tue") do={/ip hotspot user set disable=no [find comment=Selasa]} else= {/ip hotspot user set disable=yes [find comment=Selasa]}
:if ($result = "wed") do={/ip hotspot user set disable=no [find comment=Rabu]} else= {/ip hotspot user set disable=yes [find comment=Rabu]}
:if ($result = "thu") do={/ip hotspot user set disable=no [find comment=Kamis]} else= {/ip hotspot user set disable=yes [find comment=Kamis]}
:if ($result = "fri") do={/ip hotspot user set disable=no [find comment=Jumat]} else= {/ip hotspot user set disable=yes [find comment=Jumat]}
:if ($result = "sat") do={/ip hotspot user set disable=no [find comment=Sabtu]} else= {/ip hotspot user set disable=yes [find comment=Sabtu]}
:if ($result = "sun") do={/ip hotspot user set disable=no [find comment=Ahad]} else= {/ip hotspot user set disable=yes [find comment=Ahad]}

Trik Menampilkan Postingan terbaru Instagram ke website Tanpa menggunakan API

2020-08-09T04:03:00.002-07:00

Kita bertemu lagi niiiiiiii….kali ini kita akan belajar bagaimana cara mengambil postingan terbaru instagram dari akun orang lain yang akan kita masukkan ke dalam website/blog kita …untuk mendapatkan postingan orang lain sebenarnya banyak cara yang bisa kita gunakan…terus apa yang akan kita gunakan?nah kali ini kita akan menggunakan AJAX.

Langsung saja ke TKP

*Note: Pastikan akun dari postingan yang akan kita ambil bersifat public

Berikut saya sertakan Source Code nya,

<!DOCTYPE html>
<html>
<style type="text/css">
	.center {
  margin: auto;
  width: 50%;
  height: 50%;
  padding: 10px;
}
</style>
<head>
	<title>KetikanMD</title>
	<!-- jquery untuk menjalankan ajax -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

	<!-- Sertakan skrip ini dalam HMTL Anda: -->
	<script async src="https://www.instagram.com/embed.js"></script>
</head>
<body>
<div id="instagram" class="center"></div>
</body>
<script>
    $(document).ready(function() {
    	// Username postingan Instagram
    	var username="ahmad22_97";
        $.ajax({
            url: "https://www.instagram.com/"+username+"/?__a=1",
            type: 'GET',
            success: function(data) {
                var getData = data.graphql.user.edge_owner_to_timeline_media.edges[0].node.shortcode;
                // Start Code embed Instagram
                $("#instagram").html(
                    `
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/${getData}/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
    <div style="padding:16px;"> <a id="href1" href="https://www.instagram.com/p/${getData}/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank">
            <div style=" display: flex; flex-direction: row; align-items: center;">
                <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div>
                <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
                    <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div>
                    <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div>
                </div>
            </div>
            <div style="padding: 19% 0;"></div>
            <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-511.000000, -20.000000)" fill="#000000">
                            <g>
                                <path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path>
                            </g>
                        </g>
                    </g>
                </svg></div>
            <div style="padding-top: 8px;">
                <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Lihat postingan ini di Instagram</div>
            </div>
            <div style="padding: 12.5% 0;"></div>
            <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;">
                <div>
                    <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div>
                    <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div>
                    <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div>
                </div>
                <div style="margin-left: 8px;">
                    <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div>
                    <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div>
                </div>
                <div style="margin-left: auto;">
                    <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div>
                    <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div>
                    <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;">
                <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div>
                <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div>
            </div>
        </a>
        <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a id="href2" href="https://www.instagram.com/p/${getData}/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Sebuah kiriman dibagikan oleh BP2MI UPT Wilayah Mataram (@bp2mi.mataram)</a> pada <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-07-19T23:02:22+00:00">19 Jul 2020 jam 4:02 PDT</time></p>
    </div>
</blockquote>
                            `);
// End Code embed Instagram

// mencari embed Instagram dan memuatnya
                if (typeof window.instgrm !== 'undefined') {
                    window.instgrm.Embeds.process();
                }
            }
        });

    });
</script>

</html>

Berikut cara mendapatkan code embed postingan instagram:
Buka Profil akun instagram yang akan kita ambil postingannya dan pilih postingan yang akan dijadikan embed .
Klik simbol titik tiga (...) yang ada di pojok kanan post. Pada Saat muncul tampilan pop-up,

klik Sematkan atau dalam bahasa inggrisnya Embed.

Klik tombol "Salin Kode Sematan" atau dalam bahasa inggrisnya "Copy Embed Code" untuk mengambil kode yang akan dijadikan embed.

setelah Embed Code berhasil didapat silahkan ganti code yang terdapat pada baris 34-80 dengan Embed Code instagram kalian sendiri.

Pada pilihan bagian "Sertakan Keterangan" atau bahasa inggrinsya "Include caption" Kita bisa uncheck jika tidak ingin menampilkan bersama keterangan/caption dari postingannya.

Berikut Output code yang dihasilkan….untuk selanjutnya teman-teman silahkan mengembangkan sesuai keperluan.....

Jika ada pertanyaan atau kendala saat mengukuti tutorial ini,silahkan tinggalkan pertanyaan teman teman dibawah

Cara Mengatasi "/dev/kvm device: permission denied" pada Linux ubuntu (Android Studio)

2020-06-30T23:02:00.002-07:00

Sering kali ketika ingin membuka Emulator di Android Studio pada ubuntu akan ada pesan dialog "/dev/kvm device: permission denied" sehingga emulator yang ingin di jalankan tidak bisa terbuka, Maksud dari pesan yang ditampilkan ini adalah user yang kita pakai tidak memiliki akses ke /dev/kvm yang diperlukan oleh emulator. Bagaimana menyelesaikannya?

Adapun Tips cara mengatasi masalah diatas adalah:
1. Buka terminal pada OS linux dengan cara menekan kombinasi tombol CTRL+ALT+T

2.Selanjutnya ketikkan perintah sudo chmod 777 -R /dev/kvm lalu tekan enter

Itulah cara menyelesaikan masalah /dev/kvm device: permission denied semoga berhasil

Keamanan Jaringan CISCO dengan Studi Kasus PART VI

2020-06-20T02:28:00.001-07:00

4.3 Mengkonfigurasi Extended ACL pada router CORE

1. Berpindah ke mode global configuration

CORE# conf t

2. Membuat Extended ACL untuk mengijinkan akses layanan FTP dari subnet SALES 172.16.1.0/26 ke Server Web Intranet 172.16.1.67 yang terdapat di subnet Server Farm

CORE(config)#access-list 150 permit tcp 172.16.1.0 0.0.0.63 172.16.1.67 0.0.0.0 range 20 21

3. Membuat Extended ACL untuk mengijinkan akses layanan HTTP (tcp/80) dan HTTPS (tcp/443) dari subnet SALES 172.16.1.0/26,subnet KARYAWAN 172.16.0.0/25,dan subnet KEUANGAN 172.16.0.128/25 ke Server Web Intranet

172.16.1.67 yang terdapat di subnet Server Farm

CORE(config)#access-list 150 permit tcp 172.16.0.0 0.0.0.127 172.16.1.67 0.0.0.0 eq 80

CORE(config)#access-list 150 permit tcp 172.16.0.0 0.0.0.127 172.16.1.67 0.0.0.0 eq 443

CORE(config)#access-list 150 permit tcp 172.16.0.128 0.0.0.127 172.16.1.67 0.0.0.0 eq 80

CORE(config)#access-list 150 permit tcp 172.16.0.128 0.0.0.127 172.16.1.67 0.0.0.0 eq 443

CORE(config)#access-list 150 permit tcp 172.16.1.0 0.0.0.63 172.16.1.67 0.0.0.0 eq 443

CORE(config)#access-list 150 permit tcp 172.16.1.0 0.0.0.63 172.16.1.67 0.0.0.0 eq 80

4. Membuat extended acl untuk mengijinkan protocol NTP,SYSLOG,dan TFTP yang ada pada subnet Server FARM dapat diakses oleh semua router kecuali Router GW yang ada pada jaringan internal PT. MA

CORE(config)#access-list 150 permit udp 172.16.1.130 0.0.0.0 172.16.1.66 0.0.0.0 eq 123

CORE(config)#access-list 150 permit udp 172.16.1.133 0.0.0.0 172.16.1.66 0.0.0.0 eq 123

CORE(config)#access-list 150 permit udp 172.16.1.130 0.0.0.0 172.16.1.66 0.0.0.0 eq 514

CORE(config)#access-list 150 permit udp 172.16.1.133 0.0.0.0 172.16.1.66 0.0.0.0 eq 514

CORE(config)#access-list 150 permit udp 172.16.1.130 0.0.0.0 172.16.1.66 0.0.0.0 eq 69

CORE(config)#access-list 150 permit udp 172.16.1.133 0.0.0.0 172.16.1.66 0.0.0.0 eq 69

CORE(config)#access-list 150 permit udp any 172.16.1.66 0.0.0.0 gt 1023

5. Membuat Extended ACL untuk mengijinkan koneksi dari alamat IP sumber berapapun ke alamat subnet Server Farm 172.16.1.64/26 dengan port lebih besar (greater than - gt) dari 1023.

CORE(config)#access-list 150 permit tcp 0.0.0.0 255.255.255.255 172.16.1.64 0.0.0.63 gt 1023

6. Membuat Extended ACL untuk mengijinkan balasan DNS query dari Server DNS 202.203.204.1 port 53 dengan tujuan ke alamat IP dari PC NetMon (Network Monitoring)

172.16.1.65. Pada awalnya permintaan DNS query dikirimkan dari PC NetMon ke Server DNS sehingga akses Internet dengan nama domain dapat dilakukan.

CORE(config)#access-list 150 permit udp 202.203.204.1 0.0.0.0 eq 53 172.16.1.65 0.0.0.0

7. Membuat Extended ACL untuk mengijinkan protokol ICMP yang digunakan oleh ping ketika verifikasi koneksi antar host dari alamat IP sumber berapapun ke alamat subnet dari subnet Server Farm yaitu 172.16.1.64/26.

CORE(config)#access-list 150 permit icmp 0.0.0.0 255.255.255.255 172.16.1.64 0.0.0.63

8. Membuat VPN Server untuk mengamankan komunikasi antara Subnet KARYAWAN ataupun Subnet KEUANGAN menuju Subnet Server FARM, dengan VPN semua layanan yang ada pada Subnet Server FARM dapat diakses.

CORE(config)#aaa new-model

CORE(config)#aaa authentication login keamanan local

CORE(config)#aaa authorization network jaringan local

CORE(config)#username ahmad password ahmad

CORE(config)#crypto isakmp policy 10

CORE(config-isakmp)#encryption 3des

CORE(config-isakmp)#hash md5

CORE(config-isakmp)#authentication pre-share

CORE(config-isakmp)#group 2

CORE(config-isakmp)#ex

CORE(config)#ip local pool VPNPOOL 192.168.1.1 192.168.1.10

CORE(config)#crypto isakmp client configuration group skj

CORE(config-isakmp-group)#key cisco123

CORE(config-isakmp-group)#pool VPNPOOL

CORE(config-isakmp-group)#ex

CORE(config)#crypto ipsec transform-set set1 esp-3des esp-md5-hmac

CORE(config)#crypto dynamic-map map1 10

CORE(config-crypto-map)#set transform-set set1

CORE(config-crypto-map)#reverse-route

CORE(config)#crypto map map1 client configuration address respond

CORE(config)#crypto map map1 client authentication list keamanan

CORE(config)#crypto map map1 isakmp authorization list jaringan

CORE(config)#crypto map map1 10 ipsec-isakmp dynamic map1

CORE(config)#int fa0/0

CORE(config-if)#crypto map map1

CORE(config)#access-list 150 permit ip 192.168.1.0 0.0.0.255 172.16.1.64 0.0.0.63

9.Berpindah ke interface configuration

CORE(config)# int vlan 1

10. Menerapkan ACL yang telah dibuat

CORE(config-if)# ip access-group 150 out

Berpindah ke mode privilege

CORE(config-if)# end

11. Menampilkan informasi ACL yang terdapat pada router CORE

Terlihat ACL dengan nomor 150 telah terbuat

12. Memverifikasi penerapan ACL pada interface vlan 1

13. Memverifikasi akses FTP ke Server Web Intranet 172.16.1.67 menggunakan browser dari salah satu PC yang terdapat di subnet SALES sebagai contoh PC RANDI.

14. Memverifikasi akses HTTP dan HTTPS ke Server Web Intranet 172.16.1.67 menggunakan browser dari salah satu PC yang terdapat di subnet KARYAWAN sebagai contoh Laptop1.

15. Memverifikasi akses HTTP dan HTTPS ke Server Web Intranet 172.16.1.67 menggunakan browser dari salah satu PC yang terdapat di subnet KEUANGAN sebagai contoh PC AHMAD.

16. Memverifikasi akses HTTP dan HTTPS ke Server Web Intranet 172.16.1.67 menggunakan browser dari salah satu PC yang terdapat di subnet SALES sebagai contoh

PC RANDI.

17. Memverifikasi akses NTP ke Server TFTP,NTP & SYSLOG 172.16.1.66 menggunakan cli dari salah satu Router yang terdapat di jaringan internal PT.MA sebagai contoh Router R1.

18. Memverifikasi akses SYSLOG ke Server TFTP,NTP & SYSLOG 172.16.1.66 menggunakan cli dari salah satu Router yang terdapat di jaringan internal PT.MA sebagai contoh Router R1.

19. Memverifikasi akses TFTP ke Server TFTP,NTP & SYSLOG 172.16.1.66 menggunakan cli dari salah satu Router yang terdapat di jaringan internal PT.MA sebagai contoh Router R1.

20. Memverifikasi akses VPN ke Subnet Server FARM 172.16.1.64/26 menggunakan cli dari salah satu Laptop yang terdapat di Subnet KARYAWAN sebagai contoh Laptop1.

Untuk file Cisco nya bisa download disini

Keamanan Jaringan CISCO dengan Studi Kasus PART I

Keamanan Jaringan CISCO dengan Studi Kasus PART II

Keamanan Jaringan CISCO dengan Studi Kasus PART III

Keamanan Jaringan CISCO dengan Studi Kasus PART IV

Keamanan Jaringan CISCO dengan Studi Kasus PART V