Use laravel to build a blog site-blog registration function

table of Contents

Preface

Last time we have completed the preparation of the left sidebar of the blog, then here we need to complete the blog registration function, and store the registered form content in the user data table. So don't talk nonsense, let's start to realize the registration function.

Write a registration page

We need a registration form page so that we can perform the following operations. So now we go directly to the Internet to find the source code of a registration page, which looks like this after a little modification.

Insert picture description here


This registration and login are the same, so next we need to get the user's input, and then store it in the ledger, oh yes, the code is for you first.
html:


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>翻转的登录注册页面演示</title>
    <link rel="stylesheet" href="{{ asset('/css/bootstrap.min.css') }}">
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <link rel="stylesheet" href="{{ asset('/css/registerLogin.css') }}">
</head>

<body>
<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="/register" method="post">
{{--            提交地址 这里写的是定义的跳转到控制器的路由 --}}
            {{ csrf_field()}}
{{--        令牌字段不写这个后面会获取不到数据       --}}
            <h1>注册</h1>
            <input type="text" placeholder="用户名" name="user_name" required>
            <input type="email" placeholder="邮箱" name="user_email" required>
            <input type="password" placeholder="密码" name="user_password" required>
            <input type="password" placeholder="确认密码" name="confirm_password" required>
            <input type="password" placeholder="手机号码" name="photo" required>
            <button>注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="/login" method="post">
            {{ csrf_field()}}
            <h1>登录</h1>
            <input type="text" placeholder="用户名" name="user_name" required>
            <input type="password" placeholder="密码" name="user_password" required>
            <button>登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来</h1>
                <p>与我们保持联系请登录您的个人信息</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>欢迎光临</h1>
                <p>输入您的个人资料,并与我们一起开始旅程</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script>
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const container = document.getElementById('container');


    signUpButton.addEventListener('click', () => {
        container.classList.add("right-panel-active");
    });


    signInButton.addEventListener('click', () => {
        container.classList.remove("right-panel-active");
    });
</script>

</body>


</html>

css:



* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    /*background: #f6f5f7;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /*margin: -20px 0 50px;*/
    background-color: #1f2029;
    background-size: cover;
}

h1 {
    font-weight: bold;
    margin: 0;
    color: beige;
}

p {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
    color: beige;
}

a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

.container {
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    position: absolute;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
    opacity: 0.8;
}

.form-container form {
    background: rgba(45, 52, 54, 1.0);
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}


.form-container input {
    background: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

button {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background: #ff4b2b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

input[type=text] {
    width: 240px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    font-family: 'PLay', sans-serif;
    font-size: 16px;
    font-weight: 200px;
    padding: 10px 0;
    transition: border 0.5s;
    outline: none;
    color: #fff;
    font-weight: bold;
}

input[type=password] {
    width: 240px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    font-family: 'PLay', sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    transition: border 0.5s;
    outline: none;
    color: #fff;
}

input[type=email] {
    width: 240px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    font-family: 'PLay', sans-serif;
    font-size: 16px;
    font-weight: 200px;
    padding: 10px 0;
    transition: border 0.5s;
    outline: none;
    color: #fff;
    font-weight: bold;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: :none;
}

button.ghost {
    background: transparent;
    border-color: #ff4b2b;
    background-color: #ff4b2b
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.overlay {
    background: transparent;
    background: linear-gradient(to right, #ff4b2b, #ff416c) no repeat 0 0 /cover;
    color: #fff;
    position: absolute;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.overlay-left {
    transform: translateX(-20%);
}

/*....Animation....*/

/*....Move signin to the right....*/
.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

/*....Move overlay to the left....*/
.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

/*....Bring sign up over sign in....*/
.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

/*...Move overlay back to right....*/
.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

Write a registration controller

Next, we need to store the content entered by the user into the database through the controller, so where should the controller be written?

Create a new Admin folder

Our controllers are written in app/Http/Controllers, and we will create a new Admin folder in this folder.

Create a new Admin.php file

It is used to manage the related operations of the Admin user, then we write a file in this folder called Admin.php The file is written as follows. Don't make any mistakes about use.
Then the content inside is like this

<?php
namespace App\Http\Controllers\Admin;
//命名空间
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Model\User;
//使用数据库模型
class Admin extends Controller{
//    这里的类名需要和命名空间对应,和文件名对应
   public function register(Request $res ){
       
   }
}

Modify the database configuration file

If we want to operate the database, we need to modify the configuration file of the database, which is in the .env file under the project root directory

DB_CONNECTION=mysql //是哪个数据库 mysql还是oracle
DB_HOST=127.0.0.1 //链接地址
DB_PORT=3306 // 数据库端口号
DB_DATABASE=blog  //数据库名
DB_USERNAME=root  //用户名
DB_PASSWORD=****** //密码

So here our database configuration file is modified, but in order to better operate the database we also need to write a database model.

Write a database model

We create a Model folder in the app directory and create a User.php file in it to manipulate the blog_user table. In this, we can set the whitelist, blacklist, and auto-add time for the fields. As for why there is no such Model The folder is because different people have different understandings of the definition of the model, so we need to define a database model ourselves. So next, we will go directly to the code.

<?php
namespace App\Model;
use Illuminate\Database\Eloquent\Model;
class User extends Model{
    protected $table='blog_user';
    // 允许编辑的字段(白名单)
    protected $fillable = ['user_name','user_nickname','user_email','user_password','user_phone','user_profile_photo'];
    protected $dateFormat='U';
}

So here our database model has been completed, so next we are in the controller, below is the code of the controller. Not much nonsense, go directly to the code.

<?php
namespace App\Http\Controllers\Admin;
//命名空间
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Model\User;
//使用数据库模型
class Admin extends Controller{
//    这里的类名需要和命名空间对应,和文件名对应
   public function register(Request $res ){
       // 获取用户输入的值
       $all=$res->all();
       if($all["user_password"]==$all["confirm_password"]){
           $data=[
               "user_name"=>$all["user_name"],
               "user_email"=>$all["user_email"],
               "user_password"=>$all["user_password"],
               "user_telephone_number"=>$all["user_telephone_number"],
               "user_ip"=>$res->ip()
           ];
           // 执行注册
           $u=User::create($data);
           if($u){
               return view('Admin.registerLogin');
           }
           return '注册失败';
       }
       else{
           return '密码输入不一致';
       }
   }
}

So is this all right? Not yet, we have to write a route to access the controller.

Write controller routing

We need to access the controller through routing, and then we will write the controller routing, this time we use routing group to write.
Then go directly to the code:

Route::group(['namespace' => 'Admin','prefix' => 'admin'],function (){
//    namespace 命名空间 prefix 路由前缀 需要加上前缀才能访问 例如 admin/detail
//    如果需要访问控制器的话一定要写 命名空间 与之对应
    Route::post('/register','[email protected]');
});

Then if there is a prefix in the routing group, the address of our previous form submission will need to be modified to /admin/register. Only then can it succeed, otherwise the page will not be found and a 404 error will be reported.

Test registration function

Enter the test data and click register.

Insert picture description here


After the registration is complete, return to whether the registration was successful, and a prompt box will pop up.

Insert picture description here


Now come to the database to see if it is actually stored in the database.

Insert picture description here


The data is inserted successfully.

Conclusion

Our current registration function has been implemented, so we will need to implement the login function later.
Originality is not easy, a lot of support.

Insert picture description here