Разработка сайта показа картин - Студенческий научный форум

XI Международная студенческая научная конференция Студенческий научный форум - 2019

Разработка сайта показа картин

 Комментарии
Текст работы размещён без изображений и формул.
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF

Задание

Создать сайт, где можно будет выставлять картины на обозрение пользователей.

Добавить:

Галерея нескольких (не менее 6) новых изображений.

Блок новостей.

Встроить на одну из страниц сайта счетчик посещений страницы.

Авторизация.

Регистрация. Отдельно для пользователя и продавца.

Восстановление пароля по секретному коду.

Гостевая книга (страница с сообщениями оставленными пользователями).

Реализовать поиск по названиям картин.

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

Загрузка новых картин для определенного человека.

Реализация

Чтобы функционировали PHP части, сохранял все страницы сайта в формате .php

Главная страница:

На ней присутствует: Новостной блок (сделан в виде слайдера), галерея картин, авторизация, поисковая строка и счетчик посещений, ссылка на загрузку картин для «Создателя».

Новостной блок реализован с помощью JavaScript и тегов <script></script>

<script>

var slider = {

slides:['image/news/news1.png','image/news/news2.png','image/news/news3.png','image/news/news4.png'],

frame:0, // текущий кадр для отбражения - индекс картинки из массива

set: function(image) { // установка нужного фона слайдеру

document.getElementById("scr").style.backgroundImage = "url("+image+")";

},

init: function() { // запуск слайдера с картинкой с нулевым индексом

this.set(this.slides[this.frame]);

},

left: function() { // крутим на один кадр влево

this.frame--;

if(this.frame < 0) this.frame = this.slides.length-1;

this.set(this.slides[this.frame]);

},

right: function() { // крутим на один кадр вправо

this.frame++;

if(this.frame == this.slides.length) this.frame = 0;

this.set(this.slides[this.frame]);

}

};

window.onload = function() { // запускслайдерапослезагрузкидокумента

slider.init();

setInterval(function() { // ставим трёхсекундный интервал для перелистывания картинок

slider.right();

},3000);

};

</script>

Галерея картин была сделана с помощью базы данных MySQL в которой хранились данные о местонахождении файла на сервере, названии, дате создания (которая установилась автоматически)

<?php

$i=0;

$connect_to_db = mysql_connect("", "", "") or die("Could not connect: " . mysql_error());

mysql_select_db("shopconst", $connect_to_db)

or die("Could not select DB: " . mysql_error());

mysql_query("SET NAMES 'cp1251_general_ci'");

mysql_query("SET CHARACTER SET 'cp1251_general_ci'");

// выбираемзначенияизтаблицы

$qr_result = mysql_query("select `puttv` from `tovar` order by `date` desc limit 9" . $db_table_to_show)

or die(mysql_error());

$qr_result2 = mysql_query("select `name` from `tovar` order by `date` desc limit 9" . $db_table_to_show)

or die(mysql_error());

while($Result[0][] = mysql_fetch_array($qr_result));

while($Result[1][] = mysql_fetch_array($qr_result2));

for ($i = 1; $i < count($Result[0]); $i++)

{

if ($i==1)

{

echo '<div class="tables one" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==2)

{

echo '<div class="tables two" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==3)

{

echo '<div class="tables three" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==4)

{

echo '<div class="tables four" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==5)

{

echo '<div class="tables five" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==6)

{

echo '<div class="tables six" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==7)

{

echo '<div class="tables seven" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==8)

{

echo '<div class="tables eight" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

if ($i==9)

{

echo '<div class="tables nine" style=" background: url('. $Result[0][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "><a class="textg a">"'. $Result[1][$i-1][0] .'"</a></div>';

}

}

?>

Авторизация сделана с помощью формы и метода _POST

<form name="log">

<div id="log" > <font color="blue" size="2vw;"> <a href="regu.php">Регистрация?</a><br> <a href="vost.php">Забылипароль?</a></font> </div>

<div id="login">

<input type="text" class="login" name="login" placeholder="Введитевашлогин" required> </input>

<div><img src="image/log.png" width="30px" height="30px" ></div>

</div>

<div id="password">

<input type="password" class="passw" name="passw" placeholder="Введитевашпароль" required> </input>

<div><img src="image/passw.png" width="30px" height="30px" >

</div>

</div>

<div id="buttonlog" align="center" name="send" onclick="log.submit()"; >Войти</div>

<?php

$login = "Не известно";

$password = "Не известно";

if($_POST['send'])

{

$login = htmlspecialchars($_POST['login']);

$password = htmlspecialchars($_POST['passw']);

}

?>

</form>

Поисковая строка (одинакова на всех страницах) реализована с помощью метода action.

<form name="poisci" action="poisc.php" method="post">

<div id="search">

<input type="text" class="serch" name="pois" placeholder="Введитедляпоиска" required> </input>

<img src="image/serch.png" class="serchi" onclick="document.forms['poisci'].submit();" ></img>

</div>

</form>

Который переводит на страницу с поиском. Она получает значение поля поиска с помощью _POST, сверяет полученный результат с базой данных, в которой хранится информация о картинах, и выводит нам результаты.

<?php

$pois = $_POST['pois'];

?>

<?php

$i=0;

$connect_to_db = mysql_connect("", "", "") or die("Could not connect: " . mysql_error());

mysql_select_db("shopconst", $connect_to_db)

or die("Could not select DB: " . mysql_error());

mysql_query("SET NAMES 'cp1251_general_ci'");

mysql_query("SET CHARACTER SET 'cp1251_general_ci'");

$qr_result = mysql_query("select `name` from `tovar` WHERE `name` Like '%".$pois."%' order by `date` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result2 = mysql_query("select `puttv` from `tovar` WHERE `name` Like '%".$pois."%' order by `date` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result4 = mysql_query("select `date` from `tovar` WHERE `name` Like '%".$pois."%' order by `date` desc" . $db_table_to_show)

or die(mysql_error());

while($Result[0][] = mysql_fetch_array($qr_result));

while($Result[1][] = mysql_fetch_array($qr_result2));

while($Result[3][] = mysql_fetch_array($qr_result4));

for ($i = 1; $i < count($Result[0]); $i++)

{

echo '

<div style="width:80%; height:50px;">

<div id="tovari" style=" background: url('. $Result[1][$i-1][0] .') no-repeat; background-size: 100%; background-position: center center; "></div>

<div style="float:left;">

"'. $Result[0][$i-1][0] .'" Дата: '. $Result[3][$i-1][0] .'

</div>

</div>

<br/>

<hr width="85%" style="border: none; background: linear-gradient(to right, rgba(23,80,119,0) 0%,rgba(100,100,119,1) 50%,rgba(23,80,119,0) 100%); height: 2px; while:"/>';

}

mysql_close($connect_to_db);

?>

Счетчик посещений реализован с помощью взаимодействия с файлом, куда записывается число, которое увеличивается на один при посещении страницы и заново записывается в файл.

<div id="schet">

<br/>

<?

$file_name = "chet/count.txt";

if (!file_exists($file_name))

{

$fp=fopen($file_name,"w");

fwrite($fp,"1");

fclose($fp);

}

$fp=fopen($file_name, "r");

$count = fread($fp,15);

fclose($fp);

$count++;

$fp=fopen($file_name,"w");

fwrite($fp,$count);

fclose($fp);

?>

страница была просмотрена<br/> <br/>

<?=$count;?> раз

</div>

При успешной Авторизации под «Создателя» добавляется вкладка на выпадающем меню для перехода к загрузке изображений

<?php

$login=$_GET['login'];

$passw=$_GET['passw'];

if ($login=="kirill"&&$passw=="260198k")

{

echo '<li><a href="imageim.php">пункт 5</a></li>';

}

else

{

echo '<li><a>Недоступно!</a></li>';

}

?>

Регистрация пользователя и продавца

Для реализация регистрации используется таблица «user» в базе данных, которая имеет поля:

User для имени.

Password для пароля.

Dop для секретного кода.

Prav для привилегий (1-пользователь, 2- продавец, 3-модератор, 4-администратор, 10-создатель).

Регистрация пользователя от регистрации продавца отличается лишь prav (которая у продавцов равна 2). Проверки пароля (на длину и повтор пароля) осуществляться до того как создается соединение с базой данных.

<form id="reguser" method=post>

Введителогин<br/>

<input type=text name="name" placeholder="Введителогин" required>

<br/><br/>

Введите пароль<br/>

<input type=text name="pass" placeholder="Введитепароль" required style="width:40%; height: 20px;">

<input type=text name="pass2" placeholder="Повторитепароль" required style="width:40%; height: 20px;" >

<br/>Пароль не должен превышать 50 символов и быть меньше 6 символов.<br/><br/>

Введите секретный код чтобы в будуюшем можно было восстановить пароль!

<input type=text name="dop" placeholder="Секретныйкод" required style="width:80%; height: 20px;" >

<br/>

<input type=submit value=Загрузить name="send" id="zak" style="font-size:150%; background: linear-gradient(to right, rgba(126,176,214,1) 1%,rgba(143,230,234,1) 99%);">

<?php

mysql_query("SET NAMES cp1251");

if($_POST['send'])

{

$l=$_POST["name"];

if ($_POST["pass"] == $_POST["pass2"])

{

if (iconv_strlen($_POST["pass"],'UTF-8')>=6)

{

$p=$_POST["pass"];

$d=$_POST["dop"];

$db = mysql_connect("", "", "");

mysql_select_db("shopconst",$db);

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$sql = "INSERT INTO `user` (`user`,`password`,`dop`,`prav`) VALUES ('".$l."','".$p."','".$d."','1')";

$result = mysql_query($sql);

if ($result)

{echo "<p><b>Регистрация успешна!</b></p>";}

else

{ echo "<p><b>Ошибка! Регистрация не была завершена. <br>Проверьте данные и повторите снова.</b></p>";}

mysql_close($db);

}

else

{echo "<p><b>Пароль слишком маленький.</b></p>";}

}

else

{echo "<p><b>Пароли Не совпадают!!</b></p>";}

}

?>

</form>

Восстановление пароля

Осуществляется с помощью сравнения имени и секретного кода с базой данных, и если они совпадают, выводит пароль пользователя.

<form id="reguser" method=post enctype=multipart/form-data>

Введителогин<br/>

<input type=text name="log" placeholder="Введителогин" required>

<br/><br/>

Введите Секретный код для восстановления пароля<br/>

<input type=text name="dop" placeholder="Введитесекретныйкод." required style="width:40%; height: 20px;">

<br/><br/>

<input type=submit value=Загрузить name="send" id="zak" style="font-size:150%; background: linear-gradient(to right, rgba(126,176,214,1) 1%,rgba(143,230,234,1) 99%);">

<?php

mysql_query("SET NAMES cp1251");

if($_POST['send'])

{

$l=$_POST["log"];

$d=$_POST["dop"];

$db = mysql_connect("", "", "");

mysql_select_db("shopconst",$db);

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$pr = 'SELECT `password` FROM `user` WHERE `user` = "'.$l.'" AND `dop` = "'.$d.'"';

$result = mysql_query($pr);

if ($result)

{

$par[] = mysql_fetch_array($result);

if ($par[0][0]=="")

{echo "<p><b>Ненайденопароля</b></p>";}

else

{echo "<p><b>Вашпароль ".$par[0][0]." Не забывайте его.</b></p>";}

}

else

{ echo "<p><b>Неправильно ввели!</b></p>";}

mysql_close($db);

}

?>

</form>

Гостевая книга

В гостевой книге пользователь может оставить сообщение, после чего оно появляется на странице, вся страница разделена:

Блок отображения сообщений

Блок с добавлением новых сообщений

Все записи хранятся в базе данных с полями

Name –для имени отправляющего.

Text – (не более 200 символов) для текста сообщения.

Data- дата создания сообщения, заполняется автоматически.

Реализация блока сообщений:

<?php

$i=0;

$connect_to_db = mysql_connect("", "", "") or die("Could not connect: " . mysql_error());

mysql_select_db("shopconst", $connect_to_db)

or die("Could not select DB: " . mysql_error());

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$qr_result = mysql_query("select `name` from `bookg` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result2 = mysql_query("select `text` from `bookg` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result4 = mysql_query("select `data` from `bookg` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

while($Result[0][] = mysql_fetch_array($qr_result));

while($Result[1][] = mysql_fetch_array($qr_result2));

while($Result[3][] = mysql_fetch_array($qr_result4));

for ($i = 1; $i < count($Result[0]); $i++)

{

echo '

<div id="zap">

'. $Result[0][$i-1][0] .'

<br/>

'. $Result[3][$i-1][0] .'

<br/>

'. $Result[1][$i-1][0] .'

</div>

<br>

<hr width="85%" style="border: none; background: linear-gradient(to right, rgba(23,80,119,0) 0%,rgba(100,100,119,1) 50%,rgba(23,80,119,0) 100%); height: 2px; while:"/>';

}

mysql_close($connect_to_db);

?>

Реализация блока отправки:

<form id="reguser" method=post>

<br/>

Введите имя в гостевой книге<br/>

<input type=text name="name" placeholder="ВведитеИмя" required> </input>

<br/><br/>

Введите текст в гостевую книгу (не более 200 символов)<br/>

<input type=text name="text" placeholder="Текст " required style="width:100%; height: 20px;"> </input>

<br/><br/>

<input type=submit value=Отправить name="send" id="zak" style="font-size:150%; background: linear-gradient(to right, rgba(126,176,214,1) 1%,rgba(143,230,234,1) 99%); margin: 0px; margin-top:5px; height: 40px; width: 30%"></input>

</form>

<?php

mysql_query("SET NAMES cp1251");

if($_POST['send'])

{

$n=$_POST["name"];

$t=$_POST["text"];

$db = mysql_connect("", "", "");

mysql_select_db("shopconst",$db) or die("Could not select DB: " . mysql_error());

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$sql = "INSERT INTO `bookg` (`name`,`text`) VALUES ('".$n."','".$t."')" or die(mysql_error());

$result = mysql_query($sql);

if ($result)

{ echo '<META HTTP-EQUIV=Refresh Content="0;URL=gostbook.php">';}

else

{ echo "<p><b>Ошибка! Операция не была завершена.</b></p>";}

mysql_close($db);

}

?>

Стол Заказов

Связь с базой данных, в которой содержатся поля:

Namez-Для названия заказа.

Smaltext-Для короткого пояснения к заказу.

Cena-Цена которую предлагает заказчик за работу.

Text-Подробное описание заказа.

Data-Время создание заказа, создается автоматически.

После чего полученные результаты выводится в <div> заказов

<?php

$i=0;

$connect_to_db = mysql_connect("", "", "") or die("Could not connect: " . mysql_error());

mysql_select_db("shopconst", $connect_to_db)

or die("Could not select DB: " . mysql_error());

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$qr_result = mysql_query("select `namez` from `zakaz` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result2 = mysql_query("select `smaltext` from `zakaz` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result3 = mysql_query("select `cena` from `zakaz` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

$qr_result4 = mysql_query("select `data` from `zakaz` order by `data` desc" . $db_table_to_show)

or die(mysql_error());

while($Result[0][] = mysql_fetch_array($qr_result));

while($Result[1][] = mysql_fetch_array($qr_result2));

while($Result[2][] = mysql_fetch_array($qr_result3));

while($Result[3][] = mysql_fetch_array($qr_result4));

for ($i = 1; $i < count($Result[0]); $i++)

{

echo '

<div id="zak">

<div id="name">'. $Result[0][$i-1][0] .'

</div>

<div id="cenadata" align="right">'. $Result[2][$i-1][0] .' Рублей <br> '. $Result[3][$i-1][0] .'</div>

<div id="text">'. $Result[1][$i-1][0] .'</div>

</div>

<br>

<hr width="85%" style="border: none; background: linear-gradient(to right, rgba(23,80,119,0) 0%,rgba(100,100,119,1) 50%,rgba(23,80,119,0) 100%); height: 2px; while:"/>';

}

?>

Добавление нового заказа

Осуществляется с помощью связи с базой данных, проверки логина и пароля из таблицы пользователей, и добавление данных в таблицу заказов.

<form id="reguser" method=post>

Введителогин<br/>

<input type=text name="log" placeholder="Введителогин" required>

<br/><br/>

Введите пароль<br/>

<input type=password name="pass" placeholder="Введитепароль" required style="width:40%; height: 20px;">

<br/><br/>

Введите название заказа<br/>

<input type=text name="namez" placeholder="Названиезаказа" required style="width:40%; height: 20px;">

<br/><br/>

Введите краткое описание заказа (не более 120 символов)<br/>

<input type=text name="smaltext" placeholder="Опишитетовар" required style="width:40%; height: 20px;">

<br/><br/>

Введите подробное описание заказа<br/>

<textarea type=text name="text" style="width:40%; height: 20px; max-height:200px; max-width:100%;"> </textarea>

<br/><br/>

Введите цену на которую вы расчитываете в формате ( x.хx )<br/>

<input type=text pattern="\d+(\.\d{2})?" name="cena" placeholder="Цена" required style="width:40%; height: 20px;">

<br/><br/>

<br/>

<input type=submit value=Заказать name="send" id="zak" style="font-size:150%; background: linear-gradient(to right, rgba(126,176,214,1) 1%,rgba(143,230,234,1) 99%); ">

<?php

mysql_query("SET NAMES cp1251");

if($_POST['send'])

{

$l=$_POST["log"];

$p=$_POST["pass"];

$db = mysql_connect("", "", "");

mysql_select_db("shopconst",$db);

mysql_query("SET NAMES 'utf8'");

mysql_query("SET CHARACTER SET 'utf8'");

$pro = 'SELECT `prav` FROM `user` WHERE `user` = "'.$l.'" AND `password` = "'.$p.'"';

$result2 = mysql_query($pro);

if ($result2)

{

$par[] = mysql_fetch_array($result2);

if ($par[0][0]>0)

{

$n=$_POST["namez"];

$sm=$_POST["smaltext"];

$t=$_POST["text"];

$c=$_POST["cena"];

$sql = "INSERT INTO `zakaz` (`namez`,`smaltext`,`cena`,`text`) VALUES ('".$n."','".$sm."','".$c."','".$t."')";

$result = mysql_query($sql);

if ($result)

{echo "<p><b>Заказ Добавлен</b></p>";}

else

{ echo "<p><b>Ошибка! Операция не была завершена. <br>Проверьте данные и повторите снова.</b></p>";}

}

else

{ echo "<p><b>У вас недостаточно прав!</b></p>";}

}

else

{ echo "<p><b>Ошибка БД!</b></p>";}

mysql_close($db);

}

?>

</form>

Загрузка изображений

Реализовано с помощью подключения к базе данных и копировании файла из клиента на сервер (copy). После успешного копирования выводится информация о файле.

<form style="margin-left:10%; margin-top:30px;" method=post enctype=multipart/form-data>

<input type=text name="name" placeholder="Введитеназвание" required>

<input type=file name=uploadfile>

<input type=submit value=Загрузить name="send">

<?php

mysql_query("SET NAMES cp1251");

if($_POST['send'])

{

// Каталог, в который мы будем принимать файл:

$uploaddir = './tovar/';

$uploadfile = $uploaddir.basename($_FILES['uploadfile']['name']);

// Копируем файл из каталога для временного хранения файлов:

if (copy($_FILES['uploadfile']['tmp_name'], $uploadfile))

{

echo "<h3>Файл успешно загружен на сервер</h3>";

}

else { echo "<h3>Ошибка! Не удалось загрузить файл на сервер!</h3>"; exit; }

$k="tovar/".$_FILES['uploadfile']['name'];

// Выводим информацию о загруженном файле:

echo "<h3>Информация о загруженном на сервер файле: </h3>";

echo "<p><b>Оригинальное имя загруженного файла: ".$_FILES['uploadfile']['name']."</b></p>";

echo "<p><b>Mime-тип загруженного файла: ".$_FILES['uploadfile']['type']."</b></p>";

echo "<p><b>Размер загруженного файла в байтах: ".$_FILES['uploadfile']['size']."</b></p>";

echo "<p><b>Временное имя файла: ".$_FILES['uploadfile']['tmp_name']."</b></p>";

$n=$_POST["name"];

echo "<p><b>ИмяфайлавБД: ".$n."</b></p>";

$db = mysql_connect("localhost", "kirill", "260198k");

mysql_select_db("shopconst",$db);

$sql = "INSERT INTO `tovar` (`name`,`puttv`) VALUES ('".$n."','".$k."')";

$result = mysql_query($sql);

if ($result){

echo "<p><b>Информация занесена в базу данных</b></p>";

}

else

{

echo "<p><b>Информация не занесена в базу данных</b></p>";

}

mysql_close($db);

}

?>

</form>

Вывод

Я сделал сайт демонстрации и заказа картин.

На сайте присутствуют:

Стартовая страница с галереей из недавно опубликованных картин.

Авторизация, регистрация и восстановление пароля.

Поиск по названиям картин.

Стол заказов, в котором представлен список заказанных картин пользователями.

Добавление заказов (только для зарегистрированных пользователей)

Гостевая книга, где пользователи могут оставлять свои сообщения.

Базовая информация о сайте и об авторе.

Загрузка картин создателем.

Список использованной литературы.

ru.wikipedia.org

http://htmlbook.ru

http://php.net

https://www.youtube.com/

Просмотров работы: 3