Buscar en este sitio

Acerca de Mi


Mi nombre es Yésica
estudio la carrera de
Ingenieria en Computación
en la UNAM campus CU.
Actualmente estoy
terminando el 8° semestre
y participando en el
Laboratorio de Investigación
y Desarrollo de Software
Libre, ahora como ente
morador del espacio XD.
Esta es mi página
experimental.
Mis intereses personales
son la musica, las artes
plásticas, la tecnología de
las telecominucaciones,
los gadgets,  el software
libre, la programación \m/_
la realidad virtual y el
diseño gráfico

php

Una vez que tenemos una estructura para la página podemos iniciar la construcción del código que hara que se despliegue el contenido interactivo de la sección de noticias y de las imagenes de proyectos y demas, para ello, haremos uso de la introducción puesta en el manual fast para un servidor apache con soporte para php, dado que manejaremos mucha información en cada página conviene trabajar un una base de datos a fin de optimizar la lectura y busqueda. Las acciones que realizaremos son:
  1. Instalación de un servidor apache
  2. Instalación de php y soporte para mysql en php
  3. Configuración del servidor para que use el modulo de php
Los puntos 1 y 2 estan explicados en el manual que escribi  CLICK AQUI PARA VERLO
el tercer punto requiere la instalación del modulo de mysql en php, conviene revisar las indicaciones dadas en la página oficial de php
en el caso de estar usando linux, y una distribución basada en debian (yo uso debian lenny):
> instalaremos la base de datos
apt-get install mysql
... al configurar la base de datos, nos pedirá una contraseña de administrador, por favor no olvide esta contraseña.
> hay que instalar el modulo:
apt-get install php5-mysql
> reniciar el servidor apache
apache2ctl restart


y hacer una pequeña prueba de conexión, la cual realizaremos despues de crear una base de datos.

I. Accesamos a mysql como usuario administrador, dicha contraseña es la que se nos pidió al instalar mysql
mysql -p
... damos la contraseña y aparece el prompt:  mysql>

II. Procedemos a crear un usuario con todos los privilegios sobre la base de datos que generaremos:
el codigo es similar al siguiente:
mysql> CREATE DATABASE WEB;
mysql> USE WEB;
mysql> CREATE USER 'yes' IDENTIFIED BY 'secretpass';
mysql> GRANT ALL PRIVILEGES ON WEB TO 'yes'
-> WITH GRANT OPTION;
de esta forma, el nuevo usuario puede autenticarse en la base de datos.

ahora crearemos dos tablas que nos serán utiles
  1. Manejo de NUEVOS avisos y noticias
  2. Manejo de ICONOS de proyectos o ligas
el esquema de nuestra base de datos sera el siguiente:

        MYSQLDB
           |
        ___WEB_____
        |   |     |
  NUEVOS EVENTOS ICONOS



Nuestras tablas NUEVOS e ICONOS por ahora no tendrán relaciones de llaves foraneas
con otras tablas, ya que es un experimento
para ejemplificar el como generar contenido dinámico en una página web usando php
y que salga con el formato indicado en la hoja de estilo css.

La estrutura que se me ha ocurrido para dichas tablas es la siguiente:


El código para generar las tablas es el siguiente, pensando que despues de generar
la base de datos "WEB" se ha cerrado la sesion en mysql:
ye@debian:~$ mysql -u yes -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 36
Server version: 5.0.51a-24+lenny1 (Debian)

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> use WEB;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
Database changed
mysql> CREATE TABLE NUEVOS(nmsj TINYINT NOT NULL AUTO_INCREMENT,nom VARCHAR(30), txt VARCHAR(200) NOT NULL, fecha DATE NOT NULL, link VARCHAR(70) NOT NULL, usuario VARCHAR(30) NOT NULL, PRIMARY KEY(nmsj)) TYPE=MyISAM;

mysql> CREATE TABLE ICONOS(icon TINYINT NOT NULL AUTO_INCREMENT, icon_name VARCHAR(30) NOT NULL, icon_link VARCHAR(70) NOT NULL, usuario VARCHAR(30) NOT NULL, PRIMARY KEY(icon)) TYPE=MyISAM;

mysql> SHOW TABLES;

debemos ver una salida estandar similar a la siguiente:
mysql> show tables;
+---------------+

mysql> show tables;
+---------------+
| Tables_in_WEB |
+---------------+
| ICONOS        |
| NUEVOS        |
+---------------+
2 rows in set (0.01 sec)
| Tables_in_WEB |
+---------------+
| ICONOS |
| NUEVOS |
+---------------+
2 rows in set (0.01 sec)
ahora insertemos dos juegos de datos en la tabla ICONOS:
INSERT INTO ICONOS VALUES(0,'x.jpg','http://www.google.com','yo');
INSERT INTO ICONOS VALUES(0,'y.jpg','http://mx.yahoo.com','yo');
ahora podemos ver el contenido de la tabla:
mysql> select * from ICONOS;
+------+-----------+-----------------------+---------+
| icon | icon_name | icon_link | usuario |
+------+-----------+-----------------------+---------+
| 1 | x.jpg | http://www.google.com | yo |
| 2 | y.jpg | http://mx.yahoo.com | yo |
+------+-----------+-----------------------+---------+
2 rows in set (0.00 sec)
Revisaremos entonces que el modulo de mysql de php este funcionando,
en un archivo de texto ubicado en la raiz de documentos del servidor con extension .php
escribirmos lo siguiente:
<?php
// Connecting, selecting database
$link = mysql_connect('localhost', 'yes', 'secretpassword')
or die('Could not connect: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('WEB') or die('Could not select database');
// Performing SQL query
$query = 'SELECT * FROM ICONOS';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
// Printing results in HTML
echo "<H1> TABLA:</H1><br>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<br>";
foreach ($line as $col_value) {
echo "$col_value<br>";
}
echo "\t</tr>\n";
}
echo "</table>\n";
// Free resultset
mysql_free_result($result);
// Closing connection
mysql_close($link);
?>

Al acceder al servidor, ya sea desde la ip o desde el localhost (loopback), veremos el archivo que creamos
yo en este caso lo llame database.php, al darle click debe desplegar algo similar:
 
Nuestro modulo de php para mysql esta funcionando correctamente.
MANOS A LA OBRA CON EL CONTENIDO DINAMICO!!!
Para administrar los espacios que creamos en la pagina web, desplegaremos el contenido desde una base de datos similar a la expuesta.
Basicamente el codigo php funciona de la siguiente forma:

  1. Abre una conexion a la base de datos.
  2. Hace una consulta de todos los datos existentes en la tabla.
  3. Almacena los datos en una matriz de tipo asociativa.
  4. Barremos en contenido del arreglo y lo desplegamos en la pagina web con formato

Usando el siguiente codigo:


<?php
// Connecting, selecting database
$link = mysql_connect('localhost', 'mi_usuario', 'my_pass')
or die('Could not connect: ' . mysql_error());
mysql_select_db('WEB') or die('Could not select database');
$contentleft="contentleft";
$newsheading="newsheading";
$newstxtbg="newstxtbg";
$newsboldtxt="newsboldtxt";
$newstxt="newstxt";
$boldtxt="boldtxt";
$morenewsbutton="morenewsbutton";
$morenews="morenews";
echo "<div id=".$contentleft.">";
echo "<div id=".$newsheading.">";
echo "<h3>Noticias</h3> </div>";
echo "<div id=".$newstxtbg.">";
// Performing SQL query
$query = 'SELECT * FROM NUEVOS';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
// Printing results in HTML
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
$titulo = $line['nom'];
$cont=$line['txt'];
$ref=$line['link'];
$fecha=$line['fecha'];
$class = "awardboldtxt";
$classtxt = "awardnormaltxt";
echo "<div id=".$newsboldtxt."> ".$fecha."</div>";
echo "<div class=".$newstxt."><span class=".$boldtxt.">".$titulo."</span> ".$cont."<br /> </div>";
echo "<div class=".$morenewsbutton."><a href=".$ref." class=".$morenews."> more</a></div>";
}
echo "</div> </div>";
$contentmid="contentmid";
$awardheading="awardheading";
$headingtxt="headingtxt";
$awardtxtblank="awardtxtblank";
echo "<div id=".$contentmid.">";
echo "<div id=".$awardheading.">";
echo " <h3>Eventos<br />";
echo "<span class=".$headingtxt.">Mauris sed magna non </span></h3>";
echo "</div>"; //<!-- awardheading -->
echo "<div id=".$awardtxtblank.">";
$awardboldtxt= "awardboldtxt";
$awardnormaltxt="awardnormaltxt";
$awardtxt="awardtxt";
// Performing SQL query
$query = 'SELECT * FROM EVENTOS';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
// Printing results in HTML
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
$titulo = $line['enom'];
$cont=$line['etxt'];
$ref=$line['elink'];
$fecha=$line['efecha'];
$class = "awardboldtxt";
$classtxt = "awardnormaltxt";
echo "<div class=".$awardtxt.">";
echo "<div class=".$awardboldtxt.">".$titulo."</div><div class=".$awardnormaltxt.">".$cont."</div>";
}
echo "</div>";
echo "</div>";// <!--project -->
echo "</div>";// <!-- projectblank -->
echo "</div>";//<!-- contentmid -->
echo "</div>";// <!-- content -->
echo "</div>"; // <!-- contentblank -->
// Free resultset
mysql_free_result($result);
// Closing connection
mysql_close($link);
?>

En la base de datos tenemos las siguientes tablas:

mysql> show tables;
+---------------+
| Tables_in_WEB |
+---------------+
| EVENTOS |
| ICONOS |
| NUEVOS |
+---------------+
3 rows in set (0.00 sec)


mysql> select * from ICONOS;
+------+-----------+-----------------------+---------+
| icon | icon_name | icon_link | usuario |
+------+-----------+-----------------------+---------+
| 1 | x.jpg | http://www.google.com | yo |
| 2 | y.jpg | http://mx.yahoo.com | yo |
+------+-----------+-----------------------+---------+
2 rows in set (0.00 sec)

mysql> select * from NUEVOS;
+------+---------------------+----------------------------------------+------------+----------------------------+---------+
| nmsj | nom | txt | fecha | link | usuario |
+------+---------------------+----------------------------------------+------------+----------------------------+---------+
| 1 | Nueva Pagina Lidsol | Yesica hizo una nueva pagina principal | 2009-10-31 | http://lidsol.fi-b.unam.mx | Ye |
+------+---------------------+----------------------------------------+------------+----------------------------+---------+
1 row in set (0.00 sec)



mysql> select * from EVENTOS;
+------+-----------------------+-----------------------------------+------------+----------------------------+----------+
| emsj | enom | etxt | efecha | elink | eusuario |
+------+-----------------------+-----------------------------------+------------+----------------------------+----------+
| 1 | Mozilla en la escuela | Evento organizado por Mozilla.org | 2009-10-27 | http://lidsol.fi-b.unam.mx | Yesica |
+------+-----------------------+-----------------------------------+------------+----------------------------+----------+
1 row in set (0.00 sec)



entonces, la salida del codigo php sera similar a la siguiente:


Ahora, ya podemos desplegar la informacion, faltaria hacerle ajustes al codigo para
que solo despliegue cierto numero de entradas y no sature la pagina.

Tambien es evidente que necesitamos una interfaz que nos permita introducir nuevos valores
a la base de datos. El codigo debera tener al menos los siguientes campos:

Nombre de la Noticia|Evento
Descripcion breve (100 palabras)
Link de referencia (para mas información)
Fecha en que se publico
Quien lo publico

y en el caso de los iconos... una entrada para seleccionar el archivo desde la computadora.

CONDICIONES NECESARIAS PARA LA SIGUIENTE FASE:

Que los post de eventos y noticias no sobrepasen cierto numero de palabras
tanto en titulo como en descripcion, para que no deforme el diseño de la pagina

Que se desplieguen los mas recientes: esto se hace ordenando el resultado del query
de mysql de fomra descendente y agrupando en un ciclo que se rompa cuando se 
llegue a cierto numero, tentativamente 4.