View Post

This page describes the request data identifiers and response structure required to build a post view page.

Data Identifier

{
  "dataID": "GET_POST",
  "post_key": 1,
  "page_link_url": "/post/123/post-subject",
  "page_link_hash": "HASH",
  "page": 1,
  "list_per_page": 20,
  "block_per_page": 5
}
KeyDescription
post_keyUnique post key
page_link_urlLink URL for comment list paging
page_link_hashPaging navigation link hash (required when navigating to a hash link within a hash page)
pageComment page number
list_per_pageNumber of comments displayed per page
block_per_pageNumber of page links shown in the paging block on a page

HTML

<div id="post">
    <div><small class="ms-1 fw-bold">Board name</small></div>
    <h1 class="fs-3 mt-4 mb-4">The post title is displayed here.</h1>
    <div>
        24-07-22 22:23 by Author
    </div>
    <p>
        H:Dev+ is based on the MVC (Model-View-Controller) model,
        providing the Model and Controller on the Back-End so you can
        focus on Front-End development. Communication between the
        Front-End and Back-End uses the RESTful approach. To do this, .....
    </p>
    <div>
        <span>Tag1</span>
        <span>Tag2</span>
        <span>Tag3</span>
    </div>
    <div>
        <a href="/post/modify?post_key=AD570BDF1...">EDIT</a>
        <button type="button" class="h-btn-delete" data-post-key="AD570BDF1...">DELETE</button>
    </div>
</div>
  • div
    <div id="post"></div>

    The area where the post is displayed. The id must be set to post.

  • a
    <a href="/post/modify?post_key=AD570BDF1..."></a>

    Post edit button. The post[0].post_key value from the Response Result must be set in the post_key parameter of the edit page URL.

  • button
    <button type="button" class="h-btn-delete" data-post-key="AD570BDF1..."></button>

    Post delete button. The post[0].post_key value from the Response Result must be set in data-post-key, and the class selector must include h-btn-delete.

Response Result

{
  "post": [
    {
      "avatar_url": "/avatar/url",
      "board_name": "free board",
      "board_seq": 100,
      "contents": [
        {"content":"post content","content_html_enc": "encoded html content"}
      ],
      "create_date": "2025-05-30 02:53:34",
      "create_date_type_mdhi": "05-30 02:53",
      "member_seq": 300,
      "modify_date": "2025-05-30 02:53:34",
      "nickname": "winter",
      "post_key": "E477FEEB837326JEUDYFC505D20C022",
      "read_count": 928,
      "reg_name": "micky",
      "seq": 34,
      "subject": "Post Subject",
      "tags": [
        "tag1",
        "tag1",
        "tag2",
        "tag3"
      ],
      "related_post": [
        {
          "post_key": "E477FEEB837326JEUDYFC505D20C022",
          "subject": "Related Post Subject",
          "reg_name": "Micky",
          "avatar_url": "/avatar/url",
          "create_date": "2025-05-20 02:53:34"
        }
      ]
    }
  ]
}
KeyDescription
post[0].avatar_urlAvatar URL
post[0].board_nameBoard name
post[0].board_seqBoard sequence
post[0].contentsArray of post contents
post[0].contents[0].contentPost content
post[0].contents[0].content_html_encHTML-encoded post content
post[0].create_dateCreation date and time in Y-m-d H:i:s format
post[0].create_date_type_mdhiCreation date and time in y-m-d h:i format
post[0].member_seqAuthor member sequence
post[0].modify_dateModification date and time in Y-m-d H:i:s format
post[0].nicknameAuthor nickname (current)
post[0].post_keyUnique post key
post[0].read_countPost view count
post[0].reg_nameAuthor nickname (at the time of posting)
post[0].seqPost sequence
post[0].subjectTitle
post[0].tagsTags Array(['tag'=>'tag1'],['tag'=>'tag2'])
post[0].related_postArray of related posts
post[0].related_post[0].subjectRelated post title
post[0].related_post[0].reg_nameRelated post author name
post[0].related_post[0].nicknameRelated post author nickname
post[0].related_post[0].avatar_urlRelated post avatar URL
post[0].related_post[0].create_dateRelated post creation date
post[0].related_post[0].post_keyRelated post unique key

Example

Board name

The post title is displayed here.

24-07-22 22:23 by
Author

H:Dev+ is based on the MVC (Model-View-Controller) model, providing the Model and Controller on the Back-End so you can focus on Front-End development. Communication between the Front-End and Back-End uses the RESTful approach. To do this, it sends a POST request through the Connector and returns the result as a Response in JSON format. Instead of a URL, it uses a dataID to specify a unique resource identifier, and a secureKey is required for security.

Tag1 Tag2 Tag3 
<div id="post" :data-post-key="output.post[0].post_key" class="me-3">
<div class="py-3">
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
        <div>
          <small class="ms-1 fw-bold">{{ output.post[0].board_name }}</small>
        </div>
        <div class="d-flex justify-content-between align-items-center" v-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
          <a :href="'./modify.html?post_key='+output.post[0].post_key" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">Edit</small></a>
          <a href="#" data-return-url="./list.html" :data-post-key="output.post[0].post_key" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">Delete</small></a>
        </div>
      </div>
      <h1 class="fs-3 mt-4 mb-4">{{ output.post[0].subject }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-12 text-start">
      <div class="d-flex justify-content-start align-items-center">
        {{ output.post[0].create_date_type_mdhi }} by
        <div class="mx-2">
          <img v-if="output.post[0].avatar_url" :src="output.post[0].avatar_url" style="max-width:1.5rem;"/>
          <i v-else class="fas fa-user-circle"></i>
        </div>
        {{ output.post[0].reg_name }}
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div><p v-html="output.post[0].contents[0].content"/></div>
    <div class="d-flex align-items-center justify-content-start my-4" v-if="output.post[0].tags && output.post[0].tags.length>0">
        <span v-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
            {{ tags.tag }}
        </span>
    </div>
  </div>
</div>
</div>
<div id="post" data-post-key="<?= $output['post'][0]['post_key']; ?>" class="me-3">
    <div class="py-3">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
                    <div>
                        <small class="ms-1 fw-bold"><?= $output['post'][0]['board_name']; ?></small>
                    </div>
                    <? if ($output['user']['auth_flg'] && $output['post'][0]['member_seq'] == $output['seq']) { ?>
                        <div class="d-flex justify-content-between align-items-center" vv-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
                            <a href="'./modify.html?post_key=<?= $output['post'][0]['post_key']; ?>" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">Edit</small></a>
                            <a href="#" data-return-url="./list.html" data-post-key="<?= $output['post'][0]['post_key']; ?>" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">Delete</small></a>
                        </div>
                    <? } ?>
                </div>
                <h1 class="fs-3 mt-4 mb-4"><?= $output['post'][0]['subject']; ?></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-start">
                <div class="d-flex justify-content-start align-items-center">
                    <?= $output['post'][0]['create_date_type_mdhi']; ?> by
                    <div class="mx-2">
                        <? if ($output['post'][0]['avatar_url']) { ?>
                            <img vv-if="output.post[0].avatar_url" src="<?= $output['post'][0]['avatar_url']; ?>" style="max-width:1.5rem;"/>
                        <? } else { ?>
                            <i class="fas fa-user-circle"></i>
                        <? } ?>
                    </div>
                    <?= $output['post'][0]['reg_name']; ?>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div><p><?= $output['post'][0]['content']; ?></p></div>
            <? if (is_array($output['post'][0]['tags']) && count($output['post'][0]['tags']) > 0) { ?>
                <div class="d-flex align-items-center justify-content-start my-4">
                    <? foreach ($output['post'][0]['tags'] as $arrTags) { ?>
                        <span vv-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
	                    <?= $arrTags['tag']; ?>
	                </span>
                    <? } ?>
                </div>
            <? } ?>
        </div>
    </div>
</div>

Related Links