Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Introduction to the $_GET command
We learned how to assign an identifier in one place, but we can’t yet change the value for each user each time. It must come from somewhere outside. And the best option is the address that is visible in the address bar of the browser.
The address has a special part that is called the “query parameters”. The query parameters are entered after the question mark.
https://www.gloevk.com/product.php?product_id=1In this example, we have one parameter product_id, and the number at the end of this address is its value.
You can get the query parameter using the command $_GET by indicating its name in square brackets.
muffin_log($_GET['product_id']); // We obtain the value of the query parameter. Output $_GET['product_id'] to the console. In the address bar of our mini browser, change the value of the query parameter and check if the number in the console changes. In the next step we will use $_GET['product_id'] to obtain the product item number.
Files
<section class="intro">
<div class="container">
<h1 class="intro-title">Comfort and coziness in <b>your</b> apartment</h1>
<p>A variety of home furnishings with delivery worldwide</p>
</div>
</section>
<section class="popular-products">
<div class="container">
<h2 class="visually-hidden">Top sellers</h2>
<ul class="products-list">
<li>
<a class="product-card" href="product.php?product_id=1">
<h3>Mseyulida</h3>
<p>floor lamp</p>
<span class="price"><del>$289</del> $288</span>
<img src="img/item-mseyulida.jpg" width="156" height="120" alt=""Mseyulida" floor lamp">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=2">
<h3>Rmaeribi</h3>
<p>three-seat sofa</p>
<span class="price">$5870</span>
<img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" "Rmaeribi" three-seat sofa">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=3">
<h3>Bletub</h3>
<p>ceiling chandelier</p>
<span class="price">$1360</span>
<img src="img/item-bletub.jpg" width="156" height="120" alt=""Bletub" ceiling chandelier">
</a>
</li>
</ul>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="features-title">What <b>sets</b> us apart from our competitors?</h2>
<ul class="features-list">
<li class="feature-unique">Our unique products are unlike anything else on the market</li>
<li class="feature-organic">We use only natural materials</li>
<li class="feature-protected">Our furniture is resistant to cat teeth and claws</li>
</ul>
</div>
</section>
<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>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<?php
require('components/header.php');
require('components/company_info.php');
require('components/footer.php');
<?php
require('components/header.php');
require('components/products_list.php');
require('components/footer.php');
?>
<section class="catalog">
<div class="container">
<h1 class="catalog-title">Product catalog</h1>
<ul class="products-list">
<li>
<a class="product-card" href="product.php?product_id=1">
<h3>Mseyulida</h3>
<p>floor lamp</p>
<span class="price"><del>$289</del> $288</span>
<img src="img/item-mseyulida.jpg" width="156" height="120" alt=""Mseyulida" floor lamp">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=2">
<h3>Rmaeribi</h3>
<p>three-seat sofa</p>
<span class="price">$5870</span>
<img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" "Rmaeribi" three-seat sofa">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=3">
<h3>Bletub</h3>
<p>ceiling chandelier</p>
<span class="price">$1360</span>
<img src="img/item-bletub.jpg" width="156" height="120" alt="Bletub ceiling chandelier">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=4">
<h3>Nnulm</h3>
<p>desk</p>
<span class="price">$6832</span>
<img src="img/item-nnulm.jpg" width="156" height="120" alt=""Nnulm" computer desk">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=5">
<h3>Asusmer</h3>
<p>hanging bed</p>
<span class="price"><del>$21320</del>$19320</span>
<img src="img/item-asusmer.jpg" width="156" height="120" alt=""Asusmer" hanging bed">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=6">
<h3>Tre</h3>
<p>furniture set</p>
<span class="price">$32560</span>
<img src="img/item-tre.jpg" width="156" height="120" alt=""Tre" furniture set">
</a>
</li>
</ul>
</div>
</section>
<?php
require('products_db.php');
require('components/header.php');
$id = 1;
// Use muffin_log here
$title = get_product_title($id);
$img_url = get_img_url($id);
require('components/product_info.php');
require('components/footer.php');
<section class="item">
<div class="container">
<h1 class="item-title"><?= $title ?></h1>
<img src="<?= $img_url ?>" width="510" height="392" alt="<?= $title ?>">
</div>
</section>
<?php
function get_products() {
return [
'1' => [
'title' => 'Mseyulida lamp',
'url' => 'img/item-mseyulida.jpg',
],
'2' => [
'title' => 'Rmaeribi sofa',
'url' => 'img/item-rmaeribi.jpg',
],
'3' => [
'title' => 'Bletub chandelier',
'url' => 'img/item-bletub.jpg',
],
'4' => [
'title' => 'Nnulm desk',
'url' => 'img/item-nnulm.jpg',
],
'5' => [
'title' => 'Asusmer hanging bed',
'url' => 'img/item-asusmer.jpg',
],
'6' => [
'title' => 'Tre furniture set',
'url' => 'img/item-tre.jpg',
],
'7' => [
'title' => 'Granny style chandelier',
'url' => 'img/item-default-old-lamp.jpg',
],
'8' => [
'title' => 'Do lamp',
'url' => 'img/item-do.jpg',
],
'9' => [
'title' => 'Epeus typewriter',
'url' => 'img/item-epeus.jpg',
],
'10' => [
'title' => 'Blempere stickers',
'url' => 'img/item-blempere.jpg',
],
'11' => [
'title' => 'Tueta panel',
'url' => 'img/item-tueta.jpg',
],
'12' => [
'title' => 'Breirburi organizer',
'url' => 'img/item-breirberi.jpg',
],
'13' => [
'title' => 'Nmyao pillow',
'url' => 'img/item-nmyao.jpg',
],
'14' => [
'title' => 'Kel lamp',
'url' => 'img/item-kel.jpg',
],
'15' => [
'title' => 'Omase pillow',
'url' => 'img/item-omase.jpg',
],
'16' => [
'title' => 'Ormu basket',
'url' => 'img/item-ormu.jpg',
],
'17' => [
'title' => 'Pinas paperclips',
'url' => 'img/item-pinas.jpg',
],
'18' => [
'title' => 'Preum compact cassette',
'url' => 'img/item-preum.jpg',
],
'19' => [
'title' => 'Badeta armchair',
'url' => 'img/item-badeta.jpg',
],
'20' => [
'title' => 'Rmob souvenir',
'url' => 'img/item-rmob.jpg',
],
'21' => [
'title' => 'Tkuoko chandelier',
'url' => 'img/item-tkuoko.jpg',
],
'22' => [
'title' => 'Briatuo armchairs',
'url' => 'img/item-briatuo.jpg',
]
];
}
function get_product_attribute($id, $attr) {
$products = get_products();
$result = $products[$id][$attr] ?? null;
return $result;
}
function get_product_title($id) {
return get_product_attribute($id, 'title');
}
function get_img_url($id) {
return get_product_attribute($id, 'url');
}
.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 {
margin: 15px 0 10px;
}
.delivery-title,
.custom-title,
.contacts-title,
.catalog-title,
.item-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 30px 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;
}
.contacts-info {
margin: -10px 0 30px;
}
.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 30px;
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 an alternate homepage */
.intro-alt {
min-height: 145px;
margin-bottom: 20px;
color: #ffffff;
background: linear-gradient(#ffad4c 0%, #ea9b3e 80%, #ffad4c 100%);
}
.intro-alt .container {
display: flex;
justify-content: space-between;
}
.intro-text {
flex-shrink: 0;
padding: 20px 0;
}
.intro-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 272px;
padding-top: 58px;
flex-shrink: 0;
}
.intro-item img {
position: absolute;
top: 14px;
right: 0;
}
.intro-item p {
margin-bottom: 2px;
z-index: 2;
}
.intro-alt .intro-title {
margin: 0;
padding: 0 0 4px;
font-family: "Georgia", "Times", serif;
font-size: 32px;
line-height: 36px;
font-weight: 700;
}
.intro-description {
margin: 0;
padding: 0 0 16px;
font-size: 15px;
font-weight: 700;
}
.intro-info {
margin: 0;
line-height: 22px;
}
.intro-alt code {
display: inline-block;
vertical-align: baseline;
margin: 0 8px;
padding: 1px 8px;
font-family: inherit;
color: #000000;
font-weight: 700;
letter-spacing: 0.5px;
background-color: #ffffff;
border-radius: 4px;
}
.intro-price {
z-index: 2;
font-size: 15px;
font-weight: 700;
}
.intro-price del {
margin-right: 2px;
font-weight: 400;
font-size: 13px;
color: #000000;
text-decoration: line-through;
}
.services-list {
display: flex;
padding: 0;
margin: 14px 0 0;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.services-list li {
position: relative;
width: 156px;
margin-bottom: 20px;
padding: 122px 0 0;
}
.services-list li::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 156px;
height: 114px;
background-repeat: no-repeat;
}
.service-cleaning::before {
background-image: url("img/service-cleaning.jpg");
}
.service-placing::before {
background-image: url("img/service-placing.jpg");
}
.service-decorating::before {
background-image: url("img/service-decorating.jpg");
}
.products-title {
padding-top: 20px;
}
.product-card-wide {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100px;
min-height: 81px;
margin-bottom: 30px;
margin-left: 20px;
padding: 15px 25px 15px 120px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-wide p {
margin-bottom: 10px;
}
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
Comments