├── .github └── FUNDING.yml ├── LICENSE ├── assets ├── hudya3.svg ├── hudya4.svg └── saweria.png ├── insight ├── campus │ ├── assets │ │ └── baaf1ba4-9abb-4274-89ca-7713400c14af.png │ └── cara-survive-sebagai-mahasiswa-it.md ├── career │ ├── assets │ │ ├── cb5486f8-521d-4fb5-b6a1-db315c26156a.png │ │ ├── hal-penting-belajar-laravel │ │ │ ├── 1d7b2dc4-750e-4d48-baab-214f00b0e832.png │ │ │ ├── 2023-03-04-12-51-02.png │ │ │ ├── 2023-03-04-12-54-30.png │ │ │ ├── 2023-03-04-13-02-49.png │ │ │ ├── 2023-03-04-13-08-24.png │ │ │ ├── 2023-03-04-13-11-44.png │ │ │ ├── 2023-03-04-13-15-31.png │ │ │ ├── 2023-03-04-13-19-31.png │ │ │ ├── 2023-03-04-13-23-15.png │ │ │ ├── 2023-03-04-13-29-14.png │ │ │ └── 2023-03-04-13-32-16.png │ │ └── tips-belajar-database-relasi │ │ │ ├── 2023-03-22-09-57-57.png │ │ │ ├── 2023-03-22-10-10-06.png │ │ │ ├── 2023-03-22-10-16-53.png │ │ │ ├── 2023-03-22-10-22-00.png │ │ │ ├── 2023-03-22-10-35-33.png │ │ │ ├── 2023-03-22-10-39-13.png │ │ │ ├── 2023-03-22-10-42-05.png │ │ │ └── 9de64520-aef1-483d-a637-e51375e232f5.png │ ├── emang-backend-tuh-ngapain.md │ ├── hal-penting-ketika-belajar-laravel.md │ └── tips-belajar-database-relasional.md └── introduction.md ├── notebook └── nihongo │ └── chapter-1 │ ├── kotoba.md │ └── material.md ├── readme.MD ├── study-plan ├── college-student-introduction-to-web.md └── college-student-introduction.md ├── tech-knowledge ├── code │ └── leetcode │ │ ├── array-or-hashing │ │ ├── 1-two-sum.md │ │ ├── 217-contains-duplicate.md │ │ ├── 242-valid-anagram.md │ │ └── assets │ │ │ ├── 1-two-sum │ │ │ ├── 0e4bb40b-2c15-4112-8dca-53efd45c02c9.png │ │ │ └── c3a697da-0eb4-430e-9ddd-c2eb7c005a6a.png │ │ │ ├── 217-contains-duplicate │ │ │ ├── a6399726-8203-48b4-8deb-517880d0279e.png │ │ │ └── b954b482-d0c8-493f-89a7-10c8ee22051a.png │ │ │ └── 242-valid-anagram │ │ │ ├── 0873ba29-a99f-4a85-a0c9-add32786dfff.png │ │ │ └── 88b164f0-9bb1-4315-bfd1-f489be7771ff.png │ │ ├── sliding-window │ │ ├── 121-best-time-to-buy-and-sell-stock.md │ │ └── assets │ │ │ └── 121-best-time-to-buy-and-sell-stock │ │ │ ├── header.png │ │ │ └── result.png │ │ ├── stack │ │ ├── 20-valid-parantheses.md │ │ └── assets │ │ │ └── 20-valid-parantheses │ │ │ ├── header.png │ │ │ └── result.png │ │ └── trees │ │ ├── 100-same-tree.md │ │ ├── 226-invert-binary-tree.md │ │ └── assets │ │ ├── 100-same-tree │ │ ├── example-1.png │ │ ├── example-2.png │ │ ├── example-3.png │ │ ├── header.png │ │ └── result.png │ │ └── 226-invert-binary-tree │ │ ├── 0fc88ae9-3988-4ad8-a2e4-715e6fae9e39.png │ │ ├── example-1.png │ │ ├── example-2.png │ │ └── result.png └── database │ ├── apa-aja-relasi-di-database-relasi.md │ ├── assets │ ├── apa-aja-relasi-di-database-relasi │ │ └── 347eed08-c077-49c6-9a5a-568aca4e73d8.png │ ├── belajar-denormalisasi-musuhnya-normalisasi │ │ └── e7915020-41c3-44e8-8f37-93e5d0b7a462.png │ ├── cara-kerja-pool-connection-database │ │ └── 07009633-da19-4846-b882-d1c655e8a2cf.png │ ├── d114be61-bba7-4154-a31d-5810a2ed1bc0.png │ ├── kenalan-sama-kolom-json │ │ ├── 73761957-91d7-45a6-a9ce-a54f5aa48ccb.png │ │ └── 7613eca4-6263-45c6-8487-3ed8a7182e50.png │ ├── memahami-normalisasi-database-relasi │ │ ├── 1nf.png │ │ ├── 2nf.png │ │ ├── 3nf-1.png │ │ ├── 3nf-2.png │ │ ├── 6d51d6f8-e5e9-4c53-8ff9-8fe607199c79.png │ │ ├── transaksi-tokped-detail.png │ │ └── transaksi-tokped.png │ ├── soft-delete-teknik-ngilang-tanpa-ngapus │ │ └── 8d53e324-8b29-41ed-8917-5b74e088a6c8.png │ ├── tabel-logs-penyelamat-backend-developer │ │ ├── 2023-04-01-13-50-04.png │ │ ├── 60de3bb8-f601-4ea1-9720-702e54f8fc0c.png │ │ └── d675d67f-1612-4c67-b305-53c31ca05f76.png │ └── transactions-teknik-menjaga-proses-yang-gagal │ │ └── b13cf1c5-64ae-4a99-92cf-1e533bf5907f.png │ ├── belajar-denormalisasi-musuhnya-normalisasi.md │ ├── cara-kerja-pool-connection-database.md │ ├── cara-pake-redis.md │ ├── kenalan-sama-kolom-json.md │ ├── memahami-normalisasi-database-relasi.md │ ├── soft-delete-teknik-ngilang-tanpa-ngapus.md │ ├── tabel-logs-penyelamat-backend-developer.md │ └── transactions-teknik-menjaga-proses-yang-gagal.md └── tutorial ├── series ├── android │ └── building-your-first-app │ │ ├── 1-introduction.md │ │ ├── 10-belajar-recycler-view.md │ │ ├── 11-upload-gambar-dengan-base64.md │ │ ├── 2-intent-berpindah-layar.md │ │ ├── 3-session-dengan-shared-preference.md │ │ ├── 4-belajar-debug.md │ │ ├── 5-belajar-list-view.md │ │ ├── 6-integrasi-dengan-firebase.md │ │ ├── 7-menambahkan-dan-melihat-todo.md │ │ ├── 8-menghapus-dan-mengubah-data.md │ │ ├── 9-membuat-autentikasi.md │ │ ├── assets │ │ ├── 1-introduction │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ ├── 9.png │ │ │ └── challenge-1.png │ │ ├── 10-belajar-recycler-view │ │ │ ├── 1.gif │ │ │ ├── image-1.png │ │ │ ├── image.png │ │ │ └── sample.png │ │ ├── 11-upload-gambar-dengan-base64 │ │ │ ├── 1.gif │ │ │ ├── image-1.png │ │ │ └── image.png │ │ ├── 2-intent-berpindah-layar │ │ │ ├── 1.gif │ │ │ ├── 1.png │ │ │ ├── 2.gif │ │ │ ├── 2.png │ │ │ └── 3.gif │ │ ├── 3-session-dengan-shared-preference │ │ │ ├── 1.gif │ │ │ ├── 1.png │ │ │ ├── 2.gif │ │ │ └── 3.gif │ │ ├── 4-belajar-debug │ │ │ ├── 1.gif │ │ │ ├── 1.png │ │ │ ├── 2.gif │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ └── 6.png │ │ ├── 5-belajar-list-view │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── Peek_2022-10-06_02-01.gif │ │ │ ├── Peek_2022-10-06_02-04.gif │ │ │ ├── Peek_2022-10-06_02-16.gif │ │ │ ├── Peek_2022-10-06_02-23.gif │ │ │ ├── Peek_2022-10-06_22-58.gif │ │ │ └── todo-icon.png │ │ ├── 6-integrasi-dengan-firebase │ │ │ ├── 1.gif │ │ │ ├── 1.png │ │ │ ├── 2.gif │ │ │ ├── 2.png │ │ │ ├── 3.gif │ │ │ ├── 3.png │ │ │ ├── 4.gif │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ └── 8.png │ │ ├── 7-menambahkan-dan-melihat-todo │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ └── challenge-1.gif │ │ ├── 8-menghapus-dan-mengubah-data │ │ │ ├── 1.gif │ │ │ └── 2.gif │ │ └── 9-membuat-autentikasi │ │ │ ├── 1.gif │ │ │ ├── 1.png │ │ │ └── 2.png │ │ ├── challenge │ │ ├── 1-introduction.md │ │ ├── 2-intent-berpindah-layar.md │ │ ├── 3-session-dengan-shared-preference.md │ │ ├── 5-belajar-list-view.md │ │ └── 7-menambahkan-dan-melihat-todo.md │ │ └── high-order-function.md ├── data-structure │ └── sorting │ │ └── binary-search-tree.md ├── devops │ └── salt │ │ └── 1-introduction.md ├── mongodb-essential │ ├── 1-introduction.md │ ├── 10-backup-and-restore.md │ ├── 2-servers-and-clients.md │ ├── 3-installation.md │ ├── 4-document-and-data-types.md │ ├── 5-querying-documents.md │ ├── 6-aggregation.md │ ├── 7-building-todo-list-with-js.md │ ├── 8-performance-indexing.md │ ├── 9-replication.md │ └── assets │ │ ├── 10-backup-and-restore │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ └── 8.png │ │ ├── 3-installation │ │ ├── 1.png │ │ ├── Peek 2025-01-16 20-49.gif │ │ ├── Peek 2025-01-16 21-57.gif │ │ ├── Peek 2025-01-16 22-58.gif │ │ ├── image-1.png │ │ ├── image-10.png │ │ ├── image-11.png │ │ ├── image-2.png │ │ ├── image-3.png │ │ ├── image-4.png │ │ ├── image-5.png │ │ ├── image-6.png │ │ ├── image-7.png │ │ ├── image-8.png │ │ ├── image-9.png │ │ ├── image.png │ │ ├── network-access.png │ │ ├── network-list-2.png │ │ └── network-list.png │ │ ├── 7-building-todo-list-with-js │ │ ├── 1.gif │ │ ├── 1.png │ │ └── 2.gif │ │ ├── 8-performance-indexing │ │ └── 1.gif │ │ └── 9-replication │ │ ├── 1.png │ │ └── 2.png ├── playwright-with-node-js │ ├── 1-install-playwright.md │ ├── 2-membuat-skenario.md │ ├── assets │ │ ├── 1.gif │ │ ├── 1.png │ │ ├── 2.gif │ │ ├── 2.png │ │ ├── 3.gif │ │ └── 4.gif │ └── readme.md ├── python-programming │ ├── assets │ │ ├── 6eb0b1e6-4ebd-47ae-9a48-76dbeec9704e.png │ │ └── 7b0d187c-b125-4e35-94ac-6ee81c33e1fa.png │ └── oop │ │ ├── 1-kenalan-sama-oop.md │ │ └── 2-latihan-oop-part-1.md ├── rust │ ├── fundamental │ │ └── 1-introduction.md │ └── rocket │ │ └── 1-belajar-framework-rocket.md ├── web-with-adonis │ ├── 1-introduction.md │ ├── 2-routing.md │ ├── 3-templating.md │ ├── 4-create-read-update-delete.md │ └── assets │ │ ├── 1.gif │ │ ├── 1.png │ │ ├── 2.gif │ │ ├── 2.png │ │ ├── 3.gif │ │ ├── 3.png │ │ ├── 4.gif │ │ ├── 4.png │ │ ├── 5.gif │ │ └── 5.png ├── web-with-html │ ├── basic-html │ │ ├── 1-introduction.md │ │ ├── 2-the-basic.md │ │ ├── 3-intro-to-css.md │ │ ├── 4-responsive-web.md │ │ ├── 5-intro-to-javascript.md │ │ ├── answer │ │ │ └── challenge-task-3.html │ │ ├── assets │ │ │ ├── 2023-08-24-17-47-42.png │ │ │ ├── 2023-08-24-17-49-45.png │ │ │ ├── 2023-08-24-17-51-14.png │ │ │ ├── 2023-08-24-17-53-03.png │ │ │ ├── 2023-08-24-17-55-55.png │ │ │ ├── 2023-08-24-17-56-40.png │ │ │ ├── 2023-08-24-17-57-03.png │ │ │ ├── 2023-08-24-17-57-37.png │ │ │ ├── 2023-08-24-17-58-03.png │ │ │ ├── 2023-08-24-18-01-00.png │ │ │ ├── 2023-08-24-18-03-56.png │ │ │ ├── 2023-08-24-18-05-45.png │ │ │ ├── 2023-08-24-18-06-41.png │ │ │ ├── 2023-08-24-18-07-11.png │ │ │ ├── 2023-08-24-18-08-16.png │ │ │ └── 5948abfc0e2df5.02876591.gif │ │ └── readme.md │ └── learn-bootstrap │ │ ├── 1-introduction-to-bootstrap.md │ │ ├── 2-introduction-to-layout.md │ │ ├── 3-introduction-to-components.md │ │ ├── 4-introduction-to-table.md │ │ ├── 5-create-form-in-bootstrap.md │ │ ├── 6-create-personal-website.md │ │ ├── assets │ │ ├── 1-introduction-to-bootstrap │ │ │ ├── 1.png │ │ │ └── 2.png │ │ ├── 2-introduction-to-layout │ │ │ ├── simplescreenrecorder-2021-08-22_06.27.10.gif │ │ │ └── simplescreenrecorder-2021-08-29_14.23.59.gif │ │ ├── 3-introduction-to-components │ │ │ ├── 1.png │ │ │ └── 2.png │ │ ├── 4-introduction-to-table │ │ │ ├── 1.png │ │ │ └── 2.png │ │ └── 6-create-personal-website │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── simplescreenrecorder-2021-09-02_23.38.37.gif │ │ └── readme.md └── web-with-php-native │ ├── 1-introduction.md │ ├── 2-templating.md │ ├── 3-connection-read-create.md │ ├── 4-update-and-delete.md │ ├── 5-login-and-session.md │ ├── 6-menampilkan-data-pada-select.md │ ├── 7-upload-file-dan-validation.md │ └── assets │ ├── 1-introduction │ ├── 1.png │ └── 2.png │ ├── 2-templating │ └── 1.png │ ├── 3-connection-read-create │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ └── 5.png │ ├── 4-update-and-delete │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ └── 6.png │ ├── 5-login-and-session │ ├── 1.png │ └── 2.png │ └── 6-menampilkan-data-pada-select │ ├── image-1.png │ └── image.png └── single └── database ├── 1-database-notes.md ├── assets ├── 1-database-notes │ └── f9734c59-01d3-48ba-8f06-5ff99aba4a2f.png ├── belajar-dan-install-grafana-local │ ├── dashboard-1.png │ ├── dashboard-2.png │ ├── dashboard-3.png │ ├── dashboard-4.png │ ├── dashboard-result-1.png │ ├── dashboard-result.png │ ├── db-connection-success.png │ ├── db-connection.png │ ├── db-new-data-1.png │ ├── db-new-data-2.png │ ├── db-new-data-3.png │ ├── db-new-data.png │ ├── header.png │ ├── prometheus-connection.png │ └── sample.png └── belajar-dan-install-percona │ ├── header.png │ ├── home-tour.png │ ├── home.png │ ├── login-page.png │ ├── query-analytics.png │ ├── query-list-insert.png │ ├── query-list.png │ ├── result.png │ └── sample.png ├── belajar-dan-install-grafana-local.md ├── belajar-dan-install-percona.md └── image.png /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | # patreon: # Replace with a single Patreon username 5 | # open_collective: # Replace with a single Open Collective username 6 | # ko_fi: # Replace with a single Ko-fi username 7 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | # liberapay: # Replace with a single Liberapay username 10 | # issuehunt: # Replace with a single IssueHunt username 11 | # otechie: # Replace with a single Otechie username 12 | # lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | custom: ["https://saweria.co/perogeremmer", "https://mayar.gg/perogeremmer"] 15 | -------------------------------------------------------------------------------- /assets/hudya3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/hudya4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/saweria.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/assets/saweria.png -------------------------------------------------------------------------------- /insight/campus/assets/baaf1ba4-9abb-4274-89ca-7713400c14af.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/campus/assets/baaf1ba4-9abb-4274-89ca-7713400c14af.png -------------------------------------------------------------------------------- /insight/career/assets/cb5486f8-521d-4fb5-b6a1-db315c26156a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/cb5486f8-521d-4fb5-b6a1-db315c26156a.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/1d7b2dc4-750e-4d48-baab-214f00b0e832.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/1d7b2dc4-750e-4d48-baab-214f00b0e832.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-12-51-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-12-51-02.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-12-54-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-12-54-30.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-02-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-02-49.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-08-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-08-24.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-11-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-11-44.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-15-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-15-31.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-19-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-19-31.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-23-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-23-15.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-29-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-29-14.png -------------------------------------------------------------------------------- /insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-32-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/hal-penting-belajar-laravel/2023-03-04-13-32-16.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-09-57-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-09-57-57.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-10-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-10-06.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-16-53.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-16-53.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-22-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-22-00.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-35-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-35-33.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-39-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-39-13.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-42-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/2023-03-22-10-42-05.png -------------------------------------------------------------------------------- /insight/career/assets/tips-belajar-database-relasi/9de64520-aef1-483d-a637-e51375e232f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/insight/career/assets/tips-belajar-database-relasi/9de64520-aef1-483d-a637-e51375e232f5.png -------------------------------------------------------------------------------- /insight/introduction.md: -------------------------------------------------------------------------------- 1 | # Curhat Section 2 | 3 | Isinya merupakan curhatan-curhatan yang ada dan bisa ngeboost lo untuk mahasiswa ataupun menambahkan insight untuk lo yang lagi switching career ke backend. 4 | 5 | Mungkin ada banyak kalimat yang nyentil atau agak songong, tapi ya inilah saya, kalo gak suka bisa angkat kaki. Saya akan sampaikan meskipun itu kamu gak suka atau gak nyaman kamu baca, tapi still, **fact is a fact**. 6 | 7 | Alih-alih nggak suka dengan faktanya, lebih baik kita sama-sama belajar nerima fakta, karena saya juga terus berusaha nerima fakta tanpa ngedumel terhadap fakta tersebut. -------------------------------------------------------------------------------- /notebook/nihongo/chapter-1/kotoba.md: -------------------------------------------------------------------------------- 1 | # Kotoba - Chapter 1 2 | 3 | - わたし (watashi): Saya 4 | - あなた (anata): Anda 5 | - あのひと (anohito): Orang itu 6 | - あのかた (anokata): Beliau (Formal) 7 | - ~さん (san): Saudara / Bapak / Ibu Akhiran untuk mengekspresikan kesopanan di belakang nama orang 8 | - ~ちゃん (chan): Panggilan untuk anak laki-laki dan perempuan yang lebih muda 9 | - じん (jin): Orang ~ (Akhiran untuk menyatakan warga negara) 10 | - せんせい (sensei): Guru / Dosen (tidak dipakai untuk menyebutkan pekerjaan sendiri) 11 | - きよし (kiyoshi): Guru / Dosen 12 | - がくせい (gakusei): Mahasiswa 13 | - かいしゃいん (kaishain): Karyawan perusahaan 14 | - しゃいん (shain): Penyebutan karyawan perusahaan yang biasanya digunakan untuk dibarengi dengan nama perusahaan, misalnya IMC の しゃいん (Karyawan perusahaan IMC) 15 | - きんこういん (kinkouin): Pegawai bank 16 | - いしゃ (isha): Dokter 17 | - けんきょうしゃ (kenkyousha): Peneliti 18 | - だいがく (daigaku): Universitas 19 | - びょういん (byouin): Rumah sakit 20 | - だれ （どなた）(dare (donata)): Siapa (donata adalah bentuk formal) 21 | - なんさい （おいくつ）(nansai (oikutsu)): Umur berapa (oikutsu adalah bentuk formal) 22 | - はい (hai): Ya 23 | - いいえ (iie): Tidak / bukan 24 | - おなまえは (onamaewa): Siapa namanya? 25 | - はじみまして (hajimi mashite): Perkenalkan (ucapan salam waktu berkenalan) 26 | - こちらは （。。。） さん-です (kochirawa .... san-desu): Ini saudara .... -------------------------------------------------------------------------------- /notebook/nihongo/chapter-1/material.md: -------------------------------------------------------------------------------- 1 | # Kata benda は (ha) dan Kata benda です (desu) 2 | 3 | ## Partikel は (ha) 4 | 5 | Partikel は (ha) digunakan untuk menunjukkan bahwa kata pemilik subjeknya. 6 | 7 | Contoh: 8 | 9 | - わたし**は** フデャ です (watashi**wa** fudya desu) 10 | - Nama saya adalah Hudya 11 | 12 | > [!NOTE] 13 | > は (Ha) dibaca wa pada kalimat, tapi tetap dibaca ha pada kata tunggal 14 | 15 | ## Partikel です (desu) 16 | 17 | Kata benda yang diikuti です (desu) menjadi predikat. Menyatakan kepastian dalam kalimat. 18 | 19 | Contoh: 20 | 21 | - わたしは きんこういん **です** (watashiwa kinkouin **desu**) 22 | - Saya adalah pegawai bank 23 | - フデャさんは せんせい **です** (fudya sanwa sensei **desu**) 24 | - Saudara Hudya adalah seorang dosen 25 | 26 | # Kata benda は (Ha) dan Kata benda じゃ（では）ありません (ja (dewa) arimasen) 27 | 28 | Kata じゃ (ja) merupakan bentuk negatif dari です (desu). 29 | 30 | Contoh: 31 | 32 | - わたしは きよし **じゃ ありません** (watashiwa kiyoshi **ja arimasen**) 33 | - Saya bukan seorang dosen 34 | - フデャさんは せんせい **では ありません** (fudyasanwa sensei **dewa arimasen**) 35 | - Saudara Hudya bukan seorang dosen 36 | 37 | # Kata benda は (Ha) dan Kata benda ですか (desuka) 38 | 39 | Kata か (ka) menunjukkan kalimat tanya. 40 | 41 | Contoh: 42 | 43 | - フデャさんは がくせい **ですか。**(fudyasanwa gakusei **desuka**) 44 | - Apakah Saudara Hudya adalah seorang mahasiswa? 45 | - いいえ、 がくせい じゃ ありません (iie, gakusei ja arimasen) 46 | - Bukan, dia bukan mahasiswa. 47 | 48 | Contoh: 49 | 50 | - フデャさんは せんせい **ですか。**(fudyasanwa sensei **desuka**) 51 | - Apakah Saudara Hudya adalah seorang dosen? 52 | - はい、 せんせい です (hai, sensei desu) 53 | - Iya, dia seorang dosen. 54 | 55 | # Kata benda も (mo) 56 | 57 | Kata も (mo) digunakan untuk menyatakan apakah kalimat pertama dianggap sama dengan kalimat berikutnya. 58 | 59 | Contoh: 60 | 61 | - フデャさんは せんせい です。バグスさんも せんせい です。 62 | - (fudya sanwa sensei desu. bagusu sanmo sensei desu) 63 | - Saudara Hudya adalah dosen, Saudara Bagus juga seorang dosen. 64 | 65 | # Kata benda の (no) 66 | 67 | Apabila kata benda pertama di depan menerangkan kepemilikan dari kata benda dua dibelakangnya, maka kedua kata tersebut disambungkan dengan の (no). 68 | 69 | Contoh: 70 | 71 | - フデャさんは IMC の しゃいんです 72 | - (fudya sanwa IMC no shain desu) 73 | - Saudara Hudya adalah pegawai perusahaan IMC 74 | -------------------------------------------------------------------------------- /readme.MD: -------------------------------------------------------------------------------- 1 | [![Twitter][twitter-shield]][twitter-url] 2 | 3 |
4 | 5 | 6 |
7 |
8 | 9 | Logo 10 | 11 | 12 |

