Estructura de la Aplicación Web QR

Distribución de archivos para el desarrollo del Lector QR

Publicado en Lector de Códigos QR 2018-03-18 04:11:18

Estructura de la Aplicación Web QR

Sistema de Archivos Web Lector QR

Diseño Web HTML QR

Resumen: El sistema de archivos y directorios para el desarrollo de la Aplicación Web, empleando la programación modular.

Vamos ver la disposición de archivos y directorios para el desarrollo de la aplicación web 

qr-apptiva

  • +app
    • +auth
    • +clases
  • +public
    • +css
    • +img
    • +js
  • +views
    • +paginas
    • +partials
  • .htaccess
  • config.php
  • index.php

El directorio qr-apptiva tiene como archivo principal a index.php cuyo contenido es:

index.php

<?php
session_start();
require "config.php";
require "views/partials/header.php";
require "app/clases/class.mysql.php";
$user=new Usuario();
if (isset($_SESSION["administrador"])):	
	if (!isset($_REQUEST['page'])):
		require "views/paginas/index.php"; 
	else:
		require "views/paginas/".$_REQUEST['page'].".php";
	endif;	
elseif (isset($_SESSION["visitador"])):	
	if (!isset($_REQUEST['page'])):
		require "views/paginas/index.php"; 
	else:
		require "views/paginas/".$_REQUEST['page'].".php";
	endif;
else:
	require "views/paginas/login.php";
endif;
require "views/partials/footer.php";
$user=null;
?>

El archivo de configuración contiene la url de todo el sistema, asi como funciones que iremos agregando conforme avance el desarrollo.

Código de config.php:

<?php
define ("urlsite","http://localhost/qr-apptiva/");
function urls_amigables($url) { 
      // Tranformamos todo a minusculas 
      $url = strtolower($url);
      //Rememplazamos caracteres especiales latinos 
      $find = array('á', 'é', 'í', 'ó', 'ú', 'ñ'); 
      $repl = array('a', 'e', 'i', 'o', 'u', 'n'); 
      $url = str_replace ($find, $repl, $url); 
      // Añadimos los guiones 
      $find = array(' ', '&', '\r\n', '\n', '+');
      $url = str_replace ($find, '-', $url); 
      // Eliminamos y Reemplazamos otros carácteres especiales 
      $find = array('/[^a-z0-9\-<>]/', '/[\-]+/', '/<[^>]*>/'); 
      $repl = array('', '-', ''); 
      $url = preg_replace ($find, $repl, $url); 
      return $url; 
}
function dd($str){
  echo "<pre>";
  print_r($str);
  echo "</pre>";
}
function mensaje($texto,$tipo=1){
  $display='<div class="col-sm-12"><div class="alert alert-info" role="alert">'.$texto.'</div></div>';
  return $display;
}

 

El archivo header.php que se encuentra en el directorio views/partials/header.php, tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
    <base href="<?php echo urlsite ?>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="icon" href="img/favicon.png">    
    <title>QR-Apptiva</title>
    <meta name="description" content="Desarrollo LECTOR QR WEB-MÓVIL"/>
    <meta name="keywords" content="QR, Lector, PHP, aplicacion, web">   
    <link href="<?php echo urlsite ?>public/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo urlsite ?>public/css/qr-apptiva.css" rel="stylesheet">
    <script src="<?php echo urlsite ?>public/js/jquery.js"></script>
    <script src="<?php echo urlsite ?>public/js/bootstrap.min.js"></script>        
    <script src="<?php echo urlsite ?>public/js/ajaxupload.js"></script>
    <script src="<?php echo urlsite ?>public/js/qr-apptiva.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">            
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<?php echo urlsite ?>" > Lector QR</a>
        </div>
        <?php if(isset($_SESSION['administrador'])): ?>
            <div class="collapse navbar-collapse navbar-ex1-collapse">                              
                <ul class="nav navbar-nav">                          
                    <li><a href="/usuarios">Usuarios</a></li>                
                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="<?php echo urlsite ?>">INICIO</a></li>
                    <li><a href="app/auth/logout.php" >Salir</a></li>
                </ul>
            </div>
        <?php endif ?>        
    </div>    
</nav>

Claramente vemos que trae los css y js necesarios para esta aplicación ademas de controlar la vistas para el usuario logueado y son loguear.

Nuestro archivo footer.php ubicado en el mismo directorio de header.php  tiene la siguiente estructura:

</body>
</html>

También debemos configurar nuestro archivo htaccess para obtener url amigables modificandolo de la siguiente manera :

.htaccess

Options +FollowSymlinks
RewriteEngine On
RewriteBase /qr/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
<IfModule mod_rewrite.c>
	RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/?$ index.php/?page=$1&id=$2	
	RewriteRule ^([a-zA-Z0-9_-]+)/?$ index.php?page=$1
	ErrorDocument 404 /404.html
	RewriteCond %{HTTP_HOST} ^qr [NC]
	RewriteRule ^(.*)$ http://localhost/qr/$1 [R=301,L]
</IfModule>

Este archivo esta configurado por ahora con un servidor local, estamos usando XAMPP, por ese motivo figura en http://localhost/qr/  como la url principal.

Redacción:| Artículo leído: 315 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de Lector de Códigos QR