How To Use Entity Framework With MySql Database ?

Step 1 : Download and Install

First, you will need to download and install the following

Step 2 : Create A Database To Connect To

Make sure you create a database and a table with few columns for testing the connectivity using EF. In my example I have a ‘UserProfile’ table which has fields like userId, email, firstName, lastName etc.

Step 3 : Add Reference To Your Project

Add MySql.Data.dll and MySql.Data.Entity.dll to your project. enter image description here

Step 4 : Add ADO.NET Data Entity Model

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Step 5 : Time To Test

public User CreateUser(User model)
{
    using (var context = new TestMySqlDbEntities())
    {
        // add user
        var createdUser = context.Users.Add(model);
        context.SaveChanges();
    }

    return model;
}

Show time spent in years, days, minutes and seconds using Moment.js

For the homepage of this blog, I wanted to show a timer which shows the number of years/days/minutes & seconds spent since I started working. This blog post is tutorial on how to do that.

Firstly you will need to download and include moment.js. Here is a fiddle you can play around which and below is the code for your refrence.

HTML

<div>Time spent making websites</div>
<div id="timer">
</div>

JQUERY

$(document).ready(function () {
    // this function is only used so that I can use the .format() function in this example.
    if (!String.prototype.format) {
        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/{(\d+)}/g, function (match, number) {
                return typeof args[number] != 'undefined' ? args[number] : match;
            });
        };
    }

    refreshTimer();
    window.setInterval(function () {
        refreshTimer();
    }, 1000);

});

function refreshTimer() {
    var now = moment();
    var start = moment([2010, 12, 22]);
    var years = now.diff(start, 'years');
    var days = now.diff(start, 'days');
    var hours = now.diff(start, 'hours');
    var minutes = now.diff(start, 'minutes');
    var seconds = now.diff(start, 'seconds');
    $("#timer").html("<span id='years'>{0} years</span><span id='days'>{1} days</span><span id='hours'>{2} hours</span><span id='minutes'>{3} minutes</span><span id='seconds'>{4} seconds</span>".format(years, days, hours, minutes, seconds));
}

CSS

#timer span {margin-right:10px;}

Bootstrap Modal With AngularJs – The angular way

To use bootstrap with angular, one can make use of this library http://angular-ui.github.io/bootstrap/ from the angular ui team. Initally I had a little problem implementing this as there were many angular modal plugins available out there, but after using and testing each of them I have found this one to be pretty simple and straight forward to write.

Before you begin you will need to include this js file in your scripts

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

and of course bootstrap.css

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Next in your html you will need to define a script block like this

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Modal Header</h3>
    </div>
    <div class="modal-body">
         Hello world!
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

Next you will need to add this piece of code after you define your controller

var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

add a button in your html to trigger the modal to open, also add a click event to a function open() where we will open the bootstrap modal using the above controller.

<button class="btn btn-default" ng-click="open()">Open me!</button>

Reference : https://github.com/angular-ui/bootstrap/tree/master/src/modal