Facebook Twitter RSS Reset

Crea tu web con Bootstrap y PHP

( dejen cargar el post tiene muchas imágenes grandes , y si necesitan verlas en mejor tamaño click derecho abrir imagen )

Hola chicos he visto varios post de crear tu web y algunos con editores de pago que no dan muchas funcionalidades a mi gusto, por eso he decidido contarles y enseñarles un poco de mi experiencia.

Serán varias partes desde lo mas básico hasta crear un CMS propio, con usuario, administrador, dashboard, etc.

Primero que nada necesitaremos descargarnos el Sublime Text 3

Descargarlo aqui

Luego de haberlo descargado el cual pesa muy poco lo instalamos e iniciamos.

Crea tu web con Bootstrap y PHP

Ingresaremos a view y show console

Crea tu web con Bootstrap y PHP

Nos aparecerá el siguiente cuadro en el cual pegaremos un código que lo obtendremos de la siguiente web.

Código package

Crea tu web con Bootstrap y PHP

Seleccionaremos todo el código y lo pegaremos en el campo del sublime text anteriormente especificado.

Le daremos Enter y cargara algunas dependencias, al finalizar lo mas probable es que nos de un error

Crea tu web con Bootstrap y PHP

que en realidad nos dice que se instalo algo y para que tome efecto es necesario reiniciar y lo haremos.

Volveran a abrirlo.

Y en este momento harán la combinación de teclas CONTROL + SHIFT + P

Crea tu web con Bootstrap y PHP

Nos aparecerá un cuadro de búsqueda y tipearemos Install y nos mostrara package control install package y lo seleccionaremos.

Nos saltara una nueva búsqueda y tipearemos BS3 y lo seleccionamos

Crea tu web con Bootstrap y PHP

Si todo fue correcto nos aparecerá el siguiente mensaje

Crea tu web con Bootstrap y PHP

Lo cierran y crean un nuevo archivo desde File –> New File

ahora que tendremos un nuevo archivo sin nada volveremos a apretar CONTROL + SHIFT + P y en este momento solo tipearemos BS3

Crea tu web con Bootstrap y PHP

obteniendo la siguiente visual, que nos dará los snippets para crear nuestra web con el famoso framework bootstrap 3, pues bien ya que tenemos lo mas básico de nuestro micro entorno para diseñar ( mas adelante enseñare a programar con angular, jquerry, php y mysql )

El primer paso sera agregar la estructura inicial a la web que lo haremos con BS3 HTML

Crea tu web con Bootstrap y PHP

y eligiéremos bs3-html5-template

Crea tu web con Bootstrap y PHP

como podrán observar tenemos una estructura básica HTML con estilos pero se nos ve en color normal verdad? ahora falta ponerlo en formato HTML a la extensión del archivo, tan solo con las teclas CONTROL + S nos permitira guardar en alguna carpeta deseada ejemplo una carpeta llamada web en el escritorio y damos el nombre de index.html

Crea tu web con Bootstrap y PHP

obteniendo lo siguiente

Crea tu web con Bootstrap y PHP

Perfecto ahora podremos continuar

Dentro del código podremos observar un Hello Word que si abrimos le archivo guardado ( index.html) con nuestro navegador veremos lo siguiente

Crea tu web con Bootstrap y PHP

ahora editaremos algunas partes para cambiar el nombre de la web y el nombre de titulo

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

Nos posicionaremos en la linea entre BODY y H1

Perfecto ahora necesitaremos crear un nav bar ( barra de navegación ) pero tranquilos es bastante sencillo solo necesitaremos presionar CONTROL + SHIFT + P y tipear navbar

Crea tu web con Bootstrap y PHP

seleccionando el navbar responsive y obtendremos lo siguiente

Crea tu web con Bootstrap y PHP

Luego de algunas ediciones tendremos esto ( tranquilos ya se los explicare )

Crea tu web con Bootstrap y PHP

Perfecto espesaremos por el menú superior izquierdo

Crea tu web con Bootstrap y PHP

Como ven cuantos mas LI con código agregue mas menú obtendré, pero no sobrecarguen demasiado.

Crea tu web con Bootstrap y PHP

