HTML And PHP echo

Question

Today i finished creating my markup, so i wanted to move it in the php. So i have navigator.

<nav id="cd-vertical-nav">
<ul>
    <li>
        <a href="#destinations" data-number="1" class="">
            <span class="cd-dot"></span>
            <span class="cd-label">Choose Destinations</span>
        </a>
    </li>
    <li>
        <a href="#activities" data-number="2" class="">
            <span class="cd-dot"></span>
            <span class="cd-label">Activities</span>
        </a>
    </li>
    <li>
        <a href="#accommodation" data-number="3" class="">
            <span class="cd-dot"></span>
            <span class="cd-label">Accommodation</span>
        </a>
    </li>
    <li>
        <a href="#transportation" data-number="4" class="is-selected">
            <span class="cd-dot"></span>
            <span class="cd-label">Transportation</span>
        </a>
    </li>
    <li>
        <a href="#maspindzei" data-number="5" class="">
            <span class="cd-dot"></span>
            <span class="cd-label">Choose your Host</span>
        </a>
    </li>
    <li>
        <a href="#contactinfo" data-number="6" class="">
            <span class="cd-dot"></span>
            <span class="cd-label">Contact Information</span>
        </a>
    </li>
</ul>

So i need to make new function which will work like this.

CreateNewSection($secid);

I tried this code for this.

function CreateNewSection($secid)
{
    switch($secid)
    {
        case 1:
        {
            echo '<nav id="cd-vertical-nav">
        <ul>
            <li>
                <a href="#destinations" data-number="1" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Choose Destinations</span>
                </a>
            </li></ul></nav>';  
        }
        case 2:
        {
            echo '<nav id="cd-vertical-nav"><li><a href="#activities" data-number="2" class=""><span class="cd-dot"></span><span class="cd-label">Activities</span></a></li></li></ul></nav>';
        }
    }   
}

Problem is that, when i call ID 1, its still calling id 2 too. Its my first time, when i'm converting markup to functions like this.

Answer 1

My strong recommendation is to abandon the idea of a verbose switch-case block. There is a cleaner way...

Much more DRY and easier to manage will be to store the dynamic portions of your html in an array, then simply inject those values into the otherwise static html. You will thank yourself later for going this route.

function CreateNewSection($secid,$class=''){
    $secs=[
        1=>['href'=>'#destinations','label'=>'Choose Destinations'],
        2=>['href'=>'#activities','label'=>'Activities'],
        3=>['href'=>'#accommodation','label'=>'Accommodation'],
        4=>['href'=>'#transportation','label'=>'Transportation'],
        5=>['href'=>'#maspindzei','label'=>'Choose your Host'],
        6=>['href'=>'#contactinfo','label'=>'Contact Information']
    ];

    if(!isset($secs[$secid])){
        // echo some default behavior or error message
    }else{
        $sec=$secs[$secid]; // merely to shorten the variable
        echo "<li>";
            echo "<a href=\"{$sec['href']}\" data-number=\"{$secid}\" class=\"{$class}\">";
                echo "<span class=\"cd-dot\"></span>";
                echo "<span class=\"cd-label\">{$sec['label']}</span>";
            echo "</a>";
        echo "</li>";
    }
}
echo "<nav id=\"cd-vertical-nav\">";
    echo "<ul>";
        $selected=4;
        for($x=1; $x<7; ++$x){
            CreateNewSection($x,($x==$selected?'is-selected':''));
        }
    echo "</ul>";
echo "</nav>";

*note I have {} curly-bracketed all variables in the echo (even though the string variables don't require it) so that the variables stand out in your text editor (or they could if your editor is setup to do so).

Answer 2

A switch statement is a form of looping, and in order to perform the loop successfully, you need to add a break statement at the end of each case statement block. The syntax looks like this

switch($param){

    case $value1: // executes if $param = $value1

        //execute your code

    break; //the break statement forces the processing out of the loop after execution

    case $value2: // executes if $param = $value2

        //execute your code

    break; //the break statement forces the processing out of the loop after execution

    default: 
        //code here executes only if the case 1 and 2 is not matched

}

With this in mind, your code should now look like this

function CreateNewSection($secid)
{
switch($secid)
{
    case 1:
        echo '<nav id="cd-vertical-nav">
        <ul>
            <li>
                 <a href="#destinations" data-number="1" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Choose Destinations</span>
                </a>
            </li></ul></nav>';
    break;

    case 2:

        echo '<nav id="cd-vertical-nav"><li><a href="#activities" data-number="2" class=""><span class="cd-dot"></span><span class="cd-label">Activities</span></a></li></li></ul></nav>';
    break;
}   

}

Hope this helps you out! If you have any issue, kindly comment and lets sort it out.

Answer 3

Here is how switch-case is supposed to be, every case has a break and then there is default at the end:

switch($secid)
{
    case 1:
    // code here....
    break;

    case 2:
    // code here....
    break;

    default:
    // code here....
}  

So your code shall be updated as below:

function CreateNewSection($secid)
{
    switch($secid)
    {
        case 1:
        echo '<nav id="cd-vertical-nav">
<ul>
<li>
<a href="#destinations" data-number="1" class="">
<span class="cd-dot"></span>
<span class="cd-label">Choose Destinations</span>
</a>
</li></ul></nav>';  
        break;

        case 2:
        echo '<nav id="cd-vertical-nav"><li><a href="#activities" data-number="2" class=""><span class="cd-dot"></span><span class="cd-label">Activities</span></a></li></li></ul></nav>';
        break;
    }   
}

Answer 4

The break is missing at the end of the switch case which is causing it to fall through.

function CreateNewSection($secid)
{
    switch($secid)
    {
        case 1:
            echo '<nav id="cd-vertical-nav">
        <ul>
            <li>
                <a href="#destinations" data-number="1" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Choose Destinations</span>
                </a>
            </li></ul></nav>';  
            break;
        case 2:
            echo '<nav id="cd-vertical-nav"><li><a href="#activities" data-number="2" class=""><span class="cd-dot"></span><span class="cd-label">Activities</span></a></li></li></ul></nav>';
            break;
    }   
}