Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Month

March 2017

PHP, HTML & CSS – Magic 8 Ball

wp-1488672581812.png
Magic 8 Ball is a browser based implementation of a “Magic 8 Ball“. This project features autoloading PHP classes, HTML and CSS to create a virtual 8 Ball that will soon become your goto oracle with all important questions in your life!

You can preview a running version of this project here: Magic 8 Ball

Every now and then I like to post a complete project for you all to enjoy and often times that means it’s just a simple proof of concept example rather a full featured project. The Magic 8 Ball project is completely functional but there isn’t anything really fancy like animation or a neural network at work in this project, however I have a great set of tutorials on neural networks here: Getting Started With Neural Networks… if you’d prefer to read about that topic instead. πŸ™‚

The origins of this project was I was looking for “spooky” and fun projects or code to work on/blog about during the Halloween 2016 season but ultimately I didn’t post this project.

Despite not posting it on my blog at that time, I uploaded it to my github account because liked how this project turned out so recently I thought I would blow the dust off and show it to you.

If you just want to dig in and start playing with the code, you can access everything for this project on my github: https://github.com/geekgirljoy/PHP/tree/master/Projects/magic-8-ball or copy the code segments below into the correct files.

Otherwise the tutorial starts now πŸ˜‰

There is a caveate with this project, for simplicity/speed I used Bootstrap to reduce the CSS I had to write but you could eliminate that from the project very easily if you want to rely entirely on your own grid system and CSS.

Folder Structure

Setting up the folders for this project is very straight forward, .css files in the [css] folder and .php files (other than index.php) in the [php] folder.

Inside the [php] folder there is a sub-folder called [classes] where the class files for the project will reside.


[magic-8-ball]
             β”œβ”€β”€ index.php
             └── [css]
             β”‚       └── magic-8-ball.css
             └── [php]
                     β”œβ”€β”€ Magic8Ball.php
                     └── [classes]
                                 └── Magic8Ball.class.php

index.php

Our Index file creates the framework for the Magic 8 Ball. We link to all the CSS used by the project including Bootstrap and JQuery.

Inside the body of the page we create a form with with a text input field along with a submit input. The form uses GET so the ‘Question’ field will be accessible in the URL however if you would prefer to use the POST method all you need to do is change method attribute on the form from GET to POST as the PHP code uses $_REQUEST[‘Question’] so it will work however you need for your situation

Beneath the form we include Magic8Ball.php on the page by doing <?php include('php/Magic8Ball.php'); ?>.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Magic 8 Ball</title>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
        <link href="css/magic-8-ball.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 text-center">
                <h1>Magic 8 Ball</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12 text-center">        
                            <form action='#' method='get'>
                                <input name='Question' placeholder="Ask a question..." />
                                <input class='btn btn-success' type='submit' value='Ask' />
                            </form>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-sm-4 col-md-4 col-lg-5"></div>
                            <div class="col-sm-4 col-md-4 col-lg-4">
                            
                                <?php include('php/Magic8Ball.php'); ?>
                            
                            </div>
                        <div class="col-sm-4 col-md-4 col-lg-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

 

magic-8-ball.css

The CSS is all pretty straight forward, nothing unusual here. πŸ™‚


body{ 
    background-color:#444444; 
} 

h1{ 
    font-family: 'Creepster', cursive; 
    color:#00bb00; 
} 

#eight{ 
    font-size:400%; 
    color: #000000; 
}
 
.black-ball{
    border-radius: 50%; 
    background-color: #000; 
    width: 200px; 
    height: 200px; 
    display:table; 
    text-align:center; 
    padding: 50px; 
    box-shadow: 5px 5px 5px #333333; 
} 

.white-ball{ 
    border-radius: 50%; 
    background-color: #fff; 
    width: 22%; 
    height: 22%; 
    display:table-cell; 
    vertical-align:middle; 
    font-family: 'Creepster', cursive; 
}

.answer{ 
    color: #bb0000; 
}

 

Magic8Ball.php

The PHP code that generates the 8 Ball is pretty simple. We start by setting up an auto-loader to auto include all classes we put in our classes subfolder.

