Help us understand the problem. What is going on with this article?

専門学校生がLaravelとjQueryで抽選機作ってみた(機能紹介編)

はじめに

初投稿です!!
2019年の11月あたりから夏休み中に独学したLaravelで、成人式の交流会のために制作しておりました。
今回の記事は主に機能の説明をして、開発エピソードはまた今度にしていこうと思います。
[GitHubのリポジトリ]https://github.com/kbc18a11/Lottery
[実際に制作したもの]https://seizinshikilottery.herokuapp.com/
今回作ったもののトップページです。
トップ.PNG

使用技術

  • Laravel
  • jQuery
  • Bootstrap
  • MySQL
  • Heroku

実装した機能

■ユーザー関係
ユーザー登録
ログイン・ログアウト

■大会関係
大会主催
大会検索
自ユーザー主催大会一覧表示

■当選関係
当選種類作成
当選種類編集
当選種類削除
当選番号当選
当選番号編集
当選番号削除
当選番号確認
当選番号一覧表示

機能紹介

  • ユーザー関係
    Laravelのartisanコマンドのもので実装しました。
  • 大会主催
    大会の主催はナビゲーションバーから行います。
    ezgif-6-33a1f99b0a92.gif
  • 大会の検索や自分が開いたものを見る
    検索はナビゲーションバーで検索を行い、自分が開いたものはドロップダウンメニューから見ることができます。
    ezgif-6-27526c20ef24.gif
  • 当選種類の追加
    当選させる人数の設定も可能です。
    ezgif-6-312e29e63278.gif
  • 当選種類の追加
    追加したものの一覧から、内容の更新や削除が可能です。 また、削除に関してはAjaxを利用しています。
    ezgif-6-da56740e4e19.gif
  • 番号の当選
    Ajaxのリクエスト後にLaravel側で番号を当選した後に、モーダルウインドウでの演出で番号が発表されます。
    ezgif-6-4e6d54913caf.gif

演出はないのですが、番号の範囲も決めることができます。

ezgif-6-65c72f14a154.gif
* 番号の更新や削除

当選した番号に何か不都合があった場合に、下の一覧で番号の更新や削除を行えるようにしています。

ezgif-6-2fdcc6514479.gif
* 当選した番号の確認

当選した番号は、一覧で確認ができたり、番号の検索でも確認することができます。
また、大会を主催したユーザー以外でも確認をすることができます。

ezgif-6-6395c4ad8d04.gif

さいごに

制作期間は、バイトや学校の勉強をしながらだったため、2ヵ月となりました。
今思えば、あまり直感的なUIでないと思います。
初投稿でしたが、録画作業を含めて、動画をgifに変換することが大変だったです。
今現在Vueを使ったSPAの勉強をしているため、また何かつくときにこの経験を生かしていこうと思います。

Naoumi1214
地方の専門学校生です
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away