PHP - Abrir e Fechar janela

violin101 · Julho 25

Caros amigos, saudações.

Estou com uma pequena dúvida.

Estou escrevendo um Sistema que tem vários Módulos.

O módulo principal tem:
Estoque | Compras | Expedição | Vendas

Minha dúvida:
como faço após Acessar o Módulo Principal e Escolher o Módulo que quero trabalhar,

eu possa fechar o Módulo aberto por exemplo: Estoque, sem alterar o Módulo principal e outros se estiver aberto ?

Grato,

Cesar

Williams Duarte · Julho 25

Bom, correto hoje em dia é usar alguma biblioteca para fazer isto, VueJs, React, para deixar mais reativo.

Mas voce pode usar um Js para fazer isto.

Exemplo Jquey usando modal:

Logo abaixo um exemplo com vuejs

<?php

if (isset($_GET['modulo'])) {
    // Mock
    $modulos = [
        'estoque' => '<h1>Módulo Estoque</h1><p>Conteúdo do módulo de Estoque...</p>',
        'compras' => '<h1>Módulo Compras</h1><p>Conteúdo do módulo de Compras...</p>',
        'expedicao' => '<h1>Módulo Expedição</h1><p>Conteúdo do módulo de Expedição...</p>',
        'vendas' => '<h1>Módulo Vendas</h1><p>Conteúdo do módulo de Vendas...</p>'
    ];

    $modulo = $_GET['modulo'];
    if (isset($modulos[$modulo])) {
        echo $modulos[$modulo] . '<a href="#" class="close-module" data-module="' . $modulo . '">Fechar Módulo</a>';
    }
    exit;
}

if (isset($_GET['close_modulo'])) {
    $modulo = 'modulo_' . $_GET['close_modulo'];
    exit;
}

$modulos = [
    'modulo_estoque' => 'Estoque',
    'modulo_compras' => 'Compras',
    'modulo_expedicao' => 'Expedição',
    'modulo_vendas' => 'Vendas'
];
?>
<!DOCTYPE html>
<html>

<head>
    <title>Sistema Principal</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.open-module').on('click', function(e) {
                e.preventDefault();
                var module = $(this).data('module');
                $('#moduleContent').load('?modulo=' + module, function() {
                    $('#moduleModal').modal('show');
                });
            });

            $(document).on('click', '.close-module', function(e) {
                e.preventDefault();
                var module = $(this).data('module');
                $.get('?close_modulo=' + module, function() {
                    $('#moduleModal').modal('hide');
                    updateModuleStatus();
                });
            });

            function updateModuleStatus() {
                $('#modulos_abertos').load(' #modulos_abertos > *');
            }

            setInterval(updateModuleStatus, 5000);
        });
    </script>
</head>

<body>
    <div class="container">
        <h1>Módulo Principal</h1>
        <ul>
            <li><a href="#" class="open-module" data-module="estoque">Estoque</a></li>
            <li><a href="#" class="open-module" data-module="compras">Compras</a></li>
            <li><a href="#" class="open-module" data-module="expedicao">Expedição</a></li>
            <li><a href="#" class="open-module" data-module="vendas">Vendas</a></li>
        </ul>



        <!-- Modal -->
        <div class="modal fade" id="moduleModal" tabindex="-1" aria-labelledby="moduleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="moduleModalLabel">Módulo</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="moduleContent">
                        <!-- Conteúdo do módulo será carregado aqui -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Exemplos simples usando vuejs:

modules.php:

<?php
header('Content-Type: application/json');

if (isset($_GET['modulo'])) {
    // Mock data for modules
    $modulos = [
        'estoque' => '<h1>Módulo Estoque</h1><p>Conteúdo do módulo de Estoque...</p>',
        'compras' => '<h1>Módulo Compras</h1><p>Conteúdo do módulo de Compras...</p>',
        'expedicao' => '<h1>Módulo Expedição</h1><p>Conteúdo do módulo de Expedição...</p>',
        'vendas' => '<h1>Módulo Vendas</h1><p>Conteúdo do módulo de Vendas...</p>'
    ];

    $modulo = $_GET['modulo'];
    if (isset($modulos[$modulo])) {
        echo json_encode(['content' => $modulos[$modulo]]);
    } else {
        echo json_encode(['content' => 'Módulo não encontrado']);
    }
    exit;
}

