Создание динамического сайта

Редактировалось: 3 раза — последний 16 сентября 2015
Просмотров: 712
Настроение: предчуственнопредновогоднее...
Играет: что то бормочет радио...
+5
: 5
Доброго всем, господа. Программа Artisteer, помогает создавать шаблоны сайтов для общеизвестных cms, или просто в чистом .html... На начальном этапе, могу с уверенностью (на 85%) сказать, что принцип развития сайта и его будущее наполнение остается "смутно" понятным в большинстве случаев. Я имею в виду количество контента, какие модули будут использованы, да и вообще куда все это "придет"(будет ли это интернет магазин или просто блог...). Предлагаю в полной мере, сразу оговорюсь с небольшими доработками использовать возможности программы по работе с html... .

Сразу стоит отметить, что все манипуляции необходимо проделывать на локальном сервере, так как в дальнейшем нам понадобятся возможности сервера, вернее его предустановленных модулей... Для тестирования, предлагаю создать ПЯТЬ страниц...
Главная
Коллекции
Галерея
Новости
Контакты

1. Естественно создаем шаблон и сохраняем его шаблоном .html.
Не стоит забывать, что не создавать себе проблем, название страниц стоит верстать в латинице, в дальнейшем "внутренние" названия перепишите на русском...
2. Меняем расширение файлов на .php
3. Далее создаем на сервере папки PAGES, а в ней создаем папку BLOCK и начнем "переверстывать" страницы...
Главная страница.html - index.php
Открываем страницу в notepad++ и сверху (перед <!DOCTYPE html>), прописываем следующее...

Код PHP:
  1.  
  2. <?php
  3. if(!isset($_GET['page'])){
  4. $page = 'main';
  5. }
  6. else{
  7. $page = addslashes(strip_tags(trim($_GET['page'])));
  8. }
  9. switch ($page){
  10. case 'main':
  11. $title = 'Александр Пупкин';
  12. $meta_d = 'Алекс Пупкин - сайт о сайте';
  13. $meta_kw = 'сайт,дизайн,перелиновка,web...';
  14. break;
  15. case 'collections':
  16. $title = 'Коллекция сайта';
  17. $meta_d = 'Коллекция разработки';
  18. $meta_kw = 'сайт,дизайн,перелиновка,web...';
  19. break;
  20. case 'gallery':
  21. $title = 'Галерея сайта';
  22. $meta_d = 'Фото и видео сайта';
  23. $meta_kw = 'сайт,дизайн,перелиновка,web...';
  24. break;
  25. case 'news':
  26. $title = 'Новости сайта';
  27. $meta_d = 'Последние записи';
  28. $meta_kw = 'сайт,дизайн,перелиновка,web...';
  29. break;
  30. case 'contacts':
  31. $title = 'Контакты';
  32. $meta_d = 'Контактная информация,обратная связь';
  33. $meta_kw = 'сайт,дизайн,перелиновка,web...';
  34. break;
  35. }
  36. /* ДАЛЕЕ САМА СТРАНИЦА*/
  37. <!DOCTYPE html>
  38. <html lang="ru-RU">
  39. <head>
  40. <meta charset="UTF-8" />
  41. <title><?php echo $title; ?></title>
  42. <meta name="description" content="<?php echo $meta_d; ?>" />
  43. <meta name="keywords" content="<?php echo $meta_kw; ?>" />
  44. <meta name="author" content="pupkin"/>
  45. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  46. <link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
  47. <script type="text/javascript" src="/jquery.js"></script>
  48. <script type="text/javascript" src="/script.js"></script>
  49. </head>
  50. <body>
  51. <div id="main">
  52. <div class="sheet">
  53. <div class="body">
  54. <!--header-->
  55. <div class="header">
  56. </div>
  57. <div class="nav">
  58. <ul class="menu">
  59. <li><a class="" href="http://pupkin.ru">Главная</a></li>
  60. <li><a class="" href="http://pukin.ru/collections">Коллекции</a></li>
  61. <li><a class="" href="http://pukin.ru/gallery">Галерея</a></li>
  62. <li><a class="" href="http://pukin.ru/news">Новости</a></li>
  63. <li><a class="" href="http://pukin.ru/contacts">Контакты</a></li>
  64. </ul>
  65. </div>
  66. <!--/header-->
  67. <div class="layout-wrapper">
  68. <div class="content-layout">
  69. <div class="content-layout-row">
  70. <div class="layout-cell content">
  71. <div class="post">
  72. <div class="post-body">
  73. <div class="post-article">
  74. <div class="content-layout">
  75. <div class="content-layout-row">
  76. <div class="layout-cell layout-item" >
  77. <!--content-->
  78. <div class="post-inner article">
  79. <h1 class="postheader"><span class="postheadericon">Главная</span></h1>
  80. <div class="postcontent">
  81. КОНТЕНТ СТРАНИЦЫ!!!
  82. </div>
  83. </div>
  84. <!--/content-->
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <!--sidebar-->
  93. <div class="layout-cell sidebar">
  94. <div class="box vmenublock">
  95. <div class="box-body vmenublock-body">
  96. <div class="bar vmenublockheader">
  97. <h3 class="post-t">Страницы</h3>
  98. </div>
  99. <div class="box vmenublockcontent">
  100. <div class="box-body vmenublockcontent-body">
  101. <ul class="vmenu">
  102. <li><a class="" href="http://pupkin.ru">Главная</a></li>
  103. <li><a class="" href="http://pukin.ru/collections">Коллекции</a></li>
  104. <li><a class="" href="http://pukin.ru/gallery">Галерея</a></li>
  105. <li><a class="" href="http://pukin.ru/news">Новости</a></li>
  106. <li><a class="" href="http://pukin.ru/contacts">Контакты</a></li>
  107. </ul>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="box block">
  113. <div class="box-body block-body">
  114. <div class="bar blockheader">
  115. <h3 class="link-t"></h3>
  116. </div>
  117. <div class="blockcontent">
  118. <div class="blockcontent-body">
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="box block">
  124. <div class="box-body block-body">
  125. <div class="bar blockheader">
  126. <h3 class="t"></h3>
  127. </div>
  128. <div class="box blockcontent">
  129. <div class="box-body postcontent-body">
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="box block">
  135. <div class="box-body postkcontent-body">
  136. <div class="bar blockheader">
  137. <h3 class="search-t">Найти на сайте</h3>
  138. </div>
  139. <div class="box blockcontent">
  140. <div class="postcontent">
  141. <form class="search" method="get" name="searchform" action="#">
  142. <input name="s" type="text" value="" />
  143. <input class="search-button" type="submit" value="" /></form>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <!--/sidebar-->
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <!--footer-->
  156. <div class="footer">
  157. <p>Copyright © 2013. Личная страница Александра Пупкина</p>
  158. </div>
  159. <!--/footer-->
  160. </div>
  161. </body>
  162. </html>
  163.  
