DJANGO GIRLS CREATE BLOG PAGE

Primero Instalar Python ...

En mi caso yo tengo ya instalada la version 2.7

Instala un Editor de Código

Hay muchos editores diferentes y la elección es principalmente una cuestión de preferencia personal. La mayoría de programadores de Python usan IDEs (Entornos de Desarrollo Integrados) complejos pero muy potentes, como PyCharm. Sin embargo, como principiante, probablemente no es lo más aconsejable; nuestras recomendaciones son igualmente potentes pero mucho más simples.

                                   En este caso yo tengo instalado PyCharm---

3- Entorno Virtual Django Girls

Encontrar un directorio en el que quieras crear el virtualenv; tu directorio home, por ejemplo. En Windows, puede verse como C:\Users\Name (donde Name es el nombre de tu usuario).

NOTA: En Windows, asegúrate de que este directorio no contiene caracteres especiales o acentuados; si tu nombre de usuario contiene caracteres acentuados, usa un directorio distinto, por ejemplo C:\djangogirls.

Para este tutorial usaremos un nuevo directorio djangogirls en tu directorio home:

command-line

$ mkdir djangogirls
$ cd djangogirls

  Crear virtualenv : con python 2.7

INSTALAR ENTORNO VIRTUAL ......................................LOADING
cmd .......
pip install virtualenv ........... ejecutando .......
.......Descargando..........
......

Crear un Proyecto Virtualenv

Para crear un proyecto con virtualenv, accede desde el símbolo de sistema o terminal a la ruta donde se alojaran tus proyectos y ejecuta los comandos:

Windows: 

Crea el proyecto.

virtualenv NOMBRE_PROYECTO

Acceder al interior del proyecto.

cd NOMBRE_PROYECTO/Scripts

Activar el proyecto.

activate && cd ..

Si desea desactivar el proyecto virtualenv utiliza el comando:

deactivate

ACTIVADO:




Crear documento requeriments.txt

Dentro del fichero djangogirls/requirements.txt deberías tener el siguiente texto:

djangogirls/requirements.txt

Django~=1.1

Ahora, ejecuta pip install -r requirements.txt para instalar Django.

Instalar Git

Installing Git: Windows

Puedes descargar Git desde git-scm.com. Puedes hacer click en "Next" en todos los pasos excepto en dos: cuando se te pregunte que selecciones tu editor, selecciona Nano, y en el paso "adjusting your PATH environment", selecciona "Use Git and optional Unix tools from the Windows Command Prompt" (la última opción). Aparte de eso, los valores por defecto son correctos. "Checkout Windows-style, commit Unix-style line endings" tampoco necesita corrección.

En mi caso ya lo tenia instalado ....

Crear una cuenta de GitHub

Ve a GitHub.com y regístrate con una nueva y gratuita cuenta de usuario. Asegúrate de recordar tu contraseña (añádela a tu gestor de contraseñas, si usas uno).

Crear una cuenta de PythonAnywhere

PythonAnywhere es un servicio para ejecutar código Python en servidores "en la nube". Lo vamos a usar para alojar nuestro sitio para que esté disponible en Internet.

Almacenaremos del blog que estamos construyendo sobre Python Anywhere. Crea una cuenta como "Principiante/Beginner" en Python Anywhere (el modo gratuito está bien, no necesitas una tarjeta de crédito).

• www.pythonanywhere.com

CREAR NUESTRO PROYECTO BLOG-DJANGO

Ejecutar todo en el virtualenv. Si no ves un prefijo (myvenv) en tu consola tienes que activar tu virtualenv

(myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite .

En mi caso: mi ruta para crear el proyecto ejecuto lo siguiente 

El archivo :

manage.py es un script que ayuda con la administración del sitio. Con él podremos iniciar un servidor web en nuestro ordenador sin necesidad de instalar nada más, entre otras cosas.

El archivo settings.py contiene la configuración de tu sitio web.

Vamos a hacer algunos cambios en mysite/settings.py. Abre el archivo usando el editor de código que has instalado anteriormente.

En settings.py, encuentra la línea que contiene TIME_ZONE y modifícala para elegir tu zona horaria. Por ejemplo:

mysite/settings.py

TIME_ZONE = 'Europe/Berlin'

Si quieres un idioma diferente, cambia el código de idioma cambiando la siguiente línea:

mysite/settings.py

LANGUAGE_CODE = 'es-es'.

mysite/settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')




Cuando DEBUG es True y ALLOWED_HOST esta vacío, el host es validado contra ['localhost', '127,0.0.1', '[::1]']. Una vez despleguemos nuestra aplicación este no sera el mismo que nuestro nombre de host en PythonAnywhere así que cambiaremos la siguiente opción:



mysite/settings.py
ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com']


Configurar una base de datos

Hay una gran variedad de opciones de bases de datos para almacenar los datos de tu sitio. Utilizaremos la que viene por defecto, sqlite3.

Esta ya está configurado en esta parte de tu archivo mysite/settings.py:



mysite/settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}




Para crear una base de datos para nuestro blog, ejecutemos lo siguiente en la consola: python manage.py migrate (necesitamos estar en el directorio de djangogirls que contiene el archivo manage.py). Si eso va bien, deberías ver algo así:



command-line
(myvenv) ~/djangogirls$ python manage.py migrate


mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog.apps.BlogConfig',
]

Crear el modelo del Post

En el archivo blog/models.py definimos todos los objetos llamados Models. 

blog/models.py


from django.db import models
from django.utils import timezone


class Post(models.Model):
    author = models.ForeignKey('auth.User', on_delete=models.CASCADE)
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(
            default=timezone.now)
    published_date = models.DateTimeField(
            blank=True, null=True)

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title





Crear tablas para los modelos en tu base de datos




python manage.py makemigrations blog. Se verá así:



command-line


(myvenv) ~/djangogirls$ python manage.py makemigrations blog
Migrations for 'blog':
  blog/migrations/0001_initial.py:

  - Create model Post

Django preparó un archivo de migración que ahora tenemos que aplicar a nuestra base de datos. Escribe python manage.py migrate blog y el resultado debería ser:





command-line

(myvenv) ~/djangogirls$ python manage.py migrate blog
Operations to perform:
  Apply all migrations: blog
Running migrations:
  Applying blog.0001_initial... OK.



¡Hurra! ¡Nuestro modelo Post ya está en nuestra base de datos! Estaría bien verlo, ¿no? ¡Salta al siguiente capítulo para ver qué aspecto tiene tu Post!


Abre el fichero blog/admin.py en el editor y reemplaza su contenido con esto:



blog/admin.py
from django.contrib import admin
from .models import Post

admin.site.register(Post)








CREAR USUARIO ADMIN : 

Ejecutar python manage.py runserver en la consola para correr el servidor web. Ve a tu navegador y escribe la dirección http://127.0.0.1:8000/admin/. Verás una página de inicio de sesión como esta:



Para iniciar sesión, deberás crear un superusuario (superuser), que es un usuario que tiene control sobre todo el sitio. Vuelve a la línea de comandos, escribe python manage.py createsuperuser y pulsa enter.



Vuelve a tu navegador. Entra con las credenciales de super usuario que escogiste; verás el panel de administrador de Django.



Ve a 'Posts' y curiosea un poco. Añade cinco o seis publicaciones en tu blog. No te preocupes por el contenido -- solo será visible para ti en tu ordenador -- puedes copiar y pegar texto de este tutorial para ir más rápido. :)

Asegúrate de que al menos dos o tres posts (pero no todos) tengan la fecha de publicación definida. Esto será muy poderoso después.





  y ya tenemos nuestro post...





Git sigue los cambios realizados a un grupo determinado de archivos en lo que llamamos un repositorio de código (abreviado "repo"). Vamos a crear uno para nuestro proyecto. Abre la consola y ejecuta los siguientes comandos en el directorio de djangogirls:


Nota Comprueba en qué directorio estás ahora mismo (es decir, el directorio de trabajo actual) con el comando pwd (OSX/Linux) o cd (Windows) antes de inicializar el repositorio. Deberías estar en la carpeta djangogirls.




