搜尋
首頁php教程PHP开发Laravel實現用戶註冊與登入

Laravel身為最優雅的PHP框架,許多學習PHP的朋友造就對Laravel垂涎欲滴。今天就來實現你的願望,讓我們一起從零開始,利用Laravel實現Web應用最常見的註冊和登入功能!所有的課程源碼都放在Github上:laravel-start. Race Start !

首先我們來明確一下我們這個課程需要的東西:

Laravel 4.2
Bootstrap 3.3
Laravel就是我們關心的核心部分,Bootstrap用來快速設定一些前端的CSS樣式。

1.安裝Laravel

簡單說明之後我們來進入下一步,安裝Laravel,在這我們是透過Composer來安裝,打開命令列終端,執行:

cd Sites

Sites就是web應用的根目錄,你可以根據需要換成自己的根目錄,然後再執行:

composer create-project laravel/laravel laravel

laravel就是你的應用目錄名,你可以取一個你喜歡的名字。執行上面的指令之後,等一段時間(畢竟在國內,網速是個大坑),安裝完以後你會得到這一堆目錄:

Laravel實現用戶註冊與登入

我們主要操作models和controllers和views這三個目錄:這就是MVC的構成啊!

2.安裝Bootstrap

然後再命令列執行:

cd laravel/public/packages

這裡的laravel與上面的應用目錄對應,如果你在安裝的時候用了其他的名字,請對應換上。來到packages這個目錄後安裝Bootstrap,直接在命令列執行:

bower install bootstrap

這個比較快,然後等這個下載完之後你就會得到最新的穩定版Bootstrap。在目錄packages目錄下的 bower_components/bootstrap/dist/這裡就包含了Bootstrap的css,js,fonts這三個我們在開發過程中常用到的樣式文件,js和字體檔案。成功後你將會看到這個:

Laravel實現用戶註冊與登入

註:這裡使用的bower這個工具,它負責管理一些前端的套件。
到這裡,我們的前期工作已經準備好了。不過在進入下一步之前,我們得先確保我們的laravel/app/storage目錄有相應的寫入權限,所以回到laravel目錄,如果你在安裝完bower之後沒動過命令行,可以直接通過:

cd ../../

回到laravel目錄,然後在執行:

chmod -R 755 app/storage

這一步搞定之後我們就可以進入真正的開發階段了。

3.配置資料庫並建立表格:

在開始設定之前,我們要為我們的laravel應用程式建立一個資料庫,我將它命名為laravel-start,

Laravel實現用戶註冊與登入

然後在編輯器中開啟app/ config/database.php文件,對對應的資料庫設定項填入,如:

'default' => 'mysql',
// 数据库连接
'connections' => array(
    'mysql' => array(
        'driver'    => 'mysql',
        'host'      => '127.0.0.1',
        'database'  => 'laravel-start',
        'username'  => 'root',
        'password'  => '',
        'charset'   => 'utf8',
        'collation' => 'utf8_unicode_ci',
        'prefix'    => '',
    ),

連接完資料庫之後,還得建立一個Users表,你可以直接在資料庫中建立Users表,也可以利用Laravel的artisan來創建,這裡我們使用Laravel的artisan來建造表,順道了解一點點關於Laravel migrate的知識。執行下面語句:

php artisan migrate:make create-users-table
以上指令會建立一個migrate檔(檔案位於app/database/migrations目錄下),這個檔案的名字就是create-users-table,然後我們可以透過編輯剛剛產生的migrate檔案來建立Users表。

public function up() {
       Schema::create('users', function($table){
        $table->increments('id');
        $table->string('username', 20);
        $table->string('email', 100)->unique();
        $table->string('password', 64);
        $table->string('remember_token',62)->default('default');
        $table->timestamps();
        });
}

上面的方法使用了laravel的Schema Builder類,上面這段程式碼使用up()方法的建立一個users表,這個表裡有5個欄位:id自增,username長度20以內,email長度100以內而且是唯一的,password長度64以內,remember_token是為了在登入的時候更方便實用,Laravel會自動將token值填滿進來,但在最開始你必須設一個預設值,timestamp當前的時間戳。在這我們要注意的一點是:最好在down()加上下面的程式碼,以防某天我們需要刪除Users這個表。

public function down()
{
    Schema::drop('users');
}

上面的都做好以後,執行一下下面這一句神奇的命令:

php artisan migrate

有圖有真相:

Laravel實現用戶註冊與登入

終於,我們的前奏搞完了,可以正式來魯Laravel了。

4.啟動服務來試試

直接在laravel目錄執行:

php artisan serve

打開瀏覽器,輸入localhost:8000,回車,Bingo!
OK,先給自己三十秒的掌聲時間,如果你順利地走到了這一步的話。恭喜你,你已經進入Laravel的大門,更多驚喜我們再一一道來.....

5.創建公用視圖

好了,我们现在开始了,首先在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>

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>

没错,就是在原来的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>

上面只是引用了一些简单的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>

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

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

@if(conditions) 
#code...
@endif

到这里就结束了么?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>

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

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

body {
     padding-top: 60px;
 } 
.form-signup, .form-signin {
     margin: 0 auto;
 }

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境