웹 스터디

토픽추가

토픽 웹 스터디 > 웹 서비스 만들기

개요

우리가 만든 웹에플리케이션은 글의 목록을 가져오고, 선택한 목록에 대한 자세한 정보를 보여주는 읽기 중심이다. 이것만으로는 웹서비스라고하기에 부족하다. 이번 과제는 추가 기능을 구현하는 것이다. 아래는 생각의 흐름이다.

구상

index.php

opentutorials.org에서는 글을 토픽이라고 부른다. 그래서 '추가'란 토픽을 데이터베이스에 추가하는 것을 의미하다. 토픽추가라는 버튼을 어디에 둘 것인가를 먼저 생각해보자. 필자는 토픽 목록의 상단에 '토픽추가'라는 이름의 링크를 만들고 이것을 클릭했을 때 토픽을 추가할 수 있는 화면(add.php)으로 이동하게 할 생각이다. 아래와 같이 토픽추가 링크가 토픽목록 위에 나타나도록 index.php 파일을 수정하자.

add.php

토픽추가 화면인 add.php의 화면 구성은 기본적으로 index.php와 같다. 차이점이 있다면 본문 영역에 제목과 본문의 내용을 입력 할 수 있는 양식이 나타난다는 점이다. 아래는 add.php 파일을 열었을 때의 화면으로 제출 버튼을 누르면 제목과 본문이 서버로 전송된다.이것을 하기 위해서는 사용자가 입력한 정보를 서버로 전송하는 방법을 알아야 한다. 그 때 사용하는 것이 form이라는 것인데, 생활코딩 HTML 수업에 폼에 대한 수업이 있다. 그것을 참고하자. 생활코딩 form 수업 바로가기

사용자가 제출버튼을 눌렀을 때 제목과 본문의 데이터를 서버로 전송하기 위해서는 이 정보를 받을 서버쪽 페이지가 필요하다. 필자는  add_process.php 라는 파일로 데이터를 전송 할 것이다. 어떻게 해야할까? 직접 생각해보자.

add_process.php

필자는 add.php 파일에서 전송한 데이터를 받아서 그 정보를 데이터베이스에 추가하는 목적으로 add_process.php 파일을 만들 것이다. 이 파일 내의 로직의 흐름과 이것을 이해하기 위해서 필요한 지식은 아래와 같다.

  1. add.php에서 사용자가 입력한 정보를 받는다. 
    사용자가 입력한 정보를 받아서 처리하는 방법을 알아야 한다. PHP 수업 사용자 데이터를 참고한다. 
    생활코딩 PHP 수업 사용자 데이터 편 바로가기
  2. 데이터베이스에 접속한다. 
  3. 사용자가 입력한 정보와 SQL 문을 조합해서 데이터를 추가하기 위한 쿼리를 생성한다.
    데이터를 삽입하는 SQL 문은 INSERT이다. INSERT에 대한 내용은 MYSQL 수업을 참고한다. 
    생활코딩 MySQL 수업 삽입 편 바로가기
  4. 쿼리를 데이터베이스에 전송한다. 

쿼리를 데이터베이스에 전송하면 add_process 페이지가 해야 할일이 모두 끝난다. 하지만 아직 두가지 할 일이 더 남아 있는데 아래와 같다. 

  1. 사용자에게 데이터가 잘 저장 되었음을 알려준다. 
    필자는 자바스크립트의 alert를 이용해서 삽입에 성공했음을 알려줄 계획이다. 
  2. 사용자가 입력한 토픽의 페이지로 페이지를 이동시킨다. 
    이 작업을 위해서는 사용자가 입력한 토픽이 데이터베이스 상에서 어떤 id 값을 가지고 있는지 알아내야한다. 
    이 때 사용할 수 있는 것이 mysql_insert_id()이다. 이 명령을 호출하면 PHP는 insert 문을 통해서 삽입한 데이터의 id 값을 돌려준다. PHP 메뉴얼을 참고한다. 
    PHP 메뉴얼 - mysql_insert_id 편 바로가기

필자의 코드

정답은 없다. 그리고 엔지니어링이란 수단과 방법을 가리지 않고 목적을 달성하는 것이다. 필자의 코드를 공유하기는 하지만 그것은 필자가 목적을 달성하기 위해서 선택한 수단일 뿐 정답은 아니다. 더 좋은 방법은 얼마든지 있을 수 있다. 그러니까 자신감을 가지고 문제를 해결해보자. 

코드

동영상 해설

댓글

댓글 본문
  1. thyoooon
    저도 사용자 데이터 편 바로가기 링크 안되요 ~
  2. 개판
    생활코딩 PHP 수업 사용자 데이터 편 바로가기

    링크 들어가봤더니 수업이 없어졌는데

    새로 리뉴얼 된건가요? 어떤걸 봐야하나요??
  3. 삼다도소년
    감사합니다^^ 20시간 듣고 다시 한번 읽어봤네요. 잘 정리가 되었습니다.ㅎ
  4. lovebang
    디비 연동은 역시나 어렵네요...ㅠㅠ...
    그래도 동영상 보면서 끝까지 할 수 있었네요~
    수고 많으셨습니다!!!
  5. paulo
    웹서비스 강의만 따라한 것으로는 과제를 수행하기 어려울 것 같네요. 오픈튜토리얼에 있는 관련 내용들을 좀 더 공부한 후에 이 과제를 수행하려고 합니다. 바로 과제를 못한 아쉬움이 있지만, 매우 소중하고 재미있는 경험이었습니다.
  6. 바닥
    안돼!!!! 여기서 막히다니 ㅠ
  7. egoing
    수정하겠습니다. 고맙습니다 ^^
    대화보기
    • 정보문
      데이타 베이스에 로 저장된 내용을 그대로 웹페이지에 전달해야 하는데
      소스보기처럼 보입니다. 특수문자로 변환됩니다. 이걸 실제 테이블로 보여야 하는데요.
      이고잉님은 어떻게 뿌리시는지 궁금합니다.<table></table>
    • 정보문
      답변의 품질이 높으면 --> 질문의 품질이 높으면으로수정하셔야 할 듯..
    • 정보문
      안녕하세요? 질문이 좀 이상하실 겁니다.보통 form을 post방식으로 submit하면 다음 단계는 request로 자료를 받아와서 서버에 저장합니다.저는 어떤 테이블을 통채로 가져와서 디비에 저장하고, 나중엔 디비의 자료를 나중에 그 자리에 그대로 끼워넣으려 합니다.이사갈때 물건을 따로 따로 포장하고, 나중에 다시 포장을 풀지만제가 원하는 것은 집을 통채로 집어넣고, 꺼내면 됩니다.그런데 테이블 여는 태그 < 가 & L T 로 보이는 문제가 있습니다.replace로 치환이 잘 안 되네요.토픽 추가 강의도 그런 문제가 발생할 수 있지 않나요?
    • egoing
      화이팅입니다. 고맙습니다 :)
      2013년 3월 27일 오전 12:53, Disqus <notifications@disqus.net>님의 말:</notifications@disqus.net>
      대화보기
      • 다음버튼
        http://ec2-50-112-229-98.us-we...https......n...
        2 일 더 걸렷지만, 작심삼일 멈추지 않고 쭉 달려보았습니다. 감사합니다. 이런 강의 만날 수 있어서 참 행복했습니다.추가에 이어서 수정 삭제 등의 기능도 넣어 보고 디자인도 만들어 보고 하겠습니다. ^^언젠가 생활 속의 작은 분야라도 제가 알고 있는 부분을 이런 방식으로의 강의를 만드는 일도생각해보겠습니다. ^^~