The Website Development Life Cycleسووڕی ژیانی گەشەپێدانی تۆڕگە

Static and Dynamic Websites and Website Types showed what kinds of websites exist and how dynamic pages are made. This lesson is about the work of making one: the phases a website goes through from the first idea to the day it is online — and after.

لاپەڕەتۆڕە نەگۆڕەکان، لاپەڕەتۆڕە داینامیکەکان و جۆرەکانی تۆڕگە پیشانی دا چ جۆرە تۆڕگەیەک هەن و لاپەڕەتۆڕە داینامیکەکان (Dynamic web page) چۆن دروست دەکرێن. ئەم وانەیە دەربارەی کاری دروستکردنی یەکێکیانە: ئەو قۆناغانەی تۆڕگەیەک لە یەکەم بیرۆکەوە تا ئەو ڕۆژەی دەچێتە سەر ئینتەرنێت (Internet) پێیاندا تێدەپەڕێت — و دوای ئەوەش.

Building a website is a project, and like every software project it follows a life cycle: an organised process for developing and maintaining a site. The Website development life cycle (WDLC) has five phases. Each phase is a set of tasks, and together they make the whole design process.

دروستکردنی تۆڕگەیەک پڕۆژەیە و وەک هەموو پڕۆژەیەکی نەرمەواڵە سووڕی ژیانی گەشەپێدان (Software development life cycle) پەیڕەو دەکات: ڕێکارێکی ڕێکخراو بۆ گەشەپێدان و چاککاریی تۆڕگەیەک. سووڕی ژیانی گەشەپێدانی تۆڕگە ⁦(WDLC)⁩ پێنج قۆناغی هەیە. هەر قۆناغێک کۆمەڵێک ئەرکە و پێکەوە هەموو ڕێکاری دیزاینەکە پێکدەهێنن.

Why a cycle and not a straight line? A website is never "finished": prices change, new services start, browsers and phones change. Each change goes round the phases again, usually faster. The same idea, with eight steps, is the database development life cycle; and the English names of the stages are practised in Stages of making a website.

بۆچی سووڕ نەک هێڵێکی ڕاست؟ تۆڕگەیەک هەرگیز «تەواو» نابێت: نرخەکان دەگۆڕێن، خزمەتگوزاریی نوێ دەست پێدەکات، تۆڕگەڕەکان (Web browser) و مۆبایلەکان دەگۆڕێن. هەر گۆڕانکارییەک دووبارە بە قۆناغەکاندا دەڕوات، زۆرجار خێراتر. هەمان بیرۆکە بە هەشت هەنگاو بۆ بنکەدراوەش (Database) هەیە: سووڕی ژیانی گەشەپێدانی بنکەدراوە؛ ناوە ئینگلیزییەکانی قۆناغەکانیش لە قۆناغەکانی دروستکردنی تۆڕگە ڕاهێنانیان لەسەر دەکرێت.

Planning is the first phase and the foundation of the whole site. If the planning goes wrong, every later phase goes wrong too: the wrong pages are designed, built and tested. Good decisions about how the site is organised and how its pages look start with a plan. Planning has five tasks.

پلاندانان یەکەم قۆناغ و بناغەی هەموو تۆڕگەکەیە. ئەگەر پلاندانانەکە هەڵە بڕوات، هەموو قۆناغێکی دواتریش هەڵە دەڕوات: لاپەڕەی هەڵە دیزاین دەکرێن، دروست دەکرێن و تاقی دەکرێنەوە. بڕیاری باش دەربارەی ڕێکخستنی تۆڕگەکە و شێوەی لاپەڕەکانی بە پلانێک دەست پێدەکات. پلاندانان پێنج ئەرکی هەیە.

Every site has a purpose: profit, sales, a known brand, informing people, and others. Write the goals down, and make them SMART goals, so that you can later check whether the site worked:

هەموو تۆڕگەیەک مەبەستێکی هەیە: قازانج، فرۆشتن، ناوبانگی بازرگانی، ئاگادارکردنەوەی خەڵک و هی تر. ئامانجەکان بنووسە و بیانکە بە ئامانجی SMART، تا دواتر بتوانیت بپشکنیت ئایا تۆڕگەکە سەرکەوتوو بوو:

"More customers" is a wish; "40 online cake orders a week by the end of March" is a goal. The slide's picture also adds ethical and reachable to the five letters: a goal must be honest, too.

