WEB DEVELOPMENT LIFECYCLE

πŸ”„ WEB DEVELOPMENT LIFECYCLE (Siklus Pengembangan Website)


1. πŸ“Œ Pengertian Web Development Lifecycle

Web Development Lifecycle (WDLC) adalah tahapan sistematis dalam proses pembuatan website mulai dari perencanaan hingga pemeliharaan.


2. 🎯 Tujuan Pembelajaran

Mahasiswa mampu:

  • Memahami tahapan pengembangan website
  • Menerapkan proses WDLC dalam proyek
  • Menggunakan CMS (WordPress) dalam setiap tahap

3. 🌐 Gambaran Umum WDLC

https://images.openai.com/static-rsc-4/xTkYyzEYCwj9fwCz8B0LVQHnO31rxOufDqr9jCrF-gp-wo_bi3Eo1vhx_Ifq1KO7d3Ys_mIyzaMRiITnfHozphq1Uu80JZBpViFrwV_L0MIpyBOee7G6jMD5F2klf_M4qFsKitgt-nEoDUV9RH46mf8Om8tgz3joSY12756y8g1CeAU3nHtRg2muJ99ImRtz?purpose=fullsize
https://images.openai.com/static-rsc-4/McItSbg4g-uve8SdM-g_qMBNHIrt5OYFelL2_hKLAfL5gBpLZNYM8O1pyQjO6dqBFlWrQMNEzBn9tVUmnXF6haX1LlLiNnBHreuEh9FVul_xMhWtao-fDFiXUP_6BFqPrIGel0BUHyWYiX1RTnpr4JD1sCHibr10IiykxE23EYkeB7VyzjSNqoSZSXHS22u3?purpose=fullsize
https://images.openai.com/static-rsc-4/5bnBp7qxPzDiFSERFQLvsZvKOc346YtPbRjJTOSHiUsTkPCXCCepbjEpmCGy_JQhJTTl2ILT8clsp0ImuxRwy3sZIDSVTaCoPuU4VqaKPZISJd6DxiGJae7oNur6X0PyNsjAP6ltLypyYPp7SdZrM2gWvzEUH6z-tYcuK-CfkOuIoIvB6cBmjco9tetAthPA?purpose=fullsize

6


4. πŸ”„ Tahapan Web Development Lifecycle


4.1 πŸ“ Planning (Perencanaan)

https://images.openai.com/static-rsc-4/odmFlM1xJSMHTQFVqj4Yt5kKCwfjoiyHij7oFlStjP8WLMnNAhF1gtHu4Iunvhdf4DCdNV6K0U_rrN8e1bNzWBLdM78RxvsVx7h2_W8AOj4nMHaR_D8fZ264GJrQ-XQytkB2F7Mqr7izJKic9KEVJQS9ryOVfjO5tT5lLyLjIzy7ssUKBfA5fVfrnNJ522qb?purpose=fullsize
https://images.openai.com/static-rsc-4/b7T35Z6NYS3qdsBfC4fGcuYjkdM0kU2AEG_KAQt7tYZ4myP7BrA0ZaTNZ_djqtKIoDfxOTkA8bz9MVUwuroWQZlVuRGqgdecuUaYOT5femOQNcVkLK1KDPVAcHZvV6CTbpLLl9q84i3YWaiUBlUPS-sndlm0aoobFo8mf96MNyNk0QaaGCO38CrrR1de3BGX?purpose=fullsize
https://images.openai.com/static-rsc-4/5tTmB9ynHDLn97MBYO9KtFiZfauLokVdbJFvl2r7v3a2vEAgoPcCv5HOu1TxzOpFQhsmfjOw9lZm3moI8BeFEYanIehPHVMqa_Ygr7Ds8n0iA9Qzvsmayaha5THdKAmTozX96j9QQWY5z5gRKzd9EoebLmg4OVFG7z5A7XxBDaV46GPHlxuZ3HsurSsKjtRA?purpose=fullsize

