Wednesday, May 9, 2018

Persistent Data on website (Cookies, Sessions, and Hidden Fields, Oh My!)

The ability to “save” a user’s data when browsing a website has been a long sought after ability beginning with the efforts of the Roman argentarii of the 3rd century BCE; since then, e-commerce has come a long way. It got a little rocky in the dark ages, but really opened up during the renaissance, and greatly accelerated in the last decades of the 20th century. Today we will learn three different ways to save user data: with hidden fields, cookies, and session data.


Our plan today:

1. Overview/definitions
2. Hidden Fields
3. Cookies
4. Sessions
5. Wrap-up


Overview / Definitions


So first, let’s talk about what these three things are. ‘Hidden fields’ are an object you can use on your page that can hold text data, much like an (invisible) label object, but the data can be stored via accessing a “built-in” data array called ViewState. A ‘Cookie’ is an array of variables you can use in your code behind that are stored (effectively) as a plain .txt file on the users/clients machine. Finally, sessions are a way to store data server side in a structure that is similar to the ViewState object.


Hidden Fields


By far the simplest and most straight forward of the options to implement (imho). All you really need to do is include an object on the webpage via either “asp:HiddenField ID="HiddenField1" runat="server"“ or “input id=”HiddenField1” type="hidden"” if using pure html5. After creating the (input) object itself, you can store whatever data/objects you would like in the object/array. In order to store the data, all you need to do is access the “ViewState” object like you would a dictionary object, or an array with a string/text based index, where said index is made up on-the-fly, like this: “ViewState[“myCustomObjectName”]”. You can assign anything you want to the object, including class objects (as long as they are [Serializable]). For our practice/example code today, we will be using a Person class that defined in its own .cs file in the App_Code folder of an ASP web-page using the master/content schema. It looks like this:

[Serializable]
public class Person
{
   public string FirstName, LastName;
   public Person(string FirstName, string LastName)
   {
      this.FirstName = FirstName;
      this.LastName = LastName;
   }
}

Then, in the content-page, we define the input object like this:

<asp:HiddenField ID="HiddenField1" runat="server">

And finally, in the code behind (or in the server side script section), we have the following code:

protected void Page_Load(object sender, EventArgs e)
{
   if (IsPostBack)
   {
      Label1.Text = HiddenField1.Value;
   }
   else
   {
      Label1.Text = "Page_Load: IsPostBack == false";
   }
}

protected void Button1_Click(object sender, EventArgs e)
{
   if (!string.IsNullOrWhiteSpace(TextBox1.Text) &amp;&amp; !string.IsNullOrWhiteSpace(TextBox2.Text))
   {
      ViewState["objP"] = new Person(TextBox1.Text, TextBox2.Text);
      string viewStateData = ((Person)ViewState["objP"]).FirstName;
      viewStateData += "," + ((Person)ViewState["objP"]).LastName;
      HiddenField1.Value = viewStateData;
   }
}

So, when the page 1st loads, if it’s a PostBack (aka, we’ve been here before), it will put the text data we’ve stored in the HiddenField1 into Label1 (don’t forget to put that somewhere on the page) so we can see what we put in there, in this case, the name of the Person. If this is not a PostBack, we set the label.Text to some debug code so we can see better what is going on.

On the same page we also have 2 textboxes and a button (make sure you stick those in there too if you’re following along). The button, after checking to make sure that the 2 text boxes aren’t empty, will store a new Person object into the “objP” ‘dictionary slot’. What we do then, thanks to the [Serializable] attribute of our Person class, is to save the various members of Person into a comma-separated string; and finally, we store that string into the value attribute of our HiddenField1 input object.

Now, when the form is submitted via PostBack from clicking button1, the ViewState item “objP” gets sent with it, and returned with the new page; that way, in the page_load event we can simply access the HiddenField1 object and set the Label equal to its Value property.


Cookies


Cookies are a simple way to store (non-critical, non-security) user data on a client machine for future retrieval. Often, this takes the form of preferences, and form input fields that haven’t yet been submitted or aren’t stored on the server. To a user, a cookie is a text file that gets stored on the local machine; to a programmer, it is an object that holds an array of strings, or an array of arrays of strings, or an array of arrays of arrays that hold … well, you get the idea. To use them we just create an “HttpCookie” object, and then store strings in it via the following syntax:

HttpCookie thisIsACookieObject = new HttpCookie("myCookieName");
thisIsACookieObject.Expires = DateTime.Now.AddSeconds(10);
thisIsACookieObject["ClickTime"] = DateTime.Now.ToString();
Response.Cookies.Add(thisIsACookieObject);

When accessing the data on subsequent visits, you can call a cookie request and store it in a cookie object. As you can see, we can set the expiration of the cookie relative to the DateTime.Now function, as well as simply setting a static datetime if desired. You could also store sets of info in a complex array such as “thisIsACookieObject[“userData”][“firstName”] = “Bob””. Anyway, back to the cookie we’re trying to request: If that cookie is null, then that cookie doesn’t exist on the client machine and you can create one as normal; if it returns non-null, you can pull the string data from it as follows:

HttpCookie myCookie = Request.Cookies["myCookieName"];
if (myCookie != null)
{
   HttpCookie thisIsACookieObject = Request.Cookies["myCookieName"];
   Label1.Text = thisIsACookieObject["ClickTime"];
}
else
{
   //No Cookie found
}

Because all key value pairs in a cookie are stored as strings, you should always perform validation on the data before you use it to make sure you aren’t accidentally trying to use a name as an int, or a double as Date, etc. You can delete a cookie by using the .Remove command, or by setting the expiration of the cookie to be DateTime.Now.AddDays(-1); - just make sure to do a Response.Cookies.Add(thisIsACookieObject); after setting the expiration date.


Sessions


Sessions are a very user-friendly and easy way to store data. The session is stored on the server, and in most regards functions very similarly to the Hidden-Field method of storing data with the ViewState object. The session is initialized and “saved” as an object with nearly identical syntax, all we would need to do is to revise the code for our button in our hiddenField example as follows:

protected void Button1_Click(object sender, EventArgs e)
{
   if (!string.IsNullOrWhiteSpace(TextBox1.Text) &amp;&amp; !string.IsNullOrWhiteSpace(TextBox2.Text))
   {
      Session["objP"] = new Person(TextBox1.Text, TextBox2.Text);
   }
}

As you can see, we are no longer using the hiddenField in this example. Now, rather than saving all of our data in a string format, we are simply saving the session object to it (technically still as a string behind the scenes, but don’t sweat that). Then, it is accessed much like a server-side cookie, if you will, via casting the strings in the Session object back to the appropriate objects, as shown here:

protected void Page_Load(object sender, EventArgs e)
{
   if (Session["objP"] == null)
   {
      Response.Redirect("HiddenFields.aspx");
   }
   else
   {
      Label1.Text = ((Person)Session["objP"]).LastName + ", " + ((Person)Session["objP"]).FirstName;
   }
}


Wrap-up


So when should we use which method? Well, as a quick and dirty rule of thumb: Page specific data should not be stored in Session, since that can cause issues if multiple tabs/windows are open, so in that case using ViewState is a good alternative. If you only need to access the values in page-specific inputs from the client side, then using Hidden Fields should work fine. Cookies are a good way to store user specific data that relates to the web-site as a whole that you may want to remember for a non-trivial duration. Things related the user as an individual – things like font preference, or color schemes, or a name, or other non-security related info – are good candidates of data to store in a cookie.

Wednesday, May 2, 2018

jQuery or Bust

Welcome back!

jQuery is an open source JavaScript Library that is useful for both confusing English majors who always capitalize the first letter in a sentence, and simplifying a great many tasks that might normally take several additional lines of code were it not employed. It does not, however, do anything new; just about anything you can do with jQuery, you can also accomplish without jQuery. Additionally, there are actually times when using jQuery will slow down your website rather than speeding it up. You can see more about this at “http://youmightnotneedjquery.com”. That being said – jQuery is incredibly popular and useful and we are going to learn how to use a few of its ‘super-powers’.

First, we will start off simple, mainly because I’m not pro at this yet myself, and partly because, well, that’s just usually the best place to start.

One of the first things to note is that you need to have the jQuery library ‘enabled’ on the website you are going to use it on. This is accomplished fairly easily. One way to do it is to install it locally on/in the project that you will be using it with. If you are using VS, you can install jQuery pretty quickly though nuGet. Alternatively, although it is a tad slower, you can have jQuery loaded from an online source, called a “Content Delivery Network”. The way to do this is quite similar to how you would include a css or javascript file in your project, except – there’s no file! Here’s how:

Navigate to the head section of your html file where you have these lines of code.
<script src="scripts/scripts.js"></script>
<link href="styles/style.css" rel="stylesheet" />

Then, just above those add
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


You can test to ensure jQuery is working on your page by opening the console window in Firefox, Chrome, or most other browsers, and typing “jQuery” into the console command line. If you don’t get an error, everything is working fine. Ok, so now that we have jQuery working, lets look at some of the nifty things we can do with it.

The first thing we are going to do is change the color of some text when we click on it. So, in your project, in your JavaScript tag, go ahead and copy this in (without the enclosing quotes of course): “$(function () {$("body").click(function () {$("body").css("color", "#003b6f");});});”. Looks totally easy and obvious with no explanation needed right? Totally self-explanatory? Great, moving on. What’s that? You want me to go over it anyway, just in case your friend doesn’t understand? Ok, fine.

First off, jQuery seems to mostly be done as inline anonymous functions. I don’t know why, and it seems like a horrible way to code, but it’s what the vast majority of websites seem to do with jQuery. There are a few proponents out there of making the code be more readable by using named functions and classes, and calling them at the appropriate times with arguments, much like you would do for, you know, any other programming language. But we’re not going do that here because, well, I’m not that savvy yet. We are stuck with this “spaghetti code”. That being said, lets see what we have.

Our first bit of code is the jQuery Selector “$”, you use this to let the compiler know that you’re about to throw some spaghetti at it. Then we open our parenthesis to start out code. The first “function() {}” is to tell the compiler that this is an inline anonymous function that should be run when triggered. This first function() is actually optional, but if you don’t include it then you have to include your code in the html page where you want it to run, and that script block has to be at the bottom/end of the page.

I’m not sure 100% why it works like this, but I imagine it has to do with needing all the id’s, div’s, classes, css, etc. to be in-place already before it tries to execute the code. Either way, it is generally “better” to put in this opening anonymous “function()” at the start of your script to ensure that it runs when and where you want it to with the least amount of headache.

Which brings us from “$(function(){});” to “$(function() {$(“body”).click();});”. Here, the Selector symbol (still ‘$’), is letting us know that we want to perform the click event when something is clicked. When what is clicked? “body”. So this is telling us that whenever a user clicks anywhere on the “body” of the html page (which is pretty much anywhere at all), that we should do something. What should we do? We should run a function, which brings us to “$(function() {$(“body”).click(function(){});});”. What should that function do you ask? Let me tell you: it should run the following simple jQuery Command: “$(‘x’).css(‘var’, ‘val’);”.

This is a prototypal jQuery command. In this case you would replace x with whichever html or css identifier you want to manipulate, such as ‘div’, ‘a’, ‘body’, ‘#id’,’.class’, ‘nav ul li’, etc. pretty much any way you would define a css style, you put in here as “what to act upon”. Or more accurately, “what to select”. Var would be replaced with the css tag, like ‘color’, or ‘padding’, or ‘height’ (if the css uses a dash, like ‘font-weight’, you replace it with a camel-cased version, a-la ‘fontWeight’). Then, finally, you replace val with the value you want.

So in our case we end up with “$(‘body’).css(‘color’, ‘003d9b’);”. Then we stick that into our $paghetti, to get the final product of: “$(function () {$("body").click(function () {$("body").css("color", "#003b6f");});});”. Now, on that page, when you click (almost) anywhere, all the text turns #003d9b, or, “Tardis Blue”.

