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.
  • #71
Klaas van Aarsen said:
How about:
Code:
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? 🧐
 
Technology news on Phys.org
  • #72
evinda said:
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:
Code:
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
}
🤔
 
  • #73
Klaas van Aarsen said:
Yep. (Nod)

Alternatively we can put everything in a single if-statement and combine with AND and OR.
Something like:
Code:
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? 🧐
 
  • #74
evinda said:
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:
 
  • #75
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:
Code:
<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. 🧐
 
  • #76
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. 🤔
 
  • #77
Klaas van Aarsen said:
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:
Code:
<?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:
 
  • #78
evinda said:
It works now!

Nice! (Nod)

evinda said:
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.
 
  • #79
Klaas van Aarsen said:
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:
Code:
<input type="text" id="input" value="<?php echo $input;?>">

:unsure:
 
  • #80
evinda said:
So at the definition of the searchbox do we add a value to connect it with the server?
I mean:
Code:
<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"].
 
Last edited:
  • #81
Klaas van Aarsen said:
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?
🧐
 
  • #82
evinda said:
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. 🤔
 
  • #83
Klaas van Aarsen said:
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:
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? 🧐
 
Last edited:
  • #84
evinda said:
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:
 
  • #85
Klaas van Aarsen said:
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? 🧐
 
  • #86
evinda said:
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:
 
  • #87
Klaas van Aarsen said:
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:
Code:
 <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:

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

Then running it we get:

what_we_get.png


So I get the code of the php-file.

What am I doing wrong? 🧐
 
  • #88
evinda said:
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. 🤔
 
  • #89
Klaas van Aarsen said:
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? 🤔
 
  • #90
evinda said:
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.
 
  • #91
Klaas van Aarsen said:
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? 🧐
 
  • #92
evinda said:
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. 🤔
 
  • #93
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:

1617404564347.png


1617404598199.png

:cool:
 
  • #94
Klaas van Aarsen said:
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
:cool:
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? 🧐
 
  • #95
evinda said:
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. 🤔
 
  • #96
Klaas van Aarsen said:
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:
 
  • #97
evinda said:
In the Apache24 file there is "htdocs" which includes an index.html file. Do you mean to save my html file there?
Yep. (Nod)
 
  • #98
Klaas van Aarsen said:
Yep. (Nod)

It doesn't work (Sweating)

I get:
1617441949100.png
I saved the two files like this:

1617442073968.png


1617442103685.png


Is this wrong? 🧐
 
  • #99
evinda said:
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? 🤔
 
  • #100
Klaas van Aarsen said:
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:

1617449557426.png
 
Last edited:
  • #101
evinda said:
It doesn't wotk. I get:
Then you're not running apache yet.
Can you open the apache application?

Apparently one way to do it on Windows, is to open a command prompt, and type:
Code:
cd ...\Apache24\bin
httpd.exe
where ... should be replaced by the location where you have Apache.
It's explained in the readme_first.html file that is in the top directory. 🤔
 
Last edited:
  • #102
Klaas van Aarsen said:
Then you're not running apache yet.
Can you open the apache application?

Apparently one way to do it on Windows, is to open a command prompt, and type:
Code:
cd ...\Apache24\bin
httpd.exe
where ... should be replaced by the location where you have Apache.
It's explained in the readme_first.html file that is in the top directory. 🤔

Which of the following files do we use? 🤔

1617473678548.png
 
  • #103
evinda said:
Which of the following files do we use?
Those look the same. :unsure:
Perhaps one of them is a .zip file and the other is the unzipped version.
In that case we need the one that is unzipped.
Either way, we'll find out if we open a command prompt. 🤔

If I do it on my Windows I get:
1617474085303.png
 
  • #104
evinda said:
Which of the following files do we use?
Oh wait. (Wait)
I see now that one is for x64 and the other is for x86.
The first would be a 64-bit version and the other is a 32-bit version.
Either should work. 🤔
 
  • #105
Klaas van Aarsen said:
Those look the same. :unsure:
Perhaps one of them is a .zip file and the other is the unzipped version.
In that case we need the one that is unzipped.
Either way, we'll find out if we open a command prompt. 🤔

If I do it on my Windows I get:
View attachment 11052

I get:

httpd: Syntax error on line 39 of C:/Users/evinda/Desktop/Apache/httpd-2.4.35/httpd-2.4.35-o102p-x86-vc14/Apache24/conf/httpd.conf: ServerRoot must be a valid directory

🧐
 

Similar threads

Replies
3
Views
1K
Replies
3
Views
2K
Replies
4
Views
1K
Replies
3
Views
3K
Replies
2
Views
4K
Replies
22
Views
1K
Back
Top