kharuka2016のブログ

日々の出来事を書き留めておくブログ

Pythonプロフェッショナルプログラミング-Webアプリケーションを作る(画面を作る)-

Pythonプロフェッショナルプログラミング 第2版

Pythonプロフェッショナルプログラミング 第2版

目次

前提条件

  • OS:Windows 10 64-bit, version 1607

  • Anaconda 4.4.0(Python 3.6 version 64-bit)インストール

  • Sublime Text 3

Webアプリケーションを作る 目次

1. 画面を作る

2. 機能を作る

2.1. コメントデータを保存する

kharuka2016.hatenablog.com

2.2. 保存しておいたコメントの一覧を取得する

kharuka2016.hatenablog.com

2.3. テンプレートエンジンを使って画面表示を行う
2.4. 投稿先のURLを用意する
2.5. テンプレートの出力を調整する

3. 動作確認

Sublime Textで画面を作ります。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
        <title>ゲストブック</title>
        <link rel="stylesheet" href="main.css" type="text/css">
           
        </style>
</head>

<body>
    <h1>ゲストブック</h1>
    <form action="/post" method="post">
        <p>書き込みをどうぞ</p>
        <table>
            <tr>
                <th>名前</th>
                <td>
                    <input type="text" size="20" name="name">
                </td>
            </tr>
            <tr>
                <th>コメント</th>
                <td>
                    <textarea rows="5" cols="40" name="comment"></textarea>
                </td>
            </tr>
        </table>
        <p>
            <button type="submit">送信</button>
        </p>
    </form>
    <div class="entries-area">
        <h2>これまでの書き込み</h2>
        <h3>ゲストさんの書き込み(2014/10/31 10:00:00):</h3>
        <p>
            書き込み内容
            <br> 書き込み内容
        </p>
        <h3>ゲストさんの書き込み(2014/10/31 09:00:00):</h3>
        <p>
            書き込み内容
            <br> 書き込み内容
        </p>
    </div>
</body>

</html>

main.css

body {
    margin: 0;
    padding: 0;
    color: #000E41;
    background-color:#004080;
}

h1 {
    padding: 0 1em;
    color: #FFFFFF;
}

form {
    padding: 0.5em 2em;
    background-color:#78B8F8;
}

.main {
    padding: 0;
}

.entries-area {
    padding: 0.5em 2em;
    background-color:#FFFFFF;
}

.entries-area p {
    padding: 0.5em 1em;
    background-color: #DBDBFF;
}

スクリーンショット

f:id:kharuka2016:20171011181522p:plain

参考

はじめてのPython AIプログラミング (BASIC MASTER SERIES)

はじめてのPython AIプログラミング (BASIC MASTER SERIES)