Skip to content

Instantly share code, notes, and snippets.

@pradeepmurugan

pradeepmurugan/index.html

Created December 20, 2017 19:52
Show Gist options
  • Save pradeepmurugan/fb8f85c0cfb52d39b1db9a924da2e6ba to your computer and use it in GitHub Desktop.
Save pradeepmurugan/fb8f85c0cfb52d39b1db9a924da2e6ba to your computer and use it in GitHub Desktop.
Download ZIP
FormExample
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>Manage User</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<div class="container-fluid">
<center>
<div class="col-sm-5 col-md-5 col-xs-12">
<h3>Manage users</h3>
</center>
</div>
<hr style="BORDER-RIGHT: medium none; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; HEIGHT: 1px">
<div class="row-fluid">
<div class="col-sm-1 col-md-1">
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-success " id="create">Create</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-danger " id="remove">Remove</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-info ">Update</button>
</div>
<div class="col-sm-1 col-md-1 col-xs-3">
<button type="button " class="btn btn-primary" id="display">Display</button>
</div>
<div class="col-sm-7 ">
</div>
</div>
</div>
<br>
<div class="container-fluid">
<form id="createform" name="createform" action="/getdata/" method="post">
<br>
<br>
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<div class="row">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">
</div>
<div class="row">
<label for="fullname">Full name:</label>
<input type="text" class="form-control" id="fullname" placeholder="Enter fullname" name="fullname">
</div>
<div class="row">
<label for="active">
<input type="checkbox" id="active" name="active" value="2">&nbsp;&nbsp;Is Active&nbsp;&nbsp;&nbsp;</label>
<label for="temp">
<input type="checkbox" id="temp" name="temp" value="2">&nbsp;&nbsp;Is Temp</label>
</div>
<div class="row">
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<div class="container-fluid">
<form id="removeform" name="removeform" action="/deleteuser/" method="post">
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<br>
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<div class="row">
<br>
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<div class="container-fluid">
<form id="displayform" name="displayform" action="/displayuser/" method="post">
<div class="col-md-1 col-sm-1"></div>
<div class="col-xs-6 col-md-3 col-sm-3">
<div class="row">
<br>
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
</div>
<br>
<div class="row">
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$("#createform").hide();
$("#removeform").hide();
$("#displayform").hide();
$("#create").click(function () {
$("#removeform").hide();
$("#displayform").hide();
$("#createform").show();
});
var contextroot = ""
$("#createform").submit(function (e) {
e.preventDefault();
var form = $(this);
var action = form.attr("action");
var data = form.serializeArray();
$.ajax({
url: contextroot + action,
dataType: 'json',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(getFormData(data)),
success: function (data) {
console.log("DATA POSTED SUCCESSFULLY" + data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
$("#remove").click(function () {
$("#createform").hide();
$("#displayform").hide();
$("#removeform").show();
});
$("#removeform").submit(function (e) {
e.preventDefault();
var contextroot = ""
var form = $(this);
var action = form.attr("action");
var data = form.serializeArray();
$.ajax({
url: contextroot + action,
dataType: 'json',
type: 'DELETE',
contentType: 'application/json',
data: JSON.stringify(getFormData(data)),
success: function (data) {
console.log("DATA POSTED SUCCESSFULLY" + data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
$("#display").click(function () {
$("#createform").hide();
$("#removeform").hide();
$("#displayform").show();
});
$("#displayform").submit(function (e) {
e.preventDefault();
var contextroot = ""
var form = $(this);
var action = form.attr("action");
var data = form.serializeArray();
$.ajax({
url: contextroot + action,
dataType: 'json',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(getFormData(data)),
success: function (data) {
console.log("DATA POSTED SUCCESSFULLY" + data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
});
//utility function
function getFormData(data) {
var unindexed_array = data;
var indexed_array = {};
$.map(unindexed_array, function (n, i) {
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
</script>
</body>
</html>
Raw
settings.py
"""
Django settings for FormExample project.
Generated by 'django-admin startproject' using Django 1.11.7.
For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '#3t5nkgmfsgdc)&e(h(k7ag%$99(qe@ni*#wjavg!ua#l+(6h%'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['195.154.181.108']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'FormExample.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
'templates'
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'FormExample.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
# Add these new lines
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
Raw
urls.py
"""FormExample URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.conf.urls import url, include
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from . import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
#define the url getdata that we have written inside form
url(r'^getdata/', views.index),
url(r'^deleteuser/', views.index),
url(r'^displayuser/', views.index),
#defining the view for root URL
url(r'^$', views.index),
]
Raw
views.py
#importing required packages
from django.http import HttpResponse
from django.template import loader
from django.views.decorators.csrf import csrf_exempt
#disabling csrf (cross site request forgery)
@csrf_exempt
def index(request):
#if post request came
#returing the form template
template = loader.get_template('index.html')
return HttpResponse(template.render())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment