The State News managers need a more efficient way to track student employees' time. The challenge of making a online timesheet was given to the web team at The State News.
noun. klep-si-druh
1. An ancient device for measuring time by the regulated flow of water or mercury through a small aperture.
As part of the web team at The State News, I was responsible for programming and co-designing the project.
On the backend side, a in-house php framework, Foundry 6, was used for MVC, and a intensive amount of PHP date and time related functions were used for time calculation and conversion.
On the front side, the application uses Twig as the tempting engine, and utilized MooTool javascript framework for clock, Ajax, and other user friendly interface.
The main page of the employee panel give you every single one of your time card in one glance. Hovering the specific card will give you the start and end time of that card. The page accumulates as your work life in the organization increase. All timecard was stored in the database as the format of (id, timestamp_in, timestamp_out, user_id). eg.(5, 1306108680, 1306108680, 2). All calculations was made when the application load using php and javascript.
Other Users panel giving you the knowledge of who is currently working and how long they have been here for. No more yelling or building searching.
The admin panel gives administrator the ultimate power all in one place.
The panel provides two viewing modes:
Under the Observing Mode, person with highlighted name are currently clocked in. Most common total hours are listed in columns after the name.
New user can be added by start typing in the bottom right "ADD NEW" box. A form will loaded through Ajax attach at the bottom of the table providing all the input for the new profile.
Under the Editing Mode, after click on employee's name, his or her detail time will be loaded into a table with search options on the bottom right corner through ajax, along with the profile on the left ready for editing. All the time duration was calculated on the fly using the basic timestamp that stored in the mySQL database, which is (id, timestamp_in, timestamp_out, user_id). eg.(5, 1306108680, 1306108680, 2).
Renewal Body Bootcamp is a boutique gym with customer mainly from the city. The new business needed a website to attract potential customers as well as managing a series of specialty classes with specific measurement.
Task: The client needed a way to create fitness classes and enroll members to the classes. Each class will have its unique list of measurements. The members that enrolled in the class will be measured before and after the class for the same measurements listed under that class. Each measurement contains name and unit two attributes. These measurements will be displayed in the members Progress panel when they log in.
From adding new program to changing program content, the client will able to update all information by click and edit. No separate page. No confusion. The detail button after each class will load all information about that class on the same page through AJAX/JSON. All information will be autosaved. No spending 30 minutes filling out huge form and accidentally hit back button.
The client needed a way to manage each class's measurements sequence and attributes that will be showed on the client's progress tab when they login. Each measurement have name, value, and unit attribute. A drag and drop sortable list made changing sequence a piece of cake on her end.
The process is simple and intuitive. The first column contains all existing classes. Selecting the class will display all students that are enrolled in that classes in the second column. Selecting individual student to update their measurements in the third column. Typing the student name in the second column autocomplete box will enroll that student to the class. Autocomplete makes the process much faster. No looking up 5 pages of client names to find that last name.
An interactive gallery is designed from scratch with jQuery. Unlike most of the Flash interactives, the gallery is fully integrated with the backend, making uploading new picture, changing caption, and alter sequence very easy for the client. Viewer is able to cycle through slides with intuitive interface. The gallery will also cycles itself to expose more content within the limited area. The progress bar type timer also giving the viewers more sense control on top of the interface.
Every class' detail including price and online payment was able to presented in the home page using a sliding box. This implementation avoided a 5 screens plus big table for all the class detail or a multi-page clicking navigation that adds confusion and frustration. The viewer is able to find clear and precise information on the classes that they are interested and finish the transaction process all in one place. All the contents including Paypal is also self-manageable from the backend.
The client is able to setup Paypal for each class through the back end. The client generates the button code on paypal website and then copy & paste into the popup box to save the update.
IE 7,8, and 9 is fully tested and supported by the site. Html, css, and javascript hacks & tricks was utilized to support some of the animations and html5 elements.
The site is integrated with google calendar and maps. The client is able to update the content through google's API.
The site's blog section is power by Wordpress.
The site's backend is created from scratch and almost every content of the site can be modified through it. The client who had basic computer skill was able to maintain the site all by herself.
Michigan State University Accounting Student Association is the biggest student organization in the Eli Broad Business College. The student organization need a clean and simple website that represents its professional nature.
The Accounting Student Association is the biggest student organization in the Eli Broad Business College of Michigan State University. With over 150 active members attending around 10 meetings per semester, the organization need a clean, professional looking, and highly functional website. As a member of the executive board, I designed and programed the website from scratch.
As the business nature of the organization, the design was focused on simple, clean, and informative. White space, gradient, and multi-column was used to achieve the goal. The site is powered by LAMP. 960 grid system for CSS was used for clean markup. SQL query such as table joint was used to solve some of the business logic.
After maintaining and communicating about the website for two years, I was very honored to received the Outstanding Member of the Year award. Only one person of the organization is award every year and is presented by the MSU accounting department.
The home page is a quick capture of all the latest contents of the site. It keeps the members up to date as well as provides a quick access to individual section with full and older information and documents. The three closest events that are later then the current date is automatically picked and summarized on the left. Viewers can also apply, downloading meeting documents, and R.S.V.P certain events.
The rest of the site categories its content and presents its information in a chronological ordered list for easy navigation. Here are some of the highlights from each section:
Under the Events tab, a colored tag is added by the site to separate passed and upcoming events so it maintains the chronological order of the entire semester's events as well as inform the upcoming events. PHP date & time function was used.
R.S.V.P events can be registered through a pop-up event on the homepage. The red ticker update the number of people that have signed up in real-time.
E-board members are able to update their own bio on the back end. Positions can be picked through the drop down menu. Once the position is picked, the sequence on the front end will be displayed according to the predefined SQL table through a table joint.
A javascript gallery plugin was used for displaying pictures.
Presentation and minutes download.
The backend was wrote from scratch with each interface and functionality specifically designed towards each part of the front end. It made creating and updating contents fast and easy with minimum technical knowledge. The broad members can basically modifying every content on the site on their own.
Under the Events tab, a colored tag is added by the site to separate passed and upcoming events so it maintains the chronological order of the entire semester's events as well as inform the upcoming events. PHP date & time function was used.
E-Board members are able to update their own bio on the back end. Positions can be picked through the drop down menu. Once the position is picked, the sequence on the front end will be displayed according to a predefined table through table joint.
Presentations and meeting minutes can be upload from the backend. File's icon is added based on the file extension.
Michigan State University Student Investment Association is the biggest student organization in the Finance Department of Eli Broad Business College. The organization needed a website to be the one-stop shop of all the recent updates about the organization. Online payment and member registration & management can also be overseen through the website.
Contains all the most recent information of the organization.
Prospect members can register online and pay membership due through Paypal. All information were saved into database, which saved all the paper application and the hassles. Relevant information were grouped together for easy input. Drop down and checkbox was utilized as well.
that come with a back end to edit it.
Outstanding
Member of the Year
“I am speechless! It is absolutely amazing! You totally exceeded my expectations on getting so much done in a small time frame... Absolutely blown away!!!”
Front-End Engineer where 4+ years experience of building pixel- perfection UI with responsive/high performance AJAX technology will add value.
Taking great passion for enjoyable user experience and understanding of server-side technology to bring irresistible and high performance UI to reality.
I continue to find my greatest pleasure in the work of creating than replicating, thus I code, design, and breath with passion everyday.
"I never did a day's work in my life. It was all fun." - Thomas A. Edison