Цели

  • Ознакомиться с HTML, CSS, PHP и SQL.
  • Научить себя изучать новые языки программирования.

Дополнительные материалы

Если владеете английским на элементарном уровне:

На русском:

Начинаем

Подготовка для CS50 IDE

Если вы пользуетесь «Виртуальной лабораторией CS50», можете просто проскроллить этот параграф =).

Начинаем, как всегда с простого действия. Загружаем CS50 IDE и выполняем команду обновления: 

update50

и еще одну команду:

sudo apt-get install -y php5-xdebug

Как и в шестом практическом задании (том, которое было на прошлой неделе), сначала загрузим уже готовый исходный код, который нужен вам для работы, а также базу данных MySQL. 

wget http://cdn.cs50.net/2015/fall/psets/7/pset7/pset7.zip
wget http://cdn.cs50.net/2015/fall/psets/7/pset7/pset7.sql

Если выполните команду ls, то должны увидеть в корневой папке файл pset7.zip, а также pset7.sql. Распакуйте первый из них, выполнив следующее:

unzip pset7.zip

Если вы еще разок наберёте команду ls, то заметите, что появился каталог под названием pset7.

Теперь можем удалить ZIP файл:

rm -f pset7.zip

если выполните

cd pset7

а затем

ls

то обнаружите, что pset7 содержит файл конфигураций config.json и каталоги includes/, public/, vendor/ и views/. Но о них немного позднее.

Теперь убедитесь, в общедоступности ~/workspace/pset7/public, выполнив команду: 

chmod a+x ~/workspace/pset7/public

Так что веб-сервер CS50 IDE и «Лаборатории» (Apache) и вы сможете получить доступ к вашей работе.

Перейдите в директорию public: 

cd ~/workspace/pset7/public

С помощью команды ls вы увидите, что public содержит четыре подкаталога и три файла. Убедитесь, что их может выполнять кто угодно с помощью команды: 

chmod a+x css fonts img js

Наконец убедитесь, что файлы в этой директории доступны для чтения каждому:

chmod a+r css/* fonts/* img/* js/*

Если вы не в курсе, звездочка * — это «символ подстановки». Так, например, css / *, означает «ВСЕ файлы в каталоге css» .
Из соображений безопасности не делайте каталоги ~/workspace/pset7/includes и ~/workspace/pset7/views общедоступными для выполнения (и их контент видимым для чтения).

Теперь сконфигурируем веб-сервер CS50 IDE (известный как Apache), чтобы использовать ~/workspace/pset7/public в качестве корневого каталога. В первую очередь убедитесь, что сервер прошлой задачи (pset6) в настоящий момент не запущен (например, в другой вкладке), выполнив следующую «убийственную» команду:

killall -9 server

А теперь (чтобы Apache точно не был запущен где-нибудь ещё) выполните: 

apache50 stop

Сейчас перезапустите Apache, используя ~/workspace/pset7/public в качестве корневика:

apache50 start ~/workspace/pset7/public

И запустите сервер баз данных

mysql50 start

Теперь открываем pset7/config.json — конфигурационный файл в формате JSON (Java Script Object Notation), что, по сути, означает коллекцию пар ключ-значение.

Подготовка к практическому заданию. Настройка - 1

В наши дни JSON — популярный формат для файлов конфигурации, поскольку библиотеки, которые могут считывать (то есть, анализировать), существуют для множества языков, в том числе и для PHP. Внешние фигурные скобки (в верхней и нижней частях файла) означают, что файл содержит объект, внутри которого находится один ключ (база данных), и его значение — другой объект (тот, что во внутренних фигурных скобках). Этот внутренний объект имеет четыре ключа (хост, имя, пароль и имя пользователя), каждое из которых имеет строковое значение, два из них — TODO! Эти значения будут использоваться библиотекой PHP CS50 (её можно найти в pset7/vendor) для подключения к базе данных вашего рабочего места MySQL.

Библиотека PHP CS50 содержит функцию query которая позволит вам отправлять запросы к этой базе данных.

Подготовка для «виртуальной лаборатории CS50»

Если вы пользуетесь CS50 IDE, можете переходить к следующей лекции =).

Загрузите «Виртуальную лабораторию CS50», откройте окно терминала и выполните команду обновления:

update50

Как и в шестом практическом задании, здесь мы будем иметь дело с исходным кодом, который надо загрузить перед началом работы.

Перейдите в каталог vhosts:

cd ~ / vhosts

далее выполните:

wget http://cdn.cs50.net/2015/fall/psets/7/pset7/pset7.zip

чтобы загрузить архив дистрибутива практического задания. Можете проверить содержимое vhosts с помощью команды ls. В таком случае вы увидите в этой папке файл pset7.

Разархивируйте его:

unzip pset7.zip

Если снова набрать ls, можно лицезреть каталог под названием pset7.

Теперь можем смело удалять ZIP-файл:

rm -f pset7.zip

Переходим в папку pset7:

cd pset7

pset7 содержит файл конфигураций config.json и каталоги includes/, public/, vendor/ и views/. Но о них немного позднее.

Теперь убедитесь, в общедоступности директорий, выполнив команды:

chmod a+x ~
chmod a+x ~/vhosts
chmod a+x ~/vhosts/pset7
chmod a+x ~/vhosts/pset7/public

Так что веб-сервер «Лаборатории» теперь предоставит вам доступ.

Перейдите в директорию public: 

cd public

С помощью команды ls вы увидите, что public содержит четыре подкаталога и три файла. Убедитесь, что их может выполнять кто угодно с помощью команды: 

chmod a+x css fonts img js

Наконец убедитесь, что файлы в этой директории доступны для чтения каждому:

chmod a+r css/* fonts/* img/* js/*

Если вы не в курсе, звездочка * — это «символ подстановки». Так, например, css / *, означает «ВСЕ файлы в каталоге css» .
Из соображений безопасности не делайте каталоги ~/vhosts/pset7/includes и ~/vhosts/pset7/views общедоступными для выполнения (и их контент видимым для чтения).

Даже если ваш код для этой задачи находится в ~ / vhosts / pset7, давайте убедимся, что все сохранено на Dropbox, если вы, конечно, устанавливали его в «Виртуальной лаборатории». В терминальном окне выполните:

ln -s ~ / vhosts / pset7 ~ / Dropbox

чтобы создать «ссылку» в вашего каталога ~ / vhosts / pset7 в директории ~ / Dropbox. Теперь Dropbox в курсе, что нужно копировать.

Почему мы разместили pset7 внутри каталога vhosts? «Виртуальная лаборатория CS50» настроена для работы с «виртуальными хостами» (то есть сайтами). То есть если вы зайдете на http: //pset7/ используя Chrome внутри виртуальной лаборатории, лаборатория будет искать эти веб-файлы в ~/vhosts / pset7 /public.

Однако для такой работы нам нужно также «привязать» IP-адрес лаборатории pset7 так, чтобы она «подключалось» к нему через DNS. Для нас лучше будет отредактировать файл hosts в директории etc, чем настраивать DNS сервер, чтобы сделать это. Давайте сделаем это.

В терминальном окне выполните

sudo gedit  /etc /hosts

чтобы запустить gedit от имени «суперюзера» («root») и иметь возможность редактировать файлы, которые доступны только для чтения. Аккуратно добавьте эту строку в конце файла, который будет соединять pset7 с адресом «обратной связи» (который никогда не изменится):

127.0.0.1 pset7

Сохраните файл и выйдите из gedit. Можно насладиться xkcd.