CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등
많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin.

 


1. 기본적으로 jQuery Plugin 이므로 jQuery 를 먼저 호출 
2. Script 호출

<!-- 상단 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css">


<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>




3. HTML 요소는 아래처럼 하시면 됩니다.

<!-- Background Image Parallax -->
<div class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
    <picture class="jarallax-img">
        <source media="..." srcset="<alternative_background_image_url_here>">
        <img src="<background_image_url_here>" alt="">
    </picture>
    Your content here...
</div>

<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
    Your content here...
</div>




4. CSS 를 선언하여 변경할 일이 있다면 플러그인 호출전에 미리 선언하시거나
    jarallax CSS 파일에 넣어두셔도 됩니다.

.jarallax {
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}



5. 플러그인 호출 방식에 대해서 안내 합니다.

- data attribute (데이터 속성 설정하는 방식)
  제공하는 옵션을 모두 속성으로 넣으셔도 됩니다.
  ( 옵션은 아래에 다시 첨부 합니다. )

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    Your content here...
</div>

<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
    Your content here...
</div>

<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
    Your content here...
</div>


- JavaScript 방식

import { jarallax, jarallaxVideo } from 'jarallax';
jarallaxVideo();

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});

 

<div class="jarallax"></div>



6. Options 안내

NameTypeDefaultDescription

type string scroll scroll, scale, opacity, scroll-opacity, scale-opacity.
speed float 0.5 Parallax effect speed. Provide numbers from -1.0 to 2.0.
imgSrc path null Image url. By default used image from background.
imgElement dom / selector .jarallax-img Image tag that will be used as background.
imgSize string cover Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values.
imgPosition string 50% 50% Image position. If you use <img> tag for background, you should add object-position values, else use background-position values.
imgRepeat string no-repeat Image repeat. Supported only background-position values.
keepImg boolean false Keep <img> tag in it's default place after Jarallax inited.
elementInViewport dom null Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13.
zIndex number -100 z-index of parallax container.
disableParallax RegExp / function - Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background.
disableVideo RegExp / function - Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background.



영상을 이용하는 경우 저사양 PC 에서는 다소 버벅임이 있을 수 있습니다.

 

출처 : https://happycgi.com/17022

DB의 특정 값이 어떤 값에 도달하면, 관리자에게 알림이 가도록 구현이 필요했다.

 

기본 명령어

crontab 리스트 확인
~] # crontab -l

crontab 삭제
~] # crontab -r

crontab 수정
~] # crontab -e

 

 

~] # crontab -e
편집보드는 Vi 편집모드로 작동.
(i명령어로 수정, esc누른 후 wq 엔터)

crontab 에 입력할 내용은
*/60 * * * * /usr/bin/php -e /var/www/html/checkdb.php
//매60분마다 실행
# 매분 /home/test.sh 실행
* * * * * /home/test.sh

# 매주 일요일 오전 2시 00분에 /home/test.sh 실행
0 2 * * 0 /home/test.sh

# 매일 오전 2시, 오후 2시에 /home/test.sh 실행
0 2,14 * * * /home/test.sh

# 매 10분마다 /home/test.sh 실행
*/10 * * * * /home/test.sh

# 매일 자정 0분부터 30분까지 /home/test.sh 실행
0-13 0 * * * /home/test.sh

 

 

출처 : https://blog.naver.com/crazytta/221244907179

'공부 > Php' 카테고리의 다른 글

[PHP] If 조건문 한줄로 축약  (0) 2023.12.29
[PHP] PC / 모바일 환경인지 체크하기  (0) 2020.01.21
트위터 OAuth Sign in 튜토리얼  (0) 2013.07.22
트위터 oauth with php  (0) 2013.07.22
php 파일 include  (0) 2013.01.11

기업 행사용 페이지를 제작하다, 로그인 시 한글 아이디로 로그인을 해야 할 경우가 생겨 한글아이디 로그인을 구현

1. 로그인 아이디는 '이름'

2. 암호는 '사번'

3. 이름이 중복인 경우, 사번으로 구분하여 로그인 처리

 

1. '이름'(한글) 로 로그인

로그인은 https://sir.kr/g5_skin/799 참고해서 구현하였다.

member_register_hangeul (1).zip
0.01MB

login_skin.php
member_confirm.skin.php
register_form.skin.php
register_result.skin.php
style.css

 

위의 파일을 풀면 다섯가지 파일 이 있음

이 파일들을 사용하려는 skin/member/user_skin 폴더에 덮어씌우면 됩니다.


그리고 원본파일을 한군데만 수정합니다.

bbs/login_check.php의 6행에 있는 아래 구문을



$mb_id      = escape_trim($_POST['mb_id']);
$mb_password = escape_trim($_POST['mb_password']);

(신버전은 아래와같이 들어가이있음)
$mb_id       = isset($_POST['mb_id']) ? trim($_POST['mb_id']) : '';
$mb_password = isset($_POST['mb_password']) ? trim($_POST['mb_password']) : '';




아래처럼 수정합니다.



$sql_nick = " select mb_id from {$g5['member_table']} where mb_nick = '{$_POST['mb_nick']}' ";
$row_nick = sql_fetch($sql_nick);

$mb_id = $row_nick['mb_id'];
//$mb_id      = escape_trim($_POST['mb_id']);
$mb_password = escape_trim($_POST['mb_password']);



어떤 방식인지 소스를 보면 아시겠지만 혹시 모르시는 분들을 위해 간단히 설명하자면 넘어온 별명값에 일치하는 아이디를 찾아서 로그인체크하는 방식입니다. 즉 그누보드의 기존 로그인 절차를 거의 그대로 이용합니다.




*
스킨파일에서 G5_URL, G5_BBS_URL 같은 경로에 해당하는 구문들을 g4 용으로 다 바꾸면 g4에서도 사용이 가능할 겁니다.

**
register_form.skin.php 43~50행에 아래와 같은 소스가 있습니다.

<?php
$ip_info = explode('.',$_SERVER['REMOTE_ADDR']);
$ip_str = $ip_info[0].$ip_info[1].$ip_info[2].$ip_info[3];
$ip_str = substr($ip_str,0,10);
$id_str = G5_SERVER_TIME + $ip_str;
if($w=='u')$mb_id = $member['mb_id'];
else $mb_id = "jsb".$id_str;
?>

여기서 아이디를 자동생성하는 거지요. 가입시점의 서버타임에 접속아이피를 대충 섞어서 10자리 숫자를 만들게 되어 있습니다. 그리고 앞에 임의의 접두사를 적당하게 붙여줬습니다.

현재 소스상에는 'jsb'라는 접두사를 썼는데 원하시는 단어로 바꿔도 무방합니다.

 

 

3. 이름이 중복인 경우(아이디가 중복인 경우), 암호(사번)로 회원 구분하여 로그인 처리

/bbs/login_check.php 파일 

 

$mb = get_member($mb_id);

...
...


// 회원아이디(여기선 이름)가 여러명일 경우 조건문
$sql = "select count(*) as count from {$g5['member_table']} where mb_nick = '{$_POST['mb_nick']}'";
$row = sql_fetch($sql);


if($row['count'] > 1){
	// mb_tel에 사전에 사번을 별도로 입력해두었다
    // 아이디(이름) & 사번이 모두 일치할 경우를 찾아내기
    $sql_nick = "select mb_id from {$g5['member_table']} where mb_nick = '{$_POST['mb_nick']}'  AND mb_tel = '$mb_password'";
    $row_nick = sql_fetch($sql_nick);
    $mb_id = $row_nick['mb_id'];
    $mb = get_member($mb_id);
}

 

 

이렇게 하면 끝.

<?php echo (조건)? "True입니다" : "False 입니다" ?>

1.  환경

 - 서버 : CentOs7 + Apache

 - 호스팅 :  iwinv 호스팅

 - 도메인 : 닷홈도메인

 - 보안인증서 : Globalsign Alpha SSL (닷홈구매)

 

2. 정리

 - 닷홈에서 SSL 보안인증서 유료로 구매하였다(1년)

 - 설치가 자동으로 된다해서 구매 후 이메일 인증까지 하였으나 안됨(당연..)
 - 서버는 타 호스팅을 이용하는것을 잠시 까먹음..

 - 고객센터 문의해서 인증서 파일을 받음

 

3. 설치

 1) 서버 특정 경로에 파일을 넣어줌 (권한 700, 루트계정만접근)

  - /경로/CertKey/  

 2) SSL 모듈 설치 

 yum -y install mod_ssl

 

