728x90

목동코딩: 코딩수업

​

아래의 화면에서 복수의 input의 value를 가져와서 DB에 저장하는 방법과 새로운 table row를 만들어서 새로운 record를 추가하는 방법입니다.

 

<script>
    function addItems() {
        $("input[name=ItemCode]").each(function(idx) {
            // 해당 input Value 가져오기
            var id = $(this).attr('id');
            var ItemCode = $("input[name=ItemCode]:eq(" + idx + ")").val();
            console.log(id + ":" + ItemCode);
        });

        var ret = confirm("항목을 추가하시겠습니까?");
         if(!ret){
            return false;
        }
        var row = "";
        row = row + "<tr>";

        row = row + "<td><input  type='button' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";

        row = row + "</tr>";
        $('#itemsTable').append(row);
}
</script>

<table id="itemsTable" class="table table-striped">
  <th width="5%">
    삭제
  </th>
  <th  width="5%">
    기호
  </th>
  <th  width="20%">
    품명
  </th>
  <th  width="10%">
    가격
  </th>
  <th  width="60%">
    설명
  </th>
</tr>
</table>

 

 

 

목동코딩 전문적인 코딩교육

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, Asp.net mvc EF에서 Data 추가하는 방법  (0) 2021.09.23
목동코딩,Ajax Click으로 Delete Table Row  (0) 2021.09.20
목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
728x90

목동코딩: 코딩교육

​

필요에 따라서 모달폼을 열고 닫는 방법

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-latest.js"></script>
	<title>Document</title>
	<style>
        /* The Modal (background) */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #ffffff;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 30%; /* Could be more or less, depending on screen size */                          
        }
 
</style>

</head>
<body>
	<input type="button" onclick="open_pop();" value="open" />
	    <!-- The Modal -->
		<div id="myModal" class="modal">
 
			<!-- 모달폼 시작 -->
			<div class="modal-content" style="background-color: #000000;">
				<img class="bd-placeholder-img" width="100%"
                        src="http://nooh-system.com/images/logo_nooh_white.png" aria-hidden="true"
                        preserveAspectRatio="xMidYMid slice" focusable="false">
					  <p style="text-align: center;"><span style="font-size: 14pt;"><b><span style="font-size: 24pt;">공지</span></b></span></p>
					  <p style="text-align: center; line-height: 1.5;"><br />여기에 내용</p>
					  <p><br /></p>
				  <div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;" onClick="close_pop();">
					  <span class="pop_bt" style="font-size: 13pt;" >
						   닫기
					  </span>
				  </div>
			</div>
	   
		  </div>
			  <!--모달폼 종료-->
	  
	  
			  <script type="text/javascript">      
				jQuery(document).ready(function() {						
				});
				//팝업 보기
				function open_pop() {
					 $('#myModal').show();
				};

                //팝업 단기
				function close_pop(flag) {
					 $('#myModal').hide();
				};
				
			</script>

</body>
</html>

 

 

목동코딩학원 코딩교육

 

 

http://nooh-system.com/

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩,Ajax Click으로 Delete Table Row  (0) 2021.09.20
목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법!  (0) 2021.09.18
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
728x90

목동코딩:

이번에하는 프로젝트는 이미지를 많이 다루는 사이트이다. 컴퓨터에서 보기에는 불편함이 없으나, 모바일에서 보려면 아무래도 확대해서 표시해야 할거 같아서 구글 검색으로 적용한 방법임

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
    <style>
		.enLargeFrame {
			position: absolute;
			display: none;
			justify-content: center;
			align-items: center;
			top:0%;
			width:100%;
			height:100%;
			background-color: gray; 
			z-index: 100;
			background:rgba(255,255,255,0.5);
		}
		.enLarge {
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
		}
		
		.enLarge img {
			width:100%;
		}
	</style>
</head>
<body>
	<h1>이미지 크게보기</h1>
	<hr>
	<div class='enLargeFrame'>
		<div class='enLarge'>
		</div>
	</div>
	<img src="http://nooh-system.com/images/logo_nooh_white.png"> 
	<img src="http://nooh-system.com/assets/img/portfolio/4.jpg"> 
</body>
<script type="text/javascript">
	$(document).ready(function (e){
		
		$(document).on("click","img",function(){
			var path = $(this).attr('src')
			showImage(path);
		}); 
		
		function showImage(fileCallPath){
		    
		    $(".enLargeFrame").css("display","flex").show();		    
		    $(".enLarge")
		    .html("<img src='"+fileCallPath+"' >")
		    .animate({width:'100%', height: '100%'}, 1000);		    
		  } 	  
		$(".enLargeFrame").on("click", function(e){
		    $(".enLarge").animate({width:'0%', height: '0%'}, 1000);
		    setTimeout(function(){
		      $('.enLargeFrame').hide();
		    }, 1000);
		  }); 
	});
