web

고객 정보 회원가입 로그인 창 만들기

J.H_DA 2022. 3. 11. 17:13

vsc code로 새로운 폴더를 생성후 static 폴더와 static 폴더 안에 css 폴더를 생성하여 bootstrap에서 가져온 sample을 넣어 주었다.

 

main.py 에 아래와 같이 입력후

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

app = Flask(__name__) # name에는 내가 실행시키는 파일이 들어간다.

@app.route('/') # web: 주소->127.0.0.1:5000/ , localhost:500/

def index():
    return render_template("index.html")

# localhost/signup
@app.route('/signup/', methods=["GET"]) # web-> 주소 127.0.0.1:5000/signup/
def signup():
    return render_template("signup.html") # 두번째 페이지 만들기
@app.route("/signup", methods=["POST"])
def signup_2():
    _db = pymysql.connect(
    user = "root", # mysql 아이디
    passwd = "root", # mysql 비밀번호
    host ="localhost", # 내 컴퓨터
    db = "ubion"
    )
    cursor = _db.cursor(pymysql.cursors.DictCursor)
    _id = request.form["_id"]
    _password = request.form["_password"]
    _name = request.form["_name"]
    _phone = request.form["_phone"]
    _ads = request.form["_ads"]
    _gender = request.form["_gender"]
    _age = request.form["_age"]
    _regitdate = request.form["_regitdate"]
    sql = """
         INSERT INTO user_info VALUES(%s, %s, %s, %s, %s, %s, %s, %s)
          """
    _values = [_id, _password, _name, _phone, _ads, _gender, _age, _regitdate]
    cursor.execute(sql, _values)
    _db.commit()
    _db.close()
   
    return redirect(url_for('index'))
   
   
app.run(port=80)
 
 
 
 
 
 
 
 
 
 
 

index.html과 signup.html이라는 파일을 생성하여 아래와 같이 입력하였다.

<index.html 파일>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Signin Template · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">

   

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

   
    <!-- Custom styles for this template -->
    <link href="{{url_for('static', filename='css/signin.css')}}" rel="stylesheet">
  </head>
  <body class="text-center">
   
<main class="form-signin">
  <form>
    <img class="mb-4" src="{{url_for('static', filename='img/bootstrap-logo.svg')}}" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">Email address</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">로그인</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
  </form>
  <br>
  <a class="w-100 btn btn-lg btn-secondary" href="/signup" >회원 가입</a>
</main>


   
  </body>
</html>
<signup.html 파일>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Signin Template · Bootstrap v5.1</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
   

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
   
    <!-- Custom styles for this template -->
    <link href="{{url_for('static', filename='css/signin.css')}}" rel="stylesheet">
  </head>
  <body class="text-center">
   
<main class="form-signin">
  <form action="/signup" method="post">
    <img class="mb-4" src="{{url_for('static', filename='img/bootstrap-logo.svg')}}" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">회원 가입</h1>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInput" name="_id" placeholder="name@example.com">
      <label for="floatingInput">ID</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" name = "_password" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingName" name ="_name"placeholder="name@example.com">
      <label for="floatingName">이름</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingPhone" name="_phone" placeholder="name@example.com">
      <label for="floatingPhone">전화번호</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingAds" name ="_ads" placeholder="name@example.com">
      <label for="floatingAds">주소</label>
    </div>
    <div class="form-floating">
      <input type="number" class="form-control" id="floatingGender" name="_gender" placeholder="name@example.com">
      <label for="floatingGender">성별</label>
    </div>
    <div class="form-floating">
      <input type="number" class="form-control" id="floatingAge" name="_age" placeholder="name@example.com">
      <label for="floatingAge">나이</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInputRegitDate" name="_regitdate" placeholder="name@example.com">
      <label for="floatingRegitDate">가입일자</label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
  </form>
  <button class="w-100 btn btn-lg btn-secondary" type="submit">Sign up</button>
</main>
   
  </body>
</html>

ctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Signin Template · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">

   

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

   
    <!-- Custom styles for this template -->
    <link href="{{url_for('static', filename='css/signin.css')}}" rel="stylesheet">
  </head>
  <body class="text-center">
   
<main class="form-signin">
  <form action="/signup" method="post">
    <img class="mb-4" src="{{url_for('static', filename='img/bootstrap-logo.svg')}}" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">회원 가입</h1>

    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInput" name="_id" placeholder="name@example.com">
      <label for="floatingInput">ID</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" name = "_password" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingName" name ="_name"placeholder="name@example.com">
      <label for="floatingName">이름</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingPhone" name="_phone" placeholder="name@example.com">
      <label for="floatingPhone">전화번호</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingAds" name ="_ads" placeholder="name@example.com">
      <label for="floatingAds">주소</label>
    </div>
    <div class="form-floating">
      <input type="number" class="form-control" id="floatingGender" name="_gender" placeholder="name@example.com">
      <label for="floatingGender">성별</label>
    </div>
    <div class="form-floating">
      <input type="number" class="form-control" id="floatingAge" name="_age" placeholder="name@example.com">
      <label for="floatingAge">나이</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInputRegitDate" name="_regitdate" placeholder="name@example.com">
      <label for="floatingRegitDate">가입일자</label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
  </form>
  <button class="w-100 btn btn-lg btn-secondary" type="submit">Sign up</button>
</main>


   
  </body>
</html>
 
728x90

'web' 카테고리의 다른 글

코로나 데이터로 웹에 테이블 생성  (0) 2022.03.03

'web'의 다른글

  • 현재글고객 정보 회원가입 로그인 창 만들기

관련글

티스토리툴바