24 julio 2016

El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional

  4 comentarios
11:19


Para los que constantemente han visitado este blog entrada tras entrada sabrán del gran esfuerzo que hago por volver aquí, quizás no con tanta frecuencia como quisiera porque entre el trabajo y los estudios, no me queda mucho tiempo al día, mas sin embargo, no me olvido de lo que me gusta hacer realmente y de compartir mis conocimientos, y todo lo que por este medio se pueda expresar para los seguidores de Friki.

Disculpen lo confianzudo, puesto a que sigo otros blog de la misma temática que el mio y son un poco mas técnicos y mas al punto de lo que desean exponer, mas sin embargo, a mi persona, le aburre ser técnico y todo cuadriculado, y solo espero crear un 'clima' de confianza usuario-administrador si se pudiera llamar de alguna manera con el fin de que al entrar al blog se sientan motivados a seguir aprendiendo de una manera como tal, explicativa, comprensible usando el tipico metodo de explicar las cosas con manzanas y peras


Continuando con lo que vengo a exponer hoy, que ya veniamos hablando en anteriores entradas las cuales invito a ver, para que tengan una idea de lo que va a tratar este tutorial


-Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción
-Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Programando

No hace falta adentrarnos mas en explicaciones de lo que es el patrón MVC y la POO en PHP, así que vamos al grano, en los tutoriales anteriores explique los mismos, y realice un ejercicio práctico más sin embargo, fue algo sumamente básico y que aun contiene ciertos elementos que pueden ser mejorados separando aun mas la lógica del negocio de la interfaz, y optimizando el uso de los códigos de cada lenguaje de programación, el tutorial a continuación, representa la programación en capas con MVC y POO en PHP.

Como ya sabemos, el patrón MVC (Modelo-Vista-Controlador) es una arquitectura de software, un modo de programar cualquier tipo de programa y páginas web que separa la lógica del negocio de la interfaz del usuario, cumpliendo cada capa una función específica

- Modelo: representa la lógica de negocios. Es el encargado de acceder de forma directa a los datos actuando como “intermediario” con la base de datos.

- Vista: es la encargada de mostrar la información al usuario de forma gráfica y “humanamente legible”.

- Controlador: es el intermediario entre la vista y el modelo. Es quien controla las interacciones del usuario solicitando los datos al modelo y entregándolos a la vista para que ésta, lo presente al usuario, de forma “humanamente legible”.

¿Cómo funciona el MVC?



El funcionamiento básico del patrón MVC, puede resumirse en:

• El usuario realiza una petición
• El controlador captura el evento (puede hacerlo mediante un manejador de eventos – handler -, por ejemplo)
• Hace la llamada al modelo/modelos correspondientes (por ejemplo, mediante una llamada de retorno – callback -) efectuando las modificaciones pertinentes sobre el modelo
• El modelo será el encargado de interactuar con la base de datos, ya sea en forma directa, con una capa de abstracción para ello, un Web Service, etc. y retornará esta información al controlador
• El controlador recibe la información y la envía a la vista
• La vista, procesa esta información pudiendo hacerlo desde el enfoque que veremos en este libro, creando una capa de abstracción para la lógica (quien se encargará de procesar los datos) y otra para el diseño de la interfaz gráfica o GUI. La lógica de la vista, una vez procesados los datos, los “acomodará” en base al diseño de la GUI - layout – y los entregará al usuario de forma “humanamente legible”.

Ahora que ya sabemos esto, es el momento de programar. Se creara un registro de usuarios que contara con el registro de datos así como la modificación, consulta y eliminacion del usuario, en pocas palabras, la gestión de usuario.

Para comenzar, vamos a crear en nuestro servidor, ya sea local o externo, una carpeta llamada 'mvc' en el cual, crearemos los siguientes directorios

core: el propósito de este directorio, será almacenar todas aquellas clases, helpers, utils, decorators, etc, que puedan ser reutilizados en otros módulos de la aplicación (aquí solo crearemos el de usuarios), es decir, todo aquello que pueda ser considerado “núcleo” del sistema.

site_media: será el directorio exclusivo para nuestros diseñadores. En él, organizadamente, nuestros diseñadores podrán trabajar libremente, creando los archivos estáticos que la aplicación requiera.

usuarios: este, será el directorio de nuestro módulo de usuarios. En él, almacenaremos los archivos correspondientes al modelo, la lógica de la vista y el controlador, exclusivos del módulo de usuarios.

El Modelo


Archivo ./core/db_abstract_model.php

Este archivo contiene todos los métodos de consulta los cuales nos permitirán conectarnos con la base de datos y extraer los datos, valga la redundancia que necesitemos según nuestra consulta SQL

<?php
abstract class DBAbstractModel {
  private static $db_host = 'localhost';
  private static $db_user = 'root';
  private static $db_pass = 'root';
  protected $db_name = 'mvc';
  protected $query;
  protected $rows = array();
  private $conn;
  public $mensaje = 'Hecho';

  # métodos abstractos para ABM de clases que hereden
  abstract protected function get();
  abstract protected function set();
  abstract protected function edit();
  abstract protected function delete();

  # los siguientes métodos pueden definirse con exactitud y
  # no son abstractos

  # Conectar a la base de datos
 private function open_connection() {
   $this->conn = new mysqli(self::$db_host, self::$db_user,
   self::$db_pass, $this->db_name);
 }

 # Desconectar la base de datos
 private function close_connection() {
  $this->conn->close();
 }

 # Ejecutar un query simple del tipo INSERT, DELETE, UPDATE
 protected function execute_single_query() {
   if($_POST) {
    $this->open_connection();
    $this->conn->query($this->query);
    $this->close_connection();
   } else {
    $this->mensaje = 'Metodo no permitido';
   }
 }

 # Traer resultados de una consulta en un Array
 protected function get_results_from_query() {
   $this->open_connection();
   $result = $this->conn->query($this->query);
   while ($this->rows[] = $result->fetch_assoc());
   $result->close();
   $this->close_connection();
   array_pop($this->rows);
 }
}
?>


Archivo ./usuarios/model.php

Este archivo representa la clase de la entidad usuario, contiene todos los métodos y propiedades del usuario así como las consultas SQL que nos servirán para gestionar sus datos.

<?php
# Importar modelo de abstracción de base de datos
require_once('../core/db_abstract_model.php');
class Usuario extends DBAbstractModel {
############################### PROPIEDADES ################################
 public $nombre;
 public $apellido;
 public $email;
 private $clave;
 protected $id;

################################# MÉTODOS ##################################
 # Traer datos de un usuario
 public function get($user_email='') {
  if($user_email != '') {
   $this->query = "
   SELECT id, nombre, apellido, email, clave
   FROM usuarios
   WHERE email = '$user_email'
   ";
   $this->get_results_from_query();
  }
  if(count($this->rows) == 1) {
   foreach ($this->rows[0] as $propiedad=>$valor) {
    $this->$propiedad = $valor;
   }
   $this->mensaje = 'Usuario encontrado';
  } else {
   $this->mensaje = 'Usuario no encontrado';
  }
 }

 # Crear un nuevo usuario
 public function set($user_data=array()) {
  if(array_key_exists('email', $user_data)) {

   $this->get($user_data['email']);

   if($user_data['email'] != $this->email) {
    foreach ($user_data as $campo=>$valor) {
     $$campo = $valor;
     }

   $this->query = "
    INSERT INTO usuarios
    (nombre, apellido, email, clave)
    VALUES
    ('$nombre', '$apellido', '$email', '$clave')
    ";
    $this->execute_single_query();
    $this->mensaje = 'Usuario agregado exitosamente';
   } else {
    $this->mensaje = 'El usuario ya existe';
   }
  } else {
   $this->mensaje = 'No se ha agregado al usuario';
  }
 }


 # Modificar un usuario
 public function edit($user_data=array()) {
  foreach ($user_data as $campo=>$valor) {
   $$campo = $valor;
  }

  $this->query = "
  UPDATE usuarios
  SET nombre='$nombre',
  apellido='$apellido'
  WHERE email = '$email'
  ";
  $this->execute_single_query();
  $this->mensaje = 'Usuario modificado';
 }


 # Eliminar un usuario
 public function delete($user_email='') {
  $this->query = "
  DELETE FROM usuarios
  WHERE email = '$user_email'
  ";
  $this->execute_single_query();
  $this->mensaje = 'Usuario eliminado';
 }

 # Método constructor
 function __construct() {
  $this->db_name = 'mvc';
 }

 # Método destructor del objeto
 function __destruct() {
  unset($this);
 }
}
?>


La Vista

Archivo ./site_media/html/usuario_template.html

Esta representa la plantilla HTML general donde se mostraran cada uno de los formularios solicitados por el usuario así como mensajes de confirmacion, esta sera la interfaz mostrada al usuario, lo unico con lo que el usuario podrá interactuar en este caso.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="/mvc/site_media/css/base_template.css">
  <title>ABM de Usuarios: {subtitulo}</title>
 </head>

 <body>

  <div id="cabecera">
    <h1>Administrador de usuarios</h1>
    <h2>{subtitulo}</h2>
  </div>

  <div id="menu">
    <a href="/mvc/{VIEW_SET_USER}" title="Nuevo usuario">Agregar usuario</a>
    <a href="/mvc/{VIEW_GET_USER}" title="Buscar usuario">Buscar/editar usuario</a>
    <a href="/mvc/{VIEW_DELETE_USER}" title="Borrar usuario">Borrar usuario</a>
  </div>

  <div id="mensaje">
    {mensaje}
  </div>

  <div id="formulario">
   {formulario}
  </div>
  
 </body>
</html>


Archivo ./site_media/html/usuario_agregar.html

Este y los siguientes 3 archivos corresponden a los formularios que solicitara el usuario para realizar una función cualquiera, estos formularios serán mostrados en la plantilla general sustituyendo la linea {formulario} por el código presente en el archivo según sea el caso

<form id="alta_usuario" action="{SET}" method="POST">

  <div class="item_requerid">E-mail</div>
  <div class="form_requerid"><input type="text" name="email" id="email"></div>

  <div class="item_requerid">Clave</div>
  <div class="form_requerid"><input type="password" name="clave" id="clave"></div>

  <div class="item_requerid">Nombre</div>
  <div class="form_requerid"><input type="text" name="nombre" id="nombre"></div>

  <div class="item_requerid">Apellido</div>
  <div class="form_requerid"><input type="text" name="apellido" id="apellido"></div>
  
  <div class="form_button"><input type="submit" name="enviar" id="enviar" value="Agregar"></div>
  
</form>


Archivo ./site_media/html/usuario_borrar.html
(formulario para eliminar un usuario identificado por su e-mail)

<form id="alta_usuario" action="{DELETE}" method="POST">

  <div class="item_requerid">E-mail</div>

  <div class="form_requerid"><input type="text" name="email" id="email"></div>

  <div class="form_button"><input type="submit" name="enviar" id="enviar" value="Eliminar"></div>

</form>


Archivo ./site_media/html/usuario_buscar.html
(archivo que permite buscar un usuario por su e-mail para luego mostrarlo en el formulario de edición, ya sea para editarlo o solo para ver sus datos)

<form id="alta_usuario" action="{GET}" method="GET">

  <div class="item_requerid">E-mail</div>
  <div class="form_requerid"><input type="text" name="email" id="email"></div>
 
  <div class="form_button"><input type="submit" id="enviar" value="Buscar"></div>
  
</form>


Archivo ./site_media/html/usuario_modificar.html
(archivo para visualizar los datos de un usuario y modificarlos)

<form id="alta_usuario" action="{EDIT}" method="POST">

  <div class="item_requerid">E-mail</div>
  <div class="form_requerid"><input type="text" name="email" id="email" value="{email}" readonly></div>
  
  <div class="item_requerid">Nombre</div>
  <div class="form_requerid"><input type="text" name="nombre" id="nombre" value="{nombre}"></div>
  
  <div class="item_requerid">Apellido</div>
  <div class="form_requerid"><input type="text" name="apellido" id="apellido" value="{apellido}"></div>
  
  <div class="form_button"><input type="submit" name="enviar" id="enviar" value="Guardar"></div>

</form>


Archivo ./site_media/css/base_template.css
(hoja de estilos en cascada)

body {
 margin: 0px 0px 0px 0px;
 background-color: #ffffff;
 color: #666666;
 font-family: sans-serif;
 font-size: 12px;

}
#cabecera {
 padding: 6px 6px 8px 6px;
 background-color: #6699FF;
 color: #ffffff;
}
#cabecera h1, h2 {
 margin: 0px 0px 0px 0px;
}
#menu {
 background-color: #000000;
 color: #ffffff;
 padding: 4px 0px 4px 0px;
}
#menu a {
 width: 100px;
 background-color: #000000;
 padding: 4px 8px 4px 8px;
 color: #f4f4f4;
 text-decoration: none;
 font-size: 13px;
 font-weight: bold;
}
#menu a:hover {
 background-color: #6699FF;
 color: #ffffff;
}
#mensaje {
 margin: 20px;
 border: 1px solid #990033;
 background-color: #f4f4f4;
 padding: 8px;
 color: #990033;
 font-size: 15px;
 font-weight: bold;
 text-align: justify;
}
#formulario {
 margin: 0px 20px 10px 20px;
 border: 1px solid #c0c0c0;
 background-color: #f9f9f9;
 padding: 8px;
 text-align: left;
}
.item_requerid {
 width: 150px;
 height: 22px;
 padding-right: 4px;
 font-weight: bold;
 float: left;
 clear: left;
 text-align: right;
}

.form_requerid {
 height: 22px;
 float: left;
 clear: right;
}
input {
 border: 1px solid #c0c0c0;
}
.form_button {
 padding-top: 15px;
 margin-left: 154px;
 clear: both;
}
#enviar {
 padding: 5px 10px 5px 10px;
 border: 2px solid #ffffff;
 background-color: #000000;
 color: #ffffff;
 font-family: sans-serif;
 font-size: 14px;
 font-weight: bold;
 cursor: pointer;
}
#enviar:hover {
 background-color: #6699FF;
}

Archivo ./usuarios/view.php
(Lógica de la vista)

<?php
$diccionario = array(

 'subtitle'=>array(
  VIEW_SET_USER=>'Crear un nuevo usuario',
  VIEW_GET_USER=>'Buscar usuario',
  VIEW_DELETE_USER=>'Eliminar un usuario',
  VIEW_EDIT_USER=>'Modificar usuario'
 ),

 'links_menu'=>array(
  'VIEW_SET_USER'=>MODULO.VIEW_SET_USER.'/',
  'VIEW_GET_USER'=>MODULO.VIEW_GET_USER.'/',
  'VIEW_EDIT_USER'=>MODULO.VIEW_EDIT_USER.'/',
  'VIEW_DELETE_USER'=>MODULO.VIEW_DELETE_USER.'/'
 ),

 'form_actions'=>array(
  'SET'=>'/mvc/'.MODULO.SET_USER.'/',
  'GET'=>'/mvc/'.MODULO.GET_USER.'/',
  'DELETE'=>'/mvc/'.MODULO.DELETE_USER.'/',
  'EDIT'=>'/mvc/'.MODULO.EDIT_USER.'/'
 )
);

function get_template($form='get') {
 $file = '../site_media/html/usuario_'.$form.'.html';
  $template = file_get_contents($file);
  return $template;
}

function render_dinamic_data($html, $data) {
  foreach ($data as $clave=>$valor) {
   $html = str_replace('{'.$clave.'}', $valor, $html);
  }
  return $html;
}

function retornar_vista($vista, $data=array()) {
 global $diccionario;
 $html = get_template('template');
 $html = str_replace('{subtitulo}', $diccionario['subtitle'][$vista],
 $html);
 $html = str_replace('{formulario}', get_template($vista), $html);
 $html = render_dinamic_data($html, $diccionario['form_actions']);
 $html = render_dinamic_data($html, $diccionario['links_menu']);
 $html = render_dinamic_data($html, $data);
 // render {mensaje}
 if(array_key_exists('nombre', $data) && array_key_exists('apellido', $data) && $vista==VIEW_EDIT_USER) {
  $mensaje = 'Editar usuario '.$data['nombre'].' '.$data['apellido'];
 } else {
  if(array_key_exists('mensaje', $data)) {
   $mensaje = $data['mensaje'];
  } else {
   $mensaje = 'Datos del usuario:';
  }
 }
 $html = str_replace('{mensaje}', $mensaje, $html);
 print $html;
}
?>

El Controlador


Archivo ./usuarios/controller.php


<?php
require_once('constants.php');
require_once('model.php');
require_once('view.php');


function handler() {
  $event = VIEW_GET_USER;
  $uri = $_SERVER['REQUEST_URI'];

  $peticiones = array(SET_USER, GET_USER, DELETE_USER, EDIT_USER,VIEW_SET_USER, VIEW_GET_USER, VIEW_DELETE_USER,VIEW_EDIT_USER);

  foreach ($peticiones as $peticion) {
   $uri_peticion = MODULO.$peticion.'/';

   if(strpos($uri, $uri_peticion) == true ) {
    $event = $peticion;
   }
  }

  $user_data = helper_user_data();

  $usuario = set_obj();

  switch ($event) {
   case SET_USER:
    $usuario->set($user_data);
    $data = array('mensaje'=>$usuario->mensaje);
    retornar_vista(VIEW_SET_USER, $data);
   break;
   case GET_USER:
    $usuario->get($user_data);
    $data = array(
     'nombre'=>$usuario->nombre,
     'apellido'=>$usuario->apellido,
     'email'=>$usuario->email
    );
    retornar_vista(VIEW_EDIT_USER, $data);
   break;
   case DELETE_USER:
    $usuario->delete($user_data['email']);
    $data = array('mensaje'=>$usuario->mensaje);
    retornar_vista(VIEW_DELETE_USER, $data);
   break;
   case EDIT_USER:
    $usuario->edit($user_data);
    $data = array('mensaje'=>$usuario->mensaje);
    retornar_vista(VIEW_GET_USER, $data);
   break;
   default:
    retornar_vista($event);
  }
}


function set_obj() {
  $obj = new Usuario();
  return $obj;
}


function helper_user_data() {
  $user_data = array();
  if($_POST) {
   if(array_key_exists('nombre', $_POST)) {
    $user_data['nombre'] = $_POST['nombre'];
   }
   if(array_key_exists('apellido', $_POST)) {
    $user_data['apellido'] = $_POST['apellido'];
   }
   if(array_key_exists('email', $_POST)) {
    $user_data['email'] = $_POST['email'];
   }
   if(array_key_exists('clave', $_POST)) {
    $user_data['clave'] = $_POST['clave'];
   }
  } else if($_GET) {
   if(array_key_exists('email', $_GET)) {
    $user_data = $_GET['email'];
   }

  }
  return $user_data;
}

handler();

?>

Archivo ./usuarios/constants.php

Este archivo contiene todas las constantes del módulo y no se le debería agregar ningún dato que no fuese una constante.

<?php
const MODULO = 'usuarios/';

# controladores
const SET_USER = 'set';
const GET_USER = 'get';
const DELETE_USER = 'delete';
const EDIT_USER = 'edit';

# vistas
const VIEW_SET_USER = 'agregar';
const VIEW_GET_USER = 'buscar';
const VIEW_DELETE_USER = 'borrar';
const VIEW_EDIT_USER = 'modificar';
?>

Archivo Adiciones

Script SQL

En el DBMS phpMyAdmin o cualquier otro, vamos a crear una base de datos cuyo nombre será 'mvc' en la cual crearemos la siguiente tabla

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `usuarios` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(20) NOT NULL,
  `apellido` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `clave` varchar(8) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


Archivo ./.htaccess

 Este archivo debe estar ubicado en la raíz del sistema, es decir, dentro de la carpeta 'mvc' directamente, vas a crear dicho archivo el cual contendrá la siguiente lineas

RewriteEngine on
RewriteRule ^usuarios/ usuarios/controller.php

Es importante tener el mod_rewrite de apache activo para que pueda funcionar el archivo .htaccess y las direcciones URL del sistema como tal, pues, si este no esta activo, no va a funcionar correctamente el flujo de los archivos ni de la información

Aqui dejo un tutorial bastante bueno en tal caso de que no lo tengas activo

Activar módulo mod_rewrite de Apache en Linux y Windows

Este tema aun tiene mucha tela que cortar, mas sin embargo, me limitare a responder solamente las dudas en los comentarios con el fin de no hacer este tutorial mas largo. A programar chicos!

 ref: Bahit, Eugenia. MVC y POO en PHP.

Leer completo

25 diciembre 2015

Menú contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)

  4 comentarios
18:36



Un menú contextual es una lista de comando alternativos que aparece al hacer clic sobre el botón secundario del mouse sobre un elemento especifico. Esta mostrará ciertas funciones que se pueden hacer con dicho elemento, es de suma importancia en los sistemas operativos pues mejorar la navegabilidad del usuario en el mismo, no es posible mencionar algún sistema operativo que no cuente con ellos.

Así como existen menúes contextuales para los sistemas operativos, es posible también que existan en la web, por supuesto, lleva cierto trabajo, a diferencia de lo que implicaría programar estos en IDE's como Visual Studio para .NET o C# o incluso NetBeans para Java, que son trabajados de forma mas visual. Programarlos requiere del uso de 3 lenguajes sumamente sencillos, y que todo programador web debe conocer, HTML, CSS y JavaScript, específicamente hablando, del framework jQuery que tanta gracia ha proporcionado a la internet.

Antes de comenzar, te dejo una demo por acá


Codigo HTML

Este código debe ser introducido entre las etiquetas <body> ... </body> de la pagina.


<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">

 </div>
 <ul id="menu-contextual" oncontextmenu="return false;">
  <li>Paginas de Busqueda<span></span>
   <ul>
    <li onclick="location.href='http://google.com'">Google</li>
    <li onclick="location.href='http://yahoo.com'">Yahoo!</li>
    <li onclick="location.href='http://bing.com'">Bing</li>
   </ul>
  </li>
  <li class="separador">Redes Sociales<span></span>
   <ul>
    <li onclick="location.href='http://facebook.com'">Facebook</li>
    <li onclick="location.href='http://twitter.com'">Twitter</li>
    <li onclick="location.href='http://googleplus.com'">Google Plus</li>
   </ul>
  </li>
  <li onclick="window.history.forward()">Adelante</li>
  <li onclick="window.history.back()">Atras</li>
  <li>Favoritos<span></span>
   <ul>
    <li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
    <li onclick="location.href='http://blogger.com'">Blogger</li>
    <li onclick="location.href='http://gmail.com'">Gmail</li>
   </ul>
  </li>
  
 </ul>

Si pueden observar, la sección del menú contextual tiene la misma estructura que tiene un menú desplegable, en este caso vertical, la única diferencia seria en este caso aplicarle correctamente los estilos CSS para que este se ajuste al diseño de los menúes contextuales que vemos en los sistemas operativos como Windows o cualquier otro

Codigo CSS



* {
   margin:0 auto;
   padding:0 auto;
  }

  #outer-wrapper {
   background:transparent;
   position:absolute;
   width:100%;
   height:100%;
  }

  ul#menu-contextual {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual ul {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   padding:2px 9px 2px 2px;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual li:hover {
   background:#CCC;
   word-wrap:break-word;
  }

  ul#menu-contextual li:hover > ul {
   display:block;
  }

  .separador {
   border-bottom:1px solid #ccc;
  }

Hasta ahora no tenemos mas que un menú desplegable oculto dentro de nuestra pagina, que es necesario ser mostrado al oprimir el clic secundario de nuestro mouse, y que aparezca justamente en sitio de la pantalla donde hemos hecho el clic, esta magia la hacemos con lo siguiente

Codigo JS



/*
     * Autor: Anthony Medina
     * Email: anthonyjmedinaf@gmail.com
     * Blog: http://frikibloggeo.blogspot.com
  */

  function mostrarMenu(event, id, menu_id) {
   var posX, posY, span; // Declaracion de variables

   posX = event.pageX; // Obtenemos pocision X del cursor
   posY = event.pageY; // Obtenemos pocision Y del cursor

   // Hacemos aparecer el menu contextual
   $('#' + menu_id).fadeIn('fast');

   // Flecha que indica submenues
   span = $('#' + menu_id + " span");
   span.html("»");

   // Editando el codigo CSS para ciertos elementos
   span.css({float: 'right',marginRight: '12px'});
   $('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
   $('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
   $('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
  }

  function ocultarMenu(menu_id) {
   $('#' + menu_id).fadeOut('fast');
  }

Y no olviden, lo mas importante, colocar esta pequeña linea justo debajo del <head> de la página web.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Por último, les dejo el código completo para mayor facilidad



<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menu Contextual</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script>
    /*
     * Autor: Anthony Medina
     * Email: anthonyjmedinaf@gmail.com
     * Blog: http://frikibloggeo.blogspot.com
  */

  function mostrarMenu(event, id, menu_id) {
   var posX, posY, span; // Declaracion de variables

   posX = event.pageX; // Obtenemos pocision X del cursor
   posY = event.pageY; // Obtenemos pocision Y del cursor

   // Hacemos aparecer el menu contextual
   $('#' + menu_id).fadeIn('fast');

   // Flecha que indica submenues
   span = $('#' + menu_id + " span");
   span.html("»");

   // Editando el codigo CSS para ciertos elementos
   span.css({float: 'right',marginRight: '12px'});
   $('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
   $('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
   $('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
  }

  function ocultarMenu(menu_id) {
   $('#' + menu_id).fadeOut('fast');
  }

 </script>
 
 <style type="text/css">
  * {
   margin:0 auto;
   padding:0 auto;
  }
  #outer-wrapper {
   background:transparent;
   position:absolute;
   width:100%;
   height:100%;
  }

  ul#menu-contextual {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual ul {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   padding:2px 9px 2px 2px;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual li:hover {
   background:#CCC;
   word-wrap:break-word;

  }

  ul#menu-contextual li:hover > ul {
   display:block;

  }
  .separador {
   border-bottom:1px solid #ccc;
  }


 </style>
</head>
<body>

 <div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
 </div>

 <ul id="menu-contextual" oncontextmenu="return false;">
  <li>Paginas de Busqueda<span></span>
   <ul>
    <li onclick="location.href='http://google.com'">Google</li>
    <li onclick="location.href='http://yahoo.com'">Yahoo!</li>
    <li onclick="location.href='http://bing.com'">Bing</li>
   </ul>
  </li>
  <li class="separador">Redes Sociales<span></span>
   <ul>
    <li onclick="location.href='http://facebook.com'">Facebook</li>
    <li onclick="location.href='http://twitter.com'">Twitter</li>
    <li onclick="location.href='http://googleplus.com'">Google Plus</li>
   </ul>
  </li>
  <li onclick="window.history.forward()">Adelante</li>
  <li onclick="window.history.back()">Atras</li>
  <li>Favoritos<span></span>
   <ul>
    <li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
    <li onclick="location.href='http://blogger.com'">Blogger</li>
    <li onclick="location.href='http://gmail.com'">Gmail</li>
   </ul>
  </li>
  

 </ul>

 
</body>
</html>


Eso es todo.

Leer completo

15 agosto 2015

Microsoft WebMatrix 3: El editor de código para programación web gratuito que lo tiene todo

  No hay comentarios
14:57


Para los que aun no lo conocen, hoy les vengo a presentar una herramienta grandiosa, desarrollada por Microsoft, y para la comodidad de todos los programadores, les presento a WebMatrix 3.

Microsoft WebMatrix 3 es un editor de código de programación para la web, nos ofrece la facilidad de crear proyectos dentro de nuestro servidor con un gran entorno de desarrollo bastante cómodo, o en lo personal, así lo sentí, por tal motivo, ahora le considero mi favorito, desplazando al Adobe Dreamweaver, que no por esto, deja de ser una de las mas excelentes herramientas de programación web, basicamente, ambas son lo mismo, sin embargo, lo que me ha gustado de WebMatrix es su ligereza, va al punto, no tiene mas que lo que requerimos, a diferencia de Dreamweaver que esta lleno de menues digamos que no innecesarios, puesto a que realizan una función, pero si de opciones que jamas en nuestra vida llegariamos a usar. 

Leer completo

14 agosto 2015

Programación Orientada a Objetos en VB.NET con base de datos Access 2010

  No hay comentarios
23:44



Entrada Relacionada: El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional

Como bien es sabido, la Programación orientada a objetos es una metodología de programación la cual se basa en modelar el mundo real y ha ganado importancia significativa en los últimos tiempos, en este tipo de programación se trabaja con objetos en el sistema que interactuan unos con otros. No es para nada difícil de entender si sabemos reconocer cuales son cada una de esas entidades que forman parte de un problema a resolver. Sin mas a que ahondar, continuamos con un breve ejemplo sobre el cual ya hemos venido trabajando en tutoriales anteriores, como la programación orientada a objetos en PHP, que es básicamente lo mismo, pero para efectos de este tutorial, usaremos el maravilloso Visual Studio y su VB.NET Tenemos la clase "persona", objeto de la vida real que en nuestro caso, tiene una cédula de identidad (Numero de identificación único), nombres, apellidos, edad y sexo, y las funciones de la misma serán Registrar, Modificar, Buscar y Eliminar.

  Ahora, que ingredientes necesitamos para empezar?



1. Un formulario (frm_persona) Aplicación de Windows Forms
2. 5 Labels (Cedula, Nombres, Apellidos, Edad, Sexo)
3. 5 TextBox (txt_cedula, txt_nombres, txt_apellidos, txt_edad, txt_sexo)
4. 4 Botones (btn_registrar, btn_modificar, btn_buscar, btn_eliminar)

Una vez que tengamos nuestro formulario armado de la siguiente manera, proseguimos con lo siguiente:

Crear y conectar a la base de datos

Vamos a Microsoft Office Access 2010 (funciona para Access 2007 o 2013) y creamos una nueva base de datos, a la cual llamaremos bd.accdb y contendra dentro de ella la tabla persona. Su ubicación será la carpeta "Debug" de tu proyecto la cual se genera a la hora de compilarlo, sus estructura quedará de la siguiente manera.

Leer completo

13 agosto 2015

Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Programando

  No hay comentarios
13:59


Tutorial anterior : Programación Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción

Entrada RelacionadaEl Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional

Crear la base de datos

Nos dirigimos a nuestro phpMyAdmin para crear la base de datos, si no tienes un servidor aun instalado, deberás crear un servidor local en tu computador para poder acceder, una vez dentro de phpMyAdmin, creamos una nueva base de datos llamada "personas", en la cual, introduciremos la siguiente tabla mendiante una consulta SQL


CREATE TABLE  `persona` (
 `cedula` INT( 10 ) NOT NULL ,
 `nombres` VARCHAR( 50 ) NOT NULL ,
 `apellidos` VARCHAR( 50 ) NOT NULL ,
 `altura` DOUBLE NOT NULL ,
PRIMARY KEY (  `cedula` )
) ENGINE = MYISAM ;

Creando el archivo de conexión

Programamos el archivo de conexion, donde crearemos la funcion conexion() con la finalidad de conectarnos a la base de datos, valga la redundancia, debes sustituir cada una de las credenciales usadas en el código por la que tu hayas escrito a la hora de asignar el nombre de usuario y contraseña a tu MySQL

conexion.php

<?php 
function conexion() {
    global $conexion;

    $conexion = mysql_connect("localhost","root","root") or die ("conexion fallida");
    mysql_select_db("personas",$conexion) or die ("No existe la tabla");
}
?>

Una vez realizado esto, podemos continuar programa el Modelo, la Vista y el controlador de la clase Persona en el mismo orden

Creando el Modelo

Antes de comenzar, es importante hacer enfasis en que el modelo no es mas que plasmar en manera de codigo lo que una clase de manera grafica representa (siempre y cuando hagas el diagrama de clases de tu proyecto), un ejemplo muy sencillo, tenemos la siguiente clase representada graficamente en el siguiente elemento

persona
+ cedula: integer
+ nombres: string
+ apellidos: string
+ altura: double
+ registrarAsociado()

Como explicamos anteriormente en el articulo pasado, tenemos la clase persona, cuyas propiedades o atributos son su cedula, nombres, apellidos y altura, y el metodo o función a realizar, es registrarlo en la base de datos. Ahora, como hacemos esto?, basandonos en el elemento o entidad "persona", comenzamos a programar el modelo de la clase

modelo_persona.php

Leer completo

03 junio 2015

Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción

  No hay comentarios
14:27


Entrada Relacionada: El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional

Introducción a la POO

La POO es un paradigma de programación (o técnica de programación) que utiliza objetos e interacciones en el diseño de un sistema.

Elementos de la POO

La POO está compuesta por lo siguiente elementos basicos

Clase: Una clase es un modelo que se utiliza para crear objetos que comparten un mismo comportamiento, estado e identidad.
Metáfora
Persona es la metáfora de una clase (la abstracción de Juan, Pedro, Ana y María), cuyo comportamiento puede ser caminar, correr, estudiar, leer, etc. Puede estar en estado despierto, dormido, etc. Sus características (propiedades) pueden ser el color de ojos, color de pelo, su estado civil, etc.

class Persona {
# Propiedades
# Métodos
}
Objeto: Es una entidad provista de métodos o mensajes a los cuales responde (comportamiento); atributos con valores concretos (estado); y propiedades (identidad).

Leer completo

Bootstrap 3, el manual oficial

  1 comentario
13:36

Seamos honestos, la mayoría de los programadores no saben diseñar. En Itechnode hemos tratado el tema del diseño responsivo, pasando de ser una tendencia a ya ser obligatorio en todo sitio web que pretenda perdurar en el tiempo y ya que un programador por el hecho de trabajar con un ordenador no lo puede saber todo, les hemos facilitado unas excelentes plantillas realizadas con bootstrap pero lo ideal es que lo aprendamos, he aquí un excelente libro web.

El Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video.

¿Que es Bootstrap?

En la actualidad muchos sitios web están elaborando su diseño en Bootstrap, ¿Qué es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design y está muy de moda.

Leer completo

Validaciones esenciales en Javascript paras tus formularios de HTML

  3 comentarios
12:17

Todas las letras a mayusculas

Validacion sumamente esencial, por ejemplo, para cuando quieres llevar el control de todo lo que ingresa a la base de datos, mantener la uniformidad te ayuda en cuanto a la mejor lectura.

function aMayusculas(campo) {
    var x = document.getElementById(campo).value;
    document.getElementById(campo).value = x.toUpperCase();
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="aMayusculas(document.getElementById('ejemplo1').name)" />

Solo Numeros

Muy util para campos de texto donde el usuario solo se le permite introducir numeros, como campos de moneda, enteros o numeros de telefonos. Es una de las validaciones mas sencillas pero mas utiles de Javascript

function esNumero(campo) {
    var x = document.getElementById(campo).value;
    if (isNaN(x)) {
        document.getElementById(campo).value = "";
    }
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="esNumero(document.getElementById('ejemplo1').name)" />

Solo Letras

Asi como hay campos donde solo puede introducirse numeros, existen campos en los que estos serian incoherentes, como campos de nombres, apellidos, profesion, etc. Recordemos que es mejor prevenir que lamentar, y es mejor prevenir y controlar lo que escribe el usuario antes de lamentar una base de datos llena de basura.

function soloLetras(e){
       key = e.keyCode || e.which;
       tecla = String.fromCharCode(key).toLowerCase();
       letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
       especiales = "8-37-39-46";

       tecla_especial = false
       for(var i in especiales){
            if(key == especiales[i]){
                tecla_especial = true;
                break;
            }
        }

        if(letras.indexOf(tecla)==-1 && !tecla_especial){
            return false;
        }
    }


Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeypress="return soloLetras(event)" />

Mascaras esenciales para campos de texto

Existen ademas diferentes campos los cuales tienen una formato único y que es es sin duda, irreversible, pero que a su vez, pueden presentar diferentes formas dependiendo del gusto del usuario, pero siempre, con un mismo resultado. Para evitar la falta de uniformidad del dato, es necesario usar mascaras pues garantizan que el dato introducido presente el mismo diseño y limite al usuario al mismo.

Leer completo

09 junio 2014

Crear tu propio sistema de comentarios con MySQL y PHP

  50 comentarios
2:44



Son las 1:47 de la madrugada y y desvelado trabajando en esta publicación que he querido traerles y que se que les sera muy útil pues, poco a poco te ayudará a independizarte un poco o de despertar en ti esos deseos de saber mas sobre como trabajar con bases de datos, las cuales si no existieran, el mundo de la Internet fuera nulo, aburrido y sin nada nuevo que ver. Para esta ocasión, he realizado un pequeño formulario, trabajado con HTML y CSS para darle tan llamativo aspecto, con PHP y MySQL para conexión y consultas a bases de datos y PHPMyAdmin para gestión de las mismas, de manera que antes de comenzar a realizar este tutorial recomiendo instalar un localhost en tu computador, o bien, si tienes un servidor externo también funciona, sin embargo; trabajar con un servidor local seria lo preferible.



Ingresa a PHPMyAdmin en tu computador, luego ve a Importar > pestaña SQL y pega el siguiente código

Archivo SQL

-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
-- 
-- Servidor: localhost
-- Tiempo de generación: 09-06-2014 a las 05:52:30
-- Versión del servidor: 5.0.51
-- Versión de PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Base de datos: `comentarios`
-- 

-- --------------------------------------------------------

-- 
-- Estructura de tabla para la tabla `comentarios`
-- 

CREATE TABLE `comentarios` (
  `ip` int(11) NOT NULL auto_increment,
  `usuario` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `website` varchar(1000) NOT NULL,
  `comentario` varchar(3000) NOT NULL,
  `fecha` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`ip`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1305 ;

-- 
-- Volcar la base de datos para la tabla `comentarios`
-- 

INSERT INTO `comentarios` VALUES (1303, 'Formatos', 'formatos@formatos.com', '', '<b>Texto en negrita</b><br />\r\n<i>Texto en cursiva</i><br />\r\n<u>Texto subrayado</u><br />\r\n<strike>Texto Tachado</strike><br />\r\n<span style="color: #3d85c6;">Texto en color</span><br />\r\n<span style="background-color: yellow;">Texto con color de fondo</span><br />\r\n<a href="http:/#">Link</a><br />\r\n<blockquote class="tr_bq">\r\nCita</blockquote>\r\n<div class="separator" style="clear: both; text-align: center;">\r\n<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s1600/flores_rojas_08.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s320/flores_rojas_08.jpeg" /></a></div>\r\n<h1>\r\nEncabezado 1</h1>\r\n<h1>\r\n</h1>\r\n<h2>\r\nEncabezado 2</h2>\r\n<h2>\r\n</h2>\r\n<h3>\r\nEncabezado 3</h3>\r\n<h3>\r\n</h3>\r\n<h4>\r\nEncabezado 4</h4>\r\n<h4>\r\n<marquee>Texto desplazable</marquee>\r\n</h4>\r\n<audio controls="" src="https://sites.google.com/site/anthonyjmedinaf/archivos/Eagles%20-%20Hotel%20California.mp3">Hotel California - Eagles</audio><br />\r\n<br />\r\n<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/_V5o392WOzw" width="100%"></iframe>', '2014-06-09 01:08:20');
INSERT INTO `comentarios` VALUES (1304, 'Anthony', 'nthny21@hotmail.com', '', 'Este es un <b>comentario</b>, almacenado en una base de datos MySQL y mostrado en esta página a través de una consulta ', '2014-06-09 01:19:38');

El código presenta dos ejemplos de comentarios el cual podras visualizar con mejoras mas adelante, crea el siguiente archivo de formato .php, donde localhost sera la direccion del servidor, si trabajas con servidor local, lo mas probable es que tengas que dejarla igual, usuario es tu nombre de usuario, password tu contraseña, y el nombre de la base de datos donde deseamos guardar los comentarios, en nuestro caso, "comentarios".

Leer completo

08 junio 2014

Como compilar un programa en C y C++ en GNU/Linux

  No hay comentarios
9:54


Cada vez son mas los programadores que se prefieren las plataformas basadas en GNU/Linux (Ubuntu, Debian, Fedora, SUSE, Mint, Canaima, entre otros) para hacer sus trabajos de programación, yo personalmente uso Ubuntu, ya que sin ofender al resto, me parece el mas cómodo para trabajar, GNU/Linux ofrece entre su centro de software poderosos IDES de programación para diferentes lenguajes, incluso; hay una version de NetBeans y Eclipse para programar en Java, idéntica a la de Windows, por lo que no hay motivos ni tampoco excusas para no migrar de sistema operativo que te ofrezca mayores libertades que Windows. Los programadores en C o C++ que trabajan en GNU/Linux programan directamente en el bloc de notas que viene con el sistema operativo, llamado Gedit, aunque no es un IDE de programación como tal, es de mucha ayuda para programar en los cientos de lenguaje de programación que pueden existir, pues, lo principal es la coloracion de los elementos del lenguaje que evita o disminuye equivocaciones.

Ya una vez terminado su programa en C o C++, el programador se encuentra con que no puede ejecutarlo, no hay ningún botón automatizado que te accione un compilador, como es el caso de DevC++, IDE de programación en C++ para Windows, sin embargo, no es para desanimarte, mas bien, es para motivarte por aprender algo nuevo, no basta con que un boton automatico haga el trabajo que deberías hacer tu como buen programador. 

Para comenzar necesitamos tener las librerías GCC y G++ instaladas en nuestro  computador, GCC para compilar archivos .c y G++ para compilar archivos .cpp, si no lo tienes instalado, accede a la terminal, una vez allí dentro veras algo como:

usuario@Usuario-PC:~$ 

Pega las siguientes lineas luego del símbolo dolar ($)

sudo apt-get install gcc g++


Leer completo