Modèle de connexion PHP-tutoriel php-php.cn

Modèle de connexion PHP

王林

Libérer： 2024-08-29 13:14:18

original

854 Les gens l'ont consulté

Dans cet article, nous découvrirons le modèle de connexion PHP. Dès que nous parlons d’une application Web, nous avons besoin d’une page de connexion pour y accéder. C'est l'une des conditions de base pour avoir la page de connexion. La page de connexion est l'une des pages obligatoires dont l'accès est restreint dans n'importe quelle application Web. La plupart de la page de connexion ne contient que les deux champs. Habituellement, le nom d’utilisateur est considéré comme le premier champ et le second sera celui du mot de passe. Il n’y a pas d’opinion fixe sur le modèle de page de connexion. Nous pouvons utiliser n'importe quel modèle de page de connexion selon nos besoins commerciaux.

PUBLICITÉ Cours populaire dans cette catégorie DEVELOPPEUR PHP - Spécialisation | Série de 8 cours | 3 tests simulés

Commencez votre cours de développement de logiciels libres

Développement Web, langages de programmation, tests de logiciels et autres

Syntaxe :

En ce qui concerne la syntaxe de la page de connexion, il n'y a pas de règle empirique à suivre lorsque vous travaillez sur la conception de la page de connexion. Dans cet article, nous verrons quelques exemples de modèle de connexion. Si nous demandons à 5 personnes de proposer un modèle de page de connexion ou un design, elles pourraient en proposer 5 différents car il n'existe aucune norme industrielle en ce qui concerne son apparence. Ainsi, dans les sections à venir, nous verrons la vue progressive du modèle de page de connexion et comment nous pouvons également créer cette page.

Comment ça marche ?

Toute page de connexion en PHP n'est pas possible en utilisant uniquement PHP. Un modèle de connexion PHP combine les différentes autres technologies comme JavaScript, HTML, CSS, base de données MySql, etc. Voyons maintenant le rôle de chaque entité une par une.

HTML : HTML est l'un des éléments de base de toute page Web de l'application. Les informations requises sur la page de connexion seront écrites dans ce HTML uniquement.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="margin-left: 20%; margin: 5%;">
<form method="post" action="" name="login_form">
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<br>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<br>
<button type="submit" name="Login" value="Login">Login</button>
</form>
</body>
</html>

Copier après la connexion

Sortie :

Modèle de connexion PHP

Nous pouvons constater que l'apparence et l'interface utilisateur de cette page ne sont pas suffisamment professionnelles pour que nous puissions avancer.

CSS : CSS est encore une fois le besoin le plus fondamental dans l'application Web. Nous pouvons utiliser ce CSS pour embellir notre page de connexion. Nous disposons de diverses options disponibles dans le CSS que nous pouvons utiliser pour donner un aspect professionnel à la page de connexion ci-dessus. On peut utiliser la couleur de fond du formulaire. Nous pouvons utiliser la bordure du formulaire et diverses autres choses connexes.
JavaScript/jQuery : Un JavaScript est l'un des scripts que nous pouvons utiliser pour la validation côté client. Nous pouvons utiliser JavaScript pour afficher le message d'erreur selon les besoins de notre entreprise. Par exemple, nous pouvons arrêter l'envoi du formulaire si l'un des champs (nom d'utilisateur, mot de passe ou les deux) n'est pas rempli. C'est encore une valeur ajoutée si nous utilisons JavaScript ou jQuery lors du codage de la page de connexion.

Tout ce qui précède est suffisant pour concevoir une page de connexion. Mais si nous voulons traiter avec la connexion complète, nous devons également disposer du PHP et d'une base de données (MYSQL ou autre).

Exemples d'implémentation du modèle de connexion PHP

Maintenant, il est temps de voir différents exemples de pages de connexion. Nous avançons avec le même code HTML mentionné ci-dessus. Nous verrons différents modèles utilisant le code ci-dessus ou apportant quelques modifications au code ci-dessus.

Exemple n°1

Code :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{margin-left: 30%; margin-top: 5%; max-width: 350px;}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
color: blue;
font-size: larger;
border: 1px solid red;
padding: 7px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
background: red;
margin-left: 110px;
padding: 11px;
color: #fff;
}
label{font-weight: 900;}
</style>
</html>

Copier après la connexion

Sortie :

Modèle de connexion PHP

Exemple n°2

Dans ce modèle de page de connexion, nous verrons le plus interactif par rapport au précédent. Nous utiliserons du CSS plus avancé.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h4>Welcome to the Website!</h4>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{
margin-left: 30%;
margin-top: 5%;
max-width: 350px;
background: #c0c078;
}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
font-size: larger;
border: 1px dotted #3406ed;
padding: 10px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
margin-left: 132px;
padding: 7px;
color: red;
}
label{font-weight: 900;}
h4{text-align: center; text-decoration: underline;}
</style>
</html>

Copier après la connexion

Sortie :

Modèle de connexion PHP

Exemple #3

Dans cet exemple, nous verrons la présentation différente des deux pages de connexion ci-dessus.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<h2>Welcome </h2>
<input type="text" name="username" id="username" placeholder="Username" required />
<input type="password" name="password" id="password" placeholder="Password" required />
<input type="submit" id="submit" value="Let me in" />
</div>
</form>
</body>
<style>
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height:100%;
background: #465151;
}
h2{
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
letter-spacing: 1px;
text-align: center;
}
input {
width: 100%;
line-height: 4;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
#submit{
background-color: #4a77d4;
padding: 25px 14px;
font-size: 15px;
line-height: normal
}
form#login_form {
width: 30%;
margin-left: 30%;
margin-top:100px;
}
::placeholder {
color:#fff;
font-size: 18px;
padding-left: 20px;
}
</style>
</html>

Copier après la connexion

Sortie :

Modèle de connexion PHP

Conclusion

La page de connexion PHP est l'une des choses requises en cette ère de révolution numérique. Puisqu'il n'existe aucune norme pour créer un modèle de page de connexion, nous pouvons donc aller de l'avant avec n'importe quel modèle selon nos besoins commerciaux. Il est toujours conseillé d'utiliser la validation côté client avant de publier toute demande de page de connexion sur le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!