7

πŸ“Œ Kegiatan:

  • Analisis kebutuhan
  • Menentukan tujuan website
  • Identifikasi target pengguna

πŸ“Œ Contoh:

Website kampus β†’ informasi mahasiswa


4.2 🎨 Design (Perancangan)

https://images.openai.com/static-rsc-4/0Qi0tAUxg8Gwdk16i-Aj6kEgnowI4sDp5v-N57gqOEk78aoIzH1kTxjFTo7m7u5jYA7tVXfLuD5Fys4TMC0l5y4r9_0sD4iK7-6IF2u8hmrd71gwV_qmCSXgal3nfy7AYMxLxJ3A2Egp1x-u6LetQ2D6NPH7WlzbQar3i68KjmZmvZpoybYWHjThENruMbEF?purpose=fullsize
https://images.openai.com/static-rsc-4/UkbdD1HjI8ZXqwXNxrmXbCCJ_Cr9ubVtAQnGtCEtotDmD7ub8O8TuO_YEe97NZcrPSdHz7_trcQr-V91lefSSqHhcDfTW6G_TWhw9_oz8SZFJqTksi0pV_lcSilfUH8jSpg28vhU-Zw_i-wrtz7hrOakKJKyrAWdE5cuqFNn06SqOctbzZ712s61VEf_d3GQ?purpose=fullsize
https://images.openai.com/static-rsc-4/Xl_7DeOpW0tWJ_r8-hajATmFYDQTEw_NA-8YqB_ZlalA1j1pq0PQt5tMOBIJfT8hn2RvmGJsFTq0AzTNuq0Xq0_PZ6zjzODlvCZjOMoqSCYERpXUjE1SIrF973R85isNmCAlK3d3WV_4Ch8jGPlOtulQmeN8NvBbbxT7Rxtsy3fty-RWeDuHo2gAslYCHy9T?purpose=fullsize

6

πŸ“Œ Kegiatan:

  • Wireframe
  • Mockup UI/UX
  • Struktur navigasi

4.3 πŸ’» Development (Pengembangan)

https://images.openai.com/static-rsc-4/my4lR1xFkgmKydYg27JY-7Wc-ZRF_QeASh8KTtiBsdSL7LwGYJzQraj5o3nAfgmmp5Q-mVAknkavM01fI0XvA8ALABJ2NVX2hcaMufsOw0vQIMg1Q4QRbTTckhCY2_2YNZT0eQuFxGK7sZJuBQRvZUbu6wS-ehnUoBGcwQBu09lQwprPS56DjoOmgn_3bLkM?purpose=fullsize
https://images.openai.com/static-rsc-4/CUr7CVCAzW4J2lo87EBpzorNaHN-HapzHu5qZumYsLrke-HLwLdVHhiidulSQoZ7gEzdDuKgNZfeG8dFrfqJt2XLaxzd7bNsIsEm6pSV8rHF6CHzkCmRJUxjCkL-odae-HV9n-1ip4bHaottCx7a5nTgIiHaTXbVgSaFkYLPZbM9KwL5I-sPngDt-lA2dEk7?purpose=fullsize
https://images.openai.com/static-rsc-4/0T3APtiO6SYNz49a2mwuleRMDXjQBTerrsNEg4iGlOjDvyc_AurK7TPKWA2r2f838Wzvf0x0sO2esF7CT5jdsT9b92Onrvh-l6FO_HRKZVeLPBtC2WL_MEnL2cD_m-_kx-0YNuXUjrBh6HQn38RvIBQxzc_owdn6YsvMKu7Gs5TExB5HyHUo7AMnH-nEjTjI?purpose=fullsize

6

πŸ“Œ Kegiatan:

  • Coding (HTML, CSS, PHP)
  • Instalasi CMS seperti WordPress
  • Integrasi database

4.4 πŸ§ͺ Testing (Pengujian)

