[LG U+ 5기]/Study

[3월][5주차] PYTHON WEB (4) + 실습

jjanggun0930 2025. 3. 31. 22:14

2025.03.31

 

앞에서 만든 work_flask 이어서 사용 ~~

 

[3월][5주차] PYTHON WEB (3) / 쉬운.ver

2025.03.31 앞서 진행한 (1), (2) 의 과정을 아주아주 쉽고 빠르게 가능하다는 것...! ^^.....cd\# cd\ : User에서 빠져나오기 C:\># 빠져나온 상태C:\>mkdir venvs# "venvs" 라는 이름의 디렉토리 파일 만들기# mkdir :

jjanggun0930.tistory.com

이번엔 

html 사용해서 웹 구현하기

1. html 넣을 templates 폴더 생성

work_flask 폴더 → templates 폴더 생성  

templates 폴더 생성

 

txt 파일 생성 → 이름바꾸기 → hello.html로 변경

 

이떄, 지금 아래 사진은 html이 templates 밖에 나와있는데, 안에 넣어줘야함..^^ 안그럼 오류납니다.

txt 파일 새로 만들기 → hello.html 변경

 

생성후에 메모장으로 열기 

hello... 템플릿폴더 안에 넣어야 합닏...^^

2. html 작성

열리는 메모장에다 작성후 저장

<!-- hello.html -->
<!doctype html>
<html>
   <head>
      <title>HELLO</title> <!-- 브라우저 탭에 표시될 제목 -->
   </head>

   <body> <!-- 실제 브라우저에 보여지는 화면 부분 -->
      <h1>Hi~~~~{{ name }} </h1> <!-- h1: 가장 큰 제목 태그. name은 템플릿 변수 -->
   </body>
</html>

3. 파이썬 코드로 구현

routes.py 파일 수정

# -*- coding: utf-8 -*-
from flask import Flask, render_template
app = Flask(__name__)

# 요청 URL을 통해 전달된 값을 
# html에 전달
@app.route('/hi/<user>')
def hi(user):
    return render_template('hello.html', name = user)
                          # 대상 html 파일 / # name 파라메타 = user

if __name__ == '__main__':
    app.run(debug = True)
            # 디버그 트루

 

CMD 창에서> python routes.py 프롬프트 실행 시키면

 

html 영역 생긴거 확인 가능 !

(1),(2)에서는 브라우저 주소창에 치면 바로 문장이 출력됐는데,

이제는 HTML 템플릿을 따로 만들어서 출력하는 것 !

+ 실습 1

user.html 생성 및 작성

<!-- user.html -->
<!doctype html>
<html>
  <body>
    <ul>
      {% for user in users %}  <!-- users라는 리스트를 반복 -->
        <li>{{ user }}</li>     <!-- 각 user를 하나의 <li>로 출력 -->
      {% endfor %}

      {% if var %}             <!-- var라는 값이 있으면 -->
        <h1> Hello {{ var }} ! </h1>     <!-- h1 태그로 출력 -->
      {% endif %}
    </ul>
  </body>
</html>

 

python 코드 짜기 routes.py

# -*- coding: utf-8 -*-
from flask import Flask, render_template
app = Flask(__name__)

# http://127.0.0.1:5000/
@app.route('/')
def index():
    return "Flask App!"

@app.route('/user/')
def hello():
    users = ['Frank', 'Steve','Alice','Bruce']
    var = 1
    return render_template('user.html', **locals())

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

 

구현하기

/user : 주소

+ 실습 2 ( 한 주소에 자동으로 페이지 변경 )

 

routes.py 코드 작성

from flask import Flask, redirect, url_for, request 

app = Flask(__name__)

@app.route('/admin')
def hello_admin():
    return 'Hello Admin'

@app.route('/guest/<guest>')
def hello_guest(guest):
    return 'Hello %s as Guest' % guest

@app.route('/user/<name>')
def hello_user(name):
    if name == 'admin':
        return redirect('/admin')
    else :
        return redirect(url_for('hello_guest', guest = name))

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

 

else : 

user 로 들어갔지만,
자동으로 guest로 넘어가는 모습 !

if name == 'admin'

user로 들어갔지만,
자동 관리자 url로 넘어가는 모습!!

