Блог

Я знаю, что повторять html код — плохая практика, но я новичок, и я не нашел более подходящего способа. Также я могу сортировать свои товары, просто позволяя пользователю изменять sql запрос, что довольно просто (и да, это также делает меня уязвимым sql injections ), но я был бы открыт для совершенно новых предложений или руководств, которые вы знаете. Моя цель — показать все 43 товара в моей базе данных на моем веб-сайте и позволить пользователю сортировать их. Я бы также принял участие, javascript если это необходимо.

редактировать — я использую локальный xampp server .

 <? php
    foreach($json as $row) {
        echo '<div class="col-lg-4">
                < div class="trainer-item" >
                    <div class="image-thumb" >
                        <img src = "assets/images/product-6-720x480.jpg" alt = "" >
                    </div >
                    <div class="down-content" >
                        <span >
                            <sup > $ </sup > '($row[' ProductPrice ']); '
                        </span >

                        <h4 > '.($row[' ProductName ']).' </h4 >
    
                        <p > Product description</p >
    
                        <ul class="social-icons" >
                            <li ><a href = "product-details.html" >  Order </a ></li >
                        </ul >
                    </div >
                </div >
            </div > ';
  

Вы можете написать REST api для возврата элементов JSON из базы данных и вызывать его в пользовательском интерфейсе асинхронно:

 fetch(`http://RestApiUrl`)
        .then(function (response) {
            const json = response.json();
            for (row in json) {
                var div = document.createElement("div");
                div.setAttribute("class", "col-lg-4");

                var trainerItem = document.createElement("div");
                trainerItem.setAttribute("class", "trainer-item");

                var imageThumb = document.createElement("div");
                imageThumb.setAttribute("class", "image-thumb");

                var img = document.createElement("img");
                img.setAttribute("src", "assets/images/product-6-720x480.jpg");
                imageThumb.appendChild(img);

                var downContent = document.createElement("div");
                downContent.setAttribute("class", "down-content");

                var price = document.createElement("span");
                price.innerHTML  = `<sup>$</sup>${row.ProductPrice}`

                var name = document.createElement("h4");
                name.innerHTML  = row.ProductName
                downContent.appendChild(price);
                downContent.appendChild(name);

                trainerItem.appendChild(imageThumb);
                trainerItem.appendChild(downContent);

                div.appendChild(trainerItem);
            }
            /*Set the items to main div*/
            document.getElementById('main').innerHTML  = div;
        })  

 <div id="main" class="row"></div>