Git Product home page Git Product logo

the-league-rotational's Introduction

The League Rotational is a satirical news website in the vein of The Onion, but for content revolving around the popular mulitplayer online game League of Legends.

I worked on this site a few years ago while in college to learn a more "modern" Java web framework outside of what I was learning in school, namely basic Servlet and JSP capabilities. Instead, The League Rotational is written in JavaServerFaces partnered with Bootstrap components and styling. Funny enough, this experience ended up being incredibly useful during my first internship where I ended having to use ICEFaces.

I ultimately lost interest in contributing new content (some might say "got lazy") and the website is no longer hosted. While I did not take any screenshots while the website was still live (and I truly never want to try and get this up and running again), thanks to the Wayback Machine we can see what it looked like, with the exception of a few missing images.

Unfortunately I did not write any notes or a "readme" at the time, so everything you see below is written in retrospect. And boy, is it tricky to remember coding decisions from 3+ years ago. I don't even remember where this thing was hosted.

Overview

JavaServerFaces uses view templates written in XHTML, and backing ManagedBeans to process and deliver web content suitable for consumption by a web browser. No actual article content is hardcoded into the HTML; instead, a MySQL database was created for storing such information, with a "DataProvider" class exposing read-access to this database through a JDBC connection.

Every single page is displayed within the template.xhtml from the WebContent root directory. The top navigation bar, "The League Rotational" header, and the bottom navigation bar are all modular components that are included inside of this template page. The "content" div is populated with one of the primary views: index, article, or search.

index.xhtml

Index is the home page of the site which displays the most recent news article prominently using a Bootstrap Jumbotron. Other articles are placed into a series of panels below, which shows each article's title and a preview of the content therein.

Thanks to Bootstrap columns, the content is adaptive and will dynamically adjust to suit narrow, or mobile displays.

article.xhtml

Tapping an article from the home page, or from a category provided in the navigation bar, opens up the Article view. This displays the full article content contained for the given URL.

Sorry to interrupt your reading. But further down the page this page also provides the ability to "rotate" to other articles, the "tags" for this article (for which you can view other articles with this tag), and a footer just to round out the page.

search.xhtml

Displays a list of articles based on various parameters passed via GET parameters. The backing SearchBean does some simple SQL queries to return articles that would meet the specified criteria.

The "categories" displayed in the navigation bar at the top of the page are actually just glorified pre-defined searches. For example, clicking on "Community" would take you to this URL:
http://leaguerotational.com/search/tag/community/page-1

A sample image from the Wayback Machine shows it looking like this (barring the missing images):

Dependencies

This must have been before I knew what Maven was. The dependencies are stored inside a folder called "libs" and are as follows:

  • JavaX Faces
  • JSTL
  • MySQL Connector for Java
  • PrettyFaces

Summary

I'm not a funny writer, JSF is not really a "modern" technology, and this project was mostly just done for a learning experience. But as far as learning goes, I think it was a major success story for younger me.

the-league-rotational's People

Contributors

scb5304 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.