4. Создаем в папке block необходимые модули: header.php, sidebar.php, footer.php- и соответственно "выдергиваем" из страницы index.php данные модули, подключая попутно их с помощью <?php include ; ?> (<?php include ("pages/block/header.php"); ?>, <?php include ("pages/block/sidebar.php"); ?>, <?php include ("pages/block/footer.php"); ?>, <?php include ('pages/'.$page.'.php'); ?>) В индексной странице, я попутно сделал разделение, для наглядности, поэтому просто переносим содержимое в отделные(одноименные файлы)
5. Так теперь у вас "должен" выглядеть, после монипуляций файл index.php
Код PHP:
  1.  
  2. <!DOCTYPE html>
  3. <html lang="ru-RU">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <title><?php echo $title; ?></title>
  7. <meta name="description" content="<?php echo $meta_d; ?>" />
  8. <meta name="keywords" content="<?php echo $meta_kw; ?>" />
  9. <meta name="author" content="pupkin"/>
  10. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  11. <link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
  12. <script type="text/javascript" src="/jquery.js"></script>
  13. <script type="text/javascript" src="/script.js"></script>
  14. </head>
  15. <body>
  16. <div id="main">
  17. <div class="box sheet">
  18. <div class="sheet-body">
  19. <?php include ("pages/block/header.php"); ?>
  20. <div class="layout-wrapper">
  21. <div class="content-layout">
  22. <div class="content-layout-row">
  23. <div class="layout-cell content">
  24. <div class="box post">
  25. <div class="post-body">
  26. <div class="post-inner article">
  27. <div class="content-layout">
  28. <div class="content-layout-row">
  29. <div class="layout-cell layout-item" ><?php include ('pages/'.$page.'.php'); ?></div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <?php include ("pages/block/sidebar.php"); ?>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <?php include ("pages/block/footer.php"); ?>
  43. </div>
  44. </body>
  45. </html>
  46.  
