Tech Junkie Blog - Real World Tutorials, Happy Coding!: August 2019

Sunday, August 25, 2019

The COUNT() function returns the number of rows in the specified table. There are two ways you can use COUNT(), which are the following:

  1. COUNT(*) count all the rows in the table including
  2. COUNT(column) return all the rows that contains value for the column, excluding the columns with null value

SELECT COUNT(*) AS NumberOfRows
FROM Customers

Saturday, August 24, 2019

The AVG() function gets the average of a column, the following query gets the average of the UnitPrice column in the Northwind Products table.

SELECT AVG(UnitPrice) AS AveragePrice
FROM Products

Friday, August 23, 2019

In the previous blog we created the NorthwindCafe database with Entity Framework Core.  Now we are going to seed the database so that we can work with the data.

Here are the steps to seed the NorthwindCafe database:

1.  Create a file call DBInitializer in the NorthwindCafe.Web  "Models" folder, in the file type in the following code


using System.Linq;

namespace NorthwindCafe.Web.Models
{
    public class DbInitializer
    {
        public static void Initialize(NorthwindContext context)
        {
            context.Database.EnsureCreated();

            if(context.Categories.Any())
            {
                return;
            }

            var categories = new Category[]
            {
               new Category {Name = "Coffee", Description="Coffee", Products = new Product[] { new Product { Name = "Dark Roast", Description = "Dark Roast", Price = 2.0M } } },
               new Category {Name = "Tea", Description="Tea", Products = new Product[] { new Product { Name = "Chai", Description = "Chai", Price = 1.5M } } },
               new Category {Name = "Pastry", Description="Pastry", Products = new Product[] { new Product { Name = "Cupcake", Description = "Cupcake", Price = 1.25M } } },
               new Category {Name = "Food", Description = "Food", Products = new Product[] { new Product  { Name = "Hamburger", Description = "Hamburger", Price = 5.0M } } }
            };

            foreach (var c in categories)
            {
                context.Categories.Add(c);

            }

            context.SaveChanges();
        }
    }
}


Thursday, August 22, 2019

In this post will are going to finally create the database that we have been preparing for in the last previous blog posts.  It's a two step process, first you have to add the NorthwindContext to the application in the Startup class, then you have to run the Entity Framework migration tool.

Here are the steps to create your NorthwindCafe database:

1.  Open the Startup.cs file, then type the following lines in the ConfigureServices method
 
            var connectionString = Configuration["Data:NorthwindContextConnection"];

            services.AddDbContext<NorthwindContext>(options => options.UseSqlServer(connectionString));

The line above gets the connection string from the appSettings.json file that we've created earlier. Then use the AddDbContext method in the services instance.  Dependency injection will take care of the plumbing for you.  Using lamba expression we tell the Entity Framework to use the Sql Sever provider for Entity Framework core.

Make sure you have the following namespaces in your Startup class

using NorthwindCafe.Web.Models;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.EntityFrameworkCore;


Wednesday, August 21, 2019

In our previous post we created the models for our Northwind Cafe application.  In this blog we will create the DbContext class which is the conduit between your entity classes and the database.  Think of it as a bridge that the database and the entity framework has to cross to get to each other.

Follow the steps below to create the NorthwindContext:

1. Create a class in Models folder call NorthwindContext

Tuesday, August 20, 2019

In the previous post we added a configuration file call appSettings.json file to store our connection string to the database that we are going to create through Entity Framework.  Even though Microsoft provides us with the Northwind database, we don't really want to use it because it's outdated.  We are going to modernize the database by rebuilding it from scratch with the code first approach with Entity Framework Core.  If you look at the existing Northwind database you will see that there's a lot of redundant data and tables.  For example there are tables for Customers, Employees, Suppliers and Shippers.  Those are basically roles, and we will take care of those roles later on in the series using the Identity framework.  What we are going to do is start out simple with just the Products, Categories, Orders, OrderDetails table and add on to those tables as we progress in building the application.

Monday, August 19, 2019

With text-transform you can transform your text into Autobots or Deceptacon? Not exactly, but what  you can do is transform your text to uppercase, lowercase, capitalize it. It's pretty self explanatory.

Here are the examples of a text-transform:

p.upper {text-transform:uppercase}
p.lower {text-transform:lowercase}
p.cap {text-transform: capitalize}

Here are the HTML markup:

            <p class="upper">uppercase me</p>
            <p class="lower">LOWERCASE ME</p>
            <p class="cap">captain america me</p>

Here is the output:


Sunday, August 18, 2019

The DATEPART function extracts the date part of a date, for example using the 'yyyy' expression allows you to extract the year from a given date. The query below queries all the employees who were hired in the year 1994 in the Northwind Employees table.

SELECT FirstName + ' ' + LastName  AS Employee, HireDate
FROM Employees
WHERE DATEPART(yyyy,HireDate) = 1994

Saturday, August 17, 2019

The MAX() function gets the highest value in the specified column, and the MIN() function gets the lowest value in the specified column

SELECT MAX(UnitPrice) AS HighestPrice, MIN(UnitPrice) AS LowestPrice
FROM Products

The query above gets the highest and lowest prices for the Products table in the Northwind database


 


Friday, August 16, 2019

Have you always wished to have more control with your text position, but feel like you limited with the text alignment of

Align Left text-align: left;
Align Center text-align: center;
Align Right text-align: right;
Justify text-align: justify;

Well you could always do that with CSS with the text-indent property, the only caveat is that it has to be a block based element.  Meaning it automatically puts a line break after the tag.  If you need a refresher on block vs line element, I have an excellent post on this topic here.  I know a shameless plug, oh and please click on my ads so that I can retire on a tropical island!...lol

Anyways back to the tutorial.  So with the text indent you have total control over the indentation you need on your block element.  It could either be a length value or a percentage value.

Well first let's define a div that we want our text to be in, then the text-indent will be based on that div.

Let's say we have the following styles:

div { width: 800px}

p.tdp {text-indent: 15%}

And the following markup

<div>
    <p class="tdp">Indent this text please Indent this text please Indent this text please Indent this text please</p>
   <p>This is just normal text This is just normal text This is just normal text This is just normal text This is just normal text</p>
</div>

The output would look something like this:










The cool thing about text-indent is that you can indent in reverse, like this

text-indent: -15%;

And the output will be the opposite, as you can see the indentation is going in reverse.  But you have to be careful when the value is negative. If you notice the text goes off the screen because -15% is off the screen.  So make sure have enough space.  Also you can use the em, px, rem measurement unit on the property as well.









Here is the entire HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { width: 800px}
            p.tdp {text-indent: -15%}
        </style>
    </head>
    <body>
        <div>
            <p class="tdp">Indent this text please Indent this text please Indent this text please Indent this text please</p>
            <p>This is just normal text This is just normal text This is just normal text This is just normal text This is just normal text</p>
        </div>
    </body>
</html>

Thursday, August 15, 2019

There are often times when you see the measurement in CSS that looks something like this font-size: 2em; what does that actually mean? Well an em simply means its the multiplier of the font-size of the element. For instance 2em means that it will multiply the font-size of the element by 2x.

Let's say we have a div with a font-size of 15px, and there's a span tag with a font-size of 2em.  The span font-size of the span would be 30px, because the span is part of the div element.

Let's say have the following styles:

div {
  font-size: 15px;
}

span {
  font-size: 2em;
}

And with the following HTML markup:

<div>The font-size of the div element. <span>The span font-size</span>.</div>


The output is the following:









As you can see the span font-size is twice as big as the font-size of the div element.  Most people mistakenly think that em means the multiplier of the element size, but it is actually the size of the font of the element.

Here is the entire HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {

                font-size: 15px;
            }

            span {
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div>The font-size of the div element. <span>The span font-size</span>.</div>
    </body>
</html>

Wednesday, August 14, 2019

I believe the last iPhone I owned was an iPhone 3?  I don't remember, but it was a while back.  It was actually a very good phone.  I love Apple products, but the price just seems to increase on each iterations and the features were less and less with each upgrades.  I found myself with a life or death situation.  Should I go to the dark side (Darth Vader breathing) an "Andriod Phone".  Oh my god, stop it I said to myself...lol  But at the time the Android phones were getting good.  So I decided to take the plunge and never looked back.

Anyways back to the present day, I have Apple envy because it has this great ecosystem, that I can't tapped into because I don't have an iPhone.  That is until I got the new iPad, which is the cheaper version of the iPad, but it's not really cheap at all it's the best iPad out there for the price.  I got it so that I can watch movies and read magazines while I was commuting.  What I found surprising was that once again I am tapped into the Apple ecosystem with my iPad.  I can sign up to all the new services that Apple is touting.  I am currently subscribed to News+ because I am a news junkie.  But if you think about it most of the new Apple services are ideal for consumption on a bigger screen.

Since I have unlimited plan on my Android phone, I used it as a hotspot for my iPad.  Put my iPad in a stylish mini bag, and I am good to go.  My iPad became a substitute for an iPhone, for less than 1K that's not bad. I know what you are thinking an Android phone and an iPad working together?  That's like the rebellion working with the empire.  But that's the closest thing to world piece right now and we should take it :)



If you want to contribute to my retirement fund you can buy it here on Amazon, it's actually a really good tablet for the price.  I mean the screen is amazing.  I got the older model and I am still using everyday. iOS is awesome, that's the one thing I like about the empire's product (I mean Apple's product).



There are certain keywords in CSS that works on a global scale and inherit is one of them.
The keyword inherit simply means that current element inherit the properties of it's parent element.
It is applied automatically be default, but it could be useful when you want to be specific about what you want.

For example if you define the following style for the parent element

#parentElem {color: red; font-weight: bold}

And have the following markup, the style will automatically be applied to the child element

        <div id="parentElem">
            <p>Child element</p>
        </div>








That's all great an all if its what you wanted, but what if you want some control over the child element.  What if you wanted to inherit the font-weight but not the color.  Well you can set the color property to initial, and the font-weight to inherit and reset the property its initial value.  That means the color will not be inherited, and the font-weight will be inherited from the parent.

.childElem {color:initial; font-weight:inherit}

If you have the following HTML markup you will see the following

        <div id="parentElement">
            <p class="childElem">Child element</p>
        </div>









As you can see the color is no longer red for the child element, but it's still bold because its inherited from the parent.

If you want to set the child font color to another color, you can set the property again to set the color.

Like the following:

            .childElem {color:initial; color: blue; font-weight:inherit}

The following will be the output








Here is the entire markup:


<html>
    <head>
        <style>
            #parentElement {color: red; font-weight: bold}
            .childElem {color:initial; color: blue; font-weight:inherit}            
        </style>
    </head>
    <body>
        <div id="parentElement">
            <p class="childElem">Child element</p>
        </div>
    </body>
</html>


Tuesday, August 13, 2019

One descriptor of the font property in CSS is the font-stretch descriptor.  This descriptor widens and narrows a font family that has width-variant faces.

The values for widening and narrowing fonts are the following:

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
The way you define a font-stretch is the following

      p.uc {font-family: Verdana; font-stretch: ultra-condensed;}

Monday, August 12, 2019

By using @font-face declaration you can use custom fonts in your web pages.  The way this works is that you can host the fonts on your server, and then the user agent will download the font for future renders, for example you can specify the following markup to use a custom font that's not widely available.

@font-face{
    font-family: "Verana";
    src: url("Verana-Regular.otf");
}

You can get the free fonts here at Arkandis Digital Foundry to play around with custom fonts.
The url can be a local resource within the local server, or a remote resource on the internet.

Friday, August 9, 2019

A big part of web development is dealing with the DOM (Document Object Model) the DOM is organized in a hierarchical order.  You locate an element in the DOM by traversing through the DOM tree.  For instance if you have an ordered list there's a natural hierarchical order to it.

Let's say you have the following markup

        <ul>
            <li>item 1</li>
            <li>
                <ul>
                    <li>sub item 1</li>
                    <li>sub item 2</li>
                    <li>sub item 3</li>
                </ul>
            </li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>

Thursday, August 8, 2019

In addition to class and ids you can also apply styles based on an element's attribute.  For example you can bold a href attribute that has the value "google.com" in it and match it exactly like this

    <style>
        a[href="https://www.google.com"]{font-weight: bold;font-size:200%;}
    </style>













As an  HTML creator you don't even need to worry about the markup, the selector automatically applies the styles once it finds the value.  So the markup would be like this

<a href="https://www.google.com">google.com</a>

Wednesday, August 7, 2019

The most commonly used selectors in CSS are the class and ID selectors. A class in CSS is defined with a . in front of it.  For example you can have class call .rainbow and an ID for a div call rainbow those are two different things.

To apply a style to a class you define the class in the stylesheet as

.rainbow { color: pink; font-weight: bold; font-size:24px;}

Then you would use the class as such in the HTML markup

<p class="rainbow">What color am I?</p>









But if you want to apply style to an id that's used in HTML markup you have to do the opposite.
To reference an id in HTML you have to prefix your CSS style with the # character so in the CSS style you would have the following declaration

Tuesday, August 6, 2019

If you use media queries in CSS you can target a specific media with a stylesheet.  It is defined by the media attribute in the link tag.

The possible media values are the following:


  • all - all presentation media
  • print - used for display print and print preview
  • screen - all screens that uses the browser user agents
Here are a few examples:

<link type="text/css" href="print_media.css" media="print">
<link type="text/css" href="style.css" media="all">
<link type="text/css" href="screen_media.css" media="screen">

Or you can have multiple media types like this

<link type="text/css" href="screen_media.css" media="screen,print">

Monday, August 5, 2019

Now that we have most of our static contents taken care of for our application, meaning we did everything we could without a database.  It's time to create our database.  But before we can do that we need a place to store our connection string to the database.  Usually we just store the connection string in the web.config file in our web application.  However, since ASP.NET Core is trying to break free from the old way of doing things, there's a new way to store configuration information which is more flexible the old web.config way.  As usual it also requires more work.

Friday, August 2, 2019

Thursday, August 1, 2019

Search This Blog