Python3 - Todolist (GUI), use Database

안녕하세요 :)

 

파이썬 개발을 주제로한 여섯 포스팅은 GUI 환경의 Todolist 개발입니다.

 

 

이번에는 tkinter 라이브러리를 이용한 GUI 환경의 투두리스트를 개발해보겠습니다.

 

DB는 저번에 만들어둔 TodoDB를 그대로 사용할것입니다 ㅎㅎ

 

먼저 GUI 인터페이스를 구상하여야 하는데 그냥 완성된 모습을 먼저 보여드리고 과정을 설명드리겠습니다.

 

지난번과 마찬가지로 프로그램 종료 작업인 EXIT 를제외한 네가지 작업을 구현해둔 인터페이스는 다음과 같습니다.

 

먼저 프로그램의 상단에 Todo list box가 자리하고 있습니다.

이미 수행한 항목은 하얀색 글씨로, 아직 수행하지 못한 항목은 초록색 글씨로 출력되고 있습니다.

각각은 did 와 yet 버튼을 통하여 글씨의 색을 바꾸고 TodoDB의 dataTBL 의 Do 열을 0 or 1 로 초기화 할수 있도록  하였습니다.

 

중앙에는 insert 시 Contents열에 들어갈 내용을 입력 받을수 있도록 텍스트인풋박스를 하나 두었습니다. 현재 plan4를 입력하고 대기중입니다. 만약 입력하고 싶다면 저상태에서 ins 버튼을 눌러주면 리스트의 제일 하단으로 들어갈수 있게 하였습니다.

 

그리고 마지막 del 버튼을 통해 제일 마지막에 삽입된 내용부터 삭제할수 있도록 하였습니다.

 

인터페이스는 위와 같고 이제부터 코딩과정에 대한 설명을 시작하겠습니다.

 

먼저 제가 사용한 파이썬 GUI 라이브러리 tkinter는 자바의 swing패키지와 굉장히 흡사했습니다.

이전에 다루었던 카테고리인 Java 카테고리에서 마지막 포스팅을 한번 슥 보고 오셔도 ㅎ 도움이 되실것 같습니다

(다른게시물 홍보 맞음)

 

코딩 과정에 대해서 이야기 해보겠습니다.

 

1. GUI 라이브러리 설치

2. 기본 GUI 인터페이스 구현

3. 각 버튼에 대한 command 구현

 

크게 위의 4순서로 코딩을 진행하였습니다. 1번부터 찬찬히 다루어 보겠습니다.

 

 

 

GUI 라이브러리 설치)

앞서 언급한 내용처럼 저는 tkinter 라는 라이브러리르 사용하였는데요

이유는 잘 모르겠지만 pip3 명령으로는 라이브러리가 설치되지 않아서 apt-get 명령을 통해 패키지를 직접 설치하였습니다.

apt-get -y install python3-tk

 

 

 

 

기본 GUI 인터페이스 구현)

위에서 살펴본 인터페이스 사진을 다시 한번 가져와 보겠습니다.

 

일단 기능적인 부분을 제외하고 눈에 보이는 것만 살펴보면 그래픽적인 인터페이스 요소는 다음과 같습니다.

1. 기본 창

2. 제일상단에 사용하고 있는 DB와 TABLE 정보을 입력한 Label

3. 계획 목록이 나타나는 리스트박스

4. 계획을 입력할때 사용하는 인풋텍스트박스

5. 함수를 실행하기위한 네가지 버튼

 

그럼 위의 다섯가지 요소 (기능적인부분 제외, <버튼을 눌렀을 때 생기는 일 등등...>) 코딩을 시작해보겠습니다.

 

가장 먼저 할일은 라이브러리를 포함시켜주는 것입니다. 나중에 DB도 연동하여 사용할것이니 pymysql라이브러리 또한 import 해주겠습니다.

 

 

그리고 root 라는 변수로 Tk객체를 선언하겠습니다.

이 root변수의 역할은 가장 기본적인 창의 이름, 창의 사이즈등 윈도우에 대한 설정을 하는 변수입니다.

 

창의 이름인 title 은 Todolist

geometry("창 가로사이즈 x 창세로사이즈 + 실행시 창을 나타낼 x좌표 위치+ y좌표 위치")

resizeable(가로 사이즈 변경허용, 세로사이즈 변경허용) , 투두리스트의 내용이 길어지면 가로사이즈를 키워야함, 세로의 경우 스크롤 바가 있기 때문에 괜찮음

 

새로 만들어진 창에 여러가지 프레임, 버튼 등의 컴포넌트를 부착한 이후 제일 마지막에는 mainloop()라는 함수를 이용하여 다 만들어진 창을 실행시켜주어야 비로소 우리가 코딩한 윈도우를 화면으로 확인할수 있습니다.

 

다음은 리스트 박스와, 사용하는 데이터베이스에대한 정보를 적어둔 Label에 대해 다루어 보겠습니다.

저는 리스트 박스, 리스트박스 컨트롤을 위한 스크롤바, DB정보 Label 의 세가지 요소를 한프레임에 담길수 있도록하였습니다. 이렇게 하는 편이 보기에 조금 깔끔한 감이 있었기 때문입니다.

 

 

