Arthur Weill

Arthur Weill

-

Développeur Web
Directeur de Web and Cow

-

Blog

Projets

Contact

-

Twitter





















Créer une interface de connexion avec bootstrap


Je vais vous présenter dans cet article comment construire une interface de connexion avec Bootstrap en vous donnant quelques astuces, notamment sur le choix des images et des couleurs. Si vous êtes déjà venu sur ce blog, vous savez que je suis un utilisateur de CakePHP et que j'ai créé des outils mélangeant CakePHP et Bootstrap. Je présenterais donc aussi la façon d'intégrer directement cette interface de connexion dans un projet CakePHP, en utilisant les BsHelpers.


Le rendu final

Voici le rendu de ce que je voudrais vous présenter : une interface assez épurée, permettant de saisir son identifiant et son mot de passe pour se connecter à une application.

Interface connexion Bootstrap

Démo


Le choix d'une image

Avant d'attaquer la partie code, nous devons choisir une belle image qui illustrera notre interface de connexion. Si vous avez déjà de belles images qui représentent votre application, utilisez en une. Sinon, je vous invite à parcourir le Unsplash Search pour en trouver une. Sélectionnez un Tag et choisissez l'image qui représente au mieux votre application, ou l'utilisation que l'on peut en faire.

Cliquez ensuite sur cette image pour faire apparaître sa palette de couleurs associées. Cela représente les couleurs qui sont le plus utilisées dans l'image. Prenez en une sombre, qui se rapproche du noir. Ce sera notre couleur de fond. Prenez l'image et découpez / recadrez la pour qu'elle fasse (environ) 400px de large par 600px de hauteur. Le but ici est que le fond contraste avec l'image. Si l'image est claire, prenez une couleur sombre. Si l'image est sombre, prenez une couleur claire.

Vous avez votre couleur et votre belle image en 400x600 ? Nous pouvons passer au code.


Le code HTML

Comme je le disais en introduction, ce petit tutoriel repose sur l'utilisation de Bootstrap. Un "framework d'intégration" qui propose une véritable boite à outils HTML, CSS et JS pour mettre en forme son site web ou son application plus efficacement. Voici la structure HTML de base que nous allons utiliser :


<!DOCTYPE html>
<html lang="fr">
	
	<head>
	
		<meta charset="utf-8">
		<title>Mon application</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Connexion à mon application">
		<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

		<!-- ci-dessous notre fichier CSS -->
		<link rel="stylesheet" type="text/css" href="/css/app.css" />

		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:400,700,300" />
		<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	</head>

	<body>
	
	</body>

</html>

Ce code est assez classique. Nous créons notre document HTML et appelons les scripts de Bootstrap (CSS et JS) via leurs CDN. De cette façon, nous n'avons pas besoin d'héberger nous mêmes les scripts. Nous récupérons également les versions minifiés pour de meilleures performances au chargement de la page. Le seul fichier qui nous est propre ici est le fichier app.css qui contiendra notre CSS (le chemin relatif est à adapter selon vos développements). Nous avons également chargé 2 Google Fonts (Open Sans pour les textes, Lato pour les titres). Ceci est un bon moyen d'utiliser des polices originales sur son application web.

Ensuite, nous créons l'intérieur de notre interface, en utilisant la grille de Bootstrap et les classes propres aux formulaires :


<div class="container">
<div class="row">
<div class="col-xs-12">
	
	<div class="main">
			
		<div class="row">
		<div class="col-xs-12 col-sm-6 col-sm-offset-1">
					
			<h1>Ma machine à écrire</h1>
			<h2>Tous vos textes en un seul endroit</h2>
					
			<form action="/users/login" name="login" role="form" class="form-horizontal" method="post" accept-charset="utf-8">

				<div class="form-group">
				<div class="col-md-8"><input name="username" placeholder="Idenfiant" class="form-control" type="text" id="UserUsername"/></div>
				</div> 
				
				<div class="form-group">
				<div class="col-md-8"><input name="password" placeholder="Mot de passe" class="form-control" type="password" id="UserPassword"/></div>
				</div> 
				
				<div class="form-group">
				<div class="col-md-offset-0 col-md-8"><input  class="btn btn-success btn btn-success" type="submit" value="Connexion"/></div>
				</div>
			
			</form>

			<p class="credits">Développé par <a href="http://www.monsite.com" target="_blank">une super agence</a>.</p>

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

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

Une fois la structure HTML, nous pouvons passer au CSS (fichier app.css) :

body {
	background: #252525;
	font-family: 'Open Sans';
	font-weight: 300;
}


.main {
	background: white url(machine_a_ecrire.jpg) right top no-repeat;
	background-size: contain;
	padding: 80px 20px 20px;
	margin-top: 120px;
}

@media only screen and (max-width : 992px) {
	.main {
		background: white;
		margin-top: 30px;
	}
}


h1 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #555;
	margin-bottom: 0;
}

h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #999;
	font-size: 18px;
	margin-top: 5px;
}

form {
	margin-top: 60px;
}

input.form-control , input[type="submit"] , .btn {
	border-radius: 0px;
}

.btn {
	transition: all ease-in-out 0.2s;
}

.credits {
	margin-top: 100px;
	color: #999;
	font-size: 12px;
}

.credits a {
	color: inherit;
}

Quelques particularités du CSS :

  • C'est sur .main qu'est placée notre image. Nous la plaçons en haut à droite, sans qu'elle se répète.
  • .main a un background-size en contain. De cette façon, l'image s'affiche dans son ensemble et s'adapte à la taille de .main.
  • Par contre, cette image prend trop de place lorsque l'écran rétrécit. En utilisant les media queries, nous la faisons donc disparaître en ré appliquant un background white.
  • J'écrase volontairement les habituels border-radius des input mis en place par Bootstrap pour avoir un style plus "Flat".
  • J'ajoute aussi une petite transition sur le bouton pour améliorer l'effet au hover.

Et voilà ! Vous avez désormais une interface de connexion épurée avec une belle image, qui fera certainement son effet ! N'hésitez pas à utiliser les commentaires ci-dessous si vous souhaitez une précision ou pour apporter une amélioration.


Avec les BsHelpers pour CakePHP

Pour ceux qui travaillent avec CakePHP, voici ci-dessous le code permettant de réaliser cette interface à l'aide du BsHelper et du BsFormHelper, tous deux contenus dans le plugin BsHelpers, développé par mon agence.

Il y a 2 fichiers à créer, un layout et une vue. Le fichier CSS est identique.

La layout :


echo 
	$this->Bs->html('Mon application' , 'Connexion à mon application').
	$this->Bs->css(array('app' , 'http://fonts.googleapis.com/css?family=Open+Sans:400,300' , 'http://fonts.googleapis.com/css?family=Lato:400,700,300')).
	$this->Bs->js().
	$this->Bs->body().
	$this->fetch('content').
	$this->Bs->end();

La vue :


// les largeurs de div du formulaire sont réglées dès le début
$this->BsForm->setRight(8);
$this->BsForm->setLeft(0);

// Les différentes fonctions du BsHelpers qui vont permettre de créer l'interface
echo $this->Bs->container().
	 $this->Bs->row().
	 $this->Bs->col('xs12').

		'<div class="main">'.

			$this->Bs->row().
			$this->Bs->col('xs12' , 'sm6 of1').
	 
				'<h1>Ma machine à écrire</h1>'.
				'<h2>Tous vos textes en un seul endroit</h2>'.

				// Le Formulaire
				$this->BsForm->create('User' , array('action' => 'login')).
				$this->BsForm->input('username' , array('label' => false , 'placeholder' => 'Idenfiant')).
				$this->BsForm->input('password' , array('label' => false , 'placeholder' => 'Mot de passe')).
				$this->BsForm->submit('Connexion' , array('class' => 'btn btn-success')).
				$this->BsForm->end().

				'<p class="credits">Développé par <a href="http://www.monsite.com" target="_blank">une super agence</a>.</p>'. 
	 
		$this->Bs->close(2).
	
	'</div>'.

$this->Bs->close(3);

Quelques précisions sur cette vue :

  • Pour la fermeture des différentes div, nous utilisons la fonction close pour les div liées à la structure de la grille de Bootstrap et nous laissons </div> pour .main, pour mieux se repérer visuellement dans le code. Un seul $this->Bs->close(6) aurait aussi pu être utilisé.
  • Pour le formulaire, nous passons l'option label à false et renseignons simplement l'option placeholder à la place.

C'est tout, notre interface est prête et fonctionnelle au sein de notre application CakePHP. Si vous souhaitez en savoir plus sur les utilisations possibles des BsHelpers, je vous invite à découvrir nos différents tutoriels.

Si ce tutoriel vous a plu, sachez que je suis entrain d'écrire un livre sur CakePHP, et que celui-ci présentera le développement complet d'une application web.

Et n'hésitez pas à utiliser les commentaires ci-dessous pour toute question ! Merci.


← Retour