So we will review some of the very important tips that you shouldn’t miss, You have also to know that going deep in each point from what i will discuss is impossible in one article .You can consider this as a basic checklist and may be i will explain each point in a separate post.

1-Read a couple of books one about search engine optimization and the other is about using Google Adsense : It is very important  if you are planning to make some money to understand search engine optimization sure i won’t explain it here but to be aware what it is we can say it is simply a group of techniques used to attract the largest amount of unpaid traffic from search engines. Also read a little about the Adsense advertising  program from Google, most of the money will come from here so understand the game not to make any mistakes that can get you out of the program completely.

2- Choose what you will write about:  ok first choose something that you like and got some background about, notice here you have many things to learn in the technology of blogging so lets keep the writing process easy by choosing something you like.  Another thing is to write about something that have an active market to get high click price from your advertisement space. Writing about your friends or writing diaries is fun but will attract only the un targeted general ads which has the lowest click price 0.04$ or something(the highest click price someone reported was 15$ sure we won’t target this high but above 0.12$ will be great).  Last thing get away from highly competitive niches because it takes years to get traffic in this areas.

3-Register a domain: Don’t try to save some money by using a free host like blogspot it is far better to park a domain name for your self it only cost 8$ a year. You can take free hosting as a trial but you never know what will your blog be after 2-3 years, you can suddenly find your self earning a lot of money from your blog in this case your domain is like a brand name and no body will control you also you may want to add some more functionality to your blog later like adding forum or e-store if you are in a free host all this extending won’t be available.

another important thing is domain name selection, you have to select domain name that contains some important keywords from your niche this will help because search engines concentrate more on the the words that present in the URL and will give your blog a very good rank for this key words.Also try to separate the words with separators to be understood by search engines.like (cars-for-rent.com).

also buying an old domain name with even minimum popularity may help you to start making money earlier as this will help you to avoid what is called sandbox which we will discuss later.

4-Choose a free blog script  to run on the domain: i strongly suggest wordpress it has a great seo plugins, very easy to install, very easy to use (installing adsense, analytics or almost anything is only few clicks away )and had a great pinging capability which will help your pages to get indexed quickly.

5-chose your keywords: Use the Google Adwords keyword tool to discover the popular keywords in your niche you can read how to choose your keywords  from this article.

5-Write your article: First you should know how to use the keywords you choose in your article you can read this article this will help. The article should be from 300 – 1000 word. Too lengthy or too short article can be challenging to a beginner blogger.

You should update your blog almost every one or two days in the beginning because Google like the websites that updated regularly and this will help your pages to get indexed really after minutes.

last thing avoid duplicate or copied contents ,using copied or duplicate contents this is a very risky process and can make you punished by Google for a very long time. Sure an experienced blogger can use this contents with no problems with little adjustments but this can be risky for beginners.

6-Ping ping:

When you update your blog by adding a new article you should let the major search engines know that there is fresh juice in you website this is called pinging. If you are using wordpress the process of pinging can be automatic you just copy a list of the websites you want to ping when a new article is added  and paste it to the writing settings page in your control panel.  if you are not using wordpress then use pingomatic.com service it is free and will ping most of the important search engines.

7-Link building:

Search engines consider the web as  a large voting machine where every external link is a vote for your site. Sure votes or links from important websites is count much more than a link from a regular website ( For example a link from cnn is like magic to your website ). So a bunch of external links will drive you  traffic  not only directly from people clicking on the links but also by raising your search engines ranks.

This subject is too long to be described here but as a start comment on some blogs that allow you to add your website url. Register to some forums and add your website url to the signature.

Also don’t forget to add your new articles to social bookmarking networks it is really really important. I remember here digg , reditt, facebook, linkedin, jumptags, delicious and myspace you can used this free tool to ease the process.

Many website add a no-follow attribute to prevent the search engines from following and counting external links. you can check this by viewing the page source code and search the source code for no follow word. Generally adding links to a no follow page don’t count and not important unless pages that can drive direct traffic.

Last thing building too many links(more than 5-6 a day) in a short period can be harmful according to some authors keep a steady medium links not to be punished by search engines.

8-Traffic tracking and reporting:

you should have a very good tracking system to know the exact traffic, traffic countries, traffic per pages etc. . This is very important to manage your blog and find what to write about . If your host don’t offer this functionality you can use the free google analytics (you can add the tracking code to your pages easily if you are using wordpress ).

