detall post - uikit definitiu pagina amb un nav de competicio

Creado en: 2024-12-30 14:08:46

Actualizado en: 2024-12-30 14:08:46

framework

php inteligencia_artificial framework gallery

en el nav posto dades automatiques de directoris amb consultes php

<?php
$mysqli = new mysqli("localhost", "root", "", "postslar11");
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
}

$category_filter = isset($_GET['category']) ? $_GET['category'] : null;
$etiqueta_filter = isset($_GET['etiqueta']) ? $_GET['etiqueta'] : null;
$search_filter = isset($_GET['search']) ? trim($_GET['search']) : null;
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PHP Blog UIKIT</title> 
<link href="/img/xampp.png" rel="icon">
  <link href="https://cdn.jsdelivr.net/npm/uikit@3.6.21/dist/css/uikit.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="copy/style.css">

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">

  <style>
    h1 {
      font-family: "Monsieur La Doulaise", serif;
      font-weight: 400;
      color: white;
      font-style: normal;
      text-align: center;
      padding: 20px;
    }

    .card-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .card-footer a {
      display: inline-flex;
      align-items: center;
    }

    .card-footer svg {
      width: 24px;
      height: 24px;
    }

    h2 {
      font-size: 1.2rem;
      margin: 0;
    }

    p {
      font-size: 0.8rem;
      margin: 0.5rem 0;
    }

    .uk-navbar-dropbar {
      background: #252121;
    }

    .uk-navbar-container:not(.uk-navbar-transparent) {
      background: #252121;
    }

    body {
      background-color: #2E2E2E;
      color: white;
    }

    form.search-form {
      display: flex;
      align-items: center;
      border-bottom: 1px solid white;
      padding-bottom: 5px;
      margin-bottom: 20px;
    }

    form.search-form input[type="text"] {
      border: none;
      background: transparent;
      color: white;
      flex: 1;
      font-size: 1rem;
      outline: none;
    }

    form.search-form button {
      display: none;
    }
  </style>
</head>

