Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог

Попередні уроки:

1. Створюємо власний блог з допомогою Parse.js;

2. Створюємо власний блог з допомогою Parse.js: Працюємо з даними;

3. Створюємо власний блог з допомогою Parse.js: Авторизація користувачів;

Доволі часто у людей виникають проблеми зі створенням динамічних сайтів. З Parse.js кожен, хто володіє основами HTML, CSS і JavaScript може створити динамічний веб-сайт чи веб-додаток. Цей туторіал крок за кроком проведе вас через процес створення системи блогінгу з Parse.js. В кінці цієї серії уроків, ви зможете з легкістю створити власну CMS.

Протягом останніх трьох уроків, ви будували основу системи управління блогом. Ви створили клас Blog і клас User на Parse.com, візуалізували ваші блоги на стороні користувача, та реалізували авторизацію. Від сьогодні, ми будемо створювати різні функції для адмін-панелі, починаючи з "Додати новий блог".

1. Створення і візуалізація AddBlogView

Крок 1: підготовка HTML шаблону

Насамперед, давайте підготуємо HTML-шаблон для цієї сторінки. Знову ж таки, ви можете використовувати вже існуючі елементи Bootstrap, щоб прискорити процес:

<script id="add-tpl" type="text/template">
  <h2>Adding a New Blog</h2>
 
  <form class="form-add" role="form">
    <div class="form-group">
      <label for="title">Title</label>
      <input type="text" name="title" class="form-control" id="title" placeholder="Enter Your Blog Title">
    </div>
    <div class="form-group">
      <label for="content">Content</label>
      <textarea name="content" class="form-control" rows="20"></textarea>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
  </form>
</script>

Додаємо цей код у admin.html.

Зверніть увагу, що ми робимо це у вигляді шаблону, хоча не маємо динамічного значення в цей момент. Ми робимо це тому що:

1. Я б хотів, щоб мій HTML був гарно структурований і все мало свій блок шаблону;

2. В майбутніх сесіях ми збираємося побудувати список категорій, так що на цій сторінці потенційно може бути динамічний контент;

3. Цей шаблон може бути використаний знову, коли ми створюватимемо функцію "Edit", і нам обов'язково потрібно тягнути існуючий контент у EditBlogView.

Крок 2: Створення AddBlogView

Рухаємося далі, заходимо у admin.js і створюємо новий View: AddBlogView. Поки що він буде мінімальним, оскільки ми просто рендеримо шаблон:

var AddBlogView = Parse.View.extend({
    template: Handlebars.compile($('#add-tpl').html()),
    render: function(){
        this.$el.html(this.template());
    }
});

Крок 3: Посилання на AddBlogView

Тепер, коли у нас є AddBlogView, ми хочемо посилатися на нього з адмін-панелі. Йдемо далі і додаємо кнопку на панель WelcomeView:

<script id="welcome-tpl" type="text/template">
  <h2>Welcome, <%=username %>!</h2>
  <button class="add-blog btn btn-lg btn-primary">Add a New Blog</button>
</script>

Потім, потрібно прив'язати подію на натиснення цієї кнопки. Можна зробити щось подібне у admin.js:

$('.add-blog').on('click', function(){
    // function
});

Втім, в цьому немає необхідності, коли ви використовуєте Parse.js. Ви можете просто додати подію в об'єкт View і прив'язати наступну функцію:

WelcomeView = Parse.View.extend({
    template: Handlebars.compile($('#welcome-tpl').html()),
    events: {
        'click .add-blog': 'add'
    },
    add: function(){
        alert('Clicked!');
    },
    ...
}),

Ви можете випробувати її, перш ніж ми рушимо далі:

Тепер ми можемо змінити функцію, щоб представити новий примірник AddBlogView.

add: function(){
    var addBlogView = new AddBlogView();
    addBlogView.render();
    $('.main-container').html(addBlogView.el);
}

Круто!

Запис в БД

Тепер все, що вам потрібно, це прив'язати функцію для кнопки, що відповідатиме за відправку на цій сторінці і записати блог в базу даних на Parse.com.

Крок 1: Додати подію Submit

Додавання події Submit для вашого AddBlogView не сильно відрізняється від додавання події Click.

AddBlogView = Parse.View.extend({
    template: Handlebars.compile($('#add-tpl').html()),
    events: {
        'submit .form-add': 'submit'
    },
    submit: function(e){
        // submit function goes here.
    }, ...
});

Крок 2: Включення класу Blog

Через те, що ми намагаємося додати запис до таблиці Blog на Parse.com нам необхідно включити клас Blog:

var Blog = Parse.Object.extend('Blog');

Крок 3: Додавання функції create() до класу Blog

Давайте додамо функцію create() до класу Blog, щоб ми могли викликати його з будь-якого View-об'єкта. Вона повинна приймати два параметри, title і content, і зберігати їх в базу даних.

Parse.js робить цей процес доволі простим. Як тільки створюється новий екземпляр класу Blog, ми можемо просто встановити потрібні нам значення і викликати функцію save(), щоб зберегти їх в БД.

var Blog = Parse.Object.extend('Blog', {
    create: function(title, content) {
        this.set({
            'title': title,
            'content': content,
            'author': Parse.User.current()
        }).save(null, {
            success: function(blog) {
                alert('You added a new blog: ' + blog.get('title'));
            },
            error: function(blog, error) {
                console.log(blog);
                console.log(error);
            }
        });
    }
});

Або ви можете просто додати дані в функцію save():

var Blog = Parse.Object.extend('Blog', {
    create: function(title, content) {
        this.save({
            'title': title,
            'content': content,
            'author': Parse.User.current()
        }, {
            success: function(blog) {
                alert('You added a new blog: ' + blog.get('title'));
            },
            error: function(blog, error) {
                console.log(blog);
                console.log(error);
            }
        });
    }
 
});

Обидва способи працюватимуть.

Зауважте, що потрібно вказати author (ім'я автора) в базі даних за допомогою Parse.User.current(). Ви повинні використовувати цей метод, щоб авторизувати поточного користувача.

Крок 4: Виклик blog.create() з AddBlogView

Тепер, в якості заключного кроку, щоб змусити все працювати, вам потрібно викликати blog.create() з AddBlogView, який ми тільки що створили.

Давайте додамо це у функцію submit():

submit: function(e){
    // Prevent Default Submit Event     
    e.preventDefault();
    // Take the form and put it into a data object
    var data = $(e.target).serializeArray(),
    // Create a new instance of Blog
        blog = new Blog();
    // Call .create()
    blog.create(data[0].value, data[1].value);
}

Спробуйте її в дії!

Якщо ви зайдете у свій кабінет на Parse.com, ви побачите, що все збережено в таблиці Blog.

Вітаю, дані додаються до БД!

Збереження ім'я автора і час посту

Тепер давайте поглянемо на список блогу знову:

Ви помітите, що замість імені користувача, ми показуємо ID користувача. І ми не відображаємо час, коли створюється блог. У нас є значення createdAt і updatedAt в бекенді, але вони не дуже читабельні для користувача.

Якщо ми хочемо це виправити, є два загальних підходи:

• Коли ми читаємо з бази даних, ми отримуємо ім'я користувача з ID та змінюємо формат часу посту.

• Коли ми пишемо в базу даних, ми додаємо ще два поля для зберігання ім'я користувача та часу.

Якщо ми обираємо перший підхід, ми робимо одну і ту ж саму дію знову і знову, і через це використовуємо час відвідувача і ресурси. Тому, ми оберемо другий варіант. Не турбуйтеся про такі речі, як "що робити, якщо користувач змінив ім'я?", ми завжди можемо зробити групове оновлення, коли це станеться.

Крок 1: Додавання двох стовпців в таблицю Blog

Ви повинні бути знайомі з цим процесом. Задаємо ім'я і тип цих двох полів наступним чином:

• authorName (String)

• часу (String)

Крок 2: Додавання полів даних у функцію create()

Потім ви повинні змінити функцію create() для запису цих значень:

this.save({
    'title': title,
    'content': content,
    'author': Parse.User.current(),
    'authorName': Parse.User.current().get('username'),
    'time': new Date().toDateString()
},...);

Зверніть увагу, що ми використовуємо функцію todatestring(); ви можете використовувати інші функції, щоб отримати потрібний вам часовий формат.

Крок 3: Оновлення шаблону блогу для використання значень

Нарешті, давайте оновимо #blogs-tpl в index.html, щоб тягнути нові значення:

<script id="blogs-tpl" type="text/x-handlebars-template">
 
{{#each blog}}
<div class="blog-post">
  <h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
  <p class="blog-post-meta">At {{time}} by {{authorName}}</p>
  <div>{{{content}}}</div>
</div>
{{/each}}
 
</script>

Тепер ви можете видалити існуючі пости, і додати щось нове за допомогою сторінки "Додати новий блог".

Всі поля повинні працювати.

Бонус: WYSIWYG редактор

Через те що ми використовуємо {{{content}}} в шаблоні, ми можемо додавати HTML-теги у вміст <textarea> І вони будуть правильно відображатися на стороні користувача. Тим не менше, більшість людей вважають, що це не найзручніший спосіб вести блог.

Розглянемо, як дуже швидко додати простий WYSIWYG редактор.

Крок 1: Завантаження плагіну

По-перше, завантажте плагін.

Він був оновлений, але для навчальних цілей давайте використовувати стару версію.

Крок 2: Посилання на CSS і JS файли

Розпакуйте файли, скопіюйте /dist/bootstrap-wysihtml5-0.0.2.CSS і розмістіть його в папку з CSS. Аналогічно, скопіюйте /dist/bootstrap-wysihtml5-0.0.2.min.js і /lib/js/wysihtml5-0.3.0.min.js в папку з JS.

Додайте посилання на ці файли в admin.html:

<link href="css/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet">
...
<script src="js/wysihtml5-0.3.0.min.js"></script>
<script src="js/bootstrap-wysihtml5-0.0.2.min.js"></script>

Крок 3: Включення Wysihtml5 в JavaScript

Щоб включити wysihtml5, все, що вам потрібно, це викликати wysihtml5() на елементі <textarea>. Давайте додамо його до функції render() в AddBlogView:

render: function(){
    this.$el.html(this.template()).find('textarea').wysihtml5();
}

Потім, замість того, щоб отримати простий текст з функції serializeArray(), ми можемо отримати HTML з val(). Давайте змінимо виклик create():

blog.create(data[0].value, $('textarea').val());

Тут дуже простий код; не соромтеся змінювати його, щоб зробити його більш ефективним, якщо ви хочете. (Використовуйте ім'я класу в якості селектора, зберігайте $('textarea') в якості змінної та ін)

Тепер, якщо ви оновите і протестуєте, все повинно працювати!

(Коментар від редактора: виконання html та js коду будь-яким користувачем є вразливістю(xhr), але так як ця серія уроків розповідає про створення "скелету" блогу, то на даний момент це питання не варте особливої уваги)

Так як це не основна тема уроку, я зупиняюся на цьому. wysihtml5 пропонує багато додаткових можливостей, якщо ви зацікавлені, погляньте на ці репозиторії:

• https://github.com/Voog/wysihtml

• https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

Висновок

У цьому сеансі ми дозволили користувачам додавати новий блог. Ми підготували користувальницький інтерфейс і підключили його до бази даних. Також було додано декілька полів в класі Blog для більшої читабельності. Нарешті, був реалізований простий WYSIWYG плагін.

В наступній сесії, ми закладемо основу для більш функціональної адмін-панелі. Ви познайомитеся з поняттям маршрутизатора, і об'єднаєте index.html та admin.html. Крім того, ми будемо виводити список блогів в адмін-панелі, так щоб користувач міг редагувати і видаляти їх. Слідкуйте за оновленнями.