Vision Master Designs » MySQL

Tutorial : Auto Completer using Prototype, Script.aculo.us

Michael — Sun, 26 Oct 2008 13:35:43 +0000

How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

Index

Page 1 : Introduction and
Page 2 : Auto Suggest Box (local)
Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)

Demo & Source Download

Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here

Download Source Here

Problem Statement

Lets try creating an Auto Suggest Box which displays the states of America as the user begins to type a state’s name in the text box.

Solution

Before using any functions, first we need to make our HTML page i.e how the suggestion box is going to look.

Create an empty HTML file.
First, to take the input of any state name from the user we need an input box.
Second, we need a container to display all the probable suggestions i.e different names of states according to User input.

Lets create these right now.
```
    
    
    
    
```
Now that we have designed our suggestion box, its time to implement the Auto Suggest Box method. Since this method is readily available as a part of Script.aculo.us, we need to include the scriptaculous file, and since scriptaculous depends on prototype, we need to include the prototype file to our HTML document. Type following code inside the tag.
```
	
    
    
```

The HTML page should look something like this.

    
    
    
    
    Untitled Document

Now that we have a HTML page ready, preview it. Obviously it won’t work yet. We still have to define the AutoCompleter function.

There are 2 ways to achieve our goal. Script.aculo.us’s Autocompleter comes in two flavors.

Autocompleter.Local : The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.
Ajax.Autocompleter : Which relies on a remote server to give it suggestions, making an AJAX Request whenever suggestions need to be retrieved.

Now both have thier Pros and Cons. I`ll explain each one of them and how they can be used.

Tutorial : Using phpMyAdmin to manage mySQL

Michael — Fri, 25 Jul 2008 17:53:00 +0000

Hello Everyone !

I am really excited ! Its been 18 days since the blog started and the response is amazing. I really hope these tutorials are helpful. Anyways I have seen a lot of people having problem setting up phpmyadmin and Lot more have no idea how to use it. So this tutorial is dedicated to you folks. I`ll teach you the basics of how to play with phpMyAdmin. Frankly I have not seen much tutorials on how to use phpmyadmin, and I don`t know how well you guys will like it.
Anyways

phpMyAdmin 2.11.x Front Page

The Front page shows you something similar to the above image. As you can see, On the left we have the existing databases. If there are none available its fine, and on the right we have the page which has a lot of text in it . You can see that I have marked the area from where you can create your database.
For more information about your mysql server, its configurations etc you can check the many links on this page. Exploring more links is the key to master it

Lets create a database called ‘test’

Now lets create a database called test. Put the name test in the Create New database box and click on create.

You`ll see something similar to the above when you create your first database. Cool ! Now you might notice that I have boxed an area in the above image.

Structure – Shows you the structure of the database (Schema)
SQL – You can use the query language to modify your database
Search – Search for a particular item
Query – Right now don`t worry about this much.
Export/Import – You can export your database in SQL or import an equivalent
Operations – Operations you can perform on your database
Privileges – Shows you the user who can use this database and his privileges.
Drop – Delete the database

Phew that was quite a bunch ! Lets move on. Now we have created our database test. Lets create tables in it. Click on SQL from the area I had marked in the image, and goto the next step.

Create table ‘user’

You will see a page similar to the above image. Write a SQL query to create a table.

CREATE TABLE user (
id INT AUTO_INCREMENT NOT NULL,
user VARCHAR(50),
pass VARCHAR(50),
PRIMARY KEY(id) )

If the code was executed successfully you`ll see something similar to the above image. I think the image is self explainatory. On the left the table you just created under database test. Click on ‘test’. you will be taken to the ‘Table Info Page’.

phpMyAdmin Database Info page

This page is where all your tables of a particular database are shown. As shown in the above figure, in the database test, we currently have only 1 table i.e user.

phpMyAdmin Table Info page

Ok ! So you clicked on test and something similar to the above image will be displayed. This page shows you the structure of your table. As you can see, the table we had created has 3 attributes

id -int (Primary key)
user -VARCHAR of size 50
pass – VARCHAR of size 50

You can see in the above image, I have marked an area “edit the attributes”. Those little icons help to modify your attributes. From the Left -

Browse – Browse values of a particular attribute
edit – Edit structure of attribute, (example: change particular attribute’s datatype from VARCHAR to text)
delete – delete particular attribute
Primary, Unique, Index. (It is pretty self explainatory, if you know anything about DBMS)

Insert values inside table

Ok, Now you know how to create a database, create table inside a database. Lets learn how to insert values inside our table. First goto the ‘user’ ‘table info page’. then Click on Insert in the top.

You`ll see a page similar to the above image. As you can see, its pretty neatly laid out, I hope its not that tough for you to decide where to type your data *There is no need to type anything in id, since if you notice this line
id INT AUTO_INCREMENT NOT NULL which we had typed earlier to create a table ,you`ll see that id is a primary key & it auto increments as you go on inserting records.*

The above image will be displayed once you have inserted your values successfully. Now since you have inserted values, you can double check or see what all values your table contains by clicking on the Browse link on the top. It`ll browse the table for all the records. The following image is what it`ll look like.

phpMyAdmin Table browse page

You can see all the values for every record. You can edit, delete the records as well. The small Icons are very obvious and not hard to miss. PhpMyAdmin also gives the ability to see results for particular queries. Suppose you want to execute a query on a particular table then click on SQL on the top of the ‘Table Info/Browse Page’

Execute SQL queries on your table

The above page is how it`ll look like, you can type in any query to check.

Well, that was very basics of phpMyAdmin. If you guys want any help regarding other functions of phpmyadmin feel free to ask.

If the response for this tutorial is well, then I`ll move to the advanced phpmyadmin stuffz . Enjoy Guys

Found this tutorial really useful, you can click here to donate.

else you can click on just any ad

Tutorial : Creating a Content Management System using PHP/MySQL

Michael — Sun, 20 Jul 2008 18:46:07 +0000

Its been 2 weeks since visionmasterdesigns.com was started and I am very glad with the response. Lot of people want to explore PHP/MySQL more and I think I`ll give in to that . So Today lets design a Content Management System using PHP/MySQL.

Index

Page 1 : Introduction
Page 2 : Database Work
Page 3 : functions.php
Page 4 : articlefunctions.php
Page 5 : insertarticle.php
Page 6 : editarticle.php
Page 7 : article.php – Our start File
Demo – Here
Script – Here

Don`t get scared seeing the number of pages. This system has 5 files as listed above. Our CMS features add,edit and delete article records.

Introduction to CMS

CMS is an application through which you can add content without the need of uploading any files. You can create,edit,delete articles directly online. These articles are stored in the backend i.e database, in our case MySQL. Everytime user requests for a particular article, the php script retrieves the article and displays it to the user.

I`ll try to keep it as simple as possible.

Tutorial : Intoduction to AJAX with PHP

Michael — Thu, 17 Jul 2008 10:31:43 +0000

Hey Everyone,

I have been busy lately, but that ain`t gonna stop me from writing tutorials ! Anyways I had promised a Ruby on Rails tutorial, I am working on that, I am trying to make it as descriptive as possible, but before I post that, a lot of people asked me what is AJAX, how to integrate it with PHP/MySQL etc ? Well guys, This tutorial is dedicated to you all !

Along with answering all your queries, I will be teaching you how to make a simple application in PHP/MySQL using AJAX.

Index

Page 1 : Introduction
Page 2 : Introduction to ‘AJAX’
Page 3 : General AJAX code
Page 4 : Ajax Application using PHP (Username validator)
Click here to see demo

Required : Some basic knowledge in Javascript, HTML.

Tutorial : Developing your First Ruby on Rails 2 Application

Michael — Wed, 09 Jul 2008 19:30:44 +0000

So, you want to make an application using Ruby on Rails (RoR) huh ! Well, Lets try to make a simple “Article System”. Ruby on Rails is very easy at the same time a lil complicated. If you want to know more theory about Ruby on Rails, you can visit its official homepage http://www.rubyonrails.org. If you want a small summary of what it is, you can read my previous post Tutorial : Installing Ruby on Rails in Windows Vista/XP.

Like I said in my previous post, RoR uses the MVC Architecture. (M-Model, V-Views, C-Controller)

The below diagram must be self-explainatory, but if it is not, then
Models – Models communicate with the database, to retrieve the data and keep.
Controller – Any requests made by the browser are forwarded to the Controller by the View, which refers the Models and modifies it in different ways (methods written in the Controller) and returns the results to View.
View – This communicates with the browser, takes the inputs and forwards it to the Controller for the respective action, and the returned result from the Controller is forwarded by the view back to the browser.

Anyways, that was about MVC. So in RoR we always have to create these files for different functions.
For our Article System, our objective is to create a system in RoR

Create Database ‘articlesystem_development’
Take Article input from User
Display All the Article
Edit Article
Delete Article

If we were to use PHP, this system would take not less than 50 Lines of Code, but in RoR …. you`ll soon find out;)

Firstly open up Command Prompt (Start->Run) type cmd and click OK, then lets navigate to our ruby folder and create our application.
The Syntax to create a new application is
```
rails -d mysql appname
```
So type
```
C:\ruby\bin\>rails -d mysql articlesystem
```
A long list of files & directories are created.
Before editing, Create a database articlesystem_development through phpmyAdmin. If you don`t know how to create a database then refer to Tutorial : Creating a Content Management System using PHP/MySQL else you can use the mysql command to create the database.
1. Goto Start->Run. Type cmd and hit Enter. You will be prompted with the command prompt.
2. type mysql -u username -p, hit enter
3. It`ll prompt you for your password. Enter the password.
4. Once your inside the console type CREATE DATABASE databasename \g i.e mysql>CREATE DATABASE databasename \g
5. If you see the following then you have successfully created a database.
```
mysql> create database boo \g
Query OK, 1 row affected (0.00 sec)
```
Good ! Now navigate to F:\server\ruby\bin\articlesystem\config and open the file ‘database.yml’ in wordpad.
```
development:
adapter: mysql
encoding: utf8
database: databasename
username: username
password: password
host: localhost

test:
adapter: mysql
encoding: utf8
database: databasename
username: username
password: password
host: localhost

production:
adapter: mysql
encoding: utf8
database: databasename
username: username
password: password
host: localhost
```
You will see the following,except the password area has not been edited yet so type in your mysql user password. (If you have followed the previous tutorial, then password is root), and please enter the same database name in all development,test and production.
Save the file.
Now comes the fun part. Open up Command Prompt. Now we need to create the tables for our database.
Our database schema is

id(int) title(string) article(text)
1 test article bla bla bla.. lot of content

The above post was just an example, so basically we have 3 attributes i.e id, title and article.
We will be using rails “Scaffolding” feature to create these tables and link it with our system. Scaffolding as the name says, to clean the windows of a high rise building, scaffolding is used as support temporarily, similarly here we are going to use ‘scaffold’ to generate links & code.

Now type in

c:\ruby\bin\articlesystem>ruby script/generate scaffold article title:string article:text

You`ll see notice that rails creates another bunch of files

C:\ruby\bin\articlesystem>ruby script/generate scaffold article title:string article:text
exists  app/models/
exists  app/controllers/
exists  app/helpers/
create  app/views/articles
exists  app/views/layouts/
exists  test/functional/
exists  test/unit/
exists  public/stylesheets/
create  app/views/articles/index.html.erb
create  app/views/articles/show.html.erb
create  app/views/articles/new.html.erb
create  app/views/articles/edit.html.erb
create  app/views/layouts/articles.html.erb
create  public/stylesheets/scaffold.css
create  app/controllers/articles_controller.rb
create  test/functional/articles_controller_test.rb
create  app/helpers/articles_helper.rb
route  map.resources :articles
dependency  model
exists    app/models/
exists    test/unit/
exists    test/fixtures/
create    app/models/article.rb
create    test/unit/article_test.rb
create    test/fixtures/articles.yml
create    db/migrate
create    db/migrate/20080709183936_create_articles.rb
C:\ruby\bin\articlesystem>

I know, there are hell lot of files being created !! Anyways, I`ll just tell you what RoR has generated, it has managed to create
- article.rb -> Model inside c:\ruby\bin\articlesystem\app\models\,
- articles_controller.rb -> Controller (Which has methods of all the functions i.e Create,delete,showall,edit) inside c:\ruby\bin\articlesystem\app\controllers
- index.html.erb, edit.html.erb, new.html.erb, show.html.erb -> View Files (More like templates which determine the looks of the site) inside C:\ruby\bin\articlesystem\app\views\articles
Remember MVC … you can check the code out. But don`t modify any right now.
Now all you have to do is create the tables of the database. Hold on your horses, no need of logging in to mysql to create your tables. Just type this code
```
C:\ruby\bin\articlesystem>rake db:migrate
```

rake db:migrate -> executes the database schema RoR had generated automatically,
Not only did RoR generate so many files, It also generated the table schema for articles.

# This file is auto-generated from the current state of the database. Instead of editing this file,
# please use the migrations feature of Active Record to incrementally modify your database, and
# then regenerate this schema definition.
#
# Note that this schema.rb definition is the authoritative source for your database schema. If you need
# to create the application database on another system, you should be using db:schema:load, not running
# all the migrations from scratch. The latter is a flawed and unsustainable approach (the more migrations
# you'll amass, the slower it'll run and the greater likelihood for issues).
#
# It's strongly recommended to check this file into your version control system.

ActiveRecord::Schema.define(:version => 20080709183936) do

create_table "articles", :force => true do |t|
t.string   "title"
t.text     "article"
t.datetime "created_at"
t.datetime "updated_at"
end

end

Voila !!! RoR has just created all the necessary tables for you in mysql. Don`t believe me ? go check your database. Don`t be amazed, thats nothing, now time to test our code, invoke the ruby web server
```
C:\ruby\bin\articlesystem>ruby script/server
```
Point your web browser to http://localhost:3000/articles
Congratulations !!! you have developed your first application in Ruby on Rails 2. Play around with the application, see what all you can do. RoR by default creates the delete,edit,create,show functions for your application when using “scaffold”. You can add articles, delete em, edit em or view all of em, from just 3 lines of code

This is the power of RoR !! Although I wrote a very basic tutorial (since I had less time), this tutorial covers a little theory of RoR’s architecture, how to create an application using rails in development mode, how to create a scaffold and finally to rebuild the database using rake db:migrate.

So I hope you had fun, you can modify the view files in C:\ruby\bin\articlesystem\app\views\articles if you want to change the look of it.

You can make the application start directly from http://localhost:3000/ I`ll be showing that, in my next tutorial for RoR which includes basic link routing, some more extra features to our article system. In the next tutorial I`ll also discuss about the singular & plural concepts in RoR which are very important. Till then Chow !

Found this tutorial really useful, you can click here to donate.

Tutorial : Installing Ruby on Rails 2 in Windows Vista/XP

Michael — Wed, 09 Jul 2008 12:09:19 +0000

Greetings,

Most of you must have heard of “Ruby on Rails (RoR)”. It being touted as the next best thing (apart from php ). Well lemme give you a lowdown of what Ruby on Rails is…

I`ll try to explain the power of RoR in the simplest of words,

If PHP can do something after typing 75 lines of code, RoR can do the same thing in typing mearly 3 lines of code !!!!
Thats as simple is it gets ! But then again, there is a catch to it, RoR is equally complex. So Today, I`ll just give you the basic idea of what Ruby on Rails is, and how to set up a developer environment for RoR, So next time we can directly start creating applications. woohoo !

But Firstly the basics.
If you are aware of the basics then Click Here to jump below, else read on.

“Ruby is a dynamic, reflective, general purpose object-oriented programming language that combines syntax inspired by Perl with Smalltalk-like features. Ruby was initially developed and designed by Yukihiro “Matz” Matsumoto.”

Ruby is very similar to our native object-oriented programming languages (eg: C++,Java).
You can define variables using ‘@’ symbol.
You can define functions, more commonly known as methods using
```
def method_name
....
end
```

“Ruby on Rails is framework developed particularly for web applications. The framework is coded using Ruby. It basically makes our lives easier by generating code automatically on execution of a single piece of code.

It uses the MVC Architecture. (Model-View-Controller, I`ll be explainin this in the next tutorial, which will be ‘Creating Your First RoR Application’)

I like to tell you that, its not easy deploying a RoR application (Thats right, its an application, not a script or a piece of code, but a combination of lots of directories & files).
Its not anything like the php scripts we upload to the server and run the script by pointing to the right address, there are various modes on how a RoR application is executed (Eg. developer, test, production).

Enough of the technical mumbo-jumbo, lets get down business.

Pre-Requisites :

Webserver + MySQL installed
Ruby (1.8.6) : We need to install the basic ruby binaries and extensions to execute RoR applications.
Download ruby186-26.exe

Basically you must have a normal php/mysql developer environment already installed, if not, you can refer to my earlier tutorial i.e
Tutorial : Installing Apache, PHP5, MySQL5, PhpMyAdmin 2.11 in Windows Vista/XP