June 25, 2014 5:12 pm

PHP CRUD with Twitter Bootstrap 3 Part – 1/2

PHP CRUD I have received many requests from my readers to create some article on CRUD (stand for Create/Read/Update/Delete) grid its a very common task in web development and we always implement it in our applications very frequently. The purpose of creating CRUD grid is to give an option to your users to Create/Read/Update/Delete data. Your data stored in database and here we are using MySQL database. To display grid we use bootstrap framework.

PHP CRUD with Twitter Bootstrap Part - 1

Basically we divided this tutorial in 2 parts due to lengthy process.

Read: PHP CRUD with Twitter Bootstrap 3 Part – 2/2

In first part we will cover few steps of PHP CRUD like Create Database, Database Connection, Bootstrap grid, Read Data and Create Data other CRUD operation we will cover in our next tutorial.

Database design and table:

database name => phpgang
table name => users
column names => ID, FName, LName, Age, Gender


Database file run in your MySQL to create database and add data in table.

Database connection:

db.php File contens database credentials to connect with database using PDO:

You have to change database values to access your own database.

$host: Database host normally “localhost”.
$user: Database user have access the database tables and run queries.
$pass: Database password required to protect your database.
$dbname: Database name contains your required table.

Bootstrap Grid

Bootstrap is a famous front-end framework to create responsive and clean user interface you can download it from here and its also included in our tutorial download.

Directory looks like this:

Create grid in index.php file with below markup:

Above markup is created under bootstrap user interface rules. table table-striped table-bordered table-hover class given to table to define what kind of table we are going to create like table with border highlight row on hand over stripped color.

PHP CRUD Main page

Create Data

Now its time to make a file to create data create.php file in this file we created a form to get data from our users and insert in our database.

In this page you see a form which add data in table user and redirect you to the index page, when some one post data we first of all check validation of posted data we have added client side validation as well but its necessary to validate user data on server side.

PHP CRUD Create page

That’s all for part 1 we will update part 2 very soon I hope this helps you. Complete demo and source code will be available after publishing remaining 2nd part.

Read Part 2 of PHP CRUD

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • Ben Lue

    Hmm this tutorial isnt working :/

    • huzoorbux

      What errors you are getting in this software?

  • Dean

    i always get the undefined varible fnameError,lnameError, ageError

    • On which file it gives you this error.

      • Dean

        on create.php,and the update.php

        • Code updated please download again.

          • Dean

            still getting the same error

  • Mochi Ongpin

    always getting this I copy and pasted your code. please help

    • Code updated please download it again.

    • Kristjohn Reyes

      same error here

  • Mochi Ongpin

    sir the “form-group has-error” and the span tag “help-block” that display error messages are not working please help me out. im trying to fix your code. I fixed the undefined variable by putting isset.

  • Mochi Ongpin

    sir please remove the required=”required” if you want the condition for form-group has-error and help-block to work. im working on modifying you codes while im learning 🙂 I also put a name to the submit button and changed the !empty($_POST) to isset($_POST[‘btnSub’])

  • Mochi Ongpin

    got it working like this 🙂

  • Mounish Moni

    Thank you sharing this tutorial. Its working fine..:)