I actually have more to say, and can explain 2 more changes/pages, but I’m running out of time since I’m super behind this week due to my Grad school classes sucking super bad, so I will have to wrap this up for now, and turn it in. The code is done and has all the changes done for the full 3 pages, but since I’m out of time to turn it in, this will have to do for now, and when I have time to update this blog post with the code for the other pages, I will do so.

Monday, April 23, 2018

Spirit Island Companion App

Greetings and Salutations!

I've recently finished a "Beta" / prototype of my Spirit Island companion app. It is not the full game - you must still own a full copy of the physical game to make use of the app. It is pretty much just a digitized invader board. It handles building the fear deck, event deck, invader deck, blight card, etc. and allows you to gain fear, add and remove blight, draw cards, advance invader cards, etc. It does pretty much everything you do on the invader board only without needing to take up the table space and take out all the cardboard bits and all that. Makes set up and take down faster and easier, and is rather convenient IMHO. It still has some limitations, (and possibly a few minor bugs), but I just tossed it together in my spare time for fun. It works great on my MS Surface.

You can find the base board game on Amazon - it's called Spirit Island (duh), as well as the Expansion - Branch & Claw. The Board Game Geek listing is here.

It should be noted that I am fully adhering to the terms creating for "fan creation of game elements", as I understand them, and hereby post the following as proof/acceptance:
@Eric: I agree to the terms for creating Spirit Island game elements set forth in the FAQ.
If I am somehow not following the rules, or have misunderstood them, please contact me and I will fix the issue or remove the download link to this program as soon as possible.


The Spirit Island Companion App is totally free and can be acquired here:
This is the download link for the Spirit Island Companion App.


If you find this program enjoyable, useful, and/or helpful, and you would like to support further development of this app or others like it, aka: bug fixes, updates when new expansions come out, added features based on user-submitted suggestions, and possibly apps for other games, you can find a donation link near the bottom of the left hand column of my blog under my "profile".


ASP.NET Week 4 - Stored Procedures w/ OleDb

Welcome back Sportsball Fans! Today we’re going to review the basics of using a stored procedure in a database using and OleDb command / connection object. This is pretty much the same as using an SQLCommand, all the syntax is (seems to be) the same, so this information should work whether you are using Ole, or the regular kind of connection. Here is a brief overview of what you're going to learn:

Our outline

1. Creating the necessary command and connection objects & Setting them up.
2. Configuring those objects to use a stored procedure.
3. Setting up variables for passing arguments to a stored procedure.
4. Putting it all in a try catch block for safety.

Here we go!


Section 1:

You create the objects, and initialize them to connect to the database, in pretty much the exact same way you would for any other C# database access in code.

1
2
3
4
5
6
7
8
OleDbConnection conn = new OleDbConnection();
OleDbCommand cmd = new OleDbCommand();
string strOledbConnection = @"Provider=SQLOLEDB;
                            Data Source=.;
                            Integrated Security=SSPI;
                            Initial Catalog=yourDbNameHere";
conn.ConnectionString = strOledbConnection;
conn.Open();



Section 2:

Configuring the object(s) is actually also very easy and fast. First, we need to set the connection and commandText of the cmd object. The first is trivial, as we have all done many times before, however setting the command text might be new-ish to some, so just remember that when setting the commandText to use only the name of the stored procedure – no arguments or parameters, and it is case sensitive (of course). After you’ve set these, all you have to do is set the CommandType to “CommandType.StoredProcedure” and you’re ready to move on to the next (slightly more complicated) step.

1
2
3
cmd.Connection = conn;
cmd.CommandText = "nameOfStoredProcedure";
cmd.CommandType = CommandType.StoredProcedure;



Section 3:

In order to pass arguments to our stored Procedure, we first need to set up a few temporary variables, these should be of the ‘OleBdParameter’ type and will have data stored in them the ‘cmd.Parameters.Add()’ method. You will need one variable per parameter. In this example we have four.

1
2
3
4
OleDbParameter strName = cmd.Parameters.Add("@Name", OleDbType.VarChar, 50);
OleDbParameter strEmail = cmd.Parameters.Add("@Email", OleDbType.VarChar, 50);
OleDbParameter strHandle = cmd.Parameters.Add("@Handle", OleDbType.VarChar, 50);
OleDbParameter strReason = cmd.Parameters.Add("@Reason", OleDbType.VarChar, 50);

Each Parameter has 3 … well, … parameters. The 1st is a handle for when you want to pass them in as a combined string format when creating “standard” SQL commands, as in: “Insert into [Logins] ([Name],[EmailAddress],[LoginName],[ReasonForAccess]) Values (@Name, @EmailAddress, @LoginName, @ReasonForAccess );”. The 2nd and 3rd parameters should match the variable type in the db in type and size. After setting them up, you will want to set each one’s ‘direction’ to ‘input’ as shown.

1
2
3
4
strName.Direction = ParameterDirection.Input;
strEmail.Direction = ParameterDirection.Input;
strHandle.Direction = ParameterDirection.Input;
strReason.Direction = ParameterDirection.Input;

After successfully setting up your Stored Procedure input variables as above, you are now ready to assign data to them in a very simple C# fashion, and can then run your (non)Query as usual:

1
2
3
4
5
6
strName.Value = tbName.Text;
strEmail.Value = tbEmail.Text;
strHandle.Value = tbHandle.Text;
strReason.Value = tbReasons.Text;
 
cmd.ExecuteNonQuery();



Section 4:

All this should really be done in a try catch block for safety. I don’t think I should really need to explain why this is the case, but I will show you a complete code block here below so that you can see out “final product”.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
protected void Button1_Click(object sender, EventArgs e)
    {
        OleDbConnection conn = new OleDbConnection();
        OleDbCommand cmd = new OleDbCommand();
        try
        {   //1. Make a Connection
            string strOledbConnection = @"Provider=SQLOLEDB;
                                    Data Source=.;
                                    Integrated Security=SSPI;
                                    Initial Catalog=ASPNetHomework";
            conn.ConnectionString = strOledbConnection;
            conn.Open();

            //2. Issue a Command
            cmd.Connection = conn;
            cmd.CommandText = "pInsLogins";
            cmd.CommandType = CommandType.StoredProcedure;

            OleDbParameter strName = cmd.Parameters.Add("@Name", OleDbType.VarChar, 50);
            OleDbParameter strEmail = cmd.Parameters.Add("@Email", OleDbType.VarChar, 50);
            OleDbParameter strHandle = cmd.Parameters.Add("@Handle", OleDbType.VarChar, 50);
            OleDbParameter strReason = cmd.Parameters.Add("@Reason", OleDbType.VarChar, 50);
            strName.Direction = ParameterDirection.Input;
            strEmail.Direction = ParameterDirection.Input;
            strHandle.Direction = ParameterDirection.Input;
            strReason.Direction = ParameterDirection.Input;

            strName.Value = tbName.Text;
            strEmail.Value = tbEmail.Text;
            strHandle.Value = tbHandle.Text;
            strReason.Value = tbReasons.Text;

            cmd.ExecuteNonQuery();

            //3. Process the Results
            Label1.Text += "Request Submitted Successfully.";
        }
        catch (Exception ex)
        {
            Label1.Text += "<b>" + cmd.CommandText.ToString() + "</b><br /><br />";
            Label1.Text += ex.ToString();
        }
        finally { conn.Close(); } //4. Run clean up code
    }


Best of luck to you in your coding.
See you next time!

Tuesday, April 17, 2018

Creating an ASP webpage using a Master and Content model with html, css, & C#

Greetings!

Have you ever wondered how to create a webpage using a Master and Content model with html, css, & C#? How about how to make your own personal stash of ibuprofen in the comfort of your living room? Ever thought how cool it would be if you could use lasers and tinfoil to increase your wi-fi's output by 350%? Well, if you want to learn the 1st one, I've got you covered. Not so much on the other two.

So, what we're gonna do today is learn the basics of creating a webpage by using a model that includes a "MasterPage" and "Content Pages". This is different from making a 'regular' html/css webpage because the pages themselves don't all include all the usual markup that you may be used to seeing. At least, not all in the same place. Here is a brief overview of what you're going to learn:

Our outline

One. Starting a new Master/Content project.
Too. How the master page looks (and how it works with content pages).
3. How the content pages look (and how they work with the master page).
Fore!. How the css and code-behind pages work with this type of project.
VI. Bonus: Proof that aliens exist.


Section One:
The standard way to create this type of project is actually quite straightforward, as is most of the process of this entire process/method. The first thing you'll want to do is of course open up your favorite IDE, mine being Visual Studio 2017. Choose to make a new project and select the "ASP.NET Empty Web Site"; The exact wording of the project might differ based on what IDE you are using and its version. After your project is opened, right click on the project name (Website1(1) by default), and click Add | Master Page. You will now see... a master page. With some html code and stuff.
A super exciting screen shot of visual studio!


Section Too:
So, what is this master page? Well, if you look closely you will see that it looks pretty much the same as a basic regular html webpage that you might create in a really simple text editor for a very simple website. There are, however, two things that might stick out to your trained and expert eagle eyes: the code that reads something like this "asp:contentplaceholder id="ContentPlaceHolder1" runat="server" "/asp:contentplaceholder". This is half of the linking between master and content pages. "But, why?" you might ask.

What you want to do here is write the basic framework for a web site wherein all the pages will look the same, or at least have a "theme" that they all share. If all the pages will use the same (exact) look/theme, then you can replace the 1st occurrence of the asp:ContentPlaceHolder (the one in the "head" tag section) with your standard css ref link as I have done in the following example. For each other occurrence of the asp:ContentPlaceHolder, you will be able to add whatever you would normally - but we'll worry about that later.

For now, just fill in all the "boiler plate" that you need for your page without any of the actual content - that is, no 's, no div tables, no text - just the basic html code you need to make the page layout how you want it. Also, feel free to add more asp:ContentPlaceHolder tags as necessary, if you copy and paste the one in the main body, it will automatically change/fix the syntax and naming for you to make them usable without errors.
An incredibly creative website template, if I do say so myself.


Section 3:
Now that you have a Master page all laid out with framework code for your website, now we will start making content. My content here is rather sparse (don't tell, but all of this is really just for homework credit), but you can obviously get pretty complex here. For example, all my pages have the same h1 heading in the header section/tag of the page, but you could just as easily have a different 'title' there for each page, or even a different Title (from the head section/tag) by using another asp:ContentPlaceHolder there. Anyway, now that all that is done, go over to the solution explorer again and right click on your "MasterPage.master" file - and then click "Add Content Page".

Once done processing, which generally should be very fast, you will see that VS has created a new file for you named "Default.aspx". If you open this file you will notice that for each of your asp:ContentPlaceHolder tags that you set up in your master page, you will now have a "asp:Content" tag with a ContentPlaceHolderID property set to its corresponding ContentPlaceHolder. Each of these will, once the page is rendered from the server, be inserted into its appropriate place in the master page, and then made into a more-or-less standard webpage on the clients machine. Note that these content pages do not need any html tags or framework, they are content only, using only the html content tags necessary for your css to work, such as "p", "h1", etc.
Maybe I should start posting extra random pictures just to make this more interesting...


Section Fore!:
If you right click  on the project name and click Add | Style Sheet, you can add a standard css style sheet to the project/web site and use it as you normally would. Just make sure you add the link ref to the head of each content page that should use it, or to the master page if every page will be using the same styles. Furthermore, if you expand the arrow next to any given page (Master or Content) you will find a .cs file associated with each one. This is the code behind file for that given page, and can be used as you would normally use a code behind page for any given web page.
Look Mom! Codebehind!


Section VI:
Aliens!
"It's an older meme sir, but it checks out."
~The End~


I hope you have enjoyed reading my incredibly helpful, insightful and exciting blog post about making a basic html/css website using the Master/Content model. If you have any questions or comments, please feel free to do the thing with the stuff down below. By the way, here is how you make ibuprofen.