Как сформулировать массив в данной верстке?

Question

[user_tm]

Имеется вот такая верстка

<div class="panel-content">
                            <div class="panel-tag">
                                <p>
                                    Сформируйте массив из элементов. Создайте структуру каждого элемента. <br>
                                    Выведите данные при помощи цикла <code>foreach</code>

                                </p>
                            </div>
                            <div class="d-flex mt-2">
                                My Tasks
                                <span class="d-inline-block ml-auto">130 / 500</span>
                            </div>
                            <div class="progress progress-sm mb-3">
                                <div class="progress-bar bg-fusion-400" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="d-flex">
                                Transfered
                                <span class="d-inline-block ml-auto">440 TB</span>
                            </div>
                            <div class="progress progress-sm mb-3">
                                <div class="progress-bar bg-success-500" role="progressbar" style="width: 34%;" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="d-flex">
                                Bugs Squashed
                                <span class="d-inline-block ml-auto">77%</span>
                            </div>
                            <div class="progress progress-sm mb-3">
                                <div class="progress-bar bg-info-400" role="progressbar" style="width: 77%;" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="d-flex">
                                User Testing
                                <span class="d-inline-block ml-auto">7 days</span>
                            </div>
                            <div class="progress progress-sm mb-g">
                                <div class="progress-bar bg-primary-300" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

вот ее скрин и там же задание на всякий случай напишу задание Сформируйте массив из элементов. Создайте структуру каждого элемента.
Выведите данные при помощи цикла foreach дать код было бы хорошо, но еще было бы лучше получить хотя бы краткое разъяснение, о том как я должен представлять каким должен быть массив? я так понимаю элементы в массиве это то что отмечено на скрине ниже( может быть я ошибаюсь). Заранее спасибо.

Answer 1

[Dmitry]

Да, вы верно определили элементы массива - осталось только создать массив. У вас получится что-то вроде следующего:

$items = [
	'My Tasks' => [ // уникальный ключ для каждого элемента
		'text' => '130 / 500', // текст, который показывается для элемента в span
		'color' => 'bg-fusion-400', // цвет
		'progress_wrapper_class' => 'mb-3', // класс для progress (уникальный у User Testing) или использовать if, как в примере ниже
		'progress_value' => 65, // значение progress bar
	],
	'Transfered' => [
		'text' => '440 TB',
		'color' => 'bg-success-500',
		'progress_wrapper_class' => 'mb-3',
		'progress_value' => 34,
	],
        // остальные элементы
];

Далее вам необходимо перебрать этот массив с помощью foreach:

<?php foreach ($items as $key => $item) : ?>
        <div class="d-flex <?php if ($key == 'My Tasks'): ?>mt-2<?php endif; ?>">
            <?= $key ?>
            <span class="d-inline-block ml-auto"><?= $item['text'] ?></span>
        </div>
        <div class="progress progress-sm mb-3">
            <div class="progress-bar <?= $item['color'] ?>" role="progressbar" style="width: <?= $item['progress_value'] ?>%;" aria-valuenow="<?= $item['progress_value'] ?>" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
<?php endforeach; ?>

Но в современной разработке все-таки чаще используются шаблонизаторы вроде twig.

Comments

[user_tm]

Спасибо за решение, все работает. А возможно сделать так, что бы все элементы заполнялись автоматический с помощью цикала, а не вручную вписывать как например ($item['text']), ну что бы в место $item['text'] вставить переменную из цикла? Попробую задать вопрос по другому, как с помощью цикла forach выбрать элемент который находится в массиве во втором уровне по вложенности? То как с помощью цикла forach добраться до элемента отмеченный ниже на скрине зеленным цветом я знаю, а как с foreach добраться до элемента отмеченный красным цветом?

[Dmitry]

user_tm,

А возможно сделать так, что бы все элементы заполнялись автоматический с помощью цикала, а не вручную вписывать как например ($item['text']), ну что бы в место $item['text'] вставить переменную из цикла?

Можно, но в конкретно этом случае так делать не стоит, потому что у My Tasks 130 / 500 не будет равно 65% (значение в прогресс баре), а значит все равно придется хранить все эти значения.

Попробую задать вопрос по другому, как с помощью цикла forach выбрать элемент который находится в массиве во втором уровне по вложенности?

Когда вы перебираете массив таким способом, как выше, то $item['text']. Если без foreach, то $items['My Tasks']['text']

Это ассоциативный массив, у которого ключ - строка (например, 'My Tasks'), а значение - другой ассоциативный массив. Этот другой ассоциативный массив уже не нужно перебирать с помощью foreach, т.к. есть доступ ко всем его элементам.

Вот здесь есть документация по массивам в php https://www.php.net/manual/ru/language.types.array.php

[user_tm]

Дмитрий, Спасибо за разъяснение!