Now that we are done with the setup and the frontend controller we need to move to backend.

The backend files for a module are located in the Admin folder inside the module folder, so we need to create folder Admin in the Module\Blog folder.

Now we need to create inside the new created Admin folder the page used for displaying a table with the posts.

This controller that outputs the administration page works almost the same as the frontend page controller.

Some differences are that the filename is now AdminPage.class.php, namespace has now appended \Admin and we don't need any more the ogimage property.

The javascript and stylesheet files are loaded from the admin/js and admin/css folders. If we need a custom javascript or css file that we create in our module folder we need to put a path like this: ../Module/MODULE_NAME/Admin/JS_FILENAME.js or ../Module/MODULE_NAME/Admin/CSS_FILENAME.css

The content of AdminPage.class.php file

<?php
//PSR-0 namespace
namespace Module\Blog\Admin;

use Utils\Util;

class AdminPage extends \Controller\AdminPage {
	public function output() {
        $statusOptions = [-1 => __('Any'), 0 => __('Hidden'), 1 => __('Published')];
		$page = new \stdClass();
		$page->title = __('Edit posts');
		$page->h1 = __('Edit posts');
		//Combobox javascript is used to filter by username
        $page->js = array('js/combobox.js','../vendor/datatables/datatables/media/js/jquery.dataTables.min.js', '../vendor/datatables/datatables/media/js/dataTables.bootstrap4.min.js', '../vendor/ckeditor/ckeditor/ckeditor.js', 'js/jsall.js', 'Module/Blog/Admin/blog.js');
        $page->css = array('../vendor/datatables/datatables/media/css/jquery.dataTables.min.css', '../vendor/datatables/datatables/media/css/dataTables.bootstrap4.min.css', 'dataTables.fontawesome.css');
		$page->content = '<div class="box">
	<div class="box-header">
	    <div class="row">
			<div class="col-md-9"><h3 class="box-title">' . __('Edit posts') . '</h3></div>
			<div class="col-md-3">
				<a href="#" class="filter-datatable"><i class="fas fa-search"></i>' . __('Filters') . '</a>
			</div>
		</div>
	</div>
	<div class="box-body">
	    <div class="row">
			<div class="col-12">
				<table id="data_table" class="table table-borderless table-hover table-sm w-100">
					<thead class="thead-light">
						<tr><th data-filtertype="text" data-filterid="idf">#</th><th data-filtertype="text" data-filterid="titlef">' . __('Title') . '</th><th data-filtertype="text" data-filterid="authorf" data-autocomplete="author">' . __('Author') . '</th><th>' . __('Updated on') . '</th><th data-filtertype="select" data-filterid="statusf" data-options=\'' . json_encode($statusOptions, JSON_FORCE_OBJECT) . '\'>' . __('Status') . '</th><th>' . __('Actions') . '</th></tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="box-footer">
		<div class="btn-toolbar">
			<button id="add" class="btn btn-outline-primary btn-sm"><i class="fas fa-plus"></i> ' . __('Add post') . '</button>
		</div>
	</div>
</div>
<div id="ppEdit" class="modal dialog fade">
	<div class="modal-dialog modal-lg" style="width: 80vw; max-width: 80vw;">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">' . __('Edit post') . '</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="' . __('Close') . '">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body" id="edtable">
				<div class="form-group">
				    <div class="input-group">
                        <input type="text" class="form-control" id="edtitle" name="edtitle" />
                        <label for="edtitle" class="control-label">' . __('Title') . '</label>
                        <i class="bar"></i>
				    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <textarea id="edcontent" name="edcontent" class="form-control" rows="20" cols="300"></textarea>
                        <label for="edcontent" class="control-label">' . __('Content') . '</label>
                        <i class="bar"></i>
				    </div>
                </div>
                 <div class="form-group">
                    <div class="input-group">
                        <textarea id="eddescription" name="eddescription" class="form-control" rows="20" cols="300"></textarea>
                        <label for="eddescription" class="control-label">' . __('Description') . '</label>
                        <i class="bar"></i>
				    </div>
                </div>
                <form action="" method="post" id="imageUploadForm">
					<div class="form-group">
					    <div class="input-group">
                            <input type="file" class="form-control" id="edimage" name="edimage" />
                            <label for="edimage" class="control-label">' . __('Image') . '</label>
                            <i class="bar"></i>
                            <img id="imagePreview" src="" data-default="default.jpg" data-folder="posts" />
                        </div>
					</div>
				</form>
				<div class="form-group">
					<div class="input-group">
						<select id="edstatus" name="edstatus">' . Util::arrayToOptions($statusOptions, true) . '</select>
						<label for="edstatus" class="control-label">' . __('Status') . '</label>
						<i class="bar"></i>
					</div>
                </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">' . __('Close') . '</button>
				<button type="button" class="btn btn-outline-primary" id="save">' . __('Save') . '</button>
			</div>
		</div>
	</div>
</div>';
		return $page;
	}
}