Klasa PHP do generowania HTML?

Question

Ktoś wie o klasach napisanych dla php, które mogą nieco wyczyścić twój kod?

Coś,

$htGen = new HTMLGenerator(); 
$htGen->newDOM('div', 'here is what goes in the div', 'optionalID', 'optionalClass'); 

Albo że po prostu nie brzmi zbędny?

Kończę się niektórymi złożonymi wyglądającymi miszmasztami html i php, które czasami mogę nieco uprościć, np. Mój najnowszy bit cms;

foreach($details as $detail){ 

    $d = unserialize($detail); 

    if($ad){ 
     print_r($d); // <-- VIEW DETAIL OBJECT IN WHOLE. 
    }else{ 
    if($d->get_info('orphan')){ 
     echo '<li class="classRow orphan">' . "\n"; 
     echo '<div class="orphan" style="display:none">orphan</div>' . "\n"; 
    }else{ 
     echo '<li class="classRow">' . "\n"; 
     echo '<div class="orphan" style="display:none"></div>' . "\n"; 
    } 

     echo '<div class="classNumbers" id="' . $d->get_info('class ID') . '" style="display:none"></div>' . "\n"; 
     echo '<div class="rowBG" style="overflow:hidden;width:100%">'; 
      echo '<div class="startTime"></div>' . "\n"; 
      echo '<div class="details"><span class="classes">' . $d->get_info('class number') . '</span> - <input class="detailInput" type="text" value="' . $d->get_info('class description') . '"/><div class="editButton"><a class="editExpand">options(+)</a></div></div>' . "\n"; 
      echo '<div class="interval">'; 
      echo '<input class="intervalInput" type="text" value="' . $d->get_info('interval') . '" maxlength="5"/>'; 
      echo '</div>' . "\n"; 
      echo '<div class="numRiders"><input class="numRidersInput" type="text" value="' . $d->get_info('num riders') . '"/></div>' . "\n"; 
     echo '</div>'; 

     echo '<div class="classOptions">' . "\n"; 
      echo '<div class="selectRingMove">Move to Ring:<select id="ringSwap"><option>Select A Ring</option>' . get_ring_options() . '</select></div>' . "\n"; 
      if($d->get_info('online sign up') != 'false'){ 
       echo '<div class="signUpContainer">Sign-Up<input type="checkbox" class="signUp" checked/></div>' . "\n"; 
      }else{ 
       echo '<div class="signUpContainer">Sign-Up<input type="checkbox" class="signUp"/></div>' . "\n"; 
      } 
      if($d->get_info('water and drag')){ 
       echo '<div class="wdBoxContainer"><select id="wdDescrip"><option>WATER AND DRAG</option><option>COURSE CHANGE & WALK</option><option>OTHER</option></select><input type="checkbox" class="wdBox" checked/><input type="text" value="' . $d->get_info('water and drag') . '" maxlength="2" class="wdInput"> min</div>' . "\n"; 
      }else{ 
       echo '<div class="wdBoxContainer"><select id="wdDescrip"><option>WATER AND DRAG</option><option>COURSE CHANGE & WALK</option><option>OTHER</option></select><input type="checkbox" class="wdBox"/><input type="text" value="20" maxlength="2" class="wdInput"> min</div>' . "\n"; 
      } 
      if($d->get_info('ghost riders')){ 
       echo '<div class="ghostRidersContainer">Ghost Riders<input type="checkbox" checked class="ghostBox"><input type="text" maxlength="2" class="ghostRiderInput" value="' . $d->get_info('ghost riders') . '"></div>' . "\n"; 
      }else{ 
       echo '<div class="ghostRidersContainer">Ghost Riders<input type="checkbox" class="ghostBox"><input type="text" maxlength="2" class="ghostRiderInput"></div>' . "\n"; 
      } 

     echo '</div>' . "\n"; 

    echo '</li>' . "\n"; 

    if($d->get_info('water and drag')){ 
     echo '<li class="waterAndDragRow" style="display:block;"><span class="wdStartTime">08:33am</span> - <span class="wdEndTime">08:34am</span> <input type="text" class="wdDescription" value="' . $d->get_info('water and drag description') . '"></li>'; 
    } 
    } 
} 

