PHP Updating the structure of the articles



  • @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    

    <!-- begin snippet: js hide: false console: true babel: false -->

    <div class="container">
    <div class="card">
    <div class="content">
    <?php

            $articles = mysqli_query($connection, "SELECT * FROM `articles` ORDER BY `views`");
    
            while ($art = mysqli_fetch_assoc($articles)) {
                    ?&gt;
    
                    &lt;h2&gt;
                    &lt;?php
                        if ($art['id'] &gt;= 10) {
                            echo $art['id'];
                        } else {
                            echo '0' . $art['id'];
                        }
    
                    ?&gt;
                        
                    &lt;/h2&gt;
                    &lt;h3&gt;
                        &lt;?php echo mb_substr($art['title'], 0, 20, 'utf-8'); ?&gt;   
                    &lt;/h3&gt;
    
                    &lt;p&gt;&lt;?php echo mb_substr($art['description'], 0, 120, 'utf-8') . "..."; ?&gt;&lt;/p&gt;
    
                    &lt;a href="/project.php?id=&lt;?php echo $art['id']; ?&gt;"&gt;Read More&lt;/a&gt;
    
            &lt;?php
                }
                ?&gt;
    
        &lt;/div&gt;
    &lt;/div&gt;
    

    </div>

    * {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161623;
    }

    body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#f00, #f0f);
    clip-path: circle(30% at right 70%);
    }

    body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2196f3, #e91e63);
    clip-path: circle(20% at 10% 10%);
    }

    .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
    z-index: 1;
    }

    .container .card {
    position: relative;
    width: 280px;
    height: 400px;
    margin: 30px;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, .5);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .5);
    border-left: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(5px);
    }

    .container .card .content {
    padding: 20px;
    text-align: center;
    transition: .5s;
    transform: translateY(100px);
    opacity: 0;
    }

    .container .card:hover .content {
    transform: translateY(0px);
    opacity: 1;
    }

    .container .card .content h2 {
    position: absolute;
    top: -80px;
    right: 30px;
    font-size: 8em;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    }

    .container .card .content h3 {
    font-size: 1.8em;
    color: #fff;
    z-index: 1;
    }

    .container .card .content p {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
    }

    .container .card .content a {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background: #fff;
    color: #000;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
    }

    <?php include '../includes/config.php'; ?>

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../media/assets/css/projects.css">
    <link rel="shortcut icon" href="../../media/assets/img/favicon.jpg" type="image/png">
    <title>Projects</title>
    </head>

    <body>
    <?php include "../includes/project.php"; ?>

    &lt;script type="text/javascript" src="../../media/assets/js/vanilla-tilt.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      VanillaTilt.init(document.querySelectorAll(".card"), {
        max: 20,
        speed: 100,
        glare: true,
        "max-glare": 0.5,
    });
    &lt;/script&gt;
    

    </body>

    </html>

    There's a project page. Cards should be displayed and card data(id, text etc.). How do I break the cards so every card has its name and text.



  • The good structure is not the smell of red lights and not the finishing code. That's what's gonna make you solve your problems quickly. Your problems. Until you're willing to write and you're waiting for decisions so, your peers are already solving the problems of the next level.

    By dividing the data and their display, you can check every part independently. If the error in getting the data, the whole html makes no sense. If the data are all right, you don't need to study the queries into the database.

    Your question looked at more than 20 people, but no one wanted to figure it out because it doesn't make sense. A good structure would help you here.

    I gave you an example. I faked an answer from the database so you could run the code if you need it.

    index.php

    <?php
    

    // php -S localhost:8000

    // ...
    $connection = 'fake connection';
    $articlesResult = _mysqli_query($connection, "SELECT * FROM articles ORDER BY views");
    $articles = [];
    while ($row = _mysqli_fetch_assoc($articlesResult)) {
    $articles[] = $row; // тут только получаем данные, не отображаем
    }

    //var_dump($articles);die; // var_dump -- самый примитивный способ отладки; используйте, чтобы понять, что происходит в вашем приложении

    $articlesHtml = ob_include(DIR . '/articles.phtml', ['articles' => $articles]); // тут только отображаем
    echo ob_include(DIR . '/layout.phtml', ['content' => $articlesHtml]);

    /**

    • Подключение файла с буферизацией вывода
    • @param string $file
    • @param array $params
      */
      function ob_include(): string
      {
      extract(func_get_arg(1));
      ob_start();
      require func_get_arg(0);
      return ob_get_clean();
      }

    // -------------------------------------------------------------------------------
    // я сделал заглушки функций mysqli, чтобы вы могли попробовать без заморочек с бд

    function _mysqli_query($connection, $sql) {
    return 'fake result';
    }

    function _mysqli_fetch_assoc($result) {
    static $rows = [
    ['id' => 1, 'title' => 'Laravel', 'description' => 'Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.'],

        ['id' =&gt; 2, 'title' =&gt; 'Gulp', 'description' =&gt; 'Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.'],
    ];
    
    $row = current($rows);
    next($rows);
    
    return $row;
    

    }

    articles.phtml

    <div class="container">
    <?php foreach ($articles as $article): ?>
    <div class="card">
    <div class="content">
    <h2><?= htmlspecialchars(str_pad($article['id'], 2, '0', STR_PAD_LEFT)) ?></h2>
    <h3><?= htmlspecialchars($article['title']) ?></h3>
    <p><?= htmlspecialchars($article['description']) ?></p>
    <a href="/project.php?id=<?= htmlspecialchars($article['id']) ?>">Read More</a>
    </div>
    </div>
    <?php endforeach ?>
    </div>

    layout.phtml

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../media/assets/css/projects.css">
    <link rel="shortcut icon" href="../../media/assets/img/favicon.jpg" type="image/png">
    <title>Projects</title>
    </head>

    <body>
    <?= $content ?>

    &lt;script type="text/javascript" src="../../media/assets/js/vanilla-tilt.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      VanillaTilt.init(document.querySelectorAll(".card"), {
        max: 20,
        speed: 100,
        glare: true,
        "max-glare": 0.5,
    });
    &lt;/script&gt;
    

    </body>

    </html>

    Three files (index.php, articles.phtml, layout.phtml) need to be created in a separate folder to launch this example, and implemented in the consoles php -S localhost:8000and then open http://localhost:8000 and see the result.

    But look at the articles first.phtml. Call attention to the block. card inner cycle (i.e. each article one block) card) Now look into your code. You have a block. card outside the cycle (i.e. all articles within one block) card)




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2