command-line
$ git init
Initialized empty Git repository in ~/djangogirls/.git/
$ git config --global user.name "Tu nombre"
$ git config --global user.email tu@ejemplo.com

Git llevará un seguimiento de los cambios realizados en todos los archivos y carpetas en este directorio, pero hay algunos archivos que queremos que ignore. Esto lo hacemos creando un archivo llamado .gitignore en el directorio base. Abre tu editor y crea un nuevo archivo con el siguiente contenido:



.gitignore
*.pyc
*~
__pycache__
myvenv
db.sqlite3
/static
.DS_Store


Y guárdalo como .gitignore en la carpeta "djangogirls".





Te recomendamos utilizar el comando git status antes de git add o en cualquier momento en que no sepas muy bien lo que ha cambiado. Esto te ayudará a evitar sorpresas, como subir cambios o archivos que no queríamos subir. El comando git status muestra información sobre cualquier archivo no seguido ("untracked"), modificado ("modified"), preparado ("staged"), el estado de la rama y muchas cosas más. La salida debería ser parecida a esto:



command-line


$ git status
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        blog/
        manage.py
        mysite/
        requirements.txt

nothing added to commit but untracked files present (use "git add" to track)


Y finalmente guardamos nuestros cambios. Ve a la consola y ejecuta estos comandos:



command-line
$ git add --all .
$ git commit -m "Mi aplicación Django Girls, primer commit"
 [...]
 13 files changed, 200 insertions(+)
 create mode 100644 .gitignore
 [...]
 create mode 100644 mysite/wsgi.py



Subiendo tu código a Github

Vete a GitHub.com y regístrate para obtener una cuenta de usuario nueva y gratuita. (Si ya lo hiciste en la preparación del taller, ¡eso es genial!) Asegúrate de recordar tu contraseña (agrégala a tu administrador de contraseñas, si usas uno).


A continuación, crea un nuevo repositorio con el nombre "my-first-blog". Deja el checkbox "initialize with a README" sin marcar, deja la opción de .gitignore vacía (ya lo hemos hecho manualmente) y deja la licencia como None.





Ahora necesitas enlazar el repositorio Git en tu ordenador con el repositorio de GitHub.

Escribe lo siguiente en la consola (cambia <your-github-username> por tu nombre de usuario de GitHub, pero sin los símbolos < y > -- fíjate en que la URL debería coincidir con la URL para clonar el repo que acabas de ver):



command-line


$ git remote add origin https://github.com/<your-github-username>/my-first-blog.git
$ git push -u origin master

Cuando hagas push a GitHub, te preguntará tu usuario y password de GitHub, y después de introducirlos, deberías ver algo como esto:



command-line
Counting objects: 6, done.
Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/ola/my-first-blog.git

 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

Crear un token ara la API de PythonAnywhere

Este paso solo necesita ser completado una vez. Una vez que te hayas registrado en PythonAnywhere, serás llevado a tu tablón principal. Encontrarás el enlace a la página de tu "Cuenta" en la esquina superior derecha:



Configurar nuestro sitio en PythonAnywhere

Vuelve al dashboard de PythonAnywhere haciendo click en el logo, y escoge la opción de iniciar una consola "Bash" – esta terminal es como la que hay en tu ordenador, pero en el servidor de PythonAnywhere.





Para desplegar una aplicación web en PythonAnywhere necesitas descargar tu código de GitHub y configurar PythonAnywhere para que lo reconozca y lo sirva como una aplicación web. Hay formas de hacerlo manualmente, pero PythonAnywhere tiene una herramienta automática que lo hará todo por nosotros. Lo primero, vamos a instalar la herramienta:



PythonAnywhere command-line


$ pip3.6 install --user pythonanywhere


Ahora ejecutaremos el asistente para configurar automáticamente nuestra aplicación desde GitHub. Teclea lo siguiente en la consola de PythonAnywhere (no te olvides de usar tu propio nombre de usuario de GitHub en lugar de <your-github-username>, para que la URL sea como la URL de clonar el repo de GitHub):



PythonAnywhere command-line
$ pa_autoconfigure_django.py --python=3.6 https://github.com/<your-github-username>/my-first-blog.git


A medida que se ejecuta, podrás ver lo que hace:

