Tech Junkie Blog - Real World Tutorials, Happy Coding!: July 2018

Tuesday, July 31, 2018

Linux CentOS In-Depth: Create Azure CentOS Virtual Machine in New Portal

In our previous blog post we installed CentOS on our local virtualization software call VirtualBox. In this blog we are going to go through how we are going to do the same in Azure, and host our CentOS server on the cloud.

People often get confused when they work with Azure because there are two versions of Azure. Most people call it the classic mode and the new portal Azure or the more official term is ASM vs ARM. In this post we will create a CentOS Linux virtual machine in the new Azure portal.

Follow the steps below create a new Azure portal:

1. Go to the URL : https://portal.azure.com
2. Log in with your Azure credentials
3. Click on "Virtual Machines" make sure it doesn't say classic on the link

Monday, July 30, 2018

JavaScript Functions: Storing Functions As Values

JavaScript is a flexible language, and that flexibility extends to functions. A JavaScript function are not just codes that you reuse and execute. There are also values, values that you assign to a variable. In the following example we are going to write a function that will calculate the radius of a circle. But instead of invoking radius function like a normal function call, we are going to assign to a function to a variable first.

The following is the formula for a radius according to Google

Here is the code to calculate the radius of a circle in JavaScript

    <script>

        var r = radius;

        function radius(circumference) {
            return circumference / (2 * Math.PI);
        }

        console.log(r(10));

    </script>

The code above returns a value of the radius by dividing the circumference by 2*Math.PI and outputting the result to the console log. Notice once we assign the function to the radius to variable r, we can use the variable r in place of the function radius.

Here is the result:

Previous: JavaScript Functions: Use Properties As Arguments

Sunday, July 29, 2018

Bootstrap 4: Grid System Cheat Sheet

One of the main concept of working with Bootstrap is the Grid system. It could be intimidating at first to work with the Grid system. But the system is quite elegant and simple solution.

The most important thing you have to remember about the grid system is that it divides the page into 12 columns, and it is responsive meaning it will adjust to the size of the client's screen.

You can control the size of the column with the .col-sm, .col-md, .col-lg, .col-xl, which translates to small, medium, large, and extra large screens. In addition to the screen size you can also control the with of the column with the -n at the end of class attribute. For example if you want a column for a small screen to span three columns it would be .col-sm-3.

Here is the cheat sheet, I am going to use color coding for the different sizes.

Small - Green
Medium - Orange
Large - Red
Extra Large - Blue

Oh, before I forget the grid system needs to be wrapped around by a .row CSS class.

1. First let's create our small columns, with this code

<body>
    <br/>
    <blockquote>
        <div class="container-fluid">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-1 font-weight-bold bg-success border border-dark">col-sm-1</div>
                    <div class="col-sm-2 font-weight-bold bg-success border border-dark">col-sm-2</div>
                    <div class="col-sm-3 font-weight-bold bg-success border border-dark">col-sm-3</div>
                    <div class="col-sm-4 font-weight-bold bg-success border border-dark">col-sm-4</div>
                    <div class="col-sm-5 font-weight-bold bg-success border border-dark">col-sm-5</div>
                    <div class="col-sm-6 font-weight-bold bg-success border border-dark">col-sm-6</div>
                    <div class="col-sm-7 font-weight-bold bg-success border border-dark">col-sm-7</div>
                    <div class="col-sm-8 font-weight-bold bg-success border border-dark">col-sm-8</div>
                    <div class="col-sm-9 font-weight-bold bg-success border border-dark">col-sm-9</div>
                    <div class="col-sm-10 font-weight-bold bg-success border border-dark">col-sm-10</div>
                    <div class="col-sm-11 font-weight-bold bg-success border border-dark">col-sm-11</div>
                    <div class="col-sm-12 font-weight-bold bg-success border border-dark">col-sm-12</div>
                </div>

The resulting visual looks like this in the browser. As you can see col 1 to 4 can fit into one line. As the columns increase in size it takes up more space. 5+6 = 11 so it can fit in one line. However, anything after 6 will only fit into one line if it's in the same row. It's gets simple if you just add everything to 12 so 7+4+1 = 12, or 7+3+2 = 12 would be okay.

Tuesday, July 24, 2018

Linux CentOS In-Depth: Connect To CentOS Using Putty SSH

In most environments you are not allowed to have direct access to the Linux server. The most common way to gain access is through a secure shell connection or SSH. The most common tool that is used on a Windows environment to connect to Linux is a utility software call Putty. In this post we are going to connect to our CentOS instance that we've installed on VirtualBox.

First let's setup our CentOS on VirtualBox for client connection.

1. Click on "Settings"

Monday, July 23, 2018

JavaScript Functions: Use Properties As Arguments

To make your functions developer friendly it is sometime useful to define your a arguments as properties. This way your code is self documented, instead of having the developers read documentation on the code you can just use the arguments to document the code so that it would reduce the confusion from the developer.

    <script>

        var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var copiedNumbers = [];

        function copyNumbers(args) {
            copyAll(args.orignal,
                args.copy,
                args.size);

            function copyAll(original, copy, size) {
                for (var i = 0; i < size; i++) {
                    copy[i] = original[i];
                }
            }
        }

        copyNumbers({ orignal: numbers, copy: copiedNumbers, size: numbers.length });

        console.log("original " + numbers);
        console.log("copies " + copiedNumbers);

    </script>

The code above encapsulates the copyAll function inside the copyNumbers function, which performs a for loop to copy an array of numbers. Since the arguments object is an object, it can have properties. So we pass in properties instead of parameters to make the code more readable. However, the code is not as efficient as a direct call to the function. Just like anything in programming there's a trade-off. It's up to you, whether you are willing to make that trade-off.

Sunday, July 22, 2018

SQL Server : Assign The "sa", System Administrator Account A Password In SQL Server 2014

In older versions of SQL Server, the "sa", System Administrator account is given a blank password by default. In SQL Server 2014, that is no longer the case.

To set the "sa" account's password, perform the following steps:

Connect to SQL Server instance using by clicking on "Connect" then select "Database Engine"

Previous: SQL Server : Add a Data Connection To A SQL Server Database In Visual Studio 2013

Next: SQL Server: The DELETE statement conflicted with the REFERENCE constraint

Saturday, July 21, 2018

ASP.NET SqlDataSource Part 3: INSERT New Record To GridView

In this tutorial we will add the INSERT functionality to our GridView control.

Follow the steps below to enable insert on our GridView control.

1. Open the source view in the .aspx page and add the ShowInsertButton attribute to the <asp:CommandField element inside the <asp:GridView element

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:CommandField ShowInsertButton="True" />
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
                <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
                <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
                <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
                <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
                <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
                <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
            </Columns>
        </asp:GridView>

2. Click on the ">" icon on the SqlDataSource control to configure the datasource, then click on the "Configure Data Source" link

3. Click next twice until you see the "Configure the Select Statement" screen, click on the "Advanced.." button. Then check the "Generate INSERT, UPDATE, and DELETE statements" and the "Use optimistic concurrency" checkboxes. Then click "OK"

Previous: ASP.NET SqlDataSource Part 2: Display Less Columns

Next: ASP.NET SqlDataSource Part 4: Enable Pagination, Sorting, Selection

Monday, July 16, 2018

JavaScript Functions : Argument Lists Object

In JavaScript when you define a function you get a built-in Arguments object, this object is an array-like object that puts the arguments/parameters of the your function in an object which can be accessed via indexes much like an array.

This can be useful if you have a function that takes multiple parameters, but you don't know how parameters there will be. Let's modify our addNumbers function so that it can add more than two numbers using the Arguments object.

    <script>
        function addNumbers() {
            var sum = 0;

            for (var i = 0; i < arguments.length; i++)
                sum += arguments[i];

            return sum;
        }

        console.log("The sum of the numbers are " + addNumbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
    </script>

If you remember our previous addNumbers function it only takes two numbers and and add them.

With no parameters specified we can specify as many parameters as we want and add the numbers based on the number of parameters to get the total. The draw back with this approach is that we don't have any named parameters, which means that we can only to the parameters via the arguments object like this argument[i]. However, we don't have to know the exact number of parameters ahead of time for our function. So there is a trade-off.

Previous: JavaScript Functions

Next: JavaScript Functions: Storing Functions As Values

Tuesday, July 10, 2018

Linux CentOS In-Depth: Installing the Gnome Desktop Environment

In previous blog we've installed the CentOS operating system on VirtualBox however, when we reboot, it takes us to a text prompt. In this blog we will be installing a graphical desktop environment to our operating system using "yum". Follow the steps below to get the Gnome desktop in your CentOS.

1. Make sure you have internet connection
2. Click "Start" on your "CentOS" VM

Monday, July 9, 2018

JavaScript Functions

A JavaScript function is a piece of code that is defined once and can be reused through your program. A function can have arguments or parameters that you can pass into it and returns a value. If an explicit return value is not specified the return value is "undefined". During invocation of the function, the function returns the value of "this" keyword, which represents the context of the function.

As you can see a function is a lot like a method. If a function is defined as a property of an object it is in fact called a method of the object. It is import to keep in mind that functions in JavaScript are objects and they have the benefits of any objects, meaning they can be self contained, which provide them with a vast amount of flexibility.

The following code is a simple function that adds two numbers together

            
<script>
        function addNumbers(x, y) {
            return x + y;
        }

        console.log("The sum of 1 + 3 is " + addNumbers(1, 3));
</script>

The code above creates a function called addNumbers with two parameters and returns the sum of the two numbers

Previous: JavaScript Array Methods: Array.isArray() Method

Next: JavaScript Functions : Argument Lists Object

Tuesday, July 3, 2018

Linux CentOS In-Depth: Installing CentOS On VirtualBox

If you are a startup or an entrepreneur, learning Linux is essential. Most of the open source and latest innovations starts out with Linux such as Docker. That's because Linux is for the most part free and has a great community of techies supporting it. Even Microsoft loves Linux now, it even made a commitment by releasing SQL Server on Linux. Although it could be a fling, instead of a long term engagement. Also if you noticed the Virtual Machines on the clouds are cheaper if you choose the Linux version. In this series on Linux I will go over what you need to do to get yourself started on Linux. The best way to learn about Linux is to install it on a Virtual Machine. We could host it on the cloud, but then we need to pay for it. There are some free-tiers but they are limited. So we are going to use VirtualBox from Oracle to host our CentOS instance.

On the previous blog we went over how to create a new virtual machine for CentOS in VirtualBox. In this blog we will go over how to install the CentOS ISO file on the new virtual machine that we've just created. Below are the step by step instructions of how to install CentOS on VirtualBox.

Step-By-Step Instructions:

1. Launch VirtualBox, right-click then select "Settings"

2. Click on "Storage", you will see the disc icon is "Empty"

Monday, July 2, 2018

JavaScript Array Methods: Array.isArray() Method

The Array.isArray() method is a useful method to determine object is of type array. Let's demonstrate with some code.

    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 69.50, 76.99];
        var iamObject = new Object();

        console.log(Array.isArray(oilPrices));
        console.log(Array.isArray(iamObject));
    </script>

The code above tests to see if the oilPrices array is of type array which it is, and then it tests to see iamObject is an array. The console.log out put should return true, and the second console.log should return false.

Previous: JavaScript Array Methods : lastIndexOf() Method

Next: JavaScript Functions