{"id":12023,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)"},"content":{"rendered":"<p>The\u00a0<strong>Model C4<\/strong>, yang dibuat oleh Simon Brown, adalah cara sederhana, hierarkis, dan ramah pengembang untuk memvisualisasikan arsitektur perangkat lunak. Model ini menggunakan empat tingkat abstraksi (mengapa disebut \u201cC4\u201d) untuk menggambarkan suatu sistem dari gambaran umum tingkat tertinggi hingga detail tingkat kode:<\/p>\n<ol>\n<li>\n<p><strong>Konteks Sistem<\/strong>\u00a0(Tingkat 1) \u2013 Gambaran besar: sistem dan pengguna\/dependensi eksternalnya.<\/p>\n<\/li>\n<li>\n<p><strong>Kontainer<\/strong>\u00a0(Tingkat 2) \u2013 Pilihan teknologi tingkat tinggi dan tanggung jawabnya.<\/p>\n<\/li>\n<li>\n<p><strong>Komponen<\/strong>\u00a0(Tingkat 3) \u2013 Blok-blok logis utama di dalam suatu kontainer.<\/p>\n<\/li>\n<li>\n<p><strong>Kode<\/strong>\u00a0(Tingkat 4) \u2013 Detail opsional tingkat kelas atau struktur kode.<\/p>\n<\/li>\n<\/ol>\n<p>Model ini didukung oleh tiga jenis diagram tambahan:<\/p>\n<ul>\n<li>\n<p><strong>Lanskap Sistem<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Dinamis<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Penempatan<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">Model ini tidak terikat notasi (Anda dapat menggunakan alat diagram apa pun) dan berfokus pada kejelasan, konsistensi, serta detail yang sesuai dengan audiens. Model ini banyak diadopsi karena menghindari diagram arsitektur yang berantakan seperti &#8216;big ball of mud&#8217; dan dapat berkembang dari sketsa papan tulis hingga dokumentasi otomatis.<\/p>\n<p>Untuk ini\u00a0<strong>studi kasus yang ditargetkan<\/strong>, kami menggunakan contoh standar dari situs web resmi C4:\u00a0<strong>Sistem Perbankan Internet<\/strong>\u00a0untuk bank fiksi \u201cBig Bank plc\u201d. Tujuan bisnisnya adalah memungkinkan pelanggan pribadi melihat rekening mereka dan melakukan pembayaran secara daring sambil terintegrasi dengan sistem inti bank yang sudah ada.<\/p>\n<p>Kami akan membahas secara menyeluruh\u00a0<strong>setiap tingkatan<\/strong>\u00a0dengan:<\/p>\n<ul>\n<li>\n<p>Tujuan dan audiens<\/p>\n<\/li>\n<li>\n<p>Elemen utama + tanggung jawab<\/p>\n<\/li>\n<li>\n<p>Hubungan<\/p>\n<\/li>\n<li>\n<p>Diagram C4 PlantUML siap pakai\u00a0<strong>Diagram C4 PlantUML<\/strong>(PlantUML mendukung sintaks C4 dan tampilan yang indah di sebagian besar penampil Markdown)<\/p>\n<\/li>\n<li>\n<p>Rasional dan keputusan utama<\/p>\n<\/li>\n<li>\n<p>Bagaimana diagram ini membantu para pemangku kepentingan<\/p>\n<\/li>\n<\/ul>\n<h3>Langkah 1: Tentukan Lingkup &amp; Buat Diagram Konteks Sistem (Tingkat 1)<\/h3>\n<p><strong>Tujuan<\/strong>: Menunjukkan bagaimana Sistem Perbankan Internet baru sesuai dengan dunia. Audiens: pemangku kepentingan bisnis, orang-orang non-teknis, anggota tim baru.<\/p>\n<p><strong>Elemen<\/strong>\u00a0(dari contoh resmi):<\/p>\n<ul>\n<li>\n<p><strong>Pelanggan Perbankan Pribadi<\/strong>\u00a0(Person) \u2013 Seorang pelanggan dengan satu atau lebih rekening bank pribadi.<\/p>\n<\/li>\n<li>\n<p><strong>Sistem Perbankan Internet<\/strong>\u00a0(Sistem Perangkat Lunak) \u2013 Sistem baru yang sedang kita bangun.<\/p>\n<\/li>\n<li>\n<p><strong>Sistem Perbankan Inti<\/strong>\u00a0(Sistem Perangkat Lunak, yang sudah ada) \u2013 Mainframe yang menangani data pelanggan, rekening, dan transaksi.<\/p>\n<\/li>\n<li>\n<p><strong>Sistem Email<\/strong>\u00a0(Sistem Perangkat Lunak, eksternal) \u2013 Amazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Hubungan<\/strong>:<\/p>\n<ul>\n<li>\n<p>Pelanggan \u2192 menggunakan \u2192 Sistem Perbankan Internet (untuk melihat rekening dan melakukan pembayaran)<\/p>\n<\/li>\n<li>\n<p>Sistem Perbankan Internet \u2192 menggunakan \u2192 Sistem Perbankan Inti (untuk data rekening &amp; pembayaran)<\/p>\n<\/li>\n<li>\n<p>Sistem Perbankan Internet \u2192 mengirim email melalui \u2192 Sistem Email<\/p>\n<\/li>\n<\/ul>\n<p>Berikut ini adalah\u00a0<strong>Diagram Konteks C4 PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagram Konteks Sistem (Tingkat 1) untuk Sistem Perbankan Internet\r\n\r\nPerson(customer, \"Pelanggan Perbankan Pribadi\", \"Seorang pelanggan dengan satu atau lebih rekening bank pribadi.\")\r\nSystem(internet_banking_system, \"Sistem Perbankan Internet\", \"Sistem baru untuk melihat rekening dan melakukan pembayaran.\")\r\nSystem(core_banking_system, \"Sistem Perbankan Inti\", \"Mainframe yang sudah ada menangani data pelanggan, rekening, dan transaksi.\")\r\nSystem_Ext(email_system, \"Sistem Email\", \"Amazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.\")\r\n\r\nRel(customer, internet_banking_system, \"Menggunakan\")\r\nRel(internet_banking_system, core_banking_system, \"Menggunakan\")\r\nRel(internet_banking_system, email_system, \"Mengirim email melalui\")\r\n\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Rasional &amp; nilai<\/strong>: Diagram tunggal ini langsung menjawab pertanyaan \u201cApa yang sedang kita bangun dan siapa yang berinteraksi dengannya?\u201d Diagram ini mencegah perluasan lingkup dengan membuat ketergantungan eksternal menjadi jelas. Pemangku kepentingan bisnis menyukainya karena belum ada detail teknologi.<\/p>\n<h3>Langkah 2: Diagram Kontainer (Tingkat 2)<\/h3>\n<p><strong>Tujuan<\/strong>: Memperbesar fokus pada Sistem Perbankan Internet dan menunjukkan unit-unit utama yang dapat di-deploy\/jalankan (kontainer) serta pilihan teknologinya. Audiens: arsitek, pengembang utama, operasional.<\/p>\n<p><strong>Wadah di dalam Sistem Perbankan Internet<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Aplikasi Halaman Tunggal<\/strong>\u00a0(Browser Web \u2013 JavaScript + Angular) \u2013 Antarmuka penuh perbankan internet.<\/p>\n<\/li>\n<li>\n<p><strong>Aplikasi Seluler<\/strong>\u00a0(Perangkat seluler \u2013 native iOS\/Android atau React Native) \u2013 Fungsi terbatas untuk penggunaan saat bepergian.<\/p>\n<\/li>\n<li>\n<p><strong>Aplikasi API<\/strong>\u00a0(Sisi server \u2013 Java + Spring Boot) \u2013 API JSON\/HTTPS yang digunakan oleh kedua antarmuka depan.<\/p>\n<\/li>\n<li>\n<p><strong>Database<\/strong>\u00a0(Database relasional \u2013 PostgreSQL) \u2013 Menyimpan data sesi, preferensi pengguna, ringkasan akun yang disimpan sementara (data inti tetap berada di mainframe).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Hubungan kunci<\/strong>\u00a0(sistem eksternal yang sama seperti Tingkat 1):<\/p>\n<ul>\n<li>\n<p>SPA &amp; Aplikasi Seluler \u2192 memanggil \u2192 Aplikasi API<\/p>\n<\/li>\n<li>\n<p>Aplikasi API \u2194 Database<\/p>\n<\/li>\n<li>\n<p>Aplikasi API \u2192 Sistem Perbankan Inti &amp; Sistem Email<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagram Wadah PlantUML C4<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_ATAS_BAWAH()<br \/>\nLAYOUT_DENGAN_LEGENDA()<\/p>\n<p>judul Diagram Wadah C4 untuk Sistem Perbankan Internet<\/p>\n<p>Person(klien, \u201cPelanggan Perbankan Pribadi\u201d, \u201cPelanggan dengan satu atau lebih rekening bank pribadi.\u201d)<\/p>\n<p>System_Boundary(sistem_perbankan_internet, \u201cSistem Perbankan Internet\u201d, \u201cSistem baru untuk melihat rekening dan melakukan pembayaran.\u201d) {<br \/>\nContainer(spa, \u201cAplikasi Halaman Tunggal\u201d, \u201cJavaScript + Angular\u201d, \u201cAntarmuka penuh perbankan internet\u201d, $sprite=\u201dangular\u201d)<br \/>\nContainer(aplikasi_seluler, \u201cAplikasi Seluler\u201d, \u201ciOS\/Android (React Native)\u201d, \u201cFungsi terbatas untuk penggunaan saat bepergian\u201d, $sprite=\u201dreact\u201d)<br \/>\nContainer(aplikasi_api, \u201cAplikasi API\u201d, \u201cJava + Spring Boot\u201d, \u201cAPI JSON\/HTTPS yang digunakan oleh kedua antarmuka depan\u201d, $sprite=\u201djava\u201d)<br \/>\nContainerDb(database, \u201cDatabase\u201d, \u201cPostgreSQL\u201d, \u201cMenyimpan data sesi, preferensi pengguna, ringkasan akun yang di-cache\u201d, $sprite=&#8221;postgresql&#8221;)<br \/>\n}<\/p>\n<p>System(core_banking_system, \u201cSistem Perbankan Inti\u201d, \u201cMainframe yang ada menangani data pelanggan, rekening, dan transaksi.\u201d)<br \/>\nSystem_Ext(email_system, \u201cSistem Email\u201d, \u201cAmazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.\u201d)<\/p>\n<p>\u2018 Hubungan<br \/>\nRel(customer, spa, \u201cMenggunakan\u201d, \u201cHTTPS\u201d)<br \/>\nRel(customer, mobile_app, \u201cMenggunakan\u201d, \u201cHTTPS\u201d)<br \/>\nRel(spa, api_app, \u201cMemanggil\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(mobile_app, api_app, \u201cMemanggil\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, database, \u201cMembaca dari dan menulis ke\u201d, \u201cJDBC\/SQL\u201d)<br \/>\nRel(api_app, core_banking_system, \u201cMengambil data \/ Memperbarui\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, email_system, \u201cMengirim email melalui\u201d, \u201cHTTPS\u201d)<\/p>\n<p>\u2018 Petunjuk tata letak (opsional \u2013 membantu PlantUML mengatur elemen dengan lebih baik)<br \/>\nLay_D(customer, sistem_perbankan_daring)<br \/>\nLay_D(sistem_perbankan_daring, core_banking_system)<br \/>\nLay_U(sistem_email, sistem_perbankan_daring)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Alasan<\/strong>: Kami memilih pola SPA modern + backend API untuk web, aplikasi mobile native untuk kinerja, dan menjaga basis data ringan (kebanyakan data berada di mainframe lama). Diagram ini merupakan satu-satunya sumber kebenaran untuk keputusan teknologi tingkat tinggi dan membantu tim DevOps merencanakan infrastruktur.<\/p>\n<h3>Langkah 3: Diagram Komponen (Tingkat 3)<\/h3>\n<p><strong>Tujuan<\/strong>: Perbesar satu wadah (biasanya yang paling kompleks \u2013 Aplikasi API) dan tunjukkan komponen logis utamanya. Audiens: tim pengembangan.<\/p>\n<p><strong>Contoh: Komponen di dalam Aplikasi API<\/strong>:<\/p>\n<ul>\n<li>\n<p>Controller Akun (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Controller Otorisasi<\/p>\n<\/li>\n<li>\n<p>Controller Atur Ulang Kata Sandi<\/p>\n<\/li>\n<li>\n<p>Komponen Keamanan (menangani otorisasi, JWT, dll.)<\/p>\n<\/li>\n<li>\n<p>Komponen Manajemen Akun (mengkoordinasikan pemanggilan ke Perbankan Inti)<\/p>\n<\/li>\n<li>\n<p>Komponen Pemberitahuan Email<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagram Komponen PlantUML C4<\/strong>\u00a0(fokus pada Aplikasi API):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagram Komponen untuk Sistem Perbankan Internet - Aplikasi API\r\n\r\nContainer(spa, \"Aplikasi Halaman Tunggal\", \"javascript dan angular\", \"Menyediakan semua fungsi perbankan internet kepada pelanggan melalui peramban web mereka.\")\r\nContainer(ma, \"Aplikasi Mobile\", \"Xamarin\", \"Menyediakan subset terbatas dari fungsi perbankan internet kepada pelanggan melalui perangkat mobile mereka.\")\r\nContainerDb(db, \"Database\", \"Skema Basis Data Relasional\", \"Menyimpan informasi pendaftaran pengguna, kredensial otentikasi yang di-hash, log akses, dll.\")\r\nSystem_Ext(mbs, \"Sistem Perbankan Mainframe\", \"Menyimpan semua informasi inti perbankan tentang pelanggan, rekening, transaksi, dll.\")\r\n\r\nContainer_Boundary(api, \"Aplikasi API\") {\r\n    Component(accounts, \"Controller Akun\", \"Spring MVC\", \"Menyediakan ringkasan dan saldo akun kepada pelanggan.\")\r\n    Component(auth, \"Controller Otentikasi\", \"Spring MVC\", \"Menangani login pengguna, manajemen sesi, dan generasi token.\")\r\n    Component(reset, \"Controller Atur Ulang Kata Sandi\", \"Spring MVC\", \"Memungkinkan pengguna mengatur ulang kata sandi mereka melalui email.\")\r\n    Component(security, \"Komponen Keamanan\", \"Spring Bean\", \"Menangani otentikasi, generasi token JWT, dan peng-hashan kata sandi.\")\r\n    Component(accountmgmt, \"Komponen Manajemen Akun\", \"Spring Bean\", \"Mengkoordinasikan panggilan ke sistem perbankan inti untuk operasi akun.\")\r\n    Component(email, \"Komponen Pemberitahuan Email\", \"Spring Bean\", \"Mengirim email atur ulang kata sandi dan email verifikasi akun melalui SMTP.\")\r\n\r\n    Rel(accounts, security, \"Menggunakan\")\r\n    Rel(auth, security, \"Menggunakan\")\r\n    Rel(reset, security, \"Menggunakan\")\r\n    Rel(accountmgmt, mbs, \"Menggunakan\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Membaca\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Menggunakan\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Menggunakan\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Menggunakan\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Menggunakan\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Menggunakan\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Menggunakan\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Alasan<\/strong>: Tingkat ini menunjukkan bagaimana tanggung jawab dibagi (pemisahan kepedulian) dan membuat onboarding pengembang baru jauh lebih cepat. Anda hanya menggambar diagram komponen untuk container yang cukup kompleks untuk membenarkan hal tersebut.<\/p>\n<h3>Langkah 4: Diagram Kode (Tingkat 4) \u2013 Opsional<\/h3>\n<p><strong>Tujuan<\/strong>: Menunjukkan struktur internal dari satu komponen (diagram kelas, urutan, dll). Audiens: pengembang yang bekerja pada kode tersebut.<\/p>\n<p>Contoh untuk<strong>Controller Otentikasi<\/strong>komponen \u2013 diagram kelas UML sederhana dalam PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\ndiagramKelas<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nWarnaPanah #444444<br \/>\nWarnaFontPanah #444444<br \/>\nWarnaBatas #444444<\/p>\n<p>Kelas {<br \/>\nWarnaBatas #1A237E<br \/>\nWarnaLatarBelakang #E8EAF6<br \/>\nWarnaFont #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>kelas \u201cControllerOtentikasi\u201d {<br \/>\n+login(kredensial)<br \/>\n+refreshToken()<br \/>\n}<\/p>\n<p>kelas \u201cPenyediaTokenJwt\u201d {<br \/>\n+generateToken(pengguna)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201cUserRepository\u201d {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201cuses\u201d<br \/>\nAuthenticationController ..&gt; UserRepository : \u201cuses\u201d<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>Dalam proyek nyata, Anda sering melewatkan Level 4 dan langsung mengarah ke kode sumber yang sebenarnya.<\/p>\n<h3>Langkah 5: Diagram Pendukung<\/h3>\n<p><strong>Diagram Dinamis<\/strong>\u00a0(contoh: alur \u201cLihat Ringkasan Akun\u201d)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>judul Diagram Dinamis untuk Lihat Ringkasan Akun<\/p>\n<p>Person(customer, \u201cPelanggan Perbankan Pribadi\u201d) {<br \/>\nContainer(spa, \u201cAplikasi Halaman Tunggal\u201d) {<br \/>\nContainer(api, \u201cAplikasi API\u201d) {<br \/>\nContainerDb(db, \u201cDatabase\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201cSistem Perbankan Inti\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201c1. Klik \u2018Akun\u2019\u201d, \u201c\u201d)<br \/>\nRel(spa, api, \u201c2. GET \/accounts\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201c3. Baca ringkasan yang di-cache\u201d, \u201c\u201d)<br \/>\nRel(api, coreBanking, \u201c4. Ambil data terbaru\u201d, \u201c\u201d)<br \/>\nRel(api, spa, \u201c5. Kembalikan JSON\u201d, \u201c\u201d)<\/p>\n<p>TAMPILKAN_LEGENDA()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Diagram Penempatan<\/strong>\u00a0(pemetaan fisik tingkat tinggi):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>judul Diagram Penempatan untuk Sistem Perbankan Internet<\/p>\n<p>Node_Penempatan(aws, \u201cAmazon Web Services\u201d, \u201cAwam\u201d) {<br \/>\nNode_Penempatan(ec2, \u201cKelompok Auto-Scaling EC2\u201d, \u201cLinux\u201d) {<br \/>\nKontainer(api, \u201cAplikasi API\u201d, \u201cJava Spring Boot\u201d)<br \/>\n}<br \/>\nNode_Penempatan(rds, \u201cRDS\u201d, \u201cPostgreSQL\u201d) {<br \/>\nKontainerDb(db, \u201cDatabase\u201d)<br \/>\n}<br \/>\n}<\/p>\n<p>Node_Penempatan(customerDevice, \u201cPerangkat Pelanggan\u201d, \u201cWeb\/Mobile\u201d) {<br \/>\nKontainer(spa, \u201cAplikasi Halaman Tunggal\u201d)<br \/>\nKontainer(mobile, \u201cAplikasi Seluler\u201d)<br \/>\n}<\/p>\n<p>Sistem_Ext(coreBanking, \u201cSistem Perbankan Inti (mainframe lokal)\u201d)<\/p>\n<p>Rel(spa, api, \u201cMelakukan pemanggilan API ke\u201d, \u201cHTTPS\u201d)<br \/>\nRel(mobile, api, \u201cMelakukan pemanggilan API ke\u201d, \u201cHTTPS\u201d)<br \/>\nRel_U(api, spa, \u201cMengirimkan ke peramban web pelanggan\u201d)<br \/>\nRel_U(api, mobile, \u201cMengirimkan ke aplikasi seluler\u201d)<\/p>\n<p>TAMPILKAN_LEGENDA()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>Cara Menggunakan Studi Kasus Ini dalam Praktik<\/h3>\n<ol>\n<li>\n<p>Mulai dengan lokakarya: gambar Konteks di papan tulis.<\/p>\n<\/li>\n<li>\n<p>Iterasi ke Kontainer dan Komponen menggunakan PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Simpan diagram-diagram di repositori kode (sebagai kode!) agar tetap diperbarui.<\/p>\n<\/li>\n<li>\n<p>Hasilkan dokumentasi hidup secara otomatis.<\/p>\n<\/li>\n<\/ol>\n<p>Contoh Sistem Perbankan Internet ini adalah referensi resmi yang dibuat oleh Simon Brown dan digunakan di ribuan organisasi di seluruh dunia. Dengan mengikuti langkah-langkah ini, Anda kini memiliki deskripsi arsitektur yang lengkap dan siap produksi yang dapat dipahami oleh siapa saja\u2014mulai dari CEO hingga pengembang pemula\u2014pada tingkat detail yang tepat.<\/p>\n<h3>Artikel Diagram C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Panduan Utama untuk Visualisasi Model C4 Menggunakan Alat AI Visual Paradigm<\/strong><\/a>: Panduan ini menjelaskan cara memanfaatkan alat berbasis AI untuk mengotomatisasi dan meningkatkan visualisasi model C4 agar desain arsitektur perangkat lunak menjadi lebih cepat.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Memanfaatkan AI C4 Studio Visual Paradigm untuk Dokumentasi Arsitektur yang Lebih Efisien<\/strong><\/a>: Artikel ini menjelaskan penggunaan studio yang ditingkatkan dengan AI untuk membuat dokumentasi arsitektur perangkat lunak yang bersih, dapat diskalakan, dan mudah dipelihara.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Panduan Utama untuk C4-PlantUML Studio: Mengubah Desain Arsitektur Perangkat Lunak<\/strong><\/a>: Sumber ini mengeksplorasi penggabungan otomatisasi berbasis AI, kejelasan model C4, dan fleksibilitas PlantUML menjadi satu alat yang kuat.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Panduan Komprehensif untuk C4 PlantUML Studio Berbasis AI dari Visual Paradigm<\/strong><\/a>: Panduan ini menjelaskan alat khusus yang dirilis pada akhir 2025 yang mengubah permintaan bahasa alami menjadi diagram C4 berlapis.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>C4-PlantUML Studio | Pembuat Diagram C4 Berbasis AI<\/strong><\/a>: Ringkasan fitur ini menyoroti alat berbasis AI yang dirancang untuk menghasilkan diagram arsitektur perangkat lunak C4 dari deskripsi teks sederhana.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Membuat dan Memodifikasi Diagram Komponen C4 dengan Chatbot AI Visual Paradigm<\/strong><\/a>: Tutorial ini menunjukkan cara menggunakan chatbot berbasis AI untuk secara iteratif membuat dan menyempurnakan arsitektur tingkat komponen pada sistem yang kompleks.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Pembuat Diagram C4 Berbasis AI: Tingkat Inti dan Tampilan Pendukung<\/strong><\/a>: Halaman ini menjelaskan bagaimana pembuat AI mendukung empat tingkat inti model C4\u2014Konteks, Wadah, Komponen, dan Penempatan\u2014untuk memberikan dokumentasi yang komprehensif.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Pembuat Diagram AI: Rilis Dukungan Lengkap Model C4<\/strong><\/a>: Pembaruan ini menjelaskan integrasi fitur berbasis AI untuk pembuatan otomatis diagram model C4 berjenjang.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>Pembuat AI Model C4: Mengotomatisasi Seluruh Siklus Pemodelan<\/strong><\/a>: Sumber ini menyoroti bagaimana chatbot AI khusus menggunakan permintaan percakapan untuk memastikan konsistensi dalam dokumentasi arsitektur untuk tim DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Ulasan Komprehensif: Chatbot AI Umum vs. Alat C4 Visual Paradigm<\/strong><\/a>: Perbandingan ini menjelaskan mengapa alat khusus seperti C4 PlantUML Studio memberikan hasil yang lebih terstruktur dan berkualitas profesional dibandingkan model bahasa umum.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0Model C4, yang dibuat oleh Simon Brown, adalah cara sederhana, hierarkis, dan ramah pengembang untuk memvisualisasikan arsitektur perangkat lunak. Model<\/p>\n","protected":false},"author":11,"featured_media":12024,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-12023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya\" \/>\n<meta property=\"og:description\" content=\"The\u00a0Model C4, yang dibuat oleh Simon Brown, adalah cara sederhana, hierarkis, dan ramah pengembang untuk memvisualisasikan arsitektur perangkat lunak. Model\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Maya\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":1643,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/id\/\",\"name\":\"Media Maya\",\"description\":\"Belajar satu hal baru setiap hari\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"id_ID","og_type":"article","og_title":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya","og_description":"The\u00a0Model C4, yang dibuat oleh Simon Brown, adalah cara sederhana, hierarkis, dan ramah pengembang untuk memvisualisasikan arsitektur perangkat lunak. Model","og_url":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Media Maya","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"8 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":1643,"image":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc) - Media Maya","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/id\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/id\/"},{"@type":"ListItem","position":2,"name":"Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/id\/#website","url":"https:\/\/www.cybermedian.com\/id\/","name":"Media Maya","description":"Belajar satu hal baru setiap hari","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/comments?post=12023"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media\/12024"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media?parent=12023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/categories?post=12023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/tags?post=12023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}