Tutoriale de programare web

  • Get Real-Time Weather Data With the weatherstack API
    by Jeremy McPeak on 9 aprilie 2021 at 23:03

    „You can always talk about the weather.” It’s a cliched phrase, but regardless of a person’s personality, political views, or culture, the weather is a subject that anyone and everyone can talk about and find common ground. It’s the universal truth that binds humanity together. But the weather is more than that—it’s a force that affects humanity on a grand scale. Hardly a day goes by where everyone doesn’t check, or at least know about, the weather so that they can be properly prepared for a given day. And, of course, there are few things more unifying to a people within the same region than experiencing the same weather—especially during major storms that sweep across a continent. The weather is an important part of our daily lives, and while everyone can check their favorite smartphone app or local news, there are times when individuals and businesses need a bit more. For example: Imagine a smart home that automatically turns on a bathroom heater on cold mornings before you wake up and get ready for work. What if a business could automatically shut off the building’s water supply and drain its pipes if the overnight forecast predicts a hard freeze? Think about municipalities that could send automated alerts to their citizens with real-time, up-to-date emergency alert data. These types of applications need reliable and up-to-date weather information, and here is where the weatherstack API comes in. By using the weatherstack API, you can power your weather-based applications with accurate real-time, historical, and forecast data. There’s a reason why weatherstack is trusted by over 75,000 companies worldwide: they can retrieve instant, accurate weather information for any location in the world. What Is the weatherstack API? weatherstack is a RESTful API service that allows customers to query current, historical, and forecast weather for as many worldwide locations as possible. It covers an extensive scope of weather data for almost the entire planet, and it offers cost-effective plans for companies (both big and small), developers, and individuals. The weatherstack API is powered by the highly scalable apilayer cloud infrastructure, making it capable of handling anything from hundreds of requests a month to millions of requests a minute. It has become one of the most popular weather data REST API providers thanks to its ease of integration and consistency. With the weatherstack API, you can: add localized weather to your website (using geolocation with ipstack) build weather alert systems to notify users of extreme weather in their area incorporate weather data into automated processes Features: Why Use the weatherstack API? Microsoft, Warner Brothers, Schneider Electric (think APC), and 74,997 other companies rely on weatherstack because it provides accurate and fast results. Let’s look at why: Accurate Real-Time Weather The weatherstack API delivers accurate real-time weather data thanks to licensing deals with some of the largest weather stations and providers in the world. Broad Weather Data weatherstack covers global weather data across the board—from a multi-year history to live information to accurate forecasts. Millions of Locations You can use the live or hour-by-hour weather data for millions of cities and locations worldwide. Flexible Location Lookup You can look up locations by city or region name, ZIP code, IP address, or traditional latitude and longitude coordinates. Speed and Lightweight Response The weatherstack API is lightning fast, delivering weather data in a lightweight JSON format. Bank-Level Security weatherstack supports 256-bit encryption for all paid plans. Highly Scalable The API is built upon apilayer’s cloud infrastructure, and it can meet your smallest and largest demands. Near 100% Uptime Did we mention weatherstack is built upon apilayer’s cloud infrastructure? Yeah, you can rely on it being available. Extensive Documentation The weatherstack API is thoroughly documented, providing request examples and a complete list of query parameters for all its endpoints. You’ll even find code samples to get you started. How It Works The weatherstack API is a RESTful API, and it exposes several endpoints to handle requests for the different information it provides. Responses vary based upon the requested data (real-time, historical, or forecast), but the JSON structures are well organized and documented. Quick Tutorial It’s simple to get started with weatherstack. You obviously need an access key, so you first need to register an account. In the API Quickstart Guide, you’ll receive your access key, a list of the available endpoints, and a few request examples to get you started. Plug your access key into the URL and make a request. The API always responds with JSON (even for errors), and successful requests result in a structure containing your requested weather data. Here is a snippet from an actual response: Of course, you’ll need to visit weatherstack’s documentation to fully integrate the API into your application, but you’ll find each endpoint thoroughly documented, along with some code samples for several popular languages.  We should point out, however, that weatherstack’s free plan is not encrypted; HTTPS is reserved for paid plans. Attempting to use HTTPS with the free plan results in an error message (via a JSON structure) indicating that the free plan does not support HTTPS encryption. Pricing The weatherstack API has several subscription plans. The Free plan is great for testing and personal use, and you can make 1,000 monthly requests to the real-time endpoint. Naturally, you’ll gain access to more features by choosing one of the following paid plans: Basic: This plan includes 50,000 monthly requests, unlimited support, HTTPS encryption for all requests, and access to additional endpoints (such as location lookups, astronomy data, hour-by-hour data, and historical data). Professional (Most Popular): In addition to the features provided by the Basic plan, this plan lets you make 300,000 requests a month and gives you access to the seven-day forecast, weather data in 40 languages, and the ability to make bulk queries. Business: This plan gives you everything from the Professional plan but increases your request limit to 1,000,000 requests per month and the forecast data to 14 days. Enterprise: If the business plan isn’t enough for your needs, then contact the folks at weatherstack for a custom-priced plan that is tailored to your needs. Conclusion Weather is an important part of everyone’s everyday life, and by integrating the weatherstack API, you can give your users real-time and historical weather data for millions of locations around the globe. Tens of thousands of companies trust weatherstack to serve accurate weather data for their applications and automations. It is rock-solid and can handle your most demanding needs. Register for free and try it today!

  • Best Affiliate WooCommerce Plugins Compared
    by Franc Lucas on 1 aprilie 2021 at 9:57

    WooCommerce and WordPress are, together, a powerful and winning combination for online commerce. Together they run 37% of eCommerce business online. Leveraging these two is the perfect combination for selling physical products, digital goods, and services online.  But having the most awesome WooCommerce storefront and the best products is just a tiny part of what you need for online business success.  You may want also to consider an affiliate program to help spread the word and get your business in front of as many eyes as you can. Also, if you run a blog, you may want to monetize it through affiliate marketing.  On CodeCanyon you can find affiliate marketing plugins for the WooCommerce store owner who wants to start his or her own affiliate network and for the blogger who wants to earn some money as an affiliate marketer.  WordPress How to Build an Amazon Affiliate Website With a WooCommerce Affiliate Plugin Jessica Thornsby Theme Development Envato Market in 60 Seconds: Becoming an Affiliate Adi Purdila WordPress The Beginners Guide to WooCommerce: Adding an External/Affiliate Product Ahmad Awais Let’s take a quick look at some of the best affiliate WooCommerce plugins and how they compare. Understanding Affiliate Marketing There are billions of products—physical or digital—that are sold every day. This makes affiliate marketing one of the most popular ways of earning money. Affiliate marketing is a very reliable way of generating more leads and sales. It is based on revenue sharing. Here is how it works: The Merchant Let’s say you have a beautiful WooCommerce store with lots of beautiful products. In this case you are the merchant: you have a product, and you’re a seller. You want to sell more products. That is the goal.  The best way to get the word out about the products you’re selling would be revenue sharing. You get other people to promote your products, and for every product that is sold, you pay them a commission.  The Affiliate Marketer You have no product to sell. You have an active blog and/or social media account. You can become an affiliate marketer by promoting the products other people or businesses are selling. For every product sold, you earn a commission.  The Drop Shipper You are a newbie. You set up a WooCommerce store. You register with different affiliate networks. You populate your online store with products from different merchants represented by the affiliate network. You earn commissions when the products sell, and the products are shipped directly from the merchants in the network.  You get the picture: affiliate marketing is getting paid to promote and sell other people’s products. You earn a commission for every product sold through your website.  As a merchant—producer and seller—who has a product to sell, you can create an affiliate program that affiliate marketers can join in order to promote and sell your products.   As an affiliate marketer, you can promote one product from a single merchant or many products from many merchants. You promote the products through paid ads, landing pages, blogs, social media, or whatever means you have of getting the word out.  It’s highly recommended that you diversify your affiliate income sources. Affiliate Networks  There’s another big wheel in the affiliate marketing business that happens to be very important: affiliate networks.  Affiliate networks are big players in the affiliate marketing game. There are thousands of affiliate networks. They act as intermediaries between merchants and affiliate marketers.  Here is what happens.  Because affiliate networks have a very extensive ground game developed over a very long time, merchants let affiliate networks handle everything to do with affiliate marketing.  If an affiliate marketer is interested in marketing particular products by particular merchants, they will have to go through the affiliate networks.  In this case, affiliate networks are affiliate marketing platforms that: bring together offers from different vendors under one roof  develop directories with listings of products and offers affiliate marketers to choose from take care of all the administrative details of running an affiliate network Some networks give you tools like ads of their products to display on your blog, website, or social media. Some give pre-built landing pages of their products, and all you have to do is market. Other networks give you tools to create your own ads and landing pages of their products.  Examples of Affiliate Networks   There are thousands of affiliate networks.  There are affiliate networks that just specialize in digital products. Examples of affiliate networks in this category include MaxBounty, JVZoo, ClickBank, and 2Checkout. Other affiliate networks specialize only in physical products. Examples of affiliates in this category include Target Affiliates. Then there are those that specialize in both physical and digital products. Examples include AWIN, Amazon, and Shopify.  Other affiliate networks specialize in internet marketing, financial products, health and fitness products, or link share, especially deep linking. The list goes on!  Types of Affiliate Payout There are different payment types and models in affiliate marketing. Lots of it depends on the affiliate network and what payment model works best for them.  If you are looking to create your own affiliate program, these models should give you some ideas on how to structure your payouts. If you’re looking to be an affiliate marketer, the brief description of each payout type will give a clear picture of how you get paid.  Commission-Based Payment  A commission model for payment is the most popular. Some ways in which commission are determined:  Cost per sale: you get paid when you produce a sale for the product or service you’re promoting. Cost per click:you get paid when visitors click the ads displayed on the website, and it doesn’t matter if a sale is generated or not.  Cost per lead:you get paid when you send potential customers (leads) to other businesses. Specialized niches, like law firms, doctors offices, and tax accountants, use this model.  Cost per action: you get paid for each action an individual takes, such as filling in their personal details, answering survey information, or applying for a credit card. Other Affiliate Program Payment Models  Single-tiered program: The affiliate is paid based on a direct sale they make. Two-tiered affiliate program: This affiliate model allows you to make commissions not only on your own sales but the sales from others—sub-affiliates—that you recruit into the program as an affiliate. This has two levels of affiliates.  Multi-tiered affiliate program: Similar to the model above but with more than two levels of affiliates. In this program, your affiliates recruit affiliates who recruit affiliates–the levels can go on and on. Flat rate program: You get paid a flat rate for each lead, sale, or action your promotion generates for the business.  Performance-based program: You get paid based on measurable results. You put in the work—and lots of it—and if it results in sales, you get paid.  Revenue share program: You don’t get paid per lead or per signup. Instead, you get paid based on future spending by a lead you referred who registers with the merchant you are promoting. If this future spending becomes regular, you receive payments indefinitely. It’s called lifetime value. A good example of this situation is online casino affiliate programs. Why a WooCommerce Store Needs an Affiliate Program It’s the easiest and fastest way to drive traffic to your store. It’s the most reliable way of generating leads and sales. It’s the least costly way to advertise and promote your store. You can even get new customers to spread the word for you by making them your affiliates.  Affiliate Plugins Explained  There is a lot that goes into building a custom affiliate program from scratch. Putting together all the moving parts is time-consuming and costs a lot of money. Developers who create affiliate plugins have put a lot of thought into what an affiliate program needs and have incorporated all that into a plugin. An affiliate plugin is a piece of software specifically made to allow you to set up your own affiliate program. It comes out of the box ready to get started immediately. You just need to install it and customize it to suit your needs.   What Affiliate Plugins Do Provides you with a platform to manage your affiliate network by registering affiliates, setting up payout rates and payments methods, and more.  Allows tracking, using unique URLs, of clicks, referrals, and sales by your partners How to Choose an Affiliate Plugin The following are things you should consider when looking for an affiliate plugin to suit your needs: easy to use, with customizable templates and color swatches integration with payment gateways like PayPal and Stripe for easy payouts to affiliates  integration with email marketing platforms like Constant Contact, Mailchimp, and AWeber  integration with social share for easy sharing on social media Finally, you need to make sure the hosting service you’re using can handle large databases.  Affiliate WooCommerce Plugins for the Store Owner If you’re a merchant or store owner and you want to run your own affiliate marketing program, these self-hosted affiliate WooCommerce solution plugins allow you to register affiliate marketing partners and determine commissions for your affiliates.  1. Ultimate Affiliate Pro WordPress Plugin  Let’s start with the Ultimate Affiliate Pro WordPress Plugin. It is easily one of the most robust affiliate WooCommerce plugins as it is integrated with WooCommerce, Easy Digital Downloads, PayPal, and Stripe, and it includes a complete feature set to get your own affiliate program up and running. You’ll find all sorts of useful features such as: performance bonuses and banner management unlimited affiliates and special offers rankings and commission levels referrals and social shares PayPal and Stripe payouts and much, much more This is one of the best affiliate WooCommerce plugins you’ll find on Envato Market. If this all wasn’t impressive enough, this also includes free login, register, and account page templates, and connects with the top email marketing platforms like Mailchimp, Constant Contact, and many more. Ultimate Affiliate Pro WordPress Plugin is the ultimate affiliate WordPress plugin. 2. SUMO Affiliates Pro—WordPress Affiliate Plugin  SUMO Affiliates Pro is a comprehensive WordPress Affiliates Plugin that allows you to run an affiliate system on your existing WordPress site. And you can fully integrate it into your WooCommerce store.  You can award affiliate commissions for actions such as affiliate signup, form submission, and product purchases. Some features of this plugin include:  separate tables to capture the URLs that were accessed using an affiliate link separate tables to capture the referral actions which got converted approve the referrals automatically or approve the referrals after review award lifetime commission to the affiliates for the purchases made by their referrals allow affiliates to generate readable affiliate links (pretty affiliate links) create unique landing pages for affiliates Check out the live preview and see why this is one of the best affiliate plugins available on the market.  User CeeM123 says: „Very quick and outstanding support and awesome plugin that provides all possibilities we were searching for.” 3. SUMO Affiliates—WooCommerce Affiliate System The SUMO Affiliates: WooCommerce Affiliate System is simple and straightforward. Its approach is on point: „…logged in users can apply and become Affiliates and promote the products in the site. Whenever a user purchases a product by using an Affiliate Link, the Affiliate associated with the link will earn commission for the purchase.” This solid solution works with WooCommerce supported themes and also includes: CSV export for unpaid commissions translation and WPML ready affiliate cookie validator affiliate link generator highly customizable affiliate applications affiliate dashboard and much more If you’re just looking for an affiliate WooCommerce plugin, look no further. The SUMO Affiliates: WooCommerce Affiliate System hits all the right marks. 4. WooCommerce Multilevel Referral Plugin Interested in building a strong referral chain? The WooCommerce Multilevel Referral Plugin allows affiliates to earn credit points while their followers purchase your products from the existing online store. Build your affiliate perks through sales. Features you’ll find here: set custom credit and redemption limits full admin reporting of registered users global or product specific settings shortcode support and much more This is a multilevel referral system for WooCommerce, something that’s outside of the typical affiliate transactional system. WooCommerce Multilevel Referral Plugin is unique in approach and may be exactly what you’re looking for.  Solutions for Affiliate Marketers WooCommerce is also perfect for affiliates. With the help of these plugins, you can create a niche storefront that has the look, feel, and convenience of a WooCommerce shopping experience, while serving users products from Amazon and other affiliate networks.  5. WooCommerce Amazon Affiliates WordPress Plugin If you want to set up an affiliate site and import products directly from Amazon, then WooCommerce Amazon Plugin for WordPress is your best choice. It pulls all product information, specs, images and reviews together in one place.  Your site will look and function like an eCommerce website, but at checkout, customers will be redirected to Amazon.  Also, you can import and synchronize products without the need for PA API (Product Advertising) keys! The sync occurs automatically, every 15 minutes, and the recurrence is every 24 hours.  Go to the live preview and see for yourself what this plugin can do!  User Abundance_For_All says this about WooCommerce Amazon Plugin for WordPress „Great plugin easy to use! A must-use plugin if you are an Amazon affiliate! Highly recommended.” 6. Content Egg  For an affiliate marketer, diversifying is the best business model. This means curating affiliate products sourced from different affiliate networks. In short, creating a website that promotes products from different merchants.  This, sometimes, may not be as simple as you think. You may need to have separate plugins to import products and information from separate networks.  Content Egg is unique because it is an affiliate and content curation plugin that brings together and supports many affiliate networks under one roof. Content Egg uses network APIs.  Here is how it works:  Activate your modules by adding your API keys to access each network. Add offers by searching by keyword. Import offers to your page with special shortcodes. Start to earn: The plugin will add your affiliate ID to all links. You will earn affiliate commissions according to the rules of the given network. This plugin works with all WooCommerce themes. You can easily import offers for WooCommerce products and also import specifications to WooCommerce attributes.  It’s easy for novices and professionals. It has has a clear interface and saves significant time and effort when creating affiliate websites. It has everything you need to effectively manage and create affiliate monetization on your websites and quickly find content and products to monetize. Other features of this great plugin include: Up-to-date products: offers, deals, and prices will be updated automatically. Price drop alerts: email alerts for price drops and price history. Links cloaking: add redirect to your affiliate links. Use Autoblog to fill your site with different content: text, video, and pictures. All pages will be search optimized because Content Egg functions like search engines and uses search keywords. The proof is in the pudding. Go to the live preview and try it for yourself! User ManjuPmf says: „Includes almost every affiliate network and works great. I highly recommend it.” 7. Affiliate Egg: Niche Affiliate Marketing Plugin  Local shops usually have better prices, better partnerships, and better commissions for local regions. I highly recommend Affiliate Egg if you want to create a successful affiliate website by taking advantage of the best conversions and commissions offered by local popular shops.  Why Local Affiliate Marketing? You know your local merchants better than the online giants. Local SEO is easier and much more effective.  Present better prices with fewer competitors. How Affiliate Egg Works  Create storefronts: Just copy links from the original online store and insert them into the plugin. You can also use category or search links for bulk imports. Add shortcodes: Choose an output layout and insert the shortcode anywhere on your site. Start to earn: Set your partner’s affiliate ID to make a simple affiliate link. The Affiliate Egg plugin: can get products directly from webshops  can be easily integrated into your WooCommerce site  has price update functions  automatically adds affiliate IDs to links  User cmv925 says: „You run an affiliate site and need an easy solution to automate your inventory upload, this plugin is for you. Easily create storefronts in minutes.” 8. Rakutenomatic—Rakuten Affiliate Network Plugin Rakutenomatic—Rakuten Affiliate Network PluginThis best affiliate plugin for WordPress enables you to earn a passive income from being enrolled in multiple affiliate programs from Rakuten, earning percentages on sales that you generate. Rakutenomatic uses the Rakuten Market API to turn your WordPress website into a money-making machine. Import affiliate products based on search queries to maximise earnings. Tested on WordPress 5.6.x and Gutenberg-ready, this plugin has been developed by an Envato Elite Author and is regularly maintained and updated. What’s more, you can try it before you buy it. 9. WordPress and WooCommerce Affiliate Program WordPress and WooCommerce Affiliate ProgramWordPress and WooCommerce Affiliate Program is an affiliate marketing plugin to help you to market products through an affiliate team. Through two-way commision, the site admin can give commissions to users in the form of product discounts which is a portion of the commission referred by the Affiliate. Or choose a manual referral commission or experiment with social media share using social media icons. Furthermore, this WooCommerce affiliate plugin is compatible with digital downloads and you can reward your affiliates for marketing these. Generate more income from an eCommerce site by having more visibility and increased traffic by installing this plugin. This is the WooCommerce affiliate system. 10. Affiliate Management System—WooCommerce Amazon Affiliate Management System—WooCommerce AmazonIf you’re looking for the best affiliate plugin for WordPress, you probably can’t go wrong with one that allows you to import drop-shipped or affiliated Amazon products directly into a WooCommerce store. If you’re looking for a WooCommerce affiliate plugin, this one enables you to use a WooCommerce store to sell Amazon products from all Amazon country stores. This is a compelling WooCommerce affiliate plugin and comparison with others is recommended. Conclusion These are some of the affiliate plugins that I recommend if you’re looking to start your own affiliate program or you’re an affiliate yourself. Check out more affiliate WooCommerce plugins on CodeCanyon. WordPress How to Build an Amazon Affiliate Website With a WooCommerce Affiliate Plugin Jessica Thornsby Theme Development Envato Market in 60 Seconds: Becoming an Affiliate Adi Purdila WordPress The Beginners Guide to WooCommerce: Adding an External/Affiliate Product Ahmad Awais

  • Best WordPress and WooCommerce Review Plugins
    by Franc Lucas on 31 martie 2021 at 15:22

    Do you want to add customer reviews on your website? Reviews are the best free advertising for your business and your products. They bring traffic and make customers spend more time engaging with your website content. They give credibility to your products and inspire trust among visitors. They are social proof that your products are reliable. They are a great way of collecting feedback and improving on your products. They also boost SEO ranking and your website visibility on search engines. In fact, 90% of customers decide to buy after reading online reviews. So how do you add customer reviews to your website? Review plugins allow you to add customer reviews to your website. They provide review blocks with rating systems, shortcodes, and widgets so you can add reviews to your website from different sources. Customers can submit their own reviews, and you can also embed reviews from social media. Review plugins are affordable and come with templates that you can customize to fit with the style of your website. They have two crucial components: customizable review boxes with a rating system rich snippets that show your reviews on search engine pages Types of Review Plugins There are three types of review plugins. 1. Review Website Plugin Perfect if you want to start a product review website and earn affiliate income. Think book review website, fashion review site, online games review site, etc. 2. Product Review Plugin or Customer Review Plugins If you want customers who buy your products or services to leave reviews on your website, this plugin can grab reviews from Facebook and other places online. 3. Business Review Plugin For business owners looking for reviews in order to increase social proof and solidify their brand image. The plugin grabs reviews from Facebook, Yelp, Google Business reviews, and more. On Envato Elements and CodeCanyon, you’ll find all three types of review plugins for both WooCommerce and WordPress websites. WordPress Facebook review plugin is one example of review plugins available of EnvatoElements and CodeCanyon.  Before we look at the best review plugins, let’s talk about Envato Elements and how your subscription will benefit you! What Is Envato Elements? As a developer or designer, you want to focus on great design, not worry about adding credits or managing download limits. That’s why it’s important to have unlimited digital assets under one roof and for one low monthly price. This is where Envato Elements comes in! Envato Elements gives you an unlimited creative subscription to consistently high-quality and unique assets for your projects under one simple commercial license for all content. So What Do You Get With Your Subscription? Unlimited downloads of 54+ million creative assets under one no-strings-attached subscription covered by a lifetime commercial license. You also gain access to all the courses on Envato Tuts+. There are no strings attached to your subscription. You can cancel anytime. Create with confidence! Get Envato Elements now and gain access to millions of creative assets that you can download without any limitations. WordPress 40 Reasons Envato Elements Is Great for WordPress Developers Daniel StronginBest Review Plugins on Envato Elements Now, let’s review some of the top WordPress review plugins available on Envato Elements. You get unlimited access to these high-quality review plugins, as well as hundreds of other premium plugins and themes, with a low-cost subscription. 1. WooCommerce Image Review for Discount Did you know that products with photo reviews increase conversion by up to 90%? That’s right. Customers want to see what products look like in real life. With WooReview, your customers can easily give you five-star ratings and add photos of themselves using your products. This WooCommerce photo review plugin allows you to: send automatic emails to your customers asking for reviews and offer them discounts for submitting reviews with images showcase your customer reviews and display them on any page of your online store, including a dedicated reviews page monitor reviews and decide which reviews get published edit and delete review text and images if they are not appropriate share reviews on social media and gain free traffic and exposure on Facebook create and assign coupons to customers who review products purchased from your store You can take advantage of four notification emails—invite a customer to review the product, pending image review, image review approved (with coupon), and image review approved (without coupon). 2. WordPress Facebook Reviews Plugin By embedding WordPress Facebook Reviews Plugin on your website, you can show business reviews and high ratings from your Facebook page, attract more reviews and feedback, and increase trust in your brand by demonstrating high social proof of your products. You just need to get authorized on Facebook as the admin, and the widget will automatically get the reviews and publish them on your website. An automatic updating function helps show every new review as soon as it appears on Facebook. It comes with a clean and flexible interface to suit any website style. Customization options include four layout variants, three review templates, a flexible header, and more. The reviews can be filtered, and you can also show information about their authors, with photos, as well as ratings and other details. The plugin is 100% compatible with WordPress and works perfectly with any WordPress theme, including the most popular on ThemeForest: Avada, Jupiter, BeTheme, Enfold, Flatsome, Salient, Bridge, and more. 3. Epic Review WordPress Plugin Epic Review is perfect if you write review articles that show your opinion of products, movies, etc. You can add responsive review boxes or blocks by the side or at the bottom of the article. (see screenshot above). You can rate different aspects of the products you’re reviewing—for example, if you are reviewing a smartphone, you can rate its design, performance, camera, battery, and price. You can choose from three rating systems: point, star, or percentage. You can monetize your posts by adding referral and affiliate links to the items you’re are reviewing. You can add multiple affiliate sources, and the plugin will automatically calculate which seller has the best price for the item you’re reviewing. Also, with the help of widgets, you can show a list of recent review articles on the sidebar so users can navigate through other reviews. It is also an addon for Elementor and WPBakery Page Builder. 4. Ultimate Post Review: WordPress Rating/Reviews Ultimate Post Review adds a block of reviews to your WordPress blog posts or reviews. The review block format is simple: review title and summary display (see photo above). The block comes with unlimited rated criteria, negative and positive lists, summary, and affiliate buy button, and it also automatically displays the total ratings on a single post page and blog listing pages. All these elements are 100% responsive and come in unlimited customizable styles. This WordPress review plugin works smoothly in any modern browser. It is translation-ready and supports Google rich snippets so your post summary and ratings appear as rich snippets on search engines. It comes with detailed documentation. Bestselling Review Plugins for WooCommerce and WordPress on CodeCanyon With a low-cost, one-time payment, you can purchase one of these high-quality WordPress review plugins and make your website engaging by adding customer reviews. 5. Let’s Review WordPress Plugin With Affiliate Options Let’s Review is a powerful and easy-to-use WordPress review plugin that allows you to add beautiful responsive and modern review boxes with valid JSON-LD schema to your posts. The review boxes come with rich snippet markup, which means search engines can show your review data. It is Gutenberg-ready and adds various exclusive Gutenberg review blocks. There’s also a speedy drag-and-drop option that allows you to add unlimited criteria, positives and negatives. Select from numerous format options, including percentage, points, stars, custom icon, and custom Image. With the custom icon option, you can enter any icon HTML code. You can even monetize your reviews thanks to the ability to add unlimited modern affiliate buttons to your reviews. The text on the buttons is customizable and comes with unique animation options. Visitors can submit their own full reviews thanks to an elegant integration into the WordPress comments system. It is also possible to migrate reviews you have in other themes and plugins like WP Product Reviews or Extra Theme/Divi Reviews. The plugin is fully translatable into any language (including RTL ones). It also comes with completed translation files in French and Spanish. 6. Bestseller: Reviewer WordPress Plugin Reviewer is a plugin for WordPress that allows you to insert powerful and gorgeous review boxes and comparison tables into your posts, pages, and custom post types. Users and visitors can leave their reviews in the box you have created and even upload their images. The plugin includes customizable templates so you can adapt your reviews and comparison tables to your need, and it offers many ways of displaying review boxes on your sidebars. You can customize parameters like the criteria for your review, score range, colors, labels, and font sizes. You can also add custom panels and links, change the star icon, and add pros and cons, summaries, and much more. Each theme has a responsive layout to adapt to any device. All admin features have been designed and built with the aim of simplifying the blog author’s work. You can manage user review privileges, moderations, reviews, tables, and much more. This translation-ready plugin supports rich snippets so your reviews are indexed on search engines. It also supports Google ReCaptcha to prevent spamming. 7. Taqyeem: WordPress Review Plugin Taqyeem is a premium reviewing and rating WordPress plugin that gives you a bang for your buck. It helps you add lovely rating and review boxes to your posts, pages, and custom post types. There are three review styles: stars, points, and percentage. Users can submit their reviews and rate reviews written by others. They can also rate images submitted with user reviews. There are plenty of customization options, allowing you to change fonts, images, colors, styles, and of course the criteria. You have at your disposal over 500 Google web fonts. Customizable widgets display your review ratings on sidebars. You can choose to group reviews according to best, recent, or random. The plugin supports translation and localization, including RTL languages. Rich snippet support allows review microdata to be easily displayed on search engines. 8. Everest Google Places Review/Business Review Enhance your online credibility by using Everest Google Places Review to display your Google business and places information with positive reviews on websites. This Google reviews plugin is perfect for restaurants, retail locations, franchisees, land firms, lodgings, hotels, and just about any business with a site and reviews on Google. The WordPress business review plugin comes with ten templates for business reviews with user ratings and ten badges for displaying business information. In addition, it has five attractive layouts for floating reviews—floating off-canvas. It allows you to display up to five Google Places user reviews. You also have options to show only five-star reviews or hide reviewer images, user rating, or average rating. You can integrate this responsive, translation-ready plugin with the Google Places API, and you can also enable an autocomplete feature for Google Maps. 9. WooCommerce Photo Reviews WooCommerce Photo Reviews is a responsive and multilingual WooCommerce reviews plugin that helps you do the following: send review reminder emails asking customers to review their purchased products allow customers posting reviews to include product pictures send thank you email with a coupon code when a customer review is published Reviews with photos are displayed in two styles, and customers will see a rating counter and a review filter. As a store owner, you can create and edit reviews, as well as importing reviews from AliExpress, Loox, and Shopify, or from a CSV file. The plugin supports rich snippets. 10. Ratings and Reviews Plugin for WordPress Using the Ratings and Reviews Plugin for WordPress, you can attach reviews and place ratings on your posts. You can set up single or multiple rating criteria that visitors will rate separately. Reviewers can attach photos and images to their reviews and display pictures along with the review on the front end. You can display photos in a gallery slider format and even choose auto-rotation. You can also import and export CSVs of reviews and their images. Average ratings are displayed as stars near each review. Visitors can also vote on the helpfulness of each review and leave comments on the reviews. Reviews are filtered by average rating, post date, votes, or randomly. Reviews can be shared on social media through customizable social buttons. You have a wide range of customizable review templates to choose from and can create separate pages for review submission, single review, or all pages. You get notified by email about new or modified reviews. The author also receives a notification when the review is approved. 11. Ultimate Reviewer: Elementor and WPBakery Page Builder Add-On Turn any WordPress theme into a full reviews website using Ultimate Reviewer WordPress Plugin. This plugin is built to work with WPBakery Page Builder and Elementor. You can build amazing review templates for the admin, editor, or customer using the drag-and-drop builder. There are tons of preset templates that you can insert automatically or manually into a post, page, or custom post. You can choose from different rating styles including stars, circles, gauges, percentages, or bars. The templates support rich snippets, so that you can show the ratings in search engine results. You can manage user roles and set multiple criteria. You can add new review fields to selected post types including review scores, summary, review image, good or bad points, and review button. You can also choose which users are allowed to submit reviews, allow users to submit reviews via the comment form, moderate users’ reviews, and allow users to vote on other users’ reviews. Reviews of products can also be done through comparison tables. The plugin works with any theme out of the box, and no coding knowledge is required to use it. Free Review Plugins 1. Widget for Google Reviews This plugin display Google Business Reviews on your websites in a sidebar widget. A unique feature of the plugin is that it saves reviews in the WordPress database and does not depend on services like Google to show reviews in the widget. 2. Site Reviews Site Reviews allows your visitors to submit reviews with a 1 to 5 star rating on your website, similar to the way you would on TripAdvisor or Yelp. The plugin provides blocks, shortcodes, and widgets, along with full documentation. You can pin your best reviews so that they are always shown first, require approval before new review submissions are published, require visitors to be logged in to write a review, send custom notifications on a new submission, and much more. 3. WP Review Slider Using WP Review Slider, you can easily display your five-star reviews, ratings, and positive recommendations from your Facebook page on your WordPress website. You can also create a Twitter slider that includes positive tweets about your business or products to show off on your site! 4. Social Reviews and Recommendations The plugin displays Facebook page reviews and recommendations on your websites in a sidebar widget to get more traffic and user trust. The plugin uses the Facebook Graph API and requires admin rights to the Facebook page to get the reviews and recommendations. 5. Schema: All In One Schema Rich Snippets Get eye-catching results in search engines with the most popular schema markup plugin. It offers easy implementation of schema types like reviews, events, recipes, articles, products, services, etc. What Is a Rich Snippet? It is basically a short summary of your page in the search results of Google, Yahoo, Bing, and sometimes in the News feed of Facebook in a nice format with content such as star ratings, author photo, and image. 6. Wp Ultimate Review This review plugin helps visitors submit reviews for different posts, products, events, or anything that can be reviewed. It comes with an option to add affiliate links. Things to Consider When Looking for a Review Plugin Ease of Use A good review plugin must make it easy for users to set it up on their websites and for customers to enter their reviews. It should not need coding skills to use. Variety of Templates It should offer a wide choice of customizable templates with customizable features that can be modified to fit the look of a particular website or other requirements the website owner has. Support The plugin should come with clear documentation and multiple support options available if the website owner needs personal assistance. Compatibility With Other Word Press Themes and Plugins The flexibility of WordPress allows it to be used with different plugins and themes. Choose a plugin that is compatible with the WordPress ecosystem of themes and plugins. Rich Snippets Rich snippets support is indispensable for any plugin. Rich snippets display post review summaries and ratings on search-engine results and improve your visibility on search engines. Get a Review Plugin Now! Don’t miss out on this opportunity to feature customer reviews on your website using a premium WordPress review plugin from Elements or CodeCanyon. Your business will enjoy these benefits: free advertising boost trust in your brand or products solid social proof because customers trust the word of other customers improve your products based on feedback gained from customer reviews increased traffic and sales While you are on CodeCanyon, feel free to check out the thousands of premium WordPress plugins available, as well as the best-selling, trending WordPress plugins of the year. Get Your Envato Elements Subscription Now! Get Envato Elements now and gain access to millions of creative assets that you can download without any limitations for your creative work. You will get: Unlimited downloads of 54+ million creative assets under one no-strings-attached subscription covered by a lifetime commercial license. Access courses and tutorials on Envato Tuts+. No strings attached to your subscription. You can cancel anytime. If you want to learn more, check out these related posts from Envato Tuts+. WordPress 40 Reasons Envato Elements Is Great for WordPress Developers Daniel Strongin WordPress Plugins How to Create a WordPress Testimonial Slider Sajal Soni WordPress 18 Best WordPress Star Rating Plugins Monty Shokeen

  • Number Systems: An Introduction to Binary, Hexadecimal, and More
    by Jason Killian on 31 martie 2021 at 14:50

    Ever see crazy binary numbers and wonder what they meant? Ever see numbers with letters mixed in and wonder what’s going on? You’ll find out all of this and more in this article. Hexadecimal doesn’t have to be scary. Introduction: What Is a Number System? You probably already know what a number system is—ever hear of binary numbers or hexadecimal numbers? Simply put, a number system is a way to represent numbers. We are used to using the base-10 number system, which is also called decimal. Other common number systems include base-16 (hexadecimal), base-8 (octal), and base-2 (binary). In this article, I’ll explain what these different systems are, how to work with them, and why knowing about them will help you. Activity Before we get started, let’s try a little activity for fun. There are many different ways to represent a color, but one of the most common is the RGB color model. Using this model, every color is made up of a combination of different amounts of red, green, and blue. You may be wondering how colors relate to number systems. In short, on a computer, any color is stored as a large number: a combination of red, green, and blue. (We’ll go into more detail on this later.) Because it’s just a number, it can be represented in multiple ways using different number systems. Your job is to guess how much red, green, and blue is in the background color of the activity below. The values for red, green, and blue can range from 0 to 255. Feel free to use the various hints provided to help you out. If you don’t understand the numerical hints yet, no problem! You can see what your guess looks like using the Check Guess button. And if the background color happens to make the text difficult to read, hit New Color. Right now, it may seem tricky, but hopefully by the end of the article, it will seem easy. Looking at Base-10 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11… You’ve counted in base-10 all of your life. Quick, what is 7+5? If you answered 12, you are thinking in base-10. Let’s take a closer look at what you’ve been doing all these years without ever thinking about it. Let’s take a quick look at counting. First, you go through all the digits: 0, 1, 2… Once you hit 9, you have no more digits to represent the next number. So you change it back to 0 and add 1 to the tens digit, giving you 10. The process repeats over and over, and eventually you get to 99, where you can’t make any larger numbers with two digits, so you add another, giving you 100. Although that’s all very basic, you shouldn’t overlook what’s going on. The rightmost digit represents the number of ones, the next digit represents the number of tens, the next the number of hundreds, etc. Visualizing Base-10 Confused by these descriptions? No problem—let’s visualize it instead. Imagine a large number, like 2347. We can represent that with two groups of one thousand, three groups of one hundred, four groups of ten, and seven individual blocks. Visualizing Base-10 using blocksUse the tool below to output a number into its composite “groups”. Base-10 Mathematically You may have noticed a pattern by now. Let’s look at what’s going on mathematically, using 2347 as an example. As you saw, there are 2 groups of a thousand. Not coincidentally, 1000 = 10*10*10, which can also be written as 103. There are 3 groups of a hundred. Again, not coincidentally, 100 = 10*10 or 102. There are 4 groups of ten, and, 10 = 101. Finally, there are 7 groups of one, and 1 = 100. (That may seem strange, but any number to the power of 0 equals 1, by definition.) This is essentially the definition of base-10. To get a value of a number in base-10, we simply follow that pattern. Here are a few more examples: 892 = 8*102+9*101+2*100 1147 = 1*103+1*102+4*101+7*100 53 = 5*101+3*100 Admittedly, this all seems a little silly. We all know what value a base-10 number is because we always use base-10, and it comes naturally to us. As we’ll see soon, though, if we understand the patterns in the background of base-10, we can understand other bases better. Base-8 On to base-8, also called octal. Base-8 means just what it sounds like: the system is based on the number eight (as opposed to ten). Remember how in base-10 we had ten digits? Now, in base-8, we are limited to only eight digits: 0, 1, 2, 3, 4, 5, 6, and 7. There’s no such thing as 8 or 9. We count the same way as we normally would, except with only eight digits. Instead of a lengthy explanation, simply try out the demo below by clicking Count Up 1 to see how counting in base-8 works. You should notice a similar pattern to before; after we get to 7, we run out of different digits for any higher number. We need a way to represent eight of something. So we add another digit, change the 7 back to 0, and end up with 10. Our answer of 10 in base-8 now represents what we would normally think of as 8 in base-10. Talking about numbers written in multiple bases can be confusing. For example, as we have just seen, 10 in base-8 is not the same as 10 in base-10. So, from this point on, I’ll use a standard notation where a subscript denotes the base of numbers if needed. For example, our base-8 version of 10 now looks like 108. I find it a lot easier to understand this if I change the way I read these numbers in my head, too. For example, for 108, I read “octal one-oh” or “one-oh in base-eight”. For 1010 I read “decimal one-oh” or “one-oh in base-ten”. Great, so we know 108 represents eight items. (Always feel free to plug a number into the first tool for a visualization.) What’s the next number after 778? If you said 1008, you’re correct. We know from what we’ve learned so far that the first 7 in 778 represents groups of 8, and the second 7 represents individual items. If we add these all up, we have 7*8 + 7*1 = 63. So we have a total of 6310. So 778=6310. We all know 6410 comes after 6310. Converting From Base-8 to Base-10 Let’s look at a wordier example now. John offers to give you 478 cookies, and Jane offers to give you 4310 cookies. Whose offer do you take? If you want, go ahead and generate the graphic for 478 with the first tool. Let’s figure out its base-10 value so we can make the best decision! As we saw when counting, the four in 478 represents the number of groups of eight. This makes sense—we are in base-8. So, in total, we have four groups of eight and seven groups of one. If we add these all up, we get 4*8 + 7*1 = 3910. So 478 cookies is the same as 3910 cookies. Jane’s offer seems like the best one now! The pattern we saw before with base-10 holds true here also. We’ll look at 5238. There are five groups of 82, two groups of 81, and three groups of 80 (remember, 80=1). If we add these all up, 5*82 + 2*81 + 3*80 = 5*64+2*8+3 = 339, we get 33910 which is our final answer. The diagram below shows the same thing visually: Converting 523 from base-8 to base-10Here are a couple more examples: 1118 = 1*82+1*81+1*80 = 64+8+1 = 7310 438 = 4*81+3*80 = 32+3 = 3510 61238 = 6*83+1*82+2*81+3*80 = 3072+64+16+3 = 315510 Converting From Base-10 to Base-8 Converting from base-10 to base-8 is a little trickier, but still straightforward. We basically have to reverse the process from above. Let’s start with an example: 15010. We first find the largest power of 8 that is smaller than our number. Here, this is 82 or 64 (83 is 512). We count how many groups of 64 we can take from 150. This is 2, so the first digit in our base-8 number is 2. We have now accounted for 128 out of 150, so we have 22 left over. The largest power of 8 that is smaller than 22 is 81 (that is, 8). How many groups of 8 can we take from 22? Two groups again, and thus our second digit is 2. Finally, we are left with 6, and can obviously take 6 groups of one from this, our final digit. We end up with 2268. In fact, we can make this process a touch clearer with math. Here are the steps: 150/82 = 2 remainder 22 22/81 = 2 remainder 6 6/80 = 6 Our final answer is then all of our non-remainder digits, or 226. Notice that we still start by dividing by the highest power of 8 that is less than our number. Dealing With Any Base It’s important to be able to apply the concepts we’ve learned about base-8 and base-10 to any base. Just as base-8 had eight digits and base-10 had ten digits, any base has the same number of digits as its base. So base-5 has five digits (0-4), base-7 has seven digits (0-6), etc. Now let’s see how to find the base-10 value of any number in any base. Say we are working in base-b, where b can be any positive integer. We have a number d4d3d2d1d0 where each d is a digit in a number. (The subscripts here don’t refer to the base of the number but simply differentiate each digit.) Our base-10 value is simply d4*b4 + d3*b3 + d2*b2 + d1*b1 + d0*b0. Here’s an example: we have the number 32311 in base-4. Notice how our number only has digits from zero to three since base-4 only has four total digits. Our base-10 value is 3*44 + 2*43 + 3*42 + 1*41 + 1*40 = 3*256 + 2*64 + 3*16 + 1*4 + 1*1 = 949. We could, of course, follow this pattern with any amount of digits in our number. Base-16 Base-16 is also called hexadecimal. It’s commonly used in computer programming, so it’s very important to understand. Let’s start with counting in hexadecimal to make sure we can apply what we’ve learned about other bases so far. Since we are working with base-16, we have 16 digits. So we have 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, … and yikes! We’ve run out of digits, but we still need six more. Perhaps we could use something like a circled 10? The truth is, we could, but this would be a pain to type. Instead, we simply use letters of the alphabet, starting with A and continuing to F. Here’s a table with all the digits of base-16: Base 16 Digit Value 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 A 10 B 11 C 12 D 13 E 14 F 15 Other than these extra digits, hexadecimal is just like any other base. For example, let’s convert 3D16 to base-10. Following our previous rules, we have: 3D16 = 3*161 + 13*160 = 48 + 13 = 61. So 3D16 is equal to 6110. Notice how we use D’s value of 13 in our calculation. We can convert from base-10 to base-16 in a similar way to what we did with base-8. Let’s convert 69610 to base-16. First, we find the largest power of 16 that is less than 69610. This is 162, or 256. Then: 696/162 = 2 remainder 184 184/161 = 11 remainder 8 8/160 = 8 remainder 0 We have to replace 11 with its digit representation B, and we get 2B816. Feel free to try some more conversions for practice. You can use the application below to check your answers: Binary! (Base-2) On to the famous base-2, also called binary. While everyone knows binary is made up of 0s and 1s, it is important to understand that it is no different mathematically than any other base. There’s an old joke that goes like this: “There are only 10 types of people in the world: those who understand binary and those who don’t.” Can you figure out what it means? Let’s try a few conversions with base-2. First, we’ll convert 1011002 to base-10. We have: 101100 = 1*25 + 1*23 + 1*22 = 32 + 8 + 4 = 4410. Now let’s convert 65 to binary. 26 is the highest power of 2 less than 65, so: 65/26 = 1 remainder 1 1/25 = 0 remainder 1 1/24 = 0 remainder 1 1/23 = 0 remainder 1 1/22 = 0 remainder 1 1/21 = 0 remainder 1 1/20 = 1 remainder 0 And thus we get our binary number, 10000012. Understanding binary is super important. I’ve included a table below to point out digits’ values. For example, the value of 100012 is 17, which is the sum of the values of the two 1 digits (16+1). This is nothing different than we have done before—it’s just presented in an easy-to-read way. Tricks and Tips Normally, when converting between two bases that aren’t base-10, you would do something like this: Convert the number to base-10 Convert the result to the desired base However, there’s a trick that will let you convert between binary and hexadecimal quickly. First, take any binary number and divide its digits into groups of four. So let’s say we have the number 10111012. Divided up, we have 0101 1101. Notice how we can just add extra zeroes to the front of the first group to make even groups of 4. We now find the value for each group as if it were its own separate number, which gives us 5 and 13. Finally, we simply use the corresponding hexadecimal digits to write out the base-16 number, 5D16. We can also go in the other direction, by converting each hexadecimal digit into four binary digits. Try converting B716 to binary. You should get 101101112. This trick works because 16 is a power of 2. What this means is that we use a similar trick for base-8, which is also a power of 2: Of course, you can also reverse the process to go from base-8 to binary. Here are a few other examples: Converting Binary to Hexadecimal Let’s try to convert 1001111001102 to hexadecimal. When we break it into units of 4, we get 1001, 1110, and 0110. Their values in decimal are 9, 14, and 6 respectively. Converting them to hexadecimal will give us 9, E, and 6. So our number will be 9E6 in hexadecimal. Converting Hexadecimal to Binary Now we will change the hexadecimal number A1D16 to binary. We begin by converting each separate digit to its decimal counterpart. A, 1, and D therefore become 10, 1, and 13 respectively. Now we just convert these decimals into binary to get 1010, 0001, and 1101 respectively. The final binary representation becomes 1010000111012. Converting Binary to Octal We can use a similar technique to convert binary to octal. This time, we will divide our numbers into groups of 3 because 2^3 = 8. Let’s say you want to convert 11111012 to its octal value. Dividing it into units of 3 starting from the rightmost end will give us 1, 111, and 101. Now, we can just calculate the value of these segments to get the octal representation. None of the units will have a value above 7, so we can just combine them directly to get the octal value. The values 1, 111, and 101 will become 1, 7, and 5 in octal respectively. So our number in octal representation will be 1758. Converting Octal to Binary Finally, we will convert the octal number 72458 to binary. Separating the number into individual digits will give us 7, 2, 4, and 5. We can now convert them to binary such that each representation has 3 digits. This means that 7, 2, 4, and 5 will become 111, 010, 100, and 101 respectively. Combining them all will give us 111010100101 as the correct binary representation. Conclusion Let’s go all the way back and revisit the color guessing game. When converted to hexadecimal, the first two digits represent the amount of red, the next two the amount of green, and the final two the amount of blue. So, if our color is 17FF1816, we can easily tell that our red component is 1716, or 2310. Our green component is FF16, or 25510. Finally, our blue component is 1816, or 2410. If we are given the base-10 version of our color, 157263210, we need to convert it to hexadecimal before we can tell anything about it. Try the game again, and see how much better you can do! Understanding different number systems is extremely useful in many computer-related fields. Binary and hexadecimal are very common, and I encourage you to become very familiar with them. Thanks for reading—I hope you’ve learned a lot from this article! If you have any questions, please ask them below. This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.

  • Android Essentials: Creating Simple User Forms
    by Esther Vaati on 31 martie 2021 at 14:22

    Android applications often rely upon data supplied by users. This tutorial walks you through the creation and use of a number of the most common controls for collecting data from the user. For this tutorial, you will design and implement a membership registration form. Whether you’re in charge of recruiting members for an app, an event, or a club, a simple and well-designed member registration form will speed up the registration process, hence encouraging more users to sign up. App Overview Layouts in Android define the structure of the user interface (UI) of your application. The UI consists of elements which are built using a hierarchy of views and view groups. A view consists of UI components such as buttons, text boxes, checkboxes, radio buttons, images, etc. See the diagram below representing a standard application layout. Before you begin the design process, you need to give some thought to what kind of data you want to collect from the user. Consider the types of data you want to collect and choose the appropriate types of control.  Our membership form will be for a gym and will collect the following information: full name gender current weight height goal weight age phone address Getting Started Open Android Studio and create a new project with an empty activity. Wait for Android Studio to finish creating your project, and then open app > res > layout > activity_main.xml. This file defines the layout for the user interface (UI).  A UI in Android is defined in XML files. The easiest way to build a UI in Android Studio is with the Android Studio Layout Editor. The Layout Editor writes the XML for you as you drag and drop views to build your layout. In this project, we will use the ConstraintLayout. A ConstraintLayout is a layout that provides a flexible way for creating views. Add a Title to the Layout In the Palette panel, click Text and add it to the design. You might need to move it around so that it stays at the top of the layout.  Any time you drag an element in the visual editor of Android Studio, you will see an error immediately: “This view is not constrained…”. This error simply means that the element is not Constrained and therefore won’t render correctly when you run the App. This only applies to Constraint Layouts.  This TextView control will display the form’s description and purpose to the user. This control displays a string resource called @string/member_title, which must be defined within the /res/values/strings.xml string resource file. <resources> <string name=”app_name”>LEXO</string> <string name=”title”>Membership Form</string> </resources> The XML for the TextView should look like this: <TextView android:id=”@+id/title” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”28dp” android:text=”@string/title” android:textColor=”#D500F9″ android:textSize=”28sp” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.436″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Notice the id attribute on the text view; it is recommended that each control element is assigned an id so that it’s easy to reference from the Java files. Add a Full Name Field An EditText element is used to enter and modify text. Add an EditText control for the name just below the TextView. You must also specify the input type attribute. In this case, we will use android:inputType=”text” for plain text. Here is the full XML. <EditText android:id=”@+id/names” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”96dp” android:ems=”10″ android:hint=”@string/name” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.184″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add the Gender Controls First, add a TextView for the gender label. <TextView android:id=”@+id/gender” android:layout_width=”83dp” android:layout_height=”32dp” android:layout_marginTop=”172dp” android:text=”Gender” android:textSize=”18sp” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.118″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Radio buttons allow the user to select one option from a set. They should be grouped together to ensure only one radio button is selected at any given time; this is done by grouping them inside a RadioGroup. Here is the XML for gender selection. <RadioGroup android:id=”@+id/radioGroup” android:layout_width=”205dp” android:layout_height=”32dp” android:layout_marginTop=”172dp” android:orientation=”horizontal” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.834″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent”> <RadioButton android:id=”@+id/radioButton” android:layout_width=”45dp” android:layout_height=”33dp” android:text=”M” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler”/> <RadioButton android:id=”@+id/female” android:layout_width=”45dp” android:layout_height=”33dp” android:text=”F” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.655″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler”/> <RadioButton android:id=”@+id/other” android:layout_width=”96dp” android:layout_height=”33dp” android:text=”Other” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.949″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler”/> </RadioGroup> Add the Current Weight and Height Fields Add two EditTexts from the palette. These will act as fields for the current weight and height. Since we want numbers to be displayed when the user starts entering data, we will use number as the input type. Set the hint attribute to supply a string to display in the EditText control when it’s empty. Here is the XML for both controls on the same line.  <EditText android:id=”@+id/current_weight” android:layout_width=”164dp” android:layout_height=”46dp” android:layout_marginTop=”260dp” android:ems=”10″ android:hint=”@string/currrent_weight” android:inputType=”number” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.151″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> <EditText android:id=”@+id/height” android:layout_width=”157dp” android:layout_height=”44dp” android:layout_marginTop=”260dp” android:ems=”10″ android:hint=”@string/height” android:inputType=”number” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.919″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add Goal Weight and Age Fields Add another pair of plain text fields for the goal weight and age. The attribute for both input controls will be android:inputType=”number”. This will ensure that a numeric keyboard is shown when the user starts entering data. Both input controls will be on the same line. These will be on the same line as above. Apply both vertical and horizontal constraints to it. <EditText android:id=”@+id/goal_weight” android:layout_width=”175dp” android:layout_height=”52dp” android:layout_marginTop=”344dp” android:ems=”10″ android:hint=”@string/goal_weight” android:inputType=”number” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.156″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> <EditText android:id=”@+id/age” android:layout_width=”140dp” android:layout_height=”48dp” android:layout_marginTop=”348dp” android:ems=”10″ android:hint=”Age” android:inputType=”number” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.863″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add a Phone Number Field Add another EditText below the goal weight and age. This EditText will be used to fill in the phone number. The attribute for this element will be android:inputType=”phone”. Setting the EditText to inputType to phone is helpful since it will be easy to add digits. When the user touches this field, they will be presented with the screen below.  Phone input typeThe rest of the XML looks like this: <EditText android:id=”@+id/Phone” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”428dp” android:ems=”10″ android:hint=”@string/phone” android:inputType=”phone” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.194″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add an Address Field to the Layout Add another EditText below the phone field. This EditText will be used for the address of the user. You might also want to increase the space provided for the address field. The attribute for this element will be android:inputType=”text”. <EditText android:id=”@+id/address” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”500dp” android:ems=”10″ android:hint=”@string/address” android:inputType=”text” android:maxLines=”2″ app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.194″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add an „Accept Membership Rules” Checkbox Next, add a CheckBox control below the address field. This checkbox control is a mandatory field that lets the user accept the membership rules and conditions before submitting their details. You can choose to apply a background color to the checkbox to give it an emphasis.  <CheckBox android:id=”@+id/conditions” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”580dp” android:backgroundTint=”#D500F9″ android:buttonTint=”#D500F9″ android:text=”@string/conditions” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.964″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Add a Submit Button Lastly, add the submit button. You can change the background color of the button to fit your brand’s identity. The most important attribute of the button is the onClick attribute.  <Button android:id=”@+id/button” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginTop=”684dp” android:backgroundTint=”#D500F9″ android:onClick=”submitbuttonHandler” android:text=”SUBMIT” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.425″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> Reading User Input Now that we are done with the UI, let’s implement a user interaction mechanism in our application. Let’s start with the name input field. Open MainActivity.java and use the findViewById() method to return an instance of the full name on the onCreate() method. public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText nameEditText = (EditText) findViewById(R.id.names); String fullName = nameEditText.getText().toString(); } Responding to Radio Button Click Events Whenever a user clicks on a radio button, the RadioButton object receives an on-click event. The click event is defined by adding the android:onClick attribute to the radio button in the XML file. The value of the android:onClick attribute must be the name of the method called in response to a click event. The method is implemented in the Activity file.  Add the android:onClick attribute to each of the radio buttons in the XML file. <RadioGroup android:id=”@+id/radioGroup” android:layout_width=”205dp” android:layout_height=”32dp” android:layout_marginTop=”172dp” android:orientation=”horizontal” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.834″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent”> <RadioButton android:id=”@+id/radioButton” android:layout_width=”45dp” android:layout_height=”33dp” android:text=”M” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler”/> <RadioButton android:id=”@+id/female” android:layout_width=”45dp” android:layout_height=”33dp” android:text=”F” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.655″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler”/> <RadioButton android:id=”@+id/other” android:layout_width=”96dp” android:layout_height=”33dp” android:text=”Other” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintHorizontal_bias=”0.949″ app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” android:onClick=”radioButtonhandler” /> </RadioGroup> Implement the method in the Java file. public void radioButtonhandler(View view) { // Decide what happens when a user clicks on a button } Next, use the findByview() method to return an instance of the rest of the EditText elements on the Oncreate() method. Then use the getText() method to get the values from the input fields. public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText nameEditText = (EditText) findViewById(R.id.names); String fullName = nameEditText.getText().toString(); EditText currentWeightEditText = (EditText) findViewById(R.id.current_weight); String currentWeight = currentWeightEditText.getText().toString(); EditText heightEditText = (EditText) findViewById(R.id.height); String Height = heightEditText.getText().toString(); EditText goalWeightEditText = (EditText) findViewById(R.id.gol_weight); String GoalWeight = goalWeightEditText.getText().toString(); EditText ageEditText = (EditText) findViewById(R.id.age); String age = ageEditText.getText().toString(); EditText phoneEditText = (EditText) findViewById(R.id.names); String phone = phoneEditText.getText().toString(); EditText addressEditText = (EditText) findViewById(R.id.names); String address = addressEditText.getText().toString(); } Read Input From a Checkbox An Android checkbox generally has two states: checked and unchecked. The methods implemented by a checkbox are: public boolean isChecked() public void setChecked(boolean status) We will use the isChecked() method to check the current state of the checkbox. The state is a boolean value, either true or false. If a checkbox is checked, it returns true; otherwise, it returns false.  //initiate a check box CheckBox conditionsCheckBox = (CheckBox) findViewById(R.id.conditions_CheckBox); //check current state of the check box Boolean checkBoxState = conditionsCheckBox.isChecked(); Listening to Button Click Events Since we already defined an onClick attribute called submitbuttonHandler on the submit button, we will implement a method called submitbuttonHandler() in MainActivity.java. public void submitbuttonHandler(View view) { //Decide what happens when the user clicks the submit button } Here is the final app. Generate the Appropriate Email Details Now that you’ve got all your form data, you’re ready to craft a message. Simply process all the data fields and build an appropriate feedback message. For example, you might use some fields in the message subject and others in the message body. You can use format strings to help build the appropriate strings, the specifics of which will be discussed in an upcoming quick tip. Conclusion In this tutorial, you learned how to use various input controls to design a membership form within an Android application. The EditText control is versatile and powerful, allowing for many different types of text and input forms. Radio buttons allow the user to choose only one of the given choices at a time. The CheckBox controls help limit the user’s input to a specific set of responses. The Button control is a simple way to generate an event to process the form input. There are many other controls worth exploring for use within forms. There’s a lot more we could cover regarding good form design, how form controls fit into the Activity lifecycle, and how input methods and such factor into things, but for now, we’ve focused on gaining a good handle on the basics of form controls and how to use them.