happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경

에버디벨의 완성 :: 웹코딩 시작하기

안녕하세요.
에버디벨 운영자입니다.
여러분이 늘 이용해 주셔서 하루 5명 오는 사이트가 1000명이 오는 사이트가 되었고,
또 그 이유로 사이트를 운영을 멈추지 않아 저같은 평범한 사람이 책까지 쓸 수 있게 되었습니다.
여러분이 찾지 않았다면 진작 사이트 접었습니다.
저의 웹개발 경력 2년을 쏟아내어서 6개월의 집필, 8개월의 교정기간을 거쳐 [웹코딩 시작하기]가 출간했습니다.
웹코딩 시작하기는 HTML5를 시작으로 CSS3 -> jQuery를 학습합니다.
그리고 앞에서 배운 내용으로 간단한 소통사이트를 반응형으로 제작합니다.
보통의 책은 HTML5 + CSS3로 끝나고 혹은 HTML5 + CSS3 + jQery로 끝나지만 웹코딩 시작하기는 여기서 끝내지 않았습니다.
그 다음 바로 데이터베이스중 하나인 MySQL를 학습하고, 그 이후 PHP를 학습니다. 그리고 앞에서 만든 소통사이트에 회원가입, 로그인 기능은 기본으로 진행하며, 스크롤이벤트를 이용하여 스크롤을 내리면 AJAX를 작동시켜 게시물을 더 불러오는 기능을 구현하고 자기의 로그기록을 파일에 쓰기, 그 밖에 자신의 프로필사진, 커버사진 등록, 댓글 쓰기등의 기능을 적용합니다.
본서는 웹코딩을 처음하는 사람이 하나에서 끝나지 않고 처음부터 시작해 프로젝트까지 완성해가며 전체적으로 시스템이 어떻게 작동하는지 전반적으로 알게하기 위해 태어났습니다.
적어도 지구에서 가장 친절한 웹 입문서라고 생각하는 책입니다.
에버디벨로 부족하셨다면 웹코딩 시작하기를 추천합니다.

어제보다 나은 나, 오늘 보다 나을 내일의 나를 만드는 :: 웹코딩 시작하기

지은이 : 에버디벨 만든사람

목차보기

종이책 구입하기

전자책 구입하기

PART 1. 프론트엔드 HTML5 + CSS3 + jQuery

CHAPTER 1. HTML5

1. HTML5 소개

2. 메타 태그

3. 텍스트 태그

4. 이미지 태그

5. 하이퍼링크 태그(a 태그)

6. 리스트 태그

7. form 태그

8. 공간 태그

9. video 태그

11. svg와 canvas

12. table 태그

CHAPTER 2. CSS3

1. CSS 소개

2. CSS를 적용하는 세 가지 방법

3. 선택자(selector)

4. 텍스트를 꾸미는 CSS 요소

5. 가로 길이와 세로 길이 조정하기

6. 텍스트가 영역을 벗어날 때

7. HTML 엘리먼트의 위치 변경하기

8. 배경 꾸미기

9. 외곽선 긋기

10. float와 clear

11. 박스의 바깥 여백 설정하기

12. 박스의 안쪽 여백 설정하기

13. CSS 리셋

14. 애니메이션

15. transform

16. transition

17. display

18. 반응형 웹

19. 반응형으로 간단한 레이아웃 만들기

20. SVG 태그

CHAPTER 3. jQuery

1. jQuery 시작하기

2. 셀렉터

3. 엘리먼트 보이기와 숨기기

4. 클릭했을 때 무언가 하기

5. 마우스 포인터를 요소 위에 올릴 때 무언가 하기

6. 제이쿼리로 CSS 적용하기

7. 변수 사용하기

8. HTML 엘리먼트에 있는 텍스트 변경하기

9. HTML 태그 제어하기

10. 애니메이션 기능

11. 엘리먼트에 클래스 추가, 삭제하기

12. 엘리먼트의 이동

13. 폼 태그의 값 조정

14. 포커스

15. this 사용하기

16. 연산자

17. 함수 만들기

18. 변수에 대해서

19. 글로벌 변수와 로컬 변수

20. 조건문

21. 반복문

22. 스크롤 이벤트

23. AJAX

24. canvas 태그(HTML5)

