Pasos para la creación de Django:

1. Crear entorno virtual:

python -m venv .venv

2. Seleccionar intérprete:
2.1 ctrl + shift + p
2.2 seleccionar versión de python recomendada
2.3 Después abrir una nueva terminal de CMD
“Si te sale el (.venv) se creó de forma exitosa”
2.2 En caso de que no aparezca:
2.2.1 Usaremos la terminal para acceder a los scripts del entorno
virtual, entramos al entorno con cd .venv o “nombredelentorno”
2.2.2 Después, entramos a la carpeta Scripts con: “cd Scripts”
2.2.3 Por último, solo escribimos “actívate”, y debería de aparecer
(.venv) y la dirección de las carpetas.
NOTA: Algunas veces no saldrá, porque depende mucho de como esta acomodada las
carpetas dentro de nuestro proyecto, por lo que recomendaría abrir en el visual solo
la carpeta que tiene el entorno virtual creado. Por ejemplo:
Tenemos una carpeta “Practicas”, y dentro tenemos 2 mas “DJANGO” y “FLASK”, al
abrir con visual code, puede tener conflictos, porque no encontrara fácilmente el
entorno. Así que la recomendación seria abrir en visual directamente la carpeta del
proyecto en este caso “DJANGO” para facilita el proceso.

Como abrir el directorio directamente con code

Proyecto desde la raiz

Proyecto desde solo la carpeta
3. Instalar Django:
3.1 python -m pip install Django.

4. Instalar Psycopg2
4.1 python -m pip install psycopg2.

5. Crear un directorio de Django:

5.1 django-admin startproject nombredelproyecto

6. Entrar al directorio creado:

6.1 cd nombredelproyecto

7. Crear la aplicación dentro del directorio:

“Para cualquier acción que se vaya a realiza utilizar manage.py”
7.1 python manage.py startapp webapp

8. Correr el servidor:
8.1 python manage.py runserver

9. Crear la conexión a la base de datos

9.1 Dentro de la carpeta que creamos, buscamos el archivo settings.py
9.2 Buscamos el apartado DATABASES
9.3 Agregamos los datos de la conexión a la base de datos:
 Nombreproyecto/settings.py

"default": {
# "ENGINE": "django.db.backends.sqlite3",
# "NAME": BASE_DIR / "db.sqlite3",
"ENGINE": "django.db.backends.postgresql_psycopg2",
"NAME": "postgres",
"USER": "postgres",
"PASSWORD": "19100209",
"HOST": "localhost",
"PORT": "5432",
}

10. Importar las tablas por defecto de Django usando la migración

10.1 python manage.py migrate

11. Verificar que se hayan creado las tablas en la base datos o bien en
pg admin
#Para verificar en la página de administración de django:
11.1 Dentro de la carpeta del proyecto, en la terminal
11.1.2 Crear un super usuario:
python manage.py createsuperuser
11.1.3 Pedira un username
11.1.4 un email
11.1.5 Contraseña
11.1.6 confirmación de la contraseña
12. Ejecutar el servidor con python manage.py runserver
12.1 Verificamos que si podamos iniciar sesion ejecutando el servidor y en la
barra de direcciones agregamos "/admin"

12.2 Iniciamos sesion con lo creado

13. Después creamos una nueva aplicación:

13.1 python manage.py startapp persona
“Toda aplicación debe tener la carpeta templates”

14. En la carpeta persona/models.py agregamos los atributos:

14.1 Recordar que hay que crear la tabla que va a ser referenciada primero

Persona/models.py

class Domicilio(models.Model):
calle = models.CharField(max_length=255)
no_calle = models.IntegerField()
pais = models.CharField(max_length=255)

15. Despues vamos a persona/admin, para agregarlos a la pagina de

administración de jango

Persona/admin.py

from persona.models import Domicilio

# Register your models here.
admin.site.register(Domicilio)
16. Después creamos la migración con el siguiente comando:
python manage.py showmigrations
16.1 Siempre que se crea una aplicación nueva hay que agregarlo en los
settings INSTALLED_APPS para que me detecte las migraciones en la base
de datos.
16.1.1 Vamos al archivo settings.py y en el apartado
"INSTALLED_APPS"
16.1.2 Agregamos el nombre de los modelos

