My Personal Homepage
My Mobile Home Page
This is the first paragraph on my homepage
Now visit this in your browser and see if it looks ok.
Let's add some functionality. Let's create a search box to search Wikipedia. Replace the tag with this:
This should show you a search box and allow you to directly visit Wikipedia articles. If you'd like to go straight to the mobile version of Wikipedia change the action URL to ''https://en.m.wikipedia.org/w/index.php''.
We can add the same form just below this to search DuckDuckGo like so:
You might have noticed that your page looks pretty small in a mobile device. We can ask the browser to scale things upwards and take up more of your horizontal space by adding this line inside the ''
Let's make the search boxes even easier to click into. Let's make them taller. First, go back and add a class to the search field called 'searchbox', for example:
Now we can add a ''
We could write this another way, rather than having to specify the class ''searchbox'' on each element we want to change, we could find all input elements of type 'text' and change them, for example:
input[type="text"], input[type="submit"] {
height: 2.5em;
}
We could display the time and date pretty simply in PHP using the built in date function.
Try adding this to your homepage:
We can add some links for shortcuts to sites you visit often by adding some HTML:
We can make them look a bit more button-like by adding this CSS:
div.links a {
background-color: azure;
padding: 0.5em;
text-decoration: none;
font-weight: bold;
margin: 0.5em;
}
Now we can try something a little more complex. Let's take a look at [[Working with RSS]].
This code will summarise the last three posts tagged with **#coding** on https://glasgow.social and show them on your home page. You can re-use this code for any other site that supports RSS.
\n";
echo " $title [$pubDate] link\n";
echo " $description\n";
echo "\n";
}
?>
This won't look so pretty, so lets add some more CSS to colour things and add some emphasis etc.
div.item {
background-color: lightgoldenrodyellow;
padding: 0.5em;
margin-bottom: 1em;
}
div.title {
font-weight: bold;
}
Your full home page might look something like this:
My Personal Homepage
My mobile home page
\n";
echo " $title [$pubDate] link\n";
echo " $description\n";
echo "\n";
}
?>
==== Troubleshooting ====
Not seeing the output you expect? You probably need to install the XML PHP component. Oops! Forgot to mention this earlier.
Log back into your webserver (using Putty or SSH) then run:
sudo apt install php-xml
sudo service apache2 restart