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)

 

[evinda]

Which words? (Wondering)

If I write in the content.php file a greek word in place of "Phones" for example and then I give this word as an input in the searchbox, it is not identified and it gives the result that this input is not in the content file. But this happens only if I change "Phones" to an other word in greek. So it is related with the language, or not?

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

Inside the button part I write the word "Αναζήτηση" but the result is as I showed above. Do we have to define the greek language first?

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

I check if the input is one of the top level words of the content.php file.

 

[I like Serena]

If I write in the content.php file a greek word in place of "Phones" for example and then I give this word as an input in the searchbox, it is not identified and it gives the result that this input is not in the content file. But this happens only if I change "Phones" to an other word in greek. So it is related with the language, or not?

To match the Greek version, we can can first do $language["Phones"] = " Τηλέφωνα".
And then match it with if ($deviceType == $language[$search]) { ... } instead of if ($deviceType == $search) { ... }.

Inside the button part I write the word "Αναζήτηση" but the result is as I showed above. Do we have to define the greek language first?

No. I believe it means that your .php file has the wrong encoding. (Shake)
It should be in UTF-8.
Which editor do you use to edit the .php file? (Wondering)
I use Notepad++, which has a menu option Encoding, which shows that it is encoded in UTF-8.

I check if the input is one of the top level words of the content.php file.

Do you only want so find exact matches for one of the top level words?
Or also if the search string occurs in for instance the description of a device? (Wondering)

 

[evinda]

To match the Greek version, we can can first do $language["Phones"] = " Τηλέφωνα".
And then match it with if ($deviceType == $language[$search]) { ... } instead of if ($deviceType == $search) { ... }.

Does this translation mean that if the at the content.php file we have "Phones"and if the input is "Τηλέφωνα" then it should be recognized as the same thing?
I don't mean it in this way. I mean that if in the content.php file I have a greek word, for example "Τηλέφωνα" and the input is "Τηλέφωνα" then I get a message that this product doesn't exist. But if I have in the content.php file the english word "Phones" and the input is "Phones" then I get the message that product exists. So the program desn't "understand" the greek language?

No. I believe it means that your .php file has the wrong encoding. (Shake)
It should be in UTF-8.
Which editor do you use to edit the .php file? (Wondering)
I use Notepad++, which has a menu option Encoding, which shows that it is encoded in UTF-8.

I use Notepad, and at "Save as"at EncodingIalsohae UTF-8. So shouldn't the greek letters be correctly encoded?

Do you only want so find exact matches for one of the top level words?
Or also if the search string occurs in for instance the description of a device? (Wondering)

Just in the top-level words.

 

[I like Serena]

Does this translation mean that if the at the content.php file we have "Phones"and if the input is "Τηλέφωνα" then it should be recognized as the same thing?
I don't mean it in this way. I mean that if in the content.php file I have a greek word, for example "Τηλέφωνα" and the input is "Τηλέφωνα" then I get a message that this product doesn't exist. But if I have in the content.php file the english word "Phones" and the input is "Phones" then I get the message that product exists. So the program desn't "understand" the greek language?

Ah right. (Blush)
I meant it the other way around.
It should be if ($language[$deviceType] == $search) { ... }.

Alternatively, we could invert the translation and use for instance $english["Τηλέφωνα"] = "Phones".

I use Notepad, and at "Save as"at Encoding also has UTF-8. So shouldn't the greek letters be correctly encoded?[/icode]

I guess so... I tested it and it worked just fine for me.
That is, I have an action.php that is encoded in UTF-8 that echoes Greek text.
And my browser shows the Greek text correctly.

Suppose you right click on the page in the browser with the output of action.php, select Inspect Element, select the Console tab sheet, and reload the page .
Does it give any errors related to character encodings? (Wondering)
Now that I think about it, we should probably add <meta charset="UTF-8"> in the <head></head> section of the html page that action.php generates.
This w3schools page says that the default used to be the character set ISO-8859-1, so perhaps your browser uses that default.

Just in the top-level words.

There is only one, isn't there?
I've seen only "Phones".
Or are there more? (Wondering)

 

[evinda]

I think we need foreach($content as $deviceType => $deviceAttributes) for the top level.

Do we define this in this way because we have an array of arrays? Or in this way we define every array-element?

 

[I like Serena]

Do we define this in this way because we have an array of arrays? Or in this way we define every array-element?

It's not an array of arrays. (Shake)
Instead it's because the array is of the form [ key => value, key => value ] as opposed to [ value, value ].

An array of arrays would be of the form [ [ value, value ], [ value, value ] ], but that is not what we have.

 

[evinda]

It's not an array of arrays. (Shake)
Instead it's because the array is of the form [ key => value, key => value ] as opposed to [ value, value ].

An array of arrays would be of the form [ [ value, value ], [ value, value ] ], but that is not what we have.

I understand! (Nod)

 

[wendieholster]

As far as I understand, your screenshot indicates possible actions on the site that you can do with CSS or JavaScript codes. Do you want us to explain each of the points shown in the picture? If you need a complicated and detailed explanation of working with a site created on the WordPress platform, you can contact the experts from prosvit.design. I'm sure that these professional web designers will be able to explain to you everything you need to know. Plus, they always do helpful troubleshooting if you've created your site yourself before. Also, they will advise you on other non-WordPress-related issues as well. Feel free to ask them questions.