Modifying the list and edit forms
Until now I have actually added all posts to my site by adding them directly into the database manager phpmyadmin. But this is not really what I want to do. I would like to be able to add and edit posts directly from my administration section of the site. So now we are going to modify the post list and edit form to suit our needs.
We start with the list. First of all I do not want all of the text nor the summary in my list. So lets start by removing that. And if you have not done so yet, run the index.php?module=post&view=list&generate=code in order to generate the default file.
// views/post/list.php
<th>
Title
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>
<th>
Topic
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>
<!-- <th>
Summary
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>
<th>
Message
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>
<th>
Embed
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>-->
<th>
User
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>&desc=1">-</a>
<a href="?page=<?php echo $page; ?><?php echo $params; ?>&orderby=<?php echo $t->columnName; ?>">+</a>
</th>
...
<td>
<?php $sc = new Topic((int)$item->topicId); ?>
<span class="noedit"><?php echo $sc->table_data[1]; ?></span>
</td>
<!-- <td>
<?php #echo $item->summary; ?>
</td>
<td>
<?php #echo $item->message; ?>
</td>
<td>
<?php #echo $item->embed; ?>
</td>-->
<td>
<?php $sc = new User((int)$item->userId); ?>
<span class="noedit"><?php echo $sc->table_data[1]; ?></span>
</td>
For now I have only commented the code out, so that you can see the changes, but I might just as well delete those segments. I will actually remove some more columns because the list was still to wide. I could also change the date columns to use a more readable date like this:
// views/list.php
change
<?php echo $item->publish; // 2015-11-02 18:02:36 ?>
to
<?php echo date('d M Y', strtotime($item->publish)); // 2 Nov 2015 ?>
or
<?php echo String::timeDiff($item->publish); // 5 weeks ago ?>
classes/String.php
...
function timeDiff($dateTime) {
$currDateTime = date('Y-m-d H:i:s');
$diff = strtotime($currDateTime) - strtotime($dateTime);
$time = $diff;
$unit = 'second';
$singular = '';
$plural = 's';
if ($diff < 3600 and $diff > 60) {
$time = round($diff/60);
$unit = 'minute';
$singular = '';
$plural = 's';
} else if ($diff < (3600 * 24)) {
$time = round($diff/3600);
$unit = 'hour';
$singular = '';
$plural = 's';
} else if ($diff < (3600 * 24 * 7)) {
$time = round($diff/(3600 * 24));
$unit = 'day';
$singular = '';
$plural = 's';
} else if ($diff < (3600 * 24 * 7 * 5)) {
$time = round($diff/(3600 * 24 * 7));
$unit = 'week';
$singular = '';
$plural = 's';
} else if ($diff < (3600 * 24 * 365)) {
$time = round($diff/(3600 * 24 * 30));
$unit = 'month';
$singular = '';
$plural = 's';
} else {
$time = round($diff/(3600 * 24 * 365));
$unit = 'year';
$singular = '';
$plural = 's';
}
if ($time > 1) {
$unit .= $plural;
} else {
$unit .= $singular;
}
return $time . ' ' . $unit . ' ago';
}
...
I also want to view my last posts first in the list. So I need to change the default.
// views/list.php
from
$desc = '';
if (Http::filter_input(INPUT_GET, 'desc', FILTER_SANITIZE_URL) == 1) {
$desc = 'DESC';
}
to
$desc = 'DESC';
if (Http::filter_input(INPUT_GET, 'desc', FILTER_SANITIZE_URL) == 1) {
$desc = 'ASC';
}
Now let's move on tho the edit form. Here I would like to ad a WYSIWYG editor for the text among other things. Again we start by generating some code: index.php?module=post&view=edit&id=19&generate=code.
// views/post/edit.php
First I want a textarea to enter my summary. Change
<tr>
<th>
Summary
</th>
<td>
<input
type="text"
value="<?php echo $obj->summary; ?>"
name="summary"
>
</td>
</tr>
To
<tr>
<th>
Summary
</th>
<td>
<textarea
name="summary"
style="width: 100%; height: 50px;"
><?php echo $obj->summary; ?></textarea>
</td>
</tr>
I also change the width of the message and the embed textareas to 100% and the height of the message to 500px.You can play around with that as mush as you like. Next we are going to remove the user and the posted fields from the edit form. These should be generated automatically the first time a new post is generated. Here is how we do that.
// classes/Post.php
function update() {
// if this is a new post
if ($this->id == 0) {
// Get the user who is logged in
$ad = ActiveData::getInstance();
$user = $ad->user;
$this->userId = $user->id;
// Set the date posted
$this->posted = date('Y-m-d H:i:s');
}
// Execute the standard function for saving data to the database
parent::update();
}
// views/post/edit.php
Comment out the following lines in the save section
#$obj->userId = Http::filter_input(INPUT_POST, 'user_id');
#$obj->posted = Http::filter_input(INPUT_POST, 'posted');
Change the form fields to only show saved data
<tr>
<th>
User
</th>
<td>
<?php
$userId = $obj->userId;
if ($obj->id == 0) {
$userId = $user->id;
}
$u = new User((int)$userId);
echo $u->username;
?>
</td>
</tr>
<tr>
<th>
Posted
</th>
<td>
<?php
if ($obj->posted == '') {
$obj->posted = date('Y-m-d H:i:s');
}
echo $obj->posted;
?>
</td>
</tr>
Publish and Sent should certainly not have any default timestamps. So I just remove those from the code as well. I also want to add a publish button beside the publish timestamp. So that I do not have to enter it. But it could be generated when I click publish. Sometimes it is also good to remove the date, so that it can not be changed at a later date. But in this case I might just keep it for now. The sent is actually also generated when a newsletter with the new post has been sent. So we do not want to edit that one either. So we change that to pure text, just as we did with posted. Here is some of the updated code.
// views/post/edit.php
if (Http::filter_input(INPUT_POST, 'save', FILTER_SANITIZE_URL) != '' or
Http::filter_input(INPUT_POST, 'publish_btn', FILTER_SANITIZE_URL) != '') {
$obj->id = Http::filter_input(INPUT_POST, 'id');
$obj->title = Http::filter_input(INPUT_POST, 'title');
$obj->topicId = Http::filter_input(INPUT_POST, 'topic_id');
$obj->summary = Http::filter_input(INPUT_POST, 'summary');
$obj->message = Http::filter_input(INPUT_POST, 'message');
$obj->embed = Http::filter_input(INPUT_POST, 'embed');
#$obj->userId = Http::filter_input(INPUT_POST, 'user_id');
#$obj->posted = Http::filter_input(INPUT_POST, 'posted');
$obj->tags = Http::filter_input(INPUT_POST, 'tags');
if (Http::filter_input(INPUT_POST, 'publish_btn', FILTER_SANITIZE_URL) != ''
and $obj->publish == '0000-00-00 00:00:00') {
$obj->publish = date('Y-m-d H:i:s');
} else {
$obj->publish = Http::filter_input(INPUT_POST, 'publish');
}
$obj->sent = Http::filter_input(INPUT_POST, 'sent');
$obj->update();
...
<tr>
<th>
Publish
</th>
<td>
<input
type="text"
value="<?php echo $obj->publish; ?>"
name="publish"
>
<input type="submit" name="publish_btn" value="Publish" class="button">
</td>
</tr>
<tr>
<th>
Sent
</th>
<td>
<?php echo $obj->sent; ?>
</td>
</tr>
With this change the only thing left is to add the WYSIWYG editor. There are many different editors out there, so I encourage you to search for some and take a look at the. I have chosen the ckeditor because I think it looks nice and is stable. I start by adding the ckeditor files in my js library. Then I add the following code to my edit file.
// views/post/edit.php at the end of the file
<?php
$headerData->footerExtra = ' <script src="js/ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'message' );
</script>';
// Then modify the message field with the id="message" like this
<textarea name="message" style="width: 100%; height: 500px;" id="message"><?php echo $obj->message; ?></textarea>
There are a long list of things you can do to modify the ckeditor to only show the options you want to use. But in order to change that I will refer you to the ckeditor documentation.
This is how easy you can make modifications to the default views. And it is only your imagination that limits what you can do.
- Framework, PHP, Modifying