https://images.openai.com/static-rsc-4/sB4mWuhimlIT2TyS6vybeLcilchJY7M2fTk8lPTM-Ng6A5PArWUCW4VyyT3_Hk_IBxZQj0ttK5uAVGfS4MHYQ0TzyVdrX6fS-IeQYqha9TwCkY7ua2s503394YLwlfBKXT0Om8DpjkWcA7WLKh3-FeV2g15OzXWwapt-PlzdghTwXGp6GujR2J8gyjWGr7tL?purpose=fullsize
https://images.openai.com/static-rsc-4/H3FuCqzc8cKpR9ArmnQe0AMJN_FZWcmUY_Lffxx-WS1nydIAapQvHU2G6As13IZdgctjBkiPQyqdHoLDMEyxwXKDV-AEiFX42_e_O06eg_rmvT9rhdSnkYDq4v0gH8zC1q8rGDbmw7hcLzW3prrO_olg_5Xvrnkwt8-kjDMip4yU1Zrvyoj8o-YH3AK6lRcd?purpose=fullsize
https://images.openai.com/static-rsc-4/N2xnOFNB1poRItUJQKt2QfsMK8yHRlOefllmWSk7kvacUDDmyaUYUbjo3s2IqZsDACcirsdmAnyUgQ6RPhTi8qcfYGGVLkoVxNObgEnFrh0u2APsYjhF3HU0i8OuLKx2j296pQUmeBXmmpIQ1JpsAMcF18rlA-wfcfubQfZU1_iV3dtVC4E-EGrBb6rrxW2Y?purpose=fullsize

7

πŸ“Œ Kegiatan:

  • Uji fungsi
  • Uji tampilan (responsive)
  • Debugging

4.5 πŸš€ Deployment (Peluncuran)

https://images.openai.com/static-rsc-4/b_U3kKtYHIXJdMLMSKVIEm2xCuCh8SpAkuxL-KfjjTL6KQGfym2apkyAGwQdckIqTEjEjZIXzFvkQreYW7hveKDHVPaTUFhZRaK25-CBHInuX4DG9YEoKZ53Fkz1yprCn1AKohynCQauEQ76ru0RGvNpjkKUNRdZ978rehi43rIOE7w37N75CosnxtGJg16Y?purpose=fullsize
https://images.openai.com/static-rsc-4/9gV3VYT1oLMfONYdc9XAtWfaveV28GpDLjCgUWPvBWtQfBK3ptZDr29-1vH48wmvsaCA2cB_183mpGpvaIta1T2QXiJvaaqbAYKEgX6WAOROQonf5KpvwIwvNCVIT3bIUvUbnAU9hP4GjSlxKAom3JP73dvfMndwxeWVv_kVDao-vMhsDJheP7SZCCzVJBZ4?purpose=fullsize
https://images.openai.com/static-rsc-4/ukJP78lok7Dqyx6XAjVItP4jR5lVDpmw6rLj8O6Jh4u1HjrntRdz6sJDMsf6TieLGSlNb-dRjYx4WTTsRSGSpk0RLB92oRup9xpxmBL0LOK0ooxGKKz0wEg7c2NZqussxNHe_1CCuptFINfnWaFNV3hzDSll9mdmn8l5wYBn3M5Oni6zFQzr-Bi4x6AWv1s8?purpose=fullsize

7

πŸ“Œ Kegiatan:

  • Upload ke hosting
  • Setting domain
  • Website online

4.6 πŸ”§ Maintenance (Pemeliharaan)

