HTML Academy
Using the gate OR in PHP
Conditions in PHP8/15
Back to the list of tasks
  • 1. Change the value of the variable
  • 2. The if condition in PHP
  • 3. Using arithmetic operators in PHP
  • 4. Add the price to the product page
  • 5. Embedding the condition if in the template
  • 6. Using the logical values true and false
  • 7. Using the gate OR in PHP
  • 8. String concatenation in PHP
  • 9. Embedding a variable in a template
  • 10. Check several conditions
  • 11. Using the gate AND in PHP
  • 12. Introduction to else
  • 13. Add the delivery cost to the template
  • 14. Substitute values from the database with variables
  • 15. Summary of “Conditions in PHP”
Embedding a variable in a template
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

String concatenation in PHP

Now add the class item-hot, which will show the label “best seller” on the page, to the page markup. It will appear if at least one or more following two conditions is true: the product is discounted by more than USD 1,400 or the product has only one item left in stock.

We already know how to write conditions in the page markup that modify it. But this can be cumbersome. For the sake of adding just one new line, we can write as many as three new lines in the template. But there is another way to modify the page markup: embed only one variable in it, and in the script formulate the condition itself and write the desired string to this variable.

To complete the assignment, we need to add the class item to the page markup and, depending on whether the condition is satisfied, the class item-hot. Therefore, we need to write either the string 'item' or 'item item-hot' in the variable. We already know how to write one value to a variable. How can we add a second one? We do so by using concatenation, which is the operation of combining several strings into one. We do this using a period . or by using the concatenation operator.

$mood = 'I love' . ' PHP';
// What will happen? That's right, 'I love PHP'.

It’s time to get to work on the assignment. Let’s create the variable $product_class. We will write the required values there and make sure that concatenation works.

Comments