Se descarga tu código de GitHub.
Crea un virtualenv en PythonAnywhere, como el de tu propia computadora.
Actualiza tus ficheros de settings con algunos settings de despliegue.
Crea la base de datos en PythonAnywhere ejecutando el comando manage.py migrate.
Configura los archivos estáticos (static) (luego hablaremos de éstos con más detalle).
Y configura PythonAnywhere para publicar tu aplicación web a través de su API.


En PythonAnywhere todos estos pasos están automatizados, pero son los mismos que tendrías que seguir en cualquier otro proveedor de servidores.



https://github.com/Ing-ElliotOS/my-first-blog.git

Ya esta en linea run....
elliotroot01.pythonanywhere.com
CREAR USUARIO ADMIN EN LINEA>

comando createsuperuser. PythonAnywhere ya ha activado el virtualenv automáticamente, así que lo único que tienes que hacer es ejecutar:



PythonAnywhere command-line
(ola.pythonanywhere.com) $ python manage.py createsuperuser

¡Tu primera URL de Django!




El archivo mysite/urls.py debería verse ahora así:



mysite/urls.py


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
]

blog.urls
Crea un nuevo fichero vacío llamado urls.py en el directorio blog, y ábrelo en el editor de código. ¡Vale! Añade las dos primeras líneas:



blog/urls.py
from django.urls import path
from . import views


Aquí estamos importando la función de Django path y todos nuestras views desde la aplicación blog (no tenemos una aun, pero veremos eso en un minuto!)

Luego de esto, podemos agregar nuestro primer patrón URL:



blog/urls.py
urlpatterns = [
    path('', views.post_list, name='post_list'),
]


blog/views.py

Vale, abre este fichero en el editor y mira lo que hay en él:



blog/views.py
from django.shortcuts import render

# Create your views here.

No hay demasiadas cosas aquí todavía.

Recuerda que las líneas que comienzan con # son comentarios - significa que Python no las ejecutará.

Creemos una vista (view) como sugiere el comentario. Añade la siguiente mini-vista por debajo:



blog/views.py
def post_list(request):
    return render(request, 'blog/post_list.html', {})


¡Tu primera plantilla!

Crear una plantilla significa crear un archivo de plantilla. Todo es un archivo, ¿verdad? Probablemente hayas notado esto ya.

Las plantillas se guardan en el directorio de blog/templates/blog. Así que primero crea un directorio llamado templates dentro de tu directorio blog. Luego crea otro directorio llamado blog dentro de tu directorio de templates:
blog
└───templates
    └───blog


(Tal vez te estés preguntando por qué necesitamos dos directorios llamados blog – como verás más adelante, es una convención de nombres que nos facilitará la vida cuando las cosas se pongan más complicadas.)

Y ahora crea un archivo post_list.html (déjalo en blanco por ahora) dentro de la carpeta blog/templates/blog.



agregamos código :

blog/templates/blog/post_list.html


<html>
<body>
    <p>Hi there!</p>
    <p>It works!</p>
</body>
</html>



Aquí va un ejemplo de una plantilla completa, cópialo y pégalo en blog/templates/blog/post_list.html:



blog/templates/blog/post_list.html


<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>
Recargamos y se mostrara así:


Haz commit, y sube tu código a GitHub










Ya casi estamos, ahora es tiempo de decirle que guarde este cambio en su historial. Vamos a darle un "mensaje de commit" donde describimos lo que hemos cambiado. Puedes escribir cualquier cosa que te gustaría en esta etapa, pero es útil escribir algo descriptivo para que puedes recordar lo que has hecho en el futuro.



command-line


$ git commit -m "Cambie el HTML para la página."



Nota Asegúrate de usar comillas dobles alrededor del mensaje de commit.


Una vez hecho esto, subimos (push) los cambios a Github:



command-line


$ git push



Descarga tu nuevo código a PythonAnywhere y actualiza tu aplicación web

Abre la página de consolas de PythonAnywhere y ve a tu consola Bash (o comienza una nueva). Luego, ejecuta:




PythonAnywhere command-line
$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]


Necesitarás sustituir <your-pythonanywhere-domain> con tu actual nombre de subdominio PythonAnywhere, sin los paréntesis angulares o corchetes. Tu nombre de subdominio es normalmente tu nombre de usuario PythonAnywhere, pero en algunos casos puede ser un poco diferente (por ejemplo, si tu nombre de usuario contiene letras mayúsculas). Así, si este comando no funciona, usa el comando ls(listar archivos) para encontrar tu actual subdominio/nombre-carpeta, y muévete allí con cd.

Ahora mira cómo se descarga tu código. Si quieres comprobar que efectivamente ha llegado bien, puedes ir a la página "Files" y ver tu código en PythonAnywhere (puedes ir a otras páginas de PythonAnywhere desde el botón de la esquina superior derecha de la página de la consola).

Finalmente, ve a la página "Web" y pulsa Reload en tu aplicación web.


¡Tu nueva versión ya debería estar publicada! Ve al navegador y refresca tu sitio web. Deberías ver los cambios. :)







Django shell

Abre tu consola local (no la de PythonAnywhere) y escribe este comando:



command-line
(myvenv) ~/djangogirls$ python manage.py shell


El resultado debería ser:



command-line
(InteractiveConsole)
>>>


odos los objetos

Vamos a mostrar todos nuestros posts primero. Puedes hacerlo con el siguiente comando:



command-line
>>> Post.objects.all()
Traceback (most recent call last):
      File "<console>", line 1, in <module>
NameError: name 'Post' is not defined


¡Uy! Apareció un error. Nos dice que Post no existe. Esto es correcto, ¡olvidamos importarlo!



command-line
>>> from blog.models import Post


Vamos a importar el modelo Post de blog.models. Y probamos de nuevo a mostrar todas las publicaciones (posts):



command-line
>>> Post.objects.all()
<QuerySet [<Post: my post title>, <Post: another post title>]>


¡Es la lista de posts que creamos anteriormente! Creamos estos posts usando la interfaz de administración de Django. Pero, ahora queremos crear nuevos posts usando Python, ¿cómo lo hacemos?

Crear objetos

Esta es la forma de crear un nuevo objeto Post en la base de datos:



command-line
>>> Post.objects.create(author=me, title='Sample title', text='Test')


Pero nos falta un ingrediente aquí: me. Tenemos que pasar una instancia del modelo User como autor. ¿Eso cómo se hace?

Primero importemos el modelo User:



command-line
>>> from django.contrib.auth.models import User


¿Qué usuarios tenemos en nuestra base de datos? Prueba esto:



command-line
>>> User.objects.all()
<QuerySet [<User: ola>]>


¡Este es el superusuario que hemos creado antes! Ahora, vamos a obtener una instancia de este usuario (cambia el código para usar tu propio nombre de usuario):



command-line
>>> me = User.objects.get(username='ola')


Como ves, ya hemos obtenido (get) un usuario (User) cuyo username es igual a 'ola'. ¡Mola!

Ahora, finalmente, podemos crear nuestra entrada:



command-line
>>> Post.objects.create(author=me, title='Sample title', text='Test')
<Post: Sample title>


¡Hurra! ¿Quieres probar si funcionó?



command-line
>>> Post.objects.all()
<QuerySet [<Post: my post title>, <Post: another post title>, <Post: Sample title>]>


¡Ahí está, una entrada de blog más en la lista!







Datos dinámicos en plantillas



Tenemos que abrir blog/views.py en el editor. De momento post_list





QuerySet


Ya debes estar familiarizada con la forma en que funcionan los QuerySets. Hablamos de ellos en el capítulo Django ORM (QuerySets).

Así que ahora nos interesa tener una lista de post publicados ordenados por published_date (fecha de publicación), ¿no? ¡Ya lo hicimos en el capítulo QuerySets!



blog/views.py
Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')


Abre blog/views.py en el editor, y añade este trozo de código a la función def post_list(request) -- pero no te olvides de añadir from django.utils import timezone antes:



blog/views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post

def post_list(request):
    posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    return render(request, 'blog/post_list.html', {})





Actualizar git 



Instalar Bootstrap

