今回から、CMSを自作する際に必要な機能などを少しずつ紹介していけたらいいなと思います。
その第1弾、「管理画面のログイン機能」の作り方です。


実はこのblanks.siteは管理人が自作したCMSで動いています。
wordpressなどの既存のものを使用してもよかったのですが、自由が効かないですし、そもそもそんなにwordpressなどに詳しくないので、「あれはどうやるのかな?」って調べるだけで半日ぐらいかかってしまいます。

だったら最初から自分でCMS作ったほうが早いんじゃないかな?と思って作ったら、案外すぐできました。

時と場合によってはwordpressなどを使用するほうが良い時ももちろんありますが、完全オリジナルでCMS作れたら、本当に好きなように作れるので結構楽しいです。

では、早速「管理画面のログイン機能」の実装方法を紹介していきます。


階層構造

下記のような階層構造で説明していきます。

  • root
  • ├login.php(ログイン画面)
  • ├dashboard.php(ログイン後の画面)
  • functions
    • └login.php
  • assets
    • js
      • └login.js

ログイン画面

以下はログイン画面(/login.php)のhtmlです。個人的にinput type="submit"はあまり使わないので、buttonを使っています。

/login.php


< ?php session_start(); ?>
 
< ?php if( $_SESSION["error_mess"] == "ERROR"){ echo '

USER NAMEまたはPASSWORDが間違っています

';} if( $_SESSION["error_mess"] == "CONTACT_FLASE"){ echo '

データベースへ接続できませんでした。

';} ?>

USER NAME

PASSWORD


入力値の空欄チェック

ログインボタンを押すと/assets/js/login.jsを実行し、入力値の空欄チェックを行って、入力されていない場合はエラーメッセージを表示します。
どちらも入力されている場合には/functions/login.phpにpostします。

/assets/js/login.js


$(function(){
  $("#login-btn").on('click',function(){
    //form name="login" を target に入れる
    var target = document.forms.login;

    //input[name=username]のvalue を user_name に入れる
    var user_name = $('input[name=username]').val();

    //input[name=userpass]のvalue を user_pass に入れる
    var user_pass = $('input[name=userpass]').val();
    
    //.error-messを削除
    $('.error-mess').remove()
    
    if( user_name === "" || user_pass === ""){

      //user_nameかuser_passのどちらかが空欄の場合はエラーメッセージを表示する
      $("#login").append('

USER NAMEとPASSWORDどちらも入力してください

'); }else{ //user_nameのuser_passどちらも入力されている場合は、/functions/login.phpにpostする target.method = "post"; target.action = "/functions/login.php"; target.submit(); } }); });

DBへの情報照会

postされた/functions/login.phpでは、
入力されたユーザー名・パスワードをDBに保存されている情報と照会して、
合っている場合は/dashboard.phpへ、
間違っている場合は/login.phpへ遷移するようにしています。

ここではDBのユーザー情報が格納されているテーブル名を「USER_TABLE」、ユーザー名のカラムを「NAME」、パスワードのカラムを「PASS」として進めていきます。

/functions/login.php


< ? php
session_start();
//DB情報取得
$dbname = ""; //データベース名
$dbhost = ""; //ホスト名
$dbuser = ""; //ユーザー名
$dbpass = ""; //パスワード

//ユーザー名、ユーザーパスワードを格納
$user_name = $_POST["username"];
$user_pass = $_POST["userpass"];

//ログインのブール値
$login = false;

try {
  //データベースへの接続開始 
  //ユーザー情報が保存されているテーブルの情報を取り出す
  $dbh = new PDO('mysql:dbname='.$dbname.';host='.$dbhost, $dbuser, $dbpass, array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));
  $sql = 'SELECT * FROM USER_TABLE';
  foreach ($dbh->query($sql) as $row) {
    if( $user_name == $row['NAME'] ){
      if( password_verify($user_pass,$row['PASS']) ){
        //ユーザー情報とパスワードが一致しているときは$loginはtrue
        $login = true;
      }
    }
  }
  
  if( $login ){
    //ログイン成功
    header("Location: /dashborad.php");
    exit();
  }else{
    //ログイン失敗
    $_SESSION["error_mess"] = "ERROR"; 
    header("Location: /login.php");
    exit(); 
  }
} catch (PDOException $e) {
  //データベースへの接続失敗
  die();
  $_SESSION["error_mess"] = "CONTACT_FLASE"; 
  header("Location: /login.php");
  exit();
}
?>

ログイン画面の下記の記述は失敗の仕方によってエラーメッセージを変えています。


  < ?php
  if( $_SESSION["error_mess"] == "ERROR"){ echo '

USER NAMEまたはPASSWORDが間違っています

';} if( $_SESSION["error_mess"] == "CONTACT_FLASE"){ echo '

データベースへ接続できませんでした。

';} ?>

ということで今回はログイン機能の実装について、紹介してきました。今後もCMS制作について少しずつ記事を書いていきます〜。