Skip to content

GitLab

Commit 63524a57 authored by Corentin Bettiol's avatar Corentin Bettiol 💻
Browse files

add paging, small updates

parent 49c5a5f4
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 46 deletions
css/design.css
View file @ 63524a57
......@@ -89,13 +89,16 @@ h3 a:hover{
margin: 10px;
text-decoration: none;
background-color: #d9d9d9;
transition: color 0.2s, background-color 0.2s;
border-bottom: 0px solid #ccc;
transition: color 0.2s, background-color 0.2s, padding 0.1s, border-bottom 0.1s;
}
#listMenu a:hover{
color: #47476b;
padding-bottom: 2px;
border-bottom-width: 5px;
background-color: #f0f0f0;
transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s, padding 0.1s, border-bottom 0.1s;
}
article{
......@@ -103,6 +106,7 @@ article{
padding: 5px 15px;
background-color: #f0f0f0;
border-bottom: 3px solid #ccc;
overflow-wrap: anywhere;
}
#listMenu .selected{
......@@ -257,6 +261,49 @@ form .small{
background-color: #f0f0f0;
}
#paging{
width: 80%;
opacity: 0.8;
display: flex;
max-width: 400px;
font-size: 1.5em;
margin: 20px auto;
font-family: monospace;
justify-content: space-around;
}
#paging em, #paging a, #paging span{
width: 30px;
}
#paging em, #paging a{
margin: 3px;
padding: 5px;
text-align: center;
}
#paging a{
text-decoration: none;
background-color: #f0f0f0;
border-bottom: 0px solid #ccc;
transition: border-bottom 0.1s, padding-bottom 0.1s;
}
#paging a:hover{
padding-bottom: 0;
border-bottom-width: 5px;
transition: border-bottom 0.1s, padding-bottom 0.1s;
}
#paging em{
opacity: 0.6;
}
#paging .current{
opacity: 1;
background-color: #ccc;
}
/*
====
Media Queries
......@@ -309,6 +356,13 @@ Media Queries
width: 90%;
margin: 2px auto;
text-align: center;
padding: 0;
}
#listMenu a{
padding-bottom: 5px;
}
#listMenu a:hover{
padding-bottom: 0;
}
}
......
index.php
View file @ 63524a57
......@@ -9,6 +9,9 @@ require_once('site/controller/mainController.php');
// le moins gros controlleur (oui c'est un morceau)
require_once('site/controller/adminController.php');
// on récupère le nom de la page ici (avant d'inclure le layout)
$pageName = getPageName();
// afficher le contenu (qui va switcher sur le contenu dynamique à afficher)
require_once('site/layout/layout.php');
?>
\ No newline at end of file
site/controller/mainController.php
View file @ 63524a57
......@@ -13,11 +13,18 @@ require_once('site/model/BlogManager.php');
require_once('site/model/ProjectsManager.php');
// récupérer le nom de la page en fonction de l'url
// premier texte = affiché dans l'onglet (title), second texte = voir le switch dans site/layout/layout.php
// premier texte = affiché dans l'onglet (title), second texte = voir le switch dans site/layout/layout.php :
// c'est LA valeur utilisée pour savoir quoi faire depuis le layout
function getPageName(){
// si on a une url personnalisée
if(isset($_GET['action'])){
switch ($_GET['action']) {
case 'blog' : // le blog
if(isset($_GET['page']))
return ['Blog – page '. $_GET['page'], 'blog'];
else
return ['Blog', 'blog'];
break;
case 'contact': // contact
return ['Contact', 'contact'];
break;
......@@ -34,7 +41,7 @@ function getPageName(){
return ['Changelog', 'changelog'];
break;
case 'eplucher': // déconnexion (la première valeur n'est jamais utilisée)
return ['COUCOU AHAH', 'eplucher'];
return ['POIL AU NEZ', 'eplucher'];
break;
case 'rss': // rss
return ['Rss', 'rss'];
......@@ -45,7 +52,7 @@ function getPageName(){
case 'patate': // administration
return ['Administration', 'administration'];
break;
default: // si l'argument n'est pas compris on affiche le blog
default: // si l'argument n'est pas compris et qu'il passe les rewriterules d'apache on affiche le blog (ne devrait jamais se produire)
return ['Blog', 'blog'];
break;
}
......@@ -62,24 +69,24 @@ function writeMenu($pageName){
<input id="toggle" type="checkbox" />
<ul id='listMenu'>
<?php
if($pageName == 'Administration'){ ?>
if($pageName == 'administration'){ ?>
<li><h2><a href="/eplucher" class="selected">🔧</a></h2></li>
<?php }
else if(isset($_SESSION['user'])){ ?>
<li><h2><a href="/patate" >🔧</a></h2></li>
<?php }
if($pageName == 'Changelog'){ ?>
if($pageName == 'changelog'){ ?>
<li><h2><a href="/changelog" class="selected">Changelog</a></h2></li>
<?php } ?>
<li><h2><a href="/" title="Blog" <?php if($pageName == 'Blog'){ ?>class="selected"<?php } ?>>Blog</a></h2></li>
<li><h2><a href="/about" title="À propos" <?php if($pageName == 'À Propos'){ ?>class="selected"<?php } ?>>À propos</a></h2></li>
<li><h2><a href="/projects" title="Projets" <?php if($pageName == 'Projets' || $pageName == 'Projet'){ ?>class="selected"<?php } ?>>Projets</a></h2></li>
<li><h2><a href="/contact" title="Contact" <?php if($pageName == 'Contact'){ ?>class="selected"<?php } ?>>Contact</a></h2></li>
<li><h2><a href="/" title="Blog" <?php if($pageName == 'blog'){ ?>class="selected"<?php } ?>>Blog</a></h2></li>
<li><h2><a href="/about" title="À propos" <?php if($pageName == 'about'){ ?>class="selected"<?php } ?>>À propos</a></h2></li>
<li><h2><a href="/projects" title="Projets" <?php if($pageName == 'project'){ ?>class="selected"<?php } ?>>Projets</a></h2></li>
<li><h2><a href="/contact" title="Contact" <?php if($pageName == 'contact'){ ?>class="selected"<?php } ?>>Contact</a></h2></li>
</ul>
<label class="nav-label" for="toggle"></label>
<?php }
// affiche la page du blog
// affiche la page du blog (accueil par défaut)
function writeBlogPage($pageName){
// si on n'accède pas au fichier mais bien au site (var définie)
if($pageName[1] == 'blog'){
......@@ -88,16 +95,32 @@ function writeBlogPage($pageName){
// si on affiche un post en particulier
if(isset($_GET['title'])){
$title = urldecode($_GET['title']);
$blogpost = $blog->get($title);
if($blogpost != false)
$blogpost = $blog->get($_GET['title']);
if($blogpost != false){
// articles précédant/suivant
//$paging = $blog->pagingSingle($_GET['title']);
//require('site/view/publie/blogPostPagingView.php')
require('site/view/public/blogPostView.php');
}
else
header('Location:/404');
}
// si on affiche la liste des posts
else{
$blogposts = $blog->getPage(0);
$page = 1;
if(isset($_GET['page']))
// normalement via le rewriterule on envoie forcément un int, mais un cast ça coûte pas grand chose donc bon
$page = (int)$_GET['page'];
// liste des pages
$paging = $blog->pagingList($page);
require('site/view/public/blogPagingView.php');
// liste des articles de la page
$blogposts = $blog->getPage($page);
require('site/view/public/blogView.php');
}
}
......@@ -105,12 +128,12 @@ function writeBlogPage($pageName){
// affiche la liste des projets
function writeProjectPage($pageName){
$project = new ProjectManager(NULL, NULL, NULL, NULL, NULL);
$project = new ProjectManager(NULL, NULL, NULL, NULL, NULL); // on a un projectmanager
// si on affiche un projet en particulier
if(isset($_GET['title'])){
$title = urldecode($_GET['title']);
$project = $project->get($title);
$project = $project->get($_GET['title']);
if($project != false){
require('site/view/public/projectView.php');
}
......@@ -122,7 +145,4 @@ function writeProjectPage($pageName){
$projects = $project->getProjects();
require('site/view/public/projectsView.php');
}
}
// on récupère le nom de la page ici (avant d'inclure le layout)
$pageName = getPageName();
\ No newline at end of file
}
\ No newline at end of file
site/layout/layout.php
View file @ 63524a57
......@@ -4,10 +4,9 @@
<meta charset="utf-8" />
<meta name="description" content="Site perso de Corentin Bettiol." />
<meta name="viewport" content="width=device-width" />
<title>l3m website - <?php echo $pageName[0]; // voir getPageName() dans mainController ?></title>
<title>l3m website &ndash; <?php echo $pageName[0]; // voir getPageName() dans mainController ?></title>
<link rel="stylesheet" href="/css/design.css" />
<?php
if($pageName[1] == 404){ // le css pour la page 404 ?>
<?php if($pageName[1] == 404){ // le css pour la page 404 ?>
<link rel="stylesheet" href="/css/404.css" />
<?php } ?>
<link rel="icon" type="image/png" href="img/icon.png" />
......@@ -17,6 +16,11 @@
}
#listMenu a{
background-color: #e3e3e3;
padding: 7px;
}
#listMenu .selected{
padding-bottom: 2px;
border-bottom: 5px solid #ccc;
}
</style>
</head>
......@@ -29,7 +33,7 @@
--><h1 id="title">l3m website</h1>
</header>
<nav id="menu">
<?php writeMenu($pageName[0]); // voir mainController ?>
<?php writeMenu($pageName[1]); // voir mainController ?>
</nav>
</header>
......@@ -76,7 +80,10 @@
<footer id="footer">
<p>
Site en vanilla html5/css3/php7, fait avec ♥ - <a href="/changelog" title="changelog">Changelog</a> - <a href="/rss" title="rss">RSS</a> - v5
Site en vanilla html5/css3/php7, fait avec ♥
</p>
<p>
<a href="/changelog" title="changelog">Changelog</a> - <a href="/rss" title="rss">RSS</a> - v5
</p>
</footer>
......
site/model/Base.php
View file @ 63524a57
......@@ -27,6 +27,9 @@ class Base
$slug = preg_replace('/-$/', '', $slug);
$slug = preg_replace('/[^a-z0-9-]+/', '', $slug);
if($slug == "")
$slug = "default";
// check if the slug already exist
$i = 1;
$old = $slug;
......
site/model/BlogManager.php
View file @ 63524a57
......@@ -18,10 +18,13 @@ class BlogManager extends Base
public function getPage($page)
{
$start = $page*5;
$stop = $start + 5;
$start = ($page-1)*5;
$req = self::$db->query('SELECT * FROM l3m_blog ORDER BY id DESC LIMIT '. $start .', 5');
$req = self::$db->query('SELECT * FROM l3m_blog ORDER BY id DESC LIMIT '. $start .', '. $stop .'');
// si on tente d'accéder à une page qui ne comporte aucun article (genre la page 2 lol)
// la blague du commentaire précédent vous est présentée par "le site de dev qui comporte 4 posts tout au plus"
if($req->rowCount() == 0)
header('Location:/');
return $req;
}
......@@ -48,6 +51,35 @@ class BlogManager extends Base
return $req;
}
public function pagingList($current)
{
$total = self::$db->query('select count(*) from l3m_blog')->fetchColumn();
$after = [];
$before = [];
$nbPages = ceil($total/5);
$first = false;
$last = false;
$limit = 2; // afficher deux pages avant & deux pages après
for($i= $current-$limit; $i < $current; $i++)
if($i > 0)
array_push($before, $i);
for($i = $current+1; $i < $nbPages+1; $i++)
if($i < $current+$limit+1)
array_push($after, $i);
if($current-$limit > 1)
$first = true;
if($current+$limit < $nbPages)
$last = $nbPages;
return array('after' => $after, 'before' => $before, 'current' => $current, 'first' => $first, 'last' => $last);
}
// todo vérifier qu'on poste pas un truc vide
public function update(){
$req = self::$db->prepare('UPDATE l3m_blog SET time = :time, title = :title, content = :content, shortContent = :shortContent WHERE id = :id');
......
site/view/private/createBlogView.php
View file @ 63524a57
......@@ -14,7 +14,7 @@
<section class="input">
<label for="inputTitle">Titre</label>
<input type="text" name="title" placeholder="Titre" id="inputTitle" required />
<input type="text" name="title" placeholder="Titre" id="inputTitle" autofocus required />
</section>
<section class="input">
......
site/view/public/blogPagingView.php 0 → 100644
View file @ 63524a57
<?php
if(!isset($pageName)){
header('Location:/');
exit();
}
?>
<nav id="paging">
<?php
if($paging['first'])
echo '<a href="/page/1" title="Première page du blog">⬅️</a>';
else
echo '<em>⬅️</em>';
for($i = 0; $i < 2 - count($paging['before']); $i++)
echo '<span></span>';
foreach ($paging['before'] as $b)
echo '<a href="/page/'. $b .'" title="Page '. $b .' du blog">'. $b .'</a>';
echo '<em class="current">'. $paging['current']. '</em>';
foreach ($paging['after'] as $a)
echo '<a href="/page/'. $a .'" title="Page '. $a .' du blog">'. $a .'</a>';
for($i = 0; $i < 2 - count($paging['after']); $i++)
echo "<span></span>";
if($paging['last'])
echo '<a href="/page/'. $paging['last'] .'" title="Dernière page du blog">➡️</a>';
else
echo '<em>➡️</em>';
?>
</nav>
\ No newline at end of file
site/view/public/changelog.php
View file @ 63524a57
<article>
<h3><a href="">03/03/19</a></h3>
<h3><a href="">05/03/19</a></h3>
<ul>
<li>Ajout de la pagination sur le blog :
<ul>
<li>Fonctions pagingList dans BlogManager</li>
<li>Fichier blogPagingView.php dans /site/view/public</li>
</ul>
</li>
<li>Mise à jour de l'affichage du menu pour la version tablette du site</li>
<li>Réorganisation de l'affichage des pages par le BlogManager</li>
<li>Ajout d'un saut de ligne au footer (pour éviter un retour à la ligne automatique disgratieux sur mobile)</li>
<li>Activation du retour à la ligne pour les longues chaines de caractères (url git par exemple)</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/49c5a5f497056359c55fc93d1b35f0a3bdd25b44">03/03/19</a></h3>
<ul>
<li>Màj menu hamburger ; il affiche la page courante maintenant</li>
</ul>
......@@ -27,7 +43,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/3e33e9c76cc1f335ff91be357168352791c4d3a2" title="3e33e9c7">01/03/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/3e33e9c76cc1f335ff91be357168352791c4d3a2">01/03/19</a></h3>
<ul>
<li>Suppression de toutes les balises &lt;hr /&gt; (qui servent à séparer des paragraphes et pas des sections)</li>
<li>Création du fichier adminController.php, avec les fonctions d'administration dedans</li>
......@@ -37,7 +53,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/ebe5a9eaf0ab767e7e26d301df42db0674df5ad2" title="ebe5a9ea">19/02/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/ebe5a9eaf0ab767e7e26d301df42db0674df5ad2">19/02/19</a></h3>
<ul>
<li>Remplacement de tous les guillemets double (") du code php par des guillemets simple (')</li>
<li>Remplacement des "array()" du code php par "[]"</li>
......@@ -46,7 +62,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/919427bd2e687c0f5ffe6d83c9fe357e23e0ae1d" title="919427bd">06/02/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/919427bd2e687c0f5ffe6d83c9fe357e23e0ae1d">06/02/19</a></h3>
<ul>
<li>Ajout de commentaires au code</li>
<li>Modification du fichier urlrewriting.txt (nouveau contenu = contenu du fichier nomdusite.conf de apache)</li>
......@@ -55,7 +71,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/8f90b9e5bafe27fd6486ab3ce806762c4e86ec96" title="8f90b9e5">14/01/19</a> (encore)</h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/8f90b9e5bafe27fd6486ab3ce806762c4e86ec96">14/01/19</a> (encore)</h3>
<ul>
<li>Ajout d'un fichier "l3m.sql" pour montrer la base de données (supression du fichier sql.txt)</li>
......@@ -71,7 +87,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/1d44e697386eb8066c6844c69c174fa141a7b20c" title="commit 1d44e697">14/01/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/1d44e697386eb8066c6844c69c174fa141a7b20c">14/01/19</a></h3>
<ul>
<li>Modifications partie admin; ajout des listes des projets et des billets de blog</li>
......@@ -83,7 +99,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/d38afd228a472bb750a26a221397761cb51d9c9b" title="commit d38afd22">13/01/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/d38afd228a472bb750a26a221397761cb51d9c9b">13/01/19</a></h3>
<ul>
<li>Ajout du formulaire au panneau d'administration</li>
......@@ -93,7 +109,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/2ae140cc39ec43e1a9da520e988fc42d172d29c8" title="commit 2ae140cc">12/01/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/2ae140cc39ec43e1a9da520e988fc42d172d29c8">12/01/19</a></h3>
<ul>
<li>Modifications mineures css</li>
......@@ -107,7 +123,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/bc7ded60ac9db636c949026f0c0deaad14cf04c4" title="commit bc7ded60">11/01/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/bc7ded60ac9db636c949026f0c0deaad14cf04c4">11/01/19</a></h3>
<ul>
<li>Modifications css media queries</li>
......@@ -117,7 +133,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/e9f0366305c95549aaee98ba2485bc96255ce7f6" title="commit e9f03663">04/11/18</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/e9f0366305c95549aaee98ba2485bc96255ce7f6">04/11/18</a></h3>
<ul>
<li>Changement des liens html (éviter de tout casser quand on descend dans l'arborescence)</li>
......@@ -128,7 +144,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/ec56b1e9d9dfb2a1867c316a835423d7d119bf4c" title="commit ec56b1e9">26/10/18</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/ec56b1e9d9dfb2a1867c316a835423d7d119bf4c">26/10/18</a></h3>
<ul>
<li>Modif design pour écrans > 1500px</li>
......@@ -138,7 +154,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/26b343419dbe163e95f354283471a791f4545d59" title="commit 26b34341">22/10/18</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/26b343419dbe163e95f354283471a791f4545d59">22/10/18</a></h3>
<ul>
<li>Création & remplissage des pages <a href="changelog">changelog</a>, <a href="rss">rss</a> & <a href="404">404</a></li>
......@@ -147,7 +163,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/2aefac7867534e551e4d043fdb553231f9129d47" title="commit 2aefac78">avant le 22/10/18</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/2aefac7867534e551e4d043fdb553231f9129d47">avant le 22/10/18</a></h3>
<ul>
<li>Création du layout MVC</li>
......@@ -159,7 +175,7 @@
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/b1f971e8c23a05d452b730c35d1e5e9656d1c15a" title="commit b1f971e8">Au tout début</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/b1f971e8c23a05d452b730c35d1e5e9656d1c15a">Au tout début</a></h3>
<p>
Le 15 septembre 2018, j'ai eu envie de remplir mon site. Mais il était vraiment très mal codé.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment