Thursday, 31 August 2017

Shopping Website project in ASP.NET with source

Shopping Website project in ASP.NET with source

If you want to create a small website like a 'SHOPPING" website....

Here i'm going to show How to create a Static shopping cart website.......
Let's start......

create shopping website
Shopping Cart website in asp.net


...............................................START HERE.........................................
Step-1:
    open Visual Studio and create a website project and add a webform that name is "Default.aspx"

and write HTML code that are bellow....

Default.aspx   HTML CODE:




HTML CODE: Default.aspx     
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    <title>  CoderBaba shopping website</title>  </head>
<body>
    <form id="form1" runat="server">
    <div>
 <table align="center" Style= " margin-top:60px" cellpadding="19">
    <tr>
    <td>
        <asp:HyperLink ID="HyperLink1" runat="server" Font-Size ="Large" NavigateUrl="~/Default.aspx">HOME</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink2" runat="server" Font-Size="Large" NavigateUrl="~/AddProduct.aspx" >ADD PRODUCT</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink3" runat="server" Font-Size ="Large" NavigateUrl="~/ShowProduct.aspx">SHOW PRODUCT</asp:HyperLink>
    </td>
    </tr>
 </table>
 <hr />
 <h1 style="text-align :center; margin-top:70px;"> Welcome to MYSHOPPING.COM</h1>
    </div>
    </form>
</body>
</html>


STEP-2: Add a new webform rename it "AddProduct.aspx"

HTML CODE for AddProduct.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddProduct.aspx.cs" Inherits="AddProduct" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title> coderbaba Shopping site</title></head>
<body>
    <form id="form1" runat="server">
    <div>
    <!---Menu code here--->
    <table align="center" Style= " margin-top:60px" cellpadding="19">
    <tr>
    <td>
        <asp:HyperLink ID="HyperLink1" runat="server" Font-Size ="Large" NavigateUrl="~/Default.aspx">HOME</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink2" runat="server" Font-Size="Large" NavigateUrl="~/AddProduct.aspx" >ADD PRODUCT</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink3" runat="server" Font-Size ="Large" NavigateUrl="~/ShowProduct.aspx">SHOW PRODUCT</asp:HyperLink>
    
    </td>
    </tr>
    </table>
 <hr /><!---Menu code end here--->

 <table align="center" style="margin-top :40px; font-size :18px;" cellpadding="10">
 <tr>
 <td>
 Select Product
 </td>
 <td>  
     <asp:DropDownList ID="DropDownList1" runat="server" Font-Size ="Large" 
         AutoPostBack="True" Width="139px" 
         onselectedindexchanged="DropDownList1_SelectedIndexChanged">
         <asp:ListItem>---Select---</asp:ListItem>
         <asp:ListItem>Laptop</asp:ListItem>
         <asp:ListItem>Desktop</asp:ListItem>
         <asp:ListItem>Monitor</asp:ListItem>
         <asp:ListItem>Keyboard</asp:ListItem>
         <asp:ListItem>Mouse</asp:ListItem>
     </asp:DropDownList>
  </td>
 </tr>

 <tr>
 <td colspan="2" align="center">
     <asp:Image ID="Image1" runat="server" Width="150px" />
 </td> 
 </tr>

 <tr>
 <td colspan="2" align="center">
     <asp:Label ID="Label1" runat="server"  Font-Bold ="True"></asp:Label>
 </td>
  </tr>
 <tr>
  <td colspan="2" align="center">
     <asp:Button ID="Button1" runat="server" Text="ADD TO CART" onclick="Button1_Click" Visible="False" /> 
 </td>
 </tr>
 </table>
    
 </div>
  </form>
</body>
</html>

STEP-3 : ADDProduct.aspx.cs   C# code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class AddProduct : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {

        string[] price = { "", "35000", "23000", "5000", "700", "250" };
        Image1.ImageUrl = "pics/" + DropDownList1.Text + ".jpg";
        int i = DropDownList1.SelectedIndex;
        Label1.Text = "Rs." + price[i];
        Button1.Visible = true;

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (ItemAdded(DropDownList1.Text))
        {
            Response.Write("<script>alert('selected item is already added in cart')</script>");
            return;
        }
        Session["ctr"] = (int)Session["ctr"] + 1;
        Product proj = new Product(DropDownList1.Text, Image1.ImageUrl, Label1.Text);
        Session["p" + Session["ctr"]] = proj;
        Server.Transfer("Add.aspx");
    }
    bool ItemAdded(string name)
    {
        bool found = false;
        for (int c = 1; c <= (int)Session["ctr"]; c++)
        {
            Product p = (Product)Session["p" + c];
            if (name == p.name)
            {
                found = true;
                break;
            }
        }
        return found;

    }
    
}


Step-4 Add a new webform  rename it "Add.aspx" and write HTML code 