6. Сохраняем в папке pages наши страницы : main.php, collections.php, gallery.php, news.php, contacts.php - ЭТО контент наших ранее созданных в Artisteer страниц, вернее сам контент ЭТИХ страниц..., то что всегда находится в тегах <div class="post-inner article"> </div>, это динамическая(то что меняется) составляющая наших страниц, то есть контент...
Вот вроде и ВСЕ монипуляции, зато теперь, пока ВЫ НЕ определились КУДА двигаться далее, а новости и инфо в блоках хотелось бы иногда заменять... Чтоб не менять в куче страниц, теперь вам необходимо произвести изменение только в одном выбранном блоке(header,footer,sidebar)... и изменение последует на всех страницах...

Ну и на последок, для того, чтоб создать "человеко-читаемые url название страниц", создаем файл .htaccess и используя модуль сервера "mod rewrite"
Прописываем правила на основе которых сервер будет обрабатывать запросы к страницам:
Код PHP:
  1.  
  2. RewriteEngine On
  3. RewriteRule ^collections(/?)+$ /index.php?page=collections
  4.  
  5. RewriteRule ^gallery(/?)+$ /index.php?page=gallery
  6.  
  7. RewriteRule ^news(/?)+$ /index.php?page=news
  8.  
  9. RewriteRule ^contacts(/?)+$ /index.php?page=contacts
  10.  
Думаю интуитивно понятно, каким образом мы поключаем вывод title и мета-тегов, но вроде и так понятно... Просто происходит динамическа подмена контента, благодаря функции замены...
Код PHP:
  1.  
  2. <title><?php echo $title; ?></title>
  3. <meta name="description" content="<?php echo $meta_d; ?>" />
  4. <meta name="keywords" content="<?php echo $meta_kw; ?>" />
  5.  
После всего вышесделанного, у вас должен получиться, динамический сайт на php без использования баз данных, в дальнейшем, если решите подключить базы данных а в последствии и самостоятельно панель управления сайтом(когда напишите), сложностей у вас не возникнет laugh . А если серьезно, пока решаете каким будет сайт и что ВАМ понадобится , какой движок... Сайт будет отлично и безотказно работать в интернете, а вы соответсвенно с ним, его внешним и внутренним содержанием...
Удачи вам и УЖЕ С Наступающими...!!! drinks
Комментарии (6)
gradus #
: 0
Очень интересная статья . glasses
jamp #
: 0
Хочу попробовать. Есть пара вопросов.
1. Статья написана давно, насколько актуальна для артистир 4.3?
2. Правильно понял на п.3 Что это :
Код PHP:
  1.  
  2. <!--header-->
  3. <div class="header">
  4. </div>
  5. <div class="nav">
  6. <ul class="menu">
  7. <li><a class="" href="http://pupkin.ru">Главная</a></li>
  8. <li><a class="" href="http://pukin.ru/collections">Коллекции</a></li>
  9. <li><a class="" href="http://pukin.ru/gallery">Галерея</a></li>
  10. <li><a class="" href="http://pukin.ru/news">Новости</a></li>
  11. <li><a class="" href="http://pukin.ru/contacts">Контакты</a></li>
  12. </ul>
  13. </div>
  14. <!--/header-->
  15.  
Надо выделать в отдельные блоки в папку block, в п.3 почему то написано BLOCK, то же самое с pages:), что бы было как в п.5? Или все так и задумано?
samson #
: 0
Дан общий принцип который нужно скорректировать под конкретный макет страницы.
1. Статья написана давно, насколько актуальна для артистир 4.3?
Немного нужно скорректировать классы.
2. Правильно понял на п.3 Что это :

правильно то что в инклюдах pages/block/sidebar.php

Кстати можно в sidebar сделать инклюды блоков в нем, тогда можно будет на каких то страницах блоки убирать или добавлять.
jamp #
: 0
Попробую сделать.
artnikov #
: 0
Дайте свою индексную страницу(index.html), я вам разобью на блоки... Так ВАМ будет проще разобраться... Там необходимо еще и настроить файл .ntaccess... glasses А так в принципе актуальность статьи НЕ изменилась, все работает даже на апачи -5.6
jamp #
: 0
Спасибо. Еще не с чем обращаться smile делаю весь макет сайта.
Есть несколько проектов. Увидел статью решил этот сделать для пробы без ЦМС.
Если появятся проблемы обращусь.

Случайное из блогов

artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
samson
Публикую несколько бесплатных онлайн сервисов необходимых в работе, которые помогут мастерам протестировать...
2 - +6