Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Como configurar mi server para tener el Api-REST separado del Front-End

preguntó
Web
2989 Vistas
2 Respuestas
solucionada

Buenas Tardes, tengo mi server en un hosting de apache con php y quiero tener programado un api-rest por ejemplo:
www.misitio.com/api -> aqui todo lo relacionado con el api
www.misitio.com/(cualquier otra cosa) -> lo carga el sitio sin usar codeigniter, solamente con html,css y Angular
quiero que quede de esa forma, que el php solo se usa en el api y en más ningun lugar de tal manera que si en un futuro cambiase el api por nodejs no tenga que cambiarle nada al front-end. Creo de que debo configurar el .htacces pero no se como hacer las direcciones de tal manera que el api con codeigniter no se meta con las cosas que no son para el api y que el front-end sea solamente con angular,html y css3 si usar ni un codigo de php.
Saludos Dairon

por dairon (17.120 puntos) en Web

2 Respuestas

3votos

white Puntos75880

Hace un tiempo trabaje con Codeigniter y cuando se me dió por hacer un REST server hubo varias cosas que modificar en codeigniter, actualmente estoy con un proyecto similar al tuyo trabajando con angular.js, laravel y tecnologías extras, laravel me pareció muy flexible para ser un REST server lo contrario a lo que me pareció Codeigniter.

Vamos a ver, si te sirve de algo te diré como estructuré mi aplicación, como tu usas codeigniter intentaré acoplarlo a la estructura que tengo yo con laravel.

la estructura puede ser esta:

api/
    application/
        controllers/
            User.php
    system/
   .htaccess
    index.php
assets/
    css/
        app.css
    js/
        controllers/
            main.js
            home.js
        directives/
        filters/
        services/
            user.js
    app.module.js
    app.config.js
    app.routes.js
index.html

el .htaccess en /api/application contendrá esto:

RewriteEngine on
RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ index.php/$1 [L]

ahora puedes acceder a /api/ sin problema.

Ahora vamos a crear nuestro layout. /index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <script>document.write('<base href="http://mipagina.com/" />')</script>
    <meta charset="UTF-8">
    <title>Angular.js & Codeigniter ♥</title>
    <!-- le css -->
    <link rel="stylesheet" href="./assets/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/app.css">
</head>
    <body>
        <div id="main" ng-controller="MainController as mainController">
            <div ng-view></div>
        </div>
    </body>

    <!-- le scripts -->
    <script type="text/javascript" src="./assets/vendor/angular/angular.min.js"></script>
    <script type="text/javascript" src="./assets/vendor/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="./assets/js/app.module.js"></script>
    <script type="text/javascript" src="./assets/js/app.config.js"></script>
    <script type="text/javascript" src="./assets/js/app.routes.js"></script>
    <script type="text/javascript" src="./assets/js/services/user.js"></script>
    <script type="text/javascript" src="./assets/js/controllers/main.js"></script>
    <script type="text/javascript" src="./assets/js/controllers/home.js"></script>
</html>

esta linea: <script>document.write('<base href="http://mipagina.com/" />')</script> ayuda a angular a definir la ruta base para los templates y las rutas, necesario cuando activas el modo html5 en las rutas.

definamos nuestra aplicacion, la configuracion, las rutas y el modulo.

/assets/js/app.module.js:

(function() {
    'use strict';

    angular.module('app', [
        /* ng modules */
        'ngRoute'
        /* vendor modules */
    ]);

}());

/assets/js/app.routes.js:

(function() {
    'use strict';

    angular
        .module('app')
        .constant('routes', getRoutes())
        .config(['$routeProvider', 'routes', routesConfig]);

    function routesConfig($routeProvider, routes) {

        angular.forEach(routes, function(config, route) {
            $routeProvider.when(route, config);
        });

        $routeProvider.otherwise('/');
    }

    function getRoutes () {
        return {
            '/' : {
                templateUrl: 'assets/partials/home.html',
                controller: 'HomeController',
                controllerAs: 'home'
            }
        };
    }

}());

creemos un controlador en nuestro servidor, será por ejemplo Users.php:

<?php defined('BASEPATH') OR exit('No direct script access allowed');

require_once(APPPATH . 'libraries/REST_Controller.php');

class Users extends REST_Controller {

    public function index_get()
    {

    }

    public function all_get()
    {
        $this->response(array(
            array('id' => 1, 'username' => 'white'),
            array('id' => 2, 'username' => 'demo'),
            array('id' => 3, 'username' => 'john doe')
        ));
    }
}

Ahora al acceder a /api/users/all podrás ver la respuesta en json, o en xml, en angular se enviara la cabecera: Accept: application/json por lo que recibiremos la respuesta en json.

Ahora para usar el modo html 5 con angular ( urls amigables ) crearas un .htaccess en la raiz con este contenido:

Options -Indexes
RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

si deseas ver el proyecto completo de ejemplo, ya que en este sitio los caracteres son limitados para las respuestas, te dejo el link de descarga:

https://www.dropbox.com/s/kxvyt6i5txrsvax/codeigniterInLovingWithAngularjs.tar.gz?dl=0

el proyecto lo tendrías que ver asi:

enter image description here

por white (75.880 puntos)
seleccionada por

1voto

dairon comentado

white realmente esa respuesta tuya me ha dejado sin palabras, cuanto tiempo me tomará aprender tanto jajaja, muchas gracias mano.
Saludos desde Cuba

por dairon (17.120 puntos)

0voto

dairon comentado

White, exelente el ejemplo que compartiste en dropbox ya me funciona.
Gracias

por dairon (17.120 puntos)

2votos

Leonardo-Tadei Puntos227320

Hola Dairón,

para hacer lo que decís no te hace falta ninguna configuración del server ni htaccess

Bastaría con que en el espacio público del server crees un directorio llamado /api y pongas ahí todo el código para implementar las peticiones y respuestas que te hagan falta.

Desde el punto de vista de la programación, lo único que tenés que hacer es que el código dentro de /api no acceda a ningún código fuera de ese directorio para funcionar, de esta manera lográs que sea independiente del resto y podés cambiarlo sin afectar a las otras partes.

Via htaccess no se puede determinar que la llamada sea para la API o no sin modificar el código de las aplicaciones (por ejemplo pasando un parámetro $_GET extra que sirva para distinguirlas). Si tenés más de una API, ponelas en directorios diferentes. API es un concepto, no es que obligatoriamente deba llamarse api el directorio que la aloja.

Saludos cordiales.

por Leonardo-Tadei (227.320 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta