无法读取其他情况

I have a code that is used to display output of ajax using boostrap and codeigniter. The function of my program is when I press button upload and select files, it will upload automatically. If the file is image, it will show the image just uploaded, and if the file just uploaded is't image, it will show the font awesome. The code have if else condition between apostrophe. This is my code

$output .='
                    <div>
                      <ul class="detail-attachments clearfix">
                        <?php
                          foreach ($list_file as $file) { ?>
                            <li id="datas">
                              <?php
                                if ($file["tipe"]=="image/jpeg" or $file["tipe"]=="image/bmp" or $file["tipe"]=="image/png") { ?>
                                  <span class="detail-attachment-icon has-img">
                                    <a href="'.base_url().'assets/files/file_materi/'.$data["file_name"].'" target="_blank">
                                      <img src="'.base_url().'assets/files/file_materi/'.$data["file_name"].'">
                                    </a>
                                  </span>
                                <?php }
                                else { ?>
                                  <span class="detail-attachment-icon"><i class="fa fa-file-o"></i></span>
                                  <div id="nama_filenya">

                                    <?php 
                                      echo $data["file_name"];
                                      ?>
                                  </div>
                                <?php }
                              ?>
                              <div class="detail-attachment-info">
                                <button type="button" class="btn btn-danger btn-block btn-sm" data-toggle="modal" data-target="#konfirmasi_hapus<?php echo $data["id_file_materi"]; ?>">Hapus</button>
                                </a>
                              </div>
                            </li>

                          <?php }
                        ?>
                      </ul>
                    </div>
                ';

But when I run my code and try to upload files, the if else function isn't run. The result when I have selected files, the files is authomatically uploaded, but the display is the the file, font awesome icon, and the button. when I see the inspect element, the code php function become comment like below

<div>
                    <ul class="detail-attachments clearfix">
                      <!--?php
                        foreach ($list_file as $file) { ?-->
                          <li id="datas">
                            <!--?php
                              if ($file["tipe"]=="image/jpeg" or $file["tipe"]=="image/bmp" or $file["tipe"]=="image/png") { ?-->
                                <span class="detail-attachment-icon has-img">
                                  <a href="http://localhost/ci_sc/assets/files/file_materi/camila-cabello-wonderland7.jpg" target="_blank">
                                    <img src="http://localhost/ci_sc/assets/files/file_materi/camila-cabello-wonderland7.jpg">
                                  </a>
                                </span>
                              <!--?php }
                              else { ?-->
                                <span class="detail-attachment-icon"><i class="fa fa-file-o"></i></span>
                                <div id="nama_filenya">
                                  <!--?php 
                                    echo $data["file_name"];
                                    ?-->
                                </div>
                              <!--?php }
                            ?-->
                            <div class="detail-attachment-info">
                              <button type="button" class="btn btn-danger btn-block btn-sm" data-toggle="modal" data-target="#konfirmasi_hapus<?php echo $data[" id_file_materi"];="" ?="">"&gt;Hapus</button>

                            </div>
                          </li>

                        <!--?php }
                      ?-->
                      <!-- <li id="upload_files"></li> -->
                    </ul>
                  </div>

Can someone help me to solve my problem so that the php function can be read by the system.

Thank you in advance

You can use an output buffer to tidy-up your codes.

<?php
ob_start();
?>
<div>
  <ul class="detail-attachments clearfix">
    <?php
      foreach ($list_file as $file) { ?>
      <li id="datas">
        <?php
            if ($file["tipe"]=="image/jpeg" or $file["tipe"]=="image/bmp" or $file["tipe"]=="image/png") { ?>
          <span class="detail-attachment-icon has-img">
                <a href="'.base_url().'assets/files/file_materi/'.$data["file_name"].'" target="_blank">
                  <img src="'.base_url().'assets/files/file_materi/'.$data["file_name"].'">
                </a>
              </span>
          <?php }
            else { ?>
          <span class="detail-attachment-icon"><i class="fa fa-file-o"></i></span>
          <div id="nama_filenya">

            <?php 
                  echo $data["file_name"];
                  ?>
          </div>
          <?php }
          ?>
          <div class="detail-attachment-info">
            <button type="button" class="btn btn-danger btn-block btn-sm" data-toggle="modal" data-target="#konfirmasi_hapus<?php echo $data[" id_file_materi "]; ?>">Hapus</button>
            </a>
          </div>
      </li>

      <?php }
    ?>
  </ul>
</div>
<?php
$output = ob_get_clean();
?>

</div>

You have a couple of options:

• You can concatenate your string using ".=" operator everytime you add an HTML snippet
• You can use output buffering which will simply take everything you output and put it in a variable
• I won't even talk about e̵͍̘͝v̴̩͙̆̕a̷̢̋l̶̲̅(̵̭̍)̶̤̱̗̔̕

I personnaly find the output buffering cleaner. Here is an example with your code:

<?php
ob_start(); ?>
    <div>
        <ul class="detail-attachments clearfix">
            <?php
            foreach ($list_file as $file) { ?>
                <li id="datas">
                    <?php
                    if ($file["tipe"]=="image/jpeg" or $file["tipe"]=="image/bmp" or $file["tipe"]=="image/png") { ?>
                        <span class="detail-attachment-icon has-img">
                            <a href="<?php echo base_url() ?>assets/files/file_materi/<?php echo $data["file_name"] ?>" target="_blank">
                                <img src="<?php echo base_url() ?>assets/files/file_materi/<?php echo $data["file_name"] ?>">
                            </a>
                        </span>
                    <?php }
                    else { ?>
                        <span class="detail-attachment-icon"><i class="fa fa-file-o"></i></span>
                        <div id="nama_filenya">

                            <?php
                            echo $data["file_name"];
                            ?>
                        </div>
                    <?php }
                    ?>
                    <div class="detail-attachment-info">
                        <button type="button" class="btn btn-danger btn-block btn-sm" data-toggle="modal" data-target="#konfirmasi_hapus<?php echo $data["id_file_materi"]; ?>">Hapus</button>
                        </a>
                    </div>
                </li>

            <?php }
            ?>
        </ul>
    </div>
<?php
$output = ob_get_clean();

Otherwise you would have to do something like:

<?php
$output =
    '<div>
        <ul class="detail-attachments clearfix">';
foreach ($list_file as $file) {
    $output .= '<li id="datas">';
    if ($file["tipe"]=="image/jpeg" or $file["tipe"]=="image/bmp" or $file["tipe"]=="image/png") {
        $output .= '<span class="detail-attachment-icon has-img">
            <a href="'.base_url().'assets/files/file_materi/'.$data["file_name"].'" target="_blank">
                                <img src="'.base_url().'assets/files/file_materi/'.$data["file_name"].'">
                            </a>
                        </span>';
    }
    else {
        $output .= '<span class="detail-attachment-icon"><i class="fa fa-file-o"></i></span>
                        <div id="nama_filenya">
                            '.$data["file_name"].'
                        </div>';
    }

    $output .= '<div class="detail-attachment-info">
                        <button type="button" class="btn btn-danger btn-block btn-sm" data-toggle="modal" data-target="#konfirmasi_hapus'.$data["id_file_materi"].'">Hapus</button>
                        </a>
                    </div>
                </li>';

}
$output .= '
        </ul>
    </div>';