manuelver/Curso-lenguaje-python
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Update day 16

Browse Source 
Signed-off-by: Manuel Vergara <manuel@vergaracarmona.es>
This commit is contained in:
Manuel Vergara
2023-05-28 00:34:31 +02:00
parent 22ef92d980
commit 6fc1cc975a
10 changed files with 171 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
python-total/dia_16/README.md
View File

@@ -1271,6 +1271,117 @@ Nos queda así:
## 16.24. - Terminar el sitio
Vamos a tareas_form.html para poner un enlace que permita volver al inicio:
```html
<div class="barra_superior">
<a href="{% url 'tareas' %}">&#x1F860; Volver</a>
</div>
```
- Le agregamos una flecha con un icono html.
- En el input del boton incluimos la clase creada al botón de la página principal.
El formulario completo lo metemos en un div con otra clase para darle estilo:
```html
{% extends 'base/principal.html' %}
{% block content %}
<div class="barra_superior">
<a href="{% url 'tareas' %}">&#x2190; Volver</a>
</div>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<input class="" type="submit" value="Enviar">
</form>
</div>
{% endblock content %}
```
A darle estilo:
```css
.cuerpo-tarjeta {
padding: 10px 20px;
}
```
Queda así:
![](../img/dia16_48.png)
Vamos a tarea_confirm_delete.html y copiamos lo que hemos hecho anteriormente para volver. Y encapsulamos el form en un div con la misma clase que antes, también en el input de submit:
```html
{% extends 'base/principal.html' %}
{% block content %}
<div class="barra_superior">
<a href="{% url 'tareas' %}">&#x2190; Volver</a>
</div>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
<p>Vas a eliminar esta tarea: "{{tarea}}"</p>
<input class="boton" type="submit" value="Eliminar">
</form>
</div>
{% endblock content %}
```
Ya tiene el estilo, lo único que le doy otro color al botón:
![](../img/dia16_49.png)
Ahora le toca a login.html. Creamos el div de la clase barra_superio pero sin volver, esta vez ponemos el h1 de la página. Metemos el form y la pregunta ¿Tienes cuenta? en un div con clase cuerpo-tarjeta y, por último, le damos la clase al input submit:
```html
{% extends 'base/principal.html' %}
{% block content %}
<div class="barra_superior">
<h1>Ingresar</h1>
</div>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<input class="boton" type="submit" value="Ingresar">
</form>
<p>¿No tienes cuenta?<a href="{% url 'registro' %}">Registrate</a></p>
</div>
{% endblock content %}
```
Queda así:
![](../img/dia16_50.png)
En registro.html es igual. Pero además, vamos a modificar el form por defecto poniendo uno a uno los inputs para que no se vea el texto aclaratorio y le damos una aclaración de estilo al input submit para separar el botón del último input:
```html
{% extends 'base/principal.html' %}
{% block content %}
<div class="barra_superior">
<h1>Registro</h1>
</div>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
<label>{{form.username.label}} </label>
{{form.username}}
<label>{{form.password1.label}} </label>
{{form.password1}}
<label>{{form.password2.label}} </label>
{{form.password2}}
<input style="margin-top: 12px;" class="boton" type="submit" value="Registrar">
</form>
<p>Ya tienes cuenta? <a href="{% url 'login' %}">Login</a></p>
</div>
{% endblock content %}
```
Y queda así:
![](../img/dia16_51.png)
## Ficheros y documentación
- [mi_web](mi_web/)
- [web_Python_Total](web_Python_Total/)

21
python-total/dia_16/mi_web/src/proyecto/base/templates/base/login.html
View File

@@ -1,16 +1,23 @@
{% extends 'base/principal.html' %}
{% block content %}
<h1>Ingresar</h1>
<div class="barra_superior">
<h1>Ingresar</h1>
</div>
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<div class="cuerpo-tarjeta">
<input type="submit" value="Ingresar">
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
</form>
<input class="boton" type="submit" value="Ingresar">
</form>
<p>¿No tienes cuenta? <a href="{% url 'registro' %}">Registrate</a></p>
</div>
<p>¿No tienes cuenta?<a href="{% url 'registro' %}">Registrate</a></p>
{% endblock content %}

6
python-total/dia_16/mi_web/src/proyecto/base/templates/base/principal.html
View File

@@ -122,12 +122,16 @@
.boton {
text-decoration: none;
color: #fff;
background-color: #4CAF50;
background-color: #b22493;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
.cuerpo-tarjeta {
padding: 10px 20px;
}
</style>

28
python-total/dia_16/mi_web/src/proyecto/base/templates/base/registro.html
View File

@@ -1,16 +1,30 @@
{% extends 'base/principal.html' %}
{% block content %}
<h1>Registro</h1>
<div class="barra_superior">
<h1>Registro</h1>
</div>
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
<input type="submit" value="Registrar">
<label>{{form.username.label}} </label>
{{form.username}}
</form>
<label>{{form.password1.label}} </label>
{{form.password1}}
<p>Ya tienes cuenta?<a href="{% url 'login' %}">Login</a></p>
<label>{{form.password2.label}} </label>
{{form.password2}}
<input style="margin-top: 12px;" class="boton" type="submit" value="Registrar">
</form>
<p>Ya tienes cuenta? <a href="{% url 'login' %}">Login</a></p>
</div>
{% endblock content %}

17
python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_confirm_delete.html
View File

@@ -1,12 +1,15 @@
{% extends 'base/principal.html' %}
{% block content %}
<div class="barra_superior">
<a href="{% url 'tareas' %}">&#x2190; Volver</a>
</div>
<a href="{% url 'tareas' %}">Volver</a>
<form method="post" action="">
{% csrf_token %}
<p>Vas a eliminar esta tarea: "{{tarea}}"</p>
<input type="submit" value="Eliminar">
</form>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
<p>Vas a eliminar esta tarea: "{{tarea}}"</p>
<input class="boton" type="submit" value="Eliminar">
</form>
</div>
{% endblock content %}

18
python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_form.html
View File

@@ -1,14 +1,16 @@
{% extends 'base/principal.html' %}
{% block content %}
<h1>Formulario de tareas</h1>
<div class="barra_superior">
<a href="{% url 'tareas' %}">&#x2190; Volver</a>
</div>
<a href="{% url 'tareas' %}">Volver</a>
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Enviar">
</form>
<div class="cuerpo-tarjeta">
<form method="post" action="">
{% csrf_token %}
{{form.as_p}}
<input class="boton" type="submit" value="Enviar">
</form>
</div>
{% endblock content %}