Недвижимость 02.05.2024
Всем привет!
Примерно с 2008 года моя мечта была сделать веб портал по недвижимости. Раньше я делал этот портал на ASP NET 2.0, а потом на ASP NET 3.5. Я попытаюсь сделать веб портал по недвижимости на PHP7. Короче погнали!
В ASP NET уже есть готовые компоненты. Начнём с пагинатора. У меня был уже некий опыт, я в начале 2000х гг. помогал сестре создать один проект в Казахстане. Мне сестра в Алматы подарила книгу по PHP, и я занимался пагинатором. Чтобы получить количество страниц, нужно количество записей в БД разделить на количество записей в странице + остаток. Так-же я буду в именах переменных использовать венгерскую нотацию см. https://ru.wikipedia.org/wiki/Венг�%..., где $str_ - для строк, $int_ - для чисел, $arr_ - для массивов, $obj_ - для объектов (ООП). В 2000х гг. я делал так:
$int_pages = $int_records_count / $int_records_per_page; // Получаем количество страниц // Если в количестве записей поделёно на количество записей на странице есть остаток то + 1 страница if($int_records_count % $int_records_per_page > 0) $int_pages++;
Давайте именно так и сделаем:
// Функция генерирует пагинатор, и отображает в браузере
// $str_url - указывается url или имя файла
// int_records_count - количество найденых записей из БД
// $int_records_per_page - количество записей на одной странице
// $int_sel - какая страница выделина
function paginator_show($str_url, $int_records_count, $int_records_per_page, $int_sel) {
$int_pages = $int_records_count / $int_records_per_page; // Получаем количество страниц
// Если в количестве записей поделёно на количество записей на странице есть остаток то + 1 страница
if($int_records_count % $int_records_per_page > 0) $int_pages++;
// Рисуем количество страниц
for($int_i=1; $int_i<$int_pages; $int_i++) {
// Если текущая выделеная страница
if($int_i == $int_sel)
echo '<b>[ ' . $int_i . ' ]</b> '; // То рисуем скобки [ ]
else
echo '<a href=' . $str_url . '?page=' . $int_i . '>' . $int_i . '</a> '; // Иначе добавляем страницу
}
}
Для тестирования:
if(isset($_GET['page']))
$int_select_page = $_GET['page'];
else
$int_select_page = 1;
paginator_show('paginator.php', 100, 10, $int_select_page);
Результат работы нашего кода:
Meine Die Formel der LiebeТеперь давайте займёмся шаблонизатором. В ASP NET 2.0 есть уже готовый шаблонизатор, а в PHP либо его нужно самому программировать, или брать готовую библиотеку, но мы будем сами писать свой шаблонизатор. Вот код:
.\lib\view.php
<?php // Рендерит // $str_filename - имя файла, расширение должно быть именно PHP!
// $arr_values - массив переменных, в которые будут подставляться значения function view_factory($str_filename, $arr_values = NULL) { ob_start(); if(isset($arr_values)) extract($arr_values); include($str_filename); return ob_get_clean(); } ?>
Я уже тестировал эту библиотеку, работает всё хорошо. Потом позже покажу код.
Meine Die Formel der LiebeТеперь давайте создадим код, который будет перемещать загруженые картинки куда нужно:
<?php
if(isset($_POST['expose'])) {
move_uploaded_file($_FILES["uploadfile"]["tmp_name"], "./expose/" . $_POST['expose'] . '/images/' . $_FILES["uploadfile"]["name"]);
}
?>
<form method="POST" action="upload.php" enctype="multipart/form-data">
<input name="expose" type="hidden" value="1"><br>
<input name="uploadfile" type="file"><br><br>
<input type="submit" value="OK"><br>
</form>Я уже протестировал код, код работает как надо.
Meine Die Formel der LiebeТеперь давайте обсудим где и что будет находится.
Сам проект будет находится в папке immo2024:
Подпапки:
css - Тут будут храниться CSS файлы
js - Тут будут храниться JavaScript библиотеки
images - Тут будут храниться картинки для проекта
lib - Тут будут храниться библиотеки написаные на PHP
views - Шаблоны, и вьюшки в формате PHP
expose - HTML-файлы с объявлениями и фотографии
В папке expose будут следующие подпапки
номер объявления - тут будут храниться объявления
В папке номер объявления будут храниться файл index.php или index.html, и папка images, в которых будут храниться фотографии недвижимости.
Создадим файл .htaccess, и запишим следующий код, в случае ненайденого файла, будет показывать кастомную 404 ошибку:
RewriteEngine on ErrorDocument 404 "<!DOCTYPE html><html><head><title>404</title></head><body><center><h1>404</h1><br>Not found!</center></body></html>"
Meine Die Formel der LiebeВсем привет!
Давайте продолжим делать наш сайт. Сейчас займёмся подборкой цветов, лейаутом, веб дизайном и вёрсткой:
1. Вот код index.html:
<!DOCTYPE html>
<html>
<head>
<title>Портал недвижимости</title>
<link type="text/css" rel="stylesheet" href="main.css">
<link type="text/css" rel="stylesheet" href="menu.css">
<link type="text/css" rel="stylesheet" href="componentsui.css">
<link type="text/css" rel="stylesheet" href="panelsui.css">
<link type="text/css" rel="stylesheet" href="image.css">
<script src="image.js"></script>
</head>
<body>
<div id="content">
<div>
<br>
<br>
<br>
<br>
<nav>
<ul id="menu">
<li class="sel"><a href="aa.php">Главная</a></li>
<li><a href="aa.php">О нас</a></li>
</ul>
</nav>
<br>
<div id="search">aa
<input type="text" class="field" disabled value="заблокировано">
<br><br>
<input type="text" class="field" placeholder="AAA">
<br><br>
<select class="cbo">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<select class="cbo">
<option selected value="1">Январь</option>
<option value="2">Февраль</option>
</select>
<select class="cbo">
<option selected value="1">1980</option>
<option value="2">1981</option>
</select>
<br><br>
<input type="checkbox" class="chkbox" placeholder="AAA">
<br><br>
<input type="submit" class="btn" value="OK">
<br><br>
<input type="submit" class="btn" disabled value="Нет!">
<br><br><span class="error">Ошибка!</span>
</div>
<br>
<br>
<div id="login">
<label for="usrname">Имя пользователя:</label><br>
<input class="field" name="usrname" id="usrname" type="text">
<br><br>
<label for="pswd">Пароль:</label><br>
<input class="field" name="pswd" id="pswd" type="text">
<br><br>
<div style="float:right;"><a href="registrate.php" class="lnk">Регистрация</a></div><br>
<div style="float:right;"><a href="recovery.php" class="lnk">Забыл пароль</a></div><br>
<div style="float:right;"><input type="submit" class="btn" value="Вход"></div>
<br>
<br>
</div>
<br>
<br>
<img id="image" class="img" src="DSCI3748.JPG" width="300px" height="auto">
<br>
<img class="thunb thunb_sel" src="DSCI3748_thunb.JPG" onclick="on_click(this, 'image','DSCI3748.JPG', 'thunb', 'thunb thunb_sel');">
<img class="thunb" src="DSCI3749_thunb.JPG" onclick="on_click(this, 'image','DSCI3749.JPG', 'thunb', 'thunb thunb_sel');">
<img class="thunb" src="DSCI3750_thunb.JPG" onclick="on_click(this, 'image','DSCI3750.JPG', 'thunb', 'thunb thunb_sel');">
</div>
<br><br>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Площадь:</td>
<td>120кв.м</td>
</tr>
<tr>
<td>Кол-во комнат:</td>
<td>3</td>
</tr>
</table>
</div>
</body>
</html>
2. Это css:
main.css:
* { padding:0; margin:0; }
body { background-color:#EBD234; color:#333; }
#content { margin-left:auto; margin-right:auto; margin-top:0px; width:70%; min-height:1024px; background-color:#FFF; box-shadow:0px 0px 7px #999; }
.lnk { color:#000; text-decoration:none; }
.lnk:hover { color:#000; text-decoration:underline; }
.lnk:visited { color:#000; text-decoration:none; }
menu.css:
nav { padding:0; margin:0; background-color:#000; color:#FFF;}
#menu { list-style-type:none; margin:0; padding:0; overflow:hidden; }
#menu li { float:left; }
#menu .sel { background-color:#333; color:#FFF; text-shadow:0px 0px 7px #FFF; font-weight:bold; }
#menu li a { font-size:20px; display:block; text-align:center; padding:20px; text-decoration:none; color:#FFF; }
panelsui.css:
#login { box-shadow:0px 0px 7px #999; margin-left:auto; margin-right:auto; width:180px; min-height:120px; border-radius:5px; padding:15px 15px; }
#search { box-shadow:0px 0px 7px #999; margin-left:auto; margin-right:auto; width:400px; min-height:150px; border-radius:5px; padding:5px 5px; }
image.css:
.img { box-shadow:0px 0px 3px #EEE; padding:5px 5px; border:1px solid #EEE; }
.thunb { width:70px; height:auto; padding:5px 5px; border:1px solid #EEE; }
.thunb_sel { border:1px solid #000; opacity:0.3; }
3. Javascript image.js:
function on_click(parent, id, src, cls, cls_sel) {
document.getElementById(id).src = src;
var el = document.getElementsByClassName(cls);
for(var i=0; i<el.length; i++) el<i>.setAttribute('class', cls);
parent.setAttribute('class', cls + ' ' + cls_sel);
}4. А вот и результат, это я лишь тестирую:
Meine Die Formel der LiebeЗабыл сделать пагинатор, про который я писал выше, подправим код:
componentsui.css:
.paginator { color:#000; padding:5px 5px; }
.paginator a { color:#000; text-decoration:none; }
.paginator a:hover { color:#000; text-decoration:underline; }
.paginator a:visited { color:#000; text-decoration:none; }
.paginator .paginator_selected { color:#00F; text-decoration:none; font-weight:bold; }
Протестируем index.html:
<div class="paginator"> <a href="#"><<</a> <span class="paginator_selected">[ 1 ]</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">>></a> </div>
Вуаля! А вот и результат:
Meine Die Formel der LiebeТеперь давайте нарисуем лого, я буду делать лого в Adobe Photoshop Elements 5.0.
1. Создадим новый проект, размер картинки должен быть 109x39 пикселей, а фон оставим прозрачным:
2. Добавим 4 слоя, 1й слой назовём LogoBlack там будет чёрный прямоугольник, 2й слой назовём LogoYellow там будет прямоугольник оранжево жёлтого цвета (16-ричный код цвета #EBD234), 3-й слой назовём TextWhite, там будет текст белого цвета, и наконец 4-й слой будет называться TextBlack там будет текст чёрного цвета:
3. Сохраним наше лого в формате JPEG.
4. Подправим наше лого в редакторе Paint:
Meine Die Formel der LiebeЛого сделал похожее на Immowelt см. https://de.m.wikipedia.org/wiki/Datei:Immowelt_2021_logo.svg
Meine Die Formel der LiebeТеперь займусь созданием иконки т.е. favicon для моего сайта, иконку буду рисовать в Junior Icon Editor:
Meine Die Formel der LiebeЕсли что у меня Adobe Photoshop Elements 5 лицензионный, когда сайт был, веб хостер дарил в подарок набор программ:
Meine Die Formel der LiebeЯ нарисовал вчера 2 новой иконки
Эта иконка т.е. favicon мне не нравится:
Meine Die Formel der LiebeВсем доброе утро! Продолжим заниматься разработкой сайта недвижимости. Вот тут написано про связи в таблицах, я совсем про эти связи забыл. Но ничего вспомнил, вроде бы правильно. Вот примерная диаграмма, эту диаграмму я делал в программе Dia:
Meine Die Formel der Liebe