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

[evinda]

That does not look like correct php.

I've added line numbers to your 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:

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. ?>

 

[I like Serena]

I made some changes:

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)

 

[evinda]

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?

<?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:

 

[I like Serena]

Do you mean it like this?

<?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.

 

[evinda]

<?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:

$content = [
    "Phones" => [
        "filters" => [
            "Markets" => [ "Apple", "Samsung", "Huawei" ],
            "System" => ["Android", "iOS"]
        ],
...

do we write then the following to get the elements of "Markets"?

<?php foreach($content as $deviceType => $deviceAttributes): ?> 
   <?php foreach ($deviceAttributes["filters"] as $filter): ?>
        <?php foreach ($filter["Markets"] as $market): ?>

:unsure:

 

[I like Serena]

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)

 

[evinda]

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:

<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>

 

[I like Serena]

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)

 

[evinda]

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:

For the second line I get:

:unsure: :unsure:

 

[I like Serena]

It says that we cannot index the "products" with "image". Can we check \$content and see why that is? (Wondering)

 

[evinda]

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:

$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"]" ?

 

[I like Serena]

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)

 

[evinda]

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:

<img src="<?php $product["image"]["src"] ?>"  width="<?php $product["image"]["width"] ?>" height="<?php $product["image"]["height"] ?>" style="left">

:unsure:

 

[I like Serena]

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.

 

[evinda]

What does it do? (Wondering)

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

Btw, style="left" is invalid syntax.

Do I have to write this in the css part?

 

[I like Serena]

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)

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)

 

[evinda]

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?

 

[I like Serena]

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:

<?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)

 

[evinda]

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:

<?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:

 

[I like Serena]

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)

 

[evinda]

... 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"...

 

[I like Serena]

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)

 

[evinda]

Indeed... (Tauri)

The position now is "C:\xampp\htdocs\images\iphone-12.jpeg". Is this correct now? :unsure: At the result nothing changed...

 

[I like Serena]

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:

 

[evinda]

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:

 

[I like Serena]

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

Yep. (Nod)

 

[evinda]

Yep. (Nod)

I searched online and I found "set names utf8". Do we use this one? Or does it depend on the language we want to use? But how exactly is the code and where do we write this? Is this a part inside <?php ... ?> ?

 

[I like Serena]

I searched online and I found "set names utf8". Do we use this one? Or does it depend on the language we want to use? But how exactly is the code and where do we write this? Is this a part inside <?php ... ?> ?

Typically we would have an array in php that translates each english word into the target language.
Then, whenever we echo a word to the user, we would look it up in this array first.

 

[evinda]

Typically we would have an array in php that translates each english word into the target language.
Then, whenever we echo a word to the user, we would look it up in this array first.

Only few words are not in english, the search button and some of the possible inputs.

The search button is displayed now as:

and when I give the non-english input they are not recognized althought these words are also in the php content file.

What do you mean to create an array. Should I write all the possible words in both languages? :unsure:

 

[I like Serena]

Only few words are not in english, the search button and some of the possible inputs.

Which words? (Wondering)

The search button is displayed now as:

What are you displaying in the search button? (Wondering)

and when I give the non-english input they are not recognized although these words are also in the php content file.

Which php content are you matching with the search input? (Wondering)

What do you mean to create an array. Should I write all the possible words in both languages?

Which languages do you want to support?
Just Greek?
Is English a target language?
Are there other languages? (Wondering)