FINAL BLOG

The following outlines what I have learned from Intro. to Software Development.

Before I start, just want to specify that learning about web design and implementing multiple technologies has been a wonderful experience. I would keep doing this in the near future since it’s not only learning experience but letting the ‘World Wide Web’ see what I have to offer.

So the semester started out with making a plan for a website of our choice. I was wondering about this since I have never done close to a full-fledged site (at least from my perspective). I really liked the idea when Dr. Brown told us to do something we liked and something that we could work on for the whole semester. I knew from the beginning I was going to do a Astronomy website but what I didn’t clarify was if it would be General Astronomy or specific area of Astronomy. I never think about in this manner since I follow everything there is out there about Astronomy. But this became confusing just for the general user what the website is actually representing.

Afterwards, I ended up implementing field of Exoplanets as theme for my Astronomy site.

I started out with general plain design with introduction text on what the site is. Later on, I added a solar system page with some navigation links about planets in our solar system if the user desired to gather more information. During this time, I had implemented “Responsive Bootstrap CSS” in order to make it mobile friendly. Bootstrap css has lot of features to offer including making the whole layout responsive for different screen sizes. There is also another css library, Foundation, that offers more or less similar features but I decided to follow Bootstrap version since I had understood its functionality and had already started implementing it.

In order to implement the functionality of Bootstrap library, I looked at many tutorial on how it was implemented. The getbootstrap website, where the library was downloaded from, also offers the whole documentation on how each function or class is implemented and what it would look like. Taking all this in wasn’t issue since I had taken a web design class before and had basic knowledge on setting up website with HTML and CSS.

As the semester went, there were weekly updates for each type of technology implemented. After setting up site with Bootstrap CSS, I implemented JavaScript, php, AJAX, MySql, HTML 5, CSS3 and jQuery.

So as the order goes, I used JavaScript to implement trivia section on my website. Each question on the page has multiple answers and when user clicked one of them that would get recorded with js click function. This way I was able to count the correct and incorrect answers. I also implemented alert function to let user know a little summary about the answer. This was really good way to learn JavaScript on being able to catch a click, do pop up alert, and change the text of given element id. I had also implemented cookie option for the trivia in case if user tried more than 3 or 4 times, a message would show up indicating ‘taking a little break and try again later.’ This is all basic compared to some sites that really use javascript and DOM objects to implement the full power of it. As the time passed, I headed to jQuery in implementing trivia. What amazing thing about jQuery is it makes overall process efficient and the code itself becomes a lot more concise. jQuery is able to perform many animation, do ajax requests, and other things that javascript can do but with lot more concise code. Learning jQuery took a little getting used to but it became easier later on. As the final version of my trivia page, I ended up implementing php, ajax, and MySql for the whole process. This was done with the notion that now I have questions in a database that feeds the requests done through jQuery ajax call and presents questions and then answers. After answering questions, the result page calculates and lets user know of their achievement. I am really proud of this method since the code now for calculating and presenting question and answer is lot more concise then was with jQuery.

Next is the Parallax page. The parallax technique again is implemented using jQuery. There are functions like background offset, scroll speed, x offset, y offset, and many other depending on which publicly available library is being used. With the intention of showing information regarding ExoPlanets, I was able to bring stunning visualization of top 10 Exoplanets to general terms for users that would make it engaging. By implementing above mentioned functions, I was able to control the background and foreground of “page” in that section and implement different speeds for visual and text. This created illusion of depth and a bit of mesmerizing effect of visuals. As per my knowledge so far, I haven’t come across an Astronomy site that has implemented Parallax effect in order to make corresponding content more engaging for the user but instead have favored animations. To me this is pinnacle of the site which combines stunning visuals and information in one place. My goal for the future includes making infographics combined with parallax effects.

Next is the presentation of actual data about Exoplanets. The intention of this page is to provide relevant data to user to make sense out of what all the numbers mean. If the user had already visited the parallax page which gives information on top ten exoplanets then understanding data on this page would further enhance their knowledge. In order to show the data gathered so far, I headed to NASA’s Exoplanets archive page which keeps up to date information on stars and their planets along with whole bunch of data on their temperature, mass, size, how far they are, discovery year and many more. I gathered this information and set it up in my database. I did this in order to show specific result on this search exoplanets page. So when the user visits the page, they can either select abstractly named star or select parameters on orbital period, mass, and distance to see what planet candidates are out there and what are they like. It shows their mass and orbital period which gives rough idea on what these worlds are like. I also created a chart visualization that shows the corresponding data in scatter chart format. This was done because I needed to learn how a chart is implemented on webpage. This was not part of study materials for this course but would be good to know. The chart is implemented through Google chart API and have many tutorials on how to retrieve data from database and present the information. This was a very good learning experience since many businesses or organization like to present information through charts.

All of the above mention what was done to the site as a whole and after ‘second exam’, Dr. Brown and I agreed on making a log-in page and modify trivia questions and answers. This was in response to learning how to make a log in page using php session variables and making life little bit easier by being able to add, delete, and update questions/answers for the trivia page. This was really a good learning experience. I now am able to gather what actually happens when a user logs in to their personal email or some other site for shopping etc. Although complexity of those sites is much more compared to what I have implemented but idea behind it is still the same which makes less of a hassle to comprehend. Through log in, I perform encryption function that php has to offer called md5. This converts the entered username/password and compares it with the one in database. If it’s a match then head the user to modify trivia page otherwise show a message indication wrong username or password. I have even tried technique of applying special characters and other hacks to see if it crashes or lets the user log in by default. I didn’t see anything like that happening other than the fact a pop up showing wrong username or password. At least that is a good feeling so far.

After logging to modify page, the user is able to add, delete, and update questions/answers. For this to work, I had to create a questions table with an index as a primary key. This would let me modify any value using index column as reference rather than referring to other values in other columns which is not a good practice in database/programming. I have the index column set as primary key and auto incremented for each value being added. This for some reason didn’t work as it was supposed to. What my final solution came out was to count the number of rows in the table and then add one to it as a pre-increment. This let me add questions sequentially in the table. I had to perform two separate queries to execute this operation. Another hurdle I had to clear after this was updating a question and answers. The idea seems general but I couldn’t get the overall process to understand what index row to change it to. What I came up with was selecting the desired question that needs updating and then pulling not only questions and answers but also index number for that row. So that once update is submitted, the query would be fed the index number and would update the corresponding row. This really made life easier.

This is the overall picture of my website. My future plans include making a web server with Raspberry pi using Linux Debian and would be a good excuse to learn web server maintenance. At the moment, I have acquired a web server and domain name, the link to the site is extrasolarplanets.info. For now, I have a simple page and will be adding more pages later on.

Making a website about what I like and presenting it through multiple technologies does give me confidence as a web developer on what to expect when handling project big or small. I can now comprehend what web design entails more than ever before. It has given me enough confidence get my own web server and start rendering the site for the whole world to see. Learning all the technologies so far has given me an avenue where I can present my passion and hopefully inspire someone else to do the same. I also like to thank Dr. Brown for letting us choose our own topic and making it a reality.

Chart update for my website

As I’ve made a choice before to include a chart for visualization purposes, I can now finally say that I am done with its implementation.

I’ve tried to let fellow classmates know about the situation I had previously and why I couldn’t implement the chart to begin with. I had found a source where it tells you how you go about doing this but there was no place(at that time) where I found suggestion on how to post the data on the same page using php. What I mean by this is the code that is implementing query and chart through JavaScript is in the same page. I tried doing an AJAX call that would just bring the whole result back like I am doing with table format data, but that task didn’t result in success. So I was back again trying to find the solution for ‘on how to post the the data on the same page’.

The overall idea of this sounded general because you are just posting the values to same page and all you have to do is have a receiving post somewhere in php code that would set it equal to variables. But there is a difference when there is a single php code in html file and when there is multiple php code in html file. If I had a format where there was single php code then there wouldn’t be issue of posting the values. This was not the case with html file I had. There were multiple php code executing different processes. A suggestion I found finally was to have an “isset” through a submit button that would post the values. This is kind of like setting up session variables for log in or other reasons. Once that was done, it sets a force to post the values and these are the values that would go to query and and update result array and then in turn change the chart.

Overall, what I had planned out is working and can be Implemented for other parameters.

By the way, one last thing I want to mention is the chart is from google charts.

Log in, database, and app demonstration

Last time, I presented my plans on what to do. This time around I have gotten to making log in page and database for questions where I can add, delete and modify a previously written question. This has really given me the flexibility of adding questions directly to database or changing them.

So after logging in through administrator page, there are three options: update, add, and delete a question. They have made use of jquery effects of sliding panels to only show the necessary part when selected. To begin with, adding a question and deleting a question part took some time but updating a question was a different story. Update in SQL requires an identifier for WHERE clause which when described points to the value that needs to be updated. This issue required having an index from the beginning in the questions table. This is needed because I just cannot make a reference to question or it’s options to make changes. Not only it’s a bad practice but I cannot even change the questions and their answers if I needed to. After this was worked out, I had to create an jquery AJAX request that would fetch all the values meaning, the questions, it’s answers, and summary for the correct answer. The way this works is by selecting the questions that needs the updating and then post value triggers AJAX which in turn gets question, answers, and summary. The part itself seemed pretty easy until I got to where the value of question, answers, and summary would automatically fill up in the input text area. To be fair, this took a long time to figure out how to do that until I hit upon a response on Google search that by putting value in the input tag equals to the retrieved value from database which will fill up the input text. This really took a load off otherwise I would have had to manually copy paste question and answers – it would have been horrible.
Dr. Brown told me I could look at his questions page from Git Hub on how he went about doing this but I needed the actual experience that would make me learn and think. I did look at it later on but was satisfied with what I was going with. It still has lot more room for improvement though.

Another thing I also ended up trying was making mobile app through eclipse web view API and phonegap builder. The webview part was okay and it gives the appearance of an app instead of actual app. By the way, I ended up doing mobile app for android platform only. The phonegap experience was kind of fun to play with until I got to the part where the service itself was asking for index.html page. This page along with other necessary files would be part of the app but index.html would be, in a sense, a starting page. So what I ended up doing was uploading main index page, the one I use to post the assignment links on weekly basis. From this page when you run the app, click on any link and it would show the webpage. The internet had to be turned on though for this to work. The design of webpages so far has been responsive so it’s not a issue what size the screen of mobile device is. As I go further with this some other time, I need to add an error message where if the server is down php page will not show up. It would be nice to have this feature.

Overall, the experience has been amazing and can’t wait to finalize for the upcoming presentation.

After exam 2

This is the update after the second exam. This blog outlines what I will be doing for the rest of the time before semester ends. Following is what Dr. Brown and I have agreed on:

  • Create a database for trivia page.
  • To make life easier-create an admin login that would let me add, modify, and delete questions with ease
  • This one is still carrying from previous effort – to create scatter chart display of data instead of table format

Other thing may also include-a picture of our milky way galaxy. This picture would show all the planets found so far in whichever system with some highlight and when user clicks on it, more information is displayed.

But my efforts will be-to have a trivia database and modification of questions in the database up and running, so that I would have demonstrated basic skills for handling data in database.

Time for some jQuery

The week before exam 2 has covered jquery. Took the quiz and made 20.

This week required for us to make special jquery page that would demonstrate the technique for using it. What I ended up doing was making a table in my database and making a php page that would process the query from the main page that is making the request. The main page used the jquery script to get values from selection and pass it to .ajax method to send it to php page for processing. It took a while to figure out how the value is sent and received in html format to display information in proper format. The useful thing about jquery is that name of element or id is really easy to pick and display proper result as per your need. JavaScript does this but syntax is long and tedious to remember and mistakes are easy to make. Jquery feels like short version of everything. I have also changed my trivia page use of javascript to jquery for evaluating answers.

Here’s the link to my jquery exercise

