게시판에서 게시글을 추가하거나 수정할 때 사용하는 코드야.
html 위주의 코드들이어서 리스트에 비하면 비교적 쉬운 편이야.
코드 부터 살펴 보자구.

- bbs_edit.php

<?php
if (!defined('YOGI')) exit ; // 개별 페이지 접근 불가
if (!isset($_SESSION['ssuno']) OR $_SESSION['sslevel'] < $write_level) {
    echo '<script>alert("게시글을 작성할 권한이 없습니다."); </script>';
    echo "<script>history.back()</script>";
}; 
?>

<div class="w3-container w3-card-4 w3-light-grey w3-left-align">
  <?php
    if ($action == 'add') {
        echo '<h4 class="w3-center">게시글 추가</h4>';
    } else if ($action == 'edit') {
        echo '<h3>게시글 수정</h3>';
    } else if ($action == 'cmt') {
        echo '<h3>댓글 수정</h3>';
    }
  ?>

  <form method="post" action="<?php echo $_SERVER['PHP_SELF'] . $mode ; ?>" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo BBS_IMG_MAX; ?>" />
    <div>
    <label>제 목 :</label>
    <input type="text" name="subject" class="w3-input w3-border" id="subject" value="<?php echo $subject . '" '; 
    if ($action=='cmt'){ echo 'readonly';} else { echo 'required autofocus';} ?> autocomplete='off'>
    </div>
    <div class="w3-center w3-padding-small">
      <?php
      if ($action == 'add') {
          echo '<img id="img2">'."\n";
      } else if (!empty($linkfile)) {
          echo '<img id="img2" src="'.BBS_IMG_PATH . '/bbs_' . $linkfile.'" class="w3-image">'."\n";
      }
      ?>
    </div>
    <textarea name="content" class="w3-input w3-border w3-margin-bottom" rows="10"><?php echo $content;?></textarea>
  <?php
  if ($isFile == True) {  // 첨부파일 사용이면 파일버튼 보이게 
    echo '<input type="file" name="uploadfile" id="img1" class="w3-small" accept=".png, .jpg, .jpeg, .gif" onChange="showImg()">';
  } ?>
	  <div class="w3-center w3-margin">
		  <input type="submit" name="submit" value="저 장" />
      <input type="button" value="취 소" onclick="history.back()"/>
    </div>
  </form>
</div>

<!-- 선택한 그림파일을 화면에 바로 보여주는 스크립코드 -->
<script type="text/javascript">
  function showImg() {
    var input = document.getElementById("img1");
    var fReader = new FileReader();
    fReader.readAsDataURL(input.files[0]);
    fReader.onloadend = function(event){
        var img = document.getElementById("img2");
        img.src = event.target.result;
    }
  }
</script>

▶ if (!defined('YOGI')) exit

이 첫 줄은 bbs.php 에서 이미 설명했지?
정식 메뉴를 통하지 않고 이 파일을 실행하는 것을 막는 코드야.

▶ if (!isset($_SESSION['ssuno']) OR $_SESSION['sslevel'] < $write_level)

이 코드 역시 bbs_list.php 에서 설명했어. 회원의 등급($_SESSION['sslevel'])이 이 게시판의 글쓰기 권한($write_level) 보다 작으면 경고메시지를 주고 이전 페이지로 되돌아 가라는 조건문이야.
이젠 코드만 읽어 봐도 무슨 작업을 하는지 이해 되지?

▶ if ($action == 'add') { . . . }

다음 if 조건문은 이 화면에 들어 오기 전에 bbs_view.php 에서 받은 $action 변수의 값에 따라 상단에 제목을 출력하는 자리야.
이 bbs_edit.php 파일은 단독으로 사용될 수 없고 꼭 일단 리스트(bbs_list.php) 또는 게시글 보기( bbs_view.php)를 통해서 들어 오게 되어 있어.
그러니까 여기에 오기 전에 이미 $action 값을 받아 왔을거야.

▶ <form method="post" action="<?php echo $_SERVER['PHP_SELF'] . $mode ; ?>" enctype="multipart/form-data">~</form>

여기는 html 을 아는 분들에게는 익숙한 자리지?
그런데 보기 와는 달리 좀 어려워. 침착하게 생각하면서 읽어 봐.

