Desarrollo Web

martes, 27 de mayo de 2014

Insertar Nuevo Registro con PHP y MySQL

Insertar Nuevo Registro con PHP y MySQL

matricula.css

body{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12;
color:black;
background-color:#cccccc;
text-align:center;
}

#formulario{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:400px;
padding:14px;
}
#formulario h1 {
font-size:20px;
font-weight:bold;
margin-bottom:30px;
margin-top: 5px;
}

#formulario label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#formulario input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #708090;
width:200px;
margin:2px 0 20px 10px;
}
#formulario button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:yellowgreen;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#titulo{
background-color: #ff0000;
color:#ffffff;
font-size: 26px;
text-align: center;

}

lunes, 26 de mayo de 2014

DISEÑO DE FORMULARIOS CON HTML Y CSS3

lunes, 19 de mayo de 2014

Manejo de Sesiones y Arrays en PHP

Proyecto desarrollado en NetBeans 8.0

lunes, 14 de abril de 2014

Formulario de contactos con HTML5 CSS y PHP

Formulario de contactos con HTML5 CSS y PHP

A continuación explicaré como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP. Con la nueva versión de HTML (HTML5), el código para desarrollar sitios web es más limpio, intuitivo y comprende nuevas características y propiedades que simplifican nuestro trabajo, gracias a esto los formularios también se desarrollan de una manera más simple y efectiva.

Para que funcione correctamente el formulario es necesario correrlo en un servidor web para que el código php pueda ser ejecutado.

Estructura HTML

Para comenzar a desarrollar el formulario, primero debemos crear nuestro archivo contactos.html, el mismo contendrá el código que generará visualmente el formulario en nuestra página.

archivo : contacto.html

<html>
    <head>
        <title>Formulario de contactos con HTML5 CSS y PHP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="estilo.css">
    </head>
    <body>
      <section class="formulario">
        <form action="contacto.php" method="post">
         <label>Formulario de contactos</label>
         <label for="nombre">Nombre:</label>
         <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
         <label for="email">Email:</label>
         <input id="email" type="email" name="email" placeholder="karlosrivas@gmail.com" required="" />
         <label for="mensaje">Mensaje:</label>
         <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
         <input id="submit" type="submit" name="submit" value="Enviar" />
        </form>
    </body>
</html>

Podemos ver que gracias al lenguaje HTML5, las etiquetas utilizadas son mucho más intuitivas y faciles de leer, a diferencia de las versiones anteriores, donde se utilizaban divs para crear bloques, ahora los diferenciamos con etiquetas fácilmente reconocibles como head, header, section, article, footer, entre otras…

El CSS

A continuación aplicaremos estilos al formulario, para ello debemos crear el archivo estilo.css e incluír el siguiente código en él. Esta parte depende de la creatividad de cada uno, este código se puede modificar a gusto adaptándolo al diseño de su sitio web.

archivo : estilo,css

/*
    Created on : 14/04/2014, 09:29:06 PM
    Author     : kriv@s.net
*/
            label {
               display:block;
               margin-top:20px;
               letter-spacing:1px;
            }
            .formulario {
               display:block;
               margin:0 auto;
               width:510px;
               color: #666666;
               font-family:Arial;
            }
            form {
                margin:0 auto;
                width:400px;
            }
            input, textarea {
                width:380px;
                height:27px;
                background:#666666;
                border:2px solid #f6f6f6;
                padding:10px;
                margin-top:5px;
                font-size:10px;
                color:#ffffff;
            }
            textarea {
                height:150px;
            }
            #submit {
                width:85px;
                height:35px;
                border:none;
                margin-top:20px;
                cursor:pointer;
            }

PHP

A continuación creamos el archivo contacto.php e incluimos el siguiente código.

<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$para = 'TUCORREO@CORREO.COM';
$titulo = 'ASUNTO DEL MENSAJE';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";

if ($_POST['submit']) {
echo "<h1>Nombre : $nombre<br>";
echo "E-mail : $email<br>";
echo "Mensaje : $mensaje<br></h1>";

if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Mensaje enviado, muchas gracias.');
window.location.href = 'http://TUSITIOWEB.COM';
</script>";
}
else {
echo "<script language='javascript'>
alert('Fallo en envio, lo sentimos mucho.');
window.location.href = 'http://kjarlosrivas.blogspot.com'.;
</script>";
}
}
?>

Vista Previa del ejercicio

PRACTICA CALIFICADA

1.ELABORA EL SIGUIENTE FORMULARIO

2. ENIVA LOS DATOS SELECCIONADOS A UNA PAGINA PARA CONFIRMAR LA MATRICULA.

lunes, 31 de marzo de 2014

Ingresar dos valores por medio de un formulario y mostrar posteriormente todos los números pares comprendidos entre ellos

martes, 25 de marzo de 2014

Determinar el signo zodiacal en PHP

<html>
<head>
<title>Signo Zodiacal</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.textbox {
color: purple;
background-color: #aaff3d;
font-size: 12pt;
text-align:center}
.button {
color: red;
background-color: window;
font-size: 12pt;
}

</style>
</head>
<body>
<div>
<h1>Signo Zodiacal by krivas.net</h1>
<form Method="Post">
<h3>Ingrese su fecha de nacimiento (dd-mm-aaaa)
<Input Type="Text" Name="dia" size="2" maxlength="2" class="textbox">
<Input Type="Text" Name="mes" size="2" maxlength="2" class="textbox">
<Input Type="Text" Name="anno" size="4" maxlength="4" class="textbox">
<Input Type="Submit" Name="Consultar" Value="Consultar" class="button">
</h3>
</form>
</div>
</body>
</html>

<?php
if (!function_exists("zodiaco")) {
function zodiaco($fechanac){

$fechadia=date("d", strtotime($fechanac));
$fechames=date("m", strtotime($fechanac));
/*
Aries (21/3 - 20/4)
Tauro (21/4 - 21/5)
Géminis (22/5 - 20/6)
Cáncer (21/6 - 23/7)
Leo (24/7 - 23/8)
Virgo (24/8 - 23/9)
Libra (24/9 - 23/10)
Escorpio (24/10 - 22/11)
Sagitario (23/11 - 21/12)
Capricornio (22/12 - 20/1)
Acuario (21/1 - 19/2)
Piscis (20/2 - 20/3)
*/
if((($fechadia >= "21") && ($fechames == "3")) or
(($fechadia <= "19") && ($fechames == "4"))){
$signo="Aries";
}
if((($fechadia >= "20") && ($fechames == "4")) or
(($fechadia <= "20") && ($fechames == "5"))){
$signo="Tauro";
}
if((($fechadia >= "21") && ($fechames == "5")) or
(($fechadia <= "21") && ($fechames == "6"))){
$signo="Geminis";
}
if((($fechadia >= "22") && ($fechames == "6")) or
(($fechadia <= "22") && ($fechames == "7"))){
$signo="Cancer";
}
if((($fechadia >= "23") && ($fechames == "7")) or
(($fechadia <= "22") && ($fechames == "8"))){
$signo="Leo";
}
if((($fechadia >= "23") && ($fechames == "8")) or
(($fechadia <= "22") && ($fechames == "9"))){
$signo="Virgo";
}
if((($fechadia >= "23") && ($fechames == "9")) or
(($fechadia <= "22") && ($fechames == "10"))){
$signo="Libra";
}
if((($fechadia >= "23") && ($fechames == "10")) or
(($fechadia <= "21") && ($fechames == "11"))){
$signo="Escorpio";
}
if((($fechadia >= "22") && ($fechames == "11")) or
(($fechadia <= "21") && ($fechames == "12"))){
$signo="Sagitario";
}
if((($fechadia >= "22") && ($fechames == "12")) or
(($fechadia <= "19") && ($fechames == "1"))){
$signo="Capricornio";
}
if((($fechadia >= "20") && ($fechames == "1")) or
(($fechadia <= "18") && ($fechames == "2"))){
$signo="Acuario";
}
if((($fechadia >= "19") && ($fechames == "2")) or
(($fechadia <= "20") && ($fechames == "3"))){
$signo="Piscis";
}

return $signo;
}
}
?>
<?php
if($_POST["Consultar"]){
$anno=$_POST["anno"];
$mes=$_POST["mes"];
$dia=$_POST["dia"];

if(!is_numeric($dia) || $dia<1 || $dia>31){
echo "<h2>Ingrese dia correctamente";
return 0;
}
if(!is_numeric($mes) || $mes<1 || $mes>12){
echo "<h2>Ingrese mes correctamente</h2>";
return 0;
}
if(!is_numeric($anno)){
echo "<h2>Ingrese año correctamente</h2>";
return 0; //Terminar ejecucion
}

$fechanac=$dia."-".$mes."-".$anno;
echo "<br><h2>Fecha de nacimiento : $fechanac <br>";
$fechanac=$anno."-".$mes."-".$dia;
echo "Su signo zodiacal corresponde a : ".zodiaco($fechanac)."</h2>";
}
?>