Tornar al Blog
uikit definitiu pagina amb un nav de competicio
Categoria: framework |
Publicat el 30 Dec, 2024
<?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>
Etiquetes:
#php
#inteligencia_artificial
#framework
#gallery
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