<body>
    <form id="form1" runat="server">
    <div>
    <table align="center" style="margin-top:60px" cellpadding="10"> 
      <tr>
       <td>
           <asp:HyperLink ID="HyperLink1" runat="server" Font-Size="Large" 
               NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
       </td>
       <td>
           <asp:HyperLink ID="HyperLink2" runat="server" Font-Size="Large" 
               NavigateUrl="~/AddProduct.aspx">Add Product</asp:HyperLink>
       </td>
       <td>
           <asp:HyperLink ID="HyperLink3" runat="server" Font-Size="Large" 
               NavigateUrl="~/ShowProduct.aspx">Show Product</asp:HyperLink>
       </td>
      </tr>
     </table>
     <hr />
     <h2 style='text-align:center;margin-top:100px'>Product added to the cart</h2>
    </div>
    </form>
</body>
</html>



STEP-5  add a Class file in your project and rename it "Product.cs" and write these code


product.cs file code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class Product
{
    public string name, image, price;
public Product(string na,string img,string pr)
{
        name = na;
        image = img;
        price = pr;
}
}


STEP-6 : add a new folder in your project and rename it "pics"
in the pics folder add 5 image (you can add many picture in this folder that you want) and rename each image like 'Desktop','Laptop', 'Keyboard','mouse', 'monitor'
that show in image below...




STEP -7 add a new webform rename it "ShowProduct.aspx" and write HTML code:

<body>
    <form id="form1" runat="server">
    <div>
    <table align="center" Style= " margin-top:60px" cellpadding="19">
    <tr>
    <td>
        <asp:HyperLink ID="HyperLink1" runat="server" Font-Size ="Large" NavigateUrl="~/Default.aspx">HOME</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink2" runat="server" Font-Size="Large" NavigateUrl="~/AddProduct.aspx" >ADD PRODUCT</asp:HyperLink>
    </td>
    <td>
    <asp:HyperLink ID="HyperLink3" runat="server" Font-Size ="Large" NavigateUrl="~/ShowProduct.aspx">SHOW PRODUCT</asp:HyperLink>
    
    </td>
    </tr>
    </table>
 <hr />

  <table align="center" cellpadding="10">
       <tr>
         <td>
             <asp:Button ID="Button1" runat="server" Text="&lt;&lt;" Width="60px" 
                 onclick="Button1_Click" Visible="False" />
         </td>
         <td>
             <asp:Button ID="Button2" runat="server" Text="&gt;&gt;" Width="60px" 
                 onclick="Button2_Click" Visible="False" />
         </td>
          <td>
              <asp:Label ID="Label4" runat="server"></asp:Label>
          </td>
       </tr>
     </table>

     <center style="margin-top:60px">
         <asp:Label ID="Label3" runat="server" Font-Names="Algerian" Font-Size="Large" Visible="False">No product in the Cart</asp:Label>
     </center>


     <table align="center" style="margin-top:50px;font-size:18px" cellpadding="10" runat="server" id="pd"> 
      <tr>
       <td>Product name</td>
       <td>
           <asp:Label ID="Label2" runat="server" Font-Size="Large" ForeColor="Blue"></asp:Label>
       </td>
      </tr>

      <tr>
       <td>Product photo</td>
       <td>
           <asp:Image ID="Image1" runat="server" Width="100px" />
       </td>
      </tr>

      <tr>
       <td>Product price</td>
       <td>
           <asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Size="Large" 
               ForeColor="Blue"></asp:Label>
       </td>
      </tr>
      </table>


    </div>
    </form>
</body>


STEP-8: add a Global.asax (global application file) rename it "Global.asax"

goto session_start method and write code


        Session["ctr"] = 0;  

    


STEP-9: write C# code for "ShowProduct.aspx"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ShowProduct : System.Web.UI.Page
{
    static int c;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Session["p1"] == null)
            {
                pd.Visible = false;
                Label3.Visible = true;
                return;
            }
            Button1.Visible = true;
            Button2.Visible = true;
            c = 1;
            showItem(c);
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (c == 1)
        {
            Response.Write("<script>alert('this is first product')</script>");
            return;
        }
        showItem(--c);
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        if (c == (int)Session["ctr"])
        {
            Response.Write("<script>alert('this is LAST product')</script>");
            return;
        }
        showItem(++c);
    }
    void showItem(int pn)
    {
        Label4.Text = pn + "of" + Session["ctr"];
        Product pd = (Product)Session["p" + pn];
        Label2.Text = pd.name;
        Image1.ImageUrl = pd.image;
        Label1.Text = pd.price;

    }
}


Now all pages code is complete and you can run you project........


you can watch my video that help you for creating of shopping website

How to Create Shopping cart website Watch full video on youtube




OUTPUT of Shopping cart:


Home page




AddDefault page


Show product page



 if you like my video and website then


LIKE   My Videos
                   Share my Videos
                                    SUBSCRIBE my YOUTUBE channel

                                 GOOD LUCK

10 comments:

  1. Thank you for helping
    Much appreciated.
    Good for Basic learning to create

    ReplyDelete
  2. I read your article and it's very useful for and keep it up to continue also please help me for all in one shopping app coding

    ReplyDelete
  3. Nice sir it's very helpful to my project...

    ReplyDelete
  4. Thank you for your professional represented project.

    ReplyDelete
  5. can you help me calculate total ?

    ReplyDelete
  6. sir will it work visual studio 2019

    ReplyDelete

Popular Posts