Website for

“Centre Ahli”

–

Volunteer Work

Project code on Github

Picture 1: website logos.

Introduction

I worked on building a website for “Centre Ahli”, a center that welcomes boys in precarious situations whose ages vary between 7 and 15 years.

To store information, I used a database and handled it using Microsoft SQL Server Management Studio. To program I used Visual Studio which allows using all of the technologies needed in one program.

The website is still under construction and is not available for the public right now.

Goals

• To present the center to the public in a positive way.
• To be international by using English, Arabic and French as the supported languages since a lot of the volunteers that come to the center to help are non-Moroccans.

• To automate some tasks that are performed daily by the educators, such as:

  • Organizing activities with the children.
  • Adding children to those activities.
  • Subscribing volunteers to those activities.

Technology used

Front Page

The first things visitors see are some menus, a brief description of the center, a link to a more descriptive page if they wish to learn more about the center and some logos / graphics.

The language menu allows switching the website between different languages: English, French or Arabic.

The search / social media menu allows looking for information in the website or to get to the center's social media pages fast.

The main menu allows navigating to important pages in the website.

The blue mosque represents the actual mosque that is right next to the center and the little house represents the center itself, along side a shiny little sun and birds flying around to represent the peaceful environment that the center provides.

Next-up is a presentation video made by one of the volunteers.

After that a list of the latest activities is shown. A visitor can sort the activities by category. Clicking on an activity takes the visitor to the activity details page.

Finally, the footer displays some quotes by educators, the center's contact information and a contact form.

Picture 2: the front page.

Log-in

Picture 3: the log-in form.

In order to perform actions in the website such as making a comment, adding an activity as a volunteer, etc, one must create an account and log-in.

After loging-in

Profile

Picture 4: profile details.

Picture 5: more profile details.

The profile page provides useful information about a user:

• Profile Picture
• Details such as a biography
• Notifications
• Upcoming Activities
• Created Activities
• Attended Activities

Actions

Picture 6: the actions field and the user's name are added to the menu.

Depending on the type of account that has loged-in, the user will see a slightly different interface. The picture above shows the actions available for the educators. If the account is of type volunteer then only "Create Activity" will be available.

Add Child

If an educator clicks on the "Add Child" action menu they'll have access to a form that allows adding a child's information to the database.

Picture 7: the form that allows adding a child to our database.

Add Related Person to a Child

To add a relative such as a parent or sibling the educator can click on the "Add A Related Person To A Child" button. After that they'll need to pick a child, then fill in the form.

Picture 8: the form that allows looking for a specific child.

Picture 9: the form that allows looking for a specific child.

Create Activity

Both educators and volunteers can create an activity. After clicking on the "Create Activity" button in the action menu, users are invited to fill-in the activity details and add to it the children that will participate.

Picture 10: the form that allows creating an activity.

Activities

Activity page

An activity page is where all of its information is displayed:

• Description
• Location
• Date
• Participating Volunteers
• Volunteers Attendance
• Participating Children
• Children Attendance
• Comments

A page is also interactive in the sense that volunteers can add it to their upcoming activities, comment on it and have conversations with other volunteers in the comment section, and can be modified or deleted by the activity creator.

Picture 11: an activity page.

Picture 12: delete activity button (if the user is the owner).

MP3 Player

–

Advanced Programming Class

Project code on Github

Picture 1: The main (center) panel of the MP3 player.

Introduction

I built a desktop application using Java that shows a graphic user interface (GUI) of an MP3 player. It has two main panels:

A big one in the center, which has three tabs:

• Artist / Group
• Style
• Albums

A smaller one to the right, which has two blocks:

• Playlist
• Most recently played list

The center panel

If we select one tab in the center panel, songs are organized according to that tab. For example, if we click on the “Artist / Group” tab we will see all of the songs organized by the artist or group that created the songs. Clicking on the other tabs has a similar effect except that it organizes the songs by either style or album.

Picture 2: The Artist/Group Tab.

Picture 3: The Style Tab.

Picture 4: The Album Tab.

The right panel

The panel to the right has a dynamic couple of blocks:

• The playlist block updates whenever we add a song to it. That happens if we click play on a song or group of songs (an album for example).
• The most recently played list updates whenever a song is played by adding the last played song on the top of that list. We also have the ability to clear these two blocks if we don’t need the information that they hold anymore.

Picture 5: The playlist block is filled with songs that the user wants to play.

Picture 6: The most recently played list block is only filled with songs that have been played.

One more functionality

Finally, we can save the current state of the player by clicking on menu then save, this means the next time we come back we will see our playlist block and most recently played list block the same as before we got out of the MP3 Player.

Picture 7: Using the save button before exiting.

Picture 8: Example of a class that implements Serializable.

Picture 9: The two files that are stored on the hard drive after clicking save.

Picture 10: MP3 Player Project in Netbeans.

Picture 11: An overall look on the MP3 Player.