Belajar Bareng Perogeremmer

Belajar Bikin API Pake Rust Actix - Part 1 (Introduction)

Muhamad Hudya Ramadhana — Mon, 30 Jun 2025 04:48:53 GMT

Instalasi

Hello, akhirnya setelah bertapa sekian lama saya pengen nulis kembali cara bikin API pake Rust. Karena lagi pengen ngulik hal yang baru, saya memutuskan untuk pake Rust (Biar ada aja yang nulis). Sumbernya akan berdasarkan https://actix.rs/docs/getting-started.

Pertama, pastiin kamu udah install Rust & Cargo ya, saya disini gak akan ngajarin.

Pastiin ketika kamu ketik cargo di terminal sudah muncul tulisan seperti ini:

hudya@perogeremmer-pc:~/code/rust$ cargo
Rust's package manager

Usage: cargo [+toolchain] [OPTIONS] [COMMAND]
       cargo [+toolchain] [OPTIONS] -Zscript  [ARGS]...

Options:
  -V, --version                  Print version info and exit
      --list                     List installed commands
      --explain            Provide a detailed explanation of a rustc error message
  -v, --verbose...               Use verbose output (-vv very verbose/build.rs output)
  -q, --quiet                    Do not print cargo log messages
      --color              Coloring [possible values: auto, always, never]
  -C                  Change to DIRECTORY before doing anything (nightly-only)
      --locked                   Assert that `Cargo.lock` will remain unchanged
      --offline                  Run without accessing the network
      --frozen                   Equivalent to specifying both --locked and --offline
      --config   Override a configuration value
  -Z                       Unstable (nightly-only) flags to Cargo, see 'cargo -Z help' for details
  -h, --help                     Print help

Commands:
    build, b    Compile the current package
    check, c    Analyze the current package and report errors, but don't build object files
    clean       Remove the target directory
    doc, d      Build this package's and its dependencies' documentation
    new         Create a new cargo package
    init        Create a new cargo package in an existing directory
    add         Add dependencies to a manifest file
    remove      Remove dependencies from a manifest file
    run, r      Run a binary or example of the local package
    test, t     Run the tests
    bench       Run the benchmarks
    update      Update dependencies listed in Cargo.lock
    search      Search registry for crates
    publish     Package and upload this package to the registry
    install     Install a Rust binary
    uninstall   Uninstall a Rust binary
    ...         See all commands with --list

See 'cargo help ' for more information on a specific command.


Selanjutnya, pada direktori yang kamu inginkan, buat sebuah projek baru dengan cara mengetikkan:
cargo new namaprojek

Misalnya:
cargo new api-tweet

Jadi kita akan coba membuat API yang so so Twitter gitu deh. Hasilnya akan menjadi seperti ini:
hudya@perogeremmer-pc:~/code/rust$ cargo api-tweet
    Creating binary (application) `api-tweet` package
note: see more `Cargo.toml` keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

Sekarang kamu bisa buka VSCode atau editor favorit kamu lalu buka projeknya dan kamu akan melihat struktur seperti ini:
📁 src/
│── 📄 main.rs
📁 target/
📄 .gitignore
📄 Cargo.lock
📄 Cargo.toml
📄 README.md

Sekarang ubah main.rs lalu masukkan kode berikut:
use actix_web::{get, App, HttpResponse, HttpServer, Responder};