9-Add google adsense time to make some money:

create an account with google adsense (use your real bank name) .Wait 3 days till the account approved then add the code to your pages  . Again if you are using the great wordpress you can add the code to your articles by adding a plugin in a minute.

The design of the ads is very important it make a different between 0  and 100$ a day it is also a very complicated process and need many trials to get the design which gives the best results. But simply i will give you a gold tips

-blind it to the page :people don’t like to click on ads you have to make the user think that it is not an ad you have to make him feel that this is an internal link. You can ease this by by using only 3 colors in your website and use the same colors in your text ad.

-get away from image ads it need an expert to place it and get results .

-use rectangles ads medium or large in the start of every article and in the article footer also it gives the highest number of clicks .

-use vertical skyscraper in the upper left column of you website it also gets a good clicks.

-last thing you should know that you are allowed only to put 3 ad units on page.

now you can start but you need to keep reading about the mentioned issues here because i only tried to offer you a headlines of the knowledge needed to be a prof. blogger but you have to keep reading.

good luck and don’t forget to link me back if you become the next yahoo.

here is a list of things that i like about wordpress:

Advantages:

1-Extremely easy setup and usage :

It takes only 10 minutes to see your blog working and another two days to learn how to do every thing.

The new plugin( plugin is a piece of code to extend the software to perform a function that wasn’t available pefore ) install  system is really the best in market you just have to choose the plugin you want from your control panel click install and activate and then it is working.

This may looks normal for the inexperienced but we have to say that the process is much more complicated in most of the open source content management systems available you usually has to download the plugin then upload it to the server even sometimes adjust some of the php code (which you have to re edit every  upgrade) with many problems that may arise after installation . the process in wordpress is like a breath few clicks with no upload, download or code adjustments.

2-Great search engine optimization:

our lovely blog  come out of the box with an above average seo but by adding few tactic plugins in a minute it just has a perfect search engine optimization. also the default theme has some aspects that need to be adjusted for seo but now there is many available free themes with perfect seo adjustments and again the theme setup is really easy. all you have to do is searching for seo friendly themes and you will find a ton (the theme i use here is so great it called “atahualba”) . you can control titles, also generate sitemaps dynamically. Header tags, description also the url forms to use simply nothing is missed here with just good theme and “all in one seo” plugin  which can be installed in two minutes.

3-performance: great performance i tried my website even from the slowest connection speed on earth an it just fine.

4- Extendibility  & customization:

Plugins to make almost every thing you can think of. really more than you imagined.Tasks like seo, sitemap generation, internal links, related posts, e-commerce , traffic reporting, adding adsense, adding google analytics and even geo maps this tasks is fully automated and really easy especially if we considered the extremely easy plugin install. All of this features can be added without any knowledge in developing.

5-Easy auto pinging:

The script automatically call all the important search engines and inform them that you posted something fresh all you have to is to add a list of the urls of the search engines you want to ping and you are done.

6-Appearance:

wp is extremely popular these days you will find hundreds of themes to cover all your hopes but i have to say that before you choose a theme to use check for it’s function first before appearance as there is many themes that is extremely pretty but has a bad seo or a design that push your visitors away from advertisement links   these themes have to be avoided.

disadvantages:

unfortunately wp is not a complete content management system it is just a blog if you wish to add more functionalities or develop a full website may be you will have to use a larger cms like dotnetnuke or drupal or joomla. There is an ability to add pages to wordpress but sure it is not enough as full cms.

I tried about 3 different blog systems but i really didn’t realized  that this level of perfection can be available for free

And again i am jealous from you  php guys i wish i see something similar in asp.net.

We will use an example here of a scenario that you have a media library web site where the lessons is categorized. . We design the database to contain two tables the first “categories” and the other is “lessons”. The lessons table contains a field called “mp3filelocation” that contains the url of the mp3 of the lesson. The “categories” and the “lessons” is related in a one to many relation. You should set the “delete role” in the relation properties window of the vwd data base diagram to “cascade” . This means when you delete a category all the related lessons will be deleted automatically from the data base but you have to delete the mp3file  from it’s directory from the code behind page.

In our scenario the website admin should have the option of deleting a single lesson also to delete a category with all the related lessons.

Deleting single file:

In the “lesson_delete” page we need to delete the mp3  related to the lesson we are deleting. To accomplish this we will put the code to delete the related file in the “SqlDataSource1_Deleted” event handler. we will simply add a databound asp.net label that is bounded to mp3fileurl database field then in the code behind take the file path and delete it.

code example:

Dim LABELfileurl As Label = DirectCast(FormView2.FindControl(“mp3nameLabel”), Label)
Dim filenamemp3 As String = LABELfileurl.Text
If e.AffectedRows > 0 Then
If filenamemp3.Length > 3
Try
File.Delete(Server.MapPath(“~/lessonsmp3/” & LABELfileurl.Text))
Catch
End Try
End If
End If

Code explanation:

1-we used “formview2.findcontrol” function to find the asp.net label we want  inside the formview(notice form view is naming container so you cant access the control inside it directly like usual ).

2-we used “directcast” because “findcontrol” function return an undefined control so to define the returning object as a label we use “directcast” function.

3-then we store the mp3file name in a variable .

4-check if the data base row successfully removed using “e.affectedrows>0”

5-then check if there is a mp3file related to the removed lessons.

6-then use the “file.delete” to delete the mp3file this method accept the physical path of the file to delete it we use “server.mappath” to return the physical path .

7-and you finished.

Multiple files deleting:

Thing will be a little complicated here in our scenario we have a group of mp3 files located in a directory called “lessonsmp3” in the category delete page we should remove the files related to this category after removing the selected category row from the database

here is the code example

If e.AffectedRows > 0 Then

Dim categoryid As String = categoryddl.SelectedValue.ToString()
Dim file() As FileInfo
Dim i As Integer
Dim searchfor As String

Dim directory As New DirectoryInfo(Server.MapPath(“~/lessonsmp3/”))
searchfor= categoryid & “*” & “.mp3″
file = directory.GetFiles(searchfor)

If file.Length > 0 Then
For i = 0 To file.Length – 1
file(i).Delete()
Next
End If

End If

code explanation:

1-First we create a variable to carry the id of the category we want to remove “categoryid”.

2-then we instantiate an array of file info type object. This will give us the ability to loop through large number of files and delete or edit each file alone.

3-we define the “i” integer type variable to act as a loop counter.

4-then we define a string variable “searchfor” which will carry the search criteria of the mp3files we want to delete. Notice that we designed the lesson insert page to add the category id in front of the uploaded file name to ease the process of multiple file deleting all we have to do is to search for the category id of the category we need to remove in the start of any file name if we found the id of category we want to remove we delete the file else leave the file inplace.

5-then we define a “directoryinfo” type variable that point to the directory that contains the files that we want to delete from. Notice we used “server.mappath” to get the physical path of the directory from the virtual path which is”~/lessonsmp3/”.

6-then we set the search parameters as we mentioned before. the file should contains the category id in the start of it’s name and mp3 type.

7.then we load the files that present in the selected directory into the “file” array we created before.

8-then check if the array contains files by checking it’s length to be more than zero.

9-then we loop through the array checking if the mp3file have the criteria we set before if the  file belong to the category we want to remove we delete the file also using”file(i).delete()” method.

10-continue looping to the last file in the array and you are finished.

As a asp.net developer it is very important  when you start to build a web site to make it search engine friendly as possible to get the maximum number of free traffic. One of the most important requirement for any webpage to be search engine friendly is to have a unique, unrepeated and very closely related  page title and meta tags. Search engine is giving a a great importance to the text present in the page title and think it the best way to discover what the page is about , also search engine use your description meta tag( if you used it properly ) to write the page description that appear below the page title in the search result.

When you have a unique description meta tag that is very related to your page content the search engine will use it but if the description meta tag is not unique too short or not related to the page the search engine will choose other text from the page and use it as a description for your page. That automatically chosen text won’t be sexy for the people to click at  which can affect you traffic badly. Also if the page title is repeated or not related to the page you will rank very low for your targeted keywords because there will be other competitive  pages with a better page titles .

Page titles and meta tags generation in asp.net :

As an asp.net developer you should learn how to generate and control page titles and meta tags dynamically.

For any physical asp.net page that has only one version like the “contact us” page or “about the company” page there will be no problem  you just will set the page title and the meta tags statically like if you are preparing a simple html page.Just find the title attribute in the page declaration part of the asp.net aspx page(usually the first line in page ), and set the title property to the value you want and for the meta tags you just add it to the head part of the page like thgis

<META NAME=”description” CONTENT=”your page description”/>

But the problem is in the asp.net pages that  display a different row from the data base every time based on the query string value or something. Also the pages that display contents based on the user country or language.

As i want this article to be easy to understand for the beginner asp.net developer i will explain a very basic example here. We have a scenario that we want to make a details page that display the details of a single product selected on the base of the query string field called “productid”. Sure we will need to generate page title and meta tags dynamically because search engine will see “/productdetails.aspx?productid=1” and “/productdetails.aspx?productid=2” as a totally different pages that must have different page titles, also suppose that the first page is displaying a football and the other page displaying a diving equipment so the page title have to be generated every time the asp.net page load  to be related to the product displayed and rank high when someone search for the  diving eq. for example.

so time for coding

Generating page title and meta tags dynamically explained vb.net code example:

To fulfill the requirement of the scenario described  above  we will add a three fields to the data base “pagetitle”,”descriptionmeta ” and “keyeordmeta” to store the page title and  meta tags for each product these fields should be filled by the seo specialist.

We can make it easier by using product name as the page title and the product description as the page meta description  but i prefer separating what is for humans from what is for search engines because each has it’s  rules.

Prepare a page containing  form view the form view will display one row from the products table on the base of the query string passed with the url.

add two data bound asp.net labels to the asp.net formview with ID’s  “ptitlelbl”, “mdisclbl”  the first id data bounded to the data base field that hold the page title and the other is bounded to the meta description field.

and here is the code behind

Page title:

in the page load event add the following code

Dim ptitle As String
ptitle = DirectCast(FormView1.FindControl(“ptitlelbl”), Label).Text
If String.IsNullOrEmpty(ptitle) Then

Else

Page.Title = ” any thing you want to append” & ptitle
End If

and you done just be sure that there is no static page title tag anywhere (page declaration section, header section of the aspx file or in the master page) not to have unexpected results.

1-we declared a variable to hold the title.

2-we used “formview1.findcontrol” function to find the asp.net label we want  inside the formview(notice form view is naming container so you cant access the control inside it directly like usual ).

3-we check first if the variable is not empty to prevent the ugly looking exception.

4-we used “directcast” because “findcontrol” function return an undefined control so to define the returning object as a label we use “directcast” function.

5-then we set the “title” property of the “page” object to the value we extracted from the data base and append to it any text we want(may be product category for example) .

Meta tags(description ex. ):

also in the page load event add the following vb.net code

Dim ptitle As String
disctext = DirectCast(FormView1.FindControl(“mdisclbl”), Label).Text
If String.IsNullOrEmpty(disctext) Then

Else

Dim headsection As HtmlHead = CType(Me.Header, HtmlHead)
Dim discmetatag As HtmlMeta = New HtmlMeta()
discmetatag.Name = “Description”
discmetatag.Content = “any thing you want to append ,” & disctext
headsection.Controls.Add(discmetatag)
End If

here the code is similar to the code above  except:

1-first we create an instance of our page head section.

2-next we defined a new html meta object.

3-we set its name proberity to “description”(or keyword if you want)

4-then set its content to the text we extracted from the data base.

5-finally we add the meta tag object we created to our page header section

and you are done

some useful tips in generating asp.net page title and description meta tags:

1-it is sometimes important to add different countries or cities to the page title and meta tags because people usually search for service that is located close to them.For example if you have a car rent website may be you should dynamically generate many instances of your  pages  each one is targeted to different cities in your country.believe me it is great tip you should try it if you are making a website that offer a local service.

2-put the most important text in your page in a h1 tag. in our case above it will make a great difference to put the product name asp.net  label in a h1 tag and may be making it bold text also.

3-it is far better to have only h1 tag in each page not more this will keep your page targeted.

IF YOU WANT TO KNOW HOW TO SELECT YOUR KEY WORDS READ THIS

happppy coding and alot of money.

dr A. galal

asp.net developer and seo specialist.

dr.agalal@speakasp.net

aspx file extension:

aspx is the file extension of the dynamic web pages created by a Microsoft technology called asp.net. Dynamic web page mean that the final page that will be  sent to the  user browser will be generated from a programming code that will customize the page each time it called using some logic . For example the site developer can change and customize the page according to the user country, user browser type  or even the source where the user came from. In the same way the website member can see different content from the contents that will be displayed to the non registered user even if they called the exact same page.

Opening aspx file:

what if you  have an aspx source file  and you want to open the file for any reason like making a small change in a word spelling or even change some colors if you know a little about html. In this case you can open the file using the word-pad or Microsoft word. If you want to see the changed while you editing the file you will need a more specialized program like Microsoft free vwd or dream weaver. there is no guarentee that you will see anything because the aspx files is really complicated.

Converting aspx file to html :

if you open a aspx web page from distant web site on  your browser and you want to convert the page to html file extension all you have to do is to to click on the file menu from your browser and choose save or  save as htm/html and you can open the page as very simple html page on any program.

if you have a source file  aspx page the process here will be harder and will need a specialist because the page will need to be rendered using any type of  asp.net windows server it can be local server on your pc or production server on the Internet.

aspx (asp.net ) programming language :

aspx term is sometimes used to describe the asp.net technology itself (it is not an accurate term but many people use it).  Asp.net is a Microsoft technology used to create dynamic websites. The aspx technology is based on the classic asp web programming  language and  integration with the Microsoft .net framework. The .net framework is a group of programming code units each unit (class) can perform a definite function so programmer don’t have to reinvent every peace of code he just can call it from the .net framework and use it.  almost every modern programming language can be integrated with .net framework .

aspx competitors:

many dynamic web programming languages available these days. The most prominent competitor is for sure the php language. Php is the most common used  web programming language today followed by asp.net (asp.net is really rising ).php language is a open source community language. Also jsp language have a noticed market share.

aspx advantages :

1-easy to learn as most of the hard work is done automatically done with the help of the developing .net framework . also the great help of the great vwd to correct the spilling of your code also suggesting a completion of code sentence.It took me just 8 months  to start from the zero to building my first giant and  paid project.

2-aspx is supported seriously by Microsoft many great learning videos, tutorial, forums and articles prepared by the best Microsoft employers . also any time you can open a ticket to report a problem or a bug and you will get fast answer.

3-security aspx or asp.net is far safer than any other language it is not my opinion but most of experts think so. I see also that especially the beginners can build  web applications that is more  secure than the applications build by beginners in any other language. This because the .net framework take care of 90 % of securing the asp.net applications in the most professional way.

4-free every thing you use during development has a free version that you can get from Microsoft website.

Handling image upload in asp.net :

we will imagine that we are preparing an asp.net website where the  user can submit  his name, address, phone number and sure  his image to be stored on our data base , What is the steps to accomplish the task?

• First we have the add new user page:

1-Sending the image from the client browser to our server (Sure the file should be validated for type and size to avoid security and performance problems).

2-Storing the record that contains the employee information the database (access database in our case) including the image path that we choose. (We will explain later that the image path has to be renamed).

3-Resize the image or create thumbnail from the image if needed.

4-Saving the customized image to the folder we specify on the server with the same new file path that we stored in the data base record, So we can call it again to be presented on data bound asp.net image control .If the name of the uploaded image on the file system was different from that we stored on the database the image won’t be found and will leave an ugly red x mark on the final data presentation page.

5-Inform the employee if the image uploading and data recording is finished or there are problems.

• Then we have the update page where the user can update his profile info:

Which have the general requirement like previous plus that we have to check if the user want to change his profile image. If the user want to change the image he will choose another image then we have to upload the new  image, update the data base with the new name, save the new image to the images folder then delete the old image not to waste disk space.

• then we have the delete user page:

from this page the site admin can delete any user from the data page then after delete the code should search for the deleted user image and delete it also

ASP.NET upload image code highlights:

As I want even the beginner asp.net developers to be able to use this code to handle uploaded images. I will describe some important points before starting the step by step tutorial

• Insert page code highlights :

All the images uploaded by employees will be stored in the same folder on the server. Imagine that an employee uploaded an image named (mypicture.png) then after an hour another employee uploaded another image with the same name also (mypicture.png) what will happen?? The server will simply replace the old image with the new one. Then when the first employee opens his profile page he will find another person’s image presented as his image. Sure he will feel that the person who coded this site is drunk or trying to be funny.So how we will solve this problem?1-First we will declare 2 page level string variables to store the new image file path also the thumbnail image file path (we used page level variables here because it can retain it’s same value between different staged of page life cycle so the image path that will be stored to the data base will still the same when we save the images to the server). 2-store to these variables some unique string value that very hard to be repeated like logged employee id which can’t be repeated or the current time millisecond + second + minute , the purpose of this step is to be sure that each image will have a unique file name that can’t repeated .

