ELABORACION DE UN BLOG EN EL FRAMEWORK

CODEIGNITER

Haciendo uso de las tecnologas web para aplicaciones

dinmicas y compatibles con mltiples dispositivos.

Alumno: Edgar Ramos Luna

Carrera: Tecnologas De la Informacin y Comunicacin (rea Multimedia y
Comercio Electrnico).
Universidad Tecnologa de Coahuila.

1
 ELABORACION DE UN BLOG EN EL FRAMEWORK
CODEIGNITER

Haciendo uso de las tecnologas web para aplicaciones

dinmicas y compatibles con mltiples dispositivos.

Alumno: Edgar Ramos Luna

Carrera: Tecnologas De la Informacin y Comunicacin (rea Multimedia y
Comercio Electrnico).
Universidad Tecnologa de Coahuila.

2
 Indice

NDICE
ELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER..................1

Haciendo uso de las tecnologas web para aplicaciones dinmicas y

compatibles con mltiples dispositivos..................................................................1

ELABORACION DE UN BLOG EN EL FRAMEWORK CODEIGNITER..................2

Haciendo uso de las tecnologas web para aplicaciones dinmicas y

compatibles con mltiples dispositivos..................................................................2

Capitulo 1..................................................................................................................4

1.1 Introduccin.....................................................................................................4

1.2 Anlisis de la situacin....................................................................................5

1.2.1 Antecedentes................................................................................................5

1.2.2 rea de Oportunidad....................................................................................5

1.2.3 Evaluacin Diagnostica................................................................................5

1.3 Justificacin.....................................................................................................6

1.3.1.......................................................................................................................6

1.4 Objetivos.........................................................................................................7

3
 Captulo 1

1.1 Introduccin
Se realizara la elaboracin de un Web Blog dinmico con la finalidad de compartir
informacin de inters 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 tecnologas
web mediante un FRAMEWORK llamado codeigniter el cual utiliza las tecnologas
de
HTML5 , PHP, CSS .

4
 1.2 Anlisis de la situacin
1.2.1 Antecedentes.
La empresa Click It Smart Technologies fue fundada hace 2 aos por el ingeniero
en sistemas Alfonso Mauro Valds Carrales con la finalidad de ofrecer soluciones
web para todos los negocios que necesiten publicidad web as como el desarrollo
de aplicaciones mviles 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 comunicacin de informacin dentro de la empresa por lo
cual se propuso por la misma empresa elaborar un web blog interno.
1.2.3 Evaluacin Diagnostica.
Anlisis F.O.D.A

Gran Cantidad de
El Personal tiene dificultades en
Desarrolladores y
cuanto el idioma ingls.
programadores. Falta personal mejor capacitado.
Clientes Satisfechos Falta de responsabilidad del
Accesibilidad.
personal.
No es muy popular la empresa

Muchos competidores
Gran demanda de sitios web Nuevas empresas ofreciendo
Gran cantidad de clientes
los mismos servicios
solicitan los servicios de la
empresa

5
 1.3 Justificacin
1.3.1
En el tiempo transcurrido laborando dentro de la empresa se observ que no
contaba con un medio para el compartimiento de informacin, tutoriales, opiniones
de temas de inters etc. Para eso se propuso la elaboracin de un Web Blog con
la finalidad de la interaccin 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 tecnologas.

1.4 Objetivos
El Objetivo de este proyecto es promover la comunicacin y colaboracin entre
los integrantes de la empresa para una mejor capacitacin ms fcil con ayuda
del mismo personal que cuenta con ms experiencia esto beneficiara a los nuevos
empleados en capacitacin.

6
 1. Promover la comunicacin de informacin de inters entre los mimos
miembros de la empresa.
2. Facilitar la capacitacin del nuevo personal.
3. Ampliar la comunicacin entre los empleados con el fin de aprender y
reforzar conocimientos.

CAPTULO 2

2.1 DESARROLLO DEL PROYECTO

2.1.1 METODOLOGA

7
Lluvia de ideas: Este apartado se dio para captar las ideas de cmo llevar acabo
la creacin del proyecto y as poderlas plasmar de manera correcta y evitar las
correcciones lo menor posible.

Planteamiento de ideas: Ya modificada la presentacin 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 creacin 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
tambin se podran realizar por las observaciones de nuestros supervisores.

Revisin: 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 TERICO

El Blog como recurso de enseanza y aprendizaje. Qu es un Blog?

El trmino Blog (procedente de la palabra inglesa Web Blog), o Bitcora en
castellano, se refiere a sitios web actualizados peridicamente que recopilan
cronolgicamente textos o artculos de uno o varios autores donde lo ms reciente
aparece primero, con un uso o temtica en particular, siempre conservando el
autor la libertad de dejar publicado lo que crea pertinente.(Conejo, 2006). Estos
artculos por lo general incluyen la posibilidad de que los visitantes del blog
aadan comentarios a los mismos, fomentando as la interaccin entre el autor y
el lector.
Los blogs se asemejan a diarios en los que se van realizando anotaciones, que
permiten incluir textos, imgenes y sonido. Una caracterstica que hace muy
peculiar su estructura es que los artculos aadidos aparecen publicados en una
secuencia inversa al orden de introduccin.
Lo ltimo introducido es lo primero que se muestra, uno de los principales motivos
de la rpida expansin de este medio de comunicacin ha tenido es la relativa
facilidad que ofrecen para ser creados y manejados por cualquier usuario con
conocimientos bsicos de Internet an sin tener conocimientos sobre el diseo de
pginas 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, imgenes y sonido,
aunado a la interaccin 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 artculos aparecen ordenados cronolgicamente, pero en sentido
inverso; lo ms reciente es lo que se encuentra publicado en la parte superior de
la pgina, inmediatamente despus del ttulo del blog. Todos los artculos estn en
una columna central y por lo general pueden leerse completos sin necesidad de
acceder a otro enlace. Tambin se puede observar una columna lateral con
10
informacin extra; datos de identificacin del autor, enlaces de inters a otras
pginas y blogs, acceso al archivo de lo anteriormente publicado, buscador, Chat,
lbum de fotos, libro de visitas, estadsticas; etc., todo lo que el autor considere
apropiado para la temtica de la pgina o su gusto personal.
La estructura bsica de los artculos es similar a una noticia de prensa, con titular,
fecha y cuerpo del artculo.
En la parte inferior del mismo se puede encontrar el nombre del autor, la
categora, etiquetas (palabras claves) y un elemento que permite la interaccin
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 annima y en otros hay que ser usuario registrado del servidor del
servicio de blog, Tambin el autor tiene la opcin de moderar los comentarios que
sern publicados, o solicitar una clave de confirmacin para evitar comentarios
automticos o spa.
Lo que no puede el autor es limitar el libre acceso a su blog una vez creado; de
ser esa su intencin le estara quitando la esencia al blog como medio de
comunicacin.
Creacin y publicacin de un blog.
Para crear un blog se puede seleccionar entre los proveedores de servicio
gratuito. Segn Gallego Torres (2006) los ms populares son:

