End of jan
This commit is contained in:
parent
58ba8436b5
commit
38e1d21b69
@ -2,17 +2,35 @@
|
||||
|
||||
require_once __DIR__ . "/../model/MusicModel.php";
|
||||
require_once __DIR__ . "/../view/View.php";
|
||||
require_once __DIR__ . "/../../core/Paginator.php";
|
||||
|
||||
class MainController
|
||||
{
|
||||
public function actionIndex() {
|
||||
$result = MusicModel::getData();
|
||||
echo(View::render(['box' => $result], 'index_tpl.php'));
|
||||
}
|
||||
private $limit = Null;
|
||||
private $offset = Null;
|
||||
|
||||
public function actionIndex()
|
||||
{
|
||||
$result = MusicModel::getData();
|
||||
$builder = new MusicPageBuilder($result);
|
||||
$portial = $builder->setFeed();
|
||||
echo (View::render(['portial' => $portial], 'index_tpl.php'));
|
||||
}
|
||||
|
||||
|
||||
public function actionNotFound()
|
||||
{
|
||||
echo (View::render([], '404.php'));
|
||||
}
|
||||
|
||||
public function actionPortial()
|
||||
{
|
||||
// $this->limit = isset($_GET['limit']) ? $_GET['limit'] : Null;
|
||||
// $this->offset = isset($_GET['offset']) ? $_GET['offset'] : Null;
|
||||
$result = MusicModel::getData();
|
||||
// var_dump($result);
|
||||
$builder = new MusicPageBuilder($result);
|
||||
$page = $builder->setFeed();
|
||||
echo $page;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,82 +2,106 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Resposive Layout</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Resposive Layout</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<a href="./login" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Login</a>
|
||||
</li>
|
||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<a href="./login" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Login</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex border-b">
|
||||
<button id="tab1" class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium active" onclick="showTab('tab1')">Classic</button>
|
||||
<button id="tab2" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab2')">Jazz</button>
|
||||
<button id="tab3" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab3')">Rock</button>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex border-b">
|
||||
<button id="tab1" class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium active" onclick="showTab('tab1')">Classic</button>
|
||||
<button id="tab2" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab2')">Jazz</button>
|
||||
<button id="tab3" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab3')">Rock</button>
|
||||
</div>
|
||||
|
||||
<div id="content1" class="p-4">
|
||||
<?php foreach ($box as $item): ?>
|
||||
<audio controls>
|
||||
<source src="<?php echo $item; ?>" type="audio/mpeg">
|
||||
</audio>
|
||||
<?php endforeach; ?>
|
||||
<div id="content2" class="p-4 hidden">
|
||||
Содержимое вкладки 2
|
||||
</div>
|
||||
<div id="content3" class="p-4 hidden">
|
||||
Содержимое вкладки 3
|
||||
</div>
|
||||
<div id="content1" class="p-4">
|
||||
<div id="feed"><?php echo $portial ?></div>
|
||||
<button type="button" id="paginator" data-id="1">Далее...</button>
|
||||
<div id="content2" class="p-4 hidden">
|
||||
Содержимое вкладки 2
|
||||
</div>
|
||||
<div id="content3" class="p-4 hidden">
|
||||
Содержимое вкладки 3
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showTab(tabId) {
|
||||
const tabs = document.querySelectorAll('.flex button');
|
||||
const contents = document.querySelectorAll('.p-4');
|
||||
<script>
|
||||
function showTab(tabId) {
|
||||
const tabs = document.querySelectorAll('.flex button');
|
||||
const contents = document.querySelectorAll('.p-4');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
tab.classList.remove('border-blue-500');
|
||||
tab.classList.remove('text-blue-500');
|
||||
tab.classList.add('border-transparent');
|
||||
tab.classList.add('text-gray-500');
|
||||
});
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
tab.classList.remove('border-blue-500');
|
||||
tab.classList.remove('text-blue-500');
|
||||
tab.classList.add('border-transparent');
|
||||
tab.classList.add('text-gray-500');
|
||||
});
|
||||
|
||||
contents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
});
|
||||
contents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
});
|
||||
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
document.getElementById(tabId).classList.add('border-blue-500');
|
||||
document.getElementById(tabId).classList.add('text-blue-500');
|
||||
document.getElementById(tabId).classList.remove('border-transparent');
|
||||
document.getElementById(tabId).classList.remove('text-gray-500');
|
||||
document.getElementById(`content${tabId.slice(-1)}`).classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
document.getElementById(tabId).classList.add('border-blue-500');
|
||||
document.getElementById(tabId).classList.add('text-blue-500');
|
||||
document.getElementById(tabId).classList.remove('border-transparent');
|
||||
document.getElementById(tabId).classList.remove('text-gray-500');
|
||||
document.getElementById(`content${tabId.slice(-1)}`).classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function getFetch(url) {
|
||||
const response = await fetch(url, {
|
||||
method: 'get'
|
||||
})
|
||||
return await response.text();
|
||||
|
||||
}
|
||||
async function getPage(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
let num_page = parseInt(event.target.getAttribute('data-id'))
|
||||
console.log(num_page)
|
||||
let limit = 5
|
||||
url = 'portial?offset=' + limit * num_page + '&limit=' + limit
|
||||
// console.log(url)
|
||||
let data = await getFetch(url)
|
||||
if (!data) event.target.remove()
|
||||
// event.target.remove()
|
||||
feed = document.getElementById('feed')
|
||||
feed.innerHTML = feed.innerHTML + data
|
||||
event.target.setAttribute('data-id', parseInt(num_page) + 1)
|
||||
|
||||
}
|
||||
|
||||
const parent = document.getElementById('paginator')
|
||||
parent.addEventListener('click', getPage)
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
15
engine/app/template/portial_music.php
Normal file
15
engine/app/template/portial_music.php
Normal file
@ -0,0 +1,15 @@
|
||||
<?php
|
||||
$audioFiles = $box; // Переименовали переменную для ясности
|
||||
foreach ($audioFiles as $file):
|
||||
if (file_exists($file)) : ?>
|
||||
<div class="audio-player">
|
||||
<audio controls="controls">
|
||||
<source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
|
||||
Ваш браузер не поддерживает HTML5 audio.
|
||||
</audio>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
|
||||
<?php endif;
|
||||
endforeach;
|
||||
?>
|
||||
@ -28,23 +28,45 @@
|
||||
<?php else: ?>
|
||||
<div class="login"><a href="login.php">Вход</a></div>
|
||||
<?php endif; ?>
|
||||
<div id="feed">
|
||||
<?php echo $portial ?>
|
||||
|
||||
<?php
|
||||
$audioFiles = $box; // Переименовали переменную для ясности
|
||||
foreach ($audioFiles as $file):
|
||||
if (file_exists($file)) : ?>
|
||||
<div class="audio-player">
|
||||
<audio controls="controls">
|
||||
<source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
|
||||
Ваш браузер не поддерживает HTML5 audio.
|
||||
</audio>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
|
||||
<?php endif;
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
</div>
|
||||
<button type="button" id="paginator">Далее...</button>
|
||||
</body>
|
||||
<script>
|
||||
async function getFetch(url) {
|
||||
const response = await fetch(url, {
|
||||
method: 'get'
|
||||
})
|
||||
return await response.text();
|
||||
|
||||
}
|
||||
async function getPage(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
let num_page = event.target.getAttribute('data-id')
|
||||
console.log(num_page)
|
||||
let limit = 5
|
||||
url = 'portial?offset=' + limit * num_page + '&limit=' + limit
|
||||
console.log(url)
|
||||
let data = await getFetch(url)
|
||||
console.log(data)
|
||||
if (!data) {
|
||||
event.target.remove()
|
||||
console.log("No data")
|
||||
} else
|
||||
{ console.log("Data")
|
||||
}
|
||||
feed = document.getElementById('feed')
|
||||
feed.innerHTML = feed.innerHTML + data
|
||||
event.target.setAttribute('data-id', parseInt(num_page) + 1)
|
||||
|
||||
}
|
||||
|
||||
const parent = document.getElementById('paginator')
|
||||
parent.addEventListener('click', getPage)
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -5,7 +5,7 @@ class Autoloader
|
||||
{
|
||||
spl_autoload_register(function ($class_name) {
|
||||
// print('auto: ' . $class_name);
|
||||
$dir = ['/../app/controller/'];
|
||||
$dir = ['/../app/controller/', '../app/view'];
|
||||
// print($dir);
|
||||
foreach ($dir as $path) {
|
||||
$path = __DIR__ . $path . $class_name . '.php';
|
||||
|
||||
80
engine/core/Paginator.php
Normal file
80
engine/core/Paginator.php
Normal file
@ -0,0 +1,80 @@
|
||||
<?php
|
||||
|
||||
require_once __DIR__ . "/../app/view/View.php";
|
||||
|
||||
class Page
|
||||
{
|
||||
public string $html = "";
|
||||
public string $feed = "";
|
||||
public string $paginator = "";
|
||||
// ... другие свойства
|
||||
|
||||
public function __construct() {} // Пустой конструктор
|
||||
|
||||
public function __toString(): string
|
||||
{
|
||||
return $this->html;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
interface PageBuilder
|
||||
{
|
||||
public function setFeed();
|
||||
public function setPaginator();
|
||||
// ... другие методы для установки свойств
|
||||
}
|
||||
|
||||
//implements PageBuilder {
|
||||
class MusicPageBuilder implements PageBuilder
|
||||
{
|
||||
|
||||
private Page $page;
|
||||
|
||||
const LIMIT = 5;
|
||||
const OFFSET = 0;
|
||||
private $data = [];
|
||||
private $limit = Null;
|
||||
private $offset = Null;
|
||||
private $flag = 'ajax';
|
||||
|
||||
|
||||
public function __construct($data, $flag = 'ajax')
|
||||
{
|
||||
|
||||
$this->page = new Page();
|
||||
$this->flag = $flag;
|
||||
$this->data = $data;
|
||||
$this->limit = isset($_GET['limit']) ? $_GET['limit'] : self::LIMIT;
|
||||
$this->offset = isset($_GET['offset']) ? $_GET['offset'] : self::OFFSET;
|
||||
}
|
||||
|
||||
public function setFeed()
|
||||
{
|
||||
$portial = array_slice($this->data, $this->offset, $this->limit);
|
||||
$data = View::render(['box' => $portial], 'portial_music.php');
|
||||
// var_dump ($data);
|
||||
return $data;
|
||||
}
|
||||
|
||||
public function setPaginator()
|
||||
{
|
||||
$len = sizeof($this->data);
|
||||
$contPage = intdiv($len, $this->limit);
|
||||
for ($i = 0; $i < $contPage; $i++) {
|
||||
$this->page->paginator .= '<a href="portial.php?offset=' . self::LIMIT * $i .
|
||||
'&limit=' . self::LIMIT . '">' . $i . '</a> ';
|
||||
}
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
|
||||
// Клиентский код
|
||||
// $builder = new MusicPageBuilder($arrMusic);
|
||||
// $page = $builder->setFeed()->setPaginator()->build();
|
||||
// echo $page . PHP_EOL;
|
||||
|
||||
// $p = new Paginator($arrMusic);
|
||||
// $p->renderFeed();
|
||||
// $p->renderPaginator();
|
||||
// $p->renderPage();
|
||||
@ -10,6 +10,7 @@ return array(
|
||||
'logout' => 'auth/logout',
|
||||
'upload' => 'upload/index',
|
||||
'file_upload' => 'upload/addfile',
|
||||
'portial' => 'main/portial'
|
||||
);
|
||||
// - где 'news' - строка запроса
|
||||
// 'news/index' - имя контроллера и экшена для обработки этого запроса (путь обработчика)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user