Menjalankan Winbox dengan wine pada linux

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

     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

    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

    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

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:
  1. home.dart
  2. 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

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

 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