<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[BuddyPress][7914] trunk: Introduce metadata pre-fetching for xprofile objects</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://buddypress.trac.wordpress.org/changeset/7914">7914</a></dd>
<dt>Author</dt> <dd>boonebgorges</dd>
<dt>Date</dt> <dd>2014-02-17 19:42:03 +0000 (Mon, 17 Feb 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>Introduce metadata pre-fetching for xprofile objects

XProfile objects (groups, fields, and data) are generally fetched in a nested
way, as within the context of a bp_has_profile() loop. Thus, it makes sense to
pre-fetch xprofile metadata within a bp_has_profile() loop in a nested way as
well. This changeset introduces bp_xprofile_update_meta_cache(), which is able
to fetch all uncached metadata for nested meta types with a single database
query.

This changeset also introduces an 'update_meta_cache' parameter to the
bp_has_profile() stack. This param allows developers to disable the pre-
fetching introduced here. Defaults to true.

See <a href="http://buddypress.trac.wordpress.org/ticket/5398">#5398</a></pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkbpxprofilebpxprofilecachephp">trunk/bp-xprofile/bp-xprofile-cache.php</a></li>
<li><a href="#trunkbpxprofilebpxprofileclassesphp">trunk/bp-xprofile/bp-xprofile-classes.php</a></li>
<li><a href="#trunkbpxprofilebpxprofiletemplatephp">trunk/bp-xprofile/bp-xprofile-template.php</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkteststestcasesxprofilecachephp">trunk/tests/testcases/xprofile/cache.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkbpxprofilebpxprofilecachephp"></a>
<div class="modfile"><h4>Modified: trunk/bp-xprofile/bp-xprofile-cache.php (7913 => 7914)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/bp-xprofile/bp-xprofile-cache.php  2014-02-17 18:24:43 UTC (rev 7913)
+++ trunk/bp-xprofile/bp-xprofile-cache.php     2014-02-17 19:42:03 UTC (rev 7914)
</span><span class="lines">@@ -1,18 +1,125 @@
</span><span class="cx"> <?php
</span><span class="cx"> 
</span><span class="cx"> /**
</span><del>- * BuddyPress XProfile Template Tags
</del><ins>+ * BuddyPress XProfile Caching Functions
</ins><span class="cx">  *
</span><span class="cx">  * Caching functions handle the clearing of cached objects and pages on specific
</span><span class="cx">  * actions throughout BuddyPress.
</span><span class="cx">  *
</span><span class="cx">  * @package BuddyPress
</span><del>- * @subpackage XProfileTemplate
</del><span class="cx">  */
</span><span class="cx"> 
</span><span class="cx"> // Exit if accessed directly
</span><span class="cx"> if ( !defined( 'ABSPATH' ) ) exit;
</span><span class="cx"> 
</span><ins>+/**
+ * Slurp up xprofilemeta for a specified set of profile objects.
+ *
+ * We do not use bp_update_meta_cache() for the xprofile component. This is
+ * because the xprofile component has three separate object types (group,
+ * field, and data) and three corresponding cache groups. Using the technique
+ * in bp_update_meta_cache(), pre-fetching would take three separate database
+ * queries. By grouping them together, we can reduce the required queries to
+ * one.
+ *
+ * This function is called within a bp_has_profile() loop.
+ *
+ * @since BuddyPress (2.0.0)
+ *
+ * @param array $object_ids Multi-dimensional array of object_ids, keyed by
+ *        object type ('group', 'field', 'data')
+ */
+function bp_xprofile_update_meta_cache( $object_ids = array(), $user_id = 0 ) {
+       global $wpdb;
+
+       if ( empty( $object_ids ) ) {
+               return false;
+       }
+
+       // $object_ids is a multi-dimensional array
+       $uncached_object_ids = array(
+               'group' => array(),
+               'field' => array(),
+               'data'   => array(),
+       );
+
+       $cache_groups = array(
+               'group' => 'xprofile_group_meta',
+               'field' => 'xprofile_field_meta',
+               'data'  => 'xprofile_data_meta',
+       );
+
+       $do_query = false;
+       foreach ( $uncached_object_ids as $object_type => $uncached_object_type_ids ) {
+               if ( ! empty( $object_ids[ $object_type ] ) ) {
+                       // Sanitize $object_ids passed to the function
+                       $object_type_ids = wp_parse_id_list( $object_ids[ $object_type ] );
+
+                       // Get non-cached IDs for each object type
+                       $uncached_object_ids[ $object_type ] = bp_get_non_cached_ids( $object_type_ids, $cache_groups[ $object_type ] );
+
+                       // Set the flag to do the meta query
+                       if ( ! empty( $uncached_object_ids[ $object_type ] ) && ! $do_query ) {
+                               $do_query = true;
+                       }
+               }
+       }
+
+       // If there are uncached items, go ahead with the query
+       if ( $do_query ) {
+               $where = array();
+               foreach ( $uncached_object_ids as $otype => $oids ) {
+                       if ( empty( $oids ) ) {
+                               continue;
+                       }
+
+                       $oids_sql = implode( ',', wp_parse_id_list( $oids ) );
+                       $where[]  = $wpdb->prepare( "( object_type = %s AND object_id IN ({$oids_sql}) )", $otype );
+               }
+               $where_sql = implode( " OR ", $where );
+       }
+
+
+       $bp = buddypress();
+       $meta_list = $wpdb->get_results( "SELECT object_id, object_type, meta_key, meta_value FROM {$bp->profile->table_name_meta} WHERE {$where_sql}" );
+
+       if ( ! empty( $meta_list ) ) {
+               $object_type_caches = array(
+                       'group' => array(),
+                       'field' => array(),
+                       'data'  => array(),
+               );
+
+               foreach ( $meta_list as $meta ) {
+                       $oid    = $meta->object_id;
+                       $otype  = $meta->object_type;
+                       $okey   = $meta->meta_key;
+                       $ovalue = $meta->meta_value;
+
+                       // Force subkeys to be array type
+                       if ( ! isset( $cache[ $otype ][ $oid ] ) || ! is_array( $cache[ $otype ][ $oid ] ) ) {
+                               $cache[ $otype ][ $oid ] = array();
+                       }
+
+                       if ( ! isset( $cache[ $otype ][ $oid ][ $okey ] ) || ! is_array( $cache[ $otype ][ $oid ][ $okey ] ) ) {
+                               $cache[ $otype ][ $oid ][ $okey ] = array();
+                       }
+
+                       // Add to the cache array
+                       $cache[ $otype ][ $oid ][ $okey ][] = maybe_unserialize( $ovalue );
+               }
+
+               foreach ( $cache as $object_type => $object_caches ) {
+                       $cache_group = $cache_groups[ $object_type ];
+                       foreach ( $object_caches as $object_id => $object_cache ) {
+                               wp_cache_set( $object_id, $object_cache, $cache_group );
+                       }
+               }
+       }
+
+       return;
+}
+
</ins><span class="cx"> function xprofile_clear_profile_groups_object_cache( $group_obj ) {
</span><span class="cx">  wp_cache_delete( 'xprofile_groups_inc_empty',        'bp' );
</span><span class="cx">  wp_cache_delete( 'xprofile_group_' . $group_obj->id, 'bp' );
</span></span></pre></div>
<a id="trunkbpxprofilebpxprofileclassesphp"></a>
<div class="modfile"><h4>Modified: trunk/bp-xprofile/bp-xprofile-classes.php (7913 => 7914)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/bp-xprofile/bp-xprofile-classes.php        2014-02-17 18:24:43 UTC (rev 7913)
+++ trunk/bp-xprofile/bp-xprofile-classes.php   2014-02-17 19:42:03 UTC (rev 7914)
</span><span class="lines">@@ -117,6 +117,8 @@
</span><span class="cx">   *              'fetch_field_data' - Load each field's data. Requires a user_id
</span><span class="cx">   *              'exclude_groups' - Comma-separated list of groups to exclude
</span><span class="cx">   *              'exclude_fields' - Comma-separated list of fields to exclude
</span><ins>+        *              'update_meta_cache' - Whether to pre-fetch xprofilemeta
+        *                 for all retrieved groups, fields, and data
</ins><span class="cx">    *
</span><span class="cx">   * @return array $groups
</span><span class="cx">   */
</span><span class="lines">@@ -132,11 +134,20 @@
</span><span class="cx">                  'fetch_field_data'       => false,
</span><span class="cx">                  'fetch_visibility_level' => false,
</span><span class="cx">                  'exclude_groups'         => false,
</span><del>-                       'exclude_fields'         => false
</del><ins>+                        'exclude_fields'         => false,
+                       'update_meta_cache'      => true,
</ins><span class="cx">           );
</span><span class="cx"> 
</span><span class="cx">          $r = wp_parse_args( $args, $defaults );
</span><span class="cx">          extract( $r, EXTR_SKIP );
</span><ins>+
+               // Keep track of object IDs for cache-priming
+               $object_ids = array(
+                       'group' => array(),
+                       'field' => array(),
+                       'data'  => array(),
+               );
+
</ins><span class="cx">           $where_sql = '';
</span><span class="cx"> 
</span><span class="cx">          if ( !empty( $profile_group_id ) )
</span><span class="lines">@@ -161,6 +172,9 @@
</span><span class="cx">                  $group_ids[] = $group->id;
</span><span class="cx">          }
</span><span class="cx"> 
</span><ins>+               // Store for meta cache priming
+               $object_ids['group'] = $group_ids;
+
</ins><span class="cx">           $group_ids = implode( ',', (array) $group_ids );
</span><span class="cx"> 
</span><span class="cx">          if ( empty( $group_ids ) )
</span><span class="lines">@@ -183,6 +197,9 @@
</span><span class="cx">          // Fetch the fields
</span><span class="cx">          $fields = $wpdb->get_results( "SELECT id, name, description, type, group_id, is_required FROM {$bp->profile->table_name_fields} WHERE group_id IN ( {$group_ids} ) AND parent_id = 0 {$exclude_fields_sql} ORDER BY field_order" );
</span><span class="cx"> 
</span><ins>+               // Store field IDs for meta cache priming
+               $object_ids['field'] = wp_list_pluck( $fields, 'id' );
+
</ins><span class="cx">           if ( empty( $fields ) )
</span><span class="cx">                  return $groups;
</span><span class="cx"> 
</span><span class="lines">@@ -240,6 +257,9 @@
</span><span class="cx">                                                  $fields[$field_key]->data->value = $data->value;
</span><span class="cx">                                                  $fields[$field_key]->data->id    = $data->id;
</span><span class="cx">                                          }
</span><ins>+
+                                               // Store for meta cache priming
+                                               $object_ids['data'][] = $data->id;
</ins><span class="cx">                                   }
</span><span class="cx">                          }
</span><span class="cx">                  }
</span><span class="lines">@@ -273,6 +293,11 @@
</span><span class="cx">                  $groups = array_values( $groups );
</span><span class="cx">          }
</span><span class="cx"> 
</span><ins>+               // Prime the meta cache, if necessary
+               if ( $update_meta_cache ) {
+                       bp_xprofile_update_meta_cache( $object_ids );
+               }
+
</ins><span class="cx">           return $groups;
</span><span class="cx">  }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkbpxprofilebpxprofiletemplatephp"></a>
<div class="modfile"><h4>Modified: trunk/bp-xprofile/bp-xprofile-template.php (7913 => 7914)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/bp-xprofile/bp-xprofile-template.php       2014-02-17 18:24:43 UTC (rev 7913)
+++ trunk/bp-xprofile/bp-xprofile-template.php  2014-02-17 19:42:03 UTC (rev 7914)
</span><span class="lines">@@ -24,7 +24,7 @@
</span><span class="cx">  var $in_the_loop;
</span><span class="cx">  var $user_id;
</span><span class="cx"> 
</span><del>-       function __construct( $user_id, $profile_group_id, $hide_empty_groups = false, $fetch_fields = false, $fetch_field_data = false, $exclude_groups = false, $exclude_fields = false, $hide_empty_fields = false, $fetch_visibility_level = false ) {
</del><ins>+        function __construct( $user_id, $profile_group_id, $hide_empty_groups = false, $fetch_fields = false, $fetch_field_data = false, $exclude_groups = false, $exclude_fields = false, $hide_empty_fields = false, $fetch_visibility_level = false, $update_meta_cache = true ) {
</ins><span class="cx">           $this->groups = BP_XProfile_Group::get( array(
</span><span class="cx">                  'profile_group_id'    => $profile_group_id,
</span><span class="cx">                  'user_id'             => $user_id,
</span><span class="lines">@@ -34,7 +34,8 @@
</span><span class="cx">                  'fetch_field_data'    => $fetch_field_data,
</span><span class="cx">                  'fetch_visibility_level' => $fetch_visibility_level,
</span><span class="cx">                  'exclude_groups'      => $exclude_groups,
</span><del>-                       'exclude_fields'      => $exclude_fields
</del><ins>+                        'exclude_fields'      => $exclude_fields,
+                       'update_meta_cache'   => $update_meta_cache,
</ins><span class="cx">           ) );
</span><span class="cx"> 
</span><span class="cx">          $this->group_count = count($this->groups);
</span><span class="lines">@@ -174,13 +175,14 @@
</span><span class="cx">          'fetch_field_data'    => true,
</span><span class="cx">          'fetch_visibility_level' => $fetch_visibility_level_default,
</span><span class="cx">          'exclude_groups'      => false, // Comma-separated list of profile field group IDs to exclude
</span><del>-               'exclude_fields'      => false  // Comma-separated list of profile field IDs to exclude
</del><ins>+                'exclude_fields'      => false,  // Comma-separated list of profile field IDs to exclude
+               'update_meta_cache'   => true,
</ins><span class="cx">   );
</span><span class="cx"> 
</span><span class="cx">  $r = wp_parse_args( $args, $defaults );
</span><span class="cx">  extract( $r, EXTR_SKIP );
</span><span class="cx"> 
</span><del>-       $profile_template = new BP_XProfile_Data_Template( $user_id, $profile_group_id, $hide_empty_groups, $fetch_fields, $fetch_field_data, $exclude_groups, $exclude_fields, $hide_empty_fields, $fetch_visibility_level );
</del><ins>+        $profile_template = new BP_XProfile_Data_Template( $user_id, $profile_group_id, $hide_empty_groups, $fetch_fields, $fetch_field_data, $exclude_groups, $exclude_fields, $hide_empty_fields, $fetch_visibility_level, $update_meta_cache );
</ins><span class="cx">   return apply_filters( 'bp_has_profile', $profile_template->has_groups(), $profile_template );
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkteststestcasesxprofilecachephp"></a>
<div class="addfile"><h4>Added: trunk/tests/testcases/xprofile/cache.php (0 => 7914)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/tests/testcases/xprofile/cache.php                         (rev 0)
+++ trunk/tests/testcases/xprofile/cache.php    2014-02-17 19:42:03 UTC (rev 7914)
</span><span class="lines">@@ -0,0 +1,150 @@
</span><ins>+<?php
+
+/**
+ * @group xprofile
+ * @group cache
+ */
+class BP_Tests_XProfile_Cache extends BP_UnitTestCase {
+       /**
+        * @group bp_xprofile_update_meta_cache
+        */
+       public function test_bp_xprofile_update_meta_cache() {
+               $u = $this->create_user();
+               $g = $this->factory->xprofile_group->create();
+               $f = $this->factory->xprofile_field->create( array(
+                       'type' => 'textbox',
+                       'field_group_id' => $g,
+               ) );
+
+               $d = new BP_XProfile_ProfileData( $f, $u );
+               $d->user_id = $u;
+               $d->field_id = $f;
+               $d->value = 'foo';
+               $d->last_updated = bp_core_current_time();
+               $d->save();
+
+               bp_xprofile_add_meta( $g, 'group', 'group_foo', 'group_bar' );
+               bp_xprofile_add_meta( $f, 'field', 'field_foo', 'field_bar' );
+               bp_xprofile_add_meta( $d->id, 'data', 'data_foo', 'data_bar' );
+
+               // prime cache
+               bp_xprofile_update_meta_cache( array(
+                       'group' => array( $g ),
+                       'field' => array( $f ),
+                       'data' => array( $d->id ),
+               ) );
+
+               $g_expected = array(
+                       'group_foo' => array(
+                               'group_bar',
+                       ),
+               );
+
+               $this->assertSame( $g_expected, wp_cache_get( $g, 'xprofile_group_meta' ) );
+
+               $f_expected = array(
+                       'field_foo' => array(
+                               'field_bar',
+                       ),
+               );
+
+               $this->assertSame( $f_expected, wp_cache_get( $f, 'xprofile_field_meta' ) );
+
+               $d_expected = array(
+                       'data_foo' => array(
+                               'data_bar',
+                       ),
+               );
+
+               $this->assertSame( $d_expected, wp_cache_get( $d->id, 'xprofile_data_meta' ) );
+       }
+
+       /**
+        * @group bp_xprofile_update_meta_cache
+        * @group bp_has_profile
+        */
+       public function test_bp_has_profile_meta_cache() {
+               $u = $this->create_user();
+               $g = $this->factory->xprofile_group->create();
+               $f = $this->factory->xprofile_field->create( array(
+                       'type' => 'textbox',
+                       'field_group_id' => $g,
+               ) );
+
+               $d = new BP_XProfile_ProfileData( $f, $u );
+               $d->user_id = $u;
+               $d->field_id = $f;
+               $d->value = 'foo';
+               $d->last_updated = bp_core_current_time();
+               $d->save();
+
+               bp_xprofile_add_meta( $g, 'group', 'group_foo', 'group_bar' );
+               bp_xprofile_add_meta( $f, 'field', 'field_foo', 'field_bar' );
+               bp_xprofile_add_meta( $d->id, 'data', 'data_foo', 'data_bar' );
+
+               // prime cache
+               bp_has_profile( array(
+                       'user_id' => $u,
+                       'profile_group_id' => $g,
+               ) );
+
+               $g_expected = array(
+                       'group_foo' => array(
+                               'group_bar',
+                       ),
+               );
+
+               $this->assertSame( $g_expected, wp_cache_get( $g, 'xprofile_group_meta' ) );
+
+               $f_expected = array(
+                       'field_foo' => array(
+                               'field_bar',
+                       ),
+               );
+
+               $this->assertSame( $f_expected, wp_cache_get( $f, 'xprofile_field_meta' ) );
+
+               $d_expected = array(
+                       'data_foo' => array(
+                               'data_bar',
+                       ),
+               );
+
+               $this->assertSame( $d_expected, wp_cache_get( $d->id, 'xprofile_data_meta' ) );
+       }
+
+       /**
+        * @group bp_xprofile_update_meta_cache
+        * @group bp_has_profile
+        */
+       public function test_bp_has_profile_meta_cache_update_meta_cache_false() {
+               $u = $this->create_user();
+               $g = $this->factory->xprofile_group->create();
+               $f = $this->factory->xprofile_field->create( array(
+                       'type' => 'textbox',
+                       'field_group_id' => $g,
+               ) );
+
+               $d = new BP_XProfile_ProfileData( $f, $u );
+               $d->user_id = $u;
+               $d->field_id = $f;
+               $d->value = 'foo';
+               $d->last_updated = bp_core_current_time();
+               $d->save();
+
+               bp_xprofile_add_meta( $g, 'group', 'group_foo', 'group_bar' );
+               bp_xprofile_add_meta( $f, 'field', 'field_foo', 'field_bar' );
+               bp_xprofile_add_meta( $d->id, 'data', 'data_foo', 'data_bar' );
+
+               // prime cache
+               bp_has_profile( array(
+                       'user_id' => $u,
+                       'profile_group_id' => $g,
+                       'update_meta_cache' => false,
+               ) );
+
+               $this->assertFalse( wp_cache_get( $g, 'xprofile_group_meta' ) );
+               $this->assertFalse( wp_cache_get( $f, 'xprofile_field_meta' ) );
+               $this->assertFalse( wp_cache_get( $d->id, 'xprofile_data_meta' ) );
+       }
+}
</ins></span></pre>
</div>
</div>

</body>
</html>