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

Редактировалось: 3 раза — последний 16 сентября 2015
Просмотров: 649
Настроение: предчуственнопредновогоднее...
Играет: что то бормочет радио...
+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 делаю весь макет сайта.
Есть несколько проектов. Увидел статью решил этот сделать для пробы без ЦМС.
Если появятся проблемы обращусь.

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

samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9
samson
Так как многих давно интересовало как сделать суффиксы модулей для Джумла в Artisteer 4.1-4.2 то выкладываю...
7 - +11
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6