여기서 action="<?php echo $_SERVER['PHP_SELF'] . $mode; ?>는 무슨 뜻일까?
이전 bbs_list.php 에서도 나왔던 중요한 전역변수가 나왔는데 $_SERVER['PHP_SELF']는 "나 자신" 파일을 뜻해. (꼭 대문자를 써야 해.)
Html의 폼에서 action 은 [확인(Submit)] 버튼을 눌렀을 때 입력내용을 보낼 파일을 뜻하잖아.
지금 만일 공지사항(notice.php) 이라면 나, 즉 다시 notice.php 로 보내라는 뜻이야.
그리고 지금 공부하는 이 bbs_edit.php 를 호출한 bbs.php 에서 include_once(YOGI_DIR . '/bbs_edit.php') 자리를 찾아 보면 바로 위에 $mode 변수의 값을 가지고 있어...

지금 이 입력화면이 리스트 상단의 [글쓰기] 버튼을 통해 들어온 것이라면 이 $mode 변수의 값은 ?mode=add&page=1 의 값을 가지고 있을거야.
그러므로 <?php echo $_SERVER['PHP_SELF'] . $mode; ?> 는 아래와 같이 대체되어 Html 로 인식될거야.

     action="/notice.php?mode=add&page=1"

만일 자유게시판(free.php)에서 추가하는 화면이라면 아래와 같은 Html 코드로 변환되어 화면에 출력할거야.

     action="/free.php?mode=add&page=1"

자, 이제 다시 위 url 로 notice.php 로 가면 무슨 일이 일어날까?
bbs.php 의 아래 자리를 찾아 들어가게 돼.

switch ($action) { // 인자로 들어온 action 값에 따라 이동한다.
//===== 추가,수정 ============================================
case 'add'   :
case 'edit'  :
case 'cmt'   :
    $isForm = true; 
    if(isset($_POST["submit"])) {  //<-- bbs_edit.php 에서 저장 누르면 요기로 와서
        if ($action == 'cmt') { $action ='cmt-edit';}
        $isForm = save_bbs($action, $bno, $catno, $mode, $isAlbum); //-- 추가,수정내용 저장
    } else {
    . . . 생 략 . . .

여기서 보면 $_POST["submit"] 로 submit 이 왔다는 것은 곧 bbs_edit.php 의 form 화면에서 [저장]을 눌러서 왔다는 뜻이야.
그 아래줄의 다음 라인에서 내용을 저장하는 거야.

▶ $isForm = save_bbs($action, $bno, $catno, $mode, $isAlbum)

이 라인에서 save_bbs() 는 PHP 의 내장 기본함수가 아니고 내가 만든 함수야.
저장할 때 검사할게 많아서 줄이 무척 길거든..
이 자리에 그 긴 코드를 아래에 쓰면 전체 흐름을 보기가 힘들어.
그래서 별도로 save_bbs() 라는 이름을 붙여서 저 아래 쪽으로 뺐어.
(이 save_bbs() 내용이 궁금하면 아래쪽에서 찾아 봐. 거기도 주석을 열심히 써 두었으니 영어 해석하듯 읽어 가면 대충 흐름은 이해할 수 있을거야.)

어쨌든 이 save_bbs()를 갔다 오면 둘 중 하나의 값을 가져와서 $isForm 에 넣게 돼.
이 $isForm 은 입력폼화면(즉, bbs_edit.php)을 출력 해야하는지, 아닌지를 결정하는 변수인데,
true 가 되면 bbs_edit.php 를 include() 하고, false 면 무사히 저장되었다는 뜻이므로 끝내고 다시 리스트 화면을 보여 주게 되는거야.

어때? 이해돼?
한 번에 바로 이해되면 당신은 천재야. 한 방에 이해될 리가 없어.
notice.php 에서 bbs.php 를 부르고, 다시 bbs.php 안에서 bbs_list.php 를 부르고, 여기서 [글쓰기]를 누르면 다시 notice.php?mode=add 로 인자를 붙여서 다시 notice.php 로 → bbs.php → bbs_edit.php → bbs.php 이런식으로 notice.php 뒤에 붙는 GET 인자에 따라 서로 꼬리에 꼬리를 무는 방식으로 다른 화면을 보여면서 화면을 처리하고 있어.
그리고 주소줄에는 오직 notice.php 하나만 보여 주어서 여기서 다 하는것 같지?
나도 처음엔 "뭐 이래?". . 했었어.
그러나 코드를 자꾸 보고 요기조기 수정하다 보면 어느 새 코드를 이해하는 자신을 발견할 수 있을거야.
여러분들도 틀림없이 그럴거야.

bbs_edit.php 의 아래쪽은 Html 의 <form...>~</form> 태그로 게시글 입력화면을 출력하고 있어.
bbs.php 에서 $action 값이 add, edit, cmt 가 되면 include로 이 bbs_edit.php 를 불러와서 게시글 입력창이 보이는 거지.
여기서 처음 보는 코드들 까지 알고 넘어 가자구.

▶ enctype="multipart/form-data"

이건 HTML 이 담당하는 기능인데 그림파일을 함께 보내려면 form 태그에 꼭 enctype="multipart/form-data" 로 지정해 주어야 해. 인터넷에서 검색하면 자세하게 알 수 있어.

▶ <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo BBS_IMG_MAX; ?>" />

그림파일을 첨부할 때 최대크게 제한을 지정하는 코드야.
여기서 지정한 크기 보다 더 큰 파일은 서버로 전송이 안되고 에러가 발생할거야.
최대 크기는 _config.php 파일안에서 상수 BBS_IMG_MAX 의 값으로 들어가니 최대 크기를 늘리고 싶으면 _config.php 에서 값을 조정하면 되겠지?
참고로 요즘 스마트폰으로 찍은 고해상도 사진을 첨부파일로 그대로 허용하면 월 500 원 짜리 여러분의 서버는 불과 몇 장 올리지도 못하고 하드 공간 꽉 차버리고 말거야...

▶ if ($isFile == True) { . . .}

$isFile 변수가 true 로 지정되어 있으면 게시글 입력창 아래에 [파일첨부] 버튼을 보이게 하고 이 버튼을 통해 그림파일을 함께 올릴 수 있도록 하고 있어.
free.php 파일에서 include_once(YOGI_DIR . '/bbs.php') 로 게시판을 부르기 전에 $isFile = true 라는 라인이 들어 갔던거 기억나?
여기서 true 로 지정했으니까 자유게시판에서는 글쓰기 화면에서 이 조건에 해당되서 아래 쪽에 [파일첨부] 버튼이 보일거야.

▶ <script type="text/javascript"> ~ </script>

앞서 자바스크립트는 여기서 공부할 범주를 넘어 선다고 이야기 했어.
그래서 여기서는 이 스크립트가 왜 필요한지, 무슨 역할을 하는지만 간단하게 설명할께.

원래 그림파일은 서버에 그림이 업로드 되어서 저장이 된 이후에 <img>태그를 통해 볼 수가 있어.
그런데 글을 작성하는 시점은 아직 서버에 게시글을 올리기 전이거든?
그러니 선택을 해도 아직 화면에 그림을 보여 줄 수가 없어.
그런데 그렇게 하면 내가 선택한 그림이 맞는지 아닌지 확인할 수 없잖아. 또 게시글을 저장한 뒤에 그림이 보이는데, 그림이 틀리면 다시 수정으로 들어가 바꿔야 할거야.
이때 선택한 그림을 먼저 보여 줄 수 없을까?
바로 이런 때 자바스크립이 있으면 가능해.

코드 중에서 [파일선택]을 보여주는 태그는 다음과 같아.

<input type="file" name="uploadfile" id="img1" class="w3-small" accept=".png, .jpg, .jpeg, .gif" onChange="showImg()">

여기서 onChange="showImg()" 가 이 버튼이 선택되어 변화가 생기면 showImg() 라는 자바스크립 함수를 실행하라는 명령이야.
그러면 맨 아래 쪽의 아래 스크립트가 실행돼.

  function showImg() {
    var input = document.getElementById("img1");
    var fReader = new FileReader();
    fReader.readAsDataURL(input.files[0]);
    fReader.onloadend = function(event){
        var img = document.getElementById("img2");
        img.src = event.target.result;
    }
  }

위 스크립트가 하는 일을 간단하게 해석하자면..
id="img1" 이라는 자리를 찾아서 그곳에 저장된 선택파일의 경로와 파일명을 찾아서 id="img2" 의 자리에 있는 src 속성에 넣어서 보여줘라... 그런데 id="img1" 는 지금 [파일선택] 버튼 자리에 있고, id="img2" 는 본문 내용 위에 있지?
그러니 선택한 파일을 그 자리에 보여 주게 되는 거야.

어렵지? 솔직히 나도 잘 몰라..ㅠ
다행히 요기보드에는 자바스크립트는 거의 사용하지 않아. 그래도 충분히 멋지게 잘 작동한다구.
그러나 여러분이 앞으로 웹프로그래머가 꿈이라면 이 자바스크립은 반드시 정복해야 할 언어야.
각오하는 게 좋아.