52일차 - 그누보드) 최신 게시글 (1)

밀레·2022년 12월 7일
0

코딩공부

목록 보기
123/135

경로

  • G5_PATH : php가 쓰는 경로 (서버 언어에서만 사용)
  • G5_URL : 도메인http:/부터 시작하는 경로 (프론트엔드가 사용! =태그에서 쓴다)
    ex) G5_IMG_URL 화면 출력되는 경로를 프론트엔드쪽에서 쓰기 편하게끔 만들어준 변수
<img src="http://~~~.dothome.co.kr/cms/img/logo.png" alt="그누보드5" title="">

변수 (구분자)

  • 게시판 구분자 -> $bo_table
  • 내용관리 구분자 -> $co_id
  • 게시글 구분자 -> $wr_id
$bo_subject // 게시판 제목
$wr_subject // 게시판의 게시글 제목 <!-- $subject로 다시한번 변수지정(편하게) -->
$wr_content // 게시글 내용 <!-- $content (많이 쓰는 애들 간편하게 부르기) -->
$thumb 		// 이미지정보에 해당하는 변수 Array <!-- $thumb[ src ] / $thumb[ ori ] -->

Q) 이미지경로(~~.jpg)가 이미지로 노출되게 ($thumb)

<?php
   echo '<img src=\" '.$thumb[ src ].' \" >';
?>

1. 최근게시글을 제작하려면 무엇부터 해야하나?

① 게시판 생성
② 게시글 삽입
③ 스킨 골라서 올바른 경로에 업로드
(그누보드에서 스킨 최신글 스킨 맘에 드는 것 골라서 latest 폴더에 업로드)
↓↓↓
(4,5,6번은 그누보드에 있기 때문에, 그누보드에서 그냥 작업할 경우 생략)
↑↑↑
⑦ 최신글 스킨 튜닝하기


2. (51일 복습) ./_common.php

오직 common.php를 호출하는 놈. 그 이외에는 역할 주지말것!
html 파일과 나란히 _common.php 두고, 그누보드 안의 common.php 호출

<?php
    include_once('./_common.php'); <!-- common.php 호출 -->
    include_once(G5_LIB_PATH. '/latest.php'); <!-- lib에서 latest.php 가져옴 -->
    
    <!-- latest 함수 호출 -->
    echo latest('pic_list', 'notice', 4, 23); <!-- 최근 게시골 노출 방식 -->
    <!-- latest( '사용할 스킨' , '게시판id', 노출할 갯수, 글자수 ); -->
?>

Quiz) free게시판의 '최근 게시'를 그누보드 본 스킨의 basic으로 출력되도록

<?php
    echo latest( 'basic', free, 5, 100바이트 );
?>  <!-- latest( '스킨', '게시판id', 노출할 갯수, 글자수 ); -->

3. 스킨 골라서 올바른 경로에 업로드

sir.co.kr 스킨방 → 최신글 스킨 다운 → 압축풀고 그누보드 스킨방에 넣기 (+서버 업로드)


  • 그누보드 테마, 다 부숴도 되도록 베이직으로 변경 (그전까지 medicine 사용했음)
  • 이제 그누보드 latest는 쓰는데, 테마방 안의 latest는 못 쓴다


4. 최신글 스킨 튜닝하기

결과물
index 페이지

sub 페이지


5. 스킨 골라서 올바른 경로에 업로드 (최신글x슬라이더)

① 그누보드에서 최신글 스킨 맘에 드는 것 골라서 다운&압축해제 → latest 폴더에 집어넣기
② echo latest 함수로 노출하기

그누보드 최신글 스킨을 이용한 메인 배너 스킨입니다.
스킨 적용위치는 상관없으나 head.php 파일의 <div id="container_wr"> 상위에 위치시켜주시면 됩니다.

<?php
/* thumb_width, thumb_width : 배너이미지 가로,세로 크기 */
$options = array();
$options['thumb_width'] = '1920';
$options['thumb_height'] = '680';
echo latest('theme/main_slider', 'main_slider', 5, 23, 0, $options);
?>

여분필드 사용 // IMAGE01 - txt_big : 여분필드 wr_1을 사용
쉽게 관리하는 배너스킨 // txt_small : 여분필드 wr_2을 사용
더보기아이콘 // href : wr_link1값이 있을경우 wr_link1값 적용(기본:href)

최신글x슬라이더 적용됨

③ 게시판 생성
④ 게시글 삽입

⑤-1) 썸네일 오리지널 이미지로 $thumb['ori']
⑤-2) 슬라이더에 게시판 제목/내용 삽입 - 관리하기 쉽도록

결과물


6. 최신글 스킨 - 상단 튜닝

이렇게 만들어보자

상단 웹 접근성을 지키기 위한 태그순서

여기까지, 태그 순서만 옮겼을때의 모습

CSS 삽입 후 완성된 형태

0개의 댓글