-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·418 lines (333 loc) · 29.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Начало — PHP с нуля</title>
<link rel="apple-touch-icon" href="./phpbook-favicon-128.png">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" href="./phpbook-favicon-128.png" sizes="128x128">
<link rel="icon" type="image/png" href="./phpbook-favicon-64.png" sizes="64x64">
<link href="./style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="l-content-wrap">
<div class="l-content">
<h1 class="lifted-up">Начало</h1>
<div class="b-teaser">
<p>Привет! Здесь собраны уроки по веб-программированию (разработке сайтов).
Уроки рассчитаны на начинающих, которые, может, и слова «HTML» в жизни
ни разу не слышали. Уроки разбиты на уровни, первый — основы PHP.</p>
<p>Уроки простые, в каждом теория и задачки, которые
нужно решать для ее закрепления. Присоединяйся!</p>
</div>
<p><strong>Требуемые знания:</strong> умение включать компьютер и пользоваться браузером.
Ноутбук/айпад/планшет/смартфон тоже подходят, если в них есть интернет.</p>
<p><strong>Зачем это нужно?</strong> На PHP (после того, как ты дойдешь до определенного уровня)
можно делать сайты и онлайн-игры, вконтакте и фейсбук написаны на нем. </p>
<img src="./i/l0/l0-sensei.jpg" alt="Первый урок" class="o-seamless">
<h2>Немного о PHP</h2>
<p>Что такое <dfn>PHP</dfn>? Язык программирования.</p>
<p>Что такое <dfn>скрипт (программа)</dfn>? Это текст, в котором записана последовательность
команд. Программист пишет скрипт, а интерпретатор PHP читает написанный скрипт и выполняет
записанные в нем команды (собственно потому он и называется интерпретатором). Иногда текст
скрипта называют <dfn>код</dfn>. Что может делать скрипт? Да все, что
угодно. Профит!</p>
<p><strong>Где взять интерпретатор PHP? Надо что-то настраивать и устанавливать?</strong> Нет, пока
мы обойдемся без этого и будем запускать программы с помощью сайта ideone.</p>
<p><strong>Каким образом пишется программа?</strong> Любым, который
нравится программисту. Так как код - это обычный текст, то можно
использовать даже блокнот, однако делать так не стоит. Лучше скачать продвинутый
редактор вроде
<a href="http://notepad-plus-plus.org/" target="_blank">Notepad++ для Windows</a> (бесплатно) или
<a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a> (платно).
Если тебе нужно еще больше возможностей, можно взять
<abbr title="Integrated Development Environment">IDE</abbr> (среду разработки), например
<a href="https://netbeans.org/features/php/" target="_blank">Netbeans PHP</a> (бесплатно) или
<a href="https://www.jetbrains.com/phpstorm/" target=_blank>PHPStorm</a> (платно).
Продвинутые редакторы подсвечивают код разными цветами, поддерживают
автодополнение и содержат много других полезных функций. Для первых уроков
хватит сайта ideone.com, но далее стоит скачать и освоить хотя бы Notepad++.</p>
<div class="b-side-note">
<p>Ideone сломался и не открывается? Используй другие похожие сервисы:
http://phptester.net/ <br>
http://codepad.org/ <br>
http://www.runphponline.com/ <br>
http://sandbox.onlinephpfunctions.com/ <br>
https://phpkiss.com/ <br>
https://repl.it/languages/php <br>
<!-- http://www.writephponline.com/ или -->
http://phpfiddle.org/ (сложный).</p>
</div>
<p>Итак, заходи на сайт <span title="Да, ссылка не кликабельна, не ленись, пиши ручками">
http://ideone.com/</span> .
Там ты можешь набрать свой скрипт, нажать кнопку, и увидеть результат его работы.
То, что ты туда вводишь, отправляется на их сервер, интерпретатор PHP исполняет этот код, а тебе
выводится результат.</p>
<div class="h-php-problem" id="problem-hello-world">
<h2 class="p-name">Первая программа</h2>
<p>Давай не будем откладывать пpактику в долгий ящик, и сделаем задание,
следуя инструкциям на картинке ниже:</p>
<div class="e-description">
<div class="b-problem">
W1. Сделай и запусти свою первую программу на PHP.
Программа должна вывести какой-нибудь текст.
<!-- http://ideone.com/ePWWhW -->
</div>
</div>
<img src="./i/l0/l0-php-w001.png" alt="Пишем код на ideone">
<div class="e-hint">
<p>Если вместо результата ты видишь сообщения об ошибках, проверь свой код — может, ты кавычку не такую
написал или где-то букву пропустил? Сообщения об ошибках выглядят обычно так: </p>
<img src="./i/l0/l0-mistake.png" alt="Сообщение об ошибке">
</div>
</div>
<h2>Разберемся, как работает эта программа</h2>
<p>В первой и последней строках есть код:</p>
<p><code><?php</code> ... <code>?></code>
<p>Это специальные <dfn>маркеры</dfn> (теги), чтобы отметить начало и конец блока PHP-кода. Интерпретатор выполняет лишь команды,
заключенные внутри них. Если ты забудешь маркер <code><?php</code>, то твой код не выполнится, а просто
выведется, как есть. Маркер <code>?></code> в конце скрипта можно не писать — все равно
же конец, но я написал, чтобы ты знал, что он есть.</p>
<p>Далее идет инструкция <code>error_reporting(-1);</code>. Эта команда включает отображение всех
возможных предупреждений (без нее выводятся не все). Поскольку это уроки для начинающих, то, чем строже
проверяется твой код, тем лучше для тебя — ошибки не останутся незамеченными. Пиши эту команду в начало
всех своих скриптов!</p>
<p>Обрати внимание! <strong>После каждой инструкции идет точка с запятой.</strong> Её нельзя пропускать.
Правила PHP разрешают писать инструкции либо подряд, в одну строчку, либо каждую на новой строке.
Если писать все в одну строку, код станет нечитаемым и непонятным, потому пиши каждую инструкцию
на отдельной строке.</p>
<p>Кроме этого, в нашей программе есть еще одна инструкция:</p>
<p><code>echo "Hello out there";</code></p>
<p>Команда echo просто выводит то, что ей передали — в данном случае строку <samp>"Hello out there"</samp>.
Строки в PHP надо заключать в одиночные или двойные кавычки (позже мы узнаем, в чем разница),
чтобы отличать их от команд.
Не перепутай кавычки с какими-то похожими символами, они (и одиночные, и двойные)
расположены на клавише рядом с Enter: </p>
<img src="./i/l0/l0-quotes-key.jpg" alt="Кавычки на клавиатуре">
<h2>Что еще умеет выводить команда echo?</h2>
<p>С ее помощью можно выводить и считать числа, например, так (не забудь
точку с запятой в конце строки):</p>
<p><code>echo (20 + 30) * 5 / 2;</code></p>
<p>Эта команда напечатает число <samp>125</samp> (можешь проверить:
<a href="http://ideone.com/FF7QLs" target="_blank">http://ideone.com/FF7QLs</a>).
В математических выражениях можно использовать скобки <code>()</code>, <dfn>операторы</dfn> <code>+</code>,
<code>-</code>, умножение (обозначается звездочкой <code>*</code>), деление
(обозначается слешем <code>/</code>, не перепутай с обратным слешем «\» или вертикальной чертой «|»).
Дробные числа, например, «три с половиной», в программировании пишутся через
точку (а не через запятую): <code>3.5</code> .</p>
<p>Еще один оператор, который можно использовать в выражениях — это <code>%</code>, и он обозначает не
«процент», а остаток от деления чисел и используется так:</p>
<p><code>echo 15 % 6;</code></p>
<p>Если вдруг ты забыл, что такое остаток от деления: чтобы найти остаток от деления 15 на 6, мы вычитаем
из числа 15 число 6, пока остаток не станет меньше 6. В данном случае, получается ответ <samp>3</samp>.
Оператор <code>%</code> используется в таких случаях:</p>
<ul>
<li>Чтобы найти одну или несколько последних цифр числа, можно взять остаток от деления
на 10, 100, 1000, и т.д: <code>echo 17856 % 100</code> выведет <samp>56</samp>.</li>
<li>Чтобы узнать четное число или нет, можно взять остаток от деления на 2: четные
числа дают 0, а нечетные 1 в остатке.</li>
</ul>
<!-- h2>И что делать при ошибке?</h2>
<p>Попробуй найти ошибку. Если никак-никак не можешь, то просто удали часть
программы и попробуй снова, таким образом ты найдешь строку, в которой
ошибка, и сможешь более внимательно ее изучить. Или сотри все и напиши
заново. Также можно попробовать погуглить текст ошибки.</p -->
<p>Надеюсь, ты понял, как работает <code>echo</code>. Математика закончилась, давай почитаем про
сервера.</p>
<h2>А как PHP используется на сайтах?</h2>
<p>Если кратко: когда пользователь набирает у себя в браузере адрес сайта, например,
http://example.com, браузер отправляет на сервер (на котором работает сайт) специальный HTTP-запрос и
там запускается PHP-скрипт. Скрипт выводит текст на языке HTML, он отправляется в браузер и тот отображает
его в виде красивой странички. Если подробнее — смотри картинку ниже.</p>
<p>Вообще, PHP скрипты можно использовать не только на сервере. Можно, например, скачать и установить
PHP на компьютер и запускать скрипт в командной строке (это такое черное окошко, в котором можно
набирать команды и которое в Windows можно вызвать, набрав Пуск→Выполнить→<kbd>cmd</kbd> . А на маках и linux оно
называется «терминал»).</p>
<!-- p>Есть такие способы.</p>
<ol>
<li>Можно написать скрипт и запустить из <em>командной строки</em>. То есть, делаешь Пуск→Выполнить→cmd ,
набираешь хитрую команду вроде <kbd>c:\php\php.exe d:\myscript.php</kbd> и запускается интерпретатор PHP,
который начинает читать и выполнять то, что записано в скрипте myscript.php. Естественно, предварительно
ты должен скачать и установить сам PHP.</li>
<li>Если у тебя есть доступ к серверу (VPS например), то ты можешь загрузить скрипт туда и запустить
его там. По похожему принципу работает ideone: набранный тобой текст отправляется на
сервер, где и выполняется.</li>
<li><p>Если ты хочешь сделать сайт на основе PHP, то тут все чуть сложнее. Ты покупаешь домен, хостинг
(детали — как-нибудь попозже), настраиваешь их и закачиваешь по SFTP или FTP свои скрипты на него
(если мама пока не дает тебе денег на хостинг, ты можешь найти бесплатный хостинг или установить на
своем компе сервер вроде WAMP или Denver, но тогда твой сайт будешь видеть только ты). </p>
<p>После того, как ты закачал свои скрипты на хостинг (или запустил и настроил Denver), ты набираешь в
браузере адрес веб-сервера. Твой браузер соединяется с сервером, отправляет ему запрос. Веб-сервер,
получив запрос, находит твой скрипт и запускает его. Все, что выведет скрипт, сервер отправляет
назад в браузер, и пользователь таким образом, видит результат работы скрипта.</p>
<p>Скрипт (если он правильно написан) может вернуть пользователю картинку, простой текст,
или специальный текст в <dfn>формате HTML</dfn>, который отобразится в браузере в виде
красивой страницы с картинками.</p>
</li>
</ol>
<h2>Как работают скрипты на сайте</h2 -->
<img src="./i/l0/l0-script-workflow.jpg"
alt="Как работает PHP скрипт на сайте">
<h2>Где прочесть официальный мануал на русском по PHP?</h2>
<p><a href="http://php.net/manual/ru/langref.php" target="_blank">http://php.net/manual/ru/langref.php</a>
<span class="spoiler">без смс и регистрации</span></p>
<p>В этом мануале полное описание правил языка, команд и функций от авторов PHP. Заучивать мануал наизусть,
естественно, не надо, просто надо знать его адрес и в случае каких-то сомнений
прояснять с его помощью непонятные моменты.</p>
<div class="b-next-page">
<span class="m-label">дальше:</span>
<span class="m-link"><a href="./l1/variables.html">Переменные</a> →</span>
</div> <div class="b-epilog">
<p>-----</p>
<p><strong>Куда вводить код? Что надо скачать?</strong> Читай <a href="./">первый урок</a>.</p>
<p><strong>Есть вопросы?</strong> Задай гуглу или автору.</p>
<p><strong>Нравится урок?</strong> Лайкай, репости, приглашай друзей, пости котов и Канако,
шли добра, решай задачи, помогай новичкам! Кнопок для лайка нет, кто хочет зарепостить, всегда может сделать это ручками.</p>
<p><strong>Как связаться с автором?</strong> <span class="spoiler"> Я хочу переодеть его в платье
школьницы и жениться на нем.</span> Ящик codedokode (кот) gmail.com ждет ваших писем. А
<span style="color: #009; text-decoration: underline; cursor: pointer;">вконтактик</span> и
<span style="color: #009; text-decoration: underline; cursor: pointer;">фейсбучек</span> ждут ваших лайков.
Но ответ на банальные вопросы лучше искать в Гугле или на stackoverflow.</p>
<p><strong>Я решил задачку!!!</strong> Молодец, делай следующий урок</p>
<p><strong>Ideone не работает!11</strong> Ну так открой Гугл и найди сайты
вроде https://repl.it/languages/php , http://phptester.net/ ,
http://sandbox.onlinephpfunctions.com/ ,
http://codepad.org/ или http://www.runphponline.com/ . Не ленись.</p>
<p><strong>Почему так много рекламы?</strong> Всю рекламу
на сайте ставит юкоз (бесплатный хостинг же), а не я.</p>
<p>На сайте установлена система Google Analytics (и еще несколько аналогичных систем от юкоза). Данные о твоем IP-адресе, посещаемых страницах,
времени посещения отправляются в Google Corporation, США. Хочу знать, кто и зачем сюда заходит. Поверь,
другие сайты делают точно так же. Все сайты пишут логи.</p>
</div>
</div>
</div>
<div class="l-sidebar">
<ul class="b-main-menu vlist">
<li class='active'>
<span>Начало <ins class="dec-l"></ins><ins class="dec-r"></ins></span>
</li>
<li><ul class="vlist b-menu-l1">
<li>
<a href="./l1/variables.html">Переменные</a>
</li>
<li>
<a href="./l1/conditions.html">Условия и игра в кубики</a>
</li>
<li>
<a href="./l1/loops.html">Циклы и айфон в кредит</a>
</li>
<li>
<a href="./l1/arrays.html">Массивы и рулетка</a>
</li>
<li>
<a href="./l1/strings.html">Строки, хакеры и шифровки</a>
</li>
<li>
<a href="./l1/functions.html">Функции и новый айпад</a>
</li>
<li>
<a href="./l1/regexp.html">Регулярные выражения</a>
</li>
<li>
<a href="./l1/finals.html">Повторим?</a>
</li>
<li>
<a href="./l1/mou-ikkai.html">Бонусные задачки</a>
</li>
<li>
<a href="./l1/pasta.html">Пасты и ООП</a>
</li>
<li>
<a href="./l1/reading-list.html">Учим сами</a>
</li>
</ul></li>
<li class='separated'>
<a href="./tsuzuke.html">Что делать дальше?</a>
</li>
<li>
<a href="./i-am-smart.html">Я у мамы умный</a>
</li>
</ul>
<div class="b-block small-font">
<h2>Что это?</h2>
<p>Это сайт, где собраны простые
уроки по языку программирования
PHP.
Даже если ты никогда
не слышал слова
«программирование» и учишься
на филолога, ты можешь
попробовать их сделать.
</p>
<p>Скачивать и устанавливать тоже
ничего не надо, делать уроки
можно даже с айпада или
ведроида.</p>
</div>
<p style="margin-top: 30px;">
<a href="./ha.html"><img src="./i/ha/ha-haski-mini.jpg"
alt="Хаски" style="border: 1px solid #ccc; vertical-align: bottom;"></a>
</p>
</div>
<script type="text/javascript">
var SCOPE_PAGE_LEVEL = 3;
window._gaq = window._gaq || [];
_gaq.push(['_setAccount', 'UA-34859509-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* outbound link click tracking to check whether anyone uses those links */
(function() {
function startsWith(str, substr) {
return str.substr(0, substr.length) == substr;
}
function addEvent(node, evt, fn) {
if (node.addEventListener) {
node.addEventListener(evt, fn, false);
} else {
node.attachEvent('on' + evt, fn);
}
}
var links = document.getElementsByTagName('a');
var baseUrl = 'http://' + location.host;
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.href != baseUrl && !startsWith(link.href, baseUrl + '/')) {
// Is an external link
addEvent(link, 'mousedown', function(ev) {
window._gaq = window._gaq || [];
var e = ev || window.event;
var link = e.target || e.srcElement;
var text = link.innerText || link.textContent || 'no text';
if (text.length > 20) {
text = text.substr(0, 20) + '…';
}
var linkInfo = link.href + ' (' + text + ')';
window._gaq.push(['_trackEvent', 'flow', 'link', linkInfo]);
});
}
}
})();
/* poor man's error logger */
(function () {
var errorsReported = 0;
var MAX_ERRORS = 5;
window.onerror = function (text, file, line) {
if (errorsReported > MAX_ERRORS) {
return;
}
errorsReported++;
window._gaq = window._gaq || [];
var errorInfo = (text || '(no text)') + ' @ ' + (file || '(no file)') +
', line ' + (line || '(no line)');
window._gaq.push(['_trackEvent', 'error', 'onerror', errorInfo]);
};
})();
</script>
</body>
</html>