Building Web Application Material - E-commerce by Maha K. Yacoub

Maha K. Yacoub

Building ASP.net Web Application E-commerce â&#x20AC;&#x201C; BIS Faculty

E-commerce Project Material 12/7/2010

Chapter 1: Create your Web Application Design Using Templates

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

How to create a web site using visual studio: You could a one of visual studios templates or you can download a template from the internet: a. Using Visual Studio templates : Follow the steps bellow:

Choosing your frame work Web for creating web app. using c# language

Using web forms

Write Your application Name

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

In this window where you choose the language you are going to work with, the framework, your web Application Name and its location.

Your

The page you are working on

To see both the html source and your graphic design

All your site pages

Design Your

Your Html design

Tools To create a page for one of the taps you created in the menu bar - check the steps bellow:

1-Go to your site master 2-Go to the menu bar list and create a one for a new page

3-right click with the mouse then chose AddContentPage E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

How to design the page to fill it with content: E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

One of the best ways is to create a table (design the cells in the shape you want your content to look like): This will be as shown below:

1-Click on table > drag it and drop it in the html source where you want it to be create

2-when you click on the design area below you will found the table you created

After adding the table, fill the cells with your content using the code or tool box on the left by dragging and dropping the tool in the place you want (in the code area or the html area) as shown below :

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

After you're done from creating your page, you can run it on the browser so you can see how it looks like by clicking on the debug button:

Debug button

After you return to Visual studio to continue working you have to stop the debugging button:

Debug button

Do the same for all pages to complete your siteď &#x160; E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

b. Downloading template from the internet : As shown below: 1- Search for a site to download templates using the internet, such as the following link : - http://www.freecsstemplates.org/ - http://www.oswd.org/ - http://www.openwebdesign.org/ - http://www.styleshout.com/ - http://www.freelayouts.com/ - http://globalnetpromotions.com/premium_template_gallery.htm 2- Download the template that you prefer. 3- Open Visual studio program 4- File 5- Open 6- Website (then chose the location of the web site template you had downloaded).

~~THE END OF CHAPTER ONE~~

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

Chapter 2: Creating a Data Base

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

In this section we are going to work with the Server Explorer area in the Visual Studio:

Creating a data base as shown below:

Active your connection with database

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

To create a new data base > right click on the DataConection > Create SQL Server Data Base

Connect with your SQL server

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

This is how it will look like when you click Add:

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

Open the tables > Select the table you created and Drag it and drop it is area

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

*You could continue your table to create an entire data base schema like the one below:

~~THE END OF CHAPTER 2~~

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

Chapter 3: Working With The Code

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

A code is used to connect the data in the database with a form to send or retrieved data and to check validity: 1- We need to create an html form to give the ability to the user to send data to the data base. - Creating a form will be as following : 1- As discussed before you will create a table so it will look like a form as it shows in the figure below(use the tool box can drag and drop to crate labels and textboxes):

use the tool box can drag and drop to crate labels and textboxes

Your form should look like that â&#x20AC;Ś create the form that suits.

>> if you run your web. App it will look like that in the browser :

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

So, when the customer fill in the text boxes and click on SEND the data should go to the database >> in the customer table you create in the database chapter >> to make that true, check the following steps:

Dabble click on the SEND button

Write down the code

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

Run your application and try to fill in the text box and press on the SAVE button:

If you return to the table you created in the data base u will find the new customer u added:

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

What if I want I want to see the added customers in my browser once I press on SAVE button: In a Grid (table): As shown in the following figure:

To do that, follow these steps: In the design page:

1.Add a ScriptManager from Data toolbar

2.Add a LinkDataSource

3.Add a grid (how to modify it check figures below)

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

To modify the grid so it gets connected with the data base: 1.Press on that small button

2.press on Confi.data Source

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

Chose the table you want to get contact with then click finish

2.Chose LinqDataSourse 1.Press on that small button

3.check the check boxes (padding , sorting)only.

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805

In the code area you have to add this line to your code:

Run your program and enjoy. ~~The End~~

E-Commerce. Creating Simple Web Application. Maha K. Yacoub For any questions please contact us on the face book Group: http://www.facebook.com/group.php?gid=105424632841805