Note: In order for your classes to get auto loaded by the code as written you will need to name the class file using this naming convention: <Class or File Name>.class.php If you would prefer not to use that naming convention you can modify the auto-loader to meet your needs.

We follow that up with the Div tags that become the body of the 8 Ball when styled with our CSS.

After that we use $_REQUEST[‘Question’] to check if the user has asked a question. If no question was asked the #8 placeholder is used.

Once the user asks a question we create an array of strings containing of all possible responses which we call $answers.

After that we instantiate the Eight Ball object by passing the class the count of how many items are in our $answers array using: $EightBall = new Magic8Ball(count($answers)-1);. The class will return a number as it’s answer.

Once we have the $EightBall answer all we need to do is echo the the result in a span assigned the ‘answer’ class: echo ‘<span class=”answer”>’ . $answers[ $EightBall>answer ] . ‘</span>’ . PHP_EOL;.



<?php
    function ClassAutoloader($class) {
        include 'php/classes/' . $class . '.class.php';
    }
    spl_autoload_register('ClassAutoloader');
?>
<div class="black-ball">
                                <div class="white-ball">
                                    <?php
                                    if(isset($_REQUEST['Question'])){
                                        
                                    $answers = array("It is certain",
                                        "It is decidedly so",
                                        "Without a doubt",
                                        "Yes, definitely",
                                        "You may rely on it",
                                        "As I see it, yes",
                                        "Most likely",
                                        "Outlook good",
                                        "Yes",
                                        "Signs point to yes",
                                        "Reply hazy try again",
                                        "Ask again later",
                                        "Better not tell you now",
                                        "Cannot predict now",
                                        "Concentrate and ask again",
                                        "Don't count on it",
                                        "My reply is no",
                                        "My sources say no",
                                        "Outlook not so good",
                                        "Very doubtful");
                                        
                                        /*
                                        *    Invoke the wisdom of the Magic 8 Ball.
                                         *
                                        *    Oh great magic eight ball. We beseach thee to answer our question :-P
                                         *   Display the answer.
                                        */
                                        $EightBall = new Magic8Ball(count($answers)-1);
                                        echo '<span class="answer">' . $answers[ $EightBall->answer ] . '</span>' . PHP_EOL;
                                    }
                                    else{
                                        // Initial value of of the ball
                                        echo'<div id="eight">8</div>' . PHP_EOL;
                                    }
                                    ?>
                                </div>
</div>

 

Magic8Ball.class.php

The class file defines the Magic 8 Ball. It has a single property ‘$answer’ and a single method (the constructor). When the class is instantiated, it takes a single argument ($total) which it uses as the $max value for mt_rand().



<?php
/*
*    Magic8Ball.class.php
 *
*    Joy Harvel
 *
*    09/18/2016
 *
*/
class Magic8Ball{
	public $answer;
    function __construct($total) {
        $this->answer = mt_rand( 0 , $total);
    }
}
?>

If you have gotten this far all that is left to do is test the code and get top notch advice on all your tough questions! πŸ˜›

Live Preview: Magic 8 Ball

View Source: Magic 8 Ball on Github

As always I hope you found this post and project both interesting and informative. Please Like, Comment & share this post with your friends and followers on your social media platforms and don’t forget to click the follow button over on the top right of this page to get notified when I post something new.

Notice: I am seeking paid sponsors for my content so if you would like to sponsor my work please contact me.

Much Love,
~Joy

Advertisements

My old posts

You may have noticed a flood of content posted to my blog in the past couple of days. These are all my posts from JoyHarvel.com please enjoy them and I look forward to bringing even more and greater works going forward.

Much Love,

~Joy

PHP Mobile App Development

Before I begin, shout out to all my regular readers! Thanks for all your warm wishes and concern over my expired domain, you know who you are… πŸ˜‰

Also, a quick update on my family for those who are interested, Xavier Logich (my infant son) was born 02/04/17 at 12:05 in the afternoon via an unplanned Caesarean weighing exactly 8 Lbs. (3.62874 Kg. for my readers who use metric) and we are doing well.

My Little Logich

20170212_152139
Xavier Logich

Why a name like Logich? Because it is a reminder that no matter what, if he thinks things through he can do anything! πŸ™‚

Okay, enough about my personal life lets talk about PHP Mobile App Development!

To start, if you are PHP programmer, you have essentially been excluded from client side development for years. PHP can and does power many cloud based apps (all or in part) but was never available as a client side language. Get ready for that to change!

The Internet’s favorite language ( VERY debatable I know πŸ˜› ) is coming to mobile devices.

I previously blogged about Server for PHP which creates a server for PHP on an Android device. Couple that with MariaDB Server by the same developer and you have a nice package for running PHP code directly from your Android phone or tablet. That’s great for learning to code PHP on a mobile device as well as for hobbyists looking to do something fairly quick / something for your own use.

However this isn’t a really great option for developing mobile apps that you intend to sell, and lets face it… you like to code, but you are also trying to pay the bills!

Here is where the magic of KikAppTools comes in.

Obligatory disclaimer: I am not affiliated, employed or sponsored byΒ KikAppTools (or anyone for that matter) however I am seeking paid sponsors for my content so if you would like to sponsor my work please contact me or support me on Patreon.

KikAppTools lets you write PHP code that compiles down to a native mobile app. The dev tools are cross platform and they include an Eclipse-based plugin should you want that though it’s not required, notepad/nano/vim will work just fine for all you old school hardcore unhinted coders. πŸ˜›

Why KikAppTools? If you are a PHP indi developer or a small group/team/startup that relies on PHP then KikAppTools lets you stick with PHP on mobile projects and leverage your existing team of skilled PHP programmers rather than having to outsource the mobile development portion of your project or hiring additional programmers skilled in native mobile development.

Pros:

  • PHP from start to finish, leverage your existing dev team on entirely new or larger projects.
  • It’s FREE, even for commercial applications.
  • You own the app, no sublicencing of your code.
  • The dev’s are a small but skilledΒ group of programmers who are very responsive to feedback and are desperate for alpha/beta testers so if you run into trouble they are happy and motivated to help solve your problem (But do them a favor,Β  check the help forums first so you don’t overwhelm them with the same 5 questions).
  • Their Github account has working demo application code.
  • They have a “showcase” page for apps built using KikAppTools so it’s like getting free advertising for your startup or app!

Cons:

  • It’s “bleeding edge” new (read that as in active development) so there are no guarantees that there wont be occasional bugs while they continue to develop.
  • Command Line Compiler/Build tool. Currently there is NO GUI interface so it’s not exactly the most “user friendly” interface and the menu system could be simplified in my opinion.
  • No auto update system (but they will email you when an update is available).
  • Requires native SDK build tools to be installed. At its core, KikAppTools is a PHP to Objective-C (iOS) or Java (Android) transpiler and Builder so even though it will auto build your app you will still need to install the iOS & Android SDKs.
  • Small (but growing) community.

If you have any interest in mobile app development and PHP do yourself a favor and at least keep it on your radar as the developers seem to be making tons of progress!

Further, although its currently free because they they are focusing on making a great product first and will worry about monetization strategies second, in their FAQs section they say they are:

“contemplating accessible licenses for developers (Indie/Business/Enterprise – paid monthly or annually) depending on the features”Β 

I am sure plenty of PHP developers will have no problem paying for this service, however, Speaking more to the developers here… These days there are a lot of options for creating mobile apps (some of which cost nothing) that I think it would artificially suppress adoption (even by motivated PHP programmers) simply because there is a barrier to adoption.

I think Unity3D has a great use license that encourages student developers to work with it for free and even lets indi developers make some money before it costs them anything.

My 2 cents is that KikAppTools could have a similar license where lone developers or small teams can make up to some value for free every year and after which a “pro” or better license would need to be obtained if more than a few seats or more than some level of profit from the app. This would encourage developers to give it a try while also getting them to stick around and actually use it. Further,Β  it guarantees that as KikAppTools use grows the developers profit will grow as well.

And with that, this post is starting to get long…

Much Love,

~Joy