Introduction
In this article, we will learn how to create login form and integrate between client side and server side.
Client side is created by Next.js which is made from Javascript(JS) and often used as a full stack web framework across the world.Next.js is incorporated as virtual DOM and highly flexble for expanding any function for web developers.For more developing a rich app, many and amazing modules are now created by communities for Next.js. Inaddition, Next.js is accepted for a large-scale development.
On the server side, I selected Django which is created by Python and is incorporated as web MVC framework. For simpley code, Python is supported many developers and communiites for Python are very active in the wrold.Web frameworks created by python, have Django, Flask, Fast API and Bottle. Django is oftenly used for a large-scale development as well as Next.js.
Implement client side with Next.js and TypeScript
Now, I started to implement frontend side with TypsScript wich is alterbnative as Javascript and is known as type-safety programming language.
【frontend/app/generalUsers/registration/page.tsx】
'use client'
import { useState } from "react"
import { useRouter } from "next/navigation"
import { useForm } from "react-hook-form"
import axios from "axios"
import { error } from "console"
import { CldImage } from "next-cloudinary"
import { CldUploadWidget } from "next-cloudinary"
export default function Registration(){
const router = useRouter();
const defaultValues = {
Id:'',
Name:'',
Email:'',
Password:'',
Department:'',
DepartmentPhone:''
}
const {register,handleSubmit,formState:{errors}} = useForm({
defaultValues
})
const [id,setId] = useState('');
const [name,setName] = useState('');
const [image,setImage] = useState<File | null>(null);
const [email,setEmail] = useState('');
const [password,setPassword] = useState('');
const [department,setDepartment] = useState('');
const [departmentPhone,setDeepartmentPhone] = useState('');
const onSubmit = async(data:any)=>{
try {
const formData = new FormData();
formData.append('generalUserId',id);
formData.append('generalUserName',name);
setImage(null);
formData.append('generalUserImage',"aa");
formData.append('generalUserEmail', email);
formData.append('generalUserPassword', password);
formData.append('generalUserDepartment', department);
formData.append('generalUserDepartmentPhone', departmentPhone);
const response = await axios.post('http://127.0.0.1:8000/generalusers/registergeneralusers/', formData);
if (response.status !== 201) {
alert('User has not been registered.');
return;
}
alert('Successfully registered user');
console.log(response.data);
} catch (error) {
console.log('Error uploading image or submitting user data:', error);
alert('Error uploading image or submitting user data.');
}
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div>
<label>ID</label>
<input
type="text"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.Id}
{...register('Id',{
required:'ID must be required'
})}
onChange={(e)=>setId(e.target.value)}
/>
<div className="text-rose-500">{errors.Id?.message}</div>
</div>
<div>
<label>Name</label>
<input
type="text"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.Name}
{...register('Name',{
required:'Name must be required.'
})}
onChange={(e)=>setName(e.target.value)}
/>
<div className="text-rose-500">{errors.Name?.message}</div>
</div>
<div>
<label>Email</label>
<input
type="email"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.Email}
{...register('Email',{
required:'Mail address must be required.'
})}
onChange={(e)=>setEmail(e.target.value)}
/>
<div className="text-rose-500">{errors.Email?.message}</div>
</div>
<div>
<label>Password</label>
<input
type="password"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.Password}
{...register('Password',{
required:'Password must be required.'
})}
onChange={(e)=>setPassword(e.target.value)}
/>
<div className="text-rose-500">{errors.Password?.message}</div>
</div>
<div>
<label>Department</label>
<input
type="text"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.Department}
{...register('Department',{
required:'Department must be required.'
})}
onChange={(e)=>setDepartment(e.target.value)}
/>
<div className="text-rose-500">{errors.Department?.message}</div>
</div>
<div>
<label>Department Phone<small>Direct Phone</small></label>
<input
type="text"
className="border border-gray-500 rounded-md px-4 py-4"
defaultValue={defaultValues.DepartmentPhone}
{...register('DepartmentPhone',{
required:'DepartmentPhone must be required.'
})}
onChange={(e)=>setDeepartmentPhone(e.target.value)}
/>
<div className="text-rose-500">{errors.DepartmentPhone?.message}</div>
</div>
<button
type="submit"
className="bg bg-blue-500 rounded-md text-white px-4 py-4"
>
Register
</button>
<button
type="button"
className="bg bg-green-500 rounded-md text-white px-4 py-4"
>
BackToTopPage
</button>
</div>
</form>
</div>
)
}
Implement server side with Django
Next, implement server side using Django. We need to create three files including models.py, serializer.py, views.py and urls.py.
【backend/generalusers/models.py】
from django.db import models
# Create your models here.
class GeneralUsers(models.Model):
generalUserId = models.CharField(blank=False,null=False)
generalUserName = models.CharField(blank=False,null=False)
generalUserImage = models.CharField(blank=True,null=True)
generalUserEmail = models.CharField(blank=False,null=False)
generalUserPassword = models.CharField(blank=False,null=False)
generalUserDepartment = models.CharField(blank=False,null=False)
generalUserDepartmentPhone = models.CharField(blank=False,null=False)
def __str__(self):
return self.generalUserId
【backend/generalusers/serializer.py】
from rest_framework import serializers
from .models import GeneralUsers
from django.contrib.auth.hashers import make_password
class GeneralUsersSerializer(serializers.ModelSerializer):
class Meta:
model = GeneralUsers
fields = ['generalUserId','generalUserName','generalUserImage','generalUserEmail','generalUserPassword','generalUserDepartment','generalUserDepartmentPhone']
#generalUserImage = serializers.ImageField(required=False, allow_null=True)
def create(self,validated_data):
password = validated_data['generalUserPassword']
hashed_password = make_password(password)
validated_data['generalUserPassword'] = hashed_password
return super().create(validated_data)
【backend/generalusers/views.py】
#from django.shortcuts import render
from .models import GeneralUsers
from .serializers import GeneralUsersSerializer
from rest_framework import viewsets
from rest_framework.decorators import api_view #追加
from rest_framework.response import Response # 追加
from rest_framework import status #追加
from django.db import transaction # 追加
from django.contrib.auth.hashers import make_password #追加
from django.core.exceptions import ObjectDoesNotExist #Add
from django.contrib.auth.hashers import check_password #Add
from .serializers import GeneralUsersSerializer
# Create your views here.
class GeneralUsersViewSet(viewsets.ModelViewSet):
queryset = GeneralUsers.objects.all()
serializer_class = GeneralUsersSerializer
@api_view(['POST'])
def create_general_user(request):
if request.method == 'POST':
with transaction.atomic():
serializer = GeneralUsersSerializer(data=request.data)
if serializer.is_valid():
password = serializer.validated_data['password']
hashed_password = make_password(password)
serializer.validated_data['generalUserPassword'] = hashed_password
if serializer.is_valid():
serializer.save()
return Response(serializer.data,status=status.HTTP_201_CREATED)
else:
return Response(serializer.errors,status=status.HTTP_500_INTERNAL_SERVER_ERROR)
【backend/generalusers/urls.py】
from django.urls import path,include
from .views import GeneralUsersViewSet #Add
from rest_framework.routers import DefaultRouter
#from .views import GeneralUsersViewSet
router = DefaultRouter()
router.register('registergeneralusers',GeneralUsersViewSet,basename='create_general_user')
urlpatterns =[
path('',include(router.urls))
]
The description for integrating between Next.js and Django, is end.
Thank you for reading my article.
Have a nice coding !!
Top comments (2)
Creating a login form with Next.js and integrating it with a Django API is a common full-stack pattern that blends a modern React-based frontend with a robust Django backend. गोल्ड 365 लॉगिन
been cool seeing steady progress like this put together. always makes me want to try new stuff myself