Curieux de savoir pourquoi j'ai décidé de créer CoreUI ? Veuillez lire cet article : Touche-à-tout, maître de rien. Pourquoi les modèles d'administration Bootstrap sont nuls.
CoreUI propose 6 versions : Bootstrap, Angular, Laravel, React.js, Vue.js et Vue.js + Laravel.
CoreUI est censé changer la donne UX. Le code pur et transparent est dépourvu de composants redondants, l'application est donc suffisamment légère pour offrir une expérience utilisateur ultime. Cela vaut également pour les appareils mobiles, où la navigation est tout aussi simple et intuitive que sur un ordinateur de bureau ou un ordinateur portable. L'API CoreUI Layout vous permet de personnaliser votre projet pour presque tous les appareils – qu'il soit mobile, Web ou WebApp – CoreUI les couvre tous !
Versions
CoreUI Pro
Modèles d'administration construits sur CoreUI Pro
Installation
Usage
Caractéristiques
Créateurs
Communauté
Projets communautaires
Licence
Prise en charge du développement CoreUI
CoreUI est construit sur Bootstrap 4 et prend en charge les frameworks populaires.
Modèle d'administration Bootstrap gratuit CoreUI
Modèle d'administration angulaire gratuit CoreUI
Modèle d'administration Laravel gratuit CoreUI
Modèle d'administration React.js gratuit CoreUI
Modèle d'administration Vue.js gratuit CoreUI
Modèle d'administration CoreUI gratuit Vue.js + Laravel
Modèle d'administration d'amorçage CoreUI Pro
Modèle d'administration angulaire CoreUI Pro
Modèle d'administration CoreUI Pro Laravel
Modèle d'administration CoreUI Pro React
Modèle d'administration CoreUI Pro Vue
Modèle d'administration CoreUI Pro Vue + Laravel
Thème par défaut | Thème hérité | Disposition sombre |
---|---|---|
# cloner le dépôt$ git clone https://github.com/coreui/coreui-free-laravel-admin-template.git mon-projet# aller dans le répertoire de l'application$ cd mon-projet# installer les dépendances de l'application$ composer install# installer dépendances de l'application$ npm install
# créer une base de données$ touch database/database.sqlite
Copiez le fichier ".env.example" et changez son nom en ".env". Puis dans le fichier ".env" remplacez cette configuration de base de données :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=racine
DB_PASSWORD=
À ceci :
DB_CONNECTION=sqlite
DB_DATABASE=/path_to_your_project/database/database.sqlite
Installer PostgreSQL
Créer un utilisateur
$ sudo -u postgres createuser --interactive entrez le nom du rôle à ajouter : laravel le nouveau rôle doit-il être un superutilisateur (o/n) n le nouveau rôle sera-t-il autorisé à créer une base de données (o/n) n le nouveau rôle sera-t-il autorisé à créer davantage de nouveaux rôles (o/n) n
Définir le mot de passe utilisateur
$ sudo -u postgres psql postgres= MODIFIER L'UTILISATEUR laravel AVEC LE MOT DE PASSE CRYPTÉ 'password'; postgres= q
Créer une base de données
$ sudo -u postgres crééb laravel
Copiez le fichier ".env.example" et changez son nom en ".env". Puis dans le fichier ".env" remplacez cette configuration de base de données :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=racine
DB_PASSWORD=
À ceci :
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=mot de passe
Copiez le fichier ".env.example" et changez son nom en ".env". Puis dans le fichier ".env" complétez cette configuration de base de données :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=racine
DB_PASSWORD=
Si l'url de votre projet ressemble à : example.com/sub-folder Alors allez sur
my-project/.env
Et modifiez cette ligne :
URL_APP =
Pour que cela ressemble à ceci :
APP_URL = http://example.com/sub-folder
# dans le répertoire de votre application# générer laravel APP_KEY$ php artisan key:generate# exécuter la migration de la base de données et seed$ php artisan migrate:refresh --seed# générer le mixage$ npm run dev# et répéter générer le mixage$ npm run dev
# démarrer le serveur local$ php artisan serve# test$ php supplier/bin/phpunit
Ouvrez votre navigateur avec l'adresse : localhost:8000
Cliquez sur « Connexion » dans le menu de la barre latérale et connectez-vous avec vos informations d'identification :
Courriel : [email protected]
Mot de passe : mot de passe
Cet utilisateur a des rôles : utilisateur et administrateur
Instructions pour le modèle d’administration CoreUI Free Laravel uniquement. Les versions Pro et Vue.js ont des instructions distinctes.
my-project/database/seeds/MenusTableSeeder.php
Dans la fonction run()
- ajoutez insertLink()
:
$id = $this->insertLink( $rolesString, $visibleName, $href, $iconString);
$rolesString
- une chaîne avec la liste des rôles d'utilisateur pour lesquels cet élément de menu sera disponible, ex. "guest,user,admin"
$visibleName
- une légende de chaîne visible dans la barre latérale
$href
- un href, ex. /homepage
ou http://example.com
$iconString
- une chaîne contenant un nom d'icône CoreUI valide (kebab-case), ex. cil-speedometer
ou cil-pencil
Pour ajouter un titre à la barre latérale, utilisez la fonction insertTitle()
:
$id = $this->insertTitle( $rolesString, $title );
$rolesString
- une chaîne avec la liste des rôles d'utilisateur pour lesquels cet élément de menu sera disponible, ex. "guest,user,admin"
$title
- une légende de chaîne visible dans la barre latérale
Pour ajouter un menu déroulant à la barre latérale, utilisez la fonction beginDropdown()
:
$id = $this->beginDropdown( $rolesString, $visibleName, $iconString);
$rolesString
- une chaîne avec la liste des rôles d'utilisateur pour lesquels cet élément de menu sera disponible, ex. "guest,user,admin"
$visibleName
- une légende de chaîne visible dans la barre latérale
$iconString
- une chaîne contenant un nom d'icône CoreUI valide (kebab-case). Par exemple : cil-speedometer
ou cil-pencil
Pour terminer la section déroulante, utilisez la fonction endDropdown()
.
Pour ajouter un lien vers la fonction d'appel déroulant insertLink()
entre les appels de fonction beginDropdown()
et endDropdown()
. Exemple:
$id = $this->beginDropdown('guest,user,admin', 'Certaines listes déroulantes', 'cil-puzzle');$id = $this->insertLink('guest,user,admin', 'Dropdown name' , 'http://exemple.com');$this->endDropdown();
IMPORTANT - À la fin de la fonction run()
, appelez la fonction joinAllByTransaction()
:
$this->joinAllByTransaction();
Une fois la modification du fichier seed terminée, exécutez :
$ php artisan migrate:refresh --seed# Cette commande annule également la base de données et la migre à nouveau.
Remarques
Utilisateurs
Gestion des menus
Gérer les éléments de menu
Gestion des rôles
Gestion des médias
PAIN
Modèles d'e-mails
Il s'agit d'un exemple de présentation de données dans une table de pagination et de fonctionnalité CRUD.
C'est un exemple simple de la façon de gérer les utilisateurs enregistrés.
C'est un système qui vous permet de créer un nouveau menu et de modifier les menus existants. Pour placer un nouveau menu nommé "nouveau" dans n'importe quelle vue, utilisez ce code :
<?phputilisez AppMenuBuilderFreelyPositionedMenus;if(isset($appMenus['new'])){ FreelyPositionedMenus::render( $appMenus['new'] , '', 'votre-classe-css-de-ul-element'); }?>
Vous permet d'ajouter, de modifier et de supprimer des éléments de menu. Pour ajouter un nouvel élément de menu au menu, vous devez :
précisez à quel menu vous ajoutez l'élément,
préciser les rôles des utilisateurs pour lesquels l'élément sera visible
nommer l'article
tapez (au choix : lien, titre et liste déroulante)
Href, l'adresse à laquelle l'article doit renvoyer,
Parent (pour imbriquer l'élément dans la liste déroulante)
Icônes CORUI
Vous permet de créer, modifier, supprimer et réorganiser les rôles d'utilisateur. Lorsqu'un utilisateur a plusieurs rôles, le rôle hiérarchique le plus élevé est utilisé pour créer un menu pour lui.
Il permet de :
Créez des dossiers multimédias virtuels.
Envoyez des médias aux applications.
Déplacer les médias entre les dossiers,
Couper des images,
BREAD signifie : parcourir, lire, modifier, ajouter, supprimer. Notre système BREAD vous permet de générer facilement et rapidement pour n'importe quelle table, à partir de la base de données, un simple BREAD. Pour créer un nouveau BREAD, entrez simplement un nom de table de la base de données. Saisissez ensuite un nom pour le formulaire. Entrez le nombre de lignes dans la table de navigation. Choisissez si vous souhaitez que la table de navigation contienne des boutons : "afficher", "modifier", "ajouter", "supprimer". Attribuez des rôles aux utilisateurs qui pourront utiliser le PAIN prêt. Complétez ensuite chaque colonne du tableau séparément :
le nom de la colonne visible par l'utilisateur,
le type d'entrée de la colonne. La dernière étape consiste à cocher les cases appropriées :
parcourir (permet d'afficher la colonne dans le tableau de données),
read (permet d'afficher la colonne dans la vue show,)
modifier (active l'édition des colonnes)
add (vous permet de compléter les données de la colonne lors de l'ajout d'un enregistrement. Obligatoire si la colonne n'est pas nullable). Il est également possible de gérer des relations avec une autre table. Si la colonne est une clé étrangère, il faut préciser : dans le champ "Nom de la table de relations optionnelle" - le nom de la table à laquelle fait référence la clé étrangère, dans le champ "Nom de colonne optionnelle dans la table de relations - à imprimer" - le nom de la colonne qui se trouve dans la table des relations à afficher. Enfin, sélectionnez l'un des deux "types de champs" relatifs à la relation : "relation select" ou "relation radio".
C'est un exemple de gestion de modèles d'e-mails. Vous permet de créer, modifier et supprimer des modèles. Il vous permet également d'envoyer un e-mail à une adresse sélectionnée.
Lukasz Holeczek
https://twitter.com/lukaszholeczek
https://github.com/mrholek
Andrzej Kopanski
https://github.com/xidedix
Marcin Michałek
https://github.com/rakieta2015
Obtenez des mises à jour sur le développement de CoreUI et discutez avec les responsables du projet et les membres de la communauté.
Suivez @core_ui sur Twitter.
Lisez et abonnez-vous au blog CoreUI.
Les icônes CoreUI sont des symboles magnifiquement conçus pour les actions et les objets courants. Vous pouvez les utiliser dans vos produits numériques pour le Web ou l'application mobile. Polices et feuilles de style prêtes à l'emploi qui fonctionnent avec vos frameworks préférés.
https://coreui.io/icons/
copyright 2020 creativeLabs Łukasz Holeczek. Code publié sous licence MIT. Il n'y a qu'une seule limitation : vous ne pouvez pas redistribuer le CoreUI en stock. Vous ne pouvez pas faire cela si vous modifiez le CoreUI. Dans le passé, nous avons rencontré des problèmes avec des personnes qui essayaient de vendre des modèles basés sur CoreUI.
CoreUI est un projet open source sous licence MIT et totalement gratuit. Cependant, les efforts nécessaires pour maintenir et développer de nouvelles fonctionnalités pour le projet ne sont pas durables sans un soutien financier approprié. Vous pouvez soutenir le développement en faisant un don sur PayPal, en achetant la version CoreUI Pro ou en achetant l'un de nos modèles d'administration premium.
À l'heure actuelle, j'explore la possibilité de travailler sur CoreUI à temps plein. Si vous êtes une entreprise qui crée des produits de base à l'aide de CoreUI, je suis également ouvert aux conversations concernant les accords de parrainage/conseil personnalisés. Contactez-nous sur Twitter.