Lub, jeśli znasz czystszego sposób pisać długich bloków przemieszanych Vars PHP i HTML ... (nie wielkim fanem EOF >>>)

z góry dzięki.

Answer 1

Chyba można to zrobić za pomocą http://www.php.net/manual/en/class.domdocument.php. Ale to naprawdę nie jest dobry sposób na zrobienie tego.

Zgadzam się, że Twój kod przykładowy kod nie jest bardzo jasne, można rozważyć coś takiego:

<ul> 
<?php foreach ($items as $item): ?> 
    <li> 
     <?=$item['something']?> 
     <?php if ($item['foo'] == 'bar'): ?> 
     <ul> 
      <li>bar</li> 
     </ul> 
     <?php else: ?> 
     <ul> 
      <li>foo</li> 
     </ul> 
     <?php endif; ?> 
    </li> 
<?php endforeach; ?> 
<ul> 

to dużo lepiej imho, używam go tak jak w moich poglądów.

Btw, powinieneś zweryfikować swoje wyjście html. Na przykład element-div nie jest dozwolony w elemencie li.

edit: Oczywiście, następujący kod:

<?php if ($item['foo'] == 'bar'): ?> 
<ul> 
    <li>bar</li> 
</ul> 
<?php else: ?> 
<ul> 
    <li>foo</li> 
</ul> 
<?php endif; ?> 

może być zastąpiony przez:

<ul> 
    <li><?=($item['foo'] == 'bar' ? 'bar' : 'foo')?></li> 
</ul> 

Answer 2

będę prawdopodobnie uzyskać downvoted polecając krótkich znaczników, ale tutaj jest to, co robię. Umieściłem wszystkie znaczniki <? i ?> w kolumnie 1, aby kod brzmiał jak połączenie PHP i HTML. Zadaniem nie są oświadczenia echo.

foreach ($details as $detail) { 
     $d = unserialize($detail); 

     if ($ad) { 
      print_r($d); // <-- VIEW DETAIL OBJECT IN WHOLE. 
     } 
     else { 
      if ($d->get_info('orphan')) { 
?>    <li class="classRow orphan"> 
        <div class="orphan" style="display:none">orphan</div> 
<?   } 
      else { 
?>    <li class="classRow"> 
        <div class="orphan" style="display:none"></div> 
<?   } 

?>   <div class="classNumbers" id="<?= $d->get_info('class ID') ?>" 
       style="display:none"></div> 
      <div class="rowBG" style="overflow:hidden;width:100%"> 
       <div class="startTime"></div> 
       <div class="details"> 
       <span class="classes"><?= $d->get_info('class number') ?></span> - 
       <input class="detailInput" type="text" value="<?= $d->get_info('class description') ?>"/> 
       <div class="editButton"> 
        <a class="editExpand">options(+)</a> 
       </div> 
       </div> 
       <div class="interval"> 
       <input class="intervalInput" type="text" value="<?= $d->get_info('interval') ?>" maxlength="5"/> 
       </div> 
       <div class="numRiders"> 
       <input class="numRidersInput" type="text" value="<?= $d->get_info('num riders') ?>"/> 
       </div> 
      </div> 

      <div class="classOptions"> 
       <div class="selectRingMove"> 
       Move to Ring: 
       <select id="ringSwap"> 
        <option>Select A Ring</option> 
        <?= get_ring_options() ?> 
       </select> 
       </div> 

<?   if ($d->get_info('online sign up') != 'false') { 
?>    <div class="signUpContainer"> 
        Sign-Up 
        <input type="checkbox" class="signUp" checked/> 
        </div> 
<?   } 
       else { 
?>    <div class="signUpContainer"> 
        Sign-Up 
        <input type="checkbox" class="signUp"/> 
        </div> 
<?   } 

       if ($d->get_info('water and drag')) { 
?>    <div class="wdBoxContainer"> 
        <select id="wdDescrip"> 
         <option>WATER AND DRAG</option> 
         <option>COURSE CHANGE &amp; WALK</option> 
         <option>OTHER</option> 
        </select> 

        <input type="checkbox" class="wdBox" checked/> 
        <input type="text" value="<?= $d->get_info('water and drag') ?>" maxlength="2" class="wdInput"> min 
        </div> 
<?   } 
       else { 
?>    <div class="wdBoxContainer"> 
        <select id="wdDescrip"> 
         <option>WATER AND DRAG</option> 
         <option>COURSE CHANGE &amp; WALK</option> 
         <option>OTHER</option> 
        </select> 

        <input type="checkbox" class="wdBox"/> 
        <input type="text" value="20" maxlength="2" class="wdInput"> min 
        </div> 
<?   } 

       if ($d->get_info('ghost riders')) { 
?>    <div class="ghostRidersContainer"> 
        Ghost Riders 
        <input type="checkbox" checked class="ghostBox"> 
        <input type="text" maxlength="2" class="ghostRiderInput" value="<?= $d->get_info('ghost riders') ?>"> 
        </div> 
<?   } 
       else { 
?>    <div class="ghostRidersContainer"> 
        Ghost Riders 
        <input type="checkbox" class="ghostBox"> 
        <input type="text" maxlength="2" class="ghostRiderInput"> 
        </div> 
<?   } 
?>   </div> 
      </li> 

<?   if ($d->get_info('water and drag')) { 
?>    <li class="waterAndDragRow" style="display:block;"> 
        <span class="wdStartTime">08:33am</span> - 
        <span class="wdEndTime">08:34am</span> 
        <input type="text" class="wdDescription" value="<?= $d->get_info('water and drag description') ?>"> 
       </li> 
<?   } 
     } 
    } 