#[get("/")]
async fn hello() -> impl Responder {
    HttpResponse::Ok().body("Hello, World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(hello)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Penjelasan

Kita memiliki fungsi bernama hello() yang akan menjadi fungsi pertama kita.

Syntax async digunakan karena framework actix bertipe asynchronous ya harus dimasukin async

impl Responder artinya kita menerapkan trait di Rust, trait adalah semacam aturan untuk pengembalian tipe data. Karena Rust cukup strict kita harus jelaskan kembaliannya dalam tipe data apa, disini kita mengembalikannya dalam objek Responder dari actix.

Fungsi main() adalah fungsi untuk inisiasi API kita, disini mengembalikan std::io::Result atau tipe data Result

Di Rust Result adalah enum dengan 2 kemungkinan: Ok(value) atau Err(error).

Di Rust, <()> merupakan generic parameter, artinya sama seperti void (tidak ada nilai yang dikembalikan.

Kita registrasi routes / atau index pada service lalu kita bind ke alamat localhost dengan port 8080.


Jalankan dengan cara cargo run dan kamu akan menemukan hasil seperti ini:
hudya@perogeremmer-pc:~/code/rust/api-tweet$ cargo run
   Compiling api-tweet v0.1.0 (/home/hudya/code/rust/api-tweet)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 2.67s
     Running `target/debug/api-tweet`

Langsung saja kunjungi localhost:8080 dan kamu akan menemukan pesan Hello, World!.
Code Time
Sekarang kita akan ubah strukturnya menjadi seperti ini:
📁 src/
│── 📁 controller/
│   ├── 📄 main_controller.rs
│   ├── 📄 mod.rs
│   └── 📄 user_controller.rs
│── 📁 helper/
│   ├── 📄 mod.rs
│   ├── 📄 response_json.rs
├── 📄 lib.rs
└── 📄 main.rs
📁 target/
📄 .gitignore
📄 Cargo.lock
📄 Cargo.toml

Penjelasan

Folder controller → tempat seluruh controller

Folder helper → tempat library / helper yang dibutuhkan pada API

lib.rs → File inisiasi seluruh module / folder


Jadi kita pengen ngebuat supaya lebih terorganisir dimana semua controller dimasukkan ke controller, kebutuhan lainnya kita masukkan ke helper. Segera buat filenya.
Instalasi Library
Kita akan membutuhkan dua library yaitu serde-json dan serde, masukkan perintah berikut pada terminal yang sudah ada di dalam folder projekmu.
cargo add serde-json
cargo add serde --features derive

Hasilnya akan menjadi seperti ini
hudya@perogeremmer-pc:~/code/rust/api-tweet$ cargo add serde-json
warning: translating `serde-json` to `serde_json`
    Updating crates.io index
      Adding serde_json v1.0.140 to dependencies
             Features:
             + std
             - alloc
             - arbitrary_precision
             - float_roundtrip
             - indexmap
             - preserve_order
             - raw_value
             - unbounded_depth
hudya@perogeremmer-pc:~/code/rust/api-tweet$ cargo add serde --features derive
    Updating crates.io index
      Adding serde v1.0.219 to dependencies
             Features:
             + derive
             + serde_derive
             + std
             - alloc
             - rc
             - unstable

Library serde adalah library yang digunakan untuk memberitahu di Rust bahwa kita akan merubah tipe data tersebut dengan aturan khusus (trait). Sedangkan serde-json adalah resep agar program Rust mengubah tipe data objek menjadi JSON.
Response JSON
Pertama kita ubah isi file response_json.rs dengan kode berikut:
use serde::Serialize;
use serde_json::Value;

#[derive(Serialize)]
pub struct ResponseJSON {
    pub message: String,
    pub status: i32,
    #[serde(default = "default_empty_object")]
    pub values: Value,
}

impl ResponseJSON {
    #[allow(dead_code)]
    pub fn new(message: String, status: i32, values: Option) -> Self {
        Self {
            message,
            status,
            values: values.unwrap_or_else(default_empty_object),
        }
    }

    pub fn success(message: String, values: Option) -> Self {
        Self {
            message,
            status: 200,
            values: values.unwrap_or_else(default_empty_object),
        }
    }
}

fn default_empty_object() -> Value {
    serde_json::json!({})
}

Penjelasan:

Pada tipe data ResponseJSON kita berikan trait derive(Serialize) artinya kita minta Rust bersiap untuk merubah tipe data Struct menjadi tipe data yang akan kita minta nantinya.

Pada tipe data values, kita masukkan trait serde(default = "default_empty_object") yang artinya apabila kosong kita akan menggunakan nilai dari fungsi default_empty_object().

Kita punya impl ResponseJSON artinya yang akan mengimplementasikan isi fungsi dari struct ResponseJSON. Perlu diingat karena Rust tidak mengenal konsep class sehingga apabila kita ingin implementaskan fungsinya kita bisa pake syntax impl dari sebuah struct.

Terdapat dua fungsi new dan success, keduanya memiliki dua parameter yang beda. Fungsi new bisa menerima status, sedangkan fungsi success sudah disiapkan status defaultnya 200 (Ok).

Pada fungsi new terdapat trait allow(dead_code) artinya walaupun nanti fungsi new tidak diimplementasikan, kita bisa mengabaikan compiler agar tidak memberikan warning. Harapannya fungsi new ini suatu saat kepake. Walau sebenarnya bisa dihapus saja.

Fungsi default_empty_object() digunakan untuk mengembalikan tipe data JSON kosong apabila nilai parameter values tidak diisi.


Sekarang ubah file mod.rs pada folder helper dengan kode berikut:
pub mod response_json;

File mod.rs berguna untuk mengexpose file-file di dalam folder supaya bisa dipanggil dari luar folder tersebut, misal dari main.rs.
Main Controller
Sekarang pergi ke main_controller.rs lalu masukkan kode berikut:
use crate::helper::response_json::ResponseJSON;
use actix_web::{HttpResponse, Responder, get};

#[get("/")]
async fn index() -> impl Responder {
    HttpResponse::Ok().json(
        ResponseJSON::success("Welcome to the API".to_string(), None)
    )
}

Disini kita akan mengembalikan pesan Welcome to the API dan dengan value kosong.
Library Init File
Pada file lib.rs kita masukkan kode berikut:
pub mod helper;
pub mod controller;

Init File
Sekarang kembali ke main.rs lalu ubah isinya agar menjadi seperti ini:
use actix_web::{get, App, HttpResponse, HttpServer, Responder};
use api_tweet::controller;

#[get("/")]
async fn hello() -> impl Responder {
    HttpResponse::Ok().body("Hello world!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(controller::main_controller::index)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Perhatikan pada fungsi .service, kita tidak lagi menggunakan fungsi hello melainkan menggunakan fungsi index dari main_controller.rs.
Pada baris kedua, use api_tweet::controller kita sesuaikan nama folder dari projek kita yang ditulis pada Cargo.tml yaitu name = "api-tweet". Jadi kita bisa pakai seluruh file di dalam folder controller untuk digunakan pada main.rs.

Kenapa kita perlu lib.rs?

Karena kita akan import semua modul (folder) di dalam sebuah file sebagai gerbang utama, tujuannya agar lebih terorganisir. Kita bisa aja sih manggil langsung di dalam main.rs untuk inisiasi modulnya, nanti kodenya jadi gini:
use actix_web::{get, App, HttpResponse, HttpServer, Responder};
mod controller;
mod helper;

#[get("/")]
async fn hello() -> impl Responder {
    HttpResponse::Ok().body("Hello world!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(controller::main_controller::index)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

tapi bayangin kalo foldernya jadi ada banyak, otomatis makin banyak lagi yang di-import. Dengan memindahkan gerbangnya ke lib.rs kita bisa membuat kode jadi sedikit lebih bersih.
Sekarang kembali jalankan dengan cargo run dan akses localhost:8080, kamu akan mendapatkan response:
{"message":"Welcome to the API","status":200,"values":{}}

Cukup mudah kan membuat API di Rust? 😉



Konsep Belajar Ala Anak Workout
Muhamad Hudya Ramadhana — Sun, 15 Dec 2024 14:20:31 GMT
Belajar emang nggak menyenangkan, selain membosankan, belajar juga tidak mudah untuk seseorang yang baru terjun ke bidang yang ingin ditekuninya. Sebagai contoh ketika saya belajar tentang software engineering, tentu saja saya seringkali bosan dan stuck, bedanya saya bisa menguasai rasa bosan dan terus tabrak-tabrak masuk di setiap waktu. Ini yang disebut dengan kedisiplinan.
Pertanyaannya, apakah semua orang bisa punya metode yang sama? Jawabannya tentu tidak. Semakin kesini gaya pemikiran tiap orang untuk menyelesaikan masalah semakin kreatif, dan tentu saja kreatifitas ini akan membuka banyak cara dan gaya baru untuk mencapai tujuan masing-masing, misalnya dalam hal ini, belajar.
Belajar Lewat Gym
Sejak Mei 2023 saya bisa dibilang aktif berolahraga angkat beban di Gym, bahkan keaktifan ini sudah bukan disebut aktif lagi, tapi addict atau lifestyle. Hidup saya sekarang selalu dekat dengan olahraga.
Sejak Februari 2024, perjalanan saya menekuni olahraga kalistenik dimulai, berbekal pengalaman dan video orang lain, saya terus belajar untuk memiliki basic yang kuat sebagai atlit kalistenik dan sedikit demi sedikit belajar skill kalistenik, salah satu skill yang sudah saya buka adalah L-sit.
Seiring berjalannya waktu, saya selaku tenaga pendidik di kampus menemukan arti baru cara belajar yang harusnya bisa ditularkan ke banyak orang, tentu cara yang akan saya berikan ini tidak akan pasti cocok untuk semua orang, tapi bisa dijadikan salah satu alternatif.
Karena menurut saya, pembelajaran lewat metode workout ini sangat menyenangkan, dengan konsep yang sama harusnya seseorang bisa mengatasi rasa bosan dan tetap berprogress. Bagian terpenting dalam tumbuh dan berkembang adalah konsistensi, dan tentu saja konsistensi ini akan diraih bukan dari seberapa banyak kita latihan dalam satu hari, tapi seberapa sering kita mengulangnya.
Konsep Dasar Workout
Apabila kamu sudah masuk di dunia workout ala anak gym atau kalistenik, kamu tentu pernah mengenal istilah push day, pull day, dan leg day. Ya, tiga hari ini merupakan metode latihan yang sifatnya general untuk menargetkan otot yang ingin dilatih.
Semakin saya sering latihan di Gym, saya menemukan bahwa harusnya belajar juga bisa diibaratkan dengan workout, dimana konsep push, pull, dan leg bisa digunakan sebagai istilah penyebutan hari belajar untuk mencapai tujuan.

Penasaran? Baca terus sampai ke bawah.
Push Day
Push day merupakan hari latihan dengan konsep mendorong, biasanya dorongan yang dilakukan bisa bersifat horizontal atau vertikal. Otot yang paling sering digunakan pada hari ini adalah shoulder, triceps, dan chest. Ketiga otot yang akan membuat upper body kita menjadi terlihat keren dari depan.
Lantas apa hubungannya dengan belajar? Push day (mendorong) bisa dikaitkan dengan hari pembelajaran yang berfokus kepada dorongan untuk mencapai tujuan (bekerja/membangun usaha/produk), biasanya setelah kita memiliki tujuan yang jelas atau spesifik, kita bisa menggunakan push day untuk fokus ke sesuatu yang akan menghasilkan uang, misalnya pekerjaan.
Apabila seorang mahasiswa ingin belajar programming pada push day, mahasiswa bisa fokus ke materi yang sekiranya akan menunjang kebutuhan kerja, misalnya apabila mahasiswa tersebut ingin menjadi frontend developer, maka mahasiswa tersebut bisa sedikit demi sedikit mempelajari framework yang ramai di pasaran, misalnya Next JS, React, Preact atau bahkan Vue.
Apabila seorang mahasiswa tersebut backend, mahasiswa tersebut bisa fokus ke materi untuk menunjang kebutuhan kerja misalnya berjibaku dengan API, belajar membuat API, coba implementasi API todo-list dan sejenisnya dengan Go.
Push day akan berfokus untuk meningkatkan kemampuan di bidang yang sangat dekat dengan kita, tujuannya juga untuk membuat kita lebih percaya diri, bangga, dan stabil untuk meningkatkan kemungkinakan mendapatkan uang untuk bertahan hidup di masa mendatang.
Hal ini juga dekat dengan konsep shoulder yang akan membuat pria terutama lebih percaya diri, dan chest sebagai kebanggan, serta tricep yang kuat untuk menjaga stabilitas saat mendorong.
Jadi, apakah kamu tertarik untuk mengadopsi konsep push day?

Pull Day
Pull day merupakan hari latihan dengan konsep menarik, biasanya tarikan yang dilakukan juga bisa bersifat horizontal atau vertikal. Otot yang paling sering digunakan adalah biceps dan seluruh otot back (trapezius, rhomboid, teres minor, teres major, latissimus dorsi (lats), lower back dan lainnya). Banyak otot back ini bisa menopang tubuh kita dari belakang yang mana ini merupakan otot paling lebar di tubuh kita, sehingga sangat kuat sekali menopang tubuh kita.
Dalam pembelajaran, pull day bisa digunakan untuk meningkatkan minat kita terhadap bidang yang kita tekuni baik itu linear maupun non-linear, artinya gunakan pull day untuk berkreasi dan meningkatkan kemampuan di bidang yang kita mau.

Apa yang dimaksud linear dan non-linear? Artinya ketika pull day, usahakan untuk belajar sesuatu yang sifatnya supportif terhadap bidang kita (linear) dan menarik minat kita untuk belajar lebih banyak (non-linear).
Contoh, apabila seseorang di bidang frontend melakukan belajar pada pull day, ia bisa belajar tentang bagaimana proses build bekerja, kadang kita hanya ingin menjalankan script npm run build, tapi kita tidak paham mengapa proses build bisa berjalan.
Dengan memahami sebenarnya apa yang dilakukan oleh teknologi yang kita gunakan, kita bisa melakukan kustomisasi ketika dibutuhkan yang tentunya menunjang kebutuhan kerja di masa mendatang, sehingga pendekatan ini bisa jadi pendekatan linear.
Pada lain sisi, kita juga dapat melatih sesuatu yang sifatnya non-linear, misalnya bagaimana proses build dan deploy untuk static site dari projek react yang kita kerjakan? Bagaimana cara deploy di vercel atau Heroku? Bagaimana cara menjalankan build dengan Github Action?
Meskipun ini tidak langsung merupakan bidang yang frontend tekuni, tapi ilmu yang kalian dapatkan akan bermanfaat di masa mendatang, sehingga pendekatan ini saya anggap sebagai pendekatan non-linear.

Tentunya hal ini juga berlaku pada backend, misalnya ketika ingin membicarakan hal linear, kita bisa mencari tahu bagaimana melakukan optimasi dengan index di database. Tentunya hal ini akan menarik karena database juga merupakan kemampuan yang linear dengan backend.
Untuk hal non-linear, kamu bisa mencicil sedikit belajar tentang CSS dengan Tailwind, meskipun CSS menyebalkan tapi tetap saja backend juga terkadang akan membutuhkannya apalagi kalau kamu ingin menjadi semi web-developer. Jadi cari alternatif teknologi atau library yang bisa menunjang walau bisa jadi tidak sempurna, yang terpenting adalah meningkatkan kemampuan!

Leg Day
Kaki merupakan fondasi paling penting pada hidup manusia. Kaki menopang seluruh tubuh bagian atas yang berfungsi untuk berjalan. Kaki merupakan otot besar yang bisa menjaga manusia seimbang.
Leg day biasanya akan dilatih dengan metode strength training, yang berfungsi untuk mendorong apabila dibutuhkan kaki, tapi di lain sisi leg day juga penting menjaga endurance, karena kaki akan digunakan terus menerus untuk berjalan, berbeda dengan otot upper body yang tidak akan digunakan terus menerus.
Melatih endurance sangat penting, karena endurance merupakan dasar dari kegunaan kaki itu sendiri, misalnya ketika kamu naik ke puncak gunung kamu akan membutuhkan endurance yang besar dari kaki untuk menopang tubuhmu, serta membutuhkan strength juga untuk mengangkat tubuhmu ketika ada batu untuk mendaki.
Kaitannya dengan belajar adalah leg day merupakan fondasi utama dari kehidupan yang bisa kita analogikan sebagai tiang utama. Artinya leg day digunakan untuk belajar hal-hal dasar setelah apa yang kita pelajari pada push dan pull day.
Kembali ke dasar merupakan hal yang paling penting, artinya baik siapapun dan di bidang apapun akan kembali menguatkan dasar ilmunya.

Apabila kamu seorang frontend maka kamu akan kembali menekuni dan mengulang pembelajaran CSS atau Javascript

Apabila kamu seorang backend maka kamu akan kembali menekuni algoritma dan data struktur

Apabila kamu seorang devops maka kamu akan kembali belajar bash scripting atau hal dasar di bidang devops.

Apabila kamu seorang UI/UX kamu bisa kembali belajar teori dasar warna dan hal lain.




💡
Pentingnya selalu mengulas kembali pengetahuan dasar yang sering kali diabaikan setelah seseorang merasa "ahli".



Kardio
Mengingat konsep latihan otot, tentu ada satu otot yang biasanya anak Gym lupakan, yaitu otot jantung atau kardiovaskular. Otot jantung merupakan otot yang memompa darah ke seluruh tubuh. Otot ini merupakan bagian penting karena otot ini akan menjaga stamina kalian selama perjalanan.
Ketika membicarakan endurance (daya tahan), otot ini berperan penting dalam menjaga stamina seseorang. Misalnya atlet renang dan atlet lari jarak jauh tentu memiliki otot kardiovaskular yang kuat untuk memompa selama jalannya pertandingan atau aktivitas.
Kardio dalam belajar bisa diibaratkan latihan jangka panjang, misalnya:

Membuat proyek jangka panjang (proyek besar maupun kecil)

Menonton video atau membaca artikel teknologi (baik tutorial maupun insight)

Menuliskan apa yang sudah dipelajari dan mempostingnya ke blog atau catatan online (misalnya notion)

Mengikuti perlombaan hackathon misalnya atau challenge di leetcode


Hari latihan kardio bisa juga diibaratkan sebagai latihan mental, konsistensi, dan stamina untuk jangka panjang latihan yang akan kalian lakukan.
Gunakan hari kardio dengan baik untuk mengerjakan sesuatu dan melatih hal-hal kecil di dalam pembelajaran kalian yang berdampak panjang pada proses pembelajaran kalian.


Jadwal Latihan
Untuk membuat jadwal latihan, pastikan kamu selalu berlatih minimal 1 jam perhari, atau bahkan 30 menit kalau waktunya sedikit, gunanya untuk menjaga konsistensi. Dalam satu minggu, kamu bisa membuat jadwal misalnya seperti ini:

Senin - Push

Selasa - Pull

Rabu - Leg

Kamis - Rest

Jumat - Push / Pull / Leg (terserah tergantung fokus)

Sabtu - Kardio

Minggu - Rest/Kardio



💡
Pentingnya untuk berlatih secara fokus di hari yang kalian tentukan, jadi untuk membuatnya efektif, pastikan belajar 1 jam dengan keadaan fokus dimana sosial media dimatikan.


Dengan jadwal di atas kamu bisa tetap berprogress dengan baik, karena yang terpenting adalah konsistensi dan disiplin dalam belajar, bukan seberapa banyak waktu yang kalian gunakan untuk belajar.
Jadi bagaimana? Sudah kepikiran bagaimana menyusun strategi kalian untuk belajar? 😉



Menjadi atlit Vim dengan Nvim - Part 1
Muhamad Hudya Ramadhana — Wed, 27 Nov 2024 13:53:27 GMT
Overview
Vim adalah editor yang paling menyebalkan, saking menyebalkannya ada jokes yang disebut seperti ini:

Untuk membuat secret key pada backend, berikan saja vim editor pada frontend developer, biarkan ia struggle selama sepuluh menit dan kemudian kamu akan mendapatkan secret key acak.

Sebenarnya Vim itu menyenangkan kalau kita paham Vim itu memang memberikan kemudahan. Sayangnya banyak yang sudah nyaman dengan editor yang sudah ada saat ini seperti Zed, VSCode, VSCodium, Jetbrains, dan yang lain.
Pertanyaannya, apakah salah jika tidak menggunakan Vim? Apakah salah jika menggunakan Vim? Jawabannya tidak, baik menggunakan Vim atau tidak hidupmu akan sama saja.

Lantas, kenapa orang-orang menggunakan Vim?

Masalah dari penggunaan editor seperti VSCode dan Jetbrains adalah resource yang besar. Lantas mengapa orang-orang menggunakannya? Jawabannya karena kemudahan yang ditawarkan. Sekali klik, install, jalan, boom maka kamu akan lebih mudah coding tanpa setup hal-hal yang kecil.
Namun, kita lupa konsep membeli atau memakai berarti juga harus menjaga, konsep ini juga seringkali diabaikan pada penggunaan editor seperti VSCode, karena banyaknya plugin yang menarik, lucu, walaupun sebenarnya tidak begitu berguna, sebagian software engineer cenderung menjadi impulsif dan main asal install, kemudian berdampak pada penurunan kinerja aplikasi itu sendiri sehingga menggunakan VSCode pada akan memberikan kesan lambat seperti bekerja pada komputer jadul yang lambat.
Oleh karena itulah, banyak orang mulai kembali ke dasar, yaitu menggunakan Vim.
Vim sebenarnya bukan editor baru, melainkan editor lama yang sudah digunakan bahkan oleh software engineer di bawah tahun 2000-an, karena Vim juga dibuat pada 1991 yang merupakan improvisasi dari Vi, yaitu editor yang dirilis pada tahun 1971.
Salah satu kelebihan Vim itu sendiri adalah, Vim sangat ringan karena tidak membutuhkan resource yang besar, namun kelemahan lainnya adalah tentu karena tidak sekompleks VSCode dan editor lainnya, Vim tidak akan terlihat eye-catching dan lumayan rumit bagi yang pertama kali terjun menggunakan editor ini.
Vim sebenarnya selalu menempel di server-server linux, bahkan kita sering akan menjumpai banyak orang melakukan edit data di server menggunakan Vim. Namun yang kita akan gunakan kali ini adalah versi yang lebih baik dari Vim yaitu Nvim (Neovim).
Neovim
Neovim atau biasa disebut nvim merupakan editor buatan Bram Moolenaar. Neovim merupakan fork (percabangan) dari repositori vim, bukanlah sebuah kloningan repositori, sehingga Nvim akan selalu cocok dengan vim karena developmentnya akan linear.
Neovim memiliki keunggulan, selain karena dibangun di atas VIM, Neovim mengizinkan pengguna melakukan eksplorasi dengan menggabungkannya dengan Lua, sebuah bahasa pemrograman yang dapat memperluas fungsionalitas editor ini.
Tidak ada yang mengetahui kapan pastinya komunitas Neovim mulai kembali naik daun, karena komunitas ini dikatakan sebagai kultus. Sekali kamu masuk, kamu akan sulit keluar. Namun tenang saja, itu kan hanya jokes. 😝
Instalasi
Pada kali ini saya akan menggunakan Ubuntu, saya juga menyarankan siapapun yang membaca ini untuk menggunakan ubuntu. Kalau kamu belum menggunakan ubuntu, maka gunakan multipass. Baik kamu menggunakan windows atau ubuntu sekalipun, saya akan menyarankan menggunakan multipass. Tujuannya agar latihan ini akan di-isolasi dan tidak mengganggu neovim di laptop kamu.

Ini adalah settingan instance yang saya gunakan, atau kalau kamu lebih suka menggunakan command line, masukkan perintah di bawah ini:
multipass launch 22.04 --name latihan-multipass --cpus 1 --memory 2G --disk 32G

Oke, sekarang kita masuk ke instance yang kita bangun:
hudya@perogeremmer-pc:~$ multipass list
Name                    State             IPv4             Image
latihan-multipass       Running           10.129.14.107    Ubuntu 22.04 LTS
hudya@perogeremmer-pc:~$ multipass shell latihan-multipass
Welcome to Ubuntu 22.04.5 LTS (GNU/Linux 5.15.0-122-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/pro

 System information as of Wed Nov 27 10:08:04 WIB 2024

  System load:  0.0               Processes:             92
  Usage of /:   6.9% of 24.05GB   Users logged in:       0
  Memory usage: 11%               IPv4 address for ens3: 10.129.14.107
  Swap usage:   0%


Expanded Security Maintenance for Applications is not enabled.

33 updates can be applied immediately.
21 of these updates are standard security updates.
To see these additional updates run: apt list --upgradable

Enable ESM Apps to receive additional future security updates.
See https://ubuntu.com/esm or run: sudo pro status

New release '24.04.1 LTS' available.
Run 'do-release-upgrade' to upgrade to it.


To run a command as administrator (user "root"), use "sudo ".
See "man sudo_root" for details.

ubuntu@latihan-multipass:~$

Kalau kamu ketik vim maka kamu akan melihat tampilan seperti ini:

Artinya vim sudah terinstall.
Sekarang kamu akan bertanya, bagaimana keluar dari vim? Ada beberapa step:

Tekan tombol esc untuk memastikan kamu kembali ke command mode.

Tulis pada keyboard :q atau :qa, sertakan juga titik duanya.

Tekan tombol enter


Perhatikan GIF di bawah ini:

Instalasi Neovim
Sekarang kita akan melakukan instalasi Neovim, tapi instalasi yang kita lakukan tidak akan menggunakan apt maupun snap, melainkan langsung dari github repository-nya. Tujuannya agar kita belajar dan paham bagaimana cara build bekerja.
Pertama, pastikan dulu sudah terinstall dua hal, yaitu build essentials dan cmake. Masukkan perintah berikut.
sudo apt install build-essential cmake gettext

Setelahnya kita clone dulu di home ubuntu kita
git clone https://github.com/neovim/neovim.git

Kemudian masukkan perintah ini baris perbaris
cd neovim
git checkout -b stable
make CMAKE_BUILD_TYPE=Release
sudo make install

Perintah yang dilakukan di atas adalah, masuk ke folder neovim yang sudah diclone menggunakan git, kemudian pindah ke branch stable dimana kode di branch ini disiapkan khusus untuk neovim versi stabil.
Jika kamu menemukan error sejenis ini atau apapun yang tulisannya error
gmake[3]: *** [CMakeFiles/treesitter.dir/build.make:92: build/src/treesitter-stamp/treesitter-configure] Error 1
gmake[3]: Leaving directory '/home/ubuntu/neovim/.deps'
gmake[2]: *** [CMakeFiles/Makefile2:477: CMakeFiles/treesitter.dir/all] Error 2
gmake[2]: Leaving directory '/home/ubuntu/neovim/.deps'
gmake[1]: *** [Makefile:91: all] Error 2
gmake[1]: Leaving directory '/home/ubuntu/neovim/.deps'
make: *** [Makefile:98: deps] Error 2

Masukkan perintah berikut:
sudo rm -r .deps
sudo rm -r build

Lalu ulang lagi proses berikut:
make CMAKE_BUILD_TYPE=Release
sudo make install

Sekarang ketik nvim, maka kamu akan melihat tampilan berikut:

Untuk tahu version stablenya cek website resminya dan cari di bagian bawah.


Mode dan Perintah Dasar
Pada vim terdapat tiga mode dasar, yaitu:

Command Mode

Insert Mode

Visual Mode


Command Mode

Apabila kamu melihat tampilan di atas merupakan tampilan dari command mode, artinya kita bisa memberikan perintah baru pada editor vim, misalnya kita coba masukkan perintah berikut
:set number


Kamu akan mendapatkan angka muncul di dalam editor nvim. Perintah command mode ada banyak, namun salah satu yang basic adalah :set number.
Insert Mode
Sekarang tekan tombol esc lalu tekan i atau a, kamu akan melihat editor berubah menjadi ada tulisan —insert—.

Setelah mode berubah menjadi - - INSERT - - kamu bisa langsung mengetik apapun seperti biasa, untuk kembali ke mode command cukup tekan tombol esc.
Visual Mode
Untuk masuk ke mode visual kamu harus kembali ke mode command terlebih dahulu. Tekan tombol v maka kamu akan melihat mode berubah menjadi - - VISUAL - -, sekarang blok teks yang ingin kamu hapus dan tekan d. Viola akan terhapus!


Some Basic Things
Paste
Pada paragraf di vim, kamu bisa mengelola beberapa hal yang sederhana, misalnya coba kalian copy teks di bawah ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum suscipit turpis, vulputate viverra mi. Duis dapibus nunc ac metus euismod, ut blandit diam hendrerit. Quisque fringilla rutrum euismod. Suspendisse tincidunt dapibus nibh et viverra. Nunc luctus consequat suscipit. In et efficitur tellus. Sed vulputate dignissim massa sed pretium. Nullam quis ipsum a metus bibendum bibendum. Mauris laoreet vulputate tortor vel aliquet.

Morbi eget faucibus sapien. Vivamus et purus varius, vehicula erat posuere, commodo metus. Ut auctor, nulla eu maximus blandit, risus ante dapibus lectus, vel viverra sem nisi ut justo. Vivamus quis vestibulum elit. In ac tortor in mauris iaculis consectetur at vitae quam. Sed ullamcorper erat eu elit commodo iaculis. Pellentesque in venenatis augue, id pretium lacus. Sed quis eleifend nibh, vitae iaculis purus. Quisque in tristique sapien.

Pellentesque id aliquet enim. Fusce cursus quam id porta pharetra. Donec tempus accumsan dictum. Donec nec purus ornare, volutpat quam vitae, elementum turpis. Cras at venenatis dui. Donec molestie maximus augue, non facilisis risus pulvinar ac. Sed velit dolor, vehicula at dui in, dignissim mattis tellus. Proin libero nunc, lobortis sit amet tristique in, auctor vitae purus.

Untuk paste di vim, pertama masuk ke mode insert (tekan i), lalu tekan tombol keyboard CTRL + SHIFT + V.

Find
Untuk mencari di vim menggunakan teks di atas, masukkan perintah pada command mode / (menggunakan regex) atau ? diikuti dengan teks yang dicari, misalnya purus.

Untuk pindah ke bagian pencarian selanjutnya, tekan n (n kecil) untuk maju ke depan dan N (n besar dengan cara tekan Shift) untuk mundur ke belakang.
Untuk menghentikan higlight keyword dari pencarian tadi, tekan esc untuk kembali ke mode command lalu masukkan perintah :noh dan tekan enter.
Untuk berpindah antar paragraf tekan Shift + { untuk mundur dan Shift + } ke paragraf selanjutnya.
Using Explorer
Kita akan sedikit menggunakan explorer pada nvim, kita pastikan kita berada di home terlebih dahulu, kemudian masukkan perintah ke bawah baris perbaris:
cd ~
mkdir latihan
cd latihan

Sekarang kembali ketik nvim di dalam folder latihan pada terminal, lalu masukkan perintah :Explore pada command mode.
Untuk membuat file baru baru, tekan tombol % (Shift + angka yang ada persennya) , masukkan namanya misalnya hello.txt, lalu masukkan perintah :w dan tekan enter untuk save . Kembali ke mode command (tekan esc) lalu masukkan :Explore lagi kemudian kamu akan menemukan file hello.txt yang kamu temukan.

Untuk merubah nama file, kembali jalankan :Explore lalu arahkan ke file yang ingin dirubah, tekan R (tekan Shift + R) untuk merubah namanya lalu tekan enter.

💡
Kenapa harus pake Shift + R? Karena r kecil akan mengurutkan file, kalau gak percaya coba aja 😝




Playing with Tabs
Sekarang kita akan bermain dengan tab yang di-split seperti fitur pada editor lain. Masuk kembali ke nvim lalu tulis :split atau :vsplit untuk melakukannya secara vertical.

Untuk berpindah tekan tombol CTRL + W lalu tekan tombol arrow kanan kiri bawah dan tekan tombol CTRL + WW untuk pindah ke tab selanjutnya.

Untuk rotate atau membalik tabnya tekan CTRL + WR. Untuk membuatnya jadi kelihatan berpindah atau rotate, kita perlu buat tiga file dulu. Masukkan perintah berikut:
touch file1.txt file2.txt file3.txt

Hasilnya:
# Hasil
ubuntu@latihan-multipass:~/latihan$ touch file1.txt file2.txt file3.txt
ubuntu@latihan-multipass:~/latihan$ ls
file1.txt  file2.txt  file3.txt  hello-diubah.txt

Sekarang buka lagi tiga tab dan gunakan perintah :Explore untuk membuka masing-masing file pada tab (tekan enter ketika ingin membuka filenya), kombinasikan dengan CTRL + WW untuk berpindah. Jangan lupa masukkan perintah :w untuk save pada setiap file (jangan :wq karena akan menutup tab).
Perhatikan GIF berikut.

Setup Config & Plugins
Setup Default Script
Sekarang pergi ke ~/.config/nvim dengan perintah cd ~/.config/nvim. Kalau kamu menemukan pesan seperti ini:
ubuntu@latihan-multipass:~$ cd ~/.config/nvim
-bash: cd: /home/ubuntu/.config/nvim: No such file or directory

Maka jalankan script di bawah ini untuk membuat folder .config dan nvim di dalamnya.
mkdir ~/.config
mkdir ~/.config/nvim

Sekarang kembali jalankan perintah cd ~/.config/nvim. Di dalamnya buat file baru bernama init.lua dengan cara touch init.lua, file init.lua akan digunakan sebagai file utama pada saat melakukan inisiasi nvim (saat nvim dibuka).
Setelah membuat file init.lua, masuk menggunakan nvim dengan cara nvim init.lua lalu masukkan kode di bawah ini:
vim.cmd('set number')

Kemudian setelah selesai, kembali ke command code (tekan esc) dan masukkan perintah :wq (write and quite / save and quit).
Perhatikan GIF berikut:

Sekarang ketik nvim kembali pada terminal dan kamu akan melihat otomatis ada nomor pada editor nvim kamu.
Instalasi pyright
Sekarang kita perlu menginstall nvm (Node version manager) karena kita ingin menggunakan pyright, sebuah library di node static type checker untuk Python yang dikembangkan oleh Microsoft. pyright adalah sebuah language server yang menyediakan berbagai fitur analisis kode Python, termasuk:

Type checking

Linting

Auto-import suggestions

Code navigation

Refactoring


Masukkan perintah berikut untuk instalasi di ubuntu multipass.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Setelah selesai masukkan perintah:
source ~/.bashrc

Tujuannya untuk mengaktifkan ulang terminal agar bisa menggunakan nvm (node version manager). Sekarang coba jalankan nvm --version apabila berhasil kamu akan melihat tampilan seperti ini:
ubuntu@latihan-multipass:~/latihan$ nvm --version
0.40.1

Kita akan coba install versi node v22.11.0, masukkan perintah berikut:
nvm install v22.11.0

Tunggu prosesnya selesai dan sekarang kamu bisa memasukkan perintah node -v. Apabila berhasil:
ubuntu@latihan-multipass:~/latihan$ node -v
v22.11.0

Sekarang install pyright dengan cara:
npm -g install pyright

Untuk memeriksanya jalankan perintah pyright maka kamu akan melihat seperti ini:
ubuntu@latihan-multipass:~/latihan$ pyright
0 errors, 0 warnings, 0 informations

Ubah file Init
Sekarang kita ubah kembali file init.lua dengan cara nvim ~/.config/nvim/init.lua. Ganti seluruh kode di dalamnya dengan kode berikut:
-- setup
vim.cmd('set number')

-- packages
local Plug = vim.fn['plug#']
vim.call('plug#begin')

Plug 'neovim/nvim-lspconfig'
Plug 'hrsh7th/cmp-nvim-lsp'
Plug 'hrsh7th/cmp-buffer'
Plug 'hrsh7th/cmp-path'
Plug 'hrsh7th/cmp-cmdline'
Plug 'hrsh7th/nvim-cmp'

vim.call('plug#end')


-- config LSP
require('lspconfig').pyright.setup{}

local cmp = require('cmp')

cmp.setup {
      sources = {
        { name = 'nvim_lsp' },
      },
      mapping = cmp.mapping.preset.insert({
        [''] = cmp.mapping.complete(),
    [''] = cmp.mapping.confirm({ select = true }),
      }),
}


-- config key map
vim.keymap.set("n", "gd", function() vim.lsp.buf.declaration() end)

Save dengan cara masuk mode command (tekan esc) lalu masukkan :wq.
Kemudian kita perlu menginstall vim-plug, yaitu alat untuk mengelola plugin di Vim/Neovim. Ini memungkinkan kamu dengan mudah menginstal, memperbarui, dan menghapus plugin.
Caranya simple, karena kita pakai unix (linux di ubuntu), masukkan perintah ini:
sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'


Sekarang buka kembali nvim dan kamu akan menemukan error seperti ini:

Jangan khawatir, cukup tekan tombol enter lalu ketik :Plug pada mode command lalu tekan tombol tab, kamu akan melihat autocompletion. Untuk berpindah ke baris selanjutnya tekan tab kembali dan tekan enter pada bagian :PlugInstall. Tunggu hingga proses selesai.

Sekarang di folder latihan, buat file baru bernama hello.py dengan cara touch hello.py atau nvim hello.py. Kita akan membuktikan apakah plugin language server yang baru saja kita install sudah berhasil? Mari kita buktikan!
Perhatikan GIF berikut:


💡
Perhatikan bahwa terdapat auto completion bahkan linter di dalamnya sehingga ketika saya kembali ke mode command dan terdapat kesalahannya, editor Nvim akan memberitahu letak kesalahannya.



Membuat Form - Part 5
Muhamad Hudya Ramadhana — Mon, 08 Apr 2024 23:06:36 GMT

💡
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆


Overview
Pada tutorial sebelumnya kita sudah memahami cara membuat navbar dan juga footer. Sekarang kita ingin membuat sebuah form pada HTML dengan desain yang saya pilih dari Dribble.

Sumber Desain.
Kick Off
Menggunakan template yang kemarin kita akan membangun basenya terlebih dahulu, kita akan membuat dimana tampilan seperti card seperti yang ada di desain.
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

head>

<body class="bg-gray-100 flex flex-col min-h-screen max">
    <nav class="fixed inset-x-0 top-0">
        <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
            <div class="flex justify-center">
                <p class="text-white text-lg font-bold">My Registrationp>
            div>
        div>
    nav>

    <div class="container mx-auto mt-24 flex justify-center">
        <form class="flex flex-col w-8/12 shadow-sm rounded-lg bg-white py-10 px-3">
            
        form>
    div>

    <footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
        <div class="flex justify-center">
            <p class="text-white text-lg font-bold">Footerp>
        div>
    footer>


body>

html>


Tampilannya akan menjadi seperti ini untuk base card-nya.
Sekarang kita perlu paham seperti apa teori tampilannya. Berikut merupakan rancangan frame dari desain di atas.

Sekarang kita isi bagian formnya dengan kode berikut berdasarkan frame di atas.
<div class="flex w-full justify-center ">
  <p class="text-2xl font-medium">Registrationp>
div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> First name label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="firstname" type="text" placeholder="First name">
  div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name"> Last name label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="lastname" type="text" placeholder="Last name">
  div>
div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Email address"> Email address label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="email" type="emai" placeholder="Email address">
  div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Company"> Company label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="company" type="text" placeholder="Company">
  div>
div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Address"> Address label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="address" type="text" placeholder="Address">
  div>
div>
<div class="flex flex-col w-full mt-12 px-5">
  <div class="flex w-full">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> Date of birth label>
  div>
  <div class="flex flex-row w-full justify-between">
    <div class="flex w-4/12 flex-col pr-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
        <option>Monthoption>
      select>
    div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
        <option>Dayoption>
      select>
    div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
        <option>Yearoption>
      select>
    div>
    <div class="flex w-auto">
      <i class='text-5xl text-gray-400 bx bx-calendar-alt'>i>
    div>
  div>
div>
<div class="flex flex-col w-full px-5 mt-20">
  <button class="bg-black py-3 text-white rounded-lg font-semibold">Registerbutton>
div>

Maka, tampilannya akan menjadi seperti ini.

Sekarang mari kita bedah kodenya.
Bedah Kode
Berikut salah satu contoh dari input.
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> First name label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="firstname" type="text" placeholder="First name">
  div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name"> Last name label>
    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="lastname" type="text" placeholder="Last name">
  div>
div>

Karena kita memerlukan satu baris yang dibagi dua, maka kita memerlukan flex-row.
Setelahnya, kita membagi dua baris dengan class flex w-1/2. Di dalamnya kita beri flex-col, kenapa? Karena label ada apda bagian atas, lalu di bawahnya ada teks input.
Sekarang perhatikan class input, perbedaan paling mendasar antara Tailwind dengan Bootstrap adalah pada Tailwind kita tidak mudah untuk membangun sebuah input teks.
Menggunakan Bootstrap, kita dapat dengan mudah membangun form dengan kode berikut:
<div class="form-group">
  <label for="exampleInputEmail1">Email addresslabel>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.small>
div>

Sesederhana menggunakan class form-control. Sedangkan menggunakan Tailwind, kita perlu dengan ribet dengan class sepanjang ini:
border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900
Namun, justru ini yang membuat Tailwind terlihat indah. Dikarenakan fleksibilitas pembuatan sebuah input, kita dapat dengan bebas mengatur bentuk input yang kita mau. Berdasarkan dokumen berikut, kita dapat dengan mudah mengganti style ketika kita melakukan hover, focus, dan hal lainnya yang berhubungan dengan input.
Artinya, bagi para backend developer, kita benar-benar bisa dikatakan tidak perlu berurusan dengan Vanilla CSS (CSS Murni). Hover dan focus adalah dua atribut umum yang sering digunakan untuk mengatur input. Tailwind sudah sangat membantu anak-anak backend untuk tidak berurusan dengan CSS.
Selain itu kita bisa mengatur tinggi pendeknya input dengan py-3 serta teks yang akan diinput dengan text-gray-900. Apabila ada desain yang membutuhkan warna yang berbeda, anak backend dapat dengan mudah mengatur ketebalan sebuah warna.

Sekarang kita membahas bagian date of birth. Perhatikan kode bagian ini:
<div class="flex flex-col w-full mt-12 px-5">
  <div class="flex w-full">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> Date of birth label>
  div>
  <div class="flex flex-row w-full justify-between">
    <div class="flex w-4/12 flex-col pr-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
        <option>Monthoption>
      select>
    div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
        <option>Dayoption>
      select>
    div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
        <option>Yearoption>
      select>
    div>
    <div class="flex w-auto">
      <i class='text-5xl text-gray-400 bx bx-calendar-alt'>i>
    div>
  div>
div>

Pada bagian ini, kita membagi tiga ukurannya karena ingat bahwa konsep lebar kolom kiri ke kanan adalah 12, ditambah dengan bagian div terakhir dengan lebar yang otomatis mengikuti.
Perbedaan paling mencolok antara Tailwind dengan Bootstrap adalah apabila pada bootstrap kita menambah satu elemen lagi setelah 12 ini penuh, elemen terakhir ini akan turun ke bawah. Nah pada Tailwind, hal ini tidak akan terjadi kecuali kita menambahkan class flex-wrap pada elemen div di atasnya. Kalau kamu lupa, coba cek lagi tutorial berikut.
Elemen terakhir untuk icon kita gunakan w-auto agar mengikuti lebar yang tersisa.

Terakhir, kita bedah bagian button.
<div class="flex flex-col w-full px-5 mt-20">
  <button class="bg-black py-3 text-white rounded-lg font-semibold">Registerbutton>
div>

Dapat kita lihat bahwa untuk membuat button saja, kita perlu mengatur class pada button sepanjang kode di atas. Sedangkan pada Bootstrap, kita hanya perlu melakukan ini:
<button type="button" class="btn btn-primary">Primarybutton>

Tentu saja saya kembali ngingetin nih, bahwa Tailwind mempermudah kita membuat desain yang fleksibel, artinya kalau tiba-tiba butuh button yang sangat bulat, kita bisa menggunakan rounded-full. Bisa cek tutorialnya disini.


Keseluruhan kode akan menjadi seperti ini:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

head>

<body class="bg-gray-100 flex flex-col min-h-screen max">
    <nav class="fixed inset-x-0 top-0">
        <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
            <div class="flex justify-center">
                <p class="text-white text-lg font-bold">My Registrationp>
            div>
        div>
    nav>

    <div class="container mx-auto mt-24 flex justify-center">
        <form class="flex flex-col w-8/12 shadow-sm rounded-lg bg-white py-10 px-3">
            <div class="flex w-full justify-center ">
                <p class="text-2xl font-medium">Registrationp>
            div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name">
                        First name
                    label>
                    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="firstname" type="text"
                        placeholder="First name">
                div>
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name">
                        Last name
                    label>
                    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="lastname" type="text"
                        placeholder="Last name">
                div>
            div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Email address">
                        Email address
                    label>
                    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="email" type="emai"
                        placeholder="Email address">
                div>
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Company">
                        Company
                    label>
                    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="company" type="text"
                        placeholder="Company">
                div>
            div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Address">
                        Address
                    label>
                    <input class="border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 
            leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="address" type="text"
                        placeholder="Address">
                div>
            div>
            <div class="flex flex-col w-full mt-12 px-5">
                <div class="flex w-full">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name">
                        Date of birth
                    label>
                div>
                <div class="flex flex-row w-full justify-between">
                    <div class="flex w-4/12 flex-col pr-4">
                        <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
                            <option>Monthoption>
                        select>
                    div>
                    <div class="flex w-4/12 px-4">
                        <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
                            <option>Dayoption>
                        select>
                    div>
                    <div class="flex w-4/12 px-4">
                        <select class="border border-gray-300 bg-white rounded-full w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
                            <option>Yearoption>
                        select>
                    div>
                    <div class="flex w-auto">
                        <i class='text-5xl text-gray-400 bx bx-calendar-alt'>i>
                    div>
                div>
            div>
            <div class="flex flex-col w-full px-5 mt-20">
                <button class="bg-black py-3 text-white rounded-lg font-semibold">Registerbutton>
            div>
        form>
    div>

    <footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
        <div class="flex justify-center">
            <p class="text-white text-lg font-bold">Footerp>
        div>
    footer>


body>

html>

Sekarang bagaimana, mudah kan membuat form di Tailwind? Sebagai anak backend, membuat form yang fleksibel akan membantu kita untuk menyesuaikan design yang ada loh 😉



Belajar Positioning untuk Navbar dan Footer - Part 4
Muhamad Hudya Ramadhana — Mon, 08 Apr 2024 01:19:44 GMT

💡
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆


Overview
Sebuah website gak jauh dari navbar dan sebuah navbar gak jauh dari positioning pada CSS, kalau kita mengaca pada konsep dasar positioning CSS Layout, kita akan kenal istilah berikut:

static

relative

fixed

absolute

sticky


Nah sekarang kita akan nyobain membuat navbar pada tailwind.
Kick Off
Kita masih menggunakan kode yang digunakan pada tutorial sebelumnya:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="flex flex-wrap w-full p-3">
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
        div>
    div>
body>

html>

Sekarang kita ubah sedikit kodenya supaya kita bisa membuat sebuah navbar sederhana:
<body class="bg-gray-100">
    
    <nav class="container mx-auto w-full p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
        <div class="flex w-full justify-center mx-auto">
            <p class="text-white text-lg font-bold">My Web Appp>
        div>
    nav>

    <div class="container mx-auto p-4">

Sekarang website kamu akan kaya gini bentuknya.


Bang kok gak full sih navbar kan full

Itu kan saya pake class container ya, makanya dia nyesuain lebarnya cuma segitu, kalau kamu mau full ya hapus aja container classnya, ini kan nyontohin doang.
Jangan lupa hapus juga rounded-bl-lg dan rounded-br-lg untuk bikin bagian bawah kanan dan kiri jadi bulet gitu biar keren.

Tapi saya mah pake container aja ya, terserah kalian mau ikut apa gak.
Nah sekarang tugas kalian adalah memperbanyak konten biar bisa discroll kaya begini.

Gak perlu diajarin dong cara bikinnya gimana? Tinggal copy aja satu div dan paste terus-terusan.

Nah as simple as the docs kita bisa atur positioningnya lewat panduan ini. Sekarang kita ubah code navnya agar menjadi seperti ini:
 <nav class="fixed inset-x-0 top-0">
  <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
    <div class="flex justify-center">
      <p class="text-white text-lg font-bold">My Web Appp>
    div>
  div>
nav>


Secara umum sebuah website menggunakan navbar dalam bentuk sticky dimana navbar tersebut akan mengikuti seiring dengan pengguna saat melakukan scroll.
Apa fungsi class inset-x-0 dan top-0? Berdasarkan dokumentasi dari tailwind, kita dapat mengatur posisi sebuah komponen dengan mudah.

Class inset-x-0 berfungsi untuk mengatur jarak elemen atau komponen secara horizontal, karena kita menggunakan x. Nah karena kita pake inset-x-0, maka jarak antara kanan dan kiri menjadi 0 dan otomatis elemen ini bisa mengikuti jarak yang ditentukan pada elemen di dalamnya. Sedangkan class top-0 membuat jarak ke bagian atas menjadi 0px, artinya sangat rapat ke bagian atas.
Footer
Setelah nyobain bagaimana navbar (navigation bar) dibuat, kita perlu memikirkan bagaimana cara membuat footer. Pada dasarnya footer akan berada di bawah dan tidak akan bergerak. Kita bisa saja membuatnya dengan cara seperti ini.
<div class="container mx-auto p-4 mt-12"> 
. 
. 
. 
div>
<footer class="container mx-auto fixed inset-x-0 bottom-0 w-full z-50">
  <div class="p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
    <div class="flex justify-center">
      <p class="text-white text-lg font-bold">Footerp>
    div>
  div>
footer>

Sekarang tampilannya menjadi seperti ini.

Ada yang aneh? Tentu, karena footernya terus berada di bawah pada saat kita melakukan scroll. Tentu saja untuk sebuah aplikasi web berbasis desktop, hal ini sangat tidak masuk akal.
Tampilan di atas cocok untuk diimplementasikan untuk web yang berfokus pada tampilan mobile, sehingga kita seolah-olah membuat menu yang menempel di bawah.

Sayangnya, ini tidak cocok untuk desktop. Lalu bagaimana memperbaikinya? Ganti saja class fixed pada footer menjadi relative.

Lalu mungkin saja ada pertanyaan dari kalian, pada saat kalian mengurangi konten di dalamnya, entah kenapa footer tiba-tiba naik ke atas.

Mengapa hal ini dapat terjadi? Tentu, karena footer mengisi ruang kosong di dalamnya dan ini sangatlah wajar. Bagaimana cara mengatasinya? Sebelum saya jawab, kita pahami dulu teorinya.

Secara teori inilah yang terjadi pada web buatan kita, dapat dilihat bahwa screen yang besar hanya diisi oleh tiga konten saja. Selain itu pada element content, datanya hanya sedikit sehingga otomatis tinggi dari elemen tersebut otomatis mengikuti tinggi keseluruhan konten. Elemen footer naik karena elemen tersebut mengisi ruang kosong dikarenakan tinggi dari elemen content sangatlah pendek.
Artinya, apabila pada bagian element content hanya sedikit konten saja yang dibuat, sangat wajar apabila elemen footer tiba-tiba naik ke atas.
Bagaimana cara mengatasinya? Sederhananya, ya kita harus mengisi kontennya. Secara teori tidak mungkin kita membuat website dimana website tersebut hanya berisi sedikit konten, pasti saja elemen pada bagian content akan panjang ke bawah dan dipisahkan dengan beberapa section. Namun, sebenarnya secara teori kita bisa mengatasinya.

Pertama, kita ubah dulu body-nya agar memiliki tinggi minimal sebesar screen.
<body class="bg-gray-100 flex flex-col min-h-screen">

Class flex-col dan min-h-screen berperan penting dalam bagian ini, karena flex-col membuat susunan elemen di dalamnya menjadi berbaris secara vertikal dan min-h-screen membuat ukuran elemen di dalamnya berukuran tinggi minimal sebesar screen yang membuka halaman tersebut, sehingga elemen didalamnya dipaksa mengisi ruang kosong.
Kemudian pada bagian footer, kita perlu hilangkan positioningnya dan diberi classmt-auto. Hal ini bertujuan agar footer dapat mengikuti konten yang perlu diisi, apabila diberi positioning maka elemen akan keluar dari tempat yang seharusnya.
Class mt-auto juga berperan penting dalam membuat footer ke bagian bawah, dengan mengatur margin pada bagian atas antara footer dengan elemen div di atasnya, footer jadi dipaksa untuk mengisi ruang kosong pada bagian bawah. Hal ini menyebabkan otomatis footer akan terus berada di bawah.
<footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
  <div class="flex justify-center">
    <p class="text-white text-lg font-bold">Footerp>
  div>
footer>

Sekarang walaupun kamu mengisi banyak maupun sedikit konten, footer akan terus berada di bawah.


Berikut merupakan keseluruhan kode.
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body class="bg-gray-100 flex flex-col min-h-screen">
    <nav class="fixed inset-x-0 top-0">
        <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
            <div class="flex justify-center">
                <p class="text-white text-lg font-bold">My Web Appp>
            div>
        div>
    nav>

    <div class="container mx-auto p-4 mt-12">
        <div class="flex flex-wrap w-full p-3">
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
        div>
    div>

    <footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
        <div class="flex justify-center">
            <p class="text-white text-lg font-bold">Footerp>
        div>
    footer>


body>

html>

Jadi bagaimana? Tidak sulit kan membuat navbar maupun footer pada tailwind? 😄



Desain yang Responsif - Part 3
Muhamad Hudya Ramadhana — Wed, 13 Mar 2024 23:07:34 GMT

💡
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆


Overview
Setelah belajar flex kita akan mencoba memahami desain yang responsif di Tailwind. Kembali mengingat bahwa kalau kalian pernah membaca media queries pada CSS atau kalo pake Bootstrap kita kenal dengan istilah breakpoints.
Menggunakan tailwind kita bisa menggunakan utility yang disediakan oleh tailwind, namun secara konsep hampir sama dengan bootstrap, kok.
Kick Off
Masih menggunakan kode yang kemarin, yaitu:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="flex flex-wrap w-full p-3">
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
        div>
    div>
body>

html>

Sekarang perhatikan tampilan ketika layar dikecilkan dari layar laptop, tablet, hingga mobile screen.

Dapat kita lihat kan bahwa tampilan ketika tablet membuat komponen kita menjadi dempet, bahkan lebih dempet lagi ketika kita ubah ke mobile.
Apa solusinya yang bisa kita lakukan? Menyesuaikan tampilan dengan memberikannya class untuk beberapa keadaan layar.
Sekarang kita ubah kode untuk membuat card menjadi seperti ini:
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
  <div class="flex shadow bg-white rounded-md">
    <div class="flex flex-col p-4">
      <h1 class="text-xl font-bold"> Hello World h1>
      <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
    div>
  div>
div>

Sekarang kalau kita perhatikan, maka tampilan cardnya akan menjadi seperti ini:

Tampilan card kita berubah ketika tampilan menjadi kecil, GG bukan? Sekarang kita bedah code-nya.
Bedah Code
Perhatikan kode ini.
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">

Mengapa isi classnya adalah w-full diikuti sm:w-1/2 dan lg:w-4/12? Jawabannya adalah karena kita perlu memasang default class, diikuti dengan kondisi layar.
Berdasarkan dokumentasi tailwind, media query didefinisikan dengan class sebagai berikut:




Breakpoint prefix Minimum width CSS



sm 640px @media (min-width: 640px) { ... }

md 768px @media (min-width: 768px) { ... }

lg 1024px @media (min-width: 1024px) { ... }

xl 1280px @media (min-width: 1280px) { ... }

2xl 1536px @media (min-width: 1536px) { ... }


Kalau kalian perhatikan dengan cara klik kanan > inspect element pada browser kalian, kita bisa melihat ukuran layar default yang tersedia secara umum.

Mobile S: 320px

Mobile M: 375px

Mobile L: 425px

Tablet: 768px

Laptop: 1024px

Laptop L: 1440px


Artinya, class sm mempengaruhi layar mulai dari 640px, class md mempengaruhi layar mulai 768px, dan lg mempengaruhi layar mulai dari 1024px.
Ingat, bahwa media query akan meniban style apabila ada screen yang lebih besar efeknya, maksudnya adalah md akan meniban efek sm, dan lg akan meniban efek md dan sm.
Sekarang kembali ke classnya yang gue buat, lihat dan perhatikan bahwa class default yang gue buat ini adalah class w-full, artinya secara default kita akan menggunakan class w-full, kalau kalian coba maka secara default ketika layar kecil komponen card kita menjadi penuh layaknya baris, jadi full gitu.
Kenapa gitu? Karena mobile minimal screennya adalah 320-425px, sehingga kalau kita kasih class w-4/12 sebagai default, akan mempengaruhi screen ukuran 320-425px. That's why saya kasih default classnya adalah w-full. Karena ini efek default, sehingga membuat cardnya menjadi satu saja setiap barisnya.
Ketika screen minimal 640px kita beri class sm:w-1/2 tujuannya adalah mengubah tampilan ketika layar menjadi tablet, ingat bahwa tablet itu layar minimalnya adalah 768px sehingga efeknya akan muncul yaitu membuat card menjadi 2 card pada setiap baris.
Kemudian kita beri class lg:w-4/12 tujuannya adalah mengubah tampilan ketika layar menjadi minimal laptop 1024px karena lg adalah dimensi minimal 1024px sama persis seperti laptop. Otomatis laptop kalian yang layarnya minimal 1024px itu akan terkena efek classnya dan mengubah ukuran card menjadi 4/12 atau 1/3, jadi ada 3 card pada setiap baris.
Perbaiki Padding
Sekarang kalian sudah paham bahwa class default akan mempengaruhi semuanya, silahkan berkreasi dengan sesuka kalian agar padding pada layar dimensi minimal mobile menjadi lebih lebar. Hal ini dikarenakan kalau kita perhatikan, ketika layar menjadi mobile, padding cukup menekan cukup banyak ruang sehingga card menjadi terlihat lebih kecil.

Sekarang giliran kalian untuk mencoba dan memperbaiki masalah ini dengan class yang kalian suka. Perlu diperhatikan bahwa padding memiliki pengaruh dari ketiga div berikut:
 <div class="container mx-auto p-4">
        <div class="flex flex-wrap w-full p-3">
            <div class="p-3 w-full sm:w-1/2 lg:w-4/12">

Silahkan atur sesuka kalian, tidak ada yang benar atau salah, yang penting mau belajar! 😁



Belajar Layout dengan Flex - Part 2
Muhamad Hudya Ramadhana — Tue, 12 Mar 2024 21:00:25 GMT
Overview
Pada bagian ini kita akan coba belajar layouting menggunakan Flex pada Tailwind. Flex sendiri merupakan istilah dasar dari Flexbox pada CSS.

💡
The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning. -W3schools


Jadi sebenarnya flex ini adalah bagian dari Tailwind untuk mempermudah kita mendesain struktur dari komponen yang mana biasanya horizontal atau vertikal.

⚠
Sekali lagi saya ingatkan bahwa tutorial ini bukan untuk newbie, melainkan untuk para backend yang pernah belajar dasar CSS termasuk penggunaan column, atau bagi yang pernah belajar menggunakan Bootstrap.


Pada Bootstrap kita mengenal istilah columns dan grid. Tentu saja, karena kita dengan mudah membuat baris dan kolom dengan kode berikut.
<div class="container">
  <div class="row">
    <div class="col">
      Column
    div>
    <div class="col">
      Column
    div>
    <div class="col">
      Column
    div>
  div>
div>

Mereka juga menggunakan flexbox untuk mempermudah pembuatan baris dan kolom, namun kita akan belajar menggunakan Tailwind untuk membuatnya.
Kick Off
Daripada banyak basa-basi langsung aja sekarang cobalah kode berikut, mau pake file yang sebelumnya juga boleh~
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body>
    <div class="container mx-auto p-4 border-2 border-black">
        <div class="flex w-full">
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
        div>
    div>
body>

html>

Kalau kamu jalankan maka hasilnya akan seperti ini.

Dapat kita lihat bahwa saya membuat semacam Card pada bootstrap dengan gaya Tailwind, ini tidak akan kita bahas secara detail, saya lebih fokus membantu teman-teman untuk membicarakan layouting.
Sekarang teman-teman gandakan box div yang berisi class flex dan flex-col menjadi beberapa baris, perhatikan kode berikut:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body>
    <div class="container mx-auto p-4 border-2 border-black">
        <div class="flex w-full">
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
        div>
    div>
body>

html>

Maka hasilnya akan menjadi seperti ini:

Keren bukan? Tentu saja.
Apabila kita biasa menggunakan bootstrap, kita akan paham istilah 12 kolom. Artinya Dari kiri ke kanan ada 12 kolom, dan kita bisa pecah berdasarkan hitungan dasar matematika. Misalnya kita mau ada tiga komponen di dalamnya, berarti 12 dibagi 3, jadinya 4. Pada kode di atas saya menggunakan class w-4/12 artinya panjang dari komponen tersebut adalah 4 dari 12 atau 4 per 12.
Artinya, sama saja seperti bootstrap yang membagi tiga komponen di dalamnya dengan angka 4, kalau di bootstrap kita akan menggunakan class col-4.
Tapi ada yang janggal, coba deh kalian tambahin satu lagi class div tersebut.

Lah lah? Kita kan udah set 4/12 ya, kenapa kalo ada 4 malah ngikut kekanan? Harusnya kan kalau kita set 4/12 otomatis turun ya? Karena 4 dikali 3 kan 12.
Sekarang kita coba lagi untuk sedikit eksperimen, banyakin lagi div-nya.

Yang kamu dapat malah semuanya berbaris kaya penjual takjil ramadhan. Hal ini dikarenakan kita tidak menambahkan class flex-wrap pada div bagian atasnya.
Flex wrap digunakan untuk mengontrol jumlah item di dalamnya agar mengikuti (wrap) berdasarkan jumlah panjang lebar dari komponen tersebut.
Sekarang ubah kodenya agar menambahkan flex-wrap pada bagian atas seperti kode berikut:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body>
    <div class="container mx-auto p-4 border-2 border-black">
        <div class="flex flex-wrap w-full">
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>

            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
        div>
    div>
body>

html>


Viola, kita sudah berhasil membuatnya menyesuaikan lebar dari komponen tersebut.
Bedah Code
Sekarang saatnya kita bedah code biar kalian paham.
 <div class="flex flex-col w-4/12 shadow p-4">
   <h1 class="text-xl font-bold"> Hello World h1>
   <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
 div>

Berdasarkan kode di atas, kita menggunakan flex untuk membuat card. Nah untuk membuat card pada Tailwind, kita hanya perlu memanggil class shadow. Class shadownya pun banyak terdiri dari shadow (default), shadow-md, hingga shadow-lg . Class ini memiliki perbedaan pada hasil shadow, apabila semakin besar maka semakin besar pula shadownya, kamu bisa mengganti class shadow dengan shadow-lg apabila ingin membandingkannya. Baca docsnya disini.
Kemudian pada bagian w-4/12, seharusnya saya gak usah jelasin panjang lebar ya? Pada intinya, class w atau width sama saja seperti columns pada bootstrap. Bedanya width pada Tailwind lebih fleksibel dan tidak mempengaruhi kolom saja. Selain itu mengapa ini mempengaruhi kolom karena pada div di atas card ini kita menggunakan flex-wrap sehingga lebar dari masing-masing komponen di dalamnya ikut menyesuaikan. Baca docsnya disini.
Lalu kamu perhatikan, terdapat class flex-col pada div utama card yang dibangun. Class ini mempengaruhi bentuk isi dari komponen di dalamnya, sehingga apa yang membuat kita dapat menulis Hello World dan Lorem ipsum sir dolor amet di bawahnya adalah karena kita mengatur item di dalamnya menjadi berbentuk kolom dengan flex-col. Baca docsnya disini.
Pada bagian p-4 artinya padding 4px pada semua arah, saya rasa saya tidak perlu panjang lebar menjelaskan ini. Silahkan baca docsnya disini.
Pada bagian dalam juga saya tidak perlu jelaskan panjang lebar karena sudah kita bahas pada pertemuan sebelumnya.
Ngulik Sedikit
Justru yang akan menjadi pertanyaan adalah, bagaimana kalau misalnya kita ingin membuat sesuatu seperti ini?

Jawaban dari coret-coretannya adalah seperti ini:

Sekarang markilik, mari kita ngulik. Cobalah kode berikut:
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
head>

<body>
    <div class="container mx-auto p-4 border-2 border-black">
        <div class="flex flex-wrap w-full">
            <div class="flex flex-col w-3/12 shadow p-4 bg-red-100">
                <i class="text-4xl bx bx-desktop">i>
                <h1 class="text-md font-semibold mt-5">Machine Learningh1>
                <p class="text-sm mt-3 text-gray-600 border-b border-gray-400 pb-3">4 December - 8 Februaryp>
                <div class="flex flex-row">
                    <p class="flex text-sm mt-3 w-1/2 text-gray-500">Pricep>
                    <p class="flex text-sm font-semibold mt-3 w-1/2 justify-end">$1200p>
                div>
            div>
        div>
    div>
body>

html>

Viola, inilah hasilnya!

Disini saya menggunakan boxicon sebagai icon CDN untuk menampilkan icon desktop.
<div class="flex flex-col w-3/12 shadow p-4 bg-red-100">
  <i class="text-4xl bx bx-desktop">i>
  <h1 class="text-md font-semibold mt-5">Machine Learningh1>
  <p class="text-sm mt-3 text-gray-600 border-b border-gray-400 pb-3">4 December - 8 Februaryp>
  <div class="flex flex-row">
    <p class="flex text-sm mt-3 w-1/2 text-gray-500">Pricep>
    <p class="flex text-sm font-semibold mt-3 w-1/2 justify-end">$1200p>
  div>
div>

Inilah bentuk card yang saya buat, sebenarnya hampir tidak jauh berbeda dengan pembelajaran kita sebelumnya. Bedanya kita memberikan background pink.

Bang bang, kok lu gak pake flex w-full seperti gambar yang lu rancang?

Err, gini temen-temen secara default disini kan kita sudha pakai flex 
 . Perlu diingat bahwa flex itu bisa responsive dan menyesuaikan ruang, dikarenakan hanya ada satu tag saja kemudian kita juga menggunakan flex-col artinya setiap tag akan mengisi satu ruang penuh, kalau kalian pernah ngoding android native mobile ada istilah wrap content dan match parent, nah disini kita menggunakan match parent.
Beda halnya ketika kita ingin memecah dua kolom seperti bagian bawah untuk price, kita perlu membuat tag dengan menggunakan class flex terlebih dahulu, lalu tambahkan class flex-row agar membuat menjadi baris horizontal. Di dalamnya, beri masing-masing tag dengan class flex.

Lho lho, kok yang ini di dalamnya malah pake flex? Yang atasnya nggak? Nggak ngerti saya.

Gini ges, kita kan mau mengatur tata letak supaya harga $1200 bisa ke kanan, kita perlu menggunakan flex. Kenapa? Karena secara default kita kan membagi dua bagian di dalamnya seperti ini:

Artinya, secara default angka $1200 berada pada sisi sebelah kiri. Kalau kamu gak percaya cobain aja hapus class justify-end. Fungsi class justify-end ini adalah memojokkan konten agar berada di tepi komponen, kalau kamu mau lebih paham baca docsnya disini.
Merapihkan Sisa
Ehiya balik lagi ke kodingan yang ini tadi.
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body>
    <div class="container mx-auto p-4 border-2 border-black">
        <div class="flex flex-wrap w-full">
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>

            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
            <div class="flex flex-col w-4/12 shadow p-4">
                <h1 class="text-xl font-bold">
                    Hello World
                h1>
                <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
            div>
        div>
    div>
body>

html>

Ini kan berantakan ya? Dalam artian, mepet-mepet semua ges. Yaudah yuk kita perbaiki, kita mainin dunia per-paddingan pada komponennya.
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="flex flex-wrap w-full p-3">
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
            <div class="p-3 w-4/12">
                <div class="flex shadow bg-white rounded-md">
                    <div class="flex flex-col p-4">
                        <h1 class="text-xl font-bold">
                            Hello World
                        h1>
                        <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
                    div>
                div>
            div>
        div>
    div>
body>

html>

Apa yang saya lakukan? Yes, perhatikan bagian ini:
<div class="p-3 w-4/12">
...
div>

Saya melakukan membungkus card yang kita gunakan dengan padding, jadi yang awalnya seperti ini.
<div class="flex flex-col w-4/12 shadow p-4">
  <h1 class="text-xl font-bold"> Hello World h1>
  <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
div>

Menjadi seperti ini.
<div class="p-3 w-4/12">
  <div class="flex shadow bg-white rounded-md">
    <div class="flex flex-col p-4">
      <h1 class="text-xl font-bold"> Hello World h1>
      <p class="text-md mt-2">Lorem ipsum sir dolor ametp>
    div>
  div>
div>


Kita bungkus isi card di dalam sebuah padding, tujuannya adalah agar menekan konten card agar masuk ke dalam. Sehingga kita dapat menjaga jarak antara satu komponen dengan komponen yang lain.

So, alih-alih kita berikan margin antar card, kenapa kita tidak tekan card ke dalam dengan padding?

Pada akhirnya, sama saja kok hasilnya, menurut saya lebih smooth dan tentunya tidak meribetkan kalian sebagai backend developer, ini yang paling penting 😀

💡
Mungkin ada cara lain yang lebih smooth, tapi saya pribadi sebagai backend developer lebih cocok cara ini.



Hello, Tailwind - Part 1
Muhamad Hudya Ramadhana — Mon, 11 Mar 2024 22:29:07 GMT

⚠
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆


Overview
Untuk memulai hari ini sambil menunggu imsak, saya memutuskan untuk menulis series ini, Tailwind for Backend Devs. Harapannya adalah anak Backend gak lagi takut sama CSS serta bisa paham hal-hal dasar di Tailwind. Mengingat ada banyak sekali hal yang ada di tailwind nampaknya gak semua juga diperlukan oleh backend, namun tetap saja ada hal-hal yang bisa kita baca pada dokumentasi tailwind itu sendiri.
Kita akan memulai dari hal dasar, kenapa tailwind? Sebenarnya, untuk anak backend Bootstrap itu sudah sangat cukup. Hal ini karena Bootstrap merupakan Framework CSS berbasis UI Component dimana untuk membangun sebuah card saja kita cukup memanggil kode seperti ini:
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

So simple bukan? Masalahnya adalah, tidak semua hal akan baik diselesaikan dengan bootstrap.

Kok gitu bang? Kenapa emangnya sama bootstrap?

Bootstrap merupakan Framework UI Components, artinya semua component memang sudah disediakan secara default. Namun, untuk hal-hal yang sifatnya customizeable atau mau di-desain sendiri Bootstrap ini sangat tidak ramah, artinya kita harus melakukan kode terhadap CSS Vanilla atau Plain CSS.
Eww, who wants to code in CSS Vanilla? Only nerd Frontend will do that 😝 (just kiddin). Anyway ini contoh customizeable desain.

Nah desain seperti ini paling enak dan lebih mudah dilakukan dengan Tailwind bukan dengan Bootstrap. Kenapa? Karena simplenya Bootstrap itu Framework UI Components sedangkan Tailwind itu Library CSS. Artinya, Tailwind adalah bunch of CSS Classes yang bisa digunakan oleh Backend Developer untuk membuat tampilan seperti gambar di atas.
Lagian, ngapain sih backend developer mau bikin tampilan kaya gini? Ya emangnya semua backend developer pasti ngoding API doang? Ada momen backend developer yang tetiba ngerangkap jadi Web Developer, artinya mereka juga harus melakukan slicing template, buatin view, dan coding tampilan HTML.
Imagine kalo backend developer dipaksa untuk ngoding Vanilla CSS?

Bisa, tapi mati.

Kickstart Tailwind
Okelah daripada basa-basi kita langsung mulai aja, btw biar kalian gak bingung ada dua versi yang harus dipahami. Jadi tailwind itu ada versi 2 dan versi 3, bedanya apa?

Ya simplenya di penamaan class librarynya antara versi 2 dan 3 beda, jelas di versi 3 ada penambahan-penambahan misalnya dari warna.

Versi 3 harus di-compile, artinya kita harus pakai NPM.

Versi 2 ada versi CDN, versi 3 tidak ada, artinya kita gak bisa pakai secara online.


Nah ingat, kita disini mau ngapain? Yes, belajar. Apabila mau belajar maka jangan pakai yang ribet dulu, so udah tau jawabannya kita pakai versi berapa?
Ya versi 2 lah! 😂
Pada tutorial series ini, kita akan menggunakan versi CDN yaitu 2.2.19. Sekarang pergilah ke environment kesenangan kalian, mau codepen dan sejenisnya terserah kalian. Kalau saya cukup pakai my lovely VS Code. Buat file index.html lalu masukkan kode di bawah.
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwindtitle>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold text-center">Hello, Tailwind!h1>
        <p class="text-lg text-center mt-4">This is a simple boilerplate with Tailwind CSS CDN.p>
    div>
body>
html>

Apabila kalian buka dengan browser kalian melalui file index.html atau kalian show preview pada VSCode, hasilnya akan kurang lebih seperti ini.

Sangat simple sekali ya nggak?

💡
Untuk menggunakan live preview dengan VSCode, klik kanan pada file lalu klik show preview, copy URLnya ke browser dan tampilkan pada layar secara full.


Sekarang kita bedah dulu code dasarnya.
Bedah Code
Pada bagian body, kita menggunakan class bg-gray-100, artinya kita mengganti background tailwind dengan gray dengan tingkat ketebalan 100 (semakin tinggi semakin gelap). Kerennya tailwind adalah semua class sangat human readable, artinya kita aja bisa menggunakan akal kita bahwa bg artinya background, bukan bang, "misi bg sy mw lewat", nggak gini. Kalian bisa ganti warna-warna dengan melihat bagian ini.
Kemudian, kita menggunakan container. Saya rasa bagi yang pernah menggunakan bootstrap, pasti gak asing dengan istilah container. Ya, kalau di bootstrap, class container otomatis membuat layout menjadi ke tengah, tapi beda dengan tailwind. Pada tailwind, container tidak otomatis membuat konten ke bagian tengah, namun container digunakan untuk membuat wadah (container) yang memiliki padding yang responsif terhadap ukuran layar. Inilah bedanya antara bootstrap dengan tailwind.
Tailwind cenderung lebih ribet karena kita bisa freestyle, artinya kita bisa menyesuaikan kebutuhan kita, kalau bootstrap karena UI Components maka sudah otomatis mengikuti bawaan framework.
Apa yang membuatnya ke tengah? Jawabannya class mx-auto. Kamu bisa merubah kodenya sedikit menjadi seperti ini:
<div class="container p-4 border-2 border-black">


💡
Class border-2 border-black adalah class yang dapat memberikan kamu penglihatan layout secara jelas, kamu dapat menghapusnya setelah tidak digunakan, ini hanya trik saja biar keliatan lebih jelas.


Kalau kamu hilangkan mx-auto sekarang akan menjadi seperti ini:

Artinya class mx-auto sangat berperan penting untuk membuat objek ke tengah. So, kalo kalian lupa gimana cara nengahin objek, inget aja kata kuncinya auto.
Kemudian p-4 artinya padding, saya rasa saya tidak perlu jelasin lagi ya?
<h1 class="text-3xl font-bold text-center">Hello, Tailwind!h1>
<p class="text-lg text-center mt-4">This is a simple boilerplate with Tailwind CSS CDN.p>

Terakhir, kita bahas text. Uniknya pada tailwind tidak begitu mengenal istilah tag text, artinya kamu bahkan bisa menggunakan tag paragraph dengan style yang diatur dan tetap mendapatkan hasil yang sama besarnya seperti h1. Kalau kamu membaca docsnya, kita dapat dengan mudah merubah style tag paragraph atau apapun dengan ukuran yang kita mau, jadi mau h1, h2, h3, atau p sekalipun, gak ngaruh ya ges.
Kemudian kita bisa mengatur font align dengan mudah, baca docsnya disini. Pada kode di atas kita menggunakan text-center, sangat ramah dipahami, bukan? Even kalian gak buka docsnya, kita pasti sama-sama sepakat bahwa fungsi class ini pasti untuk membuat posisi teksnya menjadi ke tengah 😀.
Terakhir mt-4, mt artinya margin top harusnya saya juga gak usah jelasin lagi ya kenapa dikasih margin, cobain aja sendiri dihapus.
Sekian untuk part-1, kalau ramai lanjut part-2 ya ges.



Empat Hal untuk Improve Proses Grinding
Muhamad Hudya Ramadhana — Sat, 02 Mar 2024 05:51:28 GMT
Ketika ngomongin grinding, kita gak terbatas untuk ngomongin olahraga aja, tapi juga kemampuan belajar, karena olahraga dan belajar adalah kegiatan yang bersifat grinding, artinya perlu dilakukan secara terus menerus (rutin).
Setelah saya belajar sejak 2015 dan aktif grinding sampai detik ini, kemudian di tahun 2023 saya aktif grinding untuk olahraga, akhirnya selain menemukan kesamaan bahwa keduanya merupakan aktivitas grinding, saya akhirnya memahami tiga hal yang bisa improve proses grinding saya menjadi lebih cepat.
Banyak orang yang tahu tiga hal ini, tapi sayangnya mereka gak paham. Mengapa orang-orang saya anggap tahu tapi gak paham? Karena dasar kata memahami artinya adalah pandai dan mengerti benar (suatu hal) sedangkan tahu ya hanya mengetahui.
Memiliki Prinsip
Ketika kita mengerjakan proses grinding, kita harus memiliki prinsip yang kuat. Misalnya adalah ketika saya belajar coding, prinsip saya adalah saya harus belajar setiap hari dan itu yang saya pegang. Artinya saya punya tujuan yang akan saya kejar, yaitu belajar setiap hari.
Prinsip setiap orang tidak harus sama, karena setiap orang memiliki karakter dan gaya masing-masing, kalau prinsipmu adalah "belajar hanya di weekend saja" tidak mengapa, selama kamu sanggup kenapa tidak?
Tidak semua orang mampu belajar setiap hari dan tidak semua orang juga mampu belajar hanya di weekend saja, bisa jadi weekend dia pakai untuk bercengkrama bersama keluarga besar, jadi terkait prinsip sebenarnya tidak perlu didebatkan, carilah prinsip yang sesuai dan tetap memiliki nilai yang positif.
Apakah prinsip bisa berubah di tengah jalan? Tentu saja dan menurut saya itu tidak salah. Pada saat pertama kali saya memutuskan olahraga, saya hanya ingin menurunkan berat badan, saya benci sekali diri saya yang 91 kg dengan fat 31 kg. Seiring berjalannya waktu sekitar 4-6 bulan, saya mulai menyukai diri saya. Kemudian prinsip saya berubah menjadi, saya ingin membuat olahraga menjadi hal yang wajib di hidup saya.
Sekarang saya sudah berada pada bulan ke-9, prinsip saya berubah setelah saya berhasil di titik 83 kg berat badan dan fat 23 kg. Apa prinsip saya saat ini? Saya ingin menjadi kuat dengan kalistenik, saya ingin mengangkat tubuh saya lebih fleksibel dengan gerakan-gerakan estetik para atlit kalistenik. Saya tidak peduli lagi dengan bentuk tubuh saya mau besar atau kecil, saya hanya ingin mengangkat tubuh saya dengan mudahnya. Mengangkat tubuh membutuhkan strength yang tinggi, artinya secara gak langsung saya perlu menaikkan strength saya untuk mencapai tujuan dan prinsip saya.
Tanpa prinsip alias tujuan, kita gak terarah, dan kita harus memegang teguh prinsip tersebut agar dapat memiliki arah yang lebih jelas.
Tidak Mencatat
Catatan itu hal yang sangat basic di dalam aktivitas grinding, apa yang kita lakukan saat kecil itu sebenarnya sangat baik, misalnya mencatat aktivitas belajar kita dengan menulis kembali rumus yang kita pelajari.
Selain akan membuat kita mengingat kembali yang akan menaikkan kemampuan otak untuk menghafal, kita juga membuat habbit yang baik dimana ketika kita lupa, kita dapat membuka kembali catatan tersebut.
Ini yang hilang ketika kita dewasa, kita tidak mau mencatat dengan baik. Kita berpikir catatan yang baik itu hanya untuk ketika kita ingin membagikan. Padahal sejatinya, catatan yang baik itu akan dibagikan kembali kepada diri kita sendiri. Kalau kita saja tidak dapat memahami apa yang kita tulis, bagaimana nantinya kita akan membaca catatan tersebut?
Tidak sedikit orang yang belajar mau menulis dan mencatat, padahal se-sederhana mencatat step-by-step saja sudah termasuk mencatat. Misalnya kamu membuat catatan seperti ini:
x = 20
y = 10


"""
Kita assign nilai y pada variabel sementara yang disebut _tmp
"""
_tmp = y 

"""
Kita assign nilai y menjadi nilai x, sekarang nilai y menjadi 20
"""
y = x 

"""
Kita assign nilai x dengan nilai _tmp
dimana nilai _tmp adalah 10. 

Kalau kita pakai x = y nanti jadinya y adalah 20, 
karena y kan sudah diubah.
"""
x = _tmp

As simple as that aja belum tentu orang mau menulisnya, padahal tulisan ini mampu membuat kita memahami konteks menjadi lebih mudah.
Ketika kamu grinding pada olahraga, kamu mencatat apa saja yang kamu lakukan hari ini, misalnya kamu push up berapa reps dan set, apa saja makanan yang kamu makan pada hari itu. Catatan tersebut akan membantu kamu untuk memaksa dirimu melakukan progressive overload yang akan kita bahas pada bagian selanjutnya.

💡
Catatan akan membantu kamu mengontrol flow agar kamu tidak miss dalam grinding, kalau kamu tidak mampu mengingat, maka catatlah.


Progressive Overload
Istilah ini mungkin lebih akrab dengan orang yang sudah biasa workout, tapi saya bantu agar kamu lebih mudah memahaminya.

💡
Progressive overload adalah proses dimana kita memaksa diri sendiri untuk menaikkan limit satu level di atas biasanya. Misalnya, biasanya push up hanya mampu sebanyak 10 repetisi menjadi 11-12 repetisi.


Kalau progressive overload ini adalah tentang olahraga, ini pasti keliatan banget, karena kita bisa merasakan level yang lebih tinggi dari biasanya.
Misalnya saya biasanya pull up full body hanya mampu sebanyak 3 repetisi sempurna, namun pada hari kemarin (Jumat, 1 Maret 2024) saya mampu sebanyak 4 repetisi sempurna ditambah 1 repetisi setengah sempurna, artinya saya memaksa diri saya untuk naik 2 tingkat dari biasanya.
Apakah kita sebenarnya sadar bahwa kita sedang progressive overload pada saat belajar? Tentu, pada saat kita menaikkan level pembelajaran kita. Misalnya, kamu hari ini belajar tentang variabel, kemudian esok hari kamu belajar tentang looping. Looping sudah pasti pake variabel, tapi studi kasusnya berbeda.
Artinya apa? Kamu sebenarnya selama ini sudah progressive overload, yang biasanya belajar cuma sekian, kamu naik level dengan memaksa, tapi kamu gak pernah sadar!
Apakah artinya kamu harus selalu progressive overload? YES!
Kita harus selalu menaikkan level belajar kita, misalnya kita belajar tentang array hari ini, besok cobalah belajar studi kasus misalnya menghilangkan satu data yang sama pada array, besoknya coba lagi belajar tentang struktur data yang memanfaatkan array, misalnya queue, stack.
Kalian gak pernah paham istilah progressive overload, tapi selama ini ketika kalian terus improve dan memaksa diri sendiri, itu namanya kalian lagi progressive overload! Kalian biasanya cuma belajar 1-2 kali seminggu, kalian naikin jadi 2-3 kali seminggu, that's progressive overload!

💡
You should be proud of your progress, every progressive overload will makes you better day by day.


Support

Ketika kita berproses penting sekali untuk memiliki support. Siapapun bisa jadi support, keluarga, teman, bahkan pasangan. Keberadaan support ini akan menjadi penting karena kita perlu validasi, bahkan memuaskan hasrat dan ego untuk menyatakan bahwa kita berhasil naik level. Ada cerita yang menarik tentang ini dari saya.
Pada akhir januari 2024, saya hanya berhasil satu kali pull up full body. Pada minggu pertama dan kedua februari 2024 saya berhasil dua kali pull up full body, kemudian saya join komunitas kalistenik bernama Gravgear - Yellow Dude karena saya membeli e-book kalistenik yang mereka buat di Telegram.
Pada 18 Februari 2024 saat pertama kali saya bertanya mengapa saya hanya mampu dua repetisi saja dan apakah yang harus saya lakukan? Apakah saya harus melakukan gerakan dead hang lebih banyak? Ada satu orang anonim (tanpa profil yang jelas) menjawab bahwa kemungkinan otot saya belum begitu kuat, saya harus latihan lebih banyak dan cobalah menggunakan resistance band setelah melakukan dua repetisi tersebut, kata anonim ini.



Akhirnya setelah mendapatkan support berupa jawaban dari orang lain, saya coba untuk berlatih seperti biasanya dengan intensitas yang lebih berat dari week sebelumnya.
Tau apa yang menarik dari ini? Bagian ini:
"I want to know the result"
Ini men-trigger kepala saya bahwa saya harus bekerja lebih keras lagi, saya ingin ada yang memvalidasi teori yang disampaikan olehnya bahwa saya bisa lebih baik lagi.
Apakah salah melakukan validasi? Bagi saya sebagai manusia, tidak salah karena manusia butuh pengakuan, tapi yang bermasalah adalah ketika kita selalu butuh pengakuan. Pada konteks ini, saya sangat ingin diakui dalam konteks yang positif bahwa saya memiliki perkembangan yang baik.
Akhirnya satu minggu berlalu.....
Lalu pada tanggal 23 Februari 2024 ini yang terjadi:


Yep, setelah mendapat support saya memaksa diri saya untuk naik ke level selanjutnya, yaitu memaksa diri sendiri untuk mendapat 3 repetisi pull up full body tanpa resistance band, dan hasilnya... berhasil.
Menariknya adalah ketika saya bilang "I guess I have to force myself and set a mindset that I could do 1 more, that's what makes me capable to do one pull up more after 2" jawaban dari anonim ini adalah "mate, this is what i want to read".
Betapa pentingnya mindset kita untuk memaksa diri kita jadi lebih baik lagi, betapa pentingnya diri sendiri untuk memaksa naik level. Kalian yang baca ini sadar gak sebenernya dari cerita di atas maksud saya itu apa?
Support yang kalian butuhkan adalah diri kalian sendiri.
Keluarga kalian support, that's good, sangat baik sekali memiliki keluarga yang mensupport diri kita menjadi lebih baik. Teman kalian support, that's fine, punya circle yang mendukung kita melakukan hal positif itu luar biasa, pertahankan mereka. Pasangan kalian support, you got a gift! Pasangan emang orang pertama yang harus support dalam hal positif, kalau kalian taken dan punya pasangan yang supportif, sangat indah sekali hidup ini.
Dari semua bagian yang harus mensupport, kita lupa bahwa seseorang yang paling dekat dengan kita untuk mensupport adalah diri kita sendiri. Kita sibuk mencari support dari orang lain, dari ayah, ibu, sodara, teman, bahkan pasangan, namun kita lupa fans berat kita adalah diri kita sendiri. Kita bisa minta support pada siapapun, fans kita, pasangan, orang di luar sana, anonim, mereka akan memberikan itu, tapi apalah arti dukungan itu semua?
Diri sendirilah yang ingin kita jadi lebih baik, kenapa kamu sibuk mencari validasi dari fans jauh sedangkan dirimu sendiri adalah fans beratmu? Kamu adalah orang pertama yang bangga akan pencapaian belajarmu, pencapaian workoutmu, dan pencapaian lainnya, bukan pasanganmu, bukan keluargamu, tapi dirimu sendiri.
Kenapa kamu lupa minta support sama diri sendiri? Dia yang berada pada tubuhmu setiap hari selalu mengikutimu kemana-mana, tapi kamu malah meminta orang lain untuk mensupportmu.
Belajarlah untuk mendukung dan mendorong diri sendiri, itu tidak gila bicara dengan diri sendiri namun melainkan hal yang sangat normal untuk mendorong diri sendiri menjadi lebih baik.
Lanjutan cerita di atas, tanggal 1 Maret 2024 saya berhasil mencapai progressive overload.


Saya jujur, happy banget bacanya, ada orang yang mau dengerin curhatan saya, jujur saya sedikit terharu ngeliat dia balas bahwa dia gak akan bosen denger cerita saya. Saya ngerasa dapet support yang akan mendukung saya terus selain keluarga saya, tapi tetep saya seneng banget bahwa saya bisa mendukung diri saya sendiri untuk terus maju.
Sebagai pengajar, saya juga happy ngeliat mahasiswa saya atau siapapun yang pernah curhat / mentoring dateng ke saya terus mereka bilang:

"Pak kemarin saya belajar coding dengan cara baca blog medium bapak, terus saya belajar eh bisa pak, makasih ya"

"Pak kemarin saya nyoba teknologi ini, keren ya, saya baru nyoba dikit sih pak"

"Pak makasih ya kemarin sarannya, saya udah cobain dan saya ada peningkatan, walau gak banyak sih pak"


Hal sesederhana ini bikin saya terharu, saya seneng bahwa saya bisa kasih impact positif walau tidak banyak, minimal ke lingkungan terdekat saya.

Ingatlah pesan dari si anonim ini:

💡
When you have discipline, consistency, and dedication, whatever will change. It is what human are capable of.


So, ketika kalian punya kedisiplinan, konsistensi, dan dedikasi, sebodoh apapun kalian anggap diri kalian pada bidang coding, selemah apapun kalian untuk workout, segendut apapun kalian memulai diet, pasti kalian akan mampu berubah meskipun hanya 1% saja karena sejatinya manusia itu mampu merubah sesuatu.
Sebagai bonus, saya kasih wallpaper yang jadi motivasi quotes bagi saya.

Menderita itu resiko
Sakit itu sementara
Progress itu nyata
Sabar itu harus
Berhenti itu pecundang
Selamat berjuang untuk kita semua!



Belajar = Grinding = Workout ✅
Muhamad Hudya Ramadhana — Sun, 25 Feb 2024 15:35:43 GMT
Ketika gue nulis judul ini, mungkin saja gue terkesan si paling workout, si paling gym, si paling belajar, atau lainnya, tapi jujur aja gak peduli sih, gue cuma mau bilang kita harus sadar bahwa belajar itu sama dengan grinding dan grinding itu sama aja kaya workout.
Disini gue akan bercerita tentang gue sendiri yang akhirnya memahami bahwa belajar itu sama aja kaya workout, dan keduanya adalah aktivitas grinding. Artinya, kalau kita ngomongin grinding dalam game itu merujuk pada aktivitas berulang-ulang untuk mendapatkan exp, gold, atau item-item tertentu. Aktivitas ini seringkali dilakukan untuk naikin level char, ngebuka skill, atau dapetin item/achievement di game itu sendiri.
Membangun Produk Sendiri
Gue awal-awal kuliah, pada tahun 2015 itu jujur aja gak punya semangat ngulik yang tinggi, sama seperti anak pada umumnya gue itu suka banget main game dan nongkrong, tapi di sisi lain gue pas semester dua kepikiran, ini kalo gue gagal gimana ya, kalo gue gak berhasil sebelum waktunya gimana. Semenjak semester dua gue mulai lebih banyak luangin waktu buat belajar, pada masa periode ini pula gue ikutin projek-projek dari dosen gue. Tentu nilainya tidak banyak, tapi cukup sebagai mahasiswa. Hitung-hitung namanya kita baru belajar, terima aja apa yang ada ye nggak. Puncak pembelajaran gue makin tinggi adalah ketika semester lima, gue memutuskan untuk bikin produk gue sendiri, yaitu Tell, sosial media anonim yang bisa digunakan orang-orang untuk ngeposting apapun yang mereka mau secara anonim (100% tanpa profil).
Semakin pembuatan projek ini berjalan lancar, user-user meningkat, user gue sampai 15 ribu dengan total chat yang terkirim pada pertengahan 2020 itu sekitar 20 juta chat. Imagine anak semester 6 megang data sampai 20 juta chat. Nggak kebayang kan? Di balik semua ini, ada gue pontang-panting hampir tiap malem begadang untuk nulis kode dan belajar bagaimana caranya membuat aplikasi yang lebih baik dan tidak lemot.
Gue belajar ilmu database, termasuk in-memory database, indexing, query yang lebih baik, dan hal lainnya, termasuk server itu sendiri dari instalasi awal, ngepointing server privat ke server lainnya, sampe pada akhirnya gue paham banyak hal yang mungkin anak se-usia gue (kala itu gue 21-22 tahun) belom tentu ngerti.
Perlu diketahui pada waktu itu gak banyak influencer tech atau bahkan orang yang berkenan nulis tentang artikel teknologi, kebanyakan dari mereka hanya nulis tutorial dasar. Gue harus cari dan baca-baca di stackoverflow terkait performa dan sebagainya, sekarang sih jujur aja enak ada AI, meskipun jawabannya gak 100% akurat, tapi paling nggak membantu lo memahami scope-scope kecil.
Perlu dicatat, bahwa gue bahkan sering melongo jam 1 pagi ke langit-langit kamar, sebenernya gue ngapain sih? Apa sih yang gue kejar? Kenapa gue begini banget?
Pada akhirnya, jawaban-jawaban itu terjawab ketika gue 23-24, gue banyak belajar hal baru yang bisa improve app gue, bahkan ngebuat appnya lebih stabil. Termasuk menggunakan server dedicated, memanfaatkan index lebih baik, memindahkan data sampah, dll.
At the end, ini nggak dikejar sehari semalam, butuh bermalam-malam menangis karena gak tau harus nanya siapa, nyari-nyari jawaban orang di stackoverflow berdasarkan pengalaman orang.
Sekarang, gue gak mau buat orang lain menangis kaya gue, adanya blog ini akan ngebantu orang-orang memahami konteks lanjutan tentang backend, tentunya gratis. Walaupun ada materi yang gue akan buat premium ya tipis-tipis freemium lah, biar gue tetep semangat ngonten hehehe.
Apa hubungannya sama workout?
Mei 2023 adalah momen gue jatuh ke palung paling dalam, menyadari betapa lemahnya gue. Bahkan menurut gue, 2023 adalah tahun terburuk karena gue lemah, dan malas. Dimulai dari berat badan gue yang akhirnya menyentuh 91 kg dan gue suka diledekin kim jong unch, gue mulai ngerasa nggak nyaman dengan berbagai hal, termasuk kaos-kaos yang mulai sempit, celana yang udah pasti gak bisa kepake lagi sehingga harus order nomor 38 (LO BAYANGIN ANJRIT 38????). Ditambah gue mulai ngerasa sakit-sakitan selama Januari - Mei 2023, dan sakit tersering gue adalah enter wind, alias masuk angin. Ya, selemah itu gue kalo gak pake jaket dikit langsung auto masuk angin. Otomatis kalo masuk angin apa? Ya, mager, gak mau ngapa-ngapain, tiduran doang, belajar apalagi. Olahraga aja males, sakit juga iya, masa iya masih mau belajar?
Akhirnya gue memutuskan berubah, bukan buat cewe yang gue suka, bukan buat orang tua gue, bukan buat sahabat gue, atau bahkan celana gue yang gak muat itu, tapi buat gue sendiri.
Datangnya sahabat gue dari kecil untuk main, ngajakin gue ke gym dan tanpa panjang lebar gue memutuskan untuk join member gym. Mungkin bagi orang lain, mahal, dan sejujurnya iya juga buat gue, tapi kalo kita cuma ngomongin mahal dan murah, ya at the end kita gak making changes kan?
Dengan biaya 4,5 juta, gue memutuskan ambil dua tahun member gym di Absolute Fit Kebayoran Lama, Jakarta. Sebuah keputusan yang berat dimana gue harus nebok tabungan, tapi gapapa, gue yakin dengan gue yang lebih fit gue pasti bisa jadi lebih baik.
Apakah gue pake PT? Oh tentu, you nggak bisa menjadi lebih baik tanpa expert yang membantu, otomatis gue harus rogoh kocek lebih dalam, sekitar 8-9 jutaan untuk 50 sesi bersama coach professional.
Lalu bagaimana perjalanan gue? Penuh darah.
Latihan bersama coach 3x seminggu, kadang pulang abis ngantor, jam 20.00 WIB atau 21.00 WIB di Gym, latihan satu jam bersama coach. Kalau lagi gak sama coach, tetep dateng ke gym latihan sendiri satu-dua jam.
Apa yang memotivasi gue? Jujur aja, enggak ada.
Gue kehilangan motivasi setelah 3 bulan nge-gym, kenapa? Karena ini udah jadi habbit buat gue, akibat gue selalu maksa untuk dateng ke gym hampir di setiap malam abis ngantor. Diikuti dengan diet yang gak menyiksa, gue gak berhenti makan, gue tetep makan tapi membatasi jumlah dan menggantinya. Misalnya yang pagi sarapan, jadi cuma makan dada ayam 100gr, siangnya makan nasi dua centong, sayur, dan dengan dada ayam, malamnya hanya makan dada ayam 100gr. So gue nggak membatasi dalam artian ekstrim, tapi mengganti menunya, dan ini yang paling efektif.
Gue udah gak peduli lagi apakah gue mood atau nggak mood, gue hanya perlu melakukan hal yang gue udah disiplinkan dan inilah alasan kenapa gue nulis ini. Supaya ngasitau disiplin itu penting, dan emang susah. Karena kalau gak susah, semua orang udah pasti jadi lebih luar biasa. Kesusahan adalah costnya, dan lu harus bayar mahal.

💡
Apakah semua orang butuh PT? Nggak juga, kalau nggak ada duitnya nggak usah dipaksain! Kalau punya member gym tapi gak ada PT, bisa join ke orang-orang yang badannya udah pada gede dan minta ajarin. Mereka pasti senang hati ngebantu. Ngga punya uang untuk member Gym? Tenang, ada kalistenik dan Suspension trainer aka TRX, nanti akan gue bahas lain waktu!


Puasa Dopamin adalah Kunci

💡
Dopamin adalah zat kimia neurotransmitter yang berperan penting dalam mengatur motivasi, fokus, dan konsentrasi. Dopamin juga terlibat dalam proses pembelajaran dan pengambilan keputusan.


Gue memutuskan untuk melakukan puasa dopamin, dimana puasa ini artinya memutuskan hal yang sifatnya kesenangan. Misalnya main game.
Tau gimana cara gue puasa dopamin? Adalah dengan hanya membuka Mobile Legends satu kali dalam seminggu. Jadi gue push rank hanya di hari sabtu atau minggu aja, dan itu gue batesin, dari abis dzuhur sampai maghrib aja. Kenapa gitu? karena gue udah set schedule activity abis maghrib gue harus melakukan yang lain.
Efeknya apa? Gue gak sakau (sakit karena engkau). Nggak harus ngebuka ML tiap saat dan cenderung malah jadi ngerasa "oh gue harus ngelakuin ini nih, itu nih".
Di saat temen-temen gue udah mythic gue mah biasa aja, karena gue tau gue jago main mobil lejen (soms bgt gila 😎), dan yang bisa mengalahkan gue hanya dark sistem muntun alias anggota tim yang gaje.
Nah puasa dopamin ini bener-bener ngebantu gue untuk fokus banget, misalnya di saat temen gue yang lain balik ngantor push rank jam 20.00 / 21.00 WIB, gue lagi di gym jam segitu untuk grinding exp gue dalam mengangkat beban.
Orang yang terbiasa puasa dopamin, pada akhirnya lebih mudah melakukan pekerjaan yang lebih berat dan butuh fokus misalnya belajar dan workout. Kenapa? Karena level kesenangannya udah diatur pada batas yang lebih rendah.
Sayangnya, gue suka lihat mahasiswa gue tidak pada mau untuk melakukan puasa dopamin. Padahal puasa dopamin ini malah ngebantu diri kita jadi lebih baik.
Akhirnya....
Dalam 8 bulan gue turun dari 91 kg dengan fat 31-32 kg sekarang jadi 83 kg dengan fat 23 kg. Sekarang gue juga berhasil ngebuat tubuh gue lebih resistance terhadap enter wind, gue berani tanpa jaket motoran, dan nggak kenapa-kenapa.
Ada momen gue juga kecapean gak enak badan, tapi gue ngerasa badan gue fine-fine aja, gue bisa merasakan itu (gue gak bisa jelasin tapi lu pasti paham rasanya) tapi gue ngerasa bisa gerakin badan kaya biasa, gak lemes. Bahkan di momen itu gue masih bisa ngelakuin chest day aka push up. Sebaik itu pada akhirnya gue bisa merubah tubuh dari shaping hingga resistance tubuh gue sendiri, termasuk strength hingga cardiovascular gue juga pasti lebih baik dari gue yang tahun lalu.

Pada akhirnya, gue paham bahwa belajar itu sama aja kaya workout, selama gue workout di Gym gue selalu punya mindset yang sama ketika gue belajar yaitu: gue pasti bisa nih, kalaupun gak bisa, gue pasti ada peningkatan walau cuma 1%.
Gue jujur aja kesel sama orang yang suka bercanda: Itumah cuma mindset, itumah cuma manset.
Lo pasti belom ngerasain titik yang lo bisa level up itu karena kata-kata di kepala lo, contoh paling sederhana, Januari 2024 minggu pertama, gue cuma bisa pull up di gym pake resistance band yang nahan sampai 45kg. Januari akhir 2024 minggu terakhir, gue akhirnya bisa satu kali doang pull up full body tanpa resistance band. Februari 2024 minggu pertama gue bisa dua kali, dan Februari 2024 minggu terakhir gue akhirnya bisa pull up full body tanpa resistance band sebanyak tiga kali.
Apa yang ada di kepala gue sebelum nyoba adalah: gue harusnya bisa nih, kalo gak bisa juga gapapa, tapi gue harus coba, do or die. Bahkan apa yang membuat gue bisa tiga kali itu karena gue ngomong pas selesai repetisi yang kedua dalam hati "WOI COBAIN BISA KALI NIH TIGA KALI, AYO ANGKATTTTT".
Tolong lah, jangan remehin kekuatan mindset, ini beneran ngebantu banget ketika lo lagi berusaha ngelakuin sesuatu. Gue tau jokes mindset ini buat para motivator-motivator yang banyak omong, tapi tolong jangan dijadiin remehan buat diri sendiri, karena ada momen yang memang lu harus punya mindset dan mental baja untuk jadi lebih baik.
Makanya gue bilang, gue kesel banget kalo ada yang suka bercanda "itumah cuma mindset, itumah manset". Gue cuma berharap orang-orang yang suka bercandain ini pada akhirnya paham, bahwa emang mindset yang positif bisa ngebawa perubahan, tentunya dengan habbit yang baik.
Terakhir, gue pengen elo yang baca ini memahami betul bahwa, lo gak bisa membuat perubahan dalam beberapa minggu, bahkan genap gue nulis ini aja, gue baru 9 bulan nge-gym dan workout. Sekarang gue ada di fase yang mulai lebih banyak workout kalistenik dan gue happy ngelakuinnya walau gue lagi berdarah-darah karena tubuh gue belom sekuat itu, sekarang juga gue jadi lebih fokus ngerjain sesuatu dan gak sakau kalau gak buka mobile legends, kaya biasa aja cuy.
Inget, motivator yang sampah itu emang nyebelin ngomongin mindset, tapi lo harus punya mindset yang positif bahwa lo bisa surpassing your limit setiap hari. Tentunya, lo pasti gak mau jadi pecundang kan? Maka, belajar-lah dan olahraga-lah, kedua hal ini tidak berkaitan secara langsung, tapi ngebantu lo level up jadi lebih baik.
Terakhir, lo gak perlu compare sama siapapun, orang yang perlu lo kalahkan adalah diri lo sendiri. Lo gak perlu menang dari sahabat lo, lo gak perlu menang dari chris bum, david laid, chris heria, atau eryc ortiz. Lo hanya perlu menang dari diri lo sendiri di masa lampau, either itu kemarin, sebulan yang lalu, atau bahkan setahun yang lalu. Menanglah dengan mengalahkan diri lo sendiri.
Do it for yourself or be a loser forever.

💡
It's still a long journey and slow process, so enjoy your workout and learning journey 😊



Mahasiswa Akhir: Saya Telat Banget Pak Belajarnya
Muhamad Hudya Ramadhana — Sat, 17 Feb 2024 05:30:41 GMT
Demotivasi adalah hal yang sering terjadi pada mahasiswa akhir. Merasa semuanya jadi susah, merasa semuanya kaya sia-sia padahal udah tiga sampai empat tahun kuliah.
Saya cuma mau bilang, rasain lu, kemaren-kemaren kemana aja?
Tapi yaudah, itu cuma umpatan pertama saya. Bukan berarti saya akan menghujat orang yang telat belajar, tapi orang yang telat belajar pasti akan mendapat hukumannya. Contoh hukumannya:

Susah cari kerja

Interview ngang-ngong-ngang-ngong

Kesulitan ngerjain skripsi

Diterima kerja tapi pas dikasih task susah banget nyelesainnya


Itu hukuman kalian, terima aja takdir akibat kemalasan kalian. Itulah yang kalian petik karena kalian selama ini sibuk haha hihi, sibuk sosmed, sibuk push rank yang mana kalian gak imbangin sama waktu belajar, terima hukuman kalian.
Sekarang, tenang, saya ada untuk mengurangi kecemasan kalian meskipun kalian sedang dalam masa hukuman. Mari kita bahas apa yang bisa kalian lakukan.

Back to Basic
Coba kalian bahas lagi hal dasar, jangan-jangan kesulitan kalian selama ini adalah karena kalian gak bener-bener mateng dasarnya. Ibarat pondasi rumah, ya pondasi kalian tuh gak kokoh. Contohnya adalah, misalnya disuruh buat program sederhana pake file txt, kalian bahkan gak tau cara ngebuat file txt pake kodingan. Lalu solusinya apa? Ya pelajarin masalah utamanya dulu, gimana caranya ngebuat file txt pake Python, misalnya.
Setelah udah tau, kalian diminta buat program dimana datanya bisa disimpan di file .txt dan dijadiin semacam semi-database, sehingga kalau datanya dicari, kita bisa nyari di txt tersebut.
Terus kalian bingung, ini gimana yak alurnya, ya berarti kalian sendiri aja gak paham cara membuat program sederhana. Berarti fokus ke masalah utamanya dulu, gimana caranya buat program sederhana pake looping, print, dan fungsi, misalnya.
Kalian diibaratkan belajar dari depan ke belakang, bukan dari belakang ke depan, karena kalian udah pernah, tapi kalian lupa. So, ya cara satu-satunya kalian mundur lagi sampai titik pertama kalian mulai.
Gak Punya Fokus Bidang
Kita kan sama-sama tau ya, bidang IT itu banyak banget fokusnya, dari backend, web development, frontend, devops, even UI/UX aja masih masuk bidang IT kok. Permasalahannya adalah, kamu udah mahasiswa akhir aja gak bisa jawab mau fokus bidangnya apa.
Itu masalah dari akar masalah.
Sebenernya gak salah belum menentukan fokus bidang kalau masih labil, tapi you can't be like that for the full year, kalau udah mahasiswa akhir, kamu udah harus punya jawaban, dan untuk menemukan jawaban dari permasalahan ini yang paling gampang adalah menjawab pertanyaan berikut:

Fokus bidang apa yang kalau kamu kerjain atau pelajarin, semakin kamu stuck atau nemu kesulitan, kamu malah makin semangat ngerjainnya?

Kalau kamu udah nemuin jawaban itu, udah fix, gak usah pake ba bi bu atau hah hoh hah langsung aja tekunin. Contohnya, saya adalah orang yang sangat suka backend, yap saya suka banget mikir logic dan bermain dengan database itu menyenangkan menurut saya. Selain itu saya pernah stuck di CSS dan saya gak suka banget, I mean like, aneh aja rasanya gak kebayang di logic saya, tapi setiap saya ngerjain kerjaan backend (CRUD dasar) itu selalu tertantang, misalnya ngomongin CRUD tentang aplikasi perpustakaan dan aplikasi hotel, meskipun sama-sama CRUD tapi logic codenya berbeda dimana perpustakaan memiliki flow untuk ngitung denda kalau terlambat, sedangkan hotel ada flow dimana kita harus bisa menemukan ruang yang kosong.
Sebagai mahasiswa akhir, kamu pasti udah nemu jawaban dari pertanyaan di atas, dan gak mungkin kamu masih belum menemukan itu. Kalau kamu belum menemukan itu, tandanya kamu kurang banyak nyoba dan belajar, that's all. So, belajar lah.
Tidak Bertanya / Mentoring
Ketika kalian adalah mahasiswa akhir yang masih stuck pada berbagai hal, salah satu hal yang perlu kalian lakukan adalah... mentoring atau bertanya. Gimana caranya? Well, banyak, ikut bootcamp gratis/berbayar, cari mentor di internet (misalnya ADPList), atau bahkan follow-followan sama orang di Twitter yang juga fokus bidangnya IT, dan jangan lupa untuk bertanya.
Sebenarnya gak salah kalau tidak bertanya, tapi pada kasus ini kamu butuh orang untuk berdiskusi, misalnya kamu bisa berdiskusi dengan saya lewat twitter yang mana saya juga sering ngejawab-jawabin pertanyaan di DM.
Sayapun punya guru yang sering saya tanya di bidang backend, dan saya juga aktif mengikuti perkembangan di forum-forum tech, misalnya dengan membaca artikel-artikel di daily.dev. Permasalahannya, kamu aja udah gak tau dan stuck, dan kamu masih gak mau nanya atau ngobrol? Well, harus diubah ya habbitnya.
Disiplin dan Teratur
Ketika mengejar ketertinggalan maka satu-satunya senjata yang kamu harus punya adalah disiplin dan teratur. Saya benci mengatakannya, tapi saya gak mau ngomong konsisten, karena saya sendiri udah muak denger orang-orang yang bilang "Iya pak tapi itu lho susahnya, saya gak bisa konsisten".
Simply, ketika kamu gak bisa konsisten atau disiplin, itu berarti kamu gak bener-bener menginginkan itu.
Kalimat ini nyangkut di kepala saya, waktu awal belajar coding hampir tiap malem saya begadang untuk belajar, itu kenapa? Simply, karena saya benar-benar menginginkan untuk bisa. Coba kalo waktu itu saya males dan udah lah gak usah belajar, hari ini pasti saya gak akan nulis artikel ini dan cuma jadi pecundang yang mengutuk nasib.
Apa yang bisa kamu lakukan untuk melakukan ini? As simple as membiasakan sedikit demi sedikit, kalau kamu gak bisa belajar perhari sejam, lakukan 30 menit sehari. Gak bisa juga? Sejam per dua hari, mau alasan apa lagi? Gak bisa juga? Dua jam per tiga hari. Stop making excuses and get the fuck up.
Memperbanyak Latihan
Sebenarnya sama kaya disiplin, tapi memperbanyak latihan disini konteksnya adalah, yaudah coding kalau bidang IT, dan design kalau bidang design. Perbanyak latihan dari studi kasus yang ada, atau kalo perlu tanya sama AI, minta buatin studi kasus, terus kamu selesain.
Enak banget jaman sekarang minta soal bisa tanya AI, terus kemudian kita pecahin sendiri, lantas kalau kita aja masih malas, berarti masalah utamanya adalah dari diri kita.
Banyakin latihan hal dasar, misalnya:

Belajar bikin web pake HTML CSS JS native

Belajar bikin web pake Bootstrap

Belajar bikin web pake Tailwind

Belajar bikin CRUD pake txt

Belajar sambungin database ke CLI Python

Belajar bikin UI Design tampilan login

Belajar bikin desain database pake draw.io

Belajar nulis query manual pake MySQL Client


Apapun yang kamu lakukan, yang penting latihan, latihan, dan latihan. Gak ada yang bisa lebih baik tanpa latihan dan gak ada latihan yang sia-sia!
Latihan itu sama aja dengan Grinding, kalau kamu main MMORPG pasti kamu gak asing sama istilah ini, lantas apa bisa tiba-tiba kita jago? Enggak, kita butuh grinding, kita butuh latihan, dan ini dilakukan berulang-ulang meskipun membosankan.
Sombong kali kalian bilang bosen, padahal jago aja belum.

Intinya, iya memang kalau dibilang terlambat, kamu terlambat. Lantas, kenapa kalo terlambat? Yaudah, kejar ketertinggalannya dan terima hukumannya. Menyesali apa yang udah terjadi itu gak ada gunanya, lebih baik kita melakukan sesuatu agar kita gak tambah menyesal lagi kedepannya.

💡
One day or day one? Ngarep bisa jadi lebih baik suatu hari nanti atau berusaha untuk jadi lebih baik di hari pertama?


Pertanyaan di atas hanya kamu dan hati kecilmu yang bisa jawab. Ingat baik-baik bahwa perjuangan itu butuh pengorbanan, kalaupun harus mengorbankan waktu bermainmu dengan teman-teman, kalaupun harus mengorbankan waktumu bersama keluargamu, maka lakukanlah karena itu adalah hukumanmu akibat selama ini malas dan tidak mau menjadi lebih baik.



Belajar 100 Jam Basic Web Development Backend, Emang Bisa?
Muhamad Hudya Ramadhana — Sat, 10 Feb 2024 08:35:02 GMT
Ketika ditanya berapa waktu yang dibutuhkan, saya bisa bilang 100 jam sudah cukup untuk membuat mahasiswa mempelajari basic web backend. Hal ini meliputi:

HTML, CSS, JS Dasar

Bootstrap Framework

MySQL Dasar

PHP Native

Laravel


Nah mungkin ada yang bertanya, kenapasih harus belajar PHP Native? Sebenernya sih bisa aja skip kalau emang mau, tapi gak ada salahnya juga sih belajar PHP Native, biar kerasa bedanya antara PHP native dengan Laravel.
Tapi karena saya pengennya begini, ya kalau kita bedah akan menjadi seperti ini:

Belajar HTML, CSS, Javascript: 20 jam

Membuat Portofolio dengan HTML, CSS, Javascript: 10 jam

Belajar CSS Framework Bootstrap: 5 jam

Membuat Portofolio dengan Bootstrap: 10 jam

Belajar Dasar Database Relasi dengan MySQL: 10 jam

Latihan MySQL - Membangun Database Inventory: 5 jam

Belajar PHP CRUD Dengan MySQL: 15 jam

Belajar Framework Laravel: 10 jam

Membuat Portofolio dengan Laravel + Bootstrap: 15 jam


Totalnya adalah 100 jam (setiap langkah dilakukan dalam waktu 1 jam sehari). Karena setiap langkah dilakukan dalam waktu 1 jam sehari, maka kita butuh 100 hari untuk menyelesaikan tantangan ini.
Saya gak akan jabarin detail setiap jamnya kamu harus ngapain, tapi saya bisa share beberapa hal yang perlu kamu perhatikan dan coba pada setiap bagiannya.

💡
Perlu di-ingat bahwa 100 jam pembelajaran ini tidak menjamin kamu langsung menjadi jago, namun kamu bisa membuat perubahan meski sedikit 😉



HTML, CSS, Javascript
Pada bagian pertama, saya menaruh ini sebanyak 20 jam, kenapa? Karena menurut saya, untuk benar-benar memahami HTML, CSS, dan, Javascript memang butuh jangka waktu yang banyak. Walaupun 20 jam benar-benar kamu habiskan untuk mempelajari, tidak akan membuat kamu otomatis menjadi jago juga kok, namun waktu sebanyak 20 jam ini saya rasa sudah cukup untuk dasar dengan catatan kamu mendapati stuk.
Meskipun dikerjakan 1 jam setiap hari, tentu ada momen ketika kamu stuk. Sehingga wajar aja waktu 20 jam ini saya tulis. Pada dasarnya ketika belajar HTML itu perlu paham:

Kerangka HTML

Tag HTML

Atribut HTML

Styling dengan CSS

Basic DOM dengan Javascript


Pada bagian ini kamu cukup belajar hal-hal dasar seperti:

Hal dasar membuat HTML dengan tag dasar (p, h1, div, a, img)

Hal dasar menggunakan class CSS (font, color, padding, margin)

Hal dasar menggunakan Javascript (on click, merubah element)


Untuk materinya sebenernya kamu bisa menggunakan W3Schools saja kok.
Membuat Portofolio dengan HTML, CSS, Javascript
Setelah kamu belajar dasar-dasar cara menggunakan HTML, CSS, dan Javascript, ada baiknya kamu membuat portofolio dengan ketiga hal tersebut. Lalu portofolio apa yang bisa kamu buat dengan 10 jam? Menurut saya, ada beberapa portofolio dasar yang kamu buat:

Biodata, buatlah portofolio berupa biodata dimana pada satu halaman HTML dapat berisi nama lengkap, nama panggilan, hobi, hingga riwayat pendidikan, kamu tidak memerlukan JS disini namun kamu

Navbar dan sidebar, kamu tau istilah navigation bar? Ya bar yang berada di atas, dan sidebar, bar yang berada di samping. Kamu bisa belajar hal dasar CSS dengan mempelajari ini.

Daftar barang e-commerce, pernah kepikiran gimana caranya bikin daftar barang e-commerce yang kotak-kotak? Saatnya cobain deh belajar, ini bisa membuat kamu memahami konsep grid dan column yang masih sesuai dengan dasar.


Belajar CSS Framework Bootstrap
Framework tuh apasih? Simplenya, framework adalah kerangka kerja yang disiapkan untuk mempermudah pekerjaan kamu, karena kamu udah belajar dasar CSS tentu kamu udah paham cara membuat style yang efeknya ke class, misalnya:
.main {
    padding: 5px;
}

Artinya, apabila kita menggunakan tag html yang mengisi class bernama main, otomatis diberi style padding sebanyak 5px.
Agak aneh sepertinya kalo misalnya saya bilang belajar CSS Framework Bootstrap, karena jaman now pasti banyak yang bilang:

Mendingan Tailwind, bang.

Yup, emang bocil mendang-mending ini banyak sih, tapi satu hal yang mau saya bilang. Menurut saya, Tailwind kurang cocok untuk pemula. Tailwind lebih cocok untuk orang yang kesel sama CSS. Nah untuk level keselnya ini, kamu perlu belajar terlebih dahulu supaya merasakan betapa nyebelinnya CSS, karena gak bakalan kerasa kalau belum merasakan pedihnya CSS.
Maka dari itu, saya menyarankan kamu belajar aja Framework CSS bernama Bootstrap. Framework ini akan memudahkan kamu membuat komponen yang bahkan kita sebut Daftar barang e-commerce pada bagian sebelumnya jauh lebih mudah dengan bootstrap.
Nah di sebelah mana belajarnya? Klik disini.
Membuat Portofolio dengan Bootstrap
Setelah belajar membuat website dengan framework CSS Bootstrap hal yang kamu lakukan masih sama, kamu harus membuat portofolio sebagai latihan agar kamu terbiasa. Berikut portofolio yang bisa saja kamu jadikan acuan:

Resume, buatlah portofolio berupa resume dimana pada satu halaman HTML berisi konten tentang yang berkaitan dengan dirimu seperti deskripsi singkatmu, kemampuanmu, riwayat pendidikan, tentunya dibangun dengan Bootstrap yang mana desain dan hasilnya bisa jauh lebih baik.

Blog, kamu bisa membuat blog sederhana dengan bootstrap, tentunya kamu tidak perlu membuat itu se-detail mungkin karena hanya perlu dua halaman saja, halaman pertama adalah homepagenya, halaman kedua adalah detail dari artikel tersebut.

Landing page, dengan Bootstrap kamu dapat membuat landing page dimana website tersebut berisi tentang konten sebuah perusahaan atau sebuah produk, kamu dapat melihatnya disini.


Belajar Dasar Database Relasi dengan MySQL
Setelah kamu belajar HTML, CSS, dan Javascript, saatnya step up lebih, kamu perlu belajar database relasi. Saya tidak perlu menjelaskannya apa itu database relasi karena kamu bisa mencarinya di Google.
Untuk memahami teorinya, kamu perlu belajar yang namanya

1NF

2NF

dan 3NF


Jadi sebelum kamu benar-benar melakukan coding terhadap database, kamu perlu belajar teori desain databasenya terlebih dahulu. Ingat, kamu tidak perlu jago, tapi kamu perlu paham "kenapa" desain database x dibuat seperti ini, "kenapa" masalah y dibuat seperti itu.
Setelah kamu paham dasarnya, kamu dapat belajar dasar MySQL, caranya seperti apa? Sebenarnya sederhana, kamu hanya perlu belajar sintaks dasar meliput:

CREATE dan DROP database

CREATE, ALTER, dan DROP table

INSERT, UPDATE, DELETE data table

SELECT with WHERE syntax data table


Setelah kamu memahami hal-hal dasar di atas, kamu bisa berlatih untuk membuat database versi kamu.
Latihan MySQL - Membangun Database Inventory
Agak aneh kalau disebut Portofolio, maka saya menyebutnya latihan. Mungkin saya bisa bantu sedikit untuk membuat studi kasusnya:

💡
Sebagai seorang programmer, kamu diminta untuk membangun sistem manajemen inventori di sebuah perusahaan yang baru dirintis. Perusahaan tersebut menjalankan bisnis sederhana, yaitu bisnis pergudangan. Dikarenakan perusahaan ini masih kecil, perusahaannya hanya menjalankan lini bisnis dalam mencatat alur keluar masuk barang yang ada.


Perlu diketahui bahwa perusahaan membutuhkan sistem dengan spesifikasi sebagai berikut:

Sistem dapat melakukan pencatatan barang dimana perlu dicatat admin mana yang melakukan input tersebut.

Sistem dapat menampung stok dari barang yang ada.

Sistem dapat mencatat transaksi masuk keluarnya barang yang perlu disetujui oleh admin.

Sistem dapat mencatat barang apa saja yang pernah masuk secara unik, misalnya hari ini kedatangan odol merk x, maka sistem dapat mencatat odol tersebut ke sistem namun tidak boleh ganda apabila odol tersebut datang lagi keesokan harinya.

Sistem memiliki laporan pencatatan harian dari barang apa saja yang keluar dan masuk pada hari tersebut berupa jumlah dan data yang unik dari tiap barang apa saja yang keluar dan masuk.


Saya tidak akan menjelaskan bagaimana melakukannya, cobalah dengan kreativitasmu sendiri lalu konsultasikan dengan orang yang kamu anggap capable untuk membantu mengoreksi pekerjaanmu 😁.
 
Belajar PHP CRUD Dengan MySQL
Setelah kamu belajar dasar database, kamu perlu belajar PHP CRUD dengan MySQL. CRUD ini adalah istilah Create Read Update dan Delete, yaitu aktivitas yang sama seperti yang kamu lakukan pada database dimana ada data yang ditambahkan, ditampilkan, diperbarui, dan bahkan dihapus.
Belajarlah PHP Native, karena itu akan mempermudah kamu mengetahui hal-hal dasar sebelum kamu terjun ke Laravel nantinya. Memang melakukan hal-hal pada PHP Native bisa dikatakan cukup ribet, namun itu baik untukmu agar paham hal dasar supaya kamu gak ngang-ngong-ngang-ngong nantinya pas belajar framework.
Menggunakan studi kasus database dan dengan ilmu yang kamu dapatkan dari latihan HTML CSS JS dan dengan Bootstrap, buatlah website sederhana yang bisa kamu gunakan untuk memenuhi studi kasus database kamu tersebut. Sehingga, ilmu yang kamu terapkan di database yang tidak ada tampilannya dapat kamu buat supaya ada tampilannya.
Disini, jiwa perfeksionis kamu akan digetarkan karena ada tampilannya 😊
Belajar Framework Laravel
Setelah kamu belajar PHP Native, kamu bisa saja segera mempelajari Laravel. Perlu diingat bahwa ketika kamu terjun ke Laravel akan ada beberapa hal environment yang berubah, seperti struktur folder maupun habbit lainnya. Hal ini wajar karena framework Laravel adalah opinionated framework, artinya framework ini sudah dibentuk dan diatur strukturnya, kamu hanya perlu mengikutinya saja.
Belajar framework Laravel tidak akan sulit, namun kamu akan mendengar istilah baru seperti middleware, templating, routing, CSRF, hingga MVC. Namun tidak mengapa, seiring berjalannya waktu, kamu akan paham semua itu.
Membuat Portofolio dengan Laravel + Bootstrap
Tibalah kita di tahap terakhir, apabila kamu benar-benar sudah pada tahap ini dan kamu telah mengikuti setiap tahap yang saya jelaskan sebelumnya, harusnya secara teori pengetahuanmu sudah membaik. Artinya, kamu pasti adalah orang yang berbeda dari 85 jam sebelumnya, karena di 15 jam terakhir ini, kamu akan membuat portofolio dengan Laravel dan Bootstrap.
Masih dengan studi kasus yang sama dengan PHP Native, saatnya kamu membuat portofolio tentang perusahaan pergudangan. Namun, kamu perlu step-up lebih banyak disini, artinya kamu perlu menerapkan hal-hal baru seperti Validasi yang lebih baik, middleware yang lebih akurat, routing group yang lebih baik, dan beberapa hal lainnya. Namun, kalau kamu masih belum bisa, tidak mengapa juga. Intinya 85 jam yang telah kamu lakukan sebelumnya pasti membuatmu menjadi lebih baik.
Tidak semua orang memiliki progress yang cepat, tapi pasti kamu telah sampai di titik yang dimana kamu sudah berbeda dibanding 85 jam yang lalu.
Selamat menyelesaikan 15 jam terakhir ini dengan bersenang-senang walau bersenang-senangnya sambil pusing.

Akhir kata saya hanya ingin mengatakan bahwa, untuk mencapai kemampuan yang jauh lebih baik kamu perlu terluka lebih banyak, artinya kamu perlu pusing, dan gelisah ketika belajar, karena kamu sedang berproses.
Hal ini saya dapatkan selama saya belajar maupun membangun fisik. Ini adalah perjalanan jangka panjang, kamu tidak dapat melihat perbedaan hanya dalam beberapa minggu saja, perlu dedikasi yang kuat dan grinding terus menerus ketika belajar.
Konsisten dan disiplin sudah harus jadi pegangan, karena motivasi sifatnya hanya sementara, namun kedisiplinan lah yang akan menjadi backup kita ketika kita sedang malas, atau demotivasi.
Perubahan perlu pengorbanan, meskipun itu harus mengorbankan waktu kita untuk bermain game, lebih baik daripada mengorbankan masa depan keluarga yang akan kita bangun 😉



Kampus Nggak Ngajarin Ini Tentang Database Relasi
Muhamad Hudya Ramadhana — Wed, 17 Jan 2024 10:56:51 GMT
Ketika ngomongin database apa yang terlintas di kepala kalian? Pasti SQL, ya tentu saja. SQL soalnya udah jadi database yang lumrah di kalangan para mahasiswa, walau mahasiswa yang (ehm) lebih rajin sekarang pasti kenal istilah NoSQL.
Ya, mata kuliah basdat atau basis data adalah mata kuliah dasar pada semester awal yang mengenalkan perkuliahan betapa menyebalkannya ilmu backend. Instead of ngeliat tampilan-tampilan yang unyu dengan warna-warna kita malah dilihat tampilan kaya begini:
mysql> select count(*) from users;
+----------+
| count(*) |
+----------+
|  4056004 |
+----------+
1 row in set (1.13 sec)

Mungkin orang-orang malah akan ngomong, "kenapa ada orang yang mau jadi backend developer ya? ngeliat database gitu udah pusing nulis script, kalo lemot berabe lagi", ya emang bener, tapi ya.... seru hehehe.
Nah btw, gue sering ngeliat masalah-masalah dasar di level industri, tapi gue nggak melihat bahwa kampus melakukan ini di level pendidikan, maka wajarlah orang-orang yang masuk backend selain tidak banyak, tidak memenuhi level market juga.
Jadi jangan heran kalo kamu ngga keterima kerjaan, bukan salah kampusnya aja, salah kamu juga wkwkwkwkwk sorry kebanjiran fakta. Tapi tenang aja, gue akan ngasih beberapa pandangan gue yang akan membantu kalian untuk secepatnya bebenah terutama yang pengen jadi backend.

Kampus Ngga Ngajarin Pentingnya RAW Query
Lo semua pasti gak asing sama gambar ini kan?

Ya, gambar legend yaitu PHPMyAdmin, atau bahkan kalo kampus kalian pake SQL Server, kalian bakalan di-arahin pake GUI dari SQL Server itu sendiri.
Sayangnya eh sayangnya, gue pribadi agak menyayangkan sama para tenaga pendidik kita yang nggak mau ngajarin betapa pentingnya RAW Query di SQL ini. Kenapa? Ya simple as that, karena kalo terbiasa pake RAW Query (Query kasar), mahasiswa akan terbiasa untuk nulis query ketika terdesak! Apalagi momen-momen debugging dan harus menggunakan server linux sebagai CLI untuk memahami kondisinya.

Yaelah ngapain sih bang repot, kan bisa pake GUI, enak, gampang

Ya nggak salah sih, kalo buat development, saya juga gitu kok, tapi bukan berarti RAW Querynya nggak bisa. Sayangnya, para mahasiswa ini dimanjakan dengan KLAK-KLIK-KLAK-KLIK yang bikin mahasiswa bahkan banyak yang nggak bisa kalo diminta ALTER TABLE pas interview ke company dan gue sangat menyayangkannya. Nggak harus jago join ke 10 tabel, cukup paham basicnya aja, cara rubah kolom gimana cara hapus kolom gimana.
Banyak kasus sekarang ini kalau mahasiswa gabung ke perusahaan, perusahaan itu umumnya sangat menjaga agar port 3306 mereka alias port database MySQL (atau port lainnya lah terserah) agar tidak terbuka secara publik. Sehingga, otomatis mahasiswa pada nggak bisa konek ke database mereka pake aplikasi lain seperti DBeaver, MySQL Workbench, termasuk PHPMyAdmin.

Jaman sekarang mah ada VPN bang

Luckily you company-nya punya waktu yang cukup untuk setup itu, kalo nggak gimana? Kita nggak bisa nyalahin company-nya kan? Maka dari itu BISALAH untuk nulis RAW Query yang basic aja even SELECT, INSERT INTO, DELETE FROM, sampai CREATE INDEX.
Jadi poinnya apa? Biasain tulis query manual (RAW), jangan klik-klik terus. Nanti jadi habbit buruk dan ketika harus problem solving jadi nggak terbiasa. Klak-klik boleh untuk cepet, tapi jangan dibiasain pas baru awal belajar.
Kampus Nggak Ngajarin Teliti
Sebenernya database itu nggak serem sih, nggak seserem ketika temen minjem duit terus kemudian ngilang gitu aja. Tapi, basic tentang database itu sendiri gak diajarin, terutama satu hal, ketelitian dan hati-hati.
To be honest, dua hal ini adalah hal paling basic tapi paling sering juga diabaikan oleh newcomer, termasuk saya ketika nggak berhati-hati.
Saya ceritain dikit, jadi waktu itu tim IT di kantor tempat saya kerja sedang develop sebuah fitur, singkat cerita salah satu Supervisor di lapangan minta gue untuk merubah password salah satu petugas di lapangan karena dia baru aja dipecat kemarin, dan takut usernamenya disalah gunakan.
Karena waktu itu kantor gue juga belum banyak orangnya, so one person should use multiple hats. Nah apesnya, gue melakukan kesalahan fatal, gue menulis query kaya begini:
UPDATE staffs SET password = "";

You know what's wrong? Yes, where is WHERE SYNTAX!
Dan bodohnya lagi gue main asal pencet aja itu di database, alhasil sebanyak 70-80 rows updated, dan lo tau gue rasanya apa abis itu? Nangis 😭
Nangis atas kebodohan gue yang sok ganteng dan sok pintar ini, alhasil gue harus bikin script di API untuk nulis ulang password akun staff lapangan sebanyak 70-80 dan dibagikan ke WA sesuai Supervisornya.
Saran gue buat para tenaga pendidik, kasitau mahasiswa kalian bahwa ketelitian dalam nulis query itu penting, apalagi untuk query:

ALTER

UPDATE

DELETE

DROP


Kenapa? Karena kalau sudah di-eksekusi, tidak ada kemungkinan bisa kembali kecuali mengaktifkan fitur transactions.

Ribet lo, yaudah pake transactions aja sih

Yaudah iya, sok aja, kalo pengen pake, walau sih gue gak yakin idealisme lo akan bertahan sekuat itu hehehe, pasti pengennya buru-buru.
Semenjak saat itu, gue kalo ada query UPDATE, DROP, ALTER, DELETE gue pasti tulis dulu di notepad, dibaca baik-baik, terus copy paste ke CLI MySQL terus kemudian sebelum menekan tombol enter gue tatap baik-baik query itu untuk memastikan apakah tidak akan ada masalah kalau gue eksekusi.
Kampus Nggak Ngajarin Performa
Memang bukan kewajiban kampus untuk mengajarkan betapa pentingnya masalah performa, tapi setidaknya untuk bapak ibu tenaga pendidik IT yang baca ini, ajarin mahasiswa kalian tentang teori LOCK di database.
Kenapa? Karena selama pendidikan bapak ibu pasti dalam environment yang sangat nyaman tanpa adanya perubahan, tapi kalau di-industri pasti kaya gini:

User ada banyak ngehajar API atau Web App, kemudian masing-masing request meminta data ke database. Buat para mahasiswa kalian harus tahu ya, bahwa ketika database khususnya Database Relasi (Relational Database) pada saat melakukan operasi terhadap perubahan struktur tabel, misalnya menambah kolom baru, atau mengganti tipe data kolom baru ada yang namanya proses LOCK terhadap table.
Sebagai contoh misalnya kita punya tabel namanya users, kemudian kita mau nambah kolom nih misalnya nama kolomnya adalah district.
Apa yang dilakukan oleh database relasi?

Buat tabel temporary, misalnya bernama _users dengan struktur yang ditambahin kolomnya si district.

Mengunci atau LOCK si table users, supaya gak ada data baru yang masuk, tujuannya supaya datanya persistent atau gak berubah-ubah.

Ngecopy semua data di tabel users ke tabel temporary tersebut dengan nama _users.

Setelah selesai, tabel users akan diganti misalnya menjadi users_old.

Kemudian tabel _users direname menjadi users.

Terakhir, tabel users_old akan di-drop / dihapus.


Apa masalahnya? Lu bayangin selama proses perubahan kolom ini, nggak mungkin tuh database nggak diobok-obok alias digunakan, apalagi kalau lagi jam kerja. Makanya jangan heran kenapa banyak developer yang rutin bekerja malam karena malam kan emang the lowest activity hour untuk database bekerja (kecuali perbankan hohoho).
Bayangin juga kalo tuh tabel users isinya 20 juta data, nangis itu ngecopy semua data di tabel users ke tabel temporary tersebut bukan waktu yang sebentar, gak segampang mahasiswa ngelakuin itu karena data di database mahasiswa jumlahnya dikit.
Selain itu, ketika sedang melakukan perubahan kolom, tentu ada aja proses atau query SELECT yang lagi berjalan, misalnya mau ngambil data user atau transaksi, otomatis request ini jadi gak bisa didapatkan karena table-nya sedang terkena proses LOCK yang berujung ngebuat sistemnya di database menjadi Deadlock request, atau istilah gampangnya kepenuhan.
Makanya saya cuma mau bilang, tolong bapak ibu minimal ajarin teori dan konsep LOCK supaya mahasiswa tau, dan kasitahu mahasiswa proses yang terjadi selama perubahan kolom, biar mereka terutama yang mau jadi backend nggak ngang ngong ngang ngong nanti di-industri. Urusan mereka mau jago apa enggak pokoknya~

💡
Ohiya, sebenernya ada solusinya terkait masalah di atas, tapi gak akan saya bahas disini, gak cukup waktunya hehehe.


Kampus Nggak Ngajak Simulasi Beneran
Ajaklah simulasi beneran mahasiswanya pake minimal satu juta data dengan empat tabel, tenaga pendidik juga diharapkan aktif supaya mahasiswanya kegambar, oh gini loh punya minimal satu juta data.
Selama ini yang diajarin gimana? Ngelakuin insert cuma sampe 10-20 data yailah mana berasa bosku. Ajarin beneran biar mereka paham kenapa pentingnya INDEX di database ketika datanya udah jutaan baru mereka ngangguk, bahwa sepenting itu INDEX ketika belajar database.
Nggak usah banyak-banyak kok ngelakuinnya, misalnya studi kasus mini e-commerce, berarti paling nggak punya beberapa tabel berikut buat simulasi:

users (10-20 ribu data)

user_addresses (10-20 ribu data)

user_carts (5-6 ribu data)

orders (2-8 ribu data)

transactions (100-300 ribu data)

transaction_details (1-2 juta data)

products (5-10 ribu data)

categories (20-100 data)


Kalau aja mahasiswa udah diajarin begini, udah kebayang tuh dia begimana pusingnya liat database, dan bukan berarti mau bikin mahasiswanya pusing, tapi mereka punya taman bermain yang real!
Meskipun tidak benar-benar real seperti yang dijalankan di industri, tapi minimal udah kebayang mahasiswanya bahwa kalau di-industri akan seperti ini loh seberapa hektik databasenya, udah kebayang juga tuh bahwa kalau kita ngelakuin kesalahan, otomatis, ya.... kelar udah datanya.
Alah kalau bapak ibu alasan takut datanya susah digenerate, suruh aja ChatGPT, Bard, Claude dan AI lainnya untuk generate code pake Python, simple kan? Saya aja ketika nyoba salah satu tools migration database yang namanya Gh-ost, saya nyobain generate 10 juta data pada satu tabel dengan script ini aja kok:
import random
import string
import pymysql

# Connect to the MySQL server
connection = pymysql.connect(
    host='localhost',
    user='hudya',
    password='hudya emang paling keren sedunia',
    database='sukuna'
)

# Create a cursor object
cursor = connection.cursor()

# Generate and insert random data into the table
for _ in range(2000000):
    name = ''.join(random.choices(string.ascii_letters, k=10))
    email = ''.join(random.choices(string.ascii_lowercase, k=5)) + '@example.com'

    insert_query = f"INSERT INTO users (name, email) VALUES ('{name}', '{email}')"
    cursor.execute(insert_query)
    print(f"inserting: index-{_}")

    # Commit the changes every 1000 rows
    if _ % 1000 == 0:
        connection.commit()
        print(f"comtting: index-{_}")

# Commit any remaining changes and close the connection
connection.commit()
connection.close()
print("Finish!")

Inget ya, saya cuma modal ChatGPT kok 😁
Jadi, yuk para mahasiswa belajar lebih banyak, nggak usah nyalahin dosen kalian kalo nggak diajarin ini, cukup baca apa yang saya tulis, dan coba belajar lebih banyak. Untuk para tenaga pendidik yang membaca ini sampai habis, terima kasih banyak, semoga tulisan saya bisa menyadarkan bapak ibu biar lebih kreatif juga mendidik anak-anaknya, dan semoga berkah ya bapak ibu!



Mahasiswa Pada Gak Paham Aplikasi MVP
Muhamad Hudya Ramadhana — Fri, 05 Jan 2024 17:18:17 GMT
Ketika kuliah terutama jurusan IT, pasti mahasiswa bakalan pernah ngalanin tugas besar. Ya, tugas besar itu adalah tugas yang mana bisa dikatakan sebuah proyek.
Ketika membuat sebuah proyek, kita pasti mikir fitur apa yang perlu dibuat. Misalnya, kita buat aplikasi pencatatan kesehatan. Secara teori, fitur apa yang sekiranya harus ada? Udah pasti fitur pencatatan kesehatan. Kita bisa menampilkan data kesehatan secara berurutan yang ditampilkan dengan cara sederhana, yaitu tampilan daftar (list) menggunakan tabel.
Tapi sayangnya, banyak mahasiswa yang nggak paham ketika membuat aplikasi. Banyak yang berpikir bahwa ketika kita membuat aplikasi baik itu web maupun mobile, fitur pertama yang harus selesai adalah autentikasi, karena yang ada di gambaran mereka, login adalah screen pertama yang mereka tabrak.
Padahal, yang paling penting dari aplikasi adalah CRUD atau yg kita kenal dengan istilah (create, read, update, dan delete). Makanya kalau kita belajar tutorial coding di internet, hampir belum pernah saya temukan dimana tutorial autentikasi berada pada bagian awal bahkan sebelum CRUD (kalau ada tolong info saya). Pasti CRUD itu lebih dulu posisinya, tau kenapa? Karena untuk membuat fitur autentikasi pun bisa mengimplementasikan konsep CRUD, yaitu CREATE (register) dan READ (login).
Banyak mahasiswa yang malah sibuk ngurusin fitur login untuk diselesaikan duluan daripada menyelesaikan MVP dari aplikasinya. Padahal, MVP dari aplikasi jelas lebih penting, karena dengan MVP, aplikasi kalian udah bisa dianggap "hampir selesai".
Btw, kita gak lagi ngomongin MOST VALUABLE PLAYER disini, ini bukan mobile legends, dude. Kita ngomongin Minimum Viable Product.

A minimum viable product (MVP) is a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development
- Wikipedia

Artinya, kamu cukup membuat aplikasi yang fitur dasarnya aja udah bisa digunakan dan menggambarkan aplikasi kalian. Gak harus aplikasi yang sempurna dengan banyak fitur, cukup aplikasi yang usable.
Artinya, ketika kalian ngomongin "saya bikin aplikasi pencatatan barang", kalau aplikasinya gak bisa mencatat, melihat, menghapus, dan melakukan perubahan terhadap barang, ya apa layak disebut MVP? Kalau aplikasinya baru bisa fitur login doang, apa layak disebut aplikasi pencatatan barang?
Kalian terutama para mahasiswa saya boleh benci saya dengan kalimat-kalimat ini, tapi yang saya sampaikan adalah 100% fakta, just take it.
Respon yang lumayan sering saya dapet disini adalah:

"tapi pak kalo gaada login kan susah nanti gakbisa masuk appnya"

Lah kan kalian bisa ngelakuin tiga cara ini untuk ngakalin:

Bikin data usernya di database, kemudian id usernya statis dibuat hard code ketika mau melakukan CRUD supaya ngisi id usernya, misalnya 1.

Bikin supaya kolomnya gapapa nerima tanpa user id terlebih dahulu.

Bikin sessionnya dengan hard code supaya diisi langsung dengan id user yang kita mau.


Apa susahnya? ya yang susah itu cara berpikir mahasiswanya, bukannya mahasiswa itu harus kreatif? Justru definisi kreatif adalah ketika bisa menyelesaikan masalah dengan cara yang minim namun tepat guna, misalnya tiga solusi di atas. Bukan ngakalin biar gak pake table user, apalagi ngakalin biar gak konek database.
Contoh lain, kalian misalnya membuat aplikasi pemesanan makanan. Secara teori, harusnya aplikasinya mengharuskan untuk login, tapi karena kalian kepepet gak ada waktu tersisa, akhirnya kalian membuat flow appnya agar bisa order terlebih dahulu, tapi data tujuan alamatnya, harus selalu di-input secara manual. Kenapa? Ya karena kan gak ada usernya.
Apakah acceptable? Imo, yes. Aplikasi kalian belum ada fitur login, tapi data order masuk ke database. Meskipun secara requirement bisa jadi tidak memenuhi karena gak ada autentikasi, but it's still acceptable.
Coba bayangin kalau aplikasi pemesanan makanan itu ada fitur login dan register, tapi pas lagi order nggak masuk ke database. Masuk akal nggak? Jelas enggak! Maka, ngapain ngabisin waktu untuk bikin aplikasi yang nggak masuk akal? Lebih baik bikin yang lebih sederhana, tapi masuk akal.
Menurut saya, beberapa alasannya kenapa mahasiswa ngelakuin ini adalah sebagai berikut:

Mahasiswa punya idealisme, tapi gakpaham gimana caranya.

Mahasiswa pengen tampilan bagus, tapi gak paham bahwa tampilan bagus itu tidak menjamin fungsinya berjalan baik.

Mahasiswa ngga fokus ke MVP, mereka pengennya memuaskan ego pribadi.

Mahasiswa ngga mau nanya, padahal mereka dikasih kesempatan nanya.

Mahasiswa fokus untuk ngeliat bagaimana membuat sebuah aplikasi di youtube tanpa paham kenapa itu bisa berjalan.


Padahal dengan membuat aplikasi yang fokus ke MVP, mahasiswa bisa meningkatkan kemampuan dasarnya.
Saya pernah punya mahasiswa dan mahasiswi yang bawel, hampir di setiap minggu mereka nanya, diuber-uber lah saya sampe depan pintu kelas, yang ditanyakan pun adalah hasil dari effort dia, misalnya dia konsul apakah proyek tugas besarnya bisa pake library a/b, gimana approaching memanfaatkan konsep cart pakai shared preference. Hasilnya gimana? Jelas memuaskan!
Kenapa? Karena mereka ngerjainnya tekun gak asal jadi, mereka benar-benar memahami how-to, bukan buru-buru mau jadi.

Nonton Youtube Boleh, Tapi....
Nggak sekali dua kali saya melihat beberapa proyek mahasiswa saya menggunakan hasil dari youtube, apakah boleh dan sah? Imho, yes, sah-sah saja.
Masalahnya adalah, mereka gak paham alurnya dan gimana kerjanya itu aplikasi. Karena youtube tidak memberikan pencerahan terkait kenapa pake cara x, kenapa gak pake cara y. Mereka cuma ngoceh sambil bikin aplikasinya terus aplikasinya jadi.
Dengan cara ini, mahasiswa bisa menyelesaikan masalah utama mereka, yaitu menyelesaikan proyeknya, tapi apa masalahnya? Mereka gak menyelesaikan masalah utama mereka: ketidaktahuan.
Beberapa yang saya temui, hanya sekedar mengikuti aja apa yang si youtuber bilang atau kerjakan. Ibarat mahasiswa malah seperti bebek yang ngikutin gembala, bebek mau aja ngikutin gembala kemanapun mereka ikut, tanpa tahu dan peduli kenapa harus kesana.
Saya gak sekali dua kali bilang selama di kelas: "teman-teman, fokuslah untuk memahami kode yang kalian pelajari selama pertemuan kita, jangan fokus ke tampilan. Ya, memang tampilan yang bagus memuaskan mata, tapi kalo gak ngerti apa guna?" . Rasanya masih saja bagi mahasiswa merasa bahwa membuat aplikasi yang tampilannya keren itu bisa memuaskan ego mereka. Sejak zaman mahasiswa, saya gak pernah muasin ego pribadi saya, pokoknya fiturnya sesuai, udah.
Sebenernya yang paling mengkhawatirkan dari nonton youtube adalah, cara yang orang-orang youtube lakukan, bisa jadi gak best-practice dari apa yang saya ajarkan di kelas, yang malah membuat mereka tambah bingung, dijamin!
Saya pribadi ngeliatin beberapa code yang nonton youtube, kepala saya tambah pusing liatnya. Karena orang-orang yang bikin code di youtube ini, gak menjamin bahwa code dia ini akan readable dan easy to learn. Kalo bagi mereka, ya jelas, mereka kan yang buat. Sedangkan saya aja kalo mau bikin materi tutorial untuk mahasiswa saya, bisa berkali-kali saya baca sebelum saya tulis, saya memastikan ini cara paling simple dan mudah dicerna.
Udah saya pastikan paling simple aja, masih ada yang dateng ke hadapan saya bilang "Jujur saya belum paham pak" ketika lagi presentasi tugas besar. Sontak yang ada di kepala saya adalah:

"LOE DARI KEMARIN KEMANA AJA BOSKUUUUUU, KENAPA PAS DITANYA ADA PERTANYAAN APA GAK JAWAB!!!! 🤬🤬🤬🤬"


Tapi saya paham, kan gak semua anak juga cerdas, mungkin sayanya yang kurang deket, jadi saya bisa kasih pengertian. Saya selalu bisa kasih second chance, tapi tidak dengan dunia, jadi otomatis kena ceramah no jutsu dari saya, mendadak saya jadi naruto.

Apakah orang-orang ini akan berubah? Who knows, we'll see later.

Mentalnya Gak Lanang...
Ini agak pria-sentris ya, tapi jujur, saya agak sedikit kesal melihat laki-laki yang gak lanang terutama pada bidang IT.
Contoh cowo

Contoh lanang

Orang-orang seperti Gojo satoru yang gila emang nggak banyak, tapi biasanya yang gila kaya gini, mentalnya kuat alias lanang.
Pada kasus perkuliahan ini, saya gak bilang bahwa semua orang harus bisa coding, apalagi semua pria. Saya paham bahwa ada pria yang bakatnya bukan di coding, tapi jujur, saya kurang srek sama yang nggak mental gila-gilaan mirip gojo. You can disagree, it's your choice, tapi imo, selama dirimu masih ada kewajiban untuk jadi mahasiswa IT dan punya tanggung jawab untuk melakukan pekerjaan sebagai mahasiswa, lakukanlah pekerjaan tersebut dengan mental Gojo satoru.
Kita akan selalu ketemu error, dan itu hal yang wajar, tapi ketika kita nyerah, di saat itulah kita kalah. Jadi yang membuat kita kalah itu bukan karena kita gagal, tapi karena kita nyerah.

Gak Harus Cepat, Tapi Sampai
Itu yang namanya belajar, saya bilang ke mahasiswa saya yang ngerasa minder karena gak ngerti-ngerti, saya cuma tanya:
👨‍💻 : Kalau kamu pulang abis ini, kamu fokus belajar selama 1 jam, kamu bisa nggak meningkatkan kemampuan kamu?
👨‍🎓 : Bisa pak tapi gak banyak
👨‍💻 : No, No, No, No, focus on the question. Saya gak nanya banyak atau tidak, pertanyaannya bisa atau tidak?
👨‍🎓 : Bisa pak
👨‍💻 : Besoknya kamu lakuin lagi, fokus belajar selama 1 jam, bisa gak meningkatkan kemampuan kamu?
👨‍🎓 : Bisa pak...
👨‍💻 : Nah, kamu aja udah mengatakan bisa, maka jangan denial. Buang distraksinya. Sosmed bikin distraksi? Hapus. Mobile legends bikin distraksi? Hapus! Kamu ninggalin Mobile legends 2 season juga gak tutup mereka malah makin kaya, usernya makin banyak. Tapi kamu? Kamu gitu-gitu aja kalau masih jadi orang yang sama.
Ya begitulah kurang lebih ceramah no jutsu yang saya lakukan.
Mahasiswa itu kebanyakan malah mikirin banyak atau sedikitnya hasil belajar yang mereka lakukan, padahal slow progress is still a progress. Saya aja belajar untuk nyobain raspberry OS di Virtualbox, coba konekin monitoring grafana, dan habis sampai berjam-jam (kurleb 3-5 jam), apakah progressnya banyak? Jujur aja enggak, tapi saya puas nggak? Ya puas lah, orang jadi terjawab pertanyaan-pertanyaan saya walaupun belum semuanya terjawab.
Kalian yang baca ini, sadar diri aja, kalau kalian memang lemah logicnya, butuh 2-3x ngelakuin agar bisa, maka lakuin 2-3x, kalau butuh 5x ya tetep lakuin, karena yang penting itu progressnya, bukan kecepatannya.
Semua orang bergerak pada time frame mereka masing-masing, tapi kalo kalian aja menyerah, ya berarti bener kata haters kalian, kalian emang nggak mampu dan layak jadi pecundang. So, mau dengerin haters kalian? Kalo saya sih ogah.
Harus kita bantai haters kita, soalnya kalo gak ada mereka, kita gak bisa sampe disini 🤭



Mahasiswa Kebanyakan Nanya, Tapi Gak Mau Konsisten
Muhamad Hudya Ramadhana — Thu, 04 Jan 2024 16:17:53 GMT
Pertanyaan-pertanyaan ini, sering banget diajuin sama mahasiswa yang saya temuin:

"Pak, saya bagusnya ambil backend atau frontend ya pak?"

"Pak, mau belajar tapi gak tau sumbernya darimana huhu"

"Pak, saya mau dalemin mobile tapi gak tau caranya gimana"

"Pak, kasih tips biar cepet jago kaya bapak"


Sebenernya saya sih santai aja dapet pertanyaan kaya gini, ya tinggal dikasitau aja sih. Cuma kalo menurut kacamata saya (kebetulan di foto saya emang lagi pake kacamata), kebanyakan yang nanya gini tuh nggak mau menyelesaikan masalah utamanya.
Buat yang pernah saya ajar di kampus, pasti udah nggak asing sama soal-soal tentang kepribadian yang saya kasih pada pertemuan pertama, beberapa pertanyaan yang sering saya keluarkan adalah:

Dari semua soal ini, saya pengen kenal lebih jauh sama para manusia yang saya didik. Responnya gimana? Ada yang serius, ada yang curhat, ada yang bodoamat yang penting tugasnya selesai. Apa saya sakit hati sama yang bodoamat? Enggak, saya malah kasian. Kasian karena, nggak tau antara dia malas nulis, atau dia malas berpikir. Syukur sih kalo malas nulis, kalo berpikir aja malas? Well, ngga kaget kalau progress pembelajarannya lambat.
Saya seneng sama mahasiswa yang curhat atau serius, misalnya cerita kalo dia anak yatim atau piatu, saya jadi malah tambah perhatian kalo di kelas. Saya juga seneng kalo misal dia bilang "pak saya pengen bisa deh kaya bapak, tapi jujur saya orangnya malu kalo nanya". Gak satu atau dua orang malah saya balas emailnya karena saya seneng baca apa yang dia tulis.
Saya juga seneng sama anak yang ambis pas cerita dan dibuktikan dengan serius ambis di kelas, gak cuma tulisan doang. Saya jadi tambah care buat ngebantu dia tumbuh dengan ilmu dan pengalaman yang saya punya. Gak satu dua anak malah saya minta bantuan ketika ada projek yang nggak bisa saya pegang.
Misalnya juga pernah ada yang cerita, dia kerja part-time karena harus nanggung beban, ayahnya sakit, ibunya udah nggak ada, jadi dia minta maaf karena dia suka cabut-cabutan di kelas, saya bilang gapapa, yang penting tugasnya aman, tepat waktu, saya gak akan marah. Saya rasa hampir semua dosen juga gitu, kami juga punya empati dan peri-kemanusiaan kok, sayangnya gak sedikit aja mahasiswa yang konyol dan nyeleneh sehingga ngeremehin hal yang begini.
Jadi, hal yang saya lakuin ini pure karena saya pengen kenal sama siapa kamu. Dengan begini, saya jadi bisa memberikan ilmu dan mendidik lebih pakai hati, karena saya kenal dengan baik siapa yang saya ajar.

Semua ada di Internet
Sejujurnya terutama buat yang suka nanya ke saya, saya males menjawab pertanyaan retoris, like you guys even can answer those questions.

Pak dimana ya saya bisa nyari sumber belajar backend, kalo bisa yang gratis pak?

Saya yakin bahwa youtube adalah jawaban pertama atau hal yang biasa kalian cari, like why you even ask the questions? You guys anak Gen Z kan?
Coba kalo misalnya pertanyaannya diubah jadi lebih keren

Pak, jadi gini, saya kan abis belajar Backend, saya udah pelajarin nih dasar-dasar database, tapi saya bingung pak mau belajar apa lagi. Bapak ada saran?

Nah kalo kaya gini, saya juga jadi ketrigger, besar kemungkinannya saya akan tanya balik: "Emang dasar-dasar yang kamu udah pelajarin itu apa aja? Coba jabarin"
Kenapa saya nanya pertanyaan kaya gini?

Recap, memastikan apa saja yang sudah kamu pelajari.

Align, menyamakan konsep antara pemikiran dasar-dasar database menurut saya dengan kamu. Sehingga tidak ada bias dari perbedaan sudut pandang.

Explain, menjelaskan dengan baik secara pribadi, apa saja yang sudah kamu pelajari, misalnya: "Saya udah belajar trigger pak, jadi nanti bisa auto insert di table lain kalo ada action".


Dengan begini, conversation jadi gak berhenti sampai disitu aja, kamu bisa enrich the conversation dengan kembali melempar pertanyaan, misalnya:
"Tapi pak, saya penasaran, kalo di perusahaan itu datanya bisa sampe berapa juta sih?"
Curious adalah hal penting, memang menyebalkan harus menjelaskan hal-hal detail seperti ini, tapi bagi saya, mahasiswa yang kepo dengan tanda kutip kepo yang baik, malah menyenangkan buat saya.
Perbanyak nanya itu Baik
Buat yang pernah saya ajar, pasti gak asing juga dengan kalimat-kalimat yang pernah saya lontarkan:

"Nanyalah mumpung saya pengajarmu, karena nanti kalo saya bukan pengajarmu, saya gak punya kewajiban menjawab pertanyaan kamu"

"Tanyalah meskipun pertanyaan itu kamu anggap pertanyaan paling bodoh, saya pasti akan jawab tanpa membuat kamu terlihat bodoh"

"Nanya, jangan gak nanya, rugi kamu saya udah dibayar kampus tapi kamunya pasif"

"Tanya aja hal apapun meskipun itu bukan hal teknis, misalnya kamu nanya tips belajar, nanya tentang pekerjaan, pasti saya jawab"


Lalu, apakah dengan segelintir hal-hal seperti ini banyak mahasiswa saya yang bertanya? To be honest, nggak. Meskipun saya kasih kesempatan untuk bertanya secara daring-pun, nggak banyak juga yang nanya.
Bagi saya, bertanya itu sah-sah aja, dan jangan mengambil kesimpulan bahwa "berarti saya gak boleh nanya dong pak?" ya jangan gitu juga.
Yang penting adalah, tanya sesuatu yang bisa enrich the convo, atau bahkan bisa kamu jadiin pembanding. Boleh tanya misalnya "Menurut bapak materi di  ini, udah cukup belom ya buat saya belajar?" ketimbang "Pak cariin saya materi dong yang bagus yang mana ya". I mean like, you guys coba aja dulu.
Maunya jalan pintas mulu
Sebenernya nggak salah bertanya "Pak gimana caranya cepet jago ya?", tapi disini berarti yang nanya tuh gapaham bahwa proses tiap orang beda. Cara yang saya lakukan belom tentu cocok ke kalian, cara orang lain juga belum tentu cocok ke kalian.
Menurut saya, daripada sibuk mencari gimana caranya biar cepet jago, coba cari cara gimana caranya biar tetep konsisten dan gak bosen, karena gak gampang loh.

Mahasiswa sibuk mencari motivasi, tapi gak sibuk jaga konsistensi. Padahal belajar itu sama aja kaya lagi ngebangun fisik (otot), kita gak perlu cari motivasi, kita perlunya rutin.
Workout seminggu sebanyak lima kali dimana kalian angkat beban dengan variasi latihan yang beda selama satu jam, semakin rutin pasti akan membentuk otot meskipun tiap orang berbeda kecepatannya. Lalu dibarengi dengan kardio, pasti akan membuat otot jantung yang kuat.
Apa hubungannya sama belajar? Sama aja. Latihan coding selama satu jam sebanyak lima kali per-minggu itu pasti akan membentuk pengetahuan yang baik, saran saya buat mahasiswa terutama para maba (semester 1-4) ini penting sebenernya kuatin beberapa hal, nah aktivitas yang kalian bisa lakukan selama satu minggu adalah:

Day - 1 : Belajar dasar pemrograman (sintaks dasar)

Day - 2 : Belajar dasar database (ERD, query dasar)

Day - 3 : Belajar dasar web (HTML)

Day - 4 : Belajar bikin portofolio

Day - 5 : Belajar bikin portofolio


Kalian bisa milih kapan aja harus belajar, nggak harus 5 day in a row, tapi bisa diselang-seling. Misalnya senin-rabu, kamis istirahat, jumat-minggu lanjut lagi. Sehingga kalian nggak perlu burnout. Tapi kalo kalian dikasitau gini masih gak bergerak, ya pada dasarnya masalahnya emang dari kalian aja sih.

Gimana caranya biar gak bosen?

To be honest, saya akan jawab, nggak ada. Bosen itu wajar, tapi berhenti dan menyerah itu bukan pilihan.
Tapi nih tapi, kalo kamu nyari jawaban yang memuaskan hatimu, saya bisa bilang ada beberapa cara:

Buatlah karya, karena dengan membuat karya kamu jadi semangat membuat karya kamu sendiri.

Kerja bareng orang lain, karena dengan kerja bareng orang lain, kamu jadi tau kekuranganmu dan bisa dapetin saran dari orang itu.

Gabung komunitas, karena dengan gabung komunitas kamu jadi punya insight baru.

Kulik hal baru, pindah-pindah untuk nyobain hal baru itu nggak aneh kok, selama kamu masih kepo dan mau nyobain hal baru, keep it go aja.



Belajar = Grinding

Kalo yang biasa main MMORPG, belajar itu sama aja kaya grinding nyari exp, ya emang pasti berulang-ulang terus, mau diapain lagi? Emang gitu prosesnya. Jadi ya saya cuma bisa bilang: tolong nikmati prosesnya.
Perhatiin diri sendiri dari hari pertama belajar, ke minggu kedua, ke minggu ketiga, sampai ke bulan keempat. Pasti, selama belajarnya tekun dan konsisten, perubahan itu pasti ada. Tentunya perubahan ini sifatnya gak bisa pesat ya, karena tiap orang beda-beda loh.
Permasalahannya adalah, mahasiswa tuh pada gak suka grinding. Maunya cepat, cepat dan cepat, tapi gak sadar diri, padahal kemampuan buat nangkep materi pas-pasan, dijelasin dikit aja gak ngerti, dan nyoba sekali aja gak paham.
Buat kalian yang ngerasa kaya gini, kalian jangan sedih, tapi yang kalian harus kalian lakukan ya:

That means you gotta work hard!

Lemme tell you something, kalo kalian ngerasa saya adalah orang yang beruntung, maka saya kasitau banyaknya kegagalan saya:

Saya pernah stuck untuk belajar django dari tahun 2016-2019, setiap awal tahun saya nyoba belajar django dan selalu gagal. Baru berhasil di 2020 sampe akhirnya bisa bikin tutorial di Medium, ini salah satu samplenya.

Saya pernah bikin aplikasi sosmed namanya Tell, pernah gagal API-nya down terus, karena kebodohan saya yang gak paham database dan dunia per-backend-an. Pada tahun 2020 comeback dengan versi yang lebih baik, struktur database yang lebih kuat.

Saya pernah bikin down API di tempat kerjaan saya, karena sok tau akhirnya down, saya diminta tanggung jawab benerin, ya akhirnya saya benerin.

Saya pernah gagal berkali-kali belajar Go waktu nyobain bikin REST API, akhirnya dibantuin orang di Telegram, dan baru bisa.

Saya pernah gagal bikin bot telegram berkali-kali selama ngulik pas awal-awal Telegram mulai tenar, akhirnya sekarang baru mulai paham.

Saya bikin buku coding ala-ala di 2022, tapi rungkad, saya gak pede, bukunya gak rilis. Akhirnya sekarang mulai ngeblog lagi yang lebih serius.


So, kenapa harus malu sama kegagalan? Justru kegagalan ini yang bikin saya mikir bahwa, wah gue tumbuh loh, gue belajar dari pengalaman loh.

Work harder, then smarter
Saya cuma mau bilang, jangan mau dibego-begoin sama orang yang bilang work smarter not harder. Sebelum kalian bisa work smarter, kalian wajib work harder dulu
Karena dengan work harder, kalian jadi paham gimana caranya work smarter. Contoh sederhana, yang biasanya cari file dengan cara manual di VS Code, kalian bisa pake CTRL + P, sehingga nyari file. Kita bisa work smarter kalau kita dikasitahu caranya, atau kalau kita terbiasa. Jadi gak bisa dipukul rata kemampuan work smarter ini, tentunya kalau kita perhatikan orang yang biasa packing barang di gudang pasti akan jauh lebih jago dibanding kamu yang jarang packing. Mereka jago karena terbiasa, jadi paham how to work smarter. Apa kuncinya? Experience does matter.
Saya cuma mau bilang ke temen-temen mahasiswa yang baca ini:

Work harder, after you be a master then you can work smarter




Mahasiswa Bikin Program Malah Ngasal
Muhamad Hudya Ramadhana — Wed, 03 Jan 2024 17:50:25 GMT
Tepok kepala adalah ekspresi paling tepat ketika ngeliat mahasiswa bikin program malah ngasal. Kenapa bisa dibilang ngasal? Karena menurut saya pribadi sebagai pengajar, programnya emang nggak masuk akal.
Contoh, misalnya ada yang bikin aplikasi untuk membandingkan dua barang. Secara logika nih, secara logika aja. Kita sebagai user pasti udah kebayang dong paling nggak kaya begini tampilannya:

Karena jelas, ketika kita mau compare, ya harus kiri dan kanan. Tapi sayangnya, saya beberapa kali menangkap mahasiswa suka "ngasal" bikin program. Ini jelas ya saya kasih tanda kutip, kenapa? Karena mahasiswa berekspektasi bikin programnya, tapi dia bahkan gak pake nalar-nya pas bikin.
Ini hal yang biasa, tapi gak boleh dibiasain, maksudnya gimana? Sebagai developer, kita sering ngerasa "udahlah biar gampang gini aja", wait, gampang menurut anda apakah gampang menurut usernya?
Sayangnya, yang kaya gini jadi habbit. Mahasiswa itu mahasiswa-centric instead of user-centric. Artinya, dia maunya yang gampang menurut dia aja, tapi dia gak mikir, ini tuh sebenernya gak user friendly.

Apakah sepenting itu user-centric?

Untuk jangka pendek emang nggak, tapi jangka panjang, iya. Ini tuh kaya bom bunuh diri.

Imagine, kamu lagi ada tugas besar dari sebuah matkul, kemudian diminta bikin program berbasis web. Dikarenakan kamu pusing, pada akhirnya kamu bikin "ngasal" yang penting jadi, walaupun gak masuk akal secara UI apalagi secara flow. Kemudian saat mempresentasikannya, kamu seolah gak kebingungan. Ya jelas lah kaga kebingungan kan kamu yang buat. Coba tuh suruh temen kamu dari jurusan lain pake itu, kalo dalam 10 menit dia gak bingung harus ngapain, berarti programnya berhasil.
Saya kadang suka gak habis pikir sama mahasiswa kaya gini, ketika kalian membiasakan diri untuk membuat sesuatu yang nggak masuk akal, maka itu akan jadi habbit, dan excuse-excuse yang kalian buat akan terus mendorong kalian untuk yang penting jadi.
Gak sekali dua kali saya kalo misalnya lagi presentasi tugas besar suka nanya ke mahasiswa:
🥸: Emang masuk akal kalo misalnya kamu bikin todo-list, terus kemudian todo-list kamu keliatan di user lain pas mereka abis login?
👨‍🎓: Nggak sih pak.
🥸: Ya kenapa dibuat? Coba kamu balik Point of viewnya, kamu jadi usernya sekarang, gak masuk akal kan? Ngapain membuat sesuatu yang nggak masuk akal?
👨‍🎓: Iya sih pak...
🥸: Kamu kalo pake aplikasi orang yang jelek atau ngelag, kamu katain, kamu sendiri aja bikin aplikasi even gak masuk akal. Itu tuh cerminan, ngaca harusnya dari situ.
Well, terkesan jahat, tapi saya harus sampein fakta kaya gitu. Kalo gak, ya akan terus begitu habbitnya. Ngapain coba habbit kaya begitu dipertahankan? Ngarep pas lulus berubah? Gak juga kali. Justru momen di perkuliahan lah yang harusnya banyak salah, biar pas kerja nanti mikir "ohiya, ini kaga masuk akal, ngapain dibuat gini".
Masa nanti kerja bikin yang ngga masuk akal terus dikerjain dengan alasan "ngga bisa", "ngga ngerti", yaelah, udah bagus kalo gak dipecat sama atasannya. Banyak yang ngga suka sama saya dengan alasan saya terlalu vokal, padahal saya cuma nyampein fakta aja, daripada kamu yang dibacotin atasanmu karena kesalahanmu, mending saya judesin tapi membuat kamu lebih baik, karena tugas saya ya, mendidik.

Gimana cara bikin program yang masuk akal?
Ya mikir aja, sederhana kok. Kita punya akal buat dipake, bukan buat dianggurin. Sebagai anak Gen-Z yang punya kemampuan berpikir lebih cermat karena sumbernya makin banyak, harusnya nggak ada alasan untuk bilang "nggak bisa" atau "nggak paham".
Apa-apa makin gampang, tinggal kita mau apa enggaknya aja. Kalopun memang nggak bisa, ya kan bisa nyoba dulu, mau nanya, bisa nanya siapapun di internet, bayar orang, cari code yang mirip, bahkan nanya ke komunitas. Ya paling cepet sih, minta ajarin temen terus bayar dia pake traktiran di kedai kopi.
Masalahnya adalah mahasiswa pada kaga mau cara yang begini. Maunya gratis, cepat, murah, dan gak bikin pusing. Aneh banget cara mikirnya, ya gak sih? Dimana-mana ada cost yang dibayar, mau bisa sendiri berarti harus berpusing-pusing ngehabisin banyak waktu, mau cepet ya bisa bayar orang tapi costnya bisa jadi ngga murah. Mau murah? Pacarin programmer "yang jago", dijamin murah karena bisa dibantuin 😂.
Observasi, Pikir, Nanya, Coba.
Ini yang harusnya dimiliki sama mahasiswa, observasi, berpikir, bertanya, dan mencoba. Ketika kalian dihadapkan sama satu masalah, coba observasi sebenernya masalah utamanya apaan sih?
Contoh, ke kasus yang pertama, ketika mahasiswa saya bikin page yang compare tapi gak dibuatin compare. Sebenernya masalah utama ketika mau bikin page yang compare tuh apa? Kita bedah dikit:

Gimana cara membuat tampilan yang kebelah dua begitu?

Gimana cara membawa dua buah data agar bisa ditampilin di sisi kiri dan kanan?


Dari satu masalah yang "nggak paham cara buat halaman compare" kita bisa bedah dengan dua solusi kok. Terus gimana lanjutannya? Ya dikerjain lah, masa planga-plongo. Cara ngerjainnya gimana? Ya selesain satu-persatu masalahnya.
Kerjain dulu cara membuat tampilan kebelah dua, misalnya kalau di web kita bisa pake grid dan column. Kita bisa belah dua jadi col-6 dan col-6. Setelah bisa berhasil buat tampilannya, coba buat gimana caranya mengambil data detail dari dua produk yang ingin dicompare, misalnya dengan membuat path URL-nya menjadi websiteku/compare/ .
Kalau kaya gini, selesai kan akhirnya dua masalah? Ya bisa lah, kan diselesain satu persatu. Jadi masalah tuh gak keliatan gede kalau kita pecahin dan diselesain satu per-satu.

Kasus kedua, yang tadi masalah todo-list kenapa keliatan di user lain. Alasan sederhananya kan begini kalau kita bedah:

Gimana cara nampilin data todo tapi filter by user id?

Gimana caranya dapetin user_id abis login? Soalnya kan untuk filter kita butuh user_id.

Gimana caranya set session di android atau web? Soalnya kan untuk dapetin user id abis login, kita butuh simpen itu.


Jawaban pertama, ya kalo pake SQL bisa tambahin Where, tinggal cari caranya gimana buat masukin parameter si ID user di dalam where. Jawaban kedua, ya kan abis login biasanya kita kembaliin data user, bisa diambil kan idnya? Jawaban ketiga, di Android ada shared preference, di web ada session & cookies. Caranya gimana? Di Internet banyak!
Dengan cara ngebedah kaya begini, kita jadi jelas harus ngerjainnya gimana, dan apa dulu yang difokusin. Kebanyakan mahasiswa itu maunya ngeliat masalah itu ya masalah yang besar.
Padahal yang harus mereka lakukan adalah mecah-mecahin masalahnya jadi kecil dengan cara bertanya, terus diselesain satu persatu. Ini yang disebut dengan chopping-mechanism.
Perbanyak Nanya
Kalau kamu gak punya source of truth, maka cari source of truth, terutama pengalaman orang. Jangan mager untuk memvalidasi apakah kamu benar atau salah, karena yang penting itu adalah experience dari orang lain. Mungkin gak semuanya sesuai dengan kamu atau bahkan kebutuhanmu, tapi paling nggak, itu bisa ngebantu kamu memvalidasi apa yang kamu lakukan. Gimana cara nyari source of truth-nya?

Di kampusmu pasti ada senior atau temen kelas yang baik dan jago, jangan ragu temenan sama orang kaya gini. Jangan ragu juga jajanin dia meskipun kopi atau nasi goreng 15 ribuan, mereka pasti seneng bagi waktu mereka yang berharga itu buat ngajarin kamu di cafe/kostan kamu.

Di kampusmu pasti ada UKM atau KSM, jangan ragu memperluas koneksi dan mempertajam ilmu. Di dalam sana pasti ada orang yang paling jago yang bisa kamu tanya.

Di kampusmu, kamu pasti punya temen geng, ajak mereka buat belajar bareng, kalau mereka nolak, pindah sirkel, mereka toxic berarti gak mau kamu maju. Jangan ragu cut-off-in orang-orang yang gak mau kamu maju.

Di internet, kamu pasti ketemu programmer seumuran yang jago, atau bahkan yang lebih tua, jangan ragu nanya, ada beberapa yang sombong, ada juga yang enggak, selama kamu pake manners, mereka pasti accept.

Di internet, kamu pasti ngeliat komunitas online, jangan ragu join dan nanya, kalau kamu diejek, pindah, cari komunitas lain. Jangan kena mental. Kamu gak ada waktu buat ngurusin mental, fokus nyelesain masalah utama kamu dulu.


Alasan yang paling sering dikeluarin mahasiswa adalah malu. Let me tell you ya....

💡
Rasa malu adalah bayaran pertama kali ketika kamu belum mahir ngelakuin sesuatu. Programmer yang jago ketika mulai ngoding di awal dan bertanya pasti malu, Orang yang berotot di Gym ketika mulai dari gendut pasti malu, Orang yang naik kendaraan umum pertama kali karena gak tau pasti malu. Ketika sudah mulai terbiasa, rasa malu itu jadi hilang.



So, ngapain malu?

Udah semester-semester tua, please stop bikin program ngasal
Saya udah eneg banget liatnya, kaya kuliah tuh gak kepake akalnya, akalnya ketinggalan di land of dawn atau rozhok apa gimana? Kalau ada kesempatan, selalu pake buat nanya. Malu nanya tuh bukannya sesat dijalan, bikin kita tambah b*go.

Yaelah, gak semua orang mau jadi programmer kali pak.

I know, tapi untuk yang mimpi-nya jadi programmer, ya dipake lah akalnya. Saya gakpapa kok kamu gak mau jadi programmer, that's your business. Tapi juga jangan ngasal bikin programnya, karena ngasalnya kamu itu menandakan kamu itu ignorant dan egois.
Imagine kalau kamu nanti build a business, karena ketidakmampuan kamu, kamu merugikan customer kamu sendiri dengan alasan "alah susah soalnya di saya". Salah? Enggak. Apakah itu bisa menjamin business kamu berhasil? Belum tentu juga. Intinya kalau kamu mimpi bikin business, tapi maunya ngasal ngerjain sesuatu dan gak user-centric apalagi membuat sesuatu yang gak masuk akal, akan jadi habbit buruk terus.
Even ketika kerja, kamu punya kebiasaan maunya cepet doang dan ngerjain sesuatu yang gak masuk akal, ngerjain sesuatu jadi ngasal aja, yang penting kamu hepi, dan cepat. Orang lain rugi? Ya bodoamat, that's not my business.
Kurang-kurangin deh kaya gitu, gak baik, asli. Cepetan kurang-kurangin sebelum kamu nyesel nanti.



Mahasiswa Ngawur Pake Github
Muhamad Hudya Ramadhana — Tue, 02 Jan 2024 12:20:12 GMT
Selama ngajar sejak 2019, Github udah jadi salah satu tools yang saya kenalkan ke mahasiswa. Alasannya sederhana, selain mempermudah tracking, Github juga membantu mahasiswa menjaga kode mereka agar tidak hilang dengan mudah.
Kenapa menjaga itu penting? Gak sedikit saya denger kasus:
"pak laptop saya dicuri 😭"
"pak laptop saya ketumpahan air 🥺"
"pak harddisk saya corrupt, data pada ilang karena harus di-format😨"
Pertanyaan gue pasti yang keluar cuma satu:
"Datanya udah dibackup ke cloud kah?"
Jawaban pada umumnya udah pasti:
"Sayangnya belom pakk, gimana nih?" (bisa-bisanya nanya gimana nih ke gue atas kesalahan diri sendiri 🙃)
Dannn ya udah pasti ekspresi gue kaya:

First of all, gue ngerasa aneh sama mahasiswa yang nggak punya sense of preventing. If you were the first year of the campus life, ya oke, namanya juga transisi kan ya? But imagine kalo lu udah tahun kedua, ketiga, apalagi keempat pas skripsi.
Gue juga tau, siapa sih yang mau kehilangan laptop? Siapa sih yang mau tiba-tiba laptopnya kena air? Siapa sih yang mau laptopnya corrupt? Jawabannya, gak ada.
Tapi, gue bener-bener heran banget kalo anak yang katanya gen Z yang tidak ada keinginan untuk memanfaatkan fitur cloud yang makin hari makin gampang cara pakenya. Laptop dengan OS windows misalnya, pasti gampang banget, install aja aplikasi cloud sync baik dari one-drive maupun google drive tinggal klik-klik, then bisa langsung otomatis backup, baik keseluruhan maupun data yang kita mau aja.
Pada cerita kali ini, gue pribadi mau jelasin tentang Git yang mana platform yang dipake itu Github, dan kenapa sih masalah-masalah kammen (Common) yang terjadi selama gue ngajar.

GIT bukan buat gaya doang
Saya adalah karakter orang yang mendorong mahasiswa, suka gak suka, kamu pasti saya dorong kalau kamu mahasiswa saya. Dalam artian, dorongan yang baik supaya terbiasa pake git.
Git sendiri gampangnya adalah sebuah tools yang mana bisa membuat version history dari code yang kamu buat dan ubah, misalnya, kamu lagi bikin dokumen apalagi skripsi. Umumnya mahasiswa bakalan bikin kaya gini:

skripsi.docx

skripsi-revisi-jan13.docx

skripsi-revisi-jan31.docx

skripsi-revisi-final.docx

skripsi-revisi-bismillah-gak-lagi.docx


For the sake of jokes, ini lucu pake banget WKWKWK. But for the reality, it sucks, sampah kalo saya bilang. Why tho? Zaman sekarang makin canggih, even google drive aja sudah bisa mengenali version history.

Artinya kalau kamu masih menyimpan dengan cara seperti itu, yang salah itu mindsetmu. Harusnya kamu cukup simpan dengan nama yang sama, then upload ke tools yang membantu kamu manage versi tersebut.
Why? Sederhananya, simplicity. Simplicity does matter. Walaupun sih pasti ada counter dan excuse: Simple buat bapak tidak berarti simple untuk semua orang.
Ya ya, oke, tapi kalo laptopmu hilang, kebakar, meledug, kecebur, kena air se-ember, tanggung aja sendiri ya resikonya. Soalnya poin dari yang saya sampaikan adalah, biasakan backup apalagi dengan version history, supaya memudahkan kamu tau kapan terakhir kamu melakukan perubahan tanpa harus menggunakan nama-nama file yang beda. Kalau kamu tetep suka pake nama yang beda, that's not my problem, yang penting buatlah habbit mem-backup pekerjaan setelah selesai dikerjakan/dilanjutkan, titik.

Github adalah platformnya
Git adalah toolsnya, github adalah platformnya. Sama kaya palu adalah alatnya, dan kresbow adalah brand pembuatnya, jadi Github dan Git itu bukan hal yang sama.
Masalahnya adalah, banyak mahasiswa yang enggan menggunakan Github untuk nyimpen kodenya, bahkan tidak mau belajar cara menggunakannya.
Nanti giliran magang atau kerjaan yang mengharuskan pake git, baru grasak-grusuk, mental macam apa itu? 🥱
Padahal Git dan Github itu simple, ketika ngebuat repository aja langsung diajarin sama github itu sendiri.

Apa kelemahan yang sebenarnya terjadi pada mahasiswa? Yup, malas membaca.
Sejak saya kuliah dan mengenal github aja, saya udah tau instruksinya ketika Github bilang "or create a new repository on the command line". Well, gak sesulit itu untuk memahami teks sependek itu, even google translate juga bisa bantu kita. Kita hanya perlu memasukkan step by step dari apa yang udah ditulis sama Github. Even di kelas pun saya bilang "masukkan step by step ya apa yang ditulis disini".
As simple as that, kalau mau dicoba pasti bisa, apalagi kalau mau meluangkan waktu 1 jam buat nyobain. Apabila kita jabarin step-by-stepnya begini:

echo "# repo-belajar" >> README.md
  Ini tuh kita nulis teks repo-belajar ke file namanya README.md

git init
  Ini perintah untuk membuat inisiasi repository git di projek kamu, kalau udah ada ya pasti error, dan gak perlu khawatir, namanya juga udah ada.

git add README.md
  Ini tuh sebenernya nambahin file namanya readme.md yang berformat markdown. Format ini yang dipake github untuk nampilin teks.

git commit -m "First commit"
  Artinya kita ngebuat pesan commit pertama dari file readme.md yang tadi kita buat dan kita tambahin sebelum dipush

git branch -M main
  Artinya kita fokus ke branch namanya main. Kalau gak ada, dibuatin.

git remote add origin https://github.com/perogeremmer/repo-belajar.git
  Ini kita nambahin url yang punya alias namanya origin dengan URL yang ditulis disana. Inget karena ini alias, jadi bisa aja diganti yang lain, misalnya bejo, hudya, mantan.

git push -u origin main
  Artinya, kita upload kodenya ke github dengan pake branch saat ini yang ada di local kita ke url alias yang kita tadi kasih nama origin dan branch yang dituju adalah main.


Gue tau, ini ribet banget mungkin ya buat mahasiswa, makanya pas ngajar, gue sampein kalian cuma butuh sekian baris ketika pertama kali mau nambahin kode, yaitu:
git init
git add .
git commit -m "First commit"
git remote add origin 
git push origin master

Kenapa gue pake master dan bukan main? Karena anak lama (cailah sombong bet) biasanya dikenalinnya master sama github, bukan main. Baru-baru ini aja github maunya pake main.
As simple as that kalian udah bisa ngepush kode ke github dan bagian git add . artinya adalah kalian menambahkan seluruh kode yang ada di repository kalian.

Pak ini gimana sih caranya? Saya masih bingung ngetik ini dimana

Gampangnya, ini tuh sebenernya perintah yang kita ketikkan di CMD (Command Line) atau Powershell kalau di Windows. Kalau kalian sudah install git, kalian juga bisa cari aplikasi namanya Git Bash, bentukannya begini contohnya:

Nah, belajarlah untuk menggunakan perintah sederhana command line seperti:

cd namadirectory untuk berpindah ke directory yang dituju

mkdir namadirectory untuk membuat folder baru


Biasanya, kalau kita pake di windows dan kalian berada di C, tinggal ketik aja misalnya:
C:\xampp\htdocs

Langsung tuh pindah ke directory htdocs, pindah ke folder kalian, misalnya nama projeknya inventory. Yaudah tinggal ketik di terminal kalian cd inventory . Udah deh kalian masuk ke folder inventory di dalam htdocs.
Hal kaya gini gakbisa belajar sekali doang, harus nyoba berkali-kali. Sifat jelek mahasiswa adalah ngerasa mampu nyoba sekali doang, inget brow elo tuh bukan einstein. Even einstein aja pasti nyobain berkali-kali.

💡
Ohiya, kalau kalian pake Visual Studio Code atau kalian pake Android Studio, tinggal klik terminal aja, langsung dibukain tuh directory projek kalian tanpa perlu ribet-ribet cara di atas.



Ngupdate code
Nah ketika kalian udah berhasil upload ke git pertama kali, kalian pasti ada perubahan dong, karena progressnya kalian kerjain, kecuali kalian mahasiswa mageran, lol.
Sekarang lakuin hal yang sama, buka terminal kalian di git bash atau pake VSCode/Android Studio terus ketikkan aja step-by-step tiga perintah di bawah ini:
git add .
git commit -m "pesan kalian, misalnya: Update code in User"
git push origin 


💡
inget, ganti  dengan branch kalian, misalnya master, atau main.


Gampang kan? Gampang banget, kalo masih gak bisa juga bukan kamunya bego, kamunya kaga mau nyoba berkali-kali.

Github itu buat kolaborasi
Yap, sesuai judulnya, jelas bahwa github itu buat kolaborasi, artinya akan lebih mantap kalau kita pake buat bareng-bareng misalnya ngerjain tugas kelompok kodingan. Ada beberapa alasan:

Transparansi

Fokus membagi pekerjaan

Sinkronisasi kerjaan


Kebiasaan mahasiswa adalah suka bagiin kerjaannya lewat email/chat, padahal itu gak baik sama sekali. Selain rentan hilang atau corrupt, itu akan susah trackingnya, kode mana yang benar, kapan itu diganti dan hal lainnya. Nah github ada tuh buat mencegah itu.
Transparansi
Bagi saya, github itu wajib dipake buat mahasiswa saya, alasannya mudah, transparansi, saya paling gak suka kalo ada mahasiswa benalu yang numpang nama di kerjaan kelompok. Dengan adanya github, gak bisa tuh mahasiswa pura-pura ngerjain, cukup lihat apa yang dicommit sama username mahasiswa tersebut, dan dosen bisa lihat secara gamblang dia ngapain aja.
Solusi bagus untuk penumpang gelap di kelompok, bukan? 🤭🤫
Fokus membagi pekerjaan
Karena github ada fitur branch atau cabang, kamu bisa ngerjain di dua cabang yang beda, misalnya:
Si A ngerjain di branch fitur-x
Si B ngerjain di branch fitur-y
Ketika si A sama si B mau gabungin semuanya, tinggal gabungin antara cabang fitur-x dan fitur-y ke master. Viola, kalian bisa fokus tanpa terganggu kerjaan satu sama lain.
Sinkronisasi Kerjaan
Kalau A sudah selesai ngerjain kerjaan, si B bisa langsung ngambil kode A dengan cara git pull, tujuannya ya jelas, biar gak ada tunggu-tungguan.

Gimana cara kolaborasi dua orang?
Branch yang Sama
Gampil banget, perhatiin nih step-by-step kasusnya gini:

Hudya membuat repository namanya belajar-php, Andi merupakan teman satu kelompok Hudya.

Andi di-invite oleh Hudya, menunya ada di tab settings - collaborators.

Andi membuka email dan menekan konfirmasi, lalu join ke projek belajar-php buatan Hudya.

Hudya melakukan push kode pertamanya, ke branch master.

Andi melakukan clone terhadap repository hudya, karena andi belom pernah punya di folder localnya.

Ketika hudya selesai mengerjakan, hudya melakukan push terhadap branchnya: git push origin master.

Andi mau melanjutkan kodenya, andi melakukan perintah git pull origin master terlebih dahulu agar mendapatkan kode yang sudah di-push oleh Hudya.

Andi mengerjakan kodenya dan push terhadap branchnya: git push origin master.
  
  💡
  Biasakan untuk menjalankan perintah git pull origin master apabila mau mengerjakan maupun sesaat sebelum melakukan push.
  




Branch yang berbeda
Gampil banget, perhatiin nih step-by-step kasusnya gini:

Hudya membuat repository namanya belajar-php, Andi merupakan teman satu kelompok Hudya.

Andi di-invite oleh Hudya, menunya ada di tab settings - collaborators.

Andi membuka email dan menekan konfirmasi, lalu join ke projek belajar-php buatan Hudya.

Hudya melakukan push kode pertamanya, ke branch master.

Andi melakukan clone terhadap repository hudya, karena andi belom pernah punya di folder localnya.

Hudya membuat branch baru, namanya fitur-x yang diturunkan dari branch master.

Andi membuat branch baru, namanya fitur-y yang diturunkan dari branch master.

Ketika hudya selesai mengerjakan, hudya melakukan push terhadap branchnya: git push origin fitur-x.

Sama juga dengan Andi, andi melakukan push terhadap branchnya: git push origin fitur-y .

Setelah Andi dan Hudya mengerjakan pada masing-masing branch, Hudya pindah ke branch master lalu memasukkan perintah berikut pada terminal:
  git checkout master
  git fetch --all      
  git merge fitur-x
  git merge fitur-y
  git push origin master

  Explanation

git checkout master
  Pindah ke branch master

git fetch --all
  Mengecek perubahan dari semua branch, harus dilakukan supaya dapat perubahan terbaru yang dikerjakan teman kita

git merge fitur-x
  Ini perintah untuk ngegabungin kode dari branch fitur-x

git merge fitur-y
  Ini perintah untuk ngegabungin kode dari branch fitur-y

git push origin master
  Ini perintah untuk upload kode yang sudah digabung ke branch master



Viola, Andi dan Hudya sudah selesai mengerjakan pekerjaan bersama berdua.



Tapi punya saya conflict pak, gimana?
Sederhananya, ada beberapa kemungkinan:

Kamu gak pisah branch seperti yang saya tulis di atas.

Kamu gak pull sebelum mengerjakan kode lanjut kamu, misal Hudya dan Andi sama-sama mengerjakan kode di branch master, setelah Hudya melakukan push, Andi tidak melakukan git pull sebelum melanjutkan pekerjaannya. Hal ini dikarenakan versi commit andi tertinggal satu versi karena dicommit oleh Hudya.

Kamu dan temanmu menyenggol file dan baris yang bertubrukan, misalnya Hudya dan Andi sama-sama melakukan edit terhadap file User.php, andi mengganti baris 10-20, Hudya mengganti baris 15-18. Ketika Andi mencoba melakukan git pull, maka terjadi conflict karena ada dua versi yang bertubrukan baris kodenya. Solusinya? Rapihkan manual 😁


Udahlah sekian aja keresahan saya, nantinya saya ajarin cara kolaborasi dengan sistem branching yang lebih mantap ya, c ya.

Breakpoint prefix	Minimum width	CSS
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`