flaskで電話帳用のWEBアプリを作ってみる その1
(SQLITEとの接続、Flaskで表示させる)
flaskで電話帳用のWEBアプリを作ってみる その2
(FlaskにおけるPOST,GETの扱い方)
flaskで電話帳用のWEBアプリを作ってみる その3
(登録フォームを追加)
flaskで電話帳用のWEBアプリを作ってみる その4
(検索フォームを追加)
登録窓までが出来たのでそれを合体、そして検索フォームまで作っていきます。
検索のやり方
SELECT (カラム) FROM (テーブル名) WHERE (検索するカラム) =(イコール) or LIKE "(文字列)"
SQLITEの文字列検索をそのまま使うだけ。
なぜかFTS（全文検索とやら）が自分の環境だとできなかったので名前なら名前からのみ検索出来ない
これで一応必要な機能は全て実装できた。
が、しかし・・・
app.py
app.py
# -*- coding:utf-8 -*_
from flask import Flask,request,render_template,redirect,url_for,flash
import sqlite3
from flask_httpauth import HTTPBasicAuth
app = Flask(__name__)
auth = HTTPBasicAuth()
users = {"john":"hello","susan":"bye"}
@auth.get_password
def get_pw(username):
if username in users:
return users.get(username)
return None
@app.route("/")
@auth.login_required
def basicview():
conn = sqlite3.connect("sampledb.db")
cursor = conn.cursor()
cursor.execute("select name,phone_num,Commentary from contacts order by yomigana")
result = cursor.fetchall()
cursor.close()
conn.close()
return render_template("index.html",contacts = result)
@app.route("/register")
def hello():
return render_template("form.html")
@app.route("/add_entry" ,methods = ["POST"])
def add_ent():
conn = sqlite3.connect("sampledb.db")
cursor = conn.cursor()
cursor.execute("insert into contacts (name,yomigana,phone_num,Commentary) values (?,?,?,?)",
(request.form["Name"],request.form["Kana"],request.form["Num"],request.form["Comm"]))
conn.commit()
cursor.close()
conn.close()
return redirect(url_for("basicview"))
@app.route("/search")
def search_ent():
return render_template("search.html")
@app.route("/search_result",methods = ["POST"])
def search_entry():
conn = sqlite3.connect("sampledb.db")
cursor = conn.cursor()
search_name = "%"+request.form["Name"]+"%"
cursor.execute("select name,yomigana,phone_num,Commentary from contacts where name like ?",(search_name,))
result = cursor.fetchall()
cursor.execute("select name,yomigana,phone_num,Commentary from contacts where Commentary like ?",(search_name,))
result1 = cursor.fetchall()
result = result.extend(result1)
if result ==[]:
print("該当なし")
return redirect(url_for("basicview"))
else:
return render_template("index.html",contacts = result)
if __name__ == '__main__':
app.run(debug = True)
表示部分
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">電話帳</h3>
<button type = "button" class = "btn btn-default" data-toggle ="collapse" data-target="#collapseSamp">
登録
</button>
<div class = "collapse" id = "collapseSamp">
<div class ="well">
<form action = "{{url_for("add_ent")}}" method = "POST" class="form-inline">
<input name = "Name" placeholder="名前">
<input name = "Kana" placeholder="カナ">
<input name = "Num" placeholder="電話番号">
<input name = "Comm" placeholder="コメント">
<input type ="submit" value = "送信">
</form>
</div>
</div>
<ul class = flashes>
</ul>
<div class = "table-responsive">
<table class = "table table-bordered table-hover">
<tr>
<th>Name</th>
<th>Number</th>
<th>Comment</th>
</tr>
{% for num in contacts %}
<tr>
{% for name in num %}
<td>{{name}}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</body>
</html>
search.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<button type = "button" class = "btn btn-default" data-toggle ="collapse" data-target="#collapseSamp">
検索
</button>
<div class = "collapse" id = "collapseSamp">
<div class ="well">
<form action = "{{url_for("search_entry")}}" method = "POST" class="form-inline">
<input name = "Name" placeholder="名前">
<input type ="submit" value = "送信">
</form>
</div>
</div>
</body>
</html>
な、なんだこれは・・・
WEBアプリとしてなりたってすらいいない・・・
次回以降作り直すことを決意した。