Embed Size (px)
Citation preview
ELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER
Haciendo uso de las tecnologías web para aplicaciones dinámicas y compatibles con múltiples dispositivos.
Alumno: Edgar Ramos Luna
Carrera: Tecnologías De la Información y Comunicación (Área Multimedia y Comercio Electrónico).
Universidad Tecnología de Coahuila.
1
ELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER
Haciendo uso de las tecnologías web para aplicaciones dinámicas y compatibles con múltiples dispositivos.
Alumno: Edgar Ramos Luna
Carrera: Tecnologías De la Información y Comunicación (Área Multimedia y Comercio Electrónico).
Universidad Tecnología de Coahuila.
2
Indice
ÍNDICEELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER..................1
Haciendo uso de las tecnologías web para aplicaciones dinámicas y
compatibles con múltiples dispositivos.................................................................1
ELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER..................2
Haciendo uso de las tecnologías web para aplicaciones dinámicas y
compatibles con múltiples dispositivos.................................................................2
Capitulo 1................................................................................................................4
1.1 Introducción...................................................................................................4
1.2 Análisis de la situación..................................................................................5
1.2.1 Antecedentes..............................................................................................5
1.2.2 Área de Oportunidad...................................................................................5
1.2.3 Evaluación Diagnostica...............................................................................5
1.3 Justificación...................................................................................................6
1.3.1.....................................................................................................................6
1.4 Objetivos........................................................................................................7
3
Capítulo 1
1.1 IntroducciónSe realizara la elaboración de un Web Blog dinámico con la finalidad de compartir
información de interés dentro de la empresa. A si como opiniones, sugerencias,
comentarios con la finalidad de compartir conocimiento que sea de utilidad para
los empleados de la empresa. Para ello se empleara el uso de las tecnologías
web mediante un FRAMEWORK llamado codeigniter el cual utiliza las tecnologías
de
HTML5 , PHP, CSS .
4
1.2 Análisis de la situación1.2.1 Antecedentes.
La empresa Click It Smart Technologies fue fundada hace 2 años por el ingeniero
en sistemas Alfonso Mauro Valdés Carrales con la finalidad de ofrecer soluciones
web para todos los negocios que necesiten publicidad web así como el desarrollo
de aplicaciones móviles y mantenimiento a servidores.
En la empresa se trabajara en el puesto de Web Developer (Desarrollador Web).
Aplicando los conocimientos adquiridos en la carrera.
1.2.2 Área de Oportunidad.Se detectó la falta de comunicación de información dentro de la empresa por lo
cual se propuso por la misma empresa elaborar un web blog interno.
1.2.3 Evaluación Diagnostica.Análisis F.O.D.A
5
Gran Cantidad de
Desarrolladores y
programadores.
Clientes Satisfechos
Accesibilidad.
Gran demanda de sitios web
Gran cantidad de clientes
solicitan los servicios de la
empresa
El Personal tiene dificultades en
cuanto el idioma inglés.
Falta personal mejor capacitado.
Falta de responsabilidad del
personal.
No es muy popular la empresa
Muchos competidores
Nuevas empresas ofreciendo
los mismos servicios
1.3 Justificación1.3.1En el tiempo transcurrido laborando dentro de la empresa se observó que no
contaba con un medio para el compartimiento de información, tutoriales, opiniones
de temas de interés etc. Para eso se propuso la elaboración de un Web Blog con
la finalidad de la interacción y apoyo entre los mismos empleados de la empresa
para poder ayudar a los nuevos empleados así como para reforzar el
conocimiento y promover el aprendizaje de nuevas tecnologías.
6
1.4 ObjetivosEl Objetivo de este proyecto es promover la comunicación y colaboración entre
los integrantes de la empresa para una mejor capacitación más fácil con ayuda
del mismo personal que cuenta con más experiencia esto beneficiara a los nuevos
empleados en capacitación.
1. Promover la comunicación de información de interés entre los mimos
miembros de la empresa.
2. Facilitar la capacitación del nuevo personal.
3. Ampliar la comunicación entre los empleados con el fin de aprender y
reforzar conocimientos.
CAPÍTULO 2
7
2.1 DESARROLLO DEL PROYECTO
2.1.1 METODOLOGÍA
Lluvia de ideas: Este apartado se dio para captar las ideas de cómo llevar acabo
la creación del proyecto y así poderlas plasmar de manera correcta y evitar las
correcciones lo menor posible.
Planteamiento de ideas: Ya modificada la presentación de ideas con los puntos
afijos de parte de los solicitantes.
Desarrollo: Cuando ya está listo la parte de las ideas se empezó con la parte del
desarrollo, este apartado se trató de creación y modificaciones del blog conforme
se fueran dando.
Correcciones: Este apartado se utilizó dado a las modificaciones por si no se
llegara a captar las ideas que se nos dieron a la hora de plantearnos sus ideas y
también se podrían realizar por las observaciones de nuestros supervisores.
Revisión: Ya terminado el desarrollo sigue la parte de revisar cada uno de los
puntos del proyecto realizado para así evitar errores a la hora de presentarlo.
8
9
2.1.2 MARCO TEÓRICO
El Blog como recurso de enseñanza y aprendizaje. ¿Qué es un Blog?
El término Blog (procedente de la palabra inglesa Web Blog), o Bitácora en
castellano, se refiere a sitios web actualizados periódicamente que recopilan
cronológicamente textos o artículos de uno o varios autores donde lo más reciente
aparece primero, con un uso o temática en particular, siempre conservando el
autor la libertad de dejar publicado lo que crea pertinente.(Conejo, 2006). Estos
artículos por lo general incluyen la posibilidad de que los visitantes del blog
añadan comentarios a los mismos, fomentando así la interacción entre el autor y
el lector.
Los blogs se asemejan a diarios en los que se van realizando anotaciones, que
permiten incluir textos, imágenes y sonido. Una característica que hace muy
peculiar su estructura es que los artículos añadidos aparecen publicados en una
secuencia inversa al orden de introducción.
Lo último introducido es lo primero que se muestra, uno de los principales motivos
de la rápida expansión de este medio de comunicación ha tenido es la relativa
facilidad que ofrecen para ser creados y manejados por cualquier usuario con
conocimientos básicos de Internet aún sin tener conocimientos sobre el diseño de
páginas web; esto ha hecho que todo aquel que quiera tener un espacio en la red
para expresarse, haya encontrado en los blogs un medio ideal para hacerlo
(Gallego Torres, 2006).
La facilidad de su manejo, la posibilidad de compartir textos, imágenes y sonido,
aunado a la interacción entre quien publica y los visitantes, convierte a los blogs
en un poderoso recurso educativo al alcance de docentes y estudiantes.
Elementos de un Blog.
En un blog los artículos aparecen ordenados cronológicamente, pero en sentido
inverso; lo más reciente es lo que se encuentra publicado en la parte superior de
la página, inmediatamente después del título del blog. Todos los artículos están
en una columna central y por lo general pueden leerse completos sin necesidad
de acceder a otro enlace. También se puede observar una columna lateral con
10
información extra; datos de identificación del autor, enlaces de interés a otras
páginas y blogs, acceso al archivo de lo anteriormente publicado, buscador, Chat,
álbum de fotos, libro de visitas, estadísticas; etc., todo lo que el autor considere
apropiado para la temática de la página o su gusto personal.
La estructura básica de los artículos es similar a una noticia de prensa, con titular,
fecha y cuerpo del artículo.
En la parte inferior del mismo se puede encontrar el nombre del autor, la
categoría, etiquetas (palabras claves) y un elemento que permite la interacción
entre el autor y el lector: los comentarios.
Al igual que el resto de las utilidades del blog, la manera en que se van a manejar
los comentarios puede ser definida por el autor.
Por eso encontramos blogs que tienen acceso libre para comentar incluso de
manera anónima y en otros hay que ser usuario registrado del servidor del
servicio de blog, También el autor tiene la opción de moderar los comentarios que
serán publicados, o solicitar una clave de confirmación para evitar comentarios
automáticos o spa.
Lo que no puede el autor es limitar el libre acceso a su blog una vez creado; de
ser esa su intención le estaría quitando la esencia al blog como medio de
comunicación.
Creación y publicación de un blog.
Para crear un blog se puede seleccionar entre los proveedores de servicio
gratuito. Según Gallego Torres (2006) los más populares son:
•Bleger (www.blogger.com)
•Bitácoras (www.bitacoras.com)
•Blog alía (www.blogalia.com)
•Blog (www.myblog.es) Hay que llenar un formato de registro, similar al que se
utiliza para abrir una cuenta de correo electrónico; una vez registrado el usuario
tiene la posibilidad de crear uno o más blogs, asignarle un título según la temática
el gusto del autor y acceder a las opciones del panel, desde el cual se administra
el blog: creación de artículos, selección y edición de la plantilla, moderación de
comentarios e incluso compartir el manejo del blog con otros autores.
11
Además de esas opciones básicas, cada proveedor de blogs ofrece servicios
particulares, una sección de ayuda y preguntas frecuentes, tutoriales e incluso un
blog sobre el uso del servicio. A continuación una breve descripción de las
opciones principales:
•Creación de artículos: Es la opción base de todo blog, permite publicar toda la
información que desee el autor, ya sea al instante o guardarlas como borrador
para publicación posterior. Además, toda información puede ser editada
posteriormente.
Se necesita de algunos conocimientos básicos de HTML para darle un uso más
profesional y personal y es lo que permite, además de textos, poder incorporar
imágenes y sonido; el autor puede apoyarse en la sección de ayuda del panel, la
cual ofrece ejemplos sencillos.
•Selección y edición de la plantilla: La plantilla es el aspecto visual-estético del
blog y la base a la que puede personalizar agregando cuantas opciones considere
necesarias según el uso que quiera dar leal blog (enlaces, álbum de fotos, libros
de visitas, estadísticas, etc.) En el panel de control el proveedor pone a
disposición algunos modelos de plantillas, los cuales requieren de conocimientos
básicos en HTML para ser modificadas; también puede consultarse la sección de
ayuda para lo referente a partes y códigos de la plantilla que pueden ser
modificados. La mayoría de los proveedores de servicio blog ofrecen la opción de
moderar los comentarios antes de ser publicados, el acceso de usuarios
registrados e incluso permitir comentarios anónimos si el administrador del blog lo
desea.
CodeIgniter
CodeIgniter, un FRAMEWORK PHP para el desarrollo rápido de aplicaciones
web.
Codeigniter es un FRAMEWORK para el desarrollo de aplicaciones en PHP que
utiliza el MVC. Permite a los programadores Web mejorar la forma de trabajar y
hacerlo a mayor velocidad.
Al igual que cualquier FRAMEWORK está pensado para gente que tiene un
dominio, al menos medio, del lenguaje de programación PHP. Siempre hay que
12
controlar PHP “a pelo” para empezar a trabajar de forma eficiente con este
FRAMEWORK (o cualquier otro).
¿Qué es MVC?
El Modelo Vista Controlador es un estilo de programación en el que la aplicación
está dividida en 3 capas:
Modelo: es dónde se procesa y obtienen los datos, la conexión con la bd.
Vista: presenta los datos en pantalla, es donde va el código HTML.
Controlador: controla los datos, dicho de forma rápida obtiene datos de un
modelo, los procesa, y se los pasa a la vista.
Ventajas de utilizar un FRAMEWORK como CodeIgniter
Las páginas se procesan más rapido, el núcleo de CodeIgniter es bastante ligero.
Es sencillo de instalar, basta con subir los archivos al ftp y tocar un archivo de
configuración para definir el acceso a la bd.
Reutilización de código, desarrollo ágil.
Existe abundante documentación en la red.
Facilidad de edición del código ya creado.
13
Facilidad para crear nuevos módulos, páginas o funcionalidades.
Acceso a librerías públicas y clases. Entre otras, hay librerías para el login,
paginador, calendarios, fechas,….
Estandarización del código. Fundamental cuando hay que tocar código hecho por
otra persona o cuando trabaja más de una persona en un mismo proyecto.
URLs amigables con SEO. Hoy en día creo que nadie duda de la importancia del
posicionamiento web.
Separación de la lógica y arquitectura de la web, el MVC.
CodeIgniter es bastante menos rígido que otros FRAMEWORKs. Define una
manera de trabajar, pero podemos seguirla o no(esto puede convertirse en un
inconveniente también)
Cualquier servidor que soporte PHP+MySQL sirve para CodeIgniter.
CodeIgniter se encuentra bajo una licencia open source, es código libre.
CodeIgniter usa una versión modificada del Patrón de Base de Datos Active
Record. Este patrón permite obtener, insertar y actualizar información in tu base
de datos con mínima codificación. Permite queries más seguras, ya que los
valores son escapadas automáticamente por el sistema.
HTML 5
HTML5 es la última versión de HTML. El término representa dos conceptos diferentes:
Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.
Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5 .
Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía a numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función.
Semántica: Permite describir con mayor precisión cual es su contenido. Conectividad: Permite comunicarse con el servidor de formas nuevas e
innovadoras.
14
Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.
Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.
Acceso al dispositivo: Proporciona APIs para el uso de varios compomentes internos de entrada y salida de nuestro dispositivo.
CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.
PHP
¿QUÉ ES PHP? ¿PARA QUÉ SIRVE PHP?
PHP es un lenguaje de código abierto muy popular, adecuado para desarrollo web y que puede ser incrustado en HTML. Es popular porque un gran número de páginas y portales web están creadas con PHP. Código abierto significa que es de uso libre y gratuito para todos los programadores que quieran usarlo. Incrustado en HTML significa que en un mismo archivo vamos a poder combinar código PHP con código HTML, siguiendo unas reglas.
PHP se utiliza para generar páginas web dinámicas. Recordar que llamamos página estática a aquella cuyos contenidos permanecen siempre igual, mientras que llamamos páginas dinámicas a aquellas cuyo contenido no es el mismo siempre. Por ejemplo, los contenidos pueden cambiar en base a los cambios que haya en una base de datos, de búsquedas o aportaciones de los usuarios, etc.
¿Cómo trabaja PHP? El lenguaje PHP se procesa en servidores, que son potentes ordenadores con un software y hardware especial. Cuando se escribe una dirección tipo http://www.aprenderaprogramar.com/index.PHP en un navegador web como Internet Explorer, Firefox o Chrome, ¿qué ocurre? Se envían los datos de la solicitud al servidor que los procesa, reúne los datos (por
15
eso decimos que es un proceso dinámico) y el servidor lo que devuelve es una página HTML como si fuera estática.
El esquema es: Petición de página web al servidor --> El servidor recibe la petición, reúne la información necesaria consultando a bases de datos o a otras páginas webs, otros servidores, etc --> El servidor responde enviando una página web “normal” (estática) pero cuya creación ha sido dinámica (realizando procesos de modo que la página web devuelta no siempre es igual).
En resumen:
Páginas estáticas: Petición --> Respuesta
Páginas dinámicas: Petición --> Procesado y preparación --> Respuesta
En un sitio dinámico, la información generalmente está contenida en una base de datos. Cada vez que mostramos la página, como por ejemplo una página de noticas, buscamos en la base de datos las últimas noticias que tenemos ingresadas para mostrar en el navegador del visitante. Ahora bien, ¿cómo se consigue que la página vaya mostrando noticias nuevas? Simplemente cargando las mismas en la base de datos, por ejemplo, a través de un formulario que rellena una persona y que una vez relleno cuando pulsa “Enviar” implica que lo que haya escrito se guarde en nuestra base de datos. De esta manera, cuando solicitamos la página web y el servidor consulte la base de datos, encontrará esta nueva información y mostrará nuestra página de forma distinta a como se veía anteriormente.
Por regla general este tipo de lenguaje suele ser utilizado para crear contenido dinámico y poder interactuar con el usuario.
16
2.1.3 Desarrollo
El proyecto fue plateado por mi superior con la finalidad de ampliar los
conocimientos de un FRAMEWORK llamado CODEIGNITER, partiendo de este
punto se solicitó el desarrollo de un blog o web blog desarrollado en este
FRAMEWORK para poder compartir información, tutoriales, tips, consejos etc.
Y así facilitar el aprendizaje y capacitación de una manera más eficiente, cabe a
mencionar el gran potencial de algunos empleados que cuentan con la
disponibilidad de poder compartir sus conocimientos para el beneficio común de la
empresa.
Para la realización de este proyecto fue de vital importancia la capacitación y el
aprendizaje de nuevas tecnologías y la aplicación de los previos conocimientos
adquiridos a lo largo de la carrera.
Se realizó una capacitación de 15 días para aprender el uso y manejo de este
software basado en el lenguaje de programación interpretado PHP.
En la primera parte de la capacitación se analizaron los requerimientos de
software para la instalación del FRAMEWORK, mi equipo de cómputo cumplía
con los requisitos necesarios después se comenzó con la instalación de dicho
software ya antes mencionado.
Al finalizar la instalación se continuó con el curso donde se vieron las
características y como utilizar la interfaz del mismo para la visualización de los
archivos que este software proporciona fue necesario instalar un editor de texto
17
llamado Sublime Text el cual proporciona un gestor de archivos de texto en
leguajes de programación.
La interfaz que este editor de texto nos proporciona se puede visualizar en el
anexo (1).
Una vez realizada la instalación del editor de texto se comenzó con el análisis de
los archivos proporcionados por el software empezando por la sección de
archivos de configuración del FRAMEWORK.
En el primer archivo de configuración llamado “Autoload” se observó lo siguiente:
18
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
Prototype:
$autoload['packages'] = array(APPPATH.'third_party', '/usr/local/shared');
$autoload['packages'] = array();
$autoload['libraries'] = array();
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url', 'file');
$autoload['helper'] = array('form', 'url', 'blog');
$autoload['config'] = array('config1', 'config2');
$autoload['config'] = array();
$autoload['language'] = array('lang1', 'lang2');
$autoload['language'] = array();
$autoload['model'] = array('model1', 'model2');
$autoload['model'] = array();
Se puede apreciar de manera más detallada en el anexo (2), el archivo de
configuración llamado “Autoload” se encuentran las librerías, modelos, funciones,
bases de datos, configuraciones etc.
Que se pueden utilizar de manera automatizada en toda la página con la finalidad
de ahorrar código y poder reutilizarlo de manera eficiente.
En el proyecto se empleó el uso de este archivo para cargar las bases de datos,
librerías y helpers para poder utilizar unas funciones requeridas por los modelos.
En la siguiente etapa del curso se analizó y comprendió el funcionamiento del
siguiente archivo de configuración llamado “config” su estructura resumida en las
configuraciones requeridas para proyecto es la siguiente:
En el archivo “Config” se realizan múltiples configuraciones para el FRAMEWORK
las requeridas para el proyecto fueron las anterior mente mencionadas se hace
uso de la configuración “Base_url” para asignar la dirección a la que estarán
asociadas cada una de los paginas que contendrá el blog, la línea de
configuración llamada “Index_page” es utilizada para establecer la dirección inicial
19
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
$config['base_url'] = 'http://localhost/blog/';
$config['index_page'] = 'index.php';
$config['language'] = 'english';
$config['charset'] = 'UTF-8';
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';
$config['log_date_format'] = 'Y-m-d H:i:s';
momento de hacer la carga del sitio web se re direccionara a una página llamada
“index.PHP” donde se muestra la primera vista del sitio llamada “menú” en esta
vista se muestra un formulario de registro y las entradas del blog ordenadas de la
más reciente a la última entrada publicada.
En la siguiente etapa del desarrollo del sitio web se implementó la conexión con
una base de datos creada en el gestor de bases de datos MYSQL.
Esta base de datos es llamada “blog” para realizar esta conexión se utilizo el
archivo llamado “Database” el cual nos es proporcionado por el FRAMEWORK.
Para realizar conexiones con bases de datos y poder implementar esta base de
datos en todo el sitio web sin necesidad de generar una conexión cada vez que
sea utilizada la estructura del archivo es la siguiente:
En la siguiente línea: “$db['default']['hostname'] = 'localhost';” .
Se define el hostname o dirección donde nuestra base de datos se encuentra
alojada en el proyecto se implementó de forma local utilizando un software para
crear un servidor local llamado “XAMPP”.
20
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
$active_group = 'default';
$active_record = TRUE;
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'blog';
$db['default']['dbdriver'] = 'mysql';
En la línea: “ $db['default']['username'] = 'root'; ” se define el nombre de usuario de
nuestra base de datos , el utilizado en el proyecto es el nombre se usuario “Root”
el cual nos es proporcionado por el software “XAMPP”.
En la línea: “ $db['default']['password'] = ''; ” se define la contraseña de usuario
pero no es obligatoria por lo cual fue dejada vacía.
En la línea: “ $db['default']['database'] = 'blog'; ” se define el nombre de la base
de datos de nuestro proyecto, la base de datos utilizada tiene el nombre de “Blog”.
En la linea: ” $db['default']['dbdriver'] = 'mysql'; ” se define el gestor de base de
datos el utilizado en el proyecto es el gestor “MYSQL”.
En la siguiente etapa se estuvo realizando la investigación de cómo utilizar el
archivo llamado “Route” el cual es utilizado para cargar controladores del sitio web
se requiere especificar un controlador predeterminado en este caso para el
proyecto el controlador predeterminado establecido es el controlador llamado
“Blog” que es el que contiene las funciones para llamar a las vistas con las que
cuenta el sitio web.
En la siguiente etapa del desarrollo del blog se investigó el funcionamiento de los
archivos llamados “CONTROLLERs” o controladores , un controlador es un
archivo en lenguaje PHP que nos permite realizar, controlar y utilizar funciones de
cualquier tipo , en los todos los CONTROLLERs , modelos y helpers en el
CONTROLLER se cargan cada una de las partes y páginas del sitio web
utilizando funciones sin necesidad de cargar archivos con extensiones lo cual es
una manera más fácil de implementar nuestro código para la visualización de
páginas de nuestro sitio web.
Se debe se debe escribir en mayúsculas la primera letra cuando se crea una
nueva clase, para su implementación en el proyecto se creó un archivo llamado
“Blog” el cual es el controlador principal de todo el blog donde se cargan todas las
21
vistas y son enlazadas las funciones con los modelos para la utilización de las
bases de datos a utilizar en el proyecto en primera instancia se realizó la
definición de una clase llamada “blog” la estructura es la siguiente:
La clase “Blog” como se visualiza en la línea: “class Blog extends
CI_CONTROLLER” con la extensión “ CI_CONTROLLER ” haciendo referencia a
que se está declarando un archivo CONTROLLER contendrá casi toda la
estructura del sitio web donde se definirán las funciones, librerías, helpers, y
views que se requieren para el desarrollo del sitio web.
Se definió una función constructora en la cual se incluyen los helpers y los
modelps que son utilizados por el sitio web en el sitio web se utiliza el helper
llamado “Form” el cual nos es proporcionado por el FRAMEWORK para hacer uso
de los formularios para enviar datos a nuestra base de datos.
22
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Blog extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->model('menu_model');
}
}
El modelo que el sitio utiliza es llamado “Menu_Model” en este modelo se
realizaran las consultas a la base de datos del proyecto.
Se creó el archivo llamado “Menu_Model” anteriormente mencionado para realizar
las consultas a la base de datos la estructura del modelo es la siguiente:
Como se había mencionado la función principal de este modelo es para la
interacción con la base de datos de nuestro proyecto en la siguiente línea: “class
Menu_model extends CI_Model ” se está definiendo una clase llamada
“Menu_Model” con la terminación CI_Model para hacer referencia a que se está
declarando un archivo tipo model.
En la línea: “ $this->load->database(); ” se está cargando el archivo “database”
con la palabra reservada “$this” este archivo anteriormente mencionado para
establecer una conexión con nuestra base de datos.
23
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Menu_model extends CI_Model
{
function __construct()
{
parent::__construct();
$this->load->database();
}
Continuando con la elaboración del CONTROLLER “Blog” se definió la siguiente
función:
La función llamada “ínicio” está siendo utilizada para llamar a la vista con el
nombre de “menú” en esta vista anterior mente mencionada se visualizara el
contenido inicial del sitio web.
Se comenzó con el desarrollo del archivo vista llamado “menú “en el cual se
visualiza el contenido inicial del sitio web además de ser la página principal del
sitio donde solamente se define el inicio del documento HTML 5 y el título del sitio
la estructura del archivo es la siguiente:
En este esta vista únicamente una estructura HTML 5 simple donde se define el
título del sitio web la función índex solo se está utilizando la vista menú.
24
function inicio()
{
$this->load->view('menu');
}
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
Se comenzó con el desarrollo del CONTROLLER llamado “menú” el cual contiene
el resto de la estructura de la página principal de nuestro sitio su estructura es la
siguiente:
25
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Menu extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->model('menu_model');
}
function index()
{
if($this->session->userdata('logged_in'))
{
redirect('blog/entradas');
}else{
$this->load->view('menu');
$this->load->view('header');
$this->load->view('registrarse');
}
}
}
?>
En este controlador se declara una función llamada índex, en esta función se
están cargando las vistas menú, header y registrarse.
En la vista “Menú” como anteriormente se había mencionado solo contiene el
inicio del archivo HTML 5 y el nombre del sitio web.
En la vista “Header” se están cargando los archivos de conexión con el CDN del
FRAMEWORK Bootsrap , Un archivo CSS y además del menú principal que será
visualizado en la página de inicio el cual contiene la siguiente estructura:
En el archivo “header” se visualiza la conexión con el CDN de Bootstrap y la
conexión con un archivo CSS para la estructura visual del sitio web además del
26
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?= base_url()
?>application/views/css/style.css">
<div class="col-md-12">
<div>
<img src="<?= base_url() ?>application/views/img/Blog.png">
</div>
<ul>
<li><a href="http://localhost/blog/index.php/menu">Registrate</a></li>
<!--<li><a href="http://localhost/blog/index.php/blog/nueva">Nueva
entrada</a></li>-->
<li><a href="http://localhost/blog/index.php/blog/entradasno">Ver
entradas</a></li>
</ul>
menú de la página principal que cuenta con 3 elementos el primero elemento y
pagina que se visualizara es el de “registrarse” el cual cuenta con un formulario de
registro.
Este formulario de registro es un requisito para poder realizar nuevas entradas en
sito.
En la vista registrar se encuentra el formulario de registro en cual cuenta con 4
cajas de texto en las cuales se ingresaran los datos de nombre de usuario, correo
electrónico, contraseña y la confirmación de la contraseña, el correo electrónico
ingresado será único y no se podrá registrar otro usuario con el mismo correo
electrónico se deberá utilizar uno diferente
27
<?php echo form_open('verifylogin'); ?>
<?php echo $this->session->flashdata('registrado'); ?>
<?php echo $this->session->flashdata('vacio'); ?>
<label for="username">Username:</label><br>
<input type="text" size="20" name="username" required="true" />
</input><br><br>
<label for="pass">Password:</label><br>
<input type="password" size="20" name="pass" required="true" />
</input><br><br>
<label for="pass">Email:</label><br>
<input type="email" size="20" name="email" required="true" />
</input><br><br>
<input type="submit" class="btn-lg" value="Login"/>
<br>
<br>
<a
href="http://localhost/Blog_actualizado_actualizado/index.php/menu"><input
type="button" class="btn-lg" value="Registrarse"></a>
</form>
<?= form_close() ?>
</div>
Si algún dato no es ingresado no se permitirá el registro del nuevo usuario se
tiene que ingresar a información requerida para que el usuario pueda registrarse.
Cada vez que un nuevo usuario se registra en el sitio sus datos son enviados a la
base de datos llamada “Blog” y se guardan en la tabla llamada “Usuarios” donde
se visualiza el “nombre de usuario”, “contraseña encriptada” y la cuenta de “correo
electrónico”.
Por cuestiones de seguridad la contraseña ingresada por el usuario es encriptada
y guardada en la base de datos, la encriptación de la contraseña es realizada en
el modelo “Menu_model” el fragmento de código para poder realizar la
encriptación es el siguiente:
La función “nuevousuario” está recibiendo datos mediante parámetros en las
variables “$data” y “$pass”.
La variable $data contiene el “nombre de usuario” y “correo electrónico del nuevo
usuario” y la variable $pass contiene la contraseña ingresada por el usuario.
Para realizar la encriptación de la contraseña se define una nueva variable
llamada “$password” en esta variable se utiliza un comando php llamado
“password_hash”, mediante este comando se realizará la encriptación de la
contraseña ingresada por el usuario y esta será guardada en la base de datos
28
<?php echo form_open('verifylogin'); ?>
<?php echo $this->session->flashdata('registrado'); ?>
<?php echo $this->session->flashdata('vacio'); ?>
<label for="username">Username:</label><br>
<input type="text" size="20" name="username" required="true" />
</input><br><br>
<label for="pass">Password:</label><br>
<input type="password" size="20" name="pass" required="true" />
</input><br><br>
<label for="pass">Email:</label><br>
<input type="email" size="20" name="email" required="true" />
</input><br><br>
<input type="submit" class="btn-lg" value="Login"/>
<br>
<br>
<a
href="http://localhost/Blog_actualizado_actualizado/index.php/menu"><input
type="button" class="btn-lg" value="Registrarse"></a>
</form>
<?= form_close() ?>
</div>
function nuevousuario($data, $pass)
{
$pass = $pass['pass'];
$password = password_hash($pass, PASSWORD_BCRYPT);
Una vez el usuario se registre inmediatamente podrá disponer de todas las
funcionalidades del sitio web.
El siguiente elemento del menú inicial es el de “Ver entradas”, este elemento del
menú está dirigido a otra vista llamada contenido donde se visualizan todo el
contenido que ha sido publicado por usuarios en el sitio web, su estructura es la
siguiente:
29
<?php echo $this->session->flashdata('correcto'); ?>
<?php echo $this->session->flashdata('bienvenido');?>
<?php
if (empty($entradas)):
echo "<center><h1>no hay entradas publicadas</h1></center>";
else:
foreach ($entradas->result() as $entrada) {
?>
<div class="post-preview">
<a href="<?= base_url('blog/entradas/' . $entrada->id) ?>">
<h2 class="post-title" id="titulo">
<?= $entrada->titulo; ?>
</h2>
</a>
<div id="contenidop">
<textarea disabled><?= $entrada->contenido; ?></textarea>
</div>
<p class="post-meta">Posted by <a href="<?=
base_url('blog/post_by_user/' . $entrada->id_autor) ?>"><?= $entrada-
>autor; ?></a> <?= $entrada->fecha; ?></p>
</div>
<?php
}
endif;
?>
En la vista llamada contenido de la página entradas se agregó código PHP para
poder visualizar las entradas que han sido publicadas por otros usuarios el
contendió de todas las entradas se encuentra en la base de datos llamada “Blog”
dentro de una tabla llamada “Entradas”.
En la línea: '<a href="<?= base_url('blog/entradas/' . $entrada->id) ?>">'. se está
utilizando código PHP para recibir datos del campo de nuestra tabla “entradas”
llamado “titulo”.
En la línea: “<textarea disabled><?= $entrada->contenido;?></textarea> ” se
muestra el contenido que tiene la entrada que está siendo recibido de la base de
datos de la tabla “Entradas” del campo “contenido”.
En la línea :” <p class="post-meta">Posted by <?= $entrada->autor; ?></a> <?=
$entrada->fecha; ?></p>” se visualizara el autor de la entrada y la fecha, además
se podrán visualizar todas las entradas realizadas por un autor mediante la línea
de código “<a href="<?= base_url('blog/post_by_user/' . $entrada->id_autor) ?>">”
esta línea genera un link asociado al nombre del usuario y a todo el contenido que
este usuario ha publicado en el sitio.
En el último elemento del menú inicial del modo usuario anónimo llamado “Iniciar
sesión”, está dirigido a otra vista llamada “Veryfilogin” esta vista contiene un
formulario de acceso para que cuando el usuario anónimo opte registrarse en el
sitio web para ser un usuario privilegiado pueda ingresar sus datos y acceder a
todo el contenido del sitio web.
Para poder iniciar sesión en el sitio web se debe ir a la ir al apartado llamado
“Login” y en la vista de login se visualiza un formulario de acceso los datos
requeridos son el “Nombre de Usuario” ,”Correo electrónico” ,“Contraseña”
después de llenar los campos requeridos se debe pulsar sobre el botón “Login”
después de eso se enviaran los datos y se verificara en la base de datos si el
usuario existe si el usuario existe se redirigirá automáticamente a la vista de
30
entradas pero ahora será un usuario con privilegios y se visualizara un nuevo
menú que se encuentra localizado en una vista llamada “header”.
La página principal del sitio web con todos los elementos anteriormente
mencionados se puede encontrar en el anexo (3).
Se continuó con el desarrollo del CONTROLLER “Blog” en el cual se definió la
segunda función en la cual se carga las vistas llamadas “nueva” y “registrado” la
estructura de la función es la siguiente:
31
function nueva()
{
if ($this->session->userdata('logged_in')) {
$session_data = $this->session->userdata('logged_in');
$data['id_user'] = $session_data['id_user'];
$data['username'] = $session_data['username'];
$dato['email'] = $session_data['email'];
$this->load->view('entradas', $data);
$this->load->view('header');
$this->load->view('nueva', $dato);
} else {
$this->session->set_flashdata('restringir', '<div align="center"
class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
<strong>No tienes permiso para acceder a esto! Ø </strong>
</div>');
redirect('blog/entradasno');
}
}
En la función “nueva” se cargan 3 vistas además para que el usuario tenga
acceso a estas páginas es necesario que sea un usuario registrado para poder
realizar nuevas publicaciones en el sitio, para ello se creó una condición que es la
siguiente: “if ($this->session->userdata('logged_in'))” la cual se encarga de
verificar que se está iniciando una nueva sesión y si esto se cumple se cargaran
las vistas para que el usuario pueda visualizar las páginas y publicar contenido.
En la línea “$this->load->view('registrado');” se está cargando la vista llamada
“registrado” la cual contiene el menú que contiene todas las páginas y su total
funcionalidad para que el usuario tenga acceso a todo el contenido con todos los
privilegios para realizar nuevas publicaciones y comentarios sobre las
publicaciones ya existentes , la estructura del archivo es la siguiente:
32
<div class="col-md-12">
<div>
<img src="<?= base_url() ?>application/views/img/Blog.png">
</div>
<ul>
<li><a href="http://localhost/blog/index.php/blog/nueva">Nueva
entrada</a></li>
<li><a href="http://localhost/blog/index.php/blog/entradas">Ver
entradas</a></li>
</ul>
<div id="login2">
<h2 style="color:#fff;">Bienvenido <?php echo $username; ?></h2>
<h6><a href="logout">Logout</a></h6>
</div>
</div>
En esta vista se encuentra la nueva estructura del menú que solo se puede
visualizar si el usuario accede con su cuenta en la página de login, las diferencias
del menú inicial y este menú son que el usuario ya no únicamente tiene acceso a
las publicaciones realizadas sino que también puede realizar nuevas
publicaciones y comentarios sobre las publicaciones de otros usuarios el menú
cuenta con los siguientes elementos: “Nueva entrada” en la opción nueva entrada
se puede acceder a una nueva página donde el usuario puede escribir una nueva
publicación o entrada que posteriormente de ser publicada podrá ser visualizada
en la página “Ver entradas” y el último elemento de este menú es el “Lougout”
este elemento tiene la funcionalidad de cerrar la sesión del usuario actual y al
momento de cerrar la sesión es ejecutado un comando llamado “$this->session-
>unset_userdata('logged_in');” y se redirige de nueva cuenta a la página inicial del
modo usuario anónimo sin privilegios. En la página “Nueva entrada” se realiza la
inserción de datos a la base de datos del proyecto en la tabla llamada “Nuevas
entradas” la estructura de la página entradas es la siguiente:
33
<?= form_open('blog/recibirdatos')?>
<div id="titulo">
<h1>Titulo:<?= form_input($titulo) ?></h1>
</div>
<div id="contenido">
<h1>Contenido:<br>
<?= form_textarea($contenido)?>
</h1>
</div>
<div id="autor">
<h1>Autor:
<input type="text" name="autor" value="<?php echo $username; ?>"></h1>
</div>
<input class="btn-lg"type="submit" value="Publicar" ></input>
</div>
<?= form_close()?>
En la estructura del archivo “Nueva entrada” se creó un formulario para la
publicación de nuevas publicaciones o entradas en el sitio web los datos que son
ingresados por el usuario con privilegios son guardados en la base de datos del
proyecto y se pueden visualizar en la página “Ver entradas”, los datos de la
publicación enviados por el usuario son procesados por una función del
CONTROLLER “Blog” y son enviados al model “Menu_model” para ser guardados
en la base de datos, la función encargada de procesar los datos enviados por el
usuario tiene el nombre de “Recibir datos” y se encuentra definida en el
CONTROLLER “Blog”, la estructura de la función es la siguiente:
34
function recibirdatos()
{
$data = array(
'titulo' => $this->input->post('titulo',TRUE),
'contenido' => $this->input->post('contenido',TRUE),
'autor' => $this->input->post('autor',TRUE),
'fecha' => date('Y-m-d H:i:s',TRUE)
);
$this->menu_model->nuevaEntrada($data);
$this->session->set_flashdata('correcto', '<div align="center" class="alert
alert-success">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
<strong>La entrada se ah publicado correctamenre</strong>
</div>');
redirect('blog/entradas', 'refresh');
}
En esta función se están recibiendo los datos que el usuario ha enviado en la
publicación, estos datos son recibidos y almacenados en un arreglo asociativo
llamado “data” con las siguientes variables: “titulo” en esta variable se almacena el
título de la nueva publicación, “contenido” en la variable llamada contenido es
donde se almacena todo el contenido de la entrada realizada por el usuario,
“autor” en la variable autor se almacena el nombre del usuario autor de la
publicación, “fecha” en la variable fecha se almacena la fecha y hora de la
publicación.
Todos estos datos son enviados al modelo “Menu_model” donde son procesados
y guardados en la base de datos del proyecto dentro de una tabla llamada
“Entradas” dentro de esta tabla se encuentran los campos: “título, contenido, autor
y fecha” todos estos datos son guardados en la base de datos por una función
llamada “nuevaEntrada” y su estructura es la siguiente:
En esta función se está recibiendo la variable “data” que contiene todos los datos
que el usuario a enviado en la publicación el modelo se encarga de hacer la
inserción en la base de datos utilizando el comando “insert” dentro de la tabla
llamada “entradas” donde se guardan los datos que el usuario envió para
después ser visualizados en el sitio web.
35
function nuevaEntrada($data)
{
$this->db->insert('entradas', array(
'titulo' => $data['titulo'],
'contenido' => $data['contenido'],
'autor' => $data['autor'],
'fecha' => $data['fecha']
));
}
En la página llamada “Ver entradas” se visualizara todo el contenido que se
encuentra en la tabla “entradas” de la base de datos del proyecto la estructura del
archivo es la siguiente:
En la línea de código: “<?php echo $this->session->flashdata('correcto'); ?>” se
está utilizando un comando PHP para indicar cuando una publicación se ha
36
<title>Entradas</title>
<div class="col-md-10">
<?php echo $this->session->flashdata('correcto'); ?>
<?php
foreach ($entradas->result() as $entrada) { ?>
<div id="titulo">
<h1><a href="<?= base_url('index.php/blog/entradas/'.$entrada->id)?
>"><?= $entrada->titulo;?></a></h1>
</div>
<div id="contenidop">
<textarea disabled><?php echo $entrada->contenido;?></textarea>
</div>
<div id="fecha">
<h1><?= $entrada->fecha;?></h1>
</div>
<hr>
<div id="autor">
<h5>By:<?= $entrada->autor;?></h5>
</div>
<?php }
?>
realizado de manera exitosa de ser así se muestra el siguiente mensaje “La
entrada se ha publicado correctamente” este comando se encuentra dentro de la
función recibir datos del CONTROLLER “Blog”.
En la línea: “foreach ($entradas->result() as $entrada) { ?>” se utiliza el comando
“FOREACH” para mostrar todas las entradas que se encuentran en la base de
datos.
En la línea:” <h1><a href="<?= base_url('index.php/blog/entradas/'.$entrada->id)?
>"><?= $entrada->titulo;?></a></h1>” se utilizan 2 comandos PHP uno llamado
“base_url('index.php/blog/entradas/)” esta línea de comando nos permitirá
acceder a cada una de las publicaciones o entradas que están actualmente en la
base de datos mediante un id que cada una de las publicaciones tiene en la base
de datos, el siguiente comando “$entrada->id)?>” se encarga de mostrar el título
de todas las publicaciones que actualmente se encuentran en la base de datos
además de permitirnos acceder a las entradas individuales con la ayuda del
comando “base_url('index.php/blog/entradas/ '.$entrada->id)”. Dentro de
cada entrada individual se encuentra una caja de comentarios para que los
usuarios registrados puedan realizar comentarios sobre las entradas que se
encuentran en el sitio.
Al momento de realizar un comentario se notificara al usuario autor de la entrada
por correo electrónico los datos que este correo electrónico contendrá serán:
“Titulo de la entrada”, “Comentario” y “Autor del comentario”.
Para realizar el envió de correos electrónicos al momento de realizar un
comentario se implementó una e uso de una API llamada MAILGUN.
Para poder utilizar esta API fue necesario crear una cuenta en
https://www.mailgun.com ,una vez creada la cuenta se creó un dominio
SANDBOX para poder asociar a donde serán enviados los correos utilizando
también una API KEY generada automáticamente después de crear la cuenta de
usuario ,después instalar un manejador de dependencias llamado COMPOSER
37
después de instalar COMPOSER se tuvo que descargar una librería llamada
MAILGUN.
En la siguiente línea se muestra el uso de un HELPER llamado “Enviar_helper” su
estructura es la siguiente:
Para poder enviar los datos se tiene que hacer uso de una variable llamada
“$mgClient” la cual contiene la API KEY de la cuenta de MAILGUN, también es
necesario el uso de la variable llamada “$domain” la cual contiene el dominio
SANDBOX al cual son dirigidos los emails para poder ser enviados a los usuarios.
38
<?php
function maile($autor, $text, $email_comentario,$email_autor)
{
try{
# Instantiate the client.
$mgClient = new Mailgun('key-6e1864e0bbbf6e20133372ec5d0e8787');
$domain = "sandbox41165099550640ebad5da087fb66be92.mailgun.org";
# Make the call to the client.
$result = $mgClient->sendMessage($domain, array(
'from' =>$email_comentario,
'to' => $email_autor,
'subject' => 'Titulo de la entrada:' . ' ' . $subject,
'text' => 'Autor:' . ' ' . $autor . '
' . 'Comentario:' . $text
));
}
catch(Exception $e){
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
El helper “Envial_helper” se reciben los datos que serán enviados por correo
electrónico y son recibidos mediante parámetros por la función “maile” en las
variables: “($subject, $autor, $text, $email_comentario,$email_autor)”.
Estas variables contendrán los datos del usuario autor de la entrada, el usuario
autor del comentario, el título de la entrada que fue comentada y el comentario
que se realizó en esta entrada estos datos son enviados mediante las siguientes
líneas:
39
$result = $mgClient->sendMessage($domain, array(
'from' =>$email_comentario,
'to' => $email_autor,
'subject' => 'Titulo de la entrada:' . ' ' . $subject,
'text' => 'Autor:' . ' ' . $autor . '
' . 'Comentario:' . $text
));
Bibliografías:
https://sites.google.com/site/psiccabrejos/3---marco-teorico
http://codeigniter.com/
https://developer.mozilla.org/es/docs/HTML/HTML5
http://aprenderaprogramar.com/index.PHP?
option=com_content&view=article&id=492:ique-es-PHP-y-ipara-que-sirve-un-
potente-lenguaje-de-programacion-para-crear-paginas-web-
cu00803b&catid=70:tutorial-basico-programador-web-PHP-desde-
cero&Itemid=193/
http://mantenimientosdeunapc.blogspot.mx/2011/11/que-es-xampp-y-para-que-
sirve.html
http://www.desarrolloweb.com/articulos/CONTROLLERs-codeigniter.html
http://blogandweb.com/PHP/code-igniter-vistas/
http://www.desarrolloweb.com/articulos/modelos-codeIgniter.html
https://alanchavez.com/si-eres-desarrollador-web-debes-utilizar-bootstrap-y-punto/
http://www.desarrolloweb.com/articulos/helpers-codeigniter.html
40
