Startup Stock Photos
picjumbo.com_HNCK5108

Building Netsoc Admin (3/8) – Layouts

Laravel provides an implementation of the Blade templating engine which lets us define generic templates for our data and page layouts. What I’m going to cover in this post is some really basic templates which we’ll base the rest of our designs off. We’re going to need two different layouts: a default full-width layout and a default with sidebar layout. Breaking those down further, we’ll also need a template for the header, the footer and the sidebar itself. So, let’s get to it!

(Note: I am going to assume a working knowledge of HTML5)

Templates

To begin with anyway, all of our generic layout templates will live in resources/views/layouts so we can extend them later for more specific templates. As well as this, all of our files will end in .blade.php so signify that they are blade templates. If you’d like to read more about templating, I recommend having an ol’ sconce at the laravel documentation on the subject.

Header.blade.php

To begin with, we’re going to need a <head> section, as well as somewhere to begin our <body> too. So here’s some generic boilerplate HTML to begin our project:

The first kind of laravel-specific thing we’re going to include is a @yield() for the site title. @yield() takes one mandatory parameter and one optional parameter as such: @yield( 'some_name', 'default_value ). The name can be anything you like which we’ll refer to in later templates. The purpose of @yield() is to set out placeholders for content/sections later on.

All the below is doing is saying that some of our pages will have their own title but, if not, use the SITE_TITLE variable in our .env file as the default.

Next, we’re gonna need a by of shtyling to make our website look pretty. So then, let’s include some required CSS for

  1. FontAwesome – just some really awesome icons I prefer using to Materialize’s icons
  2. MaterializeCSS – If you need an explanation why this is awesome

Later on, we might need to include some extra stylesheets or add some extra tags to the head because Open Graph Tags are something every budding web developer should know (seriously, don’t build a project without them – it’s practically unshareable that way).

As such, we’re going to define two extra placeholder sections: one for extra CSS and one for extra header content.

And, finally, we’re gonna add a placeholder for a custom body class so we can properly scope our styling.

Here’s our full header.blade.php file for a proper overview.

Footer.blade.php

This one’s pretty simple after the above. It’s mostly just closing everything we started in the header file. There are three lines include the following scripts

  1. jQuery – a requirement for Materialize (and the modern web imo)
  2. MaterializeJS – adds all those cool components and effects we want to use
  3. app.js – this is our own Javascript that we’re going to run

Default.blade.php

Those two are all well and good but we don’t want to repeat ourselves and we’ll definitely want to deviate from the layout so something we’ll do here is stitch the two files together and put in our placeholder for a “content” section. This is the entire default.blade.php file:

Sidebar.blade.php

Here’s that fabled sidebar I just mentioned. When a user is logged in, they’re much more accustomed to a dashboard view of things for technical-type things (like AWS, Azure, facebook advertising, etc.). As such, there’s only one thing we absolutely need to adhere to in order to make sure navigation feels familiar – put our navigation in the sidebar. With Materialize, this is actually dead simple to do.

Below is the entire code of the sidebar but I’ve put in some helpful comments to help explain certain things. You don’t need to worry too much about the individual class names but if you’d like to learn more, you can check out the Materialize documentation.

default-with-sidebar.blade.php

As with our other default template, we’re just going to stitch together some of our base components and create a nice simple default layout for the admin area. It’s the same as before, we’re just going to use Materialize’s columns to define some constraints for the main content section and make sure it doesn’t ruin our view.

Wrap-Up

Well, that’s week 3 down and I hope you’re learning lots. These are just the base on top of which we build all of our views. It’s really simple to work with views within Laravel. I should have mentioned it above but anything within two sets of curly braces is executed as if it were a PHP command then echoed out (displayed on the web page). Later, we’ll pass data from our controllers to our views and fill our templates with actual, real-life data :O

Join us next week for another exciting episode of “Evan talks to himself about how he built NetsocAdmin so he doesn’t have to write actual documentation”!

Internet-Relay-Chat-IRC (1)

IRC – Connecting To #Intersocs

User Accounts

If you do not already have a user account for UCC Netsoc’s services, sign up at https://admin.netsoc.co/register

You will need a user account before continuing with this document.

Quickstart

If this is your first time, please read the entirety of the document as we do not provide support as of yet.

  1. SSH into Leela with your user credentials: ssh USERNAME@leela.netsoc.co
  2. Access your Weechat IRC screen: irc
  3. /connect netsoc.co
  4. /join uccnetsoc
  5. /join intersocs
  6. When you’re finished, hit ctrl + a + d

What is IRC?

IRC (Internet Relay Chat) is a chat protocol that allows us to communicate with all the networking/computer societies on the Intersocs network.

What The Fuck Is Intersocs?

Intersocs is a network of IRC “peers” that facilitates communication with the following societies:

  • Redbrick (DCU Netsoc)
  • TCD Netsoc
  • DUCSS (Dublin University Computer Science Society)
  • Skynet (UL Netsoc)
  • DIT Netsoc
  • UCD Netsoc (Coming Soon…)
  • NCI Netsoc (Coming Soon…)
  • NUIG CompSoc (Coming Soon…)

Logging in (SSH)

The first thing we’re going to need to do, is actually log into Leela (our primary user server). To do this, we’ll use Secure Shell (SSH).

Mac OSX / Linux

SSH clients come preinstalled on all versions of Mac OSX and Linux. To start using it, open up your terminal/console/command prompt of some kind, replace USERNAME with your username and execute the following command:

You’ll then be prompted for your password.

Windows

You’ll need to install some kind of SSH client for windows. We recommend using PuTTY.

To use, PuTTY, I’d recommend this tutorial.

You’ll need the following details:

Screen

The screen command is what’s known as a \texit{terminal multiplexer} (or “mux”). What it does is it creates multiple windows for you to run different commands or leave commands running. It’s useful if you want to leave something connected but still want to be able to log out.

We’re going to use screen to keep a permanently connected irc client running for whenever you log in.

Our irc command

When you log in, you’re automatically given a .profile file with some predefined commands. One of those commands is irc.

What happens is that when you log in, we automagically create a screen for you (if it isn’t running already) and we alias} “\inlinecode{irc” to attach you to that screen.

Manually Creating A Screen

You can also manually create screens yourself. Below is part of the example .profile we give everyone. You only need to concern yourself with lines 2 and 5.

screen -dmS irc bash -c 'weechat'

Here we’re:

  1. creating a screen
  2. telling it to run in the background
  3. naming it “irc”
  4. executing the command bash -c 'weechat' – you can leave this blank and it will run a bash shell by default

alias irc="screen -r irc"

This line simply aliases the command ircx to command screen -r irc. We can attach ourselves to any named screen using the syntax screen -r NAME

Okay… I want to leave. Now what?

To detach from any screen, simply hit ctrl + a + d and you’ll be returned to your original terminal.

IRC

This is it, the bit you’ve all been waiting for.

Once you’ve connected to your IRC screen (that’s running Weechat), you will need to connect to our netsoc server with the following command:

Congrats, you’re now connected! Start out by typing /join uccnetsoc and /join intersocs

When you’re done

Simply ctrl + a + d to detach from your screen and type logout to leave the server.