<body>
<div class="uk-position-relative ">

    <nav class="uk-navbar-container uk-background-secondary">
        <div class="uk-container uk-background-secondary">
            <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container uk-background-secondary">

                <div class="uk-navbar-left uk-background-secondary">

                    <ul class="uk-navbar-nav uk-background-secondary">
			
				<a href="/" class="uk-navbar-item uk-logo"><svg xmlns="http://www.w3.org/2000/svg" width="1.99em" height="2em" viewBox="0 0 256 258"><g fill="none" fill-rule="evenodd"><path fill="#fb7a24" d="M127.929.002Q177.77.002 227.61 0c4.17 0 8.3.362 12.301 1.582c8.675 2.644 13.268 8.865 15.068 17.438c.715 3.4.918 6.865.925 10.33c.053 23.27.092 46.542.094 69.814c.002 42.384.007 84.768-.08 127.151c-.012 5.933-.328 11.931-3.257 17.336c-3.249 5.994-7.697 10.738-14.45 12.824c-1.22.377-2.494.806-3.745.806c-2.882.002-5.687.716-8.56.716c-65.067-.005-130.133.033-195.2-.07c-5.292-.01-10.67-.395-15.697-2.548c-1-.43-2.01-.79-2.89-1.46c-6.4-4.877-10.746-10.96-11.678-19.191c-.335-2.968-.442-5.92-.442-8.889c.01-65.952.016-131.904.05-197.856c.003-3.826.042-7.718 1.219-11.38C4.403 6.846 11.261 1.519 21.427.437C23.79.185 26.173.022 28.547.02C61.672-.007 94.801.002 127.928.002"/><path fill="#fff" d="M128.775 164.113c-.727 4.454-1.238 8.48-2.838 12.19c-7.49 17.384-20.256 27.977-39.394 30.086c-22.621 2.492-43.515-11.47-49.797-33.154c-2.277-7.858-2.049-15.869-1.223-23.867c.881-8.546 3.399-16.65 7.33-24.296c.563-1.093.552-1.918-.152-2.977c-6.036-9.078-8.378-19.107-7.528-29.932c.455-5.786 1.86-11.32 4.483-16.504c7.689-15.185 24.57-28.072 47.179-25.932c19.88 1.88 38.293 19.029 41.167 38.315c.145.968.417 1.918.735 3.346c.476-2.586.82-4.72 1.265-6.834c3.703-17.521 20.854-35.855 45.164-36.082c24.64-.228 42.887 19.097 46.33 37.045c1.455 7.585 1.202 15.163.002 22.738a81 81 0 0 1-6.672 21.775c-.716 1.529-.642 2.63.275 4.05c5.307 8.224 7.649 17.252 7.349 27.056c-.628 20.457-15.097 38.802-35.002 43.6c-27.79 6.697-49.093-9.923-56.262-30.031c-1.17-3.273-1.723-6.69-2.41-10.592m50.489-35.94c.297-1.157 1.193-1.85 1.837-2.706c6.968-9.26 10.633-19.603 9.815-31.25c-.596-8.5-7.587-14.488-16.05-14.171c-8.469.317-14.85 6.848-14.97 15.322c-.009.694.033 1.389-.01 2.078c-.583 9.031-5.566 13.978-13.117 14.53c-1.379.101-2.762.224-4.143.228c-9.8.022-19.599.018-29.4.009c-4.28-.004-8.524.462-12.6 1.72c-19.027 5.87-30.122 18.882-33.796 38.275c-.728 3.837-1.383 7.819-.125 11.76c1.805 5.653 5.17 9.857 11.126 11.263c6.173 1.457 11.55-.155 15.822-5.004c2.761-3.135 3.632-6.86 3.838-10.948c.534-10.515 6.26-15.771 15.81-15.692c14.649.122 29.3.026 43.951.037c2.6.001 2.624.036 2.637 2.608c.025 4.75-.121 9.507.062 14.252c.298 7.747 7.114 14.186 15.016 14.413c8.148.233 15.411-5.794 15.942-13.661c.458-6.81.429-13.661-.018-20.476c-.346-5.275-3.2-9.035-8.036-11.217c-1.16-.522-2.38-.913-3.591-1.37m-91.832-15.984c3.151 0 5.723-.029 8.293.013c1.274.02 1.746-.528 1.736-1.777c-.042-4.943.213-9.902-.102-14.827c-.416-6.497-3.871-11.194-9.92-13.563c-6.202-2.429-11.878-1.043-16.678 3.538c-4.821 4.603-5.464 10.232-3.777 16.392c1.55 5.662 5.21 8.878 10.968 9.85c3.344.563 6.707.293 9.48.374"/></g></svg></a>		
					
					
			<a href="/uikit_ia.php" class="uk-navbar-item uk-logo"><svg xmlns="http://www.w3.org/2000/svg" width="1.73em" height="2em" viewBox="0 0 256 297"><path fill="#2396f3" d="M174.656 28.438L125.717 0L74.646 31.723l49.621 27.414zm23.403 12.245L147.52 71.424l57.28 33.109V192l-77.248 43.904L51.2 192v-68.267L0 98.304v123.563l125.717 74.666L256 222.422V74.155z"/></svg></a>		
					
					
					
					<?php
      $categories_query = "SELECT name FROM categories ORDER BY name ASC";
      $categories_result = $mysqli->query($categories_query);
      if ($categories_result->num_rows > 0) {
          while ($category = $categories_result->fetch_assoc()) {
              echo "<li><a href='?category=" . urlencode($category['name']) . "'>" . htmlspecialchars($category['name']) . "</a></li>";
          }
      }
      ?>
					
         
                        
                        <li class="uk-background-secondary">
                            <a href="#">DIRECTORIS</a>
                            <div class="uk-background-secondary uk-navbar-dropdown uk-navbar-dropdown-width-4">
                                <div class="uk-background-secondary uk-drop-grid uk-child-width-1-4" uk-grid>
 



<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">php</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/PHP";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>									

