• Online Portfolio

CFTV-16 Online Information Center

Synopsis

As an information hub for the students and teachers that work in the Cy-Fair School District television studio, the CFTV-16 Online Information Center has been designed to be easy to navigate and to present information in a simple format that is easy to understand.

In its current version, the site is powered by PHP and MySQL which, combined with XHTML and CSS, provides a rich, dynamic experience and boasts both the front-end interface for students and teachers as well as an administrative back-end for manipulation of the databases by studio personnel.

Screenshot of Upcoming Events

Upcoming events are taken from the database and formatted to include color-coding and date counting.


Screenshot of Attendance Table

Attendance Tables are also created dynamically by using data from a MySQL database and formatting that data into an HTML table via PHP.


Design

One of the initial goals in designing this site was easy access. To that end, the entire site has been designed without the use of graphics. Through the use of CSS techniques, the site maintains a colorful layout while keeping a very low loading time across the spectrum of internet connections.

Screenshot of Navbar

An example of interactivity, the navbar uses CSS to alter the hover status of links, as well as blending the currently selected link into the pages content.

A description of each link appears at the bottom of the navbar during rollover.


Webadmin System

To facilitate easy updating and editting of the site a custom, PHP powered back-end was designed. This back-end system requires user authentication and funtions with an SSL encryption layer to maintain security.

Screenshot of Upcoming Events Editor

A screenshot of the Upcoming Events editor in the back-end system. Items can be individually or group editted or deleted.


Screenshot of Add Event

The Add Event form arranges form fields in an organized manner and uses JavaScript to verify entered information before submitting the form.


Screenshot of Attendance Table Edittor

To update Attendance Tables a simple point-and-click GUI was designed.