M6 hito III

Transcript

1. PROYECTO DJANGO o yflans HITO III Por: Marco Contreras
2. REQUERIMIENTO 1 Crear modelo Flan, generar y aplicar sus migraciones y agregar el modelo al panel de administración. Agrega al menos 8 elementos de Flan.
3. HITO 3 - REQUERIMIENTO 1 Aquí tenemos la definición del modelo Flan, según el requerimiento Aquí tenemos que editar para definir el modelo Flan
4. HITO 3 - REQUERIMIENTO 1 Aquí generamos la migración inicial Aquí está contenido del archivo de migración generado
5. HITO 3 - REQUERIMIENTO 1 Aquí vemos el proceso realizado Corremos las migraciones
6. HITO 3 - REQUERIMIENTO 1 Aquí mostramos las tablas que se crearon en la base de datos posterior a ejecutar las migraciones Describimos la tabla en la base de datos Nos conectamos a la base de datos
7. HITO 3 - REQUERIMIENTO 1 Aquí tenemos que editar para registrar el modelo Registramos el modelo en el panel administrativo
8. HITO 3 - REQUERIMIENTO 1 Creamos el superusuario Revisamos la creación en la base de datos Revisamos la creación a través del shell de Django
9. HITO 3 - REQUERIMIENTO 1 127.0.0.1:8080/admin Iniciamos sesión en el panel de admin Administramos el modelo registrado
10. HITO 3 - REQUERIMIENTO 1 Guardamos el nuevo flan en la base de datos Completamos los campos
11. HITO 3 - REQUERIMIENTO 1 Podemos editar o eliminar el registro creado Revisamos la creación en la base de datos
12. HITO 3 - REQUERIMIENTO 1 Hemos agregado 8 registros, como lo solicita el requerimiento
13. REQUERIMIENTO 2 Mostrar tus flanes recién creados al público. Agrégale el resultado de todos los Flanes existentes en tu sitio web como contexto a tu vista de la ruta “indice” e imprime los resultados a través de la plantilla index.html por medio de componentes cards de bootstrap, utilizando un ciclo for de las plantillas de django para mostrar cada uno de los Flan anteriormente creados. - En la página “indice” se mostrarán solo los Flan cuyo atributo is_private es False. - En la página “welcome”, se mostrarán solo los Flan cuyo atributo is_private es True.
14. HITO 3 - REQUERIMIENTO 2 web/views.py from django.shortcuts import render def indice(request): flans = Flan.objects.all() return render(request, 'index.html', { 'flans': flans }) Enviamos el contexto (variable) al template para accederlo.
15. HITO 3 - REQUERIMIENTO 2 web/templates/index.html {% extends "base.html" %} {% block content %} <h2>Índice</h2> <div class="container my-4"> <div class="row"> {% for flan in flans %} <div class="col-6 col-md-3"> <div class="card shadow-sm mb-3 border"> <img src="{{ flan.image_url }}" alt="{{ flan.name }}" class="card-img-top"> <div class="card-body"> <h5 class="card-title">{{ flan.name }}</h5> <p class="card-text">{{ flan.description }}</p> </div> </div> </div> {% endfor %} </div> </div> {% endblock %} Recorremos el conjunto de flanes Utilizamos el componente card de bootstrap
16. HITO 3 - REQUERIMIENTO 2
17. HITO 3 - REQUERIMIENTO 2 web/views.py def indice(request): flanes_publicos = Flan.objects.filter(is_private=False) return render(request, 'index.html', { 'flanes_publicos': flanes_publicos }) def acerca(request): return render(request, 'about.html', {}) def bienvenido(request): flanes_privados = Flan.objects.filter(is_private=True) return render(request, 'welcome.html', { 'flanes_privados': flanes_privados }) Enviamos al contexto sólo aquellos flanes que su atributo is_private sea False. Enviamos al contexto sólo aquellos flanes que su atributo is_private sea True.
18. HITO 3 - REQUERIMIENTO 2 web/templates/index.html {% for flan in flanes_publicos %} <div class="col-6 col-md-3"> <div class="card shadow-sm mb-3 border"> <img src="{{ flan.image_url }}" alt="{{ flan.name }}" class="card-img-top"> <div class="card-body"> <h5 class="card-title">{{ flan.name }}</h5> <p class="card-text">{{ flan.description }}</p> </div> </div> </div> {% endfor %} Recorremos los flanes públicos en el template index.html web/templates/welcome.html {% for flan in flanes_privados %} <div class="col-6 col-md-3"> <div class="card shadow-sm mb-3 border"> <img src="{{ flan.image_url }}" alt="{{ flan.name }}" class="card-img-top"> <div class="card-body"> <h5 class="card-title">{{ flan.name }}</h5> <p class="card-text">{{ flan.description }}</p> </div> </div> </div> {% endfor %} Recorremos los flanes privados en el template welcome.html
19. HITO 3 - REQUERIMIENTO 2 127.0.0.1:8000/bienvenido 127.0.0.1:8000/
20. REQUERIMIENTO 3 Crear el modelo ContactForm, generar y aplicar sus migraciones y agregar el modelo al panel de administración de Django. Atributo Tipo Anotaciones contact_form_uuid UUIDField default = uuid.uuidd4, editable = False customer_email EmailField customer_name CharField max_length = 64 message TextField
21. HITO 3 - REQUERIMIENTO 3 Aquí tenemos la definición del modelo ContacForm, según el requerimiento Aquí tenemos que editar para definir el nuevo modelo
22. HITO 3 - REQUERIMIENTO 3 Aquí revisamos la base de datos Aquí generamos la nueva migración
23. HITO 3 - REQUERIMIENTO 3 Aquí tenemos que editar para registrar el modelo Registramos el modelo en el panel administrativo
24. HITO 3 - REQUERIMIENTO 3 Aquí tenemos agregado el modelo en el panel administrativo
25. HITO 3 - REQUERIMIENTO 3 templates/contact.html {% extends "base.html" %} {% block content %} <h2>Contacto</h2> {% endblock %} Creamos el template que mostrará el contenido onlyflans/urls.py from django.contrib import admin from django.urls import path from web.views import indice, acerca, bienvenido urlpatterns = [ path('admin/', admin.site.urls), path('', indice, name='indice'), path('acerca', acerca, name='acerca'), path('bienvenido', bienvenido, name='bienvenido'), path('contacto', contacto, name='contacto'), ] Añadimos la vista al urlpattern
26. HITO 3 - REQUERIMIENTO 3 templates/navbar.html <nav class="navbar navbar-expand-lg bg-body"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-target="#navbar" data-bs-toggle="collapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <div class="navbar-nav me-auto mb-2 mb-lg-0"> <a class="nav-link" aria-current="page" href="{% url "indice" %}">Índice</a> <a class="nav-link" href="{% url "acerca" %}">Acerca</a> <a class="nav-link" href="{% url "bienvenido" %}">Bienvenido</a> <a class="nav-link" href="{% url "contacto" %}">Contacto</a> </div> </div> </div> </nav> Agregamos la url a la navegación
27. HITO 3 - REQUERIMIENTO 1 web/forms.py from django import forms class ContactFormForm(forms.Form): customer_email = forms.EmailField(label="Correo") customer_name = forms.CharField(max_length=64, label="Nombre") message = forms.CharField(label="Mensaje") Creamos el formulario, que luego pasaremos al contexto web/views.py from .forms import ContactFormForm def contacto(request): if request.method == "POST": form = ContactFormForm(request.POST) if form.is_valid(): return HttpResponseRedirect('/') else: form = ContactFormForm() return render(request, 'contact.html', { 'form': form }) Importamos el formulario, y lo pasamos al contexto y le pasamos la información si la petición viene por el método POST.
28. HITO 3 - REQUERIMIENTO 3 web/templates/contact.html {% extends "base.html" %} {% block content %} <div class="container"> <form action="/contacto" method="post"> {% csrf_token %} {{ form }} <input type="submit" value="Submit"> </form> </div> {% endblock %} Formulario renderizado en el navegador Formulario renderizado en la plantilla
29. HITO 3 - REQUERIMIENTO 3 web/views.py def exito(request): return render(request, 'success.html', {}) Definimos una vista para renderizar una plantilla de exito web/templates/success.html {% extends "base.html" %} {% block content %} <h3>Exito</h3> {% endblock %} Añadimos contenido a la plantilla onlyflans/urls.py urlpatterns = [ path('admin/', admin.site.urls), path('', indice, name='indice'), path('acerca', acerca, name='acerca'), path('bienvenido', bienvenido, name='bienvenido'), path('contacto', contacto, name='contacto'), path('exito', exito, name='exito'), ] Añadimos la url al urlpatterns
30. HITO 3 - REQUERIMIENTO 3 web/templates/success.html {% extends "base.html" %} {% block content %} <div class="container my-5"> <div class="col-12 col-md-6 mx-auto text-center"> <h3>Gracias por contactarte con OnlyFlans<br/> te responderemos en breve</h3> <div class="text-center"> <a href="{% url 'indice' %}" class="btn btn-primary"> Volver al inicio </a> </div> </div> </div> {% endblock %}
31. HITO 3 - REQUERIMIENTO 3 web/views.py from .models import Flan, ContactForm def contacto(request): if request.method == "POST": form = ContactFormForm(request.POST) if form.is_valid(): ContactForm.objects.create(**form.cleaned_data) return HttpResponseRedirect('/exito') else: form = ContactFormForm() return render(request, 'contact.html', { 'form': form }) Creamos un nuevo registro en la bd Revisamos en la bd el registro creado
32. HITO 3 - REQUERIMIENTO 3 web/templates/contact.html {% block content %} <div class="col-12 col-md-6 mx-auto"> <form action="/contacto" method="post" class="card p-3"> {% csrf_token %} {{ form.nom_field_errors }} <div class="mb-3"> {{ form.customer_email.label_tag }} {{ form.customer_email }} </div> <div class="mb-3"> {{ form.customer_name.label_tag }} {{ form.customer_name }} </div> <div class="mb-3"> {{ form.message.label_tag }} {{ form.message }} </div> <input type="submit" value="Enviar" class="btn btn-success"> </form> </div> {% endblock %} web/forms.py class ContactFormForm(forms.Form): customer_email = forms.EmailField(label="Correo",widget=forms.EmailInput( attrs={ 'class': 'form-control', 'placeholder': 'xyz@gmail.com' } )) customer_name = forms.CharField( max_length=64, label="Nombre", widget=forms.TextInput( attrs={ 'class': 'form-control', 'placeholder': 'jhon doe' } )) message = forms.CharField(label="Mensaje", widget=forms.Textarea( attrs={ 'class': 'form-control', 'placeholder': 'Escribenos tu experiencia o recomendación' } ))
33. HITO 3 - REQUERIMIENTO 3
34. HITO 3 - REQUERIMIENTO 3 web/forms.html class ContactFormModelForm(forms.ModelForm): class Meta: model = ContactForm fields = ['customer_email', 'customer_name', 'message'] web/views.py from .forms import ContactFormForm,ContactFormModelForm def contacto(request): if request.method == "POST": form = ContactFormModelForm(request.POST) if form.is_valid(): ContactForm.objects.create(**form.cleaned_data) return HttpResponseRedirect('/exito') else: form = ContactFormModelForm() return render(request, 'contact.html', { 'form': form }) Creación de formulario con ModelForm web/templates/contact.html <form action="/contacto" method="post" class="card p-3"> {% csrf_token %} {{ form.nom_field_errors }} {{ form }} <input type="submit" value="Enviar" class="btn btn-success"> </form>
35. FIN HITO III