皆さんこんにちは こうも開発記録頑張るぞい
今までの開発記録はこちらへ
胡蝶蘭を捨てるくらいならワイが欲しいので、サービス開発する編
公式ドキュメントの言う通り、パッケージをインストールされたら、Inertia.jsが導入されて？？？になった編
マルチログインを作ってみた編
デザインをtailwindcssに丸投げする編
デザイナーに怒られないために、画像をリサイズする編
AWS×リボ払いで破産へGO編
今回やること
- リレーションの設定
- カテゴリーをseederを作って作成
- googlemap apiを使う
商品登録機能の開発
とはいっても、ユーザー登録機能とほとんどやることは一緒
ただし、追加で実装しないといけないのが
ユーザーと商品を紐づけるリレーションを実装すること
私がデータベースを使ってとても苦戦したのがリレーションである。
データベース同士の関係によって、一対一、一体多、多対多という関係性がある
というわけで自分なりに理解したことを大学の例え話を使って解説する。
一対一
一対一の場合、学生証のように一人につき一枚しかもらえないものが該当する。一人の学生が別々の学生証を２枚持っていることはあってはいけないからである。
一対多
一体多は片方は一つしかもっていないのに対し、もう片方は多数を持つことができることを意味する。学部のように、学生は一つの学部にしか入れないのに対し、学部は多数の学生を持っているということだ。
多対多
こちらを理解するのに相当苦労したが、大学のサークルをイメージするようにしたらしっくりくるようになった。
サークルは複数の学生を保持している一方、学生もサークルを掛け持ちができるので、どちら側も複数の要素を持つことになる
多対多の場合２つのデータベースで表現することはできないので、その間に中間テーブルというテーブルを作って表現する
これで一通りはイメージをつかめたはずなので、実際にプログラムしていこうと思う
外部キーに要注意
前回のトランザクションでもあった話だが、ユーザーが削除されたとき、先にそのユーザーが出品した商品を削除しなければならない。
そこを注意して外部キーを設定していく。
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')
->constrained()
->onUpdate('cascade')
->onDelete('cascade');
$table->foreignId('secondary_category_id')
->constrained();
$table->string('img')->nullable();
$table->string('name');
$table->string('comment');
$table->string('address')->nullable();
$table->integer('trade_type');
$table->timestamps();
});
}
今回はユーザーテーブルとつなぐuse_idとカテゴリーテーブルとつなぐsecondary_category_id'に外部キーで紐づけている
違いは、('cascade')があるかないか。
('cascade')をつけることによって、ユーザーテーブルで何かしらの変更があった場合、先に商品テーブルを参照して処理してくれる。
これで、ユーザーを削除しても、そのユーザーが出品している商品が残り続けるとことはない。
一方で、カテゴリーはユーザーが削除しても、カテゴリーの内容を変更するわけではないので、こちらはそのままである。
このようにマイグレーションファイルに書いていったが、これだけではデータベース同士がつながっていない。
というわけで今度はモデルファイルでリレーションをする
public function product()
{
return $this->hasMany(Product::class);
}
ユーザーテーブルと商品テーブルの関係性は、ユーザーが多数の商品を持っているということから一体多で設定する
商品テーブル側も設定、ついでに、データベース登録を許可する設定も書いておく。
protected $fillable = [
'user_id',
'secondary_category_id',
'name',
'comment',
'address',
'trade_type',
'img',
];
public function user()
{
return $this->belongsTo(User::class);
}
これでリレーションの設定は完了。
カテゴリーの作成
ECサイトには膨大な商品が出品されていて、一つ一つ探すには膨大な手間がかかる。その時間を少しでも減らすために使われているのがタグやカテゴリーである。
このサイトもいろんな種類の花が出品されることが予想されるため未経験個人開発のサイトなんか誰も来ねえよ、利便性の向上のためにカテゴリーで検索できるようにする。
ということで、まずはリレーション
かなりシンプルです
商品を抽象化して、小カテゴリー、さらに抽象化して、大カテゴリーとなっている。
大カテゴリー 一体多 小カテゴリー 一体多 商品
にすれはOK
public function category()
{
return $this->belongsTo(SecondaryCategory::class, 'secondary_category_id');
}
class SecondaryCategory extends Model
{
use HasFactory;
public function secondary()
{
return $this->belongsTo(PrimaryCategory::class);
}
}
class PrimaryCategory extends Model
{
use HasFactory;
public function secondary()
{
return $this->hasMany(SecondaryCategory::class);
}
}
カテゴリーデータの作成
カテゴリー名はこちらで決めてあるのででSeederを使う。
Seederはダミーデータの作成にも使えるため、何度も登録するのが面倒な人は活用してもいいと思う。
まずはdatabase\seedersにCategorySeeder.phpを作成
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class CategorySeeder extends Seeder
{
public function run()
{
DB::table('primary_categories')->insert([
['id'=>1,
'name' => '洋ラン',
'sort_order' => 1,
],
['id'=>2,
'name' => 'アジサイ',
'sort_order' => 2,
],
['id'=>3,
'name' => 'シクラメン',
'sort_order' => 3,
],
['id'=>4,
'name' => '観葉植物',
'sort_order' => 4,
],
['id'=>5,
'name' => '多肉植物',
'sort_order' => 5,
],
['id'=>6,
'name' => '球根植物',
'sort_order' => 6,
],
['id'=>7,
'name' => 'フラワースタンド',
'sort_order' => 7,
],
['id'=>8,
'name' => 'その他',
'sort_order' => 8,
],
]);
DB::table('secondary_categories')->insert([
[
'name' => '胡蝶蘭',
'sort_order' => 1,
'primary_category_id' => 1,
],
[
'name' => 'シンビジューム',
'sort_order' => 2,
'primary_category_id' => 1
],
[
'name' => 'カトレア',
'sort_order' => 3,
'primary_category_id' => 1
],
[
'name' => 'その他洋ラン',
'sort_order' => 4,
'primary_category_id' => 1
],
[
'name' => 'アジサイ',
'sort_order' => 5,
'primary_category_id' => 2
],
[
'name' => 'シクラメン',
'sort_order' => 6,
'primary_category_id' => 3
],
[
'name' => 'ガーデンシクラメン',
'sort_order' => 7,
'primary_category_id' => 3
],
[
'name' => 'アンスリウム',
'sort_order' => 8,
'primary_category_id' => 4
],
[
'name' => 'モンステラ',
'sort_order' => 9,
'primary_category_id' => 4
],
[
'name' => 'ガジュマル',
'sort_order' => 10,
'primary_category_id' => 4
],
[
'name' => 'パキラ',
'sort_order' => 11,
'primary_category_id' => 4
],
[
'name' => 'その他観葉植物',
'sort_order' => 12,
'primary_category_id' => 4
],
[
'name' => 'サボテン',
'sort_order' => 13,
'primary_category_id' => 5
],
[
'name' => 'カランコエ',
'sort_order' => 14,
'primary_category_id' => 5
],
[
'name' => 'その他多肉植物',
'sort_order' => 15,
'primary_category_id' => 5
],
[
'name' => 'チューリップ',
'sort_order' => 16,
'primary_category_id' => 6
],
[
'name' => 'カラー',
'sort_order' => 17,
'primary_category_id' => 6
],
[
'name' => 'ヒヤシンス',
'sort_order' => 18,
'primary_category_id' => 6
],
[
'name' => 'その他球根植物',
'sort_order' => 19,
'primary_category_id' => 6
],
[
'name' => '寄せ植え',
'sort_order' => 20,
'primary_category_id' => 7
],
[
'name' => 'その他',
'sort_order' => 21,
'primary_category_id' => 8
],
]);
}
}
その後、最初からあるDatabaseSeeder.phpに
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
$this->call([
CategorySeeder::class, //追加
]);
}
}
あとはコマンドでphp artisan db:seedを入れると
やったぜ
ルートとコントローラーとビュー
ほぼプロフィール機能の使いまわしのため割愛。
追加機能の部分はのちにまとめてやる予定です。
GoogleMap
皆さん突然ですが、ジモティーを使ったことはありますか？
私はあります！
ジモティーといえばユーザー同士が待ち合わせ場所で直接会って取引できますよね。例えば、こんな感じです。
でも、国分寺ってどこがわかりませんよね？エンジニアの大半は東京在住だからわかるだろ
ということで、地図をつければ親切じゃないか！
google map APIの仕様手順
Google Maps API を使ってみた
APIの取得までの手順はこちらを参照してください
コードを書きます。
ビュー側で設定していきます
<script src="https://maps.googleapis.com/maps/api/js?key=（APIキー）&callback=initMapWithAddress" async defer>
//MAPを挿入したい所に挿入
//略
<script>
var _my_address = '{{ $productInfo->address }}';
function initMapWithAddress() {
var opts = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': _my_address,
'region': 'jp'
},
function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = result[0].geometry.location;
my_google_map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: my_google_map,
title: latlng.toString(),
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(event) {
marker.setTitle(event.latLng.toString());
});
}
}
);
}
</script>
これで、マップを挿入する準備ができました！
早速見てみましょう
どんな場所が表示されるかな わくわく
誰だよ！取引先を無人島に設定したやつ！！
おわり