detall post amb uikit 3 definitiu

Categoria: framework | Publicat el 30 Dec, 2024

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detall del Post - UIKit</title>
    <link href="/img/xampp.png" rel="icon">
    <!-- UIKit CSS -->
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/css/uikit.min.css" />
	
	<!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- Clipboard.js -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

    <!-- NanoGallery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

    <!-- Fancybox CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
    <!-- Fancybox JS -->
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

    <!-- COPY CSS -->
    <link rel="stylesheet" href="copy/style.css">
	
	
	
	
    <style>
        .post-container {
            background-color: #000;
            color: #fff;
        }

        .post-image {
            height: 300px;
            object-fit: cover;
            width: 100%;
        }

        .post-title {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
            text-align: center;
            font-size: 1.5rem;
        }
    </style>
</head>

<body class="uk-background-secondary uk-light">
   

    <div class="uk-container uk-padding post-container">
	
	<div class="uk-margin"  >
	<a href="/index.php" style="color: red; font-size: 3rem; font-weight: bold;"> <span class="uk-margin-small-right" uk-icon="icon: arrow-left; ratio: 2"></span>
<span uk-icon="icon: check; ratio: 3.5"></span></a>
    
</div>

	
        <?php
$servername = "localhost";
$username = "joan";
$password = "queMm88/g62123";
$dbname = "postslar11";

// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);

// Verificar conexión
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_GET['id'])) {
    $post_id = intval($_GET['id']);
    $sql = "SELECT * FROM posts WHERE id = $post_id";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $post = $result->fetch_assoc();

        // Títol
        echo "<h1 class='uk-heading-medium uk-text-center uk-margin-small-bottom'>" . htmlspecialchars($post['title']) . "</h1>";
        echo "<p class='uk-text-meta uk-text-center'>Created at: " . htmlspecialchars($post['created_at']) . " | Updated at: " . htmlspecialchars($post['updated_at']) . "</p>";

        // Links socials
        echo "<div class='uk-flex uk-flex-center uk-margin-top'>";
        if (!empty($post['url'])) {
            echo "<a href='" . htmlspecialchars($post['url']) . "' target='_blank' class='uk-icon-button' uk-icon='link'></a>";
        }
        if (!empty($post['ins'])) {
            echo "<a href='" . htmlspecialchars($post['ins']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='instagram'></a>";
        }
        if (!empty($post['face'])) {
            echo "<a href='" . htmlspecialchars($post['face']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='facebook'></a>";
        }
        if (!empty($post['youtube'])) {
            echo "<a data-fancybox='gallery' href='" . htmlspecialchars($post['youtube']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='youtube'></a>";
        }
        echo "</div>";

        // Contingut del post
echo "<div id='post-content' class='uk-container uk-margin-large-top'>" . $post['content'] . "</div>";


        // Galeria si la categoria és 7
        if ($post['category_id'] == 7) {
            echo "<div id='nanogallery2' class='uk-margin-large-top' data-nanogallery2='{
                \"thumbnailHeight\": 350,
                \"thumbnailWidth\": 350,
                \"itemsBaseURL\": \"img/people/" . urlencode($post['title']) . "/\"
            }'>";
            for ($i = 1; $i <= 18; $i++) {
                echo "<a href='{$i}.jpg' data-ngThumb='{$i}.jpg'>{$post['title']} {$i}</a>";
            }
            echo "</div>";
        }

        // Imatge del post
        echo "<div class='uk-flex uk-flex-center uk-margin-large-top'>";
        echo "<img src='img/" . htmlspecialchars($post['img']) . "' alt='" . htmlspecialchars($post['title']) . "' class='uk-border-rounded' style='max-height: 300px; object-fit: cover;'>";
        echo "</div>";
    } else {
        echo "<p class='uk-text-danger'>Post no trobat.</p>";
    }
} else {
    echo "<p class='uk-text-danger'>ID de post no proporcionat.</p>";
}

$conn->close();
?>

    </div>
	
<script src='https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'></script>
    <script src="copy/script.js"></script>
   
    UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit-icons.min.js"></script>
</body>

</html>

Etiquetes:

#php #framework #gallery

← uikit definitiu pagina amb un nav de competicio iconify →

Articles Relacionats

posts Array Pdo Una manera adequada de nomenar aquesta consulta PDO podria ser "ObtenirPàginesPerCategoriaIEtiqueta" o "LlistarPàginesFiltrades". Aquest nom reflecteix que la consulta selecciona posts associats a una categoria i etiqueta específica. També pot ser útil considerar la claredat de la consulta en el context de l'aplicació, per exemple:

Quina és la diferència entre PDO i MySQLi? El que no està tan definit és quina és la millor manera de connectar-se a MySQL fent servir PHP. A priori en destaquen dues:MySQLi, PDO

pagina /bootstrap_gallery del projecte larpreline.test pagina /bootstrap_gallery del projecte larpreline.test

pagina indexgallery del projecte larpreline.test/ pagina indexgallery del projecte larpreline.test/

pagina arrencada / projecte larpreline.test pagina arrencada / projecte larpreline.test

pagina /books al projecte laravel12.test pagina /books al projecte laravel12.test