안녕하세요 COCY입니다.
이번 포스팅 [본격 게시판짜기]는
웹에서 가장 친숙하며, 기본적이고, 그렇지만 웹의 모든것이 담겨있는
"게시판"을 처음부터 직접 만들어봄으로써,
보다 웹개발에 친숙해지시기를 바라는 마음에서 시작된 야심찬 중장기 프로젝트성 포스팅입니다.
포스팅의 흐름은 무엇보다 게시판을 구현하는데 초점을 두었기때문에,
카테고리에 연연하지 마시고, Part1부터 차근차근 따라오시면 됩니다.
그리고 이 포스팅을 보시는데 웹개발에 지식이 전무 하시더라도 따라오실 수 있도록 노력할것이구요,
잘못된 정보나, 에러사항이 있으면 달게 받겠습니다. 그럼 시작합니다.
지금부터 본격 게시판 코딩에 앞서 앞으로 진행할 커리큘럼에 대하여 간략히 설명해 드리도록 하겠습니다.
모르는 용어가 있더라도 포스팅을 진행하면서 이해하시면 될 것 같습니다.
앞으로 만들게 될 게시판의 커리큘럼은 다음과 같습니다.
기초 : html > javascript > java> jsp > database = Model1 게시판
next : JSTL > jQuery > MVC > ibatis = Model2 게시판
next : Ajax > Spring Framework = RIA 게시판
보시는 바와같이 총 3단계의 게시판을 구상하고 있습니다.
각 단계에서 결과물은 게시판이지만, 단계를 거듭 할수록 진화할 것이구요,
쌩 기초부터 좀더 고급기술들을 사용하여, 고급스런 게시판을 만들어 보도록 하겠습니다.
다만, 디자인은 보장하지 못합니다.
그럼 진짜 지금부터 HTML로 시작하는 게시판을 만들어 보도록 하겠습니다.
개발환경은 다른 게시글을 참고하시어 다음과같이 셋팅해 주시면 되겠습니다.
개발툴 : Eclipse
-> http://cusmaker.tistory.com/entry/Eclipse-%EC%84%A4%EC%B9%98
JDK(JRE) : JDK 6.0(1.6)
-> http://cusmaker.tistory.com/entry/JDK-%EC%84%A4%EC%B9%98
Database : Oracle 10G XE
DB Tool : Sql Developer
-> http://cusmaker.tistory.com/entry/SqlDeveloper-%EC%84%A4%EC%B9%98
WebServer : Apache Tomcat 6.0
설치를 하면서 저희가 사용할 툴들이 어디에 쓰이는지에 대해 설명해드리겠습니다.
HTML 과 Javascript
이 두가지 언어만으로도 얼마든지 화려한 디자인의 홈페이지를 만들 수 있습니다.
HTML은 프로그래밍 언어라기보다 웹문서를 표시하는 규약정도로 이해하시면 되고,
이를 프로그램답게 꾸며주는 역할을 자바스크립트가 한다고 보시면 되겠습니다.
이 언어들은 웹서버(WAS가 아님)에 올라와서 단순히 웹브라우져만 있으면 모든 정보를 표시 할 수 있습니다.
이를 정적인 웹페이지(Static Web) 즉, 쉽게말해 죽은 홈페이지라 할 수 있겠습니다.
정적인 웹페이지는 단순 정보만을 제공할 수 있으며, 데이터의 변경이 일어나면 직접 수정을 해야합니다.
당연히 로그인이나 게시판같은건 생각 할 수 없겠습니다.
다만 아주 심플하기때문에 속도나 보안상의 측면은 고려하지 않아도 된다는 장점(?)을 가지고 있습니다.
그림에서 보시는 바와같이 개발툴로는 메모장부터 이클립스까지 다양하게 사용되며,
저희는 이클립스를 IDE(Integration Development Enviroment, 통합개발환경)으로 사용할 것입니다.
이클립는 오픈소스를 바탕으로 만들어진 무료 개발툴로서
HTML/Javascript뿐만아니라 각종언어개발환경 및
각종 플렛폼(안드로이드, 일반 어플리케이션, 웹어플리케이션)의 개발환경을 지원합니다.
현제 Juno버전까지 릴리즈 되었으며 각종 플러그인을 사용하면 편리한 개발환경을 구축할 수 있습니다.
JSP(Java Server Page) - JDK, Tomcat
웹 프로그래밍 언어는 정적인 웹페이지의 한계를 벗어나
데이터베이스와의 연동으로 동적인 페이지(Dynimic Web)을 만들 수 있게되었습니다.
웹 프로그래밍언어의 종류로는 PHP, ASP, Python, Ruby, Groovy 등이 있으며 이중에 저희가 사용할 언어인
JSP는 JAVA기반의 웹 프로그래밍 언어로서 J2EE의 웹컨테이너(WAS, WebApplication Server)위에서 동작합니다.
WAS역시 많은 제품들이 있는데요, 이중 무료제품인 Tomcat 을 사용합니다.
※ 웹서버와 웹 어플리케이션서버(WAS)의 차이
Oracle(Database) - SQL Developer
마지막으로 데이터베이스입니다.
데이터베이스 제품에도 여러 제품이 있는데요.
저희가 사용할 데이터베이스는 오라클입니다.
SQL에 능통하시다면 오라클에서 제공하는 CUI(Command User Interface)에 쿼리를 직접 날려 개발하셔도 좋지만,
빠른 작업과 편리한작업, 그리고 생산성을 위해 GUI(Graphic User Interface)로 제공하는 DB 접속 툴인
SQL Developer를 사용합니다.
자 그럼 설치가 끝나셨으면 본격적으로 게시판을 만들어 봅시다.
원래 게시판을 만들기에 앞서 게시판에 기능을 설계한 후
필요한 데이터들을 조사하고, Database를 설계하고, 정규화를 거쳐 구현하는것이 순서인데요,
이런거 다 생략하고, 그냥 몸이 가는대로 HTML부터 무작정 구현해 보도록 하겠습니다.
(이미 게시판에 대한 사용자 경험이 충분하고, 차후 무작정 설계로 빠진기능을 추가해보고,
몸소 설계의 중요성을 느껴보기 위함입니다. 절대! 귀찮아서 입니다.)
준비되셨으면 시작하도록 하겠습니다.
이클립스를 켜서 Dynimic Webproject를 하나 생성해 주시구요
WebContent 폴더안에 index.html 이라는 파일을 생성해 주세요.
먼저 게시판을 생각하면 제일 먼저 떠오르는 페이지가 있습니다.
바로 게시글 리스트 페이지입니다. 지금만든 index.html 페이지를 게시글 리스트페이지로 만들어봅니다.
백문이 불여일타란 말이 있습니다. 일단 따라 칩니다.
각 소스마다 주석을 달아 놓았으니 참고하시면 되겠구요, ※ HTML에서 주석은 <!-- -->
각 태그에 대해 자세히 알고싶으신분은 네이버나 구글링을 통해 확인하시면 되겠습니다.
허나 지금그냥 이런것이다 알고 지나가셔도 앞으로 진행하면서 반복학습에 의해 습득되실거라 생각됩니다.
소스코드를 다 치셨으면 웹서버를 연동하여 돌려봅니다.
소스대로 치셧다면, 스타일이 하나도 들어가지않은 게시판 비슷한 위와같은 화면을 보실 수 있겠습니다.
디자인이나 css는 지금 여기서 하지 않구요, 기능구현 후에 하도록 하겠습니다.
그래도 개발과정에서 눈에 거슬리신다면 테이블의 border속성이나 width, height속성으로 모양을 잡아주시는것도 좋습니다.
그런데 지금 리스트에 나오는 게시글 리스트는 분명 소스속에 들어있지않습니까?
그렇다면 이건 게시판이라고 할 수가 없겠습니다.
그렇다면 게시글 리스트는 어디서 가져와야할까요?
예. 데이터베이스입니다.
데이터베이스엔 데이터가 들어있나요?
예. 아직 없습니다. 테이블도 만들지 않았습니다.
하지만 데이터베이스를 다루는것은 좀더 뒤로 미루고
다음포스팅에선 글쓰기버튼과 게시글 입력 폼을 만들고,
자바스크립트를 이용하여 입력폼의 유효검증을 해보는 것 까지 진행하도록 하겠습니다.
수고하셨습니다.
다음장으로 -> http://cusmaker.tistory.com/53
'Lecture > HTML' 카테고리의 다른 글
| [스크랩] 버전별 explorer 적용법 (0) | 2012.06.28 |
|---|---|
| [본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼 (11) | 2012.06.13 |
| HTML 입문 (0) | 2012.04.17 |
