Что-то многовато всего! Так и есть, но советуем воспринимать это несколько иначе: за вас уже создали некоторую функциональность, и вам не придется реализовывать её самостоятельно! На самом деле реализация, скажем, автозаполнения, тянет на отдельный проект! А нам нужно будет всего-навсего выяснить, как объединить (или «склеить», если хотите) все эти составляющие вместе, чтобы создать собственное (потрясающее веб-приложение.

Начнём! Как всегда, запустите «Виртуальную лабораторию» или CS50 IDE, и выполните команду update50, чтобы убедиться, что рабочая среда обновлена!

Далее, загрузите исходный код этого практического задания по ссылке http://cdn.cs50.net/2015/fall/psets/8/pset8/pset8.zip. Разархивируйте в ~ / vhosts, если работаете в «Виртуальной лаборатории» или в ~/workspace в случае CS50 IDE, после чего удалите pset8.zip.

Для CS50 IDE также скачайте http://cdn.cs50.net/2015/fall/psets/8/pset8/pset8.sql в папку ~/workspace.

Далее выполните команду ls находясь в папке /pset8. Вы увидите там три подкаталога: bin, includes и public. Убедитесь, что разрешения настроены так, как показано ниже:

700:

  • bin
  • bin / import
  • includes
  • vendor

711:

  • public
  • public / css
  • public / fonts
  • public / img
  • public / js

600:

  • includes / *. php
  • public / *. php

644:

  • public / css / *
  • public / fonts / *
  • public / img / *
  • public / index.html
  • public / js / *

(Помните, как это сделать и зачем это нужно?)

Для «Виртуальной лаборатории»

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

ln -s ~/vhosts/pset8 ~/Dropbox

чтобы создать «символьная ссылку» (то есть значок или ярлык) на ваш каталог ~/vhosts/pset8 внутри каталога ~/Dropbox (Dropbox должен «понимать», что нужно делать резервную копию).

Далее, в окне терминала выполните команду:

sudo gedit /etc/hosts

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

127.0.0.1 pset8

Теперь сохраните файл и выйдите из gedit.

Для CS50 IDE

Убедимся, что сервер Apache не запущен где-нибудь ещё, выполнив следующую команду:

apache50 stop

Теперь перезапустим Apache чтобы он использовал в качестве корневой директорию ~/workspace/pset8/public.

apache50 start ~/workspace/pset8/public

И запускаем MySQL:

mysql50 start


Тест

Ну а теперь — тест!

Шаг 1.

«Виртуальная лаборатория»: Откройте Chrome внутри виртуальной среды и зайдите на http://pset8/.
CS50 IDE: откройте в другой вкладке https://ide50-username.cs50.io/, где username — ваш логин.

Вы окажетесь на карте (на которой ничего нет)! Если вместо этого видите Forbidden, с большой вероятностью, вы пропустили предыдущий шаг, поэтому лучше попробовать выполнить все действия chmod еще разок.

Пощёлкайте по карте и перетяните что-нибудь туда или сюда. Или попробуйте найти свой город, используя текстовое поле наверху. Ничего не будет найдено! Действительно, mashup сам по себе ещё ничего не умеет!

Шаг 2.

«Виртуальная лаборатория»: Зайдите на http://pset8/phpmyadmin с помощью Chrome внутри виртуальной лаборатории, чтобы получить доступ к phpMyAdmin. Войдите с именем Джона Гарварда (имя пользователя jharvard, пароль crimson).

CS50 IDE: зайдите на https://ide50-username.cs50.io/phpmyadmin, где username — ваш логин, чтобы получить доступ к phpMyAdmin. Залогиньтесь, если потребуется (напоминаем, вы можете использовать значок ⓘ в верхнем правом углу CS50 IDE чтобы увидеть ваш MySQL Username и ваш пароль MySQL Password). Вы окажетесь на главной странице phpMyAdmin.

Шаг 3.

«Виртуальная лаборатория»:
в отдельной вкладке (опять же, с помощью Chrome внутри виртуальной лаборатории), перейдите по ссылке
http://cdn.cs50.net/2014/fall/psets/8/pset8/pset8.sql?download, чтобы загрузить файл с названием pset8.sql. После завершения загрузки, откройте этот файл в gedit. В конце концов, вы увидите код SQL (т.е. запросы базы данных) в файле pset8.sql. Выделите все, затем выберите Edit > Copy (или нажмите ctrl-c), и вернитесь к phpMyAdmin. Кликните по вкладке SQL в phpMyAdmin и вставьте все, что вы скопировали, в большое текстовое поле этой страницы (под Run SQL query / queries on server «localhost»). Изучите код, чтобы получить представление о тех командах, которые собираетесь выполнить, а затем нажмите Go.

CS50 IDE: откройте pset8.sql, который вы уже загрузили ранее. Вы увидите код SQL. Выделите всё, затем выберите Edit > Copy (или нажмите control-c) и вернитесь в phpMyAdmin. Кликните по вкладке SQL в phpMyAdmin, и вставьте всё, что скопировали, в большое текстовое поле этой страницы (под Run SQL query/queries on server «127.0.0.1»). Изучите вставленный код, чтобы получить представление о тех командах, которые собираетесь выполнить, а затем нажмите Go.

В обоих случаях (CS50 IDE и «Виртуальной лаборатории») вы должны увидеть зелёный баннер, он указывает на успешное выполнение. В верхнем левом углу phpMyAdmin, можно увидеть ссылки на базу данных, которая называется pset8. В ней есть ссылка на таблицу с названием places. (Последняя версия phpMyAdmin имеет несколько багов, поэтому возможно нужно будет перезагрузить страницу). Если щелкнуть на places, то вы увидите (ой!), что эта таблица пуста. Но для облегчения работы мы уже определили ее «схему» (то есть, структуру). На вкладке Structure в phpMyAdmin, чтобы её пересмотреть.

Шаг 4.

Загрузим данные, которые в конечном итоге нужно будет импортировать в эту таблицу. Зайдите на http://download.geonames.org/export/zip/. Там вы увидите несколько ZIP- архивов, «дампов данных» (в формате .txt) с географической базы данных GeoNames, которая «охватывает все страны и содержит более восьми миллионов географических названий, доступных для бесплатной загрузки». Щелкните US.zip, чтобы загрузить дамп почтовых индексов (и не только) Соединенных Штатов Америки. В качестве альтернативы, можете загрузить данные своей страны, однако в этой инструкции мы считаем, что вы загрузили именно данные США. Проверьте http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements, если сомневаетесь, как интерпретировать первые две буквы «базовых имен» в названиях файлов ZIP (это коды стран по стандарту «ISO 3166-1 alpha 2 «).

Далее, распакуйте US.zip, который на выходе должен дать US.txt. Теперь можете удалить US.zip.

Согласно http://download.geonames.org/export/zip/readme.txt, US.txt очень похож на файл CSV, за исключением того, что поля разделены \ t вместо запятой. Для просмотра содержимого файла, откройте его в gedit (или используйте сервисы командной строки head, less и more) или CS50 IDE, только постарайтесь не менять его.