March 30, 2020
Create a webshop with Asp.Net – Part 1

Create a webshop with Asp.Net – Part 1


Hey guys, Welcome to the first in a new series
of ASP.Net tutorials Apparently a lot of you guys really enjoyed my
previous Asp.Net tutorials so I figured.Hey, why
not do a new one? New and improved. So that’s where this series
comes from. Welcome to ‘Build your own
webshop with Asp.Net’ In this series, I will show you how you can
build your own webshop, like the one you see
in front of you. This site contains static (e.g. Non-changing)
pages and dynamic pages, such as this webshop. Since we’re going to work a lot with database
data, you will also learn how to build a
relational database and you will also build your own CMS or
Content Management System. A Content Management System is a system
that allows you to manipulate the data base, from within an application or website. For example. Let’s say this website owner is
having a sale. Currently, Brake discs cost 150 Pounds. (£) if I want, I can change this price from within my
website As you can see, the data has been updated
without having to update the database directly. In addition, this site also features login and
registration functionality so that users can create their own accounts. Once a user is logged in, he can use that
account to purchase items from the store. I’m going to purchase 5 Shock Absorbers, and then I can review my current and previous
orders in my shopping cart. and if I so desire, I can also delete items or modify the amount of ordered items in my
shopping cart before checking out. That’s enough for introductions I’m sure you’re eager to get going.
So.let’s.start. with lesson 1 In this tutorial, I am going to show you how to
build a Master Page. A Master Page is
essentially a design template for a website. You basically create a single Master Page, add
some Html and CSS style to it and then link it
to other pages. These pages will have the exact same design
as your Master Page There are certain advantages to using a Master
Page such as maintainability if you would need to update something you
need it to update it only on one place There is also less need for code or content in
linked pages The only code/content that you need to write in
linked pages is the data in the content area is the content in this white area, known as the
‘content’ area so there’s no need to design each page
individually. You can just link a page to a
Masterpage and then type in seperate content for each
page. In short: Masterpages provide the design,
linked pages provide the content. Before we get designing, let’s have a look at
the design that we’re going to be building. if you have a keen eye for webdesign, you’ll
notice that this design consists of 3 areas The banner up top. The navigation bar below it. and the content pane below it. You can also add a footer or sidebar. For these
lessons, we’ll stick to these 3 areas. One important thing to notice is that this gray
area is outside of a ‘wrapper’. Everything in colour is
inside the ‘wrapper’. A wrapper is basically a
container that contains your actual webdesign.
Everything outside of it is just ‘filler’. Modern browsers make smart use of wrappers
by removing the gray area when a user resizes his or her’s browser
window The browser automatically focuses on the
items within the wrapper The same is true for Mobile devices such as
Smartphones and/or tablets These automatically crop out everything that is
not within a wrapper I made an abstract drawing of the website in
Ms Paint…Please don’t laugh To sum up: Banner : top blue box Navigation bar: Second blue box Content Pane: Red box Remember: the gray areas get cropped out
whenever a browser window cannot display the
whole screen That’s the theory. Now let’s go and put it in
action Let’s get started. Open up Visual Studio and
select Menu ->New ->Website Make sure that you select Visual C# in the
Installed Templates and select an Asp.Net Empty Website, and give it a fitting name. I’ll call mine ‘Garage Manager’. This will generate an empty website project for
us with a web.config file. Ignore it for now and right-click your solution and select add new item and then look for the MasterPage object and just leave its name to MasterPage.Master This will generate an empty HTML webpage in
which we can define the structure of our
MasterPage First, let’s clean up a little bit Remove everything after ‘Doctype html’ it is no longer needed. it used to be a standard
once but no longer. Between the html tags, delete everything but
‘html’ Now we’re going to create the four elements;
Wrapper, navigation bar, banner and content. using HTML

tags Make a bit of room between the opening

andtags so that we can place our

tags here. Remember: All other

elements are placed
between the ‘wrapper’ Create a new

tag and add an ‘id’ property set its name to ‘wrapper’ Giving HTML elements id’s will make it easy to
style them with CSS later. Within the wrapper, create 3 new

tags and set their id’s to ‘banner’ ‘navigation’ and ‘content’ Make sure to place the
‘ tags between the content

tags. This is quite
important so make sure you don’t forget. As you will see later in this lesson, the only
place where we can put content or data in a
linked page is between thetags.
All other areas are off-limits. Whenever we run a linked page in a browser, the
browser will display the linked Master Page and will replace the contentplaceholder tags by
whatever data or content is in the linked page. We want that content to be placed within the
content

tags so that’s why we need to place the content
placeholders between the content

tags. Let’s add the links to other pages in the
Navigation div. Expand it, Add an Unordered List (

    ), set its id to ‘nav’ Add 4 List elements (

  • ) within the
      tags Place an Asp:Hyperlink control betwean each

    • element. Update the Hyperlinks’ names: Set the first one
      to ‘Webshop’, the second one to ‘About us’, the third one to ‘Reports’ , and the last one to ‘management’. We will create these pages over the course of
      future lessons. Today, we’ll create the ‘about
      page’. if you click the design button in the bottom left corner of the screen you will see a preview of your MasterPage. As
      you can see it doesn’t look like much yet that’s because we haven’t added any style with
      CSS yet, nor have we added any images Let’s add a bit of colour by adding an image. If you want to use the same images as the ones
      that I used in this project look for the ‘StarterPack’ download in the
      description below this video. Download and extract the folder in the .zip, then
      add the folder by dragging and dropping it on
      your solution explorer. You can use your own images if you want. Next, drag and drop an image control between the banner tags Expand its properties (F4) and look for the
      ‘ImageUrl’ property Open it by clicking the 3 ellipses (…) and select the image ‘Images/BannerCar.jpg’ This is the bare-bones structure of your website. Now look for the width property and set it to ‘100%’ this’ll make sure that the image takes up the full
      width of the browser window, no matter how
      large or small the window is. This is the bare-bones structure of your website. Let’s give it a bit of style by using CSS. Right-click your solution and select new folder and call it ‘styles’. In this folder, we’re going to keep our CSS or
      ‘Cascading style sheets’ which will be responsible for adding style to our
      website. Style: Stuff like element width and height,
      borders, background colors, padding and
      margins etc… Right-click the Styles folder, select ‘Add new
      Item’ and look for the Stylesheet object, leave its
      name to ‘Stylesheet.css’ We can give some style to the

      elements
      by typing in their id names preceded by a Hashtag (e.g. #wrapper) #wrapper #banner #navigation add one for #nav as well and #content I will be writing down several lines of CSS code
      now, Make sure to copy everything that I write. Don’t
      worry if there is something which you do not
      understand I will explain the most important lines in a few
      minutes That should do it. Make sure to pause and
      rewind the video as often as is necessary to make sure that you
      have the same lines as I do. I’ll briefly explain the most important lines. Let’s start at the top:The lines between body set
      the font family, size and colour for all text in the
      website.. As well as set the background for the whole
      page to ‘Lavender’ (Line 6) Line 11: Width: 1100px;
      Gives the wrapper a width of 1100 pixels. Margin: auto (Line 12) centres an element in the
      centre of a parent container (The whole browser
      window in this case) In human language: Margin: auto sets the
      wrapper in the center of the screen Padding-bottom: 20px (Line 13).
      This puts 20 pixels between the last line of
      content in a container and its border. November which makes sure that the entire
      beach is love and the court Background-color: white (Line 14)
      This provides a white content area on top of a
      Lavender (body) background Gradient colour (Line 25)
      Let’s you display smooth transitions between
      two or more specified colours. Display: block (Line 30)
      Makes links appear as squares (like

      )
      instead of lines (Line 41) Float: left makes the links float
      sideways of each other, starting from the left A Float: right is also available, if you so desire. (Line 44) Text-Transform: Uppercase: Set all
      links to Uppercase Last but not least, I added a small white border
      to the left of each link. As you have probably noticed, clicked links tend
      to have a different design than unclicked links We don’t want that in this website. These lines make sure that clicked links retain
      their default design. This line will provide a white background for the
      link that a user is currently hovering their mouse
      cursor over Min-height:400 px. This makes sure that there is
      always a white wrapper visible, even if there is
      no content on the page. One last CSS trick which I’d like to show you is the use of rounded corners As you can see in my example, the corners of my wrapper appear to be rounded instead of rectangular to get this effect, head back to your .css file and add the following lines to your wrapper class. These 3 lines basically each do the same thing: They round off the corners of a container.
      (HTML 5) The more pixels you add to these css elements, the more pronounced the curving will be. The reason why we write down the same thing 3 times is becouse some browsers
      …looking at you Internet Explorer… are not familiar with these lines yet. In order to get the highest probability on success, we add three lines instead of one. area of entity that the beach to test his years as the nets at the turn of the physically sure you that if you were to open up to the currency is To link a CSS file to a Master Page Open up your master page and add a tag between the

      tags. set its ‘rel’ property to stylesheet. its ‘href’
      property to ‘Styles/Stylesheet.css’ and its type property to ‘text/css’Refresh your design view, and you’ll see that your Master Page has been updated with CSS code. Add a title for good measure as well. You have now built a fully functioning Master
      Page. Hooray! A last thing to discuss are the Asp PlaceHolder
      tags. As mentioned before; Whenever you link a webpage to this masterpage, it will replace the ContentPlaceHolders with the
      data present in the linked webpage. Add a new folder to your solution and call it
      ‘Pages’ and within that folder, create a new Web Form Call it About.aspx and make sure the ‘Select
      MasterPage’ checkbox is checked. In the MasterPage, Click the ‘About’ link and in its properties set the navigate url to your newly created ‘About’
      page You’ll notice that this page has the same design
      as the MasterPage but you can’t edit anything
      outside of the contentplaceholders. To sum up: Masterpages provide the design,
      Linked pages provide the content. Try typing in some random content. I’ll type in one of my favorite quotes. To test it out: Right-click your about page and
      select ‘Set As Start Page’. This will make the about page the Home page when we run this project. And as you can see, everything is working we have built a basic Masterpage with a basic design By now, you should have learned how to build your own MasterPages and link them to webpages. So I guess that concludes our lesson for today.
      As always, thank you for watching.
      If you have any questions feel free to ask me them in the comment section or discuss them on the Forums. A link to the forums can be found in the description below this video. So once again, thank you for watching and I hope to see you again in our next lesson in which I will show you how to build a relational SQL Database.

29 thoughts on “Create a webshop with Asp.Net – Part 1

  1. i like the tutorial! can you make an mvc tutorial? im a student, and i couldnt find a decent asp.net mvc tutorial here (kudvenkat's is fine but its so long and boring, questpond's is incomplete)

  2. Hey michiel
    I have one question. In cartModel.cs you made a function named MarkOrderAsPaid. Can u please tell me how to use that function?
    Reply soon

  3. When I open in the browser i get error

    This type of page is not served.

    Description: The type of page you have requested is
    not served because it has been explicitly forbidden.  The extension
    '.master' may be incorrect.   Please review the URL below and make sure
    that it is spelled correctly.

    Requested URL: /VAuto/MasterPage.master

  4. Michiel
    Really happy for all your tutorials and presentations is easy to hear and i hope to see more tutorials from you. I wish you all the best.

  5. Hello Thank you for your presentation. I followed all the steps with very careful attention but I get a weird looking navigation bar. can you help?

  6. Hi Michiel, I really like  all your tutorials .  I follow your tutorial  Create a webshop with ASP.net. The same code and the same step I followed but  my  website is not display like you instead I got  in the vertical  columns instead horizontal. How do I fix it?. Web shop.About us ReportsManagement.ThanksSam

  7. I have visual studio 2017, what should I select. I'm only seeing ASP.NET Core Web Application AND ASP.NET Web Application (.Net Framework)? Help asap

  8. hi,I tried to do the same work that you had done in css but i could'nt see the design in the navigation bar (the color) am using visual studio 2012

  9. how to apply full join using session to go another page and also Fatch database data in datalist in asp. net

  10. How to compare system time to a specific time. I want to desable asp.net button after 6.00 pm and automatically enable after next day morning 6.00 am automatically in my website

  11. Really love this tutorial keep up the good work michiel xD.
    Really help a lot for my school project :>

Leave a Reply

Your email address will not be published. Required fields are marked *