project 나의 첫 웹서비스 만들기

CHAPTER 1. 나의 첫 웹서비스 프로젝트 소개

CHAPTER 2. 나의 첫 웹서비스 만들기 프로젝트 - front end

1. 메인 페이지 만들기(index.html)

2. 나의 페이지 만들기(me.html)

3. 모두의 페이지 만들기(all.html)

PART 2. 백엔드 MySQL + PHP

CHAPTER 1. MySQL

1. 데이터베이스란?

2. MySQL 시작하기

3. 데이터베이스 만들기

4. 테이블

5. 필드의 데이터 크기와 데이터형 지정하기

6. 테이블 생성하기

7. 필드의 추가, 수정, 삭제

8. 테이블 삭제하기

9. 테이블에 데이터 입력하기

10. 데이터 불러오기

11. 데이터의 값을 변경, 삭제하기

12. 테이블 초기화

13. 2개 이상의 테이블 사용하기(JOIN)

14. 집계함수

15. 그룹별 집계

16. 출력 결과의 정렬

17. 불러올 레코드 수 지정하기

18. 2개 이상의 테이블을 묶어 사용하기

19. 쿼리문 안의 쿼리문 서브쿼리

20. 특정 필드에 같은 값을 넣지 않는 방법

21. 서로 다른 필드의 값을 합쳐서 출력하기

22. 검색을 더욱 빠르게 하는 인덱스

CHAPTER 2. PHP

1. PHP 소개

2. 출력문

3. 주석

4. 변수

5. 연산자

6. 배열>

7. 데이터형

8. 조건문

9. 반복문

10. 함수

11. 함수 만들기

12. POST와 GET

13. 기능의 사물화

14. 코드의 재활용

15. PHP와 MySQL의 연동

16. 상수

17. 정규 표현식

18. 파일 업로드

19. 디렉터리 함수

20. 파일 함수

21. Anchor 태그의 ping 속성과 AJAX

22. 쿠키와 세션

23. 객체지향 프로그래밍

project 나의 첫 웹서비스 만들기

CHAPTER 3. 나의 첫 웹서비스 만들기 프로젝트 - back end

3-1. 회원가입 기능

3-2. 로그인, 로그아웃 기능

3-3. 게시물 등록하기

3-4. 게시물 불러오기

3-5. 댓글 등록하기

3-6. 댓글 불러오기

3-7. 게시물 공감하기

3-8. 모두의 페이지

3-9. 포토 업로드 기능

3-10. 나의 로그 만들기

네이버 스마트 에디터 ver2

HTML폼태그와 PHP,MySQL을 활용하여 데이터베이스에 데이터 저장 가능 하신분이면 어렵지 않습니다. ^-^
그렇지 않은 분은 PHP강좌와 HTML강좌를 보시고 이 포스팅을 보시면 됩니다 ^^

서버 셋팅이 안되신 분은 에버디벨에서 제공하는 개발 환경 구축 페이지를 보시고 구축해주세요.
맥 유저 링크

윈도우 유저 링크

네이버 스마트 에디터 설치법에 대해서 알아봅시다.

네이버 스마트 에디터를 적용할려고 하는데 네이버에서 제공하는 가이드 라인은 제게는 너무 어려워서

따로 설치방법에 대한 페이지를 만들어 보기로 했습니다. ^^

아래의 링크를 클릭 하시면 네이버 스마트 에디터가 무엇인지 알 수 있습니다.

네이버 스마트 에디터 보러가기

우리가 웹에서 글을 작성할때 사용하는 위지웍이죠^^ 글을 예쁘게 꾸며주거나 표를 넣는다거나 이미지를 넣는다거나 할 수 있는 툴입니다.

네이버 스마트 에디터를 설치하는 방법에 대해서 알아봅시다.

네이버 스마트 에디터의 파일은 위에서 아래의 링크에서 다운로드 하면 됩니다.

네이버 스마트 에디터 다운로드

그럼 mysql에 접속해주세요.

저는 nse라는 데이터베이스를 생성 후에 nse_tb라는 테이블을 생성하여 진행하겠습니다.

SQL

create table nse_tb(
no int not null auto_increment,
content mediumtext,
primary key(no));

위는 테이블 생성 명령문 입니다. 테이블을 생성 해주세요.