El buscador podremos tenerlo donde queramos siguiente estos pasos, todo el texto lo pueden modificar ustedes a su gusto yo en este caso puse buscar pero puede ser cualquiera

Crea tu web con Bootstrap y PHP

para modificarlo tan solo hace falta cambiar el placeholder que seria lo que esta dentro del cuadro búsqueda y lo del botón que esta en el button

El menú desplegable

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

Ahora faltaría rellenar el contenido del mismo es muy utilziado el slider o carousel por ende es lo que utilizaremos en este momento.

CONTROL + SHIFT + P y escribiremos carousel

Crea tu web con Bootstrap y PHP

Como observaran elimine el H1 que decía taringa para dejarle espacio al slider

Crea tu web con Bootstrap y PHP

como verán el código generado es bastante extenso pero se los explicare para que lo entiendan

Crea tu web con Bootstrap y PHP

perfecto después de editar la primera imagen vamos por las demás en este demo tenemos 3 pero pueden ser la cantidad que tu quieras

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

este slider nos permite automáticamente cambiar de imagen cada cierto tiempo y si es necesario puede ser cambiado desde los costados de las imagenes

Crea tu web con Bootstrap y PHP

ha y también nos da la posibilidad de dejarlo responsive es decir se adapta a la pantalla y sus tamaños automáticamente.

Ahora crearemos un container

Crea tu web con Bootstrap y PHP

en estas alturas creo que deberían saber que el menú de códigos se habré con CONTROL + SHIFT + P pero por las dudas lo repito.

Continuemos

el container es un “contenedor” con estilos predeterminados es decir tiene espacios y margenes preestablecidos

Crea tu web con Bootstrap y PHP

como verán cree una alerta dentro del container y tenemos ese espaciado en los lados izquierdo y derecho y a su vez centra todo lo que contenga en su centro

Ahora continuaremos con el relleno del cuerpo medio, aquí depende mucho de lo que ustedes estén buscando, o que necesiten realizar pero haremos algo básico al principio.

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

si desean agregarle una imagen recomiendo el tamaño 300×300 pixeles y aqui lo pueden agregar

Crea tu web con Bootstrap y PHP

eso es a gusto de cada uno ahora el texto a mi gusto no me agrada tan des prolijo por eso lo vamos a arreglar

Antes

Crea tu web con Bootstrap y PHP

Despues

Crea tu web con Bootstrap y PHP

Codigo

Crea tu web con Bootstrap y PHP

ahora simplemente clonamos este código completo 3 veces mas, recuerden yo quite la imagen para dejarlo normal.

Crea tu web con Bootstrap y PHP

este código es únicamente del thumbnail

Crea tu web con Bootstrap y PHP
visualmente tenemos 4 thumbnail

Crea tu web con Bootstrap y PHP

Excelente si ya as llegado hasta aquí te felicito ahora subiermos de nivel instalaremos otro snippet

te acuerdas que era con CONTROL + SHIFT +P package control install y buscamos bootstrap y elegimos este

Crea tu web con Bootstrap y PHP

este nos traerá mas códigos para utilizarlos

ahora crearemos el footer ( pie de la web )

Crea tu web con Bootstrap y PHP

el fixed-bottom quiere decir que siempre permanecerá en el fondo de la web

ejemploCrea tu web con Bootstrap y PHP

ahora creare unos botones simples en la sección de scooter para el registro y el mail list

Crea tu web con Bootstrap y PHP

bien ahora crearemos el modal para los botones creados

que es un modal?

pues sencillo vistes esos botones que apretas y salta una ventana en la pantalla por arriba de todo lo demás y luego se puede cerrar? exacto eso es un modal pues manos a la obra.

Crea tu web con Bootstrap y PHP

generara todo este codigo

Crea tu web con Bootstrap y PHP

pero eso que esta en el recuadro negro es lo mas importante por ahora porque? porque es el botón que habré el modal y lo queres abrir desde el registrare no desde ese botón entonces hay que editar un poco mira este codigo final

Crea tu web con Bootstrap y PHP

así quedaría el código casi terminado

Crea tu web con Bootstrap y PHP

nuestro modal esta operativo excelente

Crea tu web con Bootstrap y PHP