mod_ssl 패키지 설치(SSL 암호화 지원 아파치 모듈)

3) ssl.conf 파일 수정

 nano /etc/httpd/conf.d/ssl.conf

 

...

<VirtualHost _default_:443>

# General setup for the virtual host, inherited from global configuration
DocumentRoot "/홈디렉토리경로"
ServerName 도메인주소:443

...
...

SSLCertificateFile /인증서경로/인증서이름.crt
SSLCertificateKeyFile /인증서경로/인증서키이름.key

...
...

 DocumentRoot와 Servername 은 httpd.conf 파일과 동일하게 해주어야함.

 

4) 짧은주소를 사용핟나뎜ㄴ httpd.conf 파일에서 AllowOverride none -> all로 수정

<Directory />
    AllowOverride All
    Require all granted
</Directory>

5) 아파치 재실행

 

 

php 그누보드 모바일 세션 로그인 유지

 

common.php 파일 수정

 

ini_set(“session.cache_expire”, 3600); // 세션 만료시간을 1시간으로 설정
ini_set(“session.gc_maxlifetime”, 3600); // 움직임이 없을 경우 1시간으로 설정

ini_set("session.gc_probability", 1); // session.gc_probability는 session.gc_divisor와 연계하여 gc 루틴의 시작 확률을 관리. 기본값 = 1

 

session_set_cookie_params(0, "/"); // 쿠키 세션 연동 유효시간 설정(초) 

// 0 으로 되어 있으면 브라우저 종료시 초기화됨

 

->> session_set_cookie_params(24 * 60 * 60 * 30 , "/"); // 쿠키 세션 연동 유효시간 설정(초) 

   // 24 * 60 * 60 * 30 = 30일 동안 유지

 

ini_set("session.cookie_domain", $g4['cookie_domain']); 

 

@session_start(); 

 

 

그누보드는 시간을 설정해도 로그인 유지가 안된다고 해서 다른 여러가지 방법을 찾아서

삽질을 했는데 혹시나 해서 시간 설정을 하니 바로 적용이 되었다.

 

https://hhache.tistory.com/6

 

php 그누보드 모바일 세션 로그인 유지

php 그누보드 모바일 세션 로그인 유지 common.php 파일 수정 ini_set("session.cache_expire", 180); // 세션 캐쉬 보관시간 (분)ini_set("session.gc_maxlifetime", 10800); // session data의 gabage collection 존재 기간을 지정 (초

hhache.tistory.com

 

홈페이지 제작을 할 때, 그누보드로 하는 경우가 많은데 기본 프로그램의 경로를 변경하여 1차적으로 숨기고 싶을 때가 있어서

찾아보니 생각보다 간단하다.

 

기본 그누보드 루트 경로에 있는 config.php 파일내에 변수를 수정하고 경로 폴더를 수정해주면 끝이다.

 

config.php 파일 내 94번째 정도 줄

...
...

define('G5_ADMIN_DIR',      'adm');
define('G5_BBS_DIR',        'bbs');
define('G5_CSS_DIR',        'css');
define('G5_DATA_DIR',       'data');
define('G5_EXTEND_DIR',     'extend');
define('G5_IMG_DIR',        'img');
define('G5_JS_DIR',         'js');
define('G5_LIB_DIR',        'lib');
define('G5_PLUGIN_DIR',     'plugin');
define('G5_SKIN_DIR',       'skin');
define('G5_EDITOR_DIR',     'editor');
define('G5_MOBILE_DIR',     'mobile');
define('G5_OKNAME_DIR',     'okname');

define('G5_KCPCERT_DIR',    'kcpcert');
define('G5_INICERT_DIR',     'inicert');
define('G5_LGXPAY_DIR',     'lgxpay');

define('G5_SNS_DIR',        'sns');
define('G5_SYNDI_DIR',      'syndi');
define('G5_PHPMAILER_DIR',  'PHPMailer');
define('G5_SESSION_DIR',    'session');
define('G5_THEME_DIR',      'theme');

define('G5_GROUP_DIR',      'group');
define('G5_CONTENT_DIR',    'content');


...
...

 

여기서 adm, bbs, theme 를 변경하고자 한다면

