Рисунок 28 - Проверка данных и сохранение в базу данных
Следующим шагом является проверка ассоциативного массива переменных, переданных скрипту через параметры URL на присутствие значения editpost. Если пост редактируется, то обновляем, если нет - вставляем новую запись.
Рисунок 29 - Редактирование или создание нового поста
После выводим начало интерфейса для ввода информации от пользователя. Совершаем проверку ассоциативного массива переменных, переданных через параметры URL на присутствие значения editpost. Делаем выборку из базы данных информации по указанному в переменной editpostid посту.
веб приложение отложенный постинг
Рисунок 30 - Вывод начала интерфейса, проверка и выборка
Следующим этап происходит вывод формы ввода данных поста, учитывая полученную информацию, полученную при наличии переменной editpostid.
Рисунок 31 - Вывод формы ввода
Далее проводим выборку из базы данных информации обо всех постах, имеющихся в базе данных, и выводим в таблицу.
Рисунок 32 - Выборка и вывод в таблицу
В конце выводится окончание HTML-страницы и закрытие работы с базой данных.
Рисунок 33 - Вывод окончания HTML-страницы и закрытие БД
Полный текст кода index.php можно посмотреть в приложении 5.
Cronpost.php
Сначала происходит объявление пременных, где $token - наш токен, полученный из запроса в ВКонтакте, а $owner_id - мой ID страницы в ВКонтакте
Рисунок 34 - Объявление переменных
Далее происходит запрос в базу данных на наличие в ближайшем временном периоде неотправленных сообщений.
Рисунок 35 - Запрос в БД
Следующим действием является получение разрешения на загрузку картинки в ВКонтакте, получение ссылки загрузки.
Рисунок 36 - Получение разрешения и ссылки
После загружаем изображение.
Рисунок 37 - Загрузка изображения
Дальше получаем данные для сохранения изображения.
Рисунок 38 - Получение данных для сохранения изображения
Сохраняем фото на сервер ВКонтакте.
Рисунок 39 - Сохранение фото на сервер ВКонтакте
В конце сохраняется информация об отправке и закрывается подключение к базе данных.
Рисунок 40 - Сохранение информации об отправке и закрытие подключения к БД
Полный текст кода cronpost.php можно посмотреть в приложении 6.
Разработав программное обеспечение, мы умеем полноценное веб-приложение. Далее стоит провести тестирование на функционирование и отсутствие ошибок.
10. ТЕСТИРОВАНИЕ
Тестирование №1. Создание и публикация отложенного поста с изображением формата JPG
Вводим текст, выбираем изображение JPG формата, устанавливаем дату и время.
Рисунок 41 - Тест первый, ввод данных, изображения формата JPG
Рисунок 42 - Опубликованный пост
Итог: пост был выложен в заданное время с текстом и изображением
Тестирование №2. Создание и публикация отложенного поста с изображением формата PNG
Вводим текст, выбираем изображение PNG формата, устанавливаем дату и время.
Рисунок 43 - Тест второй, ввод данных, изображения формата PNG
Рисунок 44 - Опубликованный пост
Итог: пост был выложен в заданное время с текстом и изображением
Тестирование №3. Редактирование созданного поста.
Выбираем один из уже созданных постов, редактируем текст и сохраняем.
Рисунок 45 - Выбор созданного поста
Рисунок 46 - Открытие созданного поста
Рисунок 47 - Добавление дополнительного текста
Рисунок 48 - Сохраненный пост после редактирования
Рисунок 49 - Опубликованный пост с редактированием
Итог: пост был отредактирован и опубликован.
Тестирование №4. Удаление поста.
Выбираем один из уже созданных постов и удаляем.
Рисунок 50 - Создания поста для последующего удаления
Рисунок 51 - Нажатие на кнопку удаления поста
Рисунок 52 - Отсутствие поста после удаления
Итог: пост был удален.
После проведения тестирования, мы убедились, что приложение функционирует должным образом, не имеет ошибок и багов.
11. РАЗРАБОТКА МЕТОДИЧЕСКИХ УКАЗАНИЙ
Запуск программы
Откройте любой бразуер (Chrome, Opera, Safari, Edge и др.) и в строке браузера введите vkupload.agts29.ru и нажмите Enter
Рисунок 53 - Адрес веб-приложения в строке браузера
Авторизация
Для доступа к сайту введите логин «admin» и пароль «123123»
Рисунок 54 - Авторизация на сайте
Создание отложенного поста
Введите текст будущего поста, выберите изображение, установите дату и время будущей публикации и нажмите «Отправить»
Рисунок 55 - Ввод текста, выбор изображения, установка даты и времени и нажатие кнопки «Отправить»
Редактирование поста
Чтобы отредактировать публикацию, выберите ее в таблице «Имеющиеся посты» и нажмите на текст поста.
Рисунок 56 - Выбор существующего поста
Далее измените текст, изображение и/или дату и время публикации и нажмите «Отправить».
Рисунок 57 - Изменения текста, изображения и времени публикации
Удаление поста
Чтобы удалить публикацию, выберите ее в таблице «Имеющиеся посты» и нажмите на иконку мусорного бака.
Рисунок 58 - Удаление поста
Таким образом, любому новому пользователю будет не сложно, а главное - быстро разобраться с данным приложением.
ЗАКЛЮЧЕНИЕ
Результатом выпускной квалификационной работы является разработка веб-приложения для отложенного постинга. Использование данного сервиса позволит осуществлять более упрощенное размещение публикаций, что значительно ускорит работу SMM-менеджеров, медийных личностей, а также простых пользователей, сделает ее более эффективной, повысится уровень качества и количество публикаций.
Перед разработкой программного обеспечения было проведено его проектирование. В пояснительной записке описан процесс проектирования, включавший в себя: анализ существующей ситуации, выбор технологии языка и инструментальных средств, разработка требований к программному продукту, разработка блок-схемы алгоритмов, реализация и тестирование программного обеспечения.
Для созданной программы также были составлены методические указания.
Разработанное программное обеспечение отвечает всем предъявленным требованиям, оно позволит улучшить ведение профиля в социальной сети в ВКонтакте.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Лав, Р. Linux. Системное программирование / Роберт Лав. -- Ньютон: O'Reilly Media, 2013. -- 446с.
2. Лав, Р. Ядро Linux. Описание процесса разработки / Роберт Лав. -- Москва: Вильямс, 2013. -- 496с.
3. Марк, А. Администрирование Apache / Арнольд Марк, Миллер Клинт, Алмейда Джефф -- Москва: Лори, 2012. -- 418с.
4. MySQL по максимуму / Шварц Бэрон, Ткаченко Вадим, Зайцев Петр. -- Санкт-Петербург: Питер, 2018. -- 864с.
5. Симдянов, И.В. PHP 7 / Симдянов Игорь Вячеславович, Котеров Дмитрий Владимирович. -- Санкт-Петербург: КУДИЦ-Пресс, 2018. -- 595с.
6. Хадсон, П. PHP. Справочник / Пол Хадсон. -- Санкт-Петербург: БХВ-Петербург, 2006. -- 448с.
7. Веллинг, Л. Разработка веб-приложений с помощью PHP и MySQL / Люк Веллинг, Лаура Томсон. -- Москва: Вильямс, 2016. -- 848с.
8. Робин, Н. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Никсон Робин. -- Санкт-Петербург: Питер, 2017. -- 768с.
9. Роббинс, Д.Н. HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Нидерст Роббинс. -- Москва: Эксмо, 2014. -- 516с.
10. Фельке-Моррис, Т. Большая книга веб-дизайна / Терри Фельке-Моррис. -- Москва: Litres, 2017. -- 595с.
11. Дуглас, К. JavaScript. Сильные стороны / Крокфорд Дуглас. -- Санкт-Петербург: Питер, 2013. -- 179с.
ПРИЛОЖЕНИЕ 1
Блок-схема index.php
ПРИЛОЖЕНИЕ 2
Листинг style.css
?@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
body{
background-color:green;
background: url(img/bg.jpg);
background-attachment: fixed;
font-family: 'Open Sans', sans-serif;
padding-top:10px;
}
p{
color:rgba(0,0,0,.7);
width:100%;
margin: 100px auto;
font-weight:300;
text-align:center;
}
a{
text-decoration:none;
color:#0079f2;
}
.container{
max-width: 32em;
margin: 0 auto;
padding: 0.6em;
}
/* Стили полей ввода */
.textbox{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
font-size:18px;
padding:10px;
margin-bottom:30px;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
height:40px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
font-size:12px;
padding:5px;
margin-bottom:5px;
}
.inputfile + label {
display: inline-block;
}
.inputfile + label {
cursor: pointer; /* "hand" cursor */
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 2px solid;
color:rgba(24,149,215,1);
}
/* Стили текстового поля */
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:18px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
overflow:hidden;
}
/* Базовые стили кнопки */
.button{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
box-sizing:border-box;
padding:10px;
background:#90c843;
color:#FFF;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size: 16pt;
transition:background.4s;
cursor:pointer;
}
/* Изменение фона кнопки при наведении */
.button:hover{
background:#80b438;
}
th {
max-width: 25em;
font-weight: normal;
font-size: 7px;
color: white;
padding: 10px 12px;
background: rgba(44, 204, 76,.8);
}
td {
font-size: 0.07em;
max-width: 1em;
color: #0079f2;
border-top: 1px solid white;
padding: 1px 3px;
background: rgba(44, 204, 76,.4);
transition:.3s;
}
tr:hover td {
background: rgba(44, 204, 76,.2);
}
h4 {
display: block;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
}
@media (min-width: 1024px) {
body{
background-color:green;
background: url(img/bg.jpg);
background-attachment: fixed;
font-family: 'Open Sans', sans-serif;
padding-top:10px;
}
p{
color:rgba(0,0,0,.7);
width:100%;
margin: 100px auto;
font-weight:300;
text-align:center;
}
a{
text-decoration:none;
color:#0079f2;
}
.container{
max-width: 32em;
margin: 0 auto;
padding: 0.6em;
}
/* Базовые стили формы */
form{
margin:0 auto;
max-width:35%;
box-sizing:border-box;
padding:20px;
border-radius:5px;
background:RGBA(255,255,255,1);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0,.45);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0,.45);
}
/* Стили полей ввода */
.textbox{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
font-size:18px;
padding:10px;
margin-bottom:30px;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
font-size:18px;
padding:10px;
margin-bottom:5px;
}
.inputfile + label {
display: inline-block;
}
.inputfile + label {
cursor: pointer; /* "hand" cursor */
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 2px solid;
color:rgba(24,149,215,1);
}
/* Стили текстового поля */
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:18px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
overflow:hidden;
}
/* Базовые стили кнопки */
.button{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
box-sizing:border-box;
padding:10px;
background:#90c843;
color:#FFF;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size: 16pt;
transition:background.4s;
cursor:pointer;
}
/* Изменение фона кнопки при наведении */
.button:hover{
background:#80b438;
}
th {
max-width: 25em;
font-weight: normal;
font-size: 14px;
color: white;
padding: 10px 12px;
background: rgba(44, 204, 76,.8);
}
td {
font-size: 0.7em;
max-width: 1em;
color: #0079f2;
border-top: 1px solid white;
padding: 10px 12px;
background: rgba(44, 204, 76,.4);
transition:.3s;
}
tr:hover td {
background: rgba(44, 204, 76,.2);
}
h4 {
display: block;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
}
ПРИЛОЖЕНИЕ 3
Листинг scrypt.js
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input)
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener('change', function(e)
{
var fileName = '';
if(this.files && this.files.length > 1)
fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
else
fileName = e.target.value.split('\\').pop();
if(fileName)
label.querySelector('span').innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
// get the iso time string formatted for usage in an input['type="datetime-local"']
var tzoffset = (new Date()).getTimezoneOffset() * 60000;
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
var localISOTimeWithoutSeconds = localISOTime.slice(0,16);
var dtlInput = document.querySelector('input[type="datetime-local"]');
dtlInput.value = localISOTime.slice(0,16);
ПРИЛОЖЕНИЕ 4
Листинг index.php
<?php
//phpinfo();
//require("top.html");
Error_Reporting(1+2+4);
$uploaddir = "/home/u/ustuggazru/vkupload/public_html/files/";
$dbconn = mysqli_connect("localhost", "ustuggazru_objec", "mykuku", "ustuggazru_objec") or die("Could not connect: ". mysql_error());
//$dbobject = mysqli_select_db('ustuggazru_objec', $dbconn) or die ('Не удалось выбрать базу ustuggazru_objec: '. mysql_error());
$NowDate=mktime();
if(isset($_GET['deletepost'])){
$deletepost=htmlspecialchars(stripslashes($_GET['deletepost']));
if(!is_numeric($deletepost)){
$deletepost=0;
}else{
$query = "DELETE FROM otlozhpost WHERE idpost=".$deletepost;
$resultQuery = mysqli_query($dbconn, $query);
}
}
if($_POST['sub']&&$_POST['textmessage']){
// проведем проверку данных и сохраним в базу.
if(isset($_POST['textmessage'])){$textmessage=htmlspecialchars(stripslashes($_POST['textmessage']));}