desc 명령어를 사용하여 제대로 들어갔는지 확인해 봅니다.

nse images

이렇게 데이터베이스 작업은 끝내구요. textarea 태그가 있는 문서를 작성합니다.

htdocs폴더에 nse폴더를 만들어 줍니다.

폴더 만들고 nse폴더에 index.php라는 파일을 만들어줍시다.

index.php파일의 내용은 아래와 같습니다.

index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>네이버 스마트 에디터 적용하기</title>
<style>
.nse_content{width:660px;height:500px}
</style>
</head>
<body>
<form name="nse" action="add_db_nse.php" method="post">
<textarea name="ir1" id="ir1" class="nse_content" ></textarea>
<input type="submit" value="전송" />
</form>
</body>
</html>

위의 소스에서 보듯이 데이터베이스 저장 페이지는 add_db_nse.php이구요.

전송방식은 post 폼태그 네임은 nse, textarea태그의 이름은 nse_content로 했습니다.

데이터 베이스 접속 파일을 생성 합니다. nse 폴더에 include폴더를 생성 후 connect_db.php파일을 만들어 줍니다.

include/connect_db.php

<?php
    $host = "localhost"; //당신의 호스트
    $user = "root"; //당신의 유저명
    $password = "root"; //당신의 비밀번호
    $db_name = "nse"; //사용할 데이터베이스

    $connect = new mysqli($host, $user, $password, $db_name);
    $connect->set_charset('utf8');
?>

이번엔 add_db_nse.php을 만들어 봅시다.
이 파일은 우리가 textarea에 넣는 내용을 데이터베이스에 저장 할 수 있게 해줍니다.

nse폴더 안에 index.php 파일과 동일 선상에 만들어 주시면 됩니다.

nse폴더에 add_db_nse.php파일을 만들어 주세요.

add_db_nse.php

<?php
    include "./include/connect_db.php"; // 데이터 베이스 접속 프로그램 불러오기
    $nse_content = $connect->escape_string($_POST['ir1']);
    $sql = "insert into nse_tb(content)";
    $sql .= " values ('{$nse_content}')";
    $res = $connect->query($sql);

    if($res){
        //입력 성공시
        echo "success";
    } else{
        echo "fail"; // 디비 입력 실패시 fail표시
    }
?>

그리고 테스트 해봅시다. 잘 작동 하는지 봅시다.

웹브라우저를 띄우고 localhost/nse/ 를 입력 하면 아래와 같은 화면이 나옵니다.

img nse

아무거나 눌러서 전송 버튼을 눌러 봅시다.

아래와 같이 success 가 뜹니다. 혹시 안되시는 분은 Q&A를 이용해 질문 해주세요.

img nse

그럼 실제 데이터 베이스에 내용이 잘 입력 된건지 확인해 봅시다.

mysql 에서 다음의 명령문을 입력합니다.

SELECT * FROM nse_tb;

위와 같이 입력하면 아래와 같이 입력이 잘 된걸 볼 수 있습니다.

img nse

그럼 이제 스마트 에디터를 설치 해봅시다.

처음에 네이버 스마트 에디터에 필요한 파일 다운 받으셨죠 압축 푸시면 nse_files 폴더 안에 아래의 파일들이 보이실 겁니다.

img nse

nse_files폴더를 통째로 htdocs의 nse폴더 안에 넣어줍니다.

그럼 nse폴더에 들어가면 아래의 파일과 폴더들이 존재하겠죠?

img nse

그럼 이제 거의 왔습니다. 흐흐

필요한 스크립트 삽입

index.php파일을 열어서

SCRIPT

<script type="text/javascript" src="./nse_files/js/HuskyEZCreator.js" charset="utf-8"></script>

위의 스크립트를 헤드태그 안에 넣어 주세요.



아래의 스크립트를 textarea태그 바로 아래에 넣어 주세요.

SCRIPT

<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "ir1",
    sSkinURI: "./nse_files/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
});
function submitContents(elClickedObj) {
    // 에디터의 내용이 textarea에 적용됩니다.
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try { elClickedObj.form.submit(); } catch(e) {} } </script>

그리고 submit 버튼에 다음의 이벤트를 추가 합니다.

onclick="submitContents(this)"

