Create view to add, delete and edit (views.py)

In [ ]:
from __future__ import unicode_literals
from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.contrib.auth import authenticate, login, logout
from django.contrib import messages
from django.http import *
from django.shortcuts import render_to_response,redirect
from django.template import RequestContext
from django.contrib.auth.decorators import login_required
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserChangeForm
from django.db.models import Q
from django.db.models import Count
from datetime import datetime
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import update_session_auth_hash
from django.contrib.auth.forms import PasswordChangeForm
from datetime import date
from .models import tasksx

def create_task(request):
    if request.method == 'POST':
        creator = request.user
        job_title = 'data engineer'
        skill_name = request.POST.get('skill_name')
        starting = request.POST.get('starting')
        description = request.POST.get('description')
        target_date = request.POST.get('target_date')
    i = tasksx.objects.create(target_date2=target_date, creator=creator, job_title=job_title, skill_name=skill_name,  starting=starting, current=starting, description=description)
    messages.success(request, ('Skill created'))
    return redirect('index')

def skill_delete(request):
    t = tasksx.objects.get(id=request.POST.get('deletebutton'))
    t.delete() # this will update only
    messages.success(request, ('You have deleted a skill'))
    return redirect('index')

def edit_skill(request):
    t = tasksx.objects.get(id=request.POST.get('skillname'))
    t.skill_name = request.POST.get('skill_name')
    t.save() # this will update only
    messages.success(request, ('Changes saved'))

    return redirect('index')
                               

Create a model (models.py)

In [ ]:
from django.db import models
from datetime import date
from datetime import datetime


class tasksx(models.Model):
    job_title = models.CharField(max_length=400, default="data")
    creator = models.CharField(max_length=400, default="none")
    skill_name = models.CharField(max_length=400, default="none")
    starting = models.CharField(max_length=400, default="none")
    current = models.CharField(max_length=400, default="none")
    description = models.CharField(max_length=4000000, default="none")
    target_date = models.DateTimeField(default=datetime.now)
    target_date2 = models.DateField(default=date.today)
    def __str__(self):
        return self.job_title

Add model to the admin panel (admin.py)

In [ ]:
from django.contrib import admin
from .models import tasksx

admin.site.register(tasksx)

Commit model

In [ ]:
source /usr/local/lsws/Example/html/bin/activate #start virtual env
python3 manage.py makemigrations
python3 manage.py migrate
/usr/local/lsws/bin/lswsctrl restart #restart litespeed web server

Inject into your HTML

In [ ]:
{% if skill_list|length == 0 %} Looks like you've not added any skills yet. Add them by clicking here. <a href="#" data-toggle="modal" data-target="#AddSkill">by clicking here. </a> {% else %} {% for skill in skill_list %}
<h4 class="small font-weight-bold"> <a href="#" data-toggle="modal" data-target="#EditModal">{{ skill.skill_name }}</a> <font size=1>

	</font><span class="float-right">{{ skill.current }}%</span></h4>
<div class="progress mb-4">
    <div class="progress-bar bg-primary" aria-valuenow={{ skill.current }} aria-valuemin="0" aria-valuemax="100" style="width: {{ skill.current }}%;"><span class="sr-only">{{ skill.current }}%</span></div>
</div>

<!-- EDIT MODAL -->
<div class="modal fade" id="EditModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit A Skill</h4>
                <button type="button" value={{ skill.id }} name='skillname' class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <form action="/edit/" name="form2" , id="form2" method="post">
                    <label>Skill Name:</label>
                    <input class="form-control-plaintext" type="text" value={{ skill.skill_name }} style="background-color: #eeeeee;padding: 12px;"><small class="form-text text-muted">Enter the skill you'd like to develop. E.g. Python;</small>
                    <hr style="background-color: #ffffff;opacity: 0;padding: -23px;margin: 5px;">
                    <label>Current Skill Level</label>

                    <select class="form-control" name="starting">
                        <optgroup label="Select Skill Level">
                            <option value={{ skill.current }} selected="selected">

                                No Change

                            </option>
                            <option value="0">No Knowledge</option>
                            <option value="20">Some Knowledge</option>
                            <option value="50">Mediocre Knowledge</option>
                            <option value="70">High Knowledge</option>
                            <option value="100">Expert Knowledge</option>
                        </optgroup>
                    </select>
                    <hr style="background-color: #ffffff;opacity: 0;padding: -23px;margin: 5px;">
                    <label>Action Plan To Achieve Goal:</label>
                    <textarea class="form-control" style="background-color: rgb(238,238,238);">{{ skill.description }}</textarea>
                    <hr style="background-color: #ffffff;opacity: 0;padding: -23px;margin: 5px;">
                    <label>Target Date For Goal</label>
                    <input value=value="{{skill.target_date2|date:" Y-m-d " }} type="date "></div>
                                <div class="modal-footer "><button class="btn btn-light " type="button " data-dismiss="modal ">Close</button><button class="btn btn-primary " type="button " type="submit ">Save</button></form>
								<form action="/delete/ " name="form1 ", id="form1 " method="post ">
   {% csrf_token %}   
   <button name="deletebutton " data-toggle="tooltip " data-placement="top " title="Delete Task " type="submit "  value={{ skill.id }}  class="btn btn-link btn-sm ">
    Delete Skill</button>
   </form></div>
                            </div>
                        </div>
                    </div>

								{% endfor %}
								   {% endif %}