Answer 3

dlaczego nie tworzyć własnych klauzul? lub przynajmniej niektóre funkcje ... i widziałem, że używasz dużo IF, można je czyścić przy użyciu vairables jak kiedy masz

if($d->get_info('ghost riders')){ 
      echo '<div class="ghostRidersContainer">Ghost Riders<input type="checkbox" checked class="ghostBox"><input type="text" maxlength="2" class="ghostRiderInput" value="' . $d->get_info('ghost riders') . '"></div>' . "\n"; 
     }else{ 
      echo '<div class="ghostRidersContainer">Ghost Riders<input type="checkbox" class="ghostBox"><input type="text" maxlength="2" class="ghostRiderInput"></div>' . "\n"; 
     } 

można napisać:

$check = ($d->get_info('ghost riders'))?"checked":""; 
echo '<div class="ghostRidersContainer">Ghost Riders<input type="checkbox" '.$check.' class="ghostBox"><input type="text" maxlength="2" class="ghostRiderInput" value="' . $d->get_info('ghost riders') . '"></div>' . "\n"; 

będzie wyglądać czystsze :) Stworzyłem klasę Form, która pomaga mi, gdy mam tworzyć formularze, a kod jest bardziej czytelny.

Answer 4

Główną ideą generowania kodu HTML jest utrzymanie kodu HTML w niezmienionej postaci.
Po prostu podziel swój skrypt na 2 części: przygotuj część danych i wyświetl część danych. Ta ostatnia powinna zawierać głównie HTML z pewnymi strukturami kontroli PHP. Oczywiście powinno być mniej kodu PHP, jak to możliwe. Przenieś cały niepotrzebny kod PHP do pierwszej części.

Podsumowując wszystkie powyższe:
nic nie powinno się odserializować w tablicy $ details.Przygotuj swoje dane już teraz i przygotuj je.

Główną zasadą powinna być SUCHA: Nie powtarzaj się. Nie powtarzaj bloków kodu, jeśli różnica jest tylko jedna.
Ale dołącz to słowo do warunku:

Pamiętaj, że get_ring_options() został zastąpiony odpowiednim kodem.
Nie twórz funkcji zwracających HTML, ale zamiast nich tablicę.

Answer 5

Zamiast klasy należy wziąć pod uwagę bibliotekę funkcji do generowania kodu HTML. Nie użyłem klasy do napisania kodu, który kończy się pisaniem zwięzłym, ale ekspresyjnym. Z klasą musisz utworzyć instancję i użyć tej zmiennej, lub uczynić metody statycznymi i zapisać statyczne odwołania.

Dzięki tej technice tworzenia HTML dla obrazu, który znajduje się link wygląda następująco:

a('/example/url', img('image_url', $altText)); 

ten oparty jest na skrypcie kiedyś stworzył. Pierwsze funkcje rodzajowe do generowania elementów i atrybutów HTML:

function tag($tag, $text, $attributes = array()) { 
    return "<$tag" . attributesToArray($attributes) . ">$text</$tag>"; 
} 

function minimizedTag($tag, $attributes = array()) { 
    return "<$tag" . attributesToArray($attributes) . " />"; 
} 

function attributesToArray($attributes = array()){ 
    $a = ''; 
    foreach ($attributes as $attribute => $value) { 
     $a .= " $attribute='$value'"; 
    } 
    return $a; 
} 

Następnie dodać funkcje nazwanych według elementów HTML, które tworzą niczym() i img(), aby utworzyć link i zdjęcie:

function a($link, $text, $attributes = array()) { 
    $a = array('href' => $link); 
    foreach ($attributes as $attribute => $value) { 
     $a[$attribute] = $value; 
    } 
    return tag('a', $text, $a); 
} 

function img($url, $alt = null) { 
    $a = array('src' => $url); 
    if (!is_null($alt)){ 
     if (is_array($alt)){ 
      $a = array_merge($a, $alt); 
     } else { 
      $a['alt'] = $alt; 
     } 
    } 
    return minimizedTag('img', $a); 
} 

Wybierz parametry, aby mądrze przekazywać typowe atrybuty, aby ułatwić korzystanie z biblioteki.

Answer 6

Pracuję nad prostym DSL, który rozwiązuje to typowe zadanie. To się nazywa htmlgen i jest hostowane na Github.

Po prostu pchnąłem 2.x z kilkoma istotnymi ulepszeniami.

Oto przykład

use function htmlgen\html as h; 

h('#wrapper', 
    h('h1.title', 'Hello, World'), 
    h('p', 
    h('comment', 'link to project'), 
    h('a', ['href'=>'https://github.com/naomik/htmlgen'], 'See htmlgen on Github') 
) 
); 

Oto wyjście (rzeczywista moc nie ma spacji)

<div id="wrapper"> 
    <h1 class="title">Hello, World</h1> 
    <p> 
    <!-- link to project --> 
    <a href="https://github.com/naomik/htmlgen">See htmlgen on Github</a> 
    </p> 
</div> 

To bardzo nowy, ale w ~ 200 linii źródła, to już bardzo silny. Rozwiąż go i wprowadź poprawki lub wyślij mi notatkę z sugestiami.

Answer 7

Jeśli chodzi o klasy PHP służące do generowania kodu HTML, można użyć obiektu z frameworka PHP. Inni już zajęli się twoim niezbyt czystym kodem.

Wykorzystuje format: div($class = NULL, $text = NULL, $options = array ())

Answer 8

coś takiego?

<?php 

    $html->tag('doctype')->alone('html')->tag(); 
    $html->tag('html')->lang('en'); 

     $html->tag('head'); 
      $html->tag('meta')->charset('utf-8')->tag(); 
      $html->tag('meta')->httpequiv('X-UA-Compatible')->content('IE=edge')->tag(); 
      $html->tag('meta')->name('viewport')->content('width=device-width, initial-scale=1')->tag(); 
      $html->tag('meta')->name('description')->content('Brosta Tools')->tag(); 
      $html->tag('meta')->name('author')->content('Brosta')->tag(); 
      $html->tag('title')->text('Brosta Tools')->tag(); 
      $html->tag('link')->href('assets/plugins/bootstrap/css/bootstrap.min.css')->rel('stylesheet')->tag(); 
      $html->tag('link')->href('assets/plugins/bootstrap/css/simple-sidebar.css')->rel('stylesheet')->tag(); 
      $html->tag('link')->href('assets/plugins/prism/css/prism.css')->rel('stylesheet')->tag(); 
      $html->tag('link')->href('assets/plugins/normalize/css/normalize.css')->rel('stylesheet')->tag(); 
      $html->tag('link')->href('assets/plugins/brosta/css/brosta.css')->rel('stylesheet')->tag(); 

      $html->tag('script')->src('assets/plugins/bootstrap/js/jquery.js')->type('text/javascript')->tag(); 
      $html->tag('script')->src('assets/plugins/bootstrap/js/bootstrap.min.js')->type('text/javascript')->tag(); 
      $html->tag('script')->src('assets/plugins/prism/js/prism.js')->type('text/javascript')->tag(); 
      $html->tag('script')->type('text/javascript')->text('$("#menu-toggle").click(function(e) {e.preventDefault(); $("#wrapper").toggleClass("toggled"); });')->tag(); 
      $html->tag('script')->type('text/javascript')->text(' 
       window.onload = function() { 
        var x = document.getElementsByClassName("token"); 
        var i; 
        for (i = 0; i < x.length; i++) { 
         var variable = x[i].getAttribute("class").replace("token ", ""); 
         var text = x[i].innerText.trim().replace("$", ""); 
         if(!/[^a-zA-Z0-9]/.test(text) || text.indexOf("_") >= 0) { 
          x[i].className +=" " + variable + "-" + text; 
         } 
        } 
       } 
      ')->tag(); 
     $html->tag(); 

     $html->tag('body')->class('brosta'); 

      $html->include('snippets.brosta.navbar'); 

      $html->tag('div')->class('container-fluid brosta'); 
       $html->tag('div')->id('wrapper'); 
        $html->tag('div')->id('sidebar-wrapper'); 
         $html->tag('ul')->class('sidebar-nav'); 

          $data = [ 
           ['link' => '/Instalation', 'text' => 'Instalation'], 
           ['link' => '/Html', 'text' => 'Html'] 
          ]; 

          foreach($data as $link) 
          { 
           $html->tag('li'); 
            $html->tag('a')->href($link['link'])->text($link['text'])->tag(); 
           $html->tag(); 
          } 

         $html->tag(); 
        $html->tag(); 
        $html->tag('div')->id('page-content-wrapper'); 
         $html->tag('div')->class('row'); 
          $html->tag('div')->class('col-lg-12'); 
           $html->tag('div')->class('panel panel-default'); 
            $html->tag('div')->class('panel-heading clearfix')->text('Without Time')->tag(); 
            $html->tag('div')->class('panel-body'); 
             $html->tag('p')->text('Make a file in your root public server. Ex: <code class="language-php">C:\xampp\htdocs\index.php</code>')->tag(); 
             $html->tag('pre')->class('language-php'); 
              $html->tag('code')->class('language-php')->text($html->specialChars('views/content.php'))->tag(); 
             $html->tag(); 
            $html->tag(); 
           $html->tag(); 
          $html->tag(); 
         $html->tag(); 
        $html->tag(); 
       $html->tag(); 
      $html->tag(); 
     $html->tag(); 
    $html->tag(); 

echo $html->get(); 

Answer 9

Trochę się spóźniłem, ale ostatnio napisałem: an object-oriented HTML generator for PHP. Obsługuje zagnieżdżanie.

Jako przykład, to ...

$h = new \HTML; 
echo $h::div(
    'class', 'my-class', 
    'id', 'my-id', 
    $h::p(
     'class', 'paragraph', 
     'It was a dark and stormy night, at least according to the beginning of the book.' 
    ) 
); 

... stworzy to znaczników (bez odstępów między znacznikami) ...

<div class="my-class" id="my-id"> 
    <p class="paragraph">It was a dark and stormy night, at least according to the book.</p> 
</div> 

Mam nadzieję, że okaże się przydatny!

Answer 10

studiowbe/html to odpowiedni pakiet dla mnie. Ma dźwięk API, z łańcuchem i jest włączony w Composer.