Навигация по подпапкам с помощью PHP ⇐ Php

[Anonymous]

Я делаю веб-систему радиоколлекций, где один экран состоит из создания названия основной папки и внутри нее я могу добавлять другие папки и файлы, аналогично диску. Эти элементы созданы из js, но у меня было много сомнений, когда дело дошло до реализации записи в этих папках, создания карточки справа от основной и так далее, как в Google Диске. В php эти папки и подпапки будут сохранены в базе данных, поэтому у меня были некоторые идеи о том, как я мог бы применить это, с управлением состоянием или параметрами в php, сохраняя имя папки и передавая его через GET, а затем показывая изначально пустую папку. его содержание. Кто-нибудь, помогите мне, как это сделать, вот несколько скриншотов и частей кода. введите сюда описание изображения
html

Код: Выделить всё

Conteúdos


[img]/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png[/img]
Criar Nova Pasta


[img]/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png[/img]
Adicionar Pasta


[img]/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png[/img]
Adicionar Arquivo




Nenhum acervo foi adicionado...





Nova Pasta



Cancelar
Criar








Renomear Pasta



Cancelar
Mudar








Adicionar Pasta



Cancelar
Adicionar

js

Код: Выделить всё

function mostrarModal() {
var modal = document.getElementById("myModal");
modal.classList.add("show-modal");
}

function fecharModal() {
var modal = document.getElementById("myModal");
modal.classList.remove("show-modal");
var input = document.getElementById("nomePasta");
input.value = "";
}

function criarPasta() {
var modal = document.getElementById("myModal");
modal.classList.remove("show-modal");
var input = document.getElementById("nomePasta");
var nomePasta = input.value.trim(); // Remova os espaços em branco extras

if (nomePasta !== "") {
var nenhumAcervo = document.getElementById("nenhum-acervo");
if (nenhumAcervo) {
nenhumAcervo.remove();
}

var novoCard = document.createElement("div");
novoCard.classList.add("cardDir", "novoCard");
novoCard.textContent = nomePasta;

// Ajuste a largura com base no comprimento do texto
var width = nomePasta.length * 15; // Aproximadamente 12 pixels por caractere
novoCard.style.width = width + "px";

document.getElementById("novoCard").appendChild(novoCard);

var span = document.createElement("span");
span.textContent = "Renomear";
span.classList.add("renomear");
span.onclick = function () {
abrirRenameModal(nomePasta);
};

document.querySelector(".renomearNovo").appendChild(span);

// Trocar o botão "Criar Nova Pasta" pelo botão "Adicionar Pasta"
var btnCriarPasta = document.querySelector(".btnCriarPasta");
var btnAdicionarPasta = document.querySelector(".btnAdicionarPasta");
if (btnCriarPasta && btnAdicionarPasta) {
btnCriarPasta.style.display = "none";
btnAdicionarPasta.style.display = "flex";
}

// Mostrar o botão Adicionar Arquivo
document.querySelector(".btnAdicionarArquivo").style.display = "flex";
}
}

function abrirRenameModal(nomeAtual) {
var novoNomeInput = document.getElementById("novoNomePasta");
novoNomeInput.value = "";
var modal = document.getElementById("renameModal");
modal.classList.add("show-modal");
}

function fecharRenameModal() {
var modal = document.getElementById("renameModal");
modal.classList.remove("show-modal");
var novoNomeInput = document.getElementById("novoNomePasta");
novoNomeInput.value = "";
}

function confirmarRenomear() {
var novoNomeInput = document.getElementById("novoNomePasta");
var novoNome = novoNomeInput.value.trim();
if (novoNome !== "") {
var novoCard = document.querySelector(".novoCard");
if (novoCard) {
novoCard.textContent = novoNome;
// Ajuste a largura com base no comprimento do novo texto
var newWidth = novoNome.length * 15;  // Aproximadamente 12 pixels por caractere
novoCard.style.width = newWidth + "px";
}
fecharRenameModal();
}
}

function mostrarModalAdicionarPasta() {
var modal = document.getElementById("modalAdicionarPasta");
modal.classList.add("show-modal");
}

function fecharModalAdicionarPasta() {
var modal = document.getElementById("modalAdicionarPasta");
modal.classList.remove("show-modal");
var input = document.getElementById("nomeNovaPasta");
input.value = "";
}

function adicionarNovaPasta() {
var modal = document.getElementById("modalAdicionarPasta");
modal.classList.remove("show-modal");
var input = document.getElementById("nomeNovaPasta");
var nomePasta = input.value.trim();

if (nomePasta !== "") {
adicionarPasta(nomePasta);
}

input.value = "";
}

function adicionarPasta(nomePasta) {
var novoCard = document.createElement("div");
novoCard.classList.add("card");

// Conteúdo do card
var fundoImg = document.createElement("div");
fundoImg.classList.add("fundo-img");
var cardImg = document.createElement("img");
cardImg.src = "assets/logo_min.png";
cardImg.classList.add("card-img");
fundoImg.appendChild(cardImg);

var cardText = document.createElement("span");
cardText.textContent = nomePasta;
cardText.classList.add("card-text");

var excluirBtn = document.createElement("p"); // Alterado para 
excluirBtn.textContent = "Excluir";
excluirBtn.classList.add("excluir-card");

// Adicione um evento de clique ao botão para lidar com a exclusão do card
excluirBtn.addEventListener("click", function() {
novoCard.remove(); // Remove o card ao clicar no botão "Excluir"
});

novoCard.appendChild(fundoImg);
novoCard.appendChild(cardText);
novoCard.appendChild(excluirBtn); // Adicionando o botão de excluir

// Adicione o novo card ao conteúdo principal
var contentBody = document.querySelector(".content-body");
contentBody.appendChild(novoCard);
}

let arquivoContador = 0;
let cardList = []; // Array para armazenar os cards de arquivo

function adicionarArquivo() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.pdf, .jpg, .jpeg'; // Aceita vários tipos de arquivo
input.onchange = function (event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
arquivoContador++;
const novoCard = document.createElement('div');
novoCard.classList.add('card');

// Número do arquivo
const numeroArquivo = document.createElement('p');
numeroArquivo.textContent = arquivoContador;
numeroArquivo.classList.add('numero-arquivo');

// Nome do arquivo
const nomeArquivo = document.createElement('span');
nomeArquivo.textContent = file.name;
nomeArquivo.classList.add('card-text');

// Botão Excluir
const excluirBtn = document.createElement('p'); // Mantido como
excluirBtn.textContent = 'Excluir';
excluirBtn.classList.add('excluir-card');
excluirBtn.addEventListener('click', function() {
novoCard.remove(); // Remove o card ao clicar no botão "Excluir"
atualizarNumerosArquivos(); // Atualiza os números dos arquivos restantes
});

novoCard.appendChild(numeroArquivo);
novoCard.appendChild(nomeArquivo);
novoCard.appendChild(excluirBtn);

// Adicione o novo card ao conteúdo principal
const contentBody = document.querySelector('.content-body');
contentBody.appendChild(novoCard);
}
};
input.click();
}

// Função para atualizar os números dos arquivos após a exclusão
function atualizarNumerosArquivos() {
const numeroArquivos = document.querySelectorAll('.numero-arquivo');
arquivoContador = 0;  // Zera o contador global de arquivos
numeroArquivos.forEach((numero, index) => {
arquivoContador++;
numero.textContent = arquivoContador;
});
}

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


Подробнее здесь: https://stackoverflow.com/questions/786 ... n-with-php