Accueil
![http://www.singledark.free.fr [OFFLINE]](https://2img.net/s/t/13/15/90/i_icon_www.gif){kind=icon}
![[Exercice][1] Connexion à un site Empty](https://2img.net/i/empty.gif)
par Voilà, lors de la réalisation d'un site web et selon l'envie du webmaster, il va y avoir une zone membre. Et pour accéder à cette zone, il va bien falloir que l'utilisateur se connecte.
Dans cette exercice, le premier d'une longue serie, nous allons donc voir le système de connexion. Alors attention nous allons faire le plus simple possible. Pas de sécurisation dans tous les sens, y va pas y en avoir.
Pourquoi ?
Parce que il faut bien commencer par quelque part, et vous bourré le crane avec le 'NEVER TRUST USER INPUT' c'est pas cool, du moins au début. Le but de l'exercice n'est pas de sécuriser votre site, mais uniquement a faire un bon & beau système de connexion...
Selon moi cela reste une chose bien simple, voici comme va se passer cette exercice.
A la fin de ce topic vous pourrez trouvez un gabarit HTML, ainsi que d'autre ressources qui vont vous permettre de réaliser cette exercice dans de bonne conditions.
J'explique vaguement le système de connexion, libre à vous de le faire à votre sauce.
L'utilisateur remplit un formulaire de connexion, ensuite le script vérifie qu'il s'agit de la bonne personne et le connecte au site. Pour cela je vous conseil d'utiliser les _SESSION.
Je rappel qu'il ne faut faire que la parti connexion, pas besoin de faire un truc d'inscription, n'y de page de profil ou autre mais uniquement le connexion, bien entendu il faut aussi quelque chose pour savoir qu'on est connectée comme un p'tit message 'Bonjour Invité'...
Voili, Voilou, faite chauffer vos clavier et en avant Guingamp...
Code HTML : Gabarits HTML et CSS simples
Base.css
Modele04.css
Base de travail MySql :
Merci de ne pas modifier le copyright
[EDIT] Je me suis vite rendu compte, quand j'étais en train de faire le script, que la sécurité c'était pas sa du tout.
Mais comme je l'es annoncé plus haut, je vous déconseille de l'utiliser sur votre site web. Dans un prochain exercice nous allons voir comme augmenté la sécurité pour un tel genre de script...
Dans cette exercice, le premier d'une longue serie, nous allons donc voir le système de connexion. Alors attention nous allons faire le plus simple possible. Pas de sécurisation dans tous les sens, y va pas y en avoir.
Pourquoi ?
Parce que il faut bien commencer par quelque part, et vous bourré le crane avec le 'NEVER TRUST USER INPUT' c'est pas cool, du moins au début. Le but de l'exercice n'est pas de sécuriser votre site, mais uniquement a faire un bon & beau système de connexion...
Selon moi cela reste une chose bien simple, voici comme va se passer cette exercice.
A la fin de ce topic vous pourrez trouvez un gabarit HTML, ainsi que d'autre ressources qui vont vous permettre de réaliser cette exercice dans de bonne conditions.
J'explique vaguement le système de connexion, libre à vous de le faire à votre sauce.
L'utilisateur remplit un formulaire de connexion, ensuite le script vérifie qu'il s'agit de la bonne personne et le connecte au site. Pour cela je vous conseil d'utiliser les _SESSION.
Je rappel qu'il ne faut faire que la parti connexion, pas besoin de faire un truc d'inscription, n'y de page de profil ou autre mais uniquement le connexion, bien entendu il faut aussi quelque chose pour savoir qu'on est connectée comme un p'tit message 'Bonjour Invité'...
Voili, Voilou, faite chauffer vos clavier et en avant Guingamp...
Code HTML : Gabarits HTML et CSS simples
- Spoiler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Exercice By Single Dark
</title>
<!-- La feuille de styles "base.css" doit ée appeléen premier. -->
<link rel="stylesheet" type="text/css" href="base.css" media="all" />
<link rel="stylesheet" type="text/css" href="modele04.css" media="screen" />
</head>
<body>
<div id="global">
<div id="entete">
<h1>
Exercice
</h1>
<p class="sous-titre">
<strong>By Single Dark</strong>
</p>
</div><!-- #entete -->
<div id="navigation">
<ul>
<li><a href="index.php">Accueil</a></li>
</ul>
</div><!-- #navigation -->
<div id="contenu">
Voilà, lors de la réalisation d'un site web et selon l'envie du webmaster, il va y avoir une zone membre. Et pour accéder à cette zone, il va bien falloir que l'utilisateur se connecte.<br />
<br />
Dans cette exercice, le premier d'une longue serie, nous allons donc voir le système de connexion. Alors attention nous allons faire le plus simple possible. Pas de sécurisation dans tous les sens, y va pas y en avoir.<br />
<br />
Pourquoi ?<br />
<br />
Parce que il faut bien commencer par quelque part, et vous bourré le crane avec le 'NEVER TRUST USER INPUT' c'est pas cool, du moins au début. Le but de l'exercice n'est pas de sécuriser votre site, mais uniquement a faire un bon & beau système de connexion...<br />
<br />
Selon moi cela reste une chose bien simple, voici comme va se passer cette exercice.<br />
<br />
A la fin de ce topic vous pourrez trouvez un gabarit HTML, ainsi que d'autre ressources qui vont vous permettre de réaliser cette exercice dans de bonne conditions.<br />
<br />
J'explique vaguement le système de connexion, libre à vous de le faire à votre sauce.<br />
<br />
L'utilisateur remplit un formulaire de connexion, ensuite le script vérifie qu'il s'agit de la bonne personne et le connecte au site. Pour cela je vous conseil d'utiliser les _SESSION.<br />
<br />
<br />
Je rappel qu'il ne faut faire que la parti connexion, pas besoin de faire un truc d'inscription, n'y de page de profil ou autre mais uniquement le connexion, bien entendu il faut aussi quelque chose pour savoir qu'on est connectée comme un p'tit message 'Bonjour Invité'...<br />
<br />
Voili, Voilou, faite chauffer vos clavier et en avant Guingamp...<br />
<br />
<br />
</div><!-- #contenu -->
<p id="copyright">
Mise en page © 2008
<a href="http://www.elephorm.com">Elephorm</a> et
<a href="http://www.alsacreations.com">Alsacréations</a>
</p>
</div><!-- #global -->
</body>
</html>
Base.css
- Spoiler:
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS
Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS --- */
/* Page */
html {
font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
margin: 0;
padding: 10px 20px; /* Note -> 2 */
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
font-size: .8em; /* -> 4 */
line-height: 1.25; /* -> 5 */
color: black;
background: white;
}
/* Titres */
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 .5em 0; /* -> 6 */
}
h1, h2 {
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
font-weight: normal; /* -> 7 */
}
h1 {
font-size: 3em; /* -> 8 */
font-style: italic;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}
/* Listes */
ul, ol {
margin: .75em 0 .75em 24px;
padding: 0; /* -> 9 */
}
ul {
list-style: square;
}
li {
margin: 0;
padding: 0;
}
/* Paragraphes */
p {
margin: .75em 0;
}
li p, blockquote p {
margin: .5em 0;
}
/* Citations */
blockquote, q {
font-size: 1.1em;
font-style: italic;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
margin: .75em 0 .75em 24px;
}
cite {
font-style: italic;
}
/* Liens */
a {
color: mediumblue;
text-decoration: underline;
}
a:hover, a:focus {
color: crimson;
}
a img {
border: none; /* -> 10 */
}
/* Divers éléments de type en-ligne */
em {
font-style: italic;
}
strong {
font-weight: bold;
color: dimgray;
}
/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */
pre, code {
font-size: 100%;
font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
width: 90%;
overflow: auto;
overflow-y: hidden;
margin: .75em 0;
padding: 12px;
background: #eee;
color: #555;
}
pre strong {
font-weight: normal;
color: black;
}
#copyright {
margin: 20px 0 5px 0;
text-align: right;
font-size: .8em;
color: #848F63;
}
#copyright a {
color: #848F63;
text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
text-decoration: underline;
}
/* --- NOTES ---
1. Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
pour éviter un bug de redimensionnement du texte dans Internet Explorer.
2. Par défaut, les navigateurs ont un padding (ou, pour certains, un
margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
ne soit complètement collé aux bords de la zone de visualisation du
navigateur lorsqu'on affiche une page «brute», sans mise en forme.
Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
Notez bien que les feuilles de styles des gabarits pourront augmenter
ce retrait, ou bien l'annuler.
3. Voici quelques exemples de collections cohérentes de fontes (propriété
CSS "font-family"):
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif;
4. Taille du texte de base de la page. Dépend de la taille du texte par
défaut du navigateur (souvent 16px), et des réglages de l'utilisateur.
À adapter en fonction de la fonte choisie, et du rendu souhaité.
En général, on utilisera une valeur de base entre .65em et 1em
(ou 65% et 100%).
5. Hauteur de ligne. À adapter en fonction de la fonte choisie, et des
besoins particuliers (lignes de texte longues ou courtes, titre ou
corps de texte...).
6. En général, les styles par défaut des navigateurs font que les marges
en haut et en bas des titres sont équivalentes. Ici, en diminuant la
marge du bas, on cherche à rapprocher le titre du contenu qu'il introduit.
7. Les styles par défaut des navigateurs mettent les titres en gras.
Si on souhaite passer à des caractères «normaux», on doit utiliser
font-size: normal.
8. Pour un élément en "font-size: 3em", la taille du texte sera le triple de
la taille du texte de l'élément parent.
À noter: on aurait pu écrire "font-size: 300%" pour le même résultat.
9. Par défaut, les listes UL et OL ont un retrait à gauche qui peut être,
suivant les navigateurs:
- un padding-left de 40px;
- ou bien un margin-left de 40px.
On met tout le monde d'accord avec une marge à gauche de 24px, et pas
de padding.
10. Les navigateurs donnent souvent aux images placées dans des liens
une bordure disgracieuse. On annule ce style souvent gênant en appliquant
un "border: none" aux images qui se trouvent à l'intérieur d'un lien.
*/
Modele04.css
- Spoiler:
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS --- 04
Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
uniquement les couleurs de fond (propriétés background) et les couleurs
du texte (propriété color).
Pour modifier la disposition des blocs, voir plus bas dans la feuille de
styles la partie «positionnement». */
/* Général */
body {
color: #F0E39E;
background: #2C2F22;
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}
/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}
/* Contenu principal */
#contenu {
color: #363B29;
background: #cbd888;
}
#contenu a {
color: #332510;
}
#contenu a:hover, #contenu a:focus {
color: #6E5122;
}
#contenu strong {
color: #181A12;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 20px 50px; /* Voir -> Note 1 ci-dessous */
}
/* En-tête */
#entete {
padding: 20px 0;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Menu de navigation */
#navigation {
width: 18%;
float: left; /* -> 2 */
}
#navigation ul {
margin: 0;
padding: 20px 10px;
list-style: none;
}
#navigation a {
display: block;
height: 1%; /* -> 3 */
padding: 6px 6px 6px 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
/* Contenu */
#contenu {
margin-left: 20%; /* -> 4 */
margin-bottom: 20px;
padding: 10px 20px;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Mention de paternité */
#copyright {
margin-left: 20%;
}
/* --- NOTES ---
1. Ce gabarit utilise du padding sur l'élément BODY pour créer un retrait
esthétique tout autour du conteneur principal.
Rappel: "padding: 20px 50px;" se lit ainsi:
- padding-top et padding-bottom de 20px;
- padding-left et padding-right de 50px.
2. C'est la propriété "float" qui nous permet de placer deux blocs
côte-à-côte. Notez bien que l'élément flottant (ici, notre menu de
navigation) doit être placé en premier dans le code HTML. Il est
préférable de lui donner une largeur, ce que nous faisons ici avec un
"width: 18%;".
3. Correction d'un bug d'Internet Explorer 6. Voir la dernière partie de
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-
mise-en-forme-du-code-html
Dans l'idéal, on placera ce correctif dans une feuille séparée, appelée
via un commentaire conditionnel visant IE6.
4. Les éléments flottants ne repoussent pas les blocs, mais repoussent
uniquement leur contenu. Pour que notre bloc de contenu principal forme
une colonne distincte du menu, on lui donne donc une marge à gauche de 20%.
Il existe une autre technique pour adapter la largeur d'un bloc aux
flottants qui le précèdent. On pourra lire l'article suivant:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
design-trois-colonnes-positionnement-flottant
*/
Base de travail MySql :
- Spoiler:
--
-- Structure de la table `user`
--
CREATE TABLE IF NOT EXISTS `user` (
`id` smallint(4) unsigned zerofill NOT NULL auto_increment,
`login` varchar(40) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Contenu de la table `user`
--
INSERT INTO `user` (`id`, `login`, `password`) VALUES
(0001, 'Single Dark', 'singledark'),
(0002, 'ptitpunk', 'ptitpunk'),
(0003, 'oimat', 'oimat'),
(0004, 'Darkwarrios', 'darkwarrios'),
(0005, 'Harfangdesneiges', 'harfangdesneiges'),
(0006, 'Berdes1', 'berdes1'),
(0007, 'kolosta', 'kolosta'),
(0008, 'jecth', 'jecth'),
(0009, 'ThunderLord', 'thunderlord'),
(0010, 'Fuchie', 'fuchie'),
(0011, 'Reda.Makhoukh', 'reda.makhoukh'),
(0012, 'spiri', 'spiri'),
(0013, 'Emm@nuel', 'emmanuel'),
(0014, 'Rudy', 'rudy'),
(0015, 'steber', 'steber');
--
-- Copier/Coller ça dans votre phpmyadmin
--
Merci de ne pas modifier le copyright
[EDIT] Je me suis vite rendu compte, quand j'étais en train de faire le script, que la sécurité c'était pas sa du tout.
Mais comme je l'es annoncé plus haut, je vous déconseille de l'utiliser sur votre site web. Dans un prochain exercice nous allons voir comme augmenté la sécurité pour un tel genre de script...
Dernière édition par Single Dark le Mer 9 Sep - 22:25, édité 2 fois
