Maison > php教程 > PHP开发 > Laravel implémente l'enregistrement et la connexion des utilisateurs

Laravel implémente l'enregistrement et la connexion des utilisateurs

高洛峰
Libérer: 2016-12-27 10:43:53
original
3552 Les gens l'ont consulté

Laravel est le framework PHP le plus élégant. De nombreux amis qui apprennent PHP convoitent Laravel. Venez réaliser votre souhait aujourd'hui. Partons de zéro et utilisons Laravel pour implémenter les fonctions d'enregistrement et de connexion les plus courantes des applications Web ! Tous les codes sources du cours ont été placés sur Github : laravel-start.

Tout d'abord, clarifions ce dont nous avons besoin pour ce cours :

Laravel 4.2
Bootstrap 3.3
Laravel est la partie essentielle qui nous intéresse, et Bootstrap est utilisé pour définir rapidement certains styles CSS front-end.

1. Installer Laravel

Après une brève explication, passons à l'étape suivante et installons Laravel. Ici, nous l'installons via Composer et exécutons :

cd Sites
Copier après la connexion

Sites est le répertoire racine de l'application Web Vous pouvez le remplacer par votre propre répertoire racine selon vos besoins, puis exécuter :

composer create-project laravel/laravel laravel
Copier après la connexion

Laravel est le nom de votre répertoire d'application. pouvez choisir celui que vous aimez. Après avoir exécuté la commande ci-dessus, attendez un moment (après tout, la vitesse d'Internet est un gros problème en Chine). Après l'installation, vous obtiendrez cet ensemble de répertoires :

Laravel implémente lenregistrement et la connexion des utilisateurs

. Nos principales opérations Trois répertoires : modèles, contrôleurs et vues : telle est la composition de MVC !

2. Installez Bootstrap

puis exécutez-le depuis la ligne de commande :

cd laravel/public/packages
Copier après la connexion

Le laravel ici correspond au répertoire de l'application ci-dessus si vous avez utilisé d'autres méthodes pendant. installation, veuillez remplacer le nom en conséquence. Accédez au répertoire des packages pour installer Bootstrap et exécutez-le directement sur la ligne de commande :

bower install bootstrap
Copier après la connexion

C'est plus rapide, et une fois téléchargé, vous obtiendrez la dernière version stable de Bootstrap. Bower_components/bootstrap/dist/ dans le répertoire packages contient les fichiers css, js et polices de Bootstrap, trois fichiers de style, js et des fichiers de polices que nous utilisons souvent pendant le processus de développement. Après succès, vous verrez ceci :

Laravel implémente lenregistrement et la connexion des utilisateurs

Remarque : L'outil bower utilisé ici est chargé de gérer certains packages front-end.
À ce stade, nos travaux préliminaires sont prêts. Mais avant de passer à l'étape suivante, nous devons d'abord nous assurer que notre répertoire laravel/app/storage dispose des autorisations d'écriture correspondantes, donc revenez au répertoire laravel Si vous n'avez pas touché la ligne de commande après avoir installé bower, vous pouvez directement passer : <. 🎜>

cd ../../
Copier après la connexion
Retournez dans le répertoire laravel, puis exécutez :

chmod -R 755 app/storage
Copier après la connexion
Une fois cette étape terminée, nous pouvons entrer dans la véritable étape de développement.

3. Configurez la base de données et créez des tables :

Avant de démarrer la configuration, nous devons créer une base de données pour notre application laravel, je l'ai nommée laravel-start,

.

Laravel implémente lenregistrement et la connexion des utilisateurs

Ouvrez ensuite le fichier app/config/database.php dans l'éditeur et renseignez les éléments de configuration de la base de données correspondants, tels que :

&#39;default&#39; => &#39;mysql&#39;,
// 数据库连接
&#39;connections&#39; => array(
    &#39;mysql&#39; => array(
        &#39;driver&#39;    => &#39;mysql&#39;,
        &#39;host&#39;      => &#39;127.0.0.1&#39;,
        &#39;database&#39;  => &#39;laravel-start&#39;,
        &#39;username&#39;  => &#39;root&#39;,
        &#39;password&#39;  => &#39;&#39;,
        &#39;charset&#39;   => &#39;utf8&#39;,
        &#39;collation&#39; => &#39;utf8_unicode_ci&#39;,
        &#39;prefix&#39;    => &#39;&#39;,
    ),
Copier après la connexion
Après vous être connecté à la base de données, Vous devez également créer une table Utilisateurs. Vous pouvez créer la table Utilisateurs directement dans la base de données, ou vous pouvez utiliser l'artisan de Laravel pour la créer. Ici, nous utilisons l'artisan de Laravel pour construire la table et en apprendre un peu plus sur la migration de Laravel. Exécutez l'instruction suivante :

php artisan migrate:make create-users-table

La commande ci-dessus créera un fichier migrate (le fichier se trouve dans le répertoire app/database/migrations). ce fichier est create-users -table, nous pouvons alors créer la table Users en éditant le fichier migrate que nous venons de générer.

