0. Python 기초 - 홈페이지와 데이터 주고받기(Flask-API)

2022.05.29 - [일등박사의 생각/[파공블]파이썬으로 공부하는 블록체인] - [파공블]파이썬으로 공부하는 블록체인(목차)

[파공블]파이썬으로 공부하는 블록체인(목차)

---

드디어 기초의 마지막 장 입니다!!

이번만 넘으면 이제부터는 진짜 블록체인에 대하여 공부할 수 있어요!!

 

오늘은  아래와 같이 우리가 만들 블록체인 지갑의  로그인 사이트를 만들어볼거에요!!!

 

이번 테스트의 계정 ID와 비밀번호는 

 

test_name = "pagongble"
test_pw = "pagongble123"
test_coin_count = 10000

 

라고 미리 약속을 해두어요!!

 

그리고 login.html을 아래와 같은 코드로 미리 template 폴더에 저장해주세요!!

 

## login.html 코드!! > 지난시간에 배웠던 내용과 비슷하지요!!?

<div class="text-center">
    <h1 class="h4 text-gray-900 mb-4">파공블 Block Chain Network</h1>
</div>

<form action="login" method="POST">
    <div class="form-group">
        <input type="text" name="wallet_id" placeholder="지갑ID를 입력해주세요!">
    </div>
    <div class="form-group">
        <input type="password" name="password" placeholder="비밀번호를 입력해주세요">
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox small">
            <input type="checkbox" class="custom-control-input" id="customCheck">
            <label class="custom-control-label" for="customCheck">Remember Me</label>
        </div>
        <input type="submit" value="로그인" />
    </div>

</form>


<hr>

<div class="text-center">
    <a class="small" href="register">Create an Account!</a>

</div>

 

template폴더에 추가!!!

 

 

이제 API를 사용하기 위하여

지지난시간에 배웠단 FLASK를 다시 떠올려 보아요!!!

 

from flask import Flask
from datetime import datetime
from flask import render_template
from flask import request
import requests 

app = Flask(__name__)

test_name = "pagongble"
test_pw = "pagongble123"
test_coin_count = 10000

@app.route('/')
def index():
     return 'Flask 웹사이트다!'

@app.route('/login', methods=['GET', 'POST'])
def login():   
    return render_template('login.html')

app.run()

 

이젠 반가운  flask 코드이죠!?^^

지난번의 기억처럼 코드를 돌린 뒤 url을 클릭하면

기본 사이트와 login 사이트가 나오게 됩니다!!

login 사이트에서의 "로그인" 버튼을 눌러보면 어떄요!?? 

클릭만 되고 아무 반응이 없지요!??

 

 

그런데!! flask 코드를 켜놓고 보면 빨간 줄이 가는것을 볼수 있습니다!!

 

클릭을 할때마다 flask 에서는 무슨일이 발생한다는것 같은데요~!!

이렇개 웹사이트에서의 클릭이 flask에 영향을주는

POST에 대하여 알아보겠습니다!!!

 

 

다시한 번 login.html 코드를 들어다보면!!

method = POST로 한다는 구절이 있습니다!! 

로그인 버튼을 클릭하면 POST 방식으로 flask에 전달한다는 뜻인데요~!

 

그래서!! flask 의 login 부분에 2줄을  추가해보아요!!!

@app.route('/login', methods=['GET', 'POST'])
def login():   
	##### 추가부분!!
    if request.method=='POST':
        print("login 버튼을 누름")
    ### 여기까지!@!!!
    return render_template('login.html')

 

그리고 다시 해볼까요!??

로그인 버튼을 누를떄 마다 새롭게 추가된 Print 부분이 나오는데요!!

이제 html 과 flask 가 연결된것 같아요!! ^^

 

다음으로는 입력한 id와 password가 들어오는지 봐볼까요!?

또 2개의 코드를 추가했습니다!!

@app.route('/login', methods=['GET', 'POST'])
def login():   
    if request.method=='POST':
        print("login 버튼을 누름")
        #### 추가부분 ###
        input_value = request.form.to_dict(flat=False)
        print(input_value)
        ###############
    return render_template('login.html')

이제는 id와 pw에 입력한 정보를 flask에서 받아감을 알 수 있습니다!!!

 

 

 

 

마지막으로!! 그럼 이제 로그인 기능을 완성해보아요!!

from flask import Flask
from datetime import datetime
from flask import render_template
from flask import request
import requests 

app = Flask(__name__)

test_name = "pagongble"
test_pw = "pagongble123"
test_coin_count = 10000

@app.route('/')
def index():
     return 'Flask 웹사이트다!'

@app.route('/login', methods=['GET', 'POST'])
def login():   
    if request.method=='POST':
        print("login 버튼을 누름")
        input_value = request.form.to_dict(flat=False)
        print(input_value)
        if (input_value['wallet_id'][0] == test_name) & (input_value['password'][0] == test_pw) :
            return "로그인성공!!!!!!"
        else:
            return render_template('login.html')
        
    return render_template('login.html')

app.run()

id와 비빌번호가 처음 약속한 값이 나오면 로그인 성공창이!!

그렇지 않으면 다시 login.html을 띄어줍니다!!

 

위의  gif와 같이!!!

아이디 비번이 틀리면 로그인이 안되고!!,

알맞은 아이디와 비번을 입력하면!! 로그인이 되는것을 확인할 수 있습니다!!

 

---

이상으로!! 블록체인을 배우기 위한

기초과정을 간단히 배워보았습니다!!!

 

파이썬을 데이터 분석을 위해서만 사용해보았던 분들꼐는

쉽지않고 어려운 과정일 수도 있을텐데요!!

 

앞으로 펼처질 블록체인 강의에서

지금까지 배운 내용을 바탕으로 블록체인 네트워크를 만들고

DApp인 지갑을 만들어보며 쭉쭉 성장하는 것을 느끼실 수 있을것 입니다!!

 

 

다음장에서는 이제 진짜 블록체인에 관하여 공부를 시작해봅시다!!

 

화이팅!!