1. Navbar에 아이콘 삽입하기
flaticon에서 아이콘 다운로드해 static 폴더 내로 옮기기. (ball.png)
1-1 아이콘 사이즈 조절
1) navbar.html 내부 <div class="container-fluid"> 문장 아래에
<img src="static/ball.png" height="4%" width="4%"> 붙여 넣으면, Navbar에 아이콘 삽입된다.
### src= 경로 요청값 의미. h/w = 높이/너비 의미. %빼면 픽셀로 인지함. 이미지 크기 따라 다르게 세팅해야함.
1-2 아이콘에 공백 삽입하기
1) <img src="static/wand.png" height="4%" width="4%"> 뒤에 붙이면
붙인 개수만큼 공백이 삽입되어, 아이콘 이미지가 Navbar 글자와 간격이 조금씩 떨어짐.
2. navbar 표시되는 이름 바꾸기
<a class="navbar-brand" href="#">Hogwarts</a>
3. Bootstrap
3-1 레이아웃- container 사용
.container의 .은 class를 의미한다.
1) 화면의 크기에 따라 내용 좌우 여백 자동으로 배치해준다
default container을 base.html 삽입
<body>
{%include "navbar.html" %}
<div class="container">
{% block content %}{%endblock%}
</div>
내용 텍스트 시작점이 창에서 많이 떨어지게 되었다. container sm,lg,xl은 사이즈를 의미함
cf) div는 아무 의미도 없음. 단락을 의미한다.(줄바꿈이 들어감)
spans는 responsive
2) 내용 시작점 전에 줄바꿈 삽입
index.html에서 <br>작업
<br><br>
<h1>홈페이지</h1>
3-2 위 쪽 내용물 채우기
1) component Carousel의 with caption 카피
2) carousel.html 만들어 내부에 붙여넣기.
3) index.html의 <h1>홈페이지</h1> 제거하고 그 부분에 {% include "carousel.html" %}대신 삽입.
carousel.html을 끌고온다는 의미.
#여기서 타이핑 실수로 에러났음.
4) 사진 다운 받아서 bg1,2,3으로 저장함. (1280x400으로)
carousel 파일 내 <img src="static/bg1.jpg" 이런 식으로 바꿔줌
컴퓨터 캐시값 지우기 ctrl + shift + R
3-3 아래쪽 내용물 채우기 card
1)component - card - cards group 복사
2)card.html 만들어서 붙여넣기
3)index에 작성
<br><br>
{% include "card.html" %}
4)card.html img 삽입. 위치는 바디 내에서 변경
5)색상 변경
Card styles
Cards include various options for customizing their backgrounds, borders, and color.
배경 색 바꿔보기
3-3 base의 container 지우기,
index.html에 include card를 둘러싸서 <div class= "container"> </div>대신 붙이기.
이제 card에만 좌우 여백 생김.
3-4 폰트바꾸기
구글 폰트 검색, select, link 복사
base.html title 앞쪽에 붙여넣기.
4. 회원가입 사이트 만들기
1)이전 것 pre로 이름 다시 지어 백업해두고, 새로 만듦.
narvar.html에서 home 찾기. home 누르면 처음 페이지로 감. = route("/")
link -> "회원가입"으로 이름 바꿔줌
<a class="nav-link" href="/memcreate">회원가입</a>
이 것에 맞는 루트 작성해주기.
2) app.py
@app.route("/memcreate")
def memcreate():
return render_template('memcreate.html')
3)memcreate.html 만들기
{% extends "base.html" %}
{% block title %}회원가입{% endblock%}
{% block content %}
{% include "carousel.html" %}
<br><br>
<div class="container">
{% include "memform.html" %}
</div>
{%endblock%}
4) 중앙정렬
bootstrap - forms - layout- Gutters
w3school 검색, css reference
align-self: center
memform의 <h1>에 스타일 입력.
<h1 style="align-self: center"> ->잘 안됨
<h1 class="text-center">
5)이름, 전화번호 등 입력창 삽입하고 싶다
<h1 class="text-center">회원가입 폼</h1>
<br><br>
<form class="row g-3">
<div class="col-12">
<label for="inputEmail" class="form-label">Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email 입력하세요">
</div>
<div class="col-md-6">
<label for="inputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword1" placeholder="5글자 이상 알파벳, 숫자 포함해 작성하세요">
</div>
<div class="col-md-6">
<label for="inputPassword2" class="form-label">Password 확인</label>
<input type="password" class="form-control" id="inputPassword2">
</div>
<div class="col-12">
<label for="inputname" class="form-label">Name</label>
<input type="text" class="form-control" id="inputname" placeholder="이름을 입력하세요">
</div>
<div class="col-12">
<label for="inputtel" class="form-label">Phone</label>
<input type="text" class="form-control" id="inputtel" placeholder="">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
내용 이렇게 수정.
5.입력받은 정보 데이터 베이스에 저장하기
1) member 데이터베이스 생성.
2) 테이블 만들고, 쿼리로 우선 하나 넣어보기
DROP TABLE if EXISTS member;
CREATE TABLE if not EXISTS member(
email VARCHAR(50) PRIMARY KEY,
PASSWORD VARCHAR(20) NOT NULL,
NAME VARCHAR(20) NOT NULL,
phone VARCHAR(20),
address VARCHAR(50)
);
COMMIT;
INSERT INTO member VALUES(
'rubeus@hogwarts.com',
'0000',
'해그리드',
'010-1488-1988',
'호그와트 숲'
);
3) app.py
@app.route("/memcreate",methods=['GET','POST']) #메소드마다 다르게 출력되라고 수정해주기
def memcreate():
if request.method == 'GET':
return render_template('memcreate.html')
else:
print(type(request.values))
return '성공'
memform.html에서
<form class="row g-3" action="/memcreate" method='POST'> # post방식이라고 정해줌
값을 입력했는데도 왜 데이터가 안넘어왔을까? memform에 이름 속성이 없기 때문이다!!!
id="inputEmail" name="inputEmail" 이런 식으로 전부 아이디랑 똑같게 넣어줬더니...
inputtel : 1
inputAddress : 1
inputPassword2 : 1
inputname : 1
inputPassword1 : 1
inputEmail : 1
내용 잘 넘어오는 것 확인.
4) 자, 이제 db랑 돌리게 준비해보자.
app.py
from flask import Flask, render_template,request,redirect,url_for
import os,pymysql
app= Flask(__name__)
print(__name__) #__main__ 값이 나온다.
@app.route('/')
def index():
return render_template("index.html")
@app.route('/memcreate',methods=['GET','POST'])
def memcreate():
if request.method == 'GET':
return render_template('memcreate.html')
else:
# print(type(request.values)) #딕셔너리임을 확인
# for key in request.values:
# print(key,":",request.values[key])
try:
conn = pymysql.connect(host='localhost',user='root',password='1234',db='member',cursorclass=pymysql.cursors.DictCursor)
with conn.cursor() as cursor:
sql = "INSERT INTO member VALUES(%s, %s, %s, %s, %s)"
cursor.execute(sql,(request.values['Email'],request.values['Password1'],request.values['Name'],request.values['Phone'],request.values['Address']))
conn.commit()
finally:
conn.close()
return "성공!"
5) 데이터 표 모양으로 출력되게 만들기
@app.route('/list')
def list():
return render_template('list.html') 추가하고,
list.html 만들어서
{% extends "base.html" %}
{% block title %}회원목록{% endblock%}
{% block content %}
<br><br>
<div class="container">
<h1 class = "text-center">회원목록</h1>
<br><br>
</div>
{%endblock%}
적어준다.
bootstrap - content - tables에서
hoverable rows에서 tabe table-hover 복사해온다.
over view의 전체를 복사해온다.
list.html에 붙여넣는다.
안에 <tr></tr> 한 행 한 행마다 데이터 수정해준다. 컬럼 5개(+1)
그 밑 row는 데이터 건 수 만큼 반복할 것이다.
입력 완료 할 때마다 mark otto mdo otto.... 이렇게 뜨네. 입력한 내용으로 반영될 수 있게 row 수정해줘야한다.
그러려면 우선 app.py부터 수정한다.
@app.route('/list')
def list():
try:
conn = pymysql.connect(host='localhost',
user='root',
password='1234',
db='member',
cursorclass=pymysql.cursors.DictCursor)
with conn.cursor() as cursor:
sql = "select * from member"
cursor.execute(sql)
result = cursor.fetchall() #몽땅 모은다.
print(result)
conn.commit()
finally:
conn.close()
return render_template('list.html',data = result) # data라는 이름으로 result를 보낸다.
이제 list.html에 data 연결하는 작업 하면 된다.
for문 돌려라
{% for item in data %} #for문 시작
<tr>
<th scope="row">{{loop.index}}</th>
<td>{{item['Email']}}</td>
<td>{{item['Password']}}</td>
<td>{{item['Name']}}</td>
<td>{{item['Phone']}}</td>
<td>{{item['Address']}}</td>
</tr>
{% endfor %} # 닫아주기
######
'2022.01. > 코딩 수업' 카테고리의 다른 글
| 01.26 softmax(확률), 추론(배치처리), 손실함수 (0) | 2022.01.26 |
|---|---|
| 01.25 퍼셉트론, 신경망 (0) | 2022.01.25 |
| 01.14 (0) | 2022.01.16 |
| 01.12 (0) | 2022.01.13 |
| 01.10 데이터 테이블 수정, 삭제, 파일 폴더 복사, 압축하고 풀기, 파이썬 함수 사용, 이메일 송신 (0) | 2022.01.10 |