Monthly Archives: October 2013

How to interact with File; File System

Every website on our Internet uses a File System, where the user sometimes gets access to write the data, as everyone has some access to read the data. Lets get the common examples.

For beginners: What do you think read/write permissions are?

When the user is being provided read permission, it means he can read all the files; for example, he can view all the text files (.html, .css, .js etc). Which are required for a user to visit and surf the website. Let’s say Error Code 403 is one of these, any error code that starts with a 4 (403, 401) is an error; which means the users will never get access to these files or directories untill or unless webmaster allows him/her!

Now, lets cover the write permission. This permission is granted to the users which can edit, update, or upload new data to the server’s file System. For example, you might use some service which lets you share your images or text data (For example, Facebook, Google+, Tumblr., WordPress etc..). Now these websites allow their users to read (you know what read means now) and write some data (write = upload, update, delete, and other of this kind) to the server. This can be done on a Database. Which we will cover in future, but for now!

Read: To read the files present on the server, where we can easily access the files by just giving a virtual link to the file.

Write: To let the users alter the current file System data. To let him upload, or delete the files present on the File System of the server.

Coming to the point

When you select a file in the form, the basic idea for them is to provide you with a beautifull form, where you are asked to select a file, which indirectly is a

<input type="file" name="image" />

Which is used to select the files and then send it to the server, You will need enctype to convert and encode the data to the type which is best for image and other data upload. Such as

<form method="post" enctype="multipart/form-data">

And so on.

How to access and work with file System

In ASP.NET, its really simple to access and update the files present on the server’s file system. All you need is just a few variables to make all the process simple and user readable.

You remember, how we interact with the form submission by setting their methods to post. We will be using the same method here!

<form method="post">
   <input type="text" name="name" />
   <input type="submit" value="Submit" />
</form>

Now, when this is submitted, all the data (input, select, textarea) is submitted to the server alongwith other data that is inside the current form only.

Now lets handle this data on the server. We will start the IsPost block and read the data from the form and do some stuff in the server.

I need you to do something before that,

  1. Create a folder somewhere, lets say C:\<username>\Documents\filename.txt
  2. Now, you will use this link, and write the stuff!
if (IsPost) {
   var name = Request["FirstName"];
   var Data = name + Environment.NewLine; // new line there in the file..
   var FileToSaveOn = Server.MapPath("write the link to the file that you created here..");
        File.WriteAllText(@FileToSaveOn, Data);
}

Now go to the file in the Documents of yours. You will see the data written in the file.

Retry the whole process by changing the variable name to understand how they interact, try to change the code to get the information about how you can change and update the code and make it usefull. There are some other types of the File property too. You can use them to delete, update or create files too! Example are:

File.AppendAllText(); // this will update the file

There is just a slight difference between AppendAllText and WriteAllText, and its that WriteAllText will remove the previous data and then write the current data only. AppendAllText will keep the previous data and add this data at the end of the file. Pretty nice huh? 🙂

File.Exists("link to the file"); // checks whether the file is available or not..
File.ReadAllLines(); // reads the data in the file..
File.Delete(); // deletes the file; whose link is in paranthesis..

Its a better approach to first check whether file is present or not before proceeding, because it might give you an Exception, and for a developer Exceptions ain’t good! You should handle these tiny exceptions by using null as value inside the if else block.

In my next post, I will cover the basics of the file uploading and saving.

Advertisements

HTML Forms and their data; Plus Variables

I will assume that you guys are having the tools downloaded. So lets start!

What you currently have is IIS8, WebMatrix3 and some other tools that would run your database, which were installed alongwith the WebMatrix installation.

Now lets continue.

First of all, try to remind yourself of the HTML markup, and the CSS and JS.

Note: We will be using jQuery more often as compared to JavaScript.

So lets continue!

First of all, lets start with a very basic concept.

Using a Form!

<form method="post">
   <input type="text" name="name" />
   <input type="text" name="age" />
   <input type="submit" value="Submit" />