</ul>
</div>

  

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">codeigniter</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/CODEIGNITER";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>					

</ul>
</div>

  <!-- 5 -->   

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">laravel</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/LARAVEL";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>										

</ul>
</div>

  <!-- 6 -->   

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">wordpress</li>
<li class="uk-nav-divider"></li>

<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/WORDPRESS";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>											

</ul>
</div>
									
									
									
                                </div>
                            </div>
                        </li>
						
						 <li class="uk-background-secondary">
                            <a href="#">PROJECTES</a>
                            <div class="uk-background-secondary uk-navbar-dropdown uk-navbar-dropdown-width-4">
                                <div class="uk-background-secondary uk-drop-grid uk-child-width-1-4" uk-grid>
 

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">HTML</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/HTML";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);    
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://localhost/NOMBRE-DIRECTORIO
            $url = "http://localhost/HTML/" . $dir;
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>

</ul>
</div>

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">patro uikit arrel htdocs</li>
<li class="uk-nav-divider"></li>

	<!-- Aquest codi PHP genera una llista no ordenada (<ul>) amb enllaços (<a>) per a tots els fitxers del directori actual que compleixen un patró específic. -->								  
<?php
$directory = __DIR__;
$phpFiles = array_filter(glob($directory . '/uikit*.php', ));
foreach ($phpFiles as $file) {
$fileName = basename($file);
echo '<li><a href="' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
?>			

</ul>
</div>

 

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">directori arrel localhost</li>
<li class="uk-nav-divider"></li>

	<?php
$directory = __DIR__;
$phpFiles = array_filter(glob($directory . '/*.php'), function ($file) {
    $excludedFiles = ['footer.php', 'eliminar_img_noutils.php', 'navbar.php', 'navbar_devdojo.php'];
    return !in_array(basename($file), $excludedFiles);
});

foreach ($phpFiles as $file) {
    $fileName = basename($file);
    echo '<li><a href="' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
?>				

</ul>
</div>

  

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">hosts</li>
<li class="uk-nav-divider"></li>

<?php
$hostsFile = 'C:\Windows\System32\drivers\etc\hosts';
if (file_exists($hostsFile)) {
$lines = file($hostsFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$validHosts = [];

foreach ($lines as $line) {
$line = trim($line);

// Procesar líneas válidas de hosts
if (!empty($line) && strpos($line, '#') !== 0) {
$parts = preg_split('/\s+/', $line);
if (isset($parts[1])) {
$validHosts[] = $parts[1]; // Agregar solo el dominio
}
}
}

foreach ($validHosts as $host) {
echo '<li><a href="http://' . htmlspecialchars($host, ENT_QUOTES, 'UTF-8') . '" class="active">' . htmlspecialchars($host, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
} else {
echo '<li><span class="text-gray-500">Archivo hosts no encontrado.</span></li>';
}
?>						

</ul>
</div>
									
								
                                </div>
                            </div>
                        </li>
					
                    </ul>

                </div>

                <div class="uk-navbar-right uk-background-secondary">

                    <ul class="uk-navbar-nav uk-background-secondary">
                        <li>
                            <a href="#">1</a>
                            <div class="uk-navbar-dropdown uk-background-secondary">
                                <ul class="uk-nav uk-navbar-dropdown-nav">                                    
                                    <li class="uk-nav-header uk-text-primary uk-text-bold">1</li>                           
                                    <li class="uk-nav-divider"></li>
                                    
                                </ul>
								
                            </div>
                        </li>
						
						<li>
                            <a href="#">admin</a>
                            <div class="uk-navbar-dropdown uk-background-secondary">
                                <ul class="uk-nav uk-navbar-dropdown-nav">                                    
                                    <li class="uk-nav-header uk-text-primary uk-text-bold">localhost</li>
                                    
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="http://localhost/phpmyadmin/index.php?route=/">phpmyadmin</a></li>
									 <li><a href="http://administracio.test/admin/posts">projecte administracio laravel</a></li>
                                </ul>
                            </div>
                        </li>
						
                    </ul>

                </div>

            </div>
        </div>
    </nav>

</div>

<div class="uk-container uk-container-expand">
  <h1>Hola, aquests son els meus apunts de Disseny Web</h1>

  <form method="GET" class="search-form">
    <input type="text" name="search" placeholder="Busca títols..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
    <button type="submit">Buscar</button>
  </form>

  <?php
    $query = "
      SELECT 
          p.id, p.title, p.excerpt, p.img, p.url, p.ins, p.face, p.youtube, 
          c.name AS category_name, 
          GROUP_CONCAT(DISTINCT CONCAT(e.name, '|', e.svg) ORDER BY e.name) AS etiquetas 
      FROM posts p 
      JOIN categories c ON p.category_id = c.id 
      LEFT JOIN post_etiquetas pe ON p.id = pe.post_id 
      LEFT JOIN etiquetas e ON pe.etiqueta_id = e.id
    ";

    $conditions = [];
    if ($category_filter) {
        $conditions[] = "c.name = '" . $mysqli->real_escape_string($category_filter) . "'";
    }
    if ($etiqueta_filter) {
        $conditions[] = "e.name = '" . $mysqli->real_escape_string($etiqueta_filter) . "'";
    }
    if ($search_filter) {
        $conditions[] = "p.title LIKE '%" . $mysqli->real_escape_string($search_filter) . "%'";
    }
    if (!empty($conditions)) {
        $query .= " WHERE " . implode(" AND ", $conditions);
    }
    $query .= " GROUP BY p.id";

    $result = $mysqli->query($query);

    if ($result && $result->num_rows > 0) {
        echo "<div class='uk-grid-collapse uk-grid-match uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l' uk-grid='masonry: true'>";
        while ($row = $result->fetch_assoc()) {
            echo "<div>";
            echo "<div class='uk-card uk-card-body'>";
            echo "<img data-fancybox='gallery' src='img/" . htmlspecialchars($row["img"]) . "' alt='" . htmlspecialchars($row["title"]) . "' uk-img>";
            echo "<h3 class='uk-card-title uk-margin-small-bottom'><a href='post_detail.php?id=" . $row["id"] . "'>" . htmlspecialchars($row["title"]) . "</a></h3>";
            echo "<p class='uk-text-small'>" . htmlspecialchars($row["excerpt"]) . "</p>";
            echo "<div class='uk-margin-small-top'>";
            if (!empty($row['url'])) {
                echo "<a href='" . htmlspecialchars($row["url"]) . "' target='_blank'><i class='fas fa-link uk-margin-small-right'></i></a>";
            }
            if (!empty($row['ins'])) {
                echo "<a href='" . htmlspecialchars($row["ins"]) . "' target='_blank'><i class='fab fa-instagram uk-margin-small-right'></i></a>";
            }
            if (!empty($row['face'])) {
                echo "<a href='" . htmlspecialchars($row["face"]) . "' target='_blank'><i class='fab fa-facebook uk-margin-small-right'></i></a>";
            }
            if (!empty($row['youtube'])) {
                echo "<a data-fancybox='gallery' href='" . htmlspecialchars($row["youtube"]) . "' target='_blank'><i class='fab fa-youtube uk-margin-small-right'></i></a>";
            }
            echo "</div>";
            echo "<div class='card-footer uk-margin-small-top'>";
            $etiquetas = explode(',', $row['etiquetas']);
            foreach ($etiquetas as $etiqueta) {
                if (strpos($etiqueta, '|') !== false) {
                    list($etiqueta_name, $etiqueta_svg) = explode('|', $etiqueta);
                    echo "<a href='?etiqueta=" . urlencode($etiqueta_name) . "' class='uk-margin-small-right'>";
                    echo $etiqueta_svg;
                    echo "</a>";
                }
            }
            echo "</div>";
            echo "</div>";
            echo "</div>";
        }
        echo "</div>";
    } else {
        echo "<p>No s'han trobat resultats per a la teva cerca.</p>";
    }

    $mysqli->close();
  ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.21/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

uikit definitiu pagina amb un nav de competicio