Web and Mobile Apps Dev

I have been volunteering at ICAF (International Child Art Foundation) since April of this year. When I first started off, I was assigned to be a video editor to edit pre-recorded videos for some international festivals. The reason why I selected this position is probably because I put the video editing skill on my resume I used Kdenlive and Openshot interchangeably to edit these videos. Sometimes I also used Audacity to sync between left and right channel of the videos.

After three months of video editing, I was just beginning to love to edit videos. However, I assigned to redesign the gallery page on the ICAF website two weeks ago. This is my second  web development challenge. My first challenge, as you can see on my website, was to build the first website for another non-profit organization. Although that project was abandoned long time ago because the interruption of school work, I learned the existence of server-side scripting at the time and wrote the first PHP application, the contact form on my website. This time I need to place thousands of children’s artworks and some other pictures to the gallery page in an organized layout.

I know that I have to use pagination for this project. It’s my first time to create pagination pages using PHP. The original design shown below was using JqPageFlow jQuery plugin to implement the pagination as the user scroll down the page.

ICAF Gallery page original design

After some more research, I thought that the infinite scrolling is not good for bookmarking since the manager specifically pointed out that he wants to have a back button for each page. Therefore I revised the design to use the traditional pagination method similar to Google:

Revised ICAF Gallery page layout

Based on the above design, I wrote a test page to test my pagination code. This page is still under development. I will integrate the code into the original page once I completed the testing stage. You can download the source code for this page here (I didn’t include the image files since these images are over 1.5 GB). Note that I used exec PHP function to execute ‘ls’ Linux command to output the image file names to an array rather than use a loop or a database table to process file names. This page also contains a script to split different parts of the file name since these names followed a specific pattern: “country-firstNam_lastName-age-thumb.png” as well as some knowledge I got from the C for loop tutorial. Also note that this is the test code, meaning that I haven’t added extensive comments to the code yet.