My Pages

Thursday 26 May 2011

Second Life - Introduction


Introduction


Second life is a virtual world taking form as a digital world imagined and created by it’s own residents. Different reviewers and critiques defined second life as a metavers (a universe which describes or resembles our universe). Second life is anything you want it to be and what you do with it is up to you. All content created in second life is created by the users which are called residents. You can shape a virtual life by doing things which are beyond your grasp in the real world, things that even defy the laws of physics. The list of possible second life activities is endless.



Second life as an idea was conceived by Philip Rosendale. His main idea involved creating the world on a smaller scale. Artists representing our universe achieve this depiction by using clay, words or marble, Philip chose bytes. Work on Second Life started in 1991 and was initially called Linden world. The beta version included a teleporting fee as well as tax on primitives (short prims) on top of land-maintenance costs. Fees were also charged for rezzing (to resurrect one’s avatar) and maintaining all resident-created objects. June 23rd 2003 Second life went live. This version introduced a number of new features such as improved search functions, world map, refined land management options, a new copyright system for resident creations and graphic improvements. This version of second life also rewarded people for socialising. As new version of Second life were published other features were introduced such as the concept of SL time which is the same as Pacific Standard Time ,a number of new scripting and interface features, gestures and custom animations, currency exchange and an end to stipends for basic membership plans.

Task Summary

Throughout this post we will go through the following tasks;
  • Creating a Second Life account
  • Managing controls in Second Life
  • Managing preferences
  • Second life newcomer destinations
  • Customise avatar
  • Visiting Second life landmarks and locations


Creating a second life account

Creating a Second Life account is fairly straight forward. By clicking on this link one is directed to the first step in creating an SL account. At this stage a selection from a number of avatars is provided.


Once the avatar is selected the user is redirected to the next step which involved entering the preferred user name. When the user name is entered a button is made available so that the user can check the user name for availability. 



If the user name is available the user is taken to the third step. Here the user is asked for other pertinent information such as the email address, date of birth and password. Once all the required information is inputted a create account button is made available which creates the SL account.



Once the account is created Second Life requires a client application (Second Life Viewer) by which to run. I installed second life viewer and logged in using the defined user name and password in the previous steps.

Managing controls in Second Life

In this section of this blog we will go through some of the basic movement controls within this virtual world. I found this link very helpful in this regard [Keyboard Shortcuts]. Once logged in SL I found myself in the newcomer destination of the Welcome Area. I stayed in this area to get well used to SL controls. The camera by default is positioned behind and slightly above the avatar. I found that the mouse look through a first person view to be far more convenient in certain situations. To move in the world I use the keyboard shortcuts W - Move Forward A - Move Left , S - Move Back, D - Move Right. The mentioned movement is also possible from the move panel when activating the Move button from the bottom menu bar.


As you can see from the panel I activated the run mode but in case I want to run or fly in this world the options are made available. I found that the keyboard shortcuts E - Fly and C - Descend to be very convenient. Once I managed to get used to the mentioned controls I started experimenting with the View button in the bottom menu. 



This panel manages the camera and as already mentioned I use the 3rd Person mainly and the 1st Person view when flying. I found that zooming in and out using the mouse scroll button to be more convenient and to rotate the camera around the avatar by simply pressing the ALT and left mouse click and gesture the mouse in the preferred direction around the avatar.

Managing Preferences

Preferences can be managed by accessing the preferences menu which is available from Me available at the top menu bar or simply by pressing SHIFT + P. Once open the preferences menu is divided into various sections each of which we will discuss briefly.



General: This tab offers basic options such as changing the language used or the start location one logged into this virtual world. This tab also allows the user to change which name tags are shown as well as the time it takes for the user to be timed out. One other option available is whether the movements shortcuts should be activated.

Graphics: This tag presents basic when opened will only show a slider ranging from fast and low quality to a less performant but visually enhanced. A button advanced is available for users with better knowledge on the settings made available such as shaders and physics. A hardware button also shows a set of options related to the GPU installed on the user’s computer.

Sound and Media: This tab allows the user to manage sound options be it sound from ambient or sound effects sliders for each type of sound emitted is made available.

Chat: The chat options shows the user options related to chatting. The options vary from the font size displayed when IMing to showing instant messages in separate windows or tabs.

Move and View: Options shown on this tab give the user the facility to change the view angle, mouse sensitivity or whether to show the avatar in mouse look.

Notifications: In this option pane a set of rules are displayed which will filter the type of notifications which are either shown or never shown.

Colors: Settings with regards to the color given to avatar effects beam, chat and names throughout the virtual world.

Privacy: The privacy preferences tab allows the user to clear chatting, images and search history among other privacy related options.

Setup: Setup options allow the user to change network, web or software update options.

Advanced: Other options such as the developer menu can be enabled from this option.


Second Life newcomer destinations

Once logged into Second Life the first area the avatar is placed at is the Welcome Area. Many SL locations are designed for newcomers such as myself. From Linden-run welcome areas and sandboxes to resident-run nightclubs there is always help in the world for newcomers. Throughout this section of this blog some newcomer destinations were visited which also helped me get used to the controls for navigating through the world.

Welcome Area


This is the first area any new user is spawned at. Newcomers such as myself can practice building or get pointers on the latest must-see sites.

Help Island
Once teleported to this location using the teleport function in the Places sub menu on the right side bar, I noticed a lot of billboards with linking to video tutorials on how to interact with Second Life. 



Navigating through this place I found some free items available from billboards. At the center of the place I also encountered a freebie store which also explains the currency as used in Second Life.

Orientation Island Public
Like the other places visited this island gives new comers information on how to navigate throughout the world, fly, chat, use objects and change appearances.

 

Fermi Sandbox
There are a lot of sandboxes in Second Life. Sandboxes provide a place for residents and newcomers to their practice their building skills. Public sandboxes have all builds wiped every 12 hours so one must make sure to save a copy when logging out of the world. In this blog Fermi sandbox was visited.



Customise Avatar

Customising the avatar is available from the My Appearance side bar menu or in the Me top menu bar. Once in the My Appearance panel the panel is sub-divided into two tabs one listing the available outfits and the other showing the pieces of clothing worn by the avatar. This allows the user to change avatar clothing in seconds. To edit the avatar appearance an icon in available at the panel header. When activated the camera changes perspective to face the avatar. For this tutorial I changed the avatar’s default Goth hair style by creating a new Body Part and named the new object to GregHair (new). Once created I tweaked the color, style, eyebrows and facial setting until I got the desired appearance.



Since I am a big fan of medieval warfare I navigated to my inventory which is available at the right hand side menu bar and attached a Celtic Sword which was available in the Library Node within the Inventory tree menu. The inventory is subdivided into different nodes each pertaining to a different category such as ;
  • Animations
  • Body Parts
  • Clothing
  • Gestures
  • Landmarks
  • Note cards
  • Objects
  • Photo Album
  • Scripts
  • Sounds
  • Textures
  • Accessories


Visit Second Life landmarks and locations

At this point I felt I had a good handle on navigating through this virtual world and decided to teleport to some of the most renowned landmarks and locations within Second Life.

Middlesex University




Lost Gardens of Apollo


Svarga


Straylight


Paris 1900



Conclusion


If after this experience I had to describe Second Life I would describe it as an interactive virtual world created by it’s own users. I can’t say that I enjoyed moving through the world as it was too slow and too unresponsive at times, there were a couple of times while I was visiting certain locations were I ended up stuck between walls or under a building. That said I do appreciate and admire the amount of effort needed to develop and maintain a system of this magnitude. I also like the way that Second Life allows for creative users to make use of their skills.

Wednesday 11 May 2011

Web Space Management System

Introduction



At this stage within this module we have researched and discussed server-side technologies to some depth. We discussed web-servers, server-side scripting and database servers which are the components responsible for creating a large percentage of the web applications found in the internet and intranets alike. Server-side technology is key in transforming web sites into a fully fledged web application.


The main objective within this blog entry is to document the development of a web space management system. A web space management system is a web application which provides the user with the ability to store and manage unstructured data on to a server. Unstructured data is data which does not follow the rigid structure found in a database such as documents, images, files and directories. The aforementioned system should also provide the user with the ability to download the files when needed.




As already mentioned before the components needed for such a system to work are;
  • Web Server: The web server will host the files making up the system as well as host the files uploaded and managed by the user.
  • Server-side scripting: The scripting language is a liaison between the web server and the user. The scripting language is what provides the user with the needed functionality to manage his/her web space.
  • Database-server: The database server stores the different users making use of the system. This will allow for customisation such as disk space allowed, the location of the user root location.
Throughout the remaining sections of the blog for each of the components explained above XAMP will be used which includes Apache as a web server, PHP as a scripting language and MySQL as a database server.




Task Summary



In this section we will go through the requirements of the web space management system.

  • The system should be suitable to handle content of various types.
  • Allow the user to add and organise files to a personal web area which is secured by password.
  • Application should be accessible over the Internet.
  • User names and password should be stored in a MySQL database.
  • Once the web space is accessed the user should be able to;
    • Make and delete directories.
    • Delete files.
    • Upload new files.
    • Users should only access their web space and have limit imposed upon it.
  • Consider security implication with regards to user names and passwords.


The tasks mentioned above will be distributed in this blog entry each in its appropriate section. This document will be divided into various sections. In the first section we will analyse the requirements and design the database in which user details will be stored as well as map the folder structure to be allocated with each user. The second section will focus on the functionality related to the system such as authentication, web space management and file uploading. As well as the user interface that will integrate the previous sections into one final perspective of the system.



Database Design




Let’s start by identifying the entities which are required by the system. We know that we have the user which will make use of the system and with each user a root folder is linked which will be made available to that user. Each user will be categorised into a usergroup. So in all we have three entities; the users, usergroups and the userfolders. The relationship between the users and the usergroups is a 1:1 relationship since we are only allowing the user to have one root folder in this system. We will still allow the possibility for multiple folders by setting a surrogate primary key in the userfolders relation. The relationship between the users and the usergroups relation is a N:1 since a user group can contain multiple users.


The users entity requires the following fields;


Field NameData Type
UserID – PKInt
UserNameVarchar
FirstNameVarchar
SurnameVarchar
EmailVarchar
PasswordVarchar
UserGroupFK – FKInt
LastLoggedInDatetime



The userfolders entity requires the following fields;


Field NameData Type
UserFolderID – PKInt
FolderNameVarchar
PathVarchar
UserFK – FKInt
FolderMaxSizeDecimal
FolderCurrSizeDecimal

FolderName will hold the name given to the root folder linked to the user referenced by UserFK. Path holds the relative path of the folder from the document root directory. FolderMaxSize will hold the maximum space allocated to the user in Bytes. The FolderCurrSize field will hold the current space taken by the user.


The usergroups entity requires the following fields;


Field NameData Type
UserGroupIDInt
UserGroupNameVarchar
IsAdminBoolean


The IsAdmin field will determine whether the user can administer the system.

This table lists the relationships between the entities;


Entity NameRelates To
usersN:1 to usergroups
userfolders1:1 to users
Usergroups1:N to users


The following diagram depicts the ERD for the relations used in the web space management system.



Now that we have a logical view of the database needed by the system the next step is to create the physical database using DDL queries. Throughout this project I used SQLYog to manage my database. First I created the database and the table mentioned in the tables above then I created a schema using the schema designer to enfore integrity constraints within the database.



User Folder Structure



Each of the users present in the users table has a root folder. Inside the document root folder a folder named WebSpace was created at the following path;


<document root> / GregDevPortal/ WebSpaceMngmntSys /



Within this folder a folder for each user was created. The folder name given to each user folder is the user name.





Web Application Design and Development



The main idea behind this design is to create a system which is easy to maintain and debug while developing. The image below shows the different pages making up the application as well as the communication between each page. Also the channel between the application and the database as well as the file system is shown.


Includes



Various includes were set as to eliminate most of the code from the UI pages in the application. On each page a footer.php was included to depict the footer. Two other pages were set as includes in most of the pages which are function.php which contain most of the database and generic functions as well as a uiFuncs.php which contain functions pertaining the user pages. The function.php includes the db.php file which is a class that handles the connection with the database.Each of the pages mentioned were included using the include() command.



Database Connection



Most of the functions making use of the database needed to have an open connection to the database. Instead of calling the mysql_connect and mysql_select_db functions each time, a class named db.php was created which includes a static property called $con. This property represents the connection to the database in the functions which instantiate the class. Two methods were created within this class one to connect to the database and the other to disconnect.




The class is instantiated by calling the php file and making use of the new keyword. Each of the functions is then references using the -> syntax.





Portal



The index page (index.php) is the landing page which is a small portal which shows the user the options available which are to either log into the admin or web space section of the application. Each hyperlink in each of the panels links to a login screen. The distinction between each login type is passed as an arguments within the URL.



From every other page in the system a hyperlink is shown on the header which allows the user to go back to the portal at any time.



Login Screen



The login panel when logged into can be of two types; admin or web space. An admin login type allows an administrator to log into the admin_home.php page while the web space login allows the user to log into the ws_home.php. Each types of logins is shown on the header of the login panel.




On submitting the user name and password the page redirects the user to the code behind of that page. At this point the ws_homecb.php does the following;

  • Validates the user according to the login type
  • If valid connects to the database
  • Loads user and user folder details
  • Set the loaded values into sessions
  • Determined by the login type the user is redirected to the web space or the admin page


The inputted values are screened using a cleaning function to make sure that no malicious code is entered to break the SQL statement.




If the user is validated the data loaded is filled into sessions. The function taking care of assigning sessions is called loadSessions. This function iterates through each of the column generated by the database and for each column that value is assigned to that session variable. Another feature which was already discussed in previous posts is “remember me” checkbox. When checked the user can log in the system without logging in.



Header



Each page within this system displays a header which shows information according to one of two states; logged in or logged out. When logged out the header tells the user that he/she is not currently logged in the system. When logged in user details are displayed as well as the date and time the user logged in. This information is accompanied with a hyperlink which links to the portal and a link which enables the user to change the color scheme of the application.





This last login date is obtained by calling an UPDATE query on the users table and update the LastLoggedIn field with the current date and time every time the user is authenticated within the system.



User Preferences



As already explained each of the pages has a header which provides the user with information. Along with the information a link is available which allows the user to change the color scheme for some of the panels in the screen. By clicking on the link the user is redirected to another page changescheme.php.



A drop down is made available with color choices which when selected and submitted the page posts on to itself and sets a cookie variable with the appropriate css file. The cookie variable set is $_COOKE[“Scheme”]. The expiry on the cookie is that of one week.





Web Space Screen



The web space screen provides the user with required web space management functionality. In this sub section the various features provided are described in some detail. The web space page is divided into four distinct panels;
  • Web Space Status
  • Notifications
  • File Upload
  • Storage Browser


Web Space Status



The web space status shows the user three types of information; the maximum space limit available, the free/used storage space and the maximum upload file size. The maximum space limit is read from the userfolders table when the user is validated and loaded. The used space is read from the userfolders table but also quantified in the case the folders were tampered with physically. This is achieved by creating a recursive function that iterates through each file in the user’s folder by using the filesize function. The result is shown in two formats; numeric and visual. The numeric format shows the remaining free space by subtracting the maximum space by the remaining space. Since the size obtained from the filesize function is in bytes another function was created to convert the results to KB.





The visual format shows the used storage space by utilising a custom built function that returns the used space in pixels. The result is plugged into the style attribute of the html element making up the progress bar.




The results are shown in the form of a progress bar.




The upload file size limit is read from the php.ini configuration file. This is achieved by using ini_get('upload_max_filesize') function.



File Upload



The file upload function makes use of the html input element of attribute type file. This element opens a dialogue box into the client’s file system. On accepting the selected file the file path of the file is displayed in the file upload section.




The upload button submits the ws_home.php page using a POST method to the ws_homecb.php page. This code behind page contains most of the intermediate logic between the ui page and the functions.php page. The correct action is determined by checking the $_POST[“btnUpload”] variable. This variable is filled with the value of the button which was clicked. If so the upload function is triggered. The upload function holds a number of validating condition each of which will be described.The first check within this function is made to the file type of the uploaded file. A blacklist array is created with a number of file types that are excluded from being uploaded such as php files. Such files can be have disastrous effects since anyone can upload his/her custom php files which can access the files on the server among other things.




If the file uploaded passes through the file size is checked against the upload file limit read from php.ini. Since the value read from the configuration file is in MB format a function was created to convert the MB to bytes.The file size is also checked against the available free space for the logged user. If any of the mentioned checks fail an error message is displayed in the notification area.




The next condition checks whether the file already exists by using the file_exists() function. If a file with the same name is already available a message is passes as an argument to the page to either confirm update or cancel. We will go into the notification area later.




If confirmed the file is replaced with the uploaded version of the file.



Storage Browser



The storage browser is where uploaded files are managed. This area allows the user to view and navigate through folders and files, create folders, delete multiple files or folders, allow for download of files and renaming of files.

The files and folders are listed in an html table. On loading of this page the session variable holding the current user path is passed as an argument into a function which loads the files and folders. The custom built function uses opendir  to open the directory and iterates through each file using the readdir function. The functions returns an array with some information about the file or folder such as ;

  • File Name
  • File Type: directory or file
  • File path
  • File Modification Date
  • File Size
  • File Mime Type by using the filetype function



Along with the information about each file a navigation bar was created to facilitate moving through the user folder. The was achieved by using anchor tags for each nested folder the user clicks on. A custom build function was placed in uiFuncs.php so to remove most of the logic from the page.





When the new folder icon is triggered the form is submitted to the code behind and the user is asked to enter a folder name. If the user does not enter a value an error message is sent to the notification area. If the process is valid at this point a new directory is created by utilising the function mkdir() which takes the name entered by the user append it to the current user path which is stored in the session variable $_SESSION[“CurrUserPath”].





The multi file delete allows the user to delete multiple files or folders simultaneously. This is achieved by assigning chkFileDir[] to each of the checkboxes. The function also checks that at least one checkbox has been selected by iterating through the $_POST[“chkFileDir”] variable. Each of the check box selected has the path of the file or folder as a value. On deletion each of these paths are passed as an arguments to a custom built recursive function delete_dirfiles which makes use of the php function rmdir() to delete directories and unlink() to delete files. If the function is successful a success message is passes to the web space page.





The download button is placed in a cell within each of the rows containing a file. Files are differentiated from folders by using the property filetype when we first loaded the files from the user root directory. The download function in the code behind of the page was achieved by calling the readfile() function accompanied with header('Content-disposition: attachment; filename='.$filename). This creates a forced download which opens a dialogue window on the user’s screen which allows the user to choose a folder in which to save the file.



The last feature available in the storage browser is the rename function. This functions uses the php function rename() to rename a file. The button next to each file or folder triggers a custom built function which asks the user for the new file name. In the text field the current file or folder name is shown.





When the user clicks on OK the file/folder is renamed and a success message is passed to the page.



Notifications



Throughout previous sections different messages were passed to the user. Most of the messages shown can be categorised as;

  • Successful Message
  • Question Message
  • Error Message


The success message is displayed after a successful action has been applied such as the creation of a folder or the upload of a file. When the action is successful the header(“Location:<URL>”) calls the page and passes a SuccessMsg parameter along with the message that is to be displayed.






The error message is returned whenever an error occurs within a function. An ErrorMsg parameter is passed along with the error message thrown.

The question message is a little more elaborate since we are waiting for the user to trigger an event of some sort. To achieve this I created a three functions in the uiFuncs.php which do the following;








The dialogueBox shows the user the message and two buttons each with name passes in the $dialogueId variable. Each of the buttons take the value passes in $yes and $no respectively.
The inputField function shows the message a text box and two buttons. This functions is used when a textual input is required from the user. The third function is the same as the inputField function with a distinct difference that a value is passes into the text box shown to the user. The result from passing these parameters to the respective page is to display an icon according to the type of message along with the generated html elements.





Admin Page



The admin page allows the administrator to change the maximum limit on user folders. This is achieved since we established a usergroups  table which specified whether the user is an administrator. The page hosting the functionality is admin_home.php and the code behind page is admin_homecb.php.






The functionality for this screen is achieved by using the [] syntax next to the text box name. On post back the code behind iterates through the $POST[“txtFolderMaxSize”] variable and updates the table userfolders.




Conclusion



I had a great experience developing this software apart from the fact that I learned a lot the was really amazed at the amount of resources out there on the web with regards to PHP. I fully intend to continue using PHP on personal projects. Doing this project exposed me to a number of new tools such as Notepad ++ and SQLYog.