121

Estou querendo desenvolver um site que rode todo no mesmo arquivo, mas não sei bem como procurar material de estudo para isso.

Assim:

Site normal->estou na página Index.php. Quando clico no menu "Portfólio", por exemplo, ele vai e carrega o arquivo Porfolio.php.

Site que eu quero fazer->estou na página Index.php. Quando eu clico no menu "Portfólio", o site faz uma animação (fade, side-scroll, etc) e mostra o conteúdo do Portfólio, sem a necessidade de carregar outro arquivo.

Alguém pode me dar uma luz? Já trabalhei com sites feitos em uma página só, mas são no modelo One Page Scroll Website.

Acredito que eu precise trabalhar com o AJAX, mas não tenho certeza ainda.

5

9 Respostas 9

102

De uma maneira conceptual, tem três opções:

#1 - Ficheiro único sem AJAX

Neste caso pode ter todo o conteúdo na mesma página. O conteúdo que não é para mostrar deve estar escondido com, por exemplo, display: none;

<div id="menu">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>
<div id="conteudo">
    <div class="a visivel">Conteudo A</div>
    <div class="b">Conteudo B</div>
    <div class="c">Conteudo C</div>
</div>

CSS

#conteudo > div{
    display: none;
    
}
#conteudo > div.visivel{
    display: block;
}

Exemplo

#2 - Ficheiro único sem AJAX com tudo visível e com scroll

Neste caso pode ter um menu onde clicando dispara um scroll. Para isso precisa de ter âncoras para poder disparar um scroll até ali. Também dá para disparar o scroll procurando a posição/tamanho dos elementos mas é menos prático

<div id="menu">
    <div><a href="#a">A</a></div>
    <div><a href="#b">B</a></div>
    <div><a href="#c">C</a></div>
</div>
<div id="conteudo">
    <div class="a visivel"><a name="a"></a>Conteudo A</div>
    <div class="b"><a name="b"></a>Conteudo B</div>
    <div class="c"><a name="c"></a>Conteudo C</div>
</div>

Exemplo

#3 - Ficheiros multiplos com AJAX

Neste caso tem ficheiros diferentes do lado do servidor e vai buscá-los via AJAX. Na função de resposta do AJAX carrega esse HTML na arte da página pretendida. Apagando o conteúdo inicial desse elemento/parte da página.

HTML

<div id="menu">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>
<div id="conteudo"></div>

jQuery

$('#menu > div').on('click', function (e) {
    e.preventDefault(); // para impedir o link de ser seguido
    url = '/shmD9/show';    // usado para o meu exemplo
    var aClasse = this.id;
    $.ajax({
        url: url,
        // aqui um parametro "data: variável," é necessário
        success: function (returnhtml) {  // função corrida no sucesso do ajax
            var tempText = (returnhtml.split('<body>'))[1].split('</body>')[0];  // só util no meu exemplo
            var divEnscolhido = $('<div></div>').append(tempText).find('.' + aClasse); // só util 
            $('#conteudo').html(divEnscolhido); // esta é a parte importante, onde o conteudo da div é substituído pelo novo
        }
    });
});

Exemplo

Considerações a ter em conta:

Ambos os métodos 1 e 3 são SEO un-friendly. Isto quer dizer que por exemplo o Google quando tentar indexar conteúdos da página vai ter problemas. Se a sua página não fôr bem indexada pelo Google então não tem conteúdo para mostrar nas buscas e vai ter menos visibilidade/visitas. No caso do google ele faz indexação de conteúdo escondido, mas não é garantido que outros façam. (E no caso da opção 3 é ainda pior)

1
  • 5
    Nos casos em que há problemas com o robô do google (#1 e #3), uma solução seria identificar que o visitante é o robô do google e então renderizar o conteúdo todo visível (igual ao caso #2). Commented 25/02/2014 às 16:03
52

Eu uso AngularJS para fazer sites em uma só página, é muito mais fácil e simples de usar do que ajax e outras parafernálias veja só este

Passo a passo de um site em página única

Antes de começar, todo o código abaixo está funcionando em: http://jsbin.com/roqil/edit

Para ter o controle de redirecionamento de páginas você precisa seguir alguns passos antes.

Referenciar as bibliotecas de roteamento do AngularJS

Referencie o módulo ngRoute no seu html:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
</head>

Modularizar seu App

Só é possivel controlar o roteamento da página com um aplicativo modularizado, crie seu módulo referenciando o angular-route dessa forma:

var app = angular.module("app", ["ngRoute"]);

E na tag <html> adicione :

<html ng-app='app'>

A variavel app é global e nela você pode chamar services, factories, e métodos de configuração.

Vamos adicionar um factory de tasks apenas para garantir que os controllers estão usando a mesma lista de tasks. Conseguinte, os dois controllers, um para a view de Detalhes e outro para Listagem:

/*1*/   app.factory("TaskFactory",function(){  
/*2*/     var tasklist =  [              
/*3*/        {name:"terminar meu app",id:0}, 
/*4*/        {name:"comprar presente para minha irmã",id:1}
/*5*/        ]; 
/*6*/          return{
/*7*/            get : function(){
/*8*/            return tasklist;
/*9*/          }
/*10*/       };
/*11*/   });
/*12*/    app.controller('TaskListCtrl', function ($scope,TaskFactory) {
/*13*/      (function(){$scope.tasks=TaskFactory.get();})();
/*14*/    });
/*15*/    app.controller('TaskDetailCtrl', function ($scope,TaskFactory,$routeParams) {
/*16*/      (function(){$scope.task=TaskFactory.get()[$routeParams.taskId];})();
/*17*/    });

Detalhes das Linhas:

Linha 1 - Criando a factory

Linha 3 - Vamos utilizar o id da task para chama-la da view de listagem para detalhes

Linha 6 - Retornando um método para chamar a lista de tasks do factory

Linha 12 - Criando o controller TaksListCtrl que está recebendo por argumento o $scope e TaskFactory que é o factory. Tem que ser o mesmo nome chamado no argumento e registrado no app.factory()

Linha 13 - Populando $scope.tasks com a lista de tasks que retorna de TaskFactory.Get();

Linha 15 - Criando o controller TaskDetailCtrl que será responsavel por apresentar a task selecionada na outra view. O diferencial é que agora estou recebendo por argumento o $routeParams do módulo ngRoute que é responsavel por manter os dados que vc passa na URL

Linha 16 - Novamente estou pegando tasks do TaskFactory mas desta vez estou filtrando por aquelas que contém o id = $routeParams.taskId (veremos pra frente o porquê deste) então ele trará apenas uma task.

Poderia fazer assim também se preferir:

//esta forma
var tasks = TaskFactory.get();
var id = $routeParams.taskId;
$scope.task = tasks[id];

//é a maneira simplificada desta
$scope.task=TaskFactory.get()[$routeParams.taskId];

Configurar as rotas em app.config()

É necessário reservar um espaço no html para permitir que o AngularJS manipule seu DOM

<body>
  <div >
    <ng-view></ng-view>
  </div>
 </body>

Apenas use a diretiva ng-view em alguma tag <div> e pronto, nao precisa referenciar controllers ou algo do tipo, isso será registrado em app.config() com a seguir:

/*1 */   app.config(function($routeProvider) {
/*2 */       $routeProvider.when('/',{
/*3 */           template: 'Lista de Tasks:'+
/*4 */             '<div >'+
/*5 */           '<div ng-repeat="task in tasks">'+
/*6 */         '{{task.id}} - {{task.name}}'+
/*7 */           '<div><a ng-href="#/{{task.id}}">detalhes</a>'+
/*8 */       '</div></div>'+
/*9 */     '</div>',
/*10*/            controller: "TaskListCtrl"
/*11*/          }).
/*12*/        when('/:taskId',{
/*13*/            template: 'Detalhes da Task {{task.id}}:'+
/*14*/              '<h4>Nome: {{task.name}}</h4>'+ 
/*15*/              '</div>'+'<a ng-href="#/"> Voltar</a>',
/*16*/            controller: "TaskDetailCtrl"
/*17*/          }
/*18*/        ).otherwise({redirect:'/'});
/*19*/    });

O que o código acima faz é:

Linha 1 - invoca o método config do módulo passando uma function que recebe o $routeProvader

Linha 2 - No $routeProvader você tem os métodos when() e otherwise() , cada um recebe um objeto com as propriedades de roteamento, por exemplo:

when("/url que vc deseja",{
  template: "aqui vai o html que será renderizado dentro de ng-view"
  controller: "aqui o nome do controller correspondente àquela url"
});

otherwise({redirect:"/"}) //quer dizer que se nao for nenhuma das url registradas,
// redirecionara para a principal

No primeiro when() estou passando que caso nao tenha parametros, chamará aquele template utilizando o "TaskListCtrl". Se o template for muito grande, é recomendado guardar ele em outro arquivo e chama-lo assim {templateUrl:'exemplo.html'} ai invés de apenas template

Na linha 7 estou simplesmente criando um link para #/{{task.id}}, o angular irá substituir o taskId pelo id da task.

IMPORTANTE: Na linha 12 o when está recebendo \:taskId, o sinal : indica que é um parametro, isso é necessário para dizer para o $routeParams que é chamado no controller, que ele terá a a propriedade taskId, veja:

inserir a descrição da imagem aqui

Ademais, está passando o template e amarrando ao controller TaskDetailCtrl

Resumo

Pronto, são necessários esses passos para fazer um controle de roteamento simples utilizando AngularJS resumindo:

  1. Referenciar angular.js e angular-route.js
  2. Criar um módulo para a aplicação referenciando ['ngRoute']
  3. Adicionar <html ng-app='nomeDoModulo'>
  4. Criar os controllers e factories/serivces
  5. Adicionar o argumento $routeParams no controller que utiliza-ra deste.
  6. Chamar ng-view no html assim: <div ng-view></div>
  7. Invocar app.config(function($routeProvider){...}) para fazer o registro de rotas (inclusive o $location só funciona se a rota direcionada estiver registrada aqui.
  8. Chamar o método $routeProvider.when() para cada rota do seu aplicativo passando os parametros corretos
  9. Distribuir tags <a href="#/rotaEscolhida">
  10. Utilizar $routeParams.qualquerPropriedadeRegistrada conforme necessidade.

App funcionando aqui: http://jsbin.com/roqil/edit

0
25

Ao meu ponto de vista, todas as resposta estão corretas, mas ninguém lembrou de uma outra forma de fazer isso, usando o AngularJS e o recurso de ngView você consegue fazer isso de forma prática e rápida é o próprio angular já tem suporte para animações de transição.

Exemplo no Plunker

1
  • 6
    Concordo o @R3oLoN. O AngulaJS está muito bom. Usei durante algum tempo mas abandonei porque ainda estava muito verde e a documentação era um pouco escassa. No entanto, agora está bem melhor; e agora, com a parte de User Interface(UI) melhorada parece-me uma excelente opção. Vais precisar de alguns conhecimentos de Javascript. Basicamente, crias páginas diferentes para o que precisas e depois o Angular trata-te disso :) Commented 25/02/2014 às 12:16
18

Isso pode ser feito de várias formas. Você pode usar um script para enviar um requests por ajax ao clicar em links para o mesmo domínio do seu site:

(function() {
    var content = document.getElementById("div-id"), // Substitua "div-id" pelo ID da div do conteúdo do seu site
        links = document.getElementsByTagName("a");

    function listener(e) {
        loadPage(this);
        e.preventDefault();
        e.stopPropagation();
    }

    function loadPage(target) {
        var xmlhttp,
            url = target.href;
        if(target.search) {
            url += "&ajax=1";
        } else {
            url += "?ajax=1";
        }
        if(typeof window.XMLHttpRequest === "undefined") {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch(e) { try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch(e) { try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return;
            }}}
        } else {
            xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                // Animação...
                try {
                    var response = JSON.parse(xmlhttp.responseText);
                    window.history.pushState({
                        url: url
                    }, response.title || document.title, url);
                    document.title = response.title;
                    content.innerHTML = content;
                } catch(e) { }
            }
        };
        xmlhttp.open("GET", url, false);
        xmlhttp.send();
    }

    for(var i = 0; i < links.length; ++i) {
        if(links[i].hostname === window.location.hostname &&
           links[i].protocol === window.location.protocol) {
            if(links[i].addEventListener) {
                links[i].addEventListener("click", listener);
            } else if(links[i].attachEvent) {
                links[i].attachEvent("onclick", listener);
            }
        }
    }
})();

Esse script adiciona a variável "json" ao query string da url, que será usado para determinar se o script vai gerar gerar um objeto json ou o layout completo da página:

<?php
// Gerar o conteúdo e título
if(isset($_GET['json'])) {
    header("Content-Type: application/json");
    echo json_encode(array(
        'title'   => $titulo_da_pagina,
        'content' => $conteúdo_da_pagina
    ));
} else {
    // Exibir o layout inteiro
}

Dessa forma o site funciona mesmo sem javascript.

13

Utilizando Ajax é facil. Só seguir meu exemplo abaixo:

<head>
<title>Site</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<body>

<div id="menu"><a data="porfolio.php" id="porfolio" onclick="getPage(this.id);" style="cursor:hand;text-

decoration:underline;">Porfolio</a></div>

<script>function getPage(a){ 
    $.get(document.getElementById(a).getAttribute('data'), function(data){ paginas = data; });
}</script>

<div id="paginas">Página Inicial</div>

</body>

Observação: Lembre-se de colocar o CSS e Javascript que for instanciar sempre na pagina principal. Aqui esta o principio, só formatar o CSS e criar os links, Aplicar no site que esta fazendo a tecnologia. Para a pagina inicial, apenas coloque o conteúdo em uma pagina. Ex.: inicial.php

Neste caso, colocaria dentro do script a linha:

$.get('inicial.php', function(data){ paginas = data; });
1
  • 1
    Set colocarmos "href" com a pagina no link, a pagina iria sobrepor. Commented 19/08/2015 às 18:09
12

Você poderia utilizar a função "load" do jquery e atualizar determinado elemento da página, por exemplo, vamos supor que a cada click em elementos com a classe "change-content", ele utiliza o "href" para buscar a nova página, e atualiza o "#content", seria algo do tipo:

<nav>
     <a href="contato.html" class="change-content">Contato</a>
     <a href="empresa.html" class="change-content">Empresa</a>
</nav>
<section id="content"></section>

<script>
    $(document).ready(function() {
        $('.change-content').click(function() {
            $("#content").load($(this).attr('href'));
            return false;
        });    
    });
</script>
9

Será necessário usar AJAX sim, basicamente você terá um pagina que vai mostrar o conteúdo dos outros arquivos como sobre.php, contato.php, portfolio.php através do load() do jquery ou do open('GET') do javascript e com o callback você poderá acionar o efeito que pretender.

Olha neste script em jQuery (JSFiddle)

Esta busca também pode te ajudar

$(document).ready(function() {
    var paginaXXX = "paginaXXX.php";
    // On click faz o load
    $('input[type="button"]').click(function(){
        // Oculta a pagina actual
        $('.conteudoActual').hide();
        // Mostra a div carregando
        $('.carregando').fadeIn();
        // Lê o conteudo e quando o conteúdo for lido 
        // apresenta a pagina
        $('.conteudo').load(paginaXXX, function() {
            // Oculta o carregando
            $('.carregando').hide();
            // Mostra a página requisitada
            $('.conteudo').fadeIn();
        });
    });
});
0
9

**Essa resposta foi reescrita para melhor entendimento.
A questão em si está em trocar de as informações ou até mesmo fazer postagens no PHP sem utilizar os forms(que geralmente recarregam as páginas ou direcionam para outros lugares)