Dim filenamelarge As String = “~/employeeimg/” & DateTime.Now.Millisecond.ToString & DateTime.Now.Second.ToString & DateTime.Now.Minute.ToString

Dim filenamethumb As String = “~/employeeimg/” & “thumb” & DateTime.Now.Millisecond.ToString & DateTime.Now.Second.ToString & DateTime.Now.Minute.ToString

JUST BE SURE TO PUT THIS CODE JUST UNDER THIS LINE

Inherits System.Web.UI.Page

AND BEFORE ANY EVENT HANDLER SO THE VARIABLE CAN BE ACCESSABLE FROM ANY EVENT HANDLER

3-on formview item inserting event handler read the uploaded image file path that contains the image extension from the image upload control then add it to the page level variables after the unique value we generated above, we are doing so to make the images file path readable to humans for any purpose also to add the image extension from the uploaded image.

Dim fileuploader1 As FileUpload =DirectCast(FormView1.FindControl(“fileUpload1″), FileUpload)

If fileuploader1.HasFile Then

filenamelarge = filenamelarge  & (fileuploader1.FileName)

filenamethumb = filenamethumb & (fileuploader1.FileName)

Else

filenamelarge1 = “”

filenamesmall1 = “”

End If

Here we first find our fileupload1 control that located inside the formview using the findcontrol function then we then we cast it to a file upload type variable so we can access its proprieties Then we check if the employee chooses a file to upload if yes we change auto generated filename by adding the uploaded image filename.4-on the formview item inserting event handler we will inject the new image path we generated and the thumbnail image file path as an access data source parameters values to be stored to the data base with the rest of data.

Dim myaccesdatasource As SqlDataSource = addproduct

mysqldatasource.InsertParameters(“image”).DefaultValue = filenamelarge

mysqldatasource.InsertParameters(“thumbnail”).DefaultValue = filenamethumb

where image and thumbnail are the columns names of where we want to store the uploaded image and thumbnail  image filepath

5- On the item inserted event handler of the formview we will resize the image, create thumbnail and finally save it to the folder we want with the same names that stored to the data base. There are too many classes available on the internet to resize the images and create thumbnails from the uploaded images. I will work here with a very good class from the( ASP.NET 2.0 instant results) book from Wrox you can buy the book , it is really great book or just download the code for free including this imageresize class from Wrox website. I won’t write it here because I don’t want to violate the copyrights of the book authors.The class accepts three arguments the first is the name of the original file, the second is the name you want to give to the new resized image, the third one is the final image size in pixels.  imageresizer.ResizeImage(Server.MapPath(filenamelarge), _                        Server.MapPath(filenamethumb), 100) This code snippet take the original image file path create thumbnail and save it with the new filenamethumb valueAlso if we want to resize the uploaded image we just pass the filenamelarge and resize it and save it with its image file path and the server just replace the original uploaded image with the new resized version as both have the same exact filename.Like this  imageresizer.ResizeImage(Server.MapPath(filenamelarge), _                        Server.MapPath(filenamelarge), 500)The resized images with this class have acceptable quailty and much more less file size but if you need a higher quality of the resized image you should consider bying a third party image resizing softwere.

• The update page code highlights:

All the code snippest that we used in the add new record page will be used plus checking if a new image is uploaded from the employee to update the data base and delete the old originial image ant old thumbnail then save the new image and generated thumbnail.We will employee the file.delete function to delete the old image and thumbnail after reading their file paths from databound controls inside the asp.net formview . This function accept the full physical path of the file we want to delete(like d:/websites/ourwebsite/wwwroot/employeesimages/employee1.png) and delete it for us. Now we have a trouble we don,t know the physical path of the uploaded saved image on the server, we know only the relative path of these images to our application root (like ~/employeesimages/employee1.png). We will solve this by using the server.mappath function wich convert the relative file path to physical file path that can be used in file operations.     File.Delete(Server.MapPath(oldimageurl))

• Delete employee page:

We will simply delete the image and thumbnail using the same file.delete function in the gridview rowdeleting event handler after getting image and thumbnail file paths from data bound literal controls inside the asp.net gridview item template.

ASP.NET image upload tutorial:

We will work here with vwd 2008 sp1, .net framework v 3.5 but the steps should work for all vs or vwd versions from 2005 or above and also can work on .net framework 0.2  Now we will start to create our demo website from scratch step by step also the full demo will be available to download. 1. Create new wesite named image_upload : from the vwd 2008 file menu >> newwebsite >> from vwd templates choose asp.net website and the language to vb.net >> change the name and location like you want2. Create new sql data base : from the vwd website menu choose add new item >> from the templates choose sql server data base >> name it “imageuploaddata” >>  then click ok to add the new data base to your app_data folder.3. Create the  data table : from the vwd solution explorer window expand the app_data folder node you supposed to find the  “imageuploaddata “ data base you added  >>  then double click on the data base to open the vwd database explorer window >>  from the vwd database explorer window expand “imageuploaddata “  node  >> then right click on the tables node and choose add new table4. Design the “imageupload_emptable” table :  for priefcy we will create the table with only four columns  empid, empname ,empiamge and empthumb >> In the desiger insert the table names as After creating the table rows select the “empid” column and press  the small golden key on the upper left side of vwd window to set the empid column as a primary key of the table >> then in the column properties section on the table designer find the “identity specification” node and extend it >> then we have to set the primary key cloumn as an autoincremented field for example 1,2,3,4 to give unique value for each record to do so find the (is identity) properity set it to yes and leave the seed and increment unchanged >> then close the table designer tap >> choose yes to save the changes > > name the new table “imageupload_emptable” then click ok5- create an empty folder named “empimages” to store the uploaded images to5. Create the “image_upload_insert.aspx” page : From the website menu choose “add new item” >> from the vwd templated choose “webform” name the page “image_upload_insert.aspx” then click okDesigning the asp.net image upload insert page:

• Designing  the image_upload_insert.aspx:

Creating the sqldatasource:Open the “image_upload_insert.aspx”  page if it is not opened then switch to the design view  >> from the toolbox drag “sqldatasource” contol and drop it to the page.This will be respnsible for the connection between the data base and the formview that we will add later >>  From the task menu (the small arrow on the right of the sqldatasource)  choose “configure data source”  >>  you will be asked to choose the data connection , Just chose the “imageuploaddata.mdf “ from the list and click next >> you will be asked if you want to save this connection to you web.config file so you can use it any time , name It “image_upload_conec” and click next >> then from the next window choose the “imageupload_emptable” table we created before check on the four fields we created before empid empname empimage empthumb >> then click on the advanced button and check on create delete update and delete button  >> then click next >> on the next window click finishThe designer will add this code to your page

asp:SqlDataSource runat=”server”

ConnectionString=”"

DeleteCommand=”DELETE FROM [imageupload_emptable] WHERE [empid] = @empid”

InsertCommand=”INSERT INTO [imageupload_emptable] ([empname], [empimage], [empthumb]) VALUES (@empname, @empimage, @empthumb)”

SelectCommand=”SELECT [empid], [empname], [empimage], [empthumb] FROM [imageupload_emptable]”

UpdateCommand=”UPDATE [imageupload_emptable] SET [empname] = @empname, [empimage] = @empimage, [empthumb] = @empthumb WHERE [empid] = @empid”>

Notice the connection string we choosed above and then the sql comannds for the CRUD (create update and delete) operations  then the parameters section ,also note that the designer didn’t mentioned the empid in the insert sql command and the insert parameters why?? Because it is an autoincrenebted field wich will be added automatically by the data base.

Creating the image upload form view rag a formview from the toolbox to the page >> from its task menu choose the sql data source we created above “image_upload_insert_datasource” >> then press “refresh schema ” to generate the item, insert and update templates of the formview automatically based on the sqldatasource fields,We will customize these templates to fulfil our needs but as a beginners it is a good start to have part of the work done by the vwd >> from the task menu choose the edit templates button >> then from the generated ddl  choose to diplay ”insert item template” >> we will find the formview insert item template look like this  Now we have to customize it because infront of the empimage and empthumb  there are two textboxes the vwd added this text boxes because it finds that these fields accept string values in the sqldatasource parameters ,the vwd don’t know that we will need to upload images and save the images names  to these fields in the data base >> we will remove the text boxes infront of empimage and empthumb >> and also remove the empthumb text itself because the user will upload only one image from the empimage field and the thumbnail will be generated and named dynamically >> aslo we will remove the cancel button because it will be an insert only page >> now drag fileupload control from the toolbox and drop it inside the formview insert template beside the empimage text chane its id to “image_upload_fileuploader”  >> then from the task menu choose “end template editing”  >>  last thing wich is very important  from the formview properties window find the “default mode” and change it to “insert”, this will make the formview open when the page load in the insert mode not the default read only mode >> now we have no more work to be done here

