Tech Junkie Blog: March 2015

Tuesday, March 31, 2015

Resizing images is a common task that you have to do to show your photo image on a website.  Most digital camera or smart phones takes photos that are a lot larger than what most web sites can display in it's original size.  In this blog we will show you how to resize your photo in GIMP.

Step By Step Instructions:

1.  Open the original photo in GIMP

GIMP original photo size

As you can see the photo has the dimension of 2048x1530, not suitable for web display

2. Click Image → Scale Image

GIMP scale image


3.  The "Scale Image" dialog box will be displayed.  The link icon   puts a constrain on the width and the height to be propositional.  Usually it is the best option, however you need to specify an exact width and height value you can click on the link icon to input your own width and height.  For this blog we will leave the width and height linked.

GIMP scale image width and height settings

4.  Type in the new width and height for the image, for this image I am going to type in 600 for the width, the height field will be adjusted automatically to be proportionate with the new width.  Note you have to click on the height field for the height to be adjusted.  This might be a bug.  Click on the "Scale" button, and the image will be resized.

GIMP resized image

As you can see from the top status bar the image now has the dimension of 600x448

5.  Now that we have the resized image we can export our image as a .jpeg file

6.  To export the image click File → Export As, once the "Export Image" dialog is displayed, expand the "Select File_Type (By Extension)

GIMP export image dialog

7.  Select "JPEG image" File Type

GIMP JPEG image File Type

8.   In the "Name" field give your resized photo a name.

GIMP eport file name













9.  Click the "Export" button


10.  Accept the default export settings, and then click "Export" again

GIMP export default settings

And here is the resized photo, suitable for the web.

GIMP resized photo

Monday, March 30, 2015

Most new users to GIMP gets intimidated with the floating windows that is the default view when you first open GIMP.

GIMP default view


As you can see it is pretty intimidating, the majority of users sees this interface and runs back to GIMP's more expensive alternatives. Even though GIMP has most of the features of the more expensive softwares.   Most back end developers I encountered would hear good things about GIMP, download the software.  Get all excited about it, then when they first open it, their reaction is what in the world !@#$$$ (NC-17 censored) is this.  They would go back and use paint as their photo editor.  Which is a shame, because GIMP is quite powerful.

 However, there's a very easy solution to this UI dilemma and make GIMP more user friendly.

Step-By-Step Instructions:
  1.  Click → Windows → Single Window Mode
  2.  GIMP will dock all the floating windows into a single window, looking like all the other conventional programs that you are used to
GIMP Single Window Mode

3.  The next step is optional, if you feel more comfortable with the single window mode, you can save the current positions by clicking on Edit → Preferences

GIMP preferences























4. In the Preferences dialog, select "Window Management", then click on the button "Save Window Postions Now",  make sure the "Save window positions on exit" is checked, then click "OK"

GIMP Save Window Positions Now

5.  Now close GIMP and open it again, you will see that the single window mode is used instead of the default view.

GIMP single window interface

Thursday, March 26, 2015

There are times when you see a class property without it's private member counterpart and all you see is the {set; get;} accessors. What you are looking at are auto properties that you can create  in C#, the only requirements is that the set; and get; accessors contains no logic.  Usually there are private members that the properties expose to other classes using the get/set accessors, like the code below:


    public class Product
    {
        private int productId;
        private string name;
        private string description;
        private decimal price;

        public int ProductId
        {
            get
            { return productId; }
            set
            {
                productId = value;
            }
        }

        public string Name
        {
            get
            { return name; }
            set
            {
                name = value;
            }
        }

        public string Description
        {
            get
            { return description; }
            set
            {
                description = value;
            }
        }

        public decimal Price
        {
            get
            { return price; }
            set
            {
                price = value;
            }
        }

    }

The above class uses the regular ways you define properties that are exposed to other classes. Even though there are only get/set properties. The auto implemented version of the class requires a lot less typing.
    public class Product
    {

        public int ProductId { get; set; }
        public string Name { get; set;}
        public string Description { get; set; }
        public decimal Price { get; set; }

    }
The properties do not have be define as a private member of the class. This pattern is called the field-backed property pattern. This means that the C# compiler will take care of the private members fields for us when we build our classes. The above example are mutable properties, meaning outside classes can change the values of the properties.

To create immutable properties, all you have to do is add the keyword private to the set; accessors. Immutable properties, means that the properties are only changeable within the class itself. Outside classes can only read the properties.
    public class Product
    {

        public int ProductId { get; private set; }
        public string Name { get; private set;}
        public string Description { private get; set; }
        public decimal Price { get; private set; }

    }

Wednesday, March 25, 2015

In this blog I will go over how to set up jQuery for your web pages.  There are two methods to using jQuery.  The first is the use the CDN URLs that are hosted by jQuery, Google, and Microsoft just to name a few.  In this tutorial we will set the CDN from Google.  The process should be the same for jQuery and Microsoft CDNs.

Here are the URL for Google's jQuery Library:




1.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

2.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

You might be wondering why there are two versions of jQuery 1.x and 2.x, they both use the same APIs and they pretty much mirror each other on a release basis.  The only difference is that the 2.x versions does not support IE 6,7, or 8.  Just to be on the safe side I always use the 1.x versions.

So here are the steps to using jQuery in your web page:

1.  First create an HTML5 page markup

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>
Now add the following script tag to the head element
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

To test if jQuery is working write a simple alert message using the $ sign, which is short hand the jQuery object.
<script>     
     $(document).ready(alert("jquery is   
      working"));
</script>

You should see an alert message that says "jquery is working" when you load the page.

jquery javascript test alert message









Here is the complete markup code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
</html>

Tuesday, March 24, 2015

Since Ubuntu does not configure the root account by default you have to manually assign root a password before you can use the root account.  However, there's a way to log in as "root" without setting up the "root" password.  The way to do this is to use the "sudo" and "su" command in combination.  The "sudo" elevates your privileges to root like priviledges, while the "su" command is used to switch from one user to another.  So when used together you get to log in as "root".

So in your Linux prompt type in the following command

sudo su

sudo su to log in as root





enter the password when asked, after you've entered your password you can run commands as "root"

sudo su logged in as root





Blogs in this series:
  1. Creating a New Virtual Machine for Ubuntu Server
  2. Mounting the Ubuntu Server ISO on VirtualBox
  3. Install Ubuntu Operating System on VirtualBox
  4. Install A Desktop GUI on Ubuntu Server 
  5.  Switching To root User With The sudo Command On Ubuntu Server
  6. Installing Apache Web Server On Ubuntu Server

Monday, March 23, 2015

In the previous blog we went over how to create a simple ASP.NET MVC 4 application.  In this blog we will go over the steps to upgrade our ASP.NET MVC 4 application to ASP.NET MVC 5 application.

Step-By-Step Instructions:

  1. Open the "MyMVC4" project that you've created on the last blog
  2. Right click on the project and select "Manage NuGet Packages..."
Manage NuGet Packages















In this blog we will go over how to upgrade your existing project which uses ASP.NET MVC 4 to ASP.NET MVC 5 using NuGet.  During the upgrade you will encounter some errors but they are easy enough to fix by changing the Web.Config file.  In the first blog we will create a simple ASP.NET MVC 4 application from scratch.

But first thing is first let's begin by creating a project in ASP.NET MVC 4:

  1. Create a blank solution in Visual Studio call "MVCProjects"
Visual Studio 2013 Create New Blank Solution

2.  Now add a new project to the "MVCProjects" by selecting ASP.NET MVC4, call it "MyMVC4".
Make sure you select Visual C# → Web → Visual Studio 2012 → ASP.NET MVC 4 Web Application, then click "OK"

 ASP.NET MVC 4 Web Application
























3. Select the "Empty" template, and "Razor" as the "View Engine", then click "OK"

Razor View Engine

4. Right click on the "Controller" and select "Add" → "Controller"

Razor View Engine

5.  On the "Add Controller" screen type "HomeController" on the "Controller name" text box and select "Empty MVC controller".  We just want to keep things simple for this blog.  Then click "Add"

Empty MVC Controller



















6.  You see the "HomeController.cs" class being added to the "Controllers" folder

Home Controller

7.  Double click on the "HomeController.cs" file and you will see the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyMVC4.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

8.  Right click on the "Index()" method and select "Add View"

MVC Add View







9.   Uncheck the "Use a layout or master page" checkbox. Accept the default settings, MVC uses conventions so the view has the same name as the method name in the "HomeController.cs" file which is "Index()", then click "Add"


Index View Configuration
























10.  In the "Views" folder you see that the "Home" folder has been created with the view "Index.cshtml", the .cshtml extension means that the view uses the C# syntax.

11.  Double click on the view "Index.cshtml" and type "Hello World" between the <div> tag like the markup below

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Hello World!
    </div>
</body>
</html>

12. Press Ctrl+F5 to run the application, you will see the following.

MVC Browse Index View













In this blog we went over how to create a simple ASP.NET MVC 4 application. In the next part we will go through the steps on how to upgrade your ASP.NET MVC 4 application to ASP.NET MVC 5 using NuGet

Apache (HTTPD) is the most popular web server on the web right now.  It is from the Apache Software Foundation.  A web server serves content to the web.  The power of Apache lies in it's modules which allows you to process scripting languages such as Perl, and PHP.

In this blog we will go over how to install the Apache Http Web Server on the Ubuntu Server:

1.  In the terminal type in the following command

apt-cache search apache  | more

search for the latest apache web server version



the "search" command searches for the latest apache web server version, we added the "more" command so that we can press enter to scroll

Apache HTTP Server is called apache2














as you can see the "Apache HTTP Server" is called "apache2"

2.  Press "q" to get out of "more" listing

3.  Type in the following command to install the apache2 package

sudo apt-get install apache2

type sudo apt-get install apache2 to install apache http server



4.  When asked if you want to continue select "Y"















5. The installation will go on automatically

Answer Yes when asked during the apache2 install


















6.  Once you get your prompt back type in the following command to open the localhost page in firefox

firefox http://localhost

type firefox http://localhost to browse to the apache home page








7.  You should see the Ubuntu Apache2 Ubuntu Default Page as your localhost home page, and that's all there is too it.  In future blogs I will go over how to use and configure the Apache web server.

You should see the Apache 2 Ubuntu Default Page if the installation is successful



















Blogs in this series:
  1. Creating a New Virtual Machine for Ubuntu Server
  2. Mounting the Ubuntu Server ISO on VirtualBox
  3. Install Ubuntu Operating System on VirtualBox
  4. Install A Desktop GUI on Ubuntu Server 
  5.  Switching To root User With The sudo Command On Ubuntu Server
  6. Installing Apache Web Server On Ubuntu Server

Sunday, March 22, 2015

There times when you have to store data as XML in a SQL Server database table.  In this blog we will go over how to store XML as data in SQL Server.  There's an xml data type in SQL Server that we can use to store XML data.

Example: Create a database table that contains a column to store XML data using the xml data type
CREATE TABLE Books
(
  Id INT NOT NULL IDENTITY(1,1) PRIMARY KEY,
  Book XML NOT NULL
);

If you look at the "Book" column for the table "Books" you will see that it has a data type of XML

XML Data Type In SQL Server

Now that we have our table set up, we can insert XML data to into the table

INSERT INTO Books(Book)
VALUES(
 CAST ( '<book>
  <author>Bill King</author>
  <title>ACME Consulting: An Inside Look</title>
  <publisher>ACME Publishing</publisher>
  <language>Swahili</language>
 </book>' AS XML));

In the example above we CAST the type to XML first before we insert the data into the Books column because we want to make sure that the data we are inserting into the column is a well-formed XML data. If you query the table now you will see that there's one record with XML data in the "Book" column

XML Data Type Results In SQL Server

Saturday, March 21, 2015


  WHILE SomeConditionTrue
    BEGIN
      -- Execute code here
    END

Friday, March 20, 2015



IF SomeCondition
  BEGIN
    -- Execute some code here
  END
ELSE
  BEGIN
   -- Execute some code here
  END
Else is optional

Thursday, March 19, 2015

Once you've graduated from the basic variables in JavaScript the next variable you want to learn is the JavaScript array.  An array is a group of variables in a list or collection.  However, you want to word it.  As with everything else a JavaScript array is mutable, meaning you can change it dynamically while you are working on it.

Declaring an Array
var alphabet = new Array();

alphabet [0] = 'A';
alphabet [1] = 'B';
alphabet [2] = 'C';

Declaring an Array In Literal Format
 
var alphabet = ['A','B','C']

Accessing Array Value
 
document.writeln("First Index: " + alphabet[0]);

Output:
First Index: A

Looping through an Array
 
for(var i = 0; i < alphabet.length;i++)
{
 document.writeln("index: " + i + " value: " + alphabet[i]);
}

Output:
index: 0 value: A index: 1 value: B index: 2 value: C

Wednesday, March 18, 2015

JavaScript objects acts differently than objects in the object-oriented programming world. A JavaScript object is mutable meaning it can be changed and is dynamic.

Here is how you would create a JavaScript object:

   var Employee = new Object();
    
   Employee.ID = 1;
   Employee.FirstName = "Jeff";
   Employee.LastName = "Jordan";
You create a new object the new Object() constructor
Or you can create a JavaScript object in a literal format
   var Employee = {
      ID: 1,
      FirstName: "Jeff",
      LastName: "Jordan"
};
You can also include a function as a method in your object like the example below
   var Employee = {
      ID: 1,
      FirstName: "Jeff",
      LastName: "Jordan",

      displayEmployee: function() {
          document.writeln("Employee ID: " + this.ID);
          document.writeln("First Name: " + this.FirstName);
          document.writeln("Last Name: " + this.LastName);
};

The mutabiity of a JavaScript object

Unlike traditional programming languages such as C# or Java, when you work with a JavaScript object you can add a property or method to an object dynamically. For instance let's say you've already declared the Employee object and you wanted to add the property "Title" to object. How would you do this? Well in a C# or Java you would have to go back to the class definition and add the property in the class definition file. But in JavaScript you can add the property dynamically in your code as you need it. Like the example below.
   var Employee = {
      ID: 1,
      FirstName: "Jeff",
      LastName: "Jordan",

      displayEmployee: function() {
          document.writeln("Employee ID: " + this.ID);
          document.writeln("First Name: " + this.FirstName);
          document.writeln("Last Name: " + this.LastName);
};

   Employee.Title = "CEO";

Accessing Object Methods and Functions

You access the object methods and functions with the . notation. Meaning if you want to access the value for the employee's first name you would access it like this Employee.FirstName. Like the example below:

   document.writeln("Employee ID: " + Employee.ID);
   document.writeln("First Name: " + Employee.FirstName);
   document.writeln("Last Name: " + Employee.LastName);

Setting Object Properties And Methods

You can set object properties and methods in two ways. Either with the object name followed by a . and then the property/method name, or the object name with the property/method name enclosed within a [ ]
Employee.FirstName = "Jackie";
Employee["LastName"] = "Johnson";

Deleting Object Methods Or Functions

Let's say your object is getting too big and you want to eliminate some of the properties and methods that you are not using. Here is how you can do it.
delete Employee.displayEmployee;
delete Employee["Title"];

Tuesday, March 17, 2015

T-SQL variables allows you to store and assign values in your T-SQL code.  Variables is a storage unit in programming which allows you to refer back to it at a later time.

T-SQL variables have the following characteristics:
  • Local variables must be prefixed @
  • Global variables must be prefixed with @@
  • Must be declared with the DECLARE statement
  • Must specify the data type when declared
Declaring variables
    DECLARE @employeeID INT;
    DECLARE @firstName CHAR(10), @lastName CHAR(20);

As you can see from the above example you can declare a single variable or declare multiple variables with a comma separated list.

Setting variables

  SET @employeeID = 1;
  SET @firstName='Davolio';
  SET @lastName='Nancy';

The above example uses the SET statement assign values to the variables one at a time.

To assign values to multiple variables with one statement you can use the SELECT statement.
SELECT @employeeID=1,@firstName='Dovolio',@lastName='Nancy';

Convert INT Variable To String
 
  Convert(CHAR,@employeeID);

Monday, March 16, 2015

Start up your Linux machine then do the following:

  1. Press Ctrl + Alt + F2 to start a virtual console
  2. Login in with your credentials








3.  After logging in type "grep my-username-goes-here /etc/passwd", then you will see which shell environment you are using


Sunday, March 15, 2015

log4net is the most commonly used ASP.NET logging package.  It is robust and flexible in it's features.  You can choose to log your errors on the database or in a log file or multiple log files.  However, it is not as straight forward to set up.  In this blog we will go through the steps to install log4net using NuGet Package Manager.

1.  Create an empty web project, and call it whatever you like, below is the settings that I have, then click "OK"




2. Right click on the solution and select "Manage NuGet Packages for Solution..."


3.  Locate the search box on the left hand side


4. Type "log4net" in the search box, the latest log4net version will show up in the search results in the main window.  Click on the "Install" button.



5.  Select the project that you want log4net to be installed, then click "OK"


6.  After the installation under "References" log4net will be added

7.  

Saturday, March 14, 2015

If you've installed an operating system in VirtualBox before you've probably noticed the screen is really small even when you switch to Fullscreen mode.  It's so small that you can't even see the fonts for the icons if you have a desktop GUI installed.  To fix this problem VirtualBox provides us with the Guest Additions tool.  Which enables the virtual machine to be viewed at fullscreen.

To enable full screen on a Linux operating system.  Perform the following actions, this should work on all Linux distribution that VirtualBox supports.

1.  Start the virtual machine that you want to make full screen


2.  Log into your GUI desktop


3.  Click on "Devices" and then select "Insert Guest Additions CD Image"


Note: If you get the message "Unable to insert the virtual optical disk C:", Most likely you've already mounted the "Guest Additons" ISO on your virtual machine, so you should be good to go.




4. Start a terminal session, by searching the word "terminal" on the search box (GNOME).  Then click on the "Terminal" icon


5.  In your terminal session type "mount", you will see that VBOXADDITIONSxxxx has been mounted in your virtual machine with the path /media/....


6.  Switch to the VBOXADDITIONSxxxx folder, by typing in "cd /media/techjunkie/VBOXADDITIONS_4.3.22_98236/", the folder "techjunkie" is my user's home directory so your folder name will be different, and the numbers at the end of the VBOXADDITIONS...  is the version number so your number might be different.


7.  type "ls", you will see the file "VBoxLinuxAdditions.run"


8.  Type "sudo ./VBoxLinuxAdditions.run" in the terminal window




You will be asked for the sudo password, so enter the password and then press "Enter"




9.  The installation will take place automatically


10. Restart your virtual machine with the command "sudo reboot now" or restart the virtual machine itself in VirtualBox,  I prefer the second method, just to make sure.