Posts Tagged ‘form’

Getting Started with CRUD In PHP

It has become a common necessity for website owners to collect data and manage it properly. Creating a MySQL CRUD class allows you to conveniently create, read, update and delete entries for any of your projects, indifferent of how the database is devised. CRUD allows us to generate pages to list and edit database records.
So, in this tutorial I will show you how to build a simple CRUD web app, that will empower you with the basic functions of database management.

You can download the source files for this tutorial here: CRUD In PHP Source

In this article I will discuss following things:-
Creating the database
Creating the table
Make connection to the database
Insert records in table
Update records table
Delete records from table

The tools I will be using are:-
XAMPP
Dreamweaver CS5 (you can use Notepad++ or any other IDE)

Before continuing with the tutorial I would like to discuss the following definitions:
What is CRUD?
What is a database?
What is a table?
What is XAMPP?
Why we use Dreamweaver or any other IDE for website development?

What is CRUD?

CRUD stands for create, read, update, delete. So before working on any language, we are going to get our hands wet by going to CRUD operation.

What is database?

“A comprehensive collection of related data organized for convenient access, generally in a computer.”
This means database is something we use to store our data.

What is table?

A table is a container that holds information about like items. For example, an “Employee” table would contain the same basic details on each employee: name, title, department and so on.

What is XAMPP?

XAMPP is a free to use software that comes with three major services:-
1. Apache ()
2. Mysql ()
3. PhpMyAdmin ()

Why do we use Dreamweaver or any other IDE for website development?

Dreamweaver is a very popular IDE (Integrated Development Environment). IDEs are used for fast website development as it is more reliable and makes it easy to remove and identify errors at no time.

So let start our topic as we have gone through all the necessary knowledge we have to be known.

Step-1: Creating the database:

First run the XAMPP and start the Apache and MySQL services. If it does not initially start then try to see if you have Skype or any other application that may be using XAMPP’s ports. Close these applications to avoid any conflicts. Open phpMyAdmin and start Apache and MySQL.

Go to http://localhost/phpmyadmin in your browser and create a database and name it crud, you can name the database as require.

Step-2: Creating the table:

To create the table you have to click on the database name on the page http://localhost/phpmyadmin and give the name of the table as user and number of fields to 3.

Now a new page will be created. Fill the page as below:

Similary, fill the other two fields as:-

Field: username
Type: varchar
Length/Values: 25

Field: password
Type: varchar
Length/Values: 25

Don’t change any of the other field settings and click on the save button.

Step-3: Make connection to the database:

To make a connection to localhost, we use mysql_connect(). To select the database, we use mysql_select _db().

We use the following code to connect to the database:-

$connect=mysql_connect("localhost","root","");
mysql_select_db("crud",$connect);

In above two lines, localhost is the hostname, root is the username, password=”” and crud is the database name.

Step-4: Insert records in table:

To insert records in table we use the following mysql query:

$query="insert into user(username, password) values('$username', '$password')";
mysql_query($query);

In the above statements ‘user’ is table name, ‘username’ is the column name of the database table, ‘user’ and ‘password’ are also the column names of the table ‘user’. To run this query we use mysql_query($query).

Step-4: Update records in the table:

To update record in table we use the following mysql query:

$query="update user set username='$username' , password='$password' where id=".$_POST['id'];
mysql_query($query);

In above statement $_POST is used to get the values submitted from the html form whose method is post.

Step-5: Delete records From table:

To delete record from the table we use the following mysql query:

$query="delete from user where id=".$_GET['id'];

In the above statement $_GET is used to get the values submitted from the html form whose method is get.

Code of Index.php file

Download Source Files

<?php
$connect=mysql_connect("localhost","root","");
mysql_select_db("crud",$connect);
$username;
$password;
if(isset($_POST["insert"])){
	if($_POST["insert"]=="yes"){
	$username=$_POST["username"];
	$password=$_POST["password"];

$query="insert into user(username, password) values('$username', '$password')";
if(mysql_query($query))
echo "<center>Record Inserted!</center><br>";
	}
}

if(isset($_POST["update"])){
	if($_POST["update"]=="yes"){
	$username=$_POST["username"];
	$password=$_POST["password"];

$query="update user set username='$username' , password='$password' where id=".$_POST['id'];
if(mysql_query($query))
echo "<center>Record Updated</center><br>";
	}
}

if(isset($_GET['operation'])){
if($_GET['operation']=="delete"){
$query="delete from user where id=".$_GET['id'];
if(mysql_query($query))
echo "<center>Record Deleted!</center><br>";
}
}
?>
<html>
<body>
<form name=”insert” method="post" action="index.php">
<table align="center" border="0">
<tr>
<td>username:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="hidden" name="insert" value="yes" />
<input type="submit" value="Insert Record"/>
</td>
</tr>
</table>
</form>
<?php

if(isset($_GET['operation'])){
if($_GET['operation']=="edit"){
?>
<form name=”update” method="post" action="index.php">
<table align="center" border="0">
<tr>
<td>username:</td>
<td><input type="text" name="username" value="<?php echo $_GET['username']; ?>" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="text" name="password" value="<?php echo $_GET['password']; ?>"/></td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="hidden" name="id" value="<?php echo $_GET['id'] ?>" />
<input type="hidden" name="update" value="yes" />
<input type="submit" value="update Record"/>
</td>
</tr>
</table>
</form>
<?php
}}
?>

<?php
$query="select * from user";
$result=mysql_query($query);
if(mysql_num_rows($result)>0){
	echo "<table align='center' border='1'>";
	echo "<tr>";
	echo "<th>Id</th>";
	echo "<th>Username</th>";
	echo "<th>Password</th>";
	echo "</tr>";
	while($row=mysql_fetch_array($result)){
	echo "<tr>";
	echo "<td>".$row['id']."</td>";
	echo "<td>".$row['username']."</td>";
	echo "<td>".$row['password']."</td>";
	echo "<td><a href='index.php?operation=edit&id=".$row['id']."&username=".$row['username']."&password=".$row['password']."'>edit</a></td>";
	echo "<td><a href='index.php?operation=delete&id=".$row['id']."'>delete</a></td>";
	echo "</tr>";
	}
	echo "</table>";
}
else{
echo "<center>No Records Found!</center>";
}

?>
</body>
</html>

Explanation of the code:

$connect=mysql_connect("localhost","root","");
mysql_select_db("crud",$connect);

The above two statements help to connect to the database(“crud”).

if(isset($_POST["insert"])){
	if($_POST["insert"]=="yes"){
	$username=$_POST["username"];
	$password=$_POST["password"];

isset($_POST["insert"]) checks whether it is set or not, meaning whether the insert button is pressed or not.

if($_POST["insert"]=="yes"){

This statement checks whether the inserted form is submitted or not.
$_POST["username"] gets the value submitted from the form. Post stands for form method which is post.

$query="insert into user(username, password) values('$username', '$password')";
if(mysql_query($query))

$query stores the insert query. This query is inserting the username and password that we get from the insert form when the insert button is pressed to the table ‘user’.

if(mysql_query($query))

if statements returns true if the query is successfully run.

if(isset($_POST["update"])){
	if($_POST["update"]=="yes"){
	$username=$_POST["username"];
	$password=$_POST["password"];

$query=”update user set username=’$username’ , password=’$password’ where id=”.$_POST['id'];
if(mysql_query($query))
echo “

Record Updated

“;[/sql]

These statements updates record in the table ‘user’ getting the id which is submitted with the form named ‘updat’’. Code logic is the same as described before for insert.

if(isset($_GET['operation'])){
if($_GET['operation']=="delete"){
$query="delete from user where id=".$_GET['id'];
if(mysql_query($query))
echo "<center>Record Deleted!</center><br>";
}

The above code runs when the delete link is pressed. It first checks whether the operation keyword is set or not. If it is set then check whether it is delete operation and then runs the delete query. If the query runs successfully then it shows ‘Record Deleted!’ with center align to the page.

<form name=”insert” method="post" action="index.php">

This defines the form with the method post. The difference between post and get method of form is that with get method the form submitted values are showed in the url and there is limit to insert values with the form. Post is used if we want to submit some private data and want to hide the information from the user. The data is not attached with url. Action defines where to submit the values. We have to submit the values in the same page so we type the name of the same file i.e index.php.

<input type="hidden" name="insert" value="yes" />

Hidden type means this field is hidden from the user but it contains the data and is also submitted when the form is submitted while pressing the button. I am using this hidden field to check whether the form is submitted or not.

if(isset($_GET['operation'])){
if($_GET['operation']=="edit"){

The above two lines of code checks whether the operation is set and operation is edit or not.

value="<?php echo $_GET['username']; ?>"

Assign the username value “get” from the url. Nowthis value loads with the form.

$query="select * from user";
$result=mysql_query($query);

The above two line code runs the select query to get data from the table ‘user’.

if(mysql_num_rows($result)>0){

Count the number of records fetched from the table user and checks whether records are greater than zero.

while($row=mysql_fetch_array($result)){
	echo "<tr>";
	echo "<td>".$row['id']."</td>";
	echo "<td>".$row['username']."</td>";
	echo "<td>".$row['password']."</td>";

These statements fetches the table rows from the $result and then stores in $row array and then we display all of the elements from this array i.e. $row[‘id’] and two more.

href='index.php?operation=edit&id=".$row['id']."&username=".$row['username']."&password=".$row['password']."'>edit</a></td>";
	echo "<td><a href='index.php?operation=delete&id=".$row['id']."'>delete</a></td>";
	echo "</tr>";

These statements are used to add some data to the url i.e id, username and password.

How this application works

First the page loads and then there is an option to insert record. If any record exists in the table then it shows up with the edit and deleted links.
When we click on edit link, a new form opens and we can edit the record and then click on update record button and the record is updated in the database. The page loads again and this time it shows the new updated records with the same edit and delete links.
When we click on the delete link the record is deleted and a message will be displayed at the top of the page that the record is successful deleted.
This is how the application works.

These are the terms that may help you more:-

isset()
isset() is used to check whether the variable passed to this function has assigned any value.

Hidden field
The hidden type of html field is that which is submitted with the form but not visible in the page displayed. We use hidden fields to transfer values in the form such as id of the table.

How to run the code

Run the code in Firefox or Chrome by first running XAMPP with apache and MySQL started. Also note that you have to create the database and table with same name I used column names with same name as I have used in this application.

So, you now know the basics of CRUD in PHP. I hope you liked this tutorial and you have learnt CRUD in PHP.


20 Useful Free iPhone and iPad Apps for Designers and Developers

Big shocking news of the day: iPhones and iPads are increasingly popular and widespread and are being used by more and more people. But what’s interesting is this also includes web developers ie. you. And the following list will feature 20 free iPhone and iPad apps for web developers.

While iPhones and iPads appear to be more consumer-driven devices, there are apps on there that can assist in your web development and make your development and design life much easier. Think of it as having sketchbooks, notepads, calculators, communications devices, and more – all in one device. Of course, there are paid apps that provide much more robust development tools, but these free apps will be more than enough to get you started using your iPhone and/or iPad as a web development aid.

Without further ado, here are 20 free iPhone and iPad apps for web developers:

Dropbox


DropBox lets you sync and share files across computers and your iPhone and iPad.

SugarSync


SugarSync is in case you want an alternative to Dropbox. Sync and access files from your other devices and computers.

2X Client


2X Client lets you remotely connect to and work on your Windows computer.

LiveView


LiveView is a remote screen viewing app that can help you design quick simulations and demos and try out prototypes of your designs. Also useful for designing for mobile apps or web apps for use on mobile devices.

Adobe Ideas


Adobe Ideas is a digital vector-based sketchbook for drawing and capturing design ideas – which you can then send for further working on to Photoshop and Illustrator.

Doodle Buddy


Doodle Buddy is a doodling app which can let you quickly sketch out design ideas and anything else with your fingers. Colors included.

Evernote


Evernote lets you capture and store design and development notes, ideas, snapshots, recordings, and anything else for easy finding later on. Paid in-app upgrades if you need more features.

Note Hub


Note Hub is a note-taking app that lets you create projects and add notes, to do lists, drawings, and whatever else.

TaskPad HD


TaskPad HD is a task manager that lets you sync tasks across all of your devices as well as manage your tasks via a web browser.

Twitter


The official Twitter app for when you need to talk to clients and collaborators via Twitter.

Twitterrific


Twitterrific is for those who prefer a different interface for using Twitter to stay connected with clients and collaborators – choice is good.

Skype


Skype on your iPhone or iPad – need more be said? Really useful for talking to clients and collaborators, especially when they’re in different parts of the world. It’s free to call if you’re both using Skype, otherwise affordable rates let you call landlines and cell phones.

Fring


Fringe is an alternative to Skype. Text chat with people via Skype and other instant messenger accounts and get free calls if you’re both using Fring.

WordPress


WordPress has an iPhone and iPad app that lets you create and edit posts and pages, moderate comments, and other tasks for your WordPress.com blog or WordPress-powered website.

Adobe Photoshop Express


Adobe Photoshop Express is a super-slimmed down version of Photoshop for when you need to quickly edit and upload photos and images on your iPhone or iPad.

PCalc Lite Calculator


PCalc Lite Calculator is a scientific calculator for when you need exact measurements and calculations for your web development projects and designs. This is the free fully-functional lite version of the paid full calculator app.

MedCommons Prototyper


MedCommons Prototyper helps build SplitView layouts for easy presenting of web content on an iPad by letting you test your HTML5 and Ajax designs for things like rotation and resizing.

Craigsphone


Craigsphone is Craigslist for iPad – ’nuff said. For when you need to find clients or work, people to outsource to, and anything else related to your web development and design work.

FontShuffle


FontShuffle is useful for finding the right font for your project or just browsing for typography inspiration – hundreds of font families are sorted by similarity.

SkyGrid


SkyGrid is a better RSS feed reader – an easy way to browse relevant design and development information and articles.

Over to you: what are your favorite free iPhone and iPad apps for web developers? What other apps should be on this list? Feel free to share your useful additions in the comments section below.

You might also like…

30 Brilliant iOS Applications for Freelance Designers and Developers →
Showcase of Beautiful and Unique iPhone Apps →
iPhone and iPad Development GUI Kits, Stencils and Icons →
15 Useful Free Android Apps for Web Developers →
Android App Developers GUI Kits, Icons, Fonts and Tools →
45+ Cool Google Android Apps – The Perfect iPhone Replacement →
Mobile Web and App Development Testing and Emulation Tools →
14 Free Mobile Application Development Icon Sets →


20 New Free Icon Sets for Web Designers and Developers

Once or twice a year we like to take a look at what new icon sets are freely available for designers and developers. We have found a nice selection for you covering most aspects of web, mobile and app devlopment. You will love them!

Stock Icon Set

Stock Icon Set
Number of Icons: 154
Format(s): .ico
Size(s): 16px 32px, 64px & 128px
Stock Icon Set →

iconSweets 2

iconSweets 2
Number of Icons: 400+
Format(s): .psd
Size(s): 16px, 32px & 64px
iconSweets 2 →

Retina Display Icon Set

Retina Display Icon Set
Number of Icons: 400+
Format(s): .png
Size(s): 24px, 48px & 64px
Retina Display Icon Set →Full Preview →

Android Icons – Shape Package

Android Icons – Shape Package
Number of Icons: 40+
Format(s): .png, .psh
Android Icons – Shape Package →

Simple Icon Set

Simple Icon Set
Number of Icons: 16
Format(s): .psd & .png
Simple Icon Set →

NounProject

NounProject
Number of Icons: 500+
Format(s): .svg
NounProject →

Open Source Multitouch Gesture Library

Open Source Multitouch Gesture Library
Number of Icons:
Format(s): .png & .eps
License: Released under a FreeBSD license
Open Source Multitouch Gesture Library →

Agile Toolkit Icon Set

Agile Toolkit Icon SetNumber of Icons: 128
Format(s): .png
Size(s): 16px
Agile Toolkit Icon Set →

Micro Icons

Micro IconsNumber of Icons: 32
Format(s): .ico
Size(s): 16px
Micro Icons →

Strabo Icon Set

Strabo Icon SetNumber of Icons: 16
Format(s): .png
Size(s): 24px
Strabo Icon Set →

Pixim Icon Set

Pixim Icon SetNumber of Icons: 54
Format(s): .gif
Size(s): 12px
Pixim Icon Set →

Pixel Perfect Collection

Pixel Perfect Collection
Number of Icons: 33
Format(s): .png, .ico & .icns
Size(s): 48px
Pixel Perfect Collection →

Basic Rounded

Basic Rounded
Number of Icons: 27
Format(s): .psd
Basic Rounded →

LinkDeck Social Bookmark Icon Pack

LinkDeck Social Bookmark Icon Pack
Number of Icons: 45
Format(s): .psd
Size(s): 16px, 32px, 64px, 128px & 256px
LinkDeck Social Bookmark Icon Pack →

Buddycon – Vector-Based Social Media Icons

Buddycon - Vector-Based Social Media Icons
Number of Icons: 126
Format(s): .ai & .png
Size(s): 32px
Buddycon →

WPZOOM Developer Icon Set

WPZOOM Developer Icon Set
Number of Icons: 154
Format(s): .png, .ai & .psd
Size(s): 48px
WPZOOM Developer Icon Set →

E-Commerce Icons

E-Commerce Icons
Number of Icons:
Format(s): .psd
Size(s): 48px, 64px & 128px
E-Commerce Icons →

Kaching eCommerce Icons

Kaching eCommerce Icons
Number of Icons: 24
Format(s): .png, .ai & .psd
Size(s): 48px & 400px
Kaching eCommerce Icons →

Credit Card, Debit Card and Payment Icons Set

Credit Card, Debit Card and Payment Icons Set
Number of Icons: 18
Format(s): .png
Size(s): 32px, 64px & 128px
Credit Card, Debit Card and Payment Icons Set →

Credit Card Icon Pack

Credit Card Icon Pack
Number of Icons: 35
Format(s): .png
Size(s): 32px
Credit Card Icon Pack →

…and finally … HTML5 Icons

HTML5 Icons
Number of Icons: 10
Format(s): .png & .ai
Size(s): 512px
HTML5 Icons →

Original W3C HTML5 Icons

Original W3C HTML5 Icons
Format(s): .png & .svg
Size(s): 32px, 64px, 128px, 256px & 512px
Original W3C HTML5 Icons →

You might also like…

The Top 50 Web Development Icon Sets from 2009 →
Top 50 Web Development, Design and Application Icon Sets from 2010 →
50 of the Best Ever Web Development, Design and Application Icon Sets →
50 Social Service and Bookmarking Icon Sets for Bloggers Part 1 → & Part 2 →
30 of the Best Web Development and Design MINI Icon Sets →
15 Uniform Payment Options Icon Sets for Ecommerce Design →
14 Free Mobile Application Development Icon Sets →
8 Free Pictogram Icon Libraries and Collections →
40 Fresh and Free Icon Sets for Web Designers and Bloggers →