</form>

Now lets try to understand the very basics of it.

This form uses a method=”post” which changes the method of HttpRequest of the current form to POST. Which means that your form values will be submitted safely and directly to the browser. Contrary to this, you might have also used method=”get”; please note that this is the default behaviour of the form too. If there is no method, then it is a GET request.

The very basic difference for a beginner would be; a GET request creates a URL for the parameters of the FORM, and then the Server uses those parameters and processes the Request. Contrary to this, POST will just send the request directly to the server, and not having the Browser of any other ClientAgent involved.

Now lets move to the next part; the input. This is used to let the user write some values in a field, which will be sent to the server then. You can have other type of inputs too, such as radio buttons, checkboxes, email input, even password.

Now, the last and the same type of element used is the input, but with the type attribute set to submit. Which means that this button will submits the current form.  This way, you will get your data submitted to the server within a few seconds. Well actually it depends on what kind of data to send too.

This was the part which was easy to code, now comes the real horror! No wait, don’t worry it will be easier as talking. Lets start.

Since you downloaded WebMatrix, you might have noticed some other softwares downloaded too, such as Web Pages 2 and some other MS technologies. Now its their time to jump in and save the data. How?

Since these are the server-side technologies, you will use these languages to save the data or do what ever you want to do with them. I am sure, you might have downloaded that StarterSite template or any other from the Template Gallery; donot download WordPress or Joomla! templates as we won’t discuss PHP here right now. You require an ASP.NET website.

So, in a new page called “NewPage.cshtml” create a form as demonstrated above. Once you load the page, you will be able to see the form there. Now what you might want to do is to write some of the server-side codes there too. To make sure the data sent to the server gets saved somewhere too, as the user won’t like to keep sending the data when you’re not even saving it.

So here is the code for too.

First you need to create a server-side block for the code to execute.

@{
   // all the codes will be written here..
}

This is the way, a server-side code gets started and an end, in ASP.NET. Now how to manage it.

Use this:

@{
  if(IsPost) { // remember that we have set method to post, 
               //so if method is post then this..now create variables
    var name = Request.Form["name"]; // request the name input from the form
    var age = Request.Form["age"]; // request the age input from form
    // do whatso ever here.. then close the block and done!
  }
}

This block needs to be on the top of the page, even before HTML tag. Since we won’t require it in the client side, so we won’t need to care where it is placed. But remember we need to place it above, so that when the page is being executed all the variables and the code are compiled and are available throughout the DOM. For example:

@{ 
   var something = newThing;
   var newThing = "Hello";
}

This is wrong, because the server will look for the variable something in the current document, but there won’t be anything, since the variable is being declared below. So this would cause an error. To minimize this, each variable should come below its creation such as:

@{ 
   var newThing = "Hellow";
   var something = newThing;
}

You can use as many of the variables you want, and you can name them on your choice. Think like they’re your kids.

You can learn more about saving the form data to a file, reading the file in a server-side, deleting and creating a file in the link below.

http://www.asp.net/web-pages/tutorials/files,-images,-and-media/working-with-files

Is there any benefit of using wordpress? A question on Stackoverflow and my answer

It was a question asked on Stackoverflow whose answer is as under. The question what he should do for his site, he wanted a website for job, he wanted to create a freelancer website for himself, where he could get some jobs by customers. The following was my answer for him!

http://stackoverflow.com/questions/19470831/benefit-of-using-wordpress/19470912 (link, in case question isn’t deleted)

Well, you can use WordPress for your jobs,

Advantages:

  1. If you donot want to write any code at all 🙂 That’s the biggest and the main benefit.
  2. If you don’t want to buy any kind of hosting, then you will come to wordpress. That’s the second one.
  3. You don’t need to worry about bandwidth and Data.
  4. Its a free CMS (content management system). Which will let you edit your site in the Browser, without having to know about HTML even a little bit.

Disadvantages:

But at the same time you have many disadvantages of it too.

Such as

  1. You will not be able to edit the template untill or unless you purchase it fully.
  2. You won’t be able to keep a good note on the stats, wordpress has its own builtin, but I don’t like those!
  3. You will have to stick to the features of wordpress, suppose you want to let your friends sign in and add comments you will require a Database, but wordpress won’t let you install a new database.
  4. Emails won’t be allowed to or from any other service.

Recommendation:

So what I would recommend you would be to either learn HTML and then start developing your own website and post it to the Net, or you can hire someone to create a website for you! But since you know HTML and are a freelancer, then good! You can create a simple site, with $1 fee and start your website.

Basic Features:

You can create as many pages on wordpress too, but creating a website of your own will be much more like it. On wordpress you will be able to start a project which has all of these

  1. About Page
  2. Contact Page (only email address and social links can be provided, no forms!)
  3. Portfolio
  4. Pricing
  5. And any other page required for the job…

You will be able to add plugins of your own desire, edit the template, edit fonts, or even do what so ever you like. You will be the webmaster of the website having no issue at all in editing or in coding.

You will be able to send and recieve emails too. With wordpress you can’t do that! WordPress won’t let you have an Smtp server, so stoping you from sending emails! But with your own website, when you host it, you will send emails to your customers whenever the job is done! That’s a good feature 🙂

My Suggestion:

I’m a freelancer too, but that doesn’t mean I should have a wordpress site only. WordPress is a site that provides you a space to blog, you can ask for hires but then again you will have to partner with other sites like PayPal, then you’ll have to manage the Email System using Gmail, then you’ll have to take care of other stuffs too. Which WordPress won’t let you do. But if just want others to know about you, then yes! WordPress is a good option for you. You can create a blog, and simply edit the details on it. Add Privacy, Terms, Pricing and all other stuff that is needed! You won’t have to worry about the bandwidth too.

My Blog on WordPress:

I also have a wordpress blog for myself! Here it is hosted: http://templatesondemand.wordpress.com/

But it doesn’t provide me with any customer at all, because of its lack in features. So on the other hand if I had a website of my own. I would have been hired atleast 5 times since then. So I just left this site as it is by posting vague stuff and adding a contact page only.

So, that’s all that I can tell you! 🙂 Now its you who will have to walk through the way 🙂 .. (Whoa, that was alot of typing! :D..)

Good luck brother.

Syntax for HTML, CSS, JavaScript!

First of all, for the beginners! If you know the basics about them you can skip it. But you might want to read this just to refresh the memory!

You will require a text editor, lets say Notepad, that’s perfect! Write the HTML code, save the file but remember to save it as “*.html” or “*.htm”, what I mean is instead of “*.txt” change that to HTML, so that the OS would know that the browser would open this file. Then open it, and Default browser would run loading the file you just created. You can still edit it by opening it in a notepad!

Lets begin!

HTML

HTML stands for Hypertext Markup Language, which I am sure we don’t need to argue about, but if you want to learn more about it like when it was born, who created it which organisation played a vital role then go to WikiPedia.

Its basic syntax is simple and easy to understand!

<!DOCTYPE html>
<html>

</html>

It starts with an angel bracket and ends on it. This is basic one. You can comments too, for commenting the HTML codes out! Like this:

<!-- this is a comment -->

Comments can be multiline. You can have more elements inside this HTML doc too. Such as paragraphs, headings and other elements too such as images. Here is a list for them!

<h1>This is a heading</h1>
<h2>This is heading too, but smaller than h1</h2>
<!-- you remember this one, its a comment, I am using this comment to tell you
    that below will be a paragraph -->
<p>This is a paragraph, you can extend it to a number of text depending on the paragraph size.
You can use multilines too, but keep in mind! This won't be read, as HTML won'r read multiple white spaces and will render them as only single white-space. 
For a line break, you need to use another type of element which is <br />
Whoops, its a new line! Good :)</p>
<!-- below I am going to add an image, look carefully -->
<img src="https://www.google.com/images/srpr/logo11w.png" alt="photo" />

