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?