Printing the page

I had to go through the printing process as I got a new project from my cousin. On my way, I never ever did such a job which involved printers or hard copy format for the documents. Now that I had the job for that, I started looking up for some resources. I did know that I can use CTRL + P key command to print. But, how to integrate all that inside the HTML document, I was making up some assumptions. And this was what I got.

First thing was to print the page. So for that you can create a button element inside your HTML document and handle it using jQuery for the print event. Here is the code for that:

<button>Print</button>

/* Script part */
$('button').click(function () {
  window.print();
}

Now the browser would show a simple window, where you would get more options to control the printed version of the page. You can either set them there, or you can use the code to control the page layout even more better. What you would try here is CSS3′s Media Query.

Here is the example, lets assume we’re having a div inside the body element. Which is having the id of printable and all the other body is given the id of non-printable. Now in the CSS you were taught for the usage of Media Query.

You can use this code:

@media print {
  #printable {
    display: block;
  }
  #non-printable {
    display: none;
  }
}

That was enough here. Now you can use this code to view only the printable part of the page. Which would be helpfull to save the page and to get the desired output.

Some other tips you might need to use:

  1. Always use CSS3 media query to stylize the printable version.
  2. Always keep the width larger so that height of the page is less. Saves the page!
  3. Always keep the note on the page by clicking the button or by Print command. To keep a note on the printed version too.
  4. Keep the font-size short and easy to read.
  5. Use short sentences and good punctuations. It makes the document better to be read. Less words save the space
  6. Always remember to remove the margins and paddings from the body element. Printer would automatically add the margin and paddings to the page which would be enough.

Minimizing the Error (Exception) in Web and Software development

Sometimes we create a code to execute for us. Let’s say, we create a calculator app. In which we have many classes; which include data and methods. Each class has its own specified set of data and methods on which it works.

So, now that you’re having a class of Calculator, and it has some data as value1 and numerous methods. For example you’re having something like a Mathematics class and all of its methods. I won’t use any of the methods that is defined inside a language, because this tutorial is not only for ASP.NET, but is also applicable, to all other programming languages too. Such as Java, C++ and some other Object-oriented languages. I am not aware of PHP, if it applies, do let me know.

@{
  var calc = new Calculator(); // create an calculator class object
  /* variable declaration */
  var val1 = 30;
  var val2 = 15;
  /* expressions and all other activity here... */
  var result = 0;
  result = (val2 * 2) - val1; // we know its gonna be 0
}

Now, lets continue. We have a simpe program, to calculate the result from these 2 provided variable. Please note that this code was for those, who are using ASP.NET, for those you might be using Java the above code would be changed to the following:

public class fileName {
  public void main () {
    Calculator calc = new Calculator(); // create an calculator class object
    /* variable declaration */
    int val1 = 30;
    int val2 = 15;
    /* expressions and all other activity here... */
    int result = 0;
    result = (val2 * 2) - val1; // we know its gonna be 0
  }
}

Ummm, why hate C++? Here is the code for that too:

int main () {
  Calculator calc = new Calculator(); // create an calculator class object
  /* variable declaration */
  int val1 = 30;
  int val2 = 15;
  /* expressions and all other activity here... */
  int result = ;
  result = (val2 * 2) - val1; // we know its gonna be 0
  return 0;
  /* can use void to prevent the return line */
}

Now, you might have come to know about what was done here. There was a simple subtraction, now the user might want to get another result using a division method. Such as:

var some = 2;
var res = some/result;

Boing! Here you get an error, which is known as Exception in the language of Programming. These are the errors that the are generated on the go. In this case it is:

 System.DivideByZeroException

There are many other Exceptions like this, which are annoying. In Web development, they are shown to users which are annoying and are not that much user-friendly. Secondly, in the Software development, these exceptions can break the operation and close the entire software. Too much annoying for the user, that he might uninstall your app.

To control these, you use a block that is known as try catch block. In the try section you write the code to be tried by the Compiler or the machine and in the Catch block you tell compiler what to do if an exception occurs. For example

try {
  /* all your code here to be tried... */
} catch (Exception e) { /* catch all exceptions.. */
  Response.Write("Following error generated: " + e.Message);
}

This way, you can check if any exception occurs and you can do anything related to it. You can show him an error popup, that might be less annoying or even sometimes helpfull too. You can just say: ‘Sorry, you cannot divide an integer by a zero’, instead of ‘Exception detailed CSxxxx: System.DivideByZeroException, blah and blah and blah’.

Try some other codes and tell me where I might be missing some information.

Windows app development

Well, since the upgrade of Windows 8, developers can now develop apps in HTML and CSS. Windows 8.1 has some other built-in bug fixes too. But this feature came up by the upgrade of OS from Win 7 to Win 8.

Now, we can create a simple and easy HTML software for Windows API. We can stylize it using CSS, and we can work on the events using JavaScript, man please no more JavaScript talk, I am sick of it. jQuery would be used here more oftenly, but still we would need to stick to pure (or native) JavaScript in some places where we would be handling the OS based messages.

So, let us get our selves warmed up for Windows Programming too. It’s just been made easy for us!

For more go to: http://msdn.microsoft.com/en-us/windows/apps/br229512

Dynamic Content on a Website

Sometimes you have to show a lot of content to the user, but don’t want to create multiple pages for each of the object. For example, if you were a shopkeeper or a baker or cook. You might not want to create a seperate page for cake.html, cookie.html, chicken-soup.html. That is pretty sick right?

That’s where you use the Query Strings or the Url Data. You just append a data to your URL, and on the server-side, you use that data from the URL, and change the content on the web page. That would be just like, changing the switch from ON to OFF.

Let’s continue our example. If you were the developer of your website for your bakery. You might have to write the code in each of the page. And at the same time, you might to make a new page if your bakery gets a new item. Then your file system would have been like:

  1. Default.html (or index.html)
  2. About.html
  3. Contact.html
  4. Order.html
  5. Cake.html
  6. Cookie.html
  7. Apple-pie.html
  8. Juice.html
  9. …etc

But, you can reduce this to just one page. Yes! Lets change the File System to this:

  1. Default.html (or index.html)
  2. About.html
  3. Contact.html
  4. Order.html
  5. Item.html
  6. …etc

If you’re using ASP.NET Web Pages, that we’re using since the beginning. Then you can try this code out, you will find it really simple, handy and amazing.

The example URL would be like: http://www.example.com/item/item-id-or-item-name

@{ 
   var item = UrlData[0]; /* get the urldata */
   var content = "";
   if(item == "somevalue") {
     content = "Cakes are good!";
   } else if (item == "someothervalue") {
     content = "Cookies are fresh!";
   }
}

<div>@content</div>

Now, I will explain the code, the code takes the URL data of the page, you must keep a note that the content placed infront of the page name can be accessed. In the example we had:

http://www.example.com/page-name/url-data-content-here-infront-of-page

Then I used the ASP.NET to get the first part, note the [0] first parameter after the page name. And then used an if else block to show the dynamic content depending on the item-name.

Lets do this code with out own example:

http://www.example.com/item/cake/purchase

@{
   var item = UrlData[0];
   var action = UrlData[1]; /* notice the paramter */
   var response = "";
   var content = "";
   if(item == "cake") {
     content = "Cakes are good for birthday party!";
   }
}

<div>
   <p>@content</p>
   @if(action == "purchase") {
     <a href="buy-item/@item">CHECK OUT</a>
   } else {
     <a href="item/@item/purchaase">PURCHASE THIS</a>
   }
</div>

This is a sample, you can see that the code would execute and would check for the URL, and inside the URL it would change the content of the Website. You can have as many URL parameters as much you want and they are better to read too. You can add actions, such as feedback, purchase, contact email sent etc.

CSS3 Media Queries

You are all now well aware of the usage of CSS, and how to style this all with just small amout of code. For example to add the margins to the body element you just write this

body {
   margin: 10px; /* comment: or what so ever the value */
}

Now, what CSS3 includes is a new thing, that is known as Media Query. Media is something that is being a medium in between you and the object. You’re using a Laptop, then your media is Screen, you’re reading the text on the Page in a Hard Copy form. Your media is Printed page.

It is just what is providing you with the facility to read the information that has to be sent to you.

Using CSS3, you can manage to style the document according to the Media the user would have access to. For example some people would have wide screen monitors (well LDCs in today’s world) and some would be using Mobile Phones, all of these are Screens but have different screen sizes. You can use the code to check for them.

@media type and (anyparam: value) {
   /* all the CSS properties you want to alter for different objects */
}

Using this code, you can change the properties of the objects depending on the media that is being used and the properties of the media. Please note you can only get the properties for the screen as you won’t be able to get the properties of a paper like how much wide it is or how much height it has.

Lets begin the coding

Ok, first of all we try to add a background-color, margin, color, text-decoration to the body element. We use this:

body {
  background-color: rgba(255, 0, 0, .2); /* red and a slightly visible */
  margin: 10px; /* 10 pixels margin to all the sides */
  color: #f00; /* red colored text */
  text-decoration: underline;
}

Now if we want the user on a mobile device to be able to see the text clearly as there was no style, and the margins should go away. We can do that using CSS3 media query. Have a look at the stuff below:

@media only screen and (max-width: 500px) { 
   /* for screened media with screen size only 500px */
   background-color: transparent;
   color: #fff; /* white */
   margin: 0; /* none */
   text-decoration: none;
}

If we add this code to the end of the CSS file, we will see that if the screen size if just 500px (a mobile device off course) then the website would lack all of the features and styles that were visible to the desktop version of the website such as background color, color of the text, margins, text decoration of the underline etc. Now, there is another thing about the printed copy too. CSS3 allows us to change the properties for the copy of our document that would be in the printed form. Have a look below:

@media print {
   /* note that the paper won't provide its dimensions */
   background-color: rgba(0, 0, 255, .2); /* blue but slightly visible */
   color: #00f;
   margins: 2px; /* 2px margin around the sides */
   text-decoration: italic; /* same as the italic */
}

Now, go ahead and print the page, using the above code you will see that the document that was in desktop mode, was never the same as it is in the printed form, and you’ll be like what the… How did that all go so different?

That is because of the CSS3 Media Query. In this you can change the view of the HTML document for every different media, and the properties of the media. You can change the view of the document if the screen size is not enought then you can hide some of the elements or lessen down the size of all the elements to fill the elements in the screen, if the user’s screen is very short, then you can try to change the layout using the media query. And if you want the user to get a whole new design while he prints the copy, then use

@media print {
  /* all the css properties that are to be used, would be here */
}

Viola! You just changed the look of the document. Go ahead give it a try!

Using a Database

Most of the websites now use a Database to save their data from where it can be accessed whenever needed. Lets take the example of Facebook, Google, Tumblr. and all other websites. They use a Database to use all the user related Text information.

The general example is the messages that you send to the friends on Facebook, posts that you share with your circles or the blogging posts that you share with followers on Tumblr. website.

Everytime you share the post there is a query execution on the server-side code which saves all this data to a database which is connected to the website.

I will assume you created the website using WebMatrix, StarterSite template. Lets continue the process.

Firstly go to the Database workspace, that is just at the left bottom of the WebMatrix. You’ll get to work with the Database without using any other software or management software for the database. That is why I love WebMatrix – All in one software.

You remember how we interacted with the form? Lets continue that job and save the text information that is shared with the website and save it to the Database table.

First, create a table inside the StarterSite database and name it as Forms. Go to database workspace –> Click on Create Table in the top banner and name it as Forms

Then write the First Column name as Id and select int for the database and check the boxes that are infront of it. To be clear and simple for you, the checkboxes that you are going to check mean that this column (Id) will be the primary column and its value will not match with any other of its own value, that’s why a userid of Facebook user is never similar to any other user.

Now name a new column as Text and set its datatype to nvarchar [max(4000)], nvarchar means n number or characters, where n will be the value in the (…). In this case the 4000 will be n.

A tricky thing here is what does 4000 actually mean?

This means that this column will contain a total number of 4000 characters, but the max term with it means a data of 2GB, since each character uses 2 bytes then this means that this column will accommodate upto 1 billion characters. That’s more like it isn’t it? But when you write a value without max, lets say 400 then only 400 characters will be written and others will truncate into a string and will be removed. First 400 will be saved and others will be discarded.

There are some other data types for Sql Server too. Some of them are, bit (which means true false) will only have 2 values, you need to write either True or False to it; it is a bool.

Image datatype is for binary data. You can save images to the database too, but that’s not a good idea for a developer. You can read all other data types here, they will guide you at best.

http://technet.microsoft.com/en-us/library/ms187752.aspx

Some general mistakes in jQuery syntax by us

Well, in the previous post I taught and described how jQuery can be used to create dynamic pages. But at the same time there are some errors made by us, which we totally forget while writing the code.

For example the basic and the first mistake that even a professional would do is the following line

$('button').click(function () {
 // functions..
}

Above code looks well, doesn’t it? Actually this would work when you’re using an online editor such as jsfiddle.net because they don’t need to be written or provided some extra code lines.

So, what was the error? The basic and the very simple to get error was that the above code in your own app should start with a document ready function, such as

$(document).ready(function () {
  $('button').click(function () {
    // functions here..
  }
}

Which will force the jQuery to work when the document is ready. Otherwise your jQuery code won’t work.

To be noted here, there is no difference in ‘ and ” in jQuery. You can use them both and the above code would be

$(document).ready(function () {
  $("button").click(function () {
    // functions here..
  }
}

Both will work. So, if there is any other error that humans catch, please share it in comments I will update the post and also if there is error in my code please share that too! :)