Wednesday, 16 August 2017

REST Based API using Spring Boot and MySQL







import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootWebApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootWebApplication.class, args);
    }

}




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Homepage controller.
 */
@Controller
public class IndexController {

    @RequestMapping("/")
    String index() {
        return "index";
    }

}





import com..entities.Product;
import com..services.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Product controller.
 */
@Controller
public class ProductController {

    private ProductService productService;

    @Autowired
    public void setProductService(ProductService productService) {
        this.productService = productService;
    }

    /**
     * List all products.
     *
     * @param model
     * @return
     */
    @RequestMapping(value = "/products", method = RequestMethod.GET)
    public String list(Model model) {
        model.addAttribute("products", productService.listAllProducts());
        System.out.println("Returning rpoducts:");
        return "products";
    }

    /**
     * View a specific product by its id.
     *
     * @param id
     * @param model
     * @return
     */
    @RequestMapping("product/{id}")
    public String showProduct(@PathVariable Integer id, Model model) {
        model.addAttribute("product", productService.getProductById(id));
        return "productshow";
    }

    @RequestMapping("product/edit/{id}")
    public String edit(@PathVariable Integer id, Model model) {
        model.addAttribute("product", productService.getProductById(id));
        return "productform";
    }

    /**
     * New product.
     *
     * @param model
     * @return
     */
    @RequestMapping("product/new")
    public String newProduct(Model model) {
        model.addAttribute("product", new Product());
        return "productform";
    }

    /**
     * Save product to database.
     *
     * @param product
     * @return
     */
    @RequestMapping(value = "product", method = RequestMethod.POST)
    public String saveProduct(Product product) {
        productService.saveProduct(product);
        return "redirect:/product/" + product.getId();
    }

    /**
     * Delete product by its id.
     *
     * @param id
     * @return
     */
    @RequestMapping("product/delete/{id}")
    public String delete(@PathVariable Integer id) {
        productService.deleteProduct(id);
        return "redirect:/products";
    }

}



import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Version;
import java.math.BigDecimal;

/**
 * Product entity.
 */
@Entity
public class Product {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Integer id;

    @Version
    private Integer version;

    private String productId;
    private String name;
    private BigDecimal price;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getVersion() {
        return version;
    }

    public void setVersion(Integer version) {
        this.version = version;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getProductId() {
        return productId;
    }

    public void setProductId(String productId) {
        this.productId = productId;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

}




public interface ProductRepository extends CrudRepository<Product, Integer> {

}





public interface ProductService {

    Iterable<Product> listAllProducts();

    Product getProductById(Integer id);

    Product saveProduct(Product product);

    void deleteProduct(Integer id);

}





/**
 * Product service implement.
 */
@Service
public class ProductServiceImpl implements ProductService {

    private ProductRepository productRepository;

    @Autowired
    public void setProductRepository(ProductRepository productRepository) {
        this.productRepository = productRepository;
    }

    @Override
    public Iterable<Product> listAllProducts() {
        return productRepository.findAll();
    }

    @Override
    public Product getProductById(Integer id) {
        return productRepository.findOne(id);
    }

    @Override
    public Product saveProduct(Product product) {
        return productRepository.save(product);
    }

    @Override
    public void deleteProduct(Integer id) {
        productRepository.delete(id);
    }

}






Saturday, 14 January 2017

Shopping Cart App in AngularJS

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myCartApp" ng-cloak>
  <head>

    <title>AngularJS Routing example</title>




          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <style>
  body {
    padding-top: 10px;
    background-color: #F5F5F5;
  }

    </style>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->


      <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
      </noscript>


  </head>

<body ng-app="myCartApp" ng-controller="ProductController">

    <div class="container-fluid outerdiv">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><span class="span-style"> Shopping Cart</span></a>
          </div>
        </div>
      </nav>
    </div>


<br>
<br><br>
<br><br>

 <div class="container"  >
     
   
      <input type = "text" class = "form-control" ng-model = "searchProduct">
      <br><br>
      <div class="row">
<ul class = "thumbnails list-unstyled">
         <li class="col-md-3" ng-repeat="product in products | filter : searchProduct ">
           <div class="thumbnail" style = "padding:0">
              <div style="padding:4px">
                <img class="img-rounded"  style = "width : 100% "ng-src="{{product.product_image}}" alt="253x220" width="350" height="200" >
               </div>
              <div class="caption">
                <h3>{{ product.product_name}}</h3>
                <p>{{product.product_description}}</p>
<h4> {{ product.product_price | currency : "Rs. " }}  </h4>
                <button class="btn btn-primary btn-sm" ng-click = "addToCart(product);" ng-disabled = "product.disable" >Add to Cart</a>
            </div>
            </div>
 </li>

 <li class="col-md-3">
           <div class="thumbnail" style = "padding:0">
              <div style="padding:4px">
               
               </div>
              <div class="caption">


                <h3>SHOPPING CART</h3>
<table class = "table table-bordered" >
<thead>
<th> #  </th>
<th> Product  </th>
<th> Price  </th>
<th> Action  </th>
</thead>
<tbody>
<tr ng-repeat = "product in cart">
<td> {{ $index + 1}} </td>
<td > {{ product.product_name}} </td>  <td > {{ product.product_price}} </td>


<td > <button class="btn btn-info btn-sm" ng-click = "removeItem(product)">X</button> </td>

</tr>

<tr>
<td class = "text-center" colspan = "2"> <strong > Total</strong> </td>
<td  class = "text-center"colspan = "2"> <strong >{{getTotal() | currency : "Rs. " }} </strong></td>
</tr>

</tbody>
</table>

                 </div>
          </div>
      </li>
             </ul>
          </div>
        </div>
        </div>
       
       
      </div><!-- End row -->
     
    </div><!-- End container -->

<br><br>

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>

 <script src="ProductController.js"></script>

  </body>
</html>


ProductController.js



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

app.controller('ProductController', function ($scope, $http)
 {


    $scope.cart = [];

// Load products from server
$http.get('products.json').success(function (response) {
$scope.products = response.products;
});

$scope.addToCart = function (product) {
var found = false;
$scope.cart.forEach(function (item) {
if (item.id === product.product_id) {
item.quantity++;
found = true;
}
});
if (!found) {
$scope.cart.push(angular.extend({quantity: 1}, product));
  var indexsam = $scope.products.indexOf(product);
$scope.products[indexsam].disable = true;
}
};

$scope.removeItem = function(product){
  var indexsam = $scope.cart.indexOf(product);
$scope.cart.splice(indexsam,1);
  $scope.products[indexsam].disable = false;  


};

$scope.getTotal = function () {
var total = 0;
$scope.cart.forEach(function (product) {
total += product.product_price;
});
return total;
};

});


products.json

{"products": [
{
    "product_id"  : 1,
    "product_name"  : "Samsung Galaxy A8",
    "product_description"  : " The Samsung Galaxy A8 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
    "product_image"  : "images/j5.jpg",
    "product_price"  : 10000
 },
 {
    "product_id"  : 2,
    "product_name"  : "Moto G4 Plus",
    "product_description"  : " The Moto G4 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
    "product_image"  : "images/MotoG4.jpg",
    "product_price"  : 20000
 },
 {
    "product_id"  : 3,
    "product_name"  : "Lenovo K3 Note",
    "product_description"  : " The Lenovo K3 Note is powered by Snapdragon 5 Processor, Released in 2017, Features 3 GB RAM, 10GB External Memory",
    "product_image"  : "images/lenovok3.jpg",
    "product_price"  : 33000
 },
{
    "product_id"  : 4,
    "product_name"  : "Samsung J3 Plus",
    "product_description"  : " The Samsung  J3 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
    "product_image"  : "images/j3.jpg",
    "product_price"  : 13000
 },
{
    "product_id"  : 5,
    "product_name"  : "Moto Z Plus",
    "product_description"  : " The Moto z Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
    "product_image"  : "images/MotoZ.jpg",
    "product_price"  : 17000
 },
{
    "product_id"  : 6,
    "product_name"  : "Moto E3 Plus",
    "product_description"  : " The Moto E3 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
    "product_image"  : "images/j7.jpg",
    "product_price"  : 12000
 },
{
    "product_id"  : 7,
    "product_name"  : "Samsung Galaxy Note",
    "product_description"  : " The Samsung Galaxy Note is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
    "product_image"  : "images/note.jpg",
    "product_price"  : 50000
 }
]}



Output:













Thursday, 5 January 2017

Fixed LAyout

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>AngularJS Routing example</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style>
body {
 padding-top: 10px;
 background-color: #F5F5F5;
}

    </style>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->


      <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
      </noscript>


  </head>

  <body ng-app="sampleApp">

    <div class="container-fluid outerdiv">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><span class="span-style"> Formula 1 Players</span></a>
          </div>
        </div>
      </nav>
    </div>


<br>
<br><br>



<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>

<script src="app.js"></script>

  </body>
</html>

Wednesday, 4 January 2017

Important Resources for Java and Web Developers


This page contains links to tools and resources which are useful to Java and web developers.

Tutorial Websites

www.mastertheboss.com - JBoss tutorials and trainingA website teaching you how to use JBoss application server.

Learning Websites

www.coursera.orgFree university courses from top universities all over the world.
www.edx.orgFree university courses from top universities all over the world.
www.udacity.comFree university level courses.
www.udemy.comFree and paid online video courses.
www.pluralsight.comOnline video courses on programming - paid subscription.
www.lynda.comOnline video courses on programming - paid subscription.

Developer Communities

https://skillsmatter.com/A community where software developers learn and share.

Conferences

Interesting developer conferences. Some of the conferences release the videos from their conference online, and some of them are free.
ConferenceLocationDateVideos
Google IOSan Francisco, USAJune 25-262013 Videos
Scala Days2013 Videos
Fluent ConfSan Francisco, USA2014 Videos
ØredevMalmö, Sweden
Norway Developer Conference (NDC)Oslo, NorwayNDC Videos
Build - Microsoft Developer ConferenceSan Francisco, USA

IDEs and Editors

IDEDescription
IntelliJ IDEAIDE for Java, Scala, XML, HTML, CSS, JavaScript etc.
EclipseIDE for Java, XML, and many other languages.
Notepad++Free editor for Java, XML, and many other languages.

Programming Languages

The official websites for popular programming languages.
http://scala-lang.orgThe Scala programming language website
https://www.ruby-lang.orgThe Ruby programming language website

Web Tools

http://www.jpegmini.comFree, online JPG optimizer.
https://tinypng.comFree, online PNG optimizer.
http://jscompress.comFree, online JavaScript minifier
http://cssminifier.comFree, online CSS minifier
http://www.google.com/fonts/Google's free web fonts, hosted in the cloud. More than 600 fonts.
http://www.typekit.comAdobe's web fonts.

Software Entrepreneurship


ResourceDescription
http://www.binpress.com/Make money from your open source projects.

Real Time Movie Finder App using OMDb API

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="MovieController">
  <head>
    <title ng-bind="'Sagan - ' + details.Title"></title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
  </head>

  <body>
    <div class="container-fluid outerdiv">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><span class="span-style">Movie Browser</span></a>
          </div>
        </div>
      </nav>

      <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
      </noscript>


        <div class="input-group search-bar">
          <input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter full movie name" autofocus />
          <span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
        </div>

        <div id="main-info" ng-include="'main-info.html'" class="col-md-8"></div>

        <div id="related-results" ng-include="'related-results.html'" class="col-md-4 animated bounce related-results"></div>
      </div>


  </body>

</html>



app.js


'use strict';

angular.module('myApp', [])
  .controller('MovieController', function($scope, $http){
    $scope.$watch('search', function() {
      fetch();
    });

    $scope.search = "Sherlock Holmes";

    function fetch(){
      $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
      .then(function(response){ $scope.details = response.data; });

      $http.get("http://www.omdbapi.com/?s=" + $scope.search)
      .then(function(response){ $scope.related = response.data; });
    }

    $scope.update = function(movie){
      $scope.search = movie.Title;
    };

    $scope.select = function(){
      this.setSelectionRange(0, this.value.length);
    }

  });



style.css


body {
  background: url(../images/bg-sky.png);
  background-repeat: repeat !important;
  background-attachment: fixed;
}

ul.rel-results {
  list-style-type:circle;
}

.nojs {
  padding:2px;
  padding-left:6px;
  margin-bottom:5px;
  background:#ff0000;
  color:#ffffff;
  font-size:15px;
  border:1px solid #ff0000;
  border-radius:5px;
}

.outerdiv {
  margin-top:60px;
}

.span-style {
  font-size:17px;
}

.search-bar {
  width:100%;
  max-width:500px;
  margin-bottom: 25px;
}

.bar-style {
  background: #337AB7;
  color: rgb(250,250,250);
}

.related-results {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}

.movie-poster {
  float:left;
  width: 150px;
  margin-right: 10px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.span-outer {
  font-size:20px;
}

.outer-p {
  margin-top: 10px;
}

.inner-p {
  margin:2px;
}

.outer-p-2 {
  margin-top: 5px;
}

.outer-p-3 {
  margin-top: 15px;
}

.divider{
  margin: 0 8px 0 8px;
}

.divider:before {
  content: "|";
}



main-info.html


<div ng-if="!details">
  Loading results...
</div>

<div ng-if="details.Response==='True'">
  <img ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" class="thumbnail animated flip movie-poster">

  <span class="span-outer">
    <a href="http://imdb.com/title/{{ details.imdbID }}" target="_blank">{{ details.Title }}</a>
  </span>, {{ details.Year }}

  <p><strong>Released on:</strong> {{ details.Released }} ({{ details.Runtime }})</p>

  <p>{{ details.Plot }}</p>

  <p class="outer-p">
    <div class="inner-p">
      <span class="label label-primary">Directors :</span> {{ details.Director }}
    </div>
    <div class="inner-p">
      <span class="label label-primary">Actors :</span> {{ details.Actors }}
    </div>
    <div class="inner-p">
      <span class="label label-primary">Genre :</span> {{ details.Genre }}
    </div>
  </p>

  <p class="outer-p-2">Ratings:<br>
    <strong>IMDb Rating</strong>: <span class="label label-success">{{ details.imdbRating }}</span><br>
    <strong>Rotten Tomatoes</strong>: <span class="label label-success">{{ details.tomatoRating }}</span>
  </p>

  <p class="outer-p-3">
    <a ng-href="https://www.youtube.com/results?search_query={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Watch Trailers!</a>
    <span class="divider"></span>
    <a ng-href="http://subscene.com/subtitles/title?q={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Get Subtitles!</a>
    <span class="divider"></span>
    <a ng-href="http://www.theost.com/search/custom/?key={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Hear Soundtracks!</a>
    <span class="divider"></span>
    <a ng-href="http://www.amazon.in/s/ref=nb_sb_noss_1?url=search-alias%3Ddvd&field-keywords={{ details.Title }}" target="_blank" class="btn btn-default btn-xs btn-info">Buy this movie!</a>
  </p>
</div>

<div ng-if="details.Response==='False'">
  No results found.
</div>


related-results.html


<div ng-if="related.Response!=='False'">
  Related Results:<hr>

  <ul class="rel-results">
    <li ng-repeat="movie in related.Search">
      <a href="#" id="{{ $index + 1 }}" ng-click="update(movie)">{{ movie.Title }}</a>, {{ movie.Year }}
    </li>
  </ul>
</div>



Output: