0205 / k_digital 42일차 / 웹 프로그래밍(Django)

0. 

  웹 프로그래밍.

  여태 해 온 것과 꽤나 다른 분야라 나름 재미있기도 하고 재미없기도 하다.

 

  어제에 이어 설문조사 사이트 만들기.

    기본 툴은 로또 번호 생성 사이트에서 했으므로 새로 안 사실들만 기록한다.

 

이전 작업 내역들은 어제자 포스트에. marune3.tistory.com/64

 

1) form

 

input태그 : type, name, id, value 값 설정
 #type : input 형식 #name : 유저가 보낸 post를 찾을 수 있도록 해주는 이름 #id : post 요청에 붙이는 id(label과 연동)   #value : name으로 꺼낼 수 있는 값들
 #name과 value. input 태그는 name을 key 값으로 value를 꺼낼 수 있다. (text, file 등을 업로드하면 따로 value를 설정할 필요가 없다)

 

label태그 : id, text
 #id : input 태그와 label을 연결 #text : 이용자가 선택하는 라벨에 어떤 값을 밀어넣을 값

form 태그를 입력한 html

위의 html 코드와 연결해서 보자면,

  form 태그는 input 태그와 label 태그로 이뤄져 있다. input+label 태그는 각각 하나의 보기를 의미한다.

 

  1. 각자 보기 항목마다 name(Choice.choice_select=가위)과 value(value=7=Choice.id)가 설정된다.

  2. 이용자가 선택한 보기의 name으로 value를 불러내 결과값을 POST가 받아들이게 한다.

  3. 받아낸 POST 요청을 vote url로 보내 처리한다

     #이 vote url은 따로 html 표기를 하지 않는다. 단순히 결과 처리만을 위한 url이다.

   

  위 사진에서 정의한 vote 함수는 vote url을 받아들인다. form 태그가 받아들인 정보는 이 과정을 거쳐 처리한다.

 

 

2) 관리자 페이지(/admin) 커스터마이징

 

class 생성 ; admin.ModelAdmin을 상속받는다
  커스터마이징 함수들을 등록한 새 클래스는 register로 추가해준다.

 

 명령어 몇 개

  1- fields : DB 리스트 ; 순서 바꾸기
  2- fieldsets : DB 리스트 묶기 ; [( '분류 이름', {'fields' : ['항목 이름'], 'classes' : [ ] }
  #fields는 가져와 분류해 묶을 항목 이름들을 리스트로 받는다. classes는 분류 조정이 가능하다. ex. 'collapse'는 감추기
  3- inlines : 추가 입력 항에 다른 테이블 끌어오기 ; 다른 클래스를 만들고 이를 끌어온다.
  #admin.StackedInline; 위아래 쌓기, admin.TabularInline; 옆으로 쌓기
  4- list_display : DB 테이블에 들어갔을 때 나오는 항목들
  #models.py에서 지정한 함수를 가져와 항목에 둘 수도 있다.
  5- list_filter : 일정 항목을 기준으로 필터 기능을 추가할 수 있다.
  6- search_fields : 일정 항목을 기준으로 검색할 수 있다.

 

   ##이렇게 고쳐 쓰는 변수명들은 종속. 바꾸면 안 된다.

 

3) css 이미지 적용

  Image 폴더 위치 : 같은 상위 폴더 안 css 파일 옆
       { background-image : url("image 경로"); }

 

4) Templates Extend

 

  1. settings.py => TEMPLATES => 'DIRS'에 경로 추가 => [os.path.join(BASE_DIR, 'templates')]

 

  2. html 파일들의 기본이 될 base.html을 설정(CSS 파일 적용도 한 번에)

  새로운 내용이 채워질 영역에 {% block content %} {% endblock %} 적용

  3. 각각 html마다 {% extends '내 base.html 경로' %}
   {% block content %} {% endblock %}
     을 적용. block content 명령어 사이에 다른 내용들을 집어넣는다.

 

최종 완성 페이지

 

---

웹페이지 메인화면 모습.

웹페이지 설문 화면.

웹페이지 결과화면.

## 모두 다른 화면이지만 기본 디자인은 유지한 모습을 볼 수 있다.

---

 ## 같은 맥락으로 extends를 통해 관리자 페이지(admin page)에도 같은 css를 적용할 수 있다.

 

오늘의 TML

 

html 문법들
{{ forloop.counter }} : for문이 돌 때마다 1부터 시작해 값이 하나씩 증가
hr 줄긋기
Simantic tag(그 자체로 의미를 가진 태그들) ; nav, header, article, footer ...

 

Mobirise

Front 구성을 쉽게 도와주는 프로그램
예쁜 사이트를 마음대로 구성해 다운받을 수 있다.