반응형
SQL 공부를 하고, 데이터 베이스와 친해질 겸 DB 내용에 중복 등 문제 제거 작업을 진행했습니다. 또한 이미 데이터 베이스는 마련이 되었고, flask까지 연결을 마쳤으니 이제 남은건 기능들을 추가하는 것입니다. 사실 이번에는 저 포함 조원들이 파이썬, SQL, Flask에 대해 아는 것이 거의 없다 시피해서 우리 멋진 조장님께서 큰 틀에대해 설명해줬고, 이 프로젝트는 SQL과 flask를 사용해 원활한 서비스를 하는 것이므로 디자인은 크게 신경쓰지 않는 방향으로 진행하기로 했습니다.
이번 추가 안건은 검색 페이지에 아래와 같이 목록을 미리 정할 수 있도록 하면 어떨지입니다. 얼른 따라가야할텐데 명령어 숙지부터 이 내용을 따라가기가 벅차다는 느낌이 들기도 하네요...
검색 페이지 html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 페이지</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
display: flex;
align-items: center;
}
h1 {
margin-right: 1rem;
}
select {
margin-right: 1rem;
}
input {
margin-right: 1rem;
}
</style>
</head>
<body>
<!-- 검색 폼 생성 -->
<form action="books" method="get">
<!-- 검색 제목 -->
<h1>검색</h1>
<!-- 장르 선택 select 태그 -->
<select name="genre" id="genre">
<option value="">전체</option>
<option value="로맨스">로맨스</option>
<option value="공포">공포</option>
<option value="액션">액션</option>
<option value="사회">사회</option>
<option value="소설">소설</option>
<option value="판타지">판타지</option>
</select>
<!-- 정렬 선택 select 태그 -->
<select name="sorting" id="sorting">
<option value="default">기본</option>
<option value="rating">별점순</option>
<option value="desc">내림차순</option>
<option value="asc">오름차순</option>
</select>
<!-- 검색어 입력 input 태그 -->
<input type="text" id="search-text" name="search-text" placeholder="도서명, 작가명 등 검색어 입력">
<!-- 검색 버튼 -->
<button type="submit">
<img src="magnifying-glass-icon.png" alt="검색 아이콘" style="width: 20px; height: 20px;">
</button>
</form>
</body>
</html>
반응형
'프로젝트' 카테고리의 다른 글
| [프로젝트] 파이썬 미니 프로젝트 Day.8 (0) | 2023.05.10 |
|---|---|
| [프로젝트] 파이썬 미니 프로젝트 Day.7 (2) | 2023.05.09 |
| [프로젝트] 파이썬 미니 프로젝트 Day.5 (0) | 2023.05.05 |
| [프로젝트] 파이썬 미니 프로젝트 Day.4 (0) | 2023.05.04 |
| [프로젝트] 파이썬 미니 프로젝트 Day.3 (0) | 2023.05.03 |