Lakota West High School

My early fascination with the internet took real shape and direction when I entered high school. Throughout my years at Lakota West, I was able to take classes in Web Design, Computer Science/AP Computer Science, and dabbled in an experimental, yet visionary course called Computer Fine Art.

While in Web Design in particular, I was graciously permitted to use class time to explore areas of personal interest, which included my self-taught knowledge of PHP/MySQL and more advanced techniques in the ways of the web, circe 2005.

One of the highlights of the senior levels of the web design course is the opportunity to redesign most if not the entirety of the Lakota West High School website. Though projects throughout the year involve upkeep and perhaps new designs of smaller group pages (i.e. school clubs, event showcases, etc.), nothing compares to the opportunity to redesign the entire main page website.

My senior year, the main school website was the project, but there was a much greater goal: conformity.

Over the years, the Lakota West High School web presence became more and more of a heap of pages on their servers rather than an organized and reputable source of information. This new design needed to apply and incorporate every other website.

Essentially the project needed to meet the following requirements:

Be clean and appealing to the user, while showcasing the school
The front page needed to deliver timely relevant information
Existing high school pages needed to be incorporated into the new website
Had to link back to the School District and Athletic websites
Needed to be scalable for added sections and pages in the future
Additions and maintenance needed to be easy for a non-technical user

First and foremost, a design had to be chosen. Since most of the web pages in the high school domain were simply information-based, I figured a horizontal navigation with a sub-vertical navigation would be the easiest to deliver and would leave ample room for the main content to be displayed.

Based on designs I had seen on the internet, the main banner for the high school (designed by another student) would fit great over the navigation, which with a transparency, could display various images of students at random while navigating the website. The extra space on the left side of each page also provided an avenue to display more section-specific images of students.

Once a design was chosen, collecting the content was easily distributed to students in the class. Organizing however, still took some thinking. Essentially, all content came under five categories: About the School, Academics, Guidance Counseling/Information, School Staff Information, and misc./Student Life. Everything could fit under these categories. Once organized, creating the dynamic flow of the website was easier.

The entire website was built in summary on a simple PHP practice of an index page that would link to each section, i.e. index.php?section=X. Once in each section, there would be another served index that would deliver individual pages, i.e. index.php?section=X&page=Y.

As expected, you can imagine a statement that fed of this data would look something like this:

$filename = "section/".$section."/".$_PAGE["link"].".php";

This code would, after some checking, be dumped into an include statement that would deliver the requested content.

Under this methodology, the website was being molded into a simple directory structure that looked as follows:

/ index.php header.php footer.php /images /style [.css documents] /home [home-page content] /sections /about_us /academics /guidance /staff /student_life

At this point, two problems were developing:

What to do with pages that really couldn’t fit into the theme
Creating a manageable and flexible way of handling each section’s navigation menu

The first problem was less of a problem, but meant succumbing to the fact some websites needed to remain on their own. For instance, the school newspaper, and certain art galleries would never fit.

The second problem was proudly tackled by creating a few PHP functions that dynamically created the navigation menu based on the structural preconditions.

For instance, each “section” directory had to have a “__pages.php” file which lists each link that should appear in that section’s navigation menu. Refer to the image above for the “About Us” section, and you will see each item in the code below matches the navigation menu.

/ /sections /about_us __pages.php

Mission West Facts Core Beliefs State Report Card|http://www.ode.state.oh.us/reportcardfiles/2005-2006/BUILD/019737.pdf Bell Schedule Passbook Visual Tour|/out/visual_tour/index.htm Parking Directions Contact Us

Each of these “pages” needs to match a php file in the about_us directory.

Mission > mission.php West Facts > west_facts.php Core Beliefs > core_beliefs.php, etc.

This concept made for an easily scalable system where a non-technical user only needed to add or remove the title of the page, and respectively add a file to the directory with the same name in order to add/remove content from the website.

Now, a few irregularities are noticeable in the above code, and this was necessary because in the process a few exceptions to the rules came up. What if a navigation link needed to direct the user to an external website? Welcome to the pipe.