Até onde sei não há outra forma se não o Ajax, que pode ser feito de 3 formas as quais conheço, porém vou demostrar o método $.load:
LOAD
Esse método funciona melhor para a questão que o úsuário propôs. Vou detalhar um pouco mais aplicando a um modelo. Digamos que no servidor você possua uma pasta de um projeto web chamado "Projeto". Dentro da pasta projeto temos o "index.php", "pagina1.php", "pagina2.php" e por ai vai...
INDEX.PHP

//não vou colocar o cabeçalho completo, lembro que você deve indicar o jquery no seu cabeçalho
<head>
    <script>
        $(document).ready(function(){
            /
            $("#content").load("pagina1.php"); //aqui ele carrega a primeira página no content para ele não ficar em branco
            $(".menu a").click(function(){ //quando o usuario clicar em qualquer opção do menu
                var pagina = $(this).attr("id"); //obtém o id do item clicado que é equivalent ao nome da página
                var param = $(this).attr("class"); //obtém a classe, a idéia é passar a classe para o PHP como um parâmentro
                $("#content").load(pagina+".php", {"param":param}, function(){
                    alert("Ok, a página "+pagina+" foi atualizada com sucesso!"); 
                    //Retorno para saber que a atualização ou troca ocorreu, isso não é tão necessário
                    //Mas se você precisa executar outra funcção com o resultado do load é bom utilizar isso
                });
            });
        });
    </script>
</head>
<body>
    <div class="menu">
        <a href="#" class="item1" id="pagina1">Pagina1</a>
        <a href="#" class="item2" id="pagina2">Pagina2</a>
        ...
    </div>
    <div id="content">
        //os dados serão carregados aqui conforme seleção
    </div>
</body>

PAGINA1.PHP

<table>
    <thead>
        <th>Nome</th>
        <th>Idade</th>
        <th>Sexo</th>
    </thead>
    <tbody>
    <?php
    //inclua sua conexão com o banco
    include "conexão.php";
    $param = $_POST['param']; //recebendo o paramento postado
    $sql = "select nome, idade, sexo from usuarios where idade = '$param'"; // um exemplo de consulta utilizando o parametro postado
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc()){ 
        echo    "<tr> //escrevendo as linhas com os dados
                    <td>".$row['nome']."</td>
                    <td>".$row['idade']."</td>
                    <td>".$row['sexo']."</td>
                </tr>";
    }
    ?>
    </tbody>
</table>

Em resumo quando o usuário clicar no pagina1 uma tabela atualizada deve aparecer no content. A partir deste exemplo é possível imaginar o que é possível fazer utilizando o load.

7

Pode-se utilizar um switch. Digamos que você está na página index.php e queira ir para a página "A". O link deve ser:

<a href="?pag=A">Ir para a Página "A"</a>

Agora na página index.php deverá conter o recebimento do GET da seguinte maneira:

$pag = isset($_GET['pag'])?$_GET['pag']:"";

Ou seja, se a variável $_GET["pag"] foi setada no link, então a variável é o que está no link, caso contrário a variável é nula.

Logo em seguida tem de fazer os switches. Use da seguinte maneira:

switch($pag){   // Inicia o switch que vai carregar uma informação diferente a cada case

  case "A":

   echo "aqui vai o conteudo da página "";

  break;  // Indica que o case "A" terminou

  case "B":

   echo "aqui vai o conteudo da página "";

  break;  // Indica que o case "B" terminou

  case "C":

   echo "aqui vai o conteudo da página "";

  break;  // Indica que o case "C" terminou

} // Encerra o switch
2
  • Mesmo fazendo assim, haverão múltiplas requisições, sempre recarregando a página a cada clique nos links, então não responde a pergunta, que solicita explicitamente que não faça o carregamento da página novamente.
    – Woss
    Commented 24/10/2017 às 18:12
  • Olá Anderson. Obrigado pelo comentário. Ele disse TALVEZ o Ajax. Esse exemplo seria uma alternativa para manter todas as páginas num único arquivo, que é a premissa dele na pergunta, já que ele deseja um site diferente de ONE PAGE SCROLL WEBSITE. Portanto, ao meu ver, responde sim à pergunta. Commented 30/10/2017 às 6:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .