PHP-RPG Episode 1

Head back

Introduction

Hey there! Welcome to my tutorial series, PHP-RPG. In this series, we'll be building a text-based RPG game using PHP, and specifically using the Laravel framework.

We won't be creating any super-dynamic interfaces, so we'll forgo the use of front-end JavaScript frameworks. For our styling, however, we'll use Tailwind CSS in a Sass context!

If you're not sure about any of the terms I used, don't worry. We'll go over most of them.

Installing the Basics

First and foremost you'll need to install the PHP framework we'll be using - Laravel! A framework is a toolbox of code and utilities put together in advance to make our job as programmers easier. For instance, Laravel will allow us to handle routing, template rendering, authentication and validation very quickly with almost no overhead.

You can read the documentation on how to install Laravel. Whatever development environment you use normally for PHP projects will work just as well here.

In that documentation, you'll find mention of Composer. Composer is a package manager written in and built for PHP. A package manager allows us to painlessly install and keep up-to-date any libraries we add to our project. You can read about how to install Composer in their documentation, as well.

You'll also want to make sure you have NodeJS installed, and NodeJS comes with npm, or the Node package manager. This will let us include Javascript libraries and tools in our project, and keep them up to date.

Once you've installed Composer, NodeJS and Laravel, we can begin! Open your command line (terminal) of choice, navigate to any directory you want to work in, and run this command.

laravel new phprpg

This will begin the process of creating a default Laravel directory named phprpg in the directory you're cd'd into. Now, simply cd phprpg and we're in our working directory! Make sure your development environment (such as Valet or XAMPP) is serving this directory on your machine.

Installing and Setting Up Frontend Stuff

Now we need to make sure we're ready to handle UI requirements - this means scaffolding for authentication pages like login and register pages, as well as including a CSS framework to make our styling lives easier.

Laravel also ships with a very powerful, very simple templating engine known as Blade. We'll use this extensively throughout the project, so hang on tight.

Thankfully, both of our initial tasks are easy to do! You'll find as we continue that Laravel has a very simple solution for almost everything we need to do. Right now, that's UI scaffolding for authentication stuff. Let's do it! With the power of your Terminal in hand...

composer require laravel/ui
php artisan ui vue --auth

Boom! This will have included the UI package made by the creators of Laravel, and the second command will use Artisan (Laravel's very neat CLI tool) to generate frontend presets for all our authentication needs. This will be under resources/views/auth for the Blade templates, and app/http/controllers/auth for our Controllers. Don't worry about Controllers just yet - we'll get to that.

Tailwind CSS

With our pages and frontend stuff all set up, we'll need a CSS library that helps us rapidly build the interface. Thankfully, Laravel ships with Webpack. We won't cover it in a bunch of detail, but Webpack is a framework for compiling assets such as stylesheets, JavaScript, and sometimes images. Laravel puts a clean, concise layer over Webpack called Mix that lets us use preprocessors like Sass, LESS, PostCss and other processors in our workflow painlessly. In our project here, we'll be using Sass/SCSS extensively!

We'll use the Tailwind CSS framework for our project - it's a CSS framework that uses utility-first classes to style elements. That means rather than trying to understand all the junk Bootstrap or Bulma do, we can build all our components and styles on the fly!

To integrate it into Laravel, we'll start with these commands.

npm install tailwindcss
npx tailwind init

The first line should be recognizable - we're installing the Tailwind CSS package with npm. The second line is telling Tailwind we want it to generate the default blank config file, tailwind.config.js, in the root directory.

Next, we need to tell Mix that we want to use Tailwind in our Sass, and so we'll navigate to webpack.mix.js and update our configuration. At the top of the file, add this.

const tailwindcss = require('tailwindcss');

This will tell Webpack/Node we want to bring in the Tailwind dependency. Next, make sure your Mix method chain looks like this.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });

The Mix utility allows us to chain together processes we want Webpack to handle. In this example, we first tell Mix we want to compile app.js, this will allow app.js to seamlessly use ES2015 syntax, dependencies, et cetera. Next, through Mix we tell Webpack we want to process app.scss as a Sass file, and output it to public/css. The options we're tagging on is to process our Sass file with the Tailwind framework. Why? It'll become clear as we continue.

With Tailwind installed and injected into our Mix flow, we can add Tailwind to the actual CSS of our project. In `resources/sass/app.scss' empty the file and write this.

// Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind uses the @tailwind directives to bring in it's own prerequisite stylesheets. As these stylesheets contain every utility class you could possibly use, your complete CSS file will be rather large - we'll fix that in a later tutorial.

Now we need to compile our Sass so that it's usable! Thanks to the work done by the Laravel team, this is also painless. Back in your almighty Terminal, let's run this command.

npm run dev

This will launch a Node script that runs the build process for your application. This includes running Webpack, compiling dependencies, and more. If you'll be changing your CSS/JS regularly, you can instead run npm run watch and it will start a Node process that will automatically recompile your assets when you save any changes to files within the workflow.

Updating the Layout Template

Now we're done with installing our preliminary dependencies! Let's move on to the last step for this particular tutorial.

We're going to touch on Blade now. In resources/views you'll find a couple .blade.php files (which are Blade-specific extensions you need to use on all Blade templates) and a couple extra folders. For now, turn your attention to layouts/app.blade.php, as this is where we'll want to establish the very basic root "layout" for our project.

In there, you can either write or copy and paste this HTML code.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'PHP RPG') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
</body>
</html>

This serves as the most basic root template we could use for our game. I won't explain the HTML going on here. The double brackets ({{ }}) you see are how Blade knows to parse PHP information - for example, {{ asset('js/app.js') }} tells Blade that there's PHP within the brackets, and this PHP happens to be the asset() helper function. This helper will generate a URL to your Laravel project's asset directory, which can be configured to point anywhere. By default this is the public folder in your root project directory. In this example, we're telling Blade we want to generate a route to public/js/app.js, which is fed to the src attribute of our script. The story is the same with the stylesheet.

You also see @yield(), another Blade directive. @yield() corresponds with @section in a Blade template. We'll explore this more as we go on, but basically we're telling Blade to slot in a @section() with the same name (e.g. 'content') at this @yield() directive.

Now that we have this complete, you can go back to the root resources/views directory, open the welcome.blade.php file, and type this in there.

@extends('layouts.app')

@section('content')
   <h1 class="text-4xl font-bold">Hello, world!</h1>
@endsection

First we're telling Blade we'll extend/use the template file at resources/views/layouts/app.blade.php, and then we're defining an @section with the name 'content', which corresponds with the @yield() we defined previously. Everything within the @section will be slotted into the template where the @yield is.

The <h1> we put in here uses two Tailwind utility classes, which you should read about in the documentation.

Now, serve up your project directory in your development environment of choice! If you're not using Valet or Homestead, make sure your environment is configured to point to the public folder in your project directory. You should see your <h1> there all big and bland!

Outro

Congratulations! You've accomplished a lot if this is your first time with Composer, Node, Laravel, Tailwind and Webpack. It seems daunting at first, but the more you work with these tools the more you'll see how easy it makes development, especially in PHP.

We're going to build a full-fledged text-based RPG through this process, and I hope you'll be with me every step of the way.

Until next time, cheers!

// Splashsky