Inserisci qui la tua pubblicità
Creare un modulo per la prenotazione degli esami in Django, con un frontend interattivo (JavaScript, React o Next.js), richiede la definizione di modelli, logica backend e frontend dinamico. Ecco una guida passo-passo:
1. Backend con Django
1.1 Modelli
Defini i modelli per gestire i master, le materie, e le prenotazioni.
from django.db import models
from django.core.exceptions import ValidationError
from datetime import date, timedelta
class Master(models.Model):
name = models.CharField(max_length=100)
cost = models.DecimalField(max_digits=10, decimal_places=2)
def __str__(self):
return self.name
class Subject(models.Model):
master = models.ForeignKey(Master, related_name='subjects', on_delete=models.CASCADE)
name = models.CharField(max_length=100)
def __str__(self):
return self.name
class Booking(models.Model):
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
email = models.EmailField()
master = models.ForeignKey(Master, on_delete=models.CASCADE)
subjects = models.ManyToManyField(Subject, blank=True)
final_exam = models.BooleanField(default=False)
enrollment_date = models.DateField(null=True, blank=True)
def clean(self):
if self.final_exam and self.enrollment_date:
six_months_ago = date.today() - timedelta(days=180)
if self.enrollment_date > six_months_ago:
raise ValidationError("Devi essere iscritto al master da almeno 6 mesi per sostenere l'esame finale.")
def __str__(self):
return f"{self.first_name} {self.last_name} - {self.master.name}"
1.2 Form
Crea un modulo personalizzato per gestire la logica dei campi condizionali.
from django import forms
from .models import Booking
class BookingForm(forms.ModelForm):
class Meta:
model = Booking
fields = ['first_name', 'last_name', 'email', 'master', 'subjects', 'final_exam', 'enrollment_date']
widgets = {
'subjects': forms.CheckboxSelectMultiple(),
'enrollment_date': forms.DateInput(attrs={'type': 'date'}),
}
def clean(self):
cleaned_data = super().clean()
final_exam = cleaned_data.get('final_exam')
enrollment_date = cleaned_data.get('enrollment_date')
if final_exam and not enrollment_date:
raise forms.ValidationError("Seleziona la data di iscrizione al master.")
1.3 Views
Crea una vista per gestire la creazione di una prenotazione.
from django.shortcuts import render, redirect
from .forms import BookingForm
def book_exam(request):
if request.method == 'POST':
form = BookingForm(request.POST)
if form.is_valid():
form.save()
return redirect('success') # Puoi definire una pagina di successo
else:
form = BookingForm()
return render(request, 'book_exam.html', {'form': form})
1.4 Template
Crea un template con campi condizionali per il frontend.
<!DOCTYPE html>
<html>
<head>
<title>Prenotazione Esame</title>
</head>
<body>
<h1>Prenotazione Esame</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<div id="final_exam_section" style="display: none;">
<label for="id_enrollment_date">Data di iscrizione al master:</label>
{{ form.enrollment_date }}
</div>
<button type="submit">Prenota</button>
</form>
<script>
const finalExamCheckbox = document.getElementById('id_final_exam');
const enrollmentDateSection = document.getElementById('final_exam_section');
finalExamCheckbox.addEventListener('change', function() {
if (this.checked) {
enrollmentDateSection.style.display = 'block';
} else {
enrollmentDateSection.style.display = 'none';
}
});
</script>
</body>
</html>
2. Frontend con React o Next.js
Se preferisci un frontend dinamico, React o Next.js può essere integrato tramite una REST API o Django REST Framework (DRF).
2.1 API Django
Installa DRF e crea un'API per gestire le prenotazioni.
pip install djangorestframework
Aggiungi rest_framework in INSTALLED_APPS.
Crea una viewset per gestire le prenotazioni:
from rest_framework import viewsets
from .models import Booking, Master, Subject
from .serializers import BookingSerializer
class BookingViewSet(viewsets.ModelViewSet):
queryset = Booking.objects.all()
serializer_class = BookingSerializer
Crea il serializer:
from rest_framework import serializers
from .models import Booking
class BookingSerializer(serializers.ModelSerializer):
class Meta:
model = Booking
fields = '__all__'
2.2 Frontend React/Next.js
Crea un modulo interattivo usando React/Next.js. Usa una libreria come Axios per inviare i dati all'API Django.
Esempio con Next.js:
import { useState } from 'react';
import axios from 'axios';
export default function BookingForm() {
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
email: '',
master: '',
subjects: [],
final_exam: false,
enrollment_date: '',
});
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
setFormData({
...formData,
[name]: type === 'checkbox' ? checked : value,
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('/api/bookings/', formData);
alert('Prenotazione completata!');
} catch (error) {
console.error(error);
alert('Errore durante la prenotazione.');
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="first_name" placeholder="Nome" onChange={handleChange} />
<input type="text" name="last_name" placeholder="Cognome" onChange={handleChange} />
<input type="email" name="email" placeholder="Email" onChange={handleChange} />
<select name="master" onChange={handleChange}>
<option value="">Seleziona un Master</option>
<option value="1">Master 1</option>
<option value="2">Master 2</option>
</select>
<label>
<input type="checkbox" name="final_exam" onChange={handleChange} />
Sostieni esame finale
</label>
{formData.final_exam && (
<input type="date" name="enrollment_date" onChange={handleChange} />
)}
<button type="submit">Prenota</button>
</form>
);
}
Con queste indicazioni puoi scegliere se utilizzare un approccio basato solo su Django o combinare Django e React/Next.js. Fammi sapere se hai domande o se ti servono dettagli specifici! 😊
4o
barone.anto1@gmail.com
Iscriviti alla nostra newsletter
Iscriviti alla nostra newsletter per non perderti nessuna novità!