Files
    <?php require('products_db.php'); require('components/header.php'); $id = $_GET['product_id']; $title = get_product_title($id); $img_url = get_img_url($id); $price = 2000; $discount = 1500; $is_new = false; $is_last = false; // Create a variable here if ($discount > 0) { $price_with_discount = $price - $discount; } if ($discount > 1400 || $is_last) { $product_class = 'item'; muffin_log('Buy now before it‘s too late!'); }; // Output the variable to the console here require('components/product_info.php'); require('components/footer.php'); ?>
    <footer class="site-footer"> <div class="container"> <p class="copyright">© Muffin, 2019</p> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> </ul> <ul class="social-list"> <li> <a class="social-link-twitter" href="https://twitter.com"> <span class="visually-hidden">Twitter</span> </a> </li> <li> <a class="social-link-instagram" href="https://instagram.com"> <span class="visually-hidden">Instagram</span> </a> </li> <li> <a class="social-link-facebook" href="https://facebook.com"> <span class="visually-hidden">Facebook</span> </a> </li> </ul> </div> </footer> </body> </html>
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Online store for home furnishings</title> <link href="style.css" rel="stylesheet"> </head> <body> <header class="site-header"> <nav class="site-navigation"> <a class="logo-link" href="index.php"> <img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo"> </a> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.html">Delivery</a></li> <li><a href="contacts.html">Contact us</a></li> </ul> </nav> </header>
    <section class="item"> <div class="container"> <h1 class="item-title"><?= $title ?></h1> <div class="item-img"> <img src="<?= $img_url ?>" width="510" height="392" alt="<?= $title ?>"> </div> <div class="item-buy"> <div class="price"> <p class="price-old"><i>Price </i>$<?= $price ?></p> <?php if ($discount > 0): ?> <p class="price-new"><i>New price </i>$<?= $price_with_discount ?></p> <?php endif; ?> </div> </div> </div> </section>
    .visually-hidden:not(:focus):not(:active), input[type="checkbox"].visually-hidden, input[type="radio"].visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } body { min-width: 550px; padding: 0; margin: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; line-height: 18px; } a { text-decoration: none; color: inherit; } .container { width: 510px; padding: 0 20px; margin: 0 auto; } .site-navigation { display: flex; width: 510px; padding: 0 20px; margin: 0 auto; justify-content: space-between; } .site-header { position: relative; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .logo-link:hover, .logo-link:focus { opacity: 0.5; } .logo-link:active { opacity: 0.3; } .logo-link img { margin: 10px 0; } .navigation-list { display: flex; margin: 0 -15px 0 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: flex-end; } .navigation-list a:hover, .navigation-list a:focus { opacity: 0.5; } .navigation-list a:active { color: #ff8a00; } .navigation-list a { display: block; padding: 12px 15px 11px; color: #845927; } .intro .container { z-index: -1; min-height: 150px; margin-bottom: 20px; padding: 15px 0 0; box-sizing: border-box; background-image: url("img/index-background.jpg"); background-repeat: no-repeat; background-position: top right; } .intro-title { width: 240px; padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .intro-title b, .features-title b, .delivery-text b { font-weight: 400; color: #ff8a00; } .intro p { width: 210px; margin: 8px 0 10px; padding: 0; line-height: 20px; } .quote { display: block; position: relative; padding: 0 0 0 33px; margin: 20px 0 20px; font-family: "Georgia", "Times", serif; font-style: italic; } .quote p { padding: 0; margin: 0; font-size: 16px; line-height: 24px; quotes: none; } .quote::before { position: absolute; content: "«"; top: 0; left: 0; font-size: 36px; color: #ff8a00; } .author { display: block; padding: 0; margin: 4px 0; } .popular-products { margin: 0; background-color: #fff3e5; } .delivery, .custom, .contacts, .catalog, .item, .order { padding-top: 15px; padding-bottom: 10px; } .delivery-title, .custom-title, .contacts-title, .catalog-title, .order-title { padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .custom-columns { display: flex; flex-grow: 0; } .custom-columns img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 20px 20px 0; min-height: 200px; } .custom-columns div { margin: 5px 0 20px; } .products-list { display: flex; padding: 20px 0 0; margin: 0 0 0 -20px; flex-wrap: wrap; flex-shrink: 0; list-style: none; } .products-list li { display: flex; } .product-card { position: relative; display: flex; width: 132px; margin-bottom: 20px; margin-left: 20px; padding: 124px 12px 12px; flex-direction: column; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-new { position: relative; } .product-card-new::after { position: absolute; content: "new"; width: 34px; height: 15px; top: 8px; right: -2px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px 0 0 4px; } .product-card:hover, .product-card:focus { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .product-card:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .product-card img { position: absolute; top: 0; left: 0; order: -1; } .product-card h3 { margin: 0 0 2px 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 15px; line-height: 18px; font-weight: 400; } .product-card p { margin: 0 0 8px 0; padding: 0; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; line-height: 16px; } .price { margin-top: auto; font-weight: 700; font-size: 15px; color: #ff8a00; } .price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .map-link { display: block; margin-top: -20px; margin-bottom: 30px; color: #845927; } .map-link:hover, .map-link:focus { opacity: 0.5; } .map-link:active { color: #ff8a00; } .contacts img, .item-img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; } .item-title { display: inline-block; vertical-align: baseline; padding-right: 50px; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .item-new .item-title { position: relative; } .item-new .item-title::after { position: absolute; content: "new"; width: 38px; height: 16px; top: 13px; right: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 15px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px; } .item-hot .item-img { position: relative; padding-top: 36px; } .item-hot .item-img::before { position: absolute; content: ""; width: 510px; height: 36px; top: 0; left: 0; background-color: #fff3e5; background-image: url("img/icon-hot.svg"); background-repeat: no-repeat; background-size: 11px 14px; background-position: 122px 10px; } .item-hot .item-img::after { position: absolute; content: "Buy now before it's too late! The product will soon sell out!"; top: 10px; left: 140px; } .item-buy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin: 20px 0 -10px; } .item-buy .price { display: flex; flex-wrap: wrap; align-items: baseline; position: relative; max-width: 510px; margin-top: -2px; margin-bottom: 10px; flex-shrink: 0; } .item-buy p { margin: 0 25px 10px 0; word-wrap: break-word; color: #000000; font-weight: 400; } .item-buy i { display: block; margin-bottom: 2px; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; font-weight: 400; color: #000000; } .price-old i { margin-bottom: 3px; } p.price-new { font-weight: 700; font-size: 18px; color: #ff8a00; } .button { display: flex; flex-shrink: 0; max-width: 462px; padding: 8px 24px 7px; margin-bottom: 40px; text-align: center; color: #ffffff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background-color: #ff8a00; border-radius: 4px; box-shadow: 0 4px 4px rgba(255, 138, 0, 0.4); } .button:hover, .button:focus { background-color: #ff9900; box-shadow: 0 6px 8px rgba(255, 138, 0, 0.4); } .button:active { background-color: #ff8a00; box-shadow: 0 2px 2px rgba(255, 138, 0, 0.6); } .order-list { width: 100%; margin: 10px 0 20px; border-collapse: collapse; text-align: left; } .order-list img { width: 68px; height: 52px; margin-bottom: -5px; } .order-list tr { border-bottom: 1px solid #e2e2e2; } .order-list td { padding: 10px 20px 10px 0; } .order-list th:last-child { width: 140px; } .order-list th { padding: 10px 20px 10px 0; font-family: "Georgia", "Times", serif; font-style: italic; font-weight: 400; vertical-align: bottom; } .order-list td:last-child, .order-list th:last-child { padding-right: 0; } .contacts-info { margin: -10px 0 20px; } .contacts-info p { position: relative; padding-left: 16px; margin: 12px 0; } .contact-phone::before { position: absolute; content: ""; width: 10px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-phone.svg"); } .contact-address::before { position: absolute; content: ""; width: 9px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-pin.svg"); } .delivery-background { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 20px; min-height: 200px; background-image: url("img/delivery-background.jpg"); background-repeat: no-repeat; background-position: center left; } .delivery-text { width: 210px; margin-left: auto; padding: 16px 20px 20px; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .delivery-text p { margin: 8px; padding: 0; } .features { padding-top: 20px; padding-bottom: 10px; } .features-title, .services-title, .products-title { margin: 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 20px; line-height: 24px; font-weight: 400; } .features-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .features-list li { position: relative; width: 142px; margin-bottom: 10px; } .features-list li::before { position: absolute; content: ""; top: 2px; left: 0; } .feature-unique { padding-left: 22px; } .feature-unique::before { width: 16px; height: 12px; background-image: url("img/feature-unique.svg"); } .feature-organic { padding-left: 25px; } .feature-organic::before { width: 19px; height: 12px; background-image: url("img/feature-organic.svg"); } .feature-protected { padding-left: 16px; } .feature-protected::before { width: 10px; height: 12px; background-image: url("img/feature-protected.svg"); } .site-footer { background-color: #847462; } .site-footer .container { display: flex; flex-grow: 1; justify-content: space-between; } .copyright { margin: auto 0; flex-shrink: 0; color: #ffffff; } .site-footer .navigation-list { margin-right: 15px; margin-left: -15px; justify-content: left; } .copyright + .navigation-list { justify-content: center; margin-left: 15px; } .site-footer a { display: block; margin: 0; padding: 14px 15px; color: #ffffff; } .social-list { display: flex; width: 110px; padding: 0; margin: 0 -10px 2px; justify-content: end; flex-shrink: 0; flex-wrap: wrap; align-items: center; list-style: none; } .social-list a { display: block; width: 14px; height: 14px; padding: 10px; background-repeat: no-repeat; background-position: center; } .social-link-twitter { background-image: url("img/icon-twitter.svg"); } .social-link-instagram { background-image: url("img/icon-instagram.svg"); } .social-link-facebook { background-image: url("img/icon-facebook.svg"); } .social-list a:hover, .social-list a:focus { opacity: 0.5; } .social-list a:active { opacity: 0.3; } /* Additional styles for the product promotion page */ .violet-tuesday { margin: 0; padding: 16px 0 18px; text-align: center; color: #ffffff; background-color: #4626a1; background-image: url("img/violet-tuesday-bg.png"); background-size: 550px auto; background-repeat: no-repeat; background-position: center center; } .violet-tuesday b { display: block; margin-bottom: 8px; font-size: 32px; line-height: 32px; } .violet-tuesday p { margin: 0; font-size: 15px; line-height: 18px; } .item-violet { min-height: 240px; color: #ffffff; background-color: #6f55d5; } .item-violet .container { position: relative; padding-top: 20px; } .item-violet .container::before { position: absolute; content: ""; width: 58px; height: 34px; top: -9px; left: 180px; background-image: url("img/dots-short.svg"); background-repeat: no-repeat; opacity: 0.3; } .item-violet .container::after { position: absolute; content: ""; width: 154px; height: 42px; top: 184px; left: 254px; background-image: url("img/dots-wide.svg"); background-repeat: no-repeat; } .item-violet .item-img { position: absolute; margin: 0; padding-top: 0; top: 15px; right: 20px; color: #000000; } .item-violet img { width: 255px; height: auto; } .item-violet .item-title { width: 230px; margin-bottom: 24px; word-wrap: break-word; font-size: 36px; line-height: 44px; font-weight: 700; } .item-violet .item-title::after, .item-violet .item-img::before, .item-violet .item-img::after { content: none; } .item-violet.item-new .item-img::after { position: absolute; content: "new"; width: 34px; height: 15px; top: 8px; left: auto; right: -2px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px 0 0 4px; } .item-violet .item-buy { margin-top: 0; flex-direction: column; } .item-violet .price { width: 230px; margin-top: 0; margin-bottom: 12px; padding-bottom: 4px; font-size: 24px; } .item-violet .price i { display: none; } .item-violet .price-old { font-size: 18px; color: #ffffff; } .item-violet .price-new { font-size: 24px; } .item-violet p { margin: 0 10px 12px 0; min-width: 0; line-height: 24px; } .item-violet .button { max-width: 177px; margin-bottom: 40px; } .item-violet.item-hot .price { margin-bottom: 44px; } .item-violet.item-hot .price::after { position: absolute; content: "The product will soon sell out!"; font-size: 13px; font-weight: 400; color: #ffffff; top: auto; bottom: -25px; left: 16px; } .item-violet.item-hot .price::before { position: absolute; content: ""; width: 11px; height: 14px; top: auto; bottom: -22px; left: 0; background-image: url("img/icon-hot.svg"); }
    <?php function get_products() { return [ '1' => [ 'title' => 'Asusmer hanging bed', 'img_url' => 'img/item-asusmer.jpg', 'price' => 10000, 'discount' => 1000, 'is_new' => true, 'is_last' => false ], '2' => [ 'title' => 'Badeta armchair', 'img_url' => 'img/item-badeta.jpg', 'price' => 3500, 'discount' => 0, 'is_new' => false, 'is_last' => false ], '3' => [ 'title' => 'Blempere stickers', 'img_url' => 'img/item-blempere.jpg', 'price' => 500, 'discount' => 0, 'is_new' => false, 'is_last' => true ], '4' => [ 'title' => 'Bletub chandelier', 'img_url' => 'img/item-bletub.jpg', 'price' => 4000, 'discount' => 0, 'is_new' => true, 'is_last' => true ], '5' => [ 'title' => 'Breirberi organizer', 'img_url' => 'img/item-breirberi.jpg', 'price' => 5000, 'discount' => 3000, 'is_new' => true, 'is_last' => true ], '6' => [ 'title' => 'Mseyulida lamp', 'img_url' => 'img/item-mseyulida.jpg', 'price' => 4000, 'discount' => 500, 'is_new' => true, 'is_last' => false ], '7' => [ 'title' => 'Rmaeribi sofa', 'img_url' => 'img/item-rmaeribi.jpg', 'price' => 15000, 'discount' => 4500, 'is_new' => true, 'is_last' => true ], '8' => [ 'title' => 'Nnulm desk', 'img_url' => 'img/item-nnulm.jpg', 'price' => 5000, 'discount' => 0, 'is_new' => true, 'is_last' => false ], '9' => [ 'title' => 'Tre furniture set', 'img_url' => 'img/item-tre.jpg', 'price' => 20000, 'discount' => 3000, 'is_new' => true, 'is_last' => true ], '10' => [ 'title' => 'Granny style chandelier', 'img_url' => 'img/item-default-old-lamp.jpg', 'price' => 7000, 'discount' => 2000, 'is_new' => false, 'is_last' => true ], '11' => [ 'title' => 'Do lamp', 'img_url' => 'img/item-do.jpg', 'price' => 3500, 'discount' => 500, 'is_new' => true, 'is_last' => false ], '12' => [ 'title' => 'Tueta panel', 'img_url' => 'img/item-tueta.jpg', 'price' => 5000, 'discount' => 20, 'is_new' => true, 'is_last' => true ], '13' => [ 'title' => 'Nmyao pillow', 'img_url' => 'img/item-nmyao.jpg', 'price' => 1500, 'discount' => 0, 'is_new' => false, 'is_last' => false ], '14' => [ 'title' => 'Kel lamp', 'img_url' => 'img/item-kel.jpg', 'price' => 3000, 'discount' => 20, 'is_new' => true, 'is_last' => false ], '15' => [ 'title' => 'Omase pillow', 'img_url' => 'img/item-omase.jpg', 'price' => 2000, 'discount' => 100, 'is_new' => true, 'is_last' => true ], '16' => [ 'title' => 'Ormu basket', 'img_url' => 'img/item-ormu.jpg', 'price' => 2200, 'discount' => 20, 'is_new' => true, 'is_last' => false ], '17' => [ 'title' => 'Pinas paperclips', 'img_url' => 'img/item-pinas.jpg', 'price' => 100, 'discount' => 0, 'is_new' => true, 'is_last' => true ], '18' => [ 'title' => 'Preum compact cassette', 'img_url' => 'img/item-preum.jpg', 'price' => 200, 'discount' => 20, 'is_new' => true, 'is_last' => false ], '19' => [ 'title' => 'Rmob souvenir', 'img_url' => 'img/item-rmob.jpg', 'price' => 1500, 'discount' => 20, 'is_new' => false, 'is_last' => false ], '20' => [ 'title' => 'Tkuoko chandelier', 'img_url' => 'img/item-tkuoko.jpg', 'price' => 2,100, 'discount' => 1000, 'is_new' => false, 'is_last' => false ], '21' => [ 'title' => 'Breirberi organizer', 'img_url' => 'img/item-breirberi.jpg', 'price' => 5000, 'discount' => 20, 'is_new' => true, 'is_last' => false ], '22' => [ 'title' => 'Briatuo armchairs', 'img_url' => 'img/item-briatuo.jpg', 'price' => 7000, 'discount' => 5500, 'is_new' => false, 'is_last' => true ] ]; } function get_product_attribute($id, $attr) { $products = get_products(); $result = $products[$id][$attr] ?? null; return $result; } function get_product_price($id) { return get_product_attribute($id, 'price'); } function get_product_title($id) { return get_product_attribute($id, 'title'); } function get_img_url($id) { return get_product_attribute($id, 'img_url'); } function get_product_discount($id) { return get_product_attribute($id, 'discount'); } function get_product_is_new($id) { return get_product_attribute($id, 'is_new'); } function get_product_is_last($id) { return get_product_attribute($id, 'is_last'); }

    What didn’t you like in this task?

    Thanks! We’ll fix everything at once!

      The code has changed, click “Refresh” or turn autorun on.

      You’ve gone to a different page

      An error has occurred

      due to a lack of resources or an error in the program, try to fix the code to restart it

      100%

      Console

      Console
      Goalscompleted
      1. On line 12, add a variable $product_class with the value 'item'.
      2. On line 23 output the variable $product_class to the console.
      3. On line 19 in the condition body, change the value of the variable $product_class to $product_class. ' item-hot'. Look at what is output to the console.
      4. On the line below, delete the text that is output to the console: 'Buy now before it's too late!'.

      Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

      VISAMastercard

      Log in

      or

      Forgot your password?

      Sign up

      Sign up

      or
      Log in

      Restore access

      Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

      Forgot to connect your email to the profile? Email us and we’ll help.