기본 콘텐츠로 건너뛰기

python - Web10

python - Web10

python flask10
html2

>>이어진 내용:


1. POST방식 전송

POST방식이 GET방식과 다르게 가지는 가장 큰 차이점음 url에 전송하는 데이터가 보이지 않는 다는 점이다. 데이터 크기에 제한이 없어 많은 데이터를 처리할 수 있지만 GET방식보다는 속도가 느리다.
(보조 자료: http://soul0.tistory.com/185)

2. POST방식으로 데이터 얻기(.py)

GET방식과 POST방식 모두를 통해 데이터를 얻는 코드
@app.route('/login', methods=['GET', 'POST'])
def login():
if(request.method =='GET'):
return render_template('login2.html')
else:
uid = request.form.get('uid')
upw = request.form.get('upw')
print(uid ,"and", upw)
if(not uid) or (not upw):
return render_template('error.html', msg ='비정상 접근')
if uid =='n' and upw=='1':
return redirect(url_for('mainService'))
else:
return render_template('error.html', msg='아이디 비번 확인')

@app.route('/main')
def mainService():
return 'main service'

@app.route('/login', methods=['GET', 'POST'])
:route인자에 methods를 통해 전송할 방식을 선택한다. 현재는 GET과 POST를 모두 사용하기 때문에 list를 이용해 두 방식을 모두 포함했다.

if(request.method =='GET'):
return render_template('login2.html')
: request.method를 통해 현재 데이터가 전송되는 방식을 얻는다. route의 인자는 methods(복수)형이고 request는 method(단일)로 철자에 주의해야 한다.

uid = request.form.get('uid')
upw = request.form.get('upw')
: login2.html을 보면 form 태그에 method='POST'를 설정했다. post방식은 submit을 통해 데이터를 전달했을 때 주소창을 통하지 않고 사용자의 눈에 보이지 않는 상태로 전송한다. request.form.get('data's name)을 통해 입력된 정보를 얻는다.  data's name은 input 태그에 있는 name을 의미한다.

f(not uid) or (not upw):
return render_template('error.html', msg ='비정상 접근')
:어떤 uid와 upw도 전달되지 않았다면 error.html 을 통해 템플릿을 만들어준다. 매개변수로 mag를 넣어 error.html의 파일에 있는 msg변수에 값을 전달해준다.

if uid =='n' and upw=='1':
return redirect(url_for('mainService'))
:uid와 upw의 값이 지정해 놓은 값과 같다면 로그인을 성공했다는 가정이다. url_for('mainServide)를 사용해 보여줄 주소를 만들어 redirect해준다.

else:
return render_template('error.html', msg='아이디 비번 확인')
: uid 와upw를 모두 입력했지만 미리 설장한 값과 달라 로그인을 실패했다는 가정이다. error.html을 템플릿 화면으로 보여준다.

@app.route('/main')
def mainService():
return 'main service'
:로그인 성공 후 보여주는 화면이다.


3.POST방식으로 데이터 얻기(.html)


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>로그인1111</h3>
<form action = "/login", method="POST">
<input type='text' name='uid' placeholder="ID" required autofocus/> <br>
<input type='password' name='upw' placeholder="PASSWORD" required/> <br>
<input type='submit' value="로그인"/>
</form>
</body>
</html>

<form action = "/login", method="POST">
:action인자의 값을 '/login'으로 설정해 이 태그가 얻은 데이터를 전송할 주소(서버의 스크립트 파일)을 정해준다. method는 POST방식으로 정했다.

<input type='text' name='uid' placeholder="ID" required autofocus/>
:input태크는 사용자가 입력할 수 있는 공간을 만들어준다. type을 통해 어떤 방식으로 입력받을 지를 결정한다. type='text'는 문자열을 입력하는 공간을 만든다. name을 통해 현재 태그의 이름을 정한다. placeholder는 문자열을 입력할 공간이 옅게 써진 글씨를 설정한다. required를 사용하면 해당 태그에 입력을 하지 않을 경우 다른 행위를 하지 못하게 막는다. autofocus는 미리 커서가 있을 위치를 설정한다.

<input type='password' name='upw' placeholder="PASSWORD" required/>
:type="password"로 지정해 비밀 번호를 입력할 수 있는 공간을 만든다.

<input type='submit' value="로그인"/>
:type='submit'은 인터페이스는 버튼 모양의 인터페이를 가진다. 이 버튼을 누르면 form 을 서버에 전송해주는 역할을 한다.

4. 자바스크립트와 jinja2를 이용해 경고창 띄우기

<script>
alert('{{ msg }}');
{% if url : %}
document.location.href="{{url}}";
{% else : %}
history.back();
{% endif %}
</script>
:자바 스크립트는 <sctipt>로 시작, </script>로 종료한다.

alert('{{ msg }}');
:alert는 경고창을 띄우는 함수다. {{msg}}는 jinja2를 사용한 부분이다. jinja2는 javascript나 html에 삽입할 수 있다. {{변수}}를 통해 인자로 전달받은 변수를 사용할 수 있다.

{% if url : %}
document.location.href="{{url}}";
{% else : %}
history.back();
{% endif %}
:jinja2의 if-else문을 사용하려면 {%%}을 사용한다. 모든 문장을 마무리했을 때는 {%endif%}를 써줘야 한다. document는 자바스크립트의 객체를 의미한다. 현재의 웹 페이지 자체를 가르킨다. location.href를 통해 링크를 걸어 현재의 웹페이지 위치를 인자로 전달받은 url로 바꾼다. history.back()는 이전 화면으로 돌아가게 만든다.

전체코드

1 .py
from flask import Flask, request, render_template, redirect, url_for

app = Flask(__name__)

@app.route('/')
def home():
return 'hello world3'

@app.route('/login', methods=['GET', 'POST'])
def login():
if(request.method =='GET'):
return render_template('login2.html')
else:
uid = request.form.get('uid')
upw = request.form.get('upw')
print(uid ,"and", upw)
if(not uid) or (not upw):
return render_template('error.html', msg ='비정상 접근')
if uid =='n' and upw=='1':
return redirect(url_for('mainService'))
else:
return render_template('error.html', msg='아이디 비번 확인')

@app.route('/main')
def mainService():
return 'main service'

if __name__ == '__main__':
app.run(debug=True)

2 login2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>로그인1111</h3>
<form action = "/login", method="POST">
<input type='text' name='uid' placeholder="ID" required autofocus/> <br>
<input type='password' name='upw' placeholder="PASSWORD" required/> <br>
<input type='submit' value="로그인"/>
</form>
</body>
</html>

3.error.html

<script>
alert('{{ msg }}');
{% if url : %}
document.location.href="{{url}}";
{% else : %}
history.back();
{% endif %}
</script>


실행화면

1. http://127.0.0.1:5000/


2. http://127.0.0.1:5000/login
   로그인이 실패했을 경우



3. http://127.0.0.1:5000/main
(로그인이 성공한-uid==n and upw==1-)



















라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

C언어 - 1~100 사이의 소수 구하기

  C 문제 정수 값을 인자로 받아서 소수인지 판단하는 IsPrime 함수를 정의하고 이 함수를 이용해 1 부터 100 사이의 소수를 모두 구해서 출력하는 프로그램을 작성하시오 .   1.main 함수 만들기 IsPrime 이라는 함수에 인자를 2 부터 99 로 넣어주는 함수를 만들어야 한다 . 반복을 위해 for 함수를 사용한다 . main 함수의 타입이 int 이기 때문에 return 값을 적어줘야 함 .   2.IsPrime 함수 만들기 딱히 반환해야 할 값이 없기 때문에 타입은 void 경우를 2 가지로 나눔 . ①if  인자가 2 일 경우 --> 2 는 소수이기 때문에 2 를 출력함 ②else  인자가 2 가 아닐 경우 --> 2 부터 ( 인자 -1) 까지의 수로 인자를 나눠서 모든 경우에 나머지가 0 이 아니면 소수임 . 즉 어떤 숫자로 나눠 떨어지면 소수가 아니라는 의미로 더이상의 경우를 확인할 필요가 없음 . 따라서 반복하던 for 문을 빠져나옴 . for 문이 끝난 후 인자의 값과 count 의 값이 같다면 count 의 어떠한 숫자로도 인자가 나누어지지 못했다는 의미이다 . 이는 소수라는 뜻과 마찬가지이기 때문에 이 경우에 인자를 출력한다 .   3. 기타 출력한 후 모습을 살펴보는데 IsPrime 에서의 출력이 숫자 끝에 콤마 (,) 가 붙기 때문에 모든 출력이 끝나도 마지막 숫자 뒤에 콤마가 붙어 있다 . 이를 없애기 위해서는 이스케이프 문자 ‘\ b’ 를 사용했다 . 출력 화면이 더 편하게 보이도록 ‘\b\n’ 를 썼으나 이럴 경우 '\b' 의 효과가 사라졌다 . ‘\b\b\n’ 처럼 사용했으나 결과는 역시나 \ n 의 효과만 나타날 뿐 \ b 의 효과는 없었다 . 이를 해결하기 위해 구글링도 했지만 적절한 답을...
댓글 쓰기
자세한 내용 보기

C언어 - 입력받은 숫자의 이진수 표현에서 1의 개수를 세는 코드를 짜기

C 언어 문제: 입력받은 숫자의 이진수 표현에서 1의 개수를 세는 코드를 짜기 이 문제를 해결하기 위해서는 시프트 연산자에 대해 알아야 한다. 컴퓨터에서는 숫자를 2진수로 표현하는데 정수는 32비트로 나타낸다. 가장 앞쪽에 있는 비트는 음수와 양수를 구분해 주는 비트이고 이 이하가 숫자를 의미한다. 시프트 연산자는 숫자를 이진수로 표현했을 때 연산을 편리하게 해 주는 연산자이다. 연산자에 대해 자세히 알고 싶으면 ( http://rockykim5581.tistory.com/19 )을 참고하길 바란다. 여기에서는 필요한 부분만 다룰 예정이다. 1. 숫자 입력받기 입력한 숫자를 변수에 대입해야 한다. 2.입력한 숫자의 이진수 표현에서 1의 개수 구하기 이진수에서도 비교 연산자를 사용할 수 있다. AND를 의미하는 &는 두 수가 모두 1일 때만 1(참)을 나타낸다. 이 성징을 이용하면 입력받은 숫자의 이진수를 셀 수 있다. 비트는 1부터 31가지 비교해야 한다.(32비트-사인비트-는 제외) 이 과정을 하기 위해서는 반복문이 필요하다. 여기서는 조건과 초기화, 반복후 실행하는 문이 있어서 for를 사용했다. 비교는 입력은 숫자(이진수 표현)의 n번째(이는 0아니면 1이다)와  n번째가 1인 숫자를 &으로 비교해서 둘 다 모두 1인 경우만 count라는 변수를 하나씩 올려준다. 그러면 입력받은 수의 이진수 표현 1을 셀 수 있게된다. 그러면 n번째가 1이라는 숫자를 어떻게 만들까? 이는 변수(one)를 하나 잡아 반복문의 실행에 따라 1을 시프트 연산자로 이동시킨 수를 대입한다. 예를 들어 처음일 때는 입력받은 수와 1을 옯기지 않은 상태로 비교, 두번째 자리를 비교할 땐 입력받은 수와 1을 한칸 옮긴 상태로 비교하는 식이다. 여기서 주의해야 할 점은 (비교하려는 자리의 수-1)만큼 시프트 연산자로 밀어줘야 한다는 것이다. 1이 한 자리도 차지하기 때문이다. <전체 코드> ...
댓글 쓰기
자세한 내용 보기

C언어 - 입력된 정수 홀수와 짝수로 나눠 크기순으로 출력하기

2 번째 주 - C 언어 문제 길이가 10 인 배열을 만들고 그 배열에 10 개의 정수를 입력 받는다 . 이 때 입력받은 정수가 홀수면 배열의 앞부터 채워나가고 짝수면 배열의 맨 뒤에서부터 채워나가는 프로그램을 만들어라 .( 정수는 항상 10 개를 모두 입력한다고 가정한다 .) 실행화면 조건 1. int arr[10], i, num[10];// arr = 짝수 홀수 정리할 배열 , num = 숫자 입력 배열 \ 2.int lennum =() ; // 배열 num 의 크기 , 배열 입력받을 때 for 문에서 10 으로 하지말 고 lennum 사용해서 받을 것 int lenarr =(); // 배열 arr 의 크기 , {1,3,5,7,9,1,8,6,4,2} 형식을 위해 사용 -->hint: sizeof 사용 3.lenarr 출력 포맷을 위 사진과 동일하게 만들기 위해 사용한다 . 처음과 끝은 { 과 } 를 사용하고 마지막 숫자 뒤에는 콤마가 없어야 한다 . -->hint: if 문 사용   < 풀이 > 코드는 총 4 부분으로 나뉜다 . 입력 받기 , 홀수 정리 , 짝수 정리 , 출력 .   1. 입력받기 입력 받기 위해 for 문을 사용해서 반복한다 . 여기서 조건을 만족시키기 위해 lennum 을 구해야 한다 . siezof 크기를 알려주는 함수인데 단순히 sizeof(num) 을 한다면 10 이 나오지 않는다 . 40 이 나올 것이다 . 이는 배열이 가진 인덱스 X 타입형의 크기 값이 총 배열의 크기이기 때문이다 . 따라서 lennum 을 구하기 위해서는 다음과 같이 해야 한다 . lennum = sizeof (num) / sizeof ( int ); for 문 안에서는 scanf 를 사용해 입력한 숫자를 num 배열에 넣는다 . 입력받기 코드   2. 홀수 정리 ...
댓글 쓰기
자세한 내용 보기