How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority for every developer.

Today we are going to discuss on how to implement two factor authentication using Google’s Authenticator.

What is Two Factor Authentication?

2FA is nothing new. In fact it’s already been widely adopted by most major platforms (Facebook, Apple, Google etc) as a means of making account logins more secure.

Two Factor Authentication, also known as 2FA, two step verification or TFA (as an acronym), is an extra layer of security that is known as “multi factor authentication” that requires not only a password and username but also something that only, and only, that user has on them, i.e. a piece of information only they should know or have immediately to hand — such as a physical token.

So how does the user get the code?

  • Historically this required the user to carry a widget or card reader device (in the case of bank accounts) on their person, to generate a unique code.
  • Recently a popular method has been sending the user an SMS with a one time use code.

However there are other options…

How Google Authenticator works

Google Authenticator is a free app for your smart phone that generates a new code every 30 seconds. It works like this:

  1. When enabling 2FA, the application you’re securing generates a QR code that user’s scan with their phone camera to add the profile to their Google Authenticator app.
  2. Your user’s smart phone then generates a new code every 30 seconds to use for the second part of authentication to the application.

Implementing Google Authenticator on your website using PHP

The easiest way to do this is to use an open source composer package to do the tricky stuff for you:sonata-project/google-authenticator – PackagistLibrary to integrate Google Authenticator into a PHP projectpackagist.org

You’ll use the library to:

  • Generate the QR code for your user’s to scan when they enable 2FA.
  • Verify that the code entered is valid at login.

Generating the QR Code

$g = new \Google\Authenticator\GoogleAuthenticator();$salt = '7WAO342QFANY6IKBF7L7SWEUU79WL3VMT920VB5NQMW';
$secret = $username.$salt;echo '<img src="'.$g->getURL($username, 'example.com', $secret).'" />';

Tips:

Verifying entered codes

You need to use the same secret you used to generate the barcode in order to validate the user’s input.

$g = new \Google\Authenticator\GoogleAuthenticator();$salt = '7WAO342QFANY6IKBF7L7SWEUU79WL3VMT920VB5NQMW';
$secret = $username.$salt;$check_this_code = $_POST['code'];if ($g->checkCode($secret, $check_this_code)) {
echo 'Success!';
} else {
echo 'Invalid login';
}

While Google Authenticator might not be the most desirable 2FA method for your customers, there’s no reason you can’t implement it for staff or administrators when it’s this easy.

Do Like and Share the post and also write your comments below if you like the post.

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its a great concern to validate, if the email address is correct. If you are someone who has been a victim of email bounce and email rejection due to unverified email addresses, then this blog is for you! In this blog, we will talk about how to verify an email address before sending emails using PHP.

There are many email verification services that provide API as well as online support to verify email addresses. But as everyone knows, nothing comes for free. There is a certain amount charged for each email address verification. If you are trying to build a self-hosted email verification service, you can follow the below steps to verify email addresses before shooting an email.

Steps to verify email address using PHP

  1. Match the email address pattern.
  2. Verify the existence of domain name
  3. Check if the email address exists
  4. Shoot the email and store it in a verified email directory.

Let’s start with the above one by one…

Match the email address patter

Email address has a fixed pattern. every-time you initiate an email, first check for the pattern of the email address, eg. someone@example.com. If you notice carefully, the email address consists of three(3) parts.

  1. Name of user (someone@example.com)
  2. Symbol of @ (someone@example.com)
  3. Domain Name (someone@example.com)

All the three sections are equally important and are used only once per email address, for example, @ cannot be used twice in an email address.

To verify the email address patter, you can use the blow code:

$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $emailErr = "Invalid email format";
}

SOURCE: W3Schools.com

The above code will help you check if the email address is properly formed or not. If in case it is not in a proper format, you will get the “Invalid email format” error message.

Verify the existence of domain name

To verify the existence of a domain name, you can do it by using simple methods.
You can either make a list of valid domain addresses of major email providers like Gmail, Outlook, etc. and verify them directly from the list. If someone provides a different domain name, you can ping the domain name and check whether it exists or not. Use the code below:

<?php
$domain="w3schools.com";
if(checkdnsrr($domain,"MX")) {
  echo "Passed";
} else {
  echo "Failed";
}
?> 

SOURCE: W3Schools.com

The above code checks for the existence of “MX” (mail exchange) records and provides output based on the existence of the same.

Check if the email address exist

To check if the email address exists, you need to send a ping email to the email address using PHP email, either via shell_exec() or by simple mail() function. This will help you get success if the email address replies to the email sent. Or if it fails, you can check the reply from the server and extract the error message.

Shoot the email and store it in a verified email list

Once you verify the email address, you should not only send your marketing email, but you should keep the details like domain name, email address to a verified list. This will help you save time when you add more email addresses to your marketing list. If they exist in your verified list, you need not verify them again and again slowing down your email frequency.

REFERENCES:

Here are some references, if you want to learn more or want to use ready to use libraries.

https://code.google.com/archive/p/php-smtp-email-validation/

https://www.w3schools.com/php/php_form_url_email.asp

https://www.tutorialspoint.com/php/php_validation_example.htm

Feel free to comment and let me know if you require any further support from my end. It feels great to help. Your comments are valuable to me and I read and reply to each comment personally, feel free to post your comments and share the blog with your loved ones…

Templates – In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these files are kept in separate folder, which will be dedicated to the UI elements, which we call templates.
 If we write the following code.

Python Code

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
   return '<html><body><h1>'Hello World'</h1></body></html>'
if __name__ == '__main__':
   app.run(debug = True)

we will get an output as an H1 tag element in the browser, which means that the return functionality can interpreter the HTML data. But the issue is, when we have a huge set of coding and that too with multiple variables being called inside the view, to show dynamic data on the page, we will have to move in and out many times. 
This is where the jinja2 comes in picture. jinja2 is a templating engine which helps in showing templates with dynamic data over Python.
The Flask is based on jinja2 templating engine, that is why its easy to return entire template as an output. The rendering of templates can be done using the render_template() function.
Have a look at the below example:

Python Code

rom flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
   return render_template(‘hello.html’)
if __name__ == '__main__':
   app.run(debug = True)

Here the entire hello.html file is passed as an argument in the render_template() function, which will be treated as a template to be rendered when user requests for the root page.
Flask will try to find the HTML file in the templates folder, in the same folder in which this script is present.

  • Application folder
    • Hello.py
    • templates
      • hello.html

As we talk about the  web templating system, we refer to designing an HTML script in which the variable data needs to be dynamically inserted. Web template system is made up of template processor, template engine and some data source.
jinja2 is used by Flask as its templating engine. HTML syntax contains placeholders for variables and expressions which are replaced by values when the template is rendered.
The following code is saved as hello.html in the templates folder.

Hello .html

<!doctype html>
<html>
   <body>
   
      <h1>Hello {{ name }}!</h1>
      
   </body>
</html>

Next, run the following script from Python shell.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/<user>')
def hello_name(user):
return render_template('hello.html', name = user)

if __name__ == '__main__':
app.run(debug = True)

As the development server starts running, open the browser and enter URL as − http://localhost:5000/hello/Vikash

You will see the output as

Hello Vikash


The following delimiters are used to escape from HTML in jinja2

  • {% … %} for Statements
  • {{ … }} for Expressions to print to the template output
  • {# … #} for Comments not included in the template output
  • # … ## for Line Statements

Have a look at the example below, we have used a conditional statement in the template to show some data.The hello() function will accept the integer parameter in the URL rule, which will be passed to the hello.html template. Where it’s value will be compared with 50, and the rendering will be done accordingly.

The Python Script is as follows −

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/<int:score>')
def hello_name(score):
return render_template('hello.html', marks = score)

if __name__ == '__main__':
app.run(debug = True)

HTML template script of hello.html is as follows −

<!doctype html>
<html>
<body>

{% if marks>50 %}
<h1> Your result is pass!</h1>
{% else %}
<h1>Your result is fail</h1>
{% endif %}

</body>
</html>

You might have noticed a few things, like the conditional statements are enclosed in {%. %}
Run the Python script and visit URL http://localhost/hello/60 and then http://localhost/hello/30 to see the output of HTML changing conditionally.

Python loop constructs can also be employed inside the template. In the following script, the result() function sends a dictionary object to template results.html when URL http://localhost:5000/result is opened in the browser.

The Template part of result.html employs a for loop to render key and value pairs of dictionary object result{} as cells of an HTML table.

Run the following code from Python shell.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/result')
def result():
dict = {'phy':50,'che':60,'maths':70}
return render_template('result.html', result = dict)

if __name__ == '__main__':
app.run(debug = True)

Save the following HTML script as result.html in the templates folder.

<!doctype html>
<html>
<body>

<table border = 1>
{% for key, value in result.iteritems() %}

<tr>
<th> {{ key }} </th>
<td> {{ value }} </td>
</tr>

{% endfor %}
</table>

</body>
</html>

Here, again Python statements corresponding to the For loop are enclosed in {%..%} whereas, the expressions key and value are put inside {{ }}.

After the development starts running, open http://localhost:5000/result in the browser to get the output as a table.
Now as you have learnt about the templates and the way of rendering data inside the template move ahead to the following tutorials to learn more ..

Static Files – Flask

When you work for web development, you will need to use some files for javascript or CSS, here in FLASK when you need to add some static files, a special endpoint is used named as static. These static files are served from static folder in your package or next to your module and it will be available at /static in the application.
Example

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def index():
   return render_template("index.html")

if __name__ == '__main__':
   app.run(debug = True)

The HTML script of index.html is given below.

<html>

   <head>
      <script type = "text/javascript" 
         src = "{{ url_for('static', filename = 'hello.js') }}" ></script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
   
</html>

hello.js contains sayHello() function.

function sayHello() {
   alert("Hello World")
}

Variables in Flask

In Flask, a variable is created using tags inside route() function. To create a variable you just need to put < and end it with > , for eg. <name> this is a variable with identifies name. How to use a variable in Flask ? We can use a variable to receive data from URL (by making a part of URL dynamic). To understand this let me give you a simple example.

Python Code

from flask import Flask
app = Flask(__name__)

@app.route('/hello/<name>')
def hello_name(name):
   return 'Hello %s!' % name

if __name__ == '__main__':
   app.run(debug = True)

In the above code, you can see in route() function, a <name> tag is used to create a variable. Which is receiving some data from the URL. In simple words, the content after /hello/ will be treated as data for the <name> variable.
So, when we open the URL as – http://localhost/hello/VikashMishra then it will return Hello VikashMishra as it is taking the part after /hello/ as a string.
In case if you want to specify the data type of the variable, then you can hard-code it into the variable tag itself. for eg. : <int:data>

DATA TYPES FOR VARIABLES

  1. string – %s is used to display data at its occurrence place. Used to store string
  2. int – %d is used to display data at its occurrence place. Used to store integers
  3. float – %f is used to display data at its occurrence place. Used to store decimal values.
  4. path – accepts slashes used as directory separator character.

Example of Python Code

from flask import Flask
app = Flask(__name__)

@app.route('/blog/<int:postID>')
def show_blog(postID):
   return 'Blog Number %d' % postID

@app.route('/rev/<float:revNo>')
def revision(revNo):
   return 'Revision Number %f' % revNo

if __name__ == '__main__':
   app.run()

Run the above code and visit URL http://localhost:5000/blog/11 in the browser.

The number is used as argument of show_blog() function. The browser will display the below output:

Blog Number 11

Now enter this URL in the browser − http://localhost:5000/rev/1.1
The revision() function will take up the floating point number as an argument, and produce the result shown below in the browser

Revision Number 1.100000

So now you can understand the data type and variable type in Flask. Before we end up this chapter, I’ll like to go little further and tell you a few things more. It’ll help you understanding the URL concept better.
The URL rules in Flask are based on Werkzeug’s routing module. This ensures that the URLs formed are unique and based on precedents laid down by Apache.
Here if you are typing /home  and  /home/, it might happen that you find it similar, but there is a big difference into it. if you enter /home then home will be treated as a value in most cases. But if you enter /home/ then it will be considered as a complete URL.

Let us try this with an example of python Code

from flask import Flask
app = Flask(__name__)

@app.route('/dashboard')
def hello_flask():
   return 'Hello Dashboard'

@app.route('/home/')
def hello_python():
   return 'Hello Home'

if __name__ == '__main__':
   app.run()

Both the rules appear to be similar, but in the second rule, trailing slash (/) is used, due to which it becomes a canonical URL. That is why, using /home or /home/ returns the same output. However, in case of the first rule, /dashboard/ URL results in 404 Not Found page.
Woohh,,,,,, completed the big part, now we can move on the interesting ones… stay tuned..

Flask – Binding URL

First thing that comes to mind when we hear binding is – I guess – BOOKBINDING / PAPER BINDING. Well, this is something similar to that but not exactly. Here, in Flask, binding URL means adding functionalities to some URL.
url_for() is a very useful function used to dynamically build URLs for a specific function. It accepts the first parameter to be the function that needs to be bind, followed by one or more keyword arguments, each corresponding to the variable part of the URL.

Python Code

from flask import Flask, redirect, url_for
app = Flask(__name__)

@app.route('/admin')
def hello_admin():
   return 'Hello Admin'

@app.route('/guest/<guest>')
def hello_guest(guest):
   return 'Hello %s as Guest' % guest

@app.route('/user/<name>')
def hello_user(name):
   if name =='admin':
      return redirect(url_for('hello_admin'))
   else:
      return redirect(url_for('hello_guest',guest = name))

if __name__ == '__main__':
   app.run(debug = True)

In the above example see that the redirect() function is being used to navigate the page to url_for() function page. 
The above script shows a function user(name) that accepts data from a variable to its argument from the URL.
The User() function checks if an argument received matches ‘admin’ or not. If it matches, the application is moved to the hello_admin() function using url_for(), otherwise, it is moved to the hello_guest() function passing the received argument as a guest parameter to it.

When you run the code, launch browser, and open URL − http://localhost:5000/user/admin you will get an output –

Hello Admin

Now use this URL to see the change – http://localhost:5000/user/Vikash you will get output as – 

Hello Vikash as Guest 
So now, when we know the few basic things of Flask, it'll become even easy and better to move forward..

FLASK ROUTING

Let me introduce you to the routing concepts of the Flask framework. Routing is a major and basic part of this framework as it defies which data has to be forwarded to the client on different URL requests.
Moving to the depth of routing, route() is called the decorator in Flask, which is used to bind URL to functions as shown below.

Python Code

@app.route(‘/hello’)
def hello_world():
   return ‘hello world’

In the above line of codes, the URL ‘/hello‘ rule is bounded to the hello_world() function, due to which if a client requests for the hello page using URL – http://localhost:5000/hello  an output of “hello world” is displayed on the browser.
The add_url_rule() function of an application object is also available to bind a URL with a function as in the above example, route() is used.
Also, use of add_url_route() function can be done to bind a URL with a function as done by route() function in above example. How?? Let’s see.

Python Code

def hello_world():
   return ‘hello world’
app.add_url_rule(‘/’, ‘hello’, hello_world)

Here also, the same thing is being performed, the difference is, you do not need to define the function just below the decorator, you can define the functions first and then add the URL rules at the end, one after another. It helps to keep the code a little cleaner.
Are you getting interested?? There’s a lot to go.. stay tuned…

“HELLO WORLD” – Python Flask

We need to test our python flask set up before we move further and learn a big thing. To try out the setup that we did in the last part of this tutorial, we need to create a small “Hello World” program and run it on the browser to check if everything is working well. So let’s begin.

Write the following code in your text editor, I prefer Sublime text.

Python Flask Code

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
   return 'Hello World’

if __name__ == '__main__':
   app.run()

What does the above code do? Well, the above code creates a Flask class object. Then it calls the constructor and passes the current module name (__name__). Once the constructor is called, a route() function is called which defines the calling of functions for each URL. In other words, route() tells what has to be done when some URL is requested by the client.
We will go through each line of statement one by one but before that, we need to test if the Flask is working as per our requirements or not! So, to run the above project, go to terminal/command prompt and type the below code.

python hello.py

NOTE: hello.py is the name of the file in which we will write the above code.

Once the above code is run, you will get a message on the console like the one below:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

To see the output on the browser, navigate to the URL shown in the console and see if everything seems to be good.

Now, once everything is working fine, let us go through some lines of codes in the above snippet.

The route function

app.route(rule, options)

The route function takes in two parameters to define the work flow of the requested URL.

  • The rule – this represents defines the URL binding with the function.
  • The options – this is a list of parameters to be forwarded to the underlying Rule object

In the example demonstrated above, The  ‘/’ URL is bound with hello_world() function. So, when the home page is requested by the client, the output of this function will be rendered.

The app.run function

app.run(host, port, debug, options)

The app.run function takes in four parameters, all of which is optional to provide.

  • host – Hostname to listen on. Defaults to 127.0.0.1 (localhost). Set to ‘0.0.0.0’ to have the server available externally.
  • port – Defaults to 5000.
  • debug – Defaults to false. If set to true, provides debug information.
  • options – To be forwarded to the underlying Werkzeug server.

Debug mode

In Flask application development, we need to start/run the application by calling run() method. While developing the application, you will need to restart the application multiple times manually as the changes will be reflected only if the script is restarted. To avoid this, while the project is in a development phase, you can pass debug = True in run() function to track the error, if any, and avoid restarting the project each time you make changes in the code.

app.debug = True
app.run()
app.run(debug = True)

Try making some changes in the first program you wrote, and try reading out the errors, if any, and see the changes in output.

Stay tuned, you will love things coming up in this tutorial series….

Setting up the Environment for Flask

Required Stuff

To run Flask, you need to have Python 2.6 or higher installed in your system. Even though all the dependencies work good on Python 3, but it might cause issues while working on the extensions of flask on versions above 2.7. So we recommend you to work on python version 2.7

Install virtualenv for development environment

To move further I’ll suggest to have a virtual environment of python where all the coding can be done in an isolated environment. It is always suggested to code in a virtual environment as Python is used for both web based as well as desktop based application, which may harm your system. It is also to make different programs isolated from each other. 
To create a virtual environment, you need to install virtualenv. virtualenv is used to create multiple virtual environments for python side by side. It also decreases the compatibility issues of different versions of libraries
To install virtualenv, in Windows OS, use the command below,


pip install virtualenv

The above code need to be run inside command prompt, inside the installation directory of Python, generally C:/pythonX/script.

Remember pip should be present in your Python Scripts folder, which will install virtual environment on your machine.


You will need administration privileges to install the virtualenv so login with administrator account.


To install virtualenv, on Ubuntu or Mac OS, use the command below,


sudo pip install virtualenv (For Mac OS) 
sudo apt-get install virtualenv (For Ubuntu OS) 

Once you install the virtual environment, you can create a new virtual environment in any folder. Here we will create a new folder using Command Prompt / Terminal

mkdir newproj 
cd newproj
 virtualenv venv

To activate the environment we created above on Linux/OS X, use the following −

venv/bin/activate

On Windows, following can be used −

venv\scripts\activate

We can now install Flask in our virtual environment using the below code

pip install Flask

Once you get a success message, you are ready to go. Your system is setup with a virtual environment for Python Flask development. You can follow the next part of the tutorials.
NOTE: You can directly run the last command to install the Flask without creating a virtual environment but that will be a system wide installation.

Stay tuned… There is a lot more to learn..

Flask Introduction

So, before moving further, it will be good to know a few basic things like What is a web framework ? Well, the answer is – Web framework is a collection of libraries and modules which enables a web application developer to write codes without bothering about the low-level things like protocols and thread management, etc.

What is Flask?

Flask is a web based application framework, which is written in Python and is developed by Armin Roncher, who also heads the international group of Python enthusiasts, known as Pocco. Flask is based on 2 major projects of Pocco group,WorkzengWSGI toolkit and Jinja2 template engine.

Now, we talked about a few things in the above description Let’s learn about them first..

What is WSGI ?
And the answer is WSGI stands for Web Server Gateway Interface and has been adopted as a standard for Python web application development. WSGI is a specification for a universal interface between the web server and the web applications.

What is Workzeng ?
It is a WSGI toolkit, which implements requests, response objects, and other utility functions. This enables building a web framework on top of it. The Flask framework uses Werkzeug as one of its bases.  –  The best answer that I found on the web.


What is Jinja2 ?
jinja2 is a popular templating engine for Python. Basically a web templating system contains the HTML structure of web pages which are put together with some variable / data by the system to generate dynamic website.

Flask is generally referred as mirror framework. Flask keeps the core of the application as the simplest yet extensible. Flask supports extensions to be added on for getting new features which we will discuss in the course as we move..

Flask – HTTP

What is HTTP?

HTTP is defined as HyperText Transfer Protocol. In World Wide Web, HTTP is considered the foundation of data transfer over the network. There are different methods of data transfer defined in the HTTP (protocol), I have tried listing some below:

  • GET – Sends data in unencrypted form to the server. Most common method.
  • POST – Used to send HTML form data to the server. Data received by the POST method is not cached by the server. Also, large data can be sent using the POST method
  • PUT – Replaces all current representations of the target resource with the uploaded content.
  • DELETE – Removes all current representations of the target resource given by a URL.

As in other languages, the default method of data transfer is GET which can be changed to POST by explicitly mentioning it into the route() decorator function.

To understand this better, let us create two files. The first file will contain the HTML form which we will use to send data. While the second will contain the python flask script to catch the data coming from the first file.
HTML FILE WITH FORM CODE

<html>
   <body>
      
      <form action = "http://localhost:5000/signin" method = "post">
         <p>Enter Name:</p>
         <p><input type = "text" name = "usernaem" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
      
   </body>
</html>

PYTHON FLASK FILE

from flask import Flask, redirect, url_for, request
app = Flask(__name__)

@app.route('/dashboard/<name>')
def success(name):
   return 'welcome %s' % name

@app.route('/login',methods = ['POST', 'GET'])
def login():
   if request.method == 'POST':
      user = request.form['username']
      return redirect(url_for('success',name = user))
   else:
      user = request.args.get('username')
      return redirect(url_for('success',name = user))

if __name__ == '__main__':
   app.run(debug = True)

Now, turn on the python server from terminal / command prompt and in the browser, open the HTML file.  Fill in the form and hit the submit button. What you will see is, the welcome message on the next page.
In the first case, the line of code to receive the data in POST method is

request.form['username']

 Now change the method to GET in HTML file, form tag. And try to submit the form again from the browser, now also you will see the same message on the browser. But this time if you notice, then you will be able to see that the data is being passed in the URL, and is using the GET method, so the data is being received by another statement, i.e.

request.args.get('username')

So, now you know how to pass and receive data using HTTP GET & POST methods in Flask.
As we move on, there are lot more interesting things, stay tuned.

Sending Form Data to Template – FLASK

In previous sections, we saw how the HTTP method can be specified in the URL role. The Form data that is received by the triggered function, can collect it in form of the dictionary object, and forward the same to a template to render it on the webpage.

In the following example, the ‘/’ URL renders a web page (student.html) that has a form. The data filled in it is posted to the ‘/result’ URL which triggers the result() function.
The results() function collects form data present in the request. form in a dictionary object and sends it for rendering to result.html.
The template dynamically renders an HTML table of form data.

Given below is the HTML script of student.html.

<html>
   <body>
   
      <form action = "http://localhost:5000/result" method = "POST">
         <p>Name <input type = "text" name = "Name" /></p>
         <p>Physics <input type = "text" name = "Physics" /></p>
         <p>Chemistry <input type = "text" name = "chemistry" /></p>
         <p>Maths <input type ="text" name = "Mathematics" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
      
   </body>
</html>

Code of template (result.html) is given below −

<!doctype html>
<html>
   <body>
   
      <table border = 1>
         {% for key, value in result.items() %}
         
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
            
         {% endfor %}
      </table>
      
   </body>
</html>

Given below is the Python code of application

     
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def student():
   return render_template('student.html')

@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'POST':
      result = request.form
      return render_template("result.html",result = result)

if __name__ == '__main__':
   app.run(debug = True)

The above code will produce a table with data entered in the form by user.

How to secure your home network?

Securing a home network is a big concern nowadays. As the world is moving towards the beautiful virtual world, there are certain that are not too good for everyone at home. Everything has two sides, the good and the bad. We are always expecting the good, but we should also consider the bad.

Here in this blog, we will talk about securing our home network and our family from the bad in the virtual world.

To secure your home network, you’ll need to add an additional device “Firewall” at the internet terminating point. This will help you go ahead with the security aspects of your network. You can choose simple, pocket friendly, and easy to use firewalls like “MythGuard MGF001 – Mini Firewall

There are following ways to secure the home network

  • Analise all the network traffic going out of your home network
  • Block the incoming traffic from non-genuine places
  • Block traffic to and from malicious websites
  • Tag all the devices being used in the network
  • Keep your wireless network secured with a strong password
  • Setup network alarming system

To start, lets go ahead with the above points one by one

Analise all the network traffic going out of your home network

It is a good way to get started with an analysis of the traffic of the home network first. Say, if I am living n India and the traffic hitting my home network is from China and Pakistan, it is something non-useful for me. This type of analysis can make out good results in securing and blocking traffic to and from such networks.

The analysis should include the following points

  • Which device is sending traffic outside the network
  • Where the data is being sent and received
  • Is the IP to which the data is being sent or received under the risk category (You can check the reputation on https://talosintelligence.com/)
  • Are there any unknown devices connected to the network?
  • Is something unusual happening in the traffic flow of the network?

Block the incoming traffic from non-genuine places

Once you have done the analysis, you will be well known about the sources that are malicious, and that do not require either send traffic to or from the network. You can start blocking the IP addresses that you find malicious.

If you have small children in your house and you want to have a bit of parental control over the data usage, or you don’t want them to surf illegal content like pornographic data, etc. you can do it by simply blocking such category of the website in the Firewall and setting up data usage policy for your children devices. All the facilities are available in the “MythGuard MGF001 – Mini Firewall

You can even block countries, IP range, Category wise domain names, etc. to secure the data access to and from your home network.

Block traffic to and from malicious websites

Blocking traffic to and from malicious websites is the same concept as discussed above, the difference is, you can do this by simply selecting the blocking feature generally available in all the Next Generation Firewall (NGFW). Firewalls not only block the traffic from malicious websites (blocking will include blocking of surfing, downloading, and uploading of data) but also, keep on updating the list of malicious websites.

The list gets updated and hence your network stays updated too. Security from such websites keeps you away from attacks like ransomware attacks, spoofing, phishing, etc.

Tag all the devices being used in the network

Tagging devices means, adding them to the network by binding them via MAC address. It is generally one of the best ways to secure your network. In your home network, you can evaluate the total number of devices that actually require an internet connection, and then you can connect them to the network, after connecting them to the network either via wired or wireless modes, you should bind the IP address to the MAC address of each device and block other devices to join the network.

Binding MAC address to the devices will lead to NO ADDITIONAL DEVICE in the network and thus, your wireless and wired network will be more secure, as no one standing outside your home accessing your wireless network range will be able to connect to your network. Even if he/she has the password of your wireless network.

Binding devices will also give you additional features like bandwidth motoring, access control, bandwidth control, etc.

Keep your wireless network secured with a strong password

A strong password policy is always required to keep the network secure. You should always keep a strong password for your wireless network and should always keep updating it regularly. The more complex the password is, the harder it is to guess.

A strong password also secures you from attacks like, dictionary attack, etc.

You should ensure that all the devices in the network, where ever there is a need for password protection, should have a custom password. You should not leave any of the devices on its default password setup. It can cause loopholes in your network.

Setup network alarming system

Setup an alarming system to keep yourself updated if there are any problems in your network. NGFWs have features to provide you Email and SMS-based alarms in case of different situations. You can set up alarms in situations like high bandwidth usage, network failure, a new device added to the network, etc.

This will help you monitor your home network even if you are not at your home or if you are not consistently monitoring your network. The more alarms your setup, the more secure your network will be. You will get more insights into your network.

Conclusion

Concluding the above, it is always suggested to keep your home network secure as we are adding up multiple devices for either personal use or home automation on regular basis. If your home network gets compromised, it can lead to severe consequences. Take a step today and go ahead securing your home network.

You can get in touch with us if in case you require any help in securing your network. Click here to discuss with us.

9 Tips & tricks to secure your WordPress site?

It’s always a big concern when we talk about security. Hosting your website on a global network not only gives you global reach, good business opportunities, and great outputs but also gives you great risk of data loss, brand reputation risk, and a lot more.

When it comes to website security, you need to implement few basic stuff to ensure that you are on the safe side.

If you are using a WordPress-based website you can follow the below tips and tricks to secure your WordPress website from the attacker.

  • Use an updated version of WordPress
  • Always keep your plugins and themes up to date
  • Use fewer plugins
  • Turn off/disable XMLRPC if not being used.
  • Use SSL for your website
  • Always use a good password policy
  • Use Jetpack for security and monitoring of your WordPress site.
  • Keep away from unverified publishers of plugins and themes, or any other code you put on your site.
  • Last but not the least, always host your website on a secure web host.

Use updated version of WordPress

It’s always suggested that you should not keep an out-of-date version of WordPress, as it will open up loopholes for attackers to get inside your site.

WordPress is one of the most used frameworks to develop a website, thus it has a huge client base too, which makes it a big target for attackers.

Finding a loophole in WordPress will violate millions of websites. So too keep it secure and smooth, WordPress community keeps on developing security patches for WordPress and its plugins.

Sitting on the older version of WordPress will make you a good target for attackers and it will also keep you away from the latest features and functionalities.

Always keep your plugins and themes up to date.

As we talk earlier, keeping your website code up to date, keeps you safe from attackers and also ensures smooth performance and updated functionalities.

Your plugins play a great role in making your website vulnerable, and due to which we suggest keeping them up to date and always stay on the latest version.

There are features in the latest version of WordPress to automatically update your site plugins, I’ll suggest going for that. If in case you have made changes in the plugins and do not want to update them you should always keep an eye on your site and its security then.

Use fewer plugins

The more you use ready-made codes, the more you’ll find yourself vulnerable. It is always suggested to use limited amount of plugins, as it will decrease your area of vulnerabilities.

If you have installed more than 20 plugins, it will not only give you an insecure place but also make your website slow and non-SEO/non-user-friendly. You must the radius small.

Turn OFF xmlrpc in WordPress

If you are not a user of xmlrpc or if you do not have a plugin or a theme that requires xmlrpc, you must turn it off.

We’ve come along way since WordPress was first launched. Back in the day, the feature called XML-RPC was extremely useful. In a time with slow internet speed and constant lags, it was difficult to write content online in real-time, like we do now. The XML-RPC function enabled users to write their content offline, say on Microsoft Word, and then publish it all together in one go. But you might do not know that you should disable XMLRPC in your WordPress website.

Today, with faster internet speeds, the XML-RPC function has become redundant to most users. It still exists because the WordPress app and some plugins like JetPack utilize this feature.

If you don’t use any of these plugins, mobile apps, or remote connections, it’s best to disable them. Why? Every additional element on your site gives hacks one more opportunity to try to break into your site. Disabling the feature makes your site more secure.

Use SSL on your website

It’s always good to use an encryption policy, SSL is something similar. It keeps your website users safe and secures their data from a man-in-the-middle attack.

Using SSL will not only provide an extra layer of security to your website but also provide SEO to your website listing. Search engines also love websites with SSL. Sot keep an SSL assigned to your website.

Always use good password policy

A good password policy is a way to keep your account safe from people who try to invade. You should always make sure that you and your customer follow a good password policy.

Each of your users should update their passwords quarterly and should always keep a password having a combination of characters(both small and capital cases) with digits and special characters. Also, a minimum character count of 8 characters should be maintained and the password should not contain easy strings like the name of the user, etc.

Use Jetpack for security and monitoring of your WordPress site.

Spamming is one of the big concerns nowadays. People have created bots to put backlinks of their own websites and also for several other purposes. Filtering comments one by one and marking them spam is a hectic task. You can use Jetpack for securing your websites from different types of attacks including spamming, and it can also help you in monitoring the visit count of each post and page.

There is multiple blog management feature available in Jetpack. You can go for a premium version to get an add-on security and management feature for your website.

Keep away from unverified publishers of plugins and themes, or any other code you put on your site.

Un verified plugin and theme publishers can create a great risk to your website. To ensure the safety of your website, you must stay away from them or use it at your own risk. It is always suggested to either go through the entire code before you put it on your website or else, do not use it at all.

I have seen it in many instances, a malicious code comes coupled with very needy stuff. Like if you require a plugin to allow social media to log in, it can carry a malicious code to share your credentials to a different site too. This will create great damage to your website as well as the reputation of your brand. Also, can lead to legal actions.

It’s always better to stay away from such unverified publishers. Use a plugin only if it is inside the WordPress store or if you 100% know the developer of the plugin or you have got it developed by hiring a company or a freelancer or else if you have gone through the entire code and have found the code worth putting on your website.

Always host your website on a secure web host

One of the best solutions suggested to keep your website secure is to host it on a secure web hosting platform. A good web host ensures that fewer attacks happen on all of its hosted websites and also provides multiple mechanisms to maintain the valuable flow of genuine users.

We suggest going for CLOUDPOKO, it is one of the fastest-growing web hosting platforms and provides secure web hosting solutions. WordPress installation and use on the platform are easy and user-friendly.

The hosting provider also provides add-on layer of security to the WordPress websites.

CONCLUSION

If you are a website developer or someone who is hosting a website on the global network. It is very essential to secure your website, not only to secure your data, but also to secure your website and brand’s reputation.

If you require any consultation, you can get in touch with us, here

Reduce server response times (TTFB)

When we talk about website performance, one of the ways to improve the performance is by reducing the server response time, also known as Time To First Byte (TTFB).

The server response time is considered as the time taken to reply to a request initiated by a user. When any user sends a request to view a page on a website, the server has to do multiple operations before sending the output back to the user, it may include mathematical and logical operations. These operations take some time to execute, this time taken to respond to a user’s request is known as server response time.

For example, if a user is looking to check his transaction history for the last year, the server will have to generate a list of all the transactions done within the given time period from the database and then push it into the page. This can take time and can lead to a greater response time.

How to reduce server response time?

To reduce the server response time, one needs to follow the basic steps as mentioned below:

  • Start by identifying the core task that your server needs to perform before providing the first output.
  • Identify the task taking the longest time to complete, and then try to optimize it or if possible use a different approach to run it. For example, if you are loading blog posts, you can either load all the posts at a time or can show the latest 5 at the time of page load and do ajax calls to load the rest of them when the user scrolls the page.
  • User a good server, which provides more processing capacity, more process threads, for hosting your website. One of the good web hosting providers is CLOUDPOKO
  • If you are using a dedicated server or your own server to host your website, you should upgrade the hardware to meet the processing requirements.
  • Try to make fewer database calls as much as possible, this will reduce the server busy time. As your customer base grows, if too many database calls are done, your customers may get lags in getting responses.

To check your servers response time, you can visit – https://developers.google.com/speed/pagespeed/insights/

Here you’ll be able to check the speed of all your website pages using Google’s Lighthouse report. Analyzing the report you’ll be able to find the changes required enhance the performance of your website.

Must Read
How to enhance improve website performance
How to improve website speed

If you find this article useful, do share it on your social media feeds, it will be a great support and will help to boost our morale to bring similar posts for everyone.

How to enhance your website performance?

Website speed is a great concern now a days as it not only effects the user experience but it also makes your site score low on search engine listings.

Today I’ll discuss on how we can improve a website speed. The website speed depends totally on the content it is loading. As we know, them more content you add to the website, them more time it’ll take to load. This will reduce the website performance and will also make user feel bit hazy.

To enhance the speed of a website a developer needs to consider the below points while developing the website and its content.

  • Use a good server for hosting
  • Use minified CSS & JS files
  • Use next-gen image formats
  • Use fewer server requests
  • Make minimum animations
  • Reduce media contents on the website
  • Use SEO while writing content

Let’s deal with all the above one by one

A good server for hosting

It is always suggested to host your website on a good server. As the server plays a vital role when it comes to the performance of your website. I have noticed good websites perform bad when hosted on a slow server.

Generally, while renting a hosting service, user do not study and analyze the hosting provider, rather opt for the cheapest plan. Choosing a hosting plan this way leads to bad performance of website and also leads to lower search engine rankings. Whenever you start your website, first of all, you need to analyze your audience base, if you are looking for huge audience base, you must first create a place where these people can be served. And this is where your hosting plan matters a lot.

To understand this, let;s take an example. Say, Mr. X is an owner of a hospital in Y location. His hospital has 100 beds. To get more patients, Mr. X puts his services on a global platform. The global platform is advertised via a global advertiser. This advertiser provides him patients and thus makes his business grow.

Now, consider the hospital beds count as the capacity of server to host people at a given time, global platform as Mr. X’s website, the global advertiser as a Search Engine. The search engine will only provide a traffic of maximum 60% of the total capacity of Mr. X’s hospital capacity, as it assumes that 40% of beds are already occupied and the search engine do not want to provide irrelevant data to its customers.

So if your server is not capable of handling huge clients, search engine will reduce the flow of audience towards your website.

I’ll suggest, to go for a good plan as per your client base.
One of the best class, & fastest growing web hosting providers in India is CLOUDPOKO, you can opt for web hosting services from them.

Minified CSS & JS files

A minified CSS file is basically a .css file that contains no extra white-spaces, this reduces the file size leading to faster performance of the website.

While using a CSS file, it is a generic way of coding, where people write code in separate lines and with proper indentations. This enhances the readability of the code and makes it easier to understand. But, at the same time, it increases the file size, which leads to the lower performance of the website.

Websites are over the internet, whenever anyone opens a website, s/he first downloads the code to his/her device. After the download is completed, it is further compiled/interpreted on his/her device and then the output is shown to the user. The entire process takes place while you hid a website and you see the loader spin around.

So, a bigger CSS or JS file can lead to more downloading time, leading to more loading time and thus reduced performance.

It should be noted that a website can save 20% to 30% of load time by minifying the CSS and JS files being used.
If you are looking for tools to minify your JS and CSS codes, you can go for online tools. The one I suggest is https://www.minifier.org/

Next-gen image formats

Use of next-generation image formats can reduce lot of loading time. This helps in high resolution image delivery on the cost of low bandwidth utilization.

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

Using these image formats will also help you save the space of the server, which means you can store more data at the same cost.

To know more about next-gen image formats, you can visit – https://web.dev/uses-webp-images/

Fewer server requests

Whenever a page is loaded, there are several requests generated to the server, which is either for database queries or for mathematical or logical operations. The more the server requests are involved, the more time server will take to process them. It will lead to more wait time and hence more turn-around-time(TAT) and total-blocking-time(TBT).

There are several articles to reduce the TAT and TBT of your website. Must read – How to reduce your website TBT

Make sure to reduce or optimize the server request count as much as possible, as it can create more wait time when the user count increases and can even lead to denial of service in some heavy traffic scenarios.

Minimum animations

Animations are handled by JS and CSS over web based applications, all these are handled by Web Browsers. If your website contains too much of animations, a dependency over web browser is created. If the performance of your end user’s device is not too good, your website’s animation will not be delivered with 100% efficiency leading to slow performance and cracked animations.

It is always suggested to create a moderate level of animations on a website unless it is highly required to go beyond this level.
Search engines takes these things seriously too. Your search engine ranking may get down due to too much of animations as it requires too much of code, both in JS and CSS, leading to increased website weight and lower user experience.

Try putting simple and standard animation on your website, which can make it more engaging and more user friendly, and at the same time friendly for search engines too.

Reduce media contents on the website

Media files are loaded in two different ways on a website, either linking them directly from the same server or by embedding them from a different website. in both the cases, loading time of media files depend on the server response time. Response time of the server hosting the media file.

It is advised to keep less number of media files on each page of website as it can lead to decline in page load index. It will also make end user feel hazy if the response time for media load is higher.

Also, the more number of media files on a single page, the more cellular data needs to be used to download them and view them.

To understand this, let’s take an example of a website showing a 10 MB .pdf file on its home page itself. Say, I am using an internet with a bandwidth of 1 MB per second, the website will take around 10 seconds to get downloaded on my device, as the pdf file is of 10 MB. Similarly, consider if I keep a link of the pdf instead of loading the pdf file on the home page, it will save me 10 MB of data. and hence improve the performance of my website.

Use SEO while writing content

At the time you begin writing content for your website, make sure you put proper SEO concepts in the content itself. It not only enhances your search engine visibility but also makes it friendly for people to find and share it with others.

The more people reach to your website the better ranking over search engines , also, the more prospects you get on your website, the more leads and conversions can be done.

If you will like to know more about SEO scripting, you must visit https://schema.org/

Conclusion

At last, I’ll like to take your attention towards understanding the fact that the more you focus on content and the more your focus on your website performance, the better is your website ranking on search engines. Which again puts traffic back to your website leading to more engagement and more prospecting.

Performance of a website must be considered on both speed factor as well as the search engine factor.

If in case you like the article, you can help us by sharing it to your social media feeds, it’ll boost our enthusiasm and we will be encouraged to provide more such contents.

Online Storage

Cloud Storage or Online Storage is a model of  data storage in which the virtual data is stored in logical pools, said to be on “the cloud“.

Hosting companies managed the physical environment which may be on multiple servers.These service providers are responsible for protecting and provide accessibility to user. They provide storage on lease or sell it out to user for storing their personal, organizational data.

Some Advantages of Online Storage

  • Companies need only pay for the storage they actually use, typically an average of consumption during a month.
  • Businesses using cloud storage can cut their energy consumption by up to 70% making them a more green business
  • Cloud storage provides users with immediate access to a broad range of resources and applications hosted in the infrastructure of another organization via a web service interface.
  • Cloud storage can be used for copying virtual machine images from the cloud to on-premises locations or to import a virtual machine image from an on-premises location to the cloud image library.
  • Cloud storage can be used as natural disaster proof backup, as normally there are 2 or 3 different backup servers located in different places around the globe.

Major Potential concerns for Online Storage

  • Data security
  • Longevity
  • Accessibility
  • Resource for both hackers and others
  • Piracy and copyright issues

When your data is stored online it is distributed at more locations increasing the risk of unauthorized physical access to the data. By sharing storage and networks with many other users/customers it is possible for other customers to access your data.

Outsourcing data storage to another company needs careful investigation and nothing is ever certain as the companies are not permanent and the services and products they provide can change.

Reliability and availability depends on wide area network availability and on the level of precautions taken by the service provider. Reliability should be based on hardware as well as various algorithms used.

Security of stored data and data in transit may be a concern when storing sensitive data at a cloud storage provider. The cloud holds data from many different users and organizations, hackers see it as a very valuable target.

How to Overcome the above concerns?

There are several options available to avoid such issues. One option is to use a private cloud instead of a public cloud (there are as well providers that offer private cloud storage). Another option is to ingest data in encrypted format where the key is hold within your on premise infrastructure.

Simple Chatbot using PHP with MySQL & jQuery (Ajax)

Hello readers, Today in this blog you’ll learn how to create a Simple Chatbot using PHP with MySQL & jQuery (Ajax)

A chatbot is a computer program designed to simulate human conversation. These chatbots reply to you instantly according to your queries because programmers have inserted thousands of inputs/replies/queries into the database that can be asked by the user. To make an advanced chatbot we’ve to code more and more but I tried to make a simple chatbot with few lines of codes and queries which help you to get an idea about how chatbot actually works.

In this program [Simple Chatbot using PHP], on the webpage, there is a chat form with an input field and a button labeled as “send” for typing a message and send to the bot. When you ask something to the bot and that query exists in the database then the bot replay a message according to your query instantly but if your query not matched to the database queries then the bot replays a message labeled as “Sorry can’t be able to understand you!”. In this chatting process, the webpage isn’t reloaded because I used jQuery (Ajax) for that.

If you’re feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.

PHP chatbot.php

<!-- Created By praveen kumar -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- <title>Simple Chatbot in PHP | VikashTech</title> -->
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="title">Simple Online Chatbot</div>
        <div class="form">
            <div class="bot-inbox inbox">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="msg-header">
                    <p>Hello there, how can I help you?</p>
                </div>
            </div>
        </div>
        <div class="typing-field">
            <div class="input-data">
                <input id="data" type="text" placeholder="Type something here.." required>
                <button id="send-btn">Send</button>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $("#send-btn").on("click", function(){
                $value = $("#data").val();
                $msg = '<div class="user-inbox inbox"><div class="msg-header"><p>'+ $value +'</p></div></div>';
                $(".form").append($msg);
                $("#data").val('');
                
                // start ajax code
                $.ajax({
                    url: 'message.php',
                    type: 'POST',
                    data: 'text='+$value,
                    success: function(result){
                        $replay = '<div class="bot-inbox inbox"><div class="icon"><i class="fas fa-user"></i></div><div class="msg-header"><p>'+ result +'</p></div></div>';
                        $(".form").append($replay);
                        // when chat goes down the scroll bar automatically comes to the bottom
                        $(".form").scrollTop($(".form")[0].scrollHeight);
                    }
                });
            });
        });
    </script>
    
</body>
</html>

PHP message.php

<!-- Created By praveen kumar-->
<?php
// connecting to database
$conn = mysqli_connect("localhost", "root", "", "bot") or die("Database Error");

// getting user message through ajax
$getMesg = mysqli_real_escape_string($conn, $_POST['text']);

//checking user query to database query
$check_data = "SELECT replies FROM chatbot WHERE queries LIKE '%$getMesg%'";
$run_query = mysqli_query($conn, $check_data) or die("Error");

// if user query matched to database query we'll show the reply otherwise it go to else statement
if(mysqli_num_rows($run_query) > 0){
    //fetching replay from the database according to the user query
    $fetch_data = mysqli_fetch_assoc($run_query);
    //storing replay to a varible which we'll send to ajax
    $replay = $fetch_data['replies'];
    echo $replay;
}else{
    echo "Sorry can't be able to understand you!";
}

?>

CSS style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html,body{
    display: grid;
    height: 100%;
    place-items: center;
}

::selection{
    color: #fff;
    background: #007bff;
}

::-webkit-scrollbar{
    width: 3px;
    border-radius: 25px;
}
::-webkit-scrollbar-track{
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
    background: #ddd;
}
::-webkit-scrollbar-thumb:hover{
    background: #ccc;
}

.wrapper{
    width: 370px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid lightgrey;
    border-top: 0px;
}
.wrapper .title{
    background: #007bff;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #006fe6;
    border-radius: 5px 5px 0 0;
}
.wrapper .form{
    padding: 20px 15px;
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
}
.wrapper .form .inbox{
    width: 100%;
    display: flex;
    align-items: baseline;
}
.wrapper .form .user-inbox{
    justify-content: flex-end;
    margin: 13px 0;
}
.wrapper .form .inbox .icon{
    height: 40px;
    width: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 18px;
    background: #007bff;
}
.wrapper .form .inbox .msg-header{
    max-width: 53%;
    margin-left: 10px;
}
.form .inbox .msg-header p{
    color: #fff;
    background: #007bff;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    word-break: break-all;
}
.form .user-inbox .msg-header p{
    color: #333;
    background: #efefef;
}
.wrapper .typing-field{
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    background: #efefef;
    border-top: 1px solid #d9d9d9;
    border-radius: 0 0 5px 5px;
}
.wrapper .typing-field .input-data{
    height: 40px;
    width: 335px;
    position: relative;
}
.wrapper .typing-field .input-data input{
    height: 100%;
    width: 100%;
    outline: none;
    border: 1px solid transparent;
    padding: 0 80px 0 15px;
    border-radius: 3px;
    font-size: 15px;
    background: #fff;
    transition: all 0.3s ease;
}
.typing-field .input-data input:focus{
    border-color: rgba(0,123,255,0.8);
}
.input-data input::placeholder{
    color: #999999;
    transition: all 0.3s ease;
}
.input-data input:focus::placeholder{
    color: #bfbfbf;
}
.wrapper .typing-field .input-data button{
    position: absolute;
    right: 5px;
    top: 50%;
    height: 30px;
    width: 65px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    opacity: 0;
    pointer-events: none;
    border-radius: 3px;
    background: #007bff;
    border: 1px solid #007bff;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
.wrapper .typing-field .input-data input:valid ~ button{
    opacity: 1;
    pointer-events: auto;
}
.typing-field .input-data button:hover{
    background: #006fef;
}

Free Tools & Software

You want powerful software & tools—but you don’t have to buy them. Here is a list of free useful tools for you, and it’s all totally free.

Simply-Connect ( WhatsApp Chat )

Simply-Connect: WhatsApp Messaging Plugin is easy to set up and use plugin for all kinds of websites. It can be used on a normal website by simply copying and pasting a snippet or in a WordPress website, using the plugin.
It helps your users to connect with you directly from your website by simply clicking on the WhatsApp icon on your website.

LEO – Auto Responder

Leo – Auto Responder is an android application, used to automate SMS in a professional way. It is used to send SMS on missed calls which can be used for several purposes. LEO offers a simple solution to automate SMS on your device in just a few taps via a simple interface. You can use the LEO – Autoresponder for sending customized SMS to your callers whenever you miss a call from them.

Simple User Interface for better understanding. Just download the app from here and set your message in the responder. Your responder supports multilingual, So enjoy your responder in your own language too either English or Bhojpuri.

If you don’t want to send messages on missed calls. Just switch off your responder. It will not send your message on missed calls.

Hope!! You enjoy your responder.

School Management System

School Management Systems Plays an essential role in the current educational system. School authorities all over the world are engaged in a lot of day-to-day administrative and academic activities to manage and provide a better academic experience to students effectively. However, maintaining and keeping track of school administrative activities is not an easy process in the fast-growing world. It requires hard work and often it is time-consuming.

To better perform the school administrative activities of educational institute and to assure parents the real-time progress and security of their children, educational institutes utilizes School Management software, nowadays.

Work Logger

Work Logger is a free tool, used for updating work logs on daily basis.
It has 2 modules, user and admin. Users can add/update his/her daily work or schedule work for a week or month. Admin can manage members, view the work status of users, and chat or talk to users using this tool.

Simply – Connect: WhatsApp Messaging Plugin For Website

Simply-Connect : WhatsApp Messaging Plugin is easy to set up and use a plugin for all kinds of websites. It can be used on a normal website by simply copying and pasting a snippet or in a WordPress website, using the plugin.

How it works?

WhatsApp Messaging plugin helps your users to connect with you directly from your website by simply clicking on the WhatsApp icon on your website.

WhatsApp Icon on the bottom right of your website.

When any user clicks on the WhatsApp Icon, s/he is asked for basic information and then s/he is forwarded to WhatsApp with your chat inbox.

The three basic questions include

The answers to the above questions are sent to you over WhatsApp.

Check the Plugin in Action -> https://cloudpoko.com

Installation

To install the WhatsApp Messaging Plugin into your website you need to follow the below steps:

  • Copy the code below and paste it into the footer of your website. Make sure you paste it above the closing body tag.
<script type="text/javascript" src="//vikashtech.com/CDN/special.js"></script>
<script type="text/javascript">
    let social = new Social;
    social.showWhatsApp('Your-whatsapp-number-goes-here');
</script>
  • Now, in the above snippet, put your WhatsApp number in place of Your-whatsapp-number-goes-here. Make sure you put your country code before your number and do not include “+” before it. Eg. 918989161520
  • No special characters should be used between numbers.

If you want to install it on your WordPress website, you can download the WordPress plugin here

To install it, go to the Plugins section of your WordPress Admin Dashboard, Choose Add New, and choose Upload plugin, In the upload section choose the file downloaded and then click Install Now.

Now go to the Simply Connect section in the WordPress Admin Dashboard, and enter your WhatsApp number and save it.

You are now ready to go.
Go to your website user view and check.

Want to change the styling?

if you are looking to change the styling, or you are looking to change the location of the icon, you can do it by simply passing CSS styling as the second parameter as shown below:

social.showWhatsApp('Your-whatsapp-number-goes-here','height:100px; width:100px;');

If you are still facing issues, you can write to us at support@vikashtech.com

Coming Up

  • Change questions as per your requirements
  • Get your enquiries exported in csv format.
  • Complete dashboard for monitoring your enquiries.
  • Automatic email to all the enquiries.
  • Email Template setup.

And a lot more….
All this will come directly to your website without making any changes in your code… Stay tunned…

How to improve Website Page speed?

What is Page Speed?

Page speed is generally confused with “website speed”, which is wrong. Page speed is specific to a Page and not to the entire website. It can be understood as the “loading time of a page” (the time it takes to fully display the content on a specific page) or “time to first byte” (how long it takes for your browser to receive the first byte of information from the webserver).

You can evaluate your page speed with Google’s PageSpeed Insights. PageSpeed Insights Speed Score incorporates data from CrUX (Chrome User Experience Report) and reports on two important speed metrics: First Contentful Paint (FCP) and DOMContentLoaded (DCL).

SEO Best Practices

Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to the first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.

Page speed is also important to user experience. Pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.

Here are some of the many ways to increase your page speed:

Enable compression

Use Gzip, a software application for file compression, to reduce the size of your CSS, HTML, and JavaScript files that are larger than 150 bytes.

Do not use gzip on image files. Instead, compress these in a program like Photoshop where you can retain control over the quality of the image. See “Optimize images” below.

Minify CSS, JavaScript, and HTML

By optimizing your code (including removing spaces, commas, and other unnecessary characters), you can dramatically increase your page speed. Also remove code comments, formatting, and unused code. Google recommends using CSSNano and UglifyJS.

Reduce redirects

Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. For example, if your mobile redirect pattern looks like this: “example.com -> www.example.com -> m.example.com -> m.example.com/home,” each of those two additional redirects makes your page load slower.

Remove render-blocking JavaScript

Browsers have to build a DOM tree by parsing HTML before they can render a page. If your browser encounters a script during this process, it has to stop and execute it before it can continue. 

Google suggests avoiding and minimizing the use of blocking JavaScript.

Leverage browser caching

Browsers cache a lot of information (stylesheets, images, JavaScript files, and more) so that when a visitor comes back to your site, the browser doesn’t have to reload the entire page. Use a tool like YSlow to see if you already have an expiration date set for your cache. Then set your “expires” header for how long you want that information to be cached. In many cases, unless your site design changes frequently, a year is a reasonable time period. Google has more information about leveraging caching here.

Improve server response time

Your server response time is affected by the amount of traffic you receive, the resources each page uses, the software your server uses, and the hosting solution you use. To improve your server response time, look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and fix them. The optimal server response time is under 200ms. Learn more about optimizing your time to first byte.

Use a content distribution network

Content distribution networks (CDNs), also called content delivery networks, are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.

Optimize images

Be sure that your images are no larger than they need to be, that they are in the right file format (PNGs are generally better for graphics with fewer than 16 colors while JPEGs are generally better for photographs) and that they are compressed for the web.

Use CSS sprites to create a template for images that you use frequently on your sites like buttons and icons. CSS sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections that you want to show. This means that you are saving load time by not making users wait for multiple images to load.

Need web hosting? CLOUDPOKO is the best place for you!

Having a website is crucial, especially if you are serious about building a web presence. 

To create a website— and you probably know this, given you are reading this best hosting article— you need at least two things: A hosting solution and a domain name.

You can buy a domain name from any provider (some web hosting companies give free domain registration offers too, be sure “nothing is free, you will be charged somehow!”). But when it comes to hosting, you need to be more aware.

Remember, your web hosting services are the foundation of your website. No matter whether you’re a medium-sized business or a local florist, you’re going to want the best website hosting to win in the market. And to help you find an ideal hosting for your website.

Why does website hosting matter?

The web hosting provider you choose, as well as the type of plan you sign up for, can have a huge impact on your website’s performance. For example, many small business owners choose to go with a shared hosting plan – both for its affordability and its ease of use. And that’s a totally fine choice if you anticipate less than 1,000 visitors per day.

But if you have a thriving business that attracts a large amount of traffic or your website requires a lot of data for things like streaming videos or custom apps, a simple hosting plan isn’t going to cut it. The limited bandwidth and RAM will cause your site’s performance to suffer, and users to have a poor experience.

CLOUDPOKO is one of the best in class web hosting services provider in INDIA. You get fast, reliable, and pocket-friendly hosting from them.

Coming to the support offered by the team, we have seen a quick response and faster resolution of problems. They do not sayYour request has been taken and will be resolved within 72 hours“, as is said by other hosting providers.

To checkout hte latest plans and service offerings, visit here

Why use Smarty? Benefits & Losses

Smarty is a templating engine, as everyone knows. It has a big market and is being used by companies like WHMCS for building great tools. It’s a great tool to be used in the development of projects of small and big levels.

Today, we are going to discuss about its benefits and losses. Who should prefer using smarty in his/her project and who should stay away and continue with PHP itself.

Some might argue that Smarty does what PHP can do already: separate the presentation from business logic. The PHP programming language is great for code development but when mixed with HTML, the syntax of PHP statements can be a mess to manage. Smarty makes up for this by insulating PHP from the presentation with a much simpler tag-based syntax. The tags reveal application content, enforcing a clean separation from PHP (application) code. No PHP knowledge is required to manage Smarty templates.

The importance of this separation is situational. It is commonly more important to web designers than it is to PHP developers. Therefore, Smarty is commonly a good fit when the roles of developers and designers are separated. There is no right or wrong answer: every development team has their own preferences for managing code and templates. Aside from a clean tag-based syntax, Smarty also offers a wide variety of tools to manage presentation: granular data caching, template inheritance and functional sandboxing to name a few. Business requirements and the PHP code Smarty is being used with will play a large role in determining if Smarty is a good fit.

In cases where efficient template management is crucial or the case where web designers (not PHP developers) are managing templates, the strengths of the tag-based template syntax are quickly realized. If the project size scales to hundreds or thousands of templates, template inheritance keeps template maintenance streamlined. What little Smarty adds technically (a tag-based syntax + 1-time compile step) is easily overcome by the time saved with template maintenance.

People who are looking for development of projects that can use multiple themes should opt for smarty and can do lot of good work with it. As I mentioned before, it is a template engine that can help you in keeping your PHP and Theme Files separate.

Who should not go for smarty?

People who do not want to implement separation in presentation and functional layers of the project should not look for Smarty.

People who are always looking for great community for support on programming languages and need lot of documentation on it, should not opt for it. Smarty has its own community and large documentation too but it can be a bit confusing if you require an instant action / solution, as you will not get a smarty developer easily.

Smarty is clearly not meant for every project. It is just one solution for managing the presentation of your PHP applications. Your business requirements along with your development team preferences will largely decide of Smarty is a good fit. Be sure to read All about Smarty, Use Cases and Work Flow, Template Inheritance and Syntax Comparison. And of course, install Smarty and give it a try.

WordPress best practices to make your website fast, user-friendly, and more reliable.

We know you’re going to take on some incredible work next year, so before you get too crazy with new clients or preoccupied with projects, take the time to make your existing sites and workflow shine! Your WordPress website can be taken to a better performance level and can become more usable following a few best practices.

We have jotted down some of the best practices to make our work simple. Read the article to explore more.

1. Always make site updates in a test environment

This first tip earned the number one spot on my list for a very important reason: You should keep it in mind for everything else we’re going to talk about.

When you make changes directly to your live site, you run the risk of something causing your site to crash. And if your site is tied to your business, downtime is critical to avoid at all times, as that could mean a loss in sales.

To eliminate this unnecessary risk, you can use a test environment to update your WordPress site. For quick fixes, a staging site would work well. If you’re testing functionality or brand new site design, I recommend a local environment. If you haven’t worked with a test environment before, try setting up a local environment on a local machine to play with the stuff.

2. Get to know the Gutenberg editor (WordPress 5.0)

WordPress 5.0 was released at the end of 2018, which introduced the Gutenberg editor. Even if you’re planning to use the Classic Editor Plugin for a while (which will be supported until December 31st, 2021), it’s worth getting to know our new friend Gutenberg this year.

I recommend setting up a local WordPress site running version 5.0, so you can safely experiment with the new editor without any risk to your real site.

If you’re a content creator, try creating a new post with Gutenberg so you can see how it feels to use blocks. You may also get a few new ideas for formatting future articles!

If you’re a developer, you can import a copy of your live site into your local environment, and then update to WordPress 5.0 to do some troubleshooting. This will allow you to see how your site’s existing content reacts to Gutenberg, so you can put a plan in place to update the live site.

3. Update your themes and plugins

This WordPress tip is nothing new, but it’s so important that it’s worth including in any best practice list! Now’s the perfect time to audit your themes and plugins to make sure they’re up to date and running as they should be.

While it may feel tedious to run through all the sites you manage just to update these things, it’s incredibly important for both site speed and security. Outdated versions may have vulnerabilities that put the site at risk and imagine how much more time it’s going to take to fix a site with malware.

4. Make sure your sites are mobile-friendly

This best practice also isn’t new, but it remains incredibly important: Your website needs to be fully responsive and mobile-friendly.

If you’re using well-maintained WordPress themes and plugins that are up to date (which, according to the last tip, you should be!), there’s a decent chance your site automatically performs pretty well on smaller screens. (Thanks, WordPress developers!)

If you’re running a custom site design, however, you might have to think a little more intentional about making sure your site is mobile-friendly. And again, if you identify any changes you need to make, test them in a local environment or staging site first. Otherwise, site visitors might stumble across a pretty weird experience on your site while you’re in the middle of updates!

5. Add SSL certificates to every site

There was a point in time where SSL certificates were only considered important for certain types of sites, like eCommerce shops or online bank portals that were handling sensitive client information. Today, however, having an SSL certificate on your site is considered a best practice, even if you’re just building a personal blog.

Google has even started flagging sites without an SSL certificate as “not secure,” which is definitely not something you want showing up on your website.

If you don’t have an SSL certificate installed, start with your hosting provider. Many will actually provide SSL certificates (a common benefit of managed WordPress hosts). CLOUDPOKO offers Simple SSL, a free certificate powered by Let’s Encrypt, for every site.

6. Find your favorite tools

This tip is all about helping you have a more productive and efficient year when it comes to building sites for clients. One of the best ways to improve your workflow is to simplify the number of WordPress themes, plugins, add-ons, apps, extensions, etc. that you use.

Sure, there will always be new challenges to solve and unique site requirements but do a little audit of all the tools you use. Is there any overlap? Can you simplify?

For example, when it comes to WordPress themes, do you have a single framework you always start from? Or maybe a theme company you trust? Or does every new site design require a bunch of research time to identify a brand new solution?

If you haven’t found your favorite tools yet, that’s okay. But make sure you increase efficiency by defining your go-to options, so researching a custom solution is the exception, not the rule.

7. Involve your clients in the design and development process

There’s almost nothing worse than making a ton of progress on a project, only to find out the client isn’t happy about a major part of it. This year, prioritize client feedback regularly throughout the project, to ensure everyone is always on the same page!

When you’re onboarding a new client, take the time to get to know their business, what they like/dislike about other websites, and their goals for the year. Using a client questionnaire can help standardize that process so you don’t forget anything in the first stage of a project!

Once the project is in motion, check in with your client during different phases, including wireframes, mockups, development, etc. If you’re using Local to build the site, you can even send clients a link to the site on your machine, giving them a chance to preview a working version.

By getting feedback early on, you’ll prevent major changes down the road and keep your clients smiling!

Following the above simple steps, you will be able to make your WordPress based website more worth it.
Keep Developing And Keep Learning!