Bonjour,
Je me sers actuement du micro Framework Slim pour développer un projet scolaire -une application de gestion du centre médical pour une entreprise- et je rencontre une difficulté. En fait le projet est terminé, mais j'ai l'impression que, la façon dont j'ai géré le menu de navigation ne me satisfait pas. Du coup je voudrais pouvoir implémenter un menuController, une classe capable de gérer automatiquement les choses
Ce que je fais
Alors dans mon code j'ai un navbar où je pompe tous les liens de navigation :(, je trouve ça chiant.
<nav class="px-nav px-nav-left">
<button type="button" class="px-nav-toggle" data-toggle="px-nav">
<span class="px-nav-toggle-arrow"></span>
<span class="navbar-toggle-icon"></span>
<span class="px-nav-toggle-label font-size-11">HIDE MENU</span>
</button>
<ul class="px-nav-content">
{% if auth is not defined %}
<li class="px-nav-item">
<a href="{{ path_for('public') }}"><i class="px-nav-icon fa fa-home"></i><span class="px-nav-label">Page publique</span></a>
</li>
{% endif %}
{% if auth is defined %}
<li class="px-nav-box p-a-3 b-b-1" id="demo-px-nav-box">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span></button>
<img src="{{ base_url() }}../../app/src/Avatar/{{ auth.avatar }}" alt="" class="pull-xs-left m-r-2 border-round" style="width: 54px; height: 54px;">
<div class="font-size-16"><span class="font-weight-light">Bienvenue</span></div>
<div class="btn-group" style="margin-top: 4px;">
<a href="#" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-bell-o"></i></a>
<a href="#" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-user"></i></a>
<a href="{{ path_for('edit-user', {'id': auth.id_user}) }}" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-cog"></i></a>
<a href="{{ path_for('logout') }}" class="btn btn-xs btn-danger btn-outline"><i class="fa fa-power-off"></i></a>
</div>
</li>
<li class="px-nav-item active">
<a href="{{ path_for('home') }}"><i class="px-nav-icon fa fa-home"></i><span class="px-nav-label">Accueil Utilisateur</span></a>
</li>
{% endif %}
{% if auth is defined and Profil_Admin == true and orders == true %}
<!--
<li class="px-nav-item">
<a href="#"><i class="px-nav-icon fa fa-list-alt"></i><span class="px-nav-label">Fichier du personnel</span></a>
</li>
-->
<li class="px-nav-item">
<a href="{{ path_for('users', {'page': 1}) }}"><i class="px-nav-icon fa fa-users"></i><span class="px-nav-label">Utilisateurs</span></a>
</li>
<li class="px-nav-item px-nav-dropdown">
<a href="#"><i class="px-nav-icon fa fa-folder-open"></i><span class="px-nav-label">Files d'attentes<span class="label label-info">4</span></span></a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item">
<a href=""><i class="px-nav-icon fa fa-thermometer-3"></i><span class="px-nav-label">Nouveau Patients</span></a>
</li>
<li class="px-nav-item">
<a href=""><i class="px-nav-icon fa fa-file-text"></i><span class="px-nav-label">Ordonnances</span></a>
</li>
<li class="px-nav-item">
<a href=""><i class="px-nav-icon fa fa-pencil-square-o"></i><span class="px-nav-label">Prises en charges</span></a>
</li>
<li class="px-nav-item">
<a href=""><i class="px-nav-icon fa fa-share-square-o"></i><span class="px-nav-label">Fiches Transferts</span></a>
</li>
</ul>
</li>
{% endif %}
{% if auth is defined and Profil_hote == true %}
<li class="px-nav-item px-nav-dropdown">
<a href="#"><i class="px-nav-icon fa fa-wheelchair"></i><span class="px-nav-label">Recherche Perso</span></a>
<ul class="px-nav-dropdown-menu">
<div class="form-group m-b-0">
<form id="checkPersonal" action="{{ path_for('patient-info') }}" method="GET" class="page-header-form col-xs-12 col-md-12 input-group input-group-md" autocomplete="off">
<input id="matricule" type="search" name="matricule" class="form-control" placeholder="Search for..." autocomplete="off">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
</form>
</div>
</ul>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-old-params', {'page': 1}) }}"><i class="px-nav-icon fa fa-folder-open"></i><span class="px-nav-label">Les Archives</span></a>
</li>
{% endif %}
{% if auth is defined and Profil_consultation == true %}
<li class="px-nav-item">
<a href="{{ path_for('allNewParams', {'page': 1}) }}"><i class="px-nav-icon fa fa-pause"></i><span class="px-nav-label">En Attente</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-appoint', {'page': 1}) }}"><i class="px-nav-icon fa fa-calendar"></i><span class="px-nav-label">Rendez - Vous</span></a>
</li>
<li class="px-nav-item px-nav-dropdown">
<a href="#"><i class="px-nav-icon fa fa-folder-open"></i><span class="px-nav-label">Archives<span class="label label-info">4</span></span></a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item">
<a href="{{ path_for('show-prescription-list', {'page': 1}) }}"><i class="px-nav-icon fa fa-file-text"></i><span class="px-nav-label">Ordonnances</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('show-support-list', {'page': 1}) }}"><i class="px-nav-icon fa fa-pencil-square-o"></i><span class="px-nav-label">Bons P.C</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('show-transfer-list', {'page': 1}) }}"><i class="px-nav-icon fa fa-share-square-o"></i><span class="px-nav-label">Transfert</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('appoint-archive', {'page': 1}) }}"><i class="px-nav-icon fa fa-calendar-check-o"></i><span class="px-nav-label">Rendez-vous</span></a>
</li>
</ul>
</li>
{% endif %}
{% if auth is defined and Profil_pharmacie == true %}
<li class="px-nav-item">
<a href="{{ path_for('all-medicine', {'page': 1}) }}"><i class="px-nav-icon fa fa-database"></i><span class="px-nav-label">Médicaments en stock</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-new-pharmacy', {'page': 1}) }}"><i class="px-nav-icon fa fa-pause"></i><span class="px-nav-label">En Attente<span class="label label-info">{{ totalNewOrder }}</span></span></a>
</li>
<li class="px-nav-item px-nav-dropdown">
<a href="#"><i class="px-nav-icon fa fa-folder-open"></i><span class="px-nav-label">Archives<span class="label label-info">2</span></span></a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item">
<a href="{{ path_for('all-old-prescription', {'page': 1}) }}"><i class="px-nav-icon fa fa-list-alt"></i><span class="px-nav-label">Liste Ordonnances</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-movement', {'page': 1}) }}"><i class="px-nav-icon fa fa-calendar-check-o"></i><span class="px-nav-label">Mouvements</span></a>
</li>
</ul>
</li>
{% endif %}
{% if auth is defined and Profil_edition == true %}
<li class="px-nav-item">
<a href="{{ path_for('all-new-supported', {'page': 1}) }}"><i class="px-nav-icon fa fa-pencil-square-o"></i><span class="px-nav-label">Bon(s) En Attente</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-new-transfer', {'page': 1}) }}"><i class="px-nav-icon fa fa-file-text"></i><span class="px-nav-label">Transfert(s) En Attente</span></a>
</li>
<li class="px-nav-item px-nav-dropdown">
<a href="#"><i class="px-nav-icon fa fa-folder-open"></i><span class="px-nav-label">Archives<span class="label label-info">2</span></span></a>
<ul class="px-nav-dropdown-menu">
<li class="px-nav-item">
<a href="{{ path_for('all-old-supported', {'page': 1}) }}"><i class="px-nav-icon fa fa-pencil-square-o"></i><span class="px-nav-label">Prise en charge</span></a>
</li>
<li class="px-nav-item">
<a href="{{ path_for('all-old-transfer', {'page': 1}) }}"><i class="px-nav-icon fa fa-file-text"></i><span class="px-nav-label">Fiches transfert</span></a>
</li>
</ul>
</li>
{% endif %}
{% if auth is defined %}
<li class="px-nav-item">
<a class="p-2 text-dark" href="#"><i class="px-nav-icon fa fa-question"></i><span class="px-nav-label">File des questions</span></a>
</li>
<li class="px-nav-item">
<a class="p-2 text-dark" href="{{ path_for('edit-user', {'id': auth.id_user}) }}"><i class="px-nav-icon fa fa-cog"></i><span class="px-nav-label">Paramétrage</span></a>
</li>
{% endif %}
</ul>
</nav>
<!-- Navbar -->
<nav class="navbar px-navbar">
<div class="navbar-header p-l-1 p-r-1" style="background: #818a91">
<a class="navbar-brand" href="{{ path_for('public') }}"><img src="{{ base_url() }}/assets/images/padcare.png" height="50" width="150" alt=""></a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#px-navbar-collapse" aria-expanded="false"><i class="navbar-toggle-icon"></i></button>
<div class="collapse navbar-collapse" id="px-navbar-collapse">
<ul class="nav navbar-nav">
{% if auth is defined %}
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-medkit"></i> Support Technique : Ligne directe</a>
<div class="dropdown-menu p-a-0" style="width: 300px">
<div id="navbar-notifications" style="height: auto; position: relative;" class="ps-container ps-theme-default">
<div class="widget-notifications-item">
<form action="{{ path_for('technical-support', {'id': auth.id_user}) }}" method="post">
<div class="widget-notifications-title" style="margin: 0">
<div class="form-group">
<span href="#" data-toggle="tooltip" data-placement="right" title="Consulter la file de questions avant de poser votre problème." class="pull-xs-left m-r-1 m-b-1"><i class="fa fa-info-circle text-info font-size-16"></i></span>
<label for="slug">Slug ( Titre du problème )</label>
<input id="slug" type="text" name="slug" class="form-control" maxlength="30" data-counter="#slug + small > strong">
<small class="text-muted">Caractères restant : <strong>0</strong></small>
</div>
<div class="form-group">
<label for="problem-desc">Description</label>
<textarea id="problem-desc" name="description" class="form-control" placeholder="Décrivez clairement votre problème." maxlength="250" data-counter="#problem-desc + small > strong" autofocus aria-haspopup="true"></textarea>
<small class="text-muted">Caractères restant : <strong>0</strong></small>
</div>
</div>
<div style="margin-top: 5px; margin-bottom: 5px"></div>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-undo"></i> Annuller</button>
<button type="submit" class="btn btn-sm btn-success pull-right m-l-1"><i class="fa fa-send"></i> Envoyer</button>
</form>
</div>
</div>
</div>
</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if auth is defined %}
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="{{ base_url() }}../../app/src/Avatar/{{ auth.avatar }}" alt="" class="px-navbar-image">
{{ auth.lastname }}
</a>
<div class="dropdown-menu p-t-1" style="width: 300px;">
<div id="navbar-messages" style="height: auto; position: relative; vertical-align: bottom" class="ps-container ps-theme-default ps-active-y p-b-1">
<div class="col-sm-5"><img id="avatar-format" src="{{ base_url() }}../../app/src/Avatar/{{ auth.avatar }}" height="100" width="100" alt=""></div>
<div class="col-sm-7">
<span>{{ auth.lastname }}</span>
<br>
<span>{{ auth.email }}</span>
<br>
<div style="border-bottom : 1px solid #cccccc; margin-bottom: 20px "></div>
<a href="" class="btn btn-sm btn-primary font-size-13">Afficher mon compte</a>
</div>
</div>
<span class="widget-more-link text-left" style="text-align: left">
<a class="btn btn-sm m-l-1" href="{{ path_for('edit-user', {'id': auth.id_user}) }}"><i class="fa fa-cog"></i> Paramétrage</a>
<a class="btn btn-sm m-r-1 pull-right" href="{{ path_for('logout') }}"><i class="fa fa-power-off"></i> Déconnexion</a>
</span>
</div>
</li>
{% else %}
<li>
<a href="{{ path_for('signin') }}">
<i class="px-navbar-icon fa fa-key font-size-14"></i> Authentification
</a>
</li>
{% endif %}
</ul>
</div>
</nav> Ce que je veux
Je voudrais pouvoir créer un menuController pour gérer les choses
Ce que j'obtiens
J'ai une barre de navigation que je trouse trop salle et touffu. Je ne sais pas si quelqu'un pourrait m'aider avec ce menu controller avec Slim Framework 3
2 réponses
Hello,
Si je comprend bien tu voudrais que ton menu soit géré autrement qu'en dur, autrement dit pas avec un code HTML statique.
Dans ce cas, tu peux gérer ton menu dynamiquement avec PHP, après tout dépend de comment tes liens sont stockés, s"ils sont stockés en base par exemple, il faut faire une requete puis une boucle dans le template. Je ne connais pas SlimFramework donc je ne sais pas s'il propose des fonctionnalités spéciiques pour çà.
Si quand tu dis que tu barre de navigation est salle est touffue, tu parle de l'aspect éstétique, c'est pas un problème de PHP mais de design.
Merci Soundboy39 pour ta réponse. Je vais explorer cette idée de stocker mon menu en base.
Quand je parlais de barre de navigation trop touffue et sale, je faisais allusion à écrire "trop de code html". Moi je taffe à trouver une façon plus propre, genre générer dynamiquement les menu dans mes projets futur.