Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Ejemplos de Ajax

ejemplosAjax

Las función GET:

 function llamadaAjax(action) {
 var mail = document.getElementById("mail").value;
 var num = document.getElementById("numero").value;
 var miajax = new XMLHttpRequest();
 miajax.onreadystatechange = function () {
 if (miajax.readyState == 4 && miajax.status == 200) {
 document.getElementById('resultado').innerHTML = miajax.responseText;
 }
 }
 miajax.open('GET', 'test.php?num=' + num + '&mail=' + mail + "&action=" + action, true);
 miajax.send();
 }

La función POST:

  function llamadaAjaxPost() {
            var mail = document.getElementById("mail").value;
            var miajax = new XMLHttpRequest();
            miajax.onreadystatechange = function () {
                if (miajax.readyState == 4 && miajax.status == 200) {
                    document.getElementById('resultado').innerHTML = miajax.responseText;
                }
            }
            miajax.open('POSt', 'testpost.php', true);
            miajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            miajax.send("mail="+mail);
        }

Ejemplo de autocomplete con AJAX

Código html:

 $( "#paises2" ).autocomplete({
 source: "paises_lista.php"
 });

Código php:

<?php
include_once 'conexionPDO.php';
$sql = "select * from country where country_id=-1";
$sql = "select country as value from country where country like '%" . $_GET["term"] . "%'";
$resul = $conn->query($sql);
$paises = $resul->fetchAll();
echo json_encode($paises);

productos_autocomplete

Página de contenido para Drupal

function mimodulo_menu() {
 $items = array();

 $items['admin/config/content/mimodulo'] = array(
 'title' => 'Mi módulo',
 'description' => 'Configuración de mi módulo',
 'page callback' => 'drupal_get_form',
 'page arguments' => array('mimodulo_form'),
 'access arguments' => array('access administration pages'),
 'type' => MENU_NORMAL_ITEM,
 );
 $items['mimodulo'] = array(
 'title' => 'Mi módulo',
 'page callback' => '_mimodulo_page',
 'access arguments' => array('access mimodulo content'),
 'type' => MENU_NORMAL_ITEM, 
 );
 return $items;
}
 function _mimodulo_page() {
 $result = mimodulo_contenido();
 
 $items = array();
 
 foreach ($result as $node) {
 $items[] = array(
 'data' => l($node->title, 'node/' . $node->nid),
 ); 
 }
 
 if (empty($items)) { 
 $page_array['mimodulo_arguments'] = array(
 
 '#title' => t('Contenido mi módulo'),
 '#markup' => t('No hay.'),
 );
 return $page_array; 
 } 
 else {
 $page_array['mimodulo_arguments'] = array(
 '#title' => t('Contenido mi módulo'),
 '#items' => $items,
 //Theme hook with suggestion. 
 '#theme' => 'item_list__mimodulo',
 );
 return $page_array;
 }
}

Configuración básica Drupal

1.- Instalar Drupal. Necesitamos una base de datos y los archivos de Drupal:

https://www.drupal.org/project/drupal

2.- Instalar y configurar algún tema si es necesario:

https://www.drupal.org/project/project_theme

3.- Instalar módulos básicos:

Wysiwyg: https://www.drupal.org/project/wysiwyg

Bajar librerías de TyniMCE (Versión 3.5.11):

TynMCE 3.5

O de CKEditor:

http://ckeditor.com/download

En este último caso modificar la línea 81 de sites\all\modules\wysigyg\editors\ckeditor.inc por esta:

if (preg_match(‘@version:\”(?:CKEditor )?([\d\.]+)(?:.+revision:\”([\d]+))?@’, $line, $version)) {

Las tenemos que guardar en sites\all\libreries

ckeditor

Tenemos que configurar qué editor vamos a usar para cada estilo y los botones que añadiremos a cada uno. ¡Ojo con el BBcode en el tinyMCE, que nos quita las imágenes!

IMCE: Para subir imágenes:

https://www.drupal.org/project/imce

https://www.drupal.org/project/imce_wysiwyg

3.- Menús

Instalar el módulo superfish:

https://www.drupal.org/project/superfish

Y bajar la librería superfish:

https://github.com/mehrpadin/Superfish-for-Drupal/archive/1.x.zip

4.- Vistas

Necesitamos los siguientes módulos:

Chaos Tools

https://www.drupal.org/project/ctools

Views

https://www.drupal.org/project/views

5.- Otros tipos de campos:

Fechas:

http://drupal.org/project/date

Youtube:

https://www.drupal.org/project/youtube

Referencias a nodos:

https://www.drupal.org/project/references

Plugin Frase del día: action, filter y widget

<?php
/*
 Plugin Name: Frase del día
 Plugin URI: https://es.wikiquote.org/wiki/Portada
 Description: Muestra una frase del día diferente
 Author: Jota Peich
 Version: 1.0
 Author URI: http://intelisen.com
 */

function frase_getFrase() {
 $upload = wp_upload_dir();

 $frases = file($upload['basedir'] . "/frases.txt");
 return $frases[rand(0, count($frases) - 1)];
}

function frase_ponFrase() {
 echo frase_getFrase();
}

add_action('admin_notices', 'frase_ponFrase');

function frase_filtro($contenido) {
 return $contenido . "<br/>" . frase_getFrase();
}

add_filter("the_content", 'frase_filtro');

class FraseWidget extends WP_Widget {

 function FraseWidget() {
 $widget_ops = array('classname' => 'FraseWidget', 'description' => 'Muestra una frase del día');
 $this->WP_Widget('FraseWidget', 'Frase del día', $widget_ops);
 }

 function form($instance) {
 $instance = wp_parse_args((array) $instance, array('title' => ''));
 $title = $instance['title'];
 ?>
 <p><label for="<?php echo $this->get_field_id('title'); ?>"><?= _e('Title') ?>: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
 <?php
 }

 function update($new_instance, $old_instance) {
 $instance = $old_instance;
 $instance['title'] = $new_instance['title'];
 return $instance;
 }

 function widget($args, $instance) {
 extract($args, EXTR_SKIP);

 echo $before_widget;
 $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

 if (!empty($title))
 echo $before_title . $title . $after_title;;

 echo frase_getFrase();

 echo $after_widget;
 }

}

add_action('widgets_init', create_function('', 'return register_widget("FraseWidget");'));

Crear host virtual

A la hora de desarrollar una web es conveniente tener configurado un host virtual. Así podemos acceder vía una web falsa. Por ejemplo, si estoy desarrollando la web miweb.com, puedo crear un host llamado miweb.dev para el desarrollo que apunte a la carpeta local.

¿Cómo hacerlo? Básicamente hay que hacer dos cosas: decirle a windows que ese dominio es local y configurar un host virtual.

Lo primero se hace en:

C:\Windows\System32\drivers\etc\hosts

Añadiendo lo siguiente:

127.0.0.1 miweb.dev

Lo segundo en C:\xampp\apache\conf\extra\httpd-vhosts.conf

Añadiendo lo siguiente:

<Directory “C:/xampp/htdocs/”>
Options Indexes FollowSymLinks
Order allow,deny
Allow from all
</Directory>

<VirtualHost *:80>
ServerAdmin webmaster@gmail.com
DocumentRoot “C:/xampp/htdocs/miweb”
ServerName miweb.dev
</VirtualHost>