Tipe Soal Ganda Kompleks dan Menjodohkan pada aplikasi Ujian Online

Latar Belakang

Sebelumnya saya telah membuat aplikasi Ujian Online dengan 2 tipe soal (pilihan ganda dan essay). Untuk melengkapinya saya menambahkan tipe soal yang lain sehingga menjadi 5 tipe soal yaitu :

1. Pilihan Ganda
2. Soal Esai
3. Isian Singkat
4. Ganda Kompleks
5. Menjodohkan

Algoritma

Untuk tipe soal ganda kompleks dan menjodohkan saya memodifikasi field soal_type dan soal_jawab pada tabel ujian_soal.

Untuk menyimpan jawaban tipe soal esai dan isian singkat saya menggunakan tabel ujian_esai.

Untuk codingnya saya menambahkan kondisi untuk 3 tipe soal yang baru tersebut.

Tampilan Admin

Tampilan User

Sekian artikel dari saya, Semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 18 Juni 2022

KangAgus

Final CRUD pada web blog menggunakan Axios React.Js

Latar Belakang

Pada backend aplikasi web blog ini kita menggunakan express.js untuk membuat rest API, sedangkan di frontend nya kita menggunakan Axios untuk mengirim request ke server rest API tersebut.

Pada video tutorial yang saya pelajari sudah mengimplementasikan proses CRUD (create, read, update, delete). namun masih ada yang belum saya pelajari dan belum ada pada list video tutorial yaitu proses login, penggunaan token jwt, dan fungsi alert.

Catatan Singkat

Setelah mempelajari tentang react.js untuk frontend, dan express.js untuk backend. Saya akan melanjutkan mempelajari react native untuk pembuatan aplikasi mobile.

Tutorial MERN Basic Indonesia (Video 49 sampai 53)

Berikut ini adalah beberapa catatan singkat saya sesuai dengan nomor video tutorial :

49. Implementasi Menambahkan Postingan Baru dan Upload Image

• menambahkan axios di folder CreateBlog file index.js
• menambahkan variabel untuk title, body, dan image
• menambahkan imagepreview di halaman index CreateBlog
• menambahkan axios untuk mengiriman data dari form ke API

50. Refactor Menambah Posting Baru dan Menambahkan Redux

• membuat reducer baru : createBlogReducer.js
• menambahkan action type : SET_FORM_DATA & SET_IMG_PREVIEW
• menambahkan action baru : CreateBlogAction.js
• menambahkan fungsi : setForm, setImgPreview, & postToAPI
• memindahkan script pengiriman API ke bagian action

51. Integrasi Detail Blog Post dengan unique ID

• mengubah route agar dapat menerima parameter id
• menyesuaikan data di halaman view dengan data dari API

52. Implementasi update blog post

• menambahkan fungsi baru : updateToAPI di createBlogAction.js
• memodifikasi halaman createBlog agar dapat digunakan untuk input dan update
• menambahkan kondisi di onSubmit agar dapat menjalankan fungsi input dan update

53. Implementasi delete blog post

• https://www.npmjs.com/package/react-confirm-alert
• install package baru : react-confirm-alert (komponen)
• menambahkan script dispatch(setDataBlog(counter)) untuk reload data

Download Sourcecode

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 3-02-2021

KangAgus

Implementasi Redux pada Web Blog React.Js

Latar Belakang

Masih ditutorial terkait MERN. kali ini saya belajar tentang redux, bayangan saya redux itu seperti session di PHP, dimana satu nilai variabel bisa digunakan di halaman yang berbeda.

Kali ini kita kombinasikan antara tutorial membuat web blog menggunakan react.js dengan tutorial membuat web API menggunakan express.js. karena sekarang data di web blognya sudah tidak statis lagi. tapi sudah diambil dari database mongodb.

Catatan Singkat

Jika teman-teman mau testing aplikasi yang saya cantumkan di website edugi. untuk databasenya, silahkan teman-teman registrasi di mongodb atlas secara online atau download dan install mongodb versi community.

Untuk editornya menggunakan mongodb compass. Setelah itu sesuaikan URL serta password koneksi databasenya di project mern-api.

Tutorial MERN Basic Indonesia (Video 40 sampai 48)

Berikut ini adalah beberapa catatan singkat saya sesuai dengan nomor video tutorial :

40. Menambahkan Pagination Pada Response API NodeJS

• untuk variabel response menggunakan underscore
• untuk fungsi javascriptnya menggunakan camelCase
• modif coding di controller blog untuk paging
• membuat data dummy pakai website mockaroo(opsional)

41. Instalasi Axios (Fetch API Library) => di project blog reactJS

• https://github.com/axios/axios
• install package baru : yarn add axios

42. Sample pemanggilan API Blog Post dengan menggunakan axios

• tambahkan script axios di page index.js folder homepage
• jalankan project web blog reactJS (frontend) dan web api expressJS (backend)
• inspect element web blog => console => data API

43. Mengganti data dummy di home page dengan response API

• mengganti blogItem statis menjadi dinamis sesuai respon API
• menggunakan props di blog page untuk membuat kontent blog dinamis
• props adalah argument yang diteruskan ke komponen melalui atribut html

44. Setup Status Management Redux

• https://redux.js.org
• https://react-redux.js.org
• install package baru : yarn add redux react-redux

Step by step redux :

• membuat store
• didalam store memerlukan reducer
• reducer berfungsi untuk merubah state menjadi respon
• reducer me-return sebuah state yang diperlukan
• state adalah sebuah object untuk menyimpan data
• membungkus route kedalam komponen provider
• didalam apps.js import store agar state bisa digunakan disemua halaman
• gunakan state global di halaman homepage

45. Merubah value dari State Global Redux

• belajar gunakan actiontype, payload, dispatch
• action type untuk memisahkan beberapa proses dalam store redux
• paylod berisi parameter yang dikirim ke dedux
• dispatch fungsi yang digunakan untuk mengirim actiontype dan payload

46. Memahami combine reducer (multiple reducer)

• membuat beberapa initialState, dan beberapa Reducer
• setelah itu menggabungkannya menggunakan fungsi combineReducers

47. Memahami action creator dan Async store dengan redux thunk

• untuk menangani respon state pada action API (asyncronous)
• install package baru : yarn add redux-thunk
• tambahkan di store.js applyMiddleware(thunk)
• membuat homeAction untuk mempersingkat pemanggilan setDataBlog di pageHome

48. Implementasi pagination di halaman homepage

• menambahkan reducer baru di homeReducer.js : ‘UPDATE_PAGE’
• menambahkan dispatch baru di homeAction.js : ‘UPDATE_PAGE’
• menambahkan codingan di fungsi next dan previous
• menambahakan variable currentPage dan totalPage

Download Sourcecode

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 31-01-2021

KangAgus

Mengelola Data Blog Dalam Database MongoDB via Web API

Latar Belakang

Setelah kita belajar membuat web blog statis dengan React.Js kita belajar membuat api statis dengan Express.Js. Setelah itu kita belajar CRUD (create, read, update, delete) dimana database yang kita gunakan adalah mongoDB.

MongoDB ada 2 versi yaitu versi offline (mongodb community edition) dan versi online atau cloud baik yang versi free maupun yang berbayar yang disebut dengan mongodb atlas.

Sedangkan untuk editornya kita menggunakan mongodb compass yang dapat digunakan untuk mengakses database mongodb baik yang offline maupun online.

Tutorial MERN Basic Indonesia (Video 29 sampai 39)

Artikel ini masih terkait dengan catatan saya dalam belajar MERN melalui video tutorial yang ada di youtube. hanya untuk mengingatkan hal-hal yang saya anggap penting. berikut ini catatan berdasarkan nomor video tutorialnya :

29. Melakukan Register dan Pengenalan Database MongoDB

• register & login database server cloud mongodb altas
• download database server mongodb community
• download database client mongodb compas

30. Setup MongoDB Atlas Project, Cluster, Security dan Network Access

• Setup Organization => Create New Project => Build a Database / Cluster
• Setup Database Access => Username & Password => Role User
• Setup Network Access => IP Whitelist

31. Menkoneksi kan server MongoDB ke server Node JS

• connect => connect your driver => copy script
• install package baru : yarn add mongoose
• testing connection

32. Setup MongoDB Model dengan Mongoose

• membuat model BlogPost
• export mongoose.model

33. Menyimpan Postingan Blog Baru ke Database MongoDB

• coding di controller
• testing post dari postman
• cek collection di mongo altas

34. Cara Upload Image / Photo di NodeJS

• install package baru : yarn add multer
• codig di index, controller, dan modelnya
• testing upload gambar menggunakan postman

35. Mengatasi Error Pemanggilan Image dari Server

• menambahkan midleware : path
• testing get image menggunakan postman

36. Mengambil Seluruh Data Postingan Blog (Cara melakukan GET pada NodeJS)

• membuat route baru di route blog (‘/posts’) method POST
• menambahkan exports baru di controller blog
• testing get all blog posts di postman

37. Mengambil postingan blog berdasarkan ID blog (GET by ID)

• hampir sama kegiatannya dengan yang sebelumnya
• membuat route baru di route blog (‘/post/:postId’) method GET
• menambahkan exports baru di controller blog
• testing get data blog posts by id di postman

38. Update postingan blog (Update method)

• hampir sama kegiatannya dengan yang sebelumnya
• membuat route baru di route blog (‘/post/:postId’) method PUT
• menambahkan exports baru di controller blog
• testing update data blog posts di postman berdasarkan param ID

39. Delete postingan Blog dan Delete Image Post (Delete Method)

• hampir sama kegiatannya dengan yang sebelumnya
• membuat route baru di route blog (‘/post/:postId’) method Delete
• untuk getbyid, update, dan delete endpointnya sama, hanya beda methodnya
• import midleware path dan fs untuk keperluan hapus url gambar di server

Download Sourcecode

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 26-01-2021

KangAgus

Membuat Web API Statis Menggunakan Express.JS

Latar Belakang

Para artikel kali ini masih berisi catatan singkat saya dalam belajar MERN, kali ini saya belajar tentang Express.Js sebagai rangkaian dari konsep MERN (MongoDB, Express.Js, React, Node.Js).

Tutorial MERN Basic Indonesia (Video 14 sampai 28)

14. Penjelasan apa itu Rest, Restful, Rest API, Restful API

• Rest (Representational State Transfer) adalah “standar” arsitektur untuk merespon request yang dikirim oleh client dan direspon oleh server
• Restful adalah “cara penulisan” layanan menggunakan artitektur REST
• API (Application Programming Interface) adalah “cara untuk berinteraksi” secara terprogram dengan komponen perangkat lunak atau sumber daya yang terpisah
• Restful API adalah “web service yang mengimplementasikan” artitektur REST

15. Memahami Format Data untuk Response API

• Menjelaskan format data dalam bentuk html, plain text, xml, dan json

16. Memahami Perbedaan URL, HTTP methods dan API endpoint

• harus lengkap antara methods (get, post, put, delete) dengan url endpoint nya
• gunakan methods sesuai fungsinya
• api endpoint adalah gabungan antara URL dengan methods
• post untuk mengirip data ke server, untuk menambah data (create)
• put untuk menambah atau mengganti data dengan yang baru (update)
• patch untuk mengubah data dengan yang baru, hanya mengubah sebagian object (update)
• delete untuk menghapus data user di server
• get untuk mengampil data dari server (read)
• options adalah data yang dikirim otomatis untuk proses pengecekan method diterima atau tidak

17. Cara membuat project baru Node.Js

• buat folder baru mern_api dan masuk ke folder tersebut
• npm init sampai nanti terbuat file baru package.json
• buka folder project di vscode

18. Membuat server Node.Js dengan menggunakan Express.Js

• buat file baru index.js dan testing jalankan file tersebut dengan perintah node index.js
• npm install –save express atau yarn add express
• yarn add nodemon (package untuk otomatis me-reload service nodejs)
• setelah itu jalankan perintah nodemon index.js
• tambahkan di package.json script : “start”: “nodemon index.js”

19. Menyimpan project node.js di repository online

• bisa menggunakan bitbucket, gitlab, github
• git init
• git status
• git remote add origin https://kangagus@bitbucket.org/edugidev/edugi_mern_api.git
• git add .
• git commit -m “deskripsi”
• git push origin master

20. Membuat dan memahami basic router, request, dan response di Node.Js

• const router = express.Router();
• belajar request dan response
• install extension json view
• metode “use” menerima semua method (get, delete, put) di browser
• jika sudah spesifik, tidak bisa mengirim url di browser
• console.log(‘url’, req.originalUrl);
• console.log(‘method’, req.method);

21. Restrukture project Node.JS/Express.Js

• membuat folder controllers, models, dan routes
• menyusun ulang script dari index ke dalam routes dan controllers

22. Mengenal dan menggunakan postman sebagai tools pengujian REST API

• install postman
• testing method get dan post

23. Mengatasi Error CORS ORIGIN pada API Node.Js

• penambahan fungsi baru di index.js untuk menangani CORS Policy web browser
• membuat coding html dan javascript untuk testing
• testing dengan membuka inspect element => console
• jika berhasil, maka akan muncul response get dan post

24. Mengirimkan data melalui request body pada method post

• menambahkan package baru : yarn add body-parser
• testing mengirimkan data row dengan format json
• sehingga responnya dinamis sesuai post yang dikirim

25. Merencanakan API Endpoint Sebelum Memulai Sebuah Project

• belajar membuat planing API
• grouping, standar enpoint, standar request, response, dan error response

26. Membuat dummy endpoint response dan membuat postman collection

• tujuannya agar bisa berkolaborasi dengan tim backend menggunakan dummy api
• sehingga pekerjaanya bisa paralel dan tidak saling menunggu
• tujuan dari postman : membuat dummy api, testing endpoint, membuat collection, dan dokumentasi

27. Menambahkan Endpoint Postingan Blog Baru (create)

• cara seperti pada dummy product
• buat routes dan controllernya
• daftarkan di index dan testing di postman

28. Cara memvalidasi request body dan memberikan error response yang dinamis

• install : yarn add express-validator
• menambahkan validasi di route dan controller
• testing validasi di postman

Download Sourcecode

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 21-01-2021

KangAgus

Membuat Web Blog Statis Menggunakan React.JS

Latar Belakang

Artikel ini adalah catatan singkat dari tutorial yang saya ikuti di chanel youtube. tutorial yang membahas tentang MERN. Kali ini yang dipelajari terkait React.Js. Dengan studi kasus membuat web blog sedehana.

Tutorial MERN Basic Indonesia (Video 4 sampai 13)

4 & 5. Struktur Folder dan Membuat Navigasi / Router

• Membuat folder atoms untuk page baru, dan file index.js didalamnya
• Menambahkan script import dan export di folder Pages => index.js
• Menambahkan route baru di folder Routes => index.js

6. Membuat Basic Component dengan hooks dan slicing Halaman Register

• Install package baru : yarn add node-sass
• Website untuk cari gambar ilurtrasi : https://unsplash.com
• Install component vscode : ES7 React/Redux/GrapQL/React-Native snippets

7. Konsep SCSS Global & Slicing Halaman Login

• Form yang menggunakan class-name yang sama, akan mendapatkan styling yg sama pula
• Ganti height 100% menjadi 100vh (virtual height = sesuai apa yang dilihat)

8. Routing Bertingkat/Berlapis (Nested Routes) di halaman main apps

• Membuat halaman MainApp, dan membuat 3 section header, footer, dan content
• Untuk content dibuat router, sehingga header dan footer di MainApp selalu tampil

9. Membuat styling MainApp, Header, dan Footer

• Membuat folder Molecules : header dan footer
• Untuk mencari icon https://icons8.com/icons

10. Membuat Styling item blog post dan pagination

• Membuat folder Molecules : blogitem
• Masih seputar page dan styling

11 & 12. Membuat styling halaman create blog post & detail blog post

• Membuat folder Atom : textarea dan upload
• Dalam satu page terdiri dari banyak komponen
• Levelnya mulai dari : Pages => Molecules => Atoms
• Stuktur nya adalah : MainApp Pages dan Pages yang lain
• Component terdiri dari : molecules dan atoms
• Contoh molecules adalah : header & footer
• Contoh atoms adalah : button, input, textarea, upload, gap, link

13. Berpindah antar halaman dengan useHistory dan merapihkan flow aplikasi

• import {useHistory} from ‘react-router-dom’
• const history = userHistory()
• onClick={()=>history.push(‘/’)}

Download Sourcecode

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 14-01-2021

KangAgus

Membuat Backend dan Frontend Menggunakan MERN

Latar Belakang

Javascript adalah teknologi yang digunakan di situs web. Menonaktifkan Javascript untuk semua situs web di web browser bukanlah hal yang disarankan. Sebagian besar situs web populer berbasis Javascript. Artinya, situs-situs ini menggunakan Javascript untuk menjalankan fitur interaktif yang menghadirkan pengalaman pengguna yang menyenangkan.

Lebih jauh dari itu, saat ini javascript juga populer digunakan untuk membangun aplikasi backend, frontent, dan mobile apps. Disandingkan dengan MongoDB sebagai database NoSQL (not only SQL).

Artikel ini berisi catatan awal saya dalam belajar MERN mulai dari definisi, persiapan, instalasi, dan testing pertama kali, Insya Allah akan dilanjutkan dengan pembuatan aplikasi sederhana secara bertahap pada artikel-artikel berikutnya.

Definisi MERN

MERN merupakan akronim atau singkatan dari MongoDb, Express.Js, React, Node.Js. definisi singkatnya adalah dibawah ini :

• MongoDB adalah database NoSQL yang disarankan untuk Node.Js. Collection dan Document
• Express.Js adalah framework node.js yang digunakan untuk membuat backend API
• React.Js adalah sebuah library javascript untuk membuat frontend website
• React Native adalah sebuat framework untuk membuat mobile apps android & ios
• Node.Js adalah sebuah platform yang digunakan untuk menjalankan javascript diluar web browser (server side javascript – engine V8)
• Json adalah javascript object notation sebagai format data

Alternatif Teknologi

Selain menggunakan teknologi MERN, dibawah ini adalah alternatif yang bisa digunakan untuk membuat backend, frontend, dan aplikasi mobile.

Untuk membuat frontend alternatifnya adalah :

• React.Js
• Angular.Js
• Vue.Js

Untuk membuat backend alternatifnya adalah :

• Express.Js
• Meteor.Js

Untuk membuat aplikasi android :

• Native Android : Java & Kotlin
• Native IOS : swift & objective C
• Cross platform : Flutter (dart) & React Native (javascript)
• Hybrid Apps (webbase) : xamarin, ionic, apache cordova

Tahap Persiapan Awal

Setelah mengetahui definisi dan alternatif teknologi yang ada saat ini, kita fokuskan belajar MERN. dengan persiapan seperti dibawah ini :

• Download Android Studio
• Download Visual Studio Code
• Download Node.Js

Tahap Instalasi

Saya sebelumnya menginstall node.js versi terakhir saat tulisan ini dibuat yaitu versi 17. namun ada kendala saat testing aplikasi sehingga saya ganti dengan mendownload versi 16 (node-v16.13.1-x64) dengan versi dibawah ini :

• node -v (16.13.1)
• npm -v (8.1.2)
• yarn -v (1.22.17)

Pengenalan React Native-CLI dan Expo-CLI

React native merupakan framework javascript yang digunakan untuk mengembangkan aplikasi pada smartphone. Aplikasi yang dikembangkan dengan react native ini pada dasarnya dapat berjalan di ponsel berbasis Android dan IOS, hanya saja perlu sedikit penyesuaian untuk masing-masing OS nya. Sedangkan Expo adalah adalah framework berbasis react native yang digunakan juga untuk mengembangkan aplikasi dengan tujuan yang sama yaitu dapat berjalan pada Android dan IOS.

Expo merupakan satu set tools, library, dan services yang digunakan dalam pengembangan aplikasi. Pada dasarnya Expo dan react native ini sama dalam hal menuliskan kode program namun pengembangan aplikasi pada Expo dapat lebih cepat karna beberapa tools, library, dan services sudah disediakan oleh Expo. Sehingga dalam belajar react native ini saya fokus menggunakan expo.

Pengenalan NPM dan Yarn

The JavaScript node package manager (npm) adalah metode default untuk mengelola paket di lingkungan runtime Node.js. npm bergantung pada baris perintah dan database yang terdiri dari paket public dan premium yang dikenal sebagai registri npm. Pengguna dapat mengakses registri melalui klien dan menelusuri banyak paket yang tersedia melalui situs web npm. NPM dan registrinya dikelola oleh perusahaan npm, Inc.

Yarn dikembangkan oleh Facebook dalam upaya untuk menyelesaikan beberapa kekurangan npm. Secara teknis, Yarn bukan pengganti npm karena bergantung pada modul dari registri npm. Yarn sebagai new installer yang masih mengandalkan struktur npm yang sama . Registri itu sendiri tidak berubah, tetapi metode instalasi berbeda. Karena Yarn memberi Anda akses ke paket yang sama dengan npm, pindah dari npm ke Yarn tidak mengharuskan kita untuk membuat perubahan apa pun pada alur kerja.

Pengenalan NPM dan NPX

NPM adalah singkatan dari Node Package Manager. Sebuah program berbasis teks untuk manajemen paket Nodejs. Sedangkan NPX adalah Node Package Runner. Fungsinya untuk mengeksekusi package Nodejs.

NPX akan mengeksekusi file binary dari package Nodejs, baik yang sudah terinstal maupun yang belum. Cara menggunakan NPX hampir sama seperti NPM.

Testing React Native

• npm install -g expo-cli atau yarn global add expo-cli
• expo init AwesomeProject
• cd AwesomeProject
• npm start atau yarn start atau expo start

untuk menjalankan aplikasi testing react native dengan 2 cara yaitu : melalui localhost port 19006 di web browser atau menggunakan scan QR di aplikasi expo yang sebelumnya harus kita install terlebih dahulu di google play

Testing React.Js

• npx create-react-app my-app
• cd my-app
• npm start

Perintah create-react-app hanya bisa dijalankan dengan npx tidak bisa dengan npm. Untuk menjalankannya baru kita menggunakan npm start. Ditunggu sampai nanti terbuka web browser dengan mengakses localhost port 3000.

Untuk lebih jelasnya silahkan teman-teman buka chanel youtube dibawah ini yang membahas MERN dengan lebih lengkap lagi :

Tutorial MERN Basic Indonesia (Video 1 sampai 3)

Penutup

Semoga artikel pertama ini dapat menambah pemahaman kita mulai dari istilah teknologi yang sedang populer digunakan saat ini. sampai perbedaan cara testing aplikasi react native dan react.js.

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 11-01-2022

KangAgus

Belajar Menjadi Leader yang Baik

Dalam dunia IT ada jenjang karir sebagai Project Manager atau sebagai Manager IT di sebuah perusahaan. Manager sendiri adalah orang yang mengatur sumber daya yang ada. mulai dari orang, waktu, sampai biaya.

Selain kemampuan hardskill terkait bidang pekerjaan yang ditekuni. Manager juga harus memiliki kemampuan softskill sebagai “bekal” dalam berkolaborasi, menjalin komunikasi dan interaksi yang baik dengan team maupun dengan stakeholder yang lain.

Berikut ini adalah catatan dari video yang pernah saya simak sebagai referensi saya untuk belajar menjadi leader yang baik ditempat saya bekerja.

10 Tugas manager :

• Planning
• Organizing
• Staffing (man power) : psikologi, komunikasi
• Direct Guiding : turun ke lapangan
• Motivating : empowering (kepercayaan delegasi) & encouriging (percaya diri)
• Alokasi sumberdaya : merawat fasilitas
• Monitoring progress : tim dan lingkungan
• Controll : memastikan progress terjadi
• Informing : menyampaikan informasi tahu progress dan issue
• Membuat report : dokumentasikan progress

10 karakteristik leader :

• Sikap tulus, tidak pura-pura
• Happy (mudah senyum), tidak gampang marah dan stress (rilex)
• Yang bisa mendamaikan bukan menciptakan konflik, berdamai dengan semuanya
• Sikap yang sabar, untuk bisa sukses butuh kesabaran
• Murah hati, suka memberi
• Sikap, ucapan dan prilaku yang baik
• Sikap yang setia, tidak kutu loncat. menguasai bisnis proses. komitmen, konsisten dalam perbaikan
• Sikap lemah lembut dan menjaga wibawa
• Self menagement dan controller. mengendalikan diri dan orang lain
• Memiliki prinsip saat tidak populer namun benar

Konsep Kepemimpinan Dalam Islam

“Setiap kalian adalah pemimpin dan akan dimintai pertanggungjawaban atas yang dipimpinnya. Amir (kepala Negara), dia adalah pemimpin manusia secara umum, dan dia akan diminta pertanggungjawaban atas mereka. Seorang suami dalam keluarga adalah pemimpin dan akan dimintai pertanggungjawaban atas mereka. Seorang istri adalah pemimpin di dalam rumah tangga suaminya dan terhadap anak-anaknya, dan dia akan dimintai pertanggungjawaban atas mereka. Seorang hamba sahaya adalah pemimpin dalam urusan harta tuannya, dia akan dimintai pertanggungjawaban atasnya. Ketahuilah, bahwa setiap kalian adalah pemimipin dan setiap kalian akan dimintai pertanggungjawaban atas siapa yang dipimpinnya.” (HR. Bukhari no. 2554 dan Muslim no. 1829)

Dari Abdillah bin Mas’ud radhiyallahu anhu ia berkata: telah bersabda rasulullah shallallahu alaihi wa sallam: “Maukah kamu aku tunjukkan orang yang diharamkan neraka baginya?” Para sahabat menjawab: “tentu saja wahai Rasulallah!” Beliau shallallahu alaihi wasallam menjawab: “(Haram tersentuh api neraka orang yang) Hayyin (Tenang), Layyin (Lembut), Qarib (Akrab), Sahl (Suka Menolong).” (HR. At-Tirmidzi)

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

KangAgus

Bogor, 1 Januari 2022

Instalasi Docker Desktop di Windows

Latar Belakang

Saat ini lagi nge-trend penggunaan docker termasuk di tempat saya bekerja saat ini. saya pun coba untuk mempelajari konsep-konsep dasar docker dan perintah-perintahnya.

Dilanjutkan dengan belajar membuat image dan mengupload image ke registry. Untuk tutorial lengkapnya saya belajar dari youtube programmer zaman now

Konsep Dasar Docker

• Docker adalah container manager untuk membuat package software development ke production
• Docker bukan virtual machine, container tidak memiliki sistem operasi tersendiri
• Docker memiliki client/terminal & docker server/host/daemon
• Docker server berfungsi untuk management : container, images, dan koneksi registry
• Docker client untuk memberikan perintah ke docker server
• Docker saat ini support dengan linux OS di production
• Docker di windows atau di mac, sebenarnya running linux based

Istilah-istilah Docker

1. Container Registry adalah tempat yang digunakan untuk menyimpan image docker. contohnya : Docker hub, Google Container, AWS Elastic Container Registry
2. Images adalah hasil distribution file/package/bundel, yang akan di deploy ke Container Registry. images bukan installer tapi aplikasi yang sudah jadi. dalam “Docker Hub” terdapat image yang siap dipakai, tidak perlu membuat ulang image
3. Container adalah hasil instansiasi dari image yang di running, dan dapat running beberapa container dari image yang sama

Perintah Dasar Docker

Sebelumnya pastikan kita sudah menginstal software docker desktop dan membuat account di docker hub. Setelah semua tahapan instalasi selesai dilakukan, silahkan bukan terminal atau CMD.

Sekenarionya adalah kita akan menginstall sebuah image database “mongodb” yang diambil dari docker hub dan menjalan container nya di local kita.

docker pull mongo:4.1
docker images
docker rm image mongo:4.1

Perintah diatas untuk mendownload image mongodb, mengecek image di local kita, dan menghapus image yang ada di local kita.

docker container ls --all
docker container create --name mongoserver -p 8080:27017 mongo:4.1
docker container start mongoserver
docker container stop mongoserver
docker container rm mongoserver

Perintah diatas untuk mengecek container yang ada di local kita, membuat container baru dari image yang sudah didownload, menjalankan, menghentikan, atau menghapus container yang sudah dibuat.

Membuat Image Sendiri

Selanjutnya kita akan membuat image sendiri dan menguploadnya ke account docker hub. Sekenarionya kita akan menginstall image bahasa golang dan menjalankan contoh script golang di local kita. Langkah-langkahnya adalah sebagai berikut :

• Membuat sample file golang

package main

import (
	"fmt"
	"net/http"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		fmt.Fprintf(w, "Hello World!")
	})

	http.ListenAndServe(":8080", nil)
}

• Membuat dockerfile untuk proses membuat image baru, dengan menyertakan image pendukung yang sudah tersedia di container registry (docker hub) yaitu bahasa golang

FROM golang:1.11.4

COPY main.go /app/main.go

CMD ["go", "run", "/app/main.go"]

• Setelah 2 file ini sudah tersedia di satu folder yang sama, maka masuk ke terminal lokasi tempat 2 file ini berada, kemudian jalankan perintah dibawah ini.

docker build --tag app-golang:1.0 .
docker images

Perintah tag untuk memberi nama dan versi image. Sedangkan tanda titik (.) di belakang versi image menandakan alamat folder yang sekarang kita berada (current)

• Setelah pembuatan image selesai di local, maka cek image dengan mengetikan perintah docker images
• Setelah itu kita akan membuat container dari image yang sudah terbuat tadi dengan mengetikan perintah dibawah ini :

docker container create --name app1 -p 8080:8080 app-golang:1.0
docker container start app1
docker container ls -all

• Jika telah berhasil menjalankan containernya, maka silahkan testing di web browser dengan mengetikan localhost:8080 maka akan muncul tulisan Hello World!

Mengupload Image ke Container Registry

Yang terakhir dalam tutorial dasar docker ini adalah kita akan mengupload image ke container registry dalam hal ini kita menggunakan docker hub sebagai container registry. Langkah-langkahnya adalah sebagai berikut :

• Login ke website docker hub
• Membuat repository di docker hub misalnya nama reponya adalah app-golang
• Setelah itu, ketik perintah dibawah ini :

docker tag app-golang:1.0 kangagus/app-golang:1.0
docker images
docker login
docker push kangagus/app-golang:1.0

Perintah diatas untuk membuat tag atau nama image baru dari nama image yang ada di local kita, di dalam tag baru tersebut disertakan nama account yang terdaftar di docker hub misalnya account saya adalah “kangagus” sehingga saya akan membuat nama image baru kangagus/app-golang:1.0 dari image local saya sebelumnya yaitu app-golang:1.0

Setelah itu cek image yang telah dibuat dengan mengetikan docker images, login ke docker hub dengan perintah docker login. setelah itu upload image yang ada di local ke server docker hub dengan perintah docker push disertai nama image yang baru.

Penutup

Cara belajar yang kita gunakan sekarang adalah dengan melihat panduan dari tutorial youtube yang saya lampirkan diatas. Sehingga artikel ini hanyalah sebuah catatan kecil dari video yang sudah teman-teman simak dan ikuti langkah-langkahnya. Jika teman-teman ingin mengulang tutorial tersebut bisa menggunakan artikel ini sebagai best practise.

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 25 November 2021

KangAgus

Membuat Aplikasi Catatan dengan Flutter

Latar Belakang

Aplikasi catatan ini dibuat dengan flutter dan database mysql. disalamnya digunakan Restapi dengan php untuk menjembatani aplikasi flutter dengan database.

Untuk implementasi dari aplikasi catatan (E-Notes) ini saya integrasikan dengan website Edugi. Di website edugi ada modul Evaluasi Harian, dan ditambahkan fitur catatan harian.

Spesifikasi

• Android Studio 3.6.2
• Flutter v1.12.13+hotfix.9

Fitur Aplikasi

1. Terintegrasi dengan website Edugi
2. Dapat melakukan registrasi akun edugi
3. Dapat login aplikasi dengan akun edugi
4. Ada pengecekan koneksi internet device
5. Ada auto login dengan sharedpreferences

Download Sourcecode

Alur Program

1. Download dan install aplikasinya dalam bentuk APK
2. Login dengan akun edugi, bisa juga daftar akun baru
3. Bisa melakukan tambah catatan, view, edit, dan delete
4. Jika data catatan belum terupdate bisa klik icon refresh
5. Catatan di android terintegrasi dengan catatan di web edugi

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 07-08-2021

KangAgus