How can I implement a website using HTML and CSS without functionality?

In summary, the conversation involved discussing how to implement a website using HTML and CSS, specifically focusing on creating a table and adjusting the layout using padding. The conversation also included troubleshooting an issue with an image source and finding the correct URL to use.
  • #141
Klaas van Aarsen said:
$content is an array and we can access the elements in it yes. (Thinking)

I want to check if the input that we give is in the array $content. For this do I write a code as the following?

Code: 
<?php include "content.php"; ?>

<html>
<body>
<?php
foreach($content as $item) {
    if ($item = $POST['search']){
       echo 'OK!'; 
    } 
}
?> 
... 
... 
</body> 
</html>

🧐
 
Technology news on Phys.org
  • #142
evinda said:
I want to check if the input that we give is in the array $content. For this do I write a code as the following?
Code that is like that yes. (Nod)

However, the foreach will only loop through the top level of $content, which contains only the key 'Phones'.
Furthermore, the element in the array is actually a key => value pair, which won't match your search string.
We should match only the key part, which means we should use a slightly different variant of the foreach loop. (Thinking)

Perhaps we should start with:
Code: 
<?php
foreach($content as $item) {
    echo $item
}
?>
so that we can see what kind of items we have in $content. 🤔
 
  • #143
Klaas van Aarsen said:
Code that is like that yes. (Nod)

However, the foreach will only loop through the top level of $content, which contains only the key 'Phones'.
Furthermore, the element in the array is actually a key => value pair, which won't match your search string.
We should match only the key part, which means we should use a slightly different variant of the foreach loop. (Thinking)

Ok, so with "foreach(\$content as \$item)" we check the top level. How do we check the next level or the last level? Do we write something like "foreach(\$content[Phones] as \$item)" for the second level? 🧐
 
Last edited by a moderator:
  • #144
evinda said:
Ok, so with foreach($content as $item) we check the top level. How do we check the next level or the last level? Do we write something like foreach($content[Phones] as $item) for the second level?
I think we need foreach($content as $deviceType => $deviceAttributes) for the top level. 🧐

We would indeed use a nested foreach for the second level, but the array won't be \$content["Phones"]. Not unless we want to skip the top level completely.
Instead we need to get the appropriate array from \$deviceAttributes. 🤔
 
  • #145
Klaas van Aarsen said:
I think we need foreach($content as $deviceType => $deviceAttributes) for the top level. 🧐

We would indeed use a nested foreach for the second level, but the array won't be \$content["Phones"]. Not unless we want to skip the top level completely.
Instead we need to get the appropriate array from \$deviceAttributes. 🤔

So to check first the top level you mean to write:
Code: 
<?php include "content.php"; ?>

<html>
<body>
<?php
foreach($content as $deviceType => $deviceAttributes) {
    if ($deviceType = $POST['search']){
       echo 'OK!'; 
    } 
}
?>

🧐 🧐

I get then:
1617572211267.png


(Sweating)
 
  • #146
evinda said:
So to check first the top level you mean to write:

I get then:
It says that the variable POST is not defined in line 7.
The other notices are consequences of the use of a variable that does not exist. 🧐

Perhaps the name of the variable is not POST but something else? Perhaps there is a typo in it?
What did you use when it was working? :unsure:
 
  • #147
Klaas van Aarsen said:
It says that the variable POST is not defined in line 7.
The other notices are consequences of the use of a variable that does not exist. 🧐

Perhaps the name of the variable is not POST but something else? Perhaps there is a typo in it?
What did you use when it was working? :unsure:

I had a typo. I corrected it and it works now. (Blush)

So if we input Mobile Phones we should get what we did at the beginning with the HTML code, I mean the two products, Apple and Samsung should be shown. Do we write this HTML code inside the "<?php ... ?>" or do we write this in the way we write Javascript, I mean to call a function and the function tells us if something is displayed or not? 🧐
 
  • #148
evinda said:
So if we input Mobile Phones we should get what we did at the beginning with the HTML code, I mean the two products, Apple and Samsung should be shown. Do we write this HTML code inside the "<?php ... ?>" or do we write this in the way we write Javascript, I mean to call a function and the function tells us if something is displayed or not?
Those 2 approaches do not seem mutually exclusive. We can do both. 🤔