e
16.2 Ahora creamos una solicitud de migración con:
python manage.py makemigrations

17. Realizamos la migración:

Python manage.py migrate

18. Ejecutamos el servidor:

python manage.py runserver

19. Dentro del webapp o aplicacion creamos una nueva carpeta

"templates", donde iran guardados los documentos html
20. En este caso creamos un archivo que servira como el principal, para
poder redireccionar a las diferentes vistas
20.1 Agregando un href que llamaremos ListadoPersonas
<a href="ListadoPersonas">Listado de las personas</a>
21. Ahora, dentro de la carpeta personas, creamos una nueva carpeta
llamada "Templates" y creamos un nuevo documento HTML llamado
indexpersona
22. Dentro de este archivo creamos una tabla donde se guardará o
mostrará los datos consultados:

<h1>Lista de personas</h1>
<table>
<thead>
<tr>
<td>ID</td>
<td>Nombre</td>
<td>Email</td>
</tr>
<tbody>
<!--El bloque de abajo es para agregar codigo de python, algo
parecido como con php -->
{% for persona in personas %}
<tr>
<td>{{persona.id}}</td>
<td>{{persona.nombre}} {{persona.apellido}}</td>
<td>{{persona.emai}}</td>
</tr>
{%endfor%}
</tbody>
</thead>
</table>
 17. Ya creado los documentos, tenemos que referenciarlos para poder
visualizarlos, ahora vamos al archivo 'urls.py' y agregamos el archivo:
from webapp.views import index, indexPersona NOTA: En el archivo urls, es donde
manejaremos las rutas:
Path () : Es el método que redigira a la
urlpatterns = [
dirección que recibe 2 argumentes, la
path("admin/”, admin.site.urls), dirección y el método a ejecutar.

path(" ",index), “ ”: Viene a ser referencia de la

dirección que redigira, la cual se le
path("ListadoPersonas", indexPersona),
agrega a la barra de direcciones.
]
index: Es la función que ejecutara
cuando vaya a esa dirección.

18. Antes de ejecutar el servidor, En la carpeta webapp, en el archivo

views.py para el renderizado de la página agregamos lo siguiente:

webapp/views.py

from persona.models import Persona

def indexPersona(request):
1. personas = Persona.objects.order_by("id")
2. return render(request, "IndexPersona.html",
{"personas": personas})

NOTA: en el archivo views, van a ir las funciones que tendrá nuestra pagina:
1. El modelo Persona para realizar una consulta a la base de datos. La función objects
proporciona un administrador de consultas que permite interactuar con la base de datos.
order_by("id") ordena los resultados por el campo id en orden ascendente.
2. Esta es la parte donde se devuelve la respuesta HTTP. En este caso, se está utilizando la
función render para renderizar una plantilla HTML llamada "IndexPersona.html". Toma 3
argumentos:
request: Es el objeto de solicitud HTTP que se ha pasado a la vista.
"IndexPersona.html": Es el nombre de la plantilla que se va a renderizar. Django buscará esta
plantilla en los directorios de plantillas configurados en tu proyecto.
{"personas": personas}: Es un diccionario que contiene datos que se pasan a la plantilla. En este
caso, se está pasando un diccionario con una clave "personas" y el valor es la lista de personas
que se obtuvo de la consulta a la base de datos.
 18. En la carpeta persona Se crea el archivo forms donde agregamos el
siguiente formulario que se creara automático:

persona/forms.py

from django.forms import ModelForm, EmailInput

from persona.models import Persona
1. class PersonaForm(ModelForm):
2. class Meta:
3. model = Persona
4. fields = "__all__"

# En caso de que se nos solicite un email, implementamos lo siguiente:

widgets = { OJO:
"email": EmailInput( Se está configurando un widget personalizado
attrs={ para el campo email del formulario. Un widget en
Django controla cómo se renderiza y se muestra
"type": "email", un campo en el formulario. En este caso, se está
"class": "form-control", utilizando EmailInput como widget para el
campo email. Con algunos atributos para darle
"style": "max-width:100 px", un mejor estilo.
"placeholder": "Correo",
}
)
}
NOTA:
1. Se está definiendo una nueva clase llamada PersonaForm que hereda de ModelForm. Esto
significa que PersonaForm es una forma especializada de formulario que se basa en un modelo
de base de datos.
2. La clase Meta se utiliza para proporcionar metainformación sobre el formulario, como el modelo
con el que está relacionado y qué campos se deben incluir.
3. model = Persona especifica que el formulario está asociado al modelo Persona. Esto significa que
el formulario se utilizará para crear y actualizar instancias del modelo Persona.
4. Con fields = "__all__", se indica que se deben incluir todos los campos del modelo Persona en el
formulario. Si solo quieres incluir un subconjunto específico de campos, podrías proporcionar
una lista de nombres de campos: fields = ['nombre', 'apellido', 'email'].
 19. Para poder visualizarlo lo agregamos a la carpeta view del proyecto:
from django.shortcuts import render, redirect, get_object_or_404
from persona.models import Persona NOTA: Tenemos que importar:
from persona.forms import PersonaForm render: Sirve para cargar las páginas html.

redirect: Sirve para redireccionar a otras url..

get_object_or_404: Sirve para hacer consulta y manejar

errores en caso de no encontrar nada.

Además de agregar los modelos y los forms de los modelos.

# Vistas
20. En el archivo views de la app Personas
20.1 Antes hay que crear un archivo html llamado Agregar que es donde
cargara el archivo generado
# Función para agregar una nueva persona
def nuevaPersona(request):
1. if request.method == "POST":
2. formapersona = PersonaForm(request.POST)
3. if formapersona.is_valid():
4. formapersona.save()
5. return redirect("ListadoPersonas")
else:
formapersona = PersonaForm()
6. return render(request, "Agregar.html", {"formapersona": formapersona})

NOTA:
1. Verifica que tipo de solicitud es.
2. Se crea un objeto en base a la forma creada usando los datos recibidos mediante el post y request.
3. is_valid() es un método proporcionado por ModelForm en Django que comprueba si los datos
proporcionados son válidos según las reglas de validación del modelo.
4. save() es un método que se proporciona automáticamente a los formularios basados en modelos.
5. Después de guardar la instancia, la vista redirige al usuario a la vista llamada ListadoPersonas.
21. Ya creado
6. Se renderiza y referenciado,
la plantilla ahora vamos
llamada "Agregar.html" y se al archivo
pasa de urlsformapersona
el formulario para como
agregar
contexto. Estolasignifica
dirección:
que en la plantilla se podrá acceder al formulario con el nombre
formapersona.
 NOTA: En el archivo urls, es donde
manejaremos las rutas:
Path () : Es el método que redigira a la
urlpatterns = [
dirección que recibe 2 argumentos, la
path("admin/", admin.site.urls), dirección y el método a ejecutar.

path("", index), “ ”: Viene a ser referencia de la dirección que

redigira, la cual se le agrega a la barra de
path("ListadoPersonas", indexPersona, direcciones.
name="ListadoPersonas"),
index: Es la función que ejecutara cuando
path("nuevapersona", nuevaPersona), vaya a esa dirección.
]

22. Ademas en el archivo principal colocaremos un href para usar la

funcionalidad de cambiar de página:
<a href="nuevapersona">Agregar</a>

23. Ya tenemos para agregar y consultar personas en nuestro proyecto,

ahora crearemos 2 archivos más llamados eliminar,editar,detalle que
serían parecidos al de agregar:
23.1 EditarPersona.html:
1. {%extends"layout.html"%}
2. {%block body%} NOTA:
<div> 1. Esto indica que esta plantilla extiende (hereda) de otra
<form method="post"> plantilla "layout.html". Esto significa que esta plantilla
hereda todos estilos de la plantilla "layout.html"
<h1>Editar Persona</h1> 2. Estos son bloques de contenido. En esta plantilla, este
<table> bloque está siendo sobrescrito para incluir el contenido
específico de esta página.
<div>3. {{formapersona}} 3. Esto renderiza el formulario formapersona en la
</div> plantilla. El formulario formapersona se pasó como
</table> contexto desde la vista, por lo que aquí se mostrará.
4. Esto agrega un token CSRF (Cross-Site Request
<div ><input Forgery) al formulario. Sirve para cuidar las sesiones y
type="submit" que no cualquiera pueda acceder a las páginas.
value="submit"> </div>
4. {% csrf_token %}
</form> </div> {%endblock%}
23.2 El delete no lleva forma solo se usará un método en el archivo views:
 # EliminarPersona
def EliminarPersona(request, id):
persona = get_object_or_404(Persona, pk=id)
if persona:
persona.delete()
return redirect("ListadoPersonas")

NOTA:
1. Se utiliza la función get_object_or_404 para intentar recuperar un objeto del modelo Persona
cuyo id coincida con el valor proporcionado en la URL.
2. persona.delete(): Si se encontró un objeto de Persona, se utiliza el método delete() para
eliminarla de la base de datos.
3. Después de eliminar la instancia, redirige al usuario a la vista llamada ListadoPersonas.

23.3 DetallePersona.html:
{%extends "layout.html"%}
{% block body %}
<div class="container mt-5">
<h1 class="display-4">Detalle Personajes: 1.{{personaje.nombre}}</h1>
<tr>
NOTA:
<td>{{ 2. personaje.id }}</td>
1. Recibe el parámetro persona desde el método de
<td>{{ personaje.nombre }}</td> views y accede a su atributo nombre.
2. Agrega el campo id del objeto recibido para
<td>{{ personaje.vida }}</td>
mostrarlo en una tabla
<td>{{ personaje.rol }}</td> 3. Lo mismo con los siguientes campos.
<td>{{personaje.poder}}</td>
</tr>
<a class="btn btn-primary" href="{% url 'ListadoPersonajes' %}">Regresar</a>
</div>
{% endblock %}
24. Ahora, en index persona, agregar unas celdas vacías para agregar
los diferentes botones de accion para el crud:
{%extends "layout.html"%}
{%block body%}
<div>
<h1>Lista de personas</h1> <a href="nuevapersona">Agregar</a>
<table border="1">
<thead>
<tr>
<td>ID</td>
<td>Nombre</td>
<td>Email</td>
<td></td> <td></td> <td></td> </tr>
<tbody>
<!--El bloque de abajo es para agregar codigo de python,parecido como con php -->
{% for persona in personas %}
<tr>
<td>{{persona.id}}</td>
<td>{{persona.nombre}} {{persona.apellido}}</td>
<td>{{persona.email}}</td>
<td><a href="editarPersona/{{persona.id}}">Editar</a></td>
<td><a href="detallePersona/{{persona.id}}">Detalle</a></td>
<td><a href="EliminarPersona/{{persona.id}}">Eliminar</a></td>
</tr>
{%endfor%}
</tbody>
</thead> </table> </div> {%endblock%}
Quedaria de la forma anterior el index persona
25. Para la funcionalidad de los botones, nos vamos al archivo views
para agregar las funciones correspondientes de cada accion:
La manera final del view.py quedaría de la siguiente manera:
from django.shortcuts import render, redirect, get_object_or_404
from persona.models import Persona
from persona.forms import PersonaForm
# Agregar una nueva persona
def nuevaPersona(request):
if request.method == "POST":
formapersona = PersonaForm(request.POST)
if formapersona.is_valid():
formapersona.save()
return redirect("ListadoPersonas")
else:
formapersona = PersonaForm()
return render(request, "Agregar.html", {"formapersona": formapersona})

# Metodo para editar persona

def editarPersona(request, id):
persona = get_object_or_404(Persona, pk=id)
if request.method == "POST":
formaPersona = PersonaForm(request.POST, instance=persona)
if formaPersona.is_valid():
formaPersona.save()
return redirect("ListadoPersonas")
else:
formaPersona = PersonaForm(instance=persona)
return render(request, "editarPersona.html", {"formapersona": formaPersona})
# EliminarPersona
def EliminarPersona(request, id):
persona = get_object_or_404(Persona, pk=id)
if persona:
persona.delete()
return redirect("ListadoPersonas")

# ConsultarPersonas
def DetallePersona(request, id):
persona = get_object_or_404(Persona, pk=id)
return render(request, "detallePersona.html", {"persona": persona})

26. Ya creados los métodos, tenemos que dirigirnos al archivo urls.py

para hacer las referencias para mandarlos llamar:
El urls final quedaría de la siguiente manera :
from django.contrib import admin
from django.urls import path
from webapp.views import index, indexPersona
from persona.views import *
urlpatterns = [
path("admin/", admin.site.urls),
path("", index),
path("ListadoPersonas", indexPersona, name="ListadoPersonas"),
path("nuevapersona", nuevaPersona),
path("detallePersona/<int:id>", DetallePersona),
path("editarPersona/<int:id>", editarPersona),
path("EliminarPersona/<int:id>", EliminarPersona),
]
27. Crearemos un nuevo html llamado layout.html que será donde se
guardaran los estilos automáticos de las diferentes pantallas quedaría
de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh
" crossorigin="anonymous">
<title>Layout</title>
</head>
<body>
{%load static %}
# Aquí hace referencia a la carpeta static, que tendrá todos los elementos estáticos
como imágenes, audios,etc.
{%block body %}
#Dentro de este bloque, es donde aparecerá el contenido de las diferentes páginas
que tengamos dentro del proyecto
{%endblock%}
</body>
</html>

Esto dependiendo de cada uno se agregará los estilos o imágenes que siempre van a
aparecer
28. En caso de querer utilizar las imagenes o algun otro recurso fijo, se crea una
carpeta llamada "static" que ahí se guardaran estos archivos,
por ejemplo ahí cargamos una imagen que sera mostrada en cada una de las
páginas, pero para eso tenemos que modificar los diferentes HTML agregando 2
etiquetas, al final quedarian de la siguiente manera los htmls:

28. 1. Agregar.html:
{%extends "layout.html"%}
{%block body%}
<div>
<form method="post">
<h1>Agregar Persona</h1>
<table>
<div>
{{formapersona}}
</div>
</table>
<div >
<input type="submit" value="submit">
</div>
{% csrf_token %}
</form>
</div>
{%endblock%}
28.2 .detallePersona.html:
{%extends "layout.html"%}
{%block body%}
<div>
 <h1>
{{persona.id}}
{{persona.nombre}}
{{persona.apellido}}
{{persona.email}}
</h1>
<a href="{% url 'ListadoPersonas' %}"> Regresar </a>
</div>
{%endblock%}
28.3. indexPersona.html:
{%extends "layout.html"%}
{%block body%}
<div>
<h1>Lista de personas</h1>
<a href="nuevapersona">Agregar</a>
<table border="1">
<thead>
<tr>
<td>ID</td>
<td>Nombre</td>
<td>Email</td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody>
<!--El bloque de abajo es para agregar codigo de python, algo parecido
como con php -->
 {% for persona in personas %}
<tr>
<td>{{persona.id}}</td>
<td>{{persona.nombre}} {{persona.apellido}}</td>
<td>{{persona.email}}</td>
<td><a href="editarPersona/{{persona.id}}">Editar</a></td>
<td><a href="detallePersona/{{persona.id}}">Detalle</a></td>
<td><a href="EliminarPersona/{{persona.id}}">Eliminar</a></td>
</tr>
{%endfor%}
</tbody>
</thead>
</table>
</div>
{%endblock%}
28.4. editarPersona.html:
{%extends "layout.html"%}
{%block body%}
<div>
<form method="post">
<h1>Editar Persona</h1>
<table>
<div>
{{formapersona}}
</div>
</table>
<div >
 <input type="submit" value="submit">
</div>
{% csrf_token %}
</form>
</div>
{%endblock%}

Con esto quedaría finalizado el proyecto, ya solo quedaría hacer las

modificaciones dependiendo de las necesidades de cada persona o lo que
requiera el proyecto en general, para los estilos es en "layout.html"