Adding Job Creation Form & Bootstrap Styling

 Adding Job Creation Form & Bootstrap Styling

1. Create a Django Form in jobs/forms.py

from django import forms

from .models import Job


class JobForm(forms.ModelForm):

    class Meta:

        model = Job

        fields = ['summary', 'image']


2. Create a View to Handle Job Creation in jobs/views.py

Add this view below your existing ones:

from django.shortcuts import redirect

from .forms import JobForm


def create_job(request):

    if request.method == 'POST':

        form = JobForm(request.POST, request.FILES)

        if form.is_valid():

            form.save()

            return redirect('home')  # After saving, redirect to homepage

    else:

        form = JobForm()

    

    return render(request, 'jobs/create_job.html', {'form': form})


3. Update portfolio/urls.py to Add the Create Job URL

urlpatterns = [

    path('admin/', admin.site.urls),

    path('', views.homepage, name='home'),

    path('job/<int:job_id>/', views.job_detail, name='job_detail'),

    path('create/', views.create_job, name='create_job'),  # New job creation page

]


4. Create Template for Job Creation — jobs/templates/jobs/create_job.html

Basic Bootstrap form:

{% load static %}

<!DOCTYPE html>

<html>

<head>

    <title>Create Job</title>

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

</head>

<body class="container mt-5">


<h1>Create New Job</h1>


<form method="POST" enctype="multipart/form-data" class="mt-4">

    {% csrf_token %}

    <div class="form-group">

        {{ form.summary.label_tag }}

        {{ form.summary }}

    </div>

    <div class="form-group mt-3">

        {{ form.image.label_tag }}

        {{ form.image }}

    </div>

    <button type="submit" class="btn btn-primary mt-4">Save Job</button>

</form>


<a href="{% url 'home' %}" class="btn btn-link mt-3">Back to Home</a>


<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<script src="{% static 'popper.min.js' %}"></script>

<script src="{% static 'js/bootstrap.min.js' %}"></script>

</body>

</html>


5. Add a Link to “Create Job” on Your Homepage

Update home.html to include:

<a href="{% url 'create_job' %}" class="btn btn-success mb-4">Add New Job</a>


Place it above your job list for easy access.

What you get:

  • A clean Bootstrap-styled form to add new jobs with image upload.

  • CSRF protection automatically included.

  • Redirects back to the homepage after adding a job.

  • Homepage shows a button to add new jobs.

Perfect! Let’s add edit and delete features for your jobs, so you can manage entries right from the site.

Adding Edit and Delete for Jobs in Django

1. Update jobs/views.py

Add these two views:

def edit_job(request, job_id):

    job = get_object_or_404(Job, id=job_id)

    if request.method == 'POST':

        form = JobForm(request.POST, request.FILES, instance=job)

        if form.is_valid():

            form.save()

            return redirect('job_detail', job_id=job.id)

    else:

        form = JobForm(instance=job)

    return render(request, 'jobs/edit_job.html', {'form': form, 'job': job})


def delete_job(request, job_id):

    job = get_object_or_404(Job, id=job_id)

    if request.method == 'POST':

        job.delete()

        return redirect('home')

    return render(request, 'jobs/delete_job.html', {'job': job})


2. Update portfolio/urls.py

Add URLs for edit and delete:

urlpatterns = [

    path('admin/', admin.site.urls),

    path('', views.homepage, name='home'),

    path('job/<int:job_id>/', views.job_detail, name='job_detail'),

    path('job/<int:job_id>/edit/', views.edit_job, name='edit_job'),

    path('job/<int:job_id>/delete/', views.delete_job, name='delete_job'),

    path('create/', views.create_job, name='create_job'),

]


3. Create Templates

edit_job.html (similar to create_job.html)

{% load static %}

<!DOCTYPE html>

<html>

<head>

    <title>Edit Job</title>

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

</head>

<body class="container mt-5">


<h1>Edit Job: {{ job.summary }}</h1>


<form method="POST" enctype="multipart/form-data" class="mt-4">

    {% csrf_token %}

    {{ form.as_p }}

    <button type="submit" class="btn btn-primary mt-3">Save Changes</button>

    <a href="{% url 'job_detail' job.id %}" class="btn btn-secondary mt-3">Cancel</a>

