Why shortcode always displayed after footer not in body

Question

I create custom plugin to display last post from main and microsite (Multisite) and display it at the page with shortcode. The prblem output/content is displayed after footer, not in body.

Code

function tulisan_terbaru_function() { ?>
    <h3>Tulisan terbaru website kebudayaan...</h3><?php date('j F Y');

    $blogs = get_last_updated();?>
    <table class="widefat" cellspacing="0">
    <?php
    foreach ($blogs AS $blog) {    
        switch_to_blog($blog["blog_id"]);
        $today = getdate();
        $args = array(
        'post_type'         => 'post',
        'post_status'       => 'publish',
        'date_query'        => array(
            array(
            'year'  => $today['year'],
            'month' => $today['mon'],
            'day'   => $today['mday']
                )
            )
        );
        $wpb_all_query = new WP_Query($args); ?>
        <?php if ( $wpb_all_query->have_posts() ) : ?>


            <!-- the loop -->
            <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                <tr> <td><?php the_time('H:i');?></td><td><?php echo get_bloginfo('name');?></td><td><a href="<?php the_permalink(); ?>"><?php the_title();?></a></td></tr>
            <?php endwhile; ?>
            <!-- end of the loop -->

        <?php wp_reset_postdata(); ?>
        <?php endif;
            restore_current_blog();
    };
};

Answer 1

Ahmad, a shortcode needs to return the html, not echo it directly like a widget does. Shortcodes work because wordpress replaces the [shortcode] with the text returned by the shortcode function.

So change the code to something like:

$html = '<h3>Tulisan terbaru website kebudayaan...</h3>'.date('j F Y');
$blogs = get_last_updated();
$html .='<table class="widefat" cellspacing="0">';   
foreach ($blogs AS $blog) {........
....
}
...
return ($html);