WordPress Website Security

Below are the important points that needs to be taken care to make your website fully secure.

1. Don’t use admin as a username

A majority of today’s attacks target your wp-admin / wp-login access points using a combination of admin . As admin is very common so it can be easily gueesed. Always try to use different username.

2) Use updated wordpress Always

Make your wordpress updated to the latest version. As the latest version always comes with updated security features.

3. Use a less common password

Make use of complex password that is difficult to guess. It makes your website very secure as the intruders cannot easily enter to your website.

4. Add Two-Factor Authentication

Use two factor authentication. Now a days all the latest websites are using this to make it secure. Gmail , paypal all are using the same two factor authentication to make the website secure.

5. Hide wp-config.php and .htaccess

Use the below code to make the wp-config.php and .htaccess hidden so that intruders cannot access these important files.

<Files wp-config.php>
order allow,deny
deny from all
</Files>

6. Use WordPress security keys for authentication
7. Disable file editing
8. Limit login attempts

React Native Important Concepts

In this tutorial we will learn about important concepts of react native. The important concept of react native that we will discuss in this tutorial are:

  • State
  • Props
  • Styling
  • Flexbox
First we will discuss about State in React Native
State :
  • State in react native is used to manage the data inside the component.
  • State can be updated at any time. So we call state as mutable.

Example of State :

  1. import React, { Component } from ‘react’;
  2.  import { Text, View } from ‘react-native’;
  3. class Stateexample extends Component {
  4. state = {
  5. myState: ‘Testing’
  6. }
  7. render() {
  8. return (
  9. <View> <Text> {this.state.myState} </Text> </View> );
  10. }
  11. }
Props :
  • The difference between props and state is that props can not be updated
  • State can be updated at any time in the react native code.

Styling in React Native :

1.You can style your component in react using inline style as well as using stylesheet

2 . Just like we do in other languages

  1. import React, { Component } from ‘react’
  1. import { Text, View, StyleSheet } from ‘react-native’
  2. const testcomp= (props) ⇒ {
  3. return (
  4. <View>
  5. <Text style = {styles.mystyle}> {props.myState} </Text> </View>
  6. )
  7.  }
Styles Example :
  • 1.const styles = StyleSheet.create (
  • 2.{
  • mystyle:
  • 4.{ marginTop: 20, textAlign: ‘center’, color: ‘blue’, fontWeight: ‘bold’, fontSize: 20 }
  • 5.}
  • )
Flexbox in React Native :

1.It is used to accommodate different screensize in react native.

2.flexbox offers three main properties − flexDirection justifyContent and alignItems.

  1. 3.const styles = StyleSheet.create (
  2. 4.{
  3.  maincont: {
  4. flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’, backgroundColor: ‘grey’, height: 600 },
  5. })

Javascript Introduction To advanced concepts

Javascript Object Oriented Concept:

  • A JavaScript object is, in that sense, a collection of named properties and methods .
  • Objects are a way to categorize behavior and data, making large amounts of code easier to design and think about.
  • An object can be stored in a variable, and the properties and methods accessed using the dot syntax.
  • Variables can hold objects, and creating an object is done using a special syntax signified by braces:

Example of Object in javascript:

  1. var per= {
  2. name: “sha”,
  3. age: 32,
  4. getage: function () { alert(“hello world”);
  5. }

In order to access items , we use dot operator like
  • per.name
  • per.age
  • per.getage();
  • You can also assign values
  • per.name=“john”
  • per.age
Creating an empty object
  • var obj={};
  • obj.mov=function(){ alert(“hello”);};

Prototypal inheritance:

JavaScript uses prototypal inheritance. This means that, when an object inherits from another, the parent object is known as the child’s prototype.

Javascript Closure:
  • closureis a function that returns a function.
  • The function that is returned (the innerfunction)
  • is created inside the called function (the outer) so – due to the

Example :

  1. var sub= function (a) {
  2. return function (b) { return a -b; }; };
  3. var addFive = sub(4);
  4. alert(addFive(10))

 

HTML 5 Graphics Components

HTML 5 Provides two graphic Components:

  • CANVAS
  • SVG

HTML 5 Canvas :

  1. Canvas is used to draw graphics on web.
  2. It is basically the container of the graphicsF

Example :

  1. <canvas id=“mycan”width=”200″ height=”100″></canvas>
  2. var c = document.getElementById(“mycan”);
  3. var ctx = c.getContext(“2d”);
  4. ctx.moveTo(0, 0);
  5. ctx.lineTo(200, 100);
  6. ctx.stroke();

SVG :

  • Scalable Vector Graphics
  • The HTML <svg>element is a container for SVG graphics.
  • <svgwidth=”100″ height=”100″>
    <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
    </svg>
  • <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
    style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />

HTML 5 API tutorial for beginners

HTML 5 GEOLOCATION API

  • HTML5 Geolocation API
  • It is used to Locate the User’s Position
  • The HTML Geolocation API is used to get the geographical position of a user.
  • Since this can compromise privacy,
  • User will have to give permission in order to get his/her location

We use navigator.geolocation.getCurrentPosition to get the user location

2) HTML 5 Drag and Drop

  • You can “grab” an object and drag it to a different location.
  • Any element in HTML 5 can be drag and drop
  • First make Draggable attribute to true of the html element
  • <img draggable=”true”>
  • There are two things :
  • What to drag Where to drag

Example of Drag and Drop:

<div id=”divdrop” ondrop=”dropevtn(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>

3) HTML 5 Web Storage

  • It is used to store the user data locally
  • Earlier we use cookies to store data in which we can only store limited amount of data
  • With web storage large amount of data can be stored without any performance effect and also it is more secure
  • 5mb of data can be stored
  • Cookies can store very less data

Two types of Web Storage:

  • window.localStorage- stores data with no expiration date
  • window.sessionStorage- stores data for one session (data is lost when the browser tab is closed)
  • Store item in localstorage
  • localStorage.setItem(“subject”,“maths”);
  • Retrieve items from local storage
  • localStorage.getItem(“subject”);

4) Web Workers in HTML 5:

  • A web worker is a JavaScript that runs in the background independently of other scripts, without affecting the performance of the page.
  • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Example :

w = new Worker(“latest_workers.js”);

5) Server Side Events :

  • To update the page automatically from the server
  • The server sends messages automatically to update the page
  • One way messaging

 

 

HTML 5 CRASH COURSE FOR BEGINNERS

HTML 5 Introduction:

  • HTML5 is the latest and most enhanced version of HTML.
  • HTML is not a programming language, but rather a markup language.
  • HTML 5  is the advanced version of HTML 4.01, XHTML 1.0, and XHTML 1.1 and has superseded all  these versions.

HTML 5 Features:

  • The DOCTYPE declaration for HTML5
  • <!DOCTYPE html>
  • The character encoding (charset) declaration is also very simple:
  • <meta charset=”UTF-8″>
  • HTML 5 removes extra information required and you can use simply following syntax −
  • <script src = “scriptfile.js”></script>
  • The type attribute is already removed from elements.
  • Like from <link type=“text/css” > the type is removed from stylesheet.

HTML 5 Elements :

  • New semantic elementslike <header>, <footer>, <article>, and <section>.
  • New attributes of form elementslike number, date, time, calendar, and range.
  • New graphic elements: <svg> and <canvas>.
  • New multimedia elements: <audio> and <video>.
  • aside− This tag represents a piece of content that is only slightly related to the rest of the page.
  • header− This tag represents the header of a section.
  • footer− This tag can contain information about the author, copyright information, et cetera.
  • nav− This tag represents a section of the document intended for navigation.
  • dialog− This tag can be used to mark up a conversation.
  • figure− This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
  • section− This tag represents application section. It can be used together with h1-h6 to indicate the document structure.
  • article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article

Structure of HTML 5 Page

  • <!DOCTYPE html>
  • <html>
  • <head> <meta charset = “utf-8”> <title>…</title>
  • </head>
  • <body>
  • <header>…</header>
  • <nav>…</nav>
  • <article> <section> … </section> </article> <aside>…</aside>
  • <footer>…</footer>
  • </body> </html>

HTML 5 Compatibility with IE 8 and prior versions:

  • You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
  • The HTML5Shiv is placed within the <head> tag.
  • The HTML5Shiv is a javascript file that is referenced in a <script> tag.
  • You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

HTML 5 New Input types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

 

 

Angular JS Tutorial For Beginners

In this tutorial we will understand the basics of Angular 5 js. What are the main features of Angular.  What is require to learn Angular. First we will discuss about the definition of angular js.

Angular JS Introduction:

  • It is a client side javascript framework.
  • Runs on client side
  • The framework is maintained by google.


Features of Angular JS

  • Fast to code.
  • Code is very organized.
  • Dynamic Content
  • Code is compatible on different platform

Install Angular JS

  • npm install –g @angular/cli
  • In order to check the installed version write command
  • ng –v

How to create new App in Angular js

  • ng new testapp –style=scss –routing
  • ng serve

Use ng serve to start the server.

Components in Angula JS

ng generate component home

Program Structure:

import { Component } from ‘@angular/core’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.scss’]

})

export class AppComponent {

title = ‘app’;

}

 

 

Node.js Modules Introduction

Node.js is all about modules. For every program we use already built modules. Like http module, fs module, nodemailer module, formidable module, express module.

  • Modules are javascript libraries
  • Modules are used for different purposes.
  • In order to use any module it needs to be installed on the system.
  • Modules are installed using
  • npm install modulename

 

Features of Modules in Node.js

  • It contains set of functions that you need to implement in your program.
  • Types of Module
  • http module – Create client server application
  • Fs module – it is used for all the files related operations (read a file, write a file)
  • url module – it is used to parse url
  • Nodemailer module – to send email
  • Formidable module – to upload files on the server

How to use Modules in Node.js Program

In node.js we use require function to include the module in the code. Below is the sample code to use module.

First we include the module in the program

varhttp = require(‘http’);

http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/html’});
res.end(‘Hello World!’);
}).listen(8080);

How to create custom module in node.js

  • You can create your own module using exports keywords.
  • Using export keyword module is available outside the file.
  • Create a new file “custom.js”
  • exports.newfunc= function () {
    return Date();
    };

Save the file “custom.js”

Now you can use the above custom module in your new program :

var http = require(‘http’);
var dt = require(‘./custom’);

http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/html’});
res.write(“The date and time are currently: ” + dt.newfunc());
res.end();
}).listen(8080);

 

 

NODE.JS Client Server Interaction Program

In node.js both client program and server program are written in Javascript. In order to create server you can use http module of node.js. We will discuss with a simple program how client server program is done in node.js.

First we have to setup the server.

  • Node.js provides an httpmodule
  • This http module is used to create an HTTP server.
  • this HTTP server which listens at port.

Create a file named index.js in node.js

  • var http = require(‘http’);
  • http.createServer(function (req, res){
  • res.write(‘WELCOME TO MY FIRST PROGRAM!’);
  • res.end(); //end the response
  • }).listen(8080);

Set HTTP Header in Node.js

  • var http = require(‘http’);
  • http.createServer(function (req, res) {
  • res.writeHead(200, {‘Content-Type’: ‘text/html’});  // On this line we set up http header in Node.js
  • res.write(‘My first program!’);
  • res.end();}).listen(8080);

Split query string in Node.js

We use the url module to split the query string .

  • varhttp = require(‘http’);
    varurl = require(‘url‘);

    http.createServer(function (req, res) {
    res.writeHead(200, {‘Content-Type’: ‘text/html’});
      var q = url.parse(req.url, true).query;
      var txt = q.product + ” ” + q.weight;
    res.end(txt);
    }).listen(8080);

http://localhost:8080/?product=p&weight=45

Node.js – Create your first program in nodejs

In this post we will discuss about the simple program in node.js , in order to understand the basics of node.js programming. We will understand this with the help of an example in node.js. We will go step by step. First in order to execute the node.js program you have to install node.js.  After that follow the below steps:

  • Open a new folder
  • npm init
  • First step to create package.json file
  • It will be created in the new folder.

Create a new file index.js :

In this example we will use http to create server and then client will access it using browser using node.js.

  • const http = require(‘http’); // http module that is used to create server
  • const hostname = ‘127.0.0.1’;
    const port = 5000;
  • const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader(‘Content-Type’, ‘text/plain’);
    res.end(‘Hello World\n’);
    });
  • server.listen(port, hostname, () => {

}

Run node.js Program:

  • Node index.js  // on the command prompt write node inxex.js

 

Now open the browser on 5000 port to check the result:

To use the application, open http://localhost:5000 in a browser to see the words Hello World.