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

[evinda]

I believe they are intended as a 3rd option yes.

Do we have to add at the if-statements the possible cases for "From" and "To" and the possible cases only for "From" and the possible cases only for "To" ?
So we check:
- From < 6.1 AND To < 6.1 then no product is shown.
- From < 6.1 AND To = 6.1 then "Apple" is shown.
- From < 6.1 AND To >= 6.2 then "Apple" and "Samsung" is shown.
- From = 6.1 AND To = 6.1 then "Apple" is shown.
- From = 6.1 AND To > 6.1 then "Apple" and "Samsung" is shown.
- From = 6.2 AND To >= 6.2 then "Samsung" is shown.
- From > 6.2 AND To > 6.2 then no product is shown.
- From <= 6.1 then "Apple" and "Samsung" is shown.
- From = 6.2 then "Samsung" is shown.
- From > 6.2 then no product is shown.
- To < 6.1 then no product is shown.
- To = 6.1 then "Apple" is shown.
- To >= 6.2 then "Apple" and "Samsung" is shown. Or can we combine the cases?

 

[I like Serena]

Do we have to add at the if-statements the possible cases for "From" and "To" and the possible cases only for "From" and the possible cases only for "To" ?

Or can we combine the cases?

I think we actually have more cases.
For starters, what if the user filled in 6.15?
Or what if they did not fill in the from field at all?
Or what if they accidentally filled in something other than a number? (Sweating)

Let's focus on one product first.
And let's assume both fields were filled in with a number for now.
Then for the Apple device, I believe we can combine it all in:
- From <= 6.1 AND 6.1 <= To then "Apple" is shown.
- Otherwise "Apple" is not shown.

Doesn't that cover all cases for "Apple" (except the new cases that I came up with)?

Perhaps we can test that, and see what happens if we leave the from field empty.
And also test what happens if we put for instance "6,1" in the from field with a comma instead of a point, which could be a typical 'mistake' from the user. :unsure:

 

[evinda]

Let's focus on one product first.
And let's assume both fields were filled in with a number for now.
Then for the Apple device, I believe we can combine it all in:
- From <= 6.1 AND 6.1 <= To then "Apple" is shown.
- Otherwise "Apple" is not shown.

Doesn't that cover all cases for "Apple" (except the new cases that I came up with)?

Perhaps we can test that, and see what happens if we leave the from field empty.
And also test what happens if we put for instance "6,1" in the from field with a comma instead of a point, which could be a typical 'mistake' from the user. :unsure:

It doesn't seem to work.

In HTML I wrote:

   <input type="string" id="from" value="Από" size="1">  
   <input type="string" id="to" value="Έως" size="1"> 
   <button type="button" onclick="Function2()">Εφαρμογή</button>

In Javascript I wrote:

<script>
function Function2() { 
   if (document.getElementById("from") <= 6.1 && document.getElementById("to") >= 6.1){ 
       Apple.style.display = "block"; 
   } 
   else { 
       Apple.style.display = "none"; 
   } 
} 
</script>

I gave as example-input "from=6" and 'to=8" and "Apple" is not shown. What is the error?

 

[I like Serena]

It doesn't seem to work.

I gave as example-input "from=6" and 'to=8" and "Apple" is not shown. What is the error?

It should be document.getElementById("from").value.

 

[evinda]

It should be document.getElementById("from").value.

Now it works! (Nod) I wrote the corresponding code for "Samsung". If we choose to write something in these textboxes, should the radio button be unchecked if it was checked previously?
Also do we have to add this part at the 36 cases I wrote before? We can't write that seperately because it won't be combined with the other filters, can we? (Thinking)

 

[I like Serena]

Now it works! I wrote the corresponding code for "Samsung". If we choose to write something in these textboxes, should the radio button be unchecked if it was checked previously?

Actually, I'm not sure what is intended. Can you find out? (Wondering)
I'd expect there to be a separate radio button in front of the text boxes to make it a 3rd option, but there isn't. :unsure:

Also do we have to add this part at the 36 cases I wrote before? We can't write that seperately because it won't be combined with the other filters, can we?

We could see that if we combine both Apple and Samsung in an if-tree that it becomes unmanageable.
Suppose we have a separate if-tree for Apple and also a separate if-tree for Samsung. Then we can combine the text boxes into those if-trees can't we?

 

[evinda]

We could see that if we combine both Apple and Samsung in an if-tree that it becomes unmanageable.
Suppose we have a separate if-tree for Apple and also a separate if-tree for Samsung. Then we can combine the text boxes into those if-trees can't we?

Should the if-tree for Apple look as follows?

If Apple is chosen then: 
      If Large Screen is chosen 
             If at Checkbox we have From <= 6.1 AND 6.1 <= To  
                      If iOS is chosen 
                               then "Apple" is shown

Then we have to check also the cases that only two filters are chosen, and the case that only one filter is chosen. Is it right?

 

[I like Serena]

If Apple is chosen then:
      If Large Screen is chosen
             If at Checkbox we have From <= 6.1 AND 6.1 <= To
                      If iOS is chosen
                               then "Apple" is shown

"Large Screen is chosen" and "at Checkbox we have From <= 6.1 AND 6.1 <= To" can't both be true at the same time can they? :unsure:
Perhaps it should be Large Screen is chosen OR (at Checkbox we have From <= 6.1 AND 6.1 <= To)?

Then we have to check also the cases that only two filters are chosen, and the case that only one filter is chosen. Is it right?

What do you mean? :unsure:

 

[evinda]

"Large Screen is chosen" and "at Checkbox we have From <= 6.1 AND 6.1 <= To" can't both be true at the same time can they? :unsure:
Perhaps it should be Large Screen is chosen OR (at Checkbox we have From <= 6.1 AND 6.1 <= To)?

I wrote the case for choosing "Apple" and the case for choosing "Samsung", and it works! (Nod) Do we have to write also the case if neither "Apple" nor "Samsung" is chosen? This cannot be included in the previous cases, can it?

For the first case, choosing "Apple" I wrote:

if (Apple is checked){ 
        if (Large Screen is cheched OR (FROM <= 6.1 AND TO >= 6.1)){ 
            if (iOS ic checked){ 
                Apple is shown  
            } 
            else if (Androis ic checked){ 
                Apple is not shown 
            }
            else { 
                Apple is shown 
            } 
        }   
        else if (Median nScreen is checked OR (FROM > 6.1 OR TO < 6.1)){ 
            Apple is not shown 
        } 
        else if (Median Screen is not checked AND Large Screen is not checked && FROM == "Από" && TO == "Έως") { 
            if (iOS is checked){ 
                Apple is shown  
            } 
            else if (Androis is checked){ 
                Apple is not shown 
            } 
            else { 
                Apple is shown 
            } 
        } 
    }

Is this right?

 

[I like Serena]

I wrote the case for choosing "Apple" and the case for choosing "Samsung", and it works! (Nod) Do we have to write also the case if neither "Apple" nor "Samsung" is chosen? This cannot be included in the previous cases, can it?

For the first case, choosing "Apple" I wrote:

if (Apple is checked){
        if (Large Screen is cheched OR (FROM <= 6.1 AND TO >= 6.1)){
            if (iOS ic checked){
                Apple is shown
            }
            else if (Androis ic checked){
                Apple is not shown
            }
            else {
                Apple is shown
            }
        }
        else if (Median nScreen is checked OR (FROM > 6.1 OR TO < 6.1)){
            Apple is not shown
        }
        else if (Median Screen is not checked AND Large Screen is not checked && FROM == "Από" && TO == "Έως") {
            if (iOS is checked){
                Apple is shown
            }
            else if (Androis is checked){
                Apple is not shown
            }
            else {
                Apple is shown
            }
        }
    }

Is this right?

How about:

var showApple = false
if (Apple is checked) {
    if (Large Screen is checked OR (FROM <= 6.1 AND TO >= 6.1)) {
        if (iOS is checked){
            showApple = true
        }
    }
}
if (showApple) {
    Apple is shown
} else{
    Apple is not shown
}

Oh, and a radio button is supposed to always give a single selection, so we shouldn't be able to select both Medium Screen and Large Screen.

 

[evinda]

How about:

var showApple = false
if (Apple is checked) {
    if (Large Screen is checked OR (FROM <= 6.1 AND TO >= 6.1)) {
        if (iOS is checked){
            showApple = true
        }
    }
}
if (showApple) {
    Apple is shown
} else{
    Apple is not shown
}

So we define a local variable at the beginning of the function that has the value "false" and it gets the value "true" if the specific product should be shown. Is this the right idea of the way you described?

 

[I like Serena]

So we define a local variable at the beginning of the function that has the value "false" and it gets the value "true" if the specific product should be shown. Is this the right idea of the way you described?

Yep. (Nod)

Alternatively we can put everything in a single if-statement and combine with AND and OR.
Something like:

if (Apple checked AND (Large screen selected OR (from <= 6.1 AND 6.1 <= to)) AND iOS selected) {
    show apple product
} else {
    hide apple product
}

 

[evinda]

Yep. (Nod)

Alternatively we can put everything in a single if-statement and combine with AND and OR.
Something like:

if (Apple checked AND (Large screen selected OR (from <= 6.1 AND 6.1 <= to)) AND iOS selected) {
    show apple product
} else {
    hide apple product
}

Ok! Which of the two ways do you suggest? Which one is better?

 

[I like Serena]

Ok! Which of the two ways do you suggest? Which one is better?

Both are fine. :geek:

I expect we'll revisit it anyway since I suspect there is another stage coming up. Are we also going to write php code? :unsure:

 

[evinda]

I want now to create the initial side that consists of the logo and a searchbox. I did this, but it is small and I don't really know how to change the size. I tried differend ways at css styles, but the height doesn't change. I can only change the length of the search box.

I wrote:

<input type="text" id="search" size="40">
              <button id="search"type="button"  style="background-color:red;color:white">
                  Search 
              </button>

How can we change the height? I tried to add also "height:..." but I didn't see any change.

 

[I like Serena]

It shouldn't be an html attribute. Instead it should be css style. That is, either in the <style> section, or as a style="..." attribute.
Then font-size or height should work. They do need a unit like 'px' for pixels.

 

[evinda]

It shouldn't be an html attribute. Instead it should be css style. That is, either in the <style> section, or as a style="..." attribute.
Then font-size or height should work. They do need a unit like 'px' for pixels.

It works now! (Nod) Now I have a quesion about php (Blush)

In a .php file we have the filters and products with title, description and price that we had above. The file is in the form:

<?php 
$content = [ 
   "Mobile" => [ 
       "filters" => [ ... ] 
       "products" => [ ... ]  
    ] 
] 
?>

If we write in the searchbox above "Mobile" all mobiles should be shown. So do we write in an other .php file "if (input == Mobile)" then show these products otherwise no product should be shown, in the way we did it above with javascript with the different combinations of filters to show Apple and Samsung? But how do we combine these two files? :unsure:

 

[I like Serena]

It works now!

Nice! (Nod)

Now I have a quesion about php

If we write in the searchbox above "Mobile" all mobiles should be shown. So do we write in an other .php file "if (input == Mobile)" then show these products otherwise no product should be shown, in the way we did it above with javascript with the different combinations of filters to show Apple and Samsung? But how do we combine these two files? :unsure:

We would basically replace the javascript code by php code and it will all still be one file.

We would have a special "Submit" button that posts the selections to the server.
The server will execute the php script and send the result back.
That is, the page will be shown again, but now the php script decides what to show instead of the javascript.

See the PHP intro on w3schools.
Ultimately our page should look like the example shown in the PHP Full Form page.

 

[evinda]

We would basically replace the javascript code by php code and it will all still be one file.

We would have a special "Submit" button that posts the selections to the server.
The server will execute the php script and send the result back.
That is, the page will be shown again, but now the php script decides what to show instead of the javascript.

See the PHP intro on w3schools.
Ultimately our page should look like the example shown in the PHP Full Form page.

So at the definition of the searchbox do we add a value to connect it with the server?

I mean:

<input type="text" id="input" value="<?php echo $input;?>">

:unsure:

 

[I like Serena]

So at the definition of the searchbox do we add a value to connect it with the server?
I mean:

<input type="text" id="input" value="<?php echo $input;?>">

Not exactly. :unsure:
The value doesn't really connect it to the server.
Instead the value ensures that a user gets to see the same value they entered when the server generates a new page.
The connection to the server is when we respond to a "submit" button and pick up the value by its id="input".
That is, we still need php code somewhere else that uses $_POST["input"].

 

[evinda]

Not exactly. :unsure:
The value doesn't really connect it to the server.
Instead the value ensures that a user gets to see the same value they entered when the server generates a new page.
The connection to the server is when we respond to a "submit" button and pick up the value by its id="input".
That is, we still need php code somewhere else that uses $_POST["input"].

Do we need the value of the submit button or the searchbox? I mean where do we write id="input"? At the definition of the textbox of the searchbox or the submit button?

 

[I like Serena]

Do we need the value of the submit button or the searchbox? I mean where do we write id="input"? At the definition of the textbox of the searchbox or the submit button?

The search box needs the id="input".
The submit button needs to be of type="submit".
Both need to be in a <form>, with a method="post", and an action that specifies the name of the .php file.
And we will need php code somewhere that uses $_POST["input"], which is the value entered in the search box after submitting.

 

[evinda]

The search box needs the id="input".
The submit button needs to be of type="submit".
Both need to be in a <form>, with a method="post", and an action that specifies the name of the .php file.
And we will need php code somewhere that uses $_POST["input"], which is the value entered in the search box after submitting.

Ok! The php code that uses $_POST["input"] must be in the file with name that we wrote in action, (action = "file.php"), is this right?

I tried to check that, writing in "file.php" the following code:

<html>
<body>
The input is: <?php echo $_POST["input"]; ?>
</body>
</html>

But I get as result the code exactly as it is, not "The input is: ... ". Do we have to write something more in the php file?

 

[I like Serena]

Ok! The php code that uses $_POST["input"] must be in the file with name that we wrote in action, (action = "file.php"), is this right?

But I get as result the code exactly as it is, not "The input is: ... ". Do we have to write something more in the php file?

I don't think so. That should be enough.
We do need a <form> with a "submit" button in the original file. And specify the method to POST and specify the php file.
Perhaps the method is missing? :unsure:

 

[evinda]

I don't think so. That should be enough.
We do need a <form> with a "submit" button in the original file. And specify the method to POST and specify the php file.
Perhaps the method is missing? :unsure:

I have used the <form>, and I have also written the action and the method... What else could be wrong?

 

[I like Serena]

I have used the <form>, and I have also written the action and the method... What else could be wrong?

I think we need name="input" instead of id="input". :unsure:

 

[evinda]

I think we need name="input" instead of id="input". :unsure:

I tried now also an example I found online: https://www.php.net/manual/de/tutorial.forms.php
So in an file with name example.html I wrote:

 <form action="action.php" method="post"> <p>Ihr Name: <input type="text" name="name" /></p> <p>Ihr Alter: <input type="text" name="alter" /></p> <p><input type="submit" /></p> </form>

and in a file with name action.php I wrote:

 Hallo <?php echo htmlspecialchars($_POST['name']); ?>. Sie sind <?php echo (int)$_POST['alter']; ?> Jahre alt.

Then running it we get:

So I get the code of the php-file.

What am I doing wrong?

 

[I like Serena]

Then running it we get:

So I get the code of the php-file.
What am I doing wrong?

It looks as if your php file is interpreted as an HTML file.
The php-file must be executed as PHP code and not be shown as if it is an HTML file.
To achieve that, the php-file must typically be in the cgi-bin directory of the webserver, it must have been marked as an executable file, and the web server must have PHP enabled.

 

[evinda]

It looks as if your php file is interpreted as an HTML file.
The php-file must be executed as PHP code and not be shown as if it is an HTML file.
To achieve that, the php-file must typically be in the cgi-bin directory of the webserver, it must have been marked as an executable file, and the web server must have PHP enabled.

Is it possible to compile this in https://www.w3schools.com/ althrough we have two files, one html and one php?

 

[I like Serena]

Is it possible to compile this in https://www.w3schools.com/ althrough we have two files, one html and one php?

I think we cannot test php on w3schools. :unsure:
We may need our own server that executes our php code.
Then again, there may be online php test locations.