https://images.openai.com/static-rsc-4/gQV4RmHDgL706pnTgZQDlWQyLfTsq_ajIbhMG7Yc9iU50kXgg0q97z46avePtkjVq2UkKPZQub71c03HO_fF_GmLYfMCG8FvbQIqjahDyHmHqllfgGa5ozCGwl0_fvpzdJkCyItOyFgq20smYfYZvr6eh60IhvWroCBkJ75pqizW-Z3WrxTz_KOF43f6YZC3?purpose=fullsize
https://images.openai.com/static-rsc-4/mvlSzGK5HpzaMRgsMfN2tTvbG5CpSSQR92gpAT3CvA1WTBR9fuw6xIq2pnvV89WyAdHTKe41ZLF-HMFuYFAPLQbOJbuHq7MXBJ77-Zs7g2pUnHtun6AWQkkQvJPsReUR32HcXplrEywo0gnK83FnPJ8YHldMQglv6x_nTRx_a1IjBmBXeD23Zq7KhoNX5tLy?purpose=fullsize
https://images.openai.com/static-rsc-4/Xz6-w0shyIC19FJHeesBFSHud_OvG7Ypo99noCKvcz4HfWK5zodbpDvGz6YvwqTfiudDtAAd4rd6xdWNgWiq583MEaW6Spmo5EPuYEnl-IQvqp3cEP7gdXZUEwdlTHiUoak1tof7JfY0SoPYrGBB89pbYIuOv5jKjiSDEHF04OzYy0lM76JU-uIHtV_Z7FP4?purpose=fullsize

4

πŸ“Œ Kegiatan:

  • Update konten
  • Update plugin/theme
  • Backup data
  • Perbaikan bug

5. πŸ” Model Siklus (Iteratif)

https://images.openai.com/static-rsc-4/VV46NkQJaySq45nepgPDYh66YzwePNMloY9NOq2_QYurYkizs5yTOf2C4wIBYQ6I-S2gzcARx-FCsqqW66XKazDiKXTLXuYvOPzJAVO6yNSj3OfB_cfyUTsRUUDJ1CmXdF82OFe9lt5Dv_TV0nhZy5Cm1IuaZbAXFFwRK-uN2gCyeLj5Yf-qdp_iLpbraJ3_?purpose=fullsize
https://images.openai.com/static-rsc-4/zQmlQeKpzxrlM6dCYQ2eQTsptInq28bx1T9aS0F7k09vps_MF8Az21JK3Z7aXu2R_ckEM3KZOJm3xzjcQfBvwEXVqlkrcbcaiRUgfI5Ln-dDLUaRzFegksxe41yirQaL59tDCPy7GwGFS350gz9d7ZYEzCeKQUrmmvcDMbQhFZHRIIO1w1niK0pm-SO2yxk6?purpose=fullsize
https://images.openai.com/static-rsc-4/3H7-aZLASpzFVw7_o-GOS6yEavODPe-K7J9jV-UdLeBL-vi4sboOi5czDQeklJ1Y0hJleqo1l56chHC1mUCd5dfKz_yXcthC171OfhQ2k-8XyTaEZ_mScOfx7FbUtAgZ8FDHE7MhD1IXED72ID-bHoi6FHI5gUEyUYJ8F2t6qXrkKj-okMxzj8xAMnvFKkQY?purpose=fullsize

5

  • Proses tidak berhenti
  • Selalu ada perbaikan

6. 🧩 WDLC dalam WordPress

πŸ“Œ Mapping:

  • Planning β†’ menentukan jenis website
  • Design β†’ memilih tema
  • Development β†’ install plugin
  • Testing β†’ cek tampilan
  • Deployment β†’ hosting
  • Maintenance β†’ update

7. πŸ†š WDLC vs SDLC

AspekWDLCSDLC
FokusWebsiteSoftware
ToolsCMS, HTMLProgramming
OutputWebsiteAplikasi

8. ⚠️ Tantangan dalam WDLC

https://images.openai.com/static-rsc-4/tZuwFU48IEUWdjHr_8IHJ0fewR_4PsKwj45jkdStApa7bD0y6fIECpvRHSh7zTOvtLB1pJEIreCoZvl4f7mBZvoo3diQH3DU0HD1bjcrOmTPi2d_MblpJkcjtREiyNtTSaB1eVKruhTDGRygrYgDPmIsNe3pMYoozHPnli8YDPJGc92CmNyFcuUeUfOiykZG?purpose=fullsize
https://images.openai.com/static-rsc-4/_QzxHom3dPDwxr4MM3h9HW4e_SbLF4Db6oG1tFzVcGDfj0IbH4SDRdJzkXKdFUpTceHEpRBr_zpNBjh2KeK3TkaF0u1stzSZlzkP3KQvSjlklNKVlTcY7z9g4-u-FUWwul8q_G9CacuQkLmdnhvAz0HlAlYylGXQ5vhkQSN1SAPgc5Pnmzk5IuYHEhTp_K5W?purpose=fullsize
https://images.openai.com/static-rsc-4/5RHO-XBP9JzLBIE0uvGEjmc0pfo7kCZsPePdnVoOKBHIO-_rXRnO1PGp-NP0Fa16bKBH1aizZmsT3dZ8VSHalWLPYaZUbIwFHyfOqoh9addSyRWXvgChwZe60rEzH6s85k8p2tyM_2FK0lg84PRgjhzCPkBaanpCTYy9BU3XY-FSVAEwoLEKgOijKdfUALLH?purpose=fullsize

6

  • Perubahan kebutuhan
  • Bug
  • Keamanan
  • Performa

9. πŸ§ͺ Latihan Sederhana


🎯 Latihan 1:

Buat perencanaan website:

  • Tema: Blog / Kampus

🎯 Latihan 2:

Buat wireframe sederhana (gambar di kertas)


🎯 Latihan 3:

Install WordPress


🎯 Latihan 4:

Coba ubah tampilan website


10. πŸ“ Tugas Praktikum


🎯 Tugas: Mini Project Website

https://images.openai.com/static-rsc-4/7aEbSSraX_AgjwAnFBObSCSPtnjan5Q4_W7V2F15sQ6ADgo0YVnGWpRCUAiYZi4NjS7HS2z7PIuApfGo8f378448LuvXqi41L5vH9DY2l8JVf2Wu8UkSuwPVzB4njMdafM3_pVMwWnwVM7Krv1GvMKMXl-5TU0Wrdte6w297SI1H72S6hTggFMWJ95F9mosD?purpose=fullsize
https://images.openai.com/static-rsc-4/51vIJM9kQKuJAifSIYvhhhEQanxEoBVxfIS7ul72HzwDbJJKuFcc9EpZwbeMFJ8xbFEazsNOFnA1banv0ydW9wWPHaYmpzs-QDkTJa6JAq7YZ0odEthyf1-2j68-CQDMNrrUqmMoNBIAp87_3gVUmsUuCscztKPWaWmlPYOG4udoN0myjauxlsehdVZ0QNTY?purpose=fullsize
https://images.openai.com/static-rsc-4/wWVS316yLH4bM7wcVUv-teOO9i04mKW8RJDHkpcaUqo-MrEzM7d56ZourrCSl3i-zTUv1G9pzcY4rZYz-fia2jKsHI_TrhAwaKkJGqV6B_ZCCfx8a_JKxBDJN8-PsEI6YJpvblCcoIQzbgchHbhZjeUJrJPnXj9bDcYtuQrI34Bo86o-Kw9Y9Or2Zdmqafo2?purpose=fullsize

6

πŸ“Œ Ketentuan:

Mahasiswa membuat website dengan tahapan WDLC:

  1. Planning
  2. Design
  3. Development
  4. Testing
  5. Deployment (boleh localhost)

11. 🎯 Kesimpulan

  • WDLC adalah proses penting dalam pembuatan website
  • Terdiri dari 6 tahap utama
  • WordPress mempermudah tahap development
  • Proses bersifat berulang (iteratif)

12. πŸ“š Diskusi

  1. Apa itu WDLC?
  2. Mengapa planning penting?
  3. Apa yang dilakukan saat testing?
  4. Apa fungsi maintenance?