Forem: SKY-HaYaTo

How to create Login Form with Next.js and integrate with Django API

SKY-HaYaTo — Sat, 31 May 2025 12:23:29 +0000

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 !!

Nuxt3 form validation on client side with Yup

SKY-HaYaTo — Fri, 30 May 2025 15:51:19 +0000

Introduction
In this article, we will learn that how to implement Nuxt3 form validation on client side with Yup.

Yup is a schema builder for runtime value parsing and validation. As you might know, there are some schema validation moduldes like Yup, Zod and so on.

By using these validation modules, we are not able to enhance effiency of web development but also decrease cost of programming. Also, modules can make web developers with your teams integrate coding rules and improve maintenace for expanding functions.

From the perspective vies of enhancing and maintaning programs, thse modules are supported and used for many web companies, and the community of using these library are active across ther world.

Yup as well as Zod is hightly flexible to customize valiation and error message on client side.

In addition, the code rule of validation is simple and easy to understand for web developers.

Yup module is managed for npm and yarn, and it is able to use both Nuxt3 and Next.js.

Sample image for Nuxt3 app
The goal of this page is to validate Nuxt3 form like this.

If we click submit button before not input values and select radio button, checkbox, Yup validation will be active and show error message on client side.

The below picture is to display validate.

Install module of Yup

I used to install Yup module by npm.

The Official web site for Yup is below link.

https://www.npmjs.com/package/yup

To install in Nuxt3 app, input command line like this.

npm i yup

How to use in Nuxt3 app

After installing Yup module, import module information in nuxt3 file.

import * as yup from 'yup';

The full code is below.

frontend/pages/navigation/nabigation.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';
import axios from 'axios';
import { useRouter } from 'vue-router';

const formRef = ref(null);
const { handleSubmit } = useForm();

const router = useRouter();

/*---Name validation---*/
const nameField = useField(
  'name',
  yup.string().required('Name must be required.').min(2, 'Please input over 1 character.')
);
const { value: name, errorMessage: nameerror } = nameField;

/*---Email validation---*/
const emailField = useField(
  'email',
  yup.string().required('Email must be required.').matches(/^[a-zA-Z0-9_\-]+(\.[a-zA-Z0-9_\-]+)*@([a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9]\.)+[a-zA-Z]{2,}$/, { message: 'Mail address is invalid' })
);
const { value: email, errorMessage: emailerror } = emailField;

/*---Password validation---*/
const passwordField = useField(
  'password',
  yup.string().required('Password must be required.').min(2, 'Please input over 1 character.').max(11, 'The password is too long. Please input until 10 characters.')
);
const { value: password, errorMessage: passworderror } = passwordField;

/*---Gender validation---*/
const genderField = useField(
  'gender',
  yup.string().required('Gender must be required.')
);
const { value: gender, errorMessage: gendererror } = genderField;

/*---Survey validation---*/
const surveyField = useField<string[]>(
  'survey',
  yup.array().of(yup.string()).min(1, 'Please choose at least one.'),
  {initialValue:[]} // 配列の長さが1以上であることを確認
);
const { value: survey } = surveyField;

const nameErrorMessage = ref('');
const emailErrorMessage = ref('');
const passwordErrorMessage = ref('');
const genderErrorMessage = ref('');
const surveyErrorMessage = ref('');

/** Set alert bar on header */
const globalError = ref('');
const showAlert = ref(false);

/** Define formData validate flag */
const flagForValidate = ref(true);

const surveyOptions = [
  'I want to know from News letters', 
  'I want to know from Campaign', 
  'I want to know from Events'
];

const onSubmit = async()=>{

 try{
  /** Initialize validate flag. */
  flagForValidate.value = true;
  /** Hidden alert display */
  showAlert.value = false;
  /** Initialize error message */
  nameErrorMessage.value = '';
  emailErrorMessage.value = '';
  passwordErrorMessage.value = '';
  genderErrorMessage.value = '';
  surveyErrorMessage.value = '';

  /** Define FormData object */
  const formData = new FormData();

  /** Validate value of name if name is empty or not. */
  if(name.value === '' || name.value === undefined){
    nameErrorMessage.value = 'Please input your name.';
    /** Update value of flag */
    flagForValidate.value = false;
  }
  formData.append('name',name.value);

  /** Validate value of email if email is empty or not. */
  if(email.value === '' || email.value === undefined){
    emailErrorMessage.value = 'Please input your email.';
    /** Update value of flag */
    flagForValidate.value = false;
  }
  formData.append('email',email.value);

  /** Validate value of password if password is empty or not. */
  if(password.value === '' || password.value === undefined){
    passwordErrorMessage.value = 'Please input your password.';
    /** Update value of flag */
    flagForValidate.value = false;
  }
  formData.append('password',password.value);

  /** Validate value of gender if gender is empty or not. */
  if(gender.value === '' || gender.value === undefined){
    genderErrorMessage.value = 'Please input your gender.';
    /** Update value of flag */
    flagForValidate.value = false;
  }
  formData.append('gender',gender.value);

  /** Validate value of gender if gender is empty or not. */
  if(survey.value.length === 0 || survey.value === undefined){
    surveyErrorMessage.value = 'Please input your survey.';
    /** Update value of flag */
    flagForValidate.value = false;
  }

  /** Evaluate value of flag:if this is false,show alert message on header.*/
  if(!flagForValidate.value){
    showAlert.value = true;
    globalError.value = 'Invalide some values on the form.Please confirm and input data.';
    return;
  }

  formData.append('survey',JSON.stringify(survey.value));
  console.log('survey.value:', survey.value);
  console.log(...formData.entries());

  const response = await axios.post('http://localhost:8000/api/creategeneraluser/',formData);
  if(response.status === 201){
    alert('Sucess');
    console.log(response);
    router.push('/dashboard/dashboard');
  }else{
    alert('>>');

  }
 }catch(error){
  alert('error');
  console.log(error);
 }

}

//const router = useRouter();
const clickBackToTopPage = () => {
  router.push('/');
};
</script>

<template>
  <v-app>
    <v-alert
    v-if="showAlert"
    :text="globalError"
    type="error"
    title="Invalide Error"
    class="mt-2 mb-4"
    border="start"
    variant="tonal"
    color="error"
    icon="$error"
    prominent
  ></v-alert>
    <v-main>
      <v-container class="mt-5">
        <v-form @submit.prevent="onSubmit" ref="formRef">
          <!-- Name -->
          <v-text-field
            v-model="name"
            label="Name"
            required
          ></v-text-field>
          <span>{{ nameerror }}</span>
          <span style="color:red;">{{ nameErrorMessage }}</span>

          <!-- Mail Address -->
          <v-text-field
            v-model="email"
            label="Email"
            type="email"
            required
          ></v-text-field>
          <p>{{ emailerror }}</p>
          <span style="color:red;">{{ emailErrorMessage }}</span>

          <!-- Password -->
          <v-text-field
            v-model="password"
            label="Password"
            type="password"
            required
          ></v-text-field>
          <p>{{ passworderror }}</p>
          <span style="color:red;">{{ passwordErrorMessage }}</span>

          <!-- Gender (radio button) -->
          <v-radio-group
            v-model="gender"
            label="Sex"
            row
          >
            <v-radio label="man" value="man"></v-radio>
            <v-radio label="woman" value="woman"></v-radio>
            <v-radio label="other" value="other"></v-radio>
          </v-radio-group>
          <p>{{ gendererror }}</p>
          <span style="color:red;">{{ genderErrorMessage }}</span>
          <br/>
          <!-- Survey (checkboxes) -->
          <v-label>Survey</v-label>
          <v-row>
            <v-col cols="12" v-for="option in surveyOptions" :key="option">
              <v-checkbox
                :label="option"
                :value="option"
                v-model="survey"
                hide-details
              />
            </v-col>
          </v-row>
          <span style="color:red;">{{ surveyErrorMessage }}</span>
          <br/>
          <!--
          <v-selection-group v-model="survey" multiple>
            <v-checkbox
              v-for="option in surveyOptions"
              :key="option"
              :label="option"
              :value="option">
            </v-checkbox >
          </v-selection-group>
          <p>{{ surveyerror }}</p>
          -->

          <!-- Submit button -->
          <v-btn type="submit" color="primary" class="mr-4">Register</v-btn>
          <v-btn type="button" color="success" @click="clickBackToTopPage">BackToTopPage</v-btn>
        </v-form>
      </v-container>
    </v-main>
  </v-app>
</template>

The description of Nuxt3 form validation with yup, is end.
Thank you for reading my article.

How to delete data using golang web framework Beego?

SKY-HaYaTo — Wed, 26 Feb 2025 13:36:19 +0000

Introduction

Beego is one of golang web frameworks including Gin,Echo,Revel and Iris. One of them, Beego is full stack framework and suitable to version of golang.In addition, Beego recruts MVC model which is used as a large scale development project. We know representative of MVC frameworks are C# ASP.Net Core,Ruby onRails,Laravel and Spring Boot.These tools are also used large projects.
in this article,today, I introduce process that Deleting one recored from PostgreSQL using Beego, it is one of CRUD process.

Directory of Beego project

Directory of my project is as below.
You can see like MVCmodel.

MY-FIRST-BEEGO-PROJECT
├─ conf
│  └─ app.conf
├─ controllers
│  └─ default.go
├─ crypt
│  └─ crypt.go
├─ models
│  └─ todo.go
├─ routers
│  └─ router.go
└─ static
   ├─ css
   ├─ img
   ├─ js
   │  ├─ form.js
   │  ├─ login.js
   │  ├─ reload.min.js
   │  ├─ todoCreate.js
   │  ├─ todoCard.js
   │  └─ todoList.js
   ├─ lib
   │  └─ bootstrap
   │     ├─ css
   │     │  ├─ bootstrap-grid.min.css
   │     │  └─ bootstrap.min.css
   │     ├─ js
   │     │  ├─ bootstrap-bundle.min.js
   │     │  └─ bootstrap.min.js
   │     ├─ jquery
   │     │  └─ jquery.js
   │     └─ upload
   ├─ views
   │  ├─ mytodo
   │  │  ├─ addTodo.tpl
   │  │  └─ myList.tpl
   │  ├─ index.tpl
   │  ├─ subIndex.tpl
   │  └─ thirdIndex.tpl
   └─ main.go

Make Frontend Pages

Now,I make delete page using .tpl which is Beego default templateengine.

views/mytodo/myTaskDelete.tpl

<!DOCTYPE html>
<html>
    <title>Task Delete</title>
    <!--Common Library-->
    <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/static/lib/jquery/jquery.js"></script>
    <!--Personal Files-->
    <script type="text/javascript" src="/static/js/taskDelete.js"></script>
    <body>
        <form enctype="multipart/form-data">
            <div>
                <input type="hidden" id="registerId" name="registerId" value="" />
                <input type="hidden" id="taskId" name="taskId" value="" />
            </div>
            <div class="form-group mb-3">
                <label>タスク名</label>
                <input type="text" id="myTask" name="myTask" class="form-control border border-dark" value="" required />
            </div>
            <div class="form-group mb-3">
                <label>タスク詳細</label>
                <textarea class="form-control" id="myTaskDescription" name="myTaskDescription" rows="3"></textarea>
            </div>
            <div class="form-group mb-3">
                <label>優先度</label>
                <select id="myTaskPriority" name="myTaskPriority" class="form-select form-select-lg mb-3">
                    <option>--選択してください<small>Please select.</small>--</option>
                    <option value="1">高<small>High</small></option>
                    <option value="2">中<small>Middle</small></option>
                    <option value="3">低<small>Small</small></option>
                </select>
            </div>
            <div class="form-group mb-2">
                <button id="todoDelete" class="btn btn-primary" type="button">
                    削除<small>Delete</small>
                </button>
                <button id="backToTopPage" class="btn btn-secondary" type="button">
                    一覧に戻る<small>Back to TaskList</small>
                </button>
            </div>
        </form>
    </body>
</html>

Finishing HTML files, then make functions like asynchronous using Javascript and jQuery.

static/js/taskDelete.js

$(document).ready(function(){
    //Get userId from session storage.
    const userId = sessionStorage.getItem("userId");
    //let inputValueuserId = document.getElementById("userId");
    //inputValueuserId.value = userId;

    //Click "BackToList" Button and it's process
    $('#backToTopPage').on('click',function(){
        location.replace(`/sub?userid=${userId}`);
    });

    /**
     * Get from URL query Param.
     */

    //Get string query from URL param
    const queryString = window.location.search;
    //Create URL SearchParams object and analize it's sentences.
    const param = new URLSearchParams(queryString);
    //Get targetParam from variant data of param.
    document.getElementById("taskId").value = param.get("taskId");
    //Input targetDat in variant value "taskId"
    const taskId = param.get("taskId");

    $.ajax({
        url:`/controllers/selectDeleteTodo?taskid=${taskId}`,
        method:"Get",
        success:function(response){
            console.log(response);
            const registerId = document.getElementById("registerId");
            registerId.value = response[0].Register.Id;

            const taskId = document.getElementById("taskId");
            taskId.value = response[0].TaskId;

            const taskName = document.getElementById("myTask");
            taskName.value = response[0].TaskName;

            const taskDescription = document.getElementById("myTaskDescription");
            taskDescription.value = response[0].TaskDescription;

            const taskPriority = document.getElementById("myTaskPriority");
            if(response[0].TaskPriority === "1"){
                taskPriority.options[1].selected = true;
            }

            if(response[0].TaskPriority === "2"){
                taskPriority.options[2].selected = true;
            }

            if(taskPriority.options[3].selected = true){
                taskPriority.options[3].selected = true;
            }
        },
        error:function(response){
            console.log(response);
        }
    });

    //The process which delete button is clicked.
    $('#todoDelete').on('click',function(e){
        e.preventDefault();

        //Get taskId
        const targetTaskId = document.getElementById('taskId').value;
        $.ajax({
            url:`/controllers/taskDestroy?taskid=${targetTaskId}`,
            method:'DELETE',
            pcocessData:false,
            contentType:false,
            success:function(response){
                console.log(response);
            },
            error:function(response){
                console.log(response);
            }
        });                
    });

});

Make Backend Page

Completing frontend files, finally,I make server side.

Firstly,I make routing.
routers/router.go

package routers

import (
    "my-first-beego-project/controllers"

    "github.com/astaxie/beego"
)

func init() {
    beego.Router("/", &controllers.MainController{})
    //追加
    beego.Router("/sub", &controllers.SubController{}) //beego.Router("/sub", &controllers.SubController{})
    beego.Router("/:id", &controllers.ThirdController{})
    beego.Router("/controllers/user", &controllers.UserController{})
    beego.Router("/login", &controllers.LoginController{})
    beego.Router("/controllers/login", &controllers.LoginController{})
    beego.Router("/mytodo/addTodo", &controllers.TodoCreateController{})
    beego.Router("/controllers/todoAdd", &controllers.TodoAddController{})
    // GetTasksアクションのためのルーティング追加
    beego.Router("/controllers/sub/getTasks", &controllers.SubController{}, "get:GetTasks")
    beego.Router("/mytodo/myTodoEdit", &controllers.TodoEditController{})
    beego.Router("/controllers/selectEditTodo", &controllers.TodoEditController{}, "get:GetTargetEditTask")
    beego.Router("/controllers/updateTask", &controllers.TodoUpdateController{})
    beego.Router("/mytodo/myTodoDelete", &controllers.TodoDeleteController{})
    beego.Router("/controllers/selectDeleteTodo", &controllers.TodoDestroyController{}, "get:GetTargetTask")
    beego.Router("/controllers/taskDestroy", &controllers.TargetTodoDeleteController{})
}

Then, make controllers
controllers/default.go

type TargetTodoDeleteController struct {
    beego.Controller
}


func (c *TargetTodoDeleteController) Delete() {
    taskId, err := c.GetInt("taskid")
    if err != nil {
        fmt.Println("TaskId is not accepted", err)
        c.Data["json"] = map[string]string{
            "status":  "Fail",
            "message": "TaskId is not accepted.",
        }
        c.ServeJSON()
        return
    }
    //Debug
    fmt.Println("Accepted TargeDeletetTaskId is ", taskId)

    //Generate Instance of Orm
    o := orm.NewOrm()
    var deleteTask models.Task
    //Initialize Register Task
    deleteTask.Register = &models.Register{}

    //Begin Transaction
    tx, err := o.Begin()
    _, err = tx.Delete(&models.Task{TaskId: int64(taskId)})

    if err != nil {
        tx.Rollback()
        fmt.Println("Error Exception was happened.")
        c.Data["json"] = map[string]string{
            "status":  "Fail",
            "message": "Delete process was failed.",
        }
        c.ServeJSON()
        return
    }

    err = tx.Commit()

    if err != nil {
        fmt.Println("Transaction Commit was failed.")
        c.Data["json"] = map[string]string{
            "status":  "fail",
            "message": "Transaction Commit was failed.",
        }
        c.ServeJSON()
        return
    }
    c.Ctx.ResponseWriter.WriteHeader(200)
    c.Ctx.WriteString("Task delete was success")

}

How Relation with tpl and Html on VSCode?

SKY-HaYaTo — Fri, 21 Feb 2025 14:19:10 +0000

Hi,Guys!
I'm Kohei,a Software Engineer in Japan.

I am talking about a function of VSCode.

Today's Topic is...

Now, The Topic is about Relationship with these extension .tpl and .html on Visual Studio Code(VSCode).

Extension .tpl is often used in Web Framework of PHP.

Recently, I develop personal Web apps using Golang and Beego which is one of Web MVC Frameworks of Golang.

Beego is generally used .tpl as template engine.So, I need to make VSCode recognize .tpl extension like .html.

In this article, you do'nt install any plugins with .tpl,but revide settings.json on VSCode.

It's a very Simple away!

VSCode is the most popular Free IDE and used in the world.
An one of nice functions on the IDE is to relation variaty of extension.

As my memorandom and shrering with you,I have decited to write the article.

Ok,Now,Let's explanation!

How to use the function...?

In conclution, only 3 steps is completed.

Start VSCode and Click Prompt Screen

Top of the VSCode is set prompt screen(as a below picture).
You click on cursor.

Input Value of `Setting.json` in the screen

Next,You need to input the value setting.json.
If maybe you continue to type setting.json, key intellisence will start and display some canditates including setings.json.

When you see the word,click it!

Then target page will transition to settings.json.

Revision Settings.json File

When display settings.json,you will type String of sentense (below the capture).

You input the senetences,please save the revision.

From now, we can relationship with .tpl and .html.

That's all!

Have a nice programming!

Introduce My Self !

SKY-HaYaTo — Wed, 19 Feb 2025 14:34:03 +0000

Hi, Guys!
It's Kouhei, a software engineer in Japan.

Now, this article is my first challenge, so I will introduce my career.

At this time, I work as an engineer.
My skills are divided into four sections, as listed below:

Frontend Developer Skills:

HTML, CSS, JavaScript, TypeScript
React (Next.js)
Vue.js (Nuxt.js)

Backend Developer Skills:

Java (Spring Framework)
C# (ASP.NET Core, Entity Framework)
PHP (Laravel, CakePHP, Symfony)
Golang (Echo, Beego)
Ruby on Rails
Python (Django)
VB.NET
Excel VBA

Database Skills:

PostgreSQL
SQL Server
MySQL (MariaDB)

Cloud AWS (Amazon Web Services) – Currently a beginner, so I'm studying! I'm studying these skills every day. In addition, to enjoy talking about these topics with people around the world, I am also studying languages (English, French, Spanish, and Indonesian).

Through this article, I hope to improve my language skills, not just in English but also in other languages.

Looking forward to your responses!

See you next time! Bye!

How to insert and update Data Golang Web App with Beego?

SKY-HaYaTo — Wed, 19 Feb 2025 14:28:16 +0000

Introduction

Beegois a web application framework made from base on Golang,and this is often used as large development projects.
You know that there are some web frameworks using golang like Gin,Echo,revel,Beego and iris,and many apps are releasing today.
In personal development, I choose Beego because of a simple architechture.
The framework is accepted as MVC model which is suitable to develop huge project web applications.
In addition,Making Beego project is very simple, only one command to produce project.
In this article, I am developing TaskApp including to update data using PostgreSQL.

Derectory of In may `Beego` project.

My project directory as below.
M(Model): Model classes.
V(Views):View classs including template engine.
C(Controllers):Controller class.

MY-FIRST-BEEGO-PROJECT
├─ conf
│  └─ app.conf
├─ controllers
│  └─ default.go
├─ crypt
│  └─ crypt.go
├─ models
│  └─ todo.go
├─ routers
│  └─ router.go
└─ static
   ├─ css
   ├─ img
   ├─ js
   │  ├─ form.js
   │  ├─ login.js
   │  ├─ reload.min.js
   │  ├─ todoCreate.js
   │  ├─ todoCard.js
   │  └─ todoList.js
   ├─ lib
   │  └─ bootstrap
   │     ├─ css
   │     │  ├─ bootstrap-grid.min.css
   │     │  └─ bootstrap.min.css
   │     ├─ js
   │     │  ├─ bootstrap-bundle.min.js
   │     │  └─ bootstrap.min.js
   │     ├─ jquery
   │     │  └─ jquery.js
   │     └─ upload
   ├─ views
   │  ├─ mytodo
   │  │  ├─ addTodo.tpl
   │  │  └─ myList.tpl
   │  ├─ index.tpl
   │  ├─ subIndex.tpl
   │  └─ thirdIndex.tpl
   └─ main.go

Make Frontend Page

Firstry,I make frontend page using templatenengine .tpl.
If you want to update data,like making form and send using POST method.

views/myTodo/myTodoEdit.tpl

<!DOCTYPE html>
<html>
    <head>
        <title>Todo編集</title>
        <!--共通-->
        <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="/static/lib/jquery/jquery.js"></script>
        <!--個別-->
        <script type="text/javascript" src="/static/js/taskEdit.js"></script>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <div>
                <input type="hidden" id="registerId" name="registerId" value=""/>
                <input type="hidden" id="taskId" name="taskId" value=""/>                
            </div>
            <div class="form-group mb-3">
                <label>タスク名</label>
                <input type="text" id="myTask" name="myTask" class="form-control border border-dark" value="" required />
            </div>
            <div class="form-group mb-3">
                <label>タスク詳細</label>
                <textarea class="form-control" id="myTaskDescription" name="myTaskDescription" rows="3"></textarea>
            </div>
            <div class="form-group mb-3">
                <label>優先度</label>
                <select id="myTaskPriority" name="myTaskPriority" class="form-select form-select-lg mb-3" aria-label=".form-select-lg">
                    <option>-- 選択してください --</option>
                    <option value="1">高</option>
                    <option value="2">中</option>
                    <option value="3">低</option>
                </select>
            </div>
            <div class="form-group mb-2">
                <label>タスク画像</label>
                <input type="file" id="myTaskImage" name="myTaskImage" class="form-control border border-dark" />
            </div>
            <div class="form-group mb-2" class="btn btn-primary">
                <button id="todoEdit" class="btn btn-primary" type="button">
                    更新
                </button>
                <button id="backToTopPage" class="btn btn-secondary" type="button">
                    一覧に戻る
                </button>
            </div>
        </form>
    </body>
</html>

Sending Formdata to server using HTTP method POST.

static/js/todoEdit.js

$(document).ready(function(){
    //SessionStorageからユーザIDを取得する
    const userId = sessionStorage.getItem("userId");

    //一覧画面に戻るボタンを押下した時の処理
    $('#backToTopPage').on('click',function(){
        location.replace(`/sub?userid=${userId}`);
    });

    /**
     * ---------------------------------------
     * URLクエリパラメータからタスクIDを取得する
     * ---------------------------------------
     */
    // URLのクエリ文字列を取得する
    const queryString = window.location.search;
    // URLSearchParamsオブジェクトを作成してクエリ文字列を解析する
    const param = new URLSearchParams(queryString);
    // 特定のパラメータの値を取得する
    document.getElementById("taskId").value = param.get("taskId");
    //タスクIDを変数に格納する
    const taskId = param.get("taskId");

    $.ajax({
        url:`/controllers/selectEditTodo?taskid=${taskId}`,
        method:'GET',
        success:function(response){
            console.log(response);
            const registerId = document.getElementById("registerId");
            registerId.value = response[0].Register.Id;

            //編集対象のタスクを取得したら編集画面に詰める。
            const taskId = document.getElementById("taskId");
            taskId.value = response[0].TaskId;

            const taskName = document.getElementById("myTask");
            taskName.value =response[0].TaskName;

            const taskDescription = document.getElementById("myTaskDescription");
            taskDescription.value = response[0].TaskDescription;

            const taskPriority = document.getElementById("myTaskPriority");
            if(response[0].TaskPriority === "1"){
                taskPriority.options[1].selected = true;
            }

            if(response[0].TaskPriority === "2"){
                taskPriority.options[2].selected = true;
            }

            if(response[0].TaskPriority === "3"){
                taskPriority.options[3].selected = true;
            }

        },
        error:function(response){
            console.log(response);
            alert('データを取得できませんでした。');
        }
    });

    //更新ボタン押下時の処理
    $('#todoEdit').on('click',function(e){
        //デフォルトのイベントを防止する処理
        e.preventDefault();

        //フォームデータを作成する
        let formData = new FormData();
        formData.append("registerId",$('#registerId').val());
        formData.append("taskId",$("#taskId").val());
        formData.append("taskName",$('#myTask').val());
        formData.append("taskDescription",$('#myTaskDescription').val());
        formData.append("taskpriority",$('#myTaskPriority').val());
        formData.append("taskImage",$('#myTaskImage')[0].files[0]);

        $.ajax({
            url:"/controllers/updateTask",
            method:"POST",
            data:formData,
            processData:false,
            contentType:false,
            success:function(response){
                console.log(response);
            },
            error:function(response){
                alert("Update is success.");
                console.log(response);
            }
        });
    });
});

Make Backend

Data sent from frontend, is processed by server using golang.

I make Controller class in default.go class.
In Beego, Controller class is make as below.
First, we need to write struct , and then make process you want to.

controllers/default.go

type TodoUpdateController struct {
    beego.Controller
}

func (c *TodoUpdateController) Post() {
    // Accept from Screen data
    registerId := c.GetString("registerId")
    taskId := c.GetString("taskId")
    taskName := c.GetString("taskName")
    taskDescription := c.GetString("taskDescription")
    taskPriority := c.GetString("taskpriority")

    fmt.Println("RegisterId which is accepted from Browser, is ", registerId)
    fmt.Println("TaskId which is accepted from Browser, is", taskId)
    fmt.Println("TaskName which is accepted from Browser, is ", taskName)
    fmt.Println("TaskDescription which is accepted from Browser", taskDescription)
    fmt.Println("TaskPriority which is accepted from browser,is ", taskPriority)

    //Upload a file which is accepted from browser
    f, h, err := c.GetFile("taskImage")
    if err != nil {
        fmt.Println("File error", err)
        c.Ctx.ResponseWriter.WriteHeader(500)
        c.Ctx.WriteString("Try to upload a files is Failed.")
        return
    }
    defer f.Close()

    //Decition of storage file path
    uploadPath := "static/upload"
    err = os.MkdirAll(uploadPath, os.ModePerm)

    if err != nil {
        fmt.Println("Try to save a file is Failed", err)
        c.Ctx.ResponseWriter.WriteHeader(500)
        c.Ctx.WriteString("Fail to save a file.")
        return
    }

    //Save taskImage after getting image
    fileName := h.Filename
    savepath := filepath.Join(uploadPath, fileName)

    //Save taskImage after getting image
    outFile, err := os.Create(savepath)

    if err != nil {
        fmt.Println("ファイル保存エラー", err)
        c.Ctx.ResponseWriter.WriteHeader(500)
        c.Ctx.WriteString("fail to save a file")
        return
    }

    defer outFile.Close()

    _, err = outFile.ReadFrom(f)
    if err != nil {
        fmt.Println("fail to write to a File")
        c.Ctx.ResponseWriter.WriteHeader(500)
        c.Ctx.WriteString("Fails to write to a file.")
        return
    }

    //Debug program]
    fmt.Println("Saved a file name is ", fileName)

    //Generate Instance of Orm
    o := orm.NewOrm()

    //Generate Instance of Task
    var updateTask models.Task
    //Initialize Register Model
    updateTask.Register = &models.Register{}

    //Begin Transactions
    tx, err := o.Begin()
    numTaskId, _ := strconv.ParseInt(taskId, 10, 64)
    numRegisterId, _ := strconv.ParseInt(registerId, 10, 64)

    updateTask.TaskId = numTaskId
    updateTask.TaskName = taskName
    updateTask.TaskDescription = taskDescription
    updateTask.TaskPriority = taskPriority
    updateTask.TaskImage = "http://localhost:8080/static/upload/" + fileName
    updateTask.Register.Id = numRegisterId

    _, err = tx.Update(&updateTask)

    if err != nil {
        tx.Rollback()
        fmt.Println("Error Exception was started.")
        c.Data["json"] = map[string]string{
            "status":  "Fail to Insert.",
            "message": "Fail to insert updated Task Information.",
        }
        c.ServeJSON()
        return
    }

    err = tx.Commit()

    if err != nil {
        fmt.Println("Fail to TransactionCommit.")
        c.Data["json"] = map[string]string{
            "status":  "fail to Transaction",
            "message": "Fail to Transaction(Insert)",
        }
        c.ServeJSON()
        return
    }

    c.Ctx.ResponseWriter.WriteHeader(500)
    c.Ctx.WriteString("Success to update task.")
}

Forem: SKY-HaYaTo

How to create Login Form with Next.js and integrate with Django API

Nuxt3 form validation on client side with Yup

How to delete data using golang web framework Beego?

Introduction

Directory of Beego project

Make Frontend Pages

Make Backend Page

How Relation with tpl and Html on VSCode?

Today's Topic is...

How to use the function...?

Start VSCode and Click Prompt Screen

Input Value of Setting.json in the screen

Revision Settings.json File

Introduce My Self !

How to insert and update Data Golang Web App with Beego?

Introduction

Derectory of In may Beego project.

Make Frontend Page

Make Backend

Input Value of `Setting.json` in the screen

Derectory of In may `Beego` project.