【市場価値がわかる】エンジニア転職におすすめなサイト

Laravel9ニュースサイト①概要【Laravel9×React×TailwindCSS】

Larattoサムネ

「Laravel9でアプリを作成したいなぁ〜」

「LaravelでTodoアプリとかは作ったけど、ちょっと難易度高いものにも挑戦したいな〜」

「ReactとかTailwindCSSとか流行ってるから、それらを組み合わせてLaravelのアプリ作りたいな〜」

こんな疑問を持っている人には特におすすめな記事です。

この記事ではいくつかの記事に分けてLaravel9でニュースサイトを作ります。

難易度も実務に近いレベルで作っているので、レベルアップしたい方はぜひ挑戦してみてください〜

もしハマったところなのがあれば、記事下のコメントに相談いただければ回答しますので〜(たぶん)

Contents

ニュースサイトLarattoの概要

これから作っていくニュースサイト「Laratto」の概要をちょっとお話ししておきますね。

Larattoは、Laravel9で作るニュースサイトとイメージしてください。

なんでLarattoなの?

某ニュースサイトからインスパイア受けました。ただそれだけです。

最初、LaraNewsしようと思ったのですが、検索かけたら同じ名前のものがすでにあったので、「ほな、Larattoにしよか〜」で決まりました。

Larattoの機能

Larattoの機能はこんな感じ。

Laratto機能
  • 総合トップ
  • マイページ
  • ユーザー新規登録・ログイン・ログアウト
  • 記事の投稿リスト
  • 記事の投稿(下書き保存・公開・予約公開)
  • 記事の詳細
  • 記事の編集・更新・削除
  • 記事のゴミ箱
  • 記事を予約公開する
  • 記事のいいね(いいねした記事は、マイニュースとしてチェックできる)
  • 記事をアクセス数
  • 記事の検索
全記事紹介

総合トップ

ログイン後

マイページ

ユーザー新規登録・ログイン

ユーザー登録完成図
Larattoログイン画面

記事の投稿リスト

マイページ投稿リスト

記事の投稿

記事投稿画面

バリデーションに引っかかった時

記事投稿バリデーション

記事の詳細

マイページ

マイページの記事詳細

総合トップ

総合トップ記事詳細

記事の編集・更新・削除

記事のゴミ箱

Trashをクリックすると記事がゴミ箱に移動

ゴミ箱に移動した記事は復元したり、完全に削除したりできる。

記事の予約公開

準備中….

記事のいいね

準備中…..

記事のアクセス数

準備中….

記事の検索

準備中….

開発環境

開発環境はこんな感じです。

環境バージョン
MacBook AirMonterey 12.2.1
Docker20.10.7
PHP8.1
composer2.2.9
Laravel9.5.1
apache2.4
MySQL8.0
phpmyadmin
npm8.5
node12.22.11
React17
TailwindCSS3
Laravel/breezeログイン認証機能で使用
※Laravel8以降の場合に使用可。
Laravel6や7系はreact –authとか使います。

DB設計

全体で6テーブルになります。

  • Users(ユーザー)
  • Posts(投稿)
  • Categories(カテゴリー)
  • Reservation_posts(予約投稿)
  • Trashes(ゴミ箱)
  • Favorites(いいね)

Usersテーブルは、Laravel9インストールした時の既存のものを使います。

Postsテーブル

スクロールできます
カラム名NULLデフォルト値詳細
idbigint unsigned PK×投稿ID
user_idbigint unsigned FK×ユーザーID
category_idbigint unsigned FKカテゴリーID
titlevarchar(255)×タイトル
bodytext本文
publish_flgsmallint×00:下書き保存 1:公開済み 2:予約公開
view_counterinteger0アクセス数カウンター
favorite_counterinteger0お気に入りカウンター
delete_flgboolean×00:表示 1:論理削除
created_attimestamp作成日
updated_attimestamp更新日

Categoriesテーブル

スクロールできます
カラム名NULL詳細
idbigint unsigned PK×カテゴリーID
category_namevarchar(255)×カテゴリー名
created_attimestamp作成日
updated_attimestamp更新日

Reservation_postsテーブル

スクロールできます
カラム名NULL詳細
idbigint unsigned PK×予約投稿ID
user_idbigint unsigned FK×ユーザーID
post_idbigint unsigned FK×投稿ID
reservation_datevarchar(16)×予約時間
reservation_timevarchar(16)×
created_attimestamp作成日
updated_attimestamp更新日

Favoritesテーブル

スクロールできます
カラム名NULL詳細
idbigint unsigned PK×お気に入りID
user_idbigint unsigned FK×ユーザーID
post_idbigint unsigned FK×投稿ID
created_attimestamp作成日
updated_attimestamp更新日

TailwindCSSの参考UIコンポーネント

TailwindCSSでフロント部分を整えるにあたり、一からレイアウトを考えるのは非常にだるいです。

世の中にはUIコンポーネントを提供してくれるサイトがあるので存分にそれを活用してレイアウトをサクッと作りました。

スーパーいい感じになるので、おすすめですよ〜

次の記事から、環境構築などをしていくので、少しハードモードになるかもですがあなたはやればできる人!

途中、頑張れなくなったらなかやまきんに君みたいに「パワぁぁぁーー!!!ハッ」ってやれば大丈夫です。

>>>②環境構築へ進む

スキルを売り買いするならココナラ

オンライン動画学習ならUdemy

コメント

コメントする

CAPTCHA


Contents
閉じる