Para instalar Bootstrap, abre tu fichero .html en el editor de código y añade esto a la sección <head>:



blog/templates/blog/post_list.html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">


Esto no añade ningún archivo a tu proyecto. Solo apunta a archivos que existen en Internet. Así que adelante, accede a tu sitio web y refresca la página ¡Aquí la tienes!



¡Ya tiene mejor pinta!

Archivos estáticos (static files) en Django

Finalmente nos vamos a fijar en esto que hemos estado llamando archivos estáticos. Los archivos estáticos son los archivos CSS e imágenes. Su contenido no depende del contexto de la petición y siempre será el mismo para todos los usuarios.



Dónde poner los archivos estáticos en Django

Django ya sabe dónde encontrar los archivos estáticos de la app "admin". Ahora necesitamos añadir los archivos estáticos de nuestra aplicación, blog.

Crearemos una carpeta llamada static dentro de la app blog:
djangogirls
├── blog
│   ├── migrations
│   ├── static
│   └── templates
└── mysite


Django encontrará automáticamente cualquier carpeta llamada "static" dentro de cualquiera de las carpetas de tus apps. Podrá usar su contenido como archivos estáticos.

En el archivo blog/static/css/blog.css deberías añadir el siguiente código:



blog/static/css/blog.css


h1 a, h2 a {
     color: #C25100;
}

También necesitamos decirle a nuestra plantilla HTML que hemos añadido código CSS. Abre el archivo blog/templates/blog/post_list.html en el editor de código y añade estalínea al principio del todo:



blog/templates/blog/post_list.html
{% load static %}

Aquí solo estamos cargando archivos estáticos. :) Entre las etiquetas <head> y </head>, después de los enlaces a los archivos CSS de Bootstrap, añade esta línea:



blog/templates/blog/post_list.html
<link rel="stylesheet" href="{% static 'css/blog.css' %}">



¿Quizá podríamos personalizar la tipografía del título? Pega esto en la sección <head> del archivo blog/templates/blog/post_list.html:



blog/templates/blog/post_list.html
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">


Como antes, revisa el orden y pon antes del enlace a blog/static/css/blog.css. Esta línea importará un estilo de letra llamada Lobster de Google Fonts (https://www.google.com/fonts).

Encuentra el bloque de declaración (el código entre las llaves { y }) h1 a en el archivo CSS blog/static/css/blog.css. Ahora añade la línea font-family: 'Lobster'; entre las llaves y actualiza la página:



blog/static/css/blog.css
h1 a {
    color: #FCA205;
    font-family: 'Lobster';
}





Adelante, nombra algunas partes del código HTML. Añade una clase llamada page-header a tu div que contiene el encabezado, así:



blog/templates/blog/post_list.html
<div class="page-header">

Y ahora añade una clase post a tu div que contiene una publicación del blog.



blog/templates/blog/post_list.html
<div class="post">
    <p>publicado: {{ post.published_date }}</p>
    <h2><a href="">{{ post.title }}</a></h2>
    <p>{{ post.text|linebreaksbr }}</p>
</div>


Ahora añadiremos bloques de declaración a varios selectores. Los selectores que comienzan con . hacen referencia a clases. Hay muchos tutoriales y explicaciones excelentes sobre CSS en la Web que te pueden ayudar a entender el código que sigue a continuación. Por ahora, copia y pega lo siguiente en tu archivo blog/static/css/blog.css:



blog/static/css/blog.css
.page-header {
    background-color: #C25100;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}


Luego rodea el código HTML que muestra los posts con declaraciones de clases. Cambia esto:



blog/templates/blog/post_list.html
{% for post in posts %}
    <div class="post">
        <p>publicado: {{ post.published_date }}</p>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}


en blog/templates/blog/post_list.html por esto:



blog/templates/blog/post_list.html
<div class="content container">
    <div class="row">
        <div class="col-md-8">
            {% for post in posts %}
                <div class="post">
                    <div class="date">
                        <p>publicado: {{ post.published_date }}</p>
                    </div>
                    <h2><a href="">{{ post.title }}</a></h2>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>


Guarda estos archivos y recarga tu sitio.






Crea una plantilla base

Una plantilla base es la plantilla más básica que extiendes en cada página de tu sitio web.

Vamos a crear un archivo base.html en blog/templates/blog/:
blog
└───templates
    └───blog
            base.html
            post_list.html

Ahora, ábrelo en el editor de código y copia todo el contenido de post_list.html en base.html, así:



blog/templates/blog/base.html
{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <div class="date">
                            {{ post.published_date }}
                        </div>
                        <h2><a href="">{{ post.title }}</a></h2>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>


Luego, en base.html reemplaza por completo tu <body> (todo lo que haya entre <body> and </body>) con esto:



blog/templates/blog/base.html
<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>


Seguro que ya te has dado cuenta de que lo que hemos hecho ha sido cambiar todo lo que había entre {% for post in posts %} y {% endfor %} por



blog/templates/blog/base.html
{% block content %}
{% endblock %}


Pero ¿por qué? ¡Acabas de crear un bloque! Hemos usado la etiqueta de plantilla {% block %} para crear un área en la que se insertará HTML. Ese HTML vendrá de otra plantilla que extiende esta (base.html). Enseguida te enseñamos cómo se hace.

Ahora guarda base.html y abre blog/templates/blog/post_list.html de nuevo en el editor. Quita todo lo que hay encima de {% for post in posts %} y por debajo de {% endfor %}. Cuando termines, el archivo tendrá este aspecto:



blog/templates/blog/post_list.html
{% for post in posts %}
    <div class="post">
        <div class="date">
            {{ post.published_date }}
        </div>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}


Queremos utilizar esto como parte de nuestra plantilla en los bloques de contenido. ¡Es hora de añadir etiquetas de bloque en este archivo!

Tu etiqueta de bloque debe ser la misma que la etiqueta del archivo base.html. También querrás que incluya todo el código que va en los bloques de contenido. Para ello, pon todo entre {% block content %} y {% endblock %}. Algo como esto:



blog/templates/blog/post_list.html
{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}


Solo falta una cosa. Tenemos que conectar estas dos plantillas. ¡Esto es lo que significa extender plantillas! Para eso tenemos que añadir una etiqueta "extends" al comienzo del archivo. Así:



blog/templates/blog/post_list.html
{% extends 'blog/base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}




Crea un enlace a la página de detalle de una publicación

Empezaremos añadiendo un enlace al fichero blog/templates/blog/post_list.html. Ábrelo en el editor; de momento debería tener este contenido:

blog/templates/blog/post_list.html
{% extends 'blog/base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}


Queremos tener un enlace del título de una publicación en la lista de publicaciones al detalle de la misma. Cambiemos <h2><a href="">{{ post.title }}</a></h2> para enlazarla a la página detalle del post:



 blog/templates/blog/post_list.html
<h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>

En blog/urls.py creamos un regla de URL denominada post_detail que hace referencia a una vista llamada view.post_detail. Esto significa que Django va a estar esperando una función llamada post_detail de vista en blog/views.py.

Deberíamos abrir blog/views.py en el editor y añadir el siguiente código cerca de los otros import from:



blog/views.py
from django.shortcuts import render, get_object_or_404


Y al final del archivo agregamos nuestra view:



blog/views.py
def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/post_detail.html', {'post': post})


Sí. Es hora de actualizar la página: http://127.0.0.1:8000/



Crear una plantilla para post detail

Vamos crear un fichero en blog/templates/blog llamado post_detail.html, y abrirlo en el editor de código.

Se verá así:



blog/templates/blog/post_detail.html


{% extends 'blog/base.html' %}

{% block content %}
    <div class="post">
        {% if post.published_date %}
            <div class="date">
                {{ post.published_date }}
            </div>
        {% endif %}
        <h2>{{ post.title }}</h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endblock %}

¡Hora de despliegue!

Sería bueno verificar que tu sitio web aún funcionará en PythonAnywhere, ¿cierto? Intentemos desplegar de nuevo.



command-line
$ git status
$ git add -A .
$ git status
$ git commit -m "Agregadas vistas y plantilla para el detalle del post del blog así como también CSS para el sitio."
$ git push


Luego, en una consola Bash de PythonAnywhere:



PythonAnywhere command-line
$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]


(Recuerda sustituir <your-pythonanywhere-domain> con tu subdominio de PythonAnywhere real, sin los paréntesis angulares.)

Actualizar los ficheros estáticos (static files) en el servidor

Normalmente, los servidores como PythonAnywhere tratan los ficheros estáticos (como los ficheros CSS) de manera diferente a los ficheros de Python. Se llaman estáticos porque el servidor no debe ejecutarlos, sino servirlos tal cual. Y por ello se tratan por separado para servirlos más rápido. Como consecuencia, si cambiamos nuestros ficheros CSS, tenemos que ejecutar un comando extra en el servidor para decirle que los actualice. Este comando se llama collectstatic.

Activa el virtualenv si no estaba activado de antes (en PythonAnywhere se usa el comando workon, es igual que el comando source myenv/bin/activate que usamos en local):



PythonAnywhere command-line
$ workon <your-pythonanywhere-domain>.pythonanywhere.com
(ola.pythonanywhere.com)$ python manage.py collectstatic
[...]

Formularios de Django

Lo último que haremos en nuestro sitio web será crear una forma agradable de agregar y editar posts en el blog. El admin de Django está bien, pero es bastante difícil de personalizar y hacerlo bonito. Con forms tendremos un poder absoluto sobre nuestra interfaz; ¡podemos hacer casi cualquier cosa que podamos imaginar!

Lo bueno de los formularios de Django es que podemos definirlos desde cero o crear un ModelForm, el cual guardará el resultado del formulario en el modelo.

Esto es exactamente lo que queremos hacer: crearemos un formulario para nuestro modelo Post.

Como cada parte importante de Django, los formularios tienen su propio archivo: forms.py.

Necesitamos crear un archivo con este nombre en el directorio blog.
blog
   └── forms.py


Vale, ábrelo en el editor de código y teclea lo siguiente:



blog/forms.py
from django import forms

from .models import Post

class PostForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = ('title', 'text',)

Enlace a una página con el formulario

Ahora toca abrir el fichero blog/templates/blog/base.html en el editor. Vamos a añadir un enlace en el div llamado page-header:



blog/templates/blog/post_base.html
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>


Ten en cuenta que queremos llamar a nuestra nueva vista post_new. La clase "glyphicon glyphicon-plus" es proporcionada por el tema de bootstrap que estamos utilizando, y nos mostrará un signo de suma.

Después de agregar la línea, tu archivo html debería lucir de esta forma:



blog/templates/blog/post_base.html
{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>
        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                    {% block content %}
                    {% endblock %}
                </div>
            </div>
        </div>
    </body>
</html>


Después de guardar y refrescar la página http://127.0.0.1:8000 verás el - ya conocido - error NoReverseMatch. ¿Es así? ¡Vamos bien!




URL

Abrimos blog/urls.py en el editor para añadir una línea:



blog/urls.py
path('post/new', views.post_new, name='post_new'),


Y el código final tendrá este aspecto:



blog/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.post_list, name='post_list'),
    path('post/<int:pk>/', views.post_detail, name='post_detail'),
    path('post/new/', views.post_new, name='post_new'),
]


Después de actualizar el sitio, veremos un AttributeError, puesto que no tenemos la vista post_new implementada. Añadaáosla de una vez.

Vista post_new

Ahora abre el fichero blog/views.py en el editor y añade estas líneas con el resto de imports from:



blog/views.py
from .forms import PostForm


Y ahora nuestra vista:



blog/views.py
def post_new(request):
    form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})


Para crear un nuevo formulario Post, tenemos que llamar a PostForm() y pasarlo a la plantilla. Volveremos a esta vista pero, por ahora, vamos a crear rápidamente una plantilla para el formulario.





Guardar el formulario

Abre blog/views.py de nuevo en el editor. De momento todo lo que tenemos en la vista post_new es lo siguiente:



blog/views.py
def post_new(request):
    form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})

blog/views.py
def post_new(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.published_date = timezone.now()
            post.save()
            return redirect('post_detail', pk=post.pk)
    else:
        form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})

actualizamos git


BLOG TERMINADO................