Inbeaded HTML 코드로 PHP를 통해 JSON 게시

Question

html과 CSS로 스타일을 추가하는 동안 php로 json을 구현하려고 시도했습니다. 나는 $ output = "< 'html code here'>"를 사용하여 내 스타일과 모두를 표시하려고했습니다. 하지만 json을로드하는 동안 스크롤 할 수 있도록 json에서 타일을 업데이트 할 수 있도록 필요합니다. 이것은 PHP에서 처음으로 시도한 것입니다.

그리고 HTML에 대한 내 codepen :

          
  
 
   
 
    
body { 
 
     background-color: #2c3e50; 
 
    } 
 
    .row { 
 
     width: 100%; 
 
     text-align: center; 
 
     display: inline-block; 
 
    } 
 
    .tile { 
 
     margin: 30px 30px; 
 
     background-color: #ecf0f1; 
 
     width: 25vw; 
 
     height: 50vh; 
 
     display: inline-block; 
 
    } 
 
    .tile .price { 
 
     background-color: #27ae60; 
 
     width: 90px; 
 
     height: 40px; 
 
     float: right; 
 
    } 
 
    .tile .price h4 { 
 
     color: #ecf0f1; 
 
     position: relative; 
 
     font-weight: 600; 
 
     text-align: center; 
 
    } 
 
    .tile .image img { 
 
     height: 30vh; 
 
     width: auto; 
 
     display: block; 
 
     margin-top: 10vh; 
 
     align-content: center 
 
    } 
 
    .tile .title h6 { 
 
     color: #95a5a6; 
 
     text-align: left; 
 
     display: block; 
 
     padding-left: 10px; 
 
     font-size: 15px; 
 
    } 
 
    .tile .brand h6 { 
 
     color: #95a5a6; 
 
     text-align: left; 
 
     display: block; 
 
     padding-left: 10px; 
 
     font-size: 15px; 
 
    } 
 
    .tile .social-footer { 
 
     display: block; 
 
     height: 35px; 
 
     width: auto; 
 
     position: relative; 
 
     margin-top: -4px; 
 
     background-color: #ecf0f1; 
 
    } 
 
    .tile .social-footer .trending h4 { 
 
     color: #95a5a6; 
 
     padding-top: -5px; 
 
     padding-left: 10px; 
 
     font-weight: 600; 
 
     float: left; 
 
    } 
 
    .tile .social-footer .likes span { 
 
     color: #7f8c8d; 
 
     display: block; 
 
     font-size: 20px; 
 
     position: relative; 
 
     text-align: right; 
 
     padding-top: 7px; 
 
     padding-right: 10px; 
 
    } 
 
    .center-block { 
 
     display: block; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 
    /*BOOTSTRAP CENTERING*/ 
 

 
    .container-fluid { 
 
     height: 100%; 
 
     display: table; 
 
     width: 100%; 
 
     padding: 0; 
 
    } 
 
    @media (max-width: 1000px) { 
 
     .tile { 
 
     margin: 30px 30px; 
 
     background-color: #ecf0f1; 
 
     width: 40vw; 
 
     height: 80vh; 
 
     display: inline-block; 
 
     } 
 
     .tile .image img { 
 
     height: 50vh; 
 
     width: auto; 
 
     display: block; 
 
     margin-top: 15vh; 
 
     align-content: center 
 
     } 
 
     .tile .social-footer { 
 
     display: block; 
 
     height: 50px; 
 
     width: auto; 
 
     position: relative; 
 
     margin-top: 32px; 
 
     background-color: #ecf0f1; 
 
     } 
 
     .tile .social-footer .trending h4 { 
 
     color: #95a5a6; 
 
     padding-top: 7px; 
 
     padding-left: 10px; 
 
     font-weight: 600; 
 
     float: left; 
 
     } 
 
     .tile .social-footer .likes span { 
 
     color: #7f8c8d; 
 
     display: block; 
 
     font-size: 25px; 
 
     position: relative; 
 
     text-align: right; 
 
     padding-top: 15px; 
 
     padding-right: 30px; 
 
     } 
 
    } 
 
    @media (max-width: 900px) { 
 
     .row { 
 
     width: 100%; 
 
     text-align: center; 
 
     } 
 
     .tile { 
 
     margin: 30px 30px; 
 
     background-color: #ecf0f1; 
 
     width: 90vw; 
 
     height: 90vh; 
 
     display: inline-block; 
 
     } 
 
     .tile .image img { 
 
     height: 60vh; 
 
     width: auto; 
 
     display: block; 
 
     margin-top: 15vh; 
 
     align-content: center 
 
     } 
 
     .tile .social-footer { 
 
     display: block; 
 
     height: 50px; 
 
     width: auto; 
 
     position: relative; 
 
     margin-top: 34px; 
 
     background-color: #ecf0f1; 
 
     } 
 
     .tile .social-footer .trending h4 { 
 
     color: #95a5a6; 
 
     padding-top: 7px; 
 
     padding-left: 10px; 
 
     font-weight: 600; 
 
     float: left; 
 
     } 
 
     .tile .social-footer .likes span { 
 
     color: #7f8c8d; 
 
     display: block; 
 
     font-size: 25px; 
 
     position: relative; 
 
     text-align: right; 
 
     padding-top: 15px; 
 
     padding-right: 30px; 
 
     } 
 
    }
 
    
<container class="container-fluid"> 
 
     <!--START OF ROW--> 
 
     <div class="row"> 
 

 
     <!--Product Start--> 
 
     <div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
      </div> 
 
      <div class="image"> 
 
      <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
      </div> 
 
      <div class="title"> 
 
      <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
      </div> 
 
      <div class="brand"> 
 
      <h6>By R+Co</h6> 
 
      </div> 
 
      <div class="col-4-4"> 
 
      <div class="social-footer"> 
 
       <div class="col-4-4 trending"> 
 
       <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
       </div> 
 
       <div class="image"> 
 
       <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
       </div> 
 
       <div class="title"> 
 
       <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
       </div> 
 
       <div class="brand"> 
 
       <h6>By R+Co</h6> 
 
       </div> 
 
       <div class="col-4-4"> 
 
       <div class="social-footer"> 
 
        <div class="col-4-4 trending"> 
 
        <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
        </div> 
 
        <div class="image"> 
 
        <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
        </div> 
 
        <div class="title"> 
 
        <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
        </div> 
 
        <div class="brand"> 
 
        <h6>By R+Co</h6> 
 
        </div> 
 
        <div class="col-4-4"> 
 
        <div class="social-footer"> 
 
         <div class="col-4-4 trending"> 
 
         </span> 
 
         <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
     <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
         </div> 
 
         <div class="image"> 
 
         <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
         </div> 
 
         <div class="title"> 
 
         <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
         </div> 
 
         <div class="brand"> 
 
         <h6>By R+Co</h6> 
 
         </div> 
 
         <div class="col-4-4"> 
 
         <div class="social-footer"> 
 
          <div class="col-4-4 trending"> 
 
          <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
          </div> 
 
          <div class="image"> 
 
          <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
          </div> 
 
          <div class="title"> 
 
          <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
          </div> 
 
          <div class="brand"> 
 
          <h6>By R+Co</h6> 
 
          </div> 
 
          <div class="col-4-4"> 
 
          <div class="social-footer"> 
 
           <div class="col-4-4 trending"> 
 
           <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
           </div> 
 
           <div class="image"> 
 
           <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
           </div> 
 
           <div class="title"> 
 
           <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
           </div> 
 
           <div class="brand"> 
 
           <h6>By R+Co</h6> 
 
           </div> 
 
           <div class="col-4-4"> 
 
           <div class="social-footer"> 
 
            <div class="col-4-4 trending"> 
 
            </span> 
 
            <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
      <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
            </div> 
 
            <div class="image"> 
 
            <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
            </div> 
 
            <div class="title"> 
 
            <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
            </div> 
 
            <div class="brand"> 
 
            <h6>By R+Co</h6> 
 
            </div> 
 
            <div class="col-4-4"> 
 
            <div class="social-footer"> 
 
             <div class="col-4-4 trending"> 
 
             <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
             </div> 
 
             <div class="image"> 
 
             <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
             </div> 
 
             <div class="title"> 
 
             <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
             </div> 
 
             <div class="brand"> 
 
             <h6>By R+Co</h6> 
 
             </div> 
 
             <div class="col-4-4"> 
 
             <div class="social-footer"> 
 
              <div class="col-4-4 trending"> 
 
              <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
              </div> 
 
              <div class="image"> 
 
              <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
              </div> 
 
              <div class="title"> 
 
              <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
              </div> 
 
              <div class="brand"> 
 
              <h6>By R+Co</h6> 
 
              </div> 
 
              <div class="col-4-4"> 
 
              <div class="social-footer"> 
 
               <div class="col-4-4 trending"> 
 
               </span> 
 
               <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
     <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
               </div> 
 
               <div class="image"> 
 
               <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
               </div> 
 
               <div class="title"> 
 
               <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
               </div> 
 
               <div class="brand"> 
 
               <h6>By R+Co</h6> 
 
               </div> 
 
               <div class="col-4-4"> 
 
               <div class="social-footer"> 
 
                <div class="col-4-4 trending"> 
 
                <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
                </div> 
 
                <div class="image"> 
 
                <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
                </div> 
 
                <div class="title"> 
 
                <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
                </div> 
 
                <div class="brand"> 
 
                <h6>By R+Co</h6> 
 
                </div> 
 
                <div class="col-4-4"> 
 
                <div class="social-footer"> 
 
                 <div class="col-4-4 trending"> 
 
                 <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"><span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
        <!--Product Start--><div class="col-4-4 tile"> 
 
      <div class="price"> 
 
      <h4>32.99</h4> 
 
                 </div> 
 
                 <div class="image"> 
 
                 <img class="center-block" src="https://res.cloudinary.com/hcu8jcnmr/image/upload/c_fit,w_600,h_600/ichx6rlctigutk8qd0ky.jpg"> 
 
                 </div> 
 
                 <div class="title"> 
 
                 <h6>Rockaway Salt Spray, 4.2 oz</h6> 
 
                 </div> 
 
                 <div class="brand"> 
 
                 <h6>By R+Co</h6> 
 
                 </div> 
 
                 <div class="col-4-4"> 
 
                 <div class="social-footer"> 
 
                  <div class="col-4-4 trending"> 
 
                  </span> 
 
                  <h4>Trending<h4> 
 
     </div> 
 
      <div class="col-4-4 likes"> 
 
       <span class="fa fa-heart"></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div><!--Product END--> 
 
    </div><!--END OF ROW--> 
 

 

 

 

 
      </container
 
   
 
  
 
 

 

PHP :

<?php 
$jsondata = file_get_contents("data.json"); 
$json = json_decode($jsondata,true); 
$output = "<ul>"; 
foreach($json['curated'] as $curated){ 
$output .= "<h4>".$curated['category']."</h4>"; 
$output .= "<li>".$curated['title']."</li>"; 
$output .= "<h4>".$curated['price']."</h4>"; 
$output .= "<img class='center-block' src=".$curated['image'].">"; //posibly fix 
$output .= "<h6>".$curated['brand']."</h6>"; 
$output .= "<h4>".$curated['trending']."</h4>"; 

} 
$output .= "</ul>"; 
echo $output; 

?> 

Answer 1

내가 그것을 알아 냈어. 나는이 튜토리얼을 1 시간 반에 걸쳐 인터넷 검색을 기본으로 수행했다. http://www.bewebdeveloper.com/tutorial-about-how-to-parse-json-file-with-php