• HOME
  • ブログ
  • YOUTUBE動画
  • 【Lravel実践】WEBアプリを作りながらLravelを学ぶ【＃5登録データの更新ページ編】

BLOG

【Lravel実践】WEBアプリを作りながらLravelを学ぶ【＃5登録データの更新ページ編】

2023-10-23
■過去回はこちら！
＃1：環境構築編
＃2：データベース作成編
＃3フォーム入力でデータベースに登録編
#4登録されたデータをアプリに表示編
どうもロックシステムのみなみです！
Laravelを使った家計簿アプリ開発5回目です！
前回の動画では、データベースの正規化について学び、アプリ内のフォームからデータベースに登録されたデータをアプリに表示できるようになりました！
・前回の動画でできたことモデルを使ってとっても簡単にデータ取得することができましたね！
第5回目の今回は、前回作成した更新ボタンを押したら、編集用の画面に遷移し、一度登録した支出やカテゴリーのデータを更新できるようにしていきます。家計簿アプリも完成まであと1回！是非チャレンジしてみてください！

今回使用したコードはこちら！

▼5回目までの完成コードは以下のGoogleドライブから無料でダウンロードできます！
https://drive.google.com/file/d/1tTktOCP7tI3u6g6-7uIKQu98aq2IIJHn/view?usp=sharing
・00：56で使用した更新ページのベースとなるHTML(edit.blade.php)
<html>
<head>
    <meta charset="UTF-8">
    <title>家計簿アプリ</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
​
</head>
<body>
    <header>
        <h1>支出編集</h1>
    </header>
​
    <div class="edit-page">
        <div class="form-balance edit-balance">
            <form action="" method="POST">
                <input type="hidden"  id="id" name="id" value="">
                <label for="date">日付:</label>
                <input type="date" id="date" name="date" value="">
                
                <label for="category_id">カテゴリ:</label>
                <select name="category_id" id="category_id">
                    
                    <option value="">
                        
                    </option>
                    
                </select>
​
                <label for="price">金額:</label>
                <input type="text" id="price" name="price"  value="">
​
                <div class="button-container">
                    <button type="submit" class="edit-button">更新</button>
                    <input type="button"  class="back-button" value="戻る" onclick="window.location.href='{{ url('/') }}'">
                </div>
            </form>
        </div>
    </div>
</body>
</html>
・02：26で使用したCSS(中身を書き換え)
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0 auto;
}

header {
    text-align: center;
}

.container {
    padding: 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

h2 {
    margin-top: 0;
}

.balance {
    margin-bottom: 20px;
    width: 100%;
    max-width: 50%;
}

.balance h3 {
    margin-top: 0;
}

.balance table {
    width: 100%;
    border-collapse: collapse;
}

.balance th,
.balance td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.balance td {
    border-top: 1px solid #ccc;
}

.balance tbody tr:nth-child(odd) {
background: #f2f2f2;
}

.add-balance {
    width: 100%;
    max-width: 20%;
    margin-left: 50px;
}

.add-balance h3 {
    margin-top: 0;
}

.add-balance form {
    display: flex;
    flex-direction: column;
}

.add-balance .form-group {
    margin-bottom: 10px;
}

.add-balance label {
    font-weight: bold;
}

.add-balance input, .add-balance select {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
}

.add-balance button {
    padding: 8px 16px;
    background-color: mediumaquamarine;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.error {
    color: tomato;
}

.flash_message {
    background-color: aquamarine;
    opacity: 0.4;
    color: darkgreen;
}

.flash_error_message {
    background-color: tomato;
    opacity: 0.6;
    color: rgb(59, 0, 0);
}

.pagination {
    list-style: none;
    display: flex;
}

.pagination li {
    cursor: pointer;
    text-align: center;
    padding: 8px 0px;
}

.pagination li a {
    padding: 15px;
    text-decoration: none;
    background-color: mediumaquamarine;
    opacity: 0.8;
    border: 1px solid #fff;
    color: #fff;
}

.pagination li span {
    padding: 15px;
}

.button-td {
    display: flex;
    align-items: baseline;
}

.button-td input,
.edit-button,
.delete-button {
    padding: 8px 16px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.edit-button {
    margin-right: 20px;
    background-color: orange;
    text-decoration: none;
}

.delete-button {
    background-color: tomato!important;
}

.form-balance {
    width: 100%;
    max-width: 20%;
    margin-left: 50px;
}

.form-balance h3 {
    margin-top: 0;
}

.form-balance form {
    display: flex;
    flex-direction: column;
}

.form-balance .form-group {
    margin-bottom: 10px;
}

.form-balance label {
    font-weight: bold;
}

.form-balance input, .form-balance select {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
}

.form-balance button, 
.button-td input,
.edit-button-a {
    padding: 8px 16px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-balance button, a {
    margin-top: 20px;
}

.form-balance button {
    background-color: mediumaquamarine;
}

.edit-button-a {
    background-color: orange;
    text-decoration: none;
}

.error {
    color: tomato;
}

.edit-page {
    width: 100%;
    background-color: #fff;
}

.edit-balance {
    padding: 20px;
    background-color: #fff;
    margin: 0 auto;
    max-width: 20%;
}

.button-container {
    text-align: center;
}

.button-container .edit-button,
.back-button {
    width: 40%;
    cursor: pointer;
}

株式会社ロックシステム

「ブラック企業をやっつけろ！！」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中！絶賛エンジニア募集中。

他の記事へ

CATEGORY