그럼 다음과 같아 지겠죠?

<input type="submit" value="전송" onclick="submitContents(this)" />

그럼 index.php의 내용은 아래와 같이 될겁니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>네이버 스마트 에디터 적용하기</title>
<script type="text/javascript" src="./nse_files/js/HuskyEZCreator.js" charset="utf-8"></script>
<style>
.nse_content{width:660px;height:500px}
</style>
</head>
<body>
    <form name="nse" action="add_db_nse.php" method="post">
        <textarea name="ir1" id="ir1" class="nse_content" >에디터에 기본으로 삽입할 글(수정 모드)이 없다면 이 value 값을 지정하지 않으시면 됩니다.</textarea>
        <script type="text/javascript">
        var oEditors = [];
        nhn.husky.EZCreator.createInIFrame({
            oAppRef: oEditors,
            elPlaceHolder: "ir1",
            sSkinURI: "./nse_files/SmartEditor2Skin.html",
            fCreator: "createSEditor2"
        });
        function submitContents(elClickedObj) {
            // 에디터의 내용이 textarea에 적용됩니다.
            oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
            // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.

            try {
                elClickedObj.form.submit();
            } catch(e) {}
            }
        </script>
        <input type="submit" value="전송" onclick="submitContents(this)" />
    </form>
</body>
</html>

이제 웹에서 index.php 파일을 실행 해봅시다.^^

그럼 아래와 같은 화면을 볼 수 있죠.

img nse

값을 넣어서 입력 입력해보세요. ^^

DB에 입력한 값 확인하기

간단히 DB에 있는 값을 불러오기만 하는 페이지를 만들어서 제대로 값이 들어왔는지 확인해 봅시다.

파일명은 show.php로 할거구요. index.php파일과 같은 폴더에 저장해 주세요.

show.php


<?php
    include "./include/connect_db.php";
    $sql = "SELECT * FROM nse_tb ORDER BY no DESC LIMIT 1";
    $res = $connect->query($sql);
    $showContent = $res->fetch_array(MYSQLI_ASSOC);
    echo $showContent['content'];
?>

위의 파일을 show.php로 저장하고,

웹 브라우저에서 실행해주세요 주소는 localhost/nse/show.php

nse images

위와 같이 스타일 등이 적용되어서 표시가 됩니다. ^^

사진 업로드할 때 업로드된 사진은 어디 폴더에 업로드 되는지 알아보겠습니다.
현재는 nse폴더에 있는 myPhoto에 저장되도록 설정되어있습니다.
이 폴더를 자신이 원하는 폴더로 변경하는 방법에 대해서 알아보겠습니다.
다음의 파일을 열어 주세요.

/nse/nse_files/에 진입후

/quick_photo_uploader/popup/에 진입후

FileUploader_html5.php

<?php
$sFileInfo = '';
$headers = array();
foreach ($_SERVER as $k => $v){

    if(substr($k, 0, 9) == "HTTP_FILE"){
        $k = substr(strtolower($k), 5);
        $headers[$k] = $v;
    }
}

$file = new stdClass;
$file->name = rawurldecode($headers['file_name']);
$file->size = $headers['file_size'];
$file->content = file_get_contents("php://input");

$newPath = $_SERVER['DOCUMENT_ROOT'].'/nse/myPhoto/'.iconv("utf-8", "cp949", $file->name);

if(file_put_contents($newPath, $file->content)) {
    $sFileInfo .= "&bNewLine=true";
    $sFileInfo .= "&sFileName=".$file->name;
    $sFileInfo .= "&sFileURL=/nse/myPhoto/".$file->name;
}
echo $sFileInfo;
?>

앞의 소스를 보면 myPhoto폴더가 2곳 적혀잇는 부분이 있습니다. 저 부분을 자신이 원하는 폴더 경로로 설정하시면 됩니다.
당연히 그 폴더는 생성해 주셔야 합니다. ^-^

혹시 작동이 이상한 경우 아래의 전체 파일을 링크하므로 받아서 시도해 주세요. 작동에 성공한 파일입니다.

전체 소스 다운로드

그래도 이상하면 아래의 에버디벨 페이스북 페이지에 문의 부탁드립니다.^-^ 페이지 좋아요도 부탁드립니다.

강좌로 돌아가기