</script>
</html>

목동코딩 프로젝트 코딩교육

 

목동코딩 프로젝트 코딩교육

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법!  (0) 2021.09.18
목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
728x90

목동코딩:

프로젝트를 하다보면 꼭 필요한 부분이 입력 유효성 체크이다.

예전에 POS를 개발할 때 절실히 느껴던 부분이다.

개발하는 입장에서는 에러가 안나게 잘 입력해 주지만 ㅎㅎ , 일반 사용자는 그렇지 않기에 다양한 입력 검증 방식이 필요하다.

가령 금액을 입력하는데 문자를 입력하는 경우등이다. 이러한 경우를 예상하지 않으면 그냥 시스템이 죽어 버리곤 했다. 세월이 많이 흐른 지금도 키코드를 이용하여 비교하는 방식은, 예전에 코볼로 개발할 때 랑도 비슷한 느낌이다. 세월이 흘러도 원리는 변하지 않느거 같다. 그래서 학생들도 원리를 궁금해 하면서 공부 해야 한다는 생각이다.

 

$(document).ready(function () {
    // Number only
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9]/g,'');
        }
    });
    //Number & dot
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9\.]/g,'');
        }
    });
    //Amount
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = $.number(this.value,0); //jquery.number.js
        }
    });
    //Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/^[-]|[^0-9-]/gi,'');
        }
    });
    //Alpha & Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^a-zA-Z0-9\\-]+$/i,'');
        }
    });
});

 

 

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
728x90

목동코딩:

프로젝트를 하다보면 사용하는 언어마다 숫자에 컴마를 표시하는 방법이 조금씩 다르다.

Php에서 컴마를 찍는 방법은 또 조금 다르다. 이번엔 자바스크립트에서 컴마를 표시하거나, 컴마를 제거하는 함수를 정리해둔다.

<script>
    $(document).ready(function() {

        $('input[name=saleAmount]').attr('value', comma("111222333"));
    });

    //콤마찍기
    function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    //콤마풀기
    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    }
    </script>

목동코딩 코딩수업

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법  (0) 2021.08.11
728x90

목동코딩: 부트스랩을 이용하여 사이트를 개발할때 글씨 크기를 한눈에 비교하도록 정리된 html 파일입니다

<!DOCTYPE html>
<html lang="ko">
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css");</style>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");</style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <div class="container">
         <h6>h6</h6>
         <h5>h5</h5>
         <h4>h4</h4>
         <h3>h3</h3>
         <h2>h2</h2>
         <h1>h1</h1>
         <h1 class="size-4">size-4</h1>
         <h1 class="size-3">size-3</h1>
         <h1 class="size-2">size-2</h1>
         <h1 class="size-1">size-1</h1>
         <h1 class="size-4 font-weight-bold">size-4 font-weifht-bold</h1>
         <h1 class="size-4 font-italic">size-4 font-italic</h1>
         <h1 class="size-4 font-left">size-4 font-left</h1>
         <h1 class="size-4 font-center">size-4 font-center</h1>
         <h1 class="size-4 font-right">size-4 font-right</h1>
         <h1 class="size-4 text-primary">size-4 text-primary</h1>
         <h1 class="size-4 text-seconday">size-4 text-secondary</h1>
         <h1 class="size-4 text-success">size-4 text-success</h1>
         <h1 class="size-4 text-danger">size-4 text-danger</h1>
         <h1 class="size-4 text-warning">size-4 text-warning</h1>
         <h1 class="size-4 text-info">size-4 text-info</h1>
         <h1 class="size-4 text-light">size-4 text-light</h1>
         <h1 class="size-4 text-dark">size-4 text-dark</h1>
         <h1 class="size-4 text-muted">size-4 text-muted</h1>
         <h1 class="size-4 text-white">size-4 text-white</h1>
         <h1 class="size-4 text-white bg-primary">size-4 text-white bg-primary</h1>
         <h1 class="size-4 text-white bg-secondary">size-4 text-white bg-secondary</h1>
         <h1 class="size-4 text-white bg-danger">size-4 text-white bg-danger</h1>
         <h1 class="size-4 bg-warning">size-4 bg-warning</h1>
         <h1 class="size-4 text-white bg-info">size-4 text-white bg-info</h1>
         <h1 class="size-4 bg-light">size-4 bg-light</h1>
         <h1 class="size-4 text-white bg-darky">size-4 text-white bg-dark</h1>
      </div>

   </body>
</html>

 

 

 

목동코딩학원 코딩교육 프로젝트교육

 

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법  (0) 2021.08.11
목동코딩학원,자바스크립트 FORM 필드 추가해서 새 페이지 여는 방법  (0) 2021.08.09
728x90

목동코딩:

서버를 새롭게 설치하면 이거 저거 설정할 내용이 조금 많다.

아마도 그래서 도커를 많이 사용하는 것 같다. 하지만 대량으로 작업할게 아니면 , 기억을 리프레쉬 할겸해서

나는 그때그때 새롭게 설치를 하곤한다.

​

이번에도 새로운 프랜차이즈 서버를 설치하는 중에 기존 서버에서는 잘 돌아가는 기능인데 , 새로 설치한 우분투 서버에서는 페이지를 표시하지 않는다.

​

그래서 php.ini를 수정해서 에러를 표시하려 했지만 , 어떤 이유인지 에러가 표시 안된다.

그래서 검색을 해서 알게된 방법이 아래와 같다. 이 내용을 보니 mysql 문제인지를 알수있었다.

​

Fatal error: Uncaught Error: Call to undefined function mysqli_connect() in /var/www/html/

​

에러를 표시하는 방법

<?php error_reporting( E_ALL ); ini_set( "display_errors", 1 ); ?>

​

에러를 표시 막는 방법

<?php ini_set( 'display_errors', '0' ); ?>

 

 

목동코딩  코딩교육

728x90
저작자표시 비영리 변경금지

'코딩교육 > MySql' 카테고리의 다른 글

목동코딩학원 : mysql 1주일치 자료를 요일별로 가져오는 방법  (0) 2023.03.03
목동코딩학원 : MySQL에서 1년치 자료를 월별로 가져오는 방법  (0) 2023.03.03
목동코딩학원 : MySql 그래프 작성을 위해서 Data 가져오는 방법  (0) 2023.03.03
목동코딩학원, Mysql, Trigger 에서 날자계산하는 방법  (0) 2021.10.04
목동코딩학원,MySql Trigger를 이용하여 회원내역 보관하는 방법  (0) 2021.08.09
728x90

목동코딩:

우연한 기회에 양천구청 평생학습관에서 메타버스강좌를 듣게 됐습니다.

프로그래머로 생활하면서 게임을 전혀 안하다 보니 , 현재 어떤 형태로 소비자와 메타버스가 소개되는지가 궁금해서 강좌를 듣게 됐습니다.

오큘러스도 체험하고, 카드보드로도 VR체험을 해봤습니다. 간단한 블록코딩도 해봤습니다.

ㅎㅎ 역시 저는 수업시간에 딴짓을 하더라고요 .

​

저는 당연히 이과정은 배워도 취업이랑은 관련이 없다는 생각이 들었습니다.

그냥 취미로 만들고 재밌어 하는 학습이구나 하면서 내가 개발하려는 메타버스에 참고하면서 강의를 들었습니다.

그런데 강의 말미에 수강생 한분이 질문을 하였습니다. "이거 배우면 취업이 되는지요? " 하고요. 그때 강사분이 아주 솔직하게 "불가능 해요!" 라고 답변을 하였습니다.

잠시 침묵이 흘렀습니다.

이 모습을 보고 코딩관련 학습동아리를 만들어서 ,중장년, 경력단절된분, 코딩에 관심이 있는 학생등등...

그래서 "온라인 , 오프라인 취업이 가능하게 하자" 라는 생각이 들어서 양천구청 평생학습관에 "코딩과 일자리" 라는 동아리를 등록했습니다.

양천구에 거주하시고 , 코딩에 관심을 가지신 분들은 연락 주시면 안내드리겠습니다.

코딩 즉 프로그램이라는 분야가 아주 넓기 때문에 관심 분야를 소개하고, 각 과정별로 분과를 만들어서 학습을 진행할 예정입니다.

​

[동아리 안내 연락처: 010-9289-9979 ]

이 이미지는 360도 VR 이미지 입니다. 크게 보시려면 클릭하세요

 

목동코딩 코딩동아리

 

​

목동코딩 코딩동아리

 

​

728x90
저작자표시 비영리 변경금지

'코딩교육' 카테고리의 다른 글

목동코딩 : 생활속으로의 로봇 침투  (0) 2022.01.20
목동코딩, 실질적인 코딩교육에 대하여.....  (0) 2022.01.20
목동코딩학원, 미래를 걱정하는 요즘 학생들...  (0) 2021.08.23
목동코딩학원, 코딩이 뭐에요? 게임이 코딩인가요?  (0) 2021.08.22
목동코딩학원,유니티 튜토리얼을 소개합니다  (0) 2021.08.22

+ Recent posts

티스토리툴바