Now, the overall update for site:
The intention was vague in the beginning but is more apparent now. I started out with Astronomy in general and narrowed down my topic to exoplanets theme. Exoplanets are planets found around other stars and so far 1000 have been confirmed. The goal of the site is to present necessary information regarding the subject and demonstrate the necessary technologies along the way for presentation. What this has done is bring interactiveness of the site to whole new level. There are many sites about astronomy but not that many that have interaction. For this time, I have redone the homepage and solar system page. Made it more concise for users and it gets to the point quickly. The majority of last couple of weeks have been including AJAX call and parallax page completion. That is what the goals were stated as after first exam. I am glad I am able to deliver it. So now what the “search exoplanets” page does is retrieve information from database and present in decent table format in html on client side. As user goes through each selection and understands the data displayed back, they realize the extremities of these strange worlds. I guess we can all appreciate the fact that our year doesn’t end in one day and temperature doesn’t linger around couple of hundreds of degrees Fahrenheit. In this same page, the search parameters section allows the user to select range for orbital period, mass for the planet , and distance from the earth. This gives an idea on what planets are nearby and what are there conditions. Now, the parallax page consists of full top 10 exoplanet fun facts with the help of some illusory effect on scrolling. What this has done for user is to engage them more with the content and get the full sense of what to actually expect in realizing the condition these planets go through. With help of JavaScript function for different scroll speed for different objects, offsetting image background, inserting JavaScript animation, and overall combined experience makes the content more engaging for user to grasp terms visually that are otherwise difficult to imagine. Since the parallax techniques are specific, they work well on laptops and desktops compared to mobile devices. So with that understanding in mind, I only made this one page for parallax technique. There are some libraries out there that make these parallax technique work on mobile devices but will be dabbling on those as time suffices.

It has been a wonderful experience so far and there is lot more potential out there for deploying multiple technologies to make content more engaging for user.

Another update

This week was supposed to be HTML5 and CSS3 but focus is still lingering on MySQL and php working. It is understandable that this features need to work since they will be bringing actual functionality to the site. If need to look again for my site, I have SQL query and php setup so that user can select star or select parameters such as number of days for orbital period or selecting mass or distance and table is displayed. I was also going for using google charts where user would select such parameters and a scatter plot would show up. This would make comparison between selected parameters like it does on given table on search database page. The problem so far I am having is the query is selecting the right parameters but before feeding data to google charts, they have to be converted to array for it to understand. I haven’t been able to work out solution yet but there was an instance where it was displaying all the data for selected parameters on charts and it would be way too confusing for general user to make sense out of it. I don’t even want to show all the data, only selected parameters data that is relevant. If I have it working, I’ll post an update. Look again on previous blog for database design and execution.

I also did redesign of homepage and solar system page. In this I ended up putting pictures and videos, instead of more text that was there from the beginning. This is due to comments from the feedback and thought it was little too much put the user through such amounts of reading. Since it was only three planet system presented in parallax, I will be adding more. All of these and other features have more or less comprised the use HTML5 and CSS3 tags and attributes to bring out the design aspects of the site. So it is safe to say that the features are being used instead of making a special effort to include it.

Along with these, there were optional requirements for installing apache, php and MySQL in order to perform website design if there is no online server to host the site for. It also gives feedback on errors and other things that makes it easier to troubleshoot the problem.
I did install it sometime ago to see how it works. I actually installed XAMP instead of WAMP. There is not much difference but XAMP has more features for perl, python and ruby. But I had some misunderstanding following the instructions and couldn’t get php to work. MySQL works and I can make and use database tables. I didn’t really worry about it at this point since ps11 server provides the functionality for these features and I am more focused on making my pages work and not get side tracked. I will have to look this up eventually since ps11 won’t be keeping the website up in the server.

Another thing was regarding version control using Git. Version control is really important and I learned its value from java II class where my simulation were updated and needed to keep track of changes. I didn’t use git at that time but a new copy was created in order to implement new features. I have been doing the same thing so far with my website pages and dividing them in weekly updates as to keeping track of what I did. The sections I went through for using git made sense in which you are creating a directory where your projects and files will be saved. There are features for modify and commit where modifying a file doesn’t necessarily updates to new version unless a commit is implemented. The overall outlook is nice to look at for git and is neat. I haven’t installed it as of this moment but may consider it afterwards. This will be really beneficial since I am wondering on buying an address and have an actual site up and running. I have done website for astronomy before but they were really basic and didn’t need any special version control. The kind of thinking I am going with is that I have gotten this far and I really need to implement a site like I am working on right now. It will be nice to see some response on that since there isn’t a site at the moment that features data in the manner I am trying to implement.

Before I forget, HTML 5 quiz score is 20 after about 3 attempts.

update:10-28-13

