GPT 활용 웹개발 기초 4주차

PIP Frezze로 패키지 한 번에 설치하기

# 터미널에서 실행
# pip list로 설치된 라이브러리 확인 가능
pip freeze > requirements.txt

# 새로운 가상환경에 라이브러리 한 번에 설치
pip install -r requirements.txt

라우팅 연습

주소에 따라 HTML 파일이 보이도록 처리

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def home():
    return render_template("motto.html")

@app.route("/music/")
def music():
    return render_template("music.html")

if __name__ == "__main__":
    app.run(debug=True, port=8080)

데이터 넘겨주기

# app.py 파일
@app.route("/")
def home():
    name = "sparta"
    motto = "한 번 뿐인 나의 인생... 행복하자"

    context = {
        "name": name,
        "motto": motto
    }
    return render_template("index.html", data=context)
    
    
/* HTML 파일*/
<div class="container">
    <div class="greeting">
      <h1>Hello, {{ data.name }}</h1>
      <h1 id="current-time"></h1>
    </div>

    <div class="todo">
      <h3>My life's motto</h3>
      <h2>{{ data.motto }}</h2>
    </div>
  </div>

페이지 이동 기능 만들기

motto.html 파일에 부트스트랩 CDN 추가

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

/* html 파일 내용 생략*/

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>

기존 Navbar css 코드 주석 처리

/* .navbar {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    
    position: fixed;
    width: 100%;
    
    font-family: "Poppins", sans-serif;
  } */

music.html 파일의 Navbar 코드 복사하기 ( >를 클릭해 코드를 접은 후 복사)

motto.html 파일의 Navbar 아래에 복사한 코드를 붙여넣기(빨간 구역: 기존 navbar / 초록 구역: 붙여넣은 navbar)

기존 Navbar의 weather 부분을 새로운 nav바 태그로 옮기기

기존 navbar 태그 삭제
html 파일의 navbar 태그 내에 a 태그의 href 속성을 {{ url_for('home') }} 형식으로 수정

# motto.html
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="{{ url_for('home') }}">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="{{ url_for('music') }}">Music</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Album</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Movie</a>
    </li>
  </ul>
</div>

# music.html
<div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{{ url_for('home') }}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{{ url_for('music') }}">Music</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Album</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Movie</a>
            </li>
          </ul>
        </div>

Database

DB의 종류

RDBMS(SQL) : Excel에 데이터를 저장하는 것과 유사함. 중간에 열을 더하기 어려운 대신, 정형화되어 있어서 데이터의 일관성이나 분석에 용이함 (예: SQLite, My-SQL 등)
No-SQL : 딕셔너리 형태로 데이터를 저장. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있음 (예: MongoDB)

SQLite

Python에서는 SQLite가 내장되어 있어 VScode에서 Extension 설치 후 파일이름.db 형식으로 파일을 만들어 사용 가능

SQLAlchemy로 DB 연결 & 테이블 생성

터미널에서 Flask-SQLAlchemy 설치
app.py 내에 Flask와 Database 연결 코드 작성
app.py 내에 DB 모델 정의

# 라이브러리 설치
pip install Flask-SQLAlchemy

# 코드 준비
from flask import Flask
import os
from flask_sqlalchemy import SQLAlchemy

basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] =\
        'sqlite:///' + os.path.join(basedir, 'database.db')

db = SQLAlchemy(app)

# DB 모델 정의(테이블 생성)
class Song(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String, nullable=False)
    artist = db.Column(db.String, nullable=False)
    title = db.Column(db.String, nullable=False)
    image_url = db.Column(db.String, nullable=False)

    def __repr__(self):
        return f'{self.artist} {self.title} 추천 by {self.username}'

with app.app_context():
    db.create_all()
    
# 터미널에서 테이블 생성
>>> from app import db, Song (엔터)
>>> db.create_all()

생성된 .db 파일 이미지

SQL로 DB 조작하기

데이터 넣기
데이터 확인
특정 조건에 만족하는 데이터 가져오기
데이터 수정
데이터 삭제

# 데이터 입력
song1 = Song(username="추천자", title="노래제목1", 
            artist="가수1", image_url="이미지 주소1")

song2 = Song(username="스파르타", title="노래제목2", 
            artist="가수2", image_url="이미지 주소2")

song3 = Song(username="스파르타", title="노래제목3", 
            artist="가수3", image_url="이미지 주소3")
db.session.add(song1)
db.session.add(song2)
db.session.add(song3)

db.session.commit()

# 모든 결과 값 확인
>>> Song.query.all()
# 첫 번째 데이터 가져오기
>>> song_list = Song.query.all()
>>> song_list[0] # 가수:노래제목 추천 by 추천자

# 조건에 맞는 데이터 가져오기
Song.query.filter_by(username='추천자').all()
# [가수:노래제목 추천 by 추천자, 가수1:노래제목1 추천 by 추천자]

Song.query.filter_by(id=3).first() # 가수2:노래제목2 추천 by 스파르타
Song.query.filter_by(title='노래제목').first() # 가수:노래제목 추천 by 추천자

# 데이터 수정
song_data = Song.query.filter_by(id=4).first()
song_data.title = '변경된제목'

db.session.add(song_data)
db.session.commit()

# 데이터 삭제
delete_data = Song.query.filter_by(id=4).first()
db.session.delete(delete_data)
db.session.commit()

4주차 학습 내용 활용 제작 웹페이지 파일

Project.zip

13.23MB

'항해 99 > Web' 카테고리의 다른 글

GPT 활용 웹개발 - 카드 삭제 기능 추가 (1)	2024.01.30
GPT 활용 웹개발 기초 5주차 - 웹 배포하기 (0)	2024.01.09
GPT 활용 웹개발 기초 3주차 - Python & Flask (0)	2024.01.09
GPT 활용 웹개발 기초 2주차 - javascript와 chatGPT 활용 (0)	2024.01.09
GPT 활용 웹개발 기초 1주차 HTML, CSS (0)	2024.01.09

개발 관련 공부방

GPT 활용 웹개발 기초 4주차 - DB, SQLite

'항해 99 > Web' 카테고리의 다른 글

티스토리툴바

GPT 활용 웹개발 기초 4주차 - DB, SQLite

'항해 99 > Web' 카테고리의 다른 글

'항해 99/Web' Related Articles

티스토리툴바