Laravelで超簡単に始めるWebアプリ開発【掲示板を作ってみる】

こんばんみ！洋梨🍐です。

今回はLaravelを使って簡単なWebアプリ(掲示板)を作ってみたいと思います。

いかに簡単に作れるかがわかると思いますよ^q^

環境構築

インストールの方法は他サイトにて説明がよくされているので割愛させていただきます。

本記事では、

・PHPが実行できる環境ができている。
　＞出来ていない人はこちら(php)orこちら(Xampp)

・Laravel / Composer および開発環境(VSCodeなど)がインストールされている
　＞出来ていない人はこちら(Laravel) , こちら(Composer)

・MySQLが実行できる環境ができている
　＞出来ていない人はこちら(Xampp)

ここまで済んでいる前提で行っていきます。

プロジェクトの作成

まずはLaravelのプロジェクトを作成します。

composer create-project –prefer-dist laravel/laravel sampleboard

コマンドでプロジェクトを作成します。

処理が完了したら「php artisan serve」でサーバーを立ち上げてみます。

立ち上げた後、http://localhost:8000/ へアクセスします。

このようにテストページが表示されれば作成成功です。

ここまでできない場合、環境構築ができていない場合があります。

本編

データベース構築

コマンド「MySQL -u root」でMySQLに接続し、データベースを構築していきます。

データーベースを作成

MariaDB [(none)]> create database testboard;
Query OK, 1 row affected (0.002 sec)

接続用ユーザーを作成(任意)

MariaDB [(none)]> create user tbuser;
Query OK, 0 rows affected (0.016 sec)
MariaDB [(none)]> grant all on testboard.* to tbuser;
Query OK, 0 rows affected (0.004 sec)

テーブルを作成

MariaDB [(none)]> use testboard
Database changed
MariaDB [testboard]> create table posts (name varchar(32),message varchar(255));
Query OK, 0 rows affected (0.042 sec)

テストデータを追加(任意)

MariaDB [testboard]> insert into posts value(“younaship”,”Hello.This is Test Message.”);
Query OK, 1 row affected (0.064 sec)

Laravelとデータベースを接続

.envファイルを編集し、LaravelとMySQLを接続できるようにします。

変更する部分は

DB_DATABASE=testboard
DB_USERNAME=tbuser (ユーザーを作成した場合)

の部分です。

プログラムを作成

Modelを作成

php artisan make:model Post

コマンドで Post.php (Model : データベースの型を宣言するようなもの) を生成します。

// Post.php
class Post extends Model
{
    const UPDATED_AT = null;
    const CREATED_AT = null;
}

作成したら上記のように書いておきます。

※これはLaravelのModelでのデフォルトではテーブル内にこれらのカラムがある前提になってしまっているため「これらのカラムはDBに含まれていませんよ」といったことを書く必要があるためです。

Controllerを作成

php artisan make:controller Main

コマンドでMain.php (Controller : メインで処理を実行する部分) を生成します。

// Main.php
use App\Post;

class Main extends Controller
{
    public function index(){
        $posts = Post::all();
        return view("main",["posts"=>$posts]);
    }
    
    public function addPost(){
        $name = isset($_POST["name"]) ? $_POST["name"] : "";
        $message = isset($_POST["message"]) ? $_POST["message"] : "";

        $p = new Post();
        $p->name = $name;
        $p->message = $message;
        $p->save();

        return redirect("/");
    }
}

index()は表示用に用意してある関数で、addPost()は投稿用に用意してあります。

Viewを作成

次に表示するページを作成します。

/resources/views/ 以下に main.blade.php とファイルを作成します。

※これで先ほどのController内の return view(“main”) という部分でこのファイルを呼び出されることになります。

// main.blade.php
<html>
<head>
    <title>This is SamplePage</title> 
</head>
    <body>
        <b>Sample Board</b>
        <form method="POST">
            @csrf
            <label>NAME</label>
            <input type="text" name="name"/>
            <label>Message</label>
            <input type="text" name="message"/>
            <input type="submit" value="OK" />
        </form>
        <hr>
        @foreach ($posts as $post)
            <p><b>{{$post["name"]}} </b>{{$post["message"]}}</p>    
        @endforeach
    </body>
</html>

アクセスされた時の処理

ここまで出来たら表示する準備は終了です。

最後に web.php を編集し、アクセスされたらこのプログラムを実行するようにします。

Route::get(‘/’, function(){
return view(“welcome”);
});

の部分を

Route::get(‘/’,”Main@index”);

に書き換えます。

Main@indexはMain Controllerのindex()を実行するといった意味を持っています。

// web.php
Route::get('/',"Main@index");
Route::Post("/","Main@addPost");

結論、このように書きます。

実行

ここまで出来たら上記で説明した「php artisan serve」で実行して「localhost:8000」へアクセスしてみます。

データベースに追加したものが表示されていればオッケーです。(スキップした場合は何も表示されません。)

そして、メッセージを追加してこのように増えればプログラム完成です。

お疲れ様でした^^

これであなたもララベラーの仲間入り！ｗ

ここまで読んでくれてありがとう！

他にもいろいろと開発系の記事書いてたりするので是非見てね☻

タグ: Laravel, MySQL, アプリ開発