25 Best WordPress Themes for Cafes (2017)

Are you looking for best WordPress themes for cafes? There are so many great WordPress themes out there which makes it difficult to find the perfect theme for your cafe or restaurant business. In this article, we have hand-picked some of the best WordPress themes… Read More »

The post 25 Best WordPress Themes for Cafes (2017) appeared first on WPBeginner.

Are you looking for best WordPress themes for cafes? There are so many great WordPress themes out there which makes it difficult to find the perfect theme for your cafe or restaurant business. In this article, we have hand-picked some of the best WordPress themes for cafes, coffee shops, and restaurants.

Best WordPress themes for cafes

How to Build a Cafe Website Using WordPress?

If you are just starting out, then make sure that you choose the right platform to build your cafe website. Self-hosted WordPress.org site allows you to take full advantage of all the powerful features of WordPress.

Next, you will need to sign up for a WordPress hosting account. All websites need hosting. It is like your website’s home on the internet.

You will also need a domain name. It will be your website’s address on the internet and what your users will type in their browser to reach your website (example, wpbeginner.com or google.com).

We recommend using Bluehost or SiteGround. They are one of the largest hosting companies in the world and an official WordPress hosting partner.

Once you have signed up for a hosting account, you are now ready to install WordPress. Follow the instructions in our step by step guide on how to start a WordPress blog, and you will be up and running in minutes.

After installing WordPress, you can easily change your WordPress theme to the ones from our expert pick below.

Need help with installing theme? Check out our beginner’s guide on how to install a WordPress theme.

Having said that, let’s take a look at some of the best WordPress themes for cafes.

1. CafeHouse

CafeHouse

CafeHouse is a WordPress theme designed specifically for cafes, coffee shops, and restaurants. It has custom page templates for reservation form, food menu, contact form, blog, and full width page.

Theme homepage features an easily customizable slider on top, followed by a welcome message, and featured pages. It has custom widgets for social media integration and a top widget to display restaurant open hours.

2. Cafe Pro

Cafe Pro

Built on top of powerful Genesis framework, Cafe Pro is a stylish WordPress theme for cafes and restaurants. The homepage layout is fully widgetized with 4 widget areas, allowing you to just drag and drop widgets to build your homepage.

It has beautiful parallax background support and templates for menu and booking form pages. It also supports custom headers, accent colors, social menu, and live theme customization.

3. Downtown

Downtown

Downtown is a multi-purpose WordPress theme for cafes, coffee shops, restaurants, and bars. It comes with built-in sections for services, testimonials, team members, calendar, etc.

Inside you will find templates for reservation form, a filterable menu, and recipe pages. It also includes Google Maps support, which allows you to easily show your cafe’s location on the map.

4. Molino

Molino

Molino is another beautiful theme for a cute coffee shop, restaurant, or cafe website. It has a large full screen background image on the homepage with welcome message and a call to action button. The homepage slider is available in three different styles to choose from.

Inside you will also find a restaurant menu management system, testimonials, photo galleries, Google Maps, contact form, etc. It has tons of shortcodes, multiple layouts, custom widgets and flexible customization options.

5. Creativo

Creativo

Creativo is a multi-purpose WordPress theme that comes with multiple ready to use templates including one for restaurants and cafes. You can install this demo with one click and then just replace the content with your own.

Creativo is super flexible and has multiple page templates, custom widgets, and layout choices. It ships with pre-packaged plugins like sliders, page builder, and even a live chat plugin.

6. Igloo

Igloo

Igloo is another great option for a WordPress theme for cafes, coffee shops, bakeries, etc. It has a built-in menu management system allowing you to easily add and update daily items. The homepage features a beautiful slider with a call to action button.

Want to showcase customer reviews? Igloo has a built-in section to add testimonials. You can also add your own custom logo, change colors, and customize it to make it uniquely yours.

7. Highend

Highend

Highend is a highly flexible WordPress multipurpose theme. It allows you to easily import ready to use layouts for different kind of websites including a cafe/coffee shop. After importing the demo layout you can just replace the content with your own and you will be good to go.

It comes with a powerful page builder, slider, multiple templates and styles. It also supports WooCommerce out of the box so you can easily add an online store to your cafe website.

8. Cuisinier

Cuisinier

Cuisiner is a unique WordPress theme for cafes and restaurants. Its most noticeable features include a large navigation menu with icons, a powerful slider on the homepage, and easy to setup layout.

It has built-in sections to add recipes, testimonials, staff members, events, etc. The recipe templates display your recipes in a beautiful grid layout. All theme options are easy to set up using theme options panel.

9. Maniva

Maniva

Maniva is a modern and stylish WordPress theme for restaurants and cafes. It supports WooCommerce out of the box and can be used to build multi-lingual websites using WPML.

It features large homepage slider, beautiful menu styles, easy contact forms for reservations. It comes with a powerful shortcode manager, page builder plugin, and several homepage layouts.

10. Bistro

Bistro

Bistro is an elegant free WordPress theme for cafes and restaurants. It supports free restaurant plugin to create food menus. The homepage features a large header image with call to action, which is followed by your most important content. Bistro can be easily customized using live theme customizer.

11. Delicio

Delicio

Delicio is an excellent WordPress theme for cafes and restaurants. It has an easy to setup homepage layout that features a large full screen slider followed by a welcome message and restaurant specials.

It comes with complete menu management, Google Maps, staff profiles, and social menus. It has a beautifully designed reservation form with a complete restaurant booking management system.

12. Mise En Place

Mise En Place

Inspired by French culinary practices, Mise En Place is a sophisticated WordPress theme for restaurants, cafes, and bakeries. It has a built-in menu management system with optional thumbnail lightbox popup support.

It allows you to easily create and customize layouts using drag and drop. Packed inside are flexible customization options, Google Fonts, custom logo, and full WooCommerce support.

13. Bettaso

Bettaso

Bettaso is a powerful WordPress theme for cafes and gourmet restaurants. It has a built-in appointment manager and its own table booking system allowing you to take online reservations.

It comes with a drag and drop builder and easy to add content modules. There are several style and layout choices to choose from and you will find tons of custom widgets, shortcodes, and flexible customization options inside.

14. Seasons

Seasons

Seasons is an stylish and unique WordPress cafe theme. It features a beautiful slider on the homepage and a widgetized layout. It has its own custom theme options panel that allows you to quickly and easily setup theme.

The menu management system is fully widgetized allowing you to quickly add or edit menu items for your cafe/restaurant.

15. Bakes and Cakes

Bakes and Cakes

Need a cute and simple WordPress theme for your bakery or cafe? Check out Bakes and Cakes. It is a beautifully designed free WordPress theme with built-in sections for testimonials, team members, banners, and call to action.

It is WooCommerce ready and can be easily translated into other languages. Theme setup is quite simple and easy with live theme customizer support.

16. Flavour

Flavour

Flavour is a gorgeously designed theme for restaurants and cafes. The home page features a beautiful HTML5 slider with animations. It has beautiful templates for food menu, reservation form, and photo galleries.

It comes with a powerful drag and drop page builder that allows you to easily create your own page layouts. Theme settings are super flexible and allow you to easily use your own colors, logo, header images, etc.

17. Restaurant

Restaurant

Restaurant is a stylish and modern looking WordPress theme. The homepage features a large fullscreen video background, parallax effect, and multiple layout choices. It has ready to use templates for your about, archives, and blog pages.

It also includes a drag and drop page builder, portfolio and testimonials sections, contact form, and helpful customization options.

18. Umami

Umami

Inspired by Japanese culinary traditions, Umami is a beautiful WordPress theme for cafes and restaurants. It has built-in menu management system, staff profiles and services section, and full WooCommerce support.

Using a full screen design, it features your business location and phone number in a sticky sidebar. It allows you to easily add unique background images to each page on your site.

19. Baseline

Baseline

Baseline is a WordPress multi-purpose theme designed to beautifully showcase images and text. It looks stunningly beautiful on all devices and features a simplistic approach to design.

It supports custom headers and comes with beautiful layouts for your galleries. If you intend to add a lot of text and images to your cafe website then Baseline can be a great choice for that.

20. Salt and Pepper

Salt and Pepper

Salt and Pepper is a WordPress theme for food related websites. It has a beautiful recipes section allowing to easily publish recipes on your website. Also included are beautiful templates to display those recipes with category based filters.

It ships with powerful page builder and slider plugins and is tested to work with WordPress multilingual plugins.

21. Restaurant and Cafe

Restaurant and Cafe

Restaurant and Cafe is a free WordPress theme featuring an elegant design and easy customization options. The homepage layout is made of different sections for testimonials, services, about, features, food menu, and restaurant location. It is WooCommerce ready and vigorously tested with popular WordPress plugins.

22. Locales

Locales

Want to build your own directory of cafes and restaurants in your neighborhood? Locales is a WordPress directory theme that allows you to easily create local business directory. It allows your users to submit listings and makes content creation easier for you.

It has a one click demo install which allows you to quickly get started. You will also get a drag and drop page builder plugin to create your own page layouts if needed.

23. Brasserie

Brasserie

Brasserie is another elegantly designed free WordPress theme for cafes. It features a beautiful full width header on the homepage followed by the featured content area.

It is WooCommerce ready and comes with multiple layouts, unlimited colors, custom header and background, and Google Fonts support.

24. Resto

Resto

Resto is a beautiful and flexible WordPress theme for cafes, restaurants, coffee shops, etc. It has an easy to use menu management system allowing you to easily update restaurant menu with daily specials. The homepage layout is fully widgetized and can be setup by adding custom content widgets.

Resto also has an event management system to announce latest happenings at your venue. It is easy to customize with custom header, background, unlimited colors, and multiple page templates.

25. Vienna

Vienna

Need powerful combination of features and great design? Check out Vienna. This beautiful WordPress theme comes with easy menu management, reservation form, events, testimonials, and gorgeous image galleries.

Vienna is shipped with a page builder plugin and has tons of custom widgets for social media and content discovery features. This allows you to create dynamic pages with highly engaging content.

That’s all for now.

We hope this article helped you find the best WordPress theme for cafes, restaurants, and coffee shops. You may also want to see our step by step WordPress SEO guide for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 25 Best WordPress Themes for Cafes (2017) appeared first on WPBeginner.

How to Let Users Filter Posts and Pages in WordPress

Do you want to allow users to filter posts and pages on your WordPress site? Recently, one of our users asked us how to add filters to their WordPress site allowing users to filter posts by category, tags, post types, etc. In this article, we… Read More »

The post How to Let Users Filter Posts and Pages in WordPress appeared first on WPBeginner.

Do you want to allow users to filter posts and pages on your WordPress site? Recently, one of our users asked us how to add filters to their WordPress site allowing users to filter posts by category, tags, post types, etc. In this article, we will show you how to let users filter posts and pages in WordPress.

How to Let Users Filter Posts and Pages in WordPress

Why Let Users Filter Posts and Pages in WordPress?

By default, WordPress comes with categories and tags as a way for you to sort content into topics and for your users to easily find it.

However, users can only view one category, tag, or archive page at a time and it will only show one post type.

What if you wanted users to be able to filter content in more than one category or tag? How about allowing users to view posts, pages, and custom post types at the same time?

This kind of filtering can be particularly helpful when you have a lot of content, and you want users to filter it according to their own preferences.

Having said that, let’s take a look at how to easily let users filter posts and pages in WordPress.

Allowing Users to Easily Filter Posts and Pages

First thing you need to do is install and activate the Search & Filter plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Search & Filter to your WordPress admin bar. Clicking on it will take you to the plugin’s usage page with detailed documentation on how to use the plugin.

Search & Filter plugin documentation

Search & Filter plugin comes with a shortcode which accepts different parameters to display the filtering options. You can use this shortcode in a post, page, or inside a text widget.

[searchandfilter fields="search,category,post_tag"]

You can also use the shortcode as a template tag in your WordPress theme files like this:

<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?>

This will display the filtering options with search, category, and tags fields.

Filter posts by category and tags

By default the plugin accepts search, taxonomy, post_type, and post_date as fields.

Let’s take a look at another example. This time we will include category, tags, post types, and date fields.

You will need to use the shortcode like this:

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Here is how it would look:

Adding all fields to the filter

Now instead of using drop down select field, you can also use checkboxes and add labels for each field. To do that, you will need to add two more parameters to the shortcode.

If you use a separate page to display your blog posts, then you can add this shortcode to the page.

[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

Allowing users to select multiple items in the filter using checkbox

If you are using multiple fields, types, and headings, then you need to make sure that items are in the same order for each parameter.

Let’s see another example. This time we are adding category, tags, and post type fields with different headings and form field types.

[searchandfilter headings="Post type, Category, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

This is how it would appear on your site:

Advance filtering with headings and different field types

Please refer to plugin’s documentation page for more ways to use the shortcode.

You can also use these shortcodes inside a text widget. If the shortcode doesn’t work in your text widget, then please see our guide on how to use shortcodes in your WordPress sidebar widgets.

We hope this article helped you learn how to let users filter posts and pages in WordPress. You may also want to see these actionable tips to drive traffic to your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Let Users Filter Posts and Pages in WordPress appeared first on WPBeginner.

40+ Most Notable Big Name Brands that are Using WordPress

Do you want to know which big name brands are using WordPress? One of the common misconceptions about WordPress is that since it is open source, it may not be good enough for big brands. To disprove this myth, we have created a list of… Read More »

The post 40+ Most Notable Big Name Brands that are Using WordPress appeared first on WPBeginner.

Do you want to know which big name brands are using WordPress? One of the common misconceptions about WordPress is that since it is open source, it may not be good enough for big brands. To disprove this myth, we have created a list of most notable big name brands that are using WordPress on their websites.

Top Brands Using WordPress

1. TechCrunch

2. The New Yorker

The New Yorker

3. BBC America

BBC America

4. Bloomberg Professional

Bloomberg Professional

5. The Official Star Wars Blog

The Official Star Wars Blog

6. Variety

Variety

7. Sony Music

8. MTV News

MTV News

9. Beyonce

Beyonce

10. PlayStation.Blog

PlayStation.Blog

11. Sweden’s Official Website

Sweden

12. Microsoft News Center

Microsoft News Center

13. Boingo

Boingo

14. Bata

Bata

15. cPanel Blog

cPanel Blog

16. Quartz

Quartz

17. Usain Bolt

Usain Bolt

18. The Walt Disney Company

The Walt Disney Company

19. Time Inc.

Time Inc

20. Facebook Newsroom

Facebook Newsroom

21. The New York Times Company

The New York Times Company

22. Marks & Spencer for Business

Marks & Spencer for Business

23. The Official Rackspace Blog

Official Rackspace Blog

24. ExpressJet Blog

ExpressJet Blog

25. Inside BlackBerry

Inside BlackBerry

26. Rotary Means Business – Rotary Club

Rotary Means Business - Rotary Club

27. The Rolling Stones

Rolling Stone

28. The Walking Dead – AMC

The Walking Dead - AMC

29. The Mozilla Blog

The Mozilla Blog

30. The Wall Street Journal Law Blog

The Wall Street Journal Law Blog

31. Will Wheaton

Will Wheaton

32. Snoop Dogg

Snoop Dogg

33. SAP News Center

SAP News Center

34. Wolverine Worldwide

Wolverine Worldwide

35. Reuters Blogs

Reuters Blogs

36. Katy Perry

Katy Perry

37. Vogue India

Vogue India

38. Mercedes-Benz

Mercedes-Benz

39. Staples Canda Blog

Staples Canada Blog

40. Harvard Gazette Onine

Harvard Gazette Online

41. Pulse by Target

Pulse by Target

How to Build Your Own WordPress Site?

Looking at all these popular brands using WordPress, you may be wondering how you can start your own WordPress website.

First you need to make sure that you are choosing the right platform. A self-hosted WordPress.org site gives you the freedom to build truly powerful websites with all the features of WordPress.

See our guide on the difference between WordPress.com and WordPress.org.

WordPress itself is free but you will need WordPress hosting and a domain name which will cost you money. Check out our break down of how much does it really cost to build a WordPress website.

Once you are ready, head over to our complete step by step guide on how to start a WordPress blog. Follow the instructions, and you will be up and running in no time.

We hope this article helped you learn about the big name brands that are using WordPress. You may also want to see our step by step guide on how to start an online store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 40+ Most Notable Big Name Brands that are Using WordPress appeared first on WPBeginner.

40+ Most Notable Big Name Brands that are Using WordPress

Do you want to know which big name brands are using WordPress? One of the common misconceptions about WordPress is that since it is open source, it may not be good enough for big brands. To disprove this myth, we have created a list of… Read More »

The post 40+ Most Notable Big Name Brands that are Using WordPress appeared first on WPBeginner.

Do you want to know which big name brands are using WordPress? One of the common misconceptions about WordPress is that since it is open source, it may not be good enough for big brands. To disprove this myth, we have created a list of most notable big name brands that are using WordPress on their websites.

Top Brands Using WordPress

1. TechCrunch

2. The New Yorker

The New Yorker

3. BBC America

BBC America

4. Bloomberg Professional

Bloomberg Professional

5. The Official Star Wars Blog

The Official Star Wars Blog

6. Variety

Variety

7. Sony Music

8. MTV News

MTV News

9. Beyonce

Beyonce

10. PlayStation.Blog

PlayStation.Blog

11. Sweden’s Official Website

Sweden

12. Microsoft News Center

Microsoft News Center

13. Boingo

Boingo

14. Bata

Bata

15. cPanel Blog

cPanel Blog

16. Quartz

Quartz

17. Usain Bolt

Usain Bolt

18. The Walt Disney Company

The Walt Disney Company

19. Time Inc.

Time Inc

20. Facebook Newsroom

Facebook Newsroom

21. The New York Times Company

The New York Times Company

22. Marks & Spencer for Business

Marks & Spencer for Business

23. The Official Rackspace Blog

Official Rackspace Blog

24. ExpressJet Blog

ExpressJet Blog

25. Inside BlackBerry

Inside BlackBerry

26. Rotary Means Business – Rotary Club

Rotary Means Business - Rotary Club

27. The Rolling Stones

Rolling Stone

28. The Walking Dead – AMC

The Walking Dead - AMC

29. The Mozilla Blog

The Mozilla Blog

30. The Wall Street Journal Law Blog

The Wall Street Journal Law Blog

31. Will Wheaton

Will Wheaton

32. Snoop Dogg

Snoop Dogg

33. SAP News Center

SAP News Center

34. Wolverine Worldwide

Wolverine Worldwide

35. Reuters Blogs

Reuters Blogs

36. Katy Perry

Katy Perry

37. Vogue India

Vogue India

38. Mercedes-Benz

Mercedes-Benz

39. Staples Canda Blog

Staples Canada Blog

40. Harvard Gazette Onine

Harvard Gazette Online

41. Pulse by Target

Pulse by Target

How to Build Your Own WordPress Site?

Looking at all these popular brands using WordPress, you may be wondering how you can start your own WordPress website.

First you need to make sure that you are choosing the right platform. A self-hosted WordPress.org site gives you the freedom to build truly powerful websites with all the features of WordPress.

See our guide on the difference between WordPress.com and WordPress.org.

WordPress itself is free but you will need WordPress hosting and a domain name which will cost you money. Check out our break down of how much does it really cost to build a WordPress website.

Once you are ready, head over to our complete step by step guide on how to start a WordPress blog. Follow the instructions, and you will be up and running in no time.

We hope this article helped you learn about the big name brands that are using WordPress. You may also want to see our step by step guide on how to start an online store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 40+ Most Notable Big Name Brands that are Using WordPress appeared first on WPBeginner.

Penny Pinching in the Cloud: Lift and Shift vs App Services – When a VM in the Cloud isn’t what you want

I got an interesting question today. This is actually an extremely common one so I thought I’d take a bit to explore it. It’s worth noting that I don’t know the result of this blog post. That is, I don’t know if I’ll be right or not, and I’m not going to edit it. Let’s see how this goes!

The individual emailed and said they were new to Azure and said:

Question for you.  (and we may have made a mistake – some opinions and help needed)
A month or so ago, we setup a full up Win2016 server on Azure, with the idea that it would host a SQL server as well two IIS web sites

Long story short, they were mired in the setup of IIS on Win2k6, messing with ports, yada yada yada. ‘

All they wanted was:

  • The ability to right-click publish from Visual Studio for two sites.
  • Management of a SQL Database from SQL Management Studio.

This is a classic “lift and shift” story. Someone has a VM locally or under their desk or in hosting, so they figure they’ll move it to the cloud. They LIFT the site as a Virtual Machine and SHIFT it to the cloud.

For many, this is a totally reasonable and logical thing to do. If you did this and things work for you, fab, and congrats. However, if, at this point, you’re finding the whole “Cloud” thing to be underwhelming, it’s likely because you’re not really using the cloud, you’ve just moved a VM into a giant host. You still have to feed and water the VM and deal with its incessant needs. This is likely NOT what you wanted to do. You just want your app running.

Making a VM to do Everything

If I go into Azure and make a new Virtual Machine (Linux or Windows) it’s important to remember that I’m now responsible for giving that VM a loving home and a place to poop. Just making sure you’re still reading.

NOTE: If you’re making a Windows VM and you already have a Windows license you can save like 40%, so be aware of that, but I’ll assume they didn’t have a license.

You can check out the Pricing Calculator if you like, but I’ll just go and actually setup the VM and see what the Azure Portal says. Note that it’s going to need to be beefy enough for two websites AND a SQL Server, per the requirements from before.

Pricing for VMs in Azure

For a SQL Server and two sites I might want the second or third choice here, which isn’t too bad given they have SSDs and lots of RAM. But again, you’re responsible for them. Not to mention you have ONE VM so your web server and SQL Server Database are living on that one machine. Anything fails and it’s over. You’re also possibly giving up perf as you’re sharing resources.

App Service Plans with Web Sites/Apps and SQL Azure Server

An “App Service Plan” on Azure is a fancy word for “A VM you don’t need to worry about.” You can host as many Web Apps, Mobile Apps/Backends, Logic Apps and stuff in one as you like, barring perf or memory issues. I have between 19 and 20 small websites in one Small App Service Plan. So, to be clear, you put n number of App Services as you’d like into one App Service Plan.

When you check out the pricing tier for an App Service Plan, be sure to View All and really explore and think about your options. Some includes support for custom domains and SSL, others have 50 backups a day, or support BizTalk Services, etc. They start at Free, go to Shared, and then Basic, Standard, etc. Best part is that you can scale these up and down. If I go from a Small to a Medium App Service Plan, every App on the Plan gets better.

However, we don’t need a SQL Server, remember? This is going to be a plan that we’ll use to host those two websites. AND we can use the the same App Service Plan for staging slots (dev/test/staging/production) if we like. So just get the plan that works for your sites, today. Unlike a VM, you can change it whenever.

App Service Plan pricing

SQL Server on Azure is similar. You make a SQL Server Database that is hosted on a SQL Server that supports the number of Database Throughput Units that I need. Again, because it’s the capital-C Cloud, I can change the size anytime. I can even script it and turn it up and down on the weekends. Whatever saves me money!

SQL Azure Pricing

I can scale the SQL Server from $5 to a month to bajillions and everything in between.

What the difference here?

First, we started here

  • VM in the Cloud: At the start we had “A VM in the Cloud.” I have total control over the Virtual Machine, which is good, but I have total control over the Virtual Machine, which is bad. I can scale up or out, but just as one Unit, unless I split things up into three VMs.

Now we’ve got.

  • IIS/Web Server in the Cloud: I don’t have to think about the underlying OS or keeping it patched. I can use Linux or Windows if I like, and I can run PHP, Ruby, Java, .NET, and on and on in an Azure App Service. I can put lots of sites in one Plan but the IIS publishing endpoint for Visual Studio is automatically configured. I can also use Git for deployment as well
  • SQL Server in the Cloud: The SQL Server is managed, backed up, and independently scalable.

This is a slightly more “cloudy” of doing things. It’s not microservices and independently scalable containers, but it does give you:

  • Independently scalable tiers (pricing and CPU and Memory and disk)
  • Lots of automatic benefits – backups, custom domains, ssl certs, git deploy, App Service Extensions, and on and on. Dozens of features.
  • Control over pricing that is scriptable. You could write scripts to really pinch pennies by scaling your units up and down based on time of day or month.

What are your thoughts on Lift and Shift to IaaS (Infrastructure as a Service) vs using PaaS (Platform as a Service)? What did I forget? (I’m sure lots!)


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!


© 2017 Scott Hanselman. All rights reserved.
     

I got an interesting question today. This is actually an extremely common one so I thought I'd take a bit to explore it. It's worth noting that I don't know the result of this blog post. That is, I don't know if I'll be right or not, and I'm not going to edit it. Let's see how this goes!

The individual emailed and said they were new to Azure and said:

Question for you.  (and we may have made a mistake – some opinions and help needed)
A month or so ago, we setup a full up Win2016 server on Azure, with the idea that it would host a SQL server as well two IIS web sites

Long story short, they were mired in the setup of IIS on Win2k6, messing with ports, yada yada yada. '

All they wanted was:

  • The ability to right-click publish from Visual Studio for two sites.
  • Management of a SQL Database from SQL Management Studio.

This is a classic "lift and shift" story. Someone has a VM locally or under their desk or in hosting, so they figure they'll move it to the cloud. They LIFT the site as a Virtual Machine and SHIFT it to the cloud.

For many, this is a totally reasonable and logical thing to do. If you did this and things work for you, fab, and congrats. However, if, at this point, you're finding the whole "Cloud" thing to be underwhelming, it's likely because you're not really using the cloud, you've just moved a VM into a giant host. You still have to feed and water the VM and deal with its incessant needs. This is likely NOT what you wanted to do. You just want your app running.

Making a VM to do Everything

If I go into Azure and make a new Virtual Machine (Linux or Windows) it's important to remember that I'm now responsible for giving that VM a loving home and a place to poop. Just making sure you're still reading.

NOTE: If you're making a Windows VM and you already have a Windows license you can save like 40%, so be aware of that, but I'll assume they didn't have a license.

You can check out the Pricing Calculator if you like, but I'll just go and actually setup the VM and see what the Azure Portal says. Note that it's going to need to be beefy enough for two websites AND a SQL Server, per the requirements from before.

Pricing for VMs in Azure

For a SQL Server and two sites I might want the second or third choice here, which isn't too bad given they have SSDs and lots of RAM. But again, you're responsible for them. Not to mention you have ONE VM so your web server and SQL Server Database are living on that one machine. Anything fails and it's over. You're also possibly giving up perf as you're sharing resources.

App Service Plans with Web Sites/Apps and SQL Azure Server

An "App Service Plan" on Azure is a fancy word for "A VM you don't need to worry about." You can host as many Web Apps, Mobile Apps/Backends, Logic Apps and stuff in one as you like, barring perf or memory issues. I have between 19 and 20 small websites in one Small App Service Plan. So, to be clear, you put n number of App Services as you'd like into one App Service Plan.

When you check out the pricing tier for an App Service Plan, be sure to View All and really explore and think about your options. Some includes support for custom domains and SSL, others have 50 backups a day, or support BizTalk Services, etc. They start at Free, go to Shared, and then Basic, Standard, etc. Best part is that you can scale these up and down. If I go from a Small to a Medium App Service Plan, every App on the Plan gets better.

However, we don't need a SQL Server, remember? This is going to be a plan that we'll use to host those two websites. AND we can use the the same App Service Plan for staging slots (dev/test/staging/production) if we like. So just get the plan that works for your sites, today. Unlike a VM, you can change it whenever.

App Service Plan pricing

SQL Server on Azure is similar. You make a SQL Server Database that is hosted on a SQL Server that supports the number of Database Throughput Units that I need. Again, because it's the capital-C Cloud, I can change the size anytime. I can even script it and turn it up and down on the weekends. Whatever saves me money!

SQL Azure Pricing

I can scale the SQL Server from $5 to a month to bajillions and everything in between.

What the difference here?

First, we started here

  • VM in the Cloud: At the start we had "A VM in the Cloud." I have total control over the Virtual Machine, which is good, but I have total control over the Virtual Machine, which is bad. I can scale up or out, but just as one Unit, unless I split things up into three VMs.

Now we've got.

  • IIS/Web Server in the Cloud: I don't have to think about the underlying OS or keeping it patched. I can use Linux or Windows if I like, and I can run PHP, Ruby, Java, .NET, and on and on in an Azure App Service. I can put lots of sites in one Plan but the IIS publishing endpoint for Visual Studio is automatically configured. I can also use Git for deployment as well
  • SQL Server in the Cloud: The SQL Server is managed, backed up, and independently scalable.

This is a slightly more "cloudy" of doing things. It's not microservices and independently scalable containers, but it does give you:

  • Independently scalable tiers (pricing and CPU and Memory and disk)
  • Lots of automatic benefits - backups, custom domains, ssl certs, git deploy, App Service Extensions, and on and on. Dozens of features.
  • Control over pricing that is scriptable. You could write scripts to really pinch pennies by scaling your units up and down based on time of day or month.

What are your thoughts on Lift and Shift to IaaS (Infrastructure as a Service) vs using PaaS (Platform as a Service)? What did I forget? (I'm sure lots!)


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!



© 2017 Scott Hanselman. All rights reserved.
     

6 Maintenance Page Ideas You Can Use on Your WordPress Site

Are you looking for maintenance page ideas for your WordPress site? While nobody likes putting up a maintenance page, sometimes adding a maintenance page becomes unavoidable. In this article, we will share some creative examples of different types of maintenance pages. We will also show… Read More »

The post 6 Maintenance Page Ideas You Can Use on Your WordPress Site appeared first on WPBeginner.

Are you looking for maintenance page ideas for your WordPress site? While nobody likes putting up a maintenance page, sometimes adding a maintenance page becomes unavoidable. In this article, we will share some creative examples of different types of maintenance pages. We will also show you how to easily add one to your WordPress site.

Maintenance Page Ideas for WordPress

Why and When Do You Need a Maintenance Page in WordPress?

Normally you can do most things on your WordPress site without ever taking it down. However, there are some situations when you will need to put your site in maintenance mode to avoid any conflicts.

If you are moving WordPress from local server to live site, or switching from one hosting server to another, then you will need a maintenance page.

You will also need a maintenance page if you run an online store or a membership site to make sure customer orders aren’t lost and user sessions don’t end abruptly.

How to Create A Maintenance Page in WordPress?

First thing you will need to do is install and activate the WP Maintenance Mode plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » WP Maintenance Mode page to configure plugin settings.

WP Maintenance Mode

Here you can add a background image, choose design options, and add your custom message to the maintenance mode page.

For detailed instructions see our step by step guide on how to put your WordPress site in maintenance mode.

Now that you know how to create a maintenance page in WordPress, let’s take a look at different types of maintenance pages that you can create.

Examples of Maintenance Pages from Across The Web

Maintenance Pages are not visible to your users for a long period of time, but they definitely have an impact on how users see your brand.

Ugly error pages generated by your servers can adversely affect your brand image. On the other hand, a creative maintenance page can be memorable and strengthen your brand identity in user’s mind.

Here are some examples of how popular brands use their maintenance mode pages to achieve this.

1. Short and Sweet

Instead of giving detailed explanation to your users about what’s going on, you can keep it short and simple. This approach avoids confusion among your users and delivers the message effectively.

One of the best examples of this is probably Twitter’s famous ‘Fail Whale’.

Twitter Maintenance Page

There are many variations of this famous illustration. Twitter has also used the Fail Whale as their overcapacity page and 404 error page for sometime.

This confused their users as the error message didn’t properly communicate the issue. You should always use a different page as your 404 error template. Here are some examples of great 404 page examples.

Another example of short and simple is Atlassian’s maintenance page.

Atlassian

2. Be Compassionate

Its frustrating when users want to visit their favorite website and they can’t. You need to acknowledge the inconvenience caused by the maintenance, apologize for the trouble, and promise that you are working hard to bring the website back as soon as possible.

Check out this maintenance page from GitHub. It starts with an apology and then offers a way for users to check the status.

GitHub maintenance page

3. Be Humourous and Entertaining

Downtimes are annoying, and your users may feel angry about it. A little humor can go a long way.

Here is how Product Hunt used cat puns on their maintenance page.

Product Hunt maintenance page

Patreon used their mascot and if you look closely, then you can notice that the little fox had a little accident.

Patreon maintenance page

Tumblr used a photograph of earth as seen from International Space Station with their maintenance mode message.

Tumblr maintenance page example

Flickr used this image for their maintenance page.

Flickr down for maintenance message

4. Familiar Look and Feel

Using your brand’s logo, colors, and style makes a maintenance page more effective. Unlike your live website, user attention is way more focused on the message, and it is a good opportunity to build brand recognition.

Apple does a great job with this.

Apple maintenance page

5. Countdown for Return

Adding a countdown timer to your maintenance page makes it look more alive. It also builds anticipation among your users.

However, if you don’t want to add a timer, you can still add the time when your site is expected to be back online.

Here’s an example for how Etsy did it on their maintenance page.

Etsy maintenance page

6. Progress and Updates

Most popular websites use Twitter during scheduled maintenance to keep their users updated. Some of them also add the status updates right on the maintenance page.

Here’s an example of how Upwork’s adds live updates to their maintenance page.

Upwork maintenance page with status updates

Tips for Scheduled Maintenance on Your WordPress Site

When working on a live site you are losing visitors and potential customers every minute your website is down. Here are some tips that will help you do it more effectively.

1. See your Google Analytics reports to find out the least busy hours on your site and then use them for maintenance.

2. Send out an email to your email list about maintenance schedule earlier. This way you regular users will not be taken by surprise.

3. Make sure your maintenance page offers users a quicker way to get in touch using Twitter, Facebook, etc.

4. Most importantly, make sure your website is back online as soon as possible.

We hope this article helped you find inspiration for your maintenance page. You may also want to see our guide on how to create beautiful coming soon pages in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 6 Maintenance Page Ideas You Can Use on Your WordPress Site appeared first on WPBeginner.

How to Add Hreflang Tags in WordPress

Do you want to add hreflang tags in your WordPress posts and pages? If you publish content in multiple languages or for different regions, then hreflang tag helps you improve SEO for those regions and languages. In this article, we will show you how to… Read More »

The post How to Add Hreflang Tags in WordPress appeared first on WPBeginner.

Do you want to add hreflang tags in your WordPress posts and pages? If you publish content in multiple languages or for different regions, then hreflang tag helps you improve SEO for those regions and languages. In this article, we will show you how to easily add hreflang tags in WordPress without writing a single line of code.

How to add hreflang tags in WordPress

What is hreflang tag?

Hreflang tag allows you to tell search engines which page to show for a particular region and language. You can also use it to define other variations of the same content in different languages.

Here is how a hreflang tag implementation looks like in plain HTML.


<link rel="alternate" href="example.com" hreflang="en-us" />
<link rel="alternate" href="example.com/fr/" hreflang="fr-fr" />
<link rel="alternate" href="example.com/pt/" hreflang="pt-pt" />

The hreflang tag is a combination of the language code and the region code. For example, en-us for English and the United States, fr-fr for French and France, and so on.

WordPress is available in more than 60 languages, and you can use WordPress in your own language.

Many WordPress site owners target users in different regions and languages. Some do that by creating multilingual websites, while others do that by offering some content in other languages.

Search engines can easily detect the language of a page and automatically match it to the language settings on user’s browser. However, your pages may still be competing with each other in the search results which may affect your site’s SEO.

You can implement hreflang tags to fix that. Let’s see how to easily add hreflang tags in WordPress.

Method 1: Add hreflang Tag in WordPress Using a Multilingual Plugin

The best approach to building a multilingual WordPress site is by using a multilingual plugin. A multilingual WordPress plugin allows you to easily create and manage content in multiple languages using the same WordPress core software.

These plugins will automatically take care of all technical things such as the hreflang tag, so you can focus on creating content.

We recommend using Polylang. It is a free WordPress plugin and comes with a very powerful and easy to use interface to manage multilingual content. For detailed instructions, see our guide on how to how to easily create a multilingual WordPress site.

Adding languages in Polylang

Another popular option is WPML. It is a premium WordPress plugin with an easy to use interface to create multilingual content on your website. For step by step instructions, see our guide on how to create a multilingual WordPress site with WPML.

After you have created some posts or pages in multiple languages, you need to visit them in a new browser window. Right click and select ‘View Page Source’ from your browser menu.

This will open the source code of the post or page. Now you need to look for hreflang tag to verify that it is working properly. You can also use CTRL+F (Command+F) keys to find the hreflang tag.

Method 2: Add Hreflang Tags in WordPress Without Using a Multilingual Plugin

This method is for users who are not using a multilingual plugin to manage translations on their websites.

First thing you need to do is install and activate the HREFLANG Tags Lite plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled HREFLANG in your WordPress admin menu. Clicking on it will take you to the plugin’s settings page.

hreflang tag plugin settings

Select the post types where you’d like to enable the plugin and then click on the save changes button to save your settings.

Next, you need to edit the post or page where you want to add the hreflang tag. On the post edit screen, you will notice a new metabox labeled HREFLANG tags.

Adding hreflang tags using a plugin

First you need to add the URL of the post that you are currently editing and then select its language. After that you need to click on the plus button to add URLs of other variations of the post and their language.

Once you are done, click on save or update button to save your post.

You can now visit your post in a browser window and view its source code. You will see the hreflang tag added to your post.

We hope this article helped you learn how to easily add hreflang tag to your WordPress site. You may also want to see our step by step WordPress SEO guide for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Hreflang Tags in WordPress appeared first on WPBeginner.

How to Fix Render-Blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress? If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render… Read More »

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

Do you want to eliminate render-blocking JavaScript and CSS in WordPress? If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

How to fix render blocking JavaScript and CSS in WordPress

What is Render-Blocking JavaScript and CSS?

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What is Google PageSpeed Score?

Google PageSpeed Insights is an online tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you guidelines to improve speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many SEO metrics that help Google determine how to rank your website. The reason speed is so important is because it improves user experience on your site.

A better user experience requires a lot more than just speed. You also need to offer useful information, better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers great user experience.

We recently redesigned WPBeginner, and we kept our focus on speed as well as improving user experience.

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render blocking JavaScript and CSS in WordPress.

We will cover two methods that will fix the render blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

1. Fix Render Blocking Scripts and CSS with Autoptimize

This method is simpler and recommended for most users.

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

Autoptimize Settings

You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button.

You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.

Advanced JavaScript Options

Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

Next, scroll down to CSS option and allow plugin to aggregate inline CSS.

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

Once you are done, go ahead and check your website again with the PageSpeed tool.

Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.

How does it work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

This allows you to fix the render blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

2. Fix Render Blocking JavaScript using W3 Total Cache

This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.

First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.

Next, you need to visit Performance » General Settings page and scroll down to Minify section.

W3 Total Cache enable minify

First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.

Click on the save all settings button to store your settings.

Next, you need to add the scripts and CSS that you want to minify.

You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.

Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.

Get JavaScript and Stylesheet URLs from Google PageSpeed tool

Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.

Now head over to your WordPress admin area and go to Performance » Minify page.

First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.

Add scripts to minify

Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.

Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.

Add stylesheets to minify

Now click on the ‘Save settings and purge cache’ button to store your settings.

Visit the Google PageSpeed tool and test your website again.

Make sure that you also test your website thoroughly to see that everything is working fine.

Troubleshooting

Depending on how the plugins and your WordPress themes uses JavaScript and CSS, it could be quite challenging to completely fix all render blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break your plugins or they could behave unexpectedly.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize allows you to fix that by manually adding inline CSS required to display the above fold area of your theme.

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

That’s all, we hope this article helped you learn how to fix render blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide boost WordPress speed and performance for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

How to Add an Author’s Photo in WordPress

Do you want to add an author’s photo in WordPress? By default, most WordPress themes display an author’s gravatar image as their profile photo. But what if you wanted to replace the gravatar image with an actual author photo? In this article, we will show… Read More »

The post How to Add an Author’s Photo in WordPress appeared first on WPBeginner.

Do you want to add an author’s photo in WordPress? By default, most WordPress themes display an author’s gravatar image as their profile photo. But what if you wanted to replace the gravatar image with an actual author photo? In this article, we will show you how to easily add an author’s photo in WordPress.

How to Add Author's Photo in WordPress

When Do You Need Custom Author Photo in WordPress?

If you run a single author WordPress site, then you can just use an image widget to add your photo and an about page with more information.

On the other hand, if you run a multi-author WordPress site, then you may need to add an author bio box at the end of your articles. Author bio box typically shows an author’s profile photo, brief bio, and links to their website or social profiles.

By default, most WordPress themes display an author’s gravatar image as their author photo. However, sometimes an author may not have a gravatar image or they may not want to use it as an author image on your website.

Having said that, let’s see how to easily add author photo in WordPress and allow authors to upload a photo to their profile.

Adding an Author Photo in WordPress

First thing you need to do is install and activate the WP User Avatar plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Avatars in your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

WP User Avatar settings

Here you can choose how you want to display the user avatars on your WordPress website.

By default, this plugin allows users with at least an Author role to upload their own profile photo. You can change that and allow contributors and subscribers as well.

It also allows you to completely disable Gravatar on your WordPress site and only use local avatars.

Once you are comfortable with the settings, go ahead and click on save changes button to save them.

Now you can go to Users page and click on the edit button below a username.

On the edit user screen, scroll down to the bottom, and you will see the Avatar section. You can click on the ‘Choose Image’ button to upload the user photo.

upload author photo

Don’t forget to click on the ‘Update profile’ button to save your changes.

Similarly, users on your WordPress site will be able to upload their photos by editing their user profile.

User profile photo

Now you can visit your website to see the plugin in action.

It will start showing local avatar as author photo for the articles. If a user does not add an author photo, then it will show their gravatar image.

Author photo with bio in WordPress

If a user doesn’t have an author photo or gravatar image, then it will fallback to the default gravatar image. You can add a branded custom gravatar image to be used as fallback image.

We hope this article helped you learn how to add an author’s photo in WordPress. You may also want to see our guide on how to allow users to submit posts to your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add an Author’s Photo in WordPress appeared first on WPBeginner.

ASP.NET – Overposting/Mass Assignment Model Binding Security

imageThis little post is just a reminder that while Model Binding in ASP.NET is very cool, you should be aware of the properties (and semantics of those properties) that your object has, and whether or not your HTML form includes all your properties, or omits some.

OK, that’s a complex – and perhaps poorly written – sentence. Let me back up.

Let’s say you have this horrible class. Relax, yes, it’s horrible. It’s an example. It’ll make sense in a moment.

public class Person
{
public int ID { get; set; }
public string First { get; set; }
public string Last { get; set; }
public bool IsAdmin { get; set; }
}

Then you’ve got an HTML Form in your view that lets folks create a Person. That form has text boxes/fields for First, and Last. ID is handled by the database on creation, and IsAdmin is a property that the user doesn’t need to know about. Whatever. It’s secret and internal. It could be Comment.IsApproved or Product.Discount. You get the idea.

Then you have a PeopleController that takes in a Person via a POST:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Person person)
{
if (ModelState.IsValid)
{
_context.Add(person);
await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(person);
}

If a theoretical EvilUser found out that Person had an “IsAdmin” property, they could “overpost” and add a field to the HTTP POST and set IsAdmin=true. There’s nothing in the code here to prevent that. ModelBinding makes your code simpler by handling the “left side -> right side” boring code of the past. That was all that code where you did myObject.Prop = Request.Form[“something”]. You had lines and lines of code digging around in the QueryString or Form POST.

Model Binding gets rid of that and looks at the properties of the object and lines them up with HTTP Form POST name/value pairs of the same names.

NOTE: Just a friendly reminder that none of this “magic” is magic or is secret. You can even write your own custom model binders if you like.

The point here is that folks need to be aware of the layers of abstraction when you use them. Yes, it’s convenient, but it’s hiding something from you, so you should know the side effects.

How do we fix the problem? Well, a few ways. You can mark the property as [ReadOnly]. More commonly, you can use a BindAttribute on the method parameters and just include (whitelist) the properties you want to allow for binding:

public async Task<IActionResult> Create([Bind("First,Last")] Person person)

Or, the correct answer. Don’t let models that look like this get anywhere near the user. This is the case for ViewModels. Make a model that looks like the View. Then do the work. You can make the work easier with something like AutoMapper.

Some folks find ViewModels to be too cumbersome for basic stuff. That’s valid. There are those that are “All ViewModels All The Time,” but I’m more practical. Use what works, use what’s appropriate, but know what’s happening underneath so you don’t get some scriptkiddie overposting to your app and a bit getting flipped in your Model as a side effect.

Use ViewModels when possible or reasonable, and when not, always whitelist your binding if the model doesn’t line up one to one (1:1) with your HTML Form.

What are your thoughts?


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!


© 2017 Scott Hanselman. All rights reserved.
     

imageThis little post is just a reminder that while Model Binding in ASP.NET is very cool, you should be aware of the properties (and semantics of those properties) that your object has, and whether or not your HTML form includes all your properties, or omits some.

OK, that's a complex - and perhaps poorly written - sentence. Let me back up.

Let's say you have this horrible class. Relax, yes, it's horrible. It's an example. It'll make sense in a moment.

public class Person

{
public int ID { get; set; }
public string First { get; set; }
public string Last { get; set; }
public bool IsAdmin { get; set; }
}

Then you've got an HTML Form in your view that lets folks create a Person. That form has text boxes/fields for First, and Last. ID is handled by the database on creation, and IsAdmin is a property that the user doesn't need to know about. Whatever. It's secret and internal. It could be Comment.IsApproved or Product.Discount. You get the idea.

Then you have a PeopleController that takes in a Person via a POST:

[HttpPost]

[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Person person)
{
if (ModelState.IsValid)
{
_context.Add(person);
await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(person);
}

If a theoretical EvilUser found out that Person had an "IsAdmin" property, they could "overpost" and add a field to the HTTP POST and set IsAdmin=true. There's nothing in the code here to prevent that. ModelBinding makes your code simpler by handling the "left side -> right side" boring code of the past. That was all that code where you did myObject.Prop = Request.Form["something"]. You had lines and lines of code digging around in the QueryString or Form POST.

Model Binding gets rid of that and looks at the properties of the object and lines them up with HTTP Form POST name/value pairs of the same names.

NOTE: Just a friendly reminder that none of this "magic" is magic or is secret. You can even write your own custom model binders if you like.

The point here is that folks need to be aware of the layers of abstraction when you use them. Yes, it's convenient, but it's hiding something from you, so you should know the side effects.

How do we fix the problem? Well, a few ways. You can mark the property as [ReadOnly]. More commonly, you can use a BindAttribute on the method parameters and just include (whitelist) the properties you want to allow for binding:

public async Task<IActionResult> Create([Bind("First,Last")] Person person)

Or, the correct answer. Don't let models that look like this get anywhere near the user. This is the case for ViewModels. Make a model that looks like the View. Then do the work. You can make the work easier with something like AutoMapper.

Some folks find ViewModels to be too cumbersome for basic stuff. That's valid. There are those that are "All ViewModels All The Time," but I'm more practical. Use what works, use what's appropriate, but know what's happening underneath so you don't get some scriptkiddie overposting to your app and a bit getting flipped in your Model as a side effect.

Use ViewModels when possible or reasonable, and when not, always whitelist your binding if the model doesn't line up one to one (1:1) with your HTML Form.

What are your thoughts?


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test, build and debug ASP.NET, .NET Framework, .NET Core, or Unity applications. Learn more and get access to early builds!



© 2017 Scott Hanselman. All rights reserved.