HOW-TO: Веб-разработка. Часть 4 Сравнение версий

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия
Предыдущая версия
fullcircle:23:веб-разработка_ч4 [2010/04/17 00:01]
fullcircle:23:веб-разработка_ч4 [2010/04/17 20:29] (текущий)
Строка 1: Строка 1:
-======HOW-TO:​ Веб-разработка. Часть ​======+======HOW-TO:​ Веб-разработка. Часть ​======
  
   - [[..:​20:​веб-разработка_ч1|Веб-разработка. Часть 1]]   - [[..:​20:​веб-разработка_ч1|Веб-разработка. Часть 1]]
Строка 32: Строка 32:
 Для начала выделим CSS в отдельный файл. Это не обязательное,​ но рекомендуемое правило,​ и следовать ему стоит Для начала выделим CSS в отдельный файл. Это не обязательное,​ но рекомендуемое правило,​ и следовать ему стоит
 практически для любой части сайта (CSS, javascript, PHP и всё, что повторяется на сайте несколько раз). практически для любой части сайта (CSS, javascript, PHP и всё, что повторяется на сайте несколько раз).
 +<code css> 
 +*{ 
 +color: #ececec; 
 +font-family:​ '​DejaVu Sans', sans-serif;​ 
 +
 +body{ 
 +background-color:​ #212122; 
 +
 +#footer{ 
 +border-top: 1px solid #ccc; 
 +
 +#footer p{ 
 +font-size: 80%; 
 +text-align: center; 
 +
 +</​code>​
 Создайте новую папку «css» и сохраните в неё этот код под именем «screen.css». Создайте новую папку «css» и сохраните в неё этот код под именем «screen.css».
  
 В файле index.html удалите В файле index.html удалите
 строки:​ строки:​
-<​code><​style type="​text/​css"></​style>​+<​code ​html><​style type="​text/​css"></​style>​
 </​code>​ </​code>​
 и замените их на: и замените их на:
-<​code><​link rel="​stylesheet"​ type="​text/​css"​ href="​css/​screen.css"​ /></​code>​+<​code ​html><​link rel="​stylesheet"​ type="​text/​css"​ href="​css/​screen.css"​ /></​code>​
  
 Вы только что успешно отделили CSS от HTML. Вы только что успешно отделили CSS от HTML.
Строка 55: Строка 70:
 <​code>​ <​code>​
 localhost/ localhost/
-css/ +      ​css/ 
-screen.css +                screen.css 
-inc/ +      inc/ 
-footer.php +                footer.php 
-header.php +                header.php 
-menu.php +                menu.php 
-index.php+      index.php
 </​code>​ </​code>​
  
 Теперь добавьте в самое начала файла «index.php» следующие строки:​ Теперь добавьте в самое начала файла «index.php» следующие строки:​
-<​code>​+<​code ​php>
 <?php <?php
 include ('​inc/​header.php'​);​ include ('​inc/​header.php'​);​
Строка 72: Строка 87:
  
 там, где было меню, вставьте:​ там, где было меню, вставьте:​
-<​code>​+<​code ​php>
 <?php <?php
 include ('​inc/​menu.php'​);​ include ('​inc/​menu.php'​);​
Строка 79: Строка 94:
  
 и этот код в самый конец файла: и этот код в самый конец файла:
-<​code>​+<​code ​php>
  <?​php  <?​php
 include ('​inc/​footer.php'​);​ include ('​inc/​footer.php'​);​
Строка 85: Строка 100:
 </​code>​ </​code>​
  
-Проницательный читатель заметил:​ всё, что мы сделали,​ это просто перенесли заголовок,​+Проницательный читатель заметил:​ всё, что мы сделали,​ это просто перенесли заголовок, ​меню и нижнюю часть страницы в отдельные файлы, так же мы поступили с CSS. А потом включили эти файлы в «index.php». 
 + 
 +Также вы познакомились с первым кодом на PHP и первой функцией (функция include()). При написании кода на PHP очень важно, чтобы:​ 
 + 
 +  - имена файлов заканчивались на .php и 
 +  - код на PHP находился внутри PHP-тегов «<?php ?>». 
 + 
 +Для этих правил существуют исключения (как и для всего остального,​ чего я успел коснуться),​ но этим двум советам стоит следовать для повышения безопасности,​ удобства и согласованности. 
 + 
 +<code php> 
 +<?php 
 +       ​include ('​inc/​header.php'​);​ 
 +?> 
 +<div id="​content">​ 
 +<?php 
 +       ​switch($_GET['​page'​]) 
 +       { 
 +             ​default:​ 
 +             case '​home':​ 
 +                   echo '<​h1>​Мой первый сайт!</​h1><​p>​Привет! Добро пожаловать на мой первый сайт! 
 +                          Не ругайте меня, я только что начал изучать веб-разработку,​ 
 +                          но скоро я сделаю ещё много чего!</​p>';​ 
 +                   ​break;​ 
 +             case '​dogs':​ 
 +                   echo '<​p>​Я люблю собак!</​p>';​ 
 +                   ​break;​ 
 +             case '​cats':​ 
 +                   echo '<​p>​Я люблю кошек!</​p>';​ 
 +                   ​break;​ 
 +             case '​lizards':​ 
 +                   echo '<​p>​Я люблю ящериц!</​p>';​ 
 +                   ​break;​ 
 +       } 
 +?> 
 +<?php 
 +        include ('​inc/​menu.php'​);​ 
 +?> 
 +</​div>​ 
 +<?php 
 +        include ('​inc/​footer.php'​);​ 
 +?> 
 +</​code>​ 
 + 
 +Если вы перейдёте на [[ http://​localhost/​index.php ]], то не заметите никакой разницы между предыдущим файлом «index.html» и «index.php»,​ который мы создали только что. 
 + 
 +===== Конструкция switch языка PHP ===== 
 + 
 +В заключении этого введения в PHP я расскажу о конструкции switch. 
 + 
 +Сначала поместите код с предыдущей страницы в файл «index.php» и удалите всё остальное. 
 + 
 +Конструкция switch использует переменную «page» из строки запроса (всё, что расположено в URL после вопросительного знака (?), считается строкой запроса). 
 + 
 +Правильно сформированная строка запроса выглядит так: http://​example.com?​variable=5. Мы вскоре её используем. 
 + 
 + ​Также обратите внимание на условия,​ которые принимает конструкция switch: «home», «dogs», «cats» и «lizards». То, что написано в условии «default»,​будет выполнено,​ если не подойдёт ни одно другое условие (например,​ http://​localhost/​index.php?​page=birds). Это не самый лучший способ для обработки неверной строки запроса,​ но для начала он подойдёт. 
 + 
 + ​Теперь измените код в файле inc/​menu.php,​ чтобы он выглядел так: 
 +<code html> 
 +<​p>​Menu:</​p>​ 
 +<​ul>​ 
 +<​li><​a href="​index.php?​page=home">​Home</​a></​li>​ 
 +<​li><​a href="​index.php?​page=dogs">​Dogs</​a></​li>​ 
 +<​li><​a href="​index.php?​page=cats">​Cats</​a></​li>​ 
 +<​li><​a href="​index.php?​page=lizards">​Lizards</​a></​li>​ 
 +</​ul>​ 
 +</​code>​ 
 + 
 +Теперь мы можем передавать файлу «index.php» переменную «page» , содержащую «home», «dogs», «cats» или «lizards»,​ в зависимости от нажатой ссылки. Теперь можно свободно переходить между страницами,​ а их содержимое будет меняться. Поэкспериментируйте самостоятельно. Добавьте пятую страницу с названием «birds» и 
 +убедитесь,​ что она работает. Пожалуйста,​ учтите,​ что это очень краткое введение в PHP. При разработке веб-сайтов,​ которые используют include, необходимо учитывать некоторые вопросы безопасности,​ такие как прямой доступ ко включаемым файлам (файлы в нашей папке «inc»). Но этой темы я коснусь следующий раз. 
 + 
 +<note tip>​**Brett Alton** – энтузиаст Ubuntu, технический специалист и разработчик ПО из Торонто,​ Канада</​note>​ 
 + 
 +---- 
 +<style center>​ 
 +  - [[..:​20:​веб-разработка_ч1|Веб-разработка. Часть 1]] 
 +  - [[..:​21:​веб-разработка_ч2|Веб-разработка. Часть 2]] 
 +  - [[..:​22:​веб-разработка_ч3|Веб-разработка. Часть 3]] 
 +  - [[..:​23:​веб-разработка_ч4|Веб-разработка. Часть 4]] 
 + 
 +---- 
 + 
 +//​[[..:​23|К содержанию номера]]//​ 
 + 
 +//​[[:​fullcircle|К архиву журналов]]//​ 
 +</​style>​ 
 + 
 +{{tag>​howto php html css Программирование Full_Circle}}