I made a bulletin board system using flask and sqlite3 for studying.
___ I made 20 variables in the following syntax and sent it, but it seems that I was able to send the list as it is ___
text = ["hello","world"]
#return name
return render_template('index.html', title='flask test', text=text) #Change
<body>
<h1>hello{{name[0]}}</h1>
</body>
・ Python (3.7.3) ・ Flask (1.1.1) ・ Sqlite3 ・ Html ・ Css ・ Javascript ・ MacBook Catalina (10.15.1 Beta)
Pythonserver/ ├ mess2.db ├ app.py └ templates/ └ index.html ├ 50moji.html ├ start.html ├ nokigou.html
mess normally with touch command.You can make a db
Then open it with the ``` sqlite3 mess.db``` command.
Then create the database with the following command.
```create table usermess(id integer primary key autoincrement, name text, message text);```
I think that it will not work unless you put the data in 10 pieces
Repeat the following command ten times
```insert into usermess(name,message) values('hoge','huga');```
### how to use
With the above file structure
#### **`Python3 app.py`**
```py
If you execute it with, it will start.
Once started
#### **`5000`**
```localhost
You can see it by accessing the site.
#### **`start.html`**
```html
<form action="/startbtn" method="POST">
<input type="Submit" Value="start">
</form>
app.py
from flask import Flask,render_template,request
from flask import *
import sqlite3
app = Flask(__name__)
@app.route('/startbtn', methods=['GET', 'POST'])
def createname():
conn = sqlite3.connect('mess2.db')
c = conn.cursor()
c.execute("select name,message from usermess ORDER BY id DESC;")#select statement
messtuple = c.fetchall()#Insert as list type
mess0 = str(messtuple[0][0])
mess0_2 = str(messtuple[0][1])
mess1 = str(messtuple[1][0])
mess1_2 = str(messtuple[1][1])
mess2 = str(messtuple[2][0])
mess2_2 = str(messtuple[2][1])
mess3 = str(messtuple[3][0])
mess3_2 = str(messtuple[3][1])
mess4 = str(messtuple[4][0])
mess4_2 = str(messtuple[4][1])
mess5 = str(messtuple[5][0])
mess5_2 = str(messtuple[5][1])
mess6 = str(messtuple[6][0])
mess6_2 = str(messtuple[6][1])
mess7 = str(messtuple[7][0])
mess7_2 = str(messtuple[7][1])
mess8 = str(messtuple[8][0])
mess8_2 = str(messtuple[8][1])
mess9 = str(messtuple[9][0])
mess9_2 = str(messtuple[9][1])
message = str(messtuple)#Convert tuple to str
# message = message.replace("0213124124382135794302857439025","'")
# message = message.replace("0223124124382135794302857439025","(")
conn.commit()
conn.close()
return render_template("index.html",messlist=message,mess0=mess0,mess0_2=mess0_2,mess1=mess1,mess1_2=mess1_2,mess2=mess2,mess2_2=mess2_2,mess3=mess3,mess3_2=mess3_2,mess4=mess4,mess4_2=mess4_2,mess5=mess5,mess5_2=mess5_2,mess6=mess6,mess6_2=mess6_2,mess7=mess7,mess7_2=mess7_2,mess8=mess8,mess8_2=mess8_2,mess9=mess9,mess9_2=mess9_2)
@app.route("/")
def main():
return render_template("start.html")
@app.route('/btn', methods=['GET', 'POST'])
def test():
if request.method == 'POST':
conn = sqlite3.connect('mess2.db')
c = conn.cursor()
usertext = request.form["usertext"]
username = request.form["username"]
if "'" in usertext or "'" in username:
return render_template("nokigou.html")
usertextlen = len(usertext)
usernamelen = len(username)
if usertextlen > 50 or usernamelen > 50:
return render_template("50moji.html")
if usertextlen == 0 or usernamelen == 0:
return render_template("50moji.html")
# usertext = usertext.replace("'","0213124124382135794302857439025")#Replace
# usertext = usertext.replace("(","0223124124382135794302857439025")
# Insert a row of data
c.execute("insert into usermess(name,message) values('%s','%s');"%(username,usertext))#insert
c.execute("select name,message from usermess ORDER BY id DESC;")#select statement
messtuple = c.fetchall()#Insert as list type
mess0 = str(messtuple[0][0])
mess0_2 = str(messtuple[0][1])
mess1 = str(messtuple[1][0])
mess1_2 = str(messtuple[1][1])
mess2 = str(messtuple[2][0])
mess2_2 = str(messtuple[2][1])
mess3 = str(messtuple[3][0])
mess3_2 = str(messtuple[3][1])
mess4 = str(messtuple[4][0])
mess4_2 = str(messtuple[4][1])
mess5 = str(messtuple[5][0])
mess5_2 = str(messtuple[5][1])
mess6 = str(messtuple[6][0])
mess6_2 = str(messtuple[6][1])
mess7 = str(messtuple[7][0])
mess7_2 = str(messtuple[7][1])
mess8 = str(messtuple[8][0])
mess8_2 = str(messtuple[8][1])
mess9 = str(messtuple[9][0])
mess9_2 = str(messtuple[9][1])
message = str(messtuple)#Convert list to str
# message = message.replace("0213124124382135794302857439025","'")
# message = message.replace("0223124124382135794302857439025","(")
conn.commit()
conn.close()
return render_template("index.html",messlist=message,mess0=mess0,mess0_2=mess0_2,mess1=mess1,mess1_2=mess1_2,mess2=mess2,mess2_2=mess2_2,mess3=mess3,mess3_2=mess3_2,mess4=mess4,mess4_2=mess4_2,mess5=mess5,mess5_2=mess5_2,mess6=mess6,mess6_2=mess6_2,mess7=mess7,mess7_2=mess7_2,mess8=mess8,mess8_2=mess8_2,mess9=mess9,mess9_2=mess9_2)
@app.route('/reloadbtn', methods=['GET', 'POST'])
def reloadbtn():
conn = sqlite3.connect('mess2.db')
c = conn.cursor()
c.execute("select name,message from usermess ORDER BY id DESC;")#select statement
messtuple = c.fetchall()#Insert with tuple type
mess0 = str(messtuple[0][0])
mess0_2 = str(messtuple[0][1])
mess1 = str(messtuple[1][0])
mess1_2 = str(messtuple[1][1])
mess2 = str(messtuple[2][0])
mess2_2 = str(messtuple[2][1])
mess3 = str(messtuple[3][0])
mess3_2 = str(messtuple[3][1])
mess4 = str(messtuple[4][0])
mess4_2 = str(messtuple[4][1])
mess5 = str(messtuple[5][0])
mess5_2 = str(messtuple[5][1])
mess6 = str(messtuple[6][0])
mess6_2 = str(messtuple[6][1])
mess7 = str(messtuple[7][0])
mess7_2 = str(messtuple[7][1])
mess8 = str(messtuple[8][0])
mess8_2 = str(messtuple[8][1])
mess9 = str(messtuple[9][0])
mess9_2 = str(messtuple[9][1])
message = str(messtuple)#Convert tuple to str
# message = message.replace("0213124124382135794302857439025","'")
# message = message.replace("0223124124382135794302857439025","(")
#CREATE TABLE usermess(id INTEGER PRIMARY KEY AUTOINCREMENT, name text, message text);
#insert into usermess(name,message) values('hoge','huga');
conn.commit()
conn.close()
return render_template("index.html",messlist=message,mess0=mess0,mess0_2=mess0_2,mess1=mess1,mess1_2=mess1_2,mess2=mess2,mess2_2=mess2_2,mess3=mess3,mess3_2=mess3_2,mess4=mess4,mess4_2=mess4_2,mess5=mess5,mess5_2=mess5_2,mess6=mess6,mess6_2=mess6_2,mess7=mess7,mess7_2=mess7_2,mess8=mess8,mess8_2=mess8_2,mess9=mess9,mess9_2=mess9_2)
if __name__ == "__main__":
app.run(debug=True,host='0.0.0.0', port=5000)#By default, it can only be accessed by the local host
I knew after I finished making it, but it's easier because it's delayed in JSON even if I don't make 20 variables.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/btn" method="POST">
<input id="input1" type="text" name="username" placeholder="name" maxlength="100">
<input id="input1" type="text" name="usertext" placeholder="Enter a message" maxlength="100">
<input type="Submit" value="Submit">
</form>
<form action="/reloadbtn" method="POST">
<input type="Submit" Value="update">
</form>
<div>
<div class="mess0">
{{mess0}}<br>
<p class="mess0_2">{{mess0_2}}</p>
</div>
<div class="mess1">
{{mess1}}<br>
<p class="mess_2">{{mess1_2}}</p>
</div>
<div class="mess2">
{{mess2}}<br>
<p class="mess_2">{{mess2_2}}</p>
</div>
<div class="mess3">
{{mess3}}<br>
<p class="mess_2">{{mess3_2}}</p>
</div>
<div class="mess4">
{{mess4}}<br>
<p class="mess_2">{{mess4_2}}</p>
</div>
<div class="mess5">
{{mess5}}<br>
<p class="mess_2">{{mess5_2}}</p>
</div>
<div class="mess6">
{{mess6}}<br>
<p class="mess_2">{{mess6_2}}</p>
</div>
<div class="mess7">
{{mess7}}<br>
<p class="mess_2">{{mess7_2}}</p>
</div>
</div>
<div class="mess8">
{{mess8}}<br>
<p class="mess_2">{{mess8_2}}</p>
</div>
<div class="mess9">
{{mess9}}<br>
<p class="mess_2">{{mess9_2}}</p>
</div>
</div>
<style>
.mess0{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess0_2{
font-size: 20px;
}
.mess1{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess1_2{
font-size: 20px;
}
.mess2{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess2_2{
font-size: 20px;
}
.mess3{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess3_2{
font-size: 20px;
}
.mess4{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}.mess4_2{
font-size: 20px;
}
.mess5{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess5_2{
font-size: 20px;
}
.mess6{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess6_2{
font-size: 20px;
}
.mess7{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess7_2{
font-size: 20px;
}
.mess8{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess8_2{
font-size: 20px;
}
.mess9{
margin : 30px ;
padding : 20px ;
border-bottom: solid 3px #87CEFA;
background-color : rgb(233, 233, 233) ;
}
.mess9_2{
font-size: 20px;
}
#input1:focus {
border: 2px solid #ff9900;
z-index: 10;
outline: 0;
}
#input1{
width: 250px;
height: 10em;
}
</style>
<!-- <p id="inhtml"></p>
<script>
const messstr = "{{messlist}}"
const inhtmljs = document.getElementById("inhtml")
inhtmljs.innerHTML = messstr
</script> -->
<script type="text/javascript">
var if_ctrl = 0;
var if_r = 0;
function is_ctrl(pressKey){
if(pressKey==17){ //ctrl
return 1;
} else if (navigator.userAgent.match(/macintosh/i)){
if (pressKey == 224 && navigator.userAgent.match(/firefox/i)){
return 1;
} else if (pressKey == 91 || pressKey == 93){
return 1;
}
}
return 0;
}
function disable_reload(e){
if(navigator.userAgent.match(/msie/i) && window.event){
window.event.returnValue=false;
window.event.keyCode=0
} else
if (navigator.userAgent.match(/macintosh/i) || e.preventDefault){
e.preventDefault();
e.stopPropagation();
}
return false;
}
function catchkeydown(e){
var pressKey;
if (eval(e)){
pressKey=e.keyCode;
} else {
pressKey=event.keyCode;
}
if(is_ctrl(pressKey)==1){ //ctrl
if_ctrl=1;
if(if_r==1){return disable_reload(e);}
}
if(pressKey==82){ //r
if_r=1;
if(if_ctrl==1){return disable_reload(e);}
}
if(pressKey==116){ //f5
if (navigator.userAgent.match(/safari/i)
&& !navigator.userAgent.match(/chrome/i)){
window.location="%_myname_%?n=%_n_%&i=%_i_%";
return true;
} else {
return disable_reload(e);
}
}
}
function catchkeyup(e){
var pressKey;
if (eval(e)){
pressKey=e.keyCode;
} else {
pressKey=event.keyCode;
}
if(is_ctrl(pressKey)==1){ //ctrl
if_ctrl=0;
if(if_r==1){return disable_reload(e);}
}
if(pressKey==82){ //r
if_r=0;
if(if_ctrl==1){return disable_reload(e);}
}
if(pressKey==116){ //f5
if (navigator.userAgent.match(/safari/i)
&& !navigator.userAgent.match(/chrome/i)){
window.location="%_myname_%?n=%_n_%&i=%_i_%";
} else {
return disable_reload(e);
}
}
}
document.onkeydown = catchkeydown;
document.onkeyup = catchkeyup;
</script>
</body>
</html>
50moji.html
<h1>1 to 50 characters</h1>
nokigou.html
<h1>1 to 50 characters</h1>