Головна    Статті    Карта    Зв'язок   

Створення сторінки з коментарями


Листопад 2014 року


Коментарі зберігаються в таблицях бази даних, тому створення такої сторінки має бути, як на мене, добрим завданням для навчання.

Для створення сторінки необхідно:
1. html-форма для внесення коментарів.
2. Javascript, більше для зручності та коректності роботи форми (виключення пустих чи занадто довгтх полів).
3. php-обробник форми коментарів та елементарна перевірка на стороні сервера від коректності введених даних.
4. Виведення інформації на сторінку коментарів з бази даних.

P.S. CSS стилі оформлення сторінки я пропущу :)

1. Форма

Як зразок форми для коментарів може бути форма представлена на рисунку 1. Особливістю цієї форми є те, що при активації кнопки submit виконується javascript-перевірка заповнення форми за допомогою функції chek_form ().

закрити повідомлення

Введіть ім'я!

закрити повідомлення

Повідомлення закоротке!

закрити повідомлення

Повідомлення занадто довге!

Рисунок 1. Зразок форми для коментарів



Зразок html-кодування:

<form method="post" action="обробник форми.php" onsubmit="return chek_form ();">
<fieldset>
<p><label for="name">Ім’я:*</label> 
  <input  type="text" id="comment_author" name="name"></p>
<p><label for="comment">
  Коментар:*</label> <input  type="text" id="comment_author" name="name"></p>
<p><textarea cols="55"  rows="8" id="coment_text" name="comment">
</textarea></p>
<input type="submit" value="Надіслати відгук" id="sbmBtn" name="sbmBtn">
<input type="reset" value="Очистити поля">
</fieldset>
</form>

Рисунок 2. Зразок html-кодування



2. Javascript

Javascript, більше необхідний більше зручності та коректності роботи форми (виключення пустих чи занадто довгих полів).

Якщо відвідувач захоче відправити пусту форму, то на екрані зявиться попереджувальне повідомлення.

Повідомлення може бути такого плану:
- Введіть ім'я!
- Повідомлення закоротке! (два символи в повідомленні)
- Повідомлення занадто довге! (500 символів)




Рисунок 3. Попереджувальне повідомлення.



Для роботи javascript підключим бібліотеку скриптів JQuery.

<script  src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


Зразок javascript-кодування

<script>
 скрипт перевірки форми chek_form()
function chek_form(){
valid = true;
var chek_name = document.getElementById("comment_author").value;
var chek_text = document.getElementById("coment_text").value;
var chek_text_01 =  chek_text.trim();

  if(chek_name.length<=0){
    $("#alert_zone_03").show(1000);
    valid = false;
  };

  if (chek_text_01.length<=2){
    $("#alert_zone_02").show(1000);
    valid = false;
  };

 if (chek_text_01.length>500){
   $("#alert_zone_04").show(1000);
   valid = false;
 };

  return valid;
};
</script>

<script >
$(document).ready(function(){
 закрити  Alert повідомлення
  $("#close_msg_02").click(function(){ $("#alert_zone_02").hide(1000)});
  $("#close_msg_03").click(function(){ $("#alert_zone_03").hide(1000)});
  $("#close_msg_04").click(function(){ $("#alert_zone_04").hide(1000)});
}); 
</script>

Рисунок 4. Зразок javascript-кодування



Декілька слів про роботу яваскрипту; в тілі html-сторінки вставлені області div, що виводять попереджувальне повідомлення з властивостями css (display:none;)- заховані. В випадку, коли поле форми не заповнене яваскрипт робить відповідну область видимою (("#alert_zone_02").show() ;).

Так частина коду html-сторінки попереджувального повідомлення може мати слідуючий вигляд:

<style>
#alert_zone_02 {  
  position: absolute;
  display:none;
  z-index:10
}
</style>         

<div id="alert_zone_02">
<img src="..../close.png"  border="1"  id="close_msg_02">
<h3>Повідомлення закоротке!</h3>
</div>

Рисунок 5. html-кодування попереджувального повідомлення



3. php-обробник форми коментарів та елементарна перевірка на стороні сервера від коректності введених даних.

Зразком php-обробник форми коментарів може бути такий варіант.

<?php
// Приймаєм дані з форми
// Перетворюємо дані в спеціальні символи
$name = htmlspecialchars(stripslashes($_POST['name']));
$comment = htmlspecialchars(stripslashes($_POST['comment']));

// дата для повідомлень
$mydate = date("y-m-d  H:i:s");

// перевірка чи пусті поля
if (empty($name)||empty($comment)){
  header('Location:...warning_page.html');<
  exit;
};

// Зєднуємось з базою даних
$mysqli = new mysqli ("localhost", "user", "password", "database");>

// Вставляємо дані в таблицю
$mysqli->query("INSERT INTO `table_chat`(`My_Date`, `Name`, `Koment`) 
VALUES ('$mydate','$name','$comment')"); 
               
// Повертаємось на сторінку чату
header('Location:....chat.php');
exit;
?>

Рисунок 6. зразок кодування php-обробника сторінки коментарів.



4. Виведення інформації на сторінку коментарів з бази даних

В сторінку коментарів вставляється частина php-кодування, що виконує з'єднання з базою даних, вилучає дані з таблиці коментарів та виводить результат не екран глядача.

<?php

$mysqli = new mysqli ("localhost", "user", "password", "database");

// створюємо обєкт $result 
$result = $mysqli->query("SELECT `My_Date`,`Name`, `Koment` 
			    FROM `table_chat`");

//Виводимо всі рядки повідомлень
for ($row_no = $result->num_rows - 1; $row_no >= 0; $row_no--{

/ / встановлюємо, який рядок буде виводитись
$result->data_seek($row_no);
$row = $result->fetch_assoc();
 echo ' Імя '. $row['Name'].' '.$row['My_Date'].' '.$row['Koment'];
};
?>

Рисунок 7. зразок php-кодування сторінки коментарів


Заключення

- Що ж розглянули в даній статті ми розглянули маленький, простий скриптик для сторінки коментарів, так би мовити основи взаємозв'язків HTML, javascript, PHP, MySQL.

За даною тематикою можна також переглянути статті:

  1. серпень 2015 Реалізація сторінки коментарів. ( Антиспамерний захист)
  2. вересень 2015 Реалізація сторінки зворотнього зв'язку. Премодерація повідомлень