That is, we can have a php foreach loop that outputs html code.
And we can call a php function to decide if we should do the output or not as well. 🤔
 
  • #149
Klaas van Aarsen said:
Those 2 approaches do not seem mutually exclusive. We can do both. 🤔

That is, we can have a php foreach loop that outputs html code.
And we can call a php function to decide if we should do the output or not as well. 🤔

Ok!

If we have the input "Phones" we want to display the two filters "Display" and "System" which are in the php file as:

$content = [
"Phones" => [
"filters" => ["Display", "System"],
... so do we write:
Code: 
<?php
foreach($content as $deviceType => $deviceAttribute => $filters) { 
?> 
   <input type="checkbox" checked="checked"><?php echo $filters;<br/>  ?> 
?>

? 🧐
 
  • #150
evinda said:
If we have the input "Phones" we want to display the two filters "Display" and "System" which are in the php file as:

so do we write:

That does not look like correct php. o_O

I've added line numbers to your code.
Code: 
1. <?php
2. foreach($content as $deviceType => $deviceAttribute => $filters) {
3. ?>
4.    <input type="checkbox" checked="checked"><?php echo $filters;<br/>  ?>
5. ?>
- In line 2 we have a foreach with brace open {, but I don't see a corresponding endforeach with a brace close }.
- In line 2 the syntax of foreach is not valid. Perhaps we should have a nested foreach?
- In line 4 we echo \$filters, but that is not a string, but an array.
- In line 5 we have a ?> that does not seem to belong to any starting <?php.
(Sweating)
 
  • #151
Klaas van Aarsen said:
That does not look like correct php. o_O

I've added line numbers to your code.
Code: 
1. <?php
2. foreach($content as $deviceType => $deviceAttribute => $filters) {
3. ?>
4.    <input type="checkbox" checked="checked"><?php echo $filters;<br/>  ?>
5. ?>
- In line 2 we have a foreach with brace open {, but I don't see a corresponding endforeach with a brace close }.
- In line 2 the syntax of foreach is not valid. Perhaps we should have a nested foreach?
- In line 4 we echo \$filters, but that is not a string, but an array.
- In line 5 we have a ?> that does not seem to belong to any starting <?php.
(Sweating)

I made some changes:
Code: 
1. <?php
2. foreach($content as $deviceType => $deviceAttribute) {
3.    foreach ($deviceAttribute as $deviceAttribute=> $filters){
4. ?>
5.    <input type="checkbox" checked="checked"><?php echo $filters;<br/>  ?>
6. <?php
7.   }
8. }
9. ?>

🧐
 
  • #152
evinda said:
I made some changes:
Code: 
1. <?php
2. foreach($content as $deviceType => $deviceAttribute) {
3.    foreach ($deviceAttribute as $deviceAttribute=> $filters){
4. ?>
5.    <input type="checkbox" checked="checked"><?php echo $filters;<br/>  ?>
6. <?php
7.   }
8. }
9. ?>
Better.
Still:
- In line 2 we have \$deviceAttribute, but it's not a single attribute, but an array of attributes. So let's call it \$deviceAttributes.
- In line 3 we can't have \$deviceAttribute both as array and as key.
- In line 5 we can't echo \$filters, which would be an array instead of a string.
- This stack overflow article says it's better practice to use <?php foreach(...): ?> ... <?php endforach; ?> in lines 2, 3, 7, and 8.
(Thinking)
 
  • #153
Klaas van Aarsen said:
Better.
Still:
- In line 2 we have \$deviceAttribute, but it's not a single attribute, but an array of attributes. So let's call it \$deviceAttributes.
- In line 3 we can't have \$deviceAttribute both as array and as key.
- In line 5 we can't echo \$filters, which would be an array instead of a string.
- This stack overflow article says it's better practice to use <?php foreach(...): ?> ... <?php endforach; ?> in lines 2, 3, 7, and 8.
(Thinking)

Do you mean it like this?
Code: 
<?php foreach($content as $deviceType => $deviceAttributes) ?>  
   <?php foreach ($deviceAttribute as $deviceAttributes => $filters) ?> 
         <input type="checkbox" checked="checked"><?php echo $deviceAttributes;<br/>  ?> 
   <?php endforeach; ?>  
<?php endforeach; ?>

:unsure:
 
  • #154
evinda said:
Do you mean it like this?
Code: 
<?php foreach($content as $deviceType => $deviceAttributes) ?> 
   <?php foreach ($deviceAttribute as $deviceAttributes => $filters) ?>
         <input type="checkbox" checked="checked"><?php echo $deviceAttributes;<br/>  ?>
   <?php endforeach; ?> 
<?php endforeach; ?>

- There should be a colon ( : ) after foreach(). 🧐

- Perhaps we can make the nested if something like <?php foreach ($deviceAttributes["filters"] as $filter): ?>? (Wondering)
The first expression should be an array, and \$deviceAttributes["filters"] is the array of filters.
The second expression should represent an element of the array, which would in this case be the name of the filter.
Now we can also use <?php echo $filter ?> to display it, since it is a string now.
 
  • #155
Klaas van Aarsen said:
Code: 
<?php foreach($content as $deviceType => $deviceAttributes) ?>
   <?php foreach ($deviceAttribute as $deviceAttributes => $filters) ?>
         <input type="checkbox" checked="checked"><?php echo $deviceAttributes;<br/>  ?>
   <?php endforeach; ?>
<?php endforeach; ?>

- There should be a colon ( : ) after foreach(). 🧐

- Perhaps we can make the nested if something like <?php foreach ($deviceAttributes["filters"] as $filter): ?>? (Wondering)
The first expression should be an array, and \$deviceAttributes["filters"] is the array of filters.
The second expression should represent an element of the array, which would in this case be the name of the filter.
Now we can also use <?php echo $filter ?> to display it, since it is a string now.

Ok! If "filters" is again an array and we have:
Code: 
$content = [
    "Phones" => [
        "filters" => [
            "Markets" => [ "Apple", "Samsung", "Huawei" ],
            "System" => ["Android", "iOS"]
        ],
...

do we write then the following to get the elements of "Markets"?
Code: 
<?php foreach($content as $deviceType => $deviceAttributes): ?> 
   <?php foreach ($deviceAttributes["filters"] as $filter): ?>
        <?php foreach ($filter["Markets"] as $market): ?>

:unsure:
 
  • #156
evinda said:
Ok! If "filters" is again an array and we have:

do we write then the following to get the elements of "Markets"?
Close.
But "filters" is not an array of regular elements, but an array of key => value pairs.
If we want to iterate over it, we should use foreach ($deviceAttributes["filters"] as $filterName => $filterValues):. (Nerd)

If we only want the values of "Markets", then we don't need the second foreach.
Instead we can use foreach ($deviceAttributes["filters"]["Markets"] as $market):. (Thinking)
 
  • #157
Klaas van Aarsen said:
Close.
But "filters" is not an array of regular elements, but an array of key => value pairs.
If we want to iterate over it, we should use foreach ($deviceAttributes["filters"] as $filterName => $filterValues):. (Nerd)

If we only want the values of "Markets", then we don't need the second foreach.
Instead we can use foreach ($deviceAttributes["filters"]["Markets"] as $market):. (Thinking)

Ok!

To get the information and display the image and the title as in post #137 do we write the following part of table:
Code: 
<td rowspan="3"><img <?php $deviceAttributes["products"]["image"]["src"]?> width="<?php $deviceAttributes["products"]["image"]["width"]?>" height="<?php $deviceAttributes["products"]["image"]["height"]?>" style="left">  </td> 
    <td><?php echo $deviceAttributes["products"]["title"]?></td>

🧐
 
  • #158
evinda said:
To get the information and display the image and the title as in post #137 do we write the following part of table:
That looks as if it should work.
Perhaps we should try? (Thinking)

I do think we'll see something that is undesired.
There is no need to set the width and height of the picture is there?
That may be a problem since then the picture may be too big.
Instead we may want to set just the width to a fixed value as specified in the html layout. (Nerd)

Additionally, style="left" is incorrect html. Style attributes are supposed to be of the form "key: value;".
But it doesn't need to be specified anyway. (Nerd)
 
  • #159
Klaas van Aarsen said:
That looks as if it should work.
Perhaps we should try? (Thinking)

I do think we'll see something that is undesired.
There is no need to set the width and height of the picture is there?
That may be a problem since then the picture may be too big.
Instead we may want to set just the width to a fixed value as specified in the html layout. (Nerd)

Additionally, style="left" is incorrect html. Style attributes are supposed to be of the form "key: value;".
But it doesn't need to be specified anyway. (Nerd)

I tried it but it doesn't work. (Sweating)

For the first line I get:
1617608827578.png
For the second line I get:
1617608838140.png


:unsure: :unsure:
 
  • #160
It says that we cannot index the "products" with "image". Can we check \$content and see why that is? (Wondering)
 
  • #161
Klaas van Aarsen said:
It says that we cannot index the "products" with "image". Can we check \$content and see why that is? (Wondering)

Do I maybe call the elements (image, title, etc) wrong? Because we have:
Code: 
$content = [
    "Phones" => [
        "filters" => [
            "Markets" => [ "Apple", "Samsung", "Huawei" ],
            "System" => ["Android", "iOS"]
        ],
        "products" => [
            [
                "image" => [
                    "src" => "images/iphone-12.jpeg",
                    "width" => 150,
                    "height" => 200
                ],
                "title" => "Apple iPhone 12",
                "description" => "Οθόνη: 6.1\", iOS 14, Μνήμη: 64GB, Κάμερα: 12MP + 12MP, Selfie: 12MP, CPU: Εξαπύρηνος (4+2), Κατασκευαστής: Apple",
                "price" => 732
            ],
            [
                "image" => [
                    "src" => "images/galaxy-s21.jpeg",
                    "width" => 150,
                    "height" => 200
                ],
                "title" => "Samsung Galaxy S21",
                "description" => "Οθόνη: 6.2\", Android 11, RAM: 8GB, Μνήμη: 128GB, Κάμερα: 12MP + 64MP + 12MP, Selfie: 10MP, CPU: Οκταπύρηνος (1+3+4), Κατασκευαστής: Samsung",
                "price" => 709
            ]
        ]
    ],

After "products" we have two "[" then "title", so do we call it then in an other way and not "$deviceAttributes["products"]["title"]" ? 🧐
 
  • #162
evinda said:
Do I maybe call the elements (image, title, etc) wrong? Because we have:
After "products" we have two "[" then "title", so do we call it then in an other way and not "$deviceAttributes["products"]["title"]" ?

Yep.
"products" is an array of products.
We can't get the "title" from an array can we? We need to get it from an individual product. (Thinking)
 
  • #163
Klaas van Aarsen said:
Yep.
"products" is an array of products.
We can't get the "title" from an array can we? We need to get it from an individual product. (Thinking)

I corrected it and it works now! (Nod)

As for the image, I saved the images in the htdocs directory, or do we not have to? But this still doesn't work:
Code: 
<img src="<?php $product["image"]["src"] ?>"  width="<?php $product["image"]["width"] ?>" height="<?php $product["image"]["height"] ?>" style="left">

:unsure:
 
  • #164
evinda said:
As for the image, I saved the images in the htdocs directory, or do we not have to? But this still doesn't work:
What does it do? (Wondering)

Btw, style="left" is invalid syntax. 🧐
 
  • #165
Klaas van Aarsen said:
What does it do? (Wondering)

Nothing, the images are not displayed at all. (Sweating)

Klaas van Aarsen said:
Btw, style="left" is invalid syntax. 🧐

Do I have to write this in the css part? 🧐
 
  • #166
evinda said:
Nothing, the images are not displayed at all.
What if you add a couple of lines in the php script and "echo" the parts that make up the image? (Wondering)

evinda said:
Do I have to write this in the css part?
The syntax is wrong. A style attribute must be of the form style="key: value". 🧐
As it is now, it can't do anything other than generate errors.

Either way, an attribute that is suppose to align an image to the left won't do anything on the image itself.
It must typically be an attribute of the container of the image, which is in this case a <td> element.
Still, the default alignment of a <td> cell is "left" - it is already left aligned.
If we want to change it to, say, "center", we can change the <td> to <td style="text-align: center">. (Nerd)
 
  • #167
Klaas van Aarsen said:
What if you add a couple of lines in the php script and "echo" the parts that make up the image? (Wondering)

What do you mean? 🧐
 
  • #168
evinda said:
What do you mean?
If <img src="<?php $product["image"]["src"] ?>" width="<?php $product["image"]["width"] ?>" height="<?php $product["image"]["height"] ?>" style="left"> does not work, we need to gather more information.
How about we add:
Code: 
<?php
echo "title: ", $product["title"], "<br>";
echo "img.src: ", $product["image"]["src"], "<br>";
echo "img.width: ", $product["image"]["width"], "<br>";
?>
to gather more information? (Wondering)
 
  • #169
Klaas van Aarsen said:
If <img src="<?php $product["image"]["src"] ?>" width="<?php $product["image"]["width"] ?>" height="<?php $product["image"]["height"] ?>" style="left"> does not work, we need to gather more information.
How about we add:
Code: 
<?php
echo "title: ", $product["title"], "<br>";
echo "img.src: ", $product["image"]["src"], "<br>";
echo "img.width: ", $product["image"]["width"], "<br>";
?>
to gather more information? (Wondering)

I get:

1617638657044.png


🧐
 
  • #170
Okay...
... so we confirmed that \$product actually refers to the correct product, since otherwise we wouldn't get its title.
... and we confirmed we can get the \$product["image"]["src"] as well as intended...
... do we have "images/iphone-12.jpeg" available in the htdocs directory? (Wondering)
 
  • #171
Klaas van Aarsen said:
... do we have "images/iphone-12.jpeg" available in the htdocs directory? (Wondering)

Ah do we have to save the image as "images/iphone-12.jpeg" and not just "iphone-12.jpeg" ? 🧐
The position now of the image is: "C:\xampp\htdocs\iphone-12.jpeg"...
 
  • #172
evinda said:
Ah do we have to save the image as "images/iphone-12.jpeg" and not just "iphone-12.jpeg" ?
The position now of the image is: "C:\xampp\htdocs\iphone-12.jpeg"...
Indeed... (Tauri)
 
  • #173
Klaas van Aarsen said:
Indeed... (Tauri)
The position now is "C:\xampp\htdocs\images\iphone-12.jpeg". Is this correct now? :unsure: At the result nothing changed... 🧐
 
  • #174
evinda said:
The position now is "C:\xampp\htdocs\images\iphone-12.jpeg". Is this correct now? At the result nothing changed...
Should be correct yes. (Nod)

So the question is what we do get...
If an image cannot be found, it will usually show up as a 'broken picture'...
Either way, we can check the error.log and the access.log to see what happened.
And we can right click on the page and select Inspect Element, to see if any elements were rendered and what their status was.
From there we can also check the Console tab sheet to see if anything special was reported. :unsure:
 
  • #175
Klaas van Aarsen said:
Should be correct yes. (Nod)

So the question is what we do get...
If an image cannot be found, it will usually show up as a 'broken picture'...
Either way, we can check the error.log and the access.log to see what happened.
And we can right click on the page and select Inspect Element, to see if any elements were rendered and what their status was.
From there we can also check the Console tab sheet to see if anything special was reported. :unsure:

It works now with the images! (Blush)

Do we have to write a specific code to have also other languages besides english? :unsure:
 

Similar threads

JavaScript What scripts do websites like unitednuclear.com use?
Replies
3
Views
1K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
HTML/CSS Where can I find free online resources to learn HTML, Javascript, and CSS?
Replies
11
Views
3K
HTML/CSS Getting Started with JavaScript and HTML for Website Development
Replies
7
Views
3K
Java Javascript reading files: how should I have asked?
Replies
4
Views
1K
HTML/CSS Is There a Way to Indent Tables in XHTML?
Replies
3
Views
3K
HTML/CSS Understanding XHTML Slide Show w/ Javascript & jQuery
Replies
2
Views
4K
HTML/CSS What HTML tag can I use to bypass category filters on my website?
Replies
1
Views
2K
Comp Sci How to Integrate XML and JavaScript in Web Development?
Replies
22
Views
1K
HTML/CSS Learn Basic Computer Coding: HTML, PHP, and Java Tutorials for Beginners
Replies
8
Views
3K

Hot Threads

Recent Insights

Back
Top