PHP Уроки. Соцсеть. Ответы №1

PHP Уроки. Соцсеть. Ответы

Пока я писал курс по разработке своей соцсети, естественно у читателей появились вопросы.
Я решил, что по мере их появления буду писать ответы на них как отдельные уроки.
В этот раз меня просили рассказать про шаблоны, которые я в своих уроках утоил :)
Я привел только несколько примеров шаблонов, так как я знаю, что по верстке у меня рука корявая, к тому же сам по себе шаблон мало относится к PHP. В нем содержится в основном лиш вывод HTML для пользователя и подстановки <?=$var?> и foreach.
Но поскольку задают вопросы я немного расталкую что-же за шаблоны я написал для своей соцсети.
Как помните шаблоны у нас в директории сайта в /sys/templates.

news.tpl.php

<div class="row">
<?if(!$news){?><h3>Новостей еще нет. Подписывайтесь на новых авторов!</h3><?}?>
<?//var_dump($news);?>
<?foreach($news as $mct_post){?>
<p class="mct-post toppost">
<div class="row">
<div class="col-md-offset-1 col-md-1">
<a href="/blog/<?=$mct_post['user_id']?>">
<?if(file_exists('content/'.$mct_post['user_id'].'/s_ava.jpg')){?>
&qt;img class="img-responsive img-circle" src="/content/<?=$mct_post['user_id']?>/s_ava.jpg" alt="" />
<?}else{?>
&qt;img class="img-responsive img-circle" src="/content/default/s_ava.jpg" alt="" />
<?}?>
</a>
</div>
<div class="col-md-8">
<strong><a href="/blog/<?=$mct_post['user_id']?>">
<?=$mct_post['first_name']?> <?=$mct_post['last_name']?> 
</a>
</strong>
<div class="row toppost">
<div class="col-md-3">
<a href="/post/<?=$mct_post['id']?>">
<?if($mct_post['content_time']){?>
&qt;img class="img-responsive img-thumbnail" src="/content/<?=$mct_post['user_id']?>/s_<?=$mct_post['content_time']?>.jpg" alt="" />
<?}else{?>
&qt;img class="img-responsive img-thumbnail" src="/content/default/s_mediamo.jpg" alt="" /></a>
<?}?>
</a>
</div>

<div class="col-md-9">
<a href="/post/<?=$mct_post['id']?>">
<?=annotationStr($mct_post['text'], 380)?>
</a>
<br />
<small><?=$mct_post['post_time']?></small>
</div>
</div>
</div>
</div>
</p>
<br />
<?}?>
</div>

В контроллере в index.php мы инициализируем переменную $news. Теперь в ней хранится массив записей - новостей.
Эти функции были описаны в уроках ранее. Таким образом в шаблоне нам остается только красиво вывести записи из этого массива.
В первую очередь нам надо убедиться, что в массиве (в переменной $news) действительно то что нам нужно.
Для этого мы используем:

<?var_dump($news);?>

Хотя с таким же успехом можно использовать и print_r, но в нашем случае еще выводятся типы данных, а также в случае ошибки выведется NULL, а не пустой массив.
После того как мы убедились, что в массиве все правильно, используем цикл foreach для вывода и конечно разметку HTML:

По сути весь шаблон news - один большой foreach. Как собственно он и выглядит: список новостей сверху вниз.

mct.tpl.php

mct - это медиацентры, аналог сообществ или групп в других соцсетях.
Сам шаблон mct служит для управления пользовательскими медиацентрами: вход и выход, создание и удаление, редактирование информации о медиацентре.

<h2>mct</h2>
<div id="mct_create_form" class="protected">
<p>Название медиацентра:<br />
<input id="mct_name" placeholder="Название медиацентра" />
</p>
<p>Описание медиацентра:<br />
<textarea id="mct_about" placeholder="Описание медиацентра" rows="5" cols="70"></textarea>
</p>
<input id="mct_create" type="submit" value="Создать" />
</div>
<a id="mct_create_button" href="javascript:toggleAndHide('mct_create_button', '', 'mct_create_form');">Создать медиацентр</a>
<hr />
<p>
Ваши медиацентры:
<?foreach($mcts as $mct){?>
    <div>
        <a href="/media/<?=$mct['id']?>"><?=$mct['mct_name']?></a><br />
        <?=$mct['mct_about']?>
    </div>
<?}?>
<p>
<p>
Медиацентры, в которых вы состоите:<br />
<? //var_dump($ins_mcts); ?>
<?foreach($ins_mcts as $ins_mct){?>
    <div>
        <a href="/media/<?=$ins_mct['id']?>"><?=$ins_mct['mct_name']?></a><br />
        <?=$ins_mct['mct_about']?>
    </div>
<?}?>
</p>
<script src="/assets/js/mct.js"></script>

Этот шаблон достаточно лаконичный, с виду даже кажется не доделанным. Ну здесь собственно все зависит от фантазии дизайнера и верстальщика.
Опять же технология подстановки везде одинаковая в index.php мы инициализируем переменные с помощью функций из cora.php, а в шаблонах в foreach выводим.

media.tpl.php

А это уже непосредственно шаблон, отображающий информацию о конкретном медиацентре.
Как помните в контроллере мы передаем также идентификатор медиацентра, после чего получаем его функцией route() и используем при вызове функций core. Аналогично происходит и при просмотре конкретного блога пользователя.

<div class="row">
<div class="col-md-10">
    <h2><?=$mct_data['mct_name']?></h2>
    <p><?=$mct_data['mct_about']?></p>
</div>
<div class="col-md-offset1 col-md-1">
    <b>Основатель</b>
    <a href="/blog/<?=$admin_id?>">
    <p>&qt;img class="img-responsive img-circle" src="/content/<?=$admin_id?>/s_ava.jpg" alt=""></p>
    <b><?=$admin_data['first_name']?>
    <?=$admin_data['last_name']?></b>
    </a>
</div>
</div>

<?//var_dump($is_ins_mct)?>
<?if($this_id){?>
    <?if(!$is_ins_mct){?>
    <a id="mct_insert" class="btn btn-info" href="javascript:void();">Вступить</a>
    <?}else{?>
    <a id="mct_out" class="btn btn-default" href="javascript:void();">Выйти</a>
    <?}?>
    
    <?if($this_id == $admin_id){?>
        <p><br /><a id="mct-settings-btn" href="javascript:toggle('mct-settings-btn', 'mct-settings');">Настройки</a></p>
        <div id="mct-settings" class="protected">
        <form action="" method="post" onsubmit="return false;">
        <p>Название медиацентра<br/>
        <input id="mct-settings-name" type="text" value="<?=$mct_data['mct_name']?>" />
        </p>
        <p>Описание медиацентра<br/>
        <textarea rows="5" cols="80" id="mct-settings-about"><?=$mct_data['mct_about']?></textarea>
        </p>
        <input id="mct-settings-save" type="button" value="Сохранить" />
        </form>
        </div>
        </div>
    <?}?>
<?}?>
<hr />
<h3>Участники медиацентра</h3>
<div class="row">
<?foreach($mct_users as $mct_user){?>
<div class="col-md-1">
<a href="/blog/<?=$mct_user['user_id']?>">
<?if(file_exists('content/'.$mct_user['user_id'].'/s_ava.jpg')){?>
&qt;img class="img-responsive img-circle" src="/content/<?=$mct_user['user_id']?>/s_ava.jpg" alt="" />
<?}else{?>
&qt;img class="img-responsive img-circle" src="/content/default/s_ava.jpg" alt="" />
<?}?>
<br />
<?=$mct_user['first_name']?> <?=$mct_user['last_name']?></a>
</div>
<?}?>
</div>
<hr />
<h3>Новости и статьи</h3>
<br />
<?//print_r($mct_posts);?>
<?foreach($mct_posts as $mct_post){?>
<p class="mct-post toppost">
<div class="row">
<div class="col-md-offset-1 col-md-1">
<a href="/blog/<?=$mct_post['user_id']?>">
<?if(file_exists('content/'.$mct_post['user_id'].'/s_ava.jpg')){?>
&qt;img class="img-responsive img-circle" src="/content/<?=$mct_post['user_id']?>/s_ava.jpg" alt="" />
<?}else{?>
&qt;img class="img-responsive img-circle" src="/content/default/s_ava.jpg" alt="" />
<?}?>
</a>
</div>
<div class="col-md-8">
<a href="/blog/<?=$mct_post['user_id']?>">
<?=$mct_post['first_name']?> <?=$mct_post['last_name']?> 
</a>
<div class="row toppost">
<div class="col-md-3">
<a href="/post/<?=$mct_post['id']?>">
<?if($mct_post['content_time']){?>
&qt;img class="img-responsive img-thumbnail" src="/content/<?=$mct_post['user_id']?>/s_<?=$mct_post['content_time']?>.jpg" alt="" />
<?}else{?>
&qt;img class="img-responsive img-thumbnail" src="/content/default/s_mediamo.jpg" alt="" /></a>
<?}?>
</a>
</div>
<div class="col-md-9">
<a href="/post/<?=$mct_post['id']?>">
<?=annotationStr($mct_post['text'], 380)?>
</a>
<br />
<small><?=$mct_post['post_time']?></small>
</div>
</div>
</div>
</div>
</p>
<br />
<?}?>
<script>
var mct_id = '<?echo route(2);?>';
</script>
<script src="/assets/js/mct.js"></script>

У каждого медиацентра есть создатель. В начале шаблона мы выводим название медиацентра, а также информацию о его создателе.
Затем мы выводим меню для редактирования информации о медиацентре, но не всем, а только его создателю.
Для этого выполняем проверку if($this_id == $admin_id){:

<?if($this_id == $admin_id){?>
        <p><br /><a id="mct-settings-btn" href="javascript:toggle('mct-settings-btn', 'mct-settings');">Настройки</a></p>
        <div id="mct-settings" class="protected">
        <form action="" method="post" onsubmit="return false;">
        <p>Название медиацентра<br/>
        <input id="mct-settings-name" type="text" value="<?=$mct_data['mct_name']?>" />
        </p>
        <p>Описание медиацентра<br/>
        <textarea rows="5" cols="80" id="mct-settings-about"><?=$mct_data['mct_about']?></textarea>
        </p>
        <input id="mct-settings-save" type="button" value="Сохранить" />
        </form>
        </div>
        </div>
    <?}?>

А после собственно тем же foreach-ем выводим список участников и естественно постов медиацентра.

PHP Уроки. Соцсеть. Ответы №1