BLOG

【Lravel実践】WEBアプリを作りながらLravelを学ぶ【＃1環境構築編】

2023-07-26
どうもロックシステムのみなみです！
今回からYoutube新シリーズ『Laravelを勉強しながら家計簿アプリを作る』がスタートしました！

LaravelはPHPを勉強したことがあるなら一度は聞いたことがあるかもしれません。
Laravelとは2011年リリースされたWEBアプリのフレームワークで、PHPのフレームワークの中で１位の人気を誇っています！
シンプルなコードでわかりやすく学習コストが低いのが特徴で、MVCと言われるプログラムを役割ごとにモデル・ビュー・コントローラーに分担することで開発作業が進めやすくなって、管理もしやすいんです！

そんな便利なフレームワーク『Laravel』を、こんなWEB家計簿アプリを作りながら勉強していきます！
第一回目の今回は、環境構築と使用するファイルについての解説、書いたコードをWEBに表示させるまでやっていきます。
是非ご覧ください！

※今回動画内で使用したコードはこちら！

コピーして使ってください！

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>家計簿アプリ</title>
    <link rel="stylesheet" href="">
​
</head>
<body>
    <header>
        <h1>家計簿アプリ</h1>
    </header>
​
    <section class="container">
        <div class="balance">
            <h3>支出一覧</h3>
            <table>
                <thead>
                    <tr>
                        <th>日付</th>
                        <th>カテゴリ</th>
                        <th>金額</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 支出データのループ処理 -->
​
                </tbody>
            </table>
        </div>
​
        <div class="add-balance">
            <h3>支出の追加</h3>
            <form action="/balances" method="POST">
                <label for="date">日付:</label>
                <input type="date" id="date" name="date">
​
                <label for="category">カテゴリ:</label>
                <select name="category" id="category"></select>
​
                <label for="price">金額:</label>
                <input type="text" id="price" name="price">
​
                <button type="submit">追加</button>
            </form>
        </div>
    </section>
</body>
</html>
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;
}

株式会社ロックシステム

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

他の記事へ

CATEGORY