• here is the full codebehind page:
  

  ---

  ‘first declare the page level variables to store the image and thumbnail file path between
  ‘item inserting and item inserted events of the fromview to make sure that the file path
  ‘that is stored to the data base is the same that will be used as a filename for the uploaded image’we add the millisecond second and minute in the begining of image and thumbnail files names to be
  ‘sure that there won’t be duplicate files
  Dim image_namelarge As String = “~/empimages/” & _
  DateTime.Now.Millisecond.ToString & DateTime.Now.Second.ToString & DateTime.Now.Minute.ToString
  Dim image_namethumb As String = “~/empimages/” & “thumb” & _
  DateTime.Now.Millisecond.ToString & DateTime.Now.Second.ToString & DateTime.Now.Minute.ToString

  ---

  protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadEnd Sub

  ---

  Protected Sub FormView1_ItemInserting(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.FormViewInsertEventArgs) _
  Handles FormView1.ItemInserting’Here we first find our fileupload1 control that located inside the formview using the
  ‘findcontrol function then we then we cast it to a file upload type variable so we can access
  ‘its(proprieties)
  Dim fileuploader As FileUpload = DirectCast(FormView1.FindControl(“image_upload_fileuploader”) _
  , FileUpload)
  ‘then check if the user want to upload an image
  If fileuploader.HasFile Then
  ‘now we add the uploaded image extension to the autogenerated name
  image_namelarge = image_namelarge + Path.GetExtension(fileuploader.FileName)
  image_namethumb = image_namethumb + Path.GetExtension(fileuploader.FileName)
  Else
  ‘or store empty vlaue if the user didn’t uploaded any images
  image_namelarge = “”
  image_namethumb = “”
  End If  ‘ we inject the thumnail file path and the image file path as a parameters default values
  ‘ of our data sourceimage_upload_insert_datasource.InsertParameters(“empimage”).DefaultValue = image_namelarge
  image_upload_insert_datasource.InsertParameters(“empthumb”).DefaultValue = image_namethumb
  End Sub

  ---

  Protected Sub FormView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) Handles FormView1.ItemInserted
  ‘remember that the page level variables still have the last version of file paths used in
  ‘item inserting event above.
  ‘we can still use it here’Here we first find our fileupload1 control that located inside the formview using the
  ‘findcontrol function then we then we cast it to a file upload type variable so we can access
  ‘its(proprieties)
  Dim fileuploader As FileUpload = DirectCast(FormView1.FindControl(“image_upload_fileuploader”), _
  FileUpload)
  ‘check if the database insert is done by checking number of affected rows
  If e.AffectedRows > 0 Then
  ‘then check if the file uploader has file
  If fileuploader.HasFile Then
  ‘save the original image using the file upload save as method
  ‘also converting relative path to physical path using server.mappath function
  fileuploader.SaveAs(Server.MapPath(image_namelarge))
  Try’ Now resize the original image and overwrite the originalwith the resized
  imageresizer.ResizeImage(Server.MapPath(image_namelarge), _
  Server.MapPath(image_namethumb), 100)
  ‘then create thumbnail and save it also
  imageresizer.ResizeImage(Server.MapPath(image_namelarge), _
  Server.MapPath(image_namelarge), 500)
  Catch
  End TryEnd If’if every thing is ok hide the formview
  FormView1.Visible = False
  ‘inform the user that insert is done
  Panel2.Visible = True
  Label1.Text = “insert is done ”
  Else
  ‘if a problem happened also hide the form view
  FormView1.Visible = False
  ‘and inform the user to come back later ,sure not a good error handling
  ‘but error handling is not the issue here
  Panel2.Visible = True
  Label1.Text = “sorry, an error happend please try again later”End If
  End Sub

  ---

  Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton2.Click
  ‘if the user need to add another item we will just make the formview visible again
  ‘and data bind it to clear the text box.
  Panel2.Visible = False

  FormView1.Visible = True
  FormView1.DataBind()end subend class

• i will cotinue the update and delete pages in a few days

dr AHMED GALAL

ASP.NET FREELANCE DEVELOPER

dr.agalal@speakasp.net