Розробка соціальної мережі.
Технічне завдання.
- На сторінку виводиться декілька свіжих постів.
-
Кожен пост складається з таких елементів:
- автор;
- дата публікації (визначається автоматично);
- зображення (посилання на ресурс в інтернеті);
- коментар;
- кількість лайків. - На лайк можна клацнути, збільшивши чи зменшивши їх загальну кількість.
- Внизу сторінки кнопка "Завантажити ще", при натисканні на кнопку дозавантажувати старіші пости.
- Зручно буде - доскроливши до низу одразу дозавантажувати нові пости.
- Кнопка "Створити пост", при натисненні на яку відкривається форма добавляння нового поста.
Додаткові задачі для самостійного опрацювання і власного портфоліо:
- Періодичне автоматичне оновлення постів.
- Створити модуль авторизації, вхід на сайт під логіном-паролем (пароль має шифруватися в md5).
- Read-only режим для анонімних користувачів, для зареєстрованих - аватарки.
- Активація логіна через e-mail, відновлення забутого пароля.
- Можливість завантаження своїх зображень.
- Можливість створювати пости з відео (з ютуба) та декількома фотографіями (альбом).
- Робота з мітками (хеш-тегами).
- Приватні повідомлення.
- Можливість додавати коментарі до постів.
- Модерація коментарів автором, редагування постів.
- Модерація всієї мережі адміном, блокування користувачів.
- Збереження токенів (щоб користувачеві не приходилося весь час вводити логін-пароль).
Також бажано використовувати препроцесори, зборщики, власні бібліотеки.
Реалізувавши ці задачі ви створите повноцінну соціальну мережу, яка стане окрасою вашого портфоліо, показуючи, що ви вмієте працювати:
- з базою даних;
- з бекенд-скриптами;
- з авторизацією, токенами;
- з розподіленням ролей (анонім, користувач, автор, адмін);
- з e-mail;
- можете побудувати модель, логіку, взаємодію складного проекту.
Кому цікаво реалізувати цей проект - з радістю допоможу підказками та консультаціями на рахунок технологій.
База даних.
У вебі найчастіше використовують реляційні бази даних.
Уявіть таблицю (типу Excel), в якій зберігаються дані. Верхній рядок - заголовки:
| ID | Логін | Пароль | ПІП | Телефон | |
|---|---|---|---|---|---|
| 1 | BigBoy | ******* | Іванов І.І. | bigboy@gmail.com | 068-345-23-12 |
| 2 | Tania_petrova | ***** | Петрова Т.С. | tania88@gmail.com | 099-123-45-67 |
| 3 | limpopo | ******** | Сидоров Г.Н. | gokucoku@gmail.com | 066-777-33-22 |
| 4 | blackman | ******* | Чорний А.П. | anatgreg@gmail.com | 098-875-00-17 |
| 5 | SweetyLidka | ****** | Влатова Л.В. | lidkasweet@gmail.com | 096-666-13-13 |
Таким чином є у нас таблиця з даними користувачів сайту.
Реляційна база даних складається з:
Таблиця - набір зв'язаної інформації у табличному представленні.
Запис - строка таблиці, що описує один об'єкт.
Поле - чарунка таблиці, що містить одну характеристику об'єкта.
Нехай у нас буде інтернет-магазин. Будемо зберігати інформацію про покупки наших користувачів:
| № | Покупець | Товар | Кількість | Сума | Дата |
|---|---|---|---|---|---|
| 1 | limpopo | Масажер | 1 | 80.00 | 2017-02-04 |
| 2 | SweetyLidka | Масажер | 5 | 400.00 | 2017-02-04 |
| 3 | BigBoy | Зубна щітка | 1 | 75.00 | 2017-02-04 |
| 4 | limpopo | Крем | 3 | 270.00 | 2017-02-05 |
| 5 | BigBoy | Мило | 1 | 15.00 | 2017-02-05 |
| 6 | BigBoy | Мочалка | 2 | 640.00 | 2017-02-06 |
| 7 | limpopo | Крем | 3 | 270.00 | 2017-02-08 |
Тепер наша база даних складається з двох таблиць: таблиця користувачів, таблиця покупок.
Для невеликого інтернет-магазина потрібно 10-20 таблиць: користувачі, товари, продажі, надходження, акції, постачальники, зворотній зв'язок і тому подібне.
Уявімо, що користувач поміняє логін. Або буде уточнена назва товару. Потрібно буде зробити зміну логіна в першій таблиці, а також перебрати всі записи другої таблиці та внести виправлення.
Це дуже незручно. До того ж наші таблиці є незалежні одна від одної. Давайте зв'яжемо наші таблиці, додавши ще одну таблицю товару. Для зв'язування використовуються ідентифікатори:
| № | Назва товару | Одиниць на складі | Ціна продажу |
|---|---|---|---|
| 1 | Масажер | 42 | 80.00 |
| 2 | Мило | 666 | 15.00 |
| 3 | Зубна щітка | 34 | 75.00 |
| 4 | Мочалка | 12 | 320.00 |
| 5 | Крем | 140 | 90.00 |
Таблиця користувачів не зміниться. А ось в таблиці покупок два стовбчика видозміняться, замість назв поля будуть містити ідентифікатори - посилання на об'єкти в інших таблицях.
Наведіть мишу на ідентифікатор - вспливе підказка на який саме об'єкт зсилається цей ідентифікатор.
| № | Покупець | Товар | Кількість | Сума | Дата |
|---|---|---|---|---|---|
| 1 | 3 | 1 | 1 | 80.00 | 2017-02-04 |
| 2 | 5 | 1 | 5 | 400.00 | 2017-02-04 |
| 3 | 1 | 3 | 1 | 75.00 | 2017-02-04 |
| 4 | 3 | 5 | 3 | 270.00 | 2017-02-05 |
| 5 | 1 | 2 | 1 | 15.00 | 2017-02-05 |
| 6 | 1 | 4 | 2 | 640.00 | 2017-02-06 |
| 7 | 3 | 5 | 3 | 270.00 | 2017-02-08 |
Тепер при зміні будь-яких даних (логін, назва товару) правку треба зробити тільки в одному полі однієї з таблиць. Окрім того, дані тепер не дублюються.
Завдання.
- Розробіть базу даних для соцмережі.
- Дома спробуйте розробити базу даних для розширеного ТЗ соц-мережі (на декілька таблиць).
Запити до бази даних.
Реалізація бекенд-скриптів на PHP.
На минулому занятті ми познайомилися з отриманням ресурсів (файлів) з сервера.
Використовуючи ajax ми можемо відправити на сервер деякі дані. Сервер їх отримає, обробить, виконає певні дії та поверне результат.
Вся ця процедура схожа на функцію з аргументами (умовний приклад):
// frontend, виконується на ваших ноутбуках, компах, телефонах:
var n = howManyLikesOfPost(7211);
$('#post_7211 .likes').text(n);
// backend, виконується на сервері в дата-центрі:
function howManyLikesOfPost(post_id){
database.open();
var n = database.table('posts').field('likes').record(post_id);
database.close();
return n;
}
Домашнє завдання.
- Зробіть соцмережу по заданому ТЗ.