echo json_encode(['error' => 'Nenhum módulo especificado']);
?>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Sistema Principal</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <h1>Módulo Principal</h1>
        <ul>
            <li><a href="#" @click.prevent="openModule('estoque')">Estoque</a></li>
            <li><a href="#" @click.prevent="openModule('compras')">Compras</a></li>
            <li><a href="#" @click.prevent="openModule('expedicao')">Expedição</a></li>
            <li><a href="#" @click.prevent="openModule('vendas')">Vendas</a></li>
        </ul>

        <h2>Módulos Abertos:</h2>
        <div id="modulos_abertos">
            <div v-for="(modulo, index) in modulosAbertos" :key="index">
                <p>{{ modulo.nome }} <button @click="closeModule(index)">Fechar</button></p>
            </div>
        </div>

        <div v-if="moduleContent" class="mt-4">
            <div v-html="moduleContent"></div>
            <button class="btn btn-secondary" @click="moduleContent = ''">Fechar Módulo Atual</button>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                modulosAbertos: [],
                moduleContent: ''
            },
            methods: {
                openModule(module) {
                    axios.get('modules.php?modulo=' + module)
                        .then(response => {
                            this.moduleContent = response.data.content;
                            if (!this.modulosAbertos.find(m => m.nome === module)) {
                                this.modulosAbertos.push({ nome: module });
                            }
                        })
                        .catch(error => {
                            console.error("There was an error opening the module:", error);
                        });
                },
                closeModule(index) {
                    this.modulosAbertos.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

violin101 · Julho 27

amigo Williams, saudações.

muito legal o seu exemplo, mas infelizmente no seu exemplo acima os módulos abre dentro de uma DIV.

o que preciso seria fechar a ABA do Navegador que estiver aberta.

talvez eu não tenha explicado corretamente, mas quando o usuário abrir um módulo esse módulo abre uma nova janela, seria assim:

modulo principal:
Controle
estoque | compras | requisições
mod-1 mod-2 mod-3

Financeiro
Faturamento | Controle de Caixa
mod-4 mod-5

quando o usuário ABRE o Módulo Estoque(nova janela) ele vai trabalhar nessa opção.
quando o usuário ABRE o Módulo Financeiro(nova janela) e assim por diante.

ou seja,

quando abrir um módulo o sistema abre uma janela nova, com o TARJET _BLANK.

é nessa parte que estou em dúvida, fechar a Nova Janela sem fechar a Session toda, fechar apenas o Módulo aberto.

Williams Duarte · Julho 27

Entendi, vou lhe mostrar um exemplo, voce adapta ao que você quer!

Mas adianto que você tem que entender de javascript, se ficar muito restrito ao php ou framework, você não conseguira fazer muita coisa, então estude Javascript, que isto nada tem haver com php!

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Sistema Principal</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        .open-flag {
            color: green;
            font-weight: bold;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Módulo Principal</h1>
        <ul>
            <li><a href="#" class="open-module" data-module="estoque">Estoque</a><span id="flag-estoque"></span></li>
            <li><a href="#" class="open-module" data-module="compras">Compras</a><span id="flag-compras"></span></li>
            <li><a href="#" class="open-module" data-module="expedicao">Expedição</a><span id="flag-expedicao"></span></li>
            <li><a href="#" class="open-module" data-module="vendas">Vendas</a><span id="flag-vendas"></span></li>
        </ul>
    </div>

    <script>
        let openWindows = {};

        function checkWindowClosed() {
            for (let module in openWindows) {
                if (openWindows[module] && openWindows[module].closed) {
                    delete openWindows[module];
                    document.getElementById('flag-' + module).innerHTML = '';
                }
            }
        }

        setInterval(checkWindowClosed, 1000);

        document.querySelectorAll('.open-module').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                let module = this.getAttribute('data-module');
                if (openWindows[module] && !openWindows[module].closed) {
                    openWindows[module].focus();
                } else {
                    openWindows[module] = window.open('module.php?modulo=' + module, '_blank');
                    document.getElementById('flag-' + module).innerHTML = '(Aberto)';
                }
            });
        });

        window.addEventListener('beforeunload', function() {
            for (let key in openWindows) {
                if (openWindows[key] && !openWindows[key].closed) {
                    openWindows[key].close();
                }
            }
        });
    </script>
</body>
</html>

module.php

<?php
$modulo = isset($_GET['modulo']) ? $_GET['modulo'] : 'default';

$conteudos = [
    'estoque' => '<h1>Módulo Estoque</h1><p>Conteúdo do módulo de Estoque...</p>',
    'compras' => '<h1>Módulo Compras</h1><p>Conteúdo do módulo de Compras...</p>',
    'expedicao' => '<h1>Módulo Expedição</h1><p>Conteúdo do módulo de Expedição...</p>',
    'vendas' => '<h1>Módulo Vendas</h1><p>Conteúdo do módulo de Vendas...</p>',
];

$conteudo = isset($conteudos[$modulo]) ? $conteudos[$modulo] : '<h1>Módulo Não Encontrado</h1><p>Conteúdo não disponível.</p>';
?>
<!DOCTYPE html>
<html>

<head>
    <title>Módulo <?php echo htmlspecialchars($modulo); ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <?php echo $conteudo; ?>
        <button onclick="window.close();" class="btn btn-secondary mt-3">Fechar Módulo</button>
    </div>
</body>

</html>

Entrar

PHP - Abrir e Fechar janela

Recommended Posts

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

index.html

Compartilhar este post

Link para o post

Compartilhar em outros sites

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante