This is not a tutorial, but I will consider making a tutorial one I build a demo version of the website.

One of the activities where I live is Wii Bowling. One of our players is in her nineties, since there is no use of heavy bowling balls. Every year for ten weeks, we have a league and keep team scores, generate handicaps, etc. When I was asked to do all of the scoring, the first thing that came to mind was to create an interface where I could enter the weekly scores on my phone, go home, and print the weekly score sheet for the clubhouse bulletin board. Since no one had any interest in going to the website, it was a utility site with no need to look good.

It did have to function correctly on different devices. I chose to use Bootstrap (a JavaScript framework) to easily render the pages on my iPhone, my iPad, or my notebook computer. This way, three columns would shrink to one on my iPhone. Since I didn’t have to spend time on graphics, I simply used a font from Google Fonts called Satisfy to write out the name of the league. Since the printed page needed correct formatting, along with the Bootstrap CSS file, I created bowling.css and print.css. MySQL is the database and PHP is embedded in every file.

I don’t want to assume that everyone is familiar with PHP. It is an interpreted language, so the PHP code can be written in a style that the human understands, then translated to code the server understands when it is running. Other types of code must be compiled to the machine code before it can run. The web server cannot understand PHP unless the server has the PHP libraries built into them. Regular web page files end with .html or .htm, but PHP files end with .php. The suffix informs the web server that there is PHP code written in the file. The ML in HTML stands for Markup Language. They use < and > to distinguish markup code from content. PHP commands are treated as markup code as well and the server parses the PHP code, translating it to HTML that your web browser can read. Simply what this means is that it can pull data from a database, scrape information from another website, and/or calculate bowling scores before it provides the results on a web page for you to see.

Web browsers cannot understand anything more than HTML, CSS or JavaScript. Server-side work is needed to assure that only those languages are sent to your browser. So every PHP page you see is temporary, i.e., an instance. When designing a website, if a page will remain static forever, there’s no need for PHP, so end the file name with .htm or .html. For this project though, every page needed to use PHP. I took into consideration what needed to happen on the home page as well as the weekly pages, the administration pages, forms, results, etc. For instance, the league is ten weeks long every year. There’s no need to have a link to week ten if the league is only in week two, so the home page only provides links for each week already played. It also identifies the current week and the current stats.

The forms needed PHP to identify the current season and the players in the current season. It also only counts up to the current week (I use a page to add the week before processing the scores). For displaying the results, I use the index.php page as a template that calls other PHP files to include data. Those files end with .inc.php. This simplifies the writing in the same manner as a function or method block, writing the method once, then calling the method every time I need it. In this sense, index.php acts as a template for other files instead of writing the same code in every file. There are twenty-five PHP files. Twenty of them are .inc.php files.

The layout of the files are as such: the top directory has the files for the reader and four sub-folders, admin, css, and images. They are labelled clearly – the admin files under admin, images under images and CSS under css. The files are admin.php, home.inc.php, index.php, logout.php, and week.inc.php. Inside of the admin directory are nineteen files, all but two, adminlogin.php and validate.php are .inc.php files. The CSS directory has my CSS files, bowling.css and print.css. There are no images, but if I add any, they’ll be placed in the images directory.

An advantage of Bootstrap is the simplicity of creating header navigation.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand concepthw" href="/">Wii Bowling League</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
          aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav text-lg-center nav-justified w-100">
        <li class="nav-item">
          <a class="nav-link" href="/admin.php">Admin</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">FAQ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">More</a>
        </li>
      </ul>
    </div>
</nav>

Disregard FAQ and More since there was no need for them, but if the website was to be used by the players, I’d have more pages to help them. This structure expands the navigation menu on a desktop monitor and collapses the menu to a dropdown on the iPhone. The same code is used in the admin.php file, replacing Admin with Main.

Another snippet of code disables right clicks, so that browsers cannot view the source code. This is straight JavaScript.

// JavaScript code to disable right-click
document.oncontextmenu = function prevent() {
    alert("This material \u00A9 Gary Hicken");
    return false;
};

Right-clicking on the home page opens a small box that lets the user know it won’t allow any right-click commands.

Finally, I will provide the code for one of my admin files, addbowler.inc.php. It is one of the simple files.

<?php
    $yrno=$_POST['yr'];
    $tmno=$_POST['tm'];
    $lname=$_POST['ln'];
    $fname=$_POST['fn'];
    $q = "SELECT yr FROM y WHERE yr_no='$yrno'";
    $result = mysqli_query($conn,$q) or die('Unable to get year');
    $row=mysqli_fetch_array($result,MYSQLI_ASSOC);
    $yr = $row['yr'];
    $q = "SELECT name FROM team WHERE tm_no='$tmno'";
    $result = mysqli_query($conn,$q) or die('Unable to get team');
    $row=mysqli_fetch_array($result,MYSQLI_ASSOC);
    $team = $row['n'];
    $q = "INSERT INTO bowler (ln, fn, year_no, tm_no) VALUES ('$ln', '$fn', '$yrno', '$tmno')";
    $result = mysqli_query($conn,$q) or die('Unable to add bowler');
    if ($result)
        echo "<h4>New bowler $fn $ln added on $team for $yr.</h4>\n";
    else
        echo "<h4>Problem adding new bowler $fn $ln on $tm for $yr.</h4>\n";
?>

This just adds a bowler to a team for the current year. This is a .inc.php file, so there is no HTML formatting and data is imported into it. Variable and table names are not the actual names.

This is just a post about a website I run. I will put up a demo site soon, then write a tutorial.