define('G5_ADMIN_DIR',      'admin');
define('G5_BBS_DIR',        'board');
define('G5_THEME_DIR',      'thm');

이런식으로 변경을 해주고, 실제 폴더 이름도 변경해주면 된다. 

1. 게시판 스킨 폴더 내에 write.skin.php 안에 하단부에 frwite_submit 함수

 function fwrite_submit(f){

...
...
...
        if (document.getElementById("char_count")) {
            if (char_min > 0 || char_max > 0) {
                var cnt = parseInt(check_byte("wr_content", "char_count"));
                if (char_min > 0 && char_min > cnt) {
                    alert("내용은 "+char_min+"글자 이상 쓰셔야 합니다.");
                    return false;
                }
                else if (char_max > 0 && char_max < cnt) {
                    alert("내용은 "+char_max+"글자 이하로 쓰셔야 합니다.");
                    return false;
                }
            }
        }
        
 ...
 ...
 여기에 코드삽입
 ...
 ...
 
        
       
<?php echo $captcha_js; // 캡챠 사용시 자바스크립트에서 입력된 캡챠를 검사함  ?>
 		// 파일을 첨부 했는지 확인
        var file_check = false;
        $(".frm_file").each(function(){
            if($(this).val()!=""){
                file_check = true;
                return false;
            }
        });
        // 파일을 첨부하지 않았다면 알림과 submit 취소
        if(!file_check){
            alert("파일을 하나 이상 첨부하세요.");
            return false;
        }

 

누보드 DB sql문을 입력하니 아래같은 에러가 발생함.

 

wr_datetime의 유효하지 못한 디폴트 값을 사용하셨습니다.

 

아래 코드를 phpmyAdmin 에서 쿼리문을 돌려준다.

ALTER TABLE `[에러나는_DB_칼럼]` CHANGE `wr_datetime` `wr_datetime` DATETIME NOT NULL;

alter table [에러나는_DB_칼럼] change wr_datetime wr_datetime datetime not null;

 

저는 g5_write_notice 쪽에서 에러가 발생해서 다음과같이 수정했습니다.

 

<style>
/* jquery datepicker 용 간단 CSS */
/* 출처 : https://sir.kr/g5_tip/16589 */

#ui-datepicker-div { background: #fff; margin: 5px 0 0 0; padding-top: 25px; box-shadow: 10px 10px 40px rgb(0 0 0 / 10%); }
#ui-datepicker-div .ui-datepicker-header { position: relative; margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-prev { position: absolute; display: inline-block; font-size: 12px; top: -23px; left: 0; }
#ui-datepicker-div .ui-datepicker-next { position: absolute; display: inline-block; font-size: 12px; top: -23px; right: 0; }
#ui-datepicker-div .ui-datepicker-title { position: relative; clear: both; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
#ui-datepicker-div .ui-datepicker-title select { height: auto; width: calc( 50% - 15px); min-width: 90px; padding: 4px 12px; border-radius: 0; }
#ui-datepicker-div .ui-datepicker-calendar { margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td { width: 35px; height: 30px; text-align: center; line-height: 30px; }
#ui-datepicker-div .ui-datepicker-calendar th:first-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:first-child > a { color: #dc3545; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:last-child > a { color: #007bff; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active { padding: 3px 6px; background: #6f42c1; color: #fff; font-weight: 600; }
#ui-datepicker-div .ui-datepicker-buttonpane { margin-top: 10px; display: flex; }
#ui-datepicker-div .ui-datepicker-buttonpane > button { flex: 1 1 50%; max-width: 50%; text-align: center; padding: .375rem; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:first-child { order: 2; background: #dc3545; color: #fff; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:last-child  { order: 1; }
 
</style>

그누보드는 기본적으로 Datepicker 플러그인을 포함하고 있다(최신버전기준)

 

 

게시판 스킨 작성 파일에(write파일) 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php'); // 플러그인 인클루드

...

...

...

<input class="datepicker frm_input" >

상단에 인클루드 해주고, 클래스 datepicker 추가해준다.

 

그리고 최하단에 스크립트 삽입하기

<!-- 달력 시작-->
<script type="text/javascript">
//<![CDATA[
$(function(){
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect:function(dateText, inst) {
            console.log(dateText);
            console.log(inst);
        }
    });
    $(".targetFocus").click(function(){
        $($(this).data("target")).focus();
    });
});
//]]>
</script><!-- 달력 끝 -->

 