</form>


<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<script src="{% static 'popper.min.js' %}"></script>

<script src="{% static 'js/bootstrap.min.js' %}"></script>

</body>

</html>


delete_job.html

{% load static %}

<!DOCTYPE html>

<html>

<head>

    <title>Delete Job</title>

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

</head>

<body class="container mt-5">


<h1>Delete Job: {{ job.summary }}</h1>

<p>Are you sure you want to delete this job?</p>


<form method="POST">

    {% csrf_token %}

    <button type="submit" class="btn btn-danger">Yes, Delete</button>

    <a href="{% url 'job_detail' job.id %}" class="btn btn-secondary">Cancel</a>

</form>


<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<script src="{% static 'popper.min.js' %}"></script>

<script src="{% static 'js/bootstrap.min.js' %}"></script>

</body>

</html>


4. Add Edit/Delete Links on job_detail.html

Update your detail page to include buttons:

<a href="{% url 'edit_job' job.id %}" class="btn btn-warning">Edit Job</a>

<a href="{% url 'delete_job' job.id %}" class="btn btn-danger">Delete Job</a>

<a href="{% url 'home' %}" class="btn btn-link">Back to All Jobs</a>


Summary:

  • Edit form pre-fills with existing job data.

  • Delete page confirms before deleting.

  • After edit/delete, redirects appropriately.

  • Buttons added on detail page for easy access.

Comments

Post a Comment

Popular posts from this blog

React Full Stack Project Design Build Launch

Image
🚀 Before Starting a React Project ✅ Install Node.js & npm Run these in PowerShell : node -v # Check Node.js version npm -v # Check npm version If not installed, download Node.js . ✅ Create a React App npx create-react-app react-app # Create the project cd react-app # Navigate to project folder npm start # Start the app (opens http://localhost:3000) 💨 Install Tailwind CSS in React Follow the guide: Tailwind Docs – Create React App 🗂️ File Structure Overview src/index.js → Starts rendering public/index.html src/App.js → Main component 🧩 Basic JSX Structure src/App.js function App() { return ( <div className="App"> <h1>Welcome</h1> </div> ); } If you dragged a project folder, remember to: npm install # install dependencies npm start # start the app ⚙️ Props & Destructuring ✅ Pass Props from index.js root.render( <React.StrictMode> <App librar...
Read more

React useState Hook – Complete Guide

Image
🧠 React useState Hook – Complete Guide 🔍 What is useState ? The useState Hook lets you add React state to function components. State refers to data or properties your app needs to track or respond to. ✅ Steps to Use useState 🟢 Step 1: Import useState import { useState } from "react"; 🟢 Step 2: Initialize State in Your Component function FavoriteColor() { const [color, setColor] = useState(""); // initial state is an empty string } color → current state value setColor → function to update the state 🟢 Step 3: Use State in JSX function FavoriteColor() { const [color, setColor] = useState("red"); return <h1>My favorite color is {color}!</h1>; } 🟢 Step 4: Update State via User Interaction function FavoriteColor() { const [color, setColor] = useState("red"); return ( <> <h1>My favorite color is {color}!</h1> <button onClick={() => setColor("blue...
Read more

Building an AI-Powered App with Next.js, Tailwind CSS, and OpenAI API

Building an AI-Powered App with Next.js, Tailwind CSS, and OpenAI API Recently, I built an AI-powered web application using Next.js , Tailwind CSS , and the OpenAI SDK . Here’s a breakdown of the development steps and tools I used. 🔧 Setup & Installation I started by creating a new Next.js app using the following command: npx create-next-app@latest out-app During setup, I selected: ✅ Tailwind CSS: Yes ✅ App Router: Yes ✅ Use /src directory structure: Yes ✅ Default options for other settings This gave me the latest App Router structure under src/app . 🧪 Running the App To launch the development server: cd out-app npm run dev 🧠 Installing OpenAI SDK for AI Features I installed the official AI SDK for seamless OpenAI integration: npm install ai @ai-sdk/openai These packages allow powerful AI interactions within the app. More details on AI with Vercel can be found at: 🌐 Next.js 🤖 Vercel AI SDK 📁 Creating the API Route Inside the src/app/api/ folder, I creat...
Read more