Personal Homepage for your mobile device
This is designed to teach basic elements of HTML.
Let's create a file called homepage.php and enter the framework for a very simple HTML page:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Personal Homepage</title> <meta name="description" content="Some links and information I'd like to see on my mobile at a glance"> <meta name="author" content="@neil@mckillop.org"> </head> <body> <h1>My Mobile Home Page</h1> <p>This is the first paragraph on my homepage</p> </body> </html>
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 <p> tag with this:
<form method='get' action='https://en.wikipedia.org/w/index.php'> <input type='text' name='search' placeholder='Search Wikipedia' /> <input type='submit' value='Search' /> </form>
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:
<form method='get' action='https://duckduckgo.com'> <input type='text' name='q' placeholder='Search DuckDuckGo' /> <input type='submit' value='Search' /> </form>
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 <head> part of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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:
<input type='text' name='search' placeholder='Search Wikipedia' class='searchbox' />
Now we can add a <style> tag inside the <head> section and tell the browser how we'd like to change anything with the class 'searchbox':
<style type='text/css'> .searchbox { height: 2.5em; } </style>
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:
<p><?= date("r"); ?></p>
We can add some links for shortcuts to sites you visit often by adding some HTML:
<div class='links'> <a href='https://coding.openguide.co.uk/wiki'>Coding wiki</a> <a href='https://glasgow.social'>Glasgow.Social</a> <a href='https://www.meetup.com/Glasgow-Coding-Meetup/'>Coding Meetup</a> </div>
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.
<?php $rss_url = "https://glasgow.social/tags/coding.rss"; // read the RSS file into the $content variable $content = file_get_contents($rss_url); // format the RSS data as XML and save it to $data $data = new simpleXmlElement($content); // this next part could be done a number of ways but... // this line converts the XmlElement to json and back and then to an array $json = json_decode(json_encode($data), true); $number_of_posts = 3; // we loop through the array we got (originally as XML) and format then // output the most recent three posts for($i=0;$i<$number_of_posts;$i++) { $title = $json['channel']['item'][$i]['title']; $pubDate = $json['channel']['item'][$i]['pubDate']; $link = $json['channel']['item'][$i]['link']; $description = $json['channel']['item'][$i]['description']; echo "<div class='item'>\n"; echo " <div class='title'>$title [$pubDate] <a class='externallink'href='$link'>link</a></div>\n"; echo " <div class='description'>$description</div>\n"; echo "</div>\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:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Personal Homepage</title> <meta name="description" content="Some links and information I'd like to see on my mobile at a glance"> <meta name="author" content="@neil@mckillop.org"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type='text/css'> .searchbox { height: 2.5em; } input[type="text"], input[type="submit"] { height: 3.5em; } div.item { background-color: lightgoldenrodyellow; padding: 0.5em; margin-bottom: 1em; } div.title { font-weight: bold; } div.links a { background-color: azure; padding: 0.5em; text-decoration: none; font-weight: bold; margin: 0.5em; } </style> </head> <body> <h1>My mobile home page</h1> <form method='get' action='https://duckduckgo.com'> <input type='text' name='q' placeholder='Search DuckDuckGo' /> <input type='submit' value='Search' /> </form> <form method='get' action='https://en.m.wikipedia.org/w/index.php'> <input type='text' name='search' placeholder='Search Wikipedia' class='searchbox' /> <input type='submit' value='Search' /> </form> <p><?= date("r"); ?></p> <div class='links'><p> <a href='https://coding.openguide.co.uk/wiki'>Coding wiki</a> <a href='https://glasgow.social'>Glasgow.Social</a> <a href='https://www.meetup.com/Glasgow-Coding-Meetup/'>Coding Meetup</a></p> </div> <?php $rss_url = "https://glasgow.social/tags/coding.rss"; // read the RSS file into the $content variable $content = file_get_contents($rss_url); // format the RSS data as XML and save it to $data $data = new simpleXmlElement($content); // this next part could be done a number of ways but... // this line converts the XmlElement to json and back and then to an array $json = json_decode(json_encode($data), true); for($i=0;$i<3;$i++) { $title = $json['channel']['item'][$i]['title']; $pubDate = $json['channel']['item'][$i]['pubDate']; $link = $json['channel']['item'][$i]['link']; $description = $json['channel']['item'][$i]['description']; echo "<div class='item'>\n"; echo " <div class='title'>$title [$pubDate] <a class='externallink'href='$link'>link</a></div>\n"; echo " <div class='description'>$description</div>\n"; echo "</div>\n"; } ?> </body> </html>
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