Bleger (www.blogger.com)
Bitcoras (www.bitacoras.com)
Blog ala (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 electrnico; una vez registrado el usuario
tiene la posibilidad de crear uno o ms blogs, asignarle un ttulo segn la temtica
el gusto del autor y acceder a las opciones del panel, desde el cual se administra
el blog: creacin de artculos, seleccin y edicin de la plantilla, moderacin de
comentarios e incluso compartir el manejo del blog con otros autores.

11
Adems de esas opciones bsicas, cada proveedor de blogs ofrece servicios
particulares, una seccin de ayuda y preguntas frecuentes, tutoriales e incluso un
blog sobre el uso del servicio. A continuacin una breve descripcin de las
opciones principales:
Creacin de artculos: Es la opcin base de todo blog, permite publicar toda la
informacin que desee el autor, ya sea al instante o guardarlas como borrador
para publicacin posterior. Adems, toda informacin puede ser editada
posteriormente.
Se necesita de algunos conocimientos bsicos de HTML para darle un uso ms
profesional y personal y es lo que permite, adems de textos, poder incorporar
imgenes y sonido; el autor puede apoyarse en la seccin de ayuda del panel, la
cual ofrece ejemplos sencillos.
Seleccin y edicin de la plantilla: La plantilla es el aspecto visual-esttico del
blog y la base a la que puede personalizar agregando cuantas opciones considere
necesarias segn el uso que quiera dar leal blog (enlaces, lbum de fotos, libros
de visitas, estadsticas, etc.) En el panel de control el proveedor pone a
disposicin algunos modelos de plantillas, los cuales requieren de conocimientos
bsicos en HTML para ser modificadas; tambin puede consultarse la seccin de
ayuda para lo referente a partes y cdigos de la plantilla que pueden ser
modificados. La mayora de los proveedores de servicio blog ofrecen la opcin de
moderar los comentarios antes de ser publicados, el acceso de usuarios
registrados e incluso permitir comentarios annimos si el administrador del blog lo
desea.

CodeIgniter
CodeIgniter, un FRAMEWORK PHP para el desarrollo rpido 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 programacin 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 programacin en el que la aplicacin
est dividida en 3 capas:
Modelo: es dnde se procesa y obtienen los datos, la conexin con la bd.
Vista: presenta los datos en pantalla, es donde va el cdigo HTML.
Controlador: controla los datos, dicho de forma rpida obtiene datos de un
modelo, los procesa, y se los pasa a la vista.

Ventajas de utilizar un FRAMEWORK como CodeIgniter

Las pginas se procesan ms rapido, el ncleo de CodeIgniter es bastante ligero.
Es sencillo de instalar, basta con subir los archivos al ftp y tocar un archivo de
configuracin para definir el acceso a la bd.
Reutilizacin de cdigo, desarrollo gil.
Existe abundante documentacin en la red.
Facilidad de edicin del cdigo ya creado.

13
Facilidad para crear nuevos mdulos, pginas o funcionalidades.
Acceso a libreras pblicas y clases. Entre otras, hay libreras para el login,
paginador, calendarios, fechas,.
Estandarizacin del cdigo. Fundamental cuando hay que tocar cdigo hecho por
otra persona o cuando trabaja ms de una persona en un mismo proyecto.
URLs amigables con SEO. Hoy en da creo que nadie duda de la importancia del
posicionamiento web.
Separacin de la lgica y arquitectura de la web, el MVC.
CodeIgniter es bastante menos rgido que otros FRAMEWORKs. Define una
manera de trabajar, pero podemos seguirla o no(esto puede convertirse en un
inconveniente tambin)
Cualquier servidor que soporte PHP+MySQL sirve para CodeIgniter.
CodeIgniter se encuentra bajo una licencia open source, es cdigo libre.
CodeIgniter usa una versin modificada del Patrn de Base de Datos Active
Record. Este patrn permite obtener, insertar y actualizar informacin in tu base
de datos con mnima codificacin. Permite queries ms seguras, ya que los
valores son escapadas automticamente por el sistema.

HTML 5

HTML5 es la ltima versin de HTML. El trmino representa dos conceptos

diferentes:

Se trata de una nueva versin de HTML, con nuevos elementos, atributos y

comportamientos.

Contiene un conjunto ms amplio de tecnologas que permite a los sitios

Web y a las aplicaciones ser ms diversas y de gran alcance. A este
conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5 .

Diseado para ser utilizable por todos los desarrolladores de Open Web, esta
pgina referenca a numerosos recursos sobre las tecnologas de HTML5, que se
clasifican en varios grupos segn su funcin.

Semntica: Permite describir con mayor precisin cual es su contenido.

Conectividad: Permite comunicarse con el servidor de formas nuevas e

innovadoras.
14
 Sin conexin y almacenamiento: Permite a las pginas web almacenar
datos localmente en el lado del cliente y operar sin conexin de manera
ms eficiente.

Multimedia: Nos otorga un excelente soporte para utilizar contenido

multimedia como lo son audio y video nativamente.

Grficos y efectos 2D/3D: Proporciona una amplia gama de nuevas

caractersticas que se ocupan de los grficos en la web como lo son
canvas 2D, WebGL, SVG, etc.

Rendimiento e Integracin: Proporciona una mayor optimizacin 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
diseos ms sofisticados.

PHP

QU ES PHP? PARA QU SIRVE PHP?

PHP es un lenguaje de cdigo abierto muy popular, adecuado para desarrollo web
y que puede ser incrustado en HTML. Es popular porque un gran nmero de
pginas y portales web estn creadas con PHP. Cdigo 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 cdigo PHP
con cdigo HTML, siguiendo unas reglas.

PHP se utiliza para generar pginas web dinmicas. Recordar que llamamos
pgina esttica a aquella cuyos contenidos permanecen siempre igual, mientras
que llamamos pginas dinmicas 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 bsquedas o aportaciones de los usuarios, etc.

15
Cmo trabaja PHP? El lenguaje PHP se procesa en servidores, que son
potentes ordenadores con un software y hardware especial. Cuando se escribe
una direccin tipo http://www.aprenderaprogramar.com/index.PHP en un
navegador web como Internet Explorer, Firefox o Chrome, qu ocurre? Se
envan los datos de la solicitud al servidor que los procesa, rene los datos (por
eso decimos que es un proceso dinmico) y el servidor lo que devuelve es una
pgina HTML como si fuera esttica.

El esquema es: Peticin de pgina web al servidor --> El servidor recibe la

peticin, rene la informacin necesaria consultando a bases de datos o a otras
pginas webs, otros servidores, etc --> El servidor responde enviando una pgina
web normal (esttica) pero cuya creacin ha sido dinmica (realizando procesos
de modo que la pgina web devuelta no siempre es igual).

En resumen:

Pginas estticas: Peticin --> Respuesta

Pginas dinmicas: Peticin --> Procesado y preparacin --> Respuesta

En un sitio dinmico, la informacin generalmente est contenida en una base de

datos. Cada vez que mostramos la pgina, como por ejemplo una pgina de
noticas, buscamos en la base de datos las ltimas noticias que tenemos
ingresadas para mostrar en el navegador del visitante. Ahora bien, cmo se
consigue que la pgina vaya mostrando noticias nuevas? Simplemente cargando
las mismas en la base de datos, por ejemplo, a travs 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 pgina web y el servidor consulte la base de datos, encontrar esta
nueva informacin y mostrar nuestra pgina de forma distinta a como se vea
anteriormente.

Por regla general este tipo de lenguaje suele ser utilizado para crear contenido
dinmico 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 informacin, tutoriales, tips, consejos etc.

Y as facilitar el aprendizaje y capacitacin de una manera ms eficiente, cabe a

mencionar el gran potencial de algunos empleados que cuentan con la
disponibilidad de poder compartir sus conocimientos para el beneficio comn de la
empresa.

Para la realizacin de este proyecto fue de vital importancia la capacitacin y el

aprendizaje de nuevas tecnologas y la aplicacin de los previos conocimientos
adquiridos a lo largo de la carrera.

Se realiz una capacitacin de 15 das para aprender el uso y manejo de este

software basado en el lenguaje de programacin interpretado PHP.

En la primera parte de la capacitacin se analizaron los requerimientos de

software para la instalacin del FRAMEWORK, mi equipo de cmputo cumpla
con los requisitos necesarios despus se comenz con la instalacin de dicho
software ya antes mencionado.

17
Al finalizar la instalacin se continu con el curso donde se vieron las
caractersticas y como utilizar la interfaz del mismo para la visualizacin de los
archivos que este software proporciona fue necesario instalar un editor de texto
llamado Sublime Text el cual proporciona un gestor de archivos de texto en
leguajes de programacin.

La interfaz que este editor de texto nos proporciona se puede visualizar en el

anexo (1).

Una vez realizada la instalacin del editor de texto se comenz con el anlisis de
los archivos proporcionados por el software empezando por la seccin de
archivos de configuracin del FRAMEWORK.

En el primer archivo de configuracin llamado Autoload se observ lo siguiente:

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

Prototype:
$autoload['packages'] = array(APPPATH.'third_party', '/usr/local/shared');
$autoload['packages'] = array();

Se puede $autoload['libraries'] = array();

apreciar de $autoload['libraries'] = array('database');

manera $autoload['helper'] = array('url', 'file');
ms $autoload['helper'] = array('form', 'url', 'blog');
detallada $autoload['config'] = array('config1', 'config2');
en el anexo $autoload['config'] = array();
(2), el
$autoload['language'] = array('lang1', 'lang2');
archivo de
$autoload['language'] = array();
$autoload['model'] = array('model1', 'model2');
$autoload['model'] = array();

18
configuracin llamado Autoload se encuentran las libreras, modelos, funciones,
bases de datos, configuraciones etc.

Que se pueden utilizar de manera automatizada en toda la pgina con la finalidad

de ahorrar cdigo y poder reutilizarlo de manera eficiente.

En el proyecto se emple el uso de este archivo para cargar las bases de datos,
libreras 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 configuracin llamado config su estructura resumida en las
configuraciones requeridas para proyecto es la siguiente:

En el <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

archivo $config['base_url'] = 'http://localhost/blog/';

Config se $config['index_page'] = 'index.php';
realizan $config['language'] = 'english';
mltiples $config['charset'] = 'UTF-8';
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';
$config['log_date_format'] = 'Y-m-d H:i:s';

configuraciones para el FRAMEWORK las requeridas para el proyecto fueron las

anterior mente mencionadas se hace uso de la configuracin Base_url para
asignar la direccin a la que estarn asociadas cada una de los paginas que
contendr el blog, la lnea de configuracin llamada Index_page es utilizada para
establecer la direccin inicial momento de hacer la carga del sitio web se re
direccionara a una pgina 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 ms reciente a la ltima entrada publicada.

En la siguiente etapa del desarrollo del sitio web se implement la conexin con
una base de datos creada en el gestor de bases de datos MYSQL.

19
Esta base de datos es llamada blog para realizar esta conexin 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 conexin cada vez que
sea utilizada la estructura del archivo es la siguiente:
En la
siguiente <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

lnea:
$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';

$db['default']['hostname'] = 'localhost'; .
Se define el hostname o direccin 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.

En la lnea: $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 lnea: $db['default']['password'] = ''; se define la contrasea de usuario

pero no es obligatoria por lo cual fue dejada vaca.

20
En la lnea: $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 investigacin de cmo 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 pginas del sitio web
utilizando funciones sin necesidad de cargar archivos con extensiones lo cual es
una manera ms fcil de implementar nuestro cdigo para la visualizacin de
pginas de nuestro sitio web.

Se debe se debe escribir en maysculas la primera letra cuando se crea una

nueva clase, para su implementacin en el proyecto se cre un archivo llamado
Blog el cual es el controlador principal de todo el blog donde se cargan todas las
vistas y son enlazadas las funciones con los modelos para la utilizacin de las
bases de datos a utilizar en el proyecto en primera instancia se realiz la
definicin de una clase llamada blog la estructura es la siguiente:

21
La clase <?php
Blog if (!defined('BASEPATH'))
como se exit('No direct script access allowed');
visualiza en
la lnea: class Blog extends CI_Controller
class Blog
{
extends
function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->model('menu_model');
}
}
CI_CONTROLLER con la extensin CI_CONTROLLER haciendo referencia a
que se est declarando un archivo CONTROLLER contendr casi toda la
estructura del sitio web donde se definirn las funciones, libreras, helpers, y
views que se requieren para el desarrollo del sitio web.

Se defini una funcin 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.

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:

22
Como se <?php
haba if (!defined('BASEPATH'))
exit('No direct script access allowed');

class Menu_model extends CI_Model

{

function __construct()
{
parent::__construct();
$this->load->database();

}
mencionado la funcin principal de este modelo es para la interaccin con la base
de datos de nuestro proyecto en la siguiente lnea: class Menu_model extends
CI_Model se est definiendo una clase llamada Menu_Model con la
terminacin CI_Model para hacer referencia a que se est declarando un archivo
tipo model.

En la lnea: $this->load->database(); se est cargando el archivo database

con la palabra reservada $this este archivo anteriormente mencionado para
establecer una conexin con nuestra base de datos.

Continuando con la elaboracin del CONTROLLER Blog se defini la siguiente

funcin:

function inicio()
La funcin {
llamada

23
$this->load->view('menu');
}
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 adems de ser la pgina principal del
sitio donde solamente se define el inicio del documento HTML 5 y el ttulo del sitio
la estructura del archivo es la siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Blog</title>

En este esta vista nicamente una estructura HTML 5 simple donde se define el
ttulo del sitio web la funcin ndex solo se est utilizando la vista men.

Se comenz con el desarrollo del CONTROLLER llamado men el cual contiene

el resto de la estructura de la pgina principal de nuestro sitio su estructura es la
siguiente:

24
En este <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
controlador
se declara class Menu extends CI_Controller {
una funcin function __construct()
llamada {
ndex, en
parent::__construct();
esta
$this->load->helper('form');
funcin se
$this->load->model('menu_model');
estn
}
cargando
las vistas function index()

men, {
header y if($this->session->userdata('logged_in'))
registrarse. {
redirect('blog/entradas');
En la vista
Men }else{
como $this->load->view('menu');
$this->load->view('header');
$this->load->view('registrarse');
}
}
}
?>
anteriormente se haba mencionado solo contiene el inicio del archivo HTML 5 y el
nombre del sitio web.

En la vista Header se estn cargando los archivos de conexin con el CDN del
FRAMEWORK Bootsrap , Un archivo CSS y adems del men principal que ser
visualizado en la pgina de inicio el cual contiene la siguiente estructura:

25
<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>

En el archivo header se visualiza la conexin con el CDN de Bootstrap y la

conexin con un archivo CSS para la estructura visual del sitio web adems del
men de la pgina 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

26
 electrnico, contrasea y la confirmacin de la contrasea, el correo electrnico
ingresado ser nico y no se podr registrar otro usuario con el mismo correo
electrnico se deber utilizar uno diferente

<?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>
</div>

Si algn dato no es ingresado no se permitir el registro del nuevo usuario se

tiene que ingresar a informacin requerida para que el usuario pueda registrarse.

27
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, contrasea encriptada y la cuenta de correo
electrnico.

Por cuestiones de seguridad la contrasea ingresada por el usuario es encriptada

y guardada en la base de datos, la encriptacin de la contrasea es realizada en
el modelo Menu_model el fragmento de cdigo para poder realizar la
encriptacin es el siguiente:

La funcin function nuevousuario($data, $pass)

{
$pass = $pass['pass'];
$password = password_hash($pass, PASSWORD_BCRYPT);

nuevousuario est recibiendo datos mediante parmetros en las variables

$data y $pass.

La variable $data contiene el nombre de usuario y correo electrnico del nuevo

usuario y la variable $pass contiene la contrasea ingresada por el usuario.

Para realizar la encriptacin de la contrasea se define una nueva variable

llamada $password en esta variable se utiliza un comando php llamado
password_hash, mediante este comando se realizar la encriptacin de la
contrasea ingresada por el usuario y esta ser guardada en la base de datos

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

28
contenido que ha sido publicado por usuarios en el sitio web, su estructura es la
siguiente:
En la vista llamada contenido de la pgina entradas se agreg cdigo PHP para
poder visualizar las entradas que han sido publicadas por otros usuarios el
contendi
<?php echo $this->session->flashdata('correcto'); ?>
de todas
<?php echo $this->session->flashdata('bienvenido');?>
las
<?php
entradas se
encuentra if (empty($entradas)):

en la base echo "<center><h1>no hay entradas publicadas</h1></center>";

de datos else:
llamada foreach ($entradas->result() as $entrada) {
Blog ?>
dentro de <div class="post-preview">
una tabla
<a href="<?= base_url('blog/entradas/' . $entrada->id) ?>">
llamada
<h2 class="post-title" id="titulo">
Entradas.
<?= $entrada->titulo; ?>
</h2>
En la lnea:
</a>
'<a
<div id="contenidop">
href="<?=
<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;
?>

29
base_url('blog/entradas/' . $entrada->id) ?>">'. se est utilizando cdigo PHP para
recibir datos del campo de nuestra tabla entradas llamado titulo.

En la lnea: <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 lnea : <p class="post-meta">Posted by <?= $entrada->autor; ?></a> <?=

$entrada->fecha; ?></p> se visualizara el autor de la entrada y la fecha, adems
se podrn visualizar todas las entradas realizadas por un autor mediante la lnea
de cdigo <a href="<?= base_url('blog/post_by_user/' . $entrada->id_autor) ?>">
esta lnea 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 annimo llamado Iniciar
sesin, est dirigido a otra vista llamada Veryfilogin esta vista contiene un
formulario de acceso para que cuando el usuario annimo 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 sesin 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 electrnico ,Contrasea
despus de llenar los campos requeridos se debe pulsar sobre el botn Login
despus de eso se enviaran los datos y se verificara en la base de datos si el
usuario existe si el usuario existe se redirigir automticamente a la vista de
entradas pero ahora ser un usuario con privilegios y se visualizara un nuevo
men que se encuentra localizado en una vista llamada header.

La pgina principal del sitio web con todos los elementos anteriormente
mencionados se puede encontrar en el anexo (3).

30
Se continu con el desarrollo del CONTROLLER Blog en el cual se defini la
segunda funcin en la cual se carga las vistas llamadas nueva y registrado la
estructura de la funcin es la siguiente:

En la function nueva()

funcin {
nueva se if ($this->session->userdata('logged_in')) {
cargan 3 $session_data = $this->session->userdata('logged_in');
vistas $data['id_user'] = $session_data['id_user'];
adems $data['username'] = $session_data['username'];
para que el
$dato['email'] = $session_data['email'];
usuario
$this->load->view('entradas', $data);
tenga
$this->load->view('header');
acceso a
$this->load->view('nueva', $dato);
estas
pginas es } else {

necesario $this->session->set_flashdata('restringir', '<div align="center"

que sea un class="alert alert-danger">
usuario <a href="#" class="close" data-dismiss="alert" aria-
registrado label="close">&times;</a>
para poder <strong>No tienes permiso para acceder a esto! </strong>
realizar </div>');
nuevas redirect('blog/entradasno');
}
}
publicaciones en el sitio, para ello se cre una condicin que es la siguiente: if
($this->session->userdata('logged_in')) la cual se encarga de verificar que se
est iniciando una nueva sesin y si esto se cumple se cargaran las vistas para
que el usuario pueda visualizar las pginas y publicar contenido.

En la lnea $this->load->view('registrado'); se est cargando la vista llamada

registrado la cual contiene el men que contiene todas las pginas y su total
funcionalidad para que el usuario tenga acceso a todo el contenido con todos los

31
privilegios para realizar nuevas publicaciones y comentarios sobre las
publicaciones ya existentes , la estructura del archivo es la siguiente:

En esta <div class="col-md-12">

vista se <div>
encuentra <img src="<?= base_url() ?>application/views/img/Blog.png">
la nueva
estructura </div>
del men <ul>
que solo se
<li><a href="http://localhost/blog/index.php/blog/nueva">Nueva
puede
entrada</a></li>
visualizar si
<li><a href="http://localhost/blog/index.php/blog/entradas">Ver
el usuario
entradas</a></li>
accede con
su cuenta
</ul>
en la
pgina de <div id="login2">

login, las <h2 style="color:#fff;">Bienvenido <?php echo $username; ?></h2>

diferencias <h6><a href="logout">Logout</a></h6>
del men </div>
inicial y </div>
este men
son que el usuario ya no nicamente tiene acceso a las publicaciones realizadas
sino que tambin puede realizar nuevas publicaciones y comentarios sobre las
publicaciones de otros usuarios el men cuenta con los siguientes elementos:
Nueva entrada en la opcin nueva entrada se puede acceder a una nueva
pgina donde el usuario puede escribir una nueva publicacin o entrada que
posteriormente de ser publicada podr ser visualizada en la pgina Ver entradas
y el ltimo elemento de este men es el Lougout este elemento tiene la
funcionalidad de cerrar la sesin del usuario actual y al momento de cerrar la
sesin es ejecutado un comando llamado $this->session-
>unset_userdata('logged_in'); y se redirige de nueva cuenta a la pgina inicial del
modo usuario annimo sin privilegios. En la pgina Nueva entrada se realiza la

32
insercin de datos a la base de datos del proyecto en la tabla llamada Nuevas
entradas la estructura de la pgina entradas es la siguiente:

En la estructura del archivo Nueva entrada se cre un formulario para la

publicacin 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 pgina Ver entradas, los datos de la
publicacin enviados por el usuario son procesados por una funcin del
CONTROLLER Blog y son enviados al model Menu_model para ser guardados
en la base de datos, la funcin 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 funcin es la siguiente:

function recibirdatos()
En esta
{
funcin se
estn
<?= form_open('blog/recibirdatos')?>
$data = array(
recibiendo
los datos <div id="titulo">
'titulo' => $this->input->post('titulo',TRUE),
que el <h1>Titulo:<?= form_input($titulo) ?></h1>
'contenido' => $this->input->post('contenido',TRUE),
usuario ha </div>
'autor' => $this->input->post('autor',TRUE),
enviado en <div id="contenido">
'fecha' => date('Y-m-d H:i:s',TRUE)
la
); <h1>Contenido:<br>
<?= form_textarea($contenido)?>
$this->menu_model->nuevaEntrada($data);
</h1>
</div>
$this->session->set_flashdata('correcto', '<div align="center" class="alert
<div id="autor">
alert-success">
<h1>Autor:
<a href="#" class="close" data-dismiss="alert" aria-
<input type="text" name="autor" value="<?php echo $username; ?>"></h1>
label="close">&times;</a>
</div>
<strong>La entrada se ah publicado correctamenre</strong>
<input class="btn-lg"type="submit" value="Publicar" ></input>
</div>');
</div> redirect('blog/entradas', 'refresh');
<?= form_close()?>
}
33
publicacin, estos datos son recibidos y almacenados en un arreglo asociativo
llamado data con las siguientes variables: titulo en esta variable se almacena el
ttulo de la nueva publicacin, 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
publicacin, fecha en la variable fecha se almacena la fecha y hora de la
publicacin.

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: ttulo, contenido, autor
y fecha todos estos datos son guardados en la base de datos por una funcin
llamada nuevaEntrada y su estructura es la siguiente:

function nuevaEntrada($data)
{
En esta
$this->db->insert('entradas', array(
funcin se
'titulo' => $data['titulo'],
est
'contenido' => $data['contenido'],
recibiendo
la variable 'autor' => $data['autor'],

data que 'fecha' => $data['fecha']

contiene ));
todos los }
datos que
el usuario a enviado en la publicacin el modelo se encarga de hacer la insercin
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 despus ser
visualizados en el sitio web.

En la pgina 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:

34
 <title>Entradas</title>
En la lnea <div class="col-md-10">
de cdigo:
<?php echo $this->session->flashdata('correcto'); ?>
<?php
<?php
echo $this-
foreach ($entradas->result() as $entrada) { ?>
>session-
<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 }
?>
>flashdata('correcto'); ?> se est utilizando un comando PHP para indicar cuando
una publicacin se ha 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 funcin recibir datos del CONTROLLER Blog.

En la lnea: foreach ($entradas->result() as $entrada) { ?> se utiliza el comando

FOREACH para mostrar todas las entradas que se encuentran en la base de
datos.

35
En la lnea: <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 lnea de comando nos permitir
acceder a cada una de las publicaciones o entradas que estn 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 ttulo
de todas las publicaciones que actualmente se encuentran en la base de datos
adems 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 electrnico los datos que este correo electrnico contendr sern:
Titulo de la entrada, Comentario y Autor del comentario.

Para realizar el envi de correos electrnicos 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 sern enviados los correos utilizando
tambin una API KEY generada automticamente despus de crear la cuenta de
usuario ,despus instalar un manejador de dependencias llamado COMPOSER
despus de instalar COMPOSER se tuvo que descargar una librera llamada
MAILGUN.

En la siguiente lnea se muestra el uso de un HELPER llamado Enviar_helper su

estructura es la siguiente:

36
Para poder
enviar los <?php
datos se function maile($autor, $text, $email_comentario,$email_autor)
tiene que {
hacer uso try{
de una
# Instantiate the client.
variable
$mgClient = new Mailgun('key-6e1864e0bbbf6e20133372ec5d0e8787');
llamada
$domain = "sandbox41165099550640ebad5da087fb66be92.mailgun.org";
$mgClient
# Make the call to the client.
la cual
contiene la $result = $mgClient->sendMessage($domain, array(

API KEY 'from' =>$email_comentario,

de la 'to' => $email_autor,

cuenta de 'subject' => 'Titulo de la entrada:' . ' ' . $subject,
MAILGUN, 'text' => 'Autor:' . ' ' . $autor . '
tambin es ' . 'Comentario:' . $text
necesario
));
el uso de la
}
variable
catch(Exception $e){
llamada
echo '{"error":{"text":'. $e->getMessage() .'}}';
$domain
}
la cual
contiene el }

dominio SANDBOX al cual son dirigidos los emails para poder ser enviados a los
usuarios.
El helper Envial_helper se reciben los datos que sern enviados por correo
electrnico y son recibidos mediante parmetros por la funcin maile en las
variables: ($subject, $autor, $text, $email_comentario,$email_autor).

Estas variables contendrn los datos del usuario autor de la entrada, el usuario
autor del comentario, el ttulo de la entrada que fue comentada y el comentario

37
que se realiz en esta entrada estos datos son enviados mediante las siguientes
lneas:

$result = $mgClient->sendMessage($domain, array(

'from' =>$email_comentario,
'to' => $email_autor,
'subject' => 'Titulo de la entrada:' . ' ' . $subject,
'text' => 'Autor:' . ' ' . $autor . '
' . 'Comentario:' . $text
));

Bibliografas:
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/

38
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

39