You would have noticed, why didn’t image tag have the same </img> tag. But that is something more complicated, which is known as Self-Closing of the tags. Difference between XHTML (XML + HTML) and HTML. You can learn more about them by Googling them out, or simply go to Stackoverflow question.

You can use heading tags from h1 to h6, h6 will be the smallest and h1 will be the largest of them all.

You can use ID or classes to distinguish or group different elements.

<p id="someid" class="someclass" >This is the text in it!</p>

But keep in mind, ID should not be repeated throughout the page, its illegal in HTML, for example:

<p id="paragraph">First Paragraph</p>
<p id="paragraph">Ummm I thought both of them are similar, so I provided them with the same ID!</p>

NO! You’re wrong. You cannot have similar IDs even for similar elements. If you have similar elements or elements which you want to look alike you can use containers. Which are

<div id="div">
<p>Paragraph one!</p>
<p>Similar to the above!</p>
</div>

<p>This is <span id="span">some</span> text</p>

This way, you will wrap them up, which will use the same ID and won’t be illegal either.

So I hope you might have come to know about the basics of the HTML elements, their syntax for they are used accross browsers and platforms.

CSS

CSS stands for Cascading Style Sheets, which is used to edit the visual representation of the HTML elements in a browser. Its syntax is simple too. It uses the element’s name or either its id or class. This way,

selector {
   property: value;
}

This way, you will use a simple selector to select the element and then style it using the CSS properties and their value. For example lets say, you want to style the paragraph and change its text color to blue. Here is what you need

p {
  color: blue; // double slash is a comment in css :) 
}

/* to use multiline comment you need a double slash like // add asterisks in them
 * like /**/ then write between the asterisks, :) all the text in them will
 * be ignored as a comment. */
// You can use more then one property for each element as

p {
  color: blue; // changes its color..
  font-family: tahoma; // changes the font's family
  font-size: 20px; change the font-size, default is 16px
  background-color: #999; /* change the background-color
                           * for the paragraph not the text only */
}

If you need to select an element by its class or ID, then use these

// to use a class use '.'
.someclass {
  property: value;
}

// using ID is same, just replace '.' with '#' as
#someid {
  property: value;
}

That was all! 🙂 Good, you have learnt the basics of the coding in HTML and you have learn how to style them. Bravo!

JavaScript

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

To be simple, it can change the objects present in an HTML DOM on the go. You cannot edit the HTML just in the browser. You need JavaScript to change the content of the document or even change how it is styled! Look good right? Lets have a look at it.

To select an element, you need to reference to the document and then get the element by some selectors. Here is the example:

document.getElementById("someid");

This way, you will get the element which has the ID that you have specified in the parathesis. There are some other selectors too such as getElementByClassName, getElementByTagName and so on, you can learn more of them with a simple Google!

This will provide you with something as object Object. Which offcourse you don’t want, so you will go for a more detailed thing. Its value.

Let’s say you are having an input field and want its value then write this

<input type="text" name="somename" id="someid" /> <!-- note the self closing -->

<script>
// you need a script tag to write the js code
var inputval = document.getElementById("someid").value;
// not to mention, but if you want to write this then use..
// I will assume you are having a paragraph tag so
document.getElementById("idofparagraph").innerHTML = inputval;
</script>

And there, you will have the value of its! innerHTML will write the value from the input field in a paragraph, but that needs to wrapped inside a function, which we will learn in a later topic. Till now, I am sure this is enough! 🙂

If you need any more guidance, feel free to comment below. Good luck.

Lets get my hands ready for some coding tutorials!

You all know the basics of HTML, CSS, JavaScript and some other languages such as ASP.NET!

But some of you might not know these languages, so we will continue from the basics. But not very basic ones such as how to start a block and how to end the paragraph code block.

If you need help in that too, please comment! Or contact me, I will guide you! 🙂