As of this moment, I have been able to figure out how to work out Apache/php/mysql. This is relief as to not worry about if I don’t have ps11 server available at hand. Looking up google searches and reading documentation on XAMPP solved the issue why was it not displaying site properly. I didn’t realize but I was saving files in wrong folder. I also like the fact apache points out the mistakes taking place making it easier to correct.

MySql along with php

This week we covered MySql area. This goes hand in hand with what we did php and couldn’t be a better time to make use of it. As stated previously, my plan was to include “search exoplanets” section in my website where a user can browse the star system and look up their information and make a comparison.

The way we are going with this, I decided to went ahead and make use of AJAX as well in the search exoplanets section. The reason for doing this was to when a user selects the star system and then display information for it right on the page itself wouldn’t just be done with php and sql queries. I also needed to send the input data out and make connection to database where the information table resides and then make use of php to display and send the results back using xhttprequest. There is nice tutorial for this on w3schools about this in php & AJAX section. It really helped. So as you’ll see once the user selects the star system, information about the name of planets in the system, their mass compared to Earth, and orbital period in days compared to Earth. What this does is, it gives user a glimpse into what the system is like and gives an insight into how different it is from our solar system.

For now the way I am able to tease the data out, it shows abstract designated name for star names and planets. There are nicknames available but not for all and the source I am pulling the data from doesn’t provide this information. So the user can just do random selection and view information on the system. I was going to at first make queries that would directly access their database to display result but it turned to be scientifically formatted that would dissuade general user. So I ended up downloading the essential data in a csv file format. I then made a exoplanetdb table in the ps11 server. The data includes many other properties then the one mentioned, but I don’t want to overwhelm subject I have at the moment and will add as necessary in the future. The page itself makes connection to php file that connects to database first and then starts the query to make request and then display the result.

php and little more

The week after the exam week..it was a nice week except that one gloomy day…

anyways..let’s talk about php for this week ..php stands for hypertext preprocessor, a server side scripting language for creating and deploying dynamic webpages. After going through tutorial and taking quiz (about 3 or 4 attempts) made 20/20. Some questions missed I couldn’t remember reading about. But overall, it was nice tutorial to get started on what php can do. I really liked the secure email example, and making cookie. But what really captured my attention was the php and MySql. Where I am making a query and result is displayed right there in the page. Beautiful stuff! For now, I have added a email page that would let you write message and adjusts its size according to screen resolution since it’s bootstrap compliance standard. I am also thinking about adding php to trivia page so that answers become discrete as to people who know how don’t see it. I like that a lot since it doesn’t feature actual php code and makes it really secure in that sense.

So that’s php.

Now onto the ‘little more’ part: As Dr. Brown has mentioned he wants to see a little more effort on what direction the site is taking on now, what do we expect for the next exam, and summary of peer reviews.

For the part of peer reviews, the feedback what was I expecting in a way. So from what I gather, I need to :

  • Add false option for Trivia page
  • Clarify the objective, the actual theme for the site.
  • Make navigation clear so that it makes sense
  • Make a navigation for the site in general to direct user from one to next page
  • Style the information; make it more attractive, appealing, and interactive
  • This was the kind of feedback I was looking for since when I started I didn’t make it obvious as to what it was. I am pretty sure making the theme itself clear will make user engage more and get the overall comprehension as to what the site is offering. Since I am going with the exoplanets theme, I will be changing the site and its content to exoplanets and that way it is not just Astronomy in general, it is exoplanets in specific.

    Second thing is specifying what the each page does and their summary:

  • So the Homepage, is where I am able to present what the site is about and display content to give user an idea of what it is. This page gives background on Astronomy in general and their aspects as used by different cultures and then the main idea itself. I need to do some effects and presentation on this to make it more appealing.
  • The second page is the one about solar system where I present the details how it came to be through its evolution and until now. The page also presents a sliding image show where when you click on the object, it takes you to corresponding page for more information if the user is interested. The intention of the page is to give background on our solar system so that when I present details on the “Top 10 Exoplanets” page there is a way to compare. It doesn’t become totally different subject but an extension of understanding the material itself.
  • The third page is the trivia page. This page was created with the intention of assessing the user’s knowledge of Astronomy itself. Not to discourage or anything like that but I assume that after going through some material on the site itself, there would be enough confidence on taking such a challenge. There is no timing or anything like that so the user can also google stuff and find relevant answer. This, in turn, gives them an idea on where things stand.
  • The fourth page is the search exoplanets. This was created with the intention after gathering some material, there would be enough interest on what type of exoplanets are out there. What is there mass, size, and other conditions. This in turn can be compared with planets in our solar system to make sense out of this data. Initial intention was to create dynamic chart like option where it plots out data and comparison is made. The work will take more effort then I thought, so will try to add that on by next exam or at least for the final. There are other sites out there give this information but it’s left to the user to do the extra work. My intention is to give comparison here so that they don’t have look for more.
  • The page that got me really good reviews is the Top 10 Exoplanets. It was amazing to see such a response since when presenting in the class, the projector couldn’t account for the smoothness of page. But this page is using the idea of parallax for creating illusory appearance of text and pictures showing different rates of scrolling. It is really neat idea. This page was also created with the intent that if user has read other material then they can compare with facts and information given in this. This is informative and engaging at the same time.
  • The other pages in site are About and Contact. Not much other than summary about the site and intention on the project. I will, if necessary, create more pages if I feel like some group of content has more to offer for enhancing the overall site. But as far as the site goes, I am sticking to what I have and enhancing it overall to make user experience engaging.
  • One other thing is an update regarding what the next release would be for exam 2:

  • Add more info for top 10 exoplanets
  • have data showing up for search exoplanets page using php and mysql
  • This is the overall picture as I see for now and if anything changes, it will be noted in upcoming updates.

    exam week

    A summary about my site: My intention is to provide information on Astronomy and related aspects of it. Also, build necessary tools along the way that will enhance the subject matter. I have focused my attention on exoplanets which are planets found in other star systems. This field is developing and thriving as you read this and I couldn’t think of other material that would bring more excitement than this. For the following weeks, I will try to update parallax scrolling page for illusion of depth and animation. Will also try to develop where data from remote servers can be queried and presented in graph form to get visualization of comparison of planets from our solar system to other solar system. Please look at Top 10 Exoplanets and Search exoplanets section from homepage to get an idea.

    Just to sum it all up,

    • I started out with a basic plain page and description on my intent for the website.
    • The second week involved adding HTML and css tags.
    • Later in the week, with the introduction of bootstrap feature another look of site was done.
    • This involved learning their class about navigation, container, and collapse class that change the layout as the resolution of screen goes down. This is neat for the tablet and mobile devices.
    • More was added later on to the site which included collapsible navigation bar and having it stay fixed there as the page is scrolled.
    • During the two weeks of Javascript, a trivia page was added. This included some questions and clicking on the right answer popped up a message with indication and a little summary.
    • Afterwards, more questions and cookie was added to the trivia page so that a user tries multiple times an alert pops up telling ‘too many attempts.’
    • Another area, I also covered on was doing parallax scrolling page for a future page “top 10 exoplanets” and the link is in homepage navbar. This involves scrolling different images at different rate to give illusion of depth and style.
    • Another page is also in the works, it is ‘search exoplanets’. What I have planned out for this page is gathering data based on selected criteria and presenting in chart visualization using meteorcharts.js, three.js, and kinetic.js. There are more libraries out there that I plan to expand on to deliver what I had intended.

    JavaScript continued

    The second week with JS involved learning about DOM and Objects. They can really extend the ability of what JS can do given the application posted on a webpage.

    For my part,

    • I added more questions to ‘Trivia.’
    • Added cookie option in ‘Trivia’ so that if user tries multiple times, an alert pop-up indicating too many attempts.
    • This cookie option was done using what Dr. Brown had posted on D2L, and changed to what I had intended.
    • For the preparation of the exam next week, have added a visualization on charting a dataset using AJAX/SQL technologies for future work.
    • Also added,”Top 10 Exoplanets” section, which uses parallax scrolling technique to demonstrate different level of scrolling for different objects in the webpage. Go to the homepage and click on more link to find out.
    • The top 10 section also demonstrates a kinetic javascript library animation of planets circling their host star. This is part of HTML 5 Canvas.

    I tried to think more as to what I can add more for javascript part but nothing came up that would really boost up user experience. But I’ll still be looking at javascript if I find suitable features that I might want to add unless jQuery satisfies the requirements.