제가 쇼핑몰 만들면서 이리저리 물어가면서 만든 동영상 업로드 소스를 공유합니다. 정보
제가 쇼핑몰 만들면서 이리저리 물어가면서 만든 동영상 업로드 소스를 공유합니다.본문
이소스는 상품정보페이지에서 동영상을 재생할수 있고 상품수정페이지에서 미리보기 하실 수 있습니다.
adm 폴더에 shop_admin 폴더에 가면 itemformupdate.php에 가서 465줄 정도에 아래 소스를 붙여 넣습니다.
// 여분필드1 설정
$uploads_dir = (G5_MEDIA_PATH);
$allowed_ext = array('webm','mp4');
// 여분필드1 변수 정리
$error = $_FILES['it_video']['error'];
$name = $_FILES['it_video']['name'];
$fildir = G5_MEDIA_PATH.
$ext = array_pop(explode('.', $name));
$v_1 = "<video controls><source src='".G5_MEDIA_URL."/".$name."'></video>";
$v_2 = "<video width= '300' height= '200' controls><source src='".G5_MEDIA_URL."/".$name."'></video>";
// 여분필드1 파일 이동
move_uploaded_file( $_FILES['it_video']['tmp_name'], "$uploads_dir/$name");
chmod("$uploads_dir/$name", 0777);
//여분필드1 데이터베이스 등록(v1상품 페이지, v2상품수정 페이지 미리 보기)
if ( empty( $name ) ) {}
else {
$sql = "update g5_shop_item set it_video_filename= '$name', it_video= '".addslashes($v_1)."', it_video_preview= '".addslashes($v_2)."' where it_id='$it_id'";
sql_query($sql);
};
같은 파일 569줄에 아래 소스를 붙여 넣습니다.
//여분필드1 파일 데이터베이스 삭제
if($it_video_del) {
$sql = " select it_video_filename from {$g5['g5_shop_item_table']} where it_id = '$it_id' ";
$file = sql_fetch($sql);
$it_video_filename = $file['it_video_filename'];
$it_video_dir = G5_MEDIA_PATH;
$file_it_video = $it_video_dir.'/'.$it_video_filename;
unlink($file_it_video);
$sql = "update g5_shop_item set it_video_filename= '', it_video= '', it_video_preview= '' where it_id='$it_id'";
sql_query($sql);
}
이번에는 itemform.php를 열어서 1656줄에서 한 칸 띄어서 아래 소스를 붙여 넣습니다.
<th scope="row"><label for="it_1">여분필드(동영상)</label></th>
<td>
<p>
업로드하지 않으면 상품상세페이지에 출력하지 않습니다.<br>
<strong>확장자 webm, mp4 동영상만 업로드 가능하므로 그 외에 동영상은 인코딩(변환)이 필요합니다.<br>
동영상은 <?php echo ini_get('post_max_size');?> 이하만 업로드 가능합니다.<br>
동영상 미리 보기는 동영상이 업로드된 경우에만 가능합니다.<br>
동영상을 변경하시려면 삭제 후 변경 가능합니다.<br></strong>
</p>
<br>
<p>
<input type="file" name="it_video" id="it_video" value="<?php echo get_text($it['it_video']); ?>" id="it_video" class="frm_input" > <label for="it_video_del"><span class="sound_only">동영상 1 </span>파일삭제</label>
<input type="checkbox" name="it_video_del" id="it_video_del" value="1">
<td class="td_grpset">
<?php if ($it['it_video_preview']) { ?>
<label for="it_video_preview"><center><strong><p>동영상 미리 보기</p>
파일명 : <?php echo $it['it_video_filename']; ?> </strong><br>
<?php echo $it['it_video_preview']; ?> </label> <?php } ?> </center>
</td>
</p>
</td>
<br>
이제 스킨 폴더로 가서 item.info.skin.php를 엽니다. 14번 줄에 아래 코드를 붙여 넣습니다. theme/basic/skin/shop에 있습니다. 테마 미사용자는 그냥 스킨 폴더에 샵 폴더에 베이직에 있습니다.
<?php if ($it['it_video_filename']) { ?>
<h3>상품 소계 동영상</h3>
<?php echo $it['it_video']; ?>
<?php } ?>
이제 상품정보 페이지에 js를 사용해서 좀 더 플레이어가 이뻐 보이게 만들어줄게요 우리는 plyr.js라는걸 써볼께요.
이 사이트 주소는 https://plyr.io/ 입니다. 이제 적용해볼께요.
head.sub.php를 찾아서 엽니다. 테마는 테마 폴더에 이 테마는 영카트 폴더에 바로 있습니다.
90번 줄에 엔터를 치고 이렇게 붙여 넣습니다. 테마 미사용 자는 G5_THEME_CSS_URL를 G5_CSS_URL로 수정합니다.
<!--plyr 플레이어 js, css-->
<script src="<?php echo G5_JS_URL ?>/plyr.js"></script>
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL ?>/plyr.css">
폴더에 shop.tail.php를 엽니다. 역시 경로는 테마는 테마 폴더에 이 테마 사용자는 영카트 폴더에 바로 있습니다.
이걸 55번 줄에 붙여 넣습니다.
<script>plyr.setup();</script>
그리고 첨부된 파일을 css는 css 폴더에 js는 영카트 폴더에 js 폴더에 넣습니다. css는 테마 폴더에 있습니다. 이 테마 사용자는 영카트 폴더에 바로 있습니다. 권한은 707로 줍니다.
이제 마지막입니다. phpmyadmin이나 https://sir.kr/g5_tip/2468 mysql 콘솔 등을 이용해서 컬럼(필드) 생성을 해줄 겁니다. phpmyadmin 콘솔에서는 g5_shop_item 테이블에 생성해야 합니다.
종류는 모두 다 name입니다. it_video랑 it_video_filename랑 it_video_preview 컬럼(필드)을 생성합니다. 그다음에 영카트가 설치된 폴더에 media란 폴더를 생성해줍니다. 권한은 707로 설정해줍니다.
이제 상품관리 페이지에서 새 상품 등록 혹은 기존 상품 수정을 통해서 하단 여분 필드 칸에 보면 동영상 업로드 기능이 추가되었습니다. 동영상은 mp4와 webem만 업로드 가능하며 업로드하면 업로드 칸 옆에 미리 보기와
파일명이 표시되며 상품보기를 누르면 상품보기 페이지에서 동영상이 출력됩니다. 상품 수정 페이지에서 나오는 미리 보기는 미리 보기라 굳이 js가 필요 없을 것 같아 적용하지 않았습니다.
삭제버튼 파일 삭제가 안 되시는 분들은 아파치의 경우 rewrite 모드가 켜져 있는지 아파치 설정에서 영카트가 들어있는 폴더가 아래처럼 설정되어 있는지 확인해보시기 바랍니다. 또한 미디어 폴더 권한이 재대로 들어갔는지 확인해보시기 바랍니다.
AllowOverride All
Require all granted
호스팅 등등 임대 받으시는 분들은 해당 업체와 해결해보세요. 이외의 원인으로 인한 문제는 발생한 적이 없어서 잘 모르겠습니다.
동영상을 변경하실분은 삭제후 변경하시기 바랍니다. 이소스는 맘대로 수정해셔도 됩니다. 더좋게 수정할 분들은 수정후에 팁자료실에 수정한거 올려주심 감사하겠습니다.
adm 폴더에 shop_admin 폴더에 가면 itemformupdate.php에 가서 465줄 정도에 아래 소스를 붙여 넣습니다.
// 여분필드1 설정
$uploads_dir = (G5_MEDIA_PATH);
$allowed_ext = array('webm','mp4');
// 여분필드1 변수 정리
$error = $_FILES['it_video']['error'];
$name = $_FILES['it_video']['name'];
$fildir = G5_MEDIA_PATH.
$ext = array_pop(explode('.', $name));
$v_1 = "<video controls><source src='".G5_MEDIA_URL."/".$name."'></video>";
$v_2 = "<video width= '300' height= '200' controls><source src='".G5_MEDIA_URL."/".$name."'></video>";
// 여분필드1 파일 이동
move_uploaded_file( $_FILES['it_video']['tmp_name'], "$uploads_dir/$name");
chmod("$uploads_dir/$name", 0777);
//여분필드1 데이터베이스 등록(v1상품 페이지, v2상품수정 페이지 미리 보기)
if ( empty( $name ) ) {}
else {
$sql = "update g5_shop_item set it_video_filename= '$name', it_video= '".addslashes($v_1)."', it_video_preview= '".addslashes($v_2)."' where it_id='$it_id'";
sql_query($sql);
};
같은 파일 569줄에 아래 소스를 붙여 넣습니다.
//여분필드1 파일 데이터베이스 삭제
if($it_video_del) {
$sql = " select it_video_filename from {$g5['g5_shop_item_table']} where it_id = '$it_id' ";
$file = sql_fetch($sql);
$it_video_filename = $file['it_video_filename'];
$it_video_dir = G5_MEDIA_PATH;
$file_it_video = $it_video_dir.'/'.$it_video_filename;
unlink($file_it_video);
$sql = "update g5_shop_item set it_video_filename= '', it_video= '', it_video_preview= '' where it_id='$it_id'";
sql_query($sql);
}
이번에는 itemform.php를 열어서 1656줄에서 한 칸 띄어서 아래 소스를 붙여 넣습니다.
<th scope="row"><label for="it_1">여분필드(동영상)</label></th>
<td>
<p>
업로드하지 않으면 상품상세페이지에 출력하지 않습니다.<br>
<strong>확장자 webm, mp4 동영상만 업로드 가능하므로 그 외에 동영상은 인코딩(변환)이 필요합니다.<br>
동영상은 <?php echo ini_get('post_max_size');?> 이하만 업로드 가능합니다.<br>
동영상 미리 보기는 동영상이 업로드된 경우에만 가능합니다.<br>
동영상을 변경하시려면 삭제 후 변경 가능합니다.<br></strong>
</p>
<br>
<p>
<input type="file" name="it_video" id="it_video" value="<?php echo get_text($it['it_video']); ?>" id="it_video" class="frm_input" > <label for="it_video_del"><span class="sound_only">동영상 1 </span>파일삭제</label>
<input type="checkbox" name="it_video_del" id="it_video_del" value="1">
<td class="td_grpset">
<?php if ($it['it_video_preview']) { ?>
<label for="it_video_preview"><center><strong><p>동영상 미리 보기</p>
파일명 : <?php echo $it['it_video_filename']; ?> </strong><br>
<?php echo $it['it_video_preview']; ?> </label> <?php } ?> </center>
</td>
</p>
</td>
<br>
이제 스킨 폴더로 가서 item.info.skin.php를 엽니다. 14번 줄에 아래 코드를 붙여 넣습니다. theme/basic/skin/shop에 있습니다. 테마 미사용자는 그냥 스킨 폴더에 샵 폴더에 베이직에 있습니다.
<?php if ($it['it_video_filename']) { ?>
<h3>상품 소계 동영상</h3>
<?php echo $it['it_video']; ?>
<?php } ?>
이제 상품정보 페이지에 js를 사용해서 좀 더 플레이어가 이뻐 보이게 만들어줄게요 우리는 plyr.js라는걸 써볼께요.
이 사이트 주소는 https://plyr.io/ 입니다. 이제 적용해볼께요.
head.sub.php를 찾아서 엽니다. 테마는 테마 폴더에 이 테마는 영카트 폴더에 바로 있습니다.
90번 줄에 엔터를 치고 이렇게 붙여 넣습니다. 테마 미사용 자는 G5_THEME_CSS_URL를 G5_CSS_URL로 수정합니다.
<!--plyr 플레이어 js, css-->
<script src="<?php echo G5_JS_URL ?>/plyr.js"></script>
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL ?>/plyr.css">
폴더에 shop.tail.php를 엽니다. 역시 경로는 테마는 테마 폴더에 이 테마 사용자는 영카트 폴더에 바로 있습니다.
이걸 55번 줄에 붙여 넣습니다.
<script>plyr.setup();</script>
그리고 첨부된 파일을 css는 css 폴더에 js는 영카트 폴더에 js 폴더에 넣습니다. css는 테마 폴더에 있습니다. 이 테마 사용자는 영카트 폴더에 바로 있습니다. 권한은 707로 줍니다.
이제 마지막입니다. phpmyadmin이나 https://sir.kr/g5_tip/2468 mysql 콘솔 등을 이용해서 컬럼(필드) 생성을 해줄 겁니다. phpmyadmin 콘솔에서는 g5_shop_item 테이블에 생성해야 합니다.
종류는 모두 다 name입니다. it_video랑 it_video_filename랑 it_video_preview 컬럼(필드)을 생성합니다. 그다음에 영카트가 설치된 폴더에 media란 폴더를 생성해줍니다. 권한은 707로 설정해줍니다.
이제 상품관리 페이지에서 새 상품 등록 혹은 기존 상품 수정을 통해서 하단 여분 필드 칸에 보면 동영상 업로드 기능이 추가되었습니다. 동영상은 mp4와 webem만 업로드 가능하며 업로드하면 업로드 칸 옆에 미리 보기와
파일명이 표시되며 상품보기를 누르면 상품보기 페이지에서 동영상이 출력됩니다. 상품 수정 페이지에서 나오는 미리 보기는 미리 보기라 굳이 js가 필요 없을 것 같아 적용하지 않았습니다.
삭제버튼 파일 삭제가 안 되시는 분들은 아파치의 경우 rewrite 모드가 켜져 있는지 아파치 설정에서 영카트가 들어있는 폴더가 아래처럼 설정되어 있는지 확인해보시기 바랍니다. 또한 미디어 폴더 권한이 재대로 들어갔는지 확인해보시기 바랍니다.
AllowOverride All
Require all granted
호스팅 등등 임대 받으시는 분들은 해당 업체와 해결해보세요. 이외의 원인으로 인한 문제는 발생한 적이 없어서 잘 모르겠습니다.
동영상을 변경하실분은 삭제후 변경하시기 바랍니다. 이소스는 맘대로 수정해셔도 됩니다. 더좋게 수정할 분들은 수정후에 팁자료실에 수정한거 올려주심 감사하겠습니다.
추천
4
4
댓글 5개
샘플페이지를 볼 수 있을 까요
결과가 너무 궁금합니다
결과가 너무 궁금합니다
좋은팁 감사합니다.
동영상이 없어 있으면 좋겠다 했는데 만들어내시는군요
감사합니다.
동영상이 없어 있으면 좋겠다 했는데 만들어내시는군요
감사합니다.
아직 완전하지 안하서 오탈자 수정하고 제가 유튜브올릴수 있는기능이 필요해서 유튜브도 올릴수 있도록 해보고 있습니다. 그냥도 소스 퍼오면 올릴수 있지만 디자인이 안예뻐서 plyr플레이어에 내장된 유튜브 재생 기능을 사용할수 있도록 개발해보고 있습니다.
bxslider적용하려고 bxslider홈페이지 방문하니 마음에 들면 맥주한잔 사달라교 되어있든데요.
초보인 제가 적용하긴 쉽지 않겠지만 잘되면 맥주한잔 사드리겠습니다.
동영상 넣는 기능을 구혀해보고 싶었습니다. 평소에
감사합니다.
초보인 제가 적용하긴 쉽지 않겠지만 잘되면 맥주한잔 사드리겠습니다.
동영상 넣는 기능을 구혀해보고 싶었습니다. 평소에
감사합니다.