107번의 pack함수 뒤에 side 부분이 프레임 내에서 해당 컴포넌트를 어디에 부착할지를 결정해줍니다.

저의 경우 스크롤바를 오른쪽 리스트 박스를 왼쪽으로 배치하였습니다.

115번과 116번의 라인은 스크롤바와 리스트 박스의 동작을 연동해 준것입니다.

 

 

109번 라인의 fetch() 함수만 잠깐 다루어 보겠습니다.

리스트박스를 처음 위의 코드처럼 삽입하면 아무런 내용도 들어가지 않게 됩니다. 하지만 위의 fetch함수를 정의하여TodoDB의 dataTBL의 contents 열에 해당하는 내용을 리스트에 삽입하겠습니다.

 

지난 텍스트 모드의 SELECT 함수와 비슷하게 커넥션 객체를 생성하고 해당 객체를 이용하여 리스트 박스에 insert 하였습니다. 15번라인의 for loop내의 문장을 보시면 리스트 박스의 제일 마지막 인덱스에 하나씩 차곡차곡 쌓는 스택 구조를 이용하였습니다. (스택구조를 잘 모르신다면 자료구조 카테고리의 포스팅을 참고해주세요)

 

스택의 원리처럼 이번에 사용할 insert 와 delete 는 FILO 형식입니다.

 

본론으로 돌아와 

다음으로 다루어 볼 컴포넌트객체는 키보드입력을 받을수있는 Entry객체 입니다. 선언은 간단하게 다음과 같습니다.

 

다음은 네가지 버튼에 대하여 다루어 보겠습니다. pack()함수는 선언한 컴포넌트를 창에 붙이는데 활용하는 함수이고, place()의 경우 x좌표와 y좌표를 받아 부착할 위치를 바꾸어 주는 역할입니다.

버튼 객체를 선언할때 사용하는 command 파라미터는 각각의 함수를 선언하여 매핑해줄 예정입니다. 코드는 다음과 같습니다.

 

 

이로서 기본 GUI 인터페이스를 구성해 보았습니다.

 

 

 

 

 

각 버튼에 대한 command 구현)

마지막으로 다룰 내용은 선언해둔 버튼들에 command를 주는 것입니다.

각각은 데이터 베이스와 연동되어 데이터 베이스의 데이터를 리스트박스에 넣고 빼고, 상태를 바꾸는 등의 커맨드 입니다.

 

가장 먼저 ins_btn에 사용된 insert 커맨드 부터 다루어 보겠습니다.

리스트 박스 객체의 index 함수를 사용하여 index(END)+1 로 제일끝 다음칸에 새로운 데이터를 삽입할수 있도록 하였고 새로운 데이터는 Entry 객체에서 가져온 텍스트 인풋을 string 타입으로 강제 변환하여 삽입했습니다.

 

그리고 새로운 데이터가 삽입된(한행이 추가된) 테이블을 다시 fetch 해와 마지막 인덱스의 값을 리스트 박스에 삽입하는 형식을 사용하였습니다.

즉, 새로운 인풋을 받아와 DB에 삽입, 데이터가 삽입된 DB 다시 fetch, fetch한 데이터를 리스트 박스에 삽입의 로직입니다.

여기서 조금 놀라웠던 것은 튜플의 인덱스 접근 방식이었습니다. 제가 파이썬을 제대로 공부한적이 없이 야매코딩을 해서 그런지 ㅎ 끝에서 부터의 인덱스 접근은 항상 length -n 으로 해왔는데, 그냥 음수로 접근하면 되더군요...ㅎ 

 

 

 

다음은 del_btn에 사용된 delete 커맨드입니다.

스택의 구조를 활용한다 했으니 마지막에 삽입된 데이터를 삭제하는 형식이어야 겠죠, 위의 insert 커맨드를 조금 변형하면 어려움 없이 코딩할수 있었습니다.

 

 

 

다음은 did_btn에 해당하는 cross_off 커맨드입니다.

 

curselection이라는 함수를 찾아내고 이를 이해하는 시간이 전체 고딩시간에 50퍼센트를 차지 한것같습니다.

위 함수는 마우스로 선택한 리스트의 요소의 인덱스를 튜플형태로 반환해주는 함수 입니다.

itemconfig는 선택된 아이템에 대한 명령을 주는 함수이고 위처럼 fg, 즉 글씨의 색을 흰색으로 변경해 주었습니다.

그리고 curselection함수의 인덱스를 활용하여 DB에서 사용될 인덱스로 index 변수에 매핑해 주었고 그아랬단의 63번 라인에서 이를 활용하였습니다.

 

이 커맨드로 인해 did(수행을 완료한 계획)는 글씨색이 하얀색으로 변할수 있게 해주었습니다.

 

 

 

다음은 yet_btn에 해당하는 cross_on 커맨드 입니다.

위의 cross_off 커맨드에서 정말 변한것이 별로 없는 복붙후 내용 수정으로 만든 커맨드 입니다.

did가 수행한 계획을 하얀글씨로 바꾸었다면 이 커맨드는 수행완료한 계획을 수행 이전상태로 만들어 주는 역할입니다.

 

이것으로 각 버튼에 대한 커맨드들도 다루어 보았습니다. 

 

그럼 이제 프로그램을 실행후 데모를 해보겠습니다.