페이지 만들기
페이지를 만들기 위해서는 다음의 절차를 따라 진행하시면 됩니다.
- Connector 다운로드 : 로그인 후 콘솔의 System Dashboard에서 H:Dev+ Connector를 다운로드 합니다.
- 페이지 생성 : VueJS 또는 PHP등을 사용하여 원하는 페이지를 만듭니다.
- Request Data 정의 : 페이지에서 필요한 Request 데이터를 정의하고 만들어진 페이지에 포함합니다.
- Connector 위치 지정 : 다운로드한 Connector를 만들어진 페이지의 지정된 곳에 위치시킵니다.
- 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>