«کڕیاری زیاتر» ئارەزوویە؛ «٤٠ داواکاریی ئۆنلاینی کێک لە هەفتەیەکدا تا کۆتایی ئادار» ئامانجە. وێنەکەی سلایدەکە ئەخلاقی و گەیشتنپێکراویش دەخاتە سەر پێنج پیتەکە: ئامانج دەبێت ڕاستگۆیانەش بێت.

Who will use the site? Name the target audience, why they will visit and what limits their technology puts on them. Dilan's customers are mostly people in Sulaimani on phones, some with slow mobile data, some reading only Kurdish.

کێ تۆڕگەکە بەکار دەهێنێت؟ بینەرانی ئامانج ناو ببە، بۆچی سەردان دەکەن و تەکنەلۆجیاکەیان چ سنوورێکیان بۆ دادەنێت. کڕیارانی دیلان زۆرتر خەڵکی سلێمانین لەسەر مۆبایل، هەندێکیان بە ئینتەرنێتی مۆبایلی خاو، هەندێکیان تەنها کوردی دەخوێننەوە.

Which technologies? Decide what you will build with and what you must support. The lecture names browser versions, fast or slow connections and screen resolutions as technical limits that decide whether users are happy. In 2026 that means: a responsive design that works from a 360 px phone to a wide monitor, small pictures for slow connections, every current browser, and — for this bakery — HTML, CSS, a little JavaScript and PHP with a database for the orders.

چ تەکنەلۆجیایەک؟ بڕیار بدە بە چی دروستی دەکەیت و پشتگیریی چی دەبێت بکەیت. وانەکە وەشانی تۆڕگەڕ، پەیوەندیی خێرا یان خاو و ڕوونیی شاشە (Screen resolution) وەک سنووری تەکنیکی ناو دەبات کە بڕیار دەدەن بەکارهێنەرەکان ڕازی دەبن یان نا. لە ٢٠٢٦دا ئەمە واتە: دیزاینێکی ڕێسپۆنسیڤ (Responsive design) کە لە مۆبایلێکی ٣٦٠ پیکسڵییەوە (Pixel) تا شاشەیەکی (Monitor) پان کار بکات، وێنەی بچووک بۆ پەیوەندیی خاو، هەموو تۆڕگەڕێکی ئێستایی و — بۆ ئەم نانەواخانەیە — HTML، CSS، کەمێک JavaScript و PHP لەگەڵ بنکەدراوەیەک بۆ داواکارییەکان.

Who owns the content? Name the people who write and approve each part — Dilan writes the prices and the cake descriptions, Aram writes the pages, a friend takes the photos. They should take part in every phase, not only at the end, because they know what customers ask.

ناوەڕۆکەکە هی کێیە؟ ئەو کەسانە ناو ببە کە هەر بەشێک دەنووسن و پەسەندی دەکەن — دیلان نرخەکان و وەسفی کێکەکان دەنووسێت، ئارام لاپەڕەکان دەنووسێت، هاوڕێیەک وێنەکان دەگرێت. دەبێت لە هەموو قۆناغێکدا بەشدار بن، نەک تەنها لە کۆتاییدا، چونکە دەزانن کڕیاران چی دەپرسن.

What information goes on the site, and where? List the content and give each piece a home: prices on the Breads and Cakes pages, the map and opening hours on Contact. Good content raises the quality of a site more than decoration does; a page crowded with everything helps nobody.

چ زانیارییەک دەچێتە سەر تۆڕگەکە و لە کوێ؟ ناوەڕۆکەکە بژمێرە و شوێنێک بدە بە هەر پارچەیەک: نرخەکان لە لاپەڕەکانی نان و کێک، نەخشە و کاتی کردنەوە لە پەیوەندی. ناوەڕۆکی باش زیاتر لە ڕازاندنەوە جۆریی تۆڕگەیەک بەرز دەکاتەوە؛ لاپەڕەیەکی پڕ لە هەموو شتێک یارمەتیی کەس نادات.

In Requirements analysis the analyst gathers what the users need to get from the site and studies it step by step: the functions of the system (what it must do), the input data and where it comes from, and the output data and how it is shown. The analyst also writes down the performance people expect, such as how fast a page must answer and how long a whole task (for example an order) may take.

لە شیکردنەوەی پێداویستییەکان (Requirements analysis)دا شیکەرەوە ئەوەی بەکارهێنەرەکان پێویستیانە لە تۆڕگەکەوە دەستیان بکەوێت کۆ دەکاتەوە و هەنگاو بە هەنگاو لێی دەکۆڵێتەوە: ئەرکەکانی سیستەمەکە (دەبێت چی بکات)، دراوەی هاتوو و لە کوێوە دێت، هەروەها دراوەی دەرچوو و چۆن پیشان دەدرێت. شیکەرەوە خێرایی چاوەڕوانکراویش دەنووسێت، وەک لاپەڕەیەک دەبێت چەند خێرا وەڵام بداتەوە و ئەرکێکی تەواو (بۆ نموونە داواکارییەک) چەند کاتی دەوێت.

From the requirements, the analyst lists the tasks users must be able to complete (find today's breads, see a cake's price, order a cake, find the shop). Then come the parts that hold up those tasks: the Site map — every page and how they link — the structure of the site, and the final content of each page.

لە پێداویستییەکانەوە شیکەرەوە ئەو ئەرکانە دەژمێرێت کە بەکارهێنەرەکان دەبێت بتوانن تەواوی بکەن (دۆزینەوەی نانی ئەمڕۆ، بینینی نرخی کێکێک، داواکردنی کێک، دۆزینەوەی دوکانەکە). پاشان ئەو بەشانە دێن کە ئەو ئەرکانە ڕادەگرن: نەخشەی تۆڕگە — هەموو لاپەڕەیەک و چۆن بە یەکەوە بەستراون — پێکهاتەی تۆڕگەکە و ناوەڕۆکی کۆتایی هەر لاپەڕەیەک.

Analysis is one of the most important phases: it makes sure the planned site has everything users look for. If the analysis is wrong — a missing task, a wrong input — nobody can promise the quality of the finished site.

شیکردنەوە یەکێکە لە گرنگترین قۆناغەکان: دڵنیا دەبێتەوە کە تۆڕگە پلانکراوەکە هەموو ئەو شتانەی هەیە کە بەکارهێنەرەکان بە دوایدا دەگەڕێن. ئەگەر شیکردنەوەکە هەڵە بێت — ئەرکێکی ونبوو، دراوەیەکی هاتووی هەڵە — کەس ناتوانێت بەڵێنی جۆریی تۆڕگە تەواوکراوەکە بدات.

Design means preparing the blueprint of the website: diagrams of the logical and physical parts that will be built later. The main ones are the data model (what is stored — cakes, orders), the process model (what happens — an order is placed, checked, confirmed) and the presentation model (how pages look — wireframes, colours). The design is written down so that everybody builds the same thing.

دیزاین واتە ئامادەکردنی نەخشەی کاری تۆڕگەکە: هێڵکاریی بەشە لۆجیکی و فیزیکییەکان کە دواتر دروست دەکرێن. سەرەکییەکانیان ئەمانەن: مۆدێلی دراوە (Data model) (چی هەڵدەگیرێت — کێک، داواکاری)، مۆدێلی ڕێکار (چی ڕوودەدات — داواکارییەک دەکرێت، دەپشکنرێت، دڵنیا دەکرێتەوە) و مۆدێلی پیشاندان (لاپەڕەکان چۆن دەردەکەون — وایەرفرەیمەکان، ڕەنگ). دیزاینەکە دەنووسرێتەوە تا هەمووان هەمان شت دروست بکەن.

In this phase the team also keeps the purpose of the site in mind, because it shapes the design: teachers publish to inform students, businesses advertise and support their products, organisations keep their members informed, and individuals share a hobby or what they know.

لەم قۆناغەدا تیمەکە مەبەستی تۆڕگەکەش لەبیر دەکات، چونکە شێوەی دیزاینەکە دیاری دەکات: مامۆستایان بۆ ئاگادارکردنەوەی قوتابیان بڵاو دەکەنەوە، بازرگانییەکان ڕیکلام بۆ بەرهەمەکانیان دەکەن و پشتگیرییان دەکەن، دامەزراوەکان ئەندامەکانیان ئاگادار دەکەنەوە و تاکەکانیش حەز یان زانیارییەکانیان هاوبەش دەکەن.

One important design decision is the organisation of the site, the way the pages link to each other. There are three basic structures:

یەکێک لە بڕیارە گرنگەکانی دیزاین ڕێکخستنی تۆڕگەکەیە، واتە شێوەی بەستنەوەی لاپەڕەکان بە یەکترەوە. سێ پێکهاتەی بنەڕەتی هەن:

The design also fixes the parts every page shares: a Header with the logo and the site's title, the navigation (links on the left, the right or across the top), the body with the content, and a Footer, often with a second navigation bar (The parts of a web page). A Wireframe is a simple drawing of where these parts go. The lecture shows six common wireframes:

دیزاینەکە هەروەها ئەو بەشانە دیاری دەکات کە هەموو لاپەڕەکان هاوبەشن: سەرپەڕە (Header) بە لۆگۆ و ناونیشانی تۆڕگەکە، ڕێنیشاندان (بەستەر لە چەپ، ڕاست یان بە درێژایی سەرەوە)، جەستە بە ناوەڕۆکەکەوە و ژێرپەڕە (Footer)، زۆرجار بە شریتێکی ڕێنیشاندانی دووەمەوە (بەشەکانی لاپەڕەیەکی وێب). وایەرفرەیم وێنەیەکی سادەیە کە پیشان دەدات ئەم بەشانە لە کوێ دادەنرێن. وانەکە شەش وایەرفرەیمی باو پیشان دەدات:

Choose by the amount of navigation: B suits a small site with five or six main pages (and works well on phones, where the bar becomes a menu button); D and F suit large sites with sections and sub-pages. In a Kurdish site, A and C swap sides: the main menu goes where reading starts, on the right — a CSS grid does that by itself (Layouts in Kurdish).

بە پێی بڕی ڕێنیشاندان هەڵبژێرە: B بۆ تۆڕگەیەکی بچووک بە پێنج یان شەش لاپەڕەی بنەڕەتی دەگونجێت (و لەسەر مۆبایل باش کار دەکات، کە شریتەکە دەبێتە دوگمەیەکی مێنیو)؛ D و F بۆ تۆڕگەی گەورە بە بەش و ژێرلاپەڕەوە دەگونجێن. لە تۆڕگەیەکی کوردیدا A و C لا دەگۆڕنەوە: مێنیوی سەرەکی دەچێتە ئەو لایەی خوێندنەوە لێیەوە دەست پێدەکات، واتە ڕاست — CSS Grid خۆی ئەمە دەکات (ڕێکخستنی لاپەڕە بە کوردی).

Development means programming the pages from the design document: the HTML and CSS of each page (The modern way: header, nav, main and footer, Positioning and Page Layout), and the PHP and database code for the dynamic parts. While they work, developers prepare Test data for the inputs — real-looking orders, empty fields, a wrong date — and check that each page gives the expected output. Every program is also reviewed against the agreed programming standards.

گەشەپێدان واتە بەرنامەسازیی لاپەڕەکان لە بەڵگەنامەی دیزاینەوە: HTML و CSSـی هەر لاپەڕەیەک (ڕێگە نوێیەکە: header، nav، main و footer، شوێندانان و ڕێکخستنی لاپەڕە)، هەروەها کۆدی PHP و بنکەدراوە بۆ بەشە داینامیکەکان. لە کاتی کارکردندا، گەشەپێدەران دراوەی تاقیکردنەوە بۆ هاتووەکان ئامادە دەکەن — داواکاریی ڕاستەقینە-ئاسا، خانەی بەتاڵ، بەرواری هەڵە — و دەپشکنن کە هەر لاپەڕەیەک دەرچووی چاوەڕوانکراو دەدات. هەموو بەرنامەیەکیش بەرامبەر ستانداردە ڕێککەوتووەکانی بەرنامەسازی پێداچوونەوەی بۆ دەکرێت.

Testing shows the team that the site works exactly as the users expect, both in its information and in its performance. It follows a fixed routine:

تاقیکردنەوە بە تیمەکە پیشان دەدات کە تۆڕگەکە ڕێک وەک چاوەڕوانیی بەکارهێنەرەکان کار دەکات، هەم لە زانیارییەکانیدا هەم لە خێراییەکەیدا. ڕێکارێکی جێگیر پەیڕەو دەکات:

Testing is not only done at the end. Test at several stages of the life cycle — a wireframe can be tested with users before any code exists — and for every page review four things: its content (correct and current), its functions (links, forms, orders), its Usability (can people use it easily?) and its correctness (valid code, no errors).

تاقیکردنەوە تەنها لە کۆتاییدا ناکرێت. لە چەند قۆناغێکی سووڕی ژیاندا تاقی بکەرەوە — دەتوانرێت وایەرفرەیمێک پێش بوونی هیچ کۆدێک لەگەڵ بەکارهێنەرەکان تاقی بکرێتەوە — و بۆ هەموو لاپەڕەیەک پێداچوونەوە بە چوار شتدا بکە: ناوەڕۆکەکەی (دروست و نوێ)، ئەرکەکانی (بەستەرەکان (Hyperlink)، فۆرمەکان، داواکارییەکان)، ئاسانیی بەکارهێنانەکەی (Usability) (ئایا خەڵک بە ئاسانی بەکاری دەهێنن؟) و دروستییەکەی (کۆدی دروست، بێ هەڵە).

Since the lecture was written, five more checks have become normal for every site (What makes a good website?):

لەو کاتەوەی وانەکە نووسراوە، پێنج پشکنینی تر بۆ هەموو تۆڕگەیەک ئاسایی بوون (چی تۆڕگەیەکی باش دروست دەکات؟):

For a single page, the checklist before you publish turns all of this into nine quick steps.

بۆ یەک لاپەڕە، لیستی پشکنین پێش بڵاوکردنەوە هەموو ئەمانە دەکاتە نۆ هەنگاوی خێرا.

Implementation (the launch) installs the website on its real system: the web server and the database are set up, the real data is prepared (Dilan's cakes and prices), the old way and the new site may run side by side for a while (phone orders and online orders), and then the site goes live. This is the first time real users meet the site and work with it.

جێبەجێکردن (بڵاوکردنەوە) تۆڕگەکە لەسەر سیستەمە ڕاستەقینەکەی دادەمەزرێنێت: ڕاژەکاری وێب (Web server) و بنکەدراوەکە ئامادە دەکرێن، دراوە ڕاستەقینەکان ئامادە دەکرێن (کێک و نرخەکانی دیلان)، ڕێگە کۆنەکە و تۆڕگە نوێیەکە ڕەنگە بۆ ماوەیەک لە تەنیشت یەک کار بکەن (داواکاریی تەلەفۆنی و ئۆنلاین)، پاشان تۆڕگەکە دەکەوێتە کار. ئەمە یەکەم جارە بەکارهێنەرەکان ڕاستەقینەکان تۆڕگەکە دەبینن و کاری لەسەر دەکەن.

Launch includes Acceptance testing (user acceptance testing, UAT): the owner and some real users try the finished site and decide whether it does what they asked for. It is the technical and commercial milestone of the whole life cycle — after it, the site is officially handed over.

بڵاوکردنەوە تاقیکردنەوەی پەسەندکردن ⁦(UAT)⁩ لەخۆ دەگرێت: خاوەنەکە و هەندێک بەکارهێنەرێکی ڕاستەقینە تۆڕگە تەواوکراوەکە تاقی دەکەنەوە و بڕیار دەدەن ئایا ئەوە دەکات کە داوایان کردبوو. ئەمە خاڵی وەرچەرخانی تەکنیکی و بازرگانیی هەموو سووڕی ژیانەکەیە — دوای ئەوە تۆڕگەکە بە فەرمی ڕادەست دەکرێت.

Maintenance keeps the site up to date with today's information and needs: new prices, new cakes, fixed bugs, a new browser version. A current site keeps its visitors and earns back what the owners paid for it (a good return on their investment); an old one loses both.

چاککاری تۆڕگەکە لەگەڵ زانیاری و پێداویستییەکانی ئەمڕۆدا نوێ دەهێڵێتەوە: نرخی نوێ، کێکی نوێ، هەڵەی چاککراو، وەشانێکی نوێی تۆڕگەڕ. تۆڕگەیەکی نوێ سەردانکەرانی دەپارێزێت و ئەوەی خاوەنەکان بۆیان داوە دەیگەڕێنێتەوە (قازانجێکی باش لە وەبەرهێنانەکەیان)؛ تۆڕگەیەکی کۆن هەردووکیان لەدەست دەدات.

For each change, the developer first analyses what it needs, finds which parts of the design must change, makes the change and quickly checks that it works — a small trip around the life cycle. A big change, such as delivery to other towns, starts again with planning.

بۆ هەر گۆڕانکارییەک، گەشەپێدەر سەرەتا شی دەکاتەوە چی پێویستە، دەدۆزێتەوە کام بەشەکانی دیزاین دەبێت بگۆڕێن، گۆڕانکارییەکە دەکات و بە خێرایی دەپشکنێت کە کار دەکات — گەشتێکی بچووک بە دەوری سووڕی ژیانەکەدا. گۆڕانکارییەکی گەورە، وەک گەیاندن بۆ شارۆچکەکانی تر، دووبارە بە پلاندانان دەست پێدەکاتەوە.

For a single page, use the checklist before you publish.

بۆ یەک لاپەڕە، لیستی پشکنین پێش بڵاوکردنەوە بەکاربهێنە.