팀소개 웹사이트 1일차

오늘은 1일차이여서 기획 부분에 많은 시간을 쏟았다.
오전 회의에서는 codepen과 구글을 통해 각자 맘에 드는 디자인을 뽑았다
다음 회의에서는 각자 역할 분담을 간단히 진행했고
마지막 회의에서는 CRUD 부분에서 CR은 해결햇지만 UD는 각자 해결하기로 했다.
이 부분에서 역할 분담하는데에 생각보다 공정하게 나누는 일이 어려웠다. 

 

 

1.프로젝트 설정

VSCODE에서 command palette를 통해 파이썬 설정

 

 

1-1 가상 환경 설정

mkdir Phoenix001
cd Phoenix001
python3 -m venv venv
venv\Scripts\activate  # Windows

 

1-2 패키지 설치

pip install Flask SQLAlchemy

 

 

 

2. 프로젝트 구조

 

내가 맡은 일은 생성 버튼을 누르면 DB에 팀원의 정보가 저장되고 그 정보가 HTML에 출력되어야한다.
그 후 선택한 팀원을 삭제할 수 있어야했다.

Phoenix001/
├── app/
│   ├── __init__.py
│   ├── models.py
│   ├── routes.py
│   ├── templates/
│   │   ├── add_team_member.html
│   │   └── team.html
│   └── static/
│       └── images/
├── run.py
└── phoenix001.db

 

 

2-1) run.py

애플리케이션을 실행하기 위한 스크립트. 이 파일을 실행하여 웹 서버를 시작함

 

 

2-2) phoenix001.db

SQLite 데이터베이스 파일. 이 파일은 팀 멤버 데이터를 저장하는 데 사용됨.

 

 

app/

2-3) __init__.py

 Flask 애플리케이션 인스턴스와 SQLAlchemy 데이터베이스 인스턴스를 생성하고 초기화함

 

2-4) routes.py

애플리케이션의 라우트를 정의하고, 각 라우트에 대한 요청 처리 로직을 구현함

 

templates/

2-5) team.html

팀 멤버의 목록을 보여줌

 

2-6)add_team_member.html

새 팀 멤버를 추가하기 위한 폼을 제공함

 

 

3. 핵심 코드 CRUD

 

3-1) Create (생성)

 

@app.route('/create_team_member', methods=['POST'])
def create_team_member():
    if request.method == 'POST':
        # 요청에서 데이터 추출
        data = request.form
        new_member = TeamMember(
            username=data['username'],
            image_url=data['image_url'],
            mbti=data['mbti'],
            collabo_style=data['collabo_style'],
            advantage=data['advantage'],
            blog_url=data.get('blog_url', '')
        )
        # 데이터베이스 세션에 추가하고 커밋
        db.session.add(new_member)
        db.session.commit()
        return redirect(url_for('index'))

 

 

3-2) Read (읽기)

 

@app.route('/')
def index():
    team_members = TeamMember.query.all() 
    return render_template('team.html', team_members=team_members)

 

3-3) Update (업데이트)

직접 사용하진 않았다.

@app.route('/update_team_member/<int:member_id>', methods=['POST'])
def update_team_member(member_id):
    member = TeamMember.query.get(member_id)
    if member:
        # 요청에서 새 데이터 추출 및 업데이트
        data = request.form
        member.username = data['username']
        member.image_url = data['image_url']
        # 기타 필드 업데이트...
        db.session.commit()
        return redirect(url_for('index'))
    else:
        return 'Member not found', 404

 

3-4) Delete (삭제)

 

@app.route('/delete_team_member/<int:member_id>', methods=['DELETE'])
def delete_team_member(member_id):
    member = TeamMember.query.get_or_404(member_id)
    db.session.delete(member)
    db.session.commit()
    return jsonify({'message': 'Team member deleted successfully'})

 

 

CRUD 작업 중 "Read", "Update", "Delete"는 특정 데이터를 식별하기 위해 매개변수가 필요함. 

회의 내내 열정이 있었던 팀원들에 덕에 아침회의가 기대된다