01-Sitio Web con PHP y MySQL

Para empezar tenemos que instalar Xampp

Lo podemos instalar desde su própria web, pues es software gratuito

descargar XAMPP

El su pagina web tenemos para descargar para:

Windows
Linux
OS X

una vez descargado Xampp el se va alogar en C:XAMPP

dentro de esta carpeta nos encontramos muchas otras carpetas de apache, mysql, php etc

Pero hay una carpeta especial, onde vamos alojar todos nuestros proyectos.

Se llama htdocs

...

Creacion de nuestro proyecto

Dentro de la carpeta htdocs creamos nuestro proyecto.

en esta ocasion le vamos a llamar sitioWeb

Para ver lo que estamos haciendo, tendremos que abrir un navegador cualquier, pero antes hay que poner en marcha nuestro Servidor local

Encender nuestro servidor local

Para encender o poner a correr nuestro servidor, nos vamos a la aplicacion de xampp y le damos en start en las opciones de apache que es nuestro servidor local y tambien le damos en start en Mysql, para que nuestra base de datos este en funcionamiento

Como vemos nuestra aplicacion?

despues de poner a correr nuestro servidor local , vamos a nuestro navegador y escribimos localhost/ en seguida el nombre del proyecto.

En nuestro caso tendriamos que escribir localhost/sitioWeb

Visual studio code y estrutura de nuestro proyecto

Abrimos ahora un editor de codigo, puede ser cualquier editor, yo voy usar Visual studio code

Una vez abierto el visual studio code, abrimos la carpeta con el nombre de nuestro proyecto, en este caso es sitioWeb

Seguidamente creamos nuestro primero archivo con el nombre de index.php

cuando creamos un archivo, el visual studio code abre automaticamente su editor para que se pueda empezar a editar el documento

Creacion de la estrutura en html

Para crear la estrutura de un proyecto html solo tendremos que teclar el simbolo ! y automaticamente visual crea la seguinte estrutura

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Administracion de carpetas

Vamos a crear en nuestra carpeta sitioWeb las seguintes carpetas

CSS es una carpeta onde vamos a guardar los estilos de nuestro sitio
img Carpeta que va a guardar imagenes del sitio
Templates Carpeta que se va encargar de guardar templates del sitio (pequenos trozos de codigo)
Administrador Carpeta onde crearemos un sitio paralelo para administrar el primero

Templates de bootstrap

Para que nuestro proyecto se haga de una forma mas rápida, vamos a utilizar templates de bootstrap

Dejo el enlace de una pagina que tiene templates mas atrativos: Templates de bootstrap

NOTA Para usar los estilos de la página tendremos obviamente que descargar sus estilos

En la barra de navegacion de la pagina vamos al ultimo menu, lo extendemos y descargamos el fichero de estilos de la pagina con el nombre bootstrap.css para el fichero completo

O bootstrap.min.css para el fichero comprimido

Una vez descargado lo colocamos en nuestra carpeta CSS nel proyecto

LLamando nuestros estilos para el proyecto

Una vez tendo los estilos que queremos usar en nuestra carpeta CSS, para llamar estos estilos nos vamos a nuestro proyecto y entre las etiquetas <head> colocamos el link que nos conectara con el fichero en cuestion

quedaria asi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
</body>
</html>

Continuacion

continua leendo el siguinte capitulo