How to create a 301 Redirect

Step1:

Create a .htaccess file with the below code, it will ensure that all requests coming in to domain.com will get redirected to www.domain.com

The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)

 Step2:

To rewrite we should on the RewriteEngine on

Syntax:

RewriteCond %{HTTP_HOST} !^www\.starevents\.in
RewriteRule (.*) http://www.starevents.in/$1 [R=301,L]

sample code

 .htaccess.file:

RewriteEngine on
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} !^www\.starevents\.in
RewriteRule (.*) http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.html
RewriteRule ^(.*)index.html$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.php
RewriteRule ^(.*)index.php$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.htm
RewriteRule ^(.*)index.htm$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.pl
RewriteRule ^(.*)index.pl$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/default\.htm
RewriteRule ^(.*)default.htm$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/default\.aspx
RewriteRule ^(.*)default.aspx$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.aspx
RewriteRule ^(.*)index.aspx$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.asp
RewriteRule ^(.*)index.asp$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/default\.asp
RewriteRule ^(.*)default.asp$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.shtml
RewriteRule ^(.*)index.shtml$ http://www.starevents.in/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index\.cfm
RewriteRule ^(.*)index.cfm$ http://www.starevents.in/$1 [R=301,L]

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

ErrorDocument 404 http://www.starevents.in/404.html

 Step3:

SEO Redirect checker to check 301 is redirecting

http://www.ragepank.com/redirect-check/

Step 4:

Enjoy Folks

Creating Simple Search Box using Angular Js

Step1:

Creating Simple Search Box using Angular JS  is nothingin but adding  ng- model in input box

Step 2:

Add this input box  ng-model ="searchBox" and give the name called searchBox

 <input type="text" ng-model ="searchBox">
 
Step 3:

Include the Ng-model name  using pipe ( |)  and filter  options

     <li ng-repeat ="person in persons | filter: searchBox">

 Step 4:

Now if you search in input box with a particular letter result will be display according to it.

<div ng-controller="people">

<input type="text" ng-model ="searchBox">
     <ul>
    
     <li ng-repeat ="person in persons | filter: searchBox">
    
        {{ person.name + ' ' + person.Country }} 
       
        </li>
       
     </ul>

</div>

 Step 5:

That's all Enjoy Folks

What is a Angular

AngularJS is a very powerful JavaScript library

    1. AngularJS extends HTML with new attributes.

   2. AngularJS is perfect for Single Page Applications (SPAs).

   3.AngularJS provides developers options to write client side applications


Model View Whatever − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.

    1. MVC Framework

               Model - How the application behaves the data.

               View - whatever Visible to user

               Controller - the coding which is act between  model and View

Disadvantages of AngularJS

Though AngularJS comes with lots of plus points but same time we should consider the following points −

• Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
  
• Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more

Single Page Application - My First Assignment

Task :

The task is to design a single page, the layout of which is shown in the attached pdf file.

The data needed for the page is provided in the form of a JSON file (data.json) as attached.

Page basically displays the followers for a Facebook page, the data file contains details of the followers (name,country).

The page consists of two portions. 

   1. A header tab, displaying the number of cards (Followers (count)) on the top. 

   2. And the lower panel displays followers in the form of cards.

One card represents one follower. Each card is supposed to display follower details (taken from data.json) as shown in the design.

Each card has a close button on the top right corner.

You are free to choose colors for background, borders etc throughout the page.

Functionality wise, the close button on each card is supposed to remove the card from the view, 

and once a card is removed the number shown in header (Followers(number)) should update accordingly.

Each row of cards display is supposed to contain maximum 3 cards.

For icons you may use font-awesome.

Data.json File

 [{
    "name": "F1",
    "Country": "India"
},
{
    "name": "F2",
    "Country": "China"
},
{
    "name": "F3",
    "Country": "Australia"
},
{
    "name": "F4",
    "Country": "South America"
},
{
    "name": "F5",
    "Country": "Canada"
},
{
    "name": "F6",
    "Country": "USA"
},
{
    "name": "F7",
    "Country": "Japan"
},
{
    "name": "F8",
    "Country": "Former Yugoslav Republic of Macedonia"
},
{
    "name": "F9",
    "Country": "Denmark"
}
]

  Html Code :

Start  with Index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rokitt</title>
<script src="js/angular.min.js"></script>
<script src="app.js"> </script>
<script src="controllers/cardsController.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="followersData">
  <div ng-include ="'views/followersView.html'"> </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Step2:

Create a App.js file to define the module

var app = angular.module('myApp', []);


Step3:

Create a CardsController.js file to define the controller of module

    app.controller('followersData', function($scope, $http) {
    $http.get("data.json")
    .success(function(response) {$scope.names = response;});
    $scope.removeCards = function(x) {
    angular.forEach($scope.names, function(checkCards, index) {
      
        debugger;
        if (checkCards.name === x.name) {
          
            $scope.names.splice(index,1);  
        }
    });
  };
});

Step4: 

 Create a FollowersView.html file to define the controller of module


<header>
  <h2> Followers ({{names.length}}) </h2>
</header>
<section>
  <div class="row"> <!--row div starts here-->
     <div class="col-md-4" ng-repeat="x in names">
     <div class="cards">
      <button class="glyphicon glyphicon-remove pull-right" ng-click="removeCards(x)"></button>
      <h2> {{  x.name }} </h2>
      <p> {{  x.Country }} </p>
      </div>
    </div>
  </div>
  <!--row div ends here-->
 
</section>

Step5: 

Output:

when the Close button click on each card is supposed to remove the card from the view,
Once a card is removed the number shown in header (Followers(number)) should update accordingly.



Enjoy Folks