Open Source Glasgow

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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:


<code html>
<!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>
</code>

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:

<code html>
<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>
</code>

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:

<code html>
<form method='get' action='https://duckduckgo.com'>
<input type='text' name='q' placeholder='Search DuckDuckGo' />
<input type='submit' value='Search' />
</form>
</code>

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:

<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>


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:

<code html>
<input type='text' name='search' placeholder='Search Wikipedia' class='searchbox' />
</code>

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':

<code html>
<style type='text/css'>

.searchbox {
  height: 2.5em;
}

</style>
</code>

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:

<code css>
input[type="text"], input[type="submit"] {
  height: 2.5em;
}

</code>

We could display the time and date pretty simply in PHP using the built in date function.

Try adding this to your homepage:

<code php>
  <p><?= date("r"); ?></p>
</code>

We can add some links for shortcuts to sites you visit often by adding some HTML:

<code 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>
</code>

We can make them look a bit more button-like by adding this CSS:

<code css>
div.links a {
      background-color: azure;
      padding: 0.5em;
      text-decoration: none;
      font-weight: bold;
      margin: 0.5em;
}
</code>

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.

<code php>
<?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";
}

?>
</code>

This won't look so pretty, so lets add some more CSS to colour things and add some emphasis etc.

<code css>
div.item {
  background-color: lightgoldenrodyellow;
  padding: 0.5em;
  margin-bottom: 1em;
}
div.title {
  font-weight: bold;
}
</code>

Your full home page might look something like this:

<code html>
<!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>

</code>

==== 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:

<code>
sudo apt install php-xml
sudo service apache2 restart
</code>
Open Source Glasgow

User Tools

Site Tools

Page Tools
