Поточний час:
Сьогодні 22 липня, неділя 2018 рік
Zura-Blog 3 роки 7 місяців 3 дня

Ваш ip адрес:54.225.32.164

Доброї ночі!
Ви обновили сторінку в 4 : 12
Статистика

Кількість публікацій на блозі: 376
Кількість коментарів на блозі: 107
Кількість категорій на блозі: 18
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog miniaturaПривіт всім відвідувачам Zura – Blog, сьогоднішня публікація також буде стосуватись мови програмування  РНР,  мову яку в більшості випадків використовують при створення скриптів, для різних видів форм відправки.

Це скрипти  для контактних форм, а також і для форм реєстрації на сайті, і для створення чатів застосовують.

Мова яка постійно удосконалюється, на ній написані самі популярні системи управління контентом, wordpress, jomla, drupal, і на найближчий час саме РНР, можливо буде домінувати в веб програмуванні. В цілому характеризуючи мову програмування РНР, це мова яка розроблена для написання веб додатків, сценаріїв, які виконуються на стороні веб сервера.

JavaScript, слід згадати і про неї, це ще одна мова веб програмування, можна жартуючи сказати “дихає РНР в спину”, також застосовується для написання сценаріїв, правда код JavaScript на відміну від коду РНР, виконується на  стороні клієнта, або точніше сказати в вашому браузері.

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

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

Розпочну з такого питання, як зробити такі картинки, звісно що в багатьох з вас зразу найдеться така відповідь, “фотошоп”, або якийсь з графчних, чи фоторедакторів. ACD See Pro  рекомендую  цю програму, і додам що крім графічних і фоторедакторів, можна робити мініатюри і за допомогою РНР – скрипта.

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

Як все буде працювати, після того як ви додасте скрипт, перейдете на сторінку, на сторінці форма, де клацнувши на кнопку відкриється вкладка в якій ви повинні додати вибрану картину з вашого жорсткого диска, після чого клацнувши на кнопку “завантажити” сторінка перезапустится,  і вверху зліва появиться мініатюра, а знизу напис “Картинка успішно створена”.

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

Ну а на рахунок користувачів вашого сайту, то тут один недолік, адже картинки як і реального розміру, які завантажуться, так і  зроблена скриптом мініатюра будуть знаходитись  в папках на вашому сайті, після роботи скрипта.  І якщо бажаючих буде багато, то картинки з часом будуть займати багато місця на сайті. Звісно їх можна потім  видалити з папок, нк або модифікувати цей скрипт, зробивши в скрипті автоматичне видалення файлів з папок, після того як залишаєте сторінку, чи здійснюєте перехід на іншу сторінку.

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

Елемент складається з папки для зображеннь, в цій папці повинно бути ще дві папки, одна для оригінальних зображень, інша для оброблених. Саме в цих двох папках будуть зберігатись графічні файли. Біля папки для зображень,  назву її “іmages”,  як за звичай саме так називають папки, в яких розміщують графічні файли.

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

miniatura1

⇑ краще створити нову папку 

Власне згодом, коли буду описувати практичні заняття, в яких збираюсь викладати процес, як я додавав деякі скрипти до свого тренувального сайту, на Zura – Blog  знаходяться матеріали по практиці, в котрих більш детальніше описано створення, додавання різних елементів в веб дизайні.

Матеріали які присвячені практикуванню, в них описано як на практиці застосовую додавання різних елементів, списки, таблиці, форми, ознайомитись з ними можна навівши курсор миші на “кнопку HTML”, з випадаючого списку появляться назви матеріалів.

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

1 —  Створюємо окрему папку в кореневій (основна) папці вашого сайту. Даємо назву, я назвав папку “script”.

2 — В ПАПЦІ “script”, папка в якій ви будите створювати файли і папки, які будуть потрібні для того щоб скрипт працював. В папці “script” створюємо папку для завантаження і обробки графічних файлів, а також в цій папці будуть розміщуватись три  файли з розширенням РНР.

3 — ПАПКУ для збереження графічних файлів правильніше буде назвати “іmages”, і  ця папка повинна знаходиться в папці “script”, а це означає що в випадку якщо у вас вже на сайті присутня папка з такою назвою, то звісно що вона знаходиться поза папкою “script”, так само як і можливі одинакові назви файлів, похожі назви файлів, також вже можуть бути присутні на вашому сайті.

Одинакові файли з розширенням РНР, але вони  будуть  знаходитсь поза папкою “script”, а це означає що нічого вам в рядках коду РНР міняти не прийдеться.

Я вважаю що такий спосіб легший і правильніший, ніж все “напхати в одну головну папку”, в папці “іmages” створюємо дві нові папки, одну для завантаження і збереження оригінальних фотографій, іншу для  завантаження і збереження оброблених скриптом “мініатюр”.

miniatura2

⇑в папці “іmages” створюємо дві папки

3 — В ПАПЦІ “script”  будуть знаходитись три файли з розширенням РНР, “index.php” сама назва “index” застосовується для назви головної сторінки, оскільки всі файли будуть знаходитсь в папці  “script” то і файл з назвою “index.php” вам переіменовувати, наприклад на “index1.php” не потрібно, і в кодах також нічого міняти не потрібно буде, остальні “process.php” і “config.php”

index.php – пояснення до файлу, поділений на дві частини, верхня це скрипт РНР, в якому “require” приєднює або правильніше сказати, підключає до файлу index.php  два файли “process.php” і “config.php”.

Зверніть увагу, якщо ви все таки будете давати іншу назву файлам, саме на початку коду php, в першому і другому рядку, ви повинні вказати вашу назву, помінявши назву файлів “process.php” і “config.php” на свою.

Розширення файлу звісно що php, і код скрипта повинен знаходитись в верхній частині, інакше працювати не буде, знаєте, згадав зараз як на початку ведення блогу, в коментах мені зробив зауваження один “гуру” в веб програмуванні, “що скрипти варто розміщувати в самому низу сторінки 😀 “, так ось це повна дурня, в більшості випадків саме скрипти рнр, які служать  для відправки і обробки різних форм, щоб працювали, потрібно  розміщувати тільки в самій верхній частині сторінки.

miniatura3

В нижній частині файлу index.php знаходиться форма, яку браузер буде відображатись на сторінці, вверху зліва.  

<form enctype=”multipart/form-data” action=”” method=”post”>
<input type=”file” name=”fupload” />
<input type=”submit” value=”Завантажити” />
</form>

для того щоб форма відображалась не в верху зліва, а саме там де ви захочите на сторінці, тоді потрібно взяти форму в блок “div”, і прописати правила в каскадних таблицях стилей, в файлі з розширенням  “css”, як прописати, матеріали появляться не забаром, буде написано в практичних заняттях

process.php — файл судячи з назви “process” мабуть  догадуєтесь для чого, на початку коду в файлі оператор “require” підключає файл конфігурації “config.php”, якщо для файлу конфігурації ви дали іншу назву, то звісно що поміняйте. 

config.php — назва папок в папці “іmages”, мало не забув, це “full” папка в яку будуть завантажуватись повнорозмірні зображення , і “thumbs” папка в яку будуть завантажуватись мініатюри. В коді це третій і четвертий рядок, якщо у вас інші назви для папок в яких будуть зберігатись графічні файли, то поміняйте.

В першому рядку файлу config.php виставляється розмір мініатюри, саме там де цифра 100, виставіть свій розмір мініатюри, який би ви хотіли отримати.

$final_width_of_image = 100;

Ну і все, далі перевірка як все працює, спочатку на локальному сервері, і якщо задовільно, тоді підєднюємо скрипт до свого сайту.

До речі дуже класна штука, не потрібно тратити час на запуск графічного або фото редактора, розмістили скрипт на сайті або на локальному сервері, відкрили сторінку в браузері, вибрали зображення, завантажили скажем свій фейс, і все готово, якщо потрібні інші розміри, відкрили файл config.php в редакторі, і в коді де перший рядок, замість цифри 100 виставили іншу.

miniatura4

⇑ вибираємо зображення

miniatura5

⇑клацаємо на кнопку

miniatura6

⇑ отримуємо результат

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

user_97


index.php – код

<?php
require 'config.php'; //Підключаемо файл конфігурації
require 'process.php'; //Підключаемо файл-обробки

if(isset($_FILES['fupload'])) {

	if(preg_match('/[.](jpg)|(gif)|(png)$/', // формати зображення для завантаження
	 $_FILES['fupload']['name'])) {

		$filename = $_FILES['fupload']['name'];
		$source = $_FILES['fupload']['tmp_name'];
		$target = $path_to_image_directory . $filename;

		move_uploaded_file($source, $target);

		createThumbnail($filename);
	}
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<meta name="author" content="" />
	<title>Мініатюра з допомогою PHP</title>
    <link href="css/Untitled-2.css" rel="stylesheet"  type="text/css" >
</head>

<body>
	<h1>Завантажте зображення:</h1>
	<form enctype="multipart/form-data" action="" method="post">
		<input type="file" name="fupload" />
		<input type="submit" value="Завантажити" />
	</form>
</body>
</html>

process.php – код

<?

function createThumbnail($filename) {

	require 'config.php'; //Підключаемо файл конфігурації

	if(preg_match('/[.](jpg)$/', $filename)) {
		$im = imagecreatefromjpeg($path_to_image_directory . $filename);
	} else if (preg_match('/[.](gif)$/', $filename)) {
		$im = imagecreatefromgif($path_to_image_directory . $filename);
	} else if (preg_match('/[.](png)$/', $filename)) {
		$im = imagecreatefrompng($path_to_image_directory . $filename);
	} //Визначаємо формат зображення

	$ox = imagesx($im);
	$oy = imagesy($im);

	$nx = $final_width_of_image;
	$ny = floor($oy * ($final_width_of_image / $ox));

	$nm = imagecreatetruecolor($nx, $ny);

	imagecopyresized($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);

	if(!file_exists($path_to_thumbs_directory)) {
	  if(!mkdir($path_to_thumbs_directory)) {
           die("Виникли проблеми! пробуйте ще раз!");
	  }
       }

	imagejpeg($nm, $path_to_thumbs_directory . $filename);
	$tn = '<img src="' . $path_to_thumbs_directory . $filename . '" alt="image" />';
	$tn .= '<br />Вітаю! Ваше зображення успішно завантажено і його мініатюра створена. Ваш результат, який ви можите зберегти:';
	echo $tn;
}//Зжимаемо зображення, якщо помилки, тоді виправте назву зображення на латинські літери
?>

config.php– код

<?
$final_width_of_image = 100; //Размір зображення які ви отримаєте( ШИРИНА  ВИСОТА)
$path_to_image_directory = 'images/full/'; //Папка, куда завантажуються повного розміру зображення
$path_to_thumbs_directory = 'images/thumbs/';//Папка, куда завантажуються мініатюры
?>

Якщо не маєте бажання створювати папку спеціально для даного скрипта, тоді в файлах .php в рядках коду де знаходиться оператор “require”, правильно виставляєте посилання щоб підключити файли, звісно що потрібно мабуть буде поміняти назву файлу index.php, скоріш за все такий файл у вас уже присутній, ну і можливо якщо у вас вже буде папка “images”, то в такому разі вам прийдеться для папки вибрати іншу назву, і в файлах config.php в третій і четвертий рядок поміняти назву папки,  в process.php 15 і 16 рядок також.

Можливо і ще десь, все залежить від того які файли і папки ви будите переіменовувати, хоча вважаю в тому сенсу не має, оскільки скрипти служать тільки для обробки, а ось сама форма,  дизайн форми, міняється   в частині html — коду, в файлі index.php,  html — код починається після закінчення тегу “?>”.

Цей тег означає кінець php – скрипта а   html — код починається  з декларації документа 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>

і закінчується закриваючим тегом </html>

Саме вже в цій частині і виставляємо шлях, де в нас повинна відображатись ця форма, ну і форму звісно що можна прикрасити, взяти в рамку, в рамку вставити зображення, і т.д.

 

Увага, назви графічних файлів повинні бути латинськими !

В принципі все, до зустрічі.

Leave a Reply

Your email address will not be published. Required fields are marked *