Почтовые механизмы, подобные Facebook, в настоящее время очень распространены в любом приложении. Концепция Post-Like-Comment знакома всем, кто когда-либо пользовался социальной сетью. В этой статье мы узнаем, как создать аналогичную рабочую модель, в которой пользователь сможет публиковать свой статус, например сообщения и комментировать их. Что еще интереснее, узнав что-то из этой статьи, в дальнейшем вы сможете реализовать множество других функций самостоятельно.
Я буду использовать PHP в качестве языка кодирования, MongoDB в качестве базы данных и jQuery для операций JavaScript. Предполагается, что читатель знаком с основами PHP и MongoDB, чтобы полностью понять статью. Тем не менее, обратите внимание, что статья написана в очень общей и дружественной для новичков манере, и есть чему поучиться. Таким образом, даже если вы не используете Mongo DB или jQuery, вы можете легко адаптировать или заменить эти технологии на те, которые вы предпочитаете.
В этой серии есть две статьи. В первой статье мы изучим архитектуру базы данных, спроектируем поток и придумаем структуру потока приложения, которую мы собираемся адаптировать. В следующей статье этой серии мы напишем код, который в конечном итоге позволит нам создать новый пост, похожий на / не похожий на пост, и прокомментировать его. Поймите, что первая статья является основой для функций, которые мы собираемся реализовать в следующей части. Таким образом, будут случаи, когда вы не поймете фактическую логику реализации определенных вещей, пока не узнаете больше во второй статье. Статьи сопровождаются загружаемым кодом для вашей справки. Обратите внимание, что этот код написан в процедурной форме и, как таковой, определенно не лучшая практика. Эта упрощенная форма была выбрана для того, чтобы сделать саму реализацию более удобной для новичков, и этот почтовый механизм будет повторно реализован объектно-ориентированным способом в более сложной статье.
Прежде чем начать, давайте посмотрим на окончательную работу, которую мы разработаем ( рис. 1 ).
Скачать код:
Загрузите код, прилагаемый к статье, из репозитория Github . В нем вы найдете следующие файлы:
index.php : это основной файл, который отображает все сообщения и откуда пользователь будет взаимодействовать.
mongo_connection.php : Этот файл содержит общий код подключения MongoDB. Если вы внесли какие-либо изменения в учетные данные подключения MongoDB, вы должны указать их здесь. Во всех других файлах PHP мы включим этот файл, чтобы использовать общий код подключения MongoDB. Убедитесь, что MongoDB установлен, следуя инструкциям по установке и установке драйверов PHP .
session_variables.php : В статье предполагается, что у нас есть некоторые общие поля, такие как идентификатор пользователя, имя пользователя и изображение профиля пользователя, которые хранятся в переменных сеанса, поскольку они очень часто используются в приложении. Обычно такая информация задается, когда пользователь входит в систему, но для целей статьи мы установим ее в этом файле.
script.js и style.css содержат весь код Javascript и CSS. jquery.js — это стандартный файл библиотеки jQuery.
php_scripts : эта папка содержит все файлы PHP, которые мы будем вызывать через AJAX, чтобы выполнять операции PHP для вставки поста, выполнения как / в отличие от поста и вставки комментариев.
images : эта папка содержит изображения профиля всех пользователей.
Структура базы данных:
Коллекция пользователей будет простой, содержащей идентификатор пользователя, имя пользователя и фотографию профиля пользователя, как показано ниже:
{ "_id": ObjectId("5222f8e0d85242c01100000d"), "name": "Richard Garry", "profile_pic": "profile_pic_3.jpg" } Другая коллекция posts_collection будет хранить всю информацию, относящуюся к сообщениям, как показано в примере записи ниже:
{ "_id": ObjectId("5222f885d85242c011000009"), "post_author_id": ObjectId("5146bb52d8524270060001f4"), "post_text": "Let's get started !!!\t\t\t", "timestamp": "Sun, 01-Sep-2013", "total_comments": NumberInt(3), "total_likes": NumberInt(2) , "likes_user_ids": { "0": ObjectId("52147f70d85242cc12000010"), "1": ObjectId("5222f8e0d85242c01100000d") }, "comments": { "0": { "comment_id": ObjectId("5222f897d85242c01100000a"), "comment_user_id": ObjectId("52147f70d85242cc12000010"), "comment_text": "This is comment 1 !!" }, "1": { "comment_id": ObjectId("5222f8a7d85242c01100000b"), "comment_user_id": ObjectId("5222f8e0d85242c01100000d"), "comment_text": "This is comment 2 !!" } } }
Большинство полей в документе не требуют пояснений. likes_user_ids содержит идентификаторы всех пользователей
кому понравился пост. comments — это массив, который содержит вложенные документы для хранения информации комментариев.
Понимание дизайна потока:
Давайте сначала разместим текстовую область, где пользователь будет вводить текст сообщения и кнопку «Создать новое сообщение» (как показано на рис. 2 ), используя следующий код:
<div id="div_post_content"> <textarea id="post_textarea"> </textarea> </div> <div class="div_post_submit"> <input type="button" value="Create New Post" id="btn_new_post" class="button_style"/> </div>
Наша индексная страница отображает все сообщения в виде потока. Рассматривая код в index.php , мы объясним, как эти данные выбираются и отображаются по одному шагу за раз:
Сначала мы извлекаем все сообщения из базы данных и сортируем их по убыванию _id, чтобы сначала получить последние добавленные сообщения.
$posts_cursor=$collection->find()->sort(array('_id'=>-1));
Теперь мы перебираем все извлеченные сообщения, используя foreach, и получаем идентификатор сообщения, текст сообщения и идентификатор пользователя автора сообщения:
foreach($posts_cursor as $post) { $post_id=$post['_id']; $post_text=$post['post_text']; $post_author_id=$post['post_author_id']; …
Используя идентификатор пользователя, теперь мы можем получить имя пользователя и ссылку на изображение профиля из коллекции пользователей .
$collection = $database->selectCollection('users'); $post_author_details = $collection->findOne(array('_id' =>$post_author_id)); $post_author = $post_author_details['name']; $post_author_profile_pic = $post_author_details['profile_pic'];
Поймите, что на нашей странице будет отображаться много сообщений вместе. Каждый пост будет иметь кнопку «Мне нравится», например, счетчик комментариев и комментариев. Нам необходимо однозначно идентифицировать каждую из этих вещей для каждого отдельного сообщения, чтобы, когда пользователь выполняет какую-либо операцию с любым сообщением (нравится, комментирует), мы знали, какое сообщение нужно обновить. Для этого мы инициализируем некоторые переменные, которые позже будем использовать в качестве идентификатора соответствующих элементов HTML:
$post_like_unlike_id=$post_id.'_like_unlike'; $post_like_count_id=$post_id.'_like_count'; $post_comment_count_id = $post_id.'_comment_count'; $post_self_comment_id=$post_id.'_self_comment'; $post_comment_text_box_id=$post_id.'_comment_text_box';
Теперь мы проверяем, понравился ли текущему пользователю пост или нет. Для этого мы проверяем, присутствует ли идентификатор текущего пользователя в массиве likes_user_ids, полученном из базы данных. Если пользователю уже понравился пост, мы устанавливаем переменную $ like_or_unlike для отображения Unlike . Но если пользователю еще не понравился пост, нам нужно отобразить опцию Like . Мы будем использовать $ like_or_unlike позже в нашем HTML для отображения опции Like или Unlike .
if(in_array($_SESSION['user_id'],$post['likes_user_ids'])) { $like_or_unlike='Unlike'; } else { $like_or_unlike='Like'; } // you can also write this in short ternary form: $like_or_unlike = (in_array($_SESSION['user_id'],$post['likes_user_ids'])) ? 'Unlike' : 'Like';Вif(in_array($_SESSION['user_id'],$post['likes_user_ids'])) { $like_or_unlike='Unlike'; } else { $like_or_unlike='Like'; } // you can also write this in short ternary form: $like_or_unlike = (in_array($_SESSION['user_id'],$post['likes_user_ids'])) ? 'Unlike' : 'Like';
Теперь мы будем использовать переменные, инициализированные выше, и создадим структуру HTML для отображения сообщения. Каждый div post_wrap будет отображать один пост, а id этого post_wrap будет идентификатором поста, полученным из базы данных.
<div class="post_wrap" id="<?php echo $post['_id'];?>"> <div class="post_wrap_author_profile_picture"> <img src="images/<?php echo $post_author_profile_pic;?>" /> </div> <div class="post_details"> <div class="post_author"> <?php echo $post_author ?> </div> <div class="post_text"> <?php echo $post_text; ?> </div> </div>
Теперь давайте покажем количество лайков и комментариев. Обратите внимание, что мы инициализировали некоторые переменные в предыдущих шагах. Эти переменные будут использоваться здесь. $like_or_unlike отображает текст Like или Unlike, заданный ранее, в то время как $post_like_count_id и $post_comment_count_id используются для $post_comment_count_id идентификаторов диапазонов, отображающих количество лайков и комментариев.
Вы поймете, как использовать эти идентификаторы в следующей статье, где нам нужно будет получать данные и обновлять их для каждого отдельного поста.
<div class="comments_wrap"> <span> <span><img src="images/like.png" /></span> <span class="post_feedback_like_unlike" id="<?php echo $post_like_unlike_id;?>"><?php echo $like_or_unlike; ?></span> <span class="post_feedback_count" id="<?php echo $post_like_count_id; ?>"><?php echo $post_like_count;?></span> </span> <span> <span class="post_feedback_comment"> <img src="images/comment.png" /> Comment</span> <span class="post_feedback_count" id="<?php echo $post_comment_count_id; ?>"><?php echo $post_comment_count;?></span> </span> </div>
Приведенный выше код будет выглядеть примерно так (рис. 3):
Теперь, чтобы показать комментарии, относящиеся к каждому сообщению, мы перебираем массив комментариев, извлеченный из базы данных, и инициализируем переменные, которые будут использоваться в HTML. Для каждого комментария мы выполняем запрос на поиск в коллекции пользователей, чтобы получить имя автора комментария и ссылку на изображение профиля.
for($i=0;$i<$post_comment_count;$i++) { $comment_id=$post['comments'][$i]['comment_id']; $comment_text=$post['comments'][$i]['comment_text']; $comment_author_id=$post['comments'][$i]['comment_user_id']; $collection = $database->selectCollection('users'); $comment_author_details = $collection->findOne( array('_id' => new MongoId($comment_author_id)) ); $comment_author = $comment_author_details['name']; $comment_author_profile_pic = $comment_author_details['profile_pic'];текстfor($i=0;$i<$post_comment_count;$i++) { $comment_id=$post['comments'][$i]['comment_id']; $comment_text=$post['comments'][$i]['comment_text']; $comment_author_id=$post['comments'][$i]['comment_user_id']; $collection = $database->selectCollection('users'); $comment_author_details = $collection->findOne( array('_id' => new MongoId($comment_author_id)) ); $comment_author = $comment_author_details['name']; $comment_author_profile_pic = $comment_author_details['profile_pic'];текстfor($i=0;$i<$post_comment_count;$i++) { $comment_id=$post['comments'][$i]['comment_id']; $comment_text=$post['comments'][$i]['comment_text']; $comment_author_id=$post['comments'][$i]['comment_user_id']; $collection = $database->selectCollection('users'); $comment_author_details = $collection->findOne( array('_id' => new MongoId($comment_author_id)) ); $comment_author = $comment_author_details['name']; $comment_author_profile_pic = $comment_author_details['profile_pic'];
Ниже приведен HTML-код для отображения отдельного комментария с использованием переменных, инициализированных выше: (Вывод: рисунок 4 )
<div class="comment" id="<?php echo $comment_id; ?>"> <div class="comment_author_profile_picture"> <img src="images/<?php echo $comment_author_profile_pic; ?>"/> </div> <div class="comment_details"> <div class="comment_author" > <?php echo $comment_author; ?> </div> <div class="comment_text" > <?php echo $comment_text; ?> </div> </div> </div>
После отображения всех комментариев, извлеченных из базы данных, мы хотим показать пустое поле для комментариев, в котором текущий пользователь может комментировать.
<div class="comment" id="<?php echo $post_self_comment_id; ?>"> <div class="comment_author_profile_picture"> <img src="images/<?php echo $_SESSION['user_profile_pic']; ?>" /> </div> <div class="comment_text"> <textarea placeholder="Write a comment..." id="<?php echo $post_comment_text_box_id;?>" > </textarea> </div> </div>
Структура потока приложения:
Давайте теперь поймем, как будет работать поток приложения, на примере вставки нового сообщения. Не беспокойтесь о части кода, пока мы увидим это в следующей статье.
-
Первый файл PHP (
index.php) является главной страницей, откуда пользователь вводит текст сообщения и нажимает кнопку « Создать новое сообщение» . Для простоты мы поместим функцию JavaScriptnew_postв качестве обработчика нажатия этой кнопки и передадимpost_textиuser_idкачестве ее параметров. -
Функция JavaScript получит эти параметры и отправит запрос AJAX POST в файл PHP (
insert_new_post.php), передавая те же параметры, что и полученные. -
Этот файл PHP выполняет вставку полученного текста сообщения в базу данных. После выполнения операции с базой данных она подготавливает содержимое HTML, содержащее
сообщение, которое будет отправлено как вывод функции JavaScript. Этот вывод будет позже представлен на главной странице. В действительности, функция PHP должна возвращать JSON, чтобы уменьшить пропускную способность, а файл представления должен просто включать данные в подготовленный шаблон, но, поскольку наше приложение является просто демонстрацией, это подойдет. -
Функция JavaScript получает выходные данные, отправленные файлом PHP, и вставляет их в основную страницу HTML.
Последовательность действий для всех других операций (таких как комментирование, симпатия / неприязнь к публикации) будет аналогична той, что мы только что видели на примере вставки записи.
Вывод:
В этой статье мы объяснили архитектуру базы данных, дизайн постпотока и поток приложения. В следующей части этой серии мы собираемся использовать эти структуры и развивать нашу функциональность вставки постов, таких как / в отличие от и комментирования.