Crit 3 – Working Progress 2 – Design & Content
9 MayAfter Critique 3 presentation, Sir advice me to change something for my design and also the content’s colour.
So I working on the design and also include new content in it.
Here’s the final outcome, satisfied.
Home page
*Adding Donate button in About page, Haha. Who knows I can really earn a few bucks to at least sustain my blog hosting? :p
About Page
All the text change from light dark colour to pure white, and font change to Verdana.
Info Page
Share Your Green
Crit 3 – Working Progress Database Update + Photo Upload
8 MayInclude real adding photo function to my maps.
This is very hard for me…as well. So I keep on consulting lecturers, my friends and google for it. Without them, I don’t think I can made it on time.
First is of course to create a form which allow people to submit the image files of theirs.
Second is database to save the file, I create a folder call “upload” in the database, in which I use php to direct and save the image files in that folder, and name it follow with the title of the submission.
*I want to make it save as number+1, but fail, so I keep it as title first.
After consulting Mr Hafiz, my lecturer, creating a new row in the table to save the image name.
So that afterward it can be call out, based on the name of the image file.
The finalize table is this:
*I’ve studied and research for many days on how to do it, but without a proper guidance, I fail to make it, end up still need to consult my lecturer and solve this prob. Especially on saving the images and presenting the images on the markers.
After the success on presenting the images on the map, lecturers advice me to add a column of submission for people to write in their name.
So here it is:
Adding a new bar for people to insert name is much easier, as I’ve achieve success on the previous data key in like Title & message thanks to google tutorial, so I just somehow copy paste and edit some code in it to make name submission work.
Now this look much better.
Here’s the example of how markers show up on my map:
Been working up on my database recently and touch up all the details from google maps tutorial to my own Green Unity Map.
Here’s the final table I edit and create in phpMyAdmin after adding slot for images where I need it to call out the images I receive from people and present it out.
these data are real data as my friends are supporting and submitting their plants/flowers on my map. 🙂
Crit 3 – Poster
26 AprThis is my poster design.
My basic idea is using the markers to form a tree, in which each marker means a person planting a tree/flower, so when it accumulate, the power grows up and only then it will able to help and change the world.
Green Unity = When everyone unite together and planting trees, only then the main or the mother of natural can survive and continue to be a beautiful land on Earth.
Together everyone help protect the Earth.
Background as the maps, as in my website http://www.greenunitymap based on: Google Maps.
Poster A2
Critique 2 – Working Progress 6 – Receive Information and Transfer Information
20 AprThis is one of the hardest steps I encounter in this FYP project on Google Maps API. Anyway, I’ve learn so many things in order to accomplish this project, which most of it I never touch it before. From html(only know some basic), java, css, php, mysql, xml, Google Maps API….many many.
It’s not easy, but at least I breakthrough each problem, one by one.
In this process, I consult many people, join Google Maps Group in Google Group to consult professional there, consult my friend Jack Tan since he knows php and mysql. Consult lecturer, and also consult my other friends study in IT. Beside asking people, Google is the silence tutor of mine. Every problem, just keep digging, there sure be a solution there, but for a beginner like me, scripting and debugging hardly find in Google as well, need to understand and debug by myself. Many steps to go on, and many try and fail.
So here’s the success process, the correct path:
sql_php1
Start from creating a databases in my Cpanel. Need a database to receive the data, ya, for sure.
sql_php2
A user in the database.
Learning from: http://code.google.com/apis/maps/articles/phpsqlinfo.html
sql_php4
Following the tutorials in Google Maps API, change my submitting button on Google Maps (Previously on Share Your Green page). This is much more better as it is more user friendly and easier for people to work on.
After users key in their data and click submit, there’ll be a text stated that the location had successfully added:
sql_php5
And the database in my phpMyAdmin would receive the data and gather it in the table I create before:
sql_php3
Then follow the toturial, create a table with the information in it.
Just follow all the process in the tutorial below. Keep testing, some process hard to understand, some process keep fail, and at the end, succeed.
Then another tutorial to take all the information in my phpMyAdmin SQL data and transform it into XML file, and show it on Google Maps.
From: http://code.google.com/apis/maps/articles/phpsqlajax.html#createtable
So here’s the master sources for most of the problems I face at this stage. Thanks for friends in Google Maps Group for the reply and sharing these links and guide to me. It really leads me to figure what’s the prob I’m having for the moment and what should I do next. Before this, I seriously blur where I’m lacking. It’s a big leap, like a lighting shine in the dark. 😀
http://code.google.com/apis/maps/documentation/javascript/v2/articles.html
From Info Windows to a Database: Saving User-Added Form Data
:Shows how to prompt users to fill out information in an infowindow, and then save that information back into a database.
Using PHP/MySQL with Google Maps
Shows how to use PHP/MySQL and the Google Maps API to create a map that polls data from a database and shows as markers.
Creating a User-Contributed Map with PHP and Google SpreadsheetsShows how to create a user-contributed map, where users can register, login, and add markers to a map, all using PHP + Google Spreadsheets for the backend.
*Google have most of the tutorials of how to do it, as long as I dig for the information, read and understand, do and try, test and debug, and it will eventually lead me to succeed.
Critique 2 – Working Progress 5 – Improvement on Main Page
17 AprKeep tweaking my Maps for a better one.
Adding and changing few important things here:
- Add Facebook Like/Share button for Facebook Share
- Add Tweet button for Twitter Share
- Add Search Bar for my Google Maps
- Change the primary landing latitude of my google maps.
Google Maps Landing Point:
Page Improve 1
I’ve change my landing page to higher point so it can view the exact whole Earth map. This is because my target audience is world wide, so it’s possible to receive submission from anywhere on Earth. =D
Below this is my previous landing point, which is zoom into city level.
Blog Design1
Facebook Like, Twitter Tweet
This is a very important one, since I’m researching on utilizing the power of social media to spread the words and message and unity everyone together on planting green. Facebook and Twitter would be the priority share button here. Might add more, still thinking and planning on it.
Page Improve 2
Code for my Facebook Like:
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.greenunitymap.com&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light&height=21″ scrolling=”No” frameborder=”0″ style=”border:none; overflow:hidden; width:100px; height:21px;” allowtransparency=”true”></iframe>
Source: https://developers.facebook.com/docs/reference/plugins/like/
Code for my Twitter Share:
<a href=”http://twitter.com/share” data-count=”horizontal” data-via=”WongJiaJun”>Tweet</a>
Source: http://twitter.com/about/resources/tweetbutton
Google Search Bar
This is another very important function that need to be put into my Google Maps, for easier surfing on the big map, and find the exact location of users’ place. Improve the speed of them location their position and faster submitting their information to the map. Improve user friendliness of the map. =D
Page Improve 3
Code for Google Search Bar:
map.enableGoogleBar()
*Insert into my Google Maps Code.
Source: http://googlemapsapi.blogspot.com/2007/11/introducing-googlebar.html
Critique 2 – Working Progress 5 Consult Ikhwan
15 AprMy lecturer Kok Yoong introduce me to Ikhwan, which done a project based on Google Maps API before. Thinks he could give me some good advice on solving my problems and improve my project on www.greenunitymap.com
panoramio
Some of my problems at this moment:
- How to show my google maps straight in image format, using Panoramio style.
- Can allow mapping by Google Latitude for instance positioning?
- Problem on how people submit their photo and upload to my website.
- How to lock limit of zoom for my Google Maps
- After people type in and select files to submit on my Share Your Green page, can’t link and no function to receive the data. How to do? How to receive data and how to put it back into my Google Maps API on my main page.
- How to add search button/bar for my Google Maps.
Critique 2 – Working Progress 4
13 AprAfter inserting some coding, my blog design change, and takes time to tweak it back.
design layout error1
design layout error2
Same goes to my another page which is “Share Your Green”. After testing and inserting some codes, and edit the html, the layout gone wrong. So keep testing and editing to tweak it back to normal.
Critique 2 – Working Progress 3
11 AprCoding is hard, but interesting especially how it can build and form a website with so many possibilities gather up together under one website. Need to research and try a lot, inspect elements of other websites, understanding, find source codes, tweaking, editing, testing and keep trying on my Green Unity Map website.
Some of the very helpful source and information that help me on the progress includes:
This is the main, as this is the source codes for all html, most of our websites do have this W3 in our code, so of course, back to basic, check the main base of html codes.
How to build form:
http://www.w3schools.com/html/html_forms.asp
Search button for website:
http://www.w3schools.com/jsref/jsref_search.asp
Creating websites with Dreamweaver CS3
http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml
Adding Map to website, adding marker, adding infoboxes:
http://stiern.com/tutorials/adding-custom-google-maps-to-your-website#infobox
*Keep updating this list.
JJ FYP 2010/2011 