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;
}
}