Data Integrated Newsletter

Happy new year everyone! This is like my last blog post for year 2011, I wanted to make it a special one but the environment is already noisy and I’ve lost my motivation to even write something that’s why I’m just going to announce the official newsletter for this blog. It’s a newsletter about javascript, php, jquery and everything about web design and development. Its basically just your typical newsletter where you will find links to cool stuff around the web. Here’s an example of what you will be expecting to see:

image 

If you want to subscribe just visit the link below and submit your email.

Data Integrated Newsletter 

If you don’t want to submit your email then you can just check out the archives.

Data Integrated Newsletter Archives

I guess that’s all I have to say, once again happy new year!

How to setup for a free website hosting

In this tutorial I’m going to show you how to setup a website on a free hosting site. Setting up a website on a free hosting site is useful if you want to let other people test the website that you have made without actually having to pay a single cent. But remember that free isn’t really the best solution if you want to tweak something on the configuration files like you usually do in your localhost. Because you can’t actually do stuff like edit your php.ini file or apache .htaccess file on free hosting sites.

 

Create an account

First you have to create an account at xtreemhost.

image

Next, select the free account. Don’t be fooled by the BIG sign up button, click the link below it instead.

image

Then create your co.cc domain. Use the link to go the the co.cc site.

image

Once you got an available domain. Click on the checkbox and input the domain name that you have created.

Next, fill out the fields. Make sure that the email address that you entered is valid and that you have access to it.

image

After the registration, an email will be sent to you which contains your website address, and vista panel login information such as the username and the password.

 

Account Settings

Next, go to cpanel.xtreemhost.com and then login using your username and password.

Once you’re logged in. Click on the Account Settings, which can be found under the help and tutorials section. This is where you will see the mysql username, password and host that you will be using in your database configuration file. This is very important if the site that you are trying to host uses a database.

image

 

Phpmyadmin

Next is phpmyadmin where you can create and manage the database that is used by your site. Note that xtreemhost puts your username as the prefix for each of the database that you create, be sure to use the database name that is generated by xtreemhost in your database configuration file. The database configuration file that you’re going to upload on xtreemhost might look something like this:

$db = new Mysqli("sql304.xtreemhost.com", "xth_9920566", "111AAA", "xth_8888888_newsletter");

And this is what it looks like on your local machine:

$db = new Mysqli("localhost", "root", "1111", "newsletter");

It’s different that’s why you have to be careful not to upload the localhost version of your database configuration file if you want things to work out the way you expect it.

 

File Management

The most important thing that you have to learn is how to upload files to a free hosting site. You can do that by going to the online file manager under the File Management menu. Here is what the file manager looks like looks like:

image

Most of the time you don’t really have to care about the files in the root folder since you will be working inside of the htdocs folder. The htdocs is where you are going to upload all the files. Initially there’s only the index.html file along with the file that tells you that htdocs is where you should upload your file. Here is what mine looks like:

image

There are three ways in which you can upload your files: Java Upload, Flash Upload, and regular upload. Most of the time the regular upload will work just fine but if you want a fancier way of uploading your files you can use the java or the flash upload.

Here is what the regular upload looks like:

image

I recommend using the archive upload since you only have to upload a single zip file and it will automatically be unzipped for you. For this trick to work you must first zip your whole website in the machine that you’re working on, remember to edit your database configuration file before zipping.

 

Accessing your website

The address where you can access your website is included in the email sent by xtreemhost just go check it out if you’re not sure of the correct address.

 

Conclusion

That’s it for this tutorial! You’ve learned how to setup files on a free hosting site. Hosting your site for free has its own limitations like the lack of configurability, limited disk space, and it doesn’t actually let you have your own domain because your website address always ends with the .xtreemhost.com.

Web Development Resources September 17, 2011

Time for another roundup. I don’t really track what links I’m posting here so a few things might get repeated. Especially now that this is the third time that I’m gonna be doing this. So here’s a bunch of links that you might want to check out:

 

Uni-Form
As the name implies it makes form creation easier.

Form validation hints
A tutorial showing you how to create nice looking validation hints.

Ql.aonic.net
Quick lookup for php, mysql, js, and css stuff. Yeah pretty much like a search-engine.

Spurapp.com
A web-application for checking if your site conforms with design basics.

Use google+ to improve your UI
If you want to use the same UI Elements that are used in Google+. Then you can try this one. They also have some of the UI elements inspired by OS X Lion.

Date.js
Awesome Javascript library for formatting date and time.

JS Bin
If you want to experiment on some Javascript code, this is the way to go. You can also include some of the most popular Javascript Libraries. Like Mootools, Jquery, Prototype, and YUI.

jVal
Yet another Jquery form validation plugin.

Jquery Easing
A jquery plugin for performing animations.

Jquery Animations
A beginner tutorial showing you how to perform animations in jquery.

Php js
Php functions ported to Javascript.

 

 

 

 

 

Web Development Resources August 20 2011

What’s up! I’m here again writing about some random stuff that I find  useful for web designers and developers.
I know that I have recently posted a roundup entitled Web Development Resources August 2011. So its expected that you will see something like this 10 days from the time of writing of this post. But I decided to just do it randomly. That is, if my Evernote gets super filled up with these resources then I post it here.
So without further spoilage, here it is:

 

Disallow special characters on text field

http://itgroup.com.ph/alphanumeric/

Submit html form through ajax

http://malsup.com/jquery/form/

Jquery autocomplete
A Jquery plugin for cross-browser autosuggest functionality on text fields. Just don’t forget to turn off autocomplete if you don’t want the browser to fetch autosuggest data from the forms you have recently submitted.

http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/

Php Minifier
If you want to decrease the size of your php file for faster loading. Then this tool is just what you need.

http://tools.php-suit.com/mini/


Javascript Code Minification Tools
Here are some of the tools used for compressing javascript code. Compressed or minified files, downloads faster because it is smaller in size. These tools are really important to improve performance of your site. You may only need this on a production environment.

Code Checking Tools
If you want to improve the quality of your code, be it php, css, or javascript code. Then you can visit the following links and paste the code you want to check. It will show you all sorts of bad stuff about your code no matter how awesome you think your code is.

Javascript Libraries
Here are some of the Javascript libraries that can help your life as a designer or a developer easier.

Jquery useful plugins
This is actually an article which shows you some of the jquery plugins that you might find useful in the current project that you’re working with.

http://marcgrabanski.com/articles/list-of-useful-jquery-plugins

Pagination
The following jquery plugins makes table pagination easier than ever before.

 

Image for web optimizer
Its not just Javascript, css or php files which needs to be compressed. Even images needs it. Yes, again for faster page load and overall site performance.

http://www.smushit.com/ysmush.it/

Image lazy loading
Load the image only when the image is in the visible part of the page. And not when the page loads. This has some performance benefits as well.

https://github.com/tuupola/jquery_lazyload

Custom drop-down menus
If you’re already sick with the default styling and functionality of the html drop-down menu. Then try this script to breath new life into those boring drop-down menus.

http://jamielottering.github.com/DropKick/

Javascript Search Engine
Some sort of a search engine. But exclusively for Javascript stuff. Try it if Big G can’t provide you any good answers.

www.javascript-2.com/

Awesome Collection of Css Tips and Tricks
Yet another awesome article showing you awesome stuff on css.

http://ericrichers.com/blog/2011/08/50-cool-css-tips-and-tricks/

Disable context menu using javascript
Can hide your source code from prying eyes. But pretty much useless once the perpetrator disables javascript on the browser. You can still use this one though if you think people who wants to look at your code doesn’t know how to disable javascript on the browser.

http://www.dynamicdrive.com/dynamicindex9/noright.htm

10 online tools to simplify html5 coding
Another collection of awesome stuff from catswhocode. This time on html tools and sites where you can find useful information on html5.

http://www.catswhocode.com/blog/10-online-tools-to-simplify-html5-coding

5 ways to make ajax calls in jquery
Finally, here’s an absolute beginner tutorial on how to perform ajax calls using the jquery. The most awesome kickass Javascript Library of them all.

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

How to access phpmyadmin remotely

This is yet another quick tip on how to access phpmyadmin remotely. Remotely as in accessing somebody else’s computer through his IP address. Because basically you cannot access somebody else’s computer if its not connected to the internet.
You might have noticed that you get an access denied error when you try to access phpmyadmin using your external ip.

Okay, lets get this started. First you need to open up phpmyadmin.conf from the  C:wampalias directory. That is if you’re using wamp, and you’re on windows. But if not, then try to use a file searching application like everything from void tools. And just search for phpmyadmin.conf.

Change:

<Directory "c:/wamp/apps/phpmyadmin3.3.9/">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</Directory>

To:

<Directory "c:/wamp/apps/phpmyadmin3.3.9/">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Deny from all
Allow from all
</Directory>

Or:

<Directory "c:/wamp/apps/phpmyadmin3.3.9/">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Deny from all
Allow from ipaddress

</Directory>

Restart all services from the wampserver tray icon. And try accessing phpmyadmin using your external ip. Just visit cmyip.com if you don’t know your ip address. Then copy it, and paste it on your browser. An example would be this one: 192.168.x.x/phpmyadmin

Extensions that I use in my browser

In this article, I’ll be showing around the extensions that I use on my google chrome browser. And the things that I usually do with them.

 

Web Technology Notifier

image

As the name of the extension implies. People use this to determine what kind of web technology is used in a website that your eyeballs is currently looking at. It’s a nice visual tool for those of you who want to learn what’s the underlying technology that is being used in the website you’re visiting. The main concern of this extension is for server-side web technology like php, ruby on rails, python, asp.net, jsp and other scripting language used for the web

 

Chrome Sniffer

image 

Its basically like the web technology notifier. But its main concern is client-side or the javascript frameworks like mootools, jquery and dojo. It also shows the content management system that is being used by the site. Some examples are  Joomla, Drupal and WordPress.

 

Session Manager

image

Used for saving your current chrome session. The tabs that are currently opened are included in the items that its going to backup. Its basically taking a snapshot of your current browser session so that you can use it at a later time.

 

Historious

image

Historio.us is a bookmarking service. So you need to create an account at the historiou.us site before you can make full use of this extension.

 

Web Of Trust

image

Use it to determine if a site is safe or not. It also adds some icons beside the links that are produced when you do a search on a search engine. And I think all major search engines like yahoo, google, bing, and ask are supported.

 

I Reader

image

Use this to decrapify the websites that you are viewing. It temporary removes all the clutter in the webpage (ads, and other distractions) when you click on its icon at the right side of the web address.

 

 

Conclusion

That’s the list of the extensions that I always install whenever I install Google Chrome. You can adapt it if you want. And you can also share yours in the comments. Thanks for readingSmile

How to install Drupal

In this guide I will show you how you can install Drupal on your localhost.

First, you need to download Drupal from their site:

http://drupal.org/

Extract the tar.gz file to your web accessible folder. Make sure you have the index.php on the root of the drupal folder.

image

Second, you need to make sure that Drupal is really compatible to run on your current web server. In this case, the apache Webserver which came with the installer of wampserver. Which you can download for free at:

http://www.wampserver.com/en/download.php

At the time of writing of this guide, I have:

    • php –version 5.3.0
    • mysql –version 5.1.36
    • apache –version 2.2.11

Be sure that your wampserver installation complies with the requirements of the Drupal Content Management System. Because it won’t really work properly if it doesn’t meet the requirements.

http://drupal.org/requirements

As a summary for the requirements:

    • MySQL 3.23.17 or higher. MySQL
    • PHP version 4.4.0 or higher for Drupal 5 and Drupal 6, PHP 5.2.5 or higher for Drupal 7
    • Apache 1.3 or Apache 2.x hosted on UNIX/Linux, OS X, or Windows.

The wampserver installer will do, so you won’t have to install other versions of php, mysql and apache to make this work.

Next thing that you need to do is to open it up on your browser by typing:

http://localhost/drupal 

or whatever name you gave to the folder. Just choose Standard and click on Save and continue

image

Select the default English. Then click save and continue.

image

Enter your database server credentials. The defaults would be:

username: root

password:

Before you put in a database name. You first need to create one. To do that, launch MySql Console from the Wampserver tray icon found at the bottom right corner of the screen.

image

Input these commands on the mysql console:

create database drupal_db

You can change the drupal_db to whatever you want, it doesn’t  really matter if you use another name.

image

You’re now ready to input the database name you have just created. This is where the installer is going to put the tables.

image

After you click on the save and continue, this is what it will look like. Just wait for it to finish. It won’t take long.

image

All you have to do now is to configure the site name and other settings

image

Scroll down a bit, and then set the options applicable to you. Then click save and continue.

image

After that, just click on visit your new site and the installer will bring you to the newly created drupal site of yours. Installed on localhost.

image

So you won’t really see this on google search results or on any search engine if you try to search it.

image

 

Conclusion

That’s how you install drupal. A nice and free content management system just like Joomla. I might make another tutorial like this on how to use Drupal so stay tuned. Thanks for readingSmile