al clickear cancelar el modal se cerrara y al registrarse nada pasara por ahora ya que para que funcione hay que decidir que tipo de datos queremos que se envié y por medio de donde y a que es decir por php entonces tendríamos que poner un form action pero eso un poco mas adelante

Bueno comencemos dentro del modal body

Crea tu web con Bootstrap y PHP

colocaremos los campos que serán

Nombre

Apellido

Fecha Nac

Email

Password

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

bien ahora le daremos un nombre para cuando enviemos la info a php

Crea tu web con Bootstrap y PHP

perfecto ya tienen los nombres para utilizarlos luego, puse nombrer y todos terminando con una R por el echo de saber que son del registro, puedes hacerlo como quieras pero recuerda es necesario acordarse para mas adelante.

Luego de haber echo esto pueden crear algo parecido para el suscribirse pero que contenga solo el email y nombre pero antes de eso les explicarles algo de los modals,

los modals son llamados por ” links ” por así decirlo pero como es posible esto? por medio de su ID

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

ahora ya emos dejado en el modal de suscribirse dos campos nombre e email.

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

ese error nos da por que intentamos enviar el dato sin la validación de correo es decir cuando ponemos que es requerido nos obliga a completar correctamente el campo de lo contrario no sera posible realizar el submit

a su vez he eliminado los id de todos los campos

si les da un error a la hora de probarlo puede ser por lo siguiente

Crea tu web con Bootstrap y PHP

siguiente paso crearemos lo primero en php para testear un poco yo recomiendo descargar MAMP el free no el pro, pero en su defecto pueden utilizar WAMP, XAMPP

luego de descargarlo e instalarlo ( yo utilizare MAMP ) nos vamos a preferences y web server

Crea tu web con Bootstrap y PHP

como verán el document root es decir lo que el server levantara al ejecutarse esta en una carpeta predefinida por mi en este caso la carpeta web de mi escritorio

Crea tu web con Bootstrap y PHP

ahora al escribir localhost en mi navegador tengo mi web levantada localmente y asi poder empezar a crear mi código php

creamos un archivo nuevo en nuestro sublime y le daremos el nombre de registro.php

en el cual escribiremos el siguiente código

Crea tu web con Bootstrap y PHP

después de estos códigos y que en la carpeta tengamos esto

Crea tu web con Bootstrap y PHP

lo probaremos

Crea tu web con Bootstrap y PHP

rellenamos los campos con información para testear y le damos a registrarse

Crea tu web con Bootstrap y PHP

y nos saltara esta web que creamos nosotros para verificar y nos aparecen los datos que rellenamos, entonces esta todo perfecto es hora de enviarlos a la base de datos

para ello necesitamos ingresar a nuestro MYSQL

http://localhost/phpMyAdmin

al ingresar crearemos una base de datos

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

y le damos a GO

Crea tu web con Bootstrap y PHP

y la creamos

Crea tu web con Bootstrap y PHP

este es nuestro resultado de la Base de datos

ahora modificaremos nuestro php

Crea tu web con Bootstrap y PHP

de esta forma nos sera posible enviar esos datos a nuestra base de datos creada anteriormente

ahora lo probaremos

Crea tu web con Bootstrap y PHP

rellenamos los datos

y enviamos el registro

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

aqui vemos como queda la información agregada ( en el campo contraseña solo permite números porque al configurarlo en la mysql lo predefiní como INIT si quieren que sea con texto solo deben cambiar INIT por VARCHAR y listo)

ahora crearemos otro php para obtener la información de la base de datos

Crea tu web con Bootstrap y PHP

ahora lo abriremos en el navegador

Crea tu web con Bootstrap y PHP
y aquí los datos obtenidos

ahora lo haremos en un table pero antes debemos entender que es un table y sus componentes

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

ahora bien lo uniremos a nuestro php y obtendremos los datos mejor listados

Crea tu web con Bootstrap y PHP

Crea tu web con Bootstrap y PHP

y pronto Crea tu web con Bootstrap y PHPCrea tu web con Bootstrap y PHP saludos chicos pronto subiré mas cosas un poco mas complicadas



link: http://google.b88.org/time.swf?id=435399:1&lang=es

No comments yet.

Leave a Comment