Forem: Kasey Wahl

LINQ Queries | Dev [Over]simplified

Kasey Wahl — Wed, 23 Jun 2021 17:22:13 +0000

So you're eating at the dinner table when this alien come's up to you like:

And you're like, "Sure."

So you decide you're going to code up a blog in C# because you need a place to store all of your ideas.

So you code up classes in the shape of Posts, Blogs, and Comments--everything you need for a basic blog.

You find some cute HTML blog template, slap it into your Solution, and you're ready to publish.

And then it occurs to you:

You don't have anywhere to store your data--the strings and ints and DateTimes that, for now, you're storing in that big ol' head of yours.

You're alien friend's like, "Hey, I've got an idea. Why don't you store all that in a database?"

You're like, "That's pretty chill."

So you download a bunch of NuGet packages, wire your database to your solution, set your first data migration, and you're set!

Or so you thought.

You've actually just encountered another roadblock.

Even though you're wired to a database that stores all of the data tables you need, you don't speak SQL, the language that databases understand.

Your application consists of two star-crossed lovers who's love letters are lost at sea.

If only there was something...someone who could take a request in C# and translate it into usable SQL code that the database could understand!

The dark hour is upon you. You've lost sleep. It shows in the sagging, fleshy bags under your eyes.

It seems all hope is lost. You're about to raise the white flag of defeat.

That is...

Until LINQ, our hero arrives:

LINQ, or Language Integrated Query, takes your C# request and translates it into something that your SQL-speaking database knows what to do with.

Wanna store some blog data? Use LINQ to tell that dataBaby where to put it and .SaveChangesAsync().

Wanna spin up a Post to display in your application? Tell LINQ to hit the Post table. Don't forget to .Include() all of the comments.

In short, LINQ is our hero that allows us C# devs to query a database (among other things) and make that data sing, baby:

Want to learn more about LINQ?

I hope you enjoyed this entry in my Dev [Over]Simplified series, dear Coder. If you want a more technical explanation on LINQ, check out the resources below.

Introduction to LINQ Queries
LINQ Tutorial

10 Perspectives I Changed During the Pandemic (and how they led me to tech)

Kasey Wahl — Thu, 17 Jun 2021 15:16:18 +0000

Dear Coder,

Today's letter is a little different.

Most of you don't know me or my background. I'm going to write about me a little, because it's unavoidable when I explain what drove me to tech.

I didn't go to school for Computer Science. I come from a background in English Composition and Education. In the "before-times," I wrote the International English curriculum for a boarding school in Beijing, China.

The short version of the story: I was on holiday outside of China visiting family and friends when the pandemic hit. My return flight to Beijing got cancelled. I've been living out of a suitcase and a backpack for the last ~17 months.

It's been hard. Like, really hard.

My career evaporated before my eyes. I've (vainly) tried to get back to my belongings and life in China.

But at a point, I had to make peace with loss, take inventory of my surroundings, and decide what I was going to do.

I looked around me and found a backpack full of books, a suitcase full of winter clothes, a small bag of toiletries...

...and my laptop computer.

I asked myself: "What can I do with this?"

Here are ten answers to that question, more or less, given that situation (and how they led me to tech).

1. I never store belongings in closets, on clothes hangers, or in drawers anymore - my bags are always packed

I'm learning what "home" means in a visceral way, and I'm still evaluating what the term means.

I miss it: taking the elevator to the third floor of my Beijing apartment and fussing with the sticky lock under the dim, flickering hallway light in front of my door.

I miss it because once I was inside, I was home. I was safe. I could change into comfy clothes and sprawl out on the couch. I miss the days of leaving evening dishes until the morning, because they were my dishes in my space. I miss turning the lock on my door and only opening it if I wanted.

Since January 2020, I've had to pack up my suitcase 10 different times to go somewhere else. Being constantly on the move is mentally and emotionally taxing, but when I reflect on what I've gained and what I've lost, I see the virtue of frugality.

2. I only buy things in travel sizes and varieties

A foldable toothbrush, a set of sortable clothing bags, a first-aid kit, miniature toiletries tucked neatly into a red zippered canvas: these are the items that fit into my suitcase. They're all I can fit; they're all I can afford; they're all I need.

3. I give away my paperback books when I finish reading them

There's a collection of books on my desk in my office in Beijing. Most of them are academic, littered with sticky notes and marked with highlighters. They cover pedagogy, approaching English from a non-native learner's perspective, and addressing one's own biases as a native speaker.

There's a collection of novels on the bookshelf in my bedroom too -- great books: Toole's A Confederacy of Dunces, Vonnegut's Slaughterhouse Five, Twain's A Connecticut Yankee in King Arthur's Court.

It's a shame they're collecting dust.

I still love to read.

But when I buy a book these days, I give it away when I'm finished because great ideas are meant to be shared, and even if I wanted, I couldn't bring the damn book with me anyway.

If it's really good, I'll buy a digital copy later.

4. I don't like receiving gifts anymore

The week before I left Beijing, a Chinese colleague gave me a fantastic Christmas gift. It's a graphic novel, written in Mandarin, in both Traditional and Simplified characters, about Buddhist thought. It's titled "放下是舍更是得", which means "Letting Go is Gaining More." I brought it with me to read on the plane out of Beijing, not knowing I was letting go of everything I was leaving behind.

Gift-giving is an integral part of Chinese culture, and I've learned a lot about what giving meaningful gifts means.

If that book is the last gift I ever receive, my heart is full.

I still read it with a kind of desperation, in part because I'm still learning the language in which it's written, and partly because, through pandemic times, I'm drawn to it's lessons like lightning to a rod.

The more I learn, the more I code, the more I give, and the more I let go of things I can't control, the more content I am.

Letting Go is Gaining More

5. I talk less, listen more, and take notes on everything

One of my greatest fears when I started teaching was when my students would expose a gap in my knowledge or understanding of my own field. I used to feel like I needed to answer every question if I was worth anything as a teacher or as a writer. I'd get so desperate to have an answer, I'd start prattling off an ill-formed explanation before the entire question had even left my student's mouth.

The result was always hopeless frustration.

The more I taught, the more I was able to accept that I don't always need to have the answer to questions immediately. Sometimes it's better to fully listen to the question.

I mean, carefully, intently listen to the question: it's structure, it's wording, the rationale behind the question.

And sometimes its okay to admit you don't know the answer, write a note, and come back with a well-researched answer later.

Over time, "unanswerable questions" became my favorite part of teaching. People are so much more interesting when they come to you from a place of curiosity than when they pretend to know everything, and when I listened to a student's question, I'd learn so much about them.

When I could return a thoughtful answer later, we all learned.

Everyone had questions when Covid-19 broke out.

I shouldn't have been shocked that so many people leaped at the opportunity to insert quick, ill-formed answers, because I've been that person and I know why they feel like they need to do that.

I've since taken to coding, and I don't pretend to have the answers, but I always have a notebook and pen nearby.

6. I've been learning how to learn, therefore I'm more content in the moment

When I was in college, I used to think "learning" meant reading complicated texts and asking unreasonably big questions about those texts.

When I started learning Mandarin and teaching English, I realized learning is more like repeated blunt-force trauma to the head.

More than anything, it's about repetition and consistency. It's about starting small, building up, and returning to the small principles for review.

Sometimes you'll easily master a word or phrase or grammar rule. Sometimes they just won't stick.

But if you're willing to keep making mistakes and learning from them, no matter what you're studying, it will make sense eventually.

In my post-pandemic life, I've found that learning to code flexes those same "brain muscles". I don't get frustrated as easily because I pick appropriate goals that I can replicate, and I make sure I code every day for as long as the day allows.

7. I'm more patient

"We're not accepting applicants from outside of China at this time."

I can't tell you the number of times a great job interview has concluded with those words in the past ten months.

I don't know how I would have survived had I not given myself the permission to be patient with the process of rejection since the world closed down.

But that patience was permission-giving as well. I had permission to learn new things: more Mandarin, art, and now web development. It's an enduring kind of patience that I bring into the workplace, because I trust that I'll learn what I need to learn in the time I need to learn it.

8. I read people better--their desires and sources of joy and pain

In the first few months of the pandemic, I was stranded on an island off the coast of Thailand (a long story for another time).

I met an old Austrian man there named Werner.

When ferry services got suspended, a group of Brits, an Italian, and myself were discussing what the suspension might mean for travelers and transportation of goods. The conversation was a bit unnerving, so I tried to calm things down by suggesting things would be fine.

Werner interrupted me.

"I was three years old when the Nazis raided my family's factory and stripped it beam-from-beam to make weapons," he cried. "Things are fine now, but what will people do when there's not enough?"

I shut up and listened.

He told me his story about fleeing Austria for South Africa after the Nazi incident, where he later became a businessman with a reputation for driving around in his flower-painted Volkswagon Beetle.

"They called me the last hippie in Pretoria," he said.

Thanks for the title of my first novel, Werner.

"I don't understand the world now," he continued. "You have your smart phones and smart watches and social media. You put up all these pictures, and I think you have such beautiful lives until I meet you. I don't understand why young people lie to each other on the internet. This world wasn't built for me."

When he finished talking, I gave him a hug and went back to my room to take notes.

The Last Hippie in Pretoria

9. I tell people I love them more often

Three months ago, I was walking down Phillips Avenue--one of the main streets in my hometown--on a Saturday evening. A homeless man bundled in scarves stumbled towards me.

I did something impulsive. Going against everything my parents ever taught me about strangers, I hugged him tightly for a few seconds and said, "I love you, man."

He didn't say anything--just nodded for a moment.

He was drunk.

But so was I.

He was homeless.

And so was I.

I make a point to find reasons to love people these days.

10. I want to make things for people: permanent things in virtual spaces

During the Spring semester of 2020, I taught 14 kids in Beijing from my computer over a spotty wi-fi connection at a youth hostel in Thailand.

Though I'd written their curriculum in conjunction with TOEFL preparation materials and high school graded novels, all of our learning materials were locked inside our school in Beijing while they were locked down at home and I was stuck in Thailand.

I still taught three hours of class everyday. I spent nearly every waking hour of time outside of class preparing materials for the next day's lessons--reading materials, quizzes, review texts, instructional videos, animated shorts. I did all of it.

I remember constantly thinking if only I had more time to prepare.

A funny thing happens in a time of desperation.

You rise to the occasion.

I won't pretend like I optimized every day.

But I was present, and I showed up with materials for my students to learn.

And I learned too:

I learned how to use rudimentary animation software to help explain complex rhetorical ideas.

I learned how to integrate ClassDojo into our routine to manage my classroom, accept homework from students, present learning materials to them, and all while largely circumventing the Great Firewall of China.

I remember signing off our Zoom meeting on the last day of class and weeping into my hands.

Though I look back on the experience now through a healthy lens of what I learned, I still remember feeling like nothing we had done during the semester was enough. None of it was planned. How could it have been?

When my company gave me the news that China wouldn't be accepting teachers who were outside of the country for the fall semester, I wept again thinking, why did I try so hard?

I've asked myself that question over and over again in the months since.

I keep returning to the same answer: I'm a helper. I want to help people. Even though I don't have much, I have a computer, and I will do anything I can to help people.

My students.

Werner.

The homeless man.

I can help people with tech.

Conclusion

Maybe you read these ten perspectives like a random assortment of items, dear Coder. Or maybe you read them like an algorithm, as though one shift in perspective invariably leads to the next.

Sometimes I feel like I've been changing in a random, chaotic sort of way, because it took a painstaking amount of self-reflection to find the words to examine the changes in myself and print them to the page.

But once they hit paper, I take comfort in reading them algorithmically. I observe and sort how circumstance acts upon me and how my reactions shape my circumstances. I find power and edification in observing my rational behavior, even thought it felt impulsive when it happened in real time.

As coders, I think we take similar comfort in receiving an open-ended set of objectives and organizing them on a blank canvas in a way that others can read.

And I think we take comfort in knowing others will understand and value the things we make.

Maybe that's the theme: comfort in organization, comfort in making things for people, comfort in listening, refactoring, and sharing without expectation of anything in return.

That's the gravity of coding.

And I suppose that's where my meanderings end today, Dearest Coder.

As always, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Scaffold Identity Pages with ASP.NET Core | Dear Coder

Kasey Wahl — Wed, 26 May 2021 13:42:42 +0000

Dear Coder,

Let’s talk about the person who matters the most in our field.

No, it’s not you (though you’re enduringly important to me, dear Coder).

I’m talking about the user.

How Do I Represent the User in Code?

I want the user to have a good user experience, so I build a model that inherits from AspNetCore’s IdentityUser. By doing this, I inherit a set of robust properties without having to write too much new code.

Create User Model and Inherit Properties from IdentityUser

Let’s start with the User model:

In my ToonSpace project, I create a model named “ToonUser” and add some custom properties that IdentityUser doesn’t already cover, including:



FirstName
LastName
DisplayName
FullName
ImageData
ContentType

I also inherit the properties of IdentityUser by using the Microsoft.AspNetCore.Identity namespace and inheriting from Identity user when I name the class:

What properties does IdentityUser grant me access to? A lot.

With these properties appended to my ToonUser, I have the tools I need to allow users to register accounts and interact with my application.

Modify Startup.cs and ApplicationDbContext

In my data folder, I access my ApplicationDbContext file and inherit IdentityDbContext of type ToonUser.

Then I add the ToonUser to my Identity service, along with Default UI and DefaultTokenProviders.

Scaffold Identity Pages

Now I’m ready to scaffold Identity pages for user accounts. I add a Scaffolded Item in my Areas > Identity folder and select “Identity.”

I override all files and select ApplicationDbContext as my data context class. Once I add the scaffolded Identity pages, my Identity folder will be filled with boilerplate razor pages.

I access the code behind for the “register” view and add properties for First Name and Last Name because those properties are not the default with Identity pages. I also add fields to the View for the user to enter this information.

Now that I have registration pages scaffolded and augmented to fit my ToonUser model, users can register an account on my application.

I hope these letters find you well, dearest Coder.

Until next time, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Role-Based Security using Entity Framework (Part 1) | Dear Coder

Kasey Wahl — Tue, 25 May 2021 12:45:09 +0000

Dear Coder,

If you're working on an application that allows users to register an account, you've likely encountered the issue of role-based security.

What is role-based security and why do we need it?

Say you're working on an application that allows users to share webcomics with each other. You've already built in the features that allow the user to securely upload photos to your database, and you've implemented features that allow users to register an account and log in.

But now you need to ask what features should be accessible to any user regardless of if they've registered an account, what features should be accessible to registered users, and what features should be available to privileged users.

This is where role-based security comes in.

For the sake of my illustration, let's categorize users into four tiers of access:

anonymous (unregistered) users
registered users
Moderators
Administrators

Anonymous User Authorizations

By default, my application allows any user to see, interact with, and use any of the pages on my application.

But what pages should anonymous users be able to see?

As a general rule, landing pages and displays of publicly-available data are fine for anonymous end-users to see.

Some developers may maintain applications that contain a large amount of sensitive data, however, which means it might be appropriate to refactor the application's default authorization.

We can do this with some interplay between the [Authorize] and [AllowAnonymous] attributes.

But more on anonymous users later.

Registered Users

Let's back up and talk about the [Authorize] attribute.

If I want my application to handle uploads, it's in my best interest to deny anonymous users access to some of my views. I can do this with a simple keyword called "Authorize"

To prompt a user to register and log in to see a View, I need to access the controller that handles the get and post http requests for the Views I want to authorize.

To illustrate, let's look in my ToonSpace webtoons application, and access the Uploads controller.

I don't want anonymous users to be able to upload to my website, so I need to make a small change under the "get" action by adding [Authorize] above the action.

This simply ensures that only users who have registered an account and are logged in can access the "Create" view to upload something new to the database.

Moderators and Administrators

I've grouped moderators and administrators together because the code for my Moderator and Administrator permissions is essentially the same. The only differences are discretionary. I grant some permissions to both roles and others to just the Administrator.

So how do I grant special permissions to these roles?

Just a few simple lines of text:

To authorize a moderator as well, I simply add a comma:

[Authorize(Roles = "Administrator, Moderator"]

I've created the structure for role-based security. Any user may create an account and log in, and anonymous users are not allowed to post anything. But what if I want to set the default to allow anonymous users to post something (like a comment)? I can simply use the [AllowAnonymous] attribute.

And what about these Administrator and Moderator roles? How do I differentiate between which users are in these roles? Should anyone be allowed to sign up as an Administrator or Moderator?

I'm sure you already know, dear Coder, that allowing the user to sign up as an Admin is probably not a great idea. What I can do instead, however, is "seed" a designated user as an Administrator or Moderator.

But that will be the topic of my next letter.
If you'd like to read more letters, you can find them at dear-coder.com.

Until next time, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Securely Handle User Uploads With Service Injection (MVC) | Dear Coder

Kasey Wahl — Mon, 17 May 2021 12:57:36 +0000

Dear Coder,

In my last letter, I wrote about four rules to keep in mind while handling uploads from users in a web application. Today I want to give some step-by-step instructions on how to handle uploads while satisfying those rules.

You might recall that I'm building an application called ToonSpace for users to share their webtoons with each other. Today, I'll build the service that will accomplish that goal.

Create Image Service Interface

I create a new folder on the top level of my Solution Explorer named Services and add a new public Interface IImageService.

This Interface will hold a task that Encodes the image from a user upload, a task that encodes an image from a url, a string that decodes the image, and a string that records the content type of the image.

I name my service IImageService and add these four fields, making sure to declare the Interface is public.

I also add my AspNetCore.Http using directive:

using Microsoft.AspCore.Http;

Create Basic Image Service Concrete Class

Once the interface is finished, I create a corresponding concrete class called BasicImageService that holds executing code for the interface.

Inside my Services folder, I create a class called BasicImageService.

I add three using directives:

using Microsoft.AspNetCore.Http;
using System.IO;
using System.Net.Http;

Let's look at what each of these methods actually allow me to do in the concrete class:

        public async Task<byte[]> EncodeImageAsync(IFormFile image)
        {
            if (image == null)
            {
                return null;
            }
            using var ms = new MemoryStream();
            await image.CopyToAsync(ms);
            return ms.ToArray();

        }

EncodeImageAsync encodes a user-submitted image from an upload control and converts the file to a byte array to be stored in my database. Later, I'll leverage the multi-part form-data feature to allow users to submit an image file within a form, which is why EncodeImageAsync takes the IFormFile interface type.

        public async Task<byte[]> EncodeImageURLAsync(string imageURL)
        {
            var client = new HttpClient();

            var response = await client.GetAsync(imageURL);

            Stream stream = await response.Content.ReadAsStreamAsync();

            var ms = new MemoryStream();
            await stream.CopyToAsync(ms);

            return ms.ToArray();

        }

EncodeImageURLAsync takes the path to an image and turns it into a byte array to be used in a similar fashion to EncodeImageAsync, storing an image in the database as a byte array.

        public string DecodeImage(byte[] image, string contentType)
        {
            if (image == null)
            {
                return null;
            }
            var convertedImage = Convert.ToBase64String(image);
            return $"data:{contentType};base64,{convertedImage}";
        }

The first two methods dealt with encoding an image to store in my database. DecodeImage allows me to convert the stored data into a base64 string and pull it from the database to display as an image.

        public string RecordContentType(IFormFile image)
        {
            if (image == null)
            {
                return null;
            }
            return image.ContentType;
        }

Finally, I need to record the ContentType (png, jpeg, etc.) so I can properly formulate the string to display the image.

The finished Concrete Class looks like this:

Register Basic Image Service

Now that I've built my interface and corresponding concrete class for my Basic Image Service, I have to register it as a service in my Startup so I can inject it across the project.

I simply access my Startup file in my Solution Explorer and scroll to the _ConfigureServices method:

I add my Basic Image Service to my list of services by adding using ToonSpace.Services to the top of the document and adding my service to the list of services like with the IImageService interface and BasicImageService concrete class:

services.AddScoped<IImageService, BasicImageService>();

Now my service is ready to be used throughout the project.

Inject Service into Controller

I've registered an image service that will allow users to securely upload their webtoons to my application, so now comes the fun part! I inject my service into the controller by adding a using directive, constructor, and parameters:

Add the Image Upload to the Form

I need to jump over to the View where the user is going to upload so I can instruct the controller what to do when the user uploads.

I access the Create scaffolded View in my Uploads Views folder to access the form that has already been built for me.

The first thing I need to do is change the encode type to enctype="multipart/form-data" which is an HTML spec that allows the form to now accept uploads instead of just fields.

Then, scroll to the Image div and add an Image Id, a type of "file", and a "form-control-file" class (for styling).

            <div class="form-group">
                <label asp-for="Image" class="control-label"></label>
                <input id="Image" type="file" asp-for="Image" class="form-control-file" />
                <span asp-validation-for="Image" class="text-danger"></span>
            </div>

Code Instructions in Create Action of Controller

I open my UploadsController to the Create Action and remove Image and ContentType from the Bind. I add add IFormFile Image as an argument in the Create Method, which Microsoft.AspNetCore.Http allows me to do. I add Microsoft.AspNetCore.Http to my using directives.

The Bind now looks like this:

public async Task<IActionResult> Create([Bind("Id,GenreId,Title,Artist,Created,Image,ContentType")] Upload upload, IFormFile Image)

I then set the upload image and content type equal to the data coming in from the image service if the model state is valid.

                upload.ContentType = _imageService.ContentType(Image);
                upload.Image = await _imageService.EncodeImageAsync(Image);

The user's upload will now save to the database after I've written these lines of code in the Create Action.

Display The User's Image in the View

The only thing I have left to do is spin up the user's image from the database and display it in the View. To do this, I access my Views folder and find the "Details" view under "Uploads."

I write some quick markup for illustration purposes:

@model ToonSpace.Models.Upload
@using ToonSpace.Services
@inject IImageService _imageService

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Upload</h4>
    <hr />

    <div class="card">
        <div class="col-8">
            <img id="Profile" class="img-fluid" src="@_imageService.DecodeImage(Model.Image, Model.ContentType)" />
        </div>
    </div>

Now, all the user needs to do is upload an image to the database and they will be able to see the image displayed in the Details View.

There's much more to be done to make this platform functional and secure, but today's letter is already longer than usual, and so I'll leave you to rest.

Godspeed in your keystrokes.

Clickity Clacks,

Kasey

Four Rules for Accepting Secure User Uploads to a PostgresSQL Database (MVC) | Dear Coder

Kasey Wahl — Mon, 10 May 2021 13:01:14 +0000

Dear Coder,

In my last letter, I wrote about how I used enums to populate a dropdown list of genres from which a user can select to categorize their webtoons in the ToonSpace database.

But what about the webtoons?

I haven't allowed the user to upload their own files to the database yet, and that's for good reason: I'm scared.

You should be too.

Okay, maybe I'm being a little dramatic. But only a little.

Whenever you're allowing users to upload to your database, security should be your highest concern. For our purposes, that means two things: safeguard your database from insecure uploads and prompt the user to register an account before they are able to upload anything to the database.

We'll discuss registration at a later date, but that's the subject of a different letter.

For now, let's dig into the four requirements for accepting secure image uploads from the user.

The Rules

Rule Number One: Do Not Accept the filename the User Gives You

You must change the name during the upload process. This prevents the user from wittingly or unwittingly using common problematic symbols in directories and filenames like spaces and slashes from causing problems.

I must change the name during the upload process.

Rule Number Two: Do Not Accept the Pathing that the User Gives You

A user might try to upload and wittingly or unwittingly upload a file to a folder that I don't want them to access. This could cause all kinds of problems if I need to retrieve the file path.

Rule Number Three: Investigate the Content of the User's Upload

Just because a user uploads a file with a "png" extension doesn't necessarily mean the file is actually a png image. I need to safeguard my database from accepting unwanted file types.

Rule Number Four: Turn Off Execution Rights in the Upload Folder

This one is the most critical because I don't want my user to be able to execute any impermissible operations that could damage or otherwise maliciously attack my database or application. The user should not be able to execute anything when they upload.

The Solution

I've considered three ways I can allow the user to upload their images to the database, each with their own security concerns. I'll outline them to you and tell you which I eventually settled on.

Method One: Allow the User to Upload Directly to the Server

I could create an image folder in the wwwroot directory and programatically direct the user to upload to it, but this method doesn't scale well, and requires a lot of extra code to satisfy my four rules for secure uploads.

Method Two: Use a Third-Party Cloud Service to Handle the Upload

This is the most recent method for handling a secure upload, and it comes with plenty of advantages (namely ease, speed, and peace of mind), but third-party hosting with Azure or Amazon can also cost more money than a developer is willing to pay for a small project.

Method Three: Upload the Image and Store them as Byte Arrays

This method is the simplest and most ideal because I don't need to use the name or path a user gives me, and the file cannot execute. I'm just breaking down the image into a stream of bytes and decoding it again to display it.

However, I still have to investigate the content of the file to verify that it's actually an image file.

I can accomplish all of these goals by creating an interface and basic image service to handle user uploads.

But again, dearest Coder, coding and implementing my image service will be the subject of my next letter.

Until next time, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Create a Relational Database using ASP.NET Core (MVC) Pt. 3 | Dear Coder

Kasey Wahl — Tue, 04 May 2021 12:57:21 +0000

Dear Coder,

I have a problem.

If you read my last letter, you might recall I used Entity Framework to save a lot of time scaffolding my Controllers and Views for the Genres and Uploads Models for my ToonSpace application.

But I signed my last letter with a minor bug:

My GenreId dropdown (which should just display "Genre", but I'll get to that later) displays blank. This isn't a big deal though, as it's simply a result of Entity Framework trying to anticipate the purpose of that field. But it isn't functional.

I want to provide the user with a pre-populated list of options for the Genre of their uploaded webtoons, and I achieve this with enums.

Using Enums to Create a Dropdown

I first create a new folder on the top level of my project in the Solutions Explorer called "enums" and add a new class to it called GenreName.

The enum type is essentially a comma-separated list of strings, zero-indexed, and alphanumerical. I use the indexed property of my enum to function as the GenreId for each Upload object.

I declare it as a public enum instead of a class and create five options for a user to choose from.

Next I add GenreName as a property of my upload Model, making sure to a using directive for GenreName in my using directives above.

Display Enum Data in Dropdown

I make some small changes to my Create and Edit Views in the Uploads View folder, changing all instances of GenreId to GenreNames and amending the asp-items property to connect it to my enum.

            <div class="form-group">
                <label asp-for="GenreName" class="control-label"></label>
                <select asp-for="GenreName" class ="form-control" asp-items="Html.GetEnumSelectList<GenreName>()"></select>
            </div>

I make sure to add a using directive to bring in my Enums folder as well.

Before building the solution, I migrate my changes to the database and update it.

Finally, I build the solution and check that my new dropdown menu works.

A brief Note on Data Annotations

If you're like me, dear Coder, you might find the Pascal case of GenreName and SciFi in the dropdown to be off-putting from the end user's perspective.

We can fix these cosmetic issues by leveraging Data Annotations.

Though enums are alphanumerical, I can still use a hyphen within a data annotation to display the enum's value in the View. I simply add this using directive:

using System.ComponentModel.DataAnnotations;

and this display text above the index of my desired value:

[Display(Name = "Sci-Fi")]
SciFi,

The result is something like this on the page:

I simply use the same using directive and display syntax in my Upload model to clean up the Genre Name tag.

Finally, our bugs are fixed and the data displays nicely for the end user.

I hope my letters are finding you well, dearest Coder, and I look forward to your swift replies.

Until then, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Create a Relational Database using ASP.NET Core (MVC) Pt. 2 | Dear Coder

Kasey Wahl — Sun, 02 May 2021 17:52:56 +0000

Dear Coder,

Earlier this week, I wrote to you about a webtoon application I'm building using ASP.NET Core and PostGresSQL.

I told you about my process for setting up the project and connecting it to a Postgres database. Today I want to expound on that thought. Let's talk about building models and scaffolding controllers/Views.

A Little Pre-Planning

As with any application I build using MVC, I need to take inventory of what models I will need to give structure to my data. In server-side terms, what rows and columns do I need to define?

In my last letter, I defined the goals of this project:

Upload my webcomics to a database.
Sort and display them by genre, date, and popularity.
Allow verified users to upload their own content safely and securely to my database with the same capabilities.

With these goals in mind, I have a clear idea of which models I need to build and what properties I need to give them to achieve my goals.

Build the Models

In my Models folder, I create two classes: one for user uploads and one for upload's genre.

public class Upload

public class Genre

Entity Framework Code First naming conventions make it easy for me to create a primary key, so I simply add an "Id" property to both the Genre and Upload class.

I elect to create these two models so I can sort uploads using their primary keys in the database, but I also leverage the the genre's foreign key to identify uploads by genre, as I'll illustrate later.

But before that, let's make some magic.

Scaffold the Controller and Views

Entity Framework comes with some huge time-savers, including scaffolded items. I use scaffolding to populate Controller and View templates by simply locating the Controllers folder in my Solutions Explorer, hovering over the "Add" button, and selecting New Scaffolded Item.

I want to create the Controller and the View for my scaffolded content, so I select MVC Controller with views, using Entity Framework.

Before I finalize my scaffolding, I make sure to select "Genre" as my Model class for Genre and "Upload" as my Model Class for upload. I also make sure each have the Data context class as ApplicationDbContext (ToonSpace.Data) where "ToonSpace" is the name of my project:

Note: The default Controller name is always the Model name, but plural. In the case of the picture above, the Model name is "Genre" but the default Controller name is "GenresController." As a matter of consistency, I always use Entity Framework's default Controller Name.

Once I finish, I have three controllers in my Controllers folder:

I check my Views folder to see I have five Views a Genres folder and five Views in an Uploads folder: Create, Delete, Details, Edit, and Index.

Entity Framework has scaffolded a basic skeleton of Controllers and Views for all of the code and data that I built out in my Models. I open my Package Manager Console and add a migration and update my Postgres database.

Edit Navbar to Navigate to New Views

I edit the navbar by locating the Layout View under Shared.

I add two links to the navbar: one for Genres and one for Uploads. I connect them to their corresponding controller by setting asp-controller equal to "Genres" and "Uploads" respectively.

Build Solution and Check Views

Now I build my solution and check the application by launching IIS Express to make sure my controller is communicating properly between my Models and Views.

I check my Uploads Index page, which displays a table of objects and their properties from my Model.

Clicking "Create New" displays my "Create" View, which allows the user to create a new instance of my Uploads class.

But there's one problem: the field for "GenreId" was pre-constructed with a drop-down option and validation, which means the user cannot complete the creation of an object.

The problem is a simple fix, but one that will serve as the subject of my next letter.

So until next time dearest Coder, godspeed in your keystrokes.

Clickity Clacks,

Kasey

Create a Relational Database using ASP.NET Core (MVC) | Dear Coder

Kasey Wahl — Thu, 29 Apr 2021 13:35:25 +0000

Dear Coder,

I made a thing and I want to share it with you.

A few months ago, I started an Instagram page where I share some comics that I draw. And I thought, "Wouldn't it be fun to make my own database where I can control the flow of content without my hack-job humor getting swallowed by the infinite-Insta-algorithm?"

So I decided to create a project that allows me to:

Upload my web comics to a database.
Sort and display them by genre, date, and popularity.
Allow verified users to upload their own content safely and securely to my database with the same capabilities.

If you're coding along, you need a couple of prerequisites:

Microsoft Studio 2019
PostgresSQL v13
PGAdmin 4 v5.2

Create a new ASP.NET Core MVC App in Visual Studio

Let's start with a brand new project in Visual Studio using the ASP.Net Core MVC Web App template.

Under Additional Information, I select "Individual Accounts" as my Authentication Type. I also want to enable Razor runtime compilation.

Clear Migrations Folder and Download Requisite NuGet Packages

I want to initiate a new migration when I'm ready to set up my database, so I need to delete the Migrations folder in my Solutions Explorer that comes boilerplate with this template.

Once that's done, I right-click the top level of my project to manage NuGet packages. This is where I bring in all the sweet sauce that allows me to build my database.

I make sure I've downloaded these dependencies before writing any code.

I open the Startup.cs file at the bottom of my Solution Explorer to add a Using statement to bring in my Npgsql. Then I delete the boilerplate options.Use text and insert options.UseNpgsql.

First Data Migration

Now that I've brought in my NpgSQL, I can initialize my Identity migration to create the data structure that will feed into the database.

I open the Package Manager Console by clicking Tools > NuGet Package Manager > Package Manager Console. Then I initialize the first migration with the following code:

Create Postgres Database

I'm almost ready to create my database, but first I need to change my connection string to wire Visual Studio to my postgres server.

I delete the default ConnenctionStrings and enter this string of code in my appsettings.json file near the bottom of my Solutions Explorer with the name of my project as the database and my database password as the password.

"ConnectionStrings": { "DefaultConnection": "Server=localhost; Port=5432; Database=[PROJECT-NAME]; User Id=postgres; Password=********" },

Finally, I open my Package Manager Console again, this time execute the command, update-database.

NOTE: I encountered an error message after the build succeeded. This was rectified after I opened pgAdmin, logged in to my server, and refreshed the server.

Check the Database

As a final check, I enter pgAdmin and check that my ToonSpace server is live and working.

And that's all there is to setting up a simple server using postgresSQL in an MVC template.

In this letter, I've only shared the beginning--I'm a long way off from having a functional web cartoon app, but my fingers are fading, and let's be real: our squirrel brains don't have the attention span for a 40 minute read.

So until next time, dearest Coder, godspeed in your keystrokes.

Clickity Clacks,

Kasey

C# Classes, Objects, and Class Members Explained by Dan Harmon's "Community" | Dear Coder

Kasey Wahl — Tue, 27 Apr 2021 15:25:51 +0000

Dear Coder,

If you're a complete beginner or transitioning into object-oriented programming (OOP) you might have already discovered that classes, objects, and class members are EVERYTHING. If you're anything like me, you might find that dizzying at first.

But don't worry, Coder. We got this with a little help from the folks at Greendale Community College. After all, you know what they say at Greendale: coding is nothing but the abstraction of American pop culture references.

Er, something like that.

What is OOP?

Procedural programming emphasizes writing procedures or methods that perform operations on data. Object-oriented programming is about creating objects that contain data and procedures.

In Pierce Hawthorne terms, OOP is about THINGS doing stuff and procedural is about DOING stuff to things. Nouny code vs. verby code.

Pierce trying to figure out OOP

For us OOP people, that means we need to understand how to create objects out of words so we can describe what they do and how they're supposed to do it. We do that using classes, objects, and class members.

Classes

Classes and objects are the terms we use code a thing into existence. But what do they look like, and how can we use them in our code? Say hello to our ethnically neutral class-cot:

class HumanBeing { }

A class is the broadest definition of a thing. In this case, we'll use it to create a HumanBeing using the "class" keyword.

class HumanBeing
{}

There you have it: a human being.

Sorta.

But we've only declared that HumanBeing exists. What kind of features define ANY HumanBeing?

Class Members

We've declared a class of HumanBeing, so now let's give it a little shape using fields and methods.

class HumanBeing
{
public string Name; // field
public int Age; // field
public string Major; // field
public bool InStudyGroup; //field
public void tellsJoke(); // method
}

The fields in our HumanBeing object are pieces of data that describe what a HumanBeing is. They're the "adjectives" and "nouns" that give it shape.

The tellsJoke() method is a procedural, executable piece of code that allows our HumanBeing to do something. Community is a funny show. The HumanBeings at Greendale all use the tellsJoke() method.

And that's an important thing to note: all of the characters in Community are HumanBeings, but not all HumanBeings are on the show Community.

Duh, right?

Good! You already understand the fundamental difference between classes and objects.

Objects

Every ounce of my Millenial angst adores Pierce Hawthorne, but how do I represent him in code?

The good news is, we're already halfway there. We'll use our HumanBeing template (class) to create a single instance of HumanBeing (object) called "Pierce" with dot notation.

 class HumanBeing
{
public string Name; // field
public int Age; // field
public string Major; // field
public bool InStudyGroup; //field
public void tellsJoke(); // method

static void Main(string[] args)
   {
   HumanBeing Pierce = new HumanBeing();
   Pierce.Name = "Pierce Hawthorne";
   Pierce.Age = 65;
   Pierce.Major = "undeclared";
   Pierce.InStudyGroup = true;
   }
}

Now we've given some life to one instance of our HumanBeing class. He looks something like this. Can you see him?

We can use the same HumanBeing class to make any number of instances of itself. Just for fun, let's build some of the cast of Community:

 class HumanBeing
{
public string Name; // field
public int Age; // field
public string Major; // field
public bool InStudyGroup; //field
public void tellsJoke(); // method

static void Main(string[] args)
   {
   HumanBeing Winger= new HumanBeing();
   Winger.Name = "Jeff Winger";
   Winger.Age = 32;
   Winger.Major = "Education";
   Winger.InStudyGroup = true;

   HumanBeing Britta = new HumanBeing();
   Britta.Name = "Britta Perry";
   Britta.Age = 30;
   Britta.Major = "Psychology";
   Britta.InStudyGroup = true;

   HumanBeing Starburns = new HumanBeing();
   Starburns.Name = "Alex Osbourne";
   Starburns.Age = 39;
   Starburns.Major = "undeclared";
   Starburns.InStudyGroup = false;
  }
}

Not too bad, yeah?

We started by building a class with class members, then created several instances of that class called objects with more specific characteristics:

There you have it in the simplest, Greendale-iest terms.

That's all from me today, dearest Coder. Godspeed in your keystrokes.

Clickity-clacks,

Kasey