날짜 포맷 방식 : dateFormat: "yy-mm-dd"

yy-mm-dd : 2015-10-25

yy/mm/dd : 2015/10/25

yy.mm.dd : 2015.10.25

yymmdd : 20151025

 

 

유튜브 영상 게시판 및 최신글 스킨 제작 시에 

영상 링크 입력 및 해당 영상의 썸네일을 노출시켜야 할때 필요한 정보이다.

 

영상은 ID 값만 입력시키도록 하였고 

해당 ID로 영상 재생 및 썸네일까지 긁어올 수 있다. 

 

ID만 으로 썸네일 긁어올 수 있고, 해상도도 정해서 가져올 수 있다.

 

 

http://img.youtube.com/vi/동영상ID/이미지형식.jpg

http://i.ytimg.com/vi/동영상ID/이미지형식.jpg

이미지형식이 해상도를 정할 수 있다.

- 고품질 (480 x 360) : hqdefault.jpg

- 중간품질 (320 x 180) : mqdefault.jpg

- 보통품질 (120 x 90) : default.jpg

동영상 배경이미지 (480 x 360) : 0.jpg

 

 

 

https://jasontody.tistory.com/227

 

[그누보드] 테이블을 엑셀로 다운받기

Table2excel 을 사용해 게시판 리스트를 엑셀로 다운로드 출력가능하다 1. 다운로드 버튼을 구현하고, 클릭 시 함수를 걸어준다. 2. 테이블 id를 설정 번호 제목 이름 날짜 1 제목입니다 작성자 2019.10.

jasontody.tistory.com

 

는 xlx 만 가능했는데 xlxs가 필요해서 작업함.

 

1. 버튼 추가

<button type="button" class="btn" value="excel 다운" onclick="ReportToExcelConverter()">

 

2. 관련함수 추가

<script src="../tableExport.min.js"></script>
<script src="../libs/FileSaver/FileSaver.min.js"></script>
<script src="../libs/js-xlsx/xlsx.core.min.js"></script>
<script src="../libs/html2canvas/html2canvas.min.js"></script>

관련함수 다운로드 : https://www.npmjs.com/package/tableexport.jquery.plugin

tableExport.jquery.plugin-master.zip
8.80MB

아래 파일은 필요한것만 받은 파일.

Libs Custom.zip
8.60MB&nbsp;/ 8.60MB

3. 자바스크립트 함수 추가

  function ReportToExcelConverter() { 
    $('#table2excel').tableExport(
        {
            type:'excel', 
            mso: {
                fileFormat:'xlsx',
                worksheetName : 'List'
            }

        }
    );
  };

 

 

------

2023.03.31. 

기존 그누보드 버전이 

1.12.4 가 head.sub 파일과 tail.sub 에 각각 추가되어 있었다.

 

개발자모드 콘솔에 tableExport is not a function 오류가 계속 뜨길래

jquery 버전문제로 판단되어 해결해보았다. 

 

tail.sub script 코드에는 주석처리를 해주고, 

엑셀다운버튼이 있는 list.skin.php 파일에 하단부분에

아래 코드를 추가해주었더니 해결되었다.

 

<?php
add_javascript('<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>', 0);
?>

순서는 아래와 같다.

 

<script src="<?php echo G5_THEME_URL ?>/skin/board/register_musitec/libs/FileSaver/FileSaver.min.js"></script>
<script src="<?php echo G5_THEME_URL ?>/skin/board/register_musitec/libs/js-xlsx/xlsx.core.min.js"></script>
<script src="<?php echo G5_THEME_URL ?>/skin/board/register_musitec/libs/html2canvas/html2canvas.min.js"></script>
<script src="<?php echo G5_THEME_URL ?>/skin/board/register_musitec/tableExport.min.js"></script>




<?php

add_javascript('<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>', 0);


?>

<script>
	  function ReportToExcelConverter() { 
    $('#table2excel').tableExport(
        {
            type:'excel', 
            mso: {
                fileFormat:'xlsx',
                worksheetName : 'List'
            }

        }
    );
  };
</script>

+ Recent posts