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

[evinda]

Yes. (Nod)

I wrote now an if-statement with all possible combinations, which are 27 When I tried examples to check if the result is correct then I noticed that the casesI have written at the end are not computed correctly. Can that be because I have written so many "else if" ? Or must there be an error at the code?

 

[I like Serena]

I wrote now an if-statement with all possible combinations, which are 27 When I tried examples to check if the result is correct then I noticed that the casesI have written at the end are not computed correctly. Can that be because I have written so many "else if" ? Or must there be an error at the code?

I don't think we can really write too many "else if"'s for the code to handle.
So there must be in an error in the code.

Btw, we have 2 checkboxes, 3 choices for the screen size, and 2 options for the operating system.
Doesn't that mean we should have 2 x 2 x 3 x 2 = 24 combinations?

 

[evinda]

I don't think we can really write too many "else if"'s for the code to handle.
So there must be in an error in the code.

Btw, we have 2 checkboxes, 3 choices for the screen size, and 2 options for the operating system.
Doesn't that mean we should have 2 x 2 x 3 x 3 = 36 combinations?

I wrote it again. I wrote each of the 36 combinations analytically. Now it doesn't work at all.
I don't know what I am doing wrong, I don't see any mistake at the code. Here is what I have written: https://pastebin.com/mpw6PDYw :unsure:

 

[I like Serena]

I wrote it again. I wrote each of the 36 combinations analytically. Now it doesn't work at all.
I don't know what I am doing wrong, I don't see any mistake at the code. Here is what I have written: https://pastebin.com/mpw6PDYw

We can debug and step through the code to figure it out.
Right click on the web page and select Inspect Element.
Find where your javascript source code is and set a breakpoint.
Execute the scenario that fails, which should then stop in the debugger from where you can inspect all expressions, and step through the if statements to see if we land where we're supposed to be.

 

[evinda]

We can debug and step through the code to figure it out.
Right click on the web page and select Inspect Element.
Find where your javascript source code is and set a breakpoint.
Execute the scenario that fails, which should then stop in the debugger from where you can inspect all expressions, and step through the if statements to see if we land where we're supposed to be.

I found the typo I had, now every case of the if-statement works. Now an oher problem appears. I cannot click the first checkbox ("Apple"), only if I click first at the second one ("Samsung") and then I can click on "Apple"or in general if I click first any filter then I can click on "Apple". What could be the reason? It is not related to the if-stetements, is it? :unsure:

 

[I like Serena]

I cannot click the first checkbox ("Apple")

What do you mean exactly? (Wondering)

 

[evinda]

What do you mean exactly? (Wondering)

I click the checkbox of "Apple" but it is not getting marked. If I click first any other filter and then I try to click the checkbox of "Apple" then it gets marked.

 

[I like Serena]

I click the checkbox of "Apple" but it is not getting marked. If I click first any other filter and then I try to click the checkbox of "Apple" then it gets marked.

That sounds strange. It suggests that it was disabled somehow but is enabled later on. It is possible from html, css, and javascript. But it seems unlikely you'd have done that.
Do you have the page somewhere?

 

[evinda]

That sounds strange. It suggests that it was disabled somehow but is enabled later on. It is possible from html, css, and javascript. But it seems unlikely you'd have done that.
Do you have the page somewhere?

I found my mistake. Now it works! (Nod)
As for the Textboxes at the size of the screen do we have to include them in the if-statements?

 

[I like Serena]

As for the Textboxes at the size of the screen do we have to include them in the if-statements?

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

 

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

 

[evinda]

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.

Do I have to download something? Or how does this work?

 

[I like Serena]

Do I have to download something? Or how does this work?

I've found a php compiler on w3schools now.
However, it doesn't seem to give us the option to create an html form and submit from there. :unsure:

If we want our own local web server, we can install apache.

 

[I like Serena]

I have Apache installed on my system and I was able to create a search box so that the submit button runs a php script in cgi-bin:

 

[evinda]

I have Apache installed on my system and I was able to create a search box so that the submit button runs a php script in cgi-bin:

View attachment 11045

https://www.physicsforums.com/attachments/11046

Downloading Apache we get a file Apache -> httpd-2.4.35 -> httpd-2.4.35-o102p-x64-vc14 (and one httpd-2.4.35-o102p-x86-vc14 ) -> Apache24. In the last one there are several files. Do we save the php file that we write in the file "cgi-bin"? And where do we save the html file? Also there?

 

[I like Serena]

Downloading Apache we get a file Apache -> httpd-2.4.35 -> httpd-2.4.35-o102p-x64-vc14 (and one httpd-2.4.35-o102p-x86-vc14 ) -> Apache24. In the last one there are several files. Do we save the php file that we write in the file "cgi-bin"? And where do we save the html file? Also there?

The html file should go to something like a /www/html/ directory, where there should already be an index.html file.

 

[evinda]

The html file should go to something like a /www/html/ directory, where there should already be an index.html file.

In the Apache24 file there is "htdocs" which includes an index.html file. Do you mean to save my html file there? :unsure:

 

[I like Serena]

In the Apache24 file there is "htdocs" which includes an index.html file. Do you mean to save my html file there?

Yep. (Nod)

 

[evinda]

Yep. (Nod)

It doesn't work (Sweating)

I get:

I saved the two files like this:

Is this wrong?

 

[I like Serena]

It doesn't work
I saved the two files like this:

Is this wrong?

That is correct. (Nod)

What do you get if you open http://localhost or http://localhost/index.html in your browser?
If Apache is working you should get a standard apache html page that shows 'It works!'
If that works, what do you get if you open http://localhost/example.html?

 

[evinda]

What do you get if you open http://localhost or http://localhost/index.html in your browser?
If Apache is working you should get a standard apache html page that shows 'It works!'
If that works, what do you get if you open http://localhost/example.html?

It doesn't work... I get: