1565751940
Use Schematics with Vue and Add Authentication in 5 Minutes
That’s right, Schematics aren’t only for Angular projects!
In this post, I’ll show you how to use Schematics to modify a project created with Vue CLI. Why Vue? Because it’s fast and efficient. Its default bundle size is smaller than Angular and React too!
See The Baseline Costs of JavaScript Frameworks for more information about Vue’s speed. I also think it’s cool that Vue inspired a Wired magazine article: The Solo JavaScript Developer Challenging Google and Facebook.
Bootstrap is a popular CSS framework, and Vue has support for it via BootstrapVue. In this tutorial, you’ll learn how to create a schematic that integrates BootstrapVue. It’s a straightforward example, and I’ll include unit and integrating testing tips.
Schematics: Manipulate Projects with Code
Angular DevKit is part of the Angular CLI project on GitHub. DevKit provides libraries that can be used to manage, develop, deploy, and analyze your code. DevKit has a schematics-cli command line tool that you can use to create your own Schematics.
To create a Schematics project, first install the Schematics CLI:
npm i -g @angular-devkit/schematics-cli@0.13.4
Then run schematics to create a new empty project. Name it bvi as an abbreviation for Bootstrap Vue Installer.
schematics blank --name=bvi
This will create a bvi directory and install the project’s dependencies. There’s a bvi/package.json that handles your project’s dependencies. There’s also a src/collection.json that defines the metadata for your schematics.
{
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
"schematics": {
"bvi": {
"description": "A blank schematic.",
"factory": "./bvi/index#bvi"
}
}
}
You can see that the bvi schematic points to a factory function in src/bvi/index.ts. Crack that open and you’ll see the following:
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
export function bvi(_options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {
return tree;
};
}
There’s also a test in src/bvi/index_spec.ts.
import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
import * as path from 'path';
const collectionPath = path.join(__dirname, '../collection.json');
describe('bvi', () => {
it('works', () => {
const runner = new SchematicTestRunner('schematics', collectionPath);
const tree = runner.runSchematic('bvi', {}, Tree.empty());
expect(tree.files).toEqual([]);
});
});
One neat thing about Schematics is they don’t perform any direct actions on your filesystem. Instead, you specify actions against a Tree. The Tree is a data structure with a set of files that already exist and a staging area (of files that will contain new/updated code).
Build Schematics with Vue
If you’re familiar with Schematics, you’ve probably seen them used to manipulate Angular projects. Schematics has excellent support for Angular, but they can run on any project if you code it right! Instead of looking for Angular-specifics, you can just look for package.json and a common file structure. CLI tools that generate projects make this a lot easier to do because you know where files will be created.
Add Dependencies with Schematics
The BootstrapVue docs provide installation instructions. These are the steps you will automate with the bvi schematic.
npm i bootstrap-vue bootstrap- Import and register the
BootstrapVueplugin - Import Bootstrap’s CSS files
You can use Schematics Utilities to automate adding dependencies, among other things.
Start by opening a terminal window and installing schematic-utilities in the bvi project you created.
npm i schematics-utilities
Change src/bvi/index.ts to add bootstrap and bootstrap-vue as dependencies with an addDependencies()function. Call this method from the main function.
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { addPackageJsonDependency, NodeDependency, NodeDependencyType } from 'schematics-utilities';
function addDependencies(host: Tree): Tree {
const dependencies: NodeDependency[] = [
{ type: NodeDependencyType.Default, version: '4.3.1', name: 'bootstrap' },
{ type: NodeDependencyType.Default, version: '2.0.0-rc.13', name: 'bootstrap-vue' }
];
dependencies.forEach(dependency => addPackageJsonDependency(host, dependency));
return host;
}
export function bvi(_options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {
addDependencies(tree);
return tree;
};
}
Create, Copy, and Update Files
Create a src/bvi/templates/src directory. You’ll create templates in this directory that already have the necessary Bootstrap Vue imports and initialization.
Add an App.vue template and put the following Bootstrap-ified code in it.
<template>
<div id="app" class="container">
<img alt="Vue logo" src="./assets/logo.png">
<b-alert variant="success" show>Bootstrap Vue installed successfully!</b-alert>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
Create a main.js file in the same directory with the Bootstrap Vue imports and registration.
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Modify the bvi() function in src/bvi/index.ts to copy these templates and overwrite existing files.
import { Rule, SchematicContext, Tree, apply, url, template, move, forEach, FileEntry, mergeWith, MergeStrategy } from '@angular-devkit/schematics';
import { addPackageJsonDependency, NodeDependency, NodeDependencyType } from 'schematics-utilities';
import { normalize } from 'path';
function addDependencies(host: Tree): Tree {
const dependencies: NodeDependency[] = [
{ type: NodeDependencyType.Default, version: '4.3.1', name: 'bootstrap' },
{ type: NodeDependencyType.Default, version: '2.0.0-rc.13', name: 'bootstrap-vue' }
];
dependencies.forEach(dependency => addPackageJsonDependency(host, dependency));
return host;
}
export function bvi(_options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {
addDependencies(tree);
const movePath = normalize('./src');
const templateSource = apply(url('./templates/src'), [
template({..._options}),
move(movePath),
// fix for https://github.com/angular/angular-cli/issues/11337
forEach((fileEntry: FileEntry) => {
if (tree.exists(fileEntry.path)) {
tree.overwrite(fileEntry.path, fileEntry.content);
}
return fileEntry;
}),
]);
const rule = mergeWith(templateSource, MergeStrategy.Overwrite);
return rule(tree, _context);
};
}
Test Your BootstrapVue Installer
In order to add dependencies to package.json, you have to provide one in your tests. Luckily, TypeScript 2.9 added JSON imports, so you can create a testable version of package.json (as generated by Vue CLI) and add it to Tree before you run the test.
In the bvi/tsconfig.json file, under compiler options, add these two lines:
{
"compilerOptions": {
"resolveJsonModule": true,
"esModuleInterop": true
}
}
Create vue-pkg.json in the same directory as index_spec.ts.
{
"name": "bvi-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"vue": "^2.6.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
}
}
Now you can import this file in your test, and add it to a UnitTestTree. This allows you to verify the files are created, as well as their contents. Modify src/bvi/index_spec.ts to match the code below.
import { HostTree } from '@angular-devkit/schematics';
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
import * as path from 'path';
import packageJson from './vue-pkg.json';
const collectionPath = path.join(__dirname, '../collection.json');
describe('bvi', () => {
it('works', () => {
const tree = new UnitTestTree(new HostTree);
tree.create('/package.json', JSON.stringify(packageJson));
const runner = new SchematicTestRunner('schematics', collectionPath);
runner.runSchematic('bvi', {}, tree);
expect(tree.files.length).toEqual(3);
expect(tree.files.sort()).toEqual(['/package.json', '/src/App.vue', '/src/main.js']);
const mainContent = tree.readContent('/src/main.js');
expect(mainContent).toContain(`Vue.use(BootstrapVue)`);
});
});
Run npm test and rejoice when everything passes!
Verify Your Vue Schematic Works
You can verify your schematic works by creating a new Vue project with Vue CLI’s defaults, installing your schematic, and running it.
Start by installing Vue CLI if you don’t already have it.
npm i -g @vue/cli@3.4.1
Run vue create test and select the default preset.
Run npm link /path/to/bvi to install your BootstapVue Installer. You might need to adjust the bvi project’s path to fit your system.
cd test
npm link ../bvi
Run schematics bvi:bvi and you should see files being updated.
UPDATE /package.json (956 bytes)
UPDATE /src/App.vue (393 bytes)
UPDATE /src/main.js (287 bytes)
Run npm install followed by npm run serve and bask in the glory of your Vue app with Bootstrap installed!
Schematics with Angular
Angular CLI is based on Schematics, as are its PWA and Angular Material modules. I won’t go into Angular-specific Schematics here, you can read Use Angular Schematics to Simplify Your Life for that.
This tutorial includes information on how to add prompts, how to publish your Schematic, and it references an OktaDev Schematics project that I helped develop. This project’s continuous integration uses a [test-app.sh](https://github.com/oktadeveloper/schematics/blob/master/test-app.sh "test-app.sh") script that creates projects with each framework’s respective CLI. For example, here’s the script that tests creating a new Vue CLI project, and installing the schematic.
elif [ "$1" == "vue" ] || [ "$1" == "v" ]
then
config=$(cat <<EOF
{
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "base",
"lintOn": [
"save"
]
},
"@vue/cli-plugin-unit-jest": {}
},
"router": true,
"routerHistoryMode": true
}
EOF
)
vue create vue-app -i "$config"
cd vue-app
npm install ../../oktadev*.tgz
schematics @oktadev/schematics:add-auth --issuer=$issuer --clientId=$clientId
npm run test:unit
fi
This project has support for TypeScript-enabled Vue projects as well.
Got a minute? Let me show you how to create a Vue + TypeScript project and add authentication with OIDC and Okta.
Use Vue Schematics to Add Authentication with OpenID Connect
Run vue create vb, select Manually select features and choose TypeScript, PWA, Router.
While that process completes, create an OIDC app on Okta.
Create an OpenID Connect App on Okta
Log in to your Okta Developer account (or [https://developer.okta.com/signup/sign up] if you don’t have an account) and navigate to Applications > Add Application. Click Single-Page App, click Next, and give the app a name you’ll remember, and click Done.
The next screen should look similar to the following:
Go back to the terminal window where you created the vb app. Navigate into the directory and run the app to make sure it starts on port 8080.
cd vb
npm run serve
TIP: If it starts on port 8081, it’s because you already have a process running on 8080. You can use fkill :8080 to kill the process after installing [fkill-cli](https://github.com/sindresorhus/fkill-cli "fkill-cli").
Stop the process (Ctrl+C) and add OIDC authentication to your app with the following commands:
npm i @oktadev/schematics@0.7.2
schematics @oktadev/schematics:add-auth
When prompted, enter your issuer (it can be found in Okta’s dashboard under API > Authorization Servers) and client ID. When the installation completes, run npm run serve and marvel at your Vue app with authentication!
Click login, enter the credentials you used to signup with Okta, and you’ll be redirected back to your app. This time, a logoutbutton will be displayed.
Learn More about Vue, Schematics, and Secure Authentication
I hope you’ve enjoyed learning how to create Schematics for Vue. I found the API fairly easy to use and was pleasantly surprised by its testing support too. If you want to learn more about Okta’s Vue SDK, see its docs.
You can find the example schematic for this tutorial on GitHub.
Further reading:
☞ Data Visualization with Vue and D3.js
☞ React vs Vue – Choosing the Best JavaScript Library
☞ Working with the Keyboard in your Vue App
☞ How to Modifying component data with event emitters in Vue.js
#vue-js #javascript
What is GEEK
Buddha Community
1600583123
8 Popular Websites That Use The Vue.JS Framework
In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.
Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.
This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.
Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.
Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.
“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You
#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js
1592807820
How To Set Up Two-Factor Authentication in cPanel
What is 2FA
Two-Factor Authentication (or 2FA as it often referred to) is an extra layer of security that is used to provide users an additional level of protection when securing access to an account.
Employing a 2FA mechanism is a vast improvement in security over the Singe-Factor Authentication method of simply employing a username and password. Using this method, accounts that have 2FA enabled, require the user to enter a one-time passcode that is generated by an external application. The 2FA passcode (usually a six-digit number) is required to be input into the passcode field before access is granted. The 2FA input is usually required directly after the username and password are entered by the client.
#tutorials #2fa #access #account security #authentication #authentication method #authentication token #cli #command line #cpanel #feature manager #google authenticator #one time password #otp #otp authentication #passcode #password #passwords #qr code #security #security code #security policy #security practices #single factor authentication #time-based one-time password #totp #two factor authentication #whm
1645534030
matrix multiplication in python user input
Given two user input matrix. Our task is to display the addition of two matrix. In these problem we use nested List comprehensive.
matrix multiplication in python user input
Algorithm
Step1: input two matrix.
Step 2: nested for loops to iterate through each row and each column.
Step 3: take one resultant matrix which is initially contains all 0. Then we multiply each row elements of first matrix with each elements of second matrix, then add all multiplied value. That is the value of resultant matrix.
Example Code
# Program to multiply two matrices
A=[]
n=int(input("Enter N for N x N matrix: "))
print("Enter the element ::>")
for i in range(n):
row=[] #temporary list to store the row
for j in range(n):
row.append(int(input())) #add the input to row list
A.append(row) #add the row to the list
print(A)
# [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
#Display the 2D array
print("Display Array In Matrix Form")
for i in range(n):
for j in range(n):
print(A[i][j], end=" ")
print() #new line
B=[]
n=int(input("Enter N for N x N matrix : ")) #3 here
#use list for storing 2D array
#get the user input and store it in list (here IN : 1 to 9)
print("Enter the element ::>")
for i in range (n):
row=[] #temporary list to store the row
for j in range(n):
row.append(int(input())) #add the input to row list
B.append(row) #add the row to the list
print(B)
# [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
#Display the 2D array
print("Display Array In Matrix Form")
for i in range(n):
for j in range(n):
print(B[i][j], end=" ")
print()
result = [[0,0,0], [0,0,0], [0,0,0]]
for i in range(len(A)):
for j in range(len(B[0])):
for k in range(len(B)):
result[i][j] += A[i][k] * B[k][j]
print("The Resultant Matrix Is ::>")
for r in result:
print(r) Output
Enter N for N x N matrix: 3
Enter the element ::>
2
1
4
2
1
2
3
4
3
[[2, 1, 4], [2, 1, 2], [3, 4, 3]]
Display Array In Matrix Form
2 1 4
2 1 2
3 4 3
Enter N for N x N matrix : 3
Enter the element ::>
1
2
3
4
5
6
7
8
9
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
Display Array In Matrix Form
1 2 3
4 5 6
7 8 9
The Resultant Matrix Is ::>
[34, 41, 48]
[20, 25, 30]
[40, 50, 60]https://www.pakainfo.com/python-program-multiplication-of-two-matrix-from-user-input/
1593056092
Top 6 Python Packages You Should be Using in Every Django Web App
There are countless Python packages easily added to any project. But there are some packages you can't help but use in every Django web app because they've proven to be extremely beneficial and time-saving.
We decided to focus on those packages, the ones you'll end up installing regularly, and explain the installation and configurations needed to get them up and running.
While some Python packages offer cool functionality needed for one specific project, the packages discussed below are the bread-and-butter of the Django packages.
Django Web Framework
But we can't jump into Django packages by talking about the Django web framework.
A web framework is comprised of modules or packages that allow developers to quickly write web applications without having to handle the precise details of the protocol and other web app management.
Django is considered a full-stack web framework in which a database, application server, template engine, authentication module, and dispatcher are all neatly combined to create a high-level framework. These individual components are included upon package installation and often just need some minor configurations for them to function correctly.
macOS Terminal
(env)User-Macbook:env user$ pip install djangoWindows Command Prompt
(env)C:\Users\Owner\desktop\env> pip install djangoAt the time of this article, the latest version of Django is 3.0.8. To install the latest version, all you need is the command pip install django.
If you wish to install a different version, then specify the version number as demonstrated in the command pip install django==2.1.15. Please note that there are two equal signs after the package name, not one.
Once the installation is complete, you will need to start configuring your Django web app with a project and an application. If you want to jump right into building your Django web app, check out the quick start guides to Django Installation and Django Configuration. Or if you are just getting started and need a step-by-step tutorial, see the Beginner's Guide to Django Web Apps.
But we are here to talk about Python Packages meant for Django web apps, not basic Django configurations so we'll keep moving.
We have a lot to cover.
- Django TinyMCE4 Lite
- Pillow
- Django Crispy Forms
- Django Tables
- Django Filter
- Python Decouple
(1) Django TinyMCE4 Lite
macOS Terminal
(env)User-Macbook:mysite user$ pip install django-tinymce4-liteWindows Command Prompt
(env) C:\Users\Owner\Desktop\Code\env\mysite>pip install django-tinymce4-liteOnce you have finished the basic configurations of your web app, you can install a cool Python package named django-tinymce4-lite. This package is actually a smaller version of the Django application django-tinymce4 that contains a widget to render Django form fields as TinyMCE editors.
TinyMCE is a WYSIWYG ("what you see is what you get") text editor that converts HTML elements into editor instances or "plain text". This python package is highly recommended if you are looking to create a blog as you can easily edit text that is then formatted to HTML within the actual template.
env > mysite > mysite > settings.py
INSTALLED_APPS = [
...
...
'tinymce',
]
TINYMCE_DEFAULT_CONFIG = {
'height': 400,
'width': 1000,
'cleanup_on_startup': True,
'custom_undo_redo_levels': 20,
'selector': 'textarea',
'browser_spellcheck': 'True',
'theme': 'modern',
'plugins': '''
textcolor save link image media preview codesample contextmenu
table code lists fullscreen insertdatetime nonbreaking
contextmenu directionality searchreplace wordcount visualblocks
visualchars code fullscreen autolink lists charmap print hr
anchor pagebreak
''',
'toolbar1': '''
fullscreen preview bold italic underline | fontselect,
fontsizeselect | forecolor backcolor | alignleft alignright |
aligncenter alignjustify | indent outdent | bullist numlist table |
| link image media | codesample
''',
'toolbar2': '''
visualblocks visualchars |
charmap hr pagebreak nonbreaking anchor | code |
''',
'contextmenu': 'formats | link image',
'menubar': True,
'statusbar': True,
}After installation, you will need to add tinymce to the list of installed apps in the settings file then add the default configurations below. The default configurations define the height, weight, spellcheck, and toolbars.
env > mysite > mysite > urls.py
"""mysite URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include ('main.urls')),
path('tinymce/', include('tinymce.urls')), #add this
]Then add the TinyMCE path to the project URLs.
env > mysite > main > models.py
from django.db import models
from tinymce import HTMLField
class MyModel(models.Model):
...
content = HTMLField()Finally, you can quickly add TinyMCE to the Django model by importing HTMLField at the top of the page then calling it in the model field. If you are unsure of how to use Django models, check out the article, How to use Django Models for more information.
(2) Pillow
macOS Terminal
(env)User-Macbook:mysite user$ pip install PillowWindows Command Prompt
(env) C:\Users\Owner\Desktop\Code\env\mysite>pip install PillowSo, this package is not specific to Django but is needed for image and file uploads to work correctly in a Django project. If you are looking to have a media upload field in your Django model for let's say an article cover image, you need to install Pillow. It's a Python Imaging Library fork for uploading files correctly.
env > mysite > mysite > settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')Once installed, you need to add a media folder URL and ROOT directory to your settings file.
env > mysite > mysite > urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings #add this
from django.conf.urls.static import static #add this
urlpatterns = [
path('admin/', admin.site.urls),
path('', include ('main.urls')),
]
if settings.DEBUG: #add this
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)Then you need to add the necessary imports at the top of your project's URL file and specify the URL pattern to the media folder. Keep in mind that the media upload will not work in production given the if condition. You will need to reconfigure your media upload location when you are ready to deploy.
env > mysite > main > models.py
from django.db import models
class MyModel(models.Model):
...
image = models.ImageField(upload_to='images/')Now to upload an image, go to your models file and add an ImageField with the upload location as 'images/'. The uploaded images will then be added to a media > images folder that will automatically be created upon the upload.
For more information about correctly creating a model, accessing the upload location in the Django admin, and rendering the model in a template, refer to How to use Django Models.
(3) Django Crispy Forms
macOS Terminal
(env)User-Macbook:mysite user$ pip install django-crispy-formsWindows Command Prompt
(env) C:\Users\Owner\desktop\code\env\mysite>pip install django-crispy-formsLet's talk about Django forms. Their functionality is great but their appearance isn't the best. You can choose to install django-crispy-forms in your project to quickly solve this issue.
env > mysite > mysite > settings.py
INSTALLED_APPS = [
...
'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'uni_form'For it to function correctly, you will need to go to the settings file and add crispy_forms to the installed apps list. Keep in mind that there is an underscore between crispy and forms.
Then you need to specify the crispy template pack. The one listed below is the default but if you are using the Bootstrap CSS framework, check out how to integrate Bootstrap with django-crispy-forms.
env > mysite > main > templates > main > contact.html
{% load crispy_forms_tags %}
<form method="post">
{% csrf_token %}
{{form|crispy}}
<button type="submit">Submit</button>
</form>The package django-crispy-forms is added to the project in the form of a filter added within the Django template language {{form}}. This format will not only call all of the form fields but also format each field according to the crispy form template pack specified in the settings.
Refer to the article Render Forms with Django Crispy Forms for more information regarding the form rendering process using crispy forms and the article Build a Django Contact Form with Email Backend for more general information on how to build a Django form.
(4) Django Tables
macOS Terminal
(env)User-Macbook:mysite user$ pip install django-tables2Windows Command Prompt
(env) C:\Users\Owner\desktop\code\env\mysite>pip install django-tables2Now let's say you want to create a dynamic table in your Django project that connects to a model. Install django-tables2, a Django-specific package for table rendering.
env > mysite > mysite > settings.py
INSTALLED_APPS = [
...
'django_tables2',
]Add Django tables to the installed apps.
env > mysite > main > models.py
from django.db import models
class MyModel(models.Model):
name = models.CharField(max_length=100, verbose_name="full name")
email = models.EmailField(max_length=200)
Then create the model you wish to use in the table.
After you have created the model, you will need to run the commands python manage.py makemigrations and python manage.py migrate to add the model to the database and add your model objects via the Django admin. For more instruction, see How to Use Django Models.
env > mysite > main > (New File) tables.py
import django_tables2 as tables
from .models import MyModel
class MyTable(tables.Table):
class Meta:
model = MyModel
fields = ("name", "email", )
Now, create a new file called tables.py in the application folder, main, and import tables from django_tables2 at the top of the file. Then create a class that specifies the model and field names.
env > mysite > main > views.py (Class-based views)
...
from django_tables2 import SingleTableView
from .models import MyModel
from .tables import MyTable
class ListView(SingleTableView):
model = MyModel
table_class = MyTable
template_name = 'main/table.html'
If you are looking to use class-based views, go to the views file and add the view class specifying the model, table, and template. Again, you will need to import the necessary variables from their appropriate files at the top of the file.
env > mysite > main > urls.py (Class-based views)
from django.urls import path
from . import views
app_name = "main"
urlpatterns = [
path("table", views.ListView.as_view()),
]Then make sure there is a tables URL in the app urls.py file. If you are looking to learn more about class-based views, check out the article Django Class-based Views.
env > mysite > main > views.py (Function-based views)
...
from django_tables2 import SingleTableView
from .models import MyModel
from .tables import MyTable
def list(request):
model = MyModel.objects.all()
table = MyTable(model)
return render(request=request, template_name="main/table.html", context={"model":model, "table":table})
Or you can choose to do function-based views in the views.py file. Either one will work, but the format is different.
env > mysite > main > urls.py (Function-based views)
from django.urls import path
from . import views
app_name = "main"
urlpatterns = [
path("table", views.list, name="list"),
]Then add the table URL in the app urls.py file.
env > mysite > main > templates > main > (New File) table.html
{% load render_table from django_tables2 %}
<div>
{% render_table table %}
</div>With the views and URLs configured, you can render the table in the template by loading in render_table from django_tables2 at the top of the file then calling render_table and the context of the table passed in the view.
By default, the class-based view passes the table context as just table, and in the function-based view, we also chose to specify the context of the table as table.
If you want to add Bootstrap CSS to the table:
env > mysite > main > tables.py
import django_tables2 as tables
from .models import MyModel
class MyTable(tables.Table):
class Meta:
model = MyModel
template_name = "django_tables2/bootstrap4.html"
fields = ("name", "email",)
Add a template name to the tables.py file connecting to the Bootstrap template. This and other template files can be found in the Lib > site-packages > django_tables2 > templates > django_tables2 folder of your project.
env > mysite > main > templates > main > (New File) table.html
{% extends "main/header.html" %}
{% block content %}
{% load render_table from django_tables2 %}
<div class="container">
{% render_table table %}
</div>
{% endblock %}Then you can extend to a header that loads in the Bootstrap CDNs. This is the easiest way of adding Bootstrap to all of your templates using the same piece of code.
If you are unsure of how to use the extends tag with the Bootstrap CDNs, check out the Django extends tag and block content section in the Beginner's Guide to Django Web Apps.
(5) Django Filter
macOS Terminal
(env)User-Macbook:mysite user$ pip install django-filterWindows Command Prompt
(env) C:\Users\Owner\desktop\code\env\mysite> pip install django-filterNow that you have a table, you probably want the ability to search for specific content within the rows and filter the table by its results. The django-filter package can easily be used on top of the django-tables2 package to accomplish this.
env > mysite > mysite > settings.py
INSTALLED_APPS = [
...
'django_filters',
]Add Django filters to the installed apps. Note that is django_filters not django_filter.
env > mysite > main > (New File) filters.py
import django_filters
from .models import MyModel
class MyFilter(django_filters.FilterSet):
name = django_filters.CharFilter(lookup_expr='icontains')
class Meta:
model = MyModel
fields = {'name', 'email'}
Now, create a new file called filters.py in the application folder, main, and import django_filters. Then list the model and the model fields you wish to filter by.
You can also choose to add django_filters.CharFilter to the class. In the example above, the filter displays any rows where the name column contains the query specified.
You can also choose to do django_filters.CharFilter(lookup_expr='iexact') if you are looking to filter only by an exact query match.
env > mysite > main > views.py (Class-based views)
...
from django_tables2 import SingleTableMixin
from django_filters.views import FilterView
from .models import MyModel
from .tables import MyTable
from .filters import MyFilter
class ListView(SingleTableMixin, FilterView):
model = MyModel
table_class = MyTable
template_name = 'main/table.html'
filterset_class = MyFilter
Then for a class-based view, import FilterView from django_filters.views at the top of the file and change django_tables2 import from SingleTableView to SingleTableMixin. You will also need to import your custom filter from the filter.py file.
In the class view, ListView will now inherit SingleTableMixin and FilterView and list the filterset_class as the custom filter within it.
env > mysite > main > templates > main > table.html
{% load render_table from django_tables2 %}
<div>
<br>
<form action="" method="GET">
{{filter.form}}
<button type="submit">Filter</button>
</form>
<br>
{% render_table table %}
</div>
With class-based views, the URL will stay the same but you will need to add a form HTML element and the Django Template language calling the filter and the form within the template. You also need a submit button within the form to submit your filter queries. Nothing changes about the way the table renders.
env > mysite > main > views.py (Function-based views)
...
from django_tables2.views import SingleTableMixin
from django_filter import FilterView
from .models import MyModel
from .tables import MyTable
def list(request):
model = MyModel.objects.all()
filterset_class = MyFilter(request.GET, model)
table = MyTable(filterset_class.qs)
return render(request=request, template_name="main/table.html", context={"model":model, "table":table, "filterset_class":filterset_class})
If using function-based views, make the same imports and the class-based views, then create an instance of the MyFilter class and pass in a GET request and model as arguments. Pass in the filterset_class as a queryset argument in the table then lists the filterset_class as context in the return render.
env > mysite > main > templates > main > table.html
{% load render_table from django_tables2 %}
<div>
<br>
<form action="" method="GET">
{{filterset_class.form}}
<button type="submit">Filter</button>
</form>
<br>
{% render_table table %}
</div>
With function-based views, you will need to specify the filterset_class, or the context declared, as the filter on the form. Everything else is the same format as the class-based template.
If you are looking to style the form, either scroll back up to the Django Crispy Forms section or click at the article mentioned earlier, Render Forms with Django Crispy Forms.
(6) Python Decouple
macOS Terminal
(env)User-Macbook:mysite user$ pip install python-decoupleWindows Command Prompt
(env) C:\Users\Owner\desktop\code\env\mysite> pip install python-decoupleThe last and arguably most important Python package we will discuss is python-decouple. This package hides your sensitive configuration keys and information from hackers. It was created for Django but it is now considered a "generic tool" for separating configuration settings.
env > mysite > (New File) .env
SECRET_KEY =sdjioerb43buobnodhioh4i34hgip
DEBUG =Trueenv > mysite > mysite > settings.py
from decouple import config
SECRET_KEY = config('SECRET_KEY')
DEBUG = config('DEBUG', cast=bool)Create a new file named .env in the project folder then import config in the settings.py file. Then transfer all of the configuration settings and variables you wish to hide to the .env file and call each variable using the python-decouple format of config('variable').
#programming #django #python
1598685221
Vue File Upload Using vue-dropzone Tutorial
In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is highly customizable. The vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.
Vue File Upload Using vue-dropzone
First, install the Vue using Vue CLI.
#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli