페이지 만들기

페이지를 만들기 위해서는 다음의 절차를 따라 진행하시면 됩니다.

  1. Connector 다운로드 : 로그인 후 콘솔의 System Dashboard에서 H:Dev+ Connector를 다운로드 합니다.
  2. 페이지 생성 : VueJS 또는 PHP등을 사용하여 원하는 페이지를 만듭니다.
  3. Request Data 정의 : 페이지에서 필요한 Request 데이터를 정의하고 만들어진 페이지에 포함합니다.
  4. Connector 위치 지정 : 다운로드한 Connector를 만들어진 페이지의 지정된 곳에 위치시킵니다.
  5. Secure key 변경 : 다운로드한 Connector 파일을 열어서 secureKey를 발급받은 키로 변경합니다.

위 절차를 따라 페이지를 만들면, 브라우저에서 해당 페이지를 열어 만들어진 페이지를 확인할 수 있습니다.

Sample Code

VueJS
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>H:Dev+ Sample Code</title>
	<!-- BOOTSTRAP OPTIONAL -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"/>
	<!-- REQUEST DATA -->
	<script>
        const requestData = {'dataID': 'GET_POST_LIST', 'page': 1, 'list_per_page':10};
	</script>
</head>
<body>
<div id="app">
	<!-- TO DO HERE -->
	<div class="container">
		<h3 class="my-4">H:<small>DEV+</small> Example</h3>
		<div id="post_list" data-load-type="vue-pagination" class="row">
			<div class="col-12 my-3" v-for="post in output.post_list">
				<div class="card h-100">
					<div class="card-body">
						<div class="d-flex justify-content-between align-items-center">
							<small>{\{post.reg_name\}\}</small><small>{\{post.create_date\}\}</small>
						</div>
						<hr/>
						<h5 class="card-title">{\{ post.subject \}\}</h5>
						<p class="card-text">
							{\{ post.content \}\}
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- TO DO HERE -->
</div>
<!-- JQUERY REQUIRED -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<!-- VUE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
<!-- BOOTSTRAP OPTIONAL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<!-- CONNECTOR -->
<script src="./_connector/yellow.501.js"></script>
</body>
</html>
PHP
<?php
/* REQUEST DATA */
$arrRequestData = ['dataID' => 'GET_POST_LIST','page' => 1, 'list_per_page' => 10];
/* CONNECTOR */
include($_SERVER['DOCUMENT_ROOT'].'/_connector/yellow.501.php');
?>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>H:Dev+ Sample Code</title>
  <!-- BOOTSTRAP OPTIONAL -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"/>
</head>
<body>
<div id="app">
  <!-- TO DO HERE -->
  <div class="container">
    <h3 class="my-4">H:<small>DEV+</small> Example</h3>
    <div id="post_list" data-load-type="page-link" class="row">
      <?php foreach($output['post_list'] as $intKey=>$arrPost){ ?>
        <div class="col-12 my-3">
          <div class="card h-100">
            <img src="<?=$arrPost['files'];?>"/>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <small><?=$arrPost['reg_name'];?></small><small><?=$arrPost['create_date'];?></small>
              </div>
              <hr/>
              <h5 class="card-title"><?=$arrPost['subject'];?></h5>
              <p class="card-text">
                <?=$arrPost['content'];?>
              </p>
            </div>
          </div>
        </div>
      <? } ?>
    </div>
  </div>
  <!-- TO DO HERE -->
</div>
<!-- JQUERY REQUIRED -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<!-- BOOTSTRAP OPTIONAL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
</body>
</html>