public function up() {
       Schema::create(&#39;users&#39;, function($table){
        $table->increments(&#39;id&#39;);
        $table->string(&#39;username&#39;, 20);
        $table->string(&#39;email&#39;, 100)->unique();
        $table->string(&#39;password&#39;, 64);
        $table->string(&#39;remember_token&#39;,62)->default(&#39;default&#39;);
        $table->timestamps();
        });
}
Copier après la connexion
La méthode ci-dessus utilise la classe Schema Builder de Laravel. Le code ci-dessus utilise la méthode up() pour créer une table d'utilisateurs. Il y a 5 champs dans cette table : id auto-incrément, longueur du nom d'utilisateur 20 Within. , la longueur de l'e-mail est inférieure à 100 et est unique, la longueur du mot de passe est inférieure à 64, Remember_token est pour plus de commodité et de praticité lors de la connexion, Laravel remplira automatiquement la valeur du jeton, mais au début, vous devez définir une valeur par défaut, un horodatage horodatage actuel. Une chose à laquelle nous devons prêter attention ici est la suivante : il est préférable d'ajouter le code suivant à down() au cas où nous aurions besoin de supprimer la table Users un jour.

public function down()
{
    Schema::drop(&#39;users&#39;);
}
Copier après la connexion
Après avoir fait ce qui précède, exécutez la commande magique suivante :

php artisan migrate
Copier après la connexion
Il y a des images et la vérité :

Laravel implémente lenregistrement et la connexion des utilisateurs

Enfin, nous avons terminé le prélude et pouvons officiellement venir à Laravel.

4. Démarrez le service et essayez-le

Exécutez directement dans le répertoire laravel :

php artisan serve
Copier après la connexion
Ouvrez le navigateur, entrez localhost:8000, appuyez sur Entrée, Bingo !

OK, accordez-vous d'abord trente secondes d'applaudissements, si vous avez réussi à atteindre ce point. Félicitations, vous avez franchi la porte de Laravel, nous arriverons avec plus de surprises une par une...

Créez une vue publique

.

好了,我们现在开始了,首先在app/views/文件夹下创建一个layouts文件夹,再再这个文件夹下新建一个php文件,命名为main.blade.php,在这个文件里写上下面这些代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现Laravel 4之美</title>
    </head>
    <body>
    </body>
</html>
Copier après la connexion

PS:layouts文件夹通常用来存放视图文件的功用部分,比如一些网页的头部

和尾部
,这里就是存放了头部
部分
感觉main.blade.php的名字很奇怪?不用担心,Laravel的视图文件命名遵循filename.blade.php的规则,因为Laravel是用Blade这个模板引擎解析的,你不用深究,就照着上面的名字规则来命名视图文件就OK

为视图文件添加CSS样式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现Laravel 4之美</title>
       {{HTML::style(&#39;packages/bower_components/bootstrap/dist/css/bootstrap.min.css&#39;) }}
        {{ HTML::style(&#39;css/main.css&#39;)}}
    </head>
    <body>
    </body>
</html>
Copier après la connexion

没错,就是在原来的main.blade.php的基础上添加两行代码;然后我们来创建我们的main.css,这个主要是用来放我们自己定义的样式。在public文件夹下创建css文件夹,在css文件夹创建main.css文件,大功告成。

添加导航栏。在main.blade.php文件的标签中加上以下代码:

<body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand hidden-sm" href="/">Laravel新手上路</a>
                </div>
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li>{{ HTML::link(&#39;users/register&#39;, &#39;注册&#39;) }}</li>
                    <li>{{ HTML::link(&#39;users/login&#39;, &#39;登陆&#39;) }}</li>
                </ul>
            </div>
        </div>
</body>
Copier après la connexion

上面只是引用了一些简单的Bootstrap的class,也没什么难的,不用伤心。

到这里基本的功用部分就结束了,但是我们的追求从不会这么low,所以为了更好地与用户交互,我们希望在用户进行某个操作之后给出一些反馈,比如注册成功的时候说:少年,你已成功注册本站,恭喜恭喜。等,于是乎,我们再为main.blade.php添加一点点代码:

        <div class="container">
            @if(Session::has(&#39;message&#39;))
            <p class="alert">{{ Session::get(&#39;message&#39;) }}</p>
            @endif
        </div>
Copier après la connexion

为了现实这些反馈信息给用户,我们得使用Session::get('message')方法,当然,我们得首先从逻辑上判断一下这个message是否存在,所以这里用了一个简单的if判断。

在blade引擎的视图中if 的使用格式是

@if(conditions) 
#code...
@endif
Copier après la connexion

到这里就结束了么?NO,如果到这里就结束的话,其他的视图文件是怎么插入main.blade.php的之间的呢?所以,不要忘了还有一个重要的事:{{ $content }},于是乎,上面的代码就变成了这样:

        <div class="container">
        @if(Session::has(&#39;message&#39;))
        <p class="alert">{{ Session::get(&#39;message&#39;) }}</p>
        @endif
        {{ $content }}
        </div>
Copier après la connexion

{{ $content }}在这里就是表示其他的视图文件内容,你可以在理解上将其他的视图当作一个字符串来理解,只不过这个字符串很长,而且恰好包含了HTML标签而已。下面你将体会到这种想法。

创建完我们的公用视图main.blade.php后,我们先来为main.css添加我们的CSS样式:

body {
     padding-top: 60px;
 } 
.form-signup, .form-signin {
     margin: 0 auto;
 }
Copier après la connexion

因为我们在main.blade.php文件中使用了

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal