Looking through a specific array

Question

I have a longwinded PHP file (see gist) which looks through a specific array (declared in another PHP file) named day.

GitHub

The value of day is a folder name and the value of reportArray contains a subfolder of day.

If the folder day is not empty, and the reportArray is also not empty, I made the code to dsiplay a div tag in HTML which contains some information about that report.

reportArray changes to reportArrayD2 on day[1] for Day 2 etc. The <style> tag only gets called once at `day[0] in the if statements as I only need it once.

Could someone please show me how to refactor this code? The functionality is there but I feel my current solution is very messy and unnecessarily long.

Here's an example of one of my 5 if statements:

if (empty($day[0]))
    {
        echo "

            <section class=\"suite-wrap\">
                <div class=\"suite has-suites\">
                    <div class=\"holder\">
                        <h1>Error: Folder Missing for Day 1</h1>
                    </div>
                </<div>
            </section>

        ";
    }

    else 
    {
        echo "
            <section class=\"suite-wrap\">
                <div class=\"suite has-suites\">
                <style>

                        h1 
                        {
                            padding-left: 15px;
                            flex-grow: 1;
                        }

                        h2
                        {
                            flex-grow: 1;
                            text-align: right;
                            padding-right: 15px;
                        }

                        h5
                        {
                            flex-grow: 1;
                            padding-left: 15px;
                            width: 240px;
                        }

                        .holder
                        {
                            display: flex;
                        }

                        .failedReportsFilter
                        {
                            flex-grow: 1;
                            width:382.25px;
                        }

                        .passedPercentage
                        {
                            flex-grow: 1;
                            text-align: center;
                        }

                        .reportResults
                        {
                            text-align: center;
                            width: 80px;
                        }

                        .percentPassed
                        {
                            padding-left: 0px;
                            text-align: center;
                            width: 240px;
                        }

                        .report
                        {
                            flex-grow: 4;
                        }


                        .duration
                        {
                            flex-grow: 1;
                            text-align: center;
                            padding-right: 15px;

                        }

                        .testsRan
                        {
                            flex-grow: 1;
                            text-align: right;
                            width: 240px;
                        }
                        #passedBar$day[0]
                        {
                            flex-grow: 4;
                            padding-top: 15px;
                        }

                </style>

                <div class=\"holder\">
                    <h1>Day 1 - " . $day[0] . "</h1>

                    <div id=\"passedBar$day[0]\">
                           <div class=\"barWrapper\">
                             <span class=\"progressText\"><B id=\"passRate$day[0]\"></B></span>
                                <div class=\"progress\">
                                  <div id=\"progress-bar$day[0]\" class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"\" aria-valuemin=\"0\" aria-valuemax=\"100\" >   
                                      <span  class=\"popOver\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"85%\"> </span>     
                                  </div>
                                </div>
                          <div class=\"col-md-2 col-lg-2\"></div>
                        </div>
                    </div>

                    <h2 id=\"filterFailedTests$day[0]\"class=\"failedReportsFilter\"></h2>

                </div>



                <section class=\"suite-wrap\">
                    <div class=\"suite has-tests\">";

                    if (empty($reportArray))
                    {
                        echo "

                        <style>

                            #testError
                            {
                                padding-left: 15px
                            }

                        </style>

                        <div id=\"testError\">Error: No Tests Found</div>

                            ";
                    }
                    else
                    {

                        for ($i = 0; $i < count($reportArray); $i++)
                        {   

                            $htmlFilesArray = array();

                            foreach (glob("reports/".$day[0]."\\" . $reportArray[$i] . "\\*.html") as $htmlFile)
                            {   
                                $htmlFilesArray[] = $htmlFile;
                            }   

                            for ($x = 0; $x < count($htmlFilesArray); $x++)
                            {
                                echo "<div class=\"holder\">
                                        <h5 class=\"report\"><a id=\"report".$i."\" href=\"" . $htmlFilesArray[$x] . "\">" . $report[$i] . "</a></h5>
                                        <h5 id=\"testsRanResult$day[0].$i\"class=\"testsRan\"></h5>
                                        <h5 id=\"percentResults$day[0].$i\" class=\"percentPassed\"></h5>
                                        <h5 id=\"result$day[0].$i\" class=\"reportResults\"></h5>
                                        <h5 id=\"durationResult$day[0].$i\"class=\"duration\"></h5>


                                    </div>";

                            }
                        }

                    }

        echo "


                    </div>
                </section>
            </div>
        </section>

            ";

    }   

Answer 1

Suggesting you move out the styles from your logic. If your styles are targeted specifically for a certain set of elements, you might want to use class names instead of just the element names. That way, your CSS can just exist regardless if the elements it is targeting are present.

Also, <style> tags are ideally placed in<head> before anything on the page shows up. One reason is to avoid FOUC (flash of unstyled content), where the browser renders an unstyled version of the page, only styling it when the browser meets the styles. Other browsers don't render until all CSS-related elements in the markup are found.

I recommend you read up on BEM. It's a CSS naming convention which allows you to write sane selectors in a consistent and predictable manner that easily maps to elements.

"h" tags are for headers. Do not use it just because it has a predefined size and style. Use the appropriate elements, and CSS to style them.

For your PHP, I suggest using the heredoc syntax. One advantage of the heredoc syntax is that you get interpolation and you avoid escaping " and '. Also, split off your operations into functions. That way, you divide the task into small pieces of code which you can reuse. With these, you can easily use array functions like array_map instead of loops.

function getList($items = []){
  $items = array_map(function($item){
    return <<<HTML
      <li>{$item}</li>
HTML;
  }, $items);

  return '<ul>' . implode($items) . '</ul>';
}

$list = getList([1,2,3]);