Belajar Backend bareng @perogeremmer

13 | 14 |

15 | 16 |

17 | 18 |

19 | Temukan sumber pembelajaran backend disini, gak lengkap, tapi saya coba lengkapin. Jadwal nulis, seminggu sekali. 20 |
21 |
22 | Insight Seputar Kampus 🎓 23 | · 24 | Karir di Backend ⌨️ 25 | · 26 | Tutorial Series 📚 27 |

28 |
29 | 30 | 31 | ## Tentang Blog 32 | 33 | Jujur aja saya bingung, saya udah punya medium, saya punya website pribadi, tapi saya ngerasa gak nyaman untuk menulis, saya galau, ini curhatan, dan ini serius. 34 | 35 | Setelah saya berpikir dan bertapa 7 hari 7 malam tanpa henti, menatap bintang-bintang, akhirnya saya ngerasa ini adalah tempat terakhir saya berlabuh untuk menulis. 36 | 37 | Mungkin kesannya aneh nulis di Github, tapi saya rasa ini hal yang paling sederhana buat saya, selain saya gak butuh ngehosting dan ngedevelop website sendiri, saya juga gak perlu ngabisin duit untuk ngurusin resource blognya. 38 | 39 | -- I think this is the main reason ```saya juga gak perlu ngabisin duit untuk ngurusin resource blognya```. 40 | 41 | Ohiya seputar tentang saya: 42 | 43 | * Saya ngoding sejak 2015 di perkuliahan, saya udah ngedalemin backend dan kerja sebagai backend developer. 44 | * Saya gak jago, tapi saya seneng belajar, makanya saya bikin ginian. 45 | * Saya pasti pernah salah, makanya kalo misalnya ada yang pengen didiskusikan, langsung [kesini aja](https://github.com/perogeremmer/blog/discussions). 46 | 47 | Ohiya saya juga buka mentoring secara gratis 15 menit aja kok, bisa langsung [kesini aja](https://adplist.org/mentors/muhamad-hudya-ramadhana). 48 | 49 | Terakhir, kalo kalian mau request tutorial sih boleh aja, tapi nyawer dulu ya, soalnya kan ngulik juga butuh tenaga ges, klik aja gambar di bawah ini. 50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 | 62 |
63 | 64 | 65 | [twitter-shield]: https://img.shields.io/twitter/follow/perogeremmer?style=social 66 | [twitter-url]: https://twitter.com/perogeremmer] -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/217-contains-duplicate.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Introduction](#introduction) 10 | - [Example 1](#example-1) 11 | - [Example 2](#example-2) 12 | - [Constraints](#constraints) 13 | - [Problem Solving](#problem-solving) 14 | - [Test Case](#test-case) 15 | - [Result](#result) 16 | 17 | ## Introduction 18 | 19 | Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct. 20 | 21 | -- 22 | 23 | Jadi ada kasus dimana kita harus mengembalikan true kalau ada elemen yang sama. 24 | 25 | Soal LeetCode [disini](https://leetcode.com/problems/contains-duplicate/). 26 | 27 | ### Example 1 28 | 29 | ``` 30 | Input: nums = [1,2,3,1] 31 | Output: true 32 | ``` 33 | 34 | ### Example 2 35 | 36 | ``` 37 | Input: nums = [1,2,3,4] 38 | Output: false 39 | Example 3: 40 | 41 | Input: nums = [1,1,1,3,3,4,3,2,4,2] 42 | Output: true 43 | ``` 44 | 45 | ## Constraints 46 | 47 | ``` 48 | 1 <= nums.length <= 105 49 | -109 <= nums[i] <= 109 50 | ``` 51 | 52 | Artinya adalah panjang array bisa jadi berkisar antara nilai negatif -109 sampai nilai positif 109. 53 | 54 | ## Problem Solving 55 | 56 | Gimana cara kita ngerjain ini? Sederhananya, kita harus paham, bahwa kita itu diminta mengembalikan true apabila ada elemen yang sama. 57 | 58 | Artinya apa? Kita bisa saja memberhentikan prosesnya kalau emang ada elemen yang sama. Kenapa? Karena gak ada ketentuan bahwa kita gak boleh berhentiin proses selama perhitungan, fokusnya adalah, kalo ada yang sama, maka kembalikan nilai true. 59 | 60 | Btw ini saya pake Python ya, maka kita bisa keluarin output kaya begini: 61 | 62 | ```python 63 | class Solution(object): 64 | def containsDuplicate(self, nums): 65 | """ 66 | :type nums: List[int] 67 | :rtype: bool 68 | """ 69 | # Siapin hash/set/dictionary/object untuk nampung nilai 70 | arr = {} 71 | 72 | # Lakukan looping terhadap nums yang berisi list 73 | for item in nums: 74 | 75 | # Kalau nilainya ada di object, kita kembalikan true 76 | if item in arr: 77 | return True 78 | 79 | # Kalau nilainya gak ada di object, kita set nilainya dengan true 80 | arr[item] = True 81 | 82 | # Kembalikan false apabila sudah melakukan semua looping dan tidak ada yang sama 83 | return False 84 | ``` 85 | 86 | Intinya memanfaatkan object atau dictionary kita bisa membuat looping sederhana yang menyimpan nilai dari looping untuk melihat nilai yang sama. 87 | 88 | Apabila nilainya belum ada di hash/dictionary, maka kita set nilainya, kalo udah ada langsung kita kembalikan True. 89 | 90 | Kalo udah di-looping semua dan gak ada yang sama? Yaudah langsung return false, sederhana. 91 | 92 | ## Test Case 93 | 94 | Accepted - Runtime: 18 ms 95 | 96 | ``` 97 | Input 98 | nums = [1,2,3,1] 99 | 100 | Output 101 | true 102 | 103 | Expected 104 | true 105 | ``` 106 | 107 | ``` 108 | Input 109 | nums = [1,2,3,4] 110 | 111 | Output 112 | false 113 | 114 | Expected 115 | false 116 | ``` 117 | 118 | ``` 119 | Input 120 | nums = [1,1,1,3,3,4,3,2,4,2] 121 | 122 | Output 123 | true 124 | 125 | Expected 126 | true 127 | ``` 128 | 129 | ## Result 130 | 131 | Hasilnya adalah sebagai berikut: 132 | 133 | ![Hasilnya](./assets/217-contains-duplicate/a6399726-8203-48b4-8deb-517880d0279e.png) 134 | 135 | Tidak keren banget tapi tidak buruk juga, yang penting kita paham bahwa solusi kita tetap diterima sambil belajar bagaimana cara improvenya :) 136 | 137 | Ohiya Hasilnya ini gak stagnan ya alias bisa berubah-ubah, bisa aja beatsnya lagi naik, memory-nya juga, santai aja lah yang penting paham dulu~ 138 | -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/1-two-sum/0e4bb40b-2c15-4112-8dca-53efd45c02c9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/1-two-sum/0e4bb40b-2c15-4112-8dca-53efd45c02c9.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/1-two-sum/c3a697da-0eb4-430e-9ddd-c2eb7c005a6a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/1-two-sum/c3a697da-0eb4-430e-9ddd-c2eb7c005a6a.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/217-contains-duplicate/a6399726-8203-48b4-8deb-517880d0279e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/217-contains-duplicate/a6399726-8203-48b4-8deb-517880d0279e.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/217-contains-duplicate/b954b482-d0c8-493f-89a7-10c8ee22051a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/217-contains-duplicate/b954b482-d0c8-493f-89a7-10c8ee22051a.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/242-valid-anagram/0873ba29-a99f-4a85-a0c9-add32786dfff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/242-valid-anagram/0873ba29-a99f-4a85-a0c9-add32786dfff.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/array-or-hashing/assets/242-valid-anagram/88b164f0-9bb1-4315-bfd1-f489be7771ff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/array-or-hashing/assets/242-valid-anagram/88b164f0-9bb1-4315-bfd1-f489be7771ff.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/sliding-window/assets/121-best-time-to-buy-and-sell-stock/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/sliding-window/assets/121-best-time-to-buy-and-sell-stock/header.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/sliding-window/assets/121-best-time-to-buy-and-sell-stock/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/sliding-window/assets/121-best-time-to-buy-and-sell-stock/result.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/stack/20-valid-parantheses.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | by [@perogeremmer](https://twitter.com/perogeremmer) 5 | 6 | **Table of contents** 7 | 8 | - [Introduction](#introduction) 9 | - [Example 1](#example-1) 10 | - [Example 2](#example-2) 11 | - [Example 3](#example-3) 12 | - [Constraints](#constraints) 13 | - [Problem Solving](#problem-solving) 14 | - [Result](#result) 15 | 16 | ## Introduction 17 | 18 | Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. 19 | 20 | An input string is valid if: 21 | 22 | Open brackets must be closed by the same type of brackets. 23 | Open brackets must be closed in the correct order. 24 | Every close bracket has a corresponding open bracket of the same type. 25 | 26 | -- 27 | 28 | Pada kasus ini, kita ditantang untuk memeriksa apakah karakter string yang di-input memiliki karakter '(', ')', '{', '}', '[' dan ']', nah kita harus memastikan apakah karakter yang di-input itu valid atau tidak. 29 | 30 | Syarat karakternya valid adalah: 31 | 32 | 1. Setiap simbol yang dibuka harus ditutup dengan simbol yang setipe. Artinya kalau buka kurung ya harus diikuti tutup kurung. 33 | 2. Setiap simbol yang dibuka harus ditutup dengan urutan yang benar, jadi yang benar begini `(){}` bukan begini `(}{)` atau yang benar tuh begini `({})`. Intinya penutupan simbol harus tepat. 34 | 3. Setiap simbol yang ditutup harus sama tipenya kaya simbol yang dibuka, intinya sama aja sih kaya nomor satu. 35 | 36 | Disini kita akan menggunakan konsep stack, stack itu adalah konsep dimana kita nyimpen nilai bertumpuk, kaya cucian piring. 37 | 38 | Soal LeetCode [disini](https://leetcode.com/problems/valid-parentheses/description/). 39 | 40 | ### Example 1 41 | 42 | ``` 43 | Input: s = "()" 44 | Output: true 45 | ``` 46 | 47 | ### Example 2 48 | 49 | ``` 50 | Input: s = "()[]{}" 51 | Output: true 52 | ``` 53 | 54 | ### Example 3 55 | 56 | ``` 57 | Input: s = "(]" 58 | Output: false 59 | ``` 60 | 61 | ## Constraints 62 | 63 | ``` 64 | ⚫ 1 <= s.length <= 104 65 | ⚫ s consists of parentheses only '()[]{}'. 66 | ``` 67 | 68 | Artinya panjang karakter berkisar 1 sampai 104 dan karakter yang dikirim sbg nilai hanyalah `() {} []`. 69 | 70 | ## Problem Solving 71 | 72 | Oke karena ini Stack, tentu aja kita bisa menggunakan salah satu tipe data, yaitu `array`. 73 | 74 | Solusinya akan jadi seperti ini guys: 75 | 76 | ```python 77 | class Solution: 78 | def isValid(self, s: str) -> bool: 79 | stack = [] 80 | data = { 81 | "}": "{", 82 | "]": "[", 83 | ")": "(", 84 | } 85 | 86 | for char in s: 87 | if char not in data: 88 | stack.append(char) 89 | continue 90 | 91 | if stack and stack[-1] == data[char]: 92 | stack.pop() 93 | continue 94 | 95 | return False 96 | 97 | return True if not stack else False 98 | ``` 99 | 100 | Oke saatnya kita jabarin. 101 | 102 | Pertama, kita punya variable `stack` yang kita gunakan untuk menampung karakter nantinya. 103 | 104 | Kedua, kita punya variable `data` yang kita gunakan untuk nampung nilai bracket pembuka. Kenapa? Karena kita akan lakukan komparasi dari karakter yang kita tampung pada `stack`. 105 | 106 | Ketiga, lakukan perulangan per-karakter, kalau karakter gak ada di data, maka kita masukkan ke stack. Gimana maksudnya? Lemme take example. 107 | 108 | Misalnya input yang dikirim adalah `{}` ketika terjadi perulangan per-karakter dan sedang ada di bagian pertama, maka tentu saja karakter yang berada di perulangan adalah `{`. Tentu karakter tersebut tidak ada di data, karena yang ada di data adalah `}`. 109 | 110 | ```python 111 | stack = [] 112 | # Ketika terjadi perulangan, maka stack akan terisi 113 | stack = ["{"] 114 | ``` 115 | 116 | Keempat, apabila stack tidak kosong dan karakter terakhir pada stack sama dengan nilai data, maka isi stack kita pop (cabut). 117 | 118 | Masih pada contoh ketiga, kalau misalnya perulangan kedua, maka karakter yang kita dapatkan adalah `}`. 119 | 120 | Karena stack sudah terisi karakter `{` dan `stack[-1]` yang artinya nilai dari index terakhir pada stack sesuai dengan ada yang di data, maka kita bisa pop (cabut) nilainya. 121 | 122 | > Bentar bang, gue masih gak mudeng maksudnya apaan kok sesuai? 123 | 124 | Ketika karakter kedua yang kita loop adalah `}` dan apabila kita print nilai `data["}"]` akan menghasilkan nilai `{`, sedangkan nilai terakhir pada variable `stack` adalah `{`. Tandanya apa? Kondisinya terpenuhi. 125 | 126 | Kelima, apabila kedua kondisi tidak terpenuhi, maka kita bisa lanjut ke bagian akhir, yaitu `return False`. Artinya, sudah dapat dipastikan bahwa karakter tersebut pastinya salah. 127 | 128 | Keenam, apabila seluruh perulangan telah selesai, kita periksa nilai variable `stack`. Apabila nilai variable `stack` kosong (tidak ada yang tertinggal), maka dapat dipastikan seluruh parantesisnya valid alias apabila dibuka maka akan tertutup. 129 | 130 | -- 131 | 132 | Gambaran yang terjadi di algoritma ketika dijalankan: 133 | 134 | `input = "({})"` 135 | 136 | iterasi pertama - `(` 137 | 138 | ```python 139 | stack = [] 140 | # karena ( tidak ada di data, maka kita input 141 | stack = ["("] 142 | ``` 143 | 144 | iterasi kedua - `{` 145 | 146 | ```python 147 | stack = ["("] 148 | # karena ( tidak ada di data, maka kita input lagi 149 | stack = ["(", "{"] 150 | ``` 151 | 152 | iterasi ketiga - `}` 153 | 154 | ```python 155 | stack = ["(", "{"] 156 | # karena ada nilai } di data, dan index terakhir pada stack adalah { yang mana sesuai pada nilai data, maka dianggap valid dan nilai terakhir diangkat (dicabut). 157 | stack = ["("] 158 | ``` 159 | 160 | iterasi ketiga - `)` 161 | 162 | ```python 163 | stack = ["("] 164 | # karena ada nilai ) di data, dan index terakhir pada stack adalah () yang mana sesuai pada nilai data, maka dianggap valid dan nilai terakhir diangkat (dicabut). 165 | stack = [] 166 | ``` 167 | 168 | Karena stack kosong, maka nilai mengambalikan `true`. 169 | 170 | ## Result 171 | 172 | Hasilnya adalah sebagai berikut: 173 | ![Hasilnya](./assets/20-valid-parantheses/result.png) 174 | 175 | Yap, dengan memory yang kecil karena memang kasusnya sederhana, kita bisa mendapatkan hasil yang cukup memuaskan. 176 | 177 | --- 178 | 179 | Kalau kalian suka dengan konten ini jangan lupa dibagiin ke temen-temen dan minta doanya ya supaya saya sehat dan rejekinya lancar terus biar tetep bisa menulis 🙏🙋 180 | -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/stack/assets/20-valid-parantheses/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/stack/assets/20-valid-parantheses/header.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/stack/assets/20-valid-parantheses/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/stack/assets/20-valid-parantheses/result.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-1.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-2.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/100-same-tree/example-3.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/100-same-tree/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/100-same-tree/header.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/100-same-tree/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/100-same-tree/result.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/0fc88ae9-3988-4ad8-a2e4-715e6fae9e39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/0fc88ae9-3988-4ad8-a2e4-715e6fae9e39.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/example-1.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/example-2.png -------------------------------------------------------------------------------- /tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/code/leetcode/trees/assets/226-invert-binary-tree/result.png -------------------------------------------------------------------------------- /tech-knowledge/database/apa-aja-relasi-di-database-relasi.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Apa aja jenis relasi di database relasional?](#apa-aja-jenis-relasi-di-database-relasional) 10 | - [Relasi itu apa sebenernya?](#relasi-itu-apa-sebenernya) 11 | - [One to One](#one-to-one) 12 | - [One to Many](#one-to-many) 13 | - [Many to Many](#many-to-many) 14 | 15 | ## Apa aja jenis relasi di database relasional? 16 | 17 | Post ini berkaitan dengan post [memahami normalisasi di database relasion](./memahami-normalisasi-database-relasi.md), kalo kamu belom paham normalisasi, mending baca itu dulu. 18 | 19 | ## Relasi itu apa sebenernya? 20 | 21 | Ketika kita memiliki hubungan antar tabel seperti yang dibuat di normalisasi, umumnya kita akan ngelihat tiga jenis relasi yang memungkinkan, yaitu: 22 | 23 | - One to One 24 | - One to Many 25 | - Many to Many 26 | 27 | Masing-masing dari jenis relasi ini memiliki keterkaitan data antara tabel a dengan tabel lain yang menggambarkan hubungan (relasi) dari kedua data tersebut. 28 | 29 | ## One to One 30 | 31 | Relasi one to one adalah relasi dimana satu data hanya berkaitan dengan satu saja, artinya dia gak punya lebih dari satu data. Kalo kamu udah baca post [memahami normalisasi di database relasion](./memahami-normalisasi-database-relasi.md) pada bagian 2NF, tentunya kamu ngeliat ada tabel `employee_phones`, kan? 32 | 33 | tabel `employees` 34 | |id|name|email| 35 | |-|-|-| 36 | |1|Hudya|hudya@mail.com| 37 | |2|Ani|ani@mail.com| 38 | |3|Budi|budi@mail.com| 39 | 40 | table `employee_phones` 41 | |id|user_id|phone| 42 | |-|-|-| 43 | |1|1|082213071234| 44 | |2|2|085827492857| 45 | |3|3|081285920483| 46 | |4|1|082145319483| 47 | 48 | Nah, kalau misalnya kita buat data pada tabel employee_phones menjadi seperti ini, maka ini disebut relasi one to one. 49 | 50 | table `employee_phones` 51 | |id|user_id|phone| 52 | |-|-|-| 53 | |1|1|082213071234| 54 | |2|2|085827492857| 55 | |3|3|081285920483| 56 | 57 | Karena **employee hanya boleh** memiliki satu nomor telfon saja. 58 | 59 | > Tapi bang, kalo gitu jadi gak normalisasi dong datanya? 60 | 61 | Ya enggak dong, kan itu udah dibuat bentuk 2NF, bedanya ya datanya cuma boleh satu aja, artinya secara peraturan program employee tidak boleh memiliki lebih dari satu nomor telfon. 62 | 63 | > Seberapa sering one to one terjadi bang? 64 | 65 | Ya tergantung kebutuhan aplikasi bray hahaha, kalo misalnya aturan dari aplikasinya setiap orang hanya boleh punya nomor satu telfon, maka hasil datanya adalah ya satu tabel hanya menyimpan satu data aja. 66 | 67 | > Lah kalo gitu ngapain dibuat normalisasi bang? 68 | 69 | Soalnya kalo kita butuh untuk mencari data dimana kita udah tau ID-nya tanpa harus mencari lagi di tabel employees, ini akan jadi kelebihan sendiri. 70 | 71 | As example, anggap setiap users atau employees, gak wajib dicatet nomor telfonnya, let's say ada jumlah 10.000 pegawai, dan cuma 3.000 yang ngisi nomor telfon, misalnya lho ya. 72 | 73 | Daripada ngescan 10.000 data untuk cari nomor telfon si Hudya, better ngescan 3.000 data untuk cari nomor telfon Hudya, dengan asumsi, kita udah tau ID-nya Hudya. 74 | 75 | > Jadi kesimpulannya gimana bang? 76 | 77 | Kembali ke kepercayaan dan idealisme masing-masing, karena gak ada cara yang salah, masing-masing ada kelebihan dan kekurangan. Kalo menurut elo lebih pede pake satu kolom, boleh, kalo mau dibuat normalisasi, juga boleh. 78 | 79 | ## One to Many 80 | 81 | Masih di kasus yang sama, tanpa mengubah tabel. 82 | 83 | tabel `employees` 84 | |id|name|email| 85 | |-|-|-| 86 | |1|Hudya|hudya@mail.com| 87 | |2|Ani|ani@mail.com| 88 | |3|Budi|budi@mail.com| 89 | 90 | table `employee_phones` 91 | |id|user_id|phone| 92 | |-|-|-| 93 | |1|1|082213071234| 94 | |2|2|085827492857| 95 | |3|3|081285920483| 96 | |4|1|082145319483| 97 | 98 | Jelas relasi di atas adalah one to many, artinya satu data memiliki lebih dari satu data. Udah keliatan kan data yang mana? 99 | 100 | |id|user_id|phone| 101 | |-|-|-| 102 | |1|1|082213071234| 103 | |4|1|082145319483| 104 | 105 | Yep, dua data ini dimiliki sama satu user. Hudya punya dua nomor telfon, tapi kedua nomor telfon itu dimiliki sama satu user, yaitu Hudya. 106 | 107 | ## Many to Many 108 | 109 | Nah many to many ini umumnya terjadi pada tabel transaksi, yang mana biasanya sih, paling sering terjadi di tabel detail transaksi. Contohnya gimana? Sikat: 110 | 111 | tabel `products` 112 | |id|name|category_id|price| 113 | |-|-|-|-| 114 | |1|Odol|1|10000| 115 | |2|Sabun 500ml|1|20000| 116 | |3|Buku|2|25000| 117 | 118 | tabel `transactions` 119 | |id|order_id|user_id| 120 | |-|-|-| 121 | |1|BAH781|1| 122 | |2|BAH782|3| 123 | 124 | tabel `transaction_details` 125 | |id|order_id|product_id|count_of_products| 126 | |-|-|-|-| 127 | |1|BAH781|1|4| 128 | |2|BAH782|2|2| 129 | |3|BAH782|3|3| 130 | 131 | Dari sample 3NF, kita bisa ngeliat relasi many to many. Mungkin kalo kaya gini kurang keliatan ya? Kita coba tambahin data di `transaction_details` dan `transactions`. 132 | 133 | tabel `transactions` 134 | |id|order_id|user_id| 135 | |-|-|-| 136 | |1|BAH781|1| 137 | |2|BAH782|3| 138 | |3|BAH783|2| 139 | |4|BAH784|1| 140 | |4|BAH785|2| 141 | 142 | tabel `transaction_details` 143 | |id|order_id|product_id|count_of_products| 144 | |-|-|-|-| 145 | |1|BAH781|1|4| 146 | |2|BAH782|2|2| 147 | |3|BAH782|3|3| 148 | |4|BAH783|2|1| 149 | |5|BAH784|2|1| 150 | |6|BAH785|1|10| 151 | 152 | Dari sini bisa keliatan kan bahwa ada relasi many to many dari tabel penghubung `transaction_details`, dimana data sebuah `produk` dapat dimiliki oleh banyak `transaksi` di tabel `transaction_details` dan juga sebaliknya. 153 | 154 | Misal ditanya nih, produk dengan ID 2 dimiliki di transaksi mana aja? 155 | 156 | Jawabannya: 157 | 158 | - BAH782 159 | - BAH783 160 | - BAH784 161 | 162 | Terus misal ditanya, transaksi dengan ID `BAH782` memiliki produk apa aja? 163 | 164 | Jawabannya: 165 | 166 | - Produk ID 2 167 | - Produk ID 3 168 | 169 | Jadi `many to many` ini adalah relasi dimana datanya bisa lebih dari satu, dan gak cuma di satu sisi aja. Data produk bisa dimiliki di transaksi mana aja (atau lebih dari satu transaksi), dan sebuah transaksi bisa punya data produk lebih dari satu, maka relasi ini disebut `many to many`. 170 | 171 | Jadi gimana ges? Gampang kan? :) 172 | -------------------------------------------------------------------------------- /tech-knowledge/database/assets/apa-aja-relasi-di-database-relasi/347eed08-c077-49c6-9a5a-568aca4e73d8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/apa-aja-relasi-di-database-relasi/347eed08-c077-49c6-9a5a-568aca4e73d8.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/belajar-denormalisasi-musuhnya-normalisasi/e7915020-41c3-44e8-8f37-93e5d0b7a462.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/belajar-denormalisasi-musuhnya-normalisasi/e7915020-41c3-44e8-8f37-93e5d0b7a462.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/cara-kerja-pool-connection-database/07009633-da19-4846-b882-d1c655e8a2cf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/cara-kerja-pool-connection-database/07009633-da19-4846-b882-d1c655e8a2cf.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/d114be61-bba7-4154-a31d-5810a2ed1bc0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/d114be61-bba7-4154-a31d-5810a2ed1bc0.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/kenalan-sama-kolom-json/73761957-91d7-45a6-a9ce-a54f5aa48ccb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/kenalan-sama-kolom-json/73761957-91d7-45a6-a9ce-a54f5aa48ccb.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/kenalan-sama-kolom-json/7613eca4-6263-45c6-8487-3ed8a7182e50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/kenalan-sama-kolom-json/7613eca4-6263-45c6-8487-3ed8a7182e50.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/1nf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/1nf.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/2nf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/2nf.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/3nf-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/3nf-1.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/3nf-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/3nf-2.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/6d51d6f8-e5e9-4c53-8ff9-8fe607199c79.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/6d51d6f8-e5e9-4c53-8ff9-8fe607199c79.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/transaksi-tokped-detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/transaksi-tokped-detail.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/memahami-normalisasi-database-relasi/transaksi-tokped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/memahami-normalisasi-database-relasi/transaksi-tokped.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/soft-delete-teknik-ngilang-tanpa-ngapus/8d53e324-8b29-41ed-8917-5b74e088a6c8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/soft-delete-teknik-ngilang-tanpa-ngapus/8d53e324-8b29-41ed-8917-5b74e088a6c8.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/2023-04-01-13-50-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/2023-04-01-13-50-04.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/60de3bb8-f601-4ea1-9720-702e54f8fc0c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/60de3bb8-f601-4ea1-9720-702e54f8fc0c.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/d675d67f-1612-4c67-b305-53c31ca05f76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/tabel-logs-penyelamat-backend-developer/d675d67f-1612-4c67-b305-53c31ca05f76.png -------------------------------------------------------------------------------- /tech-knowledge/database/assets/transactions-teknik-menjaga-proses-yang-gagal/b13cf1c5-64ae-4a99-92cf-1e533bf5907f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tech-knowledge/database/assets/transactions-teknik-menjaga-proses-yang-gagal/b13cf1c5-64ae-4a99-92cf-1e533bf5907f.png -------------------------------------------------------------------------------- /tech-knowledge/database/cara-kerja-pool-connection-database.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Cara Kerja Pool Connection Database](#cara-kerja-pool-connection-database) 10 | - [Pool connection tuh apaan?](#pool-connection-tuh-apaan) 11 | - [Cara kerja pool connection?](#cara-kerja-pool-connection) 12 | - [Berapa nilai n yang baik untuk pool connection?](#berapa-nilai-n-yang-baik-untuk-pool-connection) 13 | - [Apakah semua backend pasti pake pool connection?](#apakah-semua-backend-pasti-pake-pool-connection) 14 | 15 | ## Cara Kerja Pool Connection Database 16 | 17 | Ketika belajar laravel atau ketika mulai lebih banyak kenal sama backend, pasti bakalan denger istilah **pool connection**. Sebenernya ini gak cocok buat newbie, tapi gapapa, biarpun ini buat yang tingkat lanjut, yang penting kita tetep semangat belajar. 18 | 19 | ## Pool connection tuh apaan? 20 | 21 | Gampangnya, pool connection adalah teknik dimana kita membuka koneksi ke database sebanyak n (n adalah nilai yang kita atur) dimana koneksi tersebut akan dimanage oleh pool manager yang mengatur jalan maksudnya request data. 22 | 23 | > Kenapa koneksi aja harus diatur bang? 24 | 25 | Jadi gini, sebenernya ketika aplikasi backend yang kita buat ingin meminta data ke database, kita perlu membuka koneksi terlebih dahulu. 26 | 27 | Ibarat pintu, kalau koneksi dibuka tutup tentu bakalan bikin sibuk kinerja server. 28 | 29 | Nah daripada kita buka tutup, ya kita buka aja tapi kita jagain biar kenapa? Biar gak ada tamu yang nggak diizinkan masuk. 30 | 31 | > Apa jadinya kalau dibuka doang tanpa ditutup? 32 | 33 | Wah, yang jelas sih bikin resource server kamu **meledag**. 34 | 35 | ![Explosion](https://media.tenor.com/tYhvucoOSlwAAAAC/anime-explosion.gif) 36 | 37 | Ibarat lampu di rumah kalo dinyalain semuanya tanpa dimatiin tentu bikin listrik bengkak, dan ini juga sama kaya server, server kamu bisa bengkak banget resourcenya kaya CPU-nya jadi tinggi, RAM-nya juga kemakan. 38 | 39 | Ini adalah gambaran dari pool connection: 40 | 41 | ```mermaid 42 | graph LR 43 | Request-1 -->|Request DB | Pool-Manager 44 | Request-2 -->|Request DB | Pool-Manager 45 | Request-3 -->|Request DB | Pool-Manager 46 | Request-4 -->|Request DB | Pool-Manager 47 | Request-5 -->|Request DB | Pool-Manager 48 | Request-6 -->|Request DB, hold | Pool-Manager 49 | 50 | Pool-Manager -->|Execute query request-1| Database 51 | Pool-Manager -->|Execute query request-2| Database 52 | Pool-Manager -->|Execute query request-3| Database 53 | Pool-Manager -->|Execute query request-4| Database 54 | Pool-Manager -->|Execute query request-5| Database 55 | 56 | ``` 57 | 58 | ## Cara kerja pool connection? 59 | 60 | Kurang lebih kaya begini, jadi pool manager akan membuka koneksi sebanyak n, disini gue kasih contoh n-nya adalah 3. 61 | 62 | Pool-Manager bakalan ngebuka sebanyak n dan disimpen di memory, atau bahkan gampangnya, array. 63 | 64 | ```mermaid 65 | sequenceDiagram 66 | participant Pool-Manager 67 | participant Connection1 68 | participant Connection2 69 | participant Connection3 70 | 71 | Pool-Manager->>+Connection1: Open connection 72 | Connection1-->>-Pool-Manager: Connection opened 73 | Pool-Manager->>+Connection2: Open connection 74 | Connection2-->>-Pool-Manager: Connection opened 75 | Pool-Manager->>+Connection3: Open connection 76 | Connection3-->>-Pool-Manager: Connection opened 77 | ``` 78 | 79 | Ketika nanti dibutuhkan tinggal cek dari si array yang nyimpen object connection tersebut, dan dipinjemin ke request, selama request masih jalan ya koneksi akan terus dipake sama client, ketika dah beres koneksi tersebut dikembaliin lagi terus disimpen di array lagi. 80 | 81 | ## Berapa nilai n yang baik untuk pool connection? 82 | 83 | Umumnya, pool connection itu defaultnya di-set antara 5-15 pada framework. Karena 10 pool connection harusnya sudah cukup untuk menangani request yang masuk dari Request. 84 | 85 | Request ini maksudnya adalah API kita sendiri, jadi API kita meminta kepada pool, pool memeriksa berapa banyak koneksi yang kepake, dan kalau lebih dari jumlah n ya ditahan. 86 | 87 | > Bisa gak kita bikin lebih dari 50? 88 | 89 | Bisa aja, tapi malah ga kepake segitu dan malah bikin bengkak resource server kalian lagi, makanya kalo ngerasa ada masalah di query yang lambat, bisa coba cek querynya juga. 90 | 91 | Gak melulu semua salah pool connection, dan untuk menemukan masalah lemot itu emang harus di-track dari berbagai kemungkinan. 92 | 93 | ## Apakah semua backend pasti pake pool connection? 94 | 95 | Udah pasti! Soalnya pool connection bakalan bikin request jadi lebih cepat karena gak nunggu buka tutup yang bikin resource jadi kerja berat. Sehingga, lebih baik buka di awal sebanyak n connection, simpan pada memory, terus pake ketika dibutuhkan. 96 | 97 | Pool connection ngurangin latency yang ada di aplikasi kalian dan juga memperbaiki performa aplikasi kalian ketika berkomunikasi sama database, karena gak perlu buka tutup koneksi. 98 | -------------------------------------------------------------------------------- /tech-knowledge/database/transactions-teknik-menjaga-proses-yang-gagal.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Transactions, Teknik Menjaga Proses Yang Gagal](#transactions-teknik-menjaga-proses-yang-gagal) 10 | - [Fitur Transactions](#fitur-transactions) 11 | - [Apakah semua proses harus menggunakan transactions?](#apakah-semua-proses-harus-menggunakan-transactions) 12 | - [Apa kekurangan pake transactions?](#apa-kekurangan-pake-transactions) 13 | 14 | ## Transactions, Teknik Menjaga Proses Yang Gagal 15 | 16 | Kamu pernah berpikir gak kalo misalnya ada beberapa proses di database sekaligus, tapi proses setelah proses pertama ada kegagalan, gimana nasib proses pertama? 17 | 18 | > hah maksudnya gimana bang? ribet lu. 19 | 20 | Gini gini, anggap aja ya kita lagi bikin aplikasi e-wallet untuk fitur transfer, maka kemungkinan ada beberapa proses berikut: 21 | 22 | ```mermaid 23 | graph LR; 24 | A[Buat transaksi baru] --> B[Ubah saldo pengirim] 25 | B --> C[Ubah saldo penerima] 26 | C --> D[Simpan data ke DB] 27 | ``` 28 | 29 | Rinciannya sih kaya gini ya: 30 | 31 | - Catat di table transactions yang mencatat kejadian transfer 32 | - Ubah saldo pada user pengirim sesuai jumlah yang ditransfer 33 | - Ubah saldo pada penerima sesuai jumlah yang ditransfer 34 | 35 | Sekarang bayangkan, kalo misalnya proses ketiga terjadi error atau kesalahan, pertanyaannya.. gimana atau apa yang terjadi pada proses pertama dan kedua? Kan secara proses, mereka sudah berjalan. 36 | 37 | ```mermaid 38 | graph LR; 39 | A[Buat transaksi baru] --> B[Ubah saldo pengirim] 40 | B --> C[Ubah saldo penerima - ERROR] 41 | C --> D[Simpan data ke DB] 42 | ``` 43 | 44 | Jawabannya apa? Ya jelas, mereka sudah terlanjur **berubah**. 45 | 46 | Sistem sudah mencatat terjadinya transaksi, pengirim sudah kehilangan saldo sesuai jumlah yang ditransfer, dan penerima malah tidak mendapatkan apapun. 47 | 48 | Rasanya gimana yang dialamin user? Bingung, kesel dan ngamuk. Karena kalo ada di posisi kamu, tentu kamu juga gak mau kan kalo misalnya kejadiannya kaya begitu? 49 | 50 | ## Fitur Transactions 51 | 52 | Nah, dari kasus di atas makanya ada sebuah fitur di database namanya transactions, gunanya adalah untuk dapat me-rollback suatu kejadian. Rollback atau bisa juga disebut mundur ke sebuah keadaan adalah sebuah fitur dimana kalo misalnya ada satu aja proses yang gagal, maka keseluruhan proses dianggap gagal. 53 | 54 | ```mermaid 55 | graph LR; 56 | Start --> A 57 | A[Buat transaksi baru] --> B[Ubah saldo pengirim] 58 | B --> C[Ubah saldo penerima - ERROR] 59 | C --> |Melakukan rollback|Start 60 | 61 | ``` 62 | 63 | Bisa dibilang transactions ini kaya operator logical AND dimana semua kondisi harus terpenuhi agar dapat mengeluarkan output atau memenuhi kondisi tersebut. 64 | 65 | Contoh masih menggunakan kasus di atas: 66 | 67 | - Sistem mencatat terjadinya transfer dari user Hudya ke user Andi sebesar 200.000. 68 | - Sistem mengubah saldo Hudya dari 1.000.000 menjadi 800.000. 69 | - Terjadi error pada saat merubah saldo Andi, terdapat parameter yang salah diinput ke database. 70 | 71 | Pada saat terjadi error pada proses ketiga, database akan membatalkan keseluruhan proses, karena keseluruhan proses ini dianggap dalam sebuah sesi. 72 | 73 | Sehingga, ketika ada satu proses yang bermasalah maka satu sesi tersebut akan dianggap gagal, saldo Hudya tidak akan berkurang, dan sistem tidak akan mencatat terjadinya transfer. 74 | 75 | ## Apakah semua proses harus menggunakan transactions? 76 | 77 | Hmm sebenernya gak juga, kalau misalnya prosesnya hanya ada satu proses saja, misalnya menambahkan data saja, atau melakukan perubahan data sih enggak apa. Namun apabila terjadi lebih dari satu proses pada sebuah fitur atau flow, maka sangat disarankan menggunakan transactions guna mencegah masalah di kemudian hari. 78 | 79 | Tujuan utama dari transactions adalah untuk menjaga data agar tetap konsisten, sehingga walau terjadi kesalahan baik saat penginputan data di database maupun pada proses terjadinya code, datanya akan tetap bisa di-rollback atau dikembalikan pada state sebelum terjadinya masalah. 80 | 81 | ## Apa kekurangan pake transactions? 82 | 83 | Apa masalah yang terjadi pada saat menggunakan transactions? 84 | Dari sisi kode tentunya struktur pada saat menggunakan transactions akan berbeda dengan kode pada umumnya, karena harus disisipkan ke dalam sebuah sesi. Selain itu, database akan bekerja lebih banyak dari fungsi biasa yang tidak menggunakan transactions. 85 | 86 | Namun dari semua kekurangan menggunakan transactions, tetap **sangat disarankan** menggunakan transactions untuk mencegah data yang tidak konsisten, mengapa? Kita bisa dengan murah dan mudah mengupgrade resource pada server, tapi kita akan sangat kesulitan dan meghabiskan waktu apabila terjadi data yang tidak konsisten. 87 | 88 | Contoh apa saja kasus yang bisaa menggunakan transaction? 89 | 90 | - Ketika transfer saldo yang mana harus menggunakan beberapa proses 91 | - Pembelian barang checkout yang melibatan beberapa proses pencatatan transaksi 92 | - Flash sale yang mana barang biasanya terbatas, sehingga ketika barang habis, proses pemasukan ke keranjang tidak tercatat. 93 | -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/2-intent-berpindah-layar.md: -------------------------------------------------------------------------------- 1 | by [@perogeremmer](https://twitter.com/perogeremmer) 2 | 3 | ## Introduction 4 | 5 | Pada tutorial sebelumnya kita sudah berkenalan dengan setOnClick Listener, sekarang bagaimana kalau kita membuat layar baru untuk berpindah? 6 | 7 |
8 | 9 | ## Code Time 10 | 11 |
12 | 13 | Pertama kita perlu membuat activity baru, perhatikan gambar berikut: 14 | 15 | ![Alt text](./assets/2-intent-berpindah-layar/1.gif) 16 | 17 | Sekarang isi saja activity yang akan kita buat dengan data berikut: 18 | 19 | ![Alt text](./assets/2-intent-berpindah-layar/1.png) 20 | 21 | Dengan membuat activity baru, kita otomatis mendapat dua file baru yaitu class `SecondActivity.kt` dan file `activity_second.xml`. 22 | 23 | Sekarang kita ubah file `activity_second.xml` dengan kode berikut: 24 | 25 | ```xml 26 | 27 | 33 | 34 | 44 | 45 | 46 | ``` 47 | 48 | Kira-kira tampilannya akan menjadi seperti ini, sederhana sekali hanya butuh text view. 49 | 50 | ![Alt text](./assets/2-intent-berpindah-layar/2.png) 51 | 52 | Sekarang kita ubah file `SecondActivity.kt` dengan kode berikut: 53 | 54 | ```kotlin 55 | import android.content.Intent 56 | import androidx.appcompat.app.AppCompatActivity 57 | import android.os.Bundle 58 | import android.widget.TextView 59 | 60 | class SecondActivity : AppCompatActivity() { 61 | lateinit var txtResult : TextView 62 | 63 | override fun onCreate(savedInstanceState: Bundle?) { 64 | super.onCreate(savedInstanceState) 65 | setContentView(R.layout.activity_second) 66 | 67 | txtResult = findViewById(R.id.txt_result) 68 | 69 | var result = intent.getStringExtra("result") 70 | txtResult.text = result 71 | } 72 | } 73 | ``` 74 | 75 | Pada file SecondActivity.kt method onCreate kita mengambil data intent yaitu data yang dilempar antar activity berupa String dengan atribut name result, setelahnya text view resultnya kita isi dengan data dari intent tersebut. 76 | 77 | Terakhir, kita ubah `MainActivity.kt` dengan kode berikut: 78 | 79 | ```kotlin 80 | import android.content.Intent 81 | import androidx.appcompat.app.AppCompatActivity 82 | import android.os.Bundle 83 | import android.widget.Button 84 | import android.widget.EditText 85 | import android.widget.TextView 86 | import android.widget.Toast 87 | 88 | class MainActivity : AppCompatActivity() { 89 | 90 | lateinit var btnSubmit : Button 91 | lateinit var etName : EditText 92 | lateinit var txtName : TextView 93 | 94 | override fun onCreate(savedInstanceState: Bundle?) { 95 | super.onCreate(savedInstanceState) 96 | setContentView(R.layout.activity_main) 97 | 98 | btnSubmit = findViewById(R.id.btn_submit) 99 | etName = findViewById(R.id.et_name) 100 | txtName = findViewById(R.id.txt_name) 101 | 102 | btnSubmit.setOnClickListener { 103 | if (etName.text.isEmpty()) { 104 | Toast.makeText( 105 | applicationContext, 106 | "Harap isi nama terlebih dahulu", 107 | Toast.LENGTH_SHORT 108 | ).show() 109 | return@setOnClickListener 110 | } 111 | 112 | val intent = Intent(this, SecondActivity::class.java) 113 | intent.putExtra("result", etName.text.toString()) 114 | startActivity(intent) 115 | } 116 | } 117 | } 118 | ``` 119 | 120 | Pada kode `MainActivity.kt` dapat kita lihat bahwa kita memanggil class Intent dengan dua parameter, yaitu this (class yang sedang kita akses) dengan parameter kedua yaitu activity class dari target yang mana targetnya adalah `SecondActivity.kt`. 121 | 122 | Kemudian kita memanggil fungsi `putExtra` dengan parameter pertama teks `result` sebagai key dari data yang dilempar dan parameter kedua nilai dari edit text name. 123 | 124 | Terakhir kita panggil fungsi `startActivity` dengan parameter data intent tersebut. 125 | 126 | Sekarang kita coba deh hasilnya adalah sebagai berikut: 127 | 128 | ![Alt text](./assets/2-intent-berpindah-layar/2.gif) 129 | 130 | Result 131 | 132 | ## Challenge 133 | 134 | Sekarang coba buat hasilnya supaya ketika dia kembali ke halaman sebelumnya, edit text atau inputnya menjadi kosong. 135 | 136 | Expected Result: 137 | 138 | ![Alt text](./assets/2-intent-berpindah-layar/3.gif) 139 | 140 | > [!NOTE] 141 | > 💡 Kata kunci browsing 142 | > 1. Activity Lifecycle Kotlin 143 | > 2. Keyword Google “kotlin function after back from second activity” 144 | -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/4-belajar-debug.md: -------------------------------------------------------------------------------- 1 | by [@perogeremmer](https://twitter.com/perogeremmer) 2 | 3 | ## Introduction 4 | 5 | Pada materi kali ini kita akan membahas debugging, apa itu debugging? 6 | 7 | > [!NOTE] 8 | > 💡 Debug code is computer code introduced to a computer program to test for errors or to help determine the cause of an error. —Wikipedia 9 | 10 | 11 | Jadi secara harfiah, debugging adalah proses untuk mengidentifikasi bagian kode yang menyebabkan error. 12 | 13 | Apabila kamu perhatikan pada bar tools bagian kanan, kita dapat menemukan logo serangga: 14 | 15 | ![Alt text](assets/4-belajar-debug/1.png) 16 | 17 | Ya, logo serangga ini merupakan fitur untuk melakukan debug pada code yang kita tulis. 18 | 19 | Bagaimana cara kerjanya? Pergi ke `MainActivity.kt` lalu berikan tanda merah dengan cara menekan bagian putih di sebelah kanan baris kode. 20 | 21 | ![Alt text](assets/4-belajar-debug/2.png) 22 | 23 | Baris merah merupakan debug breakpoints, artinya adalah titik atau baris yang akan dilewati dan diperiksa nilainya. Setiap breakpoint akan dilewati dan akan muncul pada bagian terminal debugger. Sekarang klik tombol debug. 24 | 25 | ![Alt text](assets/4-belajar-debug/3.png) 26 | 27 | Ketika kamu menulis nama dan klik tombol submit, maka code akan berjalan sesuai breakpoint yang dipilih. Misalnya pada baris 26 tentu saja setelah tombol ditekan maka akan memeriksa kondisi yaitu apabila edit text nama kosong. 28 | 29 | Kita dapat melihat tombol resume program, artinya program akan berjalan secara code setelah ditekan resume program. 30 | 31 | ![Alt text](assets/4-belajar-debug/4.png) 32 | 33 | ![Alt text](assets/4-belajar-debug/1.gif) 34 | 35 |
36 | 37 | Dengan debugger kita juga dapat melihat isi variabel yang sudah terlewati oleh breakpoints. 38 | 39 | ![Alt text](assets/4-belajar-debug/5.png) 40 | 41 |
42 | 43 | Debugger akan membantu kita melakukan banyak hal terkait debugging dan memeriksa baris kode mana yang bermasalah. 44 | 45 | Sekarang kita ubah MainActivity.kt dengan kode berikut: 46 | 47 | ![Alt text](assets/4-belajar-debug/6.png) 48 | 49 | Kita tambahkan throw exception, dapat kita lihat bahwa kode tidak berjalan ke bagian bawah. Ketika debugger dijalankan: 50 | 51 | ![Alt text](assets/4-belajar-debug/2.gif) 52 | 53 | 54 | > [!NOTE] 55 | > Debugger akan mempermudah kamu mengidentifikasikan masalah kamu lebih cepat, dengan debugger, kamu juga akan lebih mudah mengetahui isi variabel ketimbang melakukan print / console.log -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/6-integrasi-dengan-firebase.md: -------------------------------------------------------------------------------- 1 | # 6. Integrasi dengan Firebase 2 | 3 | Pada tutorial kali ini, kita akan coba untuk melakukan integrasi dengan firebase. Firebase adalah layanan cloud dari Google yang memberikan kemudahan akses database secara online yang disimpan pada layanan bernama Firestore Database. 4 | 5 | Nah karena Android merupakan produk resmi dari Google, sehingga integrasi dengan firebase akan sangat mudah dilakukan. 6 | 7 | Pertama, kita buat projek baru terlebih dahulu, kita pilih empty views activity. 8 | 9 | ![1](assets/6-integrasi-dengan-firebase/1.png) 10 | 11 | Alasannya adalah karena kita ingin membuat todo list dengan firebase, dimana data disimpan secara cloud. 12 | 13 | Nah sekarang kita ganti namanya menjadi `todo firebase`. Untuk package name dan minimum SDK, silahkan menyesuaikan device kalian. Kalau sudah tekan finish. 14 | 15 | ![2](assets/6-integrasi-dengan-firebase/2.png) 16 | 17 |
18 | 19 | --- 20 | 21 |
22 | 23 | Selanjutnya, pergi ke [console firebase](https://console.firebase.google.com) dan klik Add project, lihat GIF berikut: 24 | 25 | ![Gif 1](assets/6-integrasi-dengan-firebase/1.gif) 26 | 27 | Tunggu hingga proses pembuatan project selesai hingga seperti ini lalu klik continue. 28 | 29 | ![Alt text](assets/6-integrasi-dengan-firebase/3.png) 30 | 31 | Sekarang kembali ke android studio dan klik tools > Firebase, lihat GIF berikut: 32 | 33 | ![Alt text]() 34 | 35 | Buka kembali android studio kamu, dan cek hasilnya apabila terkonek dengan akun firebase kamu akan menjadi seperti ini: 36 | 37 | ![Alt text](assets/6-integrasi-dengan-firebase/4.png) 38 | 39 | Sekarang klik juga Add Cloud Firestore to your app dan klik install dependencies (add dependencies to your app), klik saja confirm to change, tunggu hingga proses graddling selesai dan lihat sudah terkoneksi. 40 | 41 | ![Alt text](assets/6-integrasi-dengan-firebase/5.png) 42 | 43 |
44 | 45 | Setelahnya kita perlu menyiapkan databasenya, lakukan langkah berikut: 46 | 47 | ![Alt text]() 48 | 49 | 1. Kembali ke console firebase 50 | 2. Klik build pada bagian kiri lalu pilih firestore database 51 | 3. Pilih bagian create database 52 | 4. Setelahnya pilih bagian testing mode, dan next. 53 | 5. Data center locationnya pilih Jakarta, lalu next, sisanya tinggal enable saja. Terus tunggu hingga selesai. 54 | 55 |
56 | 57 | ![Alt text](assets/6-integrasi-dengan-firebase/6.png) 58 | 59 | Kalau sudah selesai begini nanti bentuknya. Klik start collection lalu tambahkan sample data. 60 | 61 | ![Alt text]() 62 | 63 |
64 | 65 | Sekarang kita akan mencoba untuk melihat apakah datanya benar-benar sudah masuk: 66 | 67 | ![Alt text](assets/6-integrasi-dengan-firebase/7.png) 68 | 69 | Pergi ke Android Studio, pilih `MainActivity.kt` lalu ubah kodenya agar menjadi seperti ini: 70 | 71 | ```kotlin 72 | import android.content.ContentValues.TAG 73 | import androidx.appcompat.app.AppCompatActivity 74 | import android.os.Bundle 75 | import android.util.Log 76 | import com.google.firebase.firestore.ktx.firestore 77 | import com.google.firebase.ktx.Firebase 78 | 79 | class MainActivity : AppCompatActivity() { 80 | override fun onCreate(savedInstanceState: Bundle?) { 81 | super.onCreate(savedInstanceState) 82 | setContentView(R.layout.activity_main) 83 | 84 | val db = Firebase.firestore 85 | db.collection("todo") 86 | .get() 87 | .addOnSuccessListener { result -> 88 | for (document in result) { 89 | Log.d(TAG, "${document.id} => ${document.data}") 90 | } 91 | } 92 | .addOnFailureListener { exception -> 93 | Log.w(TAG, "Error getting documents.", exception) 94 | } 95 | } 96 | } 97 | ``` 98 | 99 | > ![WARNING] 100 | > Perhatikan nama package kalian jangan sampai dihilangkan. 101 | 102 |
103 | 104 | Sekarang pergi ke bagian logcat dan lihat bahwa kita berhasil menyambungkan aplikasi dengan Firebase dan datanya sudah berhasil diambil. 105 | 106 | ![Alt text](assets/6-integrasi-dengan-firebase/8.png) 107 | 108 | Next kita akan lanjutkan membuat list view todo, menambahkan todo, update todo, dan menghapus todo. -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/3.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/4.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/5.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/6.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/7.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/8.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/9.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/1-introduction/challenge-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/1-introduction/challenge-1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/image-1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/image.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/10-belajar-recycler-view/sample.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/image-1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/11-upload-gambar-dengan-base64/image.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/2-intent-berpindah-layar/3.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/3-session-dengan-shared-preference/3.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/3.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/4.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/5.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/4-belajar-debug/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/4-belajar-debug/6.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/3.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/4.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-01.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-04.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-16.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_02-23.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_22-58.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/Peek_2022-10-06_22-58.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/todo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/5-belajar-list-view/todo-icon.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/3.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/3.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/4.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/4.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/5.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/6.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/7.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/6-integrasi-dengan-firebase/8.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/challenge-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/7-menambahkan-dan-melihat-todo/challenge-1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/8-menghapus-dan-mengubah-data/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/8-menghapus-dan-mengubah-data/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/8-menghapus-dan-mengubah-data/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/8-menghapus-dan-mengubah-data/2.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/1.gif -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/1.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/android/building-your-first-app/assets/9-membuat-autentikasi/2.png -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/challenge/1-introduction.md: -------------------------------------------------------------------------------- 1 | ## Answer 2 | 3 | Ganti kode pada `MainActivity.kt` menjadi seperti ini: 4 | 5 | ```kotlin 6 | package com.example.belajartodolist 7 | 8 | import androidx.appcompat.app.AppCompatActivity 9 | import android.os.Bundle 10 | import android.widget.Button 11 | import android.widget.EditText 12 | import android.widget.TextView 13 | import android.widget.Toast 14 | 15 | class MainActivity : AppCompatActivity() { 16 | 17 | lateinit var btnSubmit : Button 18 | lateinit var etName : EditText 19 | lateinit var txtName : TextView 20 | 21 | override fun onCreate(savedInstanceState: Bundle?) { 22 | super.onCreate(savedInstanceState) 23 | setContentView(R.layout.activity_main) 24 | 25 | btnSubmit = findViewById(R.id.btn_submit) 26 | etName = findViewById(R.id.et_name) 27 | txtName = findViewById(R.id.txt_name) 28 | 29 | btnSubmit.setOnClickListener { 30 | if (etName.text.isEmpty()) { 31 | Toast.makeText( 32 | applicationContext, 33 | "Harap isi nama terlebih dahulu", 34 | Toast.LENGTH_SHORT 35 | ).show() 36 | return@setOnClickListener 37 | } 38 | 39 | txtName.text = etName.text 40 | etName.text = null 41 | } 42 | } 43 | } 44 | ``` 45 | 46 | Hasilnya menjadi seperti ini 47 | 48 | ![Alt text](../assets/1-introduction/challenge-1.png) -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/challenge/2-intent-berpindah-layar.md: -------------------------------------------------------------------------------- 1 | ## Answer 2 | 3 | ```kotlin 4 | import android.content.Intent 5 | import androidx.appcompat.app.AppCompatActivity 6 | import android.os.Bundle 7 | import android.os.PersistableBundle 8 | import android.widget.Button 9 | import android.widget.EditText 10 | import android.widget.TextView 11 | import android.widget.Toast 12 | 13 | class MainActivity : AppCompatActivity() { 14 | 15 | lateinit var btnSubmit : Button 16 | lateinit var etName : EditText 17 | lateinit var txtName : TextView 18 | 19 | override fun onCreate(savedInstanceState: Bundle?) { 20 | super.onCreate(savedInstanceState) 21 | setContentView(R.layout.activity_main) 22 | 23 | btnSubmit = findViewById(R.id.btn_submit) 24 | etName = findViewById(R.id.et_name) 25 | txtName = findViewById(R.id.txt_name) 26 | 27 | btnSubmit.setOnClickListener { 28 | if (etName.text.isEmpty()) { 29 | Toast.makeText( 30 | applicationContext, 31 | "Harap isi nama terlebih dahulu", 32 | Toast.LENGTH_SHORT 33 | ).show() 34 | return@setOnClickListener 35 | } 36 | 37 | val intent = Intent(this, SecondActivity::class.java) 38 | intent.putExtra("result", etName.text.toString()) 39 | startActivity(intent) 40 | } 41 | } 42 | 43 | override fun onResume() { 44 | super.onResume() 45 | etName.text = null 46 | } 47 | } 48 | ``` 49 | 50 |
51 | 52 | Gunakan fungsi onResume, menurut kitab suci android studio: 53 | 54 | > [!NOTE] 55 | > 💡 When the activity enters the Resumed state, it comes to the foreground, and then the system invokes the `[onResume()](https://developer.android.com/reference/android/app/Activity#onResume())` callback. This is the state in which the app interacts with the user. The app stays in this state until something happens to take focus away from the app. Such an event might be, for instance, receiving a phone call, the user’s navigating to another activity, or the device screen’s turning off. 56 | 57 | ## Artinya 58 | 59 | Ketika activity balik ke state resume, sebenernya itu balik ke background, dan sistemnya munculin onResume callback. Ini artinya adalah state dimana aplikasi berinteraksi dengan user. 60 | 61 | Aplikasinya bertahan pada state ini hingga sesuatu terjadi untuk mengambil fokus dari aplikasi, contohnya kejadian untuk instance menerima telfon, **pengguna berpindah dari aktivitas lain**, atau layar perangkat mati. -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/challenge/3-session-dengan-shared-preference.md: -------------------------------------------------------------------------------- 1 | Tambahkan dua baris kode berikut pada bagian akhir kode pada saat tombol clear data ditekan. 2 | 3 | ```kotlin 4 | btnClear.isEnabled = false 5 | btnClear.isClickable = false 6 | ``` 7 | 8 | Hasil akhir 9 | 10 | ```kotlin 11 | import android.content.Context 12 | import androidx.appcompat.app.AppCompatActivity 13 | import android.os.Bundle 14 | import android.widget.Button 15 | import android.widget.TextView 16 | import android.widget.Toast 17 | 18 | class SecondActivity : AppCompatActivity() { 19 | lateinit var txtResult : TextView 20 | lateinit var btnClear : Button 21 | 22 | override fun onCreate(savedInstanceState: Bundle?) { 23 | super.onCreate(savedInstanceState) 24 | setContentView(R.layout.activity_second) 25 | 26 | txtResult = findViewById(R.id.txt_result) 27 | btnClear = findViewById(R.id.btn_clear) 28 | 29 | var result = intent.getStringExtra("result") 30 | txtResult.text = result 31 | 32 | btnClear.setOnClickListener { 33 | val sharedPreference = getSharedPreferences( 34 | "app_preference", Context.MODE_PRIVATE 35 | ) 36 | 37 | var editor = sharedPreference.edit() 38 | editor.clear() 39 | editor.remove("name") 40 | editor.commit() 41 | 42 | Toast.makeText( 43 | applicationContext, 44 | "Sesi berhasil dihapus!", 45 | Toast.LENGTH_SHORT 46 | ).show() 47 | 48 | btnClear.isEnabled = false 49 | btnClear.isClickable = false 50 | } 51 | } 52 | 53 | override fun onBackPressed() { 54 | val sharedPreference = getSharedPreferences( 55 | "app_preference", Context.MODE_PRIVATE 56 | ) 57 | 58 | var name = sharedPreference.getString("name", "").toString() 59 | 60 | if (name.isEmpty()) { 61 | super.onBackPressed() 62 | return 63 | } 64 | 65 | Toast.makeText( 66 | applicationContext, 67 | "Kamu masih memiliki sesi, harap hapus data terlebih dahulu!", 68 | Toast.LENGTH_SHORT 69 | ).show() 70 | } 71 | } 72 | ``` -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/challenge/5-belajar-list-view.md: -------------------------------------------------------------------------------- 1 | Tambahkan set on item click listener di dalam fungsi on create pada file `SecondActivity.kt`. 2 | 3 | ```kotlin 4 | listTodo.setOnItemClickListener { adapterView, view, position, id -> 5 | val item = adapterView.getItemAtPosition(position) as Model 6 | val title = item.Title 7 | 8 | Toast.makeText( 9 | applicationContext, 10 | "Kamu memilih $title", 11 | Toast.LENGTH_SHORT 12 | ).show() 13 | } 14 | ``` -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/challenge/7-menambahkan-dan-melihat-todo.md: -------------------------------------------------------------------------------- 1 | Jawabannya sederhana, kamu hanya perlu membuat sebuah fungsi baru yang melakukan get data dari firebase. 2 | 3 | ```kotlin 4 | fun getData() { 5 | val db = Firebase.firestore 6 | db.collection("todo") 7 | .get() 8 | .addOnSuccessListener { result -> 9 | val Items = ArrayList() 10 | 11 | for (document in result) { 12 | Log.d(TAG, "${document.id} => ${document.data}") 13 | Items.add( 14 | TodoModel( 15 | document.id.toString(), 16 | document.data.get("title").toString(), 17 | document.data.get("description").toString() 18 | ) 19 | ) 20 | } 21 | 22 | val adapter = TodoAdapter(this, R.layout.todo_item, Items) 23 | listTodo.adapter = adapter 24 | } 25 | .addOnFailureListener { exception -> 26 | Log.w(TAG, "Error getting documents.", exception) 27 | } 28 | } 29 | ``` 30 | 31 | Fungsi ini akan dipanggil pada dua tempat, yang pertama pada saat `onCreate`, dan pada saat `onResume` ketika screen kembali berpindah dari layar menambahkan todo. 32 | 33 | Secara keseluruhan file, akan menjadi seperti ini: 34 | 35 | ```kotlin 36 | 37 | import android.content.ContentValues.TAG 38 | import androidx.appcompat.app.AppCompatActivity 39 | import android.os.Bundle 40 | import android.util.Log 41 | import android.widget.ListView 42 | import com.google.android.material.floatingactionbutton.FloatingActionButton 43 | import com.google.firebase.firestore.ktx.firestore 44 | import com.google.firebase.ktx.Firebase 45 | import android.content.Intent 46 | 47 | class MainActivity : AppCompatActivity() { 48 | 49 | lateinit var listTodo : ListView 50 | lateinit var btnCreateTodo : FloatingActionButton 51 | 52 | override fun onCreate(savedInstanceState: Bundle?) { 53 | super.onCreate(savedInstanceState) 54 | setContentView(R.layout.activity_main) 55 | 56 | listTodo = findViewById(R.id.list_todo) 57 | btnCreateTodo = findViewById(R.id.btn_create_todo) 58 | 59 | this.getData() 60 | 61 | btnCreateTodo.setOnClickListener { 62 | val intent = Intent(this, CreateTodoActivity::class.java) 63 | startActivity(intent) 64 | } 65 | } 66 | 67 | override fun onResume() { 68 | super.onResume() 69 | this.getData() 70 | } 71 | 72 | fun getData() { 73 | val db = Firebase.firestore 74 | db.collection("todo") 75 | .get() 76 | .addOnSuccessListener { result -> 77 | val Items = ArrayList() 78 | 79 | for (document in result) { 80 | Log.d(TAG, "${document.id} => ${document.data}") 81 | Items.add( 82 | TodoModel( 83 | document.id.toString(), 84 | document.data.get("title").toString(), 85 | document.data.get("description").toString() 86 | ) 87 | ) 88 | } 89 | 90 | val adapter = TodoAdapter(this, R.layout.todo_item, Items) 91 | listTodo.adapter = adapter 92 | } 93 | .addOnFailureListener { exception -> 94 | Log.w(TAG, "Error getting documents.", exception) 95 | } 96 | } 97 | } 98 | ``` 99 | 100 | Hasil: 101 | 102 | ![Alt text](../assets/7-menambahkan-dan-melihat-todo/challenge-1.gif) -------------------------------------------------------------------------------- /tutorial/series/android/building-your-first-app/high-order-function.md: -------------------------------------------------------------------------------- 1 | # Higher-Order Functions dalam Kotlin 2 | 3 | Higher-Order Functions adalah konsep penting dalam pemrograman fungsional, dan sangat berguna dalam membangun kode yang lebih bersih dan lebih mudah dipahami. Kotlin, sebagai bahasa pemrograman yang mendukung paradigma pemrograman fungsional dan pemrograman berorientasi objek, menyediakan dukungan yang sangat baik untuk fungsi orde-tinggi. 4 | 5 | 1. **Apa itu fungsi orde-tinggi?** 6 | 7 | Fungsi orde-tinggi adalah fungsi yang bisa menerima fungsi lain sebagai parameter, atau mengembalikan fungsi sebagai hasilnya, atau keduanya. Dengan kata lain, fungsi orde-tinggi memungkinkan kita untuk memanipulasi fungsi-fungsi lainnya, sama seperti kita memanipulasi variabel atau objek. 8 | 9 | 2. **Kenapa fungsi orde-tinggi penting?** 10 | 11 | Fungsi orde-tinggi sangat berguna dalam banyak situasi. Misalnya, mereka bisa membuat kode kita lebih ringkas dan mudah dibaca, memungkinkan kita untuk menulis fungsi yang lebih umum dan dapat digunakan kembali, dan membantu kita dalam menulis kode yang lebih deklaratif dan lebih mudah dipahami. 12 | 13 | 3. **Bagaimana cara kerja fungsi orde-tinggi?** 14 | 15 | Berikut ini adalah contoh sederhana dari fungsi orde-tinggi dalam Kotlin: 16 | 17 | ```kotlin 18 | fun operateOnNumbers(a: Int, b: Int, operation: (Int, Int) -> Int): Int { 19 | return operation(a, b) 20 | } 21 | ``` 22 | 23 | Dalam contoh ini, `operateOnNumbers` adalah fungsi orde-tinggi yang menerima dua parameter integer dan sebuah fungsi `operation` sebagai parameter. Fungsi `operation` ini adalah fungsi yang menerima dua parameter integer dan mengembalikan integer. Kemudian, fungsi `operateOnNumbers` mengembalikan hasil pemanggilan fungsi `operation`. 24 | 25 | Anda bisa memanggil fungsi `operateOnNumbers` dengan fungsi apapun yang cocok dengan tipe `operation`, seperti berikut: 26 | 27 | ```kotlin 28 | val result = operateOnNumbers(4, 2, { a, b -> a * b }) 29 | println(result) // Output: 8 30 | ``` 31 | 32 | Dalam contoh ini, kita memanggil `operateOnNumbers` dengan fungsi lambda `{ a, b -> a * b }` yang mengalikan dua bilangan. Hasilnya adalah 8. 33 | 34 | Harap dicatat bahwa fungsi orde-tinggi dan lambda dapat mempengaruhi kinerja aplikasi Anda jika digunakan secara berlebihan, karena setiap fungsi orde-tinggi dan lambda menghasilkan objek tambahan saat runtime. Namun, dalam banyak kasus, manfaat keterbacaan dan fleksibilitas yang mereka berikan bisa lebih berharga. 35 | 36 | # **Lambda dalam Kotlin** 37 | 38 | Lambda adalah fungsi anonim, yang berarti mereka adalah fungsi yang tidak memiliki nama. Lambda sering digunakan dalam pemrograman fungsional dan sangat berguna ketika kita ingin mendeklarasikan fungsi sederhana tanpa harus mendefinisikannya secara formal. 39 | 40 | 1. **Apa itu Lambda?** 41 | 42 | Lambda adalah blok kode yang bisa dijalankan nanti atau diteruskan ke dalam fungsi lain sebagai parameter. Lambda dapat mengakses variabel dan konstanta dari lingkup tempat mereka didefinisikan. Dalam Kotlin, sintaks lambda adalah `{ parameter1, parameter2, ... -> kode }`. 43 | 44 | 2. **Bagaimana cara kerja Lambda?** 45 | 46 | Dalam contoh sebelumnya, kita menggunakan lambda dalam pemanggilan fungsi `operateOnNumbers`. Berikut ini adalah potongan kode tersebut: 47 | 48 | ```kotlin 49 | val result = operateOnNumbers(4, 2, { a, b -> a * b }) 50 | println(result) // Output: 8 51 | ``` 52 | 53 | Dalam kode ini, `{ a, b -> a * b }` adalah sebuah lambda. Lambda ini menerima dua parameter `a` dan `b`, dan mengembalikan hasil kali dari `a` dan `b`. Lambda ini diteruskan sebagai argumen ketiga ke fungsi `operateOnNumbers`. 54 | 55 | 3. **Kenapa Lambda penting?** 56 | 57 | Lambda sangat penting dalam pemrograman fungsional karena mereka memungkinkan kita untuk menulis kode yang lebih ringkas dan lebih mudah dipahami. Dengan lambda, kita bisa menulis fungsi sederhana sebagai ekspresi inline, yang membuat kode kita lebih bersih dan lebih mudah dibaca. 58 | 59 | Harap dicatat bahwa, dalam Kotlin, jika fungsi menerima lambda sebagai parameter terakhir, kita bisa meletakkan lambda tersebut di luar tanda kurung. Jadi, pemanggilan fungsi `operateOnNumbers` bisa ditulis ulang seperti ini: 60 | 61 | ```kotlin 62 | val result = operateOnNumbers(4, 2) { a, b -> a * b } 63 | println(result) // Output: 8 64 | ``` 65 | 66 | Ini adalah sintaks yang lebih disukai dan lebih umum digunakan dalam Kotlin ketika kita bekerja dengan lambda. -------------------------------------------------------------------------------- /tutorial/series/devops/salt/1-introduction.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/devops/salt/1-introduction.md -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/1-introduction.md: -------------------------------------------------------------------------------- 1 | # 1 - Introduction 2 | 3 | - [1 - Introduction](#1---introduction) 4 | - [MongoDB](#mongodb) 5 | - [Features](#features) 6 | - [Konsep Dasar MongoDB](#konsep-dasar-mongodb) 7 | - [MongoDB vs RDBMS](#mongodb-vs-rdbms) 8 | - [Model Data dan Skema](#model-data-dan-skema) 9 | - [Relasi dan Transaksi](#relasi-dan-transaksi) 10 | - [Skalabilitas dan Performa](#skalabilitas-dan-performa) 11 | - [Query Language dan Use Cases](#query-language-dan-use-cases) 12 | 13 | ## MongoDB 14 | 15 | MongoDB adalah database dokumen NoSQL yang open-source. Dirancang untuk menyimpan data dalam format fleksibel, mirip dengan JSON, yang disebut BSON (Binary JSON). Keunikan MongoDB terletak pada kemampuannya untuk menangani data dengan struktur yang beragam dan kompleks. 16 | 17 | MongoDB dikembangkan oleh MongoDB Inc. (sebelumnya dikenal sebagai 10gen) pada tahun 2007. Versi pertama dari database ini dirilis ke publik pada tahun 2009. Nama "Mongo" berasal dari kata "humongous", menunjukkan kemampuannya untuk menangani data dalam jumlah yang sangat besar. 18 | 19 | ## Features 20 | 21 | MongoDB memiliki beberapa fitur utama yang membuatnya menonjol di antara database lainnya: 22 | 23 | 1. **Skalabilitas horizontal**: MongoDB dapat dengan mudah didistribusikan di beberapa server, memungkinkan pertumbuhan database seiring dengan peningkatan kebutuhan. 24 | 25 | 2. **Fleksibilitas**: Skema yang dinamis memungkinkan struktur dokumen yang bervariasi dalam satu koleksi, memberikan fleksibilitas yang tinggi dalam pengelolaan data. 26 | 27 | 3. **Performa tinggi**: MongoDB mendukung indexing, sharding, dan replikasi, yang berkontribusi pada kinerja dan ketersediaan data yang tinggi. 28 | 29 | 4. **Dukungan untuk berbagai bahasa pemrograman**: Tersedia driver untuk banyak bahasa pemrograman populer, memudahkan integrasi dengan berbagai platform pengembangan. 30 | 31 | ## Konsep Dasar MongoDB 32 | 33 | Untuk memahami MongoDB, penting untuk mengenal beberapa konsep dasarnya: 34 | 35 | 1. **Database**: Kontainer fisik untuk koleksi. Satu instance MongoDB dapat memiliki beberapa database. 36 | 37 | 2. **Collection**: Grup dokumen MongoDB, setara dengan tabel dalam RDBMS. Koleksi tidak memaksakan struktur yang seragam pada dokumen-dokumennya. 38 | 39 | 3. **Dokumen**: Satu record dalam MongoDB, disimpan dalam format BSON. Dokumen adalah unit dasar data dalam MongoDB dan dapat memiliki struktur yang berbeda-beda dalam satu koleksi. 40 | 41 | 4. **Field**: Pasangan key-value dalam dokumen, setara dengan kolom dalam RDBMS. Field dapat berisi berbagai tipe data, termasuk array dan dokumen bersarang. 42 | 43 | Pemahaman tentang konsep-konsep ini penting untuk mengoptimalkan penggunaan MongoDB dalam pengembangan aplikasi dan pengelolaan data. 44 | 45 | ## MongoDB vs RDBMS 46 | 47 | ### Model Data dan Skema 48 | 49 | RDBMS menggunakan model data tabular dengan skema yang tetap, sedangkan MongoDB mengadopsi model data dokumen dengan skema yang fleksibel. Dalam RDBMS, struktur tabel bersifat kaku, dan perubahan memerlukan migrasi. Sebaliknya, MongoDB memungkinkan dokumen dalam koleksi yang sama memiliki struktur yang berbeda, memberikan fleksibilitas yang lebih besar. 50 | 51 | ### Relasi dan Transaksi 52 | 53 | RDBMS mengandalkan foreign key untuk menghubungkan tabel, sementara MongoDB menggunakan referensi atau embedding dokumen untuk menyimpan data terkait. Dalam hal transaksi, RDBMS mendukung transaksi ACID sepenuhnya, sedangkan MongoDB baru mendukung transaksi ACID multi-dokumen sejak versi 4.0. 54 | 55 | ### Skalabilitas dan Performa 56 | 57 | RDBMS umumnya di-scale secara vertikal dengan meningkatkan kapasitas server, sementara MongoDB dirancang untuk scale secara horizontal dengan menambah lebih banyak server. Dalam hal performa, RDBMS optimal untuk operasi kompleks yang melibatkan banyak tabel, sedangkan MongoDB sangat cepat untuk operasi read/write pada data dokumen. 58 | 59 | ### Query Language dan Use Cases 60 | 61 | RDBMS menggunakan SQL (Structured Query Language), sementara MongoDB menggunakan query language berbasis JSON. RDBMS ideal untuk aplikasi yang memerlukan transaksi kompleks dan integritas data yang ketat, sedangkan MongoDB cocok untuk aplikasi yang membutuhkan skalabilitas tinggi dan fleksibilitas data. 62 | 63 | Pemilihan antara RDBMS dan MongoDB tergantung pada kebutuhan spesifik aplikasi. RDBMS tetap menjadi pilihan utama untuk sistem yang memerlukan konsistensi data yang kuat dan transaksi kompleks, seperti sistem perbankan atau e-commerce. Di sisi lain, MongoDB unggul dalam skenario yang membutuhkan penanganan data besar dengan struktur yang berubah-ubah, seperti aplikasi sosial media atau analitik real-time. 64 | -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/2-servers-and-clients.md: -------------------------------------------------------------------------------- 1 | # 2 - Servers and Clients 2 | 3 | - [2 - Servers and Clients](#2---servers-and-clients) 4 | - [Koneksi](#koneksi) 5 | - [MongoDB Server](#mongodb-server) 6 | - [MongoDB Clients](#mongodb-clients) 7 | - [Interaksi Client-Server](#interaksi-client-server) 8 | - [Keamanan](#keamanan) 9 | - [Skalabilitas](#skalabilitas) 10 | 11 | ## Koneksi 12 | 13 | Dalam mengakses antara server dan klien, MongoDB secara garis besar sama seperti RDBMS. Perhatikan graph berikut: 14 | 15 | ```mermaid 16 | graph TD 17 | A[Clients] -->|Queries/Operations| D 18 | D[mongod Process] -->|Read/Write| E[Database Storage] 19 | D -.->|Can be configured as| F[Replica Set / Sharding] 20 | ``` 21 | 22 | ## MongoDB Server 23 | 24 | Ini adalah inti dari sistem MongoDB, yang menjalankan database engine. Server bertanggung jawab untuk menyimpan, mengambil, dan mengelola data. Biasanya berjalan sebagai proses daemon (mongod) di sistem operasi. Dapat dikonfigurasi untuk berjalan sebagai standalone, replica set, atau sharded cluster. 25 | 26 | ## MongoDB Clients 27 | 28 | Ini adalah aplikasi atau tools yang berinteraksi dengan MongoDB server. 29 | 30 | - MongoDB Shell (mongo): Command-line interface untuk berinteraksi dengan database. Biasanya diinstall pada client untuk konfigurasi dan interaksi dasar. 31 | - Driver MongoDB: Library untuk berbagai bahasa pemrograman (seperti Python, Java, Node.js) yang memungkinkan aplikasi berinteraksi dengan MongoDB. 32 | - GUI Tools: Seperti MongoDB Compass untuk manajemen visual database. 33 | - Aplikasi yang Anda kembangkan: Menggunakan driver MongoDB untuk berkomunikasi dengan server. 34 | 35 | ## Interaksi Client-Server 36 | 37 | Clients mengirim permintaan (queries, updates, etc.) ke server. Server memproses permintaan tersebut dan mengembalikan hasilnya ke client. Komunikasi biasanya menggunakan protokol wire yang khusus didesain untuk MongoDB. 38 | 39 | ## Keamanan 40 | 41 | Autentikasi dan otorisasi diterapkan di sisi server. 42 | Clients perlu menyediakan kredensial yang sesuai untuk mengakses database. 43 | 44 | ## Skalabilitas 45 | 46 | MongoDB dapat di-scale secara horizontal dengan menambahkan lebih banyak server (sharding). Clients dapat terhubung ke multiple servers dalam konfigurasi cluster. 47 | 48 | Berikut gambaran cluster skalabilitas dalam mongoDB. 49 | 50 | ```mermaid 51 | graph TD 52 | C[Client] --> MR[MongoDB Router] 53 | MR -->|Read Write| P[Primary] 54 | MR -->|Read| S1[Secondary 1] 55 | MR -->|Read| S2[Secondary 2] 56 | P -->|Replication| S1 57 | P -->|Replication| S2 58 | S1 -.->|Sync| P 59 | S2 -.->|Sync| P 60 | ``` 61 | -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/9-replication.md: -------------------------------------------------------------------------------- 1 | # 9 - Replication 2 | 3 | - [9 - Replication](#9---replication) 4 | - [Overview](#overview) 5 | - [Alur Replikasi di MongoDB](#alur-replikasi-di-mongodb) 6 | - [Kriteria Pemilihan Primary Baru](#kriteria-pemilihan-primary-baru) 7 | - [Proses Pemilihan](#proses-pemilihan) 8 | - [Operasi Baca dan Tulis pada Primary Baru](#operasi-baca-dan-tulis-pada-primary-baru) 9 | - [Perbandingan Replikasi MongoDB dan MySQL](#perbandingan-replikasi-mongodb-dan-mysql) 10 | 11 | ## Overview 12 | 13 | Replication (Replika) dalam konteks database adalah salinan data yang identik dengan data asli, yang disimpan di server terpisah. Tujuan utama replikasi adalah: 14 | 15 | 1. Meningkatkan ketersediaan data (high availability) 16 | 2. Meningkatkan toleransi terhadap kegagalan (fault tolerance) 17 | 3. Meningkatkan kinerja dengan mendistribusikan beban baca (read scaling) 18 | 4. Mendukung disaster recovery 19 | 20 | Tidak memungkinkan untuk terhubung ke salah satu shard cluster menggunakan **MongoDB Atlas Free Tier**, karena fitur sharding tidak tersedia pada tingkat layanan ini. Agar dapat digunakan maka perlu meningkatkan ke tier berbayar yang mendukung fitur ini. 21 | 22 | ## Alur Replikasi di MongoDB 23 | 24 | ![alt text](./assets/9-replication/1.png) 25 | 26 | MongoDB menggunakan model replikasi yang disebut Replica Set. Berikut adalah alur replikasi di MongoDB: 27 | 28 | 1. **Inisialisasi Replica Set**: 29 | 30 | - Satu node diinisialisasi sebagai Primary, sisanya sebagai Secondary. 31 | 32 | 2. **Operasi Tulis**: 33 | 34 | - Klien mengirim operasi tulis ke node Primary. 35 | - Primary mencatat operasi dalam oplog (operations log). 36 | - Primary menerapkan perubahan ke datanya sendiri. 37 | 38 | 3. **Replikasi ke Secondary**: 39 | 40 | - Node Secondary secara asinkron menyalin oplog dari Primary. 41 | - Secondary menerapkan operasi dari oplog ke data mereka. 42 | 43 | 4. **Sinkronisasi Berkelanjutan**: 44 | 45 | - Secondary terus memantau oplog Primary untuk perubahan baru. 46 | - Jika tertinggal, Secondary akan melakukan sinkronisasi penuh jika diperlukan. 47 | 48 | 5. **Heartbeats dan Pemilihan**: 49 | 50 | - Semua node bertukar heartbeat secara teratur. 51 | - Jika Primary tidak tersedia, Secondary akan memilih Primary baru. 52 | 53 | 6. **Pembacaan dari Secondary** (opsional): 54 | - Klien dapat dikonfigurasi untuk membaca dari Secondary untuk load balancing. 55 | 56 | ### Kriteria Pemilihan Primary Baru 57 | 58 | Ketika primary node dalam MongoDB replica set tidak tersedia, proses pemilihan primary baru (election) terjadi dengan kriteria sebagai berikut: 59 | 60 | 1. **Eligibility**: 61 | 62 | - Hanya secondary node yang eligible dapat menjadi primary. 63 | - Node harus memiliki `{priority: 1}` atau lebih tinggi. 64 | 65 | 2. **Oplog Currency**: 66 | 67 | - Node dengan oplog paling up-to-date memiliki peluang lebih besar terpilih. 68 | 69 | 3. **Connectivity**: 70 | 71 | - Node harus dapat berkomunikasi dengan mayoritas anggota replica set. 72 | 73 | 4. **Priority Setting**: 74 | 75 | - Node dengan priority setting lebih tinggi akan diutamakan. 76 | 77 | 5. **Votes**: 78 | 79 | - Node harus menerima mayoritas suara dari anggota replica set yang memiliki hak suara. 80 | 81 | 6. **Tiebreaker**: 82 | - Jika terjadi seri, node dengan optime (timestamp operasi terakhir) tertinggi akan menang. 83 | 84 | ### Proses Pemilihan 85 | 86 | 1. Inisiasi pemilihan ketika primary tidak merespon heartbeat. 87 | 2. Eligible secondary mempromosikan diri sebagai kandidat. 88 | 3. Kandidat meminta suara dari anggota lain. 89 | 4. Anggota memberikan suara berdasarkan kriteria di atas. 90 | 5. Kandidat dengan mayoritas suara menjadi primary baru. 91 | 92 | ### Operasi Baca dan Tulis pada Primary Baru 93 | 94 | Ketika sebuah secondary node terpilih menjadi primary baru: 95 | 96 | 1. **Transisi Peran**: 97 | 98 | - Node mengubah statusnya dari secondary menjadi primary. 99 | - Proses ini biasanya berlangsung sangat cepat (dalam hitungan detik). 100 | 101 | 2. **Kemampuan Operasional**: 102 | 103 | - Segera setelah menjadi primary, node dapat melakukan operasi baca DAN tulis. 104 | - Tidak ada "warm-up period" – operasi baca/tulis dapat langsung dilakukan. 105 | 106 | 3. **Konsistensi**: 107 | 108 | - Primary baru menjamin bahwa ia memiliki data paling up-to-date sebelum menerima operasi tulis. 109 | 110 | 4. **Penyesuaian Klien**: 111 | 112 | - Driver MongoDB yang kompatibel akan otomatis mendeteksi primary baru dan mengarahkan operasi tulis ke sana. 113 | 114 | 5. **Read Preference**: 115 | - Operasi baca tetap dapat dikonfigurasi untuk membaca dari secondary jika diinginkan. 116 | 117 |
118 |
119 |
120 | 121 | ## Perbandingan Replikasi MongoDB dan MySQL 122 | 123 | ![alt text](./assets/9-replication/2.png) 124 | 125 | | Aspek | MongoDB | MySQL | 126 | | ----------------- | ----------------------------------------------- | --------------------------------------------------------------- | 127 | | Model Replikasi | Replica Set | Master-Slave atau Group Replication | 128 | | Log Replikasi | Oplog (Operations Log) | Binary Log (Binlog) | 129 | | Pemilihan Leader | Otomatis (dalam Replica Set) | Manual (dalam Master-Slave), Otomatis (dalam Group Replication) | 130 | | Konsistensi | Eventually Consistent (default) | Strongly Consistent (default) | 131 | | Skalabilitas Baca | Built-in dengan Secondary Reads | Memerlukan konfigurasi tambahan | 132 | | Format Log | BSON (Binary JSON) | Row-based, Statement-based, atau Mixed | 133 | | Topologi | Biasanya odd-numbered set (e.g., 3, 5, 7 nodes) | Flexible (Master-Slave atau Multi-Master) | 134 | | Failover | Otomatis dalam Replica Set | Manual dalam Master-Slave, Otomatis dalam Group Replication | 135 | | Sharding | Native support | Memerlukan konfigurasi tambahan (MySQL Cluster) | 136 | | Replikasi Partial | Tidak didukung | Didukung (dapat mereplikasi tabel tertentu) | 137 | -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/1.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/2.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/3.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/4.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/5.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/6.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/7.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/10-backup-and-restore/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/10-backup-and-restore/8.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/1.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 20-49.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 20-49.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 21-57.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 21-57.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 22-58.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/Peek 2025-01-16 22-58.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-1.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-10.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-11.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-2.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-3.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-4.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-5.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-6.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-7.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-8.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image-9.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/image.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/network-access.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/network-access.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/network-list-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/network-list-2.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/3-installation/network-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/3-installation/network-list.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/1.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/1.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/7-building-todo-list-with-js/2.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/8-performance-indexing/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/8-performance-indexing/1.gif -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/9-replication/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/9-replication/1.png -------------------------------------------------------------------------------- /tutorial/series/mongodb-essential/assets/9-replication/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/mongodb-essential/assets/9-replication/2.png -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/1-install-playwright.md: -------------------------------------------------------------------------------- 1 | # 1. Menginstall Playwright 2 | 3 | Sebelum kita melakukan instalasi playwright, buatlah folder pada tempat yang kalian inginkan, bisa di dalam `My Documents`, atau dimanapun. 4 | 5 | Selanjutnya, untuk melakukan instalasi Playwright, cukup install NodeJS seperti yang sudah dijabarkan pada *introduction*. 6 | 7 | ## Instalasi Projek 8 | 9 | Buka file explorer kalian, lalu buat folder dimanapun yang kalian mau untuk membuat projeknya. 10 | 11 | ![Alt text](assets/1.png) 12 | 13 | Selanjutnya, buka visual studio code, lalu klik open folder, dan pilih folder yang telah kalian buat. 14 | 15 | Selanjutnya, buka terminal lalu ketikkan perintah berikut: 16 | 17 | ```bash 18 | npm init playwright@latest 19 | ``` 20 | 21 | Perhatikan GIF berikut: 22 | 23 | ![Alt text](./assets/1.gif) 24 | 25 | Perhatikan beberapa catatan berikut: 26 | 27 | - Disini kita menggunakan Typescript, apa bedanya dengan Javascript? Sebenarnya secara karakteristik sama, namun Typescript mengutamakan safety data types yang mana menjaga agar tipe data yang dinamis pada Javascript tidak menyebabkan error ghoib yang menyulitkan developer. 28 | - Kita memasukkan seluruh unit tests pada folder tests, hal ini akan memudahkan kita untuk melakukan organisir terhadap projek test kita. 29 | - Kita tidak men-setting CI/CD, karena ini masih pembelajaran awal, kita tidak perlu melakukan setting terhadap CI/CD. Nantinya ketika di level industri yang membutuhkan pengujicobaan lebih ketat, bisa ditambahkan. 30 | 31 | ## Mematikan konfigurasi webkit 32 | 33 | Selanjutnya kita perlu mematikan konfigurasi webkit, webkit adalah browser yang bisa dikatakan mirip safari. Tujuan utamanya adalah memeriksa sebuah website pada beberapa browser guna memastikan pengalaman yang baik bagi seluruh pengguna. 34 | 35 | Sayangnya, pada windows, hal ini menyebabkan error. Sehingga kita perlu mematikan konfigurasi webkit. 36 | 37 | Perhatikan cara mematikannya: 38 | 39 | ![Alt text](./assets/2.gif) 40 | 41 | Cukup tekan `CTRL + /` pada saat memblocking, akan membuat kode menjadi ter-comment secara multiline. 42 | 43 | ## Jalankan projek 44 | 45 | Terakhir kita bisa menjalankan projek dengan cara memasukkan perintah berikut pada terminal: 46 | 47 | ```bash 48 | npx playwright test --ui 49 | ``` 50 | 51 | Perhatikan hasilnya: 52 | 53 | ![Alt text](./assets/3.gif) 54 | 55 | Viola, kita sudah berhasil menjalankan playwright dan kita bisa masuk ke step selanjutnya yaitu membuat unit test. 56 | -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/1.gif -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/1.png -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/2.gif -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/2.png -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/3.gif -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/assets/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/playwright-with-node-js/assets/4.gif -------------------------------------------------------------------------------- /tutorial/series/playwright-with-node-js/readme.md: -------------------------------------------------------------------------------- 1 | # Playwright Node.js Tutorial 2 | 3 | Selamat datang di repositori Playwright Node.js Tutorial. Repositori ini dibuat untuk membantu Anda memahami bagaimana menggunakan Playwright, sebuah perpustakaan Node.js yang memungkinkan Anda untuk mengotomatisasi browser Chrome, Firefox, dan WebKit dengan JavaScript. 4 | 5 | ## Apa Itu Playwright? 6 | 7 | Playwright adalah perpustakaan Node.js yang memungkinkan Anda untuk mengotomatisasi operasi browser dengan JavaScript. Dengan Playwright, Anda dapat mengontrol penjelajahan web untuk mengotomatisasi pengujian UI, menghasilkan screenshot dan PDF dari halaman web, dan menjalankan crawler. 8 | 9 | ## Persyaratan 10 | 11 | Sebelum memulai dengan tutorial ini, pastikan Anda telah memenuhi persyaratan berikut: 12 | 13 | 1. **Node.js:** Playwright membutuhkan Node.js versi 12 atau lebih tinggi. Anda dapat memeriksa versi Node.js yang Anda miliki dengan menjalankan perintah `node -v` di terminal Anda. Jika Anda belum menginstal Node.js, Anda dapat mengunduhnya dari [sini](https://nodejs.org/). 14 | 15 | 2. **npm (Node Package Manager):** npm adalah manajer paket yang digunakan untuk menginstal dependensi Node.js. Biasanya, npm akan diinstal secara otomatis ketika Anda menginstal Node.js. 16 | 17 | 3. **Pengetahuan Dasar JavaScript dan Node.js:** Tutorial ini mengasumsikan bahwa Anda memiliki pengetahuan dasar tentang JavaScript dan Node.js. Jika Anda baru dalam JavaScript atau Node.js, Anda mungkin ingin mempelajari dasar-dasarnya terlebih dahulu. 18 | 19 | Setelah memenuhi semua persyaratan di atas, Anda siap untuk memulai belajar dengan tutorial Playwright Node.js ini. 20 | 21 | Selamat belajar! -------------------------------------------------------------------------------- /tutorial/series/python-programming/assets/6eb0b1e6-4ebd-47ae-9a48-76dbeec9704e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/python-programming/assets/6eb0b1e6-4ebd-47ae-9a48-76dbeec9704e.png -------------------------------------------------------------------------------- /tutorial/series/python-programming/assets/7b0d187c-b125-4e35-94ac-6ee81c33e1fa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/python-programming/assets/7b0d187c-b125-4e35-94ac-6ee81c33e1fa.png -------------------------------------------------------------------------------- /tutorial/series/rust/fundamental/1-introduction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Kenalan sama OOP, penting gak penting sih](#kenalan-sama-oop-penting-gak-penting-sih) 10 | 11 | ## Introduction 12 | 13 | Sebenernya keliatan basi sih belajar fundamental begini pake bahasa Rust, tapi menurut saya Rust ini agak beda. Soalnya dari segi bahasa dia bisa dibilang lebih rumit daripada bahasa lainnya seperti Python. 14 | 15 | Bagi yang udah pernah belajar C atau C++ mungkin gak kesulitan sama Rust, tapi bagi yang belom pernah sama sekali? Maka dari itu saya pengen berbagi catatan sederhana biar kalian bisa lebih mudah mempelajari fundamental pake Rust. 16 | 17 | Ohiya kalo misalnya ditanya gue belajarnya darimana, gue belajarnya [disini](https://doc.rust-lang.org/book/) guys tentunya dengan bantuan latihan soal dari [ChatGPT](https://chat.openapi.com). 18 | 19 | ## Compiler 20 | 21 | Kalo lo mau jalanin rust di laptop lo bisa download langsung [disini](https://www.rust-lang.org/tools/install). 22 | 23 | Tapi saran gue, lo mendingan pake online aja kaya [rust playground](https://play.rust-lang.org/?version=stable&mode=debug&edition=2021) atau lo bisa juga pake [replit](https://replit.com). 24 | 25 | Rust ini kaya C, C++, atau Java. Sebelum dijalanin harus di-compile terlebih dahulu, beda sama Python yang interpreter. 26 | 27 | ## Belajar Variabel 28 | 29 | Gue gak perlu basa-basi lah ya jelasin apa itu variabel, gue anggap lo udah paham apa itu variabel, soalnya disini gue nulis untuk orang yang udah pernah terjun ke programming, bukan yang bener-bener buta. 30 | 31 | Pada sarnya rust itu untuk ngebuat variabel cukup sesimple ini: 32 | 33 | ```rust 34 | let x = 42; 35 | ``` 36 | 37 | Inget ya di rust itu pake titik koma, soalnya emang begitu grammarnya. 38 | 39 | Nah sekarang lo perlu tau bahwa rust itu gak bisa sembarangan ditiban nilainya, lo harus pake syntax `mut`. 40 | 41 | ```rust 42 | let mut x = 42; 43 | x = 32; 44 | ``` 45 | 46 | ## Static Variable 47 | 48 | Di Rust juga ada static variable, ya udah pasti syntaxnya pake static. Bedanya kalo pake static kita harus masukin tipe datanya. Sebenernya sih kalo non-static kita juga bisa pake tipe data, tapi kalo static tuh wajib. 49 | 50 | ```rust 51 | static PI : f64 = 3.14; 52 | static MY_NAME : &str = "Hudya"; 53 | ``` 54 | 55 | Nah rumus tipe data sebenernya sederhana yaitu `static nama-variabel : tipe data = nilai`. 56 | 57 | > Bang itu kenapa &str bukan str? 58 | 59 | Iyak nanti dijelasin pas bagian string ya. 60 | 61 | ## Nyetak Data 62 | 63 | Setelah kita kenalan sama variabel, ya kita belajar nyetak data ges. 64 | 65 | Nyetak data di rust pada umumnya sederhana, tinggal gini aja: 66 | 67 | ```rust 68 | print!("Hello, World!") 69 | ``` 70 | 71 |
72 | 73 | Nah, tapi beda guys sama kalo nyetak variabel, kita gak segampang Python yang tinggal print aja, kita perlu masukin placeholder agar bisa dicompile sebagai string. 74 | 75 | ```rust 76 | let mut x = 42; 77 | print!("Nilai x adalah {}", x); 78 | ``` 79 | 80 |
81 | 82 | > Kenapa harus pake {} bang? 83 | 84 | Ya emang begitu aturannya, kalo mau nyetak object variabel di print, ya pake `placeholder`. 85 | 86 | > Bang emang kalo di rust ngeprint harus ada tanda seru (!)-nya ya? 87 | 88 | Iya, emang begitu grammarnya, gak usah didebatin. 89 | 90 | Ada cara lain juga ngeprint, yaitu `println!()`, udah kebayang hasilnya gimana? Ya, nyetak garis baru. 91 | 92 | ```rust 93 | let mut x = 42; 94 | println!("Nilai x adalah {}", x); 95 | ``` 96 | 97 | Bedanya `print` dan `println` adalah kalo `println` itu nyetak baris baru biar langsung kebawah, kalo kamu pake `print` dan nyetak dua kali, dia malah nyetak kesamping. 98 | 99 | Ada satu lagi, namanya `format`. 100 | 101 | Syntax ini dipake kalo kita mau nyimpen di sebuah nilai terlebih dahulu tanpa refer ke memory aslinya, gunanya biar data aslinya gak keganggu (kata ChatGPT sih begitu). 102 | 103 | ```rust 104 | let mut x = 42; 105 | let message = format!("Nilai x adalah {} ", x); 106 | print!("{}", message); 107 | ``` 108 | 109 | > Dih ribet yak udah di format pake placeholder, di print pake lagi... 110 | 111 | Ya emang, tapi secara memory ini aman, karena kita ngeprint objek si message, bukan object x. 112 | 113 | Jadi kalo kita ngeprint x, kita refer ke nilai dari memory x, kalo kita pake format, kita bikin copy-annya yang jelas memorynya beda. Kalo ditanya lebih aman gak? Jelas lebih aman kalo kita bikin baru, karena gak akan berdampak pada memory aslinya, walau gue sendiri prefer gak pake format sih. 114 | 115 | Menurut ChatGPT sih `format` dipake kalo kita ngebangun aplikasi GUI gitu kaya desktop. 116 | 117 |
118 | 119 | Udah segini dulu ya materinya nanti dilanjut lagi kalo gak mager hehehe. -------------------------------------------------------------------------------- /tutorial/series/rust/rocket/1-belajar-framework-rocket.md: -------------------------------------------------------------------------------- 1 | ## 1. Belajar Framework Rocket - Introduction 2 | 3 | Gue lagi pengen ngulik framework rust, yaitu rocket. Dimana framework ini merupakan salah satu framework yang ajib buat rust. 4 | 5 | Framework ini memungkinkan kita untuk bikin API yang jauh lebih cepat daripada ngoding native, ya karena kita pengen ngulik mah, ya gas-gas aja gak sih? 😆 6 | 7 | ## Install Projek 8 | 9 | Pertama kita install projeknya terlebih dahulu, kita akan pake cargo. Btw, gue asumsiin ya kalo kalian udah paham cara menggunakan Rust atau bahkan belajar dasarnya, kalo kalian belom paham bisa coba baca ini: 10 | 11 | 12 | 13 | Pertama, kita harus make sure bahwa kita pake rust yang versi stable, ketik ini di terminal: 14 | 15 | ```bash 16 | rustup default stable 17 | ``` 18 | 19 | Kedua, pergi ke salah satu direktori kalian terus jalanin perintah berikut: 20 | 21 | ```bash 22 | cargo new hello-rocket --bin 23 | cd hello-rocket 24 | ``` 25 | 26 | Nantinya kamu akan otomatis masuk ke dalam folder projekmu, rust ini agak beda, kita gak se-ez ngeinstall laravel / code igniter pake composer. Kurang lebih mirip-mirip sama python yang kita harus bikin foldernya dulu terus bikin projeknya pake nginstall library/dependenciesnya. 27 | 28 | Ohiya, kalo kamu nanya `--bin` itu artinya kita bikin projek yang jadi project binary, alias program yang executetable, soalnya kalo gak pake `--bin` atau malah pake `--lib`, jadinya kita tuh mau bikin library di rust, gitu aja sih simplenya. 29 | 30 | ## Install Library 31 | 32 | Setelah masuk ke dalam projek, buka foldernya pake VSCode kalian terus cari file cargo.toml, edit bagian dependenciesnya jadi kaya gini: 33 | 34 | ```toml 35 | [dependencies] 36 | rocket = "=0.5.0-rc.3" 37 | ``` 38 | 39 | Kita akan pake versi terbaru dari projeknya si rocket. 40 | 41 | ## Ubah file `main.rs` 42 | 43 | Sekarang kita ubah file main.rs di dalam folder src jadi kaya gini: 44 | 45 | ```rs 46 | #[macro_use] extern crate rocket; 47 | 48 | #[get("/")] 49 | fn index() -> &'static str { 50 | "Hello, world!" 51 | } 52 | 53 | #[launch] 54 | fn rocket() -> _ { 55 | rocket::build().mount("/", routes![index]) 56 | } 57 | ``` 58 | 59 | Bisa jalan gak sekarang? Bisa banget cuy! 60 | 61 | Langsung eksekusi aja pake 62 | 63 | ```bash 64 | cargo run 65 | ``` 66 | 67 | Nanti hasilnya kaya gini: 68 | 69 | ```bash 70 | > cargo run 71 | 🔧 Configured for debug. 72 | >> address: 127.0.0.1 73 | >> port: 8000 74 | >> workers: [..] 75 | >> keep-alive: 5s 76 | >> limits: [..] 77 | >> tls: disabled 78 | >> temp dir: /tmp 79 | >> log level: normal 80 | >> cli colors: true 81 | 🛰 Routes: 82 | >> (index) GET / 83 | 🚀 Rocket has launched from http://127.0.0.1:8000 84 | ``` 85 | 86 | Kita bisa akses localhost:8000, dan voila, sudah berhasil deh~ 87 | 88 | ## Tambahin Routes Baru 89 | 90 | Kita mau coba nih tambahin routes baru, sekarang tambahin deh fungsi ini: 91 | 92 | ```rs 93 | #[get("/hi")] 94 | fn say_hi() -> &'static str { 95 | "Hi!" 96 | } 97 | 98 | 99 | #[launch] 100 | fn rocket() -> _ { 101 | rocket::build() 102 | .mount("/", routes![index]) 103 | .mount("/", routes![say_hi]) 104 | } 105 | ``` 106 | 107 | Keseluruhan filenya jadi kaya gini: 108 | 109 | ```rust 110 | #[macro_use] extern crate rocket; 111 | 112 | #[get("/")] 113 | fn index() -> &'static str { 114 | "Hello, world!" 115 | } 116 | 117 | #[get("/hi")] 118 | fn say_hi() -> &'static str { 119 | "Hi!" 120 | } 121 | 122 | #[launch] 123 | fn rocket() -> _ { 124 | rocket::build() 125 | .mount("/", routes![index]) 126 | .mount("/", routes![say_hi]) 127 | } 128 | ``` 129 | 130 | Sekarang stop pake CTRL + C terus jalanin ulang `cargo run`, akses ke localhost:8000/hi dan kamu akan ngeliat halaman baru 😃. 131 | 132 | ## Cara penamaan routing 133 | 134 | Kalo kamu perhatiin pada bagian mount, keduanya sama-sama pake `/` untuk mounting, kenapa? Karena kita udah nge-define URL-nya di bagian atas, pada bagian get("/hi") dan get("/"), kalo kita gak define disana, kita perlu define di mount, coba ubah semuanya jadi kaya gini: 135 | 136 | 137 | ```rust 138 | #[macro_use] extern crate rocket; 139 | 140 | #[get("/")] 141 | fn index() -> &'static str { 142 | "Hello, world!" 143 | } 144 | 145 | #[get("/")] 146 | fn say_hi() -> &'static str { 147 | "Hi!" 148 | } 149 | 150 | #[launch] 151 | fn rocket() -> _ { 152 | rocket::build() 153 | .mount("/", routes![index]) 154 | .mount("/hi", routes![say_hi]) 155 | } 156 | ``` 157 | 158 | Cobain stop pake CTRL + C terus jalanin lagi, voila, kamu berhasil akses juga. Jadi intinya adalah kamu bisa kasih nama di bagian mount atau bahkan di fungsinya. 159 | 160 | ## Routes dengan parameter 161 | 162 | Kita bisa dapetin parameter pake path di framework rocket, sekarang rombak lagi main.rs kamu jadi kaya begini: 163 | 164 | ```rust 165 | #[macro_use] extern crate rocket; 166 | 167 | #[get("/")] 168 | fn index() -> &'static str { 169 | "Hello, world!" 170 | } 171 | 172 | #[get("/hi")] 173 | fn say_hi() -> &'static str { 174 | "Hi!" 175 | } 176 | 177 | #[get("/say-name/")] 178 | fn say_name(name: &str) -> String { 179 | format!("Hello, {}!", name) 180 | } 181 | 182 | #[launch] 183 | fn rocket() -> _ { 184 | rocket::build() 185 | .mount("/", routes![index]) 186 | .mount("/", routes![say_hi]) 187 | .mount("/", routes![say_name]) 188 | } 189 | ``` 190 | 191 | Stop, jalanin lagi, dan coba akses ke `localhost:8000/say-name/hudya`, kamu bakalan ngeliat pesan "Hello, Hudya!" 192 | 193 | Gampang lah ya? Ini baru permulaan ges, nanti kita terusin sampai ke struktur foldernya~ -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/2-routing.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | by [@perogeremmer](https://twitter.com/perogeremmer) 4 | 5 | ## Routing 6 | 7 | Routing merupakan fitur untuk menentukan URL pada sebuah aplikasi web. Menggunakan library [routing](https://docs.adonisjs.com/guides/basics/routing) di adonisJS tidak sulit, karena berdasarkan dokumentasi kita hanya perlu menggunakan file `start/routes.ts` untuk menambahkan rute. 8 | 9 | Apabila kamu buka file tersebut kamu akan menemukan kode berikut: 10 | 11 | ```typescript 12 | /* 13 | |-------------------------------------------------------------------------- 14 | | Routes file 15 | |-------------------------------------------------------------------------- 16 | | 17 | | The routes file is used for defining the HTTP routes. 18 | | 19 | */ 20 | 21 | import router from '@adonisjs/core/services/router' 22 | 23 | router.on('/').render('pages/home') 24 | ``` 25 | 26 | Sekarang kita coba ubah dengan kode berikut: 27 | 28 | ```typescript 29 | /* 30 | |-------------------------------------------------------------------------- 31 | | Routes file 32 | |-------------------------------------------------------------------------- 33 | | 34 | | The routes file is used for defining the HTTP routes. 35 | | 36 | */ 37 | 38 | import router from '@adonisjs/core/services/router' 39 | 40 | router.get('/', () => { 41 | return 'Hello world from the home page.' 42 | }) 43 | 44 | router.get('/about', () => { 45 | return 'This is the about page.' 46 | }) 47 | 48 | router.get('/posts/:id', ({ params }) => { 49 | return `This is post with id ${params.id}` 50 | }) 51 | ``` 52 | 53 | Karena kita menjalankan proyek dengan `npm run dev`, otomatis aplikasi melakukan refresh untuk memperbarui tampilan. 54 | 55 | ```bash 56 | full-reload start/routes.ts 57 | ╭─────────────────────────────────────────────────╮ 58 | │ │ 59 | │ Server address: http://localhost:3333 │ 60 | │ Watch Mode: HMR │ 61 | │ Ready in: 1.17 s │ 62 | │ │ 63 | ╰─────────────────────────────────────────────────╯ 64 | [15:39:54.048] INFO (298477): started HTTP server on localhost:3333 65 | ``` 66 | 67 | Sekarang kamu dapat mengakses tiga rute: 68 | 69 | - home dengan rute `localhost:3333/` 70 | - about dengan rute `localhost:3333/about` 71 | - post dengan rute `localhost:3333/posts/id_post` 72 | 73 | Catatan, rute post menerima parameter `:id` sehingga nilai parameter tersebut dapat kita tampilkan. 74 | 75 | ![alt text](./assets/3.png) 76 | 77 | ### Routing dengan Controller 78 | 79 | Karena kita menggunakan aplikasi yang berbasis MVC (Model View Controller), kita akan membuat controller baru. 80 | 81 | Pertama, buat controller baru dengan cara 82 | 83 | ```bash 84 | node ace make:controller todo 85 | ``` 86 | 87 | kamu akan melihat file `todos_controller.ts` pada folder `app/controllers`. 88 | 89 | Sekarang kita perlu mengubahnya agar menjadi seperti ini: 90 | 91 | ```typescript 92 | import type { HttpContext } from '@adonisjs/core/http' 93 | 94 | export default class TodosController { 95 | /** 96 | * Display a list of resource 97 | */ 98 | async index({ view }: HttpContext) { 99 | return view.render("pages/home"); 100 | } 101 | } 102 | ``` 103 | 104 | Disini kita mengubah controller agar menampilkan halaman home pada `resources/views/pages/home.edge`. Halaman tersebut merupakan views yang akan ditampilkan melalui controller. 105 | 106 | Kemudian ubah `start/routes.ts` agar menjadi seperti ini: 107 | 108 | ```typescript 109 | /* 110 | |-------------------------------------------------------------------------- 111 | | Routes file 112 | |-------------------------------------------------------------------------- 113 | | 114 | | The routes file is used for defining the HTTP routes. 115 | | 116 | */ 117 | 118 | import router from '@adonisjs/core/services/router' 119 | 120 | import TodosController from '#controllers/todos_controller' 121 | router.get('/todo', [TodosController, 'index']) 122 | 123 | 124 | router.get('/', () => { 125 | return 'Hello world from the home page.' 126 | }) 127 | 128 | router.get('/about', () => { 129 | return 'This is the about page.' 130 | }) 131 | 132 | router.get('/posts/:id', ({ params }) => { 133 | return `This is post with id ${params.id}` 134 | }) 135 | ``` 136 | 137 | Disini kita menambahkan satu rute baru untuk menampilkan `TodoController` fungsi `index` pada rute `/todo`. 138 | 139 | Sekarang hentikan aplikasi dengan cara menekan `CTRL + C` pada terminal lalu jalankan ulang dengan cara menuliskan `npm run dev`. 140 | 141 | Sekarang akses `localhost:3333/todo` lalu kamu akan melihat ini: 142 | 143 | ![alt text](./assets/4.png) 144 | -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/1.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/2.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/3.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/3.png -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/4.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/4.png -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/5.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-adonis/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-adonis/assets/5.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/1-introduction.md: -------------------------------------------------------------------------------- 1 | **Table of contents** 2 | 3 | - [HTML: Short Introduction](#html-short-introduction) 4 | - [Secara Online](#secara-online) 5 | - [Secara Offline](#secara-offline) 6 | - [Buatlah Sebuah Folder](#buatlah-sebuah-folder) 7 | - [Bukalah Kode Editormu](#bukalah-kode-editormu) 8 | - [Jalankan Filenya](#jalankan-filenya) 9 | 10 | # HTML: Short Introduction 11 | 12 | HTML adalah bahasa markup untuk membangun sebuah website. Dengan HTML, kita dapat membuat website sesuai dengan keinginan kita. Jika diilustrasikan, HTML adalah kerangka tubuh kita. Kerangka tubuh setiap manusia berbeda-beda, ada yang memiliki tulang tangan yang kuat, ada yang memiliki tulang kaki yang panjang (tinggi), dan lain-lain. 13 | 14 | Penulisan HTML dikenal dengan TAG (baca: teg), adalah sebuah tanda untuk membuat kode HTML. Tag pada HTML menggunakan simbol berikut ``. 15 | 16 | Kerangka dasar HTML terdiri sebagai berikut: 17 | 18 | - Tag HTML → Kerangka dasar sebuah file dianggap HTML 19 | - Tag Head → Kerangka kepala dari HTML 20 | - Tag Body → Kerangka badan dari HTML 21 | - Tag Footer → Kerangka kaki dari HTML 22 | 23 | > ✅ Semakin menjorok ke dalam berarti tag tersebut adalah bagian dari tag di atasnya (children). 24 | 25 |
26 | 27 | Agar dapat lebih mudah simaklah kode berikut: 28 | 29 | ```html 30 | 31 | 32 | 33 | Page Title 34 | 35 | 36 |

This is a Heading

37 |

This is a paragraph.

38 | 39 | 40 | ``` 41 | 42 | Dapat kita lihat pada kode di atas bahwa setiap tag dibungkus dengan simbol `<>`. 43 | 44 | Lantas bagaimana membuat dan menjalankan kode di atas? 45 | 46 | ## Secara Online 47 | 48 | Gunakan editor online yang langsung dapat menjalankan kode HTML seperti: 49 | 50 | - [JSFiddle](https://jsfiddle.net/) 51 | - [CodeSandbox: Online Code Editor and IDE for Rapid Web Development](https://codesandbox.io/) 52 | - [CodePen](https://codepen.io/) 53 | 54 | Mana yang terbaik? Masing-masing dapat digunakan dan tidak ada yang terbaik untuk versi gratis. 55 | 56 | ## Secara Offline 57 | 58 | Kamu dapat mengunduh teks editor sederhana seperti notepad++ pada Windows, [download disini](https://notepad-plus-plus.org/downloads/). 59 | 60 | Namun saya menyarankan kamu menggunakan kode editor yang lebih besar seperti: 61 | 62 | - [Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/) 63 | - [Atom](https://atom.io/) 64 | 65 | Keduanya sama-sama bagus! Namun, saya sarankan pilih visual studio code karena banyak plugin dari community yang dapat membantu kamu untuk melakukan coding lebih cepat. 66 | 67 | Pada materi ini, saya lebih berfokus kepada pembuatan kode secara offline, jadi apabila kamu menggunakan metode online, harap dapat menyesuaikan dengan platformnya. 68 | 69 | # Buatlah Sebuah Folder 70 | 71 | Silahkan buat folder dimana saja kamu mau, baik di D: atau di Documents, atau dimanapun bagian komputermu, itu tidak penting, yang penting adalah semangatmu. 72 | 73 | Bingung memberi nama apa? Tenang, saya tahu memberi nama adalah hal yang paling menyulitkan, namun daripada kamu bingung untuk memberi nama, beri saja nama folder tersebut **belajar HTML**. 74 | 75 | # Bukalah Kode Editormu 76 | 77 | Saya sarankan kamu menggunakan **Visual Studio Code**. Buatlah file baru dengan nama `index.html` , lalu tulislah kode berikut: 78 | 79 | ```html 80 | 81 | 82 | 83 | Page Title 84 | 85 | 86 |

This is a Heading

87 |

This is a paragraph.

88 | 89 | 90 | ``` 91 | 92 | 96 | 97 | # Jalankan Filenya 98 | 99 | Jangan lupa untuk save dengan cara menekan CTRL + S pada keyboard atau kamu dapat mengaktifkan fitur autosave pada visual studio code dengan cara membuka bagian file dan mencentrang auto-save. 100 | 101 | Klik kanan pada file `index.html`, pilih open with, lalu pilih browser kalian. 102 | 103 | ![Sample HTML](./assets/2023-08-24-17-47-42.png) 104 | 105 | Semudah itu kan membuat file HTML? Tentu saja. Sekarang kamu sudah dapat membuat HTML dan siap belajar lebih dalam. 106 | -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/answer/challenge-task-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 52 | 53 | 54 | 55 | 56 |

Welcome to My Website

57 | 58 |
59 | 70 |
71 | 72 |
73 | 74 |

M Hudya Ramadhana

75 |

76 | Hi, my name is Hudya. I am a software engineer. My hobby is coding, I love coding so much! 77 |

78 |
79 |

Social media

80 | 97 | 98 |
99 | 100 | 101 | -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-47-42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-47-42.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-49-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-49-45.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-51-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-51-14.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-53-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-53-03.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-55-55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-55-55.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-56-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-56-40.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-57-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-57-03.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-57-37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-57-37.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-58-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-17-58-03.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-01-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-01-00.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-03-56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-03-56.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-05-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-05-45.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-06-41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-06-41.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-07-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-07-11.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-08-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/2023-08-24-18-08-16.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/assets/5948abfc0e2df5.02876591.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/basic-html/assets/5948abfc0e2df5.02876591.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-html/basic-html/readme.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | Materi berikut adalah pengenalan singkat mengenai HTML, CSS, dan Javascript. Tentunya apabila kita ingin godok dan bahas satu persatu, waktunya tidak akan cukup untuk menyelesaikan seluruh materi ini dalam satu artikel. 4 | 5 | Namun, ada bagian yang bisa kita ringkas untuk membuat desain web dengan sederhana, dan tidak perlu terlalu detail. Kamu tetap **perlu belajar** lebih detail dan melakukannya secara berulang-ulang, karena short introduction ini hanyalah sebuah jalan pintas untuk lebih mudah belajar pengenalan HTML, CSS, dan Javascript. Materi ini tidak akan membuat kamu menguasai HTML **secara cepat**. 6 | 7 |
8 | 9 | Materi ini hanyalah short introduction membangun web dengan HTML, CSS, dan Javascript agar dapat belajar membuat web dengan sederhana dengan materi yang diringkas. 10 | 11 | Materi ini tidak menyediakan materi kompleks dalam pembangunan sebuah web dengan HTML, apabila kamu ingin belajar lebih lanjut dan lebih kompleks, kamu dapat mengunjungi [W3Schools](https://www.w3schools.com/html/default.asp) 🔥 12 | 13 | Selamat belajar dan happy coding! 14 | -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/1-introduction-to-bootstrap.md: -------------------------------------------------------------------------------- 1 | # Part 1 — Berkenalan dengan Bootstrap 2 | 3 | # Overview 4 | 5 | Jika kamu sudah mempelajari materi [Belajar basic HTML](../basic-html/1-introduction.md) tentu kamu sudah mempelajari basic CSS. Apa yang kamu rasakan setelah mempelajari basic CSS? Menyenangkan? Kesal? Hal yang biasa, terutama bagi para backend developer. 6 | 7 | Bagi backend developer, membuat sebuah web yang ciamik sangatlah menyebalkan, hal ini dikarenakan ya CSS memang menyebalkan. Terutama jokes yang hingga saat ini masih terngiang bagi para backend developer, ialah jokes mengenai cara membuat elemen div menjadi posisi center, dan mengukur ukuran margin/padding dengan penggaris. 8 | 9 | Pada materi ini, saya akan membuatkan sebuah pengenalan dengan bootstrap khususnya bagi para backend developer atau kamu yang baru saja masuk ke dalam dunia programming agar mudah memahami dan membuat sebuah website menggunakan bootstrap. 10 | 11 | > [!NOTE] 12 | > 💡 Materi tidak akan kompleks, namun cukup untuk pengetahuan dasar. Apabila kamu ingin materi yang lebih kompleks kamu dapat membaca dokumentasi lengkapnya pada 13 | 14 | # Boostrap 15 | 16 | > [!NOTE] 17 | > 💡 Bootstrap adalah sebuah framework CSS yang membuat development web menjadi lebih cepat dan responsif dengan komponen yang tersedia. 18 | 19 | 20 | Dengan bootstrap, kamu dapat membuat web yang responsif dan memiliki struktur yang lebih baik ketimbang kamu harus menulis dari enol untuk membuat CSS-nya. 21 | 22 | Kapan harus menggunakan bootstrap? 23 | 24 | 1. Saat kita punya gambaran/wireframe tapi tidak memiliki desain UI-nya. 25 | 2. Saat kita ingin mengerjakan sebuah web agar lebih cepat dan tidak membuang waktu untuk membuatnya dari 0. 26 | 27 | # Instalasi 28 | 29 | Boostrap bisa didownload dan dimasukan sebagai file local, tapi akan lebih mudah apabila kita menggunakan URL CDN saja. 30 | 31 | > [!NOTE] 32 | > 💡 URL CDN adalah URL tempat CSS dan Javascript untuk Bootstrap disimpan 33 | 34 | ```jsx 35 | 36 | 37 | ``` 38 | 39 | Dengan menuliskan ini pada HTML, kita dapat dengan mudah menggunakan Bootstrap. 40 | 41 | > [!NOTE] 42 | > 💡 Sebenarnya ada banyak metode dalam instalasi Bootstrpa, seperti menggunakan NPM, Yarn, atau package manager lainnya. Namun karena kita hanya ingin mempelajarinya secara singkat dan tidak menyeluruh, maka menggunakan CDN adalah pilihan yang tepat. 43 | 44 | # Konsep Grid 45 | 46 | Untuk menggunakan Boostrap, kamu harus memahami konsep grid di bootstrap terlebih dahulu. Pada [tutorial ini](../basic-html/4-responsive-web.md) saya pernah menjelaskan tentang konsep 100% width pada page, serta konsep col-12 yang sudah saya jelaskan. 47 | 48 | Bootstrap juga seperti itu, kita menggunakan grid dengan maksimal angka 12 untuk membuat tata letak baris pada elemen HTML kita. 49 | 50 | ![Alt text](assets/1-introduction-to-bootstrap/1.png) 51 | 52 | ![Alt text](assets/1-introduction-to-bootstrap/2.png) 53 | 54 | > [!NOTE] 55 | > 💡 Ingat selalu konsep grid pada bootstrap memiliki lebar maksimal 12. Kamu harus memaksimalkan tiap grid dengan penjumlahan sebesar 12. Misalnya 4+8, 7+5, 5+7 atau penjumlahan apapun yang hasilnya 12. Hal ini dilakukan agar grid dapat maksimal sehingga tata letak elemen kamu menjadi lebih rapih. 56 | 57 | # Template Starter Bootstrap 58 | 59 | Cobalah copy paste kode berikut pada editor favorit kalian, dan coba jalankan file HTMLnya. 60 | 61 | ```jsx 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | Hello, world! 74 | 75 | 76 | 77 |

Hello, world!

78 | 79 | 80 | 81 | 82 | 83 | ``` 84 | 85 | Selamat, kamu baru saja berkenalan dengan Bootstrap! 86 | 87 | Untuk dokumentasi lengkapnya kamu dapat menemukannya disini ya! 88 | 89 | [Introduction](https://getbootstrap.com/docs/5.1/getting-started/introduction/) -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/4-introduction-to-table.md: -------------------------------------------------------------------------------- 1 | # Part 4 — Bermain dengan Table 2 | 3 | # Overview 4 | 5 | Pada materi kali ini kita akan coba bermain dengan table pada bootstrap. 6 | 7 | # Table 8 | 9 | Kita dapat membuat sebuah table yang menarik, cobalah kode berikut: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Hello, world! 25 | 26 | 31 | 32 | 33 | 34 |
35 |
36 |
37 |

Belajar Membuat Table

38 |
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 59 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 76 | 83 | 84 |
#NamaAlamatPhone NumberStatusAction
1HudyaJakarta083923828 57 | Active 58 | 60 |
61 | 62 | 63 | 64 |
65 |
2BudiJawa Tengah0818287482 74 | Inactive 75 | 77 |
78 | 79 | 80 | 81 |
82 |
85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | ``` 94 | 95 | Perhatikan kode berikut: 96 | 97 | ```html 98 |
99 | ``` 100 | 101 | ![Alt text](assets/4-introduction-to-table/1.png) 102 | 103 | Tampilan tanpa class `table-responsive` 104 | 105 | ![Alt text](assets/4-introduction-to-table/2.png) 106 | 107 | Table dengan class `table-responsive` 108 | 109 | Cobalah bandingkan kedua hasil di atas, terlihat sangat berbeda bukan? Table dengan class `table-responsive` memiliki tampilan yang lebih baik, hal ini dikarenakan table menjadi responsive mengikuti layar handphone sehingga bisa digeser kekanan. Sedangkan table yang tidak menggunakannya cenderung menjadi dempet. -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/1-introduction-to-bootstrap/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/1-introduction-to-bootstrap/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/1-introduction-to-bootstrap/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/1-introduction-to-bootstrap/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/2-introduction-to-layout/simplescreenrecorder-2021-08-22_06.27.10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/2-introduction-to-layout/simplescreenrecorder-2021-08-22_06.27.10.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/2-introduction-to-layout/simplescreenrecorder-2021-08-29_14.23.59.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/2-introduction-to-layout/simplescreenrecorder-2021-08-29_14.23.59.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/3-introduction-to-components/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/3-introduction-to-components/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/3-introduction-to-components/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/3-introduction-to-components/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/4-introduction-to-table/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/4-introduction-to-table/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/4-introduction-to-table/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/4-introduction-to-table/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/3.png -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/simplescreenrecorder-2021-09-02_23.38.37.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-html/learn-bootstrap/assets/6-create-personal-website/simplescreenrecorder-2021-09-02_23.38.37.gif -------------------------------------------------------------------------------- /tutorial/series/web-with-html/learn-bootstrap/readme.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | Materi berikut adalah pengenalan singkat mengenai Bootstrap. Tentunya apabila kita ingin godok dan bahas satu persatu, waktunya tidak akan cukup untuk menyelesaikan seluruh materi ini dalam satu artikel. 4 | 5 | Namun, ada bagian yang bisa kita ringkas untuk membuat desain web dengan sederhana, dan tidak perlu terlalu detail. Kamu tetap **perlu belajar** lebih detail dan melakukannya secara berulang-ulang, karena short introduction ini hanyalah sebuah jalan pintas untuk lebih mudah belajar pengenalan HTML, CSS, dan Javascript. Materi ini tidak akan membuat kamu menguasai HTML **secara cepat**. 6 | 7 |
8 | 9 | Materi ini hanyalah short introduction membangun web dengan framework Boostrap agar dapat belajar membuat web dengan sederhana dengan materi yang diringkas. 10 | 11 | Materi ini tidak menyediakan materi kompleks dalam pembangunan sebuah web dengan HTML, apabila kamu ingin belajar lebih lanjut dan lebih kompleks, kamu dapat mengunjungi [Bootstrap CSS Framework](https://getbootstrap.com/docs/5.0/getting-started/introduction/) 🔥 12 | 13 | Selamat belajar dan happy coding! 14 | -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/1-introduction.md: -------------------------------------------------------------------------------- 1 | # Part 1 — Introduction to Web with PHP Native 2 | 3 | # Overview 4 | 5 | Pada materi ini kita akan belajar banyak hal tentang PHP, tapi pada materi ini kita tidak akan belajar banyak hal dasar di PHP. 6 | 7 | Mengapa? Karena pada dasarnya PHP sama saja seperti bahasa pemrograman lainnya, hanya saja beda penulisannya saja. Jikalau kamu ingin belajar fundamental silahkan saja belajar [disini ya](https://www.w3schools.com/php/) 😄. 8 | 9 | # Tools 10 | 11 | Tutorial ini menggunakan PHPMyAdmin agar mempermudah teman-teman di Windows. Untuk mendownload silahkan klik disini: 12 | 13 | - [Apache Friends](https://www.apachefriends.org/index.html) 14 | 15 | Untuk Linux khususnya ubuntu coba cek disini ya: 16 | 17 | - [Install XAMPP di Ubuntu 18.04](https://medium.com/@avinriyan/install-xampp-di-ubuntu-18-04-33661b62dad5) 18 | 19 | Untuk melakukan koding, kita memerlukan tools bernama VSCode. Silahkan download disini. 20 | 21 | - [Visual Studio Code - Code Editing.](https://code.visualstudio.com/) 22 | 23 | # Folder Program 24 | 25 | Untuk memulai program pada PHP, kita perlu membuka folder tempat penyimpanan xampp kita, lalu pilih folder htdocs. 26 | 27 | ![Alt text](./assets/1-introduction/1.png) 28 | 29 | Buatlah folder bernama `inventory`. Kita akan belajar membuat CRUD untuk inventory barang. 30 | 31 | # Hello World 32 | 33 | Buatlah file bernama `index.php` pada folder inventory lalu masukkan kode berikut: 34 | 35 | ```php 36 | 39 | ``` 40 | 41 | Sekarang kita rombak menjadi seperti ini: 42 | 43 | ```php 44 | 48 | 49 | 50 | 51 | Hello World 52 | 53 | 54 |

Halo, nama saya

55 |

Usia saya adalah tahun

56 | 57 | 58 | ``` 59 | 60 | Sekarang lihat hasilnya: 61 | 62 | ![Alt text](./assets/1-introduction/2.png) 63 | 64 | Mudah sekali kan menggunakan PHP? Kita dapat menggabungkan PHP dan HTML pada satu file. 65 | 66 | Sekarang apa bedanya antara: 67 | 68 | ```php 69 | 70 | ``` 71 | 72 | dan: 73 | 74 | ```php 75 | 76 | ``` 77 | 78 | Kode yang atas tidak membutuhkan syntax echo karena itu merupakan singkatan dari php echo. Syntax `echo` pada php artinya mencetak variable. Jadi kedua code tidak ada yang salah. 79 | 80 | Sekarang kita ubah kodenya menjadi seperti ini: 81 | 82 | ```php 83 | 90 | 91 | 92 | 93 | Hello World 94 | 95 | 96 |

Halo,

97 |

Usia saya adalah tahun

98 | 99 | 100 | ``` 101 | 102 | Kode kita saat ini dapat menampilkan kalimat melalui fungsi yang kita buat. 103 | 104 | Sekarang buat file baru bernama `sum.php` lalu masukkan kode dibawah: 105 | 106 | ```php 107 | 122 | 123 | 124 | 125 | Hello World 126 | 127 | 128 | 129 |
130 | 131 | 132 | 133 |
134 | 135 |

Hasilnya adalah

136 | 137 | 138 | 139 | 140 | ``` 141 | 142 | Sekarang kita berhasil membuat kalkulator sederhana. 143 | -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/1-introduction/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/1-introduction/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/1-introduction/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/1-introduction/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/2-templating/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/2-templating/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/3-connection-read-create/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/3-connection-read-create/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/3-connection-read-create/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/3-connection-read-create/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/3-connection-read-create/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/3-connection-read-create/3.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/3-connection-read-create/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/3-connection-read-create/4.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/3-connection-read-create/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/3-connection-read-create/5.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/3.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/4.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/5.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/4-update-and-delete/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/4-update-and-delete/6.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/5-login-and-session/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/5-login-and-session/1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/5-login-and-session/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/5-login-and-session/2.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/6-menampilkan-data-pada-select/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/6-menampilkan-data-pada-select/image-1.png -------------------------------------------------------------------------------- /tutorial/series/web-with-php-native/assets/6-menampilkan-data-pada-select/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/series/web-with-php-native/assets/6-menampilkan-data-pada-select/image.png -------------------------------------------------------------------------------- /tutorial/single/database/1-database-notes.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | by [@perogeremmer](https://twitter.com/perogeremmer) 6 | 7 | **Table of contents** 8 | 9 | - [Belajar bikin database Notes](#belajar-bikin-database-notes) 10 | - [Pertama → bikin tabel users](#pertama--bikin-tabel-users) 11 | - [Kedua → bikin tabel categories](#kedua--bikin-tabel-categories) 12 | - [Ketiga → bikin tabel notes](#ketiga--bikin-tabel-notes) 13 | - [Terakhir → bikin tabel note\_logs](#terakhir--bikin-tabel-note_logs) 14 | - [Hasil ERD](#hasil-erd) 15 | 16 | ## Belajar bikin database Notes 17 | 18 | Kita akan belajar bikin database notes. Tentunya susunan database ini akan melibatkan autentikasi supaya kamu bisa paham bagaimana relasi antar table. 19 | 20 | Semua penjelasan udah saya jelasin ya di bagian deskripsi tabel, kalian bisa baca 😆 21 | 22 | ## Pertama → bikin tabel users 23 | 24 | Kita bakalan bikin tabel users yang menyimpan informasi pengguna kita. 25 | 26 | |columns|type|key|default value|description| 27 | |-|-|-|-|-| 28 | |id|integer|auto increment, primary||kolom ID pake increment supaya cepet kalo butuh ordering| 29 | |name|varchar(250)|not null||Kolom nama users, kita bikin not null karena nama mah emang harus diisi atuh?| 30 | |email|varchar(250)|index, not null||Kolom email dari users, kita buat index biar cepet pencariannya| 31 | |password|text|not null||Kolom password kita buat text biar nyimpen nilai panjang, misalnya pake enkripsi yang hasilnya panjang, yaudah kita bikin panjang aja sekalian| 32 | |confirmed_at|datetime|||Kolom ini dipake untuk nandain user tersebut udah konfirmasi apa belom di email, example value: 2023-04-02 13:15:34| 33 | |created_at|datetime||current timestamp|Kolom ini untuk nandain kapan akun dibuat, pake current timestamp aja| 34 | |updated_at|datetime||current timestamp|Setiap ada perubahan pada akun, misalnya ganti nama, nah silahkan update juga kolom ini| 35 | 36 | ## Kedua → bikin tabel categories 37 | 38 | Kita bikin tabel categories untuk ngebuat notes berdasarkan kategori yang dibuat sama user tersebut. 39 | 40 | |columns|type|key|default value|description| 41 | |-|-|-|-|-| 42 | |id|integer|auto increment, primary||kolom ID pake increment supaya cepet kalo butuh ordering| 43 | |name|varchar(150)|not null||Kolom nama kategori| 44 | |description|varchar(250)|nullable||Kolom deskripsi datei kategori tersebut, gak usah dibikin panjang-panjang, jadi 250 karakter aja cukup| 45 | |user_id|integer|foreign key||Kolom ini dipakai untuk masukin id user ke bagian kategori, biar ketauan ini kategori punya siapa| 46 | |status|char(1)|index||Kolom ini dipake buat bikin status dari kategori, mungkin ada yang nggak pengen ditampilin (di-archive), nah bisa dibikin status, misalnya A (Archived), Y (Active)| 47 | |created_at|datetime||current timestamp|Kolom ini untuk nandain kapan akun dibuat, pake current timestamp aja| 48 | |updated_at|datetime||current timestamp|Setiap ada perubahan pada akun, misalnya ganti nama, nah silahkan update juga kolom ini| 49 | |deleted_at|datetime|||Setiap kategori dihapus, isi kolom ini pake date time, tujuannya biar soft delete| 50 | 51 | ## Ketiga → bikin tabel notes 52 | 53 | Kita bikin tabel notes sebagai tabel utamanya. 54 | 55 | |columns|type|key|default value|description| 56 | |-|-|-|-|-| 57 | |id|integer|auto increment, primary||kolom ID pake increment supaya cepet kalo butuh ordering| 58 | |title|varchar(150)|not null||Kolom nama notes| 59 | |notes|text|not null||Isi dari notesnya, kita bikin teks supaya bisa nyimpen panjang banget. Kalo mau notes berbentuk markdown bisa pake JSON.| 60 | |user_id|integer|foreign key||Kolom ini dipakai untuk masukin id user ke bagian kategori, biar ketauan ini kategori punya siapa| 61 | |category_id|integer|foreign key||Kolom ini dipakai untuk masukin id user, biar ketauan ini kategori apa| 62 | |status|char(1)|index||Kolom ini dipake buat bikin status dari kategori, mungkin ada yang nggak pengen ditampilin (di-archive), nah bisa dibikin status, misalnya A (Archived), Y (Active)| 63 | |created_at|datetime||current timestamp|Kolom ini untuk nandain kapan akun dibuat, pake current timestamp aja| 64 | |updated_at|datetime||current timestamp|Setiap ada perubahan pada akun, misalnya ganti nama, nah silahkan update juga kolom ini| 65 | |deleted_at|datetime|||Setiap kategori dihapus, isi kolom ini pake date time, tujuannya biar soft delete| 66 | 67 | ## Terakhir → bikin tabel note_logs 68 | 69 | Kita bikin tabel note_logs buat bikin history terhadap note yang diubah. 70 | 71 | |columns|type|key|default value|description| 72 | |-|-|-|-|-| 73 | |id|integer|auto increment, primary||kolom ID pake increment supaya cepet kalo butuh ordering| 74 | |note_id|integer|foreign key||Kolom ini dipakai untuk nandain id dari notesnya| 75 | |type|varchar(20)|index||Kolom ini buat dipake dari log notes, misalnya type CHANGED artinya perubahan notes, DELETED artinya penghapusan notes| 76 | |metadata|json|||Kolom ini dipake buat nyimpen data selain data di atas, biar fleksibel, kita pake JSON aja| 77 | |created_at|datetime||current timestamp|Kolom ini untuk nandain kapan akun dibuat, pake current timestamp aja| 78 | 79 | ## Hasil ERD 80 | 81 | Berikut adalah hasil ERD-nya: 82 | 83 |
84 | ERD Database Notes 85 | 86 | ```mermaid 87 | erDiagram 88 | users ||--o{ notes : creates 89 | users ||--o{ categories : manages 90 | categories ||--o{ notes : "belongs to" 91 | notes ||--o{ note_logs : owns 92 | ``` 93 | 94 |
95 | 96 | - table users memiliki relasi 1 to many ke notes, hal ini karena satu users dapat memiliki banyak notes, tapi setiap notes hanya dimiliki oleh satu users. 97 | - table users memiliki relasi 1 to many ke categories, hal ini karena satu users dapat memiliki banyak categories, tapi setiap categories hanya dimiliki oleh satu users. 98 | - table categories memiliki relasi 1 to many ke notes, hal ini karena satu categories dapat memiliki banyak notes, tapi setiap notes hanya dimiliki oleh satu category. 99 | - table notes memiliki relasi 1 to many ke note_logs, hal ini karena satu notes dapat memiliki banyak logs, tapi setiap logs hanya dimiliki oleh satu notes. 100 | 101 |
102 | 103 | Jadi gimana nih? Gak susah kan buat bikin database sederhana? Anyway ini masih bisa dikembangin loh guys jadi punya workspace, terus ada member team di tiap workspace, siapa yang punya akses ke notes. 104 | 105 | Hal simple sebenernya bisa dibuat ribet, jikalau mau 😆 106 | -------------------------------------------------------------------------------- /tutorial/single/database/assets/1-database-notes/f9734c59-01d3-48ba-8f06-5ff99aba4a2f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/1-database-notes/f9734c59-01d3-48ba-8f06-5ff99aba4a2f.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-1.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-2.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-3.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-4.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-result-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-result-1.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/dashboard-result.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-connection-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-connection-success.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-connection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-connection.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-1.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-2.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data-3.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/db-new-data.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/header.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/prometheus-connection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/prometheus-connection.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-grafana-local/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-grafana-local/sample.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/header.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/home-tour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/home-tour.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/home.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/login-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/login-page.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/query-analytics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/query-analytics.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/query-list-insert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/query-list-insert.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/query-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/query-list.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/result.png -------------------------------------------------------------------------------- /tutorial/single/database/assets/belajar-dan-install-percona/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/assets/belajar-dan-install-percona/sample.png -------------------------------------------------------------------------------- /tutorial/single/database/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perogeremmer/blog/74c620c53d69228ecda35f0fa1ec046b76292d55/tutorial/single/database/image.png --------------------------------------------------------------------------------