Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Getting started programming in PHP
Hi, there! Welcome to our team!
We will program in the PHP language. It is what is called a preprocessor language. PHP can be used to assemble pages from pieces, like an erector set. PHP then turns the code of these assembled pages into HTML. This is what is called preprocessing — the page you see has already been processed by PHP on the web server, before it is sent as HTML to your browser. If you have doubts about whether you need PHP, we recommend that you read this article. It explains in detail why this language is so popular.
PHP is convenient for website development because HTML alone does not know how to assemble pages and to automatically change information on them. This is what PHP adds.
If you are not familiar with HTML, take the Introduction to HTML and CSS chapter. This knowledge will come in handy when working with PHP.
In this chapter, we will get to know how PHP works from practical examples. Let’s get started!
We have the main page of our online store. The PHP code that assembles the main page can be found in the editor on the left. The mini-browser on the right displays this page. Delete one line in the editor to see what changes in the mini-browser:
require('components/company_info.php');We will find out the significance of this line later. For now we can simply delete it!
The mini browser in our interface is the same as the browser on your computer. It allows you to view the web pages that we will work on in the course. Of course, you can’t use it to browse social networks. Rather, it is there to help you gain a thorough knowledge of the programming topics in our course.
Files
<?php
require('components/header.php');
require('components/company_info.php');
require('components/footer.php');
?>
<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">
<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>
.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!
Comments