The easiest links to add are links to external websites. This requires no additional content in the directory, and was achieved by simply letting the user adding a pipe “|” after the name, and including the URL. In the example above, State Report Card is not a link to a php file on the server, but rather is “piped” to an external website.

For websites that were outside the main website design, the pipe was also appropriate. Also in the example above, the Visual Tour was essentially an external link, except it merely points to another directory on the web server. These webpages were put in a directory labeled out as short for “outside” the main theme.

As a design choice, the current page the user was on was highlighted. For most sections, it was easy to default each section to the first page in the list, but a problem arose when organizing the Academics section.

As you can see in the image above, the first page in the Navigation Menu is not the default page. This section’s page file looks like as follows:

'07-'08 Calendar|http://www2.lakotaonline.com/district/calendar/2007_08Cal.pdf *Core Curriculum Course Offerings #Teachers Sites Math Department NHS National Merit Foreign Language|http://www2.lakotaonline.com/foreignlanguage/foreignlanguage.html Visual Arts|http://www2.lakotaonline.com/west/art/visualart/lwh_artstugal.html Web Designers|http://www2.lakotaonline.com/west/hummer/hummer.html Final Exam Schedule

The second link is prefixed with an asterisk ( * ), which alerts the system that the default page for this section is not the first link, but rather the second link. You can also see other links which take advantage of the pipe to link to external websites.

Another issue that came up was sub-sections. In the navigation, a link may move the user into a subcategory that appropriately deserved it’s own navigation menu while still remaining in the realm of the current section. This was obvious in the case of the Guidance section which requested that separate areas be made for Counselors, School Info, etc, as observable through this screenshot:

/ ... /sections /guidance __pages.php /counselors /college __pages.php ... ...

The directory structure, listed first, shows that each sub-section had a new directory and it’s own __pages.php file that would issue it’s own navigation menu. In the top-level section, the __pages.php file would reflect the sub-section by linking to the directory! The pipe would indicate an external link, but by formatting the link as a directory, the menu processor would recognize the subsection.

This made dynamically modifying content even more flexible as entire subsections could be layered endlessly deep with minimal knowledge by the user. The user only need to reference the existing structure to know what to do!

At the time of this writing, the split() function has been deprecated, and considering how old this project is, I haven’t updated the code to use explode() instead. I apologize for the appearance. Below the obtrusive error you can see the breadcrumb menu includes “School Info”, which is the sub-section link I clicked on from the top-section navigation menu. This sub-section has now generated it’s own navigation menu.

To key in on another creative solution, each section was beginning to accumulate a series of “pdf” documents. These were being linked to at various stages, but leaving them scattered around the directory tree didn’t seem like an efficient way of keeping them together. Instead, I had the idea to put all pdf’s in a respective pdf directory in each section, and as you can see from the file above, Calendar of Events|pdf=calendar_of_events, the use of the pdf= syntax redirects the user to a specific location for all the pdf files.

At this point, the system was coming alive. Adding content became easy and was quickly accomplished with the help of students in class by adhering to the predetermined rules. For aesthetics, and for the first time on my end, I experiment with Apache Rewrite to clean up the URL.

In the end, all of the outlined goals were met. By design and functionality, the faculty enjoyed the appeal and organization of the website. The front page delivered news and was attached to a manageable MySQL database that stored a calendar which was queried for upcoming events by date. Almost all of the existing website content was incorporated into the design, leaving a flexible fallback for sections that needed to stand-alone. The main navigation included a link to the High School athletics, while in the footer, a prominent link to the District website was included.

Most importantly, the content was manageable from a non-technical standpoint with immense flexibility, and additional pages could be added by template with minimal knowledge of HTML and CSS.

Looking back on this project through this write-up, few websites impress me as much as this one did. The scope of the project and the amount of knowledge I acquired from my limited understanding at the time left an immense impact. Unfortunately, the website has been replaced as the school district eventually adopted a theme that encompassed their entire domain presence, but I still have my working copy at http://www.lakotawest.newrandom.com.