+ 실습 3 ( POST / GET )

  • post 방식 : 노출되지 않도록 
  • get 방식 : 노출되는 방식
  • 어떤 방식으로 할지 method 작성
    화면에서 이름 입력시에
     
  • get 방식 :  사용자가 입력한 값이 주소줄에 노출되는 방식

입력후 전송하면 주소줄이 변경

  • post 방식 : 사용자가 입력한 값이 주소줄에 노출되지 않는 방식
    • ex) 비밀번호, 아이디 등등 입력값이 노출되면 안될 때 사용
      입력값이 안보임

asd.html 생성 및 작성

<!-- asd.html -->
<!doctype html>
<html>

<body>
  <!-- 사용자가 데이터를 입력하고 전송하는 폼(form) -->
  <form action="http://127.0.0.1:5000/login" method="get">
    
    <p> 이름 입력 </p> <!-- 입력 안내 텍스트 -->
    
    <!-- 텍스트 입력창: 이름을 입력받음 -->
    <p><input type="text" name="nm" /></p>
    
    <!-- 전송 버튼: 폼 데이터를 서버에 보냄 -->
    <p><input type="submit" value="전송버튼" /></p>

  </form>
</body>
</html>

 

routes.py 코드 작성

from flask import Flask, redirect, url_for, request, render_template

app = Flask(__name__)

# 127.0.0.1:5000/ 
# 해당 주소만 쳐도 바로 페이지가 뜨도록
@app.route('/')
def question():
    return render_template('asd.html')

@app.route('/success/<name>')
def success(name):
    return 'welcome %s' % name

@app.route('/login', methods =['POST','GET'])
def login():
    if request.method == 'POST':
        user = request.form['nm']
        return redirect(url_for('success',name = user))
    else:
        user = request.args.get('nm')
        return redirect(url_for('success',name = user))
        
if __name__ == '__main__':
    app.run(debug=True)

 

+ 실습 4 (로그인 화면 구현하기)

login.html 생성 및 작성

<!-- login.html -->
<!doctype html>
<html>
<head>
<title> 로그인 화면 </title>
</head>
<body>
아이디 : admin / 비밀번호 : 1234 을 입력했을 경우에만 '관리자'님 접속되었습니다!! <br>
그 외에는 아이디 또는 비밀번호를 확인하세요 !!!

<form action = 'http://localhost:5000/logchk' method = 'post'>
<p> 로그인: </p>
<p><input type = 'text' name ='id' placeholder='아이디' required/></p>
<p><input type = 'password' name = 'pw' placeholder = '비밀번호' required/></p>
<p>
<input type = 'submit' value ='로그인'/>
<input type ='reset' value = '입력취소/>
</p>
</form>
</body>
</html>

 

routes.py 코드 작성

# -*- coding: utf-8 -*-
from flask import Flask, redirect, url_for, request, render_template

app = Flask(__name__)

# 127.0.0.1:5000/ 
# 해당 주소만 쳐도 바로 페이지가 뜨도록
@app.route('/')
def question():
    return render_template('login.html')

@app.route('/logchk', methods =['POST'])
def login():
    user_id = request.form['id']
    password = request.form['pw']
    
    if user_id == 'admin' and password == '1234':
        return '"관리자"님 접속되었습니다!!' 
    else :
        return "아이디 또는 비밀번호를 확인하세요 !!!"

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

 

실행시키면

쨘 ! 화면이 나오고

  • 아이디 / 비번 맞으면 → "관리자"님 접속되었습니다 !!
  • 틀리면 → 아이디 또는 비밀번호를 확인하세요 !!!  

출력 !

아이디 / 비번 맞았을 때

 

'[LG U+ 5기] > Study' 카테고리의 다른 글

[4월][1주차] 플라스크 개발 (2) + html  (0) 2025.04.04
[4월][1주차] 플라스크 개발 (1) - ORM  (0) 2025.04.04
[3월][5주차] PYTHON WEB (3) / 쉬운.ver  (0) 2025.03.31
[3월][5주차] PYTHON WEB (2)  (1) 2025.03.31
[3월][5주차] PYTHON WEB (1)  (0) 2025.03.31

'[LG U+ 5기]/Study'의 다른글

  • 현재글[3